x-plot

A Web Component that plots zoomable and pannable waveforms.

npm i x-plot

pnpm add x-plot

yarn add x-plot

Examples

# multiple

Try it live

# view source

example/multiple.ts

import { PlotElement } from 'x-plot'
customElements.define('x-plot', PlotElement)

document.body.innerHTML = /*html*/ `
<div id="demo" style="display:inline-grid;grid:1fr 1fr/1fr 1fr;gap:5px;">
  <x-plot width="200" height="60"></x-plot>
  <x-plot width="200" height="60" background="#f08" color="#ff0" zoom="4" linewidth="3"></x-plot>
  <x-plot width="200" height="60" background="#066" color="yellow" zoom="20" linewidth="6"></x-plot>
  <x-plot width="200" height="60" background="#000"></x-plot>
</div>
`

const plots = document.querySelectorAll('x-plot') as NodeListOf<PlotElement>
const rate = 44100
const sine = (i: number, hz: number) =>
  Math.sin(hz * (i * (1 / rate)) * Math.PI * 2)

plots[0].data = Array(44100).fill(0).map((_, i) => sine(i, 1))
plots[1].data = Array(44100).fill(0).map((_, i) => sine(i, 10))
plots[2].data = Array(44100).fill(0).map((_, i) => sine(i, 100))
plots[3].data = [1, 0, -1, 0, 1, 0, -1]

# web

Try it live

# view source

example/web.ts

import { PlotElement } from 'x-plot'
customElements.define('x-plot', PlotElement)

const plot = new PlotElement()
plot.id = 'demo'

document.body.appendChild(plot)

let n = 0
const sine = (i: number, hz: number) =>
  Math.sin(hz * (i * (1 / 1000)) * Math.PI * 2)
const loop = () => {
  requestAnimationFrame(loop)
  plot.data = Array(1000).fill(0).map(_ => sine(++n, 4))
  n += 1000 / 4 / 60 // sampleRate/hz/frameRate to loop video capture every 1 second
}
loop()

API

# PlotElement – Plot.

src/x-plot.ts#L30

# constructor()

# new PlotElement()

PlotElement

# $

src/work/stagas/sigl/dist/types/sigl.d.ts#L25

Context<PlotElement & JsxContext<PlotElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

src/work/stagas/sigl/dist/types/index.d.ts#L9

undefined | boolean

# Number

src/work/stagas/sigl/dist/types/index.d.ts#L8

undefined | number

# String

src/work/stagas/sigl/dist/types/index.d.ts#L7

undefined | string

}, "transition">>

# autoResize  =  false – Autoresize to fit parent element's size.

src/x-plot.ts#L40

boolean

# background  =  '#235'

src/x-plot.ts#L37

string

# color  =  '#4f4'

src/x-plot.ts#L38

string

# context

src/work/stagas/sigl/dist/types/sigl.d.ts#L26

ContextClass<PlotElement & JsxContext<PlotElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

src/work/stagas/sigl/dist/types/index.d.ts#L9

undefined | boolean

# Number

src/work/stagas/sigl/dist/types/index.d.ts#L8

undefined | number

# String

src/work/stagas/sigl/dist/types/index.d.ts#L7

undefined | string

}, "transition">>

# data – Array-like number data to plot, range -1..+1, 0=center, -1=bottom, +1=top.

src/x-plot.ts#L47

ArrayLike<number>

# dispatch

src/work/stagas/sigl/dist/types/events.d.ts#L4

Dispatch<

# (name, detail, init)

# name

Event | Narrow<K, string>

# detail

E

# init

CustomEventInit<any>

<K, E>(name, detail, init)  =>

any

>

# get

src/x-plot.ts#L52

# (i)

# i

number

(i)  =>

number

# height  =  60

src/x-plot.ts#L34

number

# host

src/work/stagas/sigl/dist/types/sigl.d.ts#L24

PlotElement

# lineWidth  =  1

src/x-plot.ts#L35

number

# offsetX  =  0 – Horizontal panning position.

src/x-plot.ts#L44

number

# onPointerMove

src/x-plot.ts#L61

EventHandler<Window, PointerEvent>

# onWheel

src/x-plot.ts#L62

EventHandler<PlotElement, WheelEvent>

# onmounted

EventHandler<PlotElement, CustomEvent<any>>

# onunmounted

EventHandler<PlotElement, CustomEvent<any>>

# pixelRatio  =  window.devicePixelRatio

src/x-plot.ts#L36

number

# pointer  =  ... – Pointer data

src/x-plot.ts#L56

{

# id  =  -1

number

# x  =  0

number

# y  =  0

number

}

# pointerDown  =  false – Pointer down state

src/x-plot.ts#L54

boolean

# root  =  ...

src/x-plot.ts#L31

ShadowRoot

# screen

src/x-plot.ts#L48

{

# canvas

src/x-plot.ts#L49

HTMLCanvasElement

# ctx

src/x-plot.ts#L50

CanvasRenderingContext2D

}

# width  =  200

src/x-plot.ts#L33

number

# zoom  =  1 – Zoom scale: 1=no zoom.

src/x-plot.ts#L42

number

# created(ctx)

# ctx

Context<PlotElement & JsxContext<PlotElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

src/work/stagas/sigl/dist/types/index.d.ts#L9

undefined | boolean

# Number

src/work/stagas/sigl/dist/types/index.d.ts#L8

undefined | number

# String

src/work/stagas/sigl/dist/types/index.d.ts#L7

undefined | string

}, "transition">>

created(ctx)  =>

void

# mounted($)

src/x-plot.ts#L64

# $

Context<PlotElement & JsxContext<PlotElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

src/work/stagas/sigl/dist/types/index.d.ts#L9

undefined | boolean

# Number

src/work/stagas/sigl/dist/types/index.d.ts#L8

undefined | number

# String

src/work/stagas/sigl/dist/types/index.d.ts#L7

undefined | string

}, "transition">>

mounted($)  =>

void

# on(name)

# name

K

on<K>(name)  =>

On<Fn<[ EventHandler<PlotElement, LifecycleEvents & object [K]> ], Off>>

# toJSON()

toJSON()  =>

Pick<PlotElement, keyof PlotElement>

Credits

• sigl by stagas – Web framework

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas