From df2b3cadd729f13ab2edcf8fee3391a4077beff8 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 15 Mar 2026 20:39:25 +0100
Subject: [PATCH] feat: add inline bar charts to all dashboard list components

Add proportional background bars (brand-orange) to Pages,
Referrers, Locations, Technology, and Campaigns tables.
Bars scale relative to the top item in each list.
---
 components/dashboard/Campaigns.tsx    | 12 ++++--
 components/dashboard/ContentStats.tsx | 62 +++++++++++++++------------
 components/dashboard/Locations.tsx    | 12 ++++--
 components/dashboard/TechSpecs.tsx    | 12 ++++--
 components/dashboard/TopReferrers.tsx | 46 ++++++++++++--------
 5 files changed, 89 insertions(+), 55 deletions(-)

diff --git a/components/dashboard/Campaigns.tsx b/components/dashboard/Campaigns.tsx
index 38e5cb0..0d5c745 100644
--- a/components/dashboard/Campaigns.tsx
+++ b/components/dashboard/Campaigns.tsx
@@ -155,13 +155,19 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
           ) : hasData ? (
             <>
               {displayedData.map((item) => {
+                const maxVis = displayedData[0]?.visitors ?? 0
+                const barWidth = maxVis > 0 ? (item.visitors / maxVis) * 100 : 0
                 return (
                   <div
                     key={`${item.source}|${item.medium}|${item.campaign}`}
                     onClick={() => onFilter?.({ dimension: 'utm_source', operator: 'is', values: [item.source] })}
-                    className={`flex items-center justify-between py-1.5 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
+                    className={`relative flex items-center justify-between py-1.5 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
                   >
-                    <div className="flex-1 text-neutral-900 dark:text-white flex items-center gap-3 min-w-0">
+                    <div
+                      className="absolute inset-y-0.5 left-0.5 bg-brand-orange/5 dark:bg-brand-orange/10 rounded-md transition-all"
+                      style={{ width: `${barWidth}%` }}
+                    />
+                    <div className="relative flex-1 text-neutral-900 dark:text-white flex items-center gap-3 min-w-0">
                       {renderSourceIcon(item.source)}
                       <div className="min-w-0">
                         <div className="truncate font-medium text-sm" title={item.source}>
@@ -174,7 +180,7 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
                         </div>
                       </div>
                     </div>
-                    <div className="flex items-center gap-2 ml-4">
+                    <div className="relative flex items-center gap-2 ml-4">
                       <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                         {totalVisitors > 0 ? `${Math.round((item.visitors / totalVisitors) * 100)}%` : ''}
                       </span>
diff --git a/components/dashboard/ContentStats.tsx b/components/dashboard/ContentStats.tsx
index f56b5df..4b0a460 100644
--- a/components/dashboard/ContentStats.tsx
+++ b/components/dashboard/ContentStats.tsx
@@ -148,34 +148,42 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
             </div>
           ) : hasData ? (
             <>
-              {displayedData.map((page) => (
-                <div
-                  key={page.path}
-                  onClick={() => onFilter?.({ dimension: 'page', operator: 'is', values: [page.path] })}
-                  className={`flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
-                >
-                  <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center">
-                    <span className="truncate">{page.path}</span>
-                    <a
-                      href={`https://${domain.replace(/^https?:\/\//, '')}${page.path}`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      onClick={e => e.stopPropagation()}
-                      className="ml-2 flex-shrink-0"
-                    >
-                      <ArrowUpRightIcon className="w-3 h-3 text-neutral-400 opacity-0 group-hover:opacity-100 transition-opacity hover:text-brand-orange" />
-                    </a>
+              {displayedData.map((page, idx) => {
+                const maxPv = displayedData[0]?.pageviews ?? 0
+                const barWidth = maxPv > 0 ? (page.pageviews / maxPv) * 100 : 0
+                return (
+                  <div
+                    key={page.path}
+                    onClick={() => onFilter?.({ dimension: 'page', operator: 'is', values: [page.path] })}
+                    className={`relative flex items-center justify-between h-9 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
+                  >
+                    <div
+                      className="absolute inset-y-0.5 left-0.5 bg-brand-orange/5 dark:bg-brand-orange/10 rounded-md transition-all"
+                      style={{ width: `${barWidth}%` }}
+                    />
+                    <div className="relative flex-1 truncate text-neutral-900 dark:text-white flex items-center">
+                      <span className="truncate">{page.path}</span>
+                      <a
+                        href={`https://${domain.replace(/^https?:\/\//, '')}${page.path}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        onClick={e => e.stopPropagation()}
+                        className="ml-2 flex-shrink-0"
+                      >
+                        <ArrowUpRightIcon className="w-3 h-3 text-neutral-400 opacity-0 group-hover:opacity-100 transition-opacity hover:text-brand-orange" />
+                      </a>
+                    </div>
+                    <div className="relative flex items-center gap-2 ml-4">
+                      <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
+                        {totalPageviews > 0 ? `${Math.round((page.pageviews / totalPageviews) * 100)}%` : ''}
+                      </span>
+                      <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                        {formatNumber(page.pageviews)}
+                      </span>
+                    </div>
                   </div>
-                  <div className="flex items-center gap-2 ml-4">
-                    <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
-                      {totalPageviews > 0 ? `${Math.round((page.pageviews / totalPageviews) * 100)}%` : ''}
-                    </span>
-                    <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
-                      {formatNumber(page.pageviews)}
-                    </span>
-                  </div>
-                </div>
-              ))}
+                )
+              })}
               {Array.from({ length: emptySlots }).map((_, i) => (
                 <div key={`empty-${i}`} className="h-9 px-2 -mx-2" aria-hidden="true" />
               ))}
diff --git a/components/dashboard/Locations.tsx b/components/dashboard/Locations.tsx
index ce256bc..0fd83ac 100644
--- a/components/dashboard/Locations.tsx
+++ b/components/dashboard/Locations.tsx
@@ -289,13 +289,19 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
                   const dim = TAB_TO_DIMENSION[activeTab]
                   const filterValue = activeTab === 'countries' ? item.country : activeTab === 'regions' ? item.region : item.city
                   const canFilter = onFilter && dim && filterValue
+                  const maxPv = displayedData[0]?.pageviews ?? 0
+                  const barWidth = maxPv > 0 ? (item.pageviews / maxPv) * 100 : 0
                   return (
                     <div
                       key={`${item.country ?? ''}-${item.region ?? ''}-${item.city ?? ''}`}
                       onClick={() => canFilter && onFilter({ dimension: dim, operator: 'is', values: [filterValue!] })}
-                      className={`flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
+                      className={`relative flex items-center justify-between h-9 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
                     >
-                      <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
+                      <div
+                        className="absolute inset-y-0.5 left-0.5 bg-brand-orange/5 dark:bg-brand-orange/10 rounded-md transition-all"
+                        style={{ width: `${barWidth}%` }}
+                      />
+                      <div className="relative flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
                         <span className="shrink-0">{getFlagComponent(item.country ?? '')}</span>
                         <span className="truncate">
                           {activeTab === 'countries' ? getCountryName(item.country ?? '') :
@@ -303,7 +309,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
                            getCityName(item.city ?? '')}
                         </span>
                       </div>
-                      <div className="flex items-center gap-2 ml-4">
+                      <div className="relative flex items-center gap-2 ml-4">
                         <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                           {totalPageviews > 0 ? `${Math.round((item.pageviews / totalPageviews) * 100)}%` : ''}
                         </span>
diff --git a/components/dashboard/TechSpecs.tsx b/components/dashboard/TechSpecs.tsx
index c86a059..2fa2b62 100644
--- a/components/dashboard/TechSpecs.tsx
+++ b/components/dashboard/TechSpecs.tsx
@@ -181,17 +181,23 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
               {displayedData.map((item) => {
                 const dim = TAB_TO_DIMENSION[activeTab]
                 const canFilter = onFilter && dim
+                const maxPv = displayedData[0]?.pageviews ?? 0
+                const barWidth = maxPv > 0 ? (item.pageviews / maxPv) * 100 : 0
                 return (
                   <div
                     key={item.name}
                     onClick={() => canFilter && onFilter({ dimension: dim, operator: 'is', values: [item.name] })}
-                    className={`flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
+                    className={`relative flex items-center justify-between h-9 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
                   >
-                    <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
+                    <div
+                      className="absolute inset-y-0.5 left-0.5 bg-brand-orange/5 dark:bg-brand-orange/10 rounded-md transition-all"
+                      style={{ width: `${barWidth}%` }}
+                    />
+                    <div className="relative flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
                       {item.icon && <span className="text-lg">{item.icon}</span>}
                       <span className="truncate">{capitalize(item.name)}</span>
                     </div>
-                    <div className="flex items-center gap-2 ml-4">
+                    <div className="relative flex items-center gap-2 ml-4">
                       <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                         {totalPageviews > 0 ? `${Math.round((item.pageviews / totalPageviews) * 100)}%` : ''}
                       </span>
diff --git a/components/dashboard/TopReferrers.tsx b/components/dashboard/TopReferrers.tsx
index b415142..434efca 100644
--- a/components/dashboard/TopReferrers.tsx
+++ b/components/dashboard/TopReferrers.tsx
@@ -112,26 +112,34 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
             </div>
           ) : hasData ? (
             <>
-              {displayedReferrers.map((ref) => (
-                <div
-                  key={ref.referrer}
-                  onClick={() => onFilter?.({ dimension: 'referrer', operator: 'is', values: [ref.referrer] })}
-                  className={`flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
-                >
-                  <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
-                    {renderReferrerIcon(ref.referrer)}
-                    <span className="truncate" title={ref.referrer}>{getReferrerDisplayName(ref.referrer)}</span>
+              {displayedReferrers.map((ref) => {
+                const maxPv = displayedReferrers[0]?.pageviews ?? 0
+                const barWidth = maxPv > 0 ? (ref.pageviews / maxPv) * 100 : 0
+                return (
+                  <div
+                    key={ref.referrer}
+                    onClick={() => onFilter?.({ dimension: 'referrer', operator: 'is', values: [ref.referrer] })}
+                    className={`relative flex items-center justify-between h-9 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
+                  >
+                    <div
+                      className="absolute inset-y-0.5 left-0.5 bg-brand-orange/5 dark:bg-brand-orange/10 rounded-md transition-all"
+                      style={{ width: `${barWidth}%` }}
+                    />
+                    <div className="relative flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
+                      {renderReferrerIcon(ref.referrer)}
+                      <span className="truncate" title={ref.referrer}>{getReferrerDisplayName(ref.referrer)}</span>
+                    </div>
+                    <div className="relative flex items-center gap-2 ml-4">
+                      <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
+                        {totalPageviews > 0 ? `${Math.round((ref.pageviews / totalPageviews) * 100)}%` : ''}
+                      </span>
+                      <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                        {formatNumber(ref.pageviews)}
+                      </span>
+                    </div>
                   </div>
-                  <div className="flex items-center gap-2 ml-4">
-                    <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
-                      {totalPageviews > 0 ? `${Math.round((ref.pageviews / totalPageviews) * 100)}%` : ''}
-                    </span>
-                    <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
-                      {formatNumber(ref.pageviews)}
-                    </span>
-                  </div>
-                </div>
-              ))}
+                )
+              })}
               {Array.from({ length: emptySlots }).map((_, i) => (
                 <div key={`empty-${i}`} className="h-9 px-2 -mx-2" aria-hidden="true" />
               ))}