Center metric layer on pie chart + cleanup (#16105)

https://github.com/user-attachments/assets/bb48bebe-d0be-4006-8f63-e686c70c0011

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>
This commit is contained in:
nitin
2025-11-27 16:45:48 +05:30
committed by GitHub
parent 1a45576990
commit d7f8c2d338
64 changed files with 343 additions and 826 deletions
@@ -1,3 +1,4 @@
import { CENTER_METRIC_SETTING } from '@/command-menu/pages/page-layout/constants/settings/CenterMetricSetting';
import { CHART_DATA_SOURCE_SETTING } from '@/command-menu/pages/page-layout/constants/settings/ChartDataSourceSetting';
import { COLORS_SETTING } from '@/command-menu/pages/page-layout/constants/settings/ColorsSetting';
import { DATA_DISPLAY_PIE_CHART_SETTING } from '@/command-menu/pages/page-layout/constants/settings/DataDisplayPieChartSetting';
@@ -23,6 +24,11 @@ export const PIE_CHART_SETTINGS: ChartSettingsGroup[] = [
},
{
heading: 'Style',
items: [COLORS_SETTING, DATA_LABELS_SETTING, SHOW_LEGEND_SETTING],
items: [
COLORS_SETTING,
DATA_LABELS_SETTING,
SHOW_LEGEND_SETTING,
CENTER_METRIC_SETTING,
],
},
];
@@ -0,0 +1,11 @@
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 { IconNumber123 } from 'twenty-ui/display';
export const CENTER_METRIC_SETTING: ChartSettingsItem = {
isBoolean: true,
Icon: IconNumber123,
label: CHART_CONFIGURATION_SETTING_LABELS.CENTER_METRIC,
id: CHART_CONFIGURATION_SETTING_IDS.CENTER_METRIC,
};
@@ -3,6 +3,7 @@ import { msg } from '@lingui/core/macro';
export const CHART_CONFIGURATION_SETTING_LABELS = {
SOURCE: msg`Source`,
DATA_LABELS: msg`Data labels`,
CENTER_METRIC: msg`Show value in center`,
COLORS: msg`Colors`,
FILTER: msg`Filter`,
GROUP_BY: msg`Group by`,
@@ -199,6 +199,10 @@ export const useChartSettingsValues = ({
return groupByOrderByLabel;
case CHART_CONFIGURATION_SETTING_IDS.DATA_LABELS:
return configuration.displayDataLabel ?? undefined;
case CHART_CONFIGURATION_SETTING_IDS.CENTER_METRIC:
return isPieChart
? (configuration.showCenterMetric ?? undefined)
: undefined;
case CHART_CONFIGURATION_SETTING_IDS.STACKED_BARS:
return configuration.__typename === 'BarChartConfiguration'
? configuration.groupMode !== 'GROUPED'
@@ -1,6 +1,7 @@
export enum CHART_CONFIGURATION_SETTING_IDS {
SOURCE = 'SOURCE',
DATA_LABELS = 'DATA_LABELS',
CENTER_METRIC = 'CENTER_METRIC',
COLORS = 'COLORS',
FILTER = 'FILTER',
GROUP_BY = 'GROUP_BY',
@@ -26,6 +27,7 @@ export enum CHART_CONFIGURATION_SETTING_IDS {
export const CHART_CONFIGURATION_SETTING_TO_CONFIG_KEY_MAP = {
[CHART_CONFIGURATION_SETTING_IDS.DATA_LABELS]: 'displayDataLabel',
[CHART_CONFIGURATION_SETTING_IDS.CENTER_METRIC]: 'showCenterMetric',
[CHART_CONFIGURATION_SETTING_IDS.STACKED_BARS]: 'groupMode',
[CHART_CONFIGURATION_SETTING_IDS.STACKED_LINES]: 'isStacked',
[CHART_CONFIGURATION_SETTING_IDS.OMIT_NULL_VALUES]: 'omitNullValues',