<template>
  <gz-dash
    icon="$ayiSplotch"
    :add-url="'widgets/0'"
    :update-frequency="32000"
    @dash-refresh="loadData"
    v-on="$listeners"
    v-bind="$attrs"
  >
    <template slot="main">
      <div class="ml-4 mt-1">
        <gz-chart-line
          :width="400"
          :height="240"
          :chart-data="obj"
          :options="{
            responsive: true,
            maintainAspectRatio: false,
            legend: { display: false }
          }"
        ></gz-chart-line>
      </div>
    </template>
  </gz-dash>
</template>
<script>
import Palette from "../api/palette";
import GzDash from "../components/dash-base.vue";
export default {
  components: {
    GzDash
  },
  data() {
    return {
      obj: {}
    };
  },
  props: {},
  created() {},
  computed: {},
  methods: {
    loadData: function() {
      this.obj = {
        labels: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July"
        ],
        datasets: [
          {
            borderColor: Palette.color.soft_deep_blue,
            backgroundColor: Palette.color.soft_deep_blue,
            fill: false,
            radius: 5,
            hoverRadius: 10,
            hitRadius: 5,
            data: [0, 10, 5, 2, 20, 30, 45]
          }
        ]
      };
    }
  }
};
</script>
