feat(highcharts): implement rug-basic (#5591)

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

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

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

**Parent Issue:** #978

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

---------

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/rug-basic/implementations/python/highcharts.py

@@ -1,9 +1,10 @@
-""" pyplots.ai
+""" anyplot.ai
 rug-basic: Basic Rug Plot
-Library: highcharts unknown | Python 3.13.11
-Quality: 92/100 | Created: 2025-12-23
+Library: highcharts unknown | Python 3.13.13
+Quality: 89/100 | Updated: 2026-04-30
 """
 
+import os
 import tempfile
 import time
 import urllib.request
@@ -17,99 +18,89 @@
 from selenium.webdriver.chrome.options import Options
 
 
-# Data - response times (ms) with realistic clustering and gaps
+# 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"
+TICK_COLOR = "rgba(0, 158, 115, 0.7)"  # #009E73 (Okabe-Ito pos 1) with alpha
+
+# Data
 np.random.seed(42)
 values = np.concatenate(
     [
         np.random.normal(50, 8, 40),  # Fast responses cluster
         np.random.normal(120, 15, 35),  # Medium responses cluster
         np.random.normal(250, 20, 15),  # Slow responses cluster
-        np.array([380, 420, 510]),  # Outliers (occasional slow requests)
+        np.array([380, 420, 510]),  # Outliers
     ]
 )
 values = np.clip(values, 10, 600)
 
-# Create chart
+# Chart
 chart = Chart(container="container")
 chart.options = HighchartsOptions()
 
-# Chart configuration - optimize margins for tight layout
 chart.options.chart = {
     "width": 4800,
     "height": 2700,
-    "backgroundColor": "#ffffff",
+    "backgroundColor": PAGE_BG,
     "marginBottom": 200,
-    "marginTop": 250,  # More top margin to balance with title/subtitle
+    "marginTop": 250,
     "marginLeft": 150,
     "marginRight": 150,
 }
 
-# Title
 chart.options.title = {
-    "text": "rug-basic · highcharts · pyplots.ai",
-    "style": {"fontSize": "72px", "fontWeight": "bold"},
+    "text": "rug-basic · highcharts · anyplot.ai",
+    "style": {"fontSize": "72px", "fontWeight": "bold", "color": INK},
 }
 
-# Subtitle
-chart.options.subtitle = {"text": "API Response Times (ms)", "style": {"fontSize": "48px"}}
+chart.options.subtitle = {"text": "API Response Times (ms)", "style": {"fontSize": "48px", "color": INK_SOFT}}
 
-# X-axis - continuous scale for response times
-# Removed grid lines per feedback - reduces visual clutter for rug plot
 chart.options.x_axis = {
-    "title": {"text": "Response Time (ms)", "style": {"fontSize": "48px"}},
-    "labels": {"style": {"fontSize": "36px"}},
-    "gridLineWidth": 0,  # No grid lines - cleaner look for rug plot
+    "title": {"text": "Response Time (ms)", "style": {"fontSize": "48px", "color": INK}},
+    "labels": {"style": {"fontSize": "36px", "color": INK_SOFT}},
+    "gridLineWidth": 0,
     "min": 0,
     "max": 600,
     "tickInterval": 50,
     "lineWidth": 3,
-    "lineColor": "#333333",
+    "lineColor": INK_SOFT,
+    "tickColor": INK_SOFT,
 }
 
-# Y-axis - tight range to minimize whitespace (key fix!)
-# Max set to 1.2 to leave minimal space above tick marks
 chart.options.y_axis = {
     "title": {"text": None},
     "labels": {"enabled": False},
     "gridLineWidth": 0,
     "min": 0,
-    "max": 1.2,  # Tight! Rug marks go to y=1, minimal whitespace above
+    "max": 1.2,
     "visible": False,
-    "plotLines": [{"value": 0, "width": 3, "color": "#333333", "zIndex": 2}],  # Baseline
+    "plotLines": [{"value": 0, "width": 3, "color": INK_SOFT, "zIndex": 2}],
 }
 
-# Legend and credits
 chart.options.legend = {"enabled": False}
 chart.options.credits = {"enabled": False}
-
-# Tooltip disabled for cleaner look
 chart.options.tooltip = {"enabled": False}
 
-# Add rug ticks as a single LineSeries with multiple line segments
-# Use LineSeries with data containing multiple segments encoded as breaks
-# Highcharts approach: Each rug tick is a very short vertical line
-# We use one LineSeries per tick, but this is unavoidable in Highcharts
-# without columnrange/dumbbell extensions
-
-# Create all rug ticks - vertical lines from y=0 to y=1
+# Rug ticks: short vertical marks at axis edge (0 to 0.15 = 12.5% of y-range)
 for v in sorted(values):
     tick_series = LineSeries()
-    # Vertical line from baseline to tick height (fills most of vertical space now)
-    tick_series.data = [[float(v), 0], [float(v), 1]]
-    tick_series.color = "rgba(48, 105, 152, 0.6)"  # Python Blue with transparency
-    tick_series.line_width = 5  # Visible but thin ticks
+    tick_series.data = [[float(v), 0], [float(v), 0.15]]
+    tick_series.color = TICK_COLOR
+    tick_series.line_width = 7
     tick_series.marker = {"enabled": False}
     tick_series.enable_mouse_tracking = False
     tick_series.states = {"hover": {"enabled": False}}
     tick_series.show_in_legend = False
     chart.add_series(tick_series)
 
-# Download Highcharts JS (required for headless Chrome)
-highcharts_url = "https://code.highcharts.com/highcharts.js"
+# Download Highcharts JS (required for headless Chrome — CDN blocked on file://)
+highcharts_url = "https://cdn.jsdelivr.net/npm/highcharts@latest/highcharts.js"
 with urllib.request.urlopen(highcharts_url, timeout=30) as response:
     highcharts_js = response.read().decode("utf-8")
 
-# Generate HTML with inline scripts
 html_str = chart.to_js_literal()
 html_content = f"""<!DOCTYPE html>
 <html>
@@ -118,7 +109,7 @@
     <script>{highcharts_js}</script>
     <style>
         * {{ margin: 0; padding: 0; box-sizing: border-box; }}
-        html, body {{ width: 4800px; height: 2700px; overflow: hidden; }}
+        html, body {{ width: 4800px; height: 2700px; overflow: hidden; background: {PAGE_BG}; }}
         #container {{ width: 4800px; height: 2700px; }}
     </style>
 </head>
@@ -128,7 +119,11 @@
 </body>
 </html>"""
 
-# Write temp HTML and take screenshot
+# 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
@@ -144,29 +139,8 @@
 driver.get(f"file://{temp_path}")
 time.sleep(5)
 
-# Take screenshot of the 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()
-
-# 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>
-    <style>
-        * {{ margin: 0; padding: 0; box-sizing: border-box; }}
-        html, body {{ width: 100%; height: 100vh; overflow: hidden; }}
-        #container {{ width: 100%; height: 100%; }}
-    </style>
-</head>
-<body>
-    <div id="container"></div>
-    <script>{html_str}</script>
-</body>
-</html>"""
-    f.write(interactive_html)