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

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

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