feat(muix): implement dumbbell-basic

[github-actions]

Implementation: dumbbell-basic - javascript/muix

Implements the javascript/muix version of dumbbell-basic.

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

Parent Issue: #945

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Horizontal dumbbell chart on a warm off-white (#FAF8F1) background. Eight departments run down the Y-axis (Design at top, Finance at bottom), sorted ascending by baseline score. Before-Program dots are brand green (#009E73); After-Program dots are lavender (#C475FD). Thin connecting lines in a muted gray (inkSoft at 40% opacity) link each pair of dots. Subtle vertical-only grid lines cross the plot area. Title "dumbbell-basic · javascript · muix · anyplot.ai" is centered in dark ink at the top. X-axis label "Employee Satisfaction Score (0 – 10)" in dark ink. All department names and tick labels are clearly readable. Legend at the bottom shows two swatches. All text is readable against the light background.

Dark render (plot-dark.png): Same composition on a warm near-black (#1A1A17) background. Data colors are identical — Before-Program dots remain #009E73, After-Program dots remain #C475FD, confirming the Imprint palette is theme-invariant. Title, axis label, Y-axis category labels, and X-axis tick labels all render in light ink — clearly readable. No dark-on-dark failures observed anywhere. Legend at the bottom uses light text. Grid lines and connecting lines are subtly visible against the dark surface.

Both paragraphs are required. A review that only describes one render is invalid.

Score: 89/100

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

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) — All font sizes explicitly set (title 22px, axis label 16px, ticks 14px). Readable in both themes. Proportions well-balanced.
• VQ-02: No Overlap (6/6) — No text or data element overlap in either render.
• VQ-03: Element Visibility (6/6) — 8 sparse data points at markerSize=10 — well-sized, clearly visible.
• VQ-04: Color Accessibility (2/2) — Imprint palette CVD-safe; green and purple are perceptually distinct under all CVD types.
• VQ-05: Layout & Canvas (4/4) — Good canvas utilization, explicit margins (left:130, right:50, top:70, bottom:110), legend cleanly at bottom.
• VQ-06: Axis Labels & Title (2/2) — X-axis: "Employee Satisfaction Score (0 – 10)" — descriptive with units. Y-axis uses department names as tick labels — appropriate.
• VQ-07: Palette Compliance (2/2) — First series #009E73 (brand green), second #C475FD (Imprint position 2). Light bg #FAF8F1, dark bg #1A1A17. Data colors identical across themes.

Design Excellence (11/20)

• DE-01: Aesthetic Sophistication (4/8) — Well-configured library default. Correct palette and layout, but no standout aesthetic choices beyond the basics.
• DE-02: Visual Refinement (4/6) — Some refinement: vertical-only grid, subtle connecting lines (inkSoft + strokeOpacity:0.4), explicit margin control. Missing: no spine removal — default 4-sided MUI X border frame remains.
• DE-03: Data Storytelling (3/6) — Data sorted by baseline score hints at a pattern; two-color contrast clearly separates before/after. No focal point or emphasis on any particular insight.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct horizontal dumbbell chart: two dots per category connected by a line.
• SC-02: Required Features (4/4) — Horizontal orientation, categories on Y-axis, distinct colors for start/end dots, sorted by before value, thin connecting lines.
• SC-03: Data Mapping (3/3) — X = satisfaction score, Y = department. All 8 departments visible with correct before/after mapping.
• SC-04: Title & Legend (3/3) — Title: "dumbbell-basic · javascript · muix · anyplot.ai" — correct format. Legend: "Before Program" / "After Program" — correct.

Data Quality (14/15)

• DQ-01: Feature Coverage (5/6) — 8 departments with two-point comparison, sorted order, connecting lines. Gap sizes are too uniform (1.2–1.5 points, all positive) — wider variation would better illustrate the chart type's utility.
• DQ-02: Realistic Context (5/5) — Employee satisfaction before/after a wellness program — realistic, neutral, professionally relevant scenario.
• DQ-03: Appropriate Scale (4/4) — Satisfaction on 0–10 scale, before: 5.5–7.5, after: 7.0–8.7 — plausible for a real workplace survey.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — DumbbellLines sub-component is necessary (useXScale/useYScale hooks must render inside ChartContainer) — not over-engineering.
• CQ-02: Reproducibility (2/2) — Hard-coded deterministic arrays — correct for the offline JS/browser context.
• CQ-03: Clean Imports (2/2) — All 8 named imports are used.
• CQ-04: Code Elegance (2/2) — Clean idiomatic React/MUI X code; no fake UI. Comments explain the non-obvious hook technique.
• CQ-05: Output & API (1/1) — Community @mui/x-charts only; skipAnimation set; output handled by harness.

Library Mastery (9/10)

• LM-01: Idiomatic Usage (5/5) — Correctly uses ChartContainer + composed chart components (ChartsXAxis, ChartsYAxis, ChartsGrid, ChartsLegend, ScatterPlot). Proper default-export structure.
• LM-02: Distinctive Features (4/5) — useXScale/useYScale coordinate hooks are distinctively MUI X: React hooks that expose the chart's D3 scales for custom SVG rendering synchronized to the chart coordinate system — not available with the same clean API in Chart.js, ECharts, or Highcharts.

Score Caps Applied

• None

Strengths

• Excellent use of MUI X coordinate hooks (useXScale/useYScale) to render custom dumbbell connecting lines — idiomatic and distinctive to MUI X's React architecture
• Perfect Imprint palette compliance: brand green #009E73 first, lavender #C475FD second; both themes have correct warm backgrounds with fully readable text
• Full spec compliance — horizontal orientation, Y-axis categories, two dots per category, subtle connecting lines, sorted by baseline to reveal pattern
• Clean deterministic data with realistic employee wellness scenario; explicit font sizes at all three hierarchy levels

Weaknesses

• DE-01/DE-02: Default 4-sided border frame (no spine removal); removing or lightening the top and right axis lines would add visual polish
• DE-03: No focal point or visual emphasis — all categories carry equal visual weight; highlighting the top or bottom performer would improve storytelling
• DQ-01: Gap sizes between before/after are too uniform (1.2–1.5 pts across 8 departments); wider variation — including a smaller gain or one regression — would better showcase the dumbbell chart's value

Issues Found

1. DE-01 MODERATE: Chart uses well-configured MUI X defaults but lacks standout aesthetic choices
   • Fix: Consider adding value labels at each dot or gap annotations; refine typography with font-weight variations
2. DE-02 MODERATE: Default 4-sided chart border — no spine removal
   • Fix: Use prop on ChartsXAxis/ChartsYAxis or to hide the top and right axis lines, achieving an L-shaped frame
3. DE-03 LOW: No focal point or emphasis on insight
   • Fix: Highlight the department with the largest gap (or lowest baseline) using a distinct color or slightly larger marker size to create a visual anchor
4. DQ-01 MINOR: Gap uniformity limits demonstration of the chart's value
   • Fix: Vary before/after deltas from ~0.5 to ~2.5, including at least one smaller-gain department, so the chart clearly illustrates gap-size comparison

AI Feedback for Next Attempt

Score is 89/100 — just 1 point below the 90 threshold for first-attempt approval. Primary gap is Design Excellence (11/20). To reach 90+: (1) Remove top and right spines using MUI X's axis sx/slotProps to achieve an L-shaped frame (DE-02 → 5–6). (2) Add visual emphasis on at least one department — e.g., make the highest-gain category slightly larger or annotate it with the gap value — to create a focal point (DE-03 → 4). (3) Vary the data so gap sizes range from ~0.5 to ~2.5 points and include at least one smaller gain to make the dataset more instructive (DQ-01 → 6). These three changes together would push the score to ~93.

Verdict: REJECTED

[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 background (#FAF8F1). Title "dumbbell-basic · javascript · muix · anyplot.ai" centered in dark ink at fontSize 22 CSS px — clearly readable. X-axis label "Employee Satisfaction Score (0 – 10)" at fontSize 16, readable. Y-axis tick labels (department names) at fontSize 14 in inkSoft. Signed gap labels (+0.5, −0.2, +1.6, +0.5, +2.5, +0.9, +1.3, +0.6) at fontSize 12–13. Eight horizontal dumbbells: brand-green dots for "Before Program", lavender dots for "After Program". Operations row highlighted with amber line and "largest gain" callout. Legal row (regression −0.2) labeled in italic. Legend ("Before Program" / "After Program") at bottom. All text is readable against the light background; no light-on-light issues.

Dark render (plot-dark.png): Warm near-black background (#1A1A17). Title and all chrome labels flip to light ink — title, axis label, department tick labels, gap labels, and legend text are all clearly readable in light colors against the dark surface. Data colors are identical to the light render: brand-green (#009E73) for Before, lavender (#C475FD) for After, amber (#DDCC77) for the Operations highlight. No dark-on-dark failures detected. Brand green is clearly visible. Both renders are theme-correct.

Both paragraphs are required. A review that only describes one render is invalid.

Score: 89/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	9	10
Total	89	100

Visual Quality (29/30)

• VQ-01: Text Legibility (7/8) — All font sizes explicitly set (title 22, x-label 16, ticks 14, gap labels 12–13 CSS px). Gap labels at 12 px are slightly below the ~14 px guideline for secondary text; borderline at mobile scale.
• VQ-02: No Overlap (6/6) — No overlapping text or data elements in either render.
• VQ-03: Element Visibility (6/6) — markerSize=10 CSS px for 8 data points — appropriate density, clearly visible in both themes.
• VQ-04: Color Accessibility (2/2) — Green (#009E73) vs lavender (#C475FD): distinct hue families, CVD-safe. Amber accent for highlight is distinct from both series colors.
• VQ-05: Layout & Canvas (4/4) — Canvas gate passed. Margins left=130, right=80, top=70, bottom=110 — generous, well-balanced. Chart fills ~70% of canvas.
• VQ-06: Axis Labels & Title (2/2) — X-axis: "Employee Satisfaction Score (0 – 10)" with units. Y-axis uses department names as categorical tick labels (correct, no redundant axis label needed).
• VQ-07: Palette Compliance (2/2) — palette[0] (#009E73) for Before, palette[1] (#C475FD) for After — canonical Imprint order. Amber semantic anchor used correctly for the focal highlight. t.ink/t.inkSoft chrome is theme-adaptive. Data colors identical across renders.

Design Excellence (15/20)

• DE-01: Aesthetic Sophistication (6/8) — Clearly above defaults: amber semantic accent for focal row, signed gap labels, "largest gain" callout annotation, italic encoding for the regression row, data sorted ascending to reveal pattern. Not yet FiveThirtyEight-level (no custom typography weight hierarchy), but strong design.
• DE-02: Visual Refinement (4/6) — Y-axis spine removed (disableLine). Vertical grid only (appropriate for horizontal dumbbell). Connecting lines at 35% opacity and 2.5 px width are subtle. X-axis spine is still visible — removing it would give a fully open-chart look consistent with the Y-axis treatment.
• DE-03: Data Storytelling (5/6) — Strong storytelling: amber highlight immediately draws the eye to Operations (largest gain), "largest gain" annotation confirms the insight, italic label for regression (Legal −0.2), signed gap labels provide quantitative context, data sorted by before-score reveals baseline-vs-gain pattern. Viewer sees the story immediately.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct dumbbell/connected-dot chart: two dots per category connected by a line, horizontal orientation, categories on Y-axis.
• SC-02: Required Features (4/4) — Distinct colors for before/after dots, subtle connecting lines, horizontal orientation, categories on Y-axis, sorted by one of the values (before-score).
• SC-03: Data Mapping (3/3) — Satisfaction scores on X-axis, departments on Y-axis. All 8 categories visible with full data range.
• SC-04: Title & Legend (3/3) — "dumbbell-basic · javascript · muix · anyplot.ai" matches required format. Legend labels "Before Program" / "After Program" are descriptive.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Shows improvement (6/8 departments), regression (Legal −0.2), and a standout outlier gain (Operations +2.5). Covers the full range of dumbbell chart use cases.
• DQ-02: Realistic Context (5/5) — Employee satisfaction before/after a wellness program — neutral, real-world plausible business scenario with named departments.
• DQ-03: Appropriate Scale (4/4) — Scores 5.4–9.0 on a 0–10 scale; changes −0.2 to +2.5 are realistic for a workplace wellness program.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — DumbbellOverlay helper component is necessary: MUI X hooks (useXScale/useYScale) must be called inside ChartContainer context. Idiomatic React/MUI X, not over-engineering.
• CQ-02: Reproducibility (2/2) — Fully hard-coded data, no random generation, deterministic.
• CQ-03: Clean Imports (2/2) — All 7 imports used: ChartContainer, ChartsXAxis, ChartsYAxis, ChartsGrid, ChartsLegend, ScatterPlot, useXScale/useYScale.
• CQ-04: Code Elegance (2/2) — Clean, appropriate complexity. No fake UI. SVG overlay via hooks is the correct MUI X pattern for custom marks.
• CQ-05: Output & API (1/1) — MUI X harness handles PNG + HTML output. No manual output code needed — correct per harness contract.

Library Mastery (9/10)

• LM-01: Idiomatic Usage (5/5) — Expert use of ChartContainer slot composition, useXScale/useYScale hooks, ScatterPlot, ChartsGrid with vertical-only setting, disableLine on Y-axis. All idiomatic MUI X patterns correctly applied.
• LM-02: Distinctive Features (4/5) — useXScale/useYScale coordinate-scale hooks inside ChartContainer for SVG overlay is a distinctive MUI X/React pattern — provides D3-scale coordinate access from within React component tree, enabling the connecting lines without dropping to raw D3. Not quite 5/5 since the composition pattern, while distinctive, is the expected approach for any custom MUI X chart.

Score Caps Applied

• None — all cap conditions checked; none triggered (DE-01=6, DE-02=4, so the "both ≤ 2" cap does not apply).

Strengths

• Expert use of MUI X composition: ChartContainer + useXScale/useYScale hooks + SVG overlay — the idiomatic approach for building a custom chart type in MUI X
• Strong data storytelling: amber highlight on Operations (largest gain), explicit "largest gain" annotation, italic label for the regression row, signed gap labels, and ascending sort form a coherent visual narrative
• Perfect spec compliance: horizontal orientation, distinct Imprint palette colors for before/after, subtle connecting lines, sorted by before-score
• Data covers both improvement and regression (Legal −0.2), demonstrating the full range of dumbbell chart use cases
• Correct Imprint palette: palette[0]/palette[1] for series, amber semantic anchor for the focal highlight, theme-adaptive chrome in both renders

Weaknesses

• Gap labels use fontSize=12 CSS px — slightly below the ~14 px guideline for secondary text; increase to 13–14 CSS px for better mobile readability
• X-axis spine still visible; Y-axis was correctly removed via disableLine, but the X-axis line was not — removing or softening it would give a fully open-chart aesthetic
• Vertical grid lines could use explicit strokeOpacity via ChartsGrid slotProps to meet the 10–15% opacity guideline more precisely

Issues Found

1. VQ-01 MINOR: Gap labels at fontSize=12 CSS px are below the ~14 px minimum for secondary text in the MUI X guideline.
   • Fix: Change fontSize={isHighlight ? 13 : 12} to fontSize={isHighlight ? 15 : 13} in the gap label <text> elements.
2. DE-02 MINOR: X-axis spine visible; Y-axis spine already removed with disableLine.
   • Fix: Add disableLine to <ChartsXAxis> as well, or explore slotProps to suppress the X-axis baseline for a fully open-chart look.

AI Feedback for Next Attempt

The core implementation is excellent — the MUI X hooks pattern, Imprint palette usage, storytelling annotations, and spec compliance are all strong. Two small refinements for the next attempt if repair is triggered: (1) increase gap label fontSize from 12 to 13–14 CSS px for mobile readability; (2) add disableLine to <ChartsXAxis> to match the Y-axis treatment and achieve a fully open chart frame. Both are one-line fixes.

Verdict: APPROVED