Skip to content

Correct project coverage graph dates on x axis

What does this MR do and why?

This MR changes the way we format data that is passed to the coverage graph on the project repository analytics page so that the date labels will be proportionately spaced across the horizontal axis of the graph:

  • it changes the chartOptions.xAxis.type from category to time and keeps the dates in YYYY-MM-DD format so that the chart handles the dates as dates and spaces them apart correctly over time (rather than treating them as evenly spaced data points no matter what date they represent)
  • it uses formatDate(value, 'mmm dd') for the axis labels and tooltip to be consistent with the group coverage graph

Screenshots or screen recordings

scenario gap in coverage data from March 30 to April 29
before Screen_Shot_2022-05-24_at_12.26.43 graph skips over time with no coverage data, dates are not proportionately spaced
with this MR Screen_Shot_2022-05-24_at_11.49.47 graph shows time with no coverage data, continues line across it, dates are spaced proportionately
scenario test data from instructions below
before Screen_Shot_2022-05-24_at_14.59.18
with this MR Screen_Shot_2022-05-24_at_14.56.59

How to set up and validate locally

  1. git checkout 332981-evenly-spaced-coverage-graph-dates
  2. find/create a project that generates a test coverage report or parses a test coverage percentage
    (or clone this test project and run pipelines with the COVERAGE variable defined to mock a coverage percentage)
  3. navigate to Analytics => Repository in the project sidebar
  4. observe the Code coverage statistics for... section with graph
  5. (optional) insert mock data in this format here to see how the graph would behave:
diff --git a/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue b/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue
index 92ae8128285..81036ec160a 100644
--- a/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue
+++ b/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue
@@ -84,7 +84,11 @@ export default {
         {
           // The default string 'data' will get shown in the legend if we fail to fetch the data
           name: this.canShowData ? this.selectedDailyCoverageName : __('data'),
-          data: this.formattedData,
+          data: [
+            ['2022-04-01', 40],
+            ['2022-04-02', 80],
+            ['2022-05-02', 60],
+          ],
           type: 'line',
           smooth: true,
         },

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #332981 (closed)

Edited by Miranda Fluharty

Merge request reports