fixed tool tip

arnthor3 · Dec 20, 2016 · 0cd3807 · 0cd3807
1 parent ceeacda
commit 0cd3807
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 8 deletions.
diff --git a/__test__/MouseOverLay.test.jsx b/__test__/MouseOverLay.test.jsx
@@ -41,15 +41,34 @@ describe('<MouseOverlay />', () => {
     const path = select(wrapper.find('path').nodes[0]);
     const event = document.createEvent('SVGEvents');
     event.initEvent('mousemove', true, true);
+    const tool = select(wrapper.find('g.toolTip').node);
     path.node().dispatchEvent(event);
+    setTimeout(() => {
+      expect(tool.attr('opacity')).not.to.equal('0');
+      done();
+    }, 750);
+  });
+  it('should listen to mouseleave', (done) => {
+    const wrapper = mount(
+      <ToolTip
+        values={values}
+        width={400}
+        height={400}
+        endAngle={Math.PI * 2}
+        arc={arc().endAngle(Math.PI).startAngle(0).outerRadius(10).innerRadius(0)}
+      />,
+    );
+    const path = select(wrapper.find('path').nodes[0]);
     const tool = select(wrapper.find('g.toolTip').node);
-    expect(tool.attr('opacity')).to.equal('0');
+    tool.attr('opacity', '1');
     const eventOut = document.createEvent('SVGEvents');
-    event.initEvent('mouseleave', true, true);
-    path.node().dispatchEvent(event);
+    eventOut.initEvent('mouseleave', true, true);
+    path.node().dispatchEvent(eventOut);
+
+
     setTimeout(() => {
       expect(tool.attr('opacity')).not.to.equal('1');
       done();
-    }, 1000);
+    }, 750);
   });
 });
diff --git a/dist/Chart/MouseContainerOverlay.js b/dist/Chart/MouseContainerOverlay.js
@@ -70,7 +70,7 @@ var PathGroup = function (_Component) {
 
         var pos = (0, _d3Selection.mouse)(el.node());
 
-        tool.transition().attr('opacity', 1);
+        tool.transition().duration(0).attr('opacity', 1);
         tool.select('path').attr('stroke', fill);
         tool.select('text').text(Math.floor(value) + '%');
         tool.attr('transform', 'translate(' + (pos[0] - 26) + ',' + (pos[1] - 64) + ')');

diff --git a/examples/index.jsx b/examples/index.jsx
@@ -43,7 +43,7 @@ class ChartSG extends Component {
             fill: '#ccc',
             stroke: '#999',
           }}
-          animateTime={1000}
+          animateTime={1500}
           showTooltip
           circleRadius={10}
         />

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-solidgauge",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A Small React-D3 solid gauge chart inspired by amcharts",
   "main": "index.js",
   "scripts": {

diff --git a/src/Chart/MouseContainerOverlay.jsx b/src/Chart/MouseContainerOverlay.jsx
@@ -49,7 +49,7 @@ export default class PathGroup extends Component {
       const { fill, value } = this.props.values[iter - 1];
       const pos = mouse(el.node());
 
-      tool.transition().attr('opacity', 1);
+      tool.transition().duration(0).attr('opacity', 1);
       tool.select('path').attr('stroke', fill);
       tool.select('text').text(`${Math.floor(value)}%`);
       tool.attr('transform', `translate(${pos[0] - 26},${pos[1] - 64})`);