Coverage Matrix

Installation & usage

npm i @youj/react

For an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.

Use a coverage matrix when the question is "where are the gaps": detection rules by tactic and source, features by platform, tests by module and browser, translations by page and language. A cell's fill is how deep the coverage goes, so thin spots read as well as empty ones. For who may do what, use a Level Matrix; for one value over a calendar, a Calendar Heatmap. The Coverage grid card is built on it.

import { CoverageMatrix } from '@youj/react'

<CoverageMatrix
  label="Detection coverage"
  columns={[
    { id: 'identity', label: 'Identity', tone: 'chart-3' },
    { id: 'network', label: 'Network', tone: 'chart-2' },
  ]}
  rows={[
    { id: 'access', label: 'Initial access', values: [4, 2] },
    { id: 'lateral', label: 'Lateral movement', values: [1, 0] },
  ]}
  defaultValue="lateral"
  formatValue={(n) => `${n} rules`}
  noneLabel="No rules"
/>

Each row gives one value per column, in the order of columns; 0 or null is no coverage and draws the hatch. A cell fills from the bottom by its value out of max (by default the largest value, one scale for every cell), never less than a sliver when it has any. Columns take the chart colors in order unless they set a tone. The selected row is value/defaultValue/onValueChange; in it the gaps take the danger tone, so it's the row your suggestion or action is about. formatValue, noneLabel and depthLabel word the cells and the key; legend={false} drops the key. No rows or columns shows the empty state.

Reference

Propsrows, columns, max, value, formatValue, noneLabel…

Props

CoverageMatrix props
Prop	Type	Default
`rows`Required	`readonly CoverageMatrixRow[]`	–
`columns`Required	`readonly CoverageMatrixColumn[]`	–
`max`	`number` The value of a full cell. Default: the largest value.	–
`value`	`string \| null` The selected row's id, controlled; `null` for none.	–
`defaultValue`	`string \| null` The row selected at first. default null	`null`
`onValueChange`	`(id: string) => void` Called with the row's id when a row is selected.	–
`formatValue`	`(value: number) => string` Formats a covered cell's value in its tooltip and spoken name: "3 rules". Default: the locale's number format.	–
`noneLabel`	`string` What a cell with nothing says, and the key's name for the hatch. Default: the labels' "None".	–
`depthLabel`	`string` The key's name for a filled cell. Default: the labels' "Fill shows depth".	–
`legend`	`boolean` The key under the grid. default true	`true`
`locale`	`string` Default: the YoujProvider locale.	–
`label`	`string` Accessible name of the grid. Default: the labels' "Coverage matrix".	–
`config`	`Readonly<Record<string, { color?: string }>>` A ChartConfig shared with your other charts: a column whose id is a key takes its color, so one series matches across chart types.	–
Other props pass through: extends `ComponentProps<'div'>`.

StylingParts and data attributes

MotionReveal, new values · reduced motion

Motion

Motion tokens
Moment	Tokens	Value
Revealthe fills rise from the bottom of their cells, row after row, when a third of the grid scrolls into view	`duration.slowease.emphasized` 340ms · cubic-bezier(0.6, 0, 0.1, 1)	340mscubic-bezier(0.6, 0, 0.1, 1)
New valuesa fill eases to its new depth	`duration.slowease.emphasized` 340ms · cubic-bezier(0.6, 0, 0.1, 1)	340mscubic-bezier(0.6, 0, 0.1, 1)
Selecting a rowthe row band and its gaps change color	`duration.fastease.standard` 140ms · cubic-bezier(0.2, 0, 0, 1)	140mscubic-bezier(0.2, 0, 0, 1)

Reduced motion

Drawn in place; changes land at once.

Reduced motion

The fills are drawn in place, and new values land at once.

AccessibilityKeyboard, focus, screen readers