Delta

A Delta shows a signed change with an arrow. Its color says whether the change is good or bad.

Usage#

import { Delta } from "@clawscale/react";

<Delta value={4.2} />

Examples#

Basic#

Positive values point up and read as good, negative values point down and read as bad, and zero is flat and muted.

4.2%1.3%0.0%

patterns/delta/basic.tsx

import { Delta } from "@clawscale/react";

export default function DeltaBasic() {
  return (
    <>
      <Delta value={4.2} />
      <Delta value={-1.3} />
      <Delta value={0} />
    </>
  );
}

Good direction#

Set goodDirection="down" when a rise is bad, as for latency, cost or error rates.

p95 latency 6.4%Error rate 12.5%

patterns/delta/good-direction.tsx

import { Delta } from "@clawscale/react";

export default function DeltaGoodDirection() {
  return (
    <>
      <span>
        p95 latency <Delta value={6.4} goodDirection="down" />
      </span>
      <span>
        Error rate <Delta value={-12.5} goodDirection="down" />
      </span>
    </>
  );
}

Custom format#

format receives the absolute value and Delta adds the sign. Use it for absolute changes, such as rows, milliseconds or dollars. It is a function, so set it in a client component.

1,240 rows38 ms$212

patterns/delta/format.tsx

import { Delta } from "@clawscale/react";

const count = new Intl.NumberFormat("en-US");

export default function DeltaFormat() {
  return (
    <>
      <Delta value={1240} format={(value) => `${count.format(value)} rows`} />
      <Delta value={-38} format={(value) => `${value} ms`} goodDirection="down" />
      <Delta value={212} format={(value) => `$${count.format(value)}`} goodDirection="down" />
    </>
  );
}

Neutral#

neutral keeps muted text whatever the direction. Use it for changes that are neither good nor bad, such as traffic moving between regions.

Traffic share, eu-west-1 14.8%Traffic share, us-east-1 9.3%

patterns/delta/neutral.tsx

import { Delta } from "@clawscale/react";

export default function DeltaNeutral() {
  return (
    <>
      <span>
        Traffic share, eu-west-1 <Delta value={14.8} neutral />
      </span>
      <span>
        Traffic share, us-east-1 <Delta value={-9.3} neutral />
      </span>
    </>
  );
}

Hide icon#

hideIcon drops the arrow and shows a plus or minus sign instead. It saves space in narrow columns.

+4.2%-1.3%0.0%

patterns/delta/hide-icon.tsx

import { Delta } from "@clawscale/react";

export default function DeltaHideIcon() {
  return (
    <>
      <Delta value={4.2} hideIcon />
      <Delta value={-1.3} hideIcon />
      <Delta value={0} hideIcon />
    </>
  );
}

Table cells#

Delta is inline and uses tabular numbers, so it fits table cells. Right-align the column to line the values up.

Pipeline	Runtime	vs last week
orders-sync	4m 12s	-8.4%
billing-export	11m 03s	+12.9%
events-compact	2m 47s	0.0%
search-reindex	26m 30s	+3.2%

patterns/delta/table.tsx

import { ClawscaleClasses, Delta, HTMLTable } from "@clawscale/react";

const pipelines = [
  { name: "orders-sync", runtime: "4m 12s", change: -8.4 },
  { name: "billing-export", runtime: "11m 03s", change: 12.9 },
  { name: "events-compact", runtime: "2m 47s", change: 0 },
  { name: "search-reindex", runtime: "26m 30s", change: 3.2 },
];

export default function DeltaTable() {
  return (
    <HTMLTable compact>
      <thead>
        <tr>
          <th>Pipeline</th>
          <th style={{ textAlign: "right" }}>Runtime</th>
          <th style={{ textAlign: "right" }}>vs last week</th>
        </tr>
      </thead>
      <tbody>
        {pipelines.map((pipeline) => (
          <tr key={pipeline.name}>
            <td>{pipeline.name}</td>
            <td className={ClawscaleClasses.NUMERIC} style={{ textAlign: "right" }}>
              {pipeline.runtime}
            </td>
            <td style={{ textAlign: "right" }}>
              <Delta value={pipeline.change} goodDirection="down" />
            </td>
          </tr>
        ))}
      </tbody>
    </HTMLTable>
  );
}

Accessibility#

The arrow is hidden from screen readers, and the sign is read with the value, for example "+4.2%". Direction never depends on color: the arrow and the sign show it. Only the color says whether a change is good, so keep the metric name next to it.

Props interface#

Delta also accepts the HTML attributes of a span.

interface DeltaProps extends HTMLAttributes<HTMLSpanElement>@clawscale/react

Props	Description
`format`	`(absoluteValue: number) => ReactNode` = value => `${value.toFixed(1)}%` Formats the absolute value.
`goodDirection`	`"up" \| "down"` = `"up"` The direction that counts as good. Use "down" for costs, latency or error rates.
`hideIcon`	`boolean` Hide the arrow and show a plus or minus sign instead.
`neutral`	`boolean` Show muted text whatever the direction.
`value`required	`number` The change. Positive values point up, negative values point down.