<template>
  <component :is="currentChart.component" :data="chartData" :chart-schema="chartSchema" :chart-style="chartStyle" />
</template>

<script>
import chartTypes from '@/utils/visual-chart'
import ChartTable from './widgets/ChartTable'
import ChartLine from './widgets/ChartLine'
import ChartBar from './widgets/ChartBar'
import ChartPie from './widgets/ChartPie'
import ChartKpi from './widgets/ChartKpi'
import ChartRadar from './widgets/ChartRadar'
import ChartFunnel from './widgets/ChartFunnel'
import ChartScatter from './widgets/ChartScatter'
import ChartGauge from './widgets/ChartGauge'
import ChartTreemap from './widgets/ChartTreemap'
import ChartWordcloud from './widgets/ChartWordcloud'
import ChartLiquidfill from './widgets/ChartLiquidfill'
import ChartSankey from './widgets/ChartSankey'
import ChartGeo from './widgets/ChartGeo'
import ChartTree from './widgets/ChartTree'
import ChartDonut from './widgets/ChartDonut'
import ChartSunburst from './widgets/ChartSunburst'
import ChartPolar from './widgets/ChartPolar'

export default {
  name: 'ChartPanel',
  components: {
    ChartTable, ChartLine, ChartBar, ChartPie,
    ChartKpi, ChartRadar, ChartFunnel, ChartScatter,
    ChartGauge, ChartTreemap, ChartWordcloud, ChartLiquidfill,
    ChartSankey, ChartGeo, ChartTree, ChartDonut,
    ChartSunburst, ChartPolar
  },
  props: {
    chartSchema: {
      type: Object,
      required: true
    },
    chartData: {
      type: Array,
      required: true
    },
    chartStyle: {
      type: Object,
      require: false
    }
  },
  data() {
    return {
      chartTypes
    }
  },
  computed: {
    currentChart() {
      return chartTypes.find(item => item.value === this.chartSchema.chartType)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
