Skip to content

Commit b031041

Browse files
andresdlt03andresdlt03
committed
restructure chart element
1 parent 3fef702 commit b031041

8 files changed

Lines changed: 81 additions & 184 deletions

File tree

‎ethernet-view/src/components/ChartMenu/ChartElement/ChartCanvas/ChartCanvas.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
1+
import { NumericMeasurementInfo } from "common"
12

2-
export const ChartCanvas = () => {
3+
interface Props {
4+
measurements: NumericMeasurementInfo[];
5+
}
6+
7+
export const ChartCanvas = ({ measurements } : Props) => {
38
return (
4-
<div>ChartCanvas</div>
9+
<div>
10+
{measurements.map((measurement) => (
11+
<div key={measurement.id}>
12+
{measurement.id}
13+
</div>
14+
))}
15+
</div>
516
)
617
}

‎ethernet-view/src/components/ChartMenu/ChartElement/ChartElement.tsx‎

Lines changed: 30 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -2,134 +2,61 @@
22
import CanvasJSReact from '@canvasjs/react-charts';
33
import styles from "./ChartElement.module.scss";
44
import { AiOutlineCloseCircle } from 'react-icons/ai'
5-
import { memo, useRef, useEffect, useCallback } from "react";
6-
import { IChartApi, ISeriesApi, UTCTimestamp } from 'lightweight-charts';
7-
import { MeasurementId, NumericMeasurementInfo, UpdateFunction, useGlobalTicker } from 'common';
5+
import { memo } from "react";
6+
import { MeasurementId, useMeasurementsStore } from 'common';
87
import { ChartId, useChartStore } from '../ChartStore';
9-
10-
type MeasurementToSerieAndUpdater = Map<MeasurementId, { DataSerie: ISeriesApi<"Line">, Updater: UpdateFunction }>;
8+
import { ChartCanvas } from './ChartCanvas/ChartCanvas';
9+
import { ChartLegend } from './ChartLegend/ChartLegend';
1110

1211
type Props = {
1312
chartId: ChartId;
14-
chartHeight: number;
1513
};
1614

1715
// React component that keeps the chart render and measurements represented on it.
18-
export const ChartElement = memo(({ chartId, chartHeight }: Props) => {
16+
export const ChartElement = memo(({ chartId }: Props) => {
1917

20-
// Ref to the CanvasJS chart render
21-
const chartContainerRef = useRef<HTMLDivElement>(null);
22-
// Chart generated into chartContainer
23-
let chart : IChartApi;
24-
let chartLegend = useRef<HTMLDivElement>(null);
25-
// Ref to chart's data series
26-
const chartDataSeries = useRef<MeasurementToSerieAndUpdater>(new Map());
18+
const getMeasurementsFromChart = useChartStore((state) => state.getMeasurementsFromChart);
2719
const removeChart = useChartStore((state) => state.removeChart);
20+
const addMeasurementToChart = useChartStore((state) => state.addMeasurementToChart);
21+
const removeMeasurementFromChart = useChartStore((state) => state.removeMeasurementFromChart);
22+
const measurements = getMeasurementsFromChart(chartId);
23+
const charts = useChartStore((state) => state.charts);
2824

29-
// INITIALIZE ALL THE CHART INITIAL SETTINGS.
30-
useEffect(() => {
31-
// const measurement = getNumericMeasurementInfo(measurementId);
32-
// const chartLegendItem = createChartLegendItem(measurement);
33-
// chartLegendItem.onclick = (ev) => removeSeriesFromChart(ev, measurementId);
34-
// if (chartLegend) chartLegend.current?.appendChild(chartLegendItem);
35-
36-
// const handleResize = () => {
37-
// if (chartContainerRef.current)
38-
// chart.applyOptions({ width: chartContainerRef.current.clientWidth });
39-
// };
40-
41-
// const resizeObserver = new ResizeObserver(handleResize);
42-
// if (chartContainerRef.current)
43-
// resizeObserver.observe(chartContainerRef.current);
44-
45-
// if (!chartContainerRef.current) return;
46-
// chart = createChart(chartContainerRef.current, {
47-
// layout: {
48-
// background: { type: ColorType.Solid, color: "white" },
49-
// textColor: "black",
50-
// },
51-
// width: chartContainerRef.current.clientWidth,
52-
// height: chartHeight,
53-
// timeScale: {
54-
// timeVisible: true,
55-
// secondsVisible: true,
56-
// fixLeftEdge: true,
57-
// fixRightEdge: true,
58-
// lockVisibleTimeRangeOnResize: true,
59-
// }
60-
// });
61-
62-
// chartDataSeries.current.set(measurementId, {DataSerie: chart.addLineSeries({ color: measurement.color }), Updater: measurement.getUpdate});
25+
const getNumericMeasurementInfo = useMeasurementsStore((state) => state.getNumericMeasurementInfo);
6326

64-
// return () => {
65-
// resizeObserver.disconnect();
66-
// chart.remove();
67-
// };
68-
});
69-
70-
useEffect(() => {
71-
// if(chartContainerRef.current)
72-
// chartContainerRef.current.ondrop = (ev) => {
73-
// ev.stopPropagation();
74-
// const measurementId = ev.dataTransfer?.getData("id");
75-
// if (measurementId === undefined || chartDataSeries.current.get(measurementId)) return;
76-
// const measurement = getMeasurementInfo(measurementId);
77-
// chartDataSeries.current.set(measurementId, {DataSerie: chart.addLineSeries({ color: measurement.color }), Updater: measurement.getUpdate});
78-
// const chartLegendItem = createChartLegendItem(measurement);
79-
// chartLegendItem.onclick = (ev) => removeSeriesFromChart(ev, measurementId);
80-
// if (chartLegend) chartLegend.current?.appendChild(chartLegendItem);
81-
// };
82-
});
83-
84-
// Update the chart with the new measurements values.
85-
useGlobalTicker(() => {
86-
chartDataSeries.current.forEach((serie) => {
87-
const {DataSerie, Updater} = serie;
88-
const update = Updater();
89-
const now = (Date.now() / 1000) as UTCTimestamp;
90-
DataSerie.update({ time: now, value: update });
91-
});
92-
});
93-
94-
const removeSeriesFromChart = useCallback((ev: MouseEvent, measurementId: MeasurementId) => {
27+
const handleDrop = (ev: React.DragEvent<HTMLDivElement>) => {
28+
ev.preventDefault();
9529
ev.stopPropagation();
96-
chartDataSeries.current.delete(measurementId);
97-
if(chartDataSeries.current.size === 0) removeChart(chartId);
98-
const target = ev.target as HTMLDivElement;
99-
const parent = target.parentElement as HTMLDivElement;
100-
parent.remove();
101-
}, []);
30+
const id = ev.dataTransfer.getData("id");
31+
const measurementInfo = getNumericMeasurementInfo(id);
32+
addMeasurementToChart(chartId, measurementInfo);
33+
};
10234

10335
return (
10436
<div
10537
className={styles.chartWrapper}
38+
onDrop={handleDrop}
10639
onDragEnter={(ev) => ev.preventDefault()}
10740
onDragOver={(ev) => ev.preventDefault()}
108-
>
109-
41+
>
11042
<div className={styles.chart}>
11143
<AiOutlineCloseCircle
11244
size={30}
11345
cursor="pointer"
11446
onClick={() => removeChart(chartId)}
11547
/>
116-
<div ref={chartContainerRef}></div>
117-
<div className={styles.chartLegend} ref={chartLegend}></div>
48+
{measurements ?
49+
(
50+
<>
51+
<ChartCanvas
52+
measurements={measurements}
53+
/>
54+
<ChartLegend
55+
removeMeasurement={(measurementId: MeasurementId) => removeMeasurementFromChart(chartId, measurementId)}
56+
/>
57+
</>)
58+
: "Error: No measurements found"}
11859
</div>
11960
</div>
12061
);
12162
});
122-
123-
function createChartLegendItem(measurement: NumericMeasurementInfo) {
124-
const legendItem = document.createElement("div");
125-
legendItem.setAttribute("data-id", measurement.id);
126-
legendItem.className = styles.chartLegendItem;
127-
const seriesColor = document.createElement("div");
128-
seriesColor.className = styles.chartLegendItemColor;
129-
seriesColor.style.backgroundColor = measurement.color;
130-
const seriesName = document.createElement("p");
131-
seriesName.innerText = measurement.name;
132-
legendItem.appendChild(seriesColor);
133-
legendItem.appendChild(seriesName);
134-
return legendItem;
135-
}

‎ethernet-view/src/components/ChartMenu/ChartElement/ChartLegend/ChartLegend.tsx‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,29 @@
11
import styles from './ChartLegend.module.scss';
2-
import { MeasurementInfo } from '../../ChartList/ChartList';
2+
import { useCallback } from 'react';
3+
import { MeasurementId, NumericMeasurementInfo } from 'common';
4+
5+
interface Props {
6+
removeMeasurement: (measurementId: MeasurementId) => void;
7+
}
8+
9+
export const ChartLegend = ({ removeMeasurement } : Props) => {
10+
11+
// TODO: IMPLEMENT
12+
// const removeSeriesFromChart = useCallback((ev: MouseEvent, measurementId: MeasurementId) => {
13+
// ev.stopPropagation();
14+
// chartDataSeries.current.delete(measurementId);
15+
// if(chartDataSeries.current.size === 0) removeChart(chartId);
16+
// const target = ev.target as HTMLDivElement;
17+
// const parent = target.parentElement as HTMLDivElement;
18+
// parent.remove();
19+
// }, []);
320

4-
export const ChartLegend = () => {
521
return (
622
<div>ChartLegend</div>
723
)
824
}
925

10-
function createChartLegendItem(measurement: MeasurementInfo) {
26+
function createChartLegendItem(measurement: NumericMeasurementInfo) {
1127
const legendItem = document.createElement("div");
1228
legendItem.setAttribute("data-id", measurement.id);
1329
legendItem.className = styles.chartLegendItem;

‎ethernet-view/src/components/ChartMenu/ChartList/ChartList.module.scss‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎ethernet-view/src/components/ChartMenu/ChartList/ChartList.tsx‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎ethernet-view/src/components/ChartMenu/ChartList/color.ts‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎ethernet-view/src/components/ChartMenu/ChartMenu.module.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,15 @@
1515
.noValues {
1616
text-align: center;
1717
}
18+
19+
.chartListWrapper {
20+
display: flex;
21+
flex-direction: column;
22+
gap: 1rem;
23+
24+
width: 100%;
25+
height: 100%;
26+
background-color: #fcfcfc;
27+
padding: 1rem;
28+
overflow: auto;
29+
}

‎ethernet-view/src/components/ChartMenu/ChartMenu.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ type Props = {
1313

1414
export const ChartMenu = ({ sidebarSections }: Props) => {
1515
const getNumericMeasurementInfo = useMeasurementsStore((state) => state.getNumericMeasurementInfo);
16-
1716
const charts = useChartStore((state) => state.charts);
1817
const addChart = useChartStore((state) => state.addChart);
1918

2019
const handleDrop = (ev: DragEvent<HTMLDivElement>) => {
20+
ev.preventDefault();
2121
const id = ev.dataTransfer.getData("id");
2222
const initialMeasurementInfo = getNumericMeasurementInfo(id);
2323
addChart(nanoid(), initialMeasurementInfo);
@@ -41,15 +41,12 @@ export const ChartMenu = ({ sidebarSections }: Props) => {
4141
onDragEnter={(ev) => ev.preventDefault()}
4242
onDragOver={(ev) => ev.preventDefault()}
4343
>
44-
{Object.keys(charts).map((chartId) => {
45-
return (
46-
<ChartElement
47-
key={chartId}
48-
chartId={chartId}
49-
chartHeight={300}
50-
/>
51-
);
52-
})}
44+
{charts.map((chart) => (
45+
<ChartElement
46+
key={chart.chartId}
47+
chartId={chart.chartId}
48+
/>
49+
))}
5350
</div>
5451
</div>
5552
);

0 commit comments

Comments
 (0)