Add Throughput chart skeleton

Introduce the skeleton code which is needed for the
throughput chart. This includes a basic error message
for when there is no data.

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

 <script>
+import ThroughputChart from './throughput_chart.vue';
+
 export default {
   name: 'MergeRequestAnalyticsApp',
+  components: {
+    ThroughputChart,
+  },
 };
 </script>
 <template>
   <div>
-    <h3 data-testid="pageTitle">{{ __('Merge Request Analytics') }}</h3>
+    <h3 data-testid="pageTitle" class="gl-mb-5">{{ __('Merge Request Analytics') }}</h3>
+    <throughput-chart />
   </div>
 </template>

ee/app/assets/javascripts/analytics/merge_request_analytics/components/throughput_chart.vue

+<script>
+import { GlAreaChart } from '@gitlab/ui/dist/charts';
+import { GlAlert } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  name: 'ThroughputChart',
+  components: {
+    GlAreaChart,
+    GlAlert,
+  },
+  data() {
+    return {
+      throughputChartData: [],
+    };
+  },
+  computed: {
+    chartOptions() {
+      return {
+        xAxis: {
+          name: '',
+        },
+        yAxis: {
+          name: __('Merge Requests closed'),
+        },
+      };
+    },
+    chartDataAvailable() {
+      return this.throughputChartData.length;
+    },
+  },
+  chartTitle: __('Throughput'),
+  chartDescription: __('The number of merge requests merged to the master branch by month.'),
+};
+</script>
+<template>
+  <div>
+    <h4 data-testid="chartTitle">{{ $options.chartTitle }}</h4>
+    <div class="gl-text-gray-700" data-testid="chartDescription">
+      {{ $options.chartDescription }}
+    </div>
+    <gl-area-chart v-if="chartDataAvailable" :data="throughputChartData" :option="chartOptions" />
+    <gl-alert v-else :dismissible="false" class="gl-mt-4">{{
+      __('There is no data available.')
+    }}</gl-alert>
+  </div>
+</template>

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

 import { shallowMount } from '@vue/test-utils';
 import MergeRequestAnalyticsApp from 'ee/analytics/merge_request_analytics/components/app.vue';
+import ThroughputChart from 'ee/analytics/merge_request_analytics/components/throughput_chart.vue';
 
 describe('MergeRequestAnalyticsApp', () => {
   let wrapper;
@@ -20,6 +21,12 @@ describe('MergeRequestAnalyticsApp', () => {
   it('displays the page title', () => {
     const pageTitle = wrapper.find('[data-testid="pageTitle"').text();
 
-    expect(pageTitle).toEqual('Merge Request Analytics');
+    expect(pageTitle).toBe('Merge Request Analytics');
+  });
+
+  it('displays the throughput chart component', () => {
+    const throughputChartComponent = wrapper.find(ThroughputChart);
+
+    expect(throughputChartComponent.exists()).toBe(true);
   });
 });

ee/spec/frontend/analytics/merge_request_analytics/components/throughput_chart_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlAlert } from '@gitlab/ui';
+import ThroughputChart from 'ee/analytics/merge_request_analytics/components/throughput_chart.vue';
+
+describe('ThroughputChart', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(ThroughputChart);
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('displays the chart title', () => {
+    const chartTitle = wrapper.find('[data-testid="chartTitle"').text();
+
+    expect(chartTitle).toBe('Throughput');
+  });
+
+  it('displays the chart description', () => {
+    const chartDescription = wrapper.find('[data-testid="chartDescription"').text();
+
+    expect(chartDescription).toBe(
+      'The number of merge requests merged to the master branch by month.',
+    );
+  });
+
+  it('displays an empty state message when there is no data', () => {
+    const alert = wrapper.find(GlAlert);
+
+    expect(alert.exists()).toBe(true);
+    expect(alert.text()).toBe('There is no data available.');
+  });
+});

locale/gitlab.pot

@@ -14696,6 +14696,9 @@ msgstr ""
 msgid "Merge Requests"
 msgstr ""
 
+msgid "Merge Requests closed"
+msgstr ""
+
 msgid "Merge Requests created"
 msgstr ""
 
@@ -23840,6 +23843,9 @@ msgstr ""
 msgid "The number of changes to be fetched from GitLab when cloning a repository. This can speed up Pipelines execution. Keep empty or set to 0 to disable shallow clone by default and make GitLab CI fetch all branches and tags each time."
 msgstr ""
 
+msgid "The number of merge requests merged to the master branch by month."
+msgstr ""
+
 msgid "The number of times an upload record could not find its file"
 msgstr ""
 
@@ -24071,6 +24077,9 @@ msgstr ""
 msgid "There is already a repository with that name on disk"
 msgstr ""
 
+msgid "There is no data available."
+msgstr ""
+
 msgid "There is no data available. Please change your selection."
 msgstr ""
 
@@ -24809,6 +24818,9 @@ msgstr ""
 msgid "ThreatMonitoring|While it's rare to have no traffic coming to your application, it can happen. In any event, we ask that you double check your settings to make sure you've set up the WAF correctly."
 msgstr ""
 
+msgid "Throughput"
+msgstr ""
+
 msgid "Thursday"
 msgstr ""