134 lines
2.9 KiB
TypeScript
134 lines
2.9 KiB
TypeScript
"use client"; // /components/main/analogeEingaenge/AnalogInputsChart.tsx
|
|
import React, { useEffect } from "react";
|
|
import { Line } from "react-chartjs-2";
|
|
import { getColor } from "../../../utils/colors";
|
|
import {
|
|
Chart as ChartJS,
|
|
LineElement,
|
|
PointElement,
|
|
CategoryScale,
|
|
LinearScale,
|
|
Tooltip,
|
|
Legend,
|
|
Filler,
|
|
TimeScale,
|
|
} from "chart.js";
|
|
import "chartjs-adapter-date-fns";
|
|
import { de } from "date-fns/locale";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import type { RootState, AppDispatch } from "../../../redux/store";
|
|
import { getAnalogInputsHistoryThunk } from "@/redux/thunks/getAnalogInputsHistoryThunk";
|
|
|
|
ChartJS.register(
|
|
LineElement,
|
|
PointElement,
|
|
CategoryScale,
|
|
LinearScale,
|
|
Tooltip,
|
|
Legend,
|
|
Filler,
|
|
TimeScale
|
|
);
|
|
|
|
export default function AnalogInputsChart({
|
|
selectedId,
|
|
}: {
|
|
selectedId: number | null;
|
|
}) {
|
|
const dispatch = useDispatch<AppDispatch>();
|
|
const { data, isLoading, error } = useSelector(
|
|
(state: RootState) => state.analogInputsHistory
|
|
) as {
|
|
data: { [key: string]: any[] };
|
|
isLoading: boolean;
|
|
error: any;
|
|
};
|
|
|
|
useEffect(() => {
|
|
dispatch(getAnalogInputsHistoryThunk());
|
|
}, [dispatch]);
|
|
|
|
if (!selectedId) {
|
|
return (
|
|
<div className="text-gray-500">Bitte einen Messwerteingang auswählen</div>
|
|
);
|
|
}
|
|
|
|
const key = String(selectedId + 99);
|
|
const inputData = data[key];
|
|
|
|
if (!inputData) {
|
|
return (
|
|
<div className="text-red-500">
|
|
Keine Verlaufsdaten für Messwerteingang {selectedId} gefunden.
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const chartData = {
|
|
datasets: [
|
|
{
|
|
label: `Messkurve Messwerteingang ${selectedId}`,
|
|
data: inputData.map((point: any) => ({
|
|
x: point.t,
|
|
y: point.m,
|
|
})),
|
|
fill: false,
|
|
borderColor: getColor("littwin-blue"),
|
|
backgroundColor: "rgba(59,130,246,0.5)",
|
|
borderWidth: 2,
|
|
// fill: false,
|
|
pointRadius: 0,
|
|
pointHoverRadius: 10,
|
|
tension: 0.1,
|
|
},
|
|
],
|
|
};
|
|
|
|
const chartOptions = {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: { position: "top" as const },
|
|
tooltip: { mode: "index" as const, intersect: false },
|
|
title: {
|
|
display: true,
|
|
text: `Verlauf der letzte 24 Stunden`,
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
type: "time" as const,
|
|
time: {
|
|
unit: "hour" as const,
|
|
tooltipFormat: "HH:mm 'Uhr' dd.MM.",
|
|
displayFormats: {
|
|
hour: "HH:mm",
|
|
day: "dd.MM.",
|
|
},
|
|
},
|
|
adapters: {
|
|
date: {
|
|
locale: de,
|
|
},
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: "Zeit ",
|
|
},
|
|
},
|
|
y: {
|
|
title: {
|
|
display: true,
|
|
text: "Messwert",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
return (
|
|
<div className="w-full h-full">
|
|
<Line data={chartData} options={chartOptions} />
|
|
</div>
|
|
);
|
|
}
|