Swim lane visualization

[darnautov]

Is your feature request related to a problem? Please describe.
Currently, we have a custom swim lane visualization in the Kibana ML plugin that covers a particular use-case for anomalous data over time.

Besides, there is an external kibana-swimlane-vis plugin supported by @peteharverson which a user can install with Kibana up to 7.6.2 version to plot any metric data over time with some customization available. As our current Anomaly swim lane visualization requires some re-work and kibana-swimlane-vis can't be used with recent kibana versions, we come up with a decision of implementing a reusable visualization that covers both cases and potentially can be adopted by other solutions in Kibana. elastic-charts seems a perfect place for it.

Describe the solution you'd like
It would be great to get some assistance with defining a skeleton code so we can develop the actual implementation of the visualization.

Required features:

• hover and click actions on each cell
• rectangular brush tool to select a subset area
• discrete color ranges
• color legend

Additional context
After swim lane visualization is released in elastic-charts it could become a part of the built-in Kibana visualizations included in the Basic distribution, so there is no need to maintain the kibana-swimlane-vis.

Brush control

Brush selection should support the following:

• Highlight selected cells
• Mask labels on the X and Y axis, and the cells itself that outside of the selection area
• Input props should support initial selection

Example:

Checklist

• this request is checked against already existing requests

[markov00]

I've started working on that, I'd like to prepare a scaffolding for everything and I'd like to provide an initial draft version of the chart so you can work directly on an existing base code.

At the moment I'm testing two solutions:

Build the entire chart in Canvas

Pro:

• rendering as PNG easy and already available
• highly performant (no div to render singularly)

Cons:

• every computation needs to be done manually: measure text, text wrapping

Build it in HTML using CSS Grid

CSS Grids are now supported on every modern browser and Kibana has now deprecated IE11 support

Pro:

• automatic sizing of text, grid, cells based on its content (in particular for the Y axis)
• we can have text highlight and accessibility for "free"

Cons:

• pagination still be computed manually
• no direct PNG generation

[darnautov]

Thanks for the update @markov00! I personally more in favor of the second approach. This visualization doesn't contain a massive amount of elements so performance should be a concern.

[markov00]

@darnautov I've published the first draft for the heatmap chart here: #781
There is also a commented out section with the css grid implementation (partial) but I think it's better if we use the canvas rendering at the moment (we can eventually switch to an HTML version later if we are smart enough to separate the data processing from the rendering process).
The canvas version in a way has already a set of utilities that we can reuse easily to include interactivity and export as PNG (that is something we want to keep on every chart we publish)

[markov00]

Please also remember that we are building the swim lane visualization with the same characteristics of a heatmap, so we should try to keep the scope wide, instead of building a single specific chart for one single use case. This will increase the usability and maintainability of the charts, in the long run.

[markov00]

🎉 This issue has been resolved in version 23.1.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀