houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix maximum number of bars for stacked bars (#15481)

Browse Source 
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.
This commit is contained in:
Raphaël Bosi
2025-10-31 12:55:47 +01:00
committed by GitHub
parent 1b02bc7cc4
commit cf382ccdd9
5 changed files with 30 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartSettings.tsx
+2 -2
View File
@@ -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 && (
<StyledSidePanelInformationBanner
message={t`Max ${GRAPH_MAXIMUM_NUMBER_OF_GROUPS} bars per chart. Consider adding a filter`}
message={t`Max ${BAR_CHART_MAXIMUM_NUMBER_OF_BARS} bars per chart. Consider adding a filter`}
/>
)}
{chartSettings.map((group) => {
packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphMaximumNumberOfGroups.constant.ts
-1
View File
@@ -1 +0,0 @@
export const GRAPH_MAXIMUM_NUMBER_OF_GROUPS = 50;
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMaximumNumberOfBars.constant.ts
+1
View File
@@ -0,0 +1 @@
export const BAR_CHART_MAXIMUM_NUMBER_OF_BARS = 50;
packages/twenty-front/src/modules/page-layout/widgets/graph/utils/transformOneDimensionalGroupByToBarChartData.ts
+3 -3
View File
@@ -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,
};
};
packages/twenty-front/src/modules/page-layout/widgets/graph/utils/transformTwoDimensionalGroupByToBarChartData.ts
+24 -11
View File
@@ -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({