feat: add donut chart legend

src/components/chart-elements/DonutChart/DonutChart.tsx

@@ -18,6 +18,7 @@
 import type { EventProps } from "components/chart-elements/common";
 import { CustomTooltipProps } from "components/chart-elements/common/CustomTooltipProps";
 import type BaseAnimationTimingProps from "../common/BaseAnimationTimingProps";
+import { Legend } from "components/text-elements";
 
 type DonutChartVariant = "donut" | "pie";
 
@@ -36,6 +37,7 @@
   className?: string;
   onValueChange?: (value: EventProps) => void;
   customTooltip?: React.ComponentType<CustomTooltipProps>;
+  activeSector?: string | null | undefined;
 }
 
 const renderInactiveShape = (props: any) => {
@@ -90,6 +92,7 @@
     onValueChange,
     customTooltip,
     className,
+    activeSector = undefined,
     ...other
   } = props;
   const CustomTooltip = customTooltip;
@@ -98,6 +101,7 @@
 
   const [activeIndex, setActiveIndex] = React.useState<number | undefined>(undefined);
   const hasOnValueChange = !!onValueChange;
+  const legendLabels = data.map((v) => v[index]);
 
   function onShapeClick(data: any, index: number, event: React.MouseEvent) {
     event.stopPropagation();
@@ -115,6 +119,15 @@
     }
   }
 
+  useEffect(() => {
+    if (!activeSector) {
+      return setActiveIndex(undefined);
+    }
+
+    const idx = data.findIndex((v) => v[index] === activeSector) ?? undefined;
+    setActiveIndex(idx);
+  }, [activeSector, data]);
+
   useEffect(() => {
     const pieSectors = document.querySelectorAll(".recharts-pie-sector");
     if (pieSectors) {
@@ -126,6 +139,28 @@
 
   return (
     <div ref={ref} className={tremorTwMerge("w-full h-40", className)} {...other}>
+      {activeSector !== undefined ? (
+        <>
+          <div className="flex justify-center">
+            <Legend
+              className="my-3"
+              categories={legendLabels}
+              colors={colors}
+              onClickLegendItem={(category) => {
+                const idx = data.findIndex((v) => v[index] === category) ?? undefined;
+
+                if (idx === activeIndex) {
+                  setActiveIndex(undefined);
+                  return;
+                }
+
+                setActiveIndex(idx);
+              }}
+            />
+          </div>
+          <div className="my-4" />
+        </>
+      ) : null}
       <ResponsiveContainer className="h-full w-full">
         {data?.length ? (
           <ReChartsDonutChart

src/stories/chart-elements/DonutChart.stories.tsx

@@ -171,3 +171,12 @@ export const CustomTooltipSimple: Story = {
     },
   },
 };
+
+export const ActiveValue: Story = {
+  args: { activeSector: "New York" },
+};
+
+export const ActiveValueNoDefaultValue: Story = {
+  // Setting activeValue to null shows legend without preselcted value
+  args: { activeSector: null },
+};