RegionRevenue.vue
2.21 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
81
82
83
84
85
86
87
88
89
90
91
92
<template>
<VaCard>
<VaCardTitle class="flex justify-between">
<h1 class="card-title text-secondary font-bold uppercase">Revenue by Top Regions</h1>
</VaCardTitle>
<VaCardContent class="flex flex-col gap-1">
<div class="flex justify-between">
<VaButtonToggle v-model="selectedPeriod" :options="periods" color="background-element" size="small" />
<VaButton preset="primary" size="small" @click="exportAsCSV"> Export </VaButton>
</div>
<VaDataTable
class="region-revenue-table"
:columns="[
{ key: 'name', label: 'Top Region' },
{ key: 'revenue', label: 'Revenue', align: 'right' },
]"
:items="data"
>
<template #cell(revenue)="{ rowData }"> ${{ rowData[`revenue${selectedPeriod}`] }} </template>
</VaDataTable>
</VaCardContent>
</VaCard>
</template>
<script setup lang="ts">
import { ref, Ref } from 'vue'
import { downloadAsCSV } from '../../../../services/toCSV'
const selectedPeriod = ref('Today') as Ref<'Today' | 'Week' | 'Month'>
const periods = ['Today', 'Week', 'Month'].map((period) => ({ label: period, value: period }))
const data = [
{
name: 'Japan',
revenueToday: '4,748,454',
revenueWeek: '30,000,000',
revenueMonth: '120,000,000',
},
{
name: 'United Kingdom',
revenueToday: '405,748',
revenueWeek: '2,500,000',
revenueMonth: '10,000,000',
},
{
name: 'United States',
revenueToday: '308,536',
revenueWeek: '1,800,000',
revenueMonth: '8,000,000',
},
{
name: 'China',
revenueToday: '250,963',
revenueWeek: '1,600,000',
revenueMonth: '7,000,000',
},
{
name: 'Canada',
revenueToday: '29,415',
revenueWeek: '180,000',
revenueMonth: '800,000',
},
{
name: 'Australia',
revenueToday: '15,000',
revenueWeek: '100,000',
revenueMonth: '500,000',
},
{
name: 'India',
revenueToday: '10,000',
revenueWeek: '50,000',
revenueMonth: '200,000',
},
]
const exportAsCSV = () => {
downloadAsCSV(data, 'region-revenue')
}
</script>
<style lang="scss" scoped>
.region-revenue-table {
::v-deep(tbody) {
tr {
border-top: 1px solid var(--va-background-border);
}
}
}
</style>