100 lines
2.5 KiB
Vue
100 lines
2.5 KiB
Vue
<script setup>
|
|
import { Flame, MousePointerClick, Users } from 'lucide-vue-next'
|
|
|
|
const defaultData = Object.freeze({
|
|
visits: 0,
|
|
visitors: 0,
|
|
referers: 0,
|
|
})
|
|
|
|
const counters = ref(defaultData)
|
|
|
|
const id = inject('id')
|
|
const startAt = inject('startAt')
|
|
const endAt = inject('endAt')
|
|
|
|
async function getLinkCounters() {
|
|
counters.value = defaultData
|
|
const { data } = await useAPI('/api/stats/counters', {
|
|
query: {
|
|
id: id.value,
|
|
startAt: startAt.value,
|
|
endAt: endAt.value,
|
|
},
|
|
})
|
|
counters.value = data?.[0]
|
|
}
|
|
|
|
const stopWatchTime = watch([startAt, endAt], getLinkCounters)
|
|
|
|
onMounted(async () => {
|
|
getLinkCounters()
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
stopWatchTime()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid gap-4 sm:gap-3 lg:gap-4 sm:grid-cols-3">
|
|
<Card>
|
|
<CardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
|
|
<CardTitle class="text-sm font-medium">
|
|
Visits
|
|
</CardTitle>
|
|
<MousePointerClick class="w-4 h-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div
|
|
class="text-2xl font-bold"
|
|
:class="{ 'blur-lg': !counters.visits }"
|
|
>
|
|
{{ formatNumber(counters.visits) }}
|
|
</div>
|
|
<!-- <p class="text-xs text-muted-foreground">
|
|
+90
|
|
</p> -->
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
|
|
<CardTitle class="text-sm font-medium">
|
|
Visitors
|
|
</CardTitle>
|
|
<Users class="w-4 h-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div
|
|
class="text-2xl font-bold"
|
|
:class="{ 'blur-lg': !counters.visitors }"
|
|
>
|
|
{{ formatNumber(counters.visitors) }}
|
|
</div>
|
|
<!-- <p class="text-xs text-muted-foreground">
|
|
+90
|
|
</p> -->
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
|
|
<CardTitle class="text-sm font-medium">
|
|
Referers
|
|
</CardTitle>
|
|
<Flame class="w-4 h-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div
|
|
class="text-2xl font-bold"
|
|
:class="{ 'blur-lg': !counters.referers }"
|
|
>
|
|
{{ formatNumber(counters.referers) }}
|
|
</div>
|
|
<!-- <p class="text-xs text-muted-foreground">
|
|
-20
|
|
</p> -->
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</template>
|