From ed8ec0dc2bbfb60a00af1411eb8fb496215813bf Mon Sep 17 00:00:00 2001
From: Emily <adharaultimasheireen@gmail.com>
Date: Sun, 16 Jun 2024 17:35:59 +0200
Subject: [PATCH] add referrers link

---
 dashboard/components/dashboard/BarsCard.vue   | 50 +++++++++++++------
 .../components/dashboard/ReferrersBarCard.vue |  6 +--
 2 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/dashboard/components/dashboard/BarsCard.vue b/dashboard/components/dashboard/BarsCard.vue
index 2022ec4..294c55b 100644
--- a/dashboard/components/dashboard/BarsCard.vue
+++ b/dashboard/components/dashboard/BarsCard.vue
@@ -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>
diff --git a/dashboard/components/dashboard/ReferrersBarCard.vue b/dashboard/components/dashboard/ReferrersBarCard.vue
index 1209ab4..01e54f6 100644
--- a/dashboard/components/dashboard/ReferrersBarCard.vue
+++ b/dashboard/components/dashboard/ReferrersBarCard.vue
@@ -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>