97 lines
2.2 KiB
Vue
97 lines
2.2 KiB
Vue
<template>
|
|
<v-container>
|
|
<v-menu
|
|
v-model="menu"
|
|
:close-on-content-click="false"
|
|
transition="scale-transition"
|
|
offset-y
|
|
min-width="100px"
|
|
>
|
|
<template #activator="{ on, attrs }">
|
|
<v-text-field
|
|
v-model="dateRangeText"
|
|
label="Date Range"
|
|
persistent-hint
|
|
prepend-icon="mdi-calendar"
|
|
readonly
|
|
v-bind="attrs"
|
|
v-on="on"
|
|
></v-text-field>
|
|
</template>
|
|
<v-date-picker
|
|
v-model="dates"
|
|
range
|
|
no-title
|
|
@input="menu = false"
|
|
></v-date-picker>
|
|
</v-menu>
|
|
<v-row class="d-flex justify-space-beetween">
|
|
<v-col cols="12" md="6" lg="6">
|
|
<line-chart chart-title="New Registrations" :chart-data="regCount" />
|
|
</v-col>
|
|
<v-col cols="12" md="6" lg="6">
|
|
<line-chart chart-title="Transactions Count" :chart-data="txCount" />
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
import LineChart from '~/components/charts/LineChart.vue'
|
|
|
|
export default {
|
|
name: 'IndexPage',
|
|
components: {
|
|
LineChart,
|
|
},
|
|
async asyncData({ $axios }) {
|
|
const dateToday = new Date()
|
|
const dateStart = new Date(dateToday.getFullYear(), dateToday.getMonth(), 1)
|
|
|
|
const start = dateStart.toISOString().split('T')[0]
|
|
const end = dateToday.toISOString().split('T')[0]
|
|
|
|
const [regCount, txCount] = await Promise.all([
|
|
$axios.get(`/new-registrations?from=${start}&to=${end}`),
|
|
$axios.get(`/transactions-count?from=${start}&to=${end}`),
|
|
])
|
|
|
|
return {
|
|
regCount: regCount.data,
|
|
txCount: txCount.data,
|
|
dates: [start, end],
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
menu: false,
|
|
}
|
|
},
|
|
computed: {
|
|
dateRangeText() {
|
|
return this.dates.join(' ~ ')
|
|
},
|
|
},
|
|
watch: {
|
|
date(val) {
|
|
this.dateFormatted = this.formatDate(this.date)
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
formatDate(date) {
|
|
if (!date) return null
|
|
|
|
const [year, month, day] = date.split('-')
|
|
return `${month}/${day}/${year}`
|
|
},
|
|
parseDate(date) {
|
|
if (!date) return null
|
|
|
|
const [month, day, year] = date.split('/')
|
|
return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
|
|
},
|
|
},
|
|
}
|
|
</script>
|