demeter

 1/**
 2 * Shared Custom Tooltip for Recharts components
 3 */
 4export default function ChartTooltip({ active, payload, label }) {
 5  if (!active || !payload?.length) return null;
 6  return (
 7    <div
 8      style={{
 9        padding: "8px 12px",
10        borderRadius: 8,
11        fontSize: 12,
12        fontFamily: "DM Mono, monospace",
13        background: "var(--tooltip-bg)",
14        border: "1px solid var(--border)",
15        color: "var(--text)",
16        boxShadow: "var(--shadow)",
17      }}
18    >
19      <div style={{ color: "var(--text-3)", marginBottom: 4 }}>{label}</div>
20      {payload.map((p) => (
21        <div key={p.dataKey} style={{ color: p.color, marginTop: 2 }}>
22          {p.name}: <strong>{p.value}</strong>
23        </div>
24      ))}
25    </div>
26  );
27}