fix visits + sessions reactivity

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;
     });

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()
 
-onMounted(async () => {
+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 }
+}
 
-    res.onResponse(resData => {
+const body = computed(() => {
-        if (!resData.value) return;
+    return {
-        data.value = resData.value.map(e => e.count);
+        from: safeSnapshotDates.value.from,
-        labels.value = resData.value.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, props.slice));
+        to: safeSnapshotDates.value.to,
+        slice: props.slice
+    }
 });
 
-    await res.refresh();
 
-    watch(props, () => res.refresh());
+const sessionsData = useFetch(`/api/metrics/${activeProject.value?._id}/timeline/visits`, {
-})
+    method: 'POST', ...signHeaders({ v2: 'true' }), body, transform: transformResponse,
+    lazy: true, immediate: false
+});
 
-
+onMounted(async () => {
-const chartVisible = computed(() => {
+    sessionsData.execute();
-    if (res.pending.value) return false;
+});
-    if (!res.data.value) return false;
-    return true;
-})
 
 
 </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>

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();

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 }
+}
 
-onMounted(async () => {
+const body = computed(() => {
-
+    return {
-    res.onResponse(resData => {
+        from: safeSnapshotDates.value.from,
-        if (!resData.value) return;
+        to: safeSnapshotDates.value.to,
-        data.value = resData.value.map(e => e.count);
+        slice: props.slice
-        labels.value = resData.value.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, props.slice));
+    }
 });
 
-    await res.refresh();
 
-    watch(props, () => res.refresh());
+const visitsData = useFetch(`/api/metrics/${activeProject.value?._id}/timeline/visits`, {
-})
+    method: 'POST', ...signHeaders({ v2: 'true' }), body, transform: transformResponse,
+    lazy: true, immediate: false
+});
 
-
+onMounted(async () => {
-const chartVisible = computed(() => {
+    visitsData.execute();
-    if (res.pending.value) return false;
+});
-    if (!res.data.value) return false;
-    return true;
-})
 
 </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>

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> -->
+            <DashboardTopSection></DashboardTopSection>
-            <DashboardTopCards :key="topCardsKey"></DashboardTopCards>
+             <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">

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) {

shared/services/DateService.ts

@@ -108,6 +108,8 @@ 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);