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-06 03:00:24 +02:00
parent ba1d6c4bd0
commit 46774bd114
7 changed files with 167 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,30 +1,46 @@
<script lang="ts" setup>
const { data: browsers, pending, refresh } = useBrowsersData(10);
const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
const activeProject = useActiveProject();
function showMore() {
const { safeSnapshotDates } = useSnapshot()
showDialog.value = true;
dialogBarData.value = [];
isDataLoading.value = true;
const isShowMore = ref<boolean>(false);
const moreRes = useBrowsersData(200);
moreRes.onResponse(data => {
dialogBarData.value = data.value || [];
isDataLoading.value = false;
const headers = computed(() => {
return {
'x-from': safeSnapshotDates.value.from,
'x-to': safeSnapshotDates.value.to,
Authorization: authorizationHeaderComputed.value,
limit: isShowMore.value === true ? '200' : '10'
}
});
const browsersData = useFetch(`/api/metrics/${activeProject.value?._id}/data/browsers`, {
method: 'POST', headers, lazy: true, immediate: false
});
const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
function showMore() {
isShowMore.value = true;
showDialog.value = true;
dialogBarData.value = browsersData.data.value || [];
}
onMounted(() => {
browsersData.execute();
});
</script>
<template>
<div class="flex flex-col gap-2">
<DashboardBarsCard @showMore="showMore()" @dataReload="refresh" :data="browsers || []"
desc="The browsers most used to search your website." :dataIcons="false" :loading="pending"
label="Top Browsers" sub-label="Browsers"></DashboardBarsCard>
<DashboardBarsCard @showMore="showMore()" @dataReload="browsersData.refresh()"
:data="browsersData.data.value || []" desc="The browsers most used to search your website."
:dataIcons="false" :loading="browsersData.pending.value" label="Top Browsers" sub-label="Browsers">
</DashboardBarsCard>
</div>
</template>

42
dashboard/components/dashboard/DevicesBarCard.vue
View File

@@ -1,32 +1,46 @@
<script lang="ts" setup>
const { data: devices, pending, refresh } = useDevicesData(10);
const activeProject = useActiveProject();
const { safeSnapshotDates } = useSnapshot()
const isShowMore = ref<boolean>(false);
const headers = computed(() => {
return {
'x-from': safeSnapshotDates.value.from,
'x-to': safeSnapshotDates.value.to,
Authorization: authorizationHeaderComputed.value,
limit: isShowMore.value === true ? '200' : '10'
}
});
const devicesData = useFetch(`/api/metrics/${activeProject.value?._id}/data/devices`, {
method: 'POST', headers, lazy: true, immediate: false
});
const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
function showMore() {
isShowMore.value = true;
showDialog.value = true;
dialogBarData.value = [];
isDataLoading.value = true;
const moreRes = useDevicesData(200);
moreRes.onResponse(data => {
dialogBarData.value = data.value || [];
isDataLoading.value = false;
});
dialogBarData.value = devicesData.data.value || [];
}
onMounted(() => {
devicesData.execute();
});
</script>
<template>
<div class="flex flex-col gap-2">
<DashboardBarsCard @showMore="showMore()" @dataReload="refresh" :data="devices || []" :dataIcons="false"
desc="The devices most used to access your website." :loading="pending" label="Top Devices"
<DashboardBarsCard @showMore="showMore()" @dataReload="devicesData.refresh()" :data="devicesData.data.value || []" :dataIcons="false"
desc="The devices most used to access your website." :loading="devicesData.pending.value" label="Top Devices"
sub-label="Devices"></DashboardBarsCard>
</div>
</template>

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

@@ -1,31 +1,42 @@
<script lang="ts" setup>
const { data: events, pending, refresh } = useEventsData();
const router = useRouter();
function goToView() {
router.push('/dashboard/events');
}
const activeProject = useActiveProject();
const { safeSnapshotDates } = useSnapshot()
const isShowMore = ref<boolean>(false);
const headers = computed(() => {
return {
'x-from': safeSnapshotDates.value.from,
'x-to': safeSnapshotDates.value.to,
Authorization: authorizationHeaderComputed.value,
limit: isShowMore.value === true ? '200' : '10'
}
});
const eventsData = useFetch(`/api/metrics/${activeProject.value?._id}/data/events`, {
method: 'POST', headers, lazy: true, immediate: false
});
const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
function showMore() {
isShowMore.value = true;
showDialog.value = true;
dialogBarData.value = [];
isDataLoading.value = true;
const moreRes = useEventsData(200);
moreRes.onResponse(data => {
dialogBarData.value = data.value || [];
isDataLoading.value = false;
});
dialogBarData.value = eventsData.data.value || [];
}
onMounted(async () => {
eventsData.execute();
});
</script>
@@ -33,7 +44,8 @@ function showMore() {
<template>
<div class="flex flex-col gap-2 h-full">
<DashboardBarsCard @showMore="showMore()" @showRawData="goToView()"
desc="Most frequent user events triggered in this project" @dataReload="refresh" :data="events || []"
:loading="pending" label="Top Events" sub-label="Events" :rawButton="!isLiveDemo()"></DashboardBarsCard>
desc="Most frequent user events triggered in this project" @dataReload="eventsData.refresh()"
:data="eventsData.data.value || []" :loading="eventsData.pending.value" label="Top Events"
sub-label="Events" :rawButton="!isLiveDemo()"></DashboardBarsCard>
</div>
</template>

42
dashboard/components/dashboard/OssBarCard.vue
View File

@@ -1,30 +1,44 @@
<script lang="ts" setup>
const { data: oss, pending, refresh } = useOssData()
const activeProject = useActiveProject();
const { safeSnapshotDates } = useSnapshot()
const isShowMore = ref<boolean>(false);
const headers = computed(() => {
return {
'x-from': safeSnapshotDates.value.from,
'x-to': safeSnapshotDates.value.to,
Authorization: authorizationHeaderComputed.value,
limit: isShowMore.value === true ? '200' : '10'
}
});
const ossData = useFetch(`/api/metrics/${activeProject.value?._id}/data/oss`, {
method: 'POST', headers, lazy: true, immediate: false
});
const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
function showMore() {
isShowMore.value = true;
showDialog.value = true;
dialogBarData.value = [];
isDataLoading.value = true;
const moreRes = useOssData(200);
moreRes.onResponse(data => {
dialogBarData.value = data.value || [];
isDataLoading.value = false;
})
dialogBarData.value = ossData.data.value || [];
}
onMounted(() => {
ossData.execute();
});
</script>
<template>
<div class="flex flex-col gap-2 h-full">
<DashboardBarsCard @showMore="showMore()" @dataReload="refresh" :data="oss || []"
<DashboardBarsCard @showMore="showMore()" @dataReload="ossData.refresh()" :data="ossData.data.value || []"
desc="The operating systems most commonly used by your website's visitors." :dataIcons="false"
:loading="pending" label="Top OS" sub-label="OSs"></DashboardBarsCard>
:loading="ossData.pending.value" label="Top OS" sub-label="OSs"></DashboardBarsCard>
</div>
</template>

47
dashboard/components/dashboard/ReferrersBarCard.vue
View File

@@ -3,9 +3,6 @@
import type { IconProvider } from './BarsCard.vue';
import ReferrerBarChart from '../referrer/ReferrerBarChart.vue';
const { data: events, pending, refresh } = useReferrersData(10);
function iconProvider(id: string): ReturnType<IconProvider> {
if (id === 'self') return ['icon', 'fas fa-link'];
return ['img', `https://s2.googleusercontent.com/s2/favicons?domain=${id}&sz=64`]
@@ -16,6 +13,24 @@ function elementTextTransformer(element: string) {
return element;
}
const activeProject = useActiveProject();
const { safeSnapshotDates } = useSnapshot()
const isShowMore = ref<boolean>(false);
const headers = computed(() => {
return {
'x-from': safeSnapshotDates.value.from,
'x-to': safeSnapshotDates.value.to,
Authorization: authorizationHeaderComputed.value,
limit: isShowMore.value === true ? '200' : '10'
}
});
const referrersData = useFetch(`/api/metrics/${activeProject.value?._id}/data/referrers`, {
method: 'POST', headers, lazy: true, immediate: false
});
const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
@@ -25,35 +40,29 @@ function onShowDetails(referrer: string) {
customDialog.openDialog(ReferrerBarChart, { slice: 'day', referrer });
}
function showMore() {
isShowMore.value = true;
showDialog.value = true;
dialogBarData.value = [];
isDataLoading.value = true;
const moreRes = useReferrersData(200);
moreRes.onResponse(data => {
dialogBarData.value = data.value?.map(e => {
dialogBarData.value = referrersData.data.value?.map(e => {
return { ...e, icon: iconProvider(e._id) }
}) || [];
isDataLoading.value = false;
})
}
onMounted(async () => {
referrersData.execute();
});
</script>
<template>
<div class="flex flex-col gap-2">
<DashboardBarsCard @showDetails="onShowDetails" @showMore="showMore()"
:elementTextTransformer="elementTextTransformer" :iconProvider="iconProvider" @dataReload="refresh"
:showLink=true :data="events || []" :interactive="true" desc="Where users find your website."
:dataIcons="true" :loading="pending" label="Top Referrers" sub-label="Referrers"></DashboardBarsCard>
:elementTextTransformer="elementTextTransformer" :iconProvider="iconProvider"
@dataReload="referrersData.refresh()" :showLink=true :data="referrersData.data.value || []"
:interactive="true" desc="Where users find your website." :dataIcons="true" :loading="referrersData.pending.value"
label="Top Referrers" sub-label="Referrers"></DashboardBarsCard>
</div>
</template>

5
dashboard/composables/useAccessToken.ts
View File

@@ -9,6 +9,11 @@ export function signHeaders(headers?: Record<string, string>) {
return { headers: { ...(headers || {}), 'Authorization': 'Bearer ' + token.value } }
}
export const authorizationHeaderComputed = computed(() => {
const { token } = useAccessToken()
return token.value ? 'Bearer ' + token.value : '';
});
export function useAccessToken() {
const tokenCookie = useCookie(ACCESS_TOKEN_COOKIE_KEY, { expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30) })

14
dashboard/pages/index.vue
View File

@@ -100,7 +100,8 @@ const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
</div> -->
<div v-if="limitsInfo && limitsInfo.limited" class="w-full bg-[#fbbf2422] p-4 rounded-lg text-[.9rem] flex items-center">
<div v-if="limitsInfo && limitsInfo.limited"
class="w-full bg-[#fbbf2422] p-4 rounded-lg text-[.9rem] flex items-center">
<div class="flex flex-col grow">
<div class="poppins font-semibold text-[#fbbf24]">
Limit reached
@@ -123,7 +124,8 @@ const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
<div class="mt-6 px-6 flex gap-6 flex-col 2xl:flex-row">
<CardTitled :key="refreshKey" 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">
@@ -135,7 +137,8 @@ const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
</div>
</CardTitled>
<CardTitled :key="refreshKey" 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">
@@ -148,7 +151,7 @@ const refreshKey = 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">
@@ -160,6 +163,7 @@ const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
</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">
@@ -190,7 +194,7 @@ const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
<div class="flex-1">
</div>
</div>
</div> -->
</div>
</div>