feat(muix): implement slope-basic

[github-actions]

Implementation: slope-basic - javascript/muix

Implements the javascript/muix version of slope-basic.

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

Parent Issue: #981

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1). Title "Employee Satisfaction by Department · slope-basic · javascript · muix · anyplot.ai" reads clearly in dark ink top-left; a custom "Improved"/"Declined" legend sits top-right with green/red swatches. Left column shows {Department} · {value} labels (e.g. "Engineering · 83"); right column shows the end value only (e.g. "90"). "2023"/"2025" period labels sit at the bottom. All text is dark-on-light and clearly legible with no overlaps across the 9 stacked rows.

Dark render (plot-dark.png): Warm near-black background (#1A1A17). Same title/legend/label layout, now rendered in light ink and soft light-gray secondary text — no dark-on-dark failures anywhere. The 9 slope lines use the identical green (#009E73)/red (#AE3030) colors as the light render; only chrome (background, text color) flipped, confirming data-color constancy.

Both renders read as clean, fully theme-adaptive slopegraphs.

Score: 88/100

Category	Score	Max
Visual Quality	28	30
Design Excellence	13	20
Spec Compliance	14	15
Data Quality	14	15
Code Quality	10	10
Library Mastery	9	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 (13/20)

• DE-01: Aesthetic Sophistication (5/8) - Thoughtful semantic color + correct title-scaling formula, but otherwise fairly restrained styling
• DE-02: Visual Refinement (4/6) - Axis lines/ticks disabled, no grid, generous whitespace
• DE-03: Data Storytelling (4/6) - Direction color gives an immediate read, but no extra emphasis on standout movers

Spec Compliance (14/15)

• SC-01: Plot Type (5/5)
• SC-02: Required Features (3/4) - Right endpoints show value only, not department name (see weaknesses)
• SC-03: Data Mapping (3/3)
• SC-04: Title & Legend (3/3)

Data Quality (14/15)

• DQ-01: Feature Coverage (5/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) - useXScale/useYScale custom overlay is genuinely distinctive, could push further

Score Caps Applied

• None

Strengths

• Semantic color-coding is correct: brand green (palette[0]) for improved, matte red (palette[4]) for declined — matches the style guide's "sentiment/polarity" semantic exception, and direction is redundantly encoded by line slope too (not color-only).
• Custom endpoint labels built with useXScale/useYScale hooks — idiomatic, distinctive MUI X usage.
• Title fontsize correctly follows the prescribed scaling formula for the long descriptive+mandated title, avoiding overflow while keeping visible hierarchy.
• Clean, minimal chrome: axis lines/ticks disabled, no grid, generous margins.
• Both renders fully theme-adaptive with identical data colors and correctly flipped chrome; no legibility failures in either theme.
• 9 entities (within spec's 5-15 guidance), deterministic hardcoded data.

Weaknesses

• Right-side endpoints show only the numeric value, not the department name — the spec's Notes call for "labels at both endpoints for entity identification." With 5 green + 4 red lines crossing mid-chart, identifying a department at its right endpoint requires tracing color+slope back to the left label.
• Visual storytelling is fairly flat — every line gets equal weight beyond the improved/declined split; no extra emphasis (e.g. bolding/annotating the largest mover).
• Legend swatches are small flat rectangles rather than short line segments matching the chart's actual stroke style — minor cosmetic inconsistency.

Issues Found

1. SC-02 MEDIUM: Right-side endpoint labels omit the department name
   • Fix: Add a compact department label on the right side too (e.g. abbreviated name), or stagger/offset right-side labels to keep them from clashing while still identifying the entity.
2. DE-03 LOW: No emphasis on standout data points
   • Fix: Consider bolding/annotating the largest riser and/or largest decliner to give the chart a clearer focal point.

AI Feedback for Next Attempt

Solid slopegraph overall — keep the semantic green/red direction coding, the title-scaling formula, and the minimal-chrome layout. For the next iteration, add department identification on the right-side endpoints (not just the value) so a reader doesn't have to trace lines to identify an entity, and consider adding a small emphasis technique (e.g. annotate the biggest mover) to strengthen the data storytelling.

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 background (#FAF8F1). Title "Employee Satisfaction by Department · slope-basic · javascript · muix · anyplot.ai" reads clearly in dark ink, top-left. A custom "Improved"/"Declined" legend (line+circle swatches matching the chart's own stroke style) sits top-right. Left column shows "{Department} · {value}" labels; right column now shows "{value} · {Department}" — the Attempt 1 gap (right side showing only a bare number) is fixed. "2023"/"2025" period labels sit at the bottom. All text is dark-on-light and clearly legible with no overlaps.

Dark render (plot-dark.png): Warm near-black background (#1A1A17). Identical layout, now rendered in light ink / soft light-gray secondary text — no dark-on-dark failures anywhere. The 9 slope lines use the identical green (#009E73)/red (#AE3030) colors as the light render — only chrome flipped, confirming data-color constancy. The bold-stroke + delta-chip emphasis on the biggest riser ("+8", Design) and biggest decliner ("-7", Product) is preserved identically.

Both renders read as clean, fully theme-adaptive slopegraphs. Legibility verdict: PASS for both.

Score: 94/100

Category	Score	Max
Visual Quality	28	30
Design Excellence	17	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	9	10
Total	94	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 (17/20)

• DE-01: Aesthetic Sophistication (6/8) - Semantic color, legend now matches chart stroke style, bold emphasis on standout movers
• DE-02: Visual Refinement (5/6) - Axis lines/ticks/grid disabled, generous whitespace
• DE-03: Data Storytelling (6/6) - Delta callouts + bold strokes on the biggest riser/decliner create a clear focal point (fixes Attempt 1's flat storytelling)

Spec Compliance (15/15)

• SC-01: Plot Type (5/5)
• SC-02: Required Features (4/4) - Both endpoints now identify the entity (fixes Attempt 1 gap)
• 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) - useXScale/useYScale custom overlay is genuinely distinctive, could push further

Score Caps Applied

• None

Strengths

• Both weaknesses from Attempt 1 are fixed: right-side endpoints now show {value} · {department}, and the biggest riser/decliner get bolder strokes plus delta chips ("+8"/"-7") for a genuine focal point.
• Semantic color-coding is correct and well-reasoned: brand green (palette[0]) for improved, matte red (palette[4]) for declined, matching the style guide's sentiment/polarity semantic exception; direction is redundantly encoded by slope and by explicit start/end values, not color-only.
• Custom endpoint-label and delta-annotation overlays built with useXScale/useYScale hooks — idiomatic, distinctive MUI X usage.
• Legend swatches now match the chart's actual stroke style (line+circle), fixing Attempt 1's flat-rectangle swatches; title fontsize correctly follows the prescribed scaling formula for the long descriptive+mandated title.
• Both renders fully theme-adaptive with identical data colors; 9 entities (within spec's 5-15 guidance), deterministic hardcoded data.

Weaknesses

• Endpoint markers are modest circles for a sparse 18-point dataset (9 lines × 2 endpoints) — per the data-density heuristic they could be slightly bigger/bolder for extra visual weight.
• Title occupies roughly ~41% of canvas width, on the small end of the "50-70% comfortable" range. This follows the prescribed length-scaling formula correctly (no overflow) so it's not a violation, but there may be a little headroom to size it up slightly.

Issues Found

1. VQ-03 LOW: Endpoint markers slightly small for sparse data
   • Fix: Increase mark radius/stroke width modestly given only 18 total data points across the chart.

AI Feedback for Next Attempt

This is a strong, well-refined slopegraph — the entity labels on both endpoints and the delta-callout emphasis on standout movers directly addressed the prior review. If iterating further, consider slightly larger endpoint markers given the sparse dataset, and a touch more title fontsize headroom if the floor allows it.

Verdict: APPROVED