Fix bug in formatter applied to histogram

CHANGELOG.md

@@ -10,6 +10,7 @@
 - Add new hygen generators for components, models and slices [#171](https://github.com/CartoDB/carto-react-template/pull/171)
 - Adapt to new **multi-package** structure for carto-react libs [#206](https://github.com/CartoDB/carto-react-lib/pull/206)
 - Fix layer generator with second layer [#204](https://github.com/CartoDB/carto-react-template/pull/204)
+- Fix bug in formatter applied to histogram [#211](https://github.com/CartoDB/carto-react-template/pull/211)
 
 ## 1.0.0-beta12 (2021-02-08)
 - Refactor on basic JSX & JS stuff [#170](https://github.com/CartoDB/carto-react-template/pull/170)

template-sample-app/template/src/utils/formatter.js

@@ -6,8 +6,8 @@ import '@formatjs/intl-getcanonicallocales/polyfill';
 import '@formatjs/intl-pluralrules/polyfill';
 import '@formatjs/intl-pluralrules/locale-data/en';
 
-/* 
-  Note: `notation` & `compactDisplay` properties are not supported yet by Safari. 
+/*
+  Note: `notation` & `compactDisplay` properties are not supported yet by Safari.
   Those require the use of a polyfill: https://www.npmjs.com/package/@formatjs/intl-numberformat
 */
 import '@formatjs/intl-numberformat/polyfill';
@@ -26,10 +26,21 @@ export const currencyFormatter = (value) => {
 };
 
 export const numberFormatter = (value) => {
-  return Intl.NumberFormat('en-US', {
-    maximumFractionDigits: 1,
-    minimumFractionDigits: 0,
-    notation: 'compact',
-    compactDisplay: 'short',
-  }).format(isNaN(value) ? 0 : value);
+  const _value = parseLogicalOperation(value);
+  return (
+    _value.operation +
+    Intl.NumberFormat('en-US', {
+      maximumFractionDigits: 1,
+      minimumFractionDigits: 0,
+      notation: 'compact',
+      compactDisplay: 'short',
+    }).format(_value.value)
+  );
+};
+
+const parseLogicalOperation = (value) => {
+  if (!isNaN(value)) return { value: value, operation: '' };
+
+  const _value = value.replace('>', '');
+  return isNaN(_value) ? { value: 0, operation: '' } : { value: _value, operation: '> ' };
 };

template-skeleton/template/src/utils/formatter.js

@@ -6,8 +6,8 @@ import '@formatjs/intl-getcanonicallocales/polyfill';
 import '@formatjs/intl-pluralrules/polyfill';
 import '@formatjs/intl-pluralrules/locale-data/en';
 
-/* 
-  Note: `notation` & `compactDisplay` properties are not supported yet by Safari. 
+/*
+  Note: `notation` & `compactDisplay` properties are not supported yet by Safari.
   Those require the use of a polyfill: https://www.npmjs.com/package/@formatjs/intl-numberformat
 */
 import '@formatjs/intl-numberformat/polyfill';
@@ -26,10 +26,21 @@ export const currencyFormatter = (value) => {
 };
 
 export const numberFormatter = (value) => {
-  return Intl.NumberFormat('en-US', {
-    maximumFractionDigits: 1,
-    minimumFractionDigits: 0,
-    notation: 'compact',
-    compactDisplay: 'short',
-  }).format(value);
+  const _value = parseLogicalOperation(value);
+  return (
+    _value.operation +
+    Intl.NumberFormat('en-US', {
+      maximumFractionDigits: 1,
+      minimumFractionDigits: 0,
+      notation: 'compact',
+      compactDisplay: 'short',
+    }).format(_value.value)
+  );
+};
+
+const parseLogicalOperation = (value) => {
+  if (!isNaN(value)) return { value: value, operation: '' };
+
+  const _value = value.replace('>', '');
+  return isNaN(_value) ? { value: 0, operation: '' } : { value: _value, operation: '> ' };
 };