52906344cf
- ScoreGauge SVG component with color-coded circular arcs - Full page: disabled state, score overview, CWV metrics, trend chart - Diagnostics accordion with opportunities/diagnostics/passed groups - Mobile/desktop strategy toggle, manual check trigger - Loading skeleton, frequency selector
72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
'use client'
|
|
|
|
interface ScoreGaugeProps {
|
|
score: number | null
|
|
label: string
|
|
}
|
|
|
|
const RADIUS = 44
|
|
const CIRCUMFERENCE = 2 * Math.PI * RADIUS
|
|
|
|
function getColor(score: number): string {
|
|
if (score >= 90) return '#0cce6b'
|
|
if (score >= 50) return '#ffa400'
|
|
return '#ff4e42'
|
|
}
|
|
|
|
export default function ScoreGauge({ score, label }: ScoreGaugeProps) {
|
|
const hasScore = score !== null && score !== undefined
|
|
const displayScore = hasScore ? Math.round(score) : null
|
|
const offset = hasScore ? CIRCUMFERENCE * (1 - score / 100) : CIRCUMFERENCE
|
|
const color = hasScore ? getColor(score) : '#6b7280'
|
|
|
|
return (
|
|
<div className="flex flex-col items-center gap-2">
|
|
<div className="relative w-[120px] h-[120px]">
|
|
<svg
|
|
className="w-full h-full -rotate-90"
|
|
viewBox="0 0 100 100"
|
|
>
|
|
{/* Track */}
|
|
<circle
|
|
cx="50"
|
|
cy="50"
|
|
r={RADIUS}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
className="text-neutral-200 dark:text-neutral-700"
|
|
strokeWidth="8"
|
|
/>
|
|
{/* Filled arc */}
|
|
<circle
|
|
cx="50"
|
|
cy="50"
|
|
r={RADIUS}
|
|
fill="none"
|
|
stroke={color}
|
|
strokeWidth="8"
|
|
strokeLinecap="round"
|
|
strokeDasharray={CIRCUMFERENCE}
|
|
strokeDashoffset={offset}
|
|
style={{ transition: 'stroke-dashoffset 0.6s ease' }}
|
|
/>
|
|
</svg>
|
|
{/* Score text */}
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<span
|
|
className="text-2xl font-bold"
|
|
style={{ color: hasScore ? color : undefined }}
|
|
>
|
|
{displayScore !== null ? displayScore : (
|
|
<span className="text-neutral-400 dark:text-neutral-500">--</span>
|
|
)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<span className="text-sm font-medium text-neutral-600 dark:text-neutral-400">
|
|
{label}
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|