Initial work on health conditions report.

src/components/charts/risk/health-conditions/TrendRiskHealthConditions.vue

@@ -0,0 +1,66 @@
+<template>
+  <Card v-for="chart of charts" :key="chart.health_condition">
+    <h2 class="mb-2 text-xl text-indigo-900 flex justify-between items-center">
+      {{chart.health_condition}}
+    </h2>
+    <JSCharting :options="chart.options"></JSCharting>
+  </Card>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { col } from '@/components/charts/util'
+import store from '@/components/charts/risk/health-conditions/store.js'
+
+const data = store.data
+
+const rows = computed(() => {
+  if (!data.value) return []
+  return data.value.rows.filter(r => {
+    return !['Missing/Unknown status on all conditions','Total with completed information'].includes(col(data, r, 'health_condition'))
+  })
+})
+
+const charts = computed(() => {
+  if (!rows.value) return {}
+
+  const dataSet = rows.value.reduce((obj, r) => {
+    const sex = col(data, r, 'sex')
+    if (sex !== 'Total') return obj
+    const health_condition = col(data, r, 'health_condition')
+
+    const cases = col(data, r, 'cases')
+    const deaths = col(data, r, 'deaths')
+
+    console.log(cases, deaths)
+
+    if (!obj[health_condition]) obj[health_condition] = {
+      health_condition,
+      points: [
+        { name: 'Cases', y: cases },
+        { name: 'Deaths', y: deaths }
+      ]
+    }
+
+    return obj
+  }, {})
+
+  return Object.values(dataSet).map(({ health_condition, points }) => {
+    return {
+      health_condition,
+      options: {
+        type: 'column',
+        legend_visible: true,
+        debug: true,
+        // yAxis: { scale: { type: 'logarithmic', logBase: 10 } },
+        legend_position: 'bottom',
+        defaultSeries_type: 'column',
+        series: [{
+          palette: 'default',
+          points: points
+        }]
+      }
+    }
+  })
+})
+</script>

src/components/charts/risk/health-conditions/store.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/risk/health-conditions/health-conditions.json`).then(res => res.json())
+}
+
+if (globalThis.window) {
+  refreshData()
+}
+
+export default store

src/layouts/components/Navigation.vue

@@ -64,20 +64,24 @@
           </router-link>
         </li>
         <li>
-          <router-link :to="{path: '/risk/gender'}" 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-gender-male-female class="mr-2"></icon-mdi-gender-male-female> by gender?
-          </router-link>
-        </li>
-        <li>
-          <router-link :to="{path: '/risk/ethnicity'}" 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-web class="mr-2"></icon-mdi-web> by ethnicity?
-          </router-link>
-        </li>
-        <li>
-          <router-link :to="{path: '/risk/health-condition'}" 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: '/risk/health-conditions'}" 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-healthicons-clinical-f-outline class="mr-2"></icon-healthicons-clinical-f-outline> by health condition?
           </router-link>
         </li>
+        <li class="flex items-center justify-between">
+          <!-- <router-link :to="{path: '/risk/gender'}" 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"> -->
+          <a href="#" class="text-base rounded-lg flex items-center p-2 mr-3 group opacity-50">
+            <icon-mdi-gender-male-female class="mr-2"></icon-mdi-gender-male-female> by gender?
+          </a>
+          <span class="rounded-lg bg-violet-700 text-white text-sm px-2 py-1 mr-3">Soon</span>
+        </li>
+        <li class="flex items-center justify-between">
+          <!-- <router-link :to="{path: '/risk/ethnicity'}" 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"> -->
+          <a href="#" class="text-base rounded-lg flex items-center p-2 mr-3 group opacity-50">
+            <icon-mdi-web class="mr-2"></icon-mdi-web> by ethnicity?
+          </a>
+          <span class="rounded-lg bg-violet-700 text-white text-sm px-2 py-1 mr-3">Soon</span>
+        </li>
       </ul>
     </li>
   </ul>

src/pages/risk/health-conditions.mdx

@@ -0,0 +1,17 @@
+---
+title: Who is most at risk by health condition?
+---
+
+<Card class="col-span-1" prose={true}>
+  # Who is most at risk by condition?
+
+  ## What is this report useful for?
+
+  This report provides charts indicating the number of cases and deaths for a number of tracked medical conditions.
+
+  You may find it useful for assessing the relative risk of COVID to yourself or others.
+</Card>
+
+<div class="grid gap-2 lg:gap-4 grid-cols-1 xl:grid-cols-4">
+  <TrendRiskHealthConditions client:load/>
+</div>