Chart Stat Flow

1"use client";
2 
3import NumberFlow from "@number-flow/react";
4import { type ReactNode, useEffect, useMemo, useState } from "react";
5import { cn } from "@/lib/utils";
6 
7/** Subset of `Intl.NumberFormatOptions` supported by NumberFlow */
8export interface ChartStatFlowFormat {
9  notation?: "standard" | "compact";
10  compactDisplay?: "short" | "long";
11  minimumFractionDigits?: number;
12  maximumFractionDigits?: number;
13  minimumIntegerDigits?: number;
14  minimumSignificantDigits?: number;
15  maximumSignificantDigits?: number;
16  style?: "decimal" | "percent" | "currency";
17  currency?: string;
18  currencyDisplay?: "symbol" | "narrowSymbol" | "code" | "name";
19  unit?: string;
20  unitDisplay?: "short" | "long" | "narrow";
21}
22 
23export const defaultChartStatFlowFormat: ChartStatFlowFormat = {
24  notation: "standard",
25  maximumFractionDigits: 0,
26};
27 
28function formatStatValue(
29  value: number,
30  formatOptions: ChartStatFlowFormat,
31  prefix?: string,
32  suffix?: string
33): string {
34  const formatted = new Intl.NumberFormat(undefined, formatOptions).format(
35    value
36  );
37  return `${prefix ?? ""}${formatted}${suffix ?? ""}`;
38}
39 
40function useNumberFlowElementReady(): boolean {
41  const [ready, setReady] = useState(
42    () =>
43      typeof customElements !== "undefined" &&
44      Boolean(customElements.get("number-flow-react"))
45  );
46 
47  useEffect(() => {
48    if (ready) {
49      return;
50    }
51    let cancelled = false;
52    customElements.whenDefined("number-flow-react").then(() => {
53      if (!cancelled) {
54        setReady(true);
55      }
56    });
57    return () => {
58      cancelled = true;
59    };
60  }, [ready]);
61 
62  return ready;
63}
64 
65export interface ChartStatFlowProps {
66  value: number;
67  label: string;
68  formatOptions?: ChartStatFlowFormat;
69  prefix?: string;
70  suffix?: string;
71  valueClassName?: string;
72  labelClassName?: string;
73  icon?: ReactNode;
74}
75 
76/**
77 * Shared value + label stack using NumberFlow (same layout as pie / ring centers).
78 * Parent should provide flex alignment and sizing when needed.
79 */
80export function ChartStatFlow({
81  value,
82  label,
83  formatOptions = defaultChartStatFlowFormat,
84  prefix,
85  suffix,
86  valueClassName = "text-2xl font-bold",
87  labelClassName = "text-xs",
88  icon,
89}: ChartStatFlowProps) {
90  const numberFlowReady = useNumberFlowElementReady();
91  const staticValue = useMemo(
92    () => formatStatValue(value, formatOptions, prefix, suffix),
93    [value, formatOptions, prefix, suffix]
94  );
95 
96  return (
97    <>
98      {icon ? (
99// … truncated