Split bar graph into two distinct horizontal and vertical bars (#15061)

### Summary

Split BAR into VERTICAL_BAR and HORIZONTAL_BAR as separate chart types.

### The Problem

Initially wanted a simple vertical/horizontal toggle for bar charts, but
ran into a GraphQL union type
constraint: union types can't have the same field name with different
nullability.

- Vertical bars need groupByFieldMetadataIdX as required (categories on
X)
- Horizontal bars need groupByFieldMetadataIdY as required (categories
on Y)
  - GraphQL schema generation fails with this setup

### The Solution

Use semantic primaryAxis and secondaryAxis naming that's
orientation-agnostic:

- primaryAxisGroupByFieldMetadataId = main grouping field (e.g.,
"Company Name")
- secondaryAxisGroupByFieldMetadataId = optional secondary grouping
(e.g., "Stage")

These fields have consistent meaning regardless of orientation. The
visual mapping happens at the UI layer:
  - Vertical bars: primary data renders on X-axis, secondary on Y-axis
  - Horizontal bars: primary data renders on Y-axis, secondary on X-axis

Both chart types share the same DTO structure with consistent
nullability.

### What Changed

  - Split GraphType.BAR → VERTICAL_BAR | HORIZONTAL_BAR
- Renamed fields: primaryAxisGroupByFieldMetadataId,
secondaryAxisGroupByFieldMetadataId (+ subfield
  variants)
- useChartSettingsValues(): Maps semantic fields to setting values (no
swapping)
- getBarChartSettings(): Dynamically arranges settings panel based on
orientation
- transformGroupByDataToBarChartData(): Maps semantic fields to Nivo's
layout prop
  
  video QA
  

https://github.com/user-attachments/assets/479061b5-712e-4ca6-9858-95273d1f16c1

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

@@ -1,40 +0,0 @@
-import { AXIS_NAME_SETTING } from '@/command-menu/pages/page-layout/constants/settings/AxisNameSetting';
-import { CHART_DATA_SOURCE_SETTING } from '@/command-menu/pages/page-layout/constants/settings/ChartDataSourceSetting';
-import { COLORS_SETTING } from '@/command-menu/pages/page-layout/constants/settings/ColorsSetting';
-import { DATA_DISPLAY_X_SETTING } from '@/command-menu/pages/page-layout/constants/settings/DataDisplayXSetting';
-import { DATA_DISPLAY_Y_SETTING } from '@/command-menu/pages/page-layout/constants/settings/DataDisplayYSetting';
-import { DATA_LABELS_SETTING } from '@/command-menu/pages/page-layout/constants/settings/DataLabelsSetting';
-import { FILTER_SETTING } from '@/command-menu/pages/page-layout/constants/settings/FilterSetting';
-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[] = [
-  {
-    heading: 'Data',
-    items: [CHART_DATA_SOURCE_SETTING, FILTER_SETTING],
-  },
-  {
-    heading: 'X axis',
-    items: [DATA_DISPLAY_X_SETTING, SORT_BY_X_SETTING],
-  },
-  {
-    heading: 'Y axis',
-    items: [
-      DATA_DISPLAY_Y_SETTING,
-      GROUP_BY_SETTING,
-      SORT_BY_GROUP_BY_FIELD_SETTING,
-    ],
-  },
-  {
-    heading: 'Style',
-    items: [
-      COLORS_SETTING,
-      AXIS_NAME_SETTING,
-      STACKED_BARS_SETTING,
-      DATA_LABELS_SETTING,
-    ],
-  },
-];

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

@@ -1,14 +1,15 @@
-import { BAR_CHART_SETTINGS } from '@/command-menu/pages/page-layout/constants/BarChartSettings';
 import { GAUGE_CHART_SETTINGS } from '@/command-menu/pages/page-layout/constants/GaugeChartSettings';
 import { LINE_CHART_SETTINGS } from '@/command-menu/pages/page-layout/constants/LineChartSettings';
 import { NUMBER_CHART_SETTINGS } from '@/command-menu/pages/page-layout/constants/NumberChartSettings';
 import { PIE_CHART_SETTINGS } from '@/command-menu/pages/page-layout/constants/PieChartSettings';
 import { type ChartSettingsGroup } from '@/command-menu/pages/page-layout/types/ChartSettingsGroup';
+import { getBarChartSettings } from '@/command-menu/pages/page-layout/utils/getBarChartSettings';
 import { type MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import {
   Icon123,
   IconChartBar,
+  IconChartBarHorizontal,
   IconChartLine,
   IconChartPie,
   type IconComponent,
@@ -24,10 +25,15 @@ export const GRAPH_TYPE_INFORMATION: Record<
     settings: ChartSettingsGroup[];
   }
 > = {
-  [GraphType.BAR]: {
-    label: msg`Bar`,
+  [GraphType.VERTICAL_BAR]: {
+    label: msg`Vertical Bar`,
     icon: IconChartBar,
-    settings: BAR_CHART_SETTINGS,
+    settings: getBarChartSettings(GraphType.VERTICAL_BAR),
+  },
+  [GraphType.HORIZONTAL_BAR]: {
+    label: msg`Horizontal Bar`,
+    icon: IconChartBarHorizontal,
+    settings: getBarChartSettings(GraphType.HORIZONTAL_BAR),
   },
   [GraphType.PIE]: {
     label: msg`Pie`,

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

@@ -1,7 +1,8 @@
 import { GraphType } from '~/generated-metadata/graphql';
 
 export const GRAPH_TYPE_TO_CONFIG_TYPENAME = {
-  [GraphType.BAR]: 'BarChartConfiguration',
+  [GraphType.VERTICAL_BAR]: 'BarChartConfiguration',
+  [GraphType.HORIZONTAL_BAR]: 'BarChartConfiguration',
   [GraphType.LINE]: 'LineChartConfiguration',
   [GraphType.PIE]: 'PieChartConfiguration',
   [GraphType.NUMBER]: 'NumberChartConfiguration',