Skip to content

Commit 364c951

Browse files
woothuwoothu
committed
Added widget charts, chart extracted from widgets.
1 parent 2023248 commit 364c951

26 files changed

+785
-130
lines changed

‎src/views/Dashboard.vue

Lines changed: 87 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,54 +3,81 @@
33
<b-row>
44
<b-col sm="6" lg="3">
55
<widget06 cardClasses="bg-primary" header="9.823" text="Members online" chartType="chart1">
6-
<b-dropdown class="float-right" variant="transparent p-0" right>
7-
<template slot="button-content">
8-
<i class="icon-settings"></i>
9-
</template>
10-
<b-dropdown-item>Action</b-dropdown-item>
11-
<b-dropdown-item>Another action</b-dropdown-item>
12-
<b-dropdown-item>Something else here...</b-dropdown-item>
13-
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
14-
</b-dropdown>
6+
<template slot='dropdown'>
7+
<b-dropdown class="float-right" variant="transparent p-0" right>
8+
<template slot="button-content">
9+
<i class="icon-settings"></i>
10+
</template>
11+
<b-dropdown-item>Action</b-dropdown-item>
12+
<b-dropdown-item>Another action</b-dropdown-item>
13+
<b-dropdown-item>Something else here...</b-dropdown-item>
14+
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
15+
</b-dropdown>
16+
</template>
17+
<template slot='chart'>
18+
<line-chart2 chartId="widget06_1" slot='chart' class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
19+
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
20+
style='height:70px' label='Members'/>
21+
</template>
1522
</widget06>
1623
</b-col>
1724
<b-col sm="6" lg="3">
1825
<widget06 cardClasses="bg-info" header="9.823" text="Members online" chartType="chart2">
19-
<b-dropdown class="float-right" variant="transparent p-0" right no-caret>
20-
<template slot="button-content">
21-
<i class="icon-location-pin"></i>
22-
</template>
23-
<b-dropdown-item>Action</b-dropdown-item>
24-
<b-dropdown-item>Another action</b-dropdown-item>
25-
<b-dropdown-item>Something else here...</b-dropdown-item>
26-
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
27-
</b-dropdown>
26+
<template slot='dropdown'>
27+
<b-dropdown class="float-right" variant="transparent p-0" right no-caret>
28+
<template slot="button-content">
29+
<i class="icon-location-pin"></i>
30+
</template>
31+
<b-dropdown-item>Action</b-dropdown-item>
32+
<b-dropdown-item>Another action</b-dropdown-item>
33+
<b-dropdown-item>Something else here...</b-dropdown-item>
34+
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
35+
</b-dropdown>
36+
</template>
37+
<template slot='chart'>
38+
<line-chart2 chartId="widget06_2" slot='chart' class='px-3' :data='[1, 18, 9, 17, 34, 22, 11]'
39+
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
40+
style='height:70px' label='Members'/>
41+
</template>
2842
</widget06>
2943
</b-col>
3044
<b-col sm="6" lg="3">
3145
<widget06 cardClasses="bg-warning" header="9.823" text="Members online" chartType="chart3">
32-
<b-dropdown class="float-right" variant="transparent p-0" right>
33-
<template slot="button-content">
34-
<i class="icon-settings"></i>
35-
</template>
36-
<b-dropdown-item>Action</b-dropdown-item>
37-
<b-dropdown-item>Another action</b-dropdown-item>
38-
<b-dropdown-item>Something else here...</b-dropdown-item>
39-
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
40-
</b-dropdown>
46+
<template slot='dropdown'>
47+
<b-dropdown class="float-right" variant="transparent p-0" right>
48+
<template slot="button-content">
49+
<i class="icon-settings"></i>
50+
</template>
51+
<b-dropdown-item>Action</b-dropdown-item>
52+
<b-dropdown-item>Another action</b-dropdown-item>
53+
<b-dropdown-item>Something else here...</b-dropdown-item>
54+
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
55+
</b-dropdown>
56+
</template>
57+
<template slot='chart'>
58+
<line-chart1 chartId="widget06_3" slot='chart' :data='[78, 81, 80, 45, 34, 12, 40]'
59+
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
60+
style='height:70px' backgroundColor ='rgba(255,255,255,.2)' label='Members'/>
61+
</template>
4162
</widget06>
4263
</b-col>
4364
<b-col sm="6" lg="3">
4465
<widget06 cardClasses="bg-danger" header="9.823" text="Members online" chartType="chart4">
45-
<b-dropdown class="float-right" variant="transparent p-0" right>
46-
<template slot="button-content">
47-
<i class="icon-settings"></i>
48-
</template>
49-
<b-dropdown-item>Action</b-dropdown-item>
50-
<b-dropdown-item>Another action</b-dropdown-item>
51-
<b-dropdown-item>Something else here...</b-dropdown-item>
52-
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
53-
</b-dropdown>
66+
<template name='dropdown'>
67+
<b-dropdown class="float-right" variant="transparent p-0" right>
68+
<template slot="button-content">
69+
<i class="icon-settings"></i>
70+
</template>
71+
<b-dropdown-item>Action</b-dropdown-item>
72+
<b-dropdown-item>Another action</b-dropdown-item>
73+
<b-dropdown-item>Something else here...</b-dropdown-item>
74+
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
75+
</b-dropdown>
76+
</template>
77+
<template name='chart'>
78+
<bar-chart1 chartId="widget06_4" slot='chart' :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
79+
label='Members' backgroundColor='rgb(250, 152, 152)' style='height:70px'/>
80+
</template>
5481
</widget06>
5582
</b-col>
5683
</b-row>
@@ -104,20 +131,28 @@
104131
</b-card>
105132
<b-row>
106133
<b-col md="3" sm="6">
107-
<widget04 type="facebook" :dataPoints="[65, 59, 84, 84, 51, 55, 40]"
108-
rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
134+
<widget04 type="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
135+
<line-chart1 chartId="facebook" :data='[0, 22, 34, 46, 58, 70, 68, 58, 52, 60, 64, 70]' label='Friends'
136+
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
137+
</widget04>
109138
</b-col>
110139
<b-col md="3" sm="6">
111-
<widget04 type="twitter" :dataPoints="[1, 13, 9, 17, 34, 41, 38]"
112-
rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
140+
<widget04 type="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
141+
<line-chart1 chartId="twitter" :data='[5, 22, 34, 46, 58, 70, 68, 58, 52, 60, 64, 72]' label='Followers'
142+
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
143+
</widget04>
113144
</b-col>
114145
<b-col md="3" sm="6">
115-
<widget04 type="linkedin" :dataPoints="[78, 81, 80, 45, 34, 12, 40]"
116-
rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
146+
<widget04 type="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
147+
<line-chart1 chartId="linkedIn" :data='[15, 22, 34, 46, 58, 70, 68, 58, 52, 60, 64, 71]' label='Contracts'
148+
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
149+
</widget04>
117150
</b-col>
118151
<b-col md="3" sm="6">
119-
<widget04 type="google-plus" :dataPoints="[35, 23, 56, 22, 97, 23, 64]"
120-
rightHeader="894" rightFooter="followers" leftHeader="92" leftFooter="circles"/>
152+
<widget04 type='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
153+
<line-chart1 chartId="google-plus" :data='[10, 22, 34, 46, 58, 70, 68, 58, 52, 60, 64, 74]' label='Followers'
154+
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
155+
</widget04>
121156
</b-col>
122157
</b-row><!--/.row-->
123158
<b-col md="12">
@@ -369,6 +404,10 @@ import CalloutChartExample from './dashboard/CalloutChartExample'
369404
import { Callout } from '@coreui/vue'
370405
import Widget04 from './widgets/Widget04'
371406
import Widget06 from './widgets/Widget06'
407+
import LineChart1 from './dashboard/LineChart1'
408+
import LineChart2 from './dashboard/LineChart2'
409+
410+
import BarChart1 from './dashboard/BarChart1'
372411
373412
374413
export default {
@@ -379,7 +418,10 @@ export default {
379418
SocialBoxChartExample,
380419
CalloutChartExample,
381420
Widget04,
382-
Widget06
421+
Widget06,
422+
LineChart1,
423+
LineChart2,
424+
BarChart1
383425
},
384426
data: function () {
385427
return {

0 commit comments

Comments
 (0)