import * as React from "react"

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

type StatComparisonDirection = "up" | "down" | "flat"

interface StatComparisonProps extends React.HTMLAttributes<HTMLDivElement> {
  label: string
  current: number
  previous: number
  unit?: string
  comparisonLabel?: string
  valueFormatter?: (value: number) => string
}

function TrendArrow({
  direction,
  className,
}: {
  direction: StatComparisonDirection
  className?: string
}) {
  if (direction === "flat") {
    return (
      <svg
        className={className}
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
      >
        <path
          d="M3 8H13"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
        />
      </svg>
    )
  }

  return (
    <svg
      className={cn(direction === "down" ? "rotate-180" : "", className)}
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <path
        d="M8 3V13M8 3L12 7M8 3L4 7"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}

function StatComparison({
  label,
  current,
  previous,
  unit,
  comparisonLabel = "vs previous period",
  valueFormatter,
  className,
  ...props
}: StatComparisonProps) {
  const delta = current - previous
  const direction: StatComparisonDirection =
    delta > 0 ? "up" : delta < 0 ? "down" : "flat"
  const percentChange = previous !== 0 ? (delta / previous) * 100 : 0
  const trendClass = direction === "up" ? "text-primary" : "text-muted-foreground"
  const format = (value: number) =>
    valueFormatter ? valueFormatter(value) : value.toLocaleString()

  return (
    <div
      className={cn(
        "flex flex-col gap-3 rounded-xl border border-border bg-card p-4",
        className
      )}
      {...props}
    >
      <div className="flex items-start justify-between gap-4">
        <div className="space-y-1">
          <p className="text-sm text-muted-foreground">{label}</p>
          <p className="text-2xl font-semibold text-foreground tabular-nums">
            {format(current)}
            {unit ? <span className="text-sm text-muted-foreground"> {unit}</span> : null}
          </p>
        </div>
        <div className="text-right">
          <p className="text-xs text-muted-foreground">Previous</p>
          <p className="text-sm font-medium text-foreground tabular-nums">
            {format(previous)}
            {unit ? <span className="text-xs text-muted-foreground"> {unit}</span> : null}
          </p>
        </div>
      </div>
      <div className="flex items-center gap-2 text-xs">
        <span className={cn("inline-flex items-center gap-1 font-semibold", trendClass)}>
          <TrendArrow direction={direction} className="h-3 w-3" />
          {Math.abs(percentChange).toFixed(1)}%
        </span>
        <span className="text-muted-foreground">{comparisonLabel}</span>
      </div>
    </div>
  )
}

export { StatComparison }
export type { StatComparisonProps }
Stat Comparison

Dependencies

Files

Installation
