Usage
Signature:
interface TimeAxisElement
Typescript Import Format
//To typecheck the element APIs, import as below.
import { TimeAxisElement } from "ojs/ojtimeaxis";
//For the transpiled javascript to load the element's module, import as below
import "ojs/ojtimeaxis";
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.
Slots
JET components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types.
-
contextMenu
-
The contextMenu slot is set on the
oj-menu
within this element. This is used to designate the JET Menu that this component should launch as a context menu on right-click, Shift-F10, Press & Hold, or component-specific gesture. If specified, the browser's native context menu will be replaced by the JET Menu specified in this slot.The application can register a listener for the Menu's ojBeforeOpen event. The listener can cancel the launch via event.preventDefault(), or it can customize the menu contents by editing the menu DOM directly, and then calling refresh() on the Menu.
To help determine whether it's appropriate to cancel the launch or customize the menu, the ojBeforeOpen listener can use component API's to determine which table cell, chart item, etc., is the target of the context menu. See the JSDoc of the individual components for details.
Keep in mind that any such logic must work whether the context menu was launched via right-click, Shift-F10, Press & Hold, or component-specific touch gesture.
Attributes
-
converter :(oj.ojTimeAxis.Converters|oj.Converter.<string>)
-
A converter (an object literal or instance that duck types oj.Converter) used to format the labels of the time axis for all 'scale' values, or an object literal whose keys are 'scale' values that map specific converters for scale specific formatting. See also oj.DateTimeConverter.
- Default Value:
{"default": null, "seconds": new DateTimeConverter.IntlDateTimeConverter({'hour': 'numeric', 'minute': '2-digit', 'second': '2-digit'}), "minutes": new DateTimeConverter.IntlDateTimeConverter({'hour': 'numeric', 'minute': '2-digit'}), "hours": new DateTimeConverter.IntlDateTimeConverter({'hour': 'numeric'}), "days": new DateTimeConverter.IntlDateTimeConverter({'month': 'numeric', 'day': '2-digit'}), "weeks": new DateTimeConverter.IntlDateTimeConverter({'month': 'numeric', 'day': '2-digit'}), "months": new DateTimeConverter.IntlDateTimeConverter({'month': 'long'}), "quarters": new DateTimeConverter.IntlDateTimeConverter({'month': 'long'}), "years": new DateTimeConverter.IntlDateTimeConverter({'year': 'numeric'})}
Names
Item Name Property converter
Property change event converterChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-converter-changed
-
end :string
-
The end time of the time axis. A valid value is required in order for the time axis to properly render. See Date and Time Formats for more details on the required string formats.
- Default Value:
""
Names
Item Name Property end
Property change event endChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-end-changed
-
(nullable) scale :(string|DvtTimeComponentScale)
-
The time scale used for the time axis. This is required in order for the time axis to properly render. The scale must either be a scale string (see acceptable values) or a custom instance of DvtTimeComponentScale.
- Default Value:
null
Supported Values:
Value days
hours
minutes
months
quarters
seconds
weeks
years
Names
Item Name Property scale
Property change event scaleChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-scale-changed
-
start :string
-
The start time of the time axis. A valid value is required in order for the time axis to properly render. See Date and Time Formats for more details on the required string formats.
- Default Value:
""
Names
Item Name Property start
Property change event startChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-start-changed
-
track-resize :"on"|"off"
-
Defines whether the element will automatically render in response to changes in size. If set to
off
, then the application is responsible for callingrefresh
to render the element at the new size.- Default Value:
"on"
Supported Values:
Value off
on
Names
Item Name Property trackResize
Property change event trackResizeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-track-resize-changed
-
translations :object|null
-
A collection of translated resources from the translation bundle, or
null
if this component has no resources. Resources may be accessed and overridden individually or collectively, as seen in the examples.If the component does not contain any translatable resource, the default value of this attribute will be
null
. If not, an object containing all resources relevant to the component.If this component has translations, their documentation immediately follows this doc entry.
Names
Item Name Property translations
Property change event translationsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-translations-changed
-
(nullable) translations.accessible-contains-controls :string
-
Used to describe a container that contains controls.
See the translations attribute for usage examples.
- Since:
- 13.0.0
Names
Item Name Property translations.accessibleContainsControls
-
(nullable) translations.component-name :string
-
Used to describe the data visualization type for accessibility.
See the translations attribute for usage examples.
- Default Value:
"Time Axis"
Names
Item Name Property translations.componentName
-
(nullable) translations.label-and-value :string
-
Used to display a label and its value.
See the translations attribute for usage examples.
- Default Value:
"{0}: {1}"
Names
Item Name Property translations.labelAndValue
-
(nullable) translations.label-clear-selection :string
-
Text shown for clearing multiple selection on touch devices.
See the translations attribute for usage examples.
- Default Value:
"Clear Selection"
Names
Item Name Property translations.labelClearSelection
-
(nullable) translations.label-count-with-total :string
-
Used to display a count out of a total.
See the translations attribute for usage examples.
- Default Value:
"{0} of {1}"
Names
Item Name Property translations.labelCountWithTotal
-
(nullable) translations.label-data-visualization :string
-
Label for data visualizations used for accessibility.
See the translations attribute for usage examples.
- Default Value:
"Data Visualization"
Names
Item Name Property translations.labelDataVisualization
-
(nullable) translations.label-invalid-data :string
-
Text shown when the component receives invalid data.
See the translations attribute for usage examples.
- Default Value:
"Invalid data"
Names
Item Name Property translations.labelInvalidData
-
(nullable) translations.label-no-data :string
-
Text shown when the component receives no data.
See the translations attribute for usage examples.
- Default Value:
"No data to display"
Names
Item Name Property translations.labelNoData
-
(nullable) translations.state-collapsed :string
-
Used to describe the collapsed state for accessibility.
See the translations attribute for usage examples.
- Default Value:
"Collapsed"
Names
Item Name Property translations.stateCollapsed
-
(nullable) translations.state-drillable :string
-
Used to describe a drillable object for accessibility.
See the translations attribute for usage examples.
- Default Value:
"Drillable"
Names
Item Name Property translations.stateDrillable
-
(nullable) translations.state-expanded :string
-
Used to describe the expanded state for accessibility.
See the translations attribute for usage examples.
- Default Value:
"Expanded"
Names
Item Name Property translations.stateExpanded
-
(nullable) translations.state-hidden :string
-
Used to describe the hidden state for accessibility.
See the translations attribute for usage examples.
- Default Value:
"Hidden"
Names
Item Name Property translations.stateHidden
-
(nullable) translations.state-isolated :string
-
Used to describe the isolated state for accessibility.
See the translations attribute for usage examples.
- Default Value:
"Isolated"
Names
Item Name Property translations.stateIsolated
-
(nullable) translations.state-maximized :string
-
Used to describe the maximized state for accessibility.
See the translations attribute for usage examples.
- Default Value:
"Maximized"
Names
Item Name Property translations.stateMaximized
-
(nullable) translations.state-minimized :string
-
Used to describe the minimized state for accessibility.
See the translations attribute for usage examples.
- Default Value:
"Minimized"
Names
Item Name Property translations.stateMinimized
-
(nullable) translations.state-selected :string
-
Used to describe the selected state for accessibility.
See the translations attribute for usage examples.
- Default Value:
"Selected"
Names
Item Name Property translations.stateSelected
-
(nullable) translations.state-unselected :string
-
Used to describe the unselected state for accessibility.
See the translations attribute for usage examples.
- Default Value:
"Unselected"
Names
Item Name Property translations.stateUnselected
-
(nullable) translations.state-visible :string
-
Used to describe the visible state for accessibility.
See the translations attribute for usage examples.
- Default Value:
"Visible"
Names
Item Name Property translations.stateVisible
Methods
-
getProperty(property) : {any}
-
Retrieves the value of a property or a subproperty. The return type will be the same as the type of the property as specified in this API document. If the method is invoked with an incorrect property/subproperty name, it returns undefined.
Parameters:
Name Type Description property
string The property name to get. Supports dot notation for subproperty access. - Since:
- 4.0.0
Returns:
- Type
- any
Example
Get a single subproperty of a complex property:
let subpropValue = myComponent.getProperty('complexProperty.subProperty1.subProperty2');
-
refresh : {void}
-
Refreshes the component.
Returns:
- Type
- void
-
setProperties(properties) : {void}
-
Performs a batch set of properties. The type of value for each property being set must match the type of the property as specified in this API document.
Parameters:
Name Type Description properties
Object An object containing the property and value pairs to set. - Since:
- 4.0.0
Returns:
- Type
- void
Example
Set a batch of properties:
myComponent.setProperties({"prop1": "value1", "prop2.subprop": "value2", "prop3": "value3"});
-
setProperty(property, value) : {void}
-
Sets a property or a subproperty (of a complex property) and notifies the component of the change, triggering a [property]Changed event. The value should be of the same type as the type of the attribute mentioned in this API document.
Parameters:
Name Type Description property
string The property name to set. Supports dot notation for subproperty access. value
any The new value to set the property to. - Since:
- 4.0.0
Returns:
- Type
- void
Example
Set a single subproperty of a complex property:
myComponent.setProperty('complexProperty.subProperty1.subProperty2', "someValue");
Type Definitions
-
Converters
-
Properties:
Name Type Argument Default Description days
oj.Converter.<string> <optional>
new DateTimeConverter.IntlDateTimeConverter({'month': 'numeric', 'day': '2-digit'}) A converter (an instance that duck types oj.Converter) used to format the 'days' scale. If not specified, the default converter will be used for this scale. See also oj.DateTimeConverter. default
oj.Converter.<string> <optional>
null The default converter (an object literal or instance that duck types oj.Converter) to use for all 'scale' values that do not otherwise have a converter object provided. See also oj.DateTimeConverter. hours
oj.Converter.<string> <optional>
new DateTimeConverter.IntlDateTimeConverter({'hour': 'numeric'}) A converter (an instance that duck types oj.Converter) used to format the 'hours' scale. If not specified, the default converter will be used for this scale. See also oj.DateTimeConverter. minutes
oj.Converter.<string> <optional>
new DateTimeConverter.IntlDateTimeConverter({'hour': 'numeric', 'minute': '2-digit'}) A converter (an instance that duck types oj.Converter) used to format the 'minutes' scale. If not specified, the default converter will be used for this scale. See also oj.DateTimeConverter. months
oj.Converter.<string> <optional>
new DateTimeConverter.IntlDateTimeConverter({'month': 'long'}) A converter (an instance that duck types oj.Converter) used to format the 'months' scale. If not specified, the default converter will be used for this scale. See also oj.DateTimeConverter. quarters
oj.Converter.<string> <optional>
new DateTimeConverter.IntlDateTimeConverter({'month': 'long'}) A converter (an instance that duck types oj.Converter) used to format the 'quarters' scale. If not specified, the default converter will be used for this scale. See also oj.DateTimeConverter. seconds
oj.Converter.<string> <optional>
new DateTimeConverter.IntlDateTimeConverter({'hour': 'numeric', 'minute': '2-digit', 'second': '2-digit'}) A converter (an instance that duck types oj.Converter) used to format the 'seconds' scale. If not specified, the default converter will be used for this scale. See also oj.DateTimeConverter. weeks
oj.Converter.<string> <optional>
new DateTimeConverter.IntlDateTimeConverter({'month': 'numeric', 'day': '2-digit'}) A converter (an instance that duck types oj.Converter) used to format the 'weeks' scale. If not specified, the default converter will be used for this scale. See also oj.DateTimeConverter. years
oj.Converter.<string> <optional>
new DateTimeConverter.IntlDateTimeConverter({'year': 'numeric'}) A converter (an instance that duck types oj.Converter) used to format the 'years' scale. If not specified, the default converter will be used for this scale. See also oj.DateTimeConverter.