feat(highcharts): implement bar-basic

[github-actions]

Implementation: bar-basic - python/highcharts

Implements the python/highcharts version of bar-basic.

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

Parent Issue: #612

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white #FAF8F1 background — correctly themed. Bold title "bar-basic · python · highcharts · anyplot.ai" spans ~70% of canvas width in dark ink, clearly readable. Subtitle "Electronics dominates with 4,800 units — 10× more than Toys" in softer ink — visible. Y-axis label "Sales (Units)" and X-axis label "Product Category" both readable at appropriate size. Tick labels (0–5,000 on Y; six categories on X) are clear with no overlap. The "Avg: 2,205 units" plot-line label on the far right is readable but sits very close to the right canvas margin (~12 px clearance). Electronics bar renders in brand green #009E73 — immediately draws the eye. Remaining five bars in muted grey-green (#6B6A63). Data labels (4,800 / 3,100 / 2,200 / 1,700 / 950 / 480) bold and visible above each bar. All text is readable against the light background.

Dark render (plot-dark.png): Warm near-black #1A1A17 background — correctly themed. Title and subtitle rendered in light cream (#F0EFE8 range) — clearly readable against dark surface. Axis labels and tick labels in lighter secondary text (#B8B7B0 range) — all visible, no dark-on-dark failures. Electronics bar is identical brand green #009E73 — data color is consistent with the light render. Remaining bars adapt to #A8A79F (muted dark-theme token) appearing as silver-grey — clear contrast against the dark background. Data labels in light ink clearly visible above bars. Dashed avg line and label readable. All text is readable against the dark background with no dark-on-dark issues.

Score: 89/100

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

Visual Quality (29/30)

• VQ-01: Text Legibility (7/8) — All font sizes explicitly set (66px title, 56px axis labels, 44px tick/data labels). Well-proportioned and readable in both themes. Minor: "Avg: 2,205 units" label has only ~12 px right-margin clearance — tight but not clipped.
• VQ-02: No Overlap (6/6) — No text overlaps with other text or data elements in either render.
• VQ-03: Element Visibility (6/6) — All 6 bars clearly visible, proportionally sized. Data labels bold and readable.
• VQ-04: Color Accessibility (2/2) — Two-color scheme (brand green + muted grey) is CVD-safe with strong contrast in both themes.
• VQ-05: Layout & Canvas (4/4) — Chart fills canvas well, balanced margins, ~70% canvas utilization.
• VQ-06: Axis Labels & Title (2/2) — Y: "Sales (Units)" with units. X: "Product Category" descriptive. Title format matches spec.
• VQ-07: Palette Compliance (2/2) — Electronics (first series) correctly uses #009E73. Secondary bars use ANYPLOT_MUTED semantic anchor — valid use for "other/rest". Backgrounds #FAF8F1 / #1A1A17 correct. All chrome tokens theme-adaptive.

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Above default: intentional color emphasis (green focal bar + muted secondary), insight-driven subtitle, rounded bar corners. Not yet "strong design" (6) — the five uniform muted-grey bars create a somewhat flat visual texture.
• DE-02: Visual Refinement (4/6) — Good: subtle grid (rgba 0.15 opacity), legend disabled, credits disabled, generous margins. Minor: Highcharts plot frame/border still visible; explicit plotBorderWidth: 0 would sharpen the look.
• DE-03: Data Storytelling (4/6) — Good visual hierarchy: color contrast creates clear focal point on Electronics, subtitle directly states the insight, bars sorted descending for ranking, average line provides context.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct vertical bar chart (ColumnSeries) with consistent bar widths.
• SC-02: Required Features (4/4) — Consistent widths, value labels above bars, color highlight on top performer, adequate spacing.
• SC-03: Data Mapping (3/3) — X: product categories. Y: sales units. All 6 data points visible.
• SC-04: Title & Legend (3/3) — Title exactly matches bar-basic · python · highcharts · anyplot.ai. Legend correctly omitted for single-series.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Shows all bar-chart aspects: 6 categories, 10× value range, ranking via sort, reference line, data labels for precision.
• DQ-02: Realistic Context (5/5) — Product sales by retail category — real, neutral, comprehensible business scenario.
• DQ-03: Appropriate Scale (4/4) — Sales values 480–4,800 units are plausible retail volumes; 10× spread is realistic for category differentiation.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Clean linear structure with no functions or classes.
• CQ-02: Reproducibility (2/2) — Fully deterministic hardcoded data.
• CQ-03: Clean Imports (2/2) — All imports used; re is needed for the format-template workaround.
• CQ-04: Code Elegance (2/2) — Clean Pythonic code; the re.sub workaround for to_js_literal() format strings is documented and necessary.
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png and plot-{THEME}.html correctly.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Good: Chart(container='container'), ColumnSeries.from_dict(), chart.add_series(). Minor: per-point color override via data_points dict is valid but chart.options.colors + colorByPoint would be more idiomatic for this pattern.
• LM-02: Distinctive Features (3/5) — Uses Highcharts-specific plotLines with label for the avg reference and per-point color data. Not yet leveraging deeply distinctive Highcharts features (drilldown, chart.renderer, colorAxis, etc.).

Score Caps Applied

• None

Strengths

• Intentional color emphasis (Electronics in #009E73, rest in muted) creates immediate focal point — design intent is clear
• Subtitle directly states the insight, making the chart self-explaining
• Average reference line (plotLine at 2,205) adds contextual depth
• Both themes fully correct: #FAF8F1 / #1A1A17 backgrounds, all chrome tokens adaptive, no dark-on-dark failures
• Data labels above every bar with comma-formatting enable precise reading
• Perfect spec compliance (15/15) and data quality (15/15)
• Clean KISS code with full deterministic reproducibility

Weaknesses

• DE-01: Five uniform muted-grey bars create flat visual texture — consider adding subtle opacity gradient within muted bars or varying bar alpha by value rank to add depth
• DE-02: Highcharts plot border/frame still visible — add chart.options.chart = {'plotBorderWidth': 0} (or set it in the existing chart dict) to fully remove the inner frame for a cleaner minimal look
• VQ-01 / VQ-05: "Avg: 2,205 units" label has only ~12 px right-margin clearance — increase marginRight from 80 to ~120 to give it breathing room
• LM-02: Only basic plotLines used as Highcharts-distinctive feature — consider Highcharts' native chart.renderer for rank badges, or a colorAxis + per-point Y-value gradient to demonstrate a feature that sets Highcharts apart

Issues Found

1. DE-01 BELOW 6: Uniform muted secondary bars reduce visual sophistication
   • Fix: Add subtle opacity variation by rank (e.g., bars Add Claude Code GitHub Workflow #2–Create test issue and merge via GitHub #6 at alpha 0.85, 0.75, 0.65, 0.55, 0.45) or add a thin branded stroke on the top-2 bars to create a visual gradient of emphasis
2. DE-02: Plot border frame visible
   • Fix: Add 'plotBorderWidth': 0 to the chart options dict
3. LM-02: Opportunity to use a more distinctive Highcharts feature
   • Fix: Use chart.renderer.label() to draw rank badges ("Add workflow diagram for new prototype discovery #1", "Add Claude Code GitHub Workflow #2") on bars, or use colorByPoint: True with chart.options.colors set to a rank-gradient of anyplot palette stops

AI Feedback for Next Attempt

Score is 89 — very close to 90. Three focused fixes will push it over: (1) Remove the plot border frame (plotBorderWidth: 0) for cleaner minimal look. (2) Increase marginRight to ~120px so the avg line label has breathing room. (3) Add subtle opacity variation on the muted bars (e.g., opacity: 0.9 → 0.5 across ranks 2–6) to break the flat grey texture and lift DE-01 to 6. These are small targeted changes — do not restructure the overall layout or data approach, which is already excellent.

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): The chart displays on a warm off-white #FAF8F1 background. The title "bar-basic · python · highcharts · anyplot.ai" renders in bold dark text at ~70% of canvas width — expected for this mandated title format. A subtitle "Electronics dominates with 4,800 units — 10× more than Toys" appears in a slightly muted secondary tone. The y-axis label "Sales (Units)" and x-axis label "Product Category" are clearly visible and proportionally sized. The Electronics bar is rendered in brand green #009E73, while the remaining five bars (Clothing, Home & Garden, Sports, Books, Toys) appear in a muted gray tone with progressively decreasing opacity (rank-fade from 0.90 to 0.42). A dashed average reference line at ~2,205 units with a right-aligned label is visible. Data labels (4,800 / 3,100 / 2,200 / 1,700 / 950 / 480) are positioned above each bar. Y-axis gridlines are subtle. All text is clearly readable against the light background. Legibility verdict: PASS.

Dark render (plot-dark.png): The same chart renders on a warm near-black #1A1A17 background. The title and subtitle text have flipped to light/cream, all clearly readable. The Electronics bar remains in brand green #009E73 — identical to the light render as required. The secondary bars now appear in a lighter grayish-silver tone (the ANYPLOT_MUTED dark token #A8A79F with rank-fade opacity), contrasting well against the near-black background. The dashed average line and its label, y-axis gridlines, all axis labels, tick labels, and data labels are readable in light-colored text. No dark-on-dark issues detected. Data colors are confirmed identical to the light render — only chrome (background, text, grid) flipped. Legibility verdict: PASS.

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

Score: 94/100

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

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) — All font sizes explicitly set (title 66px, axis labels 56px, tick labels 44px, data labels 44px). Well-proportioned at full resolution; readable in both themes. Title at ~70% width is expected for the mandated format.
• VQ-02: No Overlap (6/6) — No overlapping text or data elements. Data labels positioned above bars without collision. Average line label clear.
• VQ-03: Element Visibility (6/6) — All bars clearly visible including the lowest-opacity Toys bar (0.42). Data labels confirm values. Brand green bar immediately prominent.
• VQ-04: Color Accessibility (2/2) — Good luminance contrast on both themes. Brand green is CVD-safe. No red-green sole distinguishing signal.
• VQ-05: Layout & Canvas (4/4) — Plot fills ~65-70% of canvas with well-balanced margins (top 100, bottom 220, left 220, right 140). No clipped content.
• VQ-06: Axis Labels & Title (2/2) — Y-axis "Sales (Units)" includes units; X-axis "Product Category" is descriptive. Title correct format.
• VQ-07: Palette Compliance (2/2) — First (highlighted) bar in #009E73 ✓. Remaining bars use ANYPLOT_MUTED anchor (semantically correct for "other/rest" bars) ✓. Background #FAF8F1 light / #1A1A17 dark ✓. All chrome theme-adaptive ✓.

Design Excellence (15/20)

• DE-01: Aesthetic Sophistication (6/8) — Clearly above defaults: the rank-fade opacity design (green top performer → progressively fading muted bars) is a deliberate visual hierarchy technique. Subtitle provides editorial voice. Sorted descending order reinforces the story. Strong design, thoughtful color hierarchy.
• DE-02: Visual Refinement (4/6) — Y-axis-only subtle grid, no bar borders (borderWidth: 0), rounded corners (borderRadius: 4), no legend box for single-series. Highcharts default hides top/right axes. Clean result with good polish.
• DE-03: Data Storytelling (5/6) — The combination of brand green highlight + subtitle calling out the specific insight + average reference line + descending sort tells a clear, complete story. The viewer immediately identifies Electronics as the dominant category and can benchmark the others against the average.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct vertical bar chart (ColumnSeries). All 6 categories displayed.
• SC-02: Required Features (4/4) — Consistent bar widths ✓, value labels on bars ✓, adequate spacing ✓, highlighted bar for emphasis ✓ (spec note: "highlight specific bars to draw attention").
• SC-03: Data Mapping (3/3) — Categories on x-axis, sales values on y-axis. All data visible with sensible axis range (0–5,200).
• SC-04: Title & Legend (3/3) — Title is exactly "bar-basic · python · highcharts · anyplot.ai" ✓. Legend disabled (appropriate for single-series with per-bar colors) ✓.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Shows all bar chart features: varying bar heights across multiple categories, sorted ranking order, value labels, reference line, wide value range (480–4,800).
• DQ-02: Realistic Context (5/5) — Product sales by retail category is a highly realistic, neutral business scenario. The category ordering (Electronics > Clothing > Home & Garden > Sports > Books > Toys) is plausible for a real retailer.
• DQ-03: Appropriate Scale (4/4) — Sales units in hundreds to low thousands are realistic for a mid-size retailer. The ~10:1 ratio between top and bottom categories is commercially plausible.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Linear structure: imports → theme tokens → data → chart config → series → export. No functions or classes.
• CQ-02: Reproducibility (2/2) — Deterministic hardcoded data; no randomness.
• CQ-03: Clean Imports (2/2) — All imports are used: os, re, tempfile, time, urllib.request, pathlib.Path, highcharts_core, PIL.Image, selenium.
• CQ-04: Code Elegance (2/2) — Concise rank-fade loop. Clear variable names. No over-engineering.
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png and plot-{THEME}.html ✓. CDP override + PIL pinning per library guide.

Library Mastery (9/10)

• LM-01: Idiomatic Usage (5/5) — Correctly uses Chart(container="container"), HighchartsOptions(), ColumnSeries.from_dict(), chart.add_series(). CDP setDeviceMetricsOverride per the authoritative Highcharts library guide. PIL pin for exact canvas dims.
• LM-02: Distinctive Features (4/5) — Leverages Highcharts-specific: plotLines with inline label for average reference, per-point color+opacity in data array, textOutline in data labels for contrast, HTML tooltip templates, borderRadius on columns. Distinctly Highcharts.

Score Caps Applied

• None applied

Strengths

• Rank-fade opacity design (green highlight → muted descending) creates immediate, intentional visual hierarchy
• Subtitle editorial voice + average reference line + sorted data combine for strong data storytelling
• Fully theme-adaptive chrome across both renders with no legibility issues
• Correct use of ANYPLOT_MUTED semantic anchor for secondary bars
• All Highcharts library guide best practices followed (CDP override, PIL pinning, inline JS)

Weaknesses

• DE-02 could be lifted slightly: explicit spine removal (chart.options.chart plotBorderWidth=0 is already set, but top/right axis line removal could be made explicit in the config rather than relying on Highcharts defaults)
• DE-01: rank-fade gray bars create a somewhat monochromatic look for 5 of 6 bars — a subtle color tint to the muted bars or a slightly different approach for the secondary bars could add more visual sophistication

Issues Found

1. DE-02 MINOR: Visual refinement is good but relies partially on Highcharts defaults for spine suppression rather than explicit configuration
   • Fix: Add explicit xAxis.lineWidth: 0 or keep as-is (minor deduction only)

AI Feedback for Next Attempt

Implementation is publication-quality. Strong design with rank-fade opacity, good storytelling, fully theme-adaptive. If a repair attempt is triggered, focus on DE-02: consider adding a subtle tint difference between the highlighted and non-highlighted bar groups, or making spine suppression more explicit.

Verdict: APPROVED