Improve health condition charts.

2022-01-01 13:18:28 -05:00
parent b02aa6e0b3
commit 6ca85aaef1
22 changed files with 60 additions and 45 deletions
--- a/src/assets/base.css
+++ b/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
-    transition-shadow shadow shadow-indigo-200  hover:border-indigo-400 focus:border-indigo-600 active:border-indigo-600;
+  @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-violet-200  hover:border-violet-400 focus:border-violet-600 active:border-violet-600;
 }

 select {
--- a/src/components/Card.vue
+++ b/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>
--- a/src/components/cards/StatCard.vue
+++ b/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>
-    <p class="text-3xl text-indigo-600 font-bold mb-3"><slot name="value"></slot></p>
+    <h2 class="text-xl font-light text-violet-900 mb-2"><slot name="heading"></slot></h2>
+    <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>
--- a/src/components/charts/overall/cases/ChipsCases.vue
+++ b/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>
--- a/src/components/charts/overall/cases/MapCases.vue
+++ b/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>
--- a/src/components/charts/overall/cases/TrendDailyCases.vue
+++ b/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">
--- a/src/components/charts/overall/cases/TrendTotalCases.vue
+++ b/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>
--- a/src/components/charts/overall/deaths/ChipsDeaths.vue
+++ b/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>
--- a/src/components/charts/overall/deaths/MapDeaths.vue
+++ b/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>
--- a/src/components/charts/overall/deaths/TrendDailyDeaths.vue
+++ b/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">
--- a/src/components/charts/overall/deaths/TrendTotalDeaths.vue
+++ b/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>
--- a/src/components/charts/overall/hospitalizations/ChipsHospitalizations.vue
+++ b/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>
--- a/src/components/charts/overall/hospitalizations/MapHospitalizations.vue
+++ b/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>
--- a/src/components/charts/overall/hospitalizations/TrendDailyHospitalizations.vue
+++ b/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">
--- a/src/components/charts/overall/hospitalizations/TrendDailyHospitalizationsPerCapita.vue
+++ b/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>
--- a/src/components/charts/overall/testing/ChipsTesting.vue
+++ b/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>

--- a/src/components/charts/overall/testing/TrendAntigenPositive.vue
+++ b/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">
--- a/src/components/charts/overall/testing/TrendAntigenTests.vue
+++ b/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>
--- a/src/components/charts/overall/testing/TrendPCRPositive.vue
+++ b/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">
--- a/src/components/charts/overall/testing/TrendPCRTests.vue
+++ b/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">
--- a/src/components/charts/risk/age/TrendRiskAge.vue
+++ b/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>
--- a/src/components/charts/risk/health-conditions/TrendRiskHealthConditions.vue
+++ b/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>