Improve health condition charts.

src/assets/base.css

@@ -8,8 +8,8 @@ a.link {
 }
 
 .input {
-  @apply inline-block h-11 m-2 p-2 px-3 rounded-lg bg-white border border-indigo-100 outline-none
+  @apply inline-block h-11 m-2 p-2 px-3 rounded-lg bg-white border border-violet-100 outline-none
-    transition-shadow shadow shadow-indigo-200  hover:border-indigo-400 focus:border-indigo-600 active:border-indigo-600;
+    transition-shadow shadow shadow-violet-200  hover:border-violet-400 focus:border-violet-600 active:border-violet-600;
 }
 
 select {

src/components/Card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['bg-white shadow rounded-lg p-4 lg:p-8 max-w-none', prose ? 'prose lg:prose-base prose-headings:font-light prose-headings:text-indigo-900 prose-h1:mb-0' : '']">
+  <div :class="['bg-white shadow rounded-lg p-4 lg:p-8 max-w-none', prose ? 'prose lg:prose-base prose-headings:font-light prose-headings:text-violet-900 prose-h1:mb-0' : '']">
     <slot></slot>
   </div>
 </template>

src/components/cards/StatCard.vue

@@ -1,7 +1,7 @@
 <template>
   <Card>
-    <h2 class="text-xl font-light text-indigo-900 mb-2"><slot name="heading"></slot></h2>
+    <h2 class="text-xl font-light text-violet-900 mb-2"><slot name="heading"></slot></h2>
-    <p class="text-3xl text-indigo-600 font-bold mb-3"><slot name="value"></slot></p>
+    <p class="text-3xl text-violet-600 font-bold mb-3"><slot name="value"></slot></p>
     <p class="text-base font-light"><slot name="meta"></slot></p>
   </Card>
 </template>

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

@@ -20,7 +20,7 @@
       <span v-else>No Data</span>
     </template>
     <template v-slot:meta v-if="chips.population">
-      <span class="text-indigo-500 font-semibold">{{chips.today_cases.toLocaleString()}}</span> out of <span class="text-indigo-500 font-semibold">{{chips.population.toLocaleString()}}</span> residents
+      <span class="text-violet-500 font-semibold">{{chips.today_cases.toLocaleString()}}</span> out of <span class="text-violet-500 font-semibold">{{chips.population.toLocaleString()}}</span> residents
     </template>
   </StatCard>
 
@@ -30,7 +30,7 @@
       {{chips.total_cases.toLocaleString()}}
     </template>
     <template v-slot:meta v-if="chips.total_case_change != null">
-      <span class="font-semibold text-indigo-500">
+      <span class="font-semibold text-violet-500">
         {{Math.abs(chips.total_case_change).toLocaleString()}} ({{chips.total_case_change_percent}}%)
       </span> more than previous day
     </template>
@@ -43,7 +43,7 @@
       <span v-else>No Data</span>
     </template>
     <template v-slot:meta v-if="chips.total_cases != null && chips.population">
-      <span class="text-indigo-500 font-semibold">{{chips.total_cases.toLocaleString()}}</span> out of <span class="text-indigo-500 font-semibold">{{chips.population.toLocaleString()}}</span> residents
+      <span class="text-violet-500 font-semibold">{{chips.total_cases.toLocaleString()}}</span> out of <span class="text-violet-500 font-semibold">{{chips.population.toLocaleString()}}</span> residents
     </template>
   </StatCard>
 </template>

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

@@ -1,9 +1,9 @@
 <template>
   <Card class="flex flex-col">
-    <h2 class="mb-1 text-xl text-indigo-900 flex justify-between items-center">
+    <h2 class="mb-1 text-xl text-violet-900 flex justify-between items-center">
       Cases per 10,000 Residents
     </h2>
-    <p class="mb-4 text-sm text-indigo-700">Last two weeks</p>
+    <p class="mb-4 text-sm text-violet-700">Last two weeks</p>
     <JSCharting :options="mapOptions" class="flex-1"/>
   </Card>
 </template>

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

@@ -1,6 +1,6 @@
 <template>
   <Card>
-    <h2 class="mb-6 text-xl text-indigo-900 flex justify-between items-center">
+    <h2 class="mb-6 text-xl text-violet-900 flex justify-between items-center">
       Daily Cases
 
       <select v-model="chart" class="text-base m-0">

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

@@ -1,6 +1,6 @@
 <template>
   <Card>
-    <h2 class="mb-6 text-xl text-indigo-900 flex justify-between items-center">
+    <h2 class="mb-6 text-xl text-violet-900 flex justify-between items-center">
       Total Cases
     </h2>
     <JSCharting :options="areaOptions"></JSCharting>

src/components/charts/overall/deaths/ChipsDeaths.vue

@@ -20,7 +20,7 @@
       <span v-else>No Data</span>
     </template>
     <template v-slot:meta v-if="chips.current_deaths != null && chips.population">
-      <span class="text-indigo-500 font-semibold">{{chips.current_deaths.toLocaleString()}}</span> out of <span class="text-indigo-500 font-semibold">{{chips.population.toLocaleString()}}</span> residents
+      <span class="text-violet-500 font-semibold">{{chips.current_deaths.toLocaleString()}}</span> out of <span class="text-violet-500 font-semibold">{{chips.population.toLocaleString()}}</span> residents
     </template>
   </StatCard>
 
@@ -30,7 +30,7 @@
       {{chips.total_deaths.toLocaleString()}}
     </template>
     <template v-slot:meta v-if="chips.total_death_change != null">
-      <span class="font-semibold text-indigo-500">
+      <span class="font-semibold text-violet-500">
         {{Math.abs(chips.total_death_change).toLocaleString()}} ({{chips.total_death_change_percent}}%)
       </span> more than previous day
     </template>
@@ -43,7 +43,7 @@
       <span v-else>No Data</span>
     </template>
     <template v-slot:meta v-if="chips.total_deaths != null && chips.population">
-      <span class="text-indigo-500 font-semibold">{{chips.total_deaths.toLocaleString()}}</span> out of <span class="text-indigo-500 font-semibold">{{chips.population.toLocaleString()}}</span> residents
+      <span class="text-violet-500 font-semibold">{{chips.total_deaths.toLocaleString()}}</span> out of <span class="text-violet-500 font-semibold">{{chips.population.toLocaleString()}}</span> residents
     </template>
   </StatCard>
 </template>

src/components/charts/overall/deaths/MapDeaths.vue

@@ -1,9 +1,9 @@
 <template>
   <Card class="flex flex-col">
-    <h2 class="mb-1 text-xl text-indigo-900 flex justify-between items-center">
+    <h2 class="mb-1 text-xl text-violet-900 flex justify-between items-center">
       Total Deaths per 10,000 Residents
     </h2>
-    <p class="mb-4 text-sm text-indigo-700">Since Feburary 1, 2020</p>
+    <p class="mb-4 text-sm text-violet-700">Since Feburary 1, 2020</p>
     <JSCharting :options="mapOptions" class="flex-1"/>
   </Card>
 </template>

src/components/charts/overall/deaths/TrendDailyDeaths.vue

@@ -1,6 +1,6 @@
 <template>
   <Card>
-    <h2 class="mb-6 text-xl text-indigo-900 flex justify-between items-center">
+    <h2 class="mb-6 text-xl text-violet-900 flex justify-between items-center">
       Daily Deaths
 
       <select v-model="chart" class="text-base m-0">

src/components/charts/overall/deaths/TrendTotalDeaths.vue

@@ -1,6 +1,6 @@
 <template>
   <Card>
-    <h2 class="mb-6 text-xl text-indigo-900 flex justify-between items-center">
+    <h2 class="mb-6 text-xl text-violet-900 flex justify-between items-center">
       Total Deaths
     </h2>
     <JSCharting :options="areaOptions"></JSCharting>

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

@@ -20,7 +20,7 @@
       <span v-else>No Data</span>
     </template>
     <template v-slot:meta v-if="chips.population">
-      <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
+      <span class="text-violet-500 font-semibold">{{chips.last_14_days_hospitalizations.toLocaleString()}}</span> out of <span class="text-violet-500 font-semibold">{{chips.population.toLocaleString()}}</span> residents
     </template>
   </StatCard>
 </template>

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

@@ -1,9 +1,9 @@
 <template>
   <Card class="flex flex-col">
-    <h2 class="mb-1 text-xl text-indigo-900 flex justify-between items-center">
+    <h2 class="mb-1 text-xl text-violet-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>
+    <p class="mb-4 text-sm text-violet-700">Last two weeks</p>
     <JSCharting :options="mapOptions" class="flex-1" style="min-height: 50vh;"/>
   </Card>
 </template>

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

@@ -1,6 +1,6 @@
 <template>
   <Card>
-    <h2 class="mb-6 text-xl text-indigo-900 flex justify-between items-center">
+    <h2 class="mb-6 text-xl text-violet-900 flex justify-between items-center">
       Daily Hospitalizations
 
       <select v-model="chart" class="text-base m-0">

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

@@ -1,6 +1,6 @@
 <template>
   <Card>
-    <h2 class="mb-6 text-xl text-indigo-900 flex justify-between items-center">
+    <h2 class="mb-6 text-xl text-violet-900 flex justify-between items-center">
       Daily Hospitalizations per 10,000 Residents
 
       <select v-model="chart" class="text-base m-0" v-if="parameters.county !== '-- Unknown --'">
@@ -14,7 +14,7 @@
       <JSCharting v-if="chart === 'line'" :options="areaOptions"></JSCharting>
     </template>
     <template v-else>
-      <div class="w-full h-full flex items-center justify-center text-2xl text-indigo-700 font-bold">No Data</div>
+      <div class="w-full h-full flex items-center justify-center text-2xl text-violet-700 font-bold">No Data</div>
     </template>
   </Card>
 </template>

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

@@ -15,7 +15,7 @@
       {{chips.tests.date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}}
     </template>
     <template v-slot:meta v-if="chips.tests">
-      <span class="text-indigo-500 font-bold">{{chips.tests.value.toLocaleString()}}</span> tests performed
+      <span class="text-violet-500 font-bold">{{chips.tests.value.toLocaleString()}}</span> tests performed
     </template>
   </StatCard>
 

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

@@ -1,6 +1,6 @@
 <template>
   <Card>
-    <h2 class="mb-6 text-xl text-indigo-900 flex justify-between items-center">
+    <h2 class="mb-6 text-xl text-violet-900 flex justify-between items-center">
       Daily Positive Antigen Results
 
       <select v-model="chart" class="text-base m-0">

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

@@ -1,6 +1,6 @@
 <template>
   <Card>
-    <h2 class="mb-6 text-xl text-indigo-900 flex justify-between items-center">
+    <h2 class="mb-6 text-xl text-violet-900 flex justify-between items-center">
       Daily Antigen Tests Performed
       <select v-model="chart" class="text-base m-0">
         <option value="calendar">Calendar</option>

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

@@ -1,6 +1,6 @@
 <template>
   <Card>
-    <h2 class="mb-6 text-xl text-indigo-900 flex justify-between items-center">
+    <h2 class="mb-6 text-xl text-violet-900 flex justify-between items-center">
       Daily Positive PCR Results
 
       <select v-model="chart" class="text-base m-0">

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

@@ -1,6 +1,6 @@
 <template>
   <Card>
-    <h2 class="mb-6 text-xl text-indigo-900 flex justify-between items-center">
+    <h2 class="mb-6 text-xl text-violet-900 flex justify-between items-center">
       Daily PCR Tests Performed
 
       <select v-model="chart" class="text-base m-0">

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

@@ -1,11 +1,11 @@
 <template>
   <Card v-for="chart of charts" :key="chart.age_group">
-    <h2 class="mb-2 text-xl text-indigo-900 flex justify-between items-center">
+    <h2 class="mb-2 text-xl text-violet-900 flex justify-between items-center">
       Cases, hospitalizations, and deaths for persons {{formatAgeGroup(chart.age_group)}}
     </h2>
     <p class="mb-1 text-sm">From {{humanDate(parameters.start)}} to {{humanDate(parameters.end)}}
     </p>
-    <p class="mb-4 text-sm text-indigo-700">Logarithmic scale used for clarity</p>
+    <p class="mb-4 text-sm text-violet-700">Logarithmic scale used for clarity</p>
     <JSCharting :options="chart.options"></JSCharting>
   </Card>
 </template>

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">
+    <h2 class="mb-2 text-xl text-violet-900 flex justify-between items-center">
-      {{chart.health_condition}}
+      {{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 }) => {
+  dataSet.push(dataSet.splice(dataSet.findIndex(c => c.health_condition === 'Any Disability'), 1).pop())
-    return {
+  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>