source: node_modules/recharts/lib/cartesian/Bar.js@ a762898

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

Added visualizations
  • Property mode set to 100644
File size: 27.3 KB
Line 
1"use strict";
2
3Object.defineProperty(exports, "__esModule", {
4 value: true
5});
6exports.Bar = void 0;
7exports.computeBarRectangles = computeBarRectangles;
8exports.defaultBarProps = void 0;
9var _react = _interopRequireWildcard(require("react"));
10var React = _react;
11var _clsx = require("clsx");
12var _Layer = require("../container/Layer");
13var _Cell = require("../component/Cell");
14var _LabelList = require("../component/LabelList");
15var _DataUtils = require("../util/DataUtils");
16var _ReactUtils = require("../util/ReactUtils");
17var _ChartUtils = require("../util/ChartUtils");
18var _types = require("../util/types");
19var _BarUtils = require("../util/BarUtils");
20var _tooltipContext = require("../context/tooltipContext");
21var _SetTooltipEntrySettings = require("../state/SetTooltipEntrySettings");
22var _ErrorBarContext = require("../context/ErrorBarContext");
23var _GraphicalItemClipPath = require("./GraphicalItemClipPath");
24var _chartLayoutContext = require("../context/chartLayoutContext");
25var _barSelectors = require("../state/selectors/barSelectors");
26var _hooks = require("../state/hooks");
27var _PanoramaContext = require("../context/PanoramaContext");
28var _tooltipSelectors = require("../state/selectors/tooltipSelectors");
29var _SetLegendPayload = require("../state/SetLegendPayload");
30var _useAnimationId = require("../util/useAnimationId");
31var _resolveDefaultProps = require("../util/resolveDefaultProps");
32var _RegisterGraphicalItemId = require("../context/RegisterGraphicalItemId");
33var _SetGraphicalItem = require("../state/SetGraphicalItem");
34var _svgPropertiesNoEvents = require("../util/svgPropertiesNoEvents");
35var _JavascriptAnimate = require("../animation/JavascriptAnimate");
36var _ZIndexLayer = require("../zIndex/ZIndexLayer");
37var _DefaultZIndexes = require("../zIndex/DefaultZIndexes");
38var _getZIndexFromUnknown = require("../zIndex/getZIndexFromUnknown");
39var _propsAreEqual = require("../util/propsAreEqual");
40var _BarStack = require("./BarStack");
41var _excluded = ["onMouseEnter", "onMouseLeave", "onClick"],
42 _excluded2 = ["value", "background", "tooltipPosition"],
43 _excluded3 = ["id"],
44 _excluded4 = ["onMouseEnter", "onClick", "onMouseLeave"];
45function _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); }
46function _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); }
47function 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; }
48function _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; }
49function _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; }
50function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
51function _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); }
52function _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; }
53function _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; }
54var computeLegendPayloadFromBarData = props => {
55 var {
56 dataKey,
57 name,
58 fill,
59 legendType,
60 hide
61 } = props;
62 return [{
63 inactive: hide,
64 dataKey,
65 type: legendType,
66 color: fill,
67 value: (0, _ChartUtils.getTooltipNameProp)(name, dataKey),
68 payload: props
69 }];
70};
71var SetBarTooltipEntrySettings = /*#__PURE__*/React.memo(_ref => {
72 var {
73 dataKey,
74 stroke,
75 strokeWidth,
76 fill,
77 name,
78 hide,
79 unit,
80 tooltipType,
81 id
82 } = _ref;
83 var tooltipEntrySettings = {
84 dataDefinedOnItem: undefined,
85 getPosition: _DataUtils.noop,
86 settings: {
87 stroke,
88 strokeWidth,
89 fill,
90 dataKey,
91 nameKey: undefined,
92 name: (0, _ChartUtils.getTooltipNameProp)(name, dataKey),
93 hide,
94 type: tooltipType,
95 color: fill,
96 unit,
97 graphicalItemId: id
98 }
99 };
100 return /*#__PURE__*/React.createElement(_SetTooltipEntrySettings.SetTooltipEntrySettings, {
101 tooltipEntrySettings: tooltipEntrySettings
102 });
103});
104function BarBackground(props) {
105 var activeIndex = (0, _hooks.useAppSelector)(_tooltipSelectors.selectActiveTooltipIndex);
106 var {
107 data,
108 dataKey,
109 background: backgroundFromProps,
110 allOtherBarProps
111 } = props;
112 var {
113 onMouseEnter: onMouseEnterFromProps,
114 onMouseLeave: onMouseLeaveFromProps,
115 onClick: onItemClickFromProps
116 } = allOtherBarProps,
117 restOfAllOtherProps = _objectWithoutProperties(allOtherBarProps, _excluded);
118
119 // @ts-expect-error bar mouse events are not compatible with recharts mouse events
120 var onMouseEnterFromContext = (0, _tooltipContext.useMouseEnterItemDispatch)(onMouseEnterFromProps, dataKey, allOtherBarProps.id);
121 // @ts-expect-error bar mouse events are not compatible with recharts mouse events
122 var onMouseLeaveFromContext = (0, _tooltipContext.useMouseLeaveItemDispatch)(onMouseLeaveFromProps);
123 // @ts-expect-error bar mouse events are not compatible with recharts mouse events
124 var onClickFromContext = (0, _tooltipContext.useMouseClickItemDispatch)(onItemClickFromProps, dataKey, allOtherBarProps.id);
125 if (!backgroundFromProps || data == null) {
126 return null;
127 }
128 var backgroundProps = (0, _svgPropertiesNoEvents.svgPropertiesNoEventsFromUnknown)(backgroundFromProps);
129 return /*#__PURE__*/React.createElement(_ZIndexLayer.ZIndexLayer, {
130 zIndex: (0, _getZIndexFromUnknown.getZIndexFromUnknown)(backgroundFromProps, _DefaultZIndexes.DefaultZIndexes.barBackground)
131 }, data.map((entry, i) => {
132 var {
133 value,
134 background: backgroundFromDataEntry,
135 tooltipPosition
136 } = entry,
137 rest = _objectWithoutProperties(entry, _excluded2);
138 if (!backgroundFromDataEntry) {
139 return null;
140 }
141
142 // @ts-expect-error BarRectangleItem type definition says it's missing properties, but I can see them present in debugger!
143 var onMouseEnter = onMouseEnterFromContext(entry, i);
144 // @ts-expect-error BarRectangleItem type definition says it's missing properties, but I can see them present in debugger!
145 var onMouseLeave = onMouseLeaveFromContext(entry, i);
146 // @ts-expect-error BarRectangleItem type definition says it's missing properties, but I can see them present in debugger!
147 var onClick = onClickFromContext(entry, i);
148 var barRectangleProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
149 option: backgroundFromProps,
150 isActive: String(i) === activeIndex
151 }, rest), {}, {
152 // @ts-expect-error backgroundProps is contributing unknown props
153 fill: '#eee'
154 }, backgroundFromDataEntry), backgroundProps), (0, _types.adaptEventsOfChild)(restOfAllOtherProps, entry, i)), {}, {
155 onMouseEnter,
156 onMouseLeave,
157 onClick,
158 dataKey,
159 index: i,
160 className: 'recharts-bar-background-rectangle'
161 });
162 return /*#__PURE__*/React.createElement(_BarUtils.BarRectangle, _extends({
163 key: "background-bar-".concat(i)
164 }, barRectangleProps));
165 }));
166}
167function BarLabelListProvider(_ref2) {
168 var {
169 showLabels,
170 children,
171 rects
172 } = _ref2;
173 var labelListEntries = rects === null || rects === void 0 ? void 0 : rects.map(entry => {
174 var viewBox = {
175 x: entry.x,
176 y: entry.y,
177 width: entry.width,
178 lowerWidth: entry.width,
179 upperWidth: entry.width,
180 height: entry.height
181 };
182 return _objectSpread(_objectSpread({}, viewBox), {}, {
183 value: entry.value,
184 payload: entry.payload,
185 parentViewBox: entry.parentViewBox,
186 viewBox,
187 fill: entry.fill
188 });
189 });
190 return /*#__PURE__*/React.createElement(_LabelList.CartesianLabelListContextProvider, {
191 value: showLabels ? labelListEntries : undefined
192 }, children);
193}
194function BarRectangleWithActiveState(props) {
195 var {
196 shape,
197 activeBar,
198 baseProps,
199 entry,
200 index,
201 dataKey
202 } = props;
203 var activeIndex = (0, _hooks.useAppSelector)(_tooltipSelectors.selectActiveTooltipIndex);
204 var activeDataKey = (0, _hooks.useAppSelector)(_tooltipSelectors.selectActiveTooltipDataKey);
205 /*
206 * Bars support stacking, meaning that there can be multiple bars at the same x value.
207 * With Tooltip shared=false we only want to highlight the currently active Bar, not all.
208 *
209 * Also, if the tooltip is shared, we want to highlight all bars at the same x value
210 * regardless of the dataKey.
211 *
212 * With shared Tooltip, the activeDataKey is undefined.
213 */
214 var isActive = activeBar && String(index) === activeIndex && (activeDataKey == null || dataKey === activeDataKey);
215 var option = isActive ? activeBar : shape;
216 if (isActive) {
217 return /*#__PURE__*/React.createElement(_ZIndexLayer.ZIndexLayer, {
218 zIndex: _DefaultZIndexes.DefaultZIndexes.activeBar
219 }, /*#__PURE__*/React.createElement(_BarStack.BarStackClipLayer, {
220 index: index
221 }, /*#__PURE__*/React.createElement(_BarUtils.BarRectangle, _extends({}, baseProps, {
222 name: String(baseProps.name)
223 }, entry, {
224 isActive: isActive,
225 option: option,
226 index: index,
227 dataKey: dataKey
228 }))));
229 }
230 return /*#__PURE__*/React.createElement(_BarUtils.BarRectangle, _extends({}, baseProps, {
231 name: String(baseProps.name)
232 }, entry, {
233 isActive: isActive,
234 option: option,
235 index: index,
236 dataKey: dataKey
237 }));
238}
239function BarRectangleNeverActive(props) {
240 var {
241 shape,
242 baseProps,
243 entry,
244 index,
245 dataKey
246 } = props;
247 return /*#__PURE__*/React.createElement(_BarUtils.BarRectangle, _extends({}, baseProps, {
248 name: String(baseProps.name)
249 }, entry, {
250 isActive: false,
251 option: shape,
252 index: index,
253 dataKey: dataKey
254 }));
255}
256function BarRectangles(_ref3) {
257 var _svgPropertiesNoEvent;
258 var {
259 data,
260 props
261 } = _ref3;
262 var _ref4 = (_svgPropertiesNoEvent = (0, _svgPropertiesNoEvents.svgPropertiesNoEvents)(props)) !== null && _svgPropertiesNoEvent !== void 0 ? _svgPropertiesNoEvent : {},
263 {
264 id
265 } = _ref4,
266 baseProps = _objectWithoutProperties(_ref4, _excluded3);
267 var {
268 shape,
269 dataKey,
270 activeBar
271 } = props;
272 var {
273 onMouseEnter: onMouseEnterFromProps,
274 onClick: onItemClickFromProps,
275 onMouseLeave: onMouseLeaveFromProps
276 } = props,
277 restOfAllOtherProps = _objectWithoutProperties(props, _excluded4);
278
279 // @ts-expect-error bar mouse events are not compatible with recharts mouse events
280 var onMouseEnterFromContext = (0, _tooltipContext.useMouseEnterItemDispatch)(onMouseEnterFromProps, dataKey, id);
281 // @ts-expect-error bar mouse events are not compatible with recharts mouse events
282 var onMouseLeaveFromContext = (0, _tooltipContext.useMouseLeaveItemDispatch)(onMouseLeaveFromProps);
283 // @ts-expect-error bar mouse events are not compatible with recharts mouse events
284 var onClickFromContext = (0, _tooltipContext.useMouseClickItemDispatch)(onItemClickFromProps, dataKey, id);
285 if (!data) {
286 return null;
287 }
288 return /*#__PURE__*/React.createElement(React.Fragment, null, data.map((entry, i) => {
289 return /*#__PURE__*/React.createElement(_BarStack.BarStackClipLayer, _extends({
290 index: i
291 // https://github.com/recharts/recharts/issues/5415
292 ,
293 key: "rectangle-".concat(entry === null || entry === void 0 ? void 0 : entry.x, "-").concat(entry === null || entry === void 0 ? void 0 : entry.y, "-").concat(entry === null || entry === void 0 ? void 0 : entry.value, "-").concat(i),
294 className: "recharts-bar-rectangle"
295 }, (0, _types.adaptEventsOfChild)(restOfAllOtherProps, entry, i), {
296 // @ts-expect-error BarRectangleItem type definition says it's missing properties, but I can see them present in debugger!
297 onMouseEnter: onMouseEnterFromContext(entry, i)
298 // @ts-expect-error BarRectangleItem type definition says it's missing properties, but I can see them present in debugger!
299 ,
300 onMouseLeave: onMouseLeaveFromContext(entry, i)
301 // @ts-expect-error BarRectangleItem type definition says it's missing properties, but I can see them present in debugger!
302 ,
303 onClick: onClickFromContext(entry, i)
304 }), activeBar ? /*#__PURE__*/React.createElement(BarRectangleWithActiveState, {
305 shape: shape,
306 activeBar: activeBar,
307 baseProps: baseProps,
308 entry: entry,
309 index: i,
310 dataKey: dataKey
311 }) :
312 /*#__PURE__*/
313 /*
314 * If the `activeBar` prop is falsy, then let's call the variant without hooks.
315 * Using the `selectActiveTooltipIndex` selector is usually fast
316 * but in charts with large-ish amount of data even the few nanoseconds add up to a noticeable jank.
317 * If the activeBar is false then we don't need to know which index is active - because we won't use it anyway.
318 * So let's just skip the hooks altogether. That way, React can skip rendering the component,
319 * and can skip the tree reconciliation for its children too.
320 * Because we can't call hooks conditionally, we need to have a separate component for that.
321 */
322 React.createElement(BarRectangleNeverActive, {
323 shape: shape,
324 baseProps: baseProps,
325 entry: entry,
326 index: i,
327 dataKey: dataKey
328 }));
329 }));
330}
331function RectanglesWithAnimation(_ref5) {
332 var {
333 props,
334 previousRectanglesRef
335 } = _ref5;
336 var {
337 data,
338 layout,
339 isAnimationActive,
340 animationBegin,
341 animationDuration,
342 animationEasing,
343 onAnimationEnd,
344 onAnimationStart
345 } = props;
346 var prevData = previousRectanglesRef.current;
347 var animationId = (0, _useAnimationId.useAnimationId)(props, 'recharts-bar-');
348 var [isAnimating, setIsAnimating] = (0, _react.useState)(false);
349 var showLabels = !isAnimating;
350 var handleAnimationEnd = (0, _react.useCallback)(() => {
351 if (typeof onAnimationEnd === 'function') {
352 onAnimationEnd();
353 }
354 setIsAnimating(false);
355 }, [onAnimationEnd]);
356 var handleAnimationStart = (0, _react.useCallback)(() => {
357 if (typeof onAnimationStart === 'function') {
358 onAnimationStart();
359 }
360 setIsAnimating(true);
361 }, [onAnimationStart]);
362 return /*#__PURE__*/React.createElement(BarLabelListProvider, {
363 showLabels: showLabels,
364 rects: data
365 }, /*#__PURE__*/React.createElement(_JavascriptAnimate.JavascriptAnimate, {
366 animationId: animationId,
367 begin: animationBegin,
368 duration: animationDuration,
369 isActive: isAnimationActive,
370 easing: animationEasing,
371 onAnimationEnd: handleAnimationEnd,
372 onAnimationStart: handleAnimationStart,
373 key: animationId
374 }, t => {
375 var stepData = t === 1 ? data : data === null || data === void 0 ? void 0 : data.map((entry, index) => {
376 var prev = prevData && prevData[index];
377 if (prev) {
378 return _objectSpread(_objectSpread({}, entry), {}, {
379 x: (0, _DataUtils.interpolate)(prev.x, entry.x, t),
380 y: (0, _DataUtils.interpolate)(prev.y, entry.y, t),
381 width: (0, _DataUtils.interpolate)(prev.width, entry.width, t),
382 height: (0, _DataUtils.interpolate)(prev.height, entry.height, t)
383 });
384 }
385 if (layout === 'horizontal') {
386 var height = (0, _DataUtils.interpolate)(0, entry.height, t);
387 var y = (0, _DataUtils.interpolate)(entry.stackedBarStart, entry.y, t);
388 return _objectSpread(_objectSpread({}, entry), {}, {
389 y,
390 height
391 });
392 }
393 var w = (0, _DataUtils.interpolate)(0, entry.width, t);
394 var x = (0, _DataUtils.interpolate)(entry.stackedBarStart, entry.x, t);
395 return _objectSpread(_objectSpread({}, entry), {}, {
396 width: w,
397 x
398 });
399 });
400 if (t > 0) {
401 // eslint-disable-next-line no-param-reassign
402 previousRectanglesRef.current = stepData !== null && stepData !== void 0 ? stepData : null;
403 }
404 if (stepData == null) {
405 return null;
406 }
407 return /*#__PURE__*/React.createElement(_Layer.Layer, null, /*#__PURE__*/React.createElement(BarRectangles, {
408 props: props,
409 data: stepData
410 }));
411 }), /*#__PURE__*/React.createElement(_LabelList.LabelListFromLabelProp, {
412 label: props.label
413 }), props.children);
414}
415function RenderRectangles(props) {
416 var previousRectanglesRef = (0, _react.useRef)(null);
417 return /*#__PURE__*/React.createElement(RectanglesWithAnimation, {
418 previousRectanglesRef: previousRectanglesRef,
419 props: props
420 });
421}
422var defaultMinPointSize = 0;
423var errorBarDataPointFormatter = (dataPoint, dataKey) => {
424 /**
425 * if the value coming from `selectBarRectangles` is an array then this is a stacked bar chart.
426 * arr[1] represents end value of the bar since the data is in the form of [startValue, endValue].
427 * */
428 var value = Array.isArray(dataPoint.value) ? dataPoint.value[1] : dataPoint.value;
429 return {
430 x: dataPoint.x,
431 y: dataPoint.y,
432 value,
433 // @ts-expect-error getValueByDataKey does not validate the output type
434 errorVal: (0, _ChartUtils.getValueByDataKey)(dataPoint, dataKey)
435 };
436};
437class BarWithState extends _react.PureComponent {
438 render() {
439 var {
440 hide,
441 data,
442 dataKey,
443 className,
444 xAxisId,
445 yAxisId,
446 needClip,
447 background,
448 id
449 } = this.props;
450 if (hide || data == null) {
451 return null;
452 }
453 var layerClass = (0, _clsx.clsx)('recharts-bar', className);
454 var clipPathId = id;
455 return /*#__PURE__*/React.createElement(_Layer.Layer, {
456 className: layerClass,
457 id: id
458 }, needClip && /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement(_GraphicalItemClipPath.GraphicalItemClipPath, {
459 clipPathId: clipPathId,
460 xAxisId: xAxisId,
461 yAxisId: yAxisId
462 })), /*#__PURE__*/React.createElement(_Layer.Layer, {
463 className: "recharts-bar-rectangles",
464 clipPath: needClip ? "url(#clipPath-".concat(clipPathId, ")") : undefined
465 }, /*#__PURE__*/React.createElement(BarBackground, {
466 data: data,
467 dataKey: dataKey,
468 background: background,
469 allOtherBarProps: this.props
470 }), /*#__PURE__*/React.createElement(RenderRectangles, this.props)));
471 }
472}
473var defaultBarProps = exports.defaultBarProps = {
474 activeBar: false,
475 animationBegin: 0,
476 animationDuration: 400,
477 animationEasing: 'ease',
478 background: false,
479 hide: false,
480 isAnimationActive: 'auto',
481 label: false,
482 legendType: 'rect',
483 minPointSize: defaultMinPointSize,
484 xAxisId: 0,
485 yAxisId: 0,
486 zIndex: _DefaultZIndexes.DefaultZIndexes.bar
487};
488function BarImpl(props) {
489 var {
490 xAxisId,
491 yAxisId,
492 hide,
493 legendType,
494 minPointSize,
495 activeBar,
496 animationBegin,
497 animationDuration,
498 animationEasing,
499 isAnimationActive
500 } = props;
501 var {
502 needClip
503 } = (0, _GraphicalItemClipPath.useNeedsClip)(xAxisId, yAxisId);
504 var layout = (0, _chartLayoutContext.useChartLayout)();
505 var isPanorama = (0, _PanoramaContext.useIsPanorama)();
506 var cells = (0, _ReactUtils.findAllByType)(props.children, _Cell.Cell);
507 var rects = (0, _hooks.useAppSelector)(state => (0, _barSelectors.selectBarRectangles)(state, props.id, isPanorama, cells));
508 if (layout !== 'vertical' && layout !== 'horizontal') {
509 return null;
510 }
511 var errorBarOffset;
512 var firstDataPoint = rects === null || rects === void 0 ? void 0 : rects[0];
513 if (firstDataPoint == null || firstDataPoint.height == null || firstDataPoint.width == null) {
514 errorBarOffset = 0;
515 } else {
516 errorBarOffset = layout === 'vertical' ? firstDataPoint.height / 2 : firstDataPoint.width / 2;
517 }
518 return /*#__PURE__*/React.createElement(_ErrorBarContext.SetErrorBarContext, {
519 xAxisId: xAxisId,
520 yAxisId: yAxisId,
521 data: rects,
522 dataPointFormatter: errorBarDataPointFormatter,
523 errorBarOffset: errorBarOffset
524 }, /*#__PURE__*/React.createElement(BarWithState, _extends({}, props, {
525 layout: layout,
526 needClip: needClip,
527 data: rects,
528 xAxisId: xAxisId,
529 yAxisId: yAxisId,
530 hide: hide,
531 legendType: legendType,
532 minPointSize: minPointSize,
533 activeBar: activeBar,
534 animationBegin: animationBegin,
535 animationDuration: animationDuration,
536 animationEasing: animationEasing,
537 isAnimationActive: isAnimationActive
538 })));
539}
540function computeBarRectangles(_ref6) {
541 var {
542 layout,
543 barSettings: {
544 dataKey,
545 minPointSize: minPointSizeProp
546 },
547 pos,
548 bandSize,
549 xAxis,
550 yAxis,
551 xAxisTicks,
552 yAxisTicks,
553 stackedData,
554 displayedData,
555 offset,
556 cells,
557 parentViewBox,
558 dataStartIndex
559 } = _ref6;
560 var numericAxis = layout === 'horizontal' ? yAxis : xAxis;
561 // @ts-expect-error this assumes that the domain is always numeric, but doesn't check for it
562 var stackedDomain = stackedData ? numericAxis.scale.domain() : null;
563 var baseValue = (0, _ChartUtils.getBaseValueOfBar)({
564 numericAxis
565 });
566 var stackedBarStart = numericAxis.scale.map(baseValue);
567 return displayedData.map((entry, index) => {
568 var value, x, y, width, height, background;
569 if (stackedData) {
570 // Use dataStartIndex to access the correct element in the full stackedData array
571 var untruncatedValue = stackedData[index + dataStartIndex];
572 if (untruncatedValue == null) {
573 return null;
574 }
575 value = (0, _ChartUtils.truncateByDomain)(untruncatedValue, stackedDomain);
576 } else {
577 value = (0, _ChartUtils.getValueByDataKey)(entry, dataKey);
578 if (!Array.isArray(value)) {
579 value = [baseValue, value];
580 }
581 }
582 var minPointSize = (0, _BarUtils.minPointSizeCallback)(minPointSizeProp, defaultMinPointSize)(value[1], index);
583 if (layout === 'horizontal') {
584 var _ref7;
585 var baseValueScale = yAxis.scale.map(value[0]);
586 var currentValueScale = yAxis.scale.map(value[1]);
587 if (baseValueScale == null || currentValueScale == null) {
588 return null;
589 }
590 x = (0, _ChartUtils.getCateCoordinateOfBar)({
591 axis: xAxis,
592 ticks: xAxisTicks,
593 bandSize,
594 offset: pos.offset,
595 entry,
596 index
597 });
598 y = (_ref7 = currentValueScale !== null && currentValueScale !== void 0 ? currentValueScale : baseValueScale) !== null && _ref7 !== void 0 ? _ref7 : undefined;
599 width = pos.size;
600 var computedHeight = baseValueScale - currentValueScale;
601 height = (0, _DataUtils.isNan)(computedHeight) ? 0 : computedHeight;
602 background = {
603 x,
604 y: offset.top,
605 width,
606 height: offset.height
607 };
608 if (Math.abs(minPointSize) > 0 && Math.abs(height) < Math.abs(minPointSize)) {
609 var delta = (0, _DataUtils.mathSign)(height || minPointSize) * (Math.abs(minPointSize) - Math.abs(height));
610 y -= delta;
611 height += delta;
612 }
613 } else {
614 var _baseValueScale = xAxis.scale.map(value[0]);
615 var _currentValueScale = xAxis.scale.map(value[1]);
616 if (_baseValueScale == null || _currentValueScale == null) {
617 return null;
618 }
619 x = _baseValueScale;
620 y = (0, _ChartUtils.getCateCoordinateOfBar)({
621 axis: yAxis,
622 ticks: yAxisTicks,
623 bandSize,
624 offset: pos.offset,
625 entry,
626 index
627 });
628 width = _currentValueScale - _baseValueScale;
629 height = pos.size;
630 background = {
631 x: offset.left,
632 y,
633 width: offset.width,
634 height
635 };
636 if (Math.abs(minPointSize) > 0 && Math.abs(width) < Math.abs(minPointSize)) {
637 var _delta = (0, _DataUtils.mathSign)(width || minPointSize) * (Math.abs(minPointSize) - Math.abs(width));
638 width += _delta;
639 }
640 }
641 if (x == null || y == null || width == null || height == null) {
642 return null;
643 }
644 var barRectangleItem = _objectSpread(_objectSpread({}, entry), {}, {
645 stackedBarStart,
646 x,
647 y,
648 width,
649 height,
650 value: stackedData ? value : value[1],
651 payload: entry,
652 background,
653 tooltipPosition: {
654 x: x + width / 2,
655 y: y + height / 2
656 },
657 parentViewBox
658 }, cells && cells[index] && cells[index].props);
659 return barRectangleItem;
660 }).filter(Boolean);
661}
662function BarFn(outsideProps) {
663 var props = (0, _resolveDefaultProps.resolveDefaultProps)(outsideProps, defaultBarProps);
664 // stackId may arrive from props or from BarStack context
665 var stackId = (0, _BarStack.useStackId)(props.stackId);
666 var isPanorama = (0, _PanoramaContext.useIsPanorama)();
667 // Report all props to Redux store first, before calling any hooks, to avoid circular dependencies.
668 return /*#__PURE__*/React.createElement(_RegisterGraphicalItemId.RegisterGraphicalItemId, {
669 id: props.id,
670 type: "bar"
671 }, id => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_SetLegendPayload.SetLegendPayload, {
672 legendPayload: computeLegendPayloadFromBarData(props)
673 }), /*#__PURE__*/React.createElement(SetBarTooltipEntrySettings, {
674 dataKey: props.dataKey,
675 stroke: props.stroke,
676 strokeWidth: props.strokeWidth,
677 fill: props.fill,
678 name: props.name,
679 hide: props.hide,
680 unit: props.unit,
681 tooltipType: props.tooltipType,
682 id: id
683 }), /*#__PURE__*/React.createElement(_SetGraphicalItem.SetCartesianGraphicalItem, {
684 type: "bar",
685 id: id
686 // Bar does not allow setting data directly on the graphical item (why?)
687 ,
688 data: undefined,
689 xAxisId: props.xAxisId,
690 yAxisId: props.yAxisId,
691 zAxisId: 0,
692 dataKey: props.dataKey,
693 stackId: stackId,
694 hide: props.hide,
695 barSize: props.barSize,
696 minPointSize: props.minPointSize,
697 maxBarSize: props.maxBarSize,
698 isPanorama: isPanorama
699 }), /*#__PURE__*/React.createElement(_ZIndexLayer.ZIndexLayer, {
700 zIndex: props.zIndex
701 }, /*#__PURE__*/React.createElement(BarImpl, _extends({}, props, {
702 id: id
703 })))));
704}
705
706/**
707 * @provides ErrorBarContext
708 * @provides LabelListContext
709 * @provides CellReader
710 * @consumes CartesianChartContext
711 * @consumes BarStackContext
712 */
713var Bar = exports.Bar = /*#__PURE__*/React.memo(BarFn, _propsAreEqual.propsAreEqual);
714Bar.displayName = 'Bar';
Note: See TracBrowser for help on using the repository browser.