Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

noch Fehler für Charts

Browse Source
This commit is contained in:
ISA
2025-02-14 10:09:38 +01:00
parent 16271fce39
commit c1a2f6e311
4 changed files with 81 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx
View File

@@ -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<ChartSwitcherProps> = ({ 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",
},
}}
>

18
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
View File

@@ -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);
}
}
};

74
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
View File

@@ -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<HTMLCanvasElement>(null);
const chartInstance = useRef<Chart | null>(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,
},

9
public/mockData.json Normal file
View File

@@ -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}
]