From 98180c263d15ba9d5b8a410bf1994c5c60558562 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?= <71827178+bosiraphael@users.noreply.github.com> Date: Tue, 4 Nov 2025 12:09:12 +0100 Subject: [PATCH] Filter out null values in tooltip (#15588) Before: CleanShot 2025-11-04 at 11 44 14@2x After: CleanShot 2025-11-04 at 11 43 49@2x --- .../graph/components/GraphWidgetTooltip.tsx | 8 +++- .../GraphWidgetTooltip.stories.tsx | 39 +++++++++++++++++++ .../hooks/useBarChartTooltip.ts | 1 + .../hooks/useGaugeChartTooltip.ts | 1 + .../hooks/useLineChartTooltip.ts | 14 +++---- .../hooks/usePieChartTooltip.ts | 1 + 6 files changed, 55 insertions(+), 9 deletions(-) diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetTooltip.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetTooltip.tsx index d578c41c06..6e9f7c32fe 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetTooltip.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetTooltip.tsx @@ -1,6 +1,7 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { t } from '@lingui/core/macro'; +import { isNonEmptyString } from '@sniptt/guards'; import { IconArrowUpRight } from 'twenty-ui/display'; const StyledTooltip = styled.div` @@ -112,6 +113,7 @@ const StyledHorizontalSectionPadding = styled.div<{ export type GraphWidgetTooltipItem = { label: string; formattedValue: string; + value: number; dotColor: string; }; @@ -128,6 +130,10 @@ export const GraphWidgetTooltip = ({ }: GraphWidgetTooltipProps) => { const theme = useTheme(); + const filteredItems = items.filter( + (item) => item.value !== 0 && isNonEmptyString(item.formattedValue), + ); + return ( @@ -136,7 +142,7 @@ export const GraphWidgetTooltip = ({ {indexLabel} )} - {items.map((item, index) => ( + {filteredItems.map((item, index) => ( diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/__stories__/GraphWidgetTooltip.stories.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/__stories__/GraphWidgetTooltip.stories.tsx index 3678cddb70..76b80f631b 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/__stories__/GraphWidgetTooltip.stories.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/__stories__/GraphWidgetTooltip.stories.tsx @@ -21,6 +21,7 @@ export const Default: Story = { { label: 'Revenue', formattedValue: '$45,231', + value: 45231, dotColor: 'blue', }, ], @@ -35,6 +36,7 @@ export const WithClickHint: Story = { { label: 'Sales', formattedValue: '1,234 units', + value: 1234, dotColor: 'green', }, ], @@ -48,11 +50,13 @@ export const MultipleItems: Story = { { label: 'Last year', formattedValue: '20k', + value: 20000, dotColor: 'blue', }, { label: 'This year', formattedValue: '20k', + value: 20000, dotColor: 'purple', }, ], @@ -68,11 +72,13 @@ export const SuperLongText: Story = { label: 'Total Annual Recurring Revenue (North America Region including Canada)', formattedValue: '$2,450,000', + value: 2450000, dotColor: 'blue', }, { label: 'Customer Acquisition Cost (Marketing & Sales Combined)', formattedValue: '$125,500', + value: 125500, dotColor: 'purple', }, ], @@ -81,3 +87,36 @@ export const SuperLongText: Story = { 'Q4 2024 Financial Year End (October - December) - North America Regional Performance Summary', }, }; + +export const WithZeroValues: Story = { + args: { + items: [ + { + label: 'Revenue', + formattedValue: '$0.00', + value: 0, + dotColor: 'blue', + }, + { + label: 'Sales', + formattedValue: '0%', + value: 0, + dotColor: 'green', + }, + { + label: 'Active Users', + formattedValue: '0', + value: 0, + dotColor: 'purple', + }, + { + label: 'Conversions', + formattedValue: '$45,231', + value: 45231, + dotColor: 'orange', + }, + ], + showClickHint: false, + indexLabel: 'March 09, 2024', + }, +}; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/hooks/useBarChartTooltip.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/hooks/useBarChartTooltip.ts index 105c9ed0a8..838b7b1a94 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/hooks/useBarChartTooltip.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/hooks/useBarChartTooltip.ts @@ -46,6 +46,7 @@ export const useBarChartTooltip = ({ return { label: enrichedKey.label, formattedValue: formatGraphValue(seriesValue, formatOptions), + value: seriesValue, dotColor: enrichedKey.colorScheme.solid, }; }); diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/hooks/useGaugeChartTooltip.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/hooks/useGaugeChartTooltip.ts index 9b95ddb049..3b9f21f7fe 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/hooks/useGaugeChartTooltip.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/hooks/useGaugeChartTooltip.ts @@ -33,6 +33,7 @@ export const useGaugeChartTooltip = ({ tooltipItem: { label: label, formattedValue, + value, dotColor: colorScheme.solid, }, showClickHint: isDefined(to), diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/hooks/useLineChartTooltip.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/hooks/useLineChartTooltip.ts index 257318a44d..5bd5208aed 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/hooks/useLineChartTooltip.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/hooks/useLineChartTooltip.ts @@ -42,12 +42,11 @@ export const useLineChartTooltip = ({ ); if (!enrichedSeriesItem) return null; + const value = Number(point.data.y || 0); return { label: enrichedSeriesItem.label, - formattedValue: formatGraphValue( - Number(point.data.y || 0), - formatOptions, - ), + formattedValue: formatGraphValue(value, formatOptions), + value, dotColor: enrichedSeriesItem.colorScheme.solid, }; }) @@ -78,14 +77,13 @@ export const useLineChartTooltip = ({ const series = dataMap[point.seriesId]; const dataPoint = series?.data[point.indexInSeries]; + const value = Number(point.data.y || 0); return { items: [ { label: enrichedSeriesItem.label, - formattedValue: formatGraphValue( - Number(point.data.y || 0), - formatOptions, - ), + formattedValue: formatGraphValue(value, formatOptions), + value, dotColor: enrichedSeriesItem.colorScheme.solid, }, ], diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/hooks/usePieChartTooltip.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/hooks/usePieChartTooltip.ts index 688173fe2c..9ffb0eacf4 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/hooks/usePieChartTooltip.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/hooks/usePieChartTooltip.ts @@ -37,6 +37,7 @@ export const usePieChartTooltip = ({ tooltipItem: { label: item.label || item.id, formattedValue, + value: item.value, dotColor: item.colorScheme.solid, }, showClickHint: isDefined(dataItem?.to),