Merge branch 'main' into implementation/step-basic/letsplot

Author: MarkusNeusinger

plots/step-basic/implementations/python/altair.py

@@ -1,14 +1,14 @@
-""" pyplots.ai
+""" anyplot.ai
 step-basic: Basic Step Plot
-Library: altair 6.0.0 | Python 3.13.11
-Quality: 92/100 | Created: 2025-12-23
+Library: altair 6.1.0 | Python 3.13.13
+Quality: 87/100 | Updated: 2026-04-30
 """
 
-# Workaround for altair.py file shadowing the altair module
 import os
 import sys
 
 
+# Workaround: this file is named altair.py, which shadows the altair module
 _cwd = os.getcwd()
 if _cwd in sys.path:
     sys.path.remove(_cwd)
@@ -21,40 +21,60 @@
 
 import pandas as pd  # noqa: E402, I001
 
+# Theme tokens
+THEME = os.getenv("ANYPLOT_THEME", "light")
+PAGE_BG = "#FAF8F1" if THEME == "light" else "#1A1A17"
+ELEVATED_BG = "#FFFDF6" if THEME == "light" else "#242420"
+INK = "#1A1A17" if THEME == "light" else "#F0EFE8"
+INK_SOFT = "#4A4A44" if THEME == "light" else "#B8B7B0"
+BRAND = "#009E73"
 
-# Data - Monthly cumulative sales (shows clear step pattern)
+# Data — monthly cumulative software subscription revenue
 months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
-cumulative_sales = [12, 25, 31, 48, 52, 67, 89, 95, 108, 124, 145, 168]
+cumulative_revenue = [12, 25, 31, 48, 52, 67, 89, 95, 108, 124, 145, 168]
 
-df = pd.DataFrame({"Month": months, "Cumulative Sales": cumulative_sales})
+df = pd.DataFrame({"Month": months, "Cumulative Revenue": cumulative_revenue})
 
-# Create step chart
-chart = (
+# Step line
+line = (
     alt.Chart(df)
-    .mark_line(interpolate="step-after", strokeWidth=4, color="#306998")
+    .mark_line(interpolate="step-after", strokeWidth=5, color=BRAND)
     .encode(
         x=alt.X("Month:N", title="Month", sort=months, axis=alt.Axis(labelAngle=0)),
-        y=alt.Y("Cumulative Sales:Q", title="Cumulative Sales (thousands $)"),
+        y=alt.Y("Cumulative Revenue:Q", title="Cumulative Revenue (thousands $)"),
     )
-    .properties(width=1600, height=900, title=alt.Title("step-basic · altair · pyplots.ai", fontSize=28))
 )
 
-# Add markers at data points to highlight where changes occur
+# Markers at each data point
 points = (
     alt.Chart(df)
-    .mark_point(size=200, color="#306998", filled=True)
-    .encode(x=alt.X("Month:N", sort=months), y="Cumulative Sales:Q")
+    .mark_point(size=220, color=BRAND, filled=True, opacity=1.0)
+    .encode(x=alt.X("Month:N", sort=months), y="Cumulative Revenue:Q")
 )
 
-# Combine line and points
-final_chart = (
-    (chart + points)
-    .configure_axis(labelFontSize=18, titleFontSize=22, grid=True, gridOpacity=0.3, gridDash=[4, 4])
-    .configure_view(strokeWidth=0)
+# Compose and style
+chart = (
+    (line + points)
+    .properties(
+        width=1600,
+        height=900,
+        background=PAGE_BG,
+        title=alt.Title("step-basic · altair · anyplot.ai", fontSize=28, color=INK),
+    )
+    .configure_view(fill=PAGE_BG, stroke=INK_SOFT)
+    .configure_axis(
+        domainColor=INK_SOFT,
+        tickColor=INK_SOFT,
+        gridColor=INK,
+        gridOpacity=0.10,
+        labelColor=INK_SOFT,
+        titleColor=INK,
+        labelFontSize=18,
+        titleFontSize=22,
+    )
+    .configure_legend(fillColor=ELEVATED_BG, strokeColor=INK_SOFT, labelColor=INK_SOFT, titleColor=INK)
 )
 
-# Save as PNG (1600 × 900 @ scale 3 = 4800 × 2700)
-final_chart.save("plot.png", scale_factor=3.0)
-
-# Save as HTML for interactivity
-final_chart.save("plot.html")
+# Save
+chart.save(f"plot-{THEME}.png", scale_factor=3.0)
+chart.save(f"plot-{THEME}.html")

plots/step-basic/implementations/python/bokeh.py

@@ -1,56 +1,78 @@
-""" pyplots.ai
+""" anyplot.ai
 step-basic: Basic Step Plot
-Library: bokeh 3.8.1 | Python 3.13.11
-Quality: 92/100 | Created: 2025-12-23
+Library: bokeh 3.9.0 | Python 3.13.13
+Quality: 87/100 | Updated: 2026-04-30
 """
 
+import os
+
 from bokeh.io import export_png, output_file
 from bokeh.models import ColumnDataSource
 from bokeh.plotting import figure, save
 
 
+# Theme
+THEME = os.getenv("ANYPLOT_THEME", "light")
+PAGE_BG = "#FAF8F1" if THEME == "light" else "#1A1A17"
+ELEVATED_BG = "#FFFDF6" if THEME == "light" else "#242420"
+INK = "#1A1A17" if THEME == "light" else "#F0EFE8"
+INK_SOFT = "#4A4A44" if THEME == "light" else "#B8B7B0"
+BRAND = "#009E73"
+
 # Data - Monthly cumulative sales showing discrete jumps
 months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
 cumulative_sales = [15, 28, 42, 55, 71, 89, 102, 118, 135, 156, 172, 195]
 
 source = ColumnDataSource(data={"month": months, "sales": cumulative_sales})
 
-# Create figure (4800 × 2700 px)
+# Plot
 p = figure(
     width=4800,
     height=2700,
-    title="step-basic · bokeh · pyplots.ai",
+    title="step-basic · bokeh · anyplot.ai",
     x_axis_label="Month",
     y_axis_label="Cumulative Sales (units)",
     tools="",
     toolbar_location=None,
 )
 
-# Step plot using step glyph (post mode - value applies until next change)
-p.step(x="month", y="sales", source=source, line_width=4, color="#306998", mode="after")
+# Step line (after/post mode - value holds until next change occurs)
+p.step(x="month", y="sales", source=source, line_width=5, color=BRAND, mode="after")
 
-# Add markers at data points to show where changes occur
-p.scatter(x="month", y="sales", source=source, size=18, color="#FFD43B", line_color="#306998", line_width=3)
+# Markers at data points to highlight where changes occur
+p.scatter(x="month", y="sales", source=source, size=18, color=BRAND, line_color=PAGE_BG, line_width=3)
 
-# Styling for 4800x2700 px
-p.title.text_font_size = "48pt"
-p.xaxis.axis_label_text_font_size = "36pt"
-p.yaxis.axis_label_text_font_size = "36pt"
-p.xaxis.major_label_text_font_size = "28pt"
-p.yaxis.major_label_text_font_size = "28pt"
+# Style - text sizes for 4800x2700 px canvas
+p.title.text_font_size = "28pt"
+p.title.text_font_style = "bold"
+p.title.text_color = INK
+p.xaxis.axis_label_text_font_size = "22pt"
+p.yaxis.axis_label_text_font_size = "22pt"
+p.xaxis.axis_label_text_color = INK
+p.yaxis.axis_label_text_color = INK
+p.xaxis.major_label_text_font_size = "18pt"
+p.yaxis.major_label_text_font_size = "18pt"
+p.xaxis.major_label_text_color = INK_SOFT
+p.yaxis.major_label_text_color = INK_SOFT
 
-# Grid styling
-p.xgrid.grid_line_alpha = 0.3
-p.ygrid.grid_line_alpha = 0.3
-p.xgrid.grid_line_dash = "dashed"
-p.ygrid.grid_line_dash = "dashed"
+# Chrome - axes and ticks
+p.xaxis.axis_line_color = INK_SOFT
+p.yaxis.axis_line_color = INK_SOFT
+p.xaxis.major_tick_line_color = INK_SOFT
+p.yaxis.major_tick_line_color = INK_SOFT
 
-# Background
-p.background_fill_color = "#fafafa"
+# Grid - subtle solid lines
+p.xgrid.grid_line_color = INK
+p.xgrid.grid_line_alpha = 0.10
+p.ygrid.grid_line_color = INK
+p.ygrid.grid_line_alpha = 0.10
 
-# Save as PNG
-export_png(p, filename="plot.png")
+# Background
+p.background_fill_color = PAGE_BG
+p.border_fill_color = PAGE_BG
+p.outline_line_color = INK_SOFT
 
-# Save as HTML for interactivity
-output_file("plot.html")
+# Save
+export_png(p, filename=f"plot-{THEME}.png")
+output_file(f"plot-{THEME}.html")
 save(p)

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

@@ -1,9 +1,10 @@
-""" pyplots.ai
+""" anyplot.ai
 step-basic: Basic Step Plot
-Library: highcharts unknown | Python 3.13.11
-Quality: 92/100 | Created: 2025-12-23
+Library: highcharts unknown | Python 3.13.13
+Quality: 86/100 | Updated: 2026-04-30
 """
 
+import os
 import tempfile
 import time
 import urllib.request
@@ -16,6 +17,15 @@
 from selenium.webdriver.chrome.options import Options
 
 
+# Theme tokens
+THEME = os.getenv("ANYPLOT_THEME", "light")
+PAGE_BG = "#FAF8F1" if THEME == "light" else "#1A1A17"
+ELEVATED_BG = "#FFFDF6" if THEME == "light" else "#242420"
+INK = "#1A1A17" if THEME == "light" else "#F0EFE8"
+INK_SOFT = "#4A4A44" if THEME == "light" else "#B8B7B0"
+GRID = "rgba(26,26,23,0.10)" if THEME == "light" else "rgba(240,239,232,0.10)"
+BRAND = "#009E73"
+
 # Data - Monthly cumulative sales (thousands of dollars)
 months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
 cumulative_sales = [45, 92, 156, 198, 267, 312, 398, 445, 523, 612, 695, 780]
@@ -29,73 +39,80 @@
     "type": "line",
     "width": 4800,
     "height": 2700,
-    "backgroundColor": "#ffffff",
+    "backgroundColor": PAGE_BG,
     "marginBottom": 250,
     "marginLeft": 200,
 }
 
 # Title
 chart.options.title = {
-    "text": "step-basic · highcharts · pyplots.ai",
-    "style": {"fontSize": "72px", "fontWeight": "bold"},
+    "text": "step-basic · highcharts · anyplot.ai",
+    "style": {"fontSize": "72px", "fontWeight": "bold", "color": INK},
 }
 
-# X-axis (categories)
+# X-axis
 chart.options.x_axis = {
     "categories": months,
-    "title": {"text": "Month", "style": {"fontSize": "48px"}},
-    "labels": {"style": {"fontSize": "36px"}},
+    "title": {"text": "Month", "style": {"fontSize": "48px", "color": INK}},
+    "labels": {"style": {"fontSize": "36px", "color": INK_SOFT}},
+    "lineColor": INK_SOFT,
+    "tickColor": INK_SOFT,
+    "gridLineColor": GRID,
 }
 
 # Y-axis
 chart.options.y_axis = {
-    "title": {"text": "Cumulative Sales ($K)", "style": {"fontSize": "48px"}},
-    "labels": {"style": {"fontSize": "36px"}},
+    "title": {"text": "Cumulative Sales ($K)", "style": {"fontSize": "48px", "color": INK}},
+    "labels": {"style": {"fontSize": "36px", "color": INK_SOFT}},
     "gridLineWidth": 1,
-    "gridLineColor": "#cccccc",
+    "gridLineColor": GRID,
 }
 
-# Plot options for step line
+# Plot options — step line with markers
 chart.options.plot_options = {
-    "line": {
-        "step": "left",  # Step style: value applies from this point until next
-        "lineWidth": 6,
-        "marker": {"enabled": True, "radius": 12, "symbol": "circle"},
-    }
+    "line": {"step": "left", "lineWidth": 6, "marker": {"enabled": True, "radius": 12, "symbol": "circle"}}
 }
 
-# Legend
-chart.options.legend = {"enabled": True, "itemStyle": {"fontSize": "36px"}}
+# Legend disabled — single series
+chart.options.legend = {"enabled": False}
 
-# Series data
+# Series
 series = LineSeries()
 series.name = "Cumulative Sales"
 series.data = cumulative_sales
-series.color = "#306998"  # Python Blue
+series.color = BRAND
 
 chart.add_series(series)
 
-# Download Highcharts JS for inline embedding
-highcharts_url = "https://code.highcharts.com/highcharts.js"
-with urllib.request.urlopen(highcharts_url, timeout=30) as response:
-    highcharts_js = response.read().decode("utf-8")
-
-# Generate HTML with inline script
+# Download Highcharts JS for inline embedding (headless Chrome cannot load CDN)
+cdn_urls = ["https://cdn.jsdelivr.net/npm/highcharts@11/highcharts.js", "https://code.highcharts.com/highcharts.js"]
+highcharts_js = None
+for url in cdn_urls:
+    try:
+        with urllib.request.urlopen(url, timeout=30) as response:
+            highcharts_js = response.read().decode("utf-8")
+        break
+    except Exception:
+        continue
+if not highcharts_js:
+    raise RuntimeError("Failed to download Highcharts JS from all CDN sources")
+
+# Build HTML with inline script
 html_str = chart.to_js_literal()
 html_content = f"""<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <script>{highcharts_js}</script>
 </head>
-<body style="margin:0;">
+<body style="margin:0; background:{PAGE_BG};">
     <div id="container" style="width: 4800px; height: 2700px;"></div>
     <script>{html_str}</script>
 </body>
 </html>"""
 
-# Save HTML file
-with open("plot.html", "w", encoding="utf-8") as f:
+# Save HTML artifact
+with open(f"plot-{THEME}.html", "w", encoding="utf-8") as f:
     f.write(html_content)
 
 # Screenshot with Selenium
@@ -113,7 +130,7 @@
 driver = webdriver.Chrome(options=chrome_options)
 driver.get(f"file://{temp_path}")
 time.sleep(5)
-driver.save_screenshot("plot.png")
+driver.save_screenshot(f"plot-{THEME}.png")
 driver.quit()
 
 Path(temp_path).unlink()