implementing snapshots

dashboard/composables/useCustomFetch.ts

@@ -9,17 +9,26 @@ export type CustomFetchOptions = {
     lazy?: boolean
 }
 
+type OnResponseCallback<TData> = (data: Ref<TData | undefined>) => any
+
 export function useCustomFetch<T>(url: NitroFetchRequest, getHeaders: () => Record<string, string>, options?: CustomFetchOptions) {
 
     const pending = ref<boolean>(false);
     const data = ref<T | undefined>();
     const error = ref<Error | undefined>();
 
+    let onResponseCallback: OnResponseCallback<T> = () => { }
+
+    const onResponse = (callback: OnResponseCallback<T>) => {
+        onResponseCallback = callback;
+    }
+
     const execute = async () => {
         pending.value = true;
         error.value = undefined;
         try {
             data.value = await $fetch<T>(url, { headers: getHeaders() });
+            onResponseCallback(data);
         } catch (err) {
             error.value = err as Error;
         } finally {
@@ -37,5 +46,7 @@ export function useCustomFetch<T>(url: NitroFetchRequest, getHeaders: () => Reco
         });
     }
 
-    return { pending, execute, data, error };
-}
+    const refresh = execute;
+
+    return { pending, execute, data, error, refresh, onResponse };
+}

dashboard/composables/useDataService.ts

@@ -1,6 +1,11 @@
 import type { Slice } from "@services/DateService";
 import DateService from "@services/DateService";
 import type { MetricsCounts } from "~/server/api/metrics/[project_id]/counts";
+import type { BrowsersAggregated } from "~/server/api/metrics/[project_id]/data/browsers";
+import type { CountriesAggregated } from "~/server/api/metrics/[project_id]/data/countries";
+import type { DevicesAggregated } from "~/server/api/metrics/[project_id]/data/devices";
+import type { CustomEventsAggregated } from "~/server/api/metrics/[project_id]/data/events";
+import type { OssAggregated } from "~/server/api/metrics/[project_id]/data/oss";
 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";
@@ -97,28 +102,61 @@ const getFromToHeaders = (headers: Record<string, string> = {}) => ({
     ...headers
 });
 
+
+
+
 export function useWebsitesData(limit: number = 10) {
-    const activeProject = useActiveProject();
-    const res = useFetch<VisitsWebsiteAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/websites`, {
-        ...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,
-    });
+    const res = useCustomFetch<ReferrersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/websites`,
+        () => signHeaders(getFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
+        { lazy: false, watchProps: [snapshot] }
+    );
     return res;
 }
 
-
+export function useEventsData(limit: number = 10) {
+    const res = useCustomFetch<CustomEventsAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/events`,
+        () => signHeaders(getFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
+        { lazy: false, watchProps: [snapshot] }
+    );
+    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] }
+        { lazy: false, watchProps: [snapshot] }
     );
+    return res;
+}
 
+export function useBrowsersData(limit: number = 10) {
+    const res = useCustomFetch<BrowsersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/browsers`,
+        () => signHeaders(getFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
+        { lazy: false, watchProps: [snapshot] }
+    );
+    return res;
+}
+
+export function useOssData(limit: number = 10) {
+    const res = useCustomFetch<OssAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/oss`,
+        () => signHeaders(getFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
+        { lazy: false, watchProps: [snapshot] }
+    );
+    return res;
+}
+
+export function useGeolocationData(limit: number = 10) {
+    const res = useCustomFetch<CountriesAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/countries`,
+        () => signHeaders(getFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
+        { lazy: false, watchProps: [snapshot] }
+    );
+    return res;
+}
+
+export function useDevicesData(limit: number = 10) {
+    const res = useCustomFetch<DevicesAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/devices`,
+        () => signHeaders(getFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
+        { lazy: false, watchProps: [snapshot] }
+    );
     return res;
 }

dashboard/composables/useSnapshot.ts

@@ -1,16 +1,62 @@
 import type { TProjectSnapshot } from "@schema/ProjectSnapshot";
 
-const snapshots = useFetch<TProjectSnapshot[]>('/api/project/snapshots', {
+const remoteSnapshots = useFetch<TProjectSnapshot[]>('/api/project/snapshots', {
     ...signHeaders(),
     immediate: false
 });
 
-const snapshot = ref<TProjectSnapshot>();
 
-watch(snapshots.data, () => {
-    if (!snapshots.data.value) return;
-    snapshot.value = snapshots.data.value[0];
-});
+const snapshots = computed(() => {
+
+    const activeProject = useActiveProject();
+
+    const getDefaultSnapshots: () => TProjectSnapshot[] = () => [
+        {
+            project_id: activeProject.value?._id as any,
+            _id: 'deafult0' as any,
+            name: 'All',
+            from: new Date(activeProject.value?.created_at || 0),
+            to: new Date(Date.now()),
+            color: '#CCCCCC'
+        },
+        {
+            project_id: activeProject.value?._id as any,
+            _id: 'deafult1' as any,
+            name: 'Last month',
+            from: new Date(Date.now() - 1000 * 60 * 60 * 24 * 30),
+            to: new Date(Date.now()),
+            color: '#00CC00'
+        },
+        {
+            project_id: activeProject.value?._id as any,
+            _id: 'deafult2' as any,
+            name: 'Last week',
+            from: new Date(Date.now() - 1000 * 60 * 60 * 24 * 7),
+            to: new Date(Date.now()),
+            color: '#0F02D2'
+        },
+        {
+            project_id: activeProject.value?._id as any,
+            _id: 'deafult3' as any,
+            name: 'Last day',
+            from: new Date(Date.now() - 1000 * 60 * 60 * 24),
+            to: new Date(Date.now()),
+            color: '#CC11CC'
+        }
+    ]
+
+    return [
+        ...getDefaultSnapshots(),
+        ...(remoteSnapshots.data.value || [])
+    ];
+})
+
+const snapshot = ref<TProjectSnapshot>(snapshots.value[0]);
+
+// watch(remoteSnapshots.data, () => {
+//     if (!remoteSnapshots.data.value) return;
+//     snapshot.value = remoteSnapshots.data.value[0];
+// });
 
 const safeSnapshotDates = computed(() => {
     const from = new Date(snapshot.value?.from || 0).toISOString();
@@ -19,8 +65,8 @@ const safeSnapshotDates = computed(() => {
 })
 
 export function useSnapshot() {
-    if (snapshots.status.value === 'idle') {
-        snapshots.execute();
+    if (remoteSnapshots.status.value === 'idle') {
+        remoteSnapshots.execute();
     }
     return { snapshot, snapshots, safeSnapshotDates }
 }