From b214c7f613ce65253bf025b4539c262962801e65 Mon Sep 17 00:00:00 2001
From: Emily <adharaultimasheireen@gmail.com>
Date: Tue, 2 Jul 2024 20:26:25 +0200
Subject: [PATCH] add lazy load to dashboard

---
 dashboard/components/dashboard/BrowsersBarCard.vue    |  5 ++++-
 dashboard/components/dashboard/DevicesBarCard.vue     |  5 ++++-
 dashboard/components/dashboard/EventsBarCard.vue      | 10 +++++++---
 dashboard/components/dashboard/GeolocationBarCard.vue |  5 ++++-
 dashboard/components/dashboard/OssBarCard.vue         |  5 ++++-
 dashboard/components/dashboard/ReferrersBarCard.vue   |  5 ++++-
 dashboard/components/dashboard/TopCards.vue           |  2 +-
 dashboard/composables/useDataService.ts               |  9 +++++++--
 dashboard/pages/index.vue                             |  3 ++-
 9 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/dashboard/components/dashboard/BrowsersBarCard.vue b/dashboard/components/dashboard/BrowsersBarCard.vue
index ae7c9f2..90f7247 100644
--- a/dashboard/components/dashboard/BrowsersBarCard.vue
+++ b/dashboard/components/dashboard/BrowsersBarCard.vue
@@ -3,7 +3,10 @@
 import type { BrowsersAggregated } from '~/server/api/metrics/[project_id]/data/browsers';
 
 const activeProject = await useActiveProject();
-const { data: events, pending, refresh } = await useFetch<BrowsersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/browsers`, signHeaders());
+const { data: events, pending, refresh } = await useFetch<BrowsersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/browsers`, {
+    ...signHeaders(),
+    lazy: true
+});
 
 
 const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
diff --git a/dashboard/components/dashboard/DevicesBarCard.vue b/dashboard/components/dashboard/DevicesBarCard.vue
index a591d32..a6b8e99 100644
--- a/dashboard/components/dashboard/DevicesBarCard.vue
+++ b/dashboard/components/dashboard/DevicesBarCard.vue
@@ -3,7 +3,10 @@
 import type { DevicesAggregated } from '~/server/api/metrics/[project_id]/data/devices';
 
 const activeProject = await useActiveProject();
-const { data: events, pending, refresh } = await useFetch<DevicesAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/devices`, signHeaders());
+const { data: events, pending, refresh } = await useFetch<DevicesAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/devices`, {
+    ...signHeaders(),
+    lazy: true
+});
 
 
 const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
diff --git a/dashboard/components/dashboard/EventsBarCard.vue b/dashboard/components/dashboard/EventsBarCard.vue
index c2dcecd..3540d0b 100644
--- a/dashboard/components/dashboard/EventsBarCard.vue
+++ b/dashboard/components/dashboard/EventsBarCard.vue
@@ -3,7 +3,10 @@
 import type { CustomEventsAggregated } from '~/server/api/metrics/[project_id]/visits/events';
 
 const activeProject = await useActiveProject();
-const { data: events, pending, refresh } = await useFetch<CustomEventsAggregated[]>(`/api/metrics/${activeProject.value?._id}/visits/events`, signHeaders());
+const { data: events, pending, refresh } = await useFetch<CustomEventsAggregated[]>(`/api/metrics/${activeProject.value?._id}/visits/events`, {
+    ...signHeaders(),
+    lazy: true
+});
 
 const router = useRouter();
 
@@ -35,7 +38,8 @@ function showMore() {
 
 <template>
     <div class="flex flex-col gap-2 h-full">
-        <DashboardBarsCard  @showMore="showMore()" @showRawData="goToView()" desc="Most frequent user events triggered in this project" @dataReload="refresh" :data="events || []" :loading="pending" label="Top Events"
-            sub-label="Events" :rawButton="!isLiveDemo()"></DashboardBarsCard>
+        <DashboardBarsCard @showMore="showMore()" @showRawData="goToView()"
+            desc="Most frequent user events triggered in this project" @dataReload="refresh" :data="events || []"
+            :loading="pending" label="Top Events" sub-label="Events" :rawButton="!isLiveDemo()"></DashboardBarsCard>
     </div>
 </template>
diff --git a/dashboard/components/dashboard/GeolocationBarCard.vue b/dashboard/components/dashboard/GeolocationBarCard.vue
index 596143c..b22778d 100644
--- a/dashboard/components/dashboard/GeolocationBarCard.vue
+++ b/dashboard/components/dashboard/GeolocationBarCard.vue
@@ -4,7 +4,10 @@ import type { CountriesAggregated } from '~/server/api/metrics/[project_id]/data
 import type { IconProvider } from './BarsCard.vue';
 
 const activeProject = await useActiveProject();
-const { data: countries, pending, refresh } = await useFetch<CountriesAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/countries`, signHeaders());
+const { data: countries, pending, refresh } = await useFetch<CountriesAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/countries`, {
+    ...signHeaders(),    
+    lazy: true
+});
 
 function iconProvider(id: string): ReturnType<IconProvider> {
     if (id === 'self') return ['icon', 'fas fa-link'];
diff --git a/dashboard/components/dashboard/OssBarCard.vue b/dashboard/components/dashboard/OssBarCard.vue
index 5dc423f..d5699be 100644
--- a/dashboard/components/dashboard/OssBarCard.vue
+++ b/dashboard/components/dashboard/OssBarCard.vue
@@ -3,7 +3,10 @@
 import type { OssAggregated } from '~/server/api/metrics/[project_id]/data/oss';
 
 const activeProject = await useActiveProject();
-const { data: events, pending, refresh } = await useFetch<OssAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/oss`, signHeaders());
+const { data: events, pending, refresh } = await useFetch<OssAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/oss`, {
+    ...signHeaders(),
+    lazy: true
+});
 
 
 const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
diff --git a/dashboard/components/dashboard/ReferrersBarCard.vue b/dashboard/components/dashboard/ReferrersBarCard.vue
index 01e54f6..852c948 100644
--- a/dashboard/components/dashboard/ReferrersBarCard.vue
+++ b/dashboard/components/dashboard/ReferrersBarCard.vue
@@ -5,7 +5,10 @@ import type { IconProvider } from './BarsCard.vue';
 import ReferrerBarChart from '../referrer/ReferrerBarChart.vue';
 
 const activeProject = await useActiveProject();
-const { data: events, pending, refresh } = await useFetch<ReferrersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/referrers`, signHeaders());
+const { data: events, pending, refresh } = await useFetch<ReferrersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/referrers`, {
+    ...signHeaders(),
+    lazy: true
+});
 
 
 function iconProvider(id: string): ReturnType<IconProvider> {
diff --git a/dashboard/components/dashboard/TopCards.vue b/dashboard/components/dashboard/TopCards.vue
index 7810e6b..815c8f8 100644
--- a/dashboard/components/dashboard/TopCards.vue
+++ b/dashboard/components/dashboard/TopCards.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { MetricsTimeline } from '~/server/api/metrics/[project_id]/timeline/generic';
+
 import DateService from '@services/DateService';
 
 const { data: metricsInfo } = useMetricsData();
diff --git a/dashboard/composables/useDataService.ts b/dashboard/composables/useDataService.ts
index 70cab14..fdd816e 100644
--- a/dashboard/composables/useDataService.ts
+++ b/dashboard/composables/useDataService.ts
@@ -6,7 +6,10 @@ import type { MetricsTimeline } from "~/server/api/metrics/[project_id]/timeline
 
 export function useMetricsData() {
     const activeProject = useActiveProject();
-    const metricsInfo = useFetch<MetricsCounts>(`/api/metrics/${activeProject.value?._id}/counts`, signHeaders());
+    const metricsInfo = useFetch<MetricsCounts>(`/api/metrics/${activeProject.value?._id}/counts`, {
+        ...signHeaders(),
+        lazy: true
+    });
     return metricsInfo;
 }
 
@@ -55,7 +58,7 @@ export async function useTimelineDataRaw(timelineEndpointName: string, slice: Sl
         `/api/metrics/${activeProject.value?._id}/timeline/${timelineEndpointName}`, {
         method: 'POST',
         ...signHeaders({ 'Content-Type': 'application/json' }),
-        body: JSON.stringify({ slice })
+        body: JSON.stringify({ slice }),
     });
 
     return response;
@@ -77,6 +80,7 @@ export function usePagesData(website: string, limit: number = 10) {
             'x-website-name': website
         }),
         key: `pages_data:${website}:${limit}`,
+        lazy: true
     });
 
     return res;
@@ -88,6 +92,7 @@ export function useWebsitesData(limit: number = 10) {
     const res = useFetch<VisitsWebsiteAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/websites`, {
         ...signHeaders({ 'x-query-limit': limit.toString() }),
         key: `websites_data:${limit}`,
+        lazy: true
     });
     return res;
 }
diff --git a/dashboard/pages/index.vue b/dashboard/pages/index.vue
index 6e0eaee..2f6099c 100644
--- a/dashboard/pages/index.vue
+++ b/dashboard/pages/index.vue
@@ -131,6 +131,7 @@ const selectLabels = [
                 </div>
             </div>
 
+      
             <div class="flex w-full justify-center mt-6 px-6">
                 <div class="flex w-full gap-6 flex-col xl:flex-row">
                     <div class="flex-1">
@@ -161,7 +162,7 @@ const selectLabels = [
                     <div class="flex-1">
                     </div>
                 </div>
-            </div>
+            </div> 
 
         </div>