analoge eingänge

2025-06-19 12:27:00 +02:00
parent 887e7b4992
commit 3a829f2298
28 changed files with 285 additions and 248 deletions
--- a/components/main/analogInputs/AnalogInputsChart.tsx
+++ b/components/main/analogInputs/AnalogInputsChart.tsx
@@ -0,0 +1,129 @@
+"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 { fetchAnalogInputsHistoryThunk } from "../../../redux/thunks/fetchAnalogInputsHistoryThunk";
+
+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
+  );
+
+  useEffect(() => {
+    dispatch(fetchAnalogInputsHistoryThunk());
+  }, [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",
+          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>
+  );
+}