Stat

A row of labeled numbers that summarizes what a panel shows.

import { Stat } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function StatBasic() {
  return (
    <Preview>
      <Stat.Group>
        <Stat.Root>
          <Stat.Label>Label 1</Stat.Label>
          <Stat.Value>120</Stat.Value>
        </Stat.Root>
        <Stat.Root>
          <Stat.Label>Label 2</Stat.Label>
          <Stat.Value>48</Stat.Value>
        </Stat.Root>
      </Stat.Group>
    </Preview>
  );
}

A stat is a label followed by its value. Put the stats of one panel in a Group; it wraps to the next line when space runs out.
Keep Label short and Value exact.
Use stats for a compact summary inside a panel, such as the details of a selected span. On an entity page, metrics go in its sidebar as Property rows. Use Metric for tiles that pick what a chart shows.

Deltas

import { Stat } from "@openperf/deft";

import { Preview } from "../../src/Preview";

const TONES = ["neutral", "success", "warning", "danger"] as const;

export default function StatDeltas() {
  return (
    <Preview>
      <Stat.Group>
        {TONES.map((tone) => (
          <Stat.Root key={tone}>
            <Stat.Label className="capitalize">{tone}</Stat.Label>
            <Stat.Value>
              120
              <Stat.Delta tone={tone}>+12</Stat.Delta>
            </Stat.Value>
          </Stat.Root>
        ))}
      </Stat.Group>
    </Preview>
  );
}

Delta compares the value with the previous period and sits inside Value. Its tone follows the health of the metric, not the direction of the change: warning when it got worse, danger when it is past its limit, success when it got better, neutral otherwise. Metric tiles and cards show their change with the same Delta.

Notes

import { Stat } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function StatNotes() {
  return (
    <Preview>
      <Stat.Group>
        <Stat.Root>
          <Stat.Label>Label</Stat.Label>
          <Stat.Value>
            120
            <Stat.Note>Note</Stat.Note>
          </Stat.Value>
        </Stat.Root>
      </Stat.Group>
    </Preview>
  );
}

Put context such as a sample size or a secondary percentile in a Note inside the value.

API

PropType

tone?"neutral" | "success" | "warning" | "danger"

On Delta.

Type"neutral" | "success" | "warning" | "danger"

Default"neutral"

Parts: Root, Delta, Group, Label, Note, Value. Group renders a dl, Label a dt and Value a dd; other props go to the native element.