Filter out null values in tooltip (#15588)

Before:
<img width="356" height="330" alt="CleanShot 2025-11-04 at 11 44 14@2x"
src="https://github.com/user-attachments/assets/924f8623-3961-411c-9763-800fd9491224"
/>

After:
<img width="418" height="242" alt="CleanShot 2025-11-04 at 11 43 49@2x"
src="https://github.com/user-attachments/assets/54cf5fa4-1146-43b4-8cff-59817bcbe6a4"
/>

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 (
     <StyledTooltip>
       <StyledHorizontalSectionPadding $addTop $addBottom={!showClickHint}>
@@ -136,7 +142,7 @@ export const GraphWidgetTooltip = ({
             <StyledTooltipHeader>{indexLabel}</StyledTooltipHeader>
           )}
           <StyledTooltipRowContainer>
-            {items.map((item, index) => (
+            {filteredItems.map((item, index) => (
               <StyledTooltipRow key={index}>
                 <StyledDot $color={item.dotColor} />
                 <StyledTooltipRowRightContent>

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

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

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),

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

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),