Added Mortality and Recovered rate

Author: mugetsu

components/Overview/index.vue

@@ -13,8 +13,20 @@
     </div>
     <div class="content">
       <div class="section cases">
-        <p>Known Cases</p>
-        <Latest :data="result.latest" :invert="true" />
+        <ul class="list">
+          <li>
+            <p>Known Cases</p>
+            <Latest :data="result.latest" :invert="true" />
+          </li>
+          <li class="rates rates--mortality">
+            <p>Mortality Rate</p>
+            <p class="percentage">{{ result.mortality_rate }}%</p>
+          </li>
+          <li class="rates rates--recovered">
+            <p>Recovered Rate</p>
+            <p class="percentage">{{ result.recovered_rate }}%</p>
+          </li>
+        </ul>
       </div>
       <div class="section chart">
         <p>Timeline</p>
@@ -148,7 +160,7 @@ export default {
   }
 
   .section {
-    margin-top: 24px;
+    margin-top: 16px;
     
     &:first-of-type {
       margin-top: 0;
@@ -164,6 +176,34 @@ export default {
         color: #666666;
       }
     }
+
+    .list {
+      margin: 0;
+      padding: 0;
+
+      @media only screen and (min-width: 768px) {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      li {
+        display: block;
+        margin-top: 16px;
+
+        @media only screen and (min-width: 768px) {
+          margin-top: 0;
+        }
+
+        &:first-child {
+          margin-top: 0;
+        }
+
+        & > p {
+          font-size: 24px;
+          font-weight: 300;
+        }
+      }
+    }
   }
 
   .cases {
@@ -184,6 +224,27 @@ export default {
     }
   }
 
+  .rates {
+
+    &--mortality {
+      font-weight: 700;
+
+      .percentage {
+        margin-top: 8px;
+        color: #b20000;
+      }
+    }
+
+    &--recovered {
+      font-weight: 700;
+
+      .percentage {
+        margin-top: 8px;
+        color: #66a266;
+      }
+    }
+  }
+
   .chart {
     max-width: 624px;
 

store/mutations.js

@@ -84,6 +84,7 @@ export default {
 		state.latest = latest
 	},
 	SET_RESULT: (state, result) => {
+		const latest = result.latest
 		const title = result.province ? `${result.province}, ${result.country}` : result.country
 		const series = _ => {
 			const timelineConfirmed = Object.entries(result.timelines.confirmed.timeline).map(o => o)
@@ -153,12 +154,17 @@ export default {
         }
       })
       return perDayCases.filter(o => o.summary !== '.')
-    }
+		}
+		const getPercentage = (data, b) => (data / b) * 100
+		const mortality_rate = getPercentage(latest.deaths, latest.confirmed)
+		const recovered_rate = getPercentage(latest.recovered, latest.confirmed)
 		state.result = {
 			title: title,
-			latest: result.latest,
+			latest: latest,
 			series: series(),
-			timeline: timeline()
+			timeline: timeline(),
+			mortality_rate: mortality_rate.toFixed(2),
+			recovered_rate: recovered_rate.toFixed(2)
 		}
 	},
 	SET_COUNTRIES: (state, data) => {