feat(highcharts): implement slope-basic

[github-actions]

Implementation: slope-basic - javascript/highcharts

Implements the javascript/highcharts version of slope-basic.

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

Parent Issue: #981

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background. Bold title "slope-basic · javascript · highcharts · anyplot.ai" at top center in dark ink. Y-axis titled "Customer Satisfaction Score" (40-100), x-axis shows "Survey Wave 1" / "Survey Wave 2" as the two vertical lanes. 10 product lines connect Wave 1 to Wave 2 values, colored brand green (#009E73, "Improved") or matte red ("Declined") by direction. Direct dual-endpoint data labels ("{name} · {value}") flank every line at both ends. All title/axis/tick/data-label text is clearly readable against the light surface — no light-on-light issues.

Dark render (plot-dark.png): Warm near-black background, pixel-identical layout to the light render. Title, axis titles, tick labels, category labels, and legend all render in light gray/off-white and are clearly legible. Data colors (brand green / matte red) are identical to the light render — only the chrome flipped. No dark-on-dark failures found.

Both renders pass the theme-readability check.

Score: 89/100

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

Visual Quality (28/30)

• VQ-01: Text Legibility (8/8)
• VQ-02: No Overlap (5/6)
• VQ-03: Element Visibility (6/6)
• VQ-04: Color Accessibility (2/2)
• VQ-05: Layout & Canvas (3/4)
• VQ-06: Axis Labels & Title (2/2)
• VQ-07: Palette Compliance (2/2)

Design Excellence (16/20)

• DE-01: Aesthetic Sophistication (6/8) - Thoughtful semantic color use, phantom-series legend, direct labeling — clearly above a generic default
• DE-02: Visual Refinement (5/6) - Clean, no gridlines, generous whitespace; docked slightly for label crowding
• DE-03: Data Storytelling (5/6) - Color + slope direction instantly conveys the up/down story; no explicit callout on the standout 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) - Idiomatic dataLabels + phantom-legend-series pattern, though enableMouseTracking:false is an unusual choice for an interactive library
• LM-02: Distinctive Features (1/5) - Direction-coded line-with-labels is fairly generic/replicable in other libraries; native interactivity was disabled rather than leveraged

Score Caps Applied

• None

Strengths

• Correct Imprint semantic color mapping: brand green (palette[0]) for "Improved", matte-red semantic anchor (palette[4]) for "Declined" — matches the style guide's finance/sentiment semantic-exception rule
• Direct dual-endpoint data labels (name + value at both Survey Wave 1 and Survey Wave 2) satisfy the spec's "labels at both endpoints" requirement without relying on hover
• Clean, minimal chrome: no gridlines, transparent background, theme-adaptive ink tokens correctly threaded through title/axis/legend/dataLabels in both light and dark renders
• Phantom-series legend pattern (showInLegend:false on the 10 real product lines, two empty dummy series for "Improved"/"Declined") avoids an unreadable 10-entry legend while still explaining the color coding
• Color direction is redundantly encoded by each line's slope (up = improved, down = declined), keeping the chart colorblind-safe despite the red/green semantic choice

Weaknesses

• Y-axis is fixed to a 40-100 range while actual data spans only 55-91, leaving roughly 30% of the vertical canvas as dead space above and below the data band — tighten the domain (e.g. ~50-95) for better canvas utilization
• A few endpoint label pairs sit close together vertically (e.g. "84 · CoreLogic" / "82 · TaskFlow" and "78 · CloudSync" / "76 · FlowStream" on Survey Wave 2; the 80/77/74 cluster on Survey Wave 1) — not clipped but tight; consider a small collision-nudge or leader-line offset when two labels fall within ~3 score points of each other
• plotOptions.series.enableMouseTracking:false disables all native Highcharts hover/tooltip interactivity for every series, discarding the interactive library's distinctive value-add in the HTML detail view; since data is already fully labeled, consider re-enabling tooltips instead of disabling tracking entirely
• No explicit callout/annotation on the standout mover (e.g. NetGuard +17 or LinkHub -18) — a small highlight would sharpen the data-storytelling focal point

Issues Found

1. VQ-05 MODERATE: Fixed 40-100 y-domain wastes ~30% of vertical canvas around the 55-91 data band
   • Fix: Tighten yAxis.min/yAxis.max closer to the data range (e.g. 50-95) while still leaving small label headroom
2. LM-02 LOW: Native Highcharts interactivity (tooltips/hover highlight) is fully disabled via enableMouseTracking:false
   • Fix: Re-enable mouse tracking / a light tooltip so the HTML output leverages Highcharts' interactive strengths instead of behaving like a static image

AI Feedback for Next Attempt

Tighten the y-axis domain to the actual data range to improve canvas utilization, add slight offset/nudging for endpoint labels that land within ~3 score points of each other, and reconsider re-enabling native tooltip/hover interactivity (data labels already cover the static case, but this is an interactive library and disabling mouse tracking entirely discards that strength). Optionally add a small annotation on the largest mover to sharpen the storytelling focal point.

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 "slope-basic · javascript · highcharts · anyplot.ai" in bold dark text at top center; y-axis title "Customer Satisfaction Score" and tick labels (50-95, tightened to the actual data band) in soft dark gray on the left; x-axis labels "Survey Wave 1" / "Survey Wave 2"; legend ("Improved"/"Declined") centered at bottom. 10 product lines connect the two waves, colored brand green or matte red by direction, with the largest-magnitude mover (LinkHub, 77→59) rendered with a visibly heavier line and larger marker. Direct data labels ("{name} · {value}") flank both endpoints of every line. All text is clearly readable against the light background — zoomed crops of the two tightest label clusters confirm no overlap.

Dark render (plot-dark.png): Warm near-black background (#1A1A17). Same title, axis titles, tick labels, category labels, and legend, rendered in light gray/off-white tones — layout is pixel-identical to the light render. Data colors (brand green / matte red) are identical to the light render; only chrome flipped. All text is clearly legible against the dark background — no dark-on-dark failures found in either the main render or the cropped cluster checks.

Both renders pass the theme-readability check with no issues.

Score: 96/100

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

Visual Quality (30/30)

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

• DE-01: Aesthetic Sophistication (6/8) - Thoughtful semantic color use, phantom-series legend, direct labeling, standout-mover emphasis; short of FiveThirtyEight-level polish
• DE-02: Visual Refinement (6/6) - Label-crowding weakness from attempt 1 resolved; minimal chrome, generous whitespace
• DE-03: Data Storytelling (6/6) - Standout-mover line-weight/marker emphasis gives a clear, immediate focal point

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 (5/5) - enableMouseTracking:false now correctly scoped only to the empty legend-proxy series
• LM-02: Distinctive Features (3/5) - Tooltips re-enabled on real series; dataLabels crop/overflow handling and phantom-legend pattern are genuinely Highcharts-specific

Score Caps Applied

• None

Strengths

• Y-axis domain is now tightened to the actual data band (~50-95 vs. the prior fixed 40-100), eliminating the attempt-1 dead-space issue
• Endpoint-label collision nudging resolves the tight label clusters from attempt 1 — verified pixel-level via cropped zooms in both themes: no overlap
• Real product series no longer disable mouse tracking — native tooltips work on the actual data, while the phantom legend-only series still correctly avoid polluting the legend
• The largest-magnitude mover (LinkHub, -18) is visually emphasized with a heavier line and larger marker, giving the chart a clear focal point without fake interactivity
• Correct Imprint semantic color mapping retained (brand green = improved, matte red = declined), redundantly encoded by slope direction for colorblind safety
• All font sizes explicitly set and readable in both light and dark renders

Weaknesses

• The standout-mover emphasis is a good visual-hierarchy device but still not an explicit callout — a small delta annotation (e.g. "-18") on the standout line would push storytelling further
• Distinctive-feature usage is moderate rather than showcase-level — the phantom-legend and dataLabels crop/overflow handling are Highcharts-specific, but the chart otherwise reads as a fairly standard direct-labeled line chart

Issues Found

None blocking — the two weaknesses above are polish opportunities, not defects.

AI Feedback for Next Attempt

This implementation resolved every weakness from the attempt-1 review (y-domain, label collisions, tooltip tracking) and is approved. If further iterated, consider a small text annotation on the standout mover for an even sharper storytelling focal point.

Verdict: APPROVED