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>