Improvements on group by option in graph editor (#15014)

- Display sort by for the Y axis only if a group by is selected
- Add the possibility to remove a group by Y

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

@@ -66,6 +66,10 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
     COMMAND_MENU_LIST_SELECTABLE_LIST_ID,
   );
 
+  const isGroupByEnabled = getChartSettingsValues(
+    CHART_CONFIGURATION_SETTING_IDS.GROUP_BY,
+  );
+
   return (
     <CommandMenuList
       commandGroups={[]}
@@ -81,11 +85,15 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
         <CommandGroup key={group.heading} heading={group.heading}>
           {group.items.map((item) => {
             const isDisabled =
-              !isNonEmptyString(widget.objectMetadataId) &&
-              (item?.dependsOn?.includes(
-                CHART_CONFIGURATION_SETTING_IDS.SOURCE,
-              ) ??
-                false);
+              (!isNonEmptyString(widget.objectMetadataId) &&
+                (item?.dependsOn?.includes(
+                  CHART_CONFIGURATION_SETTING_IDS.SOURCE,
+                ) ??
+                  false)) ||
+              (!isGroupByEnabled &&
+                item?.dependsOn?.includes(
+                  CHART_CONFIGURATION_SETTING_IDS.GROUP_BY,
+                ));
 
             const handleToggleChange = () => {
               const configKey =

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

@@ -106,6 +106,16 @@ export const ChartGroupByFieldSelectionDropdownContentBase = <
     }
   };
 
+  const handleSelectNone = () => {
+    updateCurrentWidgetConfig({
+      configToUpdate: {
+        [fieldMetadataIdKey]: null,
+        [subFieldNameKey]: null,
+      },
+    });
+    closeDropdown();
+  };
+
   const handleBack = () => {
     setSelectedCompositeField(null);
   };
@@ -146,41 +156,47 @@ export const ChartGroupByFieldSelectionDropdownContentBase = <
       />
       <DropdownMenuSeparator />
       <DropdownMenuItemsContainer>
-        {availableFieldMetadataItems.length === 0 ? (
-          <MenuItemSelect text={t`No fields found`} selected={false} disabled />
-        ) : (
-          <SelectableList
-            selectableListInstanceId={dropdownId}
-            focusId={dropdownId}
-            selectableItemIdArray={availableFieldMetadataItems.map(
-              (item) => item.id,
-            )}
-          >
-            {availableFieldMetadataItems.map((fieldMetadataItem) => (
-              <SelectableListItem
-                key={fieldMetadataItem.id}
-                itemId={fieldMetadataItem.id}
-                onEnter={() => {
+        <SelectableList
+          selectableListInstanceId={dropdownId}
+          focusId={dropdownId}
+          selectableItemIdArray={[
+            'none',
+            ...availableFieldMetadataItems.map((item) => item.id),
+          ]}
+        >
+          <SelectableListItem itemId="none" onEnter={handleSelectNone}>
+            <MenuItemSelect
+              text={t`None`}
+              selected={!isDefined(currentGroupByFieldMetadataId)}
+              focused={selectedItemId === 'none'}
+              onClick={handleSelectNone}
+            />
+          </SelectableListItem>
+
+          {availableFieldMetadataItems.map((fieldMetadataItem) => (
+            <SelectableListItem
+              key={fieldMetadataItem.id}
+              itemId={fieldMetadataItem.id}
+              onEnter={() => {
+                handleSelectField(fieldMetadataItem);
+              }}
+            >
+              <MenuItemSelect
+                text={fieldMetadataItem.label}
+                selected={
+                  !isCompositeFieldType(fieldMetadataItem.type) &&
+                  currentGroupByFieldMetadataId === fieldMetadataItem.id
+                }
+                focused={selectedItemId === fieldMetadataItem.id}
+                LeftIcon={getIcon(fieldMetadataItem.icon)}
+                hasSubMenu={isCompositeFieldType(fieldMetadataItem.type)}
+                onClick={() => {
                   handleSelectField(fieldMetadataItem);
                 }}
-              >
-                <MenuItemSelect
-                  text={fieldMetadataItem.label}
-                  selected={
-                    !isCompositeFieldType(fieldMetadataItem.type) &&
-                    currentGroupByFieldMetadataId === fieldMetadataItem.id
-                  }
-                  focused={selectedItemId === fieldMetadataItem.id}
-                  LeftIcon={getIcon(fieldMetadataItem.icon)}
-                  hasSubMenu={isCompositeFieldType(fieldMetadataItem.type)}
-                  onClick={() => {
-                    handleSelectField(fieldMetadataItem);
-                  }}
-                />
-              </SelectableListItem>
-            ))}
-          </SelectableList>
-        )}
+              />
+            </SelectableListItem>
+          ))}
+        </SelectableList>
       </DropdownMenuItemsContainer>
     </>
   );

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

@@ -9,5 +9,6 @@ export const SORT_BY_GROUP_BY_FIELD_SETTING: ChartSettingsItem = {
   Icon: IconArrowsSort,
   label: CHART_CONFIGURATION_SETTING_LABELS.SORT_BY_GROUP_BY_FIELD,
   id: CHART_CONFIGURATION_SETTING_IDS.SORT_BY_GROUP_BY_FIELD,
+  dependsOn: [CHART_CONFIGURATION_SETTING_IDS.GROUP_BY],
   DropdownContent: ChartSortByGroupByFieldDropdownContent,
 };