aboutsummaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps/lineOfSightApp/src/components/heightChart.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'sdnr/wt/odlux/apps/lineOfSightApp/src/components/heightChart.tsx')
-rw-r--r--sdnr/wt/odlux/apps/lineOfSightApp/src/components/heightChart.tsx126
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 };