### Numeric Metrics

```jsx
import Flex from '@ui/components/Flex';

<Flex text="center" justify="around">
  <Metric data=".98s">
    <em>Average Response Time</em>
  </Metric>
</Flex>
```

### Chart Metrics

Create a chart metric by setting the `[chart="type"]` prop on your `<Metric/>` component and passing a chart object to the `[data]` prop. Check out [**the ChartJS docs**](https://github.com/jerairrest/react-chartjs-2) for more information on configuring different types of charts.

```jsx
import Flex from '@ui/components/Flex';

<Flex align="center" justify="around" text="left">
  <Metric
    chart='doughnut'
    data={{
      labels: ['200', '400', '404'],
      datasets: [
        {
          data: [300, 100, 50],
          backgroundColor: ['#118CFD', '#C3E2FE', '#8ABFFE'],
          hoverBackgroundColor: ['#118CFD', '#C3E2FE', '#8ABFFE'],
          hoverBorderColor: ['#fff', '#fff', '#fff'],
          borderWidth: 3,
        },
      ],
      options: {
        tooltips: {
          mode: 'point',
          callbacks: {
            label: (tip, obj) => {
              const { labels, datasets } = obj;
              const { data } = datasets[0];
              const sum = data.reduce((a, b) => a + b, 0);
              const val = (data[tip.index]/sum * 100).toFixed(1);
              const key = labels[tip.index];
              return `${key}: ${val}%`;
            },
          },
        },
      }
    }}
  />
  <Metric data=".98s">
    <em>Average Response Time</em>
  </Metric>
</Flex>
```
