MetricReadout
Production：src/components/AssetPrediction/source/MetricReadout/MetricReadout.tsx
Installation
import { MetricReadout } from "@/components/product/metric-readout/metric-readout";Overview
擺在圖表旁邊或下方的一排數字，把圖只能暗示的事情用文字講明白。 柱狀圖回答得了「哪一根最高」，回答不了「50% 區間在哪」或「中心點跟今早比移動了多少」—— 所以資產 dashboard 每一張分析卡都是「圖 + 同一種形狀的四格 readout」。
極性是 opt-in 的。只有真的有漲跌讀法的值（delta）才給 trend。 區間、價格、次數一律中性 —— 把一個區間標成綠色只因為它高於 spot， 等於替資料做了它沒做的判斷。
數值一律走 font-number + tabular-nums， 並帶 data-kind="numeric"（T4 tier-1）。
Interactive Demo
Prediction-market consensus 卡的實際 readout
Highest-probability range
$118k–120k
50% probability range
$116k–122k
80% probability range
$112k–127k
Center vs 09:00
+0.4%
Volume profile 卡的實際 readout（全中性，無極性）
Volume below spot
62%
70% value area
$115k–121k
HVN resistance
$121,400
HVN support
$114,800
Static State Matrix
極性 — 中性 / up / down
中性（預設）
$118,400
up
+2.4%
down
−1.8%
項目數 — 1 / 2 / 3 / 4（auto-fit，欄數隨容器變）
Highest-probability range
$118k–120k
Highest-probability range
$118k–120k
50% probability range
$116k–122k
Highest-probability range
$118k–120k
50% probability range
$116k–122k
80% probability range
$112k–127k
Highest-probability range
$118k–120k
50% probability range
$116k–122k
80% probability range
$112k–127k
Center vs 09:00
+0.4%
窄容器 — auto-fit 掉成單欄
Highest-probability range
$118k–120k
50% probability range
$116k–122k
80% probability range
$112k–127k
Center vs 09:00
+0.4%
Edge case — 過長的值（截斷不換行）與過長的標籤（換行）
極長數值
$1,184,002,913,447.99
極長的指標標籤會在這一格裡換行而不撐開欄寬
62%
值刻意 truncate 不換行 —— 數字換行會被誤讀成兩個數字。標籤可以換行。
唯讀顯示層，無 hover / pressed / focus。若之後某一格要能點開來源，才需要補互動 state。
Implementation Notes
來源：../opinion-labs-archive/prototypes/assets-forecasting/btc-dashboard-spike-v1.html 的 .subdata / .kv / .kv .k / .kv .v。
已知偏離
- 圓角：稿子 10px，改用
rounded-lg（12px）。 10 不在 radius token 級數（md=8 / lg=12 / xl=16）上。 - 標籤行高：稿子 15px，改用
text-bodyS（12/16）。差 1px。