houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[DASHBOARDS] Create display legend setting + animations (#16089)

Browse Source 
## PR Description
- Create display legend setting
- Create pagination inside the legend
- Animate the legend on enter/exit
- Animate the transition between pages

## Video QA


https://github.com/user-attachments/assets/a68a4ea3-195f-4399-88f7-f83bc1a39cc4
This commit is contained in:
Raphaël Bosi
2025-11-26 18:03:23 +01:00
committed by GitHub
parent 7f441d741b
commit fc4dbb80de
34 changed files with 343 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/LineChartSettings.ts
+2
View File
@@ -12,6 +12,7 @@ import { OMIT_NULL_VALUES_SETTING } from '@/command-menu/pages/page-layout/const
import { PRIMARY_SORT_BY_SETTING } from '@/command-menu/pages/page-layout/constants/settings/PrimarySortBySetting';
import { RANGE_MAX_SETTING } from '@/command-menu/pages/page-layout/constants/settings/RangeMaxSetting';
import { RANGE_MIN_SETTING } from '@/command-menu/pages/page-layout/constants/settings/RangeMinSetting';
import { SHOW_LEGEND_SETTING } from '@/command-menu/pages/page-layout/constants/settings/ShowLegendSetting';
import { SORT_BY_GROUP_BY_FIELD_SETTING } from '@/command-menu/pages/page-layout/constants/settings/SortByGroupByFieldSetting';
import { STACKED_LINES_SETTING } from '@/command-menu/pages/page-layout/constants/settings/StackedLineSettings';
import { type ChartSettingsGroup } from '@/command-menu/pages/page-layout/types/ChartSettingsGroup';
@@ -48,6 +49,7 @@ export const LINE_CHART_SETTINGS: ChartSettingsGroup[] = [
AXIS_NAME_SETTING,
STACKED_LINES_SETTING,
DATA_LABELS_SETTING,
SHOW_LEGEND_SETTING,
],
},
];
packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/PieChartSettings.ts
+2 -1
View File
@@ -6,6 +6,7 @@ import { DATE_GRANULARITY_SETTING } from '@/command-menu/pages/page-layout/const
import { EACH_SLICE_REPRESENTS_SETTING } from '@/command-menu/pages/page-layout/constants/settings/EachSliceRepresentsSetting';
import { FILTER_SETTING } from '@/command-menu/pages/page-layout/constants/settings/FilterSetting';
import { PRIMARY_SORT_BY_SETTING } from '@/command-menu/pages/page-layout/constants/settings/PrimarySortBySetting';
import { SHOW_LEGEND_SETTING } from '@/command-menu/pages/page-layout/constants/settings/ShowLegendSetting';
import { type ChartSettingsGroup } from '@/command-menu/pages/page-layout/types/ChartSettingsGroup';
export const PIE_CHART_SETTINGS: ChartSettingsGroup[] = [
@@ -22,6 +23,6 @@ export const PIE_CHART_SETTINGS: ChartSettingsGroup[] = [
},
{
heading: 'Style',
items: [COLORS_SETTING, DATA_LABELS_SETTING],
items: [COLORS_SETTING, DATA_LABELS_SETTING, SHOW_LEGEND_SETTING],
},
];
packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/ChartConfigurationSettingLabels.ts
+1
View File
@@ -22,4 +22,5 @@ export const CHART_CONFIGURATION_SETTING_LABELS = {
DATE_GRANULARITY_X: msg`Date granularity`,
DATE_GRANULARITY_Y: msg`Date granularity`,
DATE_GRANULARITY: msg`Date granularity`,
SHOW_LEGEND: msg`Legend`,
};
packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/ShowLegendSetting.ts
+12
View File
@@ -0,0 +1,12 @@
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 { IconList } from 'twenty-ui/display';
export const SHOW_LEGEND_SETTING: ChartSettingsItem = {
isBoolean: true,
Icon: IconList,
label: CHART_CONFIGURATION_SETTING_LABELS.SHOW_LEGEND,
id: CHART_CONFIGURATION_SETTING_IDS.SHOW_LEGEND,
dependsOn: [CHART_CONFIGURATION_SETTING_IDS.GROUP_BY],
};