<template>
  <div class="component">
    <h6 class="title">{{data.title}}</h6>
    <div :id="'brokenLineGraphGroup' + index" ref="box"></div>
  </div>
</template>

<script>
import G2 from '@antv/g2'

export default {
  name: '',
  props: ['data', 'index'],
  data () {
    return {
    }
  },
  components: {
    G2,
  },
  mounted () {
    this.$nextTick(function () {
      this.init()
    })
  },
  methods: {
    init () {
      var _that = this
      var chart = new G2.Chart({
        container: 'brokenLineGraphGroup' + _that.index,
        forceFit: true,
        width: _that.$refs.box.clientWidth,
        height: 400,
      })
      var keys = Object.keys(_that.data.value[0])
      chart.source(_that.data.value, {
        month: {
          range: [0, 1]
        }
      })
      chart.tooltip({
        crosshairs: {
          type: 'line'
        }
      })
      chart.axis('temperature', {
        label: {
          formatter: function formatter (val) {
            return val + '°C'
          }
        }
      })
      chart.line().position(`${keys[0]}*${keys[1]}`).color(keys[2])
      chart.point().position(`${keys[0]}*${keys[1]}`).color(keys[2]).size(4).shape('circle').style({
        stroke: '#fff',
        lineWidth: 1
      })
      chart.render()
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>
