Sparkline

A trend without axes, always next to the number it explains.

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

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

export default function SparklineBasic() {
  return (
    <Preview>
      <span>12</span>
      <Sparkline.Root values={[2, 4, 3, 6, 5, 8, 12]} />
    </Preview>
  );
}

• Keep it beside the number it explains; it supports that number and never replaces it. It is hidden from screen readers.
• In rows, use the default sm size and the grey trend tone.
• The line runs from zero at the bottom to the largest value at the top. A null value is skipped: the line runs on to the next value.
• The line bends smoothly through every value without overshooting it, so peaks and dips stay where the data puts them. Set curve="linear" for straight segments.

Metric tiles

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

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

export default function SparklineMetricTiles() {
  return (
    <Preview stack={true}>
      <Sparkline.Root
        size="fill"
        tail={0.2}
        tone="muted"
        values={[40, 36, 48, 44, 32, 40, 52, 48, 60, 80, 100, 120]}
      />
    </Preview>
  );
}

size="fill" stretches the line to the width of its container, and tone="muted" draws it in a darker grey for the historical values. tail draws the end of the line in the accent colour, to point at current activity without implying a status.

API

Parts: Root. Other props go to the native svg.