Vue-Crosstab

Example fiddle for issue reproduction usage

by amalieiev

HTML

<script src="https://unpkg.com/vue-crosstab"></script>
<div id="app">
  <crosstab
  :data-url="dataUrl"
  :transform="transform"
  :rows="rows"
  :cols="cols">
  </crosstab>
</div>

CSS

html, body {
  font-family: 'Lato', 'Avenir', sans-serif;
  height: 100%;
  margin: 0;
  padding: 0;
}
#app {
  height: 98%;
}

Babel + JSX

new Vue({
	el: '#app',
	components: {
  	Crosstab: window.VueCrosstab.default
	},
	data: {
  	dataUrl: 'https://raw.githubusercontent.com/amalieiev/vue-crosstab/master/docs/data/salary.json',
    transform: [
        {calculate: 'sex', value: record => record.sex === 'm' ? 'Male' : 'Female'},
        //{filter: 'city', isOneOf: ['Kiev', 'Kharkiv', 'Lviv', 'Odessa', 'Zaporozhye']}
      ],
    cols: [
      {field: 'date', type: 'temporal', timeUnit: 'year', label: 'Year'},
      {field: 'city', label: 'City'},
      {field: 'sex', label: 'Sex'},
      {field: 'salary_per_month', label: 'Salary', aggregate: 'avg', formatter: 'currency'}
    ],
    rows: [
      {field: 'programming_language', label: 'Language'},
      {field: 'position', label: 'Position'}
    ]
	},
})