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

feat: Struktur für Charts verbessert und Komponenten getrennt

Browse Source 
- `LoopMeasurementChart.tsx` und `TDRChart.tsx` erstellt für separate Diagramm-Darstellungen.
- Neue Struktur unter `/components/modules/kue705FO/charts/` eingeführt.
- `ChartModal.tsx` bleibt für generelle Nutzung erhalten.
- Erhöhte Wartbarkeit und Modularität durch Trennung der Chart-Komponenten.
This commit is contained in:
ISA
2025-02-13 11:55:52 +01:00
parent d67ad97f83
commit 5c7b5555c4
17 changed files with 411 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
components/modales/kueModal/ChartModal.tsx
View File

@@ -1,66 +0,0 @@
import React from "react";
import ReactModal from "react-modal";
import TDRPopup from "./LoopTDRChartActionBar";
interface ChartModalProps {
isOpen: boolean;
onClose: () => void;
chartRef: React.RefObject<HTMLCanvasElement>;
}
const ChartModal: React.FC<ChartModalProps> = ({
isOpen,
onClose,
chartRef,
}) => {
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>
<div style={{ maxHeight: "100%", overflow: "auto" }}>
<TDRPopup />
</div>
<canvas
id="myChart"
ref={chartRef}
style={{ width: "100%", height: "20rem" }}
></canvas>
</ReactModal>
);
};
export default ChartModal;

10
components/modales/kueModal/KueModal.tsx
View File

@@ -4,10 +4,12 @@ import { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { setVariables } from "../../../redux/slices/variablesSlice";
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
import handleSave, { OriginalValues } from "./handlers/handleSave";
import handleDisplayEinschalten from "./handlers/handleDisplayEinschalten";
import handleChange from "./handlers/handleChange";
import firmwareUpdate from "./handlers/firmwareUpdate";
import handleSave, {
OriginalValues,
} from "../../modules/kue705FO/handlers/handleSave";
import handleDisplayEinschalten from "../../modules/kue705FO/handlers/handleDisplayEinschalten";
import handleChange from "../../modules/kue705FO/handlers/handleChange";
import firmwareUpdate from "../../modules/kue705FO/handlers/firmwareUpdate";
import decodeToken from "../../../utils/decodeToken";
// Props-Typen definieren
interface KueModalProps {

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

@@ -1,6 +1,6 @@
import React, { useState } from "react";
import DateRangePicker from "./DateRangePicker";
import ChartModal from "./ChartModal"; // Importiere das Chart-Modal
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";
@@ -93,6 +93,7 @@ const LoopTDRChartActionBar: React.FC = () => {
<ChartModal
isOpen={showChartModal}
onClose={() => setShowChartModal(false)}
chartRef={React.createRef<HTMLCanvasElement>()}
/>
)}
</div>

29
components/modules/Kue705FO.tsx → components/modules/kue705FO/Kue705FO.tsx
View File

@@ -3,24 +3,25 @@ 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 "../../modales/kueModal/KueModal";
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
import { RootState } from "../../redux/store";
import { DataTDR } from "../../redux/types/chartDataTypesTDR";
import { RootState } from "../../../redux/store";
import { DataTDR } from "../../../redux/types/chartDataTypesTDR";
import { useDispatch } from "react-redux";
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";
import { goTDR } from "../../utils/goTDR";
import { loadTDRChartData } from "../../utils/loadTDRChartData";
import { loadLoopChartData } from "../../utils/loadLoopChartData";
import { Kue705FOProps } from "../../types/components/Kue705FOProps";
import ChartModal from "../modales/kueModal/ChartModal";
} 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";
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 { setActiveMode } from "../../../redux/slices/chartDataSlice";
const Kue705FO: React.FC<Kue705FOProps> = ({
isolationswert,
@@ -102,6 +103,7 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
setActiveButton("Schleife");
setloopTitleText("Schleifenwiderstand [kOhm]");
setLoopDisplayValue(schleifenwiderstand); // Setze den Wert auf schleifenwiderstand
dispatch(setActiveMode("Schleife")); // 🔥 Speichert den Modus in Redux
} else if (button === "TDR") {
setActiveButton("TDR");
setloopTitleText("Entfernung [Km]");
@@ -110,6 +112,7 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
? tdrLocation[slotIndex]
: "0"
); // Setze den Wert auf tdrLocation oder "0" als Fallback
dispatch(setActiveMode("TDR")); // 🔥 Speichert den Modus in Redux
}
};

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

@@ -0,0 +1,171 @@
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;

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

@@ -0,0 +1,110 @@
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;

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

@@ -0,0 +1,71 @@
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);
const chartData = useSelector((state: RootState) => state.chartData.data);
useEffect(() => {
if (chartRef.current && chartData.length > 0) {
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: "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,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
type: "time",
time: {
unit: "hour",
tooltipFormat: "dd.MM.yyyy HH:mm",
},
title: { display: true, text: "Zeit" },
},
y: {
title: { display: true, text: "MOhm" },
min: 0,
max:
Math.max(...chartData.map((entry) => entry.isolation ?? 1)) +
10,
},
},
},
});
}
}
return () => {
if (chartInstance.current) {
chartInstance.current.destroy();
chartInstance.current = null;
}
};
}, [chartData]);
return <canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />;
};
export default TDRChart;

0
components/modales/kueModal/handlers/firmwareUpdate.ts → components/modules/kue705FO/handlers/firmwareUpdate.ts
View File

0
components/modales/kueModal/handlers/handleChange.ts → components/modules/kue705FO/handlers/handleChange.ts
View File

0
components/modales/kueModal/handlers/handleDisplayEinschalten.ts → components/modules/kue705FO/handlers/handleDisplayEinschalten.ts
View File

0
components/modales/kueModal/handlers/handleSave.ts → components/modules/kue705FO/handlers/handleSave.ts
View File