Skip to content

Commit c4d5ff8

Browse files
xidedixxidedix
committed
refactor(charts): add CustomTooltips, add chartId prop
1 parent 4aa0284 commit c4d5ff8

16 files changed

+367
-225
lines changed

‎src/utils/getStyle.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// todo
2+
// temp getStyle fix for IE
3+
const getStyle = (prop, node) => {
4+
const root = node || document.querySelector(':root')
5+
const value = window.getComputedStyle(root).getPropertyValue(prop).trim()
6+
// console.log('utils/getStyle', value)
7+
return value
8+
}
9+
10+
export default getStyle

‎src/views/Charts.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
11
<template>
22
<div class="animated fadeIn">
3-
<b-card-group columns class="card-columns cols-2">
3+
<b-card-group columns class="card-columns">
44
<b-card header="Line Chart">
55
<div class="chart-wrapper">
6-
<line-example/>
6+
<line-example chartId="chart-line-01"/>
77
</div>
88
</b-card>
99
<b-card header="Bar Chart">
1010
<div class="chart-wrapper">
11-
<bar-example/>
11+
<bar-example chartId="chart-bar-01"/>
1212
</div>
1313
</b-card>
1414
<b-card header="Doughnut Chart">
1515
<div class="chart-wrapper">
16-
<doughnut-example/>
16+
<doughnut-example chartId="chart-doughnut-01"/>
1717
</div>
1818
</b-card>
1919
<b-card header="Radar Chart">
2020
<div class="chart-wrapper">
21-
<radar-example/>
21+
<radar-example chartId="chart-radar-01"/>
2222
</div>
2323
</b-card>
2424
<b-card header="Pie Chart">
2525
<div class="chart-wrapper">
26-
<pie-example/>
26+
<pie-example chartId="chart-pie-01"/>
2727
</div>
2828
</b-card>
2929
<b-card header="Polar Area Chart">
3030
<div class="chart-wrapper">
31-
<polar-area-example/>
31+
<polar-area-example chartId="chart-polar-area-01"/>
3232
</div>
3333
</b-card>
3434
</b-card-group>

‎src/views/Dashboard.vue‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<h4 class="mb-0">9.823</h4>
1717
<p>Members online</p>
1818
</b-card-body>
19-
<card-line1-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
19+
<card-line1-chart-example chartId="card-chart-01" class="chart-wrapper px-3" style="height:70px;" height="70"/>
2020
</b-card>
2121
</b-col>
2222
<b-col sm="6" lg="3">
@@ -34,7 +34,7 @@
3434
<h4 class="mb-0">9.823</h4>
3535
<p>Members online</p>
3636
</b-card-body>
37-
<card-line2-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
37+
<card-line2-chart-example chartId="card-chart-02" class="chart-wrapper px-3" style="height:70px;" height="70"/>
3838
</b-card>
3939
</b-col>
4040
<b-col sm="6" lg="3">
@@ -52,7 +52,7 @@
5252
<h4 class="mb-0">9.823</h4>
5353
<p>Members online</p>
5454
</b-card-body>
55-
<card-line3-chart-example class="chart-wrapper" style="height:70px;" height="70"/>
55+
<card-line3-chart-example chartId="card-chart-03" class="chart-wrapper" style="height:70px;" height="70"/>
5656
</b-card>
5757
</b-col>
5858
<b-col sm="6" lg="3">
@@ -70,7 +70,7 @@
7070
<h4 class="mb-0">9.823</h4>
7171
<p>Members online</p>
7272
</b-card-body>
73-
<card-bar-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
73+
<card-bar-chart-example chartId="card-chart-04" class="chart-wrapper px-3" style="height:70px;" height="70"/>
7474
</b-card>
7575
</b-col>
7676
</b-row>
@@ -92,7 +92,7 @@
9292
</b-button-toolbar>
9393
</b-col>
9494
</b-row>
95-
<main-chart-example class="chart-wrapper" style="height:300px;margin-top:40px;" height="300"></main-chart-example>
95+
<main-chart-example chartId="main-chart-01" class="chart-wrapper" style="height:300px;margin-top:40px;" height="300"></main-chart-example>
9696
<div slot="footer">
9797
<b-row class="text-center">
9898
<b-col class="mb-sm-2 mb-0">
@@ -129,7 +129,7 @@
129129
<div class="brand-card-header bg-facebook">
130130
<i class="fa fa-facebook"></i>
131131
<div class="chart-wrapper">
132-
<social-box-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" height="90"/>
132+
<social-box-chart-example chartId="box-chart-01" :data="[65, 59, 84, 84, 51, 55, 40]" height="90"/>
133133
</div>
134134
</div>
135135
<div class="brand-card-body">
@@ -149,7 +149,7 @@
149149
<div class="brand-card-header bg-twitter">
150150
<i class="fa fa-twitter"></i>
151151
<div class="chart-wrapper">
152-
<social-box-chart-example :data="[1, 13, 9, 17, 34, 41, 38]" height="90"/>
152+
<social-box-chart-example chartId="box-chart-02" :data="[1, 13, 9, 17, 34, 41, 38]" height="90"/>
153153
</div>
154154
</div>
155155
<div class="brand-card-body">
@@ -169,7 +169,7 @@
169169
<div class="brand-card-header bg-linkedin">
170170
<i class="fa fa-linkedin"></i>
171171
<div class="chart-wrapper">
172-
<social-box-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" height="90"/>
172+
<social-box-chart-example chartId="box-chart-03" :data="[78, 81, 80, 45, 34, 12, 40]" height="90"/>
173173
</div>
174174
</div>
175175
<div class="brand-card-body">
@@ -189,7 +189,7 @@
189189
<div class="brand-card-header bg-google-plus">
190190
<i class="fa fa-google-plus"></i>
191191
<div class="chart-wrapper">
192-
<social-box-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" height="90"/>
192+
<social-box-chart-example chartId="box-chart-04" :data="[35, 23, 56, 22, 97, 23, 64]" height="90"/>
193193
</div>
194194
</div>
195195
<div class="brand-card-body">
@@ -217,7 +217,7 @@
217217
<strong class="h4">9,123</strong>
218218
<div class="chart-wrapper" :style="{ top: '-10px'}">
219219
<!--<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
220-
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
220+
<callout-chart-example chartId="callout-chart-01" :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
221221
</div>
222222
</Callout>
223223
</b-col>
@@ -226,7 +226,7 @@
226226
<small class="text-muted">Recurring Clients</small><br>
227227
<strong class="h4">22,643</strong>
228228
<div class="chart-wrapper" :style="{ top: '-10px'}">
229-
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
229+
<callout-chart-example chartId="callout-chart-02" :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
230230
</div>
231231
</Callout>
232232
</b-col>
@@ -326,7 +326,7 @@
326326
<small class="text-muted">Pageviews</small><br>
327327
<strong class="h4">78,623</strong>
328328
<div class="chart-wrapper" :style="{ top: '-10px'}">
329-
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
329+
<callout-chart-example chartId="callout-chart-03" :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
330330
</div>
331331
</Callout>
332332
</b-col>
@@ -335,7 +335,7 @@
335335
<small class="text-muted">Organic</small><br>
336336
<strong class="h4">49,123</strong>
337337
<div class="chart-wrapper" :style="{ top: '-10px'}">
338-
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
338+
<callout-chart-example chartId="callout-chart-04" :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
339339
</div>
340340
</Callout>
341341
</b-col>

‎src/views/charts/BarExample.vue‎

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,39 @@
11
<script>
22
import { Bar } from 'vue-chartjs'
3+
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
34
45
export default {
56
extends: Bar,
67
mounted () {
78
// Overwriting base render method with actual data.
8-
this.renderChart({
9-
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
10-
datasets: [
11-
{
12-
label: 'GitHub Commits',
13-
backgroundColor: '#f87979',
14-
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
9+
this.renderChart(
10+
{
11+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
12+
datasets: [
13+
{
14+
label: 'GitHub Commits',
15+
backgroundColor: '#f87979',
16+
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
17+
}
18+
]
19+
},
20+
{
21+
responsive: true,
22+
maintainAspectRatio: true,
23+
tooltips: {
24+
enabled: false,
25+
custom: CustomTooltips,
26+
intersect: true,
27+
mode: 'index',
28+
position: 'nearest',
29+
callbacks: {
30+
labelColor: function (tooltipItem, chart) {
31+
return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].backgroundColor }
32+
}
33+
}
1534
}
16-
]
17-
})
35+
}
36+
)
1837
}
1938
}
2039
</script>

‎src/views/charts/DoughnutExample.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default {
1717
data: [40, 20, 80, 10]
1818
}
1919
]
20-
}, {responsive: true, maintainAspectRatio: false})
20+
}, {responsive: true, maintainAspectRatio: true})
2121
}
2222
}
2323
</script>

‎src/views/charts/LineExample.vue‎

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,48 @@
11
<script>
22
import { Line } from 'vue-chartjs'
3+
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
4+
import { hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
35
46
export default {
7+
components: {
8+
hexToRgba,
9+
CustomTooltips
10+
},
511
extends: Line,
612
mounted () {
7-
this.renderChart({
8-
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
9-
datasets: [
10-
{
11-
label: 'Data One',
12-
backgroundColor: '#f87979',
13-
data: [40, 39, 10, 40, 39, 80, 40]
13+
this.renderChart(
14+
{
15+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
16+
datasets: [
17+
{
18+
label: 'Data One',
19+
backgroundColor: hexToRgba('#E46651', 90),
20+
data: [30, 39, 10, 50, 30, 70, 35]
21+
},
22+
{
23+
label: 'Data Two',
24+
backgroundColor: hexToRgba('#00D8FF', 90),
25+
data: [39, 80, 40, 35, 40, 20, 45]
26+
}
27+
]
28+
},
29+
{
30+
responsive: true,
31+
maintainAspectRatio: true,
32+
tooltips: {
33+
enabled: false,
34+
custom: CustomTooltips,
35+
intersect: true,
36+
mode: 'index',
37+
position: 'nearest',
38+
callbacks: {
39+
labelColor: function (tooltipItem, chart) {
40+
return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].backgroundColor }
41+
}
42+
}
1443
}
15-
]
16-
}, {responsive: true, maintainAspectRatio: false})
44+
}
45+
)
1746
}
1847
}
1948
</script>

‎src/views/charts/PieExample.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default {
1717
data: [40, 20, 80, 10]
1818
}
1919
]
20-
}, {responsive: true, maintainAspectRatio: false})
20+
}, {responsive: true, maintainAspectRatio: true})
2121
}
2222
}
2323
</script>

‎src/views/charts/PolarAreaExample.vue‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script>
22
import { PolarArea } from 'vue-chartjs'
3+
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
34
45
export default {
56
extends: PolarArea,
@@ -26,7 +27,22 @@ export default {
2627
data: [28, 48, 40, 19, 96, 27, 100]
2728
}
2829
]
29-
}, {responsive: true, maintainAspectRatio: false})
30+
}, {
31+
responsive: true,
32+
maintainAspectRatio: false,
33+
tooltips: {
34+
enabled: false,
35+
custom: CustomTooltips,
36+
intersect: true,
37+
mode: 'index',
38+
position: 'nearest',
39+
callbacks: {
40+
labelColor: function (tooltipItem, chart) {
41+
return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].backgroundColor }
42+
}
43+
}
44+
}
45+
})
3046
}
3147
}
3248
</script>

‎src/views/charts/RadarExample.vue‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script>
22
import { Radar } from 'vue-chartjs'
3+
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
34
45
export default {
56
extends: Radar,
@@ -8,7 +9,7 @@ export default {
89
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
910
datasets: [
1011
{
11-
label: 'My First dataset',
12+
label: '2017',
1213
backgroundColor: 'rgba(179,181,198,0.2)',
1314
borderColor: 'rgba(179,181,198,1)',
1415
pointBackgroundColor: 'rgba(179,181,198,1)',
@@ -18,7 +19,7 @@ export default {
1819
data: [65, 59, 90, 81, 56, 55, 40]
1920
},
2021
{
21-
label: 'My Second dataset',
22+
label: '2018',
2223
backgroundColor: 'rgba(255,99,132,0.2)',
2324
borderColor: 'rgba(255,99,132,1)',
2425
pointBackgroundColor: 'rgba(255,99,132,1)',
@@ -28,7 +29,22 @@ export default {
2829
data: [28, 48, 40, 19, 96, 27, 100]
2930
}
3031
]
31-
}, {responsive: true, maintainAspectRatio: false})
32+
}, {
33+
responsive: true,
34+
maintainAspectRatio: true,
35+
tooltips: {
36+
enabled: false,
37+
custom: CustomTooltips,
38+
intersect: true,
39+
mode: 'index',
40+
position: 'nearest',
41+
callbacks: {
42+
labelColor: function (tooltipItem, chart) {
43+
return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor }
44+
}
45+
}
46+
}
47+
})
3248
}
3349
}
3450
</script>

0 commit comments

Comments
 (0)