feat(pygal): implement slope-basic

[github-actions]

Implementation: slope-basic - python/pygal

Implements the python/pygal version of slope-basic.

File: plots/slope-basic/implementations/python/pygal.py

Parent Issue: #981

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (~#FAF8F1) — correct theme surface, not pure white. Title "slope-basic · pygal · anyplot.ai" is clearly visible in dark ink at the top. Y-axis label "Sales (units)" and X-axis label "Time Period" are readable in dark text. Y-axis tick labels (30, 40, ..., 110) in muted dark tone and x-axis labels "Q1 2024" / "Q4 2024" are all clear. Seven lines in Okabe-Ito green (#009E73) represent increasing products; three in Okabe-Ito vermillion (#D55E00) represent decreasing products. Circular endpoint dots are well-sized. Subtle dotted horizontal grid lines, y-axis only. Notable gap: no entity labels at line endpoints — product names are only in interactive hover tooltips, invisible in the static PNG. All text is readable against the light background — legibility verdict: PASS.

Dark render (plot-dark.png): Warm near-black background (~#1A1A17) — correct dark surface. Title, axis labels, and tick labels all render in light-colored text, clearly readable against the dark background. No dark-on-dark failures — all chrome elements flip correctly to light tones. Data colors are identical to the light render: same green and vermillion. Only the background and text (chrome) flipped between themes. Subtle dotted gridlines remain visible on the dark surface. Legibility verdict: PASS — no dark-on-dark issues detected.

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

Score: 81/100

Category	Score	Max
Visual Quality	29	30
Design Excellence	11	20
Spec Compliance	12	15
Data Quality	13	15
Code Quality	10	10
Library Mastery	6	10
Total	81	100

Visual Quality (29/30)

• VQ-01: Text Legibility (8/8) — All font sizes explicitly set: title=64px, labels=44px, major labels=44px. Readable in both themes.
• VQ-02: No Overlap (6/6) — No text overlap. Line crossings are expected in slopegraphs, not a defect.
• VQ-03: Element Visibility (6/6) — Lines at stroke_width=6, dots at dots_size=18, clearly visible at 4800×2700.
• VQ-04: Color Accessibility (2/2) — Okabe-Ito palette is colorblind-safe with good luminance contrast.
• VQ-05: Layout & Canvas (3/4) — Good canvas utilization with margin=140. Minor unused space at bottom.
• VQ-06: Axis Labels & Title (2/2) — Y-axis: "Sales (units)" with units; X-axis: "Time Period"; title in correct format.
• VQ-07: Palette Compliance (2/2) — First series #009E73, second group #D55E00, backgrounds #FAF8F1/#1A1A17, chrome theme-adaptive.

Design Excellence (11/20)

• DE-01: Aesthetic Sophistication (4/8) — Semantic color coding (increase=green, decrease=orange) is an intentional design choice, but overall chart looks like a well-configured library default without exceptional polish.
• DE-02: Visual Refinement (3/6) — No legend (good choice), subtle dotted y-grid, explicit stroke and dot sizes. Limited by pygal's inability to remove the border frame/spines.
• DE-03: Data Storytelling (4/6) — Semantic color contrast tells a clear majority-increase story; viewer immediately sees 7 green vs. 3 orange. Visual hierarchy through color is effective.

Spec Compliance (12/15)

• SC-01: Plot Type (5/5) — Correct slope chart via Line with exactly 2 time points. Idiomatic pygal approach.
• SC-02: Required Features (2/4) — Direction color coding present. Missing: endpoint labels — the spec requires entity labels at both ends of each line for identification. Only interactive hover tooltips exist; invisible in the static PNG.
• SC-03: Data Mapping (3/3) — X-axis shows Q1 2024 / Q4 2024, Y-axis shows sales units, all 10 products mapped correctly.
• SC-04: Title & Legend (2/3) — Title format correct. No legend and no endpoint labels — viewer cannot identify individual product lines in the static PNG.

Data Quality (13/15)

• DQ-01: Feature Coverage (6/6) — Shows increases, decreases, rank crossings, 10 entities (optimal 5–15 range). Both directions well-represented.
• DQ-02: Realistic Context (3/5) — Q1 vs. Q4 sales comparison is a plausible business scenario. However "Product A" through "Product J" naming is semi-abstract — closer to abstract labels than real product names.
• DQ-03: Appropriate Scale (4/4) — Sales values in 40–102 unit range are plausible for quarterly comparison. No impossible values.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Clear linear flow: imports → data → style → chart config → series → save.
• CQ-02: Reproducibility (2/2) — Fully deterministic hard-coded data.
• CQ-03: Clean Imports (2/2) — Only os, sys, pygal, Style imported and all used.
• CQ-04: Code Elegance (2/2) — List comprehensions to split groups; clean loops to add series. Pythonic.
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png and plot-{THEME}.html using current pygal API.

Library Mastery (6/10)

• LM-01: Idiomatic Usage (4/5) — Correct Style object with all theme tokens, render_to_png and render() for HTML, labeled data dicts for tooltips.
• LM-02: Distinctive Features (2/5) — Uses HTML export (distinctive pygal feature) and labeled data points for interactive hover. Does not use more advanced pygal-specific features.

Score Caps Applied

• None

Strengths

• Correct semantic color coding: Okabe-Ito green for increases, vermillion for decreases — immediately communicates direction
• Both light and dark themes render with correct backgrounds (#FAF8F1/#1A1A17) and fully readable chrome — no theme-adaptation failures
• Perfect code quality: deterministic, KISS, clean imports, correct dual output (PNG + HTML)
• Explicit large font sizes ensure readability at 4800×2700 resolution

Weaknesses

• Missing endpoint labels (SC-02): Slopegraphs require entity labels at both ends of each line for identification. The static PNG shows only anonymous lines — product names are hidden in interactive hover tooltips. Fix: use pygal's print_labels=True or overlay text annotations at both x-axis positions, or encode product names as x-axis labels in a creative way.
• Semi-abstract data (DQ-02): "Product A" through "Product J" is close to abstract naming. Use realistic product category names (e.g., Electronics, Apparel, Furniture, Appliances) to score 5/5.
• Design sophistication (DE-01, DE-02): Chart looks like a configured default. Limited by pygal's border frame, but visual refinement can still improve through better typography hierarchy and whitespace tuning.

Issues Found

1. SC-02 LOW: Missing endpoint labels — core slopegraph feature not implemented in static PNG
   • Fix: Add entity labels at both endpoints using pygal's label system or render text annotations at Q1 and Q4 positions for each series
2. DQ-02 PARTIAL: Product A-J naming is semi-abstract
   • Fix: Replace with real product category names (Electronics, Apparel, Furniture, Appliances, Sporting Goods, Toys, Kitchenware, Books, Automotive, Garden)
3. DE-01/DE-02 MODERATE: Chart lacks visual polish beyond semantic color coding
   • Fix: Consider adding subtle emphasis, refining typography spacing, or adding reference annotations

AI Feedback for Next Attempt

Primary fix: Add entity labels at both line endpoints — this is the defining feature of a slopegraph. Since pygal does not natively support inline text alongside line endpoints, consider using x-label-based approaches or encoding product names into the x-axis tick area, or leveraging pygal's print_labels with positioned text. Secondary: replace "Product A-J" with real product category names. Optionally improve visual polish (typography spacing, subtle stroke-width variation by magnitude of change).

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 renders on a warm off-white (#FAF8F1) background. The title "slope-basic · pygal · anyplot.ai" appears in dark ink at the top and is clearly readable. The Y-axis is labelled "Sales (units)" and the X-axis "Time Period", with "Q1 2024" and "Q4 2024" marking the two time points. Ten slope lines connect Q1 to Q4: seven in Okabe-Ito green (#009E73) for increasing categories and three in Okabe-Ito vermillion (#D55E00) for decreasing ones. Category-name labels appear at both endpoints; the right-side (Q4) labels are well-spaced, but the left-side (Q1) labels are notably crowded — "Furniture", "Beauty", and "Electronics" stack tightly in the ~85-95 range, making that cluster harder to parse at a glance. A full-series legend sits in the upper-left, slightly overlapping the chart area. All text is readable against the light background — legibility verdict: PASS (with minor label-crowding caveat).

Dark render (`plot-dark.png`): The background flips to warm near-black (#1A1A17) correctly. The data colors remain identical: same green for increasing, same orange for decreasing — no hue shift between themes. Chrome adapts properly: the title, axis labels, tick labels, and category-name labels all appear in light text against the dark surface. The left-side label cluster is still crowded (same data, same positions), and the contrast of those closely stacked labels is slightly lower than in light mode, but each label is still individually readable. No dark-on-dark failures observed. Legibility verdict: PASS.

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

Score: 86/100

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

Visual Quality (26/30)

• VQ-01: Text Legibility (8/8) — All font sizes explicitly set and well-calibrated: title=64, label=44, major_label=44, legend=38, value_label=36; readable in both themes
• VQ-02: No Overlap (3/6) — Left-side (Q1 2024) endpoint labels are crowded; "Furniture/Beauty/Electronics" cluster in the 85–95 range stacks without enough vertical breathing room
• VQ-03: Element Visibility (6/6) — Stroke width=6 and dot size=18 make all lines and endpoints clearly visible at full canvas
• VQ-04: Color Accessibility (2/2) — Green (#009E73) and vermillion (#D55E00) are both Okabe-Ito and CVD-safe; no red-green-as-sole-signal issue
• VQ-05: Layout & Canvas (3/4) — Right margin extended (340px) to accommodate end labels; overall utilisation good, but legend slightly overlaps the chart area
• VQ-06: Axis Labels & Title (2/2) — Y: "Sales (units)" includes units; X: "Time Period" is descriptive
• VQ-07: Palette Compliance (2/2) — First series #009E73, second #D55E00; backgrounds #FAF8F1 / #1A1A17; theme chrome fully adaptive

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Semantic color coding (green=increase, orange=decrease) demonstrates clear design intent and elevates the chart above a plain multi-series line chart; professional and clean, but pygal's default legend frame and overall styling keep it from reaching publication-ready polish
• DE-02: Visual Refinement (4/6) — Y-axis grid only (correct), generous margins, but pygal's default bordered legend box and standard frame are still present; no spine removal possible in pygal
• DE-03: Data Storytelling (4/6) — Semantic color encoding makes the "winners vs. losers" story immediately apparent without any annotations; viewer sees at a glance which categories improved and which declined

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — pygal.Line with exactly 2 x-axis time points correctly implements the slopegraph format
• SC-02: Required Features (4/4) — Labels at both endpoints (print_labels=True), color coding by direction, vertical axes labeled with time-point names, legend present
• SC-03: Data Mapping (3/3) — Time period on X, sales values on Y; all 10 entities span the correct range
• SC-04: Title & Legend (3/3) — Title "slope-basic · pygal · anyplot.ai" matches required format; legend labels match category names

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — 7 increasing and 3 decreasing categories show bidirectional change; lines cross to illustrate rank reversals; variety of magnitudes of change
• DQ-02: Realistic Context (5/5) — Q1 vs Q4 product category sales comparison is a realistic, neutral business scenario
• DQ-03: Appropriate Scale (4/4) — Values ranging 40–102 units are plausible for a relative comparison; changes (up to +30 units) are realistic

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Clean linear flow: imports → constants → data → filtering → style → chart → add series → save
• CQ-02: Reproducibility (2/2) — Data is fully deterministic (hardcoded arrays)
• CQ-03: Clean Imports (2/2) — Only os, sys, pygal, and Style; the sys path manipulation is necessary to avoid naming conflict with the script file
• CQ-04: Code Elegance (2/2) — List comprehensions for filtering increasing/decreasing are Pythonic and clear
• 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) — Correct use of Style for all theme tokens, dict-format data for in-chart labels, pygal.Line for slope chart; slightly below 5 because pygal.Line is not a native slopegraph type (no alternative exists, so the choice is appropriate)
• LM-02: Distinctive Features (3/5) — HTML export leverages pygal's interactive nature; dict-format data with "label" key is a pygal-specific feature for inline chart annotations

Score Caps Applied

• None — VQ-02=3 (not 0), DE-01=5 (>2), no other caps triggered

Strengths

• Semantic color coding (green=increase, orange=decrease) is an excellent design decision that makes the slope chart's purpose immediately clear
• Font sizes explicitly calibrated for 4800×2700 canvas — all text readable in both renders
• Perfect spec compliance: correct format, labels at both endpoints, time-labeled axes
• Deterministic data, clean KISS code structure, idiomatic pygal usage
• Both HTML and PNG outputs generated correctly for both themes

Weaknesses

• Left-side (Q1 2024) endpoint labels are crowded — the 85–95 range clusters "Furniture", "Beauty", "Electronics" too close together; consider adjusting y-range, increasing left margin, or using interpolate='cubic' to spread start values
• pygal's default legend frame box remains visible; the legend placement (upper-left) partially overlaps the chart area

Issues Found

1. VQ-02 PARTIAL: Left-side label crowding reduces readability of start-point cluster
   • Fix: Increase margin_left, or nudge the y-axis range minimum lower to spread lines more, or use print_labels=False on start points and instead rely on legend

AI Feedback for Next Attempt

The semantic color coding is strong — keep it. The main issue is left-side label crowding. Consider either: (a) increasing margin_left substantially so labels don't overlay each other, (b) disabling print_labels on the start side and using the legend only (already present), or (c) reducing entities to the 6–8 most interesting ones. The legend box frame is a minor pygal limitation — acceptable at this quality level.

Verdict: APPROVED