source: node_modules/recharts/es6/chart/RechartsWrapper.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: 12.9 KB
Line 
1function 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; }
2function _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; }
3function _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; }
4function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
5function _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); }
6function _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); }
7import * as React from 'react';
8import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
9import { clsx } from 'clsx';
10import { mouseLeaveChart } from '../state/tooltipSlice';
11import { useAppDispatch } from '../state/hooks';
12import { mouseClickAction, mouseMoveAction } from '../state/mouseEventsMiddleware';
13import { useSynchronisedEventsFromOtherCharts } from '../synchronisation/useChartSynchronisation';
14import { focusAction, keyDownAction } from '../state/keyboardEventsMiddleware';
15import { useReportScale } from '../util/useReportScale';
16import { externalEventAction } from '../state/externalEventsMiddleware';
17import { touchEventAction } from '../state/touchEventsMiddleware';
18import { TooltipPortalContext } from '../context/tooltipPortalContext';
19import { LegendPortalContext } from '../context/legendPortalContext';
20import { ReportChartSize } from '../context/chartLayoutContext';
21import { useResponsiveContainerContext } from '../component/ResponsiveContainer';
22var EventSynchronizer = () => {
23 useSynchronisedEventsFromOtherCharts();
24 return null;
25};
26function getNumberOrZero(value) {
27 if (typeof value === 'number') {
28 return value;
29 }
30 if (typeof value === 'string') {
31 var parsed = parseFloat(value);
32 if (!Number.isNaN(parsed)) {
33 return parsed;
34 }
35 }
36 return 0;
37}
38var ResponsiveDiv = /*#__PURE__*/forwardRef((props, ref) => {
39 var _props$style, _props$style2;
40 var observerRef = useRef(null);
41 var [sizes, setSizes] = useState({
42 containerWidth: getNumberOrZero((_props$style = props.style) === null || _props$style === void 0 ? void 0 : _props$style.width),
43 containerHeight: getNumberOrZero((_props$style2 = props.style) === null || _props$style2 === void 0 ? void 0 : _props$style2.height)
44 });
45 var setContainerSize = useCallback((newWidth, newHeight) => {
46 setSizes(prevState => {
47 var roundedWidth = Math.round(newWidth);
48 var roundedHeight = Math.round(newHeight);
49 if (prevState.containerWidth === roundedWidth && prevState.containerHeight === roundedHeight) {
50 return prevState;
51 }
52 return {
53 containerWidth: roundedWidth,
54 containerHeight: roundedHeight
55 };
56 });
57 }, []);
58 var innerRef = useCallback(node => {
59 if (typeof ref === 'function') {
60 ref(node);
61 }
62 if (node != null && typeof ResizeObserver !== 'undefined') {
63 var {
64 width: containerWidth,
65 height: containerHeight
66 } = node.getBoundingClientRect();
67 setContainerSize(containerWidth, containerHeight);
68 var callback = entries => {
69 var entry = entries[0];
70 if (entry == null) {
71 return;
72 }
73 var {
74 width,
75 height
76 } = entry.contentRect;
77 setContainerSize(width, height);
78 };
79 var observer = new ResizeObserver(callback);
80 observer.observe(node);
81 observerRef.current = observer;
82 }
83 }, [ref, setContainerSize]);
84 useEffect(() => {
85 return () => {
86 var observer = observerRef.current;
87 if (observer != null) {
88 observer.disconnect();
89 }
90 };
91 }, [setContainerSize]);
92 return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReportChartSize, {
93 width: sizes.containerWidth,
94 height: sizes.containerHeight
95 }), /*#__PURE__*/React.createElement("div", _extends({
96 ref: innerRef
97 }, props)));
98});
99var ReadSizeOnceDiv = /*#__PURE__*/forwardRef((props, ref) => {
100 var {
101 width,
102 height
103 } = props;
104 var [sizes, setSizes] = useState({
105 containerWidth: getNumberOrZero(width),
106 containerHeight: getNumberOrZero(height)
107 });
108 var setContainerSize = useCallback((newWidth, newHeight) => {
109 setSizes(prevState => {
110 var roundedWidth = Math.round(newWidth);
111 var roundedHeight = Math.round(newHeight);
112 if (prevState.containerWidth === roundedWidth && prevState.containerHeight === roundedHeight) {
113 return prevState;
114 }
115 return {
116 containerWidth: roundedWidth,
117 containerHeight: roundedHeight
118 };
119 });
120 }, []);
121 var innerRef = useCallback(node => {
122 if (typeof ref === 'function') {
123 ref(node);
124 }
125 if (node != null) {
126 var {
127 width: containerWidth,
128 height: containerHeight
129 } = node.getBoundingClientRect();
130 setContainerSize(containerWidth, containerHeight);
131 }
132 }, [ref, setContainerSize]);
133 return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReportChartSize, {
134 width: sizes.containerWidth,
135 height: sizes.containerHeight
136 }), /*#__PURE__*/React.createElement("div", _extends({
137 ref: innerRef
138 }, props)));
139});
140var StaticDiv = /*#__PURE__*/forwardRef((props, ref) => {
141 var {
142 width,
143 height
144 } = props;
145 return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReportChartSize, {
146 width: width,
147 height: height
148 }), /*#__PURE__*/React.createElement("div", _extends({
149 ref: ref
150 }, props)));
151});
152var NonResponsiveDiv = /*#__PURE__*/forwardRef((props, ref) => {
153 var {
154 width,
155 height
156 } = props;
157 // When width or height are percentages or CSS short names, read size from DOM once
158 if (typeof width === 'string' || typeof height === 'string') {
159 return /*#__PURE__*/React.createElement(ReadSizeOnceDiv, _extends({}, props, {
160 ref: ref
161 }));
162 }
163 // When both are numbers, use them directly
164 if (typeof width === 'number' && typeof height === 'number') {
165 return /*#__PURE__*/React.createElement(StaticDiv, _extends({}, props, {
166 width: width,
167 height: height,
168 ref: ref
169 }));
170 }
171 // When width/height are undefined, render wrapper div without reporting size
172 // This results in no SVG being rendered (intentional for backwards compatibility)
173 return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReportChartSize, {
174 width: width,
175 height: height
176 }), /*#__PURE__*/React.createElement("div", _extends({
177 ref: ref
178 }, props)));
179});
180function getWrapperDivComponent(responsive) {
181 return responsive ? ResponsiveDiv : NonResponsiveDiv;
182}
183export var RechartsWrapper = /*#__PURE__*/forwardRef((props, ref) => {
184 var {
185 children,
186 className,
187 height: heightFromProps,
188 onClick,
189 onContextMenu,
190 onDoubleClick,
191 onMouseDown,
192 onMouseEnter,
193 onMouseLeave,
194 onMouseMove,
195 onMouseUp,
196 onTouchEnd,
197 onTouchMove,
198 onTouchStart,
199 style,
200 width: widthFromProps,
201 responsive,
202 dispatchTouchEvents = true
203 } = props;
204 var containerRef = useRef(null);
205 var dispatch = useAppDispatch();
206 var [tooltipPortal, setTooltipPortal] = useState(null);
207 var [legendPortal, setLegendPortal] = useState(null);
208 var setScaleRef = useReportScale();
209 var responsiveContainerCalculations = useResponsiveContainerContext();
210 var width = (responsiveContainerCalculations === null || responsiveContainerCalculations === void 0 ? void 0 : responsiveContainerCalculations.width) > 0 ? responsiveContainerCalculations.width : widthFromProps;
211 var height = (responsiveContainerCalculations === null || responsiveContainerCalculations === void 0 ? void 0 : responsiveContainerCalculations.height) > 0 ? responsiveContainerCalculations.height : heightFromProps;
212 var innerRef = useCallback(node => {
213 setScaleRef(node);
214 if (typeof ref === 'function') {
215 ref(node);
216 }
217 setTooltipPortal(node);
218 setLegendPortal(node);
219 if (node != null) {
220 containerRef.current = node;
221 }
222 }, [setScaleRef, ref, setTooltipPortal, setLegendPortal]);
223 var myOnClick = useCallback(e => {
224 dispatch(mouseClickAction(e));
225 dispatch(externalEventAction({
226 handler: onClick,
227 reactEvent: e
228 }));
229 }, [dispatch, onClick]);
230 var myOnMouseEnter = useCallback(e => {
231 dispatch(mouseMoveAction(e));
232 dispatch(externalEventAction({
233 handler: onMouseEnter,
234 reactEvent: e
235 }));
236 }, [dispatch, onMouseEnter]);
237 var myOnMouseLeave = useCallback(e => {
238 dispatch(mouseLeaveChart());
239 dispatch(externalEventAction({
240 handler: onMouseLeave,
241 reactEvent: e
242 }));
243 }, [dispatch, onMouseLeave]);
244 var myOnMouseMove = useCallback(e => {
245 dispatch(mouseMoveAction(e));
246 dispatch(externalEventAction({
247 handler: onMouseMove,
248 reactEvent: e
249 }));
250 }, [dispatch, onMouseMove]);
251 var onFocus = useCallback(() => {
252 dispatch(focusAction());
253 }, [dispatch]);
254 var onKeyDown = useCallback(e => {
255 dispatch(keyDownAction(e.key));
256 }, [dispatch]);
257 var myOnContextMenu = useCallback(e => {
258 dispatch(externalEventAction({
259 handler: onContextMenu,
260 reactEvent: e
261 }));
262 }, [dispatch, onContextMenu]);
263 var myOnDoubleClick = useCallback(e => {
264 dispatch(externalEventAction({
265 handler: onDoubleClick,
266 reactEvent: e
267 }));
268 }, [dispatch, onDoubleClick]);
269 var myOnMouseDown = useCallback(e => {
270 dispatch(externalEventAction({
271 handler: onMouseDown,
272 reactEvent: e
273 }));
274 }, [dispatch, onMouseDown]);
275 var myOnMouseUp = useCallback(e => {
276 dispatch(externalEventAction({
277 handler: onMouseUp,
278 reactEvent: e
279 }));
280 }, [dispatch, onMouseUp]);
281 var myOnTouchStart = useCallback(e => {
282 dispatch(externalEventAction({
283 handler: onTouchStart,
284 reactEvent: e
285 }));
286 }, [dispatch, onTouchStart]);
287
288 /*
289 * onTouchMove is special because it behaves different from mouse events.
290 * Mouse events have 'enter' + 'leave' combo that notify us when the mouse is over
291 * a certain element. Touch events don't have that; touch only gives us
292 * start (finger down), end (finger up) and move (finger moving).
293 * So we need to figure out which element the user is touching
294 * ourselves. Fortunately, there's a convenient method for that:
295 * https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint
296 */
297 var myOnTouchMove = useCallback(e => {
298 if (dispatchTouchEvents) {
299 dispatch(touchEventAction(e));
300 }
301 dispatch(externalEventAction({
302 handler: onTouchMove,
303 reactEvent: e
304 }));
305 }, [dispatch, dispatchTouchEvents, onTouchMove]);
306 var myOnTouchEnd = useCallback(e => {
307 dispatch(externalEventAction({
308 handler: onTouchEnd,
309 reactEvent: e
310 }));
311 }, [dispatch, onTouchEnd]);
312 var WrapperDiv = getWrapperDivComponent(responsive);
313 return /*#__PURE__*/React.createElement(TooltipPortalContext.Provider, {
314 value: tooltipPortal
315 }, /*#__PURE__*/React.createElement(LegendPortalContext.Provider, {
316 value: legendPortal
317 }, /*#__PURE__*/React.createElement(WrapperDiv, {
318 width: width !== null && width !== void 0 ? width : style === null || style === void 0 ? void 0 : style.width,
319 height: height !== null && height !== void 0 ? height : style === null || style === void 0 ? void 0 : style.height,
320 className: clsx('recharts-wrapper', className),
321 style: _objectSpread({
322 position: 'relative',
323 cursor: 'default',
324 width,
325 height
326 }, style),
327 onClick: myOnClick,
328 onContextMenu: myOnContextMenu,
329 onDoubleClick: myOnDoubleClick,
330 onFocus: onFocus,
331 onKeyDown: onKeyDown,
332 onMouseDown: myOnMouseDown,
333 onMouseEnter: myOnMouseEnter,
334 onMouseLeave: myOnMouseLeave,
335 onMouseMove: myOnMouseMove,
336 onMouseUp: myOnMouseUp,
337 onTouchEnd: myOnTouchEnd,
338 onTouchMove: myOnTouchMove,
339 onTouchStart: myOnTouchStart,
340 ref: innerRef
341 }, /*#__PURE__*/React.createElement(EventSynchronizer, null), children)));
342});
Note: See TracBrowser for help on using the repository browser.