Eunjae LeeGitHubeunjae@cal.com <hey@eunjae.dev>Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>* 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>
48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useInsightsRoutingParameters } from "@calcom/features/insights/hooks/useInsightsRoutingParameters";
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { trpc } from "@calcom/trpc";
|
|
|
|
import { useToggleableLegend } from "../../hooks/useToggleableLegend";
|
|
import { ChartCard } from "../ChartCard";
|
|
import { RoutingFunnelContent, legend } from "./RoutingFunnelContent";
|
|
import { RoutingFunnelSkeleton } from "./RoutingFunnelSkeleton";
|
|
|
|
export function RoutingFunnel() {
|
|
const { t } = useLocale();
|
|
const insightsRoutingParams = useInsightsRoutingParameters();
|
|
const { enabledLegend, toggleSeries } = useToggleableLegend(legend);
|
|
const { data, isSuccess, isLoading } = trpc.viewer.insights.getRoutingFunnelData.useQuery(
|
|
insightsRoutingParams,
|
|
{
|
|
staleTime: 30000,
|
|
trpc: {
|
|
context: { skipBatch: true },
|
|
},
|
|
}
|
|
);
|
|
|
|
if (isLoading || !isSuccess || !data) {
|
|
return (
|
|
<ChartCard
|
|
title={t("routing_funnel")}
|
|
legend={legend}
|
|
enabledLegend={enabledLegend}
|
|
onSeriesToggle={toggleSeries}>
|
|
<RoutingFunnelSkeleton />
|
|
</ChartCard>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ChartCard
|
|
title={t("routing_funnel")}
|
|
legend={legend}
|
|
enabledLegend={enabledLegend}
|
|
onSeriesToggle={toggleSeries}>
|
|
<RoutingFunnelContent data={data} enabledLegend={enabledLegend} />
|
|
</ChartCard>
|
|
);
|
|
}
|