1 files changed, 126 insertions, 0 deletions
diff --git a/sdnr/wt/odlux/apps/lineOfSightApp/src/components/heightChart.tsx b/sdnr/wt/odlux/apps/lineOfSightApp/src/components/heightChart.tsx
new file mode 100644
index 000000000..3030fe7dd
--- /dev/null
+++ b/sdnr/wt/odlux/apps/lineOfSightApp/src/components/heightChart.tsx
@@ -0,0 +1,126 @@
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2021 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * =================================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * ============LICENSE_END==========================================================================
+ */
+
+import * as React from 'react';
+
+import type { FC } from 'react';
+import * as d3 from 'd3';
+
+import { useD3 } from "../hooks/d3";
+import { GPSProfileResult } from "../model/GPSProfileResult";
+import { max } from '../utils/math';
+
+type HeightMapProps = {
+  data: GPSProfileResult[];
+  dataMin: GPSProfileResult;
+  dataMax: GPSProfileResult;
+  width: number;
+  height: number;
+  heightPosA: number;
+  heightPosB: number;
+}
+
+const HeightChart: FC<HeightMapProps> = (props) => {
+  const { data, dataMin, dataMax, heightPosA, heightPosB } = props;
+  let ref: React.RefObject<SVGSVGElement>
+
+  const drawSvg = () => {
+    ref = useD3(
+      (svg) => {
+        const margin = 100;
+        const width = Number(svg.attr("width")) - margin;
+        const height = Number(svg.attr("height")) - margin;
+
+        // Add X axis
+        const x = d3.scaleBand()
+          .range([0, width])
+          .domain(data.map(d => (`${d.gps.latitude},${d.gps.latitude}`)))
+          .padding(0.2);
+
+        const maxHeight = max([dataMax.height, heightPosA, heightPosB], d => d)
+
+        // Add Y axis
+        const y = d3.scaleLinear()
+          .domain([dataMin.height, maxHeight])
+          .range([height, 0]);
+
+        svg.append("g")
+          .attr('transform', `translate(${margin / 2}, ${margin / 2})`)
+          .call(d3.axisLeft(y));
+
+        // Bars
+        svg.selectAll("myBar")
+          .data(data)
+          .join("rect")
+          .attr('transform', `translate(${margin / 2}, ${margin / 2})`)
+          .attr("x", d => x(`${d.gps.latitude},${d.gps.latitude}`) || '')
+          .attr("y", d => y(d.height))
+          .attr("width", x.bandwidth())
+          .attr("fill", "#69b3a2b0")
+          .attr("height", d => height - y(d.height)) // always equal to 0
+
+        const firstX = `${data[0].gps.latitude},${data[0].gps.latitude}`
+        const lastX = `${data[data.length - 1].gps.latitude},${data[data.length - 1].gps.latitude}`;
+
+        //add line
+        const x1 = x(firstX)!;
+        const x2 = x(lastX)!;
+
+        svg.append("line")
+          .attr('transform', `translate(${margin / 2}, ${margin / 2})`)
+          .attr("x1", x1)
+          .attr("y1", y(props.heightPosA))
+          .attr("x2", x2)
+          .attr("y2", y(props.heightPosB)) 
+
+          .style("stroke", "#88A")
+          .attr("stroke-width", "3px")
+
+        //append circle on start and end 
+
+        svg.append("circle")
+          .attr('transform', `translate(${margin / 2}, ${margin / 2})`)
+          .attr('cx', x1)
+          .attr('cy', y(props.heightPosA))
+          .attr('r', 10)
+          .attr('stroke', '#223b53')
+          .attr('fill', '#225ba3');
+
+        svg.append("circle")
+          .attr('transform', `translate(${margin / 2}, ${margin / 2})`)
+          .attr('cx', x2)
+          .attr('cy', y(props.heightPosB))
+          .attr('r', 10)
+          .attr('stroke', '#223b53')
+          .attr('fill', '#225ba3');
+      },
+      [data]
+    );
+  }
+
+  drawSvg();
+
+
+
+  return (
+    <svg ref={ref!} width={props.width} height={props.height} />
+
+  );
+}
+
+export { HeightChart };