ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

feat: add collapsible section for worst performance pages in PerformanceStats component

Browse Source
This commit is contained in:
Usman Baig
2026-01-19 18:04:49 +01:00
parent e42e2d9440
commit cb84b117ff
1 changed files with 58 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components/dashboard/PerformanceStats.tsx
View File

@@ -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
type="button"
onClick={() => setWorstPagesOpen((o) => !o)}
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 Worst pages by metric
</h4> </span>
{canRefetch && ( </button>
{worstPagesOpen && canRefetch && (
<Select <Select
value={sortBy} value={sortBy}
onChange={handleSortChange} onChange={handleSortChange}
@@ -132,7 +145,8 @@ export default function PerformanceStats({ stats, performanceByPage, siteId, sta
/> />
)} )}
</div> </div>
{loadingTable ? ( {worstPagesOpen && (
loadingTable ? (
<div className="py-8 text-center text-neutral-500 text-sm">Loading…</div> <div className="py-8 text-center text-neutral-500 text-sm">Loading…</div>
) : rows.length === 0 ? ( ) : rows.length === 0 ? (
<div className="py-6 text-center text-neutral-500 text-sm"> <div className="py-6 text-center text-neutral-500 text-sm">
@@ -171,6 +185,7 @@ export default function PerformanceStats({ stats, performanceByPage, siteId, sta
</tbody> </tbody>
</table> </table>
</div> </div>
)
)} )}
</div> </div>
</div> </div>