d3-state-visualizer - npm Package Compare versions

Comparing version 0.4.2 to 0.4.3

lib/charts/tree/tree.js

@@ -23,2 +23,6 @@ 'use strict';
 
+var _deepmerge2 = require('deepmerge');
+
+var _deepmerge3 = _interopRequireDefault(_deepmerge2);
+
 var _utils = require('./utils');
@@ -32,5 +36,30 @@
   id: 'd3svg',
-  style: {},
+  style: {
+    node: {
+      colors: {
+        'default': '#ccc',
+        collapsed: 'lightsteelblue',
+        parent: 'white'
+      },
+      radius: 5
+    },
+    text: {
+      colors: {
+        'default': 'black',
+        hover: 'skyblue'
+      }
+    },
+    link: {
+      stroke: '#000',
+      fill: 'none'
+    }
+  },
   size: 500,
   aspectRatio: 1.0,
+  margin: {
+    top: 10,
+    right: 10,
+    bottom: 10,
+    left: 50
+  },
   isSorted: false,
@@ -45,2 +74,3 @@ heightBetweenNodesCoeff: 2,
   tooltipOptions: {
+    disabled: false,
     left: undefined,
@@ -51,4 +81,6 @@ right: undefined,
       top: 0
-    }
-  }
+    },
+    style: undefined
+  },
+  onClickText: function onClickText() {}
 };
@@ -59,24 +91,20 @@
 
-  var _extends2 = _extends({}, defaultOptions, options);
+  var _deepmerge = (0, _deepmerge3['default'])(defaultOptions, options);
 
-  var id = _extends2.id;
-  var style = _extends2.style;
-  var size = _extends2.size;
-  var aspectRatio = _extends2.aspectRatio;
-  var isSorted = _extends2.isSorted;
-  var widthBetweenNodesCoeff = _extends2.widthBetweenNodesCoeff;
-  var heightBetweenNodesCoeff = _extends2.heightBetweenNodesCoeff;
-  var transitionDuration = _extends2.transitionDuration;
-  var state = _extends2.state;
-  var rootKeyName = _extends2.rootKeyName;
-  var pushMethod = _extends2.pushMethod;
-  var tree = _extends2.tree;
-  var tooltipOptions = _extends2.tooltipOptions;
+  var id = _deepmerge.id;
+  var style = _deepmerge.style;
+  var size = _deepmerge.size;
+  var aspectRatio = _deepmerge.aspectRatio;
+  var margin = _deepmerge.margin;
+  var isSorted = _deepmerge.isSorted;
+  var widthBetweenNodesCoeff = _deepmerge.widthBetweenNodesCoeff;
+  var heightBetweenNodesCoeff = _deepmerge.heightBetweenNodesCoeff;
+  var transitionDuration = _deepmerge.transitionDuration;
+  var state = _deepmerge.state;
+  var rootKeyName = _deepmerge.rootKeyName;
+  var pushMethod = _deepmerge.pushMethod;
+  var tree = _deepmerge.tree;
+  var tooltipOptions = _deepmerge.tooltipOptions;
+  var onClickText = _deepmerge.onClickText;
 
-  var margin = {
-    top: size / 100,
-    right: size / 50,
-    bottom: size / 100,
-    left: 40
-  };
   var width = size - margin.left - margin.right;
@@ -89,3 +117,2 @@ var height = size * aspectRatio - margin.top - margin.bottom;
     id: id,
-    viewBox: '0 0 ' + fullWidth + ' ' + fullHeight,
     preserveAspectRatio: 'xMinYMin slice'
@@ -98,5 +125,9 @@ };
 
+  if (!style.width || !style.height) {
+    attr.viewBox = '0 0 ' + fullWidth + ' ' + fullHeight;
+  }
+
   var root = _d32['default'].select(DOMNode);
   var vis = root.append('svg').attr(attr).style(style).append('g').attr({
-    transform: 'translate(' + margin.left + ', ' + margin.top + ')'
+    transform: 'translate(' + (margin.left + style.node.radius) + ', ' + margin.top + ')'
   });
@@ -164,12 +195,9 @@
         }
-      }).call((0, _d3tooltip2['default'])(_d32['default'], 'tooltip', _extends({}, tooltipOptions, { root: root })).text(function (d, i) {
-        return (0, _utils.getTooltipString)(d, i, tooltipOptions);
-      })).on({
-        click: function click(clickedNode) {
-          if (_d32['default'].event.defaultPrevented) return;
-          update((0, _utils.toggleChildren)(clickedNode));
-        },
+      }).style({
+        fill: style.text.colors['default'],
+        cursor: 'pointer'
+      }).on({
         mouseover: function mouseover(d, i) {
           _d32['default'].select(this).style({
-            fill: 'skyblue'
+            fill: style.text.colors.hover
           });
@@ -179,3 +207,3 @@ },
           _d32['default'].select(this).style({
-            fill: 'black'
+            fill: style.text.colors['default']
           });
@@ -185,4 +213,15 @@ }
 
+      if (!tooltipOptions.disabled) {
+        nodeEnter.call((0, _d3tooltip2['default'])(_d32['default'], 'tooltip', _extends({}, tooltipOptions, { root: root })).text(function (d, i) {
+          return (0, _utils.getTooltipString)(d, i, tooltipOptions);
+        }).style(tooltipOptions.style));
+      }
+
       nodeEnter.append('circle').attr({
         'class': 'nodeCircle'
+      }).on({
+        click: function click(clickedNode) {
+          if (_d32['default'].event.defaultPrevented) return;
+          update((0, _utils.toggleChildren)(clickedNode));
+        }
       });
@@ -197,2 +236,4 @@
         return d.name;
+      }).on({
+        click: onClickText
       });
@@ -203,3 +244,3 @@
         x: function x(d) {
-          return d.children || d._children ? -10 : 10;
+          return d.children || d._children ? -(style.node.radius + 10) : style.node.radius + 10;
         },
@@ -215,6 +256,8 @@ 'text-anchor': function textAnchor(d) {
       node.select('circle.nodeCircle').attr({
-        r: 4.5
+        r: style.node.radius
       }).style({
+        stroke: 'black',
+        'stroke-width': '1.5px',
         fill: function fill(d) {
-          return d._children ? 'lightsteelblue' : d.children ? '#fff' : '#ccc';
+          return d._children ? style.node.colors.collapsed : d.children ? style.node.colors.parent : style.node.colors['default'];
         }
@@ -262,3 +305,3 @@ });
         }
-      });
+      }).style(style.link);
 
@@ -265,0 +308,0 @@ // transition links to their new position

lib/components/TreeChart.js

@@ -30,4 +30,4 @@ 'use strict';
       state: _react.PropTypes.object,
-      rootKeyName: _react2['default'].PropTypes.string,
-      pushMethod: _react2['default'].PropTypes.string,
+      rootKeyName: _react.PropTypes.string,
+      pushMethod: _react.PropTypes.string,
       tree: _react.PropTypes.shape({
@@ -38,10 +38,33 @@ name: _react.PropTypes.string,
       id: _react.PropTypes.string,
-      style: _react.PropTypes.object,
+      style: _react.PropTypes.shape({
+        node: _react.PropTypes.shape({
+          colors: _react.PropTypes.shape({
+            'default': _react.PropTypes.string,
+            parent: _react.PropTypes.string,
+            collapsed: _react.PropTypes.string
+          }),
+          radius: _react.PropTypes.number
+        }),
+        text: _react.PropTypes.shape({
+          colors: _react.PropTypes.shape({
+            'default': _react.PropTypes.string,
+            hover: _react.PropTypes.string
+          })
+        }),
+        link: _react.PropTypes.object
+      }),
       size: _react.PropTypes.number,
       aspectRatio: _react.PropTypes.number,
-      isSorted: _react2['default'].PropTypes.bool,
-      heightBetweenNodesCoeff: _react2['default'].PropTypes.number,
-      widthBetweenNodesCoeff: _react2['default'].PropTypes.number,
-      transitionDuration: _react2['default'].PropTypes.number,
+      margin: _react.PropTypes.shape({
+        top: _react.PropTypes.number,
+        right: _react.PropTypes.number,
+        bottom: _react.PropTypes.number,
+        left: _react.PropTypes.number
+      }),
+      isSorted: _react.PropTypes.bool,
+      heightBetweenNodesCoeff: _react.PropTypes.number,
+      widthBetweenNodesCoeff: _react.PropTypes.number,
+      transitionDuration: _react.PropTypes.number,
       tooltipOptions: _react.PropTypes.shape({
+        disabled: _react.PropTypes.bool,
         left: _react.PropTypes.number,
@@ -53,3 +76,4 @@ top: _react.PropTypes.number,
         }),
-        indentationSize: _react.PropTypes.number
+        indentationSize: _react.PropTypes.number,
+        style: _react.PropTypes.object
       })
@@ -56,0 +80,0 @@ },

package.json

 {
   "name": "d3-state-visualizer",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Visualize your app state with a range of reusable charts",
@@ -50,2 +50,3 @@ "main": "lib/index.js",
     "d3tooltip": "^1.0.2",
+    "deepmerge": "^0.2.10",
     "json-pretty": "0.0.1",
@@ -52,0 +53,0 @@ "map2tree": "^1.1.2",

README.md

@@ -40,3 +40,33 @@ d3-state-visualizer
 ```
+## Charts API
 
+The APIs are minimal and consists of a single function you provide with:
+- a DOM element
+- a plain old JS object for options.
+
+#### Tree
+
+ This chart is a bit special as it accepts either one of the two following options, but **not both**:
+ 
+- `tree`: a properly formed tree structure such as one generated by [map2tree](https://github.com/romseguy/map2tree) or [react2tree](https://github.com/romseguy/react2tree)
+- `state`: a plain javascript object mapping arbitrarily nested keys to values – which will be transformed into a tree structure, again using [map2tree](https://github.com/romseguy/map2tree).
+
+Other options are listed below and have reasonable default values if you want to omit them:
+
+Option                    | Type     | Default     | Description
+--------------------------|----------|-------------|-------------------------------------------------------------------------
+`id`                      | String   | `'d3svg'`   | Sets the identifier of the SVG element —i.e your chart— that will be added to the DOM element you passed as first argument
+`style`                   | Object   | `{}`        | Sets the CSS style of the chart
+`size`                    | Number   | `500`       | Sets size of the chart in pixels
+`aspectRatio`             | Float    | `1.0`       | Sets the chart height to `size * aspectRatio` and [viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) in order to preserve the aspect ratio of the chart. [Great video](https://www.youtube.com/watch?v=FCOeMy7HrBc) if you want to learn more about how SVG works
+`widthBetweenNodesCoeff`  | Float    | `1.0`       | Alters the horizontal space between each node
+`heightBetweenNodesCoeff` | Float    | `1.0`       | Alters the vertical space between each node
+`isSorted`                | Boolean  | `false`     | Sorts the chart in alphabetical order
+`transitionDuration`      | Number   | `750`       | Sets the duration of all the transitions used by the chart
+`tooltipOptions`          | Object   | [here](https://github.com/romseguy/d3tooltip) | Sets the options for the [tooltip](https://github.com/romseguy/d3tooltip) that is showing up when you're hovering the nodes
+`rootKeyName`             | String   | `'state'`   | Sets the first node's name of the resulting tree structure. **Warning**: only works if you provide a `state` option
+`pushMethod`              | String   | `'push'`    | Sets the method that shall be used to add array children to the tree. **Warning**: only works if you provide a `state` option
+
+More to come...
+
 ## Bindings
@@ -43,0 +73,0 @@

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1666815

increased by0.59%

Lines of code

38545

increased by0.47%

Number of lines in readme file

113

increased by36.14%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

7

increased by16.67%

Dependency changes

• + Addeddeepmerge@^0.2.10

• + Addeddeepmerge@0.2.10(transitive)