d3-state-visualizer - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

dist/d3-state-visualizer.js

@@ -112,9 +112,18 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	  return function graphChart(d3, DOMNode, props) {
-	    var data = props.data;
-	    var id = props.id;
-	    var size = props.size;
-	    var aspectRatio = props.aspectRatio;
-	    var charge = props.charge;
-	    var linkDistance = props.linkDistance;
-	    var maxNodeSize = props.maxNodeSize;
+	    var _props$data = props.data;
+	    var data = _props$data === undefined ? [] : _props$data;
+	    var _props$id = props.id;
+	    var id = _props$id === undefined ? 'd3svg' : _props$id;
+	    var _props$style = props.style;
+	    var style = _props$style === undefined ? '' : _props$style;
+	    var _props$size = props.size;
+	    var size = _props$size === undefined ? 1000 : _props$size;
+	    var _props$aspectRatio = props.aspectRatio;
+	    var aspectRatio = _props$aspectRatio === undefined ? 1.0 : _props$aspectRatio;
+	    var _props$charge = props.charge;
+	    var charge = _props$charge === undefined ? -1 : _props$charge;
+	    var _props$linkDistance = props.linkDistance;
+	    var linkDistance = _props$linkDistance === undefined ? 1 : _props$linkDistance;
+	    var _props$maxNodeSize = props.maxNodeSize;
+	    var maxNodeSize = _props$maxNodeSize === undefined ? 50 : _props$maxNodeSize;
 
@@ -133,3 +142,11 @@ var margin = {
 	    var root = d3.select(DOMNode);
-	    var vis = root.append('svg').attr('id', id).attr('preserveAspectRatio', 'xMinYMin slice').attr('viewBox', '0 0 ' + fullWidth + ' ' + fullHeight).append('g').attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
+	    var vis = root.append('svg').attr({
+	      id: id,
+	      style: style,
+	      width: fullWidth,
+	      viewBox: '0 0 ' + fullWidth + ' ' + fullHeight,
+	      preserveAspectRatio: 'xMinYMin slice'
+	    }).append('g').attr({
+	      transform: 'translate(' + margin.left + ', ' + margin.top + ')'
+	    });
 
@@ -163,3 +180,3 @@ var node = vis.selectAll('circle');
 	          var radius = 10 + 2 * d[d.key].length;
-	          return radius > maxNodeSize ? 10 : radius;
+	          return radius > maxNodeSize ? maxNodeSize : radius;
 	        },
@@ -166,0 +183,0 @@ fill: function fill(d) {

dist/d3-state-visualizer.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):"object"==typeof exports?exports["d3-state-visualizer"]=e():t["d3-state-visualizer"]=e()}(this,function(){return function(t){function e(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return t[n].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var r={};return e.m=t,e.c=r,e.p="",e(0)}([function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var o=r(2),u=n(o);e.default={forceGraph:u.default},t.exports=e.default},function(t,e){function r(t){return!!t&&"object"==typeof t}t.exports=r},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function o(t){if(Array.isArray(t)){for(var e=0,r=Array(t.length);e<t.length;e++)r[e]=t[e];return r}return Array.from(t)}Object.defineProperty(e,"__esModule",{value:!0});var u=r(5),i=n(u);e.default=function(){return function(t,e,r){var n=r.data,u=r.id,c=r.size,a=r.aspectRatio,f=r.charge,l=r.linkDistance,s=r.maxNodeSize,p={top:c/100,right:c/50,bottom:c/100,left:40},d=c-p.left-p.right,y=c*a-p.top-p.bottom,v=c,x=c*a,b=t.select(e),g=b.append("svg").attr("id",u).attr("preserveAspectRatio","xMinYMin slice").attr("viewBox","0 0 "+v+" "+x).append("g").attr("transform","translate("+p.left+", "+p.top+")"),h=g.selectAll("circle"),j=t.layout.force().size([d,y]).nodes(n).linkDistance(l).charge(f).on("tick",function(){h.attr({cx:function(t){return Math.round(t.x)},cy:function(t){return Math.round(t.y)}})}),m=j.nodes();return function(e){e&&(m=[].concat(o(m),o(e)),j.nodes(m)),h=h.data(m),h.enter().insert("circle").attr({r:function(t){var e=t[t.key];if(!i.default(e))return 10;var r=10+2*t[t.key].length;return r>s?10:r},fill:function(t){return i.default(t[t.key])?"blue":"red"}}).on({mouseover:function(){t.select(this).style("fill-opacity","0.5")},mouseout:function(){t.select(this).style("fill-opacity","1")}}).call(j.drag),h.exit().remove(),j.start()}}},t.exports=e.default},function(t,e,r){function n(t,e){var r=null==t?void 0:t[e];return o(r)?r:void 0}var o=r(7);t.exports=n},function(t,e){function r(t){return"number"==typeof t&&t>-1&&t%1==0&&n>=t}var n=9007199254740991;t.exports=r},function(t,e,r){var n=r(3),o=r(4),u=r(1),i="[object Array]",c=Object.prototype,a=c.toString,f=n(Array,"isArray"),l=f||function(t){return u(t)&&o(t.length)&&a.call(t)==i};t.exports=l},function(t,e,r){function n(t){return o(t)&&c.call(t)==u}var o=r(8),u="[object Function]",i=Object.prototype,c=i.toString;t.exports=n},function(t,e,r){function n(t){return null==t?!1:o(t)?l.test(a.call(t)):u(t)&&i.test(t)}var o=r(6),u=r(1),i=/^\[object .+?Constructor\]$/,c=Object.prototype,a=Function.prototype.toString,f=c.hasOwnProperty,l=RegExp("^"+a.call(f).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");t.exports=n},function(t,e){function r(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}t.exports=r}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):"object"==typeof exports?exports["d3-state-visualizer"]=e():t["d3-state-visualizer"]=e()}(this,function(){return function(t){function e(o){if(r[o])return r[o].exports;var n=r[o]={exports:{},id:o,loaded:!1};return t[o].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var r={};return e.m=t,e.c=r,e.p="",e(0)}([function(t,e,r){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var n=r(2),i=o(n);e.default={forceGraph:i.default},t.exports=e.default},function(t,e){function r(t){return!!t&&"object"==typeof t}t.exports=r},function(t,e,r){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function n(t){if(Array.isArray(t)){for(var e=0,r=Array(t.length);e<t.length;e++)r[e]=t[e];return r}return Array.from(t)}Object.defineProperty(e,"__esModule",{value:!0});var i=r(5),u=o(i);e.default=function(){return function(t,e,r){var o=r.data,i=void 0===o?[]:o,c=r.id,a=void 0===c?"d3svg":c,f=r.style,l=void 0===f?"":f,s=r.size,d=void 0===s?1e3:s,p=r.aspectRatio,v=void 0===p?1:p,y=r.charge,x=void 0===y?-1:y,g=r.linkDistance,b=void 0===g?1:g,h=r.maxNodeSize,j=void 0===h?50:h,m={top:d/100,right:d/50,bottom:d/100,left:40},A=d-m.left-m.right,M=d*v-m.top-m.bottom,_=d,O=d*v,k=t.select(e),z=k.append("svg").attr({id:a,style:l,width:_,viewBox:"0 0 "+_+" "+O,preserveAspectRatio:"xMinYMin slice"}).append("g").attr({transform:"translate("+m.left+", "+m.top+")"}),$=z.selectAll("circle"),w=t.layout.force().size([A,M]).nodes(i).linkDistance(b).charge(x).on("tick",function(){$.attr({cx:function(t){return Math.round(t.x)},cy:function(t){return Math.round(t.y)}})}),P=w.nodes();return function(e){e&&(P=[].concat(n(P),n(e)),w.nodes(P)),$=$.data(P),$.enter().insert("circle").attr({r:function(t){var e=t[t.key];if(!u.default(e))return 10;var r=10+2*t[t.key].length;return r>j?j:r},fill:function(t){return u.default(t[t.key])?"blue":"red"}}).on({mouseover:function(){t.select(this).style("fill-opacity","0.5")},mouseout:function(){t.select(this).style("fill-opacity","1")}}).call(w.drag),$.exit().remove(),w.start()}}},t.exports=e.default},function(t,e,r){function o(t,e){var r=null==t?void 0:t[e];return n(r)?r:void 0}var n=r(7);t.exports=o},function(t,e){function r(t){return"number"==typeof t&&t>-1&&t%1==0&&o>=t}var o=9007199254740991;t.exports=r},function(t,e,r){var o=r(3),n=r(4),i=r(1),u="[object Array]",c=Object.prototype,a=c.toString,f=o(Array,"isArray"),l=f||function(t){return i(t)&&n(t.length)&&a.call(t)==u};t.exports=l},function(t,e,r){function o(t){return n(t)&&c.call(t)==i}var n=r(8),i="[object Function]",u=Object.prototype,c=u.toString;t.exports=o},function(t,e,r){function o(t){return null==t?!1:n(t)?l.test(a.call(t)):i(t)&&u.test(t)}var n=r(6),i=r(1),u=/^\[object .+?Constructor\]$/,c=Object.prototype,a=Function.prototype.toString,f=c.hasOwnProperty,l=RegExp("^"+a.call(f).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");t.exports=o},function(t,e){function r(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}t.exports=r}])});

lib/charts/forceGraph.js

@@ -17,9 +17,18 @@ 'use strict';
   return function graphChart(d3, DOMNode, props) {
-    var data = props.data;
-    var id = props.id;
-    var size = props.size;
-    var aspectRatio = props.aspectRatio;
-    var charge = props.charge;
-    var linkDistance = props.linkDistance;
-    var maxNodeSize = props.maxNodeSize;
+    var _props$data = props.data;
+    var data = _props$data === undefined ? [] : _props$data;
+    var _props$id = props.id;
+    var id = _props$id === undefined ? 'd3svg' : _props$id;
+    var _props$style = props.style;
+    var style = _props$style === undefined ? '' : _props$style;
+    var _props$size = props.size;
+    var size = _props$size === undefined ? 1000 : _props$size;
+    var _props$aspectRatio = props.aspectRatio;
+    var aspectRatio = _props$aspectRatio === undefined ? 1.0 : _props$aspectRatio;
+    var _props$charge = props.charge;
+    var charge = _props$charge === undefined ? -1 : _props$charge;
+    var _props$linkDistance = props.linkDistance;
+    var linkDistance = _props$linkDistance === undefined ? 1 : _props$linkDistance;
+    var _props$maxNodeSize = props.maxNodeSize;
+    var maxNodeSize = _props$maxNodeSize === undefined ? 50 : _props$maxNodeSize;
 
@@ -38,3 +47,11 @@ var margin = {
     var root = d3.select(DOMNode);
-    var vis = root.append('svg').attr('id', id).attr('preserveAspectRatio', 'xMinYMin slice').attr('viewBox', '0 0 ' + fullWidth + ' ' + fullHeight).append('g').attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
+    var vis = root.append('svg').attr({
+      id: id,
+      style: style,
+      width: fullWidth,
+      viewBox: '0 0 ' + fullWidth + ' ' + fullHeight,
+      preserveAspectRatio: 'xMinYMin slice'
+    }).append('g').attr({
+      transform: 'translate(' + margin.left + ', ' + margin.top + ')'
+    });
 
@@ -68,3 +85,3 @@ var node = vis.selectAll('circle');
           var radius = 10 + 2 * d[d.key].length;
-          return radius > maxNodeSize ? 10 : radius;
+          return radius > maxNodeSize ? maxNodeSize : radius;
         },
@@ -71,0 +88,0 @@ fill: function fill(d) {

package.json

 {
   "name": "d3-state-visualizer",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Visualize your app state with a range of reusable charts",
@@ -10,3 +10,3 @@ "main": "lib/index.js",
     "build:umd": "webpack src/index.js dist/d3-state-visualizer.js && NODE_ENV=production webpack src/index.js dist/d3-state-visualizer.min.js",
-    "lint": "eslint src test examples",
+    "lint": "eslint src examples",
     "test": "NODE_ENV=test mocha",
@@ -13,0 +13,0 @@ "test:watch": "NODE_ENV=test mocha --watch",

No alert changes

Improved metrics

Total package byte prevSize

24626

7.03%

Lines of code

480

7.62%

No dependency changes