feat(chartjs): implement pie-basic

[github-actions]

Implementation: pie-basic - javascript/chartjs

Implements the javascript/chartjs version of pie-basic.

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

Parent Issue: #678

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white #FAF8F1 background. Title "pie-basic · javascript · chartjs · anyplot.ai" centered at the top in dark ink, comfortably readable. Pie centered on the canvas with six wedges in Imprint canonical order — AWS #009E73 (31%, exploded ~30 px outward), Microsoft Azure #C475FD (25%), Google Cloud #4467A3 (11%), Alibaba Cloud #BD8233 (4%), Oracle Cloud #AE3030 (3%), Others #2ABCCD (26%). White percent labels (#FAF8F1) sit at each slice midpoint for shares ≥ 4%; Oracle's 3% slice defers to the legend. Right-side legend in dark ink shows swatch + "Category — NN%". All chrome is fully readable; the only caveat is borderline white-on-lavender (25%) and white-on-cyan (26%) percent-label contrast — legible but not optimal.

Dark render (plot-dark.png): Warm near-black #1A1A17 background. Title and legend flipped to light ink (t.ink) and remain clearly readable. Data colors are identical to the light render — only the chrome flipped. Slice-separator strokes are dark (t.pageBg), so wedges sit on thin dark gaps. White percent labels read strongly across every wedge because the dark surface contrasts well even where a label grazes a slice edge. No dark-on-dark failure anywhere; brand green #009E73 is still vivid.

Score: 84/100

Category	Score	Max
Visual Quality	27	30
Design Excellence	11	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	6	10
Total	84	100

Visual Quality (27/30)

• VQ-01: Text Legibility (6/8) — Title + legend clean both themes; white percent labels on lavender / cyan wedges are borderline in light render.
• VQ-02: No Overlap (6/6) — < 4% skip threshold keeps narrow wedges uncluttered.
• VQ-03: Element Visibility (6/6) — Explode on AWS, clean separators.
• VQ-04: Color Accessibility (1/2) — Imprint palette is CVD-safe; half-point off for hardcoded white labels instead of luminance-aware per-slice text color.
• VQ-05: Layout & Canvas (4/4) — 2400×2400 square via //# anyplot-orientation: square; canvas gate passed; nothing clipped.
• VQ-06: Axis Labels & Title (2/2) — Mandated title format; pies have no axes.
• VQ-07: Palette Compliance (2/2) — First slice #009E73, canonical order, chrome flips correctly.

Design Excellence (11/20)

• DE-01: Aesthetic Sophistication (5/8) — Custom afterDatasetsDraw plugin, custom generateLabels, page-bg slice separators.
• DE-02: Visual Refinement (3/6) — Generous canvas padding, bold numerals, clean separator strokes.
• DE-03: Data Storytelling (3/6) — Exploded leader creates a focal point, but the long tail isn't visually de-emphasized and slice order isn't share-sorted.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — type: 'pie'.
• SC-02: Required Features (4/4) — Percent labels, distinct colors, legend, explode on largest — all four delivered.
• SC-03: Data Mapping (3/3) — Categories → labels, values → dataset.data.
• SC-04: Title & Legend (3/3) — Title exactly canonical; legend annotated with percentages.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Six categories spanning leader, mid-tier, narrow wedges, and an Others bucket.
• DQ-02: Realistic Context (5/5) — Global cloud market share — neutral, textbook pie use case.
• DQ-03: Appropriate Scale (4/4) — Six values summing to 100, range 3–31.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Flat top-level script, one plugin object.
• CQ-02: Reproducibility (2/2) — Hardcoded data, no RNG, no fetch.
• CQ-03: Clean Imports (2/2) — Chart global and window.ANYPLOT_TOKENS per harness contract.
• CQ-04: Code Elegance (2/2) — Compact, well-commented, no fake UI.
• CQ-05: Output & API (1/1) — Harness owns output; current Chart.js 4.x config.

Library Mastery (6/10)

• LM-01: Idiomatic Usage (4/5) — animation: false, mount-node contract honored, plugin registered both globally and on options.
• LM-02: Distinctive Features (2/5) — Custom plugin + generateLabels callback show real Chart.js fluency; doesn't push further into Chart.js-only territory.

Score Caps Applied

• None.

Strengths

• Square 2400×2400 canvas correctly declared via //# anyplot-orientation: square — passes the canvas dimension gate.
• Imprint palette positions 1–6 applied in canonical order; first slice #009E73; chrome flips cleanly while data colors stay identical across themes.
• All four spec features present: percent labels on slices, six-category legend with inline percentages, distinct Imprint colors, and explode on the largest slice (AWS, offset: 30).
• Idiomatic Chart.js: animation: false, single canvas appended to #container, no canvas-size tampering, custom afterDatasetsDraw plugin is the canonical way to draw labels on top of the chart.
• Smart < 4% skip threshold defers Oracle's 3% wedge to the legend, avoiding label collisions on the narrow slices.
• generateLabels callback upgrades the legend to "Category — NN%", giving it diagnostic value beyond color identification.

Weaknesses

• Percent-label fill is hardcoded #FAF8F1 regardless of slice color. On the lighter Imprint members (lavender #C475FD on the 25% Microsoft Azure wedge, cyan #2ABCCD on the 26% Others wedge), the white numerals are legible but visibly low-contrast. Consider luminance-thresholding per slice (white on dark slices, t.ink on light slices), or a thin text stroke.
• The 4% Alibaba Cloud label sits inside a very narrow ochre wedge; at fontsize 26 px the digits crowd the wedge edges. Either lift the skip threshold to ~5%, route narrow-slice labels to leader lines outside the slice, or shrink the font for slices below ~6%.
• DE-03 storytelling is light — the leader is exploded, but slice order isn't share-sorted and the long tail isn't visually de-emphasized.
• LM-02 doesn't lean into more distinctive Chart.js features (e.g. doughnut center-text trick, datalabels plugin, hoverOffset visible only in interactive mode).

Issues Found

1. VQ-01 / VQ-04 BORDERLINE: Hardcoded white percent labels under-contrast on lighter slices (lavender, cyan).
   • Fix: Compute label color per slice based on background luminance, or apply a strokeText outline in t.pageBg so the label remains readable on any wedge color.
2. VQ-01 MINOR: The 4% label on the narrow Alibaba Cloud wedge crowds the wedge edges.
   • Fix: Raise the skip threshold to ~5%, or use leader lines for sub-6% slices, or scale label fontsize down for narrow slices.
3. DE-03 LOW-MEDIUM: Tail not visually de-emphasized.
   • Fix: Sort slices by share so the eye sweeps leader → tail, and consider lower-saturation fill or alpha on the Others bucket to signal "aggregate, not a real category".

AI Feedback for Next Attempt

Light-render percent-label contrast on lavender / cyan slices is the main visual nit — switch to per-slice luminance-aware label color or add a thin strokeText outline. Tighten the narrow-slice labels (raise the skip cutoff to ~5% or use leader lines). Optionally sort slices by share for stronger storytelling. Everything else (palette, theme flip, spec features, canvas size, idiomatic Chart.js) is already in great shape.

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 #FAF8F1 background across the full 2400×2400 square canvas. Title "pie-basic · javascript · chartjs · anyplot.ai" centered at the top in dark ink. Pie centered with six wedges in Imprint canonical order — AWS #009E73 (31%, exploded ~30 px outward), Microsoft Azure #C475FD (25%), Google Cloud #4467A3 (11%), Alibaba Cloud #BD8233 (4%), Oracle Cloud #AE3030 (3%), Others (cyan blended 60% toward page-bg, 26%). Percent labels now route per-slice via the new luminance threshold: AWS 31% white, Azure 25% dark ink (was white in attempt 1 — fixed), Google 11% white, Others 26% dark ink (was white — fixed). The 3% and 4% wedges are now skipped (threshold raised from < 4% → < 5%) and live only in the legend. Right-side legend in dark ink shows swatch + "Category — NN%". All chrome fully readable.

Dark render (plot-dark.png): Warm near-black #1A1A17 background. Title and legend flipped to light ink and clearly readable. Data colors are identical to the light render — only chrome flipped. White percent labels read strongly on the dark surface against every wedge color. No dark-on-dark failure anywhere; brand green #009E73 is still vivid. Only minor caveat: legend fontsize (20) reads slightly dim against #1A1A17 relative to the title (34); legible at native 2400 px, slightly small at gallery scale.

Score: 88/100

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

Visual Quality (29/30)

• VQ-01: Text Legibility (7/8) — Per-slice luminance-aware label color resolves attempt-1 contrast nits; dark-render legend at fontsize 20 reads slightly dim relative to title.
• VQ-02: No Overlap (6/6) — < 5% skip threshold prevents narrow-wedge label crowding.
• VQ-03: Element Visibility (6/6) — Imprint palette + 3 px page-bg separators keep wedges distinct.
• VQ-04: Color Accessibility (2/2) — Imprint palette is CVD-safe; luminance-aware label color now correct on every wedge.
• VQ-05: Layout & Canvas (4/4) — 2400×2400 square via //# anyplot-orientation: square; canvas gate passed; nothing clipped.
• VQ-06: Axis Labels & Title (2/2) — Mandated title format exact; pies have no axes.
• VQ-07: Palette Compliance (2/2) — First slice #009E73, canonical order, theme chrome flips cleanly.

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Custom afterDatasetsDraw plugin, luminance-aware label routing, blended Others bucket.
• DE-02: Visual Refinement (4/6) — Page-bg separator strokes, generous canvas padding, bold numerals, refined Others fill.
• DE-03: Data Storytelling (4/6) — Exploded leader + de-emphasized Others; slices still not share-sorted.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — type: 'pie'.
• SC-02: Required Features (4/4) — Percent labels, distinct colors, legend, explode on largest — all four delivered.
• SC-03: Data Mapping (3/3) — Categories → labels, values → dataset.data.
• SC-04: Title & Legend (3/3) — Title exactly canonical; legend annotated with percentages.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Six categories spanning leader, mid-tier, narrow, and Others bucket.
• DQ-02: Realistic Context (5/5) — Global cloud market share — neutral, textbook pie use case.
• DQ-03: Appropriate Scale (4/4) — Six values summing to 100, range 3–31.

Code Quality (9/10)

• CQ-01: KISS Structure (2/3) — Flat top-level script with three small helpers (hexToRgb, blendRgb, relLuminance); justified by the new luminance feature but slightly above pure KISS.
• CQ-02: Reproducibility (2/2) — Hardcoded data, no RNG, no fetch.
• CQ-03: Clean Imports (2/2) — Chart global and window.ANYPLOT_TOKENS per harness contract.
• CQ-04: Code Elegance (2/2) — Compact, well-commented, no fake UI.
• CQ-05: Output & API (1/1) — Harness owns output; current Chart.js 4.x config.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — animation: false, mount-node contract honored, plugin registered both globally and on options.
• LM-02: Distinctive Features (3/5) — Custom afterDatasetsDraw plugin, generateLabels, hoverOffset, per-slice offset, custom tooltip — solid Chart.js fluency.

Score Caps Applied

• None.

Strengths

• Per-slice luminance-aware percent-label color (threshold 0.3) — the prior white-on-lavender / white-on-cyan contrast nit is now resolved: 25% (Azure) and 26% (Others) numerals render in dark ink #1A1A17, while AWS / Google retain off-white #FAF8F1.
• Imprint palette positions 1–6 in canonical order; first slice #009E73; data colors byte-identical between light and dark — only chrome flips.
• Square 2400×2400 canvas via //# anyplot-orientation: square; canvas gate passes; nothing clipped or overflowing.
• All four spec features delivered: percent labels on slices ≥ 5%, distinct colors, six-category legend with inline "Category — NN%", explode on largest slice (AWS, offset: 30).
• < 5% skip threshold (raised from < 4%) defers Oracle's 3% and Alibaba's 4% to the legend — narrow wedges no longer crowd their own digits.
• Idiomatic Chart.js: animation: false, single canvas appended to #container, custom afterDatasetsDraw plugin is the canonical way to draw labels, generateLabels upgrades the legend.
• Others bucket blended 60% toward t.pageBg so it reads as "rest" rather than a named category — light tail de-emphasis addresses the prior DE-03 nit.

Weaknesses

• Dark-render legend text reads slightly low-contrast at viewing scale — labels.color: t.ink is correctly set, but at fontsize 20 against #1A1A17 the swatch + text combo looks dim relative to the title (size 34). Bumping legend fontsize to ~22–24 or boosting weight would lift legibility on small screens.
• Slice order is not share-sorted (AWS 31, Azure 25, Google 11, Alibaba 4, Oracle 3, Others 26). Sorting descending by share (or descending with Others pinned last) would create a cleaner narrative sweep.
• LM-02 doesn't push into uniquely Chart.js territory — hoverOffset and custom tooltip callback only appear in interactive HTML, not the screenshot.
• Three color helpers + plugin push CQ-01 slightly below strict KISS. Justified by the luminance-aware feature, but a future refactor could inline them.

Issues Found

1. VQ-01 MINOR: Dark-render legend text at fontsize 20 looks dim against #1A1A17 at gallery scale.
   • Fix: Bump legend font.size to 22–24 (or weight: "500") so it carries the same visual weight as the percent-label numerals.
2. DE-03 LOW-MEDIUM: Slice order not share-sorted.
   • Fix: Sort by share descending (optionally pinning Others last) so the eye sweeps leader → tail.

AI Feedback for Next Attempt

The attempt-1 contrast feedback was fully addressed — per-slice luminance routing now puts dark ink on the lavender and cyan wedges. Two remaining nits: (1) bump legend fontsize from 20 to ~22–24 to lift dark-mode contrast at gallery scale; (2) sort slices by share descending (Others can stay pinned last) for a cleaner narrative. Everything else (palette, canvas, theme flip, spec features, idiomatic Chart.js) is in great shape.

Verdict: APPROVED