diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx index 426cfbb..2f1d358 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx @@ -14,6 +14,12 @@ const LoopMeasurementChart = () => { (state: { chartData: { data: any[] } }) => state.chartData.data ) ?? []; + // Ermittlung des ausgewählten Modus (DIA0, DIA1, DIA2) + const selectedMode = useSelector( + (state: { chartMode: { mode: "DIA0" | "DIA1" | "DIA2" } }) => + state.chartMode?.mode ?? "DIA0" + ); + useEffect(() => { if (chartRef.current) { if (chartInstance.current) { @@ -23,49 +29,50 @@ const LoopMeasurementChart = () => { // Datenvorbereitung: Konvertieren der Zeitstempel in Millisekunden const processedData = chartData.map((entry) => ({ ...entry, - timestampMs: new Date( - entry.t.replace(/(\d{2})-(\d{2})-(\d{4})/, "$2/$1/$3") - ).getTime(), + timestampMs: new Date(entry.t).getTime(), })); + const datasets = [ + { + label: "Messwert Minimum (kOhm)", + data: processedData.map((entry) => ({ + x: entry.timestampMs, + y: entry.i, + })), + borderColor: "rgba(75, 192, 192, 1)", + backgroundColor: "rgba(75, 192, 192, 0.2)", + fill: true, + }, + { + label: "Messwert Maximum (kOhm)", + data: processedData.map((entry) => ({ + x: entry.timestampMs, + y: entry.a, + })), + borderColor: "rgba(192, 75, 75, 1)", + backgroundColor: "rgba(192, 75, 75, 0.2)", + fill: true, + }, + { + label: + selectedMode === "DIA0" + ? "Messwert Mittelwert (m)" + : "Messwert Durchschnitt (g)", + data: processedData.map((entry) => ({ + x: entry.timestampMs, + y: selectedMode === "DIA0" ? entry.m : entry.g, + })), + borderColor: "rgba(75, 75, 192, 1)", + backgroundColor: "rgba(75, 75, 192, 0.2)", + fill: true, + }, + ]; + const ctx = chartRef.current.getContext("2d"); if (ctx) { chartInstance.current = new Chart(ctx, { type: "line", - data: { - datasets: [ - { - label: "Messwert Minimum (kOhm)", // Messwert i (kOhm) - data: processedData.map((entry) => ({ - x: entry.timestampMs, - y: entry.i, - })), - borderColor: "rgba(75, 192, 192, 1)", - backgroundColor: "rgba(75, 192, 192, 0.2)", - fill: true, - }, - { - label: "Messwert Maximum (kOhm)", // Messwert a (kOhm) - data: processedData.map((entry) => ({ - x: entry.timestampMs, - y: entry.a, - })), - borderColor: "rgba(192, 75, 75, 1)", - backgroundColor: "rgba(192, 75, 75, 0.2)", - fill: true, - }, - { - label: "Messwert Durchschnitt (kOhm)", // Messwert g (kOhm) - data: processedData.map((entry) => ({ - x: entry.timestampMs, - y: entry.g, - })), - borderColor: "rgba(75, 75, 192, 1)", - backgroundColor: "rgba(75, 75, 192, 0.2)", - fill: true, - }, - ], - }, + data: { datasets }, options: { responsive: true, maintainAspectRatio: false, @@ -75,20 +82,12 @@ const LoopMeasurementChart = () => { time: { unit: "day", tooltipFormat: "dd.MM.yyyy HH:mm", - displayFormats: { - day: "dd.MM.yyyy", - }, - }, - title: { - display: true, - text: "Zeit", + displayFormats: { day: "dd.MM.yyyy" }, }, + title: { display: true, text: "Zeit" }, }, y: { - title: { - display: true, - text: "kOhm", - }, + title: { display: true, text: "kOhm" }, min: 0, max: 80, }, @@ -97,14 +96,7 @@ const LoopMeasurementChart = () => { }); } } - - return () => { - if (chartInstance.current) { - chartInstance.current.destroy(); - chartInstance.current = null; - } - }; - }, [chartData]); + }, [chartData, selectedMode]); return (