Prevent NaN on BalanceInfos

src/components/BalanceSummary/BalanceInfos.js

@@ -43,7 +43,7 @@ export function BalanceSincePercent(props: BalanceSinceProps) {
     <Box {...otherProps}>
       <FormattedVal
         isPercent
-        val={Math.floor((totalBalance - refBalance) / refBalance * 100)}
+        val={refBalance ? Math.floor((totalBalance - refBalance) / refBalance * 100) : 0}
         alwaysShowSign
         fontSize={7}
       />

src/components/BalanceSummary/stories.js

@@ -0,0 +1,22 @@
+// @flow
+
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { number } from '@storybook/addon-knobs'
+import { translate } from 'react-i18next'
+
+import BalanceInfos from './BalanceInfos'
+
+const stories = storiesOf('Components', module)
+
+const BalanceInfosComp = translate()(BalanceInfos)
+
+stories.add('BalanceInfos', () => (
+  <BalanceInfosComp
+    since="month"
+    counterValue="USD"
+    totalBalance={number('totalBalance', 1000, { min: 0 })}
+    sinceBalance={number('sinceBalance', 500, { min: 0 })}
+    refBalance={number('refBalance', 200, { min: 0 })}
+  />
+))