Skip to content

Commit 44a6c93

Browse files
woothuwoothu
committed
feat: new widget charts
1 parent ceee8b0 commit 44a6c93

File tree

11 files changed

+185
-123
lines changed

11 files changed

+185
-123
lines changed

‎src/mixins/charts/chartMixins.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
2+
import getColor from '@coreui/coreui/js/src/utilities/get-color'
3+
4+
const generatedLabels = {
5+
computed:{
6+
generatedLabels() {
7+
if(this.labels !== undefined)
8+
return this.labels
9+
let labels = [];
10+
for(let i=1; i<=this.data.length; i++)
11+
labels.push('')
12+
return labels
13+
},
14+
},
15+
}
16+
const generatedBackgroundColor = {
17+
computed:{
18+
generatedBackgroundColor(){
19+
return getColor(this.backgroundColor)
20+
},
21+
},
22+
}
23+
const generatedBorderColor = {
24+
computed:{
25+
generatedBorderColor(){
26+
return getColor(this.borderColor)
27+
},
28+
},
29+
}
30+
const generatedPointHoverBackgroundColor = {
31+
computed:{
32+
generatedPointHoverBackgroundColor () {
33+
if(this.$options.propsData.pointHoverBackgroundColor === undefined)
34+
return this.generatedBorderColor
35+
return getColor(this.pointHoverBackgroundColor)
36+
},
37+
},
38+
}
39+
const generatedOptions = {
40+
computed:{
41+
generatedOptions () {
42+
if(this.$options.propsData.options !== undefined)
43+
deepObjectsMerge(this.finalOptions, this.options)
44+
return this.finalOptions
45+
},
46+
},
47+
}
48+
export{
49+
generatedLabels,
50+
generatedBackgroundColor,
51+
generatedBorderColor,
52+
generatedPointHoverBackgroundColor,
53+
generatedOptions
54+
}

‎src/views/Dashboard.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,7 @@
155155
</widget04>
156156
</b-col>
157157
</b-row><!--/.row-->
158+
<b-row>
158159
<b-col md="12">
159160
<b-card header="Traffic &amp; Sales">
160161
<b-row>

‎src/views/Widgets.vue

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -107,25 +107,29 @@
107107
<b-row>
108108
<b-col md="3" sm="6">
109109
<widget04 type="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
110-
<line-chart1 chartId="facebook" :data='[0, 22, 34, 46, 58, 70, 68, 58, 52, 60, 64, 70]' label='Friends'
110+
<line-chart1 chartId="facebook" :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
111+
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
111112
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
112113
</widget04>
113114
</b-col>
114115
<b-col md="3" sm="6">
115116
<widget04 type="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
116-
<line-chart1 chartId="twitter" :data='[5, 22, 34, 46, 58, 70, 68, 58, 52, 60, 64, 72]' label='Followers'
117+
<line-chart1 chartId="twitter" :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
118+
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
117119
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
118120
</widget04>
119121
</b-col>
120122
<b-col md="3" sm="6">
121123
<widget04 type="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
122-
<line-chart1 chartId="linkedIn" :data='[15, 22, 34, 46, 58, 70, 68, 58, 52, 60, 64, 71]' label='Contracts'
124+
<line-chart1 chartId="linkedIn" :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
125+
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
123126
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
124127
</widget04>
125128
</b-col>
126129
<b-col md="3" sm="6">
127130
<widget04 type='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
128-
<line-chart1 chartId="google-plus" :data='[10, 22, 34, 46, 58, 70, 68, 58, 52, 60, 64, 74]' label='Followers'
131+
<line-chart1 chartId="google-plus" :data='[35, 23, 56, 22, 97, 23, 64]' label='Followers'
132+
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
129133
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
130134
</widget04>
131135
</b-col>
@@ -194,7 +198,7 @@
194198
<template slot='chart'>
195199
<line-chart2 chartId="widget06_1" slot='chart' class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
196200
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
197-
style='height:70px' label='Members'/>
201+
style='height:70px' label='Members' pointHoverBackgroundColor='primary'/>
198202
</template>
199203
</widget06>
200204
</b-col>
@@ -212,9 +216,10 @@
212216
</b-dropdown>
213217
</template>
214218
<template slot='chart'>
215-
<line-chart2 chartId="widget06_2" slot='chart' class='px-3' :data='[1, 18, 9, 17, 34, 22, 11]'
219+
<line-chart2 chartId='widget06_2' slot='chart' class='px-3' :data='[1, 18, 9, 17, 34, 22, 11]'
216220
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
217-
style='height:70px' label='Members'/>
221+
style='height:70px' label='Members' :options='{elements: {line: {tension: 0.00001}}}'
222+
pointHoverBackgroundColor='info'/>
218223
</template>
219224
</widget06>
220225
</b-col>
@@ -234,7 +239,8 @@
234239
<template slot='chart'>
235240
<line-chart1 chartId="widget06_3" slot='chart' :data='[78, 81, 80, 45, 34, 12, 40]'
236241
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
237-
style='height:70px' backgroundColor ='rgba(255,255,255,.2)' label='Members'/>
242+
style='height:70px' backgroundColor ='rgba(255,255,255,.2)' label='Members'
243+
:options="{elements: {line: {borderWidth: 2.5}}}" pointHoverBackgroundColor='warning'/>
238244
</template>
239245
</widget06>
240246
</b-col>
@@ -253,7 +259,7 @@
253259
</template>
254260
<template name='chart'>
255261
<bar-chart1 chartId="widget06_4" slot='chart' :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
256-
label='Members' backgroundColor='rgb(250, 152, 152)' style='height:70px'/>
262+
label='Members' backgroundColor='rgb(250, 152, 152)' style='height:70px' />
257263
</template>
258264
</widget06>
259265
</b-col>
@@ -262,58 +268,63 @@
262268
<b-col sm="6" lg="3">
263269
<widget07 rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
264270
<line-chart1 style="height:40px" chartId="widget07_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
265-
<bar-chart1 style="height:40px" chartId="widget07_bar1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' backgroundColor='rgba(0,0,0,.2)'/>
271+
<bar-chart1 style="height:40px" chartId="widget07_bar1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
266272
</widget07>
267273
</b-col>
268274
<b-col sm="6" lg="3">
269275
<widget07 cardClasses='bg-success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
270276
<line-chart1 style="height:40px" chartId="widget07_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
271-
<bar-chart1 style="height:40px" chartId="widget07_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' backgroundColor='rgba(0,0,0,.2)'/>
277+
<bar-chart1 style="height:40px" chartId="widget07_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
272278
</widget07>
273279
</b-col>
274280
<b-col sm="6" lg="3">
275281
<widget07 cardClasses='bg-danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
276282
<line-chart1 style="height:40px" chartId="widget07_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
277-
<bar-chart1 style="height:40px" chartId="widget07_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' backgroundColor='rgba(0,0,0,.2)'/>
283+
<bar-chart1 style="height:40px" chartId="widget07_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
278284
</widget07>
279285
</b-col>
280286
<b-col sm="6" lg="3">
281287
<widget07 cardClasses='bg-warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
282288
<line-chart1 style="height:40px" chartId="widget07_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
283-
<bar-chart1 style="height:40px" chartId="widget07_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' backgroundColor='rgba(0,0,0,.2)'
284-
pointHoverBackgroundColor='#FFC107'/>
289+
<bar-chart1 style="height:40px" chartId="widget07_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
285290
</widget07>
286291
</b-col>
287292
</b-row>
288293
<b-row>
289294
<b-col sm="4" lg="2">
290295
<widget08 header='title' text='1,123'>
291-
<line-chart1 style="height:40px" chartId="widget08_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' borderColor='rgb(248, 108, 107, 1)'/>
296+
<line-chart1 style="height:40px" chartId="widget08_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
297+
label='Sales' borderColor='danger'/>
292298
</widget08>
293299
</b-col>
294300
<b-col sm="4" lg="2">
295301
<widget08 header='title' text='1,123'>
296-
<line-chart1 style="height:40px" chartId="widget08_2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' borderColor='rgb(32, 168, 216, 1)'/>
302+
<line-chart1 style="height:40px" chartId="widget08_2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
303+
label='Sales' borderColor='primary'/>
297304
</widget08>
298305
</b-col>
299306
<b-col sm="4" lg="2">
300307
<widget08 header='title' text='1,123'>
301-
<line-chart1 style="height:40px" chartId="widget08_3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' borderColor='rgb(77, 189, 116)'/>
308+
<line-chart1 style="height:40px" chartId="widget08_3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
309+
label='Sales' borderColor='success'/>
302310
</widget08>
303311
</b-col>
304312
<b-col sm="4" lg="2">
305313
<widget08 header='title' text='1,123'>
306-
<bar-chart1 style="height:40px" chartId="widget08_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' backgroundColor='rgb(248, 108, 107, 1)'/>
314+
<bar-chart1 style="height:40px" chartId="widget08_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
315+
label='Sales' backgroundColor='danger'/>
307316
</widget08>
308317
</b-col>
309318
<b-col sm="4" lg="2">
310319
<widget08 header='title' text='1,123'>
311-
<bar-chart1 style="height:40px" chartId="widget08_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' backgroundColor='rgb(32, 168, 216, 1)'/>
320+
<bar-chart1 style="height:40px" chartId="widget08_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
321+
label='Sales' backgroundColor='primary'/>
312322
</widget08>
313323
</b-col>
314324
<b-col sm="4" lg="2">
315325
<widget08 header='title' text='1,123'>
316-
<bar-chart1 style="height:40px" chartId="widget08_6" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' backgroundColor='rgb(77, 189, 116)'/>
326+
<bar-chart1 style="height:40px" chartId="widget08_6" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
327+
label='Sales' backgroundColor='success'/>
317328
</widget08>
318329
</b-col>
319330
</b-row>

‎src/views/charts/BarExample.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Bar } from 'vue-chartjs'
33
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
44
55
export default {
6+
// name: 'BarExample',
67
extends: Bar,
78
mounted () {
89
// Overwriting base render method with actual data.

‎src/views/charts/DoughnutExample.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { Doughnut } from 'vue-chartjs'
33
44
export default {
5+
name: 'DoughnutExample',
56
extends: Doughnut,
67
mounted () {
78
this.renderChart({

‎src/views/dashboard/BarChart1.vue

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
<script>
22
import { Bar } from 'vue-chartjs'
33
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
4+
import { generatedLabels, generatedBackgroundColor,generatedBorderColor, generatedOptions } from '@/mixins/charts/chartMixins'
45
56
export default {
7+
name: 'BarChart',
68
extends: Bar,
9+
mixins: [generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedOptions],
710
props: {
811
data: {
912
type: Array,
@@ -17,33 +20,19 @@ export default {
1720
type: String,
1821
default: 'label|string'
1922
},
20-
labels:{
21-
type: Array,
22-
default () {
23-
return(['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'])
24-
}
23+
borderColor:{
24+
type: String,
25+
default: 'rgba(255,255,255,.55)'
2526
},
2627
backgroundColor:{
2728
type: String,
28-
default: 'rgba(255,255,255,.3)'
29+
default: 'rgba(0,0,0,.2)'
2930
},
30-
pointHoverBackgroundColor: String,
31-
},
32-
mounted () {
33-
const dataset = [
34-
{
35-
label: this.label,
36-
backgroundColor: this.backgroundColor,
37-
borderColor: 'transparent',
38-
data: this.data
39-
}
40-
]
41-
this.renderChart(
42-
{
43-
labels: this.labels,
44-
datasets: dataset
45-
},
46-
{
31+
labels: Array,
32+
options:Object,
33+
finalOptions:{
34+
type: Object,
35+
default: () => ({
4736
tooltips: {
4837
enabled: false,
4938
custom: CustomTooltips
@@ -62,7 +51,24 @@ export default {
6251
display: false
6352
}]
6453
}
54+
})
55+
}
56+
},
57+
mounted () {
58+
const dataset = [
59+
{
60+
label: this.label,
61+
backgroundColor: this.generatedBackgroundColor,
62+
borderColor: this.generatedBorderColor,
63+
data: this.data
6564
}
65+
]
66+
this.renderChart(
67+
{
68+
labels: this.generatedLabels,
69+
datasets: dataset
70+
},
71+
this.generatedOptions
6672
)
6773
}
6874
}

0 commit comments

Comments
 (0)