Pajamas UI Kit > Gauge chart

<!-- Start by making a copy of the component template to your own drafts.

In Figma:
1. Duplicate the component template https://www.figma.com/file/OmvFfWkqEsdGhXAND133ou/Component?node-id=0%3A1
2. Open the duplicate, then use the dropdown next to the file name to select “Move to Project…”
   and select your Drafts as the new location.
3. Update the template with your component name and start designing ;)
-->

### Description

Gauge chart visualization is useful for monitoring the status of a metric in real time, and to quickly convey the status of the metric in relation to the ranges or a threshold set by the user. A gauge chart is a single metric chart.

#### Example use case

An SRE viewing metrics in the Metrics dashboard when investigating an incident. A gauge chart instantly communicates to the user the status of the metric, even when viewed at a small size. At a glance the user understands whether the value is falling within an acceptable range.

#### Requirements

- The chart should clearly communicate the current value and show where that value falls within the ranges set by the user (2 or 3 ranges can be set).
- Users can set alerts on the metric, so we need to make sure that when the alert is firing it's immediately visible
- The value ranges don't have to coincide with the alert threshold. The user should be able to set an alert for any value regardless of what range it falls into
- The chart should be readable even at a very small size. It's not uncommon for our users to have multiple gauge charts crammed into a small dashboard area to form a "speedometer" of sort. Check out [one of the GitLab dashboards ](https://dashboards.gitlab.com/d/sv_pUrImz/ci-autoscaled-machines-metrics?orgId=1&refresh=5m&from=now-30d&to=now&var-dc=All&var-runner_group=All&var-cpu_mode=nice)for an example. Currently, GitLab Metrics charts aren't resizeable, but they will be in the future.

#### States/ variants

- [x] Alert set
- [x] Alert firing
- [x] Low range, mid range, high range
- [x] Large (expanded chart view)
- [x] Small (50%)

### Additional details

We will be building the chart using the [Gauge e-charts component.](https://echarts.apache.org/examples/en/editor.html?c=gauge)

Notes for the docs:
- Leave a note in the component description that states that the header is mandatory but the size should vary depending on page content/hierarchy. 

<!--Add a short description of the component. If it’s helpful, add a checklist of variations
and states to the description so that a reviewer can be sure to cross reference everything
that has been completed.-->

<!--Use the Figma share feature and make sure that “anyone with the link” can view. Then,
specifically invite the reviewer with “edit” permissions selected. Anyone can duplicate the
file to their own drafts and edit from there, but the reviewer can directly edit and
collaborate on the file. This will help maintain the integrity of the initial draft.-->

### WIP Proposal

| Medium range | With an alert | With a firing alert |
| ------ | ------ | ------ |
|![Medium_range](/uploads/e7a479f674b47c388a437523bbb7e2a5/Medium_range.png) | ![Gauge_chart_with_alert](/uploads/2428ae6ed48ec615d1828405bca521b2/Gauge_chart_with_alert.png) | ![Gauge_chart_with_firing_alert](/uploads/70daa8d0c1878960f3fdd001d12ca49e/Gauge_chart_with_firing_alert.png) |

### Figma component

[View component in Figma →](https://www.figma.com/file/rxA1gTpS6L7wMhAs9rZnaU/Gauge-chart?node-id=0%3A1)

### Checklist

Make sure the following are completed before closing the issue:

1. [x] **Assignee**: Create component in your own draft file in Figma using the
[component template](https://www.figma.com/file/OmvFfWkqEsdGhXAND133ou/%5BComponent%5D),
including all variations and states.
1. [x] **Assignee**: Update the link to the Figma file in the issue description.
1. [x] **Assignee**: Ask a [FE/UX Foundations designer](https://about.gitlab.com/company/team/?department=fe-ux-foundations-team)
to review your component (ensure they have edit permissions in Figma).
1. [ ] **Reviewer**: Review and approve assignee’s addition. Ensure that design
includes all variations/states.
1. [ ] **Reviewer**: Assign to a [Figma maintainer](https://about.gitlab.com/handbook/engineering/projects/#design.gitlab.com) for final review (make sure they have edit permissions in Figma).
1. [ ] **Maintainer**: Review and approve assignee’s addition.
1. [ ] **Maintainer**: Add the design to the **Pajamas UI Kit** file, ~~and view
the component in the Assets panel to ensure it aligns with what’s outlined in the
[document and asset library structure](https://gitlab.com/gitlab-org/gitlab-design/-/blob/master/CONTRIBUTING-Figma.md#document-and-asset-library-structure) documentation.~~ (Not applicable for the chart.)
1. [-] **Maintainer**: Publish the library changes along with a clear commit message.
1. [ ] **Assignee**: Move the draft file to the **Component archive** Figma project. If you’re a community contributor, we ask that you [transfer ownership of your draft file](https://help.figma.com/hc/en-us/articles/360040530853) to the maintainer so they can move it to our archive, along with its version history and comments.
1. [ ] **Assignee** (or Maintainer, for community contributions): If it's a new
pattern or a significant change, add an agenda item to the next UX weekly call
to inform everyone.
1. [ ] **Assignee**: Create a merge request in this repository with the [component-guideline template](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/master/.gitlab/merge_request_templates/component-guideline.md)
to create or update the component's documentation page. Link it here as a related
merge request. Use `View design in Pajamas UI Kit →` for the link text. This replaces
any link to Sketch Measure specs. Anyone with the link should be able to view the file. 
1. [x] **Assignee**: [Create an issue in GitLab UI](https://gitlab.com/gitlab-org/gitlab-ui/-/issues/new)
to build or update the component. Mark the new issue as related to this one.
1. [ ] **Assignee**: 🎉 Congrats, you made it! You can now close this issue.

Story points: 3.0