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>