Update bar chart design (#15372)

- Implement new dynamic color palettes
- Create custom bar component with rounded edges



https://github.com/user-attachments/assets/8246f16d-0239-4807-bb4a-9647367575f2

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

@@ -11,7 +11,7 @@ export const createGraphColorRegistry = (
       normal: [theme.adaptiveColors.blue1, theme.adaptiveColors.blue2],
       hover: [theme.adaptiveColors.blue3, theme.adaptiveColors.blue4],
     },
-    solid: theme.color.blue,
+    solid: theme.adaptiveColors.blue4,
   },
   purple: {
     name: 'purple',
@@ -19,7 +19,7 @@ export const createGraphColorRegistry = (
       normal: [theme.adaptiveColors.purple1, theme.adaptiveColors.purple2],
       hover: [theme.adaptiveColors.purple3, theme.adaptiveColors.purple4],
     },
-    solid: theme.color.purple,
+    solid: theme.adaptiveColors.purple4,
   },
   turquoise: {
     name: 'turquoise',
@@ -30,7 +30,7 @@ export const createGraphColorRegistry = (
       ],
       hover: [theme.adaptiveColors.turquoise3, theme.adaptiveColors.turquoise4],
     },
-    solid: theme.color.turquoise,
+    solid: theme.adaptiveColors.turquoise4,
   },
   orange: {
     name: 'orange',
@@ -38,7 +38,7 @@ export const createGraphColorRegistry = (
       normal: [theme.adaptiveColors.orange1, theme.adaptiveColors.orange2],
       hover: [theme.adaptiveColors.orange3, theme.adaptiveColors.orange4],
     },
-    solid: theme.color.orange,
+    solid: theme.adaptiveColors.orange4,
   },
   pink: {
     name: 'pink',
@@ -46,7 +46,7 @@ export const createGraphColorRegistry = (
       normal: [theme.adaptiveColors.pink1, theme.adaptiveColors.pink2],
       hover: [theme.adaptiveColors.pink3, theme.adaptiveColors.pink4],
     },
-    solid: theme.color.pink,
+    solid: theme.adaptiveColors.pink4,
   },
   yellow: {
     name: 'yellow',
@@ -54,7 +54,7 @@ export const createGraphColorRegistry = (
       normal: [theme.adaptiveColors.yellow1, theme.adaptiveColors.yellow2],
       hover: [theme.adaptiveColors.yellow3, theme.adaptiveColors.yellow4],
     },
-    solid: theme.color.yellow,
+    solid: theme.adaptiveColors.yellow4,
   },
   red: {
     name: 'red',
@@ -62,7 +62,7 @@ export const createGraphColorRegistry = (
       normal: [theme.adaptiveColors.red1, theme.adaptiveColors.red2],
       hover: [theme.adaptiveColors.red3, theme.adaptiveColors.red4],
     },
-    solid: theme.color.red,
+    solid: theme.adaptiveColors.red4,
   },
   green: {
     name: 'green',
@@ -70,7 +70,7 @@ export const createGraphColorRegistry = (
       normal: [theme.adaptiveColors.green1, theme.adaptiveColors.green2],
       hover: [theme.adaptiveColors.green3, theme.adaptiveColors.green4],
     },
-    solid: theme.color.green,
+    solid: theme.adaptiveColors.green4,
   },
   sky: {
     name: 'sky',
@@ -78,7 +78,7 @@ export const createGraphColorRegistry = (
       normal: [theme.adaptiveColors.sky1, theme.adaptiveColors.sky2],
       hover: [theme.adaptiveColors.sky3, theme.adaptiveColors.sky4],
     },
-    solid: theme.color.sky,
+    solid: theme.adaptiveColors.sky4,
   },
   gray: {
     name: 'gray',
@@ -86,6 +86,6 @@ export const createGraphColorRegistry = (
       normal: [theme.adaptiveColors.gray1, theme.adaptiveColors.gray2],
       hover: [theme.adaptiveColors.gray3, theme.adaptiveColors.gray4],
     },
-    solid: theme.color.gray,
+    solid: theme.adaptiveColors.gray4,
   },
 });

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

@@ -0,0 +1,32 @@
+import { RGBA } from 'twenty-ui/theme';
+
+import { GRAPH_GROUP_COLOR_MINIMUM_ALPHA } from '@/page-layout/widgets/graph/constants/GraphGroupColorMinimumAlpha.constant';
+import { GRAPH_MAXIMUM_NUMBER_OF_GROUP_COLORS } from '@/page-layout/widgets/graph/constants/GraphMaximumNumberOfGroupColors';
+import { type GraphColorScheme } from '@/page-layout/widgets/graph/types/GraphColorScheme';
+
+export const generateGroupColor = ({
+  colorScheme,
+  groupIndex,
+  totalGroups,
+}: {
+  colorScheme: GraphColorScheme;
+  groupIndex: number;
+  totalGroups: number;
+}): string => {
+  if (totalGroups <= 1) {
+    return colorScheme.solid;
+  }
+
+  const effectiveGroupIndex = groupIndex % GRAPH_MAXIMUM_NUMBER_OF_GROUP_COLORS;
+  const effectiveTotalGroups = Math.min(
+    totalGroups,
+    GRAPH_MAXIMUM_NUMBER_OF_GROUP_COLORS,
+  );
+
+  const ratio = (effectiveGroupIndex + 1) / effectiveTotalGroups;
+  const alpha =
+    GRAPH_GROUP_COLOR_MINIMUM_ALPHA +
+    (1 - GRAPH_GROUP_COLOR_MINIMUM_ALPHA) * ratio;
+
+  return RGBA(colorScheme.solid, alpha);
+};

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

@@ -1,16 +1,35 @@
+import { generateGroupColor } from '@/page-layout/widgets/graph/utils/generateGroupColor';
+import { getColorSchemeByIndex } from '@/page-layout/widgets/graph/utils/getColorSchemeByIndex';
 import { isDefined } from 'twenty-shared/utils';
 import { type GraphColor } from '../types/GraphColor';
 import { type GraphColorRegistry } from '../types/GraphColorRegistry';
 import { type GraphColorScheme } from '../types/GraphColorScheme';
-import { getColorSchemeByIndex } from './getColorSchemeByIndex';
 
-export const getColorScheme = (
-  registry: GraphColorRegistry,
-  colorName?: GraphColor,
-  fallbackIndex?: number,
-): GraphColorScheme => {
-  if (isDefined(colorName) && isDefined(registry[colorName])) {
+export const getColorScheme = ({
+  registry,
+  colorName,
+  fallbackIndex,
+  totalGroups,
+}: {
+  registry: GraphColorRegistry;
+  colorName?: GraphColor;
+  fallbackIndex?: number;
+  totalGroups?: number;
+}): GraphColorScheme => {
+  if (!isDefined(colorName) || !isDefined(registry[colorName])) {
+    return getColorSchemeByIndex(registry, fallbackIndex ?? 0);
+  }
+
+  if (!isDefined(totalGroups)) {
     return registry[colorName];
   }
-  return getColorSchemeByIndex(registry, fallbackIndex || 0);
+
+  return {
+    ...registry[colorName],
+    solid: generateGroupColor({
+      colorScheme: registry[colorName],
+      groupIndex: fallbackIndex ?? 0,
+      totalGroups,
+    }),
+  };
 };

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

@@ -4,6 +4,7 @@ import { type ExtendedAggregateOperations } from '@/object-record/record-table/t
 import { GRAPH_MAXIMUM_NUMBER_OF_GROUPS } from '@/page-layout/widgets/graph/constants/GraphMaximumNumberOfGroups.constant';
 import { type BarChartDataItem } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartDataItem';
 import { type BarChartSeries } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartSeries';
+import { type GraphColor } from '@/page-layout/widgets/graph/types/GraphColor';
 import { type GroupByRawResult } from '@/page-layout/widgets/graph/types/GroupByRawResult';
 import { computeAggregateValueFromGroupByResult } from '@/page-layout/widgets/graph/utils/computeAggregateValueFromGroupByResult';
 import { formatDimensionValue } from '@/page-layout/widgets/graph/utils/formatDimensionValue';
@@ -115,6 +116,7 @@ export const transformTwoDimensionalGroupByToBarChartData = ({
   const series: BarChartSeries[] = keys.map((key) => ({
     key,
     label: key,
+    color: configuration.color as GraphColor,
   }));
 
   return {