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); +}