Discussion: How to use vizwit v2

[timwis]

The current JSON config approach has a few issues:

• It's also responsible for the layout
• It can be difficult to edit manually
• All config properties are top-level (as opposed to some options being for the provider, others for the charts). As a result, adding an option to the pie chart expands the top-level API surface area. Maybe this is an issue either way.

I'm trying to think of a way that v2 can make it easy to edit each chart's configuration, and be easy to use wherever -- in a dedicated dashboard page/site, or within your CMS (e.g. WordPress). I've got a few options so far:

Custom elements

Use the new vue custom elements plugin, the old one, or skate.js, or stencil.js.

<viz-wit
  domain="phl.carto.com"
  dataset="incidents_part1_part2"
  group-by="crime_category"></viz-wit>

<vizwit-carto
  domain="phl.carto.com"
  dataset="incidents_part1_part2"
  group-by="crime_category">
  <vizwit-bar></vizwit-bar>
</vizwit-carto>

Vue components anywhere

Instantiate vue on body or top-level div, and use vue components inline. Requires the runtime+compiler version of vue.

<vizwit-carto
  :domain="phl.carto.com"
  :dataset="incidents_part1_part2"
  :group-by="crime_category">
  <vizwit-bar
    slot-scope="{ initialData, filteredData }"
    :initial-data="initialData"
    :filtered-data="filteredData" />
</vizwit-carto>

Vue.component(Carto)
Vue.component(Bar)
new Vue({
  el: 'body', // or top-level div, e.g. #app
})

jQuery style

At page load, search dom for vizwit components and initialise vue on them. Requires the runtime+compiler version of vue.

document.querySelectorAll('viz-wit').forEach((el) => new Vue({ el }))

Use as vue library

Vizwit will be consumed as a set of vue components, installed by npm, rendered into a consumer's SPA.

Serialised as JSON or YAML

Basically the current approach.