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

…2867) * 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 <binder_stefan@outlook.com> --------- Co-authored-by: Mattijn van Hoek <mattijn@gmail.com> Co-authored-by: Stefan Binder <binder_stefan@outlook.com>
vega · Apr 26, 2023 · ba4a7d3 · ba4a7d3
1 parent c273c0a
commit ba4a7d3
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
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
 ~~~~~~~~~~~~~~~