Merge branch 'sort-code-coverage-graph-by-dates' into 'master'

Sort code coverage graph by dates

See merge request gitlab-org/gitlab!34750

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
-      return [];
+      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 },
+];