Skip to content

Add value formatting to charts ($, %, units)#1247

Open
ad4mou wants to merge 6 commits into
mainfrom
feat/improve-value-formatting-1115
Open

Add value formatting to charts ($, %, units)#1247
ad4mou wants to merge 6 commits into
mainfrom
feat/improve-value-formatting-1115

Conversation

@ad4mou

@ad4mou ad4mou commented Jul 22, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Chart values can now show a currency symbol, %, or any unit (e.g. V, kg, GB) instead of bare numbers.
  • Format is per series: a number format (d3-format) plus a unit placed before or after, so any currency or unit works, not a fixed list.
  • Big numbers shorten sensibly: money/counts as K/M/B, scientific units (e.g. bytes) keep k/M/G.
  • The admin Usage cost charts now show $.
  • The chart editor lets you set the number format and a unit (with a Prefix/Suffix choice, clearable fields, and a link to the syntax docs).
  • The value axis widens to fit long labels (e.g. $1,000,000) so they no longer clip.
  • Formatting carries through into stories, including exported HTML (labels, KPI cards, tooltips).

Closes #1115

Review in cubic

@github-actions

github-actions Bot commented Jul 22, 2026

Copy link
Copy Markdown
Contributor

🚀 Preview Deployment

URL https://pr-1247-321179e.preview.getnao.io
Commit 321179e

⚠️ No LLM API keys configured - you'll see the API key setup flow when trying to chat.


Preview will be automatically removed when this PR is closed.

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

All reported issues were addressed across 15 files

Reply with feedback, questions, or to request a fix.

Re-trigger cubic

Comment thread apps/frontend/src/components/tool-calls/display-chart.tsx Outdated
Comment thread apps/shared/src/chart-builder.tsx Outdated
Comment thread apps/frontend/src/components/tool-calls/display-chart-edit-dialog.tsx Outdated

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

All reported issues were addressed across 3 files (changes from recent commits).

Reply with feedback, questions, or to request a fix.

Re-trigger cubic

Comment thread apps/frontend/src/components/tool-calls/display-chart-edit-dialog.tsx Outdated
Comment thread apps/frontend/src/components/tool-calls/display-chart-edit-dialog.tsx Outdated

@Bl3f Bl3f left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

small change

: (series.value_format?.suffix ?? '');

return (
<div key={index} className='flex flex-col gap-2 rounded-md'>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Here let's change the display, hide the row by default and only show it when clicked on a "format" icon that would be on the main row of the serie

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Yes that's cleaner, Ok will do!

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.

[bug] Improve value formatting in charts ($/%)

3 participants