fix: clean up globe arcs and prevent empty stats display

- Adds cleanup timer for globe arcs to prevent accumulation
- Conditionally renders chart header when stats are available
- Improves event handling in AnimatedList by passing props
- Fixes traffic event animation by clearing previous timeouts

These changes improve visualization performance and user experience by preventing memory leaks from accumulated arcs and ensuring smoother animations.

app/components/dashboard/realtime/Chart.vue

@@ -32,7 +32,7 @@ onMounted(async () => {
 <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">
+      <CardHeader v-if="stats.visits" 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') }}

app/components/dashboard/realtime/Globe.vue

@@ -66,7 +66,9 @@ async function getLiveLocations() {
   }))
 }
 
-function trafficEvent({ props }) {
+let cleanArcsDataTimer = null
+
+function trafficEvent({ props }, { delay = 0 }) {
   const arc = {
     startLat: props.item.latitude,
     startLng: props.item.longitude,
@@ -82,6 +84,11 @@ function trafficEvent({ props }) {
     .arcDashLength(() => random + 0.2)
     .arcDashGap(() => random - 0.2)
     .arcDashAnimateTime(2000)
+
+  clearTimeout(cleanArcsDataTimer)
+  cleanArcsDataTimer = setTimeout(() => {
+    globe.arcsData([])
+  }, delay + 100)
 }
 
 const normalized = 5 / props.minutes

app/components/dashboard/realtime/Logs.vue

@@ -27,8 +27,8 @@ onMounted(async () => {
   getEvents()
 })
 
-function onUpdateItems(items) {
-  globalTrafficEvent.emit(items)
+function onUpdateItems(...args) {
+  globalTrafficEvent.emit(...args)
 }
 </script>
 

app/components/spark-ui/AnimatedList.vue

@@ -22,7 +22,7 @@ const itemsToShow = computed(() => {
 })
 
 watch([itemsToShow], () => {
-  emit('update:items', itemsToShow.value.at(-1))
+  emit('update:items', itemsToShow.value.at(-1), props)
 })
 
 async function loadComponents() {

server/api/logs/events.ts

@@ -29,6 +29,7 @@ function events2logs(events: WAEEvents[]) {
     return {
       ...blobs2logs(blobs),
       ...doubles2logs(doubles),
+      ip: undefined,
       id: crypto.randomUUID(),
       timestamp: date2unix(new Date(`${event.timestamp}Z`)),
     }