Enhancement of Vega-Embed CSS for Improved Display and Flexibility (#2867)

nlafleur · mattijn · binste · web-flow · commit ba4a7d331eac · 2023-04-26T18:00:02.000+02:00
* Update html.py

* include output_div tag and inline_html_template

* include note in changes.rst

* include style within universal template

* remove trailing whitespace

* update changes.rst

* Update doc/releases/changes.rst

Co-authored-by: Stefan Binder &lt;binder_stefan@outlook.com&gt;

---------

Co-authored-by: Mattijn van Hoek &lt;mattijn@gmail.com&gt;
Co-authored-by: Stefan Binder &lt;binder_stefan@outlook.com&gt;
diff --git a/altair/utils/html.py b/altair/utils/html.py
@@ -10,8 +10,14 @@
 <head>
 {%- endif %}
   <style>
-    .error {
-        color: red;
+    #{{ output_div }}.vega-embed {
+      width: 100%;
+      display: flex;
+    }
+
+    #{{ output_div }}.vega-embed details,
+    #{{ output_div }}.vega-embed details summary {
+      position: relative;
     }
   </style>
 {%- if not requirejs %}
@@ -60,7 +66,7 @@
       var embedOpt = {{ embed_options }};
 
       function showError(el, error){
-          el.innerHTML = ('<div class="error" style="color:red;">'
+          el.innerHTML = ('<div style="color:red;">'
                           + '<p>JavaScript Error: ' + error.message + '</p>'
                           + "<p>This usually means there's a typo in your chart specification. "
                           + "See the javascript console for the full traceback.</p>"
@@ -83,6 +89,17 @@
 
 HTML_TEMPLATE_UNIVERSAL = jinja2.Template(
     """
+<style>
+  #{{ output_div }}.vega-embed {
+    width: 100%;
+    display: flex;
+  }
+
+  #{{ output_div }}.vega-embed details,
+  #{{ output_div }}.vega-embed details summary {
+    position: relative;
+  }
+</style>
 <div id="{{ output_div }}"></div>
 <script type="text/javascript">
   var VEGA_DEBUG = (typeof VEGA_DEBUG == "undefined") ? {} : VEGA_DEBUG;
@@ -151,6 +168,17 @@
 <!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>
   <script type="text/javascript">
     // vega.js v{{ vega_version }}
     {{ vega_script }}
diff --git a/doc/releases/changes.rst b/doc/releases/changes.rst
@@ -24,6 +24,7 @@ Enhancements
 - Substantially improved error handling. Both in terms of finding the more relevant error (#2842), and in terms of improving the formatting and clarity of the error messages (#2824, #2568, #2979, #3009).
 - Include experimental support for the DataFrame Interchange Protocol (through ``__dataframe__`` attribute). This requires ``pyarrow>=11.0.0`` (#2888).
 - Support data type inference for columns with special characters (#2905).
+- Responsive width support using ``width="container"`` when saving charts to html or displaying them with the default  `html` renderer (#2867).
 
 Grammar Changes
 ~~~~~~~~~~~~~~~
