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

feat: Separate Darstellung für Loop- und TDR-Charts implementiert

Browse Source 
- `LoopMeasurementChart.tsx` und `TDRChart.tsx` mit Mock-Daten für Tests ergänzt.
- `LoopChartActionBar.tsx` und `TDRChartActionBar.tsx` korrekt in `ChartSwitcher.tsx` integriert.
- `ChartModal.tsx` umbenannt zu `ChartSwitcher.tsx` für klarere Struktur.
- Redux `activeMode` sorgt jetzt für den richtigen Wechsel zwischen Loop- und TDR-Charts.
- Verbesserte Verzeichnisstruktur für bessere Wartbarkeit und Skalierbarkeit.
This commit is contained in:
ISA
2025-02-13 13:54:39 +01:00
parent 5c7b5555c4
commit 8d87d4a079
12 changed files with 264 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
components/modales/kueModal/LoopTDRChartActionBar.tsx
View File

@@ -1,103 +0,0 @@
import React, { useState } from "react";
import DateRangePicker from "./DateRangePicker";
import ChartModal from "../../modules/kue705FO/charts/ChartModal"; // Importiere das Chart-Modal
import { useDispatch, useSelector } from "react-redux";
import { setChartData } from "../../../redux/slices/chartDataSlice";
import { RootState } from "../../../redux/store";
const LoopTDRChartActionBar: React.FC = () => {
const dispatch = useDispatch();
const BASE_URL = "http://localhost:3002";
const [vonDatum, setVonDatum] = useState<Date>(new Date());
const [bisDatum, setBisDatum] = useState<Date>(new Date());
const [errorMessage, setErrorMessage] = useState<string | null>(null);
const [showChartModal, setShowChartModal] = useState(false);
// Redux-Daten holen (damit sich das ChartModal darauf bezieht)
const chartData = useSelector((state: RootState) => state.chartData.data);
const fetchAllData = async () => {
let index = 0;
let allData: any[] = [];
while (true) {
const url = `${BASE_URL}/${index}`;
try {
const response = await fetch(url);
if (!response.ok) {
if (response.status === 404) {
console.log(
`📡 Kein weiteres Objekt gefunden bei Index ${index}, Stoppe Abruf.`
);
break;
}
throw new Error(`Fehler beim Abrufen von ${url}: ${response.status}`);
}
const jsonData = await response.json();
allData.push(jsonData);
index++;
} catch (error) {
console.error(`❌ Fehler bei ${url}:`, error);
break;
}
}
console.log("📥 Alle abgerufenen JSON-Daten:", allData);
dispatch(setChartData(allData)); // 🔥 Daten in Redux speichern
return allData;
};
const handleAktualisieren = async () => {
try {
setErrorMessage(null);
console.log("📡 API Haupt-URL:", BASE_URL);
const allData = await fetchAllData();
if (allData.length === 0) {
console.error("❌ Keine Daten gefunden!");
setErrorMessage("❌ Keine Daten gefunden.");
return;
}
console.log("📥 Alle abgerufenen JSON-Daten:");
console.table(allData);
} catch (error) {
console.error("❌ Fehler beim Abrufen der Daten:", error);
setErrorMessage("❌ Fehler beim Laden der Daten.");
}
};
return (
<div className="flex flex-wrap justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2 mr-4">
<DateRangePicker setVonDatum={setVonDatum} setBisDatum={setBisDatum} />
<button
onClick={handleAktualisieren}
className="px-3 py-1 bg-green-500 text-white rounded text-sm"
>
Aktualisieren
</button>
<button
onClick={() => setShowChartModal(true)}
className="px-3 py-1 bg-blue-500 text-white rounded text-sm"
>
Diagramm anzeigen
</button>
{showChartModal && (
<ChartModal
isOpen={showChartModal}
onClose={() => setShowChartModal(false)}
chartRef={React.createRef<HTMLCanvasElement>()}
/>
)}
</div>
);
};
export default LoopTDRChartActionBar;

25
components/modules/kue705FO/Kue705FO.tsx
View File

@@ -1,9 +1,9 @@
"use client"; // components/modules/Kue705FO.tsx
"use client"; // components/modules/kue705FO/Kue705FO.tsx
import React, { useState, useEffect, useRef } from "react";
import ReactModal from "react-modal";
import Chart from "chart.js/auto";
import { useSelector } from "react-redux";
import KueModal from "../../modales/kueModal/KueModal";
import KueModal from "./KueModal";
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
import { RootState } from "../../../redux/store";
import { DataTDR } from "../../../redux/types/chartDataTypesTDR";
@@ -12,7 +12,6 @@ import {
setSelectedChartData,
setSelectedFileName,
} from "../../../redux/slices/variablesSlice";
import TDRPopup from "../../modales/kueModal/LoopTDRChartActionBar";
import { createLoopChart, createTDRChart } from "../../../utils/chartUtils";
import { getAlarmDisplayText } from "../../../utils/alarmUtils";
import { goLoop } from "../../../utils/goLoop";
@@ -20,8 +19,10 @@ import { goTDR } from "../../../utils/goTDR";
import { loadTDRChartData } from "../../../utils/loadTDRChartData";
import { loadLoopChartData } from "../../../utils/loadLoopChartData";
import { Kue705FOProps } from "../../../types/components/Kue705FOProps";
import ChartModal from "./charts/ChartModal";
import ChartSwitcher from "./charts/ChartSwitcher";
import { setActiveMode } from "../../../redux/slices/chartDataSlice";
import LoopMeasurementChart from "./charts/LoopMeasurementChart/LoopMeasurementChart";
import TDRChart from "./charts/TDRChart/TDRChart";
const Kue705FO: React.FC<Kue705FOProps> = ({
isolationswert,
@@ -91,10 +92,11 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
const handleOpenChartModal = () => {
setShowChartModal(true);
if (activeButton === "TDR") {
loadTDRChartData(selectedFileName, setChartData);
dispatch(setActiveMode("TDR"));
} else {
loadLoopChartData(slotIndex, setChartData);
dispatch(setActiveMode("Schleife"));
}
};
@@ -430,11 +432,16 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
{/* Modal für Messkurve */}
{showChartModal && (
<ChartModal
<ChartSwitcher
isOpen={showChartModal}
onClose={handleCloseChartModal}
chartRef={chartRef}
/>
>
{activeButton === "Schleife" ? (
<LoopMeasurementChart />
) : (
<TDRChart />
)}
</ChartSwitcher>
)}
</>
) : (

0
components/modales/kueModal/KueModal.tsx → components/modules/kue705FO/KueModal.tsx
View File

171
components/modules/kue705FO/charts/ChartModal.tsx
View File

@@ -1,171 +0,0 @@
import React, { useEffect, useRef } from "react";
import ReactModal from "react-modal";
import { useSelector } from "react-redux";
import { RootState } from "../../../../redux/store";
import Chart from "chart.js/auto";
import "chartjs-adapter-date-fns";
import { parseISO } from "date-fns";
import LoopTDRPopup from "../../../modales/kueModal/LoopTDRChartActionBar";
interface ChartModalProps {
isOpen: boolean;
onClose: () => void;
}
const ChartModal: React.FC<ChartModalProps> = ({ isOpen, onClose }) => {
const chartRef = useRef<HTMLCanvasElement>(null);
const chartInstance = useRef<Chart | null>(null);
// Redux State abrufen
const chartData = useSelector((state: RootState) => state.chartData.data);
const activeMode = useSelector(
(state: RootState) => state.chartData.activeMode
);
useEffect(() => {
if (chartRef.current && chartData.length > 0) {
if (chartInstance.current) {
chartInstance.current.destroy();
}
const ctx = chartRef.current.getContext("2d");
if (ctx) {
const labels = chartData.map((entry) =>
entry.timestamp ? parseISO(entry.timestamp) : new Date()
);
chartInstance.current = new Chart(ctx, {
type: "line",
data: {
labels,
datasets: [
{
label: "Isolationswiderstand (MOhm)",
data: chartData.map((entry) => entry.isolation ?? 0),
borderColor: "rgba(0, 123, 255, 1)",
backgroundColor: "rgba(0, 123, 255, 0.2)",
tension: 0.1,
yAxisID: "y-left",
},
{
label: "Schleifenwiderstand (kOhm)",
data: chartData.map((entry) => entry.loop ?? 0),
borderColor: "rgba(108, 117, 125, 1)",
backgroundColor: "rgba(108, 117, 125, 0.2)",
tension: 0.1,
yAxisID: "y-right",
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
type: "time",
time: {
unit: "hour",
tooltipFormat: "dd.MM.yyyy HH:mm",
},
title: {
display: true,
text: "Zeit",
},
grid: {
drawBorder: true, // 🔥 Stellt sicher, dass die X-Achse sichtbar ist
},
},
y: {
id: "y-left",
position: "left",
title: {
display: true,
text: "MOhm",
},
min: 0,
max:
Math.max(...chartData.map((entry) => entry.isolation ?? 1)) +
10,
grid: {
drawOnChartArea: true, // 🔥 Korrektur, damit es sich nicht überlagert
},
},
"y-right": {
id: "y-right",
position: "right",
title: {
display: true,
text: "kOhm",
},
min: 0,
max: Math.max(...chartData.map((entry) => entry.loop ?? 1)) + 1,
grid: {
drawOnChartArea: false, // 🔥 Verhindert doppelte Linien
},
},
},
},
});
}
}
return () => {
if (chartInstance.current) {
chartInstance.current.destroy();
chartInstance.current = null;
}
};
}, [chartData, activeMode]);
return (
<ReactModal
isOpen={isOpen}
onRequestClose={onClose}
ariaHideApp={false}
style={{
overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
content: {
top: "50%",
left: "50%",
right: "auto",
bottom: "auto",
marginRight: "-50%",
transform: "translate(-50%, -50%)",
width: "80%",
maxWidth: "50rem",
height: "30rem",
padding: "1rem",
overflow: "hidden",
},
}}
>
<button
onClick={onClose}
style={{
position: "absolute",
top: "0.625rem",
right: "0.625rem",
background: "transparent",
border: "none",
fontSize: "1.5rem",
cursor: "pointer",
}}
>
<i className="bi bi-x-circle-fill"></i>
</button>
{/* Beibehaltung der UI mit Kalender und Buttons */}
<div style={{ maxHeight: "100%", overflow: "auto" }}>
<LoopTDRPopup />
</div>
{/* Canvas für das Chart */}
<canvas
ref={chartRef}
style={{ width: "100%", height: "20rem", marginTop: "1rem" }}
></canvas>
</ReactModal>
);
};
export default ChartModal;

76
components/modules/kue705FO/charts/ChartSwitcher.tsx Normal file
View File

@@ -0,0 +1,76 @@
// /components/modules/kue705FO/charts/ChartSwitcher.tsx
import React from "react";
import ReactModal from "react-modal";
import LoopChartActionBar from "./LoopMeasurementChart/LoopChartActionBar";
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";
interface ChartSwitcherProps {
isOpen: boolean;
onClose: () => void;
}
const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
const activeMode = useSelector(
(state: RootState) => state.chartData.activeMode
);
return (
<ReactModal
isOpen={isOpen}
onRequestClose={onClose}
ariaHideApp={false}
style={{
overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
content: {
top: "50%",
left: "50%",
right: "auto",
bottom: "auto",
marginRight: "-50%",
transform: "translate(-50%, -50%)",
width: "80%",
maxWidth: "50rem",
height: "35rem",
padding: "1rem",
overflow: "hidden",
},
}}
>
<button
onClick={onClose}
style={{
position: "absolute",
top: "0.625rem",
right: "0.625rem",
background: "transparent",
border: "none",
fontSize: "1.5rem",
cursor: "pointer",
}}
>
<i className="bi bi-x-circle-fill"></i>
</button>
{/* Nur die richtige ActionBar und das richtige Chart basierend auf dem Modus anzeigen */}
{activeMode === "Schleife" ? (
<>
<h3 className="text-lg font-semibold">Schleifenmessung</h3>
<LoopChartActionBar />
<LoopMeasurementChart /> {/* 🎯 Hier wird das Chart gerendert */}
</>
) : (
<>
<h3 className="text-lg font-semibold">TDR-Messung</h3>
<TDRChartActionBar />
<TDRChart /> {/* 🎯 Hier wird das Chart gerendert */}
</>
)}
</ReactModal>
);
};
export default ChartSwitcher;

1
components/modales/kueModal/DateRangePicker.tsx → components/modules/kue705FO/charts/DateRangePicker.tsx
View File

@@ -1,3 +1,4 @@
// /components/modules/kue705FO/charts/DateRangePicker.tsx
import React, { useState, useEffect } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

110
components/modules/kue705FO/charts/LoopMeasurementChart.tsx
View File

@@ -1,110 +0,0 @@
import React, { useEffect, useRef } from "react";
import { useSelector } from "react-redux";
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);
// Redux-Daten abrufen
const chartData = useSelector((state: RootState) => state.chartData.data);
useEffect(() => {
if (chartRef.current && chartData.length > 0) {
if (chartInstance.current) {
chartInstance.current.destroy(); // Bestehendes Chart zerstören
}
const ctx = chartRef.current.getContext("2d");
if (ctx) {
const labels = chartData.map((entry) =>
entry.timestamp ? parseISO(entry.timestamp) : new Date()
);
chartInstance.current = new Chart(ctx, {
type: "line",
data: {
labels,
datasets: [
{
label: "Schleifenwiderstand (kOhm)",
data: chartData.map((entry) => entry.loop ?? 0),
borderColor: "rgba(75, 192, 192, 1)", // Türkis
backgroundColor: "rgba(75, 192, 192, 0.2)",
tension: 0.1,
yAxisID: "y-left",
},
{
label: "Zusätzliche Schleifenmesswerte",
data: chartData.map((entry) => entry.additional ?? 0),
borderColor: "rgba(255, 159, 64, 1)", // Orange
backgroundColor: "rgba(255, 159, 64, 0.2)",
tension: 0.1,
yAxisID: "y-right",
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
type: "time",
time: {
unit: "hour",
tooltipFormat: "dd.MM.yyyy HH:mm",
},
title: {
display: true,
text: "Zeit",
},
grid: {
drawBorder: true,
},
},
y: {
id: "y-left",
position: "left",
title: {
display: true,
text: "kOhm",
},
min: 0,
max: Math.max(...chartData.map((entry) => entry.loop ?? 1)) + 1,
},
"y-right": {
id: "y-right",
position: "right",
title: {
display: true,
text: "Zusätzliche Werte",
},
min: 0,
max:
Math.max(...chartData.map((entry) => entry.additional ?? 1)) +
1,
grid: {
drawOnChartArea: false,
},
},
},
},
});
}
}
return () => {
if (chartInstance.current) {
chartInstance.current.destroy();
chartInstance.current = null;
}
};
}, [chartData]);
return <canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />;
};
export default LoopMeasurementChart;

41
components/modules/kue705FO/charts/LoopMeasurementChart/LoopChartActionBar.tsx Normal file
View File

@@ -0,0 +1,41 @@
// /components/modules/kue705FO/charts/LoopMeasurementChart/LoopChartActionBar.tsx
import React, { useState } from "react";
import DateRangePicker from "../DateRangePicker";
import LoopMeasurementChart from "./LoopMeasurementChart";
import { useDispatch } from "react-redux";
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 data = await response.json();
dispatch(setChartData(data));
setShowChart(true);
} catch (error) {
console.error("Fehler beim Laden der Daten:", error);
}
};
return (
<div className="flex justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
<DateRangePicker setVonDatum={() => {}} setBisDatum={() => {}} />
<button
onClick={handleFetchData}
className="px-3 py-1 bg-green-500 text-white rounded text-sm"
>
Aktualisieren
</button>
{showChart && <LoopMeasurementChart />}
</div>
);
};
export default LoopChartActionBar;

31
components/modules/kue705FO/charts/TDRChart.tsx → components/modules/kue705FO/charts/LoopMeasurementChart/LoopMeasurementChart.tsx
View File

@@ -1,17 +1,23 @@
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 TDRChart: React.FC = () => {
const LoopMeasurementChart: React.FC = () => {
const chartRef = useRef<HTMLCanvasElement>(null);
const chartInstance = useRef<Chart | null>(null);
const chartData = useSelector((state: RootState) => state.chartData.data);
// 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 },
];
useEffect(() => {
if (chartRef.current && chartData.length > 0) {
if (chartRef.current) {
if (chartInstance.current) {
chartInstance.current.destroy();
}
@@ -24,8 +30,8 @@ const TDRChart: React.FC = () => {
labels: chartData.map((entry) => parseISO(entry.timestamp)),
datasets: [
{
label: "Isolationswiderstand (MOhm)",
data: chartData.map((entry) => entry.isolation ?? 0),
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,
@@ -38,18 +44,13 @@ const TDRChart: React.FC = () => {
scales: {
x: {
type: "time",
time: {
unit: "hour",
tooltipFormat: "dd.MM.yyyy HH:mm",
},
time: { unit: "minute", tooltipFormat: "dd.MM.yyyy HH:mm" },
title: { display: true, text: "Zeit" },
},
y: {
title: { display: true, text: "MOhm" },
title: { display: true, text: "kOhm" },
min: 0,
max:
Math.max(...chartData.map((entry) => entry.isolation ?? 1)) +
10,
max: 2,
},
},
},
@@ -68,4 +69,4 @@ const TDRChart: React.FC = () => {
return <canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />;
};
export default TDRChart;
export default LoopMeasurementChart;

72
components/modules/kue705FO/charts/TDRChart/TDRChart.tsx Normal file
View File

@@ -0,0 +1,72 @@
import React, { useEffect, useRef } from "react";
import { useSelector } from "react-redux";
import { RootState } from "../../../../redux/store";
import Chart from "chart.js/auto";
import "chartjs-adapter-date-fns";
import { parseISO } from "date-fns";
const TDRChart: 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", tdr: 2.1 },
{ timestamp: "2025-02-13T12:10:00", tdr: 2.3 },
{ timestamp: "2025-02-13T12:20:00", tdr: 2.6 },
];
useEffect(() => {
if (chartRef.current) {
if (chartInstance.current) {
chartInstance.current.destroy();
}
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: "TDR Entfernung (km)",
data: chartData.map((entry) => entry.tdr ?? 0),
borderColor: "rgba(255, 99, 132, 1)",
backgroundColor: "rgba(255, 99, 132, 0.2)",
tension: 0.1,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
type: "time",
time: { unit: "minute", tooltipFormat: "dd.MM.yyyy HH:mm" },
title: { display: true, text: "Zeit" },
},
y: {
title: { display: true, text: "km" },
min: 0,
max: 3,
},
},
},
});
}
}
return () => {
if (chartInstance.current) {
chartInstance.current.destroy();
chartInstance.current = null;
}
};
}, [chartData]);
return <canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />;
};
export default TDRChart;

41
components/modules/kue705FO/charts/TDRChart/TDRChartActionBar.tsx Normal file
View File

@@ -0,0 +1,41 @@
// /components/modules/kue705FO/charts/TDRChart/TDRChartActionBar.tsx
import React, { useState } from "react";
import DateRangePicker from "../DateRangePicker";
import TDRChart from "./TDRChart";
import { useDispatch } from "react-redux";
import { setChartData } from "../../../../../redux/slices/chartDataSlice";
const TDRChartActionBar: 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}/tdr`);
if (!response.ok) throw new Error("Fehler beim Abrufen der Daten");
const data = await response.json();
dispatch(setChartData(data));
setShowChart(true);
} catch (error) {
console.error("Fehler beim Laden der Daten:", error);
}
};
return (
<div className="flex justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
<DateRangePicker setVonDatum={() => {}} setBisDatum={() => {}} />
<button
onClick={handleFetchData}
className="px-3 py-1 bg-green-500 text-white rounded text-sm"
>
Aktualisieren
</button>
{showChart && <TDRChart />}
</div>
);
};
export default TDRChartActionBar;

2
config/webVersion.ts
View File

@@ -5,5 +5,5 @@
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
*/
const webVersion = "1.0.6.10";
const webVersion = "1.0.6.11";
export default webVersion;