UNPKG

victory-core

Version:
1,169 lines (1,101 loc) 1.03 MB
(function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(require("react")); else if(typeof define === 'function' && define.amd) define(["react"], factory); else if(typeof exports === 'object') exports["VictoryCore"] = factory(require("react")); else root["VictoryCore"] = factory(root["React"]); })(self, function(__WEBPACK_EXTERNAL_MODULE_react__) { return /******/ (function() { // webpackBootstrap /******/ var __webpack_modules__ = ({ /***/ "./victory-accessible-group/victory-accessible-group.tsx": /*!***************************************************************!*\ !*** ./victory-accessible-group/victory-accessible-group.tsx ***! \***************************************************************/ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "VictoryAccessibleGroup": function() { return /* binding */ VictoryAccessibleGroup; } /* harmony export */ }); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react"); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); const VictoryAccessibleGroup = _ref => { let { desc, children, tabIndex, className = "VictoryAccessibleGroup", ...props } = _ref; const descId = desc && (props["aria-describedby"] || desc.split(" ").join("-")); return desc ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("g", { "aria-label": props["aria-label"], "aria-describedby": descId, className: className, tabIndex: tabIndex }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("desc", { id: descId }, desc), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("g", { "aria-label": props["aria-label"], "aria-describedby": props["aria-describedby"], className: className, tabIndex: tabIndex }, children); }; /***/ }), /***/ "./victory-animation/util.ts": /*!***********************************!*\ !*** ./victory-animation/util.ts ***! \***********************************/ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "interpolateFunction": function() { return /* binding */ interpolateFunction; }, /* harmony export */ "interpolateImmediate": function() { return /* binding */ interpolateImmediate; }, /* harmony export */ "interpolateObject": function() { return /* binding */ interpolateObject; }, /* harmony export */ "interpolateString": function() { return /* binding */ interpolateString; }, /* harmony export */ "isInterpolatable": function() { return /* binding */ isInterpolatable; }, /* harmony export */ "victoryInterpolator": function() { return /* binding */ victoryInterpolator; } /* harmony export */ }); /* harmony import */ var lodash_isPlainObject__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lodash/isPlainObject */ "../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/isPlainObject.js"); /* harmony import */ var lodash_isPlainObject__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash_isPlainObject__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var lodash_orderBy__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash/orderBy */ "../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/orderBy.js"); /* harmony import */ var lodash_orderBy__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_orderBy__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var victory_vendor_d3_interpolate__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! victory-vendor/d3-interpolate */ "../../victory-vendor/es/d3-interpolate.js"); const isInterpolatable = function (obj) { // d3 turns null into 0 and undefined into NaN, which we don't want. if (obj !== null) { switch (typeof obj) { case "undefined": return false; case "number": // The standard `isNaN` is fine in this case since we already know the // type is number. return !isNaN(obj) && obj !== Number.POSITIVE_INFINITY && obj !== Number.NEGATIVE_INFINITY; case "string": // d3 might not *actually* be able to interpolate the string, but it // won't cause any issues to let it try. return true; case "boolean": // d3 turns Booleans into integers, which we don't want. Sure, we could // interpolate from 0 -> 1, but we'd be sending a non-Boolean to // something expecting a Boolean. return false; case "object": // Don't try to interpolate class instances (except Date or Array). return obj instanceof Date || Array.isArray(obj) || lodash_isPlainObject__WEBPACK_IMPORTED_MODULE_0___default()(obj); case "function": // Careful! There may be extra properties on function objects that the // component expects to access - for instance, it may be a `d3.scale()` // function, which has its own methods attached. We don't know if the // component is only going to call the function (in which case it's // safely interpolatable) or if it's going to access special properties // (in which case our function generated from `interpolateFunction` will // most likely cause an error). We could check for enumerable properties // on the function object here to see if it's a "plain" function, but // let's just require that components prevent such function props from // being animated in the first place. return true; } } return false; }; /** * Interpolate immediately to the end value at the given step `when`. * Some nicer default behavior might be to jump at the halfway point or return * `a` if `t` is 0 (instead of always returning `b`). But d3's default * interpolator does not do these things: * * d3.interpolate('aaa', 'bbb')(0) === 'bbb' * * ...and things might get wonky if we don't replicate that behavior. * * @param {any} a - Start value. * @param {any} b - End value. * @param {Number} when - Step value (0 to 1) at which to jump to `b`. * @returns {Function} An interpolation function. */ const interpolateImmediate = function (a, b, when) { if (when === void 0) { when = 0; } return function (t) { return t < when ? a : b; }; }; /** * Interpolate to or from a function. The interpolated value will be a function * that calls `a` (if it's a function) and `b` (if it's a function) and calls * `d3.interpolate` on the resulting values. Note that our function won't * necessarily be called (that's up to the component this eventually gets * passed to) - but if it does get called, it will return an appropriately * interpolated value. * * @param {any} a - Start value. * @param {any} b - End value. * @returns {Function} An interpolation function. */ const interpolateFunction = function (a, b) { return function (t) { if (t >= 1) { return b; } return function () { /* eslint-disable prefer-rest-params */ const aval = typeof a === "function" ? a.apply(this, arguments) : a; const bval = typeof b === "function" ? b.apply(this, arguments) : b; return (0,victory_vendor_d3_interpolate__WEBPACK_IMPORTED_MODULE_2__.interpolate)(aval, bval)(t); }; }; }; /** * Interpolate to or from an object. This method is a modification of the object interpolator in * d3-interpolate https://github.com/d3/d3-interpolate/blob/master/src/object.js. This interpolator * differs in that it uses our custom interpolators when interpolating the value of each property in * an object. This allows the correct interpolation of nested objects, including styles * * @param {any} startValue - Start value. * @param {any} endValue - End value. * @returns {Function} An interpolation function. */ const interpolateObject = function (startValue, endValue) { const interpolateTypes = (x, y) => { if (x === y || !isInterpolatable(x) || !isInterpolatable(y)) { return interpolateImmediate(x, y); } if (typeof x === "function" || typeof y === "function") { return interpolateFunction(x, y); } if (typeof x === "object" && lodash_isPlainObject__WEBPACK_IMPORTED_MODULE_0___default()(x) || typeof y === "object" && lodash_isPlainObject__WEBPACK_IMPORTED_MODULE_0___default()(y)) { return interpolateObject(x, y); } return (0,victory_vendor_d3_interpolate__WEBPACK_IMPORTED_MODULE_2__.interpolate)(x, y); }; // When the value is an array, attempt to sort by "key" so that animating nodes may be identified // based on "key" instead of index const keyData = val => { return Array.isArray(val) ? lodash_orderBy__WEBPACK_IMPORTED_MODULE_1___default()(val, "key") : val; }; const i = {}; const c = {}; let a = startValue; let b = endValue; let k; if (a === null || typeof a !== "object") { a = {}; } if (b === null || typeof b !== "object") { b = {}; } for (k in b) { if (k in a) { i[k] = interpolateTypes(keyData(a[k]), keyData(b[k])); } else { c[k] = b[k]; } } return function (t) { for (k in i) { c[k] = i[k](t); } return c; }; }; const interpolateString = function (a, b) { const format = val => { return typeof val === "string" ? val.replace(/,/g, "") : val; }; return (0,victory_vendor_d3_interpolate__WEBPACK_IMPORTED_MODULE_2__.interpolate)(format(a), format(b)); }; /** * By default, the list of interpolators used by `d3.interpolate` has a few * downsides: * * - `null` values get turned into 0. * - `undefined`, `function`, and some other value types get turned into NaN. * - Boolean types get turned into numbers, which probably will be meaningless * to whatever is consuming them. * - It tries to interpolate between identical start and end values, doing * unnecessary calculations that sometimes result in floating point rounding * errors. * * If only the default interpolators are used, `VictoryAnimation` will happily * pass down NaN (and other bad) values as props to the wrapped component. * The component will then either use the incorrect values or complain that it * was passed props of the incorrect type. This custom interpolator is added * using the `d3.interpolators` API, and prevents such cases from happening * for most values. * * @param {any} a - Start value. * @param {any} b - End value. * @returns {Function|undefined} An interpolation function, if necessary. */ const victoryInterpolator = function (a, b) { // If the values are strictly equal, or either value is not interpolatable, // just use either the start value `a` or end value `b` at every step, as // there is no reasonable in-between value. if (a === b || !isInterpolatable(a) || !isInterpolatable(b)) { return interpolateImmediate(a, b); } if (typeof a === "function" || typeof b === "function") { return interpolateFunction(a, b); } if (lodash_isPlainObject__WEBPACK_IMPORTED_MODULE_0___default()(a) || lodash_isPlainObject__WEBPACK_IMPORTED_MODULE_0___default()(b)) { // @ts-expect-error These generics are tough, but they work :) return interpolateObject(a, b); } if (typeof a === "string" || typeof b === "string") { return interpolateString(a, b); } // @ts-expect-error These generics are tough, but they work :) return (0,victory_vendor_d3_interpolate__WEBPACK_IMPORTED_MODULE_2__.interpolate)(a, b); }; /***/ }), /***/ "./victory-animation/victory-animation.tsx": /*!*************************************************!*\ !*** ./victory-animation/victory-animation.tsx ***! \*************************************************/ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "VictoryAnimation": function() { return /* binding */ VictoryAnimation; } /* harmony export */ }); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react"); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var victory_vendor_d3_ease__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! victory-vendor/d3-ease */ "../../victory-vendor/es/d3-ease.js"); /* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./util */ "./victory-animation/util.ts"); /* harmony import */ var _victory_util_timer_context__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../victory-util/timer-context */ "./victory-util/timer-context.ts"); /** * Single animation object to interpolate */ /** * Animation styles to interpolate */ /** d3-ease changed the naming scheme for ease from "linear" -> "easeLinear" etc. */ const formatAnimationName = name => { const capitalizedName = name.charAt(0).toUpperCase() + name.slice(1); return `ease${capitalizedName}`; }; const DEFAULT_DURATION = 1000; const VictoryAnimation = _ref => { let { duration = DEFAULT_DURATION, easing = "quadInOut", delay = 0, data, children, onEnd } = _ref; const [state, setState] = react__WEBPACK_IMPORTED_MODULE_0___default().useState({ data: Array.isArray(data) ? data[0] : data, animationInfo: { progress: 0, animating: false } }); const timer = react__WEBPACK_IMPORTED_MODULE_0___default().useContext(_victory_util_timer_context__WEBPACK_IMPORTED_MODULE_2__["default"]).animationTimer; const queue = react__WEBPACK_IMPORTED_MODULE_0___default().useRef(Array.isArray(data) ? data.slice(1) : []); const interpolator = react__WEBPACK_IMPORTED_MODULE_0___default().useRef(null); const loopID = react__WEBPACK_IMPORTED_MODULE_0___default().useRef(undefined); const ease = victory_vendor_d3_ease__WEBPACK_IMPORTED_MODULE_1__[formatAnimationName(easing)]; react__WEBPACK_IMPORTED_MODULE_0___default().useEffect(() => { // Length check prevents us from triggering `onEnd` in `traverseQueue`. if (queue.current.length) { traverseQueue(); } // Clean up the animation loop return () => { if (loopID.current) { timer.unsubscribe(loopID.current); } else { timer.stop(); } }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); react__WEBPACK_IMPORTED_MODULE_0___default().useEffect(() => { // If the previous animation didn't finish, force it to complete before starting a new one if (interpolator.current && state.animationInfo && state.animationInfo.progress < 1) { setState({ data: interpolator.current(1), animationInfo: { progress: 1, animating: false, terminating: true } }); } else { // Cancel existing loop if it exists timer.unsubscribe(loopID.current); // Set the tween queue to the new data queue.current = Array.isArray(data) ? data : [data]; // Start traversing the tween queue traverseQueue(); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [data]); const traverseQueue = () => { if (queue.current.length) { const nextData = queue.current[0]; // Compare cached version to next props interpolator.current = (0,_util__WEBPACK_IMPORTED_MODULE_3__.victoryInterpolator)(state.data, nextData); // Reset step to zero if (delay) { setTimeout(() => { loopID.current = timer.subscribe(functionToBeRunEachFrame, duration); }, delay); } else { loopID.current = timer.subscribe(functionToBeRunEachFrame, duration); } } else if (onEnd) { onEnd(); } }; const functionToBeRunEachFrame = elapsed => { if (!interpolator.current) return; // Step can generate imprecise values, sometimes greater than 1 // if this happens set the state to 1 and return, cancelling the timer const step = duration ? elapsed / duration : 1; if (step >= 1) { setState({ data: interpolator.current(1), animationInfo: { progress: 1, animating: false, terminating: true } }); if (loopID.current) { timer.unsubscribe(loopID.current); } queue.current.shift(); traverseQueue(); return; } // If we're not at the end of the timer, set the state by passing // current step value that's transformed by the ease function to the // interpolator, which is cached for performance whenever props are received setState({ data: interpolator.current(ease(step)), animationInfo: { progress: step, animating: step < 1 } }); }; return children(state.data, state.animationInfo); }; /***/ }), /***/ "./victory-clip-container/victory-clip-container.tsx": /*!***********************************************************!*\ !*** ./victory-clip-container/victory-clip-container.tsx ***! \***********************************************************/ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "VictoryClipContainer": function() { return /* binding */ VictoryClipContainer; } /* harmony export */ }); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react"); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var lodash_defaults__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash/defaults */ "../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/defaults.js"); /* harmony import */ var lodash_defaults__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_defaults__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var lodash_uniqueId__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lodash/uniqueId */ "../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/uniqueId.js"); /* harmony import */ var lodash_uniqueId__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lodash_uniqueId__WEBPACK_IMPORTED_MODULE_2__); /* harmony import */ var _victory_util_helpers__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../victory-util/helpers */ "./victory-util/helpers.ts"); /* harmony import */ var _victory_util_user_props__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../victory-util/user-props */ "./victory-util/user-props.ts"); /* harmony import */ var _victory_primitives_clip_path__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../victory-primitives/clip-path */ "./victory-primitives/clip-path.tsx"); /* harmony import */ var _victory_primitives_circle__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../victory-primitives/circle */ "./victory-primitives/circle.tsx"); /* harmony import */ var _victory_primitives_rect__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../victory-primitives/rect */ "./victory-primitives/rect.tsx"); class VictoryClipContainer extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) { static displayName = "VictoryClipContainer"; static role = "container"; static defaultProps = { circleComponent: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_victory_primitives_circle__WEBPACK_IMPORTED_MODULE_3__.Circle, null), rectComponent: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_victory_primitives_rect__WEBPACK_IMPORTED_MODULE_4__.Rect, null), clipPathComponent: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_victory_primitives_clip_path__WEBPACK_IMPORTED_MODULE_5__.ClipPath, null), groupComponent: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("g", null) }; constructor(props) { super(props); this.state = { clipId: props?.clipId }; } // The clipId state is used to prevent hydration mismatches between the server and client (issue #2941). // A better alternative would be to utilize React 18's useId hook instead of uniqueId, which would avoid needing state for this purpose. // However, this component currently supports React 16 at the time of writing, so this workaround is necessary. componentDidMount() { if (!this.state.clipId) { this.setState({ clipId: lodash_uniqueId__WEBPACK_IMPORTED_MODULE_2___default()("victory-clip-") }); } } calculateAttributes(props) { const { polar, origin, clipWidth = 0, clipHeight = 0, translateX = 0, translateY = 0 } = props; const clipPadding = _victory_util_helpers__WEBPACK_IMPORTED_MODULE_6__.getPadding(props.clipPadding); const radius = props.radius || _victory_util_helpers__WEBPACK_IMPORTED_MODULE_6__.getRadius(props); return { x: (polar ? origin.x : translateX) - clipPadding.left, y: (polar ? origin.y : translateY) - clipPadding.top, width: Math.max((polar ? radius : clipWidth) + clipPadding.left + clipPadding.right, 0), height: Math.max((polar ? radius : clipHeight) + clipPadding.top + clipPadding.bottom, 0) }; } renderClippedGroup(props, clipId) { const userProps = _victory_util_user_props__WEBPACK_IMPORTED_MODULE_7__.getSafeUserProps(props); const { style, events, transform, children, className, groupComponent, tabIndex } = props; const clipComponent = this.renderClipComponent(props, clipId); const groupProps = Object.assign({ className, style, transform, key: `clipped-group-${clipId}`, clipPath: `url(#${clipId})` }, events); return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().cloneElement(groupComponent, { ...groupProps, tabIndex, ...userProps }, [clipComponent, ...react__WEBPACK_IMPORTED_MODULE_0___default().Children.toArray(children)]); } renderGroup(props) { const { style, events, transform, children, className, groupComponent, tabIndex } = props; return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().cloneElement(groupComponent, Object.assign({ className, style, transform, "aria-label": props["aria-label"], tabIndex }, events), children); } renderClipComponent(props, clipId) { const { polar, origin, clipWidth = 0, clipHeight = 0, translateX = 0, translateY = 0, circleComponent, rectComponent, clipPathComponent } = props; const { top, bottom, left, right } = _victory_util_helpers__WEBPACK_IMPORTED_MODULE_6__.getPadding(props.clipPadding); let child; if (polar) { const radius = props.radius || _victory_util_helpers__WEBPACK_IMPORTED_MODULE_6__.getRadius(props); const circleProps = { r: Math.max(radius + left + right, radius + top + bottom, 0), cx: origin.x - left, cy: origin.y - top }; child = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().cloneElement(circleComponent, circleProps); } else { const rectProps = { x: translateX - left, y: translateY - top, width: Math.max(clipWidth + left + right, 0), height: Math.max(clipHeight + top + bottom, 0) }; child = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().cloneElement(rectComponent, rectProps); } return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().cloneElement(clipPathComponent, Object.assign({ key: `clip-path-${clipId}` }, props, { clipId }), child); } getClipValue(props, axis) { const clipValues = { x: props.clipWidth, y: props.clipHeight }; if (clipValues[axis] !== undefined) { return clipValues[axis]; } const range = _victory_util_helpers__WEBPACK_IMPORTED_MODULE_6__.getRange(props, axis); return range ? Math.abs(range[0] - range[1]) || undefined : undefined; } getTranslateValue(props, axis) { const translateValues = { x: props.translateX, y: props.translateY }; if (translateValues[axis] !== undefined) { return translateValues[axis]; } const range = _victory_util_helpers__WEBPACK_IMPORTED_MODULE_6__.getRange(props, axis); return range ? Math.min(...range) : undefined; } render() { const clipHeight = this.getClipValue(this.props, "y"); const clipWidth = this.getClipValue(this.props, "x"); if (clipWidth === undefined || clipHeight === undefined) { return this.renderGroup(this.props); } const translateX = this.getTranslateValue(this.props, "x"); const translateY = this.getTranslateValue(this.props, "y"); const clipProps = lodash_defaults__WEBPACK_IMPORTED_MODULE_1___default()({}, this.props, { clipHeight, clipWidth, translateX, translateY }); return this.renderClippedGroup(clipProps, this.state.clipId); } } /***/ }), /***/ "./victory-container/victory-container.tsx": /*!*************************************************!*\ !*** ./victory-container/victory-container.tsx ***! \*************************************************/ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "VictoryContainer": function() { return /* binding */ VictoryContainer; }, /* harmony export */ "useVictoryContainer": function() { return /* binding */ useVictoryContainer; } /* harmony export */ }); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react"); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var lodash_uniqueId__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash/uniqueId */ "../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/uniqueId.js"); /* harmony import */ var lodash_uniqueId__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_uniqueId__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var _victory_portal_portal__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../victory-portal/portal */ "./victory-portal/portal.tsx"); /* harmony import */ var _victory_util_user_props__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../victory-util/user-props */ "./victory-util/user-props.ts"); /* harmony import */ var _victory_util__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../victory-util */ "./victory-util/merge-refs.ts"); /* harmony import */ var _victory_portal_portal_outlet__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../victory-portal/portal-outlet */ "./victory-portal/portal-outlet.tsx"); /* harmony import */ var _victory_portal_portal_context__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../victory-portal/portal-context */ "./victory-portal/portal-context.tsx"); function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } const defaultProps = { className: "VictoryContainer", portalComponent: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_victory_portal_portal__WEBPACK_IMPORTED_MODULE_2__.Portal, null), portalZIndex: 99, responsive: true, role: "img" }; function useVictoryContainer(initialProps) { const props = { ...defaultProps, ...initialProps }; const { title, desc, width, height, responsive } = props; const localContainerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null); // Generated ID stored in ref because it needs to persist across renders const generatedId = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(lodash_uniqueId__WEBPACK_IMPORTED_MODULE_1___default()("victory-container-")); const containerId = props.containerId ?? generatedId.current; const getIdForElement = elName => `${containerId}-${elName}`; const userProps = _victory_util_user_props__WEBPACK_IMPORTED_MODULE_3__.getSafeUserProps(props); const dimensions = responsive ? { width: "100%", height: "100%" } : { width, height }; const viewBox = responsive ? `0 0 ${width} ${height}` : undefined; const preserveAspectRatio = responsive ? props.preserveAspectRatio : undefined; const ariaLabelledBy = [title && getIdForElement("title"), props["aria-labelledby"]].filter(Boolean).join(" ") || undefined; const ariaDescribedBy = [desc && getIdForElement("desc"), props["aria-describedby"]].filter(Boolean).join(" ") || undefined; const titleId = getIdForElement("title"); const descId = getIdForElement("desc"); return { ...props, titleId, descId, dimensions, viewBox, preserveAspectRatio, ariaLabelledBy, ariaDescribedBy, userProps, localContainerRef }; } const VictoryContainer = initialProps => { const { role, title, desc, children, className, portalZIndex, portalComponent, width, height, style, tabIndex, responsive, events, ouiaId, ouiaSafe, ouiaType, dimensions, ariaDescribedBy, ariaLabelledBy, viewBox, preserveAspectRatio, userProps, titleId, descId, containerRef, localContainerRef } = useVictoryContainer(initialProps); react__WEBPACK_IMPORTED_MODULE_0___default().useEffect(() => { if (!events?.onWheel) return; const handleWheel = e => e.preventDefault(); const container = localContainerRef?.current; container?.addEventListener("wheel", handleWheel); return () => { container?.removeEventListener("wheel", handleWheel); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: className, style: { ...style, width: responsive ? style?.width : dimensions.width, height: responsive ? style?.height : dimensions.height, pointerEvents: style?.pointerEvents ?? "none", touchAction: style?.touchAction ?? "none", position: style?.position ?? "relative" }, "data-ouia-component-id": ouiaId, "data-ouia-component-type": ouiaType, "data-ouia-safe": ouiaSafe, ref: (0,_victory_util__WEBPACK_IMPORTED_MODULE_4__.mergeRefs)([localContainerRef, containerRef]) }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_victory_portal_portal_context__WEBPACK_IMPORTED_MODULE_5__.PortalProvider, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", _extends({ width: width, height: height, tabIndex: tabIndex, role: role, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, viewBox: viewBox, preserveAspectRatio: preserveAspectRatio, style: { ...dimensions, pointerEvents: "all" } }, userProps, events), title ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("title", { id: titleId }, title) : null, desc ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("desc", { id: descId }, desc) : null, children), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { style: { ...dimensions, zIndex: portalZIndex, position: "absolute", top: 0, left: 0 } }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_victory_portal_portal_outlet__WEBPACK_IMPORTED_MODULE_6__.PortalOutlet, { as: portalComponent, width: width, height: height, viewBox: viewBox, preserveAspectRatio: preserveAspectRatio, style: { ...dimensions, overflow: "visible" } })))); }; VictoryContainer.role = "container"; /***/ }), /***/ "./victory-label/victory-label.tsx": /*!*****************************************!*\ !*** ./victory-label/victory-label.tsx ***! \*****************************************/ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "VictoryLabel": function() { return /* binding */ VictoryLabel; } /* harmony export */ }); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react"); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var lodash_defaults__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash/defaults */ "../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/defaults.js"); /* harmony import */ var lodash_defaults__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_defaults__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var lodash_isEmpty__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lodash/isEmpty */ "../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/isEmpty.js"); /* harmony import */ var lodash_isEmpty__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lodash_isEmpty__WEBPACK_IMPORTED_MODULE_2__); /* harmony import */ var _victory_portal_victory_portal__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../victory-portal/victory-portal */ "./victory-portal/victory-portal.tsx"); /* harmony import */ var _victory_primitives_rect__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../victory-primitives/rect */ "./victory-primitives/rect.tsx"); /* harmony import */ var _victory_primitives_text__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../victory-primitives/text */ "./victory-primitives/text.tsx"); /* harmony import */ var _victory_primitives_tspan__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../victory-primitives/tspan */ "./victory-primitives/tspan.tsx"); /* harmony import */ var _victory_util_helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../victory-util/helpers */ "./victory-util/helpers.ts"); /* harmony import */ var _victory_util_label_helpers__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../victory-util/label-helpers */ "./victory-util/label-helpers.ts"); /* harmony import */ var _victory_util_log__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../victory-util/log */ "./victory-util/log.ts"); /* harmony import */ var _victory_util_style__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../victory-util/style */ "./victory-util/style.ts"); /* harmony import */ var _victory_util_textsize__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../victory-util/textsize */ "./victory-util/textsize.ts"); /* harmony import */ var _victory_util_user_props__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../victory-util/user-props */ "./victory-util/user-props.ts"); /* eslint no-magic-numbers: ["error", { "ignore": [-0.5, 0.5, 0, 1, 2] }]*/ const defaultStyles = { fill: "#252525", fontSize: 14, fontFamily: "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif", stroke: "transparent" }; const getPosition = (props, dimension) => { if (!props.datum) { return 0; } const scaledPoint = _victory_util_helpers__WEBPACK_IMPORTED_MODULE_3__.scalePoint(props, props.datum); return scaledPoint[dimension]; }; const getFontSize = style => { const baseSize = style && style.fontSize; if (typeof baseSize === "number") { return baseSize; } else if (baseSize === undefined || baseSize === null) { return defaultStyles.fontSize; } else if (typeof baseSize === "string") { const fontSize = Number(baseSize.replace("px", "")); if (!isNaN(fontSize)) { return fontSize; } _victory_util_log__WEBPACK_IMPORTED_MODULE_4__.warn("fontSize should be expressed as a number of pixels"); return defaultStyles.fontSize; } return defaultStyles.fontSize; }; const getSingleValue = function (prop, index) { if (index === void 0) { index = 0; } return Array.isArray(prop) ? prop[index] || prop[0] : prop; }; const shouldUseMultilineBackgrounds = props => { const { backgroundStyle, backgroundPadding } = props; return Array.isArray(backgroundStyle) && !lodash_isEmpty__WEBPACK_IMPORTED_MODULE_2___default()(backgroundStyle) || Array.isArray(backgroundPadding) && !lodash_isEmpty__WEBPACK_IMPORTED_MODULE_2___default()(backgroundPadding); }; const getStyles = (style, props) => { if (props.disableInlineStyles) { const baseStyles = _victory_util_helpers__WEBPACK_IMPORTED_MODULE_3__.evaluateStyle(style, props); return { // Font size is necessary to calculate the y position of the label fontSize: getFontSize(baseStyles) }; } const getSingleStyle = s => { const baseStyles = _victory_util_helpers__WEBPACK_IMPORTED_MODULE_3__.evaluateStyle(s ? lodash_defaults__WEBPACK_IMPORTED_MODULE_1___default()({}, s, defaultStyles) : defaultStyles, props); return Object.assign({}, baseStyles, { fontSize: getFontSize(baseStyles) }); }; return Array.isArray(style) && !lodash_isEmpty__WEBPACK_IMPORTED_MODULE_2___default()(style) ? style.map(s => getSingleStyle(s)) : getSingleStyle(style); }; const getBackgroundStyles = (style, props) => { if (!style) { return undefined; } return Array.isArray(style) && !lodash_isEmpty__WEBPACK_IMPORTED_MODULE_2___default()(style) ? style.map(s => _victory_util_helpers__WEBPACK_IMPORTED_MODULE_3__.evaluateStyle(s, props)) : _victory_util_helpers__WEBPACK_IMPORTED_MODULE_3__.evaluateStyle(style, props); }; const getBackgroundPadding = props => { if (props.backgroundPadding && Array.isArray(props.backgroundPadding)) { return props.backgroundPadding.map(backgroundPadding => { const padding = _victory_util_helpers__WEBPACK_IMPORTED_MODULE_3__.evaluateProp(backgroundPadding, props); return _victory_util_helpers__WEBPACK_IMPORTED_MODULE_3__.getPadding(padding); }); } const padding = _victory_util_helpers__WEBPACK_IMPORTED_MODULE_3__.evaluateProp(props.backgroundPadding, props); return _victory_util_helpers__WEBPACK_IMPORTED_MODULE_3__.getPadding(padding); }; const getLineHeight = props => { const lineHeight = _victory_util_helpers__WEBPACK_IMPORTED_MODULE_3__.evaluateProp(props.lineHeight, props); if (Array.isArray(lineHeight)) { return lodash_isEmpty__WEBPACK_IMPORTED_MODULE_2___default()(lineHeight) ? [1] : lineHeight; } return lineHeight; }; const getContent = (text, props) => { if (text === undefined || text === null) { return undefined; } if (Array.isArray(text)) { return text.map(line => _victory_util_helpers__WEBPACK_IMPORTED_MODULE_3__.evaluateProp(line, props)); } const child = _victory_util_helpers__WEBPACK_IMPORTED_MODULE_3__.evaluateProp(text, props); if (child === undefined || child === null) { return undefined; } return Array.isArray(child) ? child : `${child}`.split("\n"); }; const getDy = (props, verticalAnchor, lineHeight) => { const dy = props.dy ? _victory_util_helpers__WEBPACK_IMPORTED_MODULE_3__.evaluateProp(props.dy, props) : 0; const length = props.inline ? 1 : props.text.length; const capHeight = _victory_util_helpers__WEBPACK_IMPORTED_MODULE_3__.evaluateProp(props.capHeight, props); const anchor = verticalAnchor ? _victory_util_helpers__WEBPACK_IMPORTED_MODULE_3__.evaluateProp(verticalAnchor, props) : "middle"; const fontSizes = [...Array(length).keys()].map(i => getSingleValue(props.style, i).fontSize); const lineHeights = [...Array(length).keys()].map(i => getSingleValue(lineHeight, i)); if (anchor === "start") { return dy + (capHeight / 2 + lineHeights[0] / 2) * fontSizes[0]; } else if (props.inline) { return anchor === "end" ? dy + (capHeight / 2 - lineHeights[0] / 2) * fontSizes[0] : dy + capHeight / 2 * fontSizes[0]; } else if (length === 1) { return anchor === "end" ? dy + (capHeight / 2 + (0.5 - length) * lineHeights[0]) * fontSizes[0] : dy + (capHeight / 2 + (0.5 - length / 2) * lineHeights[0]) * fontSizes[0]; } const allHeights = [...Array(length).keys()].reduce((memo, i) => { return memo + (capHeight / 2 + (0.5 - length) * lineHeights[i]) * fontSizes[i] / length; }, 0); return anchor === "end" ? dy + allHeights : dy + allHeights / 2 + capHeight / 2 * lineHeights[length - 1] * fontSizes[length - 1]; }; const getTransform = (props, x, y) => { const { polar } = props; const style = getSingleValue(props.style); const defaultAngle = polar ? _victory_util_label_helpers__WEBPACK_IMPORTED_MODULE_5__.getPolarAngle(props) : 0; const baseAngle = style.angle === undefined ? _victory_util_helpers__WEBPACK_IMPORTED_MODULE_3__.evaluateProp(props.angle, props) : style.angle; const angle = baseAngle === undefined ? defaultAngle : baseAngle; const transform = props.transform || style.transform; const transformPart = transform && _victory_util_helpers__WEBPACK_IMPORTED_MODULE_3__.evaluateProp(transform, props); const rotatePart = angle && { rotate: [angle, x, y] }; return transformPart || angle ? _victory_util_style__WEBPACK_IMPORTED_MODULE_6__.toTransformString(transformPart, rotatePart) : undefined; }; const getXCoordinate = (calculatedProps, labelSizeWidth) => { const { direction, textAnchor, x, dx } = calculatedProps; if (direction === "rtl") { return x - labelSizeWidth; } switch (textAnchor) { case "middle": return Math.round(x - labelSizeWidth / 2); case "end": return Math.round(x - labelSizeWidth); default: // start return x + (dx || 0); } }; const getYCoordinate = (calculatedProps, textHeight) => { const { verticalAnchor, y, originalDy = 0 } = calculatedProps; const offset = y + originalDy; switch (verticalAnchor) { case "start": return Math.floor(offset); case "end": return Math.ceil(offset - textHeight); default: // middle return Math.floor(offset - textHeight / 2); } }; const getFullBackground = (calculatedProps, tspanValues) => { const { dx = 0, transform, backgroundComponent, backgroundStyle, inline, backgroundPadding, capHeight } = calculatedProps; const textSizes = tspanValues.map(tspan => { return tspan.textSize; }); const height = inline ? Math.max(...textSizes.map(size => size.height)) : textSizes.reduce((memo, size, i) => { const capHeightAdjustment = i ? 0 : capHeight / 2; return memo + size.height * (tspanValues[i].lineHeight - capHeightAdjustment); }, 0); const width = inline ? textSizes.reduce((memo, size, index) => { const offset = index ? dx : 0; return memo + size.width + offset; }, 0) : Math.max(...textSizes.map(size => size.width)); const xCoordinate = getXCoordinate(calculatedProps, width); const yCoordinate = getYCoordinate(calculatedProps, height); const backgroundProps = { key: "background", height: height + backgroundPadding.top + backgroundPadding.bottom, style: backgroundStyle, transform, width: width + backgroundPadding.left + backgroundPadding.right, x: inline ? xCoordinate - backgroundPadding.left : xCoordinate + dx - backgroundPadding.left, y: yCoordinate }; return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().cloneElement(backgroundComponent, lodash_defaults__WEBPACK_IMPORTED_MODULE_1___default()({}, backgroundComponent.props, backgroundProps)); }; const getInlineXOffset = (calculatedProps, textElements, index) => { const { textAnchor } = calculatedProps; const widths = textElements.map(t => t.widthWithPadding); const totalWidth = widths.reduce((memo, width) => memo + width, 0); const centerOffset = -totalWidth / 2; switch (textAnchor) { case "start": return widths.reduce((memo, width, i) => i < index ? memo + width : memo, 0); case "end": return widths.reduce((memo, width, i) => i > index ? memo - width : memo, 0); default: // middle return widths.reduce((memo, width, i) => { const offsetWidth = i < index ? width : 0; return i === index ? memo + width / 2 : memo + offsetWidth; }, centerOffset); } }; const getChildBackgrounds = (calculatedProps, tspanValues) => { const { dy, dx, transform, backgroundStyle, backgroundPadding, backgroundComponent, inline, y } = calculatedProps; const textElements = tspanValues.map((current, i) => { const previous = getSingleValue(tspanValues, i - 1); const labelSize = current.textSize; const totalLineHeight = current.fontSize * current.lineHeight; const textHeight = Math.ceil(totalLineHeight); const padding = getSingleValue(backgroundPadding, i); const prevPadding = getSingleValue(backgroundPadding, i - 1); const xOffset = inline ? dx || 0 : 0; const childDy = i && !inline ? previous.fontSize * previous.lineHeight + prevPadding.top + prevPadding.bottom : dy - totalLineHeight * 0.5 - (current.fontSize - current.capHeight); return { textHeight, labelSize, heightWithPadding: textHeight + padding.top + padding.bottom, widthWithPadding: labelSize.width + padding.left + padding.right + xOffset, y, fontSize: current.fontSize, dy: childDy }; }); return textElements.map((textElement, i) => { const xCoordinate = getXCoordinate(calculatedProps, textElement.labelSize.width); const yCoordinate = textElements.slice(0, i + 1).reduce((prev, curr) => { return prev + curr.dy; }, y); const padding = getSingleValue(backgroundPadding, i); const height = textElement.heightWithPadding; const xCoord = inline ? getInlineXOffset(calculatedProps, textElements, i) + xCoordinate - padding.left : xCoordinate; const yCoord = inline ? getYCoordinate(calculatedProps, height) - padding.top : yCoordinate; const backgroundProps = { key: `tspan-background-${i}`, height, style: getSingleValue(backgroundStyle, i), width: textElement.widthWithPadding, transform, x: xCoord - padding.left, y: yCoord }; return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().cloneElement(backgroundComponent, lodash_defaults__WEBPACK_IMPORTED_MODULE_1___default()({}, backgroundComponent.props, backgroundProps)); }); }; const getBackgroundElement = (calculatedProps, tspanValues) => { return shouldUseMultilineBackgrounds(calculatedProps) ? getChildBackgrounds(calculatedProps, tspanValues) : getFullBackground(calculatedProps, tspanValues); }; const calculateSpanDy = (tspanValues, i, calculatedProps) => { const current = getSingleValue(tspanValues, i); const previous = getSingleValue(tspanValues, i - 1); const previousHeight = previous.fontSize * previous.lineHeight; const currentHeight = current.fontSize * current.lineHeight; const previousCaps = previous.fontSize - previous.capHeight; const currentCaps = current.fontSize - current.capHeight; const textHeight = previousHeight - previous.fontSize / 2 + current.fontSize / 2 - previousHeight / 2 + currentHeight / 2 - currentCaps / 2 + previousCaps / 2; return shouldUseMultilineBackgrounds(calculatedProps) ? textHeight + current.backgroundPadding.top + previous.backgroundPadding.bottom : textHeight; }; const getTSpanDy = (tspanValues, calculatedProps, i) => { const { inline } = calculatedProps; const current = getSingleValue(tspanValues, i); if (i && !inline) { return calculateSpanDy(tspanValues, i, calculatedProps); } else if (inline) { return i === 0 ? current.backgroundPadding.top : undefined; } return current.backgroundPadding.top; }; const evaluateProps = props => { /* Potential evaluated props are 1) text 2) style 3) everything else */ const text = getContent(props.text, props); const style = getStyles(props.style, Object.assign({}, props, { text })); const backgroundStyle = getBackgroundStyles(props.backgroundStyle, Object.assign({}, props, { text, style })); const backgroundPadding = getBackgroundPadding(Object.assign({}, props, { text, style, backgroundStyle })); const id = _victory_util_helpers__WEBPACK_IMPORTED_MODULE_3__.evaluateProp(props.id, props); return Object.assign({}, props, { backgroundStyle, backgroundPadding, style, text, id }); }; const getCalculatedProps = props => { const ariaLabel = _victory_util_helpers__WEBPACK_IMPORTED_MODULE_3__.evaluateProp(props.ariaLabel, props); const style = getSingleValue(props.style); const lineHeight = getLineHeight(props); const direction = props.direction ? _victory_util_helpers__WEBPACK