Access the underlying DataTable / DataView

[capttrousers]

I see in the demos that Lodash is used for a lot of the data prep before loading the data into the component, but I am wondering about adding some sort of API layer that can allow access to the underlying google.visualization.DataTable object. The DataTable class provides a number of useful helper methods like .join() , .group() and .getFilteredRows() that can be used with the google.visualization.DataView class to make more ad hoc data sets to create charts.

I am wondering what the best practices for this would be considering the one way data flow for vue.js. I am using vuex so I have a global data store, so maybe having an option of creating a global DataTable to run those methods on to create DataView's and then register those with individual components. What do you think @haydenbbickerton ?

Also, for a number of the chart options, there is a newer Material Design themed chart version, but to access that, the chart needs to be created using google.charts.[ChartType] rather than google.visualization.[ChartType]

[rzb]

About Material Design charts, you can pass 'google.charts.Bar' (or Line or Scatter, so far) as the chart-type:

    <vue-chart
        :packages="['bar']"
        chart-type="google.charts.Bar"
        :columns="columns"
        :rows="rows"
        :options="options"
    ></vue-chart>

This works because vue-charts uses google.visualization.ChartWrapper to load stuff.

The problem then is that in its current beta version google charts material requires the options to be converted using google.charts.[ChartType].convertOptions(options).

One way to do that is to fork this repo and adapt the buildWrapper method.

Another way is to extend the component and override the buildWrapper, like so:

import VueCharts from 'vue-charts'  
Vue.use(VueCharts);

const Base = Vue.options.components["vue-chart"];
const CustomChart = Base.extend({
  methods: {
    buildWrapper (chartType, dataTable, options, containerId) {
      let wrapper = new google.visualization.ChartWrapper({
        chartType: chartType,
        dataTable: dataTable,
        options: google.charts.Bar.convertOptions(options),
        containerId: containerId
      })

      return wrapper
    },
  })
}

Vue.component('MyCustomChart', CustomChart);