| 1 | var _excluded = ["index"];
|
|---|
| 2 | function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|---|
| 3 | function _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; }
|
|---|
| 4 | function _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; }
|
|---|
| 5 | import * as React from 'react';
|
|---|
| 6 | import { createContext, useContext, useMemo } from 'react';
|
|---|
| 7 | import { getNormalizedStackId } from '../util/ChartUtils';
|
|---|
| 8 | import { useUniqueId } from '../util/useUniqueId';
|
|---|
| 9 | import { resolveDefaultProps } from '../util/resolveDefaultProps';
|
|---|
| 10 | import { useAppSelector } from '../state/hooks';
|
|---|
| 11 | import { selectStackRects } from '../state/selectors/barStackSelectors';
|
|---|
| 12 | import { useIsPanorama } from '../context/PanoramaContext';
|
|---|
| 13 | import { Layer } from '../container/Layer';
|
|---|
| 14 | import { Rectangle } from '../shape/Rectangle';
|
|---|
| 15 | import { propsAreEqual } from '../util/propsAreEqual';
|
|---|
| 16 | var BarStackContext = /*#__PURE__*/createContext(undefined);
|
|---|
| 17 |
|
|---|
| 18 | /**
|
|---|
| 19 | * Hook to resolve the stack ID for a Bar component.
|
|---|
| 20 | * If a stack ID is provided via props, it is used directly.
|
|---|
| 21 | * Otherwise, this will read stack ID from BarStack context if available.
|
|---|
| 22 | * If both are undefined, it returns undefined.
|
|---|
| 23 | * @param childStackId
|
|---|
| 24 | */
|
|---|
| 25 | export var useStackId = childStackId => {
|
|---|
| 26 | var stackSettings = useContext(BarStackContext);
|
|---|
| 27 | if (stackSettings != null) {
|
|---|
| 28 | return stackSettings.stackId;
|
|---|
| 29 | }
|
|---|
| 30 | if (childStackId == null) {
|
|---|
| 31 | return undefined;
|
|---|
| 32 | }
|
|---|
| 33 | return getNormalizedStackId(childStackId);
|
|---|
| 34 | };
|
|---|
| 35 | export var defaultBarStackProps = {
|
|---|
| 36 | radius: 0
|
|---|
| 37 | };
|
|---|
| 38 | var getClipPathId = (stackId, index) => {
|
|---|
| 39 | return "recharts-bar-stack-clip-path-".concat(stackId, "-").concat(index);
|
|---|
| 40 | };
|
|---|
| 41 | export var useBarStackClipPathUrl = index => {
|
|---|
| 42 | var barStackContext = useContext(BarStackContext);
|
|---|
| 43 | if (barStackContext == null) {
|
|---|
| 44 | return undefined;
|
|---|
| 45 | }
|
|---|
| 46 | var {
|
|---|
| 47 | stackId
|
|---|
| 48 | } = barStackContext;
|
|---|
| 49 | return "url(#".concat(getClipPathId(stackId, index), ")");
|
|---|
| 50 | };
|
|---|
| 51 | export var BarStackClipLayer = _ref => {
|
|---|
| 52 | var {
|
|---|
| 53 | index
|
|---|
| 54 | } = _ref,
|
|---|
| 55 | rest = _objectWithoutProperties(_ref, _excluded);
|
|---|
| 56 | var clipPathUrl = useBarStackClipPathUrl(index);
|
|---|
| 57 | return /*#__PURE__*/React.createElement(Layer, _extends({
|
|---|
| 58 | className: "recharts-bar-stack-layer",
|
|---|
| 59 | clipPath: clipPathUrl
|
|---|
| 60 | }, rest));
|
|---|
| 61 | };
|
|---|
| 62 |
|
|---|
| 63 | /**
|
|---|
| 64 | * This React component will render a clipPath that the individual bars in the stack will reference
|
|---|
| 65 | * to achieve rounded corners for the entire stack.
|
|---|
| 66 | */
|
|---|
| 67 | var BarStackClipPath = _ref2 => {
|
|---|
| 68 | var {
|
|---|
| 69 | stackId,
|
|---|
| 70 | radius
|
|---|
| 71 | } = _ref2;
|
|---|
| 72 | var isPanorama = useIsPanorama();
|
|---|
| 73 | var positions = useAppSelector(state => selectStackRects(state, stackId, isPanorama));
|
|---|
| 74 | if (positions == null || positions.length === 0) {
|
|---|
| 75 | return null;
|
|---|
| 76 | }
|
|---|
| 77 | /*
|
|---|
| 78 | * Render one clipPath per rectangle in the stack.
|
|---|
| 79 | * Each rectangle corresponds to one data entry in the chart.
|
|---|
| 80 | */
|
|---|
| 81 | return /*#__PURE__*/React.createElement("defs", null, positions.map((pos, index) => {
|
|---|
| 82 | if (pos == null) {
|
|---|
| 83 | return null;
|
|---|
| 84 | }
|
|---|
| 85 | var clipPathId = getClipPathId(stackId, index);
|
|---|
| 86 | return /*#__PURE__*/React.createElement("clipPath", {
|
|---|
| 87 | key: clipPathId,
|
|---|
| 88 | id: clipPathId
|
|---|
| 89 | }, /*#__PURE__*/React.createElement(Rectangle, {
|
|---|
| 90 | isAnimationActive: false,
|
|---|
| 91 | isUpdateAnimationActive: false,
|
|---|
| 92 | x: pos.x,
|
|---|
| 93 | y: pos.y,
|
|---|
| 94 | width: pos.width,
|
|---|
| 95 | height: pos.height,
|
|---|
| 96 | radius: radius
|
|---|
| 97 | }));
|
|---|
| 98 | }));
|
|---|
| 99 | };
|
|---|
| 100 | var BarStackImpl = props => {
|
|---|
| 101 | var resolvedStackId = useUniqueId('recharts-bar-stack', getNormalizedStackId(props.stackId));
|
|---|
| 102 | var {
|
|---|
| 103 | children,
|
|---|
| 104 | radius
|
|---|
| 105 | } = resolveDefaultProps(props, defaultBarStackProps);
|
|---|
| 106 | var context = useMemo(() => ({
|
|---|
| 107 | stackId: resolvedStackId,
|
|---|
| 108 | radius
|
|---|
| 109 | }), [resolvedStackId, radius]);
|
|---|
| 110 | return /*#__PURE__*/React.createElement(BarStackContext.Provider, {
|
|---|
| 111 | value: context
|
|---|
| 112 | }, /*#__PURE__*/React.createElement(BarStackClipPath, {
|
|---|
| 113 | stackId: resolvedStackId,
|
|---|
| 114 | radius: radius
|
|---|
| 115 | }), children);
|
|---|
| 116 | };
|
|---|
| 117 |
|
|---|
| 118 | /**
|
|---|
| 119 | * @provides BarStackContext
|
|---|
| 120 | * @since 3.6
|
|---|
| 121 | */
|
|---|
| 122 | export var BarStack = /*#__PURE__*/React.memo(BarStackImpl, propsAreEqual); |
|---|