<template>
  <CChart
    type="line"
    :data="data"
    :options="options"
    @get-dataset-at-event="aa"
    @get-element-at-event="aa"
    @get-elements-at-event="aa"
  />
</template>

<script>
import { CChart } from "@coreui/vue-chartjs";
import { getStyle, hexToRgba } from "@coreui/utils/src";

function random(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

export default {
  name: "MainChartExample",
  components: {
    CChart,
  },
  setup() {
    const data = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
        {
          label: "My First dataset",
          backgroundColor: hexToRgba(getStyle("--cui-info"), 10),
          borderColor: getStyle("--cui-info"),
          pointHoverBackgroundColor: getStyle("--cui-info"),
          borderWidth: 2,
          data: [
            random(50, 200),
            random(50, 200),
            random(50, 200),
            random(50, 200),
            random(50, 200),
            random(50, 200),
            random(50, 200),
          ],
          fill: true,
        },
        {
          label: "My Second dataset",
          backgroundColor: "transparent",
          borderColor: getStyle("--cui-success"),
          pointHoverBackgroundColor: getStyle("--cui-success"),
          borderWidth: 2,
          data: [
            random(50, 200),
            random(50, 200),
            random(50, 200),
            random(50, 200),
            random(50, 200),
            random(50, 200),
            random(50, 200),
          ],
        },
        {
          label: "My Third dataset",
          backgroundColor: "transparent",
          borderColor: getStyle("--cui-danger"),
          pointHoverBackgroundColor: getStyle("--cui-danger"),
          borderWidth: 1,
          borderDash: [8, 5],
          data: [65, 65, 65, 65, 65, 65, 65],
        },
      ],
    };

    const options = {
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: false,
        },
      },
      scales: {
        x: {
          grid: {
            drawOnChartArea: false,
          },
        },
        y: {
          ticks: {
            beginAtZero: true,
            maxTicksLimit: 5,
            stepSize: Math.ceil(250 / 5),
            max: 250,
          },
        },
      },
      elements: {
        line: {
          tension: 0.4,
        },
        point: {
          radius: 0,
          hitRadius: 10,
          hoverRadius: 4,
          hoverBorderWidth: 3,
        },
      },
    };

    return {
      data,
      options,
    };
  },
  methods: {
    aa(value, value2) {
      console.log(value);
      console.log(value2);
    },
  },
};
</script>
