nud3 - npm Package Compare versions

Comparing version 0.5.24 to 0.5.25

lib/charts/WebChart.js

@@ -128,2 +128,5 @@ 'use strict';
         },
+        _react2.default.createElement('defs', { className: 'web-chart__defs', ref: function ref(n) {
+            return _this3.defs = (0, _d3Selection.select)(n);
+          } }),
         _react2.default.createElement(
@@ -247,4 +250,86 @@ 'g',
 
-      var areas = this.webbings.selectAll(isFilled ? '.webbing-area' : '.webbing-outline').data(this.props.chartData, this.getUniqueDataKey);
+      var isGradient = _lodash2.default.isArray(this.props.fill);
+      if (isGradient) {
+        this.renderGradientFill(perRadians, scale, emptyRadialLineGenerator, radialLineGenerator);
+      } else {
+        this.renderFill(isFilled, emptyRadialLineGenerator, radialLineGenerator);
+      }
+    }
+  }, {
+    key: 'renderGradientFill',
+    value: function renderGradientFill(perRadians, scale, emptyRadialLineGenerator, radialLineGenerator) {
+      var _this5 = this;
 
+      var startDegree = this.startDegree();
+
+      // flatten data for the simple fact that d3 can't handle selections nested more than 2 deep
+      var flattenedMatrix = this.props.chartData.reduce(function (all, d, pi) {
+        d.forEach(function (child, i) {
+          child.parentIndex = pi;
+          child.originalIndex = i;
+        });
+        return all.concat(d);
+      }, []);
+
+      // create the gradient group elements <g>
+      var gradients = this.defs.selectAll('linearGradient').data(flattenedMatrix);
+
+      gradients.exit().remove();
+
+      // when a new gradient needs to be added, append it and define its properties
+      // gradients should start at a vertex and end at the opposite end of the circle
+      gradients.enter().append('linearGradient').attrs({
+        id: function id(d) {
+          return 'web-chart-gradient_' + d.parentIndex + '_' + d.originalIndex;
+        },
+        gradientUnits: 'userSpaceOnUse',
+        x1: function x1(d) {
+          return (Math.cos(startDegree + perRadians * d.originalIndex) * scale(d.yValue || 0)).toFixed(8);
+        },
+        y1: function y1(d) {
+          return (Math.sin(startDegree + perRadians * d.originalIndex) * scale(d.yValue || 0)).toFixed(8);
+        },
+        x2: 0,
+        y2: 0
+      }).merge(gradients);
+
+      flattenedMatrix.forEach(function (lg) {
+        var stopData = [(0, _valueOf2.default)(_this5.props.fill, null, lg.originalIndex), (0, _valueOf2.default)(_this5.props.fill, null, lg.originalIndex)];
+
+        var stops = _this5.defs.selectAll('#web-chart-gradient_' + lg.parentIndex + '_' + lg.originalIndex).selectAll('stop').data(stopData);
+
+        stops.exit().remove();
+
+        stops.enter().append('stop').attrs({
+          offset: function offset(d, i) {
+            return i * 100 + '%';
+          },
+          'stop-color': function stopColor(d) {
+            return d;
+          },
+          'stop-opacity': function stopOpacity(d, i) {
+            return '' + (1 - i * 1);
+          }
+        }).merge(stops);
+      });
+
+      /* Build the data matrix (3d array) that represents the hierarchy of the actual svg elements
+       * <g> (Each item in the this.props.chartData property gets its own group)
+       *   <path> (There are n paths per rendered area where n is the number of data points.
+       * This is so each point can have its own gradient fill toward the center)
+       */
+      var dataMatrix = this.props.chartData.map(function (d, pi) {
+        var arr = new Array(d.length);
+        /* eslint-disable no-plusplus */
+        for (var i = 0; i < arr.length; i++) {
+          arr[i] = d.slice(0);
+          arr[i].forEach(function (child) {
+            return child.parentIndex = pi;
+          });
+        }
+        return arr;
+      });
+
+      var areas = this.webbings.selectAll('g').data(dataMatrix);
+
       areas.exit().call(this.applyTransition, function (selection) {
@@ -254,7 +339,49 @@ return selection.remove();
 
+      areas.enter().append('g').attrs({
+        class: function _class(d, i) {
+          return 'area_' + i;
+        }
+      }).merge(areas);
+
+      // create the actual paths - one for each data point
+      var paths = areas.selectAll('path').data(function (d) {
+        return d;
+      });
+
+      paths.exit().call(this.applyTransition, function (selection) {
+        return selection.remove();
+      });
+
+      // the paths should point to the <linearGradient> elements defined in the <defs>
+      paths.enter().append('path').attrs({
+        d: function d(_d) {
+          return emptyRadialLineGenerator(_d);
+        },
+        class: 'webbing-gradient',
+        fill: function fill(d, i) {
+          return 'url(#web-chart-gradient_' + d[i].parentIndex + '_' + i + ')';
+        },
+        stroke: function stroke(d, i) {
+          return 'url(#web-chart-gradient_' + d[i].parentIndex + '_' + i + ')';
+        }
+      }).merge(paths).call(this.applyTransition, function (selection) {
+        return selection.attrs({ d: function d(_d2) {
+            return radialLineGenerator(_d2);
+          } });
+      });
+    }
+  }, {
+    key: 'renderFill',
+    value: function renderFill(isFilled, emptyRadialLineGenerator, radialLineGenerator) {
       /* eslint-disable no-underscore-dangle */
       var _this = this;
+      var areas = this.webbings.selectAll(isFilled ? '.webbing-area' : '.webbing-outline').data(this.props.chartData, this.getUniqueDataKey);
+
+      areas.exit().call(this.applyTransition, function (selection) {
+        return selection.remove();
+      });
+
       areas.enter().append('path').attrs({
-        d: function d(_d) {
-          return emptyRadialLineGenerator(_d);
+        d: function d(_d3) {
+          return emptyRadialLineGenerator(_d3);
         },
@@ -277,4 +404,4 @@ class: isFilled ? 'webbing-area' : 'webbing-outline',
       }).merge(areas).call(this.applyTransition, function (selection) {
-        return selection.attrs({ d: function d(_d2) {
-            return radialLineGenerator(_d2);
+        return selection.attrs({ d: function d(_d4) {
+            return radialLineGenerator(_d4);
           } });
@@ -286,4 +413,7 @@ });
     value: function renderPlots() {
+      var _this6 = this;
+
       var data = this.props.chartData[0] || [];
       var perDegree = Math.PI * 2 / data.length;
+      var isGradient = _lodash2.default.isArray(this.props.fill);
 
@@ -297,15 +427,4 @@ var plotGroups = this.plots.selectAll('.webbing-plot-group').data(this.props.chartData, this.getUniqueDataKey);
 
-      /* eslint-disable no-underscore-dangle */
-      var _this = this;
       var groups = plotGroups.enter().append('g').attrs({
         class: 'webbing-plot-group'
-      }).styles({
-        fill: function fill() {
-          for (var _len4 = arguments.length, args = Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-            args[_key4] = arguments[_key4];
-          }
-
-          return _valueOf2.default.apply(undefined, [_this.props.stroke].concat(args));
-        },
-        stroke: 'none'
       }).merge(plotGroups);
@@ -323,3 +442,10 @@
         r: this.props.plotRadius,
-        class: 'circle'
+        class: 'circle',
+        fill: function fill() {
+          for (var _len4 = arguments.length, args = Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+            args[_key4] = arguments[_key4];
+          }
+
+          return isGradient ? _valueOf2.default.apply(undefined, [_this6.props.fill].concat(args)) : _valueOf2.default.apply(undefined, [_this6.props.stroke].concat(args));
+        }
       }).merge(plots).call(this.applyTransition, function (selection) {
@@ -339,3 +465,3 @@ return selection.attrs({
     value: function renderLabels() {
-      var _this5 = this;
+      var _this7 = this;
 
@@ -348,9 +474,9 @@ if (this.props.labelFormat && this.hasData()) {
         return data.map(function (d, i) {
-          var degree = _this5.normalizeAngle(startDegree + perRadians * i);
+          var degree = _this7.normalizeAngle(startDegree + perRadians * i);
           var x = Math.cos(degree) * maxRadius;
           var y = Math.sin(degree) * maxRadius;
-          var labelValue = _this5.props.labelFormat(d, i, { x: x, y: y, degree: degree });
+          var labelValue = _this7.props.labelFormat(d, i, { x: x, y: y, degree: degree });
           var key = d.xValue || i;
           if (_lodash2.default.isString(labelValue) || _lodash2.default.isNumber(labelValue)) {
-            return _this5.renderTextLabel(labelValue, degree, x, y, key);
+            return _this7.renderTextLabel(labelValue, degree, x, y, key);
           }
@@ -489,7 +615,7 @@ return _react2.default.createElement(
 var _initialiseProps = function _initialiseProps() {
-  var _this6 = this;
+  var _this8 = this;
 
   this.onMouseover = function (data) {
-    if (_this6.props.onMouseover) {
-      _this6.props.onMouseover(data.original);
+    if (_this8.props.onMouseover) {
+      _this8.props.onMouseover(data.original);
     }
@@ -499,4 +625,4 @@ };
   this.onMouseout = function (data) {
-    if (_this6.props.onMouseout) {
-      _this6.props.onMouseout(data.original);
+    if (_this8.props.onMouseout) {
+      _this8.props.onMouseout(data.original);
     }
@@ -506,4 +632,4 @@ };
   this.onPlotClick = function (eventElement) {
-    if (_this6.props.onElementClick) {
-      _this6.props.onElementClick(eventElement.original);
+    if (_this8.props.onElementClick) {
+      _this8.props.onElementClick(eventElement.original);
     }
@@ -513,3 +639,3 @@ };
   this.getUniqueDataKey = function (dataSet, i) {
-    return _this6.props.valueKeys[i];
+    return _this8.props.valueKeys[i];
   };
@@ -522,3 +648,3 @@
 
-    var filter = _valueOf2.default.apply(undefined, [_this6.props.filter].concat(args));
+    var filter = _valueOf2.default.apply(undefined, [_this8.props.filter].concat(args));
     if (filter) {
@@ -525,0 +651,0 @@ return (0, _asURLFragment2.default)(filter);

package.json

 {
   "name": "nud3",
-  "version": "0.5.24",
+  "version": "0.5.25",
   "description": "New D3 composable charts for React",
@@ -5,0 +5,0 @@ "repository": "https://github.com/nuvi/nud3",

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

Worsened metrics

Total package byte prevSize

318809

decreased by-6.73%

Number of package files

53

decreased by-7.02%

Lines of code

7843

decreased by-6.69%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes