Merge branch 'psi-better-burn-axis' into 'master'

Better axis labels for burndown charts

See merge request gitlab-org/gitlab!38113

ee/app/assets/javascripts/burndown_chart/components/burndown_chart.vue

 <script>
+import { merge } from 'lodash';
 import { GlLineChart } from '@gitlab/ui/dist/charts';
 import dateFormat from 'dateformat';
 import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';
 import { s__, __, sprintf } from '~/locale';
+import commonChartOptions from './common_chart_options';
 
 export default {
   components: {
@@ -87,30 +89,15 @@ export default {
       return series;
     },
     options() {
-      return {
+      return merge({}, commonChartOptions, {
         xAxis: {
-          name: '',
-          type: 'time',
           min: this.startDate,
           max: this.dueDate,
-          axisLine: {
-            show: true,
-          },
         },
         yAxis: {
           name: this.issuesSelected ? __('Total issues') : __('Total weight'),
-          axisLine: {
-            show: true,
-          },
-          splitLine: {
-            show: false,
-          },
-        },
-        tooltip: {
-          trigger: 'item',
-          formatter: () => '',
         },
-      };
+      });
     },
   },
   methods: {
@@ -150,6 +137,7 @@ export default {
         :data="dataSeries"
         :option="options"
         :format-tooltip-text="formatTooltipText"
+        :include-legend-avg-max="false"
       >
         <template slot="tooltipTitle">{{ tooltip.title }}</template>
         <template slot="tooltipContent">{{ tooltip.content }}</template>

ee/app/assets/javascripts/burndown_chart/components/burnup_chart.vue

 <script>
+import { merge } from 'lodash';
 import { GlLineChart } from '@gitlab/ui/dist/charts';
 import dateFormat from 'dateformat';
 import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';
 import { __, sprintf } from '~/locale';
+import commonChartOptions from './common_chart_options';
 
 export default {
   components: {
@@ -44,30 +46,15 @@ export default {
       return series;
     },
     options() {
-      return {
+      return merge({}, commonChartOptions, {
         xAxis: {
-          name: '',
-          type: 'time',
           min: this.startDate,
           max: this.dueDate,
-          axisLine: {
-            show: true,
-          },
         },
         yAxis: {
           name: __('Total issues'),
-          axisLine: {
-            show: true,
-          },
-          splitLine: {
-            show: false,
-          },
         },
-        tooltip: {
-          trigger: 'item',
-          formatter: () => '',
-        },
-      };
+      });
     },
   },
   methods: {
@@ -91,7 +78,12 @@ export default {
       <h3>{{ __('Burnup chart') }}</h3>
     </div>
     <resizable-chart-container class="js-burnup-chart">
-      <gl-line-chart :data="dataSeries" :option="options" :format-tooltip-text="formatTooltipText">
+      <gl-line-chart
+        :data="dataSeries"
+        :option="options"
+        :format-tooltip-text="formatTooltipText"
+        :include-legend-avg-max="false"
+      >
         <template slot="tooltipTitle">{{ tooltip.title }}</template>
         <template slot="tooltipContent">{{ tooltip.content }}</template>
       </gl-line-chart>

ee/app/assets/javascripts/burndown_chart/components/common_chart_options.js

+import dateFormat from 'dateformat';
+
+const msInOneDay = 60 * 60 * 24 * 1000;
+
+export default {
+  grid: {
+    // TODO: containLabel doesn't currently work, so we also need to add grid
+    // https://github.com/apache/incubator-echarts/issues/11773
+    containLabel: true,
+    top: 16,
+    bottom: 16,
+    left: 48,
+    right: 48,
+  },
+  xAxis: {
+    name: '',
+    type: 'time',
+    minInterval: msInOneDay,
+    axisLabel: {
+      formatter(value) {
+        return dateFormat(value, 'dd mmm yyyy');
+      },
+    },
+    axisLine: {
+      show: true,
+    },
+    axisPointer: {
+      snap: true,
+    },
+  },
+  yAxis: {
+    axisLine: {
+      show: true,
+    },
+    splitLine: {
+      show: false,
+    },
+    minInterval: 1,
+  },
+  tooltip: {
+    trigger: 'item',
+    formatter: () => '',
+  },
+};

ee/changelogs/unreleased/psi-better-burn-axis.yml

+---
+title: Better burndown chart axis formatting
+merge_request: 38113
+author:
+type: added

ee/spec/frontend/burndown_chart/components/burndown_chart_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlLineChart } from '@gitlab/ui/dist/charts';
 import BurndownChart from 'ee/burndown_chart/components/burndown_chart.vue';
+import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';
 
 describe('burndown_chart', () => {
   let wrapper;
@@ -11,12 +13,17 @@ describe('burndown_chart', () => {
     openIssuesWeight: [],
   };
 
+  const findChart = () => wrapper.find(GlLineChart);
+
   const createComponent = (props = {}) => {
     wrapper = shallowMount(BurndownChart, {
       propsData: {
         ...defaultProps,
         ...props,
       },
+      stubs: {
+        ResizableChartContainer,
+      },
     });
   };
 
@@ -33,7 +40,7 @@ describe('burndown_chart', () => {
   });
 
   describe('with multiple points', () => {
-    it('shows guideline', () => {
+    beforeEach(() => {
       createComponent({
         openIssuesCount: [
           { '2019-08-07T00:00:00.000Z': 100 },
@@ -41,10 +48,29 @@ describe('burndown_chart', () => {
           { '2019-09-08T00:00:00.000Z': 1 },
         ],
       });
+    });
 
+    it('shows guideline', () => {
       const data = wrapper.vm.dataSeries;
       expect(data).toHaveLength(2);
       expect(data[1].name).toBe('Guideline');
     });
+
+    it('only shows integers on axis labels', () => {
+      const msInOneDay = 60 * 60 * 24 * 1000;
+      expect(findChart().props('option')).toMatchObject({
+        xAxis: {
+          type: 'time',
+          minInterval: msInOneDay,
+        },
+        yAxis: {
+          minInterval: 1,
+        },
+      });
+    });
+
+    it('does not show average or max values in legend', () => {
+      expect(findChart().props('includeLegendAvgMax')).toBe(false);
+    });
   });
 });

ee/spec/frontend/burndown_chart/components/burnup_chart_spec.js

@@ -11,6 +11,8 @@ describe('Burnup chart', () => {
     dueDate: '2019-09-09T00:00:00.000Z',
   };
 
+  const findChart = () => wrapper.find(GlLineChart);
+
   const createComponent = (props = {}) => {
     wrapper = shallowMount(BurnupChart, {
       propsData: {
@@ -29,7 +31,7 @@ describe('Burnup chart', () => {
     ${[{ '2019-08-07T00:00:00.000Z': 100 }, { '2019-08-08T00:00:00.000Z': 99 }, { '2019-09-08T00:00:00.000Z': 1 }]}
   `('renders the lineChart correctly', ({ scope }) => {
     createComponent({ scope });
-    const chartData = wrapper.find(GlLineChart).props('data');
+    const chartData = findChart().props('data');
 
     expect(chartData).toEqual([
       {
@@ -38,4 +40,21 @@ describe('Burnup chart', () => {
       },
     ]);
   });
+
+  it('only shows integers on axis labels', () => {
+    const msInOneDay = 60 * 60 * 24 * 1000;
+    expect(findChart().props('option')).toMatchObject({
+      xAxis: {
+        type: 'time',
+        minInterval: msInOneDay,
+      },
+      yAxis: {
+        minInterval: 1,
+      },
+    });
+  });
+
+  it('does not show average or max values in legend', () => {
+    expect(findChart().props('includeLegendAvgMax')).toBe(false);
+  });
 });