feat: support automatic resizing of altair/vega-lite figures

Changing the renderer to svg as suggested in vega/react-vega#85 (comment).
widgetti · Oct 28, 2024 · 4426438 · 4426438
1 parent 4a68b50
commit 4426438
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/solara/website/pages/documentation/examples/libraries/altair.py b/solara/website/pages/documentation/examples/libraries/altair.py
@@ -38,6 +38,7 @@ def on_click(datum):
         )
         .configure_view(step=13, strokeWidth=0)
         .configure_axis(domain=False)
+        .properties(width="container")
     )
     with solara.Card("Annual Weather Heatmap for Seattle, WA"):
         solara.AltairChart(chart, on_click=on_click)

diff --git a/solara/widgets/vue/vegalite.vue b/solara/widgets/vue/vegalite.vue
@@ -15,6 +15,11 @@ module.exports = {
     mounted() {
         this.do_plot_debounced();
     },
+    destroyed() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    },
     watch: {
         spec() {
             this.do_plot_debounced();
@@ -29,7 +34,15 @@ module.exports = {
                 (async () => {
                     const spec = {
                         ...this.spec,
+                        "renderer": "svg",
                     };
+                    if (spec.width === "container") {
+                        this.$refs.plotElement.classList.add("width-container")
+                        this.observer = new ResizeObserver(() => {
+                            view.resize();
+                        });
+                        this.observer.observe(this.$refs.plotElement);
+                    }
                     const { view } = await vegaEmbed(this.$refs.plotElement, spec);
                     // events https://github.com/vega/vega-view#event-handling
                     if (this.listen_to_click) {
@@ -110,3 +123,8 @@ module.exports = {
     },
 }
 </script>
+<style id="vega-embed-container-width">
+.width-container.vega-embed {
+    width: 100%;
+}
+</style>