diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegend.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegend.tsx index 00db64c38d..4197ffb746 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegend.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegend.tsx @@ -3,7 +3,6 @@ import styled from '@emotion/styled'; export type GraphWidgetLegendItem = { id: string; label: string; - formattedValue: string; color: string; }; @@ -17,7 +16,6 @@ const StyledLegendContainer = styled.div` flex-wrap: wrap; gap: ${({ theme }) => theme.spacing(3)}; justify-content: center; - padding: ${({ theme }) => theme.spacing(2)} 0; `; const StyledLegendItem = styled.div` @@ -32,10 +30,6 @@ const StyledLegendLabel = styled.span` color: ${({ theme }) => theme.font.color.light}; `; -const StyledLegendValue = styled.span` - color: ${({ theme }) => theme.font.color.primary}; -`; - const StyledDot = styled.div<{ color: string }>` background: ${({ color }) => color}; border-radius: 50%; @@ -58,7 +52,6 @@ export const GraphWidgetLegend = ({ {item.label} - {item.formattedValue} ))} diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/__stories__/GraphWidgetLegend.stories.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/__stories__/GraphWidgetLegend.stories.tsx index 15718130cf..673886a022 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/__stories__/GraphWidgetLegend.stories.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/__stories__/GraphWidgetLegend.stories.tsx @@ -24,19 +24,16 @@ export const Default: Story = { { id: 'sales', label: 'Sales', - formattedValue: '$45,231', color: 'blue', }, { id: 'marketing', label: 'Marketing', - formattedValue: '$12,543', color: 'green', }, { id: 'operations', label: 'Operations', - formattedValue: '$8,765', color: 'red', }, ]} @@ -54,7 +51,6 @@ export const SingleItem: Story = { { id: 'revenue', label: 'Revenue', - formattedValue: '750', color: 'blue', }, ]} diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx index 8c233cf4c4..625db27b41 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx @@ -277,14 +277,9 @@ export const GraphWidgetBarChart = ({ { - const total = data.reduce( - (sum, d) => sum + Number(d[item.key] || 0), - 0, - ); return { id: item.key, label: item.label, - formattedValue: formatGraphValue(total, formatOptions), color: item.colorScheme.solid, }; })} diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/components/GraphWidgetGaugeChart.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/components/GraphWidgetGaugeChart.tsx index f997a9eae0..2d27caf1c7 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/components/GraphWidgetGaugeChart.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/components/GraphWidgetGaugeChart.tsx @@ -169,7 +169,6 @@ export const GraphWidgetGaugeChart = ({ { id: 'gauge', label: data.label || t`Value`, - formattedValue: formattedValue, color: colorScheme.solid, }, ]} diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/components/GraphWidgetLineChart.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/components/GraphWidgetLineChart.tsx index ffa9aefe99..dac8cac99b 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/components/GraphWidgetLineChart.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/components/GraphWidgetLineChart.tsx @@ -117,7 +117,6 @@ export const GraphWidgetLineChart = ({ instanceId, enableArea, theme, - formatOptions, }); const { createSliceTooltipData, createPointTooltipData } = diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/hooks/__tests__/useLineChartData.test.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/hooks/__tests__/useLineChartData.test.ts index c48e494608..d762c912ea 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/hooks/__tests__/useLineChartData.test.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/hooks/__tests__/useLineChartData.test.ts @@ -1,6 +1,5 @@ import { type LineChartSeries } from '@/page-layout/widgets/graph/graphWidgetLineChart/types/LineChartSeries'; import { type GraphColorRegistry } from '@/page-layout/widgets/graph/types/GraphColorRegistry'; -import { type GraphValueFormatOptions } from '@/page-layout/widgets/graph/utils/graphFormatters'; import { renderHook } from '@testing-library/react'; import { type ThemeType } from 'twenty-ui/theme'; import { useLineChartData } from '../useLineChartData'; @@ -54,7 +53,6 @@ describe('useLineChartData', () => { }; const mockTheme = { name: 'light' } as ThemeType; - const mockFormatOptions: GraphValueFormatOptions = { displayType: 'number' }; const mockData: LineChartSeries[] = [ { @@ -87,7 +85,6 @@ describe('useLineChartData', () => { instanceId: 'instance-1', enableArea: false, theme: mockTheme, - formatOptions: mockFormatOptions, }), ); @@ -104,7 +101,6 @@ describe('useLineChartData', () => { instanceId: 'instance-1', enableArea: false, theme: mockTheme, - formatOptions: mockFormatOptions, }), ); @@ -130,7 +126,6 @@ describe('useLineChartData', () => { instanceId: 'instance-1', enableArea: true, theme: mockTheme, - formatOptions: mockFormatOptions, }), ); @@ -147,7 +142,6 @@ describe('useLineChartData', () => { instanceId: 'instance-1', enableArea: true, theme: mockTheme, - formatOptions: mockFormatOptions, }), ); @@ -164,7 +158,6 @@ describe('useLineChartData', () => { instanceId: 'instance-1', enableArea: false, theme: mockTheme, - formatOptions: mockFormatOptions, }), ); @@ -202,7 +195,6 @@ describe('useLineChartData', () => { instanceId: 'instance-1', enableArea: false, theme: mockTheme, - formatOptions: mockFormatOptions, }), ); @@ -225,7 +217,6 @@ describe('useLineChartData', () => { instanceId: 'instance-1', enableArea: false, theme: mockTheme, - formatOptions: mockFormatOptions, }), ); @@ -250,7 +241,6 @@ describe('useLineChartData', () => { instanceId: 'instance-1', enableArea: false, theme: darkTheme, - formatOptions: mockFormatOptions, }), ); @@ -274,7 +264,6 @@ describe('useLineChartData', () => { instanceId: 'instance-1', enableArea: false, theme: mockTheme, - formatOptions: mockFormatOptions, }), ); @@ -299,7 +288,6 @@ describe('useLineChartData', () => { instanceId: 'instance-1', enableArea: false, theme: mockTheme, - formatOptions: mockFormatOptions, }), ); @@ -307,13 +295,11 @@ describe('useLineChartData', () => { { id: 'series1', label: 'Sales', - formattedValue: '370', color: expect.any(String), }, { id: 'series2', label: 'Costs', - formattedValue: '270', color: expect.any(String), }, ]); @@ -338,7 +324,6 @@ describe('useLineChartData', () => { instanceId: 'instance-1', enableArea: false, theme: mockTheme, - formatOptions: mockFormatOptions, }), ); @@ -354,7 +339,6 @@ describe('useLineChartData', () => { instanceId: 'instance-1', enableArea: false, theme: mockTheme, - formatOptions: mockFormatOptions, }), ); @@ -384,7 +368,6 @@ describe('useLineChartData', () => { instanceId: 'instance-1', enableArea: false, theme: mockTheme, - formatOptions: mockFormatOptions, }), ); diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/hooks/useLineChartData.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/hooks/useLineChartData.ts index d11aff933e..ddab868733 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/hooks/useLineChartData.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/hooks/useLineChartData.ts @@ -3,10 +3,6 @@ import { type LineChartSeries } from '@/page-layout/widgets/graph/graphWidgetLin import { type GraphColorRegistry } from '@/page-layout/widgets/graph/types/GraphColorRegistry'; import { createGradientDef } from '@/page-layout/widgets/graph/utils/createGradientDef'; import { getColorScheme } from '@/page-layout/widgets/graph/utils/getColorScheme'; -import { - formatGraphValue, - type GraphValueFormatOptions, -} from '@/page-layout/widgets/graph/utils/graphFormatters'; import { type LineSeries } from '@nivo/line'; import { useMemo } from 'react'; import { isDefined } from 'twenty-shared/utils'; @@ -19,7 +15,6 @@ type UseLineChartDataProps = { instanceId: string; enableArea: boolean; theme: ThemeType; - formatOptions: GraphValueFormatOptions; }; export const useLineChartData = ({ @@ -29,7 +24,6 @@ export const useLineChartData = ({ instanceId, enableArea, theme, - formatOptions, }: UseLineChartDataProps) => { const dataMap = Object.fromEntries(data.map((series) => [series.id, series])); const enrichedSeries = useMemo((): LineChartEnrichedSeries[] => { @@ -83,11 +77,9 @@ export const useLineChartData = ({ const colors = enrichedSeries.map((series) => series.colorScheme.solid); const legendItems = enrichedSeries.map((series) => { - const total = series.data.reduce((sum, point) => sum + (point.y || 0), 0); return { id: series.id, label: series.label, - formattedValue: formatGraphValue(total, formatOptions), color: series.colorScheme.solid, }; }); diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/components/GraphWidgetPieChart.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/components/GraphWidgetPieChart.tsx index 257b52ef00..fe17ccafcd 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/components/GraphWidgetPieChart.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/components/GraphWidgetPieChart.tsx @@ -7,10 +7,7 @@ import { usePieChartHandlers } from '@/page-layout/widgets/graph/graphWidgetPieC import { usePieChartTooltip } from '@/page-layout/widgets/graph/graphWidgetPieChart/hooks/usePieChartTooltip'; import { type PieChartDataItem } from '@/page-layout/widgets/graph/graphWidgetPieChart/types/PieChartDataItem'; import { createGraphColorRegistry } from '@/page-layout/widgets/graph/utils/createGraphColorRegistry'; -import { - formatGraphValue, - type GraphValueFormatOptions, -} from '@/page-layout/widgets/graph/utils/graphFormatters'; +import { type GraphValueFormatOptions } from '@/page-layout/widgets/graph/utils/graphFormatters'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { @@ -129,10 +126,6 @@ export const GraphWidgetPieChart = ({ items={enrichedData.map((item) => ({ id: item.id, label: item.label || item.id, - formattedValue: formatGraphValue( - displayType === 'percentage' ? item.percentage / 100 : item.value, - formatOptions, - ), color: item.colorScheme.solid, }))} />