{"version":3,"file":"ChartLine-BR4zSGlp.cjs","sources":["../node_modules/recharts/es6/shape/Dot.js","../node_modules/recharts/es6/component/Dots.js","../node_modules/recharts/es6/component/ActivePoints.js","../node_modules/recharts/es6/state/selectors/lineSelectors.js","../node_modules/recharts/es6/util/getRadiusAndStrokeWidthFromDot.js","../node_modules/recharts/es6/cartesian/Line.js","../node_modules/recharts/es6/state/selectors/areaSelectors.js","../node_modules/recharts/es6/cartesian/Area.js","../node_modules/recharts/es6/chart/LineChart.js","../node_modules/recharts/es6/chart/AreaChart.js","../src/dashboard/widgets/ChartLine.tsx"],"sourcesContent":["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); }\nimport * as React from 'react';\nimport { clsx } from 'clsx';\nimport { adaptEventHandlers } from '../util/types';\nimport { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';\nimport { isNumber } from '../util/DataUtils';\n/**\n * Renders a dot in the chart.\n *\n * This component accepts X and Y coordinates in pixels.\n * If you need to position the rectangle based on your chart's data,\n * consider using the {@link ReferenceDot} component instead.\n *\n * @param props\n * @constructor\n */\nexport var Dot = props => {\n var {\n cx,\n cy,\n r,\n className\n } = props;\n var layerClass = clsx('recharts-dot', className);\n if (isNumber(cx) && isNumber(cy) && isNumber(r)) {\n return /*#__PURE__*/React.createElement(\"circle\", _extends({}, svgPropertiesNoEvents(props), adaptEventHandlers(props), {\n className: layerClass,\n cx: cx,\n cy: cy,\n r: r\n }));\n }\n return null;\n};","var _excluded = [\"points\"];\nfunction 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; }\nfunction _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; }\nfunction _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; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == typeof i ? i : i + \"\"; }\nfunction _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); }\nfunction _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); }\nfunction _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; }\nfunction _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; }\nimport * as React from 'react';\nimport { cloneElement, isValidElement } from 'react';\nimport { clsx } from 'clsx';\nimport { Dot } from '../shape/Dot';\nimport { Layer } from '../container/Layer';\nimport { isClipDot } from '../util/ReactUtils';\nimport { svgPropertiesAndEventsFromUnknown } from '../util/svgPropertiesAndEvents';\nimport { ZIndexLayer } from '../zIndex/ZIndexLayer';\nimport { DefaultZIndexes } from '../zIndex/DefaultZIndexes';\nfunction DotItem(_ref) {\n var {\n option,\n dotProps,\n className\n } = _ref;\n if (/*#__PURE__*/isValidElement(option)) {\n // @ts-expect-error we can't type check element cloning properly\n return /*#__PURE__*/cloneElement(option, dotProps);\n }\n if (typeof option === 'function') {\n return option(dotProps);\n }\n var finalClassName = clsx(className, typeof option !== 'boolean' ? option.className : '');\n var _ref2 = dotProps !== null && dotProps !== void 0 ? dotProps : {},\n {\n points\n } = _ref2,\n props = _objectWithoutProperties(_ref2, _excluded);\n return /*#__PURE__*/React.createElement(Dot, _extends({}, props, {\n className: finalClassName\n }));\n}\nfunction shouldRenderDots(points, dot) {\n if (points == null) {\n return false;\n }\n if (dot) {\n return true;\n }\n return points.length === 1;\n}\nexport function Dots(_ref3) {\n var {\n points,\n dot,\n className,\n dotClassName,\n dataKey,\n baseProps,\n needClip,\n clipPathId,\n zIndex = DefaultZIndexes.scatter\n } = _ref3;\n if (!shouldRenderDots(points, dot)) {\n return null;\n }\n var clipDot = isClipDot(dot);\n var customDotProps = svgPropertiesAndEventsFromUnknown(dot);\n var dots = points.map((entry, i) => {\n var _entry$x, _entry$y;\n var dotProps = _objectSpread(_objectSpread(_objectSpread({\n r: 3\n }, baseProps), customDotProps), {}, {\n index: i,\n cx: (_entry$x = entry.x) !== null && _entry$x !== void 0 ? _entry$x : undefined,\n cy: (_entry$y = entry.y) !== null && _entry$y !== void 0 ? _entry$y : undefined,\n dataKey,\n value: entry.value,\n payload: entry.payload,\n points\n });\n return /*#__PURE__*/React.createElement(DotItem, {\n key: \"dot-\".concat(i),\n option: dot,\n dotProps: dotProps,\n className: dotClassName\n });\n });\n var layerProps = {};\n if (needClip && clipPathId != null) {\n layerProps.clipPath = \"url(#clipPath-\".concat(clipDot ? '' : 'dots-').concat(clipPathId, \")\");\n }\n return /*#__PURE__*/React.createElement(ZIndexLayer, {\n zIndex: zIndex\n }, /*#__PURE__*/React.createElement(Layer, _extends({\n className: className\n }, layerProps), dots));\n}","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; }\nfunction _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; }\nfunction _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; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == typeof i ? i : i + \"\"; }\nfunction _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); }\nimport * as React from 'react';\nimport { cloneElement, isValidElement } from 'react';\nimport { adaptEventHandlers } from '../util/types';\nimport { Dot } from '../shape/Dot';\nimport { Layer } from '../container/Layer';\nimport { useAppSelector } from '../state/hooks';\nimport { selectActiveTooltipIndex } from '../state/selectors/tooltipSelectors';\nimport { useActiveTooltipDataPoints } from '../hooks';\nimport { isNullish } from '../util/DataUtils';\nimport { svgPropertiesNoEventsFromUnknown } from '../util/svgPropertiesNoEvents';\nimport { ZIndexLayer } from '../zIndex/ZIndexLayer';\nimport { DefaultZIndexes } from '../zIndex/DefaultZIndexes';\nvar ActivePoint = _ref => {\n var {\n point,\n childIndex,\n mainColor,\n activeDot,\n dataKey,\n clipPath\n } = _ref;\n if (activeDot === false || point.x == null || point.y == null) {\n return null;\n }\n var dotPropsTyped = {\n index: childIndex,\n dataKey,\n cx: point.x,\n cy: point.y,\n r: 4,\n fill: mainColor !== null && mainColor !== void 0 ? mainColor : 'none',\n strokeWidth: 2,\n stroke: '#fff',\n payload: point.payload,\n value: point.value\n };\n\n // @ts-expect-error svgPropertiesNoEventsFromUnknown(activeDot) is contributing unknown props\n var dotProps = _objectSpread(_objectSpread(_objectSpread({}, dotPropsTyped), svgPropertiesNoEventsFromUnknown(activeDot)), adaptEventHandlers(activeDot));\n var dot;\n if (/*#__PURE__*/isValidElement(activeDot)) {\n // @ts-expect-error we're improperly typing events\n dot = /*#__PURE__*/cloneElement(activeDot, dotProps);\n } else if (typeof activeDot === 'function') {\n dot = activeDot(dotProps);\n } else {\n dot = /*#__PURE__*/React.createElement(Dot, dotProps);\n }\n return /*#__PURE__*/React.createElement(Layer, {\n className: \"recharts-active-dot\",\n clipPath: clipPath\n }, dot);\n};\nexport function ActivePoints(_ref2) {\n var {\n points,\n mainColor,\n activeDot,\n itemDataKey,\n clipPath,\n zIndex = DefaultZIndexes.activeDot\n } = _ref2;\n var activeTooltipIndex = useAppSelector(selectActiveTooltipIndex);\n var activeDataPoints = useActiveTooltipDataPoints();\n if (points == null || activeDataPoints == null) {\n return null;\n }\n var activePoint = points.find(p => activeDataPoints.includes(p.payload));\n if (isNullish(activePoint)) {\n return null;\n }\n return /*#__PURE__*/React.createElement(ZIndexLayer, {\n zIndex: zIndex\n }, /*#__PURE__*/React.createElement(ActivePoint, {\n point: activePoint,\n childIndex: Number(activeTooltipIndex),\n mainColor: mainColor,\n dataKey: itemDataKey,\n activeDot: activeDot,\n clipPath: clipPath\n }));\n}","import { createSelector } from 'reselect';\nimport { computeLinePoints } from '../../cartesian/Line';\nimport { selectChartDataWithIndexesIfNotInPanoramaPosition4 } from './dataSelectors';\nimport { selectChartLayout } from '../../context/chartLayoutContext';\nimport { selectAxisWithScale, selectTicksOfGraphicalItem, selectUnfilteredCartesianItems } from './axisSelectors';\nimport { getBandSizeOfAxis, isCategoricalAxis } from '../../util/ChartUtils';\nvar selectXAxisWithScale = (state, xAxisId, _yAxisId, isPanorama) => selectAxisWithScale(state, 'xAxis', xAxisId, isPanorama);\nvar selectXAxisTicks = (state, xAxisId, _yAxisId, isPanorama) => selectTicksOfGraphicalItem(state, 'xAxis', xAxisId, isPanorama);\nvar selectYAxisWithScale = (state, _xAxisId, yAxisId, isPanorama) => selectAxisWithScale(state, 'yAxis', yAxisId, isPanorama);\nvar selectYAxisTicks = (state, _xAxisId, yAxisId, isPanorama) => selectTicksOfGraphicalItem(state, 'yAxis', yAxisId, isPanorama);\nvar selectBandSize = createSelector([selectChartLayout, selectXAxisWithScale, selectYAxisWithScale, selectXAxisTicks, selectYAxisTicks], (layout, xAxis, yAxis, xAxisTicks, yAxisTicks) => {\n if (isCategoricalAxis(layout, 'xAxis')) {\n return getBandSizeOfAxis(xAxis, xAxisTicks, false);\n }\n return getBandSizeOfAxis(yAxis, yAxisTicks, false);\n});\nvar pickLineId = (_state, _xAxisId, _yAxisId, _isPanorama, id) => id;\nfunction isLineSettings(item) {\n return item.type === 'line';\n}\n\n/*\n * There is a race condition problem because we read some data from props and some from the state.\n * The state is updated through a dispatch and is one render behind,\n * and so we have this weird one tick render where the displayedData in one selector have the old dataKey\n * but the new dataKey in another selector.\n *\n * So here instead of reading the dataKey from the props, we always read it from the state.\n */\nvar selectSynchronisedLineSettings = createSelector([selectUnfilteredCartesianItems, pickLineId], (graphicalItems, id) => graphicalItems.filter(isLineSettings).find(x => x.id === id));\nexport var selectLinePoints = createSelector([selectChartLayout, selectXAxisWithScale, selectYAxisWithScale, selectXAxisTicks, selectYAxisTicks, selectSynchronisedLineSettings, selectBandSize, selectChartDataWithIndexesIfNotInPanoramaPosition4], (layout, xAxis, yAxis, xAxisTicks, yAxisTicks, lineSettings, bandSize, _ref) => {\n var {\n chartData,\n dataStartIndex,\n dataEndIndex\n } = _ref;\n if (lineSettings == null || xAxis == null || yAxis == null || xAxisTicks == null || yAxisTicks == null || xAxisTicks.length === 0 || yAxisTicks.length === 0 || bandSize == null || layout !== 'horizontal' && layout !== 'vertical') {\n return undefined;\n }\n var {\n dataKey,\n data\n } = lineSettings;\n var displayedData;\n if (data != null && data.length > 0) {\n displayedData = data;\n } else {\n displayedData = chartData === null || chartData === void 0 ? void 0 : chartData.slice(dataStartIndex, dataEndIndex + 1);\n }\n if (displayedData == null) {\n return undefined;\n }\n return computeLinePoints({\n layout,\n xAxis,\n yAxis,\n xAxisTicks,\n yAxisTicks,\n dataKey,\n bandSize,\n displayedData\n });\n});","import { svgPropertiesNoEventsFromUnknown } from './svgPropertiesNoEvents';\nexport function getRadiusAndStrokeWidthFromDot(dot) {\n var props = svgPropertiesNoEventsFromUnknown(dot);\n var defaultR = 3;\n var defaultStrokeWidth = 2;\n if (props != null) {\n var {\n r,\n strokeWidth\n } = props;\n var realR = Number(r);\n var realStrokeWidth = Number(strokeWidth);\n if (Number.isNaN(realR) || realR < 0) {\n realR = defaultR;\n }\n if (Number.isNaN(realStrokeWidth) || realStrokeWidth < 0) {\n realStrokeWidth = defaultStrokeWidth;\n }\n return {\n r: realR,\n strokeWidth: realStrokeWidth\n };\n }\n return {\n r: defaultR,\n strokeWidth: defaultStrokeWidth\n };\n}","var _excluded = [\"id\"],\n _excluded2 = [\"type\", \"layout\", \"connectNulls\", \"needClip\", \"shape\"],\n _excluded3 = [\"activeDot\", \"animateNewValues\", \"animationBegin\", \"animationDuration\", \"animationEasing\", \"connectNulls\", \"dot\", \"hide\", \"isAnimationActive\", \"label\", \"legendType\", \"xAxisId\", \"yAxisId\", \"id\"];\nfunction _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); }\nfunction 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; }\nfunction _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; }\nfunction _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; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == typeof i ? i : i + \"\"; }\nfunction _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); }\nfunction _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; }\nfunction _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; }\nimport * as React from 'react';\nimport { Component, useCallback, useMemo, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { Layer } from '../container/Layer';\nimport { CartesianLabelListContextProvider, LabelListFromLabelProp } from '../component/LabelList';\nimport { Dots } from '../component/Dots';\nimport { interpolate, isNullish, noop } from '../util/DataUtils';\nimport { isClipDot } from '../util/ReactUtils';\nimport { getCateCoordinateOfLine, getTooltipNameProp, getValueByDataKey } from '../util/ChartUtils';\nimport { ActivePoints } from '../component/ActivePoints';\nimport { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings';\nimport { SetErrorBarContext } from '../context/ErrorBarContext';\nimport { GraphicalItemClipPath, useNeedsClip } from './GraphicalItemClipPath';\nimport { useChartLayout } from '../context/chartLayoutContext';\nimport { useIsPanorama } from '../context/PanoramaContext';\nimport { selectLinePoints } from '../state/selectors/lineSelectors';\nimport { useAppSelector } from '../state/hooks';\nimport { SetLegendPayload } from '../state/SetLegendPayload';\nimport { useAnimationId } from '../util/useAnimationId';\nimport { resolveDefaultProps } from '../util/resolveDefaultProps';\nimport { usePlotArea } from '../hooks';\nimport { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId';\nimport { SetCartesianGraphicalItem } from '../state/SetGraphicalItem';\nimport { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';\nimport { JavascriptAnimate } from '../animation/JavascriptAnimate';\nimport { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents';\nimport { getRadiusAndStrokeWidthFromDot } from '../util/getRadiusAndStrokeWidthFromDot';\nimport { Shape } from '../util/ActiveShapeUtils';\nimport { ZIndexLayer } from '../zIndex/ZIndexLayer';\nimport { DefaultZIndexes } from '../zIndex/DefaultZIndexes';\nimport { propsAreEqual } from '../util/propsAreEqual';\n\n/**\n * Internal props, combination of external props + defaultProps + private Recharts state\n */\n\n/**\n * External props, intended for end users to fill in\n */\n\n/**\n * Because of naming conflict, we are forced to ignore certain (valid) SVG attributes.\n */\n\nvar computeLegendPayloadFromAreaData = props => {\n var {\n dataKey,\n name,\n stroke,\n legendType,\n hide\n } = props;\n return [{\n inactive: hide,\n dataKey,\n type: legendType,\n color: stroke,\n value: getTooltipNameProp(name, dataKey),\n payload: props\n }];\n};\nvar SetLineTooltipEntrySettings = /*#__PURE__*/React.memo(_ref => {\n var {\n dataKey,\n data,\n stroke,\n strokeWidth,\n fill,\n name,\n hide,\n unit,\n tooltipType,\n id\n } = _ref;\n var tooltipEntrySettings = {\n dataDefinedOnItem: data,\n getPosition: noop,\n settings: {\n stroke,\n strokeWidth,\n fill,\n dataKey,\n nameKey: undefined,\n name: getTooltipNameProp(name, dataKey),\n hide,\n type: tooltipType,\n color: stroke,\n unit,\n graphicalItemId: id\n }\n };\n return /*#__PURE__*/React.createElement(SetTooltipEntrySettings, {\n tooltipEntrySettings: tooltipEntrySettings\n });\n});\n\n/**\n * Generates a simple stroke-dasharray string for animating a line draw effect.\n *\n * Uses `totalLength` as the gap (instead of `totalLength - length`) to prevent a floating-point\n * precision artifact: when fractional dash and gap values are serialized to a string attribute\n * and re-parsed by the SVG renderer, their sum can differ from the actual path length by a ULP,\n * causing the dasharray pattern to repeat and render a phantom dot at the path endpoint\n * with round or square strokeLinecap.\n *\n * @param totalLength The total length of the SVG path\n * @param length The currently visible portion of the path\n * @returns A stroke-dasharray string like \"50px 200px\"\n */\nvar generateSimpleStrokeDasharray = (totalLength, length) => {\n return \"\".concat(length, \"px \").concat(totalLength, \"px\");\n};\n\n/**\n * Repeats a dash pattern array a given number of times.\n *\n * If the input array has an odd length, a trailing `0` is appended to make it even\n * before repeating, because SVG stroke-dasharray patterns must have an even number\n * of values to cycle correctly between dash and gap segments.\n *\n * @param lines Array of dash/gap lengths to repeat\n * @param count Number of times to repeat the pattern\n * @returns A new array with the pattern repeated `count` times\n */\nfunction repeat(lines, count) {\n var linesUnit = lines.length % 2 !== 0 ? [...lines, 0] : lines;\n var result = [];\n for (var i = 0; i < count; ++i) {\n result.push(...linesUnit);\n }\n return result;\n}\n\n/**\n * Computes a stroke-dasharray string for animating a custom-dashed line draw effect.\n *\n * Given a user-specified dash pattern (e.g. `\"7,3\"`), this function builds a dasharray\n * that reveals exactly `length` pixels of that pattern, followed by a gap of `totalLength`\n * to hide the remainder of the path.\n *\n * Like {@link generateSimpleStrokeDasharray}, the trailing gap uses `totalLength` rather than\n * `totalLength - length` to avoid floating-point precision artifacts with round/square strokeLinecap.\n *\n * @param length The currently visible portion of the path\n * @param totalLength The total length of the SVG path\n * @param lines The user-specified dash pattern as an array of numbers (e.g. [7, 3])\n * @returns A stroke-dasharray string incorporating the custom dash pattern\n */\nvar getStrokeDasharray = (length, totalLength, lines) => {\n var lineLength = lines.reduce((pre, next) => pre + next, 0);\n\n // if lineLength is 0 return the default when no strokeDasharray is provided\n if (!lineLength) {\n return generateSimpleStrokeDasharray(totalLength, length);\n }\n var count = Math.floor(length / lineLength);\n var remainLength = length % lineLength;\n var remainLines = [];\n for (var i = 0, sum = 0; i < lines.length; sum += (_lines$i = lines[i]) !== null && _lines$i !== void 0 ? _lines$i : 0, ++i) {\n var _lines$i;\n var lineValue = lines[i];\n if (lineValue != null && sum + lineValue > remainLength) {\n remainLines = [...lines.slice(0, i), remainLength - sum];\n break;\n }\n }\n var emptyLines = remainLines.length % 2 === 0 ? [0, totalLength] : [totalLength];\n return [...repeat(lines, count), ...remainLines, ...emptyLines].map(line => \"\".concat(line, \"px\")).join(', ');\n};\nfunction LineDotsWrapper(_ref2) {\n var {\n clipPathId,\n points,\n props\n } = _ref2;\n var {\n dot,\n dataKey,\n needClip\n } = props;\n\n /*\n * Exclude ID from the props passed to the Dots component\n * because then the ID would be applied to multiple dots, and it would no longer be unique.\n */\n var {\n id\n } = props,\n propsWithoutId = _objectWithoutProperties(props, _excluded);\n var lineProps = svgPropertiesNoEvents(propsWithoutId);\n return /*#__PURE__*/React.createElement(Dots, {\n points: points,\n dot: dot,\n className: \"recharts-line-dots\",\n dotClassName: \"recharts-line-dot\",\n dataKey: dataKey,\n baseProps: lineProps,\n needClip: needClip,\n clipPathId: clipPathId\n });\n}\nfunction LineLabelListProvider(_ref3) {\n var {\n showLabels,\n children,\n points\n } = _ref3;\n var labelListEntries = useMemo(() => {\n return points === null || points === void 0 ? void 0 : points.map(point => {\n var _point$x, _point$y;\n var viewBox = {\n x: (_point$x = point.x) !== null && _point$x !== void 0 ? _point$x : 0,\n y: (_point$y = point.y) !== null && _point$y !== void 0 ? _point$y : 0,\n width: 0,\n lowerWidth: 0,\n upperWidth: 0,\n height: 0\n };\n return _objectSpread(_objectSpread({}, viewBox), {}, {\n value: point.value,\n payload: point.payload,\n viewBox,\n /*\n * Line is not passing parentViewBox to the LabelList so the labels can escape - looks like a bug, should we pass parentViewBox?\n * Or should this just be the root chart viewBox?\n */\n parentViewBox: undefined,\n fill: undefined\n });\n });\n }, [points]);\n return /*#__PURE__*/React.createElement(CartesianLabelListContextProvider, {\n value: showLabels ? labelListEntries : undefined\n }, children);\n}\nfunction StaticCurve(_ref4) {\n var {\n clipPathId,\n pathRef,\n points,\n strokeDasharray,\n props\n } = _ref4;\n var {\n type,\n layout,\n connectNulls,\n needClip,\n shape\n } = props,\n others = _objectWithoutProperties(props, _excluded2);\n var curveProps = _objectSpread(_objectSpread({}, svgPropertiesAndEvents(others)), {}, {\n fill: 'none',\n className: 'recharts-line-curve',\n clipPath: needClip ? \"url(#clipPath-\".concat(clipPathId, \")\") : undefined,\n points,\n type,\n layout,\n connectNulls,\n strokeDasharray: strokeDasharray !== null && strokeDasharray !== void 0 ? strokeDasharray : props.strokeDasharray\n });\n return /*#__PURE__*/React.createElement(React.Fragment, null, (points === null || points === void 0 ? void 0 : points.length) > 1 && /*#__PURE__*/React.createElement(Shape, _extends({\n shapeType: \"curve\",\n option: shape\n }, curveProps, {\n pathRef: pathRef\n })), /*#__PURE__*/React.createElement(LineDotsWrapper, {\n points: points,\n clipPathId: clipPathId,\n props: props\n }));\n}\nfunction getTotalLength(mainCurve) {\n try {\n return mainCurve && mainCurve.getTotalLength && mainCurve.getTotalLength() || 0;\n } catch (_unused) {\n return 0;\n }\n}\nfunction CurveWithAnimation(_ref5) {\n var {\n clipPathId,\n props,\n pathRef,\n previousPointsRef,\n longestAnimatedLengthRef\n } = _ref5;\n var {\n points,\n strokeDasharray,\n isAnimationActive,\n animationBegin,\n animationDuration,\n animationEasing,\n animateNewValues,\n width,\n height,\n onAnimationEnd,\n onAnimationStart\n } = props;\n var prevPoints = previousPointsRef.current;\n var animationId = useAnimationId(points, 'recharts-line-');\n var animationIdRef = useRef(animationId);\n var [isAnimating, setIsAnimating] = useState(false);\n var showLabels = !isAnimating;\n var handleAnimationEnd = useCallback(() => {\n if (typeof onAnimationEnd === 'function') {\n onAnimationEnd();\n }\n setIsAnimating(false);\n }, [onAnimationEnd]);\n var handleAnimationStart = useCallback(() => {\n if (typeof onAnimationStart === 'function') {\n onAnimationStart();\n }\n setIsAnimating(true);\n }, [onAnimationStart]);\n var totalLength = getTotalLength(pathRef.current);\n /*\n * Here we want to detect if the length animation has been interrupted.\n * For that we keep a reference to the furthest length that has been animated.\n *\n * And then, to keep things smooth, we add to it the current length that is being animated right now.\n *\n * If we did Math.max then it makes the length animation \"pause\" but we want to keep it smooth\n * so in case we have some \"leftover\" length from the previous animation we add it to the current length.\n *\n * This is not perfect because the animation changes speed due to easing. The default easing is 'ease' which is not linear\n * and makes it stand out. But it's good enough I suppose.\n * If we want to fix it then we need to keep track of multiple animations and their easing and timings.\n *\n * If you want to see this in action, try to change the dataKey of the line chart while the initial animation is running.\n * The Line begins with zero length and slowly grows to the full length. While this growth is in progress,\n * change the dataKey and the Line will continue growing from where it has grown so far.\n *\n * This is for the case when new animation triggers. When that happens we get new points, everything re-renders,\n * and we get fresh new state in this component and use the ref stored above.\n *\n * In case when we get render without new animation - for example when opacity changes, or color changes,\n * then the animationId remains the same, and we do not update the starting point.\n * See https://github.com/recharts/recharts/issues/6044\n */\n var startingPointRef = useRef(0);\n if (animationIdRef.current !== animationId) {\n startingPointRef.current = longestAnimatedLengthRef.current;\n animationIdRef.current = animationId;\n }\n var startingPoint = startingPointRef.current;\n return /*#__PURE__*/React.createElement(LineLabelListProvider, {\n points: points,\n showLabels: showLabels\n }, props.children, /*#__PURE__*/React.createElement(JavascriptAnimate, {\n animationId: animationId,\n begin: animationBegin,\n duration: animationDuration,\n isActive: isAnimationActive,\n easing: animationEasing,\n onAnimationEnd: handleAnimationEnd,\n onAnimationStart: handleAnimationStart,\n key: animationId\n }, t => {\n var lengthInterpolated = interpolate(startingPoint, totalLength + startingPoint, t);\n var curLength = Math.min(lengthInterpolated, totalLength);\n var currentStrokeDasharray;\n if (isAnimationActive) {\n if (strokeDasharray) {\n var lines = \"\".concat(strokeDasharray).split(/[,\\s]+/gim).map(num => parseFloat(num));\n currentStrokeDasharray = getStrokeDasharray(curLength, totalLength, lines);\n } else {\n currentStrokeDasharray = generateSimpleStrokeDasharray(totalLength, curLength);\n }\n } else {\n currentStrokeDasharray = strokeDasharray == null ? undefined : String(strokeDasharray);\n }\n\n /*\n * Here it is important to wait a little bit with updating the previousPointsRef\n * before the animation has a time to initialize.\n * If we set the previous pointsRef immediately, we set it before the Legend height it calculated\n * and before pathRef is set.\n * If that happens, the Line will re-render again after Legend had reported its height\n * which will start a new animation with the previous points as the starting point\n * which gives the effect of the Line animating slightly upwards (where the animation distance equals the Legend height).\n * Waiting for t > 0 is indirect but good enough to ensure that the Legend height is calculated and animation works properly.\n *\n * Total length similarly is calculated from the pathRef. We should not update the previousPointsRef\n * before the pathRef is set, otherwise we will have a wrong total length.\n */\n if (t > 0 && totalLength > 0) {\n // eslint-disable-next-line no-param-reassign\n previousPointsRef.current = points;\n /*\n * totalLength is set from a ref and is not updated in the first tick of the animation.\n * It defaults to zero which is exactly what we want here because we want to grow from zero,\n * however the same happens when the data change.\n *\n * In that case we want to remember the previous length and continue from there, and only animate the shape.\n *\n * Therefore the totalLength > 0 check.\n *\n * The Animate is about to fire handleAnimationStart which will update the state\n * and cause a re-render and read a new proper totalLength which will be used in the next tick\n * and update the longestAnimatedLengthRef.\n *\n * Why Math.max? Sometimes the curve goes through a smaller length than previously recorded.\n * If we just set it to curLength, then the next animation would start from a smaller length\n * which looks weird. So we keep the longest length ever reached and then animate from there.\n */\n // eslint-disable-next-line no-param-reassign\n longestAnimatedLengthRef.current = Math.max(longestAnimatedLengthRef.current, curLength);\n }\n if (prevPoints) {\n var prevPointsDiffFactor = prevPoints.length / points.length;\n var stepData = t === 1 ? points : points.map((entry, index) => {\n var prevPointIndex = Math.floor(index * prevPointsDiffFactor);\n if (prevPoints[prevPointIndex]) {\n var prev = prevPoints[prevPointIndex];\n return _objectSpread(_objectSpread({}, entry), {}, {\n x: interpolate(prev.x, entry.x, t),\n y: interpolate(prev.y, entry.y, t)\n });\n }\n\n // magic number of faking previous x and y location\n if (animateNewValues) {\n return _objectSpread(_objectSpread({}, entry), {}, {\n x: interpolate(width * 2, entry.x, t),\n y: interpolate(height / 2, entry.y, t)\n });\n }\n return _objectSpread(_objectSpread({}, entry), {}, {\n x: entry.x,\n y: entry.y\n });\n });\n // eslint-disable-next-line no-param-reassign\n previousPointsRef.current = stepData;\n return /*#__PURE__*/React.createElement(StaticCurve, {\n props: props,\n points: stepData,\n clipPathId: clipPathId,\n pathRef: pathRef,\n strokeDasharray: currentStrokeDasharray\n });\n }\n return /*#__PURE__*/React.createElement(StaticCurve, {\n props: props,\n points: points,\n clipPathId: clipPathId,\n pathRef: pathRef,\n strokeDasharray: currentStrokeDasharray\n });\n }), /*#__PURE__*/React.createElement(LabelListFromLabelProp, {\n label: props.label\n }));\n}\nfunction RenderCurve(_ref6) {\n var {\n clipPathId,\n props\n } = _ref6;\n var previousPointsRef = useRef(null);\n var longestAnimatedLengthRef = useRef(0);\n var pathRef = useRef(null);\n return /*#__PURE__*/React.createElement(CurveWithAnimation, {\n props: props,\n clipPathId: clipPathId,\n previousPointsRef: previousPointsRef,\n longestAnimatedLengthRef: longestAnimatedLengthRef,\n pathRef: pathRef\n });\n}\nvar errorBarDataPointFormatter = (dataPoint, dataKey) => {\n var _dataPoint$x, _dataPoint$y;\n return {\n x: (_dataPoint$x = dataPoint.x) !== null && _dataPoint$x !== void 0 ? _dataPoint$x : undefined,\n y: (_dataPoint$y = dataPoint.y) !== null && _dataPoint$y !== void 0 ? _dataPoint$y : undefined,\n value: dataPoint.value,\n // getValueByDataKey does not validate the output type\n errorVal: getValueByDataKey(dataPoint.payload, dataKey)\n };\n};\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass LineWithState extends Component {\n render() {\n var {\n hide,\n dot,\n points,\n className,\n xAxisId,\n yAxisId,\n top,\n left,\n width,\n height,\n id,\n needClip,\n zIndex\n } = this.props;\n if (hide) {\n return null;\n }\n var layerClass = clsx('recharts-line', className);\n var clipPathId = id;\n var {\n r,\n strokeWidth\n } = getRadiusAndStrokeWidthFromDot(dot);\n var clipDot = isClipDot(dot);\n var dotSize = r * 2 + strokeWidth;\n var activePointsClipPath = needClip ? \"url(#clipPath-\".concat(clipDot ? '' : 'dots-').concat(clipPathId, \")\") : undefined;\n return /*#__PURE__*/React.createElement(ZIndexLayer, {\n zIndex: zIndex\n }, /*#__PURE__*/React.createElement(Layer, {\n className: layerClass\n }, needClip && /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(GraphicalItemClipPath, {\n clipPathId: clipPathId,\n xAxisId: xAxisId,\n yAxisId: yAxisId\n }), !clipDot && /*#__PURE__*/React.createElement(\"clipPath\", {\n id: \"clipPath-dots-\".concat(clipPathId)\n }, /*#__PURE__*/React.createElement(\"rect\", {\n x: left - dotSize / 2,\n y: top - dotSize / 2,\n width: width + dotSize,\n height: height + dotSize\n }))), /*#__PURE__*/React.createElement(SetErrorBarContext, {\n xAxisId: xAxisId,\n yAxisId: yAxisId,\n data: points,\n dataPointFormatter: errorBarDataPointFormatter,\n errorBarOffset: 0\n }, /*#__PURE__*/React.createElement(RenderCurve, {\n props: this.props,\n clipPathId: clipPathId\n }))), /*#__PURE__*/React.createElement(ActivePoints, {\n activeDot: this.props.activeDot,\n points: points,\n mainColor: this.props.stroke,\n itemDataKey: this.props.dataKey,\n clipPath: activePointsClipPath\n }));\n }\n}\nexport var defaultLineProps = {\n activeDot: true,\n animateNewValues: true,\n animationBegin: 0,\n animationDuration: 1500,\n animationEasing: 'ease',\n connectNulls: false,\n dot: true,\n fill: '#fff',\n hide: false,\n isAnimationActive: 'auto',\n label: false,\n legendType: 'line',\n stroke: '#3182bd',\n strokeWidth: 1,\n xAxisId: 0,\n yAxisId: 0,\n zIndex: DefaultZIndexes.line,\n type: 'linear'\n};\nfunction LineImpl(props) {\n var _resolveDefaultProps = resolveDefaultProps(props, defaultLineProps),\n {\n activeDot,\n animateNewValues,\n animationBegin,\n animationDuration,\n animationEasing,\n connectNulls,\n dot,\n hide,\n isAnimationActive,\n label,\n legendType,\n xAxisId,\n yAxisId,\n id\n } = _resolveDefaultProps,\n everythingElse = _objectWithoutProperties(_resolveDefaultProps, _excluded3);\n var {\n needClip\n } = useNeedsClip(xAxisId, yAxisId);\n var plotArea = usePlotArea();\n var layout = useChartLayout();\n var isPanorama = useIsPanorama();\n var points = useAppSelector(state => selectLinePoints(state, xAxisId, yAxisId, isPanorama, id));\n if (layout !== 'horizontal' && layout !== 'vertical' || points == null || plotArea == null) {\n // Cannot render Line in an unsupported layout\n return null;\n }\n var {\n height,\n width,\n x: left,\n y: top\n } = plotArea;\n return /*#__PURE__*/React.createElement(LineWithState, _extends({}, everythingElse, {\n id: id,\n connectNulls: connectNulls,\n dot: dot,\n activeDot: activeDot,\n animateNewValues: animateNewValues,\n animationBegin: animationBegin,\n animationDuration: animationDuration,\n animationEasing: animationEasing,\n isAnimationActive: isAnimationActive,\n hide: hide,\n label: label,\n legendType: legendType,\n xAxisId: xAxisId,\n yAxisId: yAxisId,\n points: points,\n layout: layout,\n height: height,\n width: width,\n left: left,\n top: top,\n needClip: needClip\n }));\n}\nexport function computeLinePoints(_ref7) {\n var {\n layout,\n xAxis,\n yAxis,\n xAxisTicks,\n yAxisTicks,\n dataKey,\n bandSize,\n displayedData\n } = _ref7;\n return displayedData.map((entry, index) => {\n // getValueByDataKey does not validate the output type\n var value = getValueByDataKey(entry, dataKey);\n if (layout === 'horizontal') {\n var _x = getCateCoordinateOfLine({\n axis: xAxis,\n ticks: xAxisTicks,\n bandSize,\n entry,\n index\n });\n var _y = isNullish(value) ? null : yAxis.scale.map(value);\n return {\n x: _x,\n y: _y !== null && _y !== void 0 ? _y : null,\n value,\n payload: entry\n };\n }\n var x = isNullish(value) ? null : xAxis.scale.map(value);\n var y = getCateCoordinateOfLine({\n axis: yAxis,\n ticks: yAxisTicks,\n bandSize,\n entry,\n index\n });\n if (x == null || y == null) {\n return null;\n }\n return {\n x,\n y,\n value,\n payload: entry\n };\n }).filter(Boolean);\n}\nfunction LineFn(outsideProps) {\n var props = resolveDefaultProps(outsideProps, defaultLineProps);\n var isPanorama = useIsPanorama();\n return /*#__PURE__*/React.createElement(RegisterGraphicalItemId, {\n id: props.id,\n type: \"line\"\n }, id => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetLegendPayload, {\n legendPayload: computeLegendPayloadFromAreaData(props)\n }), /*#__PURE__*/React.createElement(SetLineTooltipEntrySettings, {\n dataKey: props.dataKey,\n data: props.data,\n stroke: props.stroke,\n strokeWidth: props.strokeWidth,\n fill: props.fill,\n name: props.name,\n hide: props.hide,\n unit: props.unit,\n tooltipType: props.tooltipType,\n id: id\n }), /*#__PURE__*/React.createElement(SetCartesianGraphicalItem, {\n type: \"line\",\n id: id,\n data: props.data,\n xAxisId: props.xAxisId,\n yAxisId: props.yAxisId,\n zAxisId: 0,\n dataKey: props.dataKey,\n hide: props.hide,\n isPanorama: isPanorama\n }), /*#__PURE__*/React.createElement(LineImpl, _extends({}, props, {\n id: id\n }))));\n}\n\n/**\n * @provides LabelListContext\n * @provides ErrorBarContext\n * @consumes CartesianChartContext\n */\nexport var Line = /*#__PURE__*/React.memo(LineFn, propsAreEqual);\n// @ts-expect-error we need to set the displayName for debugging purposes\nLine.displayName = 'Line';","import { createSelector } from 'reselect';\nimport { computeArea } from '../../cartesian/Area';\nimport { selectAxisWithScale, selectStackGroups, selectTicksOfGraphicalItem, selectUnfilteredCartesianItems } from './axisSelectors';\nimport { selectChartLayout } from '../../context/chartLayoutContext';\nimport { selectChartDataWithIndexesIfNotInPanoramaPosition3 } from './dataSelectors';\nimport { getBandSizeOfAxis, isCategoricalAxis } from '../../util/ChartUtils';\nimport { getStackSeriesIdentifier } from '../../util/stacks/getStackSeriesIdentifier';\nimport { selectChartBaseValue } from './rootPropsSelectors';\nimport { selectXAxisIdFromGraphicalItemId, selectYAxisIdFromGraphicalItemId } from './graphicalItemSelectors';\nvar selectXAxisWithScale = (state, graphicalItemId, isPanorama) => selectAxisWithScale(state, 'xAxis', selectXAxisIdFromGraphicalItemId(state, graphicalItemId), isPanorama);\nvar selectXAxisTicks = (state, graphicalItemId, isPanorama) => selectTicksOfGraphicalItem(state, 'xAxis', selectXAxisIdFromGraphicalItemId(state, graphicalItemId), isPanorama);\nvar selectYAxisWithScale = (state, graphicalItemId, isPanorama) => selectAxisWithScale(state, 'yAxis', selectYAxisIdFromGraphicalItemId(state, graphicalItemId), isPanorama);\nvar selectYAxisTicks = (state, graphicalItemId, isPanorama) => selectTicksOfGraphicalItem(state, 'yAxis', selectYAxisIdFromGraphicalItemId(state, graphicalItemId), isPanorama);\nvar selectBandSize = createSelector([selectChartLayout, selectXAxisWithScale, selectYAxisWithScale, selectXAxisTicks, selectYAxisTicks], (layout, xAxis, yAxis, xAxisTicks, yAxisTicks) => {\n if (isCategoricalAxis(layout, 'xAxis')) {\n return getBandSizeOfAxis(xAxis, xAxisTicks, false);\n }\n return getBandSizeOfAxis(yAxis, yAxisTicks, false);\n});\nvar pickAreaId = (_state, id) => id;\n\n/*\n * There is a race condition problem because we read some data from props and some from the state.\n * The state is updated through a dispatch and is one render behind,\n * and so we have this weird one tick render where the displayedData in one selector have the old dataKey\n * but the new dataKey in another selector.\n *\n * A proper fix is to either move everything into the state, or read the dataKey always from props\n * - but this is a smaller change.\n */\nvar selectSynchronisedAreaSettings = createSelector([selectUnfilteredCartesianItems, pickAreaId], (graphicalItems, id) => graphicalItems.filter(item => item.type === 'area').find(item => item.id === id));\nvar selectNumericalAxisType = state => {\n var layout = selectChartLayout(state);\n var isXAxisCategorical = isCategoricalAxis(layout, 'xAxis');\n return isXAxisCategorical ? 'yAxis' : 'xAxis';\n};\nvar selectNumericalAxisIdFromGraphicalItemId = (state, graphicalItemId) => {\n var axisType = selectNumericalAxisType(state);\n if (axisType === 'yAxis') {\n return selectYAxisIdFromGraphicalItemId(state, graphicalItemId);\n }\n return selectXAxisIdFromGraphicalItemId(state, graphicalItemId);\n};\nvar selectNumericalAxisStackGroups = (state, graphicalItemId, isPanorama) => selectStackGroups(state, selectNumericalAxisType(state), selectNumericalAxisIdFromGraphicalItemId(state, graphicalItemId), isPanorama);\nexport var selectGraphicalItemStackedData = createSelector([selectSynchronisedAreaSettings, selectNumericalAxisStackGroups], (areaSettings, stackGroups) => {\n var _stackGroups$stackId;\n if (areaSettings == null || stackGroups == null) {\n return undefined;\n }\n var {\n stackId\n } = areaSettings;\n var stackSeriesIdentifier = getStackSeriesIdentifier(areaSettings);\n if (stackId == null || stackSeriesIdentifier == null) {\n return undefined;\n }\n var groups = (_stackGroups$stackId = stackGroups[stackId]) === null || _stackGroups$stackId === void 0 ? void 0 : _stackGroups$stackId.stackedData;\n var found = groups === null || groups === void 0 ? void 0 : groups.find(v => v.key === stackSeriesIdentifier);\n if (found == null) {\n return undefined;\n }\n return found.map(item => [item[0], item[1]]);\n});\nexport var selectArea = createSelector([selectChartLayout, selectXAxisWithScale, selectYAxisWithScale, selectXAxisTicks, selectYAxisTicks, selectGraphicalItemStackedData, selectChartDataWithIndexesIfNotInPanoramaPosition3, selectBandSize, selectSynchronisedAreaSettings, selectChartBaseValue], (layout, xAxis, yAxis, xAxisTicks, yAxisTicks, stackedData, _ref, bandSize, areaSettings, chartBaseValue) => {\n var {\n chartData,\n dataStartIndex,\n dataEndIndex\n } = _ref;\n if (areaSettings == null || layout !== 'horizontal' && layout !== 'vertical' || xAxis == null || yAxis == null || xAxisTicks == null || yAxisTicks == null || xAxisTicks.length === 0 || yAxisTicks.length === 0 || bandSize == null) {\n return undefined;\n }\n var {\n data\n } = areaSettings;\n var displayedData;\n if (data && data.length > 0) {\n displayedData = data;\n } else {\n displayedData = chartData === null || chartData === void 0 ? void 0 : chartData.slice(dataStartIndex, dataEndIndex + 1);\n }\n if (displayedData == null) {\n return undefined;\n }\n return computeArea({\n layout,\n xAxis,\n yAxis,\n xAxisTicks,\n yAxisTicks,\n dataStartIndex,\n areaSettings,\n stackedData,\n displayedData,\n chartBaseValue,\n bandSize\n });\n});","var _excluded = [\"id\"],\n _excluded2 = [\"activeDot\", \"animationBegin\", \"animationDuration\", \"animationEasing\", \"connectNulls\", \"dot\", \"fill\", \"fillOpacity\", \"hide\", \"isAnimationActive\", \"legendType\", \"stroke\", \"xAxisId\", \"yAxisId\"];\nfunction _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); }\nfunction _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; }\nfunction _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; }\nfunction 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; }\nfunction _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; }\nfunction _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; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == typeof i ? i : i + \"\"; }\nfunction _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); }\nimport * as React from 'react';\nimport { PureComponent, useCallback, useMemo, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { Curve } from '../shape/Curve';\nimport { Layer } from '../container/Layer';\nimport { CartesianLabelListContextProvider, LabelListFromLabelProp } from '../component/LabelList';\nimport { Dots } from '../component/Dots';\nimport { interpolate, isNan, isNullish, isNumber, noop } from '../util/DataUtils';\nimport { getCateCoordinateOfLine, getNormalizedStackId, getTooltipNameProp, getValueByDataKey } from '../util/ChartUtils';\nimport { isClipDot } from '../util/ReactUtils';\nimport { ActivePoints } from '../component/ActivePoints';\nimport { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings';\nimport { GraphicalItemClipPath, useNeedsClip } from './GraphicalItemClipPath';\nimport { selectArea } from '../state/selectors/areaSelectors';\nimport { useIsPanorama } from '../context/PanoramaContext';\nimport { useCartesianChartLayout, useChartLayout } from '../context/chartLayoutContext';\nimport { useChartName } from '../state/selectors/selectors';\nimport { SetLegendPayload } from '../state/SetLegendPayload';\nimport { useAppSelector } from '../state/hooks';\nimport { useAnimationId } from '../util/useAnimationId';\nimport { resolveDefaultProps } from '../util/resolveDefaultProps';\nimport { isWellBehavedNumber } from '../util/isWellBehavedNumber';\nimport { usePlotArea } from '../hooks';\nimport { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId';\nimport { SetCartesianGraphicalItem } from '../state/SetGraphicalItem';\nimport { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';\nimport { JavascriptAnimate } from '../animation/JavascriptAnimate';\nimport { getRadiusAndStrokeWidthFromDot } from '../util/getRadiusAndStrokeWidthFromDot';\nimport { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents';\nimport { ZIndexLayer } from '../zIndex/ZIndexLayer';\nimport { DefaultZIndexes } from '../zIndex/DefaultZIndexes';\nimport { propsAreEqual } from '../util/propsAreEqual';\n\n/**\n * @inline\n */\n\n/**\n * Our base value array has payload in it, and we expose it externally too.\n */\n\n/**\n * Internal props, combination of external props + defaultProps + private Recharts state\n */\n\n/**\n * External props, intended for end users to fill in\n */\n\n/**\n * Because of naming conflict, we are forced to ignore certain (valid) SVG attributes.\n */\n\nfunction getLegendItemColor(stroke, fill) {\n return stroke && stroke !== 'none' ? stroke : fill;\n}\nvar computeLegendPayloadFromAreaData = props => {\n var {\n dataKey,\n name,\n stroke,\n fill,\n legendType,\n hide\n } = props;\n return [{\n inactive: hide,\n dataKey,\n type: legendType,\n color: getLegendItemColor(stroke, fill),\n value: getTooltipNameProp(name, dataKey),\n payload: props\n }];\n};\nvar SetAreaTooltipEntrySettings = /*#__PURE__*/React.memo(_ref => {\n var {\n dataKey,\n data,\n stroke,\n strokeWidth,\n fill,\n name,\n hide,\n unit,\n tooltipType,\n id\n } = _ref;\n var tooltipEntrySettings = {\n dataDefinedOnItem: data,\n getPosition: noop,\n settings: {\n stroke,\n strokeWidth,\n fill,\n dataKey,\n nameKey: undefined,\n name: getTooltipNameProp(name, dataKey),\n hide,\n type: tooltipType,\n color: getLegendItemColor(stroke, fill),\n unit,\n graphicalItemId: id\n }\n };\n return /*#__PURE__*/React.createElement(SetTooltipEntrySettings, {\n tooltipEntrySettings: tooltipEntrySettings\n });\n});\nfunction AreaDotsWrapper(_ref2) {\n var {\n clipPathId,\n points,\n props\n } = _ref2;\n var {\n needClip,\n dot,\n dataKey\n } = props;\n var areaProps = svgPropertiesNoEvents(props);\n return /*#__PURE__*/React.createElement(Dots, {\n points: points,\n dot: dot,\n className: \"recharts-area-dots\",\n dotClassName: \"recharts-area-dot\",\n dataKey: dataKey,\n baseProps: areaProps,\n needClip: needClip,\n clipPathId: clipPathId\n });\n}\nfunction AreaLabelListProvider(_ref3) {\n var {\n showLabels,\n children,\n points\n } = _ref3;\n var labelListEntries = points.map(point => {\n var _point$x, _point$y;\n var viewBox = {\n x: (_point$x = point.x) !== null && _point$x !== void 0 ? _point$x : 0,\n y: (_point$y = point.y) !== null && _point$y !== void 0 ? _point$y : 0,\n width: 0,\n lowerWidth: 0,\n upperWidth: 0,\n height: 0\n };\n return _objectSpread(_objectSpread({}, viewBox), {}, {\n value: point.value,\n payload: point.payload,\n parentViewBox: undefined,\n viewBox,\n fill: undefined\n });\n });\n return /*#__PURE__*/React.createElement(CartesianLabelListContextProvider, {\n value: showLabels ? labelListEntries : undefined\n }, children);\n}\nfunction StaticArea(_ref4) {\n var {\n points,\n baseLine,\n needClip,\n clipPathId,\n props\n } = _ref4;\n var {\n layout,\n type,\n stroke,\n connectNulls,\n isRange\n } = props;\n var {\n id\n } = props,\n propsWithoutId = _objectWithoutProperties(props, _excluded);\n var allOtherProps = svgPropertiesNoEvents(propsWithoutId);\n var propsWithEvents = svgPropertiesAndEvents(propsWithoutId);\n return /*#__PURE__*/React.createElement(React.Fragment, null, (points === null || points === void 0 ? void 0 : points.length) > 1 && /*#__PURE__*/React.createElement(Layer, {\n clipPath: needClip ? \"url(#clipPath-\".concat(clipPathId, \")\") : undefined\n }, /*#__PURE__*/React.createElement(Curve, _extends({}, propsWithEvents, {\n id: id,\n points: points,\n connectNulls: connectNulls,\n type: type,\n baseLine: baseLine,\n layout: layout,\n stroke: \"none\",\n className: \"recharts-area-area\"\n })), stroke !== 'none' && /*#__PURE__*/React.createElement(Curve, _extends({}, allOtherProps, {\n className: \"recharts-area-curve\",\n layout: layout,\n type: type,\n connectNulls: connectNulls,\n fill: \"none\",\n points: points\n })), stroke !== 'none' && isRange && Array.isArray(baseLine) && /*#__PURE__*/React.createElement(Curve, _extends({}, allOtherProps, {\n className: \"recharts-area-curve\",\n layout: layout,\n type: type,\n connectNulls: connectNulls,\n fill: \"none\",\n points: baseLine\n }))), /*#__PURE__*/React.createElement(AreaDotsWrapper, {\n points: points,\n props: propsWithoutId,\n clipPathId: clipPathId\n }));\n}\nfunction VerticalRect(_ref5) {\n var _points$, _points;\n var {\n alpha,\n baseLine,\n points,\n strokeWidth\n } = _ref5;\n var startY = (_points$ = points[0]) === null || _points$ === void 0 ? void 0 : _points$.y;\n var endY = (_points = points[points.length - 1]) === null || _points === void 0 ? void 0 : _points.y;\n if (!isWellBehavedNumber(startY) || !isWellBehavedNumber(endY)) {\n return null;\n }\n var height = alpha * Math.abs(startY - endY);\n var maxX = Math.max(...points.map(entry => entry.x || 0));\n if (isNumber(baseLine)) {\n maxX = Math.max(baseLine, maxX);\n } else if (baseLine && Array.isArray(baseLine) && baseLine.length) {\n maxX = Math.max(...baseLine.map(entry => entry.x || 0), maxX);\n }\n if (isNumber(maxX)) {\n return /*#__PURE__*/React.createElement(\"rect\", {\n x: 0,\n y: startY < endY ? startY : startY - height,\n width: maxX + (strokeWidth ? parseInt(\"\".concat(strokeWidth), 10) : 1),\n height: Math.floor(height)\n });\n }\n return null;\n}\nfunction HorizontalRect(_ref6) {\n var _points$2, _points2;\n var {\n alpha,\n baseLine,\n points,\n strokeWidth\n } = _ref6;\n var startX = (_points$2 = points[0]) === null || _points$2 === void 0 ? void 0 : _points$2.x;\n var endX = (_points2 = points[points.length - 1]) === null || _points2 === void 0 ? void 0 : _points2.x;\n if (!isWellBehavedNumber(startX) || !isWellBehavedNumber(endX)) {\n return null;\n }\n var width = alpha * Math.abs(startX - endX);\n var maxY = Math.max(...points.map(entry => entry.y || 0));\n if (isNumber(baseLine)) {\n maxY = Math.max(baseLine, maxY);\n } else if (baseLine && Array.isArray(baseLine) && baseLine.length) {\n maxY = Math.max(...baseLine.map(entry => entry.y || 0), maxY);\n }\n if (isNumber(maxY)) {\n return /*#__PURE__*/React.createElement(\"rect\", {\n x: startX < endX ? startX : startX - width,\n y: 0,\n width: width,\n height: Math.floor(maxY + (strokeWidth ? parseInt(\"\".concat(strokeWidth), 10) : 1))\n });\n }\n return null;\n}\nfunction ClipRect(_ref7) {\n var {\n alpha,\n layout,\n points,\n baseLine,\n strokeWidth\n } = _ref7;\n if (layout === 'vertical') {\n return /*#__PURE__*/React.createElement(VerticalRect, {\n alpha: alpha,\n points: points,\n baseLine: baseLine,\n strokeWidth: strokeWidth\n });\n }\n return /*#__PURE__*/React.createElement(HorizontalRect, {\n alpha: alpha,\n points: points,\n baseLine: baseLine,\n strokeWidth: strokeWidth\n });\n}\nfunction AreaWithAnimation(_ref8) {\n var {\n needClip,\n clipPathId,\n props,\n previousPointsRef,\n previousBaselineRef\n } = _ref8;\n var {\n points,\n baseLine,\n isAnimationActive,\n animationBegin,\n animationDuration,\n animationEasing,\n onAnimationStart,\n onAnimationEnd\n } = props;\n var animationInput = useMemo(() => ({\n points,\n baseLine\n }), [points, baseLine]);\n var animationId = useAnimationId(animationInput, 'recharts-area-');\n var layout = useCartesianChartLayout();\n var [isAnimating, setIsAnimating] = useState(false);\n var showLabels = !isAnimating;\n var handleAnimationEnd = useCallback(() => {\n if (typeof onAnimationEnd === 'function') {\n onAnimationEnd();\n }\n setIsAnimating(false);\n }, [onAnimationEnd]);\n var handleAnimationStart = useCallback(() => {\n if (typeof onAnimationStart === 'function') {\n onAnimationStart();\n }\n setIsAnimating(true);\n }, [onAnimationStart]);\n if (layout == null) {\n return null;\n }\n var prevPoints = previousPointsRef.current;\n var prevBaseLine = previousBaselineRef.current;\n return /*#__PURE__*/React.createElement(AreaLabelListProvider, {\n showLabels: showLabels,\n points: points\n }, props.children, /*#__PURE__*/React.createElement(JavascriptAnimate, {\n animationId: animationId,\n begin: animationBegin,\n duration: animationDuration,\n isActive: isAnimationActive,\n easing: animationEasing,\n onAnimationEnd: handleAnimationEnd,\n onAnimationStart: handleAnimationStart,\n key: animationId\n }, t => {\n if (prevPoints) {\n var prevPointsDiffFactor = prevPoints.length / points.length;\n var stepPoints =\n /*\n * Here it is important that at the very end of the animation, on the last frame,\n * we render the original points without any interpolation.\n * This is needed because the code above is checking for reference equality to decide if the animation should run\n * and if we create a new array instance (even if the numbers were the same)\n * then we would break animations.\n */\n t === 1 ? points : points.map((entry, index) => {\n var prevPointIndex = Math.floor(index * prevPointsDiffFactor);\n if (prevPoints[prevPointIndex]) {\n var prev = prevPoints[prevPointIndex];\n return _objectSpread(_objectSpread({}, entry), {}, {\n x: interpolate(prev.x, entry.x, t),\n y: interpolate(prev.y, entry.y, t)\n });\n }\n return entry;\n });\n var stepBaseLine;\n if (isNumber(baseLine)) {\n stepBaseLine = interpolate(prevBaseLine, baseLine, t);\n } else if (isNullish(baseLine) || isNan(baseLine)) {\n stepBaseLine = interpolate(prevBaseLine, 0, t);\n } else {\n stepBaseLine = baseLine.map((entry, index) => {\n var prevPointIndex = Math.floor(index * prevPointsDiffFactor);\n if (Array.isArray(prevBaseLine) && prevBaseLine[prevPointIndex]) {\n var prev = prevBaseLine[prevPointIndex];\n return _objectSpread(_objectSpread({}, entry), {}, {\n x: interpolate(prev.x, entry.x, t),\n y: interpolate(prev.y, entry.y, t)\n });\n }\n return entry;\n });\n }\n if (t > 0) {\n /*\n * We need to keep the refs in the parent component because we need to remember the last shape of the animation\n * even if AreaWithAnimation is unmounted as that happens when changing props.\n *\n * And we need to update the refs here because here is where the interpolation is computed.\n * Eslint doesn't like changing function arguments, but we need it so here is an eslint-disable.\n */\n // eslint-disable-next-line no-param-reassign\n previousPointsRef.current = stepPoints;\n // eslint-disable-next-line no-param-reassign\n previousBaselineRef.current = stepBaseLine;\n }\n return /*#__PURE__*/React.createElement(StaticArea, {\n points: stepPoints,\n baseLine: stepBaseLine,\n needClip: needClip,\n clipPathId: clipPathId,\n props: props\n });\n }\n if (t > 0) {\n // eslint-disable-next-line no-param-reassign\n previousPointsRef.current = points;\n // eslint-disable-next-line no-param-reassign\n previousBaselineRef.current = baseLine;\n }\n return /*#__PURE__*/React.createElement(Layer, null, isAnimationActive && /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"clipPath\", {\n id: \"animationClipPath-\".concat(clipPathId)\n }, /*#__PURE__*/React.createElement(ClipRect, {\n alpha: t,\n points: points,\n baseLine: baseLine,\n layout: layout,\n strokeWidth: props.strokeWidth\n }))), /*#__PURE__*/React.createElement(Layer, {\n clipPath: \"url(#animationClipPath-\".concat(clipPathId, \")\")\n }, /*#__PURE__*/React.createElement(StaticArea, {\n points: points,\n baseLine: baseLine,\n needClip: needClip,\n clipPathId: clipPathId,\n props: props\n })));\n }), /*#__PURE__*/React.createElement(LabelListFromLabelProp, {\n label: props.label\n }));\n}\n\n/*\n * This components decides if the area should be animated or not.\n * It also holds the state of the animation.\n */\nfunction RenderArea(_ref9) {\n var {\n needClip,\n clipPathId,\n props\n } = _ref9;\n /*\n * These two must be refs, not state!\n * Because we want to store the most recent shape of the animation in case we have to interrupt the animation;\n * that happens when user initiates another animation before the current one finishes.\n *\n * If this was a useState, then every step in the animation would trigger a re-render.\n * So, useRef it is.\n */\n var previousPointsRef = useRef(null);\n var previousBaselineRef = useRef();\n return /*#__PURE__*/React.createElement(AreaWithAnimation, {\n needClip: needClip,\n clipPathId: clipPathId,\n props: props,\n previousPointsRef: previousPointsRef,\n previousBaselineRef: previousBaselineRef\n });\n}\nclass AreaWithState extends PureComponent {\n render() {\n var {\n hide,\n dot,\n points,\n className,\n top,\n left,\n needClip,\n xAxisId,\n yAxisId,\n width,\n height,\n id,\n baseLine,\n zIndex\n } = this.props;\n if (hide) {\n return null;\n }\n var layerClass = clsx('recharts-area', className);\n var clipPathId = id;\n var {\n r,\n strokeWidth\n } = getRadiusAndStrokeWidthFromDot(dot);\n var clipDot = isClipDot(dot);\n var dotSize = r * 2 + strokeWidth;\n var activePointsClipPath = needClip ? \"url(#clipPath-\".concat(clipDot ? '' : 'dots-').concat(clipPathId, \")\") : undefined;\n return /*#__PURE__*/React.createElement(ZIndexLayer, {\n zIndex: zIndex\n }, /*#__PURE__*/React.createElement(Layer, {\n className: layerClass\n }, needClip && /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(GraphicalItemClipPath, {\n clipPathId: clipPathId,\n xAxisId: xAxisId,\n yAxisId: yAxisId\n }), !clipDot && /*#__PURE__*/React.createElement(\"clipPath\", {\n id: \"clipPath-dots-\".concat(clipPathId)\n }, /*#__PURE__*/React.createElement(\"rect\", {\n x: left - dotSize / 2,\n y: top - dotSize / 2,\n width: width + dotSize,\n height: height + dotSize\n }))), /*#__PURE__*/React.createElement(RenderArea, {\n needClip: needClip,\n clipPathId: clipPathId,\n props: this.props\n })), /*#__PURE__*/React.createElement(ActivePoints, {\n points: points,\n mainColor: getLegendItemColor(this.props.stroke, this.props.fill),\n itemDataKey: this.props.dataKey,\n activeDot: this.props.activeDot,\n clipPath: activePointsClipPath\n }), this.props.isRange && Array.isArray(baseLine) && /*#__PURE__*/React.createElement(ActivePoints, {\n points: baseLine,\n mainColor: getLegendItemColor(this.props.stroke, this.props.fill),\n itemDataKey: this.props.dataKey,\n activeDot: this.props.activeDot,\n clipPath: activePointsClipPath\n }));\n }\n}\nexport var defaultAreaProps = {\n activeDot: true,\n animationBegin: 0,\n animationDuration: 1500,\n animationEasing: 'ease',\n connectNulls: false,\n dot: false,\n fill: '#3182bd',\n fillOpacity: 0.6,\n hide: false,\n isAnimationActive: 'auto',\n legendType: 'line',\n stroke: '#3182bd',\n strokeWidth: 1,\n type: 'linear',\n label: false,\n xAxisId: 0,\n yAxisId: 0,\n zIndex: DefaultZIndexes.area\n};\nfunction AreaImpl(props) {\n var _useAppSelector;\n var {\n activeDot,\n animationBegin,\n animationDuration,\n animationEasing,\n connectNulls,\n dot,\n fill,\n fillOpacity,\n hide,\n isAnimationActive,\n legendType,\n stroke,\n xAxisId,\n yAxisId\n } = props,\n everythingElse = _objectWithoutProperties(props, _excluded2);\n var layout = useChartLayout();\n var chartName = useChartName();\n var {\n needClip\n } = useNeedsClip(xAxisId, yAxisId);\n var isPanorama = useIsPanorama();\n var {\n points,\n isRange,\n baseLine\n } = (_useAppSelector = useAppSelector(state => selectArea(state, props.id, isPanorama))) !== null && _useAppSelector !== void 0 ? _useAppSelector : {};\n var plotArea = usePlotArea();\n if (layout !== 'horizontal' && layout !== 'vertical' || plotArea == null) {\n // Can't render Area in an unsupported layout\n return null;\n }\n if (chartName !== 'AreaChart' && chartName !== 'ComposedChart') {\n // There is nothing stopping us from rendering Area in other charts, except for historical reasons. Do we want to allow that?\n return null;\n }\n var {\n height,\n width,\n x: left,\n y: top\n } = plotArea;\n if (!points || !points.length) {\n return null;\n }\n return /*#__PURE__*/React.createElement(AreaWithState, _extends({}, everythingElse, {\n activeDot: activeDot,\n animationBegin: animationBegin,\n animationDuration: animationDuration,\n animationEasing: animationEasing,\n baseLine: baseLine,\n connectNulls: connectNulls,\n dot: dot,\n fill: fill,\n fillOpacity: fillOpacity,\n height: height,\n hide: hide,\n layout: layout,\n isAnimationActive: isAnimationActive,\n isRange: isRange,\n legendType: legendType,\n needClip: needClip,\n points: points,\n stroke: stroke,\n width: width,\n left: left,\n top: top,\n xAxisId: xAxisId,\n yAxisId: yAxisId\n }));\n}\nexport var getBaseValue = (layout, chartBaseValue, itemBaseValue, xAxis, yAxis) => {\n // The baseValue can be defined both on the AreaChart, and on the Area.\n // The value for the item takes precedence.\n var baseValue = itemBaseValue !== null && itemBaseValue !== void 0 ? itemBaseValue : chartBaseValue;\n if (isNumber(baseValue)) {\n return baseValue;\n }\n var numericAxis = layout === 'horizontal' ? yAxis : xAxis;\n // @ts-expect-error d3scale .domain() returns unknown, Math.max expects number\n var domain = numericAxis.scale.domain();\n if (numericAxis.type === 'number') {\n var domainMax = Math.max(domain[0], domain[1]);\n var domainMin = Math.min(domain[0], domain[1]);\n if (baseValue === 'dataMin') {\n return domainMin;\n }\n if (baseValue === 'dataMax') {\n return domainMax;\n }\n return domainMax < 0 ? domainMax : Math.max(Math.min(domain[0], domain[1]), 0);\n }\n if (baseValue === 'dataMin') {\n return domain[0];\n }\n if (baseValue === 'dataMax') {\n return domain[1];\n }\n return domain[0];\n};\nexport function computeArea(_ref0) {\n var {\n areaSettings: {\n connectNulls,\n baseValue: itemBaseValue,\n dataKey\n },\n stackedData,\n layout,\n chartBaseValue,\n xAxis,\n yAxis,\n displayedData,\n dataStartIndex,\n xAxisTicks,\n yAxisTicks,\n bandSize\n } = _ref0;\n var hasStack = stackedData && stackedData.length;\n var baseValue = getBaseValue(layout, chartBaseValue, itemBaseValue, xAxis, yAxis);\n var isHorizontalLayout = layout === 'horizontal';\n var isRange = false;\n var points = displayedData.map((entry, index) => {\n var _valueAsArray$, _valueAsArray, _xAxis$scale$map;\n var valueAsArray;\n if (hasStack) {\n valueAsArray = stackedData[dataStartIndex + index];\n } else {\n var rawValue = getValueByDataKey(entry, dataKey);\n if (!Array.isArray(rawValue)) {\n valueAsArray = [baseValue, rawValue];\n } else {\n valueAsArray = rawValue;\n isRange = true;\n }\n }\n var value1 = (_valueAsArray$ = (_valueAsArray = valueAsArray) === null || _valueAsArray === void 0 ? void 0 : _valueAsArray[1]) !== null && _valueAsArray$ !== void 0 ? _valueAsArray$ : null;\n var isBreakPoint = value1 == null || hasStack && !connectNulls && getValueByDataKey(entry, dataKey) == null;\n if (isHorizontalLayout) {\n var _yAxis$scale$map;\n return {\n x: getCateCoordinateOfLine({\n axis: xAxis,\n ticks: xAxisTicks,\n bandSize,\n entry,\n index\n }),\n y: isBreakPoint ? null : (_yAxis$scale$map = yAxis.scale.map(value1)) !== null && _yAxis$scale$map !== void 0 ? _yAxis$scale$map : null,\n value: valueAsArray,\n payload: entry\n };\n }\n return {\n x: isBreakPoint ? null : (_xAxis$scale$map = xAxis.scale.map(value1)) !== null && _xAxis$scale$map !== void 0 ? _xAxis$scale$map : null,\n y: getCateCoordinateOfLine({\n axis: yAxis,\n ticks: yAxisTicks,\n bandSize,\n entry,\n index\n }),\n value: valueAsArray,\n payload: entry\n };\n });\n var baseLine;\n if (hasStack || isRange) {\n baseLine = points.map(entry => {\n var _xAxis$scale$map2;\n var x = Array.isArray(entry.value) ? entry.value[0] : null;\n if (isHorizontalLayout) {\n var _yAxis$scale$map2;\n return {\n x: entry.x,\n y: x != null && entry.y != null ? (_yAxis$scale$map2 = yAxis.scale.map(x)) !== null && _yAxis$scale$map2 !== void 0 ? _yAxis$scale$map2 : null : null,\n payload: entry.payload\n };\n }\n return {\n x: x != null ? (_xAxis$scale$map2 = xAxis.scale.map(x)) !== null && _xAxis$scale$map2 !== void 0 ? _xAxis$scale$map2 : null : null,\n y: entry.y,\n payload: entry.payload\n };\n });\n } else {\n baseLine = isHorizontalLayout ? yAxis.scale.map(baseValue) : xAxis.scale.map(baseValue);\n }\n return {\n points,\n baseLine: baseLine !== null && baseLine !== void 0 ? baseLine : 0,\n isRange\n };\n}\nfunction AreaFn(outsideProps) {\n var props = resolveDefaultProps(outsideProps, defaultAreaProps);\n var isPanorama = useIsPanorama();\n // Report all props to Redux store first, before calling hooks, to avoid circular dependencies.\n return /*#__PURE__*/React.createElement(RegisterGraphicalItemId, {\n id: props.id,\n type: \"area\"\n }, id => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetLegendPayload, {\n legendPayload: computeLegendPayloadFromAreaData(props)\n }), /*#__PURE__*/React.createElement(SetAreaTooltipEntrySettings, {\n dataKey: props.dataKey,\n data: props.data,\n stroke: props.stroke,\n strokeWidth: props.strokeWidth,\n fill: props.fill,\n name: props.name,\n hide: props.hide,\n unit: props.unit,\n tooltipType: props.tooltipType,\n id: id\n }), /*#__PURE__*/React.createElement(SetCartesianGraphicalItem, {\n type: \"area\",\n id: id,\n data: props.data,\n dataKey: props.dataKey,\n xAxisId: props.xAxisId,\n yAxisId: props.yAxisId,\n zAxisId: 0,\n stackId: getNormalizedStackId(props.stackId),\n hide: props.hide,\n barSize: undefined,\n baseValue: props.baseValue,\n isPanorama: isPanorama,\n connectNulls: props.connectNulls\n }), /*#__PURE__*/React.createElement(AreaImpl, _extends({}, props, {\n id: id\n }))));\n}\n\n/**\n * @provides LabelListContext\n * @consumes CartesianChartContext\n */\nexport var Area = /*#__PURE__*/React.memo(AreaFn, propsAreEqual);\n// @ts-expect-error we need to set the displayName for debugging purposes\nArea.displayName = 'Area';","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { arrayTooltipSearcher } from '../state/optionsSlice';\nimport { CartesianChart } from './CartesianChart';\nvar allowedTooltipTypes = ['axis'];\n\n/**\n * @consumes ResponsiveContainerContext\n * @provides CartesianViewBoxContext\n * @provides CartesianChartContext\n */\nexport var LineChart = /*#__PURE__*/forwardRef((props, ref) => {\n return /*#__PURE__*/React.createElement(CartesianChart, {\n chartName: \"LineChart\",\n defaultTooltipEventType: \"axis\",\n validateTooltipEventTypes: allowedTooltipTypes,\n tooltipPayloadSearcher: arrayTooltipSearcher,\n categoricalChartProps: props,\n ref: ref\n });\n});","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { arrayTooltipSearcher } from '../state/optionsSlice';\nimport { CartesianChart } from './CartesianChart';\nvar allowedTooltipTypes = ['axis'];\n\n/**\n * @consumes ResponsiveContainerContext\n * @provides CartesianViewBoxContext\n * @provides CartesianChartContext\n */\nexport var AreaChart = /*#__PURE__*/forwardRef((props, ref) => {\n return /*#__PURE__*/React.createElement(CartesianChart, {\n chartName: \"AreaChart\",\n defaultTooltipEventType: \"axis\",\n validateTooltipEventTypes: allowedTooltipTypes,\n tooltipPayloadSearcher: arrayTooltipSearcher,\n categoricalChartProps: props,\n ref: ref\n });\n});","import React from 'react';\nimport {\n AreaChart, Area, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer\n} from 'recharts';\nimport type { WidgetProps } from '../types';\nimport { WidgetDataGuard } from '../components/WidgetDataGuard';\nimport { ChartTooltip } from '../components/ChartTooltip';\nimport { resolveLabel } from '../utils/resolveChartFields';\nimport { useChartData } from '../hooks/useChartData';\nimport { useDashboardTokens } from '../utils/dashboardTokens';\nimport { colorForSeries } from '../utils/chartColors';\nimport { formatCompact, resolveCurrency } from '../utils/formatNumber';\nimport { readFormat } from '../utils/widgetConfig';\n\n/**\n * Líneas — para evolución temporal.\n *\n * Cuatro cambios sobre la versión anterior, todos en la misma dirección: que se vea\n * la FORMA de la serie y no su decoración.\n *\n * - Trazo de 2px y sin puntos en reposo. Antes iba a 3px con un `dot` de\n * radio 4 en CADA punto: con veinte fechas, la línea desaparecía bajo veinte\n * círculos. El punto ahora sale sólo bajo el cursor.\n * - Área rellena, pero sólo con una serie. Con dos o más, los rellenos se\n * superponen y ninguna se lee.\n * - Sin grilla vertical y con el eje Y abreviado.\n * - Los huecos interrumpen la línea. `connectNulls` está en `false` a\n * propósito: interpolar sobre un dato ausente dibuja una tendencia que nadie\n * midió.\n */\nconst ChartLine: React.FC = ({ definition, period, preference }) => {\n const { chartData, valueKeys, categoryField, aliases, data, loading, error } =\n useChartData(definition, preference, period);\n const tokens = useDashboardTokens();\n\n // `readFormat` valida contra la unión: un `format` que no existe cae a `undefined` en vez de\n // colarse como una cadena cualquiera hasta el formateo.\n const currency = readFormat(definition.config_schema) === 'currency' ? resolveCurrency().symbol : null;\n\n const isSingleSeries = valueKeys.length === 1;\n // La serie primaria lleva el acento de marca; las demás, la paleta categórica SIN el gris\n // del último índice, que está reservado para el grupo \"Otros\".\n const colorFor = (index: number) => (index === 0 ? tokens.accent : colorForSeries(index));\n\n const axes = (\n <>\n \n \n formatCompact(value, { currency })}\n width={56}\n />\n }\n />\n {!isSingleSeries && (\n \n )}\n \n );\n\n return (\n \n \n
\n {isSingleSeries ? (\n \n {axes}\n \n \n ) : (\n \n {axes}\n {valueKeys.map((key, i) => (\n \n ))}\n \n )}\n \n