Polish and retrieve original value from balance history

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

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,

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}

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>

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