Merge pull request #1804 from anth-volk/fix/lsr_data_labels

Correct formatting for labor supply charts
PolicyEngine · May 24, 2024 · 3fa2265 · 3fa2265
2 parents 7d35954 + f2c413b
commit 3fa2265
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 9 deletions.
diff --git a/src/pages/policy/output/Display.jsx b/src/pages/policy/output/Display.jsx
@@ -15,6 +15,7 @@ import { downloadCsv } from "./utils";
 import { useReactToPrint } from "react-to-print";
 import PolicyBreakdown from "./PolicyBreakdown";
 import { Helmet } from "react-helmet";
+import useCountryId from "../../../hooks/useCountryId";
 
 /**
  *
@@ -110,6 +111,7 @@ function getPolicyLabel(policy) {
  */
 export function DisplayImpact(props) {
   const { impact, policy, metadata, showPolicyImpactPopup } = props;
+  const countryId = useCountryId();
   const urlParams = new URLSearchParams(window.location.search);
   const focus = urlParams.get("focus");
   const region = urlParams.get("region");
@@ -149,6 +151,7 @@ export function DisplayImpact(props) {
       metadata: metadata,
       policyLabel: policyLabel,
       mobile: mobile,
+      countryId: countryId,
     });
     pane = chart;
     if (csv) {

diff --git a/src/pages/policy/output/LabourSupplyDecileAverageImpact.jsx b/src/pages/policy/output/LabourSupplyDecileAverageImpact.jsx
@@ -1,12 +1,12 @@
 import style from "../../../style";
 import ImpactChart from "./ImpactChart";
 import Plot from "react-plotly.js";
-import { formatPercent, localeCode } from "../../../lang/format";
+import { formatCurrencyAbbr, localeCode } from "../../../lang/format";
 import { ChartLogo } from "../../../api/charts";
 import { plotLayoutFont } from "pages/policy/output/utils";
 
 export default function LabourSupplyDecileAverageImpact(props) {
-  const { policyLabel, metadata, impact } = props;
+  const { policyLabel, metadata, impact, countryId } = props;
 
   const decileImpact = impact.labour_supply_response;
 
@@ -41,7 +41,12 @@ export default function LabourSupplyDecileAverageImpact(props) {
                 ),
               },
               text: substitutionChanges.map(
-                (value) => (value >= 0 ? "+" : "") + formatPercent(value),
+                (value) =>
+                  (value >= 0 ? "+" : "") +
+                  formatCurrencyAbbr(value, countryId, {
+                    minimumFractionDigits: 0,
+                    maximumFractionDigits: 0,
+                  }),
               ),
               name: "Substitution effect",
             },
@@ -55,7 +60,12 @@ export default function LabourSupplyDecileAverageImpact(props) {
                 ),
               },
               text: incomeChanges.map(
-                (value) => (value >= 0 ? "+" : "") + formatPercent(value),
+                (value) =>
+                  (value >= 0 ? "+" : "") +
+                  formatCurrencyAbbr(value, countryId, {
+                    minimumFractionDigits: 0,
+                    maximumFractionDigits: 0,
+                  }),
               ),
               name: "Income effect",
             },
@@ -80,7 +90,12 @@ export default function LabourSupplyDecileAverageImpact(props) {
                 },
               },
               text: overallChange.map(
-                (value) => (value >= 0 ? "+" : "") + formatPercent(value),
+                (value) =>
+                  (value >= 0 ? "+" : "") +
+                  formatCurrencyAbbr(value, countryId, {
+                    minimumFractionDigits: 0,
+                    maximumFractionDigits: 0,
+                  }),
               ),
               name: "Overall change",
             },

diff --git a/src/pages/policy/output/LabourSupplyDecileRelativeImpact.jsx b/src/pages/policy/output/LabourSupplyDecileRelativeImpact.jsx
@@ -6,7 +6,7 @@ import { ChartLogo } from "../../../api/charts";
 import { plotLayoutFont } from "pages/policy/output/utils";
 
 export default function LabourSupplyDecileRelativeImpact(props) {
-  const { policyLabel, metadata, impact } = props;
+  const { policyLabel, metadata, impact, countryId } = props;
 
   const decileImpact = impact.labour_supply_response;
 
@@ -41,7 +41,12 @@ export default function LabourSupplyDecileRelativeImpact(props) {
                 ),
               },
               text: substitutionChanges.map(
-                (value) => (value >= 0 ? "+" : "") + formatPercent(value),
+                (value) =>
+                  (value >= 0 ? "+" : "") +
+                  formatPercent(value, countryId, {
+                    maximumFractionDigits: 1,
+                    minimumFractionDigits: 1,
+                  }),
               ),
               name: "Substitution effect",
             },
@@ -55,7 +60,12 @@ export default function LabourSupplyDecileRelativeImpact(props) {
                 ),
               },
               text: incomeChanges.map(
-                (value) => (value >= 0 ? "+" : "") + formatPercent(value),
+                (value) =>
+                  (value >= 0 ? "+" : "") +
+                  formatPercent(value, countryId, {
+                    maximumFractionDigits: 1,
+                    minimumFractionDigits: 1,
+                  }),
               ),
               name: "Income effect",
             },
@@ -80,7 +90,12 @@ export default function LabourSupplyDecileRelativeImpact(props) {
                 },
               },
               text: overallChange.map(
-                (value) => (value >= 0 ? "+" : "") + formatPercent(value),
+                (value) =>
+                  (value >= 0 ? "+" : "") +
+                  formatPercent(value, countryId, {
+                    maximumFractionDigits: 1,
+                    minimumFractionDigits: 1,
+                  }),
               ),
               name: "Overall change",
             },