From ea09987e8029ae9b301521c6706820580bb37831 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?= <71827178+bosiraphael@users.noreply.github.com> Date: Tue, 21 Oct 2025 12:17:12 +0200 Subject: [PATCH] Number chart editor (#15222) Closes https://github.com/twentyhq/core-team-issues/issues/1620 CleanShot 2025-10-21 at 11 49 48@2x --- ...tAggregateOperationSelectionDropdownContent.tsx | 3 ++- ...lectionForAggregateOperationDropdownContent.tsx | 3 ++- .../page-layout/constants/NumberChartSettings.ts | 12 ++++++------ .../settings/ChartConfigurationSettingLabels.ts | 1 + .../settings/DataDisplayAggregateSetting.ts | 14 ++++++++++++++ .../page-layout/hooks/useChartSettingsValues.ts | 3 ++- .../types/ChartConfigurationSettingIds.ts | 1 + 7 files changed, 28 insertions(+), 9 deletions(-) create mode 100644 packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/DataDisplayAggregateSetting.ts diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectionDropdownContent.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectionDropdownContent.tsx index de41305641..2b6e4e3aa6 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectionDropdownContent.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectionDropdownContent.tsx @@ -39,7 +39,8 @@ export const ChartAggregateOperationSelectionDropdownContent = ({ if ( widgetInEditMode?.configuration?.__typename !== 'BarChartConfiguration' && - widgetInEditMode?.configuration?.__typename !== 'LineChartConfiguration' + widgetInEditMode?.configuration?.__typename !== 'LineChartConfiguration' && + widgetInEditMode?.configuration?.__typename !== 'NumberChartConfiguration' ) { throw new Error('Invalid configuration type'); } diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartFieldSelectionForAggregateOperationDropdownContent.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartFieldSelectionForAggregateOperationDropdownContent.tsx index ee158e0660..ce1d7a6e9f 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartFieldSelectionForAggregateOperationDropdownContent.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartFieldSelectionForAggregateOperationDropdownContent.tsx @@ -31,7 +31,8 @@ export const ChartFieldSelectionForAggregateOperationDropdownContent = () => { if ( configuration?.__typename !== 'BarChartConfiguration' && - configuration?.__typename !== 'LineChartConfiguration' + configuration?.__typename !== 'LineChartConfiguration' && + configuration?.__typename !== 'NumberChartConfiguration' ) { throw new Error('Invalid configuration type'); } diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/NumberChartSettings.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/NumberChartSettings.ts index 34a4601725..b849f2f3da 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/NumberChartSettings.ts +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/NumberChartSettings.ts @@ -1,15 +1,15 @@ import { CHART_DATA_SOURCE_SETTING } from '@/command-menu/pages/page-layout/constants/settings/ChartDataSourceSetting'; -import { DATA_LABELS_SETTING } from '@/command-menu/pages/page-layout/constants/settings/DataLabelsSetting'; +import { DATA_DISPLAY_AGGREGATE_SETTING } from '@/command-menu/pages/page-layout/constants/settings/DataDisplayAggregateSetting'; import { FILTER_SETTING } from '@/command-menu/pages/page-layout/constants/settings/FilterSetting'; import { type ChartSettingsGroup } from '@/command-menu/pages/page-layout/types/ChartSettingsGroup'; export const NUMBER_CHART_SETTINGS: ChartSettingsGroup[] = [ { heading: 'Data', - items: [CHART_DATA_SOURCE_SETTING, FILTER_SETTING], - }, - { - heading: 'Style', - items: [DATA_LABELS_SETTING], + items: [ + CHART_DATA_SOURCE_SETTING, + FILTER_SETTING, + DATA_DISPLAY_AGGREGATE_SETTING, + ], }, ]; diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/ChartConfigurationSettingLabels.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/ChartConfigurationSettingLabels.ts index 5961e603ca..f456c4d901 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/ChartConfigurationSettingLabels.ts +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/ChartConfigurationSettingLabels.ts @@ -11,6 +11,7 @@ export const CHART_CONFIGURATION_SETTING_LABELS = { DATA_ON_DISPLAY_X: msg`Data on display`, DATA_ON_DISPLAY_Y: msg`Data on display`, DATA_ON_DISPLAY_PIE_CHART: msg`Data on display`, + DATA_ON_DISPLAY_AGGREGATE: msg`Data on display`, EACH_SLICE_REPRESENTS: msg`Each slice represents`, AXIS_NAME: msg`Axis name`, STACKED_BARS: msg`Stacked bars`, diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/DataDisplayAggregateSetting.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/DataDisplayAggregateSetting.ts new file mode 100644 index 0000000000..df2bb24996 --- /dev/null +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/DataDisplayAggregateSetting.ts @@ -0,0 +1,14 @@ +import { ChartFieldSelectionForAggregateOperationDropdownContent } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartFieldSelectionForAggregateOperationDropdownContent'; +import { CHART_CONFIGURATION_SETTING_LABELS } from '@/command-menu/pages/page-layout/constants/settings/ChartConfigurationSettingLabels'; +import { CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds'; +import { type ChartSettingsItem } from '@/command-menu/pages/page-layout/types/ChartSettingsGroup'; +import { Icon123 } from 'twenty-ui/display'; + +export const DATA_DISPLAY_AGGREGATE_SETTING: ChartSettingsItem = { + isBoolean: false, + Icon: Icon123, + label: CHART_CONFIGURATION_SETTING_LABELS.DATA_ON_DISPLAY_AGGREGATE, + id: CHART_CONFIGURATION_SETTING_IDS.DATA_ON_DISPLAY_AGGREGATE, + dependsOn: [CHART_CONFIGURATION_SETTING_IDS.SOURCE], + DropdownContent: ChartFieldSelectionForAggregateOperationDropdownContent, +}; diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useChartSettingsValues.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useChartSettingsValues.ts index 401a0425ab..26ec334513 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useChartSettingsValues.ts +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useChartSettingsValues.ts @@ -128,7 +128,8 @@ export const useChartSettingsValues = ({ return 'color' in configuration && isDefined(configuration.color) ? capitalize(configuration.color) : undefined; - case CHART_CONFIGURATION_SETTING_IDS.DATA_ON_DISPLAY_Y: { + case CHART_CONFIGURATION_SETTING_IDS.DATA_ON_DISPLAY_Y: + case CHART_CONFIGURATION_SETTING_IDS.DATA_ON_DISPLAY_AGGREGATE: { const hasAggregateLabel = isDefined(aggregateField?.label); const hasAggregateOperation = isDefined(yAxisAggregateOperation); diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/types/ChartConfigurationSettingIds.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/types/ChartConfigurationSettingIds.ts index 53aba1dfba..08b715f821 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/types/ChartConfigurationSettingIds.ts +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/types/ChartConfigurationSettingIds.ts @@ -10,6 +10,7 @@ export enum CHART_CONFIGURATION_SETTING_IDS { DATA_ON_DISPLAY_X = 'DATA_ON_DISPLAY_X', DATA_ON_DISPLAY_Y = 'DATA_ON_DISPLAY_Y', DATA_ON_DISPLAY_PIE_CHART = 'DATA_ON_DISPLAY_PIE_CHART', + DATA_ON_DISPLAY_AGGREGATE = 'DATA_ON_DISPLAY_AGGREGATE', EACH_SLICE_REPRESENTS = 'EACH_SLICE_REPRESENTS', AXIS_NAME = 'AXIS_NAME', STACKED_BARS = 'STACKED_BARS',