0.0.2

- renders tooltips in the correct place

Author: gabrielcsapo

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 0.0.2
+
+- renders tooltips in the correct place
+
 # 0.0.1
 
 - removes the need for directoryHash

dist/build.js

@@ -1,6 +1,6 @@
 {
   "name": "lcov-server",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "🎯 A simple lcov server & cli parser",
   "main": "index.js",
   "homepage": "https://github.com/gabrielcsapo/lcov-server#readme",

package.json

@@ -43,7 +43,16 @@ class LineChart extends React.Component {
 		});
 	}
 	hideTooltip() {
-		this.setState(this.getInitialState());
+		this.setState({
+			tooltip: false,
+			value: '',
+			dataSet: 0,
+			index: 0,
+			x: 0,
+			y: 0,
+			color: '',
+      updating: false
+		});
 	}
 	render() {
 		const { updating, tooltip, value, x, y, color } = this.state;
@@ -124,7 +133,7 @@ class LineChart extends React.Component {
 							stroke={ stroke }
 						/>
 
-						<Points hideLabels={ hideLabels } dots={ dots } label={ labels[pi] } points={ p } dataSetIndex={ pi } showTooltip={ this.showTooltip } hideTooltip={ this.hideTooltip } stroke={ stroke } radius={ radius } />
+						<Points hideLabels={ hideLabels } dots={ dots } label={ labels[pi] } points={ p } dataSetIndex={ pi } showTooltip={ this.showTooltip.bind(this) } hideTooltip={ this.hideTooltip.bind(this) } stroke={ stroke } radius={ radius } />
 					</g>
 				)}
 			</svg>

src/lib/chart/line.js

@@ -29,7 +29,14 @@ class Pie extends React.Component {
 		});
 	}
 	hideTooltip() {
-		this.setState(this.getInitialState());
+		this.setState({
+			tooltip: false,
+			value: '',
+			label: 0,
+			x: 0,
+			y: 0,
+			color: ''
+		});
 	}
 	render() {
 		const { colors, percent, labels, hole, radius, data, stroke, strokeWidth } = this.props;
@@ -71,8 +78,8 @@ class Pie extends React.Component {
                 fill={ colors[sliceIndex % colorsLength] }
                 stroke={ stroke }
                 strokeWidth={ strokeWidth }
-                showTooltip={ this.showTooltip }
-                hideTooltip={ this.hideTooltip }
+                showTooltip={ this.showTooltip.bind(this) }
+                hideTooltip={ this.hideTooltip.bind(this) }
             />);
           })}
         </svg>

src/lib/chart/pie.js

@@ -2,8 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 class Point extends React.Component {
+	constructor(props) {
+		super(props);
+	}
 	mouseEnter() {
-		this.props.showTooltip(this.props.point, this.props.dataSetIndex, this.props.index);
+		const { radius, point, dataSetIndex, index } = this.props;
+
+		this.props.showTooltip([point[0] + radius * 3, point[1] + radius * 3], dataSetIndex, index);
 	}
 	mouseLeave() {
 		this.props.hideTooltip();
@@ -21,8 +26,8 @@ class Point extends React.Component {
       fill={ color }
 			strokeWidth={ stroke }
       stroke={ '#ffffff' }
-			onMouseEnter={ this.mouseEnter }
-      onMouseLeave={ this.mouseLeave }
+			onMouseEnter={ this.mouseEnter.bind(this) }
+      onMouseLeave={ this.mouseLeave.bind(this) }
     />);
 	}
 }

src/lib/chart/point.js

@@ -75,8 +75,8 @@ class Slice extends React.Component {
 					fill={ fill }
 					stroke={ stroke }
 					strokeWidth={ strokeWidth }
-          onMouseEnter={ this.mouseEnter }
-          onMouseLeave={ this.mouseLeave }
+          onMouseEnter={ this.mouseEnter.bind(this) }
+          onMouseLeave={ this.mouseLeave.bind(this) }
         />
         { showLabel && percentValue > 5 ?
           <text x={ x } y={ y } fill="#fff" textAnchor="middle">