actionable chart + date service

dashboard/components/SelectButton.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 
 type Props = {
-    options: { label: string }[],
+    options: { label: string, disabled?: boolean }[],
     currentIndex: number
 }
 
@@ -17,9 +17,12 @@ const emits = defineEmits<{
 <template>
 
     <div class="flex gap-2 border-[1px] border-lyx-widget-lighter p-1 md:p-2 rounded-xl bg-lyx-widget">
-        <div @click="$emit('changeIndex', index)" v-for="(opt, index) of options"
+        <div @click="opt.disabled ? ()=>{}: $emit('changeIndex', index)" v-for="(opt, index) of options"
             class="hover:bg-lyx-widget-lighter/60 select-btn-animated cursor-pointer rounded-lg poppins font-regular px-2 md:px-3 py-1 text-[.8rem] md:text-[1rem]"
-            :class="{ 'bg-lyx-widget-lighter hover:!bg-lyx-widget-lighter': currentIndex == index }">
+            :class="{
+                'bg-lyx-widget-lighter hover:!bg-lyx-widget-lighter': currentIndex == index && !opt.disabled,
+                'hover:!bg-lyx-widget !cursor-not-allowed text-lyx-widget-lighter': opt.disabled
+            }">
             {{ opt.label }}
         </div>
     </div>

dashboard/components/dashboard/ActionableChart.vue

@@ -81,7 +81,7 @@ const chartData = ref<ChartData<'line' | 'bar' | 'bubble'>>({
             hoverBackgroundColor: '#4abde8',
             hoverBorderColor: '#4abde8',
             hoverBorderWidth: 2,
-            type: 'bar'
+            type: 'bar',
         },
         {
             label: 'Events',
@@ -130,13 +130,25 @@ function externalTooltipHandler(context: { chart: any, tooltip: TooltipModel<'li
     tooltipEl.style.padding = tooltip.options.padding + 'px ' + tooltip.options.padding + 'px';
 
 }
+
+const { snapshotDuration } = useSnapshot();
+
 const selectLabels: { label: string, value: Slice }[] = [
     { label: 'Hour', value: 'hour' },
     { label: 'Day', value: 'day' },
+    { label: 'Week', value: 'week' },
     { label: 'Month', value: 'month' },
 ];
 
-const selectedSlice = computed(() => selectLabels[selectedLabelIndex.value].value);
+const selectLablesAvailable = computed<{ label: string, value: Slice, disabled: boolean }[]>(() => {
+    return selectLabels.map(e => {
+        return { ...e, disabled: !DateService.canUseSliceFromDays(snapshotDuration.value, e.value)[0] }
+    });
+})
+
+const selectedSlice = computed<Slice>(() => {
+    return selectLablesAvailable.value[selectedLabelIndex.value].value
+});
 
 const selectedLabelIndex = ref<number>(1);
 const allDatesFull = ref<string[]>([]);
@@ -144,13 +156,15 @@ const allDatesFull = ref<string[]>([]);
 
 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, selectLabels[selectedLabelIndex.value].value));
+    const labels = input.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, selectedSlice.value));
-    allDatesFull.value = input.map(e => e._id.toString());
+    if (input.length > 0) allDatesFull.value = input.map(e => e._id.toString());
     return { data, labels }
 }
 
 function onResponseError(e: any) {
-    errorData.value = { errored: true, text: e.response._data.message ?? 'Generic error' }
+    let message = e.response._data.message ?? 'Generic error';
+    if (message == 'internal server error') message = 'Please change slice';
+    errorData.value = { errored: true, text: message }
 }
 
 function onResponse(e: any) {
@@ -247,7 +261,7 @@ const legendClasses = ref<string[]>([
     <CardTitled title="Trend chart" sub="Easily match Visits, Unique sessions and Events trends." class="w-full">
         <template #header>
             <SelectButton class="w-fit" @changeIndex="selectedLabelIndex = $event" :currentIndex="selectedLabelIndex"
-                :options="selectLabels">
+                :options="selectLablesAvailable">
             </SelectButton>
         </template>
 

dashboard/server/api/timeline/bouncing_rate.ts

@@ -1,9 +1,10 @@
-import { getUserProjectFromId } from "~/server/LIVE_DEMO_DATA";
+
 import { SessionModel } from "@schema/metrics/SessionSchema";
 import { VisitModel } from "@schema/metrics/VisitSchema";
 import { Redis } from "~/server/services/CacheService";
 import DateService from "@services/DateService";
-import mongoose from "mongoose";
+
+import { checkSliceValidity, generateDateSlices } from "~/server/services/TimelineService";
 
 export default defineEventHandler(async event => {
 
@@ -19,28 +20,22 @@ export default defineEventHandler(async event => {
 
     return await Redis.useCacheV2(cacheKey, cacheExp, async (noStore, updateExp) => {
 
-        const dateDistDays = (new Date(to).getTime() - new Date(from).getTime()) / (1000 * 60 * 60 * 24)
+        const [sliceValid, errorOrDays] = checkSliceValidity(from, to, slice);
-        // 15 Days
+        if (!sliceValid) throw Error(errorOrDays);
-        if (slice === 'hour' && (dateDistDays > 15)) throw Error('Date gap too big for this slice');
-        // 1 Year
-        if (slice === 'day' && (dateDistDays > 365)) throw Error('Date gap too big for this slice');
-        // 3 Years
-        if (slice === 'month' && (dateDistDays > 365 * 3)) throw Error('Date gap too big for this slice');
 
-
+        const allDates = generateDateSlices(slice, new Date(from), new Date(to));
-        const allDates = DateService.createBetweenDates(from, to, slice as any);
 
         const result: { _id: string, count: number }[] = [];
 
-        for (const date of allDates.dates) {
+        for (const date of allDates) {
 
             const visits = await VisitModel.aggregate([
                 {
                     $match: {
                         project_id: project_id,
                         created_at: {
-                            $gte: date.startOf(slice as any).toDate(),
+                            $gte: DateService.startOfSlice(date, slice),
-                            $lte: date.endOf(slice as any).toDate()
+                            $lte: DateService.endOfSlice(date, slice)
                         }
                     },
                 },
@@ -52,8 +47,8 @@ export default defineEventHandler(async event => {
                     $match: {
                         project_id: project_id,
                         created_at: {
-                            $gte: date.startOf(slice as any).toDate(),
+                            $gte: DateService.startOfSlice(date, slice),
-                            $lte: date.endOf(slice as any).toDate()
+                            $lte: DateService.endOfSlice(date, slice)
                         }
                     },
                 },
@@ -68,10 +63,7 @@ export default defineEventHandler(async event => {
             const total = visits.length;
             const bounced = sessions.filter(e => (e.duration / e.count) < 1).length;
             const bouncing_rate = 100 / total * bounced;
-            result.push({ 
+            result.push({ _id: date.toISOString(), count: bouncing_rate });
-                _id: date.toISOString(), 
-                count: bouncing_rate
-             });
         }
 
         return result;

dashboard/server/services/TimelineService.ts

@@ -31,17 +31,10 @@ export async function executeAdvancedTimelineAggregation<T = {}>(options: Advanc
 
     if (!sort) throw Error('Slice is probably not correct');
 
-    const daysDiff = fns.differenceInDays(new Date(options.to), new Date(options.from));
 
-    // 3 Days
+    const [sliceValid, errorOrDays] = checkSliceValidity(options.from, options.to, options.slice);
-    if (options.slice === 'hour' && (daysDiff > 3)) throw Error('Date gap too big for this slice');
-    // 3 Weeks
-    if (options.slice === 'day' && (daysDiff > 7 * 3)) throw Error('Date gap too big for this slice');
-    // 3 Months
-    if (options.slice === 'week' && (daysDiff > 30 * 3)) throw Error('Date gap too big for this slice');
-    // 3 Years
-    if (options.slice === 'month' && (daysDiff > 365 * 3)) throw Error('Date gap too big for this slice');
 
+    if (!sliceValid) throw Error(errorOrDays);
 
     const aggregation = [
         {
@@ -96,7 +89,11 @@ export function fillAndMergeTimelineAggregationV2(timeline: { _id: string, count
     return merged;
 }
 
-function generateDateSlices(slice: Slice, fromDate: Date, toDate: Date) {
+export function checkSliceValidity(from: string | number | Date, to: string | number | Date, slice: Slice): [false, string] | [true, number] {
+    return DateService.canUseSlice(from, to, slice);
+}
+
+export function generateDateSlices(slice: Slice, fromDate: Date, toDate: Date) {
     const slices: Date[] = [];
     let currentDate = fromDate;
     const addFunctions: { [key in Slice]: any } = { hour: fns.addHours, day: fns.addDays, week: fns.addWeeks, month: fns.addMonths, year: fns.addYears };

package.json

@@ -9,6 +9,7 @@
   "license": "MIT",
   "dependencies": {
     "@getbrevo/brevo": "^2.2.0",
+    "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
     "mongoose": "^8.3.2",
     "redis": "^4.7.0"

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@getbrevo/brevo':
         specifier: ^2.2.0
         version: 2.2.0
+      date-fns:
+        specifier: ^4.1.0
+        version: 4.1.0
       dayjs:
         specifier: ^1.11.13
         version: 1.11.13
@@ -75,7 +78,7 @@ importers:
         version: 3.14.159(@parcel/watcher@2.5.0)(@types/node@20.17.6)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.2)(sass@1.81.0)(terser@5.36.0)(typescript@5.6.3)(vite@5.4.11(@types/node@20.17.6)(sass@1.81.0)(terser@5.36.0))
       nuxt-vue3-google-signin:
         specifier: ^0.0.11
-        version: 0.0.11(@types/node@20.17.6)(magicast@0.3.5)(rollup@4.27.2)(typescript@5.6.3)(vite@5.4.11(@types/node@20.17.6)(sass@1.81.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))
+        version: 0.0.11(magicast@0.3.5)(rollup@4.27.2)(vue@3.5.13(typescript@5.6.3))
       openai:
         specifier: ^4.61.0
         version: 4.72.0
@@ -2345,6 +2348,9 @@ packages:
   date-fns@3.6.0:
     resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
 
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
   dayjs@1.11.13:
     resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
 
@@ -5411,6 +5417,11 @@ packages:
     peerDependencies:
       vue: ^3
 
+  vue3-google-signin@2.0.1:
+    resolution: {integrity: sha512-vZTlVrG56JERtqQ+6YI8e92wqfhAMDyNONCsLgKKXxzCNCWEfSkZcAvz7COm9V4bvzmGsebZ8KC3ljol2qsIcg==}
+    peerDependencies:
+      vue: ^3
+
   vue@3.5.13:
     resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
     peerDependencies:
@@ -7846,6 +7857,8 @@ snapshots:
 
   date-fns@3.6.0: {}
 
+  date-fns@4.1.0: {}
+
   dayjs@1.11.13: {}
 
   db0@0.2.1: {}
@@ -9637,6 +9650,17 @@ snapshots:
       - vite
       - vue
 
+  nuxt-vue3-google-signin@0.0.11(magicast@0.3.5)(rollup@4.27.2)(vue@3.5.13(typescript@5.6.3)):
+    dependencies:
+      '@nuxt/kit': 3.14.159(magicast@0.3.5)(rollup@4.27.2)
+      unimport: 3.13.2(rollup@4.27.2)
+      vue3-google-signin: 2.0.1(vue@3.5.13(typescript@5.6.3))
+    transitivePeerDependencies:
+      - magicast
+      - rollup
+      - supports-color
+      - vue
+
   nuxt@3.14.159(@parcel/watcher@2.5.0)(@types/node@20.17.6)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.2)(sass@1.81.0)(terser@5.36.0)(typescript@5.6.3)(vite@5.4.11(@types/node@20.17.6)(sass@1.81.0)(terser@5.36.0)):
     dependencies:
       '@nuxt/devalue': 2.0.2
@@ -11389,6 +11413,10 @@ snapshots:
       - typescript
       - vite
 
+  vue3-google-signin@2.0.1(vue@3.5.13(typescript@5.6.3)):
+    dependencies:
+      vue: 3.5.13(typescript@5.6.3)
+
   vue@3.5.13(typescript@5.6.3):
     dependencies:
       '@vue/compiler-dom': 3.5.13

shared/services/DateService.ts

@@ -1,5 +1,6 @@
 
 import dayjs from 'dayjs';
+import * as fns from 'date-fns';
 
 export type Slice = keyof typeof slicesData;
 
@@ -11,18 +12,62 @@ const slicesData = {
     year: {}
 }
 
+const startOfFunctions: { [key in Slice]: (date: Date) => Date } = {
+    hour: fns.startOfHour,
+    day: fns.startOfDay,
+    week: fns.startOfWeek,
+    month: fns.startOfMonth,
+    year: fns.startOfYear
+};
+
+const endOfFunctions: { [key in Slice]: (date: Date) => Date } = {
+    hour: fns.endOfHour,
+    day: fns.endOfDay,
+    week: fns.endOfWeek,
+    month: fns.endOfMonth,
+    year: fns.endOfYear
+};
 
 class DateService {
 
     public slicesData = slicesData;
 
     getChartLabelFromISO(iso: string, locale: string, slice: Slice) {
-        const date = dayjs(iso).locale(locale);
+        if (slice === 'hour') return fns.format(iso, 'HH:mm');
-        if (slice === 'hour') return date.format('HH:mm');
+        if (slice === 'day') return fns.format(iso, 'dd/MM');
-        if (slice === 'day') return date.format('DD/MM');
+        if (slice === 'week') return fns.format(iso, 'dd/MM');
-        if (slice === 'month') return date.format('MM MMMM');
+        if (slice === 'month') return fns.format(iso, 'MM MMMM');
-        if (slice === 'year') return date.format('YYYY');
+        if (slice === 'year') return fns.format(iso, 'YYYY');
-        return date.format();
+        return iso;
+    }
+
+    canUseSlice(from: string | number | Date, to: string | number | Date, slice: Slice) {
+        const daysDiff = fns.differenceInDays(new Date(to), new Date(from));
+        return this.canUseSliceFromDays(daysDiff, slice);
+    }
+
+    canUseSliceFromDays(days: number, slice: Slice): [false, string] | [true, number] {
+        // 3 Days
+        if (slice === 'hour' && (days > 3)) return [false, 'Date gap too big for this slice'];
+        // 3 Weeks
+        if (slice === 'day' && (days > 7 * 3)) return [false, 'Date gap too big for this slice'];
+        // 3 Months
+        if (slice === 'week' && (days > 30 * 3)) return [false, 'Date gap too big for this slice'];
+        // 3 Years
+        if (slice === 'month' && (days > 365 * 3)) return [false, 'Date gap too big for this slice'];
+        return [true, days]
+    }
+
+    startOfSlice(date: Date, slice: Slice) {
+        const fn = startOfFunctions[slice];
+        if (!fn) throw Error(`startOfFunction of slice ${slice} not found`);
+        return fn(date);
+    }
+
+    endOfSlice(date: Date, slice: Slice) {
+        const fn = endOfFunctions[slice];
+        if (!fn) throw Error(`endOfFunction of slice ${slice} not found`);
+        return fn(date);
     }