差分DeltaBeta
Inline signed-change atom: a value with a directional arrow, a sign-driven tone, and a screen-reader (or visible) label — for gain/loss, variance (差異), and cash over/short (過不足). Fits inside a table cell, unlike the card-shaped Statistic.
プレビュー
状態とバリエーション
Delta が読む値は value ひとつで、そこから矢印・色・読み上げのラベルが決まります。見え方を変える口は3つです。format が数字の書き方、hideArrow が矢印の有無、showLabel が labels を画面に出すかどうかを決めます。
既定の書式（通貨ではない数）
format を渡さないときは、符号つきで桁区切りした数がそのまま出ます（+1,240 / −58）。会員数・在庫数・件数のように単位が通貨でない増減は、この既定のままで足ります。
+1,240増加-58減少0増減なし
矢印を落として表の列に置く
hideArrow を付けると矢印が消え、数字の頭がそろいます。金額の列に混ぜるときはこちらです。向きは色だけでなく labels が読み上げるので、矢印を落としても意味は残ります。
| 勘定科目 | 当月 | 前月差 |
|---|---|---|
| 売上高 | ￥4,820,000 | +￥312,000増加 |
| 仕入高 | ￥2,640,000 | -￥95,000減少 |
| 販売管理費 | ￥1,180,000 | ￥0増減なし |
大きさだけを出して、向きは言葉で言う
format は生の value を受け取るので、Math.abs を通せば符号を落として大きさだけを書けます。showLabel を足すと labels が画面にも出るので、向きは記号ではなく言葉で伝わります。読み上げは元から labels を読みます。
￥312,000増加￥95,000減少
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| value | number | - | The signed change. Its sign drives the arrow, tone and label. |
| format | (value: number) => React.ReactNode | - | Format the numeric value. Default: signed, grouped ja-JP (+1,000 / −930). Pass formatCurrency for ¥. |
| tones | Partial<Record<DeltaSign, DeltaTone>> | - | Tone per sign. Default { positive: "success", negative: "destructive", zero: "muted" }. Override where positive isn't "good" (cash over/short). |
| labels | Partial<Record<DeltaSign, React.ReactNode>> | - | Accessible (and optionally visible) label per sign, e.g. { positive: "過剰", negative: "不足", zero: "一致" }. Always announced — meaning never rides on colour alone. |
| showLabel | boolean | - | Render the sign label visibly after the value. Default false (screen-reader-only). |
| hideArrow | boolean | - | Hide the directional arrow. Default false. |
| className | string | - | Additional CSS class names. |
Usage
"use client";
import { Delta, formatCurrency } from "@gunjo/ui"
const yen = (v: number) => formatCurrency(v, { signed: true })
export function Example() {
return (
<>
{/* Gain/loss — default tones (positive = success, negative = destructive) */}
<Delta value={12500} format={yen} labels={{ positive: "増加", negative: "減少" }} />
{/* Cash over/short — positive isn't "good", so remap the tones */}
<Delta
value={-930}
format={yen}
tones={{ positive: "warning", negative: "destructive", zero: "success" }}
labels={{ positive: "過剰", negative: "不足", zero: "一致" }}
showLabel
/>
</>
)
}