Chart Legend

1"use client";
2 
3import {
4  cloneElement,
5  isValidElement,
6  type ReactElement,
7  useState,
8} from "react";
9import { cn } from "@/lib/utils";
10import {
11  type LegendItemData,
12  LegendItemProvider,
13  LegendProvider,
14} from "./legend-context";
15 
16export interface LegendProps {
17  /** Legend items data */
18  items: LegendItemData[];
19  /** Controlled hover state */
20  hoveredIndex?: number | null;
21  /** Hover state change callback */
22  onHoverChange?: (index: number | null) => void;
23  /** Title shown above the legend */
24  title?: string;
25  /** Title class name */
26  titleClassName?: string;
27  /** Container class name */
28  className?: string;
29  /** Children - should contain a single LegendItem that will be mapped for each item */
30  children: ReactElement;
31}
32 
33export function Legend({
34  items,
35  hoveredIndex: controlledHoveredIndex,
36  onHoverChange,
37  title,
38  titleClassName = "text-sm font-semibold",
39  className = "",
40  children,
41}: LegendProps) {
42  const [internalHoveredIndex, setInternalHoveredIndex] = useState<
43    number | null
44  >(null);
45 
46  // Controlled or uncontrolled hover state
47  const isControlled = controlledHoveredIndex !== undefined;
48  const hoveredIndex = isControlled
49    ? controlledHoveredIndex
50    : internalHoveredIndex;
51  const setHoveredIndex = (index: number | null) => {
52    if (isControlled) {
53      onHoverChange?.(index);
54    } else {
55      setInternalHoveredIndex(index);
56    }
57  };
58 
59  const contextValue = {
60    items,
61    hoveredIndex,
62    setHoveredIndex,
63  };
64 
65  return (
66    <LegendProvider value={contextValue}>
67      <div className={cn("legend-container flex flex-col gap-2", className)}>
68        {title && (
69          <h3 className={cn("mb-1 text-legend-foreground", titleClassName)}>
70            {title}
71          </h3>
72        )}
73        {items.map((item, index) => {
74          const isHovered = hoveredIndex === index;
75          const isFaded = hoveredIndex !== null && hoveredIndex !== index;
76          const percentage = item.maxValue
77            ? (item.value / item.maxValue) * 100
78            : 0;
79 
80          const itemContext = {
81            item,
82            index,
83            isHovered,
84            isFaded,
85            percentage,
86          };
87 
88          // Clone the child element for each item
89          if (isValidElement(children)) {
90            return (
91              <LegendItemProvider key={item.label} value={itemContext}>
92                {cloneElement(children)}
93              </LegendItemProvider>
94            );
95          }
96 
97// … truncated