From a2e756e9b7b48bada6fe84b2af34db7859b925a8 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Wed, 14 Mar 2018 11:31:07 +0100
Subject: [PATCH] Prevent NaN on BalanceInfos

---
 src/components/BalanceSummary/BalanceInfos.js |  2 +-
 src/components/BalanceSummary/stories.js      | 22 +++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 src/components/BalanceSummary/stories.js

diff --git a/src/components/BalanceSummary/BalanceInfos.js b/src/components/BalanceSummary/BalanceInfos.js
index f2adaa67..8b3ad174 100644
--- a/src/components/BalanceSummary/BalanceInfos.js
+++ b/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}
       />
diff --git a/src/components/BalanceSummary/stories.js b/src/components/BalanceSummary/stories.js
new file mode 100644
index 00000000..fbcbfc9a
--- /dev/null
+++ b/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 })}
+  />
+))