refactor: update charts to latest version

package.json

@@ -13,9 +13,11 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@coreui/chartjs": "^3.0.0",
     "@coreui/coreui": "^4.0.1",
     "@coreui/icons": "^2.0.1",
     "@coreui/icons-vue": "2.0.0-alpha.0",
+    "@coreui/utils": "1.3.1",
     "@coreui/vue": "^4.0.0-alpha.0",
     "core-js": "^3.6.5",
     "vue": "^3.0.0",

src/assets/scss/style.scss

@@ -7,6 +7,9 @@ $enable-rtl: true;
 // Import styles
 @import "~@coreui/coreui/scss/coreui";
 
+// Import Chart.js Tooltips
+@import "~@coreui/chartjs/scss/tooltips";
+
 @import "layout";
 @import "example";
 

src/views/Dashboard.vue

@@ -1,5 +1,16 @@
 <template>
-  <div class="dashboard">
+  <div>
-    <h1>Dashboard</h1>
+    <MainChartExample style="height: 300px; margin-top: 40px" />
   </div>
 </template>
+
+<script>
+import MainChartExample from "./charts/MainChartExample";
+
+export default {
+  name: "Dashboard",
+  components: {
+    MainChartExample,
+  },
+};
+</script>

src/views/charts/MainChartExample.vue

@@ -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>

yarn.lock

@@ -911,6 +911,19 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@coreui/chartjs@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@coreui/chartjs/-/chartjs-3.0.0.tgz#54b55d85de0f3146237b7d1d36b1bf33bc051735"
+  integrity sha512-udbvSxanTNltv94lqTMW8bLRXTtzk9G2SrmFdM/7HH+JSaLX2wdQpZ4VIJhyOCRGLCSKHktl29BnW1/uXQecAg==
+  dependencies:
+    "@coreui/coreui" "4.0.0"
+    chart.js "^3.4.0"
+
+"@coreui/coreui@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@coreui/coreui/-/coreui-4.0.0.tgz#52ebe0197411a829ba48057ade61923e05859eec"
+  integrity sha512-8vH6fJrmvCR/Oy5v0E+/1AL3Ygb4jhQ7NXK2fMYWJyK13BePDm9muB3y6S0IdqkpBwjY3hHVwHyt2lJqJdesmQ==
+
 "@coreui/coreui@^4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@coreui/coreui/-/coreui-4.0.1.tgz#e5faf540aeea31b0cc8d428d73080a364e4bc6fd"
@@ -933,6 +946,11 @@
   resolved "https://registry.yarnpkg.com/@coreui/icons/-/icons-2.0.1.tgz#778022fe2b366abf9594d142607026e4edc667f8"
   integrity sha512-gBfFRLPUt3Bv9EZbJRbT3sQRHrhH0c4dRbeE9GpWJgJY8kvE9+3Hf5xGK9XyQhFynHx4o2WQeMxsReQLddlK9w==
 
+"@coreui/utils@1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@coreui/utils/-/utils-1.3.1.tgz#ebe6fa00ae7f46d166b26f116e74d55dfc89f5e0"
+  integrity sha512-WuWHX7bg89cJH34TWVsLe9RsxzBhTApj+X2Ja19xhjcpxt5Gv11Ozm+fwYt6DD7DgncTvpwYrMcnNlpp701UOg==
+
 "@coreui/vue@^4.0.0-alpha.0":
   version "4.0.0-alpha.0"
   resolved "https://registry.yarnpkg.com/@coreui/vue/-/vue-4.0.0-alpha.0.tgz#f23e480c255d9f2aa43ef96ae9c1ade5be59aff1"
@@ -3149,6 +3167,11 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
+chart.js@^3.4.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.5.0.tgz#6eb075332d4ebbbb20a94e5a07a234052ed6c4fb"
+  integrity sha512-J1a4EAb1Gi/KbhwDRmoovHTRuqT8qdF0kZ4XgwxpGethJHUdDrkqyPYwke0a+BuvSeUxPf8Cos6AX2AB8H8GLA==
+
 check-types@^8.0.3:
   version "8.0.3"
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"