[Dashboards] new line area colors

[ehconitin]

before -

CleanShot.2025-12-03.at.16.17.28.mp4

after -

CleanShot.2025-12-03.at.16.15.33.mp4

[greptile-apps]

Greptile Overview

Greptile Summary

This PR refactors the dashboard line chart area fill rendering system by replacing Nivo's built-in gradient implementation with a custom area layer implementation. The key changes include removing the gradient property from GraphColorScheme type and color registry, replacing it with opacity-based gradients that use a starting opacity of 0.14 and fade to 0. The refactor introduces new utility functions (createAreaFillDef, computeLineAreaPath), custom components (CustomStackedAreasLayer, LineAreaGradientDefs, LineAnimatedAreaPath), and constants for consistent opacity values. The implementation moves from pre-defined gradient color pairs to dynamic gradient generation using solid colors with varying opacity levels, providing better control over visual styling and animations through d3-shape and react-spring integration.

Important Files Changed

Filename	Score	Overview
packages/twenty-front/src/modules/page-layout/widgets/graph/types/GraphColorScheme.ts	4/5	Removes gradient property from type definition, simplifying to only include solid color and variations
packages/twenty-front/src/modules/page-layout/widgets/graph/utils/createGraphColorRegistry.ts	4/5	Removes gradient properties from all 25 color schemes in the registry
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/components/CustomStackedAreasLayer.tsx	4/5	Introduces new custom area rendering layer replacing Nivo's built-in area functionality
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/components/GraphWidgetLineChart.tsx	4/5	Refactors to use custom area layer instead of Nivo's built-in area rendering
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/hooks/useLineChartData.ts	4/5	Simplifies hook interface and removes gradient-related logic
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/utils/createAreaFillDef.ts	5/5	Creates new utility for generating opacity-based linear gradients
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/utils/computeLineAreaPath.ts	5/5	Implements custom area path computation using d3-shape
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/components/LineAreaGradientDefs.tsx	5/5	Generates SVG gradient definitions for custom area fills
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/components/LineAnimatedAreaPath.tsx	5/5	Provides animated SVG paths for smooth area fill transitions
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/hooks/useGaugeChartData.ts	2/5	Returns gradientId without creating corresponding gradient definition, creating reference mismatch
packages/twenty-front/src/modules/page-layout/widgets/graph/utils/createGradientDef.ts	3/5	Completely removed utility function that may still be referenced elsewhere
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/components/GraphWidgetGaugeChart.tsx	4/5	Removes gradient rendering functionality from gauge charts

Confidence score: 3/5

• This PR requires careful review due to potential breaking changes from removing core gradient functionality
• Score lowered due to incomplete refactoring in gauge chart components (useGaugeChartData returns gradientId but doesn't create gradient) and complete removal of createGradientDef utility without verifying all references are updated
• Pay close attention to gauge chart files and verify no other components reference the deleted createGradientDef utility

Sequence Diagram

sequenceDiagram
    participant User
    participant GraphWidgetLineChart
    participant useLineChartData
    participant LineAreaGradientDefs
    participant CustomStackedAreasLayer
    participant LineAnimatedAreaPath
    participant ResponsiveLine

    User->>GraphWidgetLineChart: "View dashboard with line chart"
    GraphWidgetLineChart->>useLineChartData: "Process series data with color registry"
    useLineChartData->>useLineChartData: "Generate enriched series with areaFillId"
    useLineChartData-->>GraphWidgetLineChart: "Return enriched series, colors, legend items"
    
    GraphWidgetLineChart->>ResponsiveLine: "Render with custom layers"
    ResponsiveLine->>CustomStackedAreasLayer: "Render area layer"
    CustomStackedAreasLayer->>LineAreaGradientDefs: "Generate gradient definitions"
    LineAreaGradientDefs->>LineAreaGradientDefs: "Create linear gradients with opacity"
    LineAreaGradientDefs-->>CustomStackedAreasLayer: "Return gradient defs"
    
    CustomStackedAreasLayer->>LineAnimatedAreaPath: "Render animated area paths"
    LineAnimatedAreaPath->>LineAnimatedAreaPath: "Apply gradient fill with fillId"
    LineAnimatedAreaPath-->>CustomStackedAreasLayer: "Return animated path"
    CustomStackedAreasLayer-->>ResponsiveLine: "Return complete area layer"
    ResponsiveLine-->>GraphWidgetLineChart: "Return rendered chart"
    GraphWidgetLineChart-->>User: "Display chart with improved gradients"

Loading

[greptile-apps]

Additional Comments (1)

1. packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/hooks/useGaugeChartData.ts, line 11 (link)

   style: isHovered is still defined in the type but no longer destructured or used in the implementation. Remove from type definition.

_{20 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[github-actions]

🚀 Preview Environment Ready!

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

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

[ehconitin]

@greptileai trigger

[greptile-apps]

Additional Comments (1)

1. packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/hooks/useGaugeChartHandlers.ts

   logic: The useGaugeChartHandlers hook has been completely removed. This may break components that were using isHovered, setIsHovered, handleClick, or hasClickableItems from this hook. Are you certain that no other components are importing and using this hook's functionality?

_{22 files reviewed, 6 comments}

_{Edit Code Review Agent Settings | Greptile}

[bosiraphael]

LGTM

[twenty-eng-sync]

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

[github-actions]

Thanks @ehconitin for your contribution!
This marks your 265th PR on the repo. You're top 1% of all our contributors 🎉
See contributor page - Share on LinkedIn - Share on Twitter