[DASHBOARDS] Add prefix and suffix setting to the aggregate chart

[bosiraphael]

CleanShot.2025-12-01.at.15.48.55.mp4

[greptile-apps]

Greptile Overview

Greptile Summary

Added prefix and suffix configuration options to aggregate chart widgets, allowing users to display units or symbols alongside metric values (e.g., "$1000" or "500 units").

Key changes:

• Added prefix and suffix optional string fields to backend DTO and GraphQL schema
• Created new CommandMenuItemTextInput component for text input in settings UI
• Renamed isInput to isNumberInput and added isTextInput property to support different input types
• Implemented text input handling via useUpdateChartSettingTextInput hook
• Updated aggregate chart display to concatenate prefix, value, and suffix in GraphWidgetAggregateChart
• Added IconCaretLeft and IconCaretRight exports for prefix/suffix icons

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The implementation follows established patterns in the codebase, properly validates inputs, maintains type safety, and includes test updates. The changes are well-structured and isolated to the aggregate chart feature.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
packages/twenty-server/src/engine/core-modules/page-layout/dtos/aggregate-chart-configuration.dto.ts	5/5	Added optional prefix and suffix string fields to DTO with proper validation
packages/twenty-front/src/modules/command-menu/components/CommandMenuItemTextInput.tsx	5/5	New component for text input in command menu with draft state management
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetAggregateChart/components/GraphWidgetAggregateChart.tsx	5/5	Updated to accept and display prefix and suffix props in display value
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetAggregateChart/components/GraphWidgetAggregateChartRenderer.tsx	5/5	Passes prefix and suffix from configuration to chart component, converting null to undefined
packages/twenty-front/src/modules/command-menu/pages/page-layout/types/ChartSettingsGroup.ts	5/5	Renamed isInput to isNumberInput and added isTextInput property

Sequence Diagram

sequenceDiagram
    participant User
    participant ChartSettings
    participant CommandMenuItemTextInput
    participant useUpdateChartSettingTextInput
    participant useUpdateCurrentWidgetConfig
    participant GraphWidgetAggregateChartRenderer
    participant GraphWidgetAggregateChart
    
    User->>ChartSettings: Enter prefix/suffix in settings UI
    ChartSettings->>CommandMenuItemTextInput: User types in text input
    CommandMenuItemTextInput->>CommandMenuItemTextInput: Update draft state
    User->>CommandMenuItemTextInput: Blur or press Enter/Escape
    CommandMenuItemTextInput->>ChartSettings: onChange(draftValue)
    ChartSettings->>useUpdateChartSettingTextInput: updateChartSettingTextInput(settingId, value)
    useUpdateChartSettingTextInput->>useUpdateChartSettingTextInput: Map settingId to config key
    useUpdateChartSettingTextInput->>useUpdateCurrentWidgetConfig: Update widget config
    useUpdateCurrentWidgetConfig->>useUpdateCurrentWidgetConfig: Save to backend
    
    Note over GraphWidgetAggregateChartRenderer: Widget re-renders with new config
    
    GraphWidgetAggregateChartRenderer->>GraphWidgetAggregateChartRenderer: Extract prefix/suffix from configuration
    GraphWidgetAggregateChartRenderer->>GraphWidgetAggregateChart: Pass prefix and suffix props
    GraphWidgetAggregateChart->>GraphWidgetAggregateChart: Format displayValue = prefix + value + suffix
    GraphWidgetAggregateChart->>User: Display formatted aggregate value

Loading

[greptile-apps]

_{21 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[charlesBochet]

Left minor comments

[github-actions]

🚀 Preview Environment Ready!

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

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

[twenty-eng-sync]

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