Merge branch '196183-convert-pipelines-last-week-chart-to-echarts' into 'master'

Migrate CI / CD pipelines for the past week chart into VueJS and ECharts.

See merge request gitlab-org/gitlab!24057

app/assets/javascripts/pages/projects/pipelines/charts/index.js

-import $ from 'jquery';
-import Chart from 'chart.js';
-
-import { lineChartOptions } from '~/lib/utils/chart_utils';
-
 import initProjectPipelinesChartsApp from '~/projects/pipelines/charts/index';
 
-const SUCCESS_LINE_COLOR = '#1aaa55';
-
-const TOTAL_LINE_COLOR = '#707070';
-
-const buildChart = (chartScope, shouldAdjustFontSize) => {
-  const data = {
-    labels: chartScope.labels,
-    datasets: [
-      {
-        backgroundColor: SUCCESS_LINE_COLOR,
-        borderColor: SUCCESS_LINE_COLOR,
-        pointBackgroundColor: SUCCESS_LINE_COLOR,
-        pointBorderColor: '#fff',
-        data: chartScope.successValues,
-        fill: 'origin',
-      },
-      {
-        backgroundColor: TOTAL_LINE_COLOR,
-        borderColor: TOTAL_LINE_COLOR,
-        pointBackgroundColor: TOTAL_LINE_COLOR,
-        pointBorderColor: '#EEE',
-        data: chartScope.totalValues,
-        fill: '-1',
-      },
-    ],
-  };
-  const ctx = $(`#${chartScope.scope}Chart`)
-    .get(0)
-    .getContext('2d');
-
-  return new Chart(ctx, {
-    type: 'line',
-    data,
-    options: lineChartOptions({
-      width: ctx.canvas.width,
-      numberOfPoints: chartScope.totalValues.length,
-      shouldAdjustFontSize,
-    }),
-  });
-};
-
-document.addEventListener('DOMContentLoaded', () => {
-  const chartsData = JSON.parse(document.getElementById('pipelinesChartsData').innerHTML);
-
-  // Scale fonts if window width lower than 768px (iPad portrait)
-  const shouldAdjustFontSize = window.innerWidth < 768;
-
-  chartsData.forEach(scope => buildChart(scope, shouldAdjustFontSize));
-});
-
 document.addEventListener('DOMContentLoaded', initProjectPipelinesChartsApp);

app/assets/javascripts/projects/pipelines/charts/components/app.vue

 <script>
+import dateFormat from 'dateformat';
+import { __, sprintf } from '~/locale';
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
+import { getDateInPast } from '~/lib/utils/datetime_utility';
 import StatisticsList from './statistics_list.vue';
+import PipelinesAreaChart from './pipelines_area_chart.vue';
 import {
   CHART_CONTAINER_HEIGHT,
   INNER_CHART_HEIGHT,
   X_AXIS_LABEL_ROTATION,
   X_AXIS_TITLE_OFFSET,
+  CHART_DATE_FORMAT,
+  ONE_WEEK_AGO_DAYS,
+  ONE_MONTH_AGO_DAYS,
 } from '../constants';
 
 export default {
   components: {
     StatisticsList,
     GlColumnChart,
+    PipelinesAreaChart,
   },
   props: {
     counts: {
@@ -22,6 +30,18 @@ export default {
       type: Object,
       required: true,
     },
+    lastWeekChartData: {
+      type: Object,
+      required: true,
+    },
+    lastMonthChartData: {
+      type: Object,
+      required: true,
+    },
+    lastYearChartData: {
+      type: Object,
+      required: true,
+    },
   },
   data() {
     return {
@@ -30,10 +50,38 @@ export default {
       },
     };
   },
+  computed: {
+    areaCharts() {
+      const { lastWeek, lastMonth, lastYear } = this.$options.chartTitles;
+
+      return [
+        this.buildAreaChartData(lastWeek, this.lastWeekChartData),
+        this.buildAreaChartData(lastMonth, this.lastMonthChartData),
+        this.buildAreaChartData(lastYear, this.lastYearChartData),
+      ];
+    },
+  },
   methods: {
     mergeLabelsAndValues(labels, values) {
       return labels.map((label, index) => [label, values[index]]);
     },
+    buildAreaChartData(title, data) {
+      const { labels, totals, success } = data;
+
+      return {
+        title,
+        data: [
+          {
+            name: 'all',
+            data: this.mergeLabelsAndValues(labels, totals),
+          },
+          {
+            name: 'success',
+            data: this.mergeLabelsAndValues(labels, success),
+          },
+        ],
+      };
+    },
   },
   chartContainerHeight: CHART_CONTAINER_HEIGHT,
   timesChartOptions: {
@@ -45,6 +93,22 @@ export default {
       nameGap: X_AXIS_TITLE_OFFSET,
     },
   },
+  get chartTitles() {
+    const today = dateFormat(new Date(), CHART_DATE_FORMAT);
+    const pastDate = timeScale =>
+      dateFormat(getDateInPast(new Date(), timeScale), CHART_DATE_FORMAT);
+    return {
+      lastWeek: sprintf(__('Pipelines for last week (%{oneWeekAgo} - %{today})'), {
+        oneWeekAgo: pastDate(ONE_WEEK_AGO_DAYS),
+        today,
+      }),
+      lastMonth: sprintf(__('Pipelines for last month (%{oneMonthAgo} - %{today})'), {
+        oneMonthAgo: pastDate(ONE_MONTH_AGO_DAYS),
+        today,
+      }),
+      lastYear: __('Pipelines for last year'),
+    };
+  },
 };
 </script>
 <template>
@@ -68,5 +132,14 @@ export default {
         />
       </div>
     </div>
+    <hr />
+    <h4 class="my-4">{{ __('Pipelines charts') }}</h4>
+    <pipelines-area-chart
+      v-for="(chart, index) in areaCharts"
+      :key="index"
+      :chart-data="chart.data"
+    >
+      {{ chart.title }}
+    </pipelines-area-chart>
   </div>
 </template>

app/assets/javascripts/projects/pipelines/charts/components/pipelines_area_chart.vue

+<script>
+import { GlAreaChart } from '@gitlab/ui/dist/charts';
+import { s__ } from '~/locale';
+import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';
+import { CHART_CONTAINER_HEIGHT } from '../constants';
+
+export default {
+  components: {
+    GlAreaChart,
+    ResizableChartContainer,
+  },
+  props: {
+    chartData: {
+      type: Array,
+      required: true,
+    },
+  },
+  areaChartOptions: {
+    xAxis: {
+      name: s__('Pipeline|Date'),
+      type: 'category',
+    },
+    yAxis: {
+      name: s__('Pipeline|Pipelines'),
+    },
+  },
+  chartContainerHeight: CHART_CONTAINER_HEIGHT,
+};
+</script>
+<template>
+  <div class="prepend-top-default">
+    <p>
+      <slot></slot>
+    </p>
+    <resizable-chart-container>
+      <gl-area-chart
+        slot-scope="{ width }"
+        :width="width"
+        :height="$options.chartContainerHeight"
+        :data="chartData"
+        :include-legend-avg-max="false"
+        :option="$options.areaChartOptions"
+      />
+    </resizable-chart-container>
+  </div>
+</template>

app/assets/javascripts/projects/pipelines/charts/constants.js

@@ -5,3 +5,9 @@ export const INNER_CHART_HEIGHT = 200;
 export const X_AXIS_LABEL_ROTATION = 45;
 
 export const X_AXIS_TITLE_OFFSET = 60;
+
+export const ONE_WEEK_AGO_DAYS = 7;
+
+export const ONE_MONTH_AGO_DAYS = 31;
+
+export const CHART_DATE_FORMAT = 'dd mmm';

app/assets/javascripts/projects/pipelines/charts/index.js

@@ -10,8 +10,23 @@ export default () => {
     successRatio,
     timesChartLabels,
     timesChartValues,
+    lastWeekChartLabels,
+    lastWeekChartTotals,
+    lastWeekChartSuccess,
+    lastMonthChartLabels,
+    lastMonthChartTotals,
+    lastMonthChartSuccess,
+    lastYearChartLabels,
+    lastYearChartTotals,
+    lastYearChartSuccess,
   } = el.dataset;
 
+  const parseAreaChartData = (labels, totals, success) => ({
+    labels: JSON.parse(labels),
+    totals: JSON.parse(totals),
+    success: JSON.parse(success),
+  });
+
   return new Vue({
     el,
     name: 'ProjectPipelinesChartsApp',
@@ -31,6 +46,21 @@ export default () => {
             labels: JSON.parse(timesChartLabels),
             values: JSON.parse(timesChartValues),
           },
+          lastWeekChartData: parseAreaChartData(
+            lastWeekChartLabels,
+            lastWeekChartTotals,
+            lastWeekChartSuccess,
+          ),
+          lastMonthChartData: parseAreaChartData(
+            lastMonthChartLabels,
+            lastMonthChartTotals,
+            lastMonthChartSuccess,
+          ),
+          lastYearChartData: parseAreaChartData(
+            lastYearChartLabels,
+            lastYearChartTotals,
+            lastYearChartSuccess,
+          ),
         },
       }),
   });

app/views/projects/pipelines/charts.html.haml

 - page_title _('CI / CD Charts')
 
-#js-project-pipelines-charts-app{ data: { counts: @counts, success_ratio: success_ratio(@counts), times_chart: { labels: @charts[:pipeline_times].labels, values: @charts[:pipeline_times].pipeline_times } } }
-
-#charts.ci-charts
-  %hr
-  = render 'projects/pipelines/charts/pipelines'
+#js-project-pipelines-charts-app{ data: { counts: @counts, success_ratio: success_ratio(@counts),
+  times_chart: { labels: @charts[:pipeline_times].labels, values: @charts[:pipeline_times].pipeline_times },
+  last_week_chart: { labels: @charts[:week].labels, totals: @charts[:week].total, success: @charts[:week].success },
+  last_month_chart: { labels: @charts[:month].labels, totals: @charts[:month].total, success: @charts[:month].success },
+  last_year_chart: { labels: @charts[:year].labels, totals: @charts[:year].total, success: @charts[:year].success } } }

app/views/projects/pipelines/charts/_pipelines.haml

-%h4.mt-4.mb-4= _("Pipelines charts")
-%p
-   
-  %span.legend-success
-    = icon("circle")
-    = s_("Pipeline|success")
-   
-  %span.legend-all
-    = icon("circle")
-    = s_("Pipeline|all")
-
-.prepend-top-default
-  %p.light
-    = _("Pipelines for last week")
-    (#{date_from_to(Date.today - 7.days, Date.today)})
-  %div
-    %canvas#weekChart{ height: 200 }
-
-.prepend-top-default
-  %p.light
-    = _("Pipelines for last month")
-    (#{date_from_to(Date.today - 30.days, Date.today)})
-  %div
-    %canvas#monthChart{ height: 200 }
-
-.prepend-top-default
-  %p.light
-    = _("Pipelines for last year")
-  %div
-    %canvas#yearChart.padded{ height: 250 }
-
--# haml-lint:disable InlineJavaScript
-%script#pipelinesChartsData{ type: "application/json" }
-  - chartData = []
-  - [:week, :month, :year].each do |scope|
-    - chartData.push({ 'scope' => scope, 'labels' => @charts[scope].labels, 'totalValues' => @charts[scope].total, 'successValues' => @charts[scope].success })
-  = chartData.to_json.html_safe

changelogs/unreleased/196183-convert-pipelines-last-week-chart-to-echarts.yml

+---
+title: Migrate CI CD pipelines charts to ECharts
+merge_request: 24057
+author:
+type: changed

locale/gitlab.pot

@@ -13672,10 +13672,10 @@ msgstr ""
 msgid "Pipelines emails"
 msgstr ""
 
-msgid "Pipelines for last month"
+msgid "Pipelines for last month (%{oneMonthAgo} - %{today})"
 msgstr ""
 
-msgid "Pipelines for last week"
+msgid "Pipelines for last week (%{oneWeekAgo} - %{today})"
 msgstr ""
 
 msgid "Pipelines for last year"
@@ -13759,6 +13759,9 @@ msgstr ""
 msgid "Pipeline|Coverage"
 msgstr ""
 
+msgid "Pipeline|Date"
+msgstr ""
+
 msgid "Pipeline|Detached merge request pipeline"
 msgstr ""
 
@@ -13780,6 +13783,9 @@ msgstr ""
 msgid "Pipeline|Pipeline"
 msgstr ""
 
+msgid "Pipeline|Pipelines"
+msgstr ""
+
 msgid "Pipeline|Run Pipeline"
 msgstr ""
 
@@ -13816,18 +13822,12 @@ msgstr ""
 msgid "Pipeline|You’re about to stop pipeline %{pipelineId}."
 msgstr ""
 
-msgid "Pipeline|all"
-msgstr ""
-
 msgid "Pipeline|for"
 msgstr ""
 
 msgid "Pipeline|on"
 msgstr ""
 
-msgid "Pipeline|success"
-msgstr ""
-
 msgid "Pipeline|with stage"
 msgstr ""
 

spec/frontend/projects/pipelines/charts/components/__snapshots__/pipelines_area_chart_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PipelinesAreaChart matches the snapshot 1`] = `
+<div
+  class="prepend-top-default"
+>
+  <p>
+    Some title
+  </p>
+   
+  <div>
+    <glareachart-stub
+      data="[object Object],[object Object]"
+      height="300"
+      legendaveragetext="Avg"
+      legendmaxtext="Max"
+      option="[object Object]"
+      thresholds=""
+      width="0"
+    />
+  </div>
+</div>
+`;

spec/frontend/projects/pipelines/charts/components/app_spec.js

@@ -2,7 +2,14 @@ import { shallowMount } from '@vue/test-utils';
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
 import Component from '~/projects/pipelines/charts/components/app.vue';
 import StatisticsList from '~/projects/pipelines/charts/components/statistics_list.vue';
-import { counts, timesChartData } from '../mock_data';
+import PipelinesAreaChart from '~/projects/pipelines/charts/components/pipelines_area_chart.vue';
+import {
+  counts,
+  timesChartData,
+  areaChartData as lastWeekChartData,
+  areaChartData as lastMonthChartData,
+  lastYearChartData,
+} from '../mock_data';
 
 describe('ProjectsPipelinesChartsApp', () => {
   let wrapper;
@@ -12,6 +19,9 @@ describe('ProjectsPipelinesChartsApp', () => {
       propsData: {
         counts,
         timesChartData,
+        lastWeekChartData,
+        lastMonthChartData,
+        lastYearChartData,
       },
     });
   });
@@ -39,4 +49,24 @@ describe('ProjectsPipelinesChartsApp', () => {
       expect(chart.props('option')).toBe(wrapper.vm.$options.timesChartOptions);
     });
   });
+
+  describe('pipelines charts', () => {
+    it('displays 3 area charts', () => {
+      expect(wrapper.findAll(PipelinesAreaChart).length).toBe(3);
+    });
+
+    describe('displays individual correctly', () => {
+      it('renders with the correct data', () => {
+        const charts = wrapper.findAll(PipelinesAreaChart);
+
+        for (let i = 0; i < charts.length; i += 1) {
+          const chart = charts.at(i);
+
+          expect(chart.exists()).toBeTruthy();
+          expect(chart.props('chartData')).toBe(wrapper.vm.areaCharts[i].data);
+          expect(chart.text()).toBe(wrapper.vm.areaCharts[i].title);
+        }
+      });
+    });
+  });
 });

spec/frontend/projects/pipelines/charts/components/pipelines_area_chart_spec.js

+import { mount } from '@vue/test-utils';
+import Component from '~/projects/pipelines/charts/components/pipelines_area_chart.vue';
+import { transformedAreaChartData } from '../mock_data';
+
+describe('PipelinesAreaChart', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(Component, {
+      propsData: {
+        chartData: transformedAreaChartData,
+      },
+      slots: {
+        default: 'Some title',
+      },
+      stubs: {
+        GlAreaChart: true,
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('matches the snapshot', () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});

spec/frontend/projects/pipelines/charts/mock_data.js

@@ -9,3 +9,25 @@ export const timesChartData = {
   labels: ['as1234', 'kh423hy', 'ji56bvg', 'th23po'],
   values: [5, 3, 7, 4],
 };
+
+export const areaChartData = {
+  labels: ['01 Jan', '02 Jan', '03 Jan', '04 Jan', '05 Jan'],
+  totals: [4, 6, 3, 6, 7],
+  success: [3, 5, 3, 3, 5],
+};
+
+export const lastYearChartData = {
+  ...areaChartData,
+  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+};
+
+export const transformedAreaChartData = [
+  {
+    name: 'all',
+    data: [['01 Jan', 4], ['02 Jan', 6], ['03 Jan', 3], ['04 Jan', 6], ['05 Jan', 7]],
+  },
+  {
+    name: 'success',
+    data: [['01 Jan', 3], ['02 Jan', 3], ['03 Jan', 3], ['04 Jan', 3], ['05 Jan', 5]],
+  },
+];