React Signal & Spectrum Plot

The two views every scope and analyzer shows. SignalPlot draws time-domain channels on a proper 10×8-division grid with a V/div · s/div readout that auto-scales to the signal, plus a cursor giving the value at any sample. SpectrumPlot draws the frequency domain in dB with gridlines every 20 dB and an automatic peak marker. This is the analog counterpart to the digital Waveform Viewer — reuses the chart tokens, values in mono text.

Oscilloscope — CH1 clock, CH2 sine1.00 V/div · 50.0 µs/div

CH1 clkCH2 sine

Spectrum — 20 kHz fundamental + 60 kHz harmonic0…500 kHz · -90 dB floor

Hover the scope for a t/V cursor readout; the spectrum auto-marks its peak bin. Both scale V/div and the dB floor automatically.

Installation

Uses formatQuantity from quantity for its readouts.

npx shadcn@latest add signal-plot.json

Usage

Props

SignalPlot

Prop	Type	Default	Description
channels	Channel[]	—	{ name, data: number[] } (volts)
sampleRate	number	—	Samples per second (sets the time axis)
height	number	240	Plot height

SpectrumPlot