CircularGauge() — ui Function Reference

Architecture documentation for the CircularGauge() function in vercel.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ CircularGauge() — ui Function Reference

Dependency Diagram

graph TD
  ebf0c670_d87e_7f0c_c32f_e4cf0f7b4442["CircularGauge()"]
  57afcab1_fc30_7f69_ecf5_50ea8da6ba44["vercel.tsx"]
  ebf0c670_d87e_7f0c_c32f_e4cf0f7b4442 -->|defined in| 57afcab1_fc30_7f69_ecf5_50ea8da6ba44
  style ebf0c670_d87e_7f0c_c32f_e4cf0f7b4442 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/blocks/vercel.tsx lines 516–561

function CircularGauge({ percentage }: { percentage: number }) {
  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)
  const circumference = 2 * Math.PI * 42.5
  const strokePercent = (normalizedPercentage / 100) * circumference

  return (
    <svg
      aria-hidden="true"
      fill="none"
      height="16"
      width="16"
      strokeWidth="2"
      viewBox="0 0 100 100"
      className="-rotate-90"
    >
      <circle
        cx="50"
        cy="50"
        r="42.5"
        strokeWidth="12"
        strokeDashoffset="0"
        strokeLinecap="round"
        strokeLinejoin="round"
        className="opacity-20"
        stroke="currentColor"
        style={{
          strokeDasharray: `${circumference} ${circumference}`,
        }}
      />
      <circle
        cx="50"
        cy="50"
        r="42.5"
        strokeWidth="12"
        strokeDashoffset="0"
        strokeLinecap="round"
        strokeLinejoin="round"
        stroke="currentColor"
        className="transition-all duration-300"
        style={{
          strokeDasharray: `${strokePercent} ${circumference}`,
        }}
      />
    </svg>
  )
}