From 75090c809c44892bd27306dc9785113a7dc8be14 Mon Sep 17 00:00:00 2001
From: Emily <adharaultimasheireen@gmail.com>
Date: Mon, 24 Jun 2024 14:51:15 +0200
Subject: [PATCH] fix dashboard charts

---
 dashboard/components/dashboard/CountCard.vue  | 17 +++++---
 dashboard/components/dashboard/TopCards.vue   | 17 +++++---
 .../[project_id]/timeline/events.post.ts      | 23 ++++++++--
 .../timeline/sessions_duration.post.ts        | 43 ++++++++++++++++---
 dashboard/server/services/TimelineService.ts  | 17 ++++++--
 5 files changed, 90 insertions(+), 27 deletions(-)

diff --git a/dashboard/components/dashboard/CountCard.vue b/dashboard/components/dashboard/CountCard.vue
index 1221f7c..ddefeb1 100644
--- a/dashboard/components/dashboard/CountCard.vue
+++ b/dashboard/components/dashboard/CountCard.vue
@@ -28,18 +28,21 @@ const props = defineProps<{
                 </div>
                 <div class="poppins text-text-sub text-[.9rem] 2xl:text-base"> {{ text }} </div>
             </div>
-            <div v-if="trend" class="flex items-center gap-3 rounded-xl px-2 py-1"
-                :style="`background-color: ${props.color}33`">
-                <i :class="trend > 0 ? 'fa-arrow-trend-up' : 'fa-arrow-trend-down'" class="far text-[.9rem] 2xl:text-[1rem]"
-                    :style="`color: ${props.color}`"></i>
-                <div :style="`color: ${props.color}`" class="font-semibold text-[.75rem] 2xl:text-[.875rem]">
-                    {{ trend.toFixed(0) }} %
+            <div v-if="trend" class="flex flex-col items-center gap-1">
+                <div class="flex items-center gap-3 rounded-xl px-2 py-1" :style="`background-color: ${props.color}33`">
+                    <i :class="trend > 0 ? 'fa-arrow-trend-up' : 'fa-arrow-trend-down'"
+                        class="far text-[.9rem] 2xl:text-[1rem]" :style="`color: ${props.color}`"></i>
+                    <div :style="`color: ${props.color}`" class="font-semibold text-[.75rem] 2xl:text-[.875rem]">
+                        {{ trend.toFixed(0) }} %
+                    </div>
                 </div>
+                <div class="poppins text-text-sub text-[.7rem]"> Daily variation </div>
             </div>
 
         </div>
         <div class="absolute bottom-0 left-0 w-full h-[50%] flex items-end" v-if="(props.data?.length || 0) > 0">
-            <DashboardEmbedChartCard v-if="ready" :data="props.data || []" :labels="props.labels || []" :color="props.color">
+            <DashboardEmbedChartCard v-if="ready" :data="props.data || []" :labels="props.labels || []"
+                :color="props.color">
             </DashboardEmbedChartCard>
         </div>
     </Card>
diff --git a/dashboard/components/dashboard/TopCards.vue b/dashboard/components/dashboard/TopCards.vue
index 6f80194..ec52abb 100644
--- a/dashboard/components/dashboard/TopCards.vue
+++ b/dashboard/components/dashboard/TopCards.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { MetricsTimeline } from '~/server/api/metrics/[project_id]/timeline/generic';
-
+import DateService from '@services/DateService';
 
 const { data: metricsInfo } = useMetricsData();
 
@@ -63,11 +63,18 @@ const sessionsData = reactive<Data>({ data: [], labels: [], trend: 0, ready: fal
 const sessionsDurationData = reactive<Data>({ data: [], labels: [], trend: 0, ready: false });
 
 async function loadData(timelineEndpointName: string, target: Data) {
-    const response = await useTimelineData(timelineEndpointName, 'day');
+
+    const response = await useTimeline(timelineEndpointName as any, 'day');
     if (!response) return;
-    target.data = response.data;
-    target.labels = response.labels;
-    target.trend = response.trend;
+    target.data = response.map(e => e.count);
+    target.labels = response.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, 'day'));
+
+    const pool = [...response.map(e => e.count)];
+    pool.pop();
+    const avg = pool.reduce((a, e) => a + e, 0) / pool.length;
+    const diffPercent = (100 / avg * (response.at(-1)?.count || 0)) - 100;
+    target.trend = diffPercent;
+    
     target.ready = true;
 }
 
diff --git a/dashboard/server/api/metrics/[project_id]/timeline/events.post.ts b/dashboard/server/api/metrics/[project_id]/timeline/events.post.ts
index 3f2b6ab..c791cd6 100644
--- a/dashboard/server/api/metrics/[project_id]/timeline/events.post.ts
+++ b/dashboard/server/api/metrics/[project_id]/timeline/events.post.ts
@@ -2,6 +2,7 @@ import { EventModel } from "@schema/metrics/EventSchema";
 import { getTimeline } from "./generic";
 import { Redis, TIMELINE_EXPIRE_TIME } from "~/server/services/CacheService";
 import { getUserProjectFromId } from "~/server/LIVE_DEMO_DATA";
+import { executeTimelineAggregation, fillAndMergeTimelineAggregation } from "~/server/services/TimelineService";
 
 export default defineEventHandler(async event => {
     const project_id = getRequestProjectId(event);
@@ -11,11 +12,25 @@ export default defineEventHandler(async event => {
     const project = await getUserProjectFromId(project_id, user);
     if (!project) return;
 
-    const { slice, duration } = await readBody(event);
+    const { slice, from, to } = await readBody(event);
 
-    return await Redis.useCache({ key: `timeline:events:${project_id}:${slice}`, exp: TIMELINE_EXPIRE_TIME }, async () => {
-        const timelineEvents = await getTimeline(EventModel, project_id, slice, duration);
-        return timelineEvents;
+    if (!from) return setResponseStatus(event, 400, 'from is required');
+    if (!from) return setResponseStatus(event, 400, 'to is required');
+    if (!from) return setResponseStatus(event, 400, 'slice is required');
+
+    return await Redis.useCache({
+        key: `timeline:events:${project_id}:${slice}:${from || 'none'}:${to || 'none'}`,
+        exp: TIMELINE_EXPIRE_TIME
+    }, async () => {
+        const timelineData = await executeTimelineAggregation({
+            projectId: project._id,
+            model: EventModel,
+            from, to, slice
+        });
+        const timelineFilledMerged = fillAndMergeTimelineAggregation(timelineData, slice);
+        return timelineFilledMerged;
     });
 
+
+
 });
\ No newline at end of file
diff --git a/dashboard/server/api/metrics/[project_id]/timeline/sessions_duration.post.ts b/dashboard/server/api/metrics/[project_id]/timeline/sessions_duration.post.ts
index 9b02cb5..a5fb3b5 100644
--- a/dashboard/server/api/metrics/[project_id]/timeline/sessions_duration.post.ts
+++ b/dashboard/server/api/metrics/[project_id]/timeline/sessions_duration.post.ts
@@ -2,6 +2,7 @@ import { getTimeline } from "./generic";
 import { Redis, TIMELINE_EXPIRE_TIME } from "~/server/services/CacheService";
 import { getUserProjectFromId } from "~/server/LIVE_DEMO_DATA";
 import { SessionModel } from "@schema/metrics/SessionSchema";
+import { executeAdvancedTimelineAggregation, executeTimelineAggregation, fillAndMergeTimelineAggregation } from "~/server/services/TimelineService";
 
 export default defineEventHandler(async event => {
     const project_id = getRequestProjectId(event);
@@ -11,16 +12,44 @@ export default defineEventHandler(async event => {
     const project = await getUserProjectFromId(project_id, user);
     if (!project) return;
 
-    const { slice, duration } = await readBody(event);
+    // const { slice, duration } = await readBody(event);
 
-    return await Redis.useCache({ key: `timeline:sessions_duration:${project_id}:${slice}`, exp: TIMELINE_EXPIRE_TIME }, async () => {
-        const timelineSessionsDuration = await getTimeline(SessionModel, project_id, slice, duration, {},
-            { duration: { $sum: '$duration' } },
-            { count: { $divide: ["$duration", "$count"] } }
-        );
-        return timelineSessionsDuration;
+    // return await Redis.useCache({ key: `timeline:sessions_duration:${project_id}:${slice}`, exp: TIMELINE_EXPIRE_TIME }, async () => {
+    //     const timelineSessionsDuration = await getTimeline(SessionModel, project_id, slice, duration,
+    // {},
+    //         { duration: { $sum: '$duration' } },
+    //         { count: { $divide: ["$duration", "$count"] } }
+    //     );
+    //     return timelineSessionsDuration;
+    // });
+
+
+    const { slice, from, to } = await readBody(event);
+
+    if (!from) return setResponseStatus(event, 400, 'from is required');
+    if (!from) return setResponseStatus(event, 400, 'to is required');
+    if (!from) return setResponseStatus(event, 400, 'slice is required');
+
+    return await Redis.useCache({
+        key: `timeline:sessions_duration:${project_id}:${slice}:${from || 'none'}:${to || 'none'}`,
+        exp: TIMELINE_EXPIRE_TIME
+    }, async () => {
+        const timelineData = await executeAdvancedTimelineAggregation({
+            projectId: project._id,
+            model: SessionModel,
+            from, to, slice,
+            customGroup: {
+                duration: { $sum: '$duration' }
+            },
+            customProjection: {
+                count: { $divide: ["$duration", "$count"] }
+            },
+        });
+        const timelineFilledMerged = fillAndMergeTimelineAggregation(timelineData, slice);
+        return timelineFilledMerged;
     });
 
 
 
+
 });
\ No newline at end of file
diff --git a/dashboard/server/services/TimelineService.ts b/dashboard/server/services/TimelineService.ts
index 13fc2ca..e8518aa 100644
--- a/dashboard/server/services/TimelineService.ts
+++ b/dashboard/server/services/TimelineService.ts
@@ -9,16 +9,21 @@ export type TimelineAggregationOptions = {
     model: mongoose.Model<any>,
     from: string | number,
     to: string | number,
-    slice: Slice
+    slice: Slice,
+    debug?: boolean
 }
 
 export type AdvancedTimelineAggregationOptions = TimelineAggregationOptions & {
-    customMatch?: Record<string, any>
+    customMatch?: Record<string, any>,
+    customGroup?: Record<string, any>,
+    customProjection?: Record<string, any>
 }
 
 export async function executeAdvancedTimelineAggregation(options: AdvancedTimelineAggregationOptions) {
 
     options.customMatch = options.customMatch || {};
+    options.customGroup = options.customGroup || {};
+    options.customProjection = options.customProjection || {};
 
     const { group, sort, fromParts } = DateService.getQueryDateRange(options.slice);
 
@@ -30,11 +35,15 @@ export async function executeAdvancedTimelineAggregation(options: AdvancedTimeli
                 ...options.customMatch
             }
         },
-        { $group: { _id: group, count: { $sum: 1 } } },
+        { $group: { _id: group, count: { $sum: 1 }, ...options.customGroup } },
         { $sort: sort },
-        { $project: { _id: { $dateFromParts: fromParts }, count: "$count" } }
+        { $project: { _id: { $dateFromParts: fromParts }, count: "$count", ...options.customProjection } }
     ]
 
+    if (options.debug === true) {
+        console.log(JSON.stringify(aggregation, null, 2));
+    }
+
     const timeline: { _id: string, count: number }[] = await options.model.aggregate(aggregation);
 
     return timeline;