import { useGraphGroupBySortOptionLabels } from '@/command-menu/pages/page-layout/hooks/useGraphGroupBySortOptionLabels'; import { useGraphXSortOptionLabels } from '@/command-menu/pages/page-layout/hooks/useGraphXSortOptionLabels'; import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration'; import { CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds'; import { getChartAxisNameDisplayOptions } from '@/command-menu/pages/page-layout/utils/getChartAxisNameDisplayOptions'; import { getChartFilterRulesCount } from '@/command-menu/pages/page-layout/utils/getChartFilterRulesCount'; import { getDateGranularityLabel } from '@/command-menu/pages/page-layout/utils/getDateGranularityLabel'; import { getFieldLabelWithSubField } from '@/command-menu/pages/page-layout/utils/getFieldLabelWithSubField'; import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; import { getAggregateOperationLabel } from '@/object-record/record-board/record-board-column/utils/getAggregateOperationLabel'; import { convertAggregateOperationToExtendedAggregateOperation } from '@/object-record/utils/convertAggregateOperationToExtendedAggregateOperation'; import { plural } from '@lingui/core/macro'; import { useRecoilValue } from 'recoil'; import { type CompositeFieldSubFieldName } from 'twenty-shared/types'; import { capitalize, isDefined } from 'twenty-shared/utils'; import { type GraphOrderBy } from '~/generated-metadata/graphql'; export const useChartSettingsValues = ({ objectMetadataId, configuration, }: { objectMetadataId: string; configuration?: ChartConfiguration; }) => { const objectMetadataItems = useRecoilValue(objectMetadataItemsState); const objectMetadataItem = objectMetadataItems.find( (objectMetadataItem) => objectMetadataItem.id === objectMetadataId, ); const { getXSortOptionLabel } = useGraphXSortOptionLabels({ objectMetadataId, }); const { getGroupBySortOptionLabel } = useGraphGroupBySortOptionLabels({ objectMetadataId, }); if (!configuration) { return { getChartSettingsValues: () => undefined, }; } const isBarOrLineChart = configuration.__typename === 'BarChartConfiguration' || configuration.__typename === 'LineChartConfiguration'; const hasColorProperty = isBarOrLineChart || configuration.__typename === 'GaugeChartConfiguration' || configuration.__typename === 'PieChartConfiguration'; const isPieChart = configuration.__typename === 'PieChartConfiguration'; let groupByFieldXId: string | undefined; let groupByFieldYId: string | undefined; let groupBySubFieldNameX: CompositeFieldSubFieldName | undefined; let groupBySubFieldNameY: CompositeFieldSubFieldName | undefined; let xAxisOrderBy: GraphOrderBy | undefined | null; let groupByOrderBy: GraphOrderBy | undefined | null; if (isBarOrLineChart) { groupByFieldXId = configuration.primaryAxisGroupByFieldMetadataId; groupByFieldYId = configuration.secondaryAxisGroupByFieldMetadataId; groupBySubFieldNameX = configuration.primaryAxisGroupBySubFieldName as | CompositeFieldSubFieldName | undefined; groupBySubFieldNameY = configuration.secondaryAxisGroupBySubFieldName as | CompositeFieldSubFieldName | undefined; xAxisOrderBy = configuration.primaryAxisOrderBy; groupByOrderBy = configuration.secondaryAxisOrderBy; } const groupByFieldX = isDefined(groupByFieldXId) ? objectMetadataItem?.fields.find((field) => field.id === groupByFieldXId) : undefined; const groupByFieldY = isDefined(groupByFieldYId) ? objectMetadataItem?.fields.find((field) => field.id === groupByFieldYId) : undefined; const groupBySubFieldNameXLabel = isDefined(groupBySubFieldNameX) && isDefined(groupByFieldX) ? getFieldLabelWithSubField({ field: groupByFieldX, subFieldName: groupBySubFieldNameX, objectMetadataItems, }) : undefined; const aggregateField = objectMetadataItem?.fields.find( (fieldMetadataItem) => fieldMetadataItem.id === configuration.aggregateFieldMetadataId, ); const aggregateOperation = convertAggregateOperationToExtendedAggregateOperation( configuration.aggregateOperation, aggregateField?.type, ); const xAxisOrderByLabel = isDefined(xAxisOrderBy) && isDefined(groupByFieldXId) ? getXSortOptionLabel({ graphOrderBy: xAxisOrderBy, groupByFieldMetadataIdX: groupByFieldXId, groupBySubFieldNameX: groupBySubFieldNameX, aggregateFieldMetadataId: configuration.aggregateFieldMetadataId, aggregateOperation: configuration.aggregateOperation ?? undefined, }) : undefined; let pieChartSortByLabel: string | undefined; if (configuration.__typename === 'PieChartConfiguration') { groupByOrderBy = configuration.orderBy; groupByFieldYId = configuration.groupByFieldMetadataId; groupBySubFieldNameY = configuration.groupBySubFieldName as | CompositeFieldSubFieldName | undefined; pieChartSortByLabel = isDefined(configuration.orderBy) && isDefined(configuration.groupByFieldMetadataId) ? getXSortOptionLabel({ graphOrderBy: configuration.orderBy, groupByFieldMetadataIdX: configuration.groupByFieldMetadataId, groupBySubFieldNameX: configuration.groupBySubFieldName as | CompositeFieldSubFieldName | undefined, aggregateFieldMetadataId: configuration.aggregateFieldMetadataId, aggregateOperation: configuration.aggregateOperation ?? undefined, }) : undefined; } const finalGroupByFieldYId = groupByFieldYId; const finalGroupBySubFieldNameY = groupBySubFieldNameY; const groupByOrderByLabel = isDefined(groupByOrderBy) && isDefined(finalGroupByFieldYId) ? getGroupBySortOptionLabel({ graphOrderBy: groupByOrderBy, groupByFieldMetadataId: finalGroupByFieldYId, groupBySubFieldName: finalGroupBySubFieldNameY, }) : undefined; const getChartSettingsValues = ( itemId: CHART_CONFIGURATION_SETTING_IDS, ): boolean | string | undefined => { switch (itemId) { case CHART_CONFIGURATION_SETTING_IDS.SOURCE: return objectMetadataItem?.labelPlural; case CHART_CONFIGURATION_SETTING_IDS.DATA_ON_DISPLAY_X: return groupBySubFieldNameXLabel ?? groupByFieldX?.label; case CHART_CONFIGURATION_SETTING_IDS.COLORS: return hasColorProperty && isDefined(configuration.color) ? capitalize(configuration.color) : undefined; case CHART_CONFIGURATION_SETTING_IDS.DATA_ON_DISPLAY_Y: case CHART_CONFIGURATION_SETTING_IDS.DATA_ON_DISPLAY_AGGREGATE: case CHART_CONFIGURATION_SETTING_IDS.EACH_SLICE_REPRESENTS: { const hasAggregateLabel = isDefined(aggregateField?.label); const hasAggregateOperation = isDefined(aggregateOperation); return `${aggregateField?.label ?? ''}${ hasAggregateLabel && hasAggregateOperation ? ` (${getAggregateOperationLabel(aggregateOperation)})` : '' }`; } case CHART_CONFIGURATION_SETTING_IDS.DATA_ON_DISPLAY_PIE_CHART: { const pieChartGroupByField = isDefined(finalGroupByFieldYId) ? objectMetadataItem?.fields.find( (field) => field.id === finalGroupByFieldYId, ) : undefined; const pieChartGroupBySubFieldNameLabel = isDefined(finalGroupBySubFieldNameY) && isDefined(pieChartGroupByField) ? getFieldLabelWithSubField({ field: pieChartGroupByField, subFieldName: finalGroupBySubFieldNameY, objectMetadataItems, }) : undefined; return pieChartGroupBySubFieldNameLabel ?? pieChartGroupByField?.label; } case CHART_CONFIGURATION_SETTING_IDS.GROUP_BY: return groupByFieldY?.label; case CHART_CONFIGURATION_SETTING_IDS.AXIS_NAME: return isBarOrLineChart && isDefined(configuration.axisNameDisplay) ? getChartAxisNameDisplayOptions(configuration.axisNameDisplay) : undefined; case CHART_CONFIGURATION_SETTING_IDS.PRIMARY_SORT_BY: return pieChartSortByLabel ?? xAxisOrderByLabel; case CHART_CONFIGURATION_SETTING_IDS.SORT_BY_GROUP_BY_FIELD: return groupByOrderByLabel; case CHART_CONFIGURATION_SETTING_IDS.DATA_LABELS: return configuration.displayDataLabel ?? undefined; case CHART_CONFIGURATION_SETTING_IDS.FILTER: { const filterRulesCount = getChartFilterRulesCount(configuration.filter); return filterRulesCount > 0 ? plural(filterRulesCount, { one: `${filterRulesCount} rule`, other: `${filterRulesCount} rules`, }) : undefined; } case CHART_CONFIGURATION_SETTING_IDS.CENTER_METRIC: return isPieChart ? (configuration.showCenterMetric ?? true) : undefined; case CHART_CONFIGURATION_SETTING_IDS.STACKED_BARS: return configuration.__typename === 'BarChartConfiguration' ? configuration.groupMode !== 'GROUPED' : true; case CHART_CONFIGURATION_SETTING_IDS.STACKED_LINES: return configuration.__typename === 'LineChartConfiguration' ? configuration.isStacked !== false : true; case CHART_CONFIGURATION_SETTING_IDS.OMIT_NULL_VALUES: return isBarOrLineChart ? (configuration.omitNullValues ?? false) : false; case CHART_CONFIGURATION_SETTING_IDS.MIN_RANGE: return isBarOrLineChart ? (configuration.rangeMin?.toString() ?? '') : ''; case CHART_CONFIGURATION_SETTING_IDS.MAX_RANGE: return isBarOrLineChart ? (configuration.rangeMax?.toString() ?? '') : ''; case CHART_CONFIGURATION_SETTING_IDS.DATE_GRANULARITY_X: return isBarOrLineChart && isDefined(configuration.primaryAxisDateGranularity) ? getDateGranularityLabel(configuration.primaryAxisDateGranularity) : undefined; case CHART_CONFIGURATION_SETTING_IDS.DATE_GRANULARITY_Y: return isBarOrLineChart && isDefined(configuration.secondaryAxisGroupByDateGranularity) ? getDateGranularityLabel( configuration.secondaryAxisGroupByDateGranularity, ) : undefined; case CHART_CONFIGURATION_SETTING_IDS.DATE_GRANULARITY: return isPieChart && isDefined(configuration.dateGranularity) ? getDateGranularityLabel(configuration.dateGranularity) : undefined; case CHART_CONFIGURATION_SETTING_IDS.SHOW_LEGEND: return isBarOrLineChart || isPieChart ? (configuration.displayLegend ?? true) : true; default: return ''; } }; return { getChartSettingsValues, }; };