From 177afde8667f635700ca85a5d3831576a72e70d8 Mon Sep 17 00:00:00 2001 From: nitin <142569587+ehconitin@users.noreply.github.com> Date: Wed, 17 Jun 2026 21:43:27 +0530 Subject: [PATCH] [BREAKING CHANGE] fix chart cache collisions with key-based data plumbing (#21743) closes https://discord.com/channels/1130383047699738754/1514946035317997709 This fixes Apollo cache collisions for pie slices and line series by keeping chart bucket identity as key end-to-end, matching how bar chart already works. What changed -- - Renamed pie/line chart response identity from id to key in the chart data path. - Kept key through frontend chart hooks, types, stories, and tooltip/drilldown logic. - Only adapt key to id at actual external boundaries like Nivo and GraphWidgetLegend. - Added/updated tests covering cache normalization and chart data behavior. before - CleanShot 2026-06-17 at 20 17 14@2x after - CleanShot 2026-06-17 at 20 16 17@2x Review in cubic --- .../src/metadata/generated/schema.graphql | 4 +- .../src/metadata/generated/schema.ts | 8 +- .../src/metadata/generated/types.ts | 4 +- .../src/generated-metadata/graphql.ts | 12 +- .../GraphWidgetLineChart.stories.tsx | 72 ++++++------ .../GraphWidgetPieChart.stories.tsx | 100 ++++++++--------- .../components/CustomStackedAreasLayer.tsx | 5 +- .../hooks/__tests__/useLineChartData.test.ts | 13 +-- .../hooks/useGraphLineChartWidgetData.ts | 11 +- .../hooks/useLineChartData.ts | 12 +- .../types/LineChartSeriesWithColor.ts | 5 +- ...ulateValueRangeFromLineChartSeries.test.ts | 19 ++-- .../__tests__/getLineChartLayout.test.ts | 8 +- .../__tests__/getLineChartTooltipData.test.ts | 8 +- .../utils/getLineChartTooltipData.ts | 6 +- .../components/CustomArcsLayer.tsx | 2 +- .../components/GraphWidgetPieChart.tsx | 15 +-- .../GraphWidgetPieChartRenderer.tsx | 2 +- .../pieChartDataCacheNormalization.test.ts | 104 ++++++++++++++++++ .../hooks/__tests__/usePieChartData.test.ts | 15 +-- .../hooks/useGraphPieChartWidgetData.ts | 7 +- .../hooks/usePieChartData.ts | 8 +- .../getPieChartFormattedValue.test.ts | 20 ++-- .../__tests__/getPieChartTooltipData.test.ts | 18 +-- .../utils/getPieChartFormattedValue.ts | 2 +- .../utils/getPieChartTooltipData.ts | 6 +- .../graph/graphql/queries/lineChartData.ts | 2 +- .../graph/graphql/queries/pieChartData.ts | 2 +- .../components/UsageDailyChartSection.tsx | 2 +- .../chart-data/dtos/line-chart-series.dto.ts | 2 +- .../dtos/pie-chart-data-item.dto.ts | 2 +- .../__tests__/pie-chart-data.service.spec.ts | 18 +-- .../services/line-chart-data.service.ts | 4 +- .../services/pie-chart-data.service.ts | 4 +- 34 files changed, 313 insertions(+), 209 deletions(-) create mode 100644 packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/hooks/__tests__/pieChartDataCacheNormalization.test.ts diff --git a/packages/twenty-client-sdk/src/metadata/generated/schema.graphql b/packages/twenty-client-sdk/src/metadata/generated/schema.graphql index 6aaa5d01a4..7b80988fd8 100644 --- a/packages/twenty-client-sdk/src/metadata/generated/schema.graphql +++ b/packages/twenty-client-sdk/src/metadata/generated/schema.graphql @@ -2716,7 +2716,7 @@ type LineChartDataPoint { } type LineChartSeries { - id: String! + key: String! label: String! data: [LineChartDataPoint!]! } @@ -2732,7 +2732,7 @@ type LineChartData { } type PieChartDataItem { - id: String! + key: String! value: Float! } diff --git a/packages/twenty-client-sdk/src/metadata/generated/schema.ts b/packages/twenty-client-sdk/src/metadata/generated/schema.ts index 6f17d528af..edabf23a18 100644 --- a/packages/twenty-client-sdk/src/metadata/generated/schema.ts +++ b/packages/twenty-client-sdk/src/metadata/generated/schema.ts @@ -2372,7 +2372,7 @@ export interface LineChartDataPoint { } export interface LineChartSeries { - id: Scalars['String'] + key: Scalars['String'] label: Scalars['String'] data: LineChartDataPoint[] __typename: 'LineChartSeries' @@ -2390,7 +2390,7 @@ export interface LineChartData { } export interface PieChartDataItem { - id: Scalars['String'] + key: Scalars['String'] value: Scalars['Float'] __typename: 'PieChartDataItem' } @@ -5484,7 +5484,7 @@ export interface LineChartDataPointGenqlSelection{ } export interface LineChartSeriesGenqlSelection{ - id?: boolean | number + key?: boolean | number label?: boolean | number data?: LineChartDataPointGenqlSelection __typename?: boolean | number @@ -5504,7 +5504,7 @@ export interface LineChartDataGenqlSelection{ } export interface PieChartDataItemGenqlSelection{ - id?: boolean | number + key?: boolean | number value?: boolean | number __typename?: boolean | number __scalar?: boolean | number diff --git a/packages/twenty-client-sdk/src/metadata/generated/types.ts b/packages/twenty-client-sdk/src/metadata/generated/types.ts index 7aafb06434..e59fd6b6e5 100644 --- a/packages/twenty-client-sdk/src/metadata/generated/types.ts +++ b/packages/twenty-client-sdk/src/metadata/generated/types.ts @@ -5366,7 +5366,7 @@ export default { ] }, "LineChartSeries": { - "id": [ + "key": [ 1 ], "label": [ @@ -5406,7 +5406,7 @@ export default { ] }, "PieChartDataItem": { - "id": [ + "key": [ 1 ], "value": [ diff --git a/packages/twenty-front/src/generated-metadata/graphql.ts b/packages/twenty-front/src/generated-metadata/graphql.ts index 2cbaf29cb3..eb8e6f63c9 100644 --- a/packages/twenty-front/src/generated-metadata/graphql.ts +++ b/packages/twenty-front/src/generated-metadata/graphql.ts @@ -2175,7 +2175,7 @@ export type LineChartDataPoint = { export type LineChartSeries = { __typename?: 'LineChartSeries'; data: Array; - id: Scalars['String']['output']; + key: Scalars['String']['output']; label: Scalars['String']['output']; }; @@ -4147,7 +4147,7 @@ export type PieChartDataInput = { export type PieChartDataItem = { __typename?: 'PieChartDataItem'; - id: Scalars['String']['output']; + key: Scalars['String']['output']; value: Scalars['Float']['output']; }; @@ -7454,14 +7454,14 @@ export type LineChartDataQueryVariables = Exact<{ }>; -export type LineChartDataQuery = { __typename?: 'Query', lineChartData: { __typename?: 'LineChartData', xAxisLabel: string, yAxisLabel: string, showLegend: boolean, showDataLabels: boolean, hasTooManyGroups: boolean, formattedToRawLookup: any, series: Array<{ __typename?: 'LineChartSeries', id: string, label: string, data: Array<{ __typename?: 'LineChartDataPoint', x: string, y: number }> }> } }; +export type LineChartDataQuery = { __typename?: 'Query', lineChartData: { __typename?: 'LineChartData', xAxisLabel: string, yAxisLabel: string, showLegend: boolean, showDataLabels: boolean, hasTooManyGroups: boolean, formattedToRawLookup: any, series: Array<{ __typename?: 'LineChartSeries', key: string, label: string, data: Array<{ __typename?: 'LineChartDataPoint', x: string, y: number }> }> } }; export type PieChartDataQueryVariables = Exact<{ input: PieChartDataInput; }>; -export type PieChartDataQuery = { __typename?: 'Query', pieChartData: { __typename?: 'PieChartData', showLegend: boolean, showDataLabels: boolean, showCenterMetric: boolean, hasTooManyGroups: boolean, formattedToRawLookup: any, data: Array<{ __typename?: 'PieChartDataItem', id: string, value: number }> } }; +export type PieChartDataQuery = { __typename?: 'Query', pieChartData: { __typename?: 'PieChartData', showLegend: boolean, showDataLabels: boolean, showCenterMetric: boolean, hasTooManyGroups: boolean, formattedToRawLookup: any, data: Array<{ __typename?: 'PieChartDataItem', key: string, value: number }> } }; export type CreateEmailGroupChannelMutationVariables = Exact<{ input: CreateEmailGroupChannelInput; @@ -8748,8 +8748,8 @@ export const UpsertViewWidgetDocument = {"kind":"Document","definitions":[{"kind export const FindAllPageLayoutsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"FindAllPageLayouts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"getPageLayouts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PageLayoutFragment"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PageLayoutWidgetFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PageLayoutWidget"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"applicationId"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"objectMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"isActive"}},{"kind":"Field","name":{"kind":"Name","value":"deletedAt"}},{"kind":"Field","name":{"kind":"Name","value":"conditionalDisplay"}},{"kind":"Field","name":{"kind":"Name","value":"conditionalAvailabilityExpression"}},{"kind":"Field","name":{"kind":"Name","value":"gridPosition"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"column"}},{"kind":"Field","name":{"kind":"Name","value":"columnSpan"}},{"kind":"Field","name":{"kind":"Name","value":"row"}},{"kind":"Field","name":{"kind":"Name","value":"rowSpan"}}]}},{"kind":"Field","name":{"kind":"Name","value":"position"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PageLayoutWidgetGridPosition"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"layoutMode"}},{"kind":"Field","name":{"kind":"Name","value":"row"}},{"kind":"Field","name":{"kind":"Name","value":"column"}},{"kind":"Field","name":{"kind":"Name","value":"rowSpan"}},{"kind":"Field","name":{"kind":"Name","value":"columnSpan"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PageLayoutWidgetVerticalListPosition"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"layoutMode"}},{"kind":"Field","name":{"kind":"Name","value":"index"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PageLayoutWidgetCanvasPosition"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"layoutMode"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"configuration"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"BarChartConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}},{"kind":"Field","name":{"kind":"Name","value":"aggregateFieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"aggregateOperation"}},{"kind":"Field","name":{"kind":"Name","value":"primaryAxisGroupByFieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"primaryAxisGroupBySubFieldName"}},{"kind":"Field","name":{"kind":"Name","value":"primaryAxisDateGranularity"}},{"kind":"Field","name":{"kind":"Name","value":"primaryAxisOrderBy"}},{"kind":"Field","name":{"kind":"Name","value":"primaryAxisManualSortOrder"}},{"kind":"Field","name":{"kind":"Name","value":"secondaryAxisGroupByFieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"secondaryAxisGroupBySubFieldName"}},{"kind":"Field","name":{"kind":"Name","value":"secondaryAxisGroupByDateGranularity"}},{"kind":"Field","name":{"kind":"Name","value":"secondaryAxisOrderBy"}},{"kind":"Field","name":{"kind":"Name","value":"secondaryAxisManualSortOrder"}},{"kind":"Field","name":{"kind":"Name","value":"omitNullValues"}},{"kind":"Field","name":{"kind":"Name","value":"axisNameDisplay"}},{"kind":"Field","name":{"kind":"Name","value":"displayDataLabel"}},{"kind":"Field","name":{"kind":"Name","value":"displayLegend"}},{"kind":"Field","name":{"kind":"Name","value":"rangeMin"}},{"kind":"Field","name":{"kind":"Name","value":"rangeMax"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"filter"}},{"kind":"Field","name":{"kind":"Name","value":"groupMode"}},{"kind":"Field","name":{"kind":"Name","value":"layout"}},{"kind":"Field","name":{"kind":"Name","value":"isCumulative"}},{"kind":"Field","name":{"kind":"Name","value":"splitMultiValueFields"}},{"kind":"Field","name":{"kind":"Name","value":"timezone"}},{"kind":"Field","name":{"kind":"Name","value":"firstDayOfTheWeek"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LineChartConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}},{"kind":"Field","name":{"kind":"Name","value":"aggregateFieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"aggregateOperation"}},{"kind":"Field","name":{"kind":"Name","value":"primaryAxisGroupByFieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"primaryAxisGroupBySubFieldName"}},{"kind":"Field","name":{"kind":"Name","value":"primaryAxisDateGranularity"}},{"kind":"Field","name":{"kind":"Name","value":"primaryAxisOrderBy"}},{"kind":"Field","name":{"kind":"Name","value":"primaryAxisManualSortOrder"}},{"kind":"Field","name":{"kind":"Name","value":"secondaryAxisGroupByFieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"secondaryAxisGroupBySubFieldName"}},{"kind":"Field","name":{"kind":"Name","value":"secondaryAxisGroupByDateGranularity"}},{"kind":"Field","name":{"kind":"Name","value":"secondaryAxisOrderBy"}},{"kind":"Field","name":{"kind":"Name","value":"secondaryAxisManualSortOrder"}},{"kind":"Field","name":{"kind":"Name","value":"omitNullValues"}},{"kind":"Field","name":{"kind":"Name","value":"axisNameDisplay"}},{"kind":"Field","name":{"kind":"Name","value":"displayDataLabel"}},{"kind":"Field","name":{"kind":"Name","value":"displayLegend"}},{"kind":"Field","name":{"kind":"Name","value":"rangeMin"}},{"kind":"Field","name":{"kind":"Name","value":"rangeMax"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"filter"}},{"kind":"Field","name":{"kind":"Name","value":"isStacked"}},{"kind":"Field","name":{"kind":"Name","value":"isCumulative"}},{"kind":"Field","name":{"kind":"Name","value":"splitMultiValueFields"}},{"kind":"Field","name":{"kind":"Name","value":"timezone"}},{"kind":"Field","name":{"kind":"Name","value":"firstDayOfTheWeek"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PieChartConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}},{"kind":"Field","name":{"kind":"Name","value":"groupByFieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"aggregateFieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"aggregateOperation"}},{"kind":"Field","name":{"kind":"Name","value":"groupBySubFieldName"}},{"kind":"Field","name":{"kind":"Name","value":"dateGranularity"}},{"kind":"Field","name":{"kind":"Name","value":"orderBy"}},{"kind":"Field","name":{"kind":"Name","value":"manualSortOrder"}},{"kind":"Field","name":{"kind":"Name","value":"displayDataLabel"}},{"kind":"Field","name":{"kind":"Name","value":"showCenterMetric"}},{"kind":"Field","name":{"kind":"Name","value":"displayLegend"}},{"kind":"Field","name":{"kind":"Name","value":"hideEmptyCategory"}},{"kind":"Field","name":{"kind":"Name","value":"splitMultiValueFields"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"filter"}},{"kind":"Field","name":{"kind":"Name","value":"timezone"}},{"kind":"Field","name":{"kind":"Name","value":"firstDayOfTheWeek"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AggregateChartConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}},{"kind":"Field","name":{"kind":"Name","value":"aggregateFieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"aggregateOperation"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"displayDataLabel"}},{"kind":"Field","name":{"kind":"Name","value":"numberFormat"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"filter"}},{"kind":"Field","name":{"kind":"Name","value":"prefix"}},{"kind":"Field","name":{"kind":"Name","value":"suffix"}},{"kind":"Field","name":{"kind":"Name","value":"timezone"}},{"kind":"Field","name":{"kind":"Name","value":"firstDayOfTheWeek"}},{"kind":"Field","name":{"kind":"Name","value":"ratioAggregateConfig"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"fieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"optionValue"}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"IframeConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}},{"kind":"Field","name":{"kind":"Name","value":"url"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"StandaloneRichTextConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}},{"kind":"Field","name":{"kind":"Name","value":"body"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"blocknote"}},{"kind":"Field","name":{"kind":"Name","value":"markdown"}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CalendarConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"EmailsConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"EmailThreadConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"FieldConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}},{"kind":"Field","name":{"kind":"Name","value":"fieldDisplayMode"}},{"kind":"Field","name":{"kind":"Name","value":"fieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"viewId"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"FieldRichTextConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"FieldsConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}},{"kind":"Field","name":{"kind":"Name","value":"viewId"}},{"kind":"Field","name":{"kind":"Name","value":"newFieldDefaultVisibility"}},{"kind":"Field","name":{"kind":"Name","value":"shouldAllowUserToSeeHiddenFields"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"FilesConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"NotesConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"TasksConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"TimelineConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ViewConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"RecordTableConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}},{"kind":"Field","name":{"kind":"Name","value":"viewId"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"WorkflowConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"WorkflowRunConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"WorkflowVersionConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"FrontComponentConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}},{"kind":"Field","name":{"kind":"Name","value":"frontComponentId"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"pageLayoutTabId"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PageLayoutTabFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PageLayoutTab"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"applicationId"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"icon"}},{"kind":"Field","name":{"kind":"Name","value":"position"}},{"kind":"Field","name":{"kind":"Name","value":"layoutMode"}},{"kind":"Field","name":{"kind":"Name","value":"widgets"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PageLayoutWidgetFragment"}}]}},{"kind":"Field","name":{"kind":"Name","value":"pageLayoutId"}},{"kind":"Field","name":{"kind":"Name","value":"isActive"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PageLayoutFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PageLayout"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"objectMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"universalIdentifier"}},{"kind":"Field","name":{"kind":"Name","value":"defaultTabToFocusOnMobileAndSidePanelId"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"tabs"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PageLayoutTabFragment"}}]}}]}}]} as unknown as DocumentNode; export const FindAllRecordPageLayoutsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"FindAllRecordPageLayouts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"getPageLayouts"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"pageLayoutType"},"value":{"kind":"EnumValue","value":"RECORD_PAGE"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PageLayoutFragment"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PageLayoutWidgetFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PageLayoutWidget"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"applicationId"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"objectMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"isActive"}},{"kind":"Field","name":{"kind":"Name","value":"deletedAt"}},{"kind":"Field","name":{"kind":"Name","value":"conditionalDisplay"}},{"kind":"Field","name":{"kind":"Name","value":"conditionalAvailabilityExpression"}},{"kind":"Field","name":{"kind":"Name","value":"gridPosition"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"column"}},{"kind":"Field","name":{"kind":"Name","value":"columnSpan"}},{"kind":"Field","name":{"kind":"Name","value":"row"}},{"kind":"Field","name":{"kind":"Name","value":"rowSpan"}}]}},{"kind":"Field","name":{"kind":"Name","value":"position"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PageLayoutWidgetGridPosition"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"layoutMode"}},{"kind":"Field","name":{"kind":"Name","value":"row"}},{"kind":"Field","name":{"kind":"Name","value":"column"}},{"kind":"Field","name":{"kind":"Name","value":"rowSpan"}},{"kind":"Field","name":{"kind":"Name","value":"columnSpan"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PageLayoutWidgetVerticalListPosition"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"layoutMode"}},{"kind":"Field","name":{"kind":"Name","value":"index"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PageLayoutWidgetCanvasPosition"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"layoutMode"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"configuration"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"BarChartConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}},{"kind":"Field","name":{"kind":"Name","value":"aggregateFieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"aggregateOperation"}},{"kind":"Field","name":{"kind":"Name","value":"primaryAxisGroupByFieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"primaryAxisGroupBySubFieldName"}},{"kind":"Field","name":{"kind":"Name","value":"primaryAxisDateGranularity"}},{"kind":"Field","name":{"kind":"Name","value":"primaryAxisOrderBy"}},{"kind":"Field","name":{"kind":"Name","value":"primaryAxisManualSortOrder"}},{"kind":"Field","name":{"kind":"Name","value":"secondaryAxisGroupByFieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"secondaryAxisGroupBySubFieldName"}},{"kind":"Field","name":{"kind":"Name","value":"secondaryAxisGroupByDateGranularity"}},{"kind":"Field","name":{"kind":"Name","value":"secondaryAxisOrderBy"}},{"kind":"Field","name":{"kind":"Name","value":"secondaryAxisManualSortOrder"}},{"kind":"Field","name":{"kind":"Name","value":"omitNullValues"}},{"kind":"Field","name":{"kind":"Name","value":"axisNameDisplay"}},{"kind":"Field","name":{"kind":"Name","value":"displayDataLabel"}},{"kind":"Field","name":{"kind":"Name","value":"displayLegend"}},{"kind":"Field","name":{"kind":"Name","value":"rangeMin"}},{"kind":"Field","name":{"kind":"Name","value":"rangeMax"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"filter"}},{"kind":"Field","name":{"kind":"Name","value":"groupMode"}},{"kind":"Field","name":{"kind":"Name","value":"layout"}},{"kind":"Field","name":{"kind":"Name","value":"isCumulative"}},{"kind":"Field","name":{"kind":"Name","value":"splitMultiValueFields"}},{"kind":"Field","name":{"kind":"Name","value":"timezone"}},{"kind":"Field","name":{"kind":"Name","value":"firstDayOfTheWeek"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LineChartConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}},{"kind":"Field","name":{"kind":"Name","value":"aggregateFieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"aggregateOperation"}},{"kind":"Field","name":{"kind":"Name","value":"primaryAxisGroupByFieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"primaryAxisGroupBySubFieldName"}},{"kind":"Field","name":{"kind":"Name","value":"primaryAxisDateGranularity"}},{"kind":"Field","name":{"kind":"Name","value":"primaryAxisOrderBy"}},{"kind":"Field","name":{"kind":"Name","value":"primaryAxisManualSortOrder"}},{"kind":"Field","name":{"kind":"Name","value":"secondaryAxisGroupByFieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"secondaryAxisGroupBySubFieldName"}},{"kind":"Field","name":{"kind":"Name","value":"secondaryAxisGroupByDateGranularity"}},{"kind":"Field","name":{"kind":"Name","value":"secondaryAxisOrderBy"}},{"kind":"Field","name":{"kind":"Name","value":"secondaryAxisManualSortOrder"}},{"kind":"Field","name":{"kind":"Name","value":"omitNullValues"}},{"kind":"Field","name":{"kind":"Name","value":"axisNameDisplay"}},{"kind":"Field","name":{"kind":"Name","value":"displayDataLabel"}},{"kind":"Field","name":{"kind":"Name","value":"displayLegend"}},{"kind":"Field","name":{"kind":"Name","value":"rangeMin"}},{"kind":"Field","name":{"kind":"Name","value":"rangeMax"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"filter"}},{"kind":"Field","name":{"kind":"Name","value":"isStacked"}},{"kind":"Field","name":{"kind":"Name","value":"isCumulative"}},{"kind":"Field","name":{"kind":"Name","value":"splitMultiValueFields"}},{"kind":"Field","name":{"kind":"Name","value":"timezone"}},{"kind":"Field","name":{"kind":"Name","value":"firstDayOfTheWeek"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PieChartConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}},{"kind":"Field","name":{"kind":"Name","value":"groupByFieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"aggregateFieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"aggregateOperation"}},{"kind":"Field","name":{"kind":"Name","value":"groupBySubFieldName"}},{"kind":"Field","name":{"kind":"Name","value":"dateGranularity"}},{"kind":"Field","name":{"kind":"Name","value":"orderBy"}},{"kind":"Field","name":{"kind":"Name","value":"manualSortOrder"}},{"kind":"Field","name":{"kind":"Name","value":"displayDataLabel"}},{"kind":"Field","name":{"kind":"Name","value":"showCenterMetric"}},{"kind":"Field","name":{"kind":"Name","value":"displayLegend"}},{"kind":"Field","name":{"kind":"Name","value":"hideEmptyCategory"}},{"kind":"Field","name":{"kind":"Name","value":"splitMultiValueFields"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"filter"}},{"kind":"Field","name":{"kind":"Name","value":"timezone"}},{"kind":"Field","name":{"kind":"Name","value":"firstDayOfTheWeek"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AggregateChartConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}},{"kind":"Field","name":{"kind":"Name","value":"aggregateFieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"aggregateOperation"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"displayDataLabel"}},{"kind":"Field","name":{"kind":"Name","value":"numberFormat"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"filter"}},{"kind":"Field","name":{"kind":"Name","value":"prefix"}},{"kind":"Field","name":{"kind":"Name","value":"suffix"}},{"kind":"Field","name":{"kind":"Name","value":"timezone"}},{"kind":"Field","name":{"kind":"Name","value":"firstDayOfTheWeek"}},{"kind":"Field","name":{"kind":"Name","value":"ratioAggregateConfig"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"fieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"optionValue"}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"IframeConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}},{"kind":"Field","name":{"kind":"Name","value":"url"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"StandaloneRichTextConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}},{"kind":"Field","name":{"kind":"Name","value":"body"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"blocknote"}},{"kind":"Field","name":{"kind":"Name","value":"markdown"}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CalendarConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"EmailsConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"EmailThreadConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"FieldConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}},{"kind":"Field","name":{"kind":"Name","value":"fieldDisplayMode"}},{"kind":"Field","name":{"kind":"Name","value":"fieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"viewId"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"FieldRichTextConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"FieldsConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}},{"kind":"Field","name":{"kind":"Name","value":"viewId"}},{"kind":"Field","name":{"kind":"Name","value":"newFieldDefaultVisibility"}},{"kind":"Field","name":{"kind":"Name","value":"shouldAllowUserToSeeHiddenFields"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"FilesConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"NotesConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"TasksConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"TimelineConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ViewConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"RecordTableConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}},{"kind":"Field","name":{"kind":"Name","value":"viewId"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"WorkflowConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"WorkflowRunConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"WorkflowVersionConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"FrontComponentConfiguration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurationType"}},{"kind":"Field","name":{"kind":"Name","value":"frontComponentId"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"pageLayoutTabId"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PageLayoutTabFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PageLayoutTab"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"applicationId"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"icon"}},{"kind":"Field","name":{"kind":"Name","value":"position"}},{"kind":"Field","name":{"kind":"Name","value":"layoutMode"}},{"kind":"Field","name":{"kind":"Name","value":"widgets"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PageLayoutWidgetFragment"}}]}},{"kind":"Field","name":{"kind":"Name","value":"pageLayoutId"}},{"kind":"Field","name":{"kind":"Name","value":"isActive"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PageLayoutFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PageLayout"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"objectMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"universalIdentifier"}},{"kind":"Field","name":{"kind":"Name","value":"defaultTabToFocusOnMobileAndSidePanelId"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"tabs"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PageLayoutTabFragment"}}]}}]}}]} as unknown as DocumentNode; export const BarChartDataDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"BarChartData"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"BarChartDataInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"barChartData"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"}},{"kind":"Field","name":{"kind":"Name","value":"indexBy"}},{"kind":"Field","name":{"kind":"Name","value":"keys"}},{"kind":"Field","name":{"kind":"Name","value":"series"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"xAxisLabel"}},{"kind":"Field","name":{"kind":"Name","value":"yAxisLabel"}},{"kind":"Field","name":{"kind":"Name","value":"showLegend"}},{"kind":"Field","name":{"kind":"Name","value":"showDataLabels"}},{"kind":"Field","name":{"kind":"Name","value":"layout"}},{"kind":"Field","name":{"kind":"Name","value":"groupMode"}},{"kind":"Field","name":{"kind":"Name","value":"hasTooManyGroups"}},{"kind":"Field","name":{"kind":"Name","value":"formattedToRawLookup"}}]}}]}}]} as unknown as DocumentNode; -export const LineChartDataDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"LineChartData"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"LineChartDataInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"lineChartData"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"series"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"x"}},{"kind":"Field","name":{"kind":"Name","value":"y"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"xAxisLabel"}},{"kind":"Field","name":{"kind":"Name","value":"yAxisLabel"}},{"kind":"Field","name":{"kind":"Name","value":"showLegend"}},{"kind":"Field","name":{"kind":"Name","value":"showDataLabels"}},{"kind":"Field","name":{"kind":"Name","value":"hasTooManyGroups"}},{"kind":"Field","name":{"kind":"Name","value":"formattedToRawLookup"}}]}}]}}]} as unknown as DocumentNode; -export const PieChartDataDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"PieChartData"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"PieChartDataInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"pieChartData"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"showLegend"}},{"kind":"Field","name":{"kind":"Name","value":"showDataLabels"}},{"kind":"Field","name":{"kind":"Name","value":"showCenterMetric"}},{"kind":"Field","name":{"kind":"Name","value":"hasTooManyGroups"}},{"kind":"Field","name":{"kind":"Name","value":"formattedToRawLookup"}}]}}]}}]} as unknown as DocumentNode; +export const LineChartDataDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"LineChartData"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"LineChartDataInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"lineChartData"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"series"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"x"}},{"kind":"Field","name":{"kind":"Name","value":"y"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"xAxisLabel"}},{"kind":"Field","name":{"kind":"Name","value":"yAxisLabel"}},{"kind":"Field","name":{"kind":"Name","value":"showLegend"}},{"kind":"Field","name":{"kind":"Name","value":"showDataLabels"}},{"kind":"Field","name":{"kind":"Name","value":"hasTooManyGroups"}},{"kind":"Field","name":{"kind":"Name","value":"formattedToRawLookup"}}]}}]}}]} as unknown as DocumentNode; +export const PieChartDataDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"PieChartData"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"PieChartDataInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"pieChartData"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"showLegend"}},{"kind":"Field","name":{"kind":"Name","value":"showDataLabels"}},{"kind":"Field","name":{"kind":"Name","value":"showCenterMetric"}},{"kind":"Field","name":{"kind":"Name","value":"hasTooManyGroups"}},{"kind":"Field","name":{"kind":"Name","value":"formattedToRawLookup"}}]}}]}}]} as unknown as DocumentNode; export const CreateEmailGroupChannelDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateEmailGroupChannel"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CreateEmailGroupChannelInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createEmailGroupChannel"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"messageChannel"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"handle"}},{"kind":"Field","name":{"kind":"Name","value":"visibility"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"isSyncEnabled"}},{"kind":"Field","name":{"kind":"Name","value":"excludeGroupEmails"}},{"kind":"Field","name":{"kind":"Name","value":"contactAutoCreationPolicy"}}]}},{"kind":"Field","name":{"kind":"Name","value":"forwardingAddress"}}]}}]}}]} as unknown as DocumentNode; export const DeleteConnectedAccountDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteConnectedAccount"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UUID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"deleteConnectedAccount"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode; export const DeleteEmailGroupChannelDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteEmailGroupChannel"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UUID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"deleteEmailGroupChannel"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/__stories__/GraphWidgetLineChart.stories.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/__stories__/GraphWidgetLineChart.stories.tsx index 56e39af884..7adfb0eaa9 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/__stories__/GraphWidgetLineChart.stories.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/__stories__/GraphWidgetLineChart.stories.tsx @@ -121,13 +121,13 @@ export const Default: Story = { id: 'line-chart-default', data: [ { - id: 'series1', + key: 'series1', label: 'Revenue', color: 'blue', data: generateLinearData(12), }, { - id: 'series2', + key: 'series2', label: 'Profit', color: 'turquoise', data: generateLinearData(12), @@ -149,13 +149,13 @@ export const WithArea: Story = { id: 'line-chart-area', data: [ { - id: 'sales', + key: 'sales', label: 'Sales', color: 'purple', data: generateLinearData(12), }, { - id: 'costs', + key: 'costs', label: 'Costs', color: 'orange', data: generateLinearData(12), @@ -175,19 +175,19 @@ export const StackedArea: Story = { id: 'line-chart-stacked', data: [ { - id: 'product-a', + key: 'product-a', label: 'Product A', color: 'blue', data: generateLinearData(8), }, { - id: 'product-b', + key: 'product-b', label: 'Product B', color: 'turquoise', data: generateLinearData(8), }, { - id: 'product-c', + key: 'product-c', label: 'Product C', color: 'purple', data: generateLinearData(8), @@ -209,7 +209,7 @@ export const StackedWithNegativeValues: Story = { id: 'line-chart-stacked-negative', data: [ { - id: 'series-positive', + key: 'series-positive', label: 'Positive Series', color: 'blue', data: [ @@ -219,7 +219,7 @@ export const StackedWithNegativeValues: Story = { ], }, { - id: 'series-negative', + key: 'series-negative', label: 'Negative Series', color: 'red', data: [ @@ -245,7 +245,7 @@ export const StepChart: Story = { id: 'line-chart-step', data: [ { - id: 'inventory', + key: 'inventory', label: 'Inventory Level', color: 'orange', data: generateLinearData(10), @@ -265,7 +265,7 @@ export const LogScaleDemo: Story = { id: 'line-chart-log-scale', data: [ { - id: 'exponential', + key: 'exponential', label: 'Exponential Growth', color: 'purple', data: [ @@ -278,7 +278,7 @@ export const LogScaleDemo: Story = { ], }, { - id: 'linear', + key: 'linear', label: 'Linear Growth', color: 'turquoise', data: [ @@ -305,7 +305,7 @@ export const WithNullValues: Story = { id: 'line-chart-nulls', data: [ { - id: 'incomplete', + key: 'incomplete', label: 'With Gaps', color: 'blue', data: [ @@ -333,19 +333,19 @@ export const MultiSeriesMixed: Story = { id: 'line-chart-mixed', data: [ { - id: 'actual', + key: 'actual', label: 'Actual', color: 'blue', data: generateLinearData(12), }, { - id: 'forecast', + key: 'forecast', label: 'Forecast', color: 'purple', data: generateLinearData(12), }, { - id: 'target', + key: 'target', label: 'Target', color: 'orange', data: generateLinearData(12).map((dataPoint) => ({ @@ -368,7 +368,7 @@ export const OverlappingGradientBlend: Story = { id: 'line-chart-blend', data: [ { - id: 'red-series', + key: 'red-series', label: 'Red Wave', color: 'red', data: [ @@ -383,7 +383,7 @@ export const OverlappingGradientBlend: Story = { ], }, { - id: 'blue-series', + key: 'blue-series', label: 'Blue Wave', color: 'blue', data: [ @@ -398,7 +398,7 @@ export const OverlappingGradientBlend: Story = { ], }, { - id: 'green-series', + key: 'green-series', label: 'Green Wave', color: 'turquoise', data: [ @@ -427,7 +427,7 @@ export const HighContrastOverlap: Story = { id: 'line-chart-contrast', data: [ { - id: 'yellow-series', + key: 'yellow-series', label: 'Yellow', color: 'yellow', data: [ @@ -441,7 +441,7 @@ export const HighContrastOverlap: Story = { ], }, { - id: 'purple-series', + key: 'purple-series', label: 'Purple', color: 'purple', data: [ @@ -469,7 +469,7 @@ export const CurveComparison: Story = { id: 'line-chart-curves', data: [ { - id: 'dataset', + key: 'dataset', label: 'Same Data', color: 'orange', data: [ @@ -497,7 +497,7 @@ export const StepInterpolations: Story = { id: 'line-chart-steps', data: [ { - id: 'step-normal', + key: 'step-normal', label: 'Step', color: 'blue', data: [ @@ -510,7 +510,7 @@ export const StepInterpolations: Story = { ], }, { - id: 'step-before', + key: 'step-before', label: 'Step Before', color: 'purple', data: [ @@ -523,7 +523,7 @@ export const StepInterpolations: Story = { ], }, { - id: 'step-after', + key: 'step-after', label: 'Step After', color: 'turquoise', data: [ @@ -550,7 +550,7 @@ export const NaturalVsMonotone: Story = { id: 'line-chart-smooth', data: [ { - id: 'natural', + key: 'natural', label: 'Natural Curve', color: 'pink', data: [ @@ -564,7 +564,7 @@ export const NaturalVsMonotone: Story = { ], }, { - id: 'monotone', + key: 'monotone', label: 'Monotone X', color: 'orange', data: [ @@ -592,7 +592,7 @@ export const SliceTooltipDemo: Story = { id: 'line-chart-slice-tooltip', data: [ { - id: 'revenue', + key: 'revenue', label: 'Revenue', color: 'blue', data: [ @@ -605,7 +605,7 @@ export const SliceTooltipDemo: Story = { ], }, { - id: 'costs', + key: 'costs', label: 'Costs', color: 'red', data: [ @@ -618,7 +618,7 @@ export const SliceTooltipDemo: Story = { ], }, { - id: 'profit', + key: 'profit', label: 'Profit', color: 'turquoise', data: [ @@ -646,7 +646,7 @@ export const PointTooltipDemo: Story = { id: 'line-chart-point-tooltip', data: [ { - id: 'revenue', + key: 'revenue', label: 'Revenue', color: 'blue', data: [ @@ -659,7 +659,7 @@ export const PointTooltipDemo: Story = { ], }, { - id: 'costs', + key: 'costs', label: 'Costs', color: 'red', data: [ @@ -672,7 +672,7 @@ export const PointTooltipDemo: Story = { ], }, { - id: 'profit', + key: 'profit', label: 'Profit', color: 'turquoise', data: [ @@ -700,13 +700,13 @@ export const Catalog: Story = { id: 'line-chart-catalog', data: [ { - id: 'series1', + key: 'series1', label: 'Series 1', color: 'blue', data: generateLinearData(8), }, { - id: 'series2', + key: 'series2', label: 'Series 2', color: 'purple', data: generateLinearData(8), @@ -736,7 +736,7 @@ export const Catalog: Story = { props: (color: string) => ({ data: [ { - id: 'series', + key: 'series', label: `${color} Series`, color, data: generateLinearData(8), diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/__stories__/GraphWidgetPieChart.stories.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/__stories__/GraphWidgetPieChart.stories.tsx index 570c5c6883..8d9abce381 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/__stories__/GraphWidgetPieChart.stories.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/__stories__/GraphWidgetPieChart.stories.tsx @@ -97,11 +97,11 @@ const Container = ({ children }: { children: React.ReactNode }) => ( export const Default: Story = { args: { data: [ - { id: 'Qualified', value: 35 }, - { id: 'Contacted', value: 25 }, - { id: 'Unqualified', value: 20 }, - { id: 'Proposal', value: 15 }, - { id: 'Negotiation', value: 5 }, + { key: 'Qualified', value: 35 }, + { key: 'Contacted', value: 25 }, + { key: 'Unqualified', value: 20 }, + { key: 'Proposal', value: 15 }, + { key: 'Negotiation', value: 5 }, ], showLegend: true, id: 'pie-chart-default', @@ -127,9 +127,9 @@ export const Default: Story = { export const WithCenterMetric: Story = { args: { data: [ - { id: 'Qualified', value: 35 }, - { id: 'Contacted', value: 25 }, - { id: 'Unqualified', value: 20 }, + { key: 'Qualified', value: 35 }, + { key: 'Contacted', value: 25 }, + { key: 'Unqualified', value: 20 }, ], showCenterMetric: true, id: 'pie-chart-with-center-metric', @@ -151,9 +151,9 @@ export const WithCenterMetric: Story = { export const WithDataLabels: Story = { args: { data: [ - { id: 'Qualified', value: 35 }, - { id: 'Contacted', value: 25 }, - { id: 'Unqualified', value: 20 }, + { key: 'Qualified', value: 35 }, + { key: 'Contacted', value: 25 }, + { key: 'Unqualified', value: 20 }, ], showDataLabels: true, id: 'pie-chart-with-data-labels', @@ -174,10 +174,10 @@ export const WithDataLabels: Story = { export const Revenue: Story = { args: { data: [ - { id: 'Product A', value: 420000 }, - { id: 'Product B', value: 380000 }, - { id: 'Product C', value: 250000 }, - { id: 'Product D', value: 180000 }, + { key: 'Product A', value: 420000 }, + { key: 'Product B', value: 380000 }, + { key: 'Product C', value: 250000 }, + { key: 'Product D', value: 180000 }, ], prefix: '$', displayType: 'shortNumber', @@ -205,9 +205,9 @@ export const Revenue: Story = { export const TaskStatus: Story = { args: { data: [ - { id: 'Completed', value: 45 }, - { id: 'In Progress', value: 30 }, - { id: 'To Do', value: 25 }, + { key: 'Completed', value: 45 }, + { key: 'In Progress', value: 30 }, + { key: 'To Do', value: 25 }, ], displayType: 'percentage', showLegend: true, @@ -234,8 +234,8 @@ export const TaskStatus: Story = { export const TwoSlices: Story = { args: { data: [ - { id: 'Active', value: 75 }, - { id: 'Inactive', value: 25 }, + { key: 'Active', value: 75 }, + { key: 'Inactive', value: 25 }, ], displayType: 'percentage', showLegend: true, @@ -262,14 +262,14 @@ export const TwoSlices: Story = { export const ManySlices: Story = { args: { data: [ - { id: 'Category 1', value: 20 }, - { id: 'Category 2', value: 18 }, - { id: 'Category 3', value: 16 }, - { id: 'Category 4', value: 14 }, - { id: 'Category 5', value: 12 }, - { id: 'Category 6', value: 10 }, - { id: 'Category 7', value: 6 }, - { id: 'Category 8', value: 4 }, + { key: 'Category 1', value: 20 }, + { key: 'Category 2', value: 18 }, + { key: 'Category 3', value: 16 }, + { key: 'Category 4', value: 14 }, + { key: 'Category 5', value: 12 }, + { key: 'Category 6', value: 10 }, + { key: 'Category 7', value: 6 }, + { key: 'Category 8', value: 4 }, ], showLegend: true, id: 'pie-chart-many-slices', @@ -295,9 +295,9 @@ export const ManySlices: Story = { export const WithoutLegend: Story = { args: { data: [ - { id: 'Web', value: 45 }, - { id: 'Mobile', value: 35 }, - { id: 'Desktop', value: 20 }, + { key: 'Web', value: 45 }, + { key: 'Mobile', value: 35 }, + { key: 'Desktop', value: 20 }, ], displayType: 'percentage', showLegend: false, @@ -324,10 +324,10 @@ export const WithoutLegend: Story = { export const MarketShare: Story = { args: { data: [ - { id: 'Brand A', value: 35.5 }, - { id: 'Brand B', value: 28.2 }, - { id: 'Brand C', value: 18.7 }, - { id: 'Others', value: 17.6 }, + { key: 'Brand A', value: 35.5 }, + { key: 'Brand B', value: 28.2 }, + { key: 'Brand C', value: 18.7 }, + { key: 'Others', value: 17.6 }, ], displayType: 'percentage', showLegend: true, @@ -354,10 +354,10 @@ export const MarketShare: Story = { export const Storage: Story = { args: { data: [ - { id: 'Documents', value: 125 }, - { id: 'Media', value: 280 }, - { id: 'Applications', value: 95 }, - { id: 'System', value: 50 }, + { key: 'Documents', value: 125 }, + { key: 'Media', value: 280 }, + { key: 'Applications', value: 95 }, + { key: 'System', value: 50 }, ], suffix: ' GB', showLegend: true, @@ -400,23 +400,23 @@ export const Catalog: Story = { props: (sliceCount: number) => { const dataMap: Record< number, - Array<{ id: string; value: number }> + Array<{ key: string; value: number }> > = { 2: [ - { id: 'Yes', value: 65 }, - { id: 'No', value: 35 }, + { key: 'Yes', value: 65 }, + { key: 'No', value: 35 }, ], 3: [ - { id: 'Gold', value: 45 }, - { id: 'Silver', value: 35 }, - { id: 'Bronze', value: 20 }, + { key: 'Gold', value: 45 }, + { key: 'Silver', value: 35 }, + { key: 'Bronze', value: 20 }, ], 5: [ - { id: 'Item 1', value: 30 }, - { id: 'Item 2', value: 25 }, - { id: 'Item 3', value: 20 }, - { id: 'Item 4', value: 15 }, - { id: 'Item 5', value: 10 }, + { key: 'Item 1', value: 30 }, + { key: 'Item 2', value: 25 }, + { key: 'Item 3', value: 20 }, + { key: 'Item 4', value: 15 }, + { key: 'Item 5', value: 10 }, ], }; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/components/CustomStackedAreasLayer.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/components/CustomStackedAreasLayer.tsx index 200824a3e6..0211ac24a0 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/components/CustomStackedAreasLayer.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/components/CustomStackedAreasLayer.tsx @@ -37,7 +37,10 @@ export const CustomStackedAreasLayer = ({ const seriesById = useMemo( () => new Map( - enrichedSeries.map((seriesItem) => [String(seriesItem.id), seriesItem]), + enrichedSeries.map((seriesItem) => [ + String(seriesItem.key), + seriesItem, + ]), ), [enrichedSeries], ); diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/hooks/__tests__/useLineChartData.test.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/hooks/__tests__/useLineChartData.test.ts index e2daf45080..a5dadd2edb 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/hooks/__tests__/useLineChartData.test.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/hooks/__tests__/useLineChartData.test.ts @@ -3,7 +3,6 @@ import { type GraphColorRegistry } from '@/page-layout/widgets/graph/types/Graph import { renderHook } from '@testing-library/react'; import { useLineChartData } from '@/page-layout/widgets/graph/graph-widget-line-chart/hooks/useLineChartData'; -import { type LineChartSeries } from '~/generated-metadata/graphql'; const mockUseAtomComponentStateValue = jest.fn(); jest.mock( @@ -60,7 +59,7 @@ describe('useLineChartData', () => { const mockData: LineChartSeriesWithColor[] = [ { - id: 'series1', + key: 'series1', data: [ { x: 'Jan', y: 100 }, { x: 'Feb', y: 120 }, @@ -70,7 +69,7 @@ describe('useLineChartData', () => { color: 'red', }, { - id: 'series2', + key: 'series2', data: [ { x: 'Jan', y: 80 }, { x: 'Feb', y: 90 }, @@ -171,10 +170,10 @@ describe('useLineChartData', () => { expect(result.current.legendItems).toEqual([]); }); - it('should use series id as label when label is not provided', () => { - const dataWithoutLabel: LineChartSeries[] = [ + it('should use series key as label when label is not provided', () => { + const dataWithoutLabel: LineChartSeriesWithColor[] = [ { - id: 'series1', + key: 'series1', data: [{ x: 'Jan', y: 100 }], label: 'series1', }, @@ -205,7 +204,7 @@ describe('useLineChartData', () => { ); expect(result.current.visibleData).toHaveLength(1); - expect(result.current.visibleData[0].id).toBe('series1'); + expect(result.current.visibleData[0].key).toBe('series1'); expect(result.current.enrichedSeries).toHaveLength(1); expect(result.current.nivoData).toHaveLength(1); }); diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/hooks/useGraphLineChartWidgetData.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/hooks/useGraphLineChartWidgetData.ts index 85f6157e05..be04269c09 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/hooks/useGraphLineChartWidgetData.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/hooks/useGraphLineChartWidgetData.ts @@ -15,6 +15,7 @@ import { LineChartDataDocument, type LineChartConfiguration, type LineChartDataPoint, + type LineChartSeries, } from '~/generated-metadata/graphql'; type UseGraphLineChartWidgetDataProps = { @@ -83,12 +84,8 @@ export const useGraphLineChartWidgetData = ({ }); const series = queryData?.lineChartData?.series?.map( - (seriesItem: { - id: string; - label: string; - data: Array; - }): LineChartSeriesWithColor => { - const rawValue = formattedToRawLookup.get(seriesItem.id); + (seriesItem: LineChartSeries): LineChartSeriesWithColor => { + const rawValue = formattedToRawLookup.get(seriesItem.key); const itemColor = determineChartItemColor({ configurationColor, @@ -97,7 +94,7 @@ export const useGraphLineChartWidgetData = ({ }); return { - id: seriesItem.id, + key: seriesItem.key, label: seriesItem.label, color: itemColor, data: seriesItem.data.map( diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/hooks/useLineChartData.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/hooks/useLineChartData.ts index d09f656a89..6a41ea7dd7 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/hooks/useLineChartData.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/hooks/useLineChartData.ts @@ -37,10 +37,10 @@ export const useLineChartData = ({ totalGroups: shouldApplyGradient ? data.length : undefined, }); - const sanitizedSeriesId = series.id + const sanitizedSeriesKey = series.key .replace(/\s+/g, '_') .replace(/[^a-zA-Z0-9_-]/g, ''); - const areaFillId = `areaFill-${id}-${sanitizedSeriesId}-${index}`; + const areaFillId = `areaFill-${id}-${sanitizedSeriesKey}-${index}`; return { ...series, colorScheme, areaFillId }; }); @@ -48,22 +48,22 @@ export const useLineChartData = ({ const legendItems: GraphWidgetLegendItem[] = allEnrichedSeries.map( (series) => ({ - id: series.id, + id: series.key, label: series.label, color: series.colorScheme.solid, }), ); const visibleData = data.filter( - (series) => !graphWidgetHiddenLegendIds.includes(series.id), + (series) => !graphWidgetHiddenLegendIds.includes(series.key), ); const enrichedSeries = allEnrichedSeries.filter( - (series) => !graphWidgetHiddenLegendIds.includes(series.id), + (series) => !graphWidgetHiddenLegendIds.includes(series.key), ); const nivoData: LineSeries[] = visibleData.map((series) => ({ - id: series.id, + id: series.key, data: series.data.map((point) => ({ x: point.x, y: point.y })), })); diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/types/LineChartSeriesWithColor.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/types/LineChartSeriesWithColor.ts index e1eac6850a..7c4837c2b7 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/types/LineChartSeriesWithColor.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/types/LineChartSeriesWithColor.ts @@ -1,9 +1,8 @@ import { type LineChartDataPoint } from '@/page-layout/widgets/graph/graph-widget-line-chart/types/LineChartDataPoint'; import { type GraphColor } from '@/page-layout/widgets/graph/types/GraphColor'; +import { type LineChartSeries } from '~/generated-metadata/graphql'; -export type LineChartSeriesWithColor = { - id: string; - label: string; +export type LineChartSeriesWithColor = Omit & { color?: GraphColor; data: LineChartDataPoint[]; }; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/utils/__tests__/calculateValueRangeFromLineChartSeries.test.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/utils/__tests__/calculateValueRangeFromLineChartSeries.test.ts index 7cb7cdbc9a..d73b9090f2 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/utils/__tests__/calculateValueRangeFromLineChartSeries.test.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/utils/__tests__/calculateValueRangeFromLineChartSeries.test.ts @@ -1,13 +1,12 @@ import { type LineChartSeriesWithColor } from '@/page-layout/widgets/graph/graph-widget-line-chart/types/LineChartSeriesWithColor'; import { calculateValueRangeFromLineChartSeries } from '@/page-layout/widgets/graph/graph-widget-line-chart/utils/calculateValueRangeFromLineChartSeries'; -import { type LineChartSeries } from '~/generated-metadata/graphql'; describe('calculateValueRangeFromLineChartSeries', () => { describe('with valid data', () => { it('should calculate minimum and maximum from single series', () => { const data: LineChartSeriesWithColor[] = [ { - id: 'series1', + key: 'series1', data: [ { x: 'Jan', y: 10 }, { x: 'Feb', y: 50 }, @@ -25,20 +24,20 @@ describe('calculateValueRangeFromLineChartSeries', () => { it('should calculate minimum and maximum from multiple series', () => { const data: LineChartSeriesWithColor[] = [ { - id: 'series1', + key: 'series1', data: [ { x: 'Jan', y: 10 }, { x: 'Feb', y: 20 }, ], }, { - id: 'series2', + key: 'series2', data: [ { x: 'Jan', y: 5 }, { x: 'Feb', y: 100 }, ], }, - ] as unknown as LineChartSeries[]; + ] as unknown as LineChartSeriesWithColor[]; const result = calculateValueRangeFromLineChartSeries(data); @@ -49,7 +48,7 @@ describe('calculateValueRangeFromLineChartSeries', () => { it('should handle negative values', () => { const data: LineChartSeriesWithColor[] = [ { - id: 'series1', + key: 'series1', data: [ { x: 'Jan', y: -50 }, { x: 'Feb', y: 25 }, @@ -67,7 +66,7 @@ describe('calculateValueRangeFromLineChartSeries', () => { it('should handle all same values', () => { const data: LineChartSeriesWithColor[] = [ { - id: 'series1', + key: 'series1', data: [ { x: 'Jan', y: 42 }, { x: 'Feb', y: 42 }, @@ -87,7 +86,7 @@ describe('calculateValueRangeFromLineChartSeries', () => { it('should treat null y values as 0', () => { const data: LineChartSeriesWithColor[] = [ { - id: 'series1', + key: 'series1', data: [ { x: 'Jan', y: null }, { x: 'Feb', y: 50 }, @@ -104,7 +103,7 @@ describe('calculateValueRangeFromLineChartSeries', () => { it('should treat undefined y values as 0', () => { const data: LineChartSeriesWithColor[] = [ { - id: 'series1', + key: 'series1', data: [ { x: 'Jan', y: undefined }, { x: 'Feb', y: 30 }, @@ -132,7 +131,7 @@ describe('calculateValueRangeFromLineChartSeries', () => { it('should handle series with empty data array', () => { const data: LineChartSeriesWithColor[] = [ { - id: 'series1', + key: 'series1', data: [], }, ] as unknown as LineChartSeriesWithColor[]; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/utils/__tests__/getLineChartLayout.test.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/utils/__tests__/getLineChartLayout.test.ts index cd0d3558a9..b0aa430156 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/utils/__tests__/getLineChartLayout.test.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/utils/__tests__/getLineChartLayout.test.ts @@ -17,7 +17,7 @@ describe('getLineChartLayout', () => { const defaultData: LineChartSeriesWithColor[] = [ { - id: 'series1', + key: 'series1', label: 'Series 1', data: [ { x: '2024-01', y: 10 }, @@ -90,7 +90,7 @@ describe('getLineChartLayout', () => { ...baseParams, data: [ { - id: 'series1', + key: 'series1', label: 'Series 1', data: [{ x: '2024-01', y: 50 }], }, @@ -119,7 +119,7 @@ describe('getLineChartLayout', () => { ...baseParams, data: [ { - id: 'series1', + key: 'series1', label: 'Series 1', data: [ { x: '2024-01', y: 10 }, @@ -127,7 +127,7 @@ describe('getLineChartLayout', () => { ], }, { - id: 'series2', + key: 'series2', label: 'Series 2', data: [ { x: '2024-01', y: 15 }, diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/utils/__tests__/getLineChartTooltipData.test.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/utils/__tests__/getLineChartTooltipData.test.ts index ac54d265c8..8cfa5b335a 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/utils/__tests__/getLineChartTooltipData.test.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/utils/__tests__/getLineChartTooltipData.test.ts @@ -43,17 +43,17 @@ const createMockSlice = ( points, }) as unknown as SliceTooltipProps['slice']; -const createSeries = (id: string): LineChartEnrichedSeries => +const createSeries = (key: string): LineChartEnrichedSeries => ({ - id, - label: id, + key, + label: key, data: [], colorScheme: { name: 'test', solid: '#solid', variations: Array(12).fill('#v0'), }, - areaFillId: `area-${id}`, + areaFillId: `area-${key}`, }) as unknown as LineChartEnrichedSeries; describe('getLineChartTooltipData', () => { diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/utils/getLineChartTooltipData.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/utils/getLineChartTooltipData.ts index e724bce53a..e711716692 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/utils/getLineChartTooltipData.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-line-chart/utils/getLineChartTooltipData.ts @@ -26,7 +26,7 @@ export const getLineChartTooltipData = ({ isStacked = false, }: GetLineChartTooltipDataParameters): LineChartTooltipData => { const enrichedSeriesMap = new Map( - enrichedSeries.map((series) => [series.id, series]), + enrichedSeries.map((series) => [series.key, series]), ); if (!isDefined(slice.points) || slice.points.length === 0) { @@ -37,7 +37,7 @@ export const getLineChartTooltipData = ({ } const seriesIndexMap = new Map( - enrichedSeries.map((series, index) => [series.id, index]), + enrichedSeries.map((series, index) => [series.key, index]), ); const getPointValue = (point: (typeof slice.points)[number]) => @@ -65,7 +65,7 @@ export const getLineChartTooltipData = ({ const value = getPointValue(point); return { - key: enrichedSeriesItem.id, + key: enrichedSeriesItem.key, label: enrichedSeriesItem.label, formattedValue: formatGraphValue(value, formatOptions), value, diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/components/CustomArcsLayer.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/components/CustomArcsLayer.tsx index 1be58d45d2..4cef03be31 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/components/CustomArcsLayer.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/components/CustomArcsLayer.tsx @@ -38,7 +38,7 @@ export const CustomArcsLayer = ({ {transition((_, datum) => { const isDimmed = isDefined(graphWidgetHighlightedLegendId) && - String(graphWidgetHighlightedLegendId) !== String(datum.data.id); + String(graphWidgetHighlightedLegendId) !== String(datum.data.key); const arcLength = datum.arc.endAngle - datum.arc.startAngle; const padAngleRadians = (padAngle * Math.PI) / 180; const clampedPadAngle = Math.min( diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/components/GraphWidgetPieChart.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/components/GraphWidgetPieChart.tsx index 962150e349..778a6f5eb2 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/components/GraphWidgetPieChart.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/components/GraphWidgetPieChart.tsx @@ -29,10 +29,7 @@ import { } from 'react'; import { isDefined } from 'twenty-shared/utils'; import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; -import { - type PieChartConfiguration, - type PieChartDataItem, -} from '~/generated-metadata/graphql'; +import { type PieChartConfiguration } from '~/generated-metadata/graphql'; type GraphWidgetPieChartProps = { data: PieChartDataItemWithColor[]; @@ -46,7 +43,9 @@ type GraphWidgetPieChartProps = { showCenterMetric?: boolean; } & GraphValueFormatOptions; -const emptyStateData: PieChartDataItemWithColor[] = [{ id: 'empty', value: 1 }]; +const emptyStateData: PieChartDataItemWithColor[] = [ + { key: 'empty', value: 1 }, +]; const StyledContainer = styled.div` align-items: center; @@ -194,8 +193,10 @@ export const GraphWidgetPieChart = ({ enableArcLabels={false} tooltip={() => null} layers={[ArcsLayer, 'arcLinkLabels']} - id={(datum: PieChartDataItem) => `${id}:${String(datum.id)}`} - arcLinkLabel={(datum: ComputedDatum) => { + id={(datum: PieChartDataItemWithColor) => + `${id}:${String(datum.key)}` + } + arcLinkLabel={(datum: ComputedDatum) => { const formattedValue = getPieChartFormattedValue({ datum, enrichedData, diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/components/GraphWidgetPieChartRenderer.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/components/GraphWidgetPieChartRenderer.tsx index 87fd7ced86..3b78ee5595 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/components/GraphWidgetPieChartRenderer.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/components/GraphWidgetPieChartRenderer.tsx @@ -65,7 +65,7 @@ export const GraphWidgetPieChartRenderer = () => { isFilteredViewRedirectionSupported(groupByField); const handleSliceClick = (datum: PieChartDataItemWithColor) => { - const rawValue = formattedToRawLookup.get(datum.id) ?? null; + const rawValue = formattedToRawLookup.get(datum.key) ?? null; const drilldownQueryParams = buildChartDrilldownQueryParams({ objectMetadataItem, diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/hooks/__tests__/pieChartDataCacheNormalization.test.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/hooks/__tests__/pieChartDataCacheNormalization.test.ts new file mode 100644 index 0000000000..e26dc38ad1 --- /dev/null +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/hooks/__tests__/pieChartDataCacheNormalization.test.ts @@ -0,0 +1,104 @@ +import { InMemoryCache } from '@apollo/client'; + +import { LINE_CHART_DATA } from '@/page-layout/widgets/graph/graphql/queries/lineChartData'; +import { PIE_CHART_DATA } from '@/page-layout/widgets/graph/graphql/queries/pieChartData'; + +// Pie slices and line series are returned with `key` (the bucket label) rather than `id`, +// so Apollo's default id-based normalization never pools them into a shared cache entry. +// Without this, two widgets sharing a slice/series label overwrite each other's value +// (one chart "copies" the other). Mirrors the production cache config in useApolloFactory.ts. +const buildCache = () => + new InMemoryCache({ + typePolicies: { + RemoteTable: { keyFields: ['name'] }, + }, + }); + +const variablesForFilter = (filter: string) => ({ + input: { objectMetadataId: 'opportunity', configuration: { filter } }, +}); + +const writePie = (cache: InMemoryCache, filter: string, value: number) => { + cache.writeQuery({ + query: PIE_CHART_DATA, + variables: variablesForFilter(filter), + data: { + pieChartData: { + __typename: 'PieChartData', + data: [{ __typename: 'PieChartDataItem', key: 'New', value }], + showLegend: true, + showDataLabels: false, + showCenterMetric: true, + hasTooManyGroups: false, + formattedToRawLookup: {}, + }, + }, + }); +}; + +const readPieNewValue = (cache: InMemoryCache, filter: string) => + cache.readQuery<{ pieChartData: { data: Array<{ value: number }> } }>({ + query: PIE_CHART_DATA, + variables: variablesForFilter(filter), + })?.pieChartData.data[0].value; + +const writeLine = (cache: InMemoryCache, filter: string, y: number) => { + cache.writeQuery({ + query: LINE_CHART_DATA, + variables: variablesForFilter(filter), + data: { + lineChartData: { + __typename: 'LineChartData', + series: [ + { + __typename: 'LineChartSeries', + key: 'Won', + label: 'Won', + data: [{ __typename: 'LineChartDataPoint', x: '2024', y }], + }, + ], + xAxisLabel: '', + yAxisLabel: '', + showLegend: true, + showDataLabels: false, + hasTooManyGroups: false, + formattedToRawLookup: {}, + }, + }, + }); +}; + +const readLineFirstY = (cache: InMemoryCache, filter: string) => + cache.readQuery<{ + lineChartData: { series: Array<{ data: Array<{ y: number }> }> }; + }>({ + query: LINE_CHART_DATA, + variables: variablesForFilter(filter), + })?.lineChartData.series[0].data[0].y; + +const hasNormalizedEntry = (cache: InMemoryCache, typename: string) => + Object.keys(cache.extract()).some((cacheKey) => + cacheKey.startsWith(`${typename}:`), + ); + +describe('chart data cache normalization', () => { + it('keeps pie slice values independent when two widgets share a slice label', () => { + const cache = buildCache(); + + writePie(cache, 'all', 100); + writePie(cache, 'lo', 5); + + expect(readPieNewValue(cache, 'all')).toBe(100); + expect(hasNormalizedEntry(cache, 'PieChartDataItem')).toBe(false); + }); + + it('keeps line series values independent when two widgets share a series key', () => { + const cache = buildCache(); + + writeLine(cache, 'all', 100); + writeLine(cache, 'lo', 5); + + expect(readLineFirstY(cache, 'all')).toBe(100); + expect(hasNormalizedEntry(cache, 'LineChartSeries')).toBe(false); + }); +}); diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/hooks/__tests__/usePieChartData.test.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/hooks/__tests__/usePieChartData.test.ts index e6282ba8cb..7064fd0716 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/hooks/__tests__/usePieChartData.test.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/hooks/__tests__/usePieChartData.test.ts @@ -2,7 +2,6 @@ import { usePieChartData } from '@/page-layout/widgets/graph/graph-widget-pie-ch import { type PieChartDataItemWithColor } from '@/page-layout/widgets/graph/graph-widget-pie-chart/types/PieChartDataItem'; import { type GraphColorRegistry } from '@/page-layout/widgets/graph/types/GraphColorRegistry'; import { renderHook } from '@testing-library/react'; -import { type PieChartDataItem } from '~/generated-metadata/graphql'; const mockUseAtomComponentStateValue = jest.fn(); jest.mock( @@ -58,9 +57,9 @@ describe('usePieChartData', () => { }; const mockData: PieChartDataItemWithColor[] = [ - { id: 'item1', value: 30 }, - { id: 'item2', value: 50 }, - { id: 'item3', value: 20 }, + { key: 'item1', value: 30 }, + { key: 'item2', value: 50 }, + { key: 'item3', value: 20 }, ]; it('should enrich data with color schemes and percentages', () => { @@ -74,7 +73,7 @@ describe('usePieChartData', () => { expect(result.current.enrichedData).toHaveLength(3); expect(result.current.enrichedData[0]).toMatchObject({ - id: 'item1', + key: 'item1', value: 30, percentage: 30, colorScheme: mockColorRegistry.red, @@ -96,7 +95,9 @@ describe('usePieChartData', () => { }); it('should handle single data item', () => { - const singleData: PieChartDataItem[] = [{ id: 'single', value: 100 }]; + const singleData: PieChartDataItemWithColor[] = [ + { key: 'single', value: 100 }, + ]; const { result } = renderHook(() => usePieChartData({ @@ -151,7 +152,7 @@ describe('usePieChartData', () => { ); expect(result.current.enrichedData).toHaveLength(2); - expect(result.current.enrichedData.map((d) => d.id)).toEqual([ + expect(result.current.enrichedData.map((item) => item.key)).toEqual([ 'item1', 'item3', ]); diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/hooks/useGraphPieChartWidgetData.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/hooks/useGraphPieChartWidgetData.ts index 4527eb0aad..fdd39360b0 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/hooks/useGraphPieChartWidgetData.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/hooks/useGraphPieChartWidgetData.ts @@ -15,6 +15,7 @@ import { isDefined } from 'twenty-shared/utils'; import { PieChartDataDocument, type PieChartConfiguration, + type PieChartDataItem, } from '~/generated-metadata/graphql'; type UseGraphPieChartWidgetDataProps = { @@ -85,8 +86,8 @@ export const useGraphPieChartWidgetData = ({ }); const chartData = queryData?.pieChartData?.data?.map( - (item: PieChartDataItemWithColor): PieChartDataItemWithColor => { - const rawValue = formattedToRawLookup.get(item.id); + (item: PieChartDataItem): PieChartDataItemWithColor => { + const rawValue = formattedToRawLookup.get(item.key); const itemColor = determineChartItemColor({ configurationColor, @@ -95,7 +96,7 @@ export const useGraphPieChartWidgetData = ({ }); return { - id: item.id, + key: item.key, value: item.value, color: itemColor, }; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/hooks/usePieChartData.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/hooks/usePieChartData.ts index 282d94b8be..6b96d2afd5 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/hooks/usePieChartData.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/hooks/usePieChartData.ts @@ -48,17 +48,17 @@ export const usePieChartData = ({ }, [data, colorRegistry, colorMode]); const legendItems: GraphWidgetLegendItem[] = allEnrichedData.map((item) => ({ - id: item.id, - label: String(item.id), + id: item.key, + label: String(item.key), color: item.colorScheme.solid, })); const enrichedData = allEnrichedData.filter( - (item) => !graphWidgetHiddenLegendIds.includes(item.id), + (item) => !graphWidgetHiddenLegendIds.includes(item.key), ); const enrichedDataMap = useMemo( - () => new Map(enrichedData.map((item) => [item.id, item])), + () => new Map(enrichedData.map((item) => [item.key, item])), [enrichedData], ); diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/__tests__/getPieChartFormattedValue.test.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/__tests__/getPieChartFormattedValue.test.ts index dc889f99fe..ffd9f870c4 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/__tests__/getPieChartFormattedValue.test.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/__tests__/getPieChartFormattedValue.test.ts @@ -26,19 +26,19 @@ describe('getPieChartFormattedValue', () => { const mockEnrichedData: PieChartEnrichedData[] = [ { - id: 'slice1', + key: 'slice1', value: 30, percentage: 30, colorScheme: mockColorScheme, }, { - id: 'slice2', + key: 'slice2', value: 50, percentage: 50, colorScheme: mockColorScheme, }, { - id: 'slice3', + key: 'slice3', value: 20, percentage: 20, colorScheme: mockColorScheme, @@ -46,13 +46,13 @@ describe('getPieChartFormattedValue', () => { ]; const createMockDatum = ( - id: string, + key: string, options?: { computedId?: string }, ): ComputedDatum => ({ - id: options?.computedId ?? id, + id: options?.computedId ?? key, value: 0, - data: { id, value: 0 }, + data: { key, value: 0 }, }) as unknown as ComputedDatum; const defaultFormatOptions = { @@ -84,7 +84,7 @@ describe('getPieChartFormattedValue', () => { expect(result).toBeNull(); }); - it('should match by datum.data.id when computed id is namespaced per widget', () => { + it('should match by datum.data.key when computed id is namespaced per widget', () => { const datum = createMockDatum('slice1', { computedId: 'widget-abc:slice1', }); @@ -145,7 +145,7 @@ describe('getPieChartFormattedValue', () => { it('should format percentage to one decimal place', () => { const enrichedDataWithDecimal: PieChartEnrichedData[] = [ { - id: 'slice1', + key: 'slice1', value: 33, percentage: 33.333, colorScheme: mockColorScheme, @@ -168,7 +168,7 @@ describe('getPieChartFormattedValue', () => { it('should handle zero value', () => { const enrichedDataWithZero: PieChartEnrichedData[] = [ { - id: 'zero', + key: 'zero', value: 0, percentage: 0, colorScheme: mockColorScheme, @@ -189,7 +189,7 @@ describe('getPieChartFormattedValue', () => { it('should handle 100% value', () => { const enrichedDataWith100: PieChartEnrichedData[] = [ { - id: 'full', + key: 'full', value: 100, percentage: 100, colorScheme: mockColorScheme, diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/__tests__/getPieChartTooltipData.test.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/__tests__/getPieChartTooltipData.test.ts index 519666ea21..e811b3f8dd 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/__tests__/getPieChartTooltipData.test.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/__tests__/getPieChartTooltipData.test.ts @@ -26,19 +26,19 @@ describe('getPieChartTooltipData', () => { const mockEnrichedData: PieChartEnrichedData[] = [ { - id: 'Product A', + key: 'Product A', value: 500, percentage: 50, colorScheme: mockColorScheme, }, { - id: 'Product B', + key: 'Product B', value: 300, percentage: 30, colorScheme: { ...mockColorScheme, solid: '#solidB' }, }, { - id: 'Product C', + key: 'Product C', value: 200, percentage: 20, colorScheme: { ...mockColorScheme, solid: '#solidC' }, @@ -46,13 +46,13 @@ describe('getPieChartTooltipData', () => { ]; const createMockDatum = ( - id: string, + key: string, options?: { computedId?: string }, ): ComputedDatum => ({ - id: options?.computedId ?? id, + id: options?.computedId ?? key, value: 0, - data: { id, value: 0 }, + data: { key, value: 0 }, }) as unknown as ComputedDatum; const defaultFormatOptions = { @@ -150,7 +150,7 @@ describe('getPieChartTooltipData', () => { expect(result).toBeNull(); }); - it('should match by datum.data.id when computed id is namespaced per widget', () => { + it('should match by datum.data.key when computed id is namespaced per widget', () => { const datum = createMockDatum('Product A', { computedId: 'widget-xyz:Product A', }); @@ -182,7 +182,7 @@ describe('getPieChartTooltipData', () => { it('should handle item with zero value', () => { const enrichedDataWithZero: PieChartEnrichedData[] = [ { - id: 'Zero Item', + key: 'Zero Item', value: 0, percentage: 0, colorScheme: mockColorScheme, @@ -203,7 +203,7 @@ describe('getPieChartTooltipData', () => { it('should handle special characters in id', () => { const enrichedDataWithSpecialChars: PieChartEnrichedData[] = [ { - id: 'Item & Special ', + key: 'Item & Special ', value: 100, percentage: 100, colorScheme: mockColorScheme, diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/getPieChartFormattedValue.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/getPieChartFormattedValue.ts index f6c8d44bad..a7099e3e38 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/getPieChartFormattedValue.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/getPieChartFormattedValue.ts @@ -22,7 +22,7 @@ export const getPieChartFormattedValue = ({ displayType, }: GetPieChartFormattedValueParams): string | null => { const item = enrichedData.find( - (enrichedDataItem) => enrichedDataItem.id === datum.data.id, + (enrichedDataItem) => enrichedDataItem.key === datum.data.key, ); if (!isDefined(item)) return null; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/getPieChartTooltipData.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/getPieChartTooltipData.ts index 8d6921333f..e82aa40197 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/getPieChartTooltipData.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graph-widget-pie-chart/utils/getPieChartTooltipData.ts @@ -23,7 +23,7 @@ export const getPieChartTooltipData = ({ tooltipItem: GraphWidgetTooltipItem; } | null => { const item = enrichedData.find( - (enrichedDataItem) => enrichedDataItem.id === datum.data.id, + (enrichedDataItem) => enrichedDataItem.key === datum.data.key, ); if (!isDefined(item)) return null; @@ -37,8 +37,8 @@ export const getPieChartTooltipData = ({ return { tooltipItem: { - key: item.id, - label: item.id, + key: item.key, + label: item.key, formattedValue, value: item.value, dotColor: item.colorScheme.solid, diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphql/queries/lineChartData.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphql/queries/lineChartData.ts index dc67f59a8e..fc6f2fdaca 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphql/queries/lineChartData.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphql/queries/lineChartData.ts @@ -4,7 +4,7 @@ export const LINE_CHART_DATA = gql` query LineChartData($input: LineChartDataInput!) { lineChartData(input: $input) { series { - id + key label data { x diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphql/queries/pieChartData.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphql/queries/pieChartData.ts index 8e12fc8a4f..1fe1bdf76b 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphql/queries/pieChartData.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphql/queries/pieChartData.ts @@ -4,7 +4,7 @@ export const PIE_CHART_DATA = gql` query PieChartData($input: PieChartDataInput!) { pieChartData(input: $input) { data { - id + key value } showLegend diff --git a/packages/twenty-front/src/modules/settings/usage/components/UsageDailyChartSection.tsx b/packages/twenty-front/src/modules/settings/usage/components/UsageDailyChartSection.tsx index 5dfa32ee26..adcb55574b 100644 --- a/packages/twenty-front/src/modules/settings/usage/components/UsageDailyChartSection.tsx +++ b/packages/twenty-front/src/modules/settings/usage/components/UsageDailyChartSection.tsx @@ -63,7 +63,7 @@ export const UsageDailyChartSection = ({ const lineData: LineChartSeriesWithColor[] = [ { - id: chartId, + key: chartId, label: chartLabel, data: timeSeries.map((point) => ({ x: formatDate(point.date, 'MMM d'), diff --git a/packages/twenty-server/src/modules/dashboard/chart-data/dtos/line-chart-series.dto.ts b/packages/twenty-server/src/modules/dashboard/chart-data/dtos/line-chart-series.dto.ts index 0fd2df583b..5e9dc97d71 100644 --- a/packages/twenty-server/src/modules/dashboard/chart-data/dtos/line-chart-series.dto.ts +++ b/packages/twenty-server/src/modules/dashboard/chart-data/dtos/line-chart-series.dto.ts @@ -5,7 +5,7 @@ import { LineChartDataPointDTO } from 'src/modules/dashboard/chart-data/dtos/lin @ObjectType('LineChartSeries') export class LineChartSeriesDTO { @Field(() => String) - id: string; + key: string; @Field(() => String) label: string; diff --git a/packages/twenty-server/src/modules/dashboard/chart-data/dtos/pie-chart-data-item.dto.ts b/packages/twenty-server/src/modules/dashboard/chart-data/dtos/pie-chart-data-item.dto.ts index 7b3ab6f345..ede9c7991f 100644 --- a/packages/twenty-server/src/modules/dashboard/chart-data/dtos/pie-chart-data-item.dto.ts +++ b/packages/twenty-server/src/modules/dashboard/chart-data/dtos/pie-chart-data-item.dto.ts @@ -3,7 +3,7 @@ import { Field, Float, ObjectType } from '@nestjs/graphql'; @ObjectType('PieChartDataItem') export class PieChartDataItemDTO { @Field(() => String) - id: string; + key: string; @Field(() => Float) value: number; diff --git a/packages/twenty-server/src/modules/dashboard/chart-data/services/__tests__/pie-chart-data.service.spec.ts b/packages/twenty-server/src/modules/dashboard/chart-data/services/__tests__/pie-chart-data.service.spec.ts index 9f3fcd18d1..4ae4d66847 100644 --- a/packages/twenty-server/src/modules/dashboard/chart-data/services/__tests__/pie-chart-data.service.spec.ts +++ b/packages/twenty-server/src/modules/dashboard/chart-data/services/__tests__/pie-chart-data.service.spec.ts @@ -137,11 +137,11 @@ describe('PieChartDataService', () => { expect(result.data).toHaveLength(2); expect(result.data[0]).toEqual({ - id: 'Active', + key: 'Active', value: 10, }); expect(result.data[1]).toEqual({ - id: 'Inactive', + key: 'Inactive', value: 5, }); expect(result.showLegend).toBe(true); @@ -162,8 +162,8 @@ describe('PieChartDataService', () => { }); expect(result.data).toEqual([ - { id: 'Not Set', value: 2 }, - { id: 'Active', value: 5 }, + { key: 'Not Set', value: 2 }, + { key: 'Active', value: 5 }, ]); expect(result.formattedToRawLookup?.['Not Set']).toBeUndefined(); expect(result.formattedToRawLookup?.['Active']).toBe('Active'); @@ -186,7 +186,7 @@ describe('PieChartDataService', () => { }); expect(result.data).toHaveLength(1); - expect(result.data[0].id).toBe('Active'); + expect(result.data[0].key).toBe('Active'); }); it('should flag too many groups and limit slices', async () => { @@ -313,8 +313,8 @@ describe('PieChartDataService', () => { authContext: mockAuthContext, }); - expect(result.data[0].id).toBe('Open'); - expect(result.data[1].id).toBe('Closed'); + expect(result.data[0].key).toBe('Open'); + expect(result.data[1].key).toBe('Closed'); }); }); @@ -461,8 +461,8 @@ describe('PieChartDataService', () => { authContext: mockAuthContext, }); - expect(result.data[0].id).toBe('Yes'); - expect(result.data[1].id).toBe('No'); + expect(result.data[0].key).toBe('Yes'); + expect(result.data[1].key).toBe('No'); }); }); }); diff --git a/packages/twenty-server/src/modules/dashboard/chart-data/services/line-chart-data.service.ts b/packages/twenty-server/src/modules/dashboard/chart-data/services/line-chart-data.service.ts index 7c1d5b6059..6e6cc80de1 100644 --- a/packages/twenty-server/src/modules/dashboard/chart-data/services/line-chart-data.service.ts +++ b/packages/twenty-server/src/modules/dashboard/chart-data/services/line-chart-data.service.ts @@ -295,7 +295,7 @@ export class LineChartDataService { const series = [ { - id: `${seriesIdPrefix}${aggregateField.name}`, + key: `${seriesIdPrefix}${aggregateField.name}`, label: aggregateField.label, data: dataPoints, }, @@ -480,7 +480,7 @@ export class LineChartDataService { } return { - id: prefixedSeriesId, + key: prefixedSeriesId, label: seriesId, data: dataPoints, }; diff --git a/packages/twenty-server/src/modules/dashboard/chart-data/services/pie-chart-data.service.ts b/packages/twenty-server/src/modules/dashboard/chart-data/services/pie-chart-data.service.ts index f5eef90654..9ea4984ee4 100644 --- a/packages/twenty-server/src/modules/dashboard/chart-data/services/pie-chart-data.service.ts +++ b/packages/twenty-server/src/modules/dashboard/chart-data/services/pie-chart-data.service.ts @@ -203,7 +203,7 @@ export class PieChartDataService { : null; return { - id: point.formattedValue, + key: point.formattedValue, value: point.aggregateValue, rawValue: rawValueString, }; @@ -214,7 +214,7 @@ export class PieChartDataService { orderBy: configuration.orderBy, manualSortOrder: configuration.manualSortOrder, formattedToRawLookup, - getFieldValue: (item) => item.id, + getFieldValue: (item) => item.key, getNumericValue: (item) => item.value, selectFieldOptions: selectOptions, fieldType: groupByField.type,