Instrument readouts and controls

Bar Graph `<smart-bar-graph>`

BarGraph is a segmented level meter, such as the column of lit blocks on an audio console or a vibration monitor.

JavaScript TypeScript Angular React Vue Blazor

<smart-bar-graph> · 7 properties, 1 methods, 1 events · source/modules/smart.bargraph.js

Usage in Angular

The Angular wrapper is BarGraphComponent from BarGraphModule: every property is an input, every event an output named on<Event>, and the methods are called on the component reference from @ViewChild. A method that returns a value returns a Promise of it, resolved once the component has rendered; its ...Sync() twin returns the value at once, or null before the component has rendered. Unknown bindings are rejected at compile time.

import { BarGraphModule, BarGraphComponent } from 'smart-industrial/angular/bargraph';

<smart-bar-graph #barGraph [peakDecay]="42" [interactive]="true"
    (onChange)="onChange($event)"></smart-bar-graph>

@ViewChild('barGraph', { read: BarGraphComponent }) barGraph!: BarGraphComponent;
// methods are called on the component reference
this.barGraph.resetPeak();

Properties

Input	Type, default	Description
`[interactive]` interactive	boolean false	Sets or retrieves whether the meter can be operated as a control. The meter is read-only by default and is not in the tab order, so that a meter which cannot be operated is not an empty tab stop. The property is named for the enabled state because boolean attributes are presence-based, and a property that defaulted to true could not be turned off from markup. A read-only meter has the meter role; an interactive one is a slider. A click on an interactive meter sets the value there, clamped and snapped to interval when coerce is set, and moves the display.
`[peakDecay]` peakDecay	number 0	Sets or retrieves the rate at which a held peak falls after its hold time expires, in scale units per second. 0 drops the peak straight back to the signal; a small value makes it fall gradually, like an analogue meter, which keeps a burst of transients readable. The fall is steady, measured from the peak as it was caught, however often the value updates.
`[peakHold]` peakHold	boolean false	Sets or retrieves whether the highest value reached is marked and held. Works the same set in markup or as a property, and after the meter is moved to another parent.
`[peakHoldTime]` peakHoldTime	number 1500	Sets or gets the time in milliseconds a peak is held before it starts to fall.
`[segmentGap]` segmentGap	number 2	Sets or gets the gap between segments in pixels.
`[segments]` segments	number 20	Sets or retrieves the number of segments the bar is divided into. A segment lights when the value passes its lower edge, so half of the scale lights exactly half of the segments. Values below 1 draw one segment and values above 500 draw 500.
`[showValue]` showValue	boolean false	Sets or retrieves whether the value is written beside the bar.

Methods

Method	Description
`resetPeak(): void`	Clears the held peak, for example to reset the meters after an event.

Events

The data of an event is in event.detail. The bar graph sets value as the operator clicks or presses an arrow key, only while interactive is true, and then raises change; the application reads the new value from event.detail.

Output	Description and detail
`(onChange)` change	This event is triggered when the value changes through a click or the keyboard. Only raised when interactive is set, a read-only meter reports nothing. `value` number The new value.

CSS variables

The component declares 5 CSS variables; the CSS page shows how to set them.

--smart-bar-graph-width --smart-bar-graph-height --smart-bar-segment-off --smart-bar-segment-on --smart-bar-segment-gap