Index: node_modules/recharts/es6/animation/AnimationManager.js =================================================================== --- node_modules/recharts/es6/animation/AnimationManager.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/animation/AnimationManager.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,66 @@ +/** + * Represents a single item in the ReactSmoothQueue. + * The item can be: + * - A number representing a delay in milliseconds. + * - An object representing a style change + * - A StartAnimationFunction that starts eased transition and calls different render + * because of course in Recharts we have to have three ways to do everything + * - An arbitrary function to be executed + */ + +export function createAnimateManager(timeoutController) { + var currStyle; + var handleChange = () => null; + var shouldStop = false; + var cancelTimeout = null; + var setStyle = _style => { + if (shouldStop) { + return; + } + if (Array.isArray(_style)) { + if (!_style.length) { + return; + } + var styles = _style; + var [curr, ...restStyles] = styles; + if (typeof curr === 'number') { + cancelTimeout = timeoutController.setTimeout(setStyle.bind(null, restStyles), curr); + return; + } + setStyle(curr); + cancelTimeout = timeoutController.setTimeout(setStyle.bind(null, restStyles)); + return; + } + if (typeof _style === 'string') { + currStyle = _style; + handleChange(currStyle); + } + if (typeof _style === 'object') { + currStyle = _style; + handleChange(currStyle); + } + if (typeof _style === 'function') { + _style(); + } + }; + return { + stop: () => { + shouldStop = true; + }, + start: style => { + shouldStop = false; + if (cancelTimeout) { + cancelTimeout(); + cancelTimeout = null; + } + setStyle(style); + }, + subscribe: _handleChange => { + handleChange = _handleChange; + return () => { + handleChange = () => null; + }; + }, + getTimeoutController: () => timeoutController + }; +} Index: node_modules/recharts/es6/animation/CSSTransitionAnimate.js =================================================================== --- node_modules/recharts/es6/animation/CSSTransitionAnimate.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/animation/CSSTransitionAnimate.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,85 @@ +import { useCallback, useEffect, useRef, useState } from 'react'; +import { noop } from '../util/DataUtils'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +import { useAnimationManager } from './useAnimationManager'; +import { getTransitionVal } from './util'; +import { Global } from '../util/Global'; +var defaultProps = { + begin: 0, + duration: 1000, + easing: 'ease', + isActive: true, + canBegin: true, + onAnimationEnd: () => {}, + onAnimationStart: () => {} +}; +export function CSSTransitionAnimate(outsideProps) { + var props = resolveDefaultProps(outsideProps, defaultProps); + var { + animationId, + from, + to, + attributeName, + isActive: isActiveProp, + canBegin, + duration, + easing, + begin, + onAnimationEnd, + onAnimationStart: onAnimationStartFromProps, + children + } = props; + var isActive = isActiveProp === 'auto' ? !Global.isSsr : isActiveProp; + var animationManager = useAnimationManager(animationId + attributeName, props.animationManager); + var [style, setStyle] = useState(() => { + if (!isActive) { + return to; + } + return from; + }); + var initialized = useRef(false); + var onAnimationStart = useCallback(() => { + setStyle(from); + onAnimationStartFromProps(); + }, [from, onAnimationStartFromProps]); + useEffect(() => { + if (!isActive || !canBegin) { + return noop; + } + initialized.current = true; + var unsubscribe = animationManager.subscribe(setStyle); + animationManager.start([onAnimationStart, begin, to, duration, onAnimationEnd]); + return () => { + animationManager.stop(); + if (unsubscribe) { + unsubscribe(); + } + onAnimationEnd(); + }; + }, [isActive, canBegin, duration, easing, begin, onAnimationStart, onAnimationEnd, animationManager, to, from]); + if (!isActive) { + /* + * With isActive=false, the component always renders with the final style, immediately, + * and ignores all other props. + * Also there is no transition applied. + */ + return children({ + [attributeName]: to + }); + } + if (!canBegin) { + return children({ + [attributeName]: from + }); + } + if (initialized.current) { + var transition = getTransitionVal([attributeName], duration, easing); + return children({ + transition, + [attributeName]: style + }); + } + return children({ + [attributeName]: from + }); +} Index: node_modules/recharts/es6/animation/JavascriptAnimate.js =================================================================== --- node_modules/recharts/es6/animation/JavascriptAnimate.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/animation/JavascriptAnimate.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,62 @@ +import { useEffect, useRef, useState } from 'react'; +import { noop } from '../util/DataUtils'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +import configUpdate from './configUpdate'; +import { configEasing } from './easing'; +import { useAnimationManager } from './useAnimationManager'; +import { Global } from '../util/Global'; +var defaultJavascriptAnimateProps = { + begin: 0, + duration: 1000, + easing: 'ease', + isActive: true, + canBegin: true, + onAnimationEnd: () => {}, + onAnimationStart: () => {} +}; +var from = { + t: 0 +}; +var to = { + t: 1 +}; +export function JavascriptAnimate(outsideProps) { + var props = resolveDefaultProps(outsideProps, defaultJavascriptAnimateProps); + var { + isActive: isActiveProp, + canBegin, + duration, + easing, + begin, + onAnimationEnd, + onAnimationStart, + children + } = props; + var isActive = isActiveProp === 'auto' ? !Global.isSsr : isActiveProp; + var animationManager = useAnimationManager(props.animationId, props.animationManager); + var [style, setStyle] = useState(isActive ? from : to); + var stopJSAnimation = useRef(null); + useEffect(() => { + if (!isActive) { + setStyle(to); + } + }, [isActive]); + useEffect(() => { + if (!isActive || !canBegin) { + return noop; + } + var startAnimation = configUpdate(from, to, configEasing(easing), duration, setStyle, animationManager.getTimeoutController()); + var onAnimationActive = () => { + stopJSAnimation.current = startAnimation(); + }; + animationManager.start([onAnimationStart, begin, onAnimationActive, duration, onAnimationEnd]); + return () => { + animationManager.stop(); + if (stopJSAnimation.current) { + stopJSAnimation.current(); + } + onAnimationEnd(); + }; + }, [isActive, canBegin, duration, easing, begin, onAnimationStart, onAnimationEnd, animationManager]); + return children(style.t); +} Index: node_modules/recharts/es6/animation/configUpdate.js =================================================================== --- node_modules/recharts/es6/animation/configUpdate.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/animation/configUpdate.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,135 @@ +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +import { getIntersectionKeys, mapObject } from './util'; +export var alpha = (begin, end, k) => begin + (end - begin) * k; +var needContinue = _ref => { + var { + from, + to + } = _ref; + return from !== to; +}; +/* + * @description: cal new from value and velocity in each stepper + * @return: { [styleProperty]: { from, to, velocity } } + */ +var calStepperVals = (easing, preVals, steps) => { + var nextStepVals = mapObject((key, val) => { + if (needContinue(val)) { + var [newX, newV] = easing(val.from, val.to, val.velocity); + return _objectSpread(_objectSpread({}, val), {}, { + from: newX, + velocity: newV + }); + } + return val; + }, preVals); + if (steps < 1) { + return mapObject((key, val) => { + if (needContinue(val) && nextStepVals[key] != null) { + return _objectSpread(_objectSpread({}, 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); +}; +function createStepperUpdate(from, to, easing, interKeys, render, timeoutController) { + var preTime; + var stepperStyle = interKeys.reduce((res, key) => _objectSpread(_objectSpread({}, res), {}, { + [key]: { + from: from[key], + velocity: 0, + to: to[key] + } + }), {}); + var getCurrStyle = () => mapObject((key, val) => val.from, stepperStyle); + var shouldStopAnimation = () => !Object.values(stepperStyle).filter(needContinue).length; + var stopAnimation = null; + var 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(_objectSpread(_objectSpread(_objectSpread({}, from), to), getCurrStyle())); + preTime = now; + if (!shouldStopAnimation()) { + stopAnimation = timeoutController.setTimeout(stepperUpdate); + } + }; + + // return start animation method + return () => { + stopAnimation = timeoutController.setTimeout(stepperUpdate); + + // return stop animation method + return () => { + var _stopAnimation; + (_stopAnimation = stopAnimation) === null || _stopAnimation === void 0 || _stopAnimation(); + }; + }; +} +function createTimingUpdate(from, to, easing, duration, interKeys, render, timeoutController) { + var stopAnimation = null; + var timingStyle = interKeys.reduce((res, key) => { + var fromElement = from[key]; + var toElement = to[key]; + if (fromElement == null || toElement == null) { + return res; + } + return _objectSpread(_objectSpread({}, res), {}, { + [key]: [fromElement, toElement] + }); + }, {}); + var beginTime; + var timingUpdate = now => { + if (!beginTime) { + beginTime = now; + } + var t = (now - beginTime) / duration; + var currStyle = mapObject((key, val) => alpha(...val, easing(t)), timingStyle); + + // get union set and add compatible prefix + render(_objectSpread(_objectSpread(_objectSpread({}, from), to), currStyle)); + if (t < 1) { + stopAnimation = timeoutController.setTimeout(timingUpdate); + } else { + var finalStyle = mapObject((key, val) => alpha(...val, easing(1)), timingStyle); + render(_objectSpread(_objectSpread(_objectSpread({}, from), to), finalStyle)); + } + }; + + // return start animation method + return () => { + stopAnimation = timeoutController.setTimeout(timingUpdate); + + // return stop animation method + return () => { + var _stopAnimation2; + (_stopAnimation2 = stopAnimation) === null || _stopAnimation2 === void 0 || _stopAnimation2(); + }; + }; +} + +// configure update function +// eslint-disable-next-line import/no-default-export +export default (from, to, easing, duration, render, timeoutController) => { + var interKeys = getIntersectionKeys(from, to); + if (easing == null) { + // no animation, just set to final state + return () => { + render(_objectSpread(_objectSpread({}, from), to)); + return () => {}; + }; + } + return easing.isStepper === true ? createStepperUpdate(from, to, easing, interKeys, render, timeoutController) : createTimingUpdate(from, to, easing, duration, interKeys, render, timeoutController); +}; Index: node_modules/recharts/es6/animation/createDefaultAnimationManager.js =================================================================== --- node_modules/recharts/es6/animation/createDefaultAnimationManager.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/animation/createDefaultAnimationManager.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,5 @@ +import { createAnimateManager } from './AnimationManager'; +import { RequestAnimationFrameTimeoutController } from './timeoutController'; +export function createDefaultAnimationManager() { + return createAnimateManager(new RequestAnimationFrameTimeoutController()); +} Index: node_modules/recharts/es6/animation/easing.js =================================================================== --- node_modules/recharts/es6/animation/easing.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/animation/easing.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,135 @@ +export var ACCURACY = 1e-4; +var cubicBezierFactor = (c1, c2) => [0, 3 * c1, 3 * c2 - 6 * c1, 3 * c1 - 3 * c2 + 1]; +var evaluatePolynomial = (params, t) => params.map((param, i) => param * t ** i).reduce((pre, curr) => pre + curr); +var cubicBezier = (c1, c2) => t => { + var params = cubicBezierFactor(c1, c2); + return evaluatePolynomial(params, t); +}; +var derivativeCubicBezier = (c1, c2) => t => { + var params = cubicBezierFactor(c1, c2); + var newParams = [...params.map((param, i) => param * i).slice(1), 0]; + return evaluatePolynomial(newParams, t); +}; +var parseCubicBezier = easing => { + var _easingParts$; + var easingParts = easing.split('('); + if (easingParts.length !== 2 || easingParts[0] !== 'cubic-bezier') { + return null; + } + var numbers = (_easingParts$ = easingParts[1]) === null || _easingParts$ === void 0 || (_easingParts$ = _easingParts$.split(')')[0]) === null || _easingParts$ === void 0 ? void 0 : _easingParts$.split(','); + if (numbers == null || numbers.length !== 4) { + return null; + } + var coords = numbers.map(x => parseFloat(x)); + return [coords[0], coords[1], coords[2], coords[3]]; +}; +var getBezierCoordinates = function getBezierCoordinates() { + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + if (args.length === 1) { + switch (args[0]) { + case 'linear': + return [0.0, 0.0, 1.0, 1.0]; + case 'ease': + return [0.25, 0.1, 0.25, 1.0]; + case 'ease-in': + return [0.42, 0.0, 1.0, 1.0]; + case 'ease-out': + return [0.42, 0.0, 0.58, 1.0]; + case 'ease-in-out': + return [0.0, 0.0, 0.58, 1.0]; + default: + { + var easing = parseCubicBezier(args[0]); + if (easing) { + return easing; + } + } + } + } + if (args.length === 4) { + return args; + } + + // Fallback for invalid inputs. The previous implementation was buggy and would lead to NaN. + // Returning linear easing is a safe default. + return [0.0, 0.0, 1.0, 1.0]; +}; +var createBezierEasing = (x1, y1, x2, y2) => { + var curveX = cubicBezier(x1, x2); + var curveY = cubicBezier(y1, y2); + var derCurveX = derivativeCubicBezier(x1, x2); + var rangeValue = value => { + if (value > 1) { + return 1; + } + if (value < 0) { + return 0; + } + return value; + }; + var 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; +}; + +// calculate cubic-bezier using Newton's method +export var configBezier = function configBezier() { + return createBezierEasing(...getBezierCoordinates(...arguments)); +}; +export var configSpring = function configSpring() { + var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; + var { + stiff = 100, + damping = 8, + dt = 17 + } = config; + var 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; +}; +export var configEasing = easing => { + 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: + if (easing.split('(')[0] === 'cubic-bezier') { + return configBezier(easing); + } + } + } + if (typeof easing === 'function') { + return easing; + } + return null; +}; Index: node_modules/recharts/es6/animation/timeoutController.js =================================================================== --- node_modules/recharts/es6/animation/timeoutController.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/animation/timeoutController.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,31 @@ +/** + * Callback type for the timeout function. + * Receives current time in milliseconds as an argument. + */ + +/** + * A function that, when called, cancels the timeout. + */ + +export class RequestAnimationFrameTimeoutController { + setTimeout(callback) { + var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + var startTime = performance.now(); + var requestId = null; + var executeCallback = now => { + if (now - startTime >= delay) { + callback(now); + // tests fail without the extra if, even when five lines below it's not needed + // TODO finish transition to the mocked timeout controller and then remove this condition + } else if (typeof requestAnimationFrame === 'function') { + requestId = requestAnimationFrame(executeCallback); + } + }; + requestId = requestAnimationFrame(executeCallback); + return () => { + if (requestId != null) { + cancelAnimationFrame(requestId); + } + }; + } +} Index: node_modules/recharts/es6/animation/useAnimationManager.js =================================================================== --- node_modules/recharts/es6/animation/useAnimationManager.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/animation/useAnimationManager.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,7 @@ +import { createContext, useContext, useMemo } from 'react'; +import { createDefaultAnimationManager } from './createDefaultAnimationManager'; +export var AnimationManagerContext = /*#__PURE__*/createContext(createDefaultAnimationManager); +export function useAnimationManager(animationId, animationManagerFromProps) { + var contextAnimationManager = useContext(AnimationManagerContext); + return useMemo(() => animationManagerFromProps !== null && animationManagerFromProps !== void 0 ? animationManagerFromProps : contextAnimationManager(animationId), [animationId, animationManagerFromProps, contextAnimationManager]); +} Index: node_modules/recharts/es6/animation/util.js =================================================================== --- node_modules/recharts/es6/animation/util.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/animation/util.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,29 @@ +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +/* + * @description: convert camel case to dash case + * string => string + */ +export var getDashCase = name => name.replace(/([A-Z])/g, v => "-".concat(v.toLowerCase())); +export var getTransitionVal = (props, duration, easing) => props.map(prop => "".concat(getDashCase(prop), " ").concat(duration, "ms ").concat(easing)).join(','); + +/** + * Finds the intersection of keys between two objects + * @param {object} preObj previous object + * @param {object} nextObj next object + * @returns an array of keys that exist in both objects + */ +export var getIntersectionKeys = (preObj, nextObj) => [Object.keys(preObj), Object.keys(nextObj)].reduce((a, b) => a.filter(c => b.includes(c))); + +/** + * Maps an object to another object + * @param {function} fn function to map + * @param {object} obj object to map + * @returns mapped object + */ +export var mapObject = (fn, obj) => Object.keys(obj).reduce((res, key) => _objectSpread(_objectSpread({}, res), {}, { + [key]: fn(key, obj[key]) +}), {}); Index: node_modules/recharts/es6/cartesian/Area.js =================================================================== --- node_modules/recharts/es6/cartesian/Area.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/cartesian/Area.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,806 @@ +var _excluded = ["id"], + _excluded2 = ["activeDot", "animationBegin", "animationDuration", "animationEasing", "connectNulls", "dot", "fill", "fillOpacity", "hide", "isAnimationActive", "legendType", "stroke", "xAxisId", "yAxisId"]; +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } +function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +import * as React from 'react'; +import { PureComponent, useCallback, useMemo, useRef, useState } from 'react'; +import { clsx } from 'clsx'; +import { Curve } from '../shape/Curve'; +import { Layer } from '../container/Layer'; +import { CartesianLabelListContextProvider, LabelListFromLabelProp } from '../component/LabelList'; +import { Dots } from '../component/Dots'; +import { Global } from '../util/Global'; +import { interpolate, isNan, isNullish, isNumber, noop } from '../util/DataUtils'; +import { getCateCoordinateOfLine, getNormalizedStackId, getTooltipNameProp, getValueByDataKey } from '../util/ChartUtils'; +import { isClipDot } from '../util/ReactUtils'; +import { ActivePoints } from '../component/ActivePoints'; +import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings'; +import { GraphicalItemClipPath, useNeedsClip } from './GraphicalItemClipPath'; +import { selectArea } from '../state/selectors/areaSelectors'; +import { useIsPanorama } from '../context/PanoramaContext'; +import { useCartesianChartLayout, useChartLayout } from '../context/chartLayoutContext'; +import { useChartName } from '../state/selectors/selectors'; +import { SetLegendPayload } from '../state/SetLegendPayload'; +import { useAppSelector } from '../state/hooks'; +import { useAnimationId } from '../util/useAnimationId'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +import { isWellBehavedNumber } from '../util/isWellBehavedNumber'; +import { usePlotArea } from '../hooks'; +import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId'; +import { SetCartesianGraphicalItem } from '../state/SetGraphicalItem'; +import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents'; +import { JavascriptAnimate } from '../animation/JavascriptAnimate'; +import { getRadiusAndStrokeWidthFromDot } from '../util/getRadiusAndStrokeWidthFromDot'; +import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents'; +import { ZIndexLayer } from '../zIndex/ZIndexLayer'; +import { DefaultZIndexes } from '../zIndex/DefaultZIndexes'; +import { propsAreEqual } from '../util/propsAreEqual'; + +/** + * @inline + */ + +/** + * Our base value array has payload in it, and we expose it externally too. + */ + +/** + * Internal props, combination of external props + defaultProps + private Recharts state + */ + +/** + * External props, intended for end users to fill in + */ + +/** + * Because of naming conflict, we are forced to ignore certain (valid) SVG attributes. + */ + +function getLegendItemColor(stroke, fill) { + return stroke && stroke !== 'none' ? stroke : fill; +} +var computeLegendPayloadFromAreaData = props => { + var { + dataKey, + name, + stroke, + fill, + legendType, + hide + } = props; + return [{ + inactive: hide, + dataKey, + type: legendType, + color: getLegendItemColor(stroke, fill), + value: getTooltipNameProp(name, dataKey), + payload: props + }]; +}; +var SetAreaTooltipEntrySettings = /*#__PURE__*/React.memo(_ref => { + var { + dataKey, + data, + stroke, + strokeWidth, + fill, + name, + hide, + unit, + tooltipType, + id + } = _ref; + var tooltipEntrySettings = { + dataDefinedOnItem: data, + getPosition: noop, + settings: { + stroke, + strokeWidth, + fill, + dataKey, + nameKey: undefined, + name: getTooltipNameProp(name, dataKey), + hide, + type: tooltipType, + color: getLegendItemColor(stroke, fill), + unit, + graphicalItemId: id + } + }; + return /*#__PURE__*/React.createElement(SetTooltipEntrySettings, { + tooltipEntrySettings: tooltipEntrySettings + }); +}); +function AreaDotsWrapper(_ref2) { + var { + clipPathId, + points, + props + } = _ref2; + var { + needClip, + dot, + dataKey + } = props; + var areaProps = svgPropertiesNoEvents(props); + return /*#__PURE__*/React.createElement(Dots, { + points: points, + dot: dot, + className: "recharts-area-dots", + dotClassName: "recharts-area-dot", + dataKey: dataKey, + baseProps: areaProps, + needClip: needClip, + clipPathId: clipPathId + }); +} +function AreaLabelListProvider(_ref3) { + var { + showLabels, + children, + points + } = _ref3; + var labelListEntries = points.map(point => { + var _point$x, _point$y; + var viewBox = { + x: (_point$x = point.x) !== null && _point$x !== void 0 ? _point$x : 0, + y: (_point$y = point.y) !== null && _point$y !== void 0 ? _point$y : 0, + width: 0, + lowerWidth: 0, + upperWidth: 0, + height: 0 + }; + return _objectSpread(_objectSpread({}, viewBox), {}, { + value: point.value, + payload: point.payload, + parentViewBox: undefined, + viewBox, + fill: undefined + }); + }); + return /*#__PURE__*/React.createElement(CartesianLabelListContextProvider, { + value: showLabels ? labelListEntries : undefined + }, children); +} +function StaticArea(_ref4) { + var { + points, + baseLine, + needClip, + clipPathId, + props + } = _ref4; + var { + layout, + type, + stroke, + connectNulls, + isRange + } = props; + var { + id + } = props, + propsWithoutId = _objectWithoutProperties(props, _excluded); + var allOtherProps = svgPropertiesNoEvents(propsWithoutId); + var propsWithEvents = svgPropertiesAndEvents(propsWithoutId); + return /*#__PURE__*/React.createElement(React.Fragment, null, (points === null || points === void 0 ? void 0 : points.length) > 1 && /*#__PURE__*/React.createElement(Layer, { + clipPath: needClip ? "url(#clipPath-".concat(clipPathId, ")") : undefined + }, /*#__PURE__*/React.createElement(Curve, _extends({}, propsWithEvents, { + id: id, + points: points, + connectNulls: connectNulls, + type: type, + baseLine: baseLine, + layout: layout, + stroke: "none", + className: "recharts-area-area" + })), stroke !== 'none' && /*#__PURE__*/React.createElement(Curve, _extends({}, allOtherProps, { + className: "recharts-area-curve", + layout: layout, + type: type, + connectNulls: connectNulls, + fill: "none", + points: points + })), stroke !== 'none' && isRange && /*#__PURE__*/React.createElement(Curve, _extends({}, allOtherProps, { + className: "recharts-area-curve", + layout: layout, + type: type, + connectNulls: connectNulls, + fill: "none", + points: baseLine + }))), /*#__PURE__*/React.createElement(AreaDotsWrapper, { + points: points, + props: propsWithoutId, + clipPathId: clipPathId + })); +} +function VerticalRect(_ref5) { + var _points$, _points; + var { + alpha, + baseLine, + points, + strokeWidth + } = _ref5; + var startY = (_points$ = points[0]) === null || _points$ === void 0 ? void 0 : _points$.y; + var endY = (_points = points[points.length - 1]) === null || _points === void 0 ? void 0 : _points.y; + if (!isWellBehavedNumber(startY) || !isWellBehavedNumber(endY)) { + return null; + } + var height = alpha * Math.abs(startY - endY); + var maxX = Math.max(...points.map(entry => entry.x || 0)); + if (isNumber(baseLine)) { + maxX = Math.max(baseLine, maxX); + } else if (baseLine && Array.isArray(baseLine) && baseLine.length) { + maxX = Math.max(...baseLine.map(entry => entry.x || 0), maxX); + } + if (isNumber(maxX)) { + return /*#__PURE__*/React.createElement("rect", { + x: 0, + y: startY < endY ? startY : startY - height, + width: maxX + (strokeWidth ? parseInt("".concat(strokeWidth), 10) : 1), + height: Math.floor(height) + }); + } + return null; +} +function HorizontalRect(_ref6) { + var _points$2, _points2; + var { + alpha, + baseLine, + points, + strokeWidth + } = _ref6; + var startX = (_points$2 = points[0]) === null || _points$2 === void 0 ? void 0 : _points$2.x; + var endX = (_points2 = points[points.length - 1]) === null || _points2 === void 0 ? void 0 : _points2.x; + if (!isWellBehavedNumber(startX) || !isWellBehavedNumber(endX)) { + return null; + } + var width = alpha * Math.abs(startX - endX); + var maxY = Math.max(...points.map(entry => entry.y || 0)); + if (isNumber(baseLine)) { + maxY = Math.max(baseLine, maxY); + } else if (baseLine && Array.isArray(baseLine) && baseLine.length) { + maxY = Math.max(...baseLine.map(entry => entry.y || 0), maxY); + } + if (isNumber(maxY)) { + return /*#__PURE__*/React.createElement("rect", { + x: startX < endX ? startX : startX - width, + y: 0, + width: width, + height: Math.floor(maxY + (strokeWidth ? parseInt("".concat(strokeWidth), 10) : 1)) + }); + } + return null; +} +function ClipRect(_ref7) { + var { + alpha, + layout, + points, + baseLine, + strokeWidth + } = _ref7; + if (layout === 'vertical') { + return /*#__PURE__*/React.createElement(VerticalRect, { + alpha: alpha, + points: points, + baseLine: baseLine, + strokeWidth: strokeWidth + }); + } + return /*#__PURE__*/React.createElement(HorizontalRect, { + alpha: alpha, + points: points, + baseLine: baseLine, + strokeWidth: strokeWidth + }); +} +function AreaWithAnimation(_ref8) { + var { + needClip, + clipPathId, + props, + previousPointsRef, + previousBaselineRef + } = _ref8; + var { + points, + baseLine, + isAnimationActive, + animationBegin, + animationDuration, + animationEasing, + onAnimationStart, + onAnimationEnd + } = props; + var animationInput = useMemo(() => ({ + points, + baseLine + }), [points, baseLine]); + var animationId = useAnimationId(animationInput, 'recharts-area-'); + var layout = useCartesianChartLayout(); + var [isAnimating, setIsAnimating] = useState(false); + var showLabels = !isAnimating; + var handleAnimationEnd = useCallback(() => { + if (typeof onAnimationEnd === 'function') { + onAnimationEnd(); + } + setIsAnimating(false); + }, [onAnimationEnd]); + var handleAnimationStart = useCallback(() => { + if (typeof onAnimationStart === 'function') { + onAnimationStart(); + } + setIsAnimating(true); + }, [onAnimationStart]); + if (layout == null) { + return null; + } + var prevPoints = previousPointsRef.current; + var prevBaseLine = previousBaselineRef.current; + return /*#__PURE__*/React.createElement(AreaLabelListProvider, { + showLabels: showLabels, + points: points + }, props.children, /*#__PURE__*/React.createElement(JavascriptAnimate, { + animationId: animationId, + begin: animationBegin, + duration: animationDuration, + isActive: isAnimationActive, + easing: animationEasing, + onAnimationEnd: handleAnimationEnd, + onAnimationStart: handleAnimationStart, + key: animationId + }, t => { + if (prevPoints) { + var prevPointsDiffFactor = prevPoints.length / points.length; + var stepPoints = + /* + * Here it is important that at the very end of the animation, on the last frame, + * we render the original points without any interpolation. + * This is needed because the code above is checking for reference equality to decide if the animation should run + * and if we create a new array instance (even if the numbers were the same) + * then we would break animations. + */ + t === 1 ? points : points.map((entry, index) => { + var prevPointIndex = Math.floor(index * prevPointsDiffFactor); + if (prevPoints[prevPointIndex]) { + var prev = prevPoints[prevPointIndex]; + return _objectSpread(_objectSpread({}, entry), {}, { + x: interpolate(prev.x, entry.x, t), + y: interpolate(prev.y, entry.y, t) + }); + } + return entry; + }); + var stepBaseLine; + if (isNumber(baseLine)) { + stepBaseLine = interpolate(prevBaseLine, baseLine, t); + } else if (isNullish(baseLine) || isNan(baseLine)) { + stepBaseLine = interpolate(prevBaseLine, 0, t); + } else { + stepBaseLine = baseLine.map((entry, index) => { + var prevPointIndex = Math.floor(index * prevPointsDiffFactor); + if (Array.isArray(prevBaseLine) && prevBaseLine[prevPointIndex]) { + var prev = prevBaseLine[prevPointIndex]; + return _objectSpread(_objectSpread({}, entry), {}, { + x: interpolate(prev.x, entry.x, t), + y: interpolate(prev.y, entry.y, t) + }); + } + return entry; + }); + } + if (t > 0) { + /* + * We need to keep the refs in the parent component because we need to remember the last shape of the animation + * even if AreaWithAnimation is unmounted as that happens when changing props. + * + * And we need to update the refs here because here is where the interpolation is computed. + * Eslint doesn't like changing function arguments, but we need it so here is an eslint-disable. + */ + // eslint-disable-next-line no-param-reassign + previousPointsRef.current = stepPoints; + // eslint-disable-next-line no-param-reassign + previousBaselineRef.current = stepBaseLine; + } + return /*#__PURE__*/React.createElement(StaticArea, { + points: stepPoints, + baseLine: stepBaseLine, + needClip: needClip, + clipPathId: clipPathId, + props: props + }); + } + if (t > 0) { + // eslint-disable-next-line no-param-reassign + previousPointsRef.current = points; + // eslint-disable-next-line no-param-reassign + previousBaselineRef.current = baseLine; + } + return /*#__PURE__*/React.createElement(Layer, null, isAnimationActive && /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", { + id: "animationClipPath-".concat(clipPathId) + }, /*#__PURE__*/React.createElement(ClipRect, { + alpha: t, + points: points, + baseLine: baseLine, + layout: layout, + strokeWidth: props.strokeWidth + }))), /*#__PURE__*/React.createElement(Layer, { + clipPath: "url(#animationClipPath-".concat(clipPathId, ")") + }, /*#__PURE__*/React.createElement(StaticArea, { + points: points, + baseLine: baseLine, + needClip: needClip, + clipPathId: clipPathId, + props: props + }))); + }), /*#__PURE__*/React.createElement(LabelListFromLabelProp, { + label: props.label + })); +} + +/* + * This components decides if the area should be animated or not. + * It also holds the state of the animation. + */ +function RenderArea(_ref9) { + var { + needClip, + clipPathId, + props + } = _ref9; + /* + * These two must be refs, not state! + * Because we want to store the most recent shape of the animation in case we have to interrupt the animation; + * that happens when user initiates another animation before the current one finishes. + * + * If this was a useState, then every step in the animation would trigger a re-render. + * So, useRef it is. + */ + var previousPointsRef = useRef(null); + var previousBaselineRef = useRef(); + return /*#__PURE__*/React.createElement(AreaWithAnimation, { + needClip: needClip, + clipPathId: clipPathId, + props: props, + previousPointsRef: previousPointsRef, + previousBaselineRef: previousBaselineRef + }); +} +class AreaWithState extends PureComponent { + render() { + var { + hide, + dot, + points, + className, + top, + left, + needClip, + xAxisId, + yAxisId, + width, + height, + id, + baseLine, + zIndex + } = this.props; + if (hide) { + return null; + } + var layerClass = clsx('recharts-area', className); + var clipPathId = id; + var { + r, + strokeWidth + } = getRadiusAndStrokeWidthFromDot(dot); + var clipDot = isClipDot(dot); + var dotSize = r * 2 + strokeWidth; + var activePointsClipPath = needClip ? "url(#clipPath-".concat(clipDot ? '' : 'dots-').concat(clipPathId, ")") : undefined; + return /*#__PURE__*/React.createElement(ZIndexLayer, { + zIndex: zIndex + }, /*#__PURE__*/React.createElement(Layer, { + className: layerClass + }, needClip && /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement(GraphicalItemClipPath, { + clipPathId: clipPathId, + xAxisId: xAxisId, + yAxisId: yAxisId + }), !clipDot && /*#__PURE__*/React.createElement("clipPath", { + id: "clipPath-dots-".concat(clipPathId) + }, /*#__PURE__*/React.createElement("rect", { + x: left - dotSize / 2, + y: top - dotSize / 2, + width: width + dotSize, + height: height + dotSize + }))), /*#__PURE__*/React.createElement(RenderArea, { + needClip: needClip, + clipPathId: clipPathId, + props: this.props + })), /*#__PURE__*/React.createElement(ActivePoints, { + points: points, + mainColor: getLegendItemColor(this.props.stroke, this.props.fill), + itemDataKey: this.props.dataKey, + activeDot: this.props.activeDot, + clipPath: activePointsClipPath + }), this.props.isRange && Array.isArray(baseLine) && /*#__PURE__*/React.createElement(ActivePoints, { + points: baseLine, + mainColor: getLegendItemColor(this.props.stroke, this.props.fill), + itemDataKey: this.props.dataKey, + activeDot: this.props.activeDot, + clipPath: activePointsClipPath + })); + } +} +export var defaultAreaProps = { + activeDot: true, + animationBegin: 0, + animationDuration: 1500, + animationEasing: 'ease', + connectNulls: false, + dot: false, + fill: '#3182bd', + fillOpacity: 0.6, + hide: false, + isAnimationActive: 'auto', + legendType: 'line', + stroke: '#3182bd', + strokeWidth: 1, + type: 'linear', + label: false, + xAxisId: 0, + yAxisId: 0, + zIndex: DefaultZIndexes.area +}; +function AreaImpl(props) { + var _useAppSelector; + var _resolveDefaultProps = resolveDefaultProps(props, defaultAreaProps), + { + activeDot, + animationBegin, + animationDuration, + animationEasing, + connectNulls, + dot, + fill, + fillOpacity, + hide, + isAnimationActive, + legendType, + stroke, + xAxisId, + yAxisId + } = _resolveDefaultProps, + everythingElse = _objectWithoutProperties(_resolveDefaultProps, _excluded2); + var layout = useChartLayout(); + var chartName = useChartName(); + var { + needClip + } = useNeedsClip(xAxisId, yAxisId); + var isPanorama = useIsPanorama(); + var { + points, + isRange, + baseLine + } = (_useAppSelector = useAppSelector(state => selectArea(state, props.id, isPanorama))) !== null && _useAppSelector !== void 0 ? _useAppSelector : {}; + var plotArea = usePlotArea(); + if (layout !== 'horizontal' && layout !== 'vertical' || plotArea == null) { + // Can't render Area in an unsupported layout + return null; + } + if (chartName !== 'AreaChart' && chartName !== 'ComposedChart') { + // There is nothing stopping us from rendering Area in other charts, except for historical reasons. Do we want to allow that? + return null; + } + var { + height, + width, + x: left, + y: top + } = plotArea; + if (!points || !points.length) { + return null; + } + return /*#__PURE__*/React.createElement(AreaWithState, _extends({}, everythingElse, { + activeDot: activeDot, + animationBegin: animationBegin, + animationDuration: animationDuration, + animationEasing: animationEasing, + baseLine: baseLine, + connectNulls: connectNulls, + dot: dot, + fill: fill, + fillOpacity: fillOpacity, + height: height, + hide: hide, + layout: layout, + isAnimationActive: isAnimationActive === 'auto' ? !Global.isSsr : isAnimationActive, + isRange: isRange, + legendType: legendType, + needClip: needClip, + points: points, + stroke: stroke, + width: width, + left: left, + top: top, + xAxisId: xAxisId, + yAxisId: yAxisId + })); +} +export var getBaseValue = (layout, chartBaseValue, itemBaseValue, xAxis, yAxis) => { + // The baseValue can be defined both on the AreaChart, and on the Area. + // The value for the item takes precedence. + var baseValue = itemBaseValue !== null && itemBaseValue !== void 0 ? itemBaseValue : chartBaseValue; + if (isNumber(baseValue)) { + return baseValue; + } + var numericAxis = layout === 'horizontal' ? yAxis : xAxis; + // @ts-expect-error d3scale .domain() returns unknown, Math.max expects number + var domain = numericAxis.scale.domain(); + if (numericAxis.type === 'number') { + var domainMax = Math.max(domain[0], domain[1]); + var domainMin = Math.min(domain[0], domain[1]); + if (baseValue === 'dataMin') { + return domainMin; + } + if (baseValue === 'dataMax') { + return domainMax; + } + return domainMax < 0 ? domainMax : Math.max(Math.min(domain[0], domain[1]), 0); + } + if (baseValue === 'dataMin') { + return domain[0]; + } + if (baseValue === 'dataMax') { + return domain[1]; + } + return domain[0]; +}; +export function computeArea(_ref0) { + var { + areaSettings: { + connectNulls, + baseValue: itemBaseValue, + dataKey + }, + stackedData, + layout, + chartBaseValue, + xAxis, + yAxis, + displayedData, + dataStartIndex, + xAxisTicks, + yAxisTicks, + bandSize + } = _ref0; + var hasStack = stackedData && stackedData.length; + var baseValue = getBaseValue(layout, chartBaseValue, itemBaseValue, xAxis, yAxis); + var isHorizontalLayout = layout === 'horizontal'; + var isRange = false; + var points = displayedData.map((entry, index) => { + var _valueAsArray$, _valueAsArray, _xAxis$scale$map; + var valueAsArray; + if (hasStack) { + valueAsArray = stackedData[dataStartIndex + index]; + } else { + var rawValue = getValueByDataKey(entry, dataKey); + if (!Array.isArray(rawValue)) { + // @ts-expect-error getValueByDataKey is not checking its return value + valueAsArray = [baseValue, rawValue]; + } else { + // @ts-expect-error getValueByDataKey is not checking its return value + valueAsArray = rawValue; + isRange = true; + } + } + var value1 = (_valueAsArray$ = (_valueAsArray = valueAsArray) === null || _valueAsArray === void 0 ? void 0 : _valueAsArray[1]) !== null && _valueAsArray$ !== void 0 ? _valueAsArray$ : null; + var isBreakPoint = value1 == null || hasStack && !connectNulls && getValueByDataKey(entry, dataKey) == null; + if (isHorizontalLayout) { + var _yAxis$scale$map; + return { + x: getCateCoordinateOfLine({ + axis: xAxis, + ticks: xAxisTicks, + bandSize, + entry, + index + }), + y: isBreakPoint ? null : (_yAxis$scale$map = yAxis.scale.map(value1)) !== null && _yAxis$scale$map !== void 0 ? _yAxis$scale$map : null, + value: valueAsArray, + payload: entry + }; + } + return { + x: isBreakPoint ? null : (_xAxis$scale$map = xAxis.scale.map(value1)) !== null && _xAxis$scale$map !== void 0 ? _xAxis$scale$map : null, + y: getCateCoordinateOfLine({ + axis: yAxis, + ticks: yAxisTicks, + bandSize, + entry, + index + }), + value: valueAsArray, + payload: entry + }; + }); + var baseLine; + if (hasStack || isRange) { + baseLine = points.map(entry => { + var _xAxis$scale$map2; + var x = Array.isArray(entry.value) ? entry.value[0] : null; + if (isHorizontalLayout) { + var _yAxis$scale$map2; + return { + x: entry.x, + y: x != null && entry.y != null ? (_yAxis$scale$map2 = yAxis.scale.map(x)) !== null && _yAxis$scale$map2 !== void 0 ? _yAxis$scale$map2 : null : null, + payload: entry.payload + }; + } + return { + x: x != null ? (_xAxis$scale$map2 = xAxis.scale.map(x)) !== null && _xAxis$scale$map2 !== void 0 ? _xAxis$scale$map2 : null : null, + y: entry.y, + payload: entry.payload + }; + }); + } else { + baseLine = isHorizontalLayout ? yAxis.scale.map(baseValue) : xAxis.scale.map(baseValue); + } + return { + points, + baseLine: baseLine !== null && baseLine !== void 0 ? baseLine : 0, + isRange + }; +} +function AreaFn(outsideProps) { + var props = resolveDefaultProps(outsideProps, defaultAreaProps); + var isPanorama = useIsPanorama(); + // Report all props to Redux store first, before calling any hooks, to avoid circular dependencies. + return /*#__PURE__*/React.createElement(RegisterGraphicalItemId, { + id: props.id, + type: "area" + }, id => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetLegendPayload, { + legendPayload: computeLegendPayloadFromAreaData(props) + }), /*#__PURE__*/React.createElement(SetAreaTooltipEntrySettings, { + dataKey: props.dataKey, + data: props.data, + stroke: props.stroke, + strokeWidth: props.strokeWidth, + fill: props.fill, + name: props.name, + hide: props.hide, + unit: props.unit, + tooltipType: props.tooltipType, + id: id + }), /*#__PURE__*/React.createElement(SetCartesianGraphicalItem, { + type: "area", + id: id, + data: props.data, + dataKey: props.dataKey, + xAxisId: props.xAxisId, + yAxisId: props.yAxisId, + zAxisId: 0, + stackId: getNormalizedStackId(props.stackId), + hide: props.hide, + barSize: undefined, + baseValue: props.baseValue, + isPanorama: isPanorama, + connectNulls: props.connectNulls + }), /*#__PURE__*/React.createElement(AreaImpl, _extends({}, props, { + id: id + })))); +} + +/** + * @provides LabelListContext + * @consumes CartesianChartContext + */ +export var Area = /*#__PURE__*/React.memo(AreaFn, propsAreEqual); +Area.displayName = 'Area'; Index: node_modules/recharts/es6/cartesian/Bar.js =================================================================== --- node_modules/recharts/es6/cartesian/Bar.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/cartesian/Bar.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,705 @@ +var _excluded = ["onMouseEnter", "onMouseLeave", "onClick"], + _excluded2 = ["value", "background", "tooltipPosition"], + _excluded3 = ["id"], + _excluded4 = ["onMouseEnter", "onClick", "onMouseLeave"]; +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } +function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } +import * as React from 'react'; +import { PureComponent, useCallback, useRef, useState } from 'react'; +import { clsx } from 'clsx'; +import { Layer } from '../container/Layer'; +import { Cell } from '../component/Cell'; +import { CartesianLabelListContextProvider, LabelListFromLabelProp } from '../component/LabelList'; +import { interpolate, isNan, mathSign, noop } from '../util/DataUtils'; +import { findAllByType } from '../util/ReactUtils'; +import { getBaseValueOfBar, getCateCoordinateOfBar, getTooltipNameProp, getValueByDataKey, truncateByDomain } from '../util/ChartUtils'; +import { adaptEventsOfChild } from '../util/types'; +import { BarRectangle, minPointSizeCallback } from '../util/BarUtils'; +import { useMouseClickItemDispatch, useMouseEnterItemDispatch, useMouseLeaveItemDispatch } from '../context/tooltipContext'; +import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings'; +import { SetErrorBarContext } from '../context/ErrorBarContext'; +import { GraphicalItemClipPath, useNeedsClip } from './GraphicalItemClipPath'; +import { useChartLayout } from '../context/chartLayoutContext'; +import { selectBarRectangles } from '../state/selectors/barSelectors'; +import { useAppSelector } from '../state/hooks'; +import { useIsPanorama } from '../context/PanoramaContext'; +import { selectActiveTooltipDataKey, selectActiveTooltipIndex } from '../state/selectors/tooltipSelectors'; +import { SetLegendPayload } from '../state/SetLegendPayload'; +import { useAnimationId } from '../util/useAnimationId'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId'; +import { SetCartesianGraphicalItem } from '../state/SetGraphicalItem'; +import { svgPropertiesNoEvents, svgPropertiesNoEventsFromUnknown } from '../util/svgPropertiesNoEvents'; +import { JavascriptAnimate } from '../animation/JavascriptAnimate'; +import { ZIndexLayer } from '../zIndex/ZIndexLayer'; +import { DefaultZIndexes } from '../zIndex/DefaultZIndexes'; +import { getZIndexFromUnknown } from '../zIndex/getZIndexFromUnknown'; +import { propsAreEqual } from '../util/propsAreEqual'; +import { BarStackClipLayer, useStackId } from './BarStack'; +var computeLegendPayloadFromBarData = props => { + var { + dataKey, + name, + fill, + legendType, + hide + } = props; + return [{ + inactive: hide, + dataKey, + type: legendType, + color: fill, + value: getTooltipNameProp(name, dataKey), + payload: props + }]; +}; +var SetBarTooltipEntrySettings = /*#__PURE__*/React.memo(_ref => { + var { + dataKey, + stroke, + strokeWidth, + fill, + name, + hide, + unit, + tooltipType, + id + } = _ref; + var tooltipEntrySettings = { + dataDefinedOnItem: undefined, + getPosition: noop, + settings: { + stroke, + strokeWidth, + fill, + dataKey, + nameKey: undefined, + name: getTooltipNameProp(name, dataKey), + hide, + type: tooltipType, + color: fill, + unit, + graphicalItemId: id + } + }; + return /*#__PURE__*/React.createElement(SetTooltipEntrySettings, { + tooltipEntrySettings: tooltipEntrySettings + }); +}); +function BarBackground(props) { + var activeIndex = useAppSelector(selectActiveTooltipIndex); + var { + data, + dataKey, + background: backgroundFromProps, + allOtherBarProps + } = props; + var { + onMouseEnter: onMouseEnterFromProps, + onMouseLeave: onMouseLeaveFromProps, + onClick: onItemClickFromProps + } = allOtherBarProps, + restOfAllOtherProps = _objectWithoutProperties(allOtherBarProps, _excluded); + + // @ts-expect-error bar mouse events are not compatible with recharts mouse events + var onMouseEnterFromContext = useMouseEnterItemDispatch(onMouseEnterFromProps, dataKey, allOtherBarProps.id); + // @ts-expect-error bar mouse events are not compatible with recharts mouse events + var onMouseLeaveFromContext = useMouseLeaveItemDispatch(onMouseLeaveFromProps); + // @ts-expect-error bar mouse events are not compatible with recharts mouse events + var onClickFromContext = useMouseClickItemDispatch(onItemClickFromProps, dataKey, allOtherBarProps.id); + if (!backgroundFromProps || data == null) { + return null; + } + var backgroundProps = svgPropertiesNoEventsFromUnknown(backgroundFromProps); + return /*#__PURE__*/React.createElement(ZIndexLayer, { + zIndex: getZIndexFromUnknown(backgroundFromProps, DefaultZIndexes.barBackground) + }, data.map((entry, i) => { + var { + value, + background: backgroundFromDataEntry, + tooltipPosition + } = entry, + rest = _objectWithoutProperties(entry, _excluded2); + if (!backgroundFromDataEntry) { + return null; + } + + // @ts-expect-error BarRectangleItem type definition says it's missing properties, but I can see them present in debugger! + var onMouseEnter = onMouseEnterFromContext(entry, i); + // @ts-expect-error BarRectangleItem type definition says it's missing properties, but I can see them present in debugger! + var onMouseLeave = onMouseLeaveFromContext(entry, i); + // @ts-expect-error BarRectangleItem type definition says it's missing properties, but I can see them present in debugger! + var onClick = onClickFromContext(entry, i); + var barRectangleProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({ + option: backgroundFromProps, + isActive: String(i) === activeIndex + }, rest), {}, { + // @ts-expect-error backgroundProps is contributing unknown props + fill: '#eee' + }, backgroundFromDataEntry), backgroundProps), adaptEventsOfChild(restOfAllOtherProps, entry, i)), {}, { + onMouseEnter, + onMouseLeave, + onClick, + dataKey, + index: i, + className: 'recharts-bar-background-rectangle' + }); + return /*#__PURE__*/React.createElement(BarRectangle, _extends({ + key: "background-bar-".concat(i) + }, barRectangleProps)); + })); +} +function BarLabelListProvider(_ref2) { + var { + showLabels, + children, + rects + } = _ref2; + var labelListEntries = rects === null || rects === void 0 ? void 0 : rects.map(entry => { + var viewBox = { + x: entry.x, + y: entry.y, + width: entry.width, + lowerWidth: entry.width, + upperWidth: entry.width, + height: entry.height + }; + return _objectSpread(_objectSpread({}, viewBox), {}, { + value: entry.value, + payload: entry.payload, + parentViewBox: entry.parentViewBox, + viewBox, + fill: entry.fill + }); + }); + return /*#__PURE__*/React.createElement(CartesianLabelListContextProvider, { + value: showLabels ? labelListEntries : undefined + }, children); +} +function BarRectangleWithActiveState(props) { + var { + shape, + activeBar, + baseProps, + entry, + index, + dataKey + } = props; + var activeIndex = useAppSelector(selectActiveTooltipIndex); + var activeDataKey = useAppSelector(selectActiveTooltipDataKey); + /* + * Bars support stacking, meaning that there can be multiple bars at the same x value. + * With Tooltip shared=false we only want to highlight the currently active Bar, not all. + * + * Also, if the tooltip is shared, we want to highlight all bars at the same x value + * regardless of the dataKey. + * + * With shared Tooltip, the activeDataKey is undefined. + */ + var isActive = activeBar && String(index) === activeIndex && (activeDataKey == null || dataKey === activeDataKey); + var option = isActive ? activeBar : shape; + if (isActive) { + return /*#__PURE__*/React.createElement(ZIndexLayer, { + zIndex: DefaultZIndexes.activeBar + }, /*#__PURE__*/React.createElement(BarStackClipLayer, { + index: index + }, /*#__PURE__*/React.createElement(BarRectangle, _extends({}, baseProps, { + name: String(baseProps.name) + }, entry, { + isActive: isActive, + option: option, + index: index, + dataKey: dataKey + })))); + } + return /*#__PURE__*/React.createElement(BarRectangle, _extends({}, baseProps, { + name: String(baseProps.name) + }, entry, { + isActive: isActive, + option: option, + index: index, + dataKey: dataKey + })); +} +function BarRectangleNeverActive(props) { + var { + shape, + baseProps, + entry, + index, + dataKey + } = props; + return /*#__PURE__*/React.createElement(BarRectangle, _extends({}, baseProps, { + name: String(baseProps.name) + }, entry, { + isActive: false, + option: shape, + index: index, + dataKey: dataKey + })); +} +function BarRectangles(_ref3) { + var _svgPropertiesNoEvent; + var { + data, + props + } = _ref3; + var _ref4 = (_svgPropertiesNoEvent = svgPropertiesNoEvents(props)) !== null && _svgPropertiesNoEvent !== void 0 ? _svgPropertiesNoEvent : {}, + { + id + } = _ref4, + baseProps = _objectWithoutProperties(_ref4, _excluded3); + var { + shape, + dataKey, + activeBar + } = props; + var { + onMouseEnter: onMouseEnterFromProps, + onClick: onItemClickFromProps, + onMouseLeave: onMouseLeaveFromProps + } = props, + restOfAllOtherProps = _objectWithoutProperties(props, _excluded4); + + // @ts-expect-error bar mouse events are not compatible with recharts mouse events + var onMouseEnterFromContext = useMouseEnterItemDispatch(onMouseEnterFromProps, dataKey, id); + // @ts-expect-error bar mouse events are not compatible with recharts mouse events + var onMouseLeaveFromContext = useMouseLeaveItemDispatch(onMouseLeaveFromProps); + // @ts-expect-error bar mouse events are not compatible with recharts mouse events + var onClickFromContext = useMouseClickItemDispatch(onItemClickFromProps, dataKey, id); + if (!data) { + return null; + } + return /*#__PURE__*/React.createElement(React.Fragment, null, data.map((entry, i) => { + return /*#__PURE__*/React.createElement(BarStackClipLayer, _extends({ + index: i + // https://github.com/recharts/recharts/issues/5415 + , + key: "rectangle-".concat(entry === null || entry === void 0 ? void 0 : entry.x, "-").concat(entry === null || entry === void 0 ? void 0 : entry.y, "-").concat(entry === null || entry === void 0 ? void 0 : entry.value, "-").concat(i), + className: "recharts-bar-rectangle" + }, adaptEventsOfChild(restOfAllOtherProps, entry, i), { + // @ts-expect-error BarRectangleItem type definition says it's missing properties, but I can see them present in debugger! + onMouseEnter: onMouseEnterFromContext(entry, i) + // @ts-expect-error BarRectangleItem type definition says it's missing properties, but I can see them present in debugger! + , + onMouseLeave: onMouseLeaveFromContext(entry, i) + // @ts-expect-error BarRectangleItem type definition says it's missing properties, but I can see them present in debugger! + , + onClick: onClickFromContext(entry, i) + }), activeBar ? /*#__PURE__*/React.createElement(BarRectangleWithActiveState, { + shape: shape, + activeBar: activeBar, + baseProps: baseProps, + entry: entry, + index: i, + dataKey: dataKey + }) : + /*#__PURE__*/ + /* + * If the `activeBar` prop is falsy, then let's call the variant without hooks. + * Using the `selectActiveTooltipIndex` selector is usually fast + * but in charts with large-ish amount of data even the few nanoseconds add up to a noticeable jank. + * If the activeBar is false then we don't need to know which index is active - because we won't use it anyway. + * So let's just skip the hooks altogether. That way, React can skip rendering the component, + * and can skip the tree reconciliation for its children too. + * Because we can't call hooks conditionally, we need to have a separate component for that. + */ + React.createElement(BarRectangleNeverActive, { + shape: shape, + baseProps: baseProps, + entry: entry, + index: i, + dataKey: dataKey + })); + })); +} +function RectanglesWithAnimation(_ref5) { + var { + props, + previousRectanglesRef + } = _ref5; + var { + data, + layout, + isAnimationActive, + animationBegin, + animationDuration, + animationEasing, + onAnimationEnd, + onAnimationStart + } = props; + var prevData = previousRectanglesRef.current; + var animationId = useAnimationId(props, 'recharts-bar-'); + var [isAnimating, setIsAnimating] = useState(false); + var showLabels = !isAnimating; + var handleAnimationEnd = useCallback(() => { + if (typeof onAnimationEnd === 'function') { + onAnimationEnd(); + } + setIsAnimating(false); + }, [onAnimationEnd]); + var handleAnimationStart = useCallback(() => { + if (typeof onAnimationStart === 'function') { + onAnimationStart(); + } + setIsAnimating(true); + }, [onAnimationStart]); + return /*#__PURE__*/React.createElement(BarLabelListProvider, { + showLabels: showLabels, + rects: data + }, /*#__PURE__*/React.createElement(JavascriptAnimate, { + animationId: animationId, + begin: animationBegin, + duration: animationDuration, + isActive: isAnimationActive, + easing: animationEasing, + onAnimationEnd: handleAnimationEnd, + onAnimationStart: handleAnimationStart, + key: animationId + }, t => { + var stepData = t === 1 ? data : data === null || data === void 0 ? void 0 : data.map((entry, index) => { + var prev = prevData && prevData[index]; + if (prev) { + return _objectSpread(_objectSpread({}, entry), {}, { + x: interpolate(prev.x, entry.x, t), + y: interpolate(prev.y, entry.y, t), + width: interpolate(prev.width, entry.width, t), + height: interpolate(prev.height, entry.height, t) + }); + } + if (layout === 'horizontal') { + var height = interpolate(0, entry.height, t); + var y = interpolate(entry.stackedBarStart, entry.y, t); + return _objectSpread(_objectSpread({}, entry), {}, { + y, + height + }); + } + var w = interpolate(0, entry.width, t); + var x = interpolate(entry.stackedBarStart, entry.x, t); + return _objectSpread(_objectSpread({}, entry), {}, { + width: w, + x + }); + }); + if (t > 0) { + // eslint-disable-next-line no-param-reassign + previousRectanglesRef.current = stepData !== null && stepData !== void 0 ? stepData : null; + } + if (stepData == null) { + return null; + } + return /*#__PURE__*/React.createElement(Layer, null, /*#__PURE__*/React.createElement(BarRectangles, { + props: props, + data: stepData + })); + }), /*#__PURE__*/React.createElement(LabelListFromLabelProp, { + label: props.label + }), props.children); +} +function RenderRectangles(props) { + var previousRectanglesRef = useRef(null); + return /*#__PURE__*/React.createElement(RectanglesWithAnimation, { + previousRectanglesRef: previousRectanglesRef, + props: props + }); +} +var defaultMinPointSize = 0; +var errorBarDataPointFormatter = (dataPoint, dataKey) => { + /** + * if the value coming from `selectBarRectangles` is an array then this is a stacked bar chart. + * arr[1] represents end value of the bar since the data is in the form of [startValue, endValue]. + * */ + var value = Array.isArray(dataPoint.value) ? dataPoint.value[1] : dataPoint.value; + return { + x: dataPoint.x, + y: dataPoint.y, + value, + // @ts-expect-error getValueByDataKey does not validate the output type + errorVal: getValueByDataKey(dataPoint, dataKey) + }; +}; +class BarWithState extends PureComponent { + render() { + var { + hide, + data, + dataKey, + className, + xAxisId, + yAxisId, + needClip, + background, + id + } = this.props; + if (hide || data == null) { + return null; + } + var layerClass = clsx('recharts-bar', className); + var clipPathId = id; + return /*#__PURE__*/React.createElement(Layer, { + className: layerClass, + id: id + }, needClip && /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement(GraphicalItemClipPath, { + clipPathId: clipPathId, + xAxisId: xAxisId, + yAxisId: yAxisId + })), /*#__PURE__*/React.createElement(Layer, { + className: "recharts-bar-rectangles", + clipPath: needClip ? "url(#clipPath-".concat(clipPathId, ")") : undefined + }, /*#__PURE__*/React.createElement(BarBackground, { + data: data, + dataKey: dataKey, + background: background, + allOtherBarProps: this.props + }), /*#__PURE__*/React.createElement(RenderRectangles, this.props))); + } +} +export var defaultBarProps = { + activeBar: false, + animationBegin: 0, + animationDuration: 400, + animationEasing: 'ease', + background: false, + hide: false, + isAnimationActive: 'auto', + label: false, + legendType: 'rect', + minPointSize: defaultMinPointSize, + xAxisId: 0, + yAxisId: 0, + zIndex: DefaultZIndexes.bar +}; +function BarImpl(props) { + var { + xAxisId, + yAxisId, + hide, + legendType, + minPointSize, + activeBar, + animationBegin, + animationDuration, + animationEasing, + isAnimationActive + } = props; + var { + needClip + } = useNeedsClip(xAxisId, yAxisId); + var layout = useChartLayout(); + var isPanorama = useIsPanorama(); + var cells = findAllByType(props.children, Cell); + var rects = useAppSelector(state => selectBarRectangles(state, props.id, isPanorama, cells)); + if (layout !== 'vertical' && layout !== 'horizontal') { + return null; + } + var errorBarOffset; + var firstDataPoint = rects === null || rects === void 0 ? void 0 : rects[0]; + if (firstDataPoint == null || firstDataPoint.height == null || firstDataPoint.width == null) { + errorBarOffset = 0; + } else { + errorBarOffset = layout === 'vertical' ? firstDataPoint.height / 2 : firstDataPoint.width / 2; + } + return /*#__PURE__*/React.createElement(SetErrorBarContext, { + xAxisId: xAxisId, + yAxisId: yAxisId, + data: rects, + dataPointFormatter: errorBarDataPointFormatter, + errorBarOffset: errorBarOffset + }, /*#__PURE__*/React.createElement(BarWithState, _extends({}, props, { + layout: layout, + needClip: needClip, + data: rects, + xAxisId: xAxisId, + yAxisId: yAxisId, + hide: hide, + legendType: legendType, + minPointSize: minPointSize, + activeBar: activeBar, + animationBegin: animationBegin, + animationDuration: animationDuration, + animationEasing: animationEasing, + isAnimationActive: isAnimationActive + }))); +} +export function computeBarRectangles(_ref6) { + var { + layout, + barSettings: { + dataKey, + minPointSize: minPointSizeProp + }, + pos, + bandSize, + xAxis, + yAxis, + xAxisTicks, + yAxisTicks, + stackedData, + displayedData, + offset, + cells, + parentViewBox, + dataStartIndex + } = _ref6; + var numericAxis = layout === 'horizontal' ? yAxis : xAxis; + // @ts-expect-error this assumes that the domain is always numeric, but doesn't check for it + var stackedDomain = stackedData ? numericAxis.scale.domain() : null; + var baseValue = getBaseValueOfBar({ + numericAxis + }); + var stackedBarStart = numericAxis.scale.map(baseValue); + return displayedData.map((entry, index) => { + var value, x, y, width, height, background; + if (stackedData) { + // Use dataStartIndex to access the correct element in the full stackedData array + var untruncatedValue = stackedData[index + dataStartIndex]; + if (untruncatedValue == null) { + return null; + } + value = truncateByDomain(untruncatedValue, stackedDomain); + } else { + value = getValueByDataKey(entry, dataKey); + if (!Array.isArray(value)) { + value = [baseValue, value]; + } + } + var minPointSize = minPointSizeCallback(minPointSizeProp, defaultMinPointSize)(value[1], index); + if (layout === 'horizontal') { + var _ref7; + var baseValueScale = yAxis.scale.map(value[0]); + var currentValueScale = yAxis.scale.map(value[1]); + if (baseValueScale == null || currentValueScale == null) { + return null; + } + x = getCateCoordinateOfBar({ + axis: xAxis, + ticks: xAxisTicks, + bandSize, + offset: pos.offset, + entry, + index + }); + y = (_ref7 = currentValueScale !== null && currentValueScale !== void 0 ? currentValueScale : baseValueScale) !== null && _ref7 !== void 0 ? _ref7 : undefined; + width = pos.size; + var computedHeight = baseValueScale - currentValueScale; + height = isNan(computedHeight) ? 0 : computedHeight; + background = { + x, + y: offset.top, + width, + height: offset.height + }; + if (Math.abs(minPointSize) > 0 && Math.abs(height) < Math.abs(minPointSize)) { + var delta = mathSign(height || minPointSize) * (Math.abs(minPointSize) - Math.abs(height)); + y -= delta; + height += delta; + } + } else { + var _baseValueScale = xAxis.scale.map(value[0]); + var _currentValueScale = xAxis.scale.map(value[1]); + if (_baseValueScale == null || _currentValueScale == null) { + return null; + } + x = _baseValueScale; + y = getCateCoordinateOfBar({ + axis: yAxis, + ticks: yAxisTicks, + bandSize, + offset: pos.offset, + entry, + index + }); + width = _currentValueScale - _baseValueScale; + height = pos.size; + background = { + x: offset.left, + y, + width: offset.width, + height + }; + if (Math.abs(minPointSize) > 0 && Math.abs(width) < Math.abs(minPointSize)) { + var _delta = mathSign(width || minPointSize) * (Math.abs(minPointSize) - Math.abs(width)); + width += _delta; + } + } + if (x == null || y == null || width == null || height == null) { + return null; + } + var barRectangleItem = _objectSpread(_objectSpread({}, entry), {}, { + stackedBarStart, + x, + y, + width, + height, + value: stackedData ? value : value[1], + payload: entry, + background, + tooltipPosition: { + x: x + width / 2, + y: y + height / 2 + }, + parentViewBox + }, cells && cells[index] && cells[index].props); + return barRectangleItem; + }).filter(Boolean); +} +function BarFn(outsideProps) { + var props = resolveDefaultProps(outsideProps, defaultBarProps); + // stackId may arrive from props or from BarStack context + var stackId = useStackId(props.stackId); + var isPanorama = useIsPanorama(); + // Report all props to Redux store first, before calling any hooks, to avoid circular dependencies. + return /*#__PURE__*/React.createElement(RegisterGraphicalItemId, { + id: props.id, + type: "bar" + }, id => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetLegendPayload, { + legendPayload: computeLegendPayloadFromBarData(props) + }), /*#__PURE__*/React.createElement(SetBarTooltipEntrySettings, { + dataKey: props.dataKey, + stroke: props.stroke, + strokeWidth: props.strokeWidth, + fill: props.fill, + name: props.name, + hide: props.hide, + unit: props.unit, + tooltipType: props.tooltipType, + id: id + }), /*#__PURE__*/React.createElement(SetCartesianGraphicalItem, { + type: "bar", + id: id + // Bar does not allow setting data directly on the graphical item (why?) + , + data: undefined, + xAxisId: props.xAxisId, + yAxisId: props.yAxisId, + zAxisId: 0, + dataKey: props.dataKey, + stackId: stackId, + hide: props.hide, + barSize: props.barSize, + minPointSize: props.minPointSize, + maxBarSize: props.maxBarSize, + isPanorama: isPanorama + }), /*#__PURE__*/React.createElement(ZIndexLayer, { + zIndex: props.zIndex + }, /*#__PURE__*/React.createElement(BarImpl, _extends({}, props, { + id: id + }))))); +} + +/** + * @provides ErrorBarContext + * @provides LabelListContext + * @provides CellReader + * @consumes CartesianChartContext + * @consumes BarStackContext + */ +export var Bar = /*#__PURE__*/React.memo(BarFn, propsAreEqual); +Bar.displayName = 'Bar'; Index: node_modules/recharts/es6/cartesian/BarStack.js =================================================================== --- node_modules/recharts/es6/cartesian/BarStack.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/cartesian/BarStack.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,122 @@ +var _excluded = ["index"]; +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } +function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } +import * as React from 'react'; +import { createContext, useContext, useMemo } from 'react'; +import { getNormalizedStackId } from '../util/ChartUtils'; +import { useUniqueId } from '../util/useUniqueId'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +import { useAppSelector } from '../state/hooks'; +import { selectStackRects } from '../state/selectors/barStackSelectors'; +import { useIsPanorama } from '../context/PanoramaContext'; +import { Layer } from '../container/Layer'; +import { Rectangle } from '../shape/Rectangle'; +import { propsAreEqual } from '../util/propsAreEqual'; +var BarStackContext = /*#__PURE__*/createContext(undefined); + +/** + * Hook to resolve the stack ID for a Bar component. + * If a stack ID is provided via props, it is used directly. + * Otherwise, this will read stack ID from BarStack context if available. + * If both are undefined, it returns undefined. + * @param childStackId + */ +export var useStackId = childStackId => { + var stackSettings = useContext(BarStackContext); + if (stackSettings != null) { + return stackSettings.stackId; + } + if (childStackId == null) { + return undefined; + } + return getNormalizedStackId(childStackId); +}; +export var defaultBarStackProps = { + radius: 0 +}; +var getClipPathId = (stackId, index) => { + return "recharts-bar-stack-clip-path-".concat(stackId, "-").concat(index); +}; +export var useBarStackClipPathUrl = index => { + var barStackContext = useContext(BarStackContext); + if (barStackContext == null) { + return undefined; + } + var { + stackId + } = barStackContext; + return "url(#".concat(getClipPathId(stackId, index), ")"); +}; +export var BarStackClipLayer = _ref => { + var { + index + } = _ref, + rest = _objectWithoutProperties(_ref, _excluded); + var clipPathUrl = useBarStackClipPathUrl(index); + return /*#__PURE__*/React.createElement(Layer, _extends({ + className: "recharts-bar-stack-layer", + clipPath: clipPathUrl + }, rest)); +}; + +/** + * This React component will render a clipPath that the individual bars in the stack will reference + * to achieve rounded corners for the entire stack. + */ +var BarStackClipPath = _ref2 => { + var { + stackId, + radius + } = _ref2; + var isPanorama = useIsPanorama(); + var positions = useAppSelector(state => selectStackRects(state, stackId, isPanorama)); + if (positions == null || positions.length === 0) { + return null; + } + /* + * Render one clipPath per rectangle in the stack. + * Each rectangle corresponds to one data entry in the chart. + */ + return /*#__PURE__*/React.createElement("defs", null, positions.map((pos, index) => { + if (pos == null) { + return null; + } + var clipPathId = getClipPathId(stackId, index); + return /*#__PURE__*/React.createElement("clipPath", { + key: clipPathId, + id: clipPathId + }, /*#__PURE__*/React.createElement(Rectangle, { + isAnimationActive: false, + isUpdateAnimationActive: false, + x: pos.x, + y: pos.y, + width: pos.width, + height: pos.height, + radius: radius + })); + })); +}; +var BarStackImpl = props => { + var resolvedStackId = useUniqueId('recharts-bar-stack', getNormalizedStackId(props.stackId)); + var { + children, + radius + } = resolveDefaultProps(props, defaultBarStackProps); + var context = useMemo(() => ({ + stackId: resolvedStackId, + radius + }), [resolvedStackId, radius]); + return /*#__PURE__*/React.createElement(BarStackContext.Provider, { + value: context + }, /*#__PURE__*/React.createElement(BarStackClipPath, { + stackId: resolvedStackId, + radius: radius + }), children); +}; + +/** + * @provides BarStackContext + * @since 3.6 + */ +export var BarStack = /*#__PURE__*/React.memo(BarStackImpl, propsAreEqual); Index: node_modules/recharts/es6/cartesian/Brush.js =================================================================== --- node_modules/recharts/es6/cartesian/Brush.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/cartesian/Brush.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,902 @@ +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +import * as React from 'react'; +import { Children, PureComponent, useCallback, useContext, useEffect } from 'react'; +import { clsx } from 'clsx'; +import { scalePoint } from 'victory-vendor/d3-scale'; +import range from 'es-toolkit/compat/range'; +import { Layer } from '../container/Layer'; +import { Text } from '../component/Text'; +import { getValueByDataKey } from '../util/ChartUtils'; +import { isNumber, isNotNil } from '../util/DataUtils'; +import { generatePrefixStyle } from '../util/CssPrefixUtils'; +import { useChartData, useDataIndex } from '../context/chartDataContext'; +import { BrushUpdateDispatchContext } from '../context/brushUpdateContext'; +import { useAppDispatch, useAppSelector } from '../state/hooks'; +import { setDataStartEndIndexes } from '../state/chartDataSlice'; +import { setBrushSettings } from '../state/brushSlice'; +import { PanoramaContextProvider } from '../context/PanoramaContext'; +import { selectBrushDimensions } from '../state/selectors/brushSelectors'; +import { useBrushChartSynchronisation } from '../synchronisation/useChartSynchronisation'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents'; + +// Why is this tickFormatter different from the other TickFormatters? This one allows to return numbers too for some reason. + +function DefaultTraveller(props) { + var { + x, + y, + width, + height, + stroke + } = props; + var lineY = Math.floor(y + height / 2) - 1; + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", { + x: x, + y: y, + width: width, + height: height, + fill: stroke, + stroke: "none" + }), /*#__PURE__*/React.createElement("line", { + x1: x + 1, + y1: lineY, + x2: x + width - 1, + y2: lineY, + fill: "none", + stroke: "#fff" + }), /*#__PURE__*/React.createElement("line", { + x1: x + 1, + y1: lineY + 2, + x2: x + width - 1, + y2: lineY + 2, + fill: "none", + stroke: "#fff" + })); +} +function Traveller(props) { + var { + travellerProps, + travellerType + } = props; + if (/*#__PURE__*/React.isValidElement(travellerType)) { + // @ts-expect-error element cloning disagrees with the types (and it should) + return /*#__PURE__*/React.cloneElement(travellerType, travellerProps); + } + if (typeof travellerType === 'function') { + return travellerType(travellerProps); + } + return /*#__PURE__*/React.createElement(DefaultTraveller, travellerProps); +} +function getNameFromUnknown(value) { + if (isNotNil(value) && typeof value === 'object' && 'name' in value && typeof value.name === 'string') { + return value.name; + } + return undefined; +} +function getAriaLabel(data, startIndex, endIndex) { + var start = getNameFromUnknown(data[startIndex]); + var end = getNameFromUnknown(data[endIndex]); + return "Min value: ".concat(start, ", Max value: ").concat(end); +} +function TravellerLayer(_ref) { + var { + otherProps, + travellerX, + id, + onMouseEnter, + onMouseLeave, + onMouseDown, + onTouchStart, + onTravellerMoveKeyboard, + onFocus, + onBlur + } = _ref; + var { + y, + x: xFromProps, + travellerWidth, + height, + traveller, + ariaLabel, + data, + startIndex, + endIndex + } = otherProps; + var x = Math.max(travellerX, xFromProps); + var travellerProps = _objectSpread(_objectSpread({}, svgPropertiesNoEvents(otherProps)), {}, { + x, + y, + width: travellerWidth, + height + }); + var ariaLabelBrush = ariaLabel || getAriaLabel(data, startIndex, endIndex); + return /*#__PURE__*/React.createElement(Layer, { + tabIndex: 0, + role: "slider", + "aria-label": ariaLabelBrush, + "aria-valuenow": travellerX, + className: "recharts-brush-traveller", + onMouseEnter: onMouseEnter, + onMouseLeave: onMouseLeave, + onMouseDown: onMouseDown, + onTouchStart: onTouchStart, + onKeyDown: e => { + if (!['ArrowLeft', 'ArrowRight'].includes(e.key)) { + return; + } + e.preventDefault(); + e.stopPropagation(); + onTravellerMoveKeyboard(e.key === 'ArrowRight' ? 1 : -1, id); + }, + onFocus: onFocus, + onBlur: onBlur, + style: { + cursor: 'col-resize' + } + }, /*#__PURE__*/React.createElement(Traveller, { + travellerType: traveller, + travellerProps: travellerProps + })); +} +/* + * This one cannot be a React Component because React is not happy with it returning only string | number. + * React wants a full React.JSX.Element but that is not compatible with Text component. + */ +function getTextOfTick(props) { + var { + index, + data, + tickFormatter, + dataKey + } = props; + // @ts-expect-error getValueByDataKey does not validate the output type + var text = getValueByDataKey(data[index], dataKey, index); + return typeof tickFormatter === 'function' ? tickFormatter(text, index) : text; +} +function getIndexInRange(valueRange, x) { + var len = valueRange.length; + var start = 0; + var end = len - 1; + while (end - start > 1) { + var middle = Math.floor((start + end) / 2); + var middleValue = valueRange[middle]; + if (middleValue != null && middleValue > x) { + end = middle; + } else { + start = middle; + } + } + var endValue = valueRange[end]; + return endValue != null && x >= endValue ? end : start; +} +function getIndex(_ref2) { + var { + startX, + endX, + scaleValues, + gap, + data + } = _ref2; + var lastIndex = data.length - 1; + var min = Math.min(startX, endX); + var max = Math.max(startX, endX); + var minIndex = getIndexInRange(scaleValues, min); + var maxIndex = getIndexInRange(scaleValues, max); + return { + startIndex: minIndex - minIndex % gap, + endIndex: maxIndex === lastIndex ? lastIndex : maxIndex - maxIndex % gap + }; +} +function Background(_ref3) { + var { + x, + y, + width, + height, + fill, + stroke + } = _ref3; + return /*#__PURE__*/React.createElement("rect", { + stroke: stroke, + fill: fill, + x: x, + y: y, + width: width, + height: height + }); +} +function BrushText(_ref4) { + var { + startIndex, + endIndex, + y, + height, + travellerWidth, + stroke, + tickFormatter, + dataKey, + data, + startX, + endX + } = _ref4; + var offset = 5; + var attrs = { + pointerEvents: 'none', + fill: stroke + }; + return /*#__PURE__*/React.createElement(Layer, { + className: "recharts-brush-texts" + }, /*#__PURE__*/React.createElement(Text, _extends({ + textAnchor: "end", + verticalAnchor: "middle", + x: Math.min(startX, endX) - offset, + y: y + height / 2 + }, attrs), getTextOfTick({ + index: startIndex, + tickFormatter, + dataKey, + data + })), /*#__PURE__*/React.createElement(Text, _extends({ + textAnchor: "start", + verticalAnchor: "middle", + x: Math.max(startX, endX) + travellerWidth + offset, + y: y + height / 2 + }, attrs), getTextOfTick({ + index: endIndex, + tickFormatter, + dataKey, + data + }))); +} +function Slide(_ref5) { + var { + y, + height, + stroke, + travellerWidth, + startX, + endX, + onMouseEnter, + onMouseLeave, + onMouseDown, + onTouchStart + } = _ref5; + var x = Math.min(startX, endX) + travellerWidth; + var width = Math.max(Math.abs(endX - startX) - travellerWidth, 0); + return /*#__PURE__*/React.createElement("rect", { + className: "recharts-brush-slide", + onMouseEnter: onMouseEnter, + onMouseLeave: onMouseLeave, + onMouseDown: onMouseDown, + onTouchStart: onTouchStart, + style: { + cursor: 'move' + }, + stroke: "none", + fill: stroke, + fillOpacity: 0.2, + x: x, + y: y, + width: width, + height: height + }); +} +function Panorama(_ref6) { + var { + x, + y, + width, + height, + data, + children, + padding + } = _ref6; + var isPanoramic = React.Children.count(children) === 1; + if (!isPanoramic) { + return null; + } + var chartElement = Children.only(children); + if (!chartElement) { + return null; + } + return /*#__PURE__*/React.cloneElement(chartElement, { + x, + y, + width, + height, + margin: padding, + compact: true, + data + }); +} +var createScale = _ref7 => { + var { + data, + startIndex, + endIndex, + x, + width, + travellerWidth + } = _ref7; + if (!data || !data.length) { + return {}; + } + var len = data.length; + var scale = scalePoint().domain(range(0, len)).range([x, x + width - travellerWidth]); + var scaleValues = scale.domain().map(entry => scale(entry)).filter(isNotNil); + return { + isTextActive: false, + isSlideMoving: false, + isTravellerMoving: false, + isTravellerFocused: false, + startX: scale(startIndex), + endX: scale(endIndex), + scale, + scaleValues + }; +}; +var isTouch = e => e.changedTouches && !!e.changedTouches.length; +class BrushWithState extends PureComponent { + constructor(props) { + super(props); + _defineProperty(this, "handleDrag", e => { + if (this.leaveTimer) { + clearTimeout(this.leaveTimer); + this.leaveTimer = null; + } + if (this.state.isTravellerMoving) { + this.handleTravellerMove(e); + } else if (this.state.isSlideMoving) { + this.handleSlideDrag(e); + } + }); + _defineProperty(this, "handleTouchMove", e => { + var _e$changedTouches; + var touch = (_e$changedTouches = e.changedTouches) === null || _e$changedTouches === void 0 ? void 0 : _e$changedTouches[0]; + if (touch != null) { + this.handleDrag(touch); + } + }); + _defineProperty(this, "handleDragEnd", () => { + this.setState({ + isTravellerMoving: false, + isSlideMoving: false + }, () => { + var { + endIndex, + onDragEnd, + startIndex + } = this.props; + onDragEnd === null || onDragEnd === void 0 || onDragEnd({ + endIndex, + startIndex + }); + }); + this.detachDragEndListener(); + }); + _defineProperty(this, "handleLeaveWrapper", () => { + if (this.state.isTravellerMoving || this.state.isSlideMoving) { + this.leaveTimer = window.setTimeout(this.handleDragEnd, this.props.leaveTimeOut); + } + }); + _defineProperty(this, "handleEnterSlideOrTraveller", () => { + this.setState({ + isTextActive: true + }); + }); + _defineProperty(this, "handleLeaveSlideOrTraveller", () => { + this.setState({ + isTextActive: false + }); + }); + _defineProperty(this, "handleSlideDragStart", e => { + var event = isTouch(e) ? e.changedTouches[0] : e; + if (event == null) { + return; + } + this.setState({ + isTravellerMoving: false, + isSlideMoving: true, + slideMoveStartX: event.pageX + }); + this.attachDragEndListener(); + }); + _defineProperty(this, "handleTravellerMoveKeyboard", (direction, id) => { + var { + data, + gap, + startIndex, + endIndex + } = this.props; + // scaleValues are a list of coordinates. For example: [65, 250, 435, 620, 805, 990]. + var { + scaleValues, + startX, + endX + } = this.state; + if (scaleValues == null) { + return; + } + + // unless we search for the closest scaleValue to the current coordinate + // we need to move travelers via index when using the keyboard + var currentIndex = -1; + if (id === 'startX') { + currentIndex = startIndex; + } else if (id === 'endX') { + currentIndex = endIndex; + } + if (currentIndex < 0 || currentIndex >= data.length) { + return; + } + var newIndex = currentIndex + direction; + if (newIndex === -1 || newIndex >= scaleValues.length) { + return; + } + var newScaleValue = scaleValues[newIndex]; + if (newScaleValue == null) { + return; + } + + // Prevent travellers from being on top of each other or overlapping + if (id === 'startX' && newScaleValue >= endX || id === 'endX' && newScaleValue <= startX) { + return; + } + this.setState( + // @ts-expect-error not sure why typescript is not happy with this, partial update is fine in React + { + [id]: newScaleValue + }, () => { + this.props.onChange(getIndex({ + startX: this.state.startX, + endX: this.state.endX, + data, + gap, + scaleValues + })); + }); + }); + this.travellerDragStartHandlers = { + startX: this.handleTravellerDragStart.bind(this, 'startX'), + endX: this.handleTravellerDragStart.bind(this, 'endX') + }; + this.state = { + brushMoveStartX: 0, + movingTravellerId: undefined, + endX: 0, + startX: 0, + slideMoveStartX: 0 + }; + } + static getDerivedStateFromProps(nextProps, prevState) { + var { + data, + width, + x, + travellerWidth, + startIndex, + endIndex, + startIndexControlledFromProps, + endIndexControlledFromProps + } = nextProps; + if (data !== prevState.prevData) { + return _objectSpread({ + prevData: data, + prevTravellerWidth: travellerWidth, + prevX: x, + prevWidth: width + }, data && data.length ? createScale({ + data, + width, + x, + travellerWidth, + startIndex, + endIndex + }) : { + scale: undefined, + scaleValues: undefined + }); + } + var prevScale = prevState.scale; + if (prevScale && (width !== prevState.prevWidth || x !== prevState.prevX || travellerWidth !== prevState.prevTravellerWidth)) { + prevScale.range([x, x + width - travellerWidth]); + var scaleValues = prevScale.domain().map(entry => prevScale(entry)).filter(value => value != null); + return { + prevData: data, + prevTravellerWidth: travellerWidth, + prevX: x, + prevWidth: width, + startX: prevScale(nextProps.startIndex), + endX: prevScale(nextProps.endIndex), + scaleValues + }; + } + if (prevState.scale && !prevState.isSlideMoving && !prevState.isTravellerMoving && !prevState.isTravellerFocused && !prevState.isTextActive) { + /* + * If the startIndex or endIndex are controlled from the outside, + * we need to keep the startX and end up to date. + * Also we do not want to do that while user is interacting in the brush, + * because this will trigger re-render and interrupt the drag&drop. + */ + if (startIndexControlledFromProps != null && prevState.prevStartIndexControlledFromProps !== startIndexControlledFromProps) { + return { + startX: prevState.scale(startIndexControlledFromProps), + prevStartIndexControlledFromProps: startIndexControlledFromProps + }; + } + if (endIndexControlledFromProps != null && prevState.prevEndIndexControlledFromProps !== endIndexControlledFromProps) { + return { + endX: prevState.scale(endIndexControlledFromProps), + prevEndIndexControlledFromProps: endIndexControlledFromProps + }; + } + } + return null; + } + componentWillUnmount() { + if (this.leaveTimer) { + clearTimeout(this.leaveTimer); + this.leaveTimer = null; + } + this.detachDragEndListener(); + } + attachDragEndListener() { + window.addEventListener('mouseup', this.handleDragEnd, true); + window.addEventListener('touchend', this.handleDragEnd, true); + window.addEventListener('mousemove', this.handleDrag, true); + } + detachDragEndListener() { + window.removeEventListener('mouseup', this.handleDragEnd, true); + window.removeEventListener('touchend', this.handleDragEnd, true); + window.removeEventListener('mousemove', this.handleDrag, true); + } + handleSlideDrag(e) { + var { + slideMoveStartX, + startX, + endX, + scaleValues + } = this.state; + if (scaleValues == null) { + return; + } + var { + x, + width, + travellerWidth, + startIndex, + endIndex, + onChange, + data, + gap + } = this.props; + var delta = e.pageX - slideMoveStartX; + if (delta > 0) { + delta = Math.min(delta, x + width - travellerWidth - endX, x + width - travellerWidth - startX); + } else if (delta < 0) { + delta = Math.max(delta, x - startX, x - endX); + } + var newIndex = getIndex({ + startX: startX + delta, + endX: endX + delta, + data, + gap, + scaleValues + }); + if ((newIndex.startIndex !== startIndex || newIndex.endIndex !== endIndex) && onChange) { + onChange(newIndex); + } + this.setState({ + startX: startX + delta, + endX: endX + delta, + slideMoveStartX: e.pageX + }); + } + handleTravellerDragStart(id, e) { + var event = isTouch(e) ? e.changedTouches[0] : e; + if (event == null) { + return; + } + this.setState({ + isSlideMoving: false, + isTravellerMoving: true, + movingTravellerId: id, + brushMoveStartX: event.pageX + }); + this.attachDragEndListener(); + } + handleTravellerMove(e) { + var { + brushMoveStartX, + movingTravellerId, + endX, + startX, + scaleValues + } = this.state; + if (movingTravellerId == null || scaleValues == null) { + return; + } + var prevValue = this.state[movingTravellerId]; + var { + x, + width, + travellerWidth, + onChange, + gap, + data + } = this.props; + var params = { + startX: this.state.startX, + endX: this.state.endX, + data, + gap, + scaleValues + }; + var delta = e.pageX - brushMoveStartX; + if (delta > 0) { + delta = Math.min(delta, x + width - travellerWidth - prevValue); + } else if (delta < 0) { + delta = Math.max(delta, x - prevValue); + } + params[movingTravellerId] = prevValue + delta; + var newIndex = getIndex(params); + var { + startIndex, + endIndex + } = newIndex; + var isFullGap = () => { + var lastIndex = data.length - 1; + if (movingTravellerId === 'startX' && (endX > startX ? startIndex % gap === 0 : endIndex % gap === 0) || endX < startX && endIndex === lastIndex || movingTravellerId === 'endX' && (endX > startX ? endIndex % gap === 0 : startIndex % gap === 0) || endX > startX && endIndex === lastIndex) { + return true; + } + return false; + }; + this.setState( + // @ts-expect-error not sure why typescript is not happy with this, partial update is fine in React + { + [movingTravellerId]: prevValue + delta, + brushMoveStartX: e.pageX + }, () => { + if (onChange) { + if (isFullGap()) { + onChange(newIndex); + } + } + }); + } + render() { + var { + data, + className, + children, + x, + y, + dy, + width, + height, + alwaysShowText, + fill, + stroke, + startIndex, + endIndex, + travellerWidth, + tickFormatter, + dataKey, + padding + } = this.props; + var { + startX, + endX, + isTextActive, + isSlideMoving, + isTravellerMoving, + isTravellerFocused + } = this.state; + if (!data || !data.length || !isNumber(x) || !isNumber(y) || !isNumber(width) || !isNumber(height) || width <= 0 || height <= 0) { + return null; + } + var layerClass = clsx('recharts-brush', className); + var style = generatePrefixStyle('userSelect', 'none'); + var calculatedY = y + (dy !== null && dy !== void 0 ? dy : 0); + return /*#__PURE__*/React.createElement(Layer, { + className: layerClass, + onMouseLeave: this.handleLeaveWrapper, + onTouchMove: this.handleTouchMove, + style: style + }, /*#__PURE__*/React.createElement(Background, { + x: x, + y: calculatedY, + width: width, + height: height, + fill: fill, + stroke: stroke + }), /*#__PURE__*/React.createElement(PanoramaContextProvider, null, /*#__PURE__*/React.createElement(Panorama, { + x: x, + y: calculatedY, + width: width, + height: height, + data: data, + padding: padding + }, children)), /*#__PURE__*/React.createElement(Slide, { + y: calculatedY, + height: height, + stroke: stroke, + travellerWidth: travellerWidth, + startX: startX, + endX: endX, + onMouseEnter: this.handleEnterSlideOrTraveller, + onMouseLeave: this.handleLeaveSlideOrTraveller, + onMouseDown: this.handleSlideDragStart, + onTouchStart: this.handleSlideDragStart + }), /*#__PURE__*/React.createElement(TravellerLayer, { + travellerX: startX, + id: "startX", + otherProps: _objectSpread(_objectSpread({}, this.props), {}, { + y: calculatedY + }), + onMouseEnter: this.handleEnterSlideOrTraveller, + onMouseLeave: this.handleLeaveSlideOrTraveller, + onMouseDown: this.travellerDragStartHandlers.startX, + onTouchStart: this.travellerDragStartHandlers.startX, + onTravellerMoveKeyboard: this.handleTravellerMoveKeyboard, + onFocus: () => { + this.setState({ + isTravellerFocused: true + }); + }, + onBlur: () => { + this.setState({ + isTravellerFocused: false + }); + } + }), /*#__PURE__*/React.createElement(TravellerLayer, { + travellerX: endX, + id: "endX", + otherProps: _objectSpread(_objectSpread({}, this.props), {}, { + y: calculatedY + }), + onMouseEnter: this.handleEnterSlideOrTraveller, + onMouseLeave: this.handleLeaveSlideOrTraveller, + onMouseDown: this.travellerDragStartHandlers.endX, + onTouchStart: this.travellerDragStartHandlers.endX, + onTravellerMoveKeyboard: this.handleTravellerMoveKeyboard, + onFocus: () => { + this.setState({ + isTravellerFocused: true + }); + }, + onBlur: () => { + this.setState({ + isTravellerFocused: false + }); + } + }), (isTextActive || isSlideMoving || isTravellerMoving || isTravellerFocused || alwaysShowText) && /*#__PURE__*/React.createElement(BrushText, { + startIndex: startIndex, + endIndex: endIndex, + y: calculatedY, + height: height, + travellerWidth: travellerWidth, + stroke: stroke, + tickFormatter: tickFormatter, + dataKey: dataKey, + data: data, + startX: startX, + endX: endX + })); + } +} +function BrushInternal(props) { + var dispatch = useAppDispatch(); + var chartData = useChartData(); + var dataIndexes = useDataIndex(); + var onChangeFromContext = useContext(BrushUpdateDispatchContext); + var onChangeFromProps = props.onChange; + var { + startIndex: startIndexFromProps, + endIndex: endIndexFromProps + } = props; + useEffect(() => { + // start and end index can be controlled from props, and we need them to stay up-to-date in the Redux state too + dispatch(setDataStartEndIndexes({ + startIndex: startIndexFromProps, + endIndex: endIndexFromProps + })); + }, [dispatch, endIndexFromProps, startIndexFromProps]); + useBrushChartSynchronisation(); + var onChange = useCallback(nextState => { + if (dataIndexes == null) { + return; + } + var { + startIndex, + endIndex + } = dataIndexes; + if (nextState.startIndex !== startIndex || nextState.endIndex !== endIndex) { + onChangeFromContext === null || onChangeFromContext === void 0 || onChangeFromContext(nextState); + onChangeFromProps === null || onChangeFromProps === void 0 || onChangeFromProps(nextState); + dispatch(setDataStartEndIndexes(nextState)); + } + }, [onChangeFromProps, onChangeFromContext, dispatch, dataIndexes]); + var brushDimensions = useAppSelector(selectBrushDimensions); + if (brushDimensions == null || dataIndexes == null || chartData == null || !chartData.length) { + return null; + } + var { + startIndex, + endIndex + } = dataIndexes; + var { + x, + y, + width + } = brushDimensions; + var contextProperties = { + data: chartData, + x, + y, + width, + startIndex, + endIndex, + onChange + }; + return /*#__PURE__*/React.createElement(BrushWithState, _extends({}, props, contextProperties, { + startIndexControlledFromProps: startIndexFromProps !== null && startIndexFromProps !== void 0 ? startIndexFromProps : undefined, + endIndexControlledFromProps: endIndexFromProps !== null && endIndexFromProps !== void 0 ? endIndexFromProps : undefined + })); +} +function BrushSettingsDispatcher(props) { + var dispatch = useAppDispatch(); + useEffect(() => { + dispatch(setBrushSettings(props)); + return () => { + dispatch(setBrushSettings(null)); + }; + }, [dispatch, props]); + return null; +} +export var defaultBrushProps = { + height: 40, + travellerWidth: 5, + gap: 1, + fill: '#fff', + stroke: '#666', + padding: { + top: 1, + right: 1, + bottom: 1, + left: 1 + }, + leaveTimeOut: 1000, + alwaysShowText: false +}; + +/** + * Renders a scrollbar that allows the user to zoom and pan in the chart along its XAxis. + * It also allows you to render a small overview of the chart inside the brush that is always visible + * and shows the full data set so that the user can see where they are zoomed in. + * + * If a chart is synchronized with other charts using the `syncId` prop on the chart, + * the brush will also synchronize the zooming and panning between all synchronized charts. + * + * @see {@link https://recharts.github.io/en-US/examples/BrushBarChart/ BarChart with Brush} + * @see {@link https://recharts.github.io/en-US/examples/SynchronizedLineChart/ Synchronized Brush} + * + * @consumes CartesianChartContext + */ +export function Brush(outsideProps) { + var props = resolveDefaultProps(outsideProps, defaultBrushProps); + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BrushSettingsDispatcher, { + height: props.height, + x: props.x, + y: props.y, + width: props.width, + padding: props.padding + }), /*#__PURE__*/React.createElement(BrushInternal, props)); +} +Brush.displayName = 'Brush'; Index: node_modules/recharts/es6/cartesian/CartesianAxis.js =================================================================== --- node_modules/recharts/es6/cartesian/CartesianAxis.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/cartesian/CartesianAxis.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,447 @@ +var _excluded = ["axisLine", "width", "height", "className", "hide", "ticks", "axisType"]; +function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } +function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +/** + * @fileOverview Cartesian Axis + */ +import * as React from 'react'; +import { useState, useRef, useCallback, forwardRef, useImperativeHandle } from 'react'; +import get from 'es-toolkit/compat/get'; +import { clsx } from 'clsx'; +import { Layer } from '../container/Layer'; +import { Text } from '../component/Text'; +import { CartesianLabelContextProvider, CartesianLabelFromLabelProp } from '../component/Label'; +import { isNumber } from '../util/DataUtils'; +import { adaptEventsOfChild } from '../util/types'; +import { getTicks } from './getTicks'; +import { svgPropertiesNoEvents, svgPropertiesNoEventsFromUnknown } from '../util/svgPropertiesNoEvents'; +import { getCalculatedYAxisWidth } from '../util/YAxisUtils'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +import { ZIndexLayer } from '../zIndex/ZIndexLayer'; +import { DefaultZIndexes } from '../zIndex/DefaultZIndexes'; +import { getClassNameFromUnknown } from '../util/getClassNameFromUnknown'; + +/** The orientation of the axis in correspondence to the chart */ + +/** A unit to be appended to a value */ + +/** The formatter function of tick */ + +export var defaultCartesianAxisProps = { + x: 0, + y: 0, + width: 0, + height: 0, + viewBox: { + x: 0, + y: 0, + width: 0, + height: 0 + }, + // The orientation of axis + orientation: 'bottom', + // The ticks + ticks: [], + stroke: '#666', + tickLine: true, + axisLine: true, + tick: true, + mirror: false, + minTickGap: 5, + // The width or height of tick + tickSize: 6, + tickMargin: 2, + interval: 'preserveEnd', + zIndex: DefaultZIndexes.axis +}; + +/* + * `viewBox` and `scale` are SVG attributes. + * Recharts however - unfortunately - has its own attributes named `viewBox` and `scale` + * that are completely different data shape and different purpose. + */ + +function AxisLine(axisLineProps) { + var { + x, + y, + width, + height, + orientation, + mirror, + axisLine, + otherSvgProps + } = axisLineProps; + if (!axisLine) { + return null; + } + var props = _objectSpread(_objectSpread(_objectSpread({}, otherSvgProps), svgPropertiesNoEvents(axisLine)), {}, { + fill: 'none' + }); + if (orientation === 'top' || orientation === 'bottom') { + var needHeight = +(orientation === 'top' && !mirror || orientation === 'bottom' && mirror); + props = _objectSpread(_objectSpread({}, props), {}, { + x1: x, + y1: y + needHeight * height, + x2: x + width, + y2: y + needHeight * height + }); + } else { + var needWidth = +(orientation === 'left' && !mirror || orientation === 'right' && mirror); + props = _objectSpread(_objectSpread({}, props), {}, { + x1: x + needWidth * width, + y1: y, + x2: x + needWidth * width, + y2: y + height + }); + } + return /*#__PURE__*/React.createElement("line", _extends({}, props, { + className: clsx('recharts-cartesian-axis-line', get(axisLine, 'className')) + })); +} + +/** + * Calculate the coordinates of endpoints in ticks. + * @param data The data of a simple tick. + * @param x The x-coordinate of the axis. + * @param y The y-coordinate of the axis. + * @param width The width of the axis. + * @param height The height of the axis. + * @param orientation The orientation of the axis. + * @param tickSize The length of the tick line. + * @param mirror If true, the ticks are mirrored. + * @param tickMargin The margin between the tick line and the tick text. + * @returns An object with `line` and `tick` coordinates. + * `line` is the coordinates for the tick line, and `tick` is the coordinate for the tick text. + */ +function getTickLineCoord(data, x, y, width, height, orientation, tickSize, mirror, tickMargin) { + var x1, x2, y1, y2, tx, ty; + var sign = mirror ? -1 : 1; + var finalTickSize = data.tickSize || tickSize; + var tickCoord = isNumber(data.tickCoord) ? data.tickCoord : data.coordinate; + switch (orientation) { + case 'top': + x1 = x2 = data.coordinate; + y2 = y + +!mirror * height; + y1 = y2 - sign * finalTickSize; + ty = y1 - sign * tickMargin; + tx = tickCoord; + break; + case 'left': + y1 = y2 = data.coordinate; + x2 = x + +!mirror * width; + x1 = x2 - sign * finalTickSize; + tx = x1 - sign * tickMargin; + ty = tickCoord; + break; + case 'right': + y1 = y2 = data.coordinate; + x2 = x + +mirror * width; + x1 = x2 + sign * finalTickSize; + tx = x1 + sign * tickMargin; + ty = tickCoord; + break; + default: + x1 = x2 = data.coordinate; + y2 = y + +mirror * height; + y1 = y2 + sign * finalTickSize; + ty = y1 + sign * tickMargin; + tx = tickCoord; + break; + } + return { + line: { + x1, + y1, + x2, + y2 + }, + tick: { + x: tx, + y: ty + } + }; +} + +/** + * @param orientation The orientation of the axis. + * @param mirror If true, the ticks are mirrored. + * @returns The text anchor of the tick. + */ +function getTickTextAnchor(orientation, mirror) { + switch (orientation) { + case 'left': + return mirror ? 'start' : 'end'; + case 'right': + return mirror ? 'end' : 'start'; + default: + return 'middle'; + } +} + +/** + * @param orientation The orientation of the axis. + * @param mirror If true, the ticks are mirrored. + * @returns The vertical text anchor of the tick. + */ +function getTickVerticalAnchor(orientation, mirror) { + switch (orientation) { + case 'left': + case 'right': + return 'middle'; + case 'top': + return mirror ? 'start' : 'end'; + default: + return mirror ? 'end' : 'start'; + } +} +function TickItem(props) { + var { + option, + tickProps, + value + } = props; + var tickItem; + var combinedClassName = clsx(tickProps.className, 'recharts-cartesian-axis-tick-value'); + if (/*#__PURE__*/React.isValidElement(option)) { + // @ts-expect-error element cloning is not typed + tickItem = /*#__PURE__*/React.cloneElement(option, _objectSpread(_objectSpread({}, tickProps), {}, { + className: combinedClassName + })); + } else if (typeof option === 'function') { + tickItem = option(_objectSpread(_objectSpread({}, tickProps), {}, { + className: combinedClassName + })); + } else { + var className = 'recharts-cartesian-axis-tick-value'; + if (typeof option !== 'boolean') { + className = clsx(className, getClassNameFromUnknown(option)); + } + tickItem = /*#__PURE__*/React.createElement(Text, _extends({}, tickProps, { + className: className + }), value); + } + return tickItem; +} +var Ticks = /*#__PURE__*/forwardRef((props, ref) => { + var { + ticks = [], + tick, + tickLine, + stroke, + tickFormatter, + unit, + padding, + tickTextProps, + orientation, + mirror, + x, + y, + width, + height, + tickSize, + tickMargin, + fontSize, + letterSpacing, + getTicksConfig, + events, + axisType + } = props; + // @ts-expect-error some properties are optional in props but required in getTicks + var finalTicks = getTicks(_objectSpread(_objectSpread({}, getTicksConfig), {}, { + ticks + }), fontSize, letterSpacing); + var textAnchor = getTickTextAnchor(orientation, mirror); + var verticalAnchor = getTickVerticalAnchor(orientation, mirror); + var axisProps = svgPropertiesNoEvents(getTicksConfig); + var customTickProps = svgPropertiesNoEventsFromUnknown(tick); + var tickLinePropsObject = {}; + if (typeof tickLine === 'object') { + tickLinePropsObject = tickLine; + } + var tickLineProps = _objectSpread(_objectSpread({}, axisProps), {}, { + fill: 'none' + }, tickLinePropsObject); + var tickLineCoords = finalTicks.map(entry => _objectSpread({ + entry + }, getTickLineCoord(entry, x, y, width, height, orientation, tickSize, mirror, tickMargin))); + var tickLines = tickLineCoords.map(_ref => { + var { + entry, + line: lineCoord + } = _ref; + return /*#__PURE__*/React.createElement(Layer, { + className: "recharts-cartesian-axis-tick", + key: "tick-".concat(entry.value, "-").concat(entry.coordinate, "-").concat(entry.tickCoord) + }, tickLine && /*#__PURE__*/React.createElement("line", _extends({}, tickLineProps, lineCoord, { + className: clsx('recharts-cartesian-axis-tick-line', get(tickLine, 'className')) + }))); + }); + var tickLabels = tickLineCoords.map((_ref2, i) => { + var _ref3, _tickTextProps$angle; + var { + entry, + tick: tickCoord + } = _ref2; + // @ts-expect-error we're not checking that padding and orientation types are in sync + var tickProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({ + verticalAnchor + }, axisProps), {}, { + textAnchor, + stroke: 'none', + fill: stroke + }, tickCoord), {}, { + index: i, + payload: entry, + visibleTicksCount: finalTicks.length, + tickFormatter, + padding + }, tickTextProps), {}, { + angle: (_ref3 = (_tickTextProps$angle = tickTextProps === null || tickTextProps === void 0 ? void 0 : tickTextProps.angle) !== null && _tickTextProps$angle !== void 0 ? _tickTextProps$angle : axisProps.angle) !== null && _ref3 !== void 0 ? _ref3 : 0 + }); + + // @ts-expect-error customTickProps is contributing unknown props which we don't type properly + var finalTickProps = _objectSpread(_objectSpread({}, tickProps), customTickProps); + return /*#__PURE__*/React.createElement(Layer, _extends({ + className: "recharts-cartesian-axis-tick-label", + key: "tick-label-".concat(entry.value, "-").concat(entry.coordinate, "-").concat(entry.tickCoord) + }, adaptEventsOfChild(events, entry, i)), tick && /*#__PURE__*/React.createElement(TickItem, { + option: tick, + tickProps: finalTickProps, + value: "".concat(typeof tickFormatter === 'function' ? tickFormatter(entry.value, i) : entry.value).concat(unit || '') + })); + }); + return /*#__PURE__*/React.createElement("g", { + className: "recharts-cartesian-axis-ticks recharts-".concat(axisType, "-ticks") + }, tickLabels.length > 0 && /*#__PURE__*/React.createElement(ZIndexLayer, { + zIndex: DefaultZIndexes.label + }, /*#__PURE__*/React.createElement("g", { + className: "recharts-cartesian-axis-tick-labels recharts-".concat(axisType, "-tick-labels"), + ref: ref + }, tickLabels)), tickLines.length > 0 && /*#__PURE__*/React.createElement("g", { + className: "recharts-cartesian-axis-tick-lines recharts-".concat(axisType, "-tick-lines") + }, tickLines)); +}); +var CartesianAxisComponent = /*#__PURE__*/forwardRef((props, ref) => { + var { + axisLine, + width, + height, + className, + hide, + ticks, + axisType + } = props, + rest = _objectWithoutProperties(props, _excluded); + var [fontSize, setFontSize] = useState(''); + var [letterSpacing, setLetterSpacing] = useState(''); + var tickRefs = useRef(null); + useImperativeHandle(ref, () => ({ + getCalculatedWidth: () => { + var _props$labelRef; + return getCalculatedYAxisWidth({ + ticks: tickRefs.current, + label: (_props$labelRef = props.labelRef) === null || _props$labelRef === void 0 ? void 0 : _props$labelRef.current, + labelGapWithTick: 5, + tickSize: props.tickSize, + tickMargin: props.tickMargin + }); + } + })); + var layerRef = useCallback(el => { + if (el) { + var tickNodes = el.getElementsByClassName('recharts-cartesian-axis-tick-value'); + tickRefs.current = tickNodes; + var tick = tickNodes[0]; + if (tick) { + var computedStyle = window.getComputedStyle(tick); + var calculatedFontSize = computedStyle.fontSize; + var calculatedLetterSpacing = computedStyle.letterSpacing; + if (calculatedFontSize !== fontSize || calculatedLetterSpacing !== letterSpacing) { + setFontSize(calculatedFontSize); + setLetterSpacing(calculatedLetterSpacing); + } + } + } + }, [fontSize, letterSpacing]); + if (hide) { + return null; + } + + /* + * This is different condition from what validateWidthHeight is doing; + * the CartesianAxis does allow width or height to be undefined. + */ + if (width != null && width <= 0 || height != null && height <= 0) { + return null; + } + return /*#__PURE__*/React.createElement(ZIndexLayer, { + zIndex: props.zIndex + }, /*#__PURE__*/React.createElement(Layer, { + className: clsx('recharts-cartesian-axis', className) + }, /*#__PURE__*/React.createElement(AxisLine, { + x: props.x, + y: props.y, + width: width, + height: height, + orientation: props.orientation, + mirror: props.mirror, + axisLine: axisLine, + otherSvgProps: svgPropertiesNoEvents(props) + }), /*#__PURE__*/React.createElement(Ticks, { + ref: layerRef, + axisType: axisType, + events: rest, + fontSize: fontSize, + getTicksConfig: props, + height: props.height, + letterSpacing: letterSpacing, + mirror: props.mirror, + orientation: props.orientation, + padding: props.padding, + stroke: props.stroke, + tick: props.tick, + tickFormatter: props.tickFormatter, + tickLine: props.tickLine, + tickMargin: props.tickMargin, + tickSize: props.tickSize, + tickTextProps: props.tickTextProps, + ticks: ticks, + unit: props.unit, + width: props.width, + x: props.x, + y: props.y + }), /*#__PURE__*/React.createElement(CartesianLabelContextProvider, { + x: props.x, + y: props.y, + width: props.width, + height: props.height, + lowerWidth: props.width, + upperWidth: props.width + }, /*#__PURE__*/React.createElement(CartesianLabelFromLabelProp, { + label: props.label, + labelRef: props.labelRef + }), props.children))); +}); + +/** + * @deprecated + * + * This component is not meant to be used directly in app code. + * Use XAxis or YAxis instead. + * + * Starting from Recharts v4.0 we will make this component internal only. + */ +export var CartesianAxis = /*#__PURE__*/React.forwardRef((outsideProps, ref) => { + var props = resolveDefaultProps(outsideProps, defaultCartesianAxisProps); + return /*#__PURE__*/React.createElement(CartesianAxisComponent, _extends({}, props, { + ref: ref + })); +}); +CartesianAxis.displayName = 'CartesianAxis'; Index: node_modules/recharts/es6/cartesian/CartesianGrid.js =================================================================== --- node_modules/recharts/es6/cartesian/CartesianGrid.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/cartesian/CartesianGrid.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,411 @@ +var _excluded = ["x1", "y1", "x2", "y2", "key"], + _excluded2 = ["offset"], + _excluded3 = ["xAxisId", "yAxisId"], + _excluded4 = ["xAxisId", "yAxisId"]; +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } +function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } +import * as React from 'react'; +import { warn } from '../util/LogUtils'; +import { isNumber } from '../util/DataUtils'; +import { getCoordinatesOfGrid, getTicksOfAxis } from '../util/ChartUtils'; +import { getTicks } from './getTicks'; +import { defaultCartesianAxisProps } from './CartesianAxis'; +import { useChartHeight, useChartWidth, useOffsetInternal } from '../context/chartLayoutContext'; +import { selectAxisPropsNeededForCartesianGridTicksGenerator } from '../state/selectors/axisSelectors'; +import { useAppSelector } from '../state/hooks'; +import { useIsPanorama } from '../context/PanoramaContext'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents'; +import { isPositiveNumber } from '../util/isWellBehavedNumber'; +import { ZIndexLayer } from '../zIndex/ZIndexLayer'; +import { DefaultZIndexes } from '../zIndex/DefaultZIndexes'; + +/** + * The { + var { + fill + } = props; + if (!fill || fill === 'none') { + return null; + } + var { + fillOpacity, + x, + y, + width, + height, + ry + } = props; + return /*#__PURE__*/React.createElement("rect", { + x: x, + y: y, + ry: ry, + width: width, + height: height, + stroke: "none", + fill: fill, + fillOpacity: fillOpacity, + className: "recharts-cartesian-grid-bg" + }); +}; +function LineItem(_ref) { + var { + option, + lineItemProps + } = _ref; + var lineItem; + if (/*#__PURE__*/React.isValidElement(option)) { + // @ts-expect-error typescript does not see the props type when cloning an element + lineItem = /*#__PURE__*/React.cloneElement(option, lineItemProps); + } else if (typeof option === 'function') { + lineItem = option(lineItemProps); + } else { + var _svgPropertiesNoEvent; + var { + x1, + y1, + x2, + y2, + key + } = lineItemProps, + others = _objectWithoutProperties(lineItemProps, _excluded); + var _ref2 = (_svgPropertiesNoEvent = svgPropertiesNoEvents(others)) !== null && _svgPropertiesNoEvent !== void 0 ? _svgPropertiesNoEvent : {}, + { + offset: __ + } = _ref2, + restOfFilteredProps = _objectWithoutProperties(_ref2, _excluded2); + lineItem = /*#__PURE__*/React.createElement("line", _extends({}, restOfFilteredProps, { + x1: x1, + y1: y1, + x2: x2, + y2: y2, + fill: "none", + key: key + })); + } + return lineItem; +} +function HorizontalGridLines(props) { + var { + x, + width, + horizontal = true, + horizontalPoints + } = props; + if (!horizontal || !horizontalPoints || !horizontalPoints.length) { + return null; + } + var { + xAxisId, + yAxisId + } = props, + otherLineItemProps = _objectWithoutProperties(props, _excluded3); + var items = horizontalPoints.map((entry, i) => { + var lineItemProps = _objectSpread(_objectSpread({}, otherLineItemProps), {}, { + x1: x, + y1: entry, + x2: x + width, + y2: entry, + key: "line-".concat(i), + index: i + }); + return /*#__PURE__*/React.createElement(LineItem, { + key: "line-".concat(i), + option: horizontal, + lineItemProps: lineItemProps + }); + }); + return /*#__PURE__*/React.createElement("g", { + className: "recharts-cartesian-grid-horizontal" + }, items); +} +function VerticalGridLines(props) { + var { + y, + height, + vertical = true, + verticalPoints + } = props; + if (!vertical || !verticalPoints || !verticalPoints.length) { + return null; + } + var { + xAxisId, + yAxisId + } = props, + otherLineItemProps = _objectWithoutProperties(props, _excluded4); + var items = verticalPoints.map((entry, i) => { + var lineItemProps = _objectSpread(_objectSpread({}, otherLineItemProps), {}, { + x1: entry, + y1: y, + x2: entry, + y2: y + height, + key: "line-".concat(i), + index: i + }); + return /*#__PURE__*/React.createElement(LineItem, { + option: vertical, + lineItemProps: lineItemProps, + key: "line-".concat(i) + }); + }); + return /*#__PURE__*/React.createElement("g", { + className: "recharts-cartesian-grid-vertical" + }, items); +} +function HorizontalStripes(props) { + var { + horizontalFill, + fillOpacity, + x, + y, + width, + height, + horizontalPoints, + horizontal = true + } = props; + if (!horizontal || !horizontalFill || !horizontalFill.length || horizontalPoints == null) { + return null; + } + var roundedSortedHorizontalPoints = horizontalPoints.map(e => Math.round(e + y - y)).sort((a, b) => a - b); + // Why is this condition `!==` instead of `<=` ? + if (y !== roundedSortedHorizontalPoints[0]) { + roundedSortedHorizontalPoints.unshift(0); + } + var items = roundedSortedHorizontalPoints.map((entry, i) => { + // Why do we strip only the last stripe if it is invisible, and not all invisible stripes? + var nextPoint = roundedSortedHorizontalPoints[i + 1]; + var lastStripe = nextPoint == null; + var lineHeight = lastStripe ? y + height - entry : nextPoint - entry; + if (lineHeight <= 0) { + return null; + } + var colorIndex = i % horizontalFill.length; + return /*#__PURE__*/React.createElement("rect", { + key: "react-".concat(i), + y: entry, + x: x, + height: lineHeight, + width: width, + stroke: "none", + fill: horizontalFill[colorIndex], + fillOpacity: fillOpacity, + className: "recharts-cartesian-grid-bg" + }); + }); + return /*#__PURE__*/React.createElement("g", { + className: "recharts-cartesian-gridstripes-horizontal" + }, items); +} +function VerticalStripes(props) { + var { + vertical = true, + verticalFill, + fillOpacity, + x, + y, + width, + height, + verticalPoints + } = props; + if (!vertical || !verticalFill || !verticalFill.length) { + return null; + } + var roundedSortedVerticalPoints = verticalPoints.map(e => Math.round(e + x - x)).sort((a, b) => a - b); + if (x !== roundedSortedVerticalPoints[0]) { + roundedSortedVerticalPoints.unshift(0); + } + var items = roundedSortedVerticalPoints.map((entry, i) => { + var nextPoint = roundedSortedVerticalPoints[i + 1]; + var lastStripe = nextPoint == null; + var lineWidth = lastStripe ? x + width - entry : nextPoint - entry; + if (lineWidth <= 0) { + return null; + } + var colorIndex = i % verticalFill.length; + return /*#__PURE__*/React.createElement("rect", { + key: "react-".concat(i), + x: entry, + y: y, + width: lineWidth, + height: height, + stroke: "none", + fill: verticalFill[colorIndex], + fillOpacity: fillOpacity, + className: "recharts-cartesian-grid-bg" + }); + }); + return /*#__PURE__*/React.createElement("g", { + className: "recharts-cartesian-gridstripes-vertical" + }, items); +} +var defaultVerticalCoordinatesGenerator = (_ref3, syncWithTicks) => { + var { + xAxis, + width, + height, + offset + } = _ref3; + return getCoordinatesOfGrid(getTicks(_objectSpread(_objectSpread(_objectSpread({}, defaultCartesianAxisProps), xAxis), {}, { + ticks: getTicksOfAxis(xAxis, true), + viewBox: { + x: 0, + y: 0, + width, + height + } + })), offset.left, offset.left + offset.width, syncWithTicks); +}; +var defaultHorizontalCoordinatesGenerator = (_ref4, syncWithTicks) => { + var { + yAxis, + width, + height, + offset + } = _ref4; + return getCoordinatesOfGrid(getTicks(_objectSpread(_objectSpread(_objectSpread({}, defaultCartesianAxisProps), yAxis), {}, { + ticks: getTicksOfAxis(yAxis, true), + viewBox: { + x: 0, + y: 0, + width, + height + } + })), offset.top, offset.top + offset.height, syncWithTicks); +}; +export var defaultCartesianGridProps = { + horizontal: true, + vertical: true, + // The ordinates of horizontal grid lines + horizontalPoints: [], + // The abscissas of vertical grid lines + verticalPoints: [], + stroke: '#ccc', + fill: 'none', + // The fill of colors of grid lines + verticalFill: [], + horizontalFill: [], + xAxisId: 0, + yAxisId: 0, + syncWithTicks: false, + zIndex: DefaultZIndexes.grid +}; + +/** + * Renders background grid with lines and fill colors in a Cartesian chart. + * + * @consumes CartesianChartContext + */ +export function CartesianGrid(props) { + var chartWidth = useChartWidth(); + var chartHeight = useChartHeight(); + var offset = useOffsetInternal(); + var propsIncludingDefaults = _objectSpread(_objectSpread({}, resolveDefaultProps(props, defaultCartesianGridProps)), {}, { + x: isNumber(props.x) ? props.x : offset.left, + y: isNumber(props.y) ? props.y : offset.top, + width: isNumber(props.width) ? props.width : offset.width, + height: isNumber(props.height) ? props.height : offset.height + }); + var { + xAxisId, + yAxisId, + x, + y, + width, + height, + syncWithTicks, + horizontalValues, + verticalValues + } = propsIncludingDefaults; + var isPanorama = useIsPanorama(); + var xAxis = useAppSelector(state => selectAxisPropsNeededForCartesianGridTicksGenerator(state, 'xAxis', xAxisId, isPanorama)); + var yAxis = useAppSelector(state => selectAxisPropsNeededForCartesianGridTicksGenerator(state, 'yAxis', yAxisId, isPanorama)); + if (!isPositiveNumber(width) || !isPositiveNumber(height) || !isNumber(x) || !isNumber(y)) { + return null; + } + + /* + * verticalCoordinatesGenerator and horizontalCoordinatesGenerator are defined + * outside the propsIncludingDefaults because they were never part of the original props + * and they were never passed as a prop down to horizontal/vertical custom elements. + * If we add these two to propsIncludingDefaults then we are changing public API. + * Not a bad thing per se but also not necessary. + */ + var verticalCoordinatesGenerator = propsIncludingDefaults.verticalCoordinatesGenerator || defaultVerticalCoordinatesGenerator; + var horizontalCoordinatesGenerator = propsIncludingDefaults.horizontalCoordinatesGenerator || defaultHorizontalCoordinatesGenerator; + var { + horizontalPoints, + verticalPoints + } = propsIncludingDefaults; + + // No horizontal points are specified + if ((!horizontalPoints || !horizontalPoints.length) && typeof horizontalCoordinatesGenerator === 'function') { + var isHorizontalValues = horizontalValues && horizontalValues.length; + var generatorResult = horizontalCoordinatesGenerator({ + yAxis: yAxis ? _objectSpread(_objectSpread({}, yAxis), {}, { + ticks: isHorizontalValues ? horizontalValues : yAxis.ticks + }) : undefined, + width: chartWidth !== null && chartWidth !== void 0 ? chartWidth : width, + height: chartHeight !== null && chartHeight !== void 0 ? chartHeight : height, + offset + }, isHorizontalValues ? true : syncWithTicks); + warn(Array.isArray(generatorResult), "horizontalCoordinatesGenerator should return Array but instead it returned [".concat(typeof generatorResult, "]")); + if (Array.isArray(generatorResult)) { + horizontalPoints = generatorResult; + } + } + + // No vertical points are specified + if ((!verticalPoints || !verticalPoints.length) && typeof verticalCoordinatesGenerator === 'function') { + var isVerticalValues = verticalValues && verticalValues.length; + var _generatorResult = verticalCoordinatesGenerator({ + xAxis: xAxis ? _objectSpread(_objectSpread({}, xAxis), {}, { + ticks: isVerticalValues ? verticalValues : xAxis.ticks + }) : undefined, + width: chartWidth !== null && chartWidth !== void 0 ? chartWidth : width, + height: chartHeight !== null && chartHeight !== void 0 ? chartHeight : height, + offset + }, isVerticalValues ? true : syncWithTicks); + warn(Array.isArray(_generatorResult), "verticalCoordinatesGenerator should return Array but instead it returned [".concat(typeof _generatorResult, "]")); + if (Array.isArray(_generatorResult)) { + verticalPoints = _generatorResult; + } + } + return /*#__PURE__*/React.createElement(ZIndexLayer, { + zIndex: propsIncludingDefaults.zIndex + }, /*#__PURE__*/React.createElement("g", { + className: "recharts-cartesian-grid" + }, /*#__PURE__*/React.createElement(Background, { + fill: propsIncludingDefaults.fill, + fillOpacity: propsIncludingDefaults.fillOpacity, + x: propsIncludingDefaults.x, + y: propsIncludingDefaults.y, + width: propsIncludingDefaults.width, + height: propsIncludingDefaults.height, + ry: propsIncludingDefaults.ry + }), /*#__PURE__*/React.createElement(HorizontalStripes, _extends({}, propsIncludingDefaults, { + horizontalPoints: horizontalPoints + })), /*#__PURE__*/React.createElement(VerticalStripes, _extends({}, propsIncludingDefaults, { + verticalPoints: verticalPoints + })), /*#__PURE__*/React.createElement(HorizontalGridLines, _extends({}, propsIncludingDefaults, { + offset: offset, + horizontalPoints: horizontalPoints, + xAxis: xAxis, + yAxis: yAxis + })), /*#__PURE__*/React.createElement(VerticalGridLines, _extends({}, propsIncludingDefaults, { + offset: offset, + verticalPoints: verticalPoints, + xAxis: xAxis, + yAxis: yAxis + })))); +} +CartesianGrid.displayName = 'CartesianGrid'; Index: node_modules/recharts/es6/cartesian/ErrorBar.js =================================================================== --- node_modules/recharts/es6/cartesian/ErrorBar.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/cartesian/ErrorBar.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,257 @@ +var _excluded = ["direction", "width", "dataKey", "isAnimationActive", "animationBegin", "animationDuration", "animationEasing"]; +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } +function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } +/** + * @fileOverview Render a group of error bar + */ +import * as React from 'react'; +import { Layer } from '../container/Layer'; +import { ReportErrorBarSettings, useErrorBarContext } from '../context/ErrorBarContext'; +import { useXAxis, useYAxis } from '../hooks'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents'; +import { useChartLayout } from '../context/chartLayoutContext'; +import { CSSTransitionAnimate } from '../animation/CSSTransitionAnimate'; +import { ZIndexLayer } from '../zIndex/ZIndexLayer'; +import { DefaultZIndexes } from '../zIndex/DefaultZIndexes'; + +/** + * So usually the direction is decided by the chart layout. + * Horizontal layout means error bars are vertical means direction=y + * Vertical layout means error bars are horizontal means direction=x + * + * Except! In Scatter chart, error bars can go both ways. + * + * So this property is only ever used in Scatter chart, and ignored elsewhere. + */ + +/** + * External ErrorBar props, visible for users of the library + */ + +/** + * Props after defaults, and required props have been applied. + */ + +function ErrorBarImpl(props) { + var { + direction, + width, + dataKey, + isAnimationActive, + animationBegin, + animationDuration, + animationEasing + } = props, + others = _objectWithoutProperties(props, _excluded); + var svgProps = svgPropertiesNoEvents(others); + var { + data, + dataPointFormatter, + xAxisId, + yAxisId, + errorBarOffset: offset + } = useErrorBarContext(); + var xAxis = useXAxis(xAxisId); + var yAxis = useYAxis(yAxisId); + if ((xAxis === null || xAxis === void 0 ? void 0 : xAxis.scale) == null || (yAxis === null || yAxis === void 0 ? void 0 : yAxis.scale) == null || data == null) { + return null; + } + + // ErrorBar requires type number XAxis, why? + if (direction === 'x' && xAxis.type !== 'number') { + return null; + } + var errorBars = data.map((entry, dataIndex) => { + var { + x, + y, + value, + errorVal + } = dataPointFormatter(entry, dataKey, direction); + if (!errorVal || x == null || y == null) { + return null; + } + var lineCoordinates = []; + var lowBound, highBound; + if (Array.isArray(errorVal)) { + var [low, high] = errorVal; + if (low == null || high == null) { + return null; + } + lowBound = low; + highBound = high; + } else { + lowBound = highBound = errorVal; + } + if (direction === 'x') { + // error bar for horizontal charts, the y is fixed, x is a range value + var { + scale + } = xAxis; + var yMid = y + offset; + var yMin = yMid + width; + var yMax = yMid - width; + var xMin = scale.map(value - lowBound); + var xMax = scale.map(value + highBound); + if (xMin != null && xMax != null) { + // the right line of |--| + lineCoordinates.push({ + x1: xMax, + y1: yMin, + x2: xMax, + y2: yMax + }); + // the middle line of |--| + lineCoordinates.push({ + x1: xMin, + y1: yMid, + x2: xMax, + y2: yMid + }); + // the left line of |--| + lineCoordinates.push({ + x1: xMin, + y1: yMin, + x2: xMin, + y2: yMax + }); + } + } else if (direction === 'y') { + // error bar for horizontal charts, the x is fixed, y is a range value + var { + scale: _scale + } = yAxis; + var xMid = x + offset; + var _xMin = xMid - width; + var _xMax = xMid + width; + var _yMin = _scale.map(value - lowBound); + var _yMax = _scale.map(value + highBound); + if (_yMin != null && _yMax != null) { + // the top line + lineCoordinates.push({ + x1: _xMin, + y1: _yMax, + x2: _xMax, + y2: _yMax + }); + // the middle line + lineCoordinates.push({ + x1: xMid, + y1: _yMin, + x2: xMid, + y2: _yMax + }); + // the bottom line + lineCoordinates.push({ + x1: _xMin, + y1: _yMin, + x2: _xMax, + y2: _yMin + }); + } + } + var scaleDirection = direction === 'x' ? 'scaleX' : 'scaleY'; + var transformOrigin = "".concat(x + offset, "px ").concat(y + offset, "px"); + return /*#__PURE__*/React.createElement(Layer, _extends({ + className: "recharts-errorBar", + key: "bar-".concat(x, "-").concat(y, "-").concat(value, "-").concat(dataIndex) + }, svgProps), lineCoordinates.map((c, lineIndex) => { + var lineStyle = isAnimationActive ? { + transformOrigin + } : undefined; + return /*#__PURE__*/React.createElement(CSSTransitionAnimate, { + animationId: "error-bar-".concat(direction, "_").concat(c.x1, "-").concat(c.x2, "-").concat(c.y1, "-").concat(c.y2), + from: "".concat(scaleDirection, "(0)"), + to: "".concat(scaleDirection, "(1)"), + attributeName: "transform", + begin: animationBegin, + easing: animationEasing, + isActive: isAnimationActive, + duration: animationDuration, + key: "errorbar-".concat(dataIndex, "-").concat(c.x1, "-").concat(c.y1, "-").concat(c.x2, "-").concat(c.y2, "-").concat(lineIndex) + }, style => /*#__PURE__*/React.createElement("line", _extends({}, c, { + style: _objectSpread(_objectSpread({}, lineStyle), style) + }))); + })); + }); + return /*#__PURE__*/React.createElement(Layer, { + className: "recharts-errorBars" + }, errorBars); +} +function useErrorBarDirection(directionFromProps) { + var layout = useChartLayout(); + if (directionFromProps != null) { + return directionFromProps; + } + if (layout != null) { + return layout === 'horizontal' ? 'y' : 'x'; + } + return 'x'; +} +export var errorBarDefaultProps = { + stroke: 'black', + strokeWidth: 1.5, + width: 5, + offset: 0, + isAnimationActive: true, + animationBegin: 0, + animationDuration: 400, + animationEasing: 'ease-in-out', + zIndex: DefaultZIndexes.line +}; + +/** + * ErrorBar renders whiskers to represent error margins on a chart. + * + * It must be a child of a graphical element. + * + * ErrorBar expects data in one of the following forms: + * - Symmetric error bars: a single error value representing both lower and upper bounds. + * - Asymmetric error bars: an array of two values representing lower and upper bounds separately. First value is the lower bound, second value is the upper bound. + * + * The values provided are relative to the main data value. + * For example, if the main data value is 10 and the error value is 2, + * the error bar will extend from 8 to 12 for symmetric error bars. + * + * In other words, what ErrorBar will render is: + * - For symmetric error bars: [value - errorVal, value + errorVal] + * - For asymmetric error bars: [value - errorVal[0], value + errorVal[1]] + * + * In stacked or ranged Bar charts, ErrorBar will use the higher data value + * as the reference point for calculating the error bar positions. + * + * @consumes ErrorBarContext + */ +export function ErrorBar(outsideProps) { + var realDirection = useErrorBarDirection(outsideProps.direction); + var props = resolveDefaultProps(outsideProps, errorBarDefaultProps); + var { + width, + isAnimationActive, + animationBegin, + animationDuration, + animationEasing, + zIndex + } = props; + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReportErrorBarSettings, { + dataKey: props.dataKey, + direction: realDirection + }), /*#__PURE__*/React.createElement(ZIndexLayer, { + zIndex: zIndex + }, /*#__PURE__*/React.createElement(ErrorBarImpl, _extends({}, props, { + direction: realDirection, + width: width, + isAnimationActive: isAnimationActive, + animationBegin: animationBegin, + animationDuration: animationDuration, + animationEasing: animationEasing + })))); +} +ErrorBar.displayName = 'ErrorBar'; Index: node_modules/recharts/es6/cartesian/Funnel.js =================================================================== --- node_modules/recharts/es6/cartesian/Funnel.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/cartesian/Funnel.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,473 @@ +var _excluded = ["onMouseEnter", "onClick", "onMouseLeave", "shape", "activeShape"], + _excluded2 = ["id"], + _excluded3 = ["stroke", "fill", "legendType", "hide", "isAnimationActive", "animationBegin", "animationDuration", "animationEasing", "nameKey", "lastShapeType", "id"], + _excluded4 = ["id"]; +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } +function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +import * as React from 'react'; +import { useCallback, useMemo, useRef, useState } from 'react'; +import omit from 'es-toolkit/compat/omit'; +import { clsx } from 'clsx'; +import { selectActiveIndex } from '../state/selectors/selectors'; +import { useAppSelector } from '../state/hooks'; +import { Layer } from '../container/Layer'; +import { CartesianLabelListContextProvider, LabelListFromLabelProp } from '../component/LabelList'; +import { getPercentValue, interpolate } from '../util/DataUtils'; +import { getValueByDataKey } from '../util/ChartUtils'; +import { adaptEventsOfChild } from '../util/types'; +import { FunnelTrapezoid } from '../util/FunnelUtils'; +import { useMouseClickItemDispatch, useMouseEnterItemDispatch, useMouseLeaveItemDispatch } from '../context/tooltipContext'; +import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings'; +import { selectFunnelTrapezoids } from '../state/selectors/funnelSelectors'; +import { findAllByType } from '../util/ReactUtils'; +import { Cell } from '../component/Cell'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +import { usePlotArea } from '../hooks'; +import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents'; +import { JavascriptAnimate } from '../animation/JavascriptAnimate'; +import { useAnimationId } from '../util/useAnimationId'; +import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId'; + +/** + * Internal props, combination of external props + defaultProps + private Recharts state + */ + +/** + * External props, intended for end users to fill in + */ + +var SetFunnelTooltipEntrySettings = /*#__PURE__*/React.memo(_ref => { + var { + dataKey, + nameKey, + stroke, + strokeWidth, + fill, + name, + hide, + tooltipType, + data, + trapezoids, + id + } = _ref; + var tooltipEntrySettings = { + dataDefinedOnItem: data, + getPosition: index => { + var _trapezoids$Number; + return (_trapezoids$Number = trapezoids[Number(index)]) === null || _trapezoids$Number === void 0 ? void 0 : _trapezoids$Number.tooltipPosition; + }, + settings: { + stroke, + strokeWidth, + fill, + dataKey, + name, + nameKey, + hide, + type: tooltipType, + color: fill, + unit: '', + // Funnel does not have unit, why? + graphicalItemId: id + } + }; + return /*#__PURE__*/React.createElement(SetTooltipEntrySettings, { + tooltipEntrySettings: tooltipEntrySettings + }); +}); +function FunnelLabelListProvider(_ref2) { + var { + showLabels, + trapezoids, + children + } = _ref2; + var labelListEntries = useMemo(() => { + if (!showLabels) { + return undefined; + } + return trapezoids === null || trapezoids === void 0 ? void 0 : trapezoids.map(entry => { + var viewBox = entry.labelViewBox; + return _objectSpread(_objectSpread({}, viewBox), {}, { + value: entry.name, + payload: entry.payload, + parentViewBox: entry.parentViewBox, + viewBox, + fill: entry.fill + }); + }); + }, [showLabels, trapezoids]); + return /*#__PURE__*/React.createElement(CartesianLabelListContextProvider, { + value: labelListEntries + }, children); +} +function FunnelTrapezoids(props) { + var { + trapezoids, + allOtherFunnelProps + } = props; + var activeItemIndex = useAppSelector(state => selectActiveIndex(state, 'item', state.tooltip.settings.trigger, undefined)); + var { + onMouseEnter: onMouseEnterFromProps, + onClick: onItemClickFromProps, + onMouseLeave: onMouseLeaveFromProps, + shape, + activeShape + } = allOtherFunnelProps, + restOfAllOtherProps = _objectWithoutProperties(allOtherFunnelProps, _excluded); + var onMouseEnterFromContext = useMouseEnterItemDispatch(onMouseEnterFromProps, allOtherFunnelProps.dataKey, allOtherFunnelProps.id); + var onMouseLeaveFromContext = useMouseLeaveItemDispatch(onMouseLeaveFromProps); + var onClickFromContext = useMouseClickItemDispatch(onItemClickFromProps, allOtherFunnelProps.dataKey, allOtherFunnelProps.id); + return /*#__PURE__*/React.createElement(React.Fragment, null, trapezoids.map((entry, i) => { + var isActiveIndex = Boolean(activeShape) && activeItemIndex === String(i); + var trapezoidOptions = isActiveIndex ? activeShape : shape; + var _entry$option$isActiv = _objectSpread(_objectSpread({}, entry), {}, { + option: trapezoidOptions, + isActive: isActiveIndex, + stroke: entry.stroke + }), + { + id + } = _entry$option$isActiv, + trapezoidProps = _objectWithoutProperties(_entry$option$isActiv, _excluded2); + return /*#__PURE__*/React.createElement(Layer, _extends({ + key: "trapezoid-".concat(entry === null || entry === void 0 ? void 0 : entry.x, "-").concat(entry === null || entry === void 0 ? void 0 : entry.y, "-").concat(entry === null || entry === void 0 ? void 0 : entry.name, "-").concat(entry === null || entry === void 0 ? void 0 : entry.value), + className: "recharts-funnel-trapezoid" + }, adaptEventsOfChild(restOfAllOtherProps, entry, i), { + // @ts-expect-error the types need a bit of attention + onMouseEnter: onMouseEnterFromContext(entry, i) + // @ts-expect-error the types need a bit of attention + , + onMouseLeave: onMouseLeaveFromContext(entry, i) + // @ts-expect-error the types need a bit of attention + , + onClick: onClickFromContext(entry, i) + }), /*#__PURE__*/React.createElement(FunnelTrapezoid, trapezoidProps)); + })); +} +function TrapezoidsWithAnimation(_ref3) { + var { + previousTrapezoidsRef, + props + } = _ref3; + var { + trapezoids, + isAnimationActive, + animationBegin, + animationDuration, + animationEasing, + onAnimationEnd, + onAnimationStart + } = props; + var prevTrapezoids = previousTrapezoidsRef.current; + var [isAnimating, setIsAnimating] = useState(false); + var showLabels = !isAnimating; + var animationId = useAnimationId(trapezoids, 'recharts-funnel-'); + var handleAnimationEnd = useCallback(() => { + if (typeof onAnimationEnd === 'function') { + onAnimationEnd(); + } + setIsAnimating(false); + }, [onAnimationEnd]); + var handleAnimationStart = useCallback(() => { + if (typeof onAnimationStart === 'function') { + onAnimationStart(); + } + setIsAnimating(true); + }, [onAnimationStart]); + return /*#__PURE__*/React.createElement(FunnelLabelListProvider, { + showLabels: showLabels, + trapezoids: trapezoids + }, /*#__PURE__*/React.createElement(JavascriptAnimate, { + animationId: animationId, + begin: animationBegin, + duration: animationDuration, + isActive: isAnimationActive, + easing: animationEasing, + key: animationId, + onAnimationStart: handleAnimationStart, + onAnimationEnd: handleAnimationEnd + }, t => { + var stepData = t === 1 ? trapezoids : trapezoids.map((entry, index) => { + var prev = prevTrapezoids && prevTrapezoids[index]; + if (prev) { + return _objectSpread(_objectSpread({}, entry), {}, { + x: interpolate(prev.x, entry.x, t), + y: interpolate(prev.y, entry.y, t), + upperWidth: interpolate(prev.upperWidth, entry.upperWidth, t), + lowerWidth: interpolate(prev.lowerWidth, entry.lowerWidth, t), + height: interpolate(prev.height, entry.height, t) + }); + } + return _objectSpread(_objectSpread({}, entry), {}, { + x: interpolate(entry.x + entry.upperWidth / 2, entry.x, t), + y: interpolate(entry.y + entry.height / 2, entry.y, t), + upperWidth: interpolate(0, entry.upperWidth, t), + lowerWidth: interpolate(0, entry.lowerWidth, t), + height: interpolate(0, entry.height, t) + }); + }); + if (t > 0) { + // eslint-disable-next-line no-param-reassign + previousTrapezoidsRef.current = stepData; + } + return /*#__PURE__*/React.createElement(Layer, null, /*#__PURE__*/React.createElement(FunnelTrapezoids, { + trapezoids: stepData, + allOtherFunnelProps: props + })); + }), /*#__PURE__*/React.createElement(LabelListFromLabelProp, { + label: props.label + }), props.children); +} +function RenderTrapezoids(props) { + var previousTrapezoidsRef = useRef(undefined); + return /*#__PURE__*/React.createElement(TrapezoidsWithAnimation, { + props: props, + previousTrapezoidsRef: previousTrapezoidsRef + }); +} +var getRealWidthHeight = (customWidth, offset) => { + var { + width, + height, + left, + top + } = offset; + var realWidth = getPercentValue(customWidth, width, width); + return { + realWidth, + realHeight: height, + offsetX: left, + offsetY: top + }; +}; +export var defaultFunnelProps = { + animationBegin: 400, + animationDuration: 1500, + animationEasing: 'ease', + fill: '#808080', + hide: false, + isAnimationActive: 'auto', + lastShapeType: 'triangle', + legendType: 'rect', + nameKey: 'name', + reversed: false, + stroke: '#fff' +}; +function FunnelImpl(props) { + var plotArea = usePlotArea(); + var { + stroke, + fill, + legendType, + hide, + isAnimationActive, + animationBegin, + animationDuration, + animationEasing, + nameKey, + lastShapeType, + id + } = props, + everythingElse = _objectWithoutProperties(props, _excluded3); + var presentationProps = svgPropertiesNoEvents(props); + var cells = findAllByType(props.children, Cell); + var funnelSettings = useMemo(() => ({ + dataKey: props.dataKey, + nameKey, + data: props.data, + tooltipType: props.tooltipType, + lastShapeType, + reversed: props.reversed, + customWidth: props.width, + cells, + presentationProps, + id + }), [props.dataKey, nameKey, props.data, props.tooltipType, lastShapeType, props.reversed, props.width, cells, presentationProps, id]); + var trapezoids = useAppSelector(state => selectFunnelTrapezoids(state, funnelSettings)); + if (hide || !trapezoids || !trapezoids.length || !plotArea) { + return null; + } + var { + height, + width + } = plotArea; + var layerClass = clsx('recharts-trapezoids', props.className); + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetFunnelTooltipEntrySettings, { + dataKey: props.dataKey, + nameKey: props.nameKey, + stroke: props.stroke, + strokeWidth: props.strokeWidth, + fill: props.fill, + name: props.name, + hide: props.hide, + tooltipType: props.tooltipType, + data: props.data, + trapezoids: trapezoids, + id: id + }), /*#__PURE__*/React.createElement(Layer, { + className: layerClass + }, /*#__PURE__*/React.createElement(RenderTrapezoids, _extends({}, everythingElse, { + id: id, + stroke: stroke, + fill: fill, + nameKey: nameKey, + lastShapeType: lastShapeType, + animationBegin: animationBegin, + animationDuration: animationDuration, + animationEasing: animationEasing, + isAnimationActive: isAnimationActive, + hide: hide, + legendType: legendType, + height: height, + width: width, + trapezoids: trapezoids + })))); +} +export function computeFunnelTrapezoids(_ref4) { + var { + dataKey, + nameKey, + displayedData, + tooltipType, + lastShapeType, + reversed, + offset, + customWidth, + graphicalItemId + } = _ref4; + var { + realHeight, + realWidth, + offsetX, + offsetY + } = getRealWidthHeight(customWidth, offset); + var values = displayedData.map(entry => { + var val = getValueByDataKey(entry, dataKey, 0); + return typeof val === 'number' ? val : 0; + }); + var maxValue = Math.max.apply(null, values); + var len = displayedData.length; + var rowHeight = realHeight / len; + var parentViewBox = { + x: offset.left, + y: offset.top, + width: offset.width, + height: offset.height + }; + var trapezoids = displayedData.map((entry, i) => { + // @ts-expect-error getValueByDataKey does not validate the output type + var rawVal = getValueByDataKey(entry, dataKey, 0); + var name = String(getValueByDataKey(entry, nameKey, i)); + var val = rawVal; + var nextVal; + if (i !== len - 1) { + var nextDataValue = getValueByDataKey(displayedData[i + 1], dataKey, 0); + if (typeof nextDataValue === 'number') { + nextVal = nextDataValue; + } else if (Array.isArray(nextDataValue)) { + var [first, second] = nextDataValue; + if (typeof first === 'number') { + val = first; + } + if (typeof second === 'number') { + nextVal = second; + } + } + } else if (rawVal instanceof Array && rawVal.length === 2) { + var [_first, _second] = rawVal; + if (typeof _first === 'number') { + val = _first; + } + if (typeof _second === 'number') { + nextVal = _second; + } + } else if (lastShapeType === 'rectangle') { + nextVal = val; + } else { + nextVal = 0; + } + + // @ts-expect-error this is a problem if we have ranged values because `val` can be an array + var x = (maxValue - val) * realWidth / (2 * maxValue) + offsetX; + var y = rowHeight * i + offsetY; + // @ts-expect-error getValueByDataKey does not validate the output type + var upperWidth = val / maxValue * realWidth; + // @ts-expect-error nextVal could be an array + var lowerWidth = nextVal / maxValue * realWidth; + var tooltipPayload = [{ + name, + value: val, + payload: entry, + dataKey, + type: tooltipType, + graphicalItemId + }]; + var tooltipPosition = { + x: x + upperWidth / 2, + y: y + rowHeight / 2 + }; + var trapezoidViewBox = { + x, + y, + upperWidth, + lowerWidth, + width: Math.max(upperWidth, lowerWidth), + height: rowHeight + }; + return _objectSpread(_objectSpread(_objectSpread({}, trapezoidViewBox), {}, { + name, + val, + tooltipPayload, + tooltipPosition + }, entry != null && typeof entry === 'object' ? omit(entry, ['width']) : {}), {}, { + payload: entry, + parentViewBox, + labelViewBox: trapezoidViewBox + }); + }); + if (reversed) { + trapezoids = trapezoids.map((entry, index) => { + var reversedViewBox = { + x: entry.x - (entry.lowerWidth - entry.upperWidth) / 2, + y: entry.y - index * rowHeight + (len - 1 - index) * rowHeight, + upperWidth: entry.lowerWidth, + lowerWidth: entry.upperWidth, + width: Math.max(entry.lowerWidth, entry.upperWidth), + height: rowHeight + }; + return _objectSpread(_objectSpread(_objectSpread({}, entry), reversedViewBox), {}, { + tooltipPosition: _objectSpread(_objectSpread({}, entry.tooltipPosition), {}, { + y: entry.y - index * rowHeight + (len - 1 - index) * rowHeight + rowHeight / 2 + }), + labelViewBox: reversedViewBox + }); + }); + } + return trapezoids; +} + +/** + * @consumes CartesianViewBoxContext + * @provides LabelListContext + * @provides CellReader + */ +export function Funnel(outsideProps) { + var _resolveDefaultProps = resolveDefaultProps(outsideProps, defaultFunnelProps), + { + id: externalId + } = _resolveDefaultProps, + props = _objectWithoutProperties(_resolveDefaultProps, _excluded4); + return /*#__PURE__*/React.createElement(RegisterGraphicalItemId, { + id: externalId, + type: "funnel" + }, id => /*#__PURE__*/React.createElement(FunnelImpl, _extends({}, props, { + id: id + }))); +} +Funnel.displayName = 'Funnel'; Index: node_modules/recharts/es6/cartesian/GraphicalItemClipPath.js =================================================================== --- node_modules/recharts/es6/cartesian/GraphicalItemClipPath.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/cartesian/GraphicalItemClipPath.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,47 @@ +import * as React from 'react'; +import { useAppSelector } from '../state/hooks'; +import { implicitXAxis, implicitYAxis, selectXAxisSettings, selectYAxisSettings } from '../state/selectors/axisSelectors'; +import { usePlotArea } from '../hooks'; +export function useNeedsClip(xAxisId, yAxisId) { + var _xAxis$allowDataOverf, _yAxis$allowDataOverf; + var xAxis = useAppSelector(state => selectXAxisSettings(state, xAxisId)); + var yAxis = useAppSelector(state => selectYAxisSettings(state, yAxisId)); + var needClipX = (_xAxis$allowDataOverf = xAxis === null || xAxis === void 0 ? void 0 : xAxis.allowDataOverflow) !== null && _xAxis$allowDataOverf !== void 0 ? _xAxis$allowDataOverf : implicitXAxis.allowDataOverflow; + var needClipY = (_yAxis$allowDataOverf = yAxis === null || yAxis === void 0 ? void 0 : yAxis.allowDataOverflow) !== null && _yAxis$allowDataOverf !== void 0 ? _yAxis$allowDataOverf : implicitYAxis.allowDataOverflow; + var needClip = needClipX || needClipY; + return { + needClip, + needClipX, + needClipY + }; +} +export function GraphicalItemClipPath(_ref) { + var { + xAxisId, + yAxisId, + clipPathId + } = _ref; + var plotArea = usePlotArea(); + var { + needClipX, + needClipY, + needClip + } = useNeedsClip(xAxisId, yAxisId); + if (!needClip || !plotArea) { + return null; + } + var { + x, + y, + width, + height + } = plotArea; + return /*#__PURE__*/React.createElement("clipPath", { + id: "clipPath-".concat(clipPathId) + }, /*#__PURE__*/React.createElement("rect", { + x: needClipX ? x : x - width / 2, + y: needClipY ? y : y - height / 2, + width: needClipX ? width : width * 2, + height: needClipY ? height : height * 2 + })); +} Index: node_modules/recharts/es6/cartesian/Line.js =================================================================== --- node_modules/recharts/es6/cartesian/Line.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/cartesian/Line.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,686 @@ +var _excluded = ["id"], + _excluded2 = ["type", "layout", "connectNulls", "needClip", "shape"], + _excluded3 = ["activeDot", "animateNewValues", "animationBegin", "animationDuration", "animationEasing", "connectNulls", "dot", "hide", "isAnimationActive", "label", "legendType", "xAxisId", "yAxisId", "id"]; +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } +function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } +import * as React from 'react'; +import { Component, useCallback, useMemo, useRef, useState } from 'react'; +import { clsx } from 'clsx'; +import { Layer } from '../container/Layer'; +import { CartesianLabelListContextProvider, LabelListFromLabelProp } from '../component/LabelList'; +import { Dots } from '../component/Dots'; +import { interpolate, isNullish, noop } from '../util/DataUtils'; +import { isClipDot } from '../util/ReactUtils'; +import { getCateCoordinateOfLine, getTooltipNameProp, getValueByDataKey } from '../util/ChartUtils'; +import { ActivePoints } from '../component/ActivePoints'; +import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings'; +import { SetErrorBarContext } from '../context/ErrorBarContext'; +import { GraphicalItemClipPath, useNeedsClip } from './GraphicalItemClipPath'; +import { useChartLayout } from '../context/chartLayoutContext'; +import { useIsPanorama } from '../context/PanoramaContext'; +import { selectLinePoints } from '../state/selectors/lineSelectors'; +import { useAppSelector } from '../state/hooks'; +import { SetLegendPayload } from '../state/SetLegendPayload'; +import { useAnimationId } from '../util/useAnimationId'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +import { usePlotArea } from '../hooks'; +import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId'; +import { SetCartesianGraphicalItem } from '../state/SetGraphicalItem'; +import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents'; +import { JavascriptAnimate } from '../animation/JavascriptAnimate'; +import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents'; +import { getRadiusAndStrokeWidthFromDot } from '../util/getRadiusAndStrokeWidthFromDot'; +import { Shape } from '../util/ActiveShapeUtils'; +import { ZIndexLayer } from '../zIndex/ZIndexLayer'; +import { DefaultZIndexes } from '../zIndex/DefaultZIndexes'; +import { propsAreEqual } from '../util/propsAreEqual'; + +/** + * Internal props, combination of external props + defaultProps + private Recharts state + */ + +/** + * External props, intended for end users to fill in + */ + +/** + * Because of naming conflict, we are forced to ignore certain (valid) SVG attributes. + */ + +var computeLegendPayloadFromAreaData = props => { + var { + dataKey, + name, + stroke, + legendType, + hide + } = props; + return [{ + inactive: hide, + dataKey, + type: legendType, + color: stroke, + value: getTooltipNameProp(name, dataKey), + payload: props + }]; +}; +var SetLineTooltipEntrySettings = /*#__PURE__*/React.memo(_ref => { + var { + dataKey, + data, + stroke, + strokeWidth, + fill, + name, + hide, + unit, + tooltipType, + id + } = _ref; + var tooltipEntrySettings = { + dataDefinedOnItem: data, + getPosition: noop, + settings: { + stroke, + strokeWidth, + fill, + dataKey, + nameKey: undefined, + name: getTooltipNameProp(name, dataKey), + hide, + type: tooltipType, + color: stroke, + unit, + graphicalItemId: id + } + }; + return /*#__PURE__*/React.createElement(SetTooltipEntrySettings, { + tooltipEntrySettings: tooltipEntrySettings + }); +}); +var generateSimpleStrokeDasharray = (totalLength, length) => { + return "".concat(length, "px ").concat(totalLength - length, "px"); +}; +function repeat(lines, count) { + var linesUnit = lines.length % 2 !== 0 ? [...lines, 0] : lines; + var result = []; + for (var i = 0; i < count; ++i) { + result = [...result, ...linesUnit]; + } + return result; +} +var getStrokeDasharray = (length, totalLength, lines) => { + var lineLength = lines.reduce((pre, next) => pre + next); + + // if lineLength is 0 return the default when no strokeDasharray is provided + if (!lineLength) { + return generateSimpleStrokeDasharray(totalLength, length); + } + var count = Math.floor(length / lineLength); + var remainLength = length % lineLength; + var restLength = totalLength - length; + var remainLines = []; + for (var i = 0, sum = 0; i < lines.length; sum += (_lines$i = lines[i]) !== null && _lines$i !== void 0 ? _lines$i : 0, ++i) { + var _lines$i; + var lineValue = lines[i]; + if (lineValue != null && sum + lineValue > remainLength) { + remainLines = [...lines.slice(0, i), remainLength - sum]; + break; + } + } + var emptyLines = remainLines.length % 2 === 0 ? [0, restLength] : [restLength]; + return [...repeat(lines, count), ...remainLines, ...emptyLines].map(line => "".concat(line, "px")).join(', '); +}; +function LineDotsWrapper(_ref2) { + var { + clipPathId, + points, + props + } = _ref2; + var { + dot, + dataKey, + needClip + } = props; + + /* + * Exclude ID from the props passed to the Dots component + * because then the ID would be applied to multiple dots, and it would no longer be unique. + */ + var { + id + } = props, + propsWithoutId = _objectWithoutProperties(props, _excluded); + var lineProps = svgPropertiesNoEvents(propsWithoutId); + return /*#__PURE__*/React.createElement(Dots, { + points: points, + dot: dot, + className: "recharts-line-dots", + dotClassName: "recharts-line-dot", + dataKey: dataKey, + baseProps: lineProps, + needClip: needClip, + clipPathId: clipPathId + }); +} +function LineLabelListProvider(_ref3) { + var { + showLabels, + children, + points + } = _ref3; + var labelListEntries = useMemo(() => { + return points === null || points === void 0 ? void 0 : points.map(point => { + var _point$x, _point$y; + var viewBox = { + x: (_point$x = point.x) !== null && _point$x !== void 0 ? _point$x : 0, + y: (_point$y = point.y) !== null && _point$y !== void 0 ? _point$y : 0, + width: 0, + lowerWidth: 0, + upperWidth: 0, + height: 0 + }; + return _objectSpread(_objectSpread({}, viewBox), {}, { + value: point.value, + payload: point.payload, + viewBox, + /* + * Line is not passing parentViewBox to the LabelList so the labels can escape - looks like a bug, should we pass parentViewBox? + * Or should this just be the root chart viewBox? + */ + parentViewBox: undefined, + fill: undefined + }); + }); + }, [points]); + return /*#__PURE__*/React.createElement(CartesianLabelListContextProvider, { + value: showLabels ? labelListEntries : undefined + }, children); +} +function StaticCurve(_ref4) { + var { + clipPathId, + pathRef, + points, + strokeDasharray, + props + } = _ref4; + var { + type, + layout, + connectNulls, + needClip, + shape + } = props, + others = _objectWithoutProperties(props, _excluded2); + var curveProps = _objectSpread(_objectSpread({}, svgPropertiesAndEvents(others)), {}, { + fill: 'none', + className: 'recharts-line-curve', + clipPath: needClip ? "url(#clipPath-".concat(clipPathId, ")") : undefined, + points, + type, + layout, + connectNulls, + strokeDasharray: strokeDasharray !== null && strokeDasharray !== void 0 ? strokeDasharray : props.strokeDasharray + }); + return /*#__PURE__*/React.createElement(React.Fragment, null, (points === null || points === void 0 ? void 0 : points.length) > 1 && /*#__PURE__*/React.createElement(Shape, _extends({ + shapeType: "curve", + option: shape + }, curveProps, { + pathRef: pathRef + })), /*#__PURE__*/React.createElement(LineDotsWrapper, { + points: points, + clipPathId: clipPathId, + props: props + })); +} +function getTotalLength(mainCurve) { + try { + return mainCurve && mainCurve.getTotalLength && mainCurve.getTotalLength() || 0; + } catch (_unused) { + return 0; + } +} +function CurveWithAnimation(_ref5) { + var { + clipPathId, + props, + pathRef, + previousPointsRef, + longestAnimatedLengthRef + } = _ref5; + var { + points, + strokeDasharray, + isAnimationActive, + animationBegin, + animationDuration, + animationEasing, + animateNewValues, + width, + height, + onAnimationEnd, + onAnimationStart + } = props; + var prevPoints = previousPointsRef.current; + var animationId = useAnimationId(points, 'recharts-line-'); + var animationIdRef = useRef(animationId); + var [isAnimating, setIsAnimating] = useState(false); + var showLabels = !isAnimating; + var handleAnimationEnd = useCallback(() => { + if (typeof onAnimationEnd === 'function') { + onAnimationEnd(); + } + setIsAnimating(false); + }, [onAnimationEnd]); + var handleAnimationStart = useCallback(() => { + if (typeof onAnimationStart === 'function') { + onAnimationStart(); + } + setIsAnimating(true); + }, [onAnimationStart]); + var totalLength = getTotalLength(pathRef.current); + /* + * Here we want to detect if the length animation has been interrupted. + * For that we keep a reference to the furthest length that has been animated. + * + * And then, to keep things smooth, we add to it the current length that is being animated right now. + * + * If we did Math.max then it makes the length animation "pause" but we want to keep it smooth + * so in case we have some "leftover" length from the previous animation we add it to the current length. + * + * This is not perfect because the animation changes speed due to easing. The default easing is 'ease' which is not linear + * and makes it stand out. But it's good enough I suppose. + * If we want to fix it then we need to keep track of multiple animations and their easing and timings. + * + * If you want to see this in action, try to change the dataKey of the line chart while the initial animation is running. + * The Line begins with zero length and slowly grows to the full length. While this growth is in progress, + * change the dataKey and the Line will continue growing from where it has grown so far. + * + * This is for the case when new animation triggers. When that happens we get new points, everything re-renders, + * and we get fresh new state in this component and use the ref stored above. + * + * In case when we get render without new animation - for example when opacity changes, or color changes, + * then the animationId remains the same, and we do not update the starting point. + * See https://github.com/recharts/recharts/issues/6044 + */ + var startingPointRef = useRef(0); + if (animationIdRef.current !== animationId) { + startingPointRef.current = longestAnimatedLengthRef.current; + animationIdRef.current = animationId; + } + var startingPoint = startingPointRef.current; + return /*#__PURE__*/React.createElement(LineLabelListProvider, { + points: points, + showLabels: showLabels + }, props.children, /*#__PURE__*/React.createElement(JavascriptAnimate, { + animationId: animationId, + begin: animationBegin, + duration: animationDuration, + isActive: isAnimationActive, + easing: animationEasing, + onAnimationEnd: handleAnimationEnd, + onAnimationStart: handleAnimationStart, + key: animationId + }, t => { + var lengthInterpolated = interpolate(startingPoint, totalLength + startingPoint, t); + var curLength = Math.min(lengthInterpolated, totalLength); + var currentStrokeDasharray; + if (isAnimationActive) { + if (strokeDasharray) { + var lines = "".concat(strokeDasharray).split(/[,\s]+/gim).map(num => parseFloat(num)); + currentStrokeDasharray = getStrokeDasharray(curLength, totalLength, lines); + } else { + currentStrokeDasharray = generateSimpleStrokeDasharray(totalLength, curLength); + } + } else { + currentStrokeDasharray = strokeDasharray == null ? undefined : String(strokeDasharray); + } + + /* + * Here it is important to wait a little bit with updating the previousPointsRef + * before the animation has a time to initialize. + * If we set the previous pointsRef immediately, we set it before the Legend height it calculated + * and before pathRef is set. + * If that happens, the Line will re-render again after Legend had reported its height + * which will start a new animation with the previous points as the starting point + * which gives the effect of the Line animating slightly upwards (where the animation distance equals the Legend height). + * Waiting for t > 0 is indirect but good enough to ensure that the Legend height is calculated and animation works properly. + * + * Total length similarly is calculated from the pathRef. We should not update the previousPointsRef + * before the pathRef is set, otherwise we will have a wrong total length. + */ + if (t > 0 && totalLength > 0) { + // eslint-disable-next-line no-param-reassign + previousPointsRef.current = points; + /* + * totalLength is set from a ref and is not updated in the first tick of the animation. + * It defaults to zero which is exactly what we want here because we want to grow from zero, + * however the same happens when the data change. + * + * In that case we want to remember the previous length and continue from there, and only animate the shape. + * + * Therefore the totalLength > 0 check. + * + * The Animate is about to fire handleAnimationStart which will update the state + * and cause a re-render and read a new proper totalLength which will be used in the next tick + * and update the longestAnimatedLengthRef. + * + * Why Math.max? Sometimes the curve goes through a smaller length than previously recorded. + * If we just set it to curLength, then the next animation would start from a smaller length + * which looks weird. So we keep the longest length ever reached and then animate from there. + */ + // eslint-disable-next-line no-param-reassign + longestAnimatedLengthRef.current = Math.max(longestAnimatedLengthRef.current, curLength); + } + if (prevPoints) { + var prevPointsDiffFactor = prevPoints.length / points.length; + var stepData = t === 1 ? points : points.map((entry, index) => { + var prevPointIndex = Math.floor(index * prevPointsDiffFactor); + if (prevPoints[prevPointIndex]) { + var prev = prevPoints[prevPointIndex]; + return _objectSpread(_objectSpread({}, entry), {}, { + x: interpolate(prev.x, entry.x, t), + y: interpolate(prev.y, entry.y, t) + }); + } + + // magic number of faking previous x and y location + if (animateNewValues) { + return _objectSpread(_objectSpread({}, entry), {}, { + x: interpolate(width * 2, entry.x, t), + y: interpolate(height / 2, entry.y, t) + }); + } + return _objectSpread(_objectSpread({}, entry), {}, { + x: entry.x, + y: entry.y + }); + }); + // eslint-disable-next-line no-param-reassign + previousPointsRef.current = stepData; + return /*#__PURE__*/React.createElement(StaticCurve, { + props: props, + points: stepData, + clipPathId: clipPathId, + pathRef: pathRef, + strokeDasharray: currentStrokeDasharray + }); + } + return /*#__PURE__*/React.createElement(StaticCurve, { + props: props, + points: points, + clipPathId: clipPathId, + pathRef: pathRef, + strokeDasharray: currentStrokeDasharray + }); + }), /*#__PURE__*/React.createElement(LabelListFromLabelProp, { + label: props.label + })); +} +function RenderCurve(_ref6) { + var { + clipPathId, + props + } = _ref6; + var previousPointsRef = useRef(null); + var longestAnimatedLengthRef = useRef(0); + var pathRef = useRef(null); + return /*#__PURE__*/React.createElement(CurveWithAnimation, { + props: props, + clipPathId: clipPathId, + previousPointsRef: previousPointsRef, + longestAnimatedLengthRef: longestAnimatedLengthRef, + pathRef: pathRef + }); +} +var errorBarDataPointFormatter = (dataPoint, dataKey) => { + var _dataPoint$x, _dataPoint$y; + return { + x: (_dataPoint$x = dataPoint.x) !== null && _dataPoint$x !== void 0 ? _dataPoint$x : undefined, + y: (_dataPoint$y = dataPoint.y) !== null && _dataPoint$y !== void 0 ? _dataPoint$y : undefined, + value: dataPoint.value, + // @ts-expect-error getValueByDataKey does not validate the output type + errorVal: getValueByDataKey(dataPoint.payload, dataKey) + }; +}; + +// eslint-disable-next-line react/prefer-stateless-function +class LineWithState extends Component { + render() { + var { + hide, + dot, + points, + className, + xAxisId, + yAxisId, + top, + left, + width, + height, + id, + needClip, + zIndex + } = this.props; + if (hide) { + return null; + } + var layerClass = clsx('recharts-line', className); + var clipPathId = id; + var { + r, + strokeWidth + } = getRadiusAndStrokeWidthFromDot(dot); + var clipDot = isClipDot(dot); + var dotSize = r * 2 + strokeWidth; + var activePointsClipPath = needClip ? "url(#clipPath-".concat(clipDot ? '' : 'dots-').concat(clipPathId, ")") : undefined; + return /*#__PURE__*/React.createElement(ZIndexLayer, { + zIndex: zIndex + }, /*#__PURE__*/React.createElement(Layer, { + className: layerClass + }, needClip && /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement(GraphicalItemClipPath, { + clipPathId: clipPathId, + xAxisId: xAxisId, + yAxisId: yAxisId + }), !clipDot && /*#__PURE__*/React.createElement("clipPath", { + id: "clipPath-dots-".concat(clipPathId) + }, /*#__PURE__*/React.createElement("rect", { + x: left - dotSize / 2, + y: top - dotSize / 2, + width: width + dotSize, + height: height + dotSize + }))), /*#__PURE__*/React.createElement(SetErrorBarContext, { + xAxisId: xAxisId, + yAxisId: yAxisId, + data: points, + dataPointFormatter: errorBarDataPointFormatter, + errorBarOffset: 0 + }, /*#__PURE__*/React.createElement(RenderCurve, { + props: this.props, + clipPathId: clipPathId + }))), /*#__PURE__*/React.createElement(ActivePoints, { + activeDot: this.props.activeDot, + points: points, + mainColor: this.props.stroke, + itemDataKey: this.props.dataKey, + clipPath: activePointsClipPath + })); + } +} +export var defaultLineProps = { + activeDot: true, + animateNewValues: true, + animationBegin: 0, + animationDuration: 1500, + animationEasing: 'ease', + connectNulls: false, + dot: true, + fill: '#fff', + hide: false, + isAnimationActive: 'auto', + label: false, + legendType: 'line', + stroke: '#3182bd', + strokeWidth: 1, + xAxisId: 0, + yAxisId: 0, + zIndex: DefaultZIndexes.line, + type: 'linear' +}; +function LineImpl(props) { + var _resolveDefaultProps = resolveDefaultProps(props, defaultLineProps), + { + activeDot, + animateNewValues, + animationBegin, + animationDuration, + animationEasing, + connectNulls, + dot, + hide, + isAnimationActive, + label, + legendType, + xAxisId, + yAxisId, + id + } = _resolveDefaultProps, + everythingElse = _objectWithoutProperties(_resolveDefaultProps, _excluded3); + var { + needClip + } = useNeedsClip(xAxisId, yAxisId); + var plotArea = usePlotArea(); + var layout = useChartLayout(); + var isPanorama = useIsPanorama(); + var points = useAppSelector(state => selectLinePoints(state, xAxisId, yAxisId, isPanorama, id)); + if (layout !== 'horizontal' && layout !== 'vertical' || points == null || plotArea == null) { + // Cannot render Line in an unsupported layout + return null; + } + var { + height, + width, + x: left, + y: top + } = plotArea; + return /*#__PURE__*/React.createElement(LineWithState, _extends({}, everythingElse, { + id: id, + connectNulls: connectNulls, + dot: dot, + activeDot: activeDot, + animateNewValues: animateNewValues, + animationBegin: animationBegin, + animationDuration: animationDuration, + animationEasing: animationEasing, + isAnimationActive: isAnimationActive, + hide: hide, + label: label, + legendType: legendType, + xAxisId: xAxisId, + yAxisId: yAxisId, + points: points, + layout: layout, + height: height, + width: width, + left: left, + top: top, + needClip: needClip + })); +} +export function computeLinePoints(_ref7) { + var { + layout, + xAxis, + yAxis, + xAxisTicks, + yAxisTicks, + dataKey, + bandSize, + displayedData + } = _ref7; + return displayedData.map((entry, index) => { + // @ts-expect-error getValueByDataKey does not validate the output type + var value = getValueByDataKey(entry, dataKey); + if (layout === 'horizontal') { + var _x = getCateCoordinateOfLine({ + axis: xAxis, + ticks: xAxisTicks, + bandSize, + entry, + index + }); + var _y = isNullish(value) ? null : yAxis.scale.map(value); + return { + x: _x, + y: _y !== null && _y !== void 0 ? _y : null, + value, + payload: entry + }; + } + var x = isNullish(value) ? null : xAxis.scale.map(value); + var y = getCateCoordinateOfLine({ + axis: yAxis, + ticks: yAxisTicks, + bandSize, + entry, + index + }); + if (x == null || y == null) { + return null; + } + return { + x, + y, + value, + payload: entry + }; + }).filter(Boolean); +} +function LineFn(outsideProps) { + var props = resolveDefaultProps(outsideProps, defaultLineProps); + var isPanorama = useIsPanorama(); + return /*#__PURE__*/React.createElement(RegisterGraphicalItemId, { + id: props.id, + type: "line" + }, id => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetLegendPayload, { + legendPayload: computeLegendPayloadFromAreaData(props) + }), /*#__PURE__*/React.createElement(SetLineTooltipEntrySettings, { + dataKey: props.dataKey, + data: props.data, + stroke: props.stroke, + strokeWidth: props.strokeWidth, + fill: props.fill, + name: props.name, + hide: props.hide, + unit: props.unit, + tooltipType: props.tooltipType, + id: id + }), /*#__PURE__*/React.createElement(SetCartesianGraphicalItem, { + type: "line", + id: id, + data: props.data, + xAxisId: props.xAxisId, + yAxisId: props.yAxisId, + zAxisId: 0, + dataKey: props.dataKey, + hide: props.hide, + isPanorama: isPanorama + }), /*#__PURE__*/React.createElement(LineImpl, _extends({}, props, { + id: id + })))); +} + +/** + * @provides LabelListContext + * @provides ErrorBarContext + * @consumes CartesianChartContext + */ +export var Line = /*#__PURE__*/React.memo(LineFn, propsAreEqual); +Line.displayName = 'Line'; Index: node_modules/recharts/es6/cartesian/ReferenceArea.js =================================================================== --- node_modules/recharts/es6/cartesian/ReferenceArea.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/cartesian/ReferenceArea.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,175 @@ +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +import * as React from 'react'; +import { useEffect } from 'react'; +import { clsx } from 'clsx'; +import { Layer } from '../container/Layer'; +import { CartesianLabelContextProvider, CartesianLabelFromLabelProp } from '../component/Label'; +import { rectWithPoints } from '../util/CartesianUtils'; +import { isNumOrStr } from '../util/DataUtils'; +import { Rectangle } from '../shape/Rectangle'; +import { addArea, removeArea } from '../state/referenceElementsSlice'; +import { useAppDispatch, useAppSelector } from '../state/hooks'; +import { selectAxisScale } from '../state/selectors/axisSelectors'; +import { useIsPanorama } from '../context/PanoramaContext'; +import { useClipPathId } from '../container/ClipPathProvider'; +import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +import { ZIndexLayer } from '../zIndex/ZIndexLayer'; +import { DefaultZIndexes } from '../zIndex/DefaultZIndexes'; +import { CartesianScaleHelperImpl } from '../util/scale/CartesianScaleHelper'; + +/* + * Omit width, height, x, y from SVGPropsAndEvents because ReferenceArea receives x1, x2, y1, y2 instead. + * The position is calculated internally instead. + */ + +var getRect = (hasX1, hasX2, hasY1, hasY2, xAxisScale, yAxisScale, props) => { + var _xAxisScale$map, _yAxisScale$map, _xAxisScale$map2, _yAxisScale$map2; + var { + x1: xValue1, + x2: xValue2, + y1: yValue1, + y2: yValue2 + } = props; + if (xAxisScale == null || yAxisScale == null) { + return null; + } + var scales = new CartesianScaleHelperImpl({ + x: xAxisScale, + y: yAxisScale + }); + var p1 = { + x: hasX1 ? (_xAxisScale$map = xAxisScale.map(xValue1, { + position: 'start' + })) !== null && _xAxisScale$map !== void 0 ? _xAxisScale$map : null : xAxisScale.rangeMin(), + y: hasY1 ? (_yAxisScale$map = yAxisScale.map(yValue1, { + position: 'start' + })) !== null && _yAxisScale$map !== void 0 ? _yAxisScale$map : null : yAxisScale.rangeMin() + }; + var p2 = { + x: hasX2 ? (_xAxisScale$map2 = xAxisScale.map(xValue2, { + position: 'end' + })) !== null && _xAxisScale$map2 !== void 0 ? _xAxisScale$map2 : null : xAxisScale.rangeMax(), + y: hasY2 ? (_yAxisScale$map2 = yAxisScale.map(yValue2, { + position: 'end' + })) !== null && _yAxisScale$map2 !== void 0 ? _yAxisScale$map2 : null : yAxisScale.rangeMax() + }; + if (props.ifOverflow === 'discard' && (!scales.isInRange(p1) || !scales.isInRange(p2))) { + return null; + } + + // @ts-expect-error we're sending nullable coordinates but rectWithPoints expects non-nullable Coordinate + return rectWithPoints(p1, p2); +}; +var renderRect = (option, props) => { + var rect; + if (/*#__PURE__*/React.isValidElement(option)) { + // @ts-expect-error element cloning is not typed + rect = /*#__PURE__*/React.cloneElement(option, props); + } else if (typeof option === 'function') { + rect = option(props); + } else { + rect = /*#__PURE__*/React.createElement(Rectangle, _extends({}, props, { + className: "recharts-reference-area-rect" + })); + } + return rect; +}; +function ReportReferenceArea(props) { + var dispatch = useAppDispatch(); + useEffect(() => { + dispatch(addArea(props)); + return () => { + dispatch(removeArea(props)); + }; + }); + return null; +} +function ReferenceAreaImpl(props) { + var { + x1, + x2, + y1, + y2, + className, + shape, + xAxisId, + yAxisId + } = props; + var clipPathId = useClipPathId(); + var isPanorama = useIsPanorama(); + var xAxisScale = useAppSelector(state => selectAxisScale(state, 'xAxis', xAxisId, isPanorama)); + var yAxisScale = useAppSelector(state => selectAxisScale(state, 'yAxis', yAxisId, isPanorama)); + if (xAxisScale == null || yAxisScale == null) { + return null; + } + var hasX1 = isNumOrStr(x1); + var hasX2 = isNumOrStr(x2); + var hasY1 = isNumOrStr(y1); + var hasY2 = isNumOrStr(y2); + if (!hasX1 && !hasX2 && !hasY1 && !hasY2 && !shape) { + return null; + } + var rect = getRect(hasX1, hasX2, hasY1, hasY2, xAxisScale, yAxisScale, props); + if (!rect && !shape) { + return null; + } + var isOverflowHidden = props.ifOverflow === 'hidden'; + var clipPath = isOverflowHidden ? "url(#".concat(clipPathId, ")") : undefined; + return /*#__PURE__*/React.createElement(ZIndexLayer, { + zIndex: props.zIndex + }, /*#__PURE__*/React.createElement(Layer, { + className: clsx('recharts-reference-area', className) + }, renderRect(shape, _objectSpread(_objectSpread({ + clipPath + }, svgPropertiesAndEvents(props)), rect)), rect != null && /*#__PURE__*/React.createElement(CartesianLabelContextProvider, _extends({}, rect, { + lowerWidth: rect.width, + upperWidth: rect.width + }), /*#__PURE__*/React.createElement(CartesianLabelFromLabelProp, { + label: props.label + }), props.children))); +} +export var referenceAreaDefaultProps = { + ifOverflow: 'discard', + xAxisId: 0, + yAxisId: 0, + radius: 0, + fill: '#ccc', + label: false, + fillOpacity: 0.5, + stroke: 'none', + strokeWidth: 1, + zIndex: DefaultZIndexes.area +}; +/** + * Draws a rectangular area on the chart to highlight a specific range. + * + * This component, unlike {@link Rectangle} or {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/rect rect}, is aware of the cartesian coordinate system, + * so you specify the area by using data coordinates instead of pixels. + * + * ReferenceArea will calculate the pixels based on the provided data coordinates. + * + * If you prefer to render rectangles using pixels rather than data coordinates, + * consider using the {@link Rectangle} component instead. + * + * @provides CartesianLabelContext + * @consumes CartesianChartContext + */ +export function ReferenceArea(outsideProps) { + var props = resolveDefaultProps(outsideProps, referenceAreaDefaultProps); + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReportReferenceArea, { + yAxisId: props.yAxisId, + xAxisId: props.xAxisId, + ifOverflow: props.ifOverflow, + x1: props.x1, + x2: props.x2, + y1: props.y1, + y2: props.y2 + }), /*#__PURE__*/React.createElement(ReferenceAreaImpl, props)); +} +ReferenceArea.displayName = 'ReferenceArea'; Index: node_modules/recharts/es6/cartesian/ReferenceDot.js =================================================================== --- node_modules/recharts/es6/cartesian/ReferenceDot.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/cartesian/ReferenceDot.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,161 @@ +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +import * as React from 'react'; +import { useEffect } from 'react'; +import { clsx } from 'clsx'; +import { Layer } from '../container/Layer'; +import { Dot } from '../shape/Dot'; +import { CartesianLabelContextProvider, CartesianLabelFromLabelProp } from '../component/Label'; +import { isNumOrStr } from '../util/DataUtils'; +import { addDot, removeDot } from '../state/referenceElementsSlice'; +import { useAppDispatch, useAppSelector } from '../state/hooks'; +import { selectAxisScale } from '../state/selectors/axisSelectors'; +import { useIsPanorama } from '../context/PanoramaContext'; +import { useClipPathId } from '../container/ClipPathProvider'; +import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +import { ZIndexLayer } from '../zIndex/ZIndexLayer'; +import { DefaultZIndexes } from '../zIndex/DefaultZIndexes'; +import { CartesianScaleHelperImpl } from '../util/scale/CartesianScaleHelper'; +var useCoordinate = (x, y, xAxisId, yAxisId, ifOverflow) => { + var isX = isNumOrStr(x); + var isY = isNumOrStr(y); + var isPanorama = useIsPanorama(); + var xAxisScale = useAppSelector(state => selectAxisScale(state, 'xAxis', xAxisId, isPanorama)); + var yAxisScale = useAppSelector(state => selectAxisScale(state, 'yAxis', yAxisId, isPanorama)); + if (!isX || !isY || xAxisScale == null || yAxisScale == null) { + return null; + } + var scales = new CartesianScaleHelperImpl({ + x: xAxisScale, + y: yAxisScale + }); + var result = scales.map({ + x, + y + }, { + position: 'middle' + }); + if (ifOverflow === 'discard' && !scales.isInRange(result)) { + return null; + } + return result; +}; +function ReportReferenceDot(props) { + var dispatch = useAppDispatch(); + useEffect(() => { + dispatch(addDot(props)); + return () => { + dispatch(removeDot(props)); + }; + }); + return null; +} +var renderDot = (option, props) => { + var dot; + if (/*#__PURE__*/React.isValidElement(option)) { + // @ts-expect-error element cloning is not typed + dot = /*#__PURE__*/React.cloneElement(option, props); + } else if (typeof option === 'function') { + dot = option(props); + } else { + dot = /*#__PURE__*/React.createElement(Dot, _extends({}, props, { + cx: props.cx, + cy: props.cy, + className: "recharts-reference-dot-dot" + })); + } + return dot; +}; +function ReferenceDotImpl(props) { + var { + x, + y, + r + } = props; + var clipPathId = useClipPathId(); + var coordinate = useCoordinate(x, y, props.xAxisId, props.yAxisId, props.ifOverflow); + if (!coordinate) { + return null; + } + var { + x: cx, + y: cy + } = coordinate; + var { + shape, + className, + ifOverflow + } = props; + var clipPath = ifOverflow === 'hidden' ? "url(#".concat(clipPathId, ")") : undefined; + var dotProps = _objectSpread(_objectSpread({ + clipPath + }, svgPropertiesAndEvents(props)), {}, { + cx: cx !== null && cx !== void 0 ? cx : undefined, + cy: cy !== null && cy !== void 0 ? cy : undefined + }); + return /*#__PURE__*/React.createElement(ZIndexLayer, { + zIndex: props.zIndex + }, /*#__PURE__*/React.createElement(Layer, { + className: clsx('recharts-reference-dot', className) + }, renderDot(shape, dotProps), /*#__PURE__*/React.createElement(CartesianLabelContextProvider, { + x: cx - r, + y: cy - r, + width: 2 * r, + height: 2 * r, + upperWidth: 2 * r, + lowerWidth: 2 * r + }, /*#__PURE__*/React.createElement(CartesianLabelFromLabelProp, { + label: props.label + }), props.children))); +} +export var referenceDotDefaultProps = { + ifOverflow: 'discard', + xAxisId: 0, + yAxisId: 0, + r: 10, + label: false, + fill: '#fff', + stroke: '#ccc', + fillOpacity: 1, + strokeWidth: 1, + zIndex: DefaultZIndexes.scatter +}; +/** + * Draws a circle on the chart to highlight a specific point. + * + * This component, unlike {@link Dot} or {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/circle circle}, is aware of the cartesian coordinate system, + * so you specify its center by using data coordinates instead of pixels. + * + * ReferenceDot will calculate the pixels based on the provided data coordinates. + * + * If you prefer to render dots using pixels rather than data coordinates, + * consider using the {@link Dot} component instead. + * + * @provides CartesianLabelContext + * @consumes CartesianChartContext + */ +export function ReferenceDot(outsideProps) { + var props = resolveDefaultProps(outsideProps, referenceDotDefaultProps); + var { + x, + y, + r, + ifOverflow, + yAxisId, + xAxisId + } = props; + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReportReferenceDot, { + y: y, + x: x, + r: r, + yAxisId: yAxisId, + xAxisId: xAxisId, + ifOverflow: ifOverflow + }), /*#__PURE__*/React.createElement(ReferenceDotImpl, props)); +} +ReferenceDot.displayName = 'ReferenceDot'; Index: node_modules/recharts/es6/cartesian/ReferenceLine.js =================================================================== --- node_modules/recharts/es6/cartesian/ReferenceLine.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/cartesian/ReferenceLine.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,259 @@ +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +/** + * @fileOverview Reference Line + */ +import * as React from 'react'; +import { useEffect } from 'react'; +import { clsx } from 'clsx'; +import { Layer } from '../container/Layer'; +import { CartesianLabelContextProvider, CartesianLabelFromLabelProp } from '../component/Label'; +import { isNumOrStr } from '../util/DataUtils'; +import { rectWithCoords } from '../util/CartesianUtils'; +import { useViewBox } from '../context/chartLayoutContext'; +import { addLine, removeLine } from '../state/referenceElementsSlice'; +import { useAppDispatch, useAppSelector } from '../state/hooks'; +import { selectAxisScale, selectXAxisSettings, selectYAxisSettings } from '../state/selectors/axisSelectors'; +import { useIsPanorama } from '../context/PanoramaContext'; +import { useClipPathId } from '../container/ClipPathProvider'; +import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +import { ZIndexLayer } from '../zIndex/ZIndexLayer'; +import { DefaultZIndexes } from '../zIndex/DefaultZIndexes'; +import { isWellBehavedNumber } from '../util/isWellBehavedNumber'; +import { CartesianScaleHelperImpl } from '../util/scale/CartesianScaleHelper'; + +/** + * Single point that defines one end of a segment. + * These coordinates are in data space, meaning that you should provide + * values that correspond to the data domain of the axes. + * So you would provide a value of `Page A` to indicate the data value `Page A` + * and then recharts will convert that to pixels. + * + * Likewise for numbers. If your x-axis goes from 0 to 100, + * and you want the line to end at 50, you would provide `50` here. + * + * @inline + */ + +/** + * This excludes `viewBox` prop from svg for two reasons: + * 1. The components wants viewBox of object type, and svg wants string + * - so there's a conflict, and the component will throw if it gets string + * 2. Internally the component calls `svgPropertiesNoEvents` which filters the viewBox away anyway + */ + +var renderLine = (option, props) => { + var line; + if (/*#__PURE__*/React.isValidElement(option)) { + // @ts-expect-error element cloning is not typed + line = /*#__PURE__*/React.cloneElement(option, props); + } else if (typeof option === 'function') { + line = option(props); + } else { + if (!isWellBehavedNumber(props.x1) || !isWellBehavedNumber(props.y1) || !isWellBehavedNumber(props.x2) || !isWellBehavedNumber(props.y2)) { + return null; + } + line = /*#__PURE__*/React.createElement("line", _extends({}, props, { + className: "recharts-reference-line-line" + })); + } + return line; +}; +var getHorizontalLineEndPoints = (yCoord, ifOverflow, position, yAxisOrientation, yAxisScale, viewBox) => { + var { + x, + width + } = viewBox; + var coord = yAxisScale.map(yCoord, { + position + }); + // don't render the line if the scale can't compute a result that makes sense + if (!isWellBehavedNumber(coord)) { + return null; + } + if (ifOverflow === 'discard' && !yAxisScale.isInRange(coord)) { + return null; + } + var points = [{ + x: x + width, + y: coord + }, { + x, + y: coord + }]; + return yAxisOrientation === 'left' ? points.reverse() : points; +}; +var getVerticalLineEndPoints = (xCoord, ifOverflow, position, xAxisOrientation, xAxisScale, viewBox) => { + var { + y, + height + } = viewBox; + var coord = xAxisScale.map(xCoord, { + position + }); + // don't render the line if the scale can't compute a result that makes sense + if (!isWellBehavedNumber(coord)) { + return null; + } + if (ifOverflow === 'discard' && !xAxisScale.isInRange(coord)) { + return null; + } + var points = [{ + x: coord, + y: y + height + }, { + x: coord, + y + }]; + return xAxisOrientation === 'top' ? points.reverse() : points; +}; +var getSegmentLineEndPoints = (segment, ifOverflow, position, scales) => { + var points = [scales.mapWithFallback(segment[0], { + position, + fallback: 'rangeMin' + }), scales.mapWithFallback(segment[1], { + position, + fallback: 'rangeMax' + })]; + if (ifOverflow === 'discard' && points.some(p => !scales.isInRange(p))) { + return null; + } + return points; +}; +export var getEndPoints = (xAxisScale, yAxisScale, viewBox, position, xAxisOrientation, yAxisOrientation, props) => { + var { + x: xCoord, + y: yCoord, + segment, + ifOverflow + } = props; + var isFixedX = isNumOrStr(xCoord); + var isFixedY = isNumOrStr(yCoord); + if (isFixedY) { + return getHorizontalLineEndPoints(yCoord, ifOverflow, position, yAxisOrientation, yAxisScale, viewBox); + } + if (isFixedX) { + return getVerticalLineEndPoints(xCoord, ifOverflow, position, xAxisOrientation, xAxisScale, viewBox); + } + if (segment != null && segment.length === 2) { + return getSegmentLineEndPoints(segment, ifOverflow, position, new CartesianScaleHelperImpl({ + x: xAxisScale, + y: yAxisScale + })); + } + return null; +}; +function ReportReferenceLine(props) { + var dispatch = useAppDispatch(); + useEffect(() => { + dispatch(addLine(props)); + return () => { + dispatch(removeLine(props)); + }; + }); + return null; +} +function ReferenceLineImpl(props) { + var { + xAxisId, + yAxisId, + shape, + className, + ifOverflow + } = props; + var isPanorama = useIsPanorama(); + var clipPathId = useClipPathId(); + var xAxis = useAppSelector(state => selectXAxisSettings(state, xAxisId)); + var yAxis = useAppSelector(state => selectYAxisSettings(state, yAxisId)); + var xAxisScale = useAppSelector(state => selectAxisScale(state, 'xAxis', xAxisId, isPanorama)); + var yAxisScale = useAppSelector(state => selectAxisScale(state, 'yAxis', yAxisId, isPanorama)); + var viewBox = useViewBox(); + if (!clipPathId || !viewBox || xAxis == null || yAxis == null || xAxisScale == null || yAxisScale == null) { + return null; + } + var endPoints = getEndPoints(xAxisScale, yAxisScale, viewBox, props.position, xAxis.orientation, yAxis.orientation, props); + if (!endPoints) { + return null; + } + var point1 = endPoints[0]; + var point2 = endPoints[1]; + if (point1 == null || point2 == null) { + return null; + } + var { + x: x1, + y: y1 + } = point1; + var { + x: x2, + y: y2 + } = point2; + var clipPath = ifOverflow === 'hidden' ? "url(#".concat(clipPathId, ")") : undefined; + var lineProps = _objectSpread(_objectSpread({ + clipPath + }, svgPropertiesAndEvents(props)), {}, { + x1, + y1, + x2, + y2 + }); + var rect = rectWithCoords({ + x1, + y1, + x2, + y2 + }); + return /*#__PURE__*/React.createElement(ZIndexLayer, { + zIndex: props.zIndex + }, /*#__PURE__*/React.createElement(Layer, { + className: clsx('recharts-reference-line', className) + }, renderLine(shape, lineProps), /*#__PURE__*/React.createElement(CartesianLabelContextProvider, _extends({}, rect, { + lowerWidth: rect.width, + upperWidth: rect.width + }), /*#__PURE__*/React.createElement(CartesianLabelFromLabelProp, { + label: props.label + }), props.children))); +} +export var referenceLineDefaultProps = { + ifOverflow: 'discard', + xAxisId: 0, + yAxisId: 0, + fill: 'none', + label: false, + stroke: '#ccc', + fillOpacity: 1, + strokeWidth: 1, + position: 'middle', + zIndex: DefaultZIndexes.line +}; +/** + * Draws a line on the chart connecting two points. + * + * This component, unlike {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/line line}, is aware of the cartesian coordinate system, + * so you specify the dimensions by using data coordinates instead of pixels. + * + * ReferenceLine will calculate the pixels based on the provided data coordinates. + * + * If you prefer to render using pixels rather than data coordinates, + * consider using the {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/line line SVG element} instead. + * + * @provides CartesianLabelContext + * @consumes CartesianChartContext + */ +export function ReferenceLine(outsideProps) { + var props = resolveDefaultProps(outsideProps, referenceLineDefaultProps); + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReportReferenceLine, { + yAxisId: props.yAxisId, + xAxisId: props.xAxisId, + ifOverflow: props.ifOverflow, + x: props.x, + y: props.y, + segment: props.segment + }), /*#__PURE__*/React.createElement(ReferenceLineImpl, props)); +} +ReferenceLine.displayName = 'ReferenceLine'; Index: node_modules/recharts/es6/cartesian/Scatter.js =================================================================== --- node_modules/recharts/es6/cartesian/Scatter.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/cartesian/Scatter.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,606 @@ +var _excluded = ["id"], + _excluded2 = ["onMouseEnter", "onClick", "onMouseLeave"], + _excluded3 = ["animationBegin", "animationDuration", "animationEasing", "hide", "isAnimationActive", "legendType", "lineJointType", "lineType", "shape", "xAxisId", "yAxisId", "zAxisId"]; +function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } +function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +import * as React from 'react'; +import { useCallback, useMemo, useRef, useState } from 'react'; +import { clsx } from 'clsx'; +import { Layer } from '../container/Layer'; +import { CartesianLabelListContextProvider, LabelListFromLabelProp } from '../component/LabelList'; +import { findAllByType } from '../util/ReactUtils'; +import { Curve } from '../shape/Curve'; +import { Cell } from '../component/Cell'; +import { getLinearRegression, interpolate, isNullish } from '../util/DataUtils'; +import { getCateCoordinateOfLine, getTooltipNameProp, getValueByDataKey } from '../util/ChartUtils'; +import { adaptEventsOfChild, isNonEmptyArray } from '../util/types'; +import { ScatterSymbol } from '../util/ScatterUtils'; +import { useMouseClickItemDispatch, useMouseEnterItemDispatch, useMouseLeaveItemDispatch } from '../context/tooltipContext'; +import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings'; +import { SetErrorBarContext } from '../context/ErrorBarContext'; +import { GraphicalItemClipPath, useNeedsClip } from './GraphicalItemClipPath'; +import { selectScatterPoints } from '../state/selectors/scatterSelectors'; +import { useAppSelector } from '../state/hooks'; +import { implicitZAxis } from '../state/selectors/axisSelectors'; +import { useIsPanorama } from '../context/PanoramaContext'; +import { selectActiveTooltipIndex } from '../state/selectors/tooltipSelectors'; +import { SetLegendPayload } from '../state/SetLegendPayload'; +import { DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME } from '../util/Constants'; +import { useAnimationId } from '../util/useAnimationId'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId'; +import { SetCartesianGraphicalItem } from '../state/SetGraphicalItem'; +import { svgPropertiesNoEvents, svgPropertiesNoEventsFromUnknown } from '../util/svgPropertiesNoEvents'; +import { JavascriptAnimate } from '../animation/JavascriptAnimate'; +import { useViewBox } from '../context/chartLayoutContext'; +import { ZIndexLayer } from '../zIndex/ZIndexLayer'; +import { DefaultZIndexes } from '../zIndex/DefaultZIndexes'; +import { propsAreEqual } from '../util/propsAreEqual'; + +/** + * Scatter coordinates are nullable because sometimes the point value is out of the domain, + * and we can't compute a valid coordinate for it. + * + * Scatter -> Symbol ignores points with null cx or cy so those won't render if using the default shapes. + * However: the points are exposed via various props and can be used in custom shapes so we keep them around. + */ + +/** + * Internal props, combination of external props + defaultProps + private Recharts state + */ + +/** + * External props, intended for end users to fill in + */ + +/** + * Because of naming conflict, we are forced to ignore certain (valid) SVG attributes. + */ + +var computeLegendPayloadFromScatterProps = props => { + var { + dataKey, + name, + fill, + legendType, + hide + } = props; + return [{ + inactive: hide, + dataKey, + type: legendType, + color: fill, + value: getTooltipNameProp(name, dataKey), + payload: props + }]; +}; +var SetScatterTooltipEntrySettings = /*#__PURE__*/React.memo(_ref => { + var { + dataKey, + points, + stroke, + strokeWidth, + fill, + name, + hide, + tooltipType, + id + } = _ref; + var tooltipEntrySettings = { + dataDefinedOnItem: points === null || points === void 0 ? void 0 : points.map(p => p.tooltipPayload), + getPosition: index => { + var _points$Number; + return points === null || points === void 0 || (_points$Number = points[Number(index)]) === null || _points$Number === void 0 ? void 0 : _points$Number.tooltipPosition; + }, + settings: { + stroke, + strokeWidth, + fill, + nameKey: undefined, + dataKey, + name: getTooltipNameProp(name, dataKey), + hide, + type: tooltipType, + color: fill, + unit: '', + // why doesn't Scatter support unit? + graphicalItemId: id + } + }; + return /*#__PURE__*/React.createElement(SetTooltipEntrySettings, { + tooltipEntrySettings: tooltipEntrySettings + }); +}); +function ScatterLine(_ref2) { + var { + points, + props + } = _ref2; + var { + line, + lineType, + lineJointType + } = props; + if (!line) { + return null; + } + var scatterProps = svgPropertiesNoEvents(props); + var customLineProps = svgPropertiesNoEventsFromUnknown(line); + var linePoints, lineItem; + if (lineType === 'joint') { + linePoints = points.map(entry => { + var _entry$cx, _entry$cy; + return { + x: (_entry$cx = entry.cx) !== null && _entry$cx !== void 0 ? _entry$cx : null, + y: (_entry$cy = entry.cy) !== null && _entry$cy !== void 0 ? _entry$cy : null + }; + }); + } else if (lineType === 'fitting') { + var { + xmin, + xmax, + a, + b + } = getLinearRegression(points); + var linearExp = x => a * x + b; + linePoints = [{ + x: xmin, + y: linearExp(xmin) + }, { + x: xmax, + y: linearExp(xmax) + }]; + } + var lineProps = _objectSpread(_objectSpread(_objectSpread({}, scatterProps), {}, { + // @ts-expect-error customLineProps is contributing unknown props + fill: 'none', + // @ts-expect-error customLineProps is contributing unknown props + stroke: scatterProps && scatterProps.fill + }, customLineProps), {}, { + // @ts-expect-error linePoints is used before it is assigned (???) + points: linePoints + }); + if (/*#__PURE__*/React.isValidElement(line)) { + lineItem = /*#__PURE__*/React.cloneElement(line, lineProps); + } else if (typeof line === 'function') { + lineItem = line(lineProps); + } else { + lineItem = /*#__PURE__*/React.createElement(Curve, _extends({}, lineProps, { + type: lineJointType + })); + } + return /*#__PURE__*/React.createElement(Layer, { + className: "recharts-scatter-line", + key: "recharts-scatter-line" + }, lineItem); +} +function ScatterLabelListProvider(_ref3) { + var { + showLabels, + points, + children + } = _ref3; + var chartViewBox = useViewBox(); + var labelListEntries = useMemo(() => { + return points === null || points === void 0 ? void 0 : points.map(point => { + var _point$x, _point$y; + var viewBox = { + /* + * Scatter label uses x and y as the reference point for the label, + * not cx and cy. + */ + x: (_point$x = point.x) !== null && _point$x !== void 0 ? _point$x : 0, + /* + * Scatter label uses x and y as the reference point for the label, + * not cx and cy. + */ + y: (_point$y = point.y) !== null && _point$y !== void 0 ? _point$y : 0, + width: point.width, + height: point.height, + lowerWidth: point.width, + upperWidth: point.width + }; + return _objectSpread(_objectSpread({}, viewBox), {}, { + /* + * Here we put undefined because Scatter shows two values usually, one for X and one for Y. + * LabelList will see this undefined and will use its own `dataKey` prop to determine which value to show, + * using the payload below. + */ + value: undefined, + payload: point.payload, + viewBox, + parentViewBox: chartViewBox, + fill: undefined + }); + }); + }, [chartViewBox, points]); + return /*#__PURE__*/React.createElement(CartesianLabelListContextProvider, { + value: showLabels ? labelListEntries : undefined + }, children); +} +function ScatterSymbols(props) { + var { + points, + allOtherScatterProps + } = props; + var { + shape, + activeShape, + dataKey + } = allOtherScatterProps; + var { + id + } = allOtherScatterProps, + allOtherPropsWithoutId = _objectWithoutProperties(allOtherScatterProps, _excluded); + var activeIndex = useAppSelector(selectActiveTooltipIndex); + var { + onMouseEnter: onMouseEnterFromProps, + onClick: onItemClickFromProps, + onMouseLeave: onMouseLeaveFromProps + } = allOtherScatterProps, + restOfAllOtherProps = _objectWithoutProperties(allOtherScatterProps, _excluded2); + var onMouseEnterFromContext = useMouseEnterItemDispatch(onMouseEnterFromProps, dataKey, id); + var onMouseLeaveFromContext = useMouseLeaveItemDispatch(onMouseLeaveFromProps); + var onClickFromContext = useMouseClickItemDispatch(onItemClickFromProps, dataKey, id); + if (!isNonEmptyArray(points)) { + return null; + } + var baseProps = svgPropertiesNoEvents(allOtherPropsWithoutId); + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScatterLine, { + points: points, + props: allOtherPropsWithoutId + }), points.map((entry, i) => { + var hasActiveShape = activeShape != null && activeShape !== false; + var isActive = hasActiveShape && activeIndex === String(i); + var option = hasActiveShape && isActive ? activeShape : shape; + var symbolProps = _objectSpread(_objectSpread(_objectSpread({}, baseProps), entry), {}, { + index: i, + [DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME]: String(id) + }); + return /*#__PURE__*/React.createElement(ZIndexLayer, { + key: "symbol-".concat(entry === null || entry === void 0 ? void 0 : entry.cx, "-").concat(entry === null || entry === void 0 ? void 0 : entry.cy, "-").concat(entry === null || entry === void 0 ? void 0 : entry.size, "-").concat(i) + /* + * inactive Scatters use the parent zIndex, which is represented by undefined here. + * ZIndexLayer will render undefined zIndex as-is, as regular children, without portals. + * Active Scatters use the activeDot zIndex so they render above other elements. + */, + zIndex: isActive ? DefaultZIndexes.activeDot : undefined + }, /*#__PURE__*/React.createElement(Layer, _extends({ + className: "recharts-scatter-symbol" + }, adaptEventsOfChild(restOfAllOtherProps, entry, i), { + // @ts-expect-error the types need a bit of attention + onMouseEnter: onMouseEnterFromContext(entry, i) + // @ts-expect-error the types need a bit of attention + , + onMouseLeave: onMouseLeaveFromContext(entry, i) + // @ts-expect-error the types need a bit of attention + , + onClick: onClickFromContext(entry, i) + }), /*#__PURE__*/React.createElement(ScatterSymbol, _extends({ + option: option, + isActive: isActive + }, symbolProps)))); + })); +} +function SymbolsWithAnimation(_ref4) { + var { + previousPointsRef, + props + } = _ref4; + var { + points, + isAnimationActive, + animationBegin, + animationDuration, + animationEasing + } = props; + var prevPoints = previousPointsRef.current; + var animationId = useAnimationId(props, 'recharts-scatter-'); + var [isAnimating, setIsAnimating] = useState(false); + var handleAnimationEnd = useCallback(() => { + // Scatter doesn't have onAnimationEnd prop, and if we want to add it we do it here + // if (typeof onAnimationEnd === 'function') { + // onAnimationEnd(); + // } + setIsAnimating(false); + }, []); + var handleAnimationStart = useCallback(() => { + // Scatter doesn't have onAnimationStart prop, and if we want to add it we do it here + // if (typeof onAnimationStart === 'function') { + // onAnimationStart(); + // } + setIsAnimating(true); + }, []); + var showLabels = !isAnimating; + return /*#__PURE__*/React.createElement(ScatterLabelListProvider, { + showLabels: showLabels, + points: points + }, props.children, /*#__PURE__*/React.createElement(JavascriptAnimate, { + animationId: animationId, + begin: animationBegin, + duration: animationDuration, + isActive: isAnimationActive, + easing: animationEasing, + onAnimationEnd: handleAnimationEnd, + onAnimationStart: handleAnimationStart, + key: animationId + }, t => { + var stepData = t === 1 ? points : points === null || points === void 0 ? void 0 : points.map((entry, index) => { + var prev = prevPoints && prevPoints[index]; + if (prev) { + return _objectSpread(_objectSpread({}, entry), {}, { + cx: entry.cx == null ? undefined : interpolate(prev.cx, entry.cx, t), + cy: entry.cy == null ? undefined : interpolate(prev.cy, entry.cy, t), + size: interpolate(prev.size, entry.size, t) + }); + } + return _objectSpread(_objectSpread({}, entry), {}, { + size: interpolate(0, entry.size, t) + }); + }); + if (t > 0) { + // eslint-disable-next-line no-param-reassign + previousPointsRef.current = stepData; + } + return /*#__PURE__*/React.createElement(Layer, null, /*#__PURE__*/React.createElement(ScatterSymbols, { + points: stepData, + allOtherScatterProps: props, + showLabels: showLabels + })); + }), /*#__PURE__*/React.createElement(LabelListFromLabelProp, { + label: props.label + })); +} +export function computeScatterPoints(_ref5) { + var { + displayedData, + xAxis, + yAxis, + zAxis, + scatterSettings, + xAxisTicks, + yAxisTicks, + cells + } = _ref5; + var xAxisDataKey = isNullish(xAxis.dataKey) ? scatterSettings.dataKey : xAxis.dataKey; + var yAxisDataKey = isNullish(yAxis.dataKey) ? scatterSettings.dataKey : yAxis.dataKey; + var zAxisDataKey = zAxis && zAxis.dataKey; + var defaultRangeZ = zAxis ? zAxis.range : implicitZAxis.range; + var defaultZ = defaultRangeZ && defaultRangeZ[0]; + var xBandSize = xAxis.scale.bandwidth ? xAxis.scale.bandwidth() : 0; + var yBandSize = yAxis.scale.bandwidth ? yAxis.scale.bandwidth() : 0; + return displayedData.map((entry, index) => { + var x = getValueByDataKey(entry, xAxisDataKey); + var y = getValueByDataKey(entry, yAxisDataKey); + var z = !isNullish(zAxisDataKey) && getValueByDataKey(entry, zAxisDataKey) || '-'; + var tooltipPayload = [{ + name: isNullish(xAxis.dataKey) ? scatterSettings.name : xAxis.name || String(xAxis.dataKey), + unit: xAxis.unit || '', + // @ts-expect-error getValueByDataKey does not validate the output type + value: x, + payload: entry, + dataKey: xAxisDataKey, + type: scatterSettings.tooltipType + }, { + name: isNullish(yAxis.dataKey) ? scatterSettings.name : yAxis.name || String(yAxis.dataKey), + unit: yAxis.unit || '', + // @ts-expect-error getValueByDataKey does not validate the output type + value: y, + payload: entry, + dataKey: yAxisDataKey, + type: scatterSettings.tooltipType + }]; + if (z !== '-' && zAxis != null) { + tooltipPayload.push({ + // @ts-expect-error name prop should not have dataKey in it + name: zAxis.name || zAxis.dataKey, + unit: zAxis.unit || '', + // @ts-expect-error getValueByDataKey does not validate the output type + value: z, + payload: entry, + dataKey: zAxisDataKey, + type: scatterSettings.tooltipType + }); + } + var cx = getCateCoordinateOfLine({ + axis: xAxis, + ticks: xAxisTicks, + bandSize: xBandSize, + entry, + index, + dataKey: xAxisDataKey + }); + var cy = getCateCoordinateOfLine({ + axis: yAxis, + ticks: yAxisTicks, + bandSize: yBandSize, + entry, + index, + dataKey: yAxisDataKey + }); + var size = z !== '-' && zAxis != null ? zAxis.scale.map(z) : defaultZ; + var radius = size == null ? 0 : Math.sqrt(Math.max(size, 0) / Math.PI); + return _objectSpread(_objectSpread({}, entry), {}, { + cx, + cy, + x: cx == null ? undefined : cx - radius, + y: cy == null ? undefined : cy - radius, + width: 2 * radius, + height: 2 * radius, + size, + node: { + x, + y, + z + }, + tooltipPayload, + tooltipPosition: { + x: cx, + y: cy + }, + payload: entry + }, cells && cells[index] && cells[index].props); + }); +} +var errorBarDataPointFormatter = (dataPoint, dataKey, direction) => { + return { + x: dataPoint.cx, + y: dataPoint.cy, + value: direction === 'x' ? Number(dataPoint.node.x) : Number(dataPoint.node.y), + // @ts-expect-error getValueByDataKey does not validate the output type + errorVal: getValueByDataKey(dataPoint, dataKey) + }; +}; +function ScatterWithId(props) { + var { + hide, + points, + className, + needClip, + xAxisId, + yAxisId, + id + } = props; + var previousPointsRef = useRef(null); + if (hide) { + return null; + } + var layerClass = clsx('recharts-scatter', className); + var clipPathId = id; + return /*#__PURE__*/React.createElement(ZIndexLayer, { + zIndex: props.zIndex + }, /*#__PURE__*/React.createElement(Layer, { + className: layerClass, + clipPath: needClip ? "url(#clipPath-".concat(clipPathId, ")") : undefined, + id: id + }, needClip && /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement(GraphicalItemClipPath, { + clipPathId: clipPathId, + xAxisId: xAxisId, + yAxisId: yAxisId + })), /*#__PURE__*/React.createElement(SetErrorBarContext, { + xAxisId: xAxisId, + yAxisId: yAxisId, + data: points, + dataPointFormatter: errorBarDataPointFormatter, + errorBarOffset: 0 + }, /*#__PURE__*/React.createElement(Layer, { + key: "recharts-scatter-symbols" + }, /*#__PURE__*/React.createElement(SymbolsWithAnimation, { + props: props, + previousPointsRef: previousPointsRef + }))))); +} +export var defaultScatterProps = { + xAxisId: 0, + yAxisId: 0, + zAxisId: 0, + label: false, + line: false, + legendType: 'circle', + lineType: 'joint', + lineJointType: 'linear', + shape: 'circle', + hide: false, + isAnimationActive: 'auto', + animationBegin: 0, + animationDuration: 400, + animationEasing: 'linear', + zIndex: DefaultZIndexes.scatter +}; +function ScatterImpl(props) { + var _resolveDefaultProps = resolveDefaultProps(props, defaultScatterProps), + { + animationBegin, + animationDuration, + animationEasing, + hide, + isAnimationActive, + legendType, + lineJointType, + lineType, + shape, + xAxisId, + yAxisId, + zAxisId + } = _resolveDefaultProps, + everythingElse = _objectWithoutProperties(_resolveDefaultProps, _excluded3); + var { + needClip + } = useNeedsClip(xAxisId, yAxisId); + var cells = useMemo(() => findAllByType(props.children, Cell), [props.children]); + var isPanorama = useIsPanorama(); + var points = useAppSelector(state => { + return selectScatterPoints(state, xAxisId, yAxisId, zAxisId, props.id, cells, isPanorama); + }); + if (needClip == null) { + return null; + } + if (points == null) { + return null; + } + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetScatterTooltipEntrySettings, { + dataKey: props.dataKey, + points: points, + stroke: props.stroke, + strokeWidth: props.strokeWidth, + fill: props.fill, + name: props.name, + hide: props.hide, + tooltipType: props.tooltipType, + id: props.id + }), /*#__PURE__*/React.createElement(ScatterWithId, _extends({}, everythingElse, { + xAxisId: xAxisId, + yAxisId: yAxisId, + zAxisId: zAxisId, + lineType: lineType, + lineJointType: lineJointType, + legendType: legendType, + shape: shape, + hide: hide, + isAnimationActive: isAnimationActive, + animationBegin: animationBegin, + animationDuration: animationDuration, + animationEasing: animationEasing, + points: points, + needClip: needClip + }))); +} +function ScatterFn(outsideProps) { + var props = resolveDefaultProps(outsideProps, defaultScatterProps); + var isPanorama = useIsPanorama(); + return /*#__PURE__*/React.createElement(RegisterGraphicalItemId, { + id: props.id, + type: "scatter" + }, id => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetLegendPayload, { + legendPayload: computeLegendPayloadFromScatterProps(props) + }), /*#__PURE__*/React.createElement(SetCartesianGraphicalItem, { + type: "scatter", + id: id, + data: props.data, + xAxisId: props.xAxisId, + yAxisId: props.yAxisId, + zAxisId: props.zAxisId, + dataKey: props.dataKey, + hide: props.hide, + name: props.name, + tooltipType: props.tooltipType, + isPanorama: isPanorama + }), /*#__PURE__*/React.createElement(ScatterImpl, _extends({}, props, { + id: id + })))); +} + +/** + * @provides LabelListContext + * @provides ErrorBarContext + * @provides CellReader + * @consumes CartesianChartContext + */ +export var Scatter = /*#__PURE__*/React.memo(ScatterFn, propsAreEqual); +Scatter.displayName = 'Scatter'; Index: node_modules/recharts/es6/cartesian/XAxis.js =================================================================== --- node_modules/recharts/es6/cartesian/XAxis.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/cartesian/XAxis.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,171 @@ +var _excluded = ["type"], + _excluded2 = ["dangerouslySetInnerHTML", "ticks", "scale"], + _excluded3 = ["id", "scale"]; +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } +function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } +/** + * @fileOverview X Axis + */ +import * as React from 'react'; +import { useLayoutEffect, useMemo, useRef } from 'react'; +import { clsx } from 'clsx'; +import { CartesianAxis, defaultCartesianAxisProps } from './CartesianAxis'; +import { useAppDispatch, useAppSelector } from '../state/hooks'; +import { addXAxis, replaceXAxis, removeXAxis } from '../state/cartesianAxisSlice'; +import { implicitXAxis, selectTicksOfAxis, selectXAxisPosition, selectXAxisSettingsNoDefaults, selectXAxisSize } from '../state/selectors/axisSelectors'; +import { selectAxisViewBox } from '../state/selectors/selectChartOffsetInternal'; +import { useIsPanorama } from '../context/PanoramaContext'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +import { axisPropsAreEqual } from '../util/axisPropsAreEqual'; +import { useCartesianChartLayout } from '../context/chartLayoutContext'; +import { getAxisTypeBasedOnLayout } from '../util/getAxisTypeBasedOnLayout'; +function SetXAxisSettings(props) { + var dispatch = useAppDispatch(); + var prevSettingsRef = useRef(null); + var layout = useCartesianChartLayout(); + var { + type: typeFromProps + } = props, + restProps = _objectWithoutProperties(props, _excluded); + var evaluatedType = getAxisTypeBasedOnLayout(layout, 'xAxis', typeFromProps); + var settings = useMemo(() => { + if (evaluatedType == null) { + return undefined; + } + return _objectSpread(_objectSpread({}, restProps), {}, { + type: evaluatedType + }); + }, [restProps, evaluatedType]); + useLayoutEffect(() => { + if (settings == null) { + return; + } + if (prevSettingsRef.current === null) { + dispatch(addXAxis(settings)); + } else if (prevSettingsRef.current !== settings) { + dispatch(replaceXAxis({ + prev: prevSettingsRef.current, + next: settings + })); + } + prevSettingsRef.current = settings; + }, [settings, dispatch]); + useLayoutEffect(() => { + return () => { + if (prevSettingsRef.current) { + dispatch(removeXAxis(prevSettingsRef.current)); + prevSettingsRef.current = null; + } + }; + }, [dispatch]); + return null; +} +var XAxisImpl = props => { + var { + xAxisId, + className + } = props; + var viewBox = useAppSelector(selectAxisViewBox); + var isPanorama = useIsPanorama(); + var axisType = 'xAxis'; + var cartesianTickItems = useAppSelector(state => selectTicksOfAxis(state, axisType, xAxisId, isPanorama)); + var axisSize = useAppSelector(state => selectXAxisSize(state, xAxisId)); + var position = useAppSelector(state => selectXAxisPosition(state, xAxisId)); + /* + * Here we select settings from the store and prefer to use them instead of the actual props + * so that the chart is consistent. If we used the props directly, some components will use axis settings + * from state and some from props and because there is a render step between these two, they might be showing different things. + * https://github.com/recharts/recharts/issues/6257 + */ + var synchronizedSettings = useAppSelector(state => selectXAxisSettingsNoDefaults(state, xAxisId)); + if (axisSize == null || position == null || synchronizedSettings == null) { + return null; + } + var { + dangerouslySetInnerHTML, + ticks, + scale: del + } = props, + allOtherProps = _objectWithoutProperties(props, _excluded2); + var { + id, + scale: del2 + } = synchronizedSettings, + restSynchronizedSettings = _objectWithoutProperties(synchronizedSettings, _excluded3); + return /*#__PURE__*/React.createElement(CartesianAxis, _extends({}, allOtherProps, restSynchronizedSettings, { + x: position.x, + y: position.y, + width: axisSize.width, + height: axisSize.height, + className: clsx("recharts-".concat(axisType, " ").concat(axisType), className), + viewBox: viewBox, + ticks: cartesianTickItems, + axisType: axisType + })); +}; +export var xAxisDefaultProps = { + allowDataOverflow: implicitXAxis.allowDataOverflow, + allowDecimals: implicitXAxis.allowDecimals, + allowDuplicatedCategory: implicitXAxis.allowDuplicatedCategory, + angle: implicitXAxis.angle, + axisLine: defaultCartesianAxisProps.axisLine, + height: implicitXAxis.height, + hide: false, + includeHidden: implicitXAxis.includeHidden, + interval: implicitXAxis.interval, + label: false, + minTickGap: implicitXAxis.minTickGap, + mirror: implicitXAxis.mirror, + orientation: implicitXAxis.orientation, + padding: implicitXAxis.padding, + reversed: implicitXAxis.reversed, + scale: implicitXAxis.scale, + tick: implicitXAxis.tick, + tickCount: implicitXAxis.tickCount, + tickLine: defaultCartesianAxisProps.tickLine, + tickSize: defaultCartesianAxisProps.tickSize, + type: implicitXAxis.type, + xAxisId: 0 +}; +var XAxisSettingsDispatcher = outsideProps => { + var props = resolveDefaultProps(outsideProps, xAxisDefaultProps); + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetXAxisSettings, { + allowDataOverflow: props.allowDataOverflow, + allowDecimals: props.allowDecimals, + allowDuplicatedCategory: props.allowDuplicatedCategory, + angle: props.angle, + dataKey: props.dataKey, + domain: props.domain, + height: props.height, + hide: props.hide, + id: props.xAxisId, + includeHidden: props.includeHidden, + interval: props.interval, + minTickGap: props.minTickGap, + mirror: props.mirror, + name: props.name, + orientation: props.orientation, + padding: props.padding, + reversed: props.reversed, + scale: props.scale, + tick: props.tick, + tickCount: props.tickCount, + tickFormatter: props.tickFormatter, + ticks: props.ticks, + type: props.type, + unit: props.unit + }), /*#__PURE__*/React.createElement(XAxisImpl, props)); +}; + +/** + * @consumes CartesianViewBoxContext + * @provides CartesianLabelContext + */ +export var XAxis = /*#__PURE__*/React.memo(XAxisSettingsDispatcher, axisPropsAreEqual); +XAxis.displayName = 'XAxis'; Index: node_modules/recharts/es6/cartesian/YAxis.js =================================================================== --- node_modules/recharts/es6/cartesian/YAxis.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/cartesian/YAxis.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,205 @@ +var _excluded = ["type"], + _excluded2 = ["dangerouslySetInnerHTML", "ticks", "scale"], + _excluded3 = ["id", "scale"]; +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } +function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } +import * as React from 'react'; +import { isValidElement, useLayoutEffect, useMemo, useRef } from 'react'; +import { clsx } from 'clsx'; +import { CartesianAxis, defaultCartesianAxisProps } from './CartesianAxis'; +import { addYAxis, replaceYAxis, removeYAxis, updateYAxisWidth } from '../state/cartesianAxisSlice'; +import { useAppDispatch, useAppSelector } from '../state/hooks'; +import { implicitYAxis, selectTicksOfAxis, selectYAxisPosition, selectYAxisSettingsNoDefaults, selectYAxisSize } from '../state/selectors/axisSelectors'; +import { selectAxisViewBox } from '../state/selectors/selectChartOffsetInternal'; +import { useIsPanorama } from '../context/PanoramaContext'; +import { isLabelContentAFunction } from '../component/Label'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +import { axisPropsAreEqual } from '../util/axisPropsAreEqual'; +import { useCartesianChartLayout } from '../context/chartLayoutContext'; +import { getAxisTypeBasedOnLayout } from '../util/getAxisTypeBasedOnLayout'; +function SetYAxisSettings(props) { + var dispatch = useAppDispatch(); + var prevSettingsRef = useRef(null); + var layout = useCartesianChartLayout(); + var { + type: typeFromProps + } = props, + restProps = _objectWithoutProperties(props, _excluded); + var evaluatedType = getAxisTypeBasedOnLayout(layout, 'yAxis', typeFromProps); + var settings = useMemo(() => { + if (evaluatedType == null) { + return undefined; + } + return _objectSpread(_objectSpread({}, restProps), {}, { + type: evaluatedType + }); + }, [evaluatedType, restProps]); + useLayoutEffect(() => { + if (settings == null) { + return; + } + if (prevSettingsRef.current === null) { + dispatch(addYAxis(settings)); + } else if (prevSettingsRef.current !== settings) { + dispatch(replaceYAxis({ + prev: prevSettingsRef.current, + next: settings + })); + } + prevSettingsRef.current = settings; + }, [settings, dispatch]); + useLayoutEffect(() => { + return () => { + if (prevSettingsRef.current) { + dispatch(removeYAxis(prevSettingsRef.current)); + prevSettingsRef.current = null; + } + }; + }, [dispatch]); + return null; +} +function YAxisImpl(props) { + var { + yAxisId, + className, + width, + label + } = props; + var cartesianAxisRef = useRef(null); + var labelRef = useRef(null); + var viewBox = useAppSelector(selectAxisViewBox); + var isPanorama = useIsPanorama(); + var dispatch = useAppDispatch(); + var axisType = 'yAxis'; + var axisSize = useAppSelector(state => selectYAxisSize(state, yAxisId)); + var position = useAppSelector(state => selectYAxisPosition(state, yAxisId)); + var cartesianTickItems = useAppSelector(state => selectTicksOfAxis(state, axisType, yAxisId, isPanorama)); + /* + * Here we select settings from the store and prefer to use them instead of the actual props + * so that the chart is consistent. If we used the props directly, some components will use axis settings + * from state and some from props and because there is a render step between these two, they might be showing different things. + * https://github.com/recharts/recharts/issues/6257 + */ + var synchronizedSettings = useAppSelector(state => selectYAxisSettingsNoDefaults(state, yAxisId)); + useLayoutEffect(() => { + // No dynamic width calculation is done when width !== 'auto' + // or when a function/react element is used for label + if (width !== 'auto' || !axisSize || isLabelContentAFunction(label) || /*#__PURE__*/isValidElement(label) || synchronizedSettings == null) { + return; + } + var axisComponent = cartesianAxisRef.current; + if (!axisComponent) { + return; + } + var updatedYAxisWidth = axisComponent.getCalculatedWidth(); + + // if the width has changed, dispatch an action to update the width + if (Math.round(axisSize.width) !== Math.round(updatedYAxisWidth)) { + dispatch(updateYAxisWidth({ + id: yAxisId, + width: updatedYAxisWidth + })); + } + }, [ + // The dependency on cartesianAxisRef.current is not needed because useLayoutEffect will run after every render. + // The ref will be populated by then. + // To re-run this effect when ticks change, we can depend on the ticks array from the store. + cartesianTickItems, axisSize, dispatch, label, yAxisId, width, synchronizedSettings]); + if (axisSize == null || position == null || synchronizedSettings == null) { + return null; + } + var { + dangerouslySetInnerHTML, + ticks, + scale: del + } = props, + allOtherProps = _objectWithoutProperties(props, _excluded2); + var { + id, + scale: del2 + } = synchronizedSettings, + restSynchronizedSettings = _objectWithoutProperties(synchronizedSettings, _excluded3); + return /*#__PURE__*/React.createElement(CartesianAxis, _extends({}, allOtherProps, restSynchronizedSettings, { + ref: cartesianAxisRef, + labelRef: labelRef, + x: position.x, + y: position.y, + tickTextProps: width === 'auto' ? { + width: undefined + } : { + width + }, + width: axisSize.width, + height: axisSize.height, + className: clsx("recharts-".concat(axisType, " ").concat(axisType), className), + viewBox: viewBox, + ticks: cartesianTickItems, + axisType: axisType + })); +} +export var yAxisDefaultProps = { + allowDataOverflow: implicitYAxis.allowDataOverflow, + allowDecimals: implicitYAxis.allowDecimals, + allowDuplicatedCategory: implicitYAxis.allowDuplicatedCategory, + angle: implicitYAxis.angle, + axisLine: defaultCartesianAxisProps.axisLine, + hide: false, + includeHidden: implicitYAxis.includeHidden, + interval: implicitYAxis.interval, + label: false, + minTickGap: implicitYAxis.minTickGap, + mirror: implicitYAxis.mirror, + orientation: implicitYAxis.orientation, + padding: implicitYAxis.padding, + reversed: implicitYAxis.reversed, + scale: implicitYAxis.scale, + tick: implicitYAxis.tick, + tickCount: implicitYAxis.tickCount, + tickLine: defaultCartesianAxisProps.tickLine, + tickSize: defaultCartesianAxisProps.tickSize, + type: implicitYAxis.type, + width: implicitYAxis.width, + yAxisId: 0 +}; +var YAxisSettingsDispatcher = outsideProps => { + var props = resolveDefaultProps(outsideProps, yAxisDefaultProps); + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetYAxisSettings, { + interval: props.interval, + id: props.yAxisId, + scale: props.scale, + type: props.type, + domain: props.domain, + allowDataOverflow: props.allowDataOverflow, + dataKey: props.dataKey, + allowDuplicatedCategory: props.allowDuplicatedCategory, + allowDecimals: props.allowDecimals, + tickCount: props.tickCount, + padding: props.padding, + includeHidden: props.includeHidden, + reversed: props.reversed, + ticks: props.ticks, + width: props.width, + orientation: props.orientation, + mirror: props.mirror, + hide: props.hide, + unit: props.unit, + name: props.name, + angle: props.angle, + minTickGap: props.minTickGap, + tick: props.tick, + tickFormatter: props.tickFormatter + }), /*#__PURE__*/React.createElement(YAxisImpl, props)); +}; + +/** + * @consumes CartesianViewBoxContext + * @provides CartesianLabelContext + */ +export var YAxis = /*#__PURE__*/React.memo(YAxisSettingsDispatcher, axisPropsAreEqual); +YAxis.displayName = 'YAxis'; Index: node_modules/recharts/es6/cartesian/ZAxis.js =================================================================== --- node_modules/recharts/es6/cartesian/ZAxis.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/cartesian/ZAxis.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,61 @@ +import * as React from 'react'; +import { useLayoutEffect, useRef } from 'react'; +import { addZAxis, removeZAxis, replaceZAxis } from '../state/cartesianAxisSlice'; +import { useAppDispatch } from '../state/hooks'; +import { implicitZAxis } from '../state/selectors/axisSelectors'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +function SetZAxisSettings(settings) { + var dispatch = useAppDispatch(); + var prevSettingsRef = useRef(null); + useLayoutEffect(() => { + if (prevSettingsRef.current === null) { + dispatch(addZAxis(settings)); + } else if (prevSettingsRef.current !== settings) { + dispatch(replaceZAxis({ + prev: prevSettingsRef.current, + next: settings + })); + } + prevSettingsRef.current = settings; + }, [settings, dispatch]); + useLayoutEffect(() => { + return () => { + if (prevSettingsRef.current) { + dispatch(removeZAxis(prevSettingsRef.current)); + prevSettingsRef.current = null; + } + }; + }, [dispatch]); + return null; +} +export var zAxisDefaultProps = { + zAxisId: 0, + range: implicitZAxis.range, + scale: implicitZAxis.scale, + type: implicitZAxis.type +}; + +/** + * Virtual axis, does not render anything itself. Has no ticks, grid lines, or labels. + * Useful for dynamically setting Scatter point size, based on data. + * + * @consumes CartesianViewBoxContext + */ +export function ZAxis(outsideProps) { + var props = resolveDefaultProps(outsideProps, zAxisDefaultProps); + return /*#__PURE__*/React.createElement(SetZAxisSettings, { + domain: props.domain, + id: props.zAxisId, + dataKey: props.dataKey, + name: props.name, + unit: props.unit, + range: props.range, + scale: props.scale, + type: props.type, + allowDuplicatedCategory: implicitZAxis.allowDuplicatedCategory, + allowDataOverflow: implicitZAxis.allowDataOverflow, + reversed: implicitZAxis.reversed, + includeHidden: implicitZAxis.includeHidden + }); +} +ZAxis.displayName = 'ZAxis'; Index: node_modules/recharts/es6/cartesian/getCartesianPosition.js =================================================================== --- node_modules/recharts/es6/cartesian/getCartesianPosition.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/cartesian/getCartesianPosition.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,195 @@ +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +import { getPercentValue, isNumber, isPercent } from '../util/DataUtils'; +import { cartesianViewBoxToTrapezoid } from '../context/chartLayoutContext'; +/** + * Calculates the position and alignment for a generic element in a Cartesian coordinate system. + * + * @param options - The options including viewBox, position, and offset. + * @returns The calculated x, y, alignment and size. + */ +export var getCartesianPosition = options => { + var { + viewBox, + position, + offset = 0, + parentViewBox: parentViewBoxFromOptions, + clamp + } = options; + var { + x, + y, + height, + upperWidth, + lowerWidth + } = cartesianViewBoxToTrapezoid(viewBox); + + // Funnel.tsx provides a viewBox where `x` is the top-left of the trapezoid shape. + var upperX = x; + // The trapezoid is centered, so we can calculate the other corners from the top-left. + var lowerX = x + (upperWidth - lowerWidth) / 2; + // middleX is the x-coordinate of the left edge at the vertical midpoint of the trapezoid. + var middleX = (upperX + lowerX) / 2; + // The width of the trapezoid at its vertical midpoint. + var midHeightWidth = (upperWidth + lowerWidth) / 2; + // The center x-coordinate is constant for the entire height of the trapezoid. + var centerX = upperX + upperWidth / 2; + + // Define vertical offsets and position inverts based on the value being positive or negative. + // This allows labels to be positioned correctly for bars with negative height. + var verticalSign = height >= 0 ? 1 : -1; + var verticalOffset = verticalSign * offset; + var verticalEnd = verticalSign > 0 ? 'end' : 'start'; + var verticalStart = verticalSign > 0 ? 'start' : 'end'; + + // Define horizontal offsets and position inverts based on the value being positive or negative. + // This allows labels to be positioned correctly for bars with negative width. + var horizontalSign = upperWidth >= 0 ? 1 : -1; + var horizontalOffset = horizontalSign * offset; + var horizontalEnd = horizontalSign > 0 ? 'end' : 'start'; + var horizontalStart = horizontalSign > 0 ? 'start' : 'end'; + + // We assume parentViewBox is generic if provided. + // The user has asserted that parentViewBox will be CartesianViewBoxRequired if present. + var parentViewBox = parentViewBoxFromOptions; + if (position === 'top') { + var result = { + x: upperX + upperWidth / 2, + y: y - verticalOffset, + horizontalAnchor: 'middle', + verticalAnchor: verticalEnd + }; + if (clamp && parentViewBox) { + result.height = Math.max(y - parentViewBox.y, 0); + result.width = upperWidth; + } + return result; + } + if (position === 'bottom') { + var _result = { + x: lowerX + lowerWidth / 2, + y: y + height + verticalOffset, + horizontalAnchor: 'middle', + verticalAnchor: verticalStart + }; + if (clamp && parentViewBox) { + _result.height = Math.max(parentViewBox.y + parentViewBox.height - (y + height), 0); + _result.width = lowerWidth; + } + return _result; + } + if (position === 'left') { + var _result2 = { + x: middleX - horizontalOffset, + y: y + height / 2, + horizontalAnchor: horizontalEnd, + verticalAnchor: 'middle' + }; + if (clamp && parentViewBox) { + _result2.width = Math.max(_result2.x - parentViewBox.x, 0); + _result2.height = height; + } + return _result2; + } + if (position === 'right') { + var _result3 = { + x: middleX + midHeightWidth + horizontalOffset, + y: y + height / 2, + horizontalAnchor: horizontalStart, + verticalAnchor: 'middle' + }; + if (clamp && parentViewBox) { + _result3.width = Math.max(parentViewBox.x + parentViewBox.width - _result3.x, 0); + _result3.height = height; + } + return _result3; + } + var sizeAttrs = clamp && parentViewBox ? { + width: midHeightWidth, + height + } : {}; + if (position === 'insideLeft') { + return _objectSpread({ + x: middleX + horizontalOffset, + y: y + height / 2, + horizontalAnchor: horizontalStart, + verticalAnchor: 'middle' + }, sizeAttrs); + } + if (position === 'insideRight') { + return _objectSpread({ + x: middleX + midHeightWidth - horizontalOffset, + y: y + height / 2, + horizontalAnchor: horizontalEnd, + verticalAnchor: 'middle' + }, sizeAttrs); + } + if (position === 'insideTop') { + return _objectSpread({ + x: upperX + upperWidth / 2, + y: y + verticalOffset, + horizontalAnchor: 'middle', + verticalAnchor: verticalStart + }, sizeAttrs); + } + if (position === 'insideBottom') { + return _objectSpread({ + x: lowerX + lowerWidth / 2, + y: y + height - verticalOffset, + horizontalAnchor: 'middle', + verticalAnchor: verticalEnd + }, sizeAttrs); + } + if (position === 'insideTopLeft') { + return _objectSpread({ + x: upperX + horizontalOffset, + y: y + verticalOffset, + horizontalAnchor: horizontalStart, + verticalAnchor: verticalStart + }, sizeAttrs); + } + if (position === 'insideTopRight') { + return _objectSpread({ + x: upperX + upperWidth - horizontalOffset, + y: y + verticalOffset, + horizontalAnchor: horizontalEnd, + verticalAnchor: verticalStart + }, sizeAttrs); + } + if (position === 'insideBottomLeft') { + return _objectSpread({ + x: lowerX + horizontalOffset, + y: y + height - verticalOffset, + horizontalAnchor: horizontalStart, + verticalAnchor: verticalEnd + }, sizeAttrs); + } + if (position === 'insideBottomRight') { + return _objectSpread({ + x: lowerX + lowerWidth - horizontalOffset, + y: y + height - verticalOffset, + horizontalAnchor: horizontalEnd, + verticalAnchor: verticalEnd + }, sizeAttrs); + } + if (!!position && typeof position === 'object' && (isNumber(position.x) || isPercent(position.x)) && (isNumber(position.y) || isPercent(position.y))) { + // TODO: This is not quite right. The width of the trapezoid changes with y. + // A percentage-based x should be relative to the width at that y. + // For now, we use the mid-height width as a reasonable approximation. + return _objectSpread({ + x: x + getPercentValue(position.x, midHeightWidth), + y: y + getPercentValue(position.y, height), + horizontalAnchor: 'end', + verticalAnchor: 'end' + }, sizeAttrs); + } + return _objectSpread({ + x: centerX, + y: y + height / 2, + horizontalAnchor: 'middle', + verticalAnchor: 'middle' + }, sizeAttrs); +}; Index: node_modules/recharts/es6/cartesian/getEquidistantTicks.js =================================================================== --- node_modules/recharts/es6/cartesian/getEquidistantTicks.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/cartesian/getEquidistantTicks.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,135 @@ +import { isVisible } from '../util/TickUtils'; +import { getEveryNth } from '../util/getEveryNth'; +export function getEquidistantTicks(sign, boundaries, getTickSize, ticks, minTickGap) { + // If the ticks are readonly, then the slice might not be necessary + var result = (ticks || []).slice(); + var { + start: initialStart, + end + } = boundaries; + var index = 0; + // Premature optimisation idea 1: Estimate a lower bound, and start from there. + // For now, start from every tick + var stepsize = 1; + var start = initialStart; + var _loop = function _loop() { + // Given stepsize, evaluate whether every stepsize-th tick can be shown. + // If it can not, then increase the stepsize by 1, and try again. + + var entry = ticks === null || ticks === void 0 ? void 0 : ticks[index]; + + // Break condition - If we have evaluated all the ticks, then we are done. + if (entry === undefined) { + return { + v: getEveryNth(ticks, stepsize) + }; + } + + // Check if the element collides with the next element + var i = index; + var size; + var getSize = () => { + if (size === undefined) { + size = getTickSize(entry, i); + } + return size; + }; + var tickCoord = entry.coordinate; + // We will always show the first tick. + var isShow = index === 0 || isVisible(sign, tickCoord, getSize, start, end); + if (!isShow) { + // Start all over with a larger stepsize + index = 0; + start = initialStart; + stepsize += 1; + } + if (isShow) { + // If it can be shown, update the start + start = tickCoord + sign * (getSize() / 2 + minTickGap); + index += stepsize; + } + }, + _ret; + while (stepsize <= result.length) { + _ret = _loop(); + if (_ret) return _ret.v; + } + return []; +} +export function getEquidistantPreserveEndTicks(sign, boundaries, getTickSize, ticks, minTickGap) { + // If the ticks are readonly, then the slice might not be necessary + // Reworked logic for getEquidistantPreserveEndTicks + var result = (ticks || []).slice(); + var len = result.length; + if (len === 0) { + return []; + } + var { + start: initialStart, + end + } = boundaries; + + // Start with stepsize = 1 (every tick) up to the maximum possible stepsize (len) + for (var stepsize = 1; stepsize <= len; stepsize++) { + // 1. Calculate the offset so the last tick (index len - 1) is always included in the sequence. + var offset = (len - 1) % stepsize; + var start = initialStart; // `start` tracks the coordinate of the last successfully drawn tick + gap + var ok = true; + + // 2. Iterate through the end-anchored sequence: offset, offset + stepsize, ..., len - 1 + var _loop2 = function _loop2() { + var entry = ticks[index]; + if (entry == null) { + return 0; // continue + } + var i = index; + var size; + + // Use a function to get size, as in the original code + var getSize = () => { + if (size === undefined) { + size = getTickSize(entry, i); + } + return size; + }; + var tickCoord = entry.coordinate; + + // 3. Apply visibility logic (including the first tick special case) + // The reviewer says *not* to unconditionally bypass checks for the last tick. + var isShow = index === offset || isVisible(sign, tickCoord, getSize, start, end); + if (!isShow) { + // If any tick in this end-anchored sequence fails visibility/collision, + // reject this stepsize and move to the next iteration (larger stepsize). + ok = false; + return 1; // break + } + + // 4. If showable, update the 'start' coordinate for the next collision check + if (isShow) { + start = tickCoord + sign * (getSize() / 2 + minTickGap); + } + }, + _ret2; + for (var index = offset; index < len; index += stepsize) { + _ret2 = _loop2(); + if (_ret2 === 0) continue; + if (_ret2 === 1) break; + } + + // 5. If the entire sequence for this stepsize passed the visibility check, return the result + if (ok) { + // Build the final result array explicitly using the validated stepsize and offset. + var finalTicks = []; + for (var _index = offset; _index < len; _index += stepsize) { + var tick = ticks[_index]; + if (tick != null) { + finalTicks.push(tick); + } + } + return finalTicks; + } + } + + // If no stepsize works (this shouldn't happen unless minTickGap is huge), return an empty array. + return []; +} Index: node_modules/recharts/es6/cartesian/getTicks.js =================================================================== --- node_modules/recharts/es6/cartesian/getTicks.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/cartesian/getTicks.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,180 @@ +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +import { mathSign, isNumber } from '../util/DataUtils'; +import { getStringSize } from '../util/DOMUtils'; +import { Global } from '../util/Global'; +import { isVisible, getTickBoundaries, getNumberIntervalTicks, getAngledTickWidth } from '../util/TickUtils'; +import { getEquidistantTicks, getEquidistantPreserveEndTicks } from './getEquidistantTicks'; +function getTicksEnd(sign, boundaries, getTickSize, ticks, minTickGap) { + var result = (ticks || []).slice(); + var len = result.length; + var { + start + } = boundaries; + var { + end + } = boundaries; + var _loop = function _loop(i) { + var initialEntry = result[i]; + if (initialEntry == null) { + return 1; // continue + } + var entry = initialEntry; + var size; + var getSize = () => { + if (size === undefined) { + size = getTickSize(initialEntry, i); + } + return size; + }; + if (i === len - 1) { + var gap = sign * (entry.coordinate + sign * getSize() / 2 - end); + result[i] = entry = _objectSpread(_objectSpread({}, entry), {}, { + tickCoord: gap > 0 ? entry.coordinate - gap * sign : entry.coordinate + }); + } else { + result[i] = entry = _objectSpread(_objectSpread({}, entry), {}, { + tickCoord: entry.coordinate + }); + } + if (entry.tickCoord != null) { + var isShow = isVisible(sign, entry.tickCoord, getSize, start, end); + if (isShow) { + end = entry.tickCoord - sign * (getSize() / 2 + minTickGap); + result[i] = _objectSpread(_objectSpread({}, entry), {}, { + isShow: true + }); + } + } + }; + for (var i = len - 1; i >= 0; i--) { + if (_loop(i)) continue; + } + return result; +} +function getTicksStart(sign, boundaries, getTickSize, ticks, minTickGap, preserveEnd) { + // This method is mutating the array so clone is indeed necessary here + var result = (ticks || []).slice(); + var len = result.length; + var { + start, + end + } = boundaries; + if (preserveEnd) { + // Try to guarantee the tail to be displayed + var tail = ticks[len - 1]; + if (tail != null) { + var tailSize = getTickSize(tail, len - 1); + var tailGap = sign * (tail.coordinate + sign * tailSize / 2 - end); + result[len - 1] = tail = _objectSpread(_objectSpread({}, tail), {}, { + tickCoord: tailGap > 0 ? tail.coordinate - tailGap * sign : tail.coordinate + }); + if (tail.tickCoord != null) { + var isTailShow = isVisible(sign, tail.tickCoord, () => tailSize, start, end); + if (isTailShow) { + end = tail.tickCoord - sign * (tailSize / 2 + minTickGap); + result[len - 1] = _objectSpread(_objectSpread({}, tail), {}, { + isShow: true + }); + } + } + } + } + var count = preserveEnd ? len - 1 : len; + var _loop2 = function _loop2(i) { + var initialEntry = result[i]; + if (initialEntry == null) { + return 1; // continue + } + var entry = initialEntry; + var size; + var getSize = () => { + if (size === undefined) { + size = getTickSize(initialEntry, i); + } + return size; + }; + if (i === 0) { + var gap = sign * (entry.coordinate - sign * getSize() / 2 - start); + result[i] = entry = _objectSpread(_objectSpread({}, entry), {}, { + tickCoord: gap < 0 ? entry.coordinate - gap * sign : entry.coordinate + }); + } else { + result[i] = entry = _objectSpread(_objectSpread({}, entry), {}, { + tickCoord: entry.coordinate + }); + } + if (entry.tickCoord != null) { + var isShow = isVisible(sign, entry.tickCoord, getSize, start, end); + if (isShow) { + start = entry.tickCoord + sign * (getSize() / 2 + minTickGap); + result[i] = _objectSpread(_objectSpread({}, entry), {}, { + isShow: true + }); + } + } + }; + for (var i = 0; i < count; i++) { + if (_loop2(i)) continue; + } + return result; +} +export function getTicks(props, fontSize, letterSpacing) { + var { + tick, + ticks, + viewBox, + minTickGap, + orientation, + interval, + tickFormatter, + unit, + angle + } = props; + if (!ticks || !ticks.length || !tick) { + return []; + } + if (isNumber(interval) || Global.isSsr) { + var _getNumberIntervalTic; + return (_getNumberIntervalTic = getNumberIntervalTicks(ticks, isNumber(interval) ? interval : 0)) !== null && _getNumberIntervalTic !== void 0 ? _getNumberIntervalTic : []; + } + var candidates = []; + var sizeKey = orientation === 'top' || orientation === 'bottom' ? 'width' : 'height'; + var unitSize = unit && sizeKey === 'width' ? getStringSize(unit, { + fontSize, + letterSpacing + }) : { + width: 0, + height: 0 + }; + var getTickSize = (content, index) => { + var value = typeof tickFormatter === 'function' ? tickFormatter(content.value, index) : content.value; + // Recharts only supports angles when sizeKey === 'width' + return sizeKey === 'width' ? getAngledTickWidth(getStringSize(value, { + fontSize, + letterSpacing + }), unitSize, angle) : getStringSize(value, { + fontSize, + letterSpacing + })[sizeKey]; + }; + var tick0 = ticks[0]; + var tick1 = ticks[1]; + var sign = ticks.length >= 2 && tick0 != null && tick1 != null ? mathSign(tick1.coordinate - tick0.coordinate) : 1; + var boundaries = getTickBoundaries(viewBox, sign, sizeKey); + if (interval === 'equidistantPreserveStart') { + return getEquidistantTicks(sign, boundaries, getTickSize, ticks, minTickGap); + } + if (interval === 'equidistantPreserveEnd') { + return getEquidistantPreserveEndTicks(sign, boundaries, getTickSize, ticks, minTickGap); + } + if (interval === 'preserveStart' || interval === 'preserveStartEnd') { + candidates = getTicksStart(sign, boundaries, getTickSize, ticks, minTickGap, interval === 'preserveStartEnd'); + } else { + candidates = getTicksEnd(sign, boundaries, getTickSize, ticks, minTickGap); + } + return candidates.filter(entry => entry.isShow); +} Index: node_modules/recharts/es6/chart/AreaChart.js =================================================================== --- node_modules/recharts/es6/chart/AreaChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/chart/AreaChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { forwardRef } from 'react'; +import { arrayTooltipSearcher } from '../state/optionsSlice'; +import { CartesianChart } from './CartesianChart'; +var allowedTooltipTypes = ['axis']; + +/** + * @consumes ResponsiveContainerContext + * @provides CartesianViewBoxContext + * @provides CartesianChartContext + */ +export var AreaChart = /*#__PURE__*/forwardRef((props, ref) => { + return /*#__PURE__*/React.createElement(CartesianChart, { + chartName: "AreaChart", + defaultTooltipEventType: "axis", + validateTooltipEventTypes: allowedTooltipTypes, + tooltipPayloadSearcher: arrayTooltipSearcher, + categoricalChartProps: props, + ref: ref + }); +}); Index: node_modules/recharts/es6/chart/BarChart.js =================================================================== --- node_modules/recharts/es6/chart/BarChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/chart/BarChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { forwardRef } from 'react'; +import { arrayTooltipSearcher } from '../state/optionsSlice'; +import { CartesianChart } from './CartesianChart'; +var allowedTooltipTypes = ['axis', 'item']; + +/** + * @consumes ResponsiveContainerContext + * @provides CartesianViewBoxContext + * @provides CartesianChartContext + */ +export var BarChart = /*#__PURE__*/forwardRef((props, ref) => { + return /*#__PURE__*/React.createElement(CartesianChart, { + chartName: "BarChart", + defaultTooltipEventType: "axis", + validateTooltipEventTypes: allowedTooltipTypes, + tooltipPayloadSearcher: arrayTooltipSearcher, + categoricalChartProps: props, + ref: ref + }); +}); Index: node_modules/recharts/es6/chart/CartesianChart.js =================================================================== --- node_modules/recharts/es6/chart/CartesianChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/chart/CartesianChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,76 @@ +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +import * as React from 'react'; +import { forwardRef } from 'react'; +import { RechartsStoreProvider } from '../state/RechartsStoreProvider'; +import { ChartDataContextProvider } from '../context/chartDataContext'; +import { ReportMainChartProps } from '../state/ReportMainChartProps'; +import { ReportChartProps } from '../state/ReportChartProps'; +import { CategoricalChart } from './CategoricalChart'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +var defaultMargin = { + top: 5, + right: 5, + bottom: 5, + left: 5 +}; +export var defaultCartesianChartProps = { + accessibilityLayer: true, + barCategoryGap: '10%', + barGap: 4, + layout: 'horizontal', + margin: defaultMargin, + responsive: false, + reverseStackOrder: false, + stackOffset: 'none', + syncMethod: 'index' +}; + +/** + * These are one-time, immutable options that decide the chart's behavior. + * Users who wish to call CartesianChart may decide to pass these options explicitly, + * but usually we would expect that they use one of the convenience components like BarChart, LineChart, etc. + */ + +export var CartesianChart = /*#__PURE__*/forwardRef(function CartesianChart(props, ref) { + var _categoricalChartProp; + var rootChartProps = resolveDefaultProps(props.categoricalChartProps, defaultCartesianChartProps); + var { + chartName, + defaultTooltipEventType, + validateTooltipEventTypes, + tooltipPayloadSearcher, + categoricalChartProps + } = props; + var options = { + chartName, + defaultTooltipEventType, + validateTooltipEventTypes, + tooltipPayloadSearcher, + eventEmitter: undefined + }; + return /*#__PURE__*/React.createElement(RechartsStoreProvider, { + preloadedState: { + options + }, + reduxStoreName: (_categoricalChartProp = categoricalChartProps.id) !== null && _categoricalChartProp !== void 0 ? _categoricalChartProp : chartName + }, /*#__PURE__*/React.createElement(ChartDataContextProvider, { + chartData: categoricalChartProps.data + }), /*#__PURE__*/React.createElement(ReportMainChartProps, { + layout: rootChartProps.layout, + margin: rootChartProps.margin + }), /*#__PURE__*/React.createElement(ReportChartProps, { + baseValue: rootChartProps.baseValue, + accessibilityLayer: rootChartProps.accessibilityLayer, + barCategoryGap: rootChartProps.barCategoryGap, + maxBarSize: rootChartProps.maxBarSize, + stackOffset: rootChartProps.stackOffset, + barGap: rootChartProps.barGap, + barSize: rootChartProps.barSize, + syncId: rootChartProps.syncId, + syncMethod: rootChartProps.syncMethod, + className: rootChartProps.className, + reverseStackOrder: rootChartProps.reverseStackOrder + }), /*#__PURE__*/React.createElement(CategoricalChart, _extends({}, rootChartProps, { + ref: ref + }))); +}); Index: node_modules/recharts/es6/chart/CategoricalChart.js =================================================================== --- node_modules/recharts/es6/chart/CategoricalChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/chart/CategoricalChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,63 @@ +var _excluded = ["width", "height", "responsive", "children", "className", "style", "compact", "title", "desc"]; +function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } +function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } +import * as React from 'react'; +import { forwardRef } from 'react'; +import { RootSurface } from '../container/RootSurface'; +import { RechartsWrapper } from './RechartsWrapper'; +import { ClipPathProvider } from '../container/ClipPathProvider'; +import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents'; +import { ReportChartSize } from '../context/chartLayoutContext'; +export var CategoricalChart = /*#__PURE__*/forwardRef((props, ref) => { + var { + width, + height, + responsive, + children, + className, + style, + compact, + title, + desc + } = props, + others = _objectWithoutProperties(props, _excluded); + var attrs = svgPropertiesNoEvents(others); + + /* + * The "compact" mode is used as the panorama within Brush. + * However because `compact` is a public prop, let's assume that it can render outside of Brush too. + */ + if (compact) { + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReportChartSize, { + width: width, + height: height + }), /*#__PURE__*/React.createElement(RootSurface, { + otherAttributes: attrs, + title: title, + desc: desc + }, children)); + } + return /*#__PURE__*/React.createElement(RechartsWrapper, { + className: className, + style: style, + width: width, + height: height, + responsive: responsive !== null && responsive !== void 0 ? responsive : false, + onClick: props.onClick, + onMouseLeave: props.onMouseLeave, + onMouseEnter: props.onMouseEnter, + onMouseMove: props.onMouseMove, + onMouseDown: props.onMouseDown, + onMouseUp: props.onMouseUp, + onContextMenu: props.onContextMenu, + onDoubleClick: props.onDoubleClick, + onTouchStart: props.onTouchStart, + onTouchMove: props.onTouchMove, + onTouchEnd: props.onTouchEnd + }, /*#__PURE__*/React.createElement(RootSurface, { + otherAttributes: attrs, + title: title, + desc: desc, + ref: ref + }, /*#__PURE__*/React.createElement(ClipPathProvider, null, children))); +}); Index: node_modules/recharts/es6/chart/ComposedChart.js =================================================================== --- node_modules/recharts/es6/chart/ComposedChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/chart/ComposedChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { forwardRef } from 'react'; +import { arrayTooltipSearcher } from '../state/optionsSlice'; +import { CartesianChart } from './CartesianChart'; +var allowedTooltipTypes = ['axis']; + +/** + * @consumes ResponsiveContainerContext + * @provides CartesianViewBoxContext + * @provides CartesianChartContext + */ +export var ComposedChart = /*#__PURE__*/forwardRef((props, ref) => { + return /*#__PURE__*/React.createElement(CartesianChart, { + chartName: "ComposedChart", + defaultTooltipEventType: "axis", + validateTooltipEventTypes: allowedTooltipTypes, + tooltipPayloadSearcher: arrayTooltipSearcher, + categoricalChartProps: props, + ref: ref + }); +}); Index: node_modules/recharts/es6/chart/FunnelChart.js =================================================================== --- node_modules/recharts/es6/chart/FunnelChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/chart/FunnelChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { forwardRef } from 'react'; +import { arrayTooltipSearcher } from '../state/optionsSlice'; +import { CartesianChart } from './CartesianChart'; +var allowedTooltipTypes = ['item']; + +/** + * @consumes ResponsiveContainerContext + * @provides CartesianViewBoxContext + * @provides CartesianChartContext + */ +export var FunnelChart = /*#__PURE__*/forwardRef((props, ref) => { + return /*#__PURE__*/React.createElement(CartesianChart, { + chartName: "FunnelChart", + defaultTooltipEventType: "item", + validateTooltipEventTypes: allowedTooltipTypes, + tooltipPayloadSearcher: arrayTooltipSearcher, + categoricalChartProps: props, + ref: ref + }); +}); Index: node_modules/recharts/es6/chart/LineChart.js =================================================================== --- node_modules/recharts/es6/chart/LineChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/chart/LineChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { forwardRef } from 'react'; +import { arrayTooltipSearcher } from '../state/optionsSlice'; +import { CartesianChart } from './CartesianChart'; +var allowedTooltipTypes = ['axis']; + +/** + * @consumes ResponsiveContainerContext + * @provides CartesianViewBoxContext + * @provides CartesianChartContext + */ +export var LineChart = /*#__PURE__*/forwardRef((props, ref) => { + return /*#__PURE__*/React.createElement(CartesianChart, { + chartName: "LineChart", + defaultTooltipEventType: "axis", + validateTooltipEventTypes: allowedTooltipTypes, + tooltipPayloadSearcher: arrayTooltipSearcher, + categoricalChartProps: props, + ref: ref + }); +}); Index: node_modules/recharts/es6/chart/PieChart.js =================================================================== --- node_modules/recharts/es6/chart/PieChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/chart/PieChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,33 @@ +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +import * as React from 'react'; +import { forwardRef } from 'react'; +import { arrayTooltipSearcher } from '../state/optionsSlice'; +import { defaultPolarChartProps, PolarChart } from './PolarChart'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +var allowedTooltipTypes = ['item']; +export var defaultPieChartProps = _objectSpread(_objectSpread({}, defaultPolarChartProps), {}, { + layout: 'centric', + startAngle: 0, + endAngle: 360 +}); + +/** + * @consumes ResponsiveContainerContext + * @provides PolarViewBoxContext + * @provides PolarChartContext + */ +export var PieChart = /*#__PURE__*/forwardRef((props, ref) => { + var propsWithDefaults = resolveDefaultProps(props, defaultPieChartProps); + return /*#__PURE__*/React.createElement(PolarChart, { + chartName: "PieChart", + defaultTooltipEventType: "item", + validateTooltipEventTypes: allowedTooltipTypes, + tooltipPayloadSearcher: arrayTooltipSearcher, + categoricalChartProps: propsWithDefaults, + ref: ref + }); +}); Index: node_modules/recharts/es6/chart/PolarChart.js =================================================================== --- node_modules/recharts/es6/chart/PolarChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/chart/PolarChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,107 @@ +var _excluded = ["layout"]; +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } +function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } +import { forwardRef } from 'react'; +import * as React from 'react'; +import { RechartsStoreProvider } from '../state/RechartsStoreProvider'; +import { ChartDataContextProvider } from '../context/chartDataContext'; +import { ReportMainChartProps } from '../state/ReportMainChartProps'; +import { ReportChartProps } from '../state/ReportChartProps'; +import { ReportPolarOptions } from '../state/ReportPolarOptions'; +import { CategoricalChart } from './CategoricalChart'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +var defaultMargin = { + top: 5, + right: 5, + bottom: 5, + left: 5 +}; + +/** + * These default props are the same for all PolarChart components. + */ +export var defaultPolarChartProps = { + accessibilityLayer: true, + stackOffset: 'none', + barCategoryGap: '10%', + barGap: 4, + margin: defaultMargin, + reverseStackOrder: false, + syncMethod: 'index', + layout: 'radial', + responsive: false, + cx: '50%', + cy: '50%', + innerRadius: 0, + outerRadius: '80%' +}; + +/** + * These props are required for the PolarChart to function correctly. + * Users usually would not need to specify these explicitly, + * because the convenience components like PieChart, RadarChart, etc. + * will provide these defaults. + * We can't have the defaults in this file because each of those convenience components + * have their own opinions about what they should be. + */ + +/** + * These are one-time, immutable options that decide the chart's behavior. + * Users who wish to call CartesianChart may decide to pass these options explicitly, + * but usually we would expect that they use one of the convenience components like PieChart, RadarChart, etc. + */ + +export var PolarChart = /*#__PURE__*/forwardRef(function PolarChart(props, ref) { + var _polarChartProps$id; + var polarChartProps = resolveDefaultProps(props.categoricalChartProps, defaultPolarChartProps); + var { + layout + } = polarChartProps, + otherCategoricalProps = _objectWithoutProperties(polarChartProps, _excluded); + var { + chartName, + defaultTooltipEventType, + validateTooltipEventTypes, + tooltipPayloadSearcher + } = props; + var options = { + chartName, + defaultTooltipEventType, + validateTooltipEventTypes, + tooltipPayloadSearcher, + eventEmitter: undefined + }; + return /*#__PURE__*/React.createElement(RechartsStoreProvider, { + preloadedState: { + options + }, + reduxStoreName: (_polarChartProps$id = polarChartProps.id) !== null && _polarChartProps$id !== void 0 ? _polarChartProps$id : chartName + }, /*#__PURE__*/React.createElement(ChartDataContextProvider, { + chartData: polarChartProps.data + }), /*#__PURE__*/React.createElement(ReportMainChartProps, { + layout: layout, + margin: polarChartProps.margin + }), /*#__PURE__*/React.createElement(ReportChartProps, { + baseValue: undefined, + accessibilityLayer: polarChartProps.accessibilityLayer, + barCategoryGap: polarChartProps.barCategoryGap, + maxBarSize: polarChartProps.maxBarSize, + stackOffset: polarChartProps.stackOffset, + barGap: polarChartProps.barGap, + barSize: polarChartProps.barSize, + syncId: polarChartProps.syncId, + syncMethod: polarChartProps.syncMethod, + className: polarChartProps.className, + reverseStackOrder: polarChartProps.reverseStackOrder + }), /*#__PURE__*/React.createElement(ReportPolarOptions, { + cx: polarChartProps.cx, + cy: polarChartProps.cy, + startAngle: polarChartProps.startAngle, + endAngle: polarChartProps.endAngle, + innerRadius: polarChartProps.innerRadius, + outerRadius: polarChartProps.outerRadius + }), /*#__PURE__*/React.createElement(CategoricalChart, _extends({}, otherCategoricalProps, { + ref: ref + }))); +}); Index: node_modules/recharts/es6/chart/RadarChart.js =================================================================== --- node_modules/recharts/es6/chart/RadarChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/chart/RadarChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,32 @@ +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +import * as React from 'react'; +import { forwardRef } from 'react'; +import { arrayTooltipSearcher } from '../state/optionsSlice'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +import { defaultPolarChartProps, PolarChart } from './PolarChart'; +var allowedTooltipTypes = ['axis']; +export var defaultRadarChartProps = _objectSpread(_objectSpread({}, defaultPolarChartProps), {}, { + layout: 'centric', + startAngle: 90, + endAngle: -270 +}); +/** + * @consumes ResponsiveContainerContext + * @provides PolarViewBoxContext + * @provides PolarChartContext + */ +export var RadarChart = /*#__PURE__*/forwardRef((props, ref) => { + var propsWithDefaults = resolveDefaultProps(props, defaultRadarChartProps); + return /*#__PURE__*/React.createElement(PolarChart, { + chartName: "RadarChart", + defaultTooltipEventType: "axis", + validateTooltipEventTypes: allowedTooltipTypes, + tooltipPayloadSearcher: arrayTooltipSearcher, + categoricalChartProps: propsWithDefaults, + ref: ref + }); +}); Index: node_modules/recharts/es6/chart/RadialBarChart.js =================================================================== --- node_modules/recharts/es6/chart/RadialBarChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/chart/RadialBarChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,33 @@ +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +import * as React from 'react'; +import { forwardRef } from 'react'; +import { arrayTooltipSearcher } from '../state/optionsSlice'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +import { defaultPolarChartProps, PolarChart } from './PolarChart'; +var allowedTooltipTypes = ['axis', 'item']; +export var defaultRadialBarChartProps = _objectSpread(_objectSpread({}, defaultPolarChartProps), {}, { + layout: 'radial', + startAngle: 0, + endAngle: 360 +}); + +/** + * @consumes ResponsiveContainerContext + * @provides PolarViewBoxContext + * @provides PolarChartContext + */ +export var RadialBarChart = /*#__PURE__*/forwardRef((props, ref) => { + var propsWithDefaults = resolveDefaultProps(props, defaultRadialBarChartProps); + return /*#__PURE__*/React.createElement(PolarChart, { + chartName: "RadialBarChart", + defaultTooltipEventType: "axis", + validateTooltipEventTypes: allowedTooltipTypes, + tooltipPayloadSearcher: arrayTooltipSearcher, + categoricalChartProps: propsWithDefaults, + ref: ref + }); +}); Index: node_modules/recharts/es6/chart/RechartsWrapper.js =================================================================== --- node_modules/recharts/es6/chart/RechartsWrapper.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/chart/RechartsWrapper.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,342 @@ +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +import * as React from 'react'; +import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'; +import { clsx } from 'clsx'; +import { mouseLeaveChart } from '../state/tooltipSlice'; +import { useAppDispatch } from '../state/hooks'; +import { mouseClickAction, mouseMoveAction } from '../state/mouseEventsMiddleware'; +import { useSynchronisedEventsFromOtherCharts } from '../synchronisation/useChartSynchronisation'; +import { focusAction, keyDownAction } from '../state/keyboardEventsMiddleware'; +import { useReportScale } from '../util/useReportScale'; +import { externalEventAction } from '../state/externalEventsMiddleware'; +import { touchEventAction } from '../state/touchEventsMiddleware'; +import { TooltipPortalContext } from '../context/tooltipPortalContext'; +import { LegendPortalContext } from '../context/legendPortalContext'; +import { ReportChartSize } from '../context/chartLayoutContext'; +import { useResponsiveContainerContext } from '../component/ResponsiveContainer'; +var EventSynchronizer = () => { + useSynchronisedEventsFromOtherCharts(); + return null; +}; +function getNumberOrZero(value) { + if (typeof value === 'number') { + return value; + } + if (typeof value === 'string') { + var parsed = parseFloat(value); + if (!Number.isNaN(parsed)) { + return parsed; + } + } + return 0; +} +var ResponsiveDiv = /*#__PURE__*/forwardRef((props, ref) => { + var _props$style, _props$style2; + var observerRef = useRef(null); + var [sizes, setSizes] = useState({ + containerWidth: getNumberOrZero((_props$style = props.style) === null || _props$style === void 0 ? void 0 : _props$style.width), + containerHeight: getNumberOrZero((_props$style2 = props.style) === null || _props$style2 === void 0 ? void 0 : _props$style2.height) + }); + var setContainerSize = useCallback((newWidth, newHeight) => { + setSizes(prevState => { + var roundedWidth = Math.round(newWidth); + var roundedHeight = Math.round(newHeight); + if (prevState.containerWidth === roundedWidth && prevState.containerHeight === roundedHeight) { + return prevState; + } + return { + containerWidth: roundedWidth, + containerHeight: roundedHeight + }; + }); + }, []); + var innerRef = useCallback(node => { + if (typeof ref === 'function') { + ref(node); + } + if (node != null && typeof ResizeObserver !== 'undefined') { + var { + width: containerWidth, + height: containerHeight + } = node.getBoundingClientRect(); + setContainerSize(containerWidth, containerHeight); + var callback = entries => { + var entry = entries[0]; + if (entry == null) { + return; + } + var { + width, + height + } = entry.contentRect; + setContainerSize(width, height); + }; + var observer = new ResizeObserver(callback); + observer.observe(node); + observerRef.current = observer; + } + }, [ref, setContainerSize]); + useEffect(() => { + return () => { + var observer = observerRef.current; + if (observer != null) { + observer.disconnect(); + } + }; + }, [setContainerSize]); + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReportChartSize, { + width: sizes.containerWidth, + height: sizes.containerHeight + }), /*#__PURE__*/React.createElement("div", _extends({ + ref: innerRef + }, props))); +}); +var ReadSizeOnceDiv = /*#__PURE__*/forwardRef((props, ref) => { + var { + width, + height + } = props; + var [sizes, setSizes] = useState({ + containerWidth: getNumberOrZero(width), + containerHeight: getNumberOrZero(height) + }); + var setContainerSize = useCallback((newWidth, newHeight) => { + setSizes(prevState => { + var roundedWidth = Math.round(newWidth); + var roundedHeight = Math.round(newHeight); + if (prevState.containerWidth === roundedWidth && prevState.containerHeight === roundedHeight) { + return prevState; + } + return { + containerWidth: roundedWidth, + containerHeight: roundedHeight + }; + }); + }, []); + var innerRef = useCallback(node => { + if (typeof ref === 'function') { + ref(node); + } + if (node != null) { + var { + width: containerWidth, + height: containerHeight + } = node.getBoundingClientRect(); + setContainerSize(containerWidth, containerHeight); + } + }, [ref, setContainerSize]); + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReportChartSize, { + width: sizes.containerWidth, + height: sizes.containerHeight + }), /*#__PURE__*/React.createElement("div", _extends({ + ref: innerRef + }, props))); +}); +var StaticDiv = /*#__PURE__*/forwardRef((props, ref) => { + var { + width, + height + } = props; + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReportChartSize, { + width: width, + height: height + }), /*#__PURE__*/React.createElement("div", _extends({ + ref: ref + }, props))); +}); +var NonResponsiveDiv = /*#__PURE__*/forwardRef((props, ref) => { + var { + width, + height + } = props; + // When width or height are percentages or CSS short names, read size from DOM once + if (typeof width === 'string' || typeof height === 'string') { + return /*#__PURE__*/React.createElement(ReadSizeOnceDiv, _extends({}, props, { + ref: ref + })); + } + // When both are numbers, use them directly + if (typeof width === 'number' && typeof height === 'number') { + return /*#__PURE__*/React.createElement(StaticDiv, _extends({}, props, { + width: width, + height: height, + ref: ref + })); + } + // When width/height are undefined, render wrapper div without reporting size + // This results in no SVG being rendered (intentional for backwards compatibility) + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReportChartSize, { + width: width, + height: height + }), /*#__PURE__*/React.createElement("div", _extends({ + ref: ref + }, props))); +}); +function getWrapperDivComponent(responsive) { + return responsive ? ResponsiveDiv : NonResponsiveDiv; +} +export var RechartsWrapper = /*#__PURE__*/forwardRef((props, ref) => { + var { + children, + className, + height: heightFromProps, + onClick, + onContextMenu, + onDoubleClick, + onMouseDown, + onMouseEnter, + onMouseLeave, + onMouseMove, + onMouseUp, + onTouchEnd, + onTouchMove, + onTouchStart, + style, + width: widthFromProps, + responsive, + dispatchTouchEvents = true + } = props; + var containerRef = useRef(null); + var dispatch = useAppDispatch(); + var [tooltipPortal, setTooltipPortal] = useState(null); + var [legendPortal, setLegendPortal] = useState(null); + var setScaleRef = useReportScale(); + var responsiveContainerCalculations = useResponsiveContainerContext(); + var width = (responsiveContainerCalculations === null || responsiveContainerCalculations === void 0 ? void 0 : responsiveContainerCalculations.width) > 0 ? responsiveContainerCalculations.width : widthFromProps; + var height = (responsiveContainerCalculations === null || responsiveContainerCalculations === void 0 ? void 0 : responsiveContainerCalculations.height) > 0 ? responsiveContainerCalculations.height : heightFromProps; + var innerRef = useCallback(node => { + setScaleRef(node); + if (typeof ref === 'function') { + ref(node); + } + setTooltipPortal(node); + setLegendPortal(node); + if (node != null) { + containerRef.current = node; + } + }, [setScaleRef, ref, setTooltipPortal, setLegendPortal]); + var myOnClick = useCallback(e => { + dispatch(mouseClickAction(e)); + dispatch(externalEventAction({ + handler: onClick, + reactEvent: e + })); + }, [dispatch, onClick]); + var myOnMouseEnter = useCallback(e => { + dispatch(mouseMoveAction(e)); + dispatch(externalEventAction({ + handler: onMouseEnter, + reactEvent: e + })); + }, [dispatch, onMouseEnter]); + var myOnMouseLeave = useCallback(e => { + dispatch(mouseLeaveChart()); + dispatch(externalEventAction({ + handler: onMouseLeave, + reactEvent: e + })); + }, [dispatch, onMouseLeave]); + var myOnMouseMove = useCallback(e => { + dispatch(mouseMoveAction(e)); + dispatch(externalEventAction({ + handler: onMouseMove, + reactEvent: e + })); + }, [dispatch, onMouseMove]); + var onFocus = useCallback(() => { + dispatch(focusAction()); + }, [dispatch]); + var onKeyDown = useCallback(e => { + dispatch(keyDownAction(e.key)); + }, [dispatch]); + var myOnContextMenu = useCallback(e => { + dispatch(externalEventAction({ + handler: onContextMenu, + reactEvent: e + })); + }, [dispatch, onContextMenu]); + var myOnDoubleClick = useCallback(e => { + dispatch(externalEventAction({ + handler: onDoubleClick, + reactEvent: e + })); + }, [dispatch, onDoubleClick]); + var myOnMouseDown = useCallback(e => { + dispatch(externalEventAction({ + handler: onMouseDown, + reactEvent: e + })); + }, [dispatch, onMouseDown]); + var myOnMouseUp = useCallback(e => { + dispatch(externalEventAction({ + handler: onMouseUp, + reactEvent: e + })); + }, [dispatch, onMouseUp]); + var myOnTouchStart = useCallback(e => { + dispatch(externalEventAction({ + handler: onTouchStart, + reactEvent: e + })); + }, [dispatch, onTouchStart]); + + /* + * onTouchMove is special because it behaves different from mouse events. + * Mouse events have 'enter' + 'leave' combo that notify us when the mouse is over + * a certain element. Touch events don't have that; touch only gives us + * start (finger down), end (finger up) and move (finger moving). + * So we need to figure out which element the user is touching + * ourselves. Fortunately, there's a convenient method for that: + * https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint + */ + var myOnTouchMove = useCallback(e => { + if (dispatchTouchEvents) { + dispatch(touchEventAction(e)); + } + dispatch(externalEventAction({ + handler: onTouchMove, + reactEvent: e + })); + }, [dispatch, dispatchTouchEvents, onTouchMove]); + var myOnTouchEnd = useCallback(e => { + dispatch(externalEventAction({ + handler: onTouchEnd, + reactEvent: e + })); + }, [dispatch, onTouchEnd]); + var WrapperDiv = getWrapperDivComponent(responsive); + return /*#__PURE__*/React.createElement(TooltipPortalContext.Provider, { + value: tooltipPortal + }, /*#__PURE__*/React.createElement(LegendPortalContext.Provider, { + value: legendPortal + }, /*#__PURE__*/React.createElement(WrapperDiv, { + width: width !== null && width !== void 0 ? width : style === null || style === void 0 ? void 0 : style.width, + height: height !== null && height !== void 0 ? height : style === null || style === void 0 ? void 0 : style.height, + className: clsx('recharts-wrapper', className), + style: _objectSpread({ + position: 'relative', + cursor: 'default', + width, + height + }, style), + onClick: myOnClick, + onContextMenu: myOnContextMenu, + onDoubleClick: myOnDoubleClick, + onFocus: onFocus, + onKeyDown: onKeyDown, + onMouseDown: myOnMouseDown, + onMouseEnter: myOnMouseEnter, + onMouseLeave: myOnMouseLeave, + onMouseMove: myOnMouseMove, + onMouseUp: myOnMouseUp, + onTouchEnd: myOnTouchEnd, + onTouchMove: myOnTouchMove, + onTouchStart: myOnTouchStart, + ref: innerRef + }, /*#__PURE__*/React.createElement(EventSynchronizer, null), children))); +}); Index: node_modules/recharts/es6/chart/Sankey.js =================================================================== --- node_modules/recharts/es6/chart/Sankey.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/chart/Sankey.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,939 @@ +var _excluded = ["sourceX", "sourceY", "sourceControlX", "targetX", "targetY", "targetControlX", "linkWidth"], + _excluded2 = ["className", "style", "children", "id"]; +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } +function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +import * as React from 'react'; +import { useCallback, useMemo, useState } from 'react'; +import maxBy from 'es-toolkit/compat/maxBy'; +import sumBy from 'es-toolkit/compat/sumBy'; +import get from 'es-toolkit/compat/get'; +import { Surface } from '../container/Surface'; +import { Layer } from '../container/Layer'; +import { Rectangle } from '../shape/Rectangle'; +import { getValueByDataKey } from '../util/ChartUtils'; +import { ReportChartMargin, ReportChartSize, useChartHeight, useChartWidth } from '../context/chartLayoutContext'; +import { TooltipPortalContext } from '../context/tooltipPortalContext'; +import { RechartsWrapper } from './RechartsWrapper'; +import { RechartsStoreProvider } from '../state/RechartsStoreProvider'; +import { useAppDispatch } from '../state/hooks'; +import { mouseLeaveItem, setActiveClickItemIndex, setActiveMouseOverItemIndex } from '../state/tooltipSlice'; +import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings'; +import { SetComputedData } from '../context/chartDataContext'; +import { svgPropertiesNoEvents, svgPropertiesNoEventsFromUnknown } from '../util/svgPropertiesNoEvents'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +import { isPositiveNumber } from '../util/isWellBehavedNumber'; +import { isNotNil, noop } from '../util/DataUtils'; +import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId'; +var interpolationGenerator = (a, b) => { + var ka = +a; + var kb = b - ka; + return t => ka + kb * t; +}; +var centerY = node => node.y + node.dy / 2; + +// TODO why is this not reading dataKey? +var getValue = entry => entry && entry.value || 0; +var getSumOfIds = (links, ids) => ids.reduce((result, id) => result + getValue(links[id]), 0); +var getSumWithWeightedSource = (tree, links, ids) => ids.reduce((result, id) => { + var link = links[id]; + if (link == null) { + return result; + } + var sourceNode = tree[link.source]; + if (sourceNode == null) { + return result; + } + return result + centerY(sourceNode) * getValue(links[id]); +}, 0); +var getSumWithWeightedTarget = (tree, links, ids) => ids.reduce((result, id) => { + var link = links[id]; + if (link == null) { + return result; + } + var targetNode = tree[link.target]; + if (targetNode == null) { + return result; + } + return result + centerY(targetNode) * getValue(links[id]); +}, 0); +var ascendingY = (a, b) => a.y - b.y; +var searchTargetsAndSources = (links, id) => { + var sourceNodes = []; + var sourceLinks = []; + var targetNodes = []; + var targetLinks = []; + for (var i = 0, len = links.length; i < len; i++) { + var link = links[i]; + if ((link === null || link === void 0 ? void 0 : link.source) === id) { + targetNodes.push(link.target); + targetLinks.push(i); + } + if ((link === null || link === void 0 ? void 0 : link.target) === id) { + sourceNodes.push(link.source); + sourceLinks.push(i); + } + } + return { + sourceNodes, + sourceLinks, + targetLinks, + targetNodes + }; +}; +var updateDepthOfTargets = (tree, curNode) => { + var { + targetNodes + } = curNode; + for (var i = 0, len = targetNodes.length; i < len; i++) { + var targetNode = targetNodes[i]; + if (targetNode == null) { + continue; + } + var target = tree[targetNode]; + if (target) { + target.depth = Math.max(curNode.depth + 1, target.depth); + updateDepthOfTargets(tree, target); + } + } +}; +var getNodesTree = (_ref, width, nodeWidth, align) => { + var _maxBy$depth, _maxBy; + var { + nodes, + links + } = _ref; + var tree = nodes.map((entry, index) => { + var result = searchTargetsAndSources(links, index); + return _objectSpread(_objectSpread(_objectSpread({}, entry), result), {}, { + value: Math.max(getSumOfIds(links, result.sourceLinks), getSumOfIds(links, result.targetLinks)), + depth: 0 + }); + }); + for (var i = 0, len = tree.length; i < len; i++) { + var node = tree[i]; + if (node != null && !node.sourceNodes.length) { + updateDepthOfTargets(tree, node); + } + } + var maxDepth = (_maxBy$depth = (_maxBy = maxBy(tree, entry => entry.depth)) === null || _maxBy === void 0 ? void 0 : _maxBy.depth) !== null && _maxBy$depth !== void 0 ? _maxBy$depth : 0; + if (maxDepth >= 1) { + var childWidth = (width - nodeWidth) / maxDepth; + for (var _i = 0, _len = tree.length; _i < _len; _i++) { + var _node = tree[_i]; + if (_node == null) { + continue; + } + if (!_node.targetNodes.length) { + if (align === 'justify') { + _node.depth = maxDepth; + } + } + _node.x = _node.depth * childWidth; + _node.dx = nodeWidth; + } + } + return { + tree, + maxDepth + }; +}; +var getDepthTree = tree => { + var result = []; + for (var i = 0, len = tree.length; i < len; i++) { + var _result$node$depth; + var node = tree[i]; + if (node == null) { + continue; + } + if (!result[node.depth]) { + result[node.depth] = []; + } + (_result$node$depth = result[node.depth]) === null || _result$node$depth === void 0 || _result$node$depth.push(node); + } + return result; +}; +var updateYOfTree = (depthTree, height, nodePadding, links, verticalAlign) => { + var yRatio = Math.min(...depthTree.map(nodes => (height - (nodes.length - 1) * nodePadding) / sumBy(nodes, getValue))); + for (var d = 0, maxDepth = depthTree.length; d < maxDepth; d++) { + var nodes = depthTree[d]; + if (nodes == null) { + continue; + } + if (verticalAlign === 'top') { + var currentY = 0; + for (var i = 0, len = nodes.length; i < len; i++) { + var node = nodes[i]; + if (node == null) { + continue; + } + node.dy = node.value * yRatio; + node.y = currentY; + currentY += node.dy + nodePadding; + } + } else { + for (var _i2 = 0, _len2 = nodes.length; _i2 < _len2; _i2++) { + var _node2 = nodes[_i2]; + if (_node2 == null) { + continue; + } + _node2.y = _i2; + _node2.dy = _node2.value * yRatio; + } + } + } + return links.map(link => _objectSpread(_objectSpread({}, link), {}, { + dy: getValue(link) * yRatio + })); +}; +var resolveCollisions = function resolveCollisions(depthTree, height, nodePadding) { + var sort = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true; + for (var i = 0, len = depthTree.length; i < len; i++) { + var nodes = depthTree[i]; + if (nodes == null) { + continue; + } + var n = nodes.length; + + // Sort by the value of y + if (sort) { + nodes.sort(ascendingY); + } + var y0 = 0; + for (var j = 0; j < n; j++) { + var node = nodes[j]; + if (node == null) { + continue; + } + var dy = y0 - node.y; + if (dy > 0) { + node.y += dy; + } + y0 = node.y + node.dy + nodePadding; + } + y0 = height + nodePadding; + for (var _j = n - 1; _j >= 0; _j--) { + var _node3 = nodes[_j]; + if (_node3 == null) { + continue; + } + var _dy = _node3.y + _node3.dy + nodePadding - y0; + if (_dy > 0) { + _node3.y -= _dy; + y0 = _node3.y; + } else { + break; + } + } + } +}; +var relaxLeftToRight = (tree, depthTree, links, alpha) => { + for (var i = 0, maxDepth = depthTree.length; i < maxDepth; i++) { + var nodes = depthTree[i]; + if (nodes == null) { + continue; + } + for (var j = 0, len = nodes.length; j < len; j++) { + var node = nodes[j]; + if (node == null) { + continue; + } + if (node.sourceLinks.length) { + var sourceSum = getSumOfIds(links, node.sourceLinks); + var weightedSum = getSumWithWeightedSource(tree, links, node.sourceLinks); + var y = weightedSum / sourceSum; + node.y += (y - centerY(node)) * alpha; + } + } + } +}; +var relaxRightToLeft = (tree, depthTree, links, alpha) => { + for (var i = depthTree.length - 1; i >= 0; i--) { + var nodes = depthTree[i]; + if (nodes == null) { + continue; + } + for (var j = 0, len = nodes.length; j < len; j++) { + var node = nodes[j]; + if (node == null) { + continue; + } + if (node.targetLinks.length) { + var targetSum = getSumOfIds(links, node.targetLinks); + var weightedSum = getSumWithWeightedTarget(tree, links, node.targetLinks); + var y = weightedSum / targetSum; + node.y += (y - centerY(node)) * alpha; + } + } + } +}; +var updateYOfLinks = (tree, links) => { + for (var i = 0, len = tree.length; i < len; i++) { + var node = tree[i]; + if (node == null) { + continue; + } + var sy = 0; + var ty = 0; + node.targetLinks.sort((a, b) => { + var _links$a, _links$b, _tree$targetA, _tree$targetB; + var targetA = (_links$a = links[a]) === null || _links$a === void 0 ? void 0 : _links$a.target; + var targetB = (_links$b = links[b]) === null || _links$b === void 0 ? void 0 : _links$b.target; + if (targetA == null || targetB == null) { + return 0; + } + var yA = (_tree$targetA = tree[targetA]) === null || _tree$targetA === void 0 ? void 0 : _tree$targetA.y; + var yB = (_tree$targetB = tree[targetB]) === null || _tree$targetB === void 0 ? void 0 : _tree$targetB.y; + if (yA == null || yB == null) { + return 0; + } + return yA - yB; + }); + node.sourceLinks.sort((a, b) => { + var _links$a2, _links$b2, _tree$sourceA, _tree$sourceB; + var sourceA = (_links$a2 = links[a]) === null || _links$a2 === void 0 ? void 0 : _links$a2.source; + var sourceB = (_links$b2 = links[b]) === null || _links$b2 === void 0 ? void 0 : _links$b2.source; + if (sourceA == null || sourceB == null) { + return 0; + } + var yA = (_tree$sourceA = tree[sourceA]) === null || _tree$sourceA === void 0 ? void 0 : _tree$sourceA.y; + var yB = (_tree$sourceB = tree[sourceB]) === null || _tree$sourceB === void 0 ? void 0 : _tree$sourceB.y; + if (yA == null || yB == null) { + return 0; + } + return yA - yB; + }); + for (var j = 0, tLen = node.targetLinks.length; j < tLen; j++) { + var targetLink = node.targetLinks[j]; + if (targetLink == null) { + continue; + } + var link = links[targetLink]; + if (link) { + // @ts-expect-error we should refactor this to immutable + link.sy = sy; + sy += link.dy; + } + } + for (var _j2 = 0, sLen = node.sourceLinks.length; _j2 < sLen; _j2++) { + var sourceLink = node.sourceLinks[_j2]; + if (sourceLink == null) { + continue; + } + var _link = links[sourceLink]; + if (_link) { + // @ts-expect-error we should refactor this to immutable + _link.ty = ty; + ty += _link.dy; + } + } + } +}; +var computeData = _ref2 => { + var { + data, + width, + height, + iterations, + nodeWidth, + nodePadding, + sort, + verticalAlign, + align + } = _ref2; + var { + links + } = data; + var { + tree + } = getNodesTree(data, width, nodeWidth, align); + var depthTree = getDepthTree(tree); + var linksWithDy = updateYOfTree(depthTree, height, nodePadding, links, verticalAlign); + resolveCollisions(depthTree, height, nodePadding, sort); + if (verticalAlign === 'justify') { + var alpha = 1; + for (var i = 1; i <= iterations; i++) { + relaxRightToLeft(tree, depthTree, linksWithDy, alpha *= 0.99); + resolveCollisions(depthTree, height, nodePadding, sort); + relaxLeftToRight(tree, depthTree, linksWithDy, alpha); + resolveCollisions(depthTree, height, nodePadding, sort); + } + } + updateYOfLinks(tree, linksWithDy); + // @ts-expect-error updateYOfLinks modifies the links array to add sy and ty in place + var newLinks = linksWithDy; + return { + nodes: tree, + links: newLinks + }; +}; +var getNodeCoordinateOfTooltip = item => { + return { + x: +item.x + +item.width / 2, + y: +item.y + +item.height / 2 + }; +}; +var getLinkCoordinateOfTooltip = item => { + return 'sourceX' in item ? { + x: (item.sourceX + item.targetX) / 2, + y: (item.sourceY + item.targetY) / 2 + } : undefined; +}; +var getPayloadOfTooltip = (item, type, nameKey) => { + var { + payload + } = item; + if (type === 'node') { + return { + payload, + name: getValueByDataKey(payload, nameKey, ''), + value: getValueByDataKey(payload, 'value') + }; + } + if ('source' in payload && payload.source && payload.target) { + var sourceName = getValueByDataKey(payload.source, nameKey, ''); + var targetName = getValueByDataKey(payload.target, nameKey, ''); + return { + payload, + name: "".concat(sourceName, " - ").concat(targetName), + value: getValueByDataKey(payload, 'value') + }; + } + return undefined; +}; +export var sankeyPayloadSearcher = (_, activeIndex, computedData, nameKey) => { + if (activeIndex == null || typeof activeIndex !== 'string') { + return undefined; + } + if (computedData == null || typeof computedData !== 'object') { + return undefined; + } + var splitIndex = activeIndex.split('-'); + var [targetType, index] = splitIndex; + var item = get(computedData, "".concat(targetType, "s[").concat(index, "]")); + if (item) { + var payload = getPayloadOfTooltip(item, targetType, nameKey); + return payload; + } + return undefined; +}; +var options = { + chartName: 'Sankey', + defaultTooltipEventType: 'item', + validateTooltipEventTypes: ['item'], + tooltipPayloadSearcher: sankeyPayloadSearcher, + eventEmitter: undefined +}; +var SetSankeyTooltipEntrySettings = /*#__PURE__*/React.memo(_ref3 => { + var { + dataKey, + nameKey, + stroke, + strokeWidth, + fill, + name, + data, + id + } = _ref3; + var tooltipEntrySettings = { + dataDefinedOnItem: data, + getPosition: noop, + settings: { + stroke, + strokeWidth, + fill, + dataKey, + name, + nameKey, + hide: false, + type: undefined, + color: fill, + unit: '', + graphicalItemId: id + } + }; + return /*#__PURE__*/React.createElement(SetTooltipEntrySettings, { + tooltipEntrySettings: tooltipEntrySettings + }); +}); + +// TODO: improve types - NodeOptions uses SankeyNode, LinkOptions uses LinkProps. Standardize. + +function renderLinkItem(option, props) { + if (/*#__PURE__*/React.isValidElement(option)) { + return /*#__PURE__*/React.cloneElement(option, props); + } + if (typeof option === 'function') { + return option(props); + } + var { + sourceX, + sourceY, + sourceControlX, + targetX, + targetY, + targetControlX, + linkWidth + } = props, + others = _objectWithoutProperties(props, _excluded); + return /*#__PURE__*/React.createElement("path", _extends({ + className: "recharts-sankey-link", + d: "\n M".concat(sourceX, ",").concat(sourceY, "\n C").concat(sourceControlX, ",").concat(sourceY, " ").concat(targetControlX, ",").concat(targetY, " ").concat(targetX, ",").concat(targetY, "\n "), + fill: "none", + stroke: "#333", + strokeWidth: linkWidth, + strokeOpacity: "0.2" + }, svgPropertiesNoEvents(others))); +} +var buildLinkProps = _ref4 => { + var { + link, + nodes, + left, + top, + i, + linkContent, + linkCurvature + } = _ref4; + var { + sy: sourceRelativeY, + ty: targetRelativeY, + dy: linkWidth + } = link; + var sourceNode = nodes[link.source]; + var targetNode = nodes[link.target]; + if (sourceNode == null || targetNode == null) { + return undefined; + } + var sourceX = sourceNode.x + sourceNode.dx + left; + var targetX = targetNode.x + left; + var interpolationFunc = interpolationGenerator(sourceX, targetX); + var sourceControlX = interpolationFunc(linkCurvature); + var targetControlX = interpolationFunc(1 - linkCurvature); + var sourceY = sourceNode.y + sourceRelativeY + linkWidth / 2 + top; + var targetY = targetNode.y + targetRelativeY + linkWidth / 2 + top; + var linkProps = _objectSpread({ + sourceX, + // @ts-expect-error the linkContent from below is contributing unknown props + targetX, + sourceY, + // @ts-expect-error the linkContent from below is contributing unknown props + targetY, + sourceControlX, + targetControlX, + sourceRelativeY, + targetRelativeY, + linkWidth, + index: i, + payload: _objectSpread(_objectSpread({}, link), {}, { + source: sourceNode, + target: targetNode + }) + }, svgPropertiesNoEventsFromUnknown(linkContent)); + return linkProps; +}; +function SankeyLinkElement(_ref5) { + var { + graphicalItemId, + props, + i, + linkContent, + onMouseEnter: _onMouseEnter, + onMouseLeave: _onMouseLeave, + onClick: _onClick, + dataKey + } = _ref5; + var activeCoordinate = getLinkCoordinateOfTooltip(props); + var activeIndex = "link-".concat(i); + var dispatch = useAppDispatch(); + var events = { + onMouseEnter: e => { + dispatch(setActiveMouseOverItemIndex({ + activeIndex, + activeDataKey: dataKey, + activeCoordinate, + activeGraphicalItemId: graphicalItemId + })); + _onMouseEnter(props, e); + }, + onMouseLeave: e => { + dispatch(mouseLeaveItem()); + _onMouseLeave(props, e); + }, + onClick: e => { + dispatch(setActiveClickItemIndex({ + activeIndex, + activeDataKey: dataKey, + activeCoordinate, + activeGraphicalItemId: graphicalItemId + })); + _onClick(props, e); + } + }; + return /*#__PURE__*/React.createElement(Layer, events, renderLinkItem(linkContent, props)); +} +function AllSankeyLinkElements(_ref6) { + var { + graphicalItemId, + modifiedLinks, + links, + linkContent, + onMouseEnter, + onMouseLeave, + onClick, + dataKey + } = _ref6; + return /*#__PURE__*/React.createElement(Layer, { + className: "recharts-sankey-links", + key: "recharts-sankey-links" + }, links.map((link, i) => { + var linkProps = modifiedLinks[i]; + if (linkProps == null) { + return null; + } + return /*#__PURE__*/React.createElement(SankeyLinkElement, { + graphicalItemId: graphicalItemId, + key: "link-".concat(link.source, "-").concat(link.target, "-").concat(link.value), + props: linkProps, + linkContent: linkContent, + i: i, + onMouseEnter: onMouseEnter, + onMouseLeave: onMouseLeave, + onClick: onClick, + dataKey: dataKey + }); + })); +} +function renderNodeItem(option, props) { + if (/*#__PURE__*/React.isValidElement(option)) { + return /*#__PURE__*/React.cloneElement(option, props); + } + if (typeof option === 'function') { + return option(props); + } + return ( + /*#__PURE__*/ + // @ts-expect-error recharts radius is not compatible with SVG radius + React.createElement(Rectangle, _extends({ + className: "recharts-sankey-node", + fill: "#0088fe", + fillOpacity: "0.8" + }, svgPropertiesNoEvents(props))) + ); +} +var buildNodeProps = _ref7 => { + var { + node, + nodeContent, + top, + left, + i + } = _ref7; + var { + x, + y, + dx, + dy + } = node; + // @ts-expect-error nodeContent is passing in unknown props + var nodeProps = _objectSpread(_objectSpread({}, svgPropertiesNoEventsFromUnknown(nodeContent)), {}, { + x: x + left, + y: y + top, + width: dx, + height: dy, + index: i, + payload: node + }); + return nodeProps; +}; +function NodeElement(_ref8) { + var { + graphicalItemId, + props, + nodeContent, + i, + onMouseEnter: _onMouseEnter2, + onMouseLeave: _onMouseLeave2, + onClick: _onClick2, + dataKey + } = _ref8; + var dispatch = useAppDispatch(); + var activeCoordinate = getNodeCoordinateOfTooltip(props); + var activeIndex = "node-".concat(i); + var events = { + onMouseEnter: e => { + dispatch(setActiveMouseOverItemIndex({ + activeIndex, + activeDataKey: dataKey, + activeCoordinate, + activeGraphicalItemId: graphicalItemId + })); + _onMouseEnter2(props, e); + }, + onMouseLeave: e => { + dispatch(mouseLeaveItem()); + _onMouseLeave2(props, e); + }, + onClick: e => { + dispatch(setActiveClickItemIndex({ + activeIndex, + activeDataKey: dataKey, + activeCoordinate, + activeGraphicalItemId: graphicalItemId + })); + _onClick2(props, e); + } + }; + return /*#__PURE__*/React.createElement(Layer, events, renderNodeItem(nodeContent, props)); +} +function AllNodeElements(_ref9) { + var { + graphicalItemId, + modifiedNodes, + nodeContent, + onMouseEnter, + onMouseLeave, + onClick, + dataKey + } = _ref9; + return /*#__PURE__*/React.createElement(Layer, { + className: "recharts-sankey-nodes", + key: "recharts-sankey-nodes" + }, modifiedNodes.map((modifiedNode, i) => { + return /*#__PURE__*/React.createElement(NodeElement, { + graphicalItemId: graphicalItemId, + key: "node-".concat(modifiedNode.index, "-").concat(modifiedNode.x, "-").concat(modifiedNode.y), + props: modifiedNode, + nodeContent: nodeContent, + i: i, + onMouseEnter: onMouseEnter, + onMouseLeave: onMouseLeave, + onClick: onClick, + dataKey: dataKey + }); + })); +} +export var sankeyDefaultProps = { + align: 'justify', + dataKey: 'value', + iterations: 32, + linkCurvature: 0.5, + margin: { + top: 5, + right: 5, + bottom: 5, + left: 5 + }, + nameKey: 'name', + nodePadding: 10, + nodeWidth: 10, + sort: true, + verticalAlign: 'justify' +}; +function SankeyImpl(props) { + var { + className, + style, + children, + id + } = props, + others = _objectWithoutProperties(props, _excluded2); + var { + link, + dataKey, + node, + onMouseEnter, + onMouseLeave, + onClick, + data, + iterations, + nodeWidth, + nodePadding, + sort, + linkCurvature, + margin, + verticalAlign, + align + } = props; + var attrs = svgPropertiesNoEvents(others); + var width = useChartWidth(); + var height = useChartHeight(); + var { + links, + modifiedLinks, + modifiedNodes + } = useMemo(() => { + var _margin$left, _margin$right, _margin$top, _margin$bottom; + if (!data || !width || !height || width <= 0 || height <= 0) { + return { + nodes: [], + links: [], + modifiedLinks: [], + modifiedNodes: [] + }; + } + var contentWidth = width - ((_margin$left = margin.left) !== null && _margin$left !== void 0 ? _margin$left : 0) - ((_margin$right = margin.right) !== null && _margin$right !== void 0 ? _margin$right : 0); + var contentHeight = height - ((_margin$top = margin.top) !== null && _margin$top !== void 0 ? _margin$top : 0) - ((_margin$bottom = margin.bottom) !== null && _margin$bottom !== void 0 ? _margin$bottom : 0); + var computed = computeData({ + data, + width: contentWidth, + height: contentHeight, + iterations, + nodeWidth, + nodePadding, + sort, + verticalAlign, + align + }); + var top = margin.top || 0; + var left = margin.left || 0; + var newModifiedLinks = computed.links.map((l, i) => { + return buildLinkProps({ + link: l, + nodes: computed.nodes, + i, + top, + left, + linkContent: link, + linkCurvature + }); + }).filter(isNotNil); + var newModifiedNodes = computed.nodes.map((n, i) => { + return buildNodeProps({ + node: n, + nodeContent: node, + i, + top, + left + }); + }); + return { + nodes: computed.nodes, + links: computed.links, + modifiedLinks: newModifiedLinks, + modifiedNodes: newModifiedNodes + }; + }, [data, width, height, margin, iterations, nodeWidth, nodePadding, sort, link, node, linkCurvature, align, verticalAlign]); + var handleMouseEnter = useCallback((item, type, e) => { + if (onMouseEnter) { + onMouseEnter(item, type, e); + } + }, [onMouseEnter]); + var handleMouseLeave = useCallback((item, type, e) => { + if (onMouseLeave) { + onMouseLeave(item, type, e); + } + }, [onMouseLeave]); + var handleClick = useCallback((item, type, e) => { + if (onClick) { + onClick(item, type, e); + } + }, [onClick]); + if (!isPositiveNumber(width) || !isPositiveNumber(height) || !data || !data.links || !data.nodes) { + return null; + } + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetComputedData, { + computedData: { + links: modifiedLinks, + nodes: modifiedNodes + } + }), /*#__PURE__*/React.createElement(Surface, _extends({}, attrs, { + width: width, + height: height + }), children, /*#__PURE__*/React.createElement(AllSankeyLinkElements, { + graphicalItemId: id, + links: links, + modifiedLinks: modifiedLinks, + linkContent: link, + dataKey: dataKey, + onMouseEnter: (linkProps, e) => handleMouseEnter(linkProps, 'link', e), + onMouseLeave: (linkProps, e) => handleMouseLeave(linkProps, 'link', e), + onClick: (linkProps, e) => handleClick(linkProps, 'link', e) + }), /*#__PURE__*/React.createElement(AllNodeElements, { + graphicalItemId: id, + modifiedNodes: modifiedNodes, + nodeContent: node, + dataKey: dataKey, + onMouseEnter: (nodeProps, e) => handleMouseEnter(nodeProps, 'node', e), + onMouseLeave: (nodeProps, e) => handleMouseLeave(nodeProps, 'node', e), + onClick: (nodeProps, e) => handleClick(nodeProps, 'node', e) + }))); +} + +/** + * Flow diagram in which the width of the arrows is proportional to the flow rate. + * It is typically used to visualize energy or material or cost transfers between processes. + * + * @consumes ResponsiveContainerContext + * @provides TooltipEntrySettings + */ +export function Sankey(outsideProps) { + var props = resolveDefaultProps(outsideProps, sankeyDefaultProps); + var { + width, + height, + style, + className, + id: externalId + } = props; + var [tooltipPortal, setTooltipPortal] = useState(null); + return /*#__PURE__*/React.createElement(RechartsStoreProvider, { + preloadedState: { + options + }, + reduxStoreName: className !== null && className !== void 0 ? className : 'Sankey' + }, /*#__PURE__*/React.createElement(ReportChartSize, { + width: width, + height: height + }), /*#__PURE__*/React.createElement(ReportChartMargin, { + margin: props.margin + }), /*#__PURE__*/React.createElement(RechartsWrapper, { + className: className, + style: style, + width: width, + height: height + /* + * Sankey, same as Treemap, suffers from overfilling the container + * and causing infinite render loops where the chart keeps growing. + */, + responsive: false, + ref: node => { + if (node && !tooltipPortal) { + setTooltipPortal(node); + } + }, + onMouseEnter: undefined, + onMouseLeave: undefined, + onClick: undefined, + onMouseMove: undefined, + onMouseDown: undefined, + onMouseUp: undefined, + onContextMenu: undefined, + onDoubleClick: undefined, + onTouchStart: undefined, + onTouchMove: undefined, + onTouchEnd: undefined + }, /*#__PURE__*/React.createElement(TooltipPortalContext.Provider, { + value: tooltipPortal + }, /*#__PURE__*/React.createElement(RegisterGraphicalItemId, { + id: externalId, + type: "sankey" + }, id => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetSankeyTooltipEntrySettings, { + dataKey: props.dataKey, + nameKey: props.nameKey, + stroke: props.stroke, + strokeWidth: props.strokeWidth, + fill: props.fill, + name: props.name, + data: props.data, + id: id + }), /*#__PURE__*/React.createElement(SankeyImpl, _extends({}, props, { + id: id + }))))))); +} +Sankey.displayName = 'Sankey'; Index: node_modules/recharts/es6/chart/ScatterChart.js =================================================================== --- node_modules/recharts/es6/chart/ScatterChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/chart/ScatterChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { forwardRef } from 'react'; +import { arrayTooltipSearcher } from '../state/optionsSlice'; +import { CartesianChart } from './CartesianChart'; +var allowedTooltipTypes = ['item']; + +/** + * @consumes ResponsiveContainerContext + * @provides CartesianViewBoxContext + * @provides CartesianChartContext + */ +export var ScatterChart = /*#__PURE__*/forwardRef((props, ref) => { + return /*#__PURE__*/React.createElement(CartesianChart, { + chartName: "ScatterChart", + defaultTooltipEventType: "item", + validateTooltipEventTypes: allowedTooltipTypes, + tooltipPayloadSearcher: arrayTooltipSearcher, + categoricalChartProps: props, + ref: ref + }); +}); Index: node_modules/recharts/es6/chart/SunburstChart.js =================================================================== --- node_modules/recharts/es6/chart/SunburstChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/chart/SunburstChart.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,328 @@ +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +import * as React from 'react'; +import { useState } from 'react'; +import { scaleLinear } from 'victory-vendor/d3-scale'; +import { clsx } from 'clsx'; +import get from 'es-toolkit/compat/get'; +import { Surface } from '../container/Surface'; +import { Layer } from '../container/Layer'; +import { Sector } from '../shape/Sector'; +import { Text } from '../component/Text'; +import { polarToCartesian } from '../util/PolarUtils'; +import { ReportChartMargin, ReportChartSize, useChartHeight, useChartWidth } from '../context/chartLayoutContext'; +import { TooltipPortalContext } from '../context/tooltipPortalContext'; +import { RechartsWrapper } from './RechartsWrapper'; +import { mouseLeaveItem, setActiveClickItemIndex, setActiveMouseOverItemIndex } from '../state/tooltipSlice'; +import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings'; +import { RechartsStoreProvider } from '../state/RechartsStoreProvider'; +import { useAppDispatch } from '../state/hooks'; +import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; + +/** + * We require tooltipIndex on each node internally to track which node is active in the tooltip. + * This is not required from the outside user - we can calculate it as we traverse the tree. + */ + +var defaultTextProps = { + fontWeight: 'bold', + paintOrder: 'stroke fill', + fontSize: '.75rem', + stroke: '#FFF', + fill: 'black', + pointerEvents: 'none' +}; +function getMaxDepthOf(node) { + if (!node.children || node.children.length === 0) return 1; + + // Calculate depth for each child and find the maximum + var childDepths = node.children.map(d => getMaxDepthOf(d)); + return 1 + Math.max(...childDepths); +} +var SetSunburstTooltipEntrySettings = /*#__PURE__*/React.memo(_ref => { + var { + dataKey, + nameKey, + data, + stroke, + fill, + positions, + id + } = _ref; + var tooltipEntrySettings = { + dataDefinedOnItem: data.children, + getPosition: index => positions.get(index), + // Sunburst does not support many of the properties as other charts do so there's plenty of defaults here + settings: { + stroke, + strokeWidth: undefined, + fill, + nameKey, + dataKey, + // if there is a nameKey use it, otherwise make the name of the tooltip the dataKey itself + name: nameKey ? undefined : dataKey, + hide: false, + type: undefined, + color: fill, + unit: '', + graphicalItemId: id + } + }; + return /*#__PURE__*/React.createElement(SetTooltipEntrySettings, { + tooltipEntrySettings: tooltipEntrySettings + }); +}); + +// Why is margin not a sunburst prop? No clue. Probably it should be +var defaultSunburstMargin = { + top: 0, + right: 0, + bottom: 0, + left: 0 +}; +export var payloadSearcher = (data, activeIndex) => { + if (activeIndex == null) { + return undefined; + } + return get(data, activeIndex); +}; +var addToSunburstNodeIndex = function addToSunburstNodeIndex(indexInChildrenArr) { + var activeTooltipIndexSoFar = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ''; + return "".concat(activeTooltipIndexSoFar, "children[").concat(indexInChildrenArr, "]"); +}; +var preloadedState = { + options: { + validateTooltipEventTypes: ['item'], + defaultTooltipEventType: 'item', + chartName: 'Sunburst', + tooltipPayloadSearcher: payloadSearcher, + eventEmitter: undefined + } +}; +export var defaultSunburstChartProps = { + padding: 2, + dataKey: 'value', + nameKey: 'name', + ringPadding: 2, + innerRadius: 50, + fill: '#333', + stroke: '#FFF', + textOptions: defaultTextProps, + startAngle: 0, + endAngle: 360, + responsive: false +}; +var SunburstChartImpl = _ref2 => { + var { + className, + data, + children, + padding, + dataKey, + nameKey, + ringPadding, + innerRadius, + fill, + stroke, + textOptions, + outerRadius: outerRadiusFromProps, + cx: cxFromProps, + cy: cyFromProps, + startAngle, + endAngle, + onClick, + onMouseEnter, + onMouseLeave, + id + } = _ref2; + var dispatch = useAppDispatch(); + var width = useChartWidth(); + var height = useChartHeight(); + if (width == null || height == null) { + return null; + } + var outerRadius = outerRadiusFromProps !== null && outerRadiusFromProps !== void 0 ? outerRadiusFromProps : Math.min(width, height) / 2; + var cx = cxFromProps !== null && cxFromProps !== void 0 ? cxFromProps : width / 2; + var cy = cyFromProps !== null && cyFromProps !== void 0 ? cyFromProps : height / 2; + var rScale = scaleLinear([0, data[dataKey]], [0, endAngle]); + var treeDepth = getMaxDepthOf(data); + var thickness = (outerRadius - innerRadius) / treeDepth; + var sectors = []; + var positions = new Map([]); + + // event handlers + function handleMouseEnter(node, e) { + if (onMouseEnter) onMouseEnter(node, e); + dispatch(setActiveMouseOverItemIndex({ + activeIndex: node.tooltipIndex, + activeDataKey: dataKey, + activeCoordinate: positions.get(node.name), + activeGraphicalItemId: id + })); + } + function handleMouseLeave(node, e) { + if (onMouseLeave) onMouseLeave(node, e); + dispatch(mouseLeaveItem()); + } + function handleClick(node) { + if (onClick) onClick(node); + dispatch(setActiveClickItemIndex({ + activeIndex: node.tooltipIndex, + activeDataKey: dataKey, + activeCoordinate: positions.get(node.name), + activeGraphicalItemId: id + })); + } + + // recursively add nodes for each data point and its children + function drawArcs(childNodes, options) { + var depth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1; + var { + radius, + innerR, + initialAngle, + childColor, + nestedActiveTooltipIndex + } = options; + var currentAngle = initialAngle; + if (!childNodes) return; // base case: no children of this node + + childNodes.forEach((d, i) => { + var _ref3, _d$fill; + var currentTooltipIndex = depth === 1 ? "[".concat(i, "]") : addToSunburstNodeIndex(i, nestedActiveTooltipIndex); + var nodeWithIndex = _objectSpread(_objectSpread({}, d), {}, { + tooltipIndex: currentTooltipIndex + }); + var arcLength = rScale(d[dataKey]); + var start = currentAngle; + // color priority - if there's a color on the individual point use that, otherwise use parent color or default + var fillColor = (_ref3 = (_d$fill = d === null || d === void 0 ? void 0 : d.fill) !== null && _d$fill !== void 0 ? _d$fill : childColor) !== null && _ref3 !== void 0 ? _ref3 : fill; + var { + x: textX, + y: textY + } = polarToCartesian(0, 0, innerR + radius / 2, -(start + arcLength - arcLength / 2)); + currentAngle += arcLength; + sectors.push(/*#__PURE__*/React.createElement("g", { + key: "sunburst-sector-".concat(d.name, "-").concat(i) + }, /*#__PURE__*/React.createElement(Sector, { + onClick: () => handleClick(nodeWithIndex), + onMouseEnter: e => handleMouseEnter(nodeWithIndex, e), + onMouseLeave: e => handleMouseLeave(nodeWithIndex, e), + fill: fillColor, + stroke: stroke, + strokeWidth: padding, + startAngle: start, + endAngle: start + arcLength, + innerRadius: innerR, + outerRadius: innerR + radius, + cx: cx, + cy: cy + }), /*#__PURE__*/React.createElement(Text, _extends({}, textOptions, { + alignmentBaseline: "middle", + textAnchor: "middle", + x: textX + cx, + y: cy - textY + }), d[dataKey]))); + var { + x: tooltipX, + y: tooltipY + } = polarToCartesian(cx, cy, innerR + radius / 2, start); + positions.set(d.name, { + x: tooltipX, + y: tooltipY + }); + return drawArcs(d.children, { + radius, + innerR: innerR + radius + ringPadding, + initialAngle: start, + childColor: fillColor, + nestedActiveTooltipIndex: currentTooltipIndex + }, depth + 1); + }); + } + drawArcs(data.children, { + radius: thickness, + innerR: innerRadius, + initialAngle: startAngle + }); + var layerClass = clsx('recharts-sunburst', className); + return /*#__PURE__*/React.createElement(Surface, { + width: width, + height: height + }, /*#__PURE__*/React.createElement(Layer, { + className: layerClass + }, sectors), /*#__PURE__*/React.createElement(SetSunburstTooltipEntrySettings, { + dataKey: dataKey, + nameKey: nameKey, + data: data, + stroke: stroke, + fill: fill, + positions: positions, + id: id + }), children); +}; + +/** + * The sunburst is a hierarchical chart, similar to a {@link Treemap}, plotted in polar coordinates. + * Sunburst charts effectively convey the hierarchical relationships and proportions within each level. + * It is easy to see all the middle layers in the hierarchy, which might get lost in other visualizations. + * For some datasets, the radial layout may be more visually appealing and intuitive than a traditional {@link Treemap}. + * + * @consumes ResponsiveContainerContext + * @provides TooltipEntrySettings + */ +export var SunburstChart = outsideProps => { + var props = resolveDefaultProps(outsideProps, defaultSunburstChartProps); + var { + className, + width, + height, + responsive, + style, + id: externalId + } = props; + var [tooltipPortal, setTooltipPortal] = useState(null); + return /*#__PURE__*/React.createElement(RechartsStoreProvider, { + preloadedState: preloadedState, + reduxStoreName: className !== null && className !== void 0 ? className : 'SunburstChart' + }, /*#__PURE__*/React.createElement(ReportChartSize, { + width: width, + height: height + }), /*#__PURE__*/React.createElement(ReportChartMargin, { + margin: defaultSunburstMargin + }), /*#__PURE__*/React.createElement(TooltipPortalContext.Provider, { + value: tooltipPortal + }, /*#__PURE__*/React.createElement(RechartsWrapper, { + className: className, + width: width, + height: height, + responsive: responsive, + style: style, + ref: node => { + if (tooltipPortal == null && node != null) { + setTooltipPortal(node); + } + }, + onMouseEnter: undefined, + onMouseLeave: undefined, + onClick: undefined, + onMouseMove: undefined, + onMouseDown: undefined, + onMouseUp: undefined, + onContextMenu: undefined, + onDoubleClick: undefined, + onTouchStart: undefined, + onTouchMove: undefined, + onTouchEnd: undefined + }, /*#__PURE__*/React.createElement(RegisterGraphicalItemId, { + id: externalId, + type: "sunburst" + }, id => /*#__PURE__*/React.createElement(SunburstChartImpl, _extends({}, props, { + id: id + })))))); +}; Index: node_modules/recharts/es6/chart/Treemap.js =================================================================== --- node_modules/recharts/es6/chart/Treemap.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/chart/Treemap.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,830 @@ +var _excluded = ["width", "height", "className", "style", "children", "type"]; +function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } +function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +import * as React from 'react'; +import { PureComponent, useCallback, useState } from 'react'; +import omit from 'es-toolkit/compat/omit'; +import get from 'es-toolkit/compat/get'; +import { Layer } from '../container/Layer'; +import { Surface } from '../container/Surface'; +import { Polygon } from '../shape/Polygon'; +import { Rectangle } from '../shape/Rectangle'; +import { getValueByDataKey } from '../util/ChartUtils'; +import { COLOR_PANEL } from '../util/Constants'; +import { isNan, noop, uniqueId } from '../util/DataUtils'; +import { getStringSize } from '../util/DOMUtils'; +import { ReportChartMargin, useChartHeight, useChartWidth } from '../context/chartLayoutContext'; +import { TooltipPortalContext } from '../context/tooltipPortalContext'; +import { RechartsWrapper } from './RechartsWrapper'; +import { setActiveClickItemIndex, setActiveMouseOverItemIndex } from '../state/tooltipSlice'; +import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings'; +import { RechartsStoreProvider } from '../state/RechartsStoreProvider'; +import { useAppDispatch } from '../state/hooks'; +import { isPositiveNumber } from '../util/isWellBehavedNumber'; +import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents'; +import { CSSTransitionAnimate } from '../animation/CSSTransitionAnimate'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId'; +var NODE_VALUE_KEY = 'value'; + +/** + * This is what end users defines as `data` on Treemap. + */ + +/** + * This is what is returned from `squarify`, the final treemap data structure + * that gets rendered and is stored in + */ + +function isTreemapNode(value) { + return value != null && typeof value === 'object' && 'x' in value && 'y' in value && 'width' in value && 'height' in value && typeof value.x === 'number' && typeof value.y === 'number' && typeof value.width === 'number' && typeof value.height === 'number'; +} +export var treemapPayloadSearcher = (data, activeIndex) => { + if (!data || !activeIndex) { + return undefined; + } + return get(data, activeIndex); +}; +export var addToTreemapNodeIndex = function addToTreemapNodeIndex(indexInChildrenArr) { + var activeTooltipIndexSoFar = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ''; + return "".concat(activeTooltipIndexSoFar, "children[").concat(indexInChildrenArr, "]"); +}; +var options = { + chartName: 'Treemap', + defaultTooltipEventType: 'item', + validateTooltipEventTypes: ['item'], + tooltipPayloadSearcher: treemapPayloadSearcher, + eventEmitter: undefined +}; +export var computeNode = _ref => { + var { + depth, + node, + index, + dataKey, + nameKey, + nestedActiveTooltipIndex + } = _ref; + var currentTooltipIndex = depth === 0 ? '' : addToTreemapNodeIndex(index, nestedActiveTooltipIndex); + var { + children + } = node; + var childDepth = depth + 1; + var computedChildren = children && children.length ? children.map((child, i) => computeNode({ + depth: childDepth, + node: child, + index: i, + dataKey, + nameKey, + nestedActiveTooltipIndex: currentTooltipIndex + })) : null; + var nodeValue; + if (computedChildren && computedChildren.length) { + nodeValue = computedChildren.reduce((result, child) => result + child.value, 0); + } else { + // TODO need to verify dataKey + var rawNodeValue = node[dataKey]; + var numericValue = typeof rawNodeValue === 'number' ? rawNodeValue : 0; + nodeValue = isNan(numericValue) || numericValue <= 0 ? 0 : numericValue; + } + return _objectSpread(_objectSpread({}, node), {}, { + children: computedChildren, + // @ts-expect-error getValueByDataKey does not validate the output type + name: getValueByDataKey(node, nameKey, ''), + [NODE_VALUE_KEY]: nodeValue, + depth, + index, + tooltipIndex: currentTooltipIndex + }); +}; +var filterRect = node => ({ + x: node.x, + y: node.y, + width: node.width, + height: node.height +}); +// Compute the area for each child based on value & scale. +var getAreaOfChildren = (children, areaValueRatio) => { + var ratio = areaValueRatio < 0 ? 0 : areaValueRatio; + return children.map(child => { + var area = child[NODE_VALUE_KEY] * ratio; + return _objectSpread(_objectSpread({}, child), {}, { + area: isNan(area) || area <= 0 ? 0 : area + }); + }); +}; + +// Computes the score for the specified row, as the worst aspect ratio. +var getWorstScore = (row, parentSize, aspectRatio) => { + var parentArea = parentSize * parentSize; + var rowArea = row.area * row.area; + var { + min, + max + } = row.reduce((result, child) => ({ + min: Math.min(result.min, child.area), + max: Math.max(result.max, child.area) + }), { + min: Infinity, + max: 0 + }); + return rowArea ? Math.max(parentArea * max * aspectRatio / rowArea, rowArea / (parentArea * min * aspectRatio)) : Infinity; +}; +var horizontalPosition = (row, parentSize, parentRect, isFlush) => { + var rowHeight = parentSize ? Math.round(row.area / parentSize) : 0; + if (isFlush || rowHeight > parentRect.height) { + rowHeight = parentRect.height; + } + var curX = parentRect.x; + var child; + for (var i = 0, len = row.length; i < len; i++) { + child = row[i]; + if (child == null) { + continue; + } + child.x = curX; + child.y = parentRect.y; + child.height = rowHeight; + child.width = Math.min(rowHeight ? Math.round(child.area / rowHeight) : 0, parentRect.x + parentRect.width - curX); + curX += child.width; + } + // add the remain x to the last one of row + if (child != null) { + child.width += parentRect.x + parentRect.width - curX; + } + return _objectSpread(_objectSpread({}, parentRect), {}, { + y: parentRect.y + rowHeight, + height: parentRect.height - rowHeight + }); +}; +var verticalPosition = (row, parentSize, parentRect, isFlush) => { + var rowWidth = parentSize ? Math.round(row.area / parentSize) : 0; + if (isFlush || rowWidth > parentRect.width) { + rowWidth = parentRect.width; + } + var curY = parentRect.y; + var child; + for (var i = 0, len = row.length; i < len; i++) { + child = row[i]; + if (child == null) { + continue; + } + child.x = parentRect.x; + child.y = curY; + child.width = rowWidth; + child.height = Math.min(rowWidth ? Math.round(child.area / rowWidth) : 0, parentRect.y + parentRect.height - curY); + curY += child.height; + } + if (child) { + child.height += parentRect.y + parentRect.height - curY; + } + return _objectSpread(_objectSpread({}, parentRect), {}, { + x: parentRect.x + rowWidth, + width: parentRect.width - rowWidth + }); +}; +var position = (row, parentSize, parentRect, isFlush) => { + if (parentSize === parentRect.width) { + return horizontalPosition(row, parentSize, parentRect, isFlush); + } + return verticalPosition(row, parentSize, parentRect, isFlush); +}; +// Recursively arranges the specified node's children into squarified rows. +var squarify = (node, aspectRatio) => { + var { + children + } = node; + if (children && children.length) { + var rect = filterRect(node); + // @ts-expect-error we can't create an array with static property on a single line so typescript will complain. + var row = []; + var best = Infinity; // the best row score so far + var child, score; // the current row score + var size = Math.min(rect.width, rect.height); // initial orientation + var scaleChildren = getAreaOfChildren(children, rect.width * rect.height / node[NODE_VALUE_KEY]); + var tempChildren = scaleChildren.slice(); + + // why are we setting static properties on an array? + row.area = 0; + while (tempChildren.length > 0) { + [child] = tempChildren; + if (child == null) { + continue; + } + // row first + row.push(child); + row.area += child.area; + score = getWorstScore(row, size, aspectRatio); + if (score <= best) { + // continue with this orientation + tempChildren.shift(); + best = score; + } else { + var _row$pop$area, _row$pop; + // abort, and try a different orientation + row.area -= (_row$pop$area = (_row$pop = row.pop()) === null || _row$pop === void 0 ? void 0 : _row$pop.area) !== null && _row$pop$area !== void 0 ? _row$pop$area : 0; + rect = position(row, size, rect, false); + size = Math.min(rect.width, rect.height); + row.length = row.area = 0; + best = Infinity; + } + } + if (row.length) { + rect = position(row, size, rect, true); + row.length = row.area = 0; + } + return _objectSpread(_objectSpread({}, node), {}, { + children: scaleChildren.map(c => squarify(c, aspectRatio)) + }); + } + return node; +}; +export var defaultTreeMapProps = { + aspectRatio: 0.5 * (1 + Math.sqrt(5)), + dataKey: 'value', + nameKey: 'name', + type: 'flat', + isAnimationActive: 'auto', + isUpdateAnimationActive: 'auto', + animationBegin: 0, + animationDuration: 1500, + animationEasing: 'linear' +}; +var defaultState = { + isAnimationFinished: false, + formatRoot: null, + currentRoot: undefined, + nestIndex: [], + prevAspectRatio: defaultTreeMapProps.aspectRatio, + prevDataKey: defaultTreeMapProps.dataKey +}; +function ContentItem(_ref2) { + var { + content, + nodeProps, + type, + colorPanel, + onMouseEnter, + onMouseLeave, + onClick + } = _ref2; + if (/*#__PURE__*/React.isValidElement(content)) { + return /*#__PURE__*/React.createElement(Layer, { + onMouseEnter: onMouseEnter, + onMouseLeave: onMouseLeave, + onClick: onClick + }, /*#__PURE__*/React.cloneElement(content, nodeProps)); + } + if (typeof content === 'function') { + return /*#__PURE__*/React.createElement(Layer, { + onMouseEnter: onMouseEnter, + onMouseLeave: onMouseLeave, + onClick: onClick + }, content(nodeProps)); + } + // optimize default shape + var { + x, + y, + width, + height, + index + } = nodeProps; + var arrow = null; + if (width > 10 && height > 10 && nodeProps.children && type === 'nest') { + arrow = /*#__PURE__*/React.createElement(Polygon, { + points: [{ + x: x + 2, + y: y + height / 2 + }, { + x: x + 6, + y: y + height / 2 + 3 + }, { + x: x + 2, + y: y + height / 2 + 6 + }] + }); + } + var text = null; + var nameSize = getStringSize(nodeProps.name); + if (width > 20 && height > 20 && nameSize.width < width && nameSize.height < height) { + text = /*#__PURE__*/React.createElement("text", { + x: x + 8, + y: y + height / 2 + 7, + fontSize: 14 + }, nodeProps.name); + } + var colors = colorPanel || COLOR_PANEL; + return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement(Rectangle, _extends({ + fill: nodeProps.depth < 2 ? colors[index % colors.length] : 'rgba(255,255,255,0)', + stroke: "#fff" + }, omit(nodeProps, ['children']), { + onMouseEnter: onMouseEnter, + onMouseLeave: onMouseLeave, + onClick: onClick, + "data-recharts-item-index": nodeProps.tooltipIndex + })), arrow, text); +} +function ContentItemWithEvents(props) { + var dispatch = useAppDispatch(); + var activeCoordinate = { + x: props.nodeProps.x + props.nodeProps.width / 2, + y: props.nodeProps.y + props.nodeProps.height / 2 + }; + var onMouseEnter = () => { + dispatch(setActiveMouseOverItemIndex({ + activeIndex: props.nodeProps.tooltipIndex, + activeDataKey: props.dataKey, + activeCoordinate, + activeGraphicalItemId: props.id + })); + }; + var onMouseLeave = () => { + // clearing state on mouseLeaveItem causes re-rendering issues + // we don't actually want to do this for TreeMap - we clear state when we leave the entire chart instead + }; + var onClick = () => { + dispatch(setActiveClickItemIndex({ + activeIndex: props.nodeProps.tooltipIndex, + activeDataKey: props.dataKey, + activeCoordinate, + activeGraphicalItemId: props.id + })); + }; + return /*#__PURE__*/React.createElement(ContentItem, _extends({}, props, { + onMouseEnter: onMouseEnter, + onMouseLeave: onMouseLeave, + onClick: onClick + })); +} +var SetTreemapTooltipEntrySettings = /*#__PURE__*/React.memo(_ref3 => { + var { + dataKey, + nameKey, + stroke, + fill, + currentRoot, + id + } = _ref3; + var tooltipEntrySettings = { + dataDefinedOnItem: currentRoot, + getPosition: noop, + // TODO I think Treemap has the capability of computing positions and supporting defaultIndex? Except it doesn't yet + settings: { + stroke, + strokeWidth: undefined, + fill, + dataKey, + nameKey, + name: undefined, + // Each TreemapNode has its own name + hide: false, + type: undefined, + color: fill, + unit: '', + graphicalItemId: id + } + }; + return /*#__PURE__*/React.createElement(SetTooltipEntrySettings, { + tooltipEntrySettings: tooltipEntrySettings + }); +}); + +// Why is margin not a treemap prop? No clue. Probably it should be +var defaultTreemapMargin = { + top: 0, + right: 0, + bottom: 0, + left: 0 +}; +function TreemapItem(_ref4) { + var { + content, + nodeProps, + isLeaf, + treemapProps, + onNestClick + } = _ref4; + var { + id, + isAnimationActive, + animationBegin, + animationDuration, + animationEasing, + isUpdateAnimationActive, + type, + colorPanel, + dataKey, + onAnimationStart, + onAnimationEnd, + onMouseEnter: onMouseEnterFromProps, + onClick: onItemClickFromProps, + onMouseLeave: onMouseLeaveFromProps + } = treemapProps; + var { + width, + height, + x, + y + } = nodeProps; + var translateX = -x - width; + var translateY = 0; + var onMouseEnter = e => { + if ((isLeaf || type === 'nest') && typeof onMouseEnterFromProps === 'function') { + onMouseEnterFromProps(nodeProps, e); + } + }; + var onMouseLeave = e => { + if ((isLeaf || type === 'nest') && typeof onMouseLeaveFromProps === 'function') { + onMouseLeaveFromProps(nodeProps, e); + } + }; + var onClick = () => { + if (type === 'nest') { + onNestClick(nodeProps); + } + if ((isLeaf || type === 'nest') && typeof onItemClickFromProps === 'function') { + onItemClickFromProps(nodeProps); + } + }; + var handleAnimationEnd = useCallback(() => { + if (typeof onAnimationEnd === 'function') { + onAnimationEnd(); + } + }, [onAnimationEnd]); + var handleAnimationStart = useCallback(() => { + if (typeof onAnimationStart === 'function') { + onAnimationStart(); + } + }, [onAnimationStart]); + return /*#__PURE__*/React.createElement(CSSTransitionAnimate, { + animationId: "treemap-".concat(nodeProps.tooltipIndex), + from: "translate(".concat(translateX, "px, ").concat(translateY, "px)"), + to: "translate(0, 0)", + attributeName: "transform", + begin: animationBegin, + easing: animationEasing, + isActive: isAnimationActive, + duration: animationDuration, + onAnimationStart: handleAnimationStart, + onAnimationEnd: handleAnimationEnd + }, style => /*#__PURE__*/React.createElement(Layer, { + onMouseEnter: onMouseEnter, + onMouseLeave: onMouseLeave, + onClick: onClick, + style: _objectSpread(_objectSpread({}, style), {}, { + transformOrigin: "".concat(x, " ").concat(y) + }) + }, /*#__PURE__*/React.createElement(ContentItemWithEvents, { + id: id, + content: content, + dataKey: dataKey, + nodeProps: _objectSpread(_objectSpread({}, nodeProps), {}, { + isAnimationActive, + isUpdateAnimationActive: !isUpdateAnimationActive, + width, + height, + x, + y + }), + type: type, + colorPanel: colorPanel + }))); +} +class TreemapWithState extends PureComponent { + constructor() { + super(...arguments); + _defineProperty(this, "state", _objectSpread({}, defaultState)); + _defineProperty(this, "handleClick", node => { + var { + onClick, + type + } = this.props; + if (type === 'nest' && node.children) { + var { + width, + height, + dataKey, + nameKey, + aspectRatio + } = this.props; + var root = computeNode({ + depth: 0, + node: _objectSpread(_objectSpread({}, node), {}, { + x: 0, + y: 0, + width, + height + }), + index: 0, + dataKey, + nameKey, + // with Treemap nesting, should this continue nesting the index or start from empty string? + nestedActiveTooltipIndex: node.tooltipIndex + }); + var formatRoot = squarify(root, aspectRatio); + var { + nestIndex + } = this.state; + nestIndex.push(node); + this.setState({ + formatRoot, + currentRoot: root, + nestIndex + }); + } + if (onClick) { + onClick(node); + } + }); + _defineProperty(this, "handleTouchMove", e => { + var touchEvent = e.touches[0]; + if (touchEvent == null) { + return; + } + var target = document.elementFromPoint(touchEvent.clientX, touchEvent.clientY); + if (!target || !target.getAttribute || this.state.formatRoot == null) { + return; + } + var itemIndex = target.getAttribute('data-recharts-item-index'); + var activeNode = treemapPayloadSearcher(this.state.formatRoot, itemIndex); + if (!isTreemapNode(activeNode)) { + return; + } + var { + dataKey, + dispatch + } = this.props; + var activeCoordinate = { + x: activeNode.x + activeNode.width / 2, + y: activeNode.y + activeNode.height / 2 + }; + + // Treemap does not support onTouchMove prop, but it could + // onTouchMove?.(activeNode, Number(itemIndex), e); + dispatch(setActiveMouseOverItemIndex({ + activeIndex: itemIndex, + activeDataKey: dataKey, + activeCoordinate, + activeGraphicalItemId: this.props.id + })); + }); + } + static getDerivedStateFromProps(nextProps, prevState) { + if (nextProps.data !== prevState.prevData || nextProps.type !== prevState.prevType || nextProps.width !== prevState.prevWidth || nextProps.height !== prevState.prevHeight || nextProps.dataKey !== prevState.prevDataKey || nextProps.aspectRatio !== prevState.prevAspectRatio) { + var root = computeNode({ + depth: 0, + // @ts-expect-error missing properties + node: { + children: nextProps.data, + x: 0, + y: 0, + width: nextProps.width, + height: nextProps.height + }, + index: 0, + dataKey: nextProps.dataKey, + nameKey: nextProps.nameKey + }); + var formatRoot = squarify(root, nextProps.aspectRatio); + return _objectSpread(_objectSpread({}, prevState), {}, { + formatRoot, + currentRoot: root, + nestIndex: [root], + prevAspectRatio: nextProps.aspectRatio, + prevData: nextProps.data, + prevWidth: nextProps.width, + prevHeight: nextProps.height, + prevDataKey: nextProps.dataKey, + prevType: nextProps.type + }); + } + return null; + } + handleNestIndex(node, i) { + var { + nestIndex + } = this.state; + var { + width, + height, + dataKey, + nameKey, + aspectRatio + } = this.props; + var root = computeNode({ + depth: 0, + node: _objectSpread(_objectSpread({}, node), {}, { + x: 0, + y: 0, + width, + height + }), + index: 0, + dataKey, + nameKey, + // with Treemap nesting, should this continue nesting the index or start from empty string? + nestedActiveTooltipIndex: node.tooltipIndex + }); + var formatRoot = squarify(root, aspectRatio); + nestIndex = nestIndex.slice(0, i + 1); + this.setState({ + formatRoot, + currentRoot: node, + nestIndex + }); + } + renderNode(root, node) { + var { + content, + type + } = this.props; + var nodeProps = _objectSpread(_objectSpread(_objectSpread({}, svgPropertiesNoEvents(this.props)), node), {}, { + root + }); + var isLeaf = !node.children || !node.children.length; + var { + currentRoot + } = this.state; + var isCurrentRootChild = ((currentRoot === null || currentRoot === void 0 ? void 0 : currentRoot.children) || []).filter(item => item.depth === node.depth && item.name === node.name); + if (!isCurrentRootChild.length && root.depth && type === 'nest') { + return null; + } + return /*#__PURE__*/React.createElement(Layer, { + key: "recharts-treemap-node-".concat(nodeProps.x, "-").concat(nodeProps.y, "-").concat(nodeProps.name), + className: "recharts-treemap-depth-".concat(node.depth) + }, /*#__PURE__*/React.createElement(TreemapItem, { + isLeaf: isLeaf, + content: content, + nodeProps: nodeProps, + treemapProps: this.props, + onNestClick: this.handleClick + }), node.children && node.children.length ? node.children.map(child => this.renderNode(node, child)) : null); + } + renderAllNodes() { + var { + formatRoot + } = this.state; + if (!formatRoot) { + return null; + } + return this.renderNode(formatRoot, formatRoot); + } + + // render nest treemap + renderNestIndex() { + var { + nameKey, + nestIndexContent + } = this.props; + var { + nestIndex + } = this.state; + return /*#__PURE__*/React.createElement("div", { + className: "recharts-treemap-nest-index-wrapper", + style: { + marginTop: '8px', + textAlign: 'center' + } + }, nestIndex.map((item, i) => { + // TODO need to verify nameKey type + var rawName = get(item, nameKey, 'root'); + var name = typeof rawName === 'string' ? rawName : 'root'; + var content; + if (/*#__PURE__*/React.isValidElement(nestIndexContent)) { + // the cloned content is ignored at all times - let's remove it? + content = /*#__PURE__*/React.cloneElement(nestIndexContent, item, i); + } + if (typeof nestIndexContent === 'function') { + content = nestIndexContent(item, i); + } else { + content = name; + } + return ( + /*#__PURE__*/ + // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions + React.createElement("div", { + onClick: this.handleNestIndex.bind(this, item, i), + key: "nest-index-".concat(uniqueId()), + className: "recharts-treemap-nest-index-box", + style: { + cursor: 'pointer', + display: 'inline-block', + padding: '0 7px', + background: '#000', + color: '#fff', + marginRight: '3px' + } + }, content) + ); + })); + } + render() { + var _this$props = this.props, + { + width, + height, + className, + style, + children, + type + } = _this$props, + others = _objectWithoutProperties(_this$props, _excluded); + var attrs = svgPropertiesNoEvents(others); + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetTreemapTooltipEntrySettings, { + dataKey: this.props.dataKey, + nameKey: this.props.nameKey, + stroke: this.props.stroke, + fill: this.props.fill, + currentRoot: this.state.currentRoot, + id: this.props.id + }), /*#__PURE__*/React.createElement(Surface, _extends({}, attrs, { + width: width, + height: type === 'nest' ? height - 30 : height, + onTouchMove: this.handleTouchMove + }), this.renderAllNodes(), children), type === 'nest' && this.renderNestIndex()); + } +} +_defineProperty(TreemapWithState, "displayName", 'Treemap'); +function TreemapDispatchInject(props) { + var dispatch = useAppDispatch(); + var width = useChartWidth(); + var height = useChartHeight(); + if (!isPositiveNumber(width) || !isPositiveNumber(height)) { + return null; + } + var { + id: externalId + } = props; + return /*#__PURE__*/React.createElement(RegisterGraphicalItemId, { + id: externalId, + type: "treemap" + }, id => /*#__PURE__*/React.createElement(TreemapWithState, _extends({}, props, { + id: id, + width: width, + height: height, + dispatch: dispatch + }))); +} + +/** + * The Treemap chart is used to visualize hierarchical data using nested rectangles. + * + * @consumes ResponsiveContainerContext + * @provides TooltipEntrySettings + */ +export function Treemap(outsideProps) { + var _props$className; + var props = resolveDefaultProps(outsideProps, defaultTreeMapProps); + var { + className, + style, + width, + height + } = props; + var [tooltipPortal, setTooltipPortal] = useState(null); + return /*#__PURE__*/React.createElement(RechartsStoreProvider, { + preloadedState: { + options + }, + reduxStoreName: (_props$className = props.className) !== null && _props$className !== void 0 ? _props$className : 'Treemap' + }, /*#__PURE__*/React.createElement(ReportChartMargin, { + margin: defaultTreemapMargin + }), /*#__PURE__*/React.createElement(RechartsWrapper, { + dispatchTouchEvents: false, + className: className, + style: style, + width: width, + height: height + /* + * Treemap has a bug where it doesn't include strokeWidth in its dimension calculation + * which makes the actual chart exactly {strokeWidth} larger than asked for. + * It's not a huge deal usually, but it makes the responsive option cycle infinitely. + */, + responsive: false, + ref: node => { + if (tooltipPortal == null && node != null) { + setTooltipPortal(node); + } + }, + onMouseEnter: undefined, + onMouseLeave: undefined, + onClick: undefined, + onMouseMove: undefined, + onMouseDown: undefined, + onMouseUp: undefined, + onContextMenu: undefined, + onDoubleClick: undefined, + onTouchStart: undefined, + onTouchMove: undefined, + onTouchEnd: undefined + }, /*#__PURE__*/React.createElement(TooltipPortalContext.Provider, { + value: tooltipPortal + }, /*#__PURE__*/React.createElement(TreemapDispatchInject, props)))); +} Index: node_modules/recharts/es6/chart/types.js =================================================================== --- node_modules/recharts/es6/chart/types.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/chart/types.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,1 @@ +export {}; Index: node_modules/recharts/es6/component/ActivePoints.js =================================================================== --- node_modules/recharts/es6/component/ActivePoints.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/component/ActivePoints.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,87 @@ +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +import * as React from 'react'; +import { cloneElement, isValidElement } from 'react'; +import { adaptEventHandlers } from '../util/types'; +import { Dot } from '../shape/Dot'; +import { Layer } from '../container/Layer'; +import { useAppSelector } from '../state/hooks'; +import { selectActiveTooltipIndex } from '../state/selectors/tooltipSelectors'; +import { useActiveTooltipDataPoints } from '../hooks'; +import { isNullish } from '../util/DataUtils'; +import { svgPropertiesNoEventsFromUnknown } from '../util/svgPropertiesNoEvents'; +import { ZIndexLayer } from '../zIndex/ZIndexLayer'; +import { DefaultZIndexes } from '../zIndex/DefaultZIndexes'; +var ActivePoint = _ref => { + var { + point, + childIndex, + mainColor, + activeDot, + dataKey, + clipPath + } = _ref; + if (activeDot === false || point.x == null || point.y == null) { + return null; + } + var dotPropsTyped = { + index: childIndex, + dataKey, + cx: point.x, + cy: point.y, + r: 4, + fill: mainColor !== null && mainColor !== void 0 ? mainColor : 'none', + strokeWidth: 2, + stroke: '#fff', + payload: point.payload, + value: point.value + }; + + // @ts-expect-error svgPropertiesNoEventsFromUnknown(activeDot) is contributing unknown props + var dotProps = _objectSpread(_objectSpread(_objectSpread({}, dotPropsTyped), svgPropertiesNoEventsFromUnknown(activeDot)), adaptEventHandlers(activeDot)); + var dot; + if (/*#__PURE__*/isValidElement(activeDot)) { + // @ts-expect-error we're improperly typing events + dot = /*#__PURE__*/cloneElement(activeDot, dotProps); + } else if (typeof activeDot === 'function') { + dot = activeDot(dotProps); + } else { + dot = /*#__PURE__*/React.createElement(Dot, dotProps); + } + return /*#__PURE__*/React.createElement(Layer, { + className: "recharts-active-dot", + clipPath: clipPath + }, dot); +}; +export function ActivePoints(_ref2) { + var { + points, + mainColor, + activeDot, + itemDataKey, + clipPath, + zIndex = DefaultZIndexes.activeDot + } = _ref2; + var activeTooltipIndex = useAppSelector(selectActiveTooltipIndex); + var activeDataPoints = useActiveTooltipDataPoints(); + if (points == null || activeDataPoints == null) { + return null; + } + var activePoint = points.find(p => activeDataPoints.includes(p.payload)); + if (isNullish(activePoint)) { + return null; + } + return /*#__PURE__*/React.createElement(ZIndexLayer, { + zIndex: zIndex + }, /*#__PURE__*/React.createElement(ActivePoint, { + point: activePoint, + childIndex: Number(activeTooltipIndex), + mainColor: mainColor, + dataKey: itemDataKey, + activeDot: activeDot, + clipPath: clipPath + })); +} Index: node_modules/recharts/es6/component/Cell.js =================================================================== --- node_modules/recharts/es6/component/Cell.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/component/Cell.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,15 @@ +/** + * Cell component used to define colors and styles of chart elements. + * + * This component is now deprecated and will be removed in Recharts 4.0. + * + * Please use the `shape` prop or `content` prop on the respective chart components + * to customize the rendering of chart elements instead of using `Cell`. + * + * @see {@link https://recharts.github.io/en-US/guide/cell/ Guide: Migrate from Cell component to shape prop} + * + * @deprecated + * @consumes CellReader + */ +export var Cell = _props => null; +Cell.displayName = 'Cell'; Index: node_modules/recharts/es6/component/Cursor.js =================================================================== --- node_modules/recharts/es6/component/Cursor.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/component/Cursor.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,137 @@ +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +import * as React from 'react'; +import { cloneElement, createElement, isValidElement } from 'react'; +import { clsx } from 'clsx'; +import { isPolarCoordinate } from '../util/types'; +import { Curve } from '../shape/Curve'; +import { Cross } from '../shape/Cross'; +import { getCursorRectangle } from '../util/cursor/getCursorRectangle'; +import { Rectangle } from '../shape/Rectangle'; +import { getRadialCursorPoints } from '../util/cursor/getRadialCursorPoints'; +import { Sector } from '../shape/Sector'; +import { getCursorPoints } from '../util/cursor/getCursorPoints'; +import { useChartLayout, useOffsetInternal } from '../context/chartLayoutContext'; +import { useTooltipAxisBandSize } from '../context/useTooltipAxis'; +import { useChartName } from '../state/selectors/selectors'; +import { svgPropertiesNoEventsFromUnknown } from '../util/svgPropertiesNoEvents'; +import { ZIndexLayer } from '../zIndex/ZIndexLayer'; +import { DefaultZIndexes } from '../zIndex/DefaultZIndexes'; + +/** + * If set false, no cursor will be drawn when tooltip is active. + * If set an object, the option is the configuration of cursor. + * If set a React element, the option is the custom react element of drawing cursor + */ + +function RenderCursor(_ref) { + var { + cursor, + cursorComp, + cursorProps + } = _ref; + if (/*#__PURE__*/isValidElement(cursor)) { + return /*#__PURE__*/cloneElement(cursor, cursorProps); + } + return /*#__PURE__*/createElement(cursorComp, cursorProps); +} +export function CursorInternal(props) { + var _props$zIndex; + var { + coordinate, + payload, + index, + offset, + tooltipAxisBandSize, + layout, + cursor, + tooltipEventType, + chartName + } = props; + + // The cursor is a part of the Tooltip, and it should be shown (by default) when the Tooltip is active. + var activeCoordinate = coordinate; + var activePayload = payload; + var activeTooltipIndex = index; + if (!cursor || !activeCoordinate || chartName !== 'ScatterChart' && tooltipEventType !== 'axis') { + return null; + } + var restProps, cursorComp, preferredZIndex; + if (chartName === 'ScatterChart') { + restProps = activeCoordinate; + cursorComp = Cross; + preferredZIndex = DefaultZIndexes.cursorLine; + } else if (chartName === 'BarChart') { + restProps = getCursorRectangle(layout, activeCoordinate, offset, tooltipAxisBandSize); + cursorComp = Rectangle; + preferredZIndex = DefaultZIndexes.cursorRectangle; + } else if (layout === 'radial' && isPolarCoordinate(activeCoordinate)) { + var { + cx, + cy, + radius, + startAngle, + endAngle + } = getRadialCursorPoints(activeCoordinate); + restProps = { + cx, + cy, + startAngle, + endAngle, + innerRadius: radius, + outerRadius: radius + }; + cursorComp = Sector; + preferredZIndex = DefaultZIndexes.cursorLine; + } else { + restProps = { + points: getCursorPoints(layout, activeCoordinate, offset) + }; + cursorComp = Curve; + preferredZIndex = DefaultZIndexes.cursorLine; + } + var extraClassName = typeof cursor === 'object' && 'className' in cursor ? cursor.className : undefined; + var cursorProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({ + stroke: '#ccc', + pointerEvents: 'none' + }, offset), restProps), svgPropertiesNoEventsFromUnknown(cursor)), {}, { + payload: activePayload, + payloadIndex: activeTooltipIndex, + className: clsx('recharts-tooltip-cursor', extraClassName) + }); + return /*#__PURE__*/React.createElement(ZIndexLayer, { + zIndex: (_props$zIndex = props.zIndex) !== null && _props$zIndex !== void 0 ? _props$zIndex : preferredZIndex + }, /*#__PURE__*/React.createElement(RenderCursor, { + cursor: cursor, + cursorComp: cursorComp, + cursorProps: cursorProps + })); +} + +/* + * Cursor is the background, or a highlight, + * that shows when user mouses over or activates + * an area. + * + * It usually shows together with a tooltip + * to emphasise which part of the chart does the tooltip refer to. + */ +export function Cursor(props) { + var tooltipAxisBandSize = useTooltipAxisBandSize(); + var offset = useOffsetInternal(); + var layout = useChartLayout(); + var chartName = useChartName(); + if (tooltipAxisBandSize == null || offset == null || layout == null || chartName == null) { + return null; + } + return /*#__PURE__*/React.createElement(CursorInternal, _extends({}, props, { + offset: offset, + layout: layout, + tooltipAxisBandSize: tooltipAxisBandSize, + chartName: chartName + })); +} Index: node_modules/recharts/es6/component/Customized.js =================================================================== --- node_modules/recharts/es6/component/Customized.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/component/Customized.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,39 @@ +var _excluded = ["component"]; +function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } +function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } +/** + * @fileOverview Customized + */ +import * as React from 'react'; +import { isValidElement, cloneElement, createElement } from 'react'; +import { Layer } from '../container/Layer'; +import { warn } from '../util/LogUtils'; +/** + * Customized component used to be necessary to render custom elements in Recharts 2.x. + * Starting from Recharts 3.x, all charts are able to render arbitrary elements anywhere, + * and Customized is no longer needed. + * + * @example Before: `} />` + * @example After: `` + * + * @deprecated Just render your components directly. Will be removed in 4.0 + */ +export function Customized(_ref) { + var { + component + } = _ref, + props = _objectWithoutProperties(_ref, _excluded); + var child; + if (/*#__PURE__*/isValidElement(component)) { + child = /*#__PURE__*/cloneElement(component, props); + } else if (typeof component === 'function') { + // @ts-expect-error TS cannot verify that C is FunctionComponent

here + child = /*#__PURE__*/createElement(component, props); + } else { + warn(false, "Customized's props `component` must be React.element or Function, but got %s.", typeof component); + } + return /*#__PURE__*/React.createElement(Layer, { + className: "recharts-customized-wrapper" + }, child); +} +Customized.displayName = 'Customized'; Index: node_modules/recharts/es6/component/DefaultLegendContent.js =================================================================== --- node_modules/recharts/es6/component/DefaultLegendContent.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/component/DefaultLegendContent.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,166 @@ +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +import * as React from 'react'; +import { clsx } from 'clsx'; +import { Surface } from '../container/Surface'; +import { Symbols } from '../shape/Symbols'; +import { adaptEventsOfChild } from '../util/types'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +var SIZE = 32; +var defaultLegendContentDefaultProps = { + align: 'center', + iconSize: 14, + inactiveColor: '#ccc', + layout: 'horizontal', + verticalAlign: 'middle' +}; +function Icon(_ref) { + var { + data, + iconType, + inactiveColor + } = _ref; + var halfSize = SIZE / 2; + var sixthSize = SIZE / 6; + var thirdSize = SIZE / 3; + var color = data.inactive ? inactiveColor : data.color; + var preferredIcon = iconType !== null && iconType !== void 0 ? iconType : data.type; + if (preferredIcon === 'none') { + return null; + } + if (preferredIcon === 'plainline') { + var _data$payload; + return /*#__PURE__*/React.createElement("line", { + strokeWidth: 4, + fill: "none", + stroke: color, + strokeDasharray: (_data$payload = data.payload) === null || _data$payload === void 0 ? void 0 : _data$payload.strokeDasharray, + x1: 0, + y1: halfSize, + x2: SIZE, + y2: halfSize, + className: "recharts-legend-icon" + }); + } + if (preferredIcon === 'line') { + return /*#__PURE__*/React.createElement("path", { + strokeWidth: 4, + fill: "none", + stroke: color, + d: "M0,".concat(halfSize, "h").concat(thirdSize, "\n A").concat(sixthSize, ",").concat(sixthSize, ",0,1,1,").concat(2 * thirdSize, ",").concat(halfSize, "\n H").concat(SIZE, "M").concat(2 * thirdSize, ",").concat(halfSize, "\n A").concat(sixthSize, ",").concat(sixthSize, ",0,1,1,").concat(thirdSize, ",").concat(halfSize), + className: "recharts-legend-icon" + }); + } + if (preferredIcon === 'rect') { + return /*#__PURE__*/React.createElement("path", { + stroke: "none", + fill: color, + d: "M0,".concat(SIZE / 8, "h").concat(SIZE, "v").concat(SIZE * 3 / 4, "h").concat(-SIZE, "z"), + className: "recharts-legend-icon" + }); + } + if (/*#__PURE__*/React.isValidElement(data.legendIcon)) { + var iconProps = _objectSpread({}, data); + delete iconProps.legendIcon; + return /*#__PURE__*/React.cloneElement(data.legendIcon, iconProps); + } + return /*#__PURE__*/React.createElement(Symbols, { + fill: color, + cx: halfSize, + cy: halfSize, + size: SIZE, + sizeType: "diameter", + type: preferredIcon + }); +} +function Items(props) { + var { + payload, + iconSize, + layout, + formatter, + inactiveColor, + iconType + } = props; + 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((entry, i) => { + var finalFormatter = entry.formatter || formatter; + var className = clsx({ + 'recharts-legend-item': true, + ["legend-item-".concat(i)]: true, + inactive: entry.inactive + }); + if (entry.type === 'none') { + return null; + } + var color = entry.inactive ? inactiveColor : entry.color; + var finalValue = finalFormatter ? finalFormatter(entry.value, entry, i) : entry.value; + return /*#__PURE__*/React.createElement("li", _extends({ + className: className, + style: itemStyle, + key: "legend-item-".concat(i) + }, adaptEventsOfChild(props, entry, i)), /*#__PURE__*/React.createElement(Surface, { + width: iconSize, + height: iconSize, + viewBox: viewBox, + style: svgStyle, + "aria-label": "".concat(finalValue, " legend icon") + }, /*#__PURE__*/React.createElement(Icon, { + data: entry, + iconType: iconType, + inactiveColor: inactiveColor + })), /*#__PURE__*/React.createElement("span", { + className: "recharts-legend-item-text", + style: { + color + } + }, finalValue)); + }); +} + +/** + * This component is by default rendered inside the {@link Legend} component. You would not use it directly. + * + * You can use this component to customize the content of the legend, + * or you can provide your own completely independent content. + */ +export var DefaultLegendContent = outsideProps => { + var props = resolveDefaultProps(outsideProps, defaultLegendContentDefaultProps); + var { + payload, + layout, + align + } = props; + if (!payload || !payload.length) { + return null; + } + var finalStyle = { + padding: 0, + margin: 0, + textAlign: layout === 'horizontal' ? align : 'left' + }; + return /*#__PURE__*/React.createElement("ul", { + className: "recharts-default-legend", + style: finalStyle + }, /*#__PURE__*/React.createElement(Items, _extends({}, props, { + payload: payload + }))); +}; Index: node_modules/recharts/es6/component/DefaultTooltipContent.js =================================================================== --- node_modules/recharts/es6/component/DefaultTooltipContent.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/component/DefaultTooltipContent.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,131 @@ +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +/** + * @fileOverview Default Tooltip Content + */ + +import * as React from 'react'; +import sortBy from 'es-toolkit/compat/sortBy'; +import { clsx } from 'clsx'; +import { isNullish, isNumOrStr } from '../util/DataUtils'; +function defaultFormatter(value) { + return Array.isArray(value) && isNumOrStr(value[0]) && isNumOrStr(value[1]) ? value.join(' ~ ') : value; +} +export var defaultDefaultTooltipContentProps = { + separator: ' : ', + contentStyle: { + margin: 0, + padding: 10, + backgroundColor: '#fff', + border: '1px solid #ccc', + whiteSpace: 'nowrap' + }, + itemStyle: { + display: 'block', + paddingTop: 4, + paddingBottom: 4, + color: '#000' + }, + labelStyle: {}, + accessibilityLayer: false +}; + +/** + * This component is by default rendered inside the {@link Tooltip} component. You would not use it directly. + * + * You can use this component to customize the content of the tooltip, + * or you can provide your own completely independent content. + */ +export var DefaultTooltipContent = props => { + var { + separator = defaultDefaultTooltipContentProps.separator, + contentStyle, + itemStyle, + labelStyle = defaultDefaultTooltipContentProps.labelStyle, + payload, + formatter, + itemSorter, + wrapperClassName, + labelClassName, + label, + labelFormatter, + accessibilityLayer = defaultDefaultTooltipContentProps.accessibilityLayer + } = props; + var renderContent = () => { + if (payload && payload.length) { + var listStyle = { + padding: 0, + margin: 0 + }; + var items = (itemSorter ? sortBy(payload, itemSorter) : payload).map((entry, i) => { + if (entry.type === 'none') { + return null; + } + var finalFormatter = entry.formatter || formatter || defaultFormatter; + var { + value, + name + } = entry; + var finalValue = value; + var finalName = name; + if (finalFormatter) { + var formatted = finalFormatter(value, name, entry, i, payload); + if (Array.isArray(formatted)) { + [finalValue, finalName] = formatted; + } else if (formatted != null) { + finalValue = formatted; + } else { + return null; + } + } + var finalItemStyle = _objectSpread(_objectSpread({}, defaultDefaultTooltipContentProps.itemStyle), {}, { + color: entry.color || defaultDefaultTooltipContentProps.itemStyle.color + }, itemStyle); + return /*#__PURE__*/React.createElement("li", { + className: "recharts-tooltip-item", + key: "tooltip-item-".concat(i), + style: finalItemStyle + }, isNumOrStr(finalName) ? /*#__PURE__*/React.createElement("span", { + className: "recharts-tooltip-item-name" + }, finalName) : null, isNumOrStr(finalName) ? /*#__PURE__*/React.createElement("span", { + className: "recharts-tooltip-item-separator" + }, separator) : null, /*#__PURE__*/React.createElement("span", { + className: "recharts-tooltip-item-value" + }, finalValue), /*#__PURE__*/React.createElement("span", { + className: "recharts-tooltip-item-unit" + }, entry.unit || '')); + }); + return /*#__PURE__*/React.createElement("ul", { + className: "recharts-tooltip-item-list", + style: listStyle + }, items); + } + return null; + }; + var finalStyle = _objectSpread(_objectSpread({}, defaultDefaultTooltipContentProps.contentStyle), contentStyle); + var finalLabelStyle = _objectSpread({ + margin: 0 + }, labelStyle); + var hasLabel = !isNullish(label); + var finalLabel = hasLabel ? label : ''; + var wrapperCN = clsx('recharts-default-tooltip', wrapperClassName); + var labelCN = clsx('recharts-tooltip-label', labelClassName); + if (hasLabel && labelFormatter && payload !== undefined && payload !== null) { + finalLabel = labelFormatter(label, payload); + } + var accessibilityAttributes = accessibilityLayer ? { + role: 'status', + 'aria-live': 'assertive' + } : {}; + return /*#__PURE__*/React.createElement("div", _extends({ + className: wrapperCN, + style: finalStyle + }, accessibilityAttributes), /*#__PURE__*/React.createElement("p", { + className: labelCN, + style: finalLabelStyle + }, /*#__PURE__*/React.isValidElement(finalLabel) ? finalLabel : "".concat(finalLabel)), renderContent()); +}; Index: node_modules/recharts/es6/component/Dots.js =================================================================== --- node_modules/recharts/es6/component/Dots.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/component/Dots.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,97 @@ +var _excluded = ["points"]; +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } +function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } +import * as React from 'react'; +import { cloneElement, isValidElement } from 'react'; +import { clsx } from 'clsx'; +import { Dot } from '../shape/Dot'; +import { Layer } from '../container/Layer'; +import { isClipDot } from '../util/ReactUtils'; +import { svgPropertiesAndEventsFromUnknown } from '../util/svgPropertiesAndEvents'; +import { ZIndexLayer } from '../zIndex/ZIndexLayer'; +import { DefaultZIndexes } from '../zIndex/DefaultZIndexes'; +function DotItem(_ref) { + var { + option, + dotProps, + className + } = _ref; + if (/*#__PURE__*/isValidElement(option)) { + // @ts-expect-error we can't type check element cloning properly + return /*#__PURE__*/cloneElement(option, dotProps); + } + if (typeof option === 'function') { + return option(dotProps); + } + var finalClassName = clsx(className, typeof option !== 'boolean' ? option.className : ''); + var _ref2 = dotProps !== null && dotProps !== void 0 ? dotProps : {}, + { + points + } = _ref2, + props = _objectWithoutProperties(_ref2, _excluded); + return /*#__PURE__*/React.createElement(Dot, _extends({}, props, { + className: finalClassName + })); +} +function shouldRenderDots(points, dot) { + if (points == null) { + return false; + } + if (dot) { + return true; + } + return points.length === 1; +} +export function Dots(_ref3) { + var { + points, + dot, + className, + dotClassName, + dataKey, + baseProps, + needClip, + clipPathId, + zIndex = DefaultZIndexes.scatter + } = _ref3; + if (!shouldRenderDots(points, dot)) { + return null; + } + var clipDot = isClipDot(dot); + var customDotProps = svgPropertiesAndEventsFromUnknown(dot); + var dots = points.map((entry, i) => { + var _entry$x, _entry$y; + var dotProps = _objectSpread(_objectSpread(_objectSpread({ + r: 3 + }, baseProps), customDotProps), {}, { + index: i, + cx: (_entry$x = entry.x) !== null && _entry$x !== void 0 ? _entry$x : undefined, + cy: (_entry$y = entry.y) !== null && _entry$y !== void 0 ? _entry$y : undefined, + dataKey, + value: entry.value, + payload: entry.payload, + points + }); + return /*#__PURE__*/React.createElement(DotItem, { + key: "dot-".concat(i), + option: dot, + dotProps: dotProps, + className: dotClassName + }); + }); + var layerProps = {}; + if (needClip && clipPathId != null) { + layerProps.clipPath = "url(#clipPath-".concat(clipDot ? '' : 'dots-').concat(clipPathId, ")"); + } + return /*#__PURE__*/React.createElement(ZIndexLayer, { + zIndex: zIndex + }, /*#__PURE__*/React.createElement(Layer, _extends({ + className: className + }, layerProps), dots)); +} Index: node_modules/recharts/es6/component/Label.js =================================================================== --- node_modules/recharts/es6/component/Label.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/component/Label.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,414 @@ +var _excluded = ["labelRef"], + _excluded2 = ["content"]; +function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } +function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +import * as React from 'react'; +import { cloneElement, createContext, createElement, isValidElement, useContext, useMemo } from 'react'; +import { clsx } from 'clsx'; +import { isValidTextAnchor, Text } from './Text'; +import { isNullish, isNumber, isNumOrStr, mathSign, uniqueId } from '../util/DataUtils'; +import { polarToCartesian } from '../util/PolarUtils'; +import { cartesianViewBoxToTrapezoid, useViewBox } from '../context/chartLayoutContext'; +import { useAppSelector } from '../state/hooks'; +import { selectPolarViewBox } from '../state/selectors/polarAxisSelectors'; +import { resolveDefaultProps } from '../util/resolveDefaultProps'; +import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents'; +import { ZIndexLayer } from '../zIndex/ZIndexLayer'; +import { DefaultZIndexes } from '../zIndex/DefaultZIndexes'; +import { getCartesianPosition } from '../cartesian/getCartesianPosition'; + +/** + * @inline + */ + +/** + * @inline + */ + +/** + * @inline + */ + +var CartesianLabelContext = /*#__PURE__*/createContext(null); +export var CartesianLabelContextProvider = _ref => { + var { + x, + y, + upperWidth, + lowerWidth, + width, + height, + children + } = _ref; + var viewBox = useMemo(() => ({ + x, + y, + upperWidth, + lowerWidth, + width, + height + }), [x, y, upperWidth, lowerWidth, width, height]); + return /*#__PURE__*/React.createElement(CartesianLabelContext.Provider, { + value: viewBox + }, children); +}; +var useCartesianLabelContext = () => { + var labelChildContext = useContext(CartesianLabelContext); + var chartContext = useViewBox(); + return labelChildContext || (chartContext ? cartesianViewBoxToTrapezoid(chartContext) : undefined); +}; +var PolarLabelContext = /*#__PURE__*/createContext(null); +export var PolarLabelContextProvider = _ref2 => { + var { + cx, + cy, + innerRadius, + outerRadius, + startAngle, + endAngle, + clockWise, + children + } = _ref2; + var viewBox = useMemo(() => ({ + cx, + cy, + innerRadius, + outerRadius, + startAngle, + endAngle, + clockWise + }), [cx, cy, innerRadius, outerRadius, startAngle, endAngle, clockWise]); + return /*#__PURE__*/React.createElement(PolarLabelContext.Provider, { + value: viewBox + }, children); +}; +export var usePolarLabelContext = () => { + var labelChildContext = useContext(PolarLabelContext); + var chartContext = useAppSelector(selectPolarViewBox); + return labelChildContext || chartContext; +}; +var getLabel = props => { + var { + value, + formatter + } = props; + var label = isNullish(props.children) ? value : props.children; + if (typeof formatter === 'function') { + return formatter(label); + } + return label; +}; +export var isLabelContentAFunction = content => { + return content != null && typeof content === 'function'; +}; +var getDeltaAngle = (startAngle, endAngle) => { + var sign = mathSign(endAngle - startAngle); + var deltaAngle = Math.min(Math.abs(endAngle - startAngle), 360); + return sign * deltaAngle; +}; +var renderRadialLabel = (labelProps, position, label, attrs, viewBox) => { + var { + offset, + className + } = labelProps; + var { + cx, + cy, + innerRadius, + outerRadius, + startAngle, + endAngle, + clockWise + } = viewBox; + var radius = (innerRadius + outerRadius) / 2; + var deltaAngle = getDeltaAngle(startAngle, endAngle); + var sign = deltaAngle >= 0 ? 1 : -1; + var labelAngle, direction; + switch (position) { + case 'insideStart': + labelAngle = startAngle + sign * offset; + direction = clockWise; + break; + case 'insideEnd': + labelAngle = endAngle - sign * offset; + direction = !clockWise; + break; + case 'end': + labelAngle = endAngle + sign * offset; + direction = clockWise; + break; + default: + throw new Error("Unsupported position ".concat(position)); + } + direction = deltaAngle <= 0 ? direction : !direction; + var startPoint = polarToCartesian(cx, cy, radius, labelAngle); + var endPoint = polarToCartesian(cx, cy, radius, labelAngle + (direction ? 1 : -1) * 359); + var path = "M".concat(startPoint.x, ",").concat(startPoint.y, "\n A").concat(radius, ",").concat(radius, ",0,1,").concat(direction ? 0 : 1, ",\n ").concat(endPoint.x, ",").concat(endPoint.y); + var id = isNullish(labelProps.id) ? uniqueId('recharts-radial-line-') : labelProps.id; + return /*#__PURE__*/React.createElement("text", _extends({}, attrs, { + dominantBaseline: "central", + className: clsx('recharts-radial-bar-label', className) + }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", { + id: id, + d: path + })), /*#__PURE__*/React.createElement("textPath", { + xlinkHref: "#".concat(id) + }, label)); +}; +var getAttrsOfPolarLabel = (viewBox, offset, position) => { + var { + cx, + cy, + innerRadius, + outerRadius, + startAngle, + endAngle + } = viewBox; + var midAngle = (startAngle + endAngle) / 2; + if (position === 'outside') { + var { + x: _x, + y: _y + } = polarToCartesian(cx, cy, outerRadius + offset, midAngle); + return { + x: _x, + y: _y, + textAnchor: _x >= cx ? 'start' : 'end', + verticalAnchor: 'middle' + }; + } + if (position === 'center') { + return { + x: cx, + y: cy, + textAnchor: 'middle', + verticalAnchor: 'middle' + }; + } + if (position === 'centerTop') { + return { + x: cx, + y: cy, + textAnchor: 'middle', + verticalAnchor: 'start' + }; + } + if (position === 'centerBottom') { + return { + x: cx, + y: cy, + textAnchor: 'middle', + verticalAnchor: 'end' + }; + } + var r = (innerRadius + outerRadius) / 2; + var { + x, + y + } = polarToCartesian(cx, cy, r, midAngle); + return { + x, + y, + textAnchor: 'middle', + verticalAnchor: 'middle' + }; +}; +var isPolar = viewBox => viewBox != null && 'cx' in viewBox && isNumber(viewBox.cx); +export var defaultLabelProps = { + angle: 0, + offset: 5, + zIndex: DefaultZIndexes.label, + position: 'middle', + textBreakAll: false +}; +function polarViewBoxToTrapezoid(viewBox) { + if (!isPolar(viewBox)) { + return viewBox; + } + var { + cx, + cy, + outerRadius + } = viewBox; + var diameter = outerRadius * 2; + return { + x: cx - outerRadius, + y: cy - outerRadius, + width: diameter, + upperWidth: diameter, + lowerWidth: diameter, + height: diameter + }; +} + +/** + * @consumes CartesianViewBoxContext + * @consumes PolarViewBoxContext + * @consumes CartesianLabelContext + * @consumes PolarLabelContext + */ +export function Label(outerProps) { + var props = resolveDefaultProps(outerProps, defaultLabelProps); + var { + viewBox: viewBoxFromProps, + parentViewBox, + position, + value, + children, + content, + className = '', + textBreakAll, + labelRef + } = props; + var polarViewBox = usePolarLabelContext(); + var cartesianViewBox = useCartesianLabelContext(); + + /* + * I am not proud about this solution, but it's a quick fix for https://github.com/recharts/recharts/issues/6030#issuecomment-3155352460. + * What we should really do is split Label into two components: CartesianLabel and PolarLabel and then handle their respective viewBoxes separately. + * Also other components should set its own viewBox in a context so that we can fix https://github.com/recharts/recharts/issues/6156 + */ + var resolvedViewBox = position === 'center' ? cartesianViewBox : polarViewBox !== null && polarViewBox !== void 0 ? polarViewBox : cartesianViewBox; + var viewBox, label, positionAttrs; + if (viewBoxFromProps == null) { + viewBox = resolvedViewBox; + } else if (isPolar(viewBoxFromProps)) { + viewBox = viewBoxFromProps; + } else { + viewBox = cartesianViewBoxToTrapezoid(viewBoxFromProps); + } + var cartesianBox = polarViewBoxToTrapezoid(viewBox); + if (!viewBox || isNullish(value) && isNullish(children) && ! /*#__PURE__*/isValidElement(content) && typeof content !== 'function') { + return null; + } + var propsWithViewBox = _objectSpread(_objectSpread({}, props), {}, { + viewBox + }); + if (/*#__PURE__*/isValidElement(content)) { + var { + labelRef: _ + } = propsWithViewBox, + propsWithoutLabelRef = _objectWithoutProperties(propsWithViewBox, _excluded); + return /*#__PURE__*/cloneElement(content, propsWithoutLabelRef); + } + if (typeof content === 'function') { + var { + content: _2 + } = propsWithViewBox, + propsForContent = _objectWithoutProperties(propsWithViewBox, _excluded2); + // @ts-expect-error we're not checking if the content component returns something that Text is able to render + label = /*#__PURE__*/createElement(content, propsForContent); + if (/*#__PURE__*/isValidElement(label)) { + return label; + } + } else { + label = getLabel(props); + } + var attrs = svgPropertiesAndEvents(props); + if (isPolar(viewBox)) { + // TODO: Generic Polar Hook + if (position === 'insideStart' || position === 'insideEnd' || position === 'end') { + return renderRadialLabel(props, position, label, attrs, viewBox); + } + positionAttrs = getAttrsOfPolarLabel(viewBox, props.offset, props.position); + } else { + if (!cartesianBox) { + return null; + } + var cartesianResult = getCartesianPosition({ + viewBox: cartesianBox, + position, + offset: props.offset, + parentViewBox: isPolar(parentViewBox) ? undefined : parentViewBox, + clamp: true + }); + positionAttrs = _objectSpread(_objectSpread({ + x: cartesianResult.x, + y: cartesianResult.y, + textAnchor: cartesianResult.horizontalAnchor, + verticalAnchor: cartesianResult.verticalAnchor + }, cartesianResult.width !== undefined ? { + width: cartesianResult.width + } : {}), cartesianResult.height !== undefined ? { + height: cartesianResult.height + } : {}); + } + return /*#__PURE__*/React.createElement(ZIndexLayer, { + zIndex: props.zIndex + }, /*#__PURE__*/React.createElement(Text, _extends({ + ref: labelRef, + className: clsx('recharts-label', className) + }, attrs, positionAttrs, { + /* + * textAnchor is decided by default based on the `position` + * but we allow overriding via props for precise control. + */ + textAnchor: isValidTextAnchor(attrs.textAnchor) ? attrs.textAnchor : positionAttrs.textAnchor, + breakAll: textBreakAll + }), label)); +} +Label.displayName = 'Label'; +var parseLabel = (label, viewBox, labelRef) => { + if (!label) { + return null; + } + var commonProps = { + viewBox, + labelRef + }; + if (label === true) { + return /*#__PURE__*/React.createElement(Label, _extends({ + key: "label-implicit" + }, commonProps)); + } + if (isNumOrStr(label)) { + return /*#__PURE__*/React.createElement(Label, _extends({ + key: "label-implicit", + value: label + }, commonProps)); + } + if (/*#__PURE__*/isValidElement(label)) { + if (label.type === Label) { + return /*#__PURE__*/cloneElement(label, _objectSpread({ + key: 'label-implicit' + }, commonProps)); + } + return /*#__PURE__*/React.createElement(Label, _extends({ + key: "label-implicit", + content: label + }, commonProps)); + } + if (isLabelContentAFunction(label)) { + return /*#__PURE__*/React.createElement(Label, _extends({ + key: "label-implicit", + content: label + }, commonProps)); + } + if (label && typeof label === 'object') { + return /*#__PURE__*/React.createElement(Label, _extends({}, label, { + key: "label-implicit" + }, commonProps)); + } + return null; +}; +export function CartesianLabelFromLabelProp(_ref3) { + var { + label, + labelRef + } = _ref3; + var viewBox = useCartesianLabelContext(); + return parseLabel(label, viewBox, labelRef) || null; +} +export function PolarLabelFromLabelProp(_ref4) { + var { + label + } = _ref4; + var viewBox = usePolarLabelContext(); + return parseLabel(label, viewBox) || null; +} Index: node_modules/recharts/es6/component/LabelList.js =================================================================== --- node_modules/recharts/es6/component/LabelList.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/component/LabelList.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,142 @@ +var _excluded = ["valueAccessor"], + _excluded2 = ["dataKey", "clockWise", "id", "textBreakAll", "zIndex"]; +function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } +function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } +function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } +import * as React from 'react'; +import { createContext, useContext } from 'react'; +import last from 'es-toolkit/compat/last'; +import { isLabelContentAFunction, Label } from './Label'; +import { Layer } from '../container/Layer'; +import { getValueByDataKey } from '../util/ChartUtils'; +import { isNullish } from '../util/DataUtils'; +import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents'; +import { ZIndexLayer } from '../zIndex/ZIndexLayer'; +import { DefaultZIndexes } from '../zIndex/DefaultZIndexes'; + +/** + * This is public API because we expose it as the valueAccessor parameter. + * + * The properties of "viewBox" are repeated as the root props of the entry object. + * So it doesn't matter if you read entry.x or entry.viewBox.x, they are the same. + * + * It's not necessary to pass redundant data, but we keep it for backward compatibility. + */ + +/** + * LabelList props do not allow refs because the same props are reused in multiple elements so we don't have a good single place to ref to. + */ + +/** + * This is the type accepted for the `label` prop on various graphical items. + * It accepts: + * + * boolean: + * true = labels show, + * false = labels don't show + * React element: + * will be cloned with extra props + * function: + * is used as

` + */ +export function useElementOffset() { + var extraDependencies = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; + var [lastBoundingBox, setLastBoundingBox] = useState({ + height: 0, + left: 0, + top: 0, + width: 0 + }); + var updateBoundingBox = useCallback(node => { + if (node != null) { + var rect = node.getBoundingClientRect(); + var box = { + height: rect.height, + left: rect.left, + top: rect.top, + width: rect.width + }; + if (Math.abs(box.height - lastBoundingBox.height) > EPS || Math.abs(box.left - lastBoundingBox.left) > EPS || Math.abs(box.top - lastBoundingBox.top) > EPS || Math.abs(box.width - lastBoundingBox.width) > EPS) { + setLastBoundingBox({ + height: box.height, + left: box.left, + top: box.top, + width: box.width + }); + } + } + }, + // eslint-disable-next-line react-hooks/exhaustive-deps + [lastBoundingBox.width, lastBoundingBox.height, lastBoundingBox.top, lastBoundingBox.left, ...extraDependencies]); + return [lastBoundingBox, updateBoundingBox]; +} Index: node_modules/recharts/es6/util/useId.js =================================================================== --- node_modules/recharts/es6/util/useId.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/util/useId.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,20 @@ +var _ref; +import * as React from 'react'; +import { uniqueId } from './DataUtils'; + +/** + * Fallback for React.useId() for versions prior to React 18. + * Generates a unique ID using a simple counter and a prefix. + * + * @returns A unique ID that remains consistent across renders. + */ +export var useIdFallback = () => { + var [id] = React.useState(() => uniqueId('uid-')); + return id; +}; + +/* + * This weird syntax is used to avoid a build-time error in React 17 and earlier when building with Webpack. + * See https://github.com/webpack/webpack/issues/14814 + */ +export var useId = (_ref = React['useId'.toString()]) !== null && _ref !== void 0 ? _ref : useIdFallback; Index: node_modules/recharts/es6/util/useReportScale.js =================================================================== --- node_modules/recharts/es6/util/useReportScale.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/util/useReportScale.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,21 @@ +import { useEffect, useState } from 'react'; +import { useAppDispatch, useAppSelector } from '../state/hooks'; +import { selectContainerScale } from '../state/selectors/containerSelectors'; +import { setScale } from '../state/layoutSlice'; +import { isWellBehavedNumber } from './isWellBehavedNumber'; +export function useReportScale() { + var dispatch = useAppDispatch(); + var [ref, setRef] = useState(null); + var scale = useAppSelector(selectContainerScale); + useEffect(() => { + if (ref == null) { + return; + } + var rect = ref.getBoundingClientRect(); + var newScale = rect.width / ref.offsetWidth; + if (isWellBehavedNumber(newScale) && newScale !== scale) { + dispatch(setScale(newScale)); + } + }, [ref, dispatch, scale]); + return setRef; +} Index: node_modules/recharts/es6/util/useUniqueId.js =================================================================== --- node_modules/recharts/es6/util/useUniqueId.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/util/useUniqueId.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,32 @@ +import { useId } from './useId'; + +/** + * A hook that generates a unique ID. It uses React.useId() in React 18+ for SSR safety + * and falls back to a client-side-only unique ID generator for older versions. + * + * The ID will stay the same across renders, and you can optionally provide a prefix. + * + * @param [prefix] - An optional prefix for the generated ID. + * @param [customId] - An optional custom ID to override the generated one. + * @returns The unique ID. + */ +export function useUniqueId(prefix, customId) { + /* + * We have to call this hook here even if we don't use the result because + * rules of hooks demand that hooks are never called conditionally. + */ + var generatedId = useId(); + + // If a custom ID is provided, it always takes precedence. + if (customId) { + return customId; + } + + // Apply the prefix if one was provided. + return prefix ? "".concat(prefix, "-").concat(generatedId) : generatedId; +} + +/** + * The useUniqueId hook returns a unique ID that is either reused from external props or generated internally. + * Either way the ID is now guaranteed to be present so no more nulls or undefined. + */ Index: node_modules/recharts/es6/zIndex/DefaultZIndexes.js =================================================================== --- node_modules/recharts/es6/zIndex/DefaultZIndexes.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/zIndex/DefaultZIndexes.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,73 @@ +/** + * A collection of all default zIndex values used by Recharts. + * + * You can reuse these, or you can define your own. + */ +export var DefaultZIndexes = { + /** + * CartesianGrid and PolarGrid + */ + grid: -100, + /** + * Background of Bar and RadialBar. + * This is not visible by default but can be enabled by setting background={true} on Bar or RadialBar. + */ + barBackground: -50, + /* + * other chart elements or custom elements without specific zIndex + * render in here, at zIndex 0 + */ + + /** + * Area, Pie, Radar, and ReferenceArea + */ + area: 100, + /** + * Cursor is embedded inside Tooltip and controlled by it. + * The Tooltip itself has a separate portal and is not included in the zIndex system; + * Cursor is the decoration inside the chart area. CursorRectangle is a rectangle box. + * It renders below bar so that in a stacked bar chart the cursor rectangle does not hide the other bars. + */ + cursorRectangle: 200, + /** + * Bar and RadialBar + */ + bar: 300, + /** + * Line and ReferenceLine, and ErrorBor + */ + line: 400, + /** + * XAxis and YAxis and PolarAngleAxis and PolarRadiusAxis ticks and lines and children + */ + axis: 500, + /** + * Scatter and ReferenceDot, + * and Dots of Line and Area and Radar if they have dot=true + */ + scatter: 600, + /** + * Hovering over a Bar or RadialBar renders a highlight rectangle + */ + activeBar: 1000, + /** + * Cursor is embedded inside Tooltip and controlled by it. + * The Tooltip itself has a separate portal and is not included in the zIndex system; + * Cursor is the decoration inside the chart area, usually a cross or a box. + * CursorLine is a line cursor rendered in Line, Area, Scatter, Radar charts. + * It renders above the Line and Scatter so that it is always visible. + * It renders below active dot so that the dot is always visible and shows the current point. + * We're also assuming that the active dot is small enough that it does not fully cover the cursor line. + * + * This also applies to the radial cursor in RadialBarChart. + */ + cursorLine: 1100, + /** + * Hovering over a Point in Line, Area, Scatter, Radar renders a highlight dot + */ + activeDot: 1200, + /** + * LabelList and Label, including Axis labels + */ + label: 2000 +}; Index: node_modules/recharts/es6/zIndex/ZIndexLayer.js =================================================================== --- node_modules/recharts/es6/zIndex/ZIndexLayer.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/zIndex/ZIndexLayer.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,79 @@ +import { useLayoutEffect } from 'react'; +import { createPortal } from 'react-dom'; +import { noop } from '../util/DataUtils'; +import { useAppDispatch, useAppSelector } from '../state/hooks'; +import { selectZIndexPortalElement } from './zIndexSelectors'; +import { registerZIndexPortal, unregisterZIndexPortal } from '../state/zIndexSlice'; +import { useIsInChartContext } from '../context/chartLayoutContext'; +import { useIsPanorama } from '../context/PanoramaContext'; + +/** + * @since 3.4 + */ + +/** + * A layer that renders its children into a portal corresponding to the given zIndex. + * We can't use regular CSS `z-index` because SVG does not support it. + * So instead, we create separate DOM nodes for each zIndex layer + * and render the children into the corresponding DOM node using React portals. + * + * This component must be used inside a Chart component. + * + * @param zIndex numeric zIndex value, higher values are rendered on top of lower values + * @param children the content to render inside this zIndex layer + * + * @since 3.4 + */ +export function ZIndexLayer(_ref) { + var { + zIndex, + children + } = _ref; + /* + * If we are outside of chart, then we can't rely on the zIndex portal state, + * so we just render normally. + */ + var isInChartContext = useIsInChartContext(); + /* + * If zIndex is undefined then we render normally without portals. + * Also, if zIndex is 0, we render normally without portals, + * because 0 is the default layer that does not need a portal. + */ + var shouldRenderInPortal = isInChartContext && zIndex !== undefined && zIndex !== 0; + var isPanorama = useIsPanorama(); + var dispatch = useAppDispatch(); + useLayoutEffect(() => { + if (!shouldRenderInPortal) { + // Nothing to do. We have to call the hook because of the rules of hooks. + return noop; + } + /* + * Because zIndexes are dynamic (meaning, we're not working with a predefined set of layers, + * but we allow users to define any zIndex at any time), we need to register + * the requested zIndex in the global store. This way, the ZIndexPortals component + * can render the corresponding portals and only the requested ones. + */ + dispatch(registerZIndexPortal({ + zIndex + })); + return () => { + dispatch(unregisterZIndexPortal({ + zIndex + })); + }; + }, [dispatch, zIndex, shouldRenderInPortal]); + var portalElement = useAppSelector(state => selectZIndexPortalElement(state, zIndex, isPanorama)); + if (!shouldRenderInPortal) { + // If no zIndex is provided or zIndex is 0, render normally without portals + return children; + } + if (!portalElement) { + /* + * If we don't have a portal element yet, this means that the registration + * has not been processed yet by the ZIndexPortals component. + * So here we render null and wait for the next render cycle. + */ + return null; + } + return /*#__PURE__*/createPortal(children, portalElement); +} Index: node_modules/recharts/es6/zIndex/ZIndexPortal.js =================================================================== --- node_modules/recharts/es6/zIndex/ZIndexPortal.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/zIndex/ZIndexPortal.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,55 @@ +import * as React from 'react'; +import { useLayoutEffect, useRef } from 'react'; +import { useAppDispatch, useAppSelector } from '../state/hooks'; +import { registerZIndexPortalElement, unregisterZIndexPortalElement } from '../state/zIndexSlice'; +import { selectAllRegisteredZIndexes } from './zIndexSelectors'; +function ZIndexSvgPortal(_ref) { + var { + zIndex, + isPanorama + } = _ref; + var ref = useRef(null); + var dispatch = useAppDispatch(); + useLayoutEffect(() => { + if (ref.current) { + dispatch(registerZIndexPortalElement({ + zIndex, + element: ref.current, + isPanorama + })); + } + return () => { + dispatch(unregisterZIndexPortalElement({ + zIndex, + isPanorama + })); + }; + }, [dispatch, zIndex, isPanorama]); + // these g elements should not be tabbable + return /*#__PURE__*/React.createElement("g", { + tabIndex: -1, + ref: ref + }); +} +export function AllZIndexPortals(_ref2) { + var { + children, + isPanorama + } = _ref2; + var allRegisteredZIndexes = useAppSelector(selectAllRegisteredZIndexes); + if (!allRegisteredZIndexes || allRegisteredZIndexes.length === 0) { + return children; + } + var allNegativeZIndexes = allRegisteredZIndexes.filter(zIndex => zIndex < 0); + // We exclude zero on purpose - that is the default layer, and it doesn't need a portal. + var allPositiveZIndexes = allRegisteredZIndexes.filter(zIndex => zIndex > 0); + return /*#__PURE__*/React.createElement(React.Fragment, null, allNegativeZIndexes.map(zIndex => /*#__PURE__*/React.createElement(ZIndexSvgPortal, { + key: zIndex, + zIndex: zIndex, + isPanorama: isPanorama + })), children, allPositiveZIndexes.map(zIndex => /*#__PURE__*/React.createElement(ZIndexSvgPortal, { + key: zIndex, + zIndex: zIndex, + isPanorama: isPanorama + }))); +} Index: node_modules/recharts/es6/zIndex/getZIndexFromUnknown.js =================================================================== --- node_modules/recharts/es6/zIndex/getZIndexFromUnknown.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/zIndex/getZIndexFromUnknown.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,7 @@ +import { isWellBehavedNumber } from '../util/isWellBehavedNumber'; +export function getZIndexFromUnknown(input, defaultZIndex) { + if (input && typeof input === 'object' && 'zIndex' in input && typeof input.zIndex === 'number' && isWellBehavedNumber(input.zIndex)) { + return input.zIndex; + } + return defaultZIndex; +} Index: node_modules/recharts/es6/zIndex/zIndexSelectors.js =================================================================== --- node_modules/recharts/es6/zIndex/zIndexSelectors.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) +++ node_modules/recharts/es6/zIndex/zIndexSelectors.js (revision a762898ecd37a452c782821d4c2c4955c6ed2521) @@ -0,0 +1,32 @@ +import { createSelector } from 'reselect'; +import { arrayContentsAreEqualCheck } from '../state/selectors/arrayEqualityCheck'; +import { DefaultZIndexes } from './DefaultZIndexes'; + +/** + * Given a zIndex, returns the corresponding portal element reference. + * If no zIndex is provided or if the zIndex is not registered, returns undefined. + * + * It also returns undefined in case the z-index portal has not been rendered yet. + */ +export var selectZIndexPortalElement = createSelector(state => state.zIndex.zIndexMap, (_, zIndex) => zIndex, (_, _zIndex, isPanorama) => isPanorama, (zIndexMap, zIndex, isPanorama) => { + if (zIndex == null) { + return undefined; + } + var entry = zIndexMap[zIndex]; + if (entry == null) { + return undefined; + } + if (isPanorama) { + return entry.panoramaElement; + } + return entry.element; +}); +export var selectAllRegisteredZIndexes = createSelector(state => state.zIndex.zIndexMap, zIndexMap => { + var allNumbers = Object.keys(zIndexMap).map(zIndexStr => parseInt(zIndexStr, 10)).concat(Object.values(DefaultZIndexes)); + var uniqueNumbers = Array.from(new Set(allNumbers)); + return uniqueNumbers.sort((a, b) => a - b); +}, { + memoizeOptions: { + resultEqualityCheck: arrayContentsAreEqualCheck + } +});