feat(echarts): implement slope-basic

[github-actions]

Implementation: slope-basic - javascript/echarts

Implements the javascript/echarts version of slope-basic.

File: plots/slope-basic/implementations/javascript/echarts.js

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 Engagement Score · slope-basic · javascript · echarts · anyplot.ai" in dark ink, centered at top. "2024 (before)" / "2025 (after)" labels at the bottom on a thin baseline rule, no grid lines. 10 department lines connect a 2024 value (left) to a 2025 value (right); each endpoint has a filled circle and a text label with department name + score. Lines trending up-right are brand green (#009E73), lines trending down-right are matte red (#AE3030). All title, axis, and data-label text is dark-on-light and clearly readable — no light-on-light issues.

Dark render (plot-dark.png): Warm near-black background (#1A1A17). Same title and axis labels, now in light ink, clearly legible against the dark surface — no dark-on-dark failures detected. Data colors are identical to the light render (#009E73 / #AE3030); only the chrome (background, text) flipped, confirming theme tokens are threaded through correctly.

Both renders pass the theme-readability check.

Score: 87/100

Category	Score	Max
Visual Quality	26	30
Design Excellence	16	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	5	10
Total	87	100

Visual Quality (26/30)

• VQ-01: Text Legibility (7/8) — all sizes explicit, readable in both themes; data labels get fairly small at the 400px mobile thumbnail.
• VQ-02: No Overlap (6/6) — no text collisions, even for closely-valued entities (Design 73 / Engineering 72).
• VQ-03: Element Visibility (5/6) — markers clearly visible but symbolSize: 8 is a bit small for only 10 sparse two-point series.
• VQ-04: Color Accessibility (2/2) — red/green direction coding is redundant with the visible line slope, so it stays readable without relying on hue alone.
• VQ-05: Layout & Canvas (2/4) — vertical fill is good, but grid.left/right: 300 (of a 1200px mount) leaves noticeable empty canvas beyond where labels end; ~40-50% total canvas utilization.
• VQ-06: Axis Labels & Title (2/2) — "2024 (before)" / "2025 (after)" descriptively label both time points.
• VQ-07: Palette Compliance (2/2) — first series #009E73, #AE3030 correctly reserved for the semantic loss/decrease role; identical across theme-correct renders.

Design Excellence (16/20)

• DE-01: Aesthetic Sophistication (6/8) - Thoughtful semantic coloring and label placement, clearly above default styling
• DE-02: Visual Refinement (6/6) - No grid, minimal chrome, generous whitespace, consistent formatting
• DE-03: Data Storytelling (4/6) - Direction-based coloring creates hierarchy, but no additional emphasis (e.g. calling out the biggest mover)

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

• LM-01: Idiomatic Usage (4/5) - Correct high-level setOption usage, per-series style objects, formatter callbacks
• LM-02: Distinctive Features (1/5) - Per-point label formatter + itemStyle coloring is generic and easily replicated in any charting library; no ECharts-distinctive capability used

Score Caps Applied

• None

Strengths

• Correct slope-chart construction: continuous value y-axis (min 62 / max 90) so vertical position reflects actual score magnitude, not just row order
• Semantic red/green line coloring is redundant with the visible slope direction, staying CVD-safe
• Direct per-line data labels replace a crowded 10-entry legend
• Theme-adaptive chrome verified correct in both renders; Imprint colors identical across themes
• Realistic, neutral dataset with a good spread of magnitudes (+15 to -5)

Weaknesses

• Grid margins (left:300, right:300 on a 1200px mount) leave a lot of empty canvas beyond where labels end — tighten to ~180-200px given the longest label
• symbolSize: 8 is a bit small for only 10 sparse two-point series — bump to ~10-12
• LM-02: no ECharts-distinctive feature leveraged (e.g. graphic elements, emphasis/focus states)
• Data labels for closely-valued entities ("Design 73" / "Engineering 72") sit close together vertically — fine at full size but tightens at mobile widths

Issues Found

1. VQ-05 MEDIUM: Oversized left/right grid margins waste canvas space
   • Fix: Reduce grid.left/grid.right from 300 to ~180-200 to raise plot-to-canvas fill ratio
2. VQ-03 LOW: Markers slightly small for sparse data
   • Fix: Increase symbolSize from 8 to ~10-12
3. LM-02 LOW: Generic library usage
   • Fix: Leverage an ECharts-distinctive capability, e.g. emphasis/blur focus states on hover, or graphic elements for a callout on the largest mover

AI Feedback for Next Attempt

Tighten the left/right grid margins to reduce wasted canvas whitespace, bump marker symbolSize slightly for the sparse 10-series dataset, and consider an ECharts-distinctive touch (emphasis/focus states, or a graphic annotation highlighting the largest mover) to lift Library Mastery. Core chart construction, data quality, and spec compliance are all solid — no correctness issues.

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 "Employee Engagement Score · slope-basic · javascript · echarts · anyplot.ai" in dark ink at top (~54% of canvas width), with a new italic subtitle "Biggest mover: Support +15 pts" below it, both clearly readable. "2024 (before)" / "2025 (after)" axis labels sit at the bottom on a thin baseline. Ten department lines connect a 2024 value (left) to a 2025 value (right), each endpoint marked with an 11px filled circle and a text label (name + score). Lines trending up-right are brand green (#009E73), lines trending down-right are matte red (#AE3030). Grid margins are visibly tighter than the previous attempt, raising canvas fill. No overlapping text, even for closely-valued entities (Design 73 / Engineering 72). All text reads dark-on-light — no light-on-light issues.

Dark render (plot-dark.png): Warm near-black background (#1A1A17). Same title/subtitle/axis labels now rendered in light ink, clearly visible — no dark-on-dark failures anywhere. Data colors are identical to the light render (#009E73 / #AE3030), confirming only chrome (background, text) flips between themes. Marker size, layout, and callout are all unchanged from the light render aside from the chrome.

Both renders pass legibility; the implementation is theme-correct.

Score: 94/100

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

Visual Quality (29/30)

• VQ-01: Text Legibility (7/8) - All sizes explicit; data labels still shrink somewhat at ~400px mobile preview
• VQ-02: No Overlap (6/6)
• VQ-03: Element Visibility (6/6) - symbolSize bumped 8→11, now prominent for sparse 2-point series
• VQ-04: Color Accessibility (2/2)
• VQ-05: Layout & Canvas (4/4) - grid margins tightened 300px→190px, meaningfully raising canvas utilization
• VQ-06: Axis Labels & Title (2/2)
• VQ-07: Palette Compliance (2/2)

Design Excellence (18/20)

• DE-01: Aesthetic Sophistication (6/8) - Thoughtful coloring, callout, and focus/blur states; not quite FiveThirtyEight-level
• DE-02: Visual Refinement (6/6) - No grid, minimal chrome, generous whitespace
• DE-03: Data Storytelling (6/6) - New "Biggest mover" callout explicitly states the key insight alongside direction color coding

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

• LM-01: Idiomatic Usage (4/5)
• LM-02: Distinctive Features (3/5) - Now uses ECharts emphasis/focus + blur cross-highlighting and the graphic API for a text overlay

Score Caps Applied

• None

Strengths

• All three weaknesses from the previous review were fixed: grid margins tightened (300px→190px), symbolSize bumped (8→11), and ECharts-distinctive emphasis/focus + blur highlighting plus a graphic text callout were added.
• The "Biggest mover: Support +15 pts" callout gives the chart an explicit narrative focal point.
• Correct slope-chart construction using a continuous value y-axis so vertical position reflects true magnitude.
• Semantic red/green coloring is redundant with visible slope direction — CVD-safe.
• Theme-adaptive chrome verified correct in both renders; Imprint data colors identical across themes.
• Realistic, neutral business dataset with a good spread of magnitude and direction.

Weaknesses

• Data labels for closely-valued entities (Design 73 / Engineering 72) still sit close together vertically — fine at full size, tightens further at mobile scale.
• LM-02 improved but still moderate — could push further with e.g. dynamic label-overlap avoidance.
• Data label fontSize (14px) becomes quite small once scaled to a ~400px mobile preview.

Issues Found

None blocking — all prior review items were addressed.

AI Feedback for Next Attempt

No further action required for approval. If iterating further: consider a modest bump to data-label fontSize for mobile legibility headroom, and explore additional ECharts-distinctive graphic elements to push LM-02 higher.

Verdict: APPROVED