From 000a28ebdc6966638396d8155b405de61e1d405a Mon Sep 17 00:00:00 2001
From: Joshua Bemenderfer <j.bemenderfer@creation.info>
Date: Fri, 31 Dec 2021 15:50:33 -0500
Subject: [PATCH] Fix several graphs and handle unknown counties.

---
 .../charts/overall/cases/ChipsCases.vue       | 10 +--
 .../cases/TrendDailyCasesPerCapita.vue        | 68 -------------------
 .../cases/TrendTotalCasesPerCapita.vue        | 48 -------------
 .../charts/overall/deaths/ChipsDeaths.vue     | 10 +--
 .../ChipsHospitalizations.vue                 |  5 +-
 .../TrendDailyHospitalizationsPerCapita.vue   | 12 +++-
 src/layouts/default.vue                       |  2 +-
 src/pages/overall/cases.mdx                   |  3 -
 8 files changed, 25 insertions(+), 133 deletions(-)
 delete mode 100644 src/components/charts/overall/cases/TrendDailyCasesPerCapita.vue
 delete mode 100644 src/components/charts/overall/cases/TrendTotalCasesPerCapita.vue

diff --git a/src/components/charts/overall/cases/ChipsCases.vue b/src/components/charts/overall/cases/ChipsCases.vue
index 29c75ae04..621ff2038 100644
--- a/src/components/charts/overall/cases/ChipsCases.vue
+++ b/src/components/charts/overall/cases/ChipsCases.vue
@@ -16,9 +16,10 @@
   <StatCard>
     <template v-slot:heading>Cases per 10,000 Residents {{last_report_date ? humanDate(last_report_date) : ''}}</template>
     <template v-slot:value v-if="chips.today_cases_per_capita != null">
-      ~{{chips.today_cases_per_capita.toLocaleString()}}
+      <span v-if="chips.population">~{{chips.today_cases_per_capita.toLocaleString()}}</span>
+      <span v-else>No Data</span>
     </template>
-    <template v-slot:meta v-if="chips.population != null">
+    <template v-slot:meta v-if="chips.population">
       <span class="text-indigo-500 font-semibold">{{chips.today_cases.toLocaleString()}}</span> out of <span class="text-indigo-500 font-semibold">{{chips.population.toLocaleString()}}</span> residents
     </template>
   </StatCard>
@@ -38,9 +39,10 @@
   <StatCard>
     <template v-slot:heading>Total Cases per 10,000 Residents</template>
     <template v-slot:value v-if="chips.total_cases_per_capita != null">
-      ~{{chips.total_cases_per_capita.toLocaleString()}}
+      <span v-if="chips.population !== 0">~{{chips.total_cases_per_capita.toLocaleString()}}</span>
+      <span v-else>No Data</span>
     </template>
-    <template v-slot:meta v-if="chips.total_cases != null && chips.population != null">
+    <template v-slot:meta v-if="chips.total_cases != null && chips.population">
       <span class="text-indigo-500 font-semibold">{{chips.total_cases.toLocaleString()}}</span> out of <span class="text-indigo-500 font-semibold">{{chips.population.toLocaleString()}}</span> residents
     </template>
   </StatCard>
diff --git a/src/components/charts/overall/cases/TrendDailyCasesPerCapita.vue b/src/components/charts/overall/cases/TrendDailyCasesPerCapita.vue
deleted file mode 100644
index 5ede6c0a1..000000000
--- a/src/components/charts/overall/cases/TrendDailyCasesPerCapita.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <Card>
-    <h2 class="mb-6 text-xl text-indigo-900 flex justify-between items-center">
-      Daily Cases per 10,000 Residents
-
-      <select v-model="chart" class="text-base m-0">
-        <option value="calendar">Calendar</option>
-        <option value="line">Line Chart</option>
-      </select>
-    </h2>
-    <JSCharting v-if="chart === 'calendar'" :options="calendarOptions"></JSCharting>
-    <JSCharting v-if="chart === 'line'" :options="areaOptions"></JSCharting>
-  </Card>
-</template>
-
-<script setup>
-import { ref, computed } from 'vue'
-import { col, colors } from '@/components/charts/util'
-import store from '@/components/charts/overall/cases/store.js'
-
-const chart = ref('calendar')
-
-const column = 'cases_per_capita'
-const parameters = store.parameters
-const data = store.data
-
-const rows = computed(() => {
-  if (!data.value || !parameters.value) return []
-  return data.value.rows
-    .filter(r => {
-      return col(data, r, 'report_date') >= parameters.value.start && col(data, r, 'report_date') <= parameters.value.end
-    })
-})
-
-const calendarOptions = computed(() => {
-  return {
-    type: 'calendar month solid',
-    palette: { colors },
-    calendar_initial: parameters.value ? parameters.value.end : null,
-    data: rows.value.map(r => ([
-      `${col(data, r, 'report_date')} 23:59:59`,
-      Math.round(col(data, r, column) * 10000)
-    ]))
-  }
-})
-
-const areaOptions = computed(() => {
-  return {
-    type: 'lineSpline',
-    legend_visible: false,
-    xAxis: { crosshair_enabled: true, scale_type: 'time' },
-    palette: { colors },
-    defaultSeries: {
-      shape_opacity: 0.55,
-      color: colors[Math.round(colors.length / 2)],
-      defaultPoint_marker_visible: false
-    },
-    series: [
-      {
-        points: rows.value.map(r => ([
-          `${col(data, r, 'report_date')} 23:59:59`,
-          Math.round(col(data, r, column) * 10000)
-        ]))
-      }
-    ]
-  }
-})
-</script>
diff --git a/src/components/charts/overall/cases/TrendTotalCasesPerCapita.vue b/src/components/charts/overall/cases/TrendTotalCasesPerCapita.vue
deleted file mode 100644
index 2b3e64224..000000000
--- a/src/components/charts/overall/cases/TrendTotalCasesPerCapita.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <Card>
-    <h2 class="mb-6 text-xl text-indigo-900 flex justify-between items-center">
-      Total Cases per 10,000 Residents
-    </h2>
-    <JSCharting :options="areaOptions"></JSCharting>
-  </Card>
-</template>
-
-<script setup>
-import { ref, computed } from 'vue'
-import { col, colors } from '@/components/charts/util'
-import store from '@/components/charts/overall/cases/store.js'
-
-const column = 'total_cases_per_capita'
-const parameters = store.parameters
-const data = store.data
-
-const rows = computed(() => {
-  if (!data.value || !parameters.value) return []
-  return data.value.rows
-    .filter(r => {
-      return col(data, r, 'report_date') >= parameters.value.start && col(data, r, 'report_date') <= parameters.value.end
-    })
-})
-
-const areaOptions = computed(() => {
-  return {
-    type: 'lineSpline',
-    legend_visible: false,
-    xAxis: { crosshair_enabled: true, scale_type: 'time' },
-    palette: { colors },
-    defaultSeries: {
-      shape_opacity: 0.55,
-      color: colors[Math.round(colors.length / 2)],
-      defaultPoint_marker_visible: false
-    },
-    series: [
-      {
-        points: rows.value.map(r => ([
-          `${col(data, r, 'report_date')} 23:59:59`,
-          Math.round(col(data, r, column) * 10000)
-        ]))
-      }
-    ]
-  }
-})
-</script>
diff --git a/src/components/charts/overall/deaths/ChipsDeaths.vue b/src/components/charts/overall/deaths/ChipsDeaths.vue
index 8a9a553fa..8928235ed 100644
--- a/src/components/charts/overall/deaths/ChipsDeaths.vue
+++ b/src/components/charts/overall/deaths/ChipsDeaths.vue
@@ -16,9 +16,10 @@
   <StatCard>
     <template v-slot:heading>Deaths per 100,000 Residents {{last_report_date ? humanDate(last_report_date) : ''}}</template>
     <template v-slot:value v-if="chips.current_deaths_per_capita != null">
-      ~{{chips.current_deaths_per_capita.toLocaleString()}}
+      <span v-if="chips.population">~{{chips.current_deaths_per_capita.toLocaleString()}}</span>
+      <span v-else>No Data</span>
     </template>
-    <template v-slot:meta v-if="chips.current_deaths != null && chips.population != null">
+    <template v-slot:meta v-if="chips.current_deaths != null && chips.population">
       <span class="text-indigo-500 font-semibold">{{chips.current_deaths.toLocaleString()}}</span> out of <span class="text-indigo-500 font-semibold">{{chips.population.toLocaleString()}}</span> residents
     </template>
   </StatCard>
@@ -38,9 +39,10 @@
   <StatCard>
     <template v-slot:heading>Total Deaths per 100,000 Residents</template>
     <template v-slot:value v-if="chips.total_deaths_per_capita != null">
-      ~{{chips.total_deaths_per_capita.toLocaleString()}}
+      <span v-if="chips.population">~{{chips.total_deaths_per_capita.toLocaleString()}}</span>
+      <span v-else>No Data</span>
     </template>
-    <template v-slot:meta v-if="chips.total_deaths != null && chips.population != null">
+    <template v-slot:meta v-if="chips.total_deaths != null && chips.population">
       <span class="text-indigo-500 font-semibold">{{chips.total_deaths.toLocaleString()}}</span> out of <span class="text-indigo-500 font-semibold">{{chips.population.toLocaleString()}}</span> residents
     </template>
   </StatCard>
diff --git a/src/components/charts/overall/hospitalizations/ChipsHospitalizations.vue b/src/components/charts/overall/hospitalizations/ChipsHospitalizations.vue
index 6e7739203..98616908f 100644
--- a/src/components/charts/overall/hospitalizations/ChipsHospitalizations.vue
+++ b/src/components/charts/overall/hospitalizations/ChipsHospitalizations.vue
@@ -16,9 +16,10 @@
   <StatCard class="flex flex-col justify-around">
     <template v-slot:heading>Hospitalizations per 10,000 Residents Last Two Weeks</template>
     <template v-slot:value v-if="chips.last_14_days_hospitalizations_per_capita != null">
-      ~{{chips.last_14_days_hospitalizations_per_capita.toLocaleString()}}
+      <span v-if="chips.population">~{{chips.last_14_days_hospitalizations_per_capita.toLocaleString()}}</span>
+      <span v-else>No Data</span>
     </template>
-    <template v-slot:meta v-if="chips.population != null">
+    <template v-slot:meta v-if="chips.population">
       <span class="text-indigo-500 font-semibold">{{chips.last_14_days_hospitalizations.toLocaleString()}}</span> out of <span class="text-indigo-500 font-semibold">{{chips.population.toLocaleString()}}</span> residents
     </template>
   </StatCard>
diff --git a/src/components/charts/overall/hospitalizations/TrendDailyHospitalizationsPerCapita.vue b/src/components/charts/overall/hospitalizations/TrendDailyHospitalizationsPerCapita.vue
index 8b1487f98..ef27eb791 100644
--- a/src/components/charts/overall/hospitalizations/TrendDailyHospitalizationsPerCapita.vue
+++ b/src/components/charts/overall/hospitalizations/TrendDailyHospitalizationsPerCapita.vue
@@ -3,13 +3,19 @@
     <h2 class="mb-6 text-xl text-indigo-900 flex justify-between items-center">
       Daily Hospitalizations per 10,000 Residents
 
-      <select v-model="chart" class="text-base m-0">
+      <select v-model="chart" class="text-base m-0" v-if="parameters.county !== '-- Unknown --'">
         <option value="calendar">Calendar</option>
         <option value="line">Line Chart</option>
       </select>
     </h2>
-    <JSCharting v-if="chart === 'calendar'" :options="calendarOptions"></JSCharting>
-    <JSCharting v-if="chart === 'line'" :options="areaOptions"></JSCharting>
+
+    <template v-if="parameters.county !== '-- Unknown --'">
+      <JSCharting v-if="chart === 'calendar'" :options="calendarOptions"></JSCharting>
+      <JSCharting v-if="chart === 'line'" :options="areaOptions"></JSCharting>
+    </template>
+    <template v-else>
+      <div class="w-full h-full flex items-center justify-center text-2xl text-indigo-700 font-bold">No Data</div>
+    </template>
   </Card>
 </template>
 
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index cc5186ce5..5026e45e4 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -16,7 +16,7 @@
           <ul class="flex items-center mt-4 lg:mt-0">
             <li class="text-center"><a href="/sources" class="font-normal text-violet-900 hover:bg-violet-100 rounded-lg p-2 px-3 block">Sources</a></li>
             <li class="text-center"><a href="/about" class="font-normal text-violet-900 hover:bg-violet-100 rounded-lg p-2 px-3 block">About</a></li>
-            <li class="text-center"><a href="/contact" class="font-normal text-violet-900 hover:bg-violet-100 rounded-lg p-2 px-3 block">Contact</a></li>
+            <li class="text-center"><a href="mailto:josh@thederf.com" target="_blank" class="font-normal text-violet-900 hover:bg-violet-100 rounded-lg p-2 px-3 block">Contact</a></li>
           </ul>
         </div>
       </article>
diff --git a/src/pages/overall/cases.mdx b/src/pages/overall/cases.mdx
index d93a78e8a..0e2813c77 100644
--- a/src/pages/overall/cases.mdx
+++ b/src/pages/overall/cases.mdx
@@ -34,8 +34,5 @@ title: What is the overall trend in cases?
 
 <div class="grid gap-2 lg:gap-4 grid-cols-1 xl:grid-cols-2">
   <TrendDailyCases client:load/>
-  <TrendDailyCasesPerCapita client:load/>
-
   <TrendTotalCases client:load/>
-  <TrendTotalCasesPerCapita client:load/>
 </div>