Anomaly Chart

A metric against its expected range, with outliers marked. The band is the point — 400ms at 03:00 may be an incident while 400ms at peak is Tuesday.

src/components/ui/anomaly-chart.tsx

About

From the component's own source, where it was written.

A metric plotted against its expected range, with outliers marked.

The band is the point. A spike means nothing without knowing what normal looked like at that moment — 400ms at 03:00 may be an incident while 400ms at peak is Tuesday. Detection stays outside this component: it renders the expected range you give it and marks whatever falls outside, rather than inventing a threshold of its own.

Points are drawn in a second, unstretched layer. The plot is stretched to fit its container, and a circle inside that stretch would render as an ellipse.

Install

npx astralyx-ui add anomaly-chart

Usage

import { AnomalyChart } from '@/components/ui/anomaly-chart'

<AnomalyChart points={points} labels={hours} />

Composer

Change the props and the source below follows.

ObservedExpected range2 anomalies

Props

expected band

tsx

<AnomalyChart points={points} labels={hours} />

Examples

Latency with band

tsx

<AnomalyChart points={points} labels={hours} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`AnomalyChart`

Extends Omit<ComponentProps<'figure'>, 'height'>.

Prop	Type	Default	Description
color	string	'var(--blue)'	Any CSS colour.
points	AnomalyPoint[]	required	`{ value, expected?, label? }` where expected is a `[low, high]` pair for that moment.
height	number	160	—
bandColor	string	'var(--blue)'	Any CSS colour.
anomalyColor	string	'var(--destructive)'	Any CSS colour.
labels	string[]	—	—
observedLabel	ReactNode	'Observed'	Legend entries.
expectedLabel	ReactNode	'Expected range'	—

Types

`AnomalyPoint`

A metric plotted against its expected range, with outliers marked.

Field	Type	Description
value	number	—
expected?	[number, number]	Expected [low, high] at this moment.
label?	string	—

Behaviour

Topic	Detail	Description
detection	caller-owned	The component marks what falls outside the range you give it. It never invents a threshold of its own.
rendering	two layers	The plot is stretched to fit its container; anomaly dots are drawn in a second, unstretched layer, since a circle inside that stretch would render as an ellipse.