feat(muix): implement area-cumulative-flow

[github-actions]

Implementation: area-cumulative-flow - javascript/muix

Implements the javascript/muix version of area-cumulative-flow.

File: plots/area-cumulative-flow/implementations/javascript/muix.tsx

Parent Issue: #5239

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white (#FAF8F1) background. Title "area-cumulative-flow · javascript · muix · anyplot.ai" in dark ink top-left, horizontal legend (Backlog, Analysis, Development, Testing, Done) centered below it, custom rotated "Cumulative Items" Y-axis label and "Date" X-axis label, all dark and clearly readable against the light background, with legible tick labels on both axes. Five bands rise from 0 to ~635 over 90 days: Done (cyan) and Testing (ochre — by far the widest, growing steadily as the intentional bottleneck) dominate the lower two-thirds; Development (blue), Analysis (lavender) and Backlog (green, first series, correct brand green) are thin bands hugging the top boundary. All chrome text is readable.

Dark render (plot-dark.png): Warm near-black (#1A1A17) background, same layout, with all chrome text now light-on-dark and clearly legible — no dark-on-dark failures found. Data colors are confirmed identical to the light render (green/lavender/blue/ochre/cyan unchanged); only background/text/grid flipped.

Both renders pass basic theme-readability. The one issue affecting both equally is that three of the five data bands (Backlog, Analysis, Development) are only a few pixels wide for most of the timeline and become very hard to tell apart at reduced display sizes — confirmed on plot-light_400.png, where they merge into a single indistinguishable line above the Testing band.

Score: 77/100

Category	Score	Max
Visual Quality	24	30
Design Excellence	11	20
Spec Compliance	15	15
Data Quality	9	15
Code Quality	10	10
Library Mastery	8	10
Total	77	100

Visual Quality (24/30)

• VQ-01: Text Legibility (7/8)
• VQ-02: No Overlap (6/6)
• VQ-03: Element Visibility (2/6) - Backlog/Analysis/Development bands are only a few px wide and nearly invisible at gallery/thumbnail scale
• VQ-04: Color Accessibility (1/2) - Extreme thinness of adjacent bands compounds CVD distinguishability risk
• VQ-05: Layout & Canvas (4/4)
• VQ-06: Axis Labels & Title (2/2)
• VQ-07: Palette Compliance (2/2)

Design Excellence (11/20)

• DE-01: Aesthetic Sophistication (5/8) - Thoughtful color/semantic choices, but fairly standard area chart otherwise
• DE-02: Visual Refinement (3/6) - Subtle grid and clean chrome, limited beyond that
• DE-03: Data Storytelling (3/6) - The intentional Testing bottleneck story is undercut by four other near-invisible bands

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) - Correct CFD semantics via unstacked z-order band layering (not a naive stacked sum)
• SC-02: Required Features (4/4)
• SC-03: Data Mapping (3/3)
• SC-04: Title & Legend (3/3)

Data Quality (9/15)

• DQ-01: Feature Coverage (2/6) - Only one of five stages shows a visually meaningful WIP band
• DQ-02: Realistic Context (5/5)
• DQ-03: Appropriate Scale (2/4) - Upstream capacity ranges nearly match arrival rate, driving WIP to near-zero for 3 stages

Code Quality (10/10)

• CQ-01: KISS Structure (3/3)
• CQ-02: Reproducibility (2/2)
• CQ-03: Clean Imports (2/2)
• CQ-04: Code Elegance (2/2)
• CQ-05: Output & API (1/1)

Library Mastery (8/10)

• LM-01: Idiomatic Usage (4/5)
• LM-02: Distinctive Features (4/5) - Deliberately avoids stack in favor of z-order layering to get correct CFD semantics

Score Caps Applied

• None

Strengths

• Correct CFD semantics via an unstacked-area z-order technique: later (downstream) stages paint on top and occlude earlier stages' fills, so visible band widths equal each stage's true WIP without ever summing counts across stages — the textbook-correct construction of a cumulative flow diagram.
• Full structural spec compliance: earliest stage (Backlog) on top, latest (Done) on the bottom, monotonically non-decreasing cumulative counts guaranteed by construction (a stage can never move more items downstream than are actually waiting upstream).
• Correct Imprint palette handling: brand green first, deliberate documented skip of position 5 (matte red) since no stage is "bad", identical data colors across themes, correct theme-adaptive backgrounds.
• Clean, deterministic, reproducible code with a seeded LCG and clear separation of arrival-generation vs. capacity-limited downstream flow.
• Solves a real MUI X quirk cleanly: a custom absolutely-positioned Y-axis label sidesteps the library's built-in label overlapping 3-digit tick labels.

Weaknesses

• Three of the five stage bands (Backlog, Analysis, Development) are only ~3-15 items wide against the chart's ~650-item range, collapsing to a barely-visible sliver at normal viewing sizes (confirmed on the 400px gallery thumbnail, where they merge into one indistinguishable line). This undermines the CFD's core purpose of comparing WIP/bottlenecks across ALL pipeline stages, not just the one intentionally-tightest stage. Fix: widen the gap between arrival capacity and downstream capacity for at least one more upstream stage so more than one band shows a clearly visible, meaningfully different width at thumbnail scale.
• The Development band momentarily narrows to ~0px width at several points (e.g. around day 20) because its randomized capacity happens to match the upstream arrival rate exactly — reads as a rendering glitch rather than a signal. Fix: bias capacity ranges so each non-bottleneck stage keeps a small but consistently non-zero WIP floor throughout.

Issues Found

1. VQ-03 / DQ-01 LOW: Three of five stage bands are visually indistinguishable at normal/thumbnail display sizes
   • Fix: increase the visible WIP of at least one more upstream stage by widening the arrival-vs-capacity gap (e.g. tighten Development's capacity range noticeably below Backlog's arrival range for part of the period), so the chart tells a richer, more comparable multi-stage bottleneck story
2. DQ-03 LOW: Upstream capacity ranges (5-9) too closely match the arrival rate (5-9), driving Backlog/Analysis/Development WIP toward zero
   • Fix: differentiate capacity ranges per stage more (not just the Testing bottleneck) so each band has a distinguishable, non-trivial width

AI Feedback for Next Attempt

Keep the unstacked z-order layering technique, the palette handling, and the deterministic data generation exactly as-is — all correct. The one thing to fix: widen at least one additional upstream stage's WIP band (beyond Testing) so more than one of the five bands is clearly visible and comparable at normal/thumbnail display sizes, e.g. by tightening that stage's capacity range further below its input rate for part of the 90-day period. Also smooth out the ~0px dip in the Development band so it doesn't read as a rendering glitch.

Verdict: REJECTED