Feature/repair list number formatting

app/javascript/components/charts/components/pie-chart-legend/pie-chart-legend-component.jsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { format } from 'd3-format';
+import { formatNumber } from 'utils/format';
 
 import './pie-chart-legend-styles.scss';
 
@@ -17,9 +17,10 @@ class PieChartLegend extends PureComponent {
     return (
       <ul className={`c-pie-chart-legend ${className} ${sizeClass}`}>
         {data.map((item, index) => {
-          const value = `${format(config.format)(item[config.key])}${
-            config.unit
-          }`;
+          const value = `${formatNumber({
+            num: item[config.key],
+            unit: config.unit
+          })}`;
           return (
             <li className="legend-item" key={index.toString()}>
               <div className="legend-title">

app/javascript/components/charts/horizontal-bar-chart/custom-tick-component.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { format } from 'd3-format';
+import { formatNumber } from 'utils/format';
 import Link from 'redux-first-router-link';
 
 const CustomTick = ({ x, y, index, yAxisDotFill, data, settings }) => {
@@ -22,13 +22,13 @@ const CustomTick = ({ x, y, index, yAxisDotFill, data, settings }) => {
       <text x="8" y="-16" textAnchor="start" fontSize="12px" fill="#555555">
         {extLink ? (
           <a href={path} target="_blank" rel="noopener nofollower">
-            {region} - {format('.1f')(total)}%{' '}
-            {index === 0 ? 'are plantations' : ''}
+            {region} - {formatNumber({ num: total, unit: '%' })}
+            {index === 0 ? ' are plantations' : ''}
           </a>
         ) : (
           <Link to={path}>
-            {region} - {format('.1f')(total)}%{' '}
-            {index === 0 ? 'are plantations' : ''}
+            {region} - {formatNumber({ num: total, unit: '%' })}
+            {index === 0 ? ' are plantations' : ''}
           </Link>
         )}
       </text>

app/javascript/components/numbered-list/numbered-list-component.jsx

@@ -1,10 +1,9 @@
 import React, { PureComponent } from 'react';
 import Link from 'redux-first-router-link';
 import PropTypes from 'prop-types';
-import { format as unitFormat } from 'd3-format';
 
 import Paginate from 'components/paginate';
-
+import { formatNumber } from 'utils/format';
 import './numbered-list-styles.scss';
 
 class NumberedList extends PureComponent {
@@ -17,7 +16,7 @@ class NumberedList extends PureComponent {
       linksDisabled,
       linksExt
     } = this.props;
-    const { page, pageSize, unit, format } = settings;
+    const { page, pageSize, unit } = settings;
     const pageData = pageSize
       ? data.slice(page * pageSize, (page + 1) * pageSize)
       : data;
@@ -39,10 +38,7 @@ class NumberedList extends PureComponent {
                     <div className="item-name">{item.label}</div>
                   </div>
                   <div className="item-value">
-                    {format
-                      ? unitFormat(format)(item.value)
-                      : unitFormat('.3s')(item.value)}
-                    {unit}
+                    {formatNumber({ num: item.value, unit })}
                   </div>
                 </div>
               );

app/javascript/components/widgets/widgets/forest-change/tree-loss/selectors.js

@@ -97,9 +97,10 @@ export const getSentence = createSelector(
       location: currentLabel,
       startYear,
       endYear,
-      loss: totalLoss
-        ? `${format('.3r')(totalLoss)}ha`
-        : `${format('.3s')(totalLoss)}ha`,
+      loss:
+        totalLoss < 1 && totalLoss > 0
+          ? `${format('.3r')(totalLoss)}ha`
+          : `${format('.3s')(totalLoss)}ha`,
       percent: `${format('.2r')(percentageLoss)}%`,
       emissions: `${format('.3s')(totalEmissions)}t`,
       extentYear

app/javascript/utils/format.js

@@ -5,3 +5,16 @@ export const formatUSD = (value, minimize = true) =>
     .replace('G', minimize ? 'B' : ' billion')
     .replace('M', minimize ? 'M' : ' million')
     .replace('K', minimize ? 'K' : ' thousand');
+
+export const formatNumber = ({ num, unit }) => {
+  const numFormat = unit === '%' ? '.2r' : '.3s';
+  const thres = unit === '%' ? 0.1 : 1;
+  let formattedNum =
+    num < thres && num > 0 ? `<${thres}` : format(numFormat)(num);
+  if (unit !== '%' && num < thres && num > 0.01) {
+    formattedNum = format('.3r')(num);
+  } else if (num > 0 && num < 0.01 && unit !== '%') {
+    formattedNum = '<0.01';
+  }
+  return `${formattedNum}${unit}`;
+};