Expand age by range risk report with chips.

data/parser/risk/age.js

@@ -28,7 +28,7 @@ async function processSingleZip ({ date, zip }) {
       hospitalizations: +row.confirmed_case_hospitalization,
       deaths: +row.deaths,
       total_cases: +row.cases_cum,
-      total_deaths: +row.total_deaths
+      total_deaths: +row.death_cum
     }
   }).filter(row => !!row.report_date)
 

src/components/charts/risk/age/ChipsRiskAge.vue

@@ -0,0 +1,151 @@
+<template>
+  <StatCard>
+    <template v-slot:heading>Age Group with Fewest Cases</template>
+    <template v-slot:value v-if="chips.age_fewest_cases != null">
+      {{chips.age_fewest_cases.age_group}}
+    </template>
+    <template v-slot:meta v-if="chips.age_fewest_cases != null">
+      <span class="text-green-700 font-bold">{{chips.age_fewest_cases.cases.toLocaleString()}}</span> cases
+    </template>
+  </StatCard>
+
+  <StatCard>
+    <template v-slot:heading>Age Group with Most Cases</template>
+    <template v-slot:value v-if="chips.age_most_cases != null">
+      {{chips.age_most_cases.age_group}}
+    </template>
+    <template v-slot:meta v-if="chips.age_most_cases != null">
+      <span class="text-red-700 font-bold">{{chips.age_most_cases.cases.toLocaleString()}}</span> cases
+    </template>
+  </StatCard>
+
+  <StatCard>
+    <template v-slot:heading>Age Group with Fewest Deaths</template>
+    <template v-slot:value v-if="chips.age_fewest_deaths_relative != null">
+      {{formatAgeGroup(chips.age_fewest_deaths_relative.age_group)}}
+    </template>
+    <template v-slot:meta v-if="chips.age_fewest_deaths_relative != null">
+      <span class="text-red-700 font-bold">{{chips.age_fewest_deaths_relative.deaths.toLocaleString()}}</span> deaths out of <span class="text-violet-700 font-bold">{{chips.age_fewest_deaths_relative.cases.toLocaleString()}}</span> cases
+    </template>
+  </StatCard>
+
+  <StatCard>
+    <template v-slot:heading>Age Group with Most Deaths</template>
+    <template v-slot:value v-if="chips.age_most_deaths_relative != null">
+      {{formatAgeGroup(chips.age_most_deaths_relative.age_group)}}
+    </template>
+    <template v-slot:meta v-if="chips.age_most_deaths_relative != null">
+      <span class="text-red-700 font-bold">{{chips.age_most_deaths_relative.deaths.toLocaleString()}}</span> deaths out of <span class="text-violet-700 font-bold">{{chips.age_most_deaths_relative.cases.toLocaleString()}}</span> cases
+    </template>
+  </StatCard>
+</template>
+
+<script setup>
+import { reactive, computed } from 'vue'
+import { col } from '@/components/charts/util'
+import store from '@/components/charts/risk/age/store.js'
+
+const data = store.data
+
+const formatAgeGroup = (age_group) => {
+  if (age_group === 'Unknown years') return 'Unknown'
+  if (age_group === '80 & Older years') return '80+ years'
+  return age_group
+}
+
+const chips = reactive({
+  last_report_data: computed(() => {
+    if (!data.value) return null
+
+    const rows = [...data.value.rows].sort((a, b) => {
+      const a_report_date = col(data, a, 'report_date')
+      const b_report_date = col(data, b, 'report_date')
+      if (a_report_date === b_report_date) return 0
+      if (a_report_date > b_report_date) return -1
+      if (a_report_date < b_report_date) return 1
+    }).filter((r, _, initialRows) => {
+      const last_report_date = col(data, initialRows[0], 'report_date')
+      return col(data, r, 'report_date') === last_report_date
+    })
+
+    return rows
+  }),
+
+  age_fewest_cases: computed(() => {
+    if (!chips.last_report_data) return null
+
+    const age_group = [...chips.last_report_data]
+    .filter(r => col(data, r, 'age_group') !== 'Unknown years')
+    .sort((a, b) => {
+      const a_cases = col(data, a, 'total_cases')
+      const b_cases = col(data, b, 'total_cases')
+      return a_cases - b_cases
+    })[0]
+
+    return {
+      age_group: col(data, age_group, 'age_group'),
+      cases: col(data, age_group, 'total_cases'),
+    }
+  }),
+
+  age_most_cases: computed(() => {
+    if (!chips.last_report_data) return null
+
+    const age_group = [...chips.last_report_data]
+    .filter(r => col(data, r, 'age_group') !== 'Unknown years')
+    .sort((a, b) => {
+      const a_cases = col(data, a, 'total_cases')
+      const b_cases = col(data, b, 'total_cases')
+      return b_cases - a_cases
+    })[0]
+
+    return {
+      age_group: col(data, age_group, 'age_group'),
+      cases: col(data, age_group, 'total_cases'),
+    }
+  }),
+
+  age_fewest_deaths_relative: computed(() => {
+    if (!chips.last_report_data) return null
+
+    const age_group = [...chips.last_report_data]
+    .filter(r => col(data, r, 'age_group') !== 'Unknown years')
+    .sort((a, b) => {
+      const a_cases = col(data, a, 'total_cases')
+      const b_cases = col(data, b, 'total_cases')
+      const a_deaths = col(data, a, 'total_deaths')
+      const b_deaths = col(data, b, 'total_deaths')
+
+      return (b_cases / b_deaths) - (a_cases / a_deaths)
+    })[0]
+
+    return {
+      age_group: col(data, age_group, 'age_group'),
+      deaths: col(data, age_group, 'total_deaths'),
+      cases: col(data, age_group, 'total_cases'),
+    }
+  }),
+
+  age_most_deaths_relative: computed(() => {
+    if (!chips.last_report_data) return null
+
+    const age_group = [...chips.last_report_data]
+    .filter(r => col(data, r, 'age_group') !== 'Unknown years')
+    .sort((a, b) => {
+      const a_cases = col(data, a, 'total_cases')
+      const b_cases = col(data, b, 'total_cases')
+      const a_deaths = col(data, a, 'total_deaths')
+      const b_deaths = col(data, b, 'total_deaths')
+
+      return (a_cases / a_deaths) - (b_cases / b_deaths)
+    })[0]
+
+    return {
+      age_group: col(data, age_group, 'age_group'),
+      deaths: col(data, age_group, 'total_deaths'),
+      cases: col(data, age_group, 'total_cases'),
+    }
+  })
+})
+
+</script>

src/components/charts/risk/age/TrendRiskAge.vue

@@ -11,11 +11,10 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { computed } from 'vue'
 import { col, humanDate } from '@/components/charts/util'
 import store from '@/components/charts/risk/age/store.js'
 
-const column = 'cases'
 const parameters = store.parameters
 const data = store.data
 

src/pages/risk/age.mdx

@@ -13,6 +13,10 @@ title: Who is most at risk by age?
 
 <ParametersRiskAge client:load/>
 
+<div class="grid gap-2 lg:gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
+  <ChipsRiskAge client:load/>
+</div>
+
 <div class="grid gap-2 lg:gap-4 grid-cols-1 xl:grid-cols-2">
   <TrendRiskAge client:load/>
 </div>