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 reactivity

Browse Source
This commit is contained in:
Emily
2024-08-07 15:06:06 +02:00
parent 0c8ec73722
commit 4c9efda9ca
13 changed files with 257 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
dashboard/pages/events.vue
View File

@@ -8,16 +8,21 @@ const selectLabelsEvents = [
];
const eventsStackedSelectIndex = ref<number>(0);
const activeProject = useActiveProject();
const { snapshot } = useSnapshot();
const refreshKey = computed(() => `${snapshot.value._id.toString() + activeProject.value?._id.toString()}`);
</script>
<template>
<div class="w-full h-full overflow-y-auto pb-20 p-6 gap-6 flex flex-col">
<div class="flex gap-6 flex-col xl:flex-row">
<CardTitled class="p-4 flex-[4] w-full" title="Events" sub="Events stacked bar chart.">
<CardTitled :key="refreshKey" class="p-4 flex-[4] w-full" title="Events" sub="Events stacked bar chart.">
<template #header>
<SelectButton @changeIndex="eventsStackedSelectIndex = $event"
:currentIndex="eventsStackedSelectIndex" :options="selectLabelsEvents">
@@ -29,18 +34,19 @@ const eventsStackedSelectIndex = ref<number>(0);
</div>
</CardTitled>
<CardTitled class="p-4 flex-[2] w-full h-full" title="Top events" sub="Displays key events.">
<CardTitled :key="refreshKey" class="p-4 flex-[2] w-full h-full" title="Top events"
sub="Displays key events.">
<DashboardEventsChart class="w-full"> </DashboardEventsChart>
</CardTitled>
</div>
<div class="flex">
<EventsUserFlow></EventsUserFlow>
<EventsUserFlow :key="refreshKey"></EventsUserFlow>
</div>
<div class="flex">
<EventsMetadataAnalyzer></EventsMetadataAnalyzer>
<EventsMetadataAnalyzer :key="refreshKey"></EventsMetadataAnalyzer>
</div>

55
dashboard/pages/index.vue
View File

@@ -54,14 +54,14 @@ function copyScript() {
createAlert('Success', 'Script copied successfully.', 'far fa-circle-check', 5000);
}
const { data: firstInteraction, pending, refresh } = useFirstInteractionData();
const firstInteractionUrl = computed(() => {
return `/api/metrics/${activeProject.value?._id}/first_interaction`
});
watch(pending, () => {
if (pending.value === true) return;
if (firstInteraction.value === false) {
setTimeout(() => { refresh(); }, 2000);
}
})
const firstInteraction = useFetch<boolean>(firstInteractionUrl, {
...signHeaders(),
lazy: true
});
const selectLabels = [
{ label: 'Hour', value: 'hour' },
@@ -70,16 +70,10 @@ const selectLabels = [
];
const limitAlertActions: any[] = [
{
label: 'Upgrade', variant: "outline", color: 'white',
trailing: true, action: () => { }
}
]
const { snapshot } = useSnapshot();
const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
const refreshKey = computed(() => `${snapshot.value._id.toString() + activeProject.value?._id.toString()}`);
</script>
@@ -88,16 +82,9 @@ const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
<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">
<div :key="'home-' + isLiveDemo()" v-if="projects && activeProject && firstInteraction.data.value">
<div class="w-full px-4 py-2">
<!-- <div v-if="limitsInfo && !limitsInfo.limited"
class="bg-orange-600 justify-center flex gap-2 py-2 px-4 font-semibold text-[1.2rem] rounded-lg">
<div class="poppins text-text"> Limit reached </div>
<NuxtLink to="/plans" class="poppins text-[#393972] underline cursor-pointer">
Upgrade project
</NuxtLink>
</div> -->
<div v-if="limitsInfo && limitsInfo.limited"
@@ -118,7 +105,7 @@ const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
</div>
<DashboardTopSection></DashboardTopSection>
<DashboardTopSection></DashboardTopSection>
<DashboardTopCards :key="refreshKey"></DashboardTopCards>
@@ -150,27 +137,27 @@ const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
</div>
</CardTitled>
</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">
<DashboardWebsitesBarCard></DashboardWebsitesBarCard>
<DashboardWebsitesBarCard :key="refreshKey"></DashboardWebsitesBarCard>
</div>
<div class="flex-1">
<DashboardEventsBarCard></DashboardEventsBarCard>
<DashboardEventsBarCard :key="refreshKey"></DashboardEventsBarCard>
</div>
</div>
</div>
<div class="flex w-full justify-center mt-6 px-6">
<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">
<DashboardReferrersBarCard></DashboardReferrersBarCard>
<DashboardReferrersBarCard :key="refreshKey"></DashboardReferrersBarCard>
</div>
<div class="flex-1">
<DashboardBrowsersBarCard></DashboardBrowsersBarCard>
<DashboardBrowsersBarCard :key="refreshKey"></DashboardBrowsersBarCard>
</div>
</div>
</div>
@@ -178,10 +165,10 @@ const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
<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">
<DashboardOssBarCard></DashboardOssBarCard>
<DashboardOssBarCard :key="refreshKey"></DashboardOssBarCard>
</div>
<div class="flex-1">
<DashboardGeolocationBarCard></DashboardGeolocationBarCard>
<DashboardGeolocationBarCard :key="refreshKey"></DashboardGeolocationBarCard>
</div>
</div>
</div>
@@ -189,16 +176,16 @@ const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
<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">
<DashboardDevicesBarCard></DashboardDevicesBarCard>
<DashboardDevicesBarCard :key="refreshKey"></DashboardDevicesBarCard>
</div>
<div class="flex-1">
</div>
</div>
</div>
</div>
</div>
<div v-if="!firstInteraction && activeProject" class="mt-[20vh] lg:mt-[36vh] flex flex-col gap-6">
<div v-if="!firstInteraction.data.value && activeProject" class="mt-[20vh] lg:mt-[36vh] flex flex-col gap-6">
<div class="flex gap-4 items-center justify-center">
<div class="animate-pulse w-[1.5rem] h-[1.5rem] bg-accent rounded-full"> </div>
<div class="text-text/90 poppins text-[1.3rem] font-semibold">

6
dashboard/pages/live_demo.vue
View File

@@ -46,7 +46,7 @@ const selectLabelsEvents = [
{ label: 'Month', value: 'month' },
];
const { snapshot } = useSnapshot();
</script>
@@ -118,7 +118,7 @@ const selectLabelsEvents = [
<div class="flex gap-6 flex-col xl:flex-row p-6">
<CardTitled class="p-4 flex-[4]" title="Events" sub="Events stacked bar chart.">
<!-- <CardTitled class="p-4 flex-[4]" title="Events" sub="Events stacked bar chart.">
<template #header>
<SelectButton @changeIndex="eventsStackedSelectIndex = $event"
:currentIndex="eventsStackedSelectIndex" :options="selectLabelsEvents">
@@ -128,7 +128,7 @@ const selectLabelsEvents = [
<EventsStackedBarChart :slice="(selectLabelsEvents[eventsStackedSelectIndex].value as any)">
</EventsStackedBarChart>
</div>
</CardTitled>
</CardTitled> -->
<div class="bg-menu p-4 rounded-xl flex-[2] flex flex-col gap-10 h-full">
<div class="flex flex-col gap-1">