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

add referrers link

Browse Source
This commit is contained in:
Emily
2024-06-16 17:35:59 +02:00
parent c2aa71bf4e
commit ed8ec0dc2b
2 changed files with 37 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,7 +16,8 @@ type Props = {
isDetailView?: boolean,
rawButton?: boolean,
hideShowMore?: boolean,
customIconStyle?: string
customIconStyle?: string,
showLink?: boolean
}
const props = defineProps<Props>();
const emits = defineEmits<{
@@ -40,6 +41,11 @@ function showDetails(id: string) {
emits('showDetails', id);
}
function openExternalLink(link: string) {
if (link === 'self') return;
return window.open('https://' + link, '_blank');
}
</script>
<template>
@@ -89,28 +95,40 @@ function showDetails(id: string) {
</div>
<div class="flex flex-col gap-1">
<div v-if="props.data.length > 0" class="flex justify-between items-center"
v-for="element of props.data">
<div class="w-10/12 relative" @click="showDetails(element._id)"
:class="{ 'cursor-pointer line-active': interactive }">
<div class="absolute rounded-sm w-full h-full bg-[#92abcf38]"
:style="'width:' + 100 / maxData * element.count + '%;'"></div>
<div class="flex px-2 py-1 relative items-center gap-4">
<div v-if="iconProvider && iconProvider(element._id) != undefined"
class="flex items-center h-[1.3rem]">
<img v-if="iconProvider(element._id)?.[0] == 'img'"
class="h-full"
:style="customIconStyle"
:src="iconProvider(element._id)?.[1]">
<div class="flex items-center gap-2 w-10/12 relative">
<i v-else :class="iconProvider(element._id)?.[1]"></i>
<div v-if="showLink">
<i @click="openExternalLink(element._id)"
class="fas fa-link text-gray-300 hover:text-gray-400 cursor-pointer"></i>
</div>
<div class="flex gap-1 items-center" @click="showDetails(element._id)"
:class="{ 'cursor-pointer line-active': interactive }">
<div class="absolute rounded-sm w-full h-full bg-[#92abcf38]"
:style="'width:' + 100 / maxData * element.count + '%;'"></div>
<div class="flex px-2 py-1 relative items-center gap-4">
<div v-if="iconProvider && iconProvider(element._id) != undefined"
class="flex items-center h-[1.3rem]">
<img v-if="iconProvider(element._id)?.[0] == 'img'" class="h-full"
:style="customIconStyle" :src="iconProvider(element._id)?.[1]">
<i v-else :class="iconProvider(element._id)?.[1]"></i>
</div>
<span
class="text-ellipsis line-clamp-1 ui-font z-[20] text-[.95rem] text-text/70">
{{ elementTextTransformer?.(element._id) || element._id }}
</span>
</div>
<span class="text-ellipsis line-clamp-1 ui-font z-[20] text-[.95rem] text-text/70">
{{ elementTextTransformer?.(element._id) || element._id }}
</span>
</div>
</div>
<div class="text-text font-semibold text-[.9rem] md:text-[1rem] manrope"> {{
formatNumberK(element.count) }} </div>
</div>

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

@@ -24,7 +24,7 @@ const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
const customDialog = useCustomDialog();
function onShowDetails(referrer: string) {
customDialog.openDialog(ReferrerBarChart, { slice: 'day', referrer });
}
@@ -56,7 +56,7 @@ function showMore() {
<div class="flex flex-col gap-2">
<DashboardBarsCard @showDetails="onShowDetails" @showMore="showMore()"
:elementTextTransformer="elementTextTransformer" :iconProvider="iconProvider" @dataReload="refresh"
:data="events || []" :interactive="true" desc="Where users find your website." :dataIcons="true"
:loading="pending" label="Top Referrers" sub-label="Referrers"></DashboardBarsCard>
:showLink=true :data="events || []" :interactive="true" desc="Where users find your website."
:dataIcons="true" :loading="pending" label="Top Referrers" sub-label="Referrers"></DashboardBarsCard>
</div>
</template>