Fix several graphs and handle unknown counties.

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>

src/components/charts/overall/cases/TrendDailyCasesPerCapita.vue

@@ -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>

src/components/charts/overall/cases/TrendTotalCasesPerCapita.vue

@@ -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>

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>

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>

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>
 

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>

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>