CPLv4.0/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/CustomTooltip.tsx

"use client";

import React from "react";

interface CustomTooltipProps {
  active?: boolean;
  payload?: any[];
  label?: string;
  unit?: string;
}

const CustomTooltip: React.FC<CustomTooltipProps> = ({
  active,
  payload,
  label,
  unit,
}) => {
  if (active && payload && payload.length) {
    const messwertMax = payload.find((p) => p.dataKey === "messwertMaximum");
    const messwert = payload.find((p) => p.dataKey === "messwert");
    const messwertMin = payload.find((p) => p.dataKey === "messwertMinimum");
    const messwertDurchschnitt = payload.find(
      (p) => p.dataKey === "messwertDurchschnitt"
    );

    return (
      <div
        style={{
          background: "white",
          padding: "8px",
          border: "1px solid lightgrey",
          borderRadius: "5px",
        }}
      >
        <strong>{new Date(label as string).toLocaleString()}</strong>
        {messwertMax && (
          <div style={{ color: "grey" }}>
            Messwert Maximum: {messwertMax.value.toFixed(2)} {unit}
          </div>
        )}
        {messwert && (
          <div style={{ color: "#00AEEF", fontWeight: "bold" }}>
            Messwert: {messwert.value.toFixed(2)} {unit}
          </div>
        )}
        {messwertDurchschnitt && (
          <div style={{ color: "#00AEEF" }}>
            Messwert Durchschnitt: {messwertDurchschnitt.value.toFixed(2)}{" "}
            {unit}
          </div>
        )}
        {messwertMin && (
          <div style={{ color: "grey" }}>
            Messwert Minimum: {messwertMin.value.toFixed(2)} {unit}
          </div>
        )}
      </div>
    );
  }
  return null;
};

export default CustomTooltip;