On this page

Data & status

Sparkline released

One series drawn small where its values already stand: a line, bars or a band.

Import@pacit/components/sparkline
Selectorpct-sparkline

No APG pattern applies, and none is invented — the reasoning is under Accessibility ↓

Room	Last 8 h	kWh
Hall		1.7
Attic		0.8
Kitchen		0.9

import { Component } from '@angular/core';
import { PctSparkline } from '@pacit/components/sparkline';

const rooms = [
  {
    id: 'hall',
    name: 'Hall',
    hours: [1.2, 1.1, 1.3, 1.6, 2.2, 2, 1.8, 1.7],
  },
  {
    id: 'attic',
    name: 'Attic',
    hours: [0.4, 0.5, null, null, 0.9, 1.1, 1, 0.8],
  },
  {
    id: 'kitchen',
    name: 'Kitchen',
    hours: [0.6, 0.6, 0.7, 2.4, 2.9, 1.2, 0.8, 0.9],
  },
];

/**
 * Eight hours of each room, beside its last reading
 *
 * Each picture is named by its row's header and described by its lowest, highest and last
 * value, so a reader walking the table hears what a sighted user sees. The attic's sensor was
 * off for two hours: the line breaks there instead of drawing a value nobody read.
 */
@Component({
  selector: 'demo-sparkline',
  imports: [PctSparkline],
  styles: `
    table {
      border-collapse: collapse;
    }
    th,
    td {
      padding-block: 6px;
      padding-inline: 0 16px;
      text-align: start;
    }
    td:last-child {
      padding-inline-end: 0;
      text-align: end;
      font-variant-numeric: tabular-nums;
    }
  `,
  template: `
    <table>
      <thead>
        <tr>
          <th scope="col">Room</th>
          <th scope="col">Last 8 h</th>
          <th scope="col">kWh</th>
        </tr>
      </thead>
      <tbody>
        @for (room of rooms; track room.id) {
          <tr>
            <th scope="row" [id]="'demo-spark-' + room.id">{{ room.name }}</th>
            <td>
              <pct-sparkline
                [data]="room.hours"
                unit="kWh"
                locale="en-GB"
                area
                [ariaLabelledby]="'demo-spark-' + room.id"
              />
            </td>
            <td>{{ room.hours[room.hours.length - 1] }}</td>
          </tr>
        }
      </tbody>
    </table>
  `,
})
export class SparklineDemo {
  protected readonly rooms = rooms;
}

sparkline.demo.ts — the same file runs here and is highlighted under Code

Start here

Usage

One import per component, and the shortest possible use — the package itself is installed once, on the start page.

Import this component

import { PctSparkline } from '@pacit/components/sparkline';

Exported	What it is
`PctSparkValue`typeunreleased`keyof T \| ((row: T, index: number) => number \| null \| undefined)`	What a sparkline reads off a row: a key of the row holding a number, or a function of the row and its index; unset, the rows are the numbers.
`PctSparkline`componentunreleased`pct-sparkline`	A sparkline: one series drawn small, for a table's cell or a card — a line, bars or a band of on and off, with no axes, no cursor and no legend (0117).

<th scope="row" id="hall">Hall</th>
<td>
  <pct-sparkline [data]="hours()" unit="kWh" [area]="true" ariaLabelledby="hall" />
</td>

Examples

Every state, running

Each example is the component itself, not a screenshot. Open the code under any of them.

A balance as bars, a heater as a band

Bars rise from nought, so a day the house gave back to the grid hangs below the line; the lowest and the highest day stand as dots. A band draws a state that is on or off — a value of a half or more is on — and says the last one in words.

Balance, last 7 days

Heater, last 10 hours

API

What it reads, and what it writes back

Read from the source at build time — the types, the defaults and the lines of documentation are the library's own.

unreleased marks 15 of them: on main, and not in @pacit/components@0.3.0 — the next release names the version.

A sparkline: one series drawn small, for a table's cell or a card — a line, bars or a band of on and off, with no axes, no cursor and no legend (0117).

Inputs

Name	Type	What it does
`data`unreleaseddefault `[]`	`readonly T[]`	The rows, in order: each a value, or a row `value` reads one from.
`value`unreleaseddefault `null`	`PctSparkValue<T> \| null`	How to read a row's value: a key or a function; unset, each row is its value. Anything that is not a finite number is a gap.
`kind`unreleaseddefault `'line'`	`'line' \| 'bars' \| 'band'`	The drawing: a line, a bar per value, or a band with each slot on (a value of a half or more) or off.
`area`unreleaseddefault `false`	`boolean`	A line filled to the floor.
`last`unreleaseddefault `true`	`boolean`	The last value as a dot, on a line or bars.
`extremes`unreleaseddefault `false`	`boolean`	The lowest and the highest value as dots, on a line or bars.
`floor`unreleaseddefault `null`	`number \| null`	The value at the bottom of the box; unset, the lowest value — or nought for bars, which rise from it.
`ceiling`unreleaseddefault `null`	`number \| null`	The value at the top of the box; unset, the highest value — or nought for bars.
`color`unreleaseddefault `''`	`string`	The colour of the drawing, any CSS colour; unset, `sparkline-fg`.
`unit`unreleaseddefault `''`	`string`	The unit the description writes after each value; `''` is a plain number.
`locale`unreleaseddefault `''`	`string`	The locale of the description's numbers: the application's when unset.
`ariaLabel`unreleaseddefault `''`	`string`	The picture's name — what is drawn. Give this or `ariaLabelledby`.
`ariaLabelledby`unreleaseddefault `''`	`string`	As `ariaLabel`, for a name that already stands on the page — a row's header, say.

Outputs

None of its own. The native events — (click), (focus), the form's submit — are the platform's, and two-way models above carry the rest.

What it writes on the element

The hooks a stylesheet or a test can hold. Stable by contract — the parts inventory gate fails the build when one disappears.

Attribute	Bound to	Note
`class`	`pct-sparkline`
`role`	`img`
`aria-label`	`ariaLabel() \|\| null`
`aria-labelledby`	`ariaLabelledby() \|\| null`
`aria-describedby`	`ids.description`
`data-pct-kind`	`kind()`
`[style.--_pct-sparkline-color]`property	`color() \|\| null`

Styling

Parts to select, tokens to override

Two ways in, both stable. No class names to depend on.

Parts

In a test, PctSparklineHarness from @pacit/components/testing reads a part by the name below and a state by its attribute — the harness gate holds the names to the package.

Part	Selector	What it is
`area`	`[data-pct-part="area"]`	the fill under the line, down to the floor
`bar`	`[data-pct-part="bar"]`	a value as a bar, from nought held in the range
`dot`	`[data-pct-part="dot"]`	the last value, or the lowest or the highest
`line`	`[data-pct-part="line"]`	the series as a line, broken at each gap
`picture`	`[data-pct-part="picture"]`	the drawing, hidden: the host is the image a reader meets
`slot`	`[data-pct-part="slot"]`	a value of a band, filled when on

Tokens

Every value the component reads, with the light and the dark default. Override a token at any scope and it cascades like any custom property.

Token	Styles
`--pct-sparkline-area-alpha`20%	How much of the drawing's colour fills the area under the line.
`--pct-sparkline-band-bg{pct.surface-100}`#f1f5f9 · #1e293b	A band's off-slot: the surface's own shade.
`--pct-sparkline-dot-fg{pct.primary}`#2563eb · #60a5fa	The dots, unless the consumer gives a colour.
`--pct-sparkline-dot-size`0.4em	The width of the dots on the last value and on the extremes.
`--pct-sparkline-fg{pct.primary}`#2563eb · #60a5fa	The drawing: the line, the bars and a band's on-slots, unless the consumer gives a colour.
`--pct-sparkline-width`1.5px	The width of the line, kept whatever the box is stretched to.

Theming

A brand override in a few declarations. Scope it to a theme attribute, a page or one container — the component never notices.

[data-theme='brand'] {
  --pct-sparkline-fg: #0f766e;
  --pct-sparkline-width: 2px;
}

Room	Last 8 h	kWh
Hall		1.7
Attic		0.8
Kitchen		0.9

Accessibility

Measured, not assumed

Pattern: none — a sparkline is a picture, not a widget. The host carries the img role, named by the consumer and described by the words the picture holds. Named in the class JSDoc.

Keyboard

key	effect	test

Empty by design: a picture is no stop. A reader meets it in reading order, named by its row and described by its values; apps/sandbox-e2e/src/sparkline.spec.ts asks every element in it for a tab index and finds none.

Evidence

What the repository holds for this component

Read at build time from the tracked snapshots, not typed here.

97.73%mutation score215 of 220 mutants killed

4 × 3e2e cases × enginesplus the shared audits: axe, forced colors, preferences, size, hydration

5colour pairs measuredlight and dark, at every token build

0visual baselinesChromium, the sandbox's own pictures

37elements in the preview0 listeners · 1 render to settle · 7372 µs in jsdom, held exactly but for the clock

Why it is built this way

A chart in a word's space (0117): no axes, no cursor, no legend and no table, because the values stand in the row beside it. It is an entrypoint of its own and imports nothing of @pacit/components/chart, so a table of a hundred rows pays for a few kilobytes and not for a scene.

Known limitations

One series. Two lines in a cell are a chart, and pct-chart draws them with the axes that make two series readable.
No tooltip and no cursor. A value under the pointer is what the row beside it already says; a sparkline that took the pointer would be a target and a stop.
No decimation. A sparkline of thousands of values draws a path of thousands of points; a cell's worth of values is the case it is built for.
No screenshot baseline. The picture's geometry is measured in the e2e spec rather than compared with an image.

pacit

Usage

Every state, running

A balance as bars, a heater as a band

What it reads, and what it writes back

Inputs

Outputs

What it writes on the element

Parts to select, tokens to override

Parts

Tokens

Theming

Measured, not assumed

Keyboard

What is measured, and what is not yet

What the repository holds for this component

Why it is built this way

Known limitations