Date Range Compare

A metric against the same metric last period, with the basis named. "+18%" is meaningless until you know against what — and against a partial period it is meaningless full stop.

src/components/ui/date-range-compare.tsx

About

From the component's own source, where it was written.

A metric across two periods, with the comparison made explicit.

The comparison basis is named, always. "+12%" against what — the previous period, or the same period last year? Those routinely disagree in sign for anything seasonal, and a delta with no stated basis is not a fact.

A partial current period is flagged. Comparing four days of this week against seven of last week produces a catastrophic-looking drop that is purely an artefact, and it is the most common misreading in any analytics dashboard.

Install

npx astralyx-ui add date-range-compare

Usage

import { DateRangeCompare } from '@/components/ui/date-range-compare'

<DateRangeCompare label="Revenue" value={82_400} previous={71_900} basis="previous" />

Composer

Change the props and the source below follows.

Revenue

US$82,400.00

14.6%vs previous period(US$71,900.00)

1–30 August

Props

basis

format

goodDirection

partial periodsparkline

tsx

<DateRangeCompare
  label="Revenue"
  value={82400}
  previous={71900}
  basis="previous"
  format="currency"
/>

Examples

Up and down against the previous period

tsx

<DateRangeCompare label="Revenue" value={128_400} previous={114_200} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`DateRangeCompare`

Extends Omit<ComponentProps<'div'>, 'children'>.

Prop	Type	Default	Description
label	ReactNode	required	—
value	number	required	The two figures. The delta and its percentage are computed here, so they cannot disagree with the numbers shown.
previous	number	—	The two figures. The delta and its percentage are computed here, so they cannot disagree with the numbers shown.
basis	ComparisonBasis	'previous'	'previous' \| 'year' \| 'custom' — spelled out in words beside the delta, never left implicit.
onBasisChange	(basis: ComparisonBasis) => void	—	—
format	'number' \| 'currency' \| 'percent' \| 'duration'	'number'	—
currency	string	'USD'	—
locale	string	'en-GB'	—
history	number[]	—	Optional sparkline. Shape often explains a delta that the single number cannot.
partial	boolean	false	Marks a range still in progress and mutes the delta. Nine days of a month against a full month is the most common dashboard falsehood there is.
goodDirection	'up' \| 'down' \| 'none'	'up'	Which way is good. Churn falling is green; use `none` for a metric with no better direction.
rangeLabel	ReactNode	—	—
noComparisonLabel	ReactNode	'No comparison'	Shown when no previous value is given.

Types

Type	Definition	Description
`ComparisonBasis`	'previous' \| 'year' \| 'custom'	A metric across two periods, with the comparison made explicit.