spb/datacenterindex

1import type { DashboardStats } from "@dci/core";2import { Metric, MetricCell, MetricRow } from "@/components/ui/metric";3import { fmtInt, fmtPct, splitMw } from "@/lib/format";45function MwMetric({ mw, label, note, loading }: { mw: number | null | undefined; label: string; note?: string; loading?: boolean }) {6  const s = splitMw(mw);7  return <Metric value={s?.value ?? "—"} unit={s?.unit ?? "MW"} label={label} note={note} loading={loading} />;8}910export function DashboardMetrics({ stats, loading }: { stats: DashboardStats | null; loading?: boolean }) {11  const s = stats;12  const coverage = s ? fmtPct(s.mwCoverage) : null;13  return (14    <MetricRow cols={7}>15      <MetricCell>16        <Metric value={s ? fmtInt(s.facilities) : "—"} label="Indexed facilities" loading={loading} />17      </MetricCell>18      <MetricCell>19        <MwMetric mw={s?.knownOperationalMw} label="Operational (known)" note={coverage ? `MW known for ${coverage} of facilities` : undefined} loading={loading} />20      </MetricCell>21      <MetricCell>22        <MwMetric mw={s?.constructionMw} label="Under construction" loading={loading} />23      </MetricCell>24      <MetricCell>25        <MwMetric mw={s?.plannedMw} label="Planned / announced" loading={loading} />26      </MetricCell>27      <MetricCell>28        <Metric value={s ? fmtInt(s.countries) : "—"} label="Countries" loading={loading} />29      </MetricCell>30      <MetricCell>31        <Metric value={s ? fmtInt(s.operators) : "—"} label="Operators" loading={loading} />32      </MetricCell>33      <MetricCell>34        <Metric value={s ? fmtInt(s.events24h) : "—"} label="Updates · 24 h" note={s ? `${fmtInt(s.events7d)} in 7 days` : undefined} loading={loading} />35      </MetricCell>36    </MetricRow>37  );38}39