refactor: update charts to latest version

2021-08-24 15:20:37 +02:00
parent 79559ae334
commit 4bd77fc24d
5 changed files with 162 additions and 2 deletions
@@ -0,0 +1,121 @@
+<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>