ov-track

src/ov-track.js

LIFTED FROM demo/track.html

Attributes

Properties

None that can be set. See the read-only properties below.

READ-ONLY PROPERTIES

report

Events

None.

Using it

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

<div style="display:grid;gap:10px;justify-items:start">
  <ov-track
    identity="hostile"
    dimension="air"
    course="235"
    speed="480"
    label="TN 3107"
  >
  </ov-track>
  <ov-track
    identity="assumed-friend"
    dimension="surface"
    course="90"
    speed="22"
    speed-max="40"
    label="TN 0412"
  >
  </ov-track>
  <ov-track
    dimension="surface"
    label="TN 8844"
  >
  </ov-track>
</div>

import { OvTrack } from 'overscan/react'

<OvTrack
  identity="hostile"
  dimension="air"
  course="235"
  speed="480"
  label="TN 3107"
/>

import { OvTrack } from 'overscan/vue'

<OvTrack
  identity="hostile"
  dimension="air"
  course="235"
  speed="480"
  label="TN 3107"
/>

import OvTrack from 'overscan/svelte/OvTrack.svelte'

<OvTrack
  identity="hostile"
  dimension="air"
  course="235"
  speed="480"
  label="TN 3107"
/>

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 72 getter-only properties across 39 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.