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

implementing snapshots

Browse Source
This commit is contained in:
Emily
2024-08-01 23:35:32 +02:00
parent 6c32b64ac6
commit 376b39e247
19 changed files with 222 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
dashboard/components/dashboard/EventsChart.vue
View File

@@ -55,7 +55,7 @@ const chartData = ref<ChartData<'doughnut'>>({
{
rotation: 1,
data: [],
backgroundColor: ['#6bbbe3','#5655d0', '#a6d5cb', '#fae0b9'],
backgroundColor: ['#6bbbe3', '#5655d0', '#a6d5cb', '#fae0b9'],
borderColor: ['#1d1d1f'],
borderWidth: 2
},
@@ -65,27 +65,45 @@ const chartData = ref<ChartData<'doughnut'>>({
const { doughnutChartProps, doughnutChartRef } = useDoughnutChart({ chartData: chartData, options: chartOptions });
const res = useEventsData();
onMounted(async () => {
const activeProject = useActiveProject()
res.onResponse(resData => {
if (!resData.value) return;
const eventsData = await $fetch<EventsPie[]>(`/api/metrics/${activeProject.value?._id}/visits/events`, signHeaders());
chartData.value.labels = eventsData.map(e => {
return `${e._id}`;
});
chartData.value.datasets[0].data = eventsData.map(e => e.count);
doughnutChartRef.value?.update();
chartData.value.labels = resData.value.map(e => {
return `${e._id}`;
});
if (window.innerWidth < 800) {
if (chartOptions.value?.plugins?.legend?.display) {
chartOptions.value.plugins.legend.display = false;
chartData.value.datasets[0].data = resData.value.map(e => e.count);
doughnutChartRef.value?.update();
if (window.innerWidth < 800) {
if (chartOptions.value?.plugins?.legend?.display) {
chartOptions.value.plugins.legend.display = false;
}
}
}
});
})
const chartVisible = computed(() => {
if (res.pending.value) return false;
if (!res.data.value) return false;
return true;
})
</script>
<template>
<DoughnutChart v-bind="doughnutChartProps"> </DoughnutChart>
<div>
<div v-if="!chartVisible" class="flex justify-center py-40">
<i class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
</div>
<DoughnutChart v-if="chartVisible" v-bind="doughnutChartProps"> </DoughnutChart>
</div>
</template>