jcb-gauge

A custom-element which displays a gauge, using possibility distributions for representing norm and value. (see: https://pubmed.ncbi.nlm.nih.gov/18261889/)

Properties

Property	Attribute	Modifiers	Type	Default	Description
domain	domain		object	{"inf":0,"sup":100}
name	name		String	""	The text to display on the lower part of the gauge
norm	norm		object	{"d1":40,"d2":60,"dt1":5,"dt2":5,"h":0}
value	value		object	{"d1":50,"d2":50,"dt1":2,"dt2":2,"h":0}

CSS Custom Properties

Property	Description
--jcb-gauge-green	Controls the green color (full compatibility between value and norm)
--jcb-gauge-orange	Controls the orange color (all other compatibility situations)
--jcb-gauge-red	Controls the red color (when zero compatibility between value and norm)
--jcb-gauge-font-family	Controls the text font

Test index.html with hot-reload

npm run dev

Build custom element

npm run build

Result in dist/jcb-gauge.js

Publish on NPM

npm publish

Automatic doc generation

https://runem.github.io/web-component-analyzer