Weighted Metric Wall

KPI 磁磚牆，磁磚尺寸依數值權重自動計算，進場由大到小瀑布式浮現，hover 展開明細層。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

網格欄數columns

磁磚最大跨距maxSpan

列基準高度（px）rowHeight

磁磚間距（px）gap

浮現間隔（秒）stagger

0.08

<WeightedMetricWall />

安裝

npx shadcn@latest add https://webberui.com/r/weighted-metric-wall.json

或在 components.json 設定 registries 後，改用 @webberui/weighted-metric-wall 安裝。

安裝依賴後，從 registry JSON（/r/weighted-metric-wall.json 的 files[0].content）複製 weighted-metric-wall.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion lucide-react clsx tailwind-merge

使用

import { WeightedMetricWall } from "@/components/ui/weighted-metric-wall";

<WeightedMetricWall
  aria-label="本月營運指標"
  metrics={[
    {
      label: "月營收",
      value: "$128K",
      weight: 100,
      delta: 12.4,
      deltaSuffix: "%",
      detail: "營收創新高，主要來自年繳方案續訂。",
    },
    {
      label: "活躍用戶",
      value: "24,860",
      weight: 70,
      delta: 8.1,
      deltaSuffix: "%",
    },
    { label: "轉換率", value: "3.8%", weight: 40, delta: -0.6 },
  ]}
/>

每塊磁磚的跨欄／跨列尺寸會依 weight（未提供時嘗試由 value 推導數字）相對於最大值自動換算：數值越大版面越大。進場時磁磚由大到小依序浮現，hover 或鍵盤 focus 時會覆蓋展開 detail 明細層。

Props

WeightedMetricWall

Prop	型別	預設值	說明
`metrics`	`WeightedMetric[]`	—	指標資料；每塊磁磚尺寸依權重自動計算
`columns`	`number`	`4`	網格欄數（1–6）
`maxSpan`	`number`	`2`	單一磁磚最大跨欄／跨列數（版面上限）
`rowHeight`	`number`	`92`	每列基準高度（px）
`gap`	`number`	`12`	磁磚間距（px）
`delay`	`number`	`0`	進場前延遲（秒）
`stagger`	`number`	`0.08`	由大到小每階浮現的間隔（秒）
`once`	`boolean`	`true`	只在第一次進入視口時播放
`onMetricClick`	`(metric, index) => void`	—	點擊磁磚回呼；提供時磁磚以 button 語意呈現
`aria-label`	`string`	—	供輔助科技辨識整面牆的用途

WeightedMetric

欄位	型別	說明
`label`	`string`	指標名稱（磁磚主標）
`value`	`ReactNode`	主要數值；數字會自動加千分位
`weight`	`number`	決定版面大小的權重；省略時由 `value` 推導
`detail`	`ReactNode`	hover／focus 時展開的明細內容
`delta`	`number`	相對變化量：正=上升、負=下降、0=持平
`deltaSuffix`	`string`	delta 顯示後綴（如 `"%"`、`"pt"`）
`unit`	`ReactNode`	值下方的次要說明
`id`	`string`	唯一鍵；省略時退回以 `label` 當作 key
`className`	`string`	覆寫此磁磚的 class（例如加上強調色底）

細節

尺寸換算採 ceil((weight / 最大 weight) × maxSpan)，並限制在 1..min(maxSpan, columns)；磁磚為正方形跨距。
網格採 grid-auto-flow: dense，小磁磚會回填大磁磚留下的空隙，讓整面牆自動緊湊排列。
浮現順序依權重由大到小排名，delay 與 stagger 決定瀑布節奏，與 DOM 順序無關。
若牆會放在可捲動容器中，進場動畫以 whileInView 觸發，離開視口後可依 once 決定是否重播。

可及性

使用者系統開啟「減少動態效果」時，停用進場與明細層過渡，磁磚直接以最終狀態呈現、明細層即時切換。
每塊磁磚可鍵盤 focus，focus 與 hover 同樣會展開明細層；磁磚帶 aria-label，朗讀名稱、數值與趨勢。
趨勢箭頭圖示標記 aria-hidden，明細覆蓋層為視覺輔助（aria-hidden），避免與磁磚標籤重複朗讀。
提供 onMetricClick 時磁磚以 role="button" 呈現並支援 Enter／Space 觸發。

Weighted Metric Wall

On this page