Skip to content
Get Pro
Trends

Signal & Noise

Raw readings as faint dots and a bold rolling average drawn through them, with an optional ±kσ band.

$149 once · every Pro piece

Customize

The cursor works like a lens: dots brighten and swell as it passes and fade again behind it. At the scrubbed row a dashed stem joins the raw dot to the average, with the residual printed beside it, so raw against smoothed reads directly; the tooltip lists raw, average and residual. Readings beyond 2σ wear a quiet ring. A window switch in the header (3, 7, 14, 28 days) morphs the average in place; it can be centred, with no lag, or trailing, as it was known on the day.

Install

npx shadcn@latest add @obsyde/signal-noise

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { SignalNoise } from '@/components/obsyde/ember/signal-noise/SignalNoise';

export function Example() {
  return (
    <SignalNoise
      window={7}
      align="centered"
      sigma={1}
      bandFill="gradient"
      outliers
    />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/signal-noise/SignalNoise.tsxcomponent
  • ember/signal-noise/signal-noise.cssstyles
  • ember/signal-noise/SignalNoiseDemo.tsxdemo
  • ember/viz-kit/viz-kit.cssshared
  • ember/viz-kit/Tooltip.tsxshared
  • ember/viz-kit/focus.tsshared
  • ember/viz-kit/patterns.tsxshared
  • ember/viz-kit/roll.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/viz-kit/scale.tsshared
  • ember/viz-kit/motion.tsshared
  • ember/viz-kit/chart.tsxshared
  • ember/shared/ember.cssshared
  • ember/viz-kit/touch.tsshared
  • ember/viz-kit/keyboard.tsshared
  • ember/viz-kit/size.tsshared
  • ember/viz-kit/States.tsxshared
  • ember/viz-kit/shape.tsshared
  • ember/viz-kit/series.tsxshared
  • ember/viz-kit/Legend.tsxshared
  • ember/viz-kit/Grid.tsxshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared
  • ember/viz-kit/Axis.tsxshared
  • ember/viz-kit/annotations.tsxshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
windowWindownumber7
alignAlign'centered' | 'trailing''centered'
sigmaBand ±σnumber1
bandFillBand fill'gradient' | 'solid' | 'pattern''gradient'
outliersOutlier ringsbooleantrue
lensLensbooleantrue
windowSwitchWindow switchbooleantrue
noiseNoisenumber1
legendLegend'row' | 'list' | 'none''row'
tooltipTooltip'panel' | 'corner' | 'none''panel'
crosshairCrosshair'solid' | 'dashed' | 'gradient' | 'none''solid'
dotsDots'halo' | 'ring' | 'none''halo'
patternPattern'none' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch''none'
backgroundBackground'grid' | 'dots' | 'hatch' | 'none''grid'
curveCurve'monotone' | 'linear' | 'catmull' | 'step''monotone'
revealReveal'sweep' | 'cool' | 'rise' | 'fade' | 'none''sweep'
statusStatus'ready' | 'loading' | 'empty''ready'
heightHeightnumber270
pointsPointsnumber60
seedSeednumber8