feat(chartjs): implement slope-basic

[github-actions]

Implementation: slope-basic - javascript/chartjs

Implements the javascript/chartjs version of slope-basic.

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

Parent Issue: #981

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background matching #FAF8F1. Bold dark title "slope-basic · javascript · chartjs · anyplot.ai", "Increase"/"Decrease" legend swatches at top, and bold dark "Pre-Test"/"Post-Test" tick labels at the bottom — all clearly readable against the light background. Ten slope lines connect Pre-Test to Post-Test scores for named students: 8 lines in brand green (#009E73, increases) and 2 in matte red (#AE3030, decreases — Mia, Lucas). Each endpoint has a colored dot plus a name+value label matching the line's color. No y-axis is shown; values are conveyed directly via the endpoint labels. All text is readable — no light-on-light issues.

Dark render (plot-dark.png): Warm near-black background matching #1A1A17. Title, legend, and tick text now render in light ink and remain clearly readable. The green (#009E73) and red (#AE3030) line/marker colors are identical to the light render — confirmed unchanged, only chrome flipped. Endpoint labels stay legible against the dark surface, colored to match their line. No dark-on-dark failures found.

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

Score: 93/100

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

• DE-01: Aesthetic Sophistication (6/8) - Thoughtful semantic color scheme + Tufte-style direct endpoint labeling instead of a cluttered 10-entry legend
• DE-02: Visual Refinement (5/6) - Y-axis fully hidden, subtle grid only, generous whitespace
• DE-03: Data Storytelling (5/6) - Color-coded direction plus a visible rank crossing (Noah overtakes Isabella) tells a clear story

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 (14/15)

• DQ-01: Feature Coverage (5/6) - Shows increases, decreases, and a rank crossing; decrease category is thinly represented (2/10)
• DQ-02: Realistic Context (5/5)
• DQ-03: Appropriate Scale (4/4)

Code Quality (9/10)

• CQ-01: KISS Structure (2/3) - Endpoint-label plugin adds a function block, justified by the spec's labeling requirement
• 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) - Canvas-drawing afterDatasetsDraw plugin for endpoint labels is distinctive to Chart.js

Score Caps Applied

• None

Strengths

• Correct semantic color-coding: brand green (#009E73) for score increases, matte-red semantic anchor (#AE3030) for decreases — a legitimate Imprint semantic exception, identical data colors across both themes.
• Custom Chart.js plugin (afterDatasetsDraw) draws entity name + value at both line endpoints, satisfying the spec's "labels at both endpoints" requirement without a cluttered 10-entry legend.
• Minimalist, theme-adaptive layout: y-axis hidden entirely, subtle category grid lines, chrome correctly flips between #FAF8F1/#1A1A17 with readable text in both renders.
• Realistic, neutral dataset (tutoring-program pre/post test scores) showing both increases, decreases, and a visible rank crossing.
• animation: false set and the mount-node contract followed correctly.

Weaknesses

• Title occupies only ~25-30% of canvas width — below the 50-70% guideline for a title this length; could grow slightly for more visual presence.
• Only 2 of 10 entities decrease — the "decrease" semantic color is thinly demonstrated; a bit more variety would strengthen feature-coverage storytelling.
• The endpoint-label plugin is a reasonable Chart.js idiom but adds a function block beyond a strict imports-to-data-to-plot KISS flow.

Issues Found

1. DQ-01 MINOR: Only 2/10 entities decrease
   • Fix: Not required for approval, but a future revision could balance the increase/decrease split slightly more evenly for richer feature coverage.

AI Feedback for Next Attempt

Implementation approved. If revisited, consider growing the title slightly (currently ~25-30% of width, below the 50-70% guideline) and diversifying the decrease/increase split for stronger feature coverage.

Verdict: APPROVED