Data

Delta

How a value moved against the one before it: an arrow, a sign and the change, with the direction in words for screen readers. Color only says whether that is good news, so spending going up can be red. A percentage needs a positive base: from zero or below it shows the difference in value. A first value reads new, and a missing one is a dash with the reason in a Tooltip.

view .md

Preview

percent

+20%+20%−20%0%

amount and from zero

−$25.80+$50.00

new and no data (hover the dash)

new

Installation

terminal

bash

npx @entrepta/cli@latest add delta

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

delta.tsx

tsx

import { Delta } from "@/components/entrepta/delta"

<Delta current={124000} previous={110000} intent="increase-is-bad" />  // ↗ +12.7%, red
<Delta current={5000} previous={0} currency="USD" />                      // ↗ +$50.00
<Delta current={null} previous={100} reason="August has not synced" />   // —
<Delta current={958990} previous={812000} variant="pill" />             // in a tinted pill

Props

Prop	Type	Default	Description
current, previous	number \| null	-	Minor units for money
format	"percent" \| "amount" \| "number"	"percent"	The change as a share, in money, or as a plain number
intent	"increase-is-good" \| "increase-is-bad" \| "neutral"	"increase-is-good"	Which way is good news
currency, locale	string	-	Fall back to the FormatProvider's
reason	string	-	Why there is nothing to compare
size	"sm" \| "md"	"md"	10px or 12px
variant	"text" \| "pill"	"text"	A pill sits on a soft tint of its tone, for a Metric or a tile
labels	{ up?, down?, flat?, new?, none? }	-	Every word
compareValues(current, previous)	{ state, difference, ratio }	-	The same comparison as data