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

implementing snapshots

Browse Source
This commit is contained in:
Emily
2024-07-26 16:18:20 +02:00
parent fc78b3bb43
commit 229c341d7a
19 changed files with 293 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dashboard/components/CVerticalNavigation.vue
View File

@@ -32,8 +32,8 @@ const { isOpen, close } = useMenu();
const { snapshots, snapshot } = useSnapshot();
const snapshotsItems = computed(() => {
if (!snapshots.data.value) return []
return snapshots.data.value as any[];
if (!snapshots.value) return []
return snapshots.value as any[];
})
</script>

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

@@ -1,30 +1,21 @@
<script lang="ts" setup>
import type { BrowsersAggregated } from '~/server/api/metrics/[project_id]/data/browsers';
const activeProject = await useActiveProject();
const { data: events, pending, refresh } = await useFetch<BrowsersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/browsers`, {
...signHeaders(),
lazy: true
});
const { data: browsers, pending, refresh } = useBrowsersData(10);
const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
function showMore() {
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;
const moreRes = useBrowsersData(200);
moreRes.onResponse(data => {
dialogBarData.value = data.value || [];
isDataLoading.value = false;
});
}
</script>
@@ -32,7 +23,7 @@ function showMore() {
<template>
<div class="flex flex-col gap-2">
<DashboardBarsCard @showMore="showMore()" @dataReload="refresh" :data="events || []"
<DashboardBarsCard @showMore="showMore()" @dataReload="refresh" :data="browsers || []"
desc="The browsers most used to search your website." :dataIcons="false" :loading="pending"
label="Top Browsers" sub-label="Browsers"></DashboardBarsCard>
</div>

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

@@ -1,13 +1,6 @@
<script lang="ts" setup>
import type { DevicesAggregated } from '~/server/api/metrics/[project_id]/data/devices';
const activeProject = await useActiveProject();
const { data: events, pending, refresh } = await useFetch<DevicesAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/devices`, {
...signHeaders(),
lazy: true
});
const { data: devices, pending, refresh } = useDevicesData(10);
const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
@@ -18,10 +11,10 @@ function showMore() {
dialogBarData.value = [];
isDataLoading.value = true;
$fetch<any[]>(`/api/metrics/${activeProject.value?._id}/data/devices`, signHeaders({
'x-query-limit': '200'
})).then(data => {
dialogBarData.value = data;
const moreRes = useDevicesData(200);
moreRes.onResponse(data => {
dialogBarData.value = data.value || [];
isDataLoading.value = false;
});
@@ -32,7 +25,7 @@ function showMore() {
<template>
<div class="flex flex-col gap-2">
<DashboardBarsCard @showMore="showMore()" @dataReload="refresh" :data="events || []" :dataIcons="false"
<DashboardBarsCard @showMore="showMore()" @dataReload="refresh" :data="devices || []" :dataIcons="false"
desc="The devices most used to access your website." :loading="pending" label="Top Devices"
sub-label="Devices"></DashboardBarsCard>
</div>

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

@@ -1,12 +1,6 @@
<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 { data: events, pending, refresh } = useEventsData();
const router = useRouter();
@@ -23,10 +17,10 @@ function showMore() {
dialogBarData.value = [];
isDataLoading.value = true;
$fetch<any[]>(`/api/metrics/${activeProject.value?._id}/visits/events`, signHeaders({
'x-query-limit': '200'
})).then(data => {
dialogBarData.value = data;
const moreRes = useEventsData(200);
moreRes.onResponse(data => {
dialogBarData.value = data.value || [];
isDataLoading.value = false;
});

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

@@ -1,13 +1,8 @@
<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
});
const { data: countries, pending, refresh } = useGeolocationData(10);
function iconProvider(id: string): ReturnType<IconProvider> {
if (id === 'self') return ['icon', 'fas fa-link'];
@@ -23,17 +18,18 @@ const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
function showMore() {
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;
const moreRes = useGeolocationData(200);
moreRes.onResponse(data => {
dialogBarData.value = data.value?.map(e => {
return { ...e, icon: iconProvider(e._id) }
}) || [];
isDataLoading.value = false;
});
})
}

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

@@ -1,29 +1,20 @@
<script lang="ts" setup>
import type { OssAggregated } from '~/server/api/metrics/[project_id]/data/oss';
const activeProject = await useActiveProject();
const { data: events, pending, refresh } = await useFetch<OssAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/oss`, {
...signHeaders(),
lazy: true
});
const { data: oss, pending, refresh } = useOssData()
const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
function showMore() {
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;
const moreRes = useOssData(200);
moreRes.onResponse(data => {
dialogBarData.value = data.value || [];
isDataLoading.value = false;
});
})
}
@@ -32,7 +23,7 @@ function showMore() {
<template>
<div class="flex flex-col gap-2">
<DashboardBarsCard @showMore="showMore()" @dataReload="refresh" :data="events || []"
<DashboardBarsCard @showMore="showMore()" @dataReload="refresh" :data="oss || []"
desc="The operating systems most commonly used by your website's visitors." :dataIcons="false"
:loading="pending" label="Top OS" sub-label="OSs"></DashboardBarsCard>
</div>

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

@@ -1,24 +1,9 @@
<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 { safeSnapshotDates, snapshot } = useSnapshot();
const { data: events, pending, refresh } = await useFetch<ReferrersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/referrers`, {
...signHeaders({
'x-from': safeSnapshotDates.value.from,
'x-to': safeSnapshotDates.value.to
}),
lazy: true
});
watch(snapshot,()=>{
refresh();
})
const { data: events, pending, refresh } = useReferrersData(10);
function iconProvider(id: string): ReturnType<IconProvider> {
@@ -37,7 +22,6 @@ const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
const customDialog = useCustomDialog();
function onShowDetails(referrer: string) {
customDialog.openDialog(ReferrerBarChart, { slice: 'day', referrer });
}
@@ -46,19 +30,19 @@ function onShowDetails(referrer: string) {
function showMore() {
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 => {
const moreRes = useReferrersData(200);
moreRes.onResponse(data => {
dialogBarData.value = data.value?.map(e => {
return { ...e, icon: iconProvider(e._id) }
});
}) || [];
isDataLoading.value = false;
});
})
}