finish logger charts

Author: andresdlt03

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

@@ -23,9 +23,9 @@ export const ChartMenu = memo(({ sidebarSections }: Props) => {
 
     const [charts, setCharts] = useState<ChartInfo[]>([]);
 
-        const addChart = ((chartId: ChartId, initialMeasurementId: MeasurementId) => {
-            setCharts([...charts, { chartId, initialMeasurementId }]);
-        });
+    const addChart = ((chartId: ChartId, initialMeasurementId: MeasurementId) => {
+        setCharts([...charts, { chartId, initialMeasurementId }]);
+    });
 
     const removeChart = useCallback((chartId: ChartId) => {
         setCharts(prevCharts => prevCharts.filter(chart => chart.chartId !== chartId));

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

@@ -1,4 +1,3 @@
-import { NumericMeasurementInfo } from "common";
 import { ColorType, createChart, IChartApi, UTCTimestamp } from "lightweight-charts";
 import { ChartPoint } from "pages/LoggerPage/LogsColumn/LogLoader/LogsProcessor";
 import { useEffect, useRef } from "react";
@@ -12,6 +11,7 @@ interface Props {
 }
 
 export const ChartCanvas = ({ measurementsInChart, getDataFromLogSession }: Props) => {
+    const timeRendered = useRef<number>(Date.now() / 1000);
     const chart = useRef<IChartApi | null>(null);
     const chartContainerRef = useRef<HTMLDivElement>(null);
 
@@ -42,23 +42,27 @@ export const ChartCanvas = ({ measurementsInChart, getDataFromLogSession }: Prop
                 },
             });
         }
+        
+        let chartTime = timeRendered.current;
+        measurementsInChart.forEach((measurement) => {
+            const data = getDataFromLogSession(measurement.id);
+            const series = chart.current?.addLineSeries({
+                color: measurement.color,
+            })
+            for(const point of data) {
+                series?.update({ time: chartTime++ as UTCTimestamp, value: point.value });
+            }
+            chartTime = timeRendered.current;
+        })
 
         return () => {
             resizeObserver.disconnect();
             chart.current?.remove();
         }
-    }, []);
+    }, [measurementsInChart.length]);
 
     useEffect(() => {
-        let date = Math.floor(Date.now() / 1000);
-        measurementsInChart.forEach((measurement) => {
-            const series = chart.current?.addLineSeries({color: measurement.color});
-            const data = getDataFromLogSession(measurement.id);
-            data.forEach((point) => {
-                series?.update({ time: date++ as UTCTimestamp, value: point.value });
-            })
-        })
-    }, [measurementsInChart]);
+    }, [measurementsInChart.length]);
 
     return (
         <div ref={chartContainerRef}></div>

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

@@ -3,9 +3,9 @@ import { AiOutlineCloseCircle } from "react-icons/ai"
 import styles from "components/ChartMenu/ChartElement/ChartElement.module.scss"
 import { ChartCanvas } from "./ChartCanvas";
 import { ChartPoint } from "pages/LoggerPage/LogsColumn/LogLoader/LogsProcessor";
-import { ChartLegend } from "components/ChartMenu/ChartElement/ChartLegend/ChartLegend";
-import { useCallback, useEffect, useState } from "react";
-import { MeasurementId, NumericMeasurementInfo, useMeasurementsStore } from "common";
+import { useEffect, useState } from "react";
+import { MeasurementId, } from "common";
+import { ChartLegend } from "./ChartLegend";
 
 interface Props {
     chartId: ChartId;
@@ -24,19 +24,15 @@ export const ChartElement = ({ chartId, initialMeasurementId, removeChart, getDa
     const [measurementsInChart, setMeasurementsInChart] = useState<MeasurementLogger[]>([{id: initialMeasurementId, color: 'red'}]);
 
     useEffect(() => {
-        console.log(measurementsInChart);
-    }, [measurementsInChart]);
+        console.log(measurementsInChart)
+    }, [measurementsInChart])
 
     const addMeasurementToChart = (measurement: MeasurementLogger) => {
         if(!measurementsInChart.some(measurementInChart => measurementInChart.id === measurement.id)) {
             setMeasurementsInChart([...measurementsInChart, measurement]);
         }
     }
 
-    // const removeMeasurementFromChart = useCallback((measurementId: MeasurementId) => {
-    //     setMeasurementsInChart(prevMeasurements => prevMeasurements.filter(measurement => measurement.id !== measurementId));
-    // }, []);
-
     const handleDrop = (ev: React.DragEvent<HTMLDivElement>) => {
         ev.stopPropagation();
         const id = ev.dataTransfer.getData("id");
@@ -60,6 +56,12 @@ export const ChartElement = ({ chartId, initialMeasurementId, removeChart, getDa
                     measurementsInChart={measurementsInChart}
                     getDataFromLogSession={getDataFromLogSession}
                 />
+                <ChartLegend 
+                    chartId={chartId}
+                    measurementsInChart={measurementsInChart}
+                    removeChart={removeChart}
+                    removeMeasurementFromChart={(measurementId: MeasurementId) => setMeasurementsInChart(measurementsInChart.filter(measurement => measurement.id !== measurementId))}
+                />
             </div>
         </div>
     )

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

@@ -0,0 +1,54 @@
+import { MeasurementId } from "common";
+import { ChartId } from "components/ChartMenu/ChartMenu";
+import { useEffect, useRef } from "react";
+import styles from "components/ChartMenu/ChartElement/ChartLegend/ChartLegend.module.scss"
+import { MeasurementLogger } from "./ChartElement";
+
+interface Props {
+    chartId: ChartId;
+    measurementsInChart: MeasurementLogger[];
+    removeMeasurementFromChart: (measurementId: MeasurementId) => void;
+    removeChart: (chartId: ChartId) => void;
+}
+
+export const ChartLegend = ({ chartId, measurementsInChart, removeMeasurementFromChart, removeChart }: Props) => {
+
+    const legendRef = useRef<HTMLDivElement>(null);
+    
+    const onRemoveMeasurement = (measurementId: MeasurementId) => {
+        removeMeasurementFromChart(measurementId);
+    };
+
+    useEffect(() => {
+        if(measurementsInChart.length == 0) removeChart(chartId);
+    }, [measurementsInChart.length])
+
+    useEffect(() => {
+        if (legendRef.current) {
+            while (legendRef.current.firstChild) {
+                legendRef.current.removeChild(legendRef.current.firstChild);
+            }
+            measurementsInChart.forEach((measurement) => {
+                const newChartLegendItem = createChartLegendItem(measurement);
+                newChartLegendItem.onclick = (_) => onRemoveMeasurement(measurement.id);
+                legendRef.current?.appendChild(newChartLegendItem);
+            });
+        }
+    });
+
+    return <div className={styles.chartLegend} ref={legendRef}></div>;
+};
+
+function createChartLegendItem(measurement: MeasurementLogger) {
+    const legendItem = document.createElement("div");
+    legendItem.setAttribute("data-id", measurement.id);
+    legendItem.className = styles.chartLegendItem;
+    const seriesColor = document.createElement("div");
+    seriesColor.className = styles.chartLegendItemColor;
+    seriesColor.style.backgroundColor = measurement.color;
+    const seriesName = document.createElement("p");
+    seriesName.innerText = measurement.id;
+    legendItem.appendChild(seriesColor);
+    legendItem.appendChild(seriesName);
+    return legendItem;
+}