65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import { formatNumber } from "./utils";
|
|
|
|
interface CustomTooltipProps {
|
|
active?: boolean;
|
|
payload?: Array<{
|
|
value: number;
|
|
color: string;
|
|
}>;
|
|
label?: number;
|
|
metricLabel?: string;
|
|
isPercentage?: boolean;
|
|
totalItems: number;
|
|
}
|
|
|
|
const CustomTooltip = memo<CustomTooltipProps>(
|
|
({
|
|
active,
|
|
payload,
|
|
label = 0,
|
|
metricLabel = "Value",
|
|
isPercentage = false,
|
|
totalItems,
|
|
}: CustomTooltipProps) => {
|
|
if (active && payload && payload.length) {
|
|
const value = isPercentage
|
|
? `${payload[0].value}%`
|
|
: formatNumber(payload[0].value);
|
|
const today = new Date();
|
|
const daysAgo = totalItems - 1 - label;
|
|
const date = new Date(today);
|
|
date.setDate(today.getDate() - daysAgo);
|
|
return (
|
|
<div className="card rounded-theme-capped p-3">
|
|
<p className="text-xs text-foreground mb-2">
|
|
{date.toLocaleDateString("en-US", {
|
|
month: "short",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
})}
|
|
</p>
|
|
<div className="flex items-center gap-2">
|
|
<div
|
|
className="h-1.5 aspect-square rounded-full"
|
|
style={{
|
|
backgroundColor: payload[0].color,
|
|
}}
|
|
/>
|
|
<span className="text-xs text-foreground">
|
|
{metricLabel}: {value}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
}
|
|
);
|
|
|
|
CustomTooltip.displayName = "CustomTooltip";
|
|
|
|
export default CustomTooltip;
|