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

implementing snapshots

Browse Source
This commit is contained in:
Emily
2024-08-01 23:35:32 +02:00
parent 6c32b64ac6
commit 376b39e247
19 changed files with 222 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dashboard/app.vue
View File

@@ -36,7 +36,7 @@ const { showDialog, closeDialog, dialogComponent, dialogParams, dialogStyle, dia
</div>
<div v-if="debugMode"
class="absolute bottom-8 left-4 bg-red-400 text-white text-[.9rem] font-bold px-4 py-[.2rem] rounded-lg z-[100]">
class="absolute bottom-8 right-4 bg-red-400 text-white text-[.9rem] font-bold px-4 py-[.2rem] rounded-lg z-[100]">
<div class="poppins flex sm:hidden"> XS </div>
<div class="poppins hidden sm:max-md:flex"> SM - MOBILE </div>
<div class="poppins hidden md:max-lg:flex"> MD - TABLET </div>

66
dashboard/components/CVerticalNavigation.vue
View File

@@ -9,7 +9,8 @@ export type Entry = {
icon?: string,
action?: () => any,
adminOnly?: boolean,
external?: boolean
external?: boolean,
grow?: boolean
}
export type Section = {
@@ -66,24 +67,35 @@ async function deleteSnapshot(close: () => any) {
async function generatePDF() {
try {
const res = await $fetch<Blob>('/api/project/generate_pdf', {
...signHeaders(),
responseType: 'blob'
});
try {
const res = await $fetch<Blob>('/api/project/generate_pdf', {
...signHeaders(),
responseType: 'blob'
});
const url = URL.createObjectURL(res);
const a = document.createElement('a');
a.href = url;
a.download = `Report.pdf`;
a.click();
URL.revokeObjectURL(url);
} catch (ex: any) {
alert(ex.message);
const url = URL.createObjectURL(res);
const a = document.createElement('a');
a.href = url;
a.download = `Report.pdf`;
a.click();
URL.revokeObjectURL(url);
} catch (ex: any) {
alert(ex.message);
}
}
const { setToken } = useAccessToken();
const router = useRouter();
function onLogout() {
console.log('LOGOUT')
setToken('');
setLoggedUser(undefined);
router.push('/login');
}
</script>
<template>
@@ -95,10 +107,14 @@ try {
<div class="p-4 gap-6 flex flex-col w-full">
<div class="flex items-center gap-2 ml-2">
<div class="bg-black h-[2.4rem] aspect-[1/1] flex items-center justify-center rounded-lg">
<!-- <div class="bg-black h-[2.4rem] aspect-[1/1] flex items-center justify-center rounded-lg">
<img class="h-[2rem]" :src="'/logo.png'">
</div>
<div class="font-bold text-[1.4rem] text-gray-300"> Litlyx </div>
</div> -->
<!-- <div class="font-bold text-[1.4rem] text-gray-300"> Litlyx </div> -->
<div class="text-center w-full"> PROJECT SELECTOR </div>
<div class="grow flex justify-end text-[1.4rem] mr-2 lg:hidden">
<i @click="close()" class="fas fa-close"></i>
@@ -175,7 +191,7 @@ try {
</div>
</div>
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-4 h-full">
<div v-for="section of sections" class="flex flex-col gap-1">
@@ -185,7 +201,7 @@ try {
class="bg-lyx-background text-gray-300 py-2 px-4 rounded-lg" :class="{
'text-gray-700 pointer-events-none': entry.disabled,
'bg-lyx-background-lighter': route.path == (entry.to || '#'),
'hover:bg-lyx-background-light': route.path != (entry.to || '#')
'hover:bg-lyx-background-light': route.path != (entry.to || '#'),
}">
<NuxtLink @click="close() && entry.action?.()" :target="entry.external ? '_blank' : ''"
@@ -204,6 +220,18 @@ try {
</div>
<div class="grow"></div>
<div class="bg-lyx-background hover:bg-lyx-background-light text-gray-300 py-2 px-4 rounded-lg">
<div @click="onLogout()" class="flex cursor-pointer">
<div class="flex items-center w-[1.8rem] justify-start">
<i class="far fa-arrow-right-from-bracket"></i>
</div>
<div class="manrope">
Logout
</div>
</div>
</div>
</div>
</div>
</div>

44
dashboard/components/dashboard/EventsChart.vue
View File

@@ -55,7 +55,7 @@ const chartData = ref<ChartData<'doughnut'>>({
{
rotation: 1,
data: [],
backgroundColor: ['#6bbbe3','#5655d0', '#a6d5cb', '#fae0b9'],
backgroundColor: ['#6bbbe3', '#5655d0', '#a6d5cb', '#fae0b9'],
borderColor: ['#1d1d1f'],
borderWidth: 2
},
@@ -65,27 +65,45 @@ const chartData = ref<ChartData<'doughnut'>>({
const { doughnutChartProps, doughnutChartRef } = useDoughnutChart({ chartData: chartData, options: chartOptions });
const res = useEventsData();
onMounted(async () => {
const activeProject = useActiveProject()
res.onResponse(resData => {
if (!resData.value) return;
const eventsData = await $fetch<EventsPie[]>(`/api/metrics/${activeProject.value?._id}/visits/events`, signHeaders());
chartData.value.labels = eventsData.map(e => {
return `${e._id}`;
});
chartData.value.datasets[0].data = eventsData.map(e => e.count);
doughnutChartRef.value?.update();
chartData.value.labels = resData.value.map(e => {
return `${e._id}`;
});
if (window.innerWidth < 800) {
if (chartOptions.value?.plugins?.legend?.display) {
chartOptions.value.plugins.legend.display = false;
chartData.value.datasets[0].data = resData.value.map(e => e.count);
doughnutChartRef.value?.update();
if (window.innerWidth < 800) {
if (chartOptions.value?.plugins?.legend?.display) {
chartOptions.value.plugins.legend.display = false;
}
}
}
});
})
const chartVisible = computed(() => {
if (res.pending.value) return false;
if (!res.data.value) return false;
return true;
})
</script>
<template>
<DoughnutChart v-bind="doughnutChartProps"> </DoughnutChart>
<div>
<div v-if="!chartVisible" class="flex justify-center py-40">
<i class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
</div>
<DoughnutChart v-if="chartVisible" v-bind="doughnutChartProps"> </DoughnutChart>
</div>
</template>

86
dashboard/components/events/EventsStackedBarChart.vue
View File

@@ -1,52 +1,74 @@
<script lang="ts" setup>
import type { Slice } from '@services/DateService';
import { onMounted } from 'vue';
const datasets = ref<any[]>([]);
const labels = ref<string[]>([]);
const ready = ref<boolean>(false);
const props = defineProps<{ slice: Slice }>();
const props = defineProps<{ slice: SliceName }>();
const slice = computed(() => props.slice);
async function loadData() {
const response = await useTimelineDataRaw('events_stacked', props.slice);
if (!response) return;
const res = useEventsStackedTimeline(slice);
const fixed = fixMetrics(response, props.slice, { advanced: true, advancedGroupKey: 'name' });
const parsedDatasets: any[] = [];
const colors = ['#5655d0', '#6bbbe3', '#a6d5cb', '#fae0b9'];
for (let i = 0; i < fixed.allKeys.length; i++) {
const line: any = {
data: [],
color: colors[i] || '#FF0000',
label: fixed.allKeys[i]
};
parsedDatasets.push(line)
fixed.data.forEach((e: { key: string, value: number }[]) => {
const target = e.find(e => e.key == fixed.allKeys[i]);
if (!target) return;
line.data.push(target.value);
});
}
datasets.value = parsedDatasets;
labels.value = fixed.labels;
ready.value = true;
}
const { safeSnapshotDates } = useSnapshot()
onMounted(async () => {
await loadData();
watch(props, async () => { await loadData(); });
res.execute();
res.onResponse(resData => {
if (!resData.value) return;
const fixed = fixMetrics({
data:resData.value,
from: safeSnapshotDates.value.from,
to: safeSnapshotDates.value.to
}, slice.value, {
advanced: true,
advancedGroupKey: 'name'
});
const parsedDatasets: any[] = [];
const colors = ['#5655d0', '#6bbbe3', '#a6d5cb', '#fae0b9'];
for (let i = 0; i < fixed.allKeys.length; i++) {
const line: any = {
data: [],
color: colors[i] || '#FF0000',
label: fixed.allKeys[i]
};
parsedDatasets.push(line)
fixed.data.forEach((e: { key: string, value: number }[]) => {
const target = e.find(e => e.key == fixed.allKeys[i]);
if (!target) return;
line.data.push(target.value);
});
}
datasets.value = parsedDatasets;
labels.value = fixed.labels;
ready.value = true;
});
})
const chartVisible = computed(() => {
if (res.pending.value) return false;
if (!res.data.value) return false;
return true;
})
</script>
<template>
<div>
<AdvancedStackedBarChart v-if="ready" :datasets="datasets" :labels="labels">
<div v-if="!chartVisible" class="flex justify-center py-40">
<i class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
</div>
<AdvancedStackedBarChart v-if="chartVisible" :datasets="datasets" :labels="labels">
</AdvancedStackedBarChart>
</div>
</template>

0
dashboard/pages/plans.vue → dashboard/components/settings/billing.vue
View File

0
dashboard/pages/members.vue → dashboard/components/settings/members.vue
View File

15
dashboard/composables/useDataService.ts
View File

@@ -46,8 +46,8 @@ export function useFirstInteractionData() {
}
export function useTimelineAdvanced(endpoint: string, slice: Ref<Slice>, customBody: Object = {}) {
const response = useCustomFetch<{ _id: string, count: number }[]>(
export function useTimelineAdvanced<T>(endpoint: string, slice: Ref<Slice>, customBody: Object = {}) {
const response = useCustomFetch<T>(
`/api/metrics/${activeProject.value?._id}/timeline/${endpoint}`,
() => signHeaders({ 'Content-Type': 'application/json' }).headers, {
method: 'POST',
@@ -59,12 +59,16 @@ export function useTimelineAdvanced(endpoint: string, slice: Ref<Slice>, customB
}
export function useTimeline(endpoint: 'visits' | 'sessions' | 'referrers', slice: Ref<Slice>) {
return useTimelineAdvanced(endpoint, slice);
export function useTimeline(endpoint: 'visits' | 'sessions' | 'referrers' | 'events_stacked', slice: Ref<Slice>) {
return useTimelineAdvanced<{ _id: string, count: number }[]>(endpoint, slice);
}
export async function useReferrersTimeline(referrer: string, slice: Ref<Slice>) {
return await useTimelineAdvanced('referrers', slice, { referrer });
return await useTimelineAdvanced<{ _id: string, count: number }[]>('referrers', slice, { referrer });
}
export function useEventsStackedTimeline(slice: Ref<Slice>) {
return useTimelineAdvanced<{ _id: string, name: string, count: number }[]>('events_stacked', slice);
}
@@ -163,3 +167,4 @@ export function useDevicesData(limit: number = 10) {
);
return res;
}

22
dashboard/layouts/dashboard.vue
View File

@@ -12,7 +12,7 @@ const sections: Section[] = [
title: 'General',
entries: [
{ label: 'Projects', icon: 'far fa-table-layout', to: '/project_selector' },
{ label: 'Members', icon: 'far fa-users', to: '/members' },
// { label: 'Members', icon: 'far fa-users', to: '/members' },
{ label: 'Admin', icon: 'fas fa-cat', adminOnly: true, to: '/admin' },
]
},
@@ -22,6 +22,7 @@ const sections: Section[] = [
{ label: 'Dashboard', to: '/', icon: 'far fa-home' },
{ label: 'Events', to: '/events', icon: 'far fa-bolt' },
{ label: 'Analyst', to: '/analyst', icon: 'far fa-microchip-ai' },
{ label: 'Settings', to: '/settings', icon: 'far fa-gear' },
// { label: 'Report', to: '/report', icon: 'far fa-notes' },
// { label: 'AI', to: '/dashboard/settings', icon: 'far fa-robot brightness-[.4]' },
// { label: 'Visits', to: '/dashboard/visits', icon: 'far fa-eye' },
@@ -39,23 +40,8 @@ const sections: Section[] = [
label: 'Github', to: 'https://github.com/litlyx/litlyx', icon: 'fab fa-github', external: true,
action() { Lit.event('git_clicked') },
},
{ label: 'Billing', to: '/plans', icon: 'far fa-wallet' },
{ label: 'Book a demo', to: '/book_demo', icon: 'far fa-calendar' },
]
},
{
title: 'Actions',
entries: [
{
label: 'Logout',
icon: 'far fa-arrow-right-from-bracket',
action: () => {
console.log('LOGOUT')
setToken('');
setLoggedUser(undefined);
router.push('/login');
}
},
// { label: 'Billing', to: '/plans', icon: 'far fa-wallet' },
// { label: 'Book a demo', to: '/book_demo', icon: 'far fa-calendar' },
]
}
];

16
dashboard/pages/events.vue
View File

@@ -17,7 +17,8 @@ const eventsStackedSelectIndex = ref<number>(0);
<div class="flex gap-6 flex-col xl:flex-row">
<CardTitled class="p-4 flex-[4]" title="Events" sub="Events stacked bar chart.">
<CardTitled class="p-4 flex-[4] w-full" title="Events" sub="Events stacked bar chart.">
<template #header>
<SelectButton @changeIndex="eventsStackedSelectIndex = $event"
:currentIndex="eventsStackedSelectIndex" :options="selectLabelsEvents">
@@ -29,19 +30,10 @@ const eventsStackedSelectIndex = ref<number>(0);
</div>
</CardTitled>
<div class="bg-card p-4 rounded-xl flex-[2] flex flex-col gap-10 h-full">
<div class="flex flex-col gap-1">
<div class="poppins font-semibold text-[1.4rem] text-text">
Top events
</div>
<div class="poppins text-[1rem] text-text-sub/90">
Displays key events.
</div>
</div>
<CardTitled class="p-4 flex-[2] w-full h-full" title="Top events" sub="Displays key events.">
<DashboardEventsChart class="w-full"> </DashboardEventsChart>
</CardTitled>
</div>
</div>
<div class="flex">

8
dashboard/pages/index.vue
View File

@@ -70,10 +70,6 @@ const selectLabels = [
// { label: 'Month', value: 'month' },
];
function testAlert() {
createAlert('test', 'test', 'fas fa-home', 40000);
}
</script>
@@ -99,7 +95,7 @@ function testAlert() {
<div class="mt-6 px-6 flex gap-6 flex-col 2xl:flex-row">
<CardTitled class="p-4 flex-1" title="Visits trends" sub="Shows trends in page visits.">
<CardTitled class="p-4 flex-1 w-full" title="Visits trends" sub="Shows trends in page visits.">
<template #header>
<SelectButton @changeIndex="mainChartSelectIndex = $event" :currentIndex="mainChartSelectIndex"
:options="selectLabels">
@@ -111,7 +107,7 @@ function testAlert() {
</div>
</CardTitled>
<CardTitled class="p-4 flex-1" title="Sessions" sub="Shows trends in sessions.">
<CardTitled class="p-4 flex-1 w-full" title="Sessions" sub="Shows trends in sessions.">
<template #header>
<SelectButton @changeIndex="sessionsChartSelectIndex = $event"
:currentIndex="sessionsChartSelectIndex" :options="selectLabels">

34
dashboard/pages/settings.vue Normal file
View File

@@ -0,0 +1,34 @@
<script lang="ts" setup>
definePageMeta({ layout: 'dashboard' });
const items = [
{ label: 'General', slot: 'general' },
{ label: 'Members', slot: 'members' },
{ label: 'Billing', slot: 'billing' },
{ label: 'Account', slot: 'account' }
]
</script>
<template>
<div class="px-10 py-8 h-dvh overflow-y-auto">
<div class="poppins font-semibold text-[1.3rem]"> Settings </div>
<UTabs :items="items" class="mt-8">
<template #general>
TODO
</template>
<template #members>
<SettingsMembers></SettingsMembers>
</template>
<template #billing>
<SettingsBilling></SettingsBilling>
</template>
<template #account>
TODO
</template>
</UTabs>
</div>
</template>

4
dashboard/server/api/metrics/[project_id]/timeline/events.post.ts
View File

@@ -15,8 +15,8 @@ export default defineEventHandler(async event => {
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');
if (!to) return setResponseStatus(event, 400, 'to is required');
if (!slice) return setResponseStatus(event, 400, 'slice is required');
return await Redis.useCache({
key: `timeline:events:${project_id}:${slice}:${from || 'none'}:${to || 'none'}`,

24
dashboard/server/api/metrics/[project_id]/timeline/events_stacked.post.ts
View File

@@ -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 { executeAdvancedTimelineAggregation } from "~/server/services/TimelineService";
export default defineEventHandler(async event => {
const project_id = getRequestProjectId(event);
@@ -11,16 +12,23 @@ export default defineEventHandler(async event => {
if (!project) return;
const { slice, duration } = await readBody(event);
const { slice, from, to } = await readBody(event);
if (!from) return setResponseStatus(event, 400, 'from is required');
if (!to) return setResponseStatus(event, 400, 'to is required');
if (!slice) return setResponseStatus(event, 400, 'slice is required');
return await Redis.useCache({ key: `timeline:events_stacked:${project_id}:${slice}`, exp: TIMELINE_EXPIRE_TIME }, async () => {
const timelineStackedEvents = await getTimeline(EventModel, project_id, slice, duration,
{},
{},
{ name: "$_id.name" },
{ name: '$name' }
);
return await Redis.useCache({ key: `timeline:events_stacked:${project_id}:${slice}:${from || 'none'}:${to || 'none'}`, exp: TIMELINE_EXPIRE_TIME }, async () => {
const timelineStackedEvents = await executeAdvancedTimelineAggregation<{ name: String }>({
model: EventModel,
projectId: project._id,
from, to, slice,
customProjection: { name: "$_id.name" },
customIdGroup: { name: '$name' },
})
return timelineStackedEvents;
});

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

@@ -16,8 +16,8 @@ export default defineEventHandler(async 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');
if (!to) return setResponseStatus(event, 400, 'to is required');
if (!slice) return setResponseStatus(event, 400, 'slice is required');
return await Redis.useCache({
key: `timeline:referrers:${referrer}:${project_id}:${slice}:${from || 'none'}:${to || 'none'}`,

4
dashboard/server/api/metrics/[project_id]/timeline/sessions.post.ts
View File

@@ -16,8 +16,8 @@ export default defineEventHandler(async event => {
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');
if (!to) return setResponseStatus(event, 400, 'to is required');
if (!slice) return setResponseStatus(event, 400, 'slice is required');
return await Redis.useCache({
key: `timeline:sessions:${project_id}:${slice}:${from || 'none'}:${to || 'none'}`,

4
dashboard/server/api/metrics/[project_id]/timeline/sessions_duration.post.ts
View File

@@ -27,8 +27,8 @@ export default defineEventHandler(async event => {
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');
if (!to) return setResponseStatus(event, 400, 'to is required');
if (!slice) return setResponseStatus(event, 400, 'slice is required');
return await Redis.useCache({
key: `timeline:sessions_duration:${project_id}:${slice}:${from || 'none'}:${to || 'none'}`,

4
dashboard/server/api/metrics/[project_id]/timeline/visits.post.ts
View File

@@ -17,8 +17,8 @@ export default defineEventHandler(async event => {
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');
if (!to) return setResponseStatus(event, 400, 'to is required');
if (!slice) return setResponseStatus(event, 400, 'slice is required');
return await Redis.useCache({
key: `timeline:visits:${project_id}:${slice}:${from || 'none'}:${to || 'none'}`,

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

@@ -16,14 +16,16 @@ export type TimelineAggregationOptions = {
export type AdvancedTimelineAggregationOptions = TimelineAggregationOptions & {
customMatch?: Record<string, any>,
customGroup?: Record<string, any>,
customProjection?: Record<string, any>
customProjection?: Record<string, any>,
customIdGroup?: Record<string, any>
}
export async function executeAdvancedTimelineAggregation(options: AdvancedTimelineAggregationOptions) {
export async function executeAdvancedTimelineAggregation<T = {}>(options: AdvancedTimelineAggregationOptions) {
options.customMatch = options.customMatch || {};
options.customGroup = options.customGroup || {};
options.customProjection = options.customProjection || {};
options.customIdGroup = options.customIdGroup || {};
const { group, sort, fromParts } = DateService.getQueryDateRange(options.slice);
@@ -35,7 +37,7 @@ export async function executeAdvancedTimelineAggregation(options: AdvancedTimeli
...options.customMatch
}
},
{ $group: { _id: group, count: { $sum: 1 }, ...options.customGroup } },
{ $group: { _id: { ...group, ...options.customIdGroup }, count: { $sum: 1 }, ...options.customGroup } },
{ $sort: sort },
{ $project: { _id: { $dateFromParts: fromParts }, count: "$count", ...options.customProjection } }
]
@@ -44,7 +46,7 @@ export async function executeAdvancedTimelineAggregation(options: AdvancedTimeli
console.log(JSON.stringify(aggregation, null, 2));
}
const timeline: { _id: string, count: number }[] = await options.model.aggregate(aggregation);
const timeline: { _id: string, count: number & T }[] = await options.model.aggregate(aggregation);
return timeline;

3
dashboard/utils/DateUtils.ts
View File

@@ -60,7 +60,6 @@ export function fixMetrics(result: { data: MetricsTimeline[], from: string, to:
}
}
const allKeys = !options.advanced ? [] : Array.from(new Set(result.data.map((e: any) => e[options.advancedGroupKey])).values());
const fixed: any[] = allDates.map(matchDate => {
@@ -85,6 +84,8 @@ export function fixMetrics(result: { data: MetricsTimeline[], from: string, to:
return returnObject;
});
console.log({ allKeys })
if (slice === 'day' || slice == 'hour') fixed.pop();
const data = fixed.map(e => e.count);