.

dashboard/components/referrer/ReferrerBarChart.vue

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

dashboard/composables/useDataService.ts

@@ -17,7 +17,7 @@ export function useFirstInteractionData() {
 }
 
 
-export async function useTimeline(endpoint: 'visits' | 'sessions' | 'referrers', slice: Slice, fromDate?: string, toDate?: string) {
+export async function useTimelineAdvanced(endpoint: string, slice: Slice, fromDate?: string, toDate?: string, customBody: Object = {}) {
 
     const { from, to } = DateService.prepareDateRange(
         fromDate || DateService.getDefaultRange(slice).from,
@@ -30,7 +30,7 @@ export async function useTimeline(endpoint: 'visits' | 'sessions' | 'referrers',
         `/api/metrics/${activeProject.value?._id}/timeline/${endpoint}`, {
         method: 'POST',
         ...signHeaders({ 'Content-Type': 'application/json' }),
-        body: JSON.stringify({ slice, from, to })
+        body: JSON.stringify({ slice, from, to, ...customBody })
     });
 
     return response as { _id: string, count: number }[];
@@ -38,6 +38,15 @@ export async function useTimeline(endpoint: 'visits' | 'sessions' | 'referrers',
 }
 
 
+export async function useTimeline(endpoint: 'visits' | 'sessions' | 'referrers', slice: Slice, fromDate?: string, toDate?: string) {
+    return await useTimelineAdvanced(endpoint, slice, fromDate, toDate, {});
+}
+
+export async function useReferrersTimeline(referrer: string, slice: Slice, fromDate?: string, toDate?: string) {
+    return await useTimelineAdvanced('referrers', slice, fromDate, toDate, { referrer });
+}
+
+
 
 export async function useTimelineDataRaw(timelineEndpointName: string, slice: SliceName) {
     const activeProject = useActiveProject();

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

@@ -13,14 +13,14 @@ export default defineEventHandler(async event => {
     const project = await getUserProjectFromId(project_id, user);
     if (!project) return;
 
-    const { slice, from, to } = await readBody(event);
+    const { slice, from, to, referrer } = 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:referrers:${project_id}:${slice}:${from || 'none'}:${to || 'none'}`,
+        key: `timeline:referrers:${referrer}:${project_id}:${slice}:${from || 'none'}:${to || 'none'}`,
         exp: TIMELINE_EXPIRE_TIME
     }, async () => {
         const timelineData = await executeAdvancedTimelineAggregation({
@@ -28,7 +28,7 @@ export default defineEventHandler(async event => {
             model: VisitModel,
             from, to, slice,
             customMatch: {
-                referrer: '$referrer'
+                referrer
             }
         });
         const timelineFilledMerged = fillAndMergeTimelineAggregation(timelineData, slice);

shared/services/DateService.ts

@@ -108,14 +108,11 @@ class DateService {
         const lastDate = dayjs(dates.at(-1));
         let currentDate = firstDate.clone();
 
-        console.log('currentDate', currentDate.toISOString());
-        console.log('   lastDate', lastDate.toISOString());
-
         while (currentDate.isBefore(lastDate, slice)) {
             currentDate = currentDate.add(1, slice);
             allDates.push(currentDate);
         }
-        console.log('alldates', allDates.length);
+        
         return allDates;
     }
 
@@ -132,31 +129,3 @@ class DateService {
 
 const dateServiceInstance = new DateService();
 export default dateServiceInstance;
-
-
-dateServiceInstance.fillDates([
-    { _id: "2024-06-21T00:00:00.000Z", count: 33 },
-    { _id: "2024-06-21T01:00:00.000Z", count: 10 },
-    { _id: "2024-06-21T02:00:00.000Z", count: 7 },
-    { _id: "2024-06-21T03:00:00.000Z", count: 7 },
-    { _id: "2024-06-21T04:00:00.000Z", count: 7 },
-    { _id: "2024-06-21T05:00:00.000Z", count: 27 },
-    { _id: "2024-06-21T06:00:00.000Z", count: 5 },
-    { _id: "2024-06-21T07:00:00.000Z", count: 9 },
-    { _id: "2024-06-21T08:00:00.000Z", count: 24 },
-    { _id: "2024-06-21T09:00:00.000Z", count: 6 },
-    { _id: "2024-06-21T10:00:00.000Z", count: 13 },
-    { _id: "2024-06-21T11:00:00.000Z", count: 12 },
-    { _id: "2024-06-21T12:00:00.000Z", count: 13 },
-    { _id: "2024-06-21T13:00:00.000Z", count: 68 },
-    { _id: "2024-06-21T14:00:00.000Z", count: 12 },
-    { _id: "2024-06-21T15:00:00.000Z", count: 26 },
-    { _id: "2024-06-21T16:00:00.000Z", count: 8 },
-    { _id: "2024-06-21T17:00:00.000Z", count: 8 },
-    { _id: "2024-06-21T18:00:00.000Z", count: 17 },
-    { _id: "2024-06-20T19:00:00.000Z", count: 7 },
-    { _id: "2024-06-20T20:00:00.000Z", count: 13 },
-    { _id: "2024-06-20T21:00:00.000Z", count: 10 },
-    { _id: "2024-06-20T22:00:00.000Z", count: 16 },
-    { _id: "2024-06-20T23:00:00.000Z", count: 14 }
-].map(e => e._id), 'hour')