Merge pull request #177 from jameel-institute/more-precision-for-percent-gdp

Make percent-of-GDP presentation more precise

Author: david-mears-2

components/CostsTable.vue

@@ -175,8 +175,8 @@ const displayValue = (scenario: Scenario, costId: string, metricId: string): str
     case CostBasis.PercentGDP:
     {
       const percentOfGdp = costAsPercentOfGdp(val, scenario.result.data?.gdp);
-      if (percentOfGdp < 0.05 && percentOfGdp > 0) {
-        return "<0.05%";
+      if (percentOfGdp < 0.005 && percentOfGdp > 0) {
+        return "<0.005%";
       }
       return humanReadablePercentOfGdp(percentOfGdp, signDisplay).percent;
     }

components/utils/formatters.ts

@@ -40,13 +40,19 @@ export const humanReadablePercentOfGdp = (
   num: number,
   signDisplay?: "exceptZero" | "auto" | "always",
 ): { percent: string, reference: string } => {
+  const reference = `of pre-pandemic GDP`;
+  if (num < 0.005 && num > 0) {
+    return { percent: "<0.005%", reference };
+  }
+  const numberOfSignificantDigits = Math.abs(num) < 1 ? 1 : 3;
   return {
     percent: Intl.NumberFormat(undefined, {
       style: "percent",
-      minimumFractionDigits: num > 100 ? 0 : 1,
+      minimumSignificantDigits: numberOfSignificantDigits,
+      maximumSignificantDigits: numberOfSignificantDigits,
       signDisplay,
     }).format(num / 100),
-    reference: `of pre-pandemic GDP`,
+    reference,
   };
 };
 

tests/e2e/helpers/constants.ts

@@ -13,9 +13,9 @@ Object.freeze(parameterLabels);
 
 export const costTolerance = 0.3;
 
-export const decimalPercentMatcher = "(\\d{1,4}(\\.\\d)?%|<0\\.05%)";
+export const decimalPercentMatcher = "(\\d{1,4}(\\.(\\d*))?%|<0\\.005%)";
 export const decimalUSDMatcher = "(\\$\\d{1,3}(,\\d{3})*(\\.\\d{1,4})?[TBMK]|<\\$1 M)";
-export const decimalPercentMatcherAllowNegatives = "(-?\\d{1,4}(\\.\\d)?%|<0\\.05%)";
+export const decimalPercentMatcherAllowNegatives = "(-?\\d{1,4}(\\.(\\d*))?%|<0\\.005%)";
 
 export const moneyTableRowLabels = [
   "(Net|Total) losses (relative to baseline )?(as % of GDP|\\(USD\\))",

tests/unit/components/Charts/utils/costCharts.spec.ts

@@ -174,7 +174,7 @@ describe("multi-scenario costs chart tooltip text for stacked column", () => {
             notDiffingHeader,
             false,
             { color: "inherit", text: "74\\.0%.* of pre-pandemic GDP" },
-            { color: "inherit", text: "3\\.8%" },
+            { color: "inherit", text: "3\\.82%" },
             { color: "inherit", text: "0\\.1%" },
             { color: "inherit", text: "70\\.1%" },
           ),
@@ -195,7 +195,7 @@ describe("multi-scenario costs chart tooltip text for stacked column", () => {
             diffingHeader,
             false,
             { color: "darkgreen", text: "74\\.0%.* of pre-pandemic GDP", isNegative: true },
-            { color: "darkgreen", text: "3\\.8%", isNegative: true },
+            { color: "darkgreen", text: "3\\.82%", isNegative: true },
             { color: "darkred", text: "0\\.1%" },
             { color: "darkred", text: "70\\.1%" },
           ),
@@ -262,7 +262,7 @@ describe("multi-scenario costs chart tooltip text for stacked column", () => {
             notDiffingHeader,
             false,
             { color: "inherit", text: "74\\.0%.* of pre-pandemic GDP" },
-            { color: "inherit", text: "3\\.8%" },
+            { color: "inherit", text: "3\\.82%" },
             { color: "inherit", text: "0\\.1%" },
             { color: "inherit", text: "70\\.1%" },
           ),
@@ -282,8 +282,8 @@ describe("multi-scenario costs chart tooltip text for stacked column", () => {
             hospitalParamOption,
             diffingHeader,
             false,
-            { color: "darkgreen", text: "7,301\\.0%.* of pre-pandemic GDP", isNegative: true },
-            { color: "darkgreen", text: "3\\.8%", isNegative: true },
+            { color: "darkgreen", text: "7,300%.* of pre-pandemic GDP", isNegative: true },
+            { color: "darkgreen", text: "3\\.82%", isNegative: true },
             { color: "darkred", text: "0\\.1%" },
             { color: "darkred", text: "7,000%" },
           ),

tests/unit/components/CostsTable.spec.ts

@@ -54,10 +54,10 @@ const openVslModal = async (component: VueWrapper) => {
 
 const checkPercentText = (costUSD: number, gdp: number, componentText: string) => {
   const percent = costAsPercentOfGdp(costUSD, gdp);
-  if (percent < 0.05) {
-    expect(componentText).toContain("<0.05%");
-  } else {
-    expect(componentText).toContain(percent.toFixed(1));
+  if (percent < 0.005) {
+    expect(componentText).toContain("<0.005%");
+  } else if (percent < 1) {
+    expect(componentText).toContain(percent.toFixed(0));
   }
 };
 

tests/unit/components/utils/formatters.spec.ts

@@ -30,6 +30,6 @@ describe("humanReadablePercentOfGdp", () => {
   it("should format number as percent of GDP", () => {
     expect(humanReadablePercentOfGdp(10)).toEqual({ percent: "10.0%", reference: "of pre-pandemic GDP" });
     expect(humanReadablePercentOfGdp(200.5)).toEqual({ percent: "201%", reference: "of pre-pandemic GDP" });
-    expect(humanReadablePercentOfGdp(12345.678)).toEqual({ percent: "12,346%", reference: "of pre-pandemic GDP" });
+    expect(humanReadablePercentOfGdp(12345.678)).toEqual({ percent: "12,300%", reference: "of pre-pandemic GDP" });
   });
 });