Elizhium/litlyx
1
0
Fork 0
mirror of https://github.com/Litlyx/litlyx synced 2025-12-09 23:48:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

actionable chart + date service

Browse Source
This commit is contained in:
Emily
2024-11-21 15:39:51 +01:00
parent 606eb0b035
commit b700b96191
7 changed files with 126 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
dashboard/components/SelectButton.vue
View File

@@ -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>

26
dashboard/components/dashboard/ActionableChart.vue
View File

@@ -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));
allDatesFull.value = input.map(e => e._id.toString());
const labels = input.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, selectedSlice.value));
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>

32
dashboard/server/api/timeline/bouncing_rate.ts
View File

@@ -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)
// 15 Days
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 [sliceValid, errorOrDays] = checkSliceValidity(from, to, slice);
if (!sliceValid) throw Error(errorOrDays);
const allDates = DateService.createBetweenDates(from, to, slice as any);
const allDates = generateDateSlices(slice, new Date(from), new Date(to));
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(),
$lte: date.endOf(slice as any).toDate()
$gte: DateService.startOfSlice(date, slice),
$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(),
$lte: date.endOf(slice as any).toDate()
$gte: DateService.startOfSlice(date, slice),
$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({
_id: date.toISOString(),
count: bouncing_rate
});
result.push({ _id: date.toISOString(), count: bouncing_rate });
}
return result;

17
dashboard/server/services/TimelineService.ts
View File

@@ -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
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');
const [sliceValid, errorOrDays] = checkSliceValidity(options.from, options.to, options.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 };