Skip to content

Commit e1aab0a

Browse files
andresdlt03andresdlt03
committed
add multiple series on a chart
1 parent 287be45 commit e1aab0a

4 files changed

Lines changed: 81 additions & 29 deletions

File tree

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@ export const ChartMenu = memo(({ sidebarSections }: Props) => {
2323

2424
const [charts, setCharts] = useState<ChartInfo[]>([]);
2525

26-
const addChart = ((chartId: ChartId, initialMeasurementId: MeasurementId) => {
27-
setCharts([...charts, { chartId, initialMeasurementId }]);
28-
});
26+
const addChart = ((chartId: ChartId, initialMeasurementId: MeasurementId) => {
27+
setCharts([...charts, { chartId, initialMeasurementId }]);
28+
});
2929

3030
const removeChart = useCallback((chartId: ChartId) => {
3131
setCharts(prevCharts => prevCharts.filter(chart => chart.chartId !== chartId));

‎ethernet-view/src/pages/LoggerPage/ChartsColumn/ChartMenu/ChartElement/ChartCanvas.tsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1+
import { NumericMeasurementInfo } from "common";
12
import { ColorType, createChart, IChartApi, UTCTimestamp } from "lightweight-charts";
23
import { ChartPoint } from "pages/LoggerPage/LogsColumn/LogLoader/LogsProcessor";
34
import { useEffect, useRef } from "react";
5+
import { MeasurementLogger } from "./ChartElement";
46

57
const CHART_HEIGHT = 300;
68

79
interface Props {
8-
data: ChartPoint[];
10+
measurementsInChart: MeasurementLogger[];
11+
getDataFromLogSession: (measurement: string) => ChartPoint[];
912
}
1013

11-
export const ChartCanvas = ({ data }: Props) => {
14+
export const ChartCanvas = ({ measurementsInChart, getDataFromLogSession }: Props) => {
1215
const chart = useRef<IChartApi | null>(null);
1316
const chartContainerRef = useRef<HTMLDivElement>(null);
1417

@@ -23,8 +26,6 @@ export const ChartCanvas = ({ data }: Props) => {
2326
if (chartContainerRef.current)
2427
resizeObserver.observe(chartContainerRef.current);
2528

26-
let date = Math.floor(Date.now() / 1000);
27-
2829
if (chartContainerRef.current) {
2930
if(chart)
3031
chart.current = createChart(chartContainerRef.current, {
@@ -40,14 +41,6 @@ export const ChartCanvas = ({ data }: Props) => {
4041
lockVisibleTimeRangeOnResize: true,
4142
},
4243
});
43-
44-
const series = chart.current?.addLineSeries({
45-
color: "red"
46-
})
47-
48-
data.forEach((point) => {
49-
series?.update({ time: date++ as UTCTimestamp, value: point.value });
50-
})
5144
}
5245

5346
return () => {
@@ -56,6 +49,17 @@ export const ChartCanvas = ({ data }: Props) => {
5649
}
5750
}, []);
5851

52+
useEffect(() => {
53+
let date = Math.floor(Date.now() / 1000);
54+
measurementsInChart.forEach((measurement) => {
55+
const series = chart.current?.addLineSeries({color: measurement.color});
56+
const data = getDataFromLogSession(measurement.id);
57+
data.forEach((point) => {
58+
series?.update({ time: date++ as UTCTimestamp, value: point.value });
59+
})
60+
})
61+
}, [measurementsInChart]);
62+
5963
return (
6064
<div ref={chartContainerRef}></div>
6165
)

‎ethernet-view/src/pages/LoggerPage/ChartsColumn/ChartMenu/ChartElement/ChartElement.tsx‎

Lines changed: 50 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,74 @@ import { AiOutlineCloseCircle } from "react-icons/ai"
33
import styles from "components/ChartMenu/ChartElement/ChartElement.module.scss"
44
import { ChartCanvas } from "./ChartCanvas";
55
import { ChartPoint } from "pages/LoggerPage/LogsColumn/LogLoader/LogsProcessor";
6+
import { ChartLegend } from "components/ChartMenu/ChartElement/ChartLegend/ChartLegend";
7+
import { useCallback, useEffect, useState } from "react";
8+
import { MeasurementId, NumericMeasurementInfo, useMeasurementsStore } from "common";
69

710
interface Props {
811
chartId: ChartId;
12+
initialMeasurementId: MeasurementId
913
removeChart: (chartId: ChartId) => void;
1014
getDataFromLogSession: (measurement: ChartId) => ChartPoint[];
1115
}
1216

13-
export const ChartElement = ({ chartId, removeChart, getDataFromLogSession }: Props) => {
14-
15-
const data = getDataFromLogSession(chartId);
17+
export interface MeasurementLogger {
18+
id: string;
19+
color: string;
20+
}
21+
22+
export const ChartElement = ({ chartId, initialMeasurementId, removeChart, getDataFromLogSession }: Props) => {
23+
24+
const [measurementsInChart, setMeasurementsInChart] = useState<MeasurementLogger[]>([{id: initialMeasurementId, color: 'red'}]);
25+
26+
useEffect(() => {
27+
console.log(measurementsInChart);
28+
}, [measurementsInChart]);
29+
30+
const addMeasurementToChart = (measurement: MeasurementLogger) => {
31+
if(!measurementsInChart.some(measurementInChart => measurementInChart.id === measurement.id)) {
32+
setMeasurementsInChart([...measurementsInChart, measurement]);
33+
}
34+
}
35+
36+
// const removeMeasurementFromChart = useCallback((measurementId: MeasurementId) => {
37+
// setMeasurementsInChart(prevMeasurements => prevMeasurements.filter(measurement => measurement.id !== measurementId));
38+
// }, []);
39+
40+
const handleDrop = (ev: React.DragEvent<HTMLDivElement>) => {
41+
ev.stopPropagation();
42+
const id = ev.dataTransfer.getData("id");
43+
addMeasurementToChart({id, color: getRandomColor()});
44+
};
1645

1746
return (
18-
<div className={styles.chartWrapper}>
47+
<div
48+
className={styles.chartWrapper}
49+
onDrop={handleDrop}
50+
onDragEnter={(ev) => ev.preventDefault()}
51+
onDragOver={(ev) => ev.preventDefault()}
52+
>
1953
<div className={styles.chart}>
2054
<AiOutlineCloseCircle
2155
size={30}
2256
cursor="pointer"
2357
onClick={() => removeChart(chartId)}
2458
/>
2559
<ChartCanvas
26-
data={data}
60+
measurementsInChart={measurementsInChart}
61+
getDataFromLogSession={getDataFromLogSession}
2762
/>
2863
</div>
2964
</div>
3065
)
3166
}
67+
68+
function getRandomColor() {
69+
var r = Math.floor(Math.random() * 256);
70+
var g = Math.floor(Math.random() * 256);
71+
var b = Math.floor(Math.random() * 256);
72+
var hexR = r.toString(16).padStart(2, '0');
73+
var hexG = g.toString(16).padStart(2, '0');
74+
var hexB = b.toString(16).padStart(2, '0');
75+
return '#' + hexR + hexG + hexB;
76+
}

‎ethernet-view/src/pages/LoggerPage/ChartsColumn/ChartMenu/ChartMenu.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import { ChartId } from "components/ChartMenu/ChartMenu"
1+
import { ChartId, ChartInfo } from "components/ChartMenu/ChartMenu"
22
import styles from "components/ChartMenu/ChartMenu.module.scss"
33
import { Item } from "components/ChartMenu/Sidebar/Section/Subsection/Subsection/Items/Item/ItemView"
44
import Sidebar from "components/ChartMenu/Sidebar/Sidebar"
55
import { useLogStore } from "pages/LoggerPage/useLogStore"
66
import { DragEvent, useCallback, useState } from "react"
77
import { ChartElement } from "./ChartElement/ChartElement"
8+
import { nanoid } from "nanoid"
9+
import { MeasurementId } from "common"
810

911
export const ChartMenu = () => {
1012
const openLogSession = useLogStore((state) => state.openLogSession)
@@ -16,24 +18,24 @@ export const ChartMenu = () => {
1618
name: measurement,
1719
}))
1820

19-
const getDataFromLogSession = (measurement: ChartId) => {
21+
const getDataFromLogSession = (measurement: string) => {
2022
return logSession?.measurementLogs.get(measurement) || [];
2123
}
2224

23-
const [charts, setCharts] = useState<ChartId[]>([]);
25+
const [charts, setCharts] = useState<ChartInfo[]>([]);
2426

25-
const addChart = ((chartId: ChartId) => {
26-
setCharts([...charts, chartId]);
27+
const addChart = ((chartId: ChartId, initialMeasurementId: MeasurementId) => {
28+
setCharts([...charts, { chartId, initialMeasurementId }]);
2729
});
2830

2931
const removeChart = useCallback((chartId: ChartId) => {
30-
setCharts(prevCharts => prevCharts.filter(chart => chart !== chartId));
32+
setCharts(prevCharts => prevCharts.filter(c => chartId !== c.chartId));
3133
}, []);
3234

3335
const handleDrop = (ev: DragEvent<HTMLDivElement>) => {
3436
ev.preventDefault();
3537
const id = ev.dataTransfer.getData("id");
36-
addChart(id);
38+
addChart(nanoid(), id);
3739
};
3840

3941
return (
@@ -47,8 +49,9 @@ export const ChartMenu = () => {
4749
>
4850
{charts.map((chart) => (
4951
<ChartElement
50-
key={chart}
51-
chartId={chart}
52+
key={chart.chartId}
53+
chartId={chart.chartId}
54+
initialMeasurementId={chart.initialMeasurementId}
5255
removeChart={(chartId: ChartId) => removeChart(chartId)}
5356
getDataFromLogSession={getDataFromLogSession}
5457
/>

0 commit comments

Comments
 (0)