Completed overall testing and cases dashboard.

src/app.ts

@@ -1,3 +1,12 @@
 import { defineApp } from 'iles'
 
-export default defineApp({})
+export default defineApp({
+  // head: {
+  //   script: [
+  //     {
+  //       type: 'text/javascript',
+  //       src: 'https://code.jscharting.com/latest/jscharting.js'
+  //     }
+  //   ]
+  // }
+})

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

@@ -1,6 +1,6 @@
 <template>
   <StatCard>
-    <template v-slot:heading>Today's Confirmed Cases</template>
+    <template v-slot:heading>Confirmed Cases {{last_report_date ? humanDate(last_report_date) : ''}}</template>
     <template v-slot:value v-if="chips.today_cases != null">
       {{chips.today_cases.toLocaleString()}}
     </template>
@@ -9,12 +9,12 @@
       <span v-if="chips.today_case_change < 0">Down </span>
       <span :class="{'font-semibold': true, 'text-red-600': chips.today_case_change > 0, 'text-green-600': chips.today_case_change < 0}">
         {{Math.abs(chips.today_case_change).toLocaleString()}} ({{chips.today_case_change_percent}}%)
-      </span> compared to yesterday
+      </span> compared to previous day
     </template>
   </StatCard>
 
   <StatCard>
-    <template v-slot:heading>Today's Cases per 10,000 Residents</template>
+    <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()}}
     </template>
@@ -31,7 +31,7 @@
     <template v-slot:meta v-if="chips.total_case_change != null">
       <span class="font-semibold text-indigo-500">
         {{Math.abs(chips.total_case_change).toLocaleString()}} ({{chips.total_case_change_percent}}%)
-      </span> more than yesterday
+      </span> more than previous day
     </template>
   </StatCard>
 
@@ -48,11 +48,16 @@
 
 <script setup>
 import { reactive, computed } from 'vue'
-import { col } from '@/components/charts/util'
-import store from '@/components/charts/state/cases/store.js'
+import { col, humanDate } from '@/components/charts/util'
+import store from '@/components/charts/overall/cases/store.js'
 
 const data = store.data
 
+const last_report_date = computed(() => {
+  if (!data.value) return null
+  return col(data, data.value.rows.at(-1), 'report_date')
+})
+
 const chips = reactive({
   population: computed(() => {
     if (!data.value) return null

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

@@ -0,0 +1,67 @@
+<template>
+  <Card class="flex flex-col">
+    <h2 class="mb-1 text-xl text-indigo-900 flex justify-between items-center">
+      Cases per 10,000 Residents
+    </h2>
+    <p class="mb-4 text-sm text-indigo-700">Last two weeks</p>
+    <JSCharting :options="mapOptions" class="flex-1"/>
+  </Card>
+</template>
+
+<script setup>
+import { computed, onMounted } from 'vue'
+import { col, colors, formatDate} from '@/components/charts/util'
+
+import store from '@/components/charts/overall/cases/store_combined.js'
+
+const column = 'total_cases'
+const data = store.data
+
+const rows = computed(() => {
+  if (!data.value) return []
+  return data.value.rows
+})
+
+const mapOptions = computed(() => {
+  if (!data.value) return {}
+  const current_date = data.value.segment.report_date.at(-1)
+
+  return {
+    type: 'map solid',
+    legend_position: 'bottom',
+    palette: {
+      pointValue: point => {
+        return point?.userOptions?.attributes?.rate || 0
+      },
+      colors
+    },
+    defaultPoint: {
+      tooltip: '%name County <b>(%rate)</b>',
+      states: {
+        hover: { fill: 'currentColor' }
+      }
+    },
+    series: [{
+      map: '/maps/ga-13-georgia-counties.json',
+      points: rows.value
+        .filter(r => {
+          return col(data, r, 'report_date') === current_date
+        })
+        .map(r => {
+          const id = `ga-13-georgia-counties.${col(data, r, 'county').toLowerCase().split(' ').join('-')}`
+          return {
+            map: id,
+            attributes: {
+              rate: Math.round(col(data, r, 'case_rate_14_days') / 10)
+            }
+          }
+        })
+    }],
+  }
+})
+
+onMounted(() => {
+  var chart;
+  var countiesData;
+})
+</script>

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

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang='ts'>
-import store from '@/components/charts/state/cases/store.js'
+import store from '@/components/charts/overall/cases/store.js'
 
 const parameters = store.parameters
 </script>

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

@@ -1,7 +1,7 @@
 <template>
   <Card>
     <h2 class="mb-6 text-xl text-indigo-900 flex justify-between items-center">
-      Daily PCR Tests Performed
+      Daily Cases
 
       <select v-model="chart" class="text-base m-0">
         <option value="calendar">Calendar</option>
@@ -16,11 +16,11 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { col, colors } from '@/components/charts/util'
-import store from '@/components/charts/state/testing/store.js'
+import store from '@/components/charts/overall/cases/store.js'
 
 const chart = ref('calendar')
 
-const column = 'pcr_performed'
+const column = 'cases'
 const parameters = store.parameters
 const data = store.data
 

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

@@ -0,0 +1,68 @@
+<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')} 12:00:00`,
+      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')} 12:00:00`,
+          Math.round(col(data, r, column) * 10000)
+        ]))
+      }
+    ]
+  }
+})
+</script>

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

@@ -0,0 +1,48 @@
+<template>
+  <Card>
+    <h2 class="mb-6 text-xl text-indigo-900 flex justify-between items-center">
+      Total Cases
+    </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'
+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')} 12:00:00`,
+          col(data, r, column)
+        ]))
+      }
+    ]
+  }
+})
+</script>

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

@@ -0,0 +1,48 @@
+<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')} 12:00:00`,
+          Math.round(col(data, r, column) * 10000)
+        ]))
+      }
+    ]
+  }
+})
+</script>

src/components/charts/overall/cases/store.js

@@ -0,0 +1,35 @@
+import { reactive, ref, watch } from 'vue'
+import { col, formatDate } from '@/components/charts/util.js'
+
+const today = new Date()
+const end = new Date()
+const start = new Date(today.valueOf() - 2592000000)
+
+const store = {
+  parameters: ref({
+    county: '-- All --',
+    start: formatDate(start),
+    end: formatDate(end)
+  }),
+  data: ref(null)
+}
+
+async function refreshData() {
+  store.data.value = await fetch(`/data/state/cases/by-county/${store.parameters.value.county}.json`).then(res => res.json())
+
+  // Annoyingly complicated way to reset the end date to the most recent report date.
+  if (formatDate(end) === formatDate(new Date())) {
+    const mostRecentReportDate = formatDate(new Date(col(store.data, store.data.value.rows.at(-1), 'report_date') + ' 23:59:59'))
+    store.parameters.value.end = mostRecentReportDate
+  }
+}
+
+watch(() => store.parameters.value.county, () => {
+  refreshData()
+})
+
+if (globalThis.window) {
+  refreshData()
+}
+
+export default store

src/components/charts/overall/cases/store_combined.js

@@ -0,0 +1,15 @@
+import { reactive, ref, watch } from 'vue'
+
+const store = {
+  data: ref(null)
+}
+
+async function refreshData() {
+  store.data.value = await fetch(`/data/state/cases/combined.json`).then(res => res.json())
+}
+
+if (globalThis.window) {
+  refreshData()
+}
+
+export default store

src/components/charts/overall/testing/ChipsTesting.vue

@@ -62,7 +62,7 @@
 <script setup>
 import { reactive, computed } from 'vue'
 import { col } from '@/components/charts/util'
-import store from '@/components/charts/state/testing/store.js'
+import store from '@/components/charts/overall/testing/store.js'
 
 const data = store.data
 

src/components/charts/overall/testing/ParametersTesting.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang='ts'>
-import store from '@/components/charts/state/testing/store.js'
+import store from '@/components/charts/overall/testing/store.js'
 
 const parameters = store.parameters
 </script>

src/components/charts/overall/testing/TrendAntigenPositive.vue

@@ -16,7 +16,7 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { col, colors } from '@/components/charts/util'
-import store from '@/components/charts/state/testing/store.js'
+import store from '@/components/charts/overall/testing/store.js'
 
 const chart = ref('calendar')
 

src/components/charts/overall/testing/TrendAntigenTests.vue

@@ -15,7 +15,7 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { col, colors } from '@/components/charts/util'
-import store from '@/components/charts/state/testing/store.js'
+import store from '@/components/charts/overall/testing/store.js'
 
 const chart = ref('calendar')
 

src/components/charts/overall/testing/TrendPCRPositive.vue

@@ -16,7 +16,7 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { col, colors } from '@/components/charts/util'
-import store from '@/components/charts/state/testing/store.js'
+import store from '@/components/charts/overall/testing/store.js'
 
 const chart = ref('calendar')
 

src/components/charts/overall/testing/TrendPCRTests.vue

@@ -16,7 +16,7 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { col, colors } from '@/components/charts/util'
-import store from '@/components/charts/state/testing/store.js'
+import store from '@/components/charts/overall/testing/store.js'
 
 const chart = ref('calendar')
 

src/components/charts/overall/testing/store.js

@@ -1,12 +1,5 @@
 import { reactive, ref, watch } from 'vue'
-
-function formatDate(d) {
-  return [
-    d.getFullYear(),
-    ('0' + (d.getMonth() + 1)).slice(-2),
-    ('0' + d.getDate()).slice(-2)
-  ].join('-');
-}
+import { formatDate } from '@/components/charts/util.js'
 
 const today = new Date()
 const end = new Date()
@@ -22,7 +15,7 @@ const store = {
 }
 
 async function refreshData() {
-  store.data.value = await fetch(`/data/state/testing/${store.parameters.value.county}.json`).then(res => res.json())
+  store.data.value = await fetch(`/data/state/testing/by-county/${store.parameters.value.county}.json`).then(res => res.json())
 }
 
 watch(() => store.parameters.value.county, () => {

src/components/charts/state/cases/store.js

@@ -1,34 +0,0 @@
-import { reactive, ref, watch } from 'vue'
-
-function formatDate(d) {
-  return [
-    d.getFullYear(),
-    ('0' + (d.getMonth() + 1)).slice(-2),
-    ('0' + d.getDate()).slice(-2)
-  ].join('-');
-}
-
-const today = new Date()
-const end = new Date()
-const start = new Date(today.valueOf() - 2592000000)
-
-const store = {
-  parameters: ref({
-    county: '-- All --',
-    start: formatDate(start),
-    end: formatDate(end)
-  }),
-  data: ref(null)
-}
-
-async function refreshData() {
-  store.data.value = await fetch(`/data/state/cases/${store.parameters.value.county}.json`).then(res => res.json())
-}
-
-watch(() => store.parameters.value.county, () => {
-  refreshData()
-})
-
-refreshData()
-
-export default store

src/components/charts/util.js

@@ -5,3 +5,22 @@ export function col(data, row, column) {
   if (index === -1) return null
   return row[index]
 }
+
+export function formatDate(d) {
+  return [
+    d.getFullYear(),
+    ('0' + (d.getMonth() + 1)).slice(-2),
+    ('0' + d.getDate()).slice(-2)
+  ].join('-');
+}
+
+export function humanDate(d) {
+  if (typeof d === 'string') d = new Date(`${d} 23:59:59`)
+  const today = new Date()
+  const yesterday = new Date(today)
+  yesterday.setDate(yesterday.getDate() - 1)
+
+  if (formatDate(d) === formatDate(today)) return 'Today'
+  if (formatDate(d) === formatDate(yesterday)) return 'Yesterday'
+  return d.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
+}

src/components/jscharting/JSGrid.vue

@@ -4,6 +4,7 @@
 
 <script>
 import * as JSC from 'jscharting';
+
 export default {
 	name: 'JSCGrid',
 	props: {

src/layouts/components/Navigation.vue

@@ -6,19 +6,19 @@
       </router-link>
     </li>
     <li>
-      <span class="flex font-bold px-3 py-1 text-violet-900">What is the statewide trend in...</span>
+      <span class="flex font-bold px-3 py-1 text-violet-900">What is the overall trend in...</span>
       <ul class="space-y-1 py-2 ml-3">
         <li>
-          <router-link :to="{path: '/state/testing'}" class="text-base rounded-lg flex items-center p-2 mr-3 hover:bg-violet-100 group" active-class="bg-violet-800 hover:bg-violet-800 text-white">
+          <router-link :to="{path: '/overall/testing'}" class="text-base rounded-lg flex items-center p-2 mr-3 hover:bg-violet-100 group" active-class="bg-violet-800 hover:bg-violet-800 text-white">
             <icon-mdi-test-tube class="mr-2"></icon-mdi-test-tube> testing?
           </router-link>
         </li>
         <li>
-          <router-link :to="{path: '/state/cases'}" class="text-base rounded-lg flex items-center p-2 mr-3 hover:bg-violet-100 group" active-class="bg-violet-800 text-white hover:bg-violet-800">
+          <router-link :to="{path: '/overall/cases'}" class="text-base rounded-lg flex items-center p-2 mr-3 hover:bg-violet-100 group" active-class="bg-violet-800 text-white hover:bg-violet-800">
             <icon-mdi-virus-outline class="mr-2"></icon-mdi-virus-outline> cases?
           </router-link>
         </li>
-        <li>
+        <!-- <li>
           <router-link :to="{path: '/cases'}" class="text-base rounded-lg flex items-center p-2 mr-3 hover:bg-violet-100 group" active-class="bg-violet-800 text-white hover:bg-violet-800">
             <icon-mdi-hospital-box-outline class="mr-2"></icon-mdi-hospital-box-outline> hospitalizations?
           </router-link>
@@ -27,10 +27,10 @@
           <router-link :to="{path: '/cases'}" class="text-base rounded-lg flex items-center p-2 mr-3 hover:bg-violet-100 group" active-class="bg-violet-800 text-white hover:bg-violet-800">
             <icon-mdi-grave-stone class="mr-2"></icon-mdi-grave-stone> deaths?
           </router-link>
-        </li>
+        </li> -->
       </ul>
     </li>
-    <li>
+    <!-- <li>
       <span class="flex font-bold px-3 py-1 text-violet-900">Which counties have the...</span>
       <ul class="space-y-1 py-2 ml-3">
         <li>
@@ -54,8 +54,8 @@
           </router-link>
         </li>
       </ul>
-    </li>
-    <li>
+    </li> -->
+    <!-- <li>
       <span class="flex font-bold px-3 py-1 text-violet-900">Who is most at-risk...</span>
       <ul class="space-y-1 py-2 ml-3">
         <li>
@@ -79,6 +79,6 @@
           </router-link>
         </li>
       </ul>
-    </li>
+    </li> -->
   </ul>
 </template>

src/pages/overall/cases.mdx

@@ -0,0 +1,41 @@
+---
+title: What is the statewide trend in testing?
+---
+
+<div class="grid gap-4 grid-cols-1 xl:grid-cols-2">
+  <Card class="col-span-1" prose={true}>
+    # What is the overall trend in cases?
+
+    ## What is this report useful for?
+
+    The number of new cases per day is the most direct indicator of what to expect over the coming weeks.
+
+    A sudden increase in your area is the first indicator of a major outbreak.
+    While it may take several weeks before hospitalizations and deaths caused by an outbreak are clear, tracking case counts allows you to adjust personal behavior before the full impact is known.
+
+    **Confirmed Cases**:
+    - The number of confirmed cases in your state or county
+    - Less useful than **Cases per 10,000 Residents** as it does not account for population differences.
+
+    **Cases per 10,000 Residents**:
+    - How many people in your locale have been infected in the specified time period relative to the population.
+    - A moving sum of cases over the last two weeks is serves as a rough proxy for the number of active infections per capita in your community.
+    - This (especially when correlated with [percent positive tests](/state/testing)) is the most useful statistic for determining the level of community spread in your area at any given time.
+  </Card>
+
+  <MapCases client:load/>
+</div>
+
+<ParametersCases client:load/>
+
+<div class="grid gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
+  <ChipsCases client:load/>
+</div>
+
+<div class="grid gap-4 grid-cols-1 xl:grid-cols-2">
+  <TrendDailyCases client:load/>
+  <TrendDailyCasesPerCapita client:load/>
+
+  <TrendTotalCases client:load/>
+  <TrendTotalCasesPerCapita client:load/>
+</div>

src/pages/overall/testing.mdx

@@ -3,7 +3,7 @@ title: What is the statewide trend in testing?
 ---
 
 <Card prose={true}>
-  # What is the statewide trend in testing?
+  # What is the overall trend in testing?
 
   ## What is this report useful for?
 

src/pages/state/cases.mdx

@@ -1,32 +0,0 @@
----
-title: What is the statewide trend in testing?
----
-
-<Card prose={true}>
-  # What is the statewide trend in cases?
-
-  ## What is this report useful for?
-
-  The number of new cases reported doesn't directly indicate how rapidly the disease is spreading.
-  By checking how many people are getting tested, you can get an idea of whether the current case load indicates major community spread or
-  if there is simply an unusually large number of people getting tested for one reason or another.
-
-  **For example:**<br/>
-  If you get **10** positive results from **100** tests, the disease is probably spreading more widely than would be indicated if there were **50** positive results from **1,000** tests.
-
-  This discrepancy is often apparent on Mondays, where tests and cases from over the weekend might wind up in Monday's report.
-</Card>
-
-<ParametersCases client:load/>
-
-<div class="grid gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
-  <ChipsCases client:load/>
-</div>
-
-<div class="grid gap-4 grid-cols-1 xl:grid-cols-2">
-  <TrendPCRTests client:load/>
-  <TrendPCRPositive client:load/>
-
-  <TrendAntigenTests client:load/>
-  <TrendAntigenPositive client:load/>
-</div>