ov-ecg

src/ov-ecg.js

A STILL OF demo/ecg.html

Attributes

Properties

READ-ONLY PROPERTIES

report

Events

Using it

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

<ov-ecg
  source="doc-ecg"
  label="BED 4"
  lead="II"
  rate="72"
  low="50"
  high="120"
  demo
  style="inline-size:100%"
>
</ov-ecg>
<script type="module">
  import '../src/ov-source.js';
  const g = (p, mu, amp, w) => amp * Math.exp(-((p - mu) ** 2) / (2 * w * w));
  const beat = (p) => g(p, 0.16, 0.12, 0.022) + g(p, 0.26, -0.13, 0.006) + g(p, 0.29, 1, 0.008) + g(p, 0.325, -0.28, 0.009) + g(p, 0.47, 0.3, 0.045);
  window.Overscan.source('doc-ecg', (t, i) => Array.from({ length: 8 }, (_, k) => beat((((i * 8 + k) / 240) * 1.2) % 1)), { hz: 30 });
</script>

import { OvEcg } from 'overscan/react'

<OvEcg
  source="doc-ecg"
  label="BED 4"
  lead="II"
  rate="72"
  low="50"
  high="120"
  samples={data}
  onEcg={handler}
/>

import { OvEcg } from 'overscan/vue'

<OvEcg
  source="doc-ecg"
  label="BED 4"
  lead="II"
  rate="72"
  low="50"
  high="120"
  :samples="data"
  @ecg="handler"
/>

import OvEcg from 'overscan/svelte/OvEcg.svelte'

<OvEcg
  source="doc-ecg"
  label="BED 4"
  lead="II"
  rate="72"
  low="50"
  high="120"
  samples={data}
  onecg={handler}
/>

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.