implementig snapshots

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'];

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,7 +88,14 @@ 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();
@@ -96,9 +104,21 @@ export function useWebsitesData(limit: number = 10) {
             '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;
+}

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>