Sort code coverage graph by dates

The API returns the dates in descending order
because it's the same endpoint than the
CSV generator which requires them to
be in tha order. So in the FE, we
now compare dates with a basic `sort`
to feed the graph the order in asc
order.

app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue

@@ -63,17 +63,19 @@ export default {
     selectedDailyCoverageName() {
       return this.selectedDailyCoverage?.group_name;
     },
-    formattedData() {
-      if (this.selectedDailyCoverage?.data) {
-        return this.selectedDailyCoverage.data.map(value => [
-          dateFormat(value.date, 'mmm dd'),
-          value.coverage,
-        ]);
-      }
-
+    sortedData() {
       // If the fetching failed, we return an empty array which
       // allow the graph to render while empty
+      if (!this.selectedDailyCoverage?.data) {
         return [];
+      }
+
+      return [...this.selectedDailyCoverage.data].sort(
+        (a, b) => new Date(a.date) - new Date(b.date),
+      );
+    },
+    formattedData() {
+      return this.sortedData.map(value => [dateFormat(value.date, 'mmm dd'), value.coverage]);
     },
     chartData() {
       return [

changelogs/unreleased/sort-code-coverage-graph-by-dates.yml

+---
+title: Sort code coverage graph in ascending order
+merge_request: 34750
+author:
+type: fixed

spec/frontend/pages/projects/graphs/code_coverage_spec.js

@@ -5,7 +5,7 @@ import { GlAreaChart } from '@gitlab/ui/dist/charts';
 
 import axios from '~/lib/utils/axios_utils';
 import CodeCoverage from '~/pages/projects/graphs/components/code_coverage.vue';
-import codeCoverageMockData from './mock_data';
+import { codeCoverageMockData, sortedDataByDates } from './mock_data';
 import waitForPromises from 'helpers/wait_for_promises';
 import httpStatusCodes from '~/lib/utils/http_status';
 
@@ -52,6 +52,10 @@ describe('Code Coverage', () => {
       expect(findAreaChart().exists()).toBe(true);
     });
 
+    it('sorts the dates in ascending order', () => {
+      expect(wrapper.vm.sortedData).toEqual(sortedDataByDates);
+    });
+
     it('matches the snapshot', () => {
       expect(wrapper.element).toMatchSnapshot();
     });

spec/frontend/pages/projects/graphs/mock_data.js

-export default [
+export const codeCoverageMockData = [
   {
     group_name: 'rspec',
     data: [
-      { date: '2020-04-30', coverage: 40.0 },
-      { date: '2020-05-01', coverage: 80.0 },
-      { date: '2020-05-02', coverage: 99.0 },
-      { date: '2020-05-10', coverage: 80.0 },
-      { date: '2020-05-15', coverage: 70.0 },
       { date: '2020-05-20', coverage: 69.0 },
+      { date: '2020-05-15', coverage: 70.0 },
+      { date: '2020-05-10', coverage: 80.0 },
+      { date: '2020-05-02', coverage: 99.0 },
+      { date: '2020-05-01', coverage: 80.0 },
+      { date: '2020-04-30', coverage: 40.0 },
     ],
   },
   {
     group_name: 'cypress',
     data: [
-      { date: '2022-07-30', coverage: 1.0 },
-      { date: '2022-08-01', coverage: 2.4 },
-      { date: '2022-08-02', coverage: 5.0 },
-      { date: '2022-08-10', coverage: 15.0 },
-      { date: '2022-08-15', coverage: 30.0 },
       { date: '2022-08-20', coverage: 40.0 },
+      { date: '2022-08-15', coverage: 30.0 },
+      { date: '2022-08-10', coverage: 15.0 },
+      { date: '2022-08-02', coverage: 5.0 },
+      { date: '2022-08-01', coverage: 2.4 },
+      { date: '2022-07-30', coverage: 1.0 },
     ],
   },
   {
     group_name: 'karma',
     data: [
-      { date: '2020-05-01', coverage: 94.0 },
-      { date: '2020-05-02', coverage: 94.0 },
-      { date: '2020-05-03', coverage: 94.0 },
-      { date: '2020-05-04', coverage: 94.0 },
-      { date: '2020-05-05', coverage: 92.0 },
-      { date: '2020-05-06', coverage: 91.0 },
-      { date: '2020-05-07', coverage: 78.0 },
-      { date: '2020-05-08', coverage: 94.0 },
-      { date: '2020-05-09', coverage: 94.0 },
-      { date: '2020-05-10', coverage: 94.0 },
-      { date: '2020-05-11', coverage: 94.0 },
-      { date: '2020-05-12', coverage: 94.0 },
-      { date: '2020-05-13', coverage: 92.0 },
-      { date: '2020-05-14', coverage: 91.0 },
-      { date: '2020-05-15', coverage: 78.0 },
-      { date: '2020-05-16', coverage: 94.0 },
-      { date: '2020-05-17', coverage: 94.0 },
-      { date: '2020-05-18', coverage: 93.0 },
-      { date: '2020-05-19', coverage: 92.0 },
-      { date: '2020-05-20', coverage: 91.0 },
-      { date: '2020-05-21', coverage: 90.0 },
-      { date: '2020-05-22', coverage: 91.0 },
-      { date: '2020-05-23', coverage: 92.0 },
-      { date: '2020-05-24', coverage: 75.0 },
-      { date: '2020-05-25', coverage: 74.0 },
-      { date: '2020-05-26', coverage: 74.0 },
-      { date: '2020-05-27', coverage: 74.0 },
-      { date: '2020-05-28', coverage: 80.0 },
-      { date: '2020-05-29', coverage: 85.0 },
-      { date: '2020-05-30', coverage: 92.0 },
       { date: '2020-05-31', coverage: 91.0 },
+      { date: '2020-05-30', coverage: 94.0 },
+      { date: '2020-05-29', coverage: 94.0 },
+      { date: '2020-05-28', coverage: 92.0 },
+      { date: '2020-05-27', coverage: 91.0 },
+      { date: '2020-05-26', coverage: 78.0 },
+      { date: '2020-05-25', coverage: 94.0 },
+      { date: '2020-05-24', coverage: 94.0 },
+      { date: '2020-05-23', coverage: 94.0 },
+      { date: '2020-05-22', coverage: 94.0 },
+      { date: '2020-05-21', coverage: 94.0 },
+      { date: '2020-05-20', coverage: 92.0 },
+      { date: '2020-05-19', coverage: 91.0 },
+      { date: '2020-05-18', coverage: 78.0 },
+      { date: '2020-05-17', coverage: 94.0 },
+      { date: '2020-05-16', coverage: 94.0 },
+      { date: '2020-05-15', coverage: 93.0 },
+      { date: '2020-05-14', coverage: 92.0 },
+      { date: '2020-05-13', coverage: 91.0 },
+      { date: '2020-05-12', coverage: 90.0 },
+      { date: '2020-05-11', coverage: 91.0 },
+      { date: '2020-05-10', coverage: 92.0 },
+      { date: '2020-05-09', coverage: 75.0 },
+      { date: '2020-05-08', coverage: 74.0 },
+      { date: '2020-05-07', coverage: 74.0 },
+      { date: '2020-05-06', coverage: 74.0 },
+      { date: '2020-05-05', coverage: 80.0 },
+      { date: '2020-05-04', coverage: 85.0 },
+      { date: '2020-05-03', coverage: 92.0 },
+      { date: '2020-05-02', coverage: 94.0 },
+      { date: '2020-05-01', coverage: 94.0 },
     ],
   },
 ];
+
+export const sortedDataByDates = [
+  { date: '2020-04-30', coverage: 40.0 },
+  { date: '2020-05-01', coverage: 80.0 },
+  { date: '2020-05-02', coverage: 99.0 },
+  { date: '2020-05-10', coverage: 80.0 },
+  { date: '2020-05-15', coverage: 70.0 },
+  { date: '2020-05-20', coverage: 69.0 },
+];