852755ee1d
Adds real-time visualization of traffic flow between user locations and data centers on the 3D globe: - Implements arc animations for traffic visualization - Adjusts globe colors and atmosphere for better visibility - Adds data center (colo) location mapping - Centers initial view on user's current location - Improves mobile responsiveness and layout - Adds cleanup handling for globe resources Performance and UX improvements: - Optimizes globe rotation speed and controls - Updates time picker layout with logical grouping - Enhances responsive design for dashboard components
52 lines
1.4 KiB
Vue
52 lines
1.4 KiB
Vue
<script setup>
|
|
import NumberFlow from '@number-flow/vue'
|
|
import { MousePointerClick } from 'lucide-vue-next'
|
|
|
|
provide('id', ref())
|
|
|
|
const time = inject('time')
|
|
const filters = inject('filters')
|
|
const stats = ref({ visits: 0 })
|
|
|
|
async function getRealtimeStats() {
|
|
const { data } = await useAPI('/api/stats/counters', {
|
|
query: {
|
|
startAt: time.value.startAt,
|
|
endAt: time.value.endAt,
|
|
...filters.value,
|
|
},
|
|
})
|
|
|
|
stats.value = data?.[0] || {}
|
|
}
|
|
|
|
watch([time, filters], getRealtimeStats, {
|
|
deep: true,
|
|
})
|
|
|
|
onMounted(async () => {
|
|
getRealtimeStats()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Card class="md:w-80 h-72 flex flex-col p-4 md:m-2">
|
|
<div class="h-24">
|
|
<CardHeader class="flex flex-row justify-between items-center pb-2 space-y-0 px-0 pt-2">
|
|
<CardTitle class="text-sm font-medium flex items-center gap-2">
|
|
<span class="size-1.5 inline-flex animate-ping rounded-full bg-green-400 opacity-75" />
|
|
{{ $t('dashboard.visits') }}
|
|
</CardTitle>
|
|
<MousePointerClick class="w-4 h-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent class="px-0 pb-4">
|
|
<NumberFlow class="text-2xl font-bold" :class="{ 'blur-md opacity-60': !stats.visits }" :value="stats.visits" />
|
|
</CardContent>
|
|
</div>
|
|
<DashboardAnalysisViews
|
|
class="w-full h-40 border-none !p-0"
|
|
mode="simple"
|
|
chart-type="bar"
|
|
/>
|
|
</Card>
|
|
</template>
|