Prettify MR Analytics tooltip

Move data transformation into util function to make
testing easier.

ee/app/assets/javascripts/analytics/merge_request_analytics/components/throughput_chart.vue

@@ -6,6 +6,7 @@ import ChartSkeletonLoader from '~/vue_shared/components/resizable_chart/skeleto
 import { filterToQueryObject } from '~/vue_shared/components/filtered_search_bar/filtered_search_utils';
 import throughputChartQueryBuilder from '../graphql/throughput_chart_query_builder';
 import { THROUGHPUT_CHART_STRINGS } from '../constants';
+import { formatThroughputChartData } from '../utils';
 
 export default {
   name: 'ThroughputChart',
@@ -75,7 +76,7 @@ export default {
           type: 'category',
           axisLabel: {
             formatter: value => {
-              return value.split('_')[0]; // Aug_2020 => Aug
+              return value.split(' ')[0]; // Aug 2020 => Aug
             },
           },
         },
@@ -85,18 +86,7 @@ export default {
       };
     },
     formattedThroughputChartData() {
-      if (!this.throughputChartData) return [];
-
-      const data = Object.keys(this.throughputChartData)
-        .slice(0, -1) // Remove the __typeName key
-        .map(value => [value, this.throughputChartData[value].count]);
-
-      return [
-        {
-          name: THROUGHPUT_CHART_STRINGS.Y_AXIS_TITLE,
-          data,
-        },
-      ];
+      return formatThroughputChartData(this.throughputChartData);
     },
     chartDataLoading() {
       return !this.hasError && this.$apollo.queries.throughputChartData.loading;

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

 import dateFormat from 'dateformat';
 import { getMonthNames, dateFromParams } from '~/lib/utils/datetime_utility';
 import { dateFormats } from '../shared/constants';
+import { THROUGHPUT_CHART_STRINGS } from './constants';
 
 /**
  * A utility function which accepts a date range and returns
  * computed month data which is required to build the GraphQL
  * query for the Throughput Analytics chart
  *
- * This does not currently support days;
- *
- * `mergedAfter` will always be the first day of the month
- * `mergedBefore` will always be the first day of the following month
- *
  * @param {Date} startDate the startDate for the data range
  * @param {Date} endDate the endDate for the data range
  * @param {String} format the date format to be used
@@ -48,3 +44,26 @@ export const computeMonthRangeData = (startDate, endDate, format = dateFormats.i
 
   return monthData;
 };
+
+/**
+ * A utility function which accepts the raw throughput chart data
+ * and transforms it into the format required for the area chart.
+ *
+ * @param {Object} chartData the raw chart data
+ *
+ * @return {Array} the formatted chart data
+ */
+export const formatThroughputChartData = chartData => {
+  if (!chartData) return [];
+
+  const data = Object.keys(chartData)
+    .slice(0, -1) // Remove the __typeName key
+    .map(value => [value.split('_').join(' '), chartData[value].count]); // key: Aug_2020 => Aug 2020
+
+  return [
+    {
+      name: THROUGHPUT_CHART_STRINGS.Y_AXIS_TITLE,
+      data,
+    },
+  ];
+};

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

+import { THROUGHPUT_CHART_STRINGS } from 'ee/analytics/merge_request_analytics/constants';
+
 export const startDate = new Date('2020-05-01');
 export const endDate = new Date('2020-08-01');
 
 export const fullPath = 'gitlab-org/gitlab';
 
 export const throughputChartData = {
-  May: { count: 2, __typename: 'MergeRequestConnection' },
-  Jun: { count: 4, __typename: 'MergeRequestConnection' },
-  Jul: { count: 3, __typename: 'MergeRequestConnection' },
+  May_2020: { count: 2, __typename: 'MergeRequestConnection' },
+  Jun_2020: { count: 4, __typename: 'MergeRequestConnection' },
+  Jul_2020: { count: 3, __typename: 'MergeRequestConnection' },
   __typename: 'Project',
 };
 
+export const formattedThroughputChartData = [
+  {
+    data: [['May 2020', 2], ['Jun 2020', 4], ['Jul 2020', 3]],
+    name: THROUGHPUT_CHART_STRINGS.Y_AXIS_TITLE,
+  },
+];
+
 export const expectedMonthData = [
   {
     year: 2020,

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

 import * as utils from 'ee/analytics/merge_request_analytics/utils';
-import { expectedMonthData } from './mock_data';
+import { expectedMonthData, throughputChartData, formattedThroughputChartData } from './mock_data';
 
 describe('computeMonthRangeData', () => {
   const start = new Date('2020-05-17T00:00:00.000Z');
   const end = new Date('2020-07-17T00:00:00.000Z');
 
-  it('returns the data es acpected', () => {
+  it('returns the data as expected', () => {
     const monthData = utils.computeMonthRangeData(start, end);
 
     expect(monthData).toStrictEqual(expectedMonthData);
@@ -17,3 +17,17 @@ describe('computeMonthRangeData', () => {
     expect(monthData).toStrictEqual([]);
   });
 });
+
+describe('formatThroughputChartData', () => {
+  it('returns the data as expected', () => {
+    const chartData = utils.formatThroughputChartData(throughputChartData);
+
+    expect(chartData).toStrictEqual(formattedThroughputChartData);
+  });
+
+  it('returns an empty array if no data is passed to the util', () => {
+    const chartData = utils.formatThroughputChartData();
+
+    expect(chartData).toStrictEqual([]);
+  });
+});