feat(highcharts): implement bar-grouped

[github-actions]

Implementation: bar-grouped - python/highcharts

Implements the python/highcharts version of bar-grouped.

File: plots/bar-grouped/implementations/python/highcharts.py

Parent Issue: #1822

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Background is pure white (not the required #FAF8F1). Title and axis labels are dark and readable. The chart displays a grouped bar chart with 4 quarters on the X-axis and 3 product lines (Electronics, Clothing, Home & Garden). Data colors are #306998 (Python blue, first series), #FFD43B (yellow), and #9467BD (purple) — these are NOT the Okabe-Ito palette required by anyplot.ai. The first series should be #009E73 (brand green). Grid lines are visible with dashed style. Legend is positioned top-right with floating background. Data labels on bars show precise values. Overall layout is good but palette is completely non-compliant with the anyplot.ai style guide.

Dark render (plot-dark.png): Background is very dark (appears to be pure black, not the required #1A1A17). CRITICAL FAILURE: Axis labels and tick labels are dark gray/black on the dark background — nearly invisible and unreadable. The title is also dark-on-dark. Data bar colors remain the same (correct for consistency), but the implementation does not adapt text colors for the dark theme. The dark render is broken and unusable. This fails the mandatory readability check: "No text is dark on dark" — this render violates that requirement completely.

Score: 60/100

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

Visual Quality (13/30)

• VQ-01: Text Legibility (2/8) - Dark mode text is unreadable (dark labels on dark background). Critical failure.
• VQ-02: No Overlap (6/6) - Bars well-spaced, no overlap
• VQ-03: Element Visibility (6/6) - All bars clearly visible
• VQ-04: Color Accessibility (1/2) - Custom colors lack Okabe-Ito compliance
• VQ-05: Layout & Canvas (4/4) - Good proportions
• VQ-06: Axis Labels & Title (2/2) - Descriptive with units
• VQ-07: Palette Compliance (0/2) - CRITICAL: Wrong colors (#306998, #FFD43B, #9467BD instead of Okabe-Ito starting with #009E73). Wrong backgrounds (pure white/black instead of #FAF8F1/#1A1A17). Dark mode unreadable. Theme-adaptive chrome not implemented.

Design Excellence (6/20)

• DE-01: Aesthetic Sophistication (2/8) - Generic Python-palette styling, no design intent
• DE-02: Visual Refinement (2/6) - Library defaults with minimal customization
• DE-03: Data Storytelling (2/6) - Data displayed but no visual hierarchy

Spec Compliance (13/15)

• SC-01: Plot Type (5/5) - Correct grouped bar chart
• SC-02: Required Features (4/4) - All features present
• SC-03: Data Mapping (3/3) - Correct mapping
• SC-04: Title & Legend (1/3) - Title says "pyplots.ai" instead of "anyplot.ai"

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) - Shows all chart aspects
• DQ-02: Realistic Context (5/5) - Realistic business scenario
• DQ-03: Appropriate Scale (4/4) - Good scale choices

Code Quality (6/10)

• CQ-01: KISS Structure (3/3) - Simple, linear
• CQ-02: Reproducibility (2/2) - Deterministic data
• CQ-03: Clean Imports (2/2) - Only necessary imports
• CQ-04: Code Elegance (1/2) - Hardcoded colors, doesn't read ANYPLOT_THEME
• CQ-05: Output & API (0/1) - VIOLATION: Saves as plot.png not plot-light.png. Should generate both themes.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) - Correct Chart/ColumnSeries usage but ignores theme-adaptive patterns
• LM-02: Distinctive Features (3/5) - Uses data labels nicely

Score Caps Applied

• None explicitly, but VQ-07 = 0 combined with VQ-01 = 2 indicates systemic theme failure

Strengths

• Correct grouped bar chart implementation
• Clear, non-overlapping bar layout
• Realistic, well-chosen business data scenario
• Good font sizing in light mode
• Helpful data labels for precision

Weaknesses

• Palette non-compliant: Uses Python legacy colors instead of Okabe-Ito palette starting with #009E73
• Dark mode unreadable: Dark text on dark background violates accessibility
• No theme-adaptive implementation: Doesn't read ANYPLOT_THEME or use theme tokens
• Wrong output filenames: Saves as plot.png instead of plot-light.png/plot-dark.png
• Wrong backgrounds: Pure white/black instead of style-guide colors
• Title domain wrong: Says "pyplots.ai" not "anyplot.ai"

Issues Found

1. VQ-01 / VQ-07 CRITICAL: Dark render is completely unreadable — dark text on dark background. Implement full theme-adaptive architecture using INK and INK_SOFT tokens. Text must be light (#F0EFE8) in dark theme.
2. VQ-07 CRITICAL: Replace palette with Okabe-Ito: first series #009E73, then #D55E00, #0072B2. Update backgrounds to #FAF8F1 (light) and #1A1A17 (dark).
3. CQ-05 CRITICAL: Read ANYPLOT_THEME environment variable. Output to plot-{THEME}.png and plot-{THEME}.html. Apply theme tokens to all chart options (chart.backgroundColor, text colors, grid colors).
4. SC-04: Fix title domain to "anyplot.ai".

AI Feedback for Next Attempt

Rewrite the implementation to use the theme-adaptive architecture from the highcharts library guide:

• Read ANYPLOT_THEME environment variable and set all non-data colors from theme tokens (PAGE_BG, ELEVATED_BG, INK, INK_SOFT, GRID)
• Replace legacy Python colors with Okabe-Ito palette starting with brand green (#009E73)
• Output to plot-light.png/plot-dark.png with correct filenames
• Verify dark mode is readable before submission
• Fix title to use "anyplot.ai" domain

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): Background is the correct warm off-white #FAF8F1. Title "bar-grouped · highcharts · anyplot.ai" is clearly visible in dark text (INK color) at the top. Subtitle "Quarterly Revenue by Product Line (in thousands USD)" is displayed in softer secondary text. The chart displays a grouped bar chart with 4 quarters (Q1, Q2, Q3, Q4) on the X-axis and 3 product lines (Electronics, Clothing, Home & Garden) grouped side-by-side for each quarter. Y-axis is labeled "Revenue (thousands USD)" with scale from 0 to 400 in increments of 100. The first series (Electronics) uses brand green #009E73, second series (Clothing) uses vermillion #D55E00, and third series (Home & Garden) uses blue #0072B2 — correct Okabe-Ito colors in order. Data labels on each bar show precise values (e.g., "245K", "312K"). Legend is positioned floating on the right side with proper background frame. Grid lines are subtle and support readability. All text is clearly readable against the light background — no legibility issues.

Dark render (plot-dark.png): Background is the correct warm near-black #1A1A17. Title and subtitle text are now light-colored (#F0EFE8 for primary, #B8B7B0 for secondary) and completely readable on the dark background. X-axis and Y-axis labels and tick labels are all in light colors with proper contrast. The data bar colors are identical to the light render (green, orange, blue) — only the chrome (background, text, axis lines, grid) has adapted to dark theme. No dark-on-dark text failures — all elements are properly contrast-adjusted. Legend frame and all text maintain readability. Both renders demonstrate proper theme-adaptive implementation.

Score: 87/100

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

Visual Quality (28/30)

• VQ-01: Text Legibility (8/8) — All text clearly readable in both themes with proper contrast
• VQ-02: No Overlap (6/6) — Bars well-spaced, no colliding elements
• VQ-03: Element Visibility (6/6) — All markers and labels clearly visible
• VQ-04: Color Accessibility (2/2) — Okabe-Ito palette is CVD-safe
• VQ-05: Layout & Canvas (4/4) — Excellent proportions at 4800×2700
• VQ-06: Axis Labels & Title (2/2) — Descriptive labels with units
• VQ-07: Palette Compliance (0/2) — Data colors correct but limited distinctive styling

Design Excellence (15/20)

• DE-01: Aesthetic Sophistication (5/8) — Professional but straightforward without custom elements
• DE-02: Visual Refinement (6/6) — Good refinement with subtle borders and proper spacing
• DE-03: Data Storytelling (4/6) — Clear story but lacks emphasis techniques

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct grouped bar chart
• SC-02: Required Features (4/4) — All features present
• SC-03: Data Mapping (3/3) — Correct mapping
• SC-04: Title & Legend (3/3) — Correct format and labels

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — All aspects shown
• DQ-02: Realistic Context (5/5) — Realistic business scenario
• DQ-03: Appropriate Scale (4/4) — Sensible values

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — No unnecessary functions
• CQ-02: Reproducibility (2/2) — Deterministic data
• CQ-03: Clean Imports (2/2) — Only necessary imports
• CQ-04: Code Elegance (2/2) — Proper theme adaptation
• CQ-05: Output & API (1/1) — Correct filenames and outputs

Library Mastery (4/10)

• LM-01: Idiomatic Usage (4/5) — Proper Chart/ColumnSeries usage with theme adaptation
• LM-02: Distinctive Features (0/5) — No interactive features or advanced highcharts capabilities

Score Caps Applied

• None — score flows naturally from criteria

Strengths

• Critical repair complete: All attempt-1 failures resolved (dark mode readable, palette correct, theme-adaptive architecture, output filenames)
• Theme-adaptive excellence with proper contrast and readability in both light and dark renders
• Okabe-Ito palette compliance with correct color positions and theme-independent data colors
• Professional, clean code structure with proper selenium integration and correct file outputs
• Realistic business data scenario with clear quarterly and product comparisons

Weaknesses

• Limited design sophistication: uses library defaults without custom visual enhancements
• No distinctive highcharts features: lacks interactive tooltips, animations, or advanced formatting
• No visual emphasis or focal point techniques to guide viewer attention

Issues Found

1. LM-02 LOW: Could enhance with highcharts distinctive features
   • Fix: Consider adding interactive hover tooltips showing exact values, tooltip formatting, or custom dataLabel positioning for emphasis

AI Feedback for Next Attempt

The implementation has successfully resolved all critical issues from attempt 1. The repair was thorough and correct. The chart is production-ready with proper theme adaptation, correct palette, and good accessibility. To reach higher design excellence, consider adding interactive tooltips with custom formatting (highcharts strength) or enhanced data labels with custom styling.

However, for a grouped bar chart, the current implementation is solid and functional. The main opportunity is to showcase what makes highcharts distinctive in the interactive library space.

Verdict: APPROVED ✅