TDR Messung von JSON datei in Chart Diagramm bereich zeichnen
This commit is contained in:
ISA
@@ -8,7 +8,10 @@ import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
|
||||
import { RootState } from "../../redux/store/store";
|
||||
import { DataTDR } from "../../redux/types/chartDataTypesTDR";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { setSelectedChartData } from "../../redux/store/variablesSlice";
|
||||
import {
|
||||
setSelectedChartData,
|
||||
setSelectedFileName,
|
||||
} from "../../redux/store/variablesSlice";
|
||||
|
||||
const Kue705FO: React.FC<Kue705FOProps> = ({
|
||||
isolationswert,
|
||||
@@ -55,7 +58,12 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
|
||||
const [showChartModal, setShowChartModal] = useState(false);
|
||||
const [chartData, setChartData] = useState(null);
|
||||
|
||||
dispatch(setSelectedChartData(chartData));
|
||||
useEffect(() => {
|
||||
if (chartData) {
|
||||
dispatch(setSelectedChartData(chartData));
|
||||
}
|
||||
}, [chartData, dispatch]); // Führe dispatch nur aus, wenn chartData sich ändert
|
||||
|
||||
// Redux-Variablen abrufen
|
||||
const {
|
||||
kuePSTmMinus96V,
|
||||
@@ -170,91 +178,119 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
|
||||
}
|
||||
};
|
||||
|
||||
const handleCloseChartModal = () => setShowChartModal(false);
|
||||
const handleCloseChartModal = () => {
|
||||
if (chartInstance.current) {
|
||||
console.log("Chart wird beim Schließen des Modals zerstört.");
|
||||
chartInstance.current.destroy();
|
||||
chartInstance.current = null;
|
||||
}
|
||||
setShowChartModal(false);
|
||||
};
|
||||
|
||||
// Funktion zum Erstellen des TDR-Charts
|
||||
|
||||
const chartInstance = useRef<Chart | null>(null);
|
||||
|
||||
const createTDRChart = (dataTDR: DataTDR[]) => {
|
||||
const canvas = document.getElementById("myChart") as HTMLCanvasElement;
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
// Zerstöre vorhandenes Diagramm
|
||||
if (chartInstance.current) {
|
||||
chartInstance.current.destroy();
|
||||
if (!canvas) {
|
||||
console.error("Canvas mit ID 'myChart' nicht gefunden.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Erstelle neues Diagramm
|
||||
chartInstance.current = new Chart(ctx, {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: dataTDR.map((row) => row.t),
|
||||
datasets: [
|
||||
{
|
||||
label: "Pegel",
|
||||
data: dataTDR.map((row) => row.m),
|
||||
borderColor: "#00AEEF",
|
||||
borderWidth: 1,
|
||||
fill: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
zoom: {
|
||||
pan: {
|
||||
enabled: true,
|
||||
mode: "xy",
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) {
|
||||
console.error("2D-Kontext für Canvas konnte nicht erstellt werden.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Vorhandenes Chart zerstören, falls vorhanden
|
||||
if (chartInstance.current) {
|
||||
console.log("Vorhandenes Chart wird zerstört.");
|
||||
chartInstance.current.destroy();
|
||||
chartInstance.current = null; // Referenz zurücksetzen
|
||||
}
|
||||
|
||||
// Neues Chart erstellen
|
||||
try {
|
||||
chartInstance.current = new Chart(ctx, {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: dataTDR.map((row) => row.t),
|
||||
datasets: [
|
||||
{
|
||||
label: "Pegel",
|
||||
data: dataTDR.map((row) => row.m),
|
||||
borderColor: "#00AEEF",
|
||||
borderWidth: 1,
|
||||
fill: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
zoom: {
|
||||
wheel: {
|
||||
pan: {
|
||||
enabled: true,
|
||||
mode: "xy",
|
||||
},
|
||||
pinch: {
|
||||
enabled: true,
|
||||
zoom: {
|
||||
wheel: {
|
||||
enabled: true,
|
||||
},
|
||||
pinch: {
|
||||
enabled: true,
|
||||
},
|
||||
mode: "xy",
|
||||
},
|
||||
mode: "xy",
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
type: "linear",
|
||||
position: "bottom",
|
||||
title: { display: true, text: "Zeit" },
|
||||
},
|
||||
y: {
|
||||
title: { display: true, text: "Pegel" },
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
type: "linear",
|
||||
position: "bottom",
|
||||
title: { display: true, text: "Zeit" },
|
||||
},
|
||||
y: {
|
||||
title: { display: true, text: "Pegel" },
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
console.log("Neues Chart erfolgreich erstellt.");
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Erstellen des Charts:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const loadTDRChartData = () => {
|
||||
const slot = slotIndex;
|
||||
const environment = process.env.NODE_ENV || "production";
|
||||
const fileData =
|
||||
environment === "production"
|
||||
? `/CPL?/CPL/lastTDR/slot${slot}.json`
|
||||
: `/CPLmockData/lastTDR/slot${slot}.json`;
|
||||
const selectedFileName = useSelector(
|
||||
(state: RootState) => state.variables.selectedFileName
|
||||
);
|
||||
|
||||
fetch(fileData)
|
||||
const loadTDRChartData = () => {
|
||||
if (!selectedFileName) {
|
||||
console.error("Kein Dateiname in Redux gespeichert.");
|
||||
return;
|
||||
}
|
||||
|
||||
const yearFolder = `Year_${jahr.toString().slice(-2)}`;
|
||||
const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
|
||||
|
||||
//const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${selectedFileName}`;
|
||||
const filePath = `/CPLmockData/LastTDR/kue_01/Year_24/Month_01/02-1911.json`;
|
||||
|
||||
fetch(filePath)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
console.log("Geladene Daten:", data); // Debug-Ausgabe
|
||||
if (data && data.length > 0) {
|
||||
setChartData(data);
|
||||
createTDRChart(data);
|
||||
} else {
|
||||
console.error("Keine Daten gefunden.");
|
||||
}
|
||||
console.log("Geladene Daten:", data);
|
||||
setChartData(data);
|
||||
createTDRChart(data);
|
||||
})
|
||||
.catch((error) => console.error("Fehler beim Laden der Daten:", error));
|
||||
.catch((error) =>
|
||||
console.error("Fehler beim Laden der TDR-Daten:", error)
|
||||
);
|
||||
};
|
||||
|
||||
const loadLoopChartData = () => {
|
||||
@@ -512,6 +548,24 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
|
||||
|
||||
//---------------------------------------------------
|
||||
|
||||
//----------------------------------
|
||||
useEffect(() => {
|
||||
if (selectedChartData) {
|
||||
createTDRChart(selectedChartData); // Neues Chart erstellen
|
||||
}
|
||||
|
||||
return () => {
|
||||
// Cleanup beim Komponentenwechsel
|
||||
if (chartInstance.current) {
|
||||
console.log("Chart wird beim Komponentenwechsel zerstört.");
|
||||
chartInstance.current.destroy();
|
||||
chartInstance.current = null;
|
||||
}
|
||||
};
|
||||
}, [selectedChartData]);
|
||||
|
||||
//----------------------------------
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative bg-gray-300 w-[7.25rem] h-[24.375rem] border border-gray-400 transform laptop:-translate-y-12 2xl:-translate-y-0
|
||||
@@ -765,23 +819,19 @@ const TDRPopup: React.FC = () => {
|
||||
// Fetch directory.json basierend auf Jahr und Monat
|
||||
useEffect(() => {
|
||||
const loadDirectory = async () => {
|
||||
const yearFolder = getYearFolderName(jahr); // Jahr in Year_xx umwandeln
|
||||
const yearFolder = getYearFolderName(jahr);
|
||||
const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
|
||||
const path = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`;
|
||||
|
||||
console.log("Verwendeter Pfad:", path);
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`
|
||||
);
|
||||
|
||||
console.log(
|
||||
`/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`
|
||||
);
|
||||
|
||||
const response = await fetch(path);
|
||||
if (!response.ok) {
|
||||
console.error(
|
||||
`Fehler beim Laden der Datei directory.json. HTTP-Status: ${response.status}`
|
||||
);
|
||||
setDateiListe([]);
|
||||
setDateiListe([]); // Setze eine leere Liste
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -810,12 +860,39 @@ const TDRPopup: React.FC = () => {
|
||||
const handleAktualisieren = () => {
|
||||
console.log("Daten werden aktualisiert für:", jahr, monat);
|
||||
};
|
||||
|
||||
//----------------------------------
|
||||
const loadAndStoreChartData = async (url: string) => {
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) {
|
||||
console.error(
|
||||
`Fehler beim Laden der Daten. HTTP-Status: ${response.status}`
|
||||
);
|
||||
return;
|
||||
}
|
||||
const data = await response.json();
|
||||
dispatch(setSelectedChartData(data));
|
||||
console.log("Daten erfolgreich in Redux gespeichert:", data);
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Laden der JSON-Daten:", error);
|
||||
}
|
||||
};
|
||||
const handleLoadData = (filename: string) => {
|
||||
const yearFolder = `Year_${jahr.toString().slice(-2)}`;
|
||||
const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
|
||||
const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${filename}`;
|
||||
loadAndStoreChartData(filePath);
|
||||
};
|
||||
const handleDateiAuswahl = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const selectedFile = event.target.value;
|
||||
setAusgewählteDatei(selectedFile);
|
||||
console.log("Ausgewählte Datei:", selectedFile);
|
||||
loadSelectedFileData(selectedFile);
|
||||
|
||||
// Datei in Redux speichern
|
||||
dispatch(setSelectedFileName(selectedFile));
|
||||
|
||||
// Lade die Datei und speichere sie in Redux
|
||||
handleLoadData(selectedFile);
|
||||
};
|
||||
|
||||
const loadSelectedFileData = async (filename: string) => {
|
||||
|
||||
Reference in New Issue
Block a user