refactor(dif): Correct the diff percentage output

Author: trevorgerhardt

package.json

@@ -40,6 +40,7 @@
     "lodash.isequal": "^4.4.0",
     "lodash.lowercase": "^4.3.0",
     "lodash.merge": "^4.6.0",
+    "lodash.uniq": "^4.5.0",
     "lonlng": "0.1.0",
     "mapbox.js": "^2.4.0",
     "moment": "^2.15.1",

src/components/route-card.js

@@ -2,6 +2,7 @@ import Color from 'color'
 import React from 'react'
 import toCapitalCase from 'lodash.capitalize'
 import toSpaceCase from 'lodash.lowercase'
+import unique from 'lodash.uniq'
 
 import DeepEqual from './deep-equal'
 import Icon from './icon'
@@ -164,13 +165,6 @@ function findRouteForPattern ({id, patterns, routes}) {
   return routes.find((r) => r.route_id === patterns.find((p) => p.pattern_id === id).route_id)
 }
 
-function unique (a) {
-  return a.reduce(function (n, e) {
-    if (n.indexOf(e) === -1) n.push(e)
-    return n
-  }, [])
-}
-
 const typeToIcon = {
   0: 'subway',
   1: 'subway',
@@ -196,23 +190,28 @@ function showAccess (keys, base) {
 }
 
 function AccessDiffPercentage ({
-  diff
+  newAccess,
+  originalAccess
 }) {
-  if (diff > 0) return <span className='pull-right increase'><strong>{diff}</strong>%<Icon type='level-up' /></span>
-  else if (diff < 0) return <span className='pull-right decrease'><strong>{diff * -1}</strong>%<Icon className='fa-rotate-180' type='level-up' /></span>
-  else return <span />
+  const actualDiff = newAccess - originalAccess
+  const nume = actualDiff > 0
+    ? newAccess - originalAccess
+    : originalAccess - newAccess
+  const diff = parseInt((nume / originalAccess * 100).toFixed(1))
+  if (diff === 0) return <span />
+  else if (actualDiff > 0) return <span className='pull-right increase'><strong>{diff}</strong>%<Icon type='level-up' /></span>
+  else return <span className='pull-right decrease'><strong>{diff * -1}</strong>%<Icon className='fa-rotate-180' type='level-up' /></span>
 }
 
 function showDiff (keys, base, comparison) {
   return (
     <div className='CardAccess'>
       <div className='heading'>Access to</div>
       {keys.map((key, i) => {
-        const diff = parseInt(((base[key] - comparison[key]) / base[key] * 100).toFixed(1))
         return (
           <div className='Metric' key={key}>
             <MetricIcon name={key} /><strong> {(base[key] | 0).toLocaleString()} </strong> {toSpaceCase(key)}
-            <AccessDiffPercentage diff={diff} />
+            <AccessDiffPercentage newAccess={base[key]} originalAccess={comparison[key]} />
           </div>
         )
       })}

yarn.lock

@@ -4136,7 +4136,7 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "~3.0.0"
 
-lodash.uniq@^4.3.0:
+lodash.uniq, lodash.uniq@^4.3.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"