feat(chartjs): implement bar-stacked-percent

[github-actions]

Implementation: bar-stacked-percent - javascript/chartjs

Implements the javascript/chartjs version of bar-stacked-percent.

File: plots/bar-stacked-percent/implementations/javascript/chartjs.js

Parent Issue: #2008

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (~#FAF8F1). Title "bar-stacked-percent · javascript · chartjs · anyplot.ai" in dark ink, centered top. X-axis title "Quarter" and Y-axis title "Share of Cloud Infrastructure Revenue" both dark and legible. Six stacked bars (Q1 2023-Q2 2024), each normalized to 100%, with a consistent bottom-to-top segment order: AWS (brand green), Azure (lavender), Google Cloud (blue), Alibaba Cloud (ochre), Other (dark muted gray). Legend below the plot with all five swatches. Subtle horizontal-only gridlines. All text is clearly readable against the light background — no light-on-light issues.

Dark render (plot-dark.png): Warm near-black background (~#1A1A17). Same layout and title, now rendered in light ink/off-white — fully legible. Data colors for AWS, Azure, Google Cloud, and Alibaba Cloud are pixel-identical to the light render, confirming categorical color stability across themes. The "Other" segment correctly flips from dark muted gray to light muted gray, which is expected since "muted" is a theme-adaptive semantic anchor, not a fixed categorical color. No dark-on-dark failures — all tick labels, axis titles, and legend text are clearly visible against the near-black surface.

Both renders viewed directly. Canvas dimensions verified at exactly 3200×1800 (landscape) — the canvas dimension gate did not fire.

Score: 88/100

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

• DE-01: Aesthetic Sophistication (4/8) - Well-configured library default; thoughtful bar spacing and palette use, but no custom typographic flourish or data labels
• DE-02: Visual Refinement (4/6) - Subtle single-axis grid, no visible frame, generous whitespace via bar-gap tuning
• DE-03: Data Storytelling (2/6) - Data displayed accurately but with no emphasis or annotation guiding the viewer to a specific insight

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)
• LM-02: Distinctive Features (3/5) - categoryPercentage/barPercentage bar-gap tuning is a genuine Chart.js knob but conceptually generic across bar-chart libraries

Score Caps Applied

• None

Strengths

• Correct 100% stacked bar normalization — every quarter's segments sum to exactly 100%, confirmed by cross-checking raw revenue values against rendered segment widths
• Full Imprint palette compliance: AWS is #009E73 (position 1), Azure/Google Cloud/Alibaba Cloud follow canonical positions 2-4, and "Other" correctly uses the theme-adaptive muted anchor instead of consuming a categorical slot
• Theme-adaptive chrome is flawless in both renders — no dark-on-dark or light-on-light failures anywhere
• Bar spacing (categoryPercentage/barPercentage) tuned for generous, intentional whitespace rather than the cramped Chart.js default
• Realistic, neutral, business-appropriate dataset (public cloud market share by provider/quarter) with plausible proportions
• Clean, idiomatic Chart.js usage: stacked scales, tooltip percentage formatting, deterministic data, animation disabled per harness contract

Weaknesses

• Design Excellence is only "well-configured default" territory — the spec explicitly suggests "consider adding percentage labels within segments when space permits"; adding value labels to the larger segments (AWS, Azure) would raise both DE-01 and DE-03 without touching the data model
• No visual hierarchy or emphasis beyond color — a subtle annotation, callout, or emphasized stroke on one series (e.g. AWS's persistent lead, or Alibaba's shrinking share) would elevate the storytelling
• LM-02 leans on a fairly generic bar-gap tuning feature; a more Chart.js-specific capability (e.g. borderRadius on bar segments, or a customized tooltip title callback showing the quarter's total) would better showcase library mastery
• Bar segments use borderWidth: 0 — a subtle 1px surface-color edge between stacked segments (per the style guide's "Bar edges" guidance) would add a touch more definition, though current contrast is already sufficient for legibility

Issues Found

1. DE-01/DE-03 LOW: Technically excellent but visually generic — no data labels or emphasis despite the spec explicitly suggesting percentage labels within segments
   • Fix: Add percentage value labels to the larger stacked segments (e.g. via chartjs-plugin-datalabels equivalent or manual afterDatasetsDraw text), and consider emphasizing one series (AWS's leading share, or Alibaba's decline) through a subtle stroke, callout, or size cue
2. LM-02 LOW: Uses only generic bar-gap tuning, not a distinctively Chart.js feature
   • Fix: Add borderRadius on the bar segments, or a custom tooltip title callback that surfaces the quarter's total revenue alongside each provider's share

AI Feedback for Next Attempt

This is a technically excellent, spec-compliant, and palette-correct implementation — the remaining gap is purely in Design Excellence and Library Mastery. Add percentage data labels within the larger segments (the spec explicitly suggests this), introduce a subtle visual emphasis or annotation to create a clear storytelling focal point, and lean into a more Chart.js-distinctive feature (bar borderRadius, or a richer tooltip title callback) to push past the "well-configured default" tier.

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 "bar-stacked-percent · javascript · chartjs · anyplot.ai" in dark ink, centered top, ~55-60% of plot width. X-axis title "Quarter" and Y-axis title "Share of Cloud Infrastructure Revenue" both dark and legible. Six stacked bars (Q1 2023-Q2 2024), each normalized to exactly 100%, bottom-to-top order AWS (brand green #009E73) / Azure (lavender) / Google Cloud (blue) / Alibaba Cloud (ochre) / Other (muted gray, theme-adaptive semantic anchor). Every segment now carries a rounded percentage label, with per-segment text color chosen for contrast against that segment's own fill — verified correct for all five hues by hand (YIQ luminance). AWS's bar has a distinct ink outline on all sides, calling out its persistent market lead versus the other providers' subtle 1px page-bg seams. Legend below the plot with all five swatches, fully readable. All text is clearly readable against the light background — no light-on-light issues.

Dark render (plot-dark.png): Warm near-black background (~#1A1A17). Same layout and title, rendered in light ink/off-white — fully legible. Data colors for AWS, Azure, Google Cloud, and Alibaba Cloud are pixel-identical to the light render, confirming categorical color stability across themes. The "Other" segment correctly flips from dark muted gray to light muted gray (expected — muted is a theme-adaptive anchor, not a fixed categorical color), and its percentage-label text color flips accordingly to stay legible. AWS's leader-outline correctly flips from black ink to off-white ink. No dark-on-dark failures — all tick labels, axis titles, legend text, and segment labels are clearly visible against the near-black surface.

Both renders viewed directly. Canvas dimension gate did not fire (/tmp/anyplot-canvas-gate.txt absent) — dimensions confirmed at 3200×1800 landscape.

Score: 95/100

Category	Score	Max
Visual Quality	30	30
Design Excellence	16	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	9	10
Total	95	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) - Custom per-segment percentage labels with luminance-aware text color, plus a leader-highlight border, show real polish beyond a well-configured default
• DE-02: Visual Refinement (5/6) - Subtle single-axis grid, generous whitespace, and now subtle page-bg seams between segments per the style guide's "Bar edges" guidance
• DE-03: Data Storytelling (5/6) - AWS's ink-outlined bar creates a clear focal point calling out the persistent leader; percentage labels make exact composition scannable at a glance

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 (9/10)

• LM-01: Idiomatic Usage (5/5)
• LM-02: Distinctive Features (4/5) - Custom afterDatasetsDraw plugin is a genuine Chart.js-specific extensibility feature, addressing the Attempt-1 note about generic bar-gap tuning; docked slightly since it's the single distinctive feature rather than several layered together

Score Caps Applied

• None

Strengths

• Repair attempt fully addresses every weakness from Attempt 1: percentage labels now render inside each segment via a custom afterDatasetsDraw plugin, AWS's persistent lead is highlighted with a dedicated ink-colored border, subtle page-bg seams separate the remaining segments, and the tooltip title callback now surfaces the quarter's total revenue
• Per-segment label color is computed from fill luminance (YIQ) rather than hardcoded, so text stays legible against every one of the five distinct fill colors in both themes
• Full Imprint palette compliance: AWS is #009E73 (position 1), Azure/Google Cloud/Alibaba Cloud follow canonical positions 2-4, and "Other" correctly uses the theme-adaptive muted anchor instead of consuming a categorical slot
• Theme-adaptive chrome is flawless in both renders, including the AWS leader-border flipping from black (light) to off-white (dark) via t.ink
• Correct 100% stacked-bar normalization — every quarter's segments sum to exactly 100%, with raw-dollar totals exposed via the tooltip for context
• Realistic, neutral, business-appropriate dataset (public cloud market share by provider/quarter) with plausible, gradually shifting proportions

Weaknesses

• Bar segments still use square corners — a subtle borderRadius on the outer top/bottom corners of each stack would add one more touch of polish (nice-to-have, not a defect)
• The custom label plugin hardcodes "600 13px sans-serif" instead of a shared font-family token — purely cosmetic, no legibility impact observed in either render

Issues Found

None blocking — the two items above are minor polish suggestions only.

AI Feedback for Next Attempt

N/A — approved at 95/100. If ever revisited: a subtle borderRadius on the stacked bars would be the next incremental refinement.

Verdict: APPROVED