File size: 1,811 Bytes
d491dc1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | import React from 'react';
/**
* Signature HyperFlow 4.0 SVG animated confidence arc gauge
*/
export default function ConfidenceArc({ confidence = 0.85, label = "Confidence", color = "#00D4AA", size = 110 }) {
const normalizedConfidence = Math.min(1.0, Math.max(0.0, confidence));
const radius = 38;
const circumference = 2 * Math.PI * radius;
const dashOffset = circumference * (1 - normalizedConfidence);
return (
<div className="flex flex-col items-center justify-center relative">
<svg viewBox="0 0 100 100" width={size} height={size}>
{/* Outer subtle glow track */}
<circle
cx="50"
cy="50"
r={radius}
fill="none"
stroke="rgba(255,255,255,0.06)"
strokeWidth="7"
/>
{/* Animated Confidence Arc */}
<circle
cx="50"
cy="50"
r={radius}
fill="none"
stroke={color}
strokeWidth="7"
strokeDasharray={circumference}
strokeDashoffset={dashOffset}
strokeLinecap="round"
transform="rotate(-90 50 50)"
style={{ transition: "stroke-dashoffset 0.8s ease-in-out" }}
/>
{/* Center Percentage */}
<text
x="50"
y="46"
textAnchor="middle"
fill="#FFFFFF"
fontSize="17"
fontWeight="bold"
fontFamily="JetBrains Mono, monospace"
>
{Math.round(normalizedConfidence * 100)}%
</text>
{/* Label */}
<text
x="50"
y="62"
textAnchor="middle"
fill="#8888A8"
fontSize="9"
fontFamily="Inter, sans-serif"
>
{label}
</text>
</svg>
</div>
);
}
|