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.
Both the zoom + scroll bar and the shortcut icons have been re-designed to fit within the GitLab UI. These components are now ready to be added into the metrics dashboard and gitlab-ui.
The short-cut icons are being added in a related issue. This issue is specifically for adding the zoom + scroll bar underneath the chart.
Target audience
-
Devon, DevOps Engineer, https://design.gitlab.com/research/personas#persona-devon
-
Sidney, Systems Administrator, https://design.gitlab.com/research/personas#persona-sidney
Proposal
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?
Design
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.
