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

Add composites subfield selection in the graph editor (#14931)

Browse Source 
Closes https://github.com/twentyhq/core-team-issues/issues/1638
Closes https://github.com/twentyhq/core-team-issues/issues/1623



https://github.com/user-attachments/assets/2dddadaa-781b-497d-b454-0066d599bda3

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Raphaël Bosi
2025-10-07 18:33:07 +02:00
committed by GitHub
parent e382730a39
commit 94546d7c09
39 changed files with 503 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useChartSettingsValues.ts
+20 -1
View File
@@ -3,9 +3,11 @@ import { useGraphXSortOptionLabels } from '@/command-menu/pages/page-layout/hook
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 { 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 { useRecoilValue } from 'recoil';
import { type CompositeFieldSubFieldName } from 'twenty-shared/types';
import { capitalize, isDefined } from 'twenty-shared/utils';
export const useChartSettingsValues = ({
@@ -43,6 +45,15 @@ export const useChartSettingsValues = ({
)
: undefined;
const groupBySubFieldNameXLabel =
'groupBySubFieldNameX' in configuration && isDefined(groupByFieldX)
? getFieldLabelWithSubField({
field: groupByFieldX,
subFieldName:
configuration.groupBySubFieldNameX as CompositeFieldSubFieldName,
})
: undefined;
const aggregateField = objectMetadataItem?.fields.find(
(fieldMetadataItem) =>
fieldMetadataItem.id === configuration.aggregateFieldMetadataId,
@@ -66,6 +77,8 @@ export const useChartSettingsValues = ({
? getXSortOptionLabel({
graphOrderBy: xAxisOrderBy,
groupByFieldMetadataIdX: configuration.groupByFieldMetadataIdX,
groupBySubFieldNameX:
configuration.groupBySubFieldNameX as CompositeFieldSubFieldName,
aggregateFieldMetadataId: configuration.aggregateFieldMetadataId,
aggregateOperation: configuration.aggregateOperation,
})
@@ -88,6 +101,12 @@ export const useChartSettingsValues = ({
: 'groupByFieldMetadataId' in configuration
? configuration.groupByFieldMetadataId
: undefined,
groupBySubFieldName:
'groupBySubFieldNameY' in configuration
? (configuration.groupBySubFieldNameY as CompositeFieldSubFieldName)
: 'groupBySubFieldName' in configuration
? (configuration.groupBySubFieldName as CompositeFieldSubFieldName)
: undefined,
});
const getChartSettingsValues = (
@@ -97,7 +116,7 @@ export const useChartSettingsValues = ({
case CHART_CONFIGURATION_SETTING_IDS.SOURCE:
return objectMetadataItem?.labelPlural;
case CHART_CONFIGURATION_SETTING_IDS.DATA_ON_DISPLAY_X:
return groupByFieldX?.label;
return groupBySubFieldNameXLabel;
case CHART_CONFIGURATION_SETTING_IDS.COLORS:
return isDefined(configuration.color) && 'color' in configuration
? capitalize(configuration.color)
packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useGraphGroupBySortOptionLabels.ts
+8 -1
View File
@@ -1,6 +1,8 @@
import { getFieldLabelWithSubField } from '@/command-menu/pages/page-layout/utils/getFieldLabelWithSubField';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { t } from '@lingui/core/macro';
import { useRecoilValue } from 'recoil';
import { type CompositeFieldSubFieldName } from 'twenty-shared/types';
import { GraphOrderBy } from '~/generated/graphql';
export const useGraphGroupBySortOptionLabels = ({
@@ -17,15 +19,20 @@ export const useGraphGroupBySortOptionLabels = ({
const getGroupBySortOptionLabel = ({
graphOrderBy,
groupByFieldMetadataId,
groupBySubFieldName,
}: {
graphOrderBy: GraphOrderBy;
groupByFieldMetadataId: string;
groupBySubFieldName?: CompositeFieldSubFieldName;
}): string => {
const field = objectMetadataItem?.fields.find(
(fieldMetadataItem) => fieldMetadataItem.id === groupByFieldMetadataId,
);
const fieldLabel = field?.label || t`Field`;
const fieldLabel = getFieldLabelWithSubField({
field,
subFieldName: groupBySubFieldName,
});
switch (graphOrderBy) {
case GraphOrderBy.FIELD_ASC:
packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useGraphXSortOptionLabels.ts
+8 -1
View File
@@ -1,7 +1,9 @@
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 { t } from '@lingui/core/macro';
import { useRecoilValue } from 'recoil';
import { type CompositeFieldSubFieldName } from 'twenty-shared/types';
import { assertUnreachable, isDefined } from 'twenty-shared/utils';
import {
type ExtendedAggregateOperations,
@@ -22,11 +24,13 @@ export const useGraphXSortOptionLabels = ({
const getXSortOptionLabel = ({
graphOrderBy,
groupByFieldMetadataIdX,
groupBySubFieldNameX,
aggregateFieldMetadataId,
aggregateOperation,
}: {
graphOrderBy: GraphOrderBy;
groupByFieldMetadataIdX: string;
groupBySubFieldNameX?: CompositeFieldSubFieldName;
aggregateFieldMetadataId?: string;
aggregateOperation?: ExtendedAggregateOperations;
}): string => {
@@ -34,7 +38,10 @@ export const useGraphXSortOptionLabels = ({
(fieldMetadataItem) => fieldMetadataItem.id === groupByFieldMetadataIdX,
);
const fieldLabel = groupByField?.label || t`Field`;
const fieldLabel = getFieldLabelWithSubField({
field: groupByField,
subFieldName: groupBySubFieldNameX,
});
const aggregateField = objectMetadataItem?.fields.find(
(fieldMetadataItem) =>