From 2484953807bc42cf122d246c13207d05f42552b2 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Tue, 22 May 2018 22:30:00 +0200
Subject: [PATCH 1/4] :art: Chart: Rename `interactive` to `isInteractive`

---
 src/components/DashboardPage/AccountCard.js |  2 +-
 src/components/DevTools.js                  | 20 +-------------------
 src/components/TopBar/ItemContainer.js      |  6 +++---
 src/components/TopBar/index.js              |  4 ++--
 src/components/base/Chart/index.js          | 10 +++++-----
 src/components/base/Chart/refreshDraw.js    |  6 +++---
 src/components/base/Chart/refreshNodes.js   | 10 +++++-----
 src/components/base/Chart/stories.js        |  2 +-
 8 files changed, 21 insertions(+), 39 deletions(-)

diff --git a/src/components/DashboardPage/AccountCard.js b/src/components/DashboardPage/AccountCard.js
index a5fca80e..43502b46 100644
--- a/src/components/DashboardPage/AccountCard.js
+++ b/src/components/DashboardPage/AccountCard.js
@@ -86,7 +86,7 @@ const AccountCard = ({
             color={account.currency.color}
             height={52}
             hideAxis
-            interactive={false}
+            isInteractive={false}
             id={`account-chart-${account.id}`}
             unit={account.unit}
           />
diff --git a/src/components/DevTools.js b/src/components/DevTools.js
index 1e6e1729..9baa004c 100644
--- a/src/components/DevTools.js
+++ b/src/components/DevTools.js
@@ -254,26 +254,8 @@ class DevTools extends PureComponent<any, State> {
                         color="#8884d8"
                         height={50}
                         hideAxis
-                        interactive={false}
+                        isInteractive={false}
                       />
-                      {/* <WrapperChart
-                        height={50}
-                        render={({ height, width }) => (
-                          <VictoryArea
-                            data={cpuUsage[k]}
-                            y="value"
-                            style={{
-                              data: {
-                                stroke: '#8884d8',
-                                fill: '#8884d8',
-                              },
-                            }}
-                            height={height}
-                            width={width}
-                            padding={{ top: 10, right: 0, left: 0, bottom: 0 }}
-                          />
-                        )}
-                      /> */}
                     </Box>
                   </Box>
                 ))}
diff --git a/src/components/TopBar/ItemContainer.js b/src/components/TopBar/ItemContainer.js
index a4019dde..d6b750e4 100644
--- a/src/components/TopBar/ItemContainer.js
+++ b/src/components/TopBar/ItemContainer.js
@@ -8,13 +8,13 @@ export default styled(Box).attrs({
   px: 2,
   ml: 0,
   justifyContent: 'center',
-  cursor: p => (p.interactive ? 'pointer' : 'default'),
+  cursor: p => (p.isInteractive ? 'pointer' : 'default'),
 })`
   opacity: 0.7;
   &:hover {
-    opacity: ${p => (p.interactive ? 0.85 : 0.7)};
+    opacity: ${p => (p.isInteractive ? 0.85 : 0.7)};
   }
   &:active {
-    opacity: ${p => (p.interactive ? 1 : 0.7)};
+    opacity: ${p => (p.isInteractive ? 1 : 0.7)};
   }
 `
diff --git a/src/components/TopBar/index.js b/src/components/TopBar/index.js
index 303e661c..57f2edab 100644
--- a/src/components/TopBar/index.js
+++ b/src/components/TopBar/index.js
@@ -93,7 +93,7 @@ class TopBar extends PureComponent<Props> {
             <Box justifyContent="center">
               <Bar />
             </Box>
-            <ItemContainer interactive onClick={this.navigateToSettings}>
+            <ItemContainer isInteractive onClick={this.navigateToSettings}>
               <IconSettings size={16} />
             </ItemContainer>
             {hasPassword && ( // FIXME this should be a dedicated component. therefore this component don't need to connect()
@@ -101,7 +101,7 @@ class TopBar extends PureComponent<Props> {
                 <Box justifyContent="center">
                   <Bar />
                 </Box>
-                <ItemContainer interactive justifyContent="center" onClick={this.handleLock}>
+                <ItemContainer isInteractive justifyContent="center" onClick={this.handleLock}>
                   <IconLock size={16} />
                 </ItemContainer>
               </Fragment>
diff --git a/src/components/base/Chart/index.js b/src/components/base/Chart/index.js
index b2ec4264..7362b379 100644
--- a/src/components/base/Chart/index.js
+++ b/src/components/base/Chart/index.js
@@ -18,7 +18,7 @@
  *
  *    <Chart
  *      data={data}
- *      interactive       // Handle mouse events, display tooltip etc.
+ *      isInteractive     // Handle mouse events, display tooltip etc.
  *      color="#5f8ced"   // Main color for line, gradient, etc.
  *      height={300}      // Fix height. Width is responsive to container.
  *    />
@@ -56,7 +56,7 @@ export type Props = {
   color?: string, // eslint-disable-line react/no-unused-prop-types
   hideAxis?: boolean, // eslint-disable-line react/no-unused-prop-types
   dateFormat?: string, // eslint-disable-line react/no-unused-prop-types
-  interactive?: boolean, // 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
 }
 
@@ -67,7 +67,7 @@ class Chart extends PureComponent<Props> {
     height: 400,
     hideAxis: false,
     id: 'chart',
-    interactive: true,
+    isInteractive: true,
     tickXScale: 'month',
     unit: undefined,
   }
@@ -113,7 +113,7 @@ class Chart extends PureComponent<Props> {
 
     this.refreshChart = prevProps => {
       const { _node: node, props } = this
-      const { data: raw, color, height, hideAxis, interactive, renderTooltip } = props
+      const { data: raw, color, height, hideAxis, isInteractive, renderTooltip } = props
 
       ctx.DATA = enrichData(raw)
 
@@ -157,7 +157,7 @@ class Chart extends PureComponent<Props> {
 
       // Mouse handler
       mouseHandler && mouseHandler.remove() // eslint-disable-line no-unused-expressions
-      if (interactive) {
+      if (isInteractive) {
         mouseHandler = handleMouseEvents({
           ctx,
           props,
diff --git a/src/components/base/Chart/refreshDraw.js b/src/components/base/Chart/refreshDraw.js
index 2b5381f3..30835ae9 100644
--- a/src/components/base/Chart/refreshDraw.js
+++ b/src/components/base/Chart/refreshDraw.js
@@ -31,7 +31,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, interactive, tickXScale, unit } = props
+  const { hideAxis, isInteractive, tickXScale, unit } = props
 
   const nbTicksX = getTickXCount(tickXScale)
   const renderTickX = getRenderTickX(tickXScale)
@@ -62,7 +62,7 @@ export default function refreshDraw({ ctx, props }: { ctx: CTX, props: Props })
   }
 
   if (INVALIDATED.color) {
-    if (interactive) {
+    if (isInteractive) {
       // Update focus bar colors
       NODES.xBar.attr('stroke', COLORS.focusBar)
       NODES.yBar.attr('stroke', COLORS.focusBar)
@@ -78,7 +78,7 @@ export default function refreshDraw({ ctx, props }: { ctx: CTX, props: Props })
   }
 
   // Hide interactive things
-  if (interactive) {
+  if (isInteractive) {
     NODES.focus.style('opacity', 0)
     NODES.tooltip.style('opacity', 0)
     NODES.xBar.style('opacity', 0)
diff --git a/src/components/base/Chart/refreshNodes.js b/src/components/base/Chart/refreshNodes.js
index 856bba10..d4280ad4 100644
--- a/src/components/base/Chart/refreshNodes.js
+++ b/src/components/base/Chart/refreshNodes.js
@@ -10,7 +10,7 @@ const debug = d('Chart')
 
 export default function refreshNodes({ ctx, node, props }: { ctx: CTX, node: any, props: Props }) {
   const { NODES, COLORS } = ctx
-  const { hideAxis, interactive, id } = props
+  const { hideAxis, isInteractive, id } = props
 
   // Container
 
@@ -26,7 +26,7 @@ export default function refreshNodes({ ctx, node, props }: { ctx: CTX, node: any
 
   // Focus bars
 
-  ensure({ onlyIf: interactive, NODES, key: 'xBar' }, () =>
+  ensure({ onlyIf: isInteractive, NODES, key: 'xBar' }, () =>
     NODES.wrapper
       .append('line')
       .attr('stroke', COLORS.focusBar)
@@ -34,7 +34,7 @@ export default function refreshNodes({ ctx, node, props }: { ctx: CTX, node: any
       .attr('stroke-dasharray', '3, 2'),
   )
 
-  ensure({ onlyIf: interactive, NODES, key: 'yBar' }, () =>
+  ensure({ onlyIf: isInteractive, NODES, key: 'yBar' }, () =>
     NODES.wrapper
       .append('line')
       .attr('stroke', COLORS.focusBar)
@@ -84,7 +84,7 @@ export default function refreshNodes({ ctx, node, props }: { ctx: CTX, node: any
 
   // Tooltip & focus point
 
-  ensure({ onlyIf: interactive, NODES, key: 'tooltip' }, () =>
+  ensure({ onlyIf: isInteractive, NODES, key: 'tooltip' }, () =>
     d3
       .select(node)
       .append('div')
@@ -94,7 +94,7 @@ export default function refreshNodes({ ctx, node, props }: { ctx: CTX, node: any
       .style('pointer-events', 'none'),
   )
 
-  ensure({ onlyIf: interactive, NODES, key: 'focus' }, () =>
+  ensure({ onlyIf: isInteractive, NODES, key: 'focus' }, () =>
     NODES.wrapper
       .append('g')
       .append('circle')
diff --git a/src/components/base/Chart/stories.js b/src/components/base/Chart/stories.js
index 5f0c4076..79a90f08 100644
--- a/src/components/base/Chart/stories.js
+++ b/src/components/base/Chart/stories.js
@@ -43,7 +43,7 @@ class Wrapper extends Component<any, State> {
         />
 
         <Chart
-          interactive={boolean('interactive', true)}
+          isInteractive={boolean('isInteractive', true)}
           hideAxis={boolean('hideAxis', false)}
           color={color('color', '#5f8ced')}
           data={data.slice(start, stop)}

From 09d001798a0fd10eb2301ec818d6424b7d45eb5f Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Wed, 23 May 2018 12:06:08 +0200
Subject: [PATCH 2/4] Re-style Chart tooltip, retrieve its data correctly

---
 src/components/BalanceSummary/index.js        | 32 ++++---
 src/components/DashboardPage/AccountCard.js   |  2 +-
 src/components/base/Chart/Tooltip.js          | 95 +++++++++----------
 .../base/Chart/handleMouseEvents.js           | 35 +++----
 src/components/base/Chart/helpers.js          |  2 +-
 src/components/base/Chart/index.js            |  5 +-
 src/components/base/Chart/refreshDraw.js      |  4 +-
 src/components/base/Chart/refreshNodes.js     | 15 +--
 src/components/base/Chart/stories.js          | 36 ++++---
 9 files changed, 109 insertions(+), 117 deletions(-)

diff --git a/src/components/BalanceSummary/index.js b/src/components/BalanceSummary/index.js
index 17bd93ef..f0edf2b5 100644
--- a/src/components/BalanceSummary/index.js
+++ b/src/components/BalanceSummary/index.js
@@ -35,7 +35,8 @@ const BalanceSummary = ({
   renderHeader,
   selectedTime,
 }: Props) => {
-  const unit = getFiatCurrencyByTicker(counterValue).units[0]
+  const currency = getFiatCurrencyByTicker(counterValue)
+  const account = accounts.length === 1 ? accounts[0] : null
   return (
     <Card p={0} py={6}>
       <CalculateBalance
@@ -61,21 +62,28 @@ const BalanceSummary = ({
               <Box ff="Open Sans" fontSize={4} color="graphite" pt={6}>
                 <Chart
                   id={chartId}
+                  account={account}
                   color={chartColor}
                   data={balanceHistory}
                   height={250}
-                  unit={unit}
+                  currency={currency}
                   tickXScale={selectedTime}
-                  renderTooltip={d =>
-                    isAvailable ? (
-                      <FormattedVal
-                        alwaysShowSign={false}
-                        color="white"
-                        showCode
-                        fiat={counterValue}
-                        val={d.value}
-                      />
-                    ) : null
+                  renderTooltip={
+                    isAvailable && !account
+                      ? d => (
+                          <Fragment>
+                            <FormattedVal
+                              alwaysShowSign={false}
+                              fontSize={5}
+                              color="dark"
+                              showCode
+                              fiat={counterValue}
+                              val={d.value}
+                            />
+                            <Box mt="auto">{d.date.toISOString().substr(0, 10)}</Box>
+                          </Fragment>
+                        )
+                      : null
                   }
                 />
               </Box>
diff --git a/src/components/DashboardPage/AccountCard.js b/src/components/DashboardPage/AccountCard.js
index 43502b46..62f6d608 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}`}
-            unit={account.unit}
+            account={account}
           />
         </Box>
       )}
diff --git a/src/components/base/Chart/Tooltip.js b/src/components/base/Chart/Tooltip.js
index 54cc7900..7ea0e93f 100644
--- a/src/components/base/Chart/Tooltip.js
+++ b/src/components/base/Chart/Tooltip.js
@@ -1,47 +1,37 @@
 // @flow
 
-import React from 'react'
+import React, { Fragment } from 'react'
+import styled from 'styled-components'
 
-import type { Unit } from '@ledgerhq/live-common/lib/types'
+import type { Account } from '@ledgerhq/live-common/lib/types'
 
-import { colors as themeColors } from 'styles/theme'
-import { TooltipContainer } from 'components/base/Tooltip'
+import CounterValue from 'components/CounterValue'
 import FormattedVal from 'components/base/FormattedVal'
+import Box from 'components/base/Box'
 
 import type { Item } from './types'
 
-/**
- * we use inline style for more perfs, as tooltip may re-render numerous times
- */
-
-const Arrow = () => (
-  <svg
-    style={{
-      display: 'block',
-      position: 'absolute',
-      left: '50%',
-      bottom: 0,
-      marginBottom: -10,
-      transform: 'translate(-50%, 0)',
-    }}
-    viewBox="0 0 14 6.2"
-    width={16}
-    height={16}
-  >
-    <path fill={themeColors.dark} d="m14 0-5.5 5.6c-0.8 0.8-2 0.8-2.8 0l-5.7-5.6" />
-  </svg>
-)
+const Container = styled(Box).attrs({
+  px: 4,
+  py: 3,
+  align: 'center',
+})`
+  background: white;
+  border: 1px solid #d8d8d8;
+  border-radius: 4px;
+  width: 150px;
+  height: 90px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.03);
+`
 
 const Tooltip = ({
-  d,
+  item,
   renderTooltip,
-  fiat,
-  unit,
+  account,
 }: {
-  d: Item,
+  item: Item,
   renderTooltip?: Function,
-  fiat?: string,
-  unit?: Unit,
+  account: Account,
 }) => (
   <div style={{ position: 'relative' }}>
     <div
@@ -51,32 +41,37 @@ const Tooltip = ({
         left: 0,
         transform: `translate3d(-50%, 0, 0)`,
         whiteSpace: 'nowrap',
-        marginBottom: 5,
+        marginBottom: -5,
       }}
     >
-      <TooltipContainer style={{ textAlign: 'center' }}>
+      <Container style={{ textAlign: 'center' }}>
         {renderTooltip ? (
-          renderTooltip(d)
+          renderTooltip(item)
         ) : (
-          <FormattedVal
-            alwaysShowSign={false}
-            color="white"
-            showCode
-            fiat={fiat}
-            unit={unit}
-            val={d.value}
-          />
+          <Fragment>
+            <FormattedVal
+              color="dark"
+              fontSize={5}
+              alwaysShowSign={false}
+              showCode
+              unit={account.currency.units[0]}
+              val={item.value}
+            />
+            <CounterValue
+              account={account}
+              currency={account.currency}
+              value={item.value}
+              disableRounding
+              showCode
+            />
+            <Box ff="Open Sans|Regular" color="grey" fontSize={3} mt="auto">
+              {item.date.toISOString().substr(0, 10)}
+            </Box>
+          </Fragment>
         )}
-      </TooltipContainer>
-      <Arrow />
+      </Container>
     </div>
   </div>
 )
 
-Tooltip.defaultProps = {
-  renderTooltip: undefined,
-  fiat: undefined,
-  unit: undefined,
-}
-
 export default Tooltip
diff --git a/src/components/base/Chart/handleMouseEvents.js b/src/components/base/Chart/handleMouseEvents.js
index 9f39e8c3..b30c7742 100644
--- a/src/components/base/Chart/handleMouseEvents.js
+++ b/src/components/base/Chart/handleMouseEvents.js
@@ -29,7 +29,7 @@ export default function handleMouseEvents({
   renderTooltip?: Function,
 }) {
   const { MARGINS, HEIGHT, WIDTH, NODES, DATA, x, y } = ctx
-  const { hideAxis, unit } = props
+  const { account } = props
 
   const bisectDate = d3.bisector(d => d.parsedDate).left
 
@@ -65,21 +65,15 @@ export default function handleMouseEvents({
     NODES.tooltip
       .style('transition', '100ms cubic-bezier(.61,1,.53,1) opacity')
       .style('opacity', 1)
-      .style('transform', `translate3d(${MARGINS.left + x(d.parsedDate)}px, ${y(d.value)}px, 0)`)
+      .style('transform', `translate3d(${MARGINS.left + x(d.parsedDate)}px, 0, 0)`)
     NODES.focus.style('opacity', 1)
-    if (!hideAxis) {
-      NODES.xBar.style('opacity', 1)
-      NODES.yBar.style('opacity', 1)
-    }
+    NODES.xBar.style('opacity', 1)
   }
 
   function mouseOut() {
     NODES.tooltip.style('opacity', 0).style('transition', '100ms linear opacity')
     NODES.focus.style('opacity', 0)
-    if (!hideAxis) {
-      NODES.xBar.style('opacity', 0)
-      NODES.yBar.style('opacity', 0)
-    }
+    NODES.xBar.style('opacity', 0)
   }
 
   function mouseMove() {
@@ -97,24 +91,17 @@ export default function handleMouseEvents({
         renderToString(
           <Provider store={createStore({})}>
             <ThemeProvider theme={theme}>
-              <Tooltip unit={unit} renderTooltip={renderTooltip} d={d.ref} />
+              <Tooltip account={account} renderTooltip={renderTooltip} item={d.ref} />
             </ThemeProvider>
           </Provider>,
         ),
       )
-      .style('transform', `translate3d(${MARGINS.left + x(d.parsedDate)}px, ${y(d.value)}px, 0)`)
-    if (!hideAxis) {
-      NODES.xBar
-        .attr('x1', x(d.parsedDate))
-        .attr('x2', x(d.parsedDate))
-        .attr('y1', HEIGHT)
-        .attr('y2', y(d.value))
-      NODES.yBar
-        .attr('x1', 0)
-        .attr('x2', x(d.parsedDate))
-        .attr('y1', y(d.value))
-        .attr('y2', y(d.value))
-    }
+      .style('transform', `translate3d(${MARGINS.left + x(d.parsedDate)}px, 0, 0)`)
+    NODES.xBar
+      .attr('x1', x(d.parsedDate))
+      .attr('x2', x(d.parsedDate))
+      .attr('y1', 0)
+      .attr('y2', HEIGHT)
   }
 
   return node
diff --git a/src/components/base/Chart/helpers.js b/src/components/base/Chart/helpers.js
index 6f0256c7..3505fba9 100644
--- a/src/components/base/Chart/helpers.js
+++ b/src/components/base/Chart/helpers.js
@@ -16,7 +16,7 @@ export function generateColors(color) {
     focus: color,
     gradientStart: cColor.fade(0.7),
     gradientStop: cColor.fade(1),
-    focusBar: cColor.fade(0.5),
+    focusBar: '#d8d8d8',
   }
 }
 
diff --git a/src/components/base/Chart/index.js b/src/components/base/Chart/index.js
index 7362b379..21cba1b6 100644
--- a/src/components/base/Chart/index.js
+++ b/src/components/base/Chart/index.js
@@ -37,7 +37,7 @@ import React, { PureComponent } from 'react'
 import * as d3 from 'd3'
 import noop from 'lodash/noop'
 
-import type { Unit } from '@ledgerhq/live-common/lib/types'
+import type { Account } from '@ledgerhq/live-common/lib/types'
 
 import refreshNodes from './refreshNodes'
 import refreshDraw from './refreshDraw'
@@ -48,7 +48,7 @@ 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
+  account?: Account, // eslint-disable-line react/no-unused-prop-types
 
   id?: string, // eslint-disable-line react/no-unused-prop-types
   height?: number,
@@ -69,7 +69,6 @@ class Chart extends PureComponent<Props> {
     id: 'chart',
     isInteractive: true,
     tickXScale: 'month',
-    unit: undefined,
   }
 
   componentDidMount() {
diff --git a/src/components/base/Chart/refreshDraw.js b/src/components/base/Chart/refreshDraw.js
index 30835ae9..188b5913 100644
--- a/src/components/base/Chart/refreshDraw.js
+++ b/src/components/base/Chart/refreshDraw.js
@@ -65,9 +65,8 @@ export default function refreshDraw({ ctx, props }: { ctx: CTX, props: Props })
     if (isInteractive) {
       // Update focus bar colors
       NODES.xBar.attr('stroke', COLORS.focusBar)
-      NODES.yBar.attr('stroke', COLORS.focusBar)
       // Update dot color
-      NODES.focus.attr('fill', COLORS.focus)
+      NODES.focus.attr('stroke', COLORS.focus)
     }
     // Update gradient color
     NODES.gradientStart.attr('stop-color', COLORS.gradientStart)
@@ -82,7 +81,6 @@ export default function refreshDraw({ ctx, props }: { ctx: CTX, props: Props })
     NODES.focus.style('opacity', 0)
     NODES.tooltip.style('opacity', 0)
     NODES.xBar.style('opacity', 0)
-    NODES.yBar.style('opacity', 0)
   }
 
   // Draw axis
diff --git a/src/components/base/Chart/refreshNodes.js b/src/components/base/Chart/refreshNodes.js
index d4280ad4..3fde2f95 100644
--- a/src/components/base/Chart/refreshNodes.js
+++ b/src/components/base/Chart/refreshNodes.js
@@ -30,16 +30,7 @@ export default function refreshNodes({ ctx, node, props }: { ctx: CTX, node: any
     NODES.wrapper
       .append('line')
       .attr('stroke', COLORS.focusBar)
-      .attr('stroke-width', '1px')
-      .attr('stroke-dasharray', '3, 2'),
-  )
-
-  ensure({ onlyIf: isInteractive, NODES, key: 'yBar' }, () =>
-    NODES.wrapper
-      .append('line')
-      .attr('stroke', COLORS.focusBar)
-      .attr('stroke-width', '1px')
-      .attr('stroke-dasharray', '3, 2'),
+      .attr('stroke-width', '1px'),
   )
 
   // Gradient
@@ -98,7 +89,9 @@ export default function refreshNodes({ ctx, node, props }: { ctx: CTX, node: any
     NODES.wrapper
       .append('g')
       .append('circle')
-      .attr('fill', COLORS.focus)
+      .attr('fill', 'white')
+      .attr('stroke', COLORS.focus)
+      .attr('stroke-width', 2)
       .attr('r', 4),
   )
 
diff --git a/src/components/base/Chart/stories.js b/src/components/base/Chart/stories.js
index 79a90f08..8b26d3d6 100644
--- a/src/components/base/Chart/stories.js
+++ b/src/components/base/Chart/stories.js
@@ -9,11 +9,15 @@ import { boolean, number } from '@storybook/addon-knobs'
 import { color } from '@storybook/addon-knobs/react'
 
 import Chart from 'components/base/Chart'
+import Box from 'components/base/Box'
 
 const stories = storiesOf('Components/base', module)
 
 const data = generateRandomData(365)
-const unit = getCryptoCurrencyById('bitcoin').units[0]
+const currency = getCryptoCurrencyById('bitcoin')
+const fakeAccount = {
+  currency,
+}
 
 type State = {
   start: number,
@@ -32,23 +36,31 @@ class Wrapper extends Component<any, State> {
     const { start, stop } = this.state
     return (
       <Fragment>
-        <input type="range" value={start} onChange={this.handleChange('start')} min={0} max={365} />
-        <input
-          type="range"
-          value={stop}
-          style={{ marginLeft: 10 }}
-          onChange={this.handleChange('stop')}
-          min={0}
-          max={365}
-        />
+        <Box mb={8} horizontal>
+          <input
+            type="range"
+            value={start}
+            onChange={this.handleChange('start')}
+            min={0}
+            max={365}
+          />
+          <input
+            type="range"
+            value={stop}
+            style={{ marginLeft: 10 }}
+            onChange={this.handleChange('stop')}
+            min={0}
+            max={365}
+          />
+        </Box>
 
         <Chart
           isInteractive={boolean('isInteractive', true)}
-          hideAxis={boolean('hideAxis', false)}
+          hideAxis={boolean('hideAxis', true)}
           color={color('color', '#5f8ced')}
           data={data.slice(start, stop)}
           height={number('height', 300)}
-          unit={unit}
+          account={fakeAccount}
         />
       </Fragment>
     )

From 8a7d54e149ec8adc097ada6e5118a9a0a542760e Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Thu, 24 May 2018 12:39:57 +0200
Subject: [PATCH 3/4] Polish and retrieve original value from balance history

---
 src/components/BalanceSummary/index.js         |  4 +++-
 src/components/CalculateBalance.js             | 14 ++++++++++++++
 src/components/CounterValue/index.js           |  4 +++-
 src/components/base/Chart/Tooltip.js           | 17 ++++++++---------
 src/components/base/Chart/handleMouseEvents.js |  2 +-
 5 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/components/BalanceSummary/index.js b/src/components/BalanceSummary/index.js
index f0edf2b5..d17c6bcb 100644
--- a/src/components/BalanceSummary/index.js
+++ b/src/components/BalanceSummary/index.js
@@ -80,7 +80,9 @@ const BalanceSummary = ({
                               fiat={counterValue}
                               val={d.value}
                             />
-                            <Box mt="auto">{d.date.toISOString().substr(0, 10)}</Box>
+                            <Box ff="Open Sans|Regular" color="grey" fontSize={3} mt={2}>
+                              {d.date.toISOString().substr(0, 10)}
+                            </Box>
                           </Fragment>
                         )
                       : null
diff --git a/src/components/CalculateBalance.js b/src/components/CalculateBalance.js
index 7c4337ce..4f430e45 100644
--- a/src/components/CalculateBalance.js
+++ b/src/components/CalculateBalance.js
@@ -26,10 +26,18 @@ type Props = OwnProps & {
 const mapStateToProps = (state: State, props: OwnProps) => {
   const counterValueCurrency = counterValueCurrencySelector(state)
   let isAvailable = true
+
+  // create array of original values, used to reconciliate
+  // with counter values after calculation
+  const originalValues = []
+
   const balanceHistory = getBalanceHistorySum(
     props.accounts,
     props.daysCount,
     (account, value, date) => {
+      // keep track of original value
+      originalValues.push(value)
+
       const cv = CounterValues.calculateSelector(state, {
         value,
         date,
@@ -44,6 +52,12 @@ const mapStateToProps = (state: State, props: OwnProps) => {
       return cv
     },
   )
+
+  // reconciliate balance history with original values
+  balanceHistory.forEach((item, i) => {
+    item.originalValue = originalValues[i] || 0
+  })
+
   return {
     isAvailable,
     balanceHistory,
diff --git a/src/components/CounterValue/index.js b/src/components/CounterValue/index.js
index 4b46b8a9..1874ee01 100644
--- a/src/components/CounterValue/index.js
+++ b/src/components/CounterValue/index.js
@@ -49,7 +49,9 @@ const mapStateToProps = (state: State, props: OwnProps) => {
 class CounterValue extends PureComponent<Props> {
   render() {
     const { value, counterValueCurrency, date, ...props } = this.props
-    if (!value && value !== 0) return null
+    if (!value && value !== 0) {
+      return null
+    }
     return (
       <FormattedVal
         val={value}
diff --git a/src/components/base/Chart/Tooltip.js b/src/components/base/Chart/Tooltip.js
index 7ea0e93f..bbbe9ac1 100644
--- a/src/components/base/Chart/Tooltip.js
+++ b/src/components/base/Chart/Tooltip.js
@@ -5,7 +5,6 @@ import styled from 'styled-components'
 
 import type { Account } from '@ledgerhq/live-common/lib/types'
 
-import CounterValue from 'components/CounterValue'
 import FormattedVal from 'components/base/FormattedVal'
 import Box from 'components/base/Box'
 
@@ -20,7 +19,6 @@ const Container = styled(Box).attrs({
   border: 1px solid #d8d8d8;
   border-radius: 4px;
   width: 150px;
-  height: 90px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.03);
 `
 
@@ -54,17 +52,18 @@ const Tooltip = ({
               fontSize={5}
               alwaysShowSign={false}
               showCode
-              unit={account.currency.units[0]}
+              fiat="USD"
               val={item.value}
             />
-            <CounterValue
-              account={account}
-              currency={account.currency}
-              value={item.value}
-              disableRounding
+            <FormattedVal
+              color="grey"
+              fontSize={3}
+              alwaysShowSign={false}
               showCode
+              unit={account.unit}
+              val={item.originalValue}
             />
-            <Box ff="Open Sans|Regular" color="grey" fontSize={3} mt="auto">
+            <Box ff="Open Sans|Regular" color="grey" fontSize={3} mt={2}>
               {item.date.toISOString().substr(0, 10)}
             </Box>
           </Fragment>
diff --git a/src/components/base/Chart/handleMouseEvents.js b/src/components/base/Chart/handleMouseEvents.js
index b30c7742..9809b066 100644
--- a/src/components/base/Chart/handleMouseEvents.js
+++ b/src/components/base/Chart/handleMouseEvents.js
@@ -100,7 +100,7 @@ export default function handleMouseEvents({
     NODES.xBar
       .attr('x1', x(d.parsedDate))
       .attr('x2', x(d.parsedDate))
-      .attr('y1', 0)
+      .attr('y1', -30) // ensure that xbar is covered
       .attr('y2', HEIGHT)
   }
 

From 27185fc8efed3180c17f48fc09cb4a9072e42c65 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Thu, 24 May 2018 15:44:35 +0200
Subject: [PATCH 4/4] Fix flow

---
 src/components/BalanceSummary/index.js   |  4 ++--
 src/components/CalculateBalance.js       | 18 +++++++++++-------
 src/components/base/Chart/Tooltip.js     | 20 +++++++++++---------
 src/components/base/Chart/refreshDraw.js |  4 ++--
 src/components/base/Chart/stories.js     |  6 +++++-
 src/components/base/Chart/types.js       |  1 +
 6 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/src/components/BalanceSummary/index.js b/src/components/BalanceSummary/index.js
index d17c6bcb..0a032cf3 100644
--- a/src/components/BalanceSummary/index.js
+++ b/src/components/BalanceSummary/index.js
@@ -36,7 +36,7 @@ const BalanceSummary = ({
   selectedTime,
 }: Props) => {
   const currency = getFiatCurrencyByTicker(counterValue)
-  const account = accounts.length === 1 ? accounts[0] : null
+  const account = accounts.length === 1 ? accounts[0] : undefined
   return (
     <Card p={0} py={6}>
       <CalculateBalance
@@ -85,7 +85,7 @@ const BalanceSummary = ({
                             </Box>
                           </Fragment>
                         )
-                      : null
+                      : undefined
                   }
                 />
               </Box>
diff --git a/src/components/CalculateBalance.js b/src/components/CalculateBalance.js
index 4f430e45..fb544402 100644
--- a/src/components/CalculateBalance.js
+++ b/src/components/CalculateBalance.js
@@ -4,7 +4,7 @@
 import { PureComponent } from 'react'
 import { connect } from 'react-redux'
 
-import type { Account, BalanceHistory } from '@ledgerhq/live-common/lib/types'
+import type { Account } from '@ledgerhq/live-common/lib/types'
 import { getBalanceHistorySum } from '@ledgerhq/live-common/lib/helpers/account'
 import CounterValues from 'helpers/countervalues'
 import { exchangeSettingsForAccountSelector, counterValueCurrencySelector } from 'reducers/settings'
@@ -16,8 +16,14 @@ type OwnProps = {
   children: Props => *,
 }
 
+type Item = {
+  date: Date,
+  value: number,
+  originalValue: number,
+}
+
 type Props = OwnProps & {
-  balanceHistory: BalanceHistory,
+  balanceHistory: Item[],
   balanceStart: number,
   balanceEnd: number,
   isAvailable: boolean,
@@ -51,13 +57,11 @@ const mapStateToProps = (state: State, props: OwnProps) => {
       }
       return cv
     },
+  ).map((item, i) =>
+    // reconciliate balance history with original values
+    ({ ...item, originalValue: originalValues[i] || 0 }),
   )
 
-  // reconciliate balance history with original values
-  balanceHistory.forEach((item, i) => {
-    item.originalValue = originalValues[i] || 0
-  })
-
   return {
     isAvailable,
     balanceHistory,
diff --git a/src/components/base/Chart/Tooltip.js b/src/components/base/Chart/Tooltip.js
index bbbe9ac1..ef97bc25 100644
--- a/src/components/base/Chart/Tooltip.js
+++ b/src/components/base/Chart/Tooltip.js
@@ -29,7 +29,7 @@ const Tooltip = ({
 }: {
   item: Item,
   renderTooltip?: Function,
-  account: Account,
+  account?: Account,
 }) => (
   <div style={{ position: 'relative' }}>
     <div
@@ -55,14 +55,16 @@ const Tooltip = ({
               fiat="USD"
               val={item.value}
             />
-            <FormattedVal
-              color="grey"
-              fontSize={3}
-              alwaysShowSign={false}
-              showCode
-              unit={account.unit}
-              val={item.originalValue}
-            />
+            {account && (
+              <FormattedVal
+                color="grey"
+                fontSize={3}
+                alwaysShowSign={false}
+                showCode
+                unit={account.unit}
+                val={item.originalValue}
+              />
+            )}
             <Box ff="Open Sans|Regular" color="grey" fontSize={3} mt={2}>
               {item.date.toISOString().substr(0, 10)}
             </Box>
diff --git a/src/components/base/Chart/refreshDraw.js b/src/components/base/Chart/refreshDraw.js
index 188b5913..eac16978 100644
--- a/src/components/base/Chart/refreshDraw.js
+++ b/src/components/base/Chart/refreshDraw.js
@@ -31,11 +31,11 @@ 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, unit } = props
+  const { hideAxis, isInteractive, tickXScale, account } = props
 
   const nbTicksX = getTickXCount(tickXScale)
   const renderTickX = getRenderTickX(tickXScale)
-  const renderTickY = t => (unit ? formatShort(unit, t) : t)
+  const renderTickY = t => (account ? formatShort(account.unit, t) : t)
 
   const area = d3
     .area()
diff --git a/src/components/base/Chart/stories.js b/src/components/base/Chart/stories.js
index 8b26d3d6..e1f4e704 100644
--- a/src/components/base/Chart/stories.js
+++ b/src/components/base/Chart/stories.js
@@ -15,6 +15,8 @@ const stories = storiesOf('Components/base', module)
 
 const data = generateRandomData(365)
 const currency = getCryptoCurrencyById('bitcoin')
+
+// $FlowFixMe
 const fakeAccount = {
   currency,
 }
@@ -75,9 +77,11 @@ function generateRandomData(n) {
   const data = []
   const chance = new Chance()
   while (!day.isSame(today)) {
+    const value = chance.integer({ min: 0.5e8, max: 1e8 })
     data.push({
       date: day.toDate(),
-      value: chance.integer({ min: 0.5e8, max: 1e8 }),
+      value,
+      originalValue: value,
     })
     day.add(1, 'day')
   }
diff --git a/src/components/base/Chart/types.js b/src/components/base/Chart/types.js
index 0c22e948..7446ab14 100644
--- a/src/components/base/Chart/types.js
+++ b/src/components/base/Chart/types.js
@@ -3,6 +3,7 @@
 export type Item = {
   date: Date,
   value: number,
+  originalValue: number,
 }
 
 type EnrichedItem = {