From 9efc7aaa980f750e75c8764015c65d02d1a18adc Mon Sep 17 00:00:00 2001
From: "Valentin D. Pinkman" <valentin.d.pinkman@icloud.com>
Date: Fri, 1 Jun 2018 14:55:18 +0200
Subject: [PATCH 1/3] fix y axis values on graphs and dashboard page

---
 package.json                             | 2 +-
 src/components/BalanceSummary/index.js   | 4 ++++
 src/components/base/Chart/index.js       | 4 ++++
 src/components/base/Chart/refreshDraw.js | 6 ++----
 yarn.lock                                | 6 +++---
 5 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 4f7ad6b8..7502bfbf 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "@ledgerhq/hw-transport": "^4.12.0",
     "@ledgerhq/hw-transport-node-hid": "^4.12.0",
     "@ledgerhq/ledger-core": "1.4.1",
-    "@ledgerhq/live-common": "2.19.0",
+    "@ledgerhq/live-common": "^2.20.0",
     "axios": "^0.18.0",
     "babel-runtime": "^6.26.0",
     "bcryptjs": "^2.4.3",
diff --git a/src/components/BalanceSummary/index.js b/src/components/BalanceSummary/index.js
index be091a8f..e3f9e693 100644
--- a/src/components/BalanceSummary/index.js
+++ b/src/components/BalanceSummary/index.js
@@ -1,6 +1,7 @@
 // @flow
 
 import React, { Fragment } from 'react'
+import { formatCurrencyUnit } from '@ledgerhq/live-common/lib/helpers/currencies'
 import type { Currency, Account } from '@ledgerhq/live-common/lib/types'
 
 import Chart from 'components/base/Chart'
@@ -59,6 +60,9 @@ const BalanceSummary = ({
                   height={250}
                   currency={counterValue}
                   tickXScale={selectedTime}
+                  renderTickY={(val, account) =>
+                    account ? formatCurrencyUnit(account.unit, val) : val
+                  }
                   renderTooltip={
                     isAvailable && !account
                       ? d => (
diff --git a/src/components/base/Chart/index.js b/src/components/base/Chart/index.js
index 21cba1b6..e94807b8 100644
--- a/src/components/base/Chart/index.js
+++ b/src/components/base/Chart/index.js
@@ -36,6 +36,7 @@
 import React, { PureComponent } from 'react'
 import * as d3 from 'd3'
 import noop from 'lodash/noop'
+import { formatShort } from '@ledgerhq/live-common/lib/helpers/currencies'
 
 import type { Account } from '@ledgerhq/live-common/lib/types'
 
@@ -58,6 +59,7 @@ export type Props = {
   dateFormat?: string, // eslint-disable-line react/no-unused-prop-types
   isInteractive?: boolean, // eslint-disable-line react/no-unused-prop-types
   renderTooltip?: Function, // eslint-disable-line react/no-unused-prop-types
+  renderTickY?: (t: number, account: Account) => mixed, // eslint-disable-line react/no-unused-prop-types
 }
 
 class Chart extends PureComponent<Props> {
@@ -69,6 +71,8 @@ class Chart extends PureComponent<Props> {
     id: 'chart',
     isInteractive: true,
     tickXScale: 'month',
+    renderTickY: (t: number, account: Account): mixed =>
+      account ? formatShort(account.unit, t) : t,
   }
 
   componentDidMount() {
diff --git a/src/components/base/Chart/refreshDraw.js b/src/components/base/Chart/refreshDraw.js
index eac16978..ca57b2fd 100644
--- a/src/components/base/Chart/refreshDraw.js
+++ b/src/components/base/Chart/refreshDraw.js
@@ -2,7 +2,6 @@
 
 import * as d3 from 'd3'
 import moment from 'moment'
-import { formatShort } from '@ledgerhq/live-common/lib/helpers/currencies'
 
 import { colors as themeColors } from 'styles/theme'
 
@@ -31,11 +30,10 @@ function getRenderTickX(selectedTime) {
 
 export default function refreshDraw({ ctx, props }: { ctx: CTX, props: Props }) {
   const { NODES, WIDTH, HEIGHT, MARGINS, COLORS, INVALIDATED, DATA, x, y } = ctx
-  const { hideAxis, isInteractive, tickXScale, account } = props
+  const { hideAxis, isInteractive, tickXScale, account, renderTickY } = props
 
   const nbTicksX = getTickXCount(tickXScale)
   const renderTickX = getRenderTickX(tickXScale)
-  const renderTickY = t => (account ? formatShort(account.unit, t) : t)
 
   const area = d3
     .area()
@@ -89,7 +87,7 @@ export default function refreshDraw({ ctx, props }: { ctx: CTX, props: Props })
       d3
         .axisLeft(y)
         .ticks(3)
-        .tickFormat(val => (renderTickY ? renderTickY(val) : val)),
+        .tickFormat(val => (renderTickY && account ? renderTickY(val, account) : val)),
     )
     NODES.axisBot.call(
       d3
diff --git a/yarn.lock b/yarn.lock
index 686fe014..b0176c5b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1495,9 +1495,9 @@
     npm "^5.7.1"
     prebuild-install "^2.2.2"
 
-"@ledgerhq/live-common@2.19.0":
-  version "2.19.0"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/live-common/-/live-common-2.19.0.tgz#bc0e12cbf1a9742a5c6497513d0269fdc6a90b95"
+"@ledgerhq/live-common@^2.20.0":
+  version "2.20.0"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/live-common/-/live-common-2.20.0.tgz#e6ec2a3a01a224edac82b093e2f1564312a30d0d"
   dependencies:
     axios "^0.18.0"
     invariant "^2.2.2"

From 14686803cb84b98995ef5c37396c006df781d15d Mon Sep 17 00:00:00 2001
From: "Valentin D. Pinkman" <valentin.d.pinkman@icloud.com>
Date: Fri, 1 Jun 2018 16:24:49 +0200
Subject: [PATCH 2/3] fallback on empty string

---
 src/components/BalanceSummary/index.js   | 4 +++-
 src/components/base/Chart/index.js       | 4 ++--
 src/components/base/Chart/refreshDraw.js | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/BalanceSummary/index.js b/src/components/BalanceSummary/index.js
index e3f9e693..94f5d6d6 100644
--- a/src/components/BalanceSummary/index.js
+++ b/src/components/BalanceSummary/index.js
@@ -61,7 +61,9 @@ const BalanceSummary = ({
                   currency={counterValue}
                   tickXScale={selectedTime}
                   renderTickY={(val, account) =>
-                    account ? formatCurrencyUnit(account.unit, val) : val
+                    account
+                      ? formatCurrencyUnit(account.unit, val)
+                      : formatCurrencyUnit(counterValue.units[0], val)
                   }
                   renderTooltip={
                     isAvailable && !account
diff --git a/src/components/base/Chart/index.js b/src/components/base/Chart/index.js
index e94807b8..c6bb4b74 100644
--- a/src/components/base/Chart/index.js
+++ b/src/components/base/Chart/index.js
@@ -59,7 +59,7 @@ export type Props = {
   dateFormat?: string, // eslint-disable-line react/no-unused-prop-types
   isInteractive?: boolean, // eslint-disable-line react/no-unused-prop-types
   renderTooltip?: Function, // eslint-disable-line react/no-unused-prop-types
-  renderTickY?: (t: number, account: Account) => mixed, // eslint-disable-line react/no-unused-prop-types
+  renderTickY?: (t: number, account: ?Account) => mixed, // eslint-disable-line react/no-unused-prop-types
 }
 
 class Chart extends PureComponent<Props> {
@@ -72,7 +72,7 @@ class Chart extends PureComponent<Props> {
     isInteractive: true,
     tickXScale: 'month',
     renderTickY: (t: number, account: Account): mixed =>
-      account ? formatShort(account.unit, t) : t,
+      account ? formatShort(account.unit, t) : '',
   }
 
   componentDidMount() {
diff --git a/src/components/base/Chart/refreshDraw.js b/src/components/base/Chart/refreshDraw.js
index ca57b2fd..193b53ba 100644
--- a/src/components/base/Chart/refreshDraw.js
+++ b/src/components/base/Chart/refreshDraw.js
@@ -87,7 +87,7 @@ export default function refreshDraw({ ctx, props }: { ctx: CTX, props: Props })
       d3
         .axisLeft(y)
         .ticks(3)
-        .tickFormat(val => (renderTickY && account ? renderTickY(val, account) : val)),
+        .tickFormat(val => renderTickY(val, account)),
     )
     NODES.axisBot.call(
       d3

From a368cc8b7bab50c57b68c52485732a6481aef75b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Renaudeau?= <gaetan.renaudeau@ledger.fr>
Date: Fri, 1 Jun 2018 16:54:53 +0200
Subject: [PATCH 3/3] last fixes for graph

---
 package.json                                   |  2 +-
 src/components/BalanceSummary/index.js         | 10 +++-------
 src/components/DashboardPage/AccountCard.js    |  2 +-
 src/components/base/Chart/Tooltip.js           | 10 +++++-----
 src/components/base/Chart/handleMouseEvents.js |  3 +--
 src/components/base/Chart/index.js             | 12 ++++--------
 src/components/base/Chart/refreshDraw.js       |  4 ++--
 src/components/base/Chart/stories.js           |  2 +-
 yarn.lock                                      |  6 +++---
 9 files changed, 21 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index 7502bfbf..3384d2fd 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "@ledgerhq/hw-transport": "^4.12.0",
     "@ledgerhq/hw-transport-node-hid": "^4.12.0",
     "@ledgerhq/ledger-core": "1.4.1",
-    "@ledgerhq/live-common": "^2.20.0",
+    "@ledgerhq/live-common": "2.22.0",
     "axios": "^0.18.0",
     "babel-runtime": "^6.26.0",
     "bcryptjs": "^2.4.3",
diff --git a/src/components/BalanceSummary/index.js b/src/components/BalanceSummary/index.js
index 94f5d6d6..80080c44 100644
--- a/src/components/BalanceSummary/index.js
+++ b/src/components/BalanceSummary/index.js
@@ -1,7 +1,7 @@
 // @flow
 
 import React, { Fragment } from 'react'
-import { formatCurrencyUnit } from '@ledgerhq/live-common/lib/helpers/currencies'
+import { formatShort } from '@ledgerhq/live-common/lib/helpers/currencies'
 import type { Currency, Account } from '@ledgerhq/live-common/lib/types'
 
 import Chart from 'components/base/Chart'
@@ -54,17 +54,13 @@ const BalanceSummary = ({
               <Box ff="Open Sans" fontSize={4} color="graphite" pt={6}>
                 <Chart
                   id={chartId}
-                  account={account}
+                  unit={account ? account.unit : null}
                   color={chartColor}
                   data={balanceHistory}
                   height={250}
                   currency={counterValue}
                   tickXScale={selectedTime}
-                  renderTickY={(val, account) =>
-                    account
-                      ? formatCurrencyUnit(account.unit, val)
-                      : formatCurrencyUnit(counterValue.units[0], val)
-                  }
+                  renderTickY={val => formatShort(counterValue.units[0], val)}
                   renderTooltip={
                     isAvailable && !account
                       ? d => (
diff --git a/src/components/DashboardPage/AccountCard.js b/src/components/DashboardPage/AccountCard.js
index 0805632f..4a6c8b9a 100644
--- a/src/components/DashboardPage/AccountCard.js
+++ b/src/components/DashboardPage/AccountCard.js
@@ -88,7 +88,7 @@ const AccountCard = ({
             hideAxis
             isInteractive={false}
             id={`account-chart-${account.id}`}
-            account={account}
+            unit={account.unit}
           />
         </Box>
       )}
diff --git a/src/components/base/Chart/Tooltip.js b/src/components/base/Chart/Tooltip.js
index 2ccbdbec..900afa8e 100644
--- a/src/components/base/Chart/Tooltip.js
+++ b/src/components/base/Chart/Tooltip.js
@@ -3,7 +3,7 @@
 import React, { Fragment } from 'react'
 import styled from 'styled-components'
 
-import type { Account, Currency } from '@ledgerhq/live-common/lib/types'
+import type { Unit, Currency } from '@ledgerhq/live-common/lib/types'
 
 import FormattedVal from 'components/base/FormattedVal'
 import Box from 'components/base/Box'
@@ -25,12 +25,12 @@ const Container = styled(Box).attrs({
 const Tooltip = ({
   item,
   renderTooltip,
-  account,
+  unit,
   counterValue,
 }: {
   item: Item,
   renderTooltip?: Function,
-  account?: Account,
+  unit?: ?Unit,
   counterValue: Currency,
 }) => (
   <div style={{ position: 'relative' }}>
@@ -57,13 +57,13 @@ const Tooltip = ({
               unit={counterValue.units[0]}
               val={item.value}
             />
-            {account && (
+            {unit && (
               <FormattedVal
                 color="grey"
                 fontSize={3}
                 alwaysShowSign={false}
                 showCode
-                unit={account.unit}
+                unit={unit}
                 val={item.originalValue}
               />
             )}
diff --git a/src/components/base/Chart/handleMouseEvents.js b/src/components/base/Chart/handleMouseEvents.js
index bf5a918a..77096ed3 100644
--- a/src/components/base/Chart/handleMouseEvents.js
+++ b/src/components/base/Chart/handleMouseEvents.js
@@ -30,7 +30,6 @@ export default function handleMouseEvents({
   renderTooltip?: Function,
 }) {
   const { MARGINS, HEIGHT, WIDTH, NODES, DATA, x, y } = ctx
-  const { account } = props
 
   const bisectDate = d3.bisector(d => d.parsedDate).left
 
@@ -94,7 +93,7 @@ export default function handleMouseEvents({
           <Provider store={createStore({})}>
             <ThemeProvider theme={theme}>
               <Tooltip
-                account={account}
+                unit={props.unit}
                 renderTooltip={renderTooltip}
                 item={d.ref}
                 counterValue={getFiatCurrencyByTicker('USD')}
diff --git a/src/components/base/Chart/index.js b/src/components/base/Chart/index.js
index c6bb4b74..2b14a107 100644
--- a/src/components/base/Chart/index.js
+++ b/src/components/base/Chart/index.js
@@ -36,9 +36,7 @@
 import React, { PureComponent } from 'react'
 import * as d3 from 'd3'
 import noop from 'lodash/noop'
-import { formatShort } from '@ledgerhq/live-common/lib/helpers/currencies'
-
-import type { Account } from '@ledgerhq/live-common/lib/types'
+import type { Unit } from '@ledgerhq/live-common/lib/types'
 
 import refreshNodes from './refreshNodes'
 import refreshDraw from './refreshDraw'
@@ -49,8 +47,7 @@ import type { Data } from './types'
 
 export type Props = {
   data: Data, // eslint-disable-line react/no-unused-prop-types
-  account?: Account, // eslint-disable-line react/no-unused-prop-types
-
+  unit?: ?Unit, // eslint-disable-line react/no-unused-prop-types
   id?: string, // eslint-disable-line react/no-unused-prop-types
   height?: number,
   tickXScale: string, // eslint-disable-line react/no-unused-prop-types
@@ -59,7 +56,7 @@ export type Props = {
   dateFormat?: string, // eslint-disable-line react/no-unused-prop-types
   isInteractive?: boolean, // eslint-disable-line react/no-unused-prop-types
   renderTooltip?: Function, // eslint-disable-line react/no-unused-prop-types
-  renderTickY?: (t: number, account: ?Account) => mixed, // eslint-disable-line react/no-unused-prop-types
+  renderTickY: (t: number) => string | number, // eslint-disable-line react/no-unused-prop-types
 }
 
 class Chart extends PureComponent<Props> {
@@ -71,8 +68,7 @@ class Chart extends PureComponent<Props> {
     id: 'chart',
     isInteractive: true,
     tickXScale: 'month',
-    renderTickY: (t: number, account: Account): mixed =>
-      account ? formatShort(account.unit, t) : '',
+    renderTickY: (t: *) => t,
   }
 
   componentDidMount() {
diff --git a/src/components/base/Chart/refreshDraw.js b/src/components/base/Chart/refreshDraw.js
index 193b53ba..fa3d2e31 100644
--- a/src/components/base/Chart/refreshDraw.js
+++ b/src/components/base/Chart/refreshDraw.js
@@ -30,7 +30,7 @@ function getRenderTickX(selectedTime) {
 
 export default function refreshDraw({ ctx, props }: { ctx: CTX, props: Props }) {
   const { NODES, WIDTH, HEIGHT, MARGINS, COLORS, INVALIDATED, DATA, x, y } = ctx
-  const { hideAxis, isInteractive, tickXScale, account, renderTickY } = props
+  const { hideAxis, isInteractive, tickXScale, renderTickY } = props
 
   const nbTicksX = getTickXCount(tickXScale)
   const renderTickX = getRenderTickX(tickXScale)
@@ -87,7 +87,7 @@ export default function refreshDraw({ ctx, props }: { ctx: CTX, props: Props })
       d3
         .axisLeft(y)
         .ticks(3)
-        .tickFormat(val => renderTickY(val, account)),
+        .tickFormat(renderTickY),
     )
     NODES.axisBot.call(
       d3
diff --git a/src/components/base/Chart/stories.js b/src/components/base/Chart/stories.js
index e1f4e704..a88182bb 100644
--- a/src/components/base/Chart/stories.js
+++ b/src/components/base/Chart/stories.js
@@ -62,7 +62,7 @@ class Wrapper extends Component<any, State> {
           color={color('color', '#5f8ced')}
           data={data.slice(start, stop)}
           height={number('height', 300)}
-          account={fakeAccount}
+          unit={fakeAccount.unit}
         />
       </Fragment>
     )
diff --git a/yarn.lock b/yarn.lock
index b0176c5b..799f056e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1495,9 +1495,9 @@
     npm "^5.7.1"
     prebuild-install "^2.2.2"
 
-"@ledgerhq/live-common@^2.20.0":
-  version "2.20.0"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/live-common/-/live-common-2.20.0.tgz#e6ec2a3a01a224edac82b093e2f1564312a30d0d"
+"@ledgerhq/live-common@2.22.0":
+  version "2.22.0"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/live-common/-/live-common-2.22.0.tgz#f958ee28cc09af40a6bed484e73204f01b54d709"
   dependencies:
     axios "^0.18.0"
     invariant "^2.2.2"