Fix group by y axis "stacked" behaviour (#15081)

also improved seeds

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartSettings.tsx

@@ -22,7 +22,11 @@ import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectab
 import { t } from '@lingui/core/macro';
 import { isNonEmptyString } from '@sniptt/guards';
 
-import { type GraphType, type PageLayoutWidget } from '~/generated/graphql';
+import {
+  BarChartGroupMode,
+  type GraphType,
+  type PageLayoutWidget,
+} from '~/generated/graphql';
 
 export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
   const { updateCommandMenuPageInfo } = useUpdateCommandMenuPageInfo();
@@ -101,15 +105,34 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
                   ? CHART_CONFIGURATION_SETTING_TO_CONFIG_KEY_MAP[
                       CHART_CONFIGURATION_SETTING_IDS.DATA_LABELS
                     ]
-                  : item.id;
+                  : item.id === CHART_CONFIGURATION_SETTING_IDS.STACKED_BARS
+                    ? CHART_CONFIGURATION_SETTING_TO_CONFIG_KEY_MAP[
+                        CHART_CONFIGURATION_SETTING_IDS.STACKED_BARS
+                      ]
+                    : item.id;
 
               setSelectedItemId(item.id);
 
-              updateCurrentWidgetConfig({
-                configToUpdate: {
-                  [configKey]: !getChartSettingsValues(item.id),
-                },
-              });
+              if (item.id === CHART_CONFIGURATION_SETTING_IDS.STACKED_BARS) {
+                const isCurrentlyStacked = getChartSettingsValues(item.id);
+                const newGroupMode = isCurrentlyStacked
+                  ? BarChartGroupMode.GROUPED
+                  : BarChartGroupMode.STACKED;
+
+                updateCurrentWidgetConfig({
+                  configToUpdate: {
+                    groupMode: newGroupMode,
+                  },
+                });
+              } else {
+                const newValue = !getChartSettingsValues(item.id);
+
+                updateCurrentWidgetConfig({
+                  configToUpdate: {
+                    [configKey]: newValue,
+                  },
+                });
+              }
             };
 
             const handleDropdownOpen = () => {

packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/BarChartSettings.ts

@@ -8,6 +8,7 @@ import { FILTER_SETTING } from '@/command-menu/pages/page-layout/constants/setti
 import { GROUP_BY_SETTING } from '@/command-menu/pages/page-layout/constants/settings/GroupBySetting';
 import { SORT_BY_GROUP_BY_FIELD_SETTING } from '@/command-menu/pages/page-layout/constants/settings/SortByGroupByFieldSetting';
 import { SORT_BY_X_SETTING } from '@/command-menu/pages/page-layout/constants/settings/SortByXSetting';
+import { STACKED_BARS_SETTING } from '@/command-menu/pages/page-layout/constants/settings/StackedBarsSetting';
 import { type ChartSettingsGroup } from '@/command-menu/pages/page-layout/types/ChartSettingsGroup';
 
 export const BAR_CHART_SETTINGS: ChartSettingsGroup[] = [
@@ -29,6 +30,11 @@ export const BAR_CHART_SETTINGS: ChartSettingsGroup[] = [
   },
   {
     heading: 'Style',
-    items: [COLORS_SETTING, AXIS_NAME_SETTING, DATA_LABELS_SETTING],
+    items: [
+      COLORS_SETTING,
+      AXIS_NAME_SETTING,
+      STACKED_BARS_SETTING,
+      DATA_LABELS_SETTING,
+    ],
   },
 ];

packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/ChartConfigurationSettingLabels.ts

@@ -13,4 +13,5 @@ export const CHART_CONFIGURATION_SETTING_LABELS = {
   DATA_ON_DISPLAY_PIE_CHART: msg`Data on display`,
   EACH_SLICE_REPRESENTS: msg`Each slice represents`,
   AXIS_NAME: msg`Axis name`,
+  STACKED_BARS: msg`Stacked bars`,
 };

packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/StackedBarsSetting.ts

@@ -0,0 +1,12 @@
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/command-menu/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/command-menu/pages/page-layout/types/ChartSettingsGroup';
+import { IconStack2 } from 'twenty-ui/display';
+
+export const STACKED_BARS_SETTING: ChartSettingsItem = {
+  isBoolean: true,
+  Icon: IconStack2,
+  label: CHART_CONFIGURATION_SETTING_LABELS.STACKED_BARS,
+  id: CHART_CONFIGURATION_SETTING_IDS.STACKED_BARS,
+  dependsOn: [CHART_CONFIGURATION_SETTING_IDS.GROUP_BY],
+};

packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useChartSettingsValues.ts

@@ -144,6 +144,10 @@ export const useChartSettingsValues = ({
         return groupByOrderByLabel;
       case CHART_CONFIGURATION_SETTING_IDS.DATA_LABELS:
         return configuration.displayDataLabel ?? undefined;
+      case CHART_CONFIGURATION_SETTING_IDS.STACKED_BARS:
+        return 'groupMode' in configuration
+          ? configuration.groupMode !== 'GROUPED'
+          : true;
       default:
         return '';
     }

packages/twenty-front/src/modules/command-menu/pages/page-layout/types/ChartConfigurationSettingIds.ts

@@ -12,8 +12,10 @@ export enum CHART_CONFIGURATION_SETTING_IDS {
   DATA_ON_DISPLAY_PIE_CHART = 'DATA_ON_DISPLAY_PIE_CHART',
   EACH_SLICE_REPRESENTS = 'EACH_SLICE_REPRESENTS',
   AXIS_NAME = 'AXIS_NAME',
+  STACKED_BARS = 'STACKED_BARS',
 }
 
 export const CHART_CONFIGURATION_SETTING_TO_CONFIG_KEY_MAP = {
   [CHART_CONFIGURATION_SETTING_IDS.DATA_LABELS]: 'displayDataLabel',
+  [CHART_CONFIGURATION_SETTING_IDS.STACKED_BARS]: 'groupMode',
 } as const;