Allow users to pass vega_options

README.md

@@ -33,6 +33,18 @@ def generate_chart():
 
 This will return a `Div` that contains your rendered altair chart.
 
+### Custom Vega options
+
+Under the hood, `altair2fasthtml` makes a call to the `vegaEmbed` javascript library. The `vegaEmbed` javascript library accepts [various options](https://github.com/vega/vega-embed?tab=readme-ov-file#options) that alter the rendered chart. You can optionally pass custom Vega options like so:
+
+```python
+# To render your chart as a svg instead of the default canvas element
+altair2fasthtml(chart, vega_options={"renderer":"svg"})
+
+# To render your chart with action links turned on (by default action links are disabled) 
+altair2fasthtml(chart, vega_options={"actions":True})
+```
+
 ## Roadmap
 
 This repository is originally meant to be simple helper, but if there are more advanced use-cases to consider I will gladly consider them. Please start a conversation by opening up an issue before starting a PR though.

fh_altair/__init__.py

@@ -1,22 +1,43 @@
+import json
 from uuid import uuid4
-from fasthtml.common import Div, Script
 
+from fasthtml.common import Div, Script
 
 altair_headers = [
     Script(src="https://cdn.jsdelivr.net/npm/vega@5"),
     Script(src="https://cdn.jsdelivr.net/npm/vega-lite@5"),
-    Script(src="https://cdn.jsdelivr.net/npm/vega-embed@6")
+    Script(src="https://cdn.jsdelivr.net/npm/vega-embed@6"),
 ]
 
 
 def altair2fasthml(chart):
     """This is the version with bad spelling"""
-    print("You have imported `altair2fasthml` which is a misspelled function. Sorry about that! It will be deprecated in favour of `altair2fasthtml` in a later release.")
+    print(
+        "You have imported `altair2fasthml` which is a misspelled function. Sorry about that! It will be deprecated in favour of `altair2fasthtml` in a later release."
+    )
     return altair2fasthtml(chart)
 
 
-def altair2fasthtml(chart):
+def altair2fasthtml(chart, vega_options={"actions": False}):
+    """Convert an Altair chart to a FastHTML FT component
+
+    Parameters
+    ----------
+    chart : altair.Chart
+        An Altair chart
+    vega_options : dict, optional
+        Options dictionary passed to the vegaEmbed function, by default {"actions": False}
+        which hides the Vega action menu.
+
+    Returns
+    -------
+    fastcore.xml.FT
+        A FastHTML FT component containing both the target div and embedding script
+
+    """
     jsonstr = chart.to_json()
-    chart_id = f'uniq-{uuid4()}'
-    settings = "{actions: false}"
-    return Div(Script(f"vegaEmbed('#{chart_id}', {jsonstr}, {settings});"), id=chart_id)
+    chart_id = f"uniq-{uuid4()}"
+    return Div(
+        Script(f"vegaEmbed('#{chart_id}', {jsonstr}, {json.dumps(vega_options)});"),
+        id=chart_id,
+    )

tests/test_basics.py

@@ -1,8 +1,29 @@
-import pandas as pd
 import altair as alt
+import pandas as pd
+import pytest
+from fasthtml.common import to_xml
+
 from fh_altair import altair2fasthtml
 
-def test_no_err():
-    pltr = pd.DataFrame({'y': [1, 2, 3, 2], 'x': [3, 1, 2, 4]})
-    chart = alt.Chart(pltr).mark_line().encode(x='x', y='y').properties(width=400, height=200)
-    return altair2fasthtml(chart)
+
+@pytest.fixture
+def sample_chart():
+    pltr = pd.DataFrame({"y": [1, 2, 3, 2], "x": [3, 1, 2, 4]})
+    chart = (
+        alt.Chart(pltr)
+        .mark_line()
+        .encode(x="x", y="y")
+        .properties(width=400, height=200)
+    )
+    return chart
+
+
+def test_no_err(sample_chart):
+    return altair2fasthtml(sample_chart)
+
+
+def test_vega_options_passed_to_vegaEmbed(sample_chart):
+    vega_embed_call = to_xml(
+        altair2fasthtml(sample_chart, vega_options={"renderer": "svg", "actions": True})
+    )
+    assert '{"renderer": "svg", "actions": true}' in vega_embed_call