Update axis label when metric changes

- Ensures that we update the x axis label
on the commit based histogram when
the user changes the metric

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

@@ -289,7 +289,7 @@ export default {
                   :data="{ full: getChartData(chartKeys.commitBasedHistogram) }"
                   :option="getColumnChartOption(chartKeys.commitBasedHistogram)"
                   :y-axis-title="__('Merge requests')"
-                  :x-axis-title="__('Commits')"
+                  :x-axis-title="getMetricDropdownLabel(chartKeys.commitBasedHistogram)"
                   x-axis-type="category"
                 />
               </template>

ee/spec/frontend/analytics/productivity_analytics/components/app_spec.js

@@ -274,6 +274,15 @@ describe('ProductivityApp component', () => {
                 store.state.charts.charts[chartKeys.commitBasedHistogram].data = { 1: 2, 2: 3 };
               });
 
+              it('renders a column chart', () => {
+                expect(
+                  findCommitBasedSection()
+                    .find(GlColumnChart)
+                    .exists(),
+                ).toBe(true);
+              });
+
+              describe('metric dropdown', () => {
                 it('renders a metric type dropdown', () => {
                   expect(
                     findCommitBasedSection()
@@ -282,24 +291,26 @@ describe('ProductivityApp component', () => {
                   ).toBe(true);
                 });
 
-              it('should change the metric type', () => {
+                describe('when the user changes the metric', () => {
+                  beforeEach(() => {
                     findCommitBasedSection()
                       .findAll(GlDropdownItem)
                       .at(0)
                       .vm.$emit('click');
+                  });
 
+                  it('should dispatch setMetricType action', () => {
                     expect(actionSpies.setMetricType).toHaveBeenCalledWith({
                       metricType: 'commits_count',
                       chartKey: chartKeys.commitBasedHistogram,
                     });
                   });
 
-              it('renders a column chart', () => {
-                expect(
-                  findCommitBasedSection()
-                    .find(GlColumnChart)
-                    .exists(),
-                ).toBe(true);
+                  it("should update the chart's x axis label", () => {
+                    const columnChart = findCommitBasedSection().find(GlColumnChart);
+                    expect(columnChart.props('xAxisTitle')).toBe('Number of commits per MR');
+                  });
+                });
               });
             });