vynte-infra/twenty
2
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Number chart editor (#15222)

Browse Source 
Closes https://github.com/twentyhq/core-team-issues/issues/1620

<img width="1002" height="682" alt="CleanShot 2025-10-21 at 11 49 48@2x"
src="https://github.com/user-attachments/assets/ff06ef0e-ccba-486d-b295-2e5f497f050c"
/>
This commit is contained in:
Raphaël Bosi
2025-10-21 10:17:12 +00:00
committed by GitHub
parent 0122f805a4
commit ea09987e80
7 changed files with 28 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectionDropdownContent.tsx
+2 -1
View File
@@ -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');
}
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartFieldSelectionForAggregateOperationDropdownContent.tsx
+2 -1
View File
@@ -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');
}
packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/NumberChartSettings.ts
+6 -6
View File
@@ -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,
],
},
];
packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/ChartConfigurationSettingLabels.ts
+1
View File
@@ -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`,
packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/DataDisplayAggregateSetting.ts
+14
View File
@@ -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,
};
packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useChartSettingsValues.ts
+2 -1
View File
@@ -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);
packages/twenty-front/src/modules/command-menu/pages/page-layout/types/ChartConfigurationSettingIds.ts
+1
View File
@@ -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',