Stats Display

1"use client";
2import {
3  cn,
4  Card,
5  CardHeader,
6  CardTitle,
7  CardDescription,
8  CardContent,
9} from "./_adapter";
10import type {
11  StatsDisplayProps,
12  StatItem,
13  StatFormat,
14  StatDiff,
15} from "./schema";
16import { Sparkline } from "./sparkline";
17 
18interface FormattedValueProps {
19  value: string | number;
20  format?: StatFormat;
21  locale?: string;
22}
23 
24function FormattedValue({ value, format, locale }: FormattedValueProps) {
25  if (typeof value === "string" || !format) {
26    return <span className="font-light tabular-nums">{String(value)}</span>;
27  }
28 
29  switch (format.kind) {
30    case "number": {
31      const decimals = format.decimals ?? 0;
32      if (format.compact) {
33        const parts = new Intl.NumberFormat(locale, {
34          minimumFractionDigits: decimals,
35          maximumFractionDigits: decimals,
36          notation: "compact",
37        }).formatToParts(value);
38        const fullNumber = new Intl.NumberFormat(locale).format(value);
39        return (
40          <span className="font-light tabular-nums" aria-label={fullNumber}>
41            {parts.map((part, i) =>
42              part.type === "compact" ? (
43                <span
44                  key={i}
45                  className="ml-0.5 text-[0.65em] opacity-80"
46                  aria-hidden="true"
47                >
48                  {part.value}
49                </span>
50              ) : (
51                <span key={i}>{part.value}</span>
52              ),
53            )}
54          </span>
55        );
56      }
57      const formatted = new Intl.NumberFormat(locale, {
58        minimumFractionDigits: decimals,
59        maximumFractionDigits: decimals,
60      }).format(value);
61      return <span className="font-light tabular-nums">{formatted}</span>;
62    }
63    case "currency": {
64      const currency = format.currency;
65      const decimals = format.decimals ?? 2;
66      const formatted = new Intl.NumberFormat(locale, {
67        style: "currency",
68        currency,
69        minimumFractionDigits: decimals,
70        maximumFractionDigits: decimals,
71      }).format(value);
72      const spokenValue = new Intl.NumberFormat(locale, {
73        style: "currency",
74        currency,
75        currencyDisplay: "name",
76        minimumFractionDigits: decimals,
77        maximumFractionDigits: decimals,
78      }).format(value);
79      return (
80        <span className="font-light tabular-nums" aria-label={spokenValue}>
81          {formatted}
82        </span>
83      );
84    }
85    case "percent": {
86      const decimals = format.decimals ?? 2;
87// … truncated