Render Vega and Vega-Lite source in a Vue.js app

I'm poking to the following feature for a while.

Let the user render Vega/VegaLite charts in PRESENTA

And here the first POC!

Thanks to the Vega resources, it's something reeeeeally straightforward to implement, almost a joke.

Now, some details of a bare-bone example.

In a blank Vue project, install the following dependencies with the command: npm install vega vega-lite vega-embed.

Here a basic template for our purpose:

<template>
  <div id="app">
    <div id="viz"></div>
    <div class="edit">
      <textarea v-model="def"></textarea>
    </div>
  </div>
</template>

Where #viz is the wrapper where to inject the Vega chart using Vega-Embed:

import embed from 'vega-embed'

export default {
  async mounted(){
    await embed('#viz', def, {actions:false})
  }
}

Where def is the json definition of a Vega/Vega-Lite chart.

Now add some glue to call the embed whenever the source changes, such as:

import embed from 'vega-embed'

export default {
  data(){
    return{
      def: null
    }
  },
  watch:{
    def(v){
      if(v) this.draw()
    }
  },
  methods:{
    async draw(){
      let def = JSON.parse(this.def)
      await embed('#viz', def, {actions:false})
    }
  }
}

And here the way to override the size of the chart to make it full-resizable:

async draw(){
  let def = JSON.parse(this.def)

  def.width = 'container'
  def.height = 'container'

  await embed('#viz', def, {actions:false})
}

Issues

When copy/paste a Vega source that contains the data url (the dataset is external) and that url is relative, the chart breaks because it can't find the file.

This is very common if you copy/paste an example from the official website. Almost all the examples use a relative URL for the dataset definition, such as:

"data": { "url": "data/population.json"}

In order to make it work again, you need to change it with the full absolute URL:

"data": { "url": "https://vega.github.io/vega-lite/data/population.json"}

Here the full source code.

Next

If you want to be notified when PRESENTA will incorporate this function, get an account from there!