Merge branch '342984-display-average-median-for-dora4-in-graphs' into 'master'

Display average for Deployment Frequency in CI/CD Analytics

See merge request gitlab-org/gitlab!78358

ee/app/assets/javascripts/dora/components/deployment_frequency_charts.vue

@@ -2,12 +2,14 @@
 import * as Sentry from '@sentry/browser';
 import * as DoraApi from 'ee/api/dora_api';
 import createFlash from '~/flash';
-import { s__ } from '~/locale';
+import { s__, sprintf } from '~/locale';
 import CiCdAnalyticsCharts from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue';
 import DoraChartHeader from './dora_chart_header.vue';
 import {
   allChartDefinitions,
   areaChartOptions,
+  averageSeriesOptions,
+  averageSeriesName,
   chartDescriptionText,
   chartDocumentationHref,
   LAST_WEEK,
@@ -15,7 +17,7 @@ import {
   LAST_90_DAYS,
   CHART_TITLE,
 } from './static_data/deployment_frequency';
-import { apiDataToChartSeries } from './util';
+import { apiDataToChartSeries, seriesToAverageSeries } from './util';
 
 export default {
   name: 'DeploymentFrequencyCharts',
@@ -33,6 +35,11 @@ export default {
       default: '',
     },
   },
+  chartInDays: {
+    [LAST_WEEK]: 7,
+    [LAST_MONTH]: 30,
+    [LAST_90_DAYS]: 90,
+  },
   data() {
     return {
       chartData: {
@@ -76,7 +83,19 @@ export default {
           throw new Error('Either projectPath or groupPath must be provided');
         }
 
-        this.chartData[id] = apiDataToChartSeries(apiData, startDate, endDate, CHART_TITLE);
+        const seriesData = apiDataToChartSeries(apiData, startDate, endDate, CHART_TITLE);
+        const { data } = seriesData[0];
+
+        this.chartData[id] = [
+          ...seriesData,
+          {
+            ...averageSeriesOptions,
+            ...seriesToAverageSeries(
+              data,
+              sprintf(averageSeriesName, { days: this.$options.chartInDays[id] }),
+            ),
+          },
+        ];
       }),
     );
 

ee/app/assets/javascripts/dora/components/static_data/deployment_frequency.js

@@ -3,6 +3,8 @@ import { s__ } from '~/locale';
 
 export * from './shared';
 
+export const averageSeriesName = s__('DORA4Metrics|Average (last %{days}d)');
+
 export const CHART_TITLE = s__('DORA4Metrics|Deployment frequency');
 
 export const areaChartOptions = {

ee/app/assets/javascripts/dora/components/static_data/shared.js

@@ -36,6 +36,12 @@ const sharedRequestParams = {
   per_page: 100,
 };
 
+export const averageSeriesOptions = {
+  areaStyle: {
+    opacity: 0,
+  },
+};
+
 export const allChartDefinitions = [
   {
     id: LAST_WEEK,

ee/app/assets/javascripts/dora/components/util.js

@@ -147,3 +147,24 @@ export const buildNullSeriesForLeadTimeChart = (seriesData) => {
 
   return [nullSeries, nonNullSeries];
 };
+
+/**
+ * Converts a data series into a formatted average series
+ *
+ * @param {Array} chartSeriesData Correctly formatted chart series data
+ *
+ * @returns {Object} An object containing the series name and an array of original data keys with the average of the dataset as each value.
+ */
+export const seriesToAverageSeries = (chartSeriesData, seriesName) => {
+  if (!chartSeriesData) return {};
+
+  const average =
+    Math.round(
+      (chartSeriesData.reduce((acc, day) => acc + day[1], 0) / chartSeriesData.length) * 10,
+    ) / 10;
+
+  return {
+    name: seriesName,
+    data: chartSeriesData.map((day) => [day[0], average]),
+  };
+};

ee/spec/frontend/dora/components/util_spec.js

 import lastWeekData from 'test_fixtures/api/dora/metrics/daily_lead_time_for_changes_for_last_week.json';
-import { apiDataToChartSeries, buildNullSeriesForLeadTimeChart } from 'ee/dora/components/util';
+import {
+  apiDataToChartSeries,
+  buildNullSeriesForLeadTimeChart,
+  seriesToAverageSeries,
+} from 'ee/dora/components/util';
 
 describe('ee/dora/components/util.js', () => {
   describe('apiDataToChartSeries', () => {
@@ -209,4 +213,40 @@ describe('ee/dora/components/util.js', () => {
       expect(chartData).toMatchSnapshot();
     });
   });
+
+  describe('seriesToAverageSeries', () => {
+    const seriesName = 'Average';
+
+    it('returns an empty object if chart data is undefined', () => {
+      const data = seriesToAverageSeries(undefined, seriesName);
+
+      expect(data).toStrictEqual({});
+    });
+
+    it('returns an empty object if chart data is blank', () => {
+      const data = seriesToAverageSeries(null, seriesName);
+
+      expect(data).toStrictEqual({});
+    });
+
+    it('returns the correct average values', () => {
+      const data = seriesToAverageSeries(
+        [
+          ['Jul 1', 2],
+          ['Jul 2', 3],
+          ['Jul 3', 4],
+        ],
+        seriesName,
+      );
+
+      expect(data).toStrictEqual({
+        name: seriesName,
+        data: [
+          ['Jul 1', 3],
+          ['Jul 2', 3],
+          ['Jul 3', 3],
+        ],
+      });
+    });
+  });
 });

locale/gitlab.pot

@@ -10796,6 +10796,9 @@ msgstr ""
 msgid "DORA4Metrics|%{startDate} - %{endDate}"
 msgstr ""
 
+msgid "DORA4Metrics|Average (last %{days}d)"
+msgstr ""
+
 msgid "DORA4Metrics|Date"
 msgstr ""