File

packages/eui/packages/components/eui-timebar/eui-timebar.component.ts

Description

A component for displaying chronological events or milestones on a horizontal timeline.

The EuiTimebarComponent renders a horizontal timeline with customizable items, labels, markers, and optional grouping for overlapping items. It supports responsive behavior, current date indication, and multiple display options.

Implements

OnInit AfterContentInit AfterViewChecked OnChanges OnDestroy

Metadata

Index

Properties
Methods
Inputs

Inputs

dateFormat
Type : "short" | "medium" | "long" | "full" | "shortDate" | "mediumDate" | "longDate" | "fullDate" | "shortTime" | "mediumTime" | "longTime" | "fullTime" | string
Default value : 'yyyy-MM-dd'

Format for displaying dates in the timeline.

e2eAttr
Type : string
Default value : 'eui-timebar'
endLabel
Type : string

Label displayed at the end of the timeline.

isCurrentDateMarkerAlwaysInRange
Type : boolean
Default value : false

When true, keeps the current date marker visible even if the current date is outside the timeline range by placing it at the edge of the timeline.

isGroupOverlappingLabels
Type : boolean
Default value : false

Whether to group timeline items with overlapping labels to improve readability.

isShowCurrentDateMarker
Type : boolean
Default value : false

Whether to display a marker for the current date on the timeline.

isShowLegend
Type : boolean
Default value : false

Whether to show a legend with timeline item labels.

isShowLegendAsIndex
Type : boolean
Default value : true

Whether to display indices instead of colors in the legend.

items
Type : EuiTimebarItem[]

Collection of items to be displayed on the timeline.

markedDate
Type : Date

Date to be highlighted on the timeline. Separate from currentDateMarker, which shows today's date.

startLabel
Type : string

Label displayed at the beginning of the timeline.

Methods

onBreakpointChange
onBreakpointChange(bkps: any)
Parameters :
Name Type Optional
bkps any No
Returns : void
trackByFn
trackByFn(index: number, item: EuiTimebarItemUI)
Parameters :
Name Type Optional
index number No
item EuiTimebarItemUI No
Returns : string

Properties

container
Type : ElementRef<HTMLDivElement>
Decorators :
@ViewChild('container')
currentDate
Default value : new Date()
currentPerc
Type : number
extraTimelineLabelSpace
Type : number
Default value : 21
isGroupOverlappingLabelsGenerated
Type : boolean
isMobile
Default value : false
isShowLegendAsIndexGenerated
Type : boolean
isShowLegendGenerated
Type : boolean
isSomeStepsAreGrouped
Default value : false
itemsUI
Type : EuiTimebarItemUI[]
Default value : []
markedPerc
Type : number
subscription
Type : Subscription
timebarColumnClass
Calculation of it happens internally and will be removed in the future
Type : string
Default value : ''

The class to be applied to the timebar column.

results matching ""

    No results matching ""