Skip to content

Commit 4bd77fc

Browse files
mrholekmrholek
committed
refactor: update charts to latest version
1 parent 79559ae commit 4bd77fc

File tree

5 files changed

+162
-2
lines changed

5 files changed

+162
-2
lines changed

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,11 @@
1313
"lint": "vue-cli-service lint"
1414
},
1515
"dependencies": {
16+
"@coreui/chartjs": "^3.0.0",
1617
"@coreui/coreui": "^4.0.1",
1718
"@coreui/icons": "^2.0.1",
1819
"@coreui/icons-vue": "2.0.0-alpha.0",
20+
"@coreui/utils": "1.3.1",
1921
"@coreui/vue": "^4.0.0-alpha.0",
2022
"core-js": "^3.6.5",
2123
"vue": "^3.0.0",

‎src/assets/scss/style.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ $enable-rtl: true;
77
// Import styles
88
@import "~@coreui/coreui/scss/coreui";
99

10+
// Import Chart.js Tooltips
11+
@import "~@coreui/chartjs/scss/tooltips";
12+
1013
@import "layout";
1114
@import "example";
1215

‎src/views/Dashboard.vue

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
<template>
2-
<div class="dashboard">
3-
<h1>Dashboard</h1>
2+
<div>
3+
<MainChartExample style="height: 300px; margin-top: 40px" />
44
</div>
55
</template>
6+
7+
<script>
8+
import MainChartExample from "./charts/MainChartExample";
9+
10+
export default {
11+
name: "Dashboard",
12+
components: {
13+
MainChartExample,
14+
},
15+
};
16+
</script>

‎src/views/charts/MainChartExample.vue

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<template>
2+
<CChart
3+
type="line"
4+
:data="data"
5+
:options="options"
6+
@get-dataset-at-event="aa"
7+
@get-element-at-event="aa"
8+
@get-elements-at-event="aa"
9+
/>
10+
</template>
11+
12+
<script>
13+
import { CChart } from "@coreui/vue-chartjs";
14+
import { getStyle, hexToRgba } from "@coreui/utils/src";
15+
16+
function random(min, max) {
17+
return Math.floor(Math.random() * (max - min + 1) + min);
18+
}
19+
20+
export default {
21+
name: "MainChartExample",
22+
components: {
23+
CChart,
24+
},
25+
setup() {
26+
const data = {
27+
labels: ["January", "February", "March", "April", "May", "June", "July"],
28+
datasets: [
29+
{
30+
label: "My First dataset",
31+
backgroundColor: hexToRgba(getStyle("--cui-info"), 10),
32+
borderColor: getStyle("--cui-info"),
33+
pointHoverBackgroundColor: getStyle("--cui-info"),
34+
borderWidth: 2,
35+
data: [
36+
random(50, 200),
37+
random(50, 200),
38+
random(50, 200),
39+
random(50, 200),
40+
random(50, 200),
41+
random(50, 200),
42+
random(50, 200),
43+
],
44+
fill: true,
45+
},
46+
{
47+
label: "My Second dataset",
48+
backgroundColor: "transparent",
49+
borderColor: getStyle("--cui-success"),
50+
pointHoverBackgroundColor: getStyle("--cui-success"),
51+
borderWidth: 2,
52+
data: [
53+
random(50, 200),
54+
random(50, 200),
55+
random(50, 200),
56+
random(50, 200),
57+
random(50, 200),
58+
random(50, 200),
59+
random(50, 200),
60+
],
61+
},
62+
{
63+
label: "My Third dataset",
64+
backgroundColor: "transparent",
65+
borderColor: getStyle("--cui-danger"),
66+
pointHoverBackgroundColor: getStyle("--cui-danger"),
67+
borderWidth: 1,
68+
borderDash: [8, 5],
69+
data: [65, 65, 65, 65, 65, 65, 65],
70+
},
71+
],
72+
};
73+
74+
const options = {
75+
maintainAspectRatio: false,
76+
plugins: {
77+
legend: {
78+
display: false,
79+
},
80+
},
81+
scales: {
82+
x: {
83+
grid: {
84+
drawOnChartArea: false,
85+
},
86+
},
87+
y: {
88+
ticks: {
89+
beginAtZero: true,
90+
maxTicksLimit: 5,
91+
stepSize: Math.ceil(250 / 5),
92+
max: 250,
93+
},
94+
},
95+
},
96+
elements: {
97+
line: {
98+
tension: 0.4,
99+
},
100+
point: {
101+
radius: 0,
102+
hitRadius: 10,
103+
hoverRadius: 4,
104+
hoverBorderWidth: 3,
105+
},
106+
},
107+
};
108+
109+
return {
110+
data,
111+
options,
112+
};
113+
},
114+
methods: {
115+
aa(value, value2) {
116+
console.log(value);
117+
console.log(value2);
118+
},
119+
},
120+
};
121+
</script>

‎yarn.lock

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -911,6 +911,19 @@
911911
exec-sh "^0.3.2"
912912
minimist "^1.2.0"
913913

914+
"@coreui/chartjs@^3.0.0":
915+
version "3.0.0"
916+
resolved "https://registry.yarnpkg.com/@coreui/chartjs/-/chartjs-3.0.0.tgz#54b55d85de0f3146237b7d1d36b1bf33bc051735"
917+
integrity sha512-udbvSxanTNltv94lqTMW8bLRXTtzk9G2SrmFdM/7HH+JSaLX2wdQpZ4VIJhyOCRGLCSKHktl29BnW1/uXQecAg==
918+
dependencies:
919+
"@coreui/coreui" "4.0.0"
920+
chart.js "^3.4.0"
921+
922+
"@coreui/[email protected]":
923+
version "4.0.0"
924+
resolved "https://registry.yarnpkg.com/@coreui/coreui/-/coreui-4.0.0.tgz#52ebe0197411a829ba48057ade61923e05859eec"
925+
integrity sha512-8vH6fJrmvCR/Oy5v0E+/1AL3Ygb4jhQ7NXK2fMYWJyK13BePDm9muB3y6S0IdqkpBwjY3hHVwHyt2lJqJdesmQ==
926+
914927
"@coreui/coreui@^4.0.1":
915928
version "4.0.1"
916929
resolved "https://registry.yarnpkg.com/@coreui/coreui/-/coreui-4.0.1.tgz#e5faf540aeea31b0cc8d428d73080a364e4bc6fd"
@@ -933,6 +946,11 @@
933946
resolved "https://registry.yarnpkg.com/@coreui/icons/-/icons-2.0.1.tgz#778022fe2b366abf9594d142607026e4edc667f8"
934947
integrity sha512-gBfFRLPUt3Bv9EZbJRbT3sQRHrhH0c4dRbeE9GpWJgJY8kvE9+3Hf5xGK9XyQhFynHx4o2WQeMxsReQLddlK9w==
935948

949+
"@coreui/[email protected]":
950+
version "1.3.1"
951+
resolved "https://registry.yarnpkg.com/@coreui/utils/-/utils-1.3.1.tgz#ebe6fa00ae7f46d166b26f116e74d55dfc89f5e0"
952+
integrity sha512-WuWHX7bg89cJH34TWVsLe9RsxzBhTApj+X2Ja19xhjcpxt5Gv11Ozm+fwYt6DD7DgncTvpwYrMcnNlpp701UOg==
953+
936954
"@coreui/vue@^4.0.0-alpha.0":
937955
version "4.0.0-alpha.0"
938956
resolved "https://registry.yarnpkg.com/@coreui/vue/-/vue-4.0.0-alpha.0.tgz#f23e480c255d9f2aa43ef96ae9c1ade5be59aff1"
@@ -3149,6 +3167,11 @@ chardet@^0.7.0:
31493167
resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
31503168
integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
31513169

3170+
chart.js@^3.4.0:
3171+
version "3.5.0"
3172+
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.5.0.tgz#6eb075332d4ebbbb20a94e5a07a234052ed6c4fb"
3173+
integrity sha512-J1a4EAb1Gi/KbhwDRmoovHTRuqT8qdF0kZ4XgwxpGethJHUdDrkqyPYwke0a+BuvSeUxPf8Cos6AX2AB8H8GLA==
3174+
31523175
check-types@^8.0.3:
31533176
version "8.0.3"
31543177
resolved "https://registry.yarnpkg.com/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"

0 commit comments

Comments
 (0)