Skip to content
This repository was archived by the owner on Dec 24, 2021. It is now read-only.

Commit d38cde8

Browse files
woothuwoothu
committed
refactor: clean widgets code duplicated in Dashboard and Widgets views
1 parent eddfdfd commit d38cde8

File tree

5 files changed

+296
-193
lines changed

5 files changed

+296
-193
lines changed

‎src/router/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const Colors = () => import('@/views/theme/Colors')
1111
const Typography = () => import('@/views/theme/Typography')
1212

1313
const Charts = () => import('@/views/Charts')
14-
const Widgets = () => import('@/views/Widgets')
14+
const Widgets = () => import('@/views/widgets/Widgets')
1515

1616
// Views - Components
1717
const Cards = () => import('@/views/base/Cards')

‎src/views/Dashboard.vue

Lines changed: 6 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,6 @@
11
<template>
22
<div class="animated fadeIn">
3-
<CRow>
4-
<CCol sm="6" lg="3">
5-
<CWidget06 header="9.823" text="Members online">
6-
<template slot="dropdown">
7-
<CDropdown class="float-right"
8-
variant="transparent p-0"
9-
right
10-
buttonContent="<i class='icon-settings'></i>"
11-
tag="div"
12-
>
13-
<!-- <template slot="buttonContent">
14-
15-
</template> -->
16-
<CDropdownItem>Action</CDropdownItem>
17-
<CDropdownItem>Another action</CDropdownItem>
18-
<CDropdownItem>Something else here...</CDropdownItem>
19-
<CDropdownItem disabled>Disabled action</CDropdownItem>
20-
</CDropdown>
21-
</template>
22-
<CSimplePointedChart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
23-
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
24-
style='height:70px' label='Members' pointHoverColor='primary'/>
25-
</CWidget06>
26-
</CCol>
27-
<CCol sm="6" lg="3">
28-
<CWidget06 variant="info" header="9.823" text="Members online">
29-
<CDropdown slot="dropdown"
30-
class="float-right"
31-
variant="transparent p-0"
32-
right
33-
no-caret
34-
buttonContent="<i class='icon-___location-pin'></i>"
35-
tag="div"
36-
>
37-
<!-- <i slot="buttonContent"
38-
class="icon-___location-pin"
39-
></i> -->
40-
<CDropdownItem>Action</CDropdownItem>
41-
<CDropdownItem>Another action</CDropdownItem>
42-
<CDropdownItem>Something else here...</CDropdownItem>
43-
<CDropdownItem disabled>Disabled action</CDropdownItem>
44-
</CDropdown>
45-
<CSimplePointedChart class="px-3"
46-
:data="[1, 18, 9, 17, 34, 22, 11]"
47-
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
48-
style="height:70px"
49-
label="Members"
50-
:options="{ elements: { line: { tension: 0.00001 }}}"
51-
pointHoverColor="info"
52-
/>
53-
</CWidget06>
54-
</CCol>
55-
<CCol sm="6" lg="3">
56-
<CWidget06 variant="warning" header="9.823" text="Members online">
57-
<template slot='dropdown'>
58-
<CDropdown class="float-right"
59-
variant="transparent p-0"
60-
right
61-
buttonContent="<i class='icon-settings'></i>"
62-
tag="div"
63-
>
64-
65-
<CDropdownItem>Action</CDropdownItem>
66-
<CDropdownItem>Another action</CDropdownItem>
67-
<CDropdownItem>Something else here...</CDropdownItem>
68-
<CDropdownItem disabled>Disabled action</CDropdownItem>
69-
</CDropdown>
70-
</template>
71-
<CSimpleLineChart chartId="CWidget06_3" :data='[78, 81, 80, 45, 34, 12, 40]'
72-
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
73-
style='height:70px' color ='rgba(255,255,255,.2)' label='Members'
74-
:options="{elements: {line: {borderWidth: 2.5}}}" pointHoverColor='warning'/>
75-
</CWidget06>
76-
</CCol>
77-
<CCol sm="6" lg="3">
78-
<CWidget06 variant="danger" header="9.823" text="Members online">
79-
<template slot="dropdown">
80-
<CDropdown class="float-right"
81-
variant="transparent p-0"
82-
right
83-
buttonContent="<i class='icon-settings'></i>"
84-
>
85-
<!-- <template slot="buttonContent">
86-
<i class="icon-settings"></i>
87-
</template> -->
88-
<CDropdownItem>Action</CDropdownItem>
89-
<CDropdownItem>Another action</CDropdownItem>
90-
<CDropdownItem>Something else here...</CDropdownItem>
91-
<CDropdownItem disabled>Disabled action</CDropdownItem>
92-
</CDropdown>
93-
</template>
94-
<CSimpleBarChart chartId="CWidget06_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
95-
label='Members' color='rgb(250, 152, 152)' style='height:70px' />
96-
</CWidget06>
97-
</CCol>
98-
</CRow>
99-
3+
<Widgets06/>
1004
<CCard>
1015
<CCardBody>
1026
<CRow>
@@ -151,36 +55,7 @@
15155
</CRow>
15256
</CCardFooter>
15357
</CCard>
154-
<CRow>
155-
<CCol md="3" sm="6">
156-
<CWidget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
157-
<CSimpleLineChart :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
158-
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
159-
style='height:100px' color='rgba(255,255,255,.1)'/>
160-
</CWidget04>
161-
</CCol>
162-
<CCol md="3" sm="6">
163-
<CWidget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
164-
<CSimpleLineChart :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
165-
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
166-
style='height:100px' color='rgba(255,255,255,.1)'/>
167-
</CWidget04>
168-
</CCol>
169-
<CCol md="3" sm="6">
170-
<CWidget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
171-
<CSimpleLineChart :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
172-
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
173-
style='height:100px' color='rgba(255,255,255,.1)'/>
174-
</CWidget04>
175-
</CCol>
176-
<CCol md="3" sm="6">
177-
<CWidget04 variant='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
178-
<CSimpleLineChart :data='[35, 23, 56, 22, 97, 23, 64]' label='Followers'
179-
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
180-
style='height:100px' color='rgba(255,255,255,.1)'/>
181-
</CWidget04>
182-
</CCol>
183-
</CRow><!--/.row-->
58+
<Widgets04/>
18459
<CRow>
18560
<CCol md="12">
18661
<CCard header="Traffic &amp; Sales" bodyWrapper>
@@ -459,6 +334,8 @@
459334

460335
<script>
461336
import MainChartExample from './dashboard/MainChartExample'
337+
import Widgets06 from './widgets/Widgets06'
338+
import Widgets04 from './widgets/Widgets04'
462339
import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
463340
import CalloutChartExample from './dashboard/CalloutChartExample'
464341
@@ -468,6 +345,8 @@ export default {
468345
MainChartExample,
469346
SocialBoxChartExample,
470347
CalloutChartExample,
348+
Widgets06,
349+
Widgets04
471350
},
472351
data: function () {
473352
return {

‎src/views/Widgets.vue renamed to ‎src/views/widgets/Widgets.vue

Lines changed: 33 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -91,58 +91,8 @@
9191
</CCol>
9292

9393
</CRow><!--/.row-->
94-
<CRow>
95-
<CCol md="3" sm="6">
96-
<CWidget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
97-
</CCol>
98-
<CCol md="3" sm="6">
99-
<CWidget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
100-
</CCol>
101-
<CCol md="3" sm="6">
102-
<CWidget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
103-
</CCol>
104-
<CCol md="3" sm="6" class="codeContainer">
105-
<CWidget04 variant='warning' rightHeader='0:57' rightFooter='time' leftHeader='17' leftFooter='percentage'>
106-
<i slot="icon" class="fa fa-battery-1"></i>
107-
</CWidget04>
108-
</CCol>
109-
</CRow><!--/.row-->
110-
<CRow>
111-
<CCol md="3" sm="6">
112-
<CWidget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
113-
<CSimpleLineChart chartId="facebook" :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
114-
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
115-
style='height:100px' color='rgba(255,255,255,.1)'/>
116-
</CWidget04>
117-
</CCol>
118-
<CCol md="3" sm="6">
119-
<CWidget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
120-
<CSimpleLineChart chartId="twitter" :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
121-
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
122-
style='height:100px' color='rgba(255,255,255,.1)'/>
123-
</CWidget04>
124-
</CCol>
125-
<CCol md="3" sm="6">
126-
<CWidget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
127-
<CSimpleLineChart chartId="linkedIn" :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
128-
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
129-
style='height:100px' color='rgba(255,255,255,.1)'/>
130-
</CWidget04>
131-
</CCol>
132-
<CCol md="3" sm="6">
133-
<CWidget04 variant='google-plus'
134-
rightHeader='894'
135-
rightFooter='followers'
136-
leftHeader='92' leftFooter='circles'>
137-
<CSimpleLineChart chartId="google-plus"
138-
:data='[35, 23, 56, 22, 97, 23, 64]'
139-
label='Followers'
140-
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
141-
style='height:100px'
142-
color='rgba(255,255,255,.1)'/>
143-
</CWidget04>
144-
</CCol>
145-
</CRow><!--/.row-->
94+
<Widgets04 noCharts/>
95+
<Widgets04/>
14696
<CCardGroup class="mb-4">
14797
<CWidget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
14898
<CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
@@ -202,9 +152,13 @@
202152
<CRow>
203153
<CCol sm="6" lg="3">
204154
<CWidget06 header="9.823" text="Members online">
205-
<template slot='dropdown'>
206-
<CDropdown class="float-right" variant="transparent p-0" right>
207-
<template slot="buttonContent">
155+
<template #dropdown>
156+
<CDropdown
157+
class="float-right"
158+
variant="transparent p-0"
159+
placement="bottom-end"
160+
>
161+
<template #buttonContent>
208162
<i class="icon-settings"></i>
209163
</template>
210164
<CDropdownItem>Action</CDropdownItem>
@@ -219,16 +173,26 @@
219173
</CWidget06>
220174
</CCol>
221175
<CCol sm="6" lg="3">
222-
<CWidget06 variant="info" header="9.823" text="Members online">
223-
<CDropdown slot="dropdown" class="float-right" variant="transparent p-0" right no-caret>
224-
<i slot="buttonContent"
225-
class="icon-___location-pin"
226-
></i>
227-
<CDropdownItem>Action</CDropdownItem>
228-
<CDropdownItem>Another action</CDropdownItem>
229-
<CDropdownItem>Something else here...</CDropdownItem>
230-
<CDropdownItem disabled>Disabled action</CDropdownItem>
231-
</CDropdown>
176+
<CWidget06
177+
variant="info"
178+
header="9.823"
179+
text="Members online"
180+
>
181+
<template #dropdown>
182+
<CDropdown
183+
class="float-right"
184+
variant="transparent p-0"
185+
right no-caret>
186+
<i slot="buttonContent"
187+
class="icon-___location-pin"
188+
></i>
189+
<CDropdownItem>Action</CDropdownItem>
190+
<CDropdownItem>Another action</CDropdownItem>
191+
<CDropdownItem>Something else here...</CDropdownItem>
192+
<CDropdownItem disabled>Disabled action</CDropdownItem>
193+
</CDropdown>
194+
</template>
195+
232196
<CSimplePointedChart class="px-3"
233197
:data="[1, 18, 9, 17, 34, 22, 11]"
234198
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
@@ -350,7 +314,11 @@
350314
</template>
351315

352316
<script>
317+
import Widgets04 from './Widgets04'
353318
export default {
354319
name: 'Widgets',
320+
components: {
321+
Widgets04
322+
}
355323
}
356324
</script>

0 commit comments

Comments
 (0)