diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/components/CustomArcsLayer.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/components/CustomArcsLayer.tsx index 3904337b9c..1be58d45d2 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/components/CustomArcsLayer.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/components/CustomArcsLayer.tsx @@ -38,7 +38,7 @@ export const CustomArcsLayer = ({ {transition((_, datum) => { const isDimmed = isDefined(graphWidgetHighlightedLegendId) && - String(graphWidgetHighlightedLegendId) !== String(datum.id); + String(graphWidgetHighlightedLegendId) !== String(datum.data.id); const arcLength = datum.arc.endAngle - datum.arc.startAngle; const padAngleRadians = (padAngle * Math.PI) / 180; const clampedPadAngle = Math.min( diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/components/GraphWidgetPieChart.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/components/GraphWidgetPieChart.tsx index 05b4f393e9..962150e349 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/components/GraphWidgetPieChart.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/components/GraphWidgetPieChart.tsx @@ -194,6 +194,7 @@ export const GraphWidgetPieChart = ({ enableArcLabels={false} tooltip={() => null} layers={[ArcsLayer, 'arcLinkLabels']} + id={(datum: PieChartDataItem) => `${id}:${String(datum.id)}`} arcLinkLabel={(datum: ComputedDatum) => { const formattedValue = getPieChartFormattedValue({ datum, diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/__tests__/getPieChartFormattedValue.test.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/__tests__/getPieChartFormattedValue.test.ts index fa95c436a7..dc889f99fe 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/__tests__/getPieChartFormattedValue.test.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/__tests__/getPieChartFormattedValue.test.ts @@ -47,10 +47,12 @@ describe('getPieChartFormattedValue', () => { const createMockDatum = ( id: string, + options?: { computedId?: string }, ): ComputedDatum => ({ - id, + id: options?.computedId ?? id, value: 0, + data: { id, value: 0 }, }) as unknown as ComputedDatum; const defaultFormatOptions = { @@ -81,6 +83,20 @@ describe('getPieChartFormattedValue', () => { expect(result).toBeNull(); }); + + it('should match by datum.data.id when computed id is namespaced per widget', () => { + const datum = createMockDatum('slice1', { + computedId: 'widget-abc:slice1', + }); + + const result = getPieChartFormattedValue({ + datum, + enrichedData: mockEnrichedData, + formatOptions: defaultFormatOptions, + }); + + expect(result).toContain('30'); + }); }); describe('percentage display type', () => { diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/__tests__/getPieChartTooltipData.test.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/__tests__/getPieChartTooltipData.test.ts index 1f4f0fd171..519666ea21 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/__tests__/getPieChartTooltipData.test.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/__tests__/getPieChartTooltipData.test.ts @@ -47,10 +47,12 @@ describe('getPieChartTooltipData', () => { const createMockDatum = ( id: string, + options?: { computedId?: string }, ): ComputedDatum => ({ - id, + id: options?.computedId ?? id, value: 0, + data: { id, value: 0 }, }) as unknown as ComputedDatum; const defaultFormatOptions = { @@ -148,6 +150,21 @@ describe('getPieChartTooltipData', () => { expect(result).toBeNull(); }); + it('should match by datum.data.id when computed id is namespaced per widget', () => { + const datum = createMockDatum('Product A', { + computedId: 'widget-xyz:Product A', + }); + + const result = getPieChartTooltipData({ + datum, + enrichedData: mockEnrichedData, + formatOptions: defaultFormatOptions, + }); + + expect(result?.tooltipItem.key).toBe('Product A'); + expect(result?.tooltipItem.value).toBe(500); + }); + it('should return null when enrichedData is empty', () => { const datum = createMockDatum('Product A'); diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/getPieChartFormattedValue.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/getPieChartFormattedValue.ts index 54396a012a..f6c8d44bad 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/getPieChartFormattedValue.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/getPieChartFormattedValue.ts @@ -22,7 +22,7 @@ export const getPieChartFormattedValue = ({ displayType, }: GetPieChartFormattedValueParams): string | null => { const item = enrichedData.find( - (enrichedDataItem) => enrichedDataItem.id === datum.id, + (enrichedDataItem) => enrichedDataItem.id === datum.data.id, ); if (!isDefined(item)) return null; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/getPieChartTooltipData.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/getPieChartTooltipData.ts index 5cceed4724..8d6921333f 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/getPieChartTooltipData.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/getPieChartTooltipData.ts @@ -23,7 +23,7 @@ export const getPieChartTooltipData = ({ tooltipItem: GraphWidgetTooltipItem; } | null => { const item = enrichedData.find( - (enrichedDataItem) => enrichedDataItem.id === datum.id, + (enrichedDataItem) => enrichedDataItem.id === datum.data.id, ); if (!isDefined(item)) return null;