StatCard() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Auth/Overview/OverviewMetrics.tsx lines 49–101

const StatCard = ({
  title,
  current,
  previous,
  loading,
  suffix = '',
  invert = false,
  href,
  tooltip,
}: {
  title: string
  current: number
  previous: number
  loading: boolean
  suffix?: string
  invert?: boolean
  href?: string
  tooltip?: string
}) => {
  const router = useRouter()
  const formattedCurrent =
    suffix === 'ms'
      ? current.toFixed(2)
      : suffix === '%'
        ? current.toFixed(1)
        : Math.round(current).toLocaleString()
  // const signChar = previous > 0 ? '+' : previous < 0 ? '-' : ''

  const actions = [
    {
      label: 'Go to Auth Report',
      icon: <ExternalLink size={12} />,
      onClick: href ? () => router.push(href) : undefined,
    },
  ]

  return (
    <Chart isLoading={loading}>
      <ChartCard>
        <ChartHeader align="start">
          <ChartMetric
            className="pb-4"
            label={title}
            tooltip={tooltip}
            diffValue={`${previous.toFixed(1)}%`}
            value={`${formattedCurrent}${suffix}`}
          />
          <ChartActions actions={actions} />
        </ChartHeader>
      </ChartCard>
    </Chart>
  )
}