Merge pull request #210 from loeck/master

Add dot on AreaChart

src/components/base/Chart/index.js

@@ -137,31 +137,46 @@ class CustomTooltip extends Component<any, any> {
   }
 
   updateState = props =>
-    this._mounted &&
     window.requestAnimationFrame(() => {
       this._shouldRender = true
-      this.setState(props)
+      if (this._mounted) {
+        this.setState(props)
+      }
     })
 
   _shouldRender = false
   _mounted = false
 
   render() {
-    const { x, y, active, text, datum, renderer } = this.props
+    const { strokeWidth, dotColor, x, y, active, text, datum, renderer } = this.props
 
     if (!active) {
       return null
     }
 
     return (
-      <foreignObject>
-        <TooltipContainer
-          mt={-space[1]}
-          style={{ position: 'absolute', top: y, left: x, transform: `translate3d(-50%, 0, 0)` }}
-        >
-          <Text style={{ lineHeight: 1 }}>{renderer(text(datum))}</Text>
-        </TooltipContainer>
-      </foreignObject>
+      <g>
+        <circle
+          cx={x}
+          cy={y + space[2]}
+          r={strokeWidth}
+          stroke={dotColor}
+          strokeWidth={strokeWidth}
+          fill={colors.white}
+        />
+        <foreignObject>
+          <TooltipContainer
+            style={{
+              position: 'absolute',
+              top: y - space[4],
+              left: x,
+              transform: `translate3d(-50%, 0, 0)`,
+            }}
+          >
+            <Text style={{ lineHeight: 1 }}>{renderer(text(datum))}</Text>
+          </TooltipContainer>
+        </foreignObject>
+      </g>
     )
   }
 }
@@ -250,7 +265,13 @@ export class AreaChart extends PureComponent<Chart> {
     ...DEFAULT_PROPS,
   }
 
-  _tooltip = <CustomTooltip renderer={this.props.renderTooltip} />
+  _tooltip = (
+    <CustomTooltip
+      strokeWidth={this.props.strokeWidth}
+      dotColor={this.props.color}
+      renderer={this.props.renderTooltip}
+    />
+  )
 
   render() {
     const {