Dynamic ticks & default tooltip in Chart component

src/components/BalanceSummary/index.js

@@ -1,9 +1,8 @@
 // @flow
 
 import React, { Fragment } from 'react'
-import moment from 'moment'
 
-import { formatShort, getFiatUnit } from '@ledgerhq/currencies'
+import { getFiatUnit } from '@ledgerhq/currencies'
 
 import type { Accounts } from 'types/common'
 
@@ -12,30 +11,6 @@ import Box, { Card } from 'components/base/Box'
 import CalculateBalance from 'components/CalculateBalance'
 import FormattedVal from 'components/base/FormattedVal'
 
-function getTickCountX(selectedTime) {
-  switch (selectedTime) {
-    default:
-    case 'week':
-      return 7
-
-    case 'month':
-      return 10
-
-    case 'year':
-      return 13
-  }
-}
-
-function renderTickX(selectedTime) {
-  let format = 'MMM. D'
-
-  if (selectedTime === 'year') {
-    format = 'MMM.'
-  }
-
-  return t => moment(t).format(format)
-}
-
 type Props = {
   counterValue: string,
   chartColor: string,
@@ -80,9 +55,8 @@ const BalanceSummary = ({
                 color={chartColor}
                 data={allBalances}
                 height={250}
-                nbTicksX={getTickCountX(selectedTime)}
-                renderTickX={renderTickX(selectedTime)}
-                renderTickY={t => formatShort(unit, t)}
+                unit={unit}
+                tickXScale={selectedTime}
                 renderTooltip={d => (
                   <FormattedVal
                     alwaysShowSign={false}

src/components/DashboardPage/AccountCard.js

@@ -91,6 +91,7 @@ const AccountCard = ({
               hideAxis
               interactive={false}
               id={`account-chart-${account.id}`}
+              unit={account.unit}
             />
           </Box>
         )}

src/components/base/NewChart/Tooltip.js

@@ -1,9 +1,12 @@
 // @flow
 
-import React, { Fragment } from 'react'
+import React from 'react'
+
+import type { Unit } from '@ledgerhq/currencies'
 
 import { colors as themeColors } from 'styles/theme'
 import { TooltipContainer } from 'components/base/Tooltip'
+import FormattedVal from 'components/base/FormattedVal'
 
 import type { Item } from './types'
 
@@ -29,7 +32,17 @@ const Arrow = () => (
   </svg>
 )
 
-const Tooltip = ({ d, renderTooltip }: { d: Item, renderTooltip?: Function }) => (
+const Tooltip = ({
+  d,
+  renderTooltip,
+  fiat,
+  unit,
+}: {
+  d: Item,
+  renderTooltip?: Function,
+  fiat?: string,
+  unit?: Unit,
+}) => (
   <div style={{ position: 'relative' }}>
     <div
       style={{
@@ -45,12 +58,14 @@ const Tooltip = ({ d, renderTooltip }: { d: Item, renderTooltip?: Function }) =>
         {renderTooltip ? (
           renderTooltip(d)
         ) : (
-          <Fragment>
-            <div style={{ fontSize: 14 }}>
-              <b>{Math.round(d.value)}</b>
-            </div>
-            <span>{d.date}</span>
-          </Fragment>
+          <FormattedVal
+            alwaysShowSign={false}
+            color="white"
+            showCode
+            fiat={fiat}
+            unit={unit}
+            val={d.value}
+          />
         )}
       </TooltipContainer>
       <div style={{ background: 'red' }}>
@@ -62,6 +77,8 @@ const Tooltip = ({ d, renderTooltip }: { d: Item, renderTooltip?: Function }) =>
 
 Tooltip.defaultProps = {
   renderTooltip: undefined,
+  fiat: undefined,
+  unit: undefined,
 }
 
 export default Tooltip

src/components/base/NewChart/handleMouseEvents.js

@@ -26,7 +26,7 @@ export default function handleMouseEvents({
   renderTooltip?: Function,
 }) {
   const { MARGINS, HEIGHT, WIDTH, NODES, DATA, x, y } = ctx
-  const { hideAxis } = props
+  const { hideAxis, unit } = props
 
   const bisectDate = d3.bisector(d => d.parsedDate).left
 
@@ -93,7 +93,7 @@ export default function handleMouseEvents({
       .html(
         renderToString(
           <ThemeProvider theme={theme}>
-            <Tooltip renderTooltip={renderTooltip} d={d.ref} />
+            <Tooltip unit={unit} renderTooltip={renderTooltip} d={d.ref} />
           </ThemeProvider>,
         ),
       )

src/components/base/NewChart/index.js

@@ -37,6 +37,8 @@ import React, { PureComponent } from 'react'
 import * as d3 from 'd3'
 import noop from 'lodash/noop'
 
+import type { Unit } from '@ledgerhq/currencies'
+
 import refreshNodes from './refreshNodes'
 import refreshDraw from './refreshDraw'
 import handleMouseEvents from './handleMouseEvents'
@@ -46,27 +48,27 @@ import type { Data } from './types'
 
 export type Props = {
   data: Data, // 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
   color?: string, // eslint-disable-line react/no-unused-prop-types
   hideAxis?: boolean, // eslint-disable-line react/no-unused-prop-types
-  interactive?: boolean, // eslint-disable-line react/no-unused-prop-types
-  height: number,
   dateFormat?: string, // eslint-disable-line react/no-unused-prop-types
-  id?: string, // eslint-disable-line react/no-unused-prop-types
-  nbTicksX: number, // eslint-disable-line react/no-unused-prop-types
+  interactive?: boolean, // eslint-disable-line react/no-unused-prop-types
   renderTooltip?: Function, // eslint-disable-line react/no-unused-prop-types
-  renderTickX?: Function, // eslint-disable-line react/no-unused-prop-types
-  renderTickY?: Function, // eslint-disable-line react/no-unused-prop-types
 }
 
 class Chart extends PureComponent<Props> {
   static defaultProps = {
+    id: 'chart',
     color: '#000',
     hideAxis: false,
     interactive: true,
     height: 400,
     dateFormat: '%Y-%m-%d',
-    id: 'chart',
-    nbTicksX: 5,
+    tickXScale: 'month',
   }
 
   componentDidMount() {
@@ -132,7 +134,7 @@ class Chart extends PureComponent<Props> {
       }
 
       // Derived draw variables
-      ctx.HEIGHT = Math.max(0, height - ctx.MARGINS.top - ctx.MARGINS.bottom)
+      ctx.HEIGHT = Math.max(0, (height || 0) - ctx.MARGINS.top - ctx.MARGINS.bottom)
       ctx.WIDTH = Math.max(0, this._width - ctx.MARGINS.left - ctx.MARGINS.right)
 
       // Scales and areas

src/components/base/NewChart/refreshDraw.js

@@ -1,15 +1,41 @@
 // @flow
 
 import * as d3 from 'd3'
+import moment from 'moment'
+import { formatShort } from '@ledgerhq/currencies'
 
 import { colors as themeColors } from 'styles/theme'
 
 import type { Props } from '.'
 import type { CTX } from './types'
 
+const TICK_X_SCALE = {
+  week: 7,
+  month: 10,
+  year: 13,
+  default: 10,
+}
+
+function getTickXCount(tickXScale) {
+  return TICK_X_SCALE[tickXScale] || TICK_X_SCALE.default
+}
+
+const RENDER_TICK_X = {
+  year: 'MMM.',
+  default: 'MMM. D',
+}
+
+function getRenderTickX(selectedTime) {
+  return t => moment(t).format(RENDER_TICK_X[selectedTime] || RENDER_TICK_X.default)
+}
+
 export default function refreshDraw({ ctx, props }: { ctx: CTX, props: Props }) {
   const { NODES, WIDTH, HEIGHT, MARGINS, COLORS, INVALIDATED, DATA, x, y } = ctx
-  const { hideAxis, interactive, renderTickX, renderTickY, nbTicksX } = props
+  const { hideAxis, interactive, tickXScale, unit } = props
+
+  const nbTicksX = getTickXCount(tickXScale)
+  const renderTickX = getRenderTickX(tickXScale)
+  const renderTickY = t => formatShort(unit, t)
 
   const area = d3
     .area()

src/components/base/NewChart/stories.js

@@ -1,6 +1,7 @@
 // @flow
 
 import React, { Component, Fragment } from 'react'
+import { getDefaultUnitByCoinType } from '@ledgerhq/currencies'
 import Chance from 'chance'
 import moment from 'moment'
 import { storiesOf } from '@storybook/react'
@@ -12,6 +13,7 @@ import Chart from 'components/base/NewChart'
 const stories = storiesOf('Components', module)
 
 const data = generateRandomData(365)
+const unit = getDefaultUnitByCoinType(0)
 
 type State = {
   start: number,
@@ -45,7 +47,8 @@ class Wrapper extends Component<any, State> {
           hideAxis={boolean('hideAxis', false)}
           color={color('color', '#5f8ced')}
           data={data.slice(start, stop)}
-          height={number('height', 300, { min: 100, max: 900 })}
+          height={number('height', 300)}
+          unit={unit}
         />
       </Fragment>
     )
@@ -62,7 +65,7 @@ function generateRandomData(n) {
   while (!day.isSame(today)) {
     data.push({
       date: day.format('YYYY-MM-DD'),
-      value: chance.integer({ min: 0, max: 50e3 }),
+      value: chance.integer({ min: 0.5e8, max: 1e8 }),
     })
     day.add(1, 'day')
   }