Add treemap chart pattern
Problem
We currently don't have a chart available within the design system which can be used to visualise a tree of data. This has come up with Code Analytics, where we need to be able to visually identify code hotspots with the ability of drilling down a tree of data, i.e. files / folders and sub files / folders.
It is worth solving this in order to provide more useful visual reporting tools to our users.
Solution
The chart library which we make use of, ECharts, provides a great treemap chart which we could pull into our design system as a supplement to the charts which we are already using.
Example(s)
Basic treemap | Flat treemap |
---|---|
Usage
This is going to be used for Code Analytics - specificly for identifying code hotspots. It may be used in other areas where a tree of data needs to be visualised too.
Dos and dont's
|
|
---|---|
Links / references
Treemap from ECharts: https://www.echartsjs.com/en/option.html#series-treemap Issue where this was brought up: gitlab#12683 (closed) Implementation MR for gitlab-ui: gitlab-ui!799 (closed)
Checklist
Make sure these are completed before closing the issue, with a link to the relevant commit or issue, if applicable. Get familiar with the Sketch UI Kit documentation which has information on updating files, structure, fonts, and symbols.
-
Author: Create a Sketch file in your progress folder with the changes required for this issue. Try to use existing symbols, layer styles, and text styles. -
Author: Ask another Product Designer to review your personal Sketch file, linking them to your latest commit so they know where to find it. If they have the capacity, they should assign themselves to this issue. If not, try pinging another person. -
Reviewer: Review and approve author's changes in their personal Sketch file, according to the workflow. -
Author: Add your changes to the GitLab Sketch UI Kit (pattern library and/or instance sheet), following this step-by-step process. -
Author: Ask the reviewer to review your changes to the Sketch UI Kit files. -
Reviewer: Review and approve author's changes to the Sketch UI Kit files, according to the workflow. -
Author: Create an issue in the Design System to update the design specs and documentation. Mark it as related to this issue. -
Author: Add a read only (FYI) agenda item to the next UX weekly call to inform everyone of these changes, linking to this issue.