<template>
  <CChart type="line" :data="chartdata" :height="200"
    :options="chartoptions" />
</template>

<script>
import { CChart } from '@coreui/vue-chartjs'
export default {
  name: 'LoadChart',
  props: ['series', 'ymax'],
  components: {
    CChart,
  },
  data: function () {
    return {
      chartoptions: {
        animations: null,
        animation: null,
        scale: {
          y: {
            min: 0,
            max: this.ymax,
          },
        },
      },
    };
  },
  computed: {
    chartdata() {
      var labels = [];
      for (var x = 60; x >= 0; x--) {
        labels.push(x + "分钟前");
      }
      const data = {
        labels: labels,
        datasets: this.make_datasets(),
      };
      return data;
    },
  },
  methods: {
    make_datasets() {
      var ret = [];
      for (var sd of this.series) {
        var ds = {
            label: sd.label,
            backgroundColor: sd.color,
            data: sd.data,
            fill: false,
            cubicInterpolationMode: 'monotone',
          };
        ret.push(ds);
      }
      return ret;
    },
  },
  mounted() {
  },
}
</script>

<style scoped>
</style>
