<template>
  <div class="any-chart-wrap">
    <div class="widget-container h-100">
      <div :id="'anyChart' + widgetId" class="h-100"></div>
    </div>
  </div>
</template>

<script>
import Anychart from 'anychart'

export default {
  props: {
    widgetId: {
      required: true
    },
    series: {
      type: Array,
      required: true
    }
  },
  data () {
    return {}
  },
  methods: {
    renderAnyChart () {
      let chart = Anychart.heatMap(this.series)
      chart.xScroller(true)
      chart.yScroller(true)

      chart.xZoom().setToPointsCount(8)
      chart.yZoom().setToPointsCount(6)

      var customColorScale = Anychart.scales.linearColor()
      customColorScale.colors(['#00ccff', '#ffcc00'])

      // set the color scale as the color scale of the chart
      chart.colorScale(customColorScale)

      chart.container('anyChart' + this.widgetId)
      chart.draw()
    }
  },
  watch: {
    series (_) {
      this.renderAnyChart()
    }
  },
  mounted () {
    this.renderAnyChart()
  }
}
</script>

<style lang="scss" scoped>
  .any-chart-wrap {
    height: calc(100% - 35px);
  }

</style>
