CPLv4.0/pages/system.tsx

"use client"; // /pages/system.tsx
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../redux/store";
import { fetchSystemVoltTempThunk } from "../redux/thunks/fetchSystemVoltTempThunk";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import { Line } from "react-chartjs-2";

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

const SystemPage = () => {
  const dispatch = useDispatch<AppDispatch>();
  const voltages = useSelector(
    (state: RootState) => state.systemVoltTemp.voltages
  );
  const history = useSelector(
    (state: RootState) => state.systemVoltTemp.history
  );

  useEffect(() => {
    dispatch(fetchSystemVoltTempThunk());
    const interval = setInterval(() => {
      dispatch(fetchSystemVoltTempThunk());
    }, 5000);
    return () => clearInterval(interval);
  }, [dispatch]);

  const labels = history.map((h) => new Date(h.time).toLocaleTimeString());

  const formatValue = (value: number) => value.toFixed(2);

  const voltageDatasets = [
    {
      label: "+5V",
      data: history.map((h) => formatValue(h["+5V"])),
      borderColor: "rgba(59,130,246,1)",
      backgroundColor: "rgba(59,130,246,0.5)",
      fill: false,
    },
    {
      label: "+15V",
      data: history.map((h) => formatValue(h["+15V"])),
      borderColor: "rgba(34,197,94,1)",
      backgroundColor: "rgba(34,197,94,0.5)",
      fill: false,
    },
    {
      label: "-15V",
      data: history.map((h) => formatValue(h["-15V"])),
      borderColor: "rgba(239,68,68,1)",
      backgroundColor: "rgba(239,68,68,0.5)",
      fill: false,
    },
    {
      label: "-98V",
      data: history.map((h) => formatValue(h["-98V"])),
      borderColor: "rgba(234,179,8,1)",
      backgroundColor: "rgba(234,179,8,0.5)",
      fill: false,
    },
  ];

  const temperatureDatasets = [
    {
      label: "ADC Temp",
      data: history.map((h) => h["ADC Temp"]),
      borderColor: "rgba(168,85,247,1)",
      backgroundColor: "rgba(168,85,247,0.5)",
      fill: false,
    },
    {
      label: "CPU Temp",
      data: history.map((h) => Number(formatValue(h["CPU Temp"]))),
      borderColor: "rgba(251,191,36,1)",
      backgroundColor: "rgba(251,191,36,0.5)",
      fill: false,
    },
  ];

  const baseChartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      y: {
        beginAtZero: false,
        grid: {
          color: "rgba(200,200,200,0.2)",
        },
        title: {
          display: true,
          text: "Wert",
        },
      },
      x: {
        grid: {
          color: "rgba(200,200,200,0.2)",
        },
        title: {
          display: true,
          text: "Zeit",
        },
      },
    },
    plugins: {
      legend: {
        position: "bottom" as const,
      },
      tooltip: {
        callbacks: {
          label: function (context: any) {
            const label = context.dataset.label || "";
            const value =
              context.parsed.y !== null ? context.parsed.y.toFixed(2) : "";
            const unit = label.includes("Temp") ? "°C" : "V";
            return `${label}: ${value} ${unit}`;
          },
        },
      },
    },
  };

  return (
    <div className="p-4">
      <h1 className="text-xl font-bold mb-4">
        System Spannungen & Temperaturen
      </h1>

      <div className="grid grid-cols-2 gap-4 mb-8">
        {Object.entries(voltages).map(([key, value]) => {
          const formattedValue = formatValue(value);
          const unit = key.includes("Temp") ? "°C" : "V";
          return (
            <div key={key} className="p-4 border rounded shadow">
              <h2 className="font-semibold">{key}</h2>
              <p>
                {formattedValue} {unit}
              </p>
            </div>
          );
        })}
      </div>

      <div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
        <div className="h-[300px]">
          <Line
            data={{ labels, datasets: voltageDatasets }}
            options={{
              ...baseChartOptions,
              plugins: {
                ...baseChartOptions.plugins,
                title: {
                  display: true,
                  text: "Systemspannungen",
                },
              },
            }}
          />
        </div>

        <div className="h-[300px]">
          <Line
            data={{ labels, datasets: temperatureDatasets }}
            options={{
              ...baseChartOptions,
              plugins: {
                ...baseChartOptions.plugins,
                title: {
                  display: true,
                  text: "Systemtemperaturen",
                },
              },
            }}
          />
        </div>
      </div>
    </div>
  );
};

export default SystemPage;