Move GitLab Insights to use gitlab-ui instead of charts.js

Following up on the proposal in gitlab-insights#72 (closed)

  1. Replace on the long/medium run gitlab-insights charts.js charts with gitlab-ui charts

We should plan out the transition process of switching the existing charts.js component and use our official gitlab-ui charts.

Current charts

In order of priority.

  1. Bar charts
  2. Stacked bar charts
  3. Trendlines on bar charts (stacked and non stacked)
  4. Piecharts
  5. Line charts

You can look at the current support charts for insights at https://docs.gitlab.com/ee/user/project/insights/#type

Design details

Existing dashboards can be rebuilt using the existing stacked and unstacked column chart components. Examples of how this could look:

ee_11954-move-gitlab-insights-to-use-gitlab-ui

ee_11954-move-gitlab-insights-to-use-gitlab-ui-2

A line chart component also exists, should it be needed. We currently recommend replacing pie charts with column charts.

Trendlines will be addressed as part of a separate issue: https://gitlab.com/gitlab-org/gitlab-ee/issues/12790

Future charts

Edited by Amelia Bauerly