Element: <oj-timeline-item>

Oracle® JavaScript Extension Toolkit (JET)
18.1.0
G25382-01

Since:
  • 7.0.0
Module:
  • ojtimeline

QuickNav

Attributes

Other Topics


JET Timeline Item

The oj-timeline-item element is used to declare properties for timeline items and is only valid as the child of a template element for the itemTemplate slot of oj-timeline. 


<oj-timeline data="[[dataProvider]]">
  <template slot="itemTemplate">
    <oj-timeline-item
      series-id="[[$current.data.series]]"
      start="[[$current.data.start]]"
      end="[[$current.data.end]]">
    </oj-timeline-item>
  </template>
</oj-timeline>

Accessibility

The application is responsible for populating the shortDesc value in the component options object with meaningful descriptors when the component does not provide a default descriptor. Additionally, the application is responsible for ensuring that information conveyed by color differences is also available in visible text.


Usage

Signature:

interface TimelineItemElement<K=any, D=any>

Typescript Import Format
//To typecheck the element APIs, import as below.
import { TimelineItemElement } from "ojs/ojtimeline";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojtimeline";

For additional information visit:


Attributes

(nullable) background :"blue"|"orange"|"purple"|"red"|"teal"|"green"

Note: This attribute is not supported in the following themes: Alta

The background color of the item bubble. If the item is of type "duration-event", then a color stripe will also be rendered in the item bubble. The exact background and stripe color values come from the CSS and vary based on theme. For each item, there is an accessibility requirement for use cases where a color difference is used to convey information. The application is responsible for making sure that the information conveyed is also available in visible text.
Supported Values:
Value Description
blue Blue background (and blue color stripe for "duration-event" type item).
green Green background (and green color stripe for "duration-event" type item).
orange Orange background (and orange color stripe for "duration-event" type item).
purple Purple background (and purple color stripe for "duration-event" type item).
red Red background (and red color stripe for "duration-event" type item).
teal Teal background (and teal color stripe for "duration-event" type item).
Since:
  • 13.1.0

description :string

The description text displayed on the timeline item. If not specified, no description will be shown.
Default Value:
  • ""

(nullable) duration-fill-color :string

The color applied to the duration bar of the timeline item. If not specified, this will be determined by the color ramp of the series.
Default Value:
  • null

end :string

The end time of this timeline item. If not specified, no duration bar will be shown. See Date and Time Formats for more details on the required string formats.
Default Value:
  • ""

item-type :"event"|"duration-bar"|"duration-event"|"auto" item-type :"event"|"duration-event"|"auto"

Note: This attribute is not supported in the following themes: Alta

The item type for the bubble. If not specified, defaults to auto behavior (event item-type if end date not specified, duration-event if end date specified).
Supported Values:
Value Description
auto event item-type if end date not specified, duration-event if end date specified.
duration-bar item bubble with a bar on the time-axis that matches the duration of the event using the start/end dates
Deprecated:
Since Description
18.0.0 The timeline event duration-bar type is deprecated. Please use duration-event type instead. The item-type on oj-timeline-item will no longer default to duration-bar for items with an end time specified. Applications that initially set item-type to 'auto' or left it unspecified will see 'duration-event' instead of 'duration-bar' if the 'end' date is set on the item.
duration-event item bubble with width equal to the duration and edges of the event matching the start/end date (only available on horizontal timeline)
event item bubble using only the start date
Default Value:
  • "auto"
Since:
  • 11.1.0

label :string

The label text displayed on the timeline item. If not specified, no label will be shown.
Default Value:
  • ""

series-id :string

The id for the series the item belongs to. If no id is specified, the item will be added to the default series.

(nullable) short-desc :(string | ((context: ojTimeline.ItemShortDescContext<K,D) => string)) :(string | ((context: ojTimeline.ItemShortDescContext<K,D>) => string)) :(string | ((context: ojTimeline.ItemShortDescContext<K,D>) => string))

The description of the item. This is used for accessibility and for customizing the tooltip text.
Default Value:
  • null

start :string

The start time of this timeline item. This is required in order for the timeline item to properly render. See Date and Time Formats for more details on the required string formats.
Default Value:
  • ""

(nullable) svg-style :Partial<CSSStyleDeclaration>

The CSS style defining any additional styling of the item. If not specified, no additional styling will be applied. Only SVG CSS style properties are supported.

thumbnail :string

An optional URI specifying the location of an image resource to be displayed on the item. The image will be rendered at 32px x 32px in size. If not specified, no thumbnail will be shown.
Default Value:
  • ""