96 lines
2.8 KiB
TypeScript
96 lines
2.8 KiB
TypeScript
// components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
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);
|
|
|
|
// Zustand für die Chart-Daten
|
|
const [chartData, setChartData] = useState<
|
|
{ timestamp: string; tdr: number }[]
|
|
>([]);
|
|
|
|
useEffect(() => {
|
|
// Aktuelles Jahr und Monat ermitteln
|
|
const currentYear = new Date().getFullYear();
|
|
const currentMonth = new Date().getMonth() + 1; // Monate sind 0-basiert
|
|
|
|
// Pfad zur directory.json-Datei erstellen
|
|
const yearFolder = `Year_${String(currentYear).slice(-2)}`;
|
|
const monthFolder = `Month_${String(currentMonth).padStart(2, "0")}`;
|
|
const path = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`;
|
|
|
|
// Daten abrufen
|
|
fetch(path)
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error(
|
|
`Fehler beim Laden der Datei: ${response.statusText}`
|
|
);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
// Annahme: data ist ein Array von Objekten mit den Eigenschaften 'timestamp' und 'tdr'
|
|
setChartData(data);
|
|
})
|
|
.catch((error) => {
|
|
console.error("Fehler beim Abrufen der Daten:", error);
|
|
});
|
|
}, []);
|
|
|
|
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: "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,
|
|
},
|
|
},
|
|
},
|
|
});
|
|
}
|
|
}
|
|
}, [chartData]);
|
|
|
|
return (
|
|
<div>
|
|
<canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TDRChart;
|