Merge branch '204726-contribution-analytics-chart-zoom-usability' into 'master'

Improve chart zoom usability for Contribution analytics

See merge request gitlab-org/gitlab!72004

app/assets/javascripts/analytics/shared/utils.js

@@ -50,3 +50,22 @@ export const extractPaginationQueryParameters = (url = '') => {
     page: page?.value || null,
   };
 };
+
+export const getDataZoomOption = ({
+  totalItems = 0,
+  maxItemsPerPage = 40,
+  dataZoom = [{ type: 'slider', bottom: 10, start: 0 }],
+}) => {
+  if (totalItems <= maxItemsPerPage) {
+    return {};
+  }
+
+  const intervalEnd = Math.ceil((maxItemsPerPage / totalItems) * 100);
+
+  return dataZoom.map((item) => {
+    return {
+      ...item,
+      end: intervalEnd,
+    };
+  });
+};

ee/app/assets/javascripts/analytics/contribution_analytics/components/column_chart.vue

 <script>
 import { GlResizeObserverDirective } from '@gitlab/ui';
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
+import { getDataZoomOption } from '~/analytics/shared/utils';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import { truncateWidth } from '~/lib/utils/text_utility';
 
@@ -42,14 +43,26 @@ export default {
     };
   },
   computed: {
-    dataZoomConfig() {
-      const handleIcon = this.svgs['scroll-handle'];
+    handleIcon() {
+      return this.svgs['scroll-handle'] ? { handleIcon: this.svgs['scroll-handle'] } : {};
+    },
+    dataZoomOption() {
+      const dataZoom = [
+        {
+          type: 'slider',
+          bottom: 10,
+          start: 0,
+          ...this.handleIcon,
+        },
+      ];
 
-      return handleIcon ? { handleIcon } : {};
+      return {
+        dataZoom: getDataZoomOption({ totalItems: this.chartData.length, dataZoom }),
+      };
     },
     chartOptions() {
       return {
-        dataZoom: [this.dataZoomConfig],
+        ...this.dataZoomOption,
         height: INNER_CHART_HEIGHT,
         xAxis: {
           axisLabel: {

spec/frontend/analytics/shared/utils_spec.js

@@ -2,6 +2,7 @@ import {
   filterBySearchTerm,
   extractFilterQueryParameters,
   extractPaginationQueryParameters,
+  getDataZoomOption,
 } from '~/analytics/shared/utils';
 import { objectToQuery } from '~/lib/utils/url_utility';
 
@@ -126,3 +127,52 @@ describe('extractPaginationQueryParameters', () => {
     });
   });
 });
+
+describe('getDataZoomOption', () => {
+  it('returns an empty object when totalItems <= maxItemsPerPage', () => {
+    const totalItems = 10;
+    const maxItemsPerPage = 20;
+
+    expect(getDataZoomOption({ totalItems, maxItemsPerPage })).toEqual({});
+  });
+
+  describe('when totalItems > maxItemsPerPage', () => {
+    const totalItems = 30;
+    const maxItemsPerPage = 20;
+
+    it('properly computes the end interval for the default datazoom config', () => {
+      const expected = [
+        {
+          type: 'slider',
+          bottom: 10,
+          start: 0,
+          end: 67,
+        },
+      ];
+
+      expect(getDataZoomOption({ totalItems, maxItemsPerPage })).toEqual(expected);
+    });
+
+    it('properly computes the end interval for a custom datazoom config', () => {
+      const dataZoom = [
+        { type: 'slider', bottom: 0, start: 0 },
+        { type: 'inside', start: 0 },
+      ];
+      const expected = [
+        {
+          type: 'slider',
+          bottom: 0,
+          start: 0,
+          end: 67,
+        },
+        {
+          type: 'inside',
+          start: 0,
+          end: 67,
+        },
+      ];
+
+      expect(getDataZoomOption({ totalItems, maxItemsPerPage, dataZoom })).toEqual(expected);
+    });
+  });
+});