Revert to d3-format

apps/climatemappedafrica/package.json

@@ -55,6 +55,7 @@
     "@reactour/tour": "catalog:",
     "aws-sdk": "catalog:",
     "clsx": "catalog:",
+    "d3-format": "catalog:",
     "deepmerge": "catalog:",
     "express": "catalog:",
     "leaflet": "catalog:",

apps/climatemappedafrica/src/utils/formatNumericalValue.js

@@ -1,19 +1,22 @@
+import { format } from "d3-format";
+
+import { hurumap } from "@/climatemappedafrica/config";
+
 function formatNumericalValue({ value, method }) {
-  let options = {};
+  const { formatting } = hurumap;
+  let fn = format(formatting.percentage);
+  // Percentage formatting multiplies by 100 first.
+  // see: https://github.com/d3/d3-format#locale_format
   let multipler = 100;
-
   if (method === "absolute_value") {
-    options = { style: "decimal", maximumFractionDigits: 0 };
+    fn = format(formatting.integer);
     multipler = 1;
   } else if (method === "decimal") {
-    options = { style: "decimal", maximumFractionDigits: 2 };
     multipler = 1;
-  } else {
-    options = { style: "percent", maximumFractionDigits: 2 };
+    fn = format(formatting.decimal);
   }
 
-  const formatter = new Intl.NumberFormat(undefined, options);
-  return formatter.format(value / multipler);
+  return fn(value / multipler);
 }
 
 export default formatNumericalValue;

apps/pesayetu/package.json

@@ -46,6 +46,7 @@
     "@reactour/tour": "catalog:",
     "aws-sdk": "catalog:",
     "clsx": "catalog:",
+    "d3-format": "catalog:",
     "deepmerge": "catalog:",
     "leaflet": "catalog:",
     "lodash": "catalog:",

apps/pesayetu/src/utils/formatNumericalValue.js

@@ -1,19 +1,22 @@
+import { format } from "d3-format";
+
+import { hurumap } from "@/pesayetu/config";
+
 function formatNumericalValue({ value, method }) {
-  let options = {};
+  const { formatting } = hurumap;
+  let fn = format(formatting.percentage);
+  // Percentage formatting multiplies by 100 first.
+  // see: https://github.com/d3/d3-format#locale_format
   let multipler = 100;
-
   if (method === "absolute_value") {
-    options = { style: "decimal", maximumFractionDigits: 0 };
+    fn = format(formatting.integer);
     multipler = 1;
   } else if (method === "decimal") {
-    options = { style: "decimal", maximumFractionDigits: 2 };
     multipler = 1;
-  } else {
-    options = { style: "percent", maximumFractionDigits: 2 };
+    fn = format(formatting.decimal);
   }
 
-  const formatter = new Intl.NumberFormat(undefined, options);
-  return formatter.format(value / multipler);
+  return fn(value / multipler);
 }
 
 export default formatNumericalValue;