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.

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

Usage in Vue

Vue uses the custom element directly. A property is bound with :kebab-name; an array or an object needs the .prop modifier so that Vue sets the property rather than an attribute. Events are listened to with @eventName; methods are called on the element through a template ref.

import 'smart-industrial/source/modules/smart.bargraph.js';

<smart-bar-graph ref="barGraph" :peak-decay="42" :interactive="true"
    @change="onEvent"></smart-bar-graph>

// methods are called on the element the ref holds
barGraph.value.resetPeak();

// an array or an object is set as a property, not converted to an attribute: use .prop
<smart-bar-graph :items.prop="items"></smart-bar-graph>

Properties

Binding	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.
:peak-decay 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.
:peak-hold 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.
:peak-hold-time peakHoldTime	number 1500	Sets or gets the time in milliseconds a peak is held before it starts to fall.
:segment-gap 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.
:show-value 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.

Event	Description and detail
@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