feat(chartjs): implement area-elevation-profile

[github-actions]

Implementation: area-elevation-profile - javascript/chartjs

Implements the javascript/chartjs version of area-elevation-profile.

File: plots/area-elevation-profile/implementations/javascript/chartjs.js

Parent Issue: #4578

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1). The terrain elevation profile is rendered as a single green area (#009E73) with a gradient fill — opaque brand-green at the profile line fading to near-transparent at the base, creating an authentic terrain silhouette. The title "area-elevation-profile · javascript · chartjs · anyplot.ai" is dark ink, clearly readable. X-axis label "Distance (km)" and Y-axis label "Elevation (m)" are both dark ink, clearly readable. Tick labels (0–80 km, 400–2800 m) are legible in soft-dark ink. Six landmarks are annotated: hollow ring dots at each waypoint, dashed vertical guide lines to the x-axis baseline, and small label boxes (warm elevated-bg fill) with bold name and secondary elevation in dark ink. Summit Peak at 33 km / 2450 m reads as the clear visual focal point. All text is readable against the light background.

Dark render (plot-dark.png): Warm near-black background (#1A1A17). Data color is identical to the light render — the same #009E73 gradient fill. Only chrome flips: title and axis text become light/cream-colored, tick labels use the light inkSoft token. Landmark label boxes switch to the elevated dark background (#242420) with light ink text; hollow dot outlines render in the light ink token — both are clearly readable. No dark-on-dark failures observed anywhere. All text is legible against the dark background.

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

Score: 87/100

Category	Score	Max
Visual Quality	29	30
Design Excellence	12	20
Spec Compliance	14	15
Data Quality	14	15
Code Quality	10	10
Library Mastery	8	10
Total	87	100

Visual Quality (29/30)

• VQ-01: Text Legibility (7/8) — Title (22px), axis labels (16px), ticks (14px) all clearly readable in both themes. Landmark label boxes (13/12px CSS = 26/24px native) adequate but slightly small for gallery-size embed.
• VQ-02: No Overlap (6/6) — No text overlaps detected; horizontal clamping logic keeps all label boxes within chart area.
• VQ-03: Element Visibility (6/6) — Green area fill and profile line are prominent. Hollow landmark dots clearly visible. 200-point line with no markers is appropriate for this data density.
• VQ-04: Color Accessibility (2/2) — Single series using Imprint palette[0] (#009E73). No red-green as sole signal.
• VQ-05: Layout & Canvas (4/4) — Canvas gate passed. Title ~62% of width. No overflow. Good whitespace.
• VQ-06: Axis Labels & Title (2/2) — Distance (km) and Elevation (m) with units. Correct title format.
• VQ-07: Palette Compliance (2/2) — First/only series is #009E73. Light bg = #FAF8F1, dark bg = #1A1A17. Data colors identical across themes. All chrome tokens correctly wired.

Design Excellence (12/20)

• DE-01: Aesthetic Sophistication (5/8) — Gradient fill (palette[0]+BB to palette[0]+18) is a thoughtful terrain silhouette technique. Custom plugin with hollow dots, dashed guide lines, and typographically differentiated label boxes (bold name, secondary elevation) shows real design intent above defaults.
• DE-02: Visual Refinement (3/6) — Grid present on both axes (somewhat busy; y-only preferred for line charts per style guide). No explicit spine removal. Low-opacity grid and elevated-bg label boxes are refined details.
• DE-03: Data Storytelling (4/6) — Terrain narrative flows naturally from Trailhead to Trail End with annotated waypoints. Gradient fill emphasizes terrain mass. Summit Peak at 2450 m reads as clear focal point.

Spec Compliance (14/15)

• SC-01: Plot Type (5/5) — Correct area/line chart with terrain silhouette fill.
• SC-02: Required Features (3/4) — Area fill ✓, landmark vertical marker lines ✓, label boxes with names and elevations ✓, start/end labeled ✓. Missing: vertical exaggeration factor note on the plot (spec explicitly states "Use a vertical exaggeration factor (e.g., 10x) and note it on the plot").
• SC-03: Data Mapping (3/3) — Distance on x-axis (0–80 km), elevation on y-axis (400–2800 m). All data shown correctly.
• SC-04: Title & Legend (3/3) — Title is exactly "area-elevation-profile · javascript · chartjs · anyplot.ai". Legend hidden for single-series chart.

Data Quality (14/15)

• DQ-01: Feature Coverage (5/6) — Shows terrain profile, gradient fill silhouette, 6 landmark annotations with vertical guides, start/end labels, smooth Hermite interpolation. Missing VE annotation reduces coverage slightly.
• DQ-02: Realistic Context (5/5) — Alpine trail with realistic km distances (80 km) and elevation range (880–2450 m). Neutral hiking context.
• DQ-03: Appropriate Scale (4/4) — 80 km trail with 880–2450 m elevation is realistic for alpine terrain.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Hermite function is a data generation utility only; chart config is flat.
• CQ-02: Reproducibility (2/2) — Deterministic data from fixed control points; no randomness.
• CQ-03: Clean Imports (2/2) — No imports; Chart.js is a browser global.
• CQ-04: Code Elegance (2/2) — Custom plugin is appropriate Chart.js extension. No fake interactivity.
• CQ-05: Output & API (1/1) — Follows harness contract; appends exactly one canvas to #container.

Library Mastery (8/10)

• LM-01: Idiomatic Usage (4/5) — Uses plugin API (afterDraw), getPixelForValue() for coordinate conversion, backgroundColor as gradient factory function, fill: 'start' for area fill. All idiomatic Chart.js patterns.
• LM-02: Distinctive Features (4/5) — Custom afterDraw plugin, gradient factory via createLinearGradient inside Chart.js rendering lifecycle, chartArea coordinate system for pixel-accurate annotations — all Chart.js-specific capabilities used effectively.

Score Caps Applied

• None

Strengths

• Gradient area fill (opaque-to-transparent) creates an authentic terrain silhouette that is the standout visual of this chart type
• Custom Chart.js afterDraw plugin for landmark annotations with precise coordinate conversion (getPixelForValue) is idiomatic and sophisticated
• Hermite spline interpolation produces a smooth, realistic elevation profile from sparse control points
• Horizontal clamping logic for label boxes prevents any annotation from spilling outside the chart area
• Perfect dual-theme adaptation: warm off-white light bg, near-black dark bg, elevated-bg label boxes switch correctly, all chrome tokens fully wired

Weaknesses

• Spec requires noting a vertical exaggeration factor on the plot (e.g., "VE: ~10×") — the implementation does not annotate or acknowledge the vertical exaggeration, which the spec explicitly calls for
• Landmark label font sizes are fixed at 13 px/12 px CSS (26/24 px at 2× scale); increasing to 15 px/14 px would improve readability when embedded at gallery size
• Both x and y grid lines are displayed (full grid); the style guide prefers y-axis-only grid for line/area charts — removing the x grid would reduce visual noise
• No top/right spine removal — the Chart.js outer border is visible on all four sides; setting borderColor to transparent on the top/right sides would give a cleaner L-shaped frame

Issues Found

1. SC-02 PARTIAL: Missing vertical exaggeration factor note
   • Fix: Add a subtitle or annotation text to the chart noting the approximate VE (e.g., "Vertical exaggeration: ~10×"), using plugins.subtitle or a canvas text annotation in the plugin
2. DE-02 MEDIUM: Full x+y grid is somewhat busy for an area chart
   • Fix: Set x.grid.display: false (or x.grid.drawOnChartArea: false) to keep only the y-axis grid lines

AI Feedback for Next Attempt

Two targeted fixes needed: (1) Add a vertical exaggeration note — use Chart.js plugins.subtitle with text like "Vertical exaggeration ≈ 10×" or add a canvas text annotation in the existing plugin; (2) Remove the x-axis grid lines (x.grid.display: false) to reduce visual clutter per the style guide preference for y-only grids on line/area charts. Optionally increase landmark label font sizes to 15px/14px for better small-size readability. The core design (gradient fill, custom plugin, Hermite interpolation) is excellent — preserve it.

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) — correct theme surface. Title "area-elevation-profile · javascript · chartjs · anyplot.ai" in dark ink at the top (~55% canvas width), followed by subtitle "Vertical exaggeration ≈ 10×" in secondary ink. X-axis label "Distance (km)" and Y-axis label "Elevation (m)" both at 16px CSS, visually balanced. Tick labels at 14px CSS in muted dark; Y-axis shows 400m–2800m at 400m intervals with subtle grid lines; X-axis shows 0–80km at 10km intervals with no grid — clean visual floor. The terrain profile uses #009E73 (brand green) with a gradient area fill from ~73% opacity at the peaks to ~9% at the baseline, creating a rich mountain silhouette. Six landmark annotations (Trailhead, First Pass, Summit Peak, Mountain Hut, Second Pass, Trail End) appear with hollow circle dots, dashed vertical guides to the x-axis, and themed rounded-corner label boxes showing name and elevation. All text is clearly readable against the warm off-white background.

Dark render (plot-dark.png): Warm near-black background (#1A1A17) — correct dark theme surface. Title and subtitle in light ink; axis labels and tick labels in light secondary ink — all text is light-on-dark and fully readable. Y-axis grid lines are subtle faint rules. Landmark label boxes use elevatedBg (#242420) with readable ink text within. The terrain profile and gradient fill are identical to the light render — #009E73 brand green line and fill with the same gradient stops; data color identity confirmed. No dark-on-dark failures; brand green #009E73 remains clearly visible on the dark surface.

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

Score: 90/100

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

Visual Quality (28/30)

• VQ-01: Text Legibility (7/8) — All sizes explicitly set (title 22px, axis labels 16px, ticks 14px, landmark labels 14–15px); readable in both themes; landmark labels at 15px CSS are appropriate for chart complexity
• VQ-02: No Overlap (5/6) — Labels well-placed with flip-below and horizontal clamping; First Pass (20 km) and Summit Peak (33 km) label boxes are comfortably separated in the render but are horizontally close
• VQ-03: Element Visibility (6/6) — Terrain profile and gradient fill prominently visible; pointRadius=0 appropriate for a 200-point dense profile
• VQ-04: Color Accessibility (2/2) — Single series using #009E73; CVD-safe, adequate contrast on both surfaces
• VQ-05: Layout & Canvas (4/4) — Canvas gate passed; landscape 3200×1800 appropriate for elevation profile; generous whitespace
• VQ-06: Axis Labels & Title (2/2) — "Distance (km)" and "Elevation (m)" with units; correct anyplot title format; subtitle notes vertical exaggeration
• VQ-07: Palette Compliance (2/2) — First series t.palette[0] = #009E73; background #FAF8F1 (light) / #1A1A17 (dark); all chrome tokens theme-adaptive; data colors identical across both renders

Design Excellence (14/20)

• DE-01: Aesthetic Sophistication (6/8) — Gradient area fill, custom landmark plugin with rounded-corner boxes and hollow dots — clearly above defaults; professional mountain-silhouette look; not publication-ready (no slope coloring, no climactic accent on the summit)
• DE-02: Visual Refinement (4/6) — Y-axis grid only (x-axis gridless), legend hidden, generous whitespace; axis border lines create slight box frame that could be further refined toward L-shaped spines
• DE-03: Data Storytelling (4/6) — Landmark journey narrative with dashed guides and labeled boxes; gradient fill conveys terrain depth; missing climactic emphasis on Summit Peak as the narrative high point

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct area/filled-line chart for elevation profile
• SC-02: Required Features (4/4) — Area fill, start/end labels (Trailhead/Trail End), landmark annotations with vertical guides, vertical exaggeration in subtitle
• SC-03: Data Mapping (3/3) — Distance (km) on X, Elevation (m) on Y; 200 sample points within the 50–500 spec range; 80 km trail with 6 landmarks
• SC-04: Title & Legend (3/3) — Title exactly area-elevation-profile · javascript · chartjs · anyplot.ai; no legend (correct for single series)

Data Quality (14/15)

• DQ-01: Feature Coverage (5/6) — Area fill, smooth interpolation, landmark annotations, elevation labels, start/end labels, vertical exaggeration noted; optional slope-based gradient coloring from spec not implemented
• DQ-02: Realistic Context (5/5) — Alpine trail scenario; realistic landmark names (passes, summit, hut, trailhead); neutral outdoor-recreation context
• DQ-03: Appropriate Scale (4/4) — Elevation 880m–2450m realistic for European Alps; 80 km multi-stage trail; values factually plausible

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Flat script: data → canvas → plugin object → Chart; no wrapper classes
• CQ-02: Reproducibility (2/2) — All data hard-coded deterministically; no Math.random()
• CQ-03: Clean Imports (2/2) — No imports; uses global Chart and window.ANYPLOT_TOKENS per harness contract
• CQ-04: Code Elegance (2/2) — Well-structured; Hermite spline appropriately complex for smooth terrain; no fake UI
• CQ-05: Output & API (1/1) — Correct Chart.js API; harness handles file output; animation: false set

Library Mastery (9/10)

• LM-01: Idiomatic Usage (5/5) — Expert Chart.js patterns: gradient backgroundColor as function with chartArea reference, fill: 'start' for area, linear scale with tick callbacks, all required responsive/animation settings
• LM-02: Distinctive Features (4/5) — Custom afterDraw plugin with canvas 2D API (roundRect, arc, setLineDash) is distinctively Chart.js; chartArea-anchored gradient is a pattern unique to this library's declarative data model

Score Caps Applied

• None

Strengths

• Beautiful gradient area fill using the Chart.js backgroundColor function with chartArea reference — idiomatic and visually polished terrain silhouette
• Custom landmarkPlugin using afterDraw with canvas 2D API: hollow dots, dashed vertical guides, and themed rounded-corner label boxes demonstrate deep Chart.js expertise
• Cubic Hermite spline interpolation over 13 hard-coded control points produces a smooth, realistic Alpine terrain profile with no external dependency
• Full theme adaptation: pageBg, elevatedBg, ink, inkSoft, grid tokens all applied correctly — both renders are visually correct and readable
• Label clamping logic prevents landmark boxes from clipping at chart edges; flip-below logic handles high-elevation labels near the chart top

Weaknesses

• DE-01: The optional slope-based gradient coloring (green flat → red steep) mentioned in the spec would add a distinctive second data dimension and elevate the chart to publication-ready level
• DE-02: Axis border lines (border: { color: t.inkSoft }) on both x and y scales create a subtle box frame; removing the top/right equivalents (or borderColor: 'transparent') would align with the style guide's L-shaped spine preference
• DE-03: No climactic emphasis on Summit Peak as the narrative high point — a distinct color accent on the summit label box or a subtle annotation arrow would guide the viewer's eye to the story's peak
• VQ-02: First Pass (20 km) and Summit Peak (33 km) label boxes are close horizontally; if label text were longer they could crowd

Issues Found

1. DE-01 MODERATE: Gradient fill and custom plugin raise this above defaults, but the chart lacks a signature visual element
   • Fix: Implement slope-based fill coloring — compute slope between consecutive points and use a gradient from t.palette[0] (flat) to t.palette[4] (#AE3030, steep) via per-segment coloring or a multi-stop canvas gradient keyed to elevation change per km
2. DE-03 MODERATE: Summit Peak is the visual climax but is not treated specially
   • Fix: Apply a distinct color or slightly larger label box to the Summit Peak annotation (e.g. border stroke in t.palette[1] or icon prefix "▲") to create a visual focal point

AI Feedback for Next Attempt

The chart is well-executed and scores 90/100 — approved. If a repair is attempted for further polish: (1) add slope-based fill coloring to the terrain gradient for a distinctive data-driven aesthetic, and (2) visually accent the Summit Peak landmark (bolder box, icon, or distinct border color) to create a narrative focal point. The axis border-line refinement (removing top/right borders) is a minor VQ/DE detail. Core structure, theme adaptation, and library usage are excellent — do not change them.

Verdict: APPROVED