Files
calendar/packages/features/insights/hooks/useToggleableLegend.ts
T
Eunjae LeeGitHubDevin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
e530ad5412 feat: add toggleable legend functionality to ChartCard components (#23390)
* 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>
2025-09-01 14:54:30 +00:00

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,
};
};