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

fix visits + sessions reactivity

Browse Source
This commit is contained in:
Emily
2024-08-04 00:33:28 +02:00
parent 5a26c8c788
commit ba1d6c4bd0
7 changed files with 66 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
dashboard/components/AdvancedLineChart.vue
View File

@@ -81,8 +81,6 @@ const { lineChartProps, lineChartRef } = useLineChart({ chartData: chartData, op
onMounted(async () => {
console.log('MOUNTED')
const c = document.createElement('canvas');
const ctx = c.getContext("2d");
let gradient: any = `${props.color}22`;
@@ -98,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;
});

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

@@ -2,42 +2,45 @@
import { onMounted } from 'vue';
import DateService, { type Slice } from '@services/DateService';
const data = ref<number[]>([]);
const labels = ref<string[]>([]);
const props = defineProps<{ slice: Slice }>();
const slice = computed(() => props.slice);
const activeProject = useActiveProject();
const res = useTimeline('sessions', slice);
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 () => {
res.onResponse(resData => {
if (!resData.value) return;
data.value = resData.value.map(e => e.count);
labels.value = resData.value.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, props.slice));
});
await res.refresh();
watch(props, () => res.refresh());
})
const chartVisible = computed(() => {
if (res.pending.value) return false;
if (!res.data.value) return false;
return true;
})
sessionsData.execute();
});
</script>
<template>
<div>
<div v-if="!chartVisible" class="flex justify-center py-40">
<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="chartVisible" :data="data" :labels="labels" color="#f56523"></AdvancedLineChart>
<AdvancedLineChart v-if="!sessionsData.pending.value" :data="sessionsData.data.value?.data || []"
:labels="sessionsData.data.value?.labels || []" color="#f56523"></AdvancedLineChart>
</div>
</template>

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

@@ -101,7 +101,6 @@ const sessionsDurationData = useFetch(`/api/metrics/${activeProject.value?._id}/
onMounted(async () => {
console.log('MOUNTED')
visitsData.execute();
eventsData.execute();
sessionsData.execute();

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

@@ -2,43 +2,45 @@
import { onMounted } from 'vue';
import DateService, { type Slice } from '@services/DateService';
const data = ref<number[]>([]);
const labels = ref<string[]>([]);
const props = defineProps<{ slice: Slice }>();
const slice = computed(() => props.slice);
const activeProject = useActiveProject();
const res = useTimeline('visits', slice);
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 () => {
res.onResponse(resData => {
if (!resData.value) return;
data.value = resData.value.map(e => e.count);
labels.value = resData.value.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, props.slice));
});
await res.refresh();
watch(props, () => res.refresh());
})
const chartVisible = computed(() => {
if (res.pending.value) return false;
if (!res.data.value) return false;
return true;
})
visitsData.execute();
});
</script>
<template>
<div>
<div v-if="!chartVisible" class="flex justify-center py-40">
<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="chartVisible" :data="data" :labels="labels" color="#5655d7">
<AdvancedLineChart v-if="!visitsData.pending.value" :data="visitsData.data.value?.data || []"
:labels="visitsData.data.value?.labels || []" color="#5655d7">
</AdvancedLineChart>
</div>
</template>

15
dashboard/pages/index.vue
View File

@@ -78,7 +78,8 @@ const limitAlertActions: any[] = [
]
const { snapshot } = useSnapshot();
const topCardsKey = computed(() => `${snapshot.value._id.toString()}`);
const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
</script>
@@ -116,13 +117,13 @@ const topCardsKey = computed(() => `${snapshot.value._id.toString()}`);
</div>
<!-- <DashboardTopSection></DashboardTopSection> -->
<DashboardTopCards :key="topCardsKey"></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 w-full" 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">
@@ -134,7 +135,7 @@ const topCardsKey = computed(() => `${snapshot.value._id.toString()}`);
</div>
</CardTitled>
<CardTitled class="p-4 flex-1 w-full" 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">
@@ -147,7 +148,7 @@ const topCardsKey = computed(() => `${snapshot.value._id.toString()}`);
</CardTitled>
</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">

2
dashboard/utils/DateUtils.ts
View File

@@ -62,6 +62,8 @@ 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) {

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);