Augment chart limits and improve padding on bar chart

[bosiraphael]

• Maximum from 50 to 100
• Reduce padding
• Make inner padding dynamic

[greptile-apps]

Greptile Overview

Greptile Summary

Increased chart capacity limits from 50 to 100 items across all chart types (bar, line, pie) and improved bar chart spacing by reducing outer padding from 0.3 to 0.05 and implementing dynamic inner padding calculation that adapts to available space.

Key Changes

• Chart limits doubled from 50 to 100 for better data visualization capacity
• Outer padding reduced from 0.3 to 0.05 (83% reduction) for more efficient space usage
• Dynamic inner padding system prevents bars from becoming too narrow when space is limited
• Consistent limit increase across bar charts, line charts, and pie charts

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The changes are straightforward constant updates and a well-designed dynamic padding calculation. The logic in getBarChartInnerPadding is sound with proper edge case handling. All changes improve UX without introducing breaking changes or security concerns.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx	5/5	Updated to use dynamic inner padding calculation and reduced outer padding from 0.3 to 0.05
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMaximumNumberOfBars.constant.ts	5/5	Increased maximum bars from 50 to 100
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartInnerPadding.ts	5/5	New utility function that dynamically calculates inner padding based on available space and bar count

Sequence Diagram

sequenceDiagram
    participant User
    participant GraphWidgetBarChart
    participant NodeDimensionEffect
    participant getBarChartInnerPadding
    participant ResponsiveBar

    User->>GraphWidgetBarChart: Render chart with data
    GraphWidgetBarChart->>NodeDimensionEffect: Monitor container dimensions
    NodeDimensionEffect-->>GraphWidgetBarChart: Return width & height
    
    GraphWidgetBarChart->>getBarChartInnerPadding: Calculate padding
    Note over getBarChartInnerPadding: Parameters:<br/>chartWidth, chartHeight<br/>dataLength, keysLength<br/>layout, margins, groupMode
    
    alt groupMode !== 'grouped'
        getBarChartInnerPadding-->>GraphWidgetBarChart: Return 0
    else dataLength === 0 or keysLength === 0
        getBarChartInnerPadding-->>GraphWidgetBarChart: Return DEFAULT (4px)
    else Calculate available space
        getBarChartInnerPadding->>getBarChartInnerPadding: availableSpace = dimension - margins
        getBarChartInnerPadding->>getBarChartInnerPadding: spacePerGroup = availableSpace / dataLength * 0.95
        getBarChartInnerPadding->>getBarChartInnerPadding: spacePerBar = spacePerGroup / keysLength
        
        alt spacePerBar < MINIMUM_BAR_WIDTH + DEFAULT_PADDING
            Note over getBarChartInnerPadding: Bars would be too narrow<br/>Reduce padding dynamically
            getBarChartInnerPadding-->>GraphWidgetBarChart: Return max(0, (spacePerBar - 2) / 2)
        else Sufficient space
            getBarChartInnerPadding-->>GraphWidgetBarChart: Return DEFAULT (4px)
        end
    end
    
    GraphWidgetBarChart->>ResponsiveBar: Render with calculated padding
    ResponsiveBar-->>User: Display chart with optimal spacing

Loading

[greptile-apps]

_{8 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[github-actions]

🚀 Preview Environment Ready!

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

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

[Weiko]

LGTM

[twenty-eng-sync]

Hey @bosiraphael! After you've done the QA of your Pull Request, you can mark it as done here. Thank you!