on Data summary page 'N/A' placed where no number is available.

Author: dkjang

src/portals/SysBio/views/datasetsSummary/template.vue

@@ -69,10 +69,12 @@
                                     >
                                         <div class="small-chart-label">{{ item.label }}</div>
                                         <div
+                                            v-if="hasDataForSmallChart(item)"
                                             :ref="'small-' + fieldName + '-' + item.key"
                                             class="small-chart-container"
                                             :class="chartType(fieldName) === 'pie' ? 'chart-pie-container' : 'chart-bar-container'"
                                         ></div>
+                                        <div v-else class="small-chart-container small-chart-na">N/A</div>
                                     </div>
                                 </div>
                             </div>
@@ -194,6 +196,11 @@ export default {
             }
             return items;
         },
+        /** True if the small-chart item has at least one positive count to render. */
+        hasDataForSmallChart(item) {
+            if (!item || typeof item.data !== "object") return false;
+            return Object.values(item.data).some((v) => Number(v) > 0);
+        },
         /** Categories in a bar field that have contributions from 2+ programs. Used for vertical breakdown charts. */
         getBarCategoriesWithMultiplePrograms(fieldName) {
             const breakdown = this.breakdownByField;
@@ -746,4 +753,11 @@ export default {
     max-width: 132px;
     min-height: 60px;
 }
+.small-chart-container.small-chart-na {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #6c757d;
+    font-size: 0.875rem;
+}
 </style>