Element: <oj-c-rating-gauge>

CORE PACK

Oracle® JavaScript Extension Toolkit (JET)
16.0.0
F83701-01

Since:
  • 13.0.0
Module:
  • rating-gauge

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

QuickNav

Attributes

Methods

Type Definitions

Other Topics


JET Rating Gauge

Rating gauges are typically used to display or accept user feedback on a product or service. 
<oj-c-rating-gauge value='4'></oj-c-rating-gauge>

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-rating-gauge element does not provide a default descriptor.

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

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

Disabled content: JET supports an accessible luminosity contrast ratio, as specified in WCAG 2.0 - Section 1.4.3 "Contrast", in the themes that are accessible. (See the "Theming" chapter of the JET Developer Guide for more information on which themes are accessible.) Note that Section 1.4.3 says that text or images of text that are part of an inactive user interface component have no contrast requirement. Because disabled content may not meet the minimum contrast ratio required of enabled content, it cannot be used to convey meaningful information.

Keyboard

Key Action
Enter Submit the current value of the gauge.
Tab Move focus to next element and submit the current value of the gauge.
Shift + Tab Move focus to previous element.
End Increase the gauge's transient value to max value. Value is set after using Enter or Tab to submit.
Home Decrease the gauge's transient value to zero. Value is set after using Enter or Tab to submit.
LeftArrow Decrease the gauge's transient value in left-to-right locales. Increase the gauge's transient value in right-to-left locales. Value is set after using Enter or Tab to submit.
RightArrow Increase the gauge's transient value in left-to-right locales. Decrease the gauge'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 or disabled is false.


Usage

Signature:

interface CRatingGaugeElement

Typescript Import Format
//To typecheck the element APIs, import as below.
import { CRatingGaugeElement } from "oj-c/rating-gauge";

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

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

changed :boolean

Whether there has been a value entered by the user even if it is the same as the initial value.
Default Value:
  • false
Supports writeback:
  • true
Names
Item Name
Property changed
Property change event changedChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-changed-changed

color :"neutral"|"gold"

Specifies the color of the individual rating gauge items.
Supported Values:
Value Description
gold gold color Rating Gauge
neutral neutral color Rating Gauge (default, if unspecified)
Default Value:
  • "neutral"
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.RatingGauge.DatatipContext) => string

The rating gauge datatip string. Datatip is only used for interactive rating gauges.
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. To facilitate correct screen reader behavior, the described-by attribute is copied to the aria-describedby attribute on the component's dom.
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

disabled :boolean

Defines whether the gauge is disabled or not. User interaction is prevented and the rating gauge is hidden from screen readers if set to true.
Default Value:
  • false
Names
Item Name
Property disabled
Property change event disabledChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-disabled-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 a text in a div or some other HTML element, and the oj-c-rating-gauge together for accessibility. The label element has an 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 gauge, which determines the number of items that are displayed.
Default Value:
  • 5
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

readonly :boolean

Defines whether the value of the gauge 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

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

Specifies the size of the individual rating gauge items.
Supported Values:
Value Description
lg large Rating Gauge
md medium Rating Gauge (default, if unspecified)
sm small Rating Gauge
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.
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

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

An array of objects defining the thresholds for the rating gauge.
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

tooltip :string

The rating gauge tooltip. Tooltip is only used for read only rating gauges. If aria-label is not specified, tooltip will be used as the aria-label.
Names
Item Name
Property tooltip
Property change event tooltipChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-tooltip-changed

(readonly) transient-value :number

A read-only property for retrieving the transient value from the rating gauge. It is updated upon user gestures that cause transient value changes, such as hovering over the rating gauge.
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 Rating Gauge. The element's value attribute is used if it is provided, otherwise the default value of 0 is used. Any other negative value will default to 0.
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 value of the currently active rating gauge item.

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.