Chart tooltip

1"use client";
2 
3import * as React from "react";
4 
5interface ChartTooltipPayloadItem {
6  dataKey: string;
7  name: string;
8  value: number | string;
9  color: string;
10}
11 
12interface ChartTooltipProps {
13  active?: boolean;
14  payload?: ChartTooltipPayloadItem[];
15  label?: string;
16}
17 
18const ChartTooltip = React.memo(function ChartTooltip({
19  active,
20  payload,
21  label,
22}: ChartTooltipProps) {
23  if (!active || !payload?.length) return null;
24  return (
25    <div className="border-border-strong bg-popover rounded-sm border px-2 py-1.5 shadow-[var(--shadow-panel)]">
26      <div className="text-mono text-foreground-muted text-[10px] tracking-[0.08em] uppercase">
27        {label}
28      </div>
29      <div className="mt-1 flex flex-col gap-0.5">
30        {payload.map((entry) => (
31          <div key={entry.dataKey} className="flex items-center gap-1.5">
32            <span className="size-1.5 rounded-full" style={{ backgroundColor: entry.color }} />
33            <span className="text-mono text-foreground text-[11px]">
34              {entry.name}: <span className="text-foreground-muted">{entry.value}</span>
35            </span>
36          </div>
37        ))}
38      </div>
39    </div>
40  );
41});
42 
43export { ChartTooltip };
44export type { ChartTooltipPayloadItem, ChartTooltipProps };