<template lang="pug">
  #pivot: SlickGrid(:data="gridData", :columns="columns", :options="options")
</template>

<script>
  import pivotData from '../src/pivot.data'
  import SlickGrid from './Slickgrid.vue'
  import * as d3 from 'd3'
  import _ from 'lodash'

  const columns = [
    {id: 'highArea', name: '대지역', field: '대지역'},
    {id: 'smalArea', name: '소지역', field: '소지역'},
    {id: 'year', name: '연도', field: '연도'},
    {id: 'value', name: '값', field: '값'},
  ]
  const options = {
    enableCellNavigation: true,
    enableColumnReorder: false,
    forceFitColumns: !true,
    frozenColumn: 0,
    frozenRow: 1
  }
  export default {
    props: ['data', 'dimension', 'measure'],
    components: {SlickGrid},
    data() {
      const dataArr  = pivotData(this.data, this.dimension, this.measure)
      const {orientInfo, measure} = this.gridData
      return {
        gridData,
        columns,
        options
      }
    }
  }
</script>

