fix reactivity

dashboard/components/dashboard/BrowsersBarCard.vue

@@ -1,30 +1,46 @@
 <script lang="ts" setup>
 
-const { data: browsers, pending, refresh } = useBrowsersData(10);
+const activeProject = useActiveProject();
-const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
 
-function showMore() {
+const { safeSnapshotDates } = useSnapshot()
 
-    showDialog.value = true;
+const isShowMore = ref<boolean>(false);
-    dialogBarData.value = [];
-    isDataLoading.value = true;
 
-    const moreRes = useBrowsersData(200);
+const headers = computed(() => {
-
+    return {
-    moreRes.onResponse(data => {
+        'x-from': safeSnapshotDates.value.from,
-        dialogBarData.value = data.value || [];
+        'x-to': safeSnapshotDates.value.to,
-        isDataLoading.value = false;
+        Authorization: authorizationHeaderComputed.value,
+        limit: isShowMore.value === true ? '200' : '10'
+    }
 });
 
+const browsersData = useFetch(`/api/metrics/${activeProject.value?._id}/data/browsers`, {
+    method: 'POST', headers, lazy: true, immediate: false
+});
+
+const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
+
+
+function showMore() {
+    isShowMore.value = true;
+    showDialog.value = true;
+    dialogBarData.value = browsersData.data.value || [];
+
 }
 
+onMounted(() => {
+    browsersData.execute();
+});
+
 </script>
 
 
 <template>
     <div class="flex flex-col gap-2">
-        <DashboardBarsCard @showMore="showMore()" @dataReload="refresh" :data="browsers || []"
+        <DashboardBarsCard @showMore="showMore()" @dataReload="browsersData.refresh()"
-            desc="The browsers most used to search your website." :dataIcons="false" :loading="pending"
+            :data="browsersData.data.value || []" desc="The browsers most used to search your website."
-            label="Top Browsers" sub-label="Browsers"></DashboardBarsCard>
+            :dataIcons="false" :loading="browsersData.pending.value" label="Top Browsers" sub-label="Browsers">
+        </DashboardBarsCard>
     </div>
 </template>

dashboard/components/dashboard/DevicesBarCard.vue

@@ -1,32 +1,46 @@
 <script lang="ts" setup>
 
-const { data: devices, pending, refresh } = useDevicesData(10);
+const activeProject = useActiveProject();
+
+const { safeSnapshotDates } = useSnapshot()
+
+const isShowMore = ref<boolean>(false);
+
+const headers = computed(() => {
+    return {
+        'x-from': safeSnapshotDates.value.from,
+        'x-to': safeSnapshotDates.value.to,
+        Authorization: authorizationHeaderComputed.value,
+        limit: isShowMore.value === true ? '200' : '10'
+    }
+});
+
+const devicesData = useFetch(`/api/metrics/${activeProject.value?._id}/data/devices`, {
+    method: 'POST', headers, lazy: true, immediate: false
+});
 
 const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
 
+
 function showMore() {
-
+    isShowMore.value = true;
-
     showDialog.value = true;
-    dialogBarData.value = [];
+    dialogBarData.value = devicesData.data.value || [];
-    isDataLoading.value = true;
-
-    const moreRes = useDevicesData(200);
-
-    moreRes.onResponse(data => {
-        dialogBarData.value = data.value || [];
-        isDataLoading.value = false;
-    });
 
 }
 
+
+onMounted(() => {
+    devicesData.execute();
+});
+
 </script>
 
 
 <template>
     <div class="flex flex-col gap-2">
-        <DashboardBarsCard @showMore="showMore()" @dataReload="refresh" :data="devices || []" :dataIcons="false"
+        <DashboardBarsCard @showMore="showMore()" @dataReload="devicesData.refresh()" :data="devicesData.data.value || []" :dataIcons="false"
-            desc="The devices most used to access your website." :loading="pending" label="Top Devices"
+            desc="The devices most used to access your website." :loading="devicesData.pending.value" label="Top Devices"
             sub-label="Devices"></DashboardBarsCard>
     </div>
 </template>

dashboard/components/dashboard/EventsBarCard.vue

@@ -1,31 +1,42 @@
 <script lang="ts" setup>
 
-const { data: events, pending, refresh } = useEventsData();
-
 const router = useRouter();
 
 function goToView() {
     router.push('/dashboard/events');
 }
 
+const activeProject = useActiveProject();
+
+const { safeSnapshotDates } = useSnapshot()
+
+const isShowMore = ref<boolean>(false);
+
+const headers = computed(() => {
+    return {
+        'x-from': safeSnapshotDates.value.from,
+        'x-to': safeSnapshotDates.value.to,
+        Authorization: authorizationHeaderComputed.value,
+        limit: isShowMore.value === true ? '200' : '10'
+    }
+});
+
+const eventsData = useFetch(`/api/metrics/${activeProject.value?._id}/data/events`, {
+    method: 'POST', headers, lazy: true, immediate: false
+});
+
 const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
 
 function showMore() {
-
+    isShowMore.value = true;
-
     showDialog.value = true;
-    dialogBarData.value = [];
+    dialogBarData.value = eventsData.data.value || [];
-    isDataLoading.value = true;
-
-    const moreRes = useEventsData(200);
-
-    moreRes.onResponse(data => {
-        dialogBarData.value = data.value || [];
-        isDataLoading.value = false;
-    });
-
 }
 
+onMounted(async () => {
+    eventsData.execute();
+});
+
 
 </script>
 
@@ -33,7 +44,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 || []"
+            desc="Most frequent user events triggered in this project" @dataReload="eventsData.refresh()"
-            :loading="pending" label="Top Events" sub-label="Events" :rawButton="!isLiveDemo()"></DashboardBarsCard>
+            :data="eventsData.data.value || []" :loading="eventsData.pending.value" label="Top Events"
+            sub-label="Events" :rawButton="!isLiveDemo()"></DashboardBarsCard>
     </div>
 </template>

dashboard/components/dashboard/OssBarCard.vue

@@ -1,30 +1,44 @@
 <script lang="ts" setup>
 
-const { data: oss, pending, refresh } = useOssData()
+const activeProject = useActiveProject();
+
+const { safeSnapshotDates } = useSnapshot()
+
+const isShowMore = ref<boolean>(false);
+
+const headers = computed(() => {
+    return {
+        'x-from': safeSnapshotDates.value.from,
+        'x-to': safeSnapshotDates.value.to,
+        Authorization: authorizationHeaderComputed.value,
+        limit: isShowMore.value === true ? '200' : '10'
+    }
+});
+
+const ossData = useFetch(`/api/metrics/${activeProject.value?._id}/data/oss`, {
+    method: 'POST', headers, lazy: true, immediate: false
+});
+
 const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
 
+
 function showMore() {
-
+    isShowMore.value = true;
     showDialog.value = true;
-    dialogBarData.value = [];
+    dialogBarData.value = ossData.data.value || [];
-    isDataLoading.value = true;
-
-    const moreRes = useOssData(200);
-
-    moreRes.onResponse(data => {
-        dialogBarData.value = data.value || [];
-        isDataLoading.value = false;
-    })
-
 }
 
+onMounted(() => {
+    ossData.execute();
+});
+
 </script>
 
 
 <template>
     <div class="flex flex-col gap-2 h-full">
-        <DashboardBarsCard @showMore="showMore()" @dataReload="refresh" :data="oss || []"
+        <DashboardBarsCard @showMore="showMore()" @dataReload="ossData.refresh()" :data="ossData.data.value || []"
             desc="The operating systems most commonly used by your website's visitors." :dataIcons="false"
-            :loading="pending" label="Top OS" sub-label="OSs"></DashboardBarsCard>
+            :loading="ossData.pending.value" label="Top OS" sub-label="OSs"></DashboardBarsCard>
     </div>
 </template>

dashboard/components/dashboard/ReferrersBarCard.vue

@@ -3,9 +3,6 @@
 import type { IconProvider } from './BarsCard.vue';
 import ReferrerBarChart from '../referrer/ReferrerBarChart.vue';
 
-const { data: events, pending, refresh } = useReferrersData(10);
-
-
 function iconProvider(id: string): ReturnType<IconProvider> {
     if (id === 'self') return ['icon', 'fas fa-link'];
     return ['img', `https://s2.googleusercontent.com/s2/favicons?domain=${id}&sz=64`]
@@ -16,6 +13,24 @@ function elementTextTransformer(element: string) {
     return element;
 }
 
+const activeProject = useActiveProject();
+
+const { safeSnapshotDates } = useSnapshot()
+
+const isShowMore = ref<boolean>(false);
+
+const headers = computed(() => {
+    return {
+        'x-from': safeSnapshotDates.value.from,
+        'x-to': safeSnapshotDates.value.to,
+        Authorization: authorizationHeaderComputed.value,
+        limit: isShowMore.value === true ? '200' : '10'
+    }
+});
+
+const referrersData = useFetch(`/api/metrics/${activeProject.value?._id}/data/referrers`, {
+    method: 'POST', headers, lazy: true, immediate: false
+});
 
 const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
 
@@ -25,35 +40,29 @@ function onShowDetails(referrer: string) {
     customDialog.openDialog(ReferrerBarChart, { slice: 'day', referrer });
 }
 
-
-
-
 function showMore() {
 
+    isShowMore.value = true;
     showDialog.value = true;
-    dialogBarData.value = [];
+    dialogBarData.value = referrersData.data.value?.map(e => {
-    isDataLoading.value = true;
-
-
-    const moreRes = useReferrersData(200);
-
-    moreRes.onResponse(data => {
-        dialogBarData.value = data.value?.map(e => {
         return { ...e, icon: iconProvider(e._id) }
     }) || [];
-        isDataLoading.value = false;
-    })
 
 }
 
+onMounted(async () => {
+   referrersData.execute();
+});
+
 </script>
 
 
 <template>
     <div class="flex flex-col gap-2">
         <DashboardBarsCard @showDetails="onShowDetails" @showMore="showMore()"
-            :elementTextTransformer="elementTextTransformer" :iconProvider="iconProvider" @dataReload="refresh"
+            :elementTextTransformer="elementTextTransformer" :iconProvider="iconProvider"
-            :showLink=true :data="events || []" :interactive="true" desc="Where users find your website."
+            @dataReload="referrersData.refresh()" :showLink=true :data="referrersData.data.value || []"
-            :dataIcons="true" :loading="pending" label="Top Referrers" sub-label="Referrers"></DashboardBarsCard>
+            :interactive="true" desc="Where users find your website." :dataIcons="true" :loading="referrersData.pending.value"
+            label="Top Referrers" sub-label="Referrers"></DashboardBarsCard>
     </div>
 </template>

dashboard/composables/useAccessToken.ts

@@ -9,6 +9,11 @@ export function signHeaders(headers?: Record<string, string>) {
     return { headers: { ...(headers || {}), 'Authorization': 'Bearer ' + token.value } }
 }
 
+export const authorizationHeaderComputed = computed(() => {
+    const { token } = useAccessToken()
+    return token.value ? 'Bearer ' + token.value : '';
+});
+
 export function useAccessToken() {
 
     const tokenCookie = useCookie(ACCESS_TOKEN_COOKIE_KEY, { expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30) })

dashboard/pages/index.vue

@@ -100,7 +100,8 @@ const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
                 </div> -->
 
 
-                <div v-if="limitsInfo && limitsInfo.limited" class="w-full bg-[#fbbf2422] p-4 rounded-lg text-[.9rem] flex items-center">
+                <div v-if="limitsInfo && limitsInfo.limited"
+                    class="w-full bg-[#fbbf2422] p-4 rounded-lg text-[.9rem] flex items-center">
                     <div class="flex flex-col grow">
                         <div class="poppins font-semibold text-[#fbbf24]">
                             Limit reached
@@ -123,7 +124,8 @@ const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
 
             <div class="mt-6 px-6 flex gap-6 flex-col 2xl:flex-row">
 
-                <CardTitled :key="refreshKey" class="p-4 flex-1 w-full" title="Visits trends" sub="Shows trends in page visits.">
+                <CardTitled :key="refreshKey" class="p-4 flex-1 w-full" title="Visits trends"
+                    sub="Shows trends in page visits.">
                     <template #header>
                         <SelectButton @changeIndex="mainChartSelectIndex = $event" :currentIndex="mainChartSelectIndex"
                             :options="selectLabels">
@@ -135,7 +137,8 @@ const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
                     </div>
                 </CardTitled>
 
-                 <CardTitled  :key="refreshKey" class="p-4 flex-1 w-full" title="Sessions" sub="Shows trends in sessions.">
+                <CardTitled :key="refreshKey" class="p-4 flex-1 w-full" title="Sessions"
+                    sub="Shows trends in sessions.">
                     <template #header>
                         <SelectButton @changeIndex="sessionsChartSelectIndex = $event"
                             :currentIndex="sessionsChartSelectIndex" :options="selectLabels">
@@ -148,7 +151,7 @@ const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
                 </CardTitled>
 
             </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">
@@ -160,6 +163,7 @@ const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
                 </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">
@@ -190,7 +194,7 @@ const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
                     <div class="flex-1">
                     </div>
                 </div>
-            </div> -->
+            </div>
 
         </div>