optimise chart canvas and legend

Author: andresdlt03

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

@@ -59,7 +59,7 @@ export const ChartCanvas = ({ measurementsInChart }: Props) => {
             if(chart.current)
             chartDataSeries.current.set(measurement.id, [chart.current.addLineSeries({color: measurement.color}), measurement.getUpdate]);
         });
-    }, [measurementsInChart.length])
+    })
 
     useGlobalTicker(() => {
         const now = Date.now() / 1000 as UTCTimestamp;

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

@@ -15,15 +15,15 @@ type Props = {
 // React component that keeps the chart render and measurements represented on it.
 export const ChartElement = memo(({ chartId, initialMeasurementId, removeChart }: Props) => {
 
-    console.log("ChartElement rendered")
-
     const getNumericMeasurementInfo = useMeasurementsStore(state => state.getNumericMeasurementInfo);
     const initialMeasurement = getNumericMeasurementInfo(initialMeasurementId);
 
     const [measurementsInChart, setMeasurementsInChart] = useState([initialMeasurement]);
 
     const addMeasurementToChart = (measurement: NumericMeasurementInfo) => {
-        setMeasurementsInChart([...measurementsInChart, measurement]);
+        if(!measurementsInChart.some(measurementInChart => measurementInChart.id === measurement.id)) {
+            setMeasurementsInChart([...measurementsInChart, measurement]);
+        }
     }
 
     const removeMeasurementFromChart = useCallback((measurementId: MeasurementId) => {

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

@@ -19,8 +19,6 @@ type Props = {
 
 export const ChartMenu = memo(({ sidebarSections }: Props) => {
 
-    console.log("ChartMenu rendered")
-
     const getNumericMeasurementInfo = useMeasurementsStore((state) => state.getNumericMeasurementInfo);
 
     const [charts, setCharts] = useState<ChartInfo[]>([]);