ov-chart

src/ov-chart.js

Attributes

attribute
`age`
`max`
`max-age`
`min`
`mode`
`source`
`values`	also a property
`window`

Properties

A reading property takes a reading directly, which an attribute cannot: an attribute is a string, and a reading may be an array, a dropout, or a value carrying an age.

property	type	kind	accepts	staleness
`values`	`Reading[] \| null`	reading	an array of readings	does not mark stale

WHAT A SERIES PROPERTY ACCEPTS

set to	what happens
`Reading[]`	drawn in order
`null`	the whole property set to nothing. Renders a refusal and draws nothing at all
`null inside the array`	a DROPOUT AT THAT SAMPLE, and the line is BROKEN across it rather than interpolated. Measured: [10, null, 30] draws isolated points and reports "1 missing", where [10, 30] draws a polyline joining them. A line drawn across a gap would be the chart asserting readings nobody took
`undefined`	property never set; falls through to source, then attribute

Neither series property marks staleness, so a per-sample age is not read. Staleness is a whole-readout claim here.

Events

None.

Using it

import 'overscan'
import 'overscan/overscan.css'

<ov-chart
  min="0"
  max="100"
  values="12,30,44,null,61,58,72,80,66,54,49,63"
  style="--ov-chart-height:120px"
></ov-chart>

import { OvChart } from 'overscan/react'

<OvChart
  min="0"
  max="100"
  values={readings}
/>

import { OvChart } from 'overscan/vue'

<OvChart
  min="0"
  max="100"
  :values="readings"
/>

import OvChart from 'overscan/svelte/OvChart.svelte'

<OvChart
  min="0"
  max="100"
  values={readings}
/>

The CSS is a separate import in every framework. A single element can be imported on its own instead of the whole kit: import 'overscan/src/ov-chart.js'

A reading is set as a PROPERTY, never an attribute. An attribute is a string, so an array cannot survive one and a null arrives as the word "null", which the protocol would read as a value rather than a dropout.

Every ov: event is bound with addEventListener. The colon has no declarative spelling in Svelte 5, where the on: directive is gone and "onov:commit" is not an identifier, nor in JSX. Vue can bind it.

The wrapper applies attributes ITSELF and hands the framework nothing but a ref. All three frameworks set a prop as a property when the name exists on the element, and this kit has 77 getter-only properties across 43 elements. Assigning one throws, and in React it does not degrade: the whole tree fails to render. 13 elements have a getter-only name that is also a real attribute (at, bearing, digits, duration, floor, fov, fresh, hold, lat, lon, period, pitch, range, ring, rings, span, step, sweep, sweeps, traces, value), which are the ones a reader would naturally pass in markup.