71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
|
|
interface CustomTooltipProps {
|
|
active?: boolean;
|
|
payload?: Array<{
|
|
dataKey: string;
|
|
value: number;
|
|
name?: string;
|
|
color?: string;
|
|
unit?: string;
|
|
// Add other known properties here as needed
|
|
}>;
|
|
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;
|