"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

interface MetricRingProps extends React.HTMLAttributes<HTMLDivElement> {
  label: string
  value: number
  total?: number
  size?: number
  strokeWidth?: number
  showPercentage?: boolean
  valueLabel?: string
  helperText?: string
}

const MetricRing = React.forwardRef<HTMLDivElement, MetricRingProps>(
  (
    {
      label,
      value,
      total = 100,
      size = 140,
      strokeWidth = 12,
      showPercentage = true,
      valueLabel,
      helperText,
      className,
      ...props
    },
    ref
  ) => {
    const safeTotal = total > 0 ? total : 1
    const percent = Math.min(Math.max((value / safeTotal) * 100, 0), 100)
    const radius = (size - strokeWidth) / 2
    const circumference = 2 * Math.PI * radius
    const offset = circumference - (percent / 100) * circumference
    const displayValue =
      valueLabel ?? (showPercentage ? `${Math.round(percent)}%` : `${value}`)

    return (
      <div
        ref={ref}
        className={cn(
          "flex flex-col items-center gap-3 rounded-2xl border border-border bg-card p-6 text-center",
          className
        )}
        {...props}
      >
        <div
          className="relative flex items-center justify-center"
          style={{ width: size, height: size }}
          role="img"
          aria-label={`${label} ${displayValue}`}
        >
          <svg
            viewBox={`0 0 ${size} ${size}`}
            className="h-full w-full -rotate-90"
          >
            <circle
              className="text-muted-foreground"
              stroke="currentColor"
              strokeWidth={strokeWidth}
              fill="transparent"
              r={radius}
              cx={size / 2}
              cy={size / 2}
            />
            <circle
              className="text-primary"
              stroke="currentColor"
              strokeWidth={strokeWidth}
              fill="transparent"
              r={radius}
              cx={size / 2}
              cy={size / 2}
              strokeLinecap="round"
              strokeDasharray={circumference}
              strokeDashoffset={offset}
            />
          </svg>
          <div className="absolute flex flex-col items-center gap-1">
            <span className="text-2xl font-semibold text-foreground tabular-nums">
              {displayValue}
            </span>
            <span className="text-xs font-medium text-muted-foreground">
              {label}
            </span>
          </div>
        </div>
        {helperText ? (
          <p className="text-xs text-muted-foreground">{helperText}</p>
        ) : null}
      </div>
    )
  }
)

MetricRing.displayName = "MetricRing"

export { MetricRing }
export type { MetricRingProps }
Metric Ring

Dependencies

Files

Installation
