New Icons for Charts
Problem
With ECharts, our new charting framework, we have some great functionalities for selection and downloading charts built in. They have icons in place for these actions by default, some of which we have direct equivalents for in the pattern library. We are need to create new icons to replace the ones we don't already have equivalents for, in particular, the the marquee selection tool, clear all, and the the scroll handle.
Example(s)
Current ECharts icons:
Solution
Proposed icons to replace the existing ECharts defaults:
As the icons for 'redo' and 'download' are already part of the pattern library, only the marquee selection icon (top row, far left), clear all (top row, second from right) and the scroll handle (bottom row) are new.
Usage
These icons would be used for the charts. The scroll handle will be used to control the zoom + scroll bar, and the marquee selection tool and 'clear all' icons would be used as part of the controls that appear above the charts by default in ECharts, and that help the user interact with and zoom into the chart.
Dos and dont's
(Use this table to add images and text describing what’s ok and not ok.)
|
---|
Feel free to use these icons anywhere else they are useful |
Related patterns
These icons are related to the zoom + scroll control in #221 (closed)
Pattern checklist
Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.
-
Ensure that you have broken things down into atoms, molecules, and organisms. -
Check that you have not created a duplicate of an existing pattern. -
Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups. -
Make sure that typography is using text styles. When applicable used shared styles for colors. -
QA check by another UXer -
Add changes to the pattern library -
Add the icons to the SVG library -
Add an agenda item to the next UX weekly call to inform everyone (if new pattern, not yet used in the application)