rollup-plugin-visualizer - npm Package Compare versions

Comparing version 2.1.1 to 2.2.0

lib/main-circlepacking.js

@@ -685,2 +685,4 @@ (function () {
 
+  var event = null;
+
   if (typeof document !== "undefined") {
@@ -705,5 +707,8 @@ var element = document.documentElement;
     return function(event1) {
+      var event0 = event; // Events can be reentrant (e.g., focus).
+      event = event1;
       try {
         listener.call(this, this.__data__, index, group);
       } finally {
+        event = event0;
       }
@@ -862,2 +867,28 @@ };
 
+  function sourceEvent() {
+    var current = event, source;
+    while (source = current.sourceEvent) current = source;
+    return current;
+  }
+
+  function point(node, event) {
+    var svg = node.ownerSVGElement || node;
+
+    if (svg.createSVGPoint) {
+      var point = svg.createSVGPoint();
+      point.x = event.clientX, point.y = event.clientY;
+      point = point.matrixTransform(node.getScreenCTM().inverse());
+      return [point.x, point.y];
+    }
+
+    var rect = node.getBoundingClientRect();
+    return [event.clientX - rect.left - node.clientLeft, event.clientY - rect.top - node.clientTop];
+  }
+
+  function d3mouse(node) {
+    var event = sourceEvent();
+    if (event.changedTouches) event = event.changedTouches[0];
+    return point(node, event);
+  }
+
   var prefix = "$";
@@ -1713,2 +1744,37 @@
 
+  //https://www.d3-graph-gallery.com/graph/interactivity_tooltip.html#template
+
+  const createTooltip = node =>
+    node
+      .append("div")
+      .style("opacity", 0)
+      .attr("class", "tooltip")
+      .style("background-color", "white")
+      .style("border", "solid")
+      .style("border-width", "2px")
+      .style("border-radius", "5px")
+      .style("padding", "5px");
+
+  const createMouseover = (tooltipNode, container) => d => tooltipNode.style("opacity", 1);
+
+  const createMousemove = (tooltipNode, container, totalSize) => d => {
+    const [x, y] = d3mouse(container);
+    const nodePath = d
+      .ancestors()
+      .reverse()
+      .map(d => d.data.name)
+      .join("/");
+
+    const percentageNum = (100 * d.value) / totalSize;
+    const percentage = percentageNum.toFixed(2);
+    const percentageString = percentage + "%";
+
+    tooltipNode
+      .html(`${nodePath}<br/><b>${format_1(d.value)}</b><br/>${percentageString}`)
+      .style("left", x + 30 + "px")
+      .style("top", y + "px");
+  };
+
+  const createMouseleave = (tooltipNode, container) => d => tooltipNode.style("opacity", 0);
+
   const WIDTH = 1000;
@@ -1719,4 +1785,2 @@ const HEIGHT = 1000;
 
-  const format$1 = format_1;
-
   for (const { id, root: data } of window.nodesData) {
@@ -1742,2 +1806,4 @@ const wrapper = document.createElement("div");
 
+    const totalSize = root.value;
+
     const layout = d3pack()
@@ -1747,2 +1813,4 @@ .size([WIDTH - 2, HEIGHT - 2])
 
+    const tooltip = createTooltip(select(chartNode));
+
     layout(root);
@@ -1777,3 +1845,6 @@
       .join("g")
-      .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`);
+      .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`)
+      .on("mouseover", createMouseover(tooltip))
+      .on("mousemove", createMousemove(tooltip, chartNode, totalSize))
+      .on("mouseleave", createMouseleave(tooltip));
 
@@ -1804,13 +1875,4 @@ node
       .text(d => d);
-
-    node.append("title").text(
-      d =>
-        `${d
-        .ancestors()
-        .map(d => d.data.name)
-        .reverse()
-        .join("/")}\n${format$1(d.value)}`
-    );
   }
 
 }());

lib/main-treemap.js

@@ -685,2 +685,4 @@ (function () {
 
+  var event = null;
+
   if (typeof document !== "undefined") {
@@ -705,5 +707,8 @@ var element = document.documentElement;
     return function(event1) {
+      var event0 = event; // Events can be reentrant (e.g., focus).
+      event = event1;
       try {
         listener.call(this, this.__data__, index, group);
       } finally {
+        event = event0;
       }
@@ -862,2 +867,28 @@ };
 
+  function sourceEvent() {
+    var current = event, source;
+    while (source = current.sourceEvent) current = source;
+    return current;
+  }
+
+  function point(node, event) {
+    var svg = node.ownerSVGElement || node;
+
+    if (svg.createSVGPoint) {
+      var point = svg.createSVGPoint();
+      point.x = event.clientX, point.y = event.clientY;
+      point = point.matrixTransform(node.getScreenCTM().inverse());
+      return [point.x, point.y];
+    }
+
+    var rect = node.getBoundingClientRect();
+    return [event.clientX - rect.left - node.clientLeft, event.clientY - rect.top - node.clientTop];
+  }
+
+  function d3mouse(node) {
+    var event = sourceEvent();
+    if (event.changedTouches) event = event.changedTouches[0];
+    return point(node, event);
+  }
+
   var prefix = "$";
@@ -1574,2 +1605,37 @@
 
+  //https://www.d3-graph-gallery.com/graph/interactivity_tooltip.html#template
+
+  const createTooltip = node =>
+    node
+      .append("div")
+      .style("opacity", 0)
+      .attr("class", "tooltip")
+      .style("background-color", "white")
+      .style("border", "solid")
+      .style("border-width", "2px")
+      .style("border-radius", "5px")
+      .style("padding", "5px");
+
+  const createMouseover = (tooltipNode, container) => d => tooltipNode.style("opacity", 1);
+
+  const createMousemove = (tooltipNode, container, totalSize) => d => {
+    const [x, y] = d3mouse(container);
+    const nodePath = d
+      .ancestors()
+      .reverse()
+      .map(d => d.data.name)
+      .join("/");
+
+    const percentageNum = (100 * d.value) / totalSize;
+    const percentage = percentageNum.toFixed(2);
+    const percentageString = percentage + "%";
+
+    tooltipNode
+      .html(`${nodePath}<br/><b>${format_1(d.value)}</b><br/>${percentageString}`)
+      .style("left", x + 30 + "px")
+      .style("top", y + "px");
+  };
+
+  const createMouseleave = (tooltipNode, container) => d => tooltipNode.style("opacity", 0);
+
   const WIDTH = 1000;
@@ -1599,2 +1665,4 @@ const HEIGHT = 700;
 
+    const tooltip = createTooltip(select(chartNode));
+
     const root = hierarchy(data)
@@ -1610,2 +1678,4 @@ .sum(d => {
 
+    const totalSize = root.value;
+
     treemapLayout(root);
@@ -1639,13 +1709,7 @@
       .join("g")
-      .attr("transform", d => `translate(${d.x0},${d.y0})`);
+      .attr("transform", d => `translate(${d.x0},${d.y0})`)
+      .on("mouseover", createMouseover(tooltip))
+      .on("mousemove", createMousemove(tooltip, chartNode, totalSize))
+      .on("mouseleave", createMouseleave(tooltip));
 
-    node.append("title").text(
-      d =>
-        `${d
-        .ancestors()
-        .reverse()
-        .map(d => d.data.name)
-        .join("/")}\n${format$1(d.value)}`
-    );
-
     node
@@ -1652,0 +1716,0 @@ .append("rect")

package.json

 {
   "name": "rollup-plugin-visualizer",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "main": "plugin.js",
@@ -5,0 +5,0 @@ "author": "Denis Bardadym <[e-mail]>",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

235899

increased by2.36%

Lines of code

7049

increased by2.14%

No dependency changes