Skip to content

Conversation

@maggie-li-yd
Copy link
Collaborator

@maggie-li-yd maggie-li-yd commented Jan 20, 2026

  1. Adjust chart area to make the axes fit
  2. Add formatting for large numbers in axis labels (10K, 1M)
Screenshot 2026-01-26 at 5 34 14 PM

Merge Checklist

Please cross check this list if additions / modifications needs to be done on top of your core changes and tick them off. Reviewer can as well glance through and help the developer if something is missed out.

  • Automated Tests (Jasmine integration tests, Unit tests, and/or Performance tests)
  • Updated Manual tests / Demo Config
  • Documentation (Application guide, Admin guide, Markdown, Readme and/or Wiki)
  • Verified that local development environment is working with latest changes (integrated with latest develop branch)
  • following best practices in code review doc

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR enhances chart axis formatting capabilities by allowing dynamic number formatting functions. The changes enable better display of large numbers on chart axes by abbreviating them (e.g., "10K", "1.5M") while maintaining flexibility for custom formatting logic.

Changes:

  • Extended yAxisFormat type to accept either a string or a formatting function
  • Added formatLargeNumber utility function to abbreviate large numbers with K/M/B suffixes
  • Applied the new formatter to the ObservationPeriodObservedByMonthChart component
  • Removed hardcoded grid positioning in LineChart to improve automatic layout

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File Description
ui/apps/portal/src/plugins/SystemAdmin/DQD/types.ts Extended LineChartFormatConfig to support function-based yAxisFormat
ui/apps/portal/src/components/Charts/util.ts Updated getAxisNameGap to handle function formatters and added formatLargeNumber utility
ui/apps/portal/src/components/Charts/SourceKeys/ObservationPeriod/ObservationPeriodObservedByMonthChart/ObservationPeriodObservedByMonthChart.tsx Applied formatLargeNumber to y-axis formatting
ui/apps/portal/src/components/Charts/Common/LineChart.tsx Removed hardcoded left/bottom grid values, relying on containLabel

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 3 comments.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@maggie-li-yd maggie-li-yd force-pushed the maggie-li-yd/1484-data-characterisation-chart-optimisation branch from e6d89ce to abcf991 Compare January 26, 2026 09:35
@maggie-li-yd maggie-li-yd force-pushed the maggie-li-yd/1484-data-characterisation-chart-optimisation branch from abcf991 to 08ad532 Compare January 27, 2026 01:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Data characterisation axis display optimisation

3 participants