feat(analogeEingaenge): Einzelanzeige pro Eingang + Titel & Zeitachse im deutschen Format

components/main/analogeEingaenge/AnalogInputsChart.tsx

@@ -1,4 +1,4 @@
-"use client"; // components/main/analogeEingaenge/AnalogInputsChart.tsx
+"use client";
 import React, { useEffect } from "react";
 import { Line } from "react-chartjs-2";
 import {
@@ -13,6 +13,7 @@ import {
   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";
@@ -28,18 +29,11 @@ ChartJS.register(
   TimeScale
 );
 
-const colors = [
-  "#007bff",
-  "#28a745",
-  "#dc3545",
-  "#ffc107",
-  "#17a2b8",
-  "#6f42c1",
-  "#fd7e14",
-  "#20c997",
-];
-
-export default function AnalogInputsChart() {
+export default function AnalogInputsChart({
+  selectedId,
+}: {
+  selectedId: number | null;
+}) {
   const dispatch = useDispatch<AppDispatch>();
   const { data, isLoading, error } = useSelector(
     (state: RootState) => state.analogInputsHistory
@@ -49,34 +43,45 @@ export default function AnalogInputsChart() {
     dispatch(fetchAnalogInputsHistoryThunk());
   }, [dispatch]);
 
-  const datasets = Object.entries(data).map(([key, inputData], index) => ({
-    label: `Eingang ${Number(key) - 99}`,
-    data: inputData.map((point: any) => ({
-      x: point.t,
-      y: point.m,
-    })),
-    fill: false,
-    borderColor: colors[index % colors.length],
-    backgroundColor: colors[index % colors.length],
-    tension: 0.3,
-  }));
+  if (!selectedId) {
+    return <div className="text-gray-500">Bitte einen Eingang auswählen</div>;
+  }
+
+  const key = String(selectedId + 99);
+  const inputData = data[key];
+
+  if (!inputData) {
+    return (
+      <div className="text-red-500">
+        Keine Verlaufsdaten für Eingang {selectedId} gefunden.
+      </div>
+    );
+  }
 
   const chartData = {
-    datasets,
+    datasets: [
+      {
+        label: `Eingang ${selectedId}`,
+        data: inputData.map((point: any) => ({
+          x: point.t,
+          y: point.m,
+        })),
+        fill: false,
+        borderColor: "#007bff",
+        backgroundColor: "#007bff",
+        tension: 0.3,
+      },
+    ],
   };
 
   const chartOptions = {
     responsive: true,
     plugins: {
-      legend: {
-        position: "top" as const,
-        labels: {
-          usePointStyle: true,
-        },
-      },
-      tooltip: {
-        mode: "index" as const,
-        intersect: false,
+      legend: { position: "top" as const },
+      tooltip: { mode: "index" as const, intersect: false },
+      title: {
+        display: true,
+        text: `Verlauf Eingang ${selectedId} – letzte 24 Stunden`,
       },
     },
     scales: {
@@ -84,14 +89,20 @@ export default function AnalogInputsChart() {
         type: "time" as const,
         time: {
           unit: "hour",
-          tooltipFormat: "HH:mm",
+          tooltipFormat: "HH:mm 'Uhr' dd.MM.",
           displayFormats: {
             hour: "HH:mm",
+            day: "dd.MM.",
+          },
+        },
+        adapters: {
+          date: {
+            locale: de,
           },
         },
         title: {
           display: true,
-          text: "Zeit",
+          text: "Zeit ",
         },
       },
       y: {
@@ -104,20 +115,8 @@ export default function AnalogInputsChart() {
   };
 
   return (
-    <div className="w-full bg-white shadow-md rounded-lg p-4 border border-gray-200">
-      <h2 className="text-lg font-bold mb-4">
-        Alle analogen Eingänge – Verlauf der letzten 24 Stunden
-      </h2>
-
-      {isLoading ? (
-        <div className="text-center text-gray-500">Lade Daten...</div>
-      ) : error ? (
-        <div className="text-center text-red-500">Fehler: {error}</div>
-      ) : (
-        <div className="w-full h-[400px]">
-          <Line data={chartData} options={chartOptions} />
-        </div>
-      )}
+    <div className="w-full h-[400px]">
+      <Line data={chartData} options={chartOptions} />
     </div>
   );
 }