fix: cap inline bar chart max width at 75%

Prevents the top item from spanning full width, making bars
read more clearly as proportional indicators.
This commit is contained in:
Usman Baig
2026-03-16 12:44:32 +01:00
parent 4f419f8b04
commit 3b09758881
7 changed files with 7 additions and 7 deletions

View File

@@ -60,7 +60,7 @@ export default function FrustrationByPageTable({ pages, loading }: FrustrationBy
{/* Rows */}
<div className="space-y-0.5">
{pages.map((page) => {
const barWidth = (page.total / maxTotal) * 100
const barWidth = (page.total / maxTotal) * 75
return (
<div
key={page.page_path}

View File

@@ -156,7 +156,7 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
<>
{displayedData.map((item) => {
const maxVis = displayedData[0]?.visitors ?? 0
const barWidth = maxVis > 0 ? (item.visitors / maxVis) * 100 : 0
const barWidth = maxVis > 0 ? (item.visitors / maxVis) * 75 : 0
return (
<div
key={`${item.source}|${item.medium}|${item.campaign}`}

View File

@@ -151,7 +151,7 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
<>
{displayedData.map((page, idx) => {
const maxPv = displayedData[0]?.pageviews ?? 0
const barWidth = maxPv > 0 ? (page.pageviews / maxPv) * 100 : 0
const barWidth = maxPv > 0 ? (page.pageviews / maxPv) * 75 : 0
return (
<div
key={page.path}

View File

@@ -298,7 +298,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
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
const barWidth = maxPv > 0 ? (item.pageviews / maxPv) * 75 : 0
return (
<div
key={`${item.country ?? ''}-${item.region ?? ''}-${item.city ?? ''}`}

View File

@@ -183,7 +183,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
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
const barWidth = maxPv > 0 ? (item.pageviews / maxPv) * 75 : 0
return (
<div
key={item.name}

View File

@@ -115,7 +115,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
<>
{displayedReferrers.map((ref) => {
const maxPv = displayedReferrers[0]?.pageviews ?? 0
const barWidth = maxPv > 0 ? (ref.pageviews / maxPv) * 100 : 0
const barWidth = maxPv > 0 ? (ref.pageviews / maxPv) * 75 : 0
return (
<div
key={ref.referrer}

View File

@@ -51,7 +51,7 @@ export default function TopPathsTable({ paths, loading }: TopPathsTableProps) {
) : hasData ? (
<div className="space-y-0.5">
{paths.map((path, i) => {
const barWidth = maxCount > 0 ? (path.session_count / maxCount) * 100 : 0
const barWidth = maxCount > 0 ? (path.session_count / maxCount) * 75 : 0
const displaySeq = truncateSequence(path.page_sequence, 7)
return (