From ba1d6c4bd0c4c6ef1cce5e1a9824d819c77ceadd Mon Sep 17 00:00:00 2001
From: Emily <adharaultimasheireen@gmail.com>
Date: Sun, 4 Aug 2024 00:33:28 +0200
Subject: [PATCH] fix visits + sessions reactivity

---
 dashboard/components/AdvancedLineChart.vue    |  3 --
 .../dashboard/SessionsLineChart.vue           | 51 ++++++++++---------
 dashboard/components/dashboard/TopCards.vue   |  1 -
 .../components/dashboard/VisitsLineChart.vue  | 50 +++++++++---------
 dashboard/pages/index.vue                     | 15 +++---
 dashboard/utils/DateUtils.ts                  |  2 +
 shared/services/DateService.ts                |  4 +-
 7 files changed, 66 insertions(+), 60 deletions(-)

diff --git a/dashboard/components/AdvancedLineChart.vue b/dashboard/components/AdvancedLineChart.vue
index 6f50a19..070ac00 100644
--- a/dashboard/components/AdvancedLineChart.vue
+++ b/dashboard/components/AdvancedLineChart.vue
@@ -81,8 +81,6 @@ const { lineChartProps, lineChartRef } = useLineChart({ chartData: chartData, op
 
 onMounted(async () => {
 
-    console.log('MOUNTED')
-
     const c = document.createElement('canvas');
     const ctx = c.getContext("2d");
     let gradient: any = `${props.color}22`;
@@ -98,7 +96,6 @@ onMounted(async () => {
     chartData.value.datasets[0].backgroundColor = [gradient];
 
     watch(props, () => {
-        console.log('UPDATE')
         chartData.value.labels = props.labels;
         chartData.value.datasets[0].data = props.data;
     });
diff --git a/dashboard/components/dashboard/SessionsLineChart.vue b/dashboard/components/dashboard/SessionsLineChart.vue
index 59dacaf..b4bed31 100644
--- a/dashboard/components/dashboard/SessionsLineChart.vue
+++ b/dashboard/components/dashboard/SessionsLineChart.vue
@@ -2,42 +2,45 @@
 import { onMounted } from 'vue';
 import DateService, { type Slice } from '@services/DateService';
 
-const data = ref<number[]>([]);
-const labels = ref<string[]>([]);
 const props = defineProps<{ slice: Slice }>();
 
-const slice = computed(() => props.slice);
+const activeProject = useActiveProject();
 
-const res = useTimeline('sessions', slice);
+const { safeSnapshotDates } = useSnapshot()
+
+function transformResponse(input: { _id: string, count: number }[]) {
+    const data = input.map(e => e.count);
+    const labels = input.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, props.slice));
+    return { data, labels }
+}
+
+const body = computed(() => {
+    return {
+        from: safeSnapshotDates.value.from,
+        to: safeSnapshotDates.value.to,
+        slice: props.slice
+    }
+});
+
+
+const sessionsData = useFetch(`/api/metrics/${activeProject.value?._id}/timeline/visits`, {
+    method: 'POST', ...signHeaders({ v2: 'true' }), body, transform: transformResponse,
+    lazy: true, immediate: false
+});
 
 onMounted(async () => {
-
-    res.onResponse(resData => {
-        if (!resData.value) return;
-        data.value = resData.value.map(e => e.count);
-        labels.value = resData.value.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, props.slice));
-    });
-
-    await res.refresh();
-
-    watch(props, () => res.refresh());
-})
-
-
-const chartVisible = computed(() => {
-    if (res.pending.value) return false;
-    if (!res.data.value) return false;
-    return true;
-})
+    sessionsData.execute();
+});
 
 
 </script>
 
 <template>
     <div>
-        <div v-if="!chartVisible" class="flex justify-center py-40">
+        <div v-if="sessionsData.pending.value" class="flex justify-center py-40">
             <i class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
         </div>
-        <AdvancedLineChart v-if="chartVisible" :data="data" :labels="labels" color="#f56523"></AdvancedLineChart>
+        <AdvancedLineChart v-if="!sessionsData.pending.value" :data="sessionsData.data.value?.data || []"
+            :labels="sessionsData.data.value?.labels || []" color="#f56523"></AdvancedLineChart>
     </div>
 </template>
\ No newline at end of file
diff --git a/dashboard/components/dashboard/TopCards.vue b/dashboard/components/dashboard/TopCards.vue
index 715bef9..a3e358d 100644
--- a/dashboard/components/dashboard/TopCards.vue
+++ b/dashboard/components/dashboard/TopCards.vue
@@ -101,7 +101,6 @@ const sessionsDurationData = useFetch(`/api/metrics/${activeProject.value?._id}/
 
 
 onMounted(async () => {
-    console.log('MOUNTED')
     visitsData.execute();
     eventsData.execute();
     sessionsData.execute();
diff --git a/dashboard/components/dashboard/VisitsLineChart.vue b/dashboard/components/dashboard/VisitsLineChart.vue
index 67ac53b..3adbff1 100644
--- a/dashboard/components/dashboard/VisitsLineChart.vue
+++ b/dashboard/components/dashboard/VisitsLineChart.vue
@@ -2,43 +2,45 @@
 import { onMounted } from 'vue';
 import DateService, { type Slice } from '@services/DateService';
 
-const data = ref<number[]>([]);
-const labels = ref<string[]>([]);
 const props = defineProps<{ slice: Slice }>();
 
-const slice = computed(() => props.slice);
+const activeProject = useActiveProject();
 
-const res = useTimeline('visits', slice);
+const { safeSnapshotDates } = useSnapshot()
 
+function transformResponse(input: { _id: string, count: number }[]) {
+    const data = input.map(e => e.count);
+    const labels = input.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, props.slice));
+    return { data, labels }
+}
+
+const body = computed(() => {
+    return {
+        from: safeSnapshotDates.value.from,
+        to: safeSnapshotDates.value.to,
+        slice: props.slice
+    }
+});
+
+
+const visitsData = useFetch(`/api/metrics/${activeProject.value?._id}/timeline/visits`, {
+    method: 'POST', ...signHeaders({ v2: 'true' }), body, transform: transformResponse,
+    lazy: true, immediate: false
+});
 
 onMounted(async () => {
-
-    res.onResponse(resData => {
-        if (!resData.value) return;
-        data.value = resData.value.map(e => e.count);
-        labels.value = resData.value.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, props.slice));
-    });
-
-    await res.refresh();
-
-    watch(props, () => res.refresh());
-})
-
-
-const chartVisible = computed(() => {
-    if (res.pending.value) return false;
-    if (!res.data.value) return false;
-    return true;
-})
+    visitsData.execute();
+});
 
 </script>
 
 <template>
     <div>
-        <div v-if="!chartVisible" class="flex justify-center py-40">
+        <div v-if="visitsData.pending.value" class="flex justify-center py-40">
             <i class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
         </div>
-        <AdvancedLineChart v-if="chartVisible" :data="data" :labels="labels" color="#5655d7">
+        <AdvancedLineChart v-if="!visitsData.pending.value" :data="visitsData.data.value?.data || []"
+            :labels="visitsData.data.value?.labels || []" color="#5655d7">
         </AdvancedLineChart>
     </div>
 </template>
\ No newline at end of file
diff --git a/dashboard/pages/index.vue b/dashboard/pages/index.vue
index 38bbfb5..16f135e 100644
--- a/dashboard/pages/index.vue
+++ b/dashboard/pages/index.vue
@@ -78,7 +78,8 @@ const limitAlertActions: any[] = [
 ]
 
 const { snapshot } = useSnapshot();
-const topCardsKey = computed(() => `${snapshot.value._id.toString()}`);
+
+const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
 
 
 </script>
@@ -116,13 +117,13 @@ const topCardsKey = computed(() => `${snapshot.value._id.toString()}`);
 
             </div>
 
-            <!-- <DashboardTopSection></DashboardTopSection> -->
-            <DashboardTopCards :key="topCardsKey"></DashboardTopCards>
+            <DashboardTopSection></DashboardTopSection>
+             <DashboardTopCards :key="refreshKey"></DashboardTopCards> 
+
 
-<!-- 
             <div class="mt-6 px-6 flex gap-6 flex-col 2xl:flex-row">
 
-                <CardTitled 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">
@@ -134,7 +135,7 @@ const topCardsKey = computed(() => `${snapshot.value._id.toString()}`);
                     </div>
                 </CardTitled>
 
-                <CardTitled 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">
@@ -147,7 +148,7 @@ const topCardsKey = 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">
diff --git a/dashboard/utils/DateUtils.ts b/dashboard/utils/DateUtils.ts
index 88acd6b..7f10934 100644
--- a/dashboard/utils/DateUtils.ts
+++ b/dashboard/utils/DateUtils.ts
@@ -62,6 +62,8 @@ export function fixMetrics(result: { data: MetricsTimeline[], from: string, to:
 
     const allKeys = !options.advanced ? [] : Array.from(new Set(result.data.map((e: any) => e[options.advancedGroupKey])).values());
 
+console.log({allKeys})
+
     const fixed: any[] = allDates.map(matchDate => {
 
         if (!options.advanced) {
diff --git a/shared/services/DateService.ts b/shared/services/DateService.ts
index 9a90bb1..44f3537 100644
--- a/shared/services/DateService.ts
+++ b/shared/services/DateService.ts
@@ -108,11 +108,13 @@ class DateService {
         const lastDate = dayjs(dates.at(-1));
         let currentDate = firstDate.clone();
 
+        allDates.push(currentDate);
+        
         while (currentDate.isBefore(lastDate, slice)) {
             currentDate = currentDate.add(1, slice);
             allDates.push(currentDate);
         }
-        
+
         return allDates;
     }