fix(Development): make development base neutral on decimal rounded va…

…lue (#649)

If value is 0.01 but decimal is 1 rendered value becomes 0.0. However,
since the development is still positive the Development component
renders 0.0 in the positive styling. This commit changes this behaviour
and makes the development look at the rendered value rather than the
original value, aligning the design and the displayed value.

src/components/development/development.jsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import NumberComponent from '../number/number';
 import CurrencyComponent from '../currency/currency';
 import PercentComponent from '../percent/percent';
-import { valuePropType } from '../../utils';
+import { valuePropType, round } from '../../utils';
 
 function renderSign(direction) {
   switch (direction) {
@@ -17,10 +17,12 @@ function renderSign(direction) {
   }
 }
 
-function getDirection(value) {
-  if (value > 0) {
+function getDirection(value, maxDecimals, decimals) {
+  const dec = maxDecimals || decimals;
+  const fixedValue = round(value, dec);
+  if (fixedValue > 0) {
     return 'positive';
-  } else if (value < 0) {
+  } else if (fixedValue < 0) {
     return 'negative';
   }
   return 'neutral';
@@ -60,7 +62,7 @@ export default function Development({
     percentage: PercentComponent,
     number: NumberComponent,
   };
-  const developmentDirection = direction || getDirection(value);
+  const developmentDirection = direction || getDirection(value, maxDecimals, decimals);
   const Component = components[type] || components.number;
   const classes = classNames(`number--${developmentDirection}`, className);
   const style = {

src/components/development/development.md

@@ -44,6 +44,14 @@ Example with other types:
       </span>
     </div>
 
+Example with neutral values:
+
+    <div>
+      <span style={{marignRight: '2rem'}} title="Neutral value with negligible positive development">
+        <Development value={0.01} decimals={1} />
+      </span>
+    </div>
+
 Advanced examples:
 
     <div>
@@ -81,7 +89,6 @@ Override colors examples:
       </span>
     </div>
 
-
 Override colors with classes examples:
 
     <div>

src/utils.js

@@ -18,6 +18,13 @@ export function getFractionDigits(...args) {
   return args.find(numberIsFinite);
 }
 
+export function round(value, decimals) {
+  if (!numberIsFinite(decimals)) return value;
+  const exp1 = Math.round(`${value}e${decimals}`);
+  const exp2 = `e-${decimals}`;
+  return Number(`${exp1}${exp2}`);
+}
+
 export const getDevelopmentPercentage = (previous, current) => {
   if (!numberIsFinite(current) || !numberIsFinite(previous)) {
     return 0;

test/components/development.test.js

@@ -105,6 +105,19 @@ describe('<Development />', () => {
     });
   });
 
+  describe('Negligible values', () => {
+    it('should render neutral when the change is negligible', () => {
+      const component = shallow(<Development value={0.01} type="percentage" decimals={1} />);
+      expect(component.find('.number--neutral')).to.have.length(1);
+    });
+    it('should render neutral when the change is negligible based on maxDecimals', () => {
+      const maxDecimals = 3;
+      const minDecimals = 1;
+      const component = shallow(<Development value={0.0001} type="percentage" maxDecimals={maxDecimals} minDecimals={minDecimals} />);
+      expect(component.find('.number--neutral')).to.have.length(1);
+    });
+  });
+
   describe('Custom colors', () => {
     it('should default to undefined', () => {
       const component = shallow(<Development value={0} type="number" />);

test/utils.test.js

@@ -1,6 +1,6 @@
 import { expect } from 'chai';
 
-import { numberIsFinite, getTickDecimals, getFractionDigits, getDevelopmentPercentage } from '../src/utils';
+import { numberIsFinite, getTickDecimals, getFractionDigits, round, getDevelopmentPercentage } from '../src/utils';
 
 describe('utils', () => {
   describe('numberIsFinite', () => {
@@ -124,6 +124,24 @@ describe('utils', () => {
     });
   });
 
+  describe('round', () => {
+    it('should be a function', () => {
+      expect(round).to.be.a('function');
+    });
+    it('should return value if decimals is not a number', () => {
+      expect(round(1.01)).to.equal(1.01);
+      expect(round(1.01, '')).to.equal(1.01);
+      expect(round(1.01, '1')).to.equal(1.01);
+    });
+    it('should correctly round to `decimals` number of decimals', () => {
+      expect(round(1.01)).to.equal(1.01);
+      expect(round(1.01, 2)).to.equal(1.01);
+      expect(round(1.01, 1)).to.equal(1.0);
+      expect(round(1.09, 1)).to.equal(1.1);
+      expect(round(1.005, 2)).to.equal(1.01);
+    });
+  });
+
   describe('getDevelopmentPercentage', () => {
     it('should be a function', () => {
       expect(getDevelopmentPercentage).to.be.a('function');