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

add lazy load to dashboard

Browse Source
This commit is contained in:
Emily
2024-07-02 20:26:25 +02:00
parent 6b97b4f49d
commit b214c7f613
9 changed files with 37 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,10 @@
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());
const { data: events, pending, refresh } = await useFetch<BrowsersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/browsers`, {
...signHeaders(),
lazy: true
});
const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();

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

@@ -3,7 +3,10 @@
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());
const { data: events, pending, refresh } = await useFetch<DevicesAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/devices`, {
...signHeaders(),
lazy: true
});
const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();

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

@@ -3,7 +3,10 @@
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());
const { data: events, pending, refresh } = await useFetch<CustomEventsAggregated[]>(`/api/metrics/${activeProject.value?._id}/visits/events`, {
...signHeaders(),
lazy: true
});
const router = useRouter();
@@ -35,7 +38,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>
<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>
</div>
</template>

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

@@ -4,7 +4,10 @@ import type { CountriesAggregated } from '~/server/api/metrics/[project_id]/data
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());
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'];

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

@@ -3,7 +3,10 @@
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());
const { data: events, pending, refresh } = await useFetch<OssAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/oss`, {
...signHeaders(),
lazy: true
});
const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();

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

@@ -5,7 +5,10 @@ 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());
const { data: events, pending, refresh } = await useFetch<ReferrersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/referrers`, {
...signHeaders(),
lazy: true
});
function iconProvider(id: string): ReturnType<IconProvider> {

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

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import type { MetricsTimeline } from '~/server/api/metrics/[project_id]/timeline/generic';
import DateService from '@services/DateService';
const { data: metricsInfo } = useMetricsData();

9
dashboard/composables/useDataService.ts
View File

@@ -6,7 +6,10 @@ import type { MetricsTimeline } from "~/server/api/metrics/[project_id]/timeline
export function useMetricsData() {
const activeProject = useActiveProject();
const metricsInfo = useFetch<MetricsCounts>(`/api/metrics/${activeProject.value?._id}/counts`, signHeaders());
const metricsInfo = useFetch<MetricsCounts>(`/api/metrics/${activeProject.value?._id}/counts`, {
...signHeaders(),
lazy: true
});
return metricsInfo;
}
@@ -55,7 +58,7 @@ export async function useTimelineDataRaw(timelineEndpointName: string, slice: Sl
`/api/metrics/${activeProject.value?._id}/timeline/${timelineEndpointName}`, {
method: 'POST',
...signHeaders({ 'Content-Type': 'application/json' }),
body: JSON.stringify({ slice })
body: JSON.stringify({ slice }),
});
return response;
@@ -77,6 +80,7 @@ export function usePagesData(website: string, limit: number = 10) {
'x-website-name': website
}),
key: `pages_data:${website}:${limit}`,
lazy: true
});
return res;
@@ -88,6 +92,7 @@ export function useWebsitesData(limit: number = 10) {
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;
}

1
dashboard/pages/index.vue
View File

@@ -131,6 +131,7 @@ const selectLabels = [
</div>
</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">