react-vis - npm Package Compare versions

Comparing version 0.3.1 to 0.3.2

dist/lib/plot/xy-plot.js

@@ -99,5 +99,5 @@ 'use strict';
     _this._mouseMoveHandler = _this._mouseMoveHandler.bind(_this);
-    var children = props.children;
     var stackBy = props.stackBy;
 
+    var children = (0, _seriesUtils.getSeriesChildren)(props.children);
     var data = (0, _seriesUtils.getStackedData)(children, stackBy);
@@ -114,3 +114,4 @@ _this.state = {
     value: function componentWillReceiveProps(nextProps) {
-      var nextData = (0, _seriesUtils.getStackedData)(nextProps.children, nextProps.stackBy);
+      var children = (0, _seriesUtils.getSeriesChildren)(nextProps.children);
+      var nextData = (0, _seriesUtils.getStackedData)(children, nextProps.stackBy);
       var scaleMixins = this.state.scaleMixins;
@@ -224,3 +225,3 @@
       var defaults = this._getScaleDefaults(props);
-      var children = _react2.default.Children.toArray(props.children);
+      var children = (0, _seriesUtils.getSeriesChildren)(props.children);
       Object.keys(props).forEach(function (key) {
@@ -227,0 +228,0 @@ var attr = ATTRIBUTES.find(function (a) {

dist/lib/radial-chart/radial-chart.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -38,5 +40,5 @@
 
-var _d = require('d3');
+var _d2 = require('d3');
 
-var _d2 = _interopRequireDefault(_d);
+var _d3 = _interopRequireDefault(_d2);
 
@@ -90,3 +92,6 @@ var _scalesUtils = require('../utils/scales-utils');
         }),
-        animation: _animationUtils.AnimationPropType
+        animation: _animationUtils.AnimationPropType,
+        onSectionMouseOver: _react2.default.PropTypes.func,
+        onSectionMouseOut: _react2.default.PropTypes.func,
+        onSectionClick: _react2.default.PropTypes.func
       };
@@ -118,2 +123,6 @@ }
     };
+    _this._sectionMouseOut = _this._sectionMouseOut.bind(_this);
+    _this._sectionMouseOver = _this._sectionMouseOver.bind(_this);
+    _this._sectionClick = _this._sectionClick.bind(_this);
+    _this._arc = null;
     return _this;
@@ -148,2 +157,66 @@ }
     /**
+     * Triggers a callback on a section if the callback is set.
+     * @param {function} handler Callback function.
+     * @param {Object} d Data point of the arc.
+     * @private
+     */
+
+  }, {
+    key: '_triggerSectionHandler',
+    value: function _triggerSectionHandler(handler, d) {
+      if (handler) {
+        var _arc$centroid = this._arc.centroid(d);
+
+        var _arc$centroid2 = _slicedToArray(_arc$centroid, 2);
+
+        var x = _arc$centroid2[0];
+        var y = _arc$centroid2[1];
+
+        handler(d.data, { event: _d3.default.event, x: x, y: y });
+      }
+    }
+
+    /**
+     * `mouseover` handler for the section.
+     * @param {Object} d Data point.
+     * @private
+     */
+
+  }, {
+    key: '_sectionMouseOver',
+    value: function _sectionMouseOver(d) {
+      var onSectionMouseOver = this.props.onSectionMouseOver;
+
+      this._triggerSectionHandler(onSectionMouseOver, d);
+    }
+
+    /**
+     * `mouseout` handler for the section.
+     * @param {Object} d Data point.
+     * @private
+     */
+
+  }, {
+    key: '_sectionMouseOut',
+    value: function _sectionMouseOut(d) {
+      var onSectionMouseOut = this.props.onSectionMouseOut;
+
+      this._triggerSectionHandler(onSectionMouseOut, d);
+    }
+
+    /**
+     * `click` handler for the section.
+     * @param {Object} d Data point.
+     * @private
+     */
+
+  }, {
+    key: '_sectionClick',
+    value: function _sectionClick(d) {
+      var onSectionClick = this.props.onSectionClick;
+
+      this._triggerSectionHandler(onSectionClick, d);
+    }
+
+    /**
      * Get the list of scale-related settings that should be applied by default.
@@ -253,3 +326,3 @@ * @param {Object} props Object of props.
       var container = (0, _reactUtils.getDOMNode)(this.refs.container);
-      var pie = _d2.default.layout.pie().sort(null).value(function (d) {
+      var pie = _d3.default.layout.pie().sort(null).value(function (d) {
         return d.angle;
@@ -263,5 +336,6 @@ });
       }
-      var arc = _d2.default.svg.arc().outerRadius(radiusFn).innerRadius(innerRadiusFn);
+      var arc = _d3.default.svg.arc().outerRadius(radiusFn).innerRadius(innerRadiusFn);
+      this._arc = arc;
 
-      var sections = _d2.default.select(container).selectAll('path').data(pie(data));
+      var sections = _d3.default.select(container).selectAll('path').data(pie(data)).on('click', this._sectionClick).on('mouseover', this._sectionMouseOver).on('mouseout', this._sectionMouseOut);
       this._applyTransition(sections).attr('d', arc).style('opacity', this._getAttributeValue('opacity')).style('fill', this._getAttributeFunctor('fill') || this._getAttributeFunctor('color')).style('stroke', this._getAttributeFunctor('stroke'));
@@ -268,0 +342,0 @@ }

dist/lib/treemap/treemap.js

@@ -7,2 +7,4 @@ 'use strict';
 
+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; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -20,2 +22,4 @@
 
+var _scalesUtils = require('../utils/scales-utils');
+
 var _theme = require('../theme');
@@ -49,19 +53,9 @@
 
-function _c(className) {
-  var prefix = 'rv-treemap';
-  if (!className) {
-    return prefix;
+function getFontColorFromBackground(background) {
+  if (background) {
+    return _d2.default.hsl(background).l > 0.57 ? '#222' : '#fff';
   }
-  return prefix + '__' + className;
+  return null;
 }
 
-var DEFAULT_SCALES = {
-  color: {
-    range: _theme.CONTINUOUS_COLOR_RANGE
-  },
-  opacity: {
-    range: _theme.OPACITY_RANGE
-  }
-};
-
 var Treemap = function (_React$Component) {
@@ -90,3 +84,7 @@ _inherits(Treemap, _React$Component);
           children: []
-        }
+        },
+        colorRange: _theme.CONTINUOUS_COLOR_RANGE,
+        _colorValue: _theme.DEFAULT_COLOR,
+        opacityRange: _theme.OPACITY_RANGE,
+        _opacityValue: 1
       };
@@ -102,35 +100,16 @@ }
     _this._renderLeaf = _this._renderLeaf.bind(_this);
+    _this.state = { scales: _this._getScaleFns(props) };
     return _this;
   }
 
-  /**
-   * Walk through the tree and collect all values from the tree.
-   * @param {Object} data Tree object.
-   * @param {string} propName Property name.
-   * @returns {Array} Flat array of values.
-   * @private
-   */
-
-
   _createClass(Treemap, [{
-    key: '_collectValuesFromTree',
-    value: function _collectValuesFromTree(data, propName) {
-      var result = [];
-      if (data[propName]) {
-        result.push(data[propName]);
-      }
-      if (Array.isArray(data.children)) {
-        data.children.forEach(function getValuesFromChildren(child) {
-          result = result.concat(this._collectValuesFromTree(child, propName));
-        }, this);
-      }
-      return result;
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(props) {
+      this.setState({ scales: this._getScaleFns(props) });
     }
 
     /**
-     * Get the scale function from the options and from the array.
-     * @param {Object} scaleOptions Scale options that are passed in props.
-     * @param {Array} defaultDomain Default domain.
-     * @param {Array} defaultRange Default range.
-     * @returns {*} Scale function or undefined if scaleOptions are not defined.
+     * Get the map of scale functions from the given props.
+     * @param {Object} props Props for the component.
+     * @returns {Object} Map of scale functions.
      * @private
@@ -140,48 +119,17 @@ */
   }, {
-    key: '_getScaleFunction',
-    value: function _getScaleFunction(scaleOptions, defaultDomain, defaultRange) {
-      var domain = void 0;
-      var range = void 0;
-      var scaleFn = void 0;
-      if (scaleOptions) {
-        domain = scaleOptions.domain;
-        range = scaleOptions.range;
-        scaleFn = scaleOptions.scaleFn;
-      }
-      if (!scaleFn) {
-        if (!domain) {
-          domain = defaultDomain;
-        }
-        if (!range) {
-          range = defaultRange;
-        }
-        scaleFn = _d2.default.scale.linear().range(range).domain(domain);
-      }
-      return scaleFn;
-    }
-  }, {
-    key: '_getColorScaleFunction',
-    value: function _getColorScaleFunction(data) {
-      var values = this._collectValuesFromTree(data, 'color');
-      if (values.length) {
-        var range = DEFAULT_SCALES.color.range;
-        var domain = _d2.default.extent(values);
-        var options = this.props.scales ? this.props.scales.color : null;
-        return this._getScaleFunction(options, domain, range);
-      }
-      return function () {
-        return _theme.DEFAULT_COLOR;
+    key: '_getScaleFns',
+    value: function _getScaleFns(props) {
+      var data = props.data;
+
+      // Adding _allData property to the object to reuse the existing
+      // getAttributeFunctor function.
+
+      var compatibleProps = _extends({}, props, {
+        _allData: data.children || []
+      });
+      return {
+        opacity: (0, _scalesUtils.getAttributeFunctor)(compatibleProps, 'opacity'),
+        color: (0, _scalesUtils.getAttributeFunctor)(compatibleProps, 'color')
       };
     }
-  }, {
-    key: '_getOpacityScaleFunction',
-    value: function _getOpacityScaleFunction(data) {
-      var values = this._collectValuesFromTree(data, 'opacity');
-      if (values.length) {
-        var range = DEFAULT_SCALES.opacity.range;
-        var domain = _d2.default.extent(values);
-        var options = this.props.scales ? this.props.scales.opacity : null;
-        return this._getScaleFunction(options, domain, range);
-      }
-    }
 
@@ -221,15 +169,8 @@ /**
       }
-      var data = this.props.data;
+      var scales = this.state.scales;
 
-      var colorScale = this._getColorScaleFunction(data);
-      var opacityScale = this._getOpacityScaleFunction(data);
-      // Don't draw the background for the first item: it's a container
-      // for the entire treemap.
-      var background = colorScale ? colorScale(node.color) : null;
-      var opacity = opacityScale ? opacityScale(node.opacity) : null;
-      var color = null;
-      if (background) {
-        color = _d2.default.hsl(background).l > 0.57 ? '#222' : '#fff';
-      }
 
+      var background = scales.color(node);
+      var opacity = scales.opacity(node);
+      var color = getFontColorFromBackground(background);
       var width = Math.max(0, node.dx - 1);
@@ -250,3 +191,3 @@ var height = Math.max(0, node.dy - 1);
           key: i,
-          className: _c('leaf'),
+          className: 'rv-treemap__leaf',
           style: style },
@@ -271,3 +212,3 @@ _react2.default.createElement(
         {
-          className: _c(),
+          className: 'rv-treemap',
           style: {
@@ -274,0 +215,0 @@ width: width + 'px',

dist/lib/utils/react-utils.js

@@ -46,3 +46,4 @@ 'use strict';
 /**
- * Support React 0.13 and greater where refs are React components, not DOM Nodes.
+ * Support React 0.13 and greater where refs are React components, not DOM
+ * nodes.
  * @param {*} ref React's ref.
@@ -49,0 +50,0 @@ * @returns {Element} DOM element.

package.json

 {
   "name": "react-vis",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "license": "MIT",
@@ -5,0 +5,0 @@ "author": "Anton Bulyenov <[e-mail]>",

README.md

@@ -85,2 +85,6 @@ # react-vis ![Build Status](https://travis-ci.org/uber-common/react-vis.svg?branch=master)
 
+### 0.3.1
+
+* Fixed the bug when no bars were shown for one point of ordinal data (see [#49](https://github.com/uber-common/react-vis/issues/49) for more details).
+
 ### 0.3
@@ -87,0 +91,0 @@

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

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

Improved metrics

Total package byte prevSize

379140

increased by0.36%

Lines of code

4637

increased by0.06%

Number of lines in readme file

108

increased by3.85%

No dependency changes