Split bar graph into two distinct horizontal and vertical bars #15061

ehconitin · 2025-10-13T12:52:28Z

Summary

Split BAR into VERTICAL_BAR and HORIZONTAL_BAR as separate chart types.

The Problem

Initially wanted a simple vertical/horizontal toggle for bar charts, but ran into a GraphQL union type
constraint: union types can't have the same field name with different nullability.

Vertical bars need groupByFieldMetadataIdX as required (categories on X)
Horizontal bars need groupByFieldMetadataIdY as required (categories on Y)
GraphQL schema generation fails with this setup

The Solution

Use primaryAxis and secondaryAxis naming instead of X/Y:

Vertical: primary = X-axis (categories), secondary = Y-axis (values)
Horizontal: primary = Y-axis (categories), secondary = X-axis (values)

This way both chart types can share the same DTO structure with consistent nullability, and we map
primary/secondary to X/Y based on orientation at runtime.

What Changed

Split GraphType.BAR → VERTICAL_BAR | HORIZONTAL_BAR
Renamed fields: primaryAxisGroupByFieldMetadataId, secondaryAxisGroupByFieldMetadataId (+ subfield
variants)
Created getBarChartAxisFields() to handle primary/secondary → X/Y mapping
Created getBarChartSettings() to dynamically configure the settings panel based on orientation

video QA

2025-10-13.18-31-00.mp4

…bar-config

greptile-apps

Greptile Overview

Greptile Summary

This PR implements a comprehensive refactoring that splits the generic BAR chart type into two distinct chart types: VERTICAL_BAR and HORIZONTAL_BAR. The changes affect the entire chart system architecture, from the GraphQL schema to frontend components and test files.

Key changes include:

GraphType enum update: GraphType.BAR is replaced with GraphType.VERTICAL_BAR and GraphType.HORIZONTAL_BAR
Field naming standardization: Axis-specific field names (groupByFieldMetadataIdX/Y, orderByX/Y) are renamed to semantic primary/secondary axis names (primaryAxisGroup/secondaryAxisGroup, primaryAxisOrderBy/secondaryAxisOrderBy)
New icon component: IconChartBarHorizontal created by rotating the existing bar chart icon 90 degrees
Configuration DTOs updated: Both bar and line chart configurations now use the unified primary/secondary axis terminology
Component updates: Chart selection, dropdown components, and rendering logic updated to handle both orientations
Enhanced data transformation: Chart data transformation functions now include layout information and axis field mapping utilities

The refactoring maintains the same underlying configuration structure for both bar chart types while enabling distinct visual representations and user selection options. Integration tests, Storybook stories, and GraphQL fragments are comprehensively updated to reflect these changes.

Important Files Changed

Changed Files

Filename	Score	Overview
packages/twenty-server/src/engine/core-modules/page-layout/enums/graph-type.enum.ts	4/5	Splits generic BAR enum into VERTICAL_BAR and HORIZONTAL_BAR types
packages/twenty-server/src/engine/core-modules/page-layout/dtos/bar-chart-configuration.dto.ts	4/5	Updates DTO to support both bar chart types with primary/secondary axis naming
packages/twenty-server/src/engine/core-modules/page-layout/dtos/line-chart-configuration.dto.ts	4/5	Renames X/Y axis fields to primary/secondary axis terminology
packages/twenty-front/src/generated/graphql.ts	4/5	Major GraphQL schema changes for chart configurations and GraphType enum
packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/GraphTypeInformation.ts	4/5	Splits BAR entry into separate vertical and horizontal bar configurations
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getBarChartSettings.ts	4/5	Converts static settings to dynamic function handling both bar orientations
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getBarChartAxisFields.ts	4/5	New utility for mapping chart fields to X/Y axes based on orientation
packages/twenty-front/src/modules/page-layout/widgets/graph/utils/transformGroupByDataToBarChartData.ts	4/5	Adds layout support and updates field references for axis mapping
packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidget.tsx	5/5	Simple switch statement update to handle both bar chart types
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartTypeSelectionSection.tsx	4/5	Updates chart type options to include both vertical and horizontal bars
packages/twenty-ui/src/display/icon/components/IconChartBarHorizontal.tsx	4/5	New icon component created by rotating existing bar chart icon 90 degrees
packages/twenty-front/src/modules/page-layout/utils/createDefaultGraphWidget.ts	4/5	Adds HORIZONTAL_BAR case and updates property naming convention
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChartRenderer.tsx	5/5	Adds layout prop extraction and passing to chart component
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/hooks/useGraphBarChartWidgetData.ts	4/5	Adds optional layout property to hook return type
packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useChartSettingsValues.ts	4/5	Refactors to use chart-type-specific field mapping logic

Confidence score: 4/5

This PR represents a significant architectural change that requires careful coordination between frontend and backend, but the implementation appears well-structured and comprehensive
Score reflects the breaking nature of GraphQL schema changes and the complexity of the refactoring, though the changes are consistently applied across the codebase
Pay close attention to the GraphQL schema changes in generated/graphql.ts and DTO files, as these represent breaking changes that will affect API consumers

Sequence Diagram

sequenceDiagram
    participant User
    participant ChartTypeSelectionSection as "ChartTypeSelectionSection"
    participant MenuPicker
    participant GraphTypeInformation as "GRAPH_TYPE_INFORMATION"
    
    User->>ChartTypeSelectionSection: "Selects chart type"
    ChartTypeSelectionSection->>GraphTypeInformation: "Get icon and label for GraphType"
    GraphTypeInformation-->>ChartTypeSelectionSection: "Return icon, label"
    ChartTypeSelectionSection->>MenuPicker: "Render option with icon/label"
    MenuPicker->>ChartTypeSelectionSection: "onClick callback"
    ChartTypeSelectionSection->>User: "setCurrentGraphType(graphType)"

Additional Comments (1)

packages/twenty-front/src/modules/page-layout/graphql/fragments/pageLayoutWidgetFragment.ts, line 19-56 (link)

style: The BarChartConfiguration and LineChartConfiguration fragments now have identical field structures. Consider extracting these shared fields into a reusable fragment to reduce duplication and improve maintainability.

Context used:

Context from dashboard - Use 'type' instead of 'interface' for type definitions in the project. (source)
Context from dashboard - Avoid creating draft pull requests; they are not preferred in our workflow. (source)

_{44 files reviewed, 16 comments}

_{Edit Code Review Agent Settings | Greptile}

packages/twenty-ui/src/display/icon/components/IconChartBarHorizontal.tsx

packages/twenty-server/src/engine/core-modules/page-layout/enums/graph-type.enum.ts

greptile-apps · 2025-10-13T12:54:20Z

packages/twenty-front/src/modules/page-layout/utils/getDefaultWidgetData.ts

+    case GraphType.HORIZONTAL_BAR:
+      return {
+        items: [
+          { category: 'Jan', value: 45 },
+          { category: 'Feb', value: 52 },
+          { category: 'Mar', value: 48 },
+          { category: 'Apr', value: 61 },
+          { category: 'May', value: 55 },
+        ],
+        indexBy: 'category',
+        keys: ['value'],
+        seriesLabels: { value: 'Value' },
+        layout: 'horizontal' as const,
+      };


style: The HORIZONTAL_BAR case uses identical sample data to VERTICAL_BAR. Consider using different sample data to better demonstrate horizontal layout characteristics.

Prompt To Fix With AI

This is a comment left during a code review. Path: packages/twenty-front/src/modules/page-layout/utils/getDefaultWidgetData.ts Line: 44:57 Comment: **style:** The HORIZONTAL_BAR case uses identical sample data to VERTICAL_BAR. Consider using different sample data to better demonstrate horizontal layout characteristics. How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2025-10-13T12:54:20Z

packages/twenty-front/src/modules/page-layout/utils/getDefaultWidgetData.ts

+    case GraphType.VERTICAL_BAR:
+    case GraphType.HORIZONTAL_BAR:
      return { w: 6, h: 6 };


style: Both bar chart types use the same widget size. Consider if horizontal bar charts should have different dimensions for better visual representation.

Prompt To Fix With AI

This is a comment left during a code review. Path: packages/twenty-front/src/modules/page-layout/utils/getDefaultWidgetData.ts Line: 153:155 Comment: **style:** Both bar chart types use the same widget size. Consider if horizontal bar charts should have different dimensions for better visual representation. How can I resolve this? If you propose a fix, please make it concise.

packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getBarChartAxisFields.ts

...u/pages/page-layout/components/dropdown-content/ChartXAxisSortBySelectionDropdownContent.tsx

...ages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useChartSettingsValues.ts

packages/twenty-server/src/engine/core-modules/page-layout/dtos/bar-chart-configuration.dto.ts

github-actions · 2025-10-13T13:04:35Z

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:51261

This environment will automatically shut down when the PR is closed or after 5 hours.

github-actions · 2025-10-13T14:34:12Z

📊 API Changes Report

GraphQL Schema Changes

[log]
Detected the following changes (27) between schemas:

[log] ✖ Field groupByFieldMetadataIdX was removed from object type BarChartConfiguration
[log] ✖ Field groupByFieldMetadataIdY was removed from object type BarChartConfiguration
[log] ✖ Field groupBySubFieldNameX was removed from object type BarChartConfiguration
[log] ✖ Field groupBySubFieldNameY was removed from object type BarChartConfiguration
[log] ✖ Field orderByX was removed from object type BarChartConfiguration
[log] ✖ Field orderByY was removed from object type BarChartConfiguration
[log] ✖ Enum value BAR was removed from enum GraphType
[log] ✖ Field groupByFieldMetadataIdX was removed from object type LineChartConfiguration
[log] ✖ Field groupByFieldMetadataIdY was removed from object type LineChartConfiguration
[log] ✖ Field groupBySubFieldNameX was removed from object type LineChartConfiguration
[log] ✖ Field groupBySubFieldNameY was removed from object type LineChartConfiguration
[log] ✖ Field orderByX was removed from object type LineChartConfiguration
[log] ✖ Field orderByY was removed from object type LineChartConfiguration
[log] ⚠ Enum value HORIZONTAL_BAR was added to enum GraphType
[log] ⚠ Enum value VERTICAL_BAR was added to enum GraphType
[log] ✔ Field primaryAxisGroupByFieldMetadataId was added to object type BarChartConfiguration
[log] ✔ Field primaryAxisGroupBySubFieldName was added to object type BarChartConfiguration
[log] ✔ Field primaryAxisOrderBy was added to object type BarChartConfiguration
[log] ✔ Field secondaryAxisGroupByFieldMetadataId was added to object type BarChartConfiguration
[log] ✔ Field secondaryAxisGroupBySubFieldName was added to object type BarChartConfiguration
[log] ✔ Field secondaryAxisOrderBy was added to object type BarChartConfiguration
[log] ✔ Field primaryAxisGroupByFieldMetadataId was added to object type LineChartConfiguration
[log] ✔ Field primaryAxisGroupBySubFieldName was added to object type LineChartConfiguration
[log] ✔ Field primaryAxisOrderBy was added to object type LineChartConfiguration
[log] ✔ Field secondaryAxisGroupByFieldMetadataId was added to object type LineChartConfiguration
[log] ✔ Field secondaryAxisGroupBySubFieldName was added to object type LineChartConfiguration
[log] ✔ Field secondaryAxisOrderBy was added to object type LineChartConfiguration
[error] Detected 13 breaking changes
⚠️ Breaking changes or errors detected in GraphQL schema

[log] 
Detected the following changes (27) between schemas:

[log] ✖  Field groupByFieldMetadataIdX was removed from object type BarChartConfiguration
[log] ✖  Field groupByFieldMetadataIdY was removed from object type BarChartConfiguration
[log] ✖  Field groupBySubFieldNameX was removed from object type BarChartConfiguration
[log] ✖  Field groupBySubFieldNameY was removed from object type BarChartConfiguration
[log] ✖  Field orderByX was removed from object type BarChartConfiguration
[log] ✖  Field orderByY was removed from object type BarChartConfiguration
[log] ✖  Enum value BAR was removed from enum GraphType
[log] ✖  Field groupByFieldMetadataIdX was removed from object type LineChartConfiguration
[log] ✖  Field groupByFieldMetadataIdY was removed from object type LineChartConfiguration
[log] ✖  Field groupBySubFieldNameX was removed from object type LineChartConfiguration
[log] ✖  Field groupBySubFieldNameY was removed from object type LineChartConfiguration
[log] ✖  Field orderByX was removed from object type LineChartConfiguration
[log] ✖  Field orderByY was removed from object type LineChartConfiguration
[log] ⚠  Enum value HORIZONTAL_BAR was added to enum GraphType
[log] ⚠  Enum value VERTICAL_BAR was added to enum GraphType
[log] ✔  Field primaryAxisGroupByFieldMetadataId was added to object type BarChartConfiguration
[log] ✔  Field primaryAxisGroupBySubFieldName was added to object type BarChartConfiguration
[log] ✔  Field primaryAxisOrderBy was added to object type BarChartConfiguration
[log] ✔  Field secondaryAxisGroupByFieldMetadataId was added to object type BarChartConfiguration
[log] ✔  Field secondaryAxisGroupBySubFieldName was added to object type BarChartConfiguration
[log] ✔  Field secondaryAxisOrderBy was added to object type BarChartConfiguration
[log] ✔  Field primaryAxisGroupByFieldMetadataId was added to object type LineChartConfiguration
[log] ✔  Field primaryAxisGroupBySubFieldName was added to object type LineChartConfiguration
[log] ✔  Field primaryAxisOrderBy was added to object type LineChartConfiguration
[log] ✔  Field secondaryAxisGroupByFieldMetadataId was added to object type LineChartConfiguration
[log] ✔  Field secondaryAxisGroupBySubFieldName was added to object type LineChartConfiguration
[log] ✔  Field secondaryAxisOrderBy was added to object type LineChartConfiguration
[error] Detected 13 breaking changes
Error generating diff

GraphQL Metadata Schema Changes

[log]
Detected the following changes (27) between schemas:

[log] ✖ Field groupByFieldMetadataIdX was removed from object type BarChartConfiguration
[log] ✖ Field groupByFieldMetadataIdY was removed from object type BarChartConfiguration
[log] ✖ Field groupBySubFieldNameX was removed from object type BarChartConfiguration
[log] ✖ Field groupBySubFieldNameY was removed from object type BarChartConfiguration
[log] ✖ Field orderByX was removed from object type BarChartConfiguration
[log] ✖ Field orderByY was removed from object type BarChartConfiguration
[log] ✖ Enum value BAR was removed from enum GraphType
[log] ✖ Field groupByFieldMetadataIdX was removed from object type LineChartConfiguration
[log] ✖ Field groupByFieldMetadataIdY was removed from object type LineChartConfiguration
[log] ✖ Field groupBySubFieldNameX was removed from object type LineChartConfiguration
[log] ✖ Field groupBySubFieldNameY was removed from object type LineChartConfiguration
[log] ✖ Field orderByX was removed from object type LineChartConfiguration
[log] ✖ Field orderByY was removed from object type LineChartConfiguration
[log] ⚠ Enum value HORIZONTAL_BAR was added to enum GraphType
[log] ⚠ Enum value VERTICAL_BAR was added to enum GraphType
[log] ✔ Field primaryAxisGroupByFieldMetadataId was added to object type BarChartConfiguration
[log] ✔ Field primaryAxisGroupBySubFieldName was added to object type BarChartConfiguration
[log] ✔ Field primaryAxisOrderBy was added to object type BarChartConfiguration
[log] ✔ Field secondaryAxisGroupByFieldMetadataId was added to object type BarChartConfiguration
[log] ✔ Field secondaryAxisGroupBySubFieldName was added to object type BarChartConfiguration
[log] ✔ Field secondaryAxisOrderBy was added to object type BarChartConfiguration
[log] ✔ Field primaryAxisGroupByFieldMetadataId was added to object type LineChartConfiguration
[log] ✔ Field primaryAxisGroupBySubFieldName was added to object type LineChartConfiguration
[log] ✔ Field primaryAxisOrderBy was added to object type LineChartConfiguration
[log] ✔ Field secondaryAxisGroupByFieldMetadataId was added to object type LineChartConfiguration
[log] ✔ Field secondaryAxisGroupBySubFieldName was added to object type LineChartConfiguration
[log] ✔ Field secondaryAxisOrderBy was added to object type LineChartConfiguration
[error] Detected 13 breaking changes
⚠️ Breaking changes or errors detected in GraphQL metadata schema

[log] 
Detected the following changes (27) between schemas:

[log] ✖  Field groupByFieldMetadataIdX was removed from object type BarChartConfiguration
[log] ✖  Field groupByFieldMetadataIdY was removed from object type BarChartConfiguration
[log] ✖  Field groupBySubFieldNameX was removed from object type BarChartConfiguration
[log] ✖  Field groupBySubFieldNameY was removed from object type BarChartConfiguration
[log] ✖  Field orderByX was removed from object type BarChartConfiguration
[log] ✖  Field orderByY was removed from object type BarChartConfiguration
[log] ✖  Enum value BAR was removed from enum GraphType
[log] ✖  Field groupByFieldMetadataIdX was removed from object type LineChartConfiguration
[log] ✖  Field groupByFieldMetadataIdY was removed from object type LineChartConfiguration
[log] ✖  Field groupBySubFieldNameX was removed from object type LineChartConfiguration
[log] ✖  Field groupBySubFieldNameY was removed from object type LineChartConfiguration
[log] ✖  Field orderByX was removed from object type LineChartConfiguration
[log] ✖  Field orderByY was removed from object type LineChartConfiguration
[log] ⚠  Enum value HORIZONTAL_BAR was added to enum GraphType
[log] ⚠  Enum value VERTICAL_BAR was added to enum GraphType
[log] ✔  Field primaryAxisGroupByFieldMetadataId was added to object type BarChartConfiguration
[log] ✔  Field primaryAxisGroupBySubFieldName was added to object type BarChartConfiguration
[log] ✔  Field primaryAxisOrderBy was added to object type BarChartConfiguration
[log] ✔  Field secondaryAxisGroupByFieldMetadataId was added to object type BarChartConfiguration
[log] ✔  Field secondaryAxisGroupBySubFieldName was added to object type BarChartConfiguration
[log] ✔  Field secondaryAxisOrderBy was added to object type BarChartConfiguration
[log] ✔  Field primaryAxisGroupByFieldMetadataId was added to object type LineChartConfiguration
[log] ✔  Field primaryAxisGroupBySubFieldName was added to object type LineChartConfiguration
[log] ✔  Field primaryAxisOrderBy was added to object type LineChartConfiguration
[log] ✔  Field secondaryAxisGroupByFieldMetadataId was added to object type LineChartConfiguration
[log] ✔  Field secondaryAxisGroupBySubFieldName was added to object type LineChartConfiguration
[log] ✔  Field secondaryAxisOrderBy was added to object type LineChartConfiguration
[error] Detected 13 breaking changes
Error generating diff

⚠️ Please review these API changes carefully before merging.

⚠️ Breaking Change Protocol

Breaking changes detected but PR title does not contain "breaking" - CI will pass but action needed.

🔄 Options:

If this IS a breaking change: Add "breaking" to your PR title and add BREAKING CHANGE: to your commit message
If this is NOT a breaking change: The API diff tool may have false positives - please review carefully

For breaking changes, add to commit message:

feat: add new API endpoint

BREAKING CHANGE: removed deprecated field from User schema

ijreilly

review in progress

1/
We need to rework on the axis labels:

2/ Some confusion with X / Y axis:

ehconitin added 10 commits October 12, 2025 00:48

done

ec7509e

Merge remote-tracking branch 'upstream/main' into add-graphLayout-on-…

206c377

…bar-config

rethink

1184ea4

done

708b419

continue

c1f0ce4

continue

6738054

continue

1c7fe8b

continue

cda63f3

continue

226242d

Merge remote-tracking branch 'upstream/main' into add-graphLayout-on-…

7d7a9cd

…bar-config

greptile-apps bot reviewed Oct 13, 2025

View reviewed changes

seer-by-sentry bot reviewed Oct 13, 2025

View reviewed changes

packages/twenty-server/src/engine/core-modules/page-layout/dtos/bar-chart-configuration.dto.ts Show resolved Hide resolved

update integration tests

dd6045e

ehconitin self-assigned this Oct 13, 2025

ehconitin added the -PR: awaiting author label Oct 13, 2025

ehconitin added 4 commits October 13, 2025 19:30

rename

edc8082

continue

c48cc5b

continue

5a6574d

continue

3a7e167

ehconitin added -PR: awaiting review and removed -PR: awaiting author labels Oct 13, 2025

ijreilly reviewed Oct 13, 2025

View reviewed changes

ehconitin added -PR: wip -PR: awaiting author and removed -PR: awaiting review labels Oct 13, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Split bar graph into two distinct horizontal and vertical bars #15061

Split bar graph into two distinct horizontal and vertical bars #15061

ehconitin commented Oct 13, 2025 •

edited

Loading

Uh oh!

greptile-apps bot left a comment •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

greptile-apps bot Oct 13, 2025

Uh oh!

greptile-apps bot Oct 13, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Oct 13, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 13, 2025 •

edited

Loading

Uh oh!

ijreilly left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Split bar graph into two distinct horizontal and vertical bars #15061

Are you sure you want to change the base?

Split bar graph into two distinct horizontal and vertical bars #15061

Conversation

ehconitin commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

The Problem

The Solution

What Changed

Uh oh!

greptile-apps bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Greptile Overview

Greptile Summary

Important Files Changed

Confidence score: 4/5

Sequence Diagram

Additional Comments (1)

Uh oh!

Uh oh!

Uh oh!

greptile-apps bot Oct 13, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Oct 13, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 API Changes Report

GraphQL Schema Changes

GraphQL Schema Changes

GraphQL Metadata Schema Changes

GraphQL Metadata Schema Changes

⚠️ Breaking Change Protocol

Uh oh!

ijreilly left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ehconitin commented Oct 13, 2025 •

edited

Loading

greptile-apps bot left a comment •

edited

Loading

github-actions bot commented Oct 13, 2025 •

edited

Loading

github-actions bot commented Oct 13, 2025 •

edited

Loading