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

Merge branch 'snapshots'

Browse Source
This commit is contained in:
Emily
2024-08-07 15:06:44 +02:00
parent 985b3af2e0 4c9efda9ca
commit 1b88bad32d
89 changed files with 2602 additions and 1082 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
broker/src/StreamLoopController.ts
View File

@@ -97,6 +97,11 @@ async function process_keep_alive(data: Record<string, string>, sessionHash: str
const { pid, instant, flowHash } = data;
const existingSession = await SessionModel.findOne({ project_id: pid }, { _id: 1 });
if (!existingSession) {
await ProjectCountModel.updateOne({ project_id: pid }, { $inc: { 'sessions': 1 } }, { upsert: true });
}
if (instant == "true") {
await SessionModel.updateOne({ project_id: pid, session: sessionHash, }, {
$inc: { duration: 0 },

35
dashboard/app.vue
View File

@@ -6,15 +6,37 @@ Lit.init('6643cd08a1854e3b81722ab5');
const debugMode = process.dev;
const { showDialog, closeDialog, dialogComponent, dialogParams } = useCustomDialog();
const { alerts, closeAlert } = useAlert();
const { showDialog, closeDialog, dialogComponent, dialogParams, dialogStyle, dialogClosable } = useCustomDialog();
</script>
<template>
<div class="w-dvw h-dvh bg-[#151517] relative">
<div class="w-dvw h-dvh bg-lyx-background-light relative">
<div class="fixed top-4 right-8 z-[999] flex flex-col gap-2" v-if="alerts.length > 0">
<div v-for="alert of alerts"
class="w-[30vw] min-w-[20rem] relative bg-[#151515] overflow-hidden border-solid border-[2px] border-[#262626] rounded-lg p-6 drop-shadow-lg">
<div class="flex items-start gap-4">
<div> <i :class="alert.icon"></i> </div>
<div class="grow">
<div class="poppins font-semibold">{{ alert.title }}</div>
<div class="poppins">
{{ alert.text }}
</div>
</div>
<div>
<i @click="closeAlert(alert.id)" class="fas fa-close hover:text-[#CCCCCC] cursor-pointer"></i>
</div>
</div>
<div :style="`width: ${Math.floor(100 / alert.ms * alert.remaining)}%; ${alert.transitionStyle}`"
class="absolute bottom-0 left-0 h-1 bg-lyx-primary z-100 alert-bar"></div>
</div>
</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>
@@ -24,9 +46,9 @@ const { showDialog, closeDialog, dialogComponent, dialogParams } = useCustomDial
</div>
<div v-if="showDialog"
class="custom-dialog flex items-center justify-center lg:pl-32 lg:p-20 p-4 absolute left-0 top-0 w-full h-full z-[100] backdrop-blur-[2px] bg-black/50">
<div class="bg-menu w-full h-full rounded-xl relative">
<div class="flex justify-end absolute z-[100] right-8 top-8">
class="custom-dialog w-full h-full flex items-center justify-center lg:pl-32 lg:p-20 p-4 absolute left-0 top-0 z-[100] backdrop-blur-[2px] bg-black/50">
<div :style="dialogStyle" class="bg-lyx-widget rounded-xl relative outline outline-1 outline-lyx-widget-lighter">
<div v-if="dialogClosable" class="flex justify-end absolute z-[100] right-8 top-8">
<i @click="closeDialog()" class="fas fa-close text-[1.6rem] hover:text-gray-500 cursor-pointer"></i>
</div>
<div class="flex items-center justify-center w-full h-full p-4">
@@ -41,3 +63,4 @@ const { showDialog, closeDialog, dialogComponent, dialogParams } = useCustomDial
</div>
</template>

4
dashboard/components/AdvancedLineChart.vue
View File

@@ -80,6 +80,7 @@ const { lineChartProps, lineChartRef } = useLineChart({ chartData: chartData, op
onMounted(async () => {
const c = document.createElement('canvas');
const ctx = c.getContext("2d");
let gradient: any = `${props.color}22`;
@@ -95,7 +96,6 @@ onMounted(async () => {
chartData.value.datasets[0].backgroundColor = [gradient];
watch(props, () => {
console.log('UPDATE')
chartData.value.labels = props.labels;
chartData.value.datasets[0].data = props.data;
});
@@ -106,5 +106,5 @@ onMounted(async () => {
<template>
<LineChart ref="lineChartRef" v-bind="lineChartProps"> </LineChart>
<LineChart ref="lineChartRef" v-bind="lineChartProps"> </LineChart>
</template>

280
dashboard/components/CVerticalNavigation.vue
View File

@@ -1,5 +1,7 @@
<script lang="ts" setup>
import type { TProject } from '@schema/ProjectSchema';
import CreateSnapshot from './dialog/CreateSnapshot.vue';
export type Entry = {
label: string,
@@ -8,7 +10,8 @@ export type Entry = {
icon?: string,
action?: () => any,
adminOnly?: boolean,
external?: boolean
external?: boolean,
grow?: boolean
}
export type Section = {
@@ -29,42 +32,238 @@ const debugMode = process.dev;
const { isOpen, close } = useMenu();
const { snapshots, snapshot, updateSnapshots } = useSnapshot();
const snapshotsItems = computed(() => {
if (!snapshots.value) return []
return snapshots.value as any[];
})
const { openDialogEx } = useCustomDialog();
function openSnapshotDialog() {
openDialogEx(CreateSnapshot, {
width: "24rem",
height: "16rem",
closable: false
});
}
const { createAlert } = useAlert()
async function deleteSnapshot(close: () => any) {
await $fetch("/api/snapshot/delete", {
method: 'DELETE',
...signHeaders({ 'Content-Type': 'application/json' }),
body: JSON.stringify({
id: snapshot.value._id.toString(),
})
});
await updateSnapshots();
snapshot.value = snapshots.value[1];
createAlert('Snapshot deleted', 'Snapshot deleted successfully', 'far fa-circle-check', 5000);
close();
}
async function generatePDF() {
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 { setToken } = useAccessToken();
const router = useRouter();
function onLogout() {
console.log('LOGOUT')
setToken('');
setLoggedUser(undefined);
router.push('/login');
}
const { projects } = useProjectsList();
const activeProject = useActiveProject();
const { data: maxProjects } = useFetch("/api/user/max_projects", {
headers: computed(() => {
return {
Authorization: authorizationHeaderComputed.value
}
})
});
const selected = ref<TProject>(activeProject.value as TProject);
watch(selected, () => {
setActiveProject(selected.value._id.toString())
})
</script>
<template>
<div class="CVerticalNavigation h-full w-[20rem] bg-[#111111] flex shadow-[1px_0_10px_#000000] rounded-r-lg" :class="{
'absolute top-0 w-full md:w-[20rem] z-[45] open': isOpen,
'hidden lg:flex': !isOpen
}">
<div class="p-4 gap-6 flex flex-col w-full">
<div class="CVerticalNavigation h-full w-[20rem] bg-lyx-background flex shadow-[1px_0_10px_#000000] rounded-r-lg"
:class="{
'absolute top-0 w-full md:w-[20rem] z-[45] open': isOpen,
'hidden lg:flex': !isOpen
}">
<div class="py-4 px-2 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">
<img class="h-[2rem]" :src="'/logo.png'">
</div>
<div class="font-bold text-[1.4rem] text-gray-300"> Litlyx </div>
<div class="flex px-2 flex-col">
<div class="flex items-center gap-2 w-full">
<USelectMenu :uiMenu="{
select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
base: '!bg-lyx-widget',
option: {
base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
active: '!bg-lyx-widget-lighter'
}
}" class="w-full" v-if="projects" v-model="selected" :options="projects">
<template #option="{ option, active, selected }">
<div class="flex items-center gap-2">
<div>
<img class="h-5 bg-black rounded-full" :src="'logo_32.png'" alt="Litlyx logo">
</div>
<div> {{ option.name }} </div>
</div>
</template>
<template #label>
<div class="flex items-center gap-2">
<div>
<img class="h-5 bg-black rounded-full" :src="'logo_32.png'" alt="Litlyx logo">
</div>
<div> {{ activeProject?.name || '???' }} </div>
</div>
</template>
</USelectMenu>
<div class="grow flex justify-end text-[1.4rem] mr-2 lg:hidden">
<i @click="close()" class="fas fa-close"></i>
</div>
<div class="grow flex justify-end text-[1.4rem] mr-2 lg:hidden">
<i @click="close()" class="fas fa-close"></i>
</div>
<NuxtLink to="/project_creation" v-if="projects && (projects.length < (maxProjects || 1))"
class="flex items-center text-[.8rem] gap-1 justify-end pt-2 pr-2 text-lyx-text-dark hover:text-lyx-text cursor-pointer">
<div><i class="fas fa-plus"></i></div>
<div> Create new project </div>
</NuxtLink>
</div>
<div class="flex flex-col gap-4">
<div class="w-full flex-col px-2">
<div class="flex mb-2 items-center justify-between">
<div class="poppins text-[.8rem]">
Snapshots
</div>
<div @click="openSnapshotDialog()"
class="poppins text-[.8rem] px-2 rounded-lg outline outline-[2px] outline-lyx-widget-lighter cursor-pointer hover:bg-lyx-widget-lighter">
<i class="far fa-plus"></i>
Add
</div>
</div>
<USelectMenu :uiMenu="{
select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
base: '!bg-lyx-widget',
option: {
base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
active: '!bg-lyx-widget-lighter'
}
}" class="w-full" v-model="snapshot" :options="snapshotsItems">
<template #label>
<div class="flex items-center gap-2">
<div :style="'background-color:' + snapshot?.color" class="w-2 h-2 rounded-full">
</div>
<div class="poppins"> {{ snapshot?.name }} </div>
</div>
</template>
<template #option="{ option }">
<div class="flex items-center gap-2">
<div :style="'background-color:' + option.color" class="w-2 h-2 rounded-full">
</div>
<div class="poppins"> {{ option.name }} </div>
</div>
</template>
</USelectMenu>
<div v-if="snapshot" class="flex flex-col text-[.8rem] mt-2">
<div class="flex">
<div class="grow poppins"> From:</div>
<div class="poppins"> {{ new Date(snapshot.from).toLocaleString('it-IT').split(',')[0].trim() }}
</div>
</div>
<div class="flex">
<div class="grow poppins"> To:</div>
<div class="poppins"> {{ new Date(snapshot.to).toLocaleString('it-IT').split(',')[0].trim() }}
</div>
</div>
<LyxUiButton @click="generatePDF()" type="secondary" class="w-full text-center mt-4">
Download report
</LyxUiButton>
<div class="mt-2" v-if="snapshot._id.toString().startsWith('default') === false">
<UPopover placement="bottom">
<LyxUiButton type="danger" class="w-full text-center">
Delete current snapshot
</LyxUiButton>
<template #panel="{ close }">
<div class="p-4 bg-lyx-widget">
<div class="poppins text-center font-medium">
Are you sure?
</div>
<div class="flex gap-2 mt-4">
<LyxUiButton @click="close()" type="secondary"> Cancel </LyxUiButton>
<LyxUiButton type="danger" @click="deleteSnapshot(close)"> Delete </LyxUiButton>
</div>
</div>
</template>
</UPopover>
</div>
</div>
</div>
<div class="bg-lyx-widget-lighter h-[2px] w-full"></div>
<div class="flex flex-col h-full">
<div v-for="section of sections" class="flex flex-col gap-1">
<div v-for="entry of section.entries">
<div v-if="(!entry.adminOnly || (isAdmin && !isAdminHidden))"
class="bg-[#111111] text-gray-300 hover:bg-[#1b1b1b] py-2 px-4 rounded-lg" :class="{
'text-gray-700 pointer-events-none': entry.disabled,
'bg-[#1b1b1b]': route.path == (entry.to || '#')
class="bg-lyx-background cursor-pointer text-lyx-text-dark py-[.35rem] px-2 rounded-lg text-[.95rem] flex items-center"
:class="{
'!text-lyx-text-darker pointer-events-none': entry.disabled,
'bg-lyx-background-lighter !text-lyx-text/90': route.path == (entry.to || '#'),
'hover:bg-lyx-background-light hover:!text-lyx-text/90': route.path != (entry.to || '#'),
}">
<NuxtLink @click="close() && entry.action?.()" :target="entry.external ? '_blank' : ''"
tag="div" class="flex" :to="entry.to || '/'">
<div class="flex items-center w-[1.8rem] justify-start">
tag="div" class="w-full flex items-center" :to="entry.to || '/'">
<div class="flex items-center w-[1.4rem] mr-2 text-[1.1rem] justify-center">
<i :class="entry.icon"></i>
</div>
<div class="manrope">
@@ -78,6 +277,45 @@ const { isOpen, close } = useMenu();
</div>
<div class="grow"></div>
<div class="text-lyx-text-dark poppins text-[.8rem] px-4 pb-3">
Litlyx is in Beta version.
</div>
<div class="bg-lyx-widget-lighter h-[2px] px-4 w-full mb-3"></div>
<div class="flex justify-end px-2">
<div class="grow flex gap-3">
<NuxtLink to="https://github.com/litlyx/litlyx" target="_blank"
class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
<i class="fab fa-github"></i>
</NuxtLink>
<NuxtLink to="https://discord.gg/9cQykjsmWX" target="_blank"
class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
<i class="fab fa-discord"></i>
</NuxtLink>
<NuxtLink to="https://x.com/litlyx" target="_blank"
class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
<i class="fab fa-x-twitter"></i>
</NuxtLink>
<NuxtLink to="https://dev.to/litlyx-org" target="_blank"
class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
<i class="fab fa-dev"></i>
</NuxtLink>
<NuxtLink to="/admin" v-if="isAdmin"
class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
<i class="fas fa-cat"></i>
</NuxtLink>
</div>
<UTooltip text="Logout" :popper="{ arrow: true, placement: 'top' }">
<div @click="onLogout()" class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
<i class="far fa-arrow-right-from-bracket scale-x-[-100%]"></i>
</div>
</UTooltip>
</div>
</div>
</div>
</div>
@@ -85,10 +323,6 @@ const { isOpen, close } = useMenu();
<style lang="scss" scoped>
.CVerticalNavigation * {
font-family: 'Geist';
}
input:focus {
outline: none;
}

4
dashboard/components/CardTitled.vue
View File

@@ -5,7 +5,7 @@ const props = defineProps<{ title: string, sub?: string }>();
</script>
<template>
<Card>
<LyxUiCard>
<div class="flex flex-col gap-4">
<div class="flex items-center">
<div class="flex flex-col grow">
@@ -23,5 +23,5 @@ const props = defineProps<{ title: string, sub?: string }>();
<slot></slot>
</div>
</div>
</Card>
</LyxUiCard>
</template>

28
dashboard/components/CustomTab.vue Normal file
View File

@@ -0,0 +1,28 @@
<script lang="ts" setup>
type CItem = { label: string, slot: string }
const props = defineProps<{ items: CItem[] }>();
const activeTabIndex = ref<number>(0);
</script>
<template>
<div>
<div class="flex">
<div v-for="(tab, index) of items" @click="activeTabIndex = index"
class="px-6 pb-3 poppins font-medium text-lyx-text-darker border-b-[1px] border-lyx-text-darker" :class="{
'!border-[#88A7FF] !text-[#88A7FF]': activeTabIndex === index,
'hover:border-lyx-text-dark hover:text-lyx-text-dark cursor-pointer': activeTabIndex !== index
}">
{{ tab.label }}
</div>
<div class="border-b-[1px] border-lyx-text-darker w-full">
</div>
</div>
<div>
<slot :name="props.items[activeTabIndex].slot"></slot>
</div>
</div>
</template>

63
dashboard/components/DatePicker.vue Normal file
View File

@@ -0,0 +1,63 @@
<script setup lang="ts">
import { DatePicker as VCalendarDatePicker } from 'v-calendar'
import type { DatePickerDate, DatePickerRangeObject } from 'v-calendar/dist/types/src/use/datePicker'
import 'v-calendar/dist/style.css'
const props = defineProps({
modelValue: {
type: [Date, Object] as PropType<DatePickerDate | DatePickerRangeObject | null>,
default: null
}
})
const emit = defineEmits(['update:model-value', 'close'])
const date = computed({
get: () => props.modelValue,
set: (value) => {
emit('update:model-value', value)
emit('close')
}
})
const attrs = {
transparent: true,
borderless: true,
color: 'primary',
'is-dark': { selector: 'html', darkClass: 'dark' },
'first-day-of-week': 2,
}
</script>
<template>
<VCalendarDatePicker v-if="date && (typeof date === 'object')" v-model.range="date" :columns="2" v-bind="{ ...attrs, ...$attrs }" />
<VCalendarDatePicker v-else v-model="date" v-bind="{ ...attrs, ...$attrs }" />
</template>
<style>
:root {
--vc-gray-50: rgb(var(--color-gray-50));
--vc-gray-100: rgb(var(--color-gray-100));
--vc-gray-200: rgb(var(--color-gray-200));
--vc-gray-300: rgb(var(--color-gray-300));
--vc-gray-400: rgb(var(--color-gray-400));
--vc-gray-500: rgb(var(--color-gray-500));
--vc-gray-600: rgb(var(--color-gray-600));
--vc-gray-700: rgb(var(--color-gray-700));
--vc-gray-800: rgb(var(--color-gray-800));
--vc-gray-900: rgb(var(--color-gray-900));
}
.vc-primary {
--vc-accent-50: rgb(var(--color-primary-50));
--vc-accent-100: rgb(var(--color-primary-100));
--vc-accent-200: rgb(var(--color-primary-200));
--vc-accent-300: rgb(var(--color-primary-300));
--vc-accent-400: rgb(var(--color-primary-400));
--vc-accent-500: rgb(var(--color-primary-500));
--vc-accent-600: rgb(var(--color-primary-600));
--vc-accent-700: rgb(var(--color-primary-700));
--vc-accent-800: rgb(var(--color-primary-800));
--vc-accent-900: rgb(var(--color-primary-900));
}
</style>

179
dashboard/components/dashboard/BarsCard.vue
View File

@@ -50,112 +50,99 @@ function openExternalLink(link: string) {
<template>
<div class="flex h-full">
<div class="text-text flex flex-col items-start gap-4 w-full relative">
<div class="w-full h-full p-4 flex flex-col bg-card rounded-xl gap-8 card-shadow">
<div class="flex justify-between mb-3">
<div class="flex flex-col gap-1">
<div class="flex gap-4 items-center">
<div class="poppins font-semibold text-[1.4rem] text-text">
{{ label }}
</div>
<div class="flex items-center">
<i @click="reloadData()"
class="hover:rotate-[50deg] transition-all duration-100 fas fa-refresh text-[1.2rem] cursor-pointer"></i>
</div>
</div>
<div class="poppins text-[1rem] text-text-sub/90">
{{ desc }}
</div>
<LyxUiCard class="w-full h-full p-4 flex flex-col gap-8 relative">
<div class="flex justify-between mb-3">
<div class="flex flex-col gap-1">
<div class="flex gap-4 items-center">
<div class="poppins font-semibold text-[1.4rem] text-text">
{{ label }}
</div>
<div v-if="rawButton" class="hidden lg:flex">
<div @click="$emit('showRawData')"
class="cursor-pointer flex gap-1 items-center justify-center font-semibold poppins rounded-lg text-[#5680f8] hover:text-[#5681f8ce]">
<div> Raw data </div>
<div class="flex items-center"> <i class="fas fa-arrow-up-right"></i> </div>
</div>
<div class="flex items-center">
<i @click="reloadData()"
class="hover:rotate-[50deg] transition-all duration-100 fas fa-refresh text-[1.2rem] cursor-pointer"></i>
</div>
</div>
<div>
<div class="flex justify-between font-bold text-text-sub/80 text-[1.1rem] mb-4">
<div class="flex items-center gap-2">
<div v-if="isDetailView" class="flex items-center justify-center">
<i @click="$emit('showGeneral')"
class="fas fa-arrow-left text-[.9rem] hover:text-text cursor-pointer"></i>
</div>
<div> {{ subLabel }} </div>
</div>
<div> Count </div>
</div>
<div class="flex flex-col gap-1">
<div v-if="props.data.length > 0" class="flex justify-between items-center"
v-for="element of props.data">
<div class="flex items-center gap-2 w-10/12 relative">
<div v-if="showLink">
<i @click="openExternalLink(element._id)"
class="fas fa-link text-gray-300 hover:text-gray-400 cursor-pointer"></i>
</div>
<div class="flex gap-1 items-center" @click="showDetails(element._id)"
:class="{ 'cursor-pointer line-active': interactive }">
<div class="absolute rounded-sm w-full h-full bg-[#92abcf38]"
:style="'width:' + 100 / maxData * element.count + '%;'"></div>
<div class="flex px-2 py-1 relative items-center gap-4">
<div v-if="iconProvider && iconProvider(element._id) != undefined"
class="flex items-center h-[1.3rem]">
<img v-if="iconProvider(element._id)?.[0] == 'img'" class="h-full"
:style="customIconStyle" :src="iconProvider(element._id)?.[1]">
<i v-else :class="iconProvider(element._id)?.[1]"></i>
</div>
<span
class="text-ellipsis line-clamp-1 ui-font z-[20] text-[.95rem] text-text/70">
{{ elementTextTransformer?.(element._id) || element._id }}
</span>
</div>
</div>
</div>
<div class="text-text font-semibold text-[.9rem] md:text-[1rem] manrope"> {{
formatNumberK(element.count) }} </div>
</div>
<div v-if="props.data.length == 0"
class="flex justify-center text-text-sub font-bold text-[1.1rem]">
No visits yet
</div>
</div>
<div v-if="!hideShowMore" class="flex justify-center mt-4 text-text-sub/90 ">
<div @click="$emit('showMore')"
class="poppins hover:bg-black cursor-pointer w-fit px-6 py-1 rounded-lg border-[1px] border-text-sub text-[.9rem]">
Show more
</div>
</div>
<div class="poppins text-[1rem] text-text-sub/90">
{{ desc }}
</div>
<div v-if="loading"
class="backdrop-blur-[1px] z-[20] left-0 top-0 w-full h-full flex items-center justify-center font-bold rockmann absolute">
<i
class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
</div>
<div v-if="rawButton" class="hidden lg:flex">
<div @click="$emit('showRawData')"
class="cursor-pointer flex gap-1 items-center justify-center font-semibold poppins rounded-lg text-[#5680f8] hover:text-[#5681f8ce]">
<div> Raw data </div>
<div class="flex items-center"> <i class="fas fa-arrow-up-right"></i> </div>
</div>
</div>
</div>
</div>
<div>
<div class="flex justify-between font-bold text-text-sub/80 text-[1.1rem] mb-4">
<div class="flex items-center gap-2">
<div v-if="isDetailView" class="flex items-center justify-center">
<i @click="$emit('showGeneral')"
class="fas fa-arrow-left text-[.9rem] hover:text-text cursor-pointer"></i>
</div>
<div> {{ subLabel }} </div>
</div>
<div> Count </div>
</div>
<div class="flex flex-col gap-1">
<div v-if="props.data.length > 0" class="flex justify-between items-center"
v-for="element of props.data">
<div class="flex items-center gap-2 w-10/12 relative">
<div v-if="showLink">
<i @click="openExternalLink(element._id)"
class="fas fa-link text-gray-300 hover:text-gray-400 cursor-pointer"></i>
</div>
<div class="flex gap-1 items-center" @click="showDetails(element._id)"
:class="{ 'cursor-pointer line-active': interactive }">
<div class="absolute rounded-sm w-full h-full bg-[#92abcf38]"
:style="'width:' + 100 / maxData * element.count + '%;'"></div>
<div class="flex px-2 py-1 relative items-center gap-4">
<div v-if="iconProvider && iconProvider(element._id) != undefined"
class="flex items-center h-[1.3rem]">
<img v-if="iconProvider(element._id)?.[0] == 'img'" class="h-full"
:style="customIconStyle" :src="iconProvider(element._id)?.[1]">
<i v-else :class="iconProvider(element._id)?.[1]"></i>
</div>
<span class="text-ellipsis line-clamp-1 ui-font z-[20] text-[.95rem] text-text/70">
{{ elementTextTransformer?.(element._id) || element._id }}
</span>
</div>
</div>
</div>
<div class="text-text font-semibold text-[.9rem] md:text-[1rem] manrope"> {{
formatNumberK(element.count) }} </div>
</div>
<div v-if="props.data.length == 0" class="flex justify-center text-text-sub font-bold text-[1.1rem]">
No visits yet
</div>
</div>
<div v-if="!hideShowMore" class="flex justify-center mt-4 text-text-sub/90 ">
<div @click="$emit('showMore')"
class="poppins hover:bg-black cursor-pointer w-fit px-6 py-1 rounded-lg border-[1px] border-text-sub text-[.9rem]">
Show more
</div>
</div>
</div>
<div v-if="loading"
class="backdrop-blur-[1px] z-[20] left-0 top-0 w-full h-full flex items-center justify-center font-bold rockmann absolute">
<i class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
</div>
</LyxUiCard>
</template>

45
dashboard/components/dashboard/BrowsersBarCard.vue
View File

@@ -1,39 +1,46 @@
<script lang="ts" setup>
import type { BrowsersAggregated } from '~/server/api/metrics/[project_id]/data/browsers';
const activeProject = useActiveProject();
const activeProject = await useActiveProject();
const { data: events, pending, refresh } = await useFetch<BrowsersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/browsers`, {
...signHeaders(),
lazy: true
const { safeSnapshotDates } = useSnapshot()
const isShowMore = ref<boolean>(false);
const headers = computed(() => {
return {
'x-from': safeSnapshotDates.value.from,
'x-to': safeSnapshotDates.value.to,
Authorization: authorizationHeaderComputed.value,
limit: isShowMore.value === true ? '200' : '10'
}
});
const browsersData = useFetch(`/api/metrics/${activeProject.value?._id}/data/browsers`, {
method: 'POST', headers, lazy: true, immediate: false
});
const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
function showMore() {
isShowMore.value = true;
showDialog.value = true;
dialogBarData.value = [];
isDataLoading.value = true;
$fetch<any[]>(`/api/metrics/${activeProject.value?._id}/data/browsers`, signHeaders({
'x-query-limit': '200'
})).then(data => {
dialogBarData.value = data;
isDataLoading.value = false;
});
dialogBarData.value = browsersData.data.value || [];
}
onMounted(() => {
browsersData.execute();
});
</script>
<template>
<div class="flex flex-col gap-2">
<DashboardBarsCard @showMore="showMore()" @dataReload="refresh" :data="events || []"
desc="The browsers most used to search your website." :dataIcons="false" :loading="pending"
label="Top Browsers" sub-label="Browsers"></DashboardBarsCard>
<DashboardBarsCard @showMore="showMore()" @dataReload="browsersData.refresh()"
:data="browsersData.data.value || []" desc="The browsers most used to search your website."
:dataIcons="false" :loading="browsersData.pending.value" label="Top Browsers" sub-label="Browsers">
</DashboardBarsCard>
</div>
</template>

30
dashboard/components/dashboard/CountCard.vue
View File

@@ -16,8 +16,8 @@ const props = defineProps<{
<template>
<Card class="flex flex-col overflow-hidden relative max-h-[12rem] aspect-[2/1] w-full">
<div class="flex p-4 items-start">
<LyxUiCard class="flex !p-0 flex-col overflow-hidden relative max-h-[12rem] aspect-[2/1] w-full">
<div v-if="ready" class="flex p-4 items-start">
<div class="flex items-center mt-2 mr-4">
<i :style="`color: ${props.color}`" :class="icon" class="text-[1.6rem] 2xl:text-[2rem]"></i>
</div>
@@ -40,32 +40,16 @@ const props = defineProps<{
</div>
</div>
<div class="absolute bottom-0 left-0 w-full h-[50%] flex items-end" v-if="(props.data?.length || 0) > 0">
<div class="absolute bottom-0 left-0 w-full h-[50%] flex items-end"
v-if="((props.data?.length || 0) > 0) && ready">
<DashboardEmbedChartCard v-if="ready" :data="props.data || []" :labels="props.labels || []"
:color="props.color">
</DashboardEmbedChartCard>
</div>
</Card>
<!-- <div class="bg-menu p-4 rounded-xl flex flex-col gap-2 w-full lg:w-[20rem] relative pb-2 lg:pb-4">
<div class="gap-4 flex flex-row items-center lg:items-start lg:gap-2 lg:flex-col">
<div class="w-[2.5rem] h-[2.5rem] lg:w-[3.5rem] lg:h-[3.5rem] flex items-center justify-center rounded-lg"
:style="`background: ${props.color}`">
<i :class="icon" class="text-[1rem] lg:text-[1.5rem]"></i>
</div>
<div class="text-[1rem] lg:text-[1.3rem] text-text-sub/90 poppins">
{{ title }}
</div>
</div>
<div class="flex gap-2 items-center lg:items-end">
<div class="brockmann text-text text-[2rem] lg:text-[2.8rem] grow">
{{ text }}
</div>
<div class="poppins text-text-sub/90 text-[.9rem] lg:text-[1rem]"> {{ sub }} </div>
<div v-if="!ready" class="flex justify-center items-center w-full h-full">
<i class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
</div>
</LyxUiCard>
</div> -->
</template>

43
dashboard/components/dashboard/DevicesBarCard.vue
View File

@@ -1,39 +1,46 @@
<script lang="ts" setup>
import type { DevicesAggregated } from '~/server/api/metrics/[project_id]/data/devices';
const activeProject = useActiveProject();
const activeProject = await useActiveProject();
const { data: events, pending, refresh } = await useFetch<DevicesAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/devices`, {
...signHeaders(),
lazy: true
const { safeSnapshotDates } = useSnapshot()
const isShowMore = ref<boolean>(false);
const headers = computed(() => {
return {
'x-from': safeSnapshotDates.value.from,
'x-to': safeSnapshotDates.value.to,
Authorization: authorizationHeaderComputed.value,
limit: isShowMore.value === true ? '200' : '10'
}
});
const devicesData = useFetch(`/api/metrics/${activeProject.value?._id}/data/devices`, {
method: 'POST', headers, lazy: true, immediate: false
});
const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
function showMore() {
isShowMore.value = true;
showDialog.value = true;
dialogBarData.value = [];
isDataLoading.value = true;
$fetch<any[]>(`/api/metrics/${activeProject.value?._id}/data/devices`, signHeaders({
'x-query-limit': '200'
})).then(data => {
dialogBarData.value = data;
isDataLoading.value = false;
});
dialogBarData.value = devicesData.data.value || [];
}
onMounted(() => {
devicesData.execute();
});
</script>
<template>
<div class="flex flex-col gap-2">
<DashboardBarsCard @showMore="showMore()" @dataReload="refresh" :data="events || []" :dataIcons="false"
desc="The devices most used to access your website." :loading="pending" label="Top Devices"
<DashboardBarsCard @showMore="showMore()" @dataReload="devicesData.refresh()" :data="devicesData.data.value || []" :dataIcons="false"
desc="The devices most used to access your website." :loading="devicesData.pending.value" label="Top Devices"
sub-label="Devices"></DashboardBarsCard>
</div>
</template>

50
dashboard/components/dashboard/EventsBarCard.vue
View File

@@ -1,37 +1,42 @@
<script lang="ts" setup>
import type { CustomEventsAggregated } from '~/server/api/metrics/[project_id]/visits/events';
const activeProject = await useActiveProject();
const { data: events, pending, refresh } = await useFetch<CustomEventsAggregated[]>(`/api/metrics/${activeProject.value?._id}/visits/events`, {
...signHeaders(),
lazy: true
});
const router = useRouter();
function goToView() {
router.push('/dashboard/events');
}
const activeProject = useActiveProject();
const { safeSnapshotDates } = useSnapshot()
const isShowMore = ref<boolean>(false);
const headers = computed(() => {
return {
'x-from': safeSnapshotDates.value.from,
'x-to': safeSnapshotDates.value.to,
Authorization: authorizationHeaderComputed.value,
limit: isShowMore.value === true ? '200' : '10'
}
});
const eventsData = useFetch(`/api/metrics/${activeProject.value?._id}/data/events`, {
method: 'POST', headers, lazy: true, immediate: false
});
const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
function showMore() {
isShowMore.value = true;
showDialog.value = true;
dialogBarData.value = [];
isDataLoading.value = true;
$fetch<any[]>(`/api/metrics/${activeProject.value?._id}/visits/events`, signHeaders({
'x-query-limit': '200'
})).then(data => {
dialogBarData.value = data;
isDataLoading.value = false;
});
dialogBarData.value = eventsData.data.value || [];
}
onMounted(async () => {
eventsData.execute();
});
</script>
@@ -39,7 +44,8 @@ function showMore() {
<template>
<div class="flex flex-col gap-2 h-full">
<DashboardBarsCard @showMore="showMore()" @showRawData="goToView()"
desc="Most frequent user events triggered in this project" @dataReload="refresh" :data="events || []"
:loading="pending" label="Top Events" sub-label="Events" :rawButton="!isLiveDemo()"></DashboardBarsCard>
desc="Most frequent user events triggered in this project" @dataReload="eventsData.refresh()"
:data="eventsData.data.value || []" :loading="eventsData.pending.value" label="Top Events"
sub-label="Events" :rawButton="!isLiveDemo()"></DashboardBarsCard>
</div>
</template>

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

@@ -2,7 +2,7 @@
import { Chart, registerables, type ChartData, type ChartOptions } from 'chart.js';
import { DoughnutChart, useDoughnutChart } from 'vue-chart-3';
import type { EventsPie } from '~/server/api/metrics/[project_id]/events_pie';
import type { CustomEventsAggregated } from '~/server/api/metrics/[project_id]/data/events';
definePageMeta({ layout: 'dashboard' });
@@ -20,15 +20,6 @@ const chartOptions = ref<ChartOptions<'doughnut'>>({
ticks: { display: false },
grid: { display: false, drawBorder: false },
},
// r: {
// ticks: { display: false },
// grid: {
// display: true,
// drawBorder: false,
// color: '#CCCCCC22',
// borderDash: [20, 8]
// },
// }
},
plugins: {
legend: {
@@ -55,7 +46,7 @@ const chartData = ref<ChartData<'doughnut'>>({
{
rotation: 1,
data: [],
backgroundColor: ['#6bbbe3','#5655d0', '#a6d5cb', '#fae0b9'],
backgroundColor: ['#6bbbe3', '#5655d0', '#a6d5cb', '#fae0b9'],
borderColor: ['#1d1d1f'],
borderWidth: 2
},
@@ -65,15 +56,18 @@ const chartData = ref<ChartData<'doughnut'>>({
const { doughnutChartProps, doughnutChartRef } = useDoughnutChart({ chartData: chartData, options: chartOptions });
onMounted(async () => {
const activeProject = useActiveProject();
const activeProject = useActiveProject()
const { safeSnapshotDates } = useSnapshot();
const eventsData = await $fetch<EventsPie[]>(`/api/metrics/${activeProject.value?._id}/visits/events`, signHeaders());
chartData.value.labels = eventsData.map(e => {
function transformResponse(input: CustomEventsAggregated[]) {
chartData.value.labels = input.map(e => {
return `${e._id}`;
});
chartData.value.datasets[0].data = eventsData.map(e => e.count);
chartData.value.datasets[0].data = input.map(e => e.count);
doughnutChartRef.value?.update();
if (window.innerWidth < 800) {
@@ -81,11 +75,34 @@ onMounted(async () => {
chartOptions.value.plugins.legend.display = false;
}
}
})
}
const headers = computed(() => {
return {
'x-from': safeSnapshotDates.value.from,
'x-to': safeSnapshotDates.value.to,
Authorization: authorizationHeaderComputed.value,
limit: "10"
}
});
const eventsData = useFetch(`/api/metrics/${activeProject.value?._id}/data/events`, {
method: 'POST', headers, lazy: true, immediate: false,transform:transformResponse
});
onMounted(() => {
eventsData.execute();
});
</script>
<template>
<DoughnutChart v-bind="doughnutChartProps"> </DoughnutChart>
<div>
<div v-if="eventsData.pending.value" 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="!eventsData.pending.value" v-bind="doughnutChartProps"> </DoughnutChart>
</div>
</template>

49
dashboard/components/dashboard/GeolocationBarCard.vue
View File

@@ -1,14 +1,7 @@
<script lang="ts" setup>
import type { CountriesAggregated } from '~/server/api/metrics/[project_id]/data/countries';
import type { IconProvider } from './BarsCard.vue';
const activeProject = await useActiveProject();
const { data: countries, pending, refresh } = await useFetch<CountriesAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/countries`, {
...signHeaders(),
lazy: true
});
function iconProvider(id: string): ReturnType<IconProvider> {
if (id === 'self') return ['icon', 'fas fa-link'];
return [
@@ -19,31 +12,51 @@ function iconProvider(id: string): ReturnType<IconProvider> {
const customIconStyle = `width: 2rem; padding: 1px;`
const activeProject = useActiveProject();
const { safeSnapshotDates } = useSnapshot()
const isShowMore = ref<boolean>(false);
const headers = computed(() => {
return {
'x-from': safeSnapshotDates.value.from,
'x-to': safeSnapshotDates.value.to,
Authorization: authorizationHeaderComputed.value,
limit: isShowMore.value === true ? '200' : '10'
}
});
const geolocationData = useFetch(`/api/metrics/${activeProject.value?._id}/data/countries`, {
method: 'POST', headers, lazy: true, immediate: false
});
const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
function showMore() {
isShowMore.value = true;
showDialog.value = true;
dialogBarData.value = [];
isDataLoading.value = true;
$fetch<any[]>(`/api/metrics/${activeProject.value?._id}/data/countries`, signHeaders({
'x-query-limit': '200'
})).then(data => {
dialogBarData.value = data;
isDataLoading.value = false;
});
dialogBarData.value = geolocationData.data.value?.map(e => {
return { ...e, icon: iconProvider(e._id) }
}) || [];
isDataLoading.value = false;
}
onMounted(async () => {
geolocationData.execute();
});
</script>
<template>
<div class="flex flex-col gap-2">
<DashboardBarsCard @showMore="showMore()" @dataReload="refresh" :data="countries || []" :dataIcons="false"
:loading="pending" label="Top Countries" sub-label="Countries" :iconProvider="iconProvider"
<DashboardBarsCard @showMore="showMore()" @dataReload="geolocationData.refresh()" :data="geolocationData.data.value || []" :dataIcons="false"
:loading="geolocationData.pending.value" label="Top Countries" sub-label="Countries" :iconProvider="iconProvider"
:customIconStyle="customIconStyle" desc=" Lists the countries where users access your website.">
</DashboardBarsCard>
</div>

45
dashboard/components/dashboard/OssBarCard.vue
View File

@@ -1,39 +1,44 @@
<script lang="ts" setup>
import type { OssAggregated } from '~/server/api/metrics/[project_id]/data/oss';
const activeProject = useActiveProject();
const activeProject = await useActiveProject();
const { data: events, pending, refresh } = await useFetch<OssAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/oss`, {
...signHeaders(),
lazy: true
const { safeSnapshotDates } = useSnapshot()
const isShowMore = ref<boolean>(false);
const headers = computed(() => {
return {
'x-from': safeSnapshotDates.value.from,
'x-to': safeSnapshotDates.value.to,
Authorization: authorizationHeaderComputed.value,
limit: isShowMore.value === true ? '200' : '10'
}
});
const ossData = useFetch(`/api/metrics/${activeProject.value?._id}/data/oss`, {
method: 'POST', headers, lazy: true, immediate: false
});
const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
function showMore() {
isShowMore.value = true;
showDialog.value = true;
dialogBarData.value = [];
isDataLoading.value = true;
$fetch<any[]>(`/api/metrics/${activeProject.value?._id}/data/oss`, signHeaders({
'x-query-limit': '200'
})).then(data => {
dialogBarData.value = data;
isDataLoading.value = false;
});
dialogBarData.value = ossData.data.value || [];
}
onMounted(() => {
ossData.execute();
});
</script>
<template>
<div class="flex flex-col gap-2">
<DashboardBarsCard @showMore="showMore()" @dataReload="refresh" :data="events || []"
<div class="flex flex-col gap-2 h-full">
<DashboardBarsCard @showMore="showMore()" @dataReload="ossData.refresh()" :data="ossData.data.value || []"
desc="The operating systems most commonly used by your website's visitors." :dataIcons="false"
:loading="pending" label="Top OS" sub-label="OSs"></DashboardBarsCard>
:loading="ossData.pending.value" label="Top OS" sub-label="OSs"></DashboardBarsCard>
</div>
</template>

67
dashboard/components/dashboard/ReferrersBarCard.vue
View File

@@ -1,16 +1,8 @@
<script lang="ts" setup>
import type { ReferrersAggregated } from '~/server/api/metrics/[project_id]/data/referrers';
import type { IconProvider } from './BarsCard.vue';
import ReferrerBarChart from '../referrer/ReferrerBarChart.vue';
const activeProject = await useActiveProject();
const { data: events, pending, refresh } = await useFetch<ReferrersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/referrers`, {
...signHeaders(),
lazy: true
});
function iconProvider(id: string): ReturnType<IconProvider> {
if (id === 'self') return ['icon', 'fas fa-link'];
return ['img', `https://s2.googleusercontent.com/s2/favicons?domain=${id}&sz=64`]
@@ -21,45 +13,56 @@ function elementTextTransformer(element: string) {
return element;
}
const activeProject = useActiveProject();
const { safeSnapshotDates } = useSnapshot()
const isShowMore = ref<boolean>(false);
const headers = computed(() => {
return {
'x-from': safeSnapshotDates.value.from,
'x-to': safeSnapshotDates.value.to,
Authorization: authorizationHeaderComputed.value,
limit: isShowMore.value === true ? '200' : '10'
}
});
const referrersData = useFetch(`/api/metrics/${activeProject.value?._id}/data/referrers`, {
method: 'POST', headers, lazy: true, immediate: false
});
const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
const customDialog = useCustomDialog();
function onShowDetails(referrer: string) {
customDialog.openDialog(ReferrerBarChart, { slice: 'day', referrer });
}
// const customDialog = useCustomDialog();
// function onShowDetails(referrer: string) {
// customDialog.openDialog(ReferrerBarChart, { slice: 'day', referrer });
// }
function showMore() {
isShowMore.value = true;
showDialog.value = true;
dialogBarData.value = [];
isDataLoading.value = true;
$fetch<any[]>(`/api/metrics/${activeProject.value?._id}/data/referrers`, signHeaders({
'x-query-limit': '200'
})).then(data => {
dialogBarData.value = data.map(e => {
return { ...e, icon: iconProvider(e._id) }
});
isDataLoading.value = false;
});
dialogBarData.value = referrersData.data.value?.map(e => {
return { ...e, icon: iconProvider(e._id) }
}) || [];
}
onMounted(async () => {
referrersData.execute();
});
</script>
<template>
<div class="flex flex-col gap-2">
<DashboardBarsCard @showDetails="onShowDetails" @showMore="showMore()"
:elementTextTransformer="elementTextTransformer" :iconProvider="iconProvider" @dataReload="refresh"
:showLink=true :data="events || []" :interactive="true" desc="Where users find your website."
:dataIcons="true" :loading="pending" label="Top Referrers" sub-label="Referrers"></DashboardBarsCard>
<DashboardBarsCard @showMore="showMore()"
:elementTextTransformer="elementTextTransformer" :iconProvider="iconProvider"
@dataReload="referrersData.refresh()" :showLink=true :data="referrersData.data.value || []"
:interactive="false" desc="Where users find your website." :dataIcons="true" :loading="referrersData.pending.value"
label="Top Referrers" sub-label="Referrers"></DashboardBarsCard>
</div>
</template>

45
dashboard/components/dashboard/SessionsLineChart.vue
View File

@@ -1,31 +1,46 @@
<script lang="ts" setup>
import { onMounted } from 'vue';
import DateService, { type Slice } from '@services/DateService';
const data = ref<number[]>([]);
const labels = ref<string[]>([]);
const ready = ref<boolean>(false);
const props = defineProps<{ slice: Slice }>();
async function loadData() {
const response = await useTimeline('sessions', props.slice);
if (!response) return;
data.value = response.map(e => e.count);
labels.value = response.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, props.slice));
ready.value = true;
const activeProject = useActiveProject();
const { safeSnapshotDates } = useSnapshot()
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, props.slice));
return { data, labels }
}
const body = computed(() => {
return {
from: safeSnapshotDates.value.from,
to: safeSnapshotDates.value.to,
slice: props.slice
}
});
const sessionsData = useFetch(`/api/metrics/${activeProject.value?._id}/timeline/visits`, {
method: 'POST', ...signHeaders({ v2: 'true' }), body, transform: transformResponse,
lazy: true, immediate: false
});
onMounted(async () => {
await loadData();
watch(props, async () => { await loadData(); });
})
sessionsData.execute();
});
</script>
<template>
<div>
<AdvancedLineChart v-if="ready" :data="data" :labels="labels" color="#f56523"></AdvancedLineChart>
<div v-if="sessionsData.pending.value" class="flex justify-center py-40">
<i class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
</div>
<AdvancedLineChart v-if="!sessionsData.pending.value" :data="sessionsData.data.value?.data || []"
:labels="sessionsData.data.value?.labels || []" color="#f56523"></AdvancedLineChart>
</div>
</template>

167
dashboard/components/dashboard/TopCards.vue
View File

@@ -1,27 +1,37 @@
<script lang="ts" setup>
import DateService from '@services/DateService';
import type { Slice } from '@services/DateService';
const { data: metricsInfo } = useMetricsData();
const { snapshot, safeSnapshotDates } = useSnapshot()
const snapshotFrom = computed(() => new Date(snapshot.value?.from || '0').getTime());
const snapshotTo = computed(() => new Date(snapshot.value?.to || Date.now()).getTime());
const snapshotDays = computed(() => {
return (snapshotTo.value - snapshotFrom.value) / 1000 / 60 / 60 / 24;
});
const avgVisitDay = computed(() => {
if (!metricsInfo.value) return '0.00';
const days = (Date.now() - (metricsInfo.value?.firstViewDate || 0)) / 1000 / 60 / 60 / 24;
const avg = metricsInfo.value.visitsCount / Math.max(days, 1);
if (!visitsData.data.value) return '0.00';
const counts = visitsData.data.value.data.reduce((a, e) => e + a, 0);
const avg = counts / Math.max(snapshotDays.value, 1);
return avg.toFixed(2);
});
const avgEventsDay = computed(() => {
if (!metricsInfo.value) return '0.00';
const days = (Date.now() - (metricsInfo.value?.firstEventDate || 0)) / 1000 / 60 / 60 / 24;
const avg = metricsInfo.value.eventsCount / Math.max(days, 1);
if (!eventsData.data.value) return '0.00';
const counts = eventsData.data.value.data.reduce((a, e) => e + a, 0);
const avg = counts / Math.max(snapshotDays.value, 1);
return avg.toFixed(2);
});
const avgSessionsDay = computed(() => {
if (!metricsInfo.value) return '0.00';
const days = (Date.now() - (metricsInfo.value?.firstViewDate || 0)) / 1000 / 60 / 60 / 24;
const avg = metricsInfo.value.sessionsVisitsCount / Math.max(days, 1);
if (!sessionsData.data.value) return '0.00';
const counts = sessionsData.data.value.data.reduce((a, e) => e + a, 0);
const avg = counts / Math.max(snapshotDays.value, 1);
return avg.toFixed(2);
});
@@ -29,92 +39,105 @@ const avgSessionsDay = computed(() => {
const avgSessionDuration = computed(() => {
if (!metricsInfo.value) return '0.00';
const avg = metricsInfo.value.avgSessionDuration;
let hours = 0;
let minutes = 0;
let seconds = 0;
seconds += avg * 60;
while (seconds > 60) {
seconds -= 60;
minutes += 1;
}
while (minutes > 60) {
minutes -= 60;
hours += 1;
}
while (seconds > 60) { seconds -= 60; minutes += 1; }
while (minutes > 60) { minutes -= 60; hours += 1; }
return `${hours > 0 ? hours + 'h ' : ''}${minutes}m ${seconds.toFixed()}s`
});
type Data = {
data: number[],
labels: string[],
trend: number,
ready: boolean
}
const visitsData = reactive<Data>({ data: [], labels: [], trend: 0, ready: false });
const eventsData = reactive<Data>({ data: [], labels: [], trend: 0, ready: false });
const sessionsData = reactive<Data>({ data: [], labels: [], trend: 0, ready: false });
const sessionsDurationData = reactive<Data>({ data: [], labels: [], trend: 0, ready: false });
async function loadData(timelineEndpointName: string, target: Data) {
const response = await useTimeline(timelineEndpointName as any, 'day');
if (!response) return;
target.data = response.map(e => e.count);
target.labels = response.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, 'day'));
const pool = [...response.map(e => e.count)];
pool.pop();
const avg = pool.reduce((a, e) => a + e, 0) / pool.length;
const diffPercent: number = (100 / avg * (response.at(-1)?.count || 0)) - 100;
target.trend = Math.max(Math.min(diffPercent, 99), -99);
target.ready = true;
}
onMounted(async () => {
await loadData('visits', visitsData);
await loadData('events', eventsData);
await loadData('sessions', sessionsData);
await loadData('sessions_duration', sessionsDurationData);
const chartSlice = computed(() => {
const snapshotSizeMs = new Date(snapshot.value.to).getTime() - new Date(snapshot.value.from).getTime();
if (snapshotSizeMs < 1000 * 60 * 60 * 24 * 6) return 'hour' as Slice;
if (snapshotSizeMs < 1000 * 60 * 60 * 24 * 30) return 'day' as Slice;
if (snapshotSizeMs < 1000 * 60 * 60 * 24 * 90) return 'day' as Slice;
return 'month' as Slice;
});
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, chartSlice.value));
const pool = [...input.map(e => e.count)];
pool.pop();
const avg = pool.reduce((a, e) => a + e, 0) / pool.length;
const diffPercent: number = (100 / avg * (input.at(-1)?.count || 0)) - 100;
const trend = Math.max(Math.min(diffPercent, 99), -99);
return { data, labels, trend }
}
const activeProject = useActiveProject();
function getBody() {
return JSON.stringify({
from: safeSnapshotDates.value.from,
to: safeSnapshotDates.value.to,
slice: chartSlice.value
});
}
const visitsData = useFetch(`/api/metrics/${activeProject.value?._id}/timeline/visits`, {
method: 'POST', ...signHeaders({ v2: 'true' }), body: getBody(), transform: transformResponse,
lazy: true, immediate: false
});
const eventsData = useFetch(`/api/metrics/${activeProject.value?._id}/timeline/events`, {
method: 'POST', ...signHeaders({ v2: 'true' }), body: getBody(), transform: transformResponse,
lazy: true, immediate: false
});
const sessionsData = useFetch(`/api/metrics/${activeProject.value?._id}/timeline/sessions`, {
method: 'POST', ...signHeaders({ v2: 'true' }), body: getBody(), transform: transformResponse,
lazy: true, immediate: false
});
const sessionsDurationData = useFetch(`/api/metrics/${activeProject.value?._id}/timeline/sessions_duration`, {
method: 'POST', ...signHeaders({ v2: 'true' }), body: getBody(), transform: transformResponse,
lazy: true, immediate: false
});
onMounted(async () => {
visitsData.execute();
eventsData.execute();
sessionsData.execute();
sessionsDurationData.execute();
});
</script>
<template>
<div class="gap-6 px-6 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 m-cards-wrap:grid-cols-4" v-if="metricsInfo">
<div class="gap-6 px-6 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 m-cards-wrap:grid-cols-4">
<DashboardCountCard :ready="visitsData.ready" icon="far fa-earth" text="Total page visits"
:value="formatNumberK(metricsInfo.visitsCount)" :avg="formatNumberK(avgVisitDay) + '/day'"
:trend="visitsData.trend" :data="visitsData.data" :labels="visitsData.labels" color="#5655d7">
<DashboardCountCard :ready="!visitsData.pending.value" icon="far fa-earth" text="Total page visits"
:value="formatNumberK(visitsData.data.value?.data.reduce((a, e) => a + e, 0) || '...')"
:avg="formatNumberK(avgVisitDay) + '/day'" :trend="visitsData.data.value?.trend"
:data="visitsData.data.value?.data" :labels="visitsData.data.value?.labels" color="#5655d7">
</DashboardCountCard>
<DashboardCountCard :ready="eventsData.ready" icon="far fa-flag" text="Total custom events"
:value="formatNumberK(metricsInfo.eventsCount)" :avg="formatNumberK(avgEventsDay) + '/day'"
:trend="eventsData.trend" :data="eventsData.data" :labels="eventsData.labels" color="#1e9b86">
<DashboardCountCard :ready="!eventsData.pending.value" icon="far fa-flag" text="Total custom events"
:value="formatNumberK(eventsData.data.value?.data.reduce((a, e) => a + e, 0) || '...')"
:avg="formatNumberK(avgEventsDay) + '/day'" :trend="eventsData.data.value?.trend"
:data="eventsData.data.value?.data" :labels="eventsData.data.value?.labels" color="#1e9b86">
</DashboardCountCard>
<DashboardCountCard :ready="sessionsData.ready" icon="far fa-user" text="Unique visits sessions"
:value="formatNumberK(metricsInfo.sessionsVisitsCount)" :avg="formatNumberK(avgSessionsDay) + '/day'"
:trend="sessionsData.trend" :data="sessionsData.data" :labels="sessionsData.labels" color="#4abde8">
<DashboardCountCard :ready="!sessionsData.pending.value" icon="far fa-user" text="Unique visits sessions"
:value="formatNumberK(sessionsData.data.value?.data.reduce((a, e) => a + e, 0) || '...')"
:avg="formatNumberK(avgSessionsDay) + '/day'" :trend="sessionsData.data.value?.trend"
:data="sessionsData.data.value?.data" :labels="sessionsData.data.value?.labels" color="#4abde8">
</DashboardCountCard>
<DashboardCountCard :ready="sessionsDurationData.ready" icon="far fa-timer" text="Avg session time"
:value="avgSessionDuration" :trend="sessionsDurationData.trend" :data="sessionsDurationData.data"
:labels="sessionsDurationData.labels" color="#f56523">
<DashboardCountCard :ready="!sessionsDurationData.pending.value" icon="far fa-timer" text="Avg session time"
:value="avgSessionDuration" :trend="sessionsDurationData.data.value?.trend"
:data="sessionsDurationData.data.value?.data" :labels="sessionsDurationData.data.value?.labels"
color="#f56523">
</DashboardCountCard>
</div>

18
dashboard/components/dashboard/TopSection.vue
View File

@@ -6,10 +6,12 @@ onMounted(() => startWatching());
onUnmounted(() => stopWatching());
const { createAlert } = useAlert();
function copyProjectId() {
if (!navigator.clipboard) alert('NON PUOI COPIARE IN HTTP');
if (!navigator.clipboard) alert('You can\'t copy in HTTP');
navigator.clipboard.writeText((activeProject.value?._id || 0).toString());
alert('Copiato !');
createAlert('Success', 'Project id copied successfully.', 'far fa-circle-check', 5000);
}
</script>
@@ -20,23 +22,23 @@ function copyProjectId() {
<div class="flex gap-2 items-center text-text/90 justify-center md:justify-start">
<div class="animate-pulse w-[1rem] h-[1rem] bg-green-400 rounded-full"> </div>
<div> {{ onlineUsers }} Online users</div>
<div class="poppins font-medium text-[1.2rem]"> {{ onlineUsers }} Online users</div>
</div>
<div class="grow"></div>
<div class="flex md:gap-2 items-center md:justify-start flex-col md:flex-row">
<div>Project:</div>
<div class="text-text/90"> {{ activeProject?.name || 'Loading...' }} </div>
<div class="poppins font-medium text-lyx-text-darker text-[1.2rem]">Project:</div>
<div class="text-lyx-text poppins font-medium text-[1.2rem]"> {{ activeProject?.name || 'Loading...' }} </div>
</div>
<div class="flex flex-col md:flex-row md:gap-2 items-center md:justify-start">
<div>Project id:</div>
<div class="poppins font-medium text-lyx-text-darker text-[1.2rem]">Project id:</div>
<div class="flex gap-2">
<div class="text-text/90 text-[.9rem] lg:text-2xl">
<div class="text-lyx-text poppins font-medium text-[1.2rem]">
{{ activeProject?._id || 'Loading...' }}
</div>
<div class="flex items-center ml-3">
<i @click="copyProjectId()" class="far fa-copy hover:text-text cursor-pointer text-[1.2rem]"></i>
<i @click="copyProjectId()" class="far fa-copy text-lyx-text hover:text-lyx-primary cursor-pointer text-[1.2rem]"></i>
</div>
</div>
</div>

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

@@ -2,29 +2,45 @@
import { onMounted } from 'vue';
import DateService, { type Slice } from '@services/DateService';
const data = ref<number[]>([]);
const labels = ref<string[]>([]);
const ready = ref<boolean>(false);
const props = defineProps<{ slice: Slice }>();
async function loadData() {
const response = await useTimeline('visits', props.slice);
if (!response) return;
data.value = response.map(e => e.count);
labels.value = response.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, props.slice));
ready.value = true;
const activeProject = useActiveProject();
const { safeSnapshotDates } = useSnapshot()
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, props.slice));
return { data, labels }
}
const body = computed(() => {
return {
from: safeSnapshotDates.value.from,
to: safeSnapshotDates.value.to,
slice: props.slice
}
});
const visitsData = useFetch(`/api/metrics/${activeProject.value?._id}/timeline/visits`, {
method: 'POST', ...signHeaders({ v2: 'true' }), body, transform: transformResponse,
lazy: true, immediate: false
});
onMounted(async () => {
await loadData();
watch(props, async () => { await loadData(); });
})
visitsData.execute();
});
</script>
<template>
<div>
<AdvancedLineChart v-if="ready" :data="data" :labels="labels" color="#5655d7"></AdvancedLineChart>
<div v-if="visitsData.pending.value" class="flex justify-center py-40">
<i class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
</div>
<AdvancedLineChart v-if="!visitsData.pending.value" :data="visitsData.data.value?.data || []"
:labels="visitsData.data.value?.labels || []" color="#5655d7">
</AdvancedLineChart>
</div>
</template>

78
dashboard/components/dashboard/WebsitesBarCard.vue
View File

@@ -2,29 +2,57 @@
import type { VisitsWebsiteAggregated } from '~/server/api/metrics/[project_id]/data/websites';
const { data: websites, pending, refresh } = useWebsitesData();
const activeProject = useActiveProject();
const currentViewData = ref<(VisitsWebsiteAggregated[] | null)>(websites.value);
const { safeSnapshotDates } = useSnapshot()
watch(pending, () => {
currentViewData.value = websites.value;
})
const isShowMore = ref<boolean>(false);
const currentWebsite = ref<string>("");
const websitesHeaders = computed(() => {
return {
'x-from': safeSnapshotDates.value.from,
'x-to': safeSnapshotDates.value.to,
Authorization: authorizationHeaderComputed.value,
limit: isShowMore.value === true ? '200' : '10'
}
});
const pagesHeaders = computed(() => {
return {
'x-from': safeSnapshotDates.value.from,
'x-to': safeSnapshotDates.value.to,
Authorization: authorizationHeaderComputed.value,
limit: isShowMore.value === true ? '200' : '10',
'x-website-name': currentWebsite.value
}
});
const websitesData = useFetch(`/api/metrics/${activeProject.value?._id}/data/websites`, {
method: 'POST', headers: websitesHeaders, lazy: true, immediate: false
});
const pagesData = useFetch(`/api/metrics/${activeProject.value?._id}/data/pages`, {
method: 'POST', headers: pagesHeaders, lazy: true, immediate: false
});
const isPagesView = ref<boolean>(false);
const isLoading = ref<boolean>(false);
const currentData = computed(() => {
return isPagesView.value ? pagesData : websitesData
})
async function showDetails(website: string) {
if (isPagesView.value == true) return;
isLoading.value = true;
currentWebsite.value = website;
pagesData.execute();
isPagesView.value = true;
}
const { data: pagesData, pending } = usePagesData(website, 10);
watch(pending, () => {
currentViewData.value = pagesData.value;
isLoading.value = false;
})
async function showGeneral() {
websitesData.execute();
isPagesView.value = false;
}
const router = useRouter();
@@ -33,26 +61,18 @@ function goToView() {
router.push('/dashboard/visits');
}
function setDefaultData() {
currentViewData.value = websites.value;
isPagesView.value = false;
}
async function dataReload() {
await refresh();
setDefaultData();
}
onMounted(()=>{
websitesData.execute();
})
</script>
<template>
<div class="flex flex-col gap-2 h-full">
<DashboardBarsCard :hideShowMore="true" @showGeneral="setDefaultData()" @showRawData="goToView()"
@dataReload="dataReload()" @showDetails="showDetails" :data="currentViewData || []"
:loading="pending || isLoading" :label="isPagesView ? 'Top pages' : 'Top Websites'"
<DashboardBarsCard :hideShowMore="true" @showGeneral="showGeneral()" @showRawData="goToView()"
@dataReload="currentData.refresh()" @showDetails="showDetails" :data="currentData.data.value || []"
:loading="currentData.pending.value" :label="isPagesView ? 'Top pages' : 'Top Websites'"
:sub-label="isPagesView ? 'Page' : 'Website'"
:desc="isPagesView ? 'Most visited pages' : 'Most visited website in this project'"
:interactive="!isPagesView" :rawButton="!isLiveDemo()" :isDetailView="isPagesView">

116
dashboard/components/dialog/CreateSnapshot.vue Normal file
View File

@@ -0,0 +1,116 @@
<script lang="ts" setup>
const { closeDialog } = useCustomDialog();
import { sub, format, isSameDay, type Duration } from 'date-fns'
const ranges = [
{ label: 'Last 7 days', duration: { days: 7 } },
{ label: 'Last 14 days', duration: { days: 14 } },
{ label: 'Last 30 days', duration: { days: 30 } },
{ label: 'Last 3 months', duration: { months: 3 } },
{ label: 'Last 6 months', duration: { months: 6 } },
{ label: 'Last year', duration: { years: 1 } }
]
const selected = ref<{ start: Date, end: Date }>({ start: sub(new Date(), { days: 14 }), end: new Date() })
function isRangeSelected(duration: Duration) {
return isSameDay(selected.value.start, sub(new Date(), duration)) && isSameDay(selected.value.end, new Date())
}
function selectRange(duration: Duration) {
selected.value = { start: sub(new Date(), duration), end: new Date() }
}
const currentColor = ref<string>("#5680F8");
const colorpicker = ref<HTMLInputElement | null>(null);
function showColorPicker() {
colorpicker.value?.click();
}
function onColorChange() {
currentColor.value = colorpicker.value?.value || '#000000';
}
const snapshotName = ref<string>("");
const { updateSnapshots } = useSnapshot();
const { createAlert } = useAlert()
async function confirmSnapshot() {
await $fetch("/api/snapshot/create", {
method: 'POST',
...signHeaders({ 'Content-Type': 'application/json' }),
body: JSON.stringify({
name: snapshotName.value,
color: currentColor.value,
from: selected.value.start.toISOString(),
to: selected.value.end.toISOString()
})
});
await updateSnapshots();
closeDialog();
createAlert('Snapshot created','Snapshot created successfully', 'far fa-circle-check', 5000);
}
</script>
<template>
<div class="w-full h-full flex flex-col">
<div class="poppins text-center">
Create a snapshot
</div>
<div class="mt-10 flex items-center gap-2">
<div :style="`background-color: ${currentColor};`" @click="showColorPicker"
class="w-6 h-6 rounded-full aspect-[1/1] relative cursor-pointer">
<input @input="onColorChange" ref="colorpicker" class="relative w-0 h-0 z-[-100]" type="color">
</div>
<div class="grow">
<LyxUiInput placeholder="Snapshot name" v-model="snapshotName" class="px-4 py-1 w-full"></LyxUiInput>
</div>
</div>
<div class="mt-4 justify-center flex w-full">
<UPopover class="w-full" :popper="{ placement: 'bottom' }">
<UButton class="w-full" color="primary" variant="solid">
<div class="flex items-center justify-center w-full gap-2">
<i class="i-heroicons-calendar-days-20-solid"></i>
{{ selected.start.toLocaleDateString() }} - {{ selected.end.toLocaleDateString() }}
</div>
</UButton>
<template #panel="{ close }">
<div class="flex items-center sm:divide-x divide-gray-200 dark:divide-gray-800">
<div class="hidden sm:flex flex-col py-4">
<UButton v-for="(range, index) in ranges" :key="index" :label="range.label" color="gray"
variant="ghost" class="rounded-none px-6"
:class="[isRangeSelected(range.duration) ? 'bg-gray-100 dark:bg-gray-800' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50']"
truncate @click="selectRange(range.duration)" />
</div>
<DatePicker v-model="selected" @close="close" />
</div>
</template>
</UPopover>
</div>
<div class="grow"></div>
<div class="flex items-center justify-around gap-4">
<LyxUiButton @click="closeDialog()" type="secondary" class="w-full text-center">
Cancel
</LyxUiButton>
<LyxUiButton @click="confirmSnapshot()" type="primary" class="w-full text-center"
:disabled="snapshotName.length == 0">
Confirm
</LyxUiButton>
</div>
</div>
</template>

17
dashboard/components/events/EventsMetadataAnalyzer.vue
View File

@@ -26,12 +26,27 @@ async function getMetadataFields() {
currentSearchText.value = "";
}
const { safeSnapshotDates } = useSnapshot();
async function getMetadataFieldGrouped() {
if (!selectedMetadataField.value) return;
metadataFieldGrouped.value = await $fetch<string[]>(`/api/metrics/${activeProject.value?._id.toString()}/events/metadata_field_group?name=${selectedEventName.value}&field=${selectedMetadataField.value}`, signHeaders());
const queryParams: Record<string, any> = {
from: safeSnapshotDates.value.from,
to: safeSnapshotDates.value.to,
name: selectedEventName.value,
field: selectedMetadataField.value
}
const queryParamsString = Object.keys(queryParams).map((key) => `${key}=${queryParams[key]}`).join('&');
metadataFieldGrouped.value = await $fetch<string[]>(`/api/metrics/${activeProject.value?._id.toString()}/events/metadata_field_group?${queryParamsString}`, signHeaders());
}
const metadataFieldGroupedFiltered = computed(() => {
if (currentSearchText.value.length == 0) return metadataFieldGrouped.value;
return metadataFieldGrouped.value.filter(e => {

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

@@ -1,17 +1,33 @@
<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: SliceName }>();
const props = defineProps<{ slice: Slice }>();
const slice = computed(() => props.slice);
async function loadData() {
const response = await useTimelineDataRaw('events_stacked', props.slice);
if (!response) return;
const activeProject = useActiveProject();
const { safeSnapshotDates } = useSnapshot()
const fixed = fixMetrics(response, props.slice, { advanced: true, advancedGroupKey: 'name' });
const body = computed(() => {
return {
from: safeSnapshotDates.value.from,
to: safeSnapshotDates.value.to,
slice: slice.value,
}
});
function transformResponse(input: { _id: string, name: string, count: number }[]) {
const fixed = fixMetrics({
data: input,
from: safeSnapshotDates.value.from,
to: safeSnapshotDates.value.to
}, slice.value, {
advanced: true,
advancedGroupKey: 'name'
});
const parsedDatasets: any[] = [];
const colors = ['#5655d0', '#6bbbe3', '#a6d5cb', '#fae0b9'];
@@ -28,25 +44,32 @@ async function loadData() {
if (!target) return;
line.data.push(target.value);
});
}
datasets.value = parsedDatasets;
labels.value = fixed.labels;
ready.value = true;
return {
datasets: parsedDatasets,
labels: fixed.labels
}
}
const eventsStackedData = useFetch(`/api/metrics/${activeProject.value?._id}/timeline/events_stacked`, {
method: 'POST', body, lazy: true, immediate: false, transform: transformResponse, ...signHeaders()
});
onMounted(async () => {
await loadData();
watch(props, async () => { await loadData(); });
})
eventsStackedData.execute();
});
</script>
<template>
<div>
<AdvancedStackedBarChart v-if="ready" :datasets="datasets" :labels="labels">
<div v-if="eventsStackedData.pending.value" 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="!eventsStackedData.pending.value" :datasets="eventsStackedData.data.value?.datasets || []"
:labels="eventsStackedData.data.value?.labels || []">
</AdvancedStackedBarChart>
</div>
</template>

27
dashboard/components/events/EventsUserFlow.vue
View File

@@ -12,13 +12,28 @@ onMounted(async () => {
const userFlowData = ref<any>();
const analyzing = ref<boolean>(false);
async function analyzeEvent() {
const { safeSnapshotDates } = useSnapshot();
async function getUserFlowData() {
userFlowData.value = undefined;
analyzing.value = true;
userFlowData.value = await $fetch(`/api/metrics/${activeProject.value?._id.toString()}/events/flow_from_name?name=${selectedEventName.value}`, signHeaders());
const queryParams: Record<string, any> = {
from: safeSnapshotDates.value.from,
to: safeSnapshotDates.value.to,
name: selectedEventName.value
}
const queryParamsString = Object.keys(queryParams).map((key) => `${key}=${queryParams[key]}`).join('&');
userFlowData.value = await $fetch(`/api/metrics/${activeProject.value?._id.toString()}/events/flow_from_name?${queryParamsString}`, signHeaders());
analyzing.value = false;
}
async function analyzeEvent() {
getUserFlowData();
}
</script>
<template>
@@ -41,13 +56,15 @@ async function analyzeEvent() {
</div>
<div class="flex flex-col gap-2" v-if="userFlowData">
<div class="flex gap-4 items-center bg-bg py-1 px-2 rounded-lg" v-for="(count, referrer) in userFlowData">
<div class="flex gap-4 items-center bg-bg py-1 px-2 rounded-lg"
v-for="(count, referrer) in userFlowData">
<div class="w-5 h-5 flex items-center justify-center">
<img :src="`https://s2.googleusercontent.com/s2/favicons?domain=${referrer}&sz=64`" :alt="'referrer'">
<img :src="`https://s2.googleusercontent.com/s2/favicons?domain=${referrer}&sz=64`"
:alt="'referrer'">
</div>
<div> {{ referrer }} </div>
<div class="grow"></div>
<div> {{ count }} </div>
<div> {{ count.toFixed(2).replace('.', ',') }} % </div>
</div>
</div>

18
dashboard/components/lyx-ui/Button.vue
View File

@@ -1,18 +0,0 @@
<script lang="ts" setup>
export type ButtonType = 'primary' | 'secondary' | 'outline' | 'danger';
const props = defineProps<{ type: ButtonType, }>();
</script>
<template>
<div class="poppins w-fit cursor-pointer px-4 py-1 rounded-md outline outline-[1px] text-text" :class="{
'bg-lyx-primary-dark outline-lyx-primary hover:bg-lyx-primary-hover': type === 'primary',
'bg-lyx-widget-lighter outline-lyx-widget-lighter hover:bg-lyx-widget-light': type === 'secondary',
'bg-lyx-transparent outline-lyx-widget-lighter hover:bg-lyx-widget-light': type === 'outline',
'bg-lyx-danger-dark outline-lyx-danger hover:bg-lyx-danger': type === 'danger',
}">
<slot></slot>
</div>
</template>

10
dashboard/components/lyx-ui/Card.vue
View File

@@ -1,10 +0,0 @@
<script lang="ts" setup>
</script>
<template>
<div class="w-fit h-fit rounded-md bg-lyx-widget p-4 outline outline-[1px] outline-lyx-background-lighter">
<slot></slot>
</div>
</template>

11
dashboard/components/lyx-ui/Icon.vue
View File

@@ -1,11 +0,0 @@
<script lang="ts" setup>
const props = defineProps<{ icon: string }>();
</script>
<template>
<span class="material-symbols-outlined">
{{ props.icon }}
</span>
</template>

26
dashboard/components/lyx-ui/ProjectSelector.vue
View File

@@ -1,26 +0,0 @@
<script lang="ts" setup>
</script>
<template>
<LyxUiCard>
<div class="flex items-center">
<div class="grow">
PROJECT_NAME
</div>
<div>
Active
</div>
<LyxUiIcon icon="drag_indicator"></LyxUiIcon>
</div>
<div class="flex items-center">
<LyxUiButton type="primary">
CURRENT_SUBSCRIPTION
</LyxUiButton>
<div class="poppins font-light text-lyx-text-dark">
next billing: NEXT_BILLING_DATE
</div>
</div>
</LyxUiCard>
</template>

34
dashboard/components/referrer/ReferrerBarChart.vue
View File

@@ -2,30 +2,30 @@
import { onMounted } from 'vue';
import DateService, { type Slice } from '@services/DateService';
const data = ref<number[]>([]);
const labels = ref<string[]>([]);
const ready = ref<boolean>(false);
// const data = ref<number[]>([]);
// const labels = ref<string[]>([]);
// const ready = ref<boolean>(false);
const props = defineProps<{ slice: Slice, referrer: string }>();
// const props = defineProps<{ slice: Slice, referrer: string }>();
async function loadData() {
const response = await useReferrersTimeline(props.referrer, props.slice);
if (!response) return;
data.value = response.map(e => e.count);
labels.value = response.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, props.slice));
ready.value = true;
}
// async function loadData() {
// const response = await useReferrersTimeline(props.referrer, props.slice);
// if (!response) return;
// data.value = response.map(e => e.count);
// labels.value = response.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, props.slice));
// ready.value = true;
// }
onMounted(async () => {
await loadData();
watch(props, async () => { await loadData(); });
})
// onMounted(async () => {
// await loadData();
// watch(props, async () => { await loadData(); });
// })
</script>
<template>
<div>
<AdvancedBarChart v-if="ready" :data="data" :labels="labels" color="#5680f8">
</AdvancedBarChart>
<!-- <AdvancedBarChart v-if="ready" :data="data" :labels="labels" color="#5680f8">
</AdvancedBarChart> -->
</div>
</template>

39
dashboard/components/settings/Account.vue Normal file
View File

@@ -0,0 +1,39 @@
<script lang="ts" setup>
import type { SettingsTemplateEntry } from './Template.vue';
const entries: SettingsTemplateEntry[] = [
{ id: 'delete', title: 'Delete account', text: 'Delete your account' },
]
const { setToken } = useAccessToken();
async function deleteAccount() {
const sure = confirm("Are you sure you want to delete this account ?");
if (!sure) return;
await $fetch("/api/user/delete_account", {
...signHeaders(),
method: "DELETE"
})
setToken('');
location.href = "/login"
}
</script>
<template>
<SettingsTemplate :entries="entries">
<template #delete>
<div
class="outline rounded-lg w-full px-8 py-4 flex flex-col gap-4 outline-[1px] outline-[#541c15] bg-[#1e1412]">
<div class="poppins font-semibold"> Deleting this account will also remove its projects </div>
<div @click="deleteAccount()"
class="text-[#e95b61] poppins font-semibold cursor-pointer hover:text-black hover:bg-red-700 outline rounded-lg w-fit px-8 py-2 outline-[1px] outline-[#532b26] bg-[#291415]">
Delete account
</div>
</div>
</template>
</SettingsTemplate>
</template>

101
dashboard/components/settings/General.vue Normal file
View File

@@ -0,0 +1,101 @@
<script lang="ts" setup>
import type { SettingsTemplateEntry } from './Template.vue';
const entries: SettingsTemplateEntry[] = [
{ id: 'pname', title: 'Name', text: 'Project name' },
{ id: 'pid', title: 'Id', text: 'Project id' },
{ id: 'pscript', title: 'Script', text: 'Universal javascript integration' },
{ id: 'pdelete', title: 'Delete', text: 'Delete current project' },
]
const activeProject = useActiveProject();
const projectNameInputVal = ref<string>(activeProject.value?.name || '');
watch(activeProject, () => {
projectNameInputVal.value = activeProject.value?.name || "";
})
const canChange = computed(() => {
if (activeProject.value?.name == projectNameInputVal.value) return false;
if (projectNameInputVal.value.length === 0) return false;
return true;
});
async function changeProjectName() {
await $fetch("/api/project/change_name", {
method: 'POST',
...signHeaders({ 'Content-Type': 'application/json' }),
body: JSON.stringify({ name: projectNameInputVal.value })
});
location.reload();
}
async function deleteProject() {
if (!activeProject.value) return;
const sure = confirm(`Are you sure to delete the project ${activeProject.value.name} ?`);
if (!sure) return;
try {
await $fetch('/api/project/delete', {
method: 'DELETE',
...signHeaders({ 'Content-Type': 'application/json' }),
body: JSON.stringify({ project_id: activeProject.value._id.toString() })
});
const projectsList = useProjectsList()
await projectsList.refresh();
const firstProjectId = projectsList.data.value?.[0]?._id.toString();
if (firstProjectId) {
await setActiveProject(firstProjectId);
}
} catch (ex: any) {
alert(ex.message);
}
}
</script>
<template>
<SettingsTemplate :entries="entries" :key="activeProject?.name || 'NONE'">
<template #pname>
<div class="flex items-center gap-4">
<LyxUiInput class="w-full px-4 py-2" v-model="projectNameInputVal"></LyxUiInput>
<LyxUiButton @click="changeProjectName()" :disabled="!canChange" type="primary"> Change </LyxUiButton>
</div>
</template>
<template #pid>
<LyxUiCard class="w-full flex items-center">
<div class="grow">{{ activeProject?._id.toString() }}</div>
<div><i class="far fa-copy"></i></div>
</LyxUiCard>
</template>
<template #pscript>
<LyxUiCard class="w-full flex items-center">
<div class="grow">
{{ `
<script defer data-project="${activeProject?._id}"
src="https://cdn.jsdelivr.net/gh/litlyx/litlyx-js/browser/litlyx.js"></script>` }}
</div>
<div><i class="far fa-copy"></i></div>
</LyxUiCard>
</template>
<template #pdelete>
<div class="flex justify-end">
<LyxUiButton type="danger" @click="deleteProject()">
Delete project
</LyxUiButton>
</div>
</template>
</SettingsTemplate>
</template>

37
dashboard/components/settings/Template.vue Normal file
View File

@@ -0,0 +1,37 @@
<script lang="ts" setup>
export type SettingsTemplateEntry = {
title: string,
text: string,
id: string
}
type SettingsTemplateProp = {
entries: SettingsTemplateEntry[]
}
const props = defineProps<SettingsTemplateProp>();
</script>
<template>
<div class="mt-10 px-4">
<div v-for="(entry, index) of props.entries" class="flex flex-col">
<div class="flex">
<div class="flex-[2]">
<div class="poppins font-medium text-lyx-text">
{{ entry.title }}
</div>
<div class="poppins font-regular text-lyx-text-dark">
{{ entry.text }}
</div>
</div>
<div class="flex-[3]">
<slot :name="entry.id"></slot>
</div>
</div>
<div v-if="index < props.entries.length - 1" class="h-[2px] bg-lyx-widget-lighter w-full my-10"></div>
</div>
</div>
</template>

231
dashboard/components/settings/billing.vue Normal file
View File

@@ -0,0 +1,231 @@
<script lang="ts" setup>
import dayjs from 'dayjs';
import type { SettingsTemplateEntry } from './Template.vue';
const activeProject = useActiveProject();
definePageMeta({ layout: 'dashboard' });
const { data: planData, refresh: planRefresh, pending: planPending } = useFetch('/api/project/plan', {
...signHeaders(),
lazy: true
});
const percent = computed(() => {
if (!planData.value) return '-';
return (100 / planData.value.limit * planData.value.count).toFixed(2) + '%';
});
const color = computed(() => {
if (!planData.value) return 'blue';
if (planData.value.count >= planData.value.limit) return 'red';
return 'blue';
});
const daysLeft = computed(() => {
if (!planData.value) return '-';
return (-dayjs().diff(planData.value.billing_expire_at, 'days')).toString();
});
const leftPercent = computed(() => {
if (!planData.value) return 0;
const left = dayjs().diff(planData.value.billing_expire_at, 'days');
const total = dayjs(planData.value.billing_start_at).diff(planData.value.billing_expire_at, 'days');
const percent = 100 - (100 / total * left);
return percent;
});
const prettyExpireDate = computed(() => {
if (!planData.value) return '';
return dayjs(planData.value.billing_expire_at).format('DD/MM/YYYY');
});
const { data: invoices, refresh: invoicesRefresh, pending: invoicesPending } = useFetch(`/api/pay/${activeProject.value?._id.toString()}/invoices`, {
...signHeaders(),
lazy: true
})
const showPricingDrawer = ref<boolean>(false);
function onPlanUpgradeClick() {
showPricingDrawer.value = true;
}
function openInvoice(link: string) {
window.open(link, '_blank');
}
function getPremiumName(type: number) {
if (type === 0) return 'FREE';
if (type === 1) return 'ACCELERATION';
if (type === 2) return 'EXPANSION';
return 'CUSTOM';
}
watch(activeProject, () => {
invoicesRefresh();
planRefresh();
})
const entries: SettingsTemplateEntry[] = [
{ id: 'plan', title: 'Current plan', text: 'Manage current plat for this project' },
{ id: 'usage', title: 'Usage', text: 'Show usage of current project' },
{ id: 'invoices', title: 'Invoices', text: 'Manage invoices of current project' },
]
</script>
<template>
<div class="relative">
<Transition name="pdrawer">
<PricingDrawer @onCloseClick="showPricingDrawer = false" :currentSub="planData?.premium_type || 0"
class="bg-black fixed right-0 top-0 w-full xl:w-[60vw] xl:min-w-[65rem] h-full z-[20]"
v-if=showPricingDrawer>
</PricingDrawer>
</Transition>
<div v-if="invoicesPending || planPending"
class="backdrop-blur-[1px] z-[20] mt-20 w-full h-full flex items-center justify-center font-bold">
<i class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
</div>
<SettingsTemplate v-if="!invoicesPending && !planPending" :entries="entries">
<template #plan>
<LyxUiCard v-if="planData" class="flex flex-col w-full">
<div class="flex flex-col gap-6 px-8 grow">
<div class="flex justify-between flex-col sm:flex-row">
<div class="flex flex-col">
<div class="flex gap-3 items-center">
<div class="poppins font-semibold text-[1.1rem]">
{{ planData.premium ? 'Premium plan' : 'Basic plan' }}
</div>
<div
class="flex lato text-[.7rem] bg-accent/25 border-accent/40 border-[1px] px-[.6rem] rounded-lg">
{{ planData.premium ? getPremiumName(planData.premium_type) : 'FREE' }}
</div>
</div>
<div class="poppins text-text-sub text-[.9rem]">
Our free plan for testing the product.
</div>
</div>
<div class="flex items-center gap-1">
<div class="poppins font-semibold text-[2rem]"> $0 </div>
<div class="poppins text-text-sub mt-2"> per month </div>
</div>
</div>
<div class="flex flex-col">
<div class="poppins"> Billing period:</div>
<div class="flex items-center gap-2 md:gap-4 flex-col pt-4 md:pt-0 md:flex-row">
<div class="grow w-full md:w-auto">
<UProgress color="green" :min="0" :max="100" :value="leftPercent"></UProgress>
</div>
<div class="poppins"> {{ daysLeft }} days left </div>
</div>
<div class="flex justify-center">
Subscription: {{ planData.subscription_status }}
</div>
</div>
</div>
<div class="my-4 w-full bg-gray-400/30 h-[1px]">
</div>
<div class="flex justify-between px-8 flex-col sm:flex-row">
<div class="flex gap-2 text-text-sub text-[.9rem]">
<div class="poppins"> Expire date:</div>
<div> {{ prettyExpireDate }}</div>
</div>
<div v-if="!isGuest" @click="onPlanUpgradeClick()"
class="cursor-pointer flex items-center gap-2 text-[.9rem] text-white font-semibold bg-accent px-4 py-1 rounded-lg drop-shadow-[0_0_8px_#000000]">
<div class="poppins"> Upgrade plan </div>
<i class="fas fa-arrow-up-right"></i>
</div>
</div>
</LyxUiCard>
</template>
<template #usage>
<LyxUiCard v-if="planData" class="flex flex-col w-full">
<div class="flex flex-col gap-6 px-8">
<div class="flex justify-between">
<div class="flex flex-col">
<div class="poppins font-semibold text-[1.1rem]">
Usage
</div>
<div class="poppins text-text-sub text-[.9rem]">
Check the usage limits of your project.
</div>
</div>
</div>
<div class="flex flex-col">
<div class="poppins"> Usage:</div>
<div class="flex items-center gap-2 md:gap-4 flex-col pt-4 md:pt-0 md:flex-row">
<div class="grow w-full md:w-auto">
<UProgress :color="color" :min="0" :max="planData.limit" :value="planData.count">
</UProgress>
</div>
<div class="poppins"> {{ percent }}</div>
</div>
<div class="flex justify-center">
{{ formatNumberK(planData.count) }} / {{ formatNumberK(planData.limit) }}
</div>
</div>
</div>
</LyxUiCard>
</template>
<template #invoices>
<CardTitled v-if="!isGuest" title="Invoices"
:sub="(invoices && invoices.length == 0) ? 'No invoices yet' : ''" class="p-4 mt-8 w-full">
<div class="flex flex-col gap-2">
<div class="flex justify-between items-center bg-[#161616] p-4 rounded-lg"
v-for="invoice of invoices">
<div> <i class="fal fa-file-invoice"></i> </div>
<div class="flex flex-col md:flex-row md:justify-around md:grow items-center gap-2">
<div> {{ new Date(invoice.date).toLocaleString() }} </div>
<div> € {{ invoice.cost / 100 }} </div>
<div> {{ invoice.id }} </div>
<div
class="flex items-center lato text-[.8rem] bg-accent/25 border-accent/40 border-[1px] px-[.6rem] rounded-lg">
{{ invoice.status }}
</div>
</div>
<div>
<i @click="openInvoice(invoice.link)"
class="far fa-download cursor-pointer hover:text-white/80"></i>
</div>
</div>
</div>
</CardTitled>
</template>
</SettingsTemplate>
</div>
</template>
<style scoped lang="scss">
.pdrawer-enter-active,
.pdrawer-leave-active {
transition: all .5s ease-in-out;
}
.pdrawer-enter-from,
.pdrawer-leave-to {
transform: translateX(100%)
}
.pdrawer-enter-to,
.pdrawer-leave-from {
transform: translateX(0)
}
</style>

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

@@ -1,8 +1,10 @@
<script setup lang="ts">
import type { SettingsTemplateEntry } from './Template.vue';
const activeProject = useActiveProject();
definePageMeta({ layout: 'dashboard' });
const activeProject = useActiveProject();
const columns = [
{ key: 'me', label: '' },
@@ -13,7 +15,7 @@ const columns = [
// { key: 'pending', label: 'Pending' },
]
const { data: members, refresh: refreshMembers } = useFetch('/api/project/members/list', signHeaders());
const { data: members, refresh: refreshMembers, pending: pendingMembers } = useFetch('/api/project/members/list', signHeaders());
const showAddMember = ref<boolean>(false);
@@ -67,32 +69,35 @@ async function addMember() {
} catch (ex: any) { }
}
watch(activeProject, () => {
refreshMembers();
})
const entries: SettingsTemplateEntry[] = [
{ id: 'add', title: 'Add member', text: 'Add new member to project' },
{ id: 'members', title: 'Members', text: 'Manage members of current project' },
]
</script>
<template>
<div class="home w-full h-full px-10 lg:px-6 overflow-y-auto pb-[12rem] md:pb-0 py-2">
<div class="flex flex-col gap-4">
<div v-if="!isGuest" @click="showAddMember = !showAddMember;"
class="flex items-center gap-2 bg-menu w-fit px-3 py-2 rounded-lg hover:bg-menu/80 cursor-pointer">
<i class="fas fa-plus"></i>
<div> Add member </div>
</div>
<div v-if="showAddMember" class="flex gap-4 items-center">
<input v-model="addMemberEmail" class="focus:outline-none bg-menu px-4 py-1 rounded-lg" type="text"
placeholder="user email">
<div @click="addMember" class="bg-menu w-fit py-1 px-4 rounded-lg hover:bg-menu/80 cursor-pointer">
Add
<SettingsTemplate :entries="entries">
<template #add>
<div v-if="!isGuest" class="flex flex-col">
<div class="flex gap-4 items-center">
<LyxUiInput class="px-4 py-1 w-full" placeholder="User email" v-model="addMemberEmail"></LyxUiInput>
<LyxUiButton @click="addMember" type="secondary"> Add </LyxUiButton>
</div>
<div class="poppins text-[.8rem] mt-2 text-lyx-text-darker">
User should have been registered to Litlyx
</div>
</div>
</template>
<template #members>
<UTable :rows="members || []" :columns="columns">
<template #me-data="e">
@@ -108,9 +113,7 @@ async function addMember() {
</template>
</UTable>
</div>
</div>
</template>
</SettingsTemplate>
</template>

5
dashboard/composables/Projects.ts
View File

@@ -49,6 +49,11 @@ export function useActiveProject() {
export async function setActiveProject(project_id: string) {
changingProject.value = true;
await new Promise(e => setTimeout(e, 500));
await $fetch<string>(`/api/user/set_active_project?project_id=${project_id}`, signHeaders());
await activeProjectId.refresh();
changingProject.value = false;
}
export const changingProject = ref<boolean>(false);

5
dashboard/composables/useAccessToken.ts
View File

@@ -9,6 +9,11 @@ export function signHeaders(headers?: Record<string, string>) {
return { headers: { ...(headers || {}), 'Authorization': 'Bearer ' + token.value } }
}
export const authorizationHeaderComputed = computed(() => {
const { token } = useAccessToken()
return token.value ? 'Bearer ' + token.value : '';
});
export function useAccessToken() {
const tokenCookie = useCookie(ACCESS_TOKEN_COOKIE_KEY, { expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30) })

43
dashboard/composables/useAlert.ts Normal file
View File

@@ -0,0 +1,43 @@
export type Alert = {
title: string,
text: string,
icon: string,
ms: number,
id: number,
remaining: number,
transitionStyle: string
}
const alerts = ref<Alert[]>([]);
const idPool = {
id: 0,
getId() {
return idPool.id++;
}
}
function createAlert(title: string, text: string, icon: string, ms: number) {
const alert = reactive<Alert>({
title, text, icon, ms, id: idPool.getId(), remaining: ms,
transitionStyle: 'transition: all 250ms linear;'
});
alerts.value.push(alert);
const timeout = setInterval(() => {
alert.remaining -= 250;
if (alert.remaining <= 0) {
closeAlert(alert.id);
clearInterval(timeout);
}
}, 250)
}
function closeAlert(id: number) {
alerts.value = alerts.value.filter(e => e.id != id);
}
export function useAlert() {
return { alerts, createAlert, closeAlert }
}

27
dashboard/composables/useCustomDialog.ts
View File

@@ -4,17 +4,42 @@ import type { Component } from "vue";
const showDialog = ref<boolean>(false);
const dialogParams = ref<any>({});
const dialogComponent = ref<Component>();
const dialogWidth = ref<string>("100%");
const dialogHeight = ref<string>("100%");
const dialogClosable = ref<boolean>(true);
function closeDialog() {
showDialog.value = false;
}
export type CustomDialogOptions = {
params?: any,
width?: string,
height?: string,
closable?: boolean
}
function openDialogEx(component: Component, options?: CustomDialogOptions) {
dialogComponent.value = component;
dialogParams.value = options?.params || {};
showDialog.value = true;
dialogWidth.value = options?.width || '100%';
dialogHeight.value = options?.height || '100%';
dialogClosable.value = options?.closable ?? true;
}
function openDialog(component: Component, params: any) {
dialogComponent.value = component;
dialogParams.value = params;
showDialog.value = true;
dialogWidth.value = '100%';
dialogHeight.value = '100%';
}
const dialogStyle = computed(() => {
return `width: ${dialogWidth.value}; height: ${dialogHeight.value}`;
});
export function useCustomDialog() {
return { showDialog, closeDialog, openDialog, dialogParams, dialogComponent };
return { showDialog, openDialogEx, closeDialog, openDialog, dialogParams, dialogComponent, dialogStyle, dialogClosable };
}

80
dashboard/composables/useCustomFetch.ts Normal file
View File

@@ -0,0 +1,80 @@
import type { InternalApi } from 'nitropack';
import type { WatchSource, WatchStopHandle } from 'vue';
type NitroFetchRequest = Exclude<keyof InternalApi, `/_${string}` | `/api/_${string}`> | (string & {});
export type CustomFetchOptions = {
watchProps?: WatchSource[],
lazy?: boolean,
method?: string,
getBody?: () => Record<string, any>,
watchKey?: string
}
type OnResponseCallback<TData> = (data: Ref<TData | undefined>) => any
type OnRequestCallback = () => any
const watchStopHandles: Record<string, WatchStopHandle> = {}
export function useCustomFetch<T>(url: NitroFetchRequest, getHeaders: () => Record<string, string>, options?: CustomFetchOptions) {
const pending = ref<boolean>(false);
const data = ref<T | undefined>();
const error = ref<Error | undefined>();
let onResponseCallback: OnResponseCallback<T> = () => { }
let onRequestCallback: OnRequestCallback = () => { }
const onResponse = (callback: OnResponseCallback<T>) => {
onResponseCallback = callback;
}
const onRequest = (callback: OnRequestCallback) => {
onRequestCallback = callback;
}
const execute = async () => {
onRequestCallback();
pending.value = true;
error.value = undefined;
try {
data.value = await $fetch<T>(url, {
headers: getHeaders(),
method: (options?.method || 'GET') as any,
body: options?.getBody ? JSON.stringify(options.getBody()) : undefined
});
onResponseCallback(data);
} catch (err) {
error.value = err as Error;
} finally {
pending.value = false;
}
}
if (options?.lazy !== true) {
execute();
}
if (options?.watchProps) {
const watchStop = watch(options.watchProps, () => {
execute();
});
const key = options?.watchKey || `${url}`;
if (watchStopHandles[key]) watchStopHandles[key]();
watchStopHandles[key] = watchStop;
console.log('Watchers:', Object.keys(watchStopHandles).length);
}
const refresh = execute;
return { pending, execute, data, error, refresh, onResponse, onRequest };
}

215
dashboard/composables/useDataService.ts
View File

@@ -1,6 +1,12 @@
import type { Slice } from "@services/DateService";
import DateService from "@services/DateService";
import type { MetricsCounts } from "~/server/api/metrics/[project_id]/counts";
import type { BrowsersAggregated } from "~/server/api/metrics/[project_id]/data/browsers";
import type { CountriesAggregated } from "~/server/api/metrics/[project_id]/data/countries";
import type { DevicesAggregated } from "~/server/api/metrics/[project_id]/data/devices";
import type { CustomEventsAggregated } from "~/server/api/metrics/[project_id]/data/events";
import type { OssAggregated } from "~/server/api/metrics/[project_id]/data/oss";
import type { ReferrersAggregated } from "~/server/api/metrics/[project_id]/data/referrers";
import type { VisitsWebsiteAggregated } from "~/server/api/metrics/[project_id]/data/websites";
import type { MetricsTimeline } from "~/server/api/metrics/[project_id]/timeline/generic";
@@ -13,86 +19,151 @@ export function useMetricsData() {
return metricsInfo;
}
export function useFirstInteractionData() {
const activeProject = useActiveProject();
const metricsInfo = useFetch<boolean>(`/api/metrics/${activeProject.value?._id}/first_interaction`, signHeaders());
return metricsInfo;
}
export async function useTimelineAdvanced(endpoint: string, slice: Slice, fromDate?: string, toDate?: string, customBody: Object = {}) {
const { from, to } = DateService.prepareDateRange(
fromDate || DateService.getDefaultRange(slice).from,
toDate || DateService.getDefaultRange(slice).to,
slice
);
const activeProject = useActiveProject();
const response = await $fetch(
`/api/metrics/${activeProject.value?._id}/timeline/${endpoint}`, {
method: 'POST',
...signHeaders({ 'Content-Type': 'application/json' }),
body: JSON.stringify({ slice, from, to, ...customBody })
});
return response as { _id: string, count: number }[];
}
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();
// const { safeSnapshotDates, snapshot } = useSnapshot()
// const activeProject = useActiveProject();
const response = await $fetch<{ data: MetricsTimeline[], from: string, to: string }>(
`/api/metrics/${activeProject.value?._id}/timeline/${timelineEndpointName}`, {
method: 'POST',
...signHeaders({ 'Content-Type': 'application/json' }),
body: JSON.stringify({ slice }),
});
// const createFromToHeaders = (headers: Record<string, string> = {}) => ({
// 'x-from': safeSnapshotDates.value.from,
// 'x-to': safeSnapshotDates.value.to,
// ...headers
// });
return response;
}
// const createFromToBody = (body: Record<string, any> = {}) => ({
// from: safeSnapshotDates.value.from,
// to: safeSnapshotDates.value.to,
// ...body
// });
export async function useTimelineData(timelineEndpointName: string, slice: SliceName) {
const response = await useTimelineDataRaw(timelineEndpointName, slice);
if (!response) return;
const fixed = fixMetrics(response, slice);
return fixed;
}
export function usePagesData(website: string, limit: number = 10) {
const activeProject = useActiveProject();
const res = useFetch<VisitsWebsiteAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/pages`, {
...signHeaders({
'x-query-limit': limit.toString(),
'x-website-name': website
}),
key: `pages_data:${website}:${limit}`,
lazy: true
});
// export function useFirstInteractionData() {
// const activeProject = useActiveProject();
// const metricsInfo = useFetch<boolean>(`/api/metrics/${activeProject.value?._id}/first_interaction`, signHeaders());
// return metricsInfo;
// }
return res;
}
// 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',
// getBody: () => createFromToBody({ slice: slice.value, ...customBody }),
// lazy: true,
// watchProps: [snapshot, slice]
// });
// return response;
// }
export function useWebsitesData(limit: number = 10) {
const activeProject = useActiveProject();
const res = useFetch<VisitsWebsiteAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/websites`, {
...signHeaders({ 'x-query-limit': limit.toString() }),
key: `websites_data:${limit}`,
lazy: true
});
return res;
}
// 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<{ _id: string, count: number }[]>('referrers', slice, { referrer });
// }
// export function useEventsStackedTimeline(slice: Ref<Slice>) {
// return useTimelineAdvanced<{ _id: string, name: string, count: number }[]>('events_stacked', slice);
// }
// export async function useTimelineDataRaw(timelineEndpointName: string, slice: SliceName) {
// const activeProject = useActiveProject();
// const response = await $fetch<{ data: MetricsTimeline[], from: string, to: string }>(
// `/api/metrics/${activeProject.value?._id}/timeline/${timelineEndpointName}`, {
// method: 'POST',
// ...signHeaders({ 'Content-Type': 'application/json' }),
// body: JSON.stringify({ slice }),
// });
// return response;
// }
// export async function useTimelineData(timelineEndpointName: string, slice: SliceName) {
// const response = await useTimelineDataRaw(timelineEndpointName, slice);
// if (!response) return;
// const fixed = fixMetrics(response, slice);
// return fixed;
// }
// export function usePagesData(website: string, limit: number = 10) {
// const activeProject = useActiveProject();
// const res = useFetch<VisitsWebsiteAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/pages`, {
// ...signHeaders({
// 'x-query-limit': limit.toString(),
// 'x-website-name': website
// }),
// key: `pages_data:${website}:${limit}`,
// lazy: true
// });
// return res;
// }
// export function useWebsitesData(limit: number = 10) {
// const res = useCustomFetch<VisitsWebsiteAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/websites`,
// () => signHeaders(createFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
// { lazy: false, watchProps: [snapshot] }
// );
// return res;
// }
// export function useEventsData(limit: number = 10) {
// const res = useCustomFetch<CustomEventsAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/events`,
// () => signHeaders(createFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
// { lazy: false, watchProps: [snapshot] }
// );
// return res;
// }
// export function useReferrersData(limit: number = 10) {
// const res = useCustomFetch<ReferrersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/referrers`,
// () => signHeaders(createFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
// { lazy: false, watchProps: [snapshot] }
// );
// return res;
// }
// export function useBrowsersData(limit: number = 10) {
// const res = useCustomFetch<BrowsersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/browsers`,
// () => signHeaders(createFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
// { lazy: false, watchProps: [snapshot] }
// );
// return res;
// }
// export function useOssData(limit: number = 10) {
// const res = useCustomFetch<OssAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/oss`,
// () => signHeaders(createFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
// { lazy: false, watchProps: [snapshot] }
// );
// return res;
// }
// export function useGeolocationData(limit: number = 10) {
// const res = useCustomFetch<CountriesAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/countries`,
// () => signHeaders(createFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
// { lazy: false, watchProps: [snapshot] }
// );
// return res;
// }
// export function useDevicesData(limit: number = 10) {
// const res = useCustomFetch<DevicesAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/devices`,
// () => signHeaders(createFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
// { lazy: false, watchProps: [snapshot] }
// );
// return res;
// }

76
dashboard/composables/useSnapshot.ts Normal file
View File

@@ -0,0 +1,76 @@
import type { TProjectSnapshot } from "@schema/ProjectSnapshot";
const remoteSnapshots = useFetch<TProjectSnapshot[]>('/api/project/snapshots', {
...signHeaders(),
immediate: false
});
const activeProject = useActiveProject();
watch(activeProject, async () => {
await remoteSnapshots.refresh();
snapshot.value = isLiveDemo() ? snapshots.value[0] : snapshots.value[1];
});
const snapshots = computed(() => {
const activeProject = useActiveProject();
const getDefaultSnapshots: () => TProjectSnapshot[] = () => [
{
project_id: activeProject.value?._id as any,
_id: 'default0' as any,
name: 'All',
from: new Date(activeProject.value?.created_at || 0),
to: new Date(Date.now()),
color: '#CCCCCC'
},
{
project_id: activeProject.value?._id as any,
_id: 'default1' as any,
name: 'Last month',
from: new Date(Date.now() - 1000 * 60 * 60 * 24 * 30),
to: new Date(Date.now()),
color: '#00CC00'
},
{
project_id: activeProject.value?._id as any,
_id: 'default2' as any,
name: 'Last week',
from: new Date(Date.now() - 1000 * 60 * 60 * 24 * 7),
to: new Date(Date.now()),
color: '#0F02D2'
},
{
project_id: activeProject.value?._id as any,
_id: 'default3' as any,
name: 'Last day',
from: new Date(Date.now() - 1000 * 60 * 60 * 24),
to: new Date(Date.now()),
color: '#CC11CC'
}
]
return [
...getDefaultSnapshots(),
...(remoteSnapshots.data.value || [])
];
})
const snapshot = ref<TProjectSnapshot>(isLiveDemo() ? snapshots.value[0] : snapshots.value[1]);
const safeSnapshotDates = computed(() => {
const from = new Date(snapshot.value?.from || 0).toISOString();
const to = new Date(snapshot.value?.to || Date.now()).toISOString();
return { from, to }
})
async function updateSnapshots() {
await remoteSnapshots.refresh();
}
export function useSnapshot() {
if (remoteSnapshots.status.value === 'idle') {
remoteSnapshots.execute();
}
return { snapshot, snapshots, safeSnapshotDates, updateSnapshots }
}

53
dashboard/layouts/dashboard.vue
View File

@@ -2,60 +2,21 @@
import type { Section } from '~/components/CVerticalNavigation.vue';
const router = useRouter();
const { setToken } = useAccessToken();
import { Lit } from 'litlyx-js';
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: 'Admin', icon: 'fas fa-cat', adminOnly: true, to: '/admin' },
]
},
{
title: 'Project',
entries: [
{ 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: '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' },
// { label: 'Events', to: '/dashboard/events', icon: 'far fa-line-chart' },
]
},
{
title: 'Non si vede',
entries: [
{ label: 'Dashboard', to: '/', icon: 'fal fa-table-layout' },
{ label: 'Events', to: '/events', icon: 'fal fa-square-bolt' },
{ label: 'Analyst', to: '/analyst', icon: 'fal fa-microchip-ai' },
{ label: 'Insights (soon)', to: '#', icon: 'fal fa-lightbulb', disabled: true },
{
label: 'Docs', to: 'https://docs.litlyx.com', icon: 'far fa-book-open', external: true,
label: 'Docs', to: 'https://docs.litlyx.com', icon: 'fal fa-book', external: true,
action() { Lit.event('docs_clicked') },
},
{
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: 'Settings', to: '/settings', icon: 'fal fa-gear' },
]
}
];
@@ -92,7 +53,7 @@ const { isOpen, close, open } = useMenu();
</CVerticalNavigation>
<div class="overflow-hidden w-full bg-bg relative h-full">
<div class="overflow-hidden w-full bg-lyx-background-light relative h-full">
<div v-if="showDialog" class="barrier w-full h-full z-[34] absolute bg-black/50 backdrop-blur-[2px]">
<i

2
dashboard/nuxt.config.ts
View File

@@ -64,4 +64,6 @@ export default defineNuxtConfig({
devServer: {
host: '0.0.0.0',
},
components: true,
extends: ['../lyx-ui']
})

4
dashboard/package.json
View File

@@ -10,11 +10,12 @@
"postinstall": "nuxt prepare",
"test": "vitest",
"docker-build": "docker build -t litlyx-dashboard -f Dockerfile ../",
"docker-inspect": "docker run -it litlyx-dashboard sh"
"docker-inspect": "docker run -it litlyx-dashboard sh"
},
"dependencies": {
"@nuxtjs/tailwindcss": "^6.12.0",
"chart.js": "^3.9.1",
"date-fns": "^3.6.0",
"dayjs": "^1.11.11",
"google-auth-library": "^9.9.0",
"jsonwebtoken": "^9.0.2",
@@ -29,6 +30,7 @@
"redis": "^4.6.13",
"sass": "^1.75.0",
"stripe": "^15.8.0",
"v-calendar": "^3.1.2",
"vue": "^3.4.21",
"vue-chart-3": "^3.1.8",
"vue-router": "^4.3.0"

32
dashboard/pages/admin/index.vue
View File

@@ -22,6 +22,7 @@ type TProjectsGrouped = {
project_name: string,
total_visits: number,
total_events: number,
total_sessions: number
}[]
}
@@ -47,7 +48,8 @@ const projectsGrouped = computed(() => {
premium: project.premium,
project_name: project.project_name,
total_events: project.total_events,
total_visits: project.total_visits
total_visits: project.total_visits,
total_sessions: project.total_sessions
});
} else {
@@ -61,7 +63,8 @@ const projectsGrouped = computed(() => {
premium_type: project.premium_type,
project_name: project.project_name,
total_events: project.total_events,
total_visits: project.total_visits
total_visits: project.total_visits,
total_sessions: project.total_sessions
}]
}
@@ -71,6 +74,12 @@ const projectsGrouped = computed(() => {
}
result.sort((sa, sb) => {
const ca = sa.projects.reduce((a, e) => a + (e.total_visits + e.total_events), 0);
const cb = sb.projects.reduce((a, e) => a + (e.total_visits + e.total_events), 0);
return cb - ca;
})
return result;
});
@@ -107,7 +116,6 @@ const totalEvents = computed(() => {
return projects.value?.reduce((a, e) => a + e.total_events, 0) || 0;
});
const details = ref<any>();
const showDetails = ref<boolean>(false);
async function getProjectDetails(project_id: string) {
@@ -188,17 +196,17 @@ async function resetCount(project_id: string) {
<div> {{ project.total_visits }} </div>
<div> Events: </div>
<div> {{ project.total_events }} </div>
<div> Sessions: </div>
<div> {{ project.total_sessions }} </div>
</div>
<div class="flex gap-4">
<div class="bg-[#272727] hover:bg-[#313131] cursor-pointer px-8 py-2 mt-3 rounded-lg"
@click="getProjectDetails(project._id)">
Get details
</div>
<div class="bg-[#272727] hover:bg-[#313131] cursor-pointer px-8 py-2 mt-3 rounded-lg"
@click="resetCount(project._id)">
Reset counts
</div>
<div class="flex gap-4 items-center mt-4">
<LyxUiButton type="secondary" @click="getProjectDetails(project._id)">
Payment details
</LyxUiButton>
<LyxUiButton type="danger" @click="resetCount(project._id)">
Refresh counts
</LyxUiButton>
</div>
</div>

27
dashboard/pages/events.vue
View File

@@ -8,6 +8,11 @@ const selectLabelsEvents = [
];
const eventsStackedSelectIndex = ref<number>(0);
const activeProject = useActiveProject();
const { snapshot } = useSnapshot();
const refreshKey = computed(() => `${snapshot.value._id.toString() + activeProject.value?._id.toString()}`);
</script>
@@ -15,9 +20,9 @@ const eventsStackedSelectIndex = ref<number>(0);
<template>
<div class="w-full h-full overflow-y-auto pb-20 p-6 gap-6 flex flex-col">
<div class="flex gap-6 flex-col xl:flex-row">
<CardTitled class="p-4 flex-[4]" title="Events" sub="Events stacked bar chart.">
<CardTitled :key="refreshKey" 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,27 +34,19 @@ 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 :key="refreshKey" 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">
<EventsUserFlow></EventsUserFlow>
<EventsUserFlow :key="refreshKey"></EventsUserFlow>
</div>
<div class="flex">
<EventsMetadataAnalyzer></EventsMetadataAnalyzer>
<EventsMetadataAnalyzer :key="refreshKey"></EventsMetadataAnalyzer>
</div>

93
dashboard/pages/index.vue
View File

@@ -27,15 +27,18 @@ onMounted(async () => {
});
const { createAlert } = useAlert();
function copyProjectId() {
if (!navigator.clipboard) alert('NON PUOI COPIARE IN HTTP');
if (!navigator.clipboard) alert('You can\'t copy in HTTP');
navigator.clipboard.writeText(activeProject.value?._id?.toString() || '');
alert('Copiato !');
createAlert('Success', 'Project id copied successfully.', 'far fa-circle-check', 5000);
}
function copyScript() {
if (!navigator.clipboard) alert('NON PUOI COPIARE IN HTTP');
if (!navigator.clipboard) alert('You can\'t copy in HTTP');
const createScriptText = () => {
@@ -48,18 +51,17 @@ function copyScript() {
}
navigator.clipboard.writeText(createScriptText());
alert('Copiato !');
createAlert('Success', 'Script copied successfully.', 'far fa-circle-check', 5000);
}
const { data: firstInteraction, pending, refresh } = useFirstInteractionData();
const firstInteractionUrl = computed(() => {
return `/api/metrics/${activeProject.value?._id}/first_interaction`
});
watch(pending, () => {
if (pending.value === true) return;
if (firstInteraction.value === false) {
setTimeout(() => { refresh(); }, 2000);
}
})
const firstInteraction = useFetch<boolean>(firstInteractionUrl, {
...signHeaders(),
lazy: true
});
const selectLabels = [
{ label: 'Hour', value: 'hour' },
@@ -68,32 +70,49 @@ const selectLabels = [
];
</script>
const { snapshot } = useSnapshot();
const refreshKey = computed(() => `${snapshot.value._id.toString() + activeProject.value?._id.toString()}`);
</script>
<template>
<div class="dashboard w-full h-full overflow-y-auto pb-20 md:pt-4 lg:pt-0">
<div :key="'home-' + isLiveDemo()" v-if="projects && activeProject && firstInteraction">
<div :key="'home-' + isLiveDemo()" v-if="projects && activeProject && firstInteraction.data.value">
<div class="w-full px-4 py-2">
<div v-if="limitsInfo && limitsInfo.limited"
class="bg-orange-600 justify-center flex gap-2 py-2 px-4 font-semibold text-[1.2rem] rounded-lg">
<div class="poppins text-text"> Limit reached </div>
<NuxtLink to="/plans" class="poppins text-[#393972] underline cursor-pointer">
Upgrade project
</NuxtLink>
class="w-full bg-[#fbbf2422] p-4 rounded-lg text-[.9rem] flex items-center">
<div class="flex flex-col grow">
<div class="poppins font-semibold text-[#fbbf24]">
Limit reached
</div>
<div class="poppins text-[#fbbf24]">
Litlyx has stopped to collect yur data. Please upgrade the plan for a minimal data loss.
</div>
</div>
<div>
<LyxUiButton type="outline"> Upgrade </LyxUiButton>
</div>
</div>
</div>
<DashboardTopSection></DashboardTopSection>
<DashboardTopCards></DashboardTopCards>
<DashboardTopSection></DashboardTopSection>
<DashboardTopCards :key="refreshKey"></DashboardTopCards>
<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 :key="refreshKey" 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">
@@ -105,7 +124,8 @@ const selectLabels = [
</div>
</CardTitled>
<CardTitled class="p-4 flex-1" title="Sessions" sub="Shows trends in sessions.">
<CardTitled :key="refreshKey" class="p-4 flex-1 w-full" title="Sessions"
sub="Shows trends in sessions.">
<template #header>
<SelectButton @changeIndex="sessionsChartSelectIndex = $event"
:currentIndex="sessionsChartSelectIndex" :options="selectLabels">
@@ -119,26 +139,25 @@ const selectLabels = [
</div>
<div class="flex w-full justify-center mt-6 px-6">
<div class="flex w-full gap-6 flex-col xl:flex-row">
<div class="flex-1">
<DashboardWebsitesBarCard></DashboardWebsitesBarCard>
<DashboardWebsitesBarCard :key="refreshKey"></DashboardWebsitesBarCard>
</div>
<div class="flex-1">
<DashboardEventsBarCard></DashboardEventsBarCard>
<DashboardEventsBarCard :key="refreshKey"></DashboardEventsBarCard>
</div>
</div>
</div>
<div class="flex w-full justify-center mt-6 px-6">
<div class="flex w-full justify-center mt-6 px-6">
<div class="flex w-full gap-6 flex-col xl:flex-row">
<div class="flex-1">
<DashboardReferrersBarCard></DashboardReferrersBarCard>
<DashboardReferrersBarCard :key="refreshKey"></DashboardReferrersBarCard>
</div>
<div class="flex-1">
<DashboardBrowsersBarCard></DashboardBrowsersBarCard>
<DashboardBrowsersBarCard :key="refreshKey"></DashboardBrowsersBarCard>
</div>
</div>
</div>
@@ -146,10 +165,10 @@ const selectLabels = [
<div class="flex w-full justify-center mt-6 px-6">
<div class="flex w-full gap-6 flex-col xl:flex-row">
<div class="flex-1">
<DashboardOssBarCard></DashboardOssBarCard>
<DashboardOssBarCard :key="refreshKey"></DashboardOssBarCard>
</div>
<div class="flex-1">
<DashboardGeolocationBarCard></DashboardGeolocationBarCard>
<DashboardGeolocationBarCard :key="refreshKey"></DashboardGeolocationBarCard>
</div>
</div>
</div>
@@ -157,7 +176,7 @@ const selectLabels = [
<div class="flex w-full justify-center mt-6 px-6">
<div class="flex w-full gap-6 flex-col xl:flex-row">
<div class="flex-1">
<DashboardDevicesBarCard></DashboardDevicesBarCard>
<DashboardDevicesBarCard :key="refreshKey"></DashboardDevicesBarCard>
</div>
<div class="flex-1">
</div>
@@ -166,10 +185,10 @@ const selectLabels = [
</div>
<div v-if="!firstInteraction && activeProject" class="mt-[36vh] flex flex-col gap-6">
<div v-if="!firstInteraction.data.value && activeProject" class="mt-[20vh] lg:mt-[36vh] flex flex-col gap-6">
<div class="flex gap-4 items-center justify-center">
<div class="animate-pulse w-[1.5rem] h-[1.5rem] bg-accent rounded-full"> </div>
<div class="text-text/90 poppins text-[1.4rem] font-bold">
<div class="text-text/90 poppins text-[1.3rem] font-semibold">
Waiting for your first Visit or Event
</div>
</div>
@@ -200,7 +219,11 @@ const selectLabels = [
</div>
<div></div>
<NuxtLink to="https://docs.litlyx.com" target="_blank"
class="flex justify-center poppins text-[1.2rem] text-accent gap-2 items-center">
<div> <i class="far fa-book"></i> </div>
<div class="poppins"> Go to docs </div>
</NuxtLink>
</div>

6
dashboard/pages/live_demo.vue
View File

@@ -46,7 +46,7 @@ const selectLabelsEvents = [
{ label: 'Month', value: 'month' },
];
const { snapshot } = useSnapshot();
</script>
@@ -118,7 +118,7 @@ const selectLabelsEvents = [
<div class="flex gap-6 flex-col xl:flex-row p-6">
<CardTitled class="p-4 flex-[4]" title="Events" sub="Events stacked bar chart.">
<!-- <CardTitled class="p-4 flex-[4]" title="Events" sub="Events stacked bar chart.">
<template #header>
<SelectButton @changeIndex="eventsStackedSelectIndex = $event"
:currentIndex="eventsStackedSelectIndex" :options="selectLabelsEvents">
@@ -128,7 +128,7 @@ const selectLabelsEvents = [
<EventsStackedBarChart :slice="(selectLabelsEvents[eventsStackedSelectIndex].value as any)">
</EventsStackedBarChart>
</div>
</CardTitled>
</CardTitled> -->
<div class="bg-menu p-4 rounded-xl flex-[2] flex flex-col gap-10 h-full">
<div class="flex flex-col gap-1">

219
dashboard/pages/plans.vue
View File

@@ -1,219 +0,0 @@
<script lang="ts" setup>
import dayjs from 'dayjs';
const activeProject = useActiveProject();
definePageMeta({ layout: 'dashboard' });
const { data: planData } = useFetch('/api/project/plan', signHeaders());
const percent = computed(() => {
if (!planData.value) return '-';
return (100 / planData.value.limit * planData.value.count).toFixed(2) + '%';
});
const color = computed(() => {
if (!planData.value) return 'blue';
if (planData.value.count >= planData.value.limit) return 'red';
return 'blue';
});
const daysLeft = computed(() => {
if (!planData.value) return '-';
return (-dayjs().diff(planData.value.billing_expire_at, 'days')).toString();
});
const leftPercent = computed(() => {
if (!planData.value) return 0;
const left = dayjs().diff(planData.value.billing_expire_at, 'days');
const total = dayjs(planData.value.billing_start_at).diff(planData.value.billing_expire_at, 'days');
const percent = 100 - (100 / total * left);
return percent;
});
const prettyExpireDate = computed(() => {
if (!planData.value) return '';
return dayjs(planData.value.billing_expire_at).format('DD/MM/YYYY');
});
const { data: invoices } = await useFetch(`/api/pay/${activeProject.value?._id.toString()}/invoices`, signHeaders())
const showPricingDrawer = ref<boolean>(false);
function onPlanUpgradeClick() {
showPricingDrawer.value = true;
}
function openInvoice(link: string) {
window.open(link, '_blank');
}
function getPremiumName(type: number) {
if (type === 0) return 'FREE';
if (type === 1) return 'ACCELERATION';
if (type === 2) return 'EXPANSION';
return 'CUSTOM';
}
</script>
<template>
<div class="w-full h-full p-8 overflow-y-auto pb-40 lg:pb-0 relative overflow-x-hidden">
<Transition name="pdrawer">
<PricingDrawer @onCloseClick="showPricingDrawer = false" :currentSub="planData?.premium_type || 0"
class="bg-black fixed right-0 top-0 w-full xl:w-[60vw] xl:min-w-[65rem] h-full z-[20]"
v-if=showPricingDrawer>
</PricingDrawer>
</Transition>
<div @click="showPricingDrawer = false" v-if="showPricingDrawer"
class="barrier absolute left-0 top-0 w-full h-full z-[19] bg-black/40 backdrop-blur-[1px]">
</div>
<div class="poppins font-semibold text-[1.8rem]">
Billing
</div>
<div class="poppins text-[1.3rem] text-text-sub">
Manage your billing cycle for the project
<span class="font-bold">
{{ activeProject?.name || '' }}
</span>
</div>
<div class="my-4 mb-10 w-full bg-gray-400/30 h-[1px]">
</div>
<div class="flex flex-wrap justify-start gap-8">
<Card v-if="planData" class="px-0 pt-6 pb-4 w-[35rem] flex flex-col">
<div class="flex flex-col gap-6 px-8 grow">
<div class="flex justify-between flex-col sm:flex-row">
<div class="flex flex-col">
<div class="flex gap-3 items-center">
<div class="poppins font-semibold text-[1.1rem]">
{{ planData.premium ? 'Premium plan' : 'Basic plan' }}
</div>
<div
class="flex lato text-[.7rem] bg-accent/25 border-accent/40 border-[1px] px-[.6rem] rounded-lg">
{{ planData.premium ? getPremiumName(planData.premium_type) : 'FREE' }}
</div>
</div>
<div class="poppins text-text-sub text-[.9rem]">
Our free plan for testing the product.
</div>
</div>
<div class="flex items-center gap-1">
<div class="poppins font-semibold text-[2rem]"> $0 </div>
<div class="poppins text-text-sub mt-2"> per month </div>
</div>
</div>
<div class="flex flex-col">
<div class="poppins"> Billing period:</div>
<div class="flex items-center gap-2 md:gap-4 flex-col pt-4 md:pt-0 md:flex-row">
<div class="grow w-full md:w-auto">
<UProgress color="green" :min="0" :max="100" :value="leftPercent"></UProgress>
</div>
<div class="poppins"> {{ daysLeft }} days left </div>
</div>
<div class="flex justify-center">
Subscription: {{ planData.subscription_status }}
</div>
</div>
</div>
<div class="my-4 w-full bg-gray-400/30 h-[1px]">
</div>
<div class="flex justify-between px-8 flex-col sm:flex-row">
<div class="flex gap-2 text-text-sub text-[.9rem]">
<div class="poppins"> Expire date:</div>
<div> {{ prettyExpireDate }}</div>
</div>
<div v-if="!isGuest" @click="onPlanUpgradeClick()"
class="cursor-pointer flex items-center gap-2 text-[.9rem] text-white font-semibold bg-accent px-4 py-1 rounded-lg drop-shadow-[0_0_8px_#000000]">
<div class="poppins"> Upgrade plan </div>
<i class="fas fa-arrow-up-right"></i>
</div>
</div>
</Card>
<Card v-if="planData" class="px-0 pt-6 pb-4 w-[35rem] flex flex-col">
<div class="flex flex-col gap-6 px-8">
<div class="flex justify-between">
<div class="flex flex-col">
<div class="poppins font-semibold text-[1.1rem]">
Usage
</div>
<div class="poppins text-text-sub text-[.9rem]">
Check the usage limits of your project.
</div>
</div>
</div>
<div class="flex flex-col">
<div class="poppins"> Usage:</div>
<div class="flex items-center gap-2 md:gap-4 flex-col pt-4 md:pt-0 md:flex-row">
<div class="grow w-full md:w-auto">
<UProgress :color="color" :min="0" :max="planData.limit" :value="planData.count">
</UProgress>
</div>
<div class="poppins"> {{ percent }}</div>
</div>
<div class="flex justify-center">
{{ formatNumberK(planData.count) }} / {{ formatNumberK(planData.limit) }}
</div>
</div>
</div>
</Card>
</div>
<CardTitled v-if="!isGuest" title="Invoices" :sub="(invoices && invoices.length == 0) ? 'No invoices yet' : ''"
class="p-4 mt-8 max-w-[72rem]">
<div class="flex flex-col gap-2">
<div class="flex justify-between items-center bg-[#161616] p-4 rounded-lg" v-for="invoice of invoices">
<div> <i class="fal fa-file-invoice"></i> </div>
<div class="flex flex-col md:flex-row md:justify-around md:grow items-center gap-2">
<div> {{ new Date(invoice.date).toLocaleString() }} </div>
<div> € {{ invoice.cost / 100 }} </div>
<div> {{ invoice.id }} </div>
<div
class="flex items-center lato text-[.8rem] bg-accent/25 border-accent/40 border-[1px] px-[.6rem] rounded-lg">
{{ invoice.status }}
</div>
</div>
<div>
<i @click="openInvoice(invoice.link)"
class="far fa-download cursor-pointer hover:text-white/80"></i>
</div>
</div>
</div>
</CardTitled>
</div>
</template>
<style scoped lang="scss">
.pdrawer-enter-active,
.pdrawer-leave-active {
transition: all .5s ease-in-out;
}
.pdrawer-enter-from,
.pdrawer-leave-to {
transform: translateX(100%)
}
.pdrawer-enter-to,
.pdrawer-leave-from {
transform: translateX(0)
}
</style>

6
dashboard/pages/report.vue
View File

@@ -31,7 +31,9 @@ async function generatePDF() {
<div class="home w-full h-full px-10 lg:px-0 overflow-y-auto pb-[12rem] md:pb-0">
<div class="flex flex-col items-center justify-center mt-20 gap-20">
<DialogCreateSnapshot></DialogCreateSnapshot>
<!-- <div class="flex flex-col items-center justify-center mt-20 gap-20">
<div class="flex flex-col items-center justify-center gap-10">
<div class="poppins text-[2.4rem] font-bold text-text">
@@ -84,7 +86,7 @@ async function generatePDF() {
</div>
</div> -->
</div>

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

@@ -0,0 +1,49 @@
<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 hide-scrollbars">
<div class="poppins font-semibold text-[1.3rem]"> Settings </div>
<CustomTab :items="items" class="mt-8">
<template #general>
<SettingsGeneral></SettingsGeneral>
</template>
<template #members>
<SettingsMembers></SettingsMembers>
</template>
<template #billing>
<SettingsBilling></SettingsBilling>
</template>
<template #account>
<SettingsAccount></SettingsAccount>
</template>
</CustomTab>
<!-- <UTabs :items="items" class="mt-8">
<template #general>
<SettingsGeneral></SettingsGeneral>
</template>
<template #members>
<SettingsMembers></SettingsMembers>
</template>
<template #billing>
<SettingsBilling></SettingsBilling>
</template>
<template #account>
<SettingsAccount></SettingsAccount>
</template>
</UTabs> -->
</div>
</template>

106
dashboard/pnpm-lock.yaml generated
View File

@@ -14,6 +14,9 @@ importers:
chart.js:
specifier: ^3.9.1
version: 3.9.1
date-fns:
specifier: ^3.6.0
version: 3.6.0
dayjs:
specifier: ^1.11.11
version: 1.11.11
@@ -56,6 +59,9 @@ importers:
stripe:
specifier: ^15.8.0
version: 15.8.0
v-calendar:
specifier: ^3.1.2
version: 3.1.2(@popperjs/core@2.11.8)(vue@3.4.27(typescript@5.4.2))
vue:
specifier: ^3.4.21
version: 3.4.27(typescript@5.4.2)
@@ -1125,6 +1131,9 @@ packages:
'@types/jsonwebtoken@9.0.6':
resolution: {integrity: sha512-/5hndP5dCjloafCXns6SZyESp3Ldq7YjH3zwzwczYnjxIT0Fqzk5ROSYVGfFyczIue7IUEj8hkvLbPoLQ18vQw==}
'@types/lodash@4.17.7':
resolution: {integrity: sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==}
'@types/node-fetch@2.6.11':
resolution: {integrity: sha512-24xFj9R5+rfQJLRyM56qh+wnVSYhyXC2tkoBndtY0U+vubqNsYXGjufB2nn8Q6gt0LrARwL6UBtMCSVCwl4B1g==}
@@ -1140,6 +1149,9 @@ packages:
'@types/pdfkit@0.13.4':
resolution: {integrity: sha512-ixGNDHYJCCKuamY305wbfYSphZ2WPe8FPkjn8oF4fHV+PgPV4V+hecPh2VOS2h4RNtpSB3zQcR4sCpNvvrEb1A==}
'@types/resize-observer-browser@0.1.11':
resolution: {integrity: sha512-cNw5iH8JkMkb3QkCoe7DaZiawbDQEUX8t7iuQaRTyLOyQCR2h+ibBD4GJt7p5yhUHrlOeL7ZtbxNHeipqNsBzQ==}
'@types/resolve@1.20.2':
resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
@@ -1373,20 +1385,20 @@ packages:
'@vue/reactivity@3.4.27':
resolution: {integrity: sha512-kK0g4NknW6JX2yySLpsm2jlunZJl2/RJGZ0H9ddHdfBVHcNzxmQ0sS0b09ipmBoQpY8JM2KmUw+a6sO8Zo+zIA==}
'@vue/reactivity@3.4.28':
resolution: {integrity: sha512-B5uvZK0ArgBMkjK8RA9l5XP+PuQ/x99oqrcHRc78wa0pWyDje5X/isGihuiuSr0nFZTA5guoy78sJ6J8XxZv1A==}
'@vue/reactivity@3.4.34':
resolution: {integrity: sha512-ua+Lo+wBRlBEX9TtgPOShE2JwIO7p6BTZ7t1KZVPoaBRfqbC7N3c8Mpzicx173fXxx5VXeU6ykiHo7WgLzJQDA==}
'@vue/runtime-core@3.4.27':
resolution: {integrity: sha512-7aYA9GEbOOdviqVvcuweTLe5Za4qBZkUY7SvET6vE8kyypxVgaT1ixHLg4urtOlrApdgcdgHoTZCUuTGap/5WA==}
'@vue/runtime-core@3.4.28':
resolution: {integrity: sha512-Corp5aAn5cm9h2cse6w5vRlnlfpy8hBRrsgCzHSoUohStlbqBXvI/uopPVkCivPCgY4fJZhXOufYYJ3DXzpN/w==}
'@vue/runtime-core@3.4.34':
resolution: {integrity: sha512-PXhkiRPwcPGJ1BnyBZFI96GfInCVskd0HPNIAZn7i3YOmLbtbTZpB7/kDTwC1W7IqdGPkTVC63IS7J2nZs4Ebg==}
'@vue/runtime-dom@3.4.27':
resolution: {integrity: sha512-ScOmP70/3NPM+TW9hvVAz6VWWtZJqkbdf7w6ySsws+EsqtHvkhxaWLecrTorFxsawelM5Ys9FnDEMt6BPBDS0Q==}
'@vue/runtime-dom@3.4.28':
resolution: {integrity: sha512-y9lDMMFf2Y5GpYdE8+IuavVl95D1GY1Zp8jU1vZhQ3Z4ga3f0Ym+XxRhcFtqaQAm9u82GwB7zDpBxafWDRq4pw==}
'@vue/runtime-dom@3.4.34':
resolution: {integrity: sha512-dXqIe+RqFAK2Euak4UsvbIupalrhc67OuQKpD7HJ3W2fv8jlqvI7szfBCsAEcE8o/wyNpkloxB6J8viuF/E3gw==}
'@vue/server-renderer@3.4.27':
resolution: {integrity: sha512-dlAMEuvmeA3rJsOMJ2J1kXU7o7pOxgsNHVr9K8hB3ImIkSuBrIdy0vF66h8gf8Tuinf1TK3mPAz2+2sqyf3KzA==}
@@ -1396,8 +1408,8 @@ packages:
'@vue/shared@3.4.27':
resolution: {integrity: sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA==}
'@vue/shared@3.4.28':
resolution: {integrity: sha512-2b+Vuv5ichZQZPmRJfniHQkBSNigmRsRkr17bkYqBFy3J88T4lB7dRbAX/rx8qr9v0cr8Adg6yP872xhxGmh0w==}
'@vue/shared@3.4.34':
resolution: {integrity: sha512-x5LmiRLpRsd9KTjAB8MPKf0CDPMcuItjP0gbNqFCIgL1I8iYp4zglhj9w9FPCdIbHG2M91RVeIbArFfFTz9I3A==}
'@vueuse/components@10.10.0':
resolution: {integrity: sha512-HiA10NQ9HJAGnju+8ZK4TyA8LIc0a6BnJmVWDa/k+TRhaYCVacSDU04k0BQ2otV+gghUDdwu98upf6TDRXpoeg==}
@@ -1965,6 +1977,18 @@ packages:
csstype@3.1.3:
resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
date-fns-tz@2.0.1:
resolution: {integrity: sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==}
peerDependencies:
date-fns: 2.x
date-fns@2.30.0:
resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
engines: {node: '>=0.11'}
date-fns@3.6.0:
resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
dayjs@1.11.11:
resolution: {integrity: sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==}
@@ -4533,6 +4557,12 @@ packages:
resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
hasBin: true
v-calendar@3.1.2:
resolution: {integrity: sha512-QDWrnp4PWCpzUblctgo4T558PrHgHzDtQnTeUNzKxfNf29FkCeFpwGd9bKjAqktaa2aJLcyRl45T5ln1ku34kg==}
peerDependencies:
'@popperjs/core': ^2.0.0
vue: ^3.2.0
validate-npm-package-license@3.0.4:
resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
@@ -4729,6 +4759,11 @@ packages:
peerDependencies:
vue: ^3.2.0
vue-screen-utils@1.0.0-beta.13:
resolution: {integrity: sha512-EJ/8TANKhFj+LefDuOvZykwMr3rrLFPLNb++lNBqPOpVigT2ActRg6icH9RFQVm4nHwlHIHSGm5OY/Clar9yIg==}
peerDependencies:
vue: ^3.2.0
vue-template-compiler@2.7.16:
resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==}
@@ -6168,6 +6203,8 @@ snapshots:
dependencies:
'@types/node': 20.12.12
'@types/lodash@4.17.7': {}
'@types/node-fetch@2.6.11':
dependencies:
'@types/node': 18.19.33
@@ -6189,6 +6226,8 @@ snapshots:
dependencies:
'@types/node': 20.12.12
'@types/resize-observer-browser@0.1.11': {}
'@types/resolve@1.20.2': {}
'@types/web-bluetooth@0.0.20': {}
@@ -6614,7 +6653,7 @@ snapshots:
'@volar/language-core': 1.11.1
'@volar/source-map': 1.11.1
'@vue/compiler-dom': 3.4.27
'@vue/shared': 3.4.28
'@vue/shared': 3.4.34
computeds: 0.0.1
minimatch: 9.0.4
muggle-string: 0.3.1
@@ -6627,19 +6666,19 @@ snapshots:
dependencies:
'@vue/shared': 3.4.27
'@vue/reactivity@3.4.28':
'@vue/reactivity@3.4.34':
dependencies:
'@vue/shared': 3.4.28
'@vue/shared': 3.4.34
'@vue/runtime-core@3.4.27':
dependencies:
'@vue/reactivity': 3.4.27
'@vue/shared': 3.4.27
'@vue/runtime-core@3.4.28':
'@vue/runtime-core@3.4.34':
dependencies:
'@vue/reactivity': 3.4.28
'@vue/shared': 3.4.28
'@vue/reactivity': 3.4.34
'@vue/shared': 3.4.34
'@vue/runtime-dom@3.4.27':
dependencies:
@@ -6647,11 +6686,11 @@ snapshots:
'@vue/shared': 3.4.27
csstype: 3.1.3
'@vue/runtime-dom@3.4.28':
'@vue/runtime-dom@3.4.34':
dependencies:
'@vue/reactivity': 3.4.28
'@vue/runtime-core': 3.4.28
'@vue/shared': 3.4.28
'@vue/reactivity': 3.4.34
'@vue/runtime-core': 3.4.34
'@vue/shared': 3.4.34
csstype: 3.1.3
'@vue/server-renderer@3.4.27(vue@3.4.27(typescript@5.4.2))':
@@ -6662,7 +6701,7 @@ snapshots:
'@vue/shared@3.4.27': {}
'@vue/shared@3.4.28': {}
'@vue/shared@3.4.34': {}
'@vueuse/components@10.10.0(vue@3.4.27(typescript@5.4.2))':
dependencies:
@@ -7244,6 +7283,16 @@ snapshots:
csstype@3.1.3: {}
date-fns-tz@2.0.1(date-fns@2.30.0):
dependencies:
date-fns: 2.30.0
date-fns@2.30.0:
dependencies:
'@babel/runtime': 7.24.6
date-fns@3.6.0: {}
dayjs@1.11.11: {}
db0@0.1.4: {}
@@ -10163,6 +10212,17 @@ snapshots:
uuid@9.0.1: {}
v-calendar@3.1.2(@popperjs/core@2.11.8)(vue@3.4.27(typescript@5.4.2)):
dependencies:
'@popperjs/core': 2.11.8
'@types/lodash': 4.17.7
'@types/resize-observer-browser': 0.1.11
date-fns: 2.30.0
date-fns-tz: 2.0.1(date-fns@2.30.0)
lodash: 4.17.21
vue: 3.4.27(typescript@5.4.2)
vue-screen-utils: 1.0.0-beta.13(vue@3.4.27(typescript@5.4.2))
validate-npm-package-license@3.0.4:
dependencies:
spdx-correct: 3.2.0
@@ -10340,8 +10400,8 @@ snapshots:
vue-chart-3@3.1.8(chart.js@3.9.1)(vue@3.4.27(typescript@5.4.2)):
dependencies:
'@vue/runtime-core': 3.4.28
'@vue/runtime-dom': 3.4.28
'@vue/runtime-core': 3.4.34
'@vue/runtime-dom': 3.4.34
chart.js: 3.9.1
csstype: 3.1.3
lodash-es: 4.17.21
@@ -10366,6 +10426,10 @@ snapshots:
'@vue/devtools-api': 6.6.1
vue: 3.4.27(typescript@5.4.2)
vue-screen-utils@1.0.0-beta.13(vue@3.4.27(typescript@5.4.2)):
dependencies:
vue: 3.4.27(typescript@5.4.2)
vue-template-compiler@2.7.16:
dependencies:
de-indent: 1.0.2

BIN
dashboard/public/logo_32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 568 B

6
dashboard/server/api/admin/projects.ts
View File

@@ -14,7 +14,8 @@ export type AdminProjectsList = {
created_at: Date
},
total_visits: number,
total_events: number
total_events: number,
total_sessions: number
}
export default defineEventHandler(async event => {
@@ -54,6 +55,9 @@ export default defineEventHandler(async event => {
},
total_events: {
$arrayElemAt: ["$counts.events", 0]
},
total_sessions: {
$arrayElemAt: ["$counts.sessions", 0]
}
}
}

4
dashboard/server/api/admin/reset_count.ts
View File

@@ -1,6 +1,7 @@
import { ProjectCountModel } from "@schema/ProjectsCounts";
import { EventModel } from "@schema/metrics/EventSchema";
import { SessionModel } from "@schema/metrics/SessionSchema";
import { VisitModel } from "@schema/metrics/VisitSchema";
export default defineEventHandler(async event => {
@@ -13,8 +14,9 @@ export default defineEventHandler(async event => {
const events = await EventModel.countDocuments({ project_id });
const visits = await VisitModel.countDocuments({ project_id });
const sessions = await SessionModel.countDocuments({ project_id });
await ProjectCountModel.updateOne({ project_id, events, visits }, {}, { upsert: true });
await ProjectCountModel.updateOne({ project_id, events, visits, sessions }, {}, { upsert: true });
return { ok: true };
});

4
dashboard/server/api/metrics/[project_id]/counts.ts
View File

@@ -36,12 +36,12 @@ export default defineEventHandler(async event => {
$group: {
_id: "$project_id",
events: { $sum: "$events" },
visits: { $sum: "$visits" }
visits: { $sum: "$visits" },
sessions: { $sum: "$sessions" },
}
}
]);
const sessionsVisitsCount: any[] = await Redis.useCache({
key: `counts:${project_id}:sessions_count`,
exp: COUNTS_SESSIONS_EXPIRE_TIME

18
dashboard/server/api/metrics/[project_id]/data/browsers.ts
View File

@@ -22,12 +22,26 @@ export default defineEventHandler(async event => {
const limit = getRequestHeader(event, 'x-query-limit');
const numLimit = parseInt(limit || '10');
const from = getRequestHeader(event, 'x-from');
const to = getRequestHeader(event, 'x-to');
if (!from || !to) return setResponseStatus(event, 400, 'x-from and x-to headers missing');
return await Redis.useCache({
key: `browsers:${project_id}:${numLimit}`,
key: `browsers:${project_id}:${numLimit}:${from}:${to}`,
exp: DATA_EXPIRE_TIME
}, async () => {
const browsers: BrowsersAggregated[] = await VisitModel.aggregate([
{ $match: { project_id: project._id }, },
{
$match: {
project_id: project._id,
created_at: {
$gte: new Date(from),
$lte: new Date(to)
}
},
},
{ $group: { _id: "$browser", count: { $sum: 1, } } },
{ $sort: { count: -1 } },
{ $limit: numLimit }

17
dashboard/server/api/metrics/[project_id]/data/countries.ts
View File

@@ -21,13 +21,26 @@ export default defineEventHandler(async event => {
const limit = getRequestHeader(event, 'x-query-limit');
const numLimit = parseInt(limit || '10');
const from = getRequestHeader(event, 'x-from');
const to = getRequestHeader(event, 'x-to');
if (!from || !to) return setResponseStatus(event, 400, 'x-from and x-to headers missing');
return await Redis.useCache({
key: `countries:${project_id}:${numLimit}`,
key: `countries:${project_id}:${numLimit}:${from}:${to}`,
exp: DATA_EXPIRE_TIME
}, async () => {
const countries: CountriesAggregated[] = await VisitModel.aggregate([
{ $match: { project_id: project._id, country: { $ne: null } }, },
{
$match: {
project_id: project._id,
country: { $ne: null },
created_at: {
$gte: new Date(from),
$lte: new Date(to)
}
},
},
{ $group: { _id: "$country", count: { $sum: 1, } } },
{ $sort: { count: -1 } },
{ $limit: numLimit }

17
dashboard/server/api/metrics/[project_id]/data/devices.ts
View File

@@ -20,13 +20,26 @@ export default defineEventHandler(async event => {
const limit = getRequestHeader(event, 'x-query-limit');
const numLimit = parseInt(limit || '10');
const from = getRequestHeader(event, 'x-from');
const to = getRequestHeader(event, 'x-to');
if (!from || !to) return setResponseStatus(event, 400, 'x-from and x-to headers missing');
return await Redis.useCache({
key: `devices:${project_id}:${numLimit}`,
key: `devices:${project_id}:${numLimit}:${from}:${to}`,
exp: DATA_EXPIRE_TIME
}, async () => {
const devices: DevicesAggregated[] = await VisitModel.aggregate([
{ $match: { project_id: project._id, device: { $ne: null } }, },
{
$match: {
project_id: project._id,
device: { $ne: null },
created_at: {
$gte: new Date(from),
$lte: new Date(to)
}
},
},
{ $group: { _id: "$device", count: { $sum: 1, } } },
{ $sort: { count: -1 } },
{ $limit: numLimit }

49
dashboard/server/api/metrics/[project_id]/data/events.ts Normal file
View File

@@ -0,0 +1,49 @@
import { getUserProjectFromId } from "~/server/LIVE_DEMO_DATA";
import { EventModel } from "@schema/metrics/EventSchema";
import { DATA_EXPIRE_TIME, Redis } from "~/server/services/CacheService";
export type CustomEventsAggregated = {
_id: string,
count: number
}
export default defineEventHandler(async event => {
const project_id = getRequestProjectId(event);
if (!project_id) return;
const user = getRequestUser(event);
const project = await getUserProjectFromId(project_id, user);
if (!project) return;
const from = getRequestHeader(event, 'x-from');
const to = getRequestHeader(event, 'x-to');
if (!from || !to) return setResponseStatus(event, 400, 'x-from and x-to headers missing');
return await Redis.useCache({
key: `events:${project_id}:${from}:${to}`,
exp: DATA_EXPIRE_TIME
}, async () => {
const events: CustomEventsAggregated[] = await EventModel.aggregate([
{
$match: {
project_id: project._id, created_at: {
$gte: new Date(from),
$lte: new Date(to)
}
},
},
{ $group: { _id: "$name", count: { $sum: 1, } } },
{ $sort: { count: -1 } }
]);
return events;
});
});

16
dashboard/server/api/metrics/[project_id]/data/oss.ts
View File

@@ -22,13 +22,25 @@ export default defineEventHandler(async event => {
const limit = getRequestHeader(event, 'x-query-limit');
const numLimit = parseInt(limit || '10');
const from = getRequestHeader(event, 'x-from');
const to = getRequestHeader(event, 'x-to');
if (!from || !to) return setResponseStatus(event, 400, 'x-from and x-to headers missing');
return await Redis.useCache({
key: `oss:${project_id}:${numLimit}`,
key: `oss:${project_id}:${numLimit}:${from}:${to}`,
exp: DATA_EXPIRE_TIME
}, async () => {
const oss: OssAggregated[] = await VisitModel.aggregate([
{ $match: { project_id: project._id }, },
{
$match: {
project_id: project._id,
created_at: {
$gte: new Date(from),
$lte: new Date(to)
}
},
},
{ $group: { _id: "$os", count: { $sum: 1, } } },
{ $sort: { count: -1 } },
{ $limit: numLimit }

16
dashboard/server/api/metrics/[project_id]/data/referrers.ts
View File

@@ -22,13 +22,25 @@ export default defineEventHandler(async event => {
const limit = getRequestHeader(event, 'x-query-limit');
const numLimit = parseInt(limit || '10');
const from = getRequestHeader(event, 'x-from');
const to = getRequestHeader(event, 'x-to');
if (!from || !to) return setResponseStatus(event, 400, 'x-from and x-to headers missing');
return await Redis.useCache({
key: `referrers:${project_id}:${numLimit}`,
key: `referrers:${project_id}:${numLimit}:${from}:${to}`,
exp: DATA_EXPIRE_TIME
}, async () => {
const referrers: ReferrersAggregated[] = await VisitModel.aggregate([
{ $match: { project_id: project._id }, },
{
$match: {
project_id: project._id,
created_at: {
$gte: new Date(from),
$lte: new Date(to)
}
},
},
{ $group: { _id: "$referrer", count: { $sum: 1, } } },
{ $sort: { count: -1 } },
{ $limit: numLimit }

15
dashboard/server/api/metrics/[project_id]/data/websites.ts
View File

@@ -22,12 +22,25 @@ export default defineEventHandler(async event => {
const limit = getRequestHeader(event, 'x-query-limit');
const numLimit = parseInt(limit || '10');
const from = getRequestHeader(event, 'x-from');
const to = getRequestHeader(event, 'x-to');
if (!from || !to) return setResponseStatus(event, 400, 'x-from and x-to headers missing');
return await Redis.useCache({
key: `websites:${project_id}:${numLimit}`,
exp: DATA_EXPIRE_TIME
}, async () => {
const websites: VisitsWebsiteAggregated[] = await VisitModel.aggregate([
{ $match: { project_id: project._id }, },
{
$match: {
project_id: project._id,
created_at: {
$gte: new Date(from),
$lte: new Date(to)
}
},
},
{ $group: { _id: "$website", count: { $sum: 1, } } },
{ $sort: { count: -1 } },
{ $limit: numLimit }

29
dashboard/server/api/metrics/[project_id]/events/flow_from_name.ts
View File

@@ -15,12 +15,24 @@ export default defineEventHandler(async event => {
const project = await getUserProjectFromId(project_id, user);
if (!project) return;
const { name: eventName } = getQuery(event);
if (!eventName) return [];
const { name: eventName, from, to } = getQuery(event);
if (!from) return setResponseStatus(event, 400, 'from is required');
if (!to) return setResponseStatus(event, 400, 'to is required');
if (!eventName) return setResponseStatus(event, 400, 'name is required');
const allEvents = await EventModel.find({ project_id: project_id, name: eventName }, { flowHash: 1 });
const allEvents = await EventModel.find({
project_id: project_id,
name: eventName,
created_at: {
$gte: new Date(from.toString()),
$lte: new Date(to.toString()),
}
}, { flowHash: 1 });
const allFlowHashes = new Map<string, number>();
allEvents.forEach(e => {
@@ -71,6 +83,17 @@ export default defineEventHandler(async event => {
grouped[referrer]++;
}
const eventsCount = allEvents.length;
const allGroupedValue = Object.keys(grouped)
.map(key => grouped[key])
.reduce((a, e) => a + e, 0);
for (const key in grouped) {
grouped[key] = 100 / allGroupedValue * grouped[key];
}
return grouped;
});

19
dashboard/server/api/metrics/[project_id]/events/metadata_field_group.ts
View File

@@ -15,11 +15,24 @@ export default defineEventHandler(async event => {
const project = await getUserProjectFromId(project_id, user);
if (!project) return;
const { name: eventName, field } = getQuery(event);
if (!eventName || !field) return [];
const { name: eventName, field, from, to } = getQuery(event);
if (!from) return setResponseStatus(event, 400, 'from is required');
if (!to) return setResponseStatus(event, 400, 'to is required');
if (!eventName) return setResponseStatus(event, 400, 'name is required');
if (!field) return setResponseStatus(event, 400, 'field is required');
const aggregation: PipelineStage[] = [
{ $match: { project_id: project._id, name: eventName } },
{
$match: {
project_id: project._id, name: eventName,
created_at: {
$gte: new Date(from.toString()),
$lte: new Date(to.toString()),
}
}
},
{ $group: { _id: `$metadata.${field}`, count: { $sum: 1 } } },
{ $sort: { count: -1 } }
]

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'}`,

29
dashboard/server/api/metrics/[project_id]/visits/events.ts
View File

@@ -1,29 +0,0 @@
import { getUserProjectFromId } from "~/server/LIVE_DEMO_DATA";
import { ProjectModel } from "@schema/ProjectSchema";
import { EventModel } from "@schema/metrics/EventSchema";
export type CustomEventsAggregated = {
_id: string,
count: number
}
export default defineEventHandler(async event => {
const project_id = getRequestProjectId(event);
if (!project_id) return;
const user = getRequestUser(event);
const project = await getUserProjectFromId(project_id, user);
if (!project) return;
const websites: CustomEventsAggregated[] = await EventModel.aggregate([
{ $match: { project_id: project._id }, },
{ $group: { _id: "$name", count: { $sum: 1, } } },
{ $sort: { count: -1 } }
]);
return websites;
});

2
dashboard/server/api/pay/webhook.post.ts
View File

@@ -3,9 +3,7 @@ import StripeService from '~/server/services/StripeService';
import type Event from 'stripe';
import { ProjectModel } from '@schema/ProjectSchema';
import { PREMIUM_DATA, PREMIUM_PLAN, getPlanFromId, getPlanFromPrice, getPlanFromTag } from '@data/PREMIUM';
import { ProjectCountModel } from '@schema/ProjectsCounts';
import { ProjectLimitModel } from '@schema/ProjectsLimits';
import { UserModel } from '@schema/UserSchema';

30
dashboard/server/api/project/change_name.post.ts Normal file
View File

@@ -0,0 +1,30 @@
import { ProjectModel } from "@schema/ProjectSchema";
import { TeamMemberModel } from "@schema/TeamMemberSchema";
import { UserModel } from "@schema/UserSchema";
import { UserSettingsModel } from "@schema/UserSettings";
export default defineEventHandler(async event => {
const userData = getRequestUser(event);
if (!userData?.logged) return setResponseStatus(event, 400, 'NotLogged');
const currentActiveProject = await UserSettingsModel.findOne({ user_id: userData.id });
if (!currentActiveProject) return setResponseStatus(event, 400, 'You need to select a project');
const project_id = currentActiveProject.active_project_id;
const project = await ProjectModel.findById(project_id);
if (!project) return setResponseStatus(event, 400, 'Project not found');
if (project.owner.toString() != userData.id) {
return setResponseStatus(event, 400, 'You are not the owner');
}
const { name } = await readBody(event);
project.name = name;
await project.save();
return { ok: true };
});

6
dashboard/server/api/project/create.post.ts
View File

@@ -39,7 +39,8 @@ export default defineEventHandler(async event => {
await ProjectCountModel.create({
project_id: project._id,
events: 0,
visits: 0
visits: 0,
sessions: 0
});
await ProjectLimitModel.updateOne({ project_id: project._id }, {
@@ -76,7 +77,8 @@ export default defineEventHandler(async event => {
await ProjectCountModel.create({
project_id: project._id,
events: 0,
visits: 0
visits: 0,
sessions: 0
});
return project.toJSON() as TProject;

19
dashboard/server/api/project/snapshots.ts Normal file
View File

@@ -0,0 +1,19 @@
import { ProjectSnapshotModel, TProjectSnapshot } from "@schema/ProjectSnapshot";
import { UserSettingsModel } from "@schema/UserSettings";
export default defineEventHandler(async event => {
const userData = getRequestUser(event);
if (!userData?.logged) return setResponseStatus(event, 400, 'NotLogged');
const currentActiveProject = await UserSettingsModel.findOne({ user_id: userData.id });
if (!currentActiveProject) return setResponseStatus(event, 400, 'You need to select a project');
const project_id = currentActiveProject.active_project_id;
const snapshots = await ProjectSnapshotModel.find({ project_id });
return snapshots.map(e => e.toJSON()) as TProjectSnapshot[];
});

43
dashboard/server/api/snapshot/create.post.ts Normal file
View File

@@ -0,0 +1,43 @@
import { ProjectModel } from "@schema/ProjectSchema";
import { ProjectSnapshotModel } from "@schema/ProjectSnapshot";
import { UserSettingsModel } from "@schema/UserSettings";
export default defineEventHandler(async event => {
const body = await readBody(event);
const { name: newSnapshotName, from, to, color: snapshotColor } = body;
if (!newSnapshotName) return setResponseStatus(event, 400, 'SnapshotName too short');
if (newSnapshotName.length == 0) return setResponseStatus(event, 400, 'SnapshotName too short');
if (!from) return setResponseStatus(event, 400, 'from is required');
if (!to) return setResponseStatus(event, 400, 'to is required');
if (!snapshotColor) return setResponseStatus(event, 400, 'color is required');
const userData = getRequestUser(event);
if (!userData?.logged) return setResponseStatus(event, 400, 'NotLogged');
const userSettings = await UserSettingsModel.findOne({ user_id: userData.id }, { active_project_id: 1 });
if (!userSettings) return setResponseStatus(event, 500, 'Unkwnown error');
const currentProjectId = userSettings.active_project_id;
const project = await ProjectModel.findById(currentProjectId);
if (!project) return setResponseStatus(event, 400, 'Project not found');
const newSnapshot = await ProjectSnapshotModel.create({
name: newSnapshotName,
from: new Date(from),
to: new Date(to),
color: snapshotColor,
project_id: currentProjectId
});
return newSnapshot.id;
});

35
dashboard/server/api/snapshot/delete.delete.ts Normal file
View File

@@ -0,0 +1,35 @@
import { ProjectModel } from "@schema/ProjectSchema";
import { ProjectSnapshotModel } from "@schema/ProjectSnapshot";
import { UserSettingsModel } from "@schema/UserSettings";
export default defineEventHandler(async event => {
const body = await readBody(event);
const { id: snapshotId } = body;
if (!snapshotId) return setResponseStatus(event, 400, 'id is required');
const userData = getRequestUser(event);
if (!userData?.logged) return setResponseStatus(event, 400, 'NotLogged');
const userSettings = await UserSettingsModel.findOne({ user_id: userData.id }, { active_project_id: 1 });
if (!userSettings) return setResponseStatus(event, 500, 'Unkwnown error');
const currentProjectId = userSettings.active_project_id;
const project = await ProjectModel.findById(currentProjectId);
if (!project) return setResponseStatus(event, 400, 'Project not found');
const deletation = await ProjectSnapshotModel.deleteOne({
project_id: currentProjectId,
_id: snapshotId
});
return { ok: deletation.acknowledged };
});

5
dashboard/server/services/CacheService.ts
View File

@@ -21,11 +21,14 @@ export class Redis {
url: runtimeConfig.REDIS_URL,
username: runtimeConfig.REDIS_USERNAME,
password: runtimeConfig.REDIS_PASSWORD,
database: process.dev ? 1 : 0
database: process.dev ? 1 : 0,
});
static async init() {
await this.client.connect();
this.client.on('error', function (err) {
console.error('Redis error:', err);
});
}
static async setString(key: string, value: string, exp: number) {

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;

42
dashboard/tailwind.config.js
View File

@@ -29,6 +29,48 @@ module.exports = {
light: '#2c91ed',
sub: '#99A7F1',
},
"lyx-primary": {
DEFAULT: '#5680F8',
dark: '#222A42',
hover: '#2A3450'
},
"lyx-text": {
DEFAULT: '#FFFFFF',
dark: '#D4D4D4',
darker: '#6A6A6A'
},
"lyx-widget": {
DEFAULT: '#151515',
light: '#1E1E1E',
lighter: '#262626'
},
"lyx-background": {
DEFAULT: '#0A0A0A',
light: '#121212',
lighter: '#212121'
},
"lyx-danger": {
DEFAULT: '#F86956',
dark: '#4A2D29'
},
"lyx-chart": {
purple: {
DEFAULT: '#5655D7',
dark: '#282844'
},
green: {
DEFAULT: '#1D9B86',
dark: '#213734'
},
cyan: {
DEFAULT: '#4ABDE8',
dark: '#273D48'
},
orange: {
DEFAULT: '#F56524',
dark: '#492C22'
}
}
}
},
},

4
dashboard/utils/DateUtils.ts
View File

@@ -60,9 +60,10 @@ 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());
console.log({allKeys})
const fixed: any[] = allDates.map(matchDate => {
if (!options.advanced) {
@@ -85,6 +86,7 @@ export function fixMetrics(result: { data: MetricsTimeline[], from: string, to:
return returnObject;
});
if (slice === 'day' || slice == 'hour') fixed.pop();
const data = fixed.map(e => e.count);

3
lyx-ui/assets/lyxui.scss
View File

@@ -1,5 +1,8 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
.poppins {
font-family: 'Poppins' !important;
}

9
lyx-ui/components/Button.vue
View File

@@ -1,18 +1,19 @@
<script lang="ts" setup>
export type ButtonType = 'primary' | 'secondary' | 'outline' | 'danger';
export type ButtonType = 'primary' | 'secondary' | 'outline' | 'outlined' | 'danger';
const props = defineProps<{ type: ButtonType, link?: string, target?: string }>();
const props = defineProps<{ type: ButtonType, link?: string, target?: string, disabled?: boolean }>();
</script>
<template>
<NuxtLink tag="div" :to="link" :target="target"
<NuxtLink tag="div" :to="disabled ? '' : link" :target="target"
class="poppins w-fit cursor-pointer px-4 py-1 rounded-md outline outline-[1px] text-text" :class="{
'bg-lyx-primary-dark outline-lyx-primary hover:bg-lyx-primary-hover': type === 'primary',
'bg-lyx-widget-lighter outline-lyx-widget-lighter hover:bg-lyx-widget-light': type === 'secondary',
'bg-lyx-transparent outline-lyx-widget-lighter hover:bg-lyx-widget-light': type === 'outline',
'bg-lyx-transparent outline-lyx-widget-lighter hover:bg-lyx-widget-light': (type === 'outline' || type === 'outlined'),
'bg-lyx-danger-dark outline-lyx-danger hover:bg-lyx-danger': type === 'danger',
'!bg-lyx-widget !outline-lyx-widget-lighter !cursor-not-allowed': disabled === true,
}">
<slot></slot>
</NuxtLink>

20
shared/schema/ProjectSnapshot.ts Normal file
View File

@@ -0,0 +1,20 @@
import { model, Schema, Types } from 'mongoose';
export type TProjectSnapshot = {
_id: Schema.Types.ObjectId,
project_id: Schema.Types.ObjectId,
name: string,
from: Date,
to: Date,
color: string
}
const ProjectSnapshotSchema = new Schema<TProjectSnapshot>({
project_id: { type: Types.ObjectId, index: true },
name: { type: String, required: true },
from: { type: Date, required: true },
to: { type: Date, required: true },
color: { type: String, required: true },
});
export const ProjectSnapshotModel = model<TProjectSnapshot>('project_snapshots', ProjectSnapshotSchema);

2
shared/schema/ProjectsCounts.ts
View File

@@ -5,12 +5,14 @@ export type TProjectCount = {
project_id: Schema.Types.ObjectId,
events: number,
visits: number,
sessions: number,
}
const ProjectCountSchema = new Schema<TProjectCount>({
project_id: { type: Types.ObjectId, index: true, unique: true },
events: { type: Number, required: true, default: 0 },
visits: { type: Number, required: true, default: 0 },
sessions: { type: Number, required: true, default: 0 },
});
export const ProjectCountModel = model<TProjectCount>('project_counts', ProjectCountSchema);

2
shared/schema/metrics/VisitSchema.ts
View File

@@ -36,7 +36,7 @@ const VisitSchema = new Schema<TVisit>({
website: { type: String, required: true },
page: { type: String, required: true },
referrer: { type: String, required: true },
created_at: { type: Date, default: () => Date.now() },
created_at: { type: Date, default: () => Date.now(), index: true },
})
export const VisitModel = model<TVisit>('visits', VisitSchema);

2
shared/services/DateService.ts
View File

@@ -108,6 +108,8 @@ class DateService {
const lastDate = dayjs(dates.at(-1));
let currentDate = firstDate.clone();
allDates.push(currentDate);
while (currentDate.isBefore(lastDate, slice)) {
currentDate = currentDate.add(1, slice);
allDates.push(currentDate);