@oncojs/sapien - npm Package Compare versions

Comparing version 0.4.2 to 0.4.3

dist/es6/index.js

@@ -15,2 +15,4 @@ import * as d3 from 'd3';
       clickHandler = _ref.clickHandler,
+      mouseOverHandler = _ref.mouseOverHandler,
+      mouseOutHandler = _ref.mouseOutHandler,
       data = _ref.data,
@@ -109,3 +111,5 @@ selector = _ref.selector,
 
-    tooltip.style('opacity', 1).html('\n          <div style="color: #bb0e3d">' + d._key + '</div>\n          <div style="font-size: 12px; color: rgb(20, 20, 20)">\n            ' + d[caseCountKey] + ' cases (' + (d[fileCountKey] || 100) + ' files)\n          </div>\n        ').style('left', d3.event.pageX - offsetLeft + 'px').style('top', d3.event.pageY - offsetTop - 86 + 'px').style('transform', 'translateX(-50%)').style('transform', 'translateX(-50%)').style('z-index', '99999');
+    if (mouseOverHandler) mouseOverHandler(d);else {
+      tooltip.style('opacity', 1).html('\n            <div style="color: #bb0e3d">' + d._key + '</div>\n            <div style="font-size: 12px; color: rgb(20, 20, 20)">\n              ' + d[caseCountKey] + ' cases (' + (d[fileCountKey] || 100) + ' files)\n            </div>\n          ').style('left', d3.event.pageX - offsetLeft + 'px').style('top', d3.event.pageY - offsetTop - 86 + 'px').style('transform', 'translateX(-50%)').style('transform', 'translateX(-50%)').style('z-index', '99999');
+    }
   }).on('mouseout', function (d, i) {
@@ -123,3 +127,3 @@ // needs `this`
 
-    tooltip.style('opacity', 0);
+    if (mouseOutHandler) mouseOutHandler(d);else tooltip.style('opacity', 0);
   }).on('click', clickHandler);
@@ -156,3 +160,5 @@
 
-    tooltip.style('opacity', 1).html('\n          <div style="color: #bb0e3d">' + d._key + '</div>\n          <div style="font-size: 12px; color: rgb(20, 20, 20)">\n            ' + d[caseCountKey].toLocaleString() + ' cases, (' + (d[fileCountKey].toLocaleString() || 100) + ' files)\n          </div>\n        ').style('left', d3.event.pageX - offsetLeft + 'px').style('top', d3.event.pageY - offsetTop - 86 + 'px').style('transform', 'translateX(-50%)').style('transform', 'translateX(-50%)').style('z-index', '99999');
+    if (mouseOverHandler) mouseOverHandler(d);else {
+      tooltip.style('opacity', 1).html('\n            <div style="color: #bb0e3d">' + d._key + '</div>\n            <div style="font-size: 12px; color: rgb(20, 20, 20)">\n              ' + d[caseCountKey].toLocaleString() + ' cases, (' + (d[fileCountKey].toLocaleString() || 100) + ' files)\n            </div>\n          ').style('left', d3.event.pageX - offsetLeft + 'px').style('top', d3.event.pageY - offsetTop - 86 + 'px').style('transform', 'translateX(-50%)').style('transform', 'translateX(-50%)').style('z-index', '99999');
+    }
   }).on('mouseout', function (d, i) {
@@ -170,3 +176,3 @@ // needs `this`
 
-    tooltip.style('opacity', 0);
+    if (mouseOutHandler) mouseOutHandler(d);else tooltip.style('opacity', 0);
   }).on('click', clickHandler);
@@ -187,3 +193,5 @@
         // hacks
-        tooltip.style('opacity', 1).html('\n              <div style="color: #bb0e3d">' + d[primarySiteKey] + '</div>\n              <div style="font-size: 12px; color: rgb(20, 20, 20)">\n                ' + d[caseCountKey].toLocaleString() + ' cases (' + (d[fileCountKey].toLocaleString() || 100) + ' files)\n              </div>\n            ').style('left', event.clientX - offsetLeft + 'px').style('top', event.clientY - offsetTop - 86 + 'px').style('transform', 'translateX(-50%)').style('z-index', '99999');
+        if (mouseOverHandler) mouseOverHandler(d);else {
+          tooltip.style('opacity', 1).html('\n                <div style="color: #bb0e3d">' + d[primarySiteKey] + '</div>\n                <div style="font-size: 12px; color: rgb(20, 20, 20)">\n                  ' + d[caseCountKey].toLocaleString() + ' cases (' + (d[fileCountKey].toLocaleString() || 100) + ' files)\n                </div>\n              ').style('left', event.clientX - offsetLeft + 'px').style('top', event.clientY - offsetTop - 86 + 'px').style('transform', 'translateX(-50%)').style('z-index', '99999');
+        }
 
@@ -203,3 +211,3 @@ var hsl = d3.hsl(d.color);
       d3.select('.bar-' + this.id).transition(300).attr('fill', function (d) {
-        tooltip.style('opacity', 0);
+        if (mouseOutHandler) mouseOutHandler(d);else tooltip.style('opacity', 0);
         return d.color;
@@ -206,0 +214,0 @@ });

dist/lib/index.js

@@ -30,2 +30,4 @@ 'use strict';
       clickHandler = _ref.clickHandler,
+      mouseOverHandler = _ref.mouseOverHandler,
+      mouseOutHandler = _ref.mouseOutHandler,
       data = _ref.data,
@@ -124,3 +126,5 @@ selector = _ref.selector,
 
-    tooltip.style('opacity', 1).html('\n          <div style="color: #bb0e3d">' + d._key + '</div>\n          <div style="font-size: 12px; color: rgb(20, 20, 20)">\n            ' + d[caseCountKey] + ' cases (' + (d[fileCountKey] || 100) + ' files)\n          </div>\n        ').style('left', d3.event.pageX - offsetLeft + 'px').style('top', d3.event.pageY - offsetTop - 86 + 'px').style('transform', 'translateX(-50%)').style('transform', 'translateX(-50%)').style('z-index', '99999');
+    if (mouseOverHandler) mouseOverHandler(d);else {
+      tooltip.style('opacity', 1).html('\n            <div style="color: #bb0e3d">' + d._key + '</div>\n            <div style="font-size: 12px; color: rgb(20, 20, 20)">\n              ' + d[caseCountKey] + ' cases (' + (d[fileCountKey] || 100) + ' files)\n            </div>\n          ').style('left', d3.event.pageX - offsetLeft + 'px').style('top', d3.event.pageY - offsetTop - 86 + 'px').style('transform', 'translateX(-50%)').style('transform', 'translateX(-50%)').style('z-index', '99999');
+    }
   }).on('mouseout', function (d, i) {
@@ -138,3 +142,3 @@ // needs `this`
 
-    tooltip.style('opacity', 0);
+    if (mouseOutHandler) mouseOutHandler(d);else tooltip.style('opacity', 0);
   }).on('click', clickHandler);
@@ -171,3 +175,5 @@
 
-    tooltip.style('opacity', 1).html('\n          <div style="color: #bb0e3d">' + d._key + '</div>\n          <div style="font-size: 12px; color: rgb(20, 20, 20)">\n            ' + d[caseCountKey].toLocaleString() + ' cases, (' + (d[fileCountKey].toLocaleString() || 100) + ' files)\n          </div>\n        ').style('left', d3.event.pageX - offsetLeft + 'px').style('top', d3.event.pageY - offsetTop - 86 + 'px').style('transform', 'translateX(-50%)').style('transform', 'translateX(-50%)').style('z-index', '99999');
+    if (mouseOverHandler) mouseOverHandler(d);else {
+      tooltip.style('opacity', 1).html('\n            <div style="color: #bb0e3d">' + d._key + '</div>\n            <div style="font-size: 12px; color: rgb(20, 20, 20)">\n              ' + d[caseCountKey].toLocaleString() + ' cases, (' + (d[fileCountKey].toLocaleString() || 100) + ' files)\n            </div>\n          ').style('left', d3.event.pageX - offsetLeft + 'px').style('top', d3.event.pageY - offsetTop - 86 + 'px').style('transform', 'translateX(-50%)').style('transform', 'translateX(-50%)').style('z-index', '99999');
+    }
   }).on('mouseout', function (d, i) {
@@ -185,3 +191,3 @@ // needs `this`
 
-    tooltip.style('opacity', 0);
+    if (mouseOutHandler) mouseOutHandler(d);else tooltip.style('opacity', 0);
   }).on('click', clickHandler);
@@ -202,3 +208,5 @@
         // hacks
-        tooltip.style('opacity', 1).html('\n              <div style="color: #bb0e3d">' + d[primarySiteKey] + '</div>\n              <div style="font-size: 12px; color: rgb(20, 20, 20)">\n                ' + d[caseCountKey].toLocaleString() + ' cases (' + (d[fileCountKey].toLocaleString() || 100) + ' files)\n              </div>\n            ').style('left', event.clientX - offsetLeft + 'px').style('top', event.clientY - offsetTop - 86 + 'px').style('transform', 'translateX(-50%)').style('z-index', '99999');
+        if (mouseOverHandler) mouseOverHandler(d);else {
+          tooltip.style('opacity', 1).html('\n                <div style="color: #bb0e3d">' + d[primarySiteKey] + '</div>\n                <div style="font-size: 12px; color: rgb(20, 20, 20)">\n                  ' + d[caseCountKey].toLocaleString() + ' cases (' + (d[fileCountKey].toLocaleString() || 100) + ' files)\n                </div>\n              ').style('left', event.clientX - offsetLeft + 'px').style('top', event.clientY - offsetTop - 86 + 'px').style('transform', 'translateX(-50%)').style('z-index', '99999');
+        }
 
@@ -218,3 +226,3 @@ var hsl = d3.hsl(d.color);
       d3.select('.bar-' + this.id).transition(300).attr('fill', function (d) {
-        tooltip.style('opacity', 0);
+        if (mouseOutHandler) mouseOutHandler(d);else tooltip.style('opacity', 0);
         return d.color;
@@ -221,0 +229,0 @@ });

index.js

@@ -17,2 +17,4 @@ /* @flow */
   clickHandler,
+  mouseOverHandler,
+  mouseOutHandler,
   data,
@@ -138,15 +140,18 @@ selector,
 
-      tooltip
-        .style('opacity', 1)
-        .html(`
-          <div style="color: #bb0e3d">${d._key}</div>
-          <div style="font-size: 12px; color: rgb(20, 20, 20)">
-            ${d[caseCountKey]} cases (${d[fileCountKey] || 100} files)
-          </div>
-        `)
-        .style('left', `${d3.event.pageX - offsetLeft}px`)
-        .style('top', `${d3.event.pageY - offsetTop - 86}px`)
-        .style('transform', 'translateX(-50%)')
-        .style('transform', 'translateX(-50%)')
-        .style('z-index', '99999');
+      if (mouseOverHandler) mouseOverHandler(d);
+      else {
+        tooltip
+          .style('opacity', 1)
+          .html(`
+            <div style="color: #bb0e3d">${d._key}</div>
+            <div style="font-size: 12px; color: rgb(20, 20, 20)">
+              ${d[caseCountKey]} cases (${d[fileCountKey] || 100} files)
+            </div>
+          `)
+          .style('left', `${d3.event.pageX - offsetLeft}px`)
+          .style('top', `${d3.event.pageY - offsetTop - 86}px`)
+          .style('transform', 'translateX(-50%)')
+          .style('transform', 'translateX(-50%)')
+          .style('z-index', '99999');
+      }
     })
@@ -166,3 +171,4 @@ .on('mouseout', (d, i) => { // needs `this`
 
-      tooltip.style('opacity', 0);
+      if (mouseOutHandler) mouseOutHandler(d);
+      else tooltip.style('opacity', 0);
     })
@@ -219,15 +225,18 @@ .on('click', clickHandler);
 
-      tooltip
-        .style('opacity', 1)
-        .html(`
-          <div style="color: #bb0e3d">${d._key}</div>
-          <div style="font-size: 12px; color: rgb(20, 20, 20)">
-            ${d[caseCountKey].toLocaleString()} cases, (${d[fileCountKey].toLocaleString() || 100} files)
-          </div>
-        `)
-        .style('left', `${d3.event.pageX - offsetLeft}px`)
-        .style('top', `${d3.event.pageY - offsetTop - 86}px`)
-        .style('transform', 'translateX(-50%)')
-        .style('transform', 'translateX(-50%)')
-        .style('z-index', '99999');
+      if (mouseOverHandler) mouseOverHandler(d);
+      else {
+        tooltip
+          .style('opacity', 1)
+          .html(`
+            <div style="color: #bb0e3d">${d._key}</div>
+            <div style="font-size: 12px; color: rgb(20, 20, 20)">
+              ${d[caseCountKey].toLocaleString()} cases, (${d[fileCountKey].toLocaleString() || 100} files)
+            </div>
+          `)
+          .style('left', `${d3.event.pageX - offsetLeft}px`)
+          .style('top', `${d3.event.pageY - offsetTop - 86}px`)
+          .style('transform', 'translateX(-50%)')
+          .style('transform', 'translateX(-50%)')
+          .style('z-index', '99999');
+      }
     })
@@ -247,3 +256,4 @@ .on('mouseout', function (d, i) { // needs `this`
 
-      tooltip.style('opacity', 0);
+      if (mouseOutHandler) mouseOutHandler(d);
+      else tooltip.style('opacity', 0);
     })
@@ -270,15 +280,19 @@ .on('click', clickHandler);
           // hacks
-          tooltip
-            .style('opacity', 1)
-            .html(`
-              <div style="color: #bb0e3d">${d[primarySiteKey]}</div>
-              <div style="font-size: 12px; color: rgb(20, 20, 20)">
-                ${d[caseCountKey].toLocaleString()} cases (${d[fileCountKey].toLocaleString() || 100} files)
-              </div>
-            `)
-            .style('left', `${event.clientX - offsetLeft}px`)
-            .style('top', `${event.clientY - offsetTop - 86}px`)
-            .style('transform', 'translateX(-50%)')
-            .style('z-index', '99999');
+          if (mouseOverHandler) mouseOverHandler(d);
+          else {
+            tooltip
+              .style('opacity', 1)
+              .html(`
+                <div style="color: #bb0e3d">${d[primarySiteKey]}</div>
+                <div style="font-size: 12px; color: rgb(20, 20, 20)">
+                  ${d[caseCountKey].toLocaleString()} cases (${d[fileCountKey].toLocaleString() || 100} files)
+                </div>
+              `)
+              .style('left', `${event.clientX - offsetLeft}px`)
+              .style('top', `${event.clientY - offsetTop - 86}px`)
+              .style('transform', 'translateX(-50%)')
+              .style('z-index', '99999');
 
+          }
+
           const hsl = d3.hsl(d.color);
@@ -300,3 +314,4 @@ hsl.s = 1;
         .attr('fill', d => {
-          tooltip.style('opacity', 0);
+          if (mouseOutHandler) mouseOutHandler(d);
+          else tooltip.style('opacity', 0);
           return d.color;
@@ -303,0 +318,0 @@ });

package.json

@@ -17,3 +17,3 @@ {
   "name": "@oncojs/sapien",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Organ Map of Human Body",
@@ -20,0 +20,0 @@ "browser": true,

types.js

@@ -6,2 +6,4 @@ /* @flow */
   clickHandler?: (e: any) => void,
+  mouseOverHandler?: (e: any) => void,
+  mouseOutHandler?: (e: any) => void,
   data?: mixed,
@@ -8,0 +10,0 @@ fileCountKey?: string,

No alert changes

Improved metrics

Total package byte prevSize

2056174

increased by0.13%

Lines of code

4680

increased by0.86%

No dependency changes