Completed overall testing and cases dashboard.

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

@@ -0,0 +1,142 @@
+<template>
+  <StatCard>
+    <template v-slot:heading>Confirmed Cases {{last_report_date ? humanDate(last_report_date) : ''}}</template>
+    <template v-slot:value v-if="chips.today_cases != null">
+      {{chips.today_cases.toLocaleString()}}
+    </template>
+    <template v-slot:meta v-if="chips.today_case_change != null">
+      <span v-if="chips.today_case_change > 0">Up </span>
+      <span v-if="chips.today_case_change < 0">Down </span>
+      <span :class="{'font-semibold': true, 'text-red-600': chips.today_case_change > 0, 'text-green-600': chips.today_case_change < 0}">
+        {{Math.abs(chips.today_case_change).toLocaleString()}} ({{chips.today_case_change_percent}}%)
+      </span> compared to previous day
+    </template>
+  </StatCard>
+
+  <StatCard>
+    <template v-slot:heading>Cases per 10,000 Residents {{last_report_date ? humanDate(last_report_date) : ''}}</template>
+    <template v-slot:value v-if="chips.today_cases_per_capita != null">
+      ~{{chips.today_cases_per_capita.toLocaleString()}}
+    </template>
+    <template v-slot:meta v-if="chips.population != null">
+      <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
+    </template>
+  </StatCard>
+
+  <StatCard>
+    <template v-slot:heading>Total Confirmed Cases</template>
+    <template v-slot:value v-if="chips.total_cases != null">
+      {{chips.total_cases.toLocaleString()}}
+    </template>
+    <template v-slot:meta v-if="chips.total_case_change != null">
+      <span class="font-semibold text-indigo-500">
+        {{Math.abs(chips.total_case_change).toLocaleString()}} ({{chips.total_case_change_percent}}%)
+      </span> more than previous day
+    </template>
+  </StatCard>
+
+  <StatCard>
+    <template v-slot:heading>Total Cases per 10,000 Residents</template>
+    <template v-slot:value v-if="chips.total_cases_per_capita != null">
+      ~{{chips.total_cases_per_capita.toLocaleString()}}
+    </template>
+    <template v-slot:meta v-if="chips.total_cases != null && chips.population != null">
+      <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
+    </template>
+  </StatCard>
+</template>
+
+<script setup>
+import { reactive, computed } from 'vue'
+import { col, humanDate } from '@/components/charts/util'
+import store from '@/components/charts/overall/cases/store.js'
+
+const data = store.data
+
+const last_report_date = computed(() => {
+  if (!data.value) return null
+  return col(data, data.value.rows.at(-1), 'report_date')
+})
+
+const chips = reactive({
+  population: computed(() => {
+    if (!data.value) return null
+
+    const r = data.value.rows.at(-1)
+    return col(data, r, 'population')
+  }),
+
+  today_cases: computed(() => {
+    if (!data.value) return null
+
+    const r = data.value.rows.at(-1)
+    return col(data, r, 'cases')
+  }),
+
+  today_case_change: computed(() => {
+    if (!data.value) return null
+
+    const today = col(data, data.value.rows.at(-1), 'cases')
+    const yesterday = col(data, data.value.rows.at(-2), 'cases')
+    return today - yesterday
+  }),
+
+  today_case_change_percent: computed(() => {
+    if (!data.value) return null
+
+    const today = col(data, data.value.rows.at(-1), 'cases')
+    const yesterday = col(data, data.value.rows.at(-2), 'cases')
+    const change = today - yesterday
+
+    const percent = change > 0
+      ? ((change / yesterday) * 100)
+      : ((change / today) * 100)
+
+    return Math.abs(percent.toFixed(1))
+  }),
+
+  today_cases_per_capita: computed(() => {
+    if (!data.value) return null
+
+    const r = data.value.rows.at(-1)
+    return Math.round(col(data, r, 'cases_per_capita') * 10000)
+  }),
+
+  total_cases: computed(() => {
+    if (!data.value) return null
+
+    const r = data.value.rows.at(-1)
+    return col(data, r, 'total_cases')
+  }),
+
+  total_case_change: computed(() => {
+    if (!data.value) return null
+
+    const today = col(data, data.value.rows.at(-1), 'total_cases')
+    const yesterday = today - col(data, data.value.rows.at(-1), 'cases')
+    return today - yesterday
+  }),
+
+  total_case_change_percent: computed(() => {
+    if (!data.value) return null
+
+    const today = col(data, data.value.rows.at(-1), 'total_cases')
+    const yesterday = today - col(data, data.value.rows.at(-1), 'cases')
+    const change = today - yesterday
+
+    const percent = change > 0
+      ? ((change / yesterday) * 100)
+      : ((change / today) * 100)
+
+    return Math.abs(percent.toFixed(1))
+  }),
+
+  total_cases_per_capita: computed(() => {
+    if (!data.value) return null
+
+    const r = data.value.rows.at(-1)
+    return Math.round(col(data, r, 'total_cases_per_capita') * 10000)
+  })
+})
+
+</script>