feat(muix): implement bar-stacked-percent

[github-actions]

Implementation: bar-stacked-percent - javascript/muix

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

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

Parent Issue: #2008

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1-consistent). Title "bar-stacked-percent · javascript · muix · anyplot.ai" and the subtitle "Norway's grid runs almost entirely on renewables, while China still leans on coal" render in dark ink at top-left. Six vertical bars (China, USA, Germany, France, Brazil, Norway) are each stacked to exactly 100%, split into Renewables (brand green #009E73), Nuclear (lavender), Natural Gas (blue), and Coal (ochre) — canonical Imprint order. In-bar percentage labels use dark text on the green/lavender/ochre segments and light text on the blue segment, all legible; the ~2% Brazil nuclear sliver correctly omits its label to avoid clutter. Y-axis "Share (%)" (0-100%) and x-axis "Country" labels, tick labels, subtle horizontal gridlines, and a right-side vertical legend are all present. All text is readable against the light background.

Dark render (plot-dark.png): Same layout on a warm near-black (#1A1A17-consistent) background. Title, subtitle, axis labels, tick labels, and legend text flip to light tones and remain fully readable — no dark-on-dark failures. Segment colors (green, lavender, blue, ochre) are pixel-identical to the light render; only chrome (background, text, gridlines, axis lines) flips, as required.

Both renders pass the theme-readability check.

Score: 89/100

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

Visual Quality (29/30)

• VQ-01: Text Legibility (7/8)
• 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)

Design Excellence (11/20)

• DE-01: Aesthetic Sophistication (5/8) - Thoughtful per-segment label-contrast logic and a documented tickFontSize offset trick, but composition stays close to library defaults
• DE-02: Visual Refinement (3/6) - Default MUI X axis lines remain; noticeable unused whitespace between the last bar and the legend
• DE-03: Data Storytelling (3/6) - Subtitle gives a narrative focal point, but bars aren't sorted to visually reinforce the Norway-vs-China contrast

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)
• LM-02: Distinctive Features (4/5) - Per-series label-color mapping and axis-offset trick show real familiarity

Score Caps Applied

• None

Strengths

• Correct 100% stacked-bar semantics: stack: "total" with pre-normalized percentage values and a fixed 0-100% y-axis
• Per-segment label contrast (LABEL_ON_LIGHT_FILL / LABEL_ON_DARK_FILL) chosen per series fill for legibility
• Threshold-based label suppression (value >= 6) avoids clutter in narrow segments (e.g. Brazil's ~2% nuclear sliver)
• Canonical Imprint palette order; data colors identical between light/dark renders, only chrome flips
• Idiomatic, rich MUI X BarChart usage (valueFormatter, categoryGapRatio, slotProps, disableTicks, a documented tickFontSize offset trick)
• Descriptive subtitle framing a clear narrative (Norway vs. China)
• Realistic, neutral, deterministic dataset within the spec's recommended size range

Weaknesses

• Bars are ordered by an arbitrary country list rather than sorted by renewables share — sorting would reinforce the subtitle's contrast and add a visual gradient
• Visual refinement is solid but not distinctive — default axis lines remain; consider a lighter/removed axis-line treatment
• Noticeable unused whitespace between the last bar (Norway) and the legend column — tighten the right margin slightly

Issues Found

1. DE-03 LOW: No sort order reinforcing the story
   • Fix: Sort bars descending by renewables share (or another meaningful metric) so the visual gradient reinforces the subtitle's narrative
2. DE-02 LOW: Minimal visual refinement beyond defaults
   • Fix: Consider lightening/removing the MUI X axis line stroke and tightening the right margin to reduce unused whitespace next to the legend

AI Feedback for Next Attempt

Solid, spec-compliant implementation. To push Design Excellence further: sort bars by a meaningful metric (e.g. descending renewables share) to reinforce the subtitle's narrative, and tighten the right-side margin/legend spacing to reduce unused whitespace.

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): Warm off-white (#FAF8F1) background. Title "bar-stacked-percent · javascript · muix · anyplot.ai" in dark ink, top-left, with a dark-gray subtitle ("Norway's grid runs almost entirely on renewables, while China still leans on coal"). Y-axis "Share (%)" and x-axis "Country" labels in dark ink; tick labels in a softer gray; subtle horizontal gridlines and a now-lighter (grid-weight) axis line; vertical legend on the right (Renewables/Nuclear/Natural Gas/Coal with swatches). Six bars, now sorted descending by renewables share (Norway 100%, Brazil 86%, Germany 54%, China 34%, France 25%, USA 22%), each stacked to 100% in canonical Imprint order (green, lavender, blue, ochre). In-bar percentage labels use per-segment contrast colors and are all legible; tiny slivers under 6% correctly omit their label. All text is clearly readable against the light background.

Dark render (plot-dark.png): Warm near-black (#1A1A17) background. Same title/subtitle now in light ink/soft light-gray, axis and tick labels flipped to light tones, gridlines and axis line still subtle but visible. Segment colors (green, lavender, blue, ochre) are pixel-identical to the light render — only chrome (background, text, gridlines, axis line) flipped. In-bar label colors are unchanged (chosen per-segment fill, not per page theme) and remain legible on both themes since they sit on the colored bar fills. No dark-on-dark failures observed.

Both renders pass the legibility check.

Score: 94/100

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

Visual Quality (29/30)

• VQ-01: Text Legibility (7/8)
• 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)

Design Excellence (15/20)

• DE-01: Aesthetic Sophistication (6/8) - Per-segment label contrast logic, tickFontSize offset trick, and renewables-share sort show above-baseline polish
• DE-02: Visual Refinement (4/6) - Axis/grid lines now use the softer grid-weight stroke instead of MUI X defaults; small gap between last bar and legend remains
• DE-03: Data Storytelling (5/6) - Bars now sorted descending by renewables share, forming a clear visual gradient that reinforces the subtitle's narrative

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

• LM-01: Idiomatic Usage (5/5)
• LM-02: Distinctive Features (5/5) - Per-series label-color mapping, tickFontSize axis-offset trick, and targeted sx overrides on internal MUI X classes

Score Caps Applied

• None

Strengths

• Correct 100% stacked-bar semantics: stack: "total" with values pre-normalized to percentages, y-axis fixed to 0-100% with a % formatter.
• Bars are now sorted descending by renewables share (Norway → Brazil → Germany → China → France → USA), creating a clear visual gradient that reinforces the subtitle's narrative — directly addresses the attempt-1 weakness about arbitrary bar order.
• Axis line and grid strokes now use the softer t.grid token instead of MUI X's default full-ink stroke (via sx targeting .MuiChartsAxis-line / .MuiChartsGrid-line) — directly addresses the attempt-1 DE-02 weakness.
• Thoughtful per-segment label contrast (LABEL_ON_LIGHT_FILL / LABEL_ON_DARK_FILL chosen per series fill, not per page theme) keeps every in-bar percentage legible on both themes.
• Threshold-based label suppression (barLabel only renders when value ≥ 6%) avoids cramming unreadable text into narrow slivers.
• Canonical Imprint palette order with data colors pixel-identical between light and dark renders; only chrome flips.
• Idiomatic, rich use of the community BarChart API: valueFormatter, categoryGapRatio, slotProps for legend/barLabel styling, disableTicks, and a documented tickFontSize offset trick.

Weaknesses

• A visible gap remains between the last bar (USA) and the legend column — tightened relative to attempt 1 but could be trimmed further.
• Sorting by renewables share slightly dilutes the subtitle's Norway-vs-China anchor, since China now sits mid-pack (USA and France have even lower renewables shares) — the coal-specific claim still holds (China's 58% is the highest coal share of any bar), but bar position alone doesn't immediately signal "leans on coal."
• Design excellence is solid but not exceptional — no further distinctive touches beyond the new axis-line refinement and existing label-contrast logic.

AI Feedback for Next Attempt

No further action required for approval. If iterating further for polish: consider tightening the right margin slightly to close the gap before the legend, and/or a subtle callout/emphasis on the Norway or China bar to sharpen the subtitle's narrative connection.

Verdict: APPROVED