Merge branch 'main' into implementation/line-timeseries/letsplot

Author: MarkusNeusinger

plots/line-timeseries/implementations/python/highcharts.py

@@ -1,10 +1,11 @@
-""" pyplots.ai
+""" anyplot.ai
 line-timeseries: Time Series Line Plot
-Library: highcharts unknown | Python 3.13.11
-Quality: 92/100 | Created: 2025-12-26
+Library: highcharts unknown | Python 3.13.13
+Quality: 90/100 | Updated: 2026-05-09
 """
 
 import math
+import os
 import random
 import tempfile
 import time
@@ -19,6 +20,19 @@
 from selenium.webdriver.chrome.options import Options
 
 
+# Read theme from environment
+THEME = os.getenv("ANYPLOT_THEME", "light")
+
+# Theme-adaptive color palette
+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)"
+
+# Okabe-Ito palette (first series must be #009E73)
+BRAND = "#009E73"
+
 # Data - Daily temperature readings over one year (365 days)
 random.seed(42)
 start_date = datetime(2024, 1, 1)
@@ -45,96 +59,120 @@
 chart = Chart(container="container")
 chart.options = HighchartsOptions()
 
-# Chart configuration
+# Chart configuration - theme-adaptive background
 chart.options.chart = {
     "type": "line",
     "width": 4800,
     "height": 2700,
-    "backgroundColor": "#ffffff",
+    "backgroundColor": PAGE_BG,
     "spacingTop": 60,
     "spacingBottom": 100,
     "spacingLeft": 80,
     "spacingRight": 80,
 }
 
-# Title
+# Title - theme-adaptive color
 chart.options.title = {
     "text": "line-timeseries · highcharts · pyplots.ai",
-    "style": {"fontSize": "56px", "fontWeight": "bold"},
+    "style": {"fontSize": "56px", "fontWeight": "bold", "color": INK},
     "margin": 40,
 }
 
-chart.options.subtitle = {
-    "text": "Daily Temperature Readings - 2024",
-    "style": {"fontSize": "36px", "color": "#666666"},
-}
+# Subtitle - theme-adaptive color
+chart.options.subtitle = {"text": "Daily Temperature Readings - 2024", "style": {"fontSize": "36px", "color": INK_SOFT}}
 
 # X-axis (datetime) - with monthly tick intervals to prevent label overlap
 chart.options.x_axis = {
     "type": "datetime",
-    "title": {"text": "Date", "style": {"fontSize": "36px"}, "margin": 25},
-    "labels": {"style": {"fontSize": "28px"}},
+    "title": {"text": "Date", "style": {"fontSize": "36px", "color": INK}, "margin": 25},
+    "labels": {"style": {"fontSize": "28px", "color": INK_SOFT}},
     "gridLineWidth": 1,
-    "gridLineColor": "rgba(0, 0, 0, 0.1)",
+    "gridLineColor": GRID,
     "tickInterval": 30 * 24 * 3600 * 1000,  # Monthly ticks (30 days in ms)
     "dateTimeLabelFormats": {"month": "%b %Y"},
+    "lineColor": INK_SOFT,
+    "tickColor": INK_SOFT,
 }
 
-# Y-axis
+# Y-axis - theme-adaptive colors
 chart.options.y_axis = {
-    "title": {"text": "Temperature (°C)", "style": {"fontSize": "36px"}, "margin": 25},
-    "labels": {"style": {"fontSize": "28px"}},
+    "title": {"text": "Temperature (°C)", "style": {"fontSize": "36px", "color": INK}, "margin": 25},
+    "labels": {"style": {"fontSize": "28px", "color": INK_SOFT}},
     "gridLineWidth": 1,
-    "gridLineColor": "rgba(0, 0, 0, 0.1)",
+    "gridLineColor": GRID,
+    "lineColor": INK_SOFT,
+    "tickColor": INK_SOFT,
 }
 
-# Legend
-chart.options.legend = {"enabled": True, "itemStyle": {"fontSize": "32px"}, "margin": 30}
+# Legend - theme-adaptive styling with improved visibility
+chart.options.legend = {
+    "enabled": True,
+    "itemStyle": {"fontSize": "32px", "color": INK_SOFT},
+    "backgroundColor": ELEVATED_BG,
+    "borderColor": INK_SOFT,
+    "borderWidth": 1,
+    "margin": 30,
+}
 
-# Tooltip
-chart.options.tooltip = {"xDateFormat": "%A, %b %d, %Y", "valueSuffix": " °C", "style": {"fontSize": "28px"}}
+# Tooltip - theme-adaptive styling
+chart.options.tooltip = {
+    "xDateFormat": "%A, %b %d, %Y",
+    "valueSuffix": " °C",
+    "style": {"fontSize": "28px", "color": INK},
+    "backgroundColor": ELEVATED_BG,
+    "borderColor": INK_SOFT,
+    "borderRadius": 4,
+}
 
 # Plot options
 chart.options.plot_options = {
     "line": {"lineWidth": 5, "marker": {"enabled": False}, "states": {"hover": {"lineWidth": 6}}}
 }
 
-# Add series
+# Add series with Okabe-Ito brand color
 series = LineSeries()
 series.name = "Temperature"
 series.data = data_points
-series.color = "#306998"  # Python Blue
+series.color = BRAND  # #009E73 - Okabe-Ito position 1
 
 chart.add_series(series)
 
-# Export to PNG via Selenium
-highcharts_url = "https://code.highcharts.com/highcharts.js"
-with urllib.request.urlopen(highcharts_url, timeout=30) as response:
+# Download Highcharts JS (required for headless Chrome)
+highcharts_url = "https://unpkg.com/highcharts@11/highcharts.js"
+req = urllib.request.Request(
+    highcharts_url, headers={"User-Agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36"}
+)
+with urllib.request.urlopen(req, timeout=30) as response:
     highcharts_js = response.read().decode("utf-8")
 
+# Generate chart JS
 html_str = chart.to_js_literal()
+
+# Create HTML content with proper theme-adaptive styling
 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 version
-with open("plot.html", "w", encoding="utf-8") as f:
+# Save HTML version with theme suffix
+with open(f"plot-{THEME}.html", "w", encoding="utf-8") as f:
     cdn_html = (
         """<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <script src="https://code.highcharts.com/highcharts.js"></script>
 </head>
-<body style="margin:0;">
+<body style="margin:0; background:"""
+        + PAGE_BG
+        + """;">
     <div id="container" style="width: 100%; height: 600px;"></div>
     <script>"""
         + html_str
@@ -162,7 +200,7 @@
 
 # Screenshot the chart container element for exact dimensions
 container = driver.find_element("id", "container")
-container.screenshot("plot.png")
+container.screenshot(f"plot-{THEME}.png")
 driver.quit()
 
 Path(temp_path).unlink()

plots/line-timeseries/implementations/python/pygal.py

@@ -1,15 +1,33 @@
-""" pyplots.ai
+""" anyplot.ai
 line-timeseries: Time Series Line Plot
-Library: pygal 3.1.0 | Python 3.13.11
-Quality: 91/100 | Created: 2025-12-26
+Library: pygal 3.1.0 | Python 3.13.13
+Quality: 85/100 | Updated: 2026-05-09
 """
 
+import os
 import random
+import sys
 from datetime import datetime, timedelta
 
-import pygal
-from pygal.style import Style
 
+# Ensure site-packages is in path before current directory to avoid shadowing
+site_packages = next((p for p in sys.path if "site-packages" in p), None)
+if site_packages and sys.path[0] == os.path.dirname(__file__):
+    sys.path.remove(sys.path[0])
+    sys.path.insert(0, site_packages)
+
+import pygal  # noqa: E402
+from pygal.style import Style  # noqa: E402
+
+
+# Theme tokens
+THEME = os.getenv("ANYPLOT_THEME", "light")
+PAGE_BG = "#FAF8F1" if THEME == "light" else "#1A1A17"
+INK = "#1A1A17" if THEME == "light" else "#F0EFE8"
+INK_MUTED = "#6B6A63" if THEME == "light" else "#A8A79F"
+
+# Okabe-Ito palette
+OKABE_ITO = ("#009E73", "#D55E00", "#0072B2", "#CC79A7", "#E69F00", "#56B4E9", "#F0E442")
 
 # Seed for reproducibility
 random.seed(42)
@@ -22,45 +40,42 @@
 price = 150.0
 prices = []
 for _ in range(365):
-    # Add slight upward trend with random daily changes
     change = random.gauss(0.1, 2.5)
-    price = max(100, price + change)  # Prevent going too low
+    price = max(100, price + change)
     prices.append(round(price, 2))
 
-# Custom style for 4800x2700 canvas with larger fonts
+# Custom style for 4800x2700 canvas
 custom_style = Style(
-    background="white",
-    plot_background="white",
-    foreground="#333333",
-    foreground_strong="#333333",
-    foreground_subtle="#666666",
-    colors=("#306998",),  # Python Blue
-    title_font_size=72,
-    label_font_size=48,
-    major_label_font_size=42,
-    legend_font_size=42,
-    value_font_size=36,
-    guide_stroke_color="#cccccc",
-    guide_stroke_dasharray="2,4",
+    background=PAGE_BG,
+    plot_background=PAGE_BG,
+    foreground=INK,
+    foreground_strong=INK,
+    foreground_subtle=INK_MUTED,
+    colors=OKABE_ITO,
+    title_font_size=28,
+    label_font_size=22,
+    major_label_font_size=18,
+    legend_font_size=16,
+    value_font_size=14,
+    stroke_width=6,
 )
 
 # Create line chart
 chart = pygal.Line(
     width=4800,
     height=2700,
     style=custom_style,
-    title="line-timeseries · pygal · pyplots.ai",
+    title="line-timeseries · pygal · anyplot.ai",
     x_title="Date",
     y_title="Stock Price (USD)",
-    show_x_guides=False,
+    show_x_guides=True,
     show_y_guides=True,
     x_label_rotation=45,
     show_legend=True,
     legend_at_bottom=True,
     truncate_legend=-1,
     show_dots=False,
-    stroke_style={"width": 5},
-    margin=60,
+    margin=100,
 )
 
 # Add data series
@@ -70,7 +85,7 @@
 x_labels = []
 x_labels_major = []
 for d in dates:
-    if d.day == 1:  # First of each month
+    if d.day == 1:
         x_labels.append(d.strftime("%b %Y"))
         x_labels_major.append(d.strftime("%b %Y"))
     else:
@@ -80,5 +95,5 @@
 chart.x_labels_major = x_labels_major
 
 # Save as PNG and HTML
-chart.render_to_file("plot.html")
-chart.render_to_png("plot.png")
+chart.render_to_file(f"plot-{THEME}.html")
+chart.render_to_png(f"plot-{THEME}.png")