source: node_modules/recharts/lib/cartesian/Area.js@ ba17441

Last change on this file since ba17441 was a762898, checked in by istevanoska <ilinastevanoska@…>, 6 months ago

Added visualizations
  • Property mode set to 100644
File size: 28.8 KB
Line 
1"use strict";
2
3Object.defineProperty(exports, "__esModule", {
4 value: true
5});
6exports.Area = void 0;
7exports.computeArea = computeArea;
8exports.getBaseValue = exports.defaultAreaProps = void 0;
9var _react = _interopRequireWildcard(require("react"));
10var React = _react;
11var _clsx = require("clsx");
12var _Curve = require("../shape/Curve");
13var _Layer = require("../container/Layer");
14var _LabelList = require("../component/LabelList");
15var _Dots = require("../component/Dots");
16var _Global = require("../util/Global");
17var _DataUtils = require("../util/DataUtils");
18var _ChartUtils = require("../util/ChartUtils");
19var _ReactUtils = require("../util/ReactUtils");
20var _ActivePoints = require("../component/ActivePoints");
21var _SetTooltipEntrySettings = require("../state/SetTooltipEntrySettings");
22var _GraphicalItemClipPath = require("./GraphicalItemClipPath");
23var _areaSelectors = require("../state/selectors/areaSelectors");
24var _PanoramaContext = require("../context/PanoramaContext");
25var _chartLayoutContext = require("../context/chartLayoutContext");
26var _selectors = require("../state/selectors/selectors");
27var _SetLegendPayload = require("../state/SetLegendPayload");
28var _hooks = require("../state/hooks");
29var _useAnimationId = require("../util/useAnimationId");
30var _resolveDefaultProps2 = require("../util/resolveDefaultProps");
31var _isWellBehavedNumber = require("../util/isWellBehavedNumber");
32var _hooks2 = require("../hooks");
33var _RegisterGraphicalItemId = require("../context/RegisterGraphicalItemId");
34var _SetGraphicalItem = require("../state/SetGraphicalItem");
35var _svgPropertiesNoEvents = require("../util/svgPropertiesNoEvents");
36var _JavascriptAnimate = require("../animation/JavascriptAnimate");
37var _getRadiusAndStrokeWidthFromDot = require("../util/getRadiusAndStrokeWidthFromDot");
38var _svgPropertiesAndEvents = require("../util/svgPropertiesAndEvents");
39var _ZIndexLayer = require("../zIndex/ZIndexLayer");
40var _DefaultZIndexes = require("../zIndex/DefaultZIndexes");
41var _propsAreEqual = require("../util/propsAreEqual");
42var _excluded = ["id"],
43 _excluded2 = ["activeDot", "animationBegin", "animationDuration", "animationEasing", "connectNulls", "dot", "fill", "fillOpacity", "hide", "isAnimationActive", "legendType", "stroke", "xAxisId", "yAxisId"];
44function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
45function _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); }
46function _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; }
47function _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; }
48function 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; }
49function _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; }
50function _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; }
51function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
52function _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); }
53/**
54 * @inline
55 */
56
57/**
58 * Our base value array has payload in it, and we expose it externally too.
59 */
60
61/**
62 * Internal props, combination of external props + defaultProps + private Recharts state
63 */
64
65/**
66 * External props, intended for end users to fill in
67 */
68
69/**
70 * Because of naming conflict, we are forced to ignore certain (valid) SVG attributes.
71 */
72
73function getLegendItemColor(stroke, fill) {
74 return stroke && stroke !== 'none' ? stroke : fill;
75}
76var computeLegendPayloadFromAreaData = props => {
77 var {
78 dataKey,
79 name,
80 stroke,
81 fill,
82 legendType,
83 hide
84 } = props;
85 return [{
86 inactive: hide,
87 dataKey,
88 type: legendType,
89 color: getLegendItemColor(stroke, fill),
90 value: (0, _ChartUtils.getTooltipNameProp)(name, dataKey),
91 payload: props
92 }];
93};
94var SetAreaTooltipEntrySettings = /*#__PURE__*/React.memo(_ref => {
95 var {
96 dataKey,
97 data,
98 stroke,
99 strokeWidth,
100 fill,
101 name,
102 hide,
103 unit,
104 tooltipType,
105 id
106 } = _ref;
107 var tooltipEntrySettings = {
108 dataDefinedOnItem: data,
109 getPosition: _DataUtils.noop,
110 settings: {
111 stroke,
112 strokeWidth,
113 fill,
114 dataKey,
115 nameKey: undefined,
116 name: (0, _ChartUtils.getTooltipNameProp)(name, dataKey),
117 hide,
118 type: tooltipType,
119 color: getLegendItemColor(stroke, fill),
120 unit,
121 graphicalItemId: id
122 }
123 };
124 return /*#__PURE__*/React.createElement(_SetTooltipEntrySettings.SetTooltipEntrySettings, {
125 tooltipEntrySettings: tooltipEntrySettings
126 });
127});
128function AreaDotsWrapper(_ref2) {
129 var {
130 clipPathId,
131 points,
132 props
133 } = _ref2;
134 var {
135 needClip,
136 dot,
137 dataKey
138 } = props;
139 var areaProps = (0, _svgPropertiesNoEvents.svgPropertiesNoEvents)(props);
140 return /*#__PURE__*/React.createElement(_Dots.Dots, {
141 points: points,
142 dot: dot,
143 className: "recharts-area-dots",
144 dotClassName: "recharts-area-dot",
145 dataKey: dataKey,
146 baseProps: areaProps,
147 needClip: needClip,
148 clipPathId: clipPathId
149 });
150}
151function AreaLabelListProvider(_ref3) {
152 var {
153 showLabels,
154 children,
155 points
156 } = _ref3;
157 var labelListEntries = points.map(point => {
158 var _point$x, _point$y;
159 var viewBox = {
160 x: (_point$x = point.x) !== null && _point$x !== void 0 ? _point$x : 0,
161 y: (_point$y = point.y) !== null && _point$y !== void 0 ? _point$y : 0,
162 width: 0,
163 lowerWidth: 0,
164 upperWidth: 0,
165 height: 0
166 };
167 return _objectSpread(_objectSpread({}, viewBox), {}, {
168 value: point.value,
169 payload: point.payload,
170 parentViewBox: undefined,
171 viewBox,
172 fill: undefined
173 });
174 });
175 return /*#__PURE__*/React.createElement(_LabelList.CartesianLabelListContextProvider, {
176 value: showLabels ? labelListEntries : undefined
177 }, children);
178}
179function StaticArea(_ref4) {
180 var {
181 points,
182 baseLine,
183 needClip,
184 clipPathId,
185 props
186 } = _ref4;
187 var {
188 layout,
189 type,
190 stroke,
191 connectNulls,
192 isRange
193 } = props;
194 var {
195 id
196 } = props,
197 propsWithoutId = _objectWithoutProperties(props, _excluded);
198 var allOtherProps = (0, _svgPropertiesNoEvents.svgPropertiesNoEvents)(propsWithoutId);
199 var propsWithEvents = (0, _svgPropertiesAndEvents.svgPropertiesAndEvents)(propsWithoutId);
200 return /*#__PURE__*/React.createElement(React.Fragment, null, (points === null || points === void 0 ? void 0 : points.length) > 1 && /*#__PURE__*/React.createElement(_Layer.Layer, {
201 clipPath: needClip ? "url(#clipPath-".concat(clipPathId, ")") : undefined
202 }, /*#__PURE__*/React.createElement(_Curve.Curve, _extends({}, propsWithEvents, {
203 id: id,
204 points: points,
205 connectNulls: connectNulls,
206 type: type,
207 baseLine: baseLine,
208 layout: layout,
209 stroke: "none",
210 className: "recharts-area-area"
211 })), stroke !== 'none' && /*#__PURE__*/React.createElement(_Curve.Curve, _extends({}, allOtherProps, {
212 className: "recharts-area-curve",
213 layout: layout,
214 type: type,
215 connectNulls: connectNulls,
216 fill: "none",
217 points: points
218 })), stroke !== 'none' && isRange && /*#__PURE__*/React.createElement(_Curve.Curve, _extends({}, allOtherProps, {
219 className: "recharts-area-curve",
220 layout: layout,
221 type: type,
222 connectNulls: connectNulls,
223 fill: "none",
224 points: baseLine
225 }))), /*#__PURE__*/React.createElement(AreaDotsWrapper, {
226 points: points,
227 props: propsWithoutId,
228 clipPathId: clipPathId
229 }));
230}
231function VerticalRect(_ref5) {
232 var _points$, _points;
233 var {
234 alpha,
235 baseLine,
236 points,
237 strokeWidth
238 } = _ref5;
239 var startY = (_points$ = points[0]) === null || _points$ === void 0 ? void 0 : _points$.y;
240 var endY = (_points = points[points.length - 1]) === null || _points === void 0 ? void 0 : _points.y;
241 if (!(0, _isWellBehavedNumber.isWellBehavedNumber)(startY) || !(0, _isWellBehavedNumber.isWellBehavedNumber)(endY)) {
242 return null;
243 }
244 var height = alpha * Math.abs(startY - endY);
245 var maxX = Math.max(...points.map(entry => entry.x || 0));
246 if ((0, _DataUtils.isNumber)(baseLine)) {
247 maxX = Math.max(baseLine, maxX);
248 } else if (baseLine && Array.isArray(baseLine) && baseLine.length) {
249 maxX = Math.max(...baseLine.map(entry => entry.x || 0), maxX);
250 }
251 if ((0, _DataUtils.isNumber)(maxX)) {
252 return /*#__PURE__*/React.createElement("rect", {
253 x: 0,
254 y: startY < endY ? startY : startY - height,
255 width: maxX + (strokeWidth ? parseInt("".concat(strokeWidth), 10) : 1),
256 height: Math.floor(height)
257 });
258 }
259 return null;
260}
261function HorizontalRect(_ref6) {
262 var _points$2, _points2;
263 var {
264 alpha,
265 baseLine,
266 points,
267 strokeWidth
268 } = _ref6;
269 var startX = (_points$2 = points[0]) === null || _points$2 === void 0 ? void 0 : _points$2.x;
270 var endX = (_points2 = points[points.length - 1]) === null || _points2 === void 0 ? void 0 : _points2.x;
271 if (!(0, _isWellBehavedNumber.isWellBehavedNumber)(startX) || !(0, _isWellBehavedNumber.isWellBehavedNumber)(endX)) {
272 return null;
273 }
274 var width = alpha * Math.abs(startX - endX);
275 var maxY = Math.max(...points.map(entry => entry.y || 0));
276 if ((0, _DataUtils.isNumber)(baseLine)) {
277 maxY = Math.max(baseLine, maxY);
278 } else if (baseLine && Array.isArray(baseLine) && baseLine.length) {
279 maxY = Math.max(...baseLine.map(entry => entry.y || 0), maxY);
280 }
281 if ((0, _DataUtils.isNumber)(maxY)) {
282 return /*#__PURE__*/React.createElement("rect", {
283 x: startX < endX ? startX : startX - width,
284 y: 0,
285 width: width,
286 height: Math.floor(maxY + (strokeWidth ? parseInt("".concat(strokeWidth), 10) : 1))
287 });
288 }
289 return null;
290}
291function ClipRect(_ref7) {
292 var {
293 alpha,
294 layout,
295 points,
296 baseLine,
297 strokeWidth
298 } = _ref7;
299 if (layout === 'vertical') {
300 return /*#__PURE__*/React.createElement(VerticalRect, {
301 alpha: alpha,
302 points: points,
303 baseLine: baseLine,
304 strokeWidth: strokeWidth
305 });
306 }
307 return /*#__PURE__*/React.createElement(HorizontalRect, {
308 alpha: alpha,
309 points: points,
310 baseLine: baseLine,
311 strokeWidth: strokeWidth
312 });
313}
314function AreaWithAnimation(_ref8) {
315 var {
316 needClip,
317 clipPathId,
318 props,
319 previousPointsRef,
320 previousBaselineRef
321 } = _ref8;
322 var {
323 points,
324 baseLine,
325 isAnimationActive,
326 animationBegin,
327 animationDuration,
328 animationEasing,
329 onAnimationStart,
330 onAnimationEnd
331 } = props;
332 var animationInput = (0, _react.useMemo)(() => ({
333 points,
334 baseLine
335 }), [points, baseLine]);
336 var animationId = (0, _useAnimationId.useAnimationId)(animationInput, 'recharts-area-');
337 var layout = (0, _chartLayoutContext.useCartesianChartLayout)();
338 var [isAnimating, setIsAnimating] = (0, _react.useState)(false);
339 var showLabels = !isAnimating;
340 var handleAnimationEnd = (0, _react.useCallback)(() => {
341 if (typeof onAnimationEnd === 'function') {
342 onAnimationEnd();
343 }
344 setIsAnimating(false);
345 }, [onAnimationEnd]);
346 var handleAnimationStart = (0, _react.useCallback)(() => {
347 if (typeof onAnimationStart === 'function') {
348 onAnimationStart();
349 }
350 setIsAnimating(true);
351 }, [onAnimationStart]);
352 if (layout == null) {
353 return null;
354 }
355 var prevPoints = previousPointsRef.current;
356 var prevBaseLine = previousBaselineRef.current;
357 return /*#__PURE__*/React.createElement(AreaLabelListProvider, {
358 showLabels: showLabels,
359 points: points
360 }, props.children, /*#__PURE__*/React.createElement(_JavascriptAnimate.JavascriptAnimate, {
361 animationId: animationId,
362 begin: animationBegin,
363 duration: animationDuration,
364 isActive: isAnimationActive,
365 easing: animationEasing,
366 onAnimationEnd: handleAnimationEnd,
367 onAnimationStart: handleAnimationStart,
368 key: animationId
369 }, t => {
370 if (prevPoints) {
371 var prevPointsDiffFactor = prevPoints.length / points.length;
372 var stepPoints =
373 /*
374 * Here it is important that at the very end of the animation, on the last frame,
375 * we render the original points without any interpolation.
376 * This is needed because the code above is checking for reference equality to decide if the animation should run
377 * and if we create a new array instance (even if the numbers were the same)
378 * then we would break animations.
379 */
380 t === 1 ? points : points.map((entry, index) => {
381 var prevPointIndex = Math.floor(index * prevPointsDiffFactor);
382 if (prevPoints[prevPointIndex]) {
383 var prev = prevPoints[prevPointIndex];
384 return _objectSpread(_objectSpread({}, entry), {}, {
385 x: (0, _DataUtils.interpolate)(prev.x, entry.x, t),
386 y: (0, _DataUtils.interpolate)(prev.y, entry.y, t)
387 });
388 }
389 return entry;
390 });
391 var stepBaseLine;
392 if ((0, _DataUtils.isNumber)(baseLine)) {
393 stepBaseLine = (0, _DataUtils.interpolate)(prevBaseLine, baseLine, t);
394 } else if ((0, _DataUtils.isNullish)(baseLine) || (0, _DataUtils.isNan)(baseLine)) {
395 stepBaseLine = (0, _DataUtils.interpolate)(prevBaseLine, 0, t);
396 } else {
397 stepBaseLine = baseLine.map((entry, index) => {
398 var prevPointIndex = Math.floor(index * prevPointsDiffFactor);
399 if (Array.isArray(prevBaseLine) && prevBaseLine[prevPointIndex]) {
400 var prev = prevBaseLine[prevPointIndex];
401 return _objectSpread(_objectSpread({}, entry), {}, {
402 x: (0, _DataUtils.interpolate)(prev.x, entry.x, t),
403 y: (0, _DataUtils.interpolate)(prev.y, entry.y, t)
404 });
405 }
406 return entry;
407 });
408 }
409 if (t > 0) {
410 /*
411 * We need to keep the refs in the parent component because we need to remember the last shape of the animation
412 * even if AreaWithAnimation is unmounted as that happens when changing props.
413 *
414 * And we need to update the refs here because here is where the interpolation is computed.
415 * Eslint doesn't like changing function arguments, but we need it so here is an eslint-disable.
416 */
417 // eslint-disable-next-line no-param-reassign
418 previousPointsRef.current = stepPoints;
419 // eslint-disable-next-line no-param-reassign
420 previousBaselineRef.current = stepBaseLine;
421 }
422 return /*#__PURE__*/React.createElement(StaticArea, {
423 points: stepPoints,
424 baseLine: stepBaseLine,
425 needClip: needClip,
426 clipPathId: clipPathId,
427 props: props
428 });
429 }
430 if (t > 0) {
431 // eslint-disable-next-line no-param-reassign
432 previousPointsRef.current = points;
433 // eslint-disable-next-line no-param-reassign
434 previousBaselineRef.current = baseLine;
435 }
436 return /*#__PURE__*/React.createElement(_Layer.Layer, null, isAnimationActive && /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
437 id: "animationClipPath-".concat(clipPathId)
438 }, /*#__PURE__*/React.createElement(ClipRect, {
439 alpha: t,
440 points: points,
441 baseLine: baseLine,
442 layout: layout,
443 strokeWidth: props.strokeWidth
444 }))), /*#__PURE__*/React.createElement(_Layer.Layer, {
445 clipPath: "url(#animationClipPath-".concat(clipPathId, ")")
446 }, /*#__PURE__*/React.createElement(StaticArea, {
447 points: points,
448 baseLine: baseLine,
449 needClip: needClip,
450 clipPathId: clipPathId,
451 props: props
452 })));
453 }), /*#__PURE__*/React.createElement(_LabelList.LabelListFromLabelProp, {
454 label: props.label
455 }));
456}
457
458/*
459 * This components decides if the area should be animated or not.
460 * It also holds the state of the animation.
461 */
462function RenderArea(_ref9) {
463 var {
464 needClip,
465 clipPathId,
466 props
467 } = _ref9;
468 /*
469 * These two must be refs, not state!
470 * Because we want to store the most recent shape of the animation in case we have to interrupt the animation;
471 * that happens when user initiates another animation before the current one finishes.
472 *
473 * If this was a useState, then every step in the animation would trigger a re-render.
474 * So, useRef it is.
475 */
476 var previousPointsRef = (0, _react.useRef)(null);
477 var previousBaselineRef = (0, _react.useRef)();
478 return /*#__PURE__*/React.createElement(AreaWithAnimation, {
479 needClip: needClip,
480 clipPathId: clipPathId,
481 props: props,
482 previousPointsRef: previousPointsRef,
483 previousBaselineRef: previousBaselineRef
484 });
485}
486class AreaWithState extends _react.PureComponent {
487 render() {
488 var {
489 hide,
490 dot,
491 points,
492 className,
493 top,
494 left,
495 needClip,
496 xAxisId,
497 yAxisId,
498 width,
499 height,
500 id,
501 baseLine,
502 zIndex
503 } = this.props;
504 if (hide) {
505 return null;
506 }
507 var layerClass = (0, _clsx.clsx)('recharts-area', className);
508 var clipPathId = id;
509 var {
510 r,
511 strokeWidth
512 } = (0, _getRadiusAndStrokeWidthFromDot.getRadiusAndStrokeWidthFromDot)(dot);
513 var clipDot = (0, _ReactUtils.isClipDot)(dot);
514 var dotSize = r * 2 + strokeWidth;
515 var activePointsClipPath = needClip ? "url(#clipPath-".concat(clipDot ? '' : 'dots-').concat(clipPathId, ")") : undefined;
516 return /*#__PURE__*/React.createElement(_ZIndexLayer.ZIndexLayer, {
517 zIndex: zIndex
518 }, /*#__PURE__*/React.createElement(_Layer.Layer, {
519 className: layerClass
520 }, needClip && /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement(_GraphicalItemClipPath.GraphicalItemClipPath, {
521 clipPathId: clipPathId,
522 xAxisId: xAxisId,
523 yAxisId: yAxisId
524 }), !clipDot && /*#__PURE__*/React.createElement("clipPath", {
525 id: "clipPath-dots-".concat(clipPathId)
526 }, /*#__PURE__*/React.createElement("rect", {
527 x: left - dotSize / 2,
528 y: top - dotSize / 2,
529 width: width + dotSize,
530 height: height + dotSize
531 }))), /*#__PURE__*/React.createElement(RenderArea, {
532 needClip: needClip,
533 clipPathId: clipPathId,
534 props: this.props
535 })), /*#__PURE__*/React.createElement(_ActivePoints.ActivePoints, {
536 points: points,
537 mainColor: getLegendItemColor(this.props.stroke, this.props.fill),
538 itemDataKey: this.props.dataKey,
539 activeDot: this.props.activeDot,
540 clipPath: activePointsClipPath
541 }), this.props.isRange && Array.isArray(baseLine) && /*#__PURE__*/React.createElement(_ActivePoints.ActivePoints, {
542 points: baseLine,
543 mainColor: getLegendItemColor(this.props.stroke, this.props.fill),
544 itemDataKey: this.props.dataKey,
545 activeDot: this.props.activeDot,
546 clipPath: activePointsClipPath
547 }));
548 }
549}
550var defaultAreaProps = exports.defaultAreaProps = {
551 activeDot: true,
552 animationBegin: 0,
553 animationDuration: 1500,
554 animationEasing: 'ease',
555 connectNulls: false,
556 dot: false,
557 fill: '#3182bd',
558 fillOpacity: 0.6,
559 hide: false,
560 isAnimationActive: 'auto',
561 legendType: 'line',
562 stroke: '#3182bd',
563 strokeWidth: 1,
564 type: 'linear',
565 label: false,
566 xAxisId: 0,
567 yAxisId: 0,
568 zIndex: _DefaultZIndexes.DefaultZIndexes.area
569};
570function AreaImpl(props) {
571 var _useAppSelector;
572 var _resolveDefaultProps = (0, _resolveDefaultProps2.resolveDefaultProps)(props, defaultAreaProps),
573 {
574 activeDot,
575 animationBegin,
576 animationDuration,
577 animationEasing,
578 connectNulls,
579 dot,
580 fill,
581 fillOpacity,
582 hide,
583 isAnimationActive,
584 legendType,
585 stroke,
586 xAxisId,
587 yAxisId
588 } = _resolveDefaultProps,
589 everythingElse = _objectWithoutProperties(_resolveDefaultProps, _excluded2);
590 var layout = (0, _chartLayoutContext.useChartLayout)();
591 var chartName = (0, _selectors.useChartName)();
592 var {
593 needClip
594 } = (0, _GraphicalItemClipPath.useNeedsClip)(xAxisId, yAxisId);
595 var isPanorama = (0, _PanoramaContext.useIsPanorama)();
596 var {
597 points,
598 isRange,
599 baseLine
600 } = (_useAppSelector = (0, _hooks.useAppSelector)(state => (0, _areaSelectors.selectArea)(state, props.id, isPanorama))) !== null && _useAppSelector !== void 0 ? _useAppSelector : {};
601 var plotArea = (0, _hooks2.usePlotArea)();
602 if (layout !== 'horizontal' && layout !== 'vertical' || plotArea == null) {
603 // Can't render Area in an unsupported layout
604 return null;
605 }
606 if (chartName !== 'AreaChart' && chartName !== 'ComposedChart') {
607 // There is nothing stopping us from rendering Area in other charts, except for historical reasons. Do we want to allow that?
608 return null;
609 }
610 var {
611 height,
612 width,
613 x: left,
614 y: top
615 } = plotArea;
616 if (!points || !points.length) {
617 return null;
618 }
619 return /*#__PURE__*/React.createElement(AreaWithState, _extends({}, everythingElse, {
620 activeDot: activeDot,
621 animationBegin: animationBegin,
622 animationDuration: animationDuration,
623 animationEasing: animationEasing,
624 baseLine: baseLine,
625 connectNulls: connectNulls,
626 dot: dot,
627 fill: fill,
628 fillOpacity: fillOpacity,
629 height: height,
630 hide: hide,
631 layout: layout,
632 isAnimationActive: isAnimationActive === 'auto' ? !_Global.Global.isSsr : isAnimationActive,
633 isRange: isRange,
634 legendType: legendType,
635 needClip: needClip,
636 points: points,
637 stroke: stroke,
638 width: width,
639 left: left,
640 top: top,
641 xAxisId: xAxisId,
642 yAxisId: yAxisId
643 }));
644}
645var getBaseValue = (layout, chartBaseValue, itemBaseValue, xAxis, yAxis) => {
646 // The baseValue can be defined both on the AreaChart, and on the Area.
647 // The value for the item takes precedence.
648 var baseValue = itemBaseValue !== null && itemBaseValue !== void 0 ? itemBaseValue : chartBaseValue;
649 if ((0, _DataUtils.isNumber)(baseValue)) {
650 return baseValue;
651 }
652 var numericAxis = layout === 'horizontal' ? yAxis : xAxis;
653 // @ts-expect-error d3scale .domain() returns unknown, Math.max expects number
654 var domain = numericAxis.scale.domain();
655 if (numericAxis.type === 'number') {
656 var domainMax = Math.max(domain[0], domain[1]);
657 var domainMin = Math.min(domain[0], domain[1]);
658 if (baseValue === 'dataMin') {
659 return domainMin;
660 }
661 if (baseValue === 'dataMax') {
662 return domainMax;
663 }
664 return domainMax < 0 ? domainMax : Math.max(Math.min(domain[0], domain[1]), 0);
665 }
666 if (baseValue === 'dataMin') {
667 return domain[0];
668 }
669 if (baseValue === 'dataMax') {
670 return domain[1];
671 }
672 return domain[0];
673};
674exports.getBaseValue = getBaseValue;
675function computeArea(_ref0) {
676 var {
677 areaSettings: {
678 connectNulls,
679 baseValue: itemBaseValue,
680 dataKey
681 },
682 stackedData,
683 layout,
684 chartBaseValue,
685 xAxis,
686 yAxis,
687 displayedData,
688 dataStartIndex,
689 xAxisTicks,
690 yAxisTicks,
691 bandSize
692 } = _ref0;
693 var hasStack = stackedData && stackedData.length;
694 var baseValue = getBaseValue(layout, chartBaseValue, itemBaseValue, xAxis, yAxis);
695 var isHorizontalLayout = layout === 'horizontal';
696 var isRange = false;
697 var points = displayedData.map((entry, index) => {
698 var _valueAsArray$, _valueAsArray, _xAxis$scale$map;
699 var valueAsArray;
700 if (hasStack) {
701 valueAsArray = stackedData[dataStartIndex + index];
702 } else {
703 var rawValue = (0, _ChartUtils.getValueByDataKey)(entry, dataKey);
704 if (!Array.isArray(rawValue)) {
705 // @ts-expect-error getValueByDataKey is not checking its return value
706 valueAsArray = [baseValue, rawValue];
707 } else {
708 // @ts-expect-error getValueByDataKey is not checking its return value
709 valueAsArray = rawValue;
710 isRange = true;
711 }
712 }
713 var value1 = (_valueAsArray$ = (_valueAsArray = valueAsArray) === null || _valueAsArray === void 0 ? void 0 : _valueAsArray[1]) !== null && _valueAsArray$ !== void 0 ? _valueAsArray$ : null;
714 var isBreakPoint = value1 == null || hasStack && !connectNulls && (0, _ChartUtils.getValueByDataKey)(entry, dataKey) == null;
715 if (isHorizontalLayout) {
716 var _yAxis$scale$map;
717 return {
718 x: (0, _ChartUtils.getCateCoordinateOfLine)({
719 axis: xAxis,
720 ticks: xAxisTicks,
721 bandSize,
722 entry,
723 index
724 }),
725 y: isBreakPoint ? null : (_yAxis$scale$map = yAxis.scale.map(value1)) !== null && _yAxis$scale$map !== void 0 ? _yAxis$scale$map : null,
726 value: valueAsArray,
727 payload: entry
728 };
729 }
730 return {
731 x: isBreakPoint ? null : (_xAxis$scale$map = xAxis.scale.map(value1)) !== null && _xAxis$scale$map !== void 0 ? _xAxis$scale$map : null,
732 y: (0, _ChartUtils.getCateCoordinateOfLine)({
733 axis: yAxis,
734 ticks: yAxisTicks,
735 bandSize,
736 entry,
737 index
738 }),
739 value: valueAsArray,
740 payload: entry
741 };
742 });
743 var baseLine;
744 if (hasStack || isRange) {
745 baseLine = points.map(entry => {
746 var _xAxis$scale$map2;
747 var x = Array.isArray(entry.value) ? entry.value[0] : null;
748 if (isHorizontalLayout) {
749 var _yAxis$scale$map2;
750 return {
751 x: entry.x,
752 y: x != null && entry.y != null ? (_yAxis$scale$map2 = yAxis.scale.map(x)) !== null && _yAxis$scale$map2 !== void 0 ? _yAxis$scale$map2 : null : null,
753 payload: entry.payload
754 };
755 }
756 return {
757 x: x != null ? (_xAxis$scale$map2 = xAxis.scale.map(x)) !== null && _xAxis$scale$map2 !== void 0 ? _xAxis$scale$map2 : null : null,
758 y: entry.y,
759 payload: entry.payload
760 };
761 });
762 } else {
763 baseLine = isHorizontalLayout ? yAxis.scale.map(baseValue) : xAxis.scale.map(baseValue);
764 }
765 return {
766 points,
767 baseLine: baseLine !== null && baseLine !== void 0 ? baseLine : 0,
768 isRange
769 };
770}
771function AreaFn(outsideProps) {
772 var props = (0, _resolveDefaultProps2.resolveDefaultProps)(outsideProps, defaultAreaProps);
773 var isPanorama = (0, _PanoramaContext.useIsPanorama)();
774 // Report all props to Redux store first, before calling any hooks, to avoid circular dependencies.
775 return /*#__PURE__*/React.createElement(_RegisterGraphicalItemId.RegisterGraphicalItemId, {
776 id: props.id,
777 type: "area"
778 }, id => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_SetLegendPayload.SetLegendPayload, {
779 legendPayload: computeLegendPayloadFromAreaData(props)
780 }), /*#__PURE__*/React.createElement(SetAreaTooltipEntrySettings, {
781 dataKey: props.dataKey,
782 data: props.data,
783 stroke: props.stroke,
784 strokeWidth: props.strokeWidth,
785 fill: props.fill,
786 name: props.name,
787 hide: props.hide,
788 unit: props.unit,
789 tooltipType: props.tooltipType,
790 id: id
791 }), /*#__PURE__*/React.createElement(_SetGraphicalItem.SetCartesianGraphicalItem, {
792 type: "area",
793 id: id,
794 data: props.data,
795 dataKey: props.dataKey,
796 xAxisId: props.xAxisId,
797 yAxisId: props.yAxisId,
798 zAxisId: 0,
799 stackId: (0, _ChartUtils.getNormalizedStackId)(props.stackId),
800 hide: props.hide,
801 barSize: undefined,
802 baseValue: props.baseValue,
803 isPanorama: isPanorama,
804 connectNulls: props.connectNulls
805 }), /*#__PURE__*/React.createElement(AreaImpl, _extends({}, props, {
806 id: id
807 }))));
808}
809
810/**
811 * @provides LabelListContext
812 * @consumes CartesianChartContext
813 */
814var Area = exports.Area = /*#__PURE__*/React.memo(AreaFn, _propsAreEqual.propsAreEqual);
815Area.displayName = 'Area';
Note: See TracBrowser for help on using the repository browser.