.

dashboard/components/referrer/ReferrerBarChart.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { onMounted } from 'vue';
 
+import dayjs from 'dayjs';
+
 const data = ref<number[]>([]);
 const labels = ref<string[]>([]);
 const ready = ref<boolean>(false);
@@ -13,15 +15,18 @@ async function loadData() {
     const response = await $fetch(`/api/metrics/${activeProject.value?._id.toString()}/timeline/referrers`, {
         method: 'POST',
         ...signHeaders({ 'Content-Type': 'application/json' }),
-        body: JSON.stringify({ slice: 'day', referrer: props.referrer })
+        body: JSON.stringify({
+            slice: 'hour',
+            from: Date.now() - 1000 * 60 * 60 * 12,
+            to: Date.now(),
+            referrer: props.referrer
+        })
     });
 
     if (!response) return;
 
-    const fixed = fixMetrics(response, props.slice);
-    console.log(fixed);
-    data.value = fixed.data;
-    labels.value = fixed.labels;
+    data.value = response.map(e => e.count);
+    labels.value = response.map(e => dayjs(e._id).locale(navigator.language));
     ready.value = true;
 
 }

dashboard/server/api/metrics/[project_id]/timeline/referrers.post.ts

@@ -1,9 +1,9 @@
 import { getTimeline } from "./generic";
 import { VisitModel } from "@schema/metrics/VisitSchema";
+import DateService from "@services/DateService";
 import { Redis, TIMELINE_EXPIRE_TIME } from "~/server/services/CacheService";
 import { getUserProjectFromId } from "~/server/LIVE_DEMO_DATA";
 
-
 export default defineEventHandler(async event => {
     const project_id = getRequestProjectId(event);
     if (!project_id) return;
@@ -12,19 +12,30 @@ export default defineEventHandler(async event => {
     const project = await getUserProjectFromId(project_id, user);
     if (!project) return;
 
-    const { slice, duration, referrer } = await readBody(event);
+    const { slice, referrer, from, to } = await readBody(event);
 
-    // return await Redis.useCache({ key: `timeline:referrers:${project_id}:${slice}`, exp: TIMELINE_EXPIRE_TIME }, async () => {
-    const timelineReferrers = await getTimeline(VisitModel, project_id, slice, duration,
-        {},
-        {},
-        { referrer: "$_id.referrer" },
-        { referrer: "$referrer" },
-        { referrer }
-    );
-    return timelineReferrers;
-    // });
+    const { group, sort, fromParts } = DateService.getQueryDateRange(slice);
 
+    const aggregation = [
+        {
+            $match: {
+                project_id: project._id,
+                created_at: {
+                    $gte: new Date(from),
+                    $lte: new Date(to)
+                },
+                referrer
+            }
+        },
+        { $group: { _id: group, count: { $sum: 1 } } },
+        { $sort: sort },
+        { $project: { _id: { $dateFromParts: fromParts }, count: "$count" } }
+    ]
 
+    const timelineReferrers: { _id: string, count: number }[] = await VisitModel.aggregate(aggregation);
+
+    const filledDates = DateService.fillDates(timelineReferrers.map(e => e._id), slice);
+    const merged = DateService.mergeFilledDates(filledDates, timelineReferrers, '_id', slice, { count: 0 });
+    return merged;
 
 });