[ { "id": "oj-c.MeterBar", "name": "MeterBar", "memberof": "oj-c", "kind": "class", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "ojcomponent": true, "isvcomponent": true, "since": "14.0.0", "longname": "oj-c.MeterBar", "pack": "oj-c", "classdesc": "

\n JET meter bar\n \n

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

\n Accessibility\n \n

\n

\nThe application is required to set one of the following attributes on the element with meaningful descriptors as the oj-c-meter-bar element does not provide a default descriptor.\n

\n\n\n

\nIf the application is using readonly, thresholds or reference lines to provide additional context, they need to include such information for screen readers using either of the following methods:\n

\n

\n

\nIf you are using indicatorColor, applications are responsible for making sure that the color meets the\nminimum contrast ratio.\n

\n\n

\n Keyboard\n \n

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
KeyAction
EnterSubmit the current value of the meter bar.
TabMove focus to next element and submit the current value of the meter bar.
Shift + TabMove focus to previous element.
EndIncrease the meter bar's transient value to max value. Value is set after using Enter or Tab to submit.
HomeDecrease the meter bar's transient value to zero. Value is set after using Enter or Tab to submit.
UpArrowIncrease the meter bar's transient value. Value is set after using Enter or Tab to submit.
DownArrowDecrease the meter bar's transient value. Value is set after using Enter or Tab to submit.
LeftArrowDecrease 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.
RightArrowIncrease 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.
\n\n

\nTouch End User Information\n \n

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n
GestureAction
DragValue change when readonly is false.
", "scope": "static", "tagWithoutBrackets": "oj-c-meter-bar", "tagWithBrackets": "", "domInterface": "CMeterBarElement", "ojPageTitle": "<oj-c-meter-bar>", "camelCaseName": "MeterBar", "ojPageTitlePrefix": "Element: ", "ojtsvcomponent": true, "tstype": { "target": "Type", "value": "interface CMeterBarElement extends JetElement" }, "ojsignature": [ { "target": "Type", "value": "interface CMeterBarElement extends JetElement" } ], "tsdeprecated": [ { "type": "supersedes", "since": "15.0.0", "value": [ "oj-status-meter-gauge" ] } ], "extension": { "catalog": { "category": "Visualizations" }, "vbdt": { "module": "oj-c/meter-bar" }, "oracle": { "icon": "oj-ux-ico-linear-status", "uxSpecs": [ "meter-bar" ] } }, "ojmodule": "meter-bar" }, { "id": "oj-c.MeterBar#max", "name": "max", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "kind": "member", "longname": "oj-c.MeterBar#max", "scope": "instance", "type": { "names": [ "number" ] }, "optional": true, "ojdisplayname": "Max", "ojshortdesc": "The maximum value of the meter bar.", "description": "Integer value specifying the maximum value of the meter bar.", "defaultvalue": 100 }, { "id": "oj-c.MeterBar#min", "name": "min", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "kind": "member", "longname": "oj-c.MeterBar#min", "scope": "instance", "type": { "names": [ "number" ] }, "optional": true, "ojdisplayname": "Min", "ojshortdesc": "The minimum value of the meter bar.", "description": "Integer value specifying the minimum value of the meter bar.", "defaultvalue": 0 }, { "id": "oj-c.MeterBar#readonly", "name": "readonly", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "kind": "member", "longname": "oj-c.MeterBar#readonly", "scope": "instance", "type": { "names": [ "boolean" ] }, "optional": true, "ojdisplayname": "Readonly", "description": "Defines whether the value of the meter bar can be changed by the end user.", "defaultvalue": false }, { "id": "oj-c.MeterBar#value", "name": "value", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "kind": "member", "longname": "oj-c.MeterBar#value", "scope": "instance", "type": { "names": [ "number|null" ] }, "optional": true, "ojdisplayname": "Value", "ojwriteback": true, "description": "The value of the meter bar.", "defaultvalue": 0 }, { "id": "oj-c.MeterBar#baseline", "name": "baseline", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "kind": "member", "longname": "oj-c.MeterBar#baseline", "scope": "instance", "type": { "names": [ "number" ] }, "optional": true, "ojdisplayname": "Baseline", "ojshortdesc": "Define the baseline value of the bar. If undefined, defaults to minimum value of the meter bar.", "description": "Define the baseline value of the bar. If undefined, defaults to minimum value of the meter bar.\nThe baseline value must be between the min and max." }, { "id": "oj-c.MeterBar#step", "name": "step", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "kind": "member", "longname": "oj-c.MeterBar#step", "scope": "instance", "type": { "names": [ "number" ] }, "optional": true, "ojdisplayname": "Step", "description": "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.", "defaultvalue": 1 }, { "id": "oj-c.MeterBar#color", "name": "color", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "kind": "member", "longname": "oj-c.MeterBar#color", "scope": "instance", "type": { "names": [ "string" ] }, "optional": true, "ojdisplayname": "Color", "description": "Specifies the color of the meter bar indicator. Only applies when thresholdDisplay is not set to indicator.", "tsdeprecated": [] }, { "id": "oj-c.MeterBar#indicatorSize", "name": "indicatorSize", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "kind": "member", "longname": "oj-c.MeterBar#indicatorSize", "scope": "instance", "type": { "names": [ "number" ] }, "optional": true, "ojdisplayname": "Indicator Size", "description": "Specifies the ratio of relative thickness of the indicator to the plot area.", "tsdeprecated": [], "defaultvalue": 1 }, { "id": "oj-c.MeterBar#plotArea", "name": "plotArea", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "kind": "member", "longname": "oj-c.MeterBar#plotArea", "scope": "instance", "type": { "names": [ "object" ] }, "optional": true, "ojdisplayname": "Plot Area", "description": "Specifies the plot area of the meter bar.", "tstype": [ { "target": "Type", "value": "oj-c.MeterBar.PlotArea", "jsdocOverride": true } ] }, { "id": "oj-c.MeterBar#orientation", "name": "orientation", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "kind": "member", "longname": "oj-c.MeterBar#orientation", "scope": "instance", "type": { "names": [ "\"horizontal\"", "\"vertical\"" ] }, "optional": true, "ojdisplayname": "Orientation", "description": "Specifies the orientation of the meter bar to render.", "defaultvalue": "'horizontal'" }, { "id": "oj-c.MeterBar#referenceLines", "name": "referenceLines", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "kind": "member", "longname": "oj-c.MeterBar#referenceLines", "scope": "instance", "type": { "names": [ "Array" ] }, "optional": true, "ojdisplayname": "Reference Lines", "description": "Specifies the array of objects defining the reference lines for the meter bar.", "tstype": [ { "target": "Type", "value": "Array", "jsdocOverride": true } ] }, { "id": "oj-c.MeterBar#thresholdDisplay", "name": "thresholdDisplay", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "kind": "member", "longname": "oj-c.MeterBar#thresholdDisplay", "scope": "instance", "type": { "names": [ "\"all\"", "\"plotArea\"", "\"indicator\"" ] }, "optional": true, "ojdisplayname": "Threshold Display", "description": "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.", "defaultvalue": "'indicator'" }, { "id": "oj-c.MeterBar#thresholds", "name": "thresholds", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "kind": "member", "longname": "oj-c.MeterBar#thresholds", "scope": "instance", "type": { "names": [ "Array" ] }, "optional": true, "ojdisplayname": "Thresholds", "description": "An array of objects defining the thresholds for the meter bar.", "tstype": [ { "target": "Type", "value": "Array", "jsdocOverride": true } ] }, { "id": "oj-c.MeterBar#describedBy", "name": "describedBy", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "kind": "member", "longname": "oj-c.MeterBar#describedBy", "scope": "instance", "type": { "names": [ "string|null" ] }, "optional": true, "ojdisplayname": "Described By", "description": "Used to establish a relationship between this component and another element.\nA 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.\nThe 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." }, { "id": "oj-c.MeterBar#labelledBy", "name": "labelledBy", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "kind": "member", "longname": "oj-c.MeterBar#labelledBy", "scope": "instance", "type": { "names": [ "string|null" ] }, "optional": true, "ojdisplayname": "Labelled By", "description": "Used to establish a relationship between this component and another element.\nA 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.\nThe 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." }, { "id": "oj-c.MeterBar#size", "name": "size", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "kind": "member", "longname": "oj-c.MeterBar#size", "scope": "instance", "type": { "names": [ "\"sm\"", "\"md\"", "\"lg\"", "\"fit\"" ] }, "optional": true, "ojdisplayname": "Size", "description": "Specifies the size of the meter bar.", "ojvalues": [ { "name": "sm", "description": "small Meter Bar", "displayName": "Small", "type": { "names": [ "string" ] } }, { "name": "md", "description": "medium Meter Bar (default, if unspecified)", "displayName": "Medium", "type": { "names": [ "string" ] } }, { "name": "lg", "description": "large Meter Bar", "displayName": "Large", "type": { "names": [ "string" ] } }, { "name": "fit", "description": "Meter Bar that fits the available space", "displayName": "Fit", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true, "defaultvalue": "'md'" }, { "id": "oj-c.MeterBar#datatip", "name": "datatip", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "kind": "member", "longname": "oj-c.MeterBar#datatip", "scope": "instance", "type": { "names": [ "function" ] }, "optional": true, "ojdisplayname": "Datatip", "description": "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,\nmeter bar will use the default datatip. If the returned value of the function is null, no datatip is shown.", "tstype": [ { "target": "Type", "value": "(context: oj-c.MeterBar.DatatipContext) => string | null", "jsdocOverride": true } ] }, { "id": "oj-c.MeterBar#transientValue", "name": "transientValue", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "kind": "member", "longname": "oj-c.MeterBar#transientValue", "scope": "instance", "type": { "names": [ "number" ] }, "optional": true, "ojdisplayname": "transientValue", "ojwriteback": true, "readonly": true, "description": "A read-only property for retrieving the transient value from the meter bar. It is triggered when dragging over the meter bar." }, { "id": "oj-c.MeterBar#setProperty", "name": "setProperty", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "kind": "function", "longname": "oj-c.MeterBar#setProperty", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "ojshortdesc": "Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.", "description": "Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.", "params": [ { "name": "property", "description": "The property name to set. Supports dot notation for subproperty access.", "type": { "names": [ "string" ] } }, { "name": "value", "description": "The new value to set the property to.", "type": { "names": [ "any" ] } } ] }, { "id": "oj-c.MeterBar#getProperty", "name": "getProperty", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "kind": "function", "longname": "oj-c.MeterBar#getProperty", "scope": "instance", "returns": [ { "type": { "names": [ "any" ] } } ], "ojshortdesc": "Retrieves the value of a property or a subproperty.", "description": "Retrieves the value of a property or a subproperty.", "params": [ { "name": "property", "description": "The property name to get. Supports dot notation for subproperty access.", "type": { "names": [ "string" ] } } ] }, { "id": "oj-c.MeterBar#setProperties", "name": "setProperties", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "kind": "function", "longname": "oj-c.MeterBar#setProperties", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "ojshortdesc": "Performs a batch set of properties.", "description": "Performs a batch set of properties.", "params": [ { "name": "properties", "description": "An object containing the property and value pairs to set.", "type": { "names": [ "object" ] } } ] }, { "id": "oj-c.MeterBar.touchDoc", "name": "touchDoc", "kind": "member", "longname": "oj-c.MeterBar.touchDoc", "description": "\n \n \n \n \n \n \n \n \n \n \n \n \n
GestureAction
DragValue change when readonly is false.
", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "ojfragment": true }, { "id": "oj-c.MeterBar.PlotArea", "name": "PlotArea", "kind": "typedef", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "longname": "oj-c.MeterBar.PlotArea", "type": { "names": [ "Object" ] }, "scope": "static", "description": "", "properties": [ { "name": "color", "description": "The color of the plot area.", "optional": true, "type": { "names": [ "string" ] } }, { "name": "rendered", "description": "Defines if the plot area is to be rendered. The default value is on.", "optional": true, "type": { "names": [ "\"off\"", "\"on\"" ] } } ] }, { "id": "oj-c.MeterBar.ReferenceLineLabelStyle", "name": "ReferenceLineLabelStyle", "kind": "typedef", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "longname": "oj-c.MeterBar.ReferenceLineLabelStyle", "type": { "names": [ "Object" ] }, "scope": "static", "description": "", "properties": [ { "name": "color", "description": "The color of the text.", "optional": true, "type": { "names": [ "string" ] } }, { "name": "fontSize", "description": "The font size of the text.", "optional": true, "type": { "names": [ "string" ] } }, { "name": "fontStyle", "description": "The font style of the text.", "optional": true, "type": { "names": [ "string" ] } }, { "name": "fontWeight", "description": "The font weight of the text.", "optional": true, "type": { "names": [ "string" ] } } ] }, { "id": "oj-c.MeterBar.ReferenceLine", "name": "ReferenceLine", "kind": "typedef", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "longname": "oj-c.MeterBar.ReferenceLine", "type": { "names": [ "Object" ] }, "scope": "static", "description": "", "properties": [ { "name": "color", "description": "

The color of the reference line.

\n

In addition to standard CSS color values, special enumerated values 'danger', 'warning',\nand 'success' are also supported. These special values are mapped to corresponding CSS color values\nbased upon the current theme.

", "optional": true, "type": { "names": [ "\"danger\"|\"warning\"|\"success\"|string" ] }, "tstype": [ { "target": "Type", "value": "\"danger\"|\"warning\"|\"success\"|string", "jsdocOverride": true } ], "ojvalues": [ { "name": "danger", "description": "Maps to theme-specific color indicating a danger condition", "type": { "names": [ "string" ] } }, { "name": "warning", "description": "Maps to theme-specific color indicating a warning condition", "type": { "names": [ "string" ] } }, { "name": "success", "description": "Maps to theme-specific color indicating a success condition", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true }, { "name": "position", "description": "The position of the reference line.", "optional": true, "type": { "names": [ "\"end\"", "\"start\"" ] } }, { "name": "value", "description": "The value of the reference line.", "optional": false, "type": { "names": [ "number" ] } }, { "name": "label", "description": "The label for the reference line.", "optional": true, "type": { "names": [ "string" ] } }, { "name": "style", "description": "The style of the label for the reference line.", "optional": true, "type": { "names": [ "object" ] }, "tstype": [ { "target": "Type", "value": "oj-c.MeterBar.ReferenceLineLabelStyle", "jsdocOverride": true, "for": "style" } ] } ] }, { "id": "oj-c.MeterBar.Threshold", "name": "Threshold", "kind": "typedef", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "longname": "oj-c.MeterBar.Threshold", "type": { "names": [ "Object" ] }, "scope": "static", "description": "", "properties": [ { "name": "accessibleLabel", "description": "A label for the threshold used for accessibility purposes.", "optional": true, "type": { "names": [ "string" ] } }, { "name": "color", "description": "

The color of the threshold.

\n

In addition to standard CSS color values, special enumerated values 'danger', 'warning',\nand 'success' are also supported. These special values are mapped to corresponding CSS color values\nbased upon the current theme.

", "optional": true, "type": { "names": [ "\"danger\"|\"warning\"|\"success\"|string" ] }, "tstype": [ { "target": "Type", "value": "\"danger\"|\"warning\"|\"success\"|string", "jsdocOverride": true } ], "ojvalues": [ { "name": "danger", "description": "Maps to theme-specific color indicating a danger condition", "type": { "names": [ "string" ] } }, { "name": "warning", "description": "Maps to theme-specific color indicating a warning condition", "type": { "names": [ "string" ] } }, { "name": "success", "description": "Maps to theme-specific color indicating a success condition", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true }, { "name": "max", "description": "The maximum value of the threshold.", "optional": false, "type": { "names": [ "number" ] } } ] }, { "id": "oj-c.MeterBar.DatatipContext", "name": "DatatipContext", "kind": "typedef", "memberof": "oj-c.MeterBar", "meta": { "filename": "meter-bar.tsx", "path": "web/components/oj-c/meter-bar" }, "longname": "oj-c.MeterBar.DatatipContext", "type": { "names": [ "Object" ] }, "scope": "static", "description": "Context for datatip function.", "properties": [ { "name": "value", "description": "The current value of the meter bar.", "optional": false, "type": { "names": [ "number" ] } } ] } ]