Horizontal timeline component

[benakansara]

As part of RCA initiative, we are building an investigation page where we would show timeline of events that happened before and during the incident. We are going to show timeline in two formats: horizontal and vertical. For vertical timeline, we are planning to use EUI timeline component. We need a similar component in horizontal format where we can plot different type of events on a line with each event having its tooltip and ability to assign actions on click (for example, if the event is of type "alert", user should be able to go to alert details page by clicking on it). The investigation will have different visualizations on the page without visible x-axis, we would like to use x-axis of horizontal events timeline as a common x-axis for all the visualizations so that when hovering mouse on either events timeline or any of the visualizations, the mouse pointer would move in all visualizations with tooltip open.

Here is our design from the mockups:

Describe alternatives you've considered

We are considering -

• grid charts (e.g. heat map) with single row where we can place icons for different event types
• a chart with all 0 in y-axis and annotation layer for each of the events

But these are temporary solutions. Ideally, a dedicated timeline component would fit better for our use case.

[MichaelMarcialis]

Per the discussion in the separate Slack thread, it seems a happy solution was found by using the Elastic charts library (thanks to @nickofthyme). As Elastic charts is separate from EUI, I'll go ahead and close out this issue for the time being.

That said, if the Elastic charts solution falls through for whatever reason, our recommendation would be to create your own custom component to achieve this (as there is no current EUI component that meets all of these requirements). However, if it can be established that there exists a larger audience that desires to have a horizontal timeline component such as this at the design system level, we can reopen this issue.

[nickofthyme]

Thanks @MichaelMarcialis here is the demo of the charts implementation.