Refactoring in preparation for lead time graphs

app/assets/javascripts/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue

@@ -30,12 +30,16 @@ export default {
     <resizable-chart-container>
       <gl-area-chart
         slot-scope="{ width }"
+        v-bind="$attrs"
         :width="width"
         :height="$options.chartContainerHeight"
         :data="chartData"
         :include-legend-avg-max="false"
         :option="areaChartOptions"
-      />
+      >
+        <slot slot="tooltip-title" name="tooltip-title"></slot>
+        <slot slot="tooltip-content" name="tooltip-content"></slot>
+      </gl-area-chart>
     </resizable-chart-container>
   </div>
 </template>

app/assets/javascripts/projects/pipelines/charts/components/ci_cd_analytics_charts.vue

@@ -41,10 +41,14 @@ export default {
     <gl-segmented-control v-model="selectedChart" :options="chartRanges" class="gl-mb-4" />
     <ci-cd-analytics-area-chart
       v-if="chart"
+      v-bind="$attrs"
       :chart-data="chart.data"
       :area-chart-options="chartOptions"
     >
       {{ dateRange }}
+
+      <slot slot="tooltip-title" name="tooltip-title"></slot>
+      <slot slot="tooltip-content" name="tooltip-content"></slot>
     </ci-cd-analytics-area-chart>
   </div>
 </template>

ee/app/assets/javascripts/projects/pipelines/charts/components/constants.js

-import { s__ } from '~/locale';
-
-/* eslint-disable @gitlab/require-i18n-strings */
-export const LAST_WEEK = 'LAST_WEEK';
-export const LAST_MONTH = 'LAST_MONTH';
-export const LAST_90_DAYS = 'LAST_90_DAYS';
-/* eslint-enable @gitlab/require-i18n-strings */
-
-export const CHART_TITLE = s__('DeploymentFrequencyCharts|Deployments');

ee/app/assets/javascripts/projects/pipelines/charts/components/deployment_frequency_charts.vue

@@ -5,13 +5,16 @@ import * as DoraApi from 'ee/api/dora_api';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
 import CiCdAnalyticsCharts from '~/projects/pipelines/charts/components/ci_cd_analytics_charts.vue';
-import { LAST_WEEK, LAST_MONTH, LAST_90_DAYS } from './constants';
 import {
   allChartDefinitions,
   areaChartOptions,
   chartDescriptionText,
   chartDocumentationHref,
-} from './static_data';
+  LAST_WEEK,
+  LAST_MONTH,
+  LAST_90_DAYS,
+  CHART_TITLE,
+} from './static_data/deployment_frequency';
 import { apiDataToChartSeries } from './util';
 
 export default {
@@ -53,7 +56,7 @@ export default {
           requestParams,
         );
 
-        this.chartData[id] = apiDataToChartSeries(apiData, startDate, endDate);
+        this.chartData[id] = apiDataToChartSeries(apiData, startDate, endDate, CHART_TITLE);
       }),
     );
 
@@ -61,9 +64,7 @@ export default {
 
     if (requestErrors.length) {
       createFlash({
-        message: s__(
-          'DeploymentFrequencyCharts|Something went wrong while getting deployment frequency data',
-        ),
+        message: s__('DORA4Metrics|Something went wrong while getting deployment frequency data'),
       });
 
       const allErrorMessages = requestErrors.join('\n');
@@ -82,7 +83,7 @@ export default {
 </script>
 <template>
   <div>
-    <h4 class="gl-my-4">{{ s__('DeploymentFrequencyCharts|Deployments charts') }}</h4>
+    <h4 class="gl-my-4">{{ s__('DORA4Metrics|Deployments charts') }}</h4>
     <p data-testid="help-text">
       <gl-sprintf :message="$options.chartDescriptionText">
         <template #code="{ content }">

ee/app/assets/javascripts/projects/pipelines/charts/components/static_data/deployment_frequency.js

+import { helpPagePath } from '~/helpers/help_page_helper';
+import { s__ } from '~/locale';
+
+export * from './shared';
+
+export const CHART_TITLE = s__('DORA4Metrics|Deployments');
+
+export const areaChartOptions = {
+  xAxis: {
+    name: s__('DORA4Metrics|Date'),
+    type: 'category',
+  },
+  yAxis: {
+    name: s__('DORA4Metrics|Deployments'),
+    type: 'value',
+    minInterval: 1,
+  },
+};
+
+export const chartDescriptionText = s__(
+  'DORA4Metrics|These charts display the frequency of deployments to the production environment, as part of the DORA 4 metrics. The environment must be named %{codeStart}production%{codeEnd} for its data to appear in these charts.',
+);
+
+export const chartDocumentationHref = helpPagePath('user/analytics/ci_cd_analytics.html', {
+  anchor: 'deployment-frequency-charts',
+});

ee/app/assets/javascripts/projects/pipelines/charts/components/static_data.js → ee/app/assets/javascripts/projects/pipelines/charts/components/static_data/shared.js

 import dateFormat from 'dateformat';
-import { helpPagePath } from '~/helpers/help_page_helper';
 import { nDaysBefore, nMonthsBefore, getStartOfDay, dayAfter } from '~/lib/utils/datetime_utility';
 import { __, s__, sprintf } from '~/locale';
-import { LAST_WEEK, LAST_MONTH, LAST_90_DAYS } from './constants';
+
+/* eslint-disable @gitlab/require-i18n-strings */
+export const LAST_WEEK = 'LAST_WEEK';
+export const LAST_MONTH = 'LAST_MONTH';
+export const LAST_90_DAYS = 'LAST_90_DAYS';
+/* eslint-enable @gitlab/require-i18n-strings */
 
 // Compute all relative dates based on the _beginning_ of today.
 // We use this date as the end date for the charts. This causes
@@ -10,7 +14,7 @@ import { LAST_WEEK, LAST_MONTH, LAST_90_DAYS } from './constants';
 const startOfToday = getStartOfDay(new Date(), { utc: true });
 
 // We use this date as the "to" parameter for the API. This allows
-// us to get deployment information about the current day.
+// us to get DORA 4 metrics about the current day.
 const startOfTomorrow = dayAfter(startOfToday, { utc: true });
 
 const lastWeek = nDaysBefore(startOfTomorrow, 7, { utc: true });
@@ -31,7 +35,7 @@ export const allChartDefinitions = [
   {
     id: LAST_WEEK,
     title: __('Last week'),
-    range: sprintf(s__('DeploymentFrequencyCharts|%{startDate} - %{endDate}'), {
+    range: sprintf(s__('DORA4Metrics|%{startDate} - %{endDate}'), {
       startDate: dateFormat(lastWeek, titleDateFormatString, true),
       endDate: dateFormat(startOfToday, titleDateFormatString, true),
     }),
@@ -45,7 +49,7 @@ export const allChartDefinitions = [
   {
     id: LAST_MONTH,
     title: __('Last month'),
-    range: sprintf(s__('DeploymentFrequencyCharts|%{startDate} - %{endDate}'), {
+    range: sprintf(s__('DORA4Metrics|%{startDate} - %{endDate}'), {
       startDate: dateFormat(lastMonth, titleDateFormatString, true),
       endDate: dateFormat(startOfToday, titleDateFormatString, true),
     }),
@@ -59,7 +63,7 @@ export const allChartDefinitions = [
   {
     id: LAST_90_DAYS,
     title: __('Last 90 days'),
-    range: sprintf(s__('%{startDate} - %{endDate}'), {
+    range: sprintf(s__('DORA4Metrics|%{startDate} - %{endDate}'), {
       startDate: dateFormat(last90Days, titleDateFormatString, true),
       endDate: dateFormat(startOfToday, titleDateFormatString, true),
     }),
@@ -71,23 +75,3 @@ export const allChartDefinitions = [
     },
   },
 ];
-
-export const areaChartOptions = {
-  xAxis: {
-    name: s__('DeploymentFrequencyCharts|Date'),
-    type: 'category',
-  },
-  yAxis: {
-    name: s__('DeploymentFrequencyCharts|Deployments'),
-    type: 'value',
-    minInterval: 1,
-  },
-};
-
-export const chartDescriptionText = s__(
-  'DeploymentFrequencyCharts|These charts display the frequency of deployments to the production environment, as part of the DORA 4 metrics. The environment must be named %{codeStart}production%{codeEnd} for its data to appear in these charts.',
-);
-
-export const chartDocumentationHref = helpPagePath('user/analytics/ci_cd_analytics.html', {
-  anchor: 'deployment-frequency-charts',
-});

ee/app/assets/javascripts/projects/pipelines/charts/components/util.js

 import dateFormat from 'dateformat';
 import { getDatesInRange, nDaysBefore, getStartOfDay } from '~/lib/utils/datetime_utility';
-import { CHART_TITLE } from './constants';
 
 /**
  * Converts the raw data fetched from the
- * [Deployment Frequency API](https://docs.gitlab.com/ee/api/project_analytics.html#list-project-deployment-frequencies)
+ * [DORA Metrics API](https://docs.gitlab.com/ee/api/dora/metrics.html#get-project-level-dora-metrics)
  * into series data consumable by
  * [GlAreaChart](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-area-chart--default)
  *
  * @param {Array} apiData The raw JSON data from the API request
  * @param {Date} startDate The first day (inclusive) of the graph's date range
  * @param {Date} endDate The last day (exclusive) of the graph's date range
+ * @param {String} seriesName The name of the series
+ * @param {*} emptyValue The value to substitute if the API data doesn't
+ * include data for a particular date
  */
-export const apiDataToChartSeries = (apiData, startDate, endDate) => {
+export const apiDataToChartSeries = (apiData, startDate, endDate, seriesName, emptyValue = 0) => {
   // Get a list of dates, one date per day in the graph's date range
   const beginningOfStartDate = getStartOfDay(startDate, { utc: true });
   const beginningOfEndDate = nDaysBefore(getStartOfDay(endDate, { utc: true }), 1, { utc: true });
@@ -29,16 +31,16 @@ export const apiDataToChartSeries = (apiData, startDate, endDate) => {
     return acc;
   }, {});
 
-  // Fill in the API data (the API data doesn't included data points for
-  // days with 0 deployments) and transform it for use in the graph
+  // Fill in the API data (the API may exclude data points for dates that have no data)
+  // and transform it for use in the graph
   const data = dates.map((date) => {
     const formattedDate = dateFormat(date, 'mmm d', true);
-    return [formattedDate, timestampToApiValue[date.getTime()] || 0];
+    return [formattedDate, timestampToApiValue[date.getTime()] ?? emptyValue];
   });
 
   return [
     {
-      name: CHART_TITLE,
+      name: seriesName,
       data,
     },
   ];

ee/spec/frontend/projects/pipelines/charts/components/util_spec.js

@@ -14,10 +14,11 @@ describe('ee/projects/pipelines/charts/components/util.js', () => {
 
       const startDate = new Date(2015, 5, 26, 10);
       const endDate = new Date(2015, 6, 4, 10);
+      const chartTitle = 'Chart title';
 
       const expected = [
         {
-          name: 'Deployments',
+          name: chartTitle,
           data: [
             ['Jun 26', 0],
             ['Jun 27', 0],
@@ -31,7 +32,7 @@ describe('ee/projects/pipelines/charts/components/util.js', () => {
         },
       ];
 
-      expect(apiDataToChartSeries(apiData, startDate, endDate)).toEqual(expected);
+      expect(apiDataToChartSeries(apiData, startDate, endDate, chartTitle)).toEqual(expected);
     });
   });
 });

locale/gitlab.pot

@@ -817,9 +817,6 @@ msgstr ""
 msgid "%{spanStart}in%{spanEnd} %{errorFn}"
 msgstr ""
 
-msgid "%{startDate} - %{endDate}"
-msgstr ""
-
 msgid "%{start} to %{end}"
 msgstr ""
 
@@ -9564,6 +9561,24 @@ msgstr ""
 msgid "DNS"
 msgstr ""
 
+msgid "DORA4Metrics|%{startDate} - %{endDate}"
+msgstr ""
+
+msgid "DORA4Metrics|Date"
+msgstr ""
+
+msgid "DORA4Metrics|Deployments"
+msgstr ""
+
+msgid "DORA4Metrics|Deployments charts"
+msgstr ""
+
+msgid "DORA4Metrics|Something went wrong while getting deployment frequency data"
+msgstr ""
+
+msgid "DORA4Metrics|These charts display the frequency of deployments to the production environment, as part of the DORA 4 metrics. The environment must be named %{codeStart}production%{codeEnd} for its data to appear in these charts."
+msgstr ""
+
 msgid "Dashboard"
 msgstr ""
 
@@ -10547,24 +10562,6 @@ msgstr ""
 msgid "Deployment Frequency"
 msgstr ""
 
-msgid "DeploymentFrequencyCharts|%{startDate} - %{endDate}"
-msgstr ""
-
-msgid "DeploymentFrequencyCharts|Date"
-msgstr ""
-
-msgid "DeploymentFrequencyCharts|Deployments"
-msgstr ""
-
-msgid "DeploymentFrequencyCharts|Deployments charts"
-msgstr ""
-
-msgid "DeploymentFrequencyCharts|Something went wrong while getting deployment frequency data"
-msgstr ""
-
-msgid "DeploymentFrequencyCharts|These charts display the frequency of deployments to the production environment, as part of the DORA 4 metrics. The environment must be named %{codeStart}production%{codeEnd} for its data to appear in these charts."
-msgstr ""
-
 msgid "Deployments"
 msgstr ""
 

spec/frontend/projects/pipelines/charts/components/__snapshots__/ci_cd_analytics_area_chart_spec.js.snap

@@ -21,7 +21,11 @@ exports[`CiCdAnalyticsAreaChart matches the snapshot 1`] = `
       option="[object Object]"
       thresholds=""
       width="0"
-    />
+    >
+      <template />
+       
+      <template />
+    </glareachart-stub>
   </div>
 </div>
 `;