Skip to content

fix(ui): stack failed series below completed in throughput charts#49

Open
omarzeineddine-ai wants to merge 1 commit into
pontusab:mainfrom
omarzeineddine-ai:fix/throughput-chart-stack-order
Open

fix(ui): stack failed series below completed in throughput charts#49
omarzeineddine-ai wants to merge 1 commit into
pontusab:mainfrom
omarzeineddine-ai:fix/throughput-chart-stack-order

Conversation

@omarzeineddine-ai

Copy link
Copy Markdown

Problem

Closes #30

Both throughput charts (queue metrics page and the fleet overview chart) render the failed <Area> after completed within the same stackId. Recharts stacks in child order, so failed sits on top of the stack — and with zero failures its red stroke traces exactly along the top edge of the green completed area. The chart reads as all-errors when there are none.

Solution

Render failed first so it stacks at the bottom:

  • 0 failed + N completed → a flat red line on the x-axis with the green completed area on top (the exact behavior requested in the issue).
  • With failures present, the red band sits at the base and the top boundary of the stack is green (total throughput), which also reads correctly.

Applied to both occurrences of the pattern: packages/core/src/ui/components/metrics/throughput-chart.tsx and packages/core/src/ui/pages/metrics.tsx.

Note: legend/tooltip entries now list Failed before Completed, following the new series order.

Verification

Reproduced against a local dashboard seeded with 60 completed / 0 failed jobs and confirmed the rebuilt UI bundle emits the failed series before completed for both charts. vite/tsup build and tsc --noEmit pass. (biome check has a pre-existing formatting failure on main in an untouched section of metrics.tsx.)

Both throughput charts stacked the failed Area on top of completed, so
with zero failures the red stroke traced the exact top of the green
area and the chart read as all-errors. Rendering failed first puts it
at the bottom of the stack: zero failures now draw as a flat red line
on the axis, with the completed area on top.

Closes pontusab#30
@vercel

vercel Bot commented Jul 14, 2026

Copy link
Copy Markdown

@omarzeineddine-ai is attempting to deploy a commit to the Pontus Abrahamsson's projects Team on Vercel.

A member of the Team first needs to authorize it.

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.

Graph is stacked with error on top

1 participant