diff --git a/plots/timeseries-forecast-uncertainty/implementations/python/highcharts.py b/plots/timeseries-forecast-uncertainty/implementations/python/highcharts.py index a9b5802fc0..ab69648ddc 100644 --- a/plots/timeseries-forecast-uncertainty/implementations/python/highcharts.py +++ b/plots/timeseries-forecast-uncertainty/implementations/python/highcharts.py @@ -1,7 +1,7 @@ """ anyplot.ai timeseries-forecast-uncertainty: Time Series Forecast with Uncertainty Band Library: highcharts unknown | Python 3.13.13 -Quality: 92/100 | Updated: 2026-05-16 +Quality: 87/100 | Updated: 2026-05-19 """ import os @@ -19,6 +19,19 @@ from selenium.webdriver.chrome.options import Options +def _download_js(urls): + for url in urls: + req = urllib.request.Request(url, headers={"User-Agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36"}) + for attempt in range(2): + try: + with urllib.request.urlopen(req, timeout=30) as response: + return response.read().decode("utf-8") + except (urllib.error.URLError, urllib.error.HTTPError): + if attempt == 0: + time.sleep(1) + return None + + # Theme tokens THEME = os.getenv("ANYPLOT_THEME", "light") PAGE_BG = "#FAF8F1" if THEME == "light" else "#1A1A17" @@ -71,52 +84,24 @@ forecast_start_ts = forecast_timestamps[0] # Download Highcharts JS from CDN with fallbacks -cdn_urls = [ - "https://cdn.jsdelivr.net/npm/highcharts@11/highcharts.min.js", - "https://unpkg.com/highcharts@11/highcharts.js", - "https://code.highcharts.com/highcharts.js", -] - -highcharts_js = None -for url in cdn_urls: - req = urllib.request.Request(url, headers={"User-Agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36"}) - max_retries = 2 - for attempt in range(max_retries): - try: - with urllib.request.urlopen(req, timeout=30) as response: - highcharts_js = response.read().decode("utf-8") - break - except (urllib.error.URLError, urllib.error.HTTPError): - if attempt < max_retries - 1: - time.sleep(1) - if highcharts_js: - break - +highcharts_js = _download_js( + [ + "https://cdn.jsdelivr.net/npm/highcharts@11/highcharts.min.js", + "https://unpkg.com/highcharts@11/highcharts.js", + "https://code.highcharts.com/highcharts.js", + ] +) if not highcharts_js: raise RuntimeError("Could not download Highcharts from any CDN") # Download Highcharts More for arearange -cdn_more_urls = [ - "https://cdn.jsdelivr.net/npm/highcharts@11/highcharts-more.min.js", - "https://unpkg.com/highcharts@11/highcharts-more.js", - "https://code.highcharts.com/highcharts-more.js", -] - -highcharts_more_js = None -for url in cdn_more_urls: - req = urllib.request.Request(url, headers={"User-Agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36"}) - max_retries = 2 - for attempt in range(max_retries): - try: - with urllib.request.urlopen(req, timeout=30) as response: - highcharts_more_js = response.read().decode("utf-8") - break - except (urllib.error.URLError, urllib.error.HTTPError): - if attempt < max_retries - 1: - time.sleep(1) - if highcharts_more_js: - break - +highcharts_more_js = _download_js( + [ + "https://cdn.jsdelivr.net/npm/highcharts@11/highcharts-more.min.js", + "https://unpkg.com/highcharts@11/highcharts-more.js", + "https://code.highcharts.com/highcharts-more.js", + ] +) if not highcharts_more_js: raise RuntimeError("Could not download Highcharts More from any CDN") @@ -127,27 +112,27 @@ # Chart configuration chart.options.chart = { "type": "line", - "width": 4800, - "height": 2700, + "width": 3200, + "height": 1800, "backgroundColor": PAGE_BG, - "spacingTop": 60, - "spacingBottom": 120, - "spacingLeft": 100, - "spacingRight": 120, + "spacingTop": 40, + "spacingBottom": 100, + "spacingLeft": 60, + "spacingRight": 80, } # Title chart.options.title = { - "text": "timeseries-forecast-uncertainty · highcharts · anyplot.ai", - "style": {"fontSize": "28px", "fontWeight": "medium", "color": INK}, - "margin": 40, + "text": "timeseries-forecast-uncertainty · python · highcharts · anyplot.ai", + "style": {"fontSize": "18px", "fontWeight": "medium", "color": INK}, + "margin": 30, } # X-axis (datetime) chart.options.x_axis = { "type": "datetime", - "title": {"text": "Date", "style": {"fontSize": "22px", "color": INK}, "margin": 25}, - "labels": {"style": {"fontSize": "18px", "color": INK_SOFT}}, + "title": {"text": "Date", "style": {"fontSize": "14px", "color": INK}, "margin": 15}, + "labels": {"style": {"fontSize": "12px", "color": INK_SOFT}}, "dateTimeLabelFormats": {"month": "%b %Y"}, "gridLineWidth": 1, "gridLineColor": GRID, @@ -157,13 +142,13 @@ { "value": forecast_start_ts, "color": INK_SOFT, - "width": 3, + "width": 2, "dashStyle": "Dash", "label": { "text": "Forecast Start", - "style": {"fontSize": "18px", "color": INK_SOFT, "fontWeight": "normal"}, + "style": {"fontSize": "12px", "color": INK_SOFT, "fontWeight": "normal"}, "rotation": 0, - "y": -15, + "y": -10, }, "zIndex": 5, } @@ -172,28 +157,28 @@ # Y-axis chart.options.y_axis = { - "title": {"text": "Product Demand (Units)", "style": {"fontSize": "22px", "color": INK}, "margin": 25}, - "labels": {"style": {"fontSize": "18px", "color": INK_SOFT}}, + "title": {"text": "Product Demand (Units)", "style": {"fontSize": "14px", "color": INK}, "margin": 15}, + "labels": {"style": {"fontSize": "12px", "color": INK_SOFT}}, "gridLineWidth": 1, "gridLineColor": GRID, "lineColor": INK_SOFT, "tickColor": INK_SOFT, } -# Legend with larger symbols +# Legend chart.options.legend = { "enabled": True, - "itemStyle": {"fontSize": "18px", "color": INK_SOFT}, - "symbolWidth": 40, - "symbolHeight": 24, + "itemStyle": {"fontSize": "12px", "color": INK_SOFT}, + "symbolWidth": 24, + "symbolHeight": 14, "symbolRadius": 3, - "margin": 30, + "margin": 20, } # Tooltip chart.options.tooltip = { "shared": True, - "style": {"fontSize": "16px", "color": INK}, + "style": {"fontSize": "12px", "color": INK}, "xDateFormat": "%B %Y", "valueDecimals": 1, } @@ -207,8 +192,8 @@ ci_95_series.data = [ {"x": forecast_timestamps[i], "low": float(lower_95[i]), "high": float(upper_95[i])} for i in range(n_forecast) ] -ci_95_series.color = "#56B4E9" if THEME == "light" else "#87CEEB" -ci_95_series.fill_opacity = 0.15 +ci_95_series.color = "#56B4E9" +ci_95_series.fill_opacity = 0.25 ci_95_series.line_width = 0 ci_95_series.marker = {"enabled": False} ci_95_series.z_index = 0 @@ -265,7 +250,7 @@ -
+
""" @@ -284,7 +269,7 @@ chrome_options.add_argument("--no-sandbox") chrome_options.add_argument("--disable-dev-shm-usage") chrome_options.add_argument("--disable-gpu") -chrome_options.add_argument("--window-size=4800,2700") +chrome_options.add_argument("--window-size=3200,1800") driver = webdriver.Chrome(options=chrome_options) driver.get(f"file://{temp_path}") diff --git a/plots/timeseries-forecast-uncertainty/metadata/python/highcharts.yaml b/plots/timeseries-forecast-uncertainty/metadata/python/highcharts.yaml index 54e2fc7017..42a16ca4e3 100644 --- a/plots/timeseries-forecast-uncertainty/metadata/python/highcharts.yaml +++ b/plots/timeseries-forecast-uncertainty/metadata/python/highcharts.yaml @@ -2,9 +2,9 @@ library: highcharts language: python specification_id: timeseries-forecast-uncertainty created: '2026-01-07T21:44:51Z' -updated: '2026-05-16T22:44:39Z' -generated_by: claude-haiku -workflow_run: 25974828494 +updated: '2026-05-19T13:38:32Z' +generated_by: claude-sonnet +workflow_run: 26099407112 issue: 3188 language_version: 3.13.13 library_version: unknown @@ -12,85 +12,99 @@ preview_url_light: https://storage.googleapis.com/anyplot-images/plots/timeserie preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/timeseries-forecast-uncertainty/python/highcharts/plot-dark.png preview_html_light: https://storage.googleapis.com/anyplot-images/plots/timeseries-forecast-uncertainty/python/highcharts/plot-light.html preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/timeseries-forecast-uncertainty/python/highcharts/plot-dark.html -quality_score: 92 +quality_score: 87 review: strengths: - - 'Spec adherence: all required features (historical, forecast, dual confidence - bands, forecast-start marker, legend) implemented and clearly visible' - - 'Theme consistency: theme-adaptive tokens applied throughout with no dark-on-dark - or light-on-light failures' - - 'Visual clarity: all text readable, data elements distinguishable, generous spacing, - no overlaps' - - 'Data storytelling: forecast vs. historical distinction clear, widening bands - effectively communicate uncertainty' - - 'Palette mastery: Okabe-Ito colors used correctly and CVD-safe' - - 'Code quality: clean, reproducible, proper error handling with CDN fallback' + - plotLines for forecast start marker is an elegant Highcharts-native solution — + the dashed vertical line with label is precisely what this feature is designed + for + - 'Theme adaptation is thorough: all INK/INK_SOFT/GRID/PAGE_BG tokens applied to + every chrome element; both renders are correct' + - Data storytelling above average — the widening CI band fan visually encodes growing + uncertainty without any annotations + - 36-point historical + 12-point forecast is well-proportioned and representative + of a real ARIMA/Prophet-style output + - CDN fallback with retry logic ensures robust JS download in restricted environments + - AreaRangeSeries + LineSeries combination is idiomatic Highcharts usage for this + chart type + - shared tooltip and zIndex layer ordering use Highcharts-native capabilities well weaknesses: - - 'Design conservatism: styling follows standard template without distinctive refinements - (custom grid styling, spine removal, typography hierarchy)' - - 'DE-02 minimal: visual refinement is competent but incremental with no bold design - choices' + - _download_js helper function breaks KISS structure (CQ-01 -1) — inline the retry + loop directly + - CI bands are slightly less visually distinct in dark mode (both render as layered + dark-steel blues) — increase fill_opacity slightly for dark theme (e.g. 0.35 dark + vs 0.25 light) + - Legend at bottom edge — increase spacingBottom from 100 to 130px to ensure legend + is never clipped at full canvas size + - CI band colors use non-sequential Okabe-Ito positions (outer 95% CI uses position + 6, inner 80% CI uses position 3) — reordering is reasonable but departs from canonical + sequential assignment image_description: |- Light render (plot-light.png): - Background: Warm off-white (#FAF8F1) as specified - Chrome: Title, Y-axis label "Product Demand (Units)", X-axis label "Date", tick labels all clearly visible in dark text; grid lines subtle but visible; legend lists all four series - Data: Historical data is solid green line (#009E73, brand color) with circular markers; forecast is dashed orange line (#D55E00) with diamond markers; 95% confidence band is lighter blue (#56B4E9, opacity 0.15); 80% confidence band is darker blue (#0072B2, opacity 0.25); both bands widen over forecast horizon; vertical dashed line marks "Forecast Start" - Legibility verdict: PASS - all elements readable, proper contrast, no overlaps + Background: Warm off-white (#FAF8F1) — correct theme surface, not pure white + Chrome: Title "timeseries-forecast-uncertainty · python · highcharts · anyplot.ai" in dark ink (#1A1A17) — readable. Y-axis label "Product Demand (Units)" and X-axis label "Date" in dark ink — readable. Tick labels in soft dark (#4A4A44) — readable. Legend at bottom with four items — visible. Vertical dashed forecast-start plotLine with "Forecast Start" label — readable. + Data: Historical solid green line (#009E73) with circular markers spans left 75% of chart. Orange dashed forecast line (#D55E00) with diamond markers in right portion. Outer 95% CI band in light blue (#56B4E9, fill_opacity 0.25). Inner 80% CI band in blue (#0072B2, fill_opacity 0.25). Both bands widen convincingly over the forecast period. Subtle horizontal grid lines. + Legibility verdict: PASS — all text clearly readable against warm off-white background; no light-on-light issues. Dark render (plot-dark.png): - Background: Warm near-black (#1A1A17) as specified - Chrome: Title and axis labels in light text (#F0EFE8); tick labels in soft light color (#B8B7B0); grid lines light on dark; legend borders and text properly adapted; all elements clearly readable against dark surface - Data: Historical green (#009E73), forecast orange (#D55E00), confidence bands both blue colors - identical to light render, proving only chrome flips - Legibility verdict: PASS - no dark-on-dark failures, brand green remains visible, theme-adaptive tokens properly applied throughout + Background: Near-black (#1A1A17) — correct dark theme surface, not pure black + Chrome: Title in light off-white (#F0EFE8) — readable against dark background. Axis labels and tick labels in soft light (#B8B7B0) — readable. No dark-on-dark failures detected. Legend at bottom in light text — visible. Forecast-start plotLine label in light ink — readable. + Data: Historical green line (#009E73) — identical color to light render, stands out well on dark background. Orange dashed forecast (#D55E00) — identical to light render. CI bands render as layered dark-steel blues on dark background: outer 95% CI slightly lighter shade, inner 80% CI slightly darker — visually distinguishable though with less contrast than light render. Grid lines very subtle (10% opacity white) — appropriate. + Legibility verdict: PASS — all text readable against near-black background; data colors identical to light render; no dark-on-dark failures. criteria_checklist: visual_quality: - score: 30 + score: 27 max: 30 items: - id: VQ-01 name: Text Legibility - score: 8 + score: 7 max: 8 passed: true - comment: Title, axis labels, tick labels all appropriately sized and readable - in both themes + comment: All font sizes explicitly set (title 18px, axes 14px, ticks/legend + 12px); all text readable in both themes; minor deduction for legend potentially + at canvas boundary - id: VQ-02 name: No Overlap score: 6 max: 6 passed: true - comment: No critical overlaps; spacing is clean and intentional + comment: No text or data element collisions in either render - id: VQ-03 name: Element Visibility - score: 6 + score: 5 max: 6 passed: true - comment: All markers, lines, and bands clearly distinguishable and visible + comment: Lines and markers well-sized for data density; CI bands slightly + less distinct in dark mode - id: VQ-04 name: Color Accessibility score: 2 max: 2 passed: true - comment: Okabe-Ito palette is CVD-safe with strong contrast + comment: Okabe-Ito palette; line style also differentiates series, not relying + on color alone - id: VQ-05 name: Layout & Canvas - score: 4 + score: 3 max: 4 passed: true - comment: 4800×2700 landscape format with generous margins, nothing cut off + comment: Chart fills canvas well; minor deduction for legend at bottom edge + potentially near boundary - id: VQ-06 name: Axis Labels & Title score: 2 max: 2 passed: true - comment: Title includes spec-id, library, anyplot.ai; Y-axis includes units + comment: Y-axis has units (Product Demand (Units)); X-axis descriptive (Date); + title format correct - id: VQ-07 name: Palette Compliance score: 2 max: 2 passed: true - comment: 'First series #009E73, second #D55E00, bands use Okabe-Ito 3&6, backgrounds - correct, data colors constant between themes' + comment: 'Historical series uses brand green #009E73; forecast uses #D55E00; + CI bands use Okabe-Ito blues; backgrounds correct for both themes' design_excellence: score: 13 max: 20 @@ -100,21 +114,23 @@ review: score: 5 max: 8 passed: true - comment: Professional Okabe-Ito palette and theme tokens; competent styling - but follows standard template + comment: Above well-configured default; color contrast between green historical + and widening blue CI bands is visually compelling; custom spacing and typography + hierarchy - id: DE-02 name: Visual Refinement - score: 3 + score: 4 max: 6 passed: true - comment: Appropriate line weights, good margins; minimal custom refinements + comment: Subtle grid (10% opacity), clean Highcharts layout, generous whitespace; + top/right spines not explicitly removed - id: DE-03 name: Data Storytelling - score: 5 + score: 4 max: 6 passed: true - comment: Clear historical vs. forecast distinction, widening bands communicate - uncertainty, visual hierarchy guides viewer + comment: 'Clear narrative: historical trend -> forecast start marker -> widening + uncertainty fan. Above default data display level.' spec_compliance: score: 15 max: 15 @@ -124,27 +140,29 @@ review: score: 5 max: 5 passed: true - comment: Time series line plot with confidence bands, correct chart type + comment: 'Correct: LineSeries + AreaRangeSeries for time-series forecast with + confidence bands' - id: SC-02 name: Required Features score: 4 max: 4 passed: true - comment: Historical, forecast, 80% and 95% intervals, forecast-start marker, - legend all present + comment: Solid historical, dashed forecast, vertical plotLine with label, + nested 80% and 95% CI bands, semi-transparent fills, legend all present - id: SC-03 name: Data Mapping score: 3 max: 3 passed: true - comment: Datetime X-axis, numeric Y-axis, all data points mapped, axes span - appropriate ranges + comment: X-axis datetime, Y-axis demand; historical left, forecast bands right; + CI bands only in forecast period - id: SC-04 name: Title & Legend score: 3 max: 3 passed: true - comment: Title format correct, legend clearly identifies all four series + comment: Title exactly matches required format; legend labels are descriptive + and match spec data_quality: score: 15 max: 15 @@ -154,80 +172,83 @@ review: score: 6 max: 6 passed: true - comment: Shows trend, seasonality, widening uncertainty; all plot type aspects - present + comment: Shows seasonal oscillation, upward trend, widening CI bands, clear + forecast start, realistic ARIMA-style forecast - id: DQ-02 name: Realistic Context score: 5 max: 5 passed: true - comment: Monthly product demand realistic; 3-year history + 1-year forecast - plausible; confidence intervals widen over time + comment: Monthly product demand over 3 years with 12-month forecast; real + business scenario; neutral content - id: DQ-03 name: Appropriate Scale score: 4 max: 4 passed: true - comment: Y-axis range (80-180 units) sensible; data fills canvas well + comment: Demand range ~90-180 units; CI widening from ±10 to ±54 units is + realistic for forecast uncertainty code_quality: - score: 10 + score: 9 max: 10 items: - id: CQ-01 name: KISS Structure - score: 3 + score: 2 max: 3 passed: true - comment: No unnecessary functions; straightforward data generation and configuration + comment: _download_js helper function breaks strict no-functions rule - id: CQ-02 name: Reproducibility score: 2 max: 2 passed: true - comment: np.random.seed(42) ensures deterministic output + comment: np.random.seed(42) set - id: CQ-03 name: Clean Imports score: 2 max: 2 passed: true - comment: All imports used, no dead imports + comment: All imports used - id: CQ-04 name: Code Elegance score: 2 max: 2 passed: true - comment: No simulated interactivity, appropriate complexity + comment: Clean, no fake interactivity, appropriate Highcharts object-attribute + style - id: CQ-05 name: Output & API score: 1 max: 1 passed: true - comment: Saves plot-light.html, plot-dark.html, plot-light.png, plot-dark.png; - uses current API + comment: Saves plot-{THEME}.png and plot-{THEME}.html correctly library_mastery: - score: 9 + score: 8 max: 10 items: - id: LM-01 name: Idiomatic Usage - score: 5 + score: 4 max: 5 passed: true - comment: Proper HighchartsOptions, AreaRangeSeries, LineSeries, theme tokens, - CDN fallback, Selenium export + comment: 'Uses highcharts_core OO API correctly: AreaRangeSeries, LineSeries, + HighchartsOptions; to_js_literal() for HTML generation is correct pattern' - id: LM-02 name: Distinctive Features score: 4 max: 5 passed: true - comment: AreaRangeSeries for bands, plotLines for forecast start, theme-adaptive - styling well-executed + comment: plotLines for forecast start marker is genuinely Highcharts-distinctive; + AreaRangeSeries, shared tooltip, zIndex layering are all Highcharts-native + capabilities verdict: APPROVED impl_tags: dependencies: - selenium techniques: - html-export + - hover-tooltips patterns: - data-generation dataprep: