[DASHBOARDS] Fix date order by (#16521)

## Bug description The date order by was always set to date ascending regardless of the setting. This PR fixes this and removes the possibility to sort by value for date fields as it doesn't really make sense. ## Video QA https://github.com/user-attachments/assets/cffc69e7-bee0-4944-88bb-bdf24fe0dd54
2025-12-12 14:55:44 +01:00
parent 6acdde72ef
commit d30453f38f
8 changed files with 243 additions and 38 deletions
@@ -3,6 +3,8 @@ import { useGraphXSortOptionLabels } from '@/command-menu/pages/page-layout/hook
 import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
 import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
 import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
+import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
+import { isRelationNestedFieldDateKind } from '@/page-layout/widgets/graph/utils/isRelationNestedFieldDateKind';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
@@ -12,11 +14,11 @@ import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { type CompositeFieldSubFieldName } from 'twenty-shared/types';
-import { isDefined } from 'twenty-shared/utils';
+import { isDefined, isFieldMetadataDateKind } from 'twenty-shared/utils';
 import { MenuItemSelect } from 'twenty-ui/navigation';
 import {
  type BarChartConfiguration,
-  type GraphOrderBy,
+  GraphOrderBy,
  type LineChartConfiguration,
 } from '~/generated/graphql';

@@ -54,8 +56,48 @@ export const ChartSortBySelectionDropdownContent = () => {
    objectMetadataId: widgetInEditMode.objectMetadataId,
  });

+  const { objectMetadataItems } = useObjectMetadataItems();
+
+  const objectMetadataItem = objectMetadataItems.find(
+    (item) => item.id === widgetInEditMode.objectMetadataId,
+  );
+
  const isPieChart = configuration.__typename === 'PieChartConfiguration';
  const isLineChart = configuration.__typename === 'LineChartConfiguration';
+  const isBarChart = configuration.__typename === 'BarChartConfiguration';
+
+  let currentOrderBy: GraphOrderBy | undefined;
+  let groupByFieldMetadataId: string | undefined;
+  let groupBySubFieldName: string | null | undefined;
+
+  if (isPieChart) {
+    currentOrderBy = configuration.orderBy ?? undefined;
+    groupByFieldMetadataId = configuration.groupByFieldMetadataId;
+    groupBySubFieldName = configuration.groupBySubFieldName;
+  } else {
+    const barOrLineChartConfiguration = configuration as
+      | BarChartConfiguration
+      | LineChartConfiguration;
+    currentOrderBy =
+      barOrLineChartConfiguration.primaryAxisOrderBy ?? undefined;
+    groupByFieldMetadataId =
+      barOrLineChartConfiguration.primaryAxisGroupByFieldMetadataId;
+    groupBySubFieldName =
+      barOrLineChartConfiguration.primaryAxisGroupBySubFieldName;
+  }
+
+  const primaryAxisField = objectMetadataItem?.fields.find(
+    (field) => field.id === groupByFieldMetadataId,
+  );
+
+  const isPrimaryAxisDateField =
+    isFieldMetadataDateKind(primaryAxisField?.type) ||
+    (isDefined(primaryAxisField) &&
+      isRelationNestedFieldDateKind({
+        relationField: primaryAxisField,
+        relationNestedFieldName: groupBySubFieldName ?? undefined,
+        objectMetadataItems,
+      }));

  const handleSelect = (orderBy: GraphOrderBy) => {
    if (isPieChart) {
@@ -71,32 +113,21 @@ export const ChartSortBySelectionDropdownContent = () => {
  };

  const availableOptions = X_SORT_BY_OPTIONS.filter((option) => {
+    const isValueSort =
+      option.value === GraphOrderBy.VALUE_ASC ||
+      option.value === GraphOrderBy.VALUE_DESC;
+
    if (isLineChart) {
-      return option.value !== 'VALUE_ASC' && option.value !== 'VALUE_DESC';
+      return !isValueSort;
    }
+
+    if ((isBarChart || isPieChart) && isPrimaryAxisDateField) {
+      return !isValueSort;
+    }
+
    return true;
  });

-  let currentOrderBy: GraphOrderBy | undefined;
-  let groupByFieldMetadataId: string | undefined;
-  let groupBySubFieldName: string | null | undefined;
-
-  if (configuration.__typename === 'PieChartConfiguration') {
-    currentOrderBy = configuration.orderBy ?? undefined;
-    groupByFieldMetadataId = configuration.groupByFieldMetadataId;
-    groupBySubFieldName = configuration.groupBySubFieldName;
-  } else {
-    const barOrLineChartConfiguration = configuration as
-      | BarChartConfiguration
-      | LineChartConfiguration;
-    currentOrderBy =
-      barOrLineChartConfiguration.primaryAxisOrderBy ?? undefined;
-    groupByFieldMetadataId =
-      barOrLineChartConfiguration.primaryAxisGroupByFieldMetadataId;
-    groupBySubFieldName =
-      barOrLineChartConfiguration.primaryAxisGroupBySubFieldName;
-  }
-
  return (
    <DropdownMenuItemsContainer>
      <SelectableList
@@ -63,11 +63,19 @@ export const buildChartGroupByFieldConfigUpdate = <
      !isNewFieldDateType &&
      (isBarChart || isLineChart);

+    const isCurrentOrderByValueBased =
+      existingOrderBy === GraphOrderBy.VALUE_ASC ||
+      existingOrderBy === GraphOrderBy.VALUE_DESC;
+
+    const shouldResetOrderBy = isNewFieldDateType && isCurrentOrderByValueBased;
+
+    const newOrderBy = shouldResetOrderBy
+      ? GraphOrderBy.FIELD_ASC
+      : (existingOrderBy ?? GraphOrderBy.FIELD_ASC);
+
    return {
      ...baseConfig,
-      primaryAxisOrderBy: isDefined(fieldId)
-        ? (existingOrderBy ?? GraphOrderBy.FIELD_ASC)
-        : null,
+      primaryAxisOrderBy: isDefined(fieldId) ? newOrderBy : null,
      primaryAxisDateGranularity: isDefined(fieldId)
        ? (existingDateGranularity ?? ObjectRecordGroupByDateGranularity.DAY)
        : null,
@@ -82,11 +90,26 @@ export const buildChartGroupByFieldConfigUpdate = <
      ? configuration.dateGranularity
      : null;

+    const isNewFieldDateType = isFieldOrRelationNestedFieldDateKind({
+      fieldId,
+      subFieldName,
+      objectMetadataItem,
+      objectMetadataItems,
+    });
+
+    const isCurrentOrderByValueBased =
+      existingOrderBy === GraphOrderBy.VALUE_ASC ||
+      existingOrderBy === GraphOrderBy.VALUE_DESC;
+
+    const shouldResetOrderBy = isNewFieldDateType && isCurrentOrderByValueBased;
+
+    const newOrderBy = shouldResetOrderBy
+      ? GraphOrderBy.FIELD_ASC
+      : (existingOrderBy ?? GraphOrderBy.FIELD_ASC);
+
    return {
      ...baseConfig,
-      orderBy: isDefined(fieldId)
-        ? (existingOrderBy ?? GraphOrderBy.FIELD_ASC)
-        : null,
+      orderBy: isDefined(fieldId) ? newOrderBy : null,
      dateGranularity: isDefined(fieldId)
        ? (existingDateGranularity ?? ObjectRecordGroupByDateGranularity.DAY)
        : null,