Completed overall testing and cases dashboard.

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: {