Improve health condition charts.

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

@@ -1,8 +1,9 @@
 <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 class="mb-2 text-xl text-violet-900 flex justify-between items-center">
+      {{getConditionName(chart.health_condition)}}
     </h2>
+    <p class="text-sm text-violet-600"><span class="font-bold">~1 death</span> for every <span class="font-bold">{{Math.round(chart.death_ratio)}} cases ({{Math.round((chart.deaths / chart.cases) * 100)}}%)</span></p>
     <JSCharting :options="chart.options"></JSCharting>
   </Card>
 </template>
@@ -14,6 +15,12 @@ import store from '@/components/charts/risk/health-conditions/store.js'
 
 const data = store.data
 
+function getConditionName(condition) {
+  if (condition === 'None of the above conditions') return 'No Tracked Conditions'
+  if (condition === 'ICU') return 'Admitted to ICU'
+  return condition
+}
+
 const rows = computed(() => {
   if (!data.value) return []
   return data.value.rows.filter(r => {
@@ -24,7 +31,7 @@ const rows = computed(() => {
 const charts = computed(() => {
   if (!rows.value) return {}
 
-  const dataSet = rows.value.reduce((obj, r) => {
+  const dataSet = Object.values(rows.value.reduce((obj, r) => {
     const sex = col(data, r, 'sex')
     if (sex !== 'Total') return obj
     const health_condition = col(data, r, 'health_condition')
@@ -32,10 +39,12 @@ const charts = computed(() => {
     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,
+      cases,
+      deaths,
+      death_ratio: cases / deaths,
+      sort_order: ['Other Chronic Diseases', 'Any Chronic Condition', 'Any Disability', 'None of the above conditions'].includes(health_condition) ? -1 : cases / deaths,
       points: [
         { name: 'Cases', y: cases },
         { name: 'Deaths', y: deaths }
@@ -43,24 +52,30 @@ const charts = computed(() => {
     }
 
     return obj
-  }, {})
+  }, {})).sort((a, b) => a.death_ratio - b.death_ratio)
 
-  return Object.values(dataSet).map(({ health_condition, points }) => {
-    return {
+  dataSet.push(dataSet.splice(dataSet.findIndex(c => c.health_condition === 'Any Disability'), 1).pop())
+  dataSet.push(dataSet.splice(dataSet.findIndex(c => c.health_condition === 'Any Chronic Condition'), 1).pop())
+  dataSet.push(dataSet.splice(dataSet.findIndex(c => c.health_condition === 'Other Chronic Diseases'), 1).pop())
+  dataSet.push(dataSet.splice(dataSet.findIndex(c => c.health_condition === 'None of the above conditions'), 1).pop())
+
+  return dataSet
+    .map(({ health_condition, cases, deaths, death_ratio, points }) => ({
       health_condition,
+      cases,
+      deaths,
+      death_ratio,
       options: {
-        type: 'column',
+        type: 'gauge linear',
         legend_visible: true,
-        debug: true,
-        // yAxis: { scale: { type: 'logarithmic', logBase: 10 } },
         legend_position: 'bottom',
         defaultSeries_type: 'column',
+        yAxis: { scale_range: [0, points[0].y], visible: false },
         series: [{
           palette: 'default',
           points: points
         }]
       }
-    }
-  })
+    }))
 })
 </script>