Skip to content

Commit dbe35e8

Browse files
mrholekmrholek
committed
refactor: update example views
1 parent aaafb7a commit dbe35e8

File tree

5 files changed

+218
-331
lines changed

5 files changed

+218
-331
lines changed

‎src/assets/icons/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
cibTumblr,
77
cibXing,
88
cibGithub,
9+
cibGoogle,
910
cibStackoverflow,
1011
cibYoutube,
1112
cibDribbble,
@@ -147,6 +148,7 @@ export const iconsSet = Object.assign(
147148
cibTumblr,
148149
cibXing,
149150
cibGithub,
151+
cibGoogle,
150152
cibStackoverflow,
151153
cibYoutube,
152154
cibDribbble,

‎src/views/Dashboard.vue

+48-136
Original file line numberDiff line numberDiff line change
@@ -128,67 +128,13 @@
128128
</CCol>
129129
</CRow>
130130
<hr class="mt-0" />
131-
<div class="progress-group mb-4">
131+
<div class="progress-group mb-4" v-for="item in progressGroupExample1" :key="item.title">
132132
<div class="progress-group-prepend">
133-
<span class="progress-group-text"> Monday </span>
133+
<span class="text-medium-emphasis small">{{item.title}}</span>
134134
</div>
135135
<div class="progress-group-bars">
136-
<CProgress thin color="info" :value="34" />
137-
<CProgress thin color="danger" :value="78" />
138-
</div>
139-
</div>
140-
<div class="progress-group mb-4">
141-
<div class="progress-group-prepend">
142-
<span class="progress-group-text"> Tuesday </span>
143-
</div>
144-
<div class="progress-group-bars">
145-
<CProgress thin :value="56" color="info" />
146-
<CProgress thin :value="94" color="danger" />
147-
</div>
148-
</div>
149-
<div class="progress-group mb-4">
150-
<div class="progress-group-prepend">
151-
<span class="progress-group-text"> Wednesday </span>
152-
</div>
153-
<div class="progress-group-bars">
154-
<CProgress thin :value="12" color="info" />
155-
<CProgress thin :value="67" color="danger" />
156-
</div>
157-
</div>
158-
<div class="progress-group mb-4">
159-
<div class="progress-group-prepend">
160-
<span class="progress-group-text"> Thursday </span>
161-
</div>
162-
<div class="progress-group-bars">
163-
<CProgress thin :value="43" color="info" />
164-
<CProgress thin :value="91" color="danger" />
165-
</div>
166-
</div>
167-
<div class="progress-group mb-4">
168-
<div class="progress-group-prepend">
169-
<span class="progress-group-text"> Friday </span>
170-
</div>
171-
<div class="progress-group-bars">
172-
<CProgress thin :value="22" color="info" />
173-
<CProgress thin :value="73" color="danger" />
174-
</div>
175-
</div>
176-
<div class="progress-group mb-4">
177-
<div class="progress-group-prepend">
178-
<span class="progress-group-text"> Saturday </span>
179-
</div>
180-
<div class="progress-group-bars">
181-
<CProgress thin :value="53" color="info" />
182-
<CProgress thin :value="82" color="danger" />
183-
</div>
184-
</div>
185-
<div class="progress-group mb-4">
186-
<div class="progress-group-prepend">
187-
<span class="progress-group-text"> Sunday </span>
188-
</div>
189-
<div class="progress-group-bars">
190-
<CProgress thin :value="9" color="info" />
191-
<CProgress thin :value="69" color="danger" />
136+
<CProgress thin color="info" :value="item.value1" />
137+
<CProgress thin color="danger" :value="item.value2" />
192138
</div>
193139
</div>
194140
</CCol>
@@ -222,91 +168,30 @@
222168
</CCol>
223169
</CRow>
224170
<hr class="mt-0" />
225-
<div class="progress-group">
226-
<div class="progress-group-header">
227-
<CIcon icon="cil-user" class="me-2" size="lg" />
228-
<span class="title">Male</span>
229-
<span class="ms-auto font-weight-bold">43%</span>
230-
</div>
231-
<div class="progress-group-bars">
232-
<CProgress thin :value="43" color="warning" />
233-
</div>
234-
</div>
235-
<div class="progress-group mb-5">
171+
<div class="progress-group" v-for="item in progressGroupExample2" :key="item.title">
236172
<div class="progress-group-header">
237-
<CIcon icon="cil-user-female" class="me-2" size="lg" />
238-
<span class="title">Female</span>
239-
<span class="ms-auto font-weight-bold">37%</span>
173+
<CIcon :icon="item.icon" class="me-2" size="lg" />
174+
<span class="title">{{item.title}}</span>
175+
<span class="ms-auto fw-semibold">{{item.value}}%</span>
240176
</div>
241177
<div class="progress-group-bars">
242-
<CProgress thin :value="37" color="warning" />
178+
<CProgress thin :value="item.value" color="warning" />
243179
</div>
244180
</div>
245-
<div class="progress-group">
181+
182+
<div class="mb-5"></div>
183+
184+
<div class="progress-group" v-for="item in progressGroupExample3" :key="item.title">
246185
<div class="progress-group-header">
247-
<CIcon icon="cil-globe-alt" class="me-2" size="lg" />
186+
<CIcon :icon="item.icon" class="me-2" size="lg" />
248187
<span class="title">Organic Search</span>
249-
<span class="ms-auto font-weight-bold">
250-
191,235
251-
<span class="text-medium-emphasis small">(56%)</span>
188+
<span class="ms-auto fw-semibold">
189+
{{item.value}}
190+
<span class="text-medium-emphasis small">({{item.percent}}%)</span>
252191
</span>
253192
</div>
254193
<div class="progress-group-bars">
255-
<CProgress thin :value="56" color="success" />
256-
</div>
257-
</div>
258-
<div class="progress-group">
259-
<div class="progress-group-header">
260-
<CIcon
261-
icon="cib-facebook"
262-
height="17"
263-
class="me-2"
264-
size="lg"
265-
/>
266-
<span class="title">Facebook</span>
267-
<span class="ms-auto font-weight-bold">
268-
51,223
269-
<span class="text-medium-emphasis small">(15%)</span>
270-
</span>
271-
</div>
272-
<div class="progress-group-bars">
273-
<CProgress thin :value="15" color="success" />
274-
</div>
275-
</div>
276-
<div class="progress-group">
277-
<div class="progress-group-header">
278-
<CIcon
279-
icon="cib-twitter"
280-
height="17"
281-
class="me-2"
282-
size="lg"
283-
/>
284-
<span class="title">Twitter</span>
285-
<span class="ms-auto font-weight-bold">
286-
37,564
287-
<span class="text-medium-emphasis small">(11%)</span>
288-
</span>
289-
</div>
290-
<div class="progress-group-bars">
291-
<CProgress thin :value="11" color="success" />
292-
</div>
293-
</div>
294-
<div class="progress-group">
295-
<div class="progress-group-header">
296-
<CIcon
297-
icon="cib-linkedin"
298-
height="17"
299-
class="me-2"
300-
size="lg"
301-
/>
302-
<span class="title">LinkedIn</span>
303-
<span class="ms-auto font-weight-bold">
304-
27,319
305-
<span class="text-medium-emphasis small">&nbsp;(8%)</span>
306-
</span>
307-
</div>
308-
<div class="progress-group-bars">
309-
<CProgress thin :value="8" color="success" />
194+
<CProgress thin :value="item.percent" color="success" />
310195
</div>
311196
</div>
312197
</CCol>
@@ -330,7 +215,7 @@
330215
</CTableRow>
331216
</CTableHead>
332217
<CTableBody>
333-
<CTableRow v-for="item in tableItems" :key="item.name">
218+
<CTableRow v-for="item in tableExample" :key="item.name">
334219
<CTableDataCell class="text-center">
335220
<CAvatar
336221
size="md"
@@ -406,7 +291,31 @@ export default {
406291
WidgetsStatsD,
407292
},
408293
setup() {
409-
const tableItems = [
294+
const progressGroupExample1 = [
295+
{ title: 'Monday', value1: 34, value2: 78 },
296+
{ title: 'Tuesday', value1: 56, value2: 94 },
297+
{ title: 'Wednesday', value1: 12, value2: 67 },
298+
{ title: 'Thursday', value1: 43, value2: 91 },
299+
{ title: 'Friday', value1: 22, value2: 73 },
300+
{ title: 'Saturday', value1: 53, value2: 82 },
301+
{ title: 'Sunday', value1: 9, value2: 69 },
302+
]
303+
const progressGroupExample2 = [
304+
{ title: 'Male', icon: 'cil-user', value: 53 },
305+
{ title: 'Female', icon: 'cil-user-female', value: 43 },
306+
]
307+
const progressGroupExample3 = [
308+
{
309+
title: 'Organic Search',
310+
icon: 'cib-google',
311+
percent: 56,
312+
value: '191,235',
313+
},
314+
{ title: 'Facebook', icon: 'cib-facebook', percent: 15, value: '51,223' },
315+
{ title: 'Twitter', icon: 'cib-twitter', percent: 11, value: '37,564' },
316+
{ title: 'LinkedIn', icon: 'cib-linkedin', percent: 8, value: '27,319' },
317+
]
318+
const tableExample = [
410319
{
411320
avatar: { src: avatar1, status: 'success' },
412321
user: {
@@ -498,7 +407,10 @@ export default {
498407
]
499408
500409
return {
501-
tableItems,
410+
tableExample,
411+
progressGroupExample1,
412+
progressGroupExample2,
413+
progressGroupExample3,
502414
}
503415
},
504416
}

0 commit comments

Comments
 (0)