Skip to content

Commit 2023248

Browse files
woothuwoothu
committed
added widgets from dashboard
1 parent 4741d42 commit 2023248

File tree

4 files changed

+160
-165
lines changed

4 files changed

+160
-165
lines changed

‎src/views/Dashboard.vue

Lines changed: 67 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -2,79 +2,58 @@
22
<div class="animated fadeIn">
33
<b-row>
44
<b-col sm="6" lg="3">
5-
<b-card no-body class="bg-primary">
6-
<b-card-body class="pb-0">
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-
<h4 class="mb-0">9.823</h4>
17-
<p>Members online</p>
18-
</b-card-body>
19-
<card-line1-chart-example chartId="card-chart-01" class="chart-wrapper px-3" style="height:70px;" :height="70"/>
20-
</b-card>
5+
<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>
15+
</widget06>
2116
</b-col>
2217
<b-col sm="6" lg="3">
23-
<b-card no-body class="bg-info">
24-
<b-card-body class="pb-0">
25-
<b-dropdown class="float-right" variant="transparent p-0" right no-caret>
26-
<template slot="button-content">
27-
<i class="icon-location-pin"></i>
28-
</template>
29-
<b-dropdown-item>Action</b-dropdown-item>
30-
<b-dropdown-item>Another action</b-dropdown-item>
31-
<b-dropdown-item>Something else here...</b-dropdown-item>
32-
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
33-
</b-dropdown>
34-
<h4 class="mb-0">9.823</h4>
35-
<p>Members online</p>
36-
</b-card-body>
37-
<card-line2-chart-example chartId="card-chart-02" class="chart-wrapper px-3" style="height:70px;" :height="70"/>
38-
</b-card>
18+
<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>
28+
</widget06>
3929
</b-col>
4030
<b-col sm="6" lg="3">
41-
<b-card no-body class="bg-warning">
42-
<b-card-body class="pb-0">
43-
<b-dropdown class="float-right" variant="transparent p-0" right>
44-
<template slot="button-content">
45-
<i class="icon-settings"></i>
46-
</template>
47-
<b-dropdown-item>Action</b-dropdown-item>
48-
<b-dropdown-item>Another action</b-dropdown-item>
49-
<b-dropdown-item>Something else here...</b-dropdown-item>
50-
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
51-
</b-dropdown>
52-
<h4 class="mb-0">9.823</h4>
53-
<p>Members online</p>
54-
</b-card-body>
55-
<card-line3-chart-example chartId="card-chart-03" class="chart-wrapper" style="height:70px;" height="70"/>
56-
</b-card>
31+
<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>
41+
</widget06>
5742
</b-col>
5843
<b-col sm="6" lg="3">
59-
<b-card no-body class="bg-danger">
60-
<b-card-body class="pb-0">
61-
<b-dropdown class="float-right" variant="transparent p-0" right>
62-
<template slot="button-content">
63-
<i class="icon-settings"></i>
64-
</template>
65-
<b-dropdown-item>Action</b-dropdown-item>
66-
<b-dropdown-item>Another action</b-dropdown-item>
67-
<b-dropdown-item>Something else here...</b-dropdown-item>
68-
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
69-
</b-dropdown>
70-
<h4 class="mb-0">9.823</h4>
71-
<p>Members online</p>
72-
</b-card-body>
73-
<card-bar-chart-example chartId="card-chart-04" class="chart-wrapper px-3" style="height:70px;" height="70"/>
74-
</b-card>
44+
<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>
54+
</widget06>
7555
</b-col>
7656
</b-row>
77-
7857
<b-card>
7958
<b-row>
8059
<b-col sm="5">
@@ -124,88 +103,23 @@
124103
</div>
125104
</b-card>
126105
<b-row>
127-
<b-col sm="6" lg="3">
128-
<div class="brand-card">
129-
<div class="brand-card-header bg-facebook">
130-
<i class="fa fa-facebook"></i>
131-
<div class="chart-wrapper">
132-
<social-box-chart-example chartId="box-chart-01" :data="[65, 59, 84, 84, 51, 55, 40]" />
133-
</div>
134-
</div>
135-
<div class="brand-card-body">
136-
<div>
137-
<div class="text-value">89k</div>
138-
<div class="text-uppercase text-muted small">friends</div>
139-
</div>
140-
<div>
141-
<div class="text-value">459</div>
142-
<div class="text-uppercase text-muted small">feeds</div>
143-
</div>
144-
</div>
145-
</div>
146-
</b-col>
147-
<b-col sm="6" lg="3">
148-
<div class="brand-card">
149-
<div class="brand-card-header bg-twitter">
150-
<i class="fa fa-twitter"></i>
151-
<div class="chart-wrapper">
152-
<social-box-chart-example chartId="box-chart-02" :data="[1, 13, 9, 17, 34, 41, 38]" />
153-
</div>
154-
</div>
155-
<div class="brand-card-body">
156-
<div>
157-
<div class="text-value">973k</div>
158-
<div class="text-uppercase text-muted small">followers</div>
159-
</div>
160-
<div>
161-
<div class="text-value">1.792</div>
162-
<div class="text-uppercase text-muted small">tweets</div>
163-
</div>
164-
</div>
165-
</div>
166-
</b-col>
167-
<b-col sm="6" lg="3">
168-
<div class="brand-card">
169-
<div class="brand-card-header bg-linkedin">
170-
<i class="fa fa-linkedin"></i>
171-
<div class="chart-wrapper">
172-
<social-box-chart-example chartId="box-chart-03" :data="[78, 81, 80, 45, 34, 12, 40]" />
173-
</div>
174-
</div>
175-
<div class="brand-card-body">
176-
<div>
177-
<div class="text-value">500+</div>
178-
<div class="text-uppercase text-muted small">contacts</div>
179-
</div>
180-
<div>
181-
<div class="text-value">292</div>
182-
<div class="text-uppercase text-muted small">feeds</div>
183-
</div>
184-
</div>
185-
</div>
186-
</b-col>
187-
<b-col sm="6" lg="3">
188-
<div class="brand-card">
189-
<div class="brand-card-header bg-google-plus">
190-
<i class="fa fa-google-plus"></i>
191-
<div class="chart-wrapper">
192-
<social-box-chart-example chartId="box-chart-04" :data="[35, 23, 56, 22, 97, 23, 64]" />
193-
</div>
194-
</div>
195-
<div class="brand-card-body">
196-
<div>
197-
<div class="text-value">894</div>
198-
<div class="text-uppercase text-muted small">followers</div>
199-
</div>
200-
<div>
201-
<div class="text-value">92</div>
202-
<div class="text-uppercase text-muted small">circles</div>
203-
</div>
204-
</div>
205-
</div>
206-
</b-col>
207-
</b-row>
208-
<b-row>
106+
<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"/>
109+
</b-col>
110+
<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"/>
113+
</b-col>
114+
<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"/>
117+
</b-col>
118+
<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"/>
121+
</b-col>
122+
</b-row><!--/.row-->
209123
<b-col md="12">
210124
<b-card header="Traffic &amp; Sales">
211125
<b-row>
@@ -449,26 +363,23 @@
449363
</template>
450364

451365
<script>
452-
import CardLine1ChartExample from './dashboard/CardLine1ChartExample'
453-
import CardLine2ChartExample from './dashboard/CardLine2ChartExample'
454-
import CardLine3ChartExample from './dashboard/CardLine3ChartExample'
455-
import CardBarChartExample from './dashboard/CardBarChartExample'
456366
import MainChartExample from './dashboard/MainChartExample'
457367
import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
458368
import CalloutChartExample from './dashboard/CalloutChartExample'
459369
import { Callout } from '@coreui/vue'
370+
import Widget04 from './widgets/Widget04'
371+
import Widget06 from './widgets/Widget06'
372+
460373
461374
export default {
462375
name: 'dashboard',
463376
components: {
464377
Callout,
465-
CardLine1ChartExample,
466-
CardLine2ChartExample,
467-
CardLine3ChartExample,
468-
CardBarChartExample,
469378
MainChartExample,
470379
SocialBoxChartExample,
471-
CalloutChartExample
380+
CalloutChartExample,
381+
Widget04,
382+
Widget06
472383
},
473384
data: function () {
474385
return {

‎src/views/widgets/Widget05.vue

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
2-
<b-card :class="styleClasses">
3-
<div class="h1 text-muted text-right mb-4">
4-
<i :class="iconClasses"></i>
5-
</div>
6-
<div class="h4 mb-0">{{header}}</div>
7-
<small class="text-muted text-uppercase font-weight-bold">{{text}}</small>
8-
<b-progress height={} :variant="variant" :value="value"
9-
:class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
10-
</b-card>
2+
<b-card :class="styleClasses">
3+
<div class="h1 text-muted text-right mb-4">
4+
<i :class="iconClasses"></i>
5+
</div>
6+
<div class="h4 mb-0">{{header}}</div>
7+
<small class="text-muted text-uppercase font-weight-bold">{{text}}</small>
8+
<b-progress height={} :variant="variant" :value="value"
9+
:class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
10+
</b-card>
1111
</template>
1212

1313
<script>

‎src/views/widgets/Widget06.vue

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<b-card no-body :class="cardClasses">
3+
<b-card-body class="pb-0">
4+
<slot></slot>
5+
<h4 class="mb-0">{{header}}</h4>
6+
<p>{{text}}</p>
7+
</b-card-body>
8+
<card-line1-chart-example v-if="chartType == 'chart1'" chartId="card-chart-01" class="chart-wrapper px-3" style="height:70px;" :height="chartHeight"/>
9+
<card-line2-chart-example v-if="chartType == 'chart2'"chartId="card-chart-02" class="chart-wrapper px-3" style="height:70px;" :height="chartHeight"/>
10+
<card-line3-chart-example v-if="chartType == 'chart3'"chartId="card-chart-03" class="chart-wrapper" style="height:70px;" :height="chartHeight"/>
11+
<card-bar-chart-example v-if="chartType == 'chart4'" chartId="card-chart-04" class="chart-wrapper px-3" style="height:70px;" :height="chartHeight"/>
12+
</b-card>
13+
</template>
14+
15+
<script>
16+
import CardLine1ChartExample from './../dashboard/CardLine1ChartExample'
17+
import CardLine2ChartExample from './../dashboard/CardLine2ChartExample'
18+
import CardLine3ChartExample from './../dashboard/CardLine3ChartExample'
19+
import CardBarChartExample from './../dashboard/CardBarChartExample'
20+
21+
export default {
22+
components:{
23+
CardLine1ChartExample,
24+
CardLine2ChartExample,
25+
CardLine3ChartExample,
26+
CardBarChartExample
27+
},
28+
name: 'Widget06',
29+
data () {
30+
return{
31+
backgroundColor: '',
32+
}
33+
},
34+
created () {
35+
},
36+
props: {
37+
cardClasses: {
38+
type: String,
39+
default: ''
40+
},
41+
header: {
42+
type: String,
43+
default: 'header|string'
44+
},
45+
text: {
46+
type: String,
47+
default: 'text|string'
48+
},
49+
chartType:{
50+
type: String,
51+
default: 'chart1'
52+
},
53+
chartHeight:{
54+
type: Number,
55+
default: 70
56+
},
57+
}
58+
}
59+
</script>

‎tests/unit/widgets/Widget06.spec.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import Vue from 'vue'
2+
import { shallowMount } from '@vue/test-utils'
3+
import BootstrapVue from 'bootstrap-vue'
4+
import Component from '@/views/widgets/Widget06'
5+
6+
Vue.use(BootstrapVue)
7+
8+
const ComponentName = 'Widget06'
9+
const wrapper = shallowMount(Component)
10+
11+
describe(ComponentName + '.vue', () => {
12+
it('has a name', () => {
13+
expect(Component.name).toMatch(ComponentName)
14+
})
15+
it('is Vue instance', () => {
16+
expect(wrapper.isVueInstance()).toBe(true)
17+
})
18+
it('correctly sets default props and data when created', () => {
19+
expect(wrapper.props().cardClasses).toBe('')
20+
expect(wrapper.props().header).toBe('header|string')
21+
expect(wrapper.props().text).toBe('text|string')
22+
expect(wrapper.props().chartType).toBe('chart1')
23+
expect(wrapper.props().chartHeight == 70).toBe(true)
24+
})
25+
})

0 commit comments

Comments
 (0)