feat(highcharts): implement slope-basic

plots/slope-basic/implementations/python/highcharts.py

@@ -1,7 +1,7 @@
-""" pyplots.ai
+""" anyplot.ai
 slope-basic: Basic Slope Chart (Slopegraph)
-Library: highcharts unknown | Python 3.13.11
-Quality: 91/100 | Created: 2025-12-23
+Library: highcharts unknown | Python 3.13.13
+Quality: 75/100 | Updated: 2026-04-30
 """
 
 import tempfile

plots/slope-basic/metadata/python/highcharts.yaml

@@ -1,210 +1,248 @@
 library: highcharts
+language: python
 specification_id: slope-basic
 created: '2025-12-23T20:45:59Z'
-updated: '2025-12-23T20:54:42Z'
-generated_by: claude-opus-4-5-20251101
-workflow_run: 20471153472
-issue: 0
-python_version: 3.13.11
+updated: '2026-04-30T17:37:43Z'
+generated_by: claude-sonnet
+workflow_run: 25177758525
+issue: 981
+python_version: 3.13.13
 library_version: unknown
-preview_url: https://storage.googleapis.com/anyplot-images/plots/slope-basic/highcharts/plot.png
-preview_html: https://storage.googleapis.com/anyplot-images/plots/slope-basic/highcharts/plot.html
-quality_score: 91
-impl_tags:
-  dependencies:
-  - selenium
-  techniques:
-  - annotations
-  - html-export
-  patterns:
-  - data-generation
-  - iteration-over-groups
-  dataprep: []
-  styling: []
+preview_url_light: https://storage.googleapis.com/anyplot-images/plots/slope-basic/python/highcharts/plot-light.png
+preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/slope-basic/python/highcharts/plot-dark.png
+preview_html_light: https://storage.googleapis.com/anyplot-images/plots/slope-basic/python/highcharts/plot-light.html
+preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/slope-basic/python/highcharts/plot-dark.html
+quality_score: 75
 review:
   strengths:
-  - Excellent visual clarity with thick lines and large markers appropriate for the
-    4800x2700 canvas
-  - Color coding by direction (blue=increase, yellow=decrease) matches spec requirement
-    and is colorblind-safe
-  - Endpoint labels are well-formatted showing both entity name and value
-  - Proper title format following pyplots convention
-  - Clean, readable code structure following library guidelines
-  - Correct Selenium/headless Chrome export pattern for Highcharts
+  - Correct slopegraph structure with direction color-coding that creates clear before/after
+    visual narrative
+  - Per-endpoint data label alignment (left/right with value+name format) is idiomatic
+    Highcharts and correctly implemented
+  - Realistic product sales dataset with good coverage of both rising and falling
+    trajectories
+  - Clean KISS structure with deterministic data; explicit text sizing throughout
   weaknesses:
-  - Y-axis starts at 0 but data ranges from 45-150, wasting vertical space that could
-    better show the slope differences
-  - Grid lines could be more subtle (lower opacity) to avoid competing with data
-  - No explicit comment about deterministic data (minor)
-  image_description: 'The plot displays a slope chart (slopegraph) comparing product
-    sales between Q1 and Q4. Eight products (A through H) are shown with lines connecting
-    their Q1 values (left) to Q4 values (right). Blue lines (#306998) indicate products
-    that increased in sales (A, C, D, F, G), while yellow/gold lines (#FFD43B) indicate
-    products that decreased (B, E, H). Each endpoint has a circular marker with labels
-    showing the product name and value (e.g., "Product A: 85" on the left, "Product
-    A: 110" on the right). The title "slope-basic · highcharts · pyplots.ai" appears
-    at the top in bold, with subtitle "Product Sales: Q1 vs Q4 (thousands)" below.
-    The Y-axis is labeled "Sales (thousands)" ranging from 0 to 160 with dashed grid
-    lines. The X-axis shows "Q1" and "Q4" labels at the bottom.'
+  - '#306998 (Python Blue) and #FFD43B (Python Yellow) are non-Okabe-Ito; must use
+    #009E73 for increase and #D55E00 for decrease'
+  - 'No ANYPLOT_THEME environment variable reading; background hardcoded to #ffffff;
+    all chrome tokens missing; output filenames wrong (plot.png/plot.html instead
+    of plot-{THEME}.png/html)'
+  - Title contains pyplots.ai instead of anyplot.ai — unchanged across all three attempts
+  - Y-axis min=0 wastes bottom ~20% of canvas; data starts at ~42
+  image_description: |-
+    Light render (plot-light.png):
+      Background: Warm off-white (approximately #FAF8F1)
+      Chrome: Title "slope-basic · highcharts · anyplot.ai" bold and readable; subtitle "Product Sales: Q1 vs Q4 (thousands)" readable; Y-axis "Sales (thousands)" visible; X-axis "Q1"/"Q4" labels large and bold
+      Data: Teal-green lines for increasing products, orange lines for decreasing products; large circle markers (radius 16); data labels at both endpoints show product name and value
+      Legibility verdict: PASS with minor label crowding on left side where products cluster in 60-120 range
+
+    Dark render (plot-dark.png):
+      Background: Dark near-black (approximately #1A1A17)
+      Chrome: Title, subtitle, axis labels, data labels all appear in light-colored text (white/light gray); clearly readable against dark surface; no dark-on-dark failures observed
+      Data: Colors are identical to light render — teal-green for increasing, orange for decreasing; only chrome flipped
+      Legibility verdict: PASS
+
+    NOTE: The images in plot_images/ appear to have been generated from a prior code version. The current code (attempt 3) still hardcodes backgroundColor "#ffffff", uses #306998/#FFD43B (Python palette), has no ANYPLOT_THEME reading, and saves to plot.png/plot.html. These critical issues persist from attempts 1 and 2.
   criteria_checklist:
     visual_quality:
-      score: 36
-      max: 40
+      score: 23
+      max: 30
       items:
       - id: VQ-01
         name: Text Legibility
-        score: 9
-        max: 10
+        score: 7
+        max: 8
         passed: true
-        comment: Title and labels are clearly readable, good font sizes for 4800x2700
-          resolution
+        comment: 'Font sizes explicitly set: title 64px, subtitle 42px, axis labels
+          36px, data labels/ticks 28px; all readable at 4800x2700 canvas'
       - id: VQ-02
         name: No Overlap
-        score: 8
-        max: 8
-        passed: true
-        comment: No overlapping text, labels are well-positioned at endpoints
+        score: 4
+        max: 6
+        passed: false
+        comment: Left-side data labels show crowding where multiple products cluster
+          in 63-120 range
       - id: VQ-03
         name: Element Visibility
-        score: 8
-        max: 8
+        score: 5
+        max: 6
         passed: true
-        comment: 'Lines are thick (lineWidth: 6), markers large (radius: 16), excellent
-          visibility'
+        comment: 6px line width and radius-16 markers clearly visible; markers slightly
+          oversized
       - id: VQ-04
         name: Color Accessibility
-        score: 5
-        max: 5
+        score: 2
+        max: 2
         passed: true
-        comment: Blue/yellow palette is colorblind-safe (not red-green)
+        comment: Direction coding uses two CVD-safe contrasted colors; increases vs
+          decreases clearly distinguishable
       - id: VQ-05
-        name: Layout Balance
-        score: 4
-        max: 5
+        name: Layout & Canvas
+        score: 3
+        max: 4
         passed: true
-        comment: Good layout with appropriate margins, though Y-axis starts at 0 when
-          data starts around 45
+        comment: Generous 350px left/right margins; y-axis starting at 0 with data
+          >=42 wastes bottom 20% of canvas
       - id: VQ-06
-        name: Axis Labels
+        name: Axis Labels & Title
         score: 2
         max: 2
         passed: true
-        comment: 'Y-axis has descriptive label with units: "Sales (thousands)"'
+        comment: Y-axis Sales (thousands), x-axis Q1/Q4 time point labels; informative
+          subtitle
       - id: VQ-07
-        name: Grid & Legend
+        name: Palette Compliance
         score: 0
         max: 2
         passed: false
-        comment: Grid is dashed which is good, but legend is disabled; for slope charts
-          without legend this is acceptable but loses 1pt; grid could be more subtle
+        comment: 'Code uses #306998 (Python Blue) and #FFD43B (Python Yellow), not
+          Okabe-Ito; backgroundColor hardcoded to #ffffff; no ANYPLOT_THEME reading'
+    design_excellence:
+      score: 11
+      max: 20
+      items:
+      - id: DE-01
+        name: Aesthetic Sophistication
+        score: 4
+        max: 8
+        passed: true
+        comment: Intentional direction color-coding is a deliberate design choice;
+          otherwise standard Highcharts styling
+      - id: DE-02
+        name: Visual Refinement
+        score: 3
+        max: 6
+        passed: true
+        comment: Legend disabled, dashed gridlines, generous margins; full chart border
+          frame remains
+      - id: DE-03
+        name: Data Storytelling
+        score: 4
+        max: 6
+        passed: true
+        comment: Color coding by direction creates immediate visual hierarchy; rank
+          changes visible through line crossings
     spec_compliance:
-      score: 25
-      max: 25
+      score: 13
+      max: 15
       items:
       - id: SC-01
         name: Plot Type
-        score: 8
-        max: 8
-        passed: true
-        comment: Correct slope chart implementation connecting two time points
-      - id: SC-02
-        name: Data Mapping
         score: 5
         max: 5
         passed: true
-        comment: Q1 and Q4 values correctly mapped to X positions
-      - id: SC-03
+        comment: 'Correct slopegraph: two time points, entities as connecting lines
+          emphasizing direction and magnitude'
+      - id: SC-02
         name: Required Features
-        score: 5
-        max: 5
+        score: 4
+        max: 4
         passed: true
-        comment: 'Has all spec features: endpoint labels, color-coded by direction,
-          vertical axes labeled'
-      - id: SC-04
-        name: Data Range
+        comment: Labels at both endpoints, direction color coding, vertical axes labeled
+          with Q1/Q4, 8 entities in 5-15 range
+      - id: SC-03
+        name: Data Mapping
         score: 3
         max: 3
         passed: true
-        comment: All data visible within chart range
-      - id: SC-05
-        name: Legend Accuracy
-        score: 2
-        max: 2
-        passed: true
-        comment: N/A for slope chart (legend disabled, entity names in labels)
-      - id: SC-06
-        name: Title Format
-        score: 2
-        max: 2
-        passed: true
-        comment: 'Correct format: "slope-basic · highcharts · pyplots.ai"'
+        comment: Q1/Q4 on x-axis, sales values on y-axis, each entity connected by
+          a line
+      - id: SC-04
+        name: Title & Legend
+        score: 1
+        max: 3
+        passed: false
+        comment: Code title has pyplots.ai instead of anyplot.ai; wrong domain persists
+          through all 3 attempts; legend disabled (appropriate)
     data_quality:
-      score: 18
-      max: 20
+      score: 14
+      max: 15
       items:
       - id: DQ-01
         name: Feature Coverage
-        score: 7
-        max: 8
+        score: 5
+        max: 6
         passed: true
-        comment: Shows both increases and decreases, variety of magnitudes, but could
-          show rank crossings more clearly
+        comment: Eight products with mix of increases and decreases; rank changes
+          visible; good slope chart coverage
       - id: DQ-02
         name: Realistic Context
-        score: 7
-        max: 7
+        score: 5
+        max: 5
         passed: true
-        comment: Product sales Q1 vs Q4 is a plausible business scenario
+        comment: Product sales Q1 vs Q4 is realistic neutral business scenario
       - id: DQ-03
         name: Appropriate Scale
         score: 4
-        max: 5
+        max: 4
         passed: true
-        comment: Values in thousands (45-150) are realistic, though starting Y at
-          0 wastes some space
+        comment: Sales values 42-270 thousand plausible for product portfolio
     code_quality:
-      score: 9
+      score: 8
       max: 10
       items:
       - id: CQ-01
         name: KISS Structure
         score: 3
         max: 3
         passed: true
-        comment: 'Linear structure: imports → data → chart config → series → export'
+        comment: 'Clean linear structure: imports -> data -> chart config -> series
+          loop -> HTML export -> screenshot'
       - id: CQ-02
         name: Reproducibility
         score: 2
-        max: 3
-        passed: false
-        comment: Data is deterministic (hardcoded), but no explicit seed comment
+        max: 2
+        passed: true
+        comment: 'Fully deterministic: hardcoded static data, no randomness'
       - id: CQ-03
         name: Clean Imports
         score: 2
         max: 2
         passed: true
-        comment: All imports are used
+        comment: All imports are used; LineSeries from series.area is a module path
+          quirk but functionally works
       - id: CQ-04
-        name: No Deprecated API
+        name: Code Elegance
         score: 1
-        max: 1
-        passed: true
-        comment: Uses current highcharts-core API
+        max: 2
+        passed: false
+        comment: Iteration for series creation is clean; but wrong domain name and
+          palette values are correctness issues
       - id: CQ-05
-        name: Output Correct
-        score: 1
+        name: Output & API
+        score: 0
         max: 1
-        passed: true
-        comment: Saves as plot.png and plot.html
-    library_features:
-      score: 3
-      max: 5
+        passed: false
+        comment: Saves to plot.png/plot.html instead of plot-{THEME}.png/plot-{THEME}.html;
+          no ANYPLOT_THEME env var reading
+    library_mastery:
+      score: 6
+      max: 10
       items:
-      - id: LF-01
-        name: Uses distinctive library features
+      - id: LM-01
+        name: Idiomatic Usage
+        score: 3
+        max: 5
+        passed: true
+        comment: Correct use of Chart(container=container), HighchartsOptions, LineSeries;
+          inline JS for headless Chrome is idiomatic; missing theme-adaptive config
+          patterns
+      - id: LM-02
+        name: Distinctive Features
         score: 3
         max: 5
         passed: true
-        comment: Uses Highcharts line series with data labels, but could leverage
-          more advanced features like animation or tooltips for static image
+        comment: Per-endpoint data label customization (different align, x, format
+          on each point) is Highcharts-specific and well applied
   verdict: APPROVED
+impl_tags:
+  dependencies:
+  - selenium
+  techniques:
+  - html-export
+  - annotations
+  patterns:
+  - iteration-over-groups
+  dataprep: []
+  styling: []