From 4d7965c05837f573be09e054bc3bbe94e94bf1d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?= <71827178+bosiraphael@users.noreply.github.com> Date: Fri, 28 Nov 2025 17:40:44 +0100 Subject: [PATCH] Augment chart limits and improve padding on bar chart (#16184) - Maximum from 50 to 100 - Reduce padding - Make inner padding dynamic --- .../components/GraphWidgetBarChart.tsx | 17 ++++-- .../constants/BarChartDefaultInnerPadding.ts | 1 + .../BarChartMaximumNumberOfBars.constant.ts | 2 +- .../constants/BarChartMinimumInnerPadding.ts | 1 - .../constants/BarChartOuterPaddingRatio.ts | 1 + .../utils/getBarChartInnerPadding.ts | 56 +++++++++++++++++++ ...ChartMaximumNumberOfDataPoints.constant.ts | 2 +- .../PieChartMaximumNumberOfSlices.constant.ts | 2 +- 8 files changed, 73 insertions(+), 9 deletions(-) create mode 100644 packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartDefaultInnerPadding.ts delete mode 100644 packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMinimumInnerPadding.ts create mode 100644 packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartOuterPaddingRatio.ts create mode 100644 packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartInnerPadding.ts 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 df9b96c6a0..0e35526680 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 @@ -3,7 +3,7 @@ import { GraphWidgetLegend } from '@/page-layout/widgets/graph/components/GraphW import { CustomBarItem } from '@/page-layout/widgets/graph/graphWidgetBarChart/components/CustomBarItem'; import { CustomTotalsLayer } from '@/page-layout/widgets/graph/graphWidgetBarChart/components/CustomTotalsLayer'; import { GraphBarChartTooltip } from '@/page-layout/widgets/graph/graphWidgetBarChart/components/GraphBarChartTooltip'; -import { BAR_CHART_MINIMUM_INNER_PADDING } from '@/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMinimumInnerPadding'; +import { BAR_CHART_OUTER_PADDING_RATIO } from '@/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartOuterPaddingRatio'; import { useBarChartData } from '@/page-layout/widgets/graph/graphWidgetBarChart/hooks/useBarChartData'; import { useBarChartTheme } from '@/page-layout/widgets/graph/graphWidgetBarChart/hooks/useBarChartTheme'; import { BarChartLayout } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartLayout'; @@ -12,6 +12,7 @@ import { calculateStackedBarChartValueRange } from '@/page-layout/widgets/graph/ import { calculateValueRangeFromBarChartKeys } from '@/page-layout/widgets/graph/graphWidgetBarChart/utils/calculateValueRangeFromBarChartKeys'; import { getBarChartAxisConfigs } from '@/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartAxisConfigs'; import { getBarChartColor } from '@/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartColor'; +import { getBarChartInnerPadding } from '@/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartInnerPadding'; import { getBarChartMargins } from '@/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartMargins'; import { createGraphColorRegistry } from '@/page-layout/widgets/graph/utils/createGraphColorRegistry'; import { @@ -233,7 +234,7 @@ export const GraphWidgetBarChart = ({ keys={keys} indexBy={indexBy} margin={margins} - padding={0.3} + padding={BAR_CHART_OUTER_PADDING_RATIO} groupMode={groupMode} layout={layout} valueScale={{ @@ -256,9 +257,15 @@ export const GraphWidgetBarChart = ({ gridYValues={layout === BarChartLayout.VERTICAL ? 5 : undefined} enableLabel={false} labelSkipWidth={12} - innerPadding={ - groupMode === 'grouped' ? BAR_CHART_MINIMUM_INNER_PADDING : 0 - } + innerPadding={getBarChartInnerPadding({ + chartWidth, + chartHeight, + dataLength: data.length, + keysLength: keys.length, + layout, + margins, + groupMode, + })} labelSkipHeight={12} valueFormat={(value) => formatGraphValue(Number(value), formatOptions) diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartDefaultInnerPadding.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartDefaultInnerPadding.ts new file mode 100644 index 0000000000..622fa54560 --- /dev/null +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartDefaultInnerPadding.ts @@ -0,0 +1 @@ +export const BAR_CHART_DEFAULT_INNER_PADDING = 4; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMaximumNumberOfBars.constant.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMaximumNumberOfBars.constant.ts index 7cc20bf732..cf8de5b164 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMaximumNumberOfBars.constant.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMaximumNumberOfBars.constant.ts @@ -1 +1 @@ -export const BAR_CHART_MAXIMUM_NUMBER_OF_BARS = 50; +export const BAR_CHART_MAXIMUM_NUMBER_OF_BARS = 100; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMinimumInnerPadding.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMinimumInnerPadding.ts deleted file mode 100644 index e62f590b27..0000000000 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMinimumInnerPadding.ts +++ /dev/null @@ -1 +0,0 @@ -export const BAR_CHART_MINIMUM_INNER_PADDING = 4; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartOuterPaddingRatio.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartOuterPaddingRatio.ts new file mode 100644 index 0000000000..ab33148537 --- /dev/null +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartOuterPaddingRatio.ts @@ -0,0 +1 @@ +export const BAR_CHART_OUTER_PADDING_RATIO = 0.05; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartInnerPadding.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartInnerPadding.ts new file mode 100644 index 0000000000..ce40caeec2 --- /dev/null +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartInnerPadding.ts @@ -0,0 +1,56 @@ +import { BAR_CHART_DEFAULT_INNER_PADDING } from '@/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartDefaultInnerPadding'; +import { BAR_CHART_OUTER_PADDING_RATIO } from '@/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartOuterPaddingRatio'; +import { BarChartLayout } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartLayout'; + +type BarChartMargins = { + top: number; + right: number; + bottom: number; + left: number; +}; + +type GetBarChartInnerPaddingProps = { + chartWidth: number; + chartHeight: number; + dataLength: number; + keysLength: number; + layout: BarChartLayout; + margins: BarChartMargins; + groupMode?: 'grouped' | 'stacked'; +}; + +const MINIMUM_BAR_WIDTH = 2; + +export const getBarChartInnerPadding = ({ + chartWidth, + chartHeight, + dataLength, + keysLength, + layout, + margins, + groupMode, +}: GetBarChartInnerPaddingProps): number => { + if (groupMode !== 'grouped') { + return 0; + } + + if (dataLength === 0 || keysLength === 0) { + return BAR_CHART_DEFAULT_INNER_PADDING; + } + + const availableSpace = + layout === BarChartLayout.VERTICAL + ? chartWidth - margins.left - margins.right + : chartHeight - margins.top - margins.bottom; + + const spacePerGroup = + (availableSpace / dataLength) * (1 - BAR_CHART_OUTER_PADDING_RATIO); + + const spacePerBar = spacePerGroup / keysLength; + + if (spacePerBar < MINIMUM_BAR_WIDTH + BAR_CHART_DEFAULT_INNER_PADDING) { + return Math.max(0, (spacePerBar - MINIMUM_BAR_WIDTH) / 2); + } + + return BAR_CHART_DEFAULT_INNER_PADDING; +}; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/constants/LineChartMaximumNumberOfDataPoints.constant.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/constants/LineChartMaximumNumberOfDataPoints.constant.ts index 2a9ef4c600..06f1ef3166 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/constants/LineChartMaximumNumberOfDataPoints.constant.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/constants/LineChartMaximumNumberOfDataPoints.constant.ts @@ -1 +1 @@ -export const LINE_CHART_MAXIMUM_NUMBER_OF_DATA_POINTS = 50; +export const LINE_CHART_MAXIMUM_NUMBER_OF_DATA_POINTS = 100; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/constants/PieChartMaximumNumberOfSlices.constant.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/constants/PieChartMaximumNumberOfSlices.constant.ts index b2fbd1c9b2..521fcfccaf 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/constants/PieChartMaximumNumberOfSlices.constant.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/constants/PieChartMaximumNumberOfSlices.constant.ts @@ -1 +1 @@ -export const PIE_CHART_MAXIMUM_NUMBER_OF_SLICES = 50; +export const PIE_CHART_MAXIMUM_NUMBER_OF_SLICES = 100;