Augment chart limits and improve padding on bar chart (#16184)

- Maximum from 50 to 100
- Reduce padding
- Make inner padding dynamic

Author: bosiraphael

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)

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartDefaultInnerPadding.ts

@@ -0,0 +1 @@
+export const BAR_CHART_DEFAULT_INNER_PADDING = 4;

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;

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMinimumInnerPadding.ts

@@ -0,0 +1 @@
+export const BAR_CHART_OUTER_PADDING_RATIO = 0.05;

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartOuterPaddingRatio.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;
+};

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartInnerPadding.ts

@@ -1 +1 @@
-export const LINE_CHART_MAXIMUM_NUMBER_OF_DATA_POINTS = 50;
+export const LINE_CHART_MAXIMUM_NUMBER_OF_DATA_POINTS = 100;

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/constants/LineChartMaximumNumberOfDataPoints.constant.ts

@@ -1 +1 @@
-export const PIE_CHART_MAXIMUM_NUMBER_OF_SLICES = 50;
+export const PIE_CHART_MAXIMUM_NUMBER_OF_SLICES = 100;