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

add referrers bar chart

Browse Source
This commit is contained in:
Emily
2024-06-10 17:04:12 +02:00
parent 0c3a25b7e0
commit 7cc7a3ab8d
13 changed files with 247 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -43,11 +43,11 @@ function showDetails(id: string) {
<template>
<div class="flex">
<div class="flex h-full">
<div class="text-text flex flex-col items-start gap-4 w-full relative">
<div class="w-full p-4 flex flex-col bg-menu rounded-xl gap-8 card-shadow">
<div class="w-full h-full p-4 flex flex-col bg-menu rounded-xl gap-8 card-shadow">
<div class="flex justify-between mb-3">
<div class="flex flex-col gap-1">
@@ -67,8 +67,9 @@ function showDetails(id: string) {
</div>
<div v-if="rawButton" class="hidden lg:flex">
<div @click="$emit('showRawData')"
class="cursor-pointer hover:bg-accent/60 flex items-center justify-center poppins bg-accent rounded-lg py-2 px-8">
Raw data
class="cursor-pointer flex gap-1 items-center justify-center font-semibold poppins rounded-lg text-[#5680f8] hover:text-[#5681f8ce]">
<div> Raw data </div>
<div class="flex items-center"> <i class="fas fa-arrow-up-right"></i> </div>
</div>
</div>
@@ -87,7 +88,8 @@ 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 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]"
@@ -99,13 +101,13 @@ function showDetails(id: string) {
: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">
<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 class="text-text font-semibold text-[.9rem] md:text-[1rem] manrope"> {{
formatNumberK(element.count) }} </div>
</div>
<div v-if="props.data.length == 0"
class="flex justify-center text-text-sub font-bold text-[1.1rem]">

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

@@ -34,7 +34,7 @@ function showMore() {
<template>
<div class="flex flex-col gap-2">
<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>
</div>

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

@@ -2,6 +2,7 @@
import type { ReferrersAggregated } from '~/server/api/metrics/[project_id]/data/referrers';
import type { IconProvider } from './BarsCard.vue';
import ReferrerBarChart from '../referrer/ReferrerBarChart.vue';
const activeProject = await useActiveProject();
const { data: events, pending, refresh } = await useFetch<ReferrersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/referrers`, signHeaders());
@@ -20,6 +21,16 @@ function elementTextTransformer(element: string) {
const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
const customDialog = useCustomDialog();
function onShowDetails(referrer: string) {
customDialog.openDialog(ReferrerBarChart, { slice: 'day', referrer });
}
function showMore() {
@@ -43,9 +54,9 @@ function showMore() {
<template>
<div class="flex flex-col gap-2">
<DashboardBarsCard @showMore="showMore()" :elementTextTransformer="elementTextTransformer"
:iconProvider="iconProvider" @dataReload="refresh" :data="events || []"
desc="Where users find your website." :dataIcons="true" :loading="pending" label="Top Referrers"
sub-label="Referrers"></DashboardBarsCard>
<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>
</div>
</template>

2
dashboard/components/dashboard/WebsitesBarCard.vue
View File

@@ -49,7 +49,7 @@ async function dataReload() {
<template>
<div class="flex flex-col gap-2">
<div class="flex flex-col gap-2 h-full">
<DashboardBarsCard :hideShowMore="true" @showGeneral="setDefaultData()" @showRawData="goToView()"
@dataReload="dataReload()" @showDetails="showDetails" :data="currentViewData || []"
:loading="pending || isLoading" :label="isPagesView ? 'Top pages' : 'Top Websites'"