feat(bokeh): implement facet-grid (#6516)

## Implementation: `facet-grid` - python/bokeh

Implements the **python/bokeh** version of `facet-grid`.

**File:** `plots/facet-grid/implementations/python/bokeh.py`

**Parent Issue:** #2696

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

---------

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/facet-grid/implementations/python/bokeh.py

@@ -1,16 +1,36 @@
-""" pyplots.ai
+""" anyplot.ai
 facet-grid: Faceted Grid Plot
-Library: bokeh 3.8.1 | Python 3.13.11
-Quality: 90/100 | Created: 2025-12-30
+Library: bokeh 3.9.0 | Python 3.13.13
+Quality: 87/100 | Updated: 2026-05-13
 """
 
+import os
+import time
+from pathlib import Path
+
 import numpy as np
 import pandas as pd
-from bokeh.io import export_png
+from bokeh.io import output_file, save
 from bokeh.layouts import column, gridplot
-from bokeh.models import ColumnDataSource, Div
+from bokeh.models import ColumnDataSource, Div, HoverTool
 from bokeh.plotting import figure
+from selenium import webdriver
+from selenium.webdriver.chrome.options import Options
+
+
+# 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"
 
+# Okabe-Ito palette
+OKABE_ITO = [
+    "#009E73",  # bluish green (brand)
+    "#D55E00",  # vermillion
+    "#0072B2",  # blue
+]
 
 # Data - Product performance across regions and seasons
 np.random.seed(42)
@@ -37,89 +57,121 @@
 
 df = pd.DataFrame(data)
 
-# Colors for each region - darker orange instead of yellow for better visibility
-colors = {"North": "#306998", "South": "#E69F00", "East": "#4ECDC4"}
+# Map regions to colors
+color_map = {"North": OKABE_ITO[0], "South": OKABE_ITO[1], "East": OKABE_ITO[2]}
 
 # Create grid of plots (rows=seasons, cols=regions)
-# Target: 4800x2700 total. With 3 cols, 4 rows + title/legend:
-# - Subplot width: 4800 / 3 = 1600
-# - Subplot height: (2700 - 120 title - 100 legend) / 4 = 620
 plots = []
 
 for season in seasons:
     row_plots = []
     for region in regions:
         subset = df[(df["region"] == region) & (df["season"] == season)]
-        source = ColumnDataSource(data={"x": subset["marketing_spend"], "y": subset["sales"]})
+        source = ColumnDataSource(
+            data={"x": subset["marketing_spend"], "y": subset["sales"], "region": [region] * len(subset)}
+        )
 
         # Create figure for each cell
-        p = figure(width=1600, height=620, x_range=(5, 50), y_range=(20, 130), tools="")
+        p = figure(
+            width=1600, height=620, x_range=(5, 50), y_range=(20, 130), tools="", title="", toolbar_location=None
+        )
 
         # Add scatter points
-        p.scatter(
-            x="x", y="y", source=source, size=18, color=colors[region], alpha=0.7, line_color="#333333", line_width=1
+        scatter = p.scatter(
+            x="x", y="y", source=source, size=18, color=color_map[region], alpha=0.7, line_color=PAGE_BG, line_width=1
         )
 
+        # Add hover tooltip
+        hover = HoverTool(
+            renderers=[scatter], tooltips=[("Region", "@region"), ("Spend", "@x{0.0}"), ("Sales", "@y{0.0}")]
+        )
+        p.add_tools(hover)
+
         # Add facet label in top-left corner
         p.text(
-            x=[8],
-            y=[122],
-            text=[f"{region} · {season}"],
-            text_font_size="18pt",
-            text_color="#333333",
-            text_font_style="bold",
+            x=[8], y=[122], text=[f"{region} · {season}"], text_font_size="18pt", text_color=INK, text_font_style="bold"
         )
 
-        # Style axes
+        # Style axes - only show labels on edges
         p.xaxis.axis_label = "Marketing Spend ($K)" if season == seasons[-1] else ""
         p.yaxis.axis_label = "Sales ($K)" if region == regions[0] else ""
-        p.xaxis.axis_label_text_font_size = "20pt"
-        p.yaxis.axis_label_text_font_size = "20pt"
-        p.xaxis.major_label_text_font_size = "16pt"
-        p.yaxis.major_label_text_font_size = "16pt"
+        p.xaxis.axis_label_text_font_size = "22pt"
+        p.yaxis.axis_label_text_font_size = "22pt"
+        p.xaxis.major_label_text_font_size = "18pt"
+        p.yaxis.major_label_text_font_size = "18pt"
+
+        # Theme-adaptive styling
+        p.background_fill_color = PAGE_BG
+        p.border_fill_color = PAGE_BG
+        p.outline_line_color = INK_SOFT
+        p.title.text_color = INK
+        p.xaxis.axis_label_text_color = INK
+        p.yaxis.axis_label_text_color = INK
+        p.xaxis.major_label_text_color = INK_SOFT
+        p.yaxis.major_label_text_color = INK_SOFT
+        p.xaxis.axis_line_color = INK_SOFT
+        p.yaxis.axis_line_color = INK_SOFT
 
         # Grid styling
-        p.xgrid.grid_line_alpha = 0.3
-        p.ygrid.grid_line_alpha = 0.3
-        p.xgrid.grid_line_dash = "dashed"
-        p.ygrid.grid_line_dash = "dashed"
-
-        # Background
-        p.background_fill_color = "#fafafa"
+        p.xgrid.grid_line_color = INK
+        p.ygrid.grid_line_color = INK
+        p.xgrid.grid_line_alpha = 0.15
+        p.ygrid.grid_line_alpha = 0.15
 
         row_plots.append(p)
     plots.append(row_plots)
 
 # Create gridplot layout
 grid = gridplot(plots, toolbar_location=None, merge_tools=False)
 
-# Add overall title using Div for cleaner implementation
+# Add overall title using Div
 title_div = Div(
-    text="<h1 style='text-align: center; color: #333333; font-size: 32pt; margin: 20px 0;'>"
-    "facet-grid · bokeh · pyplots.ai</h1>",
+    text=f"<h1 style='text-align: center; color: {INK}; font-size: 32pt; margin: 20px 0;'>"
+    f"facet-grid · bokeh · anyplot.ai</h1>",
     width=4800,
     height=120,
 )
 
 # Create legend using Div for region-color mapping
 legend_html = (
-    "<div style='text-align: center; font-size: 18pt; padding: 20px 0;'>"
-    "<span style='font-weight: bold; margin-right: 30px;'>Region:</span>"
+    f"<div style='text-align: center; font-size: 18pt; padding: 20px 0; color: {INK};'>"
+    f"<span style='font-weight: bold; margin-right: 30px;'>Region:</span>"
 )
-for region, color in colors.items():
+for region in regions:
+    color = color_map[region]
     legend_html += (
         f"<span style='margin-right: 40px;'>"
         f"<span style='display: inline-block; width: 20px; height: 20px; "
-        f"background-color: {color}; border: 1px solid #333; border-radius: 50%; "
+        f"background-color: {color}; border: 1px solid {INK_SOFT}; border-radius: 50%; "
         f"vertical-align: middle; margin-right: 8px;'></span>"
-        f"{region}</span>"
+        f"<span style='color: {INK_SOFT};'>{region}</span></span>"
     )
 legend_html += "</div>"
 
-legend_div = Div(text=legend_html, width=4800, height=80)
+legend_div = Div(text=legend_html, width=4800, height=100)
 
 # Combine title, grid, and legend using column layout
 final_layout = column(title_div, grid, legend_div)
 
-# Save
-export_png(final_layout, filename="plot.png")
+# Save HTML
+output_file(f"plot-{THEME}.html")
+save(final_layout)
+
+# Screenshot with headless Chrome
+W, H = 4800, 2700
+opts = Options()
+for arg in (
+    "--headless=new",
+    "--no-sandbox",
+    "--disable-dev-shm-usage",
+    "--disable-gpu",
+    f"--window-size={W},{H}",
+    "--hide-scrollbars",
+):
+    opts.add_argument(arg)
+driver = webdriver.Chrome(options=opts)
+driver.set_window_size(W, H)
+driver.get(f"file://{Path(f'plot-{THEME}.html').resolve()}")
+time.sleep(3)
+driver.save_screenshot(f"plot-{THEME}.png")
+driver.quit()