feat(highcharts): implement rose-basic

[github-actions]

Implementation: rose-basic - python/highcharts

Implements the python/highcharts version of rose-basic.

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

Parent Issue: #1003

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Rose chart on warm off-white (#FAF8F1) background — correct, not pure white. Title "rose-basic · highcharts · anyplot.ai" is bold dark ink, clearly readable. Subtitle "Monthly Rainfall (mm)" in INK_SOFT. All 12 month labels (Jan–Dec) arranged around the circle perimeter in INK_SOFT at 28px — all readable. Radial y-axis labels ("95 mm", "90 mm", …, "0 mm") arranged vertically along the top spoke — readable and not overlapping. All 12 segments rendered in #009E73 (brand green, Okabe-Ito position 1), correctly sized by rainfall value: large wedges for Dec (92mm)/Nov (85mm) and small wedges for Jul (18mm)/Jun (25mm). White/PAGE_BG segment borders provide clean separation. Polygon radial gridlines visible. Chart is centered but the circular chart in a 16:9 canvas leaves notable empty bands on left and right. All text is readable against the light background — no light-on-light issues.

Dark render (plot-dark.png): Same circular rose chart on warm near-black (#1A1A17) background — correct, not pure black. Title and subtitle rendered in #F0EFE8 — clearly readable against the dark background. Month labels in #B8B7B0 — readable. Radial y-axis labels clearly visible as light text — no dark-on-dark failures observed. Grid lines subtle in rgba(240,239,232,0.10). Data colors are identical to the light render — all segments in #009E73 brand green, unchanged between themes. Green-on-dark background provides excellent contrast. Segment border adapts to dark PAGE_BG (#1A1A17) creating subtle separation. All text is readable against the dark background — no dark-on-dark failures detected.

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

Score: 85/100

Category	Score	Max
Visual Quality	26	30
Design Excellence	12	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	7	10
Total	85	100

Visual Quality (26/30)

• VQ-01: Text Legibility (7/8) — All font sizes explicitly set (title 48px, subtitle 32px, category labels 28px, y-axis 22px, data labels 20px). All readable. Minor: 20px data labels on smallest segments may be tight at full 4800x2700 resolution.
• VQ-02: No Overlap (5/6) — Month labels around perimeter are clean. Radial y-axis labels arranged along a single spoke without overlapping. Minor density concern near chart center.
• VQ-03: Element Visibility (5/6) — All segments clearly visible with good contrast. Data labels on smallest segments (Jun 25mm, Jul 18mm) are small but present.
• VQ-04: Color Accessibility (2/2) — Single series in #009E73 — colorblind-safe, high contrast on both themes.
• VQ-05: Layout & Canvas (3/4) — Chart centered, but circular plot in 16:9 canvas leaves empty bands on left/right. Style guide recommends 3600×3600 square format for symmetric charts.
• VQ-06: Axis Labels & Title (2/2) — Y-axis "Rainfall (mm)" with units; radial labels include "mm" suffix; descriptive subtitle.
• VQ-07: Palette Compliance (2/2) — Single series #009E73 correct. Backgrounds #FAF8F1 (light) / #1A1A17 (dark) correct. All chrome theme-adaptive, data colors identical across renders.

Design Excellence (12/20)

• DE-01: Aesthetic Sophistication (4/8) — Well-configured Highcharts default: correct brand color, white segment borders, subtitle for context. All 12 segments uniformly brand green with no visual differentiation. Polished but doesn't reach publication quality.
• DE-02: Visual Refinement (4/6) — Meaningful refinements above default: polygon grid interpolation appropriate for rose charts, zero lineWidth on axes, PAGE_BG border between segments, alpha on grid lines. Not exhaustively polished.
• DE-03: Data Storytelling (4/6) — Seasonal rainfall pattern (high winter Nov–Jan, low summer Jun–Jul) is immediately apparent through the rose form's size variation. Circular arrangement gives natural temporal context. No additional emphasis on peaks/troughs.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct rose/coxcomb chart via Highcharts polar column; equal-angle wedges with radius proportional to value.
• SC-02: Required Features (4/4) — All spec features present: radius proportional to value, natural circular ordering, startAngle=0 (Jan at 12 o'clock), radial gridlines, consistent single-color scheme.
• SC-03: Data Mapping (3/3) — Months as angular positions, rainfall values as radial extent, all 12 data points represented.
• SC-04: Title & Legend (3/3) — Title "rose-basic · highcharts · anyplot.ai" correct; legend shows "Rainfall" series name.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Full 12-month cycle with meaningful variation (18mm–92mm), demonstrating both extremes and seasonal transitions.
• DQ-02: Realistic Context (5/5) — Monthly rainfall scenario: real-world, neutral, appropriate for rose chart demonstration.
• DQ-03: Appropriate Scale (4/4) — Rainfall range 18–92mm per month is factually accurate for a temperate oceanic climate. Winter-high/summer-low pattern is climatologically correct.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Linear: imports → tokens → data → chart config → series → export. No functions or classes.
• CQ-02: Reproducibility (2/2) — Deterministic hardcoded data; no random seed needed.
• CQ-03: Clean Imports (2/2) — All imports used (os, tempfile, time, urllib.request, Path, Chart, HighchartsOptions, ColumnSeries, webdriver, Options).
• CQ-04: Code Elegance (2/2) — Clean, Pythonic, appropriate complexity. No fake UI.
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png and plot-{THEME}.html. Current API.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Correct Chart(container='container'), polar config, pane, polygon gridLineInterpolation, ColumnSeries. Polar-specific Highcharts patterns well-applied.
• LM-02: Distinctive Features (3/5) — Polar chart type, pane configuration, polygon grid are Highcharts-distinctive. Misses opportunities: colorByPoint with value-based gradients, custom tooltip.formatter, or zones.

Score Caps Applied

• None

Strengths

• Correct rose chart via Highcharts polar column with startAngle=0 placing Jan at 12 o'clock
• Full theme-adaptive chrome: all color tokens applied consistently in both renders — no dark-on-dark or light-on-light failures
• Correct highcharts-more.js download for polar chart support
• Polygon grid interpolation well-suited to rose charts
• Perfect spec compliance and data quality — realistic factually accurate seasonal rainfall data

Weaknesses

• Canvas format 4800×2700 (landscape) is suboptimal for a circular chart — style guide recommends 3600×3600 square format for symmetric plots
• Redundant single-series legend (subtitle and y-axis title already describe the data) — should be disabled
• Uniform solid brand green on all segments with no visual emphasis on high (Dec 92mm) or low (Jul 18mm) months
• Data labels at 20px may be difficult to read on smallest segments at full resolution — increase to 24px+
• Library mastery underutilizes Highcharts distinctives (no colorByPoint, no zones, no custom tooltip formatter)

Issues Found

1. VQ-05 / Layout: Using 4800×2700 for a circular rose chart wastes ~30% of canvas on left/right. Switch to width: 3600, height: 3600 square format.
2. DE-01 / Aesthetics: No visual differentiation between segments — consider colorByPoint: true with a value-proportional color array derived from Okabe-Ito green (lighter shades for low values, full #009E73 for high values).
3. DE-02 / Legend: Remove the legend (legend.enabled: false) for a single-series chart — it is redundant given the subtitle.
4. LM-02 / Library Features: Add a zones array to the series to give different shades to high/medium/low rainfall months, or use tooltip.formatter for richer month-specific tooltip text.

AI Feedback for Next Attempt

Switch to 3600×3600 square format for better canvas utilization of this circular chart. Remove the redundant single-series legend. Add visual differentiation to segments: use colorByPoint: true with a color array that maps rainfall intensity to opacity or shade variations of the brand green — this both improves aesthetics and storytelling by making the seasonal pattern pop. Increase data label font size to at least 24px. Consider adding a custom tooltip.formatter for richer interactivity, and a zones configuration for visual grouping of high/medium/low months.

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): A rose/nightingale chart on a warm off-white (#FAF8F1) background, 3600×3600 px (square canvas). Twelve equal-angle wedge segments radiate from the center representing January through December arranged clockwise starting from the top (12 o'clock). The segments use a value-proportional color gradient from light mint (#C8E8DE) for dry summer months to brand green (#009E73) for the wettest months (Nov/Dec/Jan). The title "rose-basic · highcharts · anyplot.ai" appears in bold dark text at the top with the subtitle "Monthly Rainfall (mm)" below it. Month labels (Jan–Dec) are placed around the circumference in dark-soft text at 28px. Data labels showing the rainfall values appear within each segment. The radial y-axis labels appear in a vertical stack on the center-right and are small but readable. Polygon gridlines assist value estimation. All text is dark on the light background — fully readable. Legibility verdict: PASS.

Dark render (plot-dark.png): The same chart rendered on the near-black (#1A1A17) surface. The gradient colors on the segments are identical to the light render — the mint-to-brand-green ramp is unchanged. The title and subtitle appear in light text (INK = #F0EFE8). Month labels use the lighter INK_SOFT (#B8B7B0) against the dark background and are clearly readable. Data labels within segments also use INK_SOFT which reads well against the dark surface. The radial axis labels are visible though small. No dark-on-dark text failure observed — all chrome elements correctly adapt to the dark theme. The polar grid is rendered with GRID color (rgba with 0.10 opacity) which is subtle but visible. Data colors are identical between themes — only chrome flips. Legibility verdict: PASS.

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

Score: 85/100

Category	Score	Max
Visual Quality	24	30
Design Excellence	14	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	7	10
Total	85	100

Visual Quality (24/30)

• VQ-01: Text Legibility (6/8) — All font sizes explicitly set (title 48px, subtitle 32px, month labels 28px, data labels 26px, radial labels 22px). Most text is clearly readable; radial y-axis labels at 22px are borderline small in the crowded vertical stack.
• VQ-02: No Overlap (4/6) — Minor crowding in the radial y-axis label stack (many increments close together). Data labels within the small summer-month segments (Jun 25, Jul 18, Aug 22) are tight.
• VQ-03: Element Visibility (6/6) — Rose segments are well-sized and clearly visible in both themes. Gradient from light mint to brand green is distinct across all 12 wedges.
• VQ-04: Color Accessibility (2/2) — Monochromatic green gradient is colorblind-safe; no red-green dependency.
• VQ-05: Layout & Canvas (3/4) — Rose chart fills approximately 60-70% of the square canvas with the 88% pane configuration. The circular layout is well-centered; slight extra whitespace at bottom.
• VQ-06: Axis Labels & Title (2/2) — Subtitle "Monthly Rainfall (mm)" and radial labels "{value} mm" provide units; title follows correct format.
• VQ-07: Palette Compliance (1/2) — Custom linear gradient from #C8E8DE to #009E73 used for per-segment coloring. Anchors correctly to brand green (#009E73) at peak values, but uses custom hex interpolation rather than the recommended viridis/cividis/BrBG continuous colormaps. Theme chrome (backgrounds, text, grid) is fully correct in both renders.

Design Excellence (14/20)

• DE-01: Aesthetic Sophistication (6/8) — The value-proportional gradient encoding is a sophisticated design choice that goes well beyond configured defaults. Wet months (Nov/Dec/Jan) stand out in deep brand green; dry months (Jun/Jul/Aug) recede in light mint. Clean circular composition with no extraneous chrome.
• DE-02: Visual Refinement (4/6) — Subtle polygon grid lines, borderColor set to PAGE_BG for clean segment edges, legend correctly suppressed (single series), theme-adaptive chrome throughout. Polar charts have no spines to remove, but the equivalent refinements are well-applied.
• DE-03: Data Storytelling (4/6) — The gradient clearly communicates the seasonal rainfall pattern — a UK oceanic climate wet autumn/winter and dry summer. The viewer immediately grasps the cyclical story. Color doubles as both category identifier and intensity encoder.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct rose/nightingale chart using Highcharts polar column, with radius proportional to value (not area/angle).
• SC-02: Required Features (4/4) — Radial gridlines (polygon interpolation) present, equal-angle wedges, circular ordering starting at 12 o'clock (startAngle: 0), consistent color scheme with meaningful variation.
• SC-03: Data Mapping (3/3) — Months on angular axis, rainfall values determine segment radius; all 12 months shown.
• SC-04: Title & Legend (3/3) — Title is "rose-basic · highcharts · anyplot.ai" (exact format). Legend correctly disabled (single series with per-point coloring).

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Full annual cycle shown with varied values spanning 18–92mm, demonstrating both high-value (wet winter) and low-value (dry summer) extremes — all aspects of a rose chart displayed.
• DQ-02: Realistic Context (5/5) — UK temperate oceanic climate monthly rainfall is a real, comprehensible, neutral scenario. Values are authentic and the pattern (wet autumn/winter, dry summer) is geographically accurate.
• DQ-03: Appropriate Scale (4/4) — Monthly rainfall range 18–92mm is factually accurate for UK climate. Seasonal pattern is geographically and climatologically correct.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Clean linear flow: imports → tokens → data → color calculation → chart config → series → HTML generation → screenshot. No functions or classes.
• CQ-02: Reproducibility (2/2) — Deterministic hardcoded data; no randomness.
• CQ-03: Clean Imports (2/2) — All imports (os, tempfile, time, urllib.request, pathlib, highcharts_core, selenium) are used.
• CQ-04: Code Elegance (2/2) — Clean and Pythonic; the gradient calculation using list comprehension and strict=True zip is appropriate. No over-engineering.
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.html and plot-{THEME}.png correctly. Uses time.sleep(5) for reliable rendering. Correctly downloads and inlines highcharts-more.js for polar chart support.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Correct use of highcharts_core Python API with container="container", HighchartsOptions, ColumnSeries, and proper inline JS embedding for headless Chrome. pane configuration and polar: True are correctly applied.
• LM-02: Distinctive Features (3/5) — Uses Highcharts-specific features: polar column chart with pane startAngle, per-point color via data objects {"y": v, "color": c}, and rich tooltip with headerFormat/pointFormat including color swatch. Good use of library-specific capabilities, but the polar rose is not uniquely Highcharts — it's present in several libraries.

Score Caps Applied

• None

Strengths

• Value-proportional gradient encoding (light mint → brand green) is a sophisticated, intentional design choice that encodes both category identity and rainfall intensity in one visual variable
• Perfect spec compliance — correct polar column layout with radial gridlines, radius-proportional-to-value, 12-month circular ordering starting at 12 o'clock
• Exemplary data quality — UK climate monthly rainfall with correct seasonal pattern and factually accurate values
• Fully theme-adaptive chrome with correct token usage throughout; both renders pass readability checks
• Correct use of highcharts-more.js for polar chart support and clean time.sleep(5) screenshot approach

Weaknesses

• Radial y-axis label stack (22px) is slightly crowded — consider fewer tick marks or larger font (e.g., 26px) to reduce clutter in the center-right area
• VQ-07: Custom hex gradient (#C8E8DE → #009E73) instead of a standard approved continuous colormap; anchoring to brand green is good intent but deviates from viridis/Greens guideline
• Minor data label crowding in the small summer segments (Jun/Jul/Aug) — values 18, 22, 25 are tight in small wedges

Issues Found

1. VQ-07 PARTIAL: Per-segment color uses a custom linear gradient (#C8E8DE → #009E73) rather than a standard recommended continuous colormap. The anchor at brand green is a strong design choice, but the intermediate custom hex values deviate from the viridis/Greens recommendation.
   • Fix: Use Highcharts colorAxis with minColor: '#C8E8DE', maxColor: '#009E73' rather than manual interpolation; or frame as approved "Greens" sequential.
2. VQ-02 MINOR: Y-axis radial labels are dense in the vertical stack — many gridline labels overlap or sit very close.
   • Fix: Reduce tick density (tickAmount: 5), increase label font to 26px, or use showLastLabel: false to reduce crowding.

AI Feedback for Next Attempt

This is a strong implementation scoring 85/100. The main areas to tighten: (1) reduce y-axis radial label density with tickAmount: 5 or tickPixelInterval to avoid crowding; (2) consider framing the gradient as a proper colorAxis in Highcharts for VQ-07 compliance; (3) the implementation is already above the attempt-2 threshold (≥80) and ready for approval.

Verdict: APPROVED