Element: <oj-c-meter-bar>

CORE PACK

Oracle® JavaScript Extension Toolkit (JET)
18.0.0
G12199-01

Since:
  • 14.0.0
Module:
  • meter-bar

Note: This component supersedes the following component: <oj-status-meter-gauge>. Migration info available at preceding link.

QuickNav

Attributes

Methods

Type Definitions

Other Topics


JET meter bar

A meter bar is typically used to display or accept user feedback on a product or service. 
<oj-c-meter-bar value='4'></oj-c-meter-bar>

Accessibility

The application is strongly encouraged, even though it is not required, to populate the aria-label attribute on the element with meaningful descriptors as the oj-c-meter-bar element does not provide a default descriptor.

If an application is using thresholds, reference lines or custom baseline, they need to include the information for screender readers using the following methods:

  • aria-describedby
  • aria-labelledby
  • aria-label
  • datatip

If you are using indicatorColor, applications are responsible for making sure that the color meets the minimum contrast ratio.

Keyboard

Key Action
Enter Submit the current value of the meter bar.
Tab Move focus to next element and submit the current value of the meter bar.
Shift + Tab Move focus to previous element.
End Increase the meter bar's transient value to max value. Value is set after using Enter or Tab to submit.
Home Decrease the meter bar's transient value to zero. Value is set after using Enter or Tab to submit.
UpArrow Increase the meter bar's transient value. Value is set after using Enter or Tab to submit.
DownArrow Decrease the meter bar's transient value. Value is set after using Enter or Tab to submit.
LeftArrow Decrease the meter bar's transient value in left-to-right locales. Increase the meter bar's transient value in right-to-left locales. Value is set after using Enter or Tab to submit.
RightArrow Increase the meter bar's transient value in left-to-right locales. Decrease the meter bar's transient value in right-to-left locales. Value is set after using Enter or Tab to submit.

Touch End User Information

Gesture Action
Drag Value change when readonly is false.


Usage

Signature:

interface CMeterBarElement

Typescript Import Format
//To typecheck the element APIs, import as below.
import { CMeterBarElement } from "oj-c/meter-bar";

//For the transpiled javascript to load the element's module, import as below
import "oj-c/meter-bar";

For additional information visit:

Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction.


Attributes

baseline :number

Define the baseline value of the bar. If undefined, defaults to minimum value of the meter bar. The baseline value must be between the min and max.
Names
Item Name
Property baseline
Property change event baselineChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-baseline-changed

color :string

Specifies the color of the meter bar indicator. Only applies when thresholdDisplay is not set to indicator.
Names
Item Name
Property color
Property change event colorChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-color-changed

datatip :(context: oj-c.MeterBar.DatatipContext) => string | null

The function that returns a custom datatip string for given value of meter bar. The function is called with DatatipContext as context. If datatip is undefined, meter bar will use the default datatip. If the returned value of the function is null, no datatip is shown.
Names
Item Name
Property datatip
Property change event datatipChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-datatip-changed

described-by :(string|null)

Used to establish a relationship between this component and another element. A common use is to tie a label, which can be a text in a div or some other HTML element, and the oj-c-meter-bar together for accessibility. The oj-label element has a label-id, which is used by the described-by attribute to tie the two components together to facilitate correct screen reader behavior.
Names
Item Name
Property describedBy
Property change event describedByChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-described-by-changed

indicator-size :number

Specifies the ratio of relative thickness of the indicator to the plot area.
Default Value:
  • 1
Names
Item Name
Property indicatorSize
Property change event indicatorSizeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-indicator-size-changed

labelled-by :(string|null)

Used to establish a relationship between this component and another element. A common use is to tie a label, which can be a text in a div or some other HTML element, and the oj-c-meter-bar together for accessibility. The oj-label element has a label-id, which is used by the labelled-by attribute to tie the two components together to facilitate correct screen reader behavior.
Names
Item Name
Property labelledBy
Property change event labelledByChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-labelled-by-changed

max :number

Integer value specifying the maximum value of the meter bar.
Default Value:
  • 100
Names
Item Name
Property max
Property change event maxChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-max-changed

min :number

Integer value specifying the minimum value of the meter bar.
Default Value:
  • 0
Names
Item Name
Property min
Property change event minChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-min-changed

orientation :"horizontal"|"vertical"

Specifies the orientation of the meter bar to render.
Default Value:
  • "horizontal"
Names
Item Name
Property orientation
Property change event orientationChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-orientation-changed

plot-area :oj-c.MeterBar.PlotArea

Specifies the plot area of the meter bar.
Names
Item Name
Property plotArea
Property change event plotAreaChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-plot-area-changed

readonly :boolean

Defines whether the value of the meter bar can be changed by the end user.
Default Value:
  • false
Names
Item Name
Property readonly
Property change event readonlyChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-readonly-changed

reference-lines :Array.<oj-c.MeterBar.ReferenceLine>

Specifies the array of objects defining the reference lines for the meter bar.
Names
Item Name
Property referenceLines
Property change event referenceLinesChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-reference-lines-changed

size :"sm"|"md"|"lg"|"fit"

Specifies the size of the meter bar.
Supported Values:
Value Description
fit Meter Bar that fits the available space
lg large Meter Bar
md medium Meter Bar (default, if unspecified)
sm small Meter Bar
Default Value:
  • "md"
Names
Item Name
Property size
Property change event sizeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-size-changed

step :number

Specifies the increment by which values can be changed by the end user when readonly is false. The step must be a positive value that is smaller than the difference between the min and max.
Default Value:
  • 1
Names
Item Name
Property step
Property change event stepChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-step-changed

threshold-display :"all"|"plotArea"|"indicator"

Controls whether the current threshold is displayed on the indicator, in the plot area, or if all the thresholds are displayed in the plot area.
Default Value:
  • "indicator"
Names
Item Name
Property thresholdDisplay
Property change event thresholdDisplayChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-threshold-display-changed

thresholds :Array.<oj-c.MeterBar.Threshold>

An array of objects defining the thresholds for the meter bar.
Names
Item Name
Property thresholds
Property change event thresholdsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-thresholds-changed

(readonly) transient-value :number

A read-only property for retrieving the transient value from the meter bar. It is triggered when dragging over the meter bar.
Supports writeback:
  • true
Names
Item Name
Property transientValue
Property change event transientValueChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-transient-value-changed

value :(number|null)

The value of the meter bar.
Default Value:
  • 0
Supports writeback:
  • true
Names
Item Name
Property value
Property change event valueChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-value-changed

Methods

getProperty(property) : {any}

Retrieves the value of a property or a subproperty.
Parameters:
Name Type Description
property The property name to get. Supports dot notation for subproperty access.
Returns:
Type
any

setProperties(properties) : {void}

Performs a batch set of properties.
Parameters:
Name Type Description
properties An object containing the property and value pairs to set.
Returns:
Type
void

setProperty(property, value) : {void}

Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.
Parameters:
Name Type Description
property The property name to set. Supports dot notation for subproperty access.
value The new value to set the property to.
Returns:
Type
void

Type Definitions

DatatipContext

Context for datatip function.
Properties:
Name Type Description
value number The current value of the meter bar.

PlotArea

Properties:
Name Type Argument Description
color string <optional>
 The color of the plot area.
rendered "off" | "on" <optional>
 Defines if the plot area is to be rendered. The default value is on.

ReferenceLine

Properties:
Name Type Argument Description
color string <optional>

The color of the reference line.

In addition to standard CSS color values, special enumerated values 'danger', 'warning', and 'success' are also supported. These special values are mapped to corresponding CSS color values based upon the current theme.
label string <optional>
 The label for the reference line.
position "end" | "start" <optional>
 The position of the reference line.
style Omit.<oj-c.MeterBar.VisTextStyle, "whiteSpace"> <optional>
 The style of the label for the reference line.
value number The value of the reference line.

Threshold

Properties:
Name Type Argument Description
accessibleLabel string <optional>
 A label for the threshold used for accessibility purposes.
color string <optional>

The color of the threshold.

In addition to standard CSS color values, special enumerated values 'danger', 'warning', and 'success' are also supported. These special values are mapped to corresponding CSS color values based upon the current theme.
max number The maximum value of the threshold.

VisTextStyle

Properties:
Name Type Argument Description
color string <optional>
 The color of the text.
fontSize string <optional>
 The font size of the text.
fontStyle string <optional>
 The font style of the text.
fontWeight string <optional>
 The font weight of the text.
whiteSpace "normal" | "nowrap" <optional>
 Whether the text wrap is enabled or not.