From a85c659df296cffe7c401924a3c2e9e9c762768a Mon Sep 17 00:00:00 2001
From: kengoy <Kengo.Yoshii.925@gmail.com>
Date: Tue, 7 Jul 2020 01:33:39 -0700
Subject: [PATCH 1/2] Added a line chart for cases per 1000 people

---
 components/Stats.vue                         |  91 ++++++++-
 components/TimeBarChart.vue                  |   5 +-
 components/TimeLineChartCountyComparison.vue | 198 +++++++++++++++++++
 static/data/countyColor.json                 |  11 ++
 utils/formatCountyData.ts                    |   4 +-
 5 files changed, 301 insertions(+), 8 deletions(-)
 create mode 100644 components/TimeLineChartCountyComparison.vue
 create mode 100644 static/data/countyColor.json

diff --git a/components/Stats.vue b/components/Stats.vue
index 9cd59411..a7a9f28b 100644
--- a/components/Stats.vue
+++ b/components/Stats.vue
@@ -122,23 +122,69 @@
           :url="'https://coronadatascraper.com'"
         />
       </v-col>
+      <v-col cols="12" md="12" class="DataCard">
+        <DataView>
+          <div class="county-compare-select-container">
+            <label>Select Counties to Compare:</label>
+          </div>
+          <div class="county-select-buttons">
+            <v-btn
+              v-for="countyName in countiesForCompare"
+              :key="countyName.name"
+              class="county-select-button"
+              outlined
+              :style="{
+                'background-color': contains(selectedCounties, countyName)
+                  ? countyName.color
+                  : 'white',
+                color: contains(selectedCounties, countyName)
+                  ? 'white'
+                  : 'black'
+              }"
+              type="button"
+              @click="provide(countyName)"
+            >
+              {{ countyName.name }}
+            </v-btn>
+          </div>
+        </DataView>
+      </v-col>
+      <v-col
+        :county="CountyData[currentCounty]"
+        cols="12"
+        md="6"
+        class="DataCard"
+      >
+        <time-line-chart-county-comparison
+          :title="`Cases per 1,000 People`"
+          :title-id="'cases-per-people'"
+          :chart-data="CountyData"
+          :selected-counties="selectedCounties"
+          :chart-data-type="'casesperpeople'"
+          :date="CountyData[currentCounty].lastUpdatedAt"
+          :url="'https://coronadatascraper.com'"
+        />
+      </v-col>
     </v-row>
   </div>
 </template>
 
 <script>
 import TimeBarChart from '@/components/TimeBarChart.vue'
+import TimeLineChartCountyComparison from '@/components/TimeLineChartCountyComparison.vue'
 import CasesSummary from '@/components/CasesSummary.vue'
 import Data from '@/data/data.json'
 import formatCountyData from '@/utils/formatCountyData'
 import consolidateAllData from '@/utils/consolidateAllData'
 import DataView from '@/components/DataView.vue'
 import { calculateTotalCases, calculateTotalDeaths } from '@/utils/calculations'
+import countyColor from '@/static/data/countyColor.json'
 
 export default {
   components: {
     CasesSummary,
     TimeBarChart,
+    TimeLineChartCountyComparison,
     DataView
   },
   data() {
@@ -146,23 +192,44 @@ export default {
     const CountyData = formatCountyData(Data)
     const ConsolidatedData = consolidateAllData(Data)
     const countyNames = Object.keys(Data)
-    const selectedCountyData = Data[currentCounty]
 
     const totalCases = calculateTotalCases(Data)
     const totalDeaths = calculateTotalDeaths(Data)
 
+    const countiesForCompare = []
+    for (const countyName of countyNames) {
+      countiesForCompare.push({
+        name: countyName,
+        color: countyColor[countyName]
+      })
+    }
+    const selectedCounties = []
+
     const data = {
       Data,
       CountyData,
       ConsolidatedData,
       currentCounty,
       countyNames,
-      selectedCountyData,
       totalCases,
-      totalDeaths
+      totalDeaths,
+      countiesForCompare,
+      selectedCounties
     }
     return data
   },
+  methods: {
+    provide(item) {
+      if (!this.selectedCounties.includes(item)) {
+        this.selectedCounties.push(item)
+      } else {
+        this.selectedCounties.splice(this.selectedCounties.indexOf(item), 1)
+      }
+    },
+    contains(arr, item) {
+      return arr.includes(item)
+    }
+  },
   head() {
     return {
       title: 'Bay Area Pandemic Dashboard'
@@ -228,6 +295,24 @@ export default {
         align-items: center;
       }
     }
+    .county-compare-select-container {
+      display: grid;
+      align-items: center;
+      label {
+        text-align: center;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 24px;
+        color: black;
+        line-height: 33px;
+      }
+    }
+    .county-select-buttons {
+      padding: 20px;
+    }
+    .county-select-button {
+      margin: 10px 10px;
+    }
     @include lessThan($small) {
       .county-select-container {
         display: initial;
diff --git a/components/TimeBarChart.vue b/components/TimeBarChart.vue
index 114446a6..e68eb9f0 100644
--- a/components/TimeBarChart.vue
+++ b/components/TimeBarChart.vue
@@ -188,10 +188,7 @@ export default {
               return labelText
             },
             title(tooltipItem, data) {
-              return data.labels[tooltipItem[0].index].replace(
-                /(\w+)\/(\w+)/,
-                '$1 $2 '
-              )
+              return data.labels[tooltipItem[0].index]
             }
           }
         },
diff --git a/components/TimeLineChartCountyComparison.vue b/components/TimeLineChartCountyComparison.vue
new file mode 100644
index 00000000..c0ef9f2e
--- /dev/null
+++ b/components/TimeLineChartCountyComparison.vue
@@ -0,0 +1,198 @@
+<template>
+  <data-view :title="title" :date="date" :url="url">
+    <bar
+      v-if="displayData != null"
+      :chart-data="displayData"
+      :options="displayOption"
+      :height="240"
+    />
+  </data-view>
+</template>
+
+<script>
+import DataView from '@/components/DataView.vue'
+
+export default {
+  components: { DataView },
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    chartData: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    selectedCounties: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    chartDataType: {
+      type: String,
+      required: true,
+      default: 'cases'
+    },
+    date: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    unit: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    url: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    displayData() {
+      if (this.chartDataType === 'casesperpeople') {
+        if (this.selectedCounties.length) {
+          const dataSets = []
+          for (const county of this.selectedCounties) {
+            dataSets.push({
+              type: 'line',
+              fill: false,
+              borderWidth: 1,
+              pointBackgroundColor: 'rgba(0,0,0,0)',
+              pointBorderColor: 'rgba(0,0,0,0)',
+              borderColor: county.color,
+              lineTension: 0,
+              label: county.name,
+              data: this.chartData[county.name].graph.map(d => {
+                return (
+                  d.confirmedTransition /
+                  (this.chartData[county.name].population / 1000)
+                )
+              }),
+              backgroundColor: '#473A8C'
+            })
+          }
+
+          return {
+            labels: this.chartData[this.selectedCounties[0].name].graph.map(
+              d => {
+                return d.label
+              }
+            ),
+            datasets: dataSets
+          }
+        } else {
+          return {
+            datasets: []
+          }
+        }
+      } else {
+        // TBD for past 7 days
+        return {
+          datasets: []
+        }
+      }
+    },
+    displayOption() {
+      const unit = this.unit
+      return {
+        tooltips: {
+          displayColors: false,
+          callbacks: {
+            label(tooltipItem) {
+              const labelText =
+                (Math.round(tooltipItem.value * 100) / 100).toLocaleString() +
+                unit
+              return labelText
+            },
+            title(tooltipItem, data) {
+              return data.labels[tooltipItem[0].index]
+            }
+          }
+        },
+        barValueSpacing: 20,
+        responsive: true,
+        maintainAspectRatio: false,
+        legend: {
+          display: true
+        },
+        scales: {
+          xAxes: [
+            {
+              id: 'day',
+              stacked: false,
+              gridLines: {
+                display: false
+              },
+              ticks: {
+                fontSize: 12,
+                maxTicksLimit: 20,
+                fontColor: '#808080',
+                maxRotation: 0,
+                minRotation: 0,
+                callback: label => {
+                  return label.split('/')[1]
+                }
+              }
+            },
+            {
+              id: 'month',
+              stacked: false,
+              gridLines: {
+                drawOnChartArea: false,
+                drawTicks: true,
+                drawBorder: false,
+                tickMarkLength: 10
+              },
+              ticks: {
+                fontSize: 12,
+                fontColor: '#808080',
+                padding: 3,
+                fontStyle: 'bold',
+                gridLines: {
+                  display: true
+                },
+                callback: label => {
+                  const month = label.split(' ')[0]
+                  return month
+                }
+              },
+              type: 'time',
+              time: {
+                unit: 'month'
+              }
+            }
+          ],
+          yAxes: [
+            {
+              location: 'bottom',
+              stacked: false,
+              gridLines: {
+                display: true,
+                color: '#E5E5E5'
+              },
+              ticks: {
+                suggestedMin: 0,
+                maxTicksLimit: 8,
+                fontColor: '#808080'
+              }
+            }
+          ]
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.selectorButton {
+  margin-top: 24px;
+}
+</style>
diff --git a/static/data/countyColor.json b/static/data/countyColor.json
new file mode 100644
index 00000000..8f12cb6f
--- /dev/null
+++ b/static/data/countyColor.json
@@ -0,0 +1,11 @@
+{
+    "Solano County": "#999900",
+    "Alameda County": "#009900",
+    "Santa Clara County": "#ff0000",
+    "San Francisco County": "#7f00ff",
+    "Contra Costa County": "#ff8800",
+    "San Mateo County": "#0080ff",
+    "Sonoma County": "#ff00ff",
+    "Napa County": "#808080",
+    "Marin County": "#0000ff"
+}
\ No newline at end of file
diff --git a/utils/formatCountyData.ts b/utils/formatCountyData.ts
index b28c5f38..b2d74ac0 100644
--- a/utils/formatCountyData.ts
+++ b/utils/formatCountyData.ts
@@ -22,6 +22,7 @@ type GraphDataType = {
 
 type CountyDataFormattedType = {
   name: string
+  population: number
   graph: Array<GraphDataType>
   lastUpdatedAt: Date
 }
@@ -47,9 +48,10 @@ export default (data: Array<CountyDataType>, countyFilter?: Array<string>) => {
 
   for (const countyName in data) {
     if (countyFilter && !includedCounties[countyName]) continue
-    const { name, cases } = data[countyName]
+    const { name, population, cases } = data[countyName]
     const county: CountyDataFormattedType = {
       name,
+      population,
       graph: formatGraph(cases),
       lastUpdatedAt: cases.slice(-1)[0].date
     }

From 544e5c7a6f6a2d3593cb30803c6a101d5f9b69f4 Mon Sep 17 00:00:00 2001
From: kengoy <Kengo.Yoshii.925@gmail.com>
Date: Wed, 8 Jul 2020 00:03:16 -0700
Subject: [PATCH 2/2] Added a line chart for Percent Increase in 7 Days

---
 components/Stats.vue                         | 17 +++++++
 components/TimeLineChartCountyComparison.vue | 51 +++++++++++++++-----
 2 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/components/Stats.vue b/components/Stats.vue
index a7a9f28b..bbec840e 100644
--- a/components/Stats.vue
+++ b/components/Stats.vue
@@ -165,6 +165,23 @@
           :url="'https://coronadatascraper.com'"
         />
       </v-col>
+      <v-col
+        :county="CountyData[currentCounty]"
+        cols="12"
+        md="6"
+        class="DataCard"
+      >
+        <time-line-chart-county-comparison
+          :title="`Percent Increase in 7 Days`"
+          :title-id="'percent-increase-in7days'"
+          :chart-data="CountyData"
+          :selected-counties="selectedCounties"
+          :chart-data-type="'percentincrease'"
+          :date="CountyData[currentCounty].lastUpdatedAt"
+          :unit="'%'"
+          :url="'https://coronadatascraper.com'"
+        />
+      </v-col>
     </v-row>
   </div>
 </template>
diff --git a/components/TimeLineChartCountyComparison.vue b/components/TimeLineChartCountyComparison.vue
index c0ef9f2e..e7bf3ef2 100644
--- a/components/TimeLineChartCountyComparison.vue
+++ b/components/TimeLineChartCountyComparison.vue
@@ -56,9 +56,9 @@ export default {
   },
   computed: {
     displayData() {
-      if (this.chartDataType === 'casesperpeople') {
-        if (this.selectedCounties.length) {
-          const dataSets = []
+      if (this.selectedCounties.length) {
+        const dataSets = []
+        if (this.chartDataType === 'casesperpeople') {
           for (const county of this.selectedCounties) {
             dataSets.push({
               type: 'line',
@@ -74,8 +74,7 @@ export default {
                   d.confirmedTransition /
                   (this.chartData[county.name].population / 1000)
                 )
-              }),
-              backgroundColor: '#473A8C'
+              })
             })
           }
 
@@ -88,12 +87,44 @@ export default {
             datasets: dataSets
           }
         } else {
+          // Percent Increase in 7 days
+          for (const county of this.selectedCounties) {
+            const confirmedCumulativeIn7daysQueue = []
+            dataSets.push({
+              type: 'line',
+              fill: false,
+              borderWidth: 1,
+              pointBackgroundColor: 'rgba(0,0,0,0)',
+              pointBorderColor: 'rgba(0,0,0,0)',
+              borderColor: county.color,
+              lineTension: 0,
+              label: county.name,
+              data: this.chartData[county.name].graph.map(d => {
+                confirmedCumulativeIn7daysQueue.push(d.cumulative)
+                if (confirmedCumulativeIn7daysQueue.length > 7) {
+                  const confirmedCumulative7daysBefore = confirmedCumulativeIn7daysQueue.shift()
+                  return (
+                    ((d.cumulative - confirmedCumulative7daysBefore) /
+                      confirmedCumulative7daysBefore) *
+                    100
+                  )
+                } else {
+                  return null
+                }
+              })
+            })
+          }
+
           return {
-            datasets: []
+            labels: this.chartData[this.selectedCounties[0].name].graph.map(
+              d => {
+                return d.label
+              }
+            ),
+            datasets: dataSets
           }
         }
       } else {
-        // TBD for past 7 days
         return {
           datasets: []
         }
@@ -191,8 +222,4 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.selectorButton {
-  margin-top: 24px;
-}
-</style>
+<style lang="scss" scoped></style>