@haniffalab/cherita-react 0.2.0-dev.2024-11-14.065cb0d1 → 0.2.0-dev.2024-12-16.f6e39628

package/dist/components/obs-list/ObsItem.js

@@ -53,7 +53,7 @@ function binDiscrete(data) {
   };
 }
 function getContinuousLabel(code, binEdges) {
-  return `[ ${(0, _string.prettyNumerical)(binEdges[code][0])}, ${(0, _string.prettyNumerical)(binEdges[code][1])}${code === binEdges.length - 1 ? " ]" : " )"}`;
+  return `[ ${(0, _string.formatNumerical)(binEdges[code][0])}, ${(0, _string.formatNumerical)(binEdges[code][1], _string.FORMATS.EXPONENTIAL)}${code === binEdges.length - 1 ? " ]" : " )"}`;
 }
 function CategoricalItem(_ref) {
   let {
@@ -88,7 +88,7 @@ function CategoricalItem(_ref) {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "pl-1 m-0",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
-            title: `${(0, _string.prettyNumerical)(pct)}%`,
+            title: `${(0, _string.formatNumerical)(pct, _string.FORMATS.EXPONENTIAL)}%`,
             placement: "left",
             arrow: true,
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -98,7 +98,7 @@ function CategoricalItem(_ref) {
                 style: {
                   fontWeight: "lighter"
                 },
-                children: (0, _string.prettyNumerical)(parseInt(value_counts))
+                children: (0, _string.formatNumerical)(parseInt(value_counts), _string.FORMATS.EXPONENTIAL)
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                 className: "value-pct-gauge-container",
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xCharts.Gauge, {
@@ -179,7 +179,7 @@ function CategoricalObs(_ref2) {
       value_counts: obs.value_counts[obs.values[index]],
       pct: obs.value_counts[obs.values[index]] / totalCounts * 100,
       isOmitted: _lodash.default.includes(obs.omit, obs.codes[obs.values[index]]),
-      label: (0, _string.prettyNumerical)(obs.values[index])
+      label: obs.values[index]
     };
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ListGroup, {
@@ -233,14 +233,14 @@ function ObsContinuousStats(_ref3) {
               children: "Min"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
               className: "text-end",
-              children: (0, _string.prettyNumerical)(obs.min)
+              children: (0, _string.formatNumerical)(obs.min, _string.FORMATS.EXPONENTIAL)
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
               children: "Max"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
               className: "text-end",
-              children: (0, _string.prettyNumerical)(obs.max)
+              children: (0, _string.formatNumerical)(obs.max, _string.FORMATS.EXPONENTIAL)
             })]
           })]
         })
@@ -254,14 +254,14 @@ function ObsContinuousStats(_ref3) {
               children: "Mean"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
               className: "text-end",
-              children: (0, _string.prettyNumerical)(obs.mean)
+              children: (0, _string.formatNumerical)(obs.mean, _string.FORMATS.EXPONENTIAL)
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
               children: "Median"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
               className: "text-end",
-              children: (0, _string.prettyNumerical)(obs.median)
+              children: (0, _string.formatNumerical)(obs.median, _string.FORMATS.EXPONENTIAL)
             })]
           })]
         })
@@ -280,9 +280,9 @@ function ObsContinuousStats(_ref3) {
           },
           xAxis: {
             data: fetchedData.kde_values[0],
-            valueFormatter: v => `${(0, _string.prettyNumerical)(v)}`
+            valueFormatter: v => `${(0, _string.formatNumerical)(v, _string.FORMATS.EXPONENTIAL)}`
           },
-          valueFormatter: v => `${(0, _string.prettyNumerical)(v)}`,
+          valueFormatter: v => `${(0, _string.formatNumerical)(v, _string.FORMATS.EXPONENTIAL)}`,
           slotProps: {
             popper: {
               className: "feature-histogram-tooltip"
@@ -360,7 +360,7 @@ function ContinuousObs(_ref4) {
       value_counts: obs.value_counts[obs.values[index]],
       pct: obs.value_counts[obs.values[index]] / totalCounts * 100,
       isOmitted: _lodash.default.includes(obs.omit, obs.codes[obs.values[index]]),
-      label: getContinuousLabel(obs.codes[obs.values[index]], obs.bins.binEdges)
+      label: isNaN(obs.values[index]) ? "NaN" : getContinuousLabel(obs.codes[obs.values[index]], obs.bins.binEdges)
     };
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {

package/dist/components/obs-list/ObsList.js

@@ -160,7 +160,7 @@ function ObsColsList(_ref) {
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Accordion.Item, {
       eventKey: item.name,
-      className: active === item.name && "cherita-accordion-active",
+      className: active === item.name && dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && "cherita-accordion-active",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion.Header, {
         children: item.name
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion.Body, {

package/dist/components/scatterplot/Legend.js

@@ -43,13 +43,13 @@ function Legend(_ref) {
           children: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? dataset.selectedVar?.name : dataset.selectedObs?.name
         }), spanList, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "domain-min",
-          children: (0, _string.prettyNumerical)(min)
+          children: (0, _string.formatNumerical)(min, _string.FORMATS.EXPONENTIAL)
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "domain-med",
-          children: (0, _string.prettyNumerical)((min + max) * 0.5)
+          children: (0, _string.formatNumerical)((min + max) * 0.5, _string.FORMATS.EXPONENTIAL)
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "domain-max",
-          children: (0, _string.prettyNumerical)(max)
+          children: (0, _string.formatNumerical)(max, _string.FORMATS.EXPONENTIAL)
         })]
       })
     });

package/dist/components/scatterplot/Scatterplot.js

@@ -285,7 +285,7 @@ function Scatterplot(_ref) {
       if (dataset.selectedObs.type === _constants.OBS_TYPES.CATEGORICAL) {
         inSlice &= !_lodash.default.includes(dataset.selectedObs.omit, values[index]);
       } else if (dataset.selectedObs.type === _constants.OBS_TYPES.CONTINUOUS) {
-        if (Number.isNaN(values[index])) {
+        if (isNaN(values[index])) {
           inSlice &= !_lodash.default.includes(dataset.selectedObs.omit, -1);
         } else {
           inSlice &= isInBins(values[index], dataset.selectedObs.bins.binEdges, _lodash.default.without(dataset.selectedObs.omit, -1));
@@ -448,7 +448,7 @@ function Scatterplot(_ref) {
   const getLabel = function (o, v) {
     let isVar = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     if (isVar || o.type === _constants.OBS_TYPES.CONTINUOUS) {
-      return `${o.name}: ${(0, _string.prettyNumerical)(parseFloat(v))}`;
+      return `${o.name}: ${(0, _string.formatNumerical)(parseFloat(v))}`;
     } else {
       return `${o.name}: ${o.codesMap[v]}`;
     }

package/dist/components/scatterplot/Toolbox.js

@@ -27,12 +27,12 @@ function Toolbox(_ref) {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
           icon: _freeSolidSvgIcons.faDroplet
         }), " ", mode]
-      }), (mode || !Number.isNaN(obsLength)) && (mode !== null && !Number.isNaN(slicedLength) && slicedLength !== obsLength ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+      }), (mode || !isNaN(obsLength)) && (mode !== null && !isNaN(slicedLength) && slicedLength !== obsLength ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
         size: "sm",
-        children: [(0, _string.prettyNumerical)(slicedLength), " out of", " ", (0, _string.prettyNumerical)(obsLength), " cells"]
+        children: [(0, _string.formatNumerical)(slicedLength), " out of", " ", (0, _string.formatNumerical)(obsLength), " cells"]
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
         size: "sm",
-        children: [(0, _string.prettyNumerical)(obsLength), " cells"]
+        children: [(0, _string.formatNumerical)(obsLength), " cells"]
       }))]
     })
   });

package/dist/components/var-list/VarItem.js

@@ -72,11 +72,11 @@ function VarHistogram(_ref) {
           let {
             dataIndex
           } = _ref2;
-          return `${(0, _string.prettyNumerical)(fetchedData.hist[dataIndex])}`;
+          return `${(0, _string.formatNumerical)(fetchedData.hist[dataIndex])}`;
         },
         xAxis: {
           data: _lodash.default.range(fetchedData.bin_edges?.length) || null,
-          valueFormatter: v => `Bin [${(0, _string.prettyNumerical)(fetchedData.bin_edges[v][0])}, ${(0, _string.prettyNumerical)(fetchedData.bin_edges[v][1])}${v === fetchedData.bin_edges.length - 1 ? "]" : ")"}`
+          valueFormatter: v => `Bin [${(0, _string.formatNumerical)(fetchedData.bin_edges[v][0], _string.FORMATS.EXPONENTIAL)}, ${(0, _string.formatNumerical)(fetchedData.bin_edges[v][1], _string.FORMATS.EXPONENTIAL)}${v === fetchedData.bin_edges.length - 1 ? "]" : ")"}`
         },
         slotProps: {
           popper: {

package/dist/helpers/color-helper.js

@@ -23,7 +23,7 @@ const interpolateColor = (color1, color2, factor) => {
   return [r, g, b];
 };
 const computeColor = (colormap, value) => {
-  if (!colormap || Number.isNaN(value)) {
+  if (!colormap || isNaN(value)) {
     return [0, 0, 0, 255];
   } else if (value <= 0) {
     return parseHexColor(colormap[0]);

package/dist/utils/string.js

@@ -3,16 +3,62 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.prettyNumerical = prettyNumerical;
-function prettyNumerical(n) {
+exports.FORMATS = void 0;
+exports.formatNumerical = formatNumerical;
+var _numbro = _interopRequireDefault(require("numbro"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const FORMATS = exports.FORMATS = {
+  EXPONENTIAL: "exponential",
+  ABBREVIATION: "abbreviation",
+  THOUSAND: "thousand"
+};
+function formatThousand(n) {
   let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
-  if (n === 0) {
+  return (0, _numbro.default)(n).format({
+    thousandSeparated: true,
+    mantissa: precision,
+    trimMantissa: true
+  });
+}
+function formatExponential(n) {
+  let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
+  return (0, _numbro.default)(n).format({
+    exponential: true,
+    mantissa: precision,
+    trimMantissa: true
+  });
+}
+function formatAbbreviation(n) {
+  let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
+  return (0, _numbro.default)(n).format({
+    average: true,
+    mantissa: precision,
+    trimMantissa: true
+  }).toUpperCase();
+}
+function formatNumerical(n) {
+  let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : FORMATS.THOUSAND;
+  let precision = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 3;
+  if (isNaN(n)) {
+    return "NaN";
+  } else if (n === 0) {
     return "0";
-  } else if (n < 1 / 10 ** precision) {
-    return n.toExponential(precision);
-  } else {
-    return n.toLocaleString(undefined, {
-      maximumFractionDigits: precision
-    });
+  }
+  switch (format) {
+    case FORMATS.EXPONENTIAL:
+      if (n < 1 / 10 ** precision || n >= 1e6) {
+        return formatExponential(n, precision);
+      } else {
+        return formatThousand(n, precision);
+      }
+    case FORMATS.ABBREVIATION:
+      if (n >= 1e6) {
+        return formatAbbreviation(n, precision);
+      } else {
+        return formatThousand(n, precision);
+      }
+    case FORMATS.THOUSAND:
+    default:
+      return formatThousand(n, precision);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "0.2.0-dev.2024-11-14.065cb0d1",
+  "version": "0.2.0-dev.2024-12-16.f6e39628",
   "author": "",
   "license": "",
   "main": "dist/index.js",
@@ -32,6 +32,7 @@
     "deck.gl": "^8.9.19",
     "jquery": "^3.7.0",
     "nebula.gl": "^1.0.4",
+    "numbro": "^2.5.0",
     "plotly.js": "^2.23.2",
     "popper.js": "^1.16.1",
     "react-bootstrap": "^2.7.4",
@@ -100,5 +101,5 @@
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
   "homepage": "https://github.com/haniffalab/cherita-react#readme",
-  "prereleaseSha": "065cb0d10bcf8f6bcbc3e3cd78b0b7adc05977ff"
+  "prereleaseSha": "f6e396285b478f157db2dd9d8bdd8adbaa262d4c"
 }