vega / vl-convert

Utilities for converting Vega-Lite specs from the command line and Python
BSD 3-Clause "New" or "Revised" License
100 stars 12 forks source link

bundled HTML with canvas renderer fails #130

Closed jonmmease closed 11 months ago

jonmmease commented 11 months ago

Hitting an issue when using javascript_bundle to embed a chart in an HTML document with the canvas renderer (SVG renderer works fine).

Repro

import vl_convert as vlc
import json
print(vlc.__version__)

bundle = vlc.javascript_bundle()

import altair as alt
from vega_datasets import data

source = data.movies.url

chart = alt.Chart(source).mark_bar().encode(
    alt.X("IMDB_Rating:Q", bin=True),
    y='count()',
)
spec = chart.to_json(indent=None)
embed_options = json.dumps({"renderer": "canvas"})

output_div = "vis"

html = f"""
<!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-embed.js bundle
    { bundle }
  </script>
</head>
<body>
<div class="vega-visualization" id="{ output_div }"></div>
<script type="text/javascript">
  const spec = { spec };
  const embedOpt = { embed_options };
  vegaEmbed('#{ output_div }', spec, embedOpt).catch(console.error);
</script>
</body>
</html>
"""

with open("output/chart_bundled.html", "wt") as f:
    f.write(html)

Open chart in chrome. The chart doesn't render and this error is in the console

Uncaught TypeError: handler.canvas is not a function
    at addEventListener (chart_bundled.html)
    at hook.js:1:26915
    at 17934 (hook.js:1:28499)
    at i (hook.js:1:220065)
    at hook.js:1:221032
    at hook.js:1:221042
jonmmease commented 11 months ago

Fixed in 1.0.1