From cf382ccdd9e1c01ecbde0f1e8eee38d1519aa8df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?= <71827178+bosiraphael@users.noreply.github.com> Date: Fri, 31 Oct 2025 12:55:47 +0100 Subject: [PATCH] Fix maximum number of bars for stacked bars (#15481) The maximum number of bars feature has been implemented before the stacked bar one, so it didn't support it. Now, the same number of bars is displayed with and without group by when we are in stacked mode. --- .../page-layout/components/ChartSettings.tsx | 4 +-- .../GraphMaximumNumberOfGroups.constant.ts | 1 - .../BarChartMaximumNumberOfBars.constant.ts | 1 + ...formOneDimensionalGroupByToBarChartData.ts | 6 ++-- ...formTwoDimensionalGroupByToBarChartData.ts | 35 +++++++++++++------ 5 files changed, 30 insertions(+), 17 deletions(-) delete mode 100644 packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphMaximumNumberOfGroups.constant.ts create mode 100644 packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMaximumNumberOfBars.constant.ts diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartSettings.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartSettings.tsx index eccb1e8b78..408ea22e2b 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartSettings.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartSettings.tsx @@ -17,7 +17,7 @@ import { CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layou import { shouldHideChartSetting } from '@/command-menu/pages/page-layout/utils/shouldHideChartSetting'; import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages'; import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems'; -import { GRAPH_MAXIMUM_NUMBER_OF_GROUPS } from '@/page-layout/widgets/graph/constants/GraphMaximumNumberOfGroups.constant'; +import { BAR_CHART_MAXIMUM_NUMBER_OF_BARS } from '@/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMaximumNumberOfBars.constant'; import { hasWidgetTooManyGroupsComponentState } from '@/page-layout/widgets/graph/states/hasWidgetTooManyGroupsComponentState'; import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown'; import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; @@ -144,7 +144,7 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => { /> {hasWidgetTooManyGroups && ( )} {chartSettings.map((group) => { diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphMaximumNumberOfGroups.constant.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphMaximumNumberOfGroups.constant.ts deleted file mode 100644 index 08f36997fa..0000000000 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphMaximumNumberOfGroups.constant.ts +++ /dev/null @@ -1 +0,0 @@ -export const GRAPH_MAXIMUM_NUMBER_OF_GROUPS = 50; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMaximumNumberOfBars.constant.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMaximumNumberOfBars.constant.ts new file mode 100644 index 0000000000..7cc20bf732 --- /dev/null +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMaximumNumberOfBars.constant.ts @@ -0,0 +1 @@ +export const BAR_CHART_MAXIMUM_NUMBER_OF_BARS = 50; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/transformOneDimensionalGroupByToBarChartData.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/transformOneDimensionalGroupByToBarChartData.ts index 1c180592b9..616b3bdc8e 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/transformOneDimensionalGroupByToBarChartData.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/transformOneDimensionalGroupByToBarChartData.ts @@ -2,7 +2,7 @@ import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataIte import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { type ExtendedAggregateOperations } from '@/object-record/record-table/types/ExtendedAggregateOperations'; import { GRAPH_DEFAULT_COLOR } from '@/page-layout/widgets/graph/constants/GraphDefaultColor.constant'; -import { GRAPH_MAXIMUM_NUMBER_OF_GROUPS } from '@/page-layout/widgets/graph/constants/GraphMaximumNumberOfGroups.constant'; +import { BAR_CHART_MAXIMUM_NUMBER_OF_BARS } from '@/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMaximumNumberOfBars.constant'; import { type BarChartDataItem } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartDataItem'; import { type BarChartSeries } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartSeries'; import { type GraphColor } from '@/page-layout/widgets/graph/types/GraphColor'; @@ -51,7 +51,7 @@ export const transformOneDimensionalGroupByToBarChartData = ({ : aggregateField.name; // TODO: Add a limit to the query instead of slicing here (issue: twentyhq/core-team-issues#1600) - const limitedResults = rawResults.slice(0, GRAPH_MAXIMUM_NUMBER_OF_GROUPS); + const limitedResults = rawResults.slice(0, BAR_CHART_MAXIMUM_NUMBER_OF_BARS); const data: BarChartDataItem[] = limitedResults.map((result) => { const dimensionValues = result.groupByDimensionValues; @@ -93,6 +93,6 @@ export const transformOneDimensionalGroupByToBarChartData = ({ indexBy: indexByKey, keys: [aggregateValueKey], series, - hasTooManyGroups: rawResults.length > GRAPH_MAXIMUM_NUMBER_OF_GROUPS, + hasTooManyGroups: rawResults.length > BAR_CHART_MAXIMUM_NUMBER_OF_BARS, }; }; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/transformTwoDimensionalGroupByToBarChartData.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/transformTwoDimensionalGroupByToBarChartData.ts index 5547705194..886d7ee4af 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/transformTwoDimensionalGroupByToBarChartData.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/transformTwoDimensionalGroupByToBarChartData.ts @@ -1,7 +1,7 @@ import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { type ExtendedAggregateOperations } from '@/object-record/record-table/types/ExtendedAggregateOperations'; -import { GRAPH_MAXIMUM_NUMBER_OF_GROUPS } from '@/page-layout/widgets/graph/constants/GraphMaximumNumberOfGroups.constant'; +import { BAR_CHART_MAXIMUM_NUMBER_OF_BARS } from '@/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMaximumNumberOfBars.constant'; import { type BarChartDataItem } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartDataItem'; import { type BarChartSeries } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartSeries'; import { type GraphColor } from '@/page-layout/widgets/graph/types/GraphColor'; @@ -11,7 +11,10 @@ import { formatDimensionValue } from '@/page-layout/widgets/graph/utils/formatDi import { getFieldKey } from '@/page-layout/widgets/graph/utils/getFieldKey'; import { getSortedKeys } from '@/page-layout/widgets/graph/utils/getSortedKeys'; import { isDefined } from 'twenty-shared/utils'; -import { type BarChartConfiguration } from '~/generated/graphql'; +import { + BarChartGroupMode, + type BarChartConfiguration, +} from '~/generated/graphql'; type TransformTwoDimensionalGroupByToBarChartDataParams = { rawResults: GroupByRawResult[]; @@ -71,16 +74,26 @@ export const transformTwoDimensionalGroupByToBarChartData = ({ // TODO: Add a limit to the query instead of checking here (issue: twentyhq/core-team-issues#1600) const isNewX = !xValues.has(xValue); const isNewY = !yValues.has(yValue); - const totalUniqueDimensions = xValues.size * yValues.size; - const additionalDimensions = - (isNewX ? 1 : 0) * yValues.size + (isNewY ? 1 : 0) * xValues.size; - if ( - totalUniqueDimensions + additionalDimensions > - GRAPH_MAXIMUM_NUMBER_OF_GROUPS - ) { - hasTooManyGroups = true; - return; + if (configuration.groupMode === BarChartGroupMode.STACKED) { + if (isNewX && xValues.size >= BAR_CHART_MAXIMUM_NUMBER_OF_BARS) { + hasTooManyGroups = true; + return; + } + } + + if (configuration.groupMode === BarChartGroupMode.GROUPED) { + const totalUniqueDimensions = xValues.size * yValues.size; + const additionalDimensions = + (isNewX ? 1 : 0) * yValues.size + (isNewY ? 1 : 0) * xValues.size; + + if ( + totalUniqueDimensions + additionalDimensions > + BAR_CHART_MAXIMUM_NUMBER_OF_BARS + ) { + hasTooManyGroups = true; + return; + } } const aggregateValue = computeAggregateValueFromGroupByResult({