Fix horizontal bar chart spacing between ticks

[bosiraphael]

This PR fixes a bug where the spacing between ticks on the Y axis was adjusted according to the width of the widget where it should have been adjusted according to the height. Same for the X axis.

Before:
Works for the vertical layout but not for the horizontal layout

CleanShot.2025-11-07.at.14.46.21.mp4

After:
Works for both

CleanShot.2025-11-07.at.14.44.49.mp4

[greptile-apps]

Greptile Overview

Greptile Summary

Fixed horizontal bar chart tick spacing by using the correct axis dimensions for calculations. Previously, both vertical and horizontal layouts incorrectly used width for Y-axis tick spacing calculations.

Key Changes:

• Extracted constants BAR_CHART_MINIMUM_WIDTH_PER_TICK and BAR_CHART_MIN_TICK_SPACING_HEIGHT_RATIO to dedicated files for better maintainability
• Created new utility functions (calculateWidthPerTick, calculateMaxTickLabelLength, computeMinHeightPerTick) to handle layout-specific calculations
• Fixed computeBarChartCategoryTickValues to use width for vertical layout and height for horizontal layout (previously always used width)
• Fixed computeBarChartValueTickCount to use height for vertical layout and width for horizontal layout (previously always used height)
• Introduced getBarChartTickConfig to centralize tick configuration logic and reduce complexity in getBarChartAxisConfigs
• Extracted COMMON_AXIS_CONFIG constant in getBarChartAxisConfigs to reduce duplication

Impact:
This refactoring improves code organization and fixes the core bug where horizontal bar charts had incorrect tick spacing. The new architecture is more maintainable with clear separation of concerns.

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The changes are well-structured with clear separation of concerns. The bug fix correctly addresses the axis dimension mismatch, and the refactoring improves maintainability by extracting constants and utility functions. The logic is straightforward and the layout-specific conditionals are properly implemented. No breaking changes or edge cases were identified.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/computeBarChartCategoryTickValues.ts	5/5	Fixed to use correct axis dimension (width for vertical, height for horizontal)
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/computeBarChartValueTickCount.ts	5/5	Fixed to use correct axis dimension and spacing calculation for both layouts
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartTickConfig.ts	5/5	New utility that centralizes tick configuration logic for both vertical and horizontal layouts

Sequence Diagram

sequenceDiagram
    participant Component as GraphWidgetBarChart
    participant AxisConfig as getBarChartAxisConfigs
    participant TickConfig as getBarChartTickConfig
    participant CategoryTicks as computeBarChartCategoryTickValues
    participant ValueTicks as computeBarChartValueTickCount
    participant WidthCalc as calculateWidthPerTick
    participant LabelCalc as calculateMaxTickLabelLength

    Component->>AxisConfig: width, height, layout, data
    AxisConfig->>TickConfig: width, height, layout, axisFontSize
    
    alt Layout === 'vertical'
        TickConfig->>CategoryTicks: axisSize=width, layout
        CategoryTicks->>CategoryTicks: Use BAR_CHART_MINIMUM_WIDTH_PER_TICK
        TickConfig->>ValueTicks: axisSize=availableHeight, layout
        ValueTicks->>ValueTicks: Use computeMinHeightPerTick
    else Layout === 'horizontal'
        TickConfig->>CategoryTicks: axisSize=height, layout
        CategoryTicks->>CategoryTicks: Use computeMinHeightPerTick
        TickConfig->>ValueTicks: axisSize=availableWidth, layout
        ValueTicks->>ValueTicks: Use BAR_CHART_MINIMUM_WIDTH_PER_TICK
    end
    
    CategoryTicks-->>TickConfig: categoryTickValues[]
    ValueTicks-->>TickConfig: numberOfValueTicks
    
    TickConfig->>WidthCalc: layout, availableWidth, categoryTickCount, valueTickCount
    alt Layout === 'vertical'
        WidthCalc->>WidthCalc: availableWidth / categoryTickCount
    else Layout === 'horizontal'
        WidthCalc->>WidthCalc: availableWidth / valueTickCount
    end
    WidthCalc-->>TickConfig: widthPerTick
    
    TickConfig->>LabelCalc: widthPerTick, axisFontSize
    LabelCalc-->>TickConfig: maxBottomAxisTickLabelLength
    
    TickConfig-->>AxisConfig: tick configuration
    AxisConfig-->>Component: axisBottom & axisLeft configs

Loading

_{9 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[github-actions]

🚀 Preview Environment Ready!

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

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

[lucasbordeau]

LGTM