Feature/sort countries

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>

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
@@ -541,6 +543,7 @@ window.app = new Vue({
 
     search() {
       this.visibleCountries = this.countries.filter(e => e.toLowerCase().includes(this.searchField.toLowerCase()));
+      this.sortCountries();
     },
 
     selectAll() {
@@ -553,12 +556,34 @@ window.app = new Vue({
       this.createURL();
     },
 
+    sortCountries() {
+      let sortIx = this.sortOptions.indexOf(this.sort);
+      if (sortIx == 0) {
+        //Alphabetic
+        this.visibleCountries = this.visibleCountries.sort();
+      } else if (sortIx == 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;
+      } 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;
+      }
+    },
+
     toggleHide() {
       this.isHidden = !this.isHidden;
     },
 
     createURL() {
-      
+
       let queryUrl = new URLSearchParams();
 
       if (this.selectedScale == 'Linear Scale') {
@@ -575,7 +600,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);
       } 
@@ -917,6 +942,10 @@ window.app = new Vue({
 
     selectedScale: 'Logarithmic Scale',
 
+    sortOptions: ['Alphabetic', 'New Cases', 'Confirmed Cases'],
+
+    sort: 'Alphabetic',
+
     minCasesInCountry: 50,
 
     dates: [],