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. |