source: node_modules/recharts/lib/cartesian/Line.js

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

Added visualizations
  • Property mode set to 100644
File size: 25.9 KB
Line 
1"use strict";
2
3Object.defineProperty(exports, "__esModule", {
4 value: true
5});
6exports.Line = void 0;
7exports.computeLinePoints = computeLinePoints;
8exports.defaultLineProps = void 0;
9var _react = _interopRequireWildcard(require("react"));
10var React = _react;
11var _clsx = require("clsx");
12var _Layer = require("../container/Layer");
13var _LabelList = require("../component/LabelList");
14var _Dots = require("../component/Dots");
15var _DataUtils = require("../util/DataUtils");
16var _ReactUtils = require("../util/ReactUtils");
17var _ChartUtils = require("../util/ChartUtils");
18var _ActivePoints = require("../component/ActivePoints");
19var _SetTooltipEntrySettings = require("../state/SetTooltipEntrySettings");
20var _ErrorBarContext = require("../context/ErrorBarContext");
21var _GraphicalItemClipPath = require("./GraphicalItemClipPath");
22var _chartLayoutContext = require("../context/chartLayoutContext");
23var _PanoramaContext = require("../context/PanoramaContext");
24var _lineSelectors = require("../state/selectors/lineSelectors");
25var _hooks = require("../state/hooks");
26var _SetLegendPayload = require("../state/SetLegendPayload");
27var _useAnimationId = require("../util/useAnimationId");
28var _resolveDefaultProps2 = require("../util/resolveDefaultProps");
29var _hooks2 = require("../hooks");
30var _RegisterGraphicalItemId = require("../context/RegisterGraphicalItemId");
31var _SetGraphicalItem = require("../state/SetGraphicalItem");
32var _svgPropertiesNoEvents = require("../util/svgPropertiesNoEvents");
33var _JavascriptAnimate = require("../animation/JavascriptAnimate");
34var _svgPropertiesAndEvents = require("../util/svgPropertiesAndEvents");
35var _getRadiusAndStrokeWidthFromDot = require("../util/getRadiusAndStrokeWidthFromDot");
36var _ActiveShapeUtils = require("../util/ActiveShapeUtils");
37var _ZIndexLayer = require("../zIndex/ZIndexLayer");
38var _DefaultZIndexes = require("../zIndex/DefaultZIndexes");
39var _propsAreEqual = require("../util/propsAreEqual");
40var _excluded = ["id"],
41 _excluded2 = ["type", "layout", "connectNulls", "needClip", "shape"],
42 _excluded3 = ["activeDot", "animateNewValues", "animationBegin", "animationDuration", "animationEasing", "connectNulls", "dot", "hide", "isAnimationActive", "label", "legendType", "xAxisId", "yAxisId", "id"];
43function _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); }
44function _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); }
45function 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; }
46function _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; }
47function _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; }
48function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
49function _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); }
50function _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; }
51function _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; }
52/**
53 * Internal props, combination of external props + defaultProps + private Recharts state
54 */
55
56/**
57 * External props, intended for end users to fill in
58 */
59
60/**
61 * Because of naming conflict, we are forced to ignore certain (valid) SVG attributes.
62 */
63
64var computeLegendPayloadFromAreaData = props => {
65 var {
66 dataKey,
67 name,
68 stroke,
69 legendType,
70 hide
71 } = props;
72 return [{
73 inactive: hide,
74 dataKey,
75 type: legendType,
76 color: stroke,
77 value: (0, _ChartUtils.getTooltipNameProp)(name, dataKey),
78 payload: props
79 }];
80};
81var SetLineTooltipEntrySettings = /*#__PURE__*/React.memo(_ref => {
82 var {
83 dataKey,
84 data,
85 stroke,
86 strokeWidth,
87 fill,
88 name,
89 hide,
90 unit,
91 tooltipType,
92 id
93 } = _ref;
94 var tooltipEntrySettings = {
95 dataDefinedOnItem: data,
96 getPosition: _DataUtils.noop,
97 settings: {
98 stroke,
99 strokeWidth,
100 fill,
101 dataKey,
102 nameKey: undefined,
103 name: (0, _ChartUtils.getTooltipNameProp)(name, dataKey),
104 hide,
105 type: tooltipType,
106 color: stroke,
107 unit,
108 graphicalItemId: id
109 }
110 };
111 return /*#__PURE__*/React.createElement(_SetTooltipEntrySettings.SetTooltipEntrySettings, {
112 tooltipEntrySettings: tooltipEntrySettings
113 });
114});
115var generateSimpleStrokeDasharray = (totalLength, length) => {
116 return "".concat(length, "px ").concat(totalLength - length, "px");
117};
118function repeat(lines, count) {
119 var linesUnit = lines.length % 2 !== 0 ? [...lines, 0] : lines;
120 var result = [];
121 for (var i = 0; i < count; ++i) {
122 result = [...result, ...linesUnit];
123 }
124 return result;
125}
126var getStrokeDasharray = (length, totalLength, lines) => {
127 var lineLength = lines.reduce((pre, next) => pre + next);
128
129 // if lineLength is 0 return the default when no strokeDasharray is provided
130 if (!lineLength) {
131 return generateSimpleStrokeDasharray(totalLength, length);
132 }
133 var count = Math.floor(length / lineLength);
134 var remainLength = length % lineLength;
135 var restLength = totalLength - length;
136 var remainLines = [];
137 for (var i = 0, sum = 0; i < lines.length; sum += (_lines$i = lines[i]) !== null && _lines$i !== void 0 ? _lines$i : 0, ++i) {
138 var _lines$i;
139 var lineValue = lines[i];
140 if (lineValue != null && sum + lineValue > remainLength) {
141 remainLines = [...lines.slice(0, i), remainLength - sum];
142 break;
143 }
144 }
145 var emptyLines = remainLines.length % 2 === 0 ? [0, restLength] : [restLength];
146 return [...repeat(lines, count), ...remainLines, ...emptyLines].map(line => "".concat(line, "px")).join(', ');
147};
148function LineDotsWrapper(_ref2) {
149 var {
150 clipPathId,
151 points,
152 props
153 } = _ref2;
154 var {
155 dot,
156 dataKey,
157 needClip
158 } = props;
159
160 /*
161 * Exclude ID from the props passed to the Dots component
162 * because then the ID would be applied to multiple dots, and it would no longer be unique.
163 */
164 var {
165 id
166 } = props,
167 propsWithoutId = _objectWithoutProperties(props, _excluded);
168 var lineProps = (0, _svgPropertiesNoEvents.svgPropertiesNoEvents)(propsWithoutId);
169 return /*#__PURE__*/React.createElement(_Dots.Dots, {
170 points: points,
171 dot: dot,
172 className: "recharts-line-dots",
173 dotClassName: "recharts-line-dot",
174 dataKey: dataKey,
175 baseProps: lineProps,
176 needClip: needClip,
177 clipPathId: clipPathId
178 });
179}
180function LineLabelListProvider(_ref3) {
181 var {
182 showLabels,
183 children,
184 points
185 } = _ref3;
186 var labelListEntries = (0, _react.useMemo)(() => {
187 return points === null || points === void 0 ? void 0 : points.map(point => {
188 var _point$x, _point$y;
189 var viewBox = {
190 x: (_point$x = point.x) !== null && _point$x !== void 0 ? _point$x : 0,
191 y: (_point$y = point.y) !== null && _point$y !== void 0 ? _point$y : 0,
192 width: 0,
193 lowerWidth: 0,
194 upperWidth: 0,
195 height: 0
196 };
197 return _objectSpread(_objectSpread({}, viewBox), {}, {
198 value: point.value,
199 payload: point.payload,
200 viewBox,
201 /*
202 * Line is not passing parentViewBox to the LabelList so the labels can escape - looks like a bug, should we pass parentViewBox?
203 * Or should this just be the root chart viewBox?
204 */
205 parentViewBox: undefined,
206 fill: undefined
207 });
208 });
209 }, [points]);
210 return /*#__PURE__*/React.createElement(_LabelList.CartesianLabelListContextProvider, {
211 value: showLabels ? labelListEntries : undefined
212 }, children);
213}
214function StaticCurve(_ref4) {
215 var {
216 clipPathId,
217 pathRef,
218 points,
219 strokeDasharray,
220 props
221 } = _ref4;
222 var {
223 type,
224 layout,
225 connectNulls,
226 needClip,
227 shape
228 } = props,
229 others = _objectWithoutProperties(props, _excluded2);
230 var curveProps = _objectSpread(_objectSpread({}, (0, _svgPropertiesAndEvents.svgPropertiesAndEvents)(others)), {}, {
231 fill: 'none',
232 className: 'recharts-line-curve',
233 clipPath: needClip ? "url(#clipPath-".concat(clipPathId, ")") : undefined,
234 points,
235 type,
236 layout,
237 connectNulls,
238 strokeDasharray: strokeDasharray !== null && strokeDasharray !== void 0 ? strokeDasharray : props.strokeDasharray
239 });
240 return /*#__PURE__*/React.createElement(React.Fragment, null, (points === null || points === void 0 ? void 0 : points.length) > 1 && /*#__PURE__*/React.createElement(_ActiveShapeUtils.Shape, _extends({
241 shapeType: "curve",
242 option: shape
243 }, curveProps, {
244 pathRef: pathRef
245 })), /*#__PURE__*/React.createElement(LineDotsWrapper, {
246 points: points,
247 clipPathId: clipPathId,
248 props: props
249 }));
250}
251function getTotalLength(mainCurve) {
252 try {
253 return mainCurve && mainCurve.getTotalLength && mainCurve.getTotalLength() || 0;
254 } catch (_unused) {
255 return 0;
256 }
257}
258function CurveWithAnimation(_ref5) {
259 var {
260 clipPathId,
261 props,
262 pathRef,
263 previousPointsRef,
264 longestAnimatedLengthRef
265 } = _ref5;
266 var {
267 points,
268 strokeDasharray,
269 isAnimationActive,
270 animationBegin,
271 animationDuration,
272 animationEasing,
273 animateNewValues,
274 width,
275 height,
276 onAnimationEnd,
277 onAnimationStart
278 } = props;
279 var prevPoints = previousPointsRef.current;
280 var animationId = (0, _useAnimationId.useAnimationId)(points, 'recharts-line-');
281 var animationIdRef = (0, _react.useRef)(animationId);
282 var [isAnimating, setIsAnimating] = (0, _react.useState)(false);
283 var showLabels = !isAnimating;
284 var handleAnimationEnd = (0, _react.useCallback)(() => {
285 if (typeof onAnimationEnd === 'function') {
286 onAnimationEnd();
287 }
288 setIsAnimating(false);
289 }, [onAnimationEnd]);
290 var handleAnimationStart = (0, _react.useCallback)(() => {
291 if (typeof onAnimationStart === 'function') {
292 onAnimationStart();
293 }
294 setIsAnimating(true);
295 }, [onAnimationStart]);
296 var totalLength = getTotalLength(pathRef.current);
297 /*
298 * Here we want to detect if the length animation has been interrupted.
299 * For that we keep a reference to the furthest length that has been animated.
300 *
301 * And then, to keep things smooth, we add to it the current length that is being animated right now.
302 *
303 * If we did Math.max then it makes the length animation "pause" but we want to keep it smooth
304 * so in case we have some "leftover" length from the previous animation we add it to the current length.
305 *
306 * This is not perfect because the animation changes speed due to easing. The default easing is 'ease' which is not linear
307 * and makes it stand out. But it's good enough I suppose.
308 * If we want to fix it then we need to keep track of multiple animations and their easing and timings.
309 *
310 * If you want to see this in action, try to change the dataKey of the line chart while the initial animation is running.
311 * The Line begins with zero length and slowly grows to the full length. While this growth is in progress,
312 * change the dataKey and the Line will continue growing from where it has grown so far.
313 *
314 * This is for the case when new animation triggers. When that happens we get new points, everything re-renders,
315 * and we get fresh new state in this component and use the ref stored above.
316 *
317 * In case when we get render without new animation - for example when opacity changes, or color changes,
318 * then the animationId remains the same, and we do not update the starting point.
319 * See https://github.com/recharts/recharts/issues/6044
320 */
321 var startingPointRef = (0, _react.useRef)(0);
322 if (animationIdRef.current !== animationId) {
323 startingPointRef.current = longestAnimatedLengthRef.current;
324 animationIdRef.current = animationId;
325 }
326 var startingPoint = startingPointRef.current;
327 return /*#__PURE__*/React.createElement(LineLabelListProvider, {
328 points: points,
329 showLabels: showLabels
330 }, props.children, /*#__PURE__*/React.createElement(_JavascriptAnimate.JavascriptAnimate, {
331 animationId: animationId,
332 begin: animationBegin,
333 duration: animationDuration,
334 isActive: isAnimationActive,
335 easing: animationEasing,
336 onAnimationEnd: handleAnimationEnd,
337 onAnimationStart: handleAnimationStart,
338 key: animationId
339 }, t => {
340 var lengthInterpolated = (0, _DataUtils.interpolate)(startingPoint, totalLength + startingPoint, t);
341 var curLength = Math.min(lengthInterpolated, totalLength);
342 var currentStrokeDasharray;
343 if (isAnimationActive) {
344 if (strokeDasharray) {
345 var lines = "".concat(strokeDasharray).split(/[,\s]+/gim).map(num => parseFloat(num));
346 currentStrokeDasharray = getStrokeDasharray(curLength, totalLength, lines);
347 } else {
348 currentStrokeDasharray = generateSimpleStrokeDasharray(totalLength, curLength);
349 }
350 } else {
351 currentStrokeDasharray = strokeDasharray == null ? undefined : String(strokeDasharray);
352 }
353
354 /*
355 * Here it is important to wait a little bit with updating the previousPointsRef
356 * before the animation has a time to initialize.
357 * If we set the previous pointsRef immediately, we set it before the Legend height it calculated
358 * and before pathRef is set.
359 * If that happens, the Line will re-render again after Legend had reported its height
360 * which will start a new animation with the previous points as the starting point
361 * which gives the effect of the Line animating slightly upwards (where the animation distance equals the Legend height).
362 * Waiting for t > 0 is indirect but good enough to ensure that the Legend height is calculated and animation works properly.
363 *
364 * Total length similarly is calculated from the pathRef. We should not update the previousPointsRef
365 * before the pathRef is set, otherwise we will have a wrong total length.
366 */
367 if (t > 0 && totalLength > 0) {
368 // eslint-disable-next-line no-param-reassign
369 previousPointsRef.current = points;
370 /*
371 * totalLength is set from a ref and is not updated in the first tick of the animation.
372 * It defaults to zero which is exactly what we want here because we want to grow from zero,
373 * however the same happens when the data change.
374 *
375 * In that case we want to remember the previous length and continue from there, and only animate the shape.
376 *
377 * Therefore the totalLength > 0 check.
378 *
379 * The Animate is about to fire handleAnimationStart which will update the state
380 * and cause a re-render and read a new proper totalLength which will be used in the next tick
381 * and update the longestAnimatedLengthRef.
382 *
383 * Why Math.max? Sometimes the curve goes through a smaller length than previously recorded.
384 * If we just set it to curLength, then the next animation would start from a smaller length
385 * which looks weird. So we keep the longest length ever reached and then animate from there.
386 */
387 // eslint-disable-next-line no-param-reassign
388 longestAnimatedLengthRef.current = Math.max(longestAnimatedLengthRef.current, curLength);
389 }
390 if (prevPoints) {
391 var prevPointsDiffFactor = prevPoints.length / points.length;
392 var stepData = t === 1 ? points : points.map((entry, index) => {
393 var prevPointIndex = Math.floor(index * prevPointsDiffFactor);
394 if (prevPoints[prevPointIndex]) {
395 var prev = prevPoints[prevPointIndex];
396 return _objectSpread(_objectSpread({}, entry), {}, {
397 x: (0, _DataUtils.interpolate)(prev.x, entry.x, t),
398 y: (0, _DataUtils.interpolate)(prev.y, entry.y, t)
399 });
400 }
401
402 // magic number of faking previous x and y location
403 if (animateNewValues) {
404 return _objectSpread(_objectSpread({}, entry), {}, {
405 x: (0, _DataUtils.interpolate)(width * 2, entry.x, t),
406 y: (0, _DataUtils.interpolate)(height / 2, entry.y, t)
407 });
408 }
409 return _objectSpread(_objectSpread({}, entry), {}, {
410 x: entry.x,
411 y: entry.y
412 });
413 });
414 // eslint-disable-next-line no-param-reassign
415 previousPointsRef.current = stepData;
416 return /*#__PURE__*/React.createElement(StaticCurve, {
417 props: props,
418 points: stepData,
419 clipPathId: clipPathId,
420 pathRef: pathRef,
421 strokeDasharray: currentStrokeDasharray
422 });
423 }
424 return /*#__PURE__*/React.createElement(StaticCurve, {
425 props: props,
426 points: points,
427 clipPathId: clipPathId,
428 pathRef: pathRef,
429 strokeDasharray: currentStrokeDasharray
430 });
431 }), /*#__PURE__*/React.createElement(_LabelList.LabelListFromLabelProp, {
432 label: props.label
433 }));
434}
435function RenderCurve(_ref6) {
436 var {
437 clipPathId,
438 props
439 } = _ref6;
440 var previousPointsRef = (0, _react.useRef)(null);
441 var longestAnimatedLengthRef = (0, _react.useRef)(0);
442 var pathRef = (0, _react.useRef)(null);
443 return /*#__PURE__*/React.createElement(CurveWithAnimation, {
444 props: props,
445 clipPathId: clipPathId,
446 previousPointsRef: previousPointsRef,
447 longestAnimatedLengthRef: longestAnimatedLengthRef,
448 pathRef: pathRef
449 });
450}
451var errorBarDataPointFormatter = (dataPoint, dataKey) => {
452 var _dataPoint$x, _dataPoint$y;
453 return {
454 x: (_dataPoint$x = dataPoint.x) !== null && _dataPoint$x !== void 0 ? _dataPoint$x : undefined,
455 y: (_dataPoint$y = dataPoint.y) !== null && _dataPoint$y !== void 0 ? _dataPoint$y : undefined,
456 value: dataPoint.value,
457 // @ts-expect-error getValueByDataKey does not validate the output type
458 errorVal: (0, _ChartUtils.getValueByDataKey)(dataPoint.payload, dataKey)
459 };
460};
461
462// eslint-disable-next-line react/prefer-stateless-function
463class LineWithState extends _react.Component {
464 render() {
465 var {
466 hide,
467 dot,
468 points,
469 className,
470 xAxisId,
471 yAxisId,
472 top,
473 left,
474 width,
475 height,
476 id,
477 needClip,
478 zIndex
479 } = this.props;
480 if (hide) {
481 return null;
482 }
483 var layerClass = (0, _clsx.clsx)('recharts-line', className);
484 var clipPathId = id;
485 var {
486 r,
487 strokeWidth
488 } = (0, _getRadiusAndStrokeWidthFromDot.getRadiusAndStrokeWidthFromDot)(dot);
489 var clipDot = (0, _ReactUtils.isClipDot)(dot);
490 var dotSize = r * 2 + strokeWidth;
491 var activePointsClipPath = needClip ? "url(#clipPath-".concat(clipDot ? '' : 'dots-').concat(clipPathId, ")") : undefined;
492 return /*#__PURE__*/React.createElement(_ZIndexLayer.ZIndexLayer, {
493 zIndex: zIndex
494 }, /*#__PURE__*/React.createElement(_Layer.Layer, {
495 className: layerClass
496 }, needClip && /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement(_GraphicalItemClipPath.GraphicalItemClipPath, {
497 clipPathId: clipPathId,
498 xAxisId: xAxisId,
499 yAxisId: yAxisId
500 }), !clipDot && /*#__PURE__*/React.createElement("clipPath", {
501 id: "clipPath-dots-".concat(clipPathId)
502 }, /*#__PURE__*/React.createElement("rect", {
503 x: left - dotSize / 2,
504 y: top - dotSize / 2,
505 width: width + dotSize,
506 height: height + dotSize
507 }))), /*#__PURE__*/React.createElement(_ErrorBarContext.SetErrorBarContext, {
508 xAxisId: xAxisId,
509 yAxisId: yAxisId,
510 data: points,
511 dataPointFormatter: errorBarDataPointFormatter,
512 errorBarOffset: 0
513 }, /*#__PURE__*/React.createElement(RenderCurve, {
514 props: this.props,
515 clipPathId: clipPathId
516 }))), /*#__PURE__*/React.createElement(_ActivePoints.ActivePoints, {
517 activeDot: this.props.activeDot,
518 points: points,
519 mainColor: this.props.stroke,
520 itemDataKey: this.props.dataKey,
521 clipPath: activePointsClipPath
522 }));
523 }
524}
525var defaultLineProps = exports.defaultLineProps = {
526 activeDot: true,
527 animateNewValues: true,
528 animationBegin: 0,
529 animationDuration: 1500,
530 animationEasing: 'ease',
531 connectNulls: false,
532 dot: true,
533 fill: '#fff',
534 hide: false,
535 isAnimationActive: 'auto',
536 label: false,
537 legendType: 'line',
538 stroke: '#3182bd',
539 strokeWidth: 1,
540 xAxisId: 0,
541 yAxisId: 0,
542 zIndex: _DefaultZIndexes.DefaultZIndexes.line,
543 type: 'linear'
544};
545function LineImpl(props) {
546 var _resolveDefaultProps = (0, _resolveDefaultProps2.resolveDefaultProps)(props, defaultLineProps),
547 {
548 activeDot,
549 animateNewValues,
550 animationBegin,
551 animationDuration,
552 animationEasing,
553 connectNulls,
554 dot,
555 hide,
556 isAnimationActive,
557 label,
558 legendType,
559 xAxisId,
560 yAxisId,
561 id
562 } = _resolveDefaultProps,
563 everythingElse = _objectWithoutProperties(_resolveDefaultProps, _excluded3);
564 var {
565 needClip
566 } = (0, _GraphicalItemClipPath.useNeedsClip)(xAxisId, yAxisId);
567 var plotArea = (0, _hooks2.usePlotArea)();
568 var layout = (0, _chartLayoutContext.useChartLayout)();
569 var isPanorama = (0, _PanoramaContext.useIsPanorama)();
570 var points = (0, _hooks.useAppSelector)(state => (0, _lineSelectors.selectLinePoints)(state, xAxisId, yAxisId, isPanorama, id));
571 if (layout !== 'horizontal' && layout !== 'vertical' || points == null || plotArea == null) {
572 // Cannot render Line in an unsupported layout
573 return null;
574 }
575 var {
576 height,
577 width,
578 x: left,
579 y: top
580 } = plotArea;
581 return /*#__PURE__*/React.createElement(LineWithState, _extends({}, everythingElse, {
582 id: id,
583 connectNulls: connectNulls,
584 dot: dot,
585 activeDot: activeDot,
586 animateNewValues: animateNewValues,
587 animationBegin: animationBegin,
588 animationDuration: animationDuration,
589 animationEasing: animationEasing,
590 isAnimationActive: isAnimationActive,
591 hide: hide,
592 label: label,
593 legendType: legendType,
594 xAxisId: xAxisId,
595 yAxisId: yAxisId,
596 points: points,
597 layout: layout,
598 height: height,
599 width: width,
600 left: left,
601 top: top,
602 needClip: needClip
603 }));
604}
605function computeLinePoints(_ref7) {
606 var {
607 layout,
608 xAxis,
609 yAxis,
610 xAxisTicks,
611 yAxisTicks,
612 dataKey,
613 bandSize,
614 displayedData
615 } = _ref7;
616 return displayedData.map((entry, index) => {
617 // @ts-expect-error getValueByDataKey does not validate the output type
618 var value = (0, _ChartUtils.getValueByDataKey)(entry, dataKey);
619 if (layout === 'horizontal') {
620 var _x = (0, _ChartUtils.getCateCoordinateOfLine)({
621 axis: xAxis,
622 ticks: xAxisTicks,
623 bandSize,
624 entry,
625 index
626 });
627 var _y = (0, _DataUtils.isNullish)(value) ? null : yAxis.scale.map(value);
628 return {
629 x: _x,
630 y: _y !== null && _y !== void 0 ? _y : null,
631 value,
632 payload: entry
633 };
634 }
635 var x = (0, _DataUtils.isNullish)(value) ? null : xAxis.scale.map(value);
636 var y = (0, _ChartUtils.getCateCoordinateOfLine)({
637 axis: yAxis,
638 ticks: yAxisTicks,
639 bandSize,
640 entry,
641 index
642 });
643 if (x == null || y == null) {
644 return null;
645 }
646 return {
647 x,
648 y,
649 value,
650 payload: entry
651 };
652 }).filter(Boolean);
653}
654function LineFn(outsideProps) {
655 var props = (0, _resolveDefaultProps2.resolveDefaultProps)(outsideProps, defaultLineProps);
656 var isPanorama = (0, _PanoramaContext.useIsPanorama)();
657 return /*#__PURE__*/React.createElement(_RegisterGraphicalItemId.RegisterGraphicalItemId, {
658 id: props.id,
659 type: "line"
660 }, id => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_SetLegendPayload.SetLegendPayload, {
661 legendPayload: computeLegendPayloadFromAreaData(props)
662 }), /*#__PURE__*/React.createElement(SetLineTooltipEntrySettings, {
663 dataKey: props.dataKey,
664 data: props.data,
665 stroke: props.stroke,
666 strokeWidth: props.strokeWidth,
667 fill: props.fill,
668 name: props.name,
669 hide: props.hide,
670 unit: props.unit,
671 tooltipType: props.tooltipType,
672 id: id
673 }), /*#__PURE__*/React.createElement(_SetGraphicalItem.SetCartesianGraphicalItem, {
674 type: "line",
675 id: id,
676 data: props.data,
677 xAxisId: props.xAxisId,
678 yAxisId: props.yAxisId,
679 zAxisId: 0,
680 dataKey: props.dataKey,
681 hide: props.hide,
682 isPanorama: isPanorama
683 }), /*#__PURE__*/React.createElement(LineImpl, _extends({}, props, {
684 id: id
685 }))));
686}
687
688/**
689 * @provides LabelListContext
690 * @provides ErrorBarContext
691 * @consumes CartesianChartContext
692 */
693var Line = exports.Line = /*#__PURE__*/React.memo(LineFn, _propsAreEqual.propsAreEqual);
694Line.displayName = 'Line';
Note: See TracBrowser for help on using the repository browser.