ランキングLeaderboardExperimental

The ranking / leaderboard list: a PRE-ORDERED list of entities, each with a numbered rank chip, a label (+ sublabel), an optional value bar normalised against the max, and an optional Delta for period-over-period change. The caller orders the items (best-first for a top-N 売上/人気, worst-first for 'worst performers / 要対応' — 事故率の高い営業所, 赤字系統, 苦情多発), so rank = array position is an explicit caller decision; the component never re-sorts. The ranked-list primitive a BarChart and StatGroup can't be — BarChart is a chart with no rank/order semantics, StatGroup is an UNORDERED KPI cluster. For best/worst dashboards across sales, ops and safety. Use deltaTones={{positive:'destructive',negative:'success'}} for 'up is bad' rankings (事故率/コスト/苦情). items[] of {id,label,value,sublabel?,valueLabel?,fraction?,delta?,tone?,icon?,trailing?,onSelect?}. RSC-safe except the opt-in onSelect.

プレビュー

売上が多い順。前年比は上昇＝緑（良い）。行をクリックで選択。

Props

表は横にスクロールできます
プロパティ型初期値説明
itemsLeaderboardItem[]-事前に順序付けした行（ランク＝配列位置＋1）。コンポーネントは再ソートしない＝best-first/worst-first は呼び出し側の明示的な選択。
labelReactNode-ランキングのアクセシブル名。
showRankbooleantrue番号付きランクチップを表示。
showBarbooleantrue値のインラインバーを表示（max で正規化）。
maxnumber-バー正規化の最大値。既定＝最大 value。
formatValue(value, item) => ReactNode-値の整形。既定 toLocaleString。
formatDelta(delta) => ReactNode-Delta 数値の整形。
deltaTones{ positive?, negative?, zero? }-「上昇＝悪い」ランキング（事故率/コスト/苦情）は { positive: "destructive", negative: "success" }。既定は Delta（上昇＝緑）。
highlightTopnumber3上位 N のランクチップを強調（塗りつぶし）。
selectedIdstring | number-1行を強調（他は淡色化）。
LeaderboardItem.label / sublabelReactNode-ランク対象（系統/営業所/商品）＋副次行。
LeaderboardItem.value / valueLabelnumber / ReactNode-バーを駆動する数値＋整形済み表示（あれば優先）。
LeaderboardItem.fractionnumber-0–1 のバー充填率。省略時 value/max。
LeaderboardItem.deltanumber-前期比（Delta チップ）。
LeaderboardItem.tone"default" | "primary" | "info" | "success" | "warning" | "destructive" | "muted""primary"バーのトーン。
LeaderboardItem.icon / trailing / onSelectReactNode / ReactNode / () => void-先頭アイコン・右寄せ・選択可能化。

Usage

import { Leaderboard, type LeaderboardItem } from "@gunjo/ui"

// Caller pre-orders — rank = array position. worst-first for "要対応".
const routes: LeaderboardItem[] = [
  { id: "shibuya88", label: "渋88 系統", sublabel: "渋谷↔六本木",
    value: 3.4, delta: 0.9, tone: "destructive" },
  { id: "shuku51", label: "宿51 系統", value: 2.8, delta: 0.3, tone: "destructive" },
  { id: "to07", label: "都07 系統", value: 1.2, delta: -0.2, tone: "warning" },
]

// 事故率は「上昇＝悪い」→ Delta の色を反転
<Leaderboard
  items={routes}
  label="系統別 事故率ランキング"
  formatValue={(v) => `${v.toFixed(1)}件`}
  deltaTones={{ positive: "destructive", negative: "success" }}
/>

使用コンポーネント

DeltaBarChartStatGroup