Skip to content

Commit

Permalink
Merge pull request #221 from pph-collective/abstract-vaccine-text
Browse files Browse the repository at this point in the history 
refactor: abstract coldspot text
  • Loading branch information
@s-bessey
s-bessey authored Sep 25, 2023
2 parents aea0c0d + 9c1b6bc commit 8ffdfe1
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 52 deletions.
149 changes: 97 additions & 52 deletions src/components/dashboard/GapByRace.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
pct: formatPct(minVaxRace?.pct),
expectedPct: formatPct(expected),
gap: minVaxRace?.gap,
}),
)
"
/>
</div>
</div>

Expand All @@ -55,57 +56,90 @@
? 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">
<!-- 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,
pct: formatPct(activeFocusStats?.pct),
race: activeFocusStats?.name,
expectedPct: 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,
pct: formatPct(activeFocusStats?.pct),
race: activeFocusStats?.name,
expectedPct: 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,
pct: formatPct(minVaxRace?.pct),
gap: minVaxRace?.gap,
}),
)
"
/>
</span>
</div>
</div>
Expand All @@ -118,12 +152,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(
Expand Down Expand Up @@ -181,6 +218,14 @@ 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);
const kpiTitle = compile(props.phrases.kpiTitle);
const gapKpiTitle = compile(props.phrases.gapKpiTitle);
</script>

<style scoped lang="scss">
Expand Down
1 change: 1 addition & 0 deletions src/env.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ interface Phrases {
noInfo: string;
highest: string;
kpiTitle: string;
gapKpiTitle: string;
}

interface ClusterBarrier extends Barrier {
Expand Down
16 changes: 16 additions & 0 deletions src/views/datasets/booster-gap/dashboard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@
{ field: 'total', name: 'All Residents' },
]"
:focus-stat="controls.focusStat"
:phrases="phrases"
/>
<div :class="{ invisible: activeCluster.name === '' }">
<router-link
Expand Down Expand Up @@ -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>{{ 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>{{ 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>{{ 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>{{ 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",
};
</script>

<style scoped>
Expand Down
16 changes: 16 additions & 0 deletions src/views/datasets/vaccine-gap/dashboard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@
{ field: 'total', name: 'All Residents' },
]"
:focus-stat="controls.focusStat"
:phrases="phrases"
/>
<div :class="{ invisible: activeCluster.name === '' }">
<router-link
Expand Down Expand Up @@ -308,6 +309,21 @@ const updateCluster = (newClusterId) => {
activeCluster.value = clusterIdToCluster(newClusterId);
dashboardActiveCluster.value = activeCluster.value;
};
const phrases = {
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>{{ 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>{{ 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>{{ 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",
};
</script>

<style scoped>
Expand Down

0 comments on commit 8ffdfe1

Please sign in to comment.