feat: add testing coldspot page

scripts/upload-data.js

@@ -359,6 +359,58 @@ const main = async () => {
     });
   }
 
+  if (id === "testing_coldspots") {
+    files.push({
+      filePath: statebarriersfile,
+      extension: "json",
+      field: "state_barriers",
+      isArray: false,
+      schema: [
+        {
+          name: "pct_w_no_vehicle",
+          type: "number",
+        },
+        {
+          name: "pct_w_no_english",
+          type: "number",
+        },
+        {
+          name: "pct_w_no_insurance",
+          type: "number",
+        },
+        {
+          name: "pct_w_no_internet",
+          type: "number",
+        },
+      ],
+    });
+
+    files.push({
+      filePath: barriersfile,
+      extension: "json",
+      field: "barriers",
+      isArray: true,
+      schema: [
+        {
+          name: "pct_w_no_vehicle",
+          type: "number",
+        },
+        {
+          name: "pct_w_no_english",
+          type: "number",
+        },
+        {
+          name: "pct_w_no_insurance",
+          type: "number",
+        },
+        {
+          name: "pct_w_no_internet",
+          type: "number",
+        },
+      ],
+    });
+  }
+
   files.forEach(({ filePath, extension }) => {
     if (!fs.existsSync(filePath)) {
       warnAndExit(`ERROR! File does not exist: ${filePath}`);

src/components/base/SideBar.vue

@@ -204,6 +204,11 @@ const HISTORICAL = [
     route: "hospitalization-hotspot",
     available: true,
   },
+  {
+    name: "Testing Gaps",
+    route: "testing-gap",
+    available: true,
+  },
 ];
 
 const SPOTLIGHTS = [

src/components/dashboard/ColdMap.vue

@@ -9,6 +9,7 @@ import { useVega } from "../../composables/useVega";
 import RI_GEOJSON from "@/assets/geography/ri.json";
 import HEZ_GEOJSON from "@/assets/geography/hez.json";
 import { COLORS, COLOR_SCALES, NULL_CLUSTER } from "../../utils/constants";
+import { formatUsString } from "../../utils/utils";
 
 import { cloneDeep } from "lodash/lang";
 
@@ -21,6 +22,7 @@ const props = defineProps<{
   focusStat: FocusStat;
   initialActiveCluster: Cluster;
   mapType: string;
+  displayAsRate: boolean;
 }>();
 
 const filteredTown = computed(() => {
@@ -61,12 +63,9 @@ const clusters = computed(() => {
           ? (datum[`observed_${field}`] / datum[`population_${field}`]) * 100000
           : 0;
 
-      additionalFields[`tooltip_${field}`] = additionalFields[
-        `per100k_${field}`
-      ].toLocaleString("en-US", {
-        minimumFractionDigits: 0,
-        maximumFractionDigits: 0,
-      });
+      additionalFields[`tooltip_${field}`] = formatUsString.format(
+        additionalFields[`per100k_${field}`],
+      );
     });
 
     if (datum) {
@@ -84,12 +83,21 @@ const clusters = computed(() => {
 
 const focusFields = computed(() => {
   if (props.mapType === "cold") {
-    return {
-      name: props.focusStat.name,
-      fill: `gap_${props.focusStat.value}_pct`,
-      tooltip: `gap_${props.focusStat.value}`,
-      population: `population_${props.focusStat.value}`,
-    };
+    if (props.displayAsRate) {
+      return {
+        name: props.focusStat.name,
+        fill: `per100k_${props.focusStat.value}`,
+        tooltip: `gap_${props.focusStat.value}`,
+        population: `population_${props.focusStat.value}`,
+      };
+    } else {
+      return {
+        name: props.focusStat.name,
+        fill: `gap_${props.focusStat.value}_pct`,
+        tooltip: `gap_${props.focusStat.value}`,
+        population: `population_${props.focusStat.value}`,
+      };
+    }
   } else {
     return {
       name: props.focusStat.name,
@@ -102,19 +110,35 @@ const focusFields = computed(() => {
 
 const tooltipSignal = computed(() => {
   if (props.mapType === "cold") {
-    return `{
-      title: datum.properties.name
-      , 'Percent gap among ${focusFields.value.name.toLowerCase()}': datum.properties.${
-        focusFields.value.population
-      } > 0 ? format(datum.properties.${
-        focusFields.value.fill
-      }, '.1%') : 'Not enough information'
-      , 'Dose gap among ${focusFields.value.name.toLowerCase()}': datum.properties.${
-        focusFields.value.population
-      } > 0 ? datum.properties.${
-        focusFields.value.tooltip
-      } : 'Not enough information'
-    }`;
+    if (props.displayAsRate) {
+      return `{
+        title: datum.properties.name
+        , 'Gap per 100,000 among ${focusFields.value.name.toLocaleLowerCase()}': datum.properties.${
+          focusFields.value.population
+        } > 0 ? format(datum.properties.${
+          focusFields.value.fill
+        }, ',.0d') : 'Not enough information'
+        , 'Absolute gap among ${focusFields.value.name.toLowerCase()}': datum.properties.${
+          focusFields.value.population
+        } > 0 ? datum.properties.${
+          focusFields.value.tooltip
+        } : 'Not enough information'
+      }`;
+    } else {
+      return `{
+        title: datum.properties.name
+        , 'Percent gap among ${focusFields.value.name.toLowerCase()}': datum.properties.${
+          focusFields.value.population
+        } > 0 ? format(datum.properties.${
+          focusFields.value.fill
+        }, '.1%') : 'Not enough information'
+        , 'Dose gap among ${focusFields.value.name.toLowerCase()}': datum.properties.${
+          focusFields.value.population
+        } > 0 ? datum.properties.${
+          focusFields.value.tooltip
+        } : 'Not enough information'
+      }`;
+    }
   } else {
     return `{
       title: datum.properties.name

src/components/dashboard/GapByRace.vue

@@ -17,9 +17,16 @@
       :class="focusStat.value === 'total' ? '' : 'is-invisible'"
     >
       <div>
-        <GapChart
+        <GapChartRate
+          v-if="displayAsRate"
           :active-stats="activeStats"
-          :expected="expected"
+          :expected="expectedRate"
+          :field-data="fieldData"
+        />
+        <GapChartPct
+          v-else
+          :active-stats="activeStats"
+          :expected="expectedPct"
           :field-data="fieldData"
         />
       </div>
@@ -33,7 +40,7 @@
                 name: activeCluster.name,
                 minRaceName: minVaxRace?.name,
                 pct: formatPct(minVaxRace?.pct),
-                expectedPct: formatPct(expected),
+                expectedPct: formatPct(expectedPct),
                 gap: minVaxRace?.gap,
               }),
             )
@@ -51,11 +58,7 @@
         class="is-flex is-flex-direction-row is-justify-content-space-around"
       >
         <KeyPerformanceIndicator
-          :value="
-            activeFocusStats?.population > 0
-              ? formatPct(activeFocusStats?.pct)
-              : '?'
-          "
+          :value="kpiValue"
           :title="
             sanitizeHtml(
               kpiTitle({
@@ -89,8 +92,10 @@
               gapPhrase({
                 name: props.activeCluster.name,
                 pct: formatPct(activeFocusStats?.pct),
+                rate: formatUsString.format(activeFocusStats?.rate),
                 race: activeFocusStats?.name,
-                expectedPct: formatPct(expected),
+                expectedPct: formatPct(expectedPct),
+                expectedRate: formatUsString.format(expectedRate),
                 gap: activeFocusStats?.gap,
               }),
             )
@@ -107,7 +112,7 @@
                   name: props.activeCluster.name,
                   pct: formatPct(activeFocusStats?.pct),
                   race: activeFocusStats?.name,
-                  expectedPct: formatPct(expected),
+                  expectedPct: formatPct(expectedPct),
                 }),
               )
             "
@@ -149,9 +154,10 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 
-import GapChart from "@/components/dashboard/GapChart.vue";
+import GapChartPct from "@/components/dashboard/GapChartPct.vue";
+import GapChartRate from "@/components/dashboard/GapChartRate.vue";
 import KeyPerformanceIndicator from "@/components/dashboard/KeyPerformanceIndicator.vue";
-import { formatPct, sortByProperty } from "../../utils/utils";
+import { formatPct, sortByProperty, formatUsString } from "../../utils/utils";
 import { compile } from "handlebars";
 import sanitizeHtml from "sanitize-html";
 
@@ -161,12 +167,18 @@ const props = defineProps<{
   fieldNames: Array<{ field: string; name: string }>;
   focusStat: FocusStat;
   phrases: Phrases;
+  displayAsRate: boolean;
 }>();
 
-const expected = computed(
+const expectedPct = computed(
   () => props.stats[0].expected_total / props.stats[0].population_total,
 );
 
+const expectedRate = computed(
+  () =>
+    (props.stats[0].expected_total / props.stats[0].population_total) * 100000,
+);
+
 const fieldData = computed(() => {
   return props.fieldNames.map((f) => ({
     name: f.name,
@@ -191,6 +203,10 @@ const activeStats = computed(() => {
             population > 0
               ? Math.min(0.99, row[f.observedField] / row[f.populationField])
               : NaN,
+          rate:
+            population > 0
+              ? (row[f.observedField] / row[f.populationField]) * 100000
+              : NaN,
           gap: Math.max(0, row[f.expectedField] - row[f.observedField]),
           population,
         };
@@ -219,6 +235,18 @@ const activeFocusStats = computed(() => {
   );
 });
 
+const kpiValue = computed(() => {
+  if (activeFocusStats.value?.population > 0) {
+    if (props.displayAsRate) {
+      return formatUsString.format(activeFocusStats.value?.rate);
+    } else {
+      return formatPct(activeFocusStats.value?.pct);
+    }
+  } else {
+    return "?";
+  }
+});
+
 const gapPhrase = compile(props.phrases.gap);
 const allResidents = compile(props.phrases.allResidents);
 const noGap = compile(props.phrases.noGap);

src/components/dashboard/GapChart.vue → src/components/dashboard/GapChartPct.vue

@@ -20,7 +20,7 @@ const remSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
 const spec = computed(() => {
   return {
     $schema: "https://vega.github.io/schema/vega/v5.json",
-    description: "Bar chart showing the gap in vaccinations by race",
+    description: "Bar chart showing the gap by race",
     background: "transparent",
     padding: { left: 0, top: 0, right: 0, bottom: -1 },
     autosize: {