d3-flame-graph - npm Package Compare versions

Comparing version 0.4.1 to 0.4.2

bower.json

 {
   "name": "d3-flame-graph",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "homepage": "https://github.com/spiermar/d3-flame-graph",
@@ -5,0 +5,0 @@ "authors": [

package.json

 {
   "name": "d3-flame-graph",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "A d3.js library to produce flame graphs.",
@@ -5,0 +5,0 @@ "main": "src/d3.flame.js",

README.md

@@ -81,3 +81,3 @@ # d3-flame-graph
 
-<a name="width" href="#width">#</a> flameGraph.<b>width</b>(<i>[size<]/i>)
+<a name="width" href="#width">#</a> flameGraph.<b>width</b>(<i>[size]</i>)
 
@@ -100,27 +100,12 @@ Graph width in px. Defaults to 960px if not set. If <i>size</i> is specified, it will set de graph width, otherwise it will return the flameGraph object.
 
-Enables/disables display of tooltips on frames. Defaults to <i>true</i> if not set. If a boolean value is specified, it will enable/disable tooltips, otherwise it will return the flameGraph object.
+Enables/disables display of tooltips on frames. Defaults to <i>true</i> if not set. It can be set to a [d3-tip configurable function](https://github.com/Caged/d3-tip/blob/master/docs/initializing-tooltips.md), which will replace the default function and display a fully customized tooltip. Else, if a truthy value, uses a default label function. If a value is specified, it will enable/disable tooltips, otherwise it will return the flameGraph object.
 
-<a name="tooltipDirection" href="#tooltipDirection">#</a> flameGraph.<b>tooltipDirection</b>(<i>[direction]</i>)
+Class should be specified in order to correctly render the tooltip. The default "d3-flame-graph-tip" is available for use too.
 
-Sets the position of a tooltip relative to a target element. <i>direction</i> can be n, s, e, w, nw, ne, sw or se. The direction will also automatically be included as a classname on the tooltip element which allows for different style hooks based on the direction.
-
 ```
-.tooltipDirection('n') // Position the tooltip to the top of a target element
-.tooltipDirection('s') // Position the tooltip to the bottom of a target element
-.tooltipDirection('e') // Position the tooltip to the right of a target element
-.tooltipDirection('w') // Position the tooltip to the left of a target element
+.attr('class', 'd3-flame-graph-tip')
 ```
 
-See [d3-tip.direction](https://github.com/Caged/d3-tip/blob/master/docs/positioning-tooltips.md#tipdirectiondirection).
+See [d3-tip](https://github.com/Caged/d3-tip/tree/master/docs) for more details.
 
-<a name="tooltipOffset" href="#tooltipOffset">#</a> flameGraph.<b>tooltipOffset</b>(<i>[offset]</i>)
-
-Offset a tooltip relative to its calculated position. Offset is computed from [top, left].
-
-```
-.tooltipOffset([10, -10])
-```
-
-See [d3-tip.offset](https://github.com/Caged/d3-tip/blob/master/docs/positioning-tooltips.md#tipoffsetvalues).
-
 <a name="transitionDuration" href="#transitionDuration">#</a> flameGraph.<b>transitionDuration</b>(<i>[duration]</i>)
@@ -156,2 +141,6 @@
 
+<a name="sort" href="#sort">#</a> flameGraph.<b>sort</b>(<i>[enabled]</i>)
+
+Enables/disables sorting of children frames. Defaults to <i>true</i> if not set to sort in ascending order by frame's name. If set to a function, the function takes two frames (a,b) and returns -1 if frame a is less than b, 1 if greater, or 0 if equal. If a value is specified, it will enable/disable sorting, otherwise it will return the flameGraph object.
+
 ## Issues
@@ -158,0 +147,0 @@

src/d3.flameGraph.js

@@ -12,16 +12,20 @@ (function() {
       title = "", // graph title
-      tooltipDirection = "s", // tooltip direction
-      tooltipOffset = [8, 0],
       transitionDuration = 750,
-      transitionEase = "cubic-in-out"; // tooltip offset
+      transitionEase = "cubic-in-out", // tooltip offset
+      sort = true;
 
     var tip = d3.tip()
-      .direction(tooltipDirection)
-      .offset(tooltipOffset)
-      .attr('class', 'd3-tip')
+      .direction("s")
+      .offset([8, 0])
+      .attr('class', 'd3-flame-graph-tip')
       .html(function(d) { return label(d); });
 
+    var labelFormat = function(d) {
+      return d.name + " (" + d3.round(100 * d.dx, 3) + "%, " + d.value + " samples)";
+    }
 
     function setDetails(t) {
-      document.getElementById("details").innerHTML = t;
+      var details = document.getElementById("details");
+      if (details)
+        details.innerHTML = t;
     }
@@ -31,3 +35,3 @@
       if (!d.dummy) {
-        return d.name + " (" + d3.round(100 * d.dx, 3) + "%, " + d.value + " samples)";
+        return labelFormat(d);
       } else {
@@ -185,4 +189,14 @@ return "";
 
+    function doSort(a, b) {
+      if (typeof sort === 'function') {
+        return sort(a, b);
+      } else if (sort) {
+        return d3.ascending(a.name, b.name);
+      } else {
+        return 0;
+      }
+    }
+
     var partition = d3.layout.partition()
-      .sort(function(a, b) {return d3.ascending(a.name, b.name);})
+      .sort(doSort)
       .value(function(d) {return d.v || d.value;})
@@ -221,3 +235,4 @@ .children(function(d) {return d.c || d.children;});
 
-        node.append("svg:title");
+        if (!tooltip)
+          node.append("svg:title");
 
@@ -237,4 +252,5 @@ node.append("foreignObject")
 
-        g.select("title")
-          .text(label);
+        if (!tooltip)
+          g.select("title")
+            .text(label);
 
@@ -258,3 +274,3 @@ g.select("foreignObject")
             if (tooltip) tip.show(d);
-            setDetails("Function: " + label(d));
+            setDetails(label(d));
           }
@@ -282,3 +298,3 @@ }).on('mouseout', function(d) {
           .attr("height", h)
-          .attr("class", "partition")
+          .attr("class", "partition d3-flame-graph")
           .call(tip);
@@ -325,3 +341,6 @@
       if (!arguments.length) { return tooltip; }
-      tooltip = _;
+      if (typeof _ === "function") {
+        tip = _;
+      }
+      tooltip = true;
       return chart;
@@ -336,14 +355,2 @@ };
 
-    chart.tooltipDirection = function (_) {
-      if (!arguments.length) { return tooltipDirection; }
-      tooltipDirection = _;
-      return chart;
-    };
-
-    chart.tooltipOffset = function (_) {
-      if (!arguments.length) { return tooltipOffset; }
-      tooltipOffset = _;
-      return chart;
-    };
-
     chart.transitionDuration = function (_) {
@@ -361,2 +368,14 @@ if (!arguments.length) { return transitionDuration; }
 
+    chart.sort = function (_) {
+      if (!arguments.length) { return sort; }
+      sort = _;
+      return chart;
+    };
+
+    chart.label = function(_) {
+      if (!arguments.length) { return labelFormat; }
+      labelFormat = _;
+      return chart;
+    }
+
     chart.search = function(term) {
@@ -376,2 +395,4 @@ selection.each(function(data) {
 
+
+
     return chart;
@@ -378,0 +399,0 @@ }

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

246606

increased by0.29%

Lines of code

3007

increased by0.6%

Worsened metrics

Number of lines in readme file

178

decreased by-5.82%

No dependency changes