x-axis on coverage graph not proportional

Summary

The x-Axis on the coverage chart is out of proportion, there is one tick per day that coverage was collected, but the distance between the days is not time-proportional.

Steps to reproduce

Occured on gitlab 13.11.1 – guess this happens on all coverage graphs, but it's easier to spot when looking at a repository that only had recently enabled coverage collection and where subsequent pipelines did not run for at least 2 days.

What is the current bug behavior?

There is one tick per day that coverage was collected, but the distance between the days is not time-proportional.

What is the expected correct behavior?

There should be one data point per coverage run – or at least coverage collected from the last pipeline run on the default branch (the latter is being dealt with in #331848) and most importantly: the distance between data points should be time-proportional.

So, in the example screenshot provided above there should be x-axis ticks for "May 22", "May 23, "May 24", "May 29", "May 30", "Jun 03", "Jun 05", "Jun 06" and "Jun 07" shown so the time axis is laid out correctly.

Output of checks

Unfortunately i don't have admin access to that gitlab instance.

Results of GitLab environment info

%

Results of GitLab application Check

%

Technical Proposal

The current implementation has the x-axis type set as category when it should be set instead as time.

In code_coverage.vue we can change it to the following:

        xAxis: {
          name: '',
          type: 'time',
          axisLabel: {
            formatter: (value) => dateFormat(value, 'mmm dd'),
          },
        },

We'll also need to change the formattedData computed value to not format the date so that the chart component can still use it as an expected date. Instead we'll rely on the above example's formatter function.

formattedData function change:

    formattedData() {
      return this.sortedData.map((value) => [value.date, value.coverage]);
    },

Before	After