feat(charts): add MetricTile by nbozidarevic · Pull Request #10043 · meta/astryx

nbozidarevic · 2026-11-05T04:57:04Z

Split from #8860 so each chart ships separately.

MetricTile: a KPI tile with sentiment-aware delta and a trend slot (pair with Sparkline via trend).

Stories: MetricTile. Note: the MetricTile suite crashes its vitest worker at import on my dev box, identically on the clean tree (environment issue) — leaving verification to CI.

Still pending (as on the bundle): governing specs and spec-owner approval (including whether MetricTile should come from promoting the lab Stat component instead), design review, and a ci:run label for CI. Merging will also want a look at the adjacent index.ts export lines the sibling chart PRs add.

vercel · 2026-11-05T04:57:09Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
astryx	Ready	Preview	Nov 7, 2026 4:14am UTC

astracat-bot · 2026-11-05T04:58:03Z

AI review status for this pull request.

Review status	Updated
❓ Needs maintainer input (for maintainers only)	Nov 7, 2026, 4:22 AM UTC

github-actions · 2026-11-05T04:59:02Z

PR Analysis Report

🔎 Preview · `8f11f7f`

This branch's preview address cannot be known in advance; open it from Vercel's comment.

Current run: The current CI run concluded failure. Current analysis is unavailable.

_{Generated by PR Enrichment workflow | View current CI run}

astracat-bot

Outcome: approval waits on an engineering owner's spec decision, and the fixes below are needed either way.

No current spec governs MetricTile. An engineering owner needs to provide or identify its governing record and settle four things: whether it ships as a new component or comes from promoting Lab Stat; its public names (MetricTile, trend, sentiment, size); the default delta colours and the sentiment override; and the screen-reader strings. An engineering owner records that decision by commenting /approve-spec <full head SHA> on this pull request, and the author may do so if they are an engineering owner.

Required fixes:

MetricTile.stories.tsx imports Sparkline from @astryxdesign/charts, which does not export it, so all three MetricTile stories fail to load and the typecheck fails; render the trend slot without Sparkline or stack this change on the Sparkline pull request.
The doc example in MetricTile.doc.mjs and the JSDoc example in MetricTile.tsx import the same missing Sparkline, so code copied from them does not compile.
.changeset/charts-metrictile.md fails pnpm check:changesets (the charts package is private, minor does not match [feat] while 0.x, and the body has no @contributor line); remove it, since the core changeset already covers the new strings.
MetricTile emits the theme target astryx-metric-tile with a size axis, but MetricTile.doc.mjs declares no theming.targets, which the component theming-surface architecture treats as a defect; add the target metadata or drop themeProps.
MetricTile.tsx repeats Lab Stat line for line, so a fix to one (like the translated strings added here) misses the other; keep one implementation by promoting Stat under the name the owners choose.

CI has not run on this head yet: a maintainer adds the ci:run label so it runs.

[Automated review]

nbozidarevic · 2026-11-05T16:34:25Z

Sweep update: addressed the actionable threads in b9f7181 (rebased on current main) — bad changeset deleted, trend slot now renders with the shipped Chart + line() mark in the story, doc example, and JSDoc example, and theming.targets declared for astryx-metric-tile. Those four threads are marked resolved.

One thread left open deliberately: the Lab Stat overlap. Whether MetricTile ships as a new component or comes from promoting Stat (and under which name) is part of the pending spec decision, so consolidating the two implementations now would pre-empt it. MetricTile stays self-contained until an engineering owner records that decision.

astracat-bot

Outcome: approval waits on an engineering owner's spec decision, and the fixes below are needed either way.

No current spec governs MetricTile, so an engineering owner needs to provide or identify its governing record and settle whether it ships as a new component or comes from promoting Lab Stat, its public names (MetricTile, trend, sentiment, size and the astryx-metric-tile theme target), the default delta colours with the sentiment override, and the screen-reader strings. An engineering owner records that decision by commenting /approve-spec <full head SHA> on this pull request, and the author may do so if they are an engineering owner.

Required fixes:

The trend example in MetricTile.stories.tsx, MetricTile.doc.mjs and the MetricTile.tsx JSDoc renders no line, because Chart at height={48} keeps its default 24 px top and 32 px bottom margins and leaves a 0 px plot; pass a small margin (for example {top: 4, right: 0, bottom: 4, left: 0}) and decide whether the tile should show the visible title heading.
astryx-metric-tile is the first theme target in @astryxdesign/charts, but the consistency guard in packages/core/src/theme/themingTargets.test.ts still scans only core, Lab and richtext; enrol packages/charts/src in it, as the theming-surface architecture requires when a package starts participating.
MetricTile.tsx repeats Lab Stat line for line while Lab Stat still hard-codes English (trending up); once an owner rules, keep one implementation by promoting Stat or by removing it the way Chart moved to charts.
Miss: the doc prose and source comments still describe the trend slot as "for a Sparkline" (MetricTile.doc.mjs:25, :90, :124; MetricTile.tsx:7, :176, :187), which no package exports; describe it as a small trend chart, such as a Chart with one line mark.

CI has not run on this head yet: a maintainer adds the ci:run label so it runs.

[Automated review]

nbozidarevic · 2026-11-05T18:20:04Z

Paused: per the discussion in #8860, new chart components need approved specs before they can land, and the chart API questions are still open. Leaving this PR open as-is (not closing) until its spec exists; no further iteration planned meanwhile.

astracat-bot

Outcome: approval waits on an engineering owner's spec decision, and the fixes below are needed either way.

No current spec governs MetricTile, so an engineering owner needs to provide or identify its governing record and settle whether it ships as a new component or comes from promoting Lab Stat, its public names (MetricTile, trend, sentiment, size and the astryx-metric-tile theme target), the default delta colours with the sentiment override, and the screen-reader strings. An engineering owner records that decision by commenting /approve-spec <full head SHA> on this pull request, and the author may do so if they are an engineering owner.

Required fixes:

The trend examples in MetricTile.doc.mjs and the MetricTile.tsx JSDoc still give Chart height={48} with its default margin, which leaves a 0 px plot and no line; pass the story's margin={{top: 4, right: 0, bottom: 4, left: 0}} in both.
Miss: apps/storybook/rtl-audit/verified-not-applicable.json says MetricTile owns no inline-axis order, but its delta swaps sides with the value under RTL, the pair Lab Stat is audited for, so replace the entry with a D2 layout-order target in targets.json and update the coverage test.
MetricTile.tsx repeats Lab Stat line for line while Lab Stat still hard-codes English (trending up); once an owner rules, keep one implementation by promoting Stat or by removing it the way Chart moved to charts.

CI has not run on this head yet: a maintainer adds the ci:run label so it runs.

[Automated review]

astracat-bot

Outcome: approval waits on an engineering owner's spec decision, and one fix is needed either way.

No current spec governs MetricTile, so an engineering owner needs to provide or identify its governing record and settle whether it ships as a new component or comes from promoting Lab Stat, its public names (MetricTile, trend, sentiment, size and the astryx-metric-tile theme target), the default delta colours with the sentiment override, and the screen-reader strings. An engineering owner records that decision by commenting /approve-spec <full head SHA> on this pull request, and the author may do so if they are an engineering owner.

Required fix:

MetricTile.tsx repeats Lab Stat line for line while Stat still hard-codes English (trending up), so once an owner rules, keep one implementation by promoting Stat under the chosen name or by removing it from Lab the way Chart moved to charts.

CI has not run on this head yet: a maintainer adds the ci:run label so it runs.

[Automated review]

KPI tile with sentiment-aware delta and a trend slot. Split from the charts bundle so each chart ships separately.

Delete the private-package changeset. Render the trend slot with the shipped Chart and line mark instead of the unlanded Sparkline in the story, doc example, and JSDoc example. Declare the astryx-metric-tile theme target in the component doc. Register MetricTile in the CLI official-packages bundle and the pinned component lists, and classify it for the RTL audit.

Give the story trend chart a small margin so the line is not clipped at 48px height, describe the trend slot as a small trend chart instead of the not-yet-existing Sparkline, and enrol packages/charts in the theming-targets guard with a ChartSwatchImpl variant exception.

Problem: four review threads were left open on the MetricTile change, and the branch had drifted from main (theming guard conflict). Fix: pass the story's small Chart margin in the doc and JSDoc trend examples so the 48px-tall plot draws; replace the MetricTile verified-not-applicable entry with a measured D2 RTL target on the inverted-delta story and update the audit coverage fixture; rebase onto current main, keeping main's theming guard text and dropping the now stale Code.size exception the rebase surfaced. The Lab Stat duplication thread is intentionally left for the spec owner, with no code change. Testing: vitest MetricTile (12 passed), themingTargets (459 passed), rtl-audit-coverage (81 passed); RTL target sort check; eslint clean on touched sources.

astracat-bot

Outcome: approval waits on an engineering owner's spec decision, and one fix is needed either way.

No current spec governs MetricTile. An engineering owner needs to provide or identify its governing record and settle whether it ships as a new component or comes from promoting Lab Stat, its public names (MetricTile, trend, sentiment, size and the astryx-metric-tile theme target), the default delta colours with the sentiment override, and the screen-reader strings. An engineering owner records that decision by commenting /approve-spec <full head SHA> on this pull request, and the author may do so if they are an engineering owner.

Required fix:

MetricTile.tsx repeats Lab Stat line for line while Stat still hard-codes English (trending up), so once an owner rules, keep one implementation by promoting Stat under the chosen name or by removing it from Lab the way Chart moved to charts.

CI has not run on this head yet: a maintainer adds the ci:run label so it runs.

[Automated review]

nbozidarevic requested review from cixzhang, imdreamrunner and josephfarina as code owners November 5, 2026 04:57

nbozidarevic mentioned this pull request Nov 5, 2026

feat(charts): add AreaChart, LineChart, Sparkline, MetricTile #8860

Closed

4 tasks done

github-actions Bot added community Authored by a community contributor (not on the eng/design team) needs:code-review High-risk change (new package/component/API) — needs human code review before merge needs:design-review Affects visuals — Design should review labels Nov 5, 2026

github-actions Bot requested review from cvkxx, ernestt, kentonquatman and rubyycheung November 5, 2026 04:57

meta-cla Bot added the CLA Signed This label is managed by the Meta Open Source bot. label Nov 5, 2026

vercel Bot had a problem deploying to Preview November 5, 2026 05:01 Failure

astracat-bot Bot reviewed Nov 5, 2026

View reviewed changes

nbozidarevic force-pushed the feat/charts-metrictile branch from 8549ff7 to b9f7181 Compare November 5, 2026 16:34

vercel Bot deployed to Preview November 5, 2026 16:40

View deployment

astracat-bot Bot reviewed Nov 5, 2026

View reviewed changes

Comment thread apps/storybook/stories/charts/MetricTile.stories.tsx Resolved

Comment thread packages/charts/src/MetricTile.doc.mjs Resolved

Comment thread packages/charts/src/MetricTile.tsx Resolved

nbozidarevic force-pushed the feat/charts-metrictile branch from b9f7181 to f93c8f1 Compare November 6, 2026 04:26

vercel Bot deployed to Preview November 6, 2026 04:33

View deployment

astracat-bot Bot reviewed Nov 6, 2026

View reviewed changes

Comment thread packages/charts/src/MetricTile.doc.mjs Resolved

Comment thread packages/charts/src/MetricTile.tsx Resolved

Comment thread apps/storybook/rtl-audit/verified-not-applicable.json Resolved

nbozidarevic force-pushed the feat/charts-metrictile branch from f93c8f1 to b7382a8 Compare November 6, 2026 16:12

vercel Bot deployed to Preview November 6, 2026 16:23

View deployment

astracat-bot Bot reviewed Nov 6, 2026

View reviewed changes

nbozidarevic added 2 commits November 6, 2026 20:04

feat(charts): add MetricTile

b23d55c

KPI tile with sentiment-aware delta and a trend slot. Split from the charts bundle so each chart ships separately.

nbozidarevic and others added 2 commits November 6, 2026 20:04

nbozidarevic force-pushed the feat/charts-metrictile branch from b7382a8 to 8f11f7f Compare November 7, 2026 04:07

vercel Bot deployed to Preview November 7, 2026 04:14

View deployment

astracat-bot Bot reviewed Nov 7, 2026

View reviewed changes

Conversation

nbozidarevic commented Nov 5, 2026

Uh oh!

vercel Bot commented Nov 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

astracat-bot Bot commented Nov 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Nov 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Analysis Report

🔎 Preview · 8f11f7f

Uh oh!

astracat-bot Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nbozidarevic commented Nov 5, 2026

Uh oh!

astracat-bot Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nbozidarevic commented Nov 5, 2026

Uh oh!

astracat-bot Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

astracat-bot Bot left a comment

Choose a reason for hiding this comment

Uh oh!

astracat-bot Bot left a comment

Choose a reason for hiding this comment

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

vercel Bot commented Nov 5, 2026 •

edited

Loading

astracat-bot Bot commented Nov 5, 2026 •

edited

Loading

github-actions Bot commented Nov 5, 2026 •

edited

Loading

🔎 Preview · `8f11f7f`