From 5a2979c80de80463f0cfd36d87e227c8adb3d4eb Mon Sep 17 00:00:00 2001
From: Sam Bessey <sam_bessey@brown.edu>
Date: Thu, 21 Sep 2023 10:44:57 -0400
Subject: [PATCH 1/3] refactor: abstract coldspot text

---
 src/components/dashboard/GapByRace.vue       | 129 ++++++++++++-------
 src/views/datasets/booster-gap/dashboard.vue |  16 +++
 src/views/datasets/vaccine-gap/dashboard.vue |  15 +++
 3 files changed, 110 insertions(+), 50 deletions(-)

diff --git a/src/components/dashboard/GapByRace.vue b/src/components/dashboard/GapByRace.vue
index 4f773a1..a5b51cd 100644
--- a/src/components/dashboard/GapByRace.vue
+++ b/src/components/dashboard/GapByRace.vue
@@ -24,20 +24,21 @@
         />
       </div>
       <div class="centered">
-        <p class="has-text-centered">
-          In {{ activeCluster.name }}, the largest gap is among
-          {{ minVaxRace?.name }} residents. Only
-          <strong
-            >{{ formatPct(minVaxRace?.pct) }} of
-            {{ minVaxRace?.name }} residents</strong
-          >
-          are vaccinated compared to {{ formatPct(expected) }} statewide.
-          Approximately
-          <strong
-            >{{ minVaxRace?.gap }} more {{ minVaxRace?.name }} residents</strong
-          >
-          need to receive a dose to close this gap.
-        </p>
+        <!-- eslint-disable vue/no-v-html -->
+        <p
+          class="has-text-centered"
+          v-html="
+            sanitizeHtml(
+              allResidents({
+                name: activeCluster.name,
+                minRaceName: minVaxRace?.name,
+                rate: formatPct(minVaxRace?.pct),
+                expectedRate: formatPct(expected),
+                gap: minVaxRace?.gap,
+              }),
+            )
+          "
+        />
       </div>
     </div>
 
@@ -66,46 +67,65 @@
       </div>
       <div class="content centered has-text-centered">
         <!-- In this community, there is a gap in this focus group -->
-        <p v-if="activeFocusStats?.gap > 0">
-          In {{ activeCluster.name }},
-          <strong>{{ formatPct(activeFocusStats?.pct) }}</strong> of
-          {{ activeFocusStats?.name }} residents are vaccinated compared to our
-          goal of {{ formatPct(expected) }} total vaccinations statewide.
-          Approximately
-          <strong
-            >{{ activeFocusStats?.gap }} more
-            {{ activeFocusStats?.name }} residents</strong
-          >
-          need to be vaccinated to close this gap.
-        </p>
+        <!-- eslint-disable vue/no-v-html -->
+        <p
+          v-if="activeFocusStats?.gap > 0"
+          v-html="
+            sanitizeHtml(
+              gapPhrase({
+                name: props.activeCluster.name,
+                rate: formatPct(activeFocusStats?.pct),
+                race: activeFocusStats?.name,
+                expectedRate: formatPct(expected),
+                gap: activeFocusStats?.gap,
+              }),
+            )
+          "
+        />
         <!-- There is no gap in this focus group, display the largest gap -->
         <span v-else>
-          <!-- Fully Vaccinated -->
-          <p v-if="activeFocusStats?.population > 0">
-            In {{ activeCluster.name }},
-            <strong>{{ formatPct(activeFocusStats?.pct) }}</strong> of
-            {{ activeFocusStats?.name }} residents are vaccinated compared to
-            our goal of {{ formatPct(expected) }} total vaccinations statewide.
-          </p>
+          <!-- eslint-disable vue/no-v-html -->
+          <p
+            v-if="activeFocusStats?.population > 0"
+            v-html="
+              sanitizeHtml(
+                noGap({
+                  name: props.activeCluster.name,
+                  rate: formatPct(activeFocusStats?.pct),
+                  race: activeFocusStats?.name,
+                  expectedRate: formatPct(expected),
+                }),
+              )
+            "
+          />
 
           <!-- Not Enough Information-->
-          <p v-else>
-            In {{ activeCluster.name }}, there isn't enough vaccine data on
-            <strong>{{ activeFocusStats?.name }} residents</strong> to determine
-            their vaccination status or the number of vaccine doses needed to
-            close the gap.
-          </p>
-
-          <!-- Largest Gap -->
-          <p>
-            The largest gap is among
-            <strong>{{ minVaxRace?.name }} residents</strong>. Only
-            <strong>{{ formatPct(minVaxRace?.pct) }}</strong> of
-            {{ minVaxRace?.name }} residents are vaccinated. Approximately
-            <strong>{{ minVaxRace?.gap }}</strong> more
-            {{ minVaxRace?.name }} residents need to be vaccinated to close this
-            gap.
-          </p>
+          <!-- eslint-disable vue/no-v-html -->
+          <p
+            v-else
+            v-html="
+              sanitizeHtml(
+                noInfo({
+                  name: props.activeCluster.name,
+                  race: activeFocusStats?.name,
+                }),
+              )
+            "
+          />
+
+          <!-- Largest Gap, displayed when no gap or not enough info -->
+          <!-- eslint-disable vue/no-v-html -->
+          <p
+            v-html="
+              sanitizeHtml(
+                highest({
+                  minRaceName: minVaxRace?.name,
+                  rate: formatPct(minVaxRace?.pct),
+                  gap: minVaxRace?.gap,
+                }),
+              )
+            "
+          />
         </span>
       </div>
     </div>
@@ -118,12 +138,15 @@ import { computed } from "vue";
 import GapChart from "@/components/dashboard/GapChart.vue";
 import KeyPerformanceIndicator from "@/components/dashboard/KeyPerformanceIndicator.vue";
 import { formatPct, sortByProperty } from "../../utils/utils";
+import { compile } from "handlebars";
+import sanitizeHtml from "sanitize-html";
 
 const props = defineProps<{
   stats: Stat[];
   activeCluster: Cluster;
   fieldNames: Array<{ field: string; name: string }>;
   focusStat: FocusStat;
+  phrases: Phrases;
 }>();
 
 const expected = computed(
@@ -181,6 +204,12 @@ const activeFocusStats = computed(() => {
     (a) => a.name.toUpperCase() === props.focusStat.value.toUpperCase(),
   );
 });
+
+const gapPhrase = compile(props.phrases.gap);
+const allResidents = compile(props.phrases.allResidents);
+const noGap = compile(props.phrases.noGap);
+const noInfo = compile(props.phrases.noInfo);
+const highest = compile(props.phrases.highest);
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/datasets/booster-gap/dashboard.vue b/src/views/datasets/booster-gap/dashboard.vue
index ddad0c3..d798db6 100644
--- a/src/views/datasets/booster-gap/dashboard.vue
+++ b/src/views/datasets/booster-gap/dashboard.vue
@@ -109,6 +109,7 @@
             { field: 'total', name: 'All Residents' },
           ]"
           :focus-stat="controls.focusStat"
+          :phrases="phrases"
         />
         <div :class="{ invisible: activeCluster.name === '' }">
           <router-link
@@ -313,6 +314,21 @@ const updateCluster = (newClusterId) => {
   activeCluster.value = clusterIdToCluster(newClusterId);
   dashboardActiveCluster.value = activeCluster.value;
 };
+
+// setup phrases for card text
+const phrases = {
+  gap: "In {{ name }}, <strong>{{ rate }}</strong> of {{ race }} residents are vaccinated compared to our goal of {{ expectedRate }} total vaccinations statewide. Approximately <strong>{{ gap }} more {{ minRaceName }} residents</strong> need to be vaccinated to close this gap.",
+  allResidents:
+    "In {{ name }}, the largest gap was among {{ minRaceName }} residents. Only <strong>{{ rate }} of {{ name }} residents</strong> are vaccinated compared to {{ expectedRate }} statewide. Approximately <strong>{{ gap }} more {{ minRaceName }} residents</strong> need to receive a dose to close this gap.",
+  noGap:
+    "In {{ name }}, <strong>{{ rate }}</strong> of {{ race }} residents are vaccinated compared to our goal of {{ expectedRate }} total vaccinations statewide.",
+  noInfo:
+    "In {{ name }}, there isn't enough vaccine data on <strong>{{ race }} residents</strong> to determine their vaccination status or the number of vaccine doses needed to close the gap.",
+  highest:
+    "The largest gap is among <strong>{{ minRaceName }} residents</strong>. Only <strong>{{ rate }}</strong> of {{ minRaceName }} residents are vaccinated. Approximately <strong>{{ gap }}</strong> more {{ minRaceName }} residents need to be vaccinated to close this gap.",
+  kpiTitle: "{{ race }} residents vaccinated in {{ name }}.",
+  gapKpiTitle: "Approximate vaccine doses to",
+};
 </script>
 
 <style scoped>
diff --git a/src/views/datasets/vaccine-gap/dashboard.vue b/src/views/datasets/vaccine-gap/dashboard.vue
index ba1a592..790a2c2 100644
--- a/src/views/datasets/vaccine-gap/dashboard.vue
+++ b/src/views/datasets/vaccine-gap/dashboard.vue
@@ -105,6 +105,7 @@
             { field: 'total', name: 'All Residents' },
           ]"
           :focus-stat="controls.focusStat"
+          :phrases="phrases"
         />
         <div :class="{ invisible: activeCluster.name === '' }">
           <router-link
@@ -308,6 +309,20 @@ const updateCluster = (newClusterId) => {
   activeCluster.value = clusterIdToCluster(newClusterId);
   dashboardActiveCluster.value = activeCluster.value;
 };
+
+const phrases = {
+  gap: "In {{ name }}, <strong>{{ rate }}</strong> of {{ race }} residents are vaccinated compared to our goal of {{ expectedRate }} total vaccinations statewide. Approximately <strong>{{ gap }} more {{ minRaceName }} residents</strong> need to be vaccinated to close this gap.",
+  allResidents:
+    "In {{ name }}, the largest gap was among {{ minRaceName }} residents. Only <strong>{{ rate }} of {{ name }} residents</strong> are vaccinated compared to {{ expectedRate }} statewide. Approximately <strong>{{ gap }} more {{ minRaceName }} residents</strong> need to receive a dose to close this gap.",
+  noGap:
+    "In {{ name }}, <strong>{{ rate }}</strong> of {{ race }} residents are vaccinated compared to our goal of {{ expectedRate }} total vaccinations statewide.",
+  noInfo:
+    "In {{ name }}, there isn't enough vaccine data on <strong>{{ race }} residents</strong> to determine their vaccination status or the number of vaccine doses needed to close the gap.",
+  highest:
+    "The largest gap is among <strong>{{ minRaceName }} residents</strong>. Only <strong>{{ rate }}</strong> of {{ minRaceName }} residents are vaccinated. Approximately <strong>{{ gap }}</strong> more {{ minRaceName }} residents need to be vaccinated to close this gap.",
+  kpiTitle: "{{ race }} residents vaccinated in {{ name }}.",
+  gapKpiTitle: "Approximate vaccine doses to",
+};
 </script>
 
 <style scoped>

From fc9bcca989fb1548f93b1e33fd5042d29a236ecd Mon Sep 17 00:00:00 2001
From: Sam Bessey <sam_bessey@brown.edu>
Date: Fri, 22 Sep 2023 09:22:41 -0400
Subject: [PATCH 2/3] refactor: abstract kpi titles

---
 src/components/dashboard/GapByRace.vue       | 20 ++++++++++++++++++--
 src/env.d.ts                                 |  1 +
 src/views/datasets/booster-gap/dashboard.vue |  5 +++--
 src/views/datasets/vaccine-gap/dashboard.vue |  5 +++--
 4 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/components/dashboard/GapByRace.vue b/src/components/dashboard/GapByRace.vue
index a5b51cd..0fb6001 100644
--- a/src/components/dashboard/GapByRace.vue
+++ b/src/components/dashboard/GapByRace.vue
@@ -56,13 +56,27 @@
               ? formatPct(activeFocusStats?.pct)
               : '?'
           "
-          :title="`${activeFocusStats?.name} residents vaccinated in ${activeCluster.name}`"
+          :title="
+            sanitizeHtml(
+              kpiTitle({
+                race: activeFocusStats?.name,
+                name: props.activeCluster.name,
+              }),
+            )
+          "
         />
         <KeyPerformanceIndicator
           :value="
             activeFocusStats?.population > 0 ? activeFocusStats?.gap : '?'
           "
-          :title="`Approximate vaccine doses for ${activeFocusStats?.name} residents needed to close the gap`"
+          :title="
+            sanitizeHtml(
+              gapKpiTitle({
+                race: activeFocusStats?.name,
+                name: props.activeCluster.name,
+              }),
+            )
+          "
         />
       </div>
       <div class="content centered has-text-centered">
@@ -210,6 +224,8 @@ const allResidents = compile(props.phrases.allResidents);
 const noGap = compile(props.phrases.noGap);
 const noInfo = compile(props.phrases.noInfo);
 const highest = compile(props.phrases.highest);
+const kpiTitle = compile(props.phrases.kpiTitle);
+const gapKpiTitle = compile(props.phrases.gapKpiTitle);
 </script>
 
 <style scoped lang="scss">
diff --git a/src/env.d.ts b/src/env.d.ts
index 5a12756..f547970 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -29,6 +29,7 @@ interface Phrases {
   noInfo: string;
   highest: string;
   kpiTitle: string;
+  gapKpiTitle: string;
 }
 
 interface ClusterBarrier extends Barrier {
diff --git a/src/views/datasets/booster-gap/dashboard.vue b/src/views/datasets/booster-gap/dashboard.vue
index d798db6..083f98f 100644
--- a/src/views/datasets/booster-gap/dashboard.vue
+++ b/src/views/datasets/booster-gap/dashboard.vue
@@ -326,8 +326,9 @@ const phrases = {
     "In {{ name }}, there isn't enough vaccine data on <strong>{{ race }} residents</strong> to determine their vaccination status or the number of vaccine doses needed to close the gap.",
   highest:
     "The largest gap is among <strong>{{ minRaceName }} residents</strong>. Only <strong>{{ rate }}</strong> of {{ minRaceName }} residents are vaccinated. Approximately <strong>{{ gap }}</strong> more {{ minRaceName }} residents need to be vaccinated to close this gap.",
-  kpiTitle: "{{ race }} residents vaccinated in {{ name }}.",
-  gapKpiTitle: "Approximate vaccine doses to",
+  kpiTitle: "{{ race }} residents vaccinated in {{ name }}",
+  gapKpiTitle:
+    "Approximate vaccine doses for {{ race }} residents needed to close the gap",
 };
 </script>
 
diff --git a/src/views/datasets/vaccine-gap/dashboard.vue b/src/views/datasets/vaccine-gap/dashboard.vue
index 790a2c2..e08db63 100644
--- a/src/views/datasets/vaccine-gap/dashboard.vue
+++ b/src/views/datasets/vaccine-gap/dashboard.vue
@@ -320,8 +320,9 @@ const phrases = {
     "In {{ name }}, there isn't enough vaccine data on <strong>{{ race }} residents</strong> to determine their vaccination status or the number of vaccine doses needed to close the gap.",
   highest:
     "The largest gap is among <strong>{{ minRaceName }} residents</strong>. Only <strong>{{ rate }}</strong> of {{ minRaceName }} residents are vaccinated. Approximately <strong>{{ gap }}</strong> more {{ minRaceName }} residents need to be vaccinated to close this gap.",
-  kpiTitle: "{{ race }} residents vaccinated in {{ name }}.",
-  gapKpiTitle: "Approximate vaccine doses to",
+  kpiTitle: "{{ race }} residents vaccinated in {{ name }}",
+  gapKpiTitle:
+    "Approximate vaccine doses for {{ race }} residents needed to close the gap",
 };
 </script>
 

From 9c1b6bc282c10a35c0971df73d815384ccc03130 Mon Sep 17 00:00:00 2001
From: Sam Bessey <sam_bessey@brown.edu>
Date: Mon, 25 Sep 2023 10:04:19 -0400
Subject: [PATCH 3/3] fix: change rate to pct

---
 src/components/dashboard/GapByRace.vue       | 14 +++++++-------
 src/views/datasets/booster-gap/dashboard.vue | 11 +++++------
 src/views/datasets/vaccine-gap/dashboard.vue |  8 ++++----
 3 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/components/dashboard/GapByRace.vue b/src/components/dashboard/GapByRace.vue
index 0fb6001..bcee77e 100644
--- a/src/components/dashboard/GapByRace.vue
+++ b/src/components/dashboard/GapByRace.vue
@@ -32,8 +32,8 @@
               allResidents({
                 name: activeCluster.name,
                 minRaceName: minVaxRace?.name,
-                rate: formatPct(minVaxRace?.pct),
-                expectedRate: formatPct(expected),
+                pct: formatPct(minVaxRace?.pct),
+                expectedPct: formatPct(expected),
                 gap: minVaxRace?.gap,
               }),
             )
@@ -88,9 +88,9 @@
             sanitizeHtml(
               gapPhrase({
                 name: props.activeCluster.name,
-                rate: formatPct(activeFocusStats?.pct),
+                pct: formatPct(activeFocusStats?.pct),
                 race: activeFocusStats?.name,
-                expectedRate: formatPct(expected),
+                expectedPct: formatPct(expected),
                 gap: activeFocusStats?.gap,
               }),
             )
@@ -105,9 +105,9 @@
               sanitizeHtml(
                 noGap({
                   name: props.activeCluster.name,
-                  rate: formatPct(activeFocusStats?.pct),
+                  pct: formatPct(activeFocusStats?.pct),
                   race: activeFocusStats?.name,
-                  expectedRate: formatPct(expected),
+                  expectedPct: formatPct(expected),
                 }),
               )
             "
@@ -134,7 +134,7 @@
               sanitizeHtml(
                 highest({
                   minRaceName: minVaxRace?.name,
-                  rate: formatPct(minVaxRace?.pct),
+                  pct: formatPct(minVaxRace?.pct),
                   gap: minVaxRace?.gap,
                 }),
               )
diff --git a/src/views/datasets/booster-gap/dashboard.vue b/src/views/datasets/booster-gap/dashboard.vue
index 083f98f..aefe38b 100644
--- a/src/views/datasets/booster-gap/dashboard.vue
+++ b/src/views/datasets/booster-gap/dashboard.vue
@@ -317,18 +317,17 @@ const updateCluster = (newClusterId) => {
 
 // setup phrases for card text
 const phrases = {
-  gap: "In {{ name }}, <strong>{{ rate }}</strong> of {{ race }} residents are vaccinated compared to our goal of {{ expectedRate }} total vaccinations statewide. Approximately <strong>{{ gap }} more {{ minRaceName }} residents</strong> need to be vaccinated to close this gap.",
+  gap: "In {{ name }}, <strong>{{ pct }}</strong> of {{ race }} residents are vaccinated compared to our goal of {{ expectedPct }} total vaccinations statewide. Approximately <strong>{{ gap }} more {{ minRaceName }} residents</strong> need to be vaccinated to close this gap.",
   allResidents:
-    "In {{ name }}, the largest gap was among {{ minRaceName }} residents. Only <strong>{{ rate }} of {{ name }} residents</strong> are vaccinated compared to {{ expectedRate }} statewide. Approximately <strong>{{ gap }} more {{ minRaceName }} residents</strong> need to receive a dose to close this gap.",
+    "In {{ name }}, the largest gap was among {{ minRaceName }} residents. Only <strong>{{ pct }} of {{ name }} residents</strong> are vaccinated compared to {{ expectedPct }} statewide. Approximately <strong>{{ gap }} more {{ minRaceName }} residents</strong> need to receive a dose to close this gap.",
   noGap:
-    "In {{ name }}, <strong>{{ rate }}</strong> of {{ race }} residents are vaccinated compared to our goal of {{ expectedRate }} total vaccinations statewide.",
+    "In {{ name }}, <strong>{{ pct }}</strong> of {{ race }} residents are vaccinated compared to our goal of {{ expectedPct }} total vaccinations statewide.",
   noInfo:
     "In {{ name }}, there isn't enough vaccine data on <strong>{{ race }} residents</strong> to determine their vaccination status or the number of vaccine doses needed to close the gap.",
   highest:
-    "The largest gap is among <strong>{{ minRaceName }} residents</strong>. Only <strong>{{ rate }}</strong> of {{ minRaceName }} residents are vaccinated. Approximately <strong>{{ gap }}</strong> more {{ minRaceName }} residents need to be vaccinated to close this gap.",
+    "The largest gap is among <strong>{{ minRaceName }} residents</strong>. Only <strong>{{ pct }}</strong> of {{ minRaceName }} residents are vaccinated. Approximately <strong>{{ gap }}</strong> more {{ minRaceName }} residents need to be vaccinated to close this gap.",
   kpiTitle: "{{ race }} residents vaccinated in {{ name }}",
-  gapKpiTitle:
-    "Approximate vaccine doses for {{ race }} residents needed to close the gap",
+  gapKpiTitle: "Approximate vaccine doses for {{ race }} residents needed to close the gap",
 };
 </script>
 
diff --git a/src/views/datasets/vaccine-gap/dashboard.vue b/src/views/datasets/vaccine-gap/dashboard.vue
index e08db63..347f95b 100644
--- a/src/views/datasets/vaccine-gap/dashboard.vue
+++ b/src/views/datasets/vaccine-gap/dashboard.vue
@@ -311,15 +311,15 @@ const updateCluster = (newClusterId) => {
 };
 
 const phrases = {
-  gap: "In {{ name }}, <strong>{{ rate }}</strong> of {{ race }} residents are vaccinated compared to our goal of {{ expectedRate }} total vaccinations statewide. Approximately <strong>{{ gap }} more {{ minRaceName }} residents</strong> need to be vaccinated to close this gap.",
+  gap: "In {{ name }}, <strong>{{ pct }}</strong> of {{ race }} residents are vaccinated compared to our goal of {{ expectedPct }} total vaccinations statewide. Approximately <strong>{{ gap }} more {{ minRaceName }} residents</strong> need to be vaccinated to close this gap.",
   allResidents:
-    "In {{ name }}, the largest gap was among {{ minRaceName }} residents. Only <strong>{{ rate }} of {{ name }} residents</strong> are vaccinated compared to {{ expectedRate }} statewide. Approximately <strong>{{ gap }} more {{ minRaceName }} residents</strong> need to receive a dose to close this gap.",
+    "In {{ name }}, the largest gap was among {{ minRaceName }} residents. Only <strong>{{ pct }} of {{ name }} residents</strong> are vaccinated compared to {{ expectedPct }} statewide. Approximately <strong>{{ gap }} more {{ minRaceName }} residents</strong> need to receive a dose to close this gap.",
   noGap:
-    "In {{ name }}, <strong>{{ rate }}</strong> of {{ race }} residents are vaccinated compared to our goal of {{ expectedRate }} total vaccinations statewide.",
+    "In {{ name }}, <strong>{{ pct }}</strong> of {{ race }} residents are vaccinated compared to our goal of {{ expectedPct }} total vaccinations statewide.",
   noInfo:
     "In {{ name }}, there isn't enough vaccine data on <strong>{{ race }} residents</strong> to determine their vaccination status or the number of vaccine doses needed to close the gap.",
   highest:
-    "The largest gap is among <strong>{{ minRaceName }} residents</strong>. Only <strong>{{ rate }}</strong> of {{ minRaceName }} residents are vaccinated. Approximately <strong>{{ gap }}</strong> more {{ minRaceName }} residents need to be vaccinated to close this gap.",
+    "The largest gap is among <strong>{{ minRaceName }} residents</strong>. Only <strong>{{ pct }}</strong> of {{ minRaceName }} residents are vaccinated. Approximately <strong>{{ gap }}</strong> more {{ minRaceName }} residents need to be vaccinated to close this gap.",
   kpiTitle: "{{ race }} residents vaccinated in {{ name }}",
   gapKpiTitle:
     "Approximate vaccine doses for {{ race }} residents needed to close the gap",