precharts
Version:
Wraps Recharts up for Preact, without preact-compat
1,757 lines (1,419 loc) • 467 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('core-js/es6/math'), require('preact-compat/legacy'), require('classnames'), require('lodash'), require('d3-scale'), require('d3-shape'), require('raf'), require('preact'), require('reduce-css-calc')) :
typeof define === 'function' && define.amd ? define(['core-js/es6/math', 'preact-compat/legacy', 'classnames', 'lodash', 'd3-scale', 'd3-shape', 'raf', 'preact', 'reduce-css-calc'], factory) :
(global.precharts = factory(global.coreJs_es6_math,global.preactCompat,global.classnames,global.lodash,global.d3Scales,global.d3Shape,global.raf,global.preact,global.reduceCSSCalc));
}(this, (function (coreJs_es6_math,React,classNames,_,d3Scales,d3Shape,raf,preact,reduceCSSCalc) {
var React__default = 'default' in React ? React['default'] : React;
classNames = 'default' in classNames ? classNames['default'] : classNames;
var ___default = 'default' in _ ? _['default'] : _;
var raf__default = 'default' in raf ? raf['default'] : raf;
reduceCSSCalc = 'default' in reduceCSSCalc ? reduceCSSCalc['default'] : reduceCSSCalc;
/* eslint no-proto: 0 */
var testObject = {};
if (!(Object.setPrototypeOf || testObject.__proto__)) {
(function () {
var nativeGetPrototypeOf = Object.getPrototypeOf;
Object.getPrototypeOf = function (object) {
if (object.__proto__) {
return object.__proto__;
}
return nativeGetPrototypeOf.call(Object, object);
};
})();
}
var compat = Object.freeze({
default: React__default
});
var isPercent = function isPercent(value) {
return ___default.isString(value) && value.indexOf('%') === value.length - 1;
};
var isNumber = function isNumber(value) {
return ___default.isNumber(value) && !___default.isNaN(value);
};
var isNumOrStr = function isNumOrStr(value) {
return isNumber(value) || ___default.isString(value);
};
var idCounter = 0;
var uniqueId = function uniqueId(prefix) {
var id = ++idCounter;
return '' + (prefix || '') + id;
};
/**
* Get percent value of a total value
* @param {Number|String} percent A percent
* @param {Number} totalValue Total value
* @param {NUmber} defaultValue The value returned when percent is undefined or invalid
* @param {Boolean} validate If set to be true, the result will be validated
* @return {Number} value
*/
var getPercentValue = function getPercentValue(percent, totalValue) {
var defaultValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
var validate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
if (!isNumber(percent) && !___default.isString(percent)) {
return defaultValue;
}
var value = void 0;
if (isPercent(percent)) {
var index = percent.indexOf('%');
value = totalValue * parseFloat(percent.slice(0, index)) / 100;
} else {
value = +percent;
}
if (isNaN(value)) {
value = defaultValue;
}
if (validate && value > totalValue) {
value = totalValue;
}
return value;
};
var MIN_VALUE_REG = /^dataMin[\s]*-[\s]*([\d]+)$/;
var MAX_VALUE_REG = /^dataMax[\s]*\+[\s]*([\d]+)$/;
var parseSpecifiedDomain = function parseSpecifiedDomain(specifiedDomain, dataDomain, allowDataOverflow) {
if (!___default.isArray(specifiedDomain)) {
return dataDomain;
}
var domain = [];
if (isNumber(specifiedDomain[0])) {
domain[0] = allowDataOverflow ? specifiedDomain[0] : Math.min(specifiedDomain[0], dataDomain[0]);
} else if (MIN_VALUE_REG.test(specifiedDomain[0])) {
var value = +MIN_VALUE_REG.exec(specifiedDomain[0])[1];
domain[0] = dataDomain[0] - value;
} else {
domain[0] = dataDomain[0];
}
if (isNumber(specifiedDomain[1])) {
domain[1] = allowDataOverflow ? specifiedDomain[1] : Math.max(specifiedDomain[1], dataDomain[1]);
} else if (MAX_VALUE_REG.test(specifiedDomain[1])) {
var _value = +MAX_VALUE_REG.exec(specifiedDomain[1])[1];
domain[1] = dataDomain[1] + _value;
} else {
domain[1] = dataDomain[1];
}
return domain;
};
var validateCoordinateInRange = function validateCoordinateInRange(coordinate, scale) {
if (!scale) {
return false;
}
var range = scale.range();
var first = range[0];
var last = range[range.length - 1];
var isValidate = first <= last ? coordinate >= first && coordinate <= last : coordinate >= last && coordinate <= first;
return isValidate;
};
/**
* Calculate the size between two category
* @param {Object} axis The options of axis
* @param {Array} ticks The ticks of axis
* @return {Number} Size
*/
var getBandSizeOfAxis = function getBandSizeOfAxis(axis, ticks) {
if (axis && axis.type === 'category' && axis.scale && axis.scale.bandwidth) {
return axis.scale.bandwidth();
}
if (axis && axis.type === 'number' && ticks) {
var orderedTicks = ___default.sortBy(ticks, function (o) {
return o.coordinate;
});
var bandSize = Infinity;
for (var i = 1, len = orderedTicks.length; i < len; i++) {
var cur = orderedTicks[i];
var prev = orderedTicks[i - 1];
bandSize = Math.min((cur.coordinate || 0) - (prev.coordinate || 0), bandSize);
}
return bandSize === Infinity ? 0 : bandSize;
}
return 0;
};
var getAnyElementOfObject = function getAnyElementOfObject(obj) {
if (!obj) {
return null;
}
var keys = Object.keys(obj);
if (keys && keys.length) {
return obj[keys[0]];
}
return null;
};
var hasDuplicate = function hasDuplicate(ary) {
if (!___default.isArray(ary)) {
return false;
}
var len = ary.length;
var cache = {};
for (var i = 0; i < len; i++) {
if (!cache[ary[i]]) {
cache[ary[i]] = true;
} else {
return true;
}
}
return false;
};
/**
* combine the handlers
* @param {Function} defaultHandler Internal private handler
* @param {Function} parentHandler Handler function specified in parent component
* @param {Function} childHandler Handler function specified in child component
* @return {Function} The combined handler
*/
var combineEventHandlers = function combineEventHandlers(defaultHandler, parentHandler, childHandler) {
var customizedHandler = void 0;
if (___default.isFunction(childHandler)) {
customizedHandler = childHandler;
} else if (___default.isFunction(parentHandler)) {
customizedHandler = parentHandler;
}
if (___default.isFunction(defaultHandler) || customizedHandler) {
return function (arg1, arg2, arg3, arg4) {
if (___default.isFunction(defaultHandler)) {
defaultHandler(arg1, arg2, arg3, arg4);
}
if (___default.isFunction(customizedHandler)) {
customizedHandler(arg1, arg2, arg3, arg4);
}
};
}
return null;
};
/**
* Parse the scale function of axis
* @param {String} options.scale The specified scale type
* @param {String} options.type The type of axis
* @param {String} chartType The displayName of chart
* @return {Function} The scale funcion
*/
var parseScale = function parseScale(_ref, chartType) {
var scale = _ref.scale,
type = _ref.type;
if (scale === 'auto') {
if (type === 'category' && chartType && (chartType.indexOf('LineChart') >= 0 || chartType.indexOf('AreaChart') >= 0)) {
return d3Scales.scalePoint();
} else if (type === 'category') {
return d3Scales.scaleBand();
}
return d3Scales.scaleLinear();
} else if (___default.isString(scale)) {
var name = 'scale' + scale.slice(0, 1).toUpperCase() + scale.slice(1);
return (d3Scales[name] || d3Scales.scalePoint)();
}
return ___default.isFunction(scale) ? scale : d3Scales.scalePoint();
};
var getValueByDataKey = function getValueByDataKey(obj, dataKey, defaultValue) {
if (___default.isNil(obj) || ___default.isNil(dataKey)) {
return defaultValue;
}
if (isNumOrStr(dataKey)) {
return ___default.get(obj, dataKey, defaultValue);
}
if (___default.isFunction(dataKey)) {
return dataKey(obj);
}
return defaultValue;
};
var findPositionOfBar = function findPositionOfBar(barPosition, child) {
if (!barPosition) {
return null;
}
for (var i = 0, len = barPosition.length; i < len; i++) {
if (barPosition[i].item === child) {
return barPosition[i].position;
}
}
return null;
};
var truncateByDomain = function truncateByDomain(value, domain) {
if (!domain || domain.length !== 2 || !isNumber(domain[0]) || !isNumber(domain[1])) {
return value;
}
var min = Math.min(domain[0], domain[1]);
var max = Math.max(domain[0], domain[1]);
var result = [value[0], value[1]];
if (!isNumber(value[0]) || value[0] < min) {
result[0] = min;
}
if (!isNumber(value[1]) || value[1] > max) {
result[1] = max;
}
if (result[0] > max) {
result[0] = max;
}
if (result[1] < min) {
result[1] = min;
}
return result;
};
function shallowEqual(a, b) {
/* eslint-disable no-restricted-syntax */
for (var key in a) {
if ({}.hasOwnProperty.call(a, key) && (!{}.hasOwnProperty.call(b, key) || a[key] !== b[key])) {
return false;
}
}
for (var _key in b) {
if ({}.hasOwnProperty.call(b, _key) && !{}.hasOwnProperty.call(a, _key)) {
return false;
}
}
return true;
}
function shouldComponentUpdate(props, state) {
return !shallowEqual(props, this.props) || !shallowEqual(state, this.state);
}
function pureRenderDecorator$1(component) {
// eslint-disable-next-line no-param-reassign
component.prototype.shouldComponentUpdate = shouldComponentUpdate;
}
var PRESENTATION_ATTRIBUTES = {
alignmentBaseline: React.PropTypes.string,
angle: React.PropTypes.number,
baselineShift: React.PropTypes.string,
clip: React.PropTypes.string,
clipPath: React.PropTypes.string,
clipRule: React.PropTypes.string,
color: React.PropTypes.string,
colorInterpolation: React.PropTypes.string,
colorInterpolationFilters: React.PropTypes.string,
colorProfile: React.PropTypes.string,
colorRendering: React.PropTypes.string,
cursor: React.PropTypes.string,
direction: React.PropTypes.oneOf(['ltr', 'rtl', 'inherit']),
display: React.PropTypes.string,
dominantBaseline: React.PropTypes.string,
enableBackground: React.PropTypes.string,
fill: React.PropTypes.string,
fillOpacity: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
fillRule: React.PropTypes.oneOf(['nonzero', 'evenodd', 'inherit']),
filter: React.PropTypes.string,
floodColor: React.PropTypes.string,
floodOpacity: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
font: React.PropTypes.string,
fontFamily: React.PropTypes.string,
fontSize: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
fontSizeAdjust: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
fontStretch: React.PropTypes.oneOf(['normal', 'wider', 'narrower', 'ultra-condensed', 'extra-condensed', 'condensed', 'semi-condensed', 'semi-expanded', 'expanded', 'extra-expanded', 'ultra-expanded', 'inherit']),
fontStyle: React.PropTypes.oneOf(['normal', 'italic', 'oblique', 'inherit']),
fontVariant: React.PropTypes.oneOf(['normal', 'small-caps', 'inherit']),
fontWeight: React.PropTypes.oneOf(['normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900, 'inherit']),
glyphOrientationHorizontal: React.PropTypes.string,
glyphOrientationVertical: React.PropTypes.string,
imageRendering: React.PropTypes.oneOf(['auto', 'optimizeSpeed', 'optimizeQuality', 'inherit']),
kerning: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
letterSpacing: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
lightingColor: React.PropTypes.string,
markerEnd: React.PropTypes.string,
markerMid: React.PropTypes.string,
markerStart: React.PropTypes.string,
mask: React.PropTypes.string,
opacity: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
overflow: React.PropTypes.oneOf(['visible', 'hidden', 'scroll', 'auto', 'inherit']),
pointerEvents: React.PropTypes.oneOf(['visiblePainted', 'visibleFill', 'visibleStroke', 'visible', 'painted', 'fill', 'stroke', 'all', 'none', 'inherit']),
shapeRendering: React.PropTypes.oneOf(['auto', 'optimizeSpeed', 'crispEdges', 'geometricPrecision', 'inherit']),
stopColor: React.PropTypes.string,
stopOpacity: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
stroke: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
strokeDasharray: React.PropTypes.string,
strokeDashoffset: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
strokeLinecap: React.PropTypes.oneOf(['butt', 'round', 'square', 'inherit']),
strokeLinejoin: React.PropTypes.oneOf(['miter', 'round', 'bevel', 'inherit']),
strokeMiterlimit: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
strokeOpacity: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
strokeWidth: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
textAnchor: React.PropTypes.oneOf(['start', 'middle', 'end', 'inherit']),
textDecoration: React.PropTypes.oneOf(['none', 'underline', 'overline', 'line-through', 'blink', 'inherit']),
textRendering: React.PropTypes.oneOf(['auto', 'optimizeSpeed', 'optimizeLegibility', 'geometricPrecision', 'inherit']),
unicodeBidi: React.PropTypes.oneOf(['normal', 'embed', 'bidi-override', 'inherit']),
visibility: React.PropTypes.oneOf(['visible', 'hidden', 'collapse', 'inherit']),
wordSpacing: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
writingMode: React.PropTypes.oneOf(['lr-tb', 'rl-tb', 'tb-rl', 'lr', 'rl', 'tb', 'inherit']),
transform: React.PropTypes.string,
style: React.PropTypes.object,
width: React.PropTypes.number,
height: React.PropTypes.number,
dx: React.PropTypes.number,
dy: React.PropTypes.number,
x: React.PropTypes.number,
y: React.PropTypes.number,
r: React.PropTypes.number
};
var EVENT_ATTRIBUTES = {
onClick: React.PropTypes.func,
onMouseDown: React.PropTypes.func,
onMouseUp: React.PropTypes.func,
onMouseOver: React.PropTypes.func,
onMouseMove: React.PropTypes.func,
onMouseOut: React.PropTypes.func,
onMouseEnter: React.PropTypes.func,
onMouseLeave: React.PropTypes.func
};
/**
* Get the display name of a component
* @param {Object} Comp Specified Component
* @return {String} Display name of Component
*/
var getDisplayName = function getDisplayName(Comp) {
if (!Comp) {
return '';
}
if (typeof Comp === 'string') {
return Comp;
}
return Comp.displayName || Comp.name || 'Component';
};
/*
* Find and return all matched children by type. `type` can be a React element class or
* string
*/
var findAllByType = function findAllByType(children, type) {
var result = [];
var types = [];
if (___default.isArray(type)) {
types = type.map(function (t) {
return getDisplayName(t);
});
} else {
types = [getDisplayName(type)];
}
React__default.Children.forEach(children, function (child) {
var childType = child && child.type && (child.type.displayName || child.type.name);
if (types.indexOf(childType) !== -1) {
result.push(child);
}
});
return result;
};
/*
* Return the first matched child by type, return null otherwise.
* `type` can be a React element class or string.
*/
var findChildByType = function findChildByType(children, type) {
var result = findAllByType(children, type);
return result && result[0];
};
/*
* Create a new array of children excluding the ones matched the type
*/
/**
* get all the presentation attribute of svg element
* @param {Object} el A react element or the props of a react element
* @return {Object} attributes or null
*/
var getPresentationAttributes = function getPresentationAttributes(el) {
if (!el || ___default.isFunction(el)) {
return null;
}
var props = React__default.isValidElement(el) ? el.props : el;
if (!___default.isObject(props)) {
return null;
}
var out = null;
// eslint-disable-next-line no-restricted-syntax
for (var i in props) {
if ({}.hasOwnProperty.call(props, i) && PRESENTATION_ATTRIBUTES[i]) {
if (!out) out = {};
out[i] = props[i];
}
}
return out;
};
/**
* get all the event attribute of svg element
* @param {Object} el A react element or the props of a react element
* @return {Object} attributes or null
*/
var filterEventAttributes = function filterEventAttributes(el) {
if (!el || ___default.isFunction(el)) {
return null;
}
var props = React__default.isValidElement(el) ? el.props : el;
if (!___default.isObject(props)) {
return null;
}
var out = null;
// eslint-disable-next-line no-restricted-syntax
for (var i in props) {
if ({}.hasOwnProperty.call(props, i) && EVENT_ATTRIBUTES[i]) {
if (!out) out = {};
out[i] = props[i];
}
}
return out;
};
var getEventHandler = function getEventHandler(originalHandler, data, index) {
return function (e) {
originalHandler(data, index, e);
return null;
};
};
var filterEventsOfChild = function filterEventsOfChild(props, data, index) {
if (!___default.isObject(props)) {
return null;
}
var out = null;
// eslint-disable-next-line no-restricted-syntax
for (var i in props) {
if ({}.hasOwnProperty.call(props, i) && EVENT_ATTRIBUTES[i] && ___default.isFunction(props[i])) {
if (!out) out = {};
out[i] = getEventHandler(props[i], data, index);
}
}
return out;
};
/**
* validate the width and height props of a chart element
* @param {Object} el A chart element
* @return {Boolean} true If the props width and height are number, and greater than 0
*/
var validateWidthHeight = function validateWidthHeight(el) {
if (!el || !el.props) {
return false;
}
var _el$props = el.props,
width = _el$props.width,
height = _el$props.height;
if (!isNumber(width) || width <= 0 || !isNumber(height) || height <= 0) {
return false;
}
return true;
};
var isSsr = function isSsr() {
return !(typeof window !== 'undefined' && window.document && window.document.createElement && window.setTimeout);
};
var SVG_TAGS = ['a', 'altGlyph', 'altGlyphDef', 'altGlyphItem', 'animate', 'animateColor', 'animateMotion', 'animateTransform', 'circle', 'clipPath', 'color-profile', 'cursor', 'defs', 'desc', 'ellipse', 'feBlend', 'feColormatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence', 'filter', 'font', 'font-face', 'font-face-format', 'font-face-name', 'font-face-url', 'foreignObject', 'g', 'glyph', 'glyphRef', 'hkern', 'image', 'line', 'lineGradient', 'marker', 'mask', 'metadata', 'missing-glyph', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'script', 'set', 'stop', 'style', 'svg', 'switch', 'symbol', 'text', 'textPath', 'title', 'tref', 'tspan', 'use', 'view', 'vkern'];
/**
* Filter all the svg elements of children
* @param {Array} children The children of a react element
* @return {Array} All the svg elements
*/
var filterSvgElements = function filterSvgElements(children) {
var svgElements = [];
React__default.Children.forEach(children, function (entry) {
if (entry && entry.type && ___default.isString(entry.type) && SVG_TAGS.indexOf(entry.type) >= 0) {
svgElements.push(entry);
}
});
return svgElements;
};
var isSingleChildEqual = function isSingleChildEqual(nextChild, prevChild) {
if (___default.isNil(nextChild) && ___default.isNil(prevChild)) {
return true;
} else if (!___default.isNil(nextChild) && !___default.isNil(prevChild)) {
return shallowEqual(nextChild.props, prevChild.props);
}
return false;
};
/**
* Wether props of children changed
* @param {Object} nextChildren The latest children
* @param {Object} prevChildren The prev children
* @return {Boolean} equal or not
*/
var isChildrenEqual = function isChildrenEqual(nextChildren, prevChildren) {
if (nextChildren === prevChildren) {
return true;
}
if (React.Children.count(nextChildren) !== React.Children.count(prevChildren)) {
return false;
}
var count = React.Children.count(nextChildren);
if (count === 0) {
return true;
}
if (count === 1) {
return isSingleChildEqual(nextChildren, prevChildren);
}
for (var i = 0; i < count; i++) {
var nextChild = nextChildren[i];
var prevChild = prevChildren[i];
if (!isSingleChildEqual(nextChild, prevChild)) {
return false;
}
}
return true;
};
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
return typeof obj;
} : function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
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 inherits = function (subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
};
var objectWithoutProperties = function (obj, keys) {
var target = {};
for (var i in obj) {
if (keys.indexOf(i) >= 0) continue;
if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
target[i] = obj[i];
}
return target;
};
var possibleConstructorReturn = function (self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && (typeof call === "object" || typeof call === "function") ? call : self;
};
/**
* @fileOverview Surface
*/
var propTypes = {
width: React.PropTypes.number.isRequired,
height: React.PropTypes.number.isRequired,
viewBox: React.PropTypes.shape({
x: React.PropTypes.number,
y: React.PropTypes.number,
width: React.PropTypes.number,
height: React.PropTypes.number
}),
className: React.PropTypes.string,
style: React.PropTypes.object,
children: React.PropTypes.oneOfType([React.PropTypes.arrayOf(React.PropTypes.node), React.PropTypes.node])
};
function Surface(props) {
var children = props.children,
width = props.width,
height = props.height,
viewBox = props.viewBox,
className = props.className,
style = props.style,
others = objectWithoutProperties(props, ['children', 'width', 'height', 'viewBox', 'className', 'style']);
var svgView = viewBox || { width: width, height: height, x: 0, y: 0 };
var layerClass = classNames('recharts-surface', className);
var attrs = getPresentationAttributes(others);
return React__default.createElement(
'svg',
_extends({}, attrs, {
className: layerClass,
width: width,
height: height,
style: style,
viewBox: svgView.x + ' ' + svgView.y + ' ' + svgView.width + ' ' + svgView.height,
version: '1.1'
}),
children
);
}
/**
* @fileOverview Layer
*/
var propTypes$1 = {
className: React.PropTypes.string,
children: React.PropTypes.oneOfType([React.PropTypes.arrayOf(React.PropTypes.node), React.PropTypes.node])
};
function Layer(props) {
var children = props.children,
className = props.className,
others = objectWithoutProperties(props, ['children', 'className']);
var layerClass = classNames('recharts-layer', className);
return React__default.createElement(
'g',
_extends({ className: layerClass }, others),
children
);
}
var _class$2;
/**
* @fileOverview Curve
*/
var SYMBOL_FACTORIES = {
symbolCircle: d3Shape.symbolCircle, symbolCross: d3Shape.symbolCross, symbolDiamond: d3Shape.symbolDiamond,
symbolSquare: d3Shape.symbolSquare, symbolStar: d3Shape.symbolStar, symbolTriangle: d3Shape.symbolTriangle, symbolWye: d3Shape.symbolWye
};
var RADIAN = Math.PI / 180;
var getSymbolFactory = function getSymbolFactory(type) {
var name = 'symbol' + type.slice(0, 1).toUpperCase() + type.slice(1);
return SYMBOL_FACTORIES[name] || d3Shape.symbolCircle;
};
var calculateAreaSize = function calculateAreaSize(size, sizeType, type) {
if (sizeType === 'area') {
return size;
}
switch (type) {
case 'cross':
return 5 * size * size / 9;
case 'diamond':
return 0.5 * size * size / Math.sqrt(3);
case 'square':
return size * size;
case 'star':
{
var angle = 18 * RADIAN;
return 1.25 * size * size * (Math.tan(angle) - Math.tan(angle * 2) * Math.pow(Math.tan(angle), 2));
}
case 'triangle':
return Math.sqrt(3) * size * size / 4;
case 'wye':
return (21 - 10 * Math.sqrt(3)) * size * size / 8;
default:
return Math.PI * size * size / 4;
}
};
var Symbols = pureRenderDecorator$1(_class$2 = function (_Component) {
inherits(Symbols, _Component);
function Symbols() {
classCallCheck(this, Symbols);
return possibleConstructorReturn(this, _Component.apply(this, arguments));
}
/**
* Calculate the path of curve
* @return {String} path
*/
Symbols.prototype.getPath = function getPath() {
var _props = this.props,
size = _props.size,
sizeType = _props.sizeType,
type = _props.type;
var symbolFactory = getSymbolFactory(type);
var symbol$$1 = d3Shape.symbol().type(symbolFactory).size(calculateAreaSize(size, sizeType, type));
return symbol$$1();
};
Symbols.prototype.render = function render() {
var _props2 = this.props,
className = _props2.className,
cx = _props2.cx,
cy = _props2.cy,
size = _props2.size;
if (cx === +cx && cy === +cy && size === +size) {
return React__default.createElement('path', _extends({}, getPresentationAttributes(this.props), filterEventAttributes(this.props), {
className: classNames('recharts-symbols', className),
transform: 'translate(' + cx + ', ' + cy + ')',
d: this.getPath()
}));
}
return null;
};
return Symbols;
}(React.Component)) || _class$2;
Symbols.displayName = 'Symbols';
Symbols.defaultProps = {
type: 'circle',
size: 64,
sizeType: 'area'
};
var _class$1;
/**
* @fileOverview Default Legend Content
*/
var SIZE = 32;
var DefaultLegendContent = pureRenderDecorator$1(_class$1 = function (_Component) {
inherits(DefaultLegendContent, _Component);
function DefaultLegendContent() {
classCallCheck(this, DefaultLegendContent);
return possibleConstructorReturn(this, _Component.apply(this, arguments));
}
/**
* Render the path of icon
* @param {Object} data Data of each legend item
* @return {String} Path element
*/
DefaultLegendContent.prototype.renderIcon = function renderIcon(data) {
var color = data.color;
var halfSize = SIZE / 2;
var sixthSize = SIZE / 6;
var thirdSize = SIZE / 3;
if (data.type === 'line') {
return React__default.createElement('path', {
strokeWidth: 4,
fill: 'none',
stroke: color,
d: 'M0,' + halfSize + 'h' + thirdSize + '\n A' + sixthSize + ',' + sixthSize + ',0,1,1,' + 2 * thirdSize + ',' + halfSize + '\n H' + SIZE + 'M' + 2 * thirdSize + ',' + halfSize + '\n A' + sixthSize + ',' + sixthSize + ',0,1,1,' + thirdSize + ',' + halfSize,
className: 'recharts-legend-icon'
});
} else if (data.type === 'rect') {
return React__default.createElement('path', {
stroke: 'none',
fill: color,
d: 'M0,' + SIZE / 8 + 'h' + SIZE + 'v' + SIZE * 3 / 4 + 'h' + -SIZE + 'z',
className: 'recharts-legend-icon'
});
}
return React__default.createElement(Symbols, {
fill: color,
cx: halfSize,
cy: halfSize,
size: SIZE,
sizeType: 'diameter',
type: data.type
});
};
/**
* Draw items of legend
* @return {ReactElement} Items
*/
DefaultLegendContent.prototype.renderItems = function renderItems() {
var _this2 = this;
var _props = this.props,
payload = _props.payload,
iconSize = _props.iconSize,
layout = _props.layout,
formatter = _props.formatter;
var viewBox = { x: 0, y: 0, width: SIZE, height: SIZE };
var itemStyle = {
display: layout === 'horizontal' ? 'inline-block' : 'block',
marginRight: 10
};
var svgStyle = { display: 'inline-block', verticalAlign: 'middle', marginRight: 4 };
return payload.map(function (entry, i) {
var finalFormatter = entry.formatter || formatter;
return React__default.createElement(
'li',
_extends({
className: 'recharts-legend-item legend-item-' + i,
style: itemStyle,
key: 'legend-item-' + i
}, filterEventsOfChild(_this2.props, entry, i)),
React__default.createElement(
Surface,
{ width: iconSize, height: iconSize, viewBox: viewBox, style: svgStyle },
_this2.renderIcon(entry, iconSize)
),
React__default.createElement(
'span',
{ className: 'recharts-legend-item-text' },
finalFormatter ? finalFormatter(entry.value, entry, i) : entry.value
)
);
});
};
DefaultLegendContent.prototype.render = function render() {
var _props2 = this.props,
payload = _props2.payload,
layout = _props2.layout,
align = _props2.align;
if (!payload || !payload.length) {
return null;
}
var finalStyle = {
padding: 0,
margin: 0,
textAlign: layout === 'horizontal' ? align : 'left'
};
return React__default.createElement(
'ul',
{ className: 'recharts-default-legend', style: finalStyle },
this.renderItems()
);
};
return DefaultLegendContent;
}(React.Component)) || _class$1;
DefaultLegendContent.displayName = 'Legend';
DefaultLegendContent.defaultProps = {
iconSize: 14,
layout: 'horizontal',
align: 'center',
verticalAlign: 'middle'
};
var _class;
/**
* @fileOverview Legend
*/
var renderContent = function renderContent(content, props) {
if (React__default.isValidElement(content)) {
return React__default.cloneElement(content, props);
} else if (___default.isFunction(content)) {
return content(props);
}
return React__default.createElement(DefaultLegendContent, props);
};
var EPS = 1;
var Legend = pureRenderDecorator$1(_class = function (_Component) {
inherits(Legend, _Component);
function Legend() {
var _temp, _this, _ret;
classCallCheck(this, Legend);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = {
boxWidth: -1,
boxHeight: -1
}, _temp), possibleConstructorReturn(_this, _ret);
}
Legend.getWithHeight = function getWithHeight(item, chartWidth) {
var layout = item.props.layout;
if (layout === 'vertical' && isNumber(item.props.height)) {
return {
height: item.props.height
};
} else if (layout === 'horizontal') {
return {
width: item.props.width || chartWidth
};
}
return null;
};
Legend.prototype.componentDidMount = function componentDidMount() {
this.updateBBox();
};
Legend.prototype.componentDidUpdate = function componentDidUpdate() {
this.updateBBox();
};
Legend.prototype.getBBox = function getBBox() {
var _state = this.state,
boxWidth = _state.boxWidth,
boxHeight = _state.boxHeight;
if (boxWidth >= 0 && boxHeight >= 0) {
return { width: boxWidth, height: boxHeight };
}
return null;
};
Legend.prototype.getDefaultPosition = function getDefaultPosition(style) {
var _props = this.props,
layout = _props.layout,
align = _props.align,
verticalAlign = _props.verticalAlign,
margin = _props.margin,
chartWidth = _props.chartWidth,
chartHeight = _props.chartHeight;
var hPos = void 0,
vPos = void 0;
if (!style || (style.left === undefined || style.left === null) && (style.right === undefined || style.right === null)) {
if (align === 'center' && layout === 'vertical') {
var box = this.getBBox() || { width: 0 };
hPos = { left: ((chartWidth || 0) - box.width) / 2 };
} else {
hPos = align === 'right' ? { right: margin && margin.right || 0 } : { left: margin && margin.left || 0 };
}
}
if (!style || (style.top === undefined || style.top === null) && (style.bottom === undefined || style.bottom === null)) {
if (verticalAlign === 'middle') {
var _box = this.getBBox() || { height: 0 };
vPos = { top: ((chartHeight || 0) - _box.height) / 2 };
} else {
vPos = verticalAlign === 'bottom' ? { bottom: margin && margin.bottom || 0 } : { top: margin && margin.top || 0 };
}
}
return _extends({}, hPos, vPos);
};
Legend.prototype.updateBBox = function updateBBox() {
var _this2 = this;
var _state2 = this.state,
boxWidth = _state2.boxWidth,
boxHeight = _state2.boxHeight;
var onBBoxUpdate = this.props.onBBoxUpdate;
if (this.wrapperNode && this.wrapperNode.getBoundingClientRect) {
(function () {
var box = _this2.wrapperNode.getBoundingClientRect();
if (Math.abs(box.width - boxWidth) > EPS || Math.abs(box.height - boxHeight) > EPS) {
_this2.setState({
boxWidth: box.width,
boxHeight: box.height
}, function () {
if (onBBoxUpdate) {
onBBoxUpdate(box);
}
});
}
})();
} else if (boxWidth !== -1 || boxHeight !== -1) {
this.setState({
boxWidth: -1,
boxHeight: -1
}, function () {
if (onBBoxUpdate) {
onBBoxUpdate(null);
}
});
}
};
Legend.prototype.render = function render() {
var _this3 = this;
var _props2 = this.props,
content = _props2.content,
width = _props2.width,
height = _props2.height,
wrapperStyle = _props2.wrapperStyle;
var outerStyle = _extends({
position: 'absolute',
width: width || 'auto',
height: height || 'auto'
}, this.getDefaultPosition(wrapperStyle), wrapperStyle);
return React__default.createElement(
'div',
{
className: 'recharts-legend-wrapper',
style: outerStyle,
ref: function ref(node) {
_this3.wrapperNode = node;
}
},
renderContent(content, this.props)
);
};
return Legend;
}(React.Component)) || _class;
Legend.displayName = 'Legend';
Legend.defaultProps = {
iconSize: 14,
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
};
function setRafTimeout(callback) {
var timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var currTime = -1;
var shouldUpdate = function shouldUpdate(now) {
if (currTime < 0) {
currTime = now;
}
if (now - currTime > timeout) {
callback(now);
currTime = -1;
} else {
raf__default(shouldUpdate);
}
};
raf__default(shouldUpdate);
}
function createAnimateManager() {
var currStyle = {};
var handleChange = function handleChange() {
return null;
};
var shouldStop = false;
var setStyle = function setStyle(_style) {
if (shouldStop) {
return;
}
if (Array.isArray(_style)) {
if (!_style.length) {
return;
}
var styles = _style;
var curr = styles[0],
restStyles = styles.slice(1);
if (typeof curr === 'number') {
setRafTimeout(setStyle.bind(null, restStyles), curr);
return;
}
setStyle(curr);
setRafTimeout(setStyle.bind(null, restStyles));
return;
}
if ((typeof _style === 'undefined' ? 'undefined' : _typeof(_style)) === 'object') {
currStyle = _style;
handleChange(currStyle);
}
if (typeof _style === 'function') {
_style();
}
};
return {
stop: function stop() {
shouldStop = true;
},
start: function start(style) {
shouldStop = false;
setStyle(style);
},
subscribe: function subscribe(_handleChange) {
handleChange = _handleChange;
return function () {
handleChange = function handleChange() {
return null;
};
};
}
};
}
function shallowEqual$1(objA, objB) {
if (objA === objB) {
return true;
}
if ((typeof objA === 'undefined' ? 'undefined' : _typeof(objA)) !== 'object' || objA === null || (typeof objB === 'undefined' ? 'undefined' : _typeof(objB)) !== 'object' || objB === null) {
return false;
}
var keysA = Object.keys(objA);
var keysB = Object.keys(objB);
if (keysA.length !== keysB.length) {
return false;
}
var bHasOwnProperty = hasOwnProperty.bind(objB);
for (var i = 0; i < keysA.length; i++) {
var keyA = keysA[i];
if (objA[keyA] === objB[keyA]) {
continue;
}
// special diff with Array or Object
if (___default.isArray(objA[keyA])) {
if (!___default.isArray(objB[keyA]) || objA[keyA].length !== objB[keyA].length) {
return false;
} else if (!___default.isEqual(objA[keyA], objB[keyA])) {
return false;
}
} else if (___default.isPlainObject(objA[keyA])) {
if (!___default.isPlainObject(objB[keyA]) || !___default.isEqual(objA[keyA], objB[keyA])) {
return false;
}
} else if (!bHasOwnProperty(keysA[i]) || objA[keysA[i]] !== objB[keysA[i]]) {
return false;
}
}
return true;
}
function shallowCompare(instance, nextProps, nextState) {
return !shallowEqual$1(instance.props, nextProps) || !shallowEqual$1(instance.state, nextState);
}
function shouldComponentUpdate$1(nextProps, nextState) {
return shallowCompare(this, nextProps, nextState);
}
/* eslint-disable no-param-reassign */
function pureRenderDecorator$2(component) {
component.prototype.shouldComponentUpdate = shouldComponentUpdate$1;
}
/* eslint no-console: 0 */
var PREFIX_LIST = ['Webkit', 'Moz', 'O', 'ms'];
var IN_LINE_PREFIX_LIST = ['-webkit-', '-moz-', '-o-', '-ms-'];
var IN_COMPATIBLE_PROPERTY = ['transform', 'transformOrigin', 'transition'];
var getIntersectionKeys = function getIntersectionKeys(preObj, nextObj) {
return _.intersection(Object.keys(preObj), Object.keys(nextObj));
};
var identity = function identity(param) {
return param;
};
/*
* @description: convert camel case to dash case
* string => string
*/
var getDashCase = function getDashCase(name) {
return name.replace(/([A-Z])/g, function (v) {
return '-' + v.toLowerCase();
});
};
/*
* @description: add compatible style prefix
* (string, string) => object
*/
var generatePrefixStyle = function generatePrefixStyle(name, value) {
if (IN_COMPATIBLE_PROPERTY.indexOf(name) === -1) {
var _ref;
return _ref = {}, _ref[name] = value, _ref;
}
var isTransition = name === 'transition';
var camelName = name.replace(/(\w)/, function (v) {
return v.toUpperCase();
});
var styleVal = value;
return PREFIX_LIST.reduce(function (result, property, i) {
var _babelHelpers$extends;
if (isTransition) {
styleVal = value.replace(/(transform|transform-origin)/gim, IN_LINE_PREFIX_LIST[i] + '$1');
}
return _extends({}, result, (_babelHelpers$extends = {}, _babelHelpers$extends[property + camelName] = styleVal, _babelHelpers$extends));
}, {});
};
/*
* @description: log the value of a varible
* string => any => any
*/
/*
* @description: log name, args, return value of a function
* function => function
*/
/*
* @description: map object on every element in this object.
* (function, object) => object
*/
var mapObject = function mapObject(fn, obj) {
return Object.keys(obj).reduce(function (res, key) {
var _babelHelpers$extends2;
return _extends({}, res, (_babelHelpers$extends2 = {}, _babelHelpers$extends2[key] = fn(key, obj[key]), _babelHelpers$extends2));
}, {});
};
/*
* @description: add compatible prefix to style
* object => object
*/
var translateStyle = function translateStyle(style) {
return Object.keys(style).reduce(function (res, key) {
return _extends({}, res, generatePrefixStyle(key, res[key]));
}, style);
};
var getTransitionVal = function getTransitionVal(props, duration, easing) {
return props.map(function (prop) {
return getDashCase(prop) + ' ' + duration + 'ms ' + easing;
}).join(',');
};
var isDev = true;
var warn = function warn(condition, format, a, b, c, d, e, f) {
if (isDev && typeof console !== 'undefined' && console.warn) {
if (format === undefined) {
console.warn('LogUtils requires an error message argument');
}
if (!condition) {
if (format === undefined) {
console.warn('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
} else {
(function () {
var args = [a, b, c, d, e, f];
var argIndex = 0;
console.warn(format.replace(/%s/g, function () {
return args[argIndex++];
}));
})();
}
}
}
};
var ACCURACY = 1e-4;
var cubicBezierFactor = function cubicBezierFactor(c1, c2) {
return [0, 3 * c1, 3 * c2 - 6 * c1, 3 * c1 - 3 * c2 + 1];
};
var multyTime = function multyTime(params, t) {
return params.map(function (param, i) {
return param * Math.pow(t, i);
}).reduce(function (pre, curr) {
return pre + curr;
});
};
var cubicBezier = function cubicBezier(c1, c2) {
return function (t) {
var params = cubicBezierFactor(c1, c2);
return multyTime(params, t);
};
};
var derivativeCubicBezier = function derivativeCubicBezier(c1, c2) {
return function (t) {
var params = cubicBezierFactor(c1, c2);
var newParams = [].concat(params.map(function (param, i) {
return param * i;
}).slice(1), [0]);
return multyTime(newParams, t);
};
};
// calculate cubic-bezier using Newton's method
var configBezier = function configBezier() {
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
var x1 = args[0],
y1 = args[1],
x2 = args[2],
y2 = args[3];
if (args.length === 1) {
switch (args[0]) {
case 'linear':
x1 = 0.0;
y1 = 0.0;
x2 = 1.0;
y2 = 1.0;
break;
case 'ease':
x1 = 0.25;
y1 = 0.1;
x2 = 0.25;
y2 = 1.0;
break;
case 'ease-in':
x1 = 0.42;
y1 = 0.0;
x2 = 1.0;
y2 = 1.0;
break;
case 'ease-out':
x1 = 0.42;
y1 = 0.0;
x2 = 0.58;
y2 = 1.0;
break;
case 'ease-in-out':
x1 = 0.0;
y1 = 0.0;
x2 = 0.58;
y2 = 1.0;
break;
default:
warn(false, '[configBezier]: arguments should be one of ' + 'oneOf \'linear\', \'ease\', \'ease-in\', \'ease-out\', ' + '\'ease-in-out\', instead received %s', args);
}
}
warn([x1, x2, y1, y2].every(function (num) {
return typeof num === 'number' && num >= 0 && num <= 1;
}), '[configBezier]: arguments should be x1, y1, x2, y2 of [0, 1] instead received %s', args);
var curveX = cubicBezier(x1, x2);
var curveY = cubicBezier(y1, y2);
var derCurveX = derivativeCubicBezier(x1, x2);
var rangeValue = function rangeValue(value) {
if (value > 1) {
return 1;
} else if (value < 0) {
return 0;
}
return value;
};
var bezier = function bezier(_t) {
var t = _t > 1 ? 1 : _t;
var x = t;
for (var i = 0; i < 8; ++i) {
var evalT = curveX(x) - t;
var derVal = derCurveX(x);
if (Math.abs(evalT - t) < ACCURACY || derVal < ACCURACY) {
return curveY(x);
}
x = rangeValue(x - evalT / derVal);
}
return curveY(x);
};
bezier.isStepper = false;
return bezier;
};
var configSpring = function configSpring() {
var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _config$stiff = config.stiff,
stiff = _config$stiff === undefined ? 100 : _config$stiff,
_config$damping = config.damping,
damping = _config$damping === undefined ? 8 : _config$damping,
_config$dt = config.dt,
dt = _config$dt === undefined ? 17 : _config$dt;
var stepper = function stepper(currX, destX, currV) {
var FSpring = -(currX - destX) * stiff;
var FDamping = currV * damping;
var newV = currV + (FSpring - FDamping) * dt / 1000;
var newX = currV * dt / 1000 + currX;
if (Math.abs(newX - destX) < ACCURACY && Math.abs(newV) < ACCURACY) {
return [destX, 0];
}
return [newX, newV];
};
stepper.isStepper = true;
stepper.dt = dt;
return stepper;
};
var configEasing = function configEasing() {
for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
var easing = args[0];
if (typeof easing === 'string') {
switch (easing) {
case 'ease':
case 'ease-in-out':
case 'ease-out':
case 'ease-in':
case 'linear':
return configBezier(easing);
case 'spring':
return configSpring();
default:
warn(false, '[configEasing]: first argument should be one of \'ease\', \'ease-in\', ' + '\'ease-out\', \'ease-in-out\', \'linear\' and \'spring\', instead received %s', args);
}
}
if (typeof easing === 'function') {
return easing;
}
warn(false, '[configEasing]: first argument type should be function or ' + 'string, instead received %s', args);
return null;
};
var alpha = function alpha(begin, end, k) {
return begin + (end - begin) * k;
};
var needContinue = function needContinue(_ref) {
var from = _ref.from,
to = _ref.to;
return from !== to;
};
/*
* @description: cal new from value and velocity in each stepper
* @return: { [styleProperty]: { from, to, velocity } }
*/
var calStepperVals = function calStepperVals(easing, preVals, steps) {
var nextStepVals = mapObject(function (key, val) {
if (needContinue(val)) {
var _easing = easing(val.from, val.to, val.velocity),
newX = _easing[0],
newV = _easing[1];
return _extends({}, val, {
from: newX,
velocity: newV
});
}
return val;
}, preVals);
if (steps < 1) {
return mapObject(function (key, val) {
if (needContinue(val)) {
return _extends({}, val, {
velocity: alpha(val.velocity, nextStepVals[key].velocity, steps),
from: alpha(val.from, nextStepVals[key].from, steps)
});
}
return val;
}, preVals);
}
return calStepperVals(easing, nextStepVals, steps - 1);
};
// configure update function
var configUpdate = (function (from, to, easing, duration, render) {
var interKeys = getIntersectionKeys(from, to);
var timingStyle = interKeys.reduce(function (res, key) {
var _babelHelpers$extends;
return _extends({}, res, (_babelHelpers$extends = {}, _babelHelpers$extends[key] = [from[key], to[key]], _babelHelpers$extends));
}, {});
var stepperStyle = interKeys.reduce(function (res, key) {
var _babelHelpers$extends2;
return _extends({}, res, (_babelHelpers$extends2 = {}, _babelHelpers$extends2[key] = {
from: from[key],
velocity: 0,
to: to[key]
}, _babelHelpers$extends2));
}, {});
var cafId = -1;
var preTime = void 0;
var beginTime = void 0;
var update = function update() {
return null;
};
var getCurrStyle = function getCurrStyle() {
return mapObject(function (key, val) {
return val.from;
}, stepperStyle);
};
var shouldStopAnimation = function shouldStopAnimation() {
return !_.filter(stepperStyle, needContinue).length;
};
// stepper timing function like spring
var stepperUpdate = function stepperUpdate(now) {
if (!preTime) {
preTime = now;
}
var deltaTime = now - preTime;
var steps = deltaTime / easing.dt;
stepperStyle = calStepperVals(easing, stepperStyle, steps);
// get union set and add compatible prefix
render(_extends({}, from, to, getCurrStyle(stepperStyle)));
preTime = now;
if (!shouldStopAnimation()) {
cafId = raf__default(update);
}
};
// t => val timing function like cubic-bezier
var timingUpdate = function timingUpdate(now) {
if (!beginTi