Support pie charts in Insights

Signed-off-by: Rémy Coutable <remy@rymai.me>

doc/user/project/insights/index.md

@@ -131,6 +131,7 @@ Supported values are:
 | ----- | ------- |
 | `bar` | ![Insights example bar chart](img/insights_example_bar_chart.png) |
 | `bar` (time series, i.e. when `group_by` is used) | ![Insights example bar time series chart](img/insights_example_bar_time_series_chart.png) |
+| `pie` | ![Insights example pie chart](img/insights_example_pie_chart.png) |
 | `line` | ![Insights example stacked bar chart](img/insights_example_line_chart.png) |
 | `stacked-bar` | ![Insights example stacked bar chart](img/insights_example_stacked_bar_chart.png) |
 

ee/app/assets/javascripts/insights/components/chart_js/bar.vue

@@ -3,9 +3,6 @@ import BaseChart from './insights_chart.vue';
 import * as chartOptions from '~/lib/utils/chart_utils';
 
 export default {
-  components: {
-    BaseChart,
-  },
   extends: BaseChart,
   computed: {
     config() {

ee/app/assets/javascripts/insights/components/chart_js/line.vue

@@ -2,9 +2,6 @@
 import BaseChart from './insights_chart.vue';
 
 export default {
-  components: {
-    BaseChart,
-  },
   extends: BaseChart,
   computed: {
     config() {

ee/app/assets/javascripts/insights/components/chart_js/pie.vue

+<script>
+import BaseChart from './insights_chart.vue';
+import * as chartOptions from '~/lib/utils/chart_utils';
+
+export default {
+  extends: BaseChart,
+  computed: {
+    config() {
+      return {
+        type: 'pie',
+        data: this.data,
+        options: {
+          ...chartOptions.pieChartOptions(),
+          ...this.title(),
+          ...this.commonOptions(),
+        },
+      };
+    },
+  },
+};
+</script>
+<template>
+  <div class="chart-canvas-wrapper">
+    <canvas ref="insightsChart" class="pie" height="180"></canvas>
+  </div>
+</template>

ee/app/assets/javascripts/insights/components/chart_js/stacked_bar.vue

@@ -3,9 +3,6 @@ import BaseChart from './insights_chart.vue';
 import * as chartOptions from '~/lib/utils/chart_utils';
 
 export default {
-  components: {
-    BaseChart,
-  },
   extends: BaseChart,
   computed: {
     config() {

ee/app/assets/javascripts/insights/components/insights_page.vue

@@ -7,18 +7,20 @@ import { GlLoadingIcon } from '@gitlab/ui';
 import InsightsChartError from './insights_chart_error.vue';
 import InsightsConfigWarning from './insights_config_warning.vue';
 
-import StackedBar from './chart_js/stacked_bar.vue';
 import Bar from './chart_js/bar.vue';
 import LineChart from './chart_js/line.vue';
+import Pie from './chart_js/pie.vue';
+import StackedBar from './chart_js/stacked_bar.vue';
 
 export default {
   components: {
     GlLoadingIcon,
     InsightsChartError,
     InsightsConfigWarning,
-    StackedBar,
     Bar,
     LineChart,
+    Pie,
+    StackedBar,
   },
   props: {
     queryEndpoint: {

ee/app/controllers/concerns/insights_actions.rb

@@ -65,7 +65,7 @@ module InsightsActions
     case chart_type_param
     when 'stacked-bar', 'line'
       Gitlab::Insights::Reducers::LabelCountPerPeriodReducer.reduce(issuables, period: period_param, period_limit: period_limit, labels: collection_labels_param)
-    when 'bar'
+    when 'bar', 'pie'
       if period_param
         Gitlab::Insights::Reducers::CountPerPeriodReducer.reduce(issuables, period: period_param, period_limit: period_limit)
       else
@@ -84,7 +84,7 @@ module InsightsActions
     case chart_type_param
     when 'stacked-bar'
       Gitlab::Insights::Serializers::Chartjs::MultiSeriesSerializer
-    when 'bar'
+    when 'bar', 'pie'
       if period_param
         Gitlab::Insights::Serializers::Chartjs::BarTimeSeriesSerializer
       else

ee/changelogs/unreleased/11218-support-pie-chart-in-insights.yml

+---
+title: Support pie charts in Insights
+merge_request: 11186
+author:
+type: added