ov-balance

src/ov-balance.js

Attributes

attribute
`capacity`
`height`
`label`
`level-error`
`level-unit`
`meter-error`
`persist`
`places`
`source`
`span-max`
`span-min`
`src`
`unit`
`window`

Properties

property	type	kind	accepts	staleness
`reading`	`Structured`	structured	not on the reading protocol	not applicable

READ-ONLY PROPERTIES

report

Events

None.

Using it

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

<ov-balance
  src="../demo/models/balance-disputed.json"
  label="RAFFINATE SPLITTER"
  unit="bbl"
  level-unit="ft"
  height="170"
  capacity="42000"
  span-min="0"
  span-max="10"
  window="10800"
  meter-error="0.5"
  level-error="0.1"
  persist="0"
></ov-balance>

import { OvBalance } from 'overscan/react'

<OvBalance
  src="../demo/models/balance-disputed.json"
  label="RAFFINATE SPLITTER"
  unit="bbl"
  level-unit="ft"
  height="170"
  capacity="42000"
  span-min="0"
  span-max="10"
  window="10800"
  meter-error="0.5"
  level-error="0.1"
  persist="0"
  reading={data}
/>

import { OvBalance } from 'overscan/vue'

<OvBalance
  src="../demo/models/balance-disputed.json"
  label="RAFFINATE SPLITTER"
  unit="bbl"
  level-unit="ft"
  height="170"
  capacity="42000"
  span-min="0"
  span-max="10"
  window="10800"
  meter-error="0.5"
  level-error="0.1"
  persist="0"
  :reading="data"
/>

import OvBalance from 'overscan/svelte/OvBalance.svelte'

<OvBalance
  src="../demo/models/balance-disputed.json"
  label="RAFFINATE SPLITTER"
  unit="bbl"
  level-unit="ft"
  height="170"
  capacity="42000"
  span-min="0"
  span-max="10"
  window="10800"
  meter-error="0.5"
  level-error="0.1"
  persist="0"
  reading={data}
/>

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.