mirror of
https://github.com/Litlyx/litlyx
synced 2025-12-10 15:58:38 +01:00
fix topcards reactivity
This commit is contained in:
Emily
@@ -5,50 +5,33 @@ 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());
|
||||
|
||||
|
||||
type Data = {
|
||||
data: number[],
|
||||
labels: string[],
|
||||
trend: number,
|
||||
ready: boolean
|
||||
}
|
||||
|
||||
|
||||
const { snapshot } = useSnapshot()
|
||||
|
||||
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 });
|
||||
|
||||
const snapshotFrom = computed(() => {
|
||||
return new Date(snapshot.value?.from || '0').getTime();
|
||||
});
|
||||
|
||||
const snapshotTo = computed(() => {
|
||||
return new Date(snapshot.value?.to || Date.now()).getTime();
|
||||
const snapshotDays = computed(() => {
|
||||
return (snapshotTo.value - snapshotFrom.value) / 1000 / 60 / 60 / 24;
|
||||
});
|
||||
|
||||
const avgVisitDay = computed(() => {
|
||||
const days = (snapshotTo.value - snapshotFrom.value) / 1000 / 60 / 60 / 24;
|
||||
const counts = visitsData.data.reduce((a, e) => e + a, 0);
|
||||
const avg = counts / 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(() => {
|
||||
const days = (snapshotTo.value - snapshotFrom.value) / 1000 / 60 / 60 / 24;
|
||||
const counts = eventsData.data.reduce((a, e) => e + a, 0);
|
||||
const avg = counts / 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(() => {
|
||||
const days = (snapshotTo.value - snapshotFrom.value) / 1000 / 60 / 60 / 24;
|
||||
const counts = sessionsData.data.reduce((a, e) => e + a, 0);
|
||||
const avg = counts / 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);
|
||||
});
|
||||
|
||||
@@ -56,23 +39,12 @@ 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`
|
||||
});
|
||||
|
||||
@@ -85,90 +57,88 @@ const chartSlice = computed(() => {
|
||||
return 'month' as Slice;
|
||||
});
|
||||
|
||||
async function loadData(timelineEndpointName: string, target: Data) {
|
||||
|
||||
target.ready = false;
|
||||
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 response = useTimeline(timelineEndpointName as any, chartSlice);
|
||||
const activeProject = useActiveProject();
|
||||
|
||||
response.onRequest(() => {
|
||||
target.ready = false;
|
||||
target.data = [];
|
||||
target.labels = [];
|
||||
})
|
||||
|
||||
response.onResponse(data => {
|
||||
|
||||
if (!data.value) return;
|
||||
|
||||
target.data = data.value.map(e => e.count);
|
||||
target.labels = data.value.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, chartSlice.value));
|
||||
|
||||
const pool = [...data.value.map(e => e.count)];
|
||||
pool.pop();
|
||||
const avg = pool.reduce((a, e) => a + e, 0) / pool.length;
|
||||
|
||||
const diffPercent: number = (100 / avg * (data.value.at(-1)?.count || 0)) - 100;
|
||||
|
||||
target.trend = Math.max(Math.min(diffPercent, 99), -99);
|
||||
|
||||
target.ready = true;
|
||||
function getBody() {
|
||||
return JSON.stringify({
|
||||
from: safeSnapshotDates.value.from,
|
||||
to: safeSnapshotDates.value.to,
|
||||
slice: chartSlice.value
|
||||
});
|
||||
|
||||
response.execute();
|
||||
|
||||
}
|
||||
|
||||
const visitsData = useFetch(`/api/metrics/${activeProject.value?._id}/timeline/visits`, {
|
||||
method: 'POST', ...signHeaders({ v2: 'true' }), body: getBody(), transform: transformResponse,
|
||||
lazy: true, immediate: false
|
||||
});
|
||||
|
||||
async function loadAllData() {
|
||||
console.log('LOAD ALL DATA')
|
||||
await Promise.all([
|
||||
loadData('visits', visitsData),
|
||||
loadData('events', eventsData),
|
||||
loadData('sessions', sessionsData),
|
||||
loadData('sessions_duration', sessionsDurationData),
|
||||
])
|
||||
}
|
||||
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 () => {
|
||||
|
||||
await loadAllData();
|
||||
watch(snapshot, async () => {
|
||||
await loadAllData();
|
||||
})
|
||||
|
||||
console.log('MOUNTED')
|
||||
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">
|
||||
|
||||
<DashboardCountCard :ready="visitsData.ready" icon="far fa-earth" text="Total page visits"
|
||||
:value="formatNumberK(visitsData.data.reduce((a, e) => a + e, 0))"
|
||||
: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(eventsData.data.reduce((a, e) => a + e, 0))"
|
||||
: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(sessionsData.data.reduce((a, e) => a + e, 0))"
|
||||
: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>
|
||||
|
||||
@@ -77,14 +77,17 @@ const limitAlertActions: any[] = [
|
||||
}
|
||||
]
|
||||
|
||||
</script>
|
||||
const { snapshot } = useSnapshot();
|
||||
const topCardsKey = computed(() => `${snapshot.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 && !changingProject">
|
||||
<div :key="'home-' + isLiveDemo()" v-if="projects && activeProject && firstInteraction">
|
||||
|
||||
<div class="w-full px-4 py-2">
|
||||
<!-- <div v-if="limitsInfo && !limitsInfo.limited"
|
||||
@@ -113,10 +116,10 @@ const limitAlertActions: any[] = [
|
||||
|
||||
</div>
|
||||
|
||||
<DashboardTopSection></DashboardTopSection>
|
||||
<DashboardTopCards></DashboardTopCards>
|
||||
|
||||
<!-- <DashboardTopSection></DashboardTopSection> -->
|
||||
<DashboardTopCards :key="topCardsKey"></DashboardTopCards>
|
||||
|
||||
<!--
|
||||
<div class="mt-6 px-6 flex gap-6 flex-col 2xl:flex-row">
|
||||
|
||||
<CardTitled class="p-4 flex-1 w-full" title="Visits trends" sub="Shows trends in page visits.">
|
||||
@@ -186,7 +189,7 @@ const limitAlertActions: any[] = [
|
||||
<div class="flex-1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user