feat(highcharts): implement sudoku-basic (#5353)

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

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

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

**Parent Issue:** #1311

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

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: github-actions[bot]

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

@@ -1,9 +1,10 @@
-""" pyplots.ai
+""" anyplot.ai
 sudoku-basic: Basic Sudoku Grid
-Library: highcharts unknown | Python 3.13.11
-Quality: 91/100 | Created: 2025-12-23
+Library: highcharts unknown | Python 3.14.4
+Quality: 89/100 | Updated: 2026-04-24
 """
 
+import os
 import tempfile
 import time
 import urllib.request
@@ -12,12 +13,17 @@
 from highcharts_core.chart import Chart
 from highcharts_core.options import HighchartsOptions
 from highcharts_core.options.series.scatter import ScatterSeries
-from PIL import Image
 from selenium import webdriver
 from selenium.webdriver.chrome.options import Options
 
 
-# Example Sudoku puzzle with starting numbers (0 = empty)
+# Theme tokens
+THEME = os.getenv("ANYPLOT_THEME", "light")
+PAGE_BG = "#FAF8F1" if THEME == "light" else "#1A1A17"
+INK = "#1A1A17" if THEME == "light" else "#F0EFE8"
+INK_SOFT = "#4A4A44" if THEME == "light" else "#B8B7B0"
+
+# Data: partially filled Sudoku puzzle (0 = empty cell)
 grid = [
     [5, 3, 0, 0, 7, 0, 0, 0, 0],
     [6, 0, 0, 1, 9, 5, 0, 0, 0],
@@ -30,50 +36,73 @@
     [0, 0, 0, 0, 8, 0, 0, 7, 9],
 ]
 
-# Create chart
+# Build grid lines as native highcharts plotLines:
+# thin lines for cell boundaries, thick lines for 3x3 box boundaries
+thin_positions = [1, 2, 4, 5, 7, 8]
+thick_positions = [0, 3, 6, 9]
+
+axis_plot_lines = [{"value": v, "width": 2, "color": INK_SOFT, "zIndex": 3} for v in thin_positions] + [
+    {"value": v, "width": 8, "color": INK, "zIndex": 5} for v in thick_positions
+]
+
+# Chart
 chart = Chart(container="container")
 chart.options = HighchartsOptions()
 
 chart.options.chart = {
     "width": 3600,
     "height": 3600,
-    "backgroundColor": "#ffffff",
+    "backgroundColor": PAGE_BG,
+    "plotBackgroundColor": PAGE_BG,
     "plotBorderWidth": 0,
-    "margin": [120, 100, 100, 100],
+    "margin": [180, 120, 60, 120],
+    "style": {"fontFamily": "Arial, sans-serif"},
 }
 
 chart.options.title = {
-    "text": "sudoku-basic · highcharts · pyplots.ai",
-    "style": {"fontSize": "56px", "fontWeight": "bold", "fontFamily": "Arial, sans-serif"},
-    "y": 60,
+    "text": "sudoku-basic · highcharts · anyplot.ai",
+    "style": {"fontSize": "56px", "fontWeight": "bold", "color": INK, "fontFamily": "Arial, sans-serif"},
+    "margin": 60,
 }
 
-# Disable legend
 chart.options.legend = {"enabled": False}
+chart.options.credits = {"enabled": False}
+chart.options.tooltip = {"enabled": False}
 
-# Configure axes for 9x9 grid
-chart.options.x_axis = {
-    "min": 0,
-    "max": 9,
-    "tickInterval": 1,
-    "gridLineWidth": 0,
-    "lineWidth": 0,
-    "labels": {"enabled": False},
-    "title": {"text": None},
-}
+chart.options.x_axis = [
+    {
+        "min": 0,
+        "max": 9,
+        "tickInterval": 1,
+        "gridLineWidth": 0,
+        "lineWidth": 0,
+        "tickLength": 0,
+        "labels": {"enabled": False},
+        "title": {"text": ""},
+        "plotLines": axis_plot_lines,
+        "startOnTick": True,
+        "endOnTick": True,
+    }
+]
 
-chart.options.y_axis = {
-    "min": 0,
-    "max": 9,
-    "tickInterval": 1,
-    "gridLineWidth": 0,
-    "lineWidth": 0,
-    "labels": {"enabled": False},
-    "title": {"text": None},
-    "reversed": True,
-}
+chart.options.y_axis = [
+    {
+        "min": 0,
+        "max": 9,
+        "tickInterval": 1,
+        "gridLineWidth": 0,
+        "lineWidth": 0,
+        "tickLength": 0,
+        "labels": {"enabled": False},
+        "title": {"text": ""},
+        "plotLines": axis_plot_lines,
+        "reversed": True,
+        "startOnTick": True,
+        "endOnTick": True,
+    }
+]
 
-# Prepare data points for numbers
+# Numbers rendered as invisible scatter points with data labels centered per cell
 data_points = []
 for row in range(9):
     for col in range(9):
@@ -83,78 +112,53 @@
                 {
                     "x": col + 0.5,
                     "y": row + 0.5,
-                    "name": str(value),
-                    "marker": {"radius": 0},
                     "dataLabels": {
                         "enabled": True,
                         "format": str(value),
+                        "align": "center",
+                        "verticalAlign": "middle",
                         "style": {
-                            "fontSize": "72px",
+                            "fontSize": "96px",
                             "fontWeight": "bold",
                             "fontFamily": "Arial, sans-serif",
                             "textOutline": "none",
+                            "color": INK,
                         },
-                        "color": "#000000",
                     },
                 }
             )
 
-# Create scatter series for numbers
 series = ScatterSeries()
 series.data = data_points
 series.name = "Numbers"
+series.marker = {"enabled": False}
 series.enable_mouse_tracking = False
 chart.add_series(series)
 
-# Disable tooltip
-chart.options.tooltip = {"enabled": False}
-
-# Export to PNG via Selenium
-highcharts_url = "https://code.highcharts.com/highcharts.js"
+# Download Highcharts JS (embed inline for headless Chrome)
+highcharts_url = "https://cdnjs.cloudflare.com/ajax/libs/highcharts/11.4.8/highcharts.js"
 with urllib.request.urlopen(highcharts_url, timeout=30) as response:
     highcharts_js = response.read().decode("utf-8")
 
-# Generate HTML with grid lines drawn via CSS/HTML
 html_str = chart.to_js_literal()
 
-# Build grid lines HTML - thin lines for cells, thick lines for 3x3 boxes
-cell_size = 378  # (3600 - 200) / 9 ~ 378px per cell (accounting for margins)
-offset_x = 100  # Left margin
-offset_y = 120  # Top margin
-
-grid_lines_html = ""
-
-# Thin lines for all cells (light gray)
-for i in range(10):
-    # Vertical lines
-    x = offset_x + i * cell_size
-    grid_lines_html += f'<div style="position:absolute; left:{x}px; top:{offset_y}px; width:2px; height:{cell_size * 9}px; background:#999999;"></div>'
-    # Horizontal lines
-    y = offset_y + i * cell_size
-    grid_lines_html += f'<div style="position:absolute; left:{offset_x}px; top:{y}px; width:{cell_size * 9}px; height:2px; background:#999999;"></div>'
-
-# Thick lines for 3x3 boxes (black)
-for i in range(4):
-    # Vertical lines
-    x = offset_x + i * 3 * cell_size
-    grid_lines_html += f'<div style="position:absolute; left:{x - 2}px; top:{offset_y}px; width:6px; height:{cell_size * 9}px; background:#000000;"></div>'
-    # Horizontal lines
-    y = offset_y + i * 3 * cell_size
-    grid_lines_html += f'<div style="position:absolute; left:{offset_x}px; top:{y - 2}px; width:{cell_size * 9}px; height:6px; background:#000000;"></div>'
-
 html_content = f"""<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <script>{highcharts_js}</script>
 </head>
-<body style="margin:0; background:#ffffff;">
-    <div id="container" style="width: 3600px; height: 3600px; position: relative;"></div>
-    {grid_lines_html}
+<body style="margin:0; padding:0; background:{PAGE_BG}; overflow:hidden;">
+    <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)
+
+# Screenshot via headless Chrome
 with tempfile.NamedTemporaryFile(mode="w", suffix=".html", delete=False, encoding="utf-8") as f:
     f.write(html_content)
     temp_path = f.name
@@ -164,37 +168,17 @@
 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=3700,3700")
+chrome_options.add_argument("--hide-scrollbars")
+chrome_options.add_argument("--window-size=3600,3600")
 
 driver = webdriver.Chrome(options=chrome_options)
+# Force exact viewport dimensions (headless outer vs inner can differ)
+driver.execute_cdp_cmd(
+    "Emulation.setDeviceMetricsOverride", {"width": 3600, "height": 3600, "deviceScaleFactor": 1, "mobile": False}
+)
 driver.get(f"file://{temp_path}")
 time.sleep(5)
-
-# Take screenshot and crop to exact 3600x3600
-driver.save_screenshot("plot_temp.png")
+driver.save_screenshot(f"plot-{THEME}.png")
 driver.quit()
 
-# Crop to exact dimensions using PIL
-img = Image.open("plot_temp.png")
-img_cropped = img.crop((0, 0, 3600, 3600))
-img_cropped.save("plot.png")
-Path("plot_temp.png").unlink()
-
-# Also save HTML for interactive version
-with open("plot.html", "w", encoding="utf-8") as f:
-    # For the HTML version, use CDN links (works in browser)
-    html_interactive = f"""<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <script src="https://code.highcharts.com/highcharts.js"></script>
-</head>
-<body style="margin:0; background:#ffffff;">
-    <div id="container" style="width: 3600px; height: 3600px; position: relative;"></div>
-    {grid_lines_html}
-    <script>{html_str}</script>
-</body>
-</html>"""
-    f.write(html_interactive)
-
 Path(temp_path).unlink()