feat: add collapsible section for worst performance pages in PerformanceStats component
This commit is contained in:
Usman Baig
@@ -1,6 +1,7 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import { useState, useEffect } from 'react'
|
import { useState, useEffect } from 'react'
|
||||||
|
import { ChevronDownIcon } from '@radix-ui/react-icons'
|
||||||
import { PerformanceStats as Stats, PerformanceByPageStat, getPerformanceByPage } from '@/lib/api/stats'
|
import { PerformanceStats as Stats, PerformanceByPageStat, getPerformanceByPage } from '@/lib/api/stats'
|
||||||
import Select from '@/components/ui/Select'
|
import Select from '@/components/ui/Select'
|
||||||
|
|
||||||
@@ -43,6 +44,7 @@ export default function PerformanceStats({ stats, performanceByPage, siteId, sta
|
|||||||
const [sortBy, setSortBy] = useState<'lcp' | 'cls' | 'inp'>('lcp')
|
const [sortBy, setSortBy] = useState<'lcp' | 'cls' | 'inp'>('lcp')
|
||||||
const [overrideRows, setOverrideRows] = useState<PerformanceByPageStat[] | null>(null)
|
const [overrideRows, setOverrideRows] = useState<PerformanceByPageStat[] | null>(null)
|
||||||
const [loadingTable, setLoadingTable] = useState(false)
|
const [loadingTable, setLoadingTable] = useState(false)
|
||||||
|
const [worstPagesOpen, setWorstPagesOpen] = useState(false)
|
||||||
|
|
||||||
// * When props.performanceByPage changes (e.g. date range), clear override so we use dashboard data
|
// * When props.performanceByPage changes (e.g. date range), clear override so we use dashboard data
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -111,13 +113,24 @@ export default function PerformanceStats({ stats, performanceByPage, siteId, sta
|
|||||||
* Averages calculated from real user sessions. Lower is better.
|
* Averages calculated from real user sessions. Lower is better.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* * Performance by page (worst first) */}
|
{/* * Performance by page (worst first) – collapsed by default */}
|
||||||
<div className="mt-6 pt-6 border-t border-neutral-200 dark:border-neutral-800">
|
<div className="mt-6 pt-6 border-t border-neutral-200 dark:border-neutral-800">
|
||||||
<div className="flex items-center justify-between gap-4 mb-3">
|
<div className="flex items-center justify-between gap-4 mb-3">
|
||||||
<h4 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
<button
|
||||||
Worst pages by metric
|
type="button"
|
||||||
</h4>
|
onClick={() => setWorstPagesOpen((o) => !o)}
|
||||||
{canRefetch && (
|
className="flex items-center gap-2 text-left rounded cursor-pointer hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-neutral-400 dark:focus:ring-neutral-500 focus:ring-offset-2 dark:focus:ring-offset-neutral-900"
|
||||||
|
aria-expanded={worstPagesOpen}
|
||||||
|
>
|
||||||
|
<ChevronDownIcon
|
||||||
|
className={`w-4 h-4 shrink-0 text-neutral-500 transition-transform ${worstPagesOpen ? '' : '-rotate-90'}`}
|
||||||
|
aria-hidden
|
||||||
|
/>
|
||||||
|
<span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
||||||
|
Worst pages by metric
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
{worstPagesOpen && canRefetch && (
|
||||||
<Select
|
<Select
|
||||||
value={sortBy}
|
value={sortBy}
|
||||||
onChange={handleSortChange}
|
onChange={handleSortChange}
|
||||||
@@ -132,45 +145,47 @@ export default function PerformanceStats({ stats, performanceByPage, siteId, sta
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{loadingTable ? (
|
{worstPagesOpen && (
|
||||||
<div className="py-8 text-center text-neutral-500 text-sm">Loading…</div>
|
loadingTable ? (
|
||||||
) : rows.length === 0 ? (
|
<div className="py-8 text-center text-neutral-500 text-sm">Loading…</div>
|
||||||
<div className="py-6 text-center text-neutral-500 text-sm">
|
) : rows.length === 0 ? (
|
||||||
No per-page metrics yet. Data appears as visitors are tracked with performance insights enabled.
|
<div className="py-6 text-center text-neutral-500 text-sm">
|
||||||
</div>
|
No per-page metrics yet. Data appears as visitors are tracked with performance insights enabled.
|
||||||
) : (
|
</div>
|
||||||
<div className="overflow-x-auto -mx-1">
|
) : (
|
||||||
<table className="w-full text-sm">
|
<div className="overflow-x-auto -mx-1">
|
||||||
<thead>
|
<table className="w-full text-sm">
|
||||||
<tr className="border-b border-neutral-200 dark:border-neutral-700">
|
<thead>
|
||||||
<th className="text-left py-2 px-2 font-medium text-neutral-600 dark:text-neutral-400">Path</th>
|
<tr className="border-b border-neutral-200 dark:border-neutral-700">
|
||||||
<th className="text-right py-2 px-2 font-medium text-neutral-600 dark:text-neutral-400">Samples</th>
|
<th className="text-left py-2 px-2 font-medium text-neutral-600 dark:text-neutral-400">Path</th>
|
||||||
<th className="text-right py-2 px-2 font-medium text-neutral-600 dark:text-neutral-400">LCP</th>
|
<th className="text-right py-2 px-2 font-medium text-neutral-600 dark:text-neutral-400">Samples</th>
|
||||||
<th className="text-right py-2 px-2 font-medium text-neutral-600 dark:text-neutral-400">CLS</th>
|
<th className="text-right py-2 px-2 font-medium text-neutral-600 dark:text-neutral-400">LCP</th>
|
||||||
<th className="text-right py-2 px-2 font-medium text-neutral-600 dark:text-neutral-400">INP</th>
|
<th className="text-right py-2 px-2 font-medium text-neutral-600 dark:text-neutral-400">CLS</th>
|
||||||
</tr>
|
<th className="text-right py-2 px-2 font-medium text-neutral-600 dark:text-neutral-400">INP</th>
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{rows.map((r) => (
|
|
||||||
<tr key={r.path} className="border-b border-neutral-100 dark:border-neutral-800/80">
|
|
||||||
<td className="py-2 px-2 text-neutral-900 dark:text-white font-mono truncate max-w-[200px]" title={r.path}>
|
|
||||||
{r.path || '/'}
|
|
||||||
</td>
|
|
||||||
<td className="py-2 px-2 text-right text-neutral-600 dark:text-neutral-400">{r.samples}</td>
|
|
||||||
<td className={`py-2 px-2 text-right font-mono ${getCellClass('lcp', r.lcp)}`}>
|
|
||||||
{formatMetric('lcp', r.lcp)}
|
|
||||||
</td>
|
|
||||||
<td className={`py-2 px-2 text-right font-mono ${getCellClass('cls', r.cls)}`}>
|
|
||||||
{formatMetric('cls', r.cls)}
|
|
||||||
</td>
|
|
||||||
<td className={`py-2 px-2 text-right font-mono ${getCellClass('inp', r.inp)}`}>
|
|
||||||
{formatMetric('inp', r.inp)}
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
</thead>
|
||||||
</tbody>
|
<tbody>
|
||||||
</table>
|
{rows.map((r) => (
|
||||||
</div>
|
<tr key={r.path} className="border-b border-neutral-100 dark:border-neutral-800/80">
|
||||||
|
<td className="py-2 px-2 text-neutral-900 dark:text-white font-mono truncate max-w-[200px]" title={r.path}>
|
||||||
|
{r.path || '/'}
|
||||||
|
</td>
|
||||||
|
<td className="py-2 px-2 text-right text-neutral-600 dark:text-neutral-400">{r.samples}</td>
|
||||||
|
<td className={`py-2 px-2 text-right font-mono ${getCellClass('lcp', r.lcp)}`}>
|
||||||
|
{formatMetric('lcp', r.lcp)}
|
||||||
|
</td>
|
||||||
|
<td className={`py-2 px-2 text-right font-mono ${getCellClass('cls', r.cls)}`}>
|
||||||
|
{formatMetric('cls', r.cls)}
|
||||||
|
</td>
|
||||||
|
<td className={`py-2 px-2 text-right font-mono ${getCellClass('inp', r.inp)}`}>
|
||||||
|
{formatMetric('inp', r.inp)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user