react-vis - npm Package Compare versions

Comparing version 1.7.10 to 1.8.0

dist/parallel-coordinates/index.js

@@ -149,4 +149,7 @@ 'use strict';
 
-  var scales = domains.reduce(function (acc, domain) {
-    acc[domain.name] = (0, _d3Scale.scaleLinear)().domain(domain.domain).range([0, 1]);
+  var scales = domains.reduce(function (acc, _ref) {
+    var domain = _ref.domain,
+        name = _ref.name;
+
+    acc[name] = (0, _d3Scale.scaleLinear)().domain(domain).range([0, 1]);
     return acc;
@@ -157,5 +160,8 @@ }, {});
     var mappedData = domains.map(function (domain, index) {
+      var getValue = domain.getValue,
+          name = domain.name;
+
       return {
-        x: domain.name,
-        y: scales[domain.name](row[domain.name])
+        x: name,
+        y: scales[name](getValue ? getValue(row) : row[name])
       };
@@ -162,0 +168,0 @@ });

dist/plot/series/area-series.js

@@ -31,2 +31,4 @@ 'use strict';
 
+var _reactUtils = require('../../utils/react-utils');
+
 var _abstractSeries = require('./abstract-series');
@@ -77,3 +79,3 @@
     key: '_renderArea',
-    value: function _renderArea(data, x, y0, y, curve, nullAccessor) {
+    value: function _renderArea(data, x, y0, y, curve, getNull) {
       var area = d3Shape.area();
@@ -87,3 +89,3 @@ if (curve !== null) {
       }
-      area = area.defined(nullAccessor);
+      area = area.defined(getNull);
       area = area.x(x).y0(y0).y1(y);
@@ -102,8 +104,13 @@ return area(data);
           marginTop = _props.marginTop,
-          nullAccessor = _props.nullAccessor,
           style = _props.style;
 
+
+      if (this.props.nullAccessor) {
+        (0, _reactUtils.warning)('nullAccessor has been renamed to getNull', true);
+      }
+
       if (!data) {
         return null;
       }
+
       if (animation) {
@@ -124,3 +131,5 @@ return _react2.default.createElement(
       var opacity = Number.isFinite(newOpacity) ? newOpacity : _theme.DEFAULT_OPACITY;
-      var d = this._renderArea(data, x, y0, y, curve, nullAccessor);
+      var getNull = this.props.nullAccessor || this.props.getNull;
+      var d = this._renderArea(data, x, y0, y, curve, getNull);
+
       return _react2.default.createElement('path', {
@@ -138,3 +147,4 @@ d: d,
           fill: fill
-        }, style) });
+        }, style)
+      });
     }
@@ -148,6 +158,6 @@ }]);
 AreaSeries.propTypes = _extends({}, _abstractSeries2.default.propTypes, {
-  nullAccessor: _propTypes2.default.func
+  getNull: _propTypes2.default.func
 });
 AreaSeries.defaultProps = {
-  nullAccessor: function nullAccessor() {
+  getNull: function getNull() {
     return true;
@@ -154,0 +164,0 @@ }

dist/plot/series/canvas-wrapper.js

@@ -143,2 +143,5 @@ 'use strict';
 
+      if (!ctx) {
+        return;
+      }
       ctx.scale(pixelRatio, pixelRatio);
@@ -145,0 +148,0 @@

dist/plot/series/label-series.js

@@ -77,2 +77,3 @@ 'use strict';
           _data = _props._data,
+          getLabel = _props.getLabel,
           marginLeft = _props.marginLeft,
@@ -106,8 +107,7 @@ marginTop = _props.marginTop,
         data.reduce(function (res, d, i) {
-          var label = d.label,
-              style = d.style,
+          var style = d.style,
               xOffset = d.xOffset,
               yOffset = d.yOffset;
 
-          if (!label) {
+          if (!getLabel(d)) {
             return res;
@@ -143,6 +143,7 @@ }
           }, style);
+          var textContent = getLabel(_data ? _data[i] : d);
           return res.concat([_react2.default.createElement(
             'text',
             attrs,
-            _data ? _data[i].label : label
+            textContent
           )]);
@@ -179,5 +180,8 @@ }, [])
   animation: false,
-  rotation: 0
+  rotation: 0,
+  getLabel: function getLabel(d) {
+    return d.label;
+  }
 };
 LabelSeries.displayName = 'LabelSeries';
 exports.default = LabelSeries;

dist/plot/series/line-series.js

@@ -31,2 +31,4 @@ 'use strict';
 
+var _reactUtils = require('../../utils/react-utils');
+
 var _abstractSeries = require('./abstract-series');
@@ -82,3 +84,3 @@
     key: '_renderLine',
-    value: function _renderLine(data, x, y, curve, nullAccessor) {
+    value: function _renderLine(data, x, y, curve, getNull) {
       var line = d3Shape.line();
@@ -92,3 +94,3 @@ if (curve !== null) {
       }
-      line = line.defined(nullAccessor);
+      line = line.defined(getNull);
       line = line.x(x).y(y);
@@ -105,5 +107,11 @@ return line(data);
 
+
+      if (this.props.nullAccessor) {
+        (0, _reactUtils.warning)('nullAccessor has been renamed to getNull', true);
+      }
+
       if (!data) {
         return null;
       }
+
       if (animation) {
@@ -121,3 +129,2 @@ return _react2.default.createElement(
           marginTop = _props2.marginTop,
-          nullAccessor = _props2.nullAccessor,
           strokeDasharray = _props2.strokeDasharray,
@@ -134,3 +141,4 @@ strokeStyle = _props2.strokeStyle,
       var opacity = Number.isFinite(newOpacity) ? newOpacity : _theme.DEFAULT_OPACITY;
-      var d = this._renderLine(data, x, y, curve, nullAccessor);
+      var getNull = this.props.nullAccessor || this.props.getNull;
+      var d = this._renderLine(data, x, y, curve, getNull);
 
@@ -150,3 +158,4 @@ return _react2.default.createElement('path', {
           stroke: stroke
-        }, style) });
+        }, style)
+      });
     }
@@ -162,3 +171,3 @@ }]);
   curve: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
-  nullAccessor: _propTypes2.default.func
+  getNull: _propTypes2.default.func
 });
@@ -171,3 +180,3 @@ LineSeries.defaultProps = {
   className: '',
-  nullAccessor: function nullAccessor() {
+  getNull: function getNull() {
     return true;
@@ -174,0 +183,0 @@ }

dist/plot/series/mark-series.js

@@ -25,2 +25,4 @@ 'use strict';
 
+var _reactUtils = require('../../utils/react-utils');
+
 var _theme = require('../../theme');
@@ -72,20 +74,21 @@
     key: '_renderCircle',
-    value: function _renderCircle(d, i, strokeWidth, style) {
+    value: function _renderCircle(d, i, strokeWidth, style, scalingFunctions) {
       var _this2 = this;
 
-      var sizeFunctor = this._getAttributeFunctor('size');
-      var opacityFunctor = this._getAttributeFunctor('opacity');
-      var fillFunctor = this._getAttributeFunctor('fill') || this._getAttributeFunctor('color');
-      var strokeFunctor = this._getAttributeFunctor('stroke') || this._getAttributeFunctor('color');
-      var xFunctor = this._getAttributeFunctor('x');
-      var yFunctor = this._getAttributeFunctor('y');
+      var fill = scalingFunctions.fill,
+          opacity = scalingFunctions.opacity,
+          size = scalingFunctions.size,
+          stroke = scalingFunctions.stroke,
+          x = scalingFunctions.x,
+          y = scalingFunctions.y;
 
+
       var attrs = {
-        r: sizeFunctor ? sizeFunctor(d) : _theme.DEFAULT_SIZE,
-        cx: xFunctor(d),
-        cy: yFunctor(d),
+        r: size ? size(d) : _theme.DEFAULT_SIZE,
+        cx: x(d),
+        cy: y(d),
         style: _extends({
-          opacity: opacityFunctor ? opacityFunctor(d) : _theme.DEFAULT_OPACITY,
-          stroke: strokeFunctor && strokeFunctor(d),
-          fill: fillFunctor && fillFunctor(d),
+          opacity: opacity ? opacity(d) : _theme.DEFAULT_OPACITY,
+          stroke: stroke && stroke(d),
+          fill: fill && fill(d),
           strokeWidth: strokeWidth || DEFAULT_STROKE_WIDTH
@@ -120,9 +123,16 @@ }, style),
           marginTop = _props.marginTop,
-          nullAccessor = _props.nullAccessor,
           strokeWidth = _props.strokeWidth,
           style = _props.style;
 
+
+      if (this.props.nullAccessor) {
+        (0, _reactUtils.warning)('nullAccessor has been renamed to getNull', true);
+      }
+
+      var getNull = this.props.nullAccessor || this.props.getNull;
+
       if (!data) {
         return null;
       }
+
       if (animation) {
@@ -136,9 +146,20 @@ return _react2.default.createElement(
 
+      var scalingFunctions = {
+        fill: this._getAttributeFunctor('fill') || this._getAttributeFunctor('color'),
+        opacity: this._getAttributeFunctor('opacity'),
+        size: this._getAttributeFunctor('size'),
+        stroke: this._getAttributeFunctor('stroke') || this._getAttributeFunctor('color'),
+        x: this._getAttributeFunctor('x'),
+        y: this._getAttributeFunctor('y')
+      };
+
       return _react2.default.createElement(
         'g',
-        { className: predefinedClassName + ' ' + className,
+        {
+          className: predefinedClassName + ' ' + className,
           ref: 'container',
-          transform: 'translate(' + marginLeft + ',' + marginTop + ')' },
+          transform: 'translate(' + marginLeft + ',' + marginTop + ')'
+        },
         data.map(function (d, i) {
-          return nullAccessor(d) && _this3._renderCircle(d, i, strokeWidth, style);
+          return getNull(d) && _this3._renderCircle(d, i, strokeWidth, style, scalingFunctions);
         })
@@ -154,7 +175,7 @@ );
 MarkSeries.propTypes = _extends({}, _abstractSeries2.default.propTypes, {
-  nullAccessor: _propTypes2.default.func,
+  getNull: _propTypes2.default.func,
   strokeWidth: _propTypes2.default.number
 });
 MarkSeries.defaultProps = {
-  nullAccessor: function nullAccessor() {
+  getNull: function getNull() {
     return true;
@@ -161,0 +182,0 @@ }

dist/plot/xy-plot.js

@@ -71,4 +71,2 @@ 'use strict';
 
-var OPTIONAL_SCALE_PROPS = ['Padding'];
-
 var DEFAULT_MARGINS = {
@@ -356,24 +354,2 @@ left: 40,
     /**
-     * Get the list of optional scale-related settings
-     * @param {Object} props Object of props.
-     * @returns {Object} Optional Props.
-     * @private
-     */
-
-  }, {
-    key: '_getOptionalScaleProps',
-    value: function _getOptionalScaleProps(props) {
-      return Object.keys(props).filter(function (prop) {
-        return OPTIONAL_SCALE_PROPS.map(function (option) {
-          return prop.endsWith(option);
-        }).every(function (x) {
-          return x;
-        });
-      }).reduce(function (obj, key) {
-        obj[key] = props[key];
-        return obj;
-      }, {});
-    }
-
-    /**
      * Get the map of scales from the props, apply defaults to them and then pass
@@ -398,3 +374,3 @@ * them further.
       var defaultScaleProps = this._getDefaultScaleProps(props);
-      var optionalScaleProps = this._getOptionalScaleProps(props);
+      var optionalScaleProps = (0, _scalesUtils.getOptionalScaleProps)(props);
       var userScaleProps = (0, _scalesUtils.extractScalePropsFromProps)(props, ATTRIBUTES);
@@ -480,3 +456,2 @@ var missingScaleProps = (0, _scalesUtils.getMissingScaleProps)(_extends({}, defaultScaleProps, optionalScaleProps, userScaleProps), allData, ATTRIBUTES);
         }
-
         return _react2.default.cloneElement(child, _extends({}, dimensions, {
@@ -483,0 +458,0 @@ animation: animation

dist/radar-chart/index.js

@@ -128,3 +128,5 @@ 'use strict';
 
-  return domains.map(function (domain, index) {
+  return domains.map(function (_ref, index) {
+    var name = _ref.name;
+
     var angle = index / domains.length * Math.PI * 2 + startingAngle;
@@ -135,3 +137,3 @@ var radius = 1.2;
       y: radius * Math.sin(angle),
-      label: domain.name,
+      label: name,
       style: style
@@ -160,4 +162,7 @@ };
 
-  var scales = domains.reduce(function (acc, domain) {
-    acc[domain.name] = (0, _d3Scale.scaleLinear)().domain(domain.domain).range([0, 1]);
+  var scales = domains.reduce(function (acc, _ref2) {
+    var domain = _ref2.domain,
+        name = _ref2.name;
+
+    acc[name] = (0, _d3Scale.scaleLinear)().domain(domain).range([0, 1]);
     return acc;
@@ -167,8 +172,11 @@ }, {});
   return data.map(function (row, rowIndex) {
-    var mappedData = domains.map(function (domain, index) {
-      var dataPoint = row[domain.name];
+    var mappedData = domains.map(function (_ref3, index) {
+      var name = _ref3.name,
+          getValue = _ref3.getValue;
+
+      var dataPoint = getValue ? getValue(row) : row[name];
       // error handling if point doesn't exist
       var angle = index / domains.length * Math.PI * 2 + startingAngle;
       // dont let the radius become negative
-      var radius = Math.max(scales[domain.name](dataPoint), 0);
+      var radius = Math.max(scales[name](dataPoint), 0);
       return { x: radius * Math.cos(angle), y: radius * Math.sin(angle) };
@@ -175,0 +183,0 @@ });

dist/radial-chart/index.js

@@ -78,7 +78,6 @@ 'use strict';
 function getWedgesToRender(_ref) {
-  var data = _ref.data;
+  var data = _ref.data,
+      getAngle = _ref.getAngle;
 
-  var pie = (0, _d3Shape.pie)().sort(null).value(function (d) {
-    return d.angle;
-  });
+  var pie = (0, _d3Shape.pie)().sort(null).value(getAngle);
   var pieData = pie(data).reverse();
@@ -96,9 +95,10 @@ return pieData.map(function (row, index) {
 
-function generateLabels(mappedData) {
+function generateLabels(mappedData, accessors) {
+  var getLabel = accessors.getLabel,
+      getSubLabel = accessors.getSubLabel;
+
   return mappedData.reduce(function (res, row) {
     var angle = row.angle,
         angle0 = row.angle0,
-        radius = row.radius,
-        label = row.label,
-        subLabel = row.subLabel;
+        radius = row.radius;
 
@@ -111,7 +111,7 @@ var centeredAngle = (angle + angle0) / 2;
     var newLabels = [];
-    if (row.label) {
+    if (getLabel(row)) {
       newLabels.push({
         angle: updatedAngle,
         radius: radius * 1.1,
-        label: label,
+        label: getLabel(row),
         style: { fontSize: '12px' }
@@ -121,7 +121,7 @@ });
 
-    if (subLabel) {
+    if (getSubLabel(row)) {
       newLabels.push({
         angle: updatedAngle,
         radius: radius * 1.1,
-        label: subLabel,
+        label: getSubLabel(row),
         yOffset: 12,
@@ -173,5 +173,8 @@ style: { fontSize: '10px' }
           onMouseEnter = _props.onMouseEnter,
-          labelsAboveChildren = _props.labelsAboveChildren;
+          labelsAboveChildren = _props.labelsAboveChildren,
+          getAngle = _props.getAngle,
+          getLabel = _props.getLabel,
+          getSubLabel = _props.getSubLabel;
 
-      var mappedData = getWedgesToRender({ data: data, height: height, hideRootNode: hideRootNode, width: width });
+      var mappedData = getWedgesToRender({ data: data, height: height, hideRootNode: hideRootNode, width: width, getAngle: getAngle });
       var radialDomain = (0, _seriesUtils.getRadialDomain)(mappedData);
@@ -194,2 +197,7 @@ var arcProps = _extends({
       var defaultMargin = (0, _chartUtils.getRadialLayoutMargin)(width, height, maxRadius);
+
+      var labels = generateLabels(mappedData, {
+        getLabel: getLabel,
+        getSubLabel: getSubLabel
+      });
       return _react2.default.createElement(
@@ -206,6 +214,8 @@ _xyPlot2.default,
           yDomain: [-radialDomain, radialDomain] },
-        _react2.default.createElement(_arcSeries2.default, arcProps),
-        showLabels && !labelsAboveChildren && _react2.default.createElement(_labelSeries2.default, { data: generateLabels(mappedData) }),
+        _react2.default.createElement(_arcSeries2.default, _extends({}, arcProps, { getAngle: function getAngle(d) {
+            return d.angle;
+          } })),
+        showLabels && !labelsAboveChildren && _react2.default.createElement(_labelSeries2.default, { data: labels }),
         children,
-        showLabels && labelsAboveChildren && _react2.default.createElement(_labelSeries2.default, { data: generateLabels(mappedData) })
+        showLabels && labelsAboveChildren && _react2.default.createElement(_labelSeries2.default, { data: labels })
       );
@@ -230,2 +240,7 @@ }
   })).isRequired,
+  getAngle: _propTypes2.default.func,
+  getAngle0: _propTypes2.default.func,
+  getRadius: _propTypes2.default.func,
+  getRadius0: _propTypes2.default.func,
+  getLabel: _propTypes2.default.func,
   height: _propTypes2.default.number.isRequired,
@@ -238,3 +253,4 @@ labelsAboveChildren: _propTypes2.default.bool,
   width: _propTypes2.default.number.isRequired,
-  showLabels: _propTypes2.default.bool
+  showLabels: _propTypes2.default.bool,
+  subLabel: _propTypes2.default.func
 };
@@ -244,5 +260,23 @@ RadialChart.defaultProps = {
   colorType: 'category',
-  colorRange: _theme.DISCRETE_COLOR_RANGE
+  colorRange: _theme.DISCRETE_COLOR_RANGE,
+  getAngle: function getAngle(d) {
+    return d.angle;
+  },
+  getAngle0: function getAngle0(d) {
+    return d.angle0;
+  },
+  getRadius: function getRadius(d) {
+    return d.radius;
+  },
+  getRadius0: function getRadius0(d) {
+    return d.radius0;
+  },
+  getLabel: function getLabel(d) {
+    return d.label;
+  },
+  getSubLabel: function getSubLabel(d) {
+    return d.subLabel;
+  }
 };
 
 exports.default = RadialChart;

dist/sunburst/index.js

@@ -78,2 +78,3 @@ 'use strict';
    props.width {number} - the width of the graphic to be rendered
+   props.getSize {function} - accessor for the size
  * @returns {Array} Array of nodes.
@@ -85,8 +86,7 @@ */
       hideRootNode = _ref.hideRootNode,
-      width = _ref.width;
+      width = _ref.width,
+      getSize = _ref.getSize;
 
   var partitionFunction = (0, _d3Hierarchy.partition)();
-  var structuredInput = (0, _d3Hierarchy.hierarchy)(data).sum(function (d) {
-    return d.size;
-  });
+  var structuredInput = (0, _d3Hierarchy.hierarchy)(data).sum(getSize);
   var radius = Math.min(width, height) / 2 - 10;
@@ -116,10 +116,15 @@ var x = (0, _d3Scale.scaleLinear)().range([0, 2 * Math.PI]);
  * @param {Array} mappedData - Array of nodes.
+ * @param {Object} accessors - object of accessors
  * @returns {Array} array of node for rendering as labels
  */
-function buildLabels(mappedData) {
-  return mappedData.filter(function (row) {
-    return row.label;
-  }).map(function (row) {
-    var truedAngle = -1 * row.angle + Math.PI / 2;
-    var truedAngle0 = -1 * row.angle0 + Math.PI / 2;
+function buildLabels(mappedData, accessors) {
+  var getAngle = accessors.getAngle,
+      getAngle0 = accessors.getAngle0,
+      getLabel = accessors.getLabel,
+      getRadius0 = accessors.getRadius0;
+
+
+  return mappedData.filter(getLabel).map(function (row) {
+    var truedAngle = -1 * getAngle(row) + Math.PI / 2;
+    var truedAngle0 = -1 * getAngle0(row) + Math.PI / 2;
     var angle = (truedAngle0 + truedAngle) / 2;
@@ -133,5 +138,4 @@ var rotateLabels = !row.dontRotateLabel;
       radius: null,
-      x: row.radius0 * Math.cos(angle),
-      y: row.radius0 * Math.sin(angle),
-      // style: row.labelStyle,
+      x: getRadius0(row) * Math.cos(angle),
+      y: getRadius0(row) * Math.sin(angle),
       style: _extends({
@@ -162,2 +166,4 @@ textAnchor: rotAngle > 90 ? 'end' : 'start'
       var _props = this.props,
+          getAngle = _props.getAngle,
+          getAngle0 = _props.getAngle0,
           animation = _props.animation,
@@ -169,10 +175,20 @@ className = _props.className,
           hideRootNode = _props.hideRootNode,
+          getLabel = _props.getLabel,
           width = _props.width,
+          getSize = _props.getSize,
           colorType = _props.colorType;
 
-      var mappedData = getNodesToRender({ data: data, height: height, hideRootNode: hideRootNode, width: width });
+      var mappedData = getNodesToRender({ data: data, height: height, hideRootNode: hideRootNode, width: width, getSize: getSize });
       var radialDomain = (0, _seriesUtils.getRadialDomain)(mappedData);
       var margin = (0, _chartUtils.getRadialLayoutMargin)(width, height, radialDomain);
 
-      var labelData = buildLabels(mappedData);
+      var labelData = buildLabels(mappedData, {
+        getAngle: getAngle,
+        getAngle0: getAngle0,
+        getLabel: getLabel,
+        getRadius0: function getRadius0(d) {
+          return d.radius0;
+        }
+      });
+
       var hofBuilder = function hofBuilder(f) {
@@ -209,3 +225,3 @@ return function (e, i) {
         }, {}))),
-        labelData.length > 0 && _react2.default.createElement(_labelSeries2.default, { data: labelData }),
+        labelData.length > 0 && _react2.default.createElement(_labelSeries2.default, { data: labelData, getLabel: getLabel }),
         children
@@ -222,2 +238,4 @@ );
   animation: _animation.AnimationPropType,
+  getAngle: _propTypes2.default.func,
+  getAngle0: _propTypes2.default.func,
   className: _propTypes2.default.string,
@@ -228,13 +246,30 @@ colorType: _propTypes2.default.string,
   hideRootNode: _propTypes2.default.bool,
+  getLabel: _propTypes2.default.func,
   onValueClick: _propTypes2.default.func,
   onValueMouseOver: _propTypes2.default.func,
   onValueMouseOut: _propTypes2.default.func,
+  getSize: _propTypes2.default.func,
   width: _propTypes2.default.number.isRequired
 };
 Sunburst.defaultProps = {
+  getAngle: function getAngle(d) {
+    return d.angle;
+  },
+  getAngle0: function getAngle0(d) {
+    return d.angle0;
+  },
   className: '',
   colorType: 'literal',
-  hideRootNode: false
+  getColor: function getColor(d) {
+    return d.color;
+  },
+  hideRootNode: false,
+  getLabel: function getLabel(d) {
+    return d.label;
+  },
+  getSize: function getSize(d) {
+    return d.size;
+  }
 };
 
 exports.default = Sunburst;

dist/treemap/index.js

@@ -147,3 +147,4 @@ 'use strict';
           padding = _props.padding,
-          sortFunction = _props.sortFunction;
+          sortFunction = _props.sortFunction,
+          getSize = _props.getSize;
 
@@ -156,5 +157,5 @@ if (!data) {
         var partitionFunction = (0, _d3Hierarchy.partition)().size(mode === 'partition-pivot' ? [innerHeight, innerWidth] : [innerWidth, innerHeight]).padding(padding);
-        var _structuredInput = (0, _d3Hierarchy.hierarchy)(data).sum(function (d) {
-          return d.size;
-        }).sort(sortFunction);
+        var _structuredInput = (0, _d3Hierarchy.hierarchy)(data).sum(getSize).sort(function (a, b) {
+          return sortFunction(a, b, getSize);
+        });
         var mappedNodes = partitionFunction(_structuredInput).descendants();
@@ -175,5 +176,5 @@ if (mode === 'partition-pivot') {
         var packingFunction = (0, _d3Hierarchy.pack)().size([innerWidth, innerHeight]).padding(padding);
-        var _structuredInput2 = (0, _d3Hierarchy.hierarchy)(data).sum(function (d) {
-          return d.size;
-        }).sort(sortFunction);
+        var _structuredInput2 = (0, _d3Hierarchy.hierarchy)(data).sum(getSize).sort(function (a, b) {
+          return sortFunction(a, b, getSize);
+        });
         return packingFunction(_structuredInput2).descendants();
@@ -184,5 +185,5 @@ }
       var treemapingFunction = (0, _d3Hierarchy.treemap)(tileFn).tile(tileFn).size([innerWidth, innerHeight]).padding(padding);
-      var structuredInput = (0, _d3Hierarchy.hierarchy)(data).sum(function (d) {
-        return d.size;
-      }).sort(sortFunction);
+      var structuredInput = (0, _d3Hierarchy.hierarchy)(data).sum(getSize).sort(function (a, b) {
+        return sortFunction(a, b, getSize);
+      });
       return treemapingFunction(structuredInput).descendants();
@@ -220,3 +221,5 @@ }
   sortFunction: _propTypes2.default.func,
-  width: _propTypes2.default.number.isRequired
+  width: _propTypes2.default.number.isRequired,
+  getSize: _propTypes2.default.func,
+  getColor: _propTypes2.default.func
 };
@@ -240,6 +243,18 @@
   padding: 1,
-  sortFunction: function sortFunction(a, b) {
-    return a.size - b.size;
+  sortFunction: function sortFunction(a, b, accessor) {
+    if (!accessor) {
+      return 0;
+    }
+    return accessor(a) - accessor(b);
+  },
+  getSize: function getSize(d) {
+    return d.size;
+  },
+  getColor: function getColor(d) {
+    return d.color;
+  },
+  getLabel: function getLabel(d) {
+    return d.title;
   }
 };
 exports.default = Treemap;

dist/treemap/treemap-dom.js

@@ -65,2 +65,3 @@ 'use strict';
           hideRootNode = _props.hideRootNode,
+          getLabel = _props.getLabel,
           mode = _props.mode,
@@ -86,3 +87,4 @@ nodes = _props.nodes,
             animation: animation,
-            node: node
+            node: node,
+            getLabel: getLabel
           }, _this2.props, {
@@ -89,0 +91,0 @@ x0: useCirclePacking ? node.x : node.x0,

dist/treemap/treemap-leaf.js

@@ -67,2 +67,3 @@ 'use strict';
           animation = _props.animation,
+          getLabel = _props.getLabel,
           mode = _props.mode,
@@ -93,4 +94,5 @@ node = _props.node,
       var color = (0, _scalesUtils.getFontColorFromBackground)(background);
-      var title = node.data.title;
+      var data = node.data;
 
+      var title = getLabel(data);
       var leafStyle = _extends({
@@ -97,0 +99,0 @@ top: useCirclePacking ? y0 - r : y0,

dist/treemap/treemap-svg.js

@@ -123,3 +123,9 @@ 'use strict';
           colorType: 'literal',
+          getColor: function getColor(d) {
+            return d.color;
+          },
           sizeType: 'literal',
+          getSize: function getSize(d) {
+            return d.size;
+          },
           style: style }),
@@ -126,0 +132,0 @@ minY: minY,

dist/utils/data-utils.js

@@ -6,3 +6,2 @@ "use strict";
 });
-exports.getObjectValueAccessor = getObjectValueAccessor;
 exports.getUniquePropertyValues = getUniquePropertyValues;
@@ -31,13 +30,2 @@ exports.addValueToArray = addValueToArray;
 /**
- * Get the value accessor function that gets a property from an object.
- * @param {string} propertyName Property name.
- * @returns {Function} Value accessor.
- */
-function getObjectValueAccessor(propertyName) {
-  return function (obj) {
-    return obj[propertyName];
-  };
-}
-
-/**
  * Get unique property values from an array.
@@ -48,4 +36,4 @@ * @param {Array} arr Array of data.
  */
-function getUniquePropertyValues(arr, propertyName) {
-  var setOfValues = new Set(arr.map(getObjectValueAccessor(propertyName)));
+function getUniquePropertyValues(arr, accessor) {
+  var setOfValues = new Set(arr.map(accessor));
   return Array.from(setOfValues);
@@ -52,0 +40,0 @@ }

dist/utils/react-utils.js

@@ -100,2 +100,20 @@ 'use strict';
 
+/**
+ * Safely returns list of CSS from a CSS Style Sheet.
+ * @param {CSSStyleSheet} styleSheet  - CSS style sheet
+ * @returns {CSSRuleList} list of CSS rules
+ */
+function getCSSRules(styleSheet) {
+  // Without this check accessing styleSheet.cssRules throws SecurityErrror in Firefox
+  // See: https://github.com/uber/react-vis/issues/650
+  if (styleSheet.ownerNode.tagName === 'STYLE' || styleSheet.ownerNode.tagName === 'LINK' && styleSheet.ownerNode.href && styleSheet.ownerNode.href.startsWith(document.location.origin)) {
+    try {
+      return styleSheet.rules || styleSheet.cssRules;
+    } catch (err) {
+      return [];
+    }
+  }
+  return [];
+}
+
 // special tag for using to check if the style file has been imported
@@ -111,7 +129,5 @@ // represented the md5 hash of the phrase "react-vis is cool"
 
-  var foundImportTag = [].concat(_toConsumableArray(new Array(document.styleSheets.length))).some(function (e, i) {
-    var styleSheet = document.styleSheets[i];
-    var CSSRulesList = styleSheet.rules || styleSheet.cssRules;
-    return [].concat(_toConsumableArray(new Array(CSSRulesList ? CSSRulesList.length : 0))).some(function (el, j) {
-      var selector = CSSRulesList[j];
+  var foundImportTag = [].concat(_toConsumableArray(document.styleSheets)).some(function (styleSheet) {
+    var CSSRulesList = getCSSRules(styleSheet);
+    return [].concat(_toConsumableArray(CSSRulesList)).some(function (selector) {
       return selector.selectorText === MAGIC_CSS_RULE;
@@ -118,0 +134,0 @@ });

dist/utils/scales-utils.js

@@ -15,3 +15,3 @@ 'use strict';
 exports.getScaleFnFromScaleObject = getScaleFnFromScaleObject;
-exports.getDomainByAttr = getDomainByAttr;
+exports.getDomainByAccessor = getDomainByAccessor;
 exports._getScaleDistanceAndAdjustedDomain = _getScaleDistanceAndAdjustedDomain;
@@ -30,2 +30,3 @@ exports._adjustCategoricalScale = _adjustCategoricalScale;
 exports.getXYPlotValues = getXYPlotValues;
+exports.getOptionalScaleProps = getOptionalScaleProps;
 
@@ -139,2 +140,11 @@ var _d3Scale = require('d3-scale');
 /**
+ * Title case a given string
+ * @param {String} str Array of values.
+ * @returns {String} titlecased string
+ */
+function toTitleCase(str) {
+  return '' + str[0].toUpperCase() + str.slice(1);
+}
+
+/**
  * Find the smallest distance between the values on a given scale and return
@@ -203,3 +213,4 @@ * the index of the element, where the smallest distance was found.
  * @param {Array} allData All data.
- * @param {string} attr Property name.
+ * @param {function} accessor - accessor for main value.
+ * @param {function} accessor0 - accessor for the naught value.
  * @param {string} type Scale type.
@@ -209,10 +220,9 @@ * @returns {Array} Domain.
  */
-function getDomainByAttr(allData, attr, type) {
+function getDomainByAccessor(allData, accessor, accessor0, type) {
   var domain = void 0;
-  var attr0 = attr + '0';
 
   // Collect both attr and available attr0 values from the array of data.
   var values = allData.reduce(function (data, d) {
-    var value = d[attr];
-    var value0 = d[attr0];
+    var value = accessor(d);
+    var value0 = accessor0(d);
     if (_isDefined(value)) {
@@ -246,6 +256,8 @@ data.push(value);
  * @param {string} type - the type of scale being used
+ * @param {function} accessor - the accessor function
+ * @param {function} accessor0 - the accessor function for the potential naught value
  * @returns {Object} Custom scale object.
  * @private
  */
-function _createScaleObjectForValue(attr, value, type) {
+function _createScaleObjectForValue(attr, value, type, accessor, accessor0) {
   if (type === LITERAL_SCALE_TYPE) {
@@ -259,3 +271,4 @@ return {
       baseValue: undefined,
-      isValue: true
+      isValue: true,
+      accessor: accessor
     };
@@ -273,3 +286,4 @@ }
     baseValue: undefined,
-    isValue: true
+    isValue: true,
+    accessor: accessor
   };
@@ -280,12 +294,23 @@ }
  * Create a regular scale object for a further use from the existing parameters.
- * @param {Array} domain Domain.
- * @param {Array} range Range.
- * @param {string} type Type.
- * @param {number} distance Distance.
- * @param {string} attr Attribute.
- * @param {number} baseValue Base value.
+ * @param {Array} domain - Domain.
+ * @param {Array} range - Range.
+ * @param {string} type - Type.
+ * @param {number} distance - Distance.
+ * @param {string} attr - Attribute.
+ * @param {number} baseValue - Base value.
+ * @param {function} accessor - Attribute accesor
+ * @param {function} accessor0 - Attribute accesor for potential naught value
  * @returns {Object} Scale object.
  * @private
  */
-function _createScaleObjectForFunction(domain, range, type, distance, attr, baseValue) {
+function _createScaleObjectForFunction(_ref) {
+  var domain = _ref.domain,
+      range = _ref.range,
+      type = _ref.type,
+      distance = _ref.distance,
+      attr = _ref.attr,
+      baseValue = _ref.baseValue,
+      accessor = _ref.accessor,
+      accessor0 = _ref.accessor0;
+
   return {
@@ -298,3 +323,5 @@ domain: domain,
     baseValue: baseValue,
-    isValue: false
+    isValue: false,
+    accessor: accessor,
+    accessor0: accessor0
   };
@@ -320,11 +347,17 @@ }
       type = _props$2 === undefined ? LINEAR_SCALE_TYPE : _props$2,
-      noFallBack = props[attr + 'NoFallBack'];
+      noFallBack = props[attr + 'NoFallBack'],
+      _props$3 = props['get' + toTitleCase(attr)],
+      accessor = _props$3 === undefined ? function (d) {
+    return d[attr];
+  } : _props$3,
+      _props$4 = props['get' + toTitleCase(attr) + '0'],
+      accessor0 = _props$4 === undefined ? function (d) {
+    return d[attr + '0'];
+  } : _props$4;
   var domain = props[attr + 'Domain'];
-
   // Return value-based scale if the value is assigned.
 
   if (!noFallBack && typeof value !== 'undefined') {
-    return _createScaleObjectForValue(attr, value, props[attr + 'Type']);
+    return _createScaleObjectForValue(attr, value, props[attr + 'Type'], accessor, accessor0);
   }
-
   // Pick up the domain from the properties and create a new one if it's not
@@ -339,6 +372,15 @@ // available.
     // Try to use the fallback value if it is available.
-    return _createScaleObjectForValue(attr, fallbackValue, props[attr + 'Type']);
+    return _createScaleObjectForValue(attr, fallbackValue, props[attr + 'Type'], accessor, accessor0);
   }
 
-  return _createScaleObjectForFunction(domain, range, type, distance, attr, baseValue);
+  return _createScaleObjectForFunction({
+    domain: domain,
+    range: range,
+    type: type,
+    distance: distance,
+    attr: attr,
+    baseValue: baseValue,
+    accessor: accessor,
+    accessor0: accessor0
+  });
 }
@@ -407,5 +449,5 @@
  */
-function _normalizeValues(data, values, attr, type) {
+function _normalizeValues(data, values, accessor0, type) {
   if (type === TIME_SCALE_TYPE && values.length === 1) {
-    var attr0 = data[0][attr + '0'];
+    var attr0 = accessor0(data[0]);
 
@@ -426,12 +468,12 @@ return [attr0].concat(_toConsumableArray(values));
 function _getScaleDistanceAndAdjustedDomain(data, scaleObject) {
-  var attr = scaleObject.attr,
-      domain = scaleObject.domain,
-      type = scaleObject.type;
+  var domain = scaleObject.domain,
+      type = scaleObject.type,
+      accessor = scaleObject.accessor,
+      accessor0 = scaleObject.accessor0;
 
 
-  var uniqueValues = (0, _dataUtils.getUniquePropertyValues)(data, attr);
+  var uniqueValues = (0, _dataUtils.getUniquePropertyValues)(data, accessor);
 
   // Fix time scale if a data has only one value.
-  var values = _normalizeValues(data, uniqueValues, attr, type);
-
+  var values = _normalizeValues(data, uniqueValues, accessor0, type);
   var index = _getSmallestDistanceIndex(values, scaleObject);
@@ -557,3 +599,2 @@
   var scaleObject = _collectScaleObjectFromProps(props, attr);
-
   if (!scaleObject) {
@@ -593,9 +634,9 @@ return null;
  * Get the value of `attr` from the object.
- * @param {Object} d Object.
- * @param {string} attr Attribute.
+ * @param {Object} d - data Object.
+ * @param {Function} accessor - accessor function.
  * @returns {*} Value of the point.
  * @private
  */
-function _getAttrValue(d, attr) {
-  return d.data ? d.data[attr] : d[attr];
+function _getAttrValue(d, accessor) {
+  return accessor(d.data ? d.data : d);
 }
@@ -632,3 +673,3 @@
  * @param {Object} props Series props.
- * @param {string} attr Property name.
+ * @param {Function} accessor - Property accessor.
  * @returns {*} Function or value.
@@ -641,3 +682,3 @@ */
     return function (d) {
-      return scaleFn(_getAttrValue(d, attr));
+      return scaleFn(_getAttrValue(d, scaleObject.accessor));
     };
@@ -666,3 +707,5 @@ }
     return function (d) {
-      var value = _getAttrValue(d, attr0);
+      var value = _getAttrValue(d, function (el) {
+        return el[attr0];
+      });
       return scaleFn(_isDefined(value) ? value : baseValue);
@@ -699,5 +742,5 @@ };
 function getScalePropTypesByAttribute(attr) {
-  var _ref;
+  var _ref2;
 
-  return _ref = {}, _defineProperty(_ref, '_' + attr + 'Value', _propTypes2.default.any), _defineProperty(_ref, attr + 'Domain', _propTypes2.default.array), _defineProperty(_ref, attr + 'Range', _propTypes2.default.array), _defineProperty(_ref, attr + 'Type', _propTypes2.default.oneOf(Object.keys(SCALE_FUNCTIONS))), _defineProperty(_ref, attr + 'Distance', _propTypes2.default.number), _defineProperty(_ref, attr + 'BaseValue', _propTypes2.default.any), _ref;
+  return _ref2 = {}, _defineProperty(_ref2, '_' + attr + 'Value', _propTypes2.default.any), _defineProperty(_ref2, attr + 'Domain', _propTypes2.default.array), _defineProperty(_ref2, 'get' + toTitleCase(attr), _propTypes2.default.func), _defineProperty(_ref2, 'get' + toTitleCase(attr) + '0', _propTypes2.default.func), _defineProperty(_ref2, attr + 'Range', _propTypes2.default.array), _defineProperty(_ref2, attr + 'Type', _propTypes2.default.oneOf(Object.keys(SCALE_FUNCTIONS))), _defineProperty(_ref2, attr + 'Distance', _propTypes2.default.number), _defineProperty(_ref2, attr + 'BaseValue', _propTypes2.default.any), _ref2;
 }
@@ -715,4 +758,11 @@
   Object.keys(props).forEach(function (key) {
+    // this filtering is critical for extracting the correct accessors!
     var attr = attributes.find(function (a) {
-      return key.indexOf(a) === 0 || key.indexOf('_' + a) === 0;
+      // width
+      var isPlainSet = key.indexOf(a) === 0;
+      // Ex: _data
+      var isUnderscoreSet = key.indexOf('_' + a) === 0;
+      // EX: getX
+      var usesGet = key.indexOf('get' + toTitleCase(a)) === 0;
+      return isPlainSet || isUnderscoreSet || usesGet;
     });
@@ -740,4 +790,14 @@ if (!attr) {
   attributes.forEach(function (attr) {
+    if (!props['get' + toTitleCase(attr)]) {
+      result['get' + toTitleCase(attr)] = function (d) {
+        return d[attr];
+      };
+    }
+    if (!props['get' + toTitleCase(attr) + '0']) {
+      result['get' + toTitleCase(attr) + '0'] = function (d) {
+        return d[attr + '0'];
+      };
+    }
     if (!props[attr + 'Domain']) {
-      result[attr + 'Domain'] = getDomainByAttr(data, attr, props[attr + 'Type']);
+      result[attr + 'Domain'] = getDomainByAccessor(data, props['get' + toTitleCase(attr)] || result['get' + toTitleCase(attr)], props['get' + toTitleCase(attr) + '0'] || result['get' + toTitleCase(attr) + '0'], props[attr + 'Type']);
       if (props[attr + 'Padding']) {
@@ -816,2 +876,26 @@ result[attr + 'Domain'] = _padDomain(result[attr + 'Domain'], props[attr + 'Padding']);
 
+var OPTIONAL_SCALE_PROPS = ['Padding'];
+var OPTIONAL_SCALE_PROPS_REGS = OPTIONAL_SCALE_PROPS.map(function (str) {
+  return new RegExp(str + '$', 'i');
+});
+/**
+ * Get the list of optional scale-related settings for XYPlot
+ * mostly just used to find padding properties
+ * @param {Object} props Object of props.
+ * @returns {Object} Optional Props.
+ * @private
+ */
+function getOptionalScaleProps(props) {
+  return Object.keys(props).reduce(function (acc, prop) {
+    var propIsNotOptional = OPTIONAL_SCALE_PROPS_REGS.every(function (reg) {
+      return !prop.match(reg);
+    });
+    if (propIsNotOptional) {
+      return acc;
+    }
+    acc[prop] = props[prop];
+    return acc;
+  }, {});
+}
+
 exports.default = {
@@ -823,5 +907,6 @@ extractScalePropsFromProps: extractScalePropsFromProps,
   getAttributeValue: getAttributeValue,
-  getDomainByAttr: getDomainByAttr,
+  getDomainByAccessor: getDomainByAccessor,
   getFontColorFromBackground: getFontColorFromBackground,
   getMissingScaleProps: getMissingScaleProps,
+  getOptionalScaleProps: getOptionalScaleProps,
   getScaleObjectFromProps: getScaleObjectFromProps,
@@ -828,0 +913,0 @@ getScalePropTypesByAttribute: getScalePropTypesByAttribute,

es/parallel-coordinates/index.js

@@ -119,4 +119,7 @@ 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; }; }();
 
-  var scales = domains.reduce(function (acc, domain) {
-    acc[domain.name] = scaleLinear().domain(domain.domain).range([0, 1]);
+  var scales = domains.reduce(function (acc, _ref) {
+    var domain = _ref.domain,
+        name = _ref.name;
+
+    acc[name] = scaleLinear().domain(domain).range([0, 1]);
     return acc;
@@ -127,5 +130,8 @@ }, {});
     var mappedData = domains.map(function (domain, index) {
+      var getValue = domain.getValue,
+          name = domain.name;
+
       return {
-        x: domain.name,
-        y: scales[domain.name](row[domain.name])
+        x: name,
+        y: scales[name](getValue ? getValue(row) : row[name])
       };
@@ -132,0 +138,0 @@ });

es/plot/series/area-series.js

@@ -38,2 +38,3 @@ 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; };
 import { ANIMATED_SERIES_PROPS } from '../../utils/series-utils';
+import { warning } from '../../utils/react-utils';
 
@@ -55,3 +56,3 @@ import AbstractSeries from './abstract-series';
     key: '_renderArea',
-    value: function _renderArea(data, x, y0, y, curve, nullAccessor) {
+    value: function _renderArea(data, x, y0, y, curve, getNull) {
       var area = d3Shape.area();
@@ -65,3 +66,3 @@ if (curve !== null) {
       }
-      area = area.defined(nullAccessor);
+      area = area.defined(getNull);
       area = area.x(x).y0(y0).y1(y);
@@ -80,8 +81,13 @@ return area(data);
           marginTop = _props.marginTop,
-          nullAccessor = _props.nullAccessor,
           style = _props.style;
 
+
+      if (this.props.nullAccessor) {
+        warning('nullAccessor has been renamed to getNull', true);
+      }
+
       if (!data) {
         return null;
       }
+
       if (animation) {
@@ -102,3 +108,5 @@ return React.createElement(
       var opacity = Number.isFinite(newOpacity) ? newOpacity : DEFAULT_OPACITY;
-      var d = this._renderArea(data, x, y0, y, curve, nullAccessor);
+      var getNull = this.props.nullAccessor || this.props.getNull;
+      var d = this._renderArea(data, x, y0, y, curve, getNull);
+
       return React.createElement('path', {
@@ -116,3 +124,4 @@ d: d,
           fill: fill
-        }, style) });
+        }, style)
+      });
     }
@@ -126,6 +135,6 @@ }]);
 AreaSeries.propTypes = _extends({}, AbstractSeries.propTypes, {
-  nullAccessor: PropTypes.func
+  getNull: PropTypes.func
 });
 AreaSeries.defaultProps = {
-  nullAccessor: function nullAccessor() {
+  getNull: function getNull() {
     return true;
@@ -132,0 +141,0 @@ }

es/plot/series/canvas-wrapper.js

@@ -130,2 +130,5 @@ 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; }; }();
 
+      if (!ctx) {
+        return;
+      }
       ctx.scale(pixelRatio, pixelRatio);
@@ -132,0 +135,0 @@

es/plot/series/label-series.js

@@ -58,2 +58,3 @@ 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; };
           _data = _props._data,
+          getLabel = _props.getLabel,
           marginLeft = _props.marginLeft,
@@ -87,8 +88,7 @@ marginTop = _props.marginTop,
         data.reduce(function (res, d, i) {
-          var label = d.label,
-              style = d.style,
+          var style = d.style,
               xOffset = d.xOffset,
               yOffset = d.yOffset;
 
-          if (!label) {
+          if (!getLabel(d)) {
             return res;
@@ -124,6 +124,7 @@ }
           }, style);
+          var textContent = getLabel(_data ? _data[i] : d);
           return res.concat([React.createElement(
             'text',
             attrs,
-            _data ? _data[i].label : label
+            textContent
           )]);
@@ -160,5 +161,8 @@ }, [])
   animation: false,
-  rotation: 0
+  rotation: 0,
+  getLabel: function getLabel(d) {
+    return d.label;
+  }
 };
 LabelSeries.displayName = 'LabelSeries';
 export default LabelSeries;

es/plot/series/line-series.js

@@ -38,2 +38,3 @@ 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; };
 import { ANIMATED_SERIES_PROPS } from '../../utils/series-utils';
+import { warning } from '../../utils/react-utils';
 
@@ -60,3 +61,3 @@ import AbstractSeries from './abstract-series';
     key: '_renderLine',
-    value: function _renderLine(data, x, y, curve, nullAccessor) {
+    value: function _renderLine(data, x, y, curve, getNull) {
       var line = d3Shape.line();
@@ -70,3 +71,3 @@ if (curve !== null) {
       }
-      line = line.defined(nullAccessor);
+      line = line.defined(getNull);
       line = line.x(x).y(y);
@@ -83,5 +84,11 @@ return line(data);
 
+
+      if (this.props.nullAccessor) {
+        warning('nullAccessor has been renamed to getNull', true);
+      }
+
       if (!data) {
         return null;
       }
+
       if (animation) {
@@ -99,3 +106,2 @@ return React.createElement(
           marginTop = _props2.marginTop,
-          nullAccessor = _props2.nullAccessor,
           strokeDasharray = _props2.strokeDasharray,
@@ -112,3 +118,4 @@ strokeStyle = _props2.strokeStyle,
       var opacity = Number.isFinite(newOpacity) ? newOpacity : DEFAULT_OPACITY;
-      var d = this._renderLine(data, x, y, curve, nullAccessor);
+      var getNull = this.props.nullAccessor || this.props.getNull;
+      var d = this._renderLine(data, x, y, curve, getNull);
 
@@ -128,3 +135,4 @@ return React.createElement('path', {
           stroke: stroke
-        }, style) });
+        }, style)
+      });
     }
@@ -140,3 +148,3 @@ }]);
   curve: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  nullAccessor: PropTypes.func
+  getNull: PropTypes.func
 });
@@ -149,3 +157,3 @@ LineSeries.defaultProps = {
   className: '',
-  nullAccessor: function nullAccessor() {
+  getNull: function getNull() {
     return true;
@@ -152,0 +160,0 @@ }

es/plot/series/mark-series.js

@@ -37,2 +37,3 @@ 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; };
 import { ANIMATED_SERIES_PROPS } from '../../utils/series-utils';
+import { warning } from '../../utils/react-utils';
 import { DEFAULT_SIZE, DEFAULT_OPACITY } from '../../theme';
@@ -56,20 +57,21 @@
     key: '_renderCircle',
-    value: function _renderCircle(d, i, strokeWidth, style) {
+    value: function _renderCircle(d, i, strokeWidth, style, scalingFunctions) {
       var _this2 = this;
 
-      var sizeFunctor = this._getAttributeFunctor('size');
-      var opacityFunctor = this._getAttributeFunctor('opacity');
-      var fillFunctor = this._getAttributeFunctor('fill') || this._getAttributeFunctor('color');
-      var strokeFunctor = this._getAttributeFunctor('stroke') || this._getAttributeFunctor('color');
-      var xFunctor = this._getAttributeFunctor('x');
-      var yFunctor = this._getAttributeFunctor('y');
+      var fill = scalingFunctions.fill,
+          opacity = scalingFunctions.opacity,
+          size = scalingFunctions.size,
+          stroke = scalingFunctions.stroke,
+          x = scalingFunctions.x,
+          y = scalingFunctions.y;
 
+
       var attrs = {
-        r: sizeFunctor ? sizeFunctor(d) : DEFAULT_SIZE,
-        cx: xFunctor(d),
-        cy: yFunctor(d),
+        r: size ? size(d) : DEFAULT_SIZE,
+        cx: x(d),
+        cy: y(d),
         style: _extends({
-          opacity: opacityFunctor ? opacityFunctor(d) : DEFAULT_OPACITY,
-          stroke: strokeFunctor && strokeFunctor(d),
-          fill: fillFunctor && fillFunctor(d),
+          opacity: opacity ? opacity(d) : DEFAULT_OPACITY,
+          stroke: stroke && stroke(d),
+          fill: fill && fill(d),
           strokeWidth: strokeWidth || DEFAULT_STROKE_WIDTH
@@ -104,9 +106,16 @@ }, style),
           marginTop = _props.marginTop,
-          nullAccessor = _props.nullAccessor,
           strokeWidth = _props.strokeWidth,
           style = _props.style;
 
+
+      if (this.props.nullAccessor) {
+        warning('nullAccessor has been renamed to getNull', true);
+      }
+
+      var getNull = this.props.nullAccessor || this.props.getNull;
+
       if (!data) {
         return null;
       }
+
       if (animation) {
@@ -120,9 +129,20 @@ return React.createElement(
 
+      var scalingFunctions = {
+        fill: this._getAttributeFunctor('fill') || this._getAttributeFunctor('color'),
+        opacity: this._getAttributeFunctor('opacity'),
+        size: this._getAttributeFunctor('size'),
+        stroke: this._getAttributeFunctor('stroke') || this._getAttributeFunctor('color'),
+        x: this._getAttributeFunctor('x'),
+        y: this._getAttributeFunctor('y')
+      };
+
       return React.createElement(
         'g',
-        { className: predefinedClassName + ' ' + className,
+        {
+          className: predefinedClassName + ' ' + className,
           ref: 'container',
-          transform: 'translate(' + marginLeft + ',' + marginTop + ')' },
+          transform: 'translate(' + marginLeft + ',' + marginTop + ')'
+        },
         data.map(function (d, i) {
-          return nullAccessor(d) && _this3._renderCircle(d, i, strokeWidth, style);
+          return getNull(d) && _this3._renderCircle(d, i, strokeWidth, style, scalingFunctions);
         })
@@ -138,7 +158,7 @@ );
 MarkSeries.propTypes = _extends({}, AbstractSeries.propTypes, {
-  nullAccessor: PropTypes.func,
+  getNull: PropTypes.func,
   strokeWidth: PropTypes.number
 });
 MarkSeries.defaultProps = {
-  nullAccessor: function nullAccessor() {
+  getNull: function getNull() {
     return true;
@@ -145,0 +165,0 @@ }

es/plot/xy-plot.js

@@ -39,3 +39,3 @@ 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; }; }();
 
-import { extractScalePropsFromProps, getMissingScaleProps, getXYPlotValues } from '../utils/scales-utils';
+import { extractScalePropsFromProps, getMissingScaleProps, getOptionalScaleProps, getXYPlotValues } from '../utils/scales-utils';
 import { getStackedData, getSeriesChildren, getSeriesPropsFromChildren } from '../utils/series-utils';
@@ -51,4 +51,2 @@ import { getInnerDimensions, MarginPropType } from '../utils/chart-utils';
 
-var OPTIONAL_SCALE_PROPS = ['Padding'];
-
 var DEFAULT_MARGINS = {
@@ -336,24 +334,2 @@ left: 40,
     /**
-     * Get the list of optional scale-related settings
-     * @param {Object} props Object of props.
-     * @returns {Object} Optional Props.
-     * @private
-     */
-
-  }, {
-    key: '_getOptionalScaleProps',
-    value: function _getOptionalScaleProps(props) {
-      return Object.keys(props).filter(function (prop) {
-        return OPTIONAL_SCALE_PROPS.map(function (option) {
-          return prop.endsWith(option);
-        }).every(function (x) {
-          return x;
-        });
-      }).reduce(function (obj, key) {
-        obj[key] = props[key];
-        return obj;
-      }, {});
-    }
-
-    /**
      * Get the map of scales from the props, apply defaults to them and then pass
@@ -378,3 +354,3 @@ * them further.
       var defaultScaleProps = this._getDefaultScaleProps(props);
-      var optionalScaleProps = this._getOptionalScaleProps(props);
+      var optionalScaleProps = getOptionalScaleProps(props);
       var userScaleProps = extractScalePropsFromProps(props, ATTRIBUTES);
@@ -460,3 +436,2 @@ var missingScaleProps = getMissingScaleProps(_extends({}, defaultScaleProps, optionalScaleProps, userScaleProps), allData, ATTRIBUTES);
         }
-
         return React.cloneElement(child, _extends({}, dimensions, {
@@ -463,0 +438,0 @@ animation: animation

es/radar-chart/index.js

@@ -101,3 +101,5 @@ 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; }; }();
 
-  return domains.map(function (domain, index) {
+  return domains.map(function (_ref, index) {
+    var name = _ref.name;
+
     var angle = index / domains.length * Math.PI * 2 + startingAngle;
@@ -108,3 +110,3 @@ var radius = 1.2;
       y: radius * Math.sin(angle),
-      label: domain.name,
+      label: name,
       style: style
@@ -133,4 +135,7 @@ };
 
-  var scales = domains.reduce(function (acc, domain) {
-    acc[domain.name] = scaleLinear().domain(domain.domain).range([0, 1]);
+  var scales = domains.reduce(function (acc, _ref2) {
+    var domain = _ref2.domain,
+        name = _ref2.name;
+
+    acc[name] = scaleLinear().domain(domain).range([0, 1]);
     return acc;
@@ -140,8 +145,11 @@ }, {});
   return data.map(function (row, rowIndex) {
-    var mappedData = domains.map(function (domain, index) {
-      var dataPoint = row[domain.name];
+    var mappedData = domains.map(function (_ref3, index) {
+      var name = _ref3.name,
+          getValue = _ref3.getValue;
+
+      var dataPoint = getValue ? getValue(row) : row[name];
       // error handling if point doesn't exist
       var angle = index / domains.length * Math.PI * 2 + startingAngle;
       // dont let the radius become negative
-      var radius = Math.max(scales[domain.name](dataPoint), 0);
+      var radius = Math.max(scales[name](dataPoint), 0);
       return { x: radius * Math.cos(angle), y: radius * Math.sin(angle) };
@@ -148,0 +156,0 @@ });

es/radial-chart/index.js

@@ -54,7 +54,6 @@ 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; }; }();
 function getWedgesToRender(_ref) {
-  var data = _ref.data;
+  var data = _ref.data,
+      getAngle = _ref.getAngle;
 
-  var pie = pieBuilder().sort(null).value(function (d) {
-    return d.angle;
-  });
+  var pie = pieBuilder().sort(null).value(getAngle);
   var pieData = pie(data).reverse();
@@ -72,9 +71,10 @@ return pieData.map(function (row, index) {
 
-function generateLabels(mappedData) {
+function generateLabels(mappedData, accessors) {
+  var getLabel = accessors.getLabel,
+      getSubLabel = accessors.getSubLabel;
+
   return mappedData.reduce(function (res, row) {
     var angle = row.angle,
         angle0 = row.angle0,
-        radius = row.radius,
-        label = row.label,
-        subLabel = row.subLabel;
+        radius = row.radius;
 
@@ -87,7 +87,7 @@ var centeredAngle = (angle + angle0) / 2;
     var newLabels = [];
-    if (row.label) {
+    if (getLabel(row)) {
       newLabels.push({
         angle: updatedAngle,
         radius: radius * 1.1,
-        label: label,
+        label: getLabel(row),
         style: { fontSize: '12px' }
@@ -97,7 +97,7 @@ });
 
-    if (subLabel) {
+    if (getSubLabel(row)) {
       newLabels.push({
         angle: updatedAngle,
         radius: radius * 1.1,
-        label: subLabel,
+        label: getSubLabel(row),
         yOffset: 12,
@@ -149,5 +149,8 @@ style: { fontSize: '10px' }
           onMouseEnter = _props.onMouseEnter,
-          labelsAboveChildren = _props.labelsAboveChildren;
+          labelsAboveChildren = _props.labelsAboveChildren,
+          getAngle = _props.getAngle,
+          getLabel = _props.getLabel,
+          getSubLabel = _props.getSubLabel;
 
-      var mappedData = getWedgesToRender({ data: data, height: height, hideRootNode: hideRootNode, width: width });
+      var mappedData = getWedgesToRender({ data: data, height: height, hideRootNode: hideRootNode, width: width, getAngle: getAngle });
       var radialDomain = getRadialDomain(mappedData);
@@ -170,2 +173,7 @@ var arcProps = _extends({
       var defaultMargin = getRadialLayoutMargin(width, height, maxRadius);
+
+      var labels = generateLabels(mappedData, {
+        getLabel: getLabel,
+        getSubLabel: getSubLabel
+      });
       return React.createElement(
@@ -182,6 +190,8 @@ XYPlot,
           yDomain: [-radialDomain, radialDomain] },
-        React.createElement(ArcSeries, arcProps),
-        showLabels && !labelsAboveChildren && React.createElement(LabelSeries, { data: generateLabels(mappedData) }),
+        React.createElement(ArcSeries, _extends({}, arcProps, { getAngle: function getAngle(d) {
+            return d.angle;
+          } })),
+        showLabels && !labelsAboveChildren && React.createElement(LabelSeries, { data: labels }),
         children,
-        showLabels && labelsAboveChildren && React.createElement(LabelSeries, { data: generateLabels(mappedData) })
+        showLabels && labelsAboveChildren && React.createElement(LabelSeries, { data: labels })
       );
@@ -206,2 +216,7 @@ }
   })).isRequired,
+  getAngle: PropTypes.func,
+  getAngle0: PropTypes.func,
+  getRadius: PropTypes.func,
+  getRadius0: PropTypes.func,
+  getLabel: PropTypes.func,
   height: PropTypes.number.isRequired,
@@ -214,3 +229,4 @@ labelsAboveChildren: PropTypes.bool,
   width: PropTypes.number.isRequired,
-  showLabels: PropTypes.bool
+  showLabels: PropTypes.bool,
+  subLabel: PropTypes.func
 };
@@ -220,5 +236,23 @@ RadialChart.defaultProps = {
   colorType: 'category',
-  colorRange: DISCRETE_COLOR_RANGE
+  colorRange: DISCRETE_COLOR_RANGE,
+  getAngle: function getAngle(d) {
+    return d.angle;
+  },
+  getAngle0: function getAngle0(d) {
+    return d.angle0;
+  },
+  getRadius: function getRadius(d) {
+    return d.radius;
+  },
+  getRadius0: function getRadius0(d) {
+    return d.radius0;
+  },
+  getLabel: function getLabel(d) {
+    return d.label;
+  },
+  getSubLabel: function getSubLabel(d) {
+    return d.subLabel;
+  }
 };
 
 export default RadialChart;

es/sunburst/index.js

@@ -55,2 +55,3 @@ 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; }; }();
    props.width {number} - the width of the graphic to be rendered
+   props.getSize {function} - accessor for the size
  * @returns {Array} Array of nodes.
@@ -62,8 +63,7 @@ */
       hideRootNode = _ref.hideRootNode,
-      width = _ref.width;
+      width = _ref.width,
+      getSize = _ref.getSize;
 
   var partitionFunction = partition();
-  var structuredInput = hierarchy(data).sum(function (d) {
-    return d.size;
-  });
+  var structuredInput = hierarchy(data).sum(getSize);
   var radius = Math.min(width, height) / 2 - 10;
@@ -93,10 +93,15 @@ var x = scaleLinear().range([0, 2 * Math.PI]);
  * @param {Array} mappedData - Array of nodes.
+ * @param {Object} accessors - object of accessors
  * @returns {Array} array of node for rendering as labels
  */
-function buildLabels(mappedData) {
-  return mappedData.filter(function (row) {
-    return row.label;
-  }).map(function (row) {
-    var truedAngle = -1 * row.angle + Math.PI / 2;
-    var truedAngle0 = -1 * row.angle0 + Math.PI / 2;
+function buildLabels(mappedData, accessors) {
+  var getAngle = accessors.getAngle,
+      getAngle0 = accessors.getAngle0,
+      getLabel = accessors.getLabel,
+      getRadius0 = accessors.getRadius0;
+
+
+  return mappedData.filter(getLabel).map(function (row) {
+    var truedAngle = -1 * getAngle(row) + Math.PI / 2;
+    var truedAngle0 = -1 * getAngle0(row) + Math.PI / 2;
     var angle = (truedAngle0 + truedAngle) / 2;
@@ -110,5 +115,4 @@ var rotateLabels = !row.dontRotateLabel;
       radius: null,
-      x: row.radius0 * Math.cos(angle),
-      y: row.radius0 * Math.sin(angle),
-      // style: row.labelStyle,
+      x: getRadius0(row) * Math.cos(angle),
+      y: getRadius0(row) * Math.sin(angle),
       style: _extends({
@@ -139,2 +143,4 @@ textAnchor: rotAngle > 90 ? 'end' : 'start'
       var _props = this.props,
+          getAngle = _props.getAngle,
+          getAngle0 = _props.getAngle0,
           animation = _props.animation,
@@ -146,10 +152,20 @@ className = _props.className,
           hideRootNode = _props.hideRootNode,
+          getLabel = _props.getLabel,
           width = _props.width,
+          getSize = _props.getSize,
           colorType = _props.colorType;
 
-      var mappedData = getNodesToRender({ data: data, height: height, hideRootNode: hideRootNode, width: width });
+      var mappedData = getNodesToRender({ data: data, height: height, hideRootNode: hideRootNode, width: width, getSize: getSize });
       var radialDomain = getRadialDomain(mappedData);
       var margin = getRadialLayoutMargin(width, height, radialDomain);
 
-      var labelData = buildLabels(mappedData);
+      var labelData = buildLabels(mappedData, {
+        getAngle: getAngle,
+        getAngle0: getAngle0,
+        getLabel: getLabel,
+        getRadius0: function getRadius0(d) {
+          return d.radius0;
+        }
+      });
+
       var hofBuilder = function hofBuilder(f) {
@@ -186,3 +202,3 @@ return function (e, i) {
         }, {}))),
-        labelData.length > 0 && React.createElement(LabelSeries, { data: labelData }),
+        labelData.length > 0 && React.createElement(LabelSeries, { data: labelData, getLabel: getLabel }),
         children
@@ -199,2 +215,4 @@ );
   animation: AnimationPropType,
+  getAngle: PropTypes.func,
+  getAngle0: PropTypes.func,
   className: PropTypes.string,
@@ -205,13 +223,30 @@ colorType: PropTypes.string,
   hideRootNode: PropTypes.bool,
+  getLabel: PropTypes.func,
   onValueClick: PropTypes.func,
   onValueMouseOver: PropTypes.func,
   onValueMouseOut: PropTypes.func,
+  getSize: PropTypes.func,
   width: PropTypes.number.isRequired
 };
 Sunburst.defaultProps = {
+  getAngle: function getAngle(d) {
+    return d.angle;
+  },
+  getAngle0: function getAngle0(d) {
+    return d.angle0;
+  },
   className: '',
   colorType: 'literal',
-  hideRootNode: false
+  getColor: function getColor(d) {
+    return d.color;
+  },
+  hideRootNode: false,
+  getLabel: function getLabel(d) {
+    return d.label;
+  },
+  getSize: function getSize(d) {
+    return d.size;
+  }
 };
 
 export default Sunburst;

es/treemap/index.js

@@ -127,3 +127,4 @@ 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; }; }();
           padding = _props.padding,
-          sortFunction = _props.sortFunction;
+          sortFunction = _props.sortFunction,
+          getSize = _props.getSize;
 
@@ -136,5 +137,5 @@ if (!data) {
         var partitionFunction = partition().size(mode === 'partition-pivot' ? [innerHeight, innerWidth] : [innerWidth, innerHeight]).padding(padding);
-        var _structuredInput = hierarchy(data).sum(function (d) {
-          return d.size;
-        }).sort(sortFunction);
+        var _structuredInput = hierarchy(data).sum(getSize).sort(function (a, b) {
+          return sortFunction(a, b, getSize);
+        });
         var mappedNodes = partitionFunction(_structuredInput).descendants();
@@ -155,5 +156,5 @@ if (mode === 'partition-pivot') {
         var packingFunction = pack().size([innerWidth, innerHeight]).padding(padding);
-        var _structuredInput2 = hierarchy(data).sum(function (d) {
-          return d.size;
-        }).sort(sortFunction);
+        var _structuredInput2 = hierarchy(data).sum(getSize).sort(function (a, b) {
+          return sortFunction(a, b, getSize);
+        });
         return packingFunction(_structuredInput2).descendants();
@@ -164,5 +165,5 @@ }
       var treemapingFunction = treemap(tileFn).tile(tileFn).size([innerWidth, innerHeight]).padding(padding);
-      var structuredInput = hierarchy(data).sum(function (d) {
-        return d.size;
-      }).sort(sortFunction);
+      var structuredInput = hierarchy(data).sum(getSize).sort(function (a, b) {
+        return sortFunction(a, b, getSize);
+      });
       return treemapingFunction(structuredInput).descendants();
@@ -200,3 +201,5 @@ }
   sortFunction: PropTypes.func,
-  width: PropTypes.number.isRequired
+  width: PropTypes.number.isRequired,
+  getSize: PropTypes.func,
+  getColor: PropTypes.func
 };
@@ -220,6 +223,18 @@
   padding: 1,
-  sortFunction: function sortFunction(a, b) {
-    return a.size - b.size;
+  sortFunction: function sortFunction(a, b, accessor) {
+    if (!accessor) {
+      return 0;
+    }
+    return accessor(a) - accessor(b);
+  },
+  getSize: function getSize(d) {
+    return d.size;
+  },
+  getColor: function getColor(d) {
+    return d.color;
+  },
+  getLabel: function getLabel(d) {
+    return d.title;
   }
 };
 export default Treemap;

es/treemap/treemap-dom.js

@@ -53,2 +53,3 @@ 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; };
           hideRootNode = _props.hideRootNode,
+          getLabel = _props.getLabel,
           mode = _props.mode,
@@ -74,3 +75,4 @@ nodes = _props.nodes,
             animation: animation,
-            node: node
+            node: node,
+            getLabel: getLabel
           }, _this2.props, {
@@ -77,0 +79,0 @@ x0: useCirclePacking ? node.x : node.x0,

es/treemap/treemap-leaf.js

@@ -54,2 +54,3 @@ 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; };
           animation = _props.animation,
+          getLabel = _props.getLabel,
           mode = _props.mode,
@@ -80,4 +81,5 @@ node = _props.node,
       var color = getFontColorFromBackground(background);
-      var title = node.data.title;
+      var data = node.data;
 
+      var title = getLabel(data);
       var leafStyle = _extends({
@@ -84,0 +86,0 @@ top: useCirclePacking ? y0 - r : y0,

es/treemap/treemap-svg.js

@@ -104,3 +104,9 @@ 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; };
           colorType: 'literal',
+          getColor: function getColor(d) {
+            return d.color;
+          },
           sizeType: 'literal',
+          getSize: function getSize(d) {
+            return d.size;
+          },
           style: style }),
@@ -107,0 +113,0 @@ minY: minY,

es/utils/data-utils.js

@@ -22,13 +22,2 @@ // Copyright (c) 2016 - 2017 Uber Technologies, Inc.
 /**
- * Get the value accessor function that gets a property from an object.
- * @param {string} propertyName Property name.
- * @returns {Function} Value accessor.
- */
-export function getObjectValueAccessor(propertyName) {
-  return function (obj) {
-    return obj[propertyName];
-  };
-}
-
-/**
  * Get unique property values from an array.
@@ -39,4 +28,4 @@ * @param {Array} arr Array of data.
  */
-export function getUniquePropertyValues(arr, propertyName) {
-  var setOfValues = new Set(arr.map(getObjectValueAccessor(propertyName)));
+export function getUniquePropertyValues(arr, accessor) {
+  var setOfValues = new Set(arr.map(accessor));
   return Array.from(setOfValues);
@@ -43,0 +32,0 @@ }

es/utils/react-utils.js

@@ -87,2 +87,20 @@ 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"); } }; }();
 
+/**
+ * Safely returns list of CSS from a CSS Style Sheet.
+ * @param {CSSStyleSheet} styleSheet  - CSS style sheet
+ * @returns {CSSRuleList} list of CSS rules
+ */
+function getCSSRules(styleSheet) {
+  // Without this check accessing styleSheet.cssRules throws SecurityErrror in Firefox
+  // See: https://github.com/uber/react-vis/issues/650
+  if (styleSheet.ownerNode.tagName === 'STYLE' || styleSheet.ownerNode.tagName === 'LINK' && styleSheet.ownerNode.href && styleSheet.ownerNode.href.startsWith(document.location.origin)) {
+    try {
+      return styleSheet.rules || styleSheet.cssRules;
+    } catch (err) {
+      return [];
+    }
+  }
+  return [];
+}
+
 // special tag for using to check if the style file has been imported
@@ -98,7 +116,5 @@ // represented the md5 hash of the phrase "react-vis is cool"
 
-  var foundImportTag = [].concat(_toConsumableArray(new Array(document.styleSheets.length))).some(function (e, i) {
-    var styleSheet = document.styleSheets[i];
-    var CSSRulesList = styleSheet.rules || styleSheet.cssRules;
-    return [].concat(_toConsumableArray(new Array(CSSRulesList ? CSSRulesList.length : 0))).some(function (el, j) {
-      var selector = CSSRulesList[j];
+  var foundImportTag = [].concat(_toConsumableArray(document.styleSheets)).some(function (styleSheet) {
+    var CSSRulesList = getCSSRules(styleSheet);
+    return [].concat(_toConsumableArray(CSSRulesList)).some(function (selector) {
       return selector.selectorText === MAGIC_CSS_RULE;
@@ -105,0 +121,0 @@ });

es/utils/scales-utils.js

@@ -108,2 +108,11 @@ 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"); } }; }();
 /**
+ * Title case a given string
+ * @param {String} str Array of values.
+ * @returns {String} titlecased string
+ */
+function toTitleCase(str) {
+  return '' + str[0].toUpperCase() + str.slice(1);
+}
+
+/**
  * Find the smallest distance between the values on a given scale and return
@@ -172,3 +181,4 @@ * the index of the element, where the smallest distance was found.
  * @param {Array} allData All data.
- * @param {string} attr Property name.
+ * @param {function} accessor - accessor for main value.
+ * @param {function} accessor0 - accessor for the naught value.
  * @param {string} type Scale type.
@@ -178,10 +188,9 @@ * @returns {Array} Domain.
  */
-export function getDomainByAttr(allData, attr, type) {
+export function getDomainByAccessor(allData, accessor, accessor0, type) {
   var domain = void 0;
-  var attr0 = attr + '0';
 
   // Collect both attr and available attr0 values from the array of data.
   var values = allData.reduce(function (data, d) {
-    var value = d[attr];
-    var value0 = d[attr0];
+    var value = accessor(d);
+    var value0 = accessor0(d);
     if (_isDefined(value)) {
@@ -215,6 +224,8 @@ data.push(value);
  * @param {string} type - the type of scale being used
+ * @param {function} accessor - the accessor function
+ * @param {function} accessor0 - the accessor function for the potential naught value
  * @returns {Object} Custom scale object.
  * @private
  */
-function _createScaleObjectForValue(attr, value, type) {
+function _createScaleObjectForValue(attr, value, type, accessor, accessor0) {
   if (type === LITERAL_SCALE_TYPE) {
@@ -228,3 +239,4 @@ return {
       baseValue: undefined,
-      isValue: true
+      isValue: true,
+      accessor: accessor
     };
@@ -242,3 +254,4 @@ }
     baseValue: undefined,
-    isValue: true
+    isValue: true,
+    accessor: accessor
   };
@@ -249,12 +262,23 @@ }
  * Create a regular scale object for a further use from the existing parameters.
- * @param {Array} domain Domain.
- * @param {Array} range Range.
- * @param {string} type Type.
- * @param {number} distance Distance.
- * @param {string} attr Attribute.
- * @param {number} baseValue Base value.
+ * @param {Array} domain - Domain.
+ * @param {Array} range - Range.
+ * @param {string} type - Type.
+ * @param {number} distance - Distance.
+ * @param {string} attr - Attribute.
+ * @param {number} baseValue - Base value.
+ * @param {function} accessor - Attribute accesor
+ * @param {function} accessor0 - Attribute accesor for potential naught value
  * @returns {Object} Scale object.
  * @private
  */
-function _createScaleObjectForFunction(domain, range, type, distance, attr, baseValue) {
+function _createScaleObjectForFunction(_ref) {
+  var domain = _ref.domain,
+      range = _ref.range,
+      type = _ref.type,
+      distance = _ref.distance,
+      attr = _ref.attr,
+      baseValue = _ref.baseValue,
+      accessor = _ref.accessor,
+      accessor0 = _ref.accessor0;
+
   return {
@@ -267,3 +291,5 @@ domain: domain,
     baseValue: baseValue,
-    isValue: false
+    isValue: false,
+    accessor: accessor,
+    accessor0: accessor0
   };
@@ -289,11 +315,17 @@ }
       type = _props$2 === undefined ? LINEAR_SCALE_TYPE : _props$2,
-      noFallBack = props[attr + 'NoFallBack'];
+      noFallBack = props[attr + 'NoFallBack'],
+      _props$3 = props['get' + toTitleCase(attr)],
+      accessor = _props$3 === undefined ? function (d) {
+    return d[attr];
+  } : _props$3,
+      _props$4 = props['get' + toTitleCase(attr) + '0'],
+      accessor0 = _props$4 === undefined ? function (d) {
+    return d[attr + '0'];
+  } : _props$4;
   var domain = props[attr + 'Domain'];
-
   // Return value-based scale if the value is assigned.
 
   if (!noFallBack && typeof value !== 'undefined') {
-    return _createScaleObjectForValue(attr, value, props[attr + 'Type']);
+    return _createScaleObjectForValue(attr, value, props[attr + 'Type'], accessor, accessor0);
   }
-
   // Pick up the domain from the properties and create a new one if it's not
@@ -308,6 +340,15 @@ // available.
     // Try to use the fallback value if it is available.
-    return _createScaleObjectForValue(attr, fallbackValue, props[attr + 'Type']);
+    return _createScaleObjectForValue(attr, fallbackValue, props[attr + 'Type'], accessor, accessor0);
   }
 
-  return _createScaleObjectForFunction(domain, range, type, distance, attr, baseValue);
+  return _createScaleObjectForFunction({
+    domain: domain,
+    range: range,
+    type: type,
+    distance: distance,
+    attr: attr,
+    baseValue: baseValue,
+    accessor: accessor,
+    accessor0: accessor0
+  });
 }
@@ -376,5 +417,5 @@
  */
-function _normalizeValues(data, values, attr, type) {
+function _normalizeValues(data, values, accessor0, type) {
   if (type === TIME_SCALE_TYPE && values.length === 1) {
-    var attr0 = data[0][attr + '0'];
+    var attr0 = accessor0(data[0]);
 
@@ -395,12 +436,12 @@ return [attr0].concat(_toConsumableArray(values));
 export function _getScaleDistanceAndAdjustedDomain(data, scaleObject) {
-  var attr = scaleObject.attr,
-      domain = scaleObject.domain,
-      type = scaleObject.type;
+  var domain = scaleObject.domain,
+      type = scaleObject.type,
+      accessor = scaleObject.accessor,
+      accessor0 = scaleObject.accessor0;
 
 
-  var uniqueValues = getUniquePropertyValues(data, attr);
+  var uniqueValues = getUniquePropertyValues(data, accessor);
 
   // Fix time scale if a data has only one value.
-  var values = _normalizeValues(data, uniqueValues, attr, type);
-
+  var values = _normalizeValues(data, uniqueValues, accessor0, type);
   var index = _getSmallestDistanceIndex(values, scaleObject);
@@ -526,3 +567,2 @@
   var scaleObject = _collectScaleObjectFromProps(props, attr);
-
   if (!scaleObject) {
@@ -562,9 +602,9 @@ return null;
  * Get the value of `attr` from the object.
- * @param {Object} d Object.
- * @param {string} attr Attribute.
+ * @param {Object} d - data Object.
+ * @param {Function} accessor - accessor function.
  * @returns {*} Value of the point.
  * @private
  */
-function _getAttrValue(d, attr) {
-  return d.data ? d.data[attr] : d[attr];
+function _getAttrValue(d, accessor) {
+  return accessor(d.data ? d.data : d);
 }
@@ -601,3 +641,3 @@
  * @param {Object} props Series props.
- * @param {string} attr Property name.
+ * @param {Function} accessor - Property accessor.
  * @returns {*} Function or value.
@@ -610,3 +650,3 @@ */
     return function (d) {
-      return scaleFn(_getAttrValue(d, attr));
+      return scaleFn(_getAttrValue(d, scaleObject.accessor));
     };
@@ -635,3 +675,5 @@ }
     return function (d) {
-      var value = _getAttrValue(d, attr0);
+      var value = _getAttrValue(d, function (el) {
+        return el[attr0];
+      });
       return scaleFn(_isDefined(value) ? value : baseValue);
@@ -668,5 +710,5 @@ };
 export function getScalePropTypesByAttribute(attr) {
-  var _ref;
+  var _ref2;
 
-  return _ref = {}, _defineProperty(_ref, '_' + attr + 'Value', PropTypes.any), _defineProperty(_ref, attr + 'Domain', PropTypes.array), _defineProperty(_ref, attr + 'Range', PropTypes.array), _defineProperty(_ref, attr + 'Type', PropTypes.oneOf(Object.keys(SCALE_FUNCTIONS))), _defineProperty(_ref, attr + 'Distance', PropTypes.number), _defineProperty(_ref, attr + 'BaseValue', PropTypes.any), _ref;
+  return _ref2 = {}, _defineProperty(_ref2, '_' + attr + 'Value', PropTypes.any), _defineProperty(_ref2, attr + 'Domain', PropTypes.array), _defineProperty(_ref2, 'get' + toTitleCase(attr), PropTypes.func), _defineProperty(_ref2, 'get' + toTitleCase(attr) + '0', PropTypes.func), _defineProperty(_ref2, attr + 'Range', PropTypes.array), _defineProperty(_ref2, attr + 'Type', PropTypes.oneOf(Object.keys(SCALE_FUNCTIONS))), _defineProperty(_ref2, attr + 'Distance', PropTypes.number), _defineProperty(_ref2, attr + 'BaseValue', PropTypes.any), _ref2;
 }
@@ -684,4 +726,11 @@
   Object.keys(props).forEach(function (key) {
+    // this filtering is critical for extracting the correct accessors!
     var attr = attributes.find(function (a) {
-      return key.indexOf(a) === 0 || key.indexOf('_' + a) === 0;
+      // width
+      var isPlainSet = key.indexOf(a) === 0;
+      // Ex: _data
+      var isUnderscoreSet = key.indexOf('_' + a) === 0;
+      // EX: getX
+      var usesGet = key.indexOf('get' + toTitleCase(a)) === 0;
+      return isPlainSet || isUnderscoreSet || usesGet;
     });
@@ -709,4 +758,14 @@ if (!attr) {
   attributes.forEach(function (attr) {
+    if (!props['get' + toTitleCase(attr)]) {
+      result['get' + toTitleCase(attr)] = function (d) {
+        return d[attr];
+      };
+    }
+    if (!props['get' + toTitleCase(attr) + '0']) {
+      result['get' + toTitleCase(attr) + '0'] = function (d) {
+        return d[attr + '0'];
+      };
+    }
     if (!props[attr + 'Domain']) {
-      result[attr + 'Domain'] = getDomainByAttr(data, attr, props[attr + 'Type']);
+      result[attr + 'Domain'] = getDomainByAccessor(data, props['get' + toTitleCase(attr)] || result['get' + toTitleCase(attr)], props['get' + toTitleCase(attr) + '0'] || result['get' + toTitleCase(attr) + '0'], props[attr + 'Type']);
       if (props[attr + 'Padding']) {
@@ -785,2 +844,26 @@ result[attr + 'Domain'] = _padDomain(result[attr + 'Domain'], props[attr + 'Padding']);
 
+var OPTIONAL_SCALE_PROPS = ['Padding'];
+var OPTIONAL_SCALE_PROPS_REGS = OPTIONAL_SCALE_PROPS.map(function (str) {
+  return new RegExp(str + '$', 'i');
+});
+/**
+ * Get the list of optional scale-related settings for XYPlot
+ * mostly just used to find padding properties
+ * @param {Object} props Object of props.
+ * @returns {Object} Optional Props.
+ * @private
+ */
+export function getOptionalScaleProps(props) {
+  return Object.keys(props).reduce(function (acc, prop) {
+    var propIsNotOptional = OPTIONAL_SCALE_PROPS_REGS.every(function (reg) {
+      return !prop.match(reg);
+    });
+    if (propIsNotOptional) {
+      return acc;
+    }
+    acc[prop] = props[prop];
+    return acc;
+  }, {});
+}
+
 export default {
@@ -792,5 +875,6 @@ extractScalePropsFromProps: extractScalePropsFromProps,
   getAttributeValue: getAttributeValue,
-  getDomainByAttr: getDomainByAttr,
+  getDomainByAccessor: getDomainByAccessor,
   getFontColorFromBackground: getFontColorFromBackground,
   getMissingScaleProps: getMissingScaleProps,
+  getOptionalScaleProps: getOptionalScaleProps,
   getScaleObjectFromProps: getScaleObjectFromProps,
@@ -797,0 +881,0 @@ getScalePropTypesByAttribute: getScalePropTypesByAttribute,

package.json

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

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

1716503

increased by1.03%

Lines of code

23109

increased by1.82%

No dependency changes