d3-state-visualizer - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

lib/charts/tree/sortAndSerialize.js

 'use strict';
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+exports.__esModule = true;
 
-exports.__esModule = true;
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
 exports.default = sortAndSerialize;
@@ -18,3 +19,3 @@
   if (obj instanceof Array) {
-    var ary = undefined;
+    var ary = void 0;
     if (strict) {
@@ -21,0 +22,0 @@ ary = obj.sort();

lib/charts/tree/tree.js

 'use strict';
 
+exports.__esModule = true;
+
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-exports.__esModule = true;
-
 exports.default = function (DOMNode) {
-  var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
@@ -29,2 +29,3 @@ var _deepmerge = (0, _deepmerge3.default)(defaultOptions, options);
 
+
   var width = size - margin.left - margin.right;
@@ -61,3 +62,3 @@ var height = size * aspectRatio - margin.top - margin.bottom;
   var layout = _d4.default.layout.tree().size([width, height]);
-  var data = undefined;
+  var data = void 0;
 
@@ -71,3 +72,3 @@ if (isSorted) {
   return function renderChart() {
-    var nextState = arguments.length <= 0 || arguments[0] === undefined ? tree || state : arguments[0];
+    var nextState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : tree || state;
 
@@ -96,4 +97,2 @@ data = !tree ? (0, _map2tree2.default)(nextState, { key: rootKeyName, pushMethod: pushMethod }) : nextState;
     function update(source) {
-      var _Math;
-
       // path generator for links
@@ -104,3 +103,3 @@ var diagonal = _d4.default.svg.diagonal().projection(function (d) {
       // set tree dimensions and spacing between branches and nodes
-      var maxNodeCountByLevel = (_Math = Math).max.apply(_Math, (0, _utils.getNodeGroupByDepthCount)(data));
+      var maxNodeCountByLevel = Math.max.apply(Math, (0, _utils.getNodeGroupByDepthCount)(data));
 
@@ -117,3 +116,5 @@ layout = layout.size([maxNodeCountByLevel * 25 * heightBetweenNodesCoeff, width]);
       // process the node selection
-      var node = vis.selectAll('g.node').data(nodes, function (d) {
+      var node = vis.selectAll('g.node').property("__oldData__", function (d) {
+        return d;
+      }).data(nodes, function (d) {
         return d.id || (d.id = ++nodeIndex);
@@ -202,2 +203,14 @@ });
 
+      // restore the circle
+      nodeUpdate.select('circle').attr('r', 7);
+
+      // blink updated nodes
+      nodeUpdate.filter(function (d) {
+        // test whether the relevant properties of d match
+        // the equivalent property of the oldData
+        // also test whether the old data exists,
+        // to catch the entering elements!
+        return !this.__oldData__ || d.value !== this.__oldData__.value;
+      }).style('fill-opacity', '0.3').transition().duration(100).style('fill-opacity', '1');
+
       // transition exiting nodes to the parent's new position
@@ -253,2 +266,5 @@ var nodeExit = node.exit().transition().duration(transitionDuration).attr({
 
+      // delete the old data once it's no longer needed
+      node.property("__oldData__", null);
+
       // stash the old positions for transition
@@ -255,0 +271,0 @@ nodes.forEach(function (d) {

lib/charts/tree/utils.js

@@ -71,3 +71,3 @@ 'use strict';
   var traverseFrom = function traverseFrom(node) {
-    var depth = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];
+    var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
 
@@ -74,0 +74,0 @@ if (!node.children || node.children.length === 0) {

package.json

 {
   "name": "d3-state-visualizer",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Visualize your app state with a range of reusable charts",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/charts/tree/tree.js

@@ -157,3 +157,5 @@ import d3 from 'd3'
       // process the node selection
-      let node = vis.selectAll('g.node').data(nodes, d => d.id || (d.id = ++nodeIndex))
+      let node = vis.selectAll('g.node')
+        .property("__oldData__", d => d)
+        .data(nodes, d => d.id || (d.id = ++nodeIndex))
 
@@ -242,3 +244,17 @@ let nodeEnter = node.enter().append('g')
         .style('fill-opacity', 1)
+      
+      // restore the circle
+      nodeUpdate.select('circle').attr('r', 7)
 
+      // blink updated nodes
+      nodeUpdate.filter(function(d) {
+        // test whether the relevant properties of d match
+        // the equivalent property of the oldData
+        // also test whether the old data exists,
+        // to catch the entering elements!
+        return (!this.__oldData__ || d.value !== this.__oldData__.value)
+      })
+        .style('fill-opacity', '0.3').transition()
+        .duration(100).style('fill-opacity', '1')
+
       // transition exiting nodes to the parent's new position
@@ -303,2 +319,5 @@ let nodeExit = node.exit().transition()
 
+      // delete the old data once it's no longer needed
+      node.property("__oldData__", null)
+
       // stash the old positions for transition
@@ -305,0 +324,0 @@ nodes.forEach(d => {

No alert changes

Improved metrics

Total package byte prevSize

1046665

increased by4.47%

Lines of code

23634

increased by5.74%

No dependency changes