feat(muix): implement waterfall-basic

[github-actions]

Implementation: waterfall-basic - javascript/muix

Implements the javascript/muix version of waterfall-basic.

File: plots/waterfall-basic/implementations/javascript/muix.tsx

Parent Issue: #777

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1-matching). Bold dark title "waterfall-basic · javascript · muix · anyplot.ai" centered at top, with a 3-item swatch legend (Increase / Decrease / Total) directly below. Rotated "Cash Balance" y-axis title at the far left in dark ink; $-formatted y tick labels ($0k–$260k) and category x tick labels (Opening Balance → Closing Balance) in softer ink. Floating bars: brand green (#009E73) for increase steps, matte red (#AE3030) for decrease steps, near-black neutral for the two total bars, connected by a gray dashed step-line tracing the running total. Bold white/cream labels show the running cash balance on each bar; total bars use dark text on their neutral fill. All text is clearly readable against the light background.

Dark render (plot-dark.png): Warm near-black background (#1A1A17-matching). Same title, legend, and axis title now in light ink; tick labels in a lighter soft tone — all legible. The green and red data bars are pixel-identical to the light render, confirming only chrome flipped. Total bars flip to a near-cream neutral fill with dark text on top (correctly avoiding a dark-on-dark failure, since the fixed cream label color used on the saturated bars would fail on a cream bar). No dark-on-dark or light-on-light issues found in either render.

Both paragraphs confirmed — no legibility failures in either theme.

Score: 92/100

Category	Score	Max
Visual Quality	29	30
Design Excellence	14	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	9	10
Total	92	100

Visual Quality (29/30)

• VQ-01: Text Legibility (7/8) — all sizes explicit, well-proportioned; title fills only ~35% of canvas width (below the 50–70% aim), acceptable given the naturally short spec-id but has headroom to grow
• VQ-02: No Overlap (6/6)
• VQ-03: Element Visibility (6/6)
• VQ-04: Color Accessibility (2/2)
• VQ-05: Layout & Canvas (4/4)
• VQ-06: Axis Labels & Title (2/2)
• VQ-07: Palette Compliance (2/2) — textbook Imprint semantic-exception usage (green=increase, matte-red anchor=decrease, neutral=total)

Design Excellence (14/20)

• DE-01: Aesthetic Sophistication (6/8) - Thoughtful semantic color use and typography, clearly above a configured default
• DE-02: Visual Refinement (4/6) - Subtle horizontal grid, rounded bars, generous whitespace; left/right margin asymmetry keeps it from top marks
• DE-03: Data Storytelling (4/6) - Color coding + step-line clearly guide the reader; running-total-only bar labels leave a little interpretation to the viewer (see weaknesses)

Spec Compliance (15/15)

• SC-01: Plot Type (5/5)
• SC-02: Required Features (4/4)
• SC-03: Data Mapping (3/3)
• SC-04: Title & Legend (3/3)

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6)
• DQ-02: Realistic Context (5/5)
• DQ-03: Appropriate Scale (4/4)

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 (9/10)

• LM-01: Idiomatic Usage (5/5) - ChartContainer + BarPlot/LinePlot composition, the recommended pattern for combo charts
• LM-02: Distinctive Features (4/5) - Stack-based floating bars, custom barLabel callback, per-series slotProps styling

Score Caps Applied

• None

Strengths

• Elegant floating-bar-stack technique (invisible transparent "base" filler + increase/decrease/total series sharing one stack key) reproduces a waterfall chart despite MUI X having no native waterfall type
• Correct semantic color mapping per the Imprint style guide: brand green (palette[0]) for increases, the deferred semantic-red anchor (palette[4], #AE3030) for decreases, theme-adaptive neutral ink for totals
• Theme-adaptive contrast handling on total-bar labels (fill switches to t.pageBg on "total" bars vs. a fixed cream ON_COLOR_TEXT on the saturated bars) keeps every label readable in both renders
• Dashed step-line (stepAfter curve) tracing the running total reinforces the cumulative flow
• All font sizes explicitly set; deterministic, realistic quarterly cash-bridge data whose deltas sum correctly to the stated closing balance

Weaknesses

• Bar labels show the running total after each step for every bar, including the intermediate increase/decrease bars (e.g. the "Product Sales" bar reads "$205k", the cumulative total after that step, not the +$85k delta it represents) — defensible per the spec's "running total labels" wording and the bar height already conveys the delta, but adding the signed delta magnitude (e.g. "+$85k" / "−$18k") alongside would sharpen the storytelling further
• Right margin (48px) is much smaller than the left margin (172px); functionally justified by the y-axis tick/label width but reads slightly asymmetric
• Title occupies only ~35% of canvas width at fontSize=22; there's headroom to size it up modestly for stronger visual hierarchy

Issues Found

1. DE-03 LOW-MODERATE: Bar labels show cumulative running totals on every bar rather than the per-step delta
   • Fix (optional, next-attempt polish only): consider adding the signed delta magnitude near/inside each intermediate bar in addition to (or instead of) the running-total label
2. DE-02 MINOR: Left/right margin asymmetry (172px vs 48px)
   • Fix (optional): trim the left margin slightly or add a touch to the right for better visual balance

AI Feedback for Next Attempt

This is a strong, publication-leaning implementation already — no required fixes. If iterating further: consider surfacing the signed per-step delta alongside the running-total label for sharper storytelling, and nudge the left/right margins toward symmetry.

Verdict: APPROVED