Merge branch '342812-leverage-shared-getgetdatazoomoption-in-productivity-analytics' into 'master'

Leverage shared getGetDataZoomOption in Productivity Analytics

See merge request gitlab-org/gitlab!72128

ee/app/assets/javascripts/analytics/productivity_analytics/components/app.vue

@@ -13,11 +13,16 @@ import { GlColumnChart } from '@gitlab/ui/dist/charts';
 import dateFormat from 'dateformat';
 import { mapState, mapActions, mapGetters } from 'vuex';
 import { dateFormats } from '~/analytics/shared/constants';
+import { getDataZoomOption } from '~/analytics/shared/utils';
 import { beginOfDayTime, endOfDayTime } from '~/lib/utils/datetime_utility';
 import featureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import Scatterplot from '../../shared/components/scatterplot.vue';
 import urlSyncMixin from '../../shared/mixins/url_sync_mixin';
-import { chartKeys } from '../constants';
+import {
+  chartKeys,
+  defaultMaxColumnChartItemsPerPage,
+  maxColumnChartItemsPerPage,
+} from '../constants';
 import MetricChart from './metric_chart.vue';
 import MergeRequestTable from './mr_table.vue';
 
@@ -76,7 +81,6 @@ export default {
       'chartErrorCode',
       'chartHasData',
       'getColumnChartData',
-      'getColumnChartDatazoomOption',
       'getScatterPlotMainData',
       'getScatterPlotMedianData',
       'getMetricLabel',
@@ -131,6 +135,10 @@ export default {
       this.updateSelectedItems({ chartKey: this.chartKeys.main, item: itemValue });
     },
     getColumnChartOption(chartKey) {
+      const totalItems = this.getColumnChartData(chartKey).length;
+      const maxItemsPerPage = maxColumnChartItemsPerPage[chartKey]
+        ? maxColumnChartItemsPerPage[chartKey]
+        : defaultMaxColumnChartItemsPerPage;
       return {
         yAxis: {
           axisLabel: {
@@ -138,7 +146,7 @@ export default {
           },
           minInterval: 1,
         },
-        ...this.getColumnChartDatazoomOption(chartKey),
+        ...getDataZoomOption({ totalItems, maxItemsPerPage }),
       };
     },
   },

ee/app/assets/javascripts/analytics/productivity_analytics/constants.js

@@ -72,15 +72,6 @@ export const defaultMaxColumnChartItemsPerPage = 20;
 export const maxColumnChartItemsPerPage = {
   [chartKeys.main]: 40,
 };
-
-export const dataZoomOptions = [
-  {
-    type: 'slider',
-    bottom: 10,
-    start: 0,
-  },
-];
-
 /**
  * #418cd8 --> $blue-400 (see variables.scss)
  */

ee/app/assets/javascripts/analytics/productivity_analytics/store/modules/charts/getters.js

@@ -5,9 +5,6 @@ import {
   chartKeys,
   metricTypes,
   columnHighlightStyle,
-  defaultMaxColumnChartItemsPerPage,
-  maxColumnChartItemsPerPage,
-  dataZoomOptions,
   scatterPlotAddonQueryDays,
   daysToMergeMetric,
 } from '../../../constants';
@@ -101,39 +98,6 @@ export const getFilterParams = (state, getters, rootState, rootGetters) => (char
   return params;
 };
 
-/**
- * Returns additional options for a given column chart (based on the chartKey)
- * Primarily, it computes the end percentage value for echart's dataZoom property
- *
- * If the number of data items being displayed is below the MAX_ITEMS_PER_PAGE threshold,
- * it will return an empty dataZoom property.
- *
- */
-export const getColumnChartDatazoomOption = (state) => (chartKey) => {
-  const { data } = state.charts[chartKey];
-  const totalItems = Object.keys(data).length;
-  const MAX_ITEMS_PER_PAGE = maxColumnChartItemsPerPage[chartKey]
-    ? maxColumnChartItemsPerPage[chartKey]
-    : defaultMaxColumnChartItemsPerPage;
-
-  if (totalItems <= MAX_ITEMS_PER_PAGE) {
-    return {};
-  }
-
-  const intervalEnd = Math.ceil((MAX_ITEMS_PER_PAGE / totalItems) * 100);
-
-  return {
-    dataZoom: dataZoomOptions.map((item) => {
-      const result = {
-        ...item,
-        end: intervalEnd,
-      };
-
-      return result;
-    }),
-  };
-};
-
 export const getSelectedMetric = (state) => (chartKey) => state.charts[chartKey].params.metricType;
 
 /**

ee/spec/frontend/analytics/productivity_analytics/store/modules/charts/getters_spec.js

@@ -2,13 +2,11 @@ import {
   metricTypes,
   chartKeys,
   columnHighlightStyle,
-  maxColumnChartItemsPerPage,
   scatterPlotAddonQueryDays,
 } from 'ee/analytics/productivity_analytics/constants';
 import * as getters from 'ee/analytics/productivity_analytics/store/modules/charts/getters';
 import createState from 'ee/analytics/productivity_analytics/store/modules/charts/state';
 import { getScatterPlotData, getMedianLineData } from 'ee/analytics/productivity_analytics/utils';
-import { mockHistogramData } from '../../../mock_data';
 
 jest.mock('ee/analytics/productivity_analytics/utils');
 
@@ -195,39 +193,6 @@ describe('Productivity analytics chart getters', () => {
     });
   });
 
-  describe('getColumnChartDatazoomOption', () => {
-    const chartKey = chartKeys.main;
-
-    describe(`data exceeds threshold of ${maxColumnChartItemsPerPage[chartKey]} items`, () => {
-      it('returns a dataZoom property and computes the end interval correctly', () => {
-        state.charts[chartKey].data = mockHistogramData;
-
-        const intervalEnd = 98;
-
-        const expected = {
-          dataZoom: [
-            {
-              type: 'slider',
-              bottom: 10,
-              start: 0,
-              end: intervalEnd,
-            },
-          ],
-        };
-
-        expect(getters.getColumnChartDatazoomOption(state)(chartKeys.main)).toEqual(expected);
-      });
-    });
-
-    describe(`does not exceed threshold of ${maxColumnChartItemsPerPage[chartKey]} items`, () => {
-      it('returns an empty dataZoom property', () => {
-        state.charts[chartKey].data = { 1: 1, 2: 2, 3: 3 };
-
-        expect(getters.getColumnChartDatazoomOption(state)(chartKeys.main)).toEqual({});
-      });
-    });
-  });
-
   describe('getSelectedMetric', () => {
     it('returns the currently selected metric for a given chartKey', () => {
       const metricType = 'time_to_last_commit';