feat(chartjs): implement dumbbell-basic

[github-actions]

Implementation: dumbbell-basic - javascript/chartjs

Implements the javascript/chartjs version of dumbbell-basic.

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

Parent Issue: #945

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Horizontal dumbbell chart on a warm off-white (#FAF8F1) background. The Y-axis lists 10 corporate departments (Legal through Engineering, sorted ascending by score improvement). The X-axis shows "Training Score" from 50 to 100. "Before Program" dots are rendered in brand green (#009E73) and "After Program" dots in lavender (#C475FD) — both from the Imprint palette. Subtle grey connecting lines (55% opacity, rounded caps) link each pair. The legend sits at the top centre with correct colour swatches. Title, axis label, tick labels, and legend text are all dark-coloured and clearly readable against the light background. Grid lines are soft and non-dominant. No text is light-on-light. Legibility verdict: PASS.

Dark render (plot-dark.png): Same chart on a warm near-black (#1A1A17) background. Data colours are identical to the light render — green and lavender dots unchanged. All chrome (title, axis label, tick labels, legend) is rendered in light text, clearly readable against the dark surface. Connecting lines remain visible. Grid lines adapt to the dark theme. No dark-on-dark failures observed. Legibility verdict: PASS.

Both paragraphs confirmed. Review is valid.

Score: 92/100

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

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) — All font sizes explicitly set (title 22px, legend 16px, axis title 16px, ticks 14px). Title fills ~60% width, well within expected range. Proportions balanced in both renders.
• VQ-02: No Overlap (6/6) — No text collisions. 10 departments are well-spaced; legend and title are separated.
• VQ-03: Element Visibility (6/6) — pointRadius 11 is appropriately prominent for 10 sparse data points. Connecting lines visible but subtle.
• VQ-04: Color Accessibility (2/2) — Green (#009E73) and lavender (#C475FD) are perceptually distinct and CVD-safe per Imprint palette design.
• VQ-05: Layout & Canvas (4/4) — Chart fills canvas well. Balanced margins. No content cut off.
• VQ-06: Axis Labels & Title (2/2) — X-axis labelled "Training Score" (descriptive; training scores are dimensionless). Y-axis uses category tick labels appropriately. Title matches required format.
• VQ-07: Palette Compliance (2/2) — "Before Program" = t.palette[0] (#009E73) ✓. "After Program" = t.palette[1] (#C475FD) ✓. Backgrounds #FAF8F1 / #1A1A17 correct. All chrome uses theme-adaptive tokens (t.ink, t.inkSoft, t.grid).

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (6/8) — Strong design: correct Imprint palette, custom canvas background plugin, dot-border trick (borderColor: t.pageBg) creates a clean separation effect, intentional data sorting by improvement delta. Clearly above defaults but not quite FiveThirtyEight-level publication polish.
• DE-02: Visual Refinement (3/6) — Subtle theme-adaptive grid is good, connecting lines at 55% opacity is a nice touch. However, scale borders (top and right "spines") are visible on all 4 sides of the chart area — the style guide default calls for removing top/right spines (L-frame). Setting on the x-scale (or using as the border color) would close this gap.
• DE-03: Data Storytelling (4/6) — Sorting ascending by improvement delta so the largest gains rise to the top is genuine data storytelling — it immediately reveals that Product and Engineering benefited most. The viewer's eye traces a narrative without needing annotations. No additional focal-point emphasis (e.g. accent colour on top performer), but the structural choice is intentional and effective.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct dumbbell chart: two dots per row connected by a line, implemented via Chart.js scatter + custom beforeDatasetsDraw plugin.
• SC-02: Required Features (4/4) — Horizontal orientation with categories on Y-axis ✓. Two distinct colours for start/end dots ✓. Connecting lines ✓. Sorted by improvement to reveal patterns ✓.
• SC-03: Data Mapping (3/3) — Categories on Y, values on X. All 10 data rows visible within the 50–100 range.
• SC-04: Title & Legend (3/3) — Title is "dumbbell-basic · javascript · chartjs · anyplot.ai" ✓. Legend labels "Before Program" / "After Program" are descriptive and match the data.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Shows varied improvement sizes (small: Legal +7, large: Product +19). All 10 departments within the recommended 5–20 range. Before/after contrast is clear across all categories.
• DQ-02: Realistic Context (5/5) — Training scores before and after a skills development program by department — a real, neutral, comprehensible business scenario with plausible department names.
• DQ-03: Appropriate Scale (4/4) — Scores in the range 57–91 on a 50–100 scale. Improvements of 7–19 points are realistic for a corporate training programme.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Follows data → mount → plugins → chart flow. No top-level functions or classes.
• CQ-02: Reproducibility (2/2) — All data is hard-coded and deterministic.
• CQ-03: Clean Imports (2/2) — No imports; Chart and ANYPLOT_TOKENS are consumed as harness-provided globals.
• CQ-04: Code Elegance (2/2) — Clean, appropriate complexity. Custom plugins are the idiomatic Chart.js solution for non-native chart types. No over-engineering.
• CQ-05: Output & API (1/1) — No manual save; harness handles PNG+HTML output. Uses Chart.js 4.x API correctly.

Library Mastery (9/10)

• LM-01: Idiomatic Usage (5/5) — Expertly uses Chart.js scatter type with numeric y-axis + tick callback for category labels. bgPlugin and dumbbellPlugin follow the Chart.js plugin API contract correctly. responsive/maintainAspectRatio/animation flags set per spec.
• LM-02: Distinctive Features (4/5) — Leverages the Chart.js plugin lifecycle hook (beforeDatasetsDraw) for direct canvas drawing to implement the dumbbell connector — a pattern unique to Chart.js's plugin architecture. The tick callback remapping numeric indices to category labels is also a Chart.js-specific idiom. Minor deduction: the approach is partly a workaround for Chart.js not having a native dumbbell type.

Score Caps Applied

• None — no cap conditions triggered.

Strengths

• Perfect Imprint palette compliance: brand green (#009E73) first, lavender (#C475FD) second, correct theme-adaptive backgrounds and chrome across both renders
• Clever and idiomatic use of Chart.js beforeDatasetsDraw plugin hook for the dumbbell connecting lines — correct library-native approach for a non-native chart type
• Meaningful data storytelling: sorting by improvement delta makes the chart self-explanatory without annotations
• Deterministic data with a realistic, neutral business scenario covering a good range of improvement magnitudes
• Dot border trick (borderColor: t.pageBg) adds subtle visual polish

Weaknesses

• Top and right scale borders (spines) are visible on all 4 sides of the chart area. Style guide calls for an L-frame (remove top/right). Fix: add to the x-scale options and set on the y-scale — or use as the border color so only the axis-aligned borders show.

Issues Found

1. DE-02 MINOR: Top/right scale borders visible — chart renders as a box rather than an L-frame.
   • Fix: removes the top border; removes the right border (or set to match grid).

AI Feedback for Next Attempt

Strong implementation — only minor refinement needed. Remove the top and right scale borders by adding to both the x and y scale options. This converts the boxed chart area to an L-frame, consistent with the style guide's default spine treatment and will lift DE-02 from 3 to 5+.

Verdict: APPROVED