Add area chart into sketch pattern library

Problem

We have added areas charts into gitlab-ui, but we currently lack an area chart component for the sketch pattern library/instance sheet.

Solution

Following what's been done for line and column charts, and based on the ECharts component that's been built, recommending the following:

Example(s)

Existing area chart component

Usage

Area charts are used to represent "cumulated totals using numbers or percentages."

In instances where you want to see both the overall trend and the % contribution, it is preferable to use a line chart rather than an area chart. It can be very difficult for our eyes to correctly assess the width of areas and how it trends. More information.

Dos and dont's

✅ Do
If the area represented is a percent of a total amount, consider using a stacked area chart (where the shaded areas do not overlap)
If you are looking to show the trend and the % contribution, consider using a line chart instead

Related patterns

#204 (closed)

#195 (closed)

Links / references

http://www.vizwiz.com/2012/10/stacked-area-chart-vs-line-chart-great.html

Pattern checklist

Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.

1. Read our contribution guidelines, especially the For GitLabbers section.
2. Create a Sketch file in your progress folder just for this pattern and make sure that:
   1. You have not created a duplicate of an existing pattern, symbol, layer style, or text style.
   2. You have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
   3. Typography uses text styles. When applicable, colors use shared styles.
3. Ask a UXer to review your 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.
4. QA of your Sketch file by the reviewer.
5. Add your changes to the pattern library. When copying things over, watch out for duplicated symbols, layer styles, and text styles. Some of our recommended plugins can help you find and remove duplicates.
6. QA of pattern library by the reviewer.
7. Create an issue in the Design System to add the pattern documentation. Mark it as related to this issue.
8. Add an agenda item to the next UX weekly call to inform everyone (if it's a new pattern, not yet used in the application).