From c1a2f6e3111f994751410ae6dfa283b905c4142b Mon Sep 17 00:00:00 2001 From: ISA Date: Fri, 14 Feb 2025 10:09:38 +0100 Subject: [PATCH] =?UTF-8?q?noch=20Fehler=20f=C3=BCr=20Charts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../kue705FO/Charts/ChartSwitcher.tsx | 11 ++- .../LoopChartActionBar.tsx | 18 +++-- .../LoopMeasurementChart.tsx | 74 ++++++++++++++----- public/mockData.json | 9 +++ 4 files changed, 81 insertions(+), 31 deletions(-) create mode 100644 public/mockData.json diff --git a/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx b/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx index 3838790..8d585c9 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx @@ -6,7 +6,7 @@ import TDRChartActionBar from "./TDRChart/TDRChartActionBar"; import LoopMeasurementChart from "./LoopMeasurementChart/LoopMeasurementChart"; import TDRChart from "./TDRChart/TDRChart"; import { useSelector } from "react-redux"; -import { RootState } from "../../../../redux/store"; +import { RootState } from "../../../../../redux/store"; interface ChartSwitcherProps { isOpen: boolean; @@ -28,15 +28,14 @@ const ChartSwitcher: React.FC = ({ isOpen, onClose }) => { content: { top: "50%", left: "50%", - right: "auto", + bottom: "auto", marginRight: "-50%", transform: "translate(-50%, -50%)", - width: "80%", - maxWidth: "50rem", - height: "35rem", + width: "100%", + maxWidth: "70rem", + height: "50rem", padding: "1rem", - overflow: "hidden", }, }} > diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx index 894679c..a98a995 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx @@ -1,4 +1,4 @@ -// /components/modules/kue705FO/charts/LoopMeasurementChart/LoopChartActionBar.tsx +// components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx import React, { useState } from "react"; import DateRangePicker from "../DateRangePicker"; import LoopMeasurementChart from "./LoopMeasurementChart"; @@ -7,20 +7,26 @@ import { setChartData } from "../../../../../../redux/slices/chartDataSlice"; const LoopChartActionBar: React.FC = () => { const dispatch = useDispatch(); - const BASE_URL = "http://localhost:3002"; - const [showChart, setShowChart] = useState(false); const handleFetchData = async () => { try { - const response = await fetch(`${BASE_URL}/loop`); - if (!response.ok) throw new Error("Fehler beim Abrufen der Daten"); - + const response = await fetch("/mockData.json"); const data = await response.json(); + if (Array.isArray(data)) { + // data ist ein Array und kann mit .map() verwendet werden + console.log("Daten geladen:", data); + } else { + console.error("Erwartetes Array, aber erhalten:", data); + } dispatch(setChartData(data)); setShowChart(true); } catch (error) { console.error("Fehler beim Laden der Daten:", error); + if (error instanceof Response) { + const errorMessage = await error.text(); + console.error("Fehlermeldung vom Server:", errorMessage); + } } }; diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx index 1da0812..24e00c9 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx @@ -1,20 +1,14 @@ import React, { useEffect, useRef } from "react"; import { useSelector } from "react-redux"; -import { RootState } from "../../../../redux/store"; +import { RootState } from "../../../../../../redux/store"; import Chart from "chart.js/auto"; -import "chartjs-adapter-date-fns"; -import { parseISO } from "date-fns"; const LoopMeasurementChart: React.FC = () => { const chartRef = useRef(null); const chartInstance = useRef(null); - // Nutze entweder Redux-Daten oder Mock-Daten - const chartData = useSelector((state: RootState) => state.chartData.data) || [ - { timestamp: "2025-02-13T12:00:00", loop: 0.8 }, - { timestamp: "2025-02-13T12:10:00", loop: 1.2 }, - { timestamp: "2025-02-13T12:20:00", loop: 1.5 }, - ]; + const chartData = + useSelector((state: RootState) => state.chartData.data) ?? []; useEffect(() => { if (chartRef.current) { @@ -22,19 +16,47 @@ const LoopMeasurementChart: React.FC = () => { chartInstance.current.destroy(); } + // Datenvorbereitung: Konvertieren der Zeitstempel in Millisekunden + const processedData = chartData.map((entry) => ({ + ...entry, + timestampMs: new Date(entry.timestamp).getTime(), + })); + const ctx = chartRef.current.getContext("2d"); if (ctx) { chartInstance.current = new Chart(ctx, { type: "line", data: { - labels: chartData.map((entry) => parseISO(entry.timestamp)), datasets: [ { - label: "Schleifenwiderstand (kOhm)", - data: chartData.map((entry) => entry.loop ?? 0), - borderColor: "rgba(0, 123, 255, 1)", - backgroundColor: "rgba(0, 123, 255, 0.2)", - tension: 0.1, + label: "Messwert i (kOhm)", + data: processedData.map((entry) => ({ + x: entry.timestampMs, + y: entry.i ?? 0, + })), + borderColor: "rgba(75, 192, 192, 1)", + backgroundColor: "rgba(75, 192, 192, 0.2)", + fill: true, + }, + { + label: "Messwert a (kOhm)", + data: processedData.map((entry) => ({ + x: entry.timestampMs, + y: entry.a ?? 0, + })), + borderColor: "rgba(192, 75, 75, 1)", + backgroundColor: "rgba(192, 75, 75, 0.2)", + fill: true, + }, + { + label: "Messwert g (kOhm)", + data: processedData.map((entry) => ({ + x: entry.timestampMs, + y: entry.g ?? 0, + })), + borderColor: "rgba(75, 75, 192, 1)", + backgroundColor: "rgba(75, 75, 192, 0.2)", + fill: true, }, ], }, @@ -43,12 +65,26 @@ const LoopMeasurementChart: React.FC = () => { maintainAspectRatio: false, scales: { x: { - type: "time", - time: { unit: "minute", tooltipFormat: "dd.MM.yyyy HH:mm" }, - title: { display: true, text: "Zeit" }, + type: "linear", + position: "bottom", + ticks: { + callback: function (value, index, values) { + const date = new Date(value); + return `${date.getDate()}.${ + date.getMonth() + 1 + }.${date.getFullYear()} ${date.getHours()}:${date.getMinutes()}`; + }, + }, + title: { + display: true, + text: "Zeit", + }, }, y: { - title: { display: true, text: "kOhm" }, + title: { + display: true, + text: "kOhm", + }, min: 0, max: 2, }, diff --git a/public/mockData.json b/public/mockData.json new file mode 100644 index 0000000..3390da2 --- /dev/null +++ b/public/mockData.json @@ -0,0 +1,9 @@ +[ +{"t":"13-02-2025 15:00:00","i":65.000,"a":65.000,"g":65.000} , +{"t":"13-02-2025 14:00:00","i":65.000,"a":65.000,"g":65.000} , +{"t":"13-02-2025 13:00:00","i":65.000,"a":65.000,"g":65.000} , +{"t":"13-02-2025 12:00:00","i":65.000,"a":65.000,"g":65.000} , +{"t":"13-02-2025 11:00:00","i":65.000,"a":65.000,"g":65.000} , +{"t":"13-02-2025 10:00:00","i":65.000,"a":65.000,"g":65.000} , +{"t":"13-02-2025 09:00:00","i":65.000,"a":65.000,"g":65.000} +] \ No newline at end of file