react-vis - npm Package Compare versions

Comparing version 0.10.2 to 0.10.3

dist/radial-chart/index.js

@@ -95,9 +95,10 @@ 'use strict';
       return {
-        width: _react2.default.PropTypes.number.isRequired,
-        height: _react2.default.PropTypes.number.isRequired,
+        animation: _animationUtils.AnimationPropType,
+        height: _react.PropTypes.number.isRequired,
         margin: _chartUtils.MarginPropType,
-        animation: _animationUtils.AnimationPropType,
-        onSectionMouseOver: _react2.default.PropTypes.func,
-        onSectionMouseOut: _react2.default.PropTypes.func,
-        onSectionClick: _react2.default.PropTypes.func
+        onSectionMouseOver: _react.PropTypes.func,
+        onSectionMouseOut: _react.PropTypes.func,
+        onSectionClick: _react.PropTypes.func,
+        showLabels: _react.PropTypes.bool,
+        width: _react.PropTypes.number.isRequired
       };
@@ -232,16 +233,135 @@ }
     }
+
+    /**
+     * Generate the svg pie slices to be rendered
+     * @param {Array} pieData - the d3 generate information for drawing slices
+     * @param {Func} arc - the arc generator
+     * @returns {function} the react content functor
+     * @private
+     */
+
   }, {
-    key: 'render',
-    value: function render() {
+    key: '_renderPieSlice',
+    value: function _renderPieSlice(pieData, arc) {
+      var opacityFunctor = this._getAttributeFunctor('opacity');
+      var fillFunctor = this._getAttributeFunctor('fill') || this._getAttributeFunctor('color');
+      var strokeFunctor = this._getAttributeFunctor('stroke') || this._getAttributeFunctor('color');
+      return function (d, i) {
+        return _react2.default.createElement('path', {
+          className: 'rv-radial-chart__series--pie__slice',
+          d: arc(pieData[i]),
+          style: {
+            opacity: opacityFunctor && opacityFunctor(d),
+            stroke: strokeFunctor && strokeFunctor(d),
+            fill: fillFunctor && fillFunctor(d)
+          },
+          key: i
+        });
+      };
+    }
+
+    /**
+     * Generate the svg labels to be rendered.
+     * @param {Array} pieData - the d3 generate information for drawing slices
+     * @returns {function} the react content functor
+     * @private
+     */
+
+  }, {
+    key: '_renderLabel',
+    value: function _renderLabel(pieData) {
+      var radiusFunctor = (0, _scalesUtils.getAttributeFunctor)(this.state.scaleProps, 'radius');
+      return function (d, i) {
+        // reject the label if its not affixed to the section
+        var canRenderMainLabel = d.label && typeof d.label === 'string';
+        var canRenderSubLabel = d.subLabel && typeof d.subLabel === 'string';
+        if (!canRenderMainLabel && !canRenderSubLabel) {
+          return;
+        }
+        // this equation finds the center of the pie wedge and place the label there
+        // there is a quarter circle correction, due to where d3 places it's coord system
+        var angle = (pieData[i].startAngle + pieData[i].endAngle) / 2 - Math.PI / 2;
+        // we then translate a g to just outside the location of the wedge
+        var xTrans = 1.1 * radiusFunctor(d) * Math.cos(angle);
+        var yTrans = 1.1 * radiusFunctor(d) * Math.sin(angle);
+        // finally we select which way we want the text to be oriented
+        // if its on the left half of the circle, the it should be right aligned
+        // and vice versa for the right half
+        var textAnchor = angle > 0.5 * Math.PI && angle < 1.5 * Math.PI ? 'end' : 'start';
+        return _react2.default.createElement(
+          'g',
+          { transform: 'translate(' + xTrans + ',' + yTrans + ')', key: i + '-text-wrapper' },
+          canRenderMainLabel && _react2.default.createElement(
+            'text',
+            {
+              className: 'rv-radial-chart__series--pie-label-primary',
+              x: '0',
+              y: '0',
+              fontSize: '12',
+              textAnchor: textAnchor
+            },
+            d.label
+          ),
+          canRenderSubLabel && _react2.default.createElement(
+            'text',
+            {
+              className: 'rv-radial-chart__series--pie-label-secondary',
+              x: '0',
+              y: '15',
+              fontSize: '10',
+              textAnchor: textAnchor
+            },
+            d.subLabel
+          )
+        );
+      };
+    }
+
+    /**
+     * Generate invisible svg overlays for applying listeners to
+     * @param {Array} pieData - the d3 generate information for drawing slices
+     * @param {Func} arc - the arc generator
+     * @returns {function} the react content functor
+     * @private
+     */
+
+  }, {
+    key: '_renderOverlay',
+    value: function _renderOverlay(pieData, arc) {
       var _this2 = this;
 
       var _props = this.props,
-          animation = _props.animation,
-          height = _props.height,
           onSectionMouseOver = _props.onSectionMouseOver,
           onSectionMouseOut = _props.onSectionMouseOut,
-          onSectionClick = _props.onSectionClick,
-          width = _props.width;
+          onSectionClick = _props.onSectionClick;
 
 
+      return function (d, i) {
+        return _react2.default.createElement('path', {
+          className: 'rv-radial-chart__series--pie__slice-overlay',
+          d: arc(pieData[i]),
+          style: { opacity: 0 },
+          onMouseEnter: function onMouseEnter(e) {
+            return _this2._sectionHandler(onSectionMouseOver, pieData[i], e);
+          },
+          onMouseLeave: function onMouseLeave(e) {
+            return _this2._sectionHandler(onSectionMouseOut, pieData[i], e);
+          },
+          onClick: function onClick(e) {
+            return _this2._sectionHandler(onSectionClick, pieData[i], e);
+          },
+          key: i + '-listeners'
+        });
+      };
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props2 = this.props,
+          animation = _props2.animation,
+          height = _props2.height,
+          showLabels = _props2.showLabels,
+          width = _props2.width;
+
+
       if (animation) {
@@ -263,6 +383,2 @@ return _react2.default.createElement(
 
-      var opacityFunctor = this._getAttributeFunctor('opacity');
-      var fillFunctor = this._getAttributeFunctor('fill') || this._getAttributeFunctor('color');
-      var strokeFunctor = this._getAttributeFunctor('stroke') || this._getAttributeFunctor('color');
-
       var pie = d3Shape.pie().sort(null).value(function (d) {
@@ -292,22 +408,17 @@ return d.angle;
               ref: 'container' },
-            data.map(function (d, i) {
-              return _react2.default.createElement('path', {
-                d: arc(pieData[i]),
-                style: {
-                  opacity: opacityFunctor && opacityFunctor(d),
-                  stroke: strokeFunctor && strokeFunctor(d),
-                  fill: fillFunctor && fillFunctor(d)
-                },
-                onMouseEnter: function onMouseEnter(e) {
-                  return _this2._sectionHandler(onSectionMouseOver, pieData[i], e);
-                },
-                onMouseLeave: function onMouseLeave(e) {
-                  return _this2._sectionHandler(onSectionMouseOut, pieData[i], e);
-                },
-                onClick: function onClick(e) {
-                  return _this2._sectionHandler(onSectionClick, pieData[i], e);
-                },
-                key: i
-              });
-            })
+            _react2.default.createElement(
+              'g',
+              { className: 'rv-radial-chart__series--pie-slices-wrapper' },
+              data.map(this._renderPieSlice(pieData, arc))
+            ),
+            _react2.default.createElement(
+              'g',
+              { className: 'rv-radial-chart__series--pie-labels-wrapper' },
+              showLabels && data.map(this._renderLabel(pieData))
+            ),
+            _react2.default.createElement(
+              'g',
+              { className: 'rv-radial-chart__series--pie-overlays-wrapper' },
+              data.map(this._renderOverlay(pieData, arc))
+            )
           )
@@ -314,0 +425,0 @@ )

package.json

 {
   "name": "react-vis",
-  "version": "0.10.2",
+  "version": "0.10.3",
   "license": "MIT",
@@ -5,0 +5,0 @@ "author": "Visualization Team <[e-mail]>",

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

308490

increased by1.3%

Lines of code

6232

increased by1.7%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes