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

## 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
2025-11-26 18:03:23 +01:00
parent 7f441d741b
commit fc4dbb80de
34 changed files with 343 additions and 57 deletions
@@ -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,
    ],
  },
 ];
@@ -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],
  },
 ];
@@ -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`,
 };
@@ -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],
+};
@@ -235,6 +235,8 @@ export const useChartSettingsValues = ({
        return isPieChart && isDefined(configuration.dateGranularity)
          ? getDateGranularityLabel(configuration.dateGranularity)
          : undefined;
+      case CHART_CONFIGURATION_SETTING_IDS.SHOW_LEGEND:
+        return isPieChart ? (configuration.displayLegend ?? true) : true;
      default:
        return '';
    }
@@ -21,6 +21,7 @@ export enum CHART_CONFIGURATION_SETTING_IDS {
  DATE_GRANULARITY_X = 'DATE_GRANULARITY_X',
  DATE_GRANULARITY_Y = 'DATE_GRANULARITY_Y',
  DATE_GRANULARITY = 'DATE_GRANULARITY',
+  SHOW_LEGEND = 'SHOW_LEGEND',
 }

 export const CHART_CONFIGURATION_SETTING_TO_CONFIG_KEY_MAP = {
@@ -35,4 +36,5 @@ export const CHART_CONFIGURATION_SETTING_TO_CONFIG_KEY_MAP = {
  [CHART_CONFIGURATION_SETTING_IDS.DATE_GRANULARITY_Y]:
    'secondaryAxisGroupByDateGranularity',
  [CHART_CONFIGURATION_SETTING_IDS.DATE_GRANULARITY]: 'dateGranularity',
+  [CHART_CONFIGURATION_SETTING_IDS.SHOW_LEGEND]: 'displayLegend',
 } as const;
@@ -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_BARS_SETTING } from '@/command-menu/pages/page-layout/constants/settings/StackedBarsSetting';
 import { IconAxisX, IconAxisY } from 'twenty-ui/display';
@@ -143,6 +144,7 @@ describe('getBarChartSettings', () => {
        AXIS_NAME_SETTING,
        STACKED_BARS_SETTING,
        DATA_LABELS_SETTING,
+        SHOW_LEGEND_SETTING,
      ]);
    });
  });
@@ -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_BARS_SETTING } from '@/command-menu/pages/page-layout/constants/settings/StackedBarsSetting';
 import { type ChartSettingsGroup } from '@/command-menu/pages/page-layout/types/ChartSettingsGroup';
@@ -65,6 +66,7 @@ export const getBarChartSettings = (
        AXIS_NAME_SETTING,
        STACKED_BARS_SETTING,
        DATA_LABELS_SETTING,
+        SHOW_LEGEND_SETTING,
      ],
    },
  ];
@@ -74,6 +74,12 @@ export const shouldHideChartSetting = (
        );
      }
    }
+
+    if (item.id === CHART_CONFIGURATION_SETTING_IDS.SHOW_LEGEND) {
+      if (configuration.__typename === 'PieChartConfiguration') {
+        return false;
+      }
+    }
  }

  return (