recharts-tooltip

1import { getPayloadConfigFromPayload, getColorsCount, useChart } from "@/registry/ui/recharts-chart";
2import type { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent";
3import * as RechartsPrimitive from "recharts";
4import { cn } from "@/lib/utils";
5import * as React from "react";
6 
7type TooltipRoundness = "sm" | "md" | "lg" | "xl";
8type TooltipVariant = "default" | "frosted-glass";
9 
10const roundnessMap: Record<TooltipRoundness, string> = {
11  sm: "rounded-sm",
12  md: "rounded-md",
13  lg: "rounded-lg",
14  xl: "rounded-xl",
15};
16 
17const variantMap: Record<TooltipVariant, string> = {
18  default: "bg-background",
19  "frosted-glass": "bg-background/70 backdrop-blur-sm",
20};
21 
22function ChartTooltipContent({
23  active,
24  payload,
25  className,
26  indicator = "dot",
27  hideLabel = false,
28  hideIndicator = false,
29  label,
30  labelFormatter,
31  labelClassName,
32  formatter,
33  nameKey,
34  labelKey,
35  selected,
36  roundness = "lg",
37  variant = "default",
38}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
39  React.ComponentProps<"div"> & {
40    hideLabel?: boolean;
41    hideIndicator?: boolean;
42    indicator?: "line" | "dot" | "dashed";
43    nameKey?: string;
44    labelKey?: string;
45    selected?: string | null;
46    roundness?: TooltipRoundness;
47    variant?: TooltipVariant;
48  } & Omit<
49    RechartsPrimitive.DefaultTooltipContentProps<ValueType, NameType>,
50    "accessibilityLayer"
51  >) {
52  const { config } = useChart();
53 
54  const tooltipLabel = React.useMemo(() => {
55    if (hideLabel || !payload?.length) {
56      return null;
57    }
58 
59    const [item] = payload;
60    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
61    const itemConfig = getPayloadConfigFromPayload(config, item, key);
62    const value =
63      !labelKey && typeof label === "string" ? (config[label]?.label ?? label) : itemConfig?.label;
64 
65    if (labelFormatter) {
66      return (
67        <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>
68      );
69    }
70 
71    if (!value) {
72      return null;
73    }
74 
75    return <div className={cn("font-medium", labelClassName)}>{value}</div>;
76  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
77 
78  if (!active || !payload?.length) {
79    // Empty tooltip - to prevent position getting 0.0 so it doesnt animate tooltip every time from 0.0 origin
80    return <span className="p-4" />;
81  }
82 
83  const nestLabel = payload.length === 1 && indicator !== "dot";
84 
85  return (
86    <div
87// … truncated