Fix Tooltip

src/components/BalanceSummary/index.js

@@ -3,7 +3,7 @@
 import React, { Fragment } from 'react'
 import moment from 'moment'
 
-import { formatShort, formatCurrencyUnit, getFiatUnit } from '@ledgerhq/currencies'
+import { formatShort, getFiatUnit } from '@ledgerhq/currencies'
 
 import type { Accounts } from 'types/common'
 
@@ -12,6 +12,7 @@ import { space } from 'styles/theme'
 import { AreaChart } from 'components/base/Chart'
 import Box, { Card } from 'components/base/Box'
 import CalculateBalance from 'components/CalculateBalance'
+import FormattedVal from 'components/base/FormattedVal'
 
 function getTickCountX(selectedTime) {
   switch (selectedTime) {
@@ -88,11 +89,16 @@ const BalanceSummary = ({
                   right: space[6],
                 }}
                 strokeWidth={2}
-                renderLabels={d =>
+                renderLabels={d => d.y}
-                  formatCurrencyUnit(unit, d.y * 100, {
+                renderTooltip={d => (
-                    showCode: true,
+                  <FormattedVal
-                  })
+                    alwaysShowSign={false}
-                }
+                    color="white"
+                    showCode
+                    fiat={counterValue}
+                    val={d}
+                  />
+                )}
                 renderTickX={renderTickX(selectedTime)}
                 renderTickY={t => formatShort(unit, t)}
                 tickCountX={getTickCountX(selectedTime)}

src/components/base/Chart/index.js

@@ -13,6 +13,7 @@ import VictoryVoronoiContainer from 'victory-chart/lib/components/containers/vic
 import { space, colors, fontSizes } from 'styles/theme'
 
 import Box from 'components/base/Box'
+import Text from 'components/base/Text'
 import { TooltipContainer } from 'components/base/Tooltip'
 
 const ANIMATION_DURATION = 600
@@ -121,7 +122,7 @@ class CustomTooltip extends Component<Object> {
   }
 
   render() {
-    const { x, y, active, text, datum } = this.props
+    const { x, y, active, text, datum, renderer } = this.props
 
     if (!active) {
       return null
@@ -133,7 +134,7 @@ class CustomTooltip extends Component<Object> {
           mt={-space[1]}
           style={{ position: 'absolute', top: y, left: x, transform: `translate3d(-50%, 0, 0)` }}
         >
-          {text(datum)}
+          <Text style={{ lineHeight: 1 }}>{renderer(text(datum))}</Text>
         </TooltipContainer>
       </foreignObject>
     )
@@ -151,13 +152,6 @@ type GenericChart = {
   color: string,
   data: Array<Object>,
 }
-type Chart = GenericChart & {
-  renderLabels: Function,
-  renderTickX: Function,
-  renderTickY: Function,
-  tickCountX: number,
-  tickCountY: number,
-}
 
 export const SimpleAreaChart = ({
   linearGradient,
@@ -208,7 +202,14 @@ SimpleAreaChart.defaultProps = {
   ...DEFAULT_PROPS,
 }
 
-const areaChartTooltip = <CustomTooltip />
+type Chart = GenericChart & {
+  renderLabels: Function,
+  renderTickX: Function,
+  renderTickY: Function,
+  renderTooltip: Function,
+  tickCountX: number,
+  tickCountY: number,
+}
 
 const AreaChartContainer = <VictoryVoronoiContainer voronoiDimension="x" />
 
@@ -224,6 +225,8 @@ export class AreaChart extends PureComponent<Chart> {
     ...DEFAULT_PROPS,
   }
 
+  _tooltip = <CustomTooltip renderer={this.props.renderTooltip} />
+
   render() {
     const {
       color,
@@ -302,7 +305,7 @@ export class AreaChart extends PureComponent<Chart> {
                 data={data}
                 x="name"
                 y="value"
-                labelComponent={areaChartTooltip}
+                labelComponent={this._tooltip}
                 labels={renderLabels}
                 style={{
                   data: {