<template>
  <div ref="chart" :style="chartStyle" style="overflow: auto;">
    <pivot-table
      ref="pivottable"
      :data="data"
      :rows="rows"
      :columns="columns"
      :values="values"
    />
  </div>
</template>

<script>
import PivotTable from '@/components/PivotTable'

export default {
  name: 'ChartTable',
  components: {
    PivotTable
  },
  props: {
    data: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    chartSchema: {
      type: Object,
      required: true,
      default: () => {
        return {}
      }
    },
    chartStyle: {
      type: Object,
      require: false,
      default: () => {
        return {
          height: '200px'
        }
      }
    }
  },
  computed: {
    rows() {
      return this.chartSchema.rows.map((row, index, arr) => {
        return {
          key: `${row.col}`,
          label: `${row.col}`
        }
      })
    },
    columns() {
      return this.chartSchema.columns.map((column, index, arr) => {
        return {
          key: `${column.col}`,
          label: `${column.col}`
        }
      })
    },
    values() {
      return this.chartSchema.measures.map((measure, index, arr) => {
        return {
          key: `${measure.col}`,
          label: `${measure.col}`
        }
      })
    }
  },
  created() {
    console.log(this.data)
    console.log(this.chartSchema)
  }
}
</script>

<style lang="scss" scoped>

</style>
