add more guards for missing data

components/reports/demographics/DemographicsHealthChart.vue

@@ -2,48 +2,58 @@
   <div>
     <div class="block">
       <h5 class="title is-5">Disability &amp; insurance</h5>
-      <div class="content is-size-5">
-        <p>
-          Data in this section taken from Census ACS 5-year Year 2023.
-          <strong> Values are estimated</strong>; margin of error is shown in
-          parenthesis for each value.
-        </p>
+      <div v-if="disabilityInsurancePresent">
+        <div class="content is-size-5">
+          <p>
+            Data in this section taken from Census ACS 5-year Year 2023.
+            <strong> Values are estimated</strong>; margin of error is shown in
+            parenthesis for each value.
+          </p>
+        </div>
+        <table class="table">
+          <caption>
+            Disability &amp; insurance
+          </caption>
+          <thead>
+            <th scope="col">Condition</th>
+            <th scope="col">{{ placeName }}</th>
+            <th scope="col">Alaska</th>
+            <th scope="col">U.S.</th>
+          </thead>
+          <tbody>
+            <tr v-for="(name, key) in acs">
+              <th scope="row" v-html="name"></th>
+              <td>
+                {{ demographics['place'][key] }}% ({{
+                  demographics['place']['moe_' + key]
+                }}%)
+              </td>
+              <td>
+                {{ demographics['alaska'][key] }}% ({{
+                  demographics['alaska']['moe_' + key]
+                }}%)
+              </td>
+              <td>
+                {{ demographics['us'][key] }}% ({{
+                  demographics['us']['moe_' + key]
+                }}%)
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div v-else>
+        <div class="content is-size-5">
+          <p>
+            Demographic information for insurance status and people with a
+            disability are not available for this location.
+          </p>
+        </div>
       </div>
-      <table class="table">
-        <caption>
-          Disability &amp; insurance
-        </caption>
-        <thead>
-          <th scope="col">Condition</th>
-          <th scope="col">{{ placeName }}</th>
-          <th scope="col">Alaska</th>
-          <th scope="col">U.S.</th>
-        </thead>
-        <tbody>
-          <tr v-for="(name, key) in acs">
-            <th scope="row" v-html="name"></th>
-            <td>
-              {{ demographics['place'][key] }}% ({{
-                demographics['place']['moe_' + key]
-              }}%)
-            </td>
-            <td>
-              {{ demographics['alaska'][key] }}% ({{
-                demographics['alaska']['moe_' + key]
-              }}%)
-            </td>
-            <td>
-              {{ demographics['us'][key] }}% ({{
-                demographics['us']['moe_' + key]
-              }}%)
-            </td>
-          </tr>
-        </tbody>
-      </table>
     </div>
     <!-- If pct_asthma is missing/blank, the other conditions are as well. -->
-    <div class="block" v-if="demographics['place']['pct_asthma']">
-      <h5 class="title is-5">Health conditions</h5>
+    <h5 class="title is-5">Health conditions</h5>
+    <div class="block" v-if="healthConditionsPresent">
       <div class="content is-size-5">
         <p>Data in this section taken from CDC PLACES Year 2023.</p>
       </div>
@@ -63,6 +73,15 @@
         </tbody>
       </table>
     </div>
+    <div v-else>
+      <div class="content is-size-5">
+        <p>
+          Demographic information health conditions (asthma, COPD, heart
+          disease, stroke, chronic kidney disease) are not available for this
+          location.
+        </p>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -105,6 +124,24 @@ export default {
     }
   },
   computed: {
+    healthConditionsPresent() {
+      if (this.demographics) {
+        let sum = 0
+        Object.keys(this.conditions).forEach(k => {
+          sum += this.demographics['place'][k]
+        })
+        return sum > 0
+      }
+    },
+    disabilityInsurancePresent() {
+      if (this.demographics) {
+        let sum = 0
+        Object.keys(this.acs).forEach(k => {
+          sum += this.demographics['place'][k]
+        })
+        return sum > 0
+      }
+    },
     ...mapGetters({
       demographics: 'demographics/demographicsData',
       placeName: 'place/name',

components/reports/demographics/DemographicsOther.vue

@@ -1,19 +1,32 @@
 <template>
-  <table class="table">
-    <caption>
-      Additional demographics
-    </caption>
-    <thead>
-      <th scope="col">Demographic</th>
-      <th scope="col">{{ placeName }}</th>
-    </thead>
-    <tbody>
-      <tr v-for="(name, key) in otherDemographics">
-        <th scope="row">{{ name }}</th>
-        <td>{{ demographics['place'][key] }}%</td>
-      </tr>
-    </tbody>
-  </table>
+  <div>
+    <div class="block" v-if="otherPresent">
+      <table class="table">
+        <caption>
+          Additional demographics
+        </caption>
+        <thead>
+          <th scope="col">Demographic</th>
+          <th scope="col">{{ placeName }}</th>
+        </thead>
+        <tbody>
+          <tr v-for="(name, key) in otherDemographics">
+            <th scope="row">{{ name }}</th>
+            <td>{{ demographics['place'][key] }}%</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div v-else>
+      <div class="content is-size-5">
+        <p>
+          Additional demographics (minority status, high school diploma, living
+          below 150% of poverty line, and broadband) are not available for this
+          location.
+        </p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
@@ -31,6 +44,15 @@ import { formatting } from '~/mixins/formatting'
 export default {
   mixins: [formatting],
   computed: {
+    otherPresent() {
+      if (this.demographics) {
+        let sum = 0
+        Object.keys(this.otherDemographics).forEach(k => {
+          sum += this.demographics['place'][k]
+        })
+        return sum > 0
+      }
+    },
     ...mapGetters({
       demographics: 'demographics/demographicsData',
       placeName: 'place/name',
@@ -39,10 +61,11 @@ export default {
   data() {
     return {
       otherDemographics: {
-        pct_minority: "Persons of racial or ethnic minority status",
-        pct_no_hsdiploma: "No high school diploma among adults aged 25 years or older",
-        pct_below_150pov: "Persons living below 150% of the poverty level",
-        pct_no_bband: "No broadband internet subscription among households",
+        pct_minority: 'Persons of racial or ethnic minority status',
+        pct_no_hsdiploma:
+          'No high school diploma among adults aged 25 years or older',
+        pct_below_150pov: 'Persons living below 150% of the poverty level',
+        pct_no_bband: 'No broadband internet subscription among households',
       },
     }
   },