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,32 +274,43 @@ describe('ProductivityApp component', () => {
                 store.state.charts.charts[chartKeys.commitBasedHistogram].data = { 1: 2, 2: 3 };
               });
 
-              it('renders a metric type dropdown', () => {
+              it('renders a column chart', () => {
                 expect(
                   findCommitBasedSection()
-                    .find(GlDropdown)
+                    .find(GlColumnChart)
                     .exists(),
                 ).toBe(true);
               });
 
-              it('should change the metric type', () => {
-                findCommitBasedSection()
-                  .findAll(GlDropdownItem)
-                  .at(0)
-                  .vm.$emit('click');
-
-                expect(actionSpies.setMetricType).toHaveBeenCalledWith({
-                  metricType: 'commits_count',
-                  chartKey: chartKeys.commitBasedHistogram,
+              describe('metric dropdown', () => {
+                it('renders a metric type dropdown', () => {
+                  expect(
+                    findCommitBasedSection()
+                      .find(GlDropdown)
+                      .exists(),
+                  ).toBe(true);
                 });
-              });
 
-              it('renders a column chart', () => {
-                expect(
-                  findCommitBasedSection()
-                    .find(GlColumnChart)
-                    .exists(),
-                ).toBe(true);
+                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("should update the chart's x axis label", () => {
+                    const columnChart = findCommitBasedSection().find(GlColumnChart);
+                    expect(columnChart.props('xAxisTitle')).toBe('Number of commits per MR');
+                  });
+                });
               });
             });