recharts
Version:
React charts
974 lines (954 loc) • 95.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getAxisMapByAxes = exports.generateCategoricalChart = void 0;
var _every2 = _interopRequireDefault(require("lodash/every"));
var _find2 = _interopRequireDefault(require("lodash/find"));
var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
var _throttle2 = _interopRequireDefault(require("lodash/throttle"));
var _sortBy2 = _interopRequireDefault(require("lodash/sortBy"));
var _get2 = _interopRequireDefault(require("lodash/get"));
var _range2 = _interopRequireDefault(require("lodash/range"));
var _isNil2 = _interopRequireDefault(require("lodash/isNil"));
var _isBoolean2 = _interopRequireDefault(require("lodash/isBoolean"));
var _isArray2 = _interopRequireDefault(require("lodash/isArray"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Surface = require("../container/Surface");
var _Layer = require("../container/Layer");
var _Tooltip = require("../component/Tooltip");
var _Legend = require("../component/Legend");
var _Curve = require("../shape/Curve");
var _Cross = require("../shape/Cross");
var _Sector = require("../shape/Sector");
var _Dot = require("../shape/Dot");
var _Rectangle = require("../shape/Rectangle");
var _ReactUtils = require("../util/ReactUtils");
var _CartesianAxis = require("../cartesian/CartesianAxis");
var _Brush = require("../cartesian/Brush");
var _DOMUtils = require("../util/DOMUtils");
var _DataUtils = require("../util/DataUtils");
var _ChartUtils = require("../util/ChartUtils");
var _DetectReferenceElementsDomain = require("../util/DetectReferenceElementsDomain");
var _PolarUtils = require("../util/PolarUtils");
var _ShallowEqual = require("../util/ShallowEqual");
var _Events = require("../util/Events");
var _types = require("../util/types");
var _excluded = ["item"],
_excluded2 = ["children", "className", "width", "height", "style", "compact", "title", "desc"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
var ORIENT_MAP = {
xAxis: ['bottom', 'top'],
yAxis: ['left', 'right']
};
var originCoordinate = {
x: 0,
y: 0
};
// use legacy isFinite only if there is a problem (aka IE)
// eslint-disable-next-line no-restricted-globals
var isFinit = Number.isFinite ? Number.isFinite : isFinite;
var defer =
// eslint-disable-next-line no-nested-ternary
typeof requestAnimationFrame === 'function' ? requestAnimationFrame : typeof setImmediate === 'function' ? setImmediate : setTimeout;
var deferClear =
// eslint-disable-next-line no-nested-ternary
typeof cancelAnimationFrame === 'function' ? cancelAnimationFrame : typeof clearImmediate === 'function' ? clearImmediate : clearTimeout;
var calculateTooltipPos = function calculateTooltipPos(rangeObj, layout) {
if (layout === 'horizontal') {
return rangeObj.x;
}
if (layout === 'vertical') {
return rangeObj.y;
}
if (layout === 'centric') {
return rangeObj.angle;
}
return rangeObj.radius;
};
var getActiveCoordinate = function getActiveCoordinate(layout, tooltipTicks, activeIndex, rangeObj) {
var entry = tooltipTicks.find(function (tick) {
return tick && tick.index === activeIndex;
});
if (entry) {
if (layout === 'horizontal') {
return {
x: entry.coordinate,
y: rangeObj.y
};
}
if (layout === 'vertical') {
return {
x: rangeObj.x,
y: entry.coordinate
};
}
if (layout === 'centric') {
var _angle = entry.coordinate;
var _radius = rangeObj.radius;
return _objectSpread(_objectSpread(_objectSpread({}, rangeObj), (0, _PolarUtils.polarToCartesian)(rangeObj.cx, rangeObj.cy, _radius, _angle)), {}, {
angle: _angle,
radius: _radius
});
}
var radius = entry.coordinate;
var angle = rangeObj.angle;
return _objectSpread(_objectSpread(_objectSpread({}, rangeObj), (0, _PolarUtils.polarToCartesian)(rangeObj.cx, rangeObj.cy, radius, angle)), {}, {
angle: angle,
radius: radius
});
}
return originCoordinate;
};
var getDisplayedData = function getDisplayedData(data, _ref, item) {
var graphicalItems = _ref.graphicalItems,
dataStartIndex = _ref.dataStartIndex,
dataEndIndex = _ref.dataEndIndex;
var itemsData = (graphicalItems || []).reduce(function (result, child) {
var itemData = child.props.data;
if (itemData && itemData.length) {
return [].concat(_toConsumableArray(result), _toConsumableArray(itemData));
}
return result;
}, []);
if (itemsData && itemsData.length > 0) {
return itemsData;
}
if (item && item.props && item.props.data && item.props.data.length > 0) {
return item.props.data;
}
if (data && data.length && (0, _DataUtils.isNumber)(dataStartIndex) && (0, _DataUtils.isNumber)(dataEndIndex)) {
return data.slice(dataStartIndex, dataEndIndex + 1);
}
return [];
};
/**
* Takes a domain and user props to determine whether he provided the domain via props or if we need to calculate it.
* @param {AxisDomain} domain The potential domain from props
* @param {Boolean} allowDataOverflow from props
* @param {String} axisType from props
* @returns {Boolean} `true` if domain is specified by user
*/
function isDomainSpecifiedByUser(domain, allowDataOverflow, axisType) {
if (axisType === 'number' && allowDataOverflow === true && Array.isArray(domain)) {
var domainStart = domain === null || domain === void 0 ? void 0 : domain[0];
var domainEnd = domain === null || domain === void 0 ? void 0 : domain[1];
/*
* The `isNumber` check is needed because the user could also provide strings like "dataMin" via the domain props.
* In such case, we have to compute the domain from the data.
*/
if (!!domainStart && !!domainEnd && (0, _DataUtils.isNumber)(domainStart) && (0, _DataUtils.isNumber)(domainEnd)) {
return true;
}
}
return false;
}
function getDefaultDomainByAxisType(axisType) {
return axisType === 'number' ? [0, 'auto'] : undefined;
}
/**
* Get the content to be displayed in the tooltip
* @param {Object} state Current state
* @param {Array} chartData The data defined in chart
* @param {Number} activeIndex Active index of data
* @param {String} activeLabel Active label of data
* @return {Array} The content of tooltip
*/
var getTooltipContent = function getTooltipContent(state, chartData, activeIndex, activeLabel) {
var graphicalItems = state.graphicalItems,
tooltipAxis = state.tooltipAxis;
var displayedData = getDisplayedData(chartData, state);
if (activeIndex < 0 || !graphicalItems || !graphicalItems.length || activeIndex >= displayedData.length) {
return null;
}
// get data by activeIndex when the axis don't allow duplicated category
return graphicalItems.reduce(function (result, child) {
var hide = child.props.hide;
if (hide) {
return result;
}
var data = child.props.data;
var payload;
if (tooltipAxis.dataKey && !tooltipAxis.allowDuplicatedCategory) {
// graphic child has data props
var entries = data === undefined ? displayedData : data;
payload = (0, _DataUtils.findEntryInArray)(entries, tooltipAxis.dataKey, activeLabel);
} else {
payload = data && data[activeIndex] || displayedData[activeIndex];
}
if (!payload) {
return result;
}
return [].concat(_toConsumableArray(result), [(0, _ChartUtils.getTooltipItem)(child, payload)]);
}, []);
};
/**
* Returns tooltip data based on a mouse position (as a parameter or in state)
* @param {Object} state current state
* @param {Array} chartData the data defined in chart
* @param {String} layout The layout type of chart
* @param {Object} rangeObj { x, y } coordinates
* @return {Object} Tooltip data data
*/
var getTooltipData = function getTooltipData(state, chartData, layout, rangeObj) {
var rangeData = rangeObj || {
x: state.chartX,
y: state.chartY
};
var pos = calculateTooltipPos(rangeData, layout);
var ticks = state.orderedTooltipTicks,
axis = state.tooltipAxis,
tooltipTicks = state.tooltipTicks;
var activeIndex = (0, _ChartUtils.calculateActiveTickIndex)(pos, ticks, tooltipTicks, axis);
if (activeIndex >= 0 && tooltipTicks) {
var activeLabel = tooltipTicks[activeIndex] && tooltipTicks[activeIndex].value;
var activePayload = getTooltipContent(state, chartData, activeIndex, activeLabel);
var activeCoordinate = getActiveCoordinate(layout, ticks, activeIndex, rangeData);
return {
activeTooltipIndex: activeIndex,
activeLabel: activeLabel,
activePayload: activePayload,
activeCoordinate: activeCoordinate
};
}
return null;
};
/**
* Get the configuration of axis by the options of axis instance
* @param {Object} props Latest props
* @param {Array} axes The instance of axes
* @param {Array} graphicalItems The instances of item
* @param {String} axisType The type of axis, xAxis - x-axis, yAxis - y-axis
* @param {String} axisIdKey The unique id of an axis
* @param {Object} stackGroups The items grouped by axisId and stackId
* @param {Number} dataStartIndex The start index of the data series when a brush is applied
* @param {Number} dataEndIndex The end index of the data series when a brush is applied
* @return {Object} Configuration
*/
var getAxisMapByAxes = function getAxisMapByAxes(props, _ref2) {
var axes = _ref2.axes,
graphicalItems = _ref2.graphicalItems,
axisType = _ref2.axisType,
axisIdKey = _ref2.axisIdKey,
stackGroups = _ref2.stackGroups,
dataStartIndex = _ref2.dataStartIndex,
dataEndIndex = _ref2.dataEndIndex;
var layout = props.layout,
children = props.children,
stackOffset = props.stackOffset;
var isCategorical = (0, _ChartUtils.isCategoricalAxis)(layout, axisType);
// Eliminate duplicated axes
var axisMap = axes.reduce(function (result, child) {
var _child$props$domain2;
var _child$props = child.props,
type = _child$props.type,
dataKey = _child$props.dataKey,
allowDataOverflow = _child$props.allowDataOverflow,
allowDuplicatedCategory = _child$props.allowDuplicatedCategory,
scale = _child$props.scale,
ticks = _child$props.ticks;
var axisId = child.props[axisIdKey];
if (result[axisId]) {
return result;
}
var displayedData = getDisplayedData(props.data, {
graphicalItems: graphicalItems.filter(function (item) {
return item.props[axisIdKey] === axisId;
}),
dataStartIndex: dataStartIndex,
dataEndIndex: dataEndIndex
});
var len = displayedData.length;
var domain, duplicateDomain, categoricalDomain;
/*
* This is a hack to short-circuit the domain creation here to enhance performance.
* Usually, the data is used to determine the domain, but when the user specifies
* a domain upfront (via props), there is no need to calculate the domain start and end,
* which is very expensive for a larger amount of data.
* The only thing that would prohibit short-circuiting is when the user doesn't allow data overflow,
* because the axis is supposed to ignore the specified domain that way.
*/
if (isDomainSpecifiedByUser(child.props.domain, allowDataOverflow, type)) {
domain = (0, _ChartUtils.parseSpecifiedDomain)(child.props.domain, null, allowDataOverflow);
/* The chart can be categorical and have the domain specified in numbers
* we still need to calculate the categorical domain
* TODO: refactor this more
*/
if (isCategorical && (type === 'number' || scale !== 'auto')) {
categoricalDomain = (0, _ChartUtils.getDomainOfDataByKey)(displayedData, dataKey, 'category');
}
}
// if the domain is defaulted we need this for `originalDomain` as well
var defaultDomain = getDefaultDomainByAxisType(type);
// we didn't create the domain from user's props above, so we need to calculate it
if (!domain || domain.length === 0) {
var _child$props$domain;
var childDomain = (_child$props$domain = child.props.domain) !== null && _child$props$domain !== void 0 ? _child$props$domain : defaultDomain;
if (dataKey) {
// has dataKey in <Axis />
domain = (0, _ChartUtils.getDomainOfDataByKey)(displayedData, dataKey, type);
if (type === 'category' && isCategorical) {
// the field type is category data and this axis is categorical axis
var duplicate = (0, _DataUtils.hasDuplicate)(domain);
if (allowDuplicatedCategory && duplicate) {
duplicateDomain = domain;
// When category axis has duplicated text, serial numbers are used to generate scale
domain = (0, _range2["default"])(0, len);
} else if (!allowDuplicatedCategory) {
// remove duplicated category
domain = (0, _ChartUtils.parseDomainOfCategoryAxis)(childDomain, domain, child).reduce(function (finalDomain, entry) {
return finalDomain.indexOf(entry) >= 0 ? finalDomain : [].concat(_toConsumableArray(finalDomain), [entry]);
}, []);
}
} else if (type === 'category') {
// the field type is category data and this axis is numerical axis
if (!allowDuplicatedCategory) {
domain = (0, _ChartUtils.parseDomainOfCategoryAxis)(childDomain, domain, child).reduce(function (finalDomain, entry) {
return finalDomain.indexOf(entry) >= 0 || entry === '' || (0, _isNil2["default"])(entry) ? finalDomain : [].concat(_toConsumableArray(finalDomain), [entry]);
}, []);
} else {
// eliminate undefined or null or empty string
domain = domain.filter(function (entry) {
return entry !== '' && !(0, _isNil2["default"])(entry);
});
}
} else if (type === 'number') {
// the field type is numerical
var errorBarsDomain = (0, _ChartUtils.parseErrorBarsOfAxis)(displayedData, graphicalItems.filter(function (item) {
return item.props[axisIdKey] === axisId && !item.props.hide;
}), dataKey, axisType, layout);
if (errorBarsDomain) {
domain = errorBarsDomain;
}
}
if (isCategorical && (type === 'number' || scale !== 'auto')) {
categoricalDomain = (0, _ChartUtils.getDomainOfDataByKey)(displayedData, dataKey, 'category');
}
} else if (isCategorical) {
// the axis is a categorical axis
domain = (0, _range2["default"])(0, len);
} else if (stackGroups && stackGroups[axisId] && stackGroups[axisId].hasStack && type === 'number') {
// when stackOffset is 'expand', the domain may be calculated as [0, 1.000000000002]
domain = stackOffset === 'expand' ? [0, 1] : (0, _ChartUtils.getDomainOfStackGroups)(stackGroups[axisId].stackGroups, dataStartIndex, dataEndIndex);
} else {
domain = (0, _ChartUtils.getDomainOfItemsWithSameAxis)(displayedData, graphicalItems.filter(function (item) {
return item.props[axisIdKey] === axisId && !item.props.hide;
}), type, layout, true);
}
if (type === 'number') {
// To detect wether there is any reference lines whose props alwaysShow is true
domain = (0, _DetectReferenceElementsDomain.detectReferenceElementsDomain)(children, domain, axisId, axisType, ticks);
if (childDomain) {
domain = (0, _ChartUtils.parseSpecifiedDomain)(childDomain, domain, allowDataOverflow);
}
} else if (type === 'category' && childDomain) {
var axisDomain = childDomain;
var isDomainValid = domain.every(function (entry) {
return axisDomain.indexOf(entry) >= 0;
});
if (isDomainValid) {
domain = axisDomain;
}
}
}
return _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, axisId, _objectSpread(_objectSpread({}, child.props), {}, {
axisType: axisType,
domain: domain,
categoricalDomain: categoricalDomain,
duplicateDomain: duplicateDomain,
originalDomain: (_child$props$domain2 = child.props.domain) !== null && _child$props$domain2 !== void 0 ? _child$props$domain2 : defaultDomain,
isCategorical: isCategorical,
layout: layout
})));
}, {});
return axisMap;
};
/**
* Get the configuration of axis by the options of item,
* this kind of axis does not display in chart
* @param {Object} props Latest props
* @param {Array} graphicalItems The instances of item
* @param {ReactElement} Axis Axis Component
* @param {String} axisType The type of axis, xAxis - x-axis, yAxis - y-axis
* @param {String} axisIdKey The unique id of an axis
* @param {Object} stackGroups The items grouped by axisId and stackId
* @param {Number} dataStartIndex The start index of the data series when a brush is applied
* @param {Number} dataEndIndex The end index of the data series when a brush is applied
* @return {Object} Configuration
*/
exports.getAxisMapByAxes = getAxisMapByAxes;
var getAxisMapByItems = function getAxisMapByItems(props, _ref3) {
var graphicalItems = _ref3.graphicalItems,
Axis = _ref3.Axis,
axisType = _ref3.axisType,
axisIdKey = _ref3.axisIdKey,
stackGroups = _ref3.stackGroups,
dataStartIndex = _ref3.dataStartIndex,
dataEndIndex = _ref3.dataEndIndex;
var layout = props.layout,
children = props.children;
var displayedData = getDisplayedData(props.data, {
graphicalItems: graphicalItems,
dataStartIndex: dataStartIndex,
dataEndIndex: dataEndIndex
});
var len = displayedData.length;
var isCategorical = (0, _ChartUtils.isCategoricalAxis)(layout, axisType);
var index = -1;
// The default type of x-axis is category axis,
// The default contents of x-axis is the serial numbers of data
// The default type of y-axis is number axis
// The default contents of y-axis is the domain of data
var axisMap = graphicalItems.reduce(function (result, child) {
var axisId = child.props[axisIdKey];
var originalDomain = getDefaultDomainByAxisType('number');
if (!result[axisId]) {
index++;
var domain;
if (isCategorical) {
domain = (0, _range2["default"])(0, len);
} else if (stackGroups && stackGroups[axisId] && stackGroups[axisId].hasStack) {
domain = (0, _ChartUtils.getDomainOfStackGroups)(stackGroups[axisId].stackGroups, dataStartIndex, dataEndIndex);
domain = (0, _DetectReferenceElementsDomain.detectReferenceElementsDomain)(children, domain, axisId, axisType);
} else {
domain = (0, _ChartUtils.parseSpecifiedDomain)(originalDomain, (0, _ChartUtils.getDomainOfItemsWithSameAxis)(displayedData, graphicalItems.filter(function (item) {
return item.props[axisIdKey] === axisId && !item.props.hide;
}), 'number', layout), Axis.defaultProps.allowDataOverflow);
domain = (0, _DetectReferenceElementsDomain.detectReferenceElementsDomain)(children, domain, axisId, axisType);
}
return _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, axisId, _objectSpread(_objectSpread({
axisType: axisType
}, Axis.defaultProps), {}, {
hide: true,
orientation: (0, _get2["default"])(ORIENT_MAP, "".concat(axisType, ".").concat(index % 2), null),
domain: domain,
originalDomain: originalDomain,
isCategorical: isCategorical,
layout: layout
// specify scale when no Axis
// scale: isCategorical ? 'band' : 'linear',
})));
}
return result;
}, {});
return axisMap;
};
/**
* Get the configuration of all x-axis or y-axis
* @param {Object} props Latest props
* @param {String} axisType The type of axis
* @param {Array} graphicalItems The instances of item
* @param {Object} stackGroups The items grouped by axisId and stackId
* @param {Number} dataStartIndex The start index of the data series when a brush is applied
* @param {Number} dataEndIndex The end index of the data series when a brush is applied
* @return {Object} Configuration
*/
var getAxisMap = function getAxisMap(props, _ref4) {
var _ref4$axisType = _ref4.axisType,
axisType = _ref4$axisType === void 0 ? 'xAxis' : _ref4$axisType,
AxisComp = _ref4.AxisComp,
graphicalItems = _ref4.graphicalItems,
stackGroups = _ref4.stackGroups,
dataStartIndex = _ref4.dataStartIndex,
dataEndIndex = _ref4.dataEndIndex;
var children = props.children;
var axisIdKey = "".concat(axisType, "Id");
// Get all the instance of Axis
var axes = (0, _ReactUtils.findAllByType)(children, AxisComp);
var axisMap = {};
if (axes && axes.length) {
axisMap = getAxisMapByAxes(props, {
axes: axes,
graphicalItems: graphicalItems,
axisType: axisType,
axisIdKey: axisIdKey,
stackGroups: stackGroups,
dataStartIndex: dataStartIndex,
dataEndIndex: dataEndIndex
});
} else if (graphicalItems && graphicalItems.length) {
axisMap = getAxisMapByItems(props, {
Axis: AxisComp,
graphicalItems: graphicalItems,
axisType: axisType,
axisIdKey: axisIdKey,
stackGroups: stackGroups,
dataStartIndex: dataStartIndex,
dataEndIndex: dataEndIndex
});
}
return axisMap;
};
var tooltipTicksGenerator = function tooltipTicksGenerator(axisMap) {
var axis = (0, _DataUtils.getAnyElementOfObject)(axisMap);
var tooltipTicks = (0, _ChartUtils.getTicksOfAxis)(axis, false, true);
return {
tooltipTicks: tooltipTicks,
orderedTooltipTicks: (0, _sortBy2["default"])(tooltipTicks, function (o) {
return o.coordinate;
}),
tooltipAxis: axis,
tooltipAxisBandSize: (0, _ChartUtils.getBandSizeOfAxis)(axis, tooltipTicks)
};
};
/**
* Returns default, reset state for the categorical chart.
* @param {Object} props Props object to use when creating the default state
* @return {Object} Whole new state
*/
var createDefaultState = function createDefaultState(props) {
var _brushItem$props, _brushItem$props2;
var children = props.children,
defaultShowTooltip = props.defaultShowTooltip;
var brushItem = (0, _ReactUtils.findChildByType)(children, _Brush.Brush);
var startIndex = brushItem && brushItem.props && brushItem.props.startIndex || 0;
var endIndex = (brushItem === null || brushItem === void 0 ? void 0 : (_brushItem$props = brushItem.props) === null || _brushItem$props === void 0 ? void 0 : _brushItem$props.endIndex) !== undefined ? brushItem === null || brushItem === void 0 ? void 0 : (_brushItem$props2 = brushItem.props) === null || _brushItem$props2 === void 0 ? void 0 : _brushItem$props2.endIndex : props.data && props.data.length - 1 || 0;
return {
chartX: 0,
chartY: 0,
dataStartIndex: startIndex,
dataEndIndex: endIndex,
activeTooltipIndex: -1,
isTooltipActive: !(0, _isNil2["default"])(defaultShowTooltip) ? defaultShowTooltip : false
};
};
var hasGraphicalBarItem = function hasGraphicalBarItem(graphicalItems) {
if (!graphicalItems || !graphicalItems.length) {
return false;
}
return graphicalItems.some(function (item) {
var name = (0, _ReactUtils.getDisplayName)(item && item.type);
return name && name.indexOf('Bar') >= 0;
});
};
var getAxisNameByLayout = function getAxisNameByLayout(layout) {
if (layout === 'horizontal') {
return {
numericAxisName: 'yAxis',
cateAxisName: 'xAxis'
};
}
if (layout === 'vertical') {
return {
numericAxisName: 'xAxis',
cateAxisName: 'yAxis'
};
}
if (layout === 'centric') {
return {
numericAxisName: 'radiusAxis',
cateAxisName: 'angleAxis'
};
}
return {
numericAxisName: 'angleAxis',
cateAxisName: 'radiusAxis'
};
};
/**
* Calculate the offset of main part in the svg element
* @param {Object} props Latest props
* graphicalItems The instances of item
* xAxisMap The configuration of x-axis
* yAxisMap The configuration of y-axis
* @param {Object} prevLegendBBox the boundary box of legend
* @return {Object} The offset of main part in the svg element
*/
var calculateOffset = function calculateOffset(_ref5, prevLegendBBox) {
var props = _ref5.props,
graphicalItems = _ref5.graphicalItems,
_ref5$xAxisMap = _ref5.xAxisMap,
xAxisMap = _ref5$xAxisMap === void 0 ? {} : _ref5$xAxisMap,
_ref5$yAxisMap = _ref5.yAxisMap,
yAxisMap = _ref5$yAxisMap === void 0 ? {} : _ref5$yAxisMap;
var width = props.width,
height = props.height,
children = props.children;
var margin = props.margin || {};
var brushItem = (0, _ReactUtils.findChildByType)(children, _Brush.Brush);
var legendItem = (0, _ReactUtils.findChildByType)(children, _Legend.Legend);
var offsetH = Object.keys(yAxisMap).reduce(function (result, id) {
var entry = yAxisMap[id];
var orientation = entry.orientation;
if (!entry.mirror && !entry.hide) {
return _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, orientation, result[orientation] + entry.width));
}
return result;
}, {
left: margin.left || 0,
right: margin.right || 0
});
var offsetV = Object.keys(xAxisMap).reduce(function (result, id) {
var entry = xAxisMap[id];
var orientation = entry.orientation;
if (!entry.mirror && !entry.hide) {
return _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, orientation, (0, _get2["default"])(result, "".concat(orientation)) + entry.height));
}
return result;
}, {
top: margin.top || 0,
bottom: margin.bottom || 0
});
var offset = _objectSpread(_objectSpread({}, offsetV), offsetH);
var brushBottom = offset.bottom;
if (brushItem) {
offset.bottom += brushItem.props.height || _Brush.Brush.defaultProps.height;
}
if (legendItem && prevLegendBBox) {
offset = (0, _ChartUtils.appendOffsetOfLegend)(offset, graphicalItems, props, prevLegendBBox);
}
return _objectSpread(_objectSpread({
brushBottom: brushBottom
}, offset), {}, {
width: width - offset.left - offset.right,
height: height - offset.top - offset.bottom
});
};
var generateCategoricalChart = function generateCategoricalChart(_ref6) {
var _class;
var chartName = _ref6.chartName,
GraphicalChild = _ref6.GraphicalChild,
_ref6$defaultTooltipE = _ref6.defaultTooltipEventType,
defaultTooltipEventType = _ref6$defaultTooltipE === void 0 ? 'axis' : _ref6$defaultTooltipE,
_ref6$validateTooltip = _ref6.validateTooltipEventTypes,
validateTooltipEventTypes = _ref6$validateTooltip === void 0 ? ['axis'] : _ref6$validateTooltip,
axisComponents = _ref6.axisComponents,
legendContent = _ref6.legendContent,
formatAxisMap = _ref6.formatAxisMap,
defaultProps = _ref6.defaultProps;
var getFormatItems = function getFormatItems(props, currentState) {
var graphicalItems = currentState.graphicalItems,
stackGroups = currentState.stackGroups,
offset = currentState.offset,
updateId = currentState.updateId,
dataStartIndex = currentState.dataStartIndex,
dataEndIndex = currentState.dataEndIndex;
var barSize = props.barSize,
layout = props.layout,
barGap = props.barGap,
barCategoryGap = props.barCategoryGap,
globalMaxBarSize = props.maxBarSize;
var _getAxisNameByLayout = getAxisNameByLayout(layout),
numericAxisName = _getAxisNameByLayout.numericAxisName,
cateAxisName = _getAxisNameByLayout.cateAxisName;
var hasBar = hasGraphicalBarItem(graphicalItems);
var sizeList = hasBar && (0, _ChartUtils.getBarSizeList)({
barSize: barSize,
stackGroups: stackGroups
});
var formattedItems = [];
graphicalItems.forEach(function (item, index) {
var displayedData = getDisplayedData(props.data, {
dataStartIndex: dataStartIndex,
dataEndIndex: dataEndIndex
}, item);
var _item$props = item.props,
dataKey = _item$props.dataKey,
childMaxBarSize = _item$props.maxBarSize;
var numericAxisId = item.props["".concat(numericAxisName, "Id")];
var cateAxisId = item.props["".concat(cateAxisName, "Id")];
var axisObj = axisComponents.reduce(function (result, entry) {
var _objectSpread6;
var axisMap = currentState["".concat(entry.axisType, "Map")];
var id = item.props["".concat(entry.axisType, "Id")];
var axis = axisMap && axisMap[id];
return _objectSpread(_objectSpread({}, result), {}, (_objectSpread6 = {}, _defineProperty(_objectSpread6, entry.axisType, axis), _defineProperty(_objectSpread6, "".concat(entry.axisType, "Ticks"), (0, _ChartUtils.getTicksOfAxis)(axis)), _objectSpread6));
}, {});
var cateAxis = axisObj[cateAxisName];
var cateTicks = axisObj["".concat(cateAxisName, "Ticks")];
var stackedData = stackGroups && stackGroups[numericAxisId] && stackGroups[numericAxisId].hasStack && (0, _ChartUtils.getStackedDataOfItem)(item, stackGroups[numericAxisId].stackGroups);
var itemIsBar = (0, _ReactUtils.getDisplayName)(item.type).indexOf('Bar') >= 0;
var bandSize = (0, _ChartUtils.getBandSizeOfAxis)(cateAxis, cateTicks);
var barPosition = [];
if (itemIsBar) {
var _ref7, _getBandSizeOfAxis;
// 如果是bar，计算bar的位置
var maxBarSize = (0, _isNil2["default"])(childMaxBarSize) ? globalMaxBarSize : childMaxBarSize;
var barBandSize = (_ref7 = (_getBandSizeOfAxis = (0, _ChartUtils.getBandSizeOfAxis)(cateAxis, cateTicks, true)) !== null && _getBandSizeOfAxis !== void 0 ? _getBandSizeOfAxis : maxBarSize) !== null && _ref7 !== void 0 ? _ref7 : 0;
barPosition = (0, _ChartUtils.getBarPosition)({
barGap: barGap,
barCategoryGap: barCategoryGap,
bandSize: barBandSize !== bandSize ? barBandSize : bandSize,
sizeList: sizeList[cateAxisId],
maxBarSize: maxBarSize
});
if (barBandSize !== bandSize) {
barPosition = barPosition.map(function (pos) {
return _objectSpread(_objectSpread({}, pos), {}, {
position: _objectSpread(_objectSpread({}, pos.position), {}, {
offset: pos.position.offset - barBandSize / 2
})
});
});
}
}
var composedFn = item && item.type && item.type.getComposedData;
if (composedFn) {
var _objectSpread7;
formattedItems.push({
props: _objectSpread(_objectSpread({}, composedFn(_objectSpread(_objectSpread({}, axisObj), {}, {
displayedData: displayedData,
props: props,
dataKey: dataKey,
item: item,
bandSize: bandSize,
barPosition: barPosition,
offset: offset,
stackedData: stackedData,
layout: layout,
dataStartIndex: dataStartIndex,
dataEndIndex: dataEndIndex
}))), {}, (_objectSpread7 = {
key: item.key || "item-".concat(index)
}, _defineProperty(_objectSpread7, numericAxisName, axisObj[numericAxisName]), _defineProperty(_objectSpread7, cateAxisName, axisObj[cateAxisName]), _defineProperty(_objectSpread7, "animationId", updateId), _objectSpread7)),
childIndex: (0, _ReactUtils.parseChildIndex)(item, props.children),
item: item
});
}
});
return formattedItems;
};
/**
* The AxisMaps are expensive to render on large data sets
* so provide the ability to store them in state and only update them when necessary
* they are dependent upon the start and end index of
* the brush so it's important that this method is called _after_
* the state is updated with any new start/end indices
*
* @param {Object} props The props object to be used for updating the axismaps
* dataStartIndex: The start index of the data series when a brush is applied
* dataEndIndex: The end index of the data series when a brush is applied
* updateId: The update id
* @param {Object} prevState Prev state
* @return {Object} state New state to set
*/
var updateStateOfAxisMapsOffsetAndStackGroups = function updateStateOfAxisMapsOffsetAndStackGroups(_ref8, prevState) {
var props = _ref8.props,
dataStartIndex = _ref8.dataStartIndex,
dataEndIndex = _ref8.dataEndIndex,
updateId = _ref8.updateId;
if (!(0, _ReactUtils.validateWidthHeight)({
props: props
})) {
return null;
}
var children = props.children,
layout = props.layout,
stackOffset = props.stackOffset,
data = props.data,
reverseStackOrder = props.reverseStackOrder;
var _getAxisNameByLayout2 = getAxisNameByLayout(layout),
numericAxisName = _getAxisNameByLayout2.numericAxisName,
cateAxisName = _getAxisNameByLayout2.cateAxisName;
var graphicalItems = (0, _ReactUtils.findAllByType)(children, GraphicalChild);
var stackGroups = (0, _ChartUtils.getStackGroupsByAxisId)(data, graphicalItems, "".concat(numericAxisName, "Id"), "".concat(cateAxisName, "Id"), stackOffset, reverseStackOrder);
var axisObj = axisComponents.reduce(function (result, entry) {
var name = "".concat(entry.axisType, "Map");
return _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, name, getAxisMap(props, _objectSpread(_objectSpread({}, entry), {}, {
graphicalItems: graphicalItems,
stackGroups: entry.axisType === numericAxisName && stackGroups,
dataStartIndex: dataStartIndex,
dataEndIndex: dataEndIndex
}))));
}, {});
var offset = calculateOffset(_objectSpread(_objectSpread({}, axisObj), {}, {
props: props,
graphicalItems: graphicalItems
}), prevState === null || prevState === void 0 ? void 0 : prevState.legendBBox);
Object.keys(axisObj).forEach(function (key) {
axisObj[key] = formatAxisMap(props, axisObj[key], offset, key.replace('Map', ''), chartName);
});
var cateAxisMap = axisObj["".concat(cateAxisName, "Map")];
var ticksObj = tooltipTicksGenerator(cateAxisMap);
var formattedGraphicalItems = getFormatItems(props, _objectSpread(_objectSpread({}, axisObj), {}, {
dataStartIndex: dataStartIndex,
dataEndIndex: dataEndIndex,
updateId: updateId,
graphicalItems: graphicalItems,
stackGroups: stackGroups,
offset: offset
}));
return _objectSpread(_objectSpread({
formattedGraphicalItems: formattedGraphicalItems,
graphicalItems: graphicalItems,
offset: offset,
stackGroups: stackGroups
}, ticksObj), axisObj);
};
return _class = /*#__PURE__*/function (_Component) {
_inherits(CategoricalChartWrapper, _Component);
var _super = _createSuper(CategoricalChartWrapper);
// todo join specific chart propTypes
function CategoricalChartWrapper(_props) {
var _this;
_classCallCheck(this, CategoricalChartWrapper);
_this = _super.call(this, _props);
_defineProperty(_assertThisInitialized(_this), "clearDeferId", function () {
if (!(0, _isNil2["default"])(_this.deferId) && deferClear) {
deferClear(_this.deferId);
}
_this.deferId = null;
});
_defineProperty(_assertThisInitialized(_this), "handleLegendBBoxUpdate", function (box) {
if (box) {
var _this$state = _this.state,
dataStartIndex = _this$state.dataStartIndex,
dataEndIndex = _this$state.dataEndIndex,
updateId = _this$state.updateId;
_this.setState(_objectSpread({
legendBBox: box
}, updateStateOfAxisMapsOffsetAndStackGroups({
props: _this.props,
dataStartIndex: dataStartIndex,
dataEndIndex: dataEndIndex,
updateId: updateId
}, _objectSpread(_objectSpread({}, _this.state), {}, {
legendBBox: box
}))));
}
});
_defineProperty(_assertThisInitialized(_this), "handleReceiveSyncEvent", function (cId, chartId, data) {
var syncId = _this.props.syncId;
if (syncId === cId && chartId !== _this.uniqueChartId) {
_this.clearDeferId();
_this.deferId = defer && defer(_this.applySyncEvent.bind(_assertThisInitialized(_this), data));
}
});
_defineProperty(_assertThisInitialized(_this), "handleBrushChange", function (_ref9) {
var startIndex = _ref9.startIndex,
endIndex = _ref9.endIndex;
// Only trigger changes if the extents of the brush have actually changed
if (startIndex !== _this.state.dataStartIndex || endIndex !== _this.state.dataEndIndex) {
var updateId = _this.state.updateId;
_this.setState(function () {
return _objectSpread({
dataStartIndex: startIndex,
dataEndIndex: endIndex
}, updateStateOfAxisMapsOffsetAndStackGroups({
props: _this.props,
dataStartIndex: startIndex,
dataEndIndex: endIndex,
updateId: updateId
}, _this.state));
});
_this.triggerSyncEvent({
dataStartIndex: startIndex,
dataEndIndex: endIndex
});
}
});
_defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function (e) {
var onMouseEnter = _this.props.onMouseEnter;
var mouse = _this.getMouseInfo(e);
if (mouse) {
var _nextState = _objectSpread(_objectSpread({}, mouse), {}, {
isTooltipActive: true
});
_this.setState(_nextState);
_this.triggerSyncEvent(_nextState);
if ((0, _isFunction2["default"])(onMouseEnter)) {
onMouseEnter(_nextState, e);
}
}
});
_defineProperty(_assertThisInitialized(_this), "triggeredAfterMouseMove", function (e) {
var onMouseMove = _this.props.onMouseMove;
var mouse = _this.getMouseInfo(e);
var nextState = mouse ? _objectSpread(_objectSpread({}, mouse), {}, {
isTooltipActive: true
}) : {
isTooltipActive: false
};
_this.setState(nextState);
_this.triggerSyncEvent(nextState);
if ((0, _isFunction2["default"])(onMouseMove)) {
onMouseMove(nextState, e);
}
});
_defineProperty(_assertThisInitialized(_this), "handleItemMouseEnter", function (el) {
_this.setState(function () {
return {
isTooltipActive: true,
activeItem: el,
activePayload: el.tooltipPayload,
activeCoordinate: el.tooltipPosition || {
x: el.cx,
y: el.cy
}
};
});
});
_defineProperty(_assertThisInitialized(_this), "handleItemMouseLeave", function () {
_this.setState(function () {
return {
isTooltipActive: false
};
});
});
_defineProperty(_assertThisInitialized(_this), "handleMouseMove", function (e) {
if (e && (0, _isFunction2["default"])(e.persist)) {
e.persist();
}
_this.triggeredAfterMouseMove(e);
});
_defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function (e) {
var onMouseLeave = _this.props.onMouseLeave;
var nextState = {
isTooltipActive: false
};
_this.setState(nextState);
_this.triggerSyncEvent(nextState);
if ((0, _isFunction2["default"])(onMouseLeave)) {
onMouseLeave(nextState, e);
}
_this.cancelThrottledTriggerAfterMouseMove();
});
_defineProperty(_assertThisInitialized(_this), "handleOuterEvent", function (e) {
var eventName = (0, _ReactUtils.getReactEventByType)(e);
var event = (0, _get2["default"])(_this.props, "".concat(eventName));
if (eventName && (0, _isFunction2["default"])(event)) {
var mouse;
if (/.*touch.*/i.test(eventName)) {
mouse = _this.getMouseInfo(e.changedTouches[0]);
} else {
mouse = _this.getMouseInfo(e);
}
var handler = event;
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
handler(mouse, e);
}
});
_de