packages/eui/packages/components/eui-timebar/eui-timebar.component.ts
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.
OnInit
AfterContentInit
AfterViewChecked
OnChanges
OnDestroy
encapsulation | ViewEncapsulation.None |
selector | eui-timebar |
imports |
NgClass
AsyncPipe
DatePipe
EUI_ICON
EUI_BADGE
|
templateUrl | ./eui-timebar.component.html |
styleUrl | ./eui-timebar.scss |
Properties |
Methods |
Inputs |
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. |
onBreakpointChange | ||||||
onBreakpointChange(bkps: any)
|
||||||
Parameters :
Returns :
void
|
trackByFn | |||||||||
trackByFn(index: number, item: EuiTimebarItemUI)
|
|||||||||
Parameters :
Returns :
string
|
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. |