Add shortcuts for echart chart component
Implement gitlab-design#237 (closed) in our chart components in gitlab-ui. These icons appear when the chart overflows its container, at which point the scroll bar also appears.
Design
This issue is to add the icons to the top of the chart (the scroll bar will be implemented separately):
- Icons are grey-300 (
CCCCCC
) by default, grey-700 (707070
) on hover/when active. - Icons are 8px apart, and 8px above the uppermost y-axis line
Interactions
Following what's currently done in ECharts, there are a number of icon interactions:
- On hover, icons highlight and have a tooltip explaining their functionality:
- When the 'selection' icon has been activated, it is highlighted:
- After a selection has been made, the 'remove-selection' icon is also highlighted to show that it is now available to use. Also showing the tooltip for that one:
- Final two tooltips are as follows:
Icon files
Edited by Amelia Bauerly