feat(highcharts): implement funnel-basic

[github-actions]

Implementation: funnel-basic - python/highcharts

Implements the python/highcharts version of funnel-basic.

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

Parent Issue: #789

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): The plot renders on a warm off-white #FAF8F1 background. A left-aligned title "funnel-basic · highcharts · anyplot.ai" (56px) sits at the top-left, with a subtitle "Sales funnel: visitor progression from awareness to purchase" (30px) just below. The funnel itself is centered-left on the canvas and displays 5 stages using the Okabe-Ito palette in order: Awareness (#009E73 teal, largest segment), Interest (#D55E00 vermillion), Consideration (#0072B2 blue), Intent (#CC79A7 reddish-purple), Purchase (#E69F00 golden, thinnest strip). Connector lines with stage names and value+percentage labels (e.g. "Awareness / 1,000 (43.5%)") extend to the right in dark ink. All title, subtitle, and label text is clearly readable against the light background. Legibility verdict: PASS.

Dark render (plot-dark.png): The same chart on a #1A1A17 near-black background. The title, subtitle, and data labels all flip to a light colour (#F0EFE8 / #B8B7B0 range), remaining clearly readable with no dark-on-dark failures. The 5 funnel segment colours are identical to the light render — Okabe-Ito positions 1–5 unchanged. Connector lines and label text are legible against the dark surface. Background is the correct warm near-black, not pure black. Legibility verdict: PASS.

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

Score: 89/100

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

Visual Quality (28/30)

• VQ-01: Text Legibility (7/8) — All sizes explicitly set (title 56px, subtitle 30px, labels 36px), all readable; data labels slightly small at extreme 4800×2700 resolution
• VQ-02: No Overlap (6/6) — All stage labels and connectors are non-overlapping
• VQ-03: Element Visibility (6/6) — All 5 segments clearly visible including thin Purchase strip
• VQ-04: Color Accessibility (2/2) — Okabe-Ito palette is CVD-safe; each stage distinctly coloured
• VQ-05: Layout & Canvas (3/4) — Funnel fills substantial canvas area; some empty space at top (between subtitle and funnel start) and at bottom
• VQ-06: Axis Labels & Title (2/2) — Title format correct; funnel charts have no traditional axes (N/A for axis labels)
• VQ-07: Palette Compliance (2/2) — First stage is #009E73; stages 2–5 follow Okabe-Ito order exactly; backgrounds are #FAF8F1 / #1A1A17; chrome is theme-correct in both renders

Design Excellence (12/20)

• DE-01: Aesthetic Sophistication (4/8) — Well-configured standard Highcharts funnel; intentional left-aligned title hierarchy and per-stage Okabe-Ito colours; not exceptional
• DE-02: Visual Refinement (4/6) — borderColor: PAGE_BG creates clean inter-segment separation; textOutline: none removes label halos; hover halo disabled; credits removed; connector colour theme-adaptive — solid refinements
• DE-03: Data Storytelling (4/6) — Subtitle narrates the use-case; value+percentage labels quantify each drop-off; natural top-to-bottom visual hierarchy guides the eye; no explicit conversion-rate annotations between stages

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Native Highcharts funnel using the funnel module; correct trapezoidal shape
• SC-02: Required Features (4/4) — Distinct per-stage colours ✓; value+percentage labels on each segment ✓; stages ordered largest-to-smallest ✓; proportional widths ✓
• SC-03: Data Mapping (3/3) — 5 stages within spec's 3–8 range; values 1000→100 decreasing correctly
• SC-04: Title & Legend (3/3) — Title is exactly "funnel-basic · highcharts · anyplot.ai"; no legend needed (stages labelled directly)

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — All funnel characteristics shown: proportional narrowing, 5 distinct stages, visible drop-offs at each step
• DQ-02: Realistic Context (5/5) — Standard marketing/sales funnel (Awareness→Interest→Consideration→Intent→Purchase); neutral business scenario
• DQ-03: Appropriate Scale (4/4) — 1000→600→400→200→100 gives realistic 40%/33%/50%/50% conversion steps

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Linear flow: imports → theme tokens → data → options dict → download JS → generate HTML → screenshot
• CQ-02: Reproducibility (2/2) — Fully deterministic hardcoded data; no random state
• CQ-03: Clean Imports (2/2) — All imported modules (base64, json, os, tempfile, time, urllib.request, pathlib.Path, selenium) are actually used
• CQ-04: Code Elegance (2/2) — Clean, Pythonic; CDP captureScreenshot is an elegant approach for exact-dimension capture
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png and plot-{THEME}.html; uses Highcharts 12 (current)

Library Mastery (9/10)

• LM-01: Idiomatic Usage (5/5) — Uses Highcharts' native funnel series type with separate module download; JSON options dict pattern; proper Highcharts.chart() constructor
• LM-02: Distinctive Features (4/5) — neckWidth/neckHeight for funnel geometry; softConnector for smooth label lines; pointFormat with {point.percentage} template; funnel module loaded inline — strong Highcharts-specific usage

Score Caps Applied

• None — DE-01=4 and DE-02=4 are both > 2, so the "correct but boring" cap does not apply

Strengths

• Perfect spec compliance: correct funnel type, all required features (per-stage colours, value+percentage labels, proportional widths), correct title format
• Excellent palette handling: Okabe-Ito in canonical order per stage, theme-adaptive chrome correct in both renders
• Clean code with CDP screenshot approach for precise 4800×2700 capture
• Realistic, neutral sales-funnel dataset with sensible conversion ratios

Weaknesses

• Design excellence is the gap: aesthetic sophistication (DE-01 4/8) and data storytelling (DE-03 4/6) are at mid-range; the chart is functional and well-styled but lacks a focal point or design moment that makes it memorable
• No conversion-rate annotations between stages (e.g. "−40%" between Awareness and Interest) — these would turn a data display into a story
• Data labels at 36px are on the small side for the 4800×2700 canvas; could push to 44–48px for sharper legibility at full resolution
• Minor: some empty canvas space at top and bottom (below Purchase stage)

Issues Found

1. DE-01 MID (4/8): Design is clean but generic — lacks a strong visual moment
   • Fix: Add conversion-rate drop annotations between stages (e.g. "↓40%" connector labels), or use opacity/size variation to emphasise the largest drop
2. DE-03 MID (4/6): Data displayed but no explicit insight emphasis
   • Fix: Highlight the total funnel conversion (10%: 1,000 → 100) in a callout or footer annotation; this turns the chart into a clear business story
3. VQ-01 MINOR (7/8): Data labels at 36px slightly small for 4800×2700
   • Fix: Increase data label fontSize to 44–48px and subtitle/connector text proportionally

AI Feedback for Next Attempt

Improve design excellence: add inter-stage conversion-rate annotations (e.g. "↓40%" between Awareness and Interest) to transform data display into storytelling. Consider a summary callout showing the overall funnel conversion (10%). Increase data label font size from 36px to 44–48px for sharper readability at full resolution. Keep everything else — palette, theme-adaptive chrome, code structure, and spec compliance are all excellent.

Verdict: REJECTED