Add avenger-html Altair renderer

jonmmease · Apr 30, 2024 · 351656d · 351656d
1 parent 3e14e03
commit 351656d
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 58 deletions.
diff --git a/avenger-python/avenger/altair_utils.py b/avenger-python/avenger/altair_utils.py
@@ -1,5 +1,5 @@
 from ._avenger import SceneGraph
-
+import copy
 
 def avenger_png_renderer(spec: dict, **kwargs) -> dict:
     """
@@ -29,6 +29,71 @@ def avenger_png_renderer(spec: dict, **kwargs) -> dict:
     return {"image/png": sg.to_png(scale=kwargs.get("scale", None))}
 
 
+def avenger_html_renderer(spec: dict, **kwargs) -> dict:
+    """
+    Altair renderer plugin that uses Avenger to render interactive charts
+
+    This function is registered as avenger-html in the altair.vegalite.v5.renderer
+    entry point group. It may be enabled in Altair using:
+
+        >>> import altair as alt
+        >>> alt.renderers.enable('avenger-html')
+
+    See https://altair-viz.github.io/user_guide/custom_renderers.html
+    for more information
+    """
+    from altair.utils.mimebundle import spec_to_mimebundle
+    from altair import VEGA_VERSION, VEGALITE_VERSION, VEGAEMBED_VERSION
+    import jinja2
+
+    template = jinja2.Template(
+        """\
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    #{{ output_div }}.vega-embed {
+      width: 100%;
+      display: flex;
+    }
+
+    #{{ output_div }}.vega-embed details,
+    #{{ output_div }}.vega-embed details summary {
+      position: relative;
+    }
+  </style>
+</head>
+<body>
+<div class="vega-visualization" id="{{ output_div }}"></div>
+<script type="module">
+    import vegaEmbed, { vega } from "https://esm.sh/vega-embed@6?deps=vega@5&[email protected]";
+    import { registerVegaRenderer } from "https://esm.sh/[email protected]";
+    registerVegaRenderer(vega.renderModule);
+    
+    const spec = {{ spec }};
+    const embedOpt = {{ embed_options }};
+    vegaEmbed('#{{ output_div }}', spec, embedOpt).catch(console.error);
+</script>
+</body>
+</html>
+"""
+    )
+
+    embed_options = copy.deepcopy(kwargs.get("embed_options", {}))
+    embed_options["renderer"] = "avenger"
+    bundle = spec_to_mimebundle(
+        spec,
+        format="html",
+        mode="vega-lite",
+        template=template,
+        embed_options=embed_options,
+        vega_version=VEGA_VERSION,
+        vegaembed_version=VEGAEMBED_VERSION,
+        vegalite_version=VEGALITE_VERSION,
+    )
+    return bundle
+
+
 def chart_to_png(chart, scale=1) -> bytes:
     """
     Convert an altair chart to a png image bytes

diff --git a/avenger-python/pyproject.toml b/avenger-python/pyproject.toml
@@ -16,3 +16,4 @@ module-name = "avenger._avenger"
 
 [project.entry-points."altair.vegalite.v5.renderer"]
 avenger-png = "avenger.altair_utils:avenger_png_renderer"
+avenger-html = "avenger.altair_utils:avenger_html_renderer"
diff --git a/pixi.lock b/pixi.lock
diff --git a/pixi.toml b/pixi.toml
@@ -64,8 +64,8 @@ pip = ">=23.3.2,<23.4"
 vl-convert-python = ">=1.2.2,<1.3"
 altair = ">=5.2.0,<5.3"
 vega_datasets = ">=0.9.0,<0.10"
-vegafusion = ">=1.6.1,<1.7"
-vegafusion-python-embed = ">=1.6.1,<1.7"
+vegafusion = "1.6.7.*"
+vegafusion-python-embed = "1.6.7.*"
 click = ">=8.1.7,<8.2"
 toml = ">=0.10.2,<0.11"
 nodejs = "20.*"
Original file line number	Diff line number	Diff line change
Expand Up		@@ -16,3 +16,4 @@ module-name = "avenger._avenger"

		[project.entry-points."altair.vegalite.v5.renderer"]
		avenger-png = "avenger.altair_utils:avenger_png_renderer"
		avenger-html = "avenger.altair_utils:avenger_html_renderer"