feat: enhance Top Referrers display by merging referrer rows and adding friendly names

This commit is contained in:
Usman Baig
2026-02-11 16:57:01 +01:00
parent ddbb2494b1
commit 16d8765f46
4 changed files with 83 additions and 38 deletions

View File

@@ -7,7 +7,7 @@ import jsPDF from 'jspdf'
import autoTable from 'jspdf-autotable'
import type { DailyStat } from './Chart'
import { formatNumber, formatDuration } from '@/lib/utils/format'
import { getReferrerDisplayName } from '@/lib/utils/icons'
import { getReferrerDisplayName, mergeReferrersByDisplayName } from '@/lib/utils/icons'
import type { TopPage, TopReferrer } from '@/lib/api/stats'
interface ExportModalProps {
@@ -279,7 +279,8 @@ export default function ExportModal({ isOpen, onClose, data, stats, topPages, to
doc.text('Top Referrers', 14, finalY)
finalY += 5
const referrersData = topReferrers.slice(0, 10).map(r => [getReferrerDisplayName(r.referrer), formatNumber(r.pageviews)])
const mergedReferrers = mergeReferrersByDisplayName(topReferrers)
const referrersData = mergedReferrers.slice(0, 10).map(r => [getReferrerDisplayName(r.referrer), formatNumber(r.pageviews)])
autoTable(doc, {
startY: finalY,

View File

@@ -2,7 +2,7 @@
import { useState, useEffect } from 'react'
import { formatNumber } from '@/lib/utils/format'
import { getReferrerDisplayName, getReferrerFavicon, getReferrerIcon } from '@/lib/utils/icons'
import { getReferrerDisplayName, getReferrerFavicon, getReferrerIcon, mergeReferrersByDisplayName } from '@/lib/utils/icons'
import { Modal, GlobeIcon } from '@ciphera-net/ui'
import { getTopReferrers, TopReferrer } from '@/lib/api/stats'
@@ -26,10 +26,12 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
ref => ref.referrer && ref.referrer !== 'Unknown' && ref.referrer !== ''
)
const hasData = filteredReferrers.length > 0
const displayedReferrers = hasData ? filteredReferrers.slice(0, LIMIT) : []
const mergedReferrers = mergeReferrersByDisplayName(filteredReferrers)
const hasData = mergedReferrers.length > 0
const displayedReferrers = hasData ? mergedReferrers.slice(0, LIMIT) : []
const emptySlots = Math.max(0, LIMIT - displayedReferrers.length)
const showViewAll = hasData && filteredReferrers.length > LIMIT
const showViewAll = hasData && mergedReferrers.length > LIMIT
function renderReferrerIcon(referrer: string) {
const faviconUrl = getReferrerFavicon(referrer)
@@ -137,7 +139,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
<p className="text-sm text-neutral-500 dark:text-neutral-400">Loading...</p>
</div>
) : (
(fullData.length > 0 ? fullData : filteredReferrers).map((ref, index) => (
mergeReferrersByDisplayName(fullData.length > 0 ? fullData : filteredReferrers).map((ref, index) => (
<div key={index} className="flex items-center justify-between py-2 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
<div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
{renderReferrerIcon(ref.referrer)}