Add hospitalizations page.

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

@@ -92,6 +92,9 @@ const chips = reactive({
       ? ((change / yesterday) * 100)
       : ((change / today) * 100)
 
+    if (percent === Infinity) return 100
+    if (isNaN(percent)) return 0
+
     return Math.abs(percent.toFixed(1))
   }),
 
@@ -128,6 +131,9 @@ const chips = reactive({
       ? ((change / yesterday) * 100)
       : ((change / today) * 100)
 
+    if (percent === Infinity) return 100
+    if (isNaN(percent)) return 0
+
     return Math.abs(percent.toFixed(1))
   }),
 

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

@@ -38,7 +38,7 @@ const calendarOptions = computed(() => {
     palette: { colors },
     calendar_initial: parameters.value ? parameters.value.end : null,
     data: rows.value.map(r => ([
-      `${col(data, r, 'report_date')} 12:00:00`,
+      `${col(data, r, 'report_date')} 23:59:59`,
       col(data, r, column)
     ]))
   }
@@ -58,7 +58,7 @@ const areaOptions = computed(() => {
     series: [
       {
         points: rows.value.map(r => ([
-          `${col(data, r, 'report_date')} 12:00:00`,
+          `${col(data, r, 'report_date')} 23:59:59`,
           col(data, r, column)
         ]))
       }

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

@@ -38,7 +38,7 @@ const calendarOptions = computed(() => {
     palette: { colors },
     calendar_initial: parameters.value ? parameters.value.end : null,
     data: rows.value.map(r => ([
-      `${col(data, r, 'report_date')} 12:00:00`,
+      `${col(data, r, 'report_date')} 23:59:59`,
       Math.round(col(data, r, column) * 10000)
     ]))
   }
@@ -58,7 +58,7 @@ const areaOptions = computed(() => {
     series: [
       {
         points: rows.value.map(r => ([
-          `${col(data, r, 'report_date')} 12:00:00`,
+          `${col(data, r, 'report_date')} 23:59:59`,
           Math.round(col(data, r, column) * 10000)
         ]))
       }

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

@@ -38,7 +38,7 @@ const areaOptions = computed(() => {
     series: [
       {
         points: rows.value.map(r => ([
-          `${col(data, r, 'report_date')} 12:00:00`,
+          `${col(data, r, 'report_date')} 23:59:59`,
           col(data, r, column)
         ]))
       }

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

@@ -38,7 +38,7 @@ const areaOptions = computed(() => {
     series: [
       {
         points: rows.value.map(r => ([
-          `${col(data, r, 'report_date')} 12:00:00`,
+          `${col(data, r, 'report_date')} 23:59:59`,
           Math.round(col(data, r, column) * 10000)
         ]))
       }

src/components/charts/overall/hospitalizations/ChipsHospitalizations.vue

@@ -0,0 +1,101 @@
+<template>
+  <StatCard class="flex flex-col justify-around">
+    <template v-slot:heading>Confirmed Hospitalizations {{last_report_date ? humanDate(last_report_date) : ''}}</template>
+    <template v-slot:value v-if="chips.today_hospitalizations != null">
+      {{chips.today_hospitalizations.toLocaleString()}}
+    </template>
+    <template v-slot:meta v-if="chips.today_hospitalization_change != null">
+      <span v-if="chips.today_hospitalization_change > 0">Up </span>
+      <span v-if="chips.today_hospitalization_change < 0">Down </span>
+      <span :class="{'font-semibold': true, 'text-red-600': chips.today_hospitalization_change > 0, 'text-green-600': chips.today_hospitalization_change < 0}">
+        {{Math.abs(chips.today_hospitalization_change).toLocaleString()}} ({{chips.today_hospitalization_change_percent}}%)
+      </span> compared to previous day
+    </template>
+  </StatCard>
+
+  <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()}}
+    </template>
+    <template v-slot:meta v-if="chips.population != null">
+      <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>
+</template>
+
+<script setup>
+import { reactive, computed } from 'vue'
+import { col, humanDate } from '@/components/charts/util'
+import store from '@/components/charts/overall/hospitalizations/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
+
+    const r = data.value.rows.at(-1)
+    return col(data, r, 'population')
+  }),
+
+  today_hospitalizations: computed(() => {
+    if (!data.value) return null
+
+    const r = data.value.rows.at(-1)
+    return col(data, r, 'hospitalizations')
+  }),
+
+  today_hospitalization_change: computed(() => {
+    if (!data.value) return null
+
+    const today = col(data, data.value.rows.at(-1), 'hospitalizations')
+    const yesterday = col(data, data.value.rows.at(-2), 'hospitalizations')
+    return today - yesterday
+  }),
+
+  today_hospitalization_change_percent: computed(() => {
+    if (!data.value) return null
+
+    const today = col(data, data.value.rows.at(-1), 'hospitalizations')
+    const yesterday = col(data, data.value.rows.at(-2), 'hospitalizations')
+    const change = today - yesterday
+
+    const percent = change > 0
+      ? ((change / yesterday) * 100)
+      : ((change / today) * 100)
+
+    if (percent === Infinity) return 100
+    if (isNaN(percent)) return 0
+
+    return Math.abs(percent.toFixed(1))
+  }),
+
+  last_14_days_hospitalizations: computed(() => {
+    if (!data.value) return null
+
+    const r = data.value.rows.at(-1)
+    return col(data, r, 'hospitalizations_last_14_days')
+  }),
+
+  last_14_days_hospitalizations_per_capita: computed(() => {
+    if (!data.value) return null
+
+    const r = data.value.rows.at(-1)
+    return Math.round(col(data, r, 'hospitalizations_last_14_days_per_capita') * 10000)
+  }),
+
+  total_hospitalizations_per_capita: computed(() => {
+    if (!data.value) return null
+
+    const r = data.value.rows.at(-1)
+    return Math.round(col(data, r, 'total_hospitalizations_per_capita') * 10000)
+  })
+})
+
+</script>

src/components/charts/overall/hospitalizations/MapHospitalizations.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">
+      Hospitalizations per 10,000 Residents
+    </h2>
+    <p class="mb-4 text-sm text-indigo-700">Last two weeks</p>
+    <JSCharting :options="mapOptions" class="flex-1" style="min-height: 50vh;"/>
+  </Card>
+</template>
+
+<script setup>
+import { computed, onMounted } from 'vue'
+import { col, colors, formatDate} from '@/components/charts/util'
+
+import store from '@/components/charts/overall/hospitalizations/store_combined.js'
+
+const column = 'total_hospitalizations'
+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, 'hospitalizations_last_14_days_per_capita') * 10000)
+            }
+          }
+        })
+    }],
+  }
+})
+
+onMounted(() => {
+  var chart;
+  var countiesData;
+})
+</script>

src/components/charts/overall/hospitalizations/ParametersHospitalizations.vue

@@ -0,0 +1,9 @@
+<template>
+  <SliceSelector :parameters="parameters" :unknown="true"></SliceSelector>
+</template>
+
+<script setup lang='ts'>
+import store from '@/components/charts/overall/hospitalizations/store.js'
+
+const parameters = store.parameters
+</script>

src/components/charts/overall/hospitalizations/TrendDailyHospitalizations.vue

@@ -0,0 +1,68 @@
+<template>
+  <Card>
+    <h2 class="mb-6 text-xl text-indigo-900 flex justify-between items-center">
+      Daily Hospitalizations
+
+      <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/hospitalizations/store.js'
+
+const chart = ref('calendar')
+
+const column = 'hospitalizations'
+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`,
+      col(data, r, column)
+    ]))
+  }
+})
+
+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`,
+          col(data, r, column)
+        ]))
+      }
+    ]
+  }
+})
+</script>

src/components/charts/overall/hospitalizations/TrendDailyHospitalizationsPerCapita.vue

@@ -0,0 +1,68 @@
+<template>
+  <Card>
+    <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">
+        <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/hospitalizations/store.js'
+
+const chart = ref('calendar')
+
+const column = 'hospitalizations_last_14_days_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/hospitalizations/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/hospitalizations/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/hospitalizations/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/hospitalizations/combined.json`).then(res => res.json())
+}
+
+if (globalThis.window) {
+  refreshData()
+}
+
+export default store

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

@@ -38,7 +38,7 @@ const calendarOptions = computed(() => {
     palette: { colors },
     calendar_initial: parameters.value ? parameters.value.end : null,
     data: rows.value.map(r => ([
-      `${col(data, r, 'report_date')} 12:00:00`,
+      `${col(data, r, 'report_date')} 23:59:59`,
       col(data, r, column)
     ]))
   }
@@ -58,7 +58,7 @@ const areaOptions = computed(() => {
     series: [
       {
         points: rows.value.map(r => ([
-          `${col(data, r, 'report_date')} 12:00:00`,
+          `${col(data, r, 'report_date')} 23:59:59`,
           col(data, r, column)
         ]))
       }

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

@@ -37,7 +37,7 @@ const calendarOptions = computed(() => {
     palette: { colors },
     calendar_initial: parameters.value ? parameters.value.end : null,
     data: rows.value.map(r => ([
-      `${col(data, r, 'report_date')} 12:00:00`,
+      `${col(data, r, 'report_date')} 23:59:59`,
       col(data, r, column)
     ]))
   }
@@ -57,7 +57,7 @@ const areaOptions = computed(() => {
     series: [
       {
         points: rows.value.map(r => ([
-          `${col(data, r, 'report_date')} 12:00:00`,
+          `${col(data, r, 'report_date')} 23:59:59`,
           col(data, r, column)
         ]))
       }

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

@@ -38,7 +38,7 @@ const calendarOptions = computed(() => {
     palette: { colors },
     calendar_initial: parameters.value ? parameters.value.end : null,
     data: rows.value.map(r => ([
-      `${col(data, r, 'report_date')} 12:00:00`,
+      `${col(data, r, 'report_date')} 23:59:59`,
       col(data, r, column)
     ]))
   }
@@ -58,7 +58,7 @@ const areaOptions = computed(() => {
     series: [
       {
         points: rows.value.map(r => ([
-          `${col(data, r, 'report_date')} 12:00:00`,
+          `${col(data, r, 'report_date')} 23:59:59`,
           col(data, r, column)
         ]))
       }

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

@@ -38,7 +38,7 @@ const calendarOptions = computed(() => {
     palette: { colors },
     calendar_initial: parameters.value ? parameters.value.end : null,
     data: rows.value.map(r => ([
-      `${col(data, r, 'report_date')} 12:00:00`,
+      `${col(data, r, 'report_date')} 23:59:59`,
       col(data, r, column)
     ]))
   }
@@ -58,7 +58,7 @@ const areaOptions = computed(() => {
     series: [
       {
         points: rows.value.map(r => ([
-          `${col(data, r, 'report_date')} 12:00:00`,
+          `${col(data, r, 'report_date')} 23:59:59`,
           col(data, r, column)
         ]))
       }

src/layouts/components/Navigation.vue

@@ -18,12 +18,12 @@
             <icon-mdi-virus-outline class="mr-2"></icon-mdi-virus-outline> cases?
           </router-link>
         </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">
+        <li>
+          <router-link :to="{path: '/overall/hospitalizations'}" 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>
         </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-grave-stone class="mr-2"></icon-mdi-grave-stone> deaths?
           </router-link>

src/pages/overall/cases.mdx

@@ -1,8 +1,8 @@
 ---
-title: What is the statewide trend in testing?
+title: What is the overall trend in cases?
 ---
 
-<div class="grid gap-4 grid-cols-1 xl:grid-cols-2">
+<div class="grid gap-2 lg:gap-4 grid-cols-1 xl:grid-cols-2">
   <Card class="col-span-1" prose={true}>
     # What is the overall trend in cases?
 
@@ -28,11 +28,11 @@ title: What is the statewide trend in testing?
 
 <ParametersCases client:load/>
 
-<div class="grid gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
+<div class="grid gap-2 lg: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">
+<div class="grid gap-2 lg:gap-4 grid-cols-1 xl:grid-cols-2">
   <TrendDailyCases client:load/>
   <TrendDailyCasesPerCapita client:load/>
 

src/pages/overall/hospitalizations.mdx

@@ -0,0 +1,32 @@
+---
+title: What is the overall trend in hospitalizations?
+---
+
+<Card prose={true}>
+  # What is the overall trend in hospitalizations?
+
+  ## What is this report useful for?
+
+  Hospitalization counts can serve as an early indicator of the severity of a particular outbreak.
+  While [case counts](cases) can tell you how rapidly the disease is spreading, they give you no indication of how likely a particular outbreak is to result in bodily harm or death.
+
+  Hospitalizations are considered a **lagging indicator**, as it may take several weeks before an infected patient requires hospitalization.
+  Accordingly, hospitalization counts are ineffective for personal decisionmaking as they only give you insight into the past.
+
+  *If hospitalization counts **do** closely follow case counts, that may indicate an outbreak of a highly-dangerous variant.*<br/>
+  *If many weeks after an increase in cases hospitalizations do not appreciably rise, that may indicate that a particular variant is relatively benign.*
+</Card>
+
+<ParametersHospitalizations client:load/>
+
+<div class="grid gap-2 lg:gap-4 grid-cols-2">
+  <MapHospitalizations client:load class="col-span-2 xl:col-span-1 xl:row-span-2"/>
+
+  <ChipsHospitalizations client:load/>
+</div>
+
+
+<div class="grid gap-2 lg:gap-4 grid-cols-1 xl:grid-cols-2">
+  <TrendDailyHospitalizations client:load/>
+  <TrendDailyHospitalizationsPerCapita client:load/>
+</div>

src/pages/overall/testing.mdx

@@ -1,5 +1,5 @@
 ---
-title: What is the statewide trend in testing?
+title: What is the overall trend in testing?
 ---
 
 <Card prose={true}>
@@ -19,11 +19,11 @@ title: What is the statewide trend in testing?
 
 <ParametersTesting client:load/>
 
-<div class="grid gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
+<div class="grid gap-2 lg:gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
   <ChipsTesting client:load/>
 </div>
 
-<div class="grid gap-4 grid-cols-1 xl:grid-cols-2">
+<div class="grid gap-2 lg:gap-4 grid-cols-1 xl:grid-cols-2">
   <TrendPCRTests client:load/>
   <TrendPCRPositive client:load/>