refactor: redesign top paths table to match Pulse patterns
- Replace card-per-row with compact list rows + background bars - Drop rank badges (order already communicates rank) - Inline path sequence + stats into single row - Truncate sequences longer than 7 steps (first 3 + … + last 2) - Duration shows on hover with slide-in animation - Use brand-orange bars proportional to top path count
This commit is contained in:
Usman Baig
@@ -2,7 +2,7 @@
|
||||
|
||||
import type { TopPath } from '@/lib/api/journeys'
|
||||
import { TableSkeleton } from '@/components/skeletons'
|
||||
import { Path, ArrowRight, Clock, Users } from '@phosphor-icons/react'
|
||||
import { Path, ArrowRight, Clock } from '@phosphor-icons/react'
|
||||
|
||||
interface TopPathsTableProps {
|
||||
paths: TopPath[]
|
||||
@@ -24,8 +24,16 @@ function smartLabel(path: string): string {
|
||||
return `…/${segments[segments.length - 1]}`
|
||||
}
|
||||
|
||||
function truncateSequence(seq: string[], max: number): (string | null)[] {
|
||||
if (seq.length <= max) return seq
|
||||
const head = seq.slice(0, 3)
|
||||
const tail = seq.slice(-2)
|
||||
return [...head, null, ...tail]
|
||||
}
|
||||
|
||||
export default function TopPathsTable({ paths, loading }: TopPathsTableProps) {
|
||||
const hasData = paths.length > 0
|
||||
const maxCount = hasData ? paths[0].session_count : 0
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
|
||||
@@ -41,49 +49,66 @@ export default function TopPathsTable({ paths, loading }: TopPathsTableProps) {
|
||||
{loading ? (
|
||||
<TableSkeleton rows={7} cols={4} />
|
||||
) : hasData ? (
|
||||
<div className="space-y-2">
|
||||
{paths.map((path, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="group rounded-xl border border-neutral-100 dark:border-neutral-800 hover:border-neutral-200 dark:hover:border-neutral-700 p-4 transition-colors"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-xs font-medium text-neutral-400 dark:text-neutral-500">
|
||||
#{i + 1}
|
||||
</span>
|
||||
<div className="flex items-center gap-4 text-xs text-neutral-500 dark:text-neutral-400">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Users weight="bold" className="w-3.5 h-3.5" />
|
||||
{path.session_count.toLocaleString()}
|
||||
</span>
|
||||
{path.avg_duration > 0 && (
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Clock weight="bold" className="w-3.5 h-3.5" />
|
||||
{formatDuration(path.avg_duration)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center flex-wrap gap-1.5">
|
||||
{path.page_sequence.map((page, j) => (
|
||||
<div key={j} className="flex items-center gap-1.5">
|
||||
{j > 0 && (
|
||||
<ArrowRight
|
||||
weight="bold"
|
||||
className="w-3 h-3 text-neutral-300 dark:text-neutral-600 shrink-0"
|
||||
/>
|
||||
<div className="space-y-0.5">
|
||||
{paths.map((path, i) => {
|
||||
const barWidth = maxCount > 0 ? (path.session_count / maxCount) * 100 : 0
|
||||
const displaySeq = truncateSequence(path.page_sequence, 7)
|
||||
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className="relative flex items-center h-10 group hover:bg-neutral-50 dark:hover:bg-neutral-800/50 rounded-lg px-3 -mx-3 transition-colors"
|
||||
>
|
||||
{/* Background bar */}
|
||||
<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}%` }}
|
||||
/>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative flex items-center justify-between w-full min-w-0">
|
||||
{/* Path sequence */}
|
||||
<div className="flex items-center min-w-0 gap-1.5 flex-1 overflow-hidden">
|
||||
{displaySeq.map((page, j) => (
|
||||
<div key={j} className="flex items-center gap-1.5 shrink-0">
|
||||
{j > 0 && (
|
||||
<ArrowRight
|
||||
weight="bold"
|
||||
className="w-2.5 h-2.5 text-neutral-300 dark:text-neutral-600 shrink-0"
|
||||
/>
|
||||
)}
|
||||
{page === null ? (
|
||||
<span className="text-xs text-neutral-400 dark:text-neutral-500">
|
||||
…
|
||||
</span>
|
||||
) : (
|
||||
<span
|
||||
className="text-sm text-neutral-900 dark:text-white truncate"
|
||||
title={page}
|
||||
>
|
||||
{smartLabel(page)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="relative flex items-center gap-4 ml-4 shrink-0">
|
||||
{path.avg_duration > 0 && (
|
||||
<span className="hidden sm:flex items-center gap-1 text-xs text-neutral-400 dark:text-neutral-500 opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
|
||||
<Clock weight="bold" className="w-3 h-3" />
|
||||
{formatDuration(path.avg_duration)}
|
||||
</span>
|
||||
)}
|
||||
<span
|
||||
className="inline-flex px-2.5 py-1 rounded-md text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300"
|
||||
title={page}
|
||||
>
|
||||
{smartLabel(page)}
|
||||
<span className="text-sm tabular-nums font-semibold text-neutral-600 dark:text-neutral-400">
|
||||
{path.session_count.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
|
||||
|
||||
Reference in New Issue
Block a user