Merge pull request #427 from valpinkman/fix-graph-values

fix y axis values on graphs and dashboard page

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.22.0",
     "axios": "^0.18.0",
     "babel-runtime": "^6.26.0",
     "bcryptjs": "^2.4.3",

src/components/BalanceSummary/index.js

@@ -1,6 +1,7 @@
 // @flow
 
 import React, { Fragment } from 'react'
+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'
@@ -53,12 +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 => formatShort(counterValue.units[0], val)}
                   renderTooltip={
                     isAvailable && !account
                       ? d => (

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>
       )}

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}
               />
             )}

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')}

src/components/base/Chart/index.js

@@ -36,8 +36,7 @@
 import React, { PureComponent } from 'react'
 import * as d3 from 'd3'
 import noop from 'lodash/noop'
-
-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'
@@ -48,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
@@ -58,6 +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) => string | number, // eslint-disable-line react/no-unused-prop-types
 }
 
 class Chart extends PureComponent<Props> {
@@ -69,6 +68,7 @@ class Chart extends PureComponent<Props> {
     id: 'chart',
     isInteractive: true,
     tickXScale: 'month',
+    renderTickY: (t: *) => t,
   }
 
   componentDidMount() {

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, 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(renderTickY),
     )
     NODES.axisBot.call(
       d3

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>
     )

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.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"