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({