feat(muix): implement bar-stacked-labeled

[github-actions]

Implementation: bar-stacked-labeled - javascript/muix

Implements the javascript/muix version of bar-stacked-labeled.

File: plots/bar-stacked-labeled/implementations/javascript/muix.tsx

Parent Issue: #3504

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Background is warm off-white (#FAF8F1), not pure white. Bold dark title reads "bar-stacked-labeled · javascript · muix · anyplot.ai" top-left, clearly readable. Y-axis label "Cost ($ thousands)" and X-axis label "Project Phase" are both dark, legible, and similarly sized. Tick labels are dark and legible. Horizontal gridlines are subtle and light. The stack uses brand green (Labor), lavender (Materials), and blue (Equipment) — canonical Imprint order. Bold black total labels ("$28k", "$56k", "$94k", "$50k", "$42k") sit directly above each stack with clear headroom below the y=120 axis max. All text is readable against the light background.

Dark render (plot-dark.png): Same layout on a warm near-black (#1A1A17) surface. Title, axis labels, and tick labels flip to light/white text and remain clearly legible — no dark-on-dark issues anywhere. Data colors (green/lavender/blue) are pixel-identical to the light render, confirming only chrome flipped. Total labels flip to white text, clearly readable above each stack. Legend text is white and readable.

Both renders pass legibility; no theme-adaptation failures found.

Score: 86/100

Category	Score	Max
Visual Quality	28	30
Design Excellence	10	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	8	10
Total	86	100

Visual Quality (28/30)

• VQ-01: Text Legibility (7/8)
• VQ-02: No Overlap (6/6)
• VQ-03: Element Visibility (5/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)

Design Excellence (10/20)

• DE-01: Aesthetic Sophistication (4/8) - Correct palette + useful custom total-label overlay, but otherwise close to out-of-the-box MUI X styling
• DE-02: Visual Refinement (3/6) - Correct horizontal-only grid and generous margins, but bar segments lack edge definition
• DE-03: Data Storytelling (3/6) - Bold total labels create a clear focal point on the Development peak, but segments aren't further differentiated

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

• LM-01: Idiomatic Usage (4/5)
• LM-02: Distinctive Features (4/5) - useXScale/useYScale hooks drive a scale-accurate custom total-label overlay

Score Caps Applied

• None

Strengths

• Correct use of MUI X's useXScale/useYScale hooks to render dynamic, accurately-positioned total labels above each stack — solves the spec's core requirement idiomatically.
• Imprint palette applied correctly and identically across both themes (green → lavender → blue canonical order), with theme-adaptive chrome throughout.
• Y-axis max computed with deliberate headroom (Math.ceil((maxTotal * 1.18) / 10) * 10) specifically to leave room for total labels — directly satisfies the spec's headroom note.
• skipAnimation set, deterministic hardcoded data, clean imports — no extraneous dependencies or fake functionality.

Weaknesses

• Bar segments use flat fills with no edge stroke; a subtle 1px edge per the style guide's "Bar edges" guidance would add definition, especially for the lower-contrast lavender segment on the cream background.
• Styling stays close to out-of-the-box MUI X BarChart defaults beyond the total-label overlay — no differentiating typographic treatment or other polish.
• Segment (per-bar) value labels are omitted (optional per spec) — adding them would let readers read individual cost-type contributions without estimating from the axis.

Issues Found

1. DE-01/DE-02 LOW: Generic MUI X defaults beyond the custom total-label layer
   • Fix: Add a subtle edge stroke to bar segments, consider refined typography or spacing to differentiate from a stock MUI X chart
2. DE-03 LOW: No further visual hierarchy within each stack
   • Fix: Consider optional segment labels for the largest segment (Labor) to reinforce the data story

AI Feedback for Next Attempt

Solid, spec-compliant implementation — keep the custom scale-hook total-label overlay and the correct Imprint theming. To push Design Excellence higher: add a subtle edge stroke to bar segments (per style guide), and consider small refinements (typography, spacing) that differentiate the chart from stock MUI X defaults.

Verdict: APPROVED

[github-actions]

🔧 Repair Attempt 1/4

Applied fixes based on AI review feedback.

Status: Repair completed, re-triggering review...

---

🤖 impl-repair

[claude]

AI Review - Attempt 2/3

Image Description

Light render (plot-light.png): Background is warm off-white (#FAF8F1), not pure white. Bold dark title "bar-stacked-labeled · javascript · muix · anyplot.ai" sits top-left, clearly readable. Y-axis label "Cost ($ thousands)" and X-axis label "Project Phase" are both dark, legible, and bolded (a repair-loop change), and similarly sized. Tick labels are dark and legible. Horizontal gridlines are subtle. The stack uses brand green (Labor), lavender (Materials), and blue (Equipment) — canonical Imprint order, first series #009E73. Bars now carry a thin cream (pageBg) edge stroke and slight border radius between segments, giving cleaner segment separation than attempt 1. Bold black total labels ("$28k", "$56k", "$94k", "$50k", "$42k") sit directly above each stack with generous headroom below the y=120 axis max. All text is readable against the light background.

Dark render (plot-dark.png): Same layout on a warm near-black (#1A1A17) surface. Title, axis labels, and tick labels flip to white/light text and remain clearly legible — no dark-on-dark issues found. Data colors (green/lavender/blue) are pixel-identical to the light render, confirming only chrome flipped. The bar edge stroke now reads as a thin near-black separator, consistent with the theme. Total labels flip to white text, clearly readable above each stack. Legend text is white and readable.

Both renders pass legibility; no theme-adaptation failures found.

Score: 88/100

Category	Score	Max
Visual Quality	28	30
Design Excellence	12	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	8	10
Total	88	100

Visual Quality (28/30)

• VQ-01: Text Legibility (7/8)
• VQ-02: No Overlap (6/6)
• VQ-03: Element Visibility (5/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)

Design Excellence (12/20)

• DE-01: Aesthetic Sophistication (5/8) - Border radius, edge strokes, and title letter-spacing add polish above a stock default, but overall still close to a well-configured MUI X chart
• DE-02: Visual Refinement (4/6) - New pageBg edge stroke and border radius on bars give visible refinement over attempt 1; grid subtle, spines minimal
• DE-03: Data Storytelling (3/6) - Bold total labels create a clear focal point on the Development peak, but segments still aren't further differentiated

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

• LM-01: Idiomatic Usage (4/5)
• LM-02: Distinctive Features (4/5) - useXScale/useYScale hooks drive a scale-accurate custom total-label overlay

Score Caps Applied

• None

Strengths

• Correct use of MUI X's useXScale/useYScale hooks to render dynamic, scale-accurate total labels above each stack — an idiomatic, distinctive solution to the spec's core requirement.
• Repair pass added a subtle 1.5px pageBg-colored edge stroke and 4px border radius to bar segments, giving clearer segment definition without breaking the Imprint palette.
• Imprint palette applied correctly and identically across both themes (green → lavender → blue canonical order), with fully theme-adaptive chrome.
• Y-axis max computed with deliberate headroom (Math.ceil((maxTotal * 1.18) / 10) * 10) specifically to leave room for total labels — directly satisfies the spec's headroom note.
• Deterministic hardcoded data, skipAnimation set, clean imports — no extraneous dependencies or fake functionality.

Weaknesses

• Design still reads close to a well-configured MUI X BarChart default beyond the total-label overlay and the new edge/border-radius touches — no differentiating typographic treatment, accent, or additional polish.
• No further visual hierarchy within each stack (e.g. optional per-segment value labels for the dominant Labor segment) to reinforce the data story beyond the total labels.
• Element visibility is good but unremarkable — bar widths and segment proportions rely on library defaults rather than a deliberately tuned density-aware sizing.

Issues Found

1. DE-01/DE-03 LOW: Still close to stock MUI X styling beyond total labels + new edge/radius touches
   • Fix: Consider a subtle accent (e.g. slightly emphasized focal category, refined typography) to push aesthetic sophistication and storytelling further
2. VQ-03 MEDIUM: Bar sizing relies on library defaults rather than deliberate tuning
   • Fix: Not required for approval — optional polish for a future iteration

AI Feedback for Next Attempt

Solid, spec-compliant implementation that improved over attempt 1 with bar edge strokes, border radius, and bolder axis labels. This clears the Review 2 threshold. For future polish (not required to merge): consider optional per-segment value labels or a subtle accent to push Design Excellence further.

Verdict: APPROVED