Introduce zoom and scroll functionality on metrics charts
Problem to solve
Currently we do not allow users to zoom in to a specific subset of time on a chart. By default, ECharts has two ways to do so, using the zoom + scroll bar and the shortcut icons.
The short-cut icons are being added in a related issue. This issue is specifically for adding the zoom + scroll bar underneath the chart.
Devon, DevOps Engineer, https://design.gitlab.com/research/personas#persona-devon
Sidney, Systems Administrator, https://design.gitlab.com/research/personas#persona-sidney
We should allow users to interact with the chart so they can have a greater degree of control over the view of the data presented.
Still to discuss/confirm:
- When a user zooms in, does this only affect the single chart? Or should it affect the time period for the entire dashboard?
The zoom + scroll bar's appearance changes depending on the chart type. Here is an example of the bar under the one of the metrics charts:
For line and column charts, though, lines are used in the scroll bar, rather than a representation of the area:
The original idea is that the zoom + scroll / selection icons would only appear when the chart's content overflows its container. We could, perhaps, re-evaluate if it should be shown on a more regular basis.