vue-pivottable-scroll-live

by seungwoo321

HTML

<script src="https://unpkg.com/vue@2.6.14"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-pivottable@0.4.61/dist/vue-pivottable.css">
<script src="https://unpkg.com/@vue-pivottable/scroll-renderer@1.0.0/dist/scroll-renderer.umd.js"></script>
<script src="https://unpkg.com/vue-pivottable@0.4.64/dist/vue-pivottable.umd.js"></script>
<script src="https://gist.githubusercontent.com/Seungwoo321/975fcf3430141e2562dc4a708f1d5841/raw/5feadda23c9d082204b4aacfe92b7a038dc675e4/sampleData.js"></script>

<div id="app">
  <vue-pivottable-ui
    :data="pivotData"
    :aggregator-name="aggregatorName"
    :renderers="renderers"
    :renderer-name="rendererName"
    :rows="rows"
    :cols="cols"
    :vals="vals"
    :row-limit="200"
    :col-limit="200"
    :row-total="true"
    :col-total="true"
  >
  </vue-pivottable-ui>
</div>

JavaScript

Vue.use(VuePivottable.default)
let pivotData = null
function callback (data)  {
	console.log(data)
	pivotData = data;
}
new Vue({
  el: "#app",
  data: {
      pivotData: pivotData,
      aggregatorName: 'Sum',
      rows: ['date'],
      cols: ['symbol'],
      vals: ['Volume BTC'],
      rendererName: 'Table'
  },
  computed: {
    renderers () {
      return (() => ({
      Table : ScrollRenderer.Table,
      'Table Heatmap': ScrollRenderer['Table Heatmap'],
      'Table Col Heatmap': ScrollRenderer['Table Col Heatmap'],
      'Table Row Heatmap': ScrollRenderer['Table Row Heatmap']
    }))()
    }
  }
})