From 6ca4a9293abd5d679ea160ac8b685e4d15149048 Mon Sep 17 00:00:00 2001
From: Henrik Storch <thisisthefoxe@gmail.com>
Date: Tue, 6 Oct 2020 22:15:22 +0200
Subject: [PATCH 1/6] added option to sort countries list

---
 index.html         |  6 ++++++
 vue-definitions.js | 24 ++++++++++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/index.html b/index.html
index dd56593..9a2fd16 100644
--- a/index.html
+++ b/index.html
@@ -147,6 +147,12 @@ <h2>{{regionType}}</h2>
             <button @click="selectAll" aria-Label="Select All Regions">Select All</button>
           </div>
 
+          <select @change="sortCountries" v-model="sort" @mousedown="pause" aria-Label="Sort Countries">
+            <option v-for="s in sortOptions" v-bind:value="s">
+              {{ s }}
+            </option>
+          </select>
+
           <p style="padding-top: 1rem;">Showing {{regionType}} with at least {{minCasesInCountry}} {{selectedData}}</p>
 
           <ul>
diff --git a/vue-definitions.js b/vue-definitions.js
index 8e80f57..429c042 100644
--- a/vue-definitions.js
+++ b/vue-definitions.js
@@ -553,6 +553,26 @@ window.app = new Vue({
       this.createURL();
     },
 
+    sortCountries() {
+      if (this.sort == 'Alphabetic') {
+        this.visibleCountries = this.visibleCountries.sort();
+      } else if (this.sort == 'New Cases') {
+        const countriesByNewCases = this.covidData
+          .filter(c => this.visibleCountries.includes(c.country))
+          .sort((a, b) => {
+            return b.slope[b.slope.length-1] - a.slope[a.slope.length-1];
+          })
+          .map(e => e.country);
+        this.visibleCountries = countriesByNewCases;
+      } else if (this.sort == 'Confirmed Cases') {
+        const countriesByMaxCases = this.covidData
+          .filter(c => this.visibleCountries.includes(c.country))
+          .sort((a, b) => b.maxCases - a.maxCases)
+          .map(e => e.country);
+        this.visibleCountries = countriesByMaxCases;
+      }
+    },
+
     toggleHide() {
       this.isHidden = !this.isHidden;
     },
@@ -917,6 +937,10 @@ window.app = new Vue({
 
     selectedScale: 'Logarithmic Scale',
 
+    sortOptions: ['Alphabetic', 'New Cases', 'Confirmed Cases'],
+
+    sort: 'Alphabetic',
+
     minCasesInCountry: 50,
 
     dates: [],

From c86f9a403b0b6c61b4ad307c974d22d9bd238c47 Mon Sep 17 00:00:00 2001
From: Henrik Storch <thisisthefoxe@gmail.com>
Date: Tue, 6 Oct 2020 22:23:50 +0200
Subject: [PATCH 2/6] fix eslint

---
 vue-definitions.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/vue-definitions.js b/vue-definitions.js
index 429c042..330f358 100644
--- a/vue-definitions.js
+++ b/vue-definitions.js
@@ -559,9 +559,7 @@ window.app = new Vue({
       } else if (this.sort == 'New Cases') {
         const countriesByNewCases = this.covidData
           .filter(c => this.visibleCountries.includes(c.country))
-          .sort((a, b) => {
-            return b.slope[b.slope.length-1] - a.slope[a.slope.length-1];
-          })
+          .sort((a, b) => b.slope[b.slope.length - 1] - a.slope[a.slope.length - 1])
           .map(e => e.country);
         this.visibleCountries = countriesByNewCases;
       } else if (this.sort == 'Confirmed Cases') {

From 0ba8b9c1003546bdfb1853021e00388baf8b351c Mon Sep 17 00:00:00 2001
From: Henrik Storch <thisisthefoxe@gmail.com>
Date: Thu, 8 Oct 2020 17:48:02 +0200
Subject: [PATCH 3/6] set correct sort labels and reset after reload

---
 vue-definitions.js | 39 ++++++++++++++++++++++++---------------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/vue-definitions.js b/vue-definitions.js
index 330f358..079f8f6 100644
--- a/vue-definitions.js
+++ b/vue-definitions.js
@@ -439,6 +439,8 @@ window.app = new Vue({
 
       this.covidData = covidData.filter(e => e.maxCases > this.minCasesInCountry);
       this.countries = this.covidData.map(e => e.country).sort();
+      this.sortOptions = this.selectedData == 'Confirmed Cases' ? ['Alphabetic', 'New Cases', 'Confirmed Cases'] : ['Alphabetic', 'New Deaths', 'Total Deaths'];
+      this.sort = this.sortOptions[0];
       this.visibleCountries = this.countries;
       const topCountries = this.covidData.sort((a, b) => b.maxCases - a.maxCases).slice(0, 9).map(e => e.country);
       const notableCountries = ['China (Mainland)', 'India', 'US', // Top 3 by population
@@ -554,20 +556,27 @@ window.app = new Vue({
     },
 
     sortCountries() {
-      if (this.sort == 'Alphabetic') {
-        this.visibleCountries = this.visibleCountries.sort();
-      } else if (this.sort == 'New Cases') {
-        const countriesByNewCases = this.covidData
-          .filter(c => this.visibleCountries.includes(c.country))
-          .sort((a, b) => b.slope[b.slope.length - 1] - a.slope[a.slope.length - 1])
-          .map(e => e.country);
-        this.visibleCountries = countriesByNewCases;
-      } else if (this.sort == 'Confirmed Cases') {
-        const countriesByMaxCases = this.covidData
-          .filter(c => this.visibleCountries.includes(c.country))
-          .sort((a, b) => b.maxCases - a.maxCases)
-          .map(e => e.country);
-        this.visibleCountries = countriesByMaxCases;
+      switch (this.sortOptions.indexOf(this.sort)) {
+        case 0:
+          //Alphabetic
+          this.visibleCountries = this.visibleCountries.sort();
+          break;
+        case 1:
+          //New Cases / Deaths
+          const countriesByNewCases = this.covidData
+            .filter(c => this.visibleCountries.includes(c.country))
+            .sort((a, b) => b.slope[b.slope.length - 1] - a.slope[a.slope.length - 1])
+            .map(e => e.country);
+          this.visibleCountries = countriesByNewCases;
+          break;
+        case 2:
+          //Max Cases / Deaths
+          const countriesByMaxCases = this.covidData
+            .filter(c => this.visibleCountries.includes(c.country))
+            .sort((a, b) => b.maxCases - a.maxCases)
+            .map(e => e.country);
+          this.visibleCountries = countriesByMaxCases;
+        default: console.error("Sort index not found");
       }
     },
 
@@ -576,7 +585,7 @@ window.app = new Vue({
     },
     
     createURL() {
-      
+
       let queryUrl = new URLSearchParams();
 
       if (this.selectedScale == 'Linear Scale') {

From 730165c64c49d0113273340675bf10f3e33f8b48 Mon Sep 17 00:00:00 2001
From: Henrik Storch <thisisthefoxe@gmail.com>
Date: Thu, 8 Oct 2020 17:55:50 +0200
Subject: [PATCH 4/6] fix linting

---
 vue-definitions.js | 39 ++++++++++++++++++---------------------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/vue-definitions.js b/vue-definitions.js
index 079f8f6..1940bf3 100644
--- a/vue-definitions.js
+++ b/vue-definitions.js
@@ -556,27 +556,24 @@ window.app = new Vue({
     },
 
     sortCountries() {
-      switch (this.sortOptions.indexOf(this.sort)) {
-        case 0:
-          //Alphabetic
-          this.visibleCountries = this.visibleCountries.sort();
-          break;
-        case 1:
-          //New Cases / Deaths
-          const countriesByNewCases = this.covidData
-            .filter(c => this.visibleCountries.includes(c.country))
-            .sort((a, b) => b.slope[b.slope.length - 1] - a.slope[a.slope.length - 1])
-            .map(e => e.country);
-          this.visibleCountries = countriesByNewCases;
-          break;
-        case 2:
-          //Max Cases / Deaths
-          const countriesByMaxCases = this.covidData
-            .filter(c => this.visibleCountries.includes(c.country))
-            .sort((a, b) => b.maxCases - a.maxCases)
-            .map(e => e.country);
-          this.visibleCountries = countriesByMaxCases;
-        default: console.error("Sort index not found");
+      let sortIx = this.sortOptions.indexOf(this.sort);
+      if (sortIx == 0) {
+        //Alphabetic
+        this.visibleCountries = this.visibleCountries.sort();
+      } else if (sortIx == 0) {
+        //New Cases / Deaths
+        const countriesByNewCases = this.covidData
+          .filter(c => this.visibleCountries.includes(c.country))
+          .sort((a, b) => b.slope[b.slope.length - 1] - a.slope[a.slope.length - 1])
+          .map(e => e.country);
+        this.visibleCountries = countriesByNewCases;
+      } else if (sortIx == 2) {
+        //Max Cases / Deaths
+        const countriesByMaxCases = this.covidData
+          .filter(c => this.visibleCountries.includes(c.country))
+          .sort((a, b) => b.maxCases - a.maxCases)
+          .map(e => e.country);
+        this.visibleCountries = countriesByMaxCases;
       }
     },
 

From 354e10e33a769ae94b54bbe4d07e652868fdb1f6 Mon Sep 17 00:00:00 2001
From: Henrik Storch <thisisthefoxe@gmail.com>
Date: Wed, 30 Dec 2020 12:47:40 +0100
Subject: [PATCH 5/6] fix a small and very obvious bug .__.

---
 vue-definitions.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/vue-definitions.js b/vue-definitions.js
index 1940bf3..307a7ea 100644
--- a/vue-definitions.js
+++ b/vue-definitions.js
@@ -560,7 +560,7 @@ window.app = new Vue({
       if (sortIx == 0) {
         //Alphabetic
         this.visibleCountries = this.visibleCountries.sort();
-      } else if (sortIx == 0) {
+      } else if (sortIx == 1) {
         //New Cases / Deaths
         const countriesByNewCases = this.covidData
           .filter(c => this.visibleCountries.includes(c.country))
@@ -599,7 +599,7 @@ window.app = new Vue({
 
       // since this rename came later, use the old name for URLs to avoid breaking existing URLs
       let renames = {'China (Mainland)': 'China'};
-            
+      
       if (!this.showTrendLine) {
         queryUrl.append('trendline', this.showTrendLine);
       } 

From d482c57d291e3cae56f04f6890c58d6f237295aa Mon Sep 17 00:00:00 2001
From: Henrik Storch <thisisthefoxe@gmail.com>
Date: Wed, 30 Dec 2020 14:21:49 +0100
Subject: [PATCH 6/6] fix sort after search field change

---
 vue-definitions.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/vue-definitions.js b/vue-definitions.js
index 307a7ea..1978d5c 100644
--- a/vue-definitions.js
+++ b/vue-definitions.js
@@ -543,6 +543,7 @@ window.app = new Vue({
 
     search() {
       this.visibleCountries = this.countries.filter(e => e.toLowerCase().includes(this.searchField.toLowerCase()));
+      this.sortCountries();
     },
 
     selectAll() {