@htmlbricks/hb-gauge
v0.76.5
Published
SVG gauge wrapper around JustGage: pass JustGage-compatible options as JSON (`value`, min/max, labels, colors, etc.). The gauge is created on the shadow host after mount, destroyed on teardown, and recreated when `options` changes or the window resizes (d
Readme
hb-gauge
Category: data · Tags: data, chart
Summary
JustGage SVG gauge inside the shadow root: pass options as JSON (or object from JS). Created on mount, destroyed on teardown, recreated on window resize (200 ms debounce) and when options is reparsed from a string.
Custom element
hb-gauge
Attributes
| Attribute | Type (logical) | HTML / notes |
| --- | --- | --- |
| options | string | GaugeOptions | Required for a useful chart. Merged with { element: #gauge } before JustGage. Minimum: value, min, max; extra keys follow JustGage. |
| id | string (optional) | |
| style | string (optional) | Typings only; host style still applies to <hb-gauge>. |
Custom events
None — Events is {}.
Styling
CSS custom properties (extra/docs.ts)
| Variable | Role |
| --- | --- |
| --hb-gauge-min-height | Reserved vertical space on :host before paint. |
CSS parts (extra/docs.ts)
| Part | Role |
| --- | --- |
| gauge | Mount node #gauge (width: 100%). |
Slots
None.
Bulma is bundled for consistency; the visible dial is SVG from JustGage.
TypeScript
types/webcomponent.type.d.ts — Component, IGauge, GaugeOptions, Events.
Minimal HTML example
<hb-gauge options='{"value":50,"min":0,"max":100}'></hb-gauge>