feat(highcharts): implement polar-basic (#5572)

## Implementation: `polar-basic` - python/highcharts

Implements the **python/highcharts** version of `polar-basic`.

**File:** `plots/polar-basic/implementations/python/highcharts.py`

**Parent Issue:** #800

---
:robot: *[impl-generate
workflow](https://github.com/MarkusNeusinger/anyplot/actions/runs/25141207935)*

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Markus Neusinger <2921697+MarkusNeusinger@users.noreply.github.com>

Author: github-actions[bot]

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

@@ -1,9 +1,10 @@
-""" pyplots.ai
+""" anyplot.ai
 polar-basic: Basic Polar Chart
-Library: highcharts unknown | Python 3.13.11
-Quality: 91/100 | Created: 2025-12-23
+Library: highcharts unknown | Python 3.13.13
+Quality: 88/100 | Updated: 2026-04-30
 """
 
+import os
 import tempfile
 import time
 import urllib.request
@@ -12,93 +13,156 @@
 import numpy as np
 from highcharts_core.chart import Chart
 from highcharts_core.options import HighchartsOptions
+from highcharts_core.options.series.area import AreaSeries
 from highcharts_core.options.series.scatter import ScatterSeries
 from selenium import webdriver
 from selenium.webdriver.chrome.options import Options
 
 
-# Data - Hourly temperature readings (24-hour cycle)
+# 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.12)" if THEME == "light" else "rgba(240,239,232,0.12)"
+
+BRAND = "#009E73"  # Okabe-Ito position 1
+PEAK_COLOR = "#D55E00"  # Okabe-Ito position 2 - peak highlight
+
+# Data - 24-hour temperature cycle
 np.random.seed(42)
-hours = np.arange(0, 360, 15)  # 24 data points at 15-degree intervals (360/24=15)
-# Temperature pattern: cooler at night (0°/midnight), warmer during day (180°/noon)
-base_temp = 15 + 10 * np.sin(np.radians(hours - 90))  # Peak at 90° (6 AM shifted to noon)
-temperatures = base_temp + np.random.randn(len(hours)) * 2  # Add some noise
+hours = np.arange(0, 24)
+base_temp = 15 + 10 * np.sin(np.radians(hours / 24 * 360 - 90))  # Peak around noon
+temperatures = base_temp + np.random.randn(24) * 2
+
+peak_idx = int(np.argmax(temperatures))
 
 # Create chart
 chart = Chart(container="container")
 chart.options = HighchartsOptions()
 
-# Chart configuration for polar scatter plot
-chart.options.chart = {"polar": True, "width": 4800, "height": 2700, "backgroundColor": "#ffffff"}
+# Square canvas - optimal for circular polar chart
+chart.options.chart = {
+    "polar": True,
+    "width": 3600,
+    "height": 3600,
+    "backgroundColor": PAGE_BG,
+    "style": {"color": INK},
+    "marginTop": 240,
+    "marginBottom": 220,
+}
 
-# Title
 chart.options.title = {
-    "text": "polar-basic · highcharts · pyplots.ai",
-    "style": {"fontSize": "72px", "fontWeight": "bold"},
+    "text": "polar-basic · highcharts · anyplot.ai",
+    "style": {"fontSize": "72px", "fontWeight": "bold", "color": INK},
 }
 
-# Subtitle for context
-chart.options.subtitle = {"text": "24-Hour Temperature Pattern", "style": {"fontSize": "48px"}}
+chart.options.subtitle = {"text": "24-Hour Temperature Pattern", "style": {"fontSize": "48px", "color": INK_SOFT}}
 
-# X-axis (angular axis - hours around the clock)
+# Angular axis (hours)
 chart.options.x_axis = {
-    "tickInterval": 30,  # Every 30 degrees (every 2 hours)
     "min": 0,
-    "max": 360,
-    "labels": {"format": "{value}°", "style": {"fontSize": "36px"}},
-    "gridLineWidth": 2,
-    "gridLineColor": "rgba(0, 0, 0, 0.15)",
+    "max": 24,
+    "tickInterval": 3,
+    "labels": {"format": "{value}h", "style": {"fontSize": "36px", "color": INK_SOFT}},
+    "gridLineWidth": 1,
+    "gridLineColor": GRID,
+    "lineColor": INK_SOFT,
+    "tickColor": INK_SOFT,
 }
 
-# Y-axis (radial axis - temperature)
+# Radial axis (temperature)
 chart.options.y_axis = {
     "min": 0,
     "max": 35,
     "tickInterval": 5,
-    "labels": {"format": "{value}°C", "style": {"fontSize": "32px"}},
-    "gridLineWidth": 2,
-    "gridLineColor": "rgba(0, 0, 0, 0.15)",
-    "title": {"text": "Temperature (°C)", "style": {"fontSize": "40px"}},
+    "labels": {"format": "{value}°C", "style": {"fontSize": "28px", "color": INK_SOFT}},
+    "gridLineWidth": 1,
+    "gridLineColor": GRID,
+    "lineColor": INK_SOFT,
 }
 
-# Pane settings for polar chart
-chart.options.pane = {"size": "70%", "startAngle": 0, "endAngle": 360}
+# Pane - generous in square canvas
+chart.options.pane = {"size": "78%", "startAngle": 0, "endAngle": 360}
+
+# Custom tooltip with formatted output (distinctive Highcharts feature)
+chart.options.tooltip = {
+    "headerFormat": "",
+    "pointFormat": "<span style='font-size:24px; font-weight:bold'>{series.name}</span><br/><b>{point.x}h</b>: {point.y:.1f}°C",
+    "style": {"fontSize": "28px", "color": INK},
+    "backgroundColor": ELEVATED_BG,
+    "borderColor": INK_SOFT,
+    "borderWidth": 1,
+    "padding": 12,
+}
 
-# Plot options for scatter on polar
 chart.options.plot_options = {
-    "scatter": {"marker": {"enabled": True, "radius": 16, "symbol": "circle"}, "lineWidth": 3},
+    "area": {
+        "connectEnds": True,
+        "fillOpacity": 0.28,
+        "lineWidth": 3,
+        "marker": {"enabled": True, "radius": 12, "symbol": "circle", "lineWidth": 2, "lineColor": PAGE_BG},
+    },
+    "scatter": {"marker": {"radius": 22, "symbol": "circle"}},
     "series": {"animation": False},
 }
 
-# Legend
 chart.options.legend = {
     "enabled": True,
     "align": "center",
     "verticalAlign": "bottom",
     "layout": "horizontal",
-    "itemStyle": {"fontSize": "36px"},
+    "itemStyle": {"fontSize": "36px", "color": INK_SOFT},
+    "backgroundColor": ELEVATED_BG,
+    "borderColor": INK_SOFT,
+    "borderWidth": 1,
 }
 
-# Credits
 chart.options.credits = {"enabled": False}
 
-# Create scatter series with polar coordinates
-series = ScatterSeries()
-series.data = [[float(h), float(t)] for h, t in zip(hours, temperatures, strict=True)]
-series.name = "Temperature"
-series.color = "rgba(48, 105, 152, 0.8)"  # Python Blue with alpha
-series.marker = {"radius": 16, "symbol": "circle"}
-
-chart.add_series(series)
+# Main temperature series - AreaSeries for filled polar trace
+area_series = AreaSeries()
+area_series.data = [[float(h), float(t)] for h, t in zip(hours, temperatures, strict=True)]
+area_series.name = "Temperature"
+area_series.color = BRAND
+area_series.fill_opacity = 0.28
+area_series.connect_ends = True
+
+chart.add_series(area_series)
+
+# Focal-point marker highlighting the daily maximum temperature
+peak_series = ScatterSeries()
+peak_series.data = [[float(hours[peak_idx]), float(temperatures[peak_idx])]]
+peak_series.name = "Daily Peak"
+peak_series.color = PEAK_COLOR
+peak_series.marker = {"radius": 22, "symbol": "circle", "lineWidth": 3, "lineColor": INK}
+peak_series.data_labels = {
+    "enabled": True,
+    "format": "{point.y:.1f}°C",
+    "style": {"fontSize": "28px", "color": INK, "fontWeight": "bold", "textOutline": "none"},
+    "y": -50,
+}
 
-# Download Highcharts JS and highcharts-more.js (required for polar charts)
-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")
+chart.add_series(peak_series)
 
-highcharts_more_url = "https://code.highcharts.com/highcharts-more.js"
-with urllib.request.urlopen(highcharts_more_url, timeout=30) as response:
-    highcharts_more_js = response.read().decode("utf-8")
+# Download Highcharts JS (inline for headless Chrome, with /tmp cache)
+cache_dir = Path("/tmp")
+hc_urls = {
+    "core": ("https://cdn.jsdelivr.net/npm/highcharts@11.4.8/highcharts.js", cache_dir / "highcharts.js"),
+    "more": ("https://cdn.jsdelivr.net/npm/highcharts@11.4.8/highcharts-more.js", cache_dir / "highcharts-more.js"),
+}
+hc_js = {}
+for key, (url, cache_path) in hc_urls.items():
+    if cache_path.exists() and cache_path.stat().st_size > 1000:
+        hc_js[key] = cache_path.read_text(encoding="utf-8")
+    else:
+        with urllib.request.urlopen(url, timeout=30) as resp:
+            content = resp.read().decode("utf-8")
+        cache_path.write_text(content, encoding="utf-8")
+        hc_js[key] = content
+highcharts_js = hc_js["core"]
+highcharts_more_js = hc_js["more"]
 
 # Generate HTML with inline scripts
 html_str = chart.to_js_literal()
@@ -109,12 +173,16 @@
     <script>{highcharts_js}</script>
     <script>{highcharts_more_js}</script>
 </head>
-<body style="margin:0;">
-    <div id="container" style="width: 4800px; height: 2700px;"></div>
+<body style="margin:0; background:{PAGE_BG};">
+    <div id="container" style="width: 3600px; height: 3600px;"></div>
     <script>{html_str}</script>
 </body>
 </html>"""
 
+# Save HTML artifact
+with open(f"plot-{THEME}.html", "w", encoding="utf-8") as f:
+    f.write(html_content)
+
 # Write temp HTML and take screenshot
 with tempfile.NamedTemporaryFile(mode="w", suffix=".html", delete=False, encoding="utf-8") as f:
     f.write(html_content)
@@ -125,31 +193,14 @@
 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=5000,3000")
+chrome_options.add_argument("--window-size=3800,3800")
 
 driver = webdriver.Chrome(options=chrome_options)
 driver.get(f"file://{temp_path}")
-time.sleep(5)  # Wait for chart to render
+time.sleep(5)
 
-# Take screenshot of just the chart container element
 container = driver.find_element("id", "container")
-container.screenshot("plot.png")
+container.screenshot(f"plot-{THEME}.png")
 driver.quit()
 
-Path(temp_path).unlink()  # Clean up temp file
-
-# Also save HTML for interactive version
-with open("plot.html", "w", encoding="utf-8") as f:
-    interactive_html = f"""<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <script src="https://code.highcharts.com/highcharts.js"></script>
-    <script src="https://code.highcharts.com/highcharts-more.js"></script>
-</head>
-<body style="margin:0;">
-    <div id="container" style="width: 100%; height: 100vh;"></div>
-    <script>{html_str}</script>
-</body>
-</html>"""
-    f.write(interactive_html)
+Path(temp_path).unlink()