fix: Tooltip is rendered as part of the SVG

It uses the same coordinates system as the rest of the graph which will remove discrepancies
cozy · Sep 10, 2019 · af97784 · af97784
1 parent e8d8f1c
commit af97784
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 79 deletions.
diff --git a/src/components/Chart/LineChart.jsx b/src/components/Chart/LineChart.jsx
@@ -3,7 +3,13 @@ import PropTypes from 'prop-types'
 import * as d3 from 'utils/d3'
 import { max, minBy, keyBy, memoize } from 'lodash'
 import styles from 'components/Chart/LineChart.styl'
-import Tooltip from 'components/Chart/Tooltip'
+
+// TODO replace by import { getCSSVariableValue } from 'cozy-ui/transpiled/utils/colors'
+// when https://github.com/cozy/cozy-ui/issues/1153 is solved
+const getCSSPropertyValue = memoize(varName => {
+  const computedStyle = getComputedStyle(document.body)
+  return computedStyle.getPropertyValue(varName)
+})
 
 class LineChart extends Component {
   constructor(props) {
@@ -70,6 +76,7 @@ class LineChart extends Component {
     this.createPointLine()
     this.createLine()
     this.createPoint()
+    this.createTooltip()
     this.createAxis()
   }
 
@@ -79,6 +86,7 @@ class LineChart extends Component {
     this.updateGradient()
     this.updateAxis()
     this.updateLine()
+    this.updateTooltip()
   }
 
   /**
@@ -275,6 +283,49 @@ class LineChart extends Component {
       .call(drag.on('end', this.stopPointDrag))
   }
 
+  createTooltip() {
+    this.tooltip = this.svg.append('g')
+    this.tooltipBg = this.tooltip.append('rect')
+    this.tooltipArrow = this.tooltip
+      .append('polygon')
+      .attr('points', '-5,6  5,6 0,12')
+      .attr('fill', getCSSPropertyValue('--historyTooltipBackgroundColor'))
+    this.tooltipText = this.tooltip
+      .append('text')
+      .attr('fill', getCSSPropertyValue('--historyTooltipTextColor'))
+      .attr('style', 'font-size: 0.6875rem; font-family: Lato')
+    this.tooltip.attr('style', 'opacity: 0')
+  }
+
+  updateTooltip() {
+    const item = this.getSelectedItem()
+    const x = this.x(item.x)
+    const y = -10
+    this.tooltip.attr('transform', `translate(${x}, ${y})`)
+
+    const tspans = this.props.getTooltipContent(item)
+    this.tooltipText.selectAll('*').remove()
+
+    tspans.forEach(tspan => {
+      this.tooltipText
+        .append('tspan')
+        .text(tspan.content + ' ')
+        .attr('style', tspan.style)
+    })
+    const tl = this.tooltipText.node().getComputedTextLength()
+
+    const switchOrientation = x < tl
+
+    const rectPadding = { h: 5, v: 5 }
+    this.tooltipBg
+      .attr('x', switchOrientation ? -rectPadding.h : -tl - rectPadding.h)
+      .attr('y', y - 2)
+      .attr('width', tl + rectPadding.h * 2)
+      .attr('height', '18px')
+
+    this.tooltipText.attr('text-anchor', switchOrientation ? 'start' : 'end')
+  }
+
   updatePoint() {
     const item = this.getSelectedItem()
     const x = this.x(item.x)
@@ -413,6 +464,12 @@ class LineChart extends Component {
             .duration(400)
             .ease(d3.easeExpIn)
             .attr('opacity', 1)
+
+          this.tooltip
+            .transition()
+            .duration(200)
+            .ease(d3.easeLinear)
+            .style('opacity', 1)
         }
 
         this.line.attr('stroke-dasharray', null)
@@ -441,6 +498,7 @@ class LineChart extends Component {
 
     this.updatePoint()
     this.updatePointLine()
+    this.updateTooltip()
   }
 
   startPointDrag = () => {
@@ -468,22 +526,10 @@ class LineChart extends Component {
   }
 
   render() {
-    const { width, height, gradient, margin, getTooltipContent } = this.props
-
-    const selectedItem = this.getSelectedItem()
-    const itemX = this.x(selectedItem.x)
-
-    const isLeftPosition = itemX < width / 2
-    const position = isLeftPosition ? 'left' : 'right'
-    const tooltipX = (isLeftPosition ? 0 : -width) + itemX + margin.left
+    const { width, height, gradient } = this.props
 
     return (
       <div className={styles.LineChart}>
-        {selectedItem && getTooltipContent && (
-          <Tooltip x={tooltipX} position={position}>
-            {getTooltipContent(selectedItem)}
-          </Tooltip>
-        )}
         <svg
           ref={node => (this.root = node)}
           width={width}

diff --git a/src/components/Chart/Tooltip.jsx b/src/components/Chart/Tooltip.jsx
diff --git a/src/components/Chart/Tooltip.styl b/src/components/Chart/Tooltip.styl
diff --git a/src/ducks/balance/History.styl b/src/ducks/balance/History.styl
@@ -14,6 +14,3 @@
     border-left 1px solid var(--historyTooltipTextColor)
     padding-left 4px
     margin-left 4px
-
-.Balance_blur
-    filter blur(4px)
diff --git a/src/ducks/balance/HistoryChart.jsx b/src/ducks/balance/HistoryChart.jsx
@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react'
+import React, { Component } from 'react'
 import * as d3 from 'utils/d3'
 import { withBreakpoints, translate } from 'cozy-ui/react'
 import LineChart from 'components/Chart/LineChart'
@@ -27,18 +27,14 @@ class HistoryChart extends Component {
       maximumFractionDigits: 2
     })
 
-    return (
-      <Fragment>
-        {date}
-        <strong
-          className={cx(styles.HistoryChart__tooltipBalance, {
-            [styles.Balance_blur]: flag('amount_blur')
-          })}
-        >
-          {balance} €
-        </strong>
-      </Fragment>
-    )
+    return [
+      { content: date },
+      {
+        content: flag('amount_blur') ? 'XXX' : balance,
+        style: 'font-weight: bold'
+      },
+      { content: '€' }
+    ]
   }
 
   componentDidMount() {