DataSection.vue
1.88 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<template>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
<DataSectionItem
v-for="metric in dashboardMetrics"
:key="metric.id"
:title="metric.title"
:value="metric.value"
:change-text="metric.changeText"
:up="metric.changeDirection === 'up'"
:icon-background="metric.iconBackground"
:icon-color="metric.iconColor"
>
<template #icon>
<VaIcon :name="metric.icon" size="large" />
</template>
</DataSectionItem>
</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { useColors } from 'vuestic-ui'
import DataSectionItem from './DataSectionItem.vue'
interface DashboardMetric {
id: string
title: string
value: string
icon: string
changeText: string
changeDirection: 'up' | 'down'
iconBackground: string
iconColor: string
}
const { getColor } = useColors()
const dashboardMetrics = computed<DashboardMetric[]>(() => [
{
id: 'openInvoices',
title: 'Open invoices',
value: '$35,548',
icon: 'mso-attach_money',
changeText: '$1, 450',
changeDirection: 'down',
iconBackground: getColor('success'),
iconColor: getColor('on-success'),
},
{
id: 'ongoingProjects',
title: 'Ongoing project',
value: '15',
icon: 'mso-folder_open',
changeText: '25.36%',
changeDirection: 'up',
iconBackground: getColor('info'),
iconColor: getColor('on-info'),
},
{
id: 'employees',
title: 'Employees',
value: '25',
icon: 'mso-account_circle',
changeText: '2.5%',
changeDirection: 'up',
iconBackground: getColor('danger'),
iconColor: getColor('on-danger'),
},
{
id: 'newProfit',
title: 'New profit',
value: '27%',
icon: 'mso-grade',
changeText: '4%',
changeDirection: 'up',
iconBackground: getColor('warning'),
iconColor: getColor('on-warning'),
},
])
</script>