Tidy up validation for configuration (#14939)

closes https://github.com/twentyhq/core-team-issues/issues/1605

TODO:  
~~- add stories~~
~~- add base graph on companies when creating a new graph widget~~

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

@@ -4,6 +4,7 @@ import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
 import { useNavigatePageLayoutCommandMenu } from '@/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu';
 import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
+import { useCompanyDefaultChartConfig } from '@/page-layout/hooks/useCompanyDefaultChartConfig';
 import { useCreatePageLayoutGraphWidget } from '@/page-layout/hooks/useCreatePageLayoutGraphWidget';
 import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
@@ -18,6 +19,8 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {
 
   const { navigatePageLayoutCommandMenu } = useNavigatePageLayoutCommandMenu();
 
+  const { buildBarChartFieldSelection } = useCompanyDefaultChartConfig();
+
   const { createPageLayoutGraphWidget } =
     useCreatePageLayoutGraphWidget(pageLayoutId);
 
@@ -29,7 +32,11 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {
 
   const handleNavigateToGraphTypeSelect = () => {
     if (!isDefined(pageLayoutEditingWidgetId)) {
-      const newWidget = createPageLayoutGraphWidget(GraphType.BAR);
+      const fieldSelection = buildBarChartFieldSelection();
+      const newWidget = createPageLayoutGraphWidget({
+        graphType: GraphType.BAR,
+        fieldSelection,
+      });
 
       setPageLayoutEditingWidgetId(newWidget.id);
     }

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx

@@ -48,6 +48,10 @@ export const ChartColorSelectionDropdownContent = () => {
 
   const configuration = widgetInEditMode.configuration as ChartConfiguration;
 
+  if (!('color' in configuration)) {
+    return null;
+  }
+
   const currentColor = configuration.color;
 
   const colorOptions = MAIN_COLOR_NAMES.map((colorName) => ({

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartSortByGroupByFieldDropdownContent.tsx

@@ -17,7 +17,6 @@ import {
   type BarChartConfiguration,
   type GraphOrderBy,
   type LineChartConfiguration,
-  type NumberChartConfiguration,
 } from '~/generated/graphql';
 
 export const ChartSortByGroupByFieldDropdownContent = () => {
@@ -26,15 +25,9 @@ export const ChartSortByGroupByFieldDropdownContent = () => {
 
   const configuration = widgetInEditMode?.configuration as
     | BarChartConfiguration
-    | LineChartConfiguration
-    | NumberChartConfiguration;
+    | LineChartConfiguration;
 
-  const currentOrderBy =
-    'orderByY' in configuration
-      ? configuration.orderByY
-      : 'orderBy' in configuration
-        ? configuration.orderBy
-        : undefined;
+  const currentOrderBy = configuration.orderByY;
 
   const dropdownId = useAvailableComponentInstanceIdOrThrow(
     DropdownComponentInstanceContext,
@@ -50,12 +43,10 @@ export const ChartSortByGroupByFieldDropdownContent = () => {
 
   const { closeDropdown } = useCloseDropdown();
 
-  const orderByKey = 'orderByY' in configuration ? 'orderByY' : 'orderBy';
-
   const handleSelectSortOption = (orderBy: GraphOrderBy) => {
     updateCurrentWidgetConfig({
       configToUpdate: {
-        [orderByKey]: orderBy,
+        orderByY: orderBy,
       },
     });
     closeDropdown();

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartXAxisSortBySelectionDropdownContent.tsx

@@ -76,8 +76,9 @@ export const ChartXAxisSortBySelectionDropdownContent = () => {
                 graphOrderBy: sortOption.value,
                 groupByFieldMetadataIdX: configuration.groupByFieldMetadataIdX,
                 aggregateFieldMetadataId:
-                  configuration.aggregateFieldMetadataId,
-                aggregateOperation: configuration.aggregateOperation,
+                  configuration.aggregateFieldMetadataId ?? undefined,
+                aggregateOperation:
+                  configuration.aggregateOperation ?? undefined,
               })}
               selected={currentOrderByX === sortOption.value}
               focused={selectedItemId === sortOption.value}

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

@@ -80,7 +80,7 @@ export const useChartSettingsValues = ({
           groupBySubFieldNameX:
             configuration.groupBySubFieldNameX as CompositeFieldSubFieldName,
           aggregateFieldMetadataId: configuration.aggregateFieldMetadataId,
-          aggregateOperation: configuration.aggregateOperation,
+          aggregateOperation: configuration.aggregateOperation ?? undefined,
         })
       : undefined;
 
@@ -116,17 +116,26 @@ export const useChartSettingsValues = ({
       case CHART_CONFIGURATION_SETTING_IDS.SOURCE:
         return objectMetadataItem?.labelPlural;
       case CHART_CONFIGURATION_SETTING_IDS.DATA_ON_DISPLAY_X:
-        return groupBySubFieldNameXLabel;
+        return groupBySubFieldNameXLabel ?? groupByFieldX?.label;
       case CHART_CONFIGURATION_SETTING_IDS.COLORS:
-        return isDefined(configuration.color) && 'color' in configuration
-          ? capitalize(configuration.color)
+        return 'color' in configuration && isDefined(configuration.color)
+          ? capitalize(configuration.color as string)
           : undefined;
-      case CHART_CONFIGURATION_SETTING_IDS.DATA_ON_DISPLAY_Y:
-        return `${aggregateField?.label ?? ''}${aggregateField?.label ? ` (${getAggregateOperationLabel(yAxisAggregateOperation)})` : ''}`;
+      case CHART_CONFIGURATION_SETTING_IDS.DATA_ON_DISPLAY_Y: {
+        const hasAggregateLabel = isDefined(aggregateField?.label);
+        const hasAggregateOperation = isDefined(yAxisAggregateOperation);
+
+        return `${aggregateField?.label ?? ''}${
+          hasAggregateLabel && hasAggregateOperation
+            ? ` (${getAggregateOperationLabel(yAxisAggregateOperation)})`
+            : ''
+        }`;
+      }
       case CHART_CONFIGURATION_SETTING_IDS.GROUP_BY:
         return groupByFieldY?.label;
       case CHART_CONFIGURATION_SETTING_IDS.AXIS_NAME:
-        return 'axisNameDisplay' in configuration
+        return 'axisNameDisplay' in configuration &&
+          isDefined(configuration.axisNameDisplay)
           ? getChartAxisNameDisplayOptions(configuration.axisNameDisplay)
           : undefined;
       case CHART_CONFIGURATION_SETTING_IDS.SORT_BY_X:
@@ -134,7 +143,7 @@ export const useChartSettingsValues = ({
       case CHART_CONFIGURATION_SETTING_IDS.SORT_BY_GROUP_BY_FIELD:
         return groupByOrderByLabel;
       case CHART_CONFIGURATION_SETTING_IDS.DATA_LABELS:
-        return configuration.displayDataLabel;
+        return configuration.displayDataLabel ?? undefined;
       default:
         return '';
     }