From 8847f79bc729c5d6a0647fd5d750fb0cb9c8dc86 Mon Sep 17 00:00:00 2001 From: Ed Brett Date: Fri, 1 Jun 2018 12:32:24 +0200 Subject: [PATCH 1/4] add format number helper and apply to liast component --- .../numbered-list/numbered-list-component.jsx | 10 +++------- app/javascript/utils/format.js | 13 +++++++++++++ 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/app/javascript/components/numbered-list/numbered-list-component.jsx b/app/javascript/components/numbered-list/numbered-list-component.jsx index 19f208f3ce..cc6d0acd89 100644 --- a/app/javascript/components/numbered-list/numbered-list-component.jsx +++ b/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 {
{item.label}
- {format - ? unitFormat(format)(item.value) - : unitFormat('.3s')(item.value)} - {unit} + {formatNumber({ num: item.value, unit })}
); diff --git a/app/javascript/utils/format.js b/app/javascript/utils/format.js index 26c2f8558d..1266b4e62c 100644 --- a/app/javascript/utils/format.js +++ b/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}`; +}; From 8f0a6b0c3b11ac15295859d3714309a64153e086 Mon Sep 17 00:00:00 2001 From: Ed Brett Date: Fri, 1 Jun 2018 12:33:41 +0200 Subject: [PATCH 2/4] fix loss format --- .../widgets/widgets/forest-change/tree-loss/selectors.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/javascript/components/widgets/widgets/forest-change/tree-loss/selectors.js b/app/javascript/components/widgets/widgets/forest-change/tree-loss/selectors.js index 0f99175690..2d667b97c5 100644 --- a/app/javascript/components/widgets/widgets/forest-change/tree-loss/selectors.js +++ b/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 From b40d5ada1a6e8c1bf093a6d31b42eecbee764deb Mon Sep 17 00:00:00 2001 From: Ed Brett Date: Fri, 1 Jun 2018 12:49:40 +0200 Subject: [PATCH 3/4] format pie charts consistently --- .../pie-chart-legend/pie-chart-legend-component.jsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/app/javascript/components/charts/components/pie-chart-legend/pie-chart-legend-component.jsx b/app/javascript/components/charts/components/pie-chart-legend/pie-chart-legend-component.jsx index 0649e07b9b..0a01c48e00 100644 --- a/app/javascript/components/charts/components/pie-chart-legend/pie-chart-legend-component.jsx +++ b/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 (
    {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 (
  • From a9b78e88768f108424c64e6902819c22502847c8 Mon Sep 17 00:00:00 2001 From: Ed Brett Date: Fri, 1 Jun 2018 12:50:53 +0200 Subject: [PATCH 4/4] format horizontal chart --- .../horizontal-bar-chart/custom-tick-component.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app/javascript/components/charts/horizontal-bar-chart/custom-tick-component.jsx b/app/javascript/components/charts/horizontal-bar-chart/custom-tick-component.jsx index 3cd2e500ea..17a64a169e 100644 --- a/app/javascript/components/charts/horizontal-bar-chart/custom-tick-component.jsx +++ b/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 }) => { {extLink ? ( - {region} - {format('.1f')(total)}%{' '} - {index === 0 ? 'are plantations' : ''} + {region} - {formatNumber({ num: total, unit: '%' })} + {index === 0 ? ' are plantations' : ''} ) : ( - {region} - {format('.1f')(total)}%{' '} - {index === 0 ? 'are plantations' : ''} + {region} - {formatNumber({ num: total, unit: '%' })} + {index === 0 ? ' are plantations' : ''} )}