Merge pull request #193 from meriadec/master

Fix computing diff balance

src/components/AccountPage/index.js

@@ -106,7 +106,7 @@ class AccountPage extends PureComponent<Props, State> {
             accounts={[account]}
             selectedTime={selectedTime}
             daysCount={daysCount}
-            renderHeader={({ totalBalance, sinceBalance }) => (
+            renderHeader={({ totalBalance, sinceBalance, refBalance }) => (
               <Box flow={4} mb={2}>
                 <Box horizontal>
                   <BalanceTotal totalBalance={account.balance} unit={account.unit}>
@@ -135,6 +135,7 @@ class AccountPage extends PureComponent<Props, State> {
                     alignItems="center"
                     totalBalance={totalBalance}
                     sinceBalance={sinceBalance}
+                    refBalance={refBalance}
                     since={selectedTime}
                   />
                   <BalanceSinceDiff
@@ -143,6 +144,7 @@ class AccountPage extends PureComponent<Props, State> {
                     alignItems="center"
                     totalBalance={totalBalance}
                     sinceBalance={sinceBalance}
+                    refBalance={refBalance}
                     since={selectedTime}
                   />
                 </Box>

src/components/BalanceSummary/BalanceInfos.js

@@ -22,6 +22,7 @@ type BalanceSinceProps = {
   since: string,
   totalBalance: number,
   sinceBalance: number,
+  refBalance: number,
   t: T,
 }
 
@@ -37,12 +38,12 @@ type Props = {
 } & BalanceSinceProps
 
 export function BalanceSincePercent(props: BalanceSinceProps) {
-  const { t, totalBalance, sinceBalance, since, ...otherProps } = props
+  const { t, totalBalance, sinceBalance, refBalance, since, ...otherProps } = props
   return (
     <Box {...otherProps}>
       <FormattedVal
         isPercent
-        val={Math.floor((totalBalance - sinceBalance) / sinceBalance * 100)}
+        val={Math.floor((totalBalance - refBalance) / refBalance * 100)}
         alwaysShowSign
         fontSize={7}
       />
@@ -93,7 +94,7 @@ BalanceTotal.defaultProps = {
 }
 
 function BalanceInfos(props: Props) {
-  const { t, fiat, totalBalance, since, sinceBalance } = props
+  const { t, fiat, totalBalance, since, sinceBalance, refBalance } = props
   return (
     <Box horizontal alignItems="flex-end" flow={7}>
       <BalanceTotal fiat={fiat} totalBalance={totalBalance}>
@@ -103,6 +104,7 @@ function BalanceInfos(props: Props) {
         alignItems="flex-end"
         totalBalance={totalBalance}
         sinceBalance={sinceBalance}
+        refBalance={refBalance}
         since={since}
         t={t}
       />
@@ -111,6 +113,7 @@ function BalanceInfos(props: Props) {
         alignItems="flex-end"
         totalBalance={totalBalance}
         sinceBalance={sinceBalance}
+        refBalance={refBalance}
         since={since}
         t={t}
       />

src/components/BalanceSummary/index.js

@@ -36,7 +36,7 @@ const BalanceSummary = ({
       <CalculateBalance
         accounts={accounts}
         daysCount={daysCount}
-        render={({ allBalances, totalBalance, sinceBalance }) => (
+        render={({ allBalances, totalBalance, sinceBalance, refBalance }) => (
           <Fragment>
             {renderHeader !== null && (
               <Box px={6}>
@@ -44,6 +44,7 @@ const BalanceSummary = ({
                   totalBalance,
                   selectedTime,
                   sinceBalance,
+                  refBalance,
                 })}
               </Box>
             )}

src/components/CalculateBalance.js

@@ -4,6 +4,7 @@ import { PureComponent } from 'react'
 import { connect } from 'react-redux'
 import moment from 'moment'
 import find from 'lodash/find'
+import first from 'lodash/first'
 import last from 'lodash/last'
 
 import type { MapStateToProps } from 'react-redux'
@@ -31,12 +32,13 @@ function calculateBalance(props) {
   }).map(e => ({ name: e.date, value: e.balance }))
 
   const firstNonEmptyDay = find(allBalances, e => e.value)
-  const sinceBalance = firstNonEmptyDay ? firstNonEmptyDay.value : 0
+  const refBalance = firstNonEmptyDay ? firstNonEmptyDay.value : 0
 
   return {
     allBalances,
     totalBalance: last(allBalances).value,
-    sinceBalance,
+    sinceBalance: first(allBalances).value,
+    refBalance,
   }
 }
 
@@ -51,6 +53,7 @@ type State = {
   allBalances: Array<Object>,
   totalBalance: number,
   sinceBalance: number,
+  refBalance: number,
 }
 
 class CalculateBalance extends PureComponent<Props, State> {
@@ -72,9 +75,9 @@ class CalculateBalance extends PureComponent<Props, State> {
 
   render() {
     const { render } = this.props
-    const { allBalances, totalBalance, sinceBalance } = this.state
+    const { allBalances, totalBalance, sinceBalance, refBalance } = this.state
 
-    return render({ allBalances, totalBalance, sinceBalance })
+    return render({ allBalances, totalBalance, sinceBalance, refBalance })
   }
 }
 

src/components/DashboardPage/AccountCard.js

@@ -59,7 +59,7 @@ const AccountCard = ({
       <CalculateBalance
         accounts={[account]}
         daysCount={daysCount}
-        render={({ allBalances, totalBalance, sinceBalance }) => (
+        render={({ allBalances, totalBalance, refBalance }) => (
           <Box flow={4}>
             <Box flow={2} horizontal>
               <Box justifyContent="center">
@@ -75,7 +75,7 @@ const AccountCard = ({
               <Box grow justifyContent="center">
                 <FormattedVal
                   isPercent
-                  val={Math.floor((totalBalance - sinceBalance) / sinceBalance * 100)}
+                  val={Math.floor((totalBalance - refBalance) / refBalance * 100)}
                   alwaysShowSign
                   fontSize={3}
                 />

src/components/DashboardPage/index.js

@@ -137,13 +137,14 @@ class DashboardPage extends PureComponent<Props, State> {
               accounts={accounts}
               selectedTime={selectedTime}
               daysCount={daysCount}
-              renderHeader={({ totalBalance, selectedTime, sinceBalance }) => (
+              renderHeader={({ totalBalance, selectedTime, sinceBalance, refBalance }) => (
                 <BalanceInfos
                   t={t}
                   fiat="USD"
                   totalBalance={totalBalance}
                   since={selectedTime}
                   sinceBalance={sinceBalance}
+                  refBalance={refBalance}
                 />
               )}
             />

yarn.lock

@@ -3482,7 +3482,7 @@ electron-builder-lib@20.2.0, electron-builder-lib@~20.2.0:
     semver "^5.5.0"
     temp-file "^3.1.1"
 
-electron-builder@^20.0.4, electron-builder@^20.2.0:
+electron-builder@^20.2.0:
   version "20.2.0"
   resolved "https://registry.yarnpkg.com/electron-builder/-/electron-builder-20.2.0.tgz#aaeaa439cb96c9a3d7ffda25b28130327c982982"
   dependencies:
@@ -3646,7 +3646,7 @@ electron-webpack@1.13.0:
     webpack-merge "^4.1.1"
     yargs "^11.0.0"
 
-electron@1.8.2, electron@^1.8.2:
+electron@1.8.2:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/electron/-/electron-1.8.2.tgz#a817cd733c2972b3c7cc4f777caf6e424b88014d"
   dependencies: