e530ad5412
* feat: add toggleable legend functionality to ChartCard components - Create useToggleableLegend hook for managing enabled/disabled series - Update ChartCard to accept enabledLegend and onSeriesToggle props - Add click handlers and visual feedback to Legend component - Apply toggleable functionality to EventTrendsChart and RoutingFunnel - Maintain backwards compatibility with existing charts Features: - Visual feedback: 50% opacity for disabled items, hover effects, cursor pointer - Interactive legend items toggle chart series on/off - Hook uses TypeScript generics for different legend item types - Conditional rendering of chart series based on enabled legend items - Full backwards compatibility - existing charts work unchanged Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> * address feedback * address feedback * do not use ! --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
25 lines
694 B
TypeScript
25 lines
694 B
TypeScript
import { useState, useMemo, useCallback } from "react";
|
|
|
|
export const useToggleableLegend = <T extends { label: string }>(legend: T[], initialEnabled?: string[]) => {
|
|
const [enabledSeries, setEnabledSeries] = useState<string[]>(
|
|
initialEnabled ?? legend.map((item) => item.label)
|
|
);
|
|
|
|
const enabledLegend = useMemo(
|
|
() => legend.filter((item) => enabledSeries.includes(item.label)),
|
|
[legend, enabledSeries]
|
|
);
|
|
|
|
const toggleSeries = useCallback(
|
|
(label: string) => {
|
|
setEnabledSeries((prev) => (prev.includes(label) ? prev.filter((s) => s !== label) : [...prev, label]));
|
|
},
|
|
[setEnabledSeries]
|
|
);
|
|
|
|
return {
|
|
enabledLegend,
|
|
toggleSeries,
|
|
};
|
|
};
|