Merge branch 'add-utils-methods-for-ca-duration-chart-median-line' into 'master'

Add cycle analytics median line data utils

See merge request gitlab-org/gitlab!22802

ee/app/assets/javascripts/analytics/cycle_analytics/utils.js

@@ -2,7 +2,15 @@ import { isString, isNumber } from 'underscore';
 import dateFormat from 'dateformat';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { convertToSnakeCase } from '~/lib/utils/text_utility';
-import { newDate, dayAfter, secondsToDays, getDatesInRange } from '~/lib/utils/datetime_utility';
+import {
+  newDate,
+  dayAfter,
+  secondsToDays,
+  getDatesInRange,
+  getDayDifference,
+  getDateInPast,
+  getDateInFuture,
+} from '~/lib/utils/datetime_utility';
 import { dateFormats } from '../shared/constants';
 import { STAGE_NAME } from './constants';
 import { toYmd } from '../shared/utils';
@@ -173,7 +181,7 @@ export const flattenDurationChartData = data =>
  *
  * @param {Array} data - The duration data for selected stages
  * @param {Date} startDate - The globally selected cycle analytics start date
- * @param {Date} endDate - The globally selected cycle analytics stendart date
+ * @param {Date} endDate - The globally selected cycle analytics end date
  * @returns {Array} An array with each item being another arry of three items (plottable date, computed total, tooltip display date)
  */
 export const getDurationChartData = (data, startDate, endDate) => {
@@ -196,6 +204,42 @@ export const getDurationChartData = (data, startDate, endDate) => {
   return eventData;
 };
 
+/**
+ * Takes the offset duration data for selected stages and calls getDurationChartData to compute the totals.
+ * The data is then transformed into a format expected by the scatterplot;
+ *
+ * [
+ *   ['2019-09-02', 7],
+ *   ...
+ * ]
+ *
+ * The transformation works by calling getDateInPast on the provided startDate and endDate in order to match
+ * the startDate and endDate fetched when making the API call to fetch the data.
+ *
+ * In order to map the offset data to plottable points within the chart's range, getDateInFuture is called
+ * on the data series with the same offest used for getDateInPast. This creates plottable data that matches up
+ * with the data being displayed on the chart.
+ *
+ * @param {Array} data - The computed, plottable duration chart data
+ * @param {Date} startDate - The globally selected cycle analytics start date
+ * @param {Date} endDate - The globally selected cycle analytics end date
+ * @returns {Array} An array with each item being another arry of two items (date, computed total)
+ */
+export const getDurationChartMedianData = (data, startDate, endDate) => {
+  const offsetValue = getDayDifference(startDate, endDate);
+  const offsetEndDate = getDateInPast(endDate, offsetValue);
+  const offsetStartDate = getDateInPast(startDate, offsetValue);
+
+  const offsetDurationData = getDurationChartData(data, offsetStartDate, offsetEndDate);
+
+  const result = offsetDurationData.map(event => [
+    dateFormat(getDateInFuture(new Date(event[0]), offsetValue), dateFormats.isoDate),
+    event[1],
+  ]);
+
+  return result;
+};
+
 export const orderByDate = (a, b, dateFmt = datetime => new Date(datetime).getTime()) =>
   dateFmt(a) - dateFmt(b);
 

ee/spec/frontend/analytics/cycle_analytics/mock_data.js

@@ -174,3 +174,29 @@ export const durationChartPlottableData = [
   ['2019-01-01', 29, '2019-01-01'],
   ['2019-01-02', 100, '2019-01-02'],
 ];
+
+export const rawDurationMedianData = [
+  {
+    duration_in_seconds: 1234000,
+    finished_at: '2018-12-01T00:00:00.000Z',
+  },
+  {
+    duration_in_seconds: 4321000,
+    finished_at: '2018-12-02T00:00:00.000Z',
+  },
+];
+
+export const transformedDurationMedianData = [
+  {
+    slug: 1,
+    selected: true,
+    data: rawDurationMedianData,
+  },
+  {
+    slug: 2,
+    selected: true,
+    data: rawDurationMedianData,
+  },
+];
+
+export const durationChartPlottableMedianData = [['2018-12-31', 29], ['2019-01-01', 100]];

ee/spec/frontend/analytics/cycle_analytics/utils_spec.js

@@ -10,6 +10,7 @@ import {
   nestQueryStringKeys,
   flattenDurationChartData,
   getDurationChartData,
+  getDurationChartMedianData,
   transformRawStages,
   isPersistedStage,
   getTasksByTypeData,
@@ -23,8 +24,10 @@ import {
   labelStopEvent,
   customStageStartEvents as startEvents,
   transformedDurationData,
+  transformedDurationMedianData,
   flattenedDurationData,
   durationChartPlottableData,
+  durationChartPlottableMedianData,
   startDate,
   endDate,
   issueStage,
@@ -165,6 +168,18 @@ describe('Cycle analytics utils', () => {
     });
   });
 
+  describe('getDurationChartMedianData', () => {
+    it('computes the plottable data as expected', () => {
+      const plottableData = getDurationChartMedianData(
+        transformedDurationMedianData,
+        startDate,
+        endDate,
+      );
+
+      expect(plottableData).toStrictEqual(durationChartPlottableMedianData);
+    });
+  });
+
   describe('transformRawStages', () => {
     it('retains all the stage properties', () => {
       const transformed = transformRawStages([issueStage, rawCustomStage]);