[Dashboards] Update default bar chart config (#17375)

https://github.com/user-attachments/assets/f7f11048-f27b-4c81-8626-71351a278f2b
2026-01-22 23:16:22 +05:30
parent 23798ddc6b
commit fd43eeda41
5 changed files with 75 additions and 86 deletions
@@ -6,7 +6,7 @@ import { useNavigatePageLayoutCommandMenu } from '@/command-menu/pages/page-layo
 import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { isExistingWidgetMissingOrDifferentType } from '@/command-menu/pages/page-layout/utils/isExistingWidgetMissingOrDifferentType';
-import { useCompanyDefaultChartConfig } from '@/page-layout/hooks/useCompanyDefaultChartConfig';
+import { useOpportunityDefaultChartConfig } from '@/page-layout/hooks/useOpportunityDefaultChartConfig';
 import { useCreatePageLayoutGraphWidget } from '@/page-layout/hooks/useCreatePageLayoutGraphWidget';
 import { useCreatePageLayoutIframeWidget } from '@/page-layout/hooks/useCreatePageLayoutIframeWidget';
 import { useCreatePageLayoutStandaloneRichTextWidget } from '@/page-layout/hooks/useCreatePageLayoutStandaloneRichTextWidget';
@@ -32,7 +32,7 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {

  const { navigatePageLayoutCommandMenu } = useNavigatePageLayoutCommandMenu();

-  const { buildBarChartFieldSelection } = useCompanyDefaultChartConfig();
+  const { buildBarChartFieldSelection } = useOpportunityDefaultChartConfig();

  const { createPageLayoutGraphWidget } =
    useCreatePageLayoutGraphWidget(pageLayoutId);
@@ -1,77 +0,0 @@
-import { objectMetadataItemFamilySelector } from '@/object-metadata/states/objectMetadataItemFamilySelector';
-import { useRecoilValue } from 'recoil';
-import { isDefined } from 'twenty-shared/utils';
-
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { type GraphWidgetFieldSelection } from '@/page-layout/types/GraphWidgetFieldSelection';
-
-export const useCompanyDefaultChartConfig = () => {
-  const companyObjectMetadata = useRecoilValue(
-    objectMetadataItemFamilySelector({
-      objectName: CoreObjectNameSingular.Company,
-      objectNameType: 'singular',
-    }),
-  );
-
-  const buildBarChartFieldSelection = ():
-    | GraphWidgetFieldSelection
-    | undefined => {
-    if (!isDefined(companyObjectMetadata)) {
-      return;
-    }
-
-    const labelIdentifierField = companyObjectMetadata.fields.find(
-      (field) =>
-        field.id === companyObjectMetadata.labelIdentifierFieldMetadataId,
-    );
-
-    const employeesField = companyObjectMetadata.fields.find(
-      (field) => field.name === 'employees',
-    );
-
-    const arrField = companyObjectMetadata.fields.find(
-      (field) => field.name === 'annualRecurringRevenue',
-    );
-
-    const aggregateField = employeesField ?? arrField;
-
-    if (!isDefined(labelIdentifierField) || !isDefined(aggregateField)) {
-      return;
-    }
-
-    return {
-      objectMetadataId: companyObjectMetadata.id,
-      groupByFieldMetadataIdX: labelIdentifierField.id,
-      aggregateFieldMetadataId: aggregateField.id,
-    };
-  };
-
-  const buildNumberChartFieldSelection = ():
-    | GraphWidgetFieldSelection
-    | undefined => {
-    if (!isDefined(companyObjectMetadata)) {
-      return;
-    }
-
-    const employeesField = companyObjectMetadata.fields.find(
-      (field) => field.name === 'employees',
-    );
-
-    const arrField = companyObjectMetadata.fields.find(
-      (field) => field.name === 'annualRecurringRevenue',
-    );
-
-    const aggregateField = employeesField ?? arrField;
-
-    if (!isDefined(aggregateField)) {
-      return;
-    }
-
-    return {
-      objectMetadataId: companyObjectMetadata.id,
-      aggregateFieldMetadataId: aggregateField.id,
-    };
-  };
-
-  return { buildBarChartFieldSelection, buildNumberChartFieldSelection };
-};
@@ -0,0 +1,64 @@
+import { objectMetadataItemFamilySelector } from '@/object-metadata/states/objectMetadataItemFamilySelector';
+import { useRecoilValue } from 'recoil';
+import { isDefined } from 'twenty-shared/utils';
+
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { type GraphWidgetFieldSelection } from '@/page-layout/types/GraphWidgetFieldSelection';
+
+export const useOpportunityDefaultChartConfig = () => {
+  const opportunityObjectMetadata = useRecoilValue(
+    objectMetadataItemFamilySelector({
+      objectName: CoreObjectNameSingular.Opportunity,
+      objectNameType: 'singular',
+    }),
+  );
+
+  const buildBarChartFieldSelection = ():
+    | GraphWidgetFieldSelection
+    | undefined => {
+    if (!isDefined(opportunityObjectMetadata)) {
+      return;
+    }
+
+    const stageField = opportunityObjectMetadata.fields.find(
+      (field) => field.name === 'stage',
+    );
+
+    const amountField = opportunityObjectMetadata.fields.find(
+      (field) => field.name === 'amount',
+    );
+
+    if (!isDefined(stageField) || !isDefined(amountField)) {
+      return;
+    }
+
+    return {
+      objectMetadataId: opportunityObjectMetadata.id,
+      groupByFieldMetadataIdX: stageField.id,
+      aggregateFieldMetadataId: amountField.id,
+    };
+  };
+
+  const buildNumberChartFieldSelection = ():
+    | GraphWidgetFieldSelection
+    | undefined => {
+    if (!isDefined(opportunityObjectMetadata)) {
+      return;
+    }
+
+    const amountField = opportunityObjectMetadata.fields.find(
+      (field) => field.name === 'amount',
+    );
+
+    if (!isDefined(amountField)) {
+      return;
+    }
+
+    return {
+      objectMetadataId: opportunityObjectMetadata.id,
+      aggregateFieldMetadataId: amountField.id,
+    };
+  };
+
+  return { buildBarChartFieldSelection, buildNumberChartFieldSelection };
+};
@@ -30,12 +30,13 @@ describe('createDefaultGraphWidget', () => {
        __typename: 'BarChartConfiguration',
        configurationType: WidgetConfigurationType.BAR_CHART,
        layout: BarChartLayout.VERTICAL,
-        displayDataLabel: false,
-        color: 'blue',
+        displayDataLabel: true,
+        displayLegend: true,
+        color: 'auto',
        primaryAxisGroupByFieldMetadataId: 'field-2',
        aggregateFieldMetadataId: 'field-1',
        aggregateOperation: AggregateOperations.SUM,
-        primaryAxisOrderBy: GraphOrderBy.FIELD_ASC,
+        primaryAxisOrderBy: GraphOrderBy.FIELD_POSITION_ASC,
        axisNameDisplay: AxisNameDisplay.NONE,
      });
    });
@@ -1,4 +1,3 @@
-import { type ThemeColor } from 'twenty-ui/theme';
 import {
  AggregateOperations,
  AxisNameDisplay,
@@ -12,6 +11,7 @@ import {
 } from '~/generated/graphql';

 import { type GraphWidgetFieldSelection } from '@/page-layout/types/GraphWidgetFieldSelection';
+import { type GraphColor } from '@/page-layout/widgets/graph/types/GraphColor';

 const createDefaultGraphConfiguration = (
  fieldSelection?: GraphWidgetFieldSelection,
@@ -22,12 +22,13 @@ const createDefaultGraphConfiguration = (
    __typename: 'BarChartConfiguration',
    configurationType: WidgetConfigurationType.BAR_CHART,
    layout: BarChartLayout.VERTICAL,
-    displayDataLabel: false,
-    color: 'blue' satisfies ThemeColor,
+    displayDataLabel: true,
+    displayLegend: true,
+    color: 'auto' satisfies GraphColor,
    primaryAxisGroupByFieldMetadataId: fieldSelection?.groupByFieldMetadataIdX,
    aggregateFieldMetadataId: fieldSelection?.aggregateFieldMetadataId,
    aggregateOperation: AggregateOperations.SUM,
-    primaryAxisOrderBy: GraphOrderBy.FIELD_ASC,
+    primaryAxisOrderBy: GraphOrderBy.FIELD_POSITION_ASC,
    axisNameDisplay: AxisNameDisplay.NONE,
    timezone,
    firstDayOfTheWeek,