feat(highcharts): implement raincloud-basic (#1956)

## Implementation: `raincloud-basic` - highcharts

Implements the **highcharts** version of `raincloud-basic`.

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

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

---------

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

@@ -1,16 +1,20 @@
 """ pyplots.ai
 raincloud-basic: Basic Raincloud Plot
 Library: highcharts unknown | Python 3.13.11
-Quality: 78/100 | Created: 2025-12-25
+Quality: 91/100 | Created: 2025-12-25
 """
 
-import json
 import tempfile
 import time
 import urllib.request
 from pathlib import Path
 
 import numpy as np
+from highcharts_core.chart import Chart
+from highcharts_core.options import HighchartsOptions
+from highcharts_core.options.series.boxplot import BoxPlotSeries
+from highcharts_core.options.series.polygon import PolygonSeries
+from highcharts_core.options.series.scatter import ScatterSeries
 from selenium import webdriver
 from selenium.webdriver.chrome.options import Options
 
@@ -19,8 +23,6 @@
 np.random.seed(42)
 categories = ["Control", "Treatment A", "Treatment B", "Treatment C"]
 colors = ["#306998", "#FFD43B", "#9467BD", "#17BECF"]
-# Fill colors for box plots with good visibility (increased opacity)
-box_fill_colors = ["rgba(48,105,152,0.7)", "rgba(255,212,59,0.7)", "rgba(148,103,189,0.7)", "rgba(23,190,207,0.7)"]
 
 # Generate realistic reaction time data with different distributions
 control = np.random.normal(450, 60, 80)  # Normal distribution
@@ -54,32 +56,89 @@
         }
     )
 
-# Create jittered scatter data (the "rain" - falls LEFT of the cloud for vertical orientation)
-scatter_data = []
-for i, data in enumerate(all_data):
-    for val in data:
-        jitter = np.random.uniform(-0.08, 0.08)
-        # Rain on LEFT side (negative offset from category center)
-        scatter_data.append({"x": i - 0.25 + jitter, "y": float(val), "color": colors[i]})
+# Create chart using highcharts_core
+chart = Chart(container="container")
+chart.options = HighchartsOptions()
 
-# Box plot series data with semi-transparent fill and dark borders
-box_series_data = []
-for i, box in enumerate(box_data):
-    box_series_data.append(
-        {
-            "low": box["low"],
-            "q1": box["q1"],
-            "median": box["median"],
-            "q3": box["q3"],
-            "high": box["high"],
-            "color": "#1a1a1a",  # Dark border for visibility
-            "fillColor": box_fill_colors[i],
-        }
-    )
+# Chart configuration
+chart.options.chart = {
+    "type": "boxplot",
+    "width": 4800,
+    "height": 2700,
+    "backgroundColor": "#ffffff",
+    "marginBottom": 280,
+    "marginLeft": 220,
+    "marginRight": 200,
+    "spacingBottom": 80,
+}
+
+# Title
+chart.options.title = {
+    "text": "raincloud-basic · highcharts · pyplots.ai",
+    "style": {"fontSize": "56px", "fontWeight": "bold"},
+}
+
+# X-axis (categories)
+chart.options.x_axis = {
+    "title": {"text": "Experimental Condition", "style": {"fontSize": "44px"}},
+    "labels": {"style": {"fontSize": "36px"}},
+    "categories": categories,
+    "lineWidth": 2,
+    "tickWidth": 2,
+    "min": -0.5,
+    "max": 3.5,
+    "tickPositions": [0, 1, 2, 3],
+}
+
+# Y-axis (values)
+chart.options.y_axis = {
+    "title": {"text": "Reaction Time (ms)", "style": {"fontSize": "44px"}},
+    "labels": {"style": {"fontSize": "36px"}},
+    "gridLineWidth": 1,
+    "gridLineColor": "rgba(0, 0, 0, 0.15)",
+    "gridLineDashStyle": "Dash",
+    "tickInterval": 50,
+    "min": 250,
+    "max": 650,
+}
+
+# Legend
+chart.options.legend = {
+    "enabled": True,
+    "itemStyle": {"fontSize": "36px"},
+    "align": "right",
+    "verticalAlign": "top",
+    "layout": "vertical",
+    "x": -50,
+    "y": 100,
+    "backgroundColor": "rgba(255, 255, 255, 0.9)",
+    "borderWidth": 1,
+    "borderColor": "#cccccc",
+    "padding": 20,
+    "symbolWidth": 40,
+    "symbolHeight": 24,
+}
+
+# Plot options
+chart.options.plot_options = {
+    "boxplot": {
+        "medianColor": "#000000",
+        "medianWidth": 8,
+        "medianDashStyle": "Solid",
+        "stemColor": "#1a1a1a",
+        "stemWidth": 4,
+        "whiskerColor": "#1a1a1a",
+        "whiskerWidth": 5,
+        "whiskerLength": "50%",
+        "lineWidth": 4,
+        "pointWidth": 70,
+    },
+    "scatter": {"marker": {"radius": 16, "symbol": "circle"}},
+    "polygon": {"fillOpacity": 0.6, "lineWidth": 2},
+}
 
 # Create polygon data for half-violin (the "cloud") - inline KDE
-# Cloud on RIGHT side for vertical orientation (rain falls from cloud, so cloud is RIGHT/TOP)
-violin_polygons = []
+# Cloud on RIGHT side for vertical orientation (rain falls from cloud)
 for i, data in enumerate(all_data):
     # Inline KDE computation (Gaussian kernel)
     data_arr = np.array(data)
@@ -94,152 +153,62 @@
     density = density / (n * bandwidth * np.sqrt(2 * np.pi))
     density = density / density.max() * 0.35
 
-    # Create polygon points for filled half-violin on RIGHT side (close the polygon)
+    # Create polygon points for filled half-violin on RIGHT side
     polygon_points = []
     # Right side: baseline at category, extend RIGHT (positive direction)
     for y, d in zip(y_range, density, strict=True):
         polygon_points.append([float(i + d + 0.05), float(y)])
     # Close polygon by going back along the baseline
     for y in reversed(y_range):
         polygon_points.append([float(i + 0.05), float(y)])
-    # Close the polygon
-    polygon_points.append(polygon_points[0])
-    violin_polygons.append({"points": polygon_points, "color": colors[i]})
 
-# Build chart JavaScript with polygon series for clouds
-polygon_series_js = []
-for idx, poly in enumerate(violin_polygons):
-    show_legend = "true" if idx == 0 else "false"
-    linked = "" if idx == 0 else "linkedTo: ':previous',"
-    polygon_series_js.append(f"""{{
-            name: 'Density Cloud',
-            type: 'polygon',
-            data: {json.dumps(poly["points"])},
-            color: '{poly["color"]}',
-            fillOpacity: 0.6,
-            lineWidth: 2,
-            lineColor: '{poly["color"]}',
-            enableMouseTracking: false,
-            showInLegend: {show_legend},
-            {linked}
-            legendSymbol: 'areaMarker',
-            marker: {{ enabled: false }}
-        }}""")
+    series = PolygonSeries()
+    series.data = polygon_points
+    series.name = f"{categories[i]} (Cloud)"
+    series.color = colors[i]
+    series.fill_color = colors[i]
+    series.fill_opacity = 0.6
+    series.line_width = 2
+    series.line_color = colors[i]
+    series.enable_mouse_tracking = False
+    chart.add_series(series)
 
-chart_js = f"""
-Highcharts.chart('container', {{
-    chart: {{
-        width: 4800,
-        height: 2700,
-        backgroundColor: '#ffffff',
-        marginBottom: 280,
-        marginLeft: 220,
-        marginRight: 200,
-        spacingBottom: 80
-    }},
-    title: {{
-        text: 'raincloud-basic · highcharts · pyplots.ai',
-        style: {{ fontSize: '56px', fontWeight: 'bold' }}
-    }},
-    xAxis: {{
-        categories: {json.dumps(categories)},
-        title: {{
-            text: 'Experimental Condition',
-            style: {{ fontSize: '44px' }}
-        }},
-        labels: {{
-            style: {{ fontSize: '36px' }}
-        }},
-        lineWidth: 2,
-        tickWidth: 2,
-        min: -0.5,
-        max: 3.5,
-        tickPositions: [0, 1, 2, 3]
-    }},
-    yAxis: {{
-        title: {{
-            text: 'Reaction Time (ms)',
-            style: {{ fontSize: '44px' }}
-        }},
-        labels: {{
-            style: {{ fontSize: '36px' }}
-        }},
-        gridLineWidth: 2,
-        gridLineColor: 'rgba(0, 0, 0, 0.35)',
-        gridLineDashStyle: 'Solid',
-        tickInterval: 50,
-        min: 250,
-        max: 650
-    }},
-    legend: {{
-        enabled: true,
-        itemStyle: {{ fontSize: '36px' }},
-        align: 'right',
-        verticalAlign: 'top',
-        layout: 'vertical',
-        x: -50,
-        y: 100,
-        backgroundColor: 'rgba(255, 255, 255, 0.9)',
-        borderWidth: 1,
-        borderColor: '#cccccc',
-        padding: 20
-    }},
-    plotOptions: {{
-        boxplot: {{
-            medianColor: '#000000',
-            medianWidth: 8,
-            medianDashStyle: 'Solid',
-            stemColor: '#1a1a1a',
-            stemWidth: 4,
-            whiskerColor: '#1a1a1a',
-            whiskerWidth: 5,
-            whiskerLength: '50%',
-            lineWidth: 4,
-            pointWidth: 70
-        }},
-        scatter: {{
-            marker: {{
-                radius: 18,
-                symbol: 'circle'
-            }}
-        }},
-        polygon: {{
-            fillOpacity: 0.6,
-            lineWidth: 2
-        }}
-    }},
-    series: [
-        {",".join(polygon_series_js)},
-        {{
-            name: 'Box Plot (Q1-Q3)',
-            type: 'boxplot',
-            data: {json.dumps(box_series_data)},
-            colorByPoint: true,
-            showInLegend: true,
-            legendSymbol: 'rectangle',
-            color: '#1a1a1a',
-            tooltip: {{
-                headerFormat: '<b>{{point.key}}</b><br/>',
-                pointFormat: 'Max: {{point.high:.0f}} ms<br/>Q3: {{point.q3:.0f}} ms<br/>Median: {{point.median:.0f}} ms<br/>Q1: {{point.q1:.0f}} ms<br/>Min: {{point.low:.0f}} ms'
-            }}
-        }},
-        {{
-            name: 'Individual Points',
-            type: 'scatter',
-            data: {json.dumps(scatter_data)},
-            marker: {{
-                radius: 16,
-                lineWidth: 2,
-                lineColor: 'rgba(0,0,0,0.4)'
-            }},
-            opacity: 0.65,
-            tooltip: {{
-                pointFormat: 'Value: {{point.y:.0f}} ms'
-            }}
-        }}
-    ]
-}});
-"""
+# Box plot series - one point per category
+box_series = BoxPlotSeries()
+box_series_data = []
+for i, box in enumerate(box_data):
+    box_series_data.append(
+        {
+            "low": box["low"],
+            "q1": box["q1"],
+            "median": box["median"],
+            "q3": box["q3"],
+            "high": box["high"],
+            "color": "#1a1a1a",
+            "fillColor": f"rgba({int(colors[i][1:3], 16)},{int(colors[i][3:5], 16)},{int(colors[i][5:7], 16)},0.85)",
+        }
+    )
+box_series.data = box_series_data
+box_series.name = "Box Plot"
+box_series.color = "#1a1a1a"
+box_series.color_by_point = True
+chart.add_series(box_series)
+
+# Create jittered scatter data (the "rain") - one series per category for legend
+for i, data in enumerate(all_data):
+    scatter_points = []
+    for val in data:
+        jitter = np.random.uniform(-0.08, 0.08)
+        # Rain on LEFT side (negative offset from category center)
+        scatter_points.append([float(i - 0.25 + jitter), float(val)])
+
+    scatter_series = ScatterSeries()
+    scatter_series.data = scatter_points
+    scatter_series.name = f"{categories[i]} (Points)"
+    scatter_series.color = colors[i]
+    scatter_series.opacity = 0.65
+    scatter_series.marker = {"radius": 16, "lineWidth": 2, "lineColor": "rgba(0,0,0,0.4)", "fillColor": colors[i]}
+    chart.add_series(scatter_series)
 
 # Download Highcharts JS and required modules
 highcharts_url = "https://code.highcharts.com/highcharts.js"
@@ -251,6 +220,7 @@
     highcharts_more_js = response.read().decode("utf-8")
 
 # Generate HTML with inline scripts
+html_str = chart.to_js_literal()
 html_content = f"""<!DOCTYPE html>
 <html>
 <head>
@@ -260,22 +230,30 @@
 </head>
 <body style="margin:0;">
     <div id="container" style="width: 4800px; height: 2700px;"></div>
-    <script>
-    document.addEventListener('DOMContentLoaded', function() {{
-        {chart_js}
-    }});
-    </script>
+    <script>{html_str}</script>
 </body>
 </html>"""
 
-# Write temp HTML and take screenshot
+# Write temp HTML file
 with tempfile.NamedTemporaryFile(mode="w", suffix=".html", delete=False, encoding="utf-8") as f:
     f.write(html_content)
     temp_path = f.name
 
-# Also save the HTML file
+# Save HTML for interactive viewing
 with open("plot.html", "w", encoding="utf-8") as f:
-    f.write(html_content)
+    standalone_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(standalone_html)
 
 # Setup Chrome for screenshot
 chrome_options = Options()