From fc78b3bb43f492d2a7fba855cc235b07854e78fb Mon Sep 17 00:00:00 2001
From: Emily <adharaultimasheireen@gmail.com>
Date: Fri, 26 Jul 2024 14:28:29 +0200
Subject: [PATCH] implementig snapshots

---
 .../components/dashboard/ReferrersBarCard.vue | 12 ++++++++-
 dashboard/composables/useDataService.ts       | 26 ++++++++++++++++---
 dashboard/pages/index.vue                     |  8 +++---
 3 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/dashboard/components/dashboard/ReferrersBarCard.vue b/dashboard/components/dashboard/ReferrersBarCard.vue
index 852c948..03dd0d5 100644
--- a/dashboard/components/dashboard/ReferrersBarCard.vue
+++ b/dashboard/components/dashboard/ReferrersBarCard.vue
@@ -5,11 +5,21 @@ import type { IconProvider } from './BarsCard.vue';
 import ReferrerBarChart from '../referrer/ReferrerBarChart.vue';
 
 const activeProject = await useActiveProject();
+
+const { safeSnapshotDates, snapshot } = useSnapshot();
+
 const { data: events, pending, refresh } = await useFetch<ReferrersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/referrers`, {
-    ...signHeaders(),
+    ...signHeaders({
+        'x-from': safeSnapshotDates.value.from,
+        'x-to': safeSnapshotDates.value.to
+    }),
     lazy: true
 });
 
+watch(snapshot,()=>{
+    refresh();
+})
+
 
 function iconProvider(id: string): ReturnType<IconProvider> {
     if (id === 'self') return ['icon', 'fas fa-link'];
diff --git a/dashboard/composables/useDataService.ts b/dashboard/composables/useDataService.ts
index d4540ba..a30a35d 100644
--- a/dashboard/composables/useDataService.ts
+++ b/dashboard/composables/useDataService.ts
@@ -1,6 +1,7 @@
 import type { Slice } from "@services/DateService";
 import DateService from "@services/DateService";
 import type { MetricsCounts } from "~/server/api/metrics/[project_id]/counts";
+import type { ReferrersAggregated } from "~/server/api/metrics/[project_id]/data/referrers";
 import type { VisitsWebsiteAggregated } from "~/server/api/metrics/[project_id]/data/websites";
 import type { MetricsTimeline } from "~/server/api/metrics/[project_id]/timeline/generic";
 
@@ -87,18 +88,37 @@ export function usePagesData(website: string, limit: number = 10) {
 
 }
 
-const { safeSnapshotDates } = useSnapshot()
+const { safeSnapshotDates, snapshot } = useSnapshot()
+const activeProject = useActiveProject();
+
+const getFromToHeaders = (headers: Record<string, string> = {}) => ({
+    'x-from': safeSnapshotDates.value.from,
+    'x-to': safeSnapshotDates.value.to,
+    ...headers
+});
 
 export function useWebsitesData(limit: number = 10) {
     const activeProject = useActiveProject();
     const res = useFetch<VisitsWebsiteAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/websites`, {
-        ...signHeaders({ 
+        ...signHeaders({
             'x-query-limit': limit.toString(),
             'x-from': safeSnapshotDates.value.from,
             'x-to': safeSnapshotDates.value.to
-         }),
+        }),
         key: `websites_data:${limit}:${safeSnapshotDates.value.from}:${safeSnapshotDates.value.to}`,
         lazy: true,
     });
     return res;
 }
+
+
+
+export function useReferrersData(limit: number = 10) {
+
+    const res = useCustomFetch<ReferrersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/referrers`,
+        () => signHeaders(getFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
+        { lazy: true, watchProps: [snapshot] }
+    );
+
+    return res;
+}
\ No newline at end of file
diff --git a/dashboard/pages/index.vue b/dashboard/pages/index.vue
index 24b92bf..8fabdeb 100644
--- a/dashboard/pages/index.vue
+++ b/dashboard/pages/index.vue
@@ -119,7 +119,7 @@ const selectLabels = [
 
             </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">
@@ -129,7 +129,7 @@ const selectLabels = [
                         <DashboardEventsBarCard></DashboardEventsBarCard>
                     </div>
                 </div>
-            </div>
+            </div> -->
 
       
             <div class="flex w-full justify-center mt-6 px-6">
@@ -143,7 +143,7 @@ const selectLabels = [
                 </div>
             </div>
 
-            <div class="flex w-full justify-center mt-6 px-6">
+            <!-- <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">
                         <DashboardOssBarCard></DashboardOssBarCard>
@@ -162,7 +162,7 @@ const selectLabels = [
                     <div class="flex-1">
                     </div>
                 </div>
-            </div> 
+            </div>  -->
 
         </div>