Add settings page for managing forecasting API key and URL via UI

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-07-20 14:37:36 +00:00
parent cae411eae7
commit 1c411e402e
19809 changed files with 1962608 additions and 97 deletions

View file

@ -0,0 +1,116 @@
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
import * as React from 'react';
import { useCallback, useState } from 'react';
import { JavascriptAnimate } from './JavascriptAnimate';
import { useAnimationId } from '../util/useAnimationId';
import { matchAnimationItems, matchByIndex } from './matchBy';
import { useAnimationStartSnapshot } from './useAnimationStartSnapshot';
/**
* Hook that tracks animation state and provides callbacks for animation start/end.
*
* @param onAnimationStart optional callback to call when animation starts
* @param onAnimationEnd optional callback to call when animation ends
*/
export function useAnimationCallbacks(onAnimationStart, onAnimationEnd) {
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isAnimating = _useState2[0],
setIsAnimating = _useState2[1];
var handleAnimationStart = useCallback(() => {
if (typeof onAnimationStart === 'function') {
onAnimationStart();
}
setIsAnimating(true);
}, [onAnimationStart]);
var handleAnimationEnd = useCallback(() => {
if (typeof onAnimationEnd === 'function') {
onAnimationEnd();
}
setIsAnimating(false);
}, [onAnimationEnd]);
return {
isAnimating,
handleAnimationStart,
handleAnimationEnd
};
}
/**
* A function that interpolates animation items at a given time.
* This function receives an array of changes, and must "unwrap" them
* and interpolate appropriate values and return the result which Recharts will then render.
*
* @see {@link https://recharts.github.io/en-US/guide/animations/ Animations guide}
*
* @param items The tagged animation items describing what changed, or `null` on the very first render
* (entrance animation). Each item is self-describing:
* - `{ status: 'matched', prev, next }` — interpolate between `prev` and `next`
* - `{ status: 'added', next }` — animate in from a computed entry position
* - `{ status: 'removed', prev }` — animate out to a computed exit position
*
* At `animationElapsedTime = 1`, removed items should be excluded from the result.
*
* @param animationElapsedTime A normalized time value (0 = start, 1 = end)
* @param layout of the chart, useful for deciding the direction of animation
* @returns The interpolated items at time animationElapsedTime
*
* @since 3.9
*/
/**
* A reusable animation wrapper for array-based chart data.
*
* Encapsulates the common animation pattern shared by Bar, Scatter, Funnel, Pie,
* Radar, RadialBar, Area, and Line:
* 1. Track previous items in a ref
* 2. Wrap in JavascriptAnimate
* 3. Update ref when animationElapsedTime > 0
*
* @since 3.9
*/
export function AnimatedItems(props) {
var _animationStartItems$;
var animationInput = props.animationInput,
animationIdPrefix = props.animationIdPrefix,
items = props.items,
previousItemsRef = props.previousItemsRef,
isAnimationActive = props.isAnimationActive,
animationBegin = props.animationBegin,
animationDuration = props.animationDuration,
animationEasing = props.animationEasing,
onAnimationStart = props.onAnimationStart,
onAnimationEnd = props.onAnimationEnd,
animationInterpolateFn = props.animationInterpolateFn,
animationMatchBy = props.animationMatchBy,
shouldUpdatePreviousRef = props.shouldUpdatePreviousRef,
children = props.children,
layout = props.layout;
var animationId = useAnimationId(animationInput, animationIdPrefix);
var animationStartItems = useAnimationStartSnapshot(animationId, previousItemsRef);
var rawPrevItems = (_animationStartItems$ = animationStartItems.startValue) !== null && _animationStartItems$ !== void 0 ? _animationStartItems$ : null;
var animationItems = matchAnimationItems(rawPrevItems, items, animationMatchBy !== null && animationMatchBy !== void 0 ? animationMatchBy : matchByIndex);
return /*#__PURE__*/React.createElement(JavascriptAnimate, {
animationId: animationId,
begin: animationBegin,
duration: animationDuration,
isActive: isAnimationActive,
easing: animationEasing,
onAnimationEnd: onAnimationEnd,
onAnimationStart: onAnimationStart,
key: animationId
}, animationElapsedTime => {
var isEntrance = rawPrevItems == null;
var stepData = items == null ? items : animationInterpolateFn(animationItems, animationElapsedTime, layout);
var canUpdate = shouldUpdatePreviousRef ? shouldUpdatePreviousRef(animationElapsedTime) : animationElapsedTime > 0;
animationStartItems.syncStepValue(stepData, animationElapsedTime, canUpdate);
if (stepData == null) {
return null;
}
return children(stepData, animationElapsedTime, isEntrance);
});
}

View file

@ -0,0 +1 @@
export {};

View file

@ -0,0 +1,29 @@
/**
* JavaScript animations require trigger and repaint as soon as possible,
* so this class uses the timeoutController to trigger updates as quickly as the controller allows.
*
* JavaScript animation progress is represented as a stream of values. The exact type depends on the animationHandle type.
* Each individual consumer is then responsible for mapping those values onto a React component.
*/
export var animationControllerImpl = (timeoutController, animationHandle, listener) => {
var cancellable;
var nextUpdate = now => {
var timeRemaining = animationHandle.tick(now);
if (animationHandle.getState() === 'active') {
listener(animationHandle.getInterpolated());
if (animationHandle.getProgress() === 1) {
animationHandle.complete();
cancellable = undefined;
return;
}
cancellable = timeoutController.setTimeout(nextUpdate, timeRemaining);
return;
}
cancellable = timeoutController.setTimeout(nextUpdate, timeRemaining);
};
cancellable = timeoutController.setTimeout(nextUpdate, 0);
return () => {
var _cancellable;
return (_cancellable = cancellable) === null || _cancellable === void 0 ? void 0 : _cancellable();
};
};

View file

@ -0,0 +1,266 @@
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
// eslint-disable-next-line max-classes-per-file
import { interpolate } from '../util/DataUtils';
var INIT = 'init';
var PENDING = 'pending';
var ACTIVE = 'active';
var COMPLETED = 'completed';
function duration(time) {
return Math.max(0, time);
}
class RechartsAnimation {
/**
* Returns the absolute time after the animationBegin delay has been completed,
* and when the animationDuration started ticking.
*/
getAnimationStartedTime() {
return this.animationStartedTime;
}
/**
* Returns the absolute time of when the animation began - now it will wait for {animationBegin} ms before the transition starts
*/
getBeginStartedTime() {
return this.beginStartedTime;
}
constructor(param) {
var _param$onAnimationSta;
_defineProperty(this, "state", INIT);
this.animationId = param.animationId;
this.onAnimationEnd = param.onAnimationEnd;
this.animationDuration = duration(param.animationDuration);
this.animationBegin = duration(param.animationBegin);
this.progress = 0;
this.from = param.from;
this.to = param.to;
this.easing = param.easing;
// Mimic what the previous animationManager was doing - call onAnimationStart immediately and synchronously
(_param$onAnimationSta = param.onAnimationStart) === null || _param$onAnimationSta === void 0 || _param$onAnimationSta.call(param);
}
/**
* Returns the state machine current state
* - `init`: animation had just been created. It immediately calls `onAnimationStart`
* - `pending`: animation is now paused for `animationBegin` milliseconds until the transition begins
* - `active`: animation is transitioning items on screen
* - `completed`: animation has completed its transition and executed `onAnimationEnd`.
* This state is final and the animation is no longer allowed to transition to other states.
*/
getState() {
return this.state;
}
/**
* Returns the easing input or function
*/
getEasing() {
return this.easing;
}
/**
* Returns the configuration - the duration of the transition.
* Does not change in time, does not change when state changes, this is a static value.
*/
getAnimationDuration() {
return this.animationDuration;
}
/**
* Sets the current time of the animation. The animation sets its internal state and progress accordingly.
* This is current, absolute time; not additive!
* This allows you to essentially "travel back in time" based on the value you pass in here.
*
* Returns the (relative) time remaining until the current activity is over.
* Meaning: if the state is in a middle of a delay, returns the time left until the delay is finished.
* If the state is in the middle of a transition, returns time left until that transition is complete.
* This is useful because it's the same number you can take and put into setTimeout(fn, X)
* as that's how much time we need to wait until the next state transition happens.
*/
tick(now) {
if (this.getState() === INIT) {
this.state = PENDING;
this.beginStartedTime = now;
return this.animationBegin;
}
if (this.getState() === PENDING) {
if (this.beginStartedTime == null) {
throw new Error();
}
var _timeElapsed = now - this.beginStartedTime;
if (_timeElapsed >= this.animationBegin) {
this.state = ACTIVE;
this.animationStartedTime = now;
// The state flipped just now so the elapsed time is zero
return this.nextAnimationUpdate(0);
}
return duration(this.animationBegin - _timeElapsed);
}
if (this.getState() === ACTIVE) {
if (this.animationStartedTime == null) {
throw new Error();
}
var _timeElapsed2 = now - this.animationStartedTime;
this.setProgress(_timeElapsed2 / this.animationDuration);
return this.nextAnimationUpdate(_timeElapsed2);
}
// state === COMPLETED, nothing interesting is going to happen
return 0;
}
setProgress(newProgress) {
this.progress = Math.min(1, Math.max(0, newProgress));
}
/**
* Returns an abstract "progress" which is number between 0 and 1 which shows the distance of transition.
* This progress depends on the animation state:
* - `init`: 0
* - `pending`: 0
* - `active`: transitioning between [0, 1] based on the time elapsed
* - `completed`: 1
*
* The progress is hard-capped to be between 0 and 1 (inclusive) to avoid overshooting caused by coarse timers.
* For this reason, the easing function must be applied _after_ this animation state,
* so that one has a chance to construct dynamic "overshoot" animations.
*
* The progress is linear with time.
* If you wish for easing, use `getInterpolated()` instead.
*/
getProgress() {
return this.progress;
}
/**
* Completes the animation. Completed animation:
* - cannot be manipulated anymore
* - its progress is set to 1
* - tick function doesn't do anything
* - getState() always returns 'completed'
*/
complete() {
this.progress = 1;
if (this.state === 'active') {
var _this$onAnimationEnd;
// Do not call callbacks if the animation was interrupted before it even started!
(_this$onAnimationEnd = this.onAnimationEnd) === null || _this$onAnimationEnd === void 0 || _this$onAnimationEnd.call(this);
}
this.state = COMPLETED;
}
/**
* Returns the starting value of the animation.
* Does not include progress, easing, interpolation, none of that - just the static starting value
*/
getFrom() {
return this.from;
}
/**
* Returns the end value of the animation.
* Does not include progress, easing, interpolation, none of that - just the static end value
*/
getTo() {
return this.to;
}
/**
* Unique identifier of an animation
*/
getAnimationId() {
return this.animationId;
}
/**
* Returns the configuration - the duration of delay in between animation initialization, and transition.
* Does not change in time, does not change when state changes, this is a static value.
*/
getAnimationBegin() {
return this.animationBegin;
}
/**
* Returns value of the transition at the current time.
* The exact details differ based on the animation type
*/
/**
* Returns the duration of time of when the controller should ask for the next update
*/
}
/**
* Animation handle representing a Javascript-based animation.
* This animation requires one render cycle for each frame, and it calls setTimeout as quickly as possible
*
* @since 3.9
*/
export class JavascriptAnimation extends RechartsAnimation {
// eslint-disable-next-line class-methods-use-this
nextAnimationUpdate() {
/*
* JavaScript-based animations have to update as soon as possible,
* so we return 0 here to indicate that the next update should be scheduled immediately
* and it should trigger render on every occasion.
*/
return 0;
}
/**
* Returns value of the animation after its easing function had been applied.
* This value, unlike getProgress(), can escape the [0..1] range
* because this is entirely within the easing function control. Spring typically does this.
*/
getInterpolated() {
return this.easing(interpolate(this.getFrom(), this.getTo(), this.getProgress()));
}
}
/**
* Animation handle representing a CSS transition.
* This animation requires only one render, and the actual transition is then handled by the browser.
*
* @since 3.9
*/
export class CSSTransitionAnimation extends RechartsAnimation {
nextAnimationUpdate(timeElapsed) {
/**
* CSS transitions do not need DOM updates past the initial render
* so here we just instruct the controller to wait until the animation duration is over.
*/
return duration(this.animationDuration - timeElapsed);
}
/**
* Returns the final value of the animation (the `to`).
*
* CSS transitions leave both interpolation and easing to the browser,
* so all we need to do here is return the final state
* and let browser handle the rest.
*/
getInterpolated() {
return this.getTo();
}
}
/**
* Recharts animation state machine.
*
* Possible transitions are:
* - `init`: starting state - `onAnimationStart` executes
* - `init` to `pending` - `animationBegin` duration begins
* - `pending` to `active` - `animationDuration` duration begins, timer ticks decide the progress
* - `active` to `completed` - `onAnimationEnd` executes
*
* The state always moves in this direction, cannot move backwards.
*
* The animation queue is static and consists of four elements:
* - `onAnimationStart`: function that is called when the animation is created
* - `animationBegin`: delay between `onAnimationStart` and the transition
* - the transition itself, takes `animationDuration` ms to finish
* - `onAnimationEnd`: function that is called when the animation is moving from `active` to `completed`
*
* @see {@link https://recharts.github.io/en-US/guide/animations/ Animation guide}
*
* @since 3.9
*/

View file

@ -0,0 +1,100 @@
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
import { useCallback, useEffect, useRef, useState } from 'react';
import { noop } from '../util/DataUtils';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { useAnimationController } from './useAnimationController';
import { getTransitionVal } from './util';
import { Global } from '../util/Global';
import { usePrefersReducedMotion } from '../util/usePrefersReducedMotion';
import { CSSTransitionAnimation } from './AnimationHandle';
import { RequestAnimationFrameTimeoutController } from './timeoutController';
var defaultProps = {
begin: 0,
duration: 1000,
easing: 'ease',
isActive: true,
canBegin: true,
onAnimationEnd: () => {},
onAnimationStart: () => {}
};
export function extractCssEasing(easingInput) {
if (easingInput === 'spring' || typeof easingInput !== 'string') {
return undefined;
}
return easingInput;
}
export function CSSTransitionAnimate(outsideProps) {
var props = resolveDefaultProps(outsideProps, defaultProps);
var animationId = props.animationId,
from = props.from,
to = props.to,
attributeName = props.attributeName,
isActiveProp = props.isActive,
canBegin = props.canBegin,
duration = props.duration,
easing = props.easing,
begin = props.begin,
onAnimationEnd = props.onAnimationEnd,
onAnimationStartFromProps = props.onAnimationStart,
children = props.children;
var prefersReducedMotion = usePrefersReducedMotion();
var isActive = isActiveProp === 'auto' ? !Global.isSsr && !prefersReducedMotion : isActiveProp;
var animationController = useAnimationController(props.animationController);
var _useState = useState(() => {
if (!isActive) {
return to;
}
return from;
}),
_useState2 = _slicedToArray(_useState, 2),
style = _useState2[0],
setStyle = _useState2[1];
var initialized = useRef(false);
var onAnimationStart = useCallback(() => {
setStyle(from);
onAnimationStartFromProps();
}, [from, onAnimationStartFromProps]);
useEffect(() => {
if (!isActive || !canBegin) {
return noop;
}
initialized.current = true;
var timeoutController = new RequestAnimationFrameTimeoutController();
var animation = new CSSTransitionAnimation({
animationId: animationId + attributeName,
easing,
animationDuration: duration,
animationBegin: begin,
onAnimationStart,
onAnimationEnd,
from,
to
});
return animationController(timeoutController, animation, setStyle);
}, [isActive, canBegin, duration, easing, begin, onAnimationStart, onAnimationEnd, animationController, to, from, animationId, attributeName]);
if (!isActive) {
return children({
[attributeName]: to
});
}
if (!canBegin) {
return children({
[attributeName]: from
});
}
if (initialized.current) {
var transition = getTransitionVal([attributeName], duration, easing);
return children({
transition,
[attributeName]: style
});
}
return children({
[attributeName]: from
});
}

View file

@ -0,0 +1,69 @@
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
import { useEffect, useState } from 'react';
import { noop } from '../util/DataUtils';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { createEasingFunction } from './easing';
import { useAnimationController } from './useAnimationController';
import { Global } from '../util/Global';
import { usePrefersReducedMotion } from '../util/usePrefersReducedMotion';
import { JavascriptAnimation } from './AnimationHandle';
import { RequestAnimationFrameTimeoutController } from './timeoutController';
var defaultJavascriptAnimateProps = {
begin: 0,
duration: 1000,
easing: 'ease',
isActive: true,
canBegin: true,
onAnimationEnd: () => {},
onAnimationStart: () => {}
};
var from = 0;
var to = 1;
export function JavascriptAnimate(outsideProps) {
var props = resolveDefaultProps(outsideProps, defaultJavascriptAnimateProps);
var animationId = props.animationId,
isActiveProp = props.isActive,
canBegin = props.canBegin,
duration = props.duration,
easing = props.easing,
begin = props.begin,
onAnimationEnd = props.onAnimationEnd,
onAnimationStart = props.onAnimationStart,
children = props.children;
var prefersReducedMotion = usePrefersReducedMotion();
var isActive = isActiveProp === 'auto' ? !Global.isSsr && !prefersReducedMotion : isActiveProp;
var animationController = useAnimationController(props.animationController);
var _useState = useState(isActive ? from : to),
_useState2 = _slicedToArray(_useState, 2),
style = _useState2[0],
setStyle = _useState2[1];
useEffect(() => {
if (!isActive) {
setStyle(to);
}
}, [isActive]);
useEffect(() => {
var easingFunction = createEasingFunction(easing);
if (!isActive || !canBegin || easingFunction == null) {
return noop;
}
var timeoutController = new RequestAnimationFrameTimeoutController();
var animation = new JavascriptAnimation({
animationId,
easing: easingFunction,
animationDuration: duration,
animationBegin: begin,
onAnimationStart,
onAnimationEnd,
from,
to
});
return animationController(timeoutController, animation, setStyle);
}, [animationController, animationId, isActive, canBegin, duration, easing, begin, onAnimationStart, onAnimationEnd]);
return children(Number(style));
}

176
frontend/node_modules/recharts/es6/animation/easing.js generated vendored Normal file
View file

@ -0,0 +1,176 @@
export var ACCURACY = 1e-4;
var cubicBezierFactor = (c1, c2) => [0, 3 * c1, 3 * c2 - 6 * c1, 3 * c1 - 3 * c2 + 1];
var evaluatePolynomial = (params, animationElapsedTime) => params.map((param, i) => param * animationElapsedTime ** i).reduce((pre, curr) => pre + curr);
var cubicBezier = (c1, c2) => animationElapsedTime => {
var params = cubicBezierFactor(c1, c2);
return evaluatePolynomial(params, animationElapsedTime);
};
var derivativeCubicBezier = (c1, c2) => animationElapsedTime => {
var params = cubicBezierFactor(c1, c2);
var newParams = [...params.map((param, i) => param * i).slice(1), 0];
return evaluatePolynomial(newParams, animationElapsedTime);
};
var parseCubicBezier = easing => {
var _easingParts$;
var easingParts = easing.split('(');
if (easingParts.length !== 2 || easingParts[0] !== 'cubic-bezier') {
return null;
}
var numbers = (_easingParts$ = easingParts[1]) === null || _easingParts$ === void 0 || (_easingParts$ = _easingParts$.split(')')[0]) === null || _easingParts$ === void 0 ? void 0 : _easingParts$.split(',');
if (numbers == null || numbers.length !== 4) {
return null;
}
var coords = numbers.map(x => parseFloat(x));
return [coords[0], coords[1], coords[2], coords[3]];
};
var getBezierCoordinates = function getBezierCoordinates() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
if (args.length === 1) {
switch (args[0]) {
case 'linear':
return [0.0, 0.0, 1.0, 1.0];
case 'ease':
return [0.25, 0.1, 0.25, 1.0];
case 'ease-in':
return [0.42, 0.0, 1.0, 1.0];
case 'ease-out':
return [0.42, 0.0, 0.58, 1.0];
case 'ease-in-out':
return [0.0, 0.0, 0.58, 1.0];
default:
{
var easing = parseCubicBezier(args[0]);
if (easing) {
return easing;
}
}
}
}
if (args.length === 4) {
return args;
}
// Fallback for invalid inputs. The previous implementation was buggy and would lead to NaN.
// Returning linear easing is a safe default.
return [0.0, 0.0, 1.0, 1.0];
};
var createBezierEasing = (x1, y1, x2, y2) => {
var curveX = cubicBezier(x1, x2);
var curveY = cubicBezier(y1, y2);
var derCurveX = derivativeCubicBezier(x1, x2);
var rangeValue = value => {
if (value > 1) {
return 1;
}
if (value < 0) {
return 0;
}
return value;
};
var bezier = _animationElapsedTime => {
var animationElapsedTime = _animationElapsedTime > 1 ? 1 : _animationElapsedTime;
var x = animationElapsedTime;
for (var i = 0; i < 8; ++i) {
var evalT = curveX(x) - animationElapsedTime;
var derVal = derCurveX(x);
if (Math.abs(evalT - animationElapsedTime) < ACCURACY || derVal < ACCURACY) {
return curveY(x);
}
x = rangeValue(x - evalT / derVal);
}
return curveY(x);
};
bezier.isStepper = false;
return bezier;
};
// calculate cubic-bezier using Newton's method
export var configBezier = function configBezier() {
return createBezierEasing(...getBezierCoordinates(...arguments));
};
/**
* Creates a performance-optimized, progress-based spring easing function.
* It pre-calculates ("bakes") spring physics frames upfront based on a fixed duration,
* then returns a pure, lightweight function mapping progress (0 to 1) to the animated position.
* This approach is ideal for low-power devices because it removes heavy physics math from the frame loop.
*/
export var createSpringEasing = function createSpringEasing() {
var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _config$stiff = config.stiff,
stiff = _config$stiff === void 0 ? 100 : _config$stiff,
_config$damping = config.damping,
damping = _config$damping === void 0 ? 8 : _config$damping,
_config$dt = config.dt,
dt = _config$dt === void 0 ? 16.67 : _config$dt;
var destX = 1;
var positions = [0];
var currX = 0;
var currV = 0;
// Safety valve to prevent accidental infinite loops if physics config is extreme
var maxIterations = 10000;
var iterations = 0;
// 1. Run the simulation until the spring completely stops moving
while (iterations < maxIterations) {
var FSpring = -(currX - destX) * stiff;
var FDamping = currV * damping;
currV += (FSpring - FDamping) * dt / 1000;
currX += currV * dt / 1000;
positions.push(currX);
// Stop only when position is essentially at 1.0 AND bounce velocity has died down
if (Math.abs(currX - destX) < ACCURACY && Math.abs(currV) < ACCURACY) {
break;
}
iterations++;
}
// Force the absolute final element to be exactly 1.0 for a perfect finish
positions[positions.length - 1] = destX;
var maxIndex = positions.length - 1;
// 2. The ultra-smooth runtime function mapping your 0..1 progress
return t => {
var _positions$index, _positions, _positions$index2;
if (t <= 0) return 0;
if (t >= 1) return destX;
// Scale t (0..1) proportionally across our entire pre-calculated array
var exactFrame = t * maxIndex;
var index = Math.floor(exactFrame);
var fraction = exactFrame - index;
// Blend between the two closest frames
return ((_positions$index = positions[index]) !== null && _positions$index !== void 0 ? _positions$index : 0) + (((_positions = positions[index + 1]) !== null && _positions !== void 0 ? _positions : 0) - ((_positions$index2 = positions[index]) !== null && _positions$index2 !== void 0 ? _positions$index2 : 0)) * fraction;
};
};
/**
* @inline
*/
export var createEasingFunction = easing => {
if (typeof easing === 'string') {
switch (easing) {
case 'ease':
case 'ease-in-out':
case 'ease-out':
case 'ease-in':
case 'linear':
return configBezier(easing);
case 'spring':
return createSpringEasing();
default:
if (easing.split('(')[0] === 'cubic-bezier') {
return configBezier(easing);
}
}
}
if (typeof easing === 'function') {
return easing;
}
return null;
};

220
frontend/node_modules/recharts/es6/animation/matchBy.js generated vendored Normal file
View file

@ -0,0 +1,220 @@
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
import { getValueByDataKey } from '../util/ChartUtils';
/**
* A tagged union describing the status of an item during animation.
*
* - `matched`: item exists in both previous and next data — interpolate between positions
* - `added`: item is new (no previous position) — animate in
* - `removed`: item was in previous data but not in next — animate out
*
* @since 3.9
* @see {@link https://recharts.github.io/en-US/guide/animations Animation guide}
*/
/**
* A function that extracts a key from an animation item for matching purposes.
* Items in the previous and next arrays that return the same key are considered
* the same logical item and will animate between their positions.
*
* @param item The chart item (e.g., a bar rectangle, a line point, a pie sector)
* @param index The index of the item in the array
* @returns A string or number key, or null if the item cannot be matched
*
* @since 3.9
* @see {@link https://recharts.github.io/en-US/guide/animations Animation guide}
*/
/**
* The union of all accepted `animationMatchBy` prop values:
* a built-in sentinel string, or a custom matching function.
*
* @since 3.9
* @see {@link https://recharts.github.io/en-US/guide/animations Animation guide}
*/
/**
* Match animation items by their array index (the default behavior).
*
* Previous items are paired with next items based on their position
* in the array, with proportional stretching when array lengths differ.
* When going from 5 to 15 items, each old point "covers" approximately 3 new points;
* when shrinking, some old points are skipped.
*
* @example
* import { matchByIndex } from 'recharts';
* <Line animationMatchBy={matchByIndex} />
*
* @since 3.9
* @see {@link https://recharts.github.io/en-US/guide/animations Animation guide}
*/
export var matchByIndex = 'index';
/**
* Match animation items sequentially: previous item 0 pairs with next item 0,
* previous item 1 pairs with next item 1, and so on. When the new array is longer,
* the extra items have no match and animate in from their default position.
* When the new array is shorter, the ancient items are simply dropped.
*
* This is useful when new data is appended at the end of the array, and you want
* existing points to stay in place while new points animate in.
*
* @example
* import { matchAppend } from 'recharts';
* <Line animationMatchBy={matchAppend} />
*
* @since 3.9
* @see {@link https://recharts.github.io/en-US/guide/animations Animation guide}
*/
export var matchAppend = 'append';
/**
* Create a matching function that pairs items by a data key from their payload.
*
* Useful for time-series or streaming charts where new data points are added
* to one end and old points are removed from the other. This ensures existing
* points animate smoothly to their new positions instead of shifting by index.
*
* @param dataKey The key to look up in each item's payload (e.g., 'timestamp', 'date', 'id')
* @returns An AnimationMatchBy function that can be passed to the animationMatchBy prop
*
* @example
* import { matchByDataKey } from 'recharts';
* <Line animationMatchBy={matchByDataKey('timestamp')} />
* <Bar animationMatchBy={matchByDataKey('name')} />
* <Pie animationMatchBy={matchByDataKey('id')} />
*
* @since 3.9
* @see {@link https://recharts.github.io/en-US/guide/animations Animation guide}
*/
export function matchByDataKey(dataKey) {
return item => {
if (item.payload == null || typeof item.payload !== 'object') return null;
var value = getValueByDataKey(item.payload, dataKey);
if (value == null) return null;
if (typeof value === 'string' || typeof value === 'number') return value;
return JSON.stringify(value);
};
}
function tagAlignedItems(alignedPrevItems, nextItems) {
var removedPrevItems = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
var tagged = [];
/*
* We put removed points at the start because we assume that a typical chart animates right-to-left
* and the removed points will disappear from the left edge and outside the plot area.
* If you chart behaves differently you may want to customize your matching function.
*/
for (var prev of removedPrevItems) {
tagged.push({
status: 'removed',
prev
});
}
for (var i = 0; i < nextItems.length; i++) {
// This function intentionally pairs by array index. The strategy-specific functions above are
// responsible for producing an alignedPrevItems array whose indices already correspond to nextItems.
var _prev = alignedPrevItems[i];
var next = nextItems[i];
if (_prev != null) {
tagged.push({
status: 'matched',
prev: _prev,
next
});
} else {
tagged.push({
status: 'added',
next
});
}
}
return tagged;
}
function matchByIndexImpl(prevItems, nextItems) {
var factor = prevItems.length / nextItems.length;
var alignedPrevItems = nextItems.map((_, i) => prevItems[Math.floor(i * factor)]);
return tagAlignedItems(alignedPrevItems, nextItems);
}
function matchAppendImpl(prevItems, nextItems) {
var alignedPrevItems = nextItems.map((_, i) => prevItems[i]);
return tagAlignedItems(alignedPrevItems, nextItems);
}
function buildPrevKeyMap(prevItems, matchBy) {
var prevMap = new Map();
for (var i = 0; i < prevItems.length; i++) {
var _item = prevItems[i];
if (_item == null) continue;
var key = matchBy(_item, i);
if (key != null && !prevMap.has(key)) {
prevMap.set(key, _item);
}
}
return prevMap;
}
/**
* Match previous items to next items by key, and include removed items explicitly.
*
* @internal
*/
function matchByKey(prevItems, nextItems, matchBy) {
var prevMap = buildPrevKeyMap(prevItems, matchBy);
// Track which prev keys were matched
var matchedKeys = new Set();
var alignedPrevItems = nextItems.map((next, i) => {
var key = matchBy(next, i);
if (key != null) {
var prev = prevMap.get(key);
if (prev !== undefined) {
matchedKeys.add(key);
return prev;
}
}
return undefined;
});
// Removed = prev items whose keys were not matched to any next item
var removedPrevItems = [];
for (var _ref3 of prevMap) {
var _ref2 = _slicedToArray(_ref3, 2);
var key = _ref2[0];
var _item2 = _ref2[1];
if (!matchedKeys.has(key)) {
removedPrevItems.push(_item2);
}
}
return tagAlignedItems(alignedPrevItems, nextItems, removedPrevItems);
}
/**
* Match previous items to next items using the given matching strategy and return tagged animation items.
*
* On first render, all next items are returned as `{ status: 'added' }`.
* For key-based matching, unmatched previous items are appended as `{ status: 'removed' }`.
*
* @internal
*/
export function matchAnimationItems(prevItems, nextItems, matchBy) {
if (nextItems == null) {
return null;
}
if (prevItems == null) {
return nextItems.map(next => ({
status: 'added',
next
}));
}
if (matchBy === matchByIndex) {
return matchByIndexImpl(prevItems, nextItems);
}
if (matchBy === matchAppend) {
return matchAppendImpl(prevItems, nextItems);
}
return matchByKey(prevItems, nextItems, matchBy);
}

View file

@ -0,0 +1,47 @@
/**
* Callback type for the timeout function.
* Receives current time as an argument.
*/
/**
* A function that, when called, cancels the timeout.
*
* @since 3.9
*/
/**
* TimeoutController is responsible for controlling the movement of time.
* Think of it as a clock.
*
* Recharts default implementation uses requestAnimationFrame which works great in a browser.
* You may choose to override this which is especially useful if you want to control animations.
*
* Why would you want to do this?
* - unit tests
* - animations based on something other than time: UI controls, page scroll, mouse movement ...
*
* @see {@link https://recharts.github.io/en-US/guide/animations/ Animation guide}
*
* @since 3.9
*/
export class RequestAnimationFrameTimeoutController {
setTimeout(callback) {
var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var startTime = performance.now();
var requestId = null;
var executeCallback = now => {
if (now - startTime >= delay) {
callback(now);
} else {
requestId = requestAnimationFrame(executeCallback);
}
};
requestId = requestAnimationFrame(executeCallback);
return () => {
if (requestId != null) {
cancelAnimationFrame(requestId);
}
};
}
}

View file

@ -0,0 +1,29 @@
import { createContext, useContext, useMemo } from 'react';
import { animationControllerImpl } from './AnimationControllerImpl';
var AnimationControllerContext = /*#__PURE__*/createContext(animationControllerImpl);
/**
* Allows overriding the default AnimationController that Recharts uses internally to drive animations.
* The default one uses requestAnimationFrame-based TimeoutController, and ticks through the animations
* as time moves forward.
*
* Why would you want to use this? Several reasons:
* - Unit tests are an excellent use (Recharts itself has ton of tests with mock TimeoutController)
* - If you want to animate charts back and forth (Recharts only animates forward)
* - If you want to replace requestAnimationFrame with something else
* - Perhaps a manual animation controls (https://recharts.github.io does this)
* - If you want to maybe animate charts based on mouse movement, or page scroll position, instead of time
*
* If you don't use this provider then all charts use the default requestAnimationFrame and default animation logic.
*
* If you use this component then all charts inside use your custom animationController.
*
* @see {@link https://recharts.github.io/en-US/guide/animations/ Animation guide}
*
* @since 3.9
*/
export var AnimationControllerProvider = AnimationControllerContext.Provider;
export function useAnimationController(animationControllerFromProps) {
var animationControllerFromContext = useContext(AnimationControllerContext);
return useMemo(() => animationControllerFromProps !== null && animationControllerFromProps !== void 0 ? animationControllerFromProps : animationControllerFromContext, [animationControllerFromProps, animationControllerFromContext]);
}

View file

@ -0,0 +1,90 @@
import { useCallback, useRef } from 'react';
/**
* Small state machine shared by animated components that need interruption-safe
* animations.
*
* Why this exists:
* Recharts stores the latest visible animation frame in mutable refs so the next
* animation can resume from that exact geometry. That works well, but there is a
* subtle trap: when an animation is interrupted, React may render several times
* before the new animation has actually emitted its own `animationElapsedTime=0` frame. If we keep
* reading and writing the same live ref during that window, the "start" value of
* the new animation can drift, which produces visible jumps.
*
* This hook separates those two responsibilities:
* - `startValue` is a frozen snapshot of the previous animation state, captured
* once per animation cycle and kept stable while that cycle is being matched
* and interpolated.
* - `previousValueRef.current` remains the mutable "latest visible frame" store
* that future animations can resume from.
*
* The hook does not know anything about points, baselines, sectors, or shapes.
* It only manages *when* a snapshot is captured and *when* new frames are allowed
* to overwrite the mutable ref.
*
* Lifecycle:
* 1. When `animationInput` changes by reference, a new cycle begins. We capture
* the current ref value into `startValue` and temporarily block writes.
* 2. When the new animation renders `animationElapsedTime=0`, we unlock writes. This ensures the new
* animation has had a chance to render its true starting frame before any live
* ref gets updated.
* 3. For `animationElapsedTime > 0`, callers may commit the visible frame back into the mutable ref.
* Callers can still veto that with `canCommit=false` (for example when a Line
* needs to wait until SVG path length has been measured).
* 4. At `animationElapsedTime=1`, we also refresh the frozen snapshot so subsequent rerenders in the
* completed state observe the finished geometry.
*/
export function useAnimationStartSnapshot(animationInput, previousValueRef) {
/*
* Stores the identity of the animation cycle we are currently serving.
* As soon as this changes, we know we need a brand new frozen snapshot.
*/
var previousAnimationInputRef = useRef(animationInput);
/*
* Frozen start-of-cycle value used for interpolation.
* This is the value callers should match against for the whole duration of the
* current animation, even if the live ref is updated many times afterward.
*/
var startValueRef = useRef(previousValueRef.current);
/*
* Prevents us from writing back into the live ref until the new animation has
* actually rendered its own animationElapsedTime=0 frame. This avoids "pre-start" renders from
* accidentally rebasing the next animation onto already-shifted geometry.
*/
var isReadyToCommitRef = useRef(true);
if (previousAnimationInputRef.current !== animationInput) {
// New animation cycle: capture exactly one frozen starting snapshot.
previousAnimationInputRef.current = animationInput;
startValueRef.current = previousValueRef.current;
// Writes stay blocked until the new cycle acknowledges its animationElapsedTime=0 frame.
isReadyToCommitRef.current = false;
}
var syncStepValue = useCallback(function (stepValue, animationElapsedTime) {
var canCommit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
if (animationElapsedTime === 0) {
/*
* animationElapsedTime=0 is the handshake that says: "the new animation has now rendered its
* own starting frame". We do not write anything yet; we only allow later
* in-flight frames to be committed safely.
*/
isReadyToCommitRef.current = true;
return;
}
if (animationElapsedTime === 1) {
// Keep the frozen snapshot aligned with the fully completed geometry.
startValueRef.current = stepValue;
}
if (animationElapsedTime > 0 && isReadyToCommitRef.current && canCommit) {
/*
* Commit the latest visible frame so a future interruption can resume from
* exactly what the user saw on screen most recently.
*/
// eslint-disable-next-line no-param-reassign
previousValueRef.current = stepValue;
}
}, [previousValueRef]);
return {
startValue: startValueRef.current,
syncStepValue
};
}

6
frontend/node_modules/recharts/es6/animation/util.js generated vendored Normal file
View file

@ -0,0 +1,6 @@
/*
* @description: convert camel case to dash case
* string => string
*/
export var getDashCase = name => name.replace(/([A-Z])/g, v => "-".concat(v.toLowerCase()));
export var getTransitionVal = (props, duration, easing) => props.map(prop => "".concat(getDashCase(prop), " ").concat(duration, "ms ").concat(easing)).join(',');

668
frontend/node_modules/recharts/es6/cartesian/Area.js generated vendored Normal file
View file

@ -0,0 +1,668 @@
var _excluded = ["id"],
_excluded2 = ["activeDot", "animationBegin", "animationDuration", "animationEasing", "connectNulls", "dot", "fill", "fillOpacity", "hide", "isAnimationActive", "legendType", "stroke", "xAxisId", "yAxisId"];
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); }
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; }
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; }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
import * as React from 'react';
import { PureComponent, useMemo, useRef } from 'react';
import { clsx } from 'clsx';
import { Layer } from '../container/Layer';
import { CartesianLabelListContextProvider, LabelListFromLabelProp } from '../component/LabelList';
import { Dots } from '../component/Dots';
import { interpolate, isNan, isNullish, isNumber, noop } from '../util/DataUtils';
import { getCateCoordinateOfLine, getNormalizedStackId, getTooltipNameProp, getValueByDataKey } from '../util/ChartUtils';
import { isClipDot } from '../util/ReactUtils';
import { ActivePoints } from '../component/ActivePoints';
import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings';
import { GraphicalItemClipPath, useNeedsClip } from './GraphicalItemClipPath';
import { selectArea } from '../state/selectors/areaSelectors';
import { useIsPanorama } from '../context/PanoramaContext';
import { useCartesianChartLayout, useChartLayout } from '../context/chartLayoutContext';
import { useChartName } from '../state/selectors/selectors';
import { SetLegendPayload } from '../state/SetLegendPayload';
import { useAppSelector } from '../state/hooks';
import { AnimatedItems, useAnimationCallbacks } from '../animation/AnimatedItems';
import { matchAnimationItems, matchByIndex } from '../animation/matchBy';
import { useAnimationStartSnapshot } from '../animation/useAnimationStartSnapshot';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { usePlotArea } from '../hooks';
import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId';
import { SetCartesianGraphicalItem } from '../state/SetGraphicalItem';
import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
import { getRadiusAndStrokeWidthFromDot } from '../util/getRadiusAndStrokeWidthFromDot';
import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents';
import { Shape } from '../util/ActiveShapeUtils';
import { ZIndexLayer } from '../zIndex/ZIndexLayer';
import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
import { propsAreEqual } from '../util/propsAreEqual';
import { AreaRevealShape } from './AreaRevealShape';
/**
* @inline
*/
/**
* Our base value array has payload in it, and we expose it externally too.
*/
/**
* Internal props, combination of external props + defaultProps + private Recharts state
*/
/**
* External props, intended for end users to fill in
*/
var defaultAreaAnimateItems = (items, animationElapsedTime) => {
if (items == null) {
// First render: return items as-is, clip-path animation handles the reveal
return [];
}
if (animationElapsedTime === 1) {
return items.flatMap(item => item.status === 'removed' ? [] : [item.next]);
}
return items.flatMap(item => {
if (item.status === 'matched') {
return [_objectSpread(_objectSpread({}, item.next), {}, {
x: interpolate(item.prev.x, item.next.x, animationElapsedTime),
y: interpolate(item.prev.y, item.next.y, animationElapsedTime)
})];
}
if (item.status === 'added') {
/*
* Here we just return the final position without interpolating
* so that we can allow the default initial animation that is done by clipPath in AreaRevealShape.
* If you want your own custom animations then you may want to interpolate this one as well.
*/
return [item.next];
}
// removed: drop
return [];
});
};
export var defaultAreaProps = {
activeDot: true,
animationBegin: 0,
animationDuration: 1500,
animationEasing: 'ease',
animationMatchBy: matchByIndex,
animationInterpolateFn: defaultAreaAnimateItems,
connectNulls: false,
dot: false,
fill: '#3182bd',
fillOpacity: 0.6,
hide: false,
isAnimationActive: 'auto',
legendType: 'line',
stroke: '#3182bd',
strokeWidth: 1,
type: 'linear',
label: false,
shape: AreaRevealShape,
xAxisId: 0,
yAxisId: 0,
zIndex: DefaultZIndexes.area
};
/**
* Because of naming conflict, we are forced to ignore certain (valid) SVG attributes.
*/
function getLegendItemColor(stroke, fill) {
return stroke && stroke !== 'none' ? stroke : fill;
}
var computeLegendPayloadFromAreaData = props => {
var dataKey = props.dataKey,
name = props.name,
stroke = props.stroke,
fill = props.fill,
legendType = props.legendType,
hide = props.hide;
return [{
inactive: hide,
dataKey,
type: legendType,
color: getLegendItemColor(stroke, fill),
value: getTooltipNameProp(name, dataKey),
payload: props
}];
};
var SetAreaTooltipEntrySettings = /*#__PURE__*/React.memo(_ref => {
var dataKey = _ref.dataKey,
data = _ref.data,
stroke = _ref.stroke,
strokeWidth = _ref.strokeWidth,
fill = _ref.fill,
name = _ref.name,
hide = _ref.hide,
unit = _ref.unit,
formatter = _ref.formatter,
tooltipType = _ref.tooltipType,
id = _ref.id;
var tooltipEntrySettings = {
dataDefinedOnItem: data,
getPosition: noop,
settings: {
stroke,
strokeWidth,
fill,
dataKey,
nameKey: undefined,
name: getTooltipNameProp(name, dataKey),
hide,
type: tooltipType,
color: getLegendItemColor(stroke, fill),
unit,
formatter,
graphicalItemId: id
}
};
return /*#__PURE__*/React.createElement(SetTooltipEntrySettings, {
tooltipEntrySettings: tooltipEntrySettings
});
});
function AreaDotsWrapper(_ref2) {
var clipPathId = _ref2.clipPathId,
points = _ref2.points,
props = _ref2.props;
var needClip = props.needClip,
dot = props.dot,
dataKey = props.dataKey;
var areaProps = svgPropertiesNoEvents(props);
return /*#__PURE__*/React.createElement(Dots, {
points: points,
dot: dot,
className: "recharts-area-dots",
dotClassName: "recharts-area-dot",
dataKey: dataKey,
baseProps: areaProps,
needClip: needClip,
clipPathId: clipPathId
});
}
function AreaLabelListProvider(_ref3) {
var showLabels = _ref3.showLabels,
children = _ref3.children,
points = _ref3.points;
var labelListEntries = points.map(point => {
var _point$x, _point$y;
var viewBox = {
x: (_point$x = point.x) !== null && _point$x !== void 0 ? _point$x : 0,
y: (_point$y = point.y) !== null && _point$y !== void 0 ? _point$y : 0,
width: 0,
lowerWidth: 0,
upperWidth: 0,
height: 0
};
return _objectSpread(_objectSpread({}, viewBox), {}, {
value: point.value,
payload: point.payload,
parentViewBox: undefined,
viewBox,
fill: undefined
});
});
return /*#__PURE__*/React.createElement(CartesianLabelListContextProvider, {
value: showLabels ? labelListEntries : undefined
}, children);
}
function StaticArea(_ref4) {
var points = _ref4.points,
baseLine = _ref4.baseLine,
needClip = _ref4.needClip,
clipPathId = _ref4.clipPathId,
props = _ref4.props,
animationElapsedTime = _ref4.animationElapsedTime,
isAnimating = _ref4.isAnimating,
isEntrance = _ref4.isEntrance;
var layout = props.layout,
type = props.type,
stroke = props.stroke,
connectNulls = props.connectNulls,
isRange = props.isRange,
shape = props.shape;
var id = props.id,
propsWithoutId = _objectWithoutProperties(props, _excluded);
var propsWithEvents = svgPropertiesAndEvents(propsWithoutId);
var curveProps = _objectSpread(_objectSpread({}, propsWithEvents), {}, {
id,
points,
connectNulls,
type,
baseLine,
layout,
stroke,
isRange,
animationElapsedTime,
isAnimating,
isEntrance
});
return /*#__PURE__*/React.createElement(React.Fragment, null, (points === null || points === void 0 ? void 0 : points.length) > 1 && /*#__PURE__*/React.createElement(Layer, {
clipPath: needClip ? "url(#clipPath-".concat(clipPathId, ")") : undefined
}, /*#__PURE__*/React.createElement(Shape, {
option: shape,
DefaultShape: defaultAreaProps.shape,
shapeProps: curveProps
})), /*#__PURE__*/React.createElement(AreaDotsWrapper, {
points: points,
props: propsWithoutId,
clipPathId: clipPathId
}));
}
function interpolateScalarBaseLine(baseLine, prevBaseLine, animationElapsedTime) {
if (isNumber(baseLine)) {
var previousNumberBaseLine = isNumber(prevBaseLine) ? prevBaseLine : undefined;
return interpolate(previousNumberBaseLine, baseLine, animationElapsedTime);
}
if (isNullish(baseLine) || isNan(baseLine)) {
var _previousNumberBaseLine = isNumber(prevBaseLine) ? prevBaseLine : undefined;
return interpolate(_previousNumberBaseLine, 0, animationElapsedTime);
}
return baseLine;
}
function AreaWithAnimation(_ref5) {
var needClip = _ref5.needClip,
clipPathId = _ref5.clipPathId,
props = _ref5.props,
previousPointsRef = _ref5.previousPointsRef,
previousBaselineRef = _ref5.previousBaselineRef;
var points = props.points,
baseLine = props.baseLine,
isAnimationActive = props.isAnimationActive,
animationBegin = props.animationBegin,
animationDuration = props.animationDuration,
animationEasing = props.animationEasing,
animationMatchBy = props.animationMatchBy,
animationInterpolateFn = props.animationInterpolateFn;
var animationInput = useMemo(() => ({
points,
baseLine
}), [points, baseLine]);
var baseLineAnimationState = useAnimationStartSnapshot(animationInput, previousBaselineRef);
var layout = useCartesianChartLayout();
var _useAnimationCallback = useAnimationCallbacks(props.onAnimationStart, props.onAnimationEnd),
isAnimating = _useAnimationCallback.isAnimating,
handleAnimationStart = _useAnimationCallback.handleAnimationStart,
handleAnimationEnd = _useAnimationCallback.handleAnimationEnd;
var prevBaseLine = baseLineAnimationState.startValue;
if (layout == null) {
return null;
}
var baseLineAnimationItems;
if (Array.isArray(baseLine) && Array.isArray(prevBaseLine)) {
baseLineAnimationItems = matchAnimationItems(prevBaseLine, baseLine, animationMatchBy);
} else if (Array.isArray(baseLine)) {
baseLineAnimationItems = matchAnimationItems(null, baseLine, animationMatchBy);
} else {
baseLineAnimationItems = null;
}
return /*#__PURE__*/React.createElement(AnimatedItems, {
animationInput: animationInput,
animationIdPrefix: "recharts-area-",
items: points,
previousItemsRef: previousPointsRef,
isAnimationActive: isAnimationActive,
animationBegin: animationBegin,
animationDuration: animationDuration,
animationEasing: animationEasing,
onAnimationStart: handleAnimationStart,
onAnimationEnd: handleAnimationEnd,
animationInterpolateFn: animationInterpolateFn,
animationMatchBy: animationMatchBy,
layout: layout
}, (stepPoints, animationElapsedTime, isEntrance) => {
var stepBaseLine;
if (animationElapsedTime === 1) {
stepBaseLine = baseLine;
} else if (Array.isArray(baseLine)) {
stepBaseLine = animationInterpolateFn(baseLineAnimationItems, animationElapsedTime, layout);
} else {
stepBaseLine = isEntrance ? baseLine : interpolateScalarBaseLine(baseLine, prevBaseLine, animationElapsedTime);
}
baseLineAnimationState.syncStepValue(stepBaseLine, animationElapsedTime);
return /*#__PURE__*/React.createElement(AreaLabelListProvider, {
showLabels: !isAnimating,
points: points
}, props.children, /*#__PURE__*/React.createElement(StaticArea, {
points: stepPoints,
baseLine: stepBaseLine,
needClip: needClip,
clipPathId: clipPathId,
props: props,
animationElapsedTime: animationElapsedTime,
isAnimating: isAnimating || animationElapsedTime < 1,
isEntrance: isEntrance
}), /*#__PURE__*/React.createElement(LabelListFromLabelProp, {
label: props.label
}));
});
}
/*
* This component decides if the area should be animated or not.
* It also holds the state of the animation.
*/
function RenderArea(_ref6) {
var needClip = _ref6.needClip,
clipPathId = _ref6.clipPathId,
props = _ref6.props;
/*
* These two must be refs, not state!
* Because we want to store the most recent shape of the animation in case we have to interrupt the animation;
* that happens when user initiates another animation before the current one finishes.
*
* If this was a useState, then every step in the animation would trigger a re-render.
* So, useRef it is.
*/
var previousPointsRef = useRef(null);
var previousBaselineRef = useRef();
return /*#__PURE__*/React.createElement(AreaWithAnimation, {
needClip: needClip,
clipPathId: clipPathId,
props: props,
previousPointsRef: previousPointsRef,
previousBaselineRef: previousBaselineRef
});
}
class AreaWithState extends PureComponent {
render() {
var _this$props = this.props,
hide = _this$props.hide,
dot = _this$props.dot,
points = _this$props.points,
className = _this$props.className,
top = _this$props.top,
left = _this$props.left,
needClip = _this$props.needClip,
xAxisId = _this$props.xAxisId,
yAxisId = _this$props.yAxisId,
width = _this$props.width,
height = _this$props.height,
id = _this$props.id,
baseLine = _this$props.baseLine,
zIndex = _this$props.zIndex;
if (hide) {
return null;
}
var layerClass = clsx('recharts-area', className);
var clipPathId = id;
var _getRadiusAndStrokeWi = getRadiusAndStrokeWidthFromDot(dot),
r = _getRadiusAndStrokeWi.r,
strokeWidth = _getRadiusAndStrokeWi.strokeWidth;
var clipDot = isClipDot(dot);
var dotSize = r * 2 + strokeWidth;
var activePointsClipPath = needClip ? "url(#clipPath-".concat(clipDot ? '' : 'dots-').concat(clipPathId, ")") : undefined;
return /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: zIndex
}, /*#__PURE__*/React.createElement(Layer, {
className: layerClass
}, needClip && /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement(GraphicalItemClipPath, {
clipPathId: clipPathId,
xAxisId: xAxisId,
yAxisId: yAxisId
}), !clipDot && /*#__PURE__*/React.createElement("clipPath", {
id: "clipPath-dots-".concat(clipPathId)
}, /*#__PURE__*/React.createElement("rect", {
x: left - dotSize / 2,
y: top - dotSize / 2,
width: width + dotSize,
height: height + dotSize
}))), /*#__PURE__*/React.createElement(RenderArea, {
needClip: needClip,
clipPathId: clipPathId,
props: this.props
})), /*#__PURE__*/React.createElement(ActivePoints, {
points: points,
mainColor: getLegendItemColor(this.props.stroke, this.props.fill),
itemDataKey: this.props.dataKey,
activeDot: this.props.activeDot,
clipPath: activePointsClipPath
}), this.props.isRange && Array.isArray(baseLine) && /*#__PURE__*/React.createElement(ActivePoints, {
points: baseLine,
mainColor: getLegendItemColor(this.props.stroke, this.props.fill),
itemDataKey: this.props.dataKey,
activeDot: this.props.activeDot,
clipPath: activePointsClipPath
}));
}
}
function AreaImpl(props) {
var _useAppSelector;
var activeDot = props.activeDot,
animationBegin = props.animationBegin,
animationDuration = props.animationDuration,
animationEasing = props.animationEasing,
connectNulls = props.connectNulls,
dot = props.dot,
fill = props.fill,
fillOpacity = props.fillOpacity,
hide = props.hide,
isAnimationActive = props.isAnimationActive,
legendType = props.legendType,
stroke = props.stroke,
xAxisId = props.xAxisId,
yAxisId = props.yAxisId,
everythingElse = _objectWithoutProperties(props, _excluded2);
var layout = useChartLayout();
var chartName = useChartName();
var _useNeedsClip = useNeedsClip(xAxisId, yAxisId),
needClip = _useNeedsClip.needClip;
var isPanorama = useIsPanorama();
var _ref7 = (_useAppSelector = useAppSelector(state => selectArea(state, props.id, isPanorama))) !== null && _useAppSelector !== void 0 ? _useAppSelector : {},
points = _ref7.points,
isRange = _ref7.isRange,
baseLine = _ref7.baseLine;
var plotArea = usePlotArea();
if (layout !== 'horizontal' && layout !== 'vertical' || plotArea == null) {
// Can't render Area in an unsupported layout
return null;
}
if (chartName !== 'AreaChart' && chartName !== 'ComposedChart') {
// There is nothing stopping us from rendering Area in other charts, except for historical reasons. Do we want to allow that?
return null;
}
var height = plotArea.height,
width = plotArea.width,
left = plotArea.x,
top = plotArea.y;
if (!points || !points.length) {
return null;
}
return /*#__PURE__*/React.createElement(AreaWithState, _extends({}, everythingElse, {
activeDot: activeDot,
animationBegin: animationBegin,
animationDuration: animationDuration,
animationEasing: animationEasing,
baseLine: baseLine,
connectNulls: connectNulls,
dot: dot,
fill: fill,
fillOpacity: fillOpacity,
height: height,
hide: hide,
layout: layout,
isAnimationActive: isAnimationActive,
isRange: isRange,
legendType: legendType,
needClip: needClip,
points: points,
stroke: stroke,
width: width,
left: left,
top: top,
xAxisId: xAxisId,
yAxisId: yAxisId
}));
}
export var getBaseValue = (layout, chartBaseValue, itemBaseValue, xAxis, yAxis) => {
// The baseValue can be defined both on the AreaChart, and on the Area.
// The value for the item takes precedence.
var baseValue = itemBaseValue !== null && itemBaseValue !== void 0 ? itemBaseValue : chartBaseValue;
if (isNumber(baseValue)) {
return baseValue;
}
var numericAxis = layout === 'horizontal' ? yAxis : xAxis;
// @ts-expect-error d3scale .domain() returns unknown, Math.max expects number
var domain = numericAxis.scale.domain();
if (numericAxis.type === 'number') {
var domainMax = Math.max(domain[0], domain[1]);
var domainMin = Math.min(domain[0], domain[1]);
if (baseValue === 'dataMin') {
return domainMin;
}
if (baseValue === 'dataMax') {
return domainMax;
}
return domainMax < 0 ? domainMax : Math.max(Math.min(domain[0], domain[1]), 0);
}
if (baseValue === 'dataMin') {
return domain[0];
}
if (baseValue === 'dataMax') {
return domain[1];
}
return domain[0];
};
export function computeArea(_ref8) {
var _ref8$areaSettings = _ref8.areaSettings,
connectNulls = _ref8$areaSettings.connectNulls,
itemBaseValue = _ref8$areaSettings.baseValue,
dataKey = _ref8$areaSettings.dataKey,
stackedData = _ref8.stackedData,
layout = _ref8.layout,
chartBaseValue = _ref8.chartBaseValue,
xAxis = _ref8.xAxis,
yAxis = _ref8.yAxis,
displayedData = _ref8.displayedData,
dataStartIndex = _ref8.dataStartIndex,
xAxisTicks = _ref8.xAxisTicks,
yAxisTicks = _ref8.yAxisTicks,
bandSize = _ref8.bandSize;
var hasStack = stackedData && stackedData.length;
var baseValue = getBaseValue(layout, chartBaseValue, itemBaseValue, xAxis, yAxis);
var isHorizontalLayout = layout === 'horizontal';
var isRange = false;
var points = displayedData.map((entry, index) => {
var _valueAsArray$, _valueAsArray, _xAxis$scale$map;
var valueAsArray;
if (hasStack) {
valueAsArray = stackedData[dataStartIndex + index];
} else {
var rawValue = getValueByDataKey(entry, dataKey);
if (!Array.isArray(rawValue)) {
valueAsArray = [baseValue, rawValue];
} else {
valueAsArray = rawValue;
isRange = true;
}
}
var value1 = (_valueAsArray$ = (_valueAsArray = valueAsArray) === null || _valueAsArray === void 0 ? void 0 : _valueAsArray[1]) !== null && _valueAsArray$ !== void 0 ? _valueAsArray$ : null;
var isBreakPoint = value1 == null || hasStack && !connectNulls && getValueByDataKey(entry, dataKey) == null;
if (isHorizontalLayout) {
var _yAxis$scale$map;
return {
x: getCateCoordinateOfLine({
axis: xAxis,
ticks: xAxisTicks,
bandSize,
entry,
index
}),
y: isBreakPoint ? null : (_yAxis$scale$map = yAxis.scale.map(value1)) !== null && _yAxis$scale$map !== void 0 ? _yAxis$scale$map : null,
value: valueAsArray,
payload: entry
};
}
return {
x: isBreakPoint ? null : (_xAxis$scale$map = xAxis.scale.map(value1)) !== null && _xAxis$scale$map !== void 0 ? _xAxis$scale$map : null,
y: getCateCoordinateOfLine({
axis: yAxis,
ticks: yAxisTicks,
bandSize,
entry,
index
}),
value: valueAsArray,
payload: entry
};
});
var baseLine;
if (hasStack || isRange) {
baseLine = points.map(entry => {
var _xAxis$scale$map2;
var x = Array.isArray(entry.value) ? entry.value[0] : null;
if (isHorizontalLayout) {
var _yAxis$scale$map2;
return {
x: entry.x,
y: x != null && entry.y != null ? (_yAxis$scale$map2 = yAxis.scale.map(x)) !== null && _yAxis$scale$map2 !== void 0 ? _yAxis$scale$map2 : null : null,
payload: entry.payload
};
}
return {
x: x != null ? (_xAxis$scale$map2 = xAxis.scale.map(x)) !== null && _xAxis$scale$map2 !== void 0 ? _xAxis$scale$map2 : null : null,
y: entry.y,
payload: entry.payload
};
});
} else {
baseLine = isHorizontalLayout ? yAxis.scale.map(baseValue) : xAxis.scale.map(baseValue);
}
return {
points,
baseLine: baseLine !== null && baseLine !== void 0 ? baseLine : 0,
isRange
};
}
function AreaFn(outsideProps) {
var props = resolveDefaultProps(outsideProps, defaultAreaProps);
var isPanorama = useIsPanorama();
// Report all props to Redux store first, before calling hooks, to avoid circular dependencies.
return /*#__PURE__*/React.createElement(RegisterGraphicalItemId, {
id: props.id,
type: "area"
}, id => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetLegendPayload, {
legendPayload: computeLegendPayloadFromAreaData(props)
}), /*#__PURE__*/React.createElement(SetAreaTooltipEntrySettings, {
dataKey: props.dataKey,
data: props.data,
stroke: props.stroke,
strokeWidth: props.strokeWidth,
fill: props.fill,
name: props.name,
hide: props.hide,
unit: props.unit,
formatter: props.formatter,
tooltipType: props.tooltipType,
id: id
}), /*#__PURE__*/React.createElement(SetCartesianGraphicalItem, {
type: "area",
id: id,
data: props.data,
dataKey: props.dataKey,
xAxisId: props.xAxisId,
yAxisId: props.yAxisId,
zAxisId: 0,
stackId: getNormalizedStackId(props.stackId),
hide: props.hide,
barSize: undefined,
baseValue: props.baseValue,
isPanorama: isPanorama,
connectNulls: props.connectNulls
}), /*#__PURE__*/React.createElement(AreaImpl, _extends({}, props, {
id: id
}))));
}
/**
* @provides LabelListContext
* @consumes CartesianChartContext
*/
export var Area = /*#__PURE__*/React.memo(AreaFn, propsAreEqual);
// @ts-expect-error we need to set the displayName for debugging purposes
Area.displayName = 'Area';

View file

@ -0,0 +1,179 @@
var _excluded = ["animationElapsedTime", "isAnimating", "isEntrance", "layout", "isRange", "stroke", "connectNulls"],
_excluded2 = ["id", "baseLine"];
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); }
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; }
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; }
import * as React from 'react';
import { isNumber } from '../util/DataUtils';
import { Curve } from '../shape/Curve';
import { isWellBehavedNumber } from '../util/isWellBehavedNumber';
import { Layer } from '../container/Layer';
import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
import { useId } from '../util/useId';
/**
* Props for the clip-path rect computation.
* @internal
*/
function HorizontalClipRect(_ref) {
var _points$, _points;
var alpha = _ref.alpha,
baseLine = _ref.baseLine,
points = _ref.points,
strokeWidth = _ref.strokeWidth;
var startX = (_points$ = points[0]) === null || _points$ === void 0 ? void 0 : _points$.x;
var endX = (_points = points[points.length - 1]) === null || _points === void 0 ? void 0 : _points.x;
if (!isWellBehavedNumber(startX) || !isWellBehavedNumber(endX)) {
return null;
}
var width = alpha * Math.abs(startX - endX);
var maxY = Math.max(...points.map(entry => entry.y || 0));
if (isNumber(baseLine)) {
maxY = Math.max(baseLine, maxY);
} else if (baseLine && Array.isArray(baseLine) && baseLine.length) {
maxY = Math.max(...baseLine.map(entry => entry.y || 0), maxY);
}
if (isNumber(maxY)) {
return /*#__PURE__*/React.createElement("rect", {
x: startX < endX ? startX : startX - width,
y: 0,
width: width,
height: Math.floor(maxY + (strokeWidth ? parseInt("".concat(strokeWidth), 10) : 1))
});
}
return null;
}
function VerticalClipRect(_ref2) {
var _points$2, _points2;
var alpha = _ref2.alpha,
baseLine = _ref2.baseLine,
points = _ref2.points,
strokeWidth = _ref2.strokeWidth;
var startY = (_points$2 = points[0]) === null || _points$2 === void 0 ? void 0 : _points$2.y;
var endY = (_points2 = points[points.length - 1]) === null || _points2 === void 0 ? void 0 : _points2.y;
if (!isWellBehavedNumber(startY) || !isWellBehavedNumber(endY)) {
return null;
}
var height = alpha * Math.abs(startY - endY);
var maxX = Math.max(...points.map(entry => entry.x || 0));
if (isNumber(baseLine)) {
maxX = Math.max(baseLine, maxX);
} else if (baseLine && Array.isArray(baseLine) && baseLine.length) {
maxX = Math.max(...baseLine.map(entry => entry.x || 0), maxX);
}
if (isNumber(maxX)) {
return /*#__PURE__*/React.createElement("rect", {
x: 0,
y: startY < endY ? startY : startY - height,
width: maxX + (strokeWidth ? parseInt("".concat(strokeWidth), 10) : 1),
height: Math.floor(height)
});
}
return null;
}
function RevealClipRect(_ref3) {
var alpha = _ref3.alpha,
layout = _ref3.layout,
points = _ref3.points,
baseLine = _ref3.baseLine,
strokeWidth = _ref3.strokeWidth;
if (layout === 'vertical') {
return /*#__PURE__*/React.createElement(VerticalClipRect, {
alpha: alpha,
points: points,
baseLine: baseLine,
strokeWidth: strokeWidth
});
}
return /*#__PURE__*/React.createElement(HorizontalClipRect, {
alpha: alpha,
points: points,
baseLine: baseLine,
strokeWidth: strokeWidth
});
}
/**
* The default shape for Area that reveals the chart with a left-to-right (or top-to-bottom)
* clip-path animation on entrance, and renders the plain curve otherwise.
*
* This component renders the complete Area visual: the filled area curve, the stroke curve,
* and (for range areas) the baseline stroke curve. During entrance animation, all curves are
* wrapped in a clip-path that progressively reveals the area.
*
* This is the built-in entrance animation for Area. It is automatically used when no custom
* `shape` prop is provided. You can import and reuse it as a starting point for custom shapes.
*
* @example
* ```tsx
* import { Area, AreaRevealShape } from 'recharts';
*
* // Use the default shape explicitly (same as providing no shape prop)
* <Area dataKey="value" shape={AreaRevealShape} />
* ```
*
* @see {@link https://recharts.github.io/en-US/guide/animations Animation guide}
*
* @since 3.9
*/
export function AreaRevealShape(props) {
var _props$animationElaps = props.animationElapsedTime,
animationElapsedTime = _props$animationElaps === void 0 ? 1 : _props$animationElaps,
_props$isAnimating = props.isAnimating,
isAnimating = _props$isAnimating === void 0 ? false : _props$isAnimating,
_props$isEntrance = props.isEntrance,
isEntrance = _props$isEntrance === void 0 ? false : _props$isEntrance,
layoutProp = props.layout,
isRange = props.isRange,
stroke = props.stroke,
connectNulls = props.connectNulls,
restProps = _objectWithoutProperties(props, _excluded);
var layout = layoutProp === 'vertical' ? 'vertical' : 'horizontal';
var finalConnectNulls = connectNulls !== null && connectNulls !== void 0 ? connectNulls : false;
var clipId = useId();
var id = restProps.id,
baseLine = restProps.baseLine,
propsWithoutIdBaseline = _objectWithoutProperties(restProps, _excluded2);
var strokeSvgProps = svgPropertiesNoEvents(propsWithoutIdBaseline);
var fillCurve = /*#__PURE__*/React.createElement(Curve, _extends({}, restProps, {
id: id,
baseLine: baseLine,
connectNulls: finalConnectNulls,
stroke: "none",
className: "recharts-area-area",
layout: layout
}));
var strokeCurve = stroke !== 'none' && /*#__PURE__*/React.createElement(Curve, _extends({}, strokeSvgProps, {
className: "recharts-area-curve",
layout: layout,
type: restProps.type,
connectNulls: finalConnectNulls,
fill: "none",
stroke: stroke,
points: restProps.points
}));
var baselineCurve = stroke !== 'none' && isRange && Array.isArray(baseLine) && /*#__PURE__*/React.createElement(Curve, _extends({}, strokeSvgProps, {
className: "recharts-area-curve",
layout: layout,
type: restProps.type,
connectNulls: finalConnectNulls,
fill: "none",
stroke: stroke,
points: baseLine
}));
if (isEntrance && (isAnimating || animationElapsedTime < 1)) {
var _restProps$points;
return /*#__PURE__*/React.createElement(Layer, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
id: clipId
}, /*#__PURE__*/React.createElement(RevealClipRect, {
alpha: animationElapsedTime,
points: (_restProps$points = restProps.points) !== null && _restProps$points !== void 0 ? _restProps$points : [],
baseLine: baseLine,
layout: layout,
strokeWidth: restProps.strokeWidth
}))), /*#__PURE__*/React.createElement(Layer, {
clipPath: "url(#".concat(clipId, ")")
}, fillCurve, strokeCurve, baselineCurve));
}
return /*#__PURE__*/React.createElement(React.Fragment, null, fillCurve, strokeCurve, baselineCurve);
}

740
frontend/node_modules/recharts/es6/cartesian/Bar.js generated vendored Normal file
View file

@ -0,0 +1,740 @@
var _excluded = ["onMouseEnter", "onMouseLeave", "onClick"],
_excluded2 = ["value", "background", "tooltipPosition"],
_excluded3 = ["id"],
_excluded4 = ["onMouseEnter", "onClick", "onMouseLeave"];
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
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); }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
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; }
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; }
import * as React from 'react';
import { PureComponent, useCallback, useEffect, useRef, useState } from 'react';
import { clsx } from 'clsx';
import { Layer } from '../container/Layer';
import { Cell } from '../component/Cell';
import { CartesianLabelListContextProvider, LabelListFromLabelProp } from '../component/LabelList';
import { interpolate, isNan, mathSign, noop } from '../util/DataUtils';
import { findAllByType } from '../util/ReactUtils';
import { getBaseValueOfBar, getCateCoordinateOfBar, getTooltipNameProp, getValueByDataKey, truncateByDomain } from '../util/ChartUtils';
import { adaptEventsOfChild } from '../util/types';
import { BarRectangle, defaultBarShape, minPointSizeCallback } from '../util/BarUtils';
import { useMouseClickItemDispatch, useMouseEnterItemDispatch, useMouseLeaveItemDispatch } from '../context/tooltipContext';
import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings';
import { SetErrorBarContext } from '../context/ErrorBarContext';
import { GraphicalItemClipPath, useNeedsClip } from './GraphicalItemClipPath';
import { useChartLayout } from '../context/chartLayoutContext';
import { selectBarRectangles } from '../state/selectors/barSelectors';
import { useAppSelector } from '../state/hooks';
import { useIsPanorama } from '../context/PanoramaContext';
import { selectActiveTooltipDataKey, selectActiveTooltipIndex } from '../state/selectors/tooltipSelectors';
import { SetLegendPayload } from '../state/SetLegendPayload';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId';
import { SetCartesianGraphicalItem } from '../state/SetGraphicalItem';
import { svgPropertiesNoEvents, svgPropertiesNoEventsFromUnknown } from '../util/svgPropertiesNoEvents';
import { AnimatedItems, useAnimationCallbacks } from '../animation/AnimatedItems';
import { matchAppend } from '../animation/matchBy';
import { ZIndexLayer } from '../zIndex/ZIndexLayer';
import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
import { getZIndexFromUnknown } from '../zIndex/getZIndexFromUnknown';
import { propsAreEqual } from '../util/propsAreEqual';
import { BarStackClipLayer, useStackId } from './BarStack';
var computeLegendPayloadFromBarData = props => {
var dataKey = props.dataKey,
name = props.name,
fill = props.fill,
legendType = props.legendType,
hide = props.hide;
return [{
inactive: hide,
dataKey,
type: legendType,
color: fill,
value: getTooltipNameProp(name, dataKey),
payload: props
}];
};
var SetBarTooltipEntrySettings = /*#__PURE__*/React.memo(_ref => {
var dataKey = _ref.dataKey,
stroke = _ref.stroke,
strokeWidth = _ref.strokeWidth,
fill = _ref.fill,
name = _ref.name,
hide = _ref.hide,
unit = _ref.unit,
formatter = _ref.formatter,
tooltipType = _ref.tooltipType,
id = _ref.id;
var tooltipEntrySettings = {
dataDefinedOnItem: undefined,
getPosition: noop,
settings: {
stroke,
strokeWidth,
fill,
dataKey,
nameKey: undefined,
name: getTooltipNameProp(name, dataKey),
hide,
type: tooltipType,
color: fill,
unit,
formatter,
graphicalItemId: id
}
};
return /*#__PURE__*/React.createElement(SetTooltipEntrySettings, {
tooltipEntrySettings: tooltipEntrySettings
});
});
function BarBackground(props) {
var activeIndex = useAppSelector(selectActiveTooltipIndex);
var data = props.data,
dataKey = props.dataKey,
backgroundFromProps = props.background,
allOtherBarProps = props.allOtherBarProps;
var onMouseEnterFromProps = allOtherBarProps.onMouseEnter,
onMouseLeaveFromProps = allOtherBarProps.onMouseLeave,
onItemClickFromProps = allOtherBarProps.onClick,
restOfAllOtherProps = _objectWithoutProperties(allOtherBarProps, _excluded);
var onMouseEnterFromContext = useMouseEnterItemDispatch(onMouseEnterFromProps, dataKey, allOtherBarProps.id);
var onMouseLeaveFromContext = useMouseLeaveItemDispatch(onMouseLeaveFromProps);
var onClickFromContext = useMouseClickItemDispatch(onItemClickFromProps, dataKey, allOtherBarProps.id);
if (!backgroundFromProps || data == null) {
return null;
}
var backgroundProps = svgPropertiesNoEventsFromUnknown(backgroundFromProps);
return /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: getZIndexFromUnknown(backgroundFromProps, DefaultZIndexes.barBackground)
}, data.map((entry, i) => {
var value = entry.value,
backgroundFromDataEntry = entry.background,
tooltipPosition = entry.tooltipPosition,
rest = _objectWithoutProperties(entry, _excluded2);
if (!backgroundFromDataEntry) {
return null;
}
var onMouseEnter = onMouseEnterFromContext(entry, entry.originalDataIndex);
var onMouseLeave = onMouseLeaveFromContext(entry, entry.originalDataIndex);
var onClick = onClickFromContext(entry, entry.originalDataIndex);
var barRectangleProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
option: backgroundFromProps,
isActive: String(entry.originalDataIndex) === activeIndex
}, rest), {}, {
// @ts-expect-error backgroundProps is contributing unknown props
fill: '#eee'
}, backgroundFromDataEntry), backgroundProps), adaptEventsOfChild(restOfAllOtherProps, entry, i)), {}, {
onMouseEnter,
onMouseLeave,
onClick,
dataKey,
index: i,
className: 'recharts-bar-background-rectangle'
});
return /*#__PURE__*/React.createElement(BarRectangle, _extends({
key: "background-bar-".concat(i)
}, barRectangleProps));
}));
}
function BarLabelListProvider(_ref2) {
var showLabels = _ref2.showLabels,
children = _ref2.children,
rects = _ref2.rects;
var labelListEntries = rects === null || rects === void 0 ? void 0 : rects.map(entry => {
var viewBox = {
x: entry.x,
y: entry.y,
width: entry.width,
lowerWidth: entry.width,
upperWidth: entry.width,
height: entry.height
};
return _objectSpread(_objectSpread({}, viewBox), {}, {
value: entry.value,
payload: entry.payload,
parentViewBox: entry.parentViewBox,
viewBox,
fill: entry.fill
});
});
return /*#__PURE__*/React.createElement(CartesianLabelListContextProvider, {
value: showLabels ? labelListEntries : undefined
}, children);
}
function BarRectangleWithActiveState(props) {
var shape = props.shape,
activeBar = props.activeBar,
baseProps = props.baseProps,
entry = props.entry,
index = props.index,
dataKey = props.dataKey;
var activeIndex = useAppSelector(selectActiveTooltipIndex);
var activeDataKey = useAppSelector(selectActiveTooltipDataKey);
/*
* Bars support stacking, meaning that there can be multiple bars at the same x value.
* With Tooltip shared=false we only want to highlight the currently active Bar, not all.
*
* Also, if the tooltip is shared, we want to highlight all bars at the same x value
* regardless of the dataKey.
*
* With shared Tooltip, the activeDataKey is undefined.
*
* We use entry.originalDataIndex to match against activeIndex because the render index parameter
* is based on the filtered array, while activeIndex is based on the pre-filter displayed data slice.
* When entries are filtered out (for example null/zero-dimension bars), these indices can differ.
*/
var isActive = activeBar && String(entry.originalDataIndex) === activeIndex && (activeDataKey == null || dataKey === activeDataKey);
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
stayInLayer = _useState2[0],
setStayInLayer = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
hasMountedActive = _useState4[0],
setHasMountedActive = _useState4[1];
useEffect(() => {
var rafId;
if (isActive) {
// 1. Enter the layer immediately
setStayInLayer(true);
// 2. Wait for the browser to paint the "inactive" state in the new layer,
// then switch to active to trigger the CSS transition (width grow).
rafId = requestAnimationFrame(() => {
setHasMountedActive(true);
});
} else {
setHasMountedActive(false);
}
return () => {
cancelAnimationFrame(rafId);
};
}, [isActive]);
var handleTransitionEnd = useCallback(() => {
// 4. Leave the layer only when the exit transition finishes
if (!isActive) {
setStayInLayer(false);
}
}, [isActive]);
// Determine props:
// - If entering (isActive=true) but not mounted yet (hasMountedActive=false), pass isActive=false (inactive size).
// - If exiting (isActive=false), pass isActive=false (inactive size).
var isVisuallyActive = isActive && hasMountedActive;
// Render in ZIndexLayer if active OR if we are waiting for exit transition
var shouldRenderInLayer = isActive || stayInLayer;
var option;
if (isActive) {
if (activeBar === true) {
option = shape;
} else {
option = activeBar;
}
} else {
option = shape;
}
var content = /*#__PURE__*/React.createElement(BarRectangle, _extends({}, baseProps, {
name: String(baseProps.name)
}, entry, {
isActive: isVisuallyActive,
option: option,
index: index,
dataKey: dataKey,
animationElapsedTime: props.animationElapsedTime,
isAnimating: props.isAnimating,
isEntrance: props.isEntrance,
onTransitionEnd: handleTransitionEnd
}));
if (shouldRenderInLayer) {
return /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: DefaultZIndexes.activeBar
}, /*#__PURE__*/React.createElement(BarStackClipLayer, {
index: entry.originalDataIndex
}, content));
}
return content;
}
function BarRectangleNeverActive(props) {
var shape = props.shape,
baseProps = props.baseProps,
entry = props.entry,
index = props.index,
dataKey = props.dataKey;
return /*#__PURE__*/React.createElement(BarRectangle, _extends({}, baseProps, {
name: String(baseProps.name)
}, entry, {
isActive: false,
option: shape,
index: index,
dataKey: dataKey,
animationElapsedTime: props.animationElapsedTime,
isAnimating: props.isAnimating,
isEntrance: props.isEntrance
}));
}
function BarRectangles(_ref3) {
var _svgPropertiesNoEvent;
var data = _ref3.data,
props = _ref3.props,
animationElapsedTime = _ref3.animationElapsedTime,
isAnimating = _ref3.isAnimating,
isEntrance = _ref3.isEntrance;
var _ref4 = (_svgPropertiesNoEvent = svgPropertiesNoEvents(props)) !== null && _svgPropertiesNoEvent !== void 0 ? _svgPropertiesNoEvent : {},
id = _ref4.id,
baseProps = _objectWithoutProperties(_ref4, _excluded3);
var shape = props.shape,
dataKey = props.dataKey,
activeBar = props.activeBar;
var onMouseEnterFromProps = props.onMouseEnter,
onItemClickFromProps = props.onClick,
onMouseLeaveFromProps = props.onMouseLeave,
restOfAllOtherProps = _objectWithoutProperties(props, _excluded4);
var onMouseEnterFromContext = useMouseEnterItemDispatch(onMouseEnterFromProps, dataKey, id);
var onMouseLeaveFromContext = useMouseLeaveItemDispatch(onMouseLeaveFromProps);
var onClickFromContext = useMouseClickItemDispatch(onItemClickFromProps, dataKey, id);
if (!data) {
return null;
}
return /*#__PURE__*/React.createElement(React.Fragment, null, data.map((entry, i) => {
return /*#__PURE__*/React.createElement(BarStackClipLayer, _extends({
index: entry.originalDataIndex
// https://github.com/recharts/recharts/issues/5415
,
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),
className: "recharts-bar-rectangle"
}, adaptEventsOfChild(restOfAllOtherProps, entry, i), {
onMouseEnter: onMouseEnterFromContext(entry, entry.originalDataIndex),
onMouseLeave: onMouseLeaveFromContext(entry, entry.originalDataIndex),
onClick: onClickFromContext(entry, entry.originalDataIndex)
}), activeBar ? /*#__PURE__*/React.createElement(BarRectangleWithActiveState, {
shape: shape,
activeBar: activeBar,
baseProps: baseProps,
entry: entry,
index: i,
dataKey: dataKey,
animationElapsedTime: animationElapsedTime,
isAnimating: isAnimating,
isEntrance: isEntrance
}) :
/*#__PURE__*/
/*
* If the `activeBar` prop is falsy, then let's call the variant without hooks.
* Using the `selectActiveTooltipIndex` selector is usually fast
* but in charts with large-ish amount of data even the few nanoseconds add up to a noticeable jank.
* If the activeBar is false then we don't need to know which index is active - because we won't use it anyway.
* So let's just skip the hooks altogether. That way, React can skip rendering the component,
* and can skip the tree reconciliation for its children too.
* Because we can't call hooks conditionally, we need to have a separate component for that.
*/
React.createElement(BarRectangleNeverActive, {
shape: shape,
baseProps: baseProps,
entry: entry,
index: i,
dataKey: dataKey,
animationElapsedTime: animationElapsedTime,
isAnimating: isAnimating,
isEntrance: isEntrance
}));
}));
}
var defaultBarAnimateItems = (items, animationElapsedTime, layout) => {
if (items == null) return [];
if (animationElapsedTime === 1) {
return items.flatMap(item => item.status === 'removed' ? [] : [item.next]);
}
return items.flatMap(item => {
if (item.status === 'removed') {
// animate removed items to 0 height/width respective of layout
if (layout === 'horizontal') {
return [_objectSpread(_objectSpread({}, item.prev), {}, {
height: interpolate(item.prev.height, 0, animationElapsedTime),
y: interpolate(item.prev.y, item.prev.y + item.prev.height, animationElapsedTime)
})];
}
return [_objectSpread(_objectSpread({}, item.prev), {}, {
width: interpolate(item.prev.width, 0, animationElapsedTime)
})];
}
if (item.status === 'matched') {
return [_objectSpread(_objectSpread({}, item.next), {}, {
x: interpolate(item.prev.x, item.next.x, animationElapsedTime),
y: interpolate(item.prev.y, item.next.y, animationElapsedTime),
width: interpolate(item.prev.width, item.next.width, animationElapsedTime),
height: interpolate(item.prev.height, item.next.height, animationElapsedTime)
})];
}
// added
var next = item.next;
if (layout === 'horizontal') {
return [_objectSpread(_objectSpread({}, next), {}, {
height: interpolate(0, next.height, animationElapsedTime),
y: interpolate(next.stackedBarStart, next.y, animationElapsedTime)
})];
}
return [_objectSpread(_objectSpread({}, next), {}, {
width: interpolate(0, next.width, animationElapsedTime),
x: interpolate(next.stackedBarStart, next.x, animationElapsedTime)
})];
});
};
function RectanglesWithAnimation(_ref5) {
var props = _ref5.props,
previousRectanglesRef = _ref5.previousRectanglesRef;
var data = props.data,
isAnimationActive = props.isAnimationActive,
animationBegin = props.animationBegin,
animationDuration = props.animationDuration,
animationEasing = props.animationEasing,
animationInterpolateFn = props.animationInterpolateFn,
layout = props.layout;
var _useAnimationCallback = useAnimationCallbacks(props.onAnimationStart, props.onAnimationEnd),
isAnimating = _useAnimationCallback.isAnimating,
handleAnimationStart = _useAnimationCallback.handleAnimationStart,
handleAnimationEnd = _useAnimationCallback.handleAnimationEnd;
return /*#__PURE__*/React.createElement(BarLabelListProvider, {
showLabels: !isAnimating,
rects: data
}, /*#__PURE__*/React.createElement(AnimatedItems, {
animationInput: data,
animationIdPrefix: "recharts-bar-",
items: data,
previousItemsRef: previousRectanglesRef,
isAnimationActive: isAnimationActive,
animationBegin: animationBegin,
animationDuration: animationDuration,
animationEasing: animationEasing,
onAnimationStart: handleAnimationStart,
onAnimationEnd: handleAnimationEnd,
animationInterpolateFn: animationInterpolateFn,
animationMatchBy: props.animationMatchBy,
layout: layout
}, (stepData, animationElapsedTime, isEntrance) => /*#__PURE__*/React.createElement(Layer, null, /*#__PURE__*/React.createElement(BarRectangles, {
props: props,
data: stepData,
animationElapsedTime: animationElapsedTime,
isAnimating: isAnimating || animationElapsedTime < 1,
isEntrance: isEntrance
}))), /*#__PURE__*/React.createElement(LabelListFromLabelProp, {
label: props.label
}), props.children);
}
function RenderRectangles(props) {
var previousRectanglesRef = useRef(null);
return /*#__PURE__*/React.createElement(RectanglesWithAnimation, {
previousRectanglesRef: previousRectanglesRef,
props: props
});
}
var defaultMinPointSize = 0;
var errorBarDataPointFormatter = (dataPoint, dataKey) => {
/**
* if the value coming from `selectBarRectangles` is an array then this is a stacked bar chart.
* arr[1] represents end value of the bar since the data is in the form of [startValue, endValue].
* */
var value = Array.isArray(dataPoint.value) ? dataPoint.value[1] : dataPoint.value;
return {
x: dataPoint.x,
y: dataPoint.y,
value,
// getValueByDataKey does not validate the output type
errorVal: getValueByDataKey(dataPoint, dataKey)
};
};
class BarWithState extends PureComponent {
render() {
var _this$props = this.props,
hide = _this$props.hide,
data = _this$props.data,
dataKey = _this$props.dataKey,
className = _this$props.className,
xAxisId = _this$props.xAxisId,
yAxisId = _this$props.yAxisId,
needClip = _this$props.needClip,
background = _this$props.background,
id = _this$props.id;
if (hide || data == null) {
return null;
}
var layerClass = clsx('recharts-bar', className);
var clipPathId = id;
return /*#__PURE__*/React.createElement(Layer, {
className: layerClass,
id: id
}, needClip && /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement(GraphicalItemClipPath, {
clipPathId: clipPathId,
xAxisId: xAxisId,
yAxisId: yAxisId
})), /*#__PURE__*/React.createElement(Layer, {
className: "recharts-bar-rectangles",
clipPath: needClip ? "url(#clipPath-".concat(clipPathId, ")") : undefined
}, /*#__PURE__*/React.createElement(BarBackground, {
data: data,
dataKey: dataKey,
background: background,
allOtherBarProps: this.props
}), /*#__PURE__*/React.createElement(RenderRectangles, this.props)));
}
}
export var defaultBarProps = {
activeBar: false,
animationBegin: 0,
animationDuration: 400,
animationEasing: 'ease',
animationInterpolateFn: defaultBarAnimateItems,
animationMatchBy: matchAppend,
background: false,
hide: false,
isAnimationActive: 'auto',
label: false,
legendType: 'rect',
minPointSize: defaultMinPointSize,
shape: defaultBarShape,
xAxisId: 0,
yAxisId: 0,
zIndex: DefaultZIndexes.bar
};
function BarImpl(props) {
var xAxisId = props.xAxisId,
yAxisId = props.yAxisId,
hide = props.hide,
legendType = props.legendType,
minPointSize = props.minPointSize,
activeBar = props.activeBar,
animationBegin = props.animationBegin,
animationDuration = props.animationDuration,
animationEasing = props.animationEasing,
isAnimationActive = props.isAnimationActive;
var _useNeedsClip = useNeedsClip(xAxisId, yAxisId),
needClip = _useNeedsClip.needClip;
var layout = useChartLayout();
var isPanorama = useIsPanorama();
var cells = findAllByType(props.children, Cell);
var rects = useAppSelector(state => selectBarRectangles(state, props.id, isPanorama, cells));
if (layout !== 'vertical' && layout !== 'horizontal') {
return null;
}
var errorBarOffset;
var firstDataPoint = rects === null || rects === void 0 ? void 0 : rects[0];
if (firstDataPoint == null || firstDataPoint.height == null || firstDataPoint.width == null) {
errorBarOffset = 0;
} else {
errorBarOffset = layout === 'vertical' ? firstDataPoint.height / 2 : firstDataPoint.width / 2;
}
return /*#__PURE__*/React.createElement(SetErrorBarContext, {
xAxisId: xAxisId,
yAxisId: yAxisId,
data: rects,
dataPointFormatter: errorBarDataPointFormatter,
errorBarOffset: errorBarOffset
}, /*#__PURE__*/React.createElement(BarWithState, _extends({}, props, {
layout: layout,
needClip: needClip,
data: rects,
xAxisId: xAxisId,
yAxisId: yAxisId,
hide: hide,
legendType: legendType,
minPointSize: minPointSize,
activeBar: activeBar,
animationBegin: animationBegin,
animationDuration: animationDuration,
animationEasing: animationEasing,
isAnimationActive: isAnimationActive
})));
}
export function computeBarRectangles(_ref6) {
var layout = _ref6.layout,
_ref6$barSettings = _ref6.barSettings,
dataKey = _ref6$barSettings.dataKey,
minPointSizeProp = _ref6$barSettings.minPointSize,
hasCustomShape = _ref6$barSettings.hasCustomShape,
pos = _ref6.pos,
bandSize = _ref6.bandSize,
xAxis = _ref6.xAxis,
yAxis = _ref6.yAxis,
xAxisTicks = _ref6.xAxisTicks,
yAxisTicks = _ref6.yAxisTicks,
stackedData = _ref6.stackedData,
displayedData = _ref6.displayedData,
offset = _ref6.offset,
cells = _ref6.cells,
parentViewBox = _ref6.parentViewBox,
dataStartIndex = _ref6.dataStartIndex;
var numericAxis = layout === 'horizontal' ? yAxis : xAxis;
// @ts-expect-error this assumes that the domain is always numeric, but doesn't check for it
var stackedDomain = stackedData ? numericAxis.scale.domain() : null;
var baseValue = getBaseValueOfBar({
numericAxis
});
var stackedBarStart = numericAxis.scale.map(baseValue);
return displayedData.map((entry, index) => {
var value, x, y, width, height, background;
if (stackedData) {
// Use dataStartIndex to access the correct element in the full stackedData array
var untruncatedValue = stackedData[index + dataStartIndex];
if (untruncatedValue == null) {
return null;
}
value = truncateByDomain(untruncatedValue, stackedDomain);
} else {
value = getValueByDataKey(entry, dataKey);
if (!Array.isArray(value)) {
value = [baseValue, value];
}
}
var minPointSize = minPointSizeCallback(minPointSizeProp, defaultMinPointSize)(value[1], index);
if (layout === 'horizontal') {
var _ref7;
var baseValueScale = yAxis.scale.map(value[0]);
var currentValueScale = yAxis.scale.map(value[1]);
if (baseValueScale == null || currentValueScale == null) {
return null;
}
x = getCateCoordinateOfBar({
axis: xAxis,
ticks: xAxisTicks,
bandSize,
offset: pos.offset,
entry,
index
});
y = (_ref7 = currentValueScale !== null && currentValueScale !== void 0 ? currentValueScale : baseValueScale) !== null && _ref7 !== void 0 ? _ref7 : undefined;
width = pos.size;
var computedHeight = baseValueScale - currentValueScale;
height = isNan(computedHeight) ? 0 : computedHeight;
background = {
x,
y: offset.top,
width,
height: offset.height
};
if (Math.abs(minPointSize) > 0 && Math.abs(height) < Math.abs(minPointSize)) {
var delta = mathSign(height || minPointSize) * (Math.abs(minPointSize) - Math.abs(height));
y -= delta;
height += delta;
}
} else {
var _baseValueScale = xAxis.scale.map(value[0]);
var _currentValueScale = xAxis.scale.map(value[1]);
if (_baseValueScale == null || _currentValueScale == null) {
return null;
}
x = _baseValueScale;
y = getCateCoordinateOfBar({
axis: yAxis,
ticks: yAxisTicks,
bandSize,
offset: pos.offset,
entry,
index
});
width = _currentValueScale - _baseValueScale;
height = pos.size;
background = {
x: offset.left,
y,
width: offset.width,
height
};
if (Math.abs(minPointSize) > 0 && Math.abs(width) < Math.abs(minPointSize)) {
var _delta = mathSign(width || minPointSize) * (Math.abs(minPointSize) - Math.abs(width));
width += _delta;
}
}
/*
* Filter out 0-dimension rectangles early to avoid creating unnecessary component trees.
* BarStack clip-paths use originalDataIndex, so sparse filtered arrays remain index-stable.
* Bars with a custom shape are not filtered out: the custom renderer may still draw something
* visible at zero-dimension positions (e.g. horizontal lines in a BoxPlot).
*/
if (x == null || y == null || width == null || height == null || !hasCustomShape && (width === 0 || height === 0)) {
return null;
}
var barRectangleItem = _objectSpread(_objectSpread({}, entry), {}, {
stackedBarStart,
x,
y,
width,
height,
value: stackedData ? value : value[1],
payload: entry,
background,
tooltipPosition: {
x: x + width / 2,
y: y + height / 2
},
parentViewBox,
originalDataIndex: index
}, cells && cells[index] && cells[index].props);
return barRectangleItem;
}).filter(Boolean);
}
function BarFn(outsideProps) {
var props = resolveDefaultProps(outsideProps, defaultBarProps);
// stackId may arrive from props or from BarStack context
var stackId = useStackId(props.stackId);
var isPanorama = useIsPanorama();
// Report all props to Redux store first, before calling any hooks, to avoid circular dependencies.
return /*#__PURE__*/React.createElement(RegisterGraphicalItemId, {
id: props.id,
type: "bar"
}, id => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetLegendPayload, {
legendPayload: computeLegendPayloadFromBarData(props)
}), /*#__PURE__*/React.createElement(SetBarTooltipEntrySettings, {
dataKey: props.dataKey,
stroke: props.stroke,
strokeWidth: props.strokeWidth,
fill: props.fill,
name: props.name,
hide: props.hide,
unit: props.unit,
formatter: props.formatter,
tooltipType: props.tooltipType,
id: id
}), /*#__PURE__*/React.createElement(SetCartesianGraphicalItem, {
type: "bar",
id: id
// Bar does not allow setting data directly on the graphical item (why?)
,
data: undefined,
xAxisId: props.xAxisId,
yAxisId: props.yAxisId,
zAxisId: 0,
dataKey: props.dataKey,
stackId: stackId,
hide: props.hide,
barSize: props.barSize,
minPointSize: props.minPointSize,
maxBarSize: props.maxBarSize,
isPanorama: isPanorama,
hasCustomShape: props.shape != null && props.shape !== defaultBarShape
}), /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: props.zIndex
}, /*#__PURE__*/React.createElement(BarImpl, _extends({}, props, {
id: id
})))));
}
/**
* @provides ErrorBarContext
* @provides LabelListContext
* @provides CellReader
* @consumes CartesianChartContext
* @consumes BarStackContext
*/
export var Bar = /*#__PURE__*/React.memo(BarFn, propsAreEqual);
// @ts-expect-error we need to set the displayName for debugging purposes
Bar.displayName = 'Bar';

View file

@ -0,0 +1,115 @@
var _excluded = ["index"];
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); }
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; }
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; }
import * as React from 'react';
import { createContext, useContext, useMemo } from 'react';
import { getNormalizedStackId } from '../util/ChartUtils';
import { useUniqueId } from '../util/useUniqueId';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { useAppSelector } from '../state/hooks';
import { selectStackRects } from '../state/selectors/barStackSelectors';
import { useIsPanorama } from '../context/PanoramaContext';
import { Layer } from '../container/Layer';
import { Rectangle } from '../shape/Rectangle';
import { propsAreEqual } from '../util/propsAreEqual';
var BarStackContext = /*#__PURE__*/createContext(undefined);
/**
* Hook to resolve the stack ID for a Bar component.
* If a stack ID is provided via props, it is used directly.
* Otherwise, this will read stack ID from BarStack context if available.
* If both are undefined, it returns undefined.
* @param childStackId
*/
export var useStackId = childStackId => {
var stackSettings = useContext(BarStackContext);
if (stackSettings != null) {
return stackSettings.stackId;
}
if (childStackId == null) {
return undefined;
}
return getNormalizedStackId(childStackId);
};
export var defaultBarStackProps = {
radius: 0
};
var getClipPathId = (stackId, index) => {
return "recharts-bar-stack-clip-path-".concat(stackId, "-").concat(index);
};
export var useBarStackClipPathUrl = index => {
var barStackContext = useContext(BarStackContext);
if (barStackContext == null) {
return undefined;
}
var stackId = barStackContext.stackId;
return "url(#".concat(getClipPathId(stackId, index), ")");
};
export var BarStackClipLayer = _ref => {
var index = _ref.index,
rest = _objectWithoutProperties(_ref, _excluded);
var clipPathUrl = useBarStackClipPathUrl(index);
return /*#__PURE__*/React.createElement(Layer, _extends({
className: "recharts-bar-stack-layer",
clipPath: clipPathUrl
}, rest));
};
/**
* This React component will render a clipPath that the individual bars in the stack will reference
* to achieve rounded corners for the entire stack.
*/
var BarStackClipPath = _ref2 => {
var stackId = _ref2.stackId,
radius = _ref2.radius;
var isPanorama = useIsPanorama();
var positions = useAppSelector(state => selectStackRects(state, stackId, isPanorama));
if (positions == null || positions.length === 0) {
return null;
}
/*
* Render one clipPath per rectangle in the stack.
* Each rectangle corresponds to one data entry in the chart.
*/
return /*#__PURE__*/React.createElement("defs", null, positions.map((pos, index) => {
if (pos == null) {
return null;
}
var clipPathId = getClipPathId(stackId, index);
return /*#__PURE__*/React.createElement("clipPath", {
key: clipPathId,
id: clipPathId
}, /*#__PURE__*/React.createElement(Rectangle, {
isAnimationActive: false,
isUpdateAnimationActive: false,
x: pos.x,
y: pos.y,
width: pos.width,
height: pos.height,
radius: radius
}));
}));
};
var BarStackImpl = props => {
var resolvedStackId = useUniqueId('recharts-bar-stack', getNormalizedStackId(props.stackId));
var _resolveDefaultProps = resolveDefaultProps(props, defaultBarStackProps),
children = _resolveDefaultProps.children,
radius = _resolveDefaultProps.radius;
var context = useMemo(() => ({
stackId: resolvedStackId,
radius
}), [resolvedStackId, radius]);
return /*#__PURE__*/React.createElement(BarStackContext.Provider, {
value: context
}, /*#__PURE__*/React.createElement(BarStackClipPath, {
stackId: resolvedStackId,
radius: radius
}), children);
};
/**
* @provides BarStackContext
* @since 3.6
*/
export var BarStack = /*#__PURE__*/React.memo(BarStackImpl, propsAreEqual);

858
frontend/node_modules/recharts/es6/cartesian/Brush.js generated vendored Normal file
View file

@ -0,0 +1,858 @@
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); }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
import * as React from 'react';
import { Children, PureComponent, useCallback, useContext, useEffect } from 'react';
import { clsx } from 'clsx';
import { scalePoint } from 'victory-vendor/d3-scale';
import range from 'es-toolkit/compat/range';
import { Layer } from '../container/Layer';
import { Text } from '../component/Text';
import { getValueByDataKey } from '../util/ChartUtils';
import { isNumber, isNotNil } from '../util/DataUtils';
import { generatePrefixStyle } from '../util/CssPrefixUtils';
import { useChartData, useDataIndex } from '../context/chartDataContext';
import { BrushUpdateDispatchContext } from '../context/brushUpdateContext';
import { useAppDispatch, useAppSelector } from '../state/hooks';
import { setDataStartEndIndexes } from '../state/chartDataSlice';
import { setBrushSettings } from '../state/brushSlice';
import { PanoramaContextProvider } from '../context/PanoramaContext';
import { selectBrushDimensions } from '../state/selectors/brushSelectors';
import { useBrushChartSynchronisation } from '../synchronisation/useChartSynchronisation';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
// Why is this tickFormatter different from the other TickFormatters? This one allows to return numbers too for some reason.
function DefaultTraveller(props) {
var x = props.x,
y = props.y,
width = props.width,
height = props.height,
stroke = props.stroke;
var lineY = Math.floor(y + height / 2) - 1;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
x: x,
y: y,
width: width,
height: height,
fill: stroke,
stroke: "none"
}), /*#__PURE__*/React.createElement("line", {
x1: x + 1,
y1: lineY,
x2: x + width - 1,
y2: lineY,
fill: "none",
stroke: "#fff"
}), /*#__PURE__*/React.createElement("line", {
x1: x + 1,
y1: lineY + 2,
x2: x + width - 1,
y2: lineY + 2,
fill: "none",
stroke: "#fff"
}));
}
function Traveller(props) {
var travellerProps = props.travellerProps,
travellerType = props.travellerType;
if (/*#__PURE__*/React.isValidElement(travellerType)) {
// @ts-expect-error element cloning disagrees with the types (and it should)
return /*#__PURE__*/React.cloneElement(travellerType, travellerProps);
}
if (typeof travellerType === 'function') {
return travellerType(travellerProps);
}
return /*#__PURE__*/React.createElement(DefaultTraveller, travellerProps);
}
function getNameFromUnknown(value) {
if (isNotNil(value) && typeof value === 'object' && 'name' in value && typeof value.name === 'string') {
return value.name;
}
return undefined;
}
function getAriaLabel(data, startIndex, endIndex) {
var start = getNameFromUnknown(data[startIndex]);
var end = getNameFromUnknown(data[endIndex]);
return "Min value: ".concat(start, ", Max value: ").concat(end);
}
function TravellerLayer(_ref) {
var otherProps = _ref.otherProps,
travellerX = _ref.travellerX,
id = _ref.id,
onMouseEnter = _ref.onMouseEnter,
onMouseLeave = _ref.onMouseLeave,
onMouseDown = _ref.onMouseDown,
onTouchStart = _ref.onTouchStart,
onTravellerMoveKeyboard = _ref.onTravellerMoveKeyboard,
onFocus = _ref.onFocus,
onBlur = _ref.onBlur;
var y = otherProps.y,
xFromProps = otherProps.x,
travellerWidth = otherProps.travellerWidth,
height = otherProps.height,
traveller = otherProps.traveller,
ariaLabel = otherProps.ariaLabel,
data = otherProps.data,
startIndex = otherProps.startIndex,
endIndex = otherProps.endIndex;
var x = Math.max(travellerX, xFromProps);
var travellerProps = _objectSpread(_objectSpread({}, svgPropertiesNoEvents(otherProps)), {}, {
x,
y,
width: travellerWidth,
height
});
var ariaLabelBrush = ariaLabel || getAriaLabel(data, startIndex, endIndex);
return /*#__PURE__*/React.createElement(Layer, {
tabIndex: 0,
role: "slider",
"aria-label": ariaLabelBrush,
"aria-valuenow": travellerX,
className: "recharts-brush-traveller",
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
onMouseDown: onMouseDown,
onTouchStart: onTouchStart,
onKeyDown: e => {
if (!['ArrowLeft', 'ArrowRight'].includes(e.key)) {
return;
}
e.preventDefault();
e.stopPropagation();
onTravellerMoveKeyboard(e.key === 'ArrowRight' ? 1 : -1, id);
},
onFocus: onFocus,
onBlur: onBlur,
style: {
cursor: 'col-resize'
}
}, /*#__PURE__*/React.createElement(Traveller, {
travellerType: traveller,
travellerProps: travellerProps
}));
}
/*
* This one cannot be a React Component because React is not happy with it returning only string | number.
* React wants a full React.JSX.Element but that is not compatible with Text component.
*/
function getTextOfTick(props) {
var index = props.index,
data = props.data,
tickFormatter = props.tickFormatter,
dataKey = props.dataKey;
var text = getValueByDataKey(data[index], dataKey, index);
return typeof tickFormatter === 'function' ? tickFormatter(text, index) : text;
}
function getIndexInRange(valueRange, x) {
var len = valueRange.length;
var start = 0;
var end = len - 1;
while (end - start > 1) {
var middle = Math.floor((start + end) / 2);
var middleValue = valueRange[middle];
if (middleValue != null && middleValue > x) {
end = middle;
} else {
start = middle;
}
}
var endValue = valueRange[end];
return endValue != null && x >= endValue ? end : start;
}
function getIndex(_ref2) {
var startX = _ref2.startX,
endX = _ref2.endX,
scaleValues = _ref2.scaleValues,
gap = _ref2.gap,
data = _ref2.data;
var lastIndex = data.length - 1;
var min = Math.min(startX, endX);
var max = Math.max(startX, endX);
var minIndex = getIndexInRange(scaleValues, min);
var maxIndex = getIndexInRange(scaleValues, max);
return {
startIndex: minIndex - minIndex % gap,
endIndex: maxIndex === lastIndex ? lastIndex : maxIndex - maxIndex % gap
};
}
function Background(_ref3) {
var x = _ref3.x,
y = _ref3.y,
width = _ref3.width,
height = _ref3.height,
fill = _ref3.fill,
stroke = _ref3.stroke;
return /*#__PURE__*/React.createElement("rect", {
stroke: stroke,
fill: fill,
x: x,
y: y,
width: width,
height: height
});
}
function BrushText(_ref4) {
var startIndex = _ref4.startIndex,
endIndex = _ref4.endIndex,
y = _ref4.y,
height = _ref4.height,
travellerWidth = _ref4.travellerWidth,
stroke = _ref4.stroke,
tickFormatter = _ref4.tickFormatter,
dataKey = _ref4.dataKey,
data = _ref4.data,
startX = _ref4.startX,
endX = _ref4.endX;
var offset = 5;
var attrs = {
pointerEvents: 'none',
fill: stroke
};
return /*#__PURE__*/React.createElement(Layer, {
className: "recharts-brush-texts"
}, /*#__PURE__*/React.createElement(Text, _extends({
textAnchor: "end",
verticalAnchor: "middle",
x: Math.min(startX, endX) - offset,
y: y + height / 2
}, attrs), getTextOfTick({
index: startIndex,
tickFormatter,
dataKey,
data
})), /*#__PURE__*/React.createElement(Text, _extends({
textAnchor: "start",
verticalAnchor: "middle",
x: Math.max(startX, endX) + travellerWidth + offset,
y: y + height / 2
}, attrs), getTextOfTick({
index: endIndex,
tickFormatter,
dataKey,
data
})));
}
function Slide(_ref5) {
var y = _ref5.y,
height = _ref5.height,
stroke = _ref5.stroke,
travellerWidth = _ref5.travellerWidth,
startX = _ref5.startX,
endX = _ref5.endX,
onMouseEnter = _ref5.onMouseEnter,
onMouseLeave = _ref5.onMouseLeave,
onMouseDown = _ref5.onMouseDown,
onTouchStart = _ref5.onTouchStart;
var x = Math.min(startX, endX) + travellerWidth;
var width = Math.max(Math.abs(endX - startX) - travellerWidth, 0);
return /*#__PURE__*/React.createElement("rect", {
className: "recharts-brush-slide",
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
onMouseDown: onMouseDown,
onTouchStart: onTouchStart,
style: {
cursor: 'move'
},
stroke: "none",
fill: stroke,
fillOpacity: 0.2,
x: x,
y: y,
width: width,
height: height
});
}
function Panorama(_ref6) {
var x = _ref6.x,
y = _ref6.y,
width = _ref6.width,
height = _ref6.height,
data = _ref6.data,
children = _ref6.children,
padding = _ref6.padding;
var isPanoramic = React.Children.count(children) === 1;
if (!isPanoramic) {
return null;
}
var chartElement = Children.only(children);
if (!chartElement) {
return null;
}
return /*#__PURE__*/React.cloneElement(chartElement, {
x,
y,
width,
height,
margin: padding,
compact: true,
data
});
}
var createScale = _ref7 => {
var data = _ref7.data,
startIndex = _ref7.startIndex,
endIndex = _ref7.endIndex,
x = _ref7.x,
width = _ref7.width,
travellerWidth = _ref7.travellerWidth;
if (!data || !data.length) {
return {};
}
var len = data.length;
var scale = scalePoint().domain(range(0, len)).range([x, x + width - travellerWidth]);
var scaleValues = scale.domain().map(entry => scale(entry)).filter(isNotNil);
return {
isTextActive: false,
isSlideMoving: false,
isTravellerMoving: false,
isTravellerFocused: false,
startX: scale(startIndex),
endX: scale(endIndex),
scale,
scaleValues
};
};
var isTouch = e => e.changedTouches && !!e.changedTouches.length;
class BrushWithState extends PureComponent {
constructor(props) {
super(props);
_defineProperty(this, "handleDrag", e => {
if (this.leaveTimer) {
clearTimeout(this.leaveTimer);
this.leaveTimer = null;
}
if (this.state.isTravellerMoving) {
this.handleTravellerMove(e);
} else if (this.state.isSlideMoving) {
this.handleSlideDrag(e);
}
});
_defineProperty(this, "handleTouchMove", e => {
var _e$changedTouches;
var touch = (_e$changedTouches = e.changedTouches) === null || _e$changedTouches === void 0 ? void 0 : _e$changedTouches[0];
if (touch != null) {
this.handleDrag(touch);
}
});
_defineProperty(this, "handleDragEnd", () => {
this.setState({
isTravellerMoving: false,
isSlideMoving: false
}, () => {
var _this$props = this.props,
endIndex = _this$props.endIndex,
onDragEnd = _this$props.onDragEnd,
startIndex = _this$props.startIndex;
onDragEnd === null || onDragEnd === void 0 || onDragEnd({
endIndex,
startIndex
});
});
this.detachDragEndListener();
});
_defineProperty(this, "handleLeaveWrapper", () => {
if (this.state.isTravellerMoving || this.state.isSlideMoving) {
this.leaveTimer = window.setTimeout(this.handleDragEnd, this.props.leaveTimeOut);
}
});
_defineProperty(this, "handleEnterSlideOrTraveller", () => {
this.setState({
isTextActive: true
});
});
_defineProperty(this, "handleLeaveSlideOrTraveller", () => {
this.setState({
isTextActive: false
});
});
_defineProperty(this, "handleSlideDragStart", e => {
var event = isTouch(e) ? e.changedTouches[0] : e;
if (event == null) {
return;
}
this.setState({
isTravellerMoving: false,
isSlideMoving: true,
slideMoveStartX: event.pageX
});
this.attachDragEndListener();
});
_defineProperty(this, "handleTravellerMoveKeyboard", (direction, id) => {
var _this$props2 = this.props,
data = _this$props2.data,
gap = _this$props2.gap,
startIndex = _this$props2.startIndex,
endIndex = _this$props2.endIndex;
// scaleValues are a list of coordinates. For example: [65, 250, 435, 620, 805, 990].
var _this$state = this.state,
scaleValues = _this$state.scaleValues,
startX = _this$state.startX,
endX = _this$state.endX;
if (scaleValues == null) {
return;
}
// unless we search for the closest scaleValue to the current coordinate
// we need to move travelers via index when using the keyboard
var currentIndex = -1;
if (id === 'startX') {
currentIndex = startIndex;
} else if (id === 'endX') {
currentIndex = endIndex;
}
if (currentIndex < 0 || currentIndex >= data.length) {
return;
}
var newIndex = currentIndex + direction;
if (newIndex === -1 || newIndex >= scaleValues.length) {
return;
}
var newScaleValue = scaleValues[newIndex];
if (newScaleValue == null) {
return;
}
// Prevent travellers from being on top of each other or overlapping
if (id === 'startX' && newScaleValue >= endX || id === 'endX' && newScaleValue <= startX) {
return;
}
this.setState(
// @ts-expect-error not sure why typescript is not happy with this, partial update is fine in React
{
[id]: newScaleValue
}, () => {
this.props.onChange(getIndex({
startX: this.state.startX,
endX: this.state.endX,
data,
gap,
scaleValues
}));
});
});
this.travellerDragStartHandlers = {
startX: this.handleTravellerDragStart.bind(this, 'startX'),
endX: this.handleTravellerDragStart.bind(this, 'endX')
};
this.state = {
brushMoveStartX: 0,
movingTravellerId: undefined,
endX: 0,
startX: 0,
slideMoveStartX: 0
};
}
static getDerivedStateFromProps(nextProps, prevState) {
var data = nextProps.data,
width = nextProps.width,
x = nextProps.x,
travellerWidth = nextProps.travellerWidth,
startIndex = nextProps.startIndex,
endIndex = nextProps.endIndex,
startIndexControlledFromProps = nextProps.startIndexControlledFromProps,
endIndexControlledFromProps = nextProps.endIndexControlledFromProps;
if (data !== prevState.prevData) {
return _objectSpread({
prevData: data,
prevTravellerWidth: travellerWidth,
prevX: x,
prevWidth: width
}, data && data.length ? createScale({
data,
width,
x,
travellerWidth,
startIndex,
endIndex
}) : {
scale: undefined,
scaleValues: undefined
});
}
var prevScale = prevState.scale;
if (prevScale && (width !== prevState.prevWidth || x !== prevState.prevX || travellerWidth !== prevState.prevTravellerWidth)) {
prevScale.range([x, x + width - travellerWidth]);
var scaleValues = prevScale.domain().map(entry => prevScale(entry)).filter(value => value != null);
return {
prevData: data,
prevTravellerWidth: travellerWidth,
prevX: x,
prevWidth: width,
startX: prevScale(nextProps.startIndex),
endX: prevScale(nextProps.endIndex),
scaleValues
};
}
if (prevState.scale && !prevState.isSlideMoving && !prevState.isTravellerMoving && !prevState.isTravellerFocused && !prevState.isTextActive) {
/*
* If the startIndex or endIndex are controlled from the outside,
* we need to keep the startX and end up to date.
* Also we do not want to do that while user is interacting in the brush,
* because this will trigger re-render and interrupt the drag&drop.
*/
if (startIndexControlledFromProps != null && prevState.prevStartIndexControlledFromProps !== startIndexControlledFromProps) {
return {
startX: prevState.scale(startIndexControlledFromProps),
prevStartIndexControlledFromProps: startIndexControlledFromProps
};
}
if (endIndexControlledFromProps != null && prevState.prevEndIndexControlledFromProps !== endIndexControlledFromProps) {
return {
endX: prevState.scale(endIndexControlledFromProps),
prevEndIndexControlledFromProps: endIndexControlledFromProps
};
}
}
return null;
}
componentWillUnmount() {
if (this.leaveTimer) {
clearTimeout(this.leaveTimer);
this.leaveTimer = null;
}
this.detachDragEndListener();
}
attachDragEndListener() {
window.addEventListener('mouseup', this.handleDragEnd, true);
window.addEventListener('touchend', this.handleDragEnd, true);
window.addEventListener('mousemove', this.handleDrag, true);
}
detachDragEndListener() {
window.removeEventListener('mouseup', this.handleDragEnd, true);
window.removeEventListener('touchend', this.handleDragEnd, true);
window.removeEventListener('mousemove', this.handleDrag, true);
}
handleSlideDrag(e) {
var _this$state2 = this.state,
slideMoveStartX = _this$state2.slideMoveStartX,
startX = _this$state2.startX,
endX = _this$state2.endX,
scaleValues = _this$state2.scaleValues;
if (scaleValues == null) {
return;
}
var _this$props3 = this.props,
x = _this$props3.x,
width = _this$props3.width,
travellerWidth = _this$props3.travellerWidth,
startIndex = _this$props3.startIndex,
endIndex = _this$props3.endIndex,
onChange = _this$props3.onChange,
data = _this$props3.data,
gap = _this$props3.gap;
var delta = e.pageX - slideMoveStartX;
if (delta > 0) {
delta = Math.min(delta, x + width - travellerWidth - endX, x + width - travellerWidth - startX);
} else if (delta < 0) {
delta = Math.max(delta, x - startX, x - endX);
}
var newIndex = getIndex({
startX: startX + delta,
endX: endX + delta,
data,
gap,
scaleValues
});
if ((newIndex.startIndex !== startIndex || newIndex.endIndex !== endIndex) && onChange) {
onChange(newIndex);
}
this.setState({
startX: startX + delta,
endX: endX + delta,
slideMoveStartX: e.pageX
});
}
handleTravellerDragStart(id, e) {
var event = isTouch(e) ? e.changedTouches[0] : e;
if (event == null) {
return;
}
this.setState({
isSlideMoving: false,
isTravellerMoving: true,
movingTravellerId: id,
brushMoveStartX: event.pageX
});
this.attachDragEndListener();
}
handleTravellerMove(e) {
var _this$state3 = this.state,
brushMoveStartX = _this$state3.brushMoveStartX,
movingTravellerId = _this$state3.movingTravellerId,
endX = _this$state3.endX,
startX = _this$state3.startX,
scaleValues = _this$state3.scaleValues;
if (movingTravellerId == null || scaleValues == null) {
return;
}
var prevValue = this.state[movingTravellerId];
var _this$props4 = this.props,
x = _this$props4.x,
width = _this$props4.width,
travellerWidth = _this$props4.travellerWidth,
onChange = _this$props4.onChange,
gap = _this$props4.gap,
data = _this$props4.data;
var params = {
startX: this.state.startX,
endX: this.state.endX,
data,
gap,
scaleValues
};
var delta = e.pageX - brushMoveStartX;
if (delta > 0) {
delta = Math.min(delta, x + width - travellerWidth - prevValue);
} else if (delta < 0) {
delta = Math.max(delta, x - prevValue);
}
params[movingTravellerId] = prevValue + delta;
var newIndex = getIndex(params);
var startIndex = newIndex.startIndex,
endIndex = newIndex.endIndex;
var isFullGap = () => {
var lastIndex = data.length - 1;
if (movingTravellerId === 'startX' && (endX > startX ? startIndex % gap === 0 : endIndex % gap === 0) || endX < startX && endIndex === lastIndex || movingTravellerId === 'endX' && (endX > startX ? endIndex % gap === 0 : startIndex % gap === 0) || endX > startX && endIndex === lastIndex) {
return true;
}
return false;
};
this.setState(
// @ts-expect-error not sure why typescript is not happy with this, partial update is fine in React
{
[movingTravellerId]: prevValue + delta,
brushMoveStartX: e.pageX
}, () => {
if (onChange) {
if (isFullGap()) {
onChange(newIndex);
}
}
});
}
render() {
var _this$props5 = this.props,
data = _this$props5.data,
className = _this$props5.className,
children = _this$props5.children,
x = _this$props5.x,
y = _this$props5.y,
dy = _this$props5.dy,
width = _this$props5.width,
height = _this$props5.height,
alwaysShowText = _this$props5.alwaysShowText,
fill = _this$props5.fill,
stroke = _this$props5.stroke,
startIndex = _this$props5.startIndex,
endIndex = _this$props5.endIndex,
travellerWidth = _this$props5.travellerWidth,
tickFormatter = _this$props5.tickFormatter,
dataKey = _this$props5.dataKey,
padding = _this$props5.padding;
var _this$state4 = this.state,
startX = _this$state4.startX,
endX = _this$state4.endX,
isTextActive = _this$state4.isTextActive,
isSlideMoving = _this$state4.isSlideMoving,
isTravellerMoving = _this$state4.isTravellerMoving,
isTravellerFocused = _this$state4.isTravellerFocused;
if (!data || !data.length || !isNumber(x) || !isNumber(y) || !isNumber(width) || !isNumber(height) || width <= 0 || height <= 0) {
return null;
}
var layerClass = clsx('recharts-brush', className);
var style = generatePrefixStyle('userSelect', 'none');
var calculatedY = y + (dy !== null && dy !== void 0 ? dy : 0);
return /*#__PURE__*/React.createElement(Layer, {
className: layerClass,
onMouseLeave: this.handleLeaveWrapper,
onTouchMove: this.handleTouchMove,
style: style
}, /*#__PURE__*/React.createElement(Background, {
x: x,
y: calculatedY,
width: width,
height: height,
fill: fill,
stroke: stroke
}), /*#__PURE__*/React.createElement(PanoramaContextProvider, null, /*#__PURE__*/React.createElement(Panorama, {
x: x,
y: calculatedY,
width: width,
height: height,
data: data,
padding: padding
}, children)), /*#__PURE__*/React.createElement(Slide, {
y: calculatedY,
height: height,
stroke: stroke,
travellerWidth: travellerWidth,
startX: startX,
endX: endX,
onMouseEnter: this.handleEnterSlideOrTraveller,
onMouseLeave: this.handleLeaveSlideOrTraveller,
onMouseDown: this.handleSlideDragStart,
onTouchStart: this.handleSlideDragStart
}), /*#__PURE__*/React.createElement(TravellerLayer, {
travellerX: startX,
id: "startX",
otherProps: _objectSpread(_objectSpread({}, this.props), {}, {
y: calculatedY
}),
onMouseEnter: this.handleEnterSlideOrTraveller,
onMouseLeave: this.handleLeaveSlideOrTraveller,
onMouseDown: this.travellerDragStartHandlers.startX,
onTouchStart: this.travellerDragStartHandlers.startX,
onTravellerMoveKeyboard: this.handleTravellerMoveKeyboard,
onFocus: () => {
this.setState({
isTravellerFocused: true
});
},
onBlur: () => {
this.setState({
isTravellerFocused: false
});
}
}), /*#__PURE__*/React.createElement(TravellerLayer, {
travellerX: endX,
id: "endX",
otherProps: _objectSpread(_objectSpread({}, this.props), {}, {
y: calculatedY
}),
onMouseEnter: this.handleEnterSlideOrTraveller,
onMouseLeave: this.handleLeaveSlideOrTraveller,
onMouseDown: this.travellerDragStartHandlers.endX,
onTouchStart: this.travellerDragStartHandlers.endX,
onTravellerMoveKeyboard: this.handleTravellerMoveKeyboard,
onFocus: () => {
this.setState({
isTravellerFocused: true
});
},
onBlur: () => {
this.setState({
isTravellerFocused: false
});
}
}), (isTextActive || isSlideMoving || isTravellerMoving || isTravellerFocused || alwaysShowText) && /*#__PURE__*/React.createElement(BrushText, {
startIndex: startIndex,
endIndex: endIndex,
y: calculatedY,
height: height,
travellerWidth: travellerWidth,
stroke: stroke,
tickFormatter: tickFormatter,
dataKey: dataKey,
data: data,
startX: startX,
endX: endX
}));
}
}
function BrushInternal(props) {
var dispatch = useAppDispatch();
var chartData = useChartData();
var dataIndexes = useDataIndex();
var onChangeFromContext = useContext(BrushUpdateDispatchContext);
var onChangeFromProps = props.onChange;
var startIndexFromProps = props.startIndex,
endIndexFromProps = props.endIndex;
useEffect(() => {
// start and end index can be controlled from props, and we need them to stay up-to-date in the Redux state too
dispatch(setDataStartEndIndexes({
startIndex: startIndexFromProps,
endIndex: endIndexFromProps
}));
}, [dispatch, endIndexFromProps, startIndexFromProps]);
useBrushChartSynchronisation();
var onChange = useCallback(nextState => {
if (dataIndexes == null) {
return;
}
var startIndex = dataIndexes.startIndex,
endIndex = dataIndexes.endIndex;
if (nextState.startIndex !== startIndex || nextState.endIndex !== endIndex) {
onChangeFromContext === null || onChangeFromContext === void 0 || onChangeFromContext(nextState);
onChangeFromProps === null || onChangeFromProps === void 0 || onChangeFromProps(nextState);
dispatch(setDataStartEndIndexes(nextState));
}
}, [onChangeFromProps, onChangeFromContext, dispatch, dataIndexes]);
var brushDimensions = useAppSelector(selectBrushDimensions);
if (brushDimensions == null || dataIndexes == null || chartData == null || !chartData.length) {
return null;
}
var startIndex = dataIndexes.startIndex,
endIndex = dataIndexes.endIndex;
var x = brushDimensions.x,
y = brushDimensions.y,
width = brushDimensions.width;
var contextProperties = {
data: chartData,
x,
y,
width,
startIndex,
endIndex,
onChange
};
return /*#__PURE__*/React.createElement(BrushWithState, _extends({}, props, contextProperties, {
startIndexControlledFromProps: startIndexFromProps !== null && startIndexFromProps !== void 0 ? startIndexFromProps : undefined,
endIndexControlledFromProps: endIndexFromProps !== null && endIndexFromProps !== void 0 ? endIndexFromProps : undefined
}));
}
function BrushSettingsDispatcher(props) {
var dispatch = useAppDispatch();
useEffect(() => {
dispatch(setBrushSettings(props));
return () => {
dispatch(setBrushSettings(null));
};
}, [dispatch, props]);
return null;
}
export var defaultBrushProps = {
height: 40,
travellerWidth: 5,
gap: 1,
fill: '#fff',
stroke: '#666',
padding: {
top: 1,
right: 1,
bottom: 1,
left: 1
},
leaveTimeOut: 1000,
alwaysShowText: false
};
/**
* Renders a scrollbar that allows the user to zoom and pan in the chart along its XAxis.
* It also allows you to render a small overview of the chart inside the brush that is always visible
* and shows the full data set so that the user can see where they are zoomed in.
*
* If a chart is synchronized with other charts using the `syncId` prop on the chart,
* the brush will also synchronize the zooming and panning between all synchronized charts.
*
* @see {@link https://recharts.github.io/en-US/examples/BrushBarChart/ BarChart with Brush}
* @see {@link https://recharts.github.io/en-US/examples/SynchronizedLineChart/ Synchronized Brush}
*
* @consumes CartesianChartContext
*/
export function Brush(outsideProps) {
var props = resolveDefaultProps(outsideProps, defaultBrushProps);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BrushSettingsDispatcher, {
height: props.height,
x: props.x,
y: props.y,
width: props.width,
padding: props.padding
}), /*#__PURE__*/React.createElement(BrushInternal, props));
}
Brush.displayName = 'Brush';

View file

@ -0,0 +1,488 @@
var _excluded = ["axisLine", "width", "height", "className", "hide", "ticks", "axisType", "axisId"];
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
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; }
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; }
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); }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
/**
* @fileOverview Cartesian Axis
*/
import * as React from 'react';
import { useState, useRef, useCallback, forwardRef, useImperativeHandle, useEffect } from 'react';
import get from 'es-toolkit/compat/get';
import { clsx } from 'clsx';
import { Layer } from '../container/Layer';
import { Text, isValidTextAnchor } from '../component/Text';
import { CartesianLabelContextProvider, CartesianLabelFromLabelProp } from '../component/Label';
import { isNumber, noop } from '../util/DataUtils';
import { adaptEventsOfChild } from '../util/types';
import { getTicks } from './getTicks';
import { svgPropertiesNoEvents, svgPropertiesNoEventsFromUnknown } from '../util/svgPropertiesNoEvents';
import { getCalculatedYAxisWidth } from '../util/YAxisUtils';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { ZIndexLayer } from '../zIndex/ZIndexLayer';
import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
import { getClassNameFromUnknown } from '../util/getClassNameFromUnknown';
import { removeRenderedTicks, setRenderedTicks } from '../state/renderedTicksSlice';
import { useAppDispatch } from '../state/hooks';
/** The orientation of the axis in correspondence to the chart */
/** A unit to be appended to a value */
/** The formatter function of tick */
export var defaultCartesianAxisProps = {
x: 0,
y: 0,
width: 0,
height: 0,
viewBox: {
x: 0,
y: 0,
width: 0,
height: 0
},
// The orientation of axis
orientation: 'bottom',
// The ticks
ticks: [],
stroke: '#666',
tickLine: true,
axisLine: true,
tick: true,
mirror: false,
minTickGap: 5,
// The width or height of tick
tickSize: 6,
tickMargin: 2,
interval: 'preserveEnd',
zIndex: DefaultZIndexes.axis
};
/*
* `viewBox` and `scale` are SVG attributes.
* Recharts however - unfortunately - has its own attributes named `viewBox` and `scale`
* that are completely different data shape and different purpose.
*/
function AxisLine(axisLineProps) {
var x = axisLineProps.x,
y = axisLineProps.y,
width = axisLineProps.width,
height = axisLineProps.height,
orientation = axisLineProps.orientation,
mirror = axisLineProps.mirror,
axisLine = axisLineProps.axisLine,
otherSvgProps = axisLineProps.otherSvgProps;
if (!axisLine) {
return null;
}
var props = _objectSpread(_objectSpread(_objectSpread({}, otherSvgProps), svgPropertiesNoEvents(axisLine)), {}, {
fill: 'none'
});
if (orientation === 'top' || orientation === 'bottom') {
var needHeight = +(orientation === 'top' && !mirror || orientation === 'bottom' && mirror);
props = _objectSpread(_objectSpread({}, props), {}, {
x1: x,
y1: y + needHeight * height,
x2: x + width,
y2: y + needHeight * height
});
} else {
var needWidth = +(orientation === 'left' && !mirror || orientation === 'right' && mirror);
props = _objectSpread(_objectSpread({}, props), {}, {
x1: x + needWidth * width,
y1: y,
x2: x + needWidth * width,
y2: y + height
});
}
return /*#__PURE__*/React.createElement("line", _extends({}, props, {
className: clsx('recharts-cartesian-axis-line', get(axisLine, 'className'))
}));
}
/**
* Calculate the coordinates of endpoints in ticks.
* @param data The data of a simple tick.
* @param x The x-coordinate of the axis.
* @param y The y-coordinate of the axis.
* @param width The width of the axis.
* @param height The height of the axis.
* @param orientation The orientation of the axis.
* @param tickSize The length of the tick line.
* @param mirror If true, the ticks are mirrored.
* @param tickMargin The margin between the tick line and the tick text.
* @returns An object with `line` and `tick` coordinates.
* `line` is the coordinates for the tick line, and `tick` is the coordinate for the tick text.
*/
function getTickLineCoord(data, x, y, width, height, orientation, tickSize, mirror, tickMargin) {
var x1, x2, y1, y2, tx, ty;
var sign = mirror ? -1 : 1;
var finalTickSize = data.tickSize || tickSize;
var tickCoord = isNumber(data.tickCoord) ? data.tickCoord : data.coordinate;
switch (orientation) {
case 'top':
x1 = x2 = data.coordinate;
y2 = y + +!mirror * height;
y1 = y2 - sign * finalTickSize;
ty = y1 - sign * tickMargin;
tx = tickCoord;
break;
case 'left':
y1 = y2 = data.coordinate;
x2 = x + +!mirror * width;
x1 = x2 - sign * finalTickSize;
tx = x1 - sign * tickMargin;
ty = tickCoord;
break;
case 'right':
y1 = y2 = data.coordinate;
x2 = x + +mirror * width;
x1 = x2 + sign * finalTickSize;
tx = x1 + sign * tickMargin;
ty = tickCoord;
break;
default:
x1 = x2 = data.coordinate;
y2 = y + +mirror * height;
y1 = y2 + sign * finalTickSize;
ty = y1 + sign * tickMargin;
tx = tickCoord;
break;
}
return {
line: {
x1,
y1,
x2,
y2
},
tick: {
x: tx,
y: ty
}
};
}
/**
* @param orientation The orientation of the axis.
* @param mirror If true, the ticks are mirrored.
* @returns The text anchor of the tick.
*/
function getTickTextAnchor(orientation, mirror) {
switch (orientation) {
case 'left':
return mirror ? 'start' : 'end';
case 'right':
return mirror ? 'end' : 'start';
default:
return 'middle';
}
}
/**
* @param orientation The orientation of the axis.
* @param mirror If true, the ticks are mirrored.
* @returns The vertical text anchor of the tick.
*/
function getTickVerticalAnchor(orientation, mirror) {
switch (orientation) {
case 'left':
case 'right':
return 'middle';
case 'top':
return mirror ? 'start' : 'end';
default:
return mirror ? 'end' : 'start';
}
}
function TickItem(props) {
var option = props.option,
tickProps = props.tickProps,
value = props.value;
var tickItem;
var combinedClassName = clsx(tickProps.className, 'recharts-cartesian-axis-tick-value');
if (/*#__PURE__*/React.isValidElement(option)) {
// @ts-expect-error element cloning is not typed
tickItem = /*#__PURE__*/React.cloneElement(option, _objectSpread(_objectSpread({}, tickProps), {}, {
className: combinedClassName
}));
} else if (typeof option === 'function') {
tickItem = option(_objectSpread(_objectSpread({}, tickProps), {}, {
className: combinedClassName
}));
} else {
var className = 'recharts-cartesian-axis-tick-value';
if (typeof option !== 'boolean') {
className = clsx(className, getClassNameFromUnknown(option));
}
tickItem = /*#__PURE__*/React.createElement(Text, _extends({}, tickProps, {
className: className
}), value);
}
return tickItem;
}
function RenderedTicksReporter(_ref) {
var ticks = _ref.ticks,
axisType = _ref.axisType,
axisId = _ref.axisId;
var dispatch = useAppDispatch();
useEffect(() => {
if (axisId == null || axisType == null) {
return noop;
}
// Filter out irrelevant internal properties before exposing externally
var tickItems = ticks.map(tick => ({
value: tick.value,
coordinate: tick.coordinate,
offset: tick.offset,
index: tick.index
}));
dispatch(setRenderedTicks({
ticks: tickItems,
axisId,
axisType
}));
return () => {
dispatch(removeRenderedTicks({
axisId,
axisType
}));
};
}, [dispatch, ticks, axisId, axisType]);
return null;
}
var Ticks = /*#__PURE__*/forwardRef((props, ref) => {
var _props$ticks = props.ticks,
ticks = _props$ticks === void 0 ? [] : _props$ticks,
tick = props.tick,
tickLine = props.tickLine,
stroke = props.stroke,
tickFormatter = props.tickFormatter,
unit = props.unit,
padding = props.padding,
tickTextProps = props.tickTextProps,
orientation = props.orientation,
mirror = props.mirror,
x = props.x,
y = props.y,
width = props.width,
height = props.height,
tickSize = props.tickSize,
tickMargin = props.tickMargin,
fontSize = props.fontSize,
letterSpacing = props.letterSpacing,
getTicksConfig = props.getTicksConfig,
events = props.events,
axisType = props.axisType,
axisId = props.axisId;
// @ts-expect-error some properties are optional in props but required in getTicks
var finalTicks = getTicks(_objectSpread(_objectSpread({}, getTicksConfig), {}, {
ticks
}), fontSize, letterSpacing);
var axisProps = svgPropertiesNoEvents(getTicksConfig);
var customTickProps = svgPropertiesNoEventsFromUnknown(tick);
// Use user-provided textAnchor if available, otherwise calculate from orientation/mirror
var textAnchor = isValidTextAnchor(axisProps.textAnchor) ? axisProps.textAnchor : getTickTextAnchor(orientation, mirror);
var verticalAnchor = getTickVerticalAnchor(orientation, mirror);
var tickLinePropsObject = {};
if (typeof tickLine === 'object') {
tickLinePropsObject = tickLine;
}
var tickLineProps = _objectSpread(_objectSpread({}, axisProps), {}, {
fill: 'none'
}, tickLinePropsObject);
var tickLineCoords = finalTicks.map(entry => _objectSpread({
entry
}, getTickLineCoord(entry, x, y, width, height, orientation, tickSize, mirror, tickMargin)));
var tickLines = tickLineCoords.map(_ref2 => {
var entry = _ref2.entry,
lineCoord = _ref2.line;
return /*#__PURE__*/React.createElement(Layer, {
className: "recharts-cartesian-axis-tick",
key: "tick-".concat(entry.value, "-").concat(entry.coordinate, "-").concat(entry.tickCoord)
}, tickLine && /*#__PURE__*/React.createElement("line", _extends({}, tickLineProps, lineCoord, {
className: clsx('recharts-cartesian-axis-tick-line', get(tickLine, 'className'))
})));
});
var tickLabels = tickLineCoords.map((_ref3, i) => {
var _ref4, _tickTextProps$angle;
var entry = _ref3.entry,
tickCoord = _ref3.tick;
// @ts-expect-error we're not checking that padding and orientation types are in sync
var tickProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
verticalAnchor
}, axisProps), {}, {
textAnchor,
stroke: 'none',
fill: stroke
}, tickCoord), {}, {
index: i,
payload: entry,
visibleTicksCount: finalTicks.length,
tickFormatter,
padding
}, tickTextProps), {}, {
angle: (_ref4 = (_tickTextProps$angle = tickTextProps === null || tickTextProps === void 0 ? void 0 : tickTextProps.angle) !== null && _tickTextProps$angle !== void 0 ? _tickTextProps$angle : axisProps.angle) !== null && _ref4 !== void 0 ? _ref4 : 0
});
// @ts-expect-error customTickProps is contributing unknown props which we don't type properly
var finalTickProps = _objectSpread(_objectSpread({}, tickProps), customTickProps);
return /*#__PURE__*/React.createElement(Layer, _extends({
className: "recharts-cartesian-axis-tick-label",
key: "tick-label-".concat(entry.value, "-").concat(entry.coordinate, "-").concat(entry.tickCoord)
}, adaptEventsOfChild(events, entry, i)), tick && /*#__PURE__*/React.createElement(TickItem, {
option: tick,
tickProps: finalTickProps,
value: "".concat(typeof tickFormatter === 'function' ? tickFormatter(entry.value, i) : entry.value).concat(unit || '')
}));
});
return /*#__PURE__*/React.createElement("g", {
className: "recharts-cartesian-axis-ticks recharts-".concat(axisType, "-ticks")
}, /*#__PURE__*/React.createElement(RenderedTicksReporter, {
ticks: finalTicks,
axisId: axisId,
axisType: axisType
}), tickLabels.length > 0 && /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: DefaultZIndexes.label
}, /*#__PURE__*/React.createElement("g", {
className: "recharts-cartesian-axis-tick-labels recharts-".concat(axisType, "-tick-labels"),
ref: ref
}, tickLabels)), tickLines.length > 0 && /*#__PURE__*/React.createElement("g", {
className: "recharts-cartesian-axis-tick-lines recharts-".concat(axisType, "-tick-lines")
}, tickLines));
});
var CartesianAxisComponent = /*#__PURE__*/forwardRef((props, ref) => {
var axisLine = props.axisLine,
width = props.width,
height = props.height,
className = props.className,
hide = props.hide,
ticks = props.ticks,
axisType = props.axisType,
axisId = props.axisId,
rest = _objectWithoutProperties(props, _excluded);
var _useState = useState(''),
_useState2 = _slicedToArray(_useState, 2),
fontSize = _useState2[0],
setFontSize = _useState2[1];
var _useState3 = useState(''),
_useState4 = _slicedToArray(_useState3, 2),
letterSpacing = _useState4[0],
setLetterSpacing = _useState4[1];
var tickRefs = useRef(null);
useImperativeHandle(ref, () => ({
getCalculatedWidth: () => {
var _props$labelRef;
return getCalculatedYAxisWidth({
ticks: tickRefs.current,
label: (_props$labelRef = props.labelRef) === null || _props$labelRef === void 0 ? void 0 : _props$labelRef.current,
labelGapWithTick: 5,
tickSize: props.tickSize,
tickMargin: props.tickMargin
});
}
}));
var layerRef = useCallback(el => {
if (el) {
var tickNodes = el.getElementsByClassName('recharts-cartesian-axis-tick-value');
tickRefs.current = tickNodes;
var tick = tickNodes[0];
if (tick) {
var computedStyle = window.getComputedStyle(tick);
var calculatedFontSize = computedStyle.fontSize;
var calculatedLetterSpacing = computedStyle.letterSpacing;
if (calculatedFontSize !== fontSize || calculatedLetterSpacing !== letterSpacing) {
setFontSize(calculatedFontSize);
setLetterSpacing(calculatedLetterSpacing);
}
}
}
}, [fontSize, letterSpacing]);
if (hide) {
return null;
}
/*
* This is different condition from what validateWidthHeight is doing;
* the CartesianAxis does allow width or height to be undefined.
*/
if (width != null && width <= 0 || height != null && height <= 0) {
return null;
}
return /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: props.zIndex
}, /*#__PURE__*/React.createElement(Layer, {
className: clsx('recharts-cartesian-axis', className)
}, /*#__PURE__*/React.createElement(AxisLine, {
x: props.x,
y: props.y,
width: width,
height: height,
orientation: props.orientation,
mirror: props.mirror,
axisLine: axisLine,
otherSvgProps: svgPropertiesNoEvents(props)
}), /*#__PURE__*/React.createElement(Ticks, {
ref: layerRef,
axisType: axisType,
events: rest,
fontSize: fontSize,
getTicksConfig: props,
height: props.height,
letterSpacing: letterSpacing,
mirror: props.mirror,
orientation: props.orientation,
padding: props.padding,
stroke: props.stroke,
tick: props.tick,
tickFormatter: props.tickFormatter,
tickLine: props.tickLine,
tickMargin: props.tickMargin,
tickSize: props.tickSize,
tickTextProps: props.tickTextProps,
ticks: ticks,
unit: props.unit,
width: props.width,
x: props.x,
y: props.y,
axisId: axisId
}), /*#__PURE__*/React.createElement(CartesianLabelContextProvider, {
x: props.x,
y: props.y,
width: props.width,
height: props.height,
lowerWidth: props.width,
upperWidth: props.width
}, /*#__PURE__*/React.createElement(CartesianLabelFromLabelProp, {
label: props.label,
labelRef: props.labelRef
}), props.children)));
});
/**
* @deprecated
*
* This component is not meant to be used directly in app code.
* Use XAxis or YAxis instead.
*
* Starting from Recharts v4.0 we will make this component internal only.
*/
export var CartesianAxis = /*#__PURE__*/React.forwardRef((outsideProps, ref) => {
var props = resolveDefaultProps(outsideProps, defaultCartesianAxisProps);
return /*#__PURE__*/React.createElement(CartesianAxisComponent, _extends({}, props, {
ref: ref
}));
});
CartesianAxis.displayName = 'CartesianAxis';

View file

@ -0,0 +1,385 @@
var _excluded = ["x1", "y1", "x2", "y2", "key"],
_excluded2 = ["offset"],
_excluded3 = ["xAxisId", "yAxisId"],
_excluded4 = ["xAxisId", "yAxisId"];
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
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); }
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; }
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; }
import * as React from 'react';
import { warn } from '../util/LogUtils';
import { isNumber } from '../util/DataUtils';
import { getCoordinatesOfGrid, getTicksOfAxis } from '../util/ChartUtils';
import { getTicks } from './getTicks';
import { defaultCartesianAxisProps } from './CartesianAxis';
import { useChartHeight, useChartWidth, useOffsetInternal } from '../context/chartLayoutContext';
import { selectAxisPropsNeededForCartesianGridTicksGenerator } from '../state/selectors/axisSelectors';
import { useAppSelector } from '../state/hooks';
import { useIsPanorama } from '../context/PanoramaContext';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
import { isPositiveNumber } from '../util/isWellBehavedNumber';
import { ZIndexLayer } from '../zIndex/ZIndexLayer';
import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
/**
* The <CartesianGrid horizontal
*/
var Background = props => {
var fill = props.fill;
if (!fill || fill === 'none') {
return null;
}
var fillOpacity = props.fillOpacity,
x = props.x,
y = props.y,
width = props.width,
height = props.height,
ry = props.ry;
return /*#__PURE__*/React.createElement("rect", {
x: x,
y: y,
ry: ry,
width: width,
height: height,
stroke: "none",
fill: fill,
fillOpacity: fillOpacity,
className: "recharts-cartesian-grid-bg"
});
};
function LineItem(_ref) {
var option = _ref.option,
lineItemProps = _ref.lineItemProps;
var lineItem;
if (/*#__PURE__*/React.isValidElement(option)) {
// @ts-expect-error typescript does not see the props type when cloning an element
lineItem = /*#__PURE__*/React.cloneElement(option, lineItemProps);
} else if (typeof option === 'function') {
lineItem = option(lineItemProps);
} else {
var _svgPropertiesNoEvent;
var x1 = lineItemProps.x1,
y1 = lineItemProps.y1,
x2 = lineItemProps.x2,
y2 = lineItemProps.y2,
key = lineItemProps.key,
others = _objectWithoutProperties(lineItemProps, _excluded);
var _ref2 = (_svgPropertiesNoEvent = svgPropertiesNoEvents(others)) !== null && _svgPropertiesNoEvent !== void 0 ? _svgPropertiesNoEvent : {},
__ = _ref2.offset,
restOfFilteredProps = _objectWithoutProperties(_ref2, _excluded2);
lineItem = /*#__PURE__*/React.createElement("line", _extends({}, restOfFilteredProps, {
x1: x1,
y1: y1,
x2: x2,
y2: y2,
fill: "none",
key: key
}));
}
return lineItem;
}
function HorizontalGridLines(props) {
var x = props.x,
width = props.width,
_props$horizontal = props.horizontal,
horizontal = _props$horizontal === void 0 ? true : _props$horizontal,
horizontalPoints = props.horizontalPoints;
if (!horizontal || !horizontalPoints || !horizontalPoints.length) {
return null;
}
var xAxisId = props.xAxisId,
yAxisId = props.yAxisId,
otherLineItemProps = _objectWithoutProperties(props, _excluded3);
var items = horizontalPoints.map((entry, i) => {
var lineItemProps = _objectSpread(_objectSpread({}, otherLineItemProps), {}, {
x1: x,
y1: entry,
x2: x + width,
y2: entry,
key: "line-".concat(i),
index: i
});
return /*#__PURE__*/React.createElement(LineItem, {
key: "line-".concat(i),
option: horizontal,
lineItemProps: lineItemProps
});
});
return /*#__PURE__*/React.createElement("g", {
className: "recharts-cartesian-grid-horizontal"
}, items);
}
function VerticalGridLines(props) {
var y = props.y,
height = props.height,
_props$vertical = props.vertical,
vertical = _props$vertical === void 0 ? true : _props$vertical,
verticalPoints = props.verticalPoints;
if (!vertical || !verticalPoints || !verticalPoints.length) {
return null;
}
var xAxisId = props.xAxisId,
yAxisId = props.yAxisId,
otherLineItemProps = _objectWithoutProperties(props, _excluded4);
var items = verticalPoints.map((entry, i) => {
var lineItemProps = _objectSpread(_objectSpread({}, otherLineItemProps), {}, {
x1: entry,
y1: y,
x2: entry,
y2: y + height,
key: "line-".concat(i),
index: i
});
return /*#__PURE__*/React.createElement(LineItem, {
option: vertical,
lineItemProps: lineItemProps,
key: "line-".concat(i)
});
});
return /*#__PURE__*/React.createElement("g", {
className: "recharts-cartesian-grid-vertical"
}, items);
}
function HorizontalStripes(props) {
var horizontalFill = props.horizontalFill,
fillOpacity = props.fillOpacity,
x = props.x,
y = props.y,
width = props.width,
height = props.height,
horizontalPoints = props.horizontalPoints,
_props$horizontal2 = props.horizontal,
horizontal = _props$horizontal2 === void 0 ? true : _props$horizontal2;
if (!horizontal || !horizontalFill || !horizontalFill.length || horizontalPoints == null) {
return null;
}
var roundedSortedHorizontalPoints = horizontalPoints.map(e => Math.round(e + y - y)).sort((a, b) => a - b);
// Why is this condition `!==` instead of `<=` ?
if (y !== roundedSortedHorizontalPoints[0]) {
roundedSortedHorizontalPoints.unshift(0);
}
var items = roundedSortedHorizontalPoints.map((entry, i) => {
// Why do we strip only the last stripe if it is invisible, and not all invisible stripes?
var nextPoint = roundedSortedHorizontalPoints[i + 1];
var lastStripe = nextPoint == null;
var lineHeight = lastStripe ? y + height - entry : nextPoint - entry;
if (lineHeight <= 0) {
return null;
}
var colorIndex = i % horizontalFill.length;
return /*#__PURE__*/React.createElement("rect", {
key: "react-".concat(i),
y: entry,
x: x,
height: lineHeight,
width: width,
stroke: "none",
fill: horizontalFill[colorIndex],
fillOpacity: fillOpacity,
className: "recharts-cartesian-grid-bg"
});
});
return /*#__PURE__*/React.createElement("g", {
className: "recharts-cartesian-gridstripes-horizontal"
}, items);
}
function VerticalStripes(props) {
var _props$vertical2 = props.vertical,
vertical = _props$vertical2 === void 0 ? true : _props$vertical2,
verticalFill = props.verticalFill,
fillOpacity = props.fillOpacity,
x = props.x,
y = props.y,
width = props.width,
height = props.height,
verticalPoints = props.verticalPoints;
if (!vertical || !verticalFill || !verticalFill.length) {
return null;
}
var roundedSortedVerticalPoints = verticalPoints.map(e => Math.round(e + x - x)).sort((a, b) => a - b);
if (x !== roundedSortedVerticalPoints[0]) {
roundedSortedVerticalPoints.unshift(0);
}
var items = roundedSortedVerticalPoints.map((entry, i) => {
var nextPoint = roundedSortedVerticalPoints[i + 1];
var lastStripe = nextPoint == null;
var lineWidth = lastStripe ? x + width - entry : nextPoint - entry;
if (lineWidth <= 0) {
return null;
}
var colorIndex = i % verticalFill.length;
return /*#__PURE__*/React.createElement("rect", {
key: "react-".concat(i),
x: entry,
y: y,
width: lineWidth,
height: height,
stroke: "none",
fill: verticalFill[colorIndex],
fillOpacity: fillOpacity,
className: "recharts-cartesian-grid-bg"
});
});
return /*#__PURE__*/React.createElement("g", {
className: "recharts-cartesian-gridstripes-vertical"
}, items);
}
var defaultVerticalCoordinatesGenerator = (_ref3, syncWithTicks) => {
var xAxis = _ref3.xAxis,
width = _ref3.width,
height = _ref3.height,
offset = _ref3.offset;
return getCoordinatesOfGrid(getTicks(_objectSpread(_objectSpread(_objectSpread({}, defaultCartesianAxisProps), xAxis), {}, {
ticks: getTicksOfAxis(xAxis, true),
viewBox: {
x: 0,
y: 0,
width,
height
}
})), offset.left, offset.left + offset.width, syncWithTicks);
};
var defaultHorizontalCoordinatesGenerator = (_ref4, syncWithTicks) => {
var yAxis = _ref4.yAxis,
width = _ref4.width,
height = _ref4.height,
offset = _ref4.offset;
return getCoordinatesOfGrid(getTicks(_objectSpread(_objectSpread(_objectSpread({}, defaultCartesianAxisProps), yAxis), {}, {
ticks: getTicksOfAxis(yAxis, true),
viewBox: {
x: 0,
y: 0,
width,
height
}
})), offset.top, offset.top + offset.height, syncWithTicks);
};
export var defaultCartesianGridProps = {
horizontal: true,
vertical: true,
// The ordinates of horizontal grid lines
horizontalPoints: [],
// The abscissas of vertical grid lines
verticalPoints: [],
stroke: '#ccc',
fill: 'none',
// The fill of colors of grid lines
verticalFill: [],
horizontalFill: [],
xAxisId: 0,
yAxisId: 0,
syncWithTicks: false,
zIndex: DefaultZIndexes.grid
};
/**
* Renders background grid with lines and fill colors in a Cartesian chart.
*
* @consumes CartesianChartContext
*/
export function CartesianGrid(props) {
var chartWidth = useChartWidth();
var chartHeight = useChartHeight();
var offset = useOffsetInternal();
var propsIncludingDefaults = _objectSpread(_objectSpread({}, resolveDefaultProps(props, defaultCartesianGridProps)), {}, {
x: isNumber(props.x) ? props.x : offset.left,
y: isNumber(props.y) ? props.y : offset.top,
width: isNumber(props.width) ? props.width : offset.width,
height: isNumber(props.height) ? props.height : offset.height
});
var xAxisId = propsIncludingDefaults.xAxisId,
yAxisId = propsIncludingDefaults.yAxisId,
x = propsIncludingDefaults.x,
y = propsIncludingDefaults.y,
width = propsIncludingDefaults.width,
height = propsIncludingDefaults.height,
syncWithTicks = propsIncludingDefaults.syncWithTicks,
horizontalValues = propsIncludingDefaults.horizontalValues,
verticalValues = propsIncludingDefaults.verticalValues;
var isPanorama = useIsPanorama();
var xAxis = useAppSelector(state => selectAxisPropsNeededForCartesianGridTicksGenerator(state, 'xAxis', xAxisId, isPanorama));
var yAxis = useAppSelector(state => selectAxisPropsNeededForCartesianGridTicksGenerator(state, 'yAxis', yAxisId, isPanorama));
if (!isPositiveNumber(width) || !isPositiveNumber(height) || !isNumber(x) || !isNumber(y)) {
return null;
}
/*
* verticalCoordinatesGenerator and horizontalCoordinatesGenerator are defined
* outside the propsIncludingDefaults because they were never part of the original props
* and they were never passed as a prop down to horizontal/vertical custom elements.
* If we add these two to propsIncludingDefaults then we are changing public API.
* Not a bad thing per se but also not necessary.
*/
var verticalCoordinatesGenerator = propsIncludingDefaults.verticalCoordinatesGenerator || defaultVerticalCoordinatesGenerator;
var horizontalCoordinatesGenerator = propsIncludingDefaults.horizontalCoordinatesGenerator || defaultHorizontalCoordinatesGenerator;
var horizontalPoints = propsIncludingDefaults.horizontalPoints,
verticalPoints = propsIncludingDefaults.verticalPoints;
// No horizontal points are specified
if ((!horizontalPoints || !horizontalPoints.length) && typeof horizontalCoordinatesGenerator === 'function') {
var isHorizontalValues = horizontalValues && horizontalValues.length;
var generatorResult = horizontalCoordinatesGenerator({
yAxis: yAxis ? _objectSpread(_objectSpread({}, yAxis), {}, {
ticks: isHorizontalValues ? horizontalValues : yAxis.ticks
}) : undefined,
width: chartWidth !== null && chartWidth !== void 0 ? chartWidth : width,
height: chartHeight !== null && chartHeight !== void 0 ? chartHeight : height,
offset
}, isHorizontalValues ? true : syncWithTicks);
warn(Array.isArray(generatorResult), "horizontalCoordinatesGenerator should return Array but instead it returned [".concat(typeof generatorResult, "]"));
if (Array.isArray(generatorResult)) {
horizontalPoints = generatorResult;
}
}
// No vertical points are specified
if ((!verticalPoints || !verticalPoints.length) && typeof verticalCoordinatesGenerator === 'function') {
var isVerticalValues = verticalValues && verticalValues.length;
var _generatorResult = verticalCoordinatesGenerator({
xAxis: xAxis ? _objectSpread(_objectSpread({}, xAxis), {}, {
ticks: isVerticalValues ? verticalValues : xAxis.ticks
}) : undefined,
width: chartWidth !== null && chartWidth !== void 0 ? chartWidth : width,
height: chartHeight !== null && chartHeight !== void 0 ? chartHeight : height,
offset
}, isVerticalValues ? true : syncWithTicks);
warn(Array.isArray(_generatorResult), "verticalCoordinatesGenerator should return Array but instead it returned [".concat(typeof _generatorResult, "]"));
if (Array.isArray(_generatorResult)) {
verticalPoints = _generatorResult;
}
}
return /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: propsIncludingDefaults.zIndex
}, /*#__PURE__*/React.createElement("g", {
className: "recharts-cartesian-grid"
}, /*#__PURE__*/React.createElement(Background, {
fill: propsIncludingDefaults.fill,
fillOpacity: propsIncludingDefaults.fillOpacity,
x: propsIncludingDefaults.x,
y: propsIncludingDefaults.y,
width: propsIncludingDefaults.width,
height: propsIncludingDefaults.height,
ry: propsIncludingDefaults.ry
}), /*#__PURE__*/React.createElement(HorizontalStripes, _extends({}, propsIncludingDefaults, {
horizontalPoints: horizontalPoints
})), /*#__PURE__*/React.createElement(VerticalStripes, _extends({}, propsIncludingDefaults, {
verticalPoints: verticalPoints
})), /*#__PURE__*/React.createElement(HorizontalGridLines, _extends({}, propsIncludingDefaults, {
offset: offset,
horizontalPoints: horizontalPoints,
xAxis: xAxis,
yAxis: yAxis
})), /*#__PURE__*/React.createElement(VerticalGridLines, _extends({}, propsIncludingDefaults, {
offset: offset,
verticalPoints: verticalPoints,
xAxis: xAxis,
yAxis: yAxis
}))));
}
CartesianGrid.displayName = 'CartesianGrid';

View file

@ -0,0 +1,255 @@
var _excluded = ["direction", "width", "dataKey", "isAnimationActive", "animationBegin", "animationDuration", "animationEasing"];
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); }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
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; }
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; }
/**
* @fileOverview Render a group of error bar
*/
import * as React from 'react';
import { Layer } from '../container/Layer';
import { ReportErrorBarSettings, useErrorBarContext } from '../context/ErrorBarContext';
import { useXAxis, useYAxis } from '../hooks';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
import { useChartLayout } from '../context/chartLayoutContext';
import { CSSTransitionAnimate, extractCssEasing } from '../animation/CSSTransitionAnimate';
import { ZIndexLayer } from '../zIndex/ZIndexLayer';
import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
/**
* So usually the direction is decided by the chart layout.
* Horizontal layout means error bars are vertical means direction=y
* Vertical layout means error bars are horizontal means direction=x
*
* Except! In Scatter chart, error bars can go both ways.
*
* So this property is only ever used in Scatter chart, and ignored elsewhere.
*/
/**
* External ErrorBar props, visible for users of the library
*/
/**
* Props after defaults, and required props have been applied.
*/
function ErrorBarImpl(props) {
var direction = props.direction,
width = props.width,
dataKey = props.dataKey,
isAnimationActive = props.isAnimationActive,
animationBegin = props.animationBegin,
animationDuration = props.animationDuration,
animationEasing = props.animationEasing,
others = _objectWithoutProperties(props, _excluded);
var svgProps = svgPropertiesNoEvents(others);
var _useErrorBarContext = useErrorBarContext(),
data = _useErrorBarContext.data,
dataPointFormatter = _useErrorBarContext.dataPointFormatter,
xAxisId = _useErrorBarContext.xAxisId,
yAxisId = _useErrorBarContext.yAxisId,
offset = _useErrorBarContext.errorBarOffset;
var xAxis = useXAxis(xAxisId);
var yAxis = useYAxis(yAxisId);
if ((xAxis === null || xAxis === void 0 ? void 0 : xAxis.scale) == null || (yAxis === null || yAxis === void 0 ? void 0 : yAxis.scale) == null || data == null) {
return null;
}
// ErrorBar requires type number XAxis, why?
if (direction === 'x' && xAxis.type !== 'number') {
return null;
}
var errorBars = data.map((entry, dataIndex) => {
var _dataPointFormatter = dataPointFormatter(entry, dataKey, direction),
x = _dataPointFormatter.x,
y = _dataPointFormatter.y,
value = _dataPointFormatter.value,
errorVal = _dataPointFormatter.errorVal;
if (!errorVal || x == null || y == null) {
return null;
}
var lineCoordinates = [];
var lowBound, highBound;
if (Array.isArray(errorVal)) {
var _errorVal = _slicedToArray(errorVal, 2),
low = _errorVal[0],
high = _errorVal[1];
if (low == null || high == null) {
return null;
}
lowBound = low;
highBound = high;
} else {
lowBound = highBound = errorVal;
}
if (direction === 'x') {
// error bar for horizontal charts, the y is fixed, x is a range value
var scale = xAxis.scale;
var yMid = y + offset;
var yMin = yMid + width;
var yMax = yMid - width;
var xMin = scale.map(value - lowBound);
var xMax = scale.map(value + highBound);
if (xMin != null && xMax != null) {
// the right line of |--|
lineCoordinates.push({
x1: xMax,
y1: yMin,
x2: xMax,
y2: yMax
});
// the middle line of |--|
lineCoordinates.push({
x1: xMin,
y1: yMid,
x2: xMax,
y2: yMid
});
// the left line of |--|
lineCoordinates.push({
x1: xMin,
y1: yMin,
x2: xMin,
y2: yMax
});
}
} else if (direction === 'y') {
// error bar for horizontal charts, the x is fixed, y is a range value
var _scale = yAxis.scale;
var xMid = x + offset;
var _xMin = xMid - width;
var _xMax = xMid + width;
var _yMin = _scale.map(value - lowBound);
var _yMax = _scale.map(value + highBound);
if (_yMin != null && _yMax != null) {
// the top line
lineCoordinates.push({
x1: _xMin,
y1: _yMax,
x2: _xMax,
y2: _yMax
});
// the middle line
lineCoordinates.push({
x1: xMid,
y1: _yMin,
x2: xMid,
y2: _yMax
});
// the bottom line
lineCoordinates.push({
x1: _xMin,
y1: _yMin,
x2: _xMax,
y2: _yMin
});
}
}
var scaleDirection = direction === 'x' ? 'scaleX' : 'scaleY';
var transformOrigin = "".concat(x + offset, "px ").concat(y + offset, "px");
return /*#__PURE__*/React.createElement(Layer, _extends({
className: "recharts-errorBar",
key: "bar-".concat(x, "-").concat(y, "-").concat(value, "-").concat(dataIndex)
}, svgProps), lineCoordinates.map((c, lineIndex) => {
var lineStyle = isAnimationActive ? {
transformOrigin
} : undefined;
return /*#__PURE__*/React.createElement(CSSTransitionAnimate, {
animationId: "error-bar-".concat(direction, "_").concat(c.x1, "-").concat(c.x2, "-").concat(c.y1, "-").concat(c.y2),
from: "".concat(scaleDirection, "(0)"),
to: "".concat(scaleDirection, "(1)"),
attributeName: "transform",
begin: animationBegin,
easing: extractCssEasing(animationEasing),
isActive: isAnimationActive,
duration: animationDuration,
key: "errorbar-".concat(dataIndex, "-").concat(c.x1, "-").concat(c.y1, "-").concat(c.x2, "-").concat(c.y2, "-").concat(lineIndex)
}, style => /*#__PURE__*/React.createElement("line", _extends({}, c, {
style: _objectSpread(_objectSpread({}, lineStyle), style)
})));
}));
});
return /*#__PURE__*/React.createElement(Layer, {
className: "recharts-errorBars"
}, errorBars);
}
function useErrorBarDirection(directionFromProps) {
var layout = useChartLayout();
if (directionFromProps != null) {
return directionFromProps;
}
if (layout != null) {
return layout === 'horizontal' ? 'y' : 'x';
}
return 'x';
}
export var errorBarDefaultProps = {
stroke: 'black',
strokeWidth: 1.5,
width: 5,
offset: 0,
isAnimationActive: true,
animationBegin: 0,
animationDuration: 400,
animationEasing: 'ease-in-out',
zIndex: DefaultZIndexes.line
};
/**
* ErrorBar renders whiskers to represent error margins on a chart.
*
* It must be a child of a graphical element.
*
* ErrorBar expects data in one of the following forms:
* - Symmetric error bars: a single error value representing both lower and upper bounds.
* - Asymmetric error bars: an array of two values representing lower and upper bounds separately. First value is the lower bound, second value is the upper bound.
*
* The values provided are relative to the main data value.
* For example, if the main data value is 10 and the error value is 2,
* the error bar will extend from 8 to 12 for symmetric error bars.
*
* In other words, what ErrorBar will render is:
* - For symmetric error bars: [value - errorVal, value + errorVal]
* - For asymmetric error bars: [value - errorVal[0], value + errorVal[1]]
*
* In stacked or ranged Bar charts, ErrorBar will use the higher data value
* as the reference point for calculating the error bar positions.
*
* @consumes ErrorBarContext
*/
export function ErrorBar(outsideProps) {
var realDirection = useErrorBarDirection(outsideProps.direction);
var props = resolveDefaultProps(outsideProps, errorBarDefaultProps);
var width = props.width,
isAnimationActive = props.isAnimationActive,
animationBegin = props.animationBegin,
animationDuration = props.animationDuration,
animationEasing = props.animationEasing,
zIndex = props.zIndex;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReportErrorBarSettings, {
dataKey: props.dataKey,
direction: realDirection
}), /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: zIndex
}, /*#__PURE__*/React.createElement(ErrorBarImpl, _extends({}, props, {
direction: realDirection,
width: width,
isAnimationActive: isAnimationActive,
animationBegin: animationBegin,
animationDuration: animationDuration,
animationEasing: animationEasing
}))));
}
ErrorBar.displayName = 'ErrorBar';

467
frontend/node_modules/recharts/es6/cartesian/Funnel.js generated vendored Normal file
View file

@ -0,0 +1,467 @@
var _excluded = ["onMouseEnter", "onClick", "onMouseLeave", "shape", "activeShape"],
_excluded2 = ["id"],
_excluded3 = ["stroke", "fill", "legendType", "hide", "isAnimationActive", "animationBegin", "animationDuration", "animationEasing", "nameKey", "lastShapeType", "id"],
_excluded4 = ["id"];
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
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); }
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; }
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; }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
import * as React from 'react';
import { useMemo, useRef } from 'react';
import omit from 'es-toolkit/compat/omit';
import { clsx } from 'clsx';
import { selectActiveIndex } from '../state/selectors/selectors';
import { useAppSelector } from '../state/hooks';
import { Layer } from '../container/Layer';
import { CartesianLabelListContextProvider, LabelListFromLabelProp } from '../component/LabelList';
import { getPercentValue, interpolate } from '../util/DataUtils';
import { getValueByDataKey } from '../util/ChartUtils';
import { adaptEventsOfChild } from '../util/types';
import { defaultFunnelShape, FunnelTrapezoid } from '../util/FunnelUtils';
import { useMouseClickItemDispatch, useMouseEnterItemDispatch, useMouseLeaveItemDispatch } from '../context/tooltipContext';
import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings';
import { selectFunnelTrapezoids } from '../state/selectors/funnelSelectors';
import { findAllByType } from '../util/ReactUtils';
import { Cell } from '../component/Cell';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { usePlotArea } from '../hooks';
import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
import { AnimatedItems, useAnimationCallbacks } from '../animation/AnimatedItems';
import { matchAppend } from '../animation/matchBy';
import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId';
import { useCartesianChartLayout } from '../context/chartLayoutContext';
/**
* Internal props, combination of external props + defaultProps + private Recharts state
*/
/**
* External props, intended for end users to fill in
*/
var SetFunnelTooltipEntrySettings = /*#__PURE__*/React.memo(_ref => {
var dataKey = _ref.dataKey,
nameKey = _ref.nameKey,
stroke = _ref.stroke,
strokeWidth = _ref.strokeWidth,
fill = _ref.fill,
name = _ref.name,
hide = _ref.hide,
tooltipType = _ref.tooltipType,
formatter = _ref.formatter,
data = _ref.data,
trapezoids = _ref.trapezoids,
id = _ref.id;
var tooltipEntrySettings = {
dataDefinedOnItem: data,
getPosition: index => {
var _trapezoids$Number;
return (_trapezoids$Number = trapezoids[Number(index)]) === null || _trapezoids$Number === void 0 ? void 0 : _trapezoids$Number.tooltipPosition;
},
settings: {
stroke,
strokeWidth,
fill,
dataKey,
name,
nameKey,
hide,
type: tooltipType,
color: fill,
unit: '',
// Funnel does not have unit, why?
formatter,
graphicalItemId: id
}
};
return /*#__PURE__*/React.createElement(SetTooltipEntrySettings, {
tooltipEntrySettings: tooltipEntrySettings
});
});
function FunnelLabelListProvider(_ref2) {
var showLabels = _ref2.showLabels,
trapezoids = _ref2.trapezoids,
children = _ref2.children;
var labelListEntries = useMemo(() => {
if (!showLabels) {
return undefined;
}
return trapezoids === null || trapezoids === void 0 ? void 0 : trapezoids.map(entry => {
var viewBox = entry.labelViewBox;
return _objectSpread(_objectSpread({}, viewBox), {}, {
value: entry.name,
payload: entry.payload,
parentViewBox: entry.parentViewBox,
viewBox,
fill: entry.fill
});
});
}, [showLabels, trapezoids]);
return /*#__PURE__*/React.createElement(CartesianLabelListContextProvider, {
value: labelListEntries
}, children);
}
function FunnelTrapezoids(props) {
var trapezoids = props.trapezoids,
allOtherFunnelProps = props.allOtherFunnelProps,
animationElapsedTime = props.animationElapsedTime,
isAnimating = props.isAnimating,
isEntrance = props.isEntrance;
var activeItemIndex = useAppSelector(state => selectActiveIndex(state, 'item', state.tooltip.settings.trigger, undefined));
var onMouseEnterFromProps = allOtherFunnelProps.onMouseEnter,
onItemClickFromProps = allOtherFunnelProps.onClick,
onMouseLeaveFromProps = allOtherFunnelProps.onMouseLeave,
shape = allOtherFunnelProps.shape,
activeShape = allOtherFunnelProps.activeShape,
restOfAllOtherProps = _objectWithoutProperties(allOtherFunnelProps, _excluded);
var onMouseEnterFromContext = useMouseEnterItemDispatch(onMouseEnterFromProps, allOtherFunnelProps.dataKey, allOtherFunnelProps.id);
var onMouseLeaveFromContext = useMouseLeaveItemDispatch(onMouseLeaveFromProps);
var onClickFromContext = useMouseClickItemDispatch(onItemClickFromProps, allOtherFunnelProps.dataKey, allOtherFunnelProps.id);
return /*#__PURE__*/React.createElement(React.Fragment, null, trapezoids.map((entry, i) => {
var isActiveIndex = Boolean(activeShape) && activeItemIndex === String(i);
var trapezoidOptions = isActiveIndex ? activeShape : shape;
var _entry$option$isActiv = _objectSpread(_objectSpread({}, entry), {}, {
option: trapezoidOptions,
isActive: isActiveIndex,
stroke: entry.stroke,
animationElapsedTime,
isAnimating,
isEntrance
}),
id = _entry$option$isActiv.id,
trapezoidProps = _objectWithoutProperties(_entry$option$isActiv, _excluded2);
return /*#__PURE__*/React.createElement(Layer, _extends({
key: "trapezoid-".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.name, "-").concat(entry === null || entry === void 0 ? void 0 : entry.value),
className: "recharts-funnel-trapezoid"
}, adaptEventsOfChild(restOfAllOtherProps, entry, i), {
onMouseEnter: onMouseEnterFromContext(entry, i),
onMouseLeave: onMouseLeaveFromContext(entry, i),
onClick: onClickFromContext(entry, i)
}), /*#__PURE__*/React.createElement(FunnelTrapezoid, trapezoidProps));
}));
}
var defaultFunnelAnimateItems = (items, animationElapsedTime) => {
if (items == null) return [];
if (animationElapsedTime === 1) {
return items.flatMap(item => item.status === 'removed' ? [] : [item.next]);
}
return items.flatMap(item => {
if (item.status === 'removed') return [];
if (item.status === 'matched') {
return [_objectSpread(_objectSpread({}, item.next), {}, {
x: interpolate(item.prev.x, item.next.x, animationElapsedTime),
y: interpolate(item.prev.y, item.next.y, animationElapsedTime),
upperWidth: interpolate(item.prev.upperWidth, item.next.upperWidth, animationElapsedTime),
lowerWidth: interpolate(item.prev.lowerWidth, item.next.lowerWidth, animationElapsedTime),
height: interpolate(item.prev.height, item.next.height, animationElapsedTime)
})];
}
// added
var next = item.next;
return [_objectSpread(_objectSpread({}, next), {}, {
x: interpolate(next.x + next.upperWidth / 2, next.x, animationElapsedTime),
y: interpolate(next.y + next.height / 2, next.y, animationElapsedTime),
upperWidth: interpolate(0, next.upperWidth, animationElapsedTime),
lowerWidth: interpolate(0, next.lowerWidth, animationElapsedTime),
height: interpolate(0, next.height, animationElapsedTime)
})];
});
};
function TrapezoidsWithAnimation(_ref3) {
var previousTrapezoidsRef = _ref3.previousTrapezoidsRef,
props = _ref3.props;
var trapezoids = props.trapezoids,
isAnimationActive = props.isAnimationActive,
animationBegin = props.animationBegin,
animationDuration = props.animationDuration,
animationEasing = props.animationEasing,
animationInterpolateFn = props.animationInterpolateFn;
var layout = useCartesianChartLayout();
var _useAnimationCallback = useAnimationCallbacks(props.onAnimationStart, props.onAnimationEnd),
isAnimating = _useAnimationCallback.isAnimating,
handleAnimationStart = _useAnimationCallback.handleAnimationStart,
handleAnimationEnd = _useAnimationCallback.handleAnimationEnd;
if (layout == null) return null;
return /*#__PURE__*/React.createElement(FunnelLabelListProvider, {
showLabels: !isAnimating,
trapezoids: trapezoids
}, /*#__PURE__*/React.createElement(AnimatedItems, {
animationInput: trapezoids,
animationIdPrefix: "recharts-funnel-",
items: trapezoids,
previousItemsRef: previousTrapezoidsRef,
isAnimationActive: isAnimationActive,
animationBegin: animationBegin,
animationDuration: animationDuration,
animationEasing: animationEasing,
onAnimationStart: handleAnimationStart,
onAnimationEnd: handleAnimationEnd,
animationInterpolateFn: animationInterpolateFn,
animationMatchBy: props.animationMatchBy,
layout: layout
}, (stepData, animationElapsedTime, isEntrance) => /*#__PURE__*/React.createElement(Layer, null, /*#__PURE__*/React.createElement(FunnelTrapezoids, {
trapezoids: stepData,
allOtherFunnelProps: props,
animationElapsedTime: animationElapsedTime,
isAnimating: isAnimating || animationElapsedTime < 1,
isEntrance: isEntrance
}))), /*#__PURE__*/React.createElement(LabelListFromLabelProp, {
label: props.label
}), props.children);
}
function RenderTrapezoids(props) {
var previousTrapezoidsRef = useRef(undefined);
return /*#__PURE__*/React.createElement(TrapezoidsWithAnimation, {
props: props,
previousTrapezoidsRef: previousTrapezoidsRef
});
}
var getRealWidthHeight = (customWidth, offset) => {
var width = offset.width,
height = offset.height,
left = offset.left,
top = offset.top;
var realWidth = getPercentValue(customWidth, width, width);
return {
realWidth,
realHeight: height,
offsetX: left,
offsetY: top
};
};
export var defaultFunnelProps = {
animationBegin: 400,
animationDuration: 1500,
animationEasing: 'ease',
animationInterpolateFn: defaultFunnelAnimateItems,
animationMatchBy: matchAppend,
fill: '#808080',
hide: false,
isAnimationActive: 'auto',
lastShapeType: 'triangle',
legendType: 'rect',
nameKey: 'name',
reversed: false,
shape: defaultFunnelShape,
stroke: '#fff'
};
function FunnelImpl(props) {
var plotArea = usePlotArea();
var stroke = props.stroke,
fill = props.fill,
legendType = props.legendType,
hide = props.hide,
isAnimationActive = props.isAnimationActive,
animationBegin = props.animationBegin,
animationDuration = props.animationDuration,
animationEasing = props.animationEasing,
nameKey = props.nameKey,
lastShapeType = props.lastShapeType,
id = props.id,
everythingElse = _objectWithoutProperties(props, _excluded3);
var presentationProps = svgPropertiesNoEvents(props);
var cells = findAllByType(props.children, Cell);
var funnelSettings = useMemo(() => ({
dataKey: props.dataKey,
nameKey,
data: props.data,
tooltipType: props.tooltipType,
lastShapeType,
reversed: props.reversed,
customWidth: props.width,
cells,
presentationProps,
id
}), [props.dataKey, nameKey, props.data, props.tooltipType, lastShapeType, props.reversed, props.width, cells, presentationProps, id]);
var trapezoids = useAppSelector(state => selectFunnelTrapezoids(state, funnelSettings));
if (hide || !trapezoids || !trapezoids.length || !plotArea) {
return null;
}
var height = plotArea.height,
width = plotArea.width;
var layerClass = clsx('recharts-trapezoids', props.className);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetFunnelTooltipEntrySettings, {
dataKey: props.dataKey,
nameKey: props.nameKey,
stroke: props.stroke,
strokeWidth: props.strokeWidth,
fill: props.fill,
name: props.name,
hide: props.hide,
tooltipType: props.tooltipType,
formatter: props.formatter,
data: props.data,
trapezoids: trapezoids,
id: id
}), /*#__PURE__*/React.createElement(Layer, {
className: layerClass
}, /*#__PURE__*/React.createElement(RenderTrapezoids, _extends({}, everythingElse, {
id: id,
stroke: stroke,
fill: fill,
nameKey: nameKey,
lastShapeType: lastShapeType,
animationBegin: animationBegin,
animationDuration: animationDuration,
animationEasing: animationEasing,
isAnimationActive: isAnimationActive,
hide: hide,
legendType: legendType,
height: height,
width: width,
trapezoids: trapezoids
}))));
}
export function computeFunnelTrapezoids(_ref4) {
var dataKey = _ref4.dataKey,
nameKey = _ref4.nameKey,
displayedData = _ref4.displayedData,
tooltipType = _ref4.tooltipType,
lastShapeType = _ref4.lastShapeType,
reversed = _ref4.reversed,
offset = _ref4.offset,
customWidth = _ref4.customWidth,
graphicalItemId = _ref4.graphicalItemId;
var _getRealWidthHeight = getRealWidthHeight(customWidth, offset),
realHeight = _getRealWidthHeight.realHeight,
realWidth = _getRealWidthHeight.realWidth,
offsetX = _getRealWidthHeight.offsetX,
offsetY = _getRealWidthHeight.offsetY;
var values = displayedData.map(entry => {
var val = getValueByDataKey(entry, dataKey, 0);
return typeof val === 'number' ? val : 0;
});
var maxValue = Math.max.apply(null, values);
var len = displayedData.length;
var rowHeight = realHeight / len;
var parentViewBox = {
x: offset.left,
y: offset.top,
width: offset.width,
height: offset.height
};
var trapezoids = displayedData.map((entry, i) => {
// getValueByDataKey does not validate the output type
var rawVal = getValueByDataKey(entry, dataKey, 0);
var name = String(getValueByDataKey(entry, nameKey, i));
var val = rawVal;
var nextVal;
if (i !== len - 1) {
var nextDataValue = getValueByDataKey(displayedData[i + 1], dataKey, 0);
if (typeof nextDataValue === 'number') {
nextVal = nextDataValue;
} else if (Array.isArray(nextDataValue)) {
var _nextDataValue = _slicedToArray(nextDataValue, 2),
first = _nextDataValue[0],
second = _nextDataValue[1];
if (typeof first === 'number') {
val = first;
}
if (typeof second === 'number') {
nextVal = second;
}
}
} else if (rawVal instanceof Array && rawVal.length === 2) {
var _rawVal = _slicedToArray(rawVal, 2),
_first = _rawVal[0],
_second = _rawVal[1];
if (typeof _first === 'number') {
val = _first;
}
if (typeof _second === 'number') {
nextVal = _second;
}
} else if (lastShapeType === 'rectangle') {
nextVal = val;
} else {
nextVal = 0;
}
// @ts-expect-error this is a problem if we have ranged values because `val` can be an array
var x = maxValue === 0 ? offsetX : (maxValue - val) * realWidth / (2 * maxValue) + offsetX;
var y = rowHeight * i + offsetY;
// @ts-expect-error getValueByDataKey does not validate the output type
var upperWidth = maxValue === 0 ? 0 : val / maxValue * realWidth;
// @ts-expect-error nextVal could be an array
var lowerWidth = maxValue === 0 ? 0 : nextVal / maxValue * realWidth;
var tooltipPayload = [{
name,
value: val,
payload: entry,
dataKey,
type: tooltipType,
graphicalItemId
}];
var tooltipPosition = {
x: x + upperWidth / 2,
y: y + rowHeight / 2
};
var trapezoidViewBox = {
x,
y,
upperWidth,
lowerWidth,
width: Math.max(upperWidth, lowerWidth),
height: rowHeight
};
return _objectSpread(_objectSpread(_objectSpread({}, trapezoidViewBox), {}, {
name,
val,
tooltipPayload,
tooltipPosition
}, entry != null && typeof entry === 'object' ? omit(entry, ['width']) : {}), {}, {
payload: entry,
parentViewBox,
labelViewBox: trapezoidViewBox
});
});
if (reversed) {
trapezoids = trapezoids.map((entry, index) => {
var reversedViewBox = {
x: entry.x - (entry.lowerWidth - entry.upperWidth) / 2,
y: entry.y - index * rowHeight + (len - 1 - index) * rowHeight,
upperWidth: entry.lowerWidth,
lowerWidth: entry.upperWidth,
width: Math.max(entry.lowerWidth, entry.upperWidth),
height: rowHeight
};
return _objectSpread(_objectSpread(_objectSpread({}, entry), reversedViewBox), {}, {
tooltipPosition: _objectSpread(_objectSpread({}, entry.tooltipPosition), {}, {
y: entry.y - index * rowHeight + (len - 1 - index) * rowHeight + rowHeight / 2
}),
labelViewBox: reversedViewBox
});
});
}
return trapezoids;
}
/**
* @consumes CartesianViewBoxContext
* @provides LabelListContext
* @provides CellReader
*/
function FunnelFn(outsideProps) {
var _resolveDefaultProps = resolveDefaultProps(outsideProps, defaultFunnelProps),
externalId = _resolveDefaultProps.id,
props = _objectWithoutProperties(_resolveDefaultProps, _excluded4);
return /*#__PURE__*/React.createElement(RegisterGraphicalItemId, {
id: externalId,
type: "funnel"
}, id => /*#__PURE__*/React.createElement(FunnelImpl, _extends({}, props, {
id: id
})));
}
export var Funnel = FunnelFn;
// @ts-expect-error we need to set the displayName for debugging purposes
Funnel.displayName = 'Funnel';

View file

@ -0,0 +1,48 @@
import * as React from 'react';
import { useAppSelector } from '../state/hooks';
import { implicitXAxis, implicitYAxis, selectXAxisRange, selectXAxisSettings, selectYAxisRange, selectYAxisSettings } from '../state/selectors/axisSelectors';
import { usePlotArea } from '../hooks';
export function useNeedsClip(xAxisId, yAxisId) {
var _xAxis$allowDataOverf, _yAxis$allowDataOverf;
var xAxis = useAppSelector(state => selectXAxisSettings(state, xAxisId));
var yAxis = useAppSelector(state => selectYAxisSettings(state, yAxisId));
var needClipX = (_xAxis$allowDataOverf = xAxis === null || xAxis === void 0 ? void 0 : xAxis.allowDataOverflow) !== null && _xAxis$allowDataOverf !== void 0 ? _xAxis$allowDataOverf : implicitXAxis.allowDataOverflow;
var needClipY = (_yAxis$allowDataOverf = yAxis === null || yAxis === void 0 ? void 0 : yAxis.allowDataOverflow) !== null && _yAxis$allowDataOverf !== void 0 ? _yAxis$allowDataOverf : implicitYAxis.allowDataOverflow;
var needClip = needClipX || needClipY;
return {
needClip,
needClipX,
needClipY
};
}
export function GraphicalItemClipPath(_ref) {
var xAxisId = _ref.xAxisId,
yAxisId = _ref.yAxisId,
clipPathId = _ref.clipPathId;
var plotArea = usePlotArea();
var _useNeedsClip = useNeedsClip(xAxisId, yAxisId),
needClipX = _useNeedsClip.needClipX,
needClipY = _useNeedsClip.needClipY,
needClip = _useNeedsClip.needClip;
var xAxisRange = useAppSelector(state => selectXAxisRange(state, xAxisId, false));
var yAxisRange = useAppSelector(state => selectYAxisRange(state, yAxisId, false));
if (!needClip || !plotArea) {
return null;
}
var x = plotArea.x,
y = plotArea.y,
width = plotArea.width,
height = plotArea.height;
var clipX = needClipX && xAxisRange ? Math.min(xAxisRange[0], xAxisRange[1]) : x - width / 2;
var clipY = needClipY && yAxisRange ? Math.min(yAxisRange[0], yAxisRange[1]) : y - height / 2;
var clipWidth = needClipX && xAxisRange ? Math.abs(xAxisRange[1] - xAxisRange[0]) : width * 2;
var clipHeight = needClipY && yAxisRange ? Math.abs(yAxisRange[1] - yAxisRange[0]) : height * 2;
return /*#__PURE__*/React.createElement("clipPath", {
id: "clipPath-".concat(clipPathId)
}, /*#__PURE__*/React.createElement("rect", {
x: clipX,
y: clipY,
width: clipWidth,
height: clipHeight
}));
}

578
frontend/node_modules/recharts/es6/cartesian/Line.js generated vendored Normal file
View file

@ -0,0 +1,578 @@
var _excluded = ["id"],
_excluded2 = ["type", "layout", "connectNulls", "needClip", "shape", "strokeDasharray"],
_excluded3 = ["activeDot", "animateNewValues", "animationBegin", "animationDuration", "animationEasing", "connectNulls", "dot", "hide", "isAnimationActive", "label", "legendType", "xAxisId", "yAxisId", "id"];
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); }
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; }
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; }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
import * as React from 'react';
import { Component, useCallback, useMemo, useRef } from 'react';
import { clsx } from 'clsx';
import { Layer } from '../container/Layer';
import { LineDrawShape } from './LineDrawShape';
import { useAnimatedLineLength } from './useAnimatedLineLength';
import { CartesianLabelListContextProvider, LabelListFromLabelProp } from '../component/LabelList';
import { Dots } from '../component/Dots';
import { interpolate, isNullish, noop } from '../util/DataUtils';
import { isClipDot } from '../util/ReactUtils';
import { getCateCoordinateOfLine, getTooltipNameProp, getValueByDataKey } from '../util/ChartUtils';
import { ActivePoints } from '../component/ActivePoints';
import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings';
import { SetErrorBarContext } from '../context/ErrorBarContext';
import { GraphicalItemClipPath, useNeedsClip } from './GraphicalItemClipPath';
import { useChartLayout } from '../context/chartLayoutContext';
import { useIsPanorama } from '../context/PanoramaContext';
import { selectLinePoints } from '../state/selectors/lineSelectors';
import { useAppSelector } from '../state/hooks';
import { SetLegendPayload } from '../state/SetLegendPayload';
import { AnimatedItems, useAnimationCallbacks } from '../animation/AnimatedItems';
import { matchByIndex } from '../animation/matchBy';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { usePlotArea } from '../hooks';
import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId';
import { SetCartesianGraphicalItem } from '../state/SetGraphicalItem';
import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents';
import { getRadiusAndStrokeWidthFromDot } from '../util/getRadiusAndStrokeWidthFromDot';
import { Shape } from '../util/ActiveShapeUtils';
import { ZIndexLayer } from '../zIndex/ZIndexLayer';
import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
import { propsAreEqual } from '../util/propsAreEqual';
/**
* Internal props, combination of external props + defaultProps + private Recharts state
*/
/**
* External props, intended for end users to fill in
*/
function getTotalLength(mainCurve) {
try {
return mainCurve && mainCurve.getTotalLength && mainCurve.getTotalLength() || 0;
} catch (_unused) {
return 0;
}
}
/**
* Compute the average x-shift between matched pairs (prev → next).
* This tells us the overall direction and magnitude of the data movement.
*/
function averageShift(items) {
var total = 0;
var count = 0;
for (var item of items) {
if (item.status === 'matched' && item.prev.x != null && item.next.x != null) {
total += item.next.x - item.prev.x;
count++;
}
}
return count > 0 ? total / count : 0;
}
var defaultLineAnimateItems = (items, animationElapsedTime) => {
if (items == null) {
// First render: return empty, stroke-dasharray handles the reveal
return [];
}
// At animationElapsedTime=1 return only the non-removed items
if (animationElapsedTime === 1) return items.flatMap(item => item.status === 'removed' ? [] : [item.next]);
var shift = averageShift(items);
var result = [];
for (var item of items) {
if (item.status === 'matched') {
result.push(_objectSpread(_objectSpread({}, item.next), {}, {
x: interpolate(item.prev.x, item.next.x, animationElapsedTime),
y: interpolate(item.prev.y, item.next.y, animationElapsedTime)
}));
} else if (item.status === 'added') {
if (item.next.x != null) {
// Extrapolate entry position: the point starts where it "would have been"
var entryX = item.next.x - shift;
result.push(_objectSpread(_objectSpread({}, item.next), {}, {
x: interpolate(entryX, item.next.x, animationElapsedTime),
y: item.next.y
}));
} else {
result.push(item.next);
}
} else if (item.status === 'removed') {
if (item.prev.x != null) {
var exitX = item.prev.x + shift;
result.push(_objectSpread(_objectSpread({}, item.prev), {}, {
x: interpolate(item.prev.x, exitX, animationElapsedTime),
y: item.prev.y
}));
}
// else: removed items are simply dropped
}
}
return result;
};
export var defaultLineProps = {
activeDot: true,
animateNewValues: true,
animationBegin: 0,
animationDuration: 1500,
animationEasing: 'ease',
animationInterpolateFn: defaultLineAnimateItems,
animationMatchBy: matchByIndex,
connectNulls: false,
dot: true,
fill: '#fff',
hide: false,
isAnimationActive: 'auto',
label: false,
legendType: 'line',
shape: LineDrawShape,
stroke: '#3182bd',
strokeWidth: 1,
xAxisId: 0,
yAxisId: 0,
zIndex: DefaultZIndexes.line,
type: 'linear'
};
/**
* Because of naming conflict, we are forced to ignore certain (valid) SVG attributes.
*/
var computeLegendPayloadFromAreaData = props => {
var dataKey = props.dataKey,
name = props.name,
stroke = props.stroke,
legendType = props.legendType,
hide = props.hide;
return [{
inactive: hide,
dataKey,
type: legendType,
color: stroke,
value: getTooltipNameProp(name, dataKey),
payload: props
}];
};
var SetLineTooltipEntrySettings = /*#__PURE__*/React.memo(_ref => {
var dataKey = _ref.dataKey,
data = _ref.data,
stroke = _ref.stroke,
strokeWidth = _ref.strokeWidth,
fill = _ref.fill,
name = _ref.name,
hide = _ref.hide,
unit = _ref.unit,
formatter = _ref.formatter,
tooltipType = _ref.tooltipType,
id = _ref.id;
var tooltipEntrySettings = {
dataDefinedOnItem: data,
getPosition: noop,
settings: {
stroke,
strokeWidth,
fill,
dataKey,
nameKey: undefined,
name: getTooltipNameProp(name, dataKey),
hide,
type: tooltipType,
color: stroke,
unit,
formatter,
graphicalItemId: id
}
};
return /*#__PURE__*/React.createElement(SetTooltipEntrySettings, {
tooltipEntrySettings: tooltipEntrySettings
});
});
function LineDotsWrapper(_ref2) {
var clipPathId = _ref2.clipPathId,
points = _ref2.points,
props = _ref2.props;
var dot = props.dot,
dataKey = props.dataKey,
needClip = props.needClip;
/*
* Exclude ID from the props passed to the Dots component
* because then the ID would be applied to multiple dots, and it would no longer be unique.
*/
var id = props.id,
propsWithoutId = _objectWithoutProperties(props, _excluded);
var lineProps = svgPropertiesNoEvents(propsWithoutId);
return /*#__PURE__*/React.createElement(Dots, {
points: points,
dot: dot,
className: "recharts-line-dots",
dotClassName: "recharts-line-dot",
dataKey: dataKey,
baseProps: lineProps,
needClip: needClip,
clipPathId: clipPathId
});
}
function LineLabelListProvider(_ref3) {
var showLabels = _ref3.showLabels,
children = _ref3.children,
points = _ref3.points;
var labelListEntries = useMemo(() => {
return points === null || points === void 0 ? void 0 : points.map(point => {
var _point$x, _point$y;
var viewBox = {
x: (_point$x = point.x) !== null && _point$x !== void 0 ? _point$x : 0,
y: (_point$y = point.y) !== null && _point$y !== void 0 ? _point$y : 0,
width: 0,
lowerWidth: 0,
upperWidth: 0,
height: 0
};
return _objectSpread(_objectSpread({}, viewBox), {}, {
value: point.value,
payload: point.payload,
viewBox,
/*
* Line is not passing parentViewBox to the LabelList so the labels can escape - looks like a bug, should we pass parentViewBox?
* Or should this just be the root chart viewBox?
*/
parentViewBox: undefined,
fill: undefined
});
});
}, [points]);
return /*#__PURE__*/React.createElement(CartesianLabelListContextProvider, {
value: showLabels ? labelListEntries : undefined
}, children);
}
function StaticCurve(_ref4) {
var clipPathId = _ref4.clipPathId,
pathRef = _ref4.pathRef,
points = _ref4.points,
props = _ref4.props,
animationElapsedTime = _ref4.animationElapsedTime,
isAnimating = _ref4.isAnimating,
isEntrance = _ref4.isEntrance,
visibleLength = _ref4.visibleLength;
var type = props.type,
layout = props.layout,
connectNulls = props.connectNulls,
needClip = props.needClip,
shape = props.shape,
strokeDasharray = props.strokeDasharray,
others = _objectWithoutProperties(props, _excluded2);
var curveProps = _objectSpread(_objectSpread({}, svgPropertiesAndEvents(others)), {}, {
fill: 'none',
className: 'recharts-line-curve',
clipPath: needClip ? "url(#clipPath-".concat(clipPathId, ")") : undefined,
points,
type,
layout,
connectNulls,
strokeDasharray: strokeDasharray !== null && strokeDasharray !== void 0 ? strokeDasharray : props.strokeDasharray,
pathRef,
animationElapsedTime,
isAnimating,
isEntrance: props.animateNewValues ? isEntrance : false,
visibleLength
});
return /*#__PURE__*/React.createElement(React.Fragment, null, (points === null || points === void 0 ? void 0 : points.length) > 1 && /*#__PURE__*/React.createElement(Shape, {
option: shape,
DefaultShape: defaultLineProps.shape,
shapeProps: curveProps
}), /*#__PURE__*/React.createElement(LineDotsWrapper, {
points: points,
clipPathId: clipPathId,
props: props
}));
}
function CurveWithAnimation(_ref5) {
var clipPathId = _ref5.clipPathId,
props = _ref5.props,
pathRef = _ref5.pathRef,
previousPointsRef = _ref5.previousPointsRef;
var points = props.points,
isAnimationActive = props.isAnimationActive,
animationBegin = props.animationBegin,
animationDuration = props.animationDuration,
animationEasing = props.animationEasing,
animationMatchBy = props.animationMatchBy,
animationInterpolateFn = props.animationInterpolateFn,
layout = props.layout;
var totalLength = getTotalLength(pathRef.current);
var _useAnimationCallback = useAnimationCallbacks(props.onAnimationStart, props.onAnimationEnd),
isAnimating = _useAnimationCallback.isAnimating,
handleAnimationStart = _useAnimationCallback.handleAnimationStart,
handleAnimationEnd = _useAnimationCallback.handleAnimationEnd;
var showLabels = !isAnimating;
var getVisibleLength = useAnimatedLineLength(points);
// Guard for totalLength: don't update previousPointsRef before SVG path is measured
var shouldUpdatePreviousRef = useCallback(animationElapsedTime => animationElapsedTime > 0 && totalLength > 0, [totalLength]);
return /*#__PURE__*/React.createElement(LineLabelListProvider, {
points: points,
showLabels: showLabels
}, props.children, /*#__PURE__*/React.createElement(AnimatedItems, {
animationInput: points,
animationIdPrefix: "recharts-line-",
items: points,
previousItemsRef: previousPointsRef,
isAnimationActive: isAnimationActive,
animationBegin: animationBegin,
animationDuration: animationDuration,
animationEasing: animationEasing,
onAnimationStart: handleAnimationStart,
onAnimationEnd: handleAnimationEnd,
animationInterpolateFn: animationInterpolateFn,
animationMatchBy: animationMatchBy,
shouldUpdatePreviousRef: shouldUpdatePreviousRef,
layout: layout
}, (stepData, animationElapsedTime, isEntrance) => {
var animationActive = isAnimating || animationElapsedTime < 1;
var visibleLength = animationActive ? getVisibleLength(animationElapsedTime, totalLength) : null;
return /*#__PURE__*/React.createElement(StaticCurve, {
props: props,
points: stepData,
clipPathId: clipPathId,
pathRef: pathRef,
animationElapsedTime: animationElapsedTime,
isAnimating: animationActive,
isEntrance: isEntrance,
visibleLength: visibleLength
});
}), /*#__PURE__*/React.createElement(LabelListFromLabelProp, {
label: props.label
}));
}
function RenderCurve(_ref6) {
var clipPathId = _ref6.clipPathId,
props = _ref6.props;
var previousPointsRef = useRef(null);
var pathRef = useRef(null);
return /*#__PURE__*/React.createElement(CurveWithAnimation, {
props: props,
clipPathId: clipPathId,
previousPointsRef: previousPointsRef,
pathRef: pathRef
});
}
var errorBarDataPointFormatter = (dataPoint, dataKey) => {
var _dataPoint$x, _dataPoint$y;
return {
x: (_dataPoint$x = dataPoint.x) !== null && _dataPoint$x !== void 0 ? _dataPoint$x : undefined,
y: (_dataPoint$y = dataPoint.y) !== null && _dataPoint$y !== void 0 ? _dataPoint$y : undefined,
value: dataPoint.value,
// getValueByDataKey does not validate the output type
errorVal: getValueByDataKey(dataPoint.payload, dataKey)
};
};
// eslint-disable-next-line react/prefer-stateless-function
class LineWithState extends Component {
render() {
var _this$props = this.props,
hide = _this$props.hide,
dot = _this$props.dot,
points = _this$props.points,
className = _this$props.className,
xAxisId = _this$props.xAxisId,
yAxisId = _this$props.yAxisId,
top = _this$props.top,
left = _this$props.left,
width = _this$props.width,
height = _this$props.height,
id = _this$props.id,
needClip = _this$props.needClip,
zIndex = _this$props.zIndex;
if (hide) {
return null;
}
var layerClass = clsx('recharts-line', className);
var clipPathId = id;
var _getRadiusAndStrokeWi = getRadiusAndStrokeWidthFromDot(dot),
r = _getRadiusAndStrokeWi.r,
strokeWidth = _getRadiusAndStrokeWi.strokeWidth;
var clipDot = isClipDot(dot);
var dotSize = r * 2 + strokeWidth;
var activePointsClipPath = needClip ? "url(#clipPath-".concat(clipDot ? '' : 'dots-').concat(clipPathId, ")") : undefined;
return /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: zIndex
}, /*#__PURE__*/React.createElement(Layer, {
className: layerClass
}, needClip && /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement(GraphicalItemClipPath, {
clipPathId: clipPathId,
xAxisId: xAxisId,
yAxisId: yAxisId
}), !clipDot && /*#__PURE__*/React.createElement("clipPath", {
id: "clipPath-dots-".concat(clipPathId)
}, /*#__PURE__*/React.createElement("rect", {
x: left - dotSize / 2,
y: top - dotSize / 2,
width: width + dotSize,
height: height + dotSize
}))), /*#__PURE__*/React.createElement(SetErrorBarContext, {
xAxisId: xAxisId,
yAxisId: yAxisId,
data: points,
dataPointFormatter: errorBarDataPointFormatter,
errorBarOffset: 0
}, /*#__PURE__*/React.createElement(RenderCurve, {
props: this.props,
clipPathId: clipPathId
}))), /*#__PURE__*/React.createElement(ActivePoints, {
activeDot: this.props.activeDot,
points: points,
mainColor: this.props.stroke,
itemDataKey: this.props.dataKey,
clipPath: activePointsClipPath
}));
}
}
function LineImpl(props) {
var _resolveDefaultProps = resolveDefaultProps(props, defaultLineProps),
activeDot = _resolveDefaultProps.activeDot,
animateNewValues = _resolveDefaultProps.animateNewValues,
animationBegin = _resolveDefaultProps.animationBegin,
animationDuration = _resolveDefaultProps.animationDuration,
animationEasing = _resolveDefaultProps.animationEasing,
connectNulls = _resolveDefaultProps.connectNulls,
dot = _resolveDefaultProps.dot,
hide = _resolveDefaultProps.hide,
isAnimationActive = _resolveDefaultProps.isAnimationActive,
label = _resolveDefaultProps.label,
legendType = _resolveDefaultProps.legendType,
xAxisId = _resolveDefaultProps.xAxisId,
yAxisId = _resolveDefaultProps.yAxisId,
id = _resolveDefaultProps.id,
everythingElse = _objectWithoutProperties(_resolveDefaultProps, _excluded3);
var _useNeedsClip = useNeedsClip(xAxisId, yAxisId),
needClip = _useNeedsClip.needClip;
var plotArea = usePlotArea();
var layout = useChartLayout();
var isPanorama = useIsPanorama();
var points = useAppSelector(state => selectLinePoints(state, xAxisId, yAxisId, isPanorama, id));
if (layout !== 'horizontal' && layout !== 'vertical' || points == null || plotArea == null) {
// Cannot render Line in an unsupported layout
return null;
}
var height = plotArea.height,
width = plotArea.width,
left = plotArea.x,
top = plotArea.y;
return /*#__PURE__*/React.createElement(LineWithState, _extends({}, everythingElse, {
id: id,
connectNulls: connectNulls,
dot: dot,
activeDot: activeDot,
animateNewValues: animateNewValues,
animationBegin: animationBegin,
animationDuration: animationDuration,
animationEasing: animationEasing,
isAnimationActive: isAnimationActive,
hide: hide,
label: label,
legendType: legendType,
xAxisId: xAxisId,
yAxisId: yAxisId,
points: points,
layout: layout,
height: height,
width: width,
left: left,
top: top,
needClip: needClip
}));
}
export function computeLinePoints(_ref7) {
var layout = _ref7.layout,
xAxis = _ref7.xAxis,
yAxis = _ref7.yAxis,
xAxisTicks = _ref7.xAxisTicks,
yAxisTicks = _ref7.yAxisTicks,
dataKey = _ref7.dataKey,
bandSize = _ref7.bandSize,
displayedData = _ref7.displayedData;
return displayedData.map((entry, index) => {
// getValueByDataKey does not validate the output type
var value = getValueByDataKey(entry, dataKey);
if (layout === 'horizontal') {
var _x = getCateCoordinateOfLine({
axis: xAxis,
ticks: xAxisTicks,
bandSize,
entry,
index
});
var _y = isNullish(value) ? null : yAxis.scale.map(value);
return {
x: _x,
y: _y !== null && _y !== void 0 ? _y : null,
value,
payload: entry
};
}
var x = isNullish(value) ? null : xAxis.scale.map(value);
var y = getCateCoordinateOfLine({
axis: yAxis,
ticks: yAxisTicks,
bandSize,
entry,
index
});
if (x == null || y == null) {
return null;
}
return {
x,
y,
value,
payload: entry
};
}).filter(Boolean);
}
function LineFn(outsideProps) {
var props = resolveDefaultProps(outsideProps, defaultLineProps);
var isPanorama = useIsPanorama();
return /*#__PURE__*/React.createElement(RegisterGraphicalItemId, {
id: props.id,
type: "line"
}, id => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetLegendPayload, {
legendPayload: computeLegendPayloadFromAreaData(props)
}), /*#__PURE__*/React.createElement(SetLineTooltipEntrySettings, {
dataKey: props.dataKey,
data: props.data,
stroke: props.stroke,
strokeWidth: props.strokeWidth,
fill: props.fill,
name: props.name,
hide: props.hide,
unit: props.unit,
formatter: props.formatter,
tooltipType: props.tooltipType,
id: id
}), /*#__PURE__*/React.createElement(SetCartesianGraphicalItem, {
type: "line",
id: id,
data: props.data,
xAxisId: props.xAxisId,
yAxisId: props.yAxisId,
zAxisId: 0,
dataKey: props.dataKey,
hide: props.hide,
isPanorama: isPanorama
}), /*#__PURE__*/React.createElement(LineImpl, _extends({}, props, {
id: id
}))));
}
/**
* @provides LabelListContext
* @provides ErrorBarContext
* @consumes CartesianChartContext
*/
export var Line = /*#__PURE__*/React.memo(LineFn, propsAreEqual);
// @ts-expect-error we need to set the displayName for debugging purposes
Line.displayName = 'Line';

View file

@ -0,0 +1,161 @@
var _excluded = ["animationElapsedTime", "isAnimating", "isEntrance", "visibleLength", "strokeDasharray", "connectNulls"];
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); }
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; }
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; }
import * as React from 'react';
import { Curve } from '../shape/Curve';
/**
* Reads the total length of an SVG path element, returning 0 if the element
* is null or the measurement fails (e.g. in JSDOM).
*/
function getTotalLength(path) {
try {
return path && path.getTotalLength && path.getTotalLength() || 0;
} catch (_unused) {
return 0;
}
}
/**
* Generates a simple stroke-dasharray string for animating a line draw effect.
*
* Uses `totalLength` as the gap (instead of `totalLength - length`) to prevent a floating-point
* precision artifact: when fractional dash and gap values are serialized to a string attribute
* and reparsed by the SVG renderer, their sum can differ from the actual path length by a ULP,
* causing the dasharray pattern to repeat and render a phantom dot at the path endpoint
* with round or square strokeLinecap.
*
* @param totalLength The total length of the SVG path
* @param length The currently visible portion of the path
* @returns A stroke-dasharray string like "50px 200px"
*/
function generateSimpleStrokeDasharray(totalLength, length) {
return "".concat(length, "px ").concat(totalLength, "px");
}
/**
* Normalizes a dash pattern to the even-length sequence used by SVG renderers.
* Odd-length stroke-dasharray values repeat once, so "5" behaves like "5 5".
*
* @param lines Array of dash/gap lengths to repeat
* @returns An even-length dash pattern
*/
function normalizeDashPattern(lines) {
return lines.length % 2 !== 0 ? [...lines, ...lines] : lines;
}
/**
* Repeats a dash pattern array a given number of times.
*
* @param lines Array of dash/gap lengths to repeat
* @param count Number of times to repeat the pattern
* @returns A new array with the pattern repeated `count` times
*/
function repeat(lines, count) {
var result = [];
for (var i = 0; i < count; ++i) {
result.push(...lines);
}
return result;
}
/**
* Computes a stroke-dasharray string for animating a custom-dashed line draw effect.
*
* Given a user-specified dash pattern (e.g. `"7,3"`), this function builds a dasharray
* that reveals exactly `length` pixels of that pattern, followed by a gap of `totalLength`
* to hide the remainder of the path.
*
* Like {@link generateSimpleStrokeDasharray}, the trailing gap uses `totalLength` rather than
* `totalLength - length` to avoid floating-point precision artifacts with round/square strokeLinecap.
*
* @param length The currently visible portion of the path
* @param totalLength The total length of the SVG path
* @param lines The user-specified dash pattern as an array of numbers (e.g. [7, 3])
* @returns A stroke-dasharray string incorporating the custom dash pattern
*/
function getStrokeDasharray(length, totalLength, lines) {
var normalizedLines = normalizeDashPattern(lines);
var lineLength = normalizedLines.reduce((pre, next) => pre + next, 0);
// if lineLength is 0 return the default when no strokeDasharray is provided
if (!lineLength) {
return generateSimpleStrokeDasharray(totalLength, length);
}
var count = Math.floor(length / lineLength);
var remainLength = length % lineLength;
var remainLines = [];
for (var i = 0, sum = 0; i < normalizedLines.length; sum += (_normalizedLines$i = normalizedLines[i]) !== null && _normalizedLines$i !== void 0 ? _normalizedLines$i : 0, ++i) {
var _normalizedLines$i;
var lineValue = normalizedLines[i];
if (lineValue != null && sum + lineValue > remainLength) {
remainLines = [...normalizedLines.slice(0, i), remainLength - sum];
break;
}
}
var emptyLines = remainLines.length % 2 === 0 ? [0, totalLength] : [totalLength];
return [...repeat(normalizedLines, count), ...remainLines, ...emptyLines].map(line => "".concat(line, "px")).join(', ');
}
/**
* Computes the animated stroke-dasharray for a line's entrance animation.
*
* @param userStrokeDasharray The user-specified stroke-dasharray (e.g. "5,3"), if any
* @param totalLength Total SVG path length
* @param visibleLength How much of the path should be visible
* @returns A stroke-dasharray string for the current animation frame
*/
function computeAnimatedStrokeDasharray(userStrokeDasharray, totalLength, visibleLength) {
if (userStrokeDasharray) {
var lines = "".concat(userStrokeDasharray).split(/[,\s]+/gim).map(num => parseFloat(num));
return getStrokeDasharray(visibleLength, totalLength, lines);
}
return generateSimpleStrokeDasharray(totalLength, visibleLength);
}
/**
* The default shape for Line. During the entrance animation, the line is progressively
* revealed using the `strokeDasharray` SVG attribute: the visible portion grows from
* 0 to the full path length as `animationElapsedTime` progresses from 0 to 1.
*
* This is the built-in shape for Line. It is automatically used when no custom `shape` prop
* is provided. You can import and reuse it as a starting point for custom shapes,
* or use it as a reference for building your own.
*
* The animation progress props (`animationElapsedTime`, `isAnimating`, `isEntrance`) are available
* for custom shapes that want to add their own effects on top.
*
* @example
* ```tsx
* import { Line, LineDrawShape } from 'recharts';
*
* // Use the default shape explicitly (same as providing no shape prop)
* <Line dataKey="value" shape={LineDrawShape} />
* ```
*
* @see {@link https://recharts.github.io/en-US/guide/animations Animation guide}
*
* @since 3.9
*/
export function LineDrawShape(props) {
var _animationElapsedTime = props.animationElapsedTime,
isAnimating = props.isAnimating,
isEntrance = props.isEntrance,
visibleLength = props.visibleLength,
userStrokeDasharray = props.strokeDasharray,
connectNulls = props.connectNulls,
curveProps = _objectWithoutProperties(props, _excluded);
var finalConnectNulls = connectNulls !== null && connectNulls !== void 0 ? connectNulls : false;
var strokeDasharray;
if (visibleLength != null) {
var _pathRef$current;
var pathRef = curveProps.pathRef;
var totalLength = getTotalLength((_pathRef$current = pathRef === null || pathRef === void 0 ? void 0 : pathRef.current) !== null && _pathRef$current !== void 0 ? _pathRef$current : null);
strokeDasharray = computeAnimatedStrokeDasharray(userStrokeDasharray, totalLength, visibleLength);
} else if (userStrokeDasharray != null) {
strokeDasharray = String(userStrokeDasharray);
}
return /*#__PURE__*/React.createElement(Curve, _extends({}, curveProps, {
connectNulls: finalConnectNulls,
strokeDasharray: strokeDasharray
}));
}

View file

@ -0,0 +1,171 @@
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
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); }
import * as React from 'react';
import { useEffect } from 'react';
import { clsx } from 'clsx';
import { Layer } from '../container/Layer';
import { CartesianLabelContextProvider, CartesianLabelFromLabelProp } from '../component/Label';
import { rectWithPoints } from '../util/CartesianUtils';
import { isNumOrStr } from '../util/DataUtils';
import { Rectangle } from '../shape/Rectangle';
import { addArea, removeArea } from '../state/referenceElementsSlice';
import { useAppDispatch, useAppSelector } from '../state/hooks';
import { selectAxisScale } from '../state/selectors/axisSelectors';
import { useIsPanorama } from '../context/PanoramaContext';
import { useClipPathId } from '../container/ClipPathProvider';
import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { ZIndexLayer } from '../zIndex/ZIndexLayer';
import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
import { CartesianScaleHelperImpl } from '../util/scale/CartesianScaleHelper';
/*
* Omit width, height, x, y from SVGPropsAndEvents because ReferenceArea receives x1, x2, y1, y2 instead.
* The position is calculated internally instead.
*/
var getRect = (hasX1, hasX2, hasY1, hasY2, xAxisScale, yAxisScale, props) => {
var _xAxisScale$map, _yAxisScale$map, _xAxisScale$map2, _yAxisScale$map2;
var xValue1 = props.x1,
xValue2 = props.x2,
yValue1 = props.y1,
yValue2 = props.y2;
if (xAxisScale == null || yAxisScale == null) {
return null;
}
var scales = new CartesianScaleHelperImpl({
x: xAxisScale,
y: yAxisScale
});
var p1 = {
x: hasX1 ? (_xAxisScale$map = xAxisScale.map(xValue1, {
position: 'start'
})) !== null && _xAxisScale$map !== void 0 ? _xAxisScale$map : null : xAxisScale.rangeMin(),
y: hasY1 ? (_yAxisScale$map = yAxisScale.map(yValue1, {
position: 'start'
})) !== null && _yAxisScale$map !== void 0 ? _yAxisScale$map : null : yAxisScale.rangeMin()
};
var p2 = {
x: hasX2 ? (_xAxisScale$map2 = xAxisScale.map(xValue2, {
position: 'end'
})) !== null && _xAxisScale$map2 !== void 0 ? _xAxisScale$map2 : null : xAxisScale.rangeMax(),
y: hasY2 ? (_yAxisScale$map2 = yAxisScale.map(yValue2, {
position: 'end'
})) !== null && _yAxisScale$map2 !== void 0 ? _yAxisScale$map2 : null : yAxisScale.rangeMax()
};
if (props.ifOverflow === 'discard' && (!scales.isInRange(p1) || !scales.isInRange(p2))) {
return null;
}
// @ts-expect-error we're sending nullable coordinates but rectWithPoints expects non-nullable Coordinate
return rectWithPoints(p1, p2);
};
var renderRect = (option, props) => {
var rect;
if (/*#__PURE__*/React.isValidElement(option)) {
// @ts-expect-error element cloning is not typed
rect = /*#__PURE__*/React.cloneElement(option, props);
} else if (typeof option === 'function') {
rect = option(props);
} else {
rect = /*#__PURE__*/React.createElement(Rectangle, _extends({}, props, {
className: "recharts-reference-area-rect"
}));
}
return rect;
};
function ReportReferenceArea(props) {
var dispatch = useAppDispatch();
useEffect(() => {
dispatch(addArea(props));
return () => {
dispatch(removeArea(props));
};
});
return null;
}
function ReferenceAreaImpl(props) {
var x1 = props.x1,
x2 = props.x2,
y1 = props.y1,
y2 = props.y2,
className = props.className,
shape = props.shape,
xAxisId = props.xAxisId,
yAxisId = props.yAxisId;
var clipPathId = useClipPathId();
var isPanorama = useIsPanorama();
var xAxisScale = useAppSelector(state => selectAxisScale(state, 'xAxis', xAxisId, isPanorama));
var yAxisScale = useAppSelector(state => selectAxisScale(state, 'yAxis', yAxisId, isPanorama));
if (xAxisScale == null || yAxisScale == null) {
return null;
}
var hasX1 = isNumOrStr(x1);
var hasX2 = isNumOrStr(x2);
var hasY1 = isNumOrStr(y1);
var hasY2 = isNumOrStr(y2);
if (!hasX1 && !hasX2 && !hasY1 && !hasY2 && !shape) {
return null;
}
var rect = getRect(hasX1, hasX2, hasY1, hasY2, xAxisScale, yAxisScale, props);
if (!rect && !shape) {
return null;
}
var isOverflowHidden = props.ifOverflow === 'hidden';
var clipPath = isOverflowHidden ? "url(#".concat(clipPathId, ")") : undefined;
return /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: props.zIndex
}, /*#__PURE__*/React.createElement(Layer, {
className: clsx('recharts-reference-area', className)
}, renderRect(shape, _objectSpread(_objectSpread({
clipPath
}, svgPropertiesAndEvents(props)), rect)), rect != null && /*#__PURE__*/React.createElement(CartesianLabelContextProvider, _extends({}, rect, {
lowerWidth: rect.width,
upperWidth: rect.width
}), /*#__PURE__*/React.createElement(CartesianLabelFromLabelProp, {
label: props.label
}), props.children)));
}
export var referenceAreaDefaultProps = {
ifOverflow: 'discard',
xAxisId: 0,
yAxisId: 0,
radius: 0,
fill: '#ccc',
label: false,
fillOpacity: 0.5,
stroke: 'none',
strokeWidth: 1,
zIndex: DefaultZIndexes.area
};
/**
* Draws a rectangular area on the chart to highlight a specific range.
*
* This component, unlike {@link Rectangle} or {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/rect rect}, is aware of the cartesian coordinate system,
* so you specify the area by using data coordinates instead of pixels.
*
* ReferenceArea will calculate the pixels based on the provided data coordinates.
*
* If you prefer to render rectangles using pixels rather than data coordinates,
* consider using the {@link Rectangle} component instead.
*
* @provides CartesianLabelContext
* @consumes CartesianChartContext
*/
export function ReferenceArea(outsideProps) {
var props = resolveDefaultProps(outsideProps, referenceAreaDefaultProps);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReportReferenceArea, {
yAxisId: props.yAxisId,
xAxisId: props.xAxisId,
ifOverflow: props.ifOverflow,
x1: props.x1,
x2: props.x2,
y1: props.y1,
y2: props.y2
}), /*#__PURE__*/React.createElement(ReferenceAreaImpl, props));
}
ReferenceArea.displayName = 'ReferenceArea';

View file

@ -0,0 +1,153 @@
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
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); }
import * as React from 'react';
import { useEffect } from 'react';
import { clsx } from 'clsx';
import { Layer } from '../container/Layer';
import { Dot } from '../shape/Dot';
import { CartesianLabelContextProvider, CartesianLabelFromLabelProp } from '../component/Label';
import { isNumOrStr } from '../util/DataUtils';
import { addDot, removeDot } from '../state/referenceElementsSlice';
import { useAppDispatch, useAppSelector } from '../state/hooks';
import { selectAxisScale } from '../state/selectors/axisSelectors';
import { useIsPanorama } from '../context/PanoramaContext';
import { useClipPathId } from '../container/ClipPathProvider';
import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { ZIndexLayer } from '../zIndex/ZIndexLayer';
import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
import { CartesianScaleHelperImpl } from '../util/scale/CartesianScaleHelper';
var useCoordinate = (x, y, xAxisId, yAxisId, ifOverflow) => {
var isX = isNumOrStr(x);
var isY = isNumOrStr(y);
var isPanorama = useIsPanorama();
var xAxisScale = useAppSelector(state => selectAxisScale(state, 'xAxis', xAxisId, isPanorama));
var yAxisScale = useAppSelector(state => selectAxisScale(state, 'yAxis', yAxisId, isPanorama));
if (!isX || !isY || xAxisScale == null || yAxisScale == null) {
return null;
}
var scales = new CartesianScaleHelperImpl({
x: xAxisScale,
y: yAxisScale
});
var result = scales.map({
x,
y
}, {
position: 'middle'
});
if (ifOverflow === 'discard' && !scales.isInRange(result)) {
return null;
}
return result;
};
function ReportReferenceDot(props) {
var dispatch = useAppDispatch();
useEffect(() => {
dispatch(addDot(props));
return () => {
dispatch(removeDot(props));
};
});
return null;
}
var renderDot = (option, props) => {
var dot;
if (/*#__PURE__*/React.isValidElement(option)) {
// @ts-expect-error element cloning is not typed
dot = /*#__PURE__*/React.cloneElement(option, props);
} else if (typeof option === 'function') {
dot = option(props);
} else {
dot = /*#__PURE__*/React.createElement(Dot, _extends({}, props, {
cx: props.cx,
cy: props.cy,
className: "recharts-reference-dot-dot"
}));
}
return dot;
};
function ReferenceDotImpl(props) {
var x = props.x,
y = props.y,
r = props.r;
var clipPathId = useClipPathId();
var coordinate = useCoordinate(x, y, props.xAxisId, props.yAxisId, props.ifOverflow);
if (!coordinate) {
return null;
}
var cx = coordinate.x,
cy = coordinate.y;
var shape = props.shape,
className = props.className,
ifOverflow = props.ifOverflow;
var clipPath = ifOverflow === 'hidden' ? "url(#".concat(clipPathId, ")") : undefined;
var dotProps = _objectSpread(_objectSpread({
clipPath
}, svgPropertiesAndEvents(props)), {}, {
cx: cx !== null && cx !== void 0 ? cx : undefined,
cy: cy !== null && cy !== void 0 ? cy : undefined
});
return /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: props.zIndex
}, /*#__PURE__*/React.createElement(Layer, {
className: clsx('recharts-reference-dot', className)
}, renderDot(shape, dotProps), /*#__PURE__*/React.createElement(CartesianLabelContextProvider, {
x: cx - r,
y: cy - r,
width: 2 * r,
height: 2 * r,
upperWidth: 2 * r,
lowerWidth: 2 * r
}, /*#__PURE__*/React.createElement(CartesianLabelFromLabelProp, {
label: props.label
}), props.children)));
}
export var referenceDotDefaultProps = {
ifOverflow: 'discard',
xAxisId: 0,
yAxisId: 0,
r: 10,
label: false,
fill: '#fff',
stroke: '#ccc',
fillOpacity: 1,
strokeWidth: 1,
zIndex: DefaultZIndexes.scatter
};
/**
* Draws a circle on the chart to highlight a specific point.
*
* This component, unlike {@link Dot} or {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/circle circle}, is aware of the cartesian coordinate system,
* so you specify its center by using data coordinates instead of pixels.
*
* ReferenceDot will calculate the pixels based on the provided data coordinates.
*
* If you prefer to render dots using pixels rather than data coordinates,
* consider using the {@link Dot} component instead.
*
* @provides CartesianLabelContext
* @consumes CartesianChartContext
*/
export function ReferenceDot(outsideProps) {
var props = resolveDefaultProps(outsideProps, referenceDotDefaultProps);
var x = props.x,
y = props.y,
r = props.r,
ifOverflow = props.ifOverflow,
yAxisId = props.yAxisId,
xAxisId = props.xAxisId;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReportReferenceDot, {
y: y,
x: x,
r: r,
yAxisId: yAxisId,
xAxisId: xAxisId,
ifOverflow: ifOverflow
}), /*#__PURE__*/React.createElement(ReferenceDotImpl, props));
}
ReferenceDot.displayName = 'ReferenceDot';

View file

@ -0,0 +1,247 @@
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
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); }
/**
* @fileOverview Reference Line
*/
import * as React from 'react';
import { useEffect } from 'react';
import { clsx } from 'clsx';
import { Layer } from '../container/Layer';
import { CartesianLabelContextProvider, CartesianLabelFromLabelProp } from '../component/Label';
import { isNumOrStr } from '../util/DataUtils';
import { rectWithCoords } from '../util/CartesianUtils';
import { useViewBox } from '../context/chartLayoutContext';
import { addLine, removeLine } from '../state/referenceElementsSlice';
import { useAppDispatch, useAppSelector } from '../state/hooks';
import { selectAxisScale, selectXAxisSettings, selectYAxisSettings } from '../state/selectors/axisSelectors';
import { useIsPanorama } from '../context/PanoramaContext';
import { useClipPathId } from '../container/ClipPathProvider';
import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { ZIndexLayer } from '../zIndex/ZIndexLayer';
import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
import { isWellBehavedNumber } from '../util/isWellBehavedNumber';
import { CartesianScaleHelperImpl } from '../util/scale/CartesianScaleHelper';
/**
* Single point that defines one end of a segment.
* These coordinates are in data space, meaning that you should provide
* values that correspond to the data domain of the axes.
* So you would provide a value of `Page A` to indicate the data value `Page A`
* and then recharts will convert that to pixels.
*
* Likewise for numbers. If your x-axis goes from 0 to 100,
* and you want the line to end at 50, you would provide `50` here.
*
* @inline
*/
/**
* This excludes `viewBox` prop from svg for two reasons:
* 1. The components wants viewBox of object type, and svg wants string
* - so there's a conflict, and the component will throw if it gets string
* 2. Internally the component calls `svgPropertiesNoEvents` which filters the viewBox away anyway
*/
var renderLine = (option, props) => {
var line;
if (/*#__PURE__*/React.isValidElement(option)) {
// @ts-expect-error element cloning is not typed
line = /*#__PURE__*/React.cloneElement(option, props);
} else if (typeof option === 'function') {
line = option(props);
} else {
if (!isWellBehavedNumber(props.x1) || !isWellBehavedNumber(props.y1) || !isWellBehavedNumber(props.x2) || !isWellBehavedNumber(props.y2)) {
return null;
}
line = /*#__PURE__*/React.createElement("line", _extends({}, props, {
className: "recharts-reference-line-line"
}));
}
return line;
};
var getHorizontalLineEndPoints = (yCoord, ifOverflow, position, yAxisOrientation, yAxisScale, viewBox) => {
var x = viewBox.x,
width = viewBox.width;
var coord = yAxisScale.map(yCoord, {
position
});
// don't render the line if the scale can't compute a result that makes sense
if (!isWellBehavedNumber(coord)) {
return null;
}
if (ifOverflow === 'discard' && !yAxisScale.isInRange(coord)) {
return null;
}
var points = [{
x: x + width,
y: coord
}, {
x,
y: coord
}];
return yAxisOrientation === 'left' ? points.reverse() : points;
};
var getVerticalLineEndPoints = (xCoord, ifOverflow, position, xAxisOrientation, xAxisScale, viewBox) => {
var y = viewBox.y,
height = viewBox.height;
var coord = xAxisScale.map(xCoord, {
position
});
// don't render the line if the scale can't compute a result that makes sense
if (!isWellBehavedNumber(coord)) {
return null;
}
if (ifOverflow === 'discard' && !xAxisScale.isInRange(coord)) {
return null;
}
var points = [{
x: coord,
y: y + height
}, {
x: coord,
y
}];
return xAxisOrientation === 'top' ? points.reverse() : points;
};
var getSegmentLineEndPoints = (segment, ifOverflow, position, scales) => {
var points = [scales.mapWithFallback(segment[0], {
position,
fallback: 'rangeMin'
}), scales.mapWithFallback(segment[1], {
position,
fallback: 'rangeMax'
})];
if (ifOverflow === 'discard' && points.some(p => !scales.isInRange(p))) {
return null;
}
return points;
};
export var getEndPoints = (xAxisScale, yAxisScale, viewBox, position, xAxisOrientation, yAxisOrientation, props) => {
var xCoord = props.x,
yCoord = props.y,
segment = props.segment,
ifOverflow = props.ifOverflow;
var isFixedX = isNumOrStr(xCoord);
var isFixedY = isNumOrStr(yCoord);
if (isFixedY) {
return getHorizontalLineEndPoints(yCoord, ifOverflow, position, yAxisOrientation, yAxisScale, viewBox);
}
if (isFixedX) {
return getVerticalLineEndPoints(xCoord, ifOverflow, position, xAxisOrientation, xAxisScale, viewBox);
}
if (segment != null && segment.length === 2) {
return getSegmentLineEndPoints(segment, ifOverflow, position, new CartesianScaleHelperImpl({
x: xAxisScale,
y: yAxisScale
}));
}
return null;
};
function ReportReferenceLine(props) {
var dispatch = useAppDispatch();
useEffect(() => {
dispatch(addLine(props));
return () => {
dispatch(removeLine(props));
};
});
return null;
}
function ReferenceLineImpl(props) {
var xAxisId = props.xAxisId,
yAxisId = props.yAxisId,
shape = props.shape,
className = props.className,
ifOverflow = props.ifOverflow;
var isPanorama = useIsPanorama();
var clipPathId = useClipPathId();
var xAxis = useAppSelector(state => selectXAxisSettings(state, xAxisId));
var yAxis = useAppSelector(state => selectYAxisSettings(state, yAxisId));
var xAxisScale = useAppSelector(state => selectAxisScale(state, 'xAxis', xAxisId, isPanorama));
var yAxisScale = useAppSelector(state => selectAxisScale(state, 'yAxis', yAxisId, isPanorama));
var viewBox = useViewBox();
if (!clipPathId || !viewBox || xAxis == null || yAxis == null || xAxisScale == null || yAxisScale == null) {
return null;
}
var endPoints = getEndPoints(xAxisScale, yAxisScale, viewBox, props.position, xAxis.orientation, yAxis.orientation, props);
if (!endPoints) {
return null;
}
var point1 = endPoints[0];
var point2 = endPoints[1];
if (point1 == null || point2 == null) {
return null;
}
var x1 = point1.x,
y1 = point1.y;
var x2 = point2.x,
y2 = point2.y;
var clipPath = ifOverflow === 'hidden' ? "url(#".concat(clipPathId, ")") : undefined;
var lineProps = _objectSpread(_objectSpread({
clipPath
}, svgPropertiesAndEvents(props)), {}, {
x1,
y1,
x2,
y2
});
var rect = rectWithCoords({
x1,
y1,
x2,
y2
});
return /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: props.zIndex
}, /*#__PURE__*/React.createElement(Layer, {
className: clsx('recharts-reference-line', className)
}, renderLine(shape, lineProps), /*#__PURE__*/React.createElement(CartesianLabelContextProvider, _extends({}, rect, {
lowerWidth: rect.width,
upperWidth: rect.width
}), /*#__PURE__*/React.createElement(CartesianLabelFromLabelProp, {
label: props.label
}), props.children)));
}
export var referenceLineDefaultProps = {
ifOverflow: 'discard',
xAxisId: 0,
yAxisId: 0,
fill: 'none',
label: false,
stroke: '#ccc',
fillOpacity: 1,
strokeWidth: 1,
position: 'middle',
zIndex: DefaultZIndexes.line
};
/**
* Draws a line on the chart connecting two points.
*
* This component, unlike {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/line line}, is aware of the cartesian coordinate system,
* so you specify the dimensions by using data coordinates instead of pixels.
*
* ReferenceLine will calculate the pixels based on the provided data coordinates.
*
* If you prefer to render using pixels rather than data coordinates,
* consider using the {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/line line SVG element} instead.
*
* @provides CartesianLabelContext
* @consumes CartesianChartContext
*/
export function ReferenceLine(outsideProps) {
var props = resolveDefaultProps(outsideProps, referenceLineDefaultProps);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReportReferenceLine, {
yAxisId: props.yAxisId,
xAxisId: props.xAxisId,
ifOverflow: props.ifOverflow,
x: props.x,
y: props.y,
segment: props.segment
}), /*#__PURE__*/React.createElement(ReferenceLineImpl, props));
}
ReferenceLine.displayName = 'ReferenceLine';

636
frontend/node_modules/recharts/es6/cartesian/Scatter.js generated vendored Normal file
View file

@ -0,0 +1,636 @@
var _excluded = ["id"],
_excluded2 = ["onMouseEnter", "onClick", "onMouseLeave"],
_excluded3 = ["animationBegin", "animationDuration", "animationEasing", "hide", "isAnimationActive", "legendType", "lineJointType", "lineType", "shape", "xAxisId", "yAxisId", "zAxisId"];
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; }
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; }
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); }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
import * as React from 'react';
import { useMemo, useRef } from 'react';
import { clsx } from 'clsx';
import { Layer } from '../container/Layer';
import { CartesianLabelListContextProvider, LabelListFromLabelProp } from '../component/LabelList';
import { findAllByType } from '../util/ReactUtils';
import { Curve } from '../shape/Curve';
import { Cell } from '../component/Cell';
import { getLinearRegression, interpolate, isNullish } from '../util/DataUtils';
import { getCateCoordinateOfLine, getTooltipNameProp, getValueByDataKey } from '../util/ChartUtils';
import { adaptEventsOfChild, isNonEmptyArray } from '../util/types';
import { ScatterSymbol } from '../util/ScatterUtils';
import { useMouseClickItemDispatch, useMouseEnterItemDispatch, useMouseLeaveItemDispatch } from '../context/tooltipContext';
import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings';
import { SetErrorBarContext } from '../context/ErrorBarContext';
import { GraphicalItemClipPath, useNeedsClip } from './GraphicalItemClipPath';
import { selectScatterPoints } from '../state/selectors/scatterSelectors';
import { useAppSelector } from '../state/hooks';
import { implicitZAxis } from '../state/selectors/axisSelectors';
import { useIsPanorama } from '../context/PanoramaContext';
import { selectActiveTooltipIndex } from '../state/selectors/tooltipSelectors';
import { SetLegendPayload } from '../state/SetLegendPayload';
import { DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME } from '../util/Constants';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId';
import { SetCartesianGraphicalItem } from '../state/SetGraphicalItem';
import { svgPropertiesNoEvents, svgPropertiesNoEventsFromUnknown } from '../util/svgPropertiesNoEvents';
import { useCartesianChartLayout, useViewBox } from '../context/chartLayoutContext';
import { AnimatedItems, useAnimationCallbacks } from '../animation/AnimatedItems';
import { matchAppend } from '../animation/matchBy';
import { ZIndexLayer } from '../zIndex/ZIndexLayer';
import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
import { propsAreEqual } from '../util/propsAreEqual';
/**
* Scatter coordinates are nullable because sometimes the point value is out of the domain,
* and we can't compute a valid coordinate for it.
*
* Scatter -> Symbol ignores points with null cx or cy so those won't render if using the default shapes.
* However: the points are exposed via various props and can be used in custom shapes so we keep them around.
*/
/**
* Internal props, combination of external props + defaultProps + private Recharts state
*/
/**
* External props, intended for end users to fill in
*/
/**
* Because of naming conflict, we are forced to ignore certain (valid) SVG attributes.
*/
var computeLegendPayloadFromScatterProps = props => {
var dataKey = props.dataKey,
name = props.name,
fill = props.fill,
legendType = props.legendType,
hide = props.hide;
return [{
inactive: hide,
dataKey,
type: legendType,
color: fill,
value: getTooltipNameProp(name, dataKey),
payload: props
}];
};
var SetScatterTooltipEntrySettings = /*#__PURE__*/React.memo(_ref => {
var dataKey = _ref.dataKey,
points = _ref.points,
stroke = _ref.stroke,
strokeWidth = _ref.strokeWidth,
fill = _ref.fill,
name = _ref.name,
hide = _ref.hide,
formatter = _ref.formatter,
tooltipType = _ref.tooltipType,
id = _ref.id;
var tooltipEntrySettings = {
dataDefinedOnItem: points === null || points === void 0 ? void 0 : points.map(p => p.tooltipPayload),
getPosition: index => {
var _points$Number;
return points === null || points === void 0 || (_points$Number = points[Number(index)]) === null || _points$Number === void 0 ? void 0 : _points$Number.tooltipPosition;
},
settings: {
stroke,
strokeWidth,
fill,
nameKey: undefined,
dataKey,
name: getTooltipNameProp(name, dataKey),
hide,
type: tooltipType,
color: fill,
unit: '',
// why doesn't Scatter support unit?
formatter,
graphicalItemId: id
}
};
return /*#__PURE__*/React.createElement(SetTooltipEntrySettings, {
tooltipEntrySettings: tooltipEntrySettings
});
});
function ScatterLine(_ref2) {
var points = _ref2.points,
props = _ref2.props;
var line = props.line,
lineType = props.lineType,
lineJointType = props.lineJointType;
if (!line) {
return null;
}
var scatterProps = svgPropertiesNoEvents(props);
var customLineProps = svgPropertiesNoEventsFromUnknown(line);
var linePoints, lineItem;
if (lineType === 'joint') {
linePoints = points.map(entry => {
var _entry$cx, _entry$cy;
return {
x: (_entry$cx = entry.cx) !== null && _entry$cx !== void 0 ? _entry$cx : null,
y: (_entry$cy = entry.cy) !== null && _entry$cy !== void 0 ? _entry$cy : null
};
});
} else if (lineType === 'fitting') {
var _getLinearRegression = getLinearRegression(points),
xmin = _getLinearRegression.xmin,
xmax = _getLinearRegression.xmax,
a = _getLinearRegression.a,
b = _getLinearRegression.b;
var linearExp = x => a * x + b;
linePoints = [{
x: xmin,
y: linearExp(xmin)
}, {
x: xmax,
y: linearExp(xmax)
}];
}
var lineProps = _objectSpread(_objectSpread(_objectSpread({}, scatterProps), {}, {
// @ts-expect-error customLineProps is contributing unknown props
fill: 'none',
// @ts-expect-error customLineProps is contributing unknown props
stroke: scatterProps && scatterProps.fill
}, customLineProps), {}, {
// @ts-expect-error linePoints is used before it is assigned (???)
points: linePoints
});
if (/*#__PURE__*/React.isValidElement(line)) {
lineItem = /*#__PURE__*/React.cloneElement(line, lineProps);
} else if (typeof line === 'function') {
lineItem = line(lineProps);
} else {
lineItem = /*#__PURE__*/React.createElement(Curve, _extends({}, lineProps, {
type: lineJointType
}));
}
return /*#__PURE__*/React.createElement(Layer, {
className: "recharts-scatter-line",
key: "recharts-scatter-line"
}, lineItem);
}
function ScatterLabelListProvider(_ref3) {
var showLabels = _ref3.showLabels,
points = _ref3.points,
children = _ref3.children;
var chartViewBox = useViewBox();
var labelListEntries = useMemo(() => {
return points === null || points === void 0 ? void 0 : points.map(point => {
var _point$x, _point$y;
var viewBox = {
/*
* Scatter label uses x and y as the reference point for the label,
* not cx and cy.
*/
x: (_point$x = point.x) !== null && _point$x !== void 0 ? _point$x : 0,
/*
* Scatter label uses x and y as the reference point for the label,
* not cx and cy.
*/
y: (_point$y = point.y) !== null && _point$y !== void 0 ? _point$y : 0,
width: point.width,
height: point.height,
lowerWidth: point.width,
upperWidth: point.width
};
return _objectSpread(_objectSpread({}, viewBox), {}, {
/*
* Here we put undefined because Scatter shows two values usually, one for X and one for Y.
* LabelList will see this undefined and will use its own `dataKey` prop to determine which value to show,
* using the payload below.
*/
value: undefined,
payload: point.payload,
viewBox,
parentViewBox: chartViewBox,
fill: undefined
});
});
}, [chartViewBox, points]);
return /*#__PURE__*/React.createElement(CartesianLabelListContextProvider, {
value: showLabels ? labelListEntries : undefined
}, children);
}
/**
* Individual scatter point component that subscribes to its own isActive state.
* This avoids re-rendering all points when the active index changes —
* only the point becoming active and the point becoming inactive re-render.
*
* @param entry The scatter point data including coordinates, size, and tooltip payload
* @param index The index of this point in the points array
* @param shape The default shape to render for inactive points
* @param activeShape The shape to render when this point is active, or undefined if no active shape
* @param baseProps SVG presentation attributes (fill, stroke, etc.) shared across all points
* @param id The graphical item ID of the parent Scatter component
* @param restOfAllOtherProps Remaining Scatter props for user-provided event handlers via adaptEventsOfChild
* @param onMouseEnterFromContext Curried mouse enter handler that dispatches tooltip activation
* @param onMouseLeaveFromContext Curried mouse leave handler that dispatches tooltip deactivation
* @param onClickFromContext Curried click handler that dispatches tooltip click activation
*/
function ScatterPoint(_ref4) {
var _useAppSelector;
var entry = _ref4.entry,
index = _ref4.index,
shape = _ref4.shape,
activeShape = _ref4.activeShape,
baseProps = _ref4.baseProps,
id = _ref4.id,
restOfAllOtherProps = _ref4.restOfAllOtherProps,
animationElapsedTime = _ref4.animationElapsedTime,
isAnimating = _ref4.isAnimating,
isEntrance = _ref4.isEntrance,
onMouseEnterFromContext = _ref4.onMouseEnterFromContext,
onMouseLeaveFromContext = _ref4.onMouseLeaveFromContext,
onClickFromContext = _ref4.onClickFromContext;
var hasActiveShape = activeShape != null && activeShape !== false;
var selectIsActive = useMemo(() => {
var strIndex = String(index);
return state => hasActiveShape && selectActiveTooltipIndex(state) === strIndex;
}, [hasActiveShape, index]);
var isActive = (_useAppSelector = useAppSelector(selectIsActive)) !== null && _useAppSelector !== void 0 ? _useAppSelector : false;
// isActive is only true when hasActiveShape is true, so activeShape is defined here
var option = isActive && activeShape != null && activeShape !== false ? activeShape : shape;
var symbolProps = _objectSpread(_objectSpread(_objectSpread({}, baseProps), entry), {}, {
isActive,
index,
animationElapsedTime,
isAnimating,
isEntrance,
[DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME]: String(id)
});
return /*#__PURE__*/React.createElement(ZIndexLayer
/*
* inactive Scatters use the parent zIndex, which is represented by undefined here.
* ZIndexLayer will render undefined zIndex as-is, as regular children, without portals.
* Active Scatters use the activeDot zIndex so they render above other elements.
*/, {
zIndex: isActive ? DefaultZIndexes.activeDot : undefined
}, /*#__PURE__*/React.createElement(Layer, _extends({
className: "recharts-scatter-symbol"
}, adaptEventsOfChild(restOfAllOtherProps, entry, index), {
onMouseEnter: onMouseEnterFromContext(entry, index),
onMouseLeave: onMouseLeaveFromContext(entry, index),
onClick: onClickFromContext(entry, index)
}), /*#__PURE__*/React.createElement(ScatterSymbol, _extends({
option: option
}, symbolProps))));
}
function ScatterSymbols(props) {
var points = props.points,
allOtherScatterProps = props.allOtherScatterProps,
animationElapsedTime = props.animationElapsedTime,
isAnimating = props.isAnimating,
isEntrance = props.isEntrance;
var shape = allOtherScatterProps.shape,
activeShape = allOtherScatterProps.activeShape,
dataKey = allOtherScatterProps.dataKey;
var id = allOtherScatterProps.id,
allOtherPropsWithoutId = _objectWithoutProperties(allOtherScatterProps, _excluded);
var onMouseEnterFromProps = allOtherScatterProps.onMouseEnter,
onItemClickFromProps = allOtherScatterProps.onClick,
onMouseLeaveFromProps = allOtherScatterProps.onMouseLeave,
restOfAllOtherProps = _objectWithoutProperties(allOtherScatterProps, _excluded2);
var onMouseEnterFromContext = useMouseEnterItemDispatch(onMouseEnterFromProps, dataKey, id);
var onMouseLeaveFromContext = useMouseLeaveItemDispatch(onMouseLeaveFromProps);
var onClickFromContext = useMouseClickItemDispatch(onItemClickFromProps, dataKey, id);
if (!isNonEmptyArray(points)) {
return null;
}
var baseProps = svgPropertiesNoEvents(allOtherPropsWithoutId);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScatterLine, {
points: points,
props: allOtherPropsWithoutId
}), points.map((entry, i) => /*#__PURE__*/React.createElement(ScatterPoint, {
key: "symbol-".concat(entry === null || entry === void 0 ? void 0 : entry.cx, "-").concat(entry === null || entry === void 0 ? void 0 : entry.cy, "-").concat(entry === null || entry === void 0 ? void 0 : entry.size, "-").concat(i),
entry: entry,
index: i,
shape: shape,
activeShape: activeShape,
baseProps: baseProps,
id: id,
restOfAllOtherProps: restOfAllOtherProps,
animationElapsedTime: animationElapsedTime,
isAnimating: isAnimating,
isEntrance: isEntrance,
onMouseEnterFromContext: onMouseEnterFromContext,
onMouseLeaveFromContext: onMouseLeaveFromContext,
onClickFromContext: onClickFromContext
})));
}
var defaultScatterAnimateItems = (items, animationElapsedTime) => {
if (items == null) return [];
if (animationElapsedTime === 1) {
return items.flatMap(item => item.status === 'removed' ? [] : [item.next]);
}
return items.flatMap(item => {
if (item.status === 'removed') return [];
if (item.status === 'matched') {
return [_objectSpread(_objectSpread({}, item.next), {}, {
cx: item.next.cx == null ? undefined : interpolate(item.prev.cx, item.next.cx, animationElapsedTime),
cy: item.next.cy == null ? undefined : interpolate(item.prev.cy, item.next.cy, animationElapsedTime),
size: interpolate(item.prev.size, item.next.size, animationElapsedTime)
})];
}
// added
return [_objectSpread(_objectSpread({}, item.next), {}, {
size: interpolate(0, item.next.size, animationElapsedTime)
})];
});
};
function SymbolsWithAnimation(_ref5) {
var previousPointsRef = _ref5.previousPointsRef,
props = _ref5.props;
var points = props.points,
isAnimationActive = props.isAnimationActive,
animationBegin = props.animationBegin,
animationDuration = props.animationDuration,
animationEasing = props.animationEasing,
animationInterpolateFn = props.animationInterpolateFn;
var _useAnimationCallback = useAnimationCallbacks(),
isAnimating = _useAnimationCallback.isAnimating,
handleAnimationStart = _useAnimationCallback.handleAnimationStart,
handleAnimationEnd = _useAnimationCallback.handleAnimationEnd;
var layout = useCartesianChartLayout();
if (layout == null) return null;
return /*#__PURE__*/React.createElement(ScatterLabelListProvider, {
showLabels: !isAnimating,
points: points
}, /*#__PURE__*/React.createElement(AnimatedItems, {
animationInput: props,
animationIdPrefix: "recharts-scatter-",
items: points,
previousItemsRef: previousPointsRef,
isAnimationActive: isAnimationActive,
animationBegin: animationBegin,
animationDuration: animationDuration,
animationEasing: animationEasing,
onAnimationStart: handleAnimationStart,
onAnimationEnd: handleAnimationEnd,
animationInterpolateFn: animationInterpolateFn,
animationMatchBy: props.animationMatchBy,
layout: layout
}, (stepData, animationElapsedTime, isEntrance) => /*#__PURE__*/React.createElement(Layer, null, /*#__PURE__*/React.createElement(ScatterSymbols, {
points: stepData,
allOtherScatterProps: props,
showLabels: !isAnimating,
animationElapsedTime: animationElapsedTime,
isAnimating: isAnimating || animationElapsedTime < 1,
isEntrance: isEntrance
}))), props.children, /*#__PURE__*/React.createElement(LabelListFromLabelProp, {
label: props.label
}));
}
export function computeScatterPoints(_ref6) {
var displayedData = _ref6.displayedData,
xAxis = _ref6.xAxis,
yAxis = _ref6.yAxis,
zAxis = _ref6.zAxis,
scatterSettings = _ref6.scatterSettings,
xAxisTicks = _ref6.xAxisTicks,
yAxisTicks = _ref6.yAxisTicks,
cells = _ref6.cells;
var xAxisDataKey = isNullish(xAxis.dataKey) ? scatterSettings.dataKey : xAxis.dataKey;
var yAxisDataKey = isNullish(yAxis.dataKey) ? scatterSettings.dataKey : yAxis.dataKey;
var zAxisDataKey = zAxis && zAxis.dataKey;
var defaultRangeZ = zAxis ? zAxis.range : implicitZAxis.range;
var defaultZ = defaultRangeZ && defaultRangeZ[0];
var xBandSize = xAxis.scale.bandwidth ? xAxis.scale.bandwidth() : 0;
var yBandSize = yAxis.scale.bandwidth ? yAxis.scale.bandwidth() : 0;
return displayedData.map((entry, index) => {
var x = getValueByDataKey(entry, xAxisDataKey);
var y = getValueByDataKey(entry, yAxisDataKey);
var z = !isNullish(zAxisDataKey) && getValueByDataKey(entry, zAxisDataKey) || '-';
var tooltipPayload = [{
name: isNullish(xAxis.dataKey) ? scatterSettings.name : xAxis.name || String(xAxis.dataKey),
unit: xAxis.unit || '',
// @ts-expect-error getValueByDataKey does not validate the output type
value: x,
payload: entry,
dataKey: xAxisDataKey,
type: scatterSettings.tooltipType,
graphicalItemId: scatterSettings.id
}, {
name: isNullish(yAxis.dataKey) ? scatterSettings.name : yAxis.name || String(yAxis.dataKey),
unit: yAxis.unit || '',
// @ts-expect-error getValueByDataKey does not validate the output type
value: y,
payload: entry,
dataKey: yAxisDataKey,
type: scatterSettings.tooltipType,
graphicalItemId: scatterSettings.id
}];
if (z !== '-' && zAxis != null) {
tooltipPayload.push({
// @ts-expect-error name prop should not have dataKey in it
name: zAxis.name || zAxis.dataKey,
unit: zAxis.unit || '',
// @ts-expect-error getValueByDataKey does not validate the output type
value: z,
payload: entry,
dataKey: zAxisDataKey,
type: scatterSettings.tooltipType,
graphicalItemId: scatterSettings.id
});
}
var cx = getCateCoordinateOfLine({
axis: xAxis,
ticks: xAxisTicks,
bandSize: xBandSize,
entry,
index,
dataKey: xAxisDataKey
});
var cy = getCateCoordinateOfLine({
axis: yAxis,
ticks: yAxisTicks,
bandSize: yBandSize,
entry,
index,
dataKey: yAxisDataKey
});
var size = z !== '-' && zAxis != null ? zAxis.scale.map(z) : defaultZ;
var radius = size == null ? 0 : Math.sqrt(Math.max(size, 0) / Math.PI);
return _objectSpread(_objectSpread({}, entry), {}, {
cx,
cy,
x: cx == null ? undefined : cx - radius,
y: cy == null ? undefined : cy - radius,
width: 2 * radius,
height: 2 * radius,
size,
node: {
x,
y,
z
},
tooltipPayload,
tooltipPosition: {
x: cx,
y: cy
},
payload: entry
}, cells && cells[index] && cells[index].props);
});
}
var errorBarDataPointFormatter = (dataPoint, dataKey, direction) => {
return {
x: dataPoint.cx,
y: dataPoint.cy,
value: direction === 'x' ? Number(dataPoint.node.x) : Number(dataPoint.node.y),
// @ts-expect-error getValueByDataKey does not validate the output type
errorVal: getValueByDataKey(dataPoint, dataKey)
};
};
function ScatterWithId(props) {
var hide = props.hide,
points = props.points,
className = props.className,
needClip = props.needClip,
xAxisId = props.xAxisId,
yAxisId = props.yAxisId,
id = props.id;
var previousPointsRef = useRef(null);
if (hide) {
return null;
}
var layerClass = clsx('recharts-scatter', className);
var clipPathId = id;
return /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: props.zIndex
}, /*#__PURE__*/React.createElement(Layer, {
className: layerClass,
clipPath: needClip ? "url(#clipPath-".concat(clipPathId, ")") : undefined,
id: id
}, needClip && /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement(GraphicalItemClipPath, {
clipPathId: clipPathId,
xAxisId: xAxisId,
yAxisId: yAxisId
})), /*#__PURE__*/React.createElement(SetErrorBarContext, {
xAxisId: xAxisId,
yAxisId: yAxisId,
data: points,
dataPointFormatter: errorBarDataPointFormatter,
errorBarOffset: 0
}, /*#__PURE__*/React.createElement(Layer, {
key: "recharts-scatter-symbols"
}, /*#__PURE__*/React.createElement(SymbolsWithAnimation, {
props: props,
previousPointsRef: previousPointsRef
})))));
}
export var defaultScatterProps = {
xAxisId: 0,
yAxisId: 0,
zAxisId: 0,
label: false,
line: false,
legendType: 'circle',
lineType: 'joint',
lineJointType: 'linear',
shape: 'circle',
hide: false,
isAnimationActive: 'auto',
animationBegin: 0,
animationDuration: 400,
animationEasing: 'linear',
animationMatchBy: matchAppend,
animationInterpolateFn: defaultScatterAnimateItems,
zIndex: DefaultZIndexes.scatter
};
function ScatterImpl(props) {
var _resolveDefaultProps = resolveDefaultProps(props, defaultScatterProps),
animationBegin = _resolveDefaultProps.animationBegin,
animationDuration = _resolveDefaultProps.animationDuration,
animationEasing = _resolveDefaultProps.animationEasing,
hide = _resolveDefaultProps.hide,
isAnimationActive = _resolveDefaultProps.isAnimationActive,
legendType = _resolveDefaultProps.legendType,
lineJointType = _resolveDefaultProps.lineJointType,
lineType = _resolveDefaultProps.lineType,
shape = _resolveDefaultProps.shape,
xAxisId = _resolveDefaultProps.xAxisId,
yAxisId = _resolveDefaultProps.yAxisId,
zAxisId = _resolveDefaultProps.zAxisId,
everythingElse = _objectWithoutProperties(_resolveDefaultProps, _excluded3);
var _useNeedsClip = useNeedsClip(xAxisId, yAxisId),
needClip = _useNeedsClip.needClip;
var cells = useMemo(() => findAllByType(props.children, Cell), [props.children]);
var isPanorama = useIsPanorama();
var points = useAppSelector(state => {
return selectScatterPoints(state, xAxisId, yAxisId, zAxisId, props.id, cells, isPanorama);
});
if (needClip == null) {
return null;
}
if (points == null) {
return null;
}
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetScatterTooltipEntrySettings, {
dataKey: props.dataKey,
points: points,
stroke: props.stroke,
strokeWidth: props.strokeWidth,
fill: props.fill,
name: props.name,
hide: props.hide,
formatter: props.formatter,
tooltipType: props.tooltipType,
id: props.id
}), /*#__PURE__*/React.createElement(ScatterWithId, _extends({}, everythingElse, {
xAxisId: xAxisId,
yAxisId: yAxisId,
zAxisId: zAxisId,
lineType: lineType,
lineJointType: lineJointType,
legendType: legendType,
shape: shape,
hide: hide,
isAnimationActive: isAnimationActive,
animationBegin: animationBegin,
animationDuration: animationDuration,
animationEasing: animationEasing,
points: points,
needClip: needClip
})));
}
function ScatterFn(outsideProps) {
var props = resolveDefaultProps(outsideProps, defaultScatterProps);
var isPanorama = useIsPanorama();
return /*#__PURE__*/React.createElement(RegisterGraphicalItemId, {
id: props.id,
type: "scatter"
}, id => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetLegendPayload, {
legendPayload: computeLegendPayloadFromScatterProps(props)
}), /*#__PURE__*/React.createElement(SetCartesianGraphicalItem, {
type: "scatter",
id: id,
data: props.data,
xAxisId: props.xAxisId,
yAxisId: props.yAxisId,
zAxisId: props.zAxisId,
dataKey: props.dataKey,
hide: props.hide,
name: props.name,
tooltipType: props.tooltipType,
isPanorama: isPanorama
}), /*#__PURE__*/React.createElement(ScatterImpl, _extends({}, props, {
id: id
}))));
}
/**
* @provides LabelListContext
* @provides ErrorBarContext
* @provides CellReader
* @consumes CartesianChartContext
*/
export var Scatter = /*#__PURE__*/React.memo(ScatterFn, propsAreEqual);
// @ts-expect-error we need to set the displayName for debugging purposes
Scatter.displayName = 'Scatter';

168
frontend/node_modules/recharts/es6/cartesian/XAxis.js generated vendored Normal file
View file

@ -0,0 +1,168 @@
var _excluded = ["type"],
_excluded2 = ["dangerouslySetInnerHTML", "ticks", "scale"],
_excluded3 = ["id", "scale"];
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); }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
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; }
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; }
/**
* @fileOverview X Axis
*/
import * as React from 'react';
import { useLayoutEffect, useMemo, useRef } from 'react';
import { clsx } from 'clsx';
import { CartesianAxis, defaultCartesianAxisProps } from './CartesianAxis';
import { useAppDispatch, useAppSelector } from '../state/hooks';
import { addXAxis, replaceXAxis, removeXAxis } from '../state/cartesianAxisSlice';
import { implicitXAxis, selectTicksOfAxis, selectXAxisPosition, selectXAxisSettingsNoDefaults, selectXAxisSize } from '../state/selectors/axisSelectors';
import { selectAxisViewBox } from '../state/selectors/selectChartOffsetInternal';
import { useIsPanorama } from '../context/PanoramaContext';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { axisPropsAreEqual } from '../util/axisPropsAreEqual';
import { useCartesianChartLayout } from '../context/chartLayoutContext';
import { getAxisTypeBasedOnLayout } from '../util/getAxisTypeBasedOnLayout';
function SetXAxisSettings(props) {
var dispatch = useAppDispatch();
var prevSettingsRef = useRef(null);
var layout = useCartesianChartLayout();
var typeFromProps = props.type,
restProps = _objectWithoutProperties(props, _excluded);
var evaluatedType = getAxisTypeBasedOnLayout(layout, 'xAxis', typeFromProps);
var settings = useMemo(() => {
if (evaluatedType == null) {
return undefined;
}
return _objectSpread(_objectSpread({}, restProps), {}, {
type: evaluatedType
});
}, [restProps, evaluatedType]);
useLayoutEffect(() => {
if (settings == null) {
return;
}
if (prevSettingsRef.current === null) {
dispatch(addXAxis(settings));
} else if (prevSettingsRef.current !== settings) {
dispatch(replaceXAxis({
prev: prevSettingsRef.current,
next: settings
}));
}
prevSettingsRef.current = settings;
}, [settings, dispatch]);
useLayoutEffect(() => {
return () => {
if (prevSettingsRef.current) {
dispatch(removeXAxis(prevSettingsRef.current));
prevSettingsRef.current = null;
}
};
}, [dispatch]);
return null;
}
var XAxisImpl = props => {
var xAxisId = props.xAxisId,
className = props.className;
var viewBox = useAppSelector(selectAxisViewBox);
var isPanorama = useIsPanorama();
var axisType = 'xAxis';
var cartesianTickItems = useAppSelector(state => selectTicksOfAxis(state, axisType, xAxisId, isPanorama));
var axisSize = useAppSelector(state => selectXAxisSize(state, xAxisId));
var position = useAppSelector(state => selectXAxisPosition(state, xAxisId));
/*
* Here we select settings from the store and prefer to use them instead of the actual props
* so that the chart is consistent. If we used the props directly, some components will use axis settings
* from state and some from props and because there is a render step between these two, they might be showing different things.
* https://github.com/recharts/recharts/issues/6257
*/
var synchronizedSettings = useAppSelector(state => selectXAxisSettingsNoDefaults(state, xAxisId));
if (axisSize == null || position == null || synchronizedSettings == null) {
return null;
}
var dangerouslySetInnerHTML = props.dangerouslySetInnerHTML,
ticks = props.ticks,
del = props.scale,
allOtherProps = _objectWithoutProperties(props, _excluded2);
var id = synchronizedSettings.id,
del2 = synchronizedSettings.scale,
restSynchronizedSettings = _objectWithoutProperties(synchronizedSettings, _excluded3);
return /*#__PURE__*/React.createElement(CartesianAxis, _extends({}, allOtherProps, restSynchronizedSettings, {
x: position.x,
y: position.y,
width: axisSize.width,
height: axisSize.height,
className: clsx("recharts-".concat(axisType, " ").concat(axisType), className),
viewBox: viewBox,
ticks: cartesianTickItems,
axisType: axisType,
axisId: xAxisId
}));
};
export var xAxisDefaultProps = {
allowDataOverflow: implicitXAxis.allowDataOverflow,
allowDecimals: implicitXAxis.allowDecimals,
allowDuplicatedCategory: implicitXAxis.allowDuplicatedCategory,
angle: implicitXAxis.angle,
axisLine: defaultCartesianAxisProps.axisLine,
height: implicitXAxis.height,
hide: false,
includeHidden: implicitXAxis.includeHidden,
interval: implicitXAxis.interval,
label: false,
minTickGap: implicitXAxis.minTickGap,
mirror: implicitXAxis.mirror,
orientation: implicitXAxis.orientation,
padding: implicitXAxis.padding,
reversed: implicitXAxis.reversed,
scale: implicitXAxis.scale,
tick: implicitXAxis.tick,
tickCount: implicitXAxis.tickCount,
tickLine: defaultCartesianAxisProps.tickLine,
tickSize: defaultCartesianAxisProps.tickSize,
type: implicitXAxis.type,
niceTicks: implicitXAxis.niceTicks,
xAxisId: 0
};
var XAxisSettingsDispatcher = outsideProps => {
var props = resolveDefaultProps(outsideProps, xAxisDefaultProps);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetXAxisSettings, {
allowDataOverflow: props.allowDataOverflow,
allowDecimals: props.allowDecimals,
allowDuplicatedCategory: props.allowDuplicatedCategory,
angle: props.angle,
dataKey: props.dataKey,
domain: props.domain,
height: props.height,
hide: props.hide,
id: props.xAxisId,
includeHidden: props.includeHidden,
interval: props.interval,
minTickGap: props.minTickGap,
mirror: props.mirror,
name: props.name,
orientation: props.orientation,
padding: props.padding,
reversed: props.reversed,
scale: props.scale,
tick: props.tick,
tickCount: props.tickCount,
tickFormatter: props.tickFormatter,
ticks: props.ticks,
type: props.type,
unit: props.unit,
niceTicks: props.niceTicks
}), /*#__PURE__*/React.createElement(XAxisImpl, props));
};
/**
* @consumes CartesianViewBoxContext
* @provides CartesianLabelContext
*/
export var XAxis = /*#__PURE__*/React.memo(XAxisSettingsDispatcher, axisPropsAreEqual);
// @ts-expect-error we need to set the displayName for debugging purposes
XAxis.displayName = 'XAxis';

202
frontend/node_modules/recharts/es6/cartesian/YAxis.js generated vendored Normal file
View file

@ -0,0 +1,202 @@
var _excluded = ["type"],
_excluded2 = ["dangerouslySetInnerHTML", "ticks", "scale"],
_excluded3 = ["id", "scale"];
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); }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
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; }
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; }
import * as React from 'react';
import { isValidElement, useLayoutEffect, useMemo, useRef } from 'react';
import { clsx } from 'clsx';
import { CartesianAxis, defaultCartesianAxisProps } from './CartesianAxis';
import { addYAxis, replaceYAxis, removeYAxis, updateYAxisWidth } from '../state/cartesianAxisSlice';
import { useAppDispatch, useAppSelector } from '../state/hooks';
import { implicitYAxis, selectTicksOfAxis, selectYAxisPosition, selectYAxisSettingsNoDefaults, selectYAxisSize } from '../state/selectors/axisSelectors';
import { selectAxisViewBox } from '../state/selectors/selectChartOffsetInternal';
import { useIsPanorama } from '../context/PanoramaContext';
import { isLabelContentAFunction } from '../component/Label';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { axisPropsAreEqual } from '../util/axisPropsAreEqual';
import { useCartesianChartLayout } from '../context/chartLayoutContext';
import { getAxisTypeBasedOnLayout } from '../util/getAxisTypeBasedOnLayout';
function SetYAxisSettings(props) {
var dispatch = useAppDispatch();
var prevSettingsRef = useRef(null);
var layout = useCartesianChartLayout();
var typeFromProps = props.type,
restProps = _objectWithoutProperties(props, _excluded);
var evaluatedType = getAxisTypeBasedOnLayout(layout, 'yAxis', typeFromProps);
var settings = useMemo(() => {
if (evaluatedType == null) {
return undefined;
}
return _objectSpread(_objectSpread({}, restProps), {}, {
type: evaluatedType
});
}, [evaluatedType, restProps]);
useLayoutEffect(() => {
if (settings == null) {
return;
}
if (prevSettingsRef.current === null) {
dispatch(addYAxis(settings));
} else if (prevSettingsRef.current !== settings) {
dispatch(replaceYAxis({
prev: prevSettingsRef.current,
next: settings
}));
}
prevSettingsRef.current = settings;
}, [settings, dispatch]);
useLayoutEffect(() => {
return () => {
if (prevSettingsRef.current) {
dispatch(removeYAxis(prevSettingsRef.current));
prevSettingsRef.current = null;
}
};
}, [dispatch]);
return null;
}
function YAxisImpl(props) {
var yAxisId = props.yAxisId,
className = props.className,
width = props.width,
label = props.label;
var cartesianAxisRef = useRef(null);
var labelRef = useRef(null);
var viewBox = useAppSelector(selectAxisViewBox);
var isPanorama = useIsPanorama();
var dispatch = useAppDispatch();
var axisType = 'yAxis';
var axisSize = useAppSelector(state => selectYAxisSize(state, yAxisId));
var position = useAppSelector(state => selectYAxisPosition(state, yAxisId));
var cartesianTickItems = useAppSelector(state => selectTicksOfAxis(state, axisType, yAxisId, isPanorama));
/*
* Here we select settings from the store and prefer to use them instead of the actual props
* so that the chart is consistent. If we used the props directly, some components will use axis settings
* from state and some from props and because there is a render step between these two, they might be showing different things.
* https://github.com/recharts/recharts/issues/6257
*/
var synchronizedSettings = useAppSelector(state => selectYAxisSettingsNoDefaults(state, yAxisId));
useLayoutEffect(() => {
// No dynamic width calculation is done when width !== 'auto'
// or when a function/react element is used for label
if (width !== 'auto' || !axisSize || isLabelContentAFunction(label) || /*#__PURE__*/isValidElement(label) || synchronizedSettings == null) {
return;
}
var axisComponent = cartesianAxisRef.current;
if (!axisComponent) {
return;
}
var updatedYAxisWidth = axisComponent.getCalculatedWidth();
// if the width has changed, dispatch an action to update the width
if (Math.round(axisSize.width) !== Math.round(updatedYAxisWidth)) {
dispatch(updateYAxisWidth({
id: yAxisId,
width: updatedYAxisWidth
}));
}
}, [
// The dependency on cartesianAxisRef.current is not needed because useLayoutEffect will run after every render.
// The ref will be populated by then.
// To re-run this effect when ticks change, we can depend on the ticks array from the store.
cartesianTickItems, axisSize, dispatch, label, yAxisId, width, synchronizedSettings]);
if (axisSize == null || position == null || synchronizedSettings == null) {
return null;
}
var dangerouslySetInnerHTML = props.dangerouslySetInnerHTML,
ticks = props.ticks,
del = props.scale,
allOtherProps = _objectWithoutProperties(props, _excluded2);
var id = synchronizedSettings.id,
del2 = synchronizedSettings.scale,
restSynchronizedSettings = _objectWithoutProperties(synchronizedSettings, _excluded3);
return /*#__PURE__*/React.createElement(CartesianAxis, _extends({}, allOtherProps, restSynchronizedSettings, {
ref: cartesianAxisRef,
labelRef: labelRef,
x: position.x,
y: position.y,
tickTextProps: width === 'auto' ? {
width: undefined
} : {
width
},
width: axisSize.width,
height: axisSize.height,
className: clsx("recharts-".concat(axisType, " ").concat(axisType), className),
viewBox: viewBox,
ticks: cartesianTickItems,
axisType: axisType,
axisId: yAxisId
}));
}
export var yAxisDefaultProps = {
allowDataOverflow: implicitYAxis.allowDataOverflow,
allowDecimals: implicitYAxis.allowDecimals,
allowDuplicatedCategory: implicitYAxis.allowDuplicatedCategory,
angle: implicitYAxis.angle,
axisLine: defaultCartesianAxisProps.axisLine,
hide: false,
includeHidden: implicitYAxis.includeHidden,
interval: implicitYAxis.interval,
label: false,
minTickGap: implicitYAxis.minTickGap,
mirror: implicitYAxis.mirror,
orientation: implicitYAxis.orientation,
padding: implicitYAxis.padding,
reversed: implicitYAxis.reversed,
scale: implicitYAxis.scale,
tick: implicitYAxis.tick,
tickCount: implicitYAxis.tickCount,
tickLine: defaultCartesianAxisProps.tickLine,
tickSize: defaultCartesianAxisProps.tickSize,
type: implicitYAxis.type,
niceTicks: implicitYAxis.niceTicks,
width: implicitYAxis.width,
yAxisId: 0
};
var YAxisSettingsDispatcher = outsideProps => {
var props = resolveDefaultProps(outsideProps, yAxisDefaultProps);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetYAxisSettings, {
interval: props.interval,
id: props.yAxisId,
scale: props.scale,
type: props.type,
domain: props.domain,
allowDataOverflow: props.allowDataOverflow,
dataKey: props.dataKey,
allowDuplicatedCategory: props.allowDuplicatedCategory,
allowDecimals: props.allowDecimals,
tickCount: props.tickCount,
padding: props.padding,
includeHidden: props.includeHidden,
reversed: props.reversed,
ticks: props.ticks,
width: props.width,
orientation: props.orientation,
mirror: props.mirror,
hide: props.hide,
unit: props.unit,
name: props.name,
angle: props.angle,
minTickGap: props.minTickGap,
tick: props.tick,
tickFormatter: props.tickFormatter,
niceTicks: props.niceTicks
}), /*#__PURE__*/React.createElement(YAxisImpl, props));
};
/**
* @consumes CartesianViewBoxContext
* @provides CartesianLabelContext
*/
export var YAxis = /*#__PURE__*/React.memo(YAxisSettingsDispatcher, axisPropsAreEqual);
// @ts-expect-error we need to set the displayName for debugging purposes
YAxis.displayName = 'YAxis';

61
frontend/node_modules/recharts/es6/cartesian/ZAxis.js generated vendored Normal file
View file

@ -0,0 +1,61 @@
import * as React from 'react';
import { useLayoutEffect, useRef } from 'react';
import { addZAxis, removeZAxis, replaceZAxis } from '../state/cartesianAxisSlice';
import { useAppDispatch } from '../state/hooks';
import { implicitZAxis } from '../state/selectors/axisSelectors';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
function SetZAxisSettings(settings) {
var dispatch = useAppDispatch();
var prevSettingsRef = useRef(null);
useLayoutEffect(() => {
if (prevSettingsRef.current === null) {
dispatch(addZAxis(settings));
} else if (prevSettingsRef.current !== settings) {
dispatch(replaceZAxis({
prev: prevSettingsRef.current,
next: settings
}));
}
prevSettingsRef.current = settings;
}, [settings, dispatch]);
useLayoutEffect(() => {
return () => {
if (prevSettingsRef.current) {
dispatch(removeZAxis(prevSettingsRef.current));
prevSettingsRef.current = null;
}
};
}, [dispatch]);
return null;
}
export var zAxisDefaultProps = {
zAxisId: 0,
range: implicitZAxis.range,
scale: implicitZAxis.scale,
type: implicitZAxis.type
};
/**
* Virtual axis, does not render anything itself. Has no ticks, grid lines, or labels.
* Useful for dynamically setting Scatter point size, based on data.
*
* @consumes CartesianViewBoxContext
*/
export function ZAxis(outsideProps) {
var props = resolveDefaultProps(outsideProps, zAxisDefaultProps);
return /*#__PURE__*/React.createElement(SetZAxisSettings, {
domain: props.domain,
id: props.zAxisId,
dataKey: props.dataKey,
name: props.name,
unit: props.unit,
range: props.range,
scale: props.scale,
type: props.type,
allowDuplicatedCategory: implicitZAxis.allowDuplicatedCategory,
allowDataOverflow: implicitZAxis.allowDataOverflow,
reversed: implicitZAxis.reversed,
includeHidden: implicitZAxis.includeHidden
});
}
ZAxis.displayName = 'ZAxis';

View file

@ -0,0 +1,193 @@
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
import { getPercentValue, isNumber, isPercent } from '../util/DataUtils';
import { cartesianViewBoxToTrapezoid } from '../context/chartLayoutContext';
/**
* Calculates the position and alignment for a generic element in a Cartesian coordinate system.
*
* @param options - The options including viewBox, position, and offset.
* @returns The calculated x, y, alignment and size.
*/
export var getCartesianPosition = options => {
var viewBox = options.viewBox,
position = options.position,
_options$offset = options.offset,
offset = _options$offset === void 0 ? 0 : _options$offset,
parentViewBoxFromOptions = options.parentViewBox,
clamp = options.clamp;
var _cartesianViewBoxToTr = cartesianViewBoxToTrapezoid(viewBox),
x = _cartesianViewBoxToTr.x,
y = _cartesianViewBoxToTr.y,
height = _cartesianViewBoxToTr.height,
upperWidth = _cartesianViewBoxToTr.upperWidth,
lowerWidth = _cartesianViewBoxToTr.lowerWidth;
// Funnel.tsx provides a viewBox where `x` is the top-left of the trapezoid shape.
var upperX = x;
// The trapezoid is centered, so we can calculate the other corners from the top-left.
var lowerX = x + (upperWidth - lowerWidth) / 2;
// middleX is the x-coordinate of the left edge at the vertical midpoint of the trapezoid.
var middleX = (upperX + lowerX) / 2;
// The width of the trapezoid at its vertical midpoint.
var midHeightWidth = (upperWidth + lowerWidth) / 2;
// The center x-coordinate is constant for the entire height of the trapezoid.
var centerX = upperX + upperWidth / 2;
// Define vertical offsets and position inverts based on the value being positive or negative.
// This allows labels to be positioned correctly for bars with negative height.
var verticalSign = height >= 0 ? 1 : -1;
var verticalOffset = verticalSign * offset;
var verticalEnd = verticalSign > 0 ? 'end' : 'start';
var verticalStart = verticalSign > 0 ? 'start' : 'end';
// Define horizontal offsets and position inverts based on the value being positive or negative.
// This allows labels to be positioned correctly for bars with negative width.
var horizontalSign = upperWidth >= 0 ? 1 : -1;
var horizontalOffset = horizontalSign * offset;
var horizontalEnd = horizontalSign > 0 ? 'end' : 'start';
var horizontalStart = horizontalSign > 0 ? 'start' : 'end';
// We assume parentViewBox is generic if provided.
// The user has asserted that parentViewBox will be CartesianViewBoxRequired if present.
var parentViewBox = parentViewBoxFromOptions;
if (position === 'top') {
var result = {
x: upperX + upperWidth / 2,
y: y - verticalOffset,
horizontalAnchor: 'middle',
verticalAnchor: verticalEnd
};
if (clamp && parentViewBox) {
result.height = Math.max(y - parentViewBox.y, 0);
result.width = upperWidth;
}
return result;
}
if (position === 'bottom') {
var _result = {
x: lowerX + lowerWidth / 2,
y: y + height + verticalOffset,
horizontalAnchor: 'middle',
verticalAnchor: verticalStart
};
if (clamp && parentViewBox) {
_result.height = Math.max(parentViewBox.y + parentViewBox.height - (y + height), 0);
_result.width = lowerWidth;
}
return _result;
}
if (position === 'left') {
var _result2 = {
x: middleX - horizontalOffset,
y: y + height / 2,
horizontalAnchor: horizontalEnd,
verticalAnchor: 'middle'
};
if (clamp && parentViewBox) {
_result2.width = Math.max(_result2.x - parentViewBox.x, 0);
_result2.height = height;
}
return _result2;
}
if (position === 'right') {
var _result3 = {
x: middleX + midHeightWidth + horizontalOffset,
y: y + height / 2,
horizontalAnchor: horizontalStart,
verticalAnchor: 'middle'
};
if (clamp && parentViewBox) {
_result3.width = Math.max(parentViewBox.x + parentViewBox.width - _result3.x, 0);
_result3.height = height;
}
return _result3;
}
var sizeAttrs = clamp && parentViewBox ? {
width: midHeightWidth,
height
} : {};
if (position === 'insideLeft') {
return _objectSpread({
x: middleX + horizontalOffset,
y: y + height / 2,
horizontalAnchor: horizontalStart,
verticalAnchor: 'middle'
}, sizeAttrs);
}
if (position === 'insideRight') {
return _objectSpread({
x: middleX + midHeightWidth - horizontalOffset,
y: y + height / 2,
horizontalAnchor: horizontalEnd,
verticalAnchor: 'middle'
}, sizeAttrs);
}
if (position === 'insideTop') {
return _objectSpread({
x: upperX + upperWidth / 2,
y: y + verticalOffset,
horizontalAnchor: 'middle',
verticalAnchor: verticalStart
}, sizeAttrs);
}
if (position === 'insideBottom') {
return _objectSpread({
x: lowerX + lowerWidth / 2,
y: y + height - verticalOffset,
horizontalAnchor: 'middle',
verticalAnchor: verticalEnd
}, sizeAttrs);
}
if (position === 'insideTopLeft') {
return _objectSpread({
x: upperX + horizontalOffset,
y: y + verticalOffset,
horizontalAnchor: horizontalStart,
verticalAnchor: verticalStart
}, sizeAttrs);
}
if (position === 'insideTopRight') {
return _objectSpread({
x: upperX + upperWidth - horizontalOffset,
y: y + verticalOffset,
horizontalAnchor: horizontalEnd,
verticalAnchor: verticalStart
}, sizeAttrs);
}
if (position === 'insideBottomLeft') {
return _objectSpread({
x: lowerX + horizontalOffset,
y: y + height - verticalOffset,
horizontalAnchor: horizontalStart,
verticalAnchor: verticalEnd
}, sizeAttrs);
}
if (position === 'insideBottomRight') {
return _objectSpread({
x: lowerX + lowerWidth - horizontalOffset,
y: y + height - verticalOffset,
horizontalAnchor: horizontalEnd,
verticalAnchor: verticalEnd
}, sizeAttrs);
}
if (!!position && typeof position === 'object' && (isNumber(position.x) || isPercent(position.x)) && (isNumber(position.y) || isPercent(position.y))) {
// TODO: This is not quite right. The width of the trapezoid changes with y.
// A percentage-based x should be relative to the width at that y.
// For now, we use the mid-height width as a reasonable approximation.
return _objectSpread({
x: x + getPercentValue(position.x, midHeightWidth),
y: y + getPercentValue(position.y, height),
horizontalAnchor: 'end',
verticalAnchor: 'end'
}, sizeAttrs);
}
return _objectSpread({
x: centerX,
y: y + height / 2,
horizontalAnchor: 'middle',
verticalAnchor: 'middle'
}, sizeAttrs);
};

View file

@ -0,0 +1,131 @@
import { isVisible } from '../util/TickUtils';
import { getEveryNth } from '../util/getEveryNth';
export function getEquidistantTicks(sign, boundaries, getTickSize, ticks, minTickGap) {
// If the ticks are readonly, then the slice might not be necessary
var result = (ticks || []).slice();
var initialStart = boundaries.start,
end = boundaries.end;
var index = 0;
// Premature optimisation idea 1: Estimate a lower bound, and start from there.
// For now, start from every tick
var stepsize = 1;
var start = initialStart;
var _loop = function _loop() {
// Given stepsize, evaluate whether every stepsize-th tick can be shown.
// If it can not, then increase the stepsize by 1, and try again.
var entry = ticks === null || ticks === void 0 ? void 0 : ticks[index];
// Break condition - If we have evaluated all the ticks, then we are done.
if (entry === undefined) {
return {
v: getEveryNth(ticks, stepsize)
};
}
// Check if the element collides with the next element
var i = index;
var size;
var getSize = () => {
if (size === undefined) {
size = getTickSize(entry, i);
}
return size;
};
var tickCoord = entry.coordinate;
// We will always show the first tick.
var isShow = index === 0 || isVisible(sign, tickCoord, getSize, start, end);
if (!isShow) {
// Start all over with a larger stepsize
index = 0;
start = initialStart;
stepsize += 1;
}
if (isShow) {
// If it can be shown, update the start
start = tickCoord + sign * (getSize() / 2 + minTickGap);
index += stepsize;
}
},
_ret;
while (stepsize <= result.length) {
_ret = _loop();
if (_ret) return _ret.v;
}
return [];
}
export function getEquidistantPreserveEndTicks(sign, boundaries, getTickSize, ticks, minTickGap) {
// If the ticks are readonly, then the slice might not be necessary
// Reworked logic for getEquidistantPreserveEndTicks
var result = (ticks || []).slice();
var len = result.length;
if (len === 0) {
return [];
}
var initialStart = boundaries.start,
end = boundaries.end;
// Start with stepsize = 1 (every tick) up to the maximum possible stepsize (len)
for (var stepsize = 1; stepsize <= len; stepsize++) {
// 1. Calculate the offset so the last tick (index len - 1) is always included in the sequence.
var offset = (len - 1) % stepsize;
var start = initialStart; // `start` tracks the coordinate of the last successfully drawn tick + gap
var ok = true;
// 2. Iterate through the end-anchored sequence: offset, offset + stepsize, ..., len - 1
var _loop2 = function _loop2() {
var entry = ticks[index];
if (entry == null) {
return 0; // continue
}
var i = index;
var size;
// Use a function to get size, as in the original code
var getSize = () => {
if (size === undefined) {
size = getTickSize(entry, i);
}
return size;
};
var tickCoord = entry.coordinate;
// 3. Apply visibility logic (including the first tick special case)
// The reviewer says *not* to unconditionally bypass checks for the last tick.
var isShow = index === offset || isVisible(sign, tickCoord, getSize, start, end);
if (!isShow) {
// If any tick in this end-anchored sequence fails visibility/collision,
// reject this stepsize and move to the next iteration (larger stepsize).
ok = false;
return 1; // break
}
// 4. If showable, update the 'start' coordinate for the next collision check
if (isShow) {
start = tickCoord + sign * (getSize() / 2 + minTickGap);
}
},
_ret2;
for (var index = offset; index < len; index += stepsize) {
_ret2 = _loop2();
if (_ret2 === 0) continue;
if (_ret2 === 1) break;
}
// 5. If the entire sequence for this stepsize passed the visibility check, return the result
if (ok) {
// Build the final result array explicitly using the validated stepsize and offset.
var finalTicks = [];
for (var _index = offset; _index < len; _index += stepsize) {
var tick = ticks[_index];
if (tick != null) {
finalTicks.push(tick);
}
}
return finalTicks;
}
}
// If no stepsize works (this shouldn't happen unless minTickGap is huge), return an empty array.
return [];
}

View file

@ -0,0 +1,172 @@
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
import { mathSign, isNumber } from '../util/DataUtils';
import { getStringSize } from '../util/DOMUtils';
import { Global } from '../util/Global';
import { isVisible, getTickBoundaries, getNumberIntervalTicks, getAngledTickWidth } from '../util/TickUtils';
import { getEquidistantTicks, getEquidistantPreserveEndTicks } from './getEquidistantTicks';
function getTicksEnd(sign, boundaries, getTickSize, ticks, minTickGap) {
var result = (ticks || []).slice();
var len = result.length;
var start = boundaries.start;
var end = boundaries.end;
var _loop = function _loop(i) {
var initialEntry = result[i];
if (initialEntry == null) {
return 1; // continue
}
var entry = initialEntry;
var size;
var getSize = () => {
if (size === undefined) {
size = getTickSize(initialEntry, i);
}
return size;
};
if (i === len - 1) {
var gap = sign * (entry.coordinate + sign * getSize() / 2 - end);
result[i] = entry = _objectSpread(_objectSpread({}, entry), {}, {
tickCoord: gap > 0 ? entry.coordinate - gap * sign : entry.coordinate
});
} else {
result[i] = entry = _objectSpread(_objectSpread({}, entry), {}, {
tickCoord: entry.coordinate
});
}
if (entry.tickCoord != null) {
var isShow = isVisible(sign, entry.tickCoord, getSize, start, end);
if (isShow) {
end = entry.tickCoord - sign * (getSize() / 2 + minTickGap);
result[i] = _objectSpread(_objectSpread({}, entry), {}, {
isShow: true
});
}
}
};
for (var i = len - 1; i >= 0; i--) {
if (_loop(i)) continue;
}
return result;
}
function getTicksStart(sign, boundaries, getTickSize, ticks, minTickGap, preserveEnd) {
// This method is mutating the array so clone is indeed necessary here
var result = (ticks || []).slice();
var len = result.length;
var start = boundaries.start,
end = boundaries.end;
if (preserveEnd) {
// Try to guarantee the tail to be displayed
var tail = ticks[len - 1];
if (tail != null) {
var tailSize = getTickSize(tail, len - 1);
var tailGap = sign * (tail.coordinate + sign * tailSize / 2 - end);
result[len - 1] = tail = _objectSpread(_objectSpread({}, tail), {}, {
tickCoord: tailGap > 0 ? tail.coordinate - tailGap * sign : tail.coordinate
});
if (tail.tickCoord != null) {
var isTailShow = isVisible(sign, tail.tickCoord, () => tailSize, start, end);
if (isTailShow) {
end = tail.tickCoord - sign * (tailSize / 2 + minTickGap);
result[len - 1] = _objectSpread(_objectSpread({}, tail), {}, {
isShow: true
});
}
}
}
}
var count = preserveEnd ? len - 1 : len;
var _loop2 = function _loop2(i) {
var initialEntry = result[i];
if (initialEntry == null) {
return 1; // continue
}
var entry = initialEntry;
var size;
var getSize = () => {
if (size === undefined) {
size = getTickSize(initialEntry, i);
}
return size;
};
if (i === 0) {
var gap = sign * (entry.coordinate - sign * getSize() / 2 - start);
result[i] = entry = _objectSpread(_objectSpread({}, entry), {}, {
tickCoord: gap < 0 ? entry.coordinate - gap * sign : entry.coordinate
});
} else {
result[i] = entry = _objectSpread(_objectSpread({}, entry), {}, {
tickCoord: entry.coordinate
});
}
if (entry.tickCoord != null) {
var isShow = isVisible(sign, entry.tickCoord, getSize, start, end);
if (isShow) {
start = entry.tickCoord + sign * (getSize() / 2 + minTickGap);
result[i] = _objectSpread(_objectSpread({}, entry), {}, {
isShow: true
});
}
}
};
for (var i = 0; i < count; i++) {
if (_loop2(i)) continue;
}
return result;
}
export function getTicks(props, fontSize, letterSpacing) {
var tick = props.tick,
ticks = props.ticks,
viewBox = props.viewBox,
minTickGap = props.minTickGap,
orientation = props.orientation,
interval = props.interval,
tickFormatter = props.tickFormatter,
unit = props.unit,
angle = props.angle;
if (!ticks || !ticks.length || !tick) {
return [];
}
if (isNumber(interval) || Global.isSsr) {
var _getNumberIntervalTic;
return (_getNumberIntervalTic = getNumberIntervalTicks(ticks, isNumber(interval) ? interval : 0)) !== null && _getNumberIntervalTic !== void 0 ? _getNumberIntervalTic : [];
}
var candidates = [];
var sizeKey = orientation === 'top' || orientation === 'bottom' ? 'width' : 'height';
var unitSize = unit && sizeKey === 'width' ? getStringSize(unit, {
fontSize,
letterSpacing
}) : {
width: 0,
height: 0
};
var getTickSize = (content, index) => {
var value = typeof tickFormatter === 'function' ? tickFormatter(content.value, index) : content.value;
// Recharts only supports angles when sizeKey === 'width'
return sizeKey === 'width' ? getAngledTickWidth(getStringSize(value, {
fontSize,
letterSpacing
}), unitSize, angle) : getStringSize(value, {
fontSize,
letterSpacing
})[sizeKey];
};
var tick0 = ticks[0];
var tick1 = ticks[1];
var sign = ticks.length >= 2 && tick0 != null && tick1 != null ? mathSign(tick1.coordinate - tick0.coordinate) : 1;
var boundaries = getTickBoundaries(viewBox, sign, sizeKey);
if (interval === 'equidistantPreserveStart') {
return getEquidistantTicks(sign, boundaries, getTickSize, ticks, minTickGap);
}
if (interval === 'equidistantPreserveEnd') {
return getEquidistantPreserveEndTicks(sign, boundaries, getTickSize, ticks, minTickGap);
}
if (interval === 'preserveStart' || interval === 'preserveStartEnd') {
candidates = getTicksStart(sign, boundaries, getTickSize, ticks, minTickGap, interval === 'preserveStartEnd');
} else {
candidates = getTicksEnd(sign, boundaries, getTickSize, ticks, minTickGap);
}
return candidates.filter(entry => entry.isShow);
}

View file

@ -0,0 +1,48 @@
import { useCallback, useRef } from 'react';
import { round } from '../util/round';
/**
* Tracks the animated visible length of a Line's SVG path across data changes.
*
* Invariants:
* 1. The visible length only grows (monotonically non-decreasing with animationElapsedTime).
* 2. The visible length changes continuously — no jumps when data changes mid-animation.
* This is achieved by tracking the maximum animated length in pixels and using it
* as the starting point for the next animation.
* 3. Once the line reaches 100% visibility, it never becomes partially visible again.
* In that case the hook returns `null`, meaning no animation stroke-dasharray is needed.
*
* @param points The current set of points for the line. When this reference changes,
* the hook detects a data change and starts a new animation from the current visible length.
* @returns A stable callback `(animationElapsedTime, totalLength) => number | null` where:
* - `animationElapsedTime` is the animation progress (0 to 1)
* - `totalLength` is the current total length of the SVG path in pixels
* - returns the visible length in pixels, or `null` if the line is fully visible
*/
export function useAnimatedLineLength(points) {
var startingLengthRef = useRef(0);
var maxAnimatedLengthRef = useRef(0);
var reachedFullRef = useRef(false);
var prevPointsRef = useRef(points);
if (prevPointsRef.current !== points) {
startingLengthRef.current = maxAnimatedLengthRef.current;
prevPointsRef.current = points;
}
// The callback is stable (never changes identity) because it only reads from refs.
// This avoids triggering unnecessary re-renders in consumers.
return useCallback((animationElapsedTime, totalLength) => {
if (reachedFullRef.current) {
return null;
}
var visibleLength = Math.min(round(startingLengthRef.current + animationElapsedTime * totalLength), totalLength);
if (animationElapsedTime > 0 && totalLength > 0) {
maxAnimatedLengthRef.current = Math.max(maxAnimatedLengthRef.current, visibleLength);
if (visibleLength >= totalLength) {
reachedFullRef.current = true;
return null;
}
}
return visibleLength;
}, []);
}

21
frontend/node_modules/recharts/es6/chart/AreaChart.js generated vendored Normal file
View file

@ -0,0 +1,21 @@
import * as React from 'react';
import { forwardRef } from 'react';
import { arrayTooltipSearcher } from '../state/optionsSlice';
import { CartesianChart } from './CartesianChart';
var allowedTooltipTypes = ['axis'];
/**
* @consumes ResponsiveContainerContext
* @provides CartesianViewBoxContext
* @provides CartesianChartContext
*/
export var AreaChart = /*#__PURE__*/forwardRef((props, ref) => {
return /*#__PURE__*/React.createElement(CartesianChart, {
chartName: "AreaChart",
defaultTooltipEventType: "axis",
validateTooltipEventTypes: allowedTooltipTypes,
tooltipPayloadSearcher: arrayTooltipSearcher,
categoricalChartProps: props,
ref: ref
});
});

21
frontend/node_modules/recharts/es6/chart/BarChart.js generated vendored Normal file
View file

@ -0,0 +1,21 @@
import * as React from 'react';
import { forwardRef } from 'react';
import { arrayTooltipSearcher } from '../state/optionsSlice';
import { CartesianChart } from './CartesianChart';
var allowedTooltipTypes = ['axis', 'item'];
/**
* @consumes ResponsiveContainerContext
* @provides CartesianViewBoxContext
* @provides CartesianChartContext
*/
export var BarChart = /*#__PURE__*/forwardRef((props, ref) => {
return /*#__PURE__*/React.createElement(CartesianChart, {
chartName: "BarChart",
defaultTooltipEventType: "axis",
validateTooltipEventTypes: allowedTooltipTypes,
tooltipPayloadSearcher: arrayTooltipSearcher,
categoricalChartProps: props,
ref: ref
});
});

View file

@ -0,0 +1,84 @@
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); }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
import * as React from 'react';
import { forwardRef } from 'react';
import { RechartsStoreProvider } from '../state/RechartsStoreProvider';
import { ChartDataContextProvider } from '../context/chartDataContext';
import { ReportMainChartProps } from '../state/ReportMainChartProps';
import { ReportChartProps } from '../state/ReportChartProps';
import { ReportEventSettings } from '../state/ReportEventSettings';
import { CategoricalChart } from './CategoricalChart';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { initialEventSettingsState } from '../state/eventSettingsSlice';
var defaultMargin = {
top: 5,
right: 5,
bottom: 5,
left: 5
};
export var defaultCartesianChartProps = _objectSpread({
accessibilityLayer: true,
barCategoryGap: '10%',
barGap: 4,
layout: 'horizontal',
margin: defaultMargin,
responsive: false,
reverseStackOrder: false,
stackOffset: 'none',
syncMethod: 'index'
}, initialEventSettingsState);
/**
* These are one-time, immutable options that decide the chart's behavior.
* Users who wish to call CartesianChart may decide to pass these options explicitly,
* but usually we would expect that they use one of the convenience components like BarChart, LineChart, etc.
*/
export var CartesianChart = /*#__PURE__*/forwardRef(function CartesianChart(props, ref) {
var _categoricalChartProp;
var rootChartProps = resolveDefaultProps(props.categoricalChartProps, defaultCartesianChartProps);
var chartName = props.chartName,
defaultTooltipEventType = props.defaultTooltipEventType,
validateTooltipEventTypes = props.validateTooltipEventTypes,
tooltipPayloadSearcher = props.tooltipPayloadSearcher,
categoricalChartProps = props.categoricalChartProps;
var options = {
chartName,
defaultTooltipEventType,
validateTooltipEventTypes,
tooltipPayloadSearcher,
eventEmitter: undefined
};
return /*#__PURE__*/React.createElement(RechartsStoreProvider, {
preloadedState: {
options
},
reduxStoreName: (_categoricalChartProp = categoricalChartProps.id) !== null && _categoricalChartProp !== void 0 ? _categoricalChartProp : chartName
}, /*#__PURE__*/React.createElement(ChartDataContextProvider, {
chartData: categoricalChartProps.data
}), /*#__PURE__*/React.createElement(ReportMainChartProps, {
layout: rootChartProps.layout,
margin: rootChartProps.margin
}), /*#__PURE__*/React.createElement(ReportEventSettings, {
throttleDelay: rootChartProps.throttleDelay,
throttledEvents: rootChartProps.throttledEvents
}), /*#__PURE__*/React.createElement(ReportChartProps, {
baseValue: rootChartProps.baseValue,
accessibilityLayer: rootChartProps.accessibilityLayer,
barCategoryGap: rootChartProps.barCategoryGap,
maxBarSize: rootChartProps.maxBarSize,
stackOffset: rootChartProps.stackOffset,
barGap: rootChartProps.barGap,
barSize: rootChartProps.barSize,
syncId: rootChartProps.syncId,
syncMethod: rootChartProps.syncMethod,
className: rootChartProps.className,
reverseStackOrder: rootChartProps.reverseStackOrder
}), /*#__PURE__*/React.createElement(CategoricalChart, _extends({}, rootChartProps, {
ref: ref
})));
});

View file

@ -0,0 +1,61 @@
var _excluded = ["width", "height", "responsive", "children", "className", "style", "compact", "title", "desc"];
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; }
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; }
import * as React from 'react';
import { forwardRef } from 'react';
import { RootSurface } from '../container/RootSurface';
import { RechartsWrapper } from './RechartsWrapper';
import { ClipPathProvider } from '../container/ClipPathProvider';
import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
import { ReportChartSize } from '../context/chartLayoutContext';
export var CategoricalChart = /*#__PURE__*/forwardRef((props, ref) => {
var width = props.width,
height = props.height,
responsive = props.responsive,
children = props.children,
className = props.className,
style = props.style,
compact = props.compact,
title = props.title,
desc = props.desc,
others = _objectWithoutProperties(props, _excluded);
var attrs = svgPropertiesNoEvents(others);
/*
* The "compact" mode is used as the panorama within Brush.
* However because `compact` is a public prop, let's assume that it can render outside of Brush too.
*/
if (compact) {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReportChartSize, {
width: width,
height: height
}), /*#__PURE__*/React.createElement(RootSurface, {
otherAttributes: attrs,
title: title,
desc: desc
}, children));
}
return /*#__PURE__*/React.createElement(RechartsWrapper, {
className: className,
style: style,
width: width,
height: height,
responsive: responsive !== null && responsive !== void 0 ? responsive : false,
onClick: props.onClick,
onMouseLeave: props.onMouseLeave,
onMouseEnter: props.onMouseEnter,
onMouseMove: props.onMouseMove,
onMouseDown: props.onMouseDown,
onMouseUp: props.onMouseUp,
onContextMenu: props.onContextMenu,
onDoubleClick: props.onDoubleClick,
onTouchStart: props.onTouchStart,
onTouchMove: props.onTouchMove,
onTouchEnd: props.onTouchEnd
}, /*#__PURE__*/React.createElement(RootSurface, {
otherAttributes: attrs,
title: title,
desc: desc,
ref: ref
}, /*#__PURE__*/React.createElement(ClipPathProvider, null, children)));
});

View file

@ -0,0 +1,21 @@
import * as React from 'react';
import { forwardRef } from 'react';
import { arrayTooltipSearcher } from '../state/optionsSlice';
import { CartesianChart } from './CartesianChart';
var allowedTooltipTypes = ['axis'];
/**
* @consumes ResponsiveContainerContext
* @provides CartesianViewBoxContext
* @provides CartesianChartContext
*/
export var ComposedChart = /*#__PURE__*/forwardRef((props, ref) => {
return /*#__PURE__*/React.createElement(CartesianChart, {
chartName: "ComposedChart",
defaultTooltipEventType: "axis",
validateTooltipEventTypes: allowedTooltipTypes,
tooltipPayloadSearcher: arrayTooltipSearcher,
categoricalChartProps: props,
ref: ref
});
});

View file

@ -0,0 +1,21 @@
import * as React from 'react';
import { forwardRef } from 'react';
import { arrayTooltipSearcher } from '../state/optionsSlice';
import { CartesianChart } from './CartesianChart';
var allowedTooltipTypes = ['item'];
/**
* @consumes ResponsiveContainerContext
* @provides CartesianViewBoxContext
* @provides CartesianChartContext
*/
export var FunnelChart = /*#__PURE__*/forwardRef((props, ref) => {
return /*#__PURE__*/React.createElement(CartesianChart, {
chartName: "FunnelChart",
defaultTooltipEventType: "item",
validateTooltipEventTypes: allowedTooltipTypes,
tooltipPayloadSearcher: arrayTooltipSearcher,
categoricalChartProps: props,
ref: ref
});
});

21
frontend/node_modules/recharts/es6/chart/LineChart.js generated vendored Normal file
View file

@ -0,0 +1,21 @@
import * as React from 'react';
import { forwardRef } from 'react';
import { arrayTooltipSearcher } from '../state/optionsSlice';
import { CartesianChart } from './CartesianChart';
var allowedTooltipTypes = ['axis'];
/**
* @consumes ResponsiveContainerContext
* @provides CartesianViewBoxContext
* @provides CartesianChartContext
*/
export var LineChart = /*#__PURE__*/forwardRef((props, ref) => {
return /*#__PURE__*/React.createElement(CartesianChart, {
chartName: "LineChart",
defaultTooltipEventType: "axis",
validateTooltipEventTypes: allowedTooltipTypes,
tooltipPayloadSearcher: arrayTooltipSearcher,
categoricalChartProps: props,
ref: ref
});
});

33
frontend/node_modules/recharts/es6/chart/PieChart.js generated vendored Normal file
View file

@ -0,0 +1,33 @@
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
import * as React from 'react';
import { forwardRef } from 'react';
import { arrayTooltipSearcher } from '../state/optionsSlice';
import { defaultPolarChartProps, PolarChart } from './PolarChart';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
var allowedTooltipTypes = ['item'];
export var defaultPieChartProps = _objectSpread(_objectSpread({}, defaultPolarChartProps), {}, {
layout: 'centric',
startAngle: 0,
endAngle: 360
});
/**
* @consumes ResponsiveContainerContext
* @provides PolarViewBoxContext
* @provides PolarChartContext
*/
export var PieChart = /*#__PURE__*/forwardRef((props, ref) => {
var propsWithDefaults = resolveDefaultProps(props, defaultPieChartProps);
return /*#__PURE__*/React.createElement(PolarChart, {
chartName: "PieChart",
defaultTooltipEventType: "item",
validateTooltipEventTypes: allowedTooltipTypes,
tooltipPayloadSearcher: arrayTooltipSearcher,
categoricalChartProps: propsWithDefaults,
ref: ref
});
});

113
frontend/node_modules/recharts/es6/chart/PolarChart.js generated vendored Normal file
View file

@ -0,0 +1,113 @@
var _excluded = ["layout"];
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); }
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; }
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; }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
import { forwardRef } from 'react';
import * as React from 'react';
import { RechartsStoreProvider } from '../state/RechartsStoreProvider';
import { ChartDataContextProvider } from '../context/chartDataContext';
import { ReportMainChartProps } from '../state/ReportMainChartProps';
import { ReportChartProps } from '../state/ReportChartProps';
import { ReportEventSettings } from '../state/ReportEventSettings';
import { ReportPolarOptions } from '../state/ReportPolarOptions';
import { CategoricalChart } from './CategoricalChart';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { initialEventSettingsState } from '../state/eventSettingsSlice';
var defaultMargin = {
top: 5,
right: 5,
bottom: 5,
left: 5
};
/**
* These default props are the same for all PolarChart components.
*/
export var defaultPolarChartProps = _objectSpread({
accessibilityLayer: true,
stackOffset: 'none',
barCategoryGap: '10%',
barGap: 4,
margin: defaultMargin,
reverseStackOrder: false,
syncMethod: 'index',
layout: 'radial',
responsive: false,
cx: '50%',
cy: '50%',
innerRadius: 0,
outerRadius: '80%'
}, initialEventSettingsState);
/**
* These props are required for the PolarChart to function correctly.
* Users usually would not need to specify these explicitly,
* because the convenience components like PieChart, RadarChart, etc.
* will provide these defaults.
* We can't have the defaults in this file because each of those convenience components
* have their own opinions about what they should be.
*/
/**
* These are one-time, immutable options that decide the chart's behavior.
* Users who wish to call CartesianChart may decide to pass these options explicitly,
* but usually we would expect that they use one of the convenience components like PieChart, RadarChart, etc.
*/
export var PolarChart = /*#__PURE__*/forwardRef(function PolarChart(props, ref) {
var _polarChartProps$id;
var polarChartProps = resolveDefaultProps(props.categoricalChartProps, defaultPolarChartProps);
var layout = polarChartProps.layout,
otherCategoricalProps = _objectWithoutProperties(polarChartProps, _excluded);
var chartName = props.chartName,
defaultTooltipEventType = props.defaultTooltipEventType,
validateTooltipEventTypes = props.validateTooltipEventTypes,
tooltipPayloadSearcher = props.tooltipPayloadSearcher;
var options = {
chartName,
defaultTooltipEventType,
validateTooltipEventTypes,
tooltipPayloadSearcher,
eventEmitter: undefined
};
return /*#__PURE__*/React.createElement(RechartsStoreProvider, {
preloadedState: {
options
},
reduxStoreName: (_polarChartProps$id = polarChartProps.id) !== null && _polarChartProps$id !== void 0 ? _polarChartProps$id : chartName
}, /*#__PURE__*/React.createElement(ChartDataContextProvider, {
chartData: polarChartProps.data
}), /*#__PURE__*/React.createElement(ReportMainChartProps, {
layout: layout,
margin: polarChartProps.margin
}), /*#__PURE__*/React.createElement(ReportEventSettings, {
throttleDelay: polarChartProps.throttleDelay,
throttledEvents: polarChartProps.throttledEvents
}), /*#__PURE__*/React.createElement(ReportChartProps, {
baseValue: undefined,
accessibilityLayer: polarChartProps.accessibilityLayer,
barCategoryGap: polarChartProps.barCategoryGap,
maxBarSize: polarChartProps.maxBarSize,
stackOffset: polarChartProps.stackOffset,
barGap: polarChartProps.barGap,
barSize: polarChartProps.barSize,
syncId: polarChartProps.syncId,
syncMethod: polarChartProps.syncMethod,
className: polarChartProps.className,
reverseStackOrder: polarChartProps.reverseStackOrder
}), /*#__PURE__*/React.createElement(ReportPolarOptions, {
cx: polarChartProps.cx,
cy: polarChartProps.cy,
startAngle: polarChartProps.startAngle,
endAngle: polarChartProps.endAngle,
innerRadius: polarChartProps.innerRadius,
outerRadius: polarChartProps.outerRadius
}), /*#__PURE__*/React.createElement(CategoricalChart, _extends({}, otherCategoricalProps, {
ref: ref
})));
});

32
frontend/node_modules/recharts/es6/chart/RadarChart.js generated vendored Normal file
View file

@ -0,0 +1,32 @@
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
import * as React from 'react';
import { forwardRef } from 'react';
import { arrayTooltipSearcher } from '../state/optionsSlice';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { defaultPolarChartProps, PolarChart } from './PolarChart';
var allowedTooltipTypes = ['axis'];
export var defaultRadarChartProps = _objectSpread(_objectSpread({}, defaultPolarChartProps), {}, {
layout: 'centric',
startAngle: 90,
endAngle: -270
});
/**
* @consumes ResponsiveContainerContext
* @provides PolarViewBoxContext
* @provides PolarChartContext
*/
export var RadarChart = /*#__PURE__*/forwardRef((props, ref) => {
var propsWithDefaults = resolveDefaultProps(props, defaultRadarChartProps);
return /*#__PURE__*/React.createElement(PolarChart, {
chartName: "RadarChart",
defaultTooltipEventType: "axis",
validateTooltipEventTypes: allowedTooltipTypes,
tooltipPayloadSearcher: arrayTooltipSearcher,
categoricalChartProps: propsWithDefaults,
ref: ref
});
});

View file

@ -0,0 +1,33 @@
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
import * as React from 'react';
import { forwardRef } from 'react';
import { arrayTooltipSearcher } from '../state/optionsSlice';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { defaultPolarChartProps, PolarChart } from './PolarChart';
var allowedTooltipTypes = ['axis', 'item'];
export var defaultRadialBarChartProps = _objectSpread(_objectSpread({}, defaultPolarChartProps), {}, {
layout: 'radial',
startAngle: 0,
endAngle: 360
});
/**
* @consumes ResponsiveContainerContext
* @provides PolarViewBoxContext
* @provides PolarChartContext
*/
export var RadialBarChart = /*#__PURE__*/forwardRef((props, ref) => {
var propsWithDefaults = resolveDefaultProps(props, defaultRadialBarChartProps);
return /*#__PURE__*/React.createElement(PolarChart, {
chartName: "RadialBarChart",
defaultTooltipEventType: "axis",
validateTooltipEventTypes: allowedTooltipTypes,
tooltipPayloadSearcher: arrayTooltipSearcher,
categoricalChartProps: propsWithDefaults,
ref: ref
});
});

View file

@ -0,0 +1,363 @@
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
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); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
import * as React from 'react';
import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
import { clsx } from 'clsx';
import { mouseLeaveChart } from '../state/tooltipSlice';
import { useAppDispatch } from '../state/hooks';
import { mouseClickAction, mouseMoveAction } from '../state/mouseEventsMiddleware';
import { useSynchronisedEventsFromOtherCharts } from '../synchronisation/useChartSynchronisation';
import { focusAction, keyDownAction, blurAction } from '../state/keyboardEventsMiddleware';
import { useReportScale } from '../util/useReportScale';
import { externalEventAction } from '../state/externalEventsMiddleware';
import { touchEventAction } from '../state/touchEventsMiddleware';
import { TooltipPortalContext } from '../context/tooltipPortalContext';
import { LegendPortalContext } from '../context/legendPortalContext';
import { ReportChartSize } from '../context/chartLayoutContext';
import { useResponsiveContainerContext } from '../component/ResponsiveContainer';
var EventSynchronizer = () => {
useSynchronisedEventsFromOtherCharts();
return null;
};
function getNumberOrZero(value) {
if (typeof value === 'number') {
return value;
}
if (typeof value === 'string') {
var parsed = parseFloat(value);
if (!Number.isNaN(parsed)) {
return parsed;
}
}
return 0;
}
var ResponsiveDiv = /*#__PURE__*/forwardRef((props, ref) => {
var _props$style, _props$style2;
var observerRef = useRef(null);
var _useState = useState({
containerWidth: getNumberOrZero((_props$style = props.style) === null || _props$style === void 0 ? void 0 : _props$style.width),
containerHeight: getNumberOrZero((_props$style2 = props.style) === null || _props$style2 === void 0 ? void 0 : _props$style2.height)
}),
_useState2 = _slicedToArray(_useState, 2),
sizes = _useState2[0],
setSizes = _useState2[1];
var setContainerSize = useCallback((newWidth, newHeight) => {
setSizes(prevState => {
var roundedWidth = Math.round(newWidth);
var roundedHeight = Math.round(newHeight);
if (prevState.containerWidth === roundedWidth && prevState.containerHeight === roundedHeight) {
return prevState;
}
return {
containerWidth: roundedWidth,
containerHeight: roundedHeight
};
});
}, []);
var innerRef = useCallback(node => {
// 1. First, call the external ref if it was provided
if (typeof ref === 'function') {
ref(node);
}
// 2. Disconnect any previously active ResizeObserver instance to prevent memory leaks
if (observerRef.current != null) {
observerRef.current.disconnect();
observerRef.current = null;
}
// 3. Initiate a new ResizeObserver on the valid DOM node
if (node != null && typeof ResizeObserver !== 'undefined') {
var _node$getBoundingClie = node.getBoundingClientRect(),
containerWidth = _node$getBoundingClie.width,
containerHeight = _node$getBoundingClie.height;
setContainerSize(containerWidth, containerHeight);
var callback = entries => {
var entry = entries[0];
if (entry == null) {
return;
}
var _entry$contentRect = entry.contentRect,
width = _entry$contentRect.width,
height = _entry$contentRect.height;
setContainerSize(width, height);
};
var observer = new ResizeObserver(callback);
observer.observe(node);
observerRef.current = observer;
}
}, [ref, setContainerSize]);
useEffect(() => {
return () => {
var observer = observerRef.current;
if (observer != null) {
observer.disconnect();
}
};
}, [setContainerSize]);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReportChartSize, {
width: sizes.containerWidth,
height: sizes.containerHeight
}), /*#__PURE__*/React.createElement("div", _extends({
ref: innerRef
}, props)));
});
var ReadSizeOnceDiv = /*#__PURE__*/forwardRef((props, ref) => {
var width = props.width,
height = props.height;
var _useState3 = useState({
containerWidth: getNumberOrZero(width),
containerHeight: getNumberOrZero(height)
}),
_useState4 = _slicedToArray(_useState3, 2),
sizes = _useState4[0],
setSizes = _useState4[1];
var setContainerSize = useCallback((newWidth, newHeight) => {
setSizes(prevState => {
var roundedWidth = Math.round(newWidth);
var roundedHeight = Math.round(newHeight);
if (prevState.containerWidth === roundedWidth && prevState.containerHeight === roundedHeight) {
return prevState;
}
return {
containerWidth: roundedWidth,
containerHeight: roundedHeight
};
});
}, []);
var innerRef = useCallback(node => {
if (typeof ref === 'function') {
ref(node);
}
if (node != null) {
var _node$getBoundingClie2 = node.getBoundingClientRect(),
containerWidth = _node$getBoundingClie2.width,
containerHeight = _node$getBoundingClie2.height;
setContainerSize(containerWidth, containerHeight);
}
}, [ref, setContainerSize]);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReportChartSize, {
width: sizes.containerWidth,
height: sizes.containerHeight
}), /*#__PURE__*/React.createElement("div", _extends({
ref: innerRef
}, props)));
});
var StaticDiv = /*#__PURE__*/forwardRef((props, ref) => {
var width = props.width,
height = props.height;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReportChartSize, {
width: width,
height: height
}), /*#__PURE__*/React.createElement("div", _extends({
ref: ref
}, props)));
});
var NonResponsiveDiv = /*#__PURE__*/forwardRef((props, ref) => {
var width = props.width,
height = props.height;
// When width or height are percentages or CSS short names, read size from DOM once
if (typeof width === 'string' || typeof height === 'string') {
return /*#__PURE__*/React.createElement(ReadSizeOnceDiv, _extends({}, props, {
ref: ref
}));
}
// When both are numbers, use them directly
if (typeof width === 'number' && typeof height === 'number') {
return /*#__PURE__*/React.createElement(StaticDiv, _extends({}, props, {
width: width,
height: height,
ref: ref
}));
}
// When width/height are undefined, render wrapper div without reporting size
// This results in no SVG being rendered (intentional for backwards compatibility)
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReportChartSize, {
width: width,
height: height
}), /*#__PURE__*/React.createElement("div", _extends({
ref: ref
}, props)));
});
function getWrapperDivComponent(responsive) {
return responsive ? ResponsiveDiv : NonResponsiveDiv;
}
export var RechartsWrapper = /*#__PURE__*/forwardRef((props, ref) => {
var children = props.children,
className = props.className,
heightFromProps = props.height,
onClick = props.onClick,
onContextMenu = props.onContextMenu,
onDoubleClick = props.onDoubleClick,
onMouseDown = props.onMouseDown,
onMouseEnter = props.onMouseEnter,
onMouseLeave = props.onMouseLeave,
onMouseMove = props.onMouseMove,
onMouseUp = props.onMouseUp,
onTouchEnd = props.onTouchEnd,
onTouchMove = props.onTouchMove,
onTouchStart = props.onTouchStart,
style = props.style,
widthFromProps = props.width,
responsive = props.responsive,
_props$dispatchTouchE = props.dispatchTouchEvents,
dispatchTouchEvents = _props$dispatchTouchE === void 0 ? true : _props$dispatchTouchE;
var containerRef = useRef(null);
var dispatch = useAppDispatch();
var _useState5 = useState(null),
_useState6 = _slicedToArray(_useState5, 2),
tooltipPortal = _useState6[0],
setTooltipPortal = _useState6[1];
var _useState7 = useState(null),
_useState8 = _slicedToArray(_useState7, 2),
legendPortal = _useState8[0],
setLegendPortal = _useState8[1];
var setScaleRef = useReportScale();
var responsiveContainerCalculations = useResponsiveContainerContext();
var width = (responsiveContainerCalculations === null || responsiveContainerCalculations === void 0 ? void 0 : responsiveContainerCalculations.width) > 0 ? responsiveContainerCalculations.width : widthFromProps;
var height = (responsiveContainerCalculations === null || responsiveContainerCalculations === void 0 ? void 0 : responsiveContainerCalculations.height) > 0 ? responsiveContainerCalculations.height : heightFromProps;
var innerRef = useCallback(node => {
setScaleRef(node);
if (typeof ref === 'function') {
ref(node);
}
setTooltipPortal(node);
setLegendPortal(node);
if (node != null) {
containerRef.current = node;
}
}, [setScaleRef, ref, setTooltipPortal, setLegendPortal]);
var myOnClick = useCallback(e => {
dispatch(mouseClickAction(e));
dispatch(externalEventAction({
handler: onClick,
reactEvent: e
}));
}, [dispatch, onClick]);
var myOnMouseEnter = useCallback(e => {
dispatch(mouseMoveAction(e));
dispatch(externalEventAction({
handler: onMouseEnter,
reactEvent: e
}));
}, [dispatch, onMouseEnter]);
var myOnMouseLeave = useCallback(e => {
dispatch(mouseLeaveChart());
dispatch(externalEventAction({
handler: onMouseLeave,
reactEvent: e
}));
}, [dispatch, onMouseLeave]);
var myOnMouseMove = useCallback(e => {
dispatch(mouseMoveAction(e));
dispatch(externalEventAction({
handler: onMouseMove,
reactEvent: e
}));
}, [dispatch, onMouseMove]);
var onFocus = useCallback(() => {
dispatch(focusAction());
}, [dispatch]);
var onBlur = useCallback(() => {
dispatch(blurAction());
}, [dispatch]);
var onKeyDown = useCallback(e => {
dispatch(keyDownAction(e.key));
}, [dispatch]);
var myOnContextMenu = useCallback(e => {
dispatch(externalEventAction({
handler: onContextMenu,
reactEvent: e
}));
}, [dispatch, onContextMenu]);
var myOnDoubleClick = useCallback(e => {
dispatch(externalEventAction({
handler: onDoubleClick,
reactEvent: e
}));
}, [dispatch, onDoubleClick]);
var myOnMouseDown = useCallback(e => {
dispatch(externalEventAction({
handler: onMouseDown,
reactEvent: e
}));
}, [dispatch, onMouseDown]);
var myOnMouseUp = useCallback(e => {
dispatch(externalEventAction({
handler: onMouseUp,
reactEvent: e
}));
}, [dispatch, onMouseUp]);
var myOnTouchStart = useCallback(e => {
dispatch(externalEventAction({
handler: onTouchStart,
reactEvent: e
}));
}, [dispatch, onTouchStart]);
/*
* onTouchMove is special because it behaves different from mouse events.
* Mouse events have 'enter' + 'leave' combo that notify us when the mouse is over
* a certain element. Touch events don't have that; touch only gives us
* start (finger down), end (finger up) and move (finger moving).
* So we need to figure out which element the user is touching
* ourselves. Fortunately, there's a convenient method for that:
* https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint
*/
var myOnTouchMove = useCallback(e => {
if (dispatchTouchEvents) {
dispatch(touchEventAction(e));
}
dispatch(externalEventAction({
handler: onTouchMove,
reactEvent: e
}));
}, [dispatch, dispatchTouchEvents, onTouchMove]);
var myOnTouchEnd = useCallback(e => {
dispatch(externalEventAction({
handler: onTouchEnd,
reactEvent: e
}));
}, [dispatch, onTouchEnd]);
var WrapperDiv = getWrapperDivComponent(responsive);
return /*#__PURE__*/React.createElement(TooltipPortalContext.Provider, {
value: tooltipPortal
}, /*#__PURE__*/React.createElement(LegendPortalContext.Provider, {
value: legendPortal
}, /*#__PURE__*/React.createElement(WrapperDiv, {
width: width !== null && width !== void 0 ? width : style === null || style === void 0 ? void 0 : style.width,
height: height !== null && height !== void 0 ? height : style === null || style === void 0 ? void 0 : style.height,
className: clsx('recharts-wrapper', className),
style: _objectSpread({
position: 'relative',
cursor: 'default',
width,
height
}, style),
onClick: myOnClick,
onContextMenu: myOnContextMenu,
onDoubleClick: myOnDoubleClick,
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
onMouseDown: myOnMouseDown,
onMouseEnter: myOnMouseEnter,
onMouseLeave: myOnMouseLeave,
onMouseMove: myOnMouseMove,
onMouseUp: myOnMouseUp,
onTouchEnd: myOnTouchEnd,
onTouchMove: myOnTouchMove,
onTouchStart: myOnTouchStart,
ref: innerRef
}, /*#__PURE__*/React.createElement(EventSynchronizer, null), children)));
});

1041
frontend/node_modules/recharts/es6/chart/Sankey.js generated vendored Normal file

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,21 @@
import * as React from 'react';
import { forwardRef } from 'react';
import { arrayTooltipSearcher } from '../state/optionsSlice';
import { CartesianChart } from './CartesianChart';
var allowedTooltipTypes = ['item'];
/**
* @consumes ResponsiveContainerContext
* @provides CartesianViewBoxContext
* @provides CartesianChartContext
*/
export var ScatterChart = /*#__PURE__*/forwardRef((props, ref) => {
return /*#__PURE__*/React.createElement(CartesianChart, {
chartName: "ScatterChart",
defaultTooltipEventType: "item",
validateTooltipEventTypes: allowedTooltipTypes,
tooltipPayloadSearcher: arrayTooltipSearcher,
categoricalChartProps: props,
ref: ref
});
});

View file

@ -0,0 +1,334 @@
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
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); }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
import * as React from 'react';
import { useState } from 'react';
import { scaleLinear } from 'victory-vendor/d3-scale';
import { clsx } from 'clsx';
import get from 'es-toolkit/compat/get';
import { Surface } from '../container/Surface';
import { Layer } from '../container/Layer';
import { Sector } from '../shape/Sector';
import { Text } from '../component/Text';
import { polarToCartesian } from '../util/PolarUtils';
import { ReportChartMargin, ReportChartSize, useChartHeight, useChartWidth } from '../context/chartLayoutContext';
import { TooltipPortalContext } from '../context/tooltipPortalContext';
import { RechartsWrapper } from './RechartsWrapper';
import { mouseLeaveItem, setActiveClickItemIndex, setActiveMouseOverItemIndex } from '../state/tooltipSlice';
import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings';
import { RechartsStoreProvider } from '../state/RechartsStoreProvider';
import { ReportEventSettings } from '../state/ReportEventSettings';
import { useAppDispatch } from '../state/hooks';
import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { initialEventSettingsState } from '../state/eventSettingsSlice';
/**
* We require tooltipIndex on each node internally to track which node is active in the tooltip.
* This is not required from the outside user - we can calculate it as we traverse the tree.
*/
var defaultTextProps = {
fontWeight: 'bold',
paintOrder: 'stroke fill',
fontSize: '.75rem',
stroke: '#FFF',
fill: 'black',
pointerEvents: 'none'
};
function getMaxDepthOf(node) {
if (!node.children || node.children.length === 0) return 1;
// Calculate depth for each child and find the maximum
var childDepths = node.children.map(d => getMaxDepthOf(d));
return 1 + Math.max(...childDepths);
}
var SetSunburstTooltipEntrySettings = /*#__PURE__*/React.memo(_ref => {
var dataKey = _ref.dataKey,
nameKey = _ref.nameKey,
data = _ref.data,
stroke = _ref.stroke,
fill = _ref.fill,
positions = _ref.positions,
id = _ref.id;
var tooltipEntrySettings = {
dataDefinedOnItem: data.children,
getPosition: index => positions.get(index),
// Sunburst does not support many of the properties as other charts do so there's plenty of defaults here
settings: {
stroke,
strokeWidth: undefined,
fill,
nameKey,
dataKey,
// if there is a nameKey use it, otherwise make the name of the tooltip the dataKey itself
name: nameKey ? undefined : dataKey,
hide: false,
type: undefined,
color: fill,
unit: '',
graphicalItemId: id
}
};
return /*#__PURE__*/React.createElement(SetTooltipEntrySettings, {
tooltipEntrySettings: tooltipEntrySettings
});
});
// Why is margin not a sunburst prop? No clue. Probably it should be
var defaultSunburstMargin = {
top: 0,
right: 0,
bottom: 0,
left: 0
};
export var payloadSearcher = (data, activeIndex) => {
if (activeIndex == null) {
return undefined;
}
return get(data, activeIndex);
};
var addToSunburstNodeIndex = function addToSunburstNodeIndex(indexInChildrenArr) {
var activeTooltipIndexSoFar = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
return "".concat(activeTooltipIndexSoFar, "children[").concat(indexInChildrenArr, "]");
};
var preloadedState = {
options: {
validateTooltipEventTypes: ['item'],
defaultTooltipEventType: 'item',
chartName: 'Sunburst',
tooltipPayloadSearcher: payloadSearcher,
eventEmitter: undefined
}
};
export var defaultSunburstChartProps = _objectSpread({
padding: 2,
dataKey: 'value',
nameKey: 'name',
ringPadding: 2,
innerRadius: 50,
fill: '#333',
stroke: '#FFF',
textOptions: defaultTextProps,
startAngle: 0,
endAngle: 360,
responsive: false
}, initialEventSettingsState);
var SunburstChartImpl = _ref2 => {
var className = _ref2.className,
data = _ref2.data,
children = _ref2.children,
padding = _ref2.padding,
dataKey = _ref2.dataKey,
nameKey = _ref2.nameKey,
ringPadding = _ref2.ringPadding,
innerRadius = _ref2.innerRadius,
fill = _ref2.fill,
stroke = _ref2.stroke,
textOptions = _ref2.textOptions,
outerRadiusFromProps = _ref2.outerRadius,
cxFromProps = _ref2.cx,
cyFromProps = _ref2.cy,
startAngle = _ref2.startAngle,
endAngle = _ref2.endAngle,
onClick = _ref2.onClick,
onMouseEnter = _ref2.onMouseEnter,
onMouseLeave = _ref2.onMouseLeave,
id = _ref2.id;
var dispatch = useAppDispatch();
var width = useChartWidth();
var height = useChartHeight();
if (width == null || height == null) {
return null;
}
var outerRadius = outerRadiusFromProps !== null && outerRadiusFromProps !== void 0 ? outerRadiusFromProps : Math.min(width, height) / 2;
var cx = cxFromProps !== null && cxFromProps !== void 0 ? cxFromProps : width / 2;
var cy = cyFromProps !== null && cyFromProps !== void 0 ? cyFromProps : height / 2;
var rScale = scaleLinear([0, data[dataKey]], [0, endAngle]);
var treeDepth = getMaxDepthOf(data);
var thickness = (outerRadius - innerRadius) / treeDepth;
var sectors = [];
var positions = new Map([]);
// event handlers
function handleMouseEnter(node, e) {
if (onMouseEnter) onMouseEnter(node, e);
dispatch(setActiveMouseOverItemIndex({
activeIndex: node.tooltipIndex,
activeDataKey: dataKey,
activeCoordinate: positions.get(node.name),
activeGraphicalItemId: id
}));
}
function handleMouseLeave(node, e) {
if (onMouseLeave) onMouseLeave(node, e);
dispatch(mouseLeaveItem());
}
function handleClick(node) {
if (onClick) onClick(node);
dispatch(setActiveClickItemIndex({
activeIndex: node.tooltipIndex,
activeDataKey: dataKey,
activeCoordinate: positions.get(node.name),
activeGraphicalItemId: id
}));
}
// recursively add nodes for each data point and its children
function drawArcs(childNodes, options) {
var depth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
var radius = options.radius,
innerR = options.innerR,
initialAngle = options.initialAngle,
childColor = options.childColor,
nestedActiveTooltipIndex = options.nestedActiveTooltipIndex;
var currentAngle = initialAngle;
if (!childNodes) return; // base case: no children of this node
childNodes.forEach((d, i) => {
var _ref3, _d$fill;
var currentTooltipIndex = depth === 1 ? "[".concat(i, "]") : addToSunburstNodeIndex(i, nestedActiveTooltipIndex);
var nodeWithIndex = _objectSpread(_objectSpread({}, d), {}, {
tooltipIndex: currentTooltipIndex
});
var arcLength = rScale(d[dataKey]);
var start = currentAngle;
// color priority - if there's a color on the individual point use that, otherwise use parent color or default
var fillColor = (_ref3 = (_d$fill = d === null || d === void 0 ? void 0 : d.fill) !== null && _d$fill !== void 0 ? _d$fill : childColor) !== null && _ref3 !== void 0 ? _ref3 : fill;
var _polarToCartesian = polarToCartesian(0, 0, innerR + radius / 2, -(start + arcLength - arcLength / 2)),
textX = _polarToCartesian.x,
textY = _polarToCartesian.y;
currentAngle += arcLength;
sectors.push(/*#__PURE__*/React.createElement("g", {
key: "sunburst-sector-".concat(d.name, "-").concat(i)
}, /*#__PURE__*/React.createElement(Sector, {
onClick: () => handleClick(nodeWithIndex),
onMouseEnter: e => handleMouseEnter(nodeWithIndex, e),
onMouseLeave: e => handleMouseLeave(nodeWithIndex, e),
fill: fillColor,
stroke: stroke,
strokeWidth: padding,
startAngle: start,
endAngle: start + arcLength,
innerRadius: innerR,
outerRadius: innerR + radius,
cx: cx,
cy: cy
}), /*#__PURE__*/React.createElement(Text, _extends({}, textOptions, {
alignmentBaseline: "middle",
textAnchor: "middle",
x: textX + cx,
y: cy - textY
}), d[dataKey])));
var _polarToCartesian2 = polarToCartesian(cx, cy, innerR + radius / 2, start),
tooltipX = _polarToCartesian2.x,
tooltipY = _polarToCartesian2.y;
positions.set(d.name, {
x: tooltipX,
y: tooltipY
});
return drawArcs(d.children, {
radius,
innerR: innerR + radius + ringPadding,
initialAngle: start,
childColor: fillColor,
nestedActiveTooltipIndex: currentTooltipIndex
}, depth + 1);
});
}
drawArcs(data.children, {
radius: thickness,
innerR: innerRadius,
initialAngle: startAngle
});
var layerClass = clsx('recharts-sunburst', className);
return /*#__PURE__*/React.createElement(Surface, {
width: width,
height: height
}, /*#__PURE__*/React.createElement(Layer, {
className: layerClass
}, sectors), /*#__PURE__*/React.createElement(SetSunburstTooltipEntrySettings, {
dataKey: dataKey,
nameKey: nameKey,
data: data,
stroke: stroke,
fill: fill,
positions: positions,
id: id
}), children);
};
/**
* The sunburst is a hierarchical chart, similar to a {@link Treemap}, plotted in polar coordinates.
* Sunburst charts effectively convey the hierarchical relationships and proportions within each level.
* It is easy to see all the middle layers in the hierarchy, which might get lost in other visualizations.
* For some datasets, the radial layout may be more visually appealing and intuitive than a traditional {@link Treemap}.
*
* @consumes ResponsiveContainerContext
* @provides TooltipEntrySettings
*/
export var SunburstChart = outsideProps => {
var props = resolveDefaultProps(outsideProps, defaultSunburstChartProps);
var className = props.className,
width = props.width,
height = props.height,
responsive = props.responsive,
style = props.style,
externalId = props.id,
throttleDelay = props.throttleDelay,
throttledEvents = props.throttledEvents;
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
tooltipPortal = _useState2[0],
setTooltipPortal = _useState2[1];
return /*#__PURE__*/React.createElement(RechartsStoreProvider, {
preloadedState: preloadedState,
reduxStoreName: className !== null && className !== void 0 ? className : 'SunburstChart'
}, /*#__PURE__*/React.createElement(ReportChartSize, {
width: width,
height: height
}), /*#__PURE__*/React.createElement(ReportChartMargin, {
margin: defaultSunburstMargin
}), /*#__PURE__*/React.createElement(ReportEventSettings, {
throttleDelay: throttleDelay,
throttledEvents: throttledEvents
}), /*#__PURE__*/React.createElement(TooltipPortalContext.Provider, {
value: tooltipPortal
}, /*#__PURE__*/React.createElement(RechartsWrapper, {
className: className,
width: width,
height: height,
responsive: responsive,
style: style,
ref: node => {
if (tooltipPortal == null && node != null) {
setTooltipPortal(node);
}
},
onMouseEnter: undefined,
onMouseLeave: undefined,
onClick: undefined,
onMouseMove: undefined,
onMouseDown: undefined,
onMouseUp: undefined,
onContextMenu: undefined,
onDoubleClick: undefined,
onTouchStart: undefined,
onTouchMove: undefined,
onTouchEnd: undefined
}, /*#__PURE__*/React.createElement(RegisterGraphicalItemId, {
id: externalId,
type: "sunburst"
}, id => /*#__PURE__*/React.createElement(SunburstChartImpl, _extends({}, props, {
id: id
}))))));
};

860
frontend/node_modules/recharts/es6/chart/Treemap.js generated vendored Normal file
View file

@ -0,0 +1,860 @@
var _excluded = ["width", "height", "className", "style", "children", "type"];
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; }
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; }
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); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
import * as React from 'react';
import { PureComponent, useCallback, useState } from 'react';
import omit from 'es-toolkit/compat/omit';
import get from 'es-toolkit/compat/get';
import { Layer } from '../container/Layer';
import { Surface } from '../container/Surface';
import { Polygon } from '../shape/Polygon';
import { Rectangle } from '../shape/Rectangle';
import { getValueByDataKey } from '../util/ChartUtils';
import { COLOR_PANEL } from '../util/Constants';
import { isNan, noop, uniqueId } from '../util/DataUtils';
import { getStringSize } from '../util/DOMUtils';
import { ReportChartMargin, useChartHeight, useChartWidth } from '../context/chartLayoutContext';
import { TooltipPortalContext } from '../context/tooltipPortalContext';
import { RechartsWrapper } from './RechartsWrapper';
import { setActiveClickItemIndex, setActiveMouseOverItemIndex } from '../state/tooltipSlice';
import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings';
import { RechartsStoreProvider } from '../state/RechartsStoreProvider';
import { ReportEventSettings } from '../state/ReportEventSettings';
import { useAppDispatch } from '../state/hooks';
import { isPositiveNumber } from '../util/isWellBehavedNumber';
import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
import { CSSTransitionAnimate, extractCssEasing } from '../animation/CSSTransitionAnimate';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId';
import { initialEventSettingsState } from '../state/eventSettingsSlice';
var NODE_VALUE_KEY = 'value';
/**
* This is what end users defines as `data` on Treemap.
*/
/**
* This is what is returned from `squarify`, the final treemap data structure
* that gets rendered and is stored in
*/
function isTreemapNode(value) {
return value != null && typeof value === 'object' && 'x' in value && 'y' in value && 'width' in value && 'height' in value && typeof value.x === 'number' && typeof value.y === 'number' && typeof value.width === 'number' && typeof value.height === 'number';
}
export var treemapPayloadSearcher = (data, activeIndex) => {
if (!data || !activeIndex) {
return undefined;
}
return get(data, activeIndex);
};
export var addToTreemapNodeIndex = function addToTreemapNodeIndex(indexInChildrenArr) {
var activeTooltipIndexSoFar = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
return "".concat(activeTooltipIndexSoFar, "children[").concat(indexInChildrenArr, "]");
};
var options = {
chartName: 'Treemap',
defaultTooltipEventType: 'item',
validateTooltipEventTypes: ['item'],
tooltipPayloadSearcher: treemapPayloadSearcher,
eventEmitter: undefined
};
var NEST_INDEX_HEIGHT = 30;
var getTreemapRenderHeight = (height, type) => {
if (type === 'nest') {
return height - NEST_INDEX_HEIGHT;
}
return height;
};
export var computeNode = _ref => {
var depth = _ref.depth,
node = _ref.node,
index = _ref.index,
dataKey = _ref.dataKey,
nameKey = _ref.nameKey,
nestedActiveTooltipIndex = _ref.nestedActiveTooltipIndex;
var currentTooltipIndex = depth === 0 ? '' : addToTreemapNodeIndex(index, nestedActiveTooltipIndex);
var children = node.children;
var childDepth = depth + 1;
var computedChildren = children && children.length ? children.map((child, i) => computeNode({
depth: childDepth,
node: child,
index: i,
dataKey,
nameKey,
nestedActiveTooltipIndex: currentTooltipIndex
})) : null;
var nodeValue;
if (computedChildren && computedChildren.length) {
nodeValue = computedChildren.reduce((result, child) => result + child.value, 0);
} else {
// TODO need to verify dataKey
var rawNodeValue = node[dataKey];
var numericValue = typeof rawNodeValue === 'number' ? rawNodeValue : 0;
nodeValue = isNan(numericValue) || numericValue <= 0 ? 0 : numericValue;
}
return _objectSpread(_objectSpread({}, node), {}, {
children: computedChildren,
// @ts-expect-error getValueByDataKey does not validate the output type
name: getValueByDataKey(node, nameKey, ''),
[NODE_VALUE_KEY]: nodeValue,
depth,
index,
tooltipIndex: currentTooltipIndex
});
};
var filterRect = node => ({
x: node.x,
y: node.y,
width: node.width,
height: node.height
});
var insetRect = (rect, nodeInset) => {
if (!Number.isFinite(nodeInset) || nodeInset <= 0) {
return rect;
}
var clampedPadding = Math.min(nodeInset, rect.width / 2, rect.height / 2);
return {
x: rect.x + clampedPadding,
y: rect.y + clampedPadding,
width: Math.max(rect.width - clampedPadding * 2, 0),
height: Math.max(rect.height - clampedPadding * 2, 0)
};
};
var applyGapToChildren = (children, parentRect, nodeGap) => {
if (!Number.isFinite(nodeGap) || nodeGap <= 0) {
return children;
}
var halfGap = nodeGap / 2;
var parentRight = parentRect.x + parentRect.width;
var parentBottom = parentRect.y + parentRect.height;
return children.map(child => {
var childRight = child.x + child.width;
var childBottom = child.y + child.height;
var leftInset = child.x > parentRect.x ? halfGap : 0;
var rightInset = childRight < parentRight ? halfGap : 0;
var topInset = child.y > parentRect.y ? halfGap : 0;
var bottomInset = childBottom < parentBottom ? halfGap : 0;
return _objectSpread(_objectSpread({}, child), {}, {
x: child.x + leftInset,
y: child.y + topInset,
width: Math.max(child.width - leftInset - rightInset, 0),
height: Math.max(child.height - topInset - bottomInset, 0)
});
});
};
// Compute the area for each child based on value & scale.
var getAreaOfChildren = (children, areaValueRatio) => {
var ratio = areaValueRatio < 0 ? 0 : areaValueRatio;
return children.map(child => {
var area = child[NODE_VALUE_KEY] * ratio;
return _objectSpread(_objectSpread({}, child), {}, {
area: isNan(area) || area <= 0 ? 0 : area
});
});
};
// Computes the score for the specified row, as the worst aspect ratio.
var getWorstScore = (row, parentSize, aspectRatio) => {
var parentArea = parentSize * parentSize;
var rowArea = row.area * row.area;
var _row$reduce = row.reduce((result, child) => ({
min: Math.min(result.min, child.area),
max: Math.max(result.max, child.area)
}), {
min: Infinity,
max: 0
}),
min = _row$reduce.min,
max = _row$reduce.max;
return rowArea ? Math.max(parentArea * max * aspectRatio / rowArea, rowArea / (parentArea * min * aspectRatio)) : Infinity;
};
var horizontalPosition = (row, parentSize, parentRect, isFlush) => {
var rowHeight = parentSize ? Math.round(row.area / parentSize) : 0;
if (isFlush || rowHeight > parentRect.height) {
rowHeight = parentRect.height;
}
var curX = parentRect.x;
var child;
for (var i = 0, len = row.length; i < len; i++) {
child = row[i];
if (child == null) {
continue;
}
child.x = curX;
child.y = parentRect.y;
child.height = rowHeight;
child.width = Math.min(rowHeight ? Math.round(child.area / rowHeight) : 0, parentRect.x + parentRect.width - curX);
curX += child.width;
}
// add the remain x to the last one of row
if (child != null) {
child.width += parentRect.x + parentRect.width - curX;
}
return _objectSpread(_objectSpread({}, parentRect), {}, {
y: parentRect.y + rowHeight,
height: parentRect.height - rowHeight
});
};
var verticalPosition = (row, parentSize, parentRect, isFlush) => {
var rowWidth = parentSize ? Math.round(row.area / parentSize) : 0;
if (isFlush || rowWidth > parentRect.width) {
rowWidth = parentRect.width;
}
var curY = parentRect.y;
var child;
for (var i = 0, len = row.length; i < len; i++) {
child = row[i];
if (child == null) {
continue;
}
child.x = parentRect.x;
child.y = curY;
child.width = rowWidth;
child.height = Math.min(rowWidth ? Math.round(child.area / rowWidth) : 0, parentRect.y + parentRect.height - curY);
curY += child.height;
}
if (child) {
child.height += parentRect.y + parentRect.height - curY;
}
return _objectSpread(_objectSpread({}, parentRect), {}, {
x: parentRect.x + rowWidth,
width: parentRect.width - rowWidth
});
};
var position = (row, parentSize, parentRect, isFlush) => {
if (parentSize === parentRect.width) {
return horizontalPosition(row, parentSize, parentRect, isFlush);
}
return verticalPosition(row, parentSize, parentRect, isFlush);
};
// Recursively arranges the specified node's children into squarified rows.
var squarify = (node, aspectRatio, nodeInset, nodeGap) => {
var children = node.children;
if (children && children.length) {
var layoutRect = insetRect(filterRect(node), nodeInset);
var rect = layoutRect;
// @ts-expect-error we can't create an array with static property on a single line so typescript will complain.
var row = [];
var best = Infinity; // the best row score so far
var child, score; // the current row score
var size = Math.min(rect.width, rect.height); // initial orientation
var scaleChildren = getAreaOfChildren(children, rect.width * rect.height / node[NODE_VALUE_KEY]);
var tempChildren = scaleChildren.slice();
// why are we setting static properties on an array?
row.area = 0;
while (tempChildren.length > 0) {
var _tempChildren = _slicedToArray(tempChildren, 1);
child = _tempChildren[0];
if (child == null) {
continue;
}
// row first
row.push(child);
row.area += child.area;
score = getWorstScore(row, size, aspectRatio);
if (score <= best) {
// continue with this orientation
tempChildren.shift();
best = score;
} else {
var _row$pop$area, _row$pop;
// abort, and try a different orientation
row.area -= (_row$pop$area = (_row$pop = row.pop()) === null || _row$pop === void 0 ? void 0 : _row$pop.area) !== null && _row$pop$area !== void 0 ? _row$pop$area : 0;
rect = position(row, size, rect, false);
size = Math.min(rect.width, rect.height);
row.length = row.area = 0;
best = Infinity;
}
}
if (row.length) {
rect = position(row, size, rect, true);
row.length = row.area = 0;
}
var childrenWithGaps = applyGapToChildren(scaleChildren, layoutRect, nodeGap);
return _objectSpread(_objectSpread({}, node), {}, {
children: childrenWithGaps.map(c => squarify(c, aspectRatio, nodeInset, nodeGap))
});
}
return node;
};
export var defaultTreeMapProps = _objectSpread({
aspectRatio: 0.5 * (1 + Math.sqrt(5)),
nodeInset: 0,
nodeGap: 0,
dataKey: 'value',
nameKey: 'name',
type: 'flat',
isAnimationActive: 'auto',
isUpdateAnimationActive: 'auto',
animationBegin: 0,
animationDuration: 1500,
animationEasing: 'linear'
}, initialEventSettingsState);
var defaultState = {
isAnimationFinished: false,
formatRoot: null,
currentRoot: undefined,
nestIndex: [],
prevAspectRatio: defaultTreeMapProps.aspectRatio,
prevNodeInset: defaultTreeMapProps.nodeInset,
prevNodeGap: defaultTreeMapProps.nodeGap,
prevDataKey: defaultTreeMapProps.dataKey
};
function ContentItem(_ref2) {
var content = _ref2.content,
nodeProps = _ref2.nodeProps,
type = _ref2.type,
colorPanel = _ref2.colorPanel,
onMouseEnter = _ref2.onMouseEnter,
onMouseLeave = _ref2.onMouseLeave,
onClick = _ref2.onClick;
if (/*#__PURE__*/React.isValidElement(content)) {
return /*#__PURE__*/React.createElement(Layer, {
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
onClick: onClick
}, /*#__PURE__*/React.cloneElement(content, nodeProps));
}
if (typeof content === 'function') {
return /*#__PURE__*/React.createElement(Layer, {
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
onClick: onClick
}, content(nodeProps));
}
// optimize default shape
var x = nodeProps.x,
y = nodeProps.y,
width = nodeProps.width,
height = nodeProps.height,
index = nodeProps.index;
var arrow = null;
if (width > 10 && height > 10 && nodeProps.children && type === 'nest' && nodeProps.depth > 0) {
arrow = /*#__PURE__*/React.createElement(Polygon, {
points: [{
x: x + 2,
y: y + height / 2
}, {
x: x + 6,
y: y + height / 2 + 3
}, {
x: x + 2,
y: y + height / 2 + 6
}]
});
}
var text = null;
var nameSize = getStringSize(nodeProps.name);
if (width > 20 && height > 20 && nameSize.width < width && nameSize.height < height) {
text = /*#__PURE__*/React.createElement("text", {
x: x + 8,
y: y + height / 2 + 7,
fontSize: 14
}, nodeProps.name);
}
var colors = colorPanel || COLOR_PANEL;
return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement(Rectangle, _extends({
fill: nodeProps.depth < 2 ? colors[index % colors.length] : 'rgba(255,255,255,0)',
stroke: "#fff"
}, omit(nodeProps, ['children']), {
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
onClick: onClick,
"data-recharts-item-index": nodeProps.tooltipIndex
})), arrow, text);
}
function ContentItemWithEvents(props) {
var dispatch = useAppDispatch();
var activeCoordinate = {
x: props.nodeProps.x + props.nodeProps.width / 2,
y: props.nodeProps.y + props.nodeProps.height / 2
};
var onMouseEnter = () => {
dispatch(setActiveMouseOverItemIndex({
activeIndex: props.nodeProps.tooltipIndex,
activeDataKey: props.dataKey,
activeCoordinate,
activeGraphicalItemId: props.id
}));
};
var onMouseLeave = () => {
// clearing state on mouseLeaveItem causes re-rendering issues
// we don't actually want to do this for TreeMap - we clear state when we leave the entire chart instead
};
var onClick = () => {
dispatch(setActiveClickItemIndex({
activeIndex: props.nodeProps.tooltipIndex,
activeDataKey: props.dataKey,
activeCoordinate,
activeGraphicalItemId: props.id
}));
};
return /*#__PURE__*/React.createElement(ContentItem, _extends({}, props, {
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
onClick: onClick
}));
}
var SetTreemapTooltipEntrySettings = /*#__PURE__*/React.memo(_ref3 => {
var dataKey = _ref3.dataKey,
nameKey = _ref3.nameKey,
stroke = _ref3.stroke,
fill = _ref3.fill,
currentRoot = _ref3.currentRoot,
id = _ref3.id;
var tooltipEntrySettings = {
dataDefinedOnItem: currentRoot,
getPosition: noop,
// TODO I think Treemap has the capability of computing positions and supporting defaultIndex? Except it doesn't yet
settings: {
stroke,
strokeWidth: undefined,
fill,
dataKey,
nameKey,
name: undefined,
// Each TreemapNode has its own name
hide: false,
type: undefined,
color: fill,
unit: '',
graphicalItemId: id
}
};
return /*#__PURE__*/React.createElement(SetTooltipEntrySettings, {
tooltipEntrySettings: tooltipEntrySettings
});
});
// Why is margin not a treemap prop? No clue. Probably it should be
var defaultTreemapMargin = {
top: 0,
right: 0,
bottom: 0,
left: 0
};
function TreemapItem(_ref4) {
var content = _ref4.content,
nodeProps = _ref4.nodeProps,
isLeaf = _ref4.isLeaf,
treemapProps = _ref4.treemapProps,
onNestClick = _ref4.onNestClick;
var id = treemapProps.id,
isAnimationActive = treemapProps.isAnimationActive,
animationBegin = treemapProps.animationBegin,
animationDuration = treemapProps.animationDuration,
animationEasing = treemapProps.animationEasing,
isUpdateAnimationActive = treemapProps.isUpdateAnimationActive,
type = treemapProps.type,
colorPanel = treemapProps.colorPanel,
dataKey = treemapProps.dataKey,
onAnimationStart = treemapProps.onAnimationStart,
onAnimationEnd = treemapProps.onAnimationEnd,
onMouseEnterFromProps = treemapProps.onMouseEnter,
onItemClickFromProps = treemapProps.onClick,
onMouseLeaveFromProps = treemapProps.onMouseLeave;
var width = nodeProps.width,
height = nodeProps.height,
x = nodeProps.x,
y = nodeProps.y;
var translateX = -x - width;
var translateY = 0;
var onMouseEnter = e => {
if ((isLeaf || type === 'nest') && typeof onMouseEnterFromProps === 'function') {
onMouseEnterFromProps(nodeProps, e);
}
};
var onMouseLeave = e => {
if ((isLeaf || type === 'nest') && typeof onMouseLeaveFromProps === 'function') {
onMouseLeaveFromProps(nodeProps, e);
}
};
var onClick = () => {
if (type === 'nest' && nodeProps.depth > 0) {
onNestClick(nodeProps);
}
if ((isLeaf || type === 'nest') && typeof onItemClickFromProps === 'function') {
onItemClickFromProps(nodeProps);
}
};
var handleAnimationEnd = useCallback(() => {
if (typeof onAnimationEnd === 'function') {
onAnimationEnd();
}
}, [onAnimationEnd]);
var handleAnimationStart = useCallback(() => {
if (typeof onAnimationStart === 'function') {
onAnimationStart();
}
}, [onAnimationStart]);
return /*#__PURE__*/React.createElement(CSSTransitionAnimate, {
animationId: "treemap-".concat(nodeProps.tooltipIndex),
from: "translate(".concat(translateX, "px, ").concat(translateY, "px)"),
to: "translate(0, 0)",
attributeName: "transform",
begin: animationBegin,
easing: extractCssEasing(animationEasing),
isActive: isAnimationActive,
duration: animationDuration,
onAnimationStart: handleAnimationStart,
onAnimationEnd: handleAnimationEnd
}, style => /*#__PURE__*/React.createElement(Layer, {
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
onClick: onClick,
style: _objectSpread(_objectSpread({}, style), {}, {
transformOrigin: "".concat(x, " ").concat(y)
})
}, /*#__PURE__*/React.createElement(ContentItemWithEvents, {
id: id,
content: content,
dataKey: dataKey,
nodeProps: _objectSpread(_objectSpread({}, nodeProps), {}, {
isAnimationActive,
isUpdateAnimationActive: !isUpdateAnimationActive,
width,
height,
x,
y
}),
type: type,
colorPanel: colorPanel
})));
}
class TreemapWithState extends PureComponent {
constructor() {
super(...arguments);
_defineProperty(this, "state", _objectSpread({}, defaultState));
_defineProperty(this, "handleClick", node => {
var _this$props = this.props,
onClick = _this$props.onClick,
type = _this$props.type;
if (type === 'nest' && node.children) {
var _this$props2 = this.props,
width = _this$props2.width,
height = _this$props2.height,
dataKey = _this$props2.dataKey,
nameKey = _this$props2.nameKey,
aspectRatio = _this$props2.aspectRatio,
nodeInset = _this$props2.nodeInset,
nodeGap = _this$props2.nodeGap;
var root = computeNode({
depth: 0,
node: _objectSpread(_objectSpread({}, node), {}, {
x: 0,
y: 0,
width,
height: getTreemapRenderHeight(height, type)
}),
index: 0,
dataKey,
nameKey,
// with Treemap nesting, should this continue nesting the index or start from empty string?
nestedActiveTooltipIndex: node.tooltipIndex
});
var formatRoot = squarify(root, aspectRatio, nodeInset, nodeGap);
var nestIndex = this.state.nestIndex;
nestIndex.push(node);
this.setState({
formatRoot,
currentRoot: root,
nestIndex
});
}
if (onClick) {
onClick(node);
}
});
_defineProperty(this, "handleTouchMove", e => {
var touchEvent = e.touches[0];
if (touchEvent == null) {
return;
}
var target = document.elementFromPoint(touchEvent.clientX, touchEvent.clientY);
if (!target || !target.getAttribute || this.state.formatRoot == null) {
return;
}
var itemIndex = target.getAttribute('data-recharts-item-index');
var activeNode = treemapPayloadSearcher(this.state.formatRoot, itemIndex);
if (!isTreemapNode(activeNode)) {
return;
}
var _this$props3 = this.props,
dataKey = _this$props3.dataKey,
dispatch = _this$props3.dispatch;
var activeCoordinate = {
x: activeNode.x + activeNode.width / 2,
y: activeNode.y + activeNode.height / 2
};
// Treemap does not support onTouchMove prop, but it could
// onTouchMove?.(activeNode, Number(itemIndex), e);
dispatch(setActiveMouseOverItemIndex({
activeIndex: itemIndex,
activeDataKey: dataKey,
activeCoordinate,
activeGraphicalItemId: this.props.id
}));
});
}
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.data !== prevState.prevData || nextProps.type !== prevState.prevType || nextProps.width !== prevState.prevWidth || nextProps.height !== prevState.prevHeight || nextProps.dataKey !== prevState.prevDataKey || nextProps.aspectRatio !== prevState.prevAspectRatio || nextProps.nodeInset !== prevState.prevNodeInset || nextProps.nodeGap !== prevState.prevNodeGap) {
var root = computeNode({
depth: 0,
node: {
// @ts-expect-error missing properties
children: nextProps.data,
x: 0,
y: 0,
width: nextProps.width,
height: getTreemapRenderHeight(nextProps.height, nextProps.type)
},
index: 0,
dataKey: nextProps.dataKey,
nameKey: nextProps.nameKey
});
var formatRoot = squarify(root, nextProps.aspectRatio, nextProps.nodeInset, nextProps.nodeGap);
return _objectSpread(_objectSpread({}, prevState), {}, {
formatRoot,
currentRoot: root,
nestIndex: [root],
prevAspectRatio: nextProps.aspectRatio,
prevData: nextProps.data,
prevWidth: nextProps.width,
prevHeight: nextProps.height,
prevDataKey: nextProps.dataKey,
prevType: nextProps.type,
prevNodeInset: nextProps.nodeInset,
prevNodeGap: nextProps.nodeGap
});
}
return null;
}
handleNestIndex(node, i) {
var nestIndex = this.state.nestIndex;
var _this$props4 = this.props,
width = _this$props4.width,
height = _this$props4.height,
dataKey = _this$props4.dataKey,
nameKey = _this$props4.nameKey,
aspectRatio = _this$props4.aspectRatio,
nodeInset = _this$props4.nodeInset,
nodeGap = _this$props4.nodeGap,
type = _this$props4.type;
var root = computeNode({
depth: 0,
node: _objectSpread(_objectSpread({}, node), {}, {
x: 0,
y: 0,
width,
height: getTreemapRenderHeight(height, type)
}),
index: 0,
dataKey,
nameKey,
// with Treemap nesting, should this continue nesting the index or start from empty string?
nestedActiveTooltipIndex: node.tooltipIndex
});
var formatRoot = squarify(root, aspectRatio, nodeInset, nodeGap);
nestIndex = nestIndex.slice(0, i + 1);
this.setState({
formatRoot,
currentRoot: node,
nestIndex
});
}
renderNode(root, node) {
var _this$props5 = this.props,
content = _this$props5.content,
type = _this$props5.type;
var nodeProps = _objectSpread(_objectSpread(_objectSpread({}, svgPropertiesNoEvents(this.props)), node), {}, {
root
});
var isLeaf = !node.children || !node.children.length;
var currentRoot = this.state.currentRoot;
var isCurrentRootChild = ((currentRoot === null || currentRoot === void 0 ? void 0 : currentRoot.children) || []).filter(item => item.depth === node.depth && item.name === node.name);
if (!isCurrentRootChild.length && root.depth && type === 'nest') {
return null;
}
return /*#__PURE__*/React.createElement(Layer, {
key: "recharts-treemap-node-".concat(nodeProps.x, "-").concat(nodeProps.y, "-").concat(nodeProps.name),
className: "recharts-treemap-depth-".concat(node.depth)
}, /*#__PURE__*/React.createElement(TreemapItem, {
isLeaf: isLeaf,
content: content,
nodeProps: nodeProps,
treemapProps: this.props,
onNestClick: this.handleClick
}), node.children && node.children.length ? node.children.map(child => this.renderNode(node, child)) : null);
}
renderAllNodes() {
var formatRoot = this.state.formatRoot;
if (!formatRoot) {
return null;
}
return this.renderNode(formatRoot, formatRoot);
}
// render nest treemap
renderNestIndex() {
var _this$props6 = this.props,
nameKey = _this$props6.nameKey,
nestIndexContent = _this$props6.nestIndexContent;
var nestIndex = this.state.nestIndex;
return /*#__PURE__*/React.createElement("div", {
className: "recharts-treemap-nest-index-wrapper",
style: {
marginTop: '8px',
textAlign: 'center'
}
}, nestIndex.map((item, i) => {
// TODO need to verify nameKey type
var rawName = get(item, nameKey, 'root');
var name = typeof rawName === 'string' ? rawName : 'root';
var content;
if (/*#__PURE__*/React.isValidElement(nestIndexContent)) {
// the cloned content is ignored at all times - let's remove it?
content = /*#__PURE__*/React.cloneElement(nestIndexContent, item, i);
}
if (typeof nestIndexContent === 'function') {
content = nestIndexContent(item, i);
} else {
content = name;
}
return (
/*#__PURE__*/
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
React.createElement("div", {
onClick: this.handleNestIndex.bind(this, item, i),
key: "nest-index-".concat(uniqueId()),
className: "recharts-treemap-nest-index-box",
style: {
cursor: 'pointer',
display: 'inline-block',
padding: '0 7px',
background: '#000',
color: '#fff',
marginRight: '3px'
}
}, content)
);
}));
}
render() {
var _this$props7 = this.props,
width = _this$props7.width,
height = _this$props7.height,
className = _this$props7.className,
style = _this$props7.style,
children = _this$props7.children,
type = _this$props7.type,
others = _objectWithoutProperties(_this$props7, _excluded);
var attrs = svgPropertiesNoEvents(others);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetTreemapTooltipEntrySettings, {
dataKey: this.props.dataKey,
nameKey: this.props.nameKey,
stroke: this.props.stroke,
fill: this.props.fill,
currentRoot: this.state.currentRoot,
id: this.props.id
}), /*#__PURE__*/React.createElement(Surface, _extends({}, attrs, {
width: width,
height: getTreemapRenderHeight(height, type),
onTouchMove: this.handleTouchMove
}), this.renderAllNodes(), children), type === 'nest' && this.renderNestIndex());
}
}
_defineProperty(TreemapWithState, "displayName", 'Treemap');
function TreemapDispatchInject(props) {
var dispatch = useAppDispatch();
var width = useChartWidth();
var height = useChartHeight();
if (!isPositiveNumber(width) || !isPositiveNumber(height)) {
return null;
}
var externalId = props.id;
return /*#__PURE__*/React.createElement(RegisterGraphicalItemId, {
id: externalId,
type: "treemap"
}, id => /*#__PURE__*/React.createElement(TreemapWithState, _extends({}, props, {
id: id,
width: width,
height: height,
dispatch: dispatch
})));
}
/**
* The Treemap chart is used to visualize hierarchical data using nested rectangles.
*
* @consumes ResponsiveContainerContext
* @provides TooltipEntrySettings
*/
export function Treemap(outsideProps) {
var _props$className;
var props = resolveDefaultProps(outsideProps, defaultTreeMapProps);
var className = props.className,
style = props.style,
width = props.width,
height = props.height,
throttleDelay = props.throttleDelay,
throttledEvents = props.throttledEvents;
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
tooltipPortal = _useState2[0],
setTooltipPortal = _useState2[1];
return /*#__PURE__*/React.createElement(RechartsStoreProvider, {
preloadedState: {
options
},
reduxStoreName: (_props$className = props.className) !== null && _props$className !== void 0 ? _props$className : 'Treemap'
}, /*#__PURE__*/React.createElement(ReportChartMargin, {
margin: defaultTreemapMargin
}), /*#__PURE__*/React.createElement(ReportEventSettings, {
throttleDelay: throttleDelay,
throttledEvents: throttledEvents
}), /*#__PURE__*/React.createElement(RechartsWrapper, {
dispatchTouchEvents: false,
className: className,
style: style,
width: width,
height: height
/*
* Treemap has a bug where it doesn't include strokeWidth in its dimension calculation
* which makes the actual chart exactly {strokeWidth} larger than asked for.
* It's not a huge deal usually, but it makes the responsive option cycle infinitely.
*/,
responsive: false,
ref: node => {
if (tooltipPortal == null && node != null) {
setTooltipPortal(node);
}
},
onMouseEnter: undefined,
onMouseLeave: undefined,
onClick: undefined,
onMouseMove: undefined,
onMouseDown: undefined,
onMouseUp: undefined,
onContextMenu: undefined,
onDoubleClick: undefined,
onTouchStart: undefined,
onTouchMove: undefined,
onTouchEnd: undefined
}, /*#__PURE__*/React.createElement(TooltipPortalContext.Provider, {
value: tooltipPortal
}, /*#__PURE__*/React.createElement(TreemapDispatchInject, props))));
}

1
frontend/node_modules/recharts/es6/chart/types.js generated vendored Normal file
View file

@ -0,0 +1 @@
export {};

View file

@ -0,0 +1,84 @@
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
import * as React from 'react';
import { cloneElement, isValidElement } from 'react';
import { adaptEventHandlers } from '../util/types';
import { Dot } from '../shape/Dot';
import { Layer } from '../container/Layer';
import { useAppSelector } from '../state/hooks';
import { selectActiveTooltipIndex } from '../state/selectors/tooltipSelectors';
import { useActiveTooltipDataPoints } from '../hooks';
import { isNullish } from '../util/DataUtils';
import { svgPropertiesNoEventsFromUnknown } from '../util/svgPropertiesNoEvents';
import { ZIndexLayer } from '../zIndex/ZIndexLayer';
import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
var ActivePoint = _ref => {
var point = _ref.point,
childIndex = _ref.childIndex,
mainColor = _ref.mainColor,
activeDot = _ref.activeDot,
dataKey = _ref.dataKey,
clipPath = _ref.clipPath;
if (activeDot === false || point.x == null || point.y == null) {
return null;
}
var dotPropsTyped = {
index: childIndex,
dataKey,
cx: point.x,
cy: point.y,
r: 4,
fill: mainColor !== null && mainColor !== void 0 ? mainColor : 'none',
strokeWidth: 2,
stroke: '#fff',
payload: point.payload,
value: point.value
};
// @ts-expect-error svgPropertiesNoEventsFromUnknown(activeDot) is contributing unknown props
var dotProps = _objectSpread(_objectSpread(_objectSpread({}, dotPropsTyped), svgPropertiesNoEventsFromUnknown(activeDot)), adaptEventHandlers(activeDot));
var dot;
if (/*#__PURE__*/isValidElement(activeDot)) {
// @ts-expect-error we're improperly typing events
dot = /*#__PURE__*/cloneElement(activeDot, dotProps);
} else if (typeof activeDot === 'function') {
dot = activeDot(dotProps);
} else {
dot = /*#__PURE__*/React.createElement(Dot, dotProps);
}
return /*#__PURE__*/React.createElement(Layer, {
className: "recharts-active-dot",
clipPath: clipPath
}, dot);
};
export function ActivePoints(_ref2) {
var points = _ref2.points,
mainColor = _ref2.mainColor,
activeDot = _ref2.activeDot,
itemDataKey = _ref2.itemDataKey,
clipPath = _ref2.clipPath,
_ref2$zIndex = _ref2.zIndex,
zIndex = _ref2$zIndex === void 0 ? DefaultZIndexes.activeDot : _ref2$zIndex;
var activeTooltipIndex = useAppSelector(selectActiveTooltipIndex);
var activeDataPoints = useActiveTooltipDataPoints();
if (points == null || activeDataPoints == null) {
return null;
}
var activePoint = points.find(p => activeDataPoints.includes(p.payload));
if (isNullish(activePoint)) {
return null;
}
return /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: zIndex
}, /*#__PURE__*/React.createElement(ActivePoint, {
point: activePoint,
childIndex: Number(activeTooltipIndex),
mainColor: mainColor,
dataKey: itemDataKey,
activeDot: activeDot,
clipPath: clipPath
}));
}

15
frontend/node_modules/recharts/es6/component/Cell.js generated vendored Normal file
View file

@ -0,0 +1,15 @@
/**
* Cell component used to define colors and styles of chart elements.
*
* This component is now deprecated and will be removed in Recharts 4.0.
*
* Please use the `shape` prop or `content` prop on the respective chart components
* to customize the rendering of chart elements instead of using `Cell`.
*
* @see {@link https://recharts.github.io/en-US/guide/cell/ Guide: Migrate from Cell component to shape prop}
*
* @deprecated
* @consumes CellReader
*/
export var Cell = _props => null;
Cell.displayName = 'Cell';

132
frontend/node_modules/recharts/es6/component/Cursor.js generated vendored Normal file
View file

@ -0,0 +1,132 @@
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); }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
import * as React from 'react';
import { cloneElement, createElement, isValidElement } from 'react';
import { clsx } from 'clsx';
import { isPolarCoordinate } from '../util/types';
import { Curve } from '../shape/Curve';
import { Cross } from '../shape/Cross';
import { getCursorRectangle } from '../util/cursor/getCursorRectangle';
import { Rectangle } from '../shape/Rectangle';
import { getRadialCursorPoints } from '../util/cursor/getRadialCursorPoints';
import { Sector } from '../shape/Sector';
import { getCursorPoints } from '../util/cursor/getCursorPoints';
import { useChartLayout, useOffsetInternal } from '../context/chartLayoutContext';
import { useTooltipAxisBandSize } from '../context/useTooltipAxis';
import { useChartName } from '../state/selectors/selectors';
import { svgPropertiesNoEventsFromUnknown } from '../util/svgPropertiesNoEvents';
import { ZIndexLayer } from '../zIndex/ZIndexLayer';
import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
/**
* If set false, no cursor will be drawn when tooltip is active.
* If set an object, the option is the configuration of cursor.
* If set a React element, the option is the custom react element of drawing cursor
*/
function RenderCursor(_ref) {
var cursor = _ref.cursor,
cursorComp = _ref.cursorComp,
cursorProps = _ref.cursorProps;
if (/*#__PURE__*/isValidElement(cursor)) {
return /*#__PURE__*/cloneElement(cursor, cursorProps);
}
return /*#__PURE__*/createElement(cursorComp, cursorProps);
}
export function CursorInternal(props) {
var _props$zIndex;
var coordinate = props.coordinate,
payload = props.payload,
index = props.index,
offset = props.offset,
tooltipAxisBandSize = props.tooltipAxisBandSize,
layout = props.layout,
cursor = props.cursor,
tooltipEventType = props.tooltipEventType,
chartName = props.chartName;
// The cursor is a part of the Tooltip, and it should be shown (by default) when the Tooltip is active.
var activeCoordinate = coordinate;
var activePayload = payload;
var activeTooltipIndex = index;
if (!cursor || !activeCoordinate || chartName !== 'ScatterChart' && tooltipEventType !== 'axis') {
return null;
}
var restProps, cursorComp, preferredZIndex;
if (chartName === 'ScatterChart') {
restProps = activeCoordinate;
cursorComp = Cross;
preferredZIndex = DefaultZIndexes.cursorLine;
} else if (chartName === 'BarChart') {
restProps = getCursorRectangle(layout, activeCoordinate, offset, tooltipAxisBandSize);
cursorComp = Rectangle;
preferredZIndex = DefaultZIndexes.cursorRectangle;
} else if (layout === 'radial' && isPolarCoordinate(activeCoordinate)) {
var _getRadialCursorPoint = getRadialCursorPoints(activeCoordinate),
cx = _getRadialCursorPoint.cx,
cy = _getRadialCursorPoint.cy,
radius = _getRadialCursorPoint.radius,
startAngle = _getRadialCursorPoint.startAngle,
endAngle = _getRadialCursorPoint.endAngle;
restProps = {
cx,
cy,
startAngle,
endAngle,
innerRadius: radius,
outerRadius: radius
};
cursorComp = Sector;
preferredZIndex = DefaultZIndexes.cursorLine;
} else {
restProps = {
points: getCursorPoints(layout, activeCoordinate, offset)
};
cursorComp = Curve;
preferredZIndex = DefaultZIndexes.cursorLine;
}
var extraClassName = typeof cursor === 'object' && 'className' in cursor ? cursor.className : undefined;
var cursorProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
stroke: '#ccc',
pointerEvents: 'none'
}, offset), restProps), svgPropertiesNoEventsFromUnknown(cursor)), {}, {
payload: activePayload,
payloadIndex: activeTooltipIndex,
className: clsx('recharts-tooltip-cursor', extraClassName)
});
return /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: (_props$zIndex = props.zIndex) !== null && _props$zIndex !== void 0 ? _props$zIndex : preferredZIndex
}, /*#__PURE__*/React.createElement(RenderCursor, {
cursor: cursor,
cursorComp: cursorComp,
cursorProps: cursorProps
}));
}
/*
* Cursor is the background, or a highlight,
* that shows when user mouses over or activates
* an area.
*
* It usually shows together with a tooltip
* to emphasise which part of the chart does the tooltip refer to.
*/
export function Cursor(props) {
var tooltipAxisBandSize = useTooltipAxisBandSize();
var offset = useOffsetInternal();
var layout = useChartLayout();
var chartName = useChartName();
if (tooltipAxisBandSize == null || offset == null || layout == null || chartName == null) {
return null;
}
return /*#__PURE__*/React.createElement(CursorInternal, _extends({}, props, {
offset: offset,
layout: layout,
tooltipAxisBandSize: tooltipAxisBandSize,
chartName: chartName
}));
}

View file

@ -0,0 +1,37 @@
var _excluded = ["component"];
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; }
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; }
/**
* @fileOverview Customized
*/
import * as React from 'react';
import { isValidElement, cloneElement, createElement } from 'react';
import { Layer } from '../container/Layer';
import { warn } from '../util/LogUtils';
/**
* Customized component used to be necessary to render custom elements in Recharts 2.x.
* Starting from Recharts 3.x, all charts are able to render arbitrary elements anywhere,
* and Customized is no longer needed.
*
* @example Before: `<Customized component={<MyCustomComponent />} />`
* @example After: `<MyCustomComponent />`
*
* @deprecated Just render your components directly. Will be removed in 4.0
*/
export function Customized(_ref) {
var component = _ref.component,
props = _objectWithoutProperties(_ref, _excluded);
var child;
if (/*#__PURE__*/isValidElement(component)) {
child = /*#__PURE__*/cloneElement(component, props);
} else if (typeof component === 'function') {
// @ts-expect-error TS cannot verify that C is FunctionComponent<P> here
child = /*#__PURE__*/createElement(component, props);
} else {
warn(false, "Customized's props `component` must be React.element or Function, but got %s.", typeof component);
}
return /*#__PURE__*/React.createElement(Layer, {
className: "recharts-customized-wrapper"
}, child);
}
Customized.displayName = 'Customized';

View file

@ -0,0 +1,166 @@
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); }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
import * as React from 'react';
import { clsx } from 'clsx';
import { Surface } from '../container/Surface';
import { Symbols } from '../shape/Symbols';
import { adaptEventsOfChild } from '../util/types';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
var SIZE = 32;
export var defaultLegendContentDefaultProps = {
align: 'center',
iconSize: 14,
inactiveColor: '#ccc',
layout: 'horizontal',
verticalAlign: 'middle',
labelStyle: {}
};
function getStrokeDasharray(input) {
if (typeof input === 'object' && input !== null && 'strokeDasharray' in input) {
return String(input.strokeDasharray);
}
return undefined;
}
function Icon(_ref) {
var data = _ref.data,
iconType = _ref.iconType,
inactiveColor = _ref.inactiveColor;
var halfSize = SIZE / 2;
var sixthSize = SIZE / 6;
var thirdSize = SIZE / 3;
var color = data.inactive ? inactiveColor : data.color;
var preferredIcon = iconType !== null && iconType !== void 0 ? iconType : data.type;
if (preferredIcon === 'none') {
return null;
}
if (preferredIcon === 'plainline') {
return /*#__PURE__*/React.createElement("line", {
strokeWidth: 4,
fill: "none",
stroke: color,
strokeDasharray: getStrokeDasharray(data.payload),
x1: 0,
y1: halfSize,
x2: SIZE,
y2: halfSize,
className: "recharts-legend-icon"
});
}
if (preferredIcon === 'line') {
return /*#__PURE__*/React.createElement("path", {
strokeWidth: 4,
fill: "none",
stroke: color,
d: "M0,".concat(halfSize, "h").concat(thirdSize, "\n A").concat(sixthSize, ",").concat(sixthSize, ",0,1,1,").concat(2 * thirdSize, ",").concat(halfSize, "\n H").concat(SIZE, "M").concat(2 * thirdSize, ",").concat(halfSize, "\n A").concat(sixthSize, ",").concat(sixthSize, ",0,1,1,").concat(thirdSize, ",").concat(halfSize),
className: "recharts-legend-icon"
});
}
if (preferredIcon === 'rect') {
return /*#__PURE__*/React.createElement("path", {
stroke: "none",
fill: color,
d: "M0,".concat(SIZE / 8, "h").concat(SIZE, "v").concat(SIZE * 3 / 4, "h").concat(-SIZE, "z"),
className: "recharts-legend-icon"
});
}
if (/*#__PURE__*/React.isValidElement(data.legendIcon)) {
var iconProps = _objectSpread({}, data);
delete iconProps.legendIcon;
return /*#__PURE__*/React.cloneElement(data.legendIcon, iconProps);
}
return /*#__PURE__*/React.createElement(Symbols, {
fill: color,
cx: halfSize,
cy: halfSize,
size: SIZE,
sizeType: "diameter",
type: preferredIcon
});
}
function Items(props) {
var payload = props.payload,
iconSize = props.iconSize,
layout = props.layout,
formatter = props.formatter,
inactiveColor = props.inactiveColor,
iconType = props.iconType,
labelStyle = props.labelStyle;
var viewBox = {
x: 0,
y: 0,
width: SIZE,
height: SIZE
};
var itemStyle = {
display: layout === 'horizontal' ? 'inline-block' : 'block',
marginRight: 10
};
var svgStyle = {
display: 'inline-block',
verticalAlign: 'middle',
marginRight: 4
};
return payload.map((entry, i) => {
var finalFormatter = entry.formatter || formatter;
var className = clsx({
'recharts-legend-item': true,
["legend-item-".concat(i)]: true,
inactive: entry.inactive
});
if (entry.type === 'none') {
return null;
}
var finalLabelStyle = typeof labelStyle === 'object' ? _objectSpread({}, labelStyle) : {};
finalLabelStyle.color = entry.inactive ? inactiveColor : finalLabelStyle.color || entry.color;
var finalValue = finalFormatter ? finalFormatter(entry.value, entry, i) : entry.value;
return /*#__PURE__*/React.createElement("li", _extends({
className: className,
style: itemStyle,
key: "legend-item-".concat(i)
}, adaptEventsOfChild(props, entry, i)), /*#__PURE__*/React.createElement(Surface, {
width: iconSize,
height: iconSize,
viewBox: viewBox,
style: svgStyle,
"aria-label": entry.value == null ? 'legend icon' : "".concat(entry.value, " legend icon")
}, /*#__PURE__*/React.createElement(Icon, {
data: entry,
iconType: iconType,
inactiveColor: inactiveColor
})), /*#__PURE__*/React.createElement("span", {
className: "recharts-legend-item-text",
style: finalLabelStyle
}, finalValue));
});
}
/**
* This component is by default rendered inside the {@link Legend} component. You would not use it directly.
*
* You can use this component to customize the content of the legend,
* or you can provide your own completely independent content.
*/
export var DefaultLegendContent = outsideProps => {
var props = resolveDefaultProps(outsideProps, defaultLegendContentDefaultProps);
var payload = props.payload,
layout = props.layout,
align = props.align;
if (!payload || !payload.length) {
return null;
}
var finalStyle = {
padding: 0,
margin: 0,
textAlign: layout === 'horizontal' ? align : 'left'
};
return /*#__PURE__*/React.createElement("ul", {
className: "recharts-default-legend",
style: finalStyle
}, /*#__PURE__*/React.createElement(Items, _extends({}, props, {
payload: payload
})));
};

View file

@ -0,0 +1,151 @@
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); }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
/**
* @fileOverview Default Tooltip Content
*/
import * as React from 'react';
import sortBy from 'es-toolkit/compat/sortBy';
import { clsx } from 'clsx';
import { isNullish, isNumOrStr } from '../util/DataUtils';
function defaultFormatter(value) {
return Array.isArray(value) && isNumOrStr(value[0]) && isNumOrStr(value[1]) ? value.join(' ~ ') : value;
}
/**
* @inline
*/
export var defaultDefaultTooltipContentProps = {
separator: ' : ',
contentStyle: {
margin: 0,
padding: 10,
backgroundColor: '#fff',
border: '1px solid #ccc',
whiteSpace: 'nowrap'
},
itemStyle: {
display: 'block',
paddingTop: 4,
paddingBottom: 4,
color: '#000'
},
labelStyle: {},
accessibilityLayer: false
};
function lodashLikeSortBy(array, itemSorter) {
if (itemSorter == null) {
return array;
}
// @ts-expect-error sortBy types somehow are returning a number type.
return sortBy(array, itemSorter);
}
/**
* This component is by default rendered inside the {@link Tooltip} component. You would not use it directly.
*
* You can use this component to customize the content of the tooltip,
* or you can provide your own completely independent content.
*/
export var DefaultTooltipContent = props => {
var _props$separator = props.separator,
separator = _props$separator === void 0 ? defaultDefaultTooltipContentProps.separator : _props$separator,
contentStyle = props.contentStyle,
itemStyle = props.itemStyle,
_props$labelStyle = props.labelStyle,
labelStyle = _props$labelStyle === void 0 ? defaultDefaultTooltipContentProps.labelStyle : _props$labelStyle,
payload = props.payload,
formatter = props.formatter,
itemSorter = props.itemSorter,
wrapperClassName = props.wrapperClassName,
labelClassName = props.labelClassName,
label = props.label,
labelFormatter = props.labelFormatter,
_props$accessibilityL = props.accessibilityLayer,
accessibilityLayer = _props$accessibilityL === void 0 ? defaultDefaultTooltipContentProps.accessibilityLayer : _props$accessibilityL;
var renderContent = () => {
if (payload && payload.length) {
var listStyle = {
padding: 0,
margin: 0
};
var sortedPayload = lodashLikeSortBy(payload, itemSorter);
var items = sortedPayload.map((entry, i) => {
if (!entry || entry.type === 'none') {
return null;
}
var finalFormatter = entry.formatter || formatter || defaultFormatter;
var value = entry.value,
name = entry.name;
var finalValue = value;
var finalName = name;
if (finalFormatter) {
var formatted = finalFormatter(value, name, entry, i, payload);
if (Array.isArray(formatted)) {
var _formatted = _slicedToArray(formatted, 2);
finalValue = _formatted[0];
finalName = _formatted[1];
} else if (formatted != null) {
finalValue = formatted;
} else {
return null;
}
}
var finalItemStyle = _objectSpread(_objectSpread({}, defaultDefaultTooltipContentProps.itemStyle), {}, {
color: entry.color || defaultDefaultTooltipContentProps.itemStyle.color
}, itemStyle);
return /*#__PURE__*/React.createElement("li", {
className: "recharts-tooltip-item",
key: "tooltip-item-".concat(i),
style: finalItemStyle
}, isNumOrStr(finalName) ? /*#__PURE__*/React.createElement("span", {
className: "recharts-tooltip-item-name"
}, finalName) : null, isNumOrStr(finalName) ? /*#__PURE__*/React.createElement("span", {
className: "recharts-tooltip-item-separator"
}, separator) : null, /*#__PURE__*/React.createElement("span", {
className: "recharts-tooltip-item-value"
}, finalValue), /*#__PURE__*/React.createElement("span", {
className: "recharts-tooltip-item-unit"
}, entry.unit || ''));
});
return /*#__PURE__*/React.createElement("ul", {
className: "recharts-tooltip-item-list",
style: listStyle
}, items);
}
return null;
};
var finalStyle = _objectSpread(_objectSpread({}, defaultDefaultTooltipContentProps.contentStyle), contentStyle);
var finalLabelStyle = _objectSpread({
margin: 0
}, labelStyle);
var hasLabel = !isNullish(label);
var finalLabel = hasLabel ? label : '';
var wrapperCN = clsx('recharts-default-tooltip', wrapperClassName);
var labelCN = clsx('recharts-tooltip-label', labelClassName);
if (hasLabel && labelFormatter && payload !== undefined && payload !== null) {
finalLabel = labelFormatter(label, payload);
}
var accessibilityAttributes = accessibilityLayer ? {
role: 'status',
'aria-live': 'assertive'
} : {};
return /*#__PURE__*/React.createElement("div", _extends({
className: wrapperCN,
style: finalStyle
}, accessibilityAttributes), /*#__PURE__*/React.createElement("p", {
className: labelCN,
style: finalLabelStyle
}, /*#__PURE__*/React.isValidElement(finalLabel) ? finalLabel : "".concat(finalLabel)), renderContent());
};

92
frontend/node_modules/recharts/es6/component/Dots.js generated vendored Normal file
View file

@ -0,0 +1,92 @@
var _excluded = ["points"];
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
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); }
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; }
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; }
import * as React from 'react';
import { cloneElement, isValidElement } from 'react';
import { clsx } from 'clsx';
import { Dot } from '../shape/Dot';
import { Layer } from '../container/Layer';
import { isClipDot } from '../util/ReactUtils';
import { svgPropertiesAndEventsFromUnknown } from '../util/svgPropertiesAndEvents';
import { ZIndexLayer } from '../zIndex/ZIndexLayer';
import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
function DotItem(_ref) {
var option = _ref.option,
dotProps = _ref.dotProps,
className = _ref.className;
if (/*#__PURE__*/isValidElement(option)) {
// @ts-expect-error we can't type check element cloning properly
return /*#__PURE__*/cloneElement(option, dotProps);
}
if (typeof option === 'function') {
return option(dotProps);
}
var finalClassName = clsx(className, typeof option !== 'boolean' ? option.className : '');
var _ref2 = dotProps !== null && dotProps !== void 0 ? dotProps : {},
points = _ref2.points,
props = _objectWithoutProperties(_ref2, _excluded);
return /*#__PURE__*/React.createElement(Dot, _extends({}, props, {
className: finalClassName
}));
}
function shouldRenderDots(points, dot) {
if (points == null) {
return false;
}
if (dot) {
return true;
}
return points.length === 1;
}
export function Dots(_ref3) {
var points = _ref3.points,
dot = _ref3.dot,
className = _ref3.className,
dotClassName = _ref3.dotClassName,
dataKey = _ref3.dataKey,
baseProps = _ref3.baseProps,
needClip = _ref3.needClip,
clipPathId = _ref3.clipPathId,
_ref3$zIndex = _ref3.zIndex,
zIndex = _ref3$zIndex === void 0 ? DefaultZIndexes.scatter : _ref3$zIndex;
if (!shouldRenderDots(points, dot)) {
return null;
}
var clipDot = isClipDot(dot);
var customDotProps = svgPropertiesAndEventsFromUnknown(dot);
var dots = points.map((entry, i) => {
var _entry$x, _entry$y;
var dotProps = _objectSpread(_objectSpread(_objectSpread({
r: 3
}, baseProps), customDotProps), {}, {
index: i,
cx: (_entry$x = entry.x) !== null && _entry$x !== void 0 ? _entry$x : undefined,
cy: (_entry$y = entry.y) !== null && _entry$y !== void 0 ? _entry$y : undefined,
dataKey,
value: entry.value,
payload: entry.payload,
points
});
return /*#__PURE__*/React.createElement(DotItem, {
key: "dot-".concat(i),
option: dot,
dotProps: dotProps,
className: dotClassName
});
});
var layerProps = {};
if (needClip && clipPathId != null) {
layerProps.clipPath = "url(#clipPath-".concat(clipDot ? '' : 'dots-').concat(clipPathId, ")");
}
return /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: zIndex
}, /*#__PURE__*/React.createElement(Layer, _extends({
className: className
}, layerProps), dots));
}

389
frontend/node_modules/recharts/es6/component/Label.js generated vendored Normal file
View file

@ -0,0 +1,389 @@
var _excluded = ["labelRef"],
_excluded2 = ["content"];
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; }
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; }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
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); }
import * as React from 'react';
import { cloneElement, createContext, createElement, isValidElement, useContext, useMemo } from 'react';
import { clsx } from 'clsx';
import { isValidTextAnchor, Text } from './Text';
import { isNullish, isNumber, isNumOrStr, mathSign, uniqueId } from '../util/DataUtils';
import { polarToCartesian } from '../util/PolarUtils';
import { cartesianViewBoxToTrapezoid, useViewBox } from '../context/chartLayoutContext';
import { useAppSelector } from '../state/hooks';
import { selectPolarViewBox } from '../state/selectors/polarAxisSelectors';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents';
import { ZIndexLayer } from '../zIndex/ZIndexLayer';
import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
import { getCartesianPosition } from '../cartesian/getCartesianPosition';
/**
* @inline
*/
/**
* @inline
*/
/**
* @inline
*/
var CartesianLabelContext = /*#__PURE__*/createContext(null);
export var CartesianLabelContextProvider = _ref => {
var x = _ref.x,
y = _ref.y,
upperWidth = _ref.upperWidth,
lowerWidth = _ref.lowerWidth,
width = _ref.width,
height = _ref.height,
children = _ref.children;
var viewBox = useMemo(() => ({
x,
y,
upperWidth,
lowerWidth,
width,
height
}), [x, y, upperWidth, lowerWidth, width, height]);
return /*#__PURE__*/React.createElement(CartesianLabelContext.Provider, {
value: viewBox
}, children);
};
var useCartesianLabelContext = () => {
var labelChildContext = useContext(CartesianLabelContext);
var chartContext = useViewBox();
return labelChildContext || (chartContext ? cartesianViewBoxToTrapezoid(chartContext) : undefined);
};
var PolarLabelContext = /*#__PURE__*/createContext(null);
export var PolarLabelContextProvider = _ref2 => {
var cx = _ref2.cx,
cy = _ref2.cy,
innerRadius = _ref2.innerRadius,
outerRadius = _ref2.outerRadius,
startAngle = _ref2.startAngle,
endAngle = _ref2.endAngle,
clockWise = _ref2.clockWise,
children = _ref2.children;
var viewBox = useMemo(() => ({
cx,
cy,
innerRadius,
outerRadius,
startAngle,
endAngle,
clockWise
}), [cx, cy, innerRadius, outerRadius, startAngle, endAngle, clockWise]);
return /*#__PURE__*/React.createElement(PolarLabelContext.Provider, {
value: viewBox
}, children);
};
export var usePolarLabelContext = () => {
var labelChildContext = useContext(PolarLabelContext);
var chartContext = useAppSelector(selectPolarViewBox);
return labelChildContext || chartContext;
};
var getLabel = props => {
var value = props.value,
formatter = props.formatter;
var label = isNullish(props.children) ? value : props.children;
if (typeof formatter === 'function') {
return formatter(label);
}
return label;
};
export var isLabelContentAFunction = content => {
return content != null && typeof content === 'function';
};
var getDeltaAngle = (startAngle, endAngle) => {
var sign = mathSign(endAngle - startAngle);
var deltaAngle = Math.min(Math.abs(endAngle - startAngle), 360);
return sign * deltaAngle;
};
var renderRadialLabel = (labelProps, position, label, attrs, viewBox) => {
var offset = labelProps.offset,
className = labelProps.className;
var cx = viewBox.cx,
cy = viewBox.cy,
innerRadius = viewBox.innerRadius,
outerRadius = viewBox.outerRadius,
startAngle = viewBox.startAngle,
endAngle = viewBox.endAngle,
clockWise = viewBox.clockWise;
var radius = (innerRadius + outerRadius) / 2;
var deltaAngle = getDeltaAngle(startAngle, endAngle);
var sign = deltaAngle >= 0 ? 1 : -1;
var labelAngle, direction;
switch (position) {
case 'insideStart':
labelAngle = startAngle + sign * offset;
direction = clockWise;
break;
case 'insideEnd':
labelAngle = endAngle - sign * offset;
direction = !clockWise;
break;
case 'end':
labelAngle = endAngle + sign * offset;
direction = clockWise;
break;
default:
throw new Error("Unsupported position ".concat(position));
}
direction = deltaAngle <= 0 ? direction : !direction;
var startPoint = polarToCartesian(cx, cy, radius, labelAngle);
var endPoint = polarToCartesian(cx, cy, radius, labelAngle + (direction ? 1 : -1) * 359);
var path = "M".concat(startPoint.x, ",").concat(startPoint.y, "\n A").concat(radius, ",").concat(radius, ",0,1,").concat(direction ? 0 : 1, ",\n ").concat(endPoint.x, ",").concat(endPoint.y);
var id = isNullish(labelProps.id) ? uniqueId('recharts-radial-line-') : labelProps.id;
return /*#__PURE__*/React.createElement("text", _extends({}, attrs, {
dominantBaseline: "central",
className: clsx('recharts-radial-bar-label', className)
}), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
id: id,
d: path
})), /*#__PURE__*/React.createElement("textPath", {
xlinkHref: "#".concat(id)
}, label));
};
var getAttrsOfPolarLabel = (viewBox, offset, position) => {
var cx = viewBox.cx,
cy = viewBox.cy,
innerRadius = viewBox.innerRadius,
outerRadius = viewBox.outerRadius,
startAngle = viewBox.startAngle,
endAngle = viewBox.endAngle;
var midAngle = (startAngle + endAngle) / 2;
if (position === 'outside') {
var _polarToCartesian = polarToCartesian(cx, cy, outerRadius + offset, midAngle),
_x = _polarToCartesian.x,
_y = _polarToCartesian.y;
return {
x: _x,
y: _y,
textAnchor: _x >= cx ? 'start' : 'end',
verticalAnchor: 'middle'
};
}
if (position === 'center') {
return {
x: cx,
y: cy,
textAnchor: 'middle',
verticalAnchor: 'middle'
};
}
if (position === 'centerTop') {
return {
x: cx,
y: cy,
textAnchor: 'middle',
verticalAnchor: 'start'
};
}
if (position === 'centerBottom') {
return {
x: cx,
y: cy,
textAnchor: 'middle',
verticalAnchor: 'end'
};
}
var r = (innerRadius + outerRadius) / 2;
var _polarToCartesian2 = polarToCartesian(cx, cy, r, midAngle),
x = _polarToCartesian2.x,
y = _polarToCartesian2.y;
return {
x,
y,
textAnchor: 'middle',
verticalAnchor: 'middle'
};
};
var isPolar = viewBox => viewBox != null && 'cx' in viewBox && isNumber(viewBox.cx);
export var defaultLabelProps = {
angle: 0,
offset: 5,
zIndex: DefaultZIndexes.label,
position: 'middle',
textBreakAll: false
};
function polarViewBoxToTrapezoid(viewBox) {
if (!isPolar(viewBox)) {
return viewBox;
}
var cx = viewBox.cx,
cy = viewBox.cy,
outerRadius = viewBox.outerRadius;
var diameter = outerRadius * 2;
return {
x: cx - outerRadius,
y: cy - outerRadius,
width: diameter,
upperWidth: diameter,
lowerWidth: diameter,
height: diameter
};
}
/**
* @consumes CartesianViewBoxContext
* @consumes PolarViewBoxContext
* @consumes CartesianLabelContext
* @consumes PolarLabelContext
*/
export function Label(outerProps) {
var props = resolveDefaultProps(outerProps, defaultLabelProps);
var viewBoxFromProps = props.viewBox,
parentViewBox = props.parentViewBox,
position = props.position,
value = props.value,
children = props.children,
content = props.content,
_props$className = props.className,
className = _props$className === void 0 ? '' : _props$className,
textBreakAll = props.textBreakAll,
labelRef = props.labelRef;
var polarViewBox = usePolarLabelContext();
var cartesianViewBox = useCartesianLabelContext();
/*
* I am not proud about this solution, but it's a quick fix for https://github.com/recharts/recharts/issues/6030#issuecomment-3155352460.
* What we should really do is split Label into two components: CartesianLabel and PolarLabel and then handle their respective viewBoxes separately.
* Also other components should set its own viewBox in a context so that we can fix https://github.com/recharts/recharts/issues/6156
*/
var resolvedViewBox = position === 'center' ? cartesianViewBox : polarViewBox !== null && polarViewBox !== void 0 ? polarViewBox : cartesianViewBox;
var viewBox, label, positionAttrs;
if (viewBoxFromProps == null) {
viewBox = resolvedViewBox;
} else if (isPolar(viewBoxFromProps)) {
viewBox = viewBoxFromProps;
} else {
viewBox = cartesianViewBoxToTrapezoid(viewBoxFromProps);
}
var cartesianBox = polarViewBoxToTrapezoid(viewBox);
if (!viewBox || isNullish(value) && isNullish(children) && ! /*#__PURE__*/isValidElement(content) && typeof content !== 'function') {
return null;
}
var propsWithViewBox = _objectSpread(_objectSpread({}, props), {}, {
viewBox
});
if (/*#__PURE__*/isValidElement(content)) {
var _ = propsWithViewBox.labelRef,
propsWithoutLabelRef = _objectWithoutProperties(propsWithViewBox, _excluded);
return /*#__PURE__*/cloneElement(content, propsWithoutLabelRef);
}
if (typeof content === 'function') {
var _2 = propsWithViewBox.content,
propsForContent = _objectWithoutProperties(propsWithViewBox, _excluded2);
// @ts-expect-error we're not checking if the content component returns something that Text is able to render
label = /*#__PURE__*/createElement(content, propsForContent);
if (/*#__PURE__*/isValidElement(label)) {
return label;
}
} else {
label = getLabel(props);
}
var attrs = svgPropertiesAndEvents(props);
if (isPolar(viewBox)) {
// TODO: Generic Polar Hook
if (position === 'insideStart' || position === 'insideEnd' || position === 'end') {
return renderRadialLabel(props, position, label, attrs, viewBox);
}
positionAttrs = getAttrsOfPolarLabel(viewBox, props.offset, props.position);
} else {
if (!cartesianBox) {
return null;
}
var cartesianResult = getCartesianPosition({
viewBox: cartesianBox,
position,
offset: props.offset,
parentViewBox: isPolar(parentViewBox) ? undefined : parentViewBox,
clamp: true
});
positionAttrs = _objectSpread(_objectSpread({
x: cartesianResult.x,
y: cartesianResult.y,
textAnchor: cartesianResult.horizontalAnchor,
verticalAnchor: cartesianResult.verticalAnchor
}, cartesianResult.width !== undefined ? {
width: cartesianResult.width
} : {}), cartesianResult.height !== undefined ? {
height: cartesianResult.height
} : {});
}
return /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: props.zIndex
}, /*#__PURE__*/React.createElement(Text, _extends({
ref: labelRef,
className: clsx('recharts-label', className)
}, attrs, positionAttrs, {
/*
* textAnchor is decided by default based on the `position`
* but we allow overriding via props for precise control.
*/
textAnchor: isValidTextAnchor(attrs.textAnchor) ? attrs.textAnchor : positionAttrs.textAnchor,
breakAll: textBreakAll
}), label));
}
Label.displayName = 'Label';
var parseLabel = (label, viewBox, labelRef) => {
if (!label) {
return null;
}
var commonProps = {
viewBox,
labelRef
};
if (label === true) {
return /*#__PURE__*/React.createElement(Label, _extends({
key: "label-implicit"
}, commonProps));
}
if (isNumOrStr(label)) {
return /*#__PURE__*/React.createElement(Label, _extends({
key: "label-implicit",
value: label
}, commonProps));
}
if (/*#__PURE__*/isValidElement(label)) {
if (label.type === Label) {
return /*#__PURE__*/cloneElement(label, _objectSpread({
key: 'label-implicit'
}, commonProps));
}
return /*#__PURE__*/React.createElement(Label, _extends({
key: "label-implicit",
content: label
}, commonProps));
}
if (isLabelContentAFunction(label)) {
return /*#__PURE__*/React.createElement(Label, _extends({
key: "label-implicit",
content: label
}, commonProps));
}
if (label && typeof label === 'object') {
return /*#__PURE__*/React.createElement(Label, _extends({}, label, {
key: "label-implicit"
}, commonProps));
}
return null;
};
export function CartesianLabelFromLabelProp(_ref3) {
var label = _ref3.label,
labelRef = _ref3.labelRef;
var viewBox = useCartesianLabelContext();
return parseLabel(label, viewBox, labelRef) || null;
}
export function PolarLabelFromLabelProp(_ref4) {
var label = _ref4.label;
var viewBox = usePolarLabelContext();
return parseLabel(label, viewBox) || null;
}

View file

@ -0,0 +1,143 @@
var _excluded = ["valueAccessor"],
_excluded2 = ["dataKey", "clockWise", "id", "textBreakAll", "zIndex"];
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); }
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; }
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; }
import * as React from 'react';
import { createContext, useContext } from 'react';
import { isLabelContentAFunction, Label } from './Label';
import { Layer } from '../container/Layer';
import { getValueByDataKey } from '../util/ChartUtils';
import { isNullish } from '../util/DataUtils';
import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents';
import { ZIndexLayer } from '../zIndex/ZIndexLayer';
import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
import { isRenderableText } from './Text';
/**
* This is public API because we expose it as the valueAccessor parameter.
*
* The properties of "viewBox" are repeated as the root props of the entry object.
* So it doesn't matter if you read entry.x or entry.viewBox.x, they are the same.
*
* It's not necessary to pass redundant data, but we keep it for backward compatibility.
*/
/**
* LabelList props do not allow refs because the same props are reused in multiple elements so we don't have a good single place to ref to.
*/
/**
* This is the type accepted for the `label` prop on various graphical items.
* It accepts:
*
* boolean:
* true = labels show,
* false = labels don't show
* React element:
* will be cloned with extra props
* function:
* is used as <Label content={function} />, so this will be called once for each individual label (so typically once for each data point)
* object:
* the props to be passed to a LabelList component
*
* @inline
*/
var defaultAccessor = entry => {
var val = Array.isArray(entry.value) ? entry.value[entry.value.length - 1] : entry.value;
if (isRenderableText(val)) {
return val;
}
return undefined;
};
var CartesianLabelListContext = /*#__PURE__*/createContext(undefined);
export var CartesianLabelListContextProvider = CartesianLabelListContext.Provider;
var PolarLabelListContext = /*#__PURE__*/createContext(undefined);
export var PolarLabelListContextProvider = PolarLabelListContext.Provider;
function useCartesianLabelListContext() {
return useContext(CartesianLabelListContext);
}
function usePolarLabelListContext() {
return useContext(PolarLabelListContext);
}
/**
* @consumes LabelListContext
*/
export function LabelList(_ref) {
var _ref$valueAccessor = _ref.valueAccessor,
valueAccessor = _ref$valueAccessor === void 0 ? defaultAccessor : _ref$valueAccessor,
restProps = _objectWithoutProperties(_ref, _excluded);
var dataKey = restProps.dataKey,
clockWise = restProps.clockWise,
id = restProps.id,
textBreakAll = restProps.textBreakAll,
zIndex = restProps.zIndex,
others = _objectWithoutProperties(restProps, _excluded2);
var cartesianData = useCartesianLabelListContext();
var polarData = usePolarLabelListContext();
var data = cartesianData || polarData;
if (!data || !data.length) {
return null;
}
return /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : DefaultZIndexes.label
}, /*#__PURE__*/React.createElement(Layer, {
className: "recharts-label-list"
}, data.map((entry, index) => {
var _restProps$fill;
var value = isNullish(dataKey) ? valueAccessor(entry, index) : getValueByDataKey(entry.payload, dataKey);
var idProps = isNullish(id) ? {} : {
id: "".concat(id, "-").concat(index)
};
return /*#__PURE__*/React.createElement(Label, _extends({
key: "label-".concat(index)
}, svgPropertiesAndEvents(entry), others, idProps, {
/*
* Prefer to use the explicit fill from LabelList props.
* Only in an absence of that, fall back to the fill of the entry.
* The entry fill can be quite difficult to see especially in Bar, Pie, RadialBar in inside positions.
* On the other hand it's quite convenient in Scatter, Line, or when the position is outside the Bar, Pie filled shapes.
*/
fill: (_restProps$fill = restProps.fill) !== null && _restProps$fill !== void 0 ? _restProps$fill : entry.fill,
parentViewBox: entry.parentViewBox,
value: value,
textBreakAll: textBreakAll,
viewBox: entry.viewBox,
index: index
/*
* Here we don't want to use the default Label zIndex,
* we want it to inherit the zIndex of the LabelList itself
* which means just rendering as a regular child, without portaling anywhere.
*/,
zIndex: 0
}));
})));
}
LabelList.displayName = 'LabelList';
export function LabelListFromLabelProp(_ref2) {
var label = _ref2.label;
if (!label) {
return null;
}
if (label === true) {
return /*#__PURE__*/React.createElement(LabelList, {
key: "labelList-implicit"
});
}
if (/*#__PURE__*/React.isValidElement(label) || isLabelContentAFunction(label)) {
return /*#__PURE__*/React.createElement(LabelList, {
key: "labelList-implicit",
content: label
});
}
if (typeof label === 'object') {
return /*#__PURE__*/React.createElement(LabelList, _extends({
key: "labelList-implicit"
}, label, {
type: String(label.type)
}));
}
return null;
}

196
frontend/node_modules/recharts/es6/component/Legend.js generated vendored Normal file
View file

@ -0,0 +1,196 @@
var _excluded = ["contextPayload"];
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); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
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; }
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; }
import * as React from 'react';
import { useLayoutEffect } from 'react';
import { createPortal } from 'react-dom';
import { useLegendPortal } from '../context/legendPortalContext';
import { DefaultLegendContent } from './DefaultLegendContent';
import { getUniqPayload } from '../util/payload/getUniqPayload';
import { useLegendPayload } from '../context/legendPayloadContext';
import { useElementOffset } from '../util/useElementOffset';
import { useChartHeight, useChartWidth, useMargin } from '../context/chartLayoutContext';
import { setLegendSettings, setLegendSize } from '../state/legendSlice';
import { useAppDispatch } from '../state/hooks';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { propsAreEqual } from '../util/propsAreEqual';
function defaultUniqBy(entry) {
return entry.value;
}
function LegendContent(props) {
var contextPayload = props.contextPayload,
otherProps = _objectWithoutProperties(props, _excluded);
var finalPayload = getUniqPayload(contextPayload, props.payloadUniqBy, defaultUniqBy);
var contentProps = _objectSpread(_objectSpread({}, otherProps), {}, {
payload: finalPayload
});
if (/*#__PURE__*/React.isValidElement(props.content)) {
return /*#__PURE__*/React.cloneElement(props.content, contentProps);
}
if (typeof props.content === 'function') {
return /*#__PURE__*/React.createElement(props.content, contentProps);
}
return /*#__PURE__*/React.createElement(DefaultLegendContent, contentProps);
}
function getDefaultPosition(style, props, margin, chartWidth, chartHeight, box) {
var layout = props.layout,
align = props.align,
verticalAlign = props.verticalAlign;
var hPos, vPos;
if (!style || (style.left === undefined || style.left === null) && (style.right === undefined || style.right === null)) {
if (align === 'center' && layout === 'vertical') {
hPos = {
left: ((chartWidth || 0) - box.width) / 2
};
} else {
hPos = align === 'right' ? {
right: margin && margin.right || 0
} : {
left: margin && margin.left || 0
};
}
}
if (!style || (style.top === undefined || style.top === null) && (style.bottom === undefined || style.bottom === null)) {
if (verticalAlign === 'middle') {
vPos = {
top: ((chartHeight || 0) - box.height) / 2
};
} else {
vPos = verticalAlign === 'bottom' ? {
bottom: margin && margin.bottom || 0
} : {
top: margin && margin.top || 0
};
}
}
return _objectSpread(_objectSpread({}, hPos), vPos);
}
function LegendSettingsDispatcher(_ref) {
var align = _ref.align,
layout = _ref.layout,
verticalAlign = _ref.verticalAlign,
itemSorter = _ref.itemSorter;
var dispatch = useAppDispatch();
useLayoutEffect(() => {
dispatch(setLegendSettings({
align,
layout,
verticalAlign,
itemSorter
}));
}, [dispatch, align, layout, verticalAlign, itemSorter]);
return null;
}
function LegendSizeDispatcher(_ref2) {
var width = _ref2.width,
height = _ref2.height;
var dispatch = useAppDispatch();
useLayoutEffect(() => {
dispatch(setLegendSize({
width,
height
}));
}, [dispatch, width, height]);
useLayoutEffect(() => {
return () => {
dispatch(setLegendSize({
width: 0,
height: 0
}));
};
}, [dispatch]);
return null;
}
function getWidthOrHeight(layout, height, width, maxWidth) {
if (layout === 'vertical' && height != null) {
return {
height
};
}
if (layout === 'horizontal') {
return {
width: width || maxWidth
};
}
return null;
}
export var legendDefaultProps = {
align: 'center',
iconSize: 14,
inactiveColor: '#ccc',
itemSorter: 'value',
labelStyle: {},
layout: 'horizontal',
verticalAlign: 'bottom'
};
/**
* @consumes CartesianChartContext
* @consumes PolarChartContext
*/
function LegendImpl(outsideProps) {
var props = resolveDefaultProps(outsideProps, legendDefaultProps);
var contextPayload = useLegendPayload();
var legendPortalFromContext = useLegendPortal();
var margin = useMargin();
var widthFromProps = props.width,
heightFromProps = props.height,
wrapperStyle = props.wrapperStyle,
portalFromProps = props.portal;
// The contextPayload is not used directly inside the hook, but we need the onBBoxUpdate call
// when the payload changes, therefore it's here as a dependency.
var _useElementOffset = useElementOffset([contextPayload]),
_useElementOffset2 = _slicedToArray(_useElementOffset, 2),
lastBoundingBox = _useElementOffset2[0],
updateBoundingBox = _useElementOffset2[1];
var chartWidth = useChartWidth();
var chartHeight = useChartHeight();
if (chartWidth == null || chartHeight == null) {
return null;
}
var maxWidth = chartWidth - ((margin === null || margin === void 0 ? void 0 : margin.left) || 0) - ((margin === null || margin === void 0 ? void 0 : margin.right) || 0);
var widthOrHeight = getWidthOrHeight(props.layout, heightFromProps, widthFromProps, maxWidth);
// if the user supplies their own portal, only use their defined wrapper styles
var outerStyle = portalFromProps ? wrapperStyle : _objectSpread(_objectSpread({
position: 'absolute',
width: (widthOrHeight === null || widthOrHeight === void 0 ? void 0 : widthOrHeight.width) || widthFromProps || 'auto',
height: (widthOrHeight === null || widthOrHeight === void 0 ? void 0 : widthOrHeight.height) || heightFromProps || 'auto'
}, getDefaultPosition(wrapperStyle, props, margin, chartWidth, chartHeight, lastBoundingBox)), wrapperStyle);
var legendPortal = portalFromProps !== null && portalFromProps !== void 0 ? portalFromProps : legendPortalFromContext;
if (legendPortal == null || contextPayload == null) {
return null;
}
var legendElement = /*#__PURE__*/React.createElement("div", {
className: "recharts-legend-wrapper",
style: outerStyle,
ref: updateBoundingBox
}, /*#__PURE__*/React.createElement(LegendSettingsDispatcher, {
layout: props.layout,
align: props.align,
verticalAlign: props.verticalAlign,
itemSorter: props.itemSorter
}), !portalFromProps && /*#__PURE__*/React.createElement(LegendSizeDispatcher, {
width: lastBoundingBox.width,
height: lastBoundingBox.height
}), /*#__PURE__*/React.createElement(LegendContent, _extends({}, props, widthOrHeight, {
margin: margin,
chartWidth: chartWidth,
chartHeight: chartHeight,
contextPayload: contextPayload
})));
return /*#__PURE__*/createPortal(legendElement, legendPortal);
}
export var Legend = /*#__PURE__*/React.memo(LegendImpl, propsAreEqual);
Legend.displayName = 'Legend';

View file

@ -0,0 +1,226 @@
var _excluded = ["aspect", "initialDimension", "width", "height", "minWidth", "minHeight", "maxHeight", "children", "debounce", "id", "className", "onResize", "style"];
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); }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
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; }
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; }
import { clsx } from 'clsx';
import * as React from 'react';
import { createContext, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
import throttle from 'es-toolkit/compat/throttle';
import { isNumber, noop } from '../util/DataUtils';
import { warn } from '../util/LogUtils';
import { calculateChartDimensions, defaultResponsiveContainerProps, getDefaultWidthAndHeight, getInnerDivStyle } from './responsiveContainerUtils';
import { isPositiveNumber } from '../util/isWellBehavedNumber';
var ResponsiveContainerContext = /*#__PURE__*/createContext(defaultResponsiveContainerProps.initialDimension);
function isAcceptableSize(size) {
return isPositiveNumber(size.width) && isPositiveNumber(size.height);
}
function ResponsiveContainerContextProvider(_ref) {
var children = _ref.children,
width = _ref.width,
height = _ref.height;
var size = useMemo(() => ({
width,
height
}), [width, height]);
if (!isAcceptableSize(size)) {
/*
* Don't render the container if width or height is non-positive because
* in that case the chart will not be rendered properly anyway.
* We will instead wait for the next resize event to provide the correct dimensions.
*/
return null;
}
return /*#__PURE__*/React.createElement(ResponsiveContainerContext.Provider, {
value: size
}, children);
}
export var useResponsiveContainerContext = () => useContext(ResponsiveContainerContext);
var SizeDetectorContainer = /*#__PURE__*/forwardRef((_ref2, ref) => {
var aspect = _ref2.aspect,
_ref2$initialDimensio = _ref2.initialDimension,
initialDimension = _ref2$initialDimensio === void 0 ? defaultResponsiveContainerProps.initialDimension : _ref2$initialDimensio,
width = _ref2.width,
height = _ref2.height,
_ref2$minWidth = _ref2.minWidth,
minWidth = _ref2$minWidth === void 0 ? defaultResponsiveContainerProps.minWidth : _ref2$minWidth,
minHeight = _ref2.minHeight,
maxHeight = _ref2.maxHeight,
children = _ref2.children,
_ref2$debounce = _ref2.debounce,
debounce = _ref2$debounce === void 0 ? defaultResponsiveContainerProps.debounce : _ref2$debounce,
id = _ref2.id,
className = _ref2.className,
onResize = _ref2.onResize,
_ref2$style = _ref2.style,
style = _ref2$style === void 0 ? {} : _ref2$style,
others = _objectWithoutProperties(_ref2, _excluded);
var containerRef = useRef(null);
/*
* We are using a ref to avoid re-creating the ResizeObserver when the onResize function changes.
* The ref is updated on every render, so the latest onResize function is always available in the effect.
*/
var onResizeRef = useRef();
onResizeRef.current = onResize;
useImperativeHandle(ref, () => containerRef.current);
var _useState = useState({
containerWidth: initialDimension.width,
containerHeight: initialDimension.height
}),
_useState2 = _slicedToArray(_useState, 2),
sizes = _useState2[0],
setSizes = _useState2[1];
var setContainerSize = useCallback((newWidth, newHeight) => {
setSizes(prevState => {
var roundedWidth = Math.round(newWidth);
var roundedHeight = Math.round(newHeight);
if (prevState.containerWidth === roundedWidth && prevState.containerHeight === roundedHeight) {
return prevState;
}
return {
containerWidth: roundedWidth,
containerHeight: roundedHeight
};
});
}, []);
useEffect(() => {
if (containerRef.current == null || typeof ResizeObserver === 'undefined') {
return noop;
}
var callback = entries => {
var _onResizeRef$current;
var entry = entries[0];
if (entry == null) {
return;
}
var _entry$contentRect = entry.contentRect,
containerWidth = _entry$contentRect.width,
containerHeight = _entry$contentRect.height;
setContainerSize(containerWidth, containerHeight);
(_onResizeRef$current = onResizeRef.current) === null || _onResizeRef$current === void 0 || _onResizeRef$current.call(onResizeRef, containerWidth, containerHeight);
};
if (debounce > 0) {
callback = throttle(callback, debounce, {
trailing: true,
leading: false
});
}
var observer = new ResizeObserver(callback);
var _containerRef$current = containerRef.current.getBoundingClientRect(),
containerWidth = _containerRef$current.width,
containerHeight = _containerRef$current.height;
setContainerSize(containerWidth, containerHeight);
observer.observe(containerRef.current);
return () => {
observer.disconnect();
};
}, [setContainerSize, debounce]);
var containerWidth = sizes.containerWidth,
containerHeight = sizes.containerHeight;
warn(!aspect || aspect > 0, 'The aspect(%s) must be greater than zero.', aspect);
var _calculateChartDimens = calculateChartDimensions(containerWidth, containerHeight, {
width,
height,
aspect,
maxHeight
}),
calculatedWidth = _calculateChartDimens.calculatedWidth,
calculatedHeight = _calculateChartDimens.calculatedHeight;
warn(containerWidth < 0 || containerHeight < 0 || calculatedWidth != null && calculatedWidth > 0 || calculatedHeight != null && calculatedHeight > 0, "The width(%s) and height(%s) of chart should be greater than 0,\n please check the style of container, or the props width(%s) and height(%s),\n or add a minWidth(%s) or minHeight(%s) or use aspect(%s) to control the\n height and width.", calculatedWidth, calculatedHeight, width, height, minWidth, minHeight, aspect);
return /*#__PURE__*/React.createElement("div", _extends({
id: id ? "".concat(id) : undefined,
className: clsx('recharts-responsive-container', className),
style: _objectSpread(_objectSpread({}, style), {}, {
width,
height,
minWidth,
minHeight,
maxHeight
}),
ref: containerRef
}, others), /*#__PURE__*/React.createElement("div", {
style: getInnerDivStyle({
width,
height
})
}, /*#__PURE__*/React.createElement(ResponsiveContainerContextProvider, {
width: calculatedWidth,
height: calculatedHeight
}, children)));
});
/**
* The `ResponsiveContainer` component is a container that adjusts its width and height based on the size of its parent element.
* It is used to create responsive charts that adapt to different screen sizes.
*
* This component uses the {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver} API to monitor changes to the size of its parent element.
* If you need to support older browsers that do not support this API, you may need to include a polyfill.
*
* @see {@link https://recharts.github.io/en-US/guide/sizes/ Chart size guide}
*
* @provides ResponsiveContainerContext
*/
export var ResponsiveContainer = /*#__PURE__*/forwardRef((props, ref) => {
var responsiveContainerContext = useResponsiveContainerContext();
if (isPositiveNumber(responsiveContainerContext.width) && isPositiveNumber(responsiveContainerContext.height)) {
/*
* If we detect that we are already inside another ResponsiveContainer,
* we do not attempt to add another layer of responsiveness.
*/
return props.children;
}
var _getDefaultWidthAndHe = getDefaultWidthAndHeight({
width: props.width,
height: props.height,
aspect: props.aspect
}),
width = _getDefaultWidthAndHe.width,
height = _getDefaultWidthAndHe.height;
/*
* Let's try to get the calculated dimensions without having the div container set up.
* Sometimes this does produce fixed, positive dimensions. If so, we can skip rendering the div and monitoring its size.
*/
var _calculateChartDimens2 = calculateChartDimensions(undefined, undefined, {
width,
height,
aspect: props.aspect,
maxHeight: props.maxHeight
}),
calculatedWidth = _calculateChartDimens2.calculatedWidth,
calculatedHeight = _calculateChartDimens2.calculatedHeight;
if (isNumber(calculatedWidth) && isNumber(calculatedHeight)) {
/*
* If it just so happens that the combination of width, height, and aspect ratio
* results in fixed dimensions, then we don't need to monitor the container's size.
* We can just provide these fixed dimensions to the context.
*
* Note that here we are not checking for positive numbers;
* if the user provides a zero or negative width/height, we will just pass that along
* as whatever size we detect won't be helping anyway.
*/
return /*#__PURE__*/React.createElement(ResponsiveContainerContextProvider, {
width: calculatedWidth,
height: calculatedHeight
}, props.children);
}
/*
* Static analysis did not produce fixed dimensions,
* so we need to render a special div and monitor its size.
*/
return /*#__PURE__*/React.createElement(SizeDetectorContainer, _extends({}, props, {
width: width,
height: height,
ref: ref
}));
});

283
frontend/node_modules/recharts/es6/component/Text.js generated vendored Normal file
View file

@ -0,0 +1,283 @@
var _excluded = ["x", "y", "lineHeight", "capHeight", "fill", "scaleToFit", "textAnchor", "verticalAnchor"],
_excluded2 = ["dx", "dy", "angle", "className", "breakAll"];
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); }
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; }
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; }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
import * as React from 'react';
import { useMemo, forwardRef } from 'react';
import { clsx } from 'clsx';
import { isNullish, isNumber, isNumOrStr } from '../util/DataUtils';
import { Global } from '../util/Global';
import { getStringSize } from '../util/DOMUtils';
import { reduceCSSCalc } from '../util/ReduceCSSCalc';
import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { isWellBehavedNumber } from '../util/isWellBehavedNumber';
var BREAKING_SPACES = /[ \f\n\r\t\v\u2028\u2029]+/;
var calculateWordWidths = _ref => {
var children = _ref.children,
breakAll = _ref.breakAll,
style = _ref.style;
try {
var words = [];
if (!isNullish(children)) {
if (breakAll) {
words = children.toString().split('');
} else {
words = children.toString().split(BREAKING_SPACES);
}
}
var wordsWithComputedWidth = words.map(word => ({
word,
width: getStringSize(word, style).width
}));
var spaceWidth = breakAll ? 0 : getStringSize('\u00A0', style).width;
return {
wordsWithComputedWidth,
spaceWidth
};
} catch (_unused) {
return null;
}
};
/**
* @inline
*/
export function isValidTextAnchor(value) {
return value === 'start' || value === 'middle' || value === 'end' || value === 'inherit';
}
/**
* @inline
*/
/**
* @inline
*/
export function isRenderableText(val) {
return isNullish(val) || typeof val === 'string' || typeof val === 'number' || typeof val === 'boolean';
}
var calculate = (words, lineWidth, spaceWidth, scaleToFit) => words.reduce((result, _ref2) => {
var word = _ref2.word,
width = _ref2.width;
var currentLine = result[result.length - 1];
if (currentLine && width != null && (lineWidth == null || scaleToFit || currentLine.width + width + spaceWidth < Number(lineWidth))) {
// Word can be added to an existing line
currentLine.words.push(word);
currentLine.width += width + spaceWidth;
} else {
// Add first word to line or word is too long to scaleToFit on existing line
var newLine = {
words: [word],
width
};
result.push(newLine);
}
return result;
}, []);
var findLongestLine = words => words.reduce((a, b) => a.width > b.width ? a : b);
var suffix = '…';
var checkOverflow = (text, index, breakAll, style, maxLines, lineWidth, spaceWidth, scaleToFit) => {
var tempText = text.slice(0, index);
var words = calculateWordWidths({
breakAll,
style,
children: tempText + suffix
});
if (!words) {
return [false, []];
}
var result = calculate(words.wordsWithComputedWidth, lineWidth, spaceWidth, scaleToFit);
var doesOverflow = result.length > maxLines || findLongestLine(result).width > Number(lineWidth);
return [doesOverflow, result];
};
var calculateWordsByLines = (_ref3, initialWordsWithComputedWith, spaceWidth, lineWidth, scaleToFit) => {
var maxLines = _ref3.maxLines,
children = _ref3.children,
style = _ref3.style,
breakAll = _ref3.breakAll;
var shouldLimitLines = isNumber(maxLines);
var text = String(children);
var originalResult = calculate(initialWordsWithComputedWith, lineWidth, spaceWidth, scaleToFit);
if (!shouldLimitLines || scaleToFit) {
return originalResult;
}
var overflows = originalResult.length > maxLines || findLongestLine(originalResult).width > Number(lineWidth);
if (!overflows) {
return originalResult;
}
var start = 0;
var end = text.length - 1;
var iterations = 0;
var trimmedResult;
while (start <= end && iterations <= text.length - 1) {
var middle = Math.floor((start + end) / 2);
var prev = middle - 1;
var _checkOverflow = checkOverflow(text, prev, breakAll, style, maxLines, lineWidth, spaceWidth, scaleToFit),
_checkOverflow2 = _slicedToArray(_checkOverflow, 2),
doesPrevOverflow = _checkOverflow2[0],
result = _checkOverflow2[1];
var _checkOverflow3 = checkOverflow(text, middle, breakAll, style, maxLines, lineWidth, spaceWidth, scaleToFit),
_checkOverflow4 = _slicedToArray(_checkOverflow3, 1),
doesMiddleOverflow = _checkOverflow4[0];
if (!doesPrevOverflow && !doesMiddleOverflow) {
start = middle + 1;
}
if (doesPrevOverflow && doesMiddleOverflow) {
end = middle - 1;
}
if (!doesPrevOverflow && doesMiddleOverflow) {
trimmedResult = result;
break;
}
iterations++;
}
// Fallback to originalResult (result without trimming) if we cannot find the
// where to trim. This should not happen :tm:
return trimmedResult || originalResult;
};
var getWordsWithoutCalculate = children => {
var words = !isNullish(children) ? children.toString().split(BREAKING_SPACES) : [];
return [{
words,
width: undefined
}];
};
export var getWordsByLines = _ref4 => {
var width = _ref4.width,
scaleToFit = _ref4.scaleToFit,
children = _ref4.children,
style = _ref4.style,
breakAll = _ref4.breakAll,
maxLines = _ref4.maxLines;
// Only perform calculations if using features that require them (multiline, scaleToFit)
if ((width || scaleToFit) && !Global.isSsr) {
var wordsWithComputedWidth, spaceWidth;
var wordWidths = calculateWordWidths({
breakAll,
children,
style
});
if (wordWidths) {
var wcw = wordWidths.wordsWithComputedWidth,
sw = wordWidths.spaceWidth;
wordsWithComputedWidth = wcw;
spaceWidth = sw;
} else {
return getWordsWithoutCalculate(children);
}
return calculateWordsByLines({
breakAll,
children,
maxLines,
style
}, wordsWithComputedWidth, spaceWidth, width, Boolean(scaleToFit));
}
return getWordsWithoutCalculate(children);
};
var DEFAULT_FILL = '#808080';
export var textDefaultProps = {
angle: 0,
breakAll: false,
// Magic number from d3
capHeight: '0.71em',
fill: DEFAULT_FILL,
lineHeight: '1em',
scaleToFit: false,
textAnchor: 'start',
// Maintain compat with existing charts / default SVG behavior
verticalAnchor: 'end',
x: 0,
y: 0
};
export var Text = /*#__PURE__*/forwardRef((outsideProps, ref) => {
var _resolveDefaultProps = resolveDefaultProps(outsideProps, textDefaultProps),
propsX = _resolveDefaultProps.x,
propsY = _resolveDefaultProps.y,
lineHeight = _resolveDefaultProps.lineHeight,
capHeight = _resolveDefaultProps.capHeight,
fill = _resolveDefaultProps.fill,
scaleToFit = _resolveDefaultProps.scaleToFit,
textAnchor = _resolveDefaultProps.textAnchor,
verticalAnchor = _resolveDefaultProps.verticalAnchor,
props = _objectWithoutProperties(_resolveDefaultProps, _excluded);
var wordsByLines = useMemo(() => {
return getWordsByLines({
breakAll: props.breakAll,
children: props.children,
maxLines: props.maxLines,
scaleToFit,
style: props.style,
width: props.width
});
}, [props.breakAll, props.children, props.maxLines, scaleToFit, props.style, props.width]);
var dx = props.dx,
dy = props.dy,
angle = props.angle,
className = props.className,
breakAll = props.breakAll,
textProps = _objectWithoutProperties(props, _excluded2);
if (!isNumOrStr(propsX) || !isNumOrStr(propsY) || wordsByLines.length === 0) {
return null;
}
var x = Number(propsX) + (isNumber(dx) ? dx : 0);
var y = Number(propsY) + (isNumber(dy) ? dy : 0);
if (!isWellBehavedNumber(x) || !isWellBehavedNumber(y)) {
return null;
}
var startDy;
switch (verticalAnchor) {
case 'start':
startDy = reduceCSSCalc("calc(".concat(capHeight, ")"));
break;
case 'middle':
startDy = reduceCSSCalc("calc(".concat((wordsByLines.length - 1) / 2, " * -").concat(lineHeight, " + (").concat(capHeight, " / 2))"));
break;
default:
startDy = reduceCSSCalc("calc(".concat(wordsByLines.length - 1, " * -").concat(lineHeight, ")"));
break;
}
var transforms = [];
var firstLine = wordsByLines[0];
if (scaleToFit && firstLine != null) {
var lineWidth = firstLine.width;
var width = props.width;
transforms.push("scale(".concat(isNumber(width) && isNumber(lineWidth) ? width / lineWidth : 1, ")"));
}
if (angle) {
transforms.push("rotate(".concat(angle, ", ").concat(x, ", ").concat(y, ")"));
}
if (transforms.length) {
textProps.transform = transforms.join(' ');
}
return /*#__PURE__*/React.createElement("text", _extends({}, svgPropertiesAndEvents(textProps), {
ref: ref,
x: x,
y: y,
className: clsx('recharts-text', className),
textAnchor: textAnchor,
fill: fill.includes('url') ? DEFAULT_FILL : fill
}), wordsByLines.map((line, index) => {
var words = line.words.join(breakAll ? '' : ' ');
return (
/*#__PURE__*/
// duplicate words will cause duplicate keys which is why we add the array index here
React.createElement("tspan", {
x: x,
dy: index === 0 ? startDy : lineHeight,
key: "".concat(words, "-").concat(index)
}, words)
);
}));
});
Text.displayName = 'Text';

184
frontend/node_modules/recharts/es6/component/Tooltip.js generated vendored Normal file
View file

@ -0,0 +1,184 @@
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
import * as React from 'react';
import { useEffect } from 'react';
import { createPortal } from 'react-dom';
import { DefaultTooltipContent } from './DefaultTooltipContent';
import { TooltipBoundingBox } from './TooltipBoundingBox';
import { getUniqPayload } from '../util/payload/getUniqPayload';
import { useViewBox } from '../context/chartLayoutContext';
import { useAccessibilityLayer } from '../context/accessibilityContext';
import { useElementOffset } from '../util/useElementOffset';
import { Cursor } from './Cursor';
import { selectActiveCoordinate, selectActiveLabel, selectIsTooltipActive, selectTooltipPayload } from '../state/selectors/selectors';
import { useTooltipPortal } from '../context/tooltipPortalContext';
import { useAppDispatch, useAppSelector } from '../state/hooks';
import { setTooltipSettingsState } from '../state/tooltipSlice';
import { useTooltipChartSynchronisation } from '../synchronisation/useChartSynchronisation';
import { useTooltipEventType } from '../state/selectors/selectTooltipEventType';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
function defaultUniqBy(entry) {
return entry.dataKey;
}
function renderContent(content, props) {
if (/*#__PURE__*/React.isValidElement(content)) {
return /*#__PURE__*/React.cloneElement(content, props);
}
if (typeof content === 'function') {
return /*#__PURE__*/React.createElement(content, props);
}
return /*#__PURE__*/React.createElement(DefaultTooltipContent, props);
}
var emptyPayload = [];
export var defaultTooltipProps = {
allowEscapeViewBox: {
x: false,
y: false
},
animationDuration: 400,
animationEasing: 'ease',
axisId: 0,
contentStyle: {},
cursor: true,
filterNull: true,
includeHidden: false,
isAnimationActive: 'auto',
itemSorter: 'name',
itemStyle: {},
labelStyle: {},
offset: 10,
reverseDirection: {
x: false,
y: false
},
separator: ' : ',
trigger: 'hover',
useTranslate3d: false,
wrapperStyle: {}
};
/**
* The Tooltip component displays a floating box with data values when hovering over or clicking on chart elements.
*
* It can be configured to show information for individual data points or for all points at a specific axis coordinate.
* The appearance and content of the tooltip can be customized via props.
*
* @see {@link https://github.com/recharts/recharts/wiki/Tooltip-event-type-and-shared-prop Tooltip event type and shared prop wiki page}
* @see {@link https://recharts.github.io/en-US/guide/activeIndex/ Active index replacement when migrating from Recharts v2 to v3}
*
* @consumes CartesianChartContext
* @consumes PolarChartContext
* @consumes TooltipEntrySettings
*/
export function Tooltip(outsideProps) {
var _useAppSelector, _ref2;
var props = resolveDefaultProps(outsideProps, defaultTooltipProps);
var activeFromProps = props.active,
allowEscapeViewBox = props.allowEscapeViewBox,
animationDuration = props.animationDuration,
animationEasing = props.animationEasing,
content = props.content,
filterNull = props.filterNull,
isAnimationActive = props.isAnimationActive,
offset = props.offset,
payloadUniqBy = props.payloadUniqBy,
position = props.position,
reverseDirection = props.reverseDirection,
useTranslate3d = props.useTranslate3d,
wrapperStyle = props.wrapperStyle,
cursor = props.cursor,
shared = props.shared,
trigger = props.trigger,
defaultIndex = props.defaultIndex,
portalFromProps = props.portal,
axisId = props.axisId;
var dispatch = useAppDispatch();
var defaultIndexAsString = typeof defaultIndex === 'number' ? String(defaultIndex) : defaultIndex;
useEffect(() => {
dispatch(setTooltipSettingsState({
shared,
trigger,
axisId,
active: activeFromProps,
defaultIndex: defaultIndexAsString
}));
}, [dispatch, shared, trigger, axisId, activeFromProps, defaultIndexAsString]);
var viewBox = useViewBox();
var accessibilityLayer = useAccessibilityLayer();
var tooltipEventType = useTooltipEventType(shared);
var _ref = (_useAppSelector = useAppSelector(state => selectIsTooltipActive(state, tooltipEventType, trigger, defaultIndexAsString))) !== null && _useAppSelector !== void 0 ? _useAppSelector : {},
activeIndex = _ref.activeIndex,
isActive = _ref.isActive;
var payloadFromRedux = useAppSelector(state => selectTooltipPayload(state, tooltipEventType, trigger, defaultIndexAsString));
var labelFromRedux = useAppSelector(state => selectActiveLabel(state, tooltipEventType, trigger, defaultIndexAsString));
var coordinate = useAppSelector(state => selectActiveCoordinate(state, tooltipEventType, trigger, defaultIndexAsString));
var payload = payloadFromRedux;
var tooltipPortalFromContext = useTooltipPortal();
/*
* The user can set `active=true` on the Tooltip in which case the Tooltip will stay always active,
* or `active=false` in which case the Tooltip never shows.
*
* If the `active` prop is not defined then it will show and hide based on mouse or keyboard activity.
*/
var finalIsActive = (_ref2 = activeFromProps !== null && activeFromProps !== void 0 ? activeFromProps : isActive) !== null && _ref2 !== void 0 ? _ref2 : false;
var _useElementOffset = useElementOffset([payload, finalIsActive]),
_useElementOffset2 = _slicedToArray(_useElementOffset, 2),
lastBoundingBox = _useElementOffset2[0],
updateBoundingBox = _useElementOffset2[1];
var finalLabel = tooltipEventType === 'axis' ? labelFromRedux : undefined;
useTooltipChartSynchronisation(tooltipEventType, trigger, coordinate, finalLabel, activeIndex, finalIsActive);
var tooltipPortal = portalFromProps !== null && portalFromProps !== void 0 ? portalFromProps : tooltipPortalFromContext;
if (tooltipPortal == null || viewBox == null || tooltipEventType == null) {
return null;
}
var finalPayload = payload !== null && payload !== void 0 ? payload : emptyPayload;
if (!finalIsActive) {
finalPayload = emptyPayload;
}
if (filterNull && finalPayload.length) {
finalPayload = getUniqPayload(finalPayload.filter(entry => entry.value != null && (entry.hide !== true || props.includeHidden)), payloadUniqBy, defaultUniqBy);
}
var hasPayload = finalPayload.length > 0;
var tooltipContentProps = _objectSpread(_objectSpread({}, props), {}, {
payload: finalPayload,
label: finalLabel,
active: finalIsActive,
activeIndex,
coordinate,
accessibilityLayer
});
var tooltipElement = /*#__PURE__*/React.createElement(TooltipBoundingBox, {
allowEscapeViewBox: allowEscapeViewBox,
animationDuration: animationDuration,
animationEasing: animationEasing,
isAnimationActive: isAnimationActive,
active: finalIsActive,
coordinate: coordinate,
hasPayload: hasPayload,
offset: offset,
position: position,
reverseDirection: reverseDirection,
useTranslate3d: useTranslate3d,
viewBox: viewBox,
wrapperStyle: wrapperStyle,
lastBoundingBox: lastBoundingBox,
innerRef: updateBoundingBox,
hasPortalFromProps: Boolean(portalFromProps)
}, renderContent(content, tooltipContentProps));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/createPortal(tooltipElement, tooltipPortal), finalIsActive && /*#__PURE__*/React.createElement(Cursor, {
cursor: cursor,
tooltipEventType: tooltipEventType,
coordinate: coordinate,
payload: finalPayload,
index: activeIndex
}));
}

View file

@ -0,0 +1,103 @@
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
import * as React from 'react';
import { getTooltipTranslate } from '../util/tooltip/translate';
import { usePrefersReducedMotion } from '../util/usePrefersReducedMotion';
function resolveTransitionProperty(args) {
if (args.prefersReducedMotion && args.isAnimationActive === 'auto') {
return undefined;
}
if (args.isAnimationActive && args.active) {
var easing = typeof args.animationEasing === 'string' ? args.animationEasing : 'ease';
return "transform ".concat(args.animationDuration, "ms ").concat(easing);
}
return undefined;
}
function TooltipBoundingBoxImpl(props) {
var _props$coordinate3, _props$coordinate4, _props$coordinate$x2, _props$coordinate5, _props$coordinate$y2, _props$coordinate6;
var prefersReducedMotion = usePrefersReducedMotion();
var _React$useState = React.useState(() => ({
dismissed: false,
dismissedAtCoordinate: {
x: 0,
y: 0
}
})),
_React$useState2 = _slicedToArray(_React$useState, 2),
state = _React$useState2[0],
setState = _React$useState2[1];
React.useEffect(() => {
var handleKeyDown = event => {
if (event.key === 'Escape') {
var _props$coordinate$x, _props$coordinate, _props$coordinate$y, _props$coordinate2;
setState({
dismissed: true,
dismissedAtCoordinate: {
x: (_props$coordinate$x = (_props$coordinate = props.coordinate) === null || _props$coordinate === void 0 ? void 0 : _props$coordinate.x) !== null && _props$coordinate$x !== void 0 ? _props$coordinate$x : 0,
y: (_props$coordinate$y = (_props$coordinate2 = props.coordinate) === null || _props$coordinate2 === void 0 ? void 0 : _props$coordinate2.y) !== null && _props$coordinate$y !== void 0 ? _props$coordinate$y : 0
}
});
}
};
document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
}, [(_props$coordinate3 = props.coordinate) === null || _props$coordinate3 === void 0 ? void 0 : _props$coordinate3.x, (_props$coordinate4 = props.coordinate) === null || _props$coordinate4 === void 0 ? void 0 : _props$coordinate4.y]);
if (state.dismissed && (((_props$coordinate$x2 = (_props$coordinate5 = props.coordinate) === null || _props$coordinate5 === void 0 ? void 0 : _props$coordinate5.x) !== null && _props$coordinate$x2 !== void 0 ? _props$coordinate$x2 : 0) !== state.dismissedAtCoordinate.x || ((_props$coordinate$y2 = (_props$coordinate6 = props.coordinate) === null || _props$coordinate6 === void 0 ? void 0 : _props$coordinate6.y) !== null && _props$coordinate$y2 !== void 0 ? _props$coordinate$y2 : 0) !== state.dismissedAtCoordinate.y)) {
setState(_objectSpread(_objectSpread({}, state), {}, {
dismissed: false
}));
}
var _getTooltipTranslate = getTooltipTranslate({
allowEscapeViewBox: props.allowEscapeViewBox,
coordinate: props.coordinate,
offsetLeft: typeof props.offset === 'number' ? props.offset : props.offset.x,
offsetTop: typeof props.offset === 'number' ? props.offset : props.offset.y,
position: props.position,
reverseDirection: props.reverseDirection,
tooltipBox: {
height: props.lastBoundingBox.height,
width: props.lastBoundingBox.width
},
useTranslate3d: props.useTranslate3d,
viewBox: props.viewBox
}),
cssClasses = _getTooltipTranslate.cssClasses,
cssProperties = _getTooltipTranslate.cssProperties;
var positionStyle = props.hasPortalFromProps ? {} : _objectSpread(_objectSpread({
transition: resolveTransitionProperty({
prefersReducedMotion,
isAnimationActive: props.isAnimationActive,
active: props.active,
animationDuration: props.animationDuration,
animationEasing: props.animationEasing
})
}, cssProperties), {}, {
pointerEvents: 'none',
position: 'absolute',
top: 0,
left: 0
});
var outerStyle = _objectSpread(_objectSpread({}, positionStyle), {}, {
visibility: !state.dismissed && props.active && props.hasPayload ? 'visible' : 'hidden'
}, props.wrapperStyle);
return /*#__PURE__*/React.createElement("div", {
// @ts-expect-error typescript library does not recognize xmlns attribute, but it's required for an HTML chunk inside SVG.
xmlns: "http://www.w3.org/1999/xhtml",
tabIndex: -1,
className: cssClasses,
style: outerStyle,
ref: props.innerRef
}, props.children);
}
export var TooltipBoundingBox = /*#__PURE__*/React.memo(TooltipBoundingBoxImpl);

View file

@ -0,0 +1,109 @@
import { isPercent } from '../util/DataUtils';
export var defaultResponsiveContainerProps = {
width: '100%',
height: '100%',
debounce: 0,
minWidth: 0,
initialDimension: {
width: -1,
height: -1
}
};
export var calculateChartDimensions = (containerWidth, containerHeight, props) => {
var _props$width = props.width,
width = _props$width === void 0 ? defaultResponsiveContainerProps.width : _props$width,
_props$height = props.height,
height = _props$height === void 0 ? defaultResponsiveContainerProps.height : _props$height,
aspect = props.aspect,
maxHeight = props.maxHeight;
/*
* The containerWidth and containerHeight are already percentage based because it's set as that percentage in CSS.
* Means we don't have to calculate percentages here.
*/
var calculatedWidth = isPercent(width) ? containerWidth : Number(width);
var calculatedHeight = isPercent(height) ? containerHeight : Number(height);
if (aspect && aspect > 0) {
// Preserve the desired aspect ratio
if (calculatedWidth) {
// Will default to using width for aspect ratio
calculatedHeight = calculatedWidth / aspect;
} else if (calculatedHeight) {
// But we should also take height into consideration
calculatedWidth = calculatedHeight * aspect;
}
// if maxHeight is set, overwrite if calculatedHeight is greater than maxHeight
if (maxHeight && calculatedHeight != null && calculatedHeight > maxHeight) {
calculatedHeight = maxHeight;
}
}
return {
calculatedWidth,
calculatedHeight
};
};
var bothOverflow = {
width: 0,
height: 0,
overflow: 'visible'
};
var overflowX = {
width: 0,
overflowX: 'visible'
};
var overflowY = {
height: 0,
overflowY: 'visible'
};
var noStyle = {};
/**
* This zero-size, overflow-visible is required to allow the chart to shrink.
* Without it, the chart itself will fill the ResponsiveContainer, and while it allows the chart to grow,
* it would always keep the container at the size of the chart,
* and ResizeObserver would never fire.
* With this zero-size element, the chart itself never actually fills the container,
* it just so happens that it is visible because it overflows.
* I learned this trick from the `react-virtualized` library: https://github.com/bvaughn/react-virtualized-auto-sizer/blob/master/src/AutoSizer.ts
* See https://github.com/recharts/recharts/issues/172 and also https://github.com/bvaughn/react-virtualized/issues/68
*
* Also, we don't need to apply the zero-size style if the dimension is a fixed number (or undefined),
* because in that case the chart can't shrink in that dimension anyway.
* This fixes defining the dimensions using aspect ratio: https://github.com/recharts/recharts/issues/6245
*/
export var getInnerDivStyle = props => {
var width = props.width,
height = props.height;
var isWidthPercent = isPercent(width);
var isHeightPercent = isPercent(height);
if (isWidthPercent && isHeightPercent) {
return bothOverflow;
}
if (isWidthPercent) {
return overflowX;
}
if (isHeightPercent) {
return overflowY;
}
return noStyle;
};
export function getDefaultWidthAndHeight(_ref) {
var width = _ref.width,
height = _ref.height,
aspect = _ref.aspect;
var calculatedWidth = width;
var calculatedHeight = height;
if (calculatedWidth === undefined && calculatedHeight === undefined) {
calculatedWidth = defaultResponsiveContainerProps.width;
calculatedHeight = defaultResponsiveContainerProps.height;
} else if (calculatedWidth === undefined) {
calculatedWidth = aspect && aspect > 0 ? undefined : defaultResponsiveContainerProps.width;
} else if (calculatedHeight === undefined) {
calculatedHeight = aspect && aspect > 0 ? undefined : defaultResponsiveContainerProps.height;
}
return {
width: calculatedWidth,
height: calculatedHeight
};
}

View file

@ -0,0 +1,49 @@
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
import * as React from 'react';
import { createContext, useContext, useState } from 'react';
import { uniqueId } from '../util/DataUtils';
import { usePlotArea } from '../hooks';
var ClipPathIdContext = /*#__PURE__*/createContext(undefined);
/**
* Generates a unique clip path ID for use in SVG elements,
* and puts it in a context provider.
*
* To read the clip path ID, use the `useClipPathId` hook,
* or render `<ClipPath>` component which will automatically use the ID from this context.
*
* @param props children - React children to be wrapped by the provider
* @returns React Context Provider
*/
export var ClipPathProvider = _ref => {
var children = _ref.children;
var _useState = useState("".concat(uniqueId('recharts'), "-clip")),
_useState2 = _slicedToArray(_useState, 1),
clipPathId = _useState2[0];
var plotArea = usePlotArea();
if (plotArea == null) {
return null;
}
var x = plotArea.x,
y = plotArea.y,
width = plotArea.width,
height = plotArea.height;
return /*#__PURE__*/React.createElement(ClipPathIdContext.Provider, {
value: clipPathId
}, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
id: clipPathId
}, /*#__PURE__*/React.createElement("rect", {
x: x,
y: y,
height: height,
width: width
}))), children);
};
export var useClipPathId = () => {
return useContext(ClipPathIdContext);
};

26
frontend/node_modules/recharts/es6/container/Layer.js generated vendored Normal file
View file

@ -0,0 +1,26 @@
var _excluded = ["children", "className"];
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); }
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; }
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; }
import * as React from 'react';
import { clsx } from 'clsx';
import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents';
/**
* Creates an SVG group element to group other SVG elements.
*
* Useful if you want to apply transformations or styles to a set of elements
* without affecting other elements in the SVG.
*
* @link https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/g
*/
export var Layer = /*#__PURE__*/React.forwardRef((props, ref) => {
var children = props.children,
className = props.className,
others = _objectWithoutProperties(props, _excluded);
var layerClass = clsx('recharts-layer', className);
return /*#__PURE__*/React.createElement("g", _extends({
className: layerClass
}, svgPropertiesAndEvents(others), {
ref: ref
}), children);
});

View file

@ -0,0 +1,95 @@
var _excluded = ["children"];
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; }
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; }
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); }
import * as React from 'react';
import { forwardRef } from 'react';
import { useChartHeight, useChartWidth } from '../context/chartLayoutContext';
import { useAccessibilityLayer } from '../context/accessibilityContext';
import { useIsPanorama } from '../context/PanoramaContext';
import { Surface } from './Surface';
import { useAppSelector } from '../state/hooks';
import { selectBrushDimensions } from '../state/selectors/brushSelectors';
import { isPositiveNumber } from '../util/isWellBehavedNumber';
import { AllZIndexPortals } from '../zIndex/ZIndexPortal';
var FULL_WIDTH_AND_HEIGHT = {
width: '100%',
height: '100%',
/*
* display: block is necessary here because the default for an SVG is display: inline,
* which in some browsers (Chrome) adds a little bit of extra space above and below the SVG
* to make space for the descender of letters like "g" and "y". This throws off the height calculation
* and causes the container to grow indefinitely on each render with responsive=true.
* Display: block removes that extra space.
*
* Interestingly, Firefox does not have this problem, but it doesn't hurt to add the style anyway.
*/
display: 'block'
};
var MainChartSurface = /*#__PURE__*/forwardRef((props, ref) => {
var width = useChartWidth();
var height = useChartHeight();
var hasAccessibilityLayer = useAccessibilityLayer();
if (!isPositiveNumber(width) || !isPositiveNumber(height)) {
return null;
}
var children = props.children,
otherAttributes = props.otherAttributes,
title = props.title,
desc = props.desc;
var tabIndex, role;
if (otherAttributes != null) {
if (typeof otherAttributes.tabIndex === 'number') {
tabIndex = otherAttributes.tabIndex;
} else {
tabIndex = hasAccessibilityLayer ? 0 : undefined;
}
if (typeof otherAttributes.role === 'string') {
role = otherAttributes.role;
} else {
role = hasAccessibilityLayer ? 'application' : undefined;
}
}
return /*#__PURE__*/React.createElement(Surface, _extends({}, otherAttributes, {
title: title,
desc: desc,
role: role,
tabIndex: tabIndex,
width: width,
height: height,
style: FULL_WIDTH_AND_HEIGHT,
ref: ref
}), children);
});
var BrushPanoramaSurface = _ref => {
var children = _ref.children;
var brushDimensions = useAppSelector(selectBrushDimensions);
if (!brushDimensions) {
return null;
}
var width = brushDimensions.width,
height = brushDimensions.height,
y = brushDimensions.y,
x = brushDimensions.x;
return /*#__PURE__*/React.createElement(Surface, {
width: width,
height: height,
x: x,
y: y
}, children);
};
export var RootSurface = /*#__PURE__*/forwardRef((_ref2, ref) => {
var children = _ref2.children,
rest = _objectWithoutProperties(_ref2, _excluded);
var isPanorama = useIsPanorama();
if (isPanorama) {
return /*#__PURE__*/React.createElement(BrushPanoramaSurface, null, /*#__PURE__*/React.createElement(AllZIndexPortals, {
isPanorama: true
}, children));
}
return /*#__PURE__*/React.createElement(MainChartSurface, _extends({
ref: ref
}, rest), /*#__PURE__*/React.createElement(AllZIndexPortals, {
isPanorama: false
}, children));
});

View file

@ -0,0 +1,41 @@
var _excluded = ["children", "width", "height", "viewBox", "className", "style", "title", "desc"];
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); }
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; }
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; }
import * as React from 'react';
import { forwardRef } from 'react';
import { clsx } from 'clsx';
import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents';
/**
* Renders an SVG element.
*
* All charts already include a Surface component, so you would not normally use this directly.
*
* @link https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg
*/
export var Surface = /*#__PURE__*/forwardRef((props, ref) => {
var children = props.children,
width = props.width,
height = props.height,
viewBox = props.viewBox,
className = props.className,
style = props.style,
title = props.title,
desc = props.desc,
others = _objectWithoutProperties(props, _excluded);
var svgView = viewBox || {
width,
height,
x: 0,
y: 0
};
var layerClass = clsx('recharts-surface', className);
return /*#__PURE__*/React.createElement("svg", _extends({}, svgPropertiesAndEvents(others), {
className: layerClass,
width: width,
height: height,
style: style,
viewBox: "".concat(svgView.x, " ").concat(svgView.y, " ").concat(svgView.width, " ").concat(svgView.height),
ref: ref
}), /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("desc", null, desc), children);
});

View file

@ -0,0 +1,64 @@
var _excluded = ["children"];
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; }
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; }
import * as React from 'react';
import { createContext, useContext, useEffect, useRef } from 'react';
import { addErrorBar, removeErrorBar, replaceErrorBar } from '../state/errorBarSlice';
import { useAppDispatch } from '../state/hooks';
import { useGraphicalItemId } from './RegisterGraphicalItemId';
var initialContextState = {
data: [],
xAxisId: 'xAxis-0',
yAxisId: 'yAxis-0',
dataPointFormatter: () => ({
x: 0,
y: 0,
value: 0
}),
errorBarOffset: 0
};
var ErrorBarContext = /*#__PURE__*/createContext(initialContextState);
export function SetErrorBarContext(props) {
var children = props.children,
rest = _objectWithoutProperties(props, _excluded);
return /*#__PURE__*/React.createElement(ErrorBarContext.Provider, {
value: rest
}, children);
}
export var useErrorBarContext = () => useContext(ErrorBarContext);
export function ReportErrorBarSettings(props) {
var dispatch = useAppDispatch();
var graphicalItemId = useGraphicalItemId();
var prevPropsRef = useRef(null);
useEffect(() => {
if (graphicalItemId == null) {
// ErrorBar outside a graphical item context does not do anything.
return;
}
if (prevPropsRef.current === null) {
dispatch(addErrorBar({
itemId: graphicalItemId,
errorBar: props
}));
} else if (prevPropsRef.current !== props) {
dispatch(replaceErrorBar({
itemId: graphicalItemId,
prev: prevPropsRef.current,
next: props
}));
}
prevPropsRef.current = props;
}, [dispatch, graphicalItemId, props]);
useEffect(() => {
return () => {
if (prevPropsRef.current != null && graphicalItemId != null) {
dispatch(removeErrorBar({
itemId: graphicalItemId,
errorBar: prevPropsRef.current
}));
prevPropsRef.current = null;
}
};
}, [dispatch, graphicalItemId]);
return null;
}

View file

@ -0,0 +1,10 @@
import * as React from 'react';
import { createContext, useContext } from 'react';
var PanoramaContext = /*#__PURE__*/createContext(null);
export var useIsPanorama = () => useContext(PanoramaContext) != null;
export var PanoramaContextProvider = _ref => {
var children = _ref.children;
return /*#__PURE__*/React.createElement(PanoramaContext.Provider, {
value: true
}, children);
};

View file

@ -0,0 +1,16 @@
import * as React from 'react';
import { createContext, useContext } from 'react';
import { useUniqueId } from '../util/useUniqueId';
var GraphicalItemIdContext = /*#__PURE__*/createContext(undefined);
export var RegisterGraphicalItemId = _ref => {
var id = _ref.id,
type = _ref.type,
children = _ref.children;
var resolvedId = useUniqueId("recharts-".concat(type), id);
return /*#__PURE__*/React.createElement(GraphicalItemIdContext.Provider, {
value: resolvedId
}, children(resolvedId));
};
export function useGraphicalItemId() {
return useContext(GraphicalItemIdContext);
}

View file

@ -0,0 +1,5 @@
import { useAppSelector } from '../state/hooks';
export var useAccessibilityLayer = () => {
var _useAppSelector;
return (_useAppSelector = useAppSelector(state => state.rootProps.accessibilityLayer)) !== null && _useAppSelector !== void 0 ? _useAppSelector : true;
};

View file

@ -0,0 +1,2 @@
import { createContext } from 'react';
export var BrushUpdateDispatchContext = /*#__PURE__*/createContext(() => {});

View file

@ -0,0 +1,73 @@
import { useEffect } from 'react';
import { setChartData, setComputedData } from '../state/chartDataSlice';
import { useAppDispatch, useAppSelector } from '../state/hooks';
import { useIsPanorama } from './PanoramaContext';
export var ChartDataContextProvider = props => {
var chartData = props.chartData;
var dispatch = useAppDispatch();
var isPanorama = useIsPanorama();
useEffect(() => {
if (isPanorama) {
// Panorama mode reuses data from the main chart, so we must not overwrite it here.
return () => {
// there is nothing to clean up
};
}
dispatch(setChartData(chartData));
return () => {
dispatch(setChartData(undefined));
};
}, [chartData, dispatch, isPanorama]);
return null;
};
export var SetComputedData = props => {
var computedData = props.computedData;
var dispatch = useAppDispatch();
useEffect(() => {
dispatch(setComputedData(computedData));
return () => {
dispatch(setChartData(undefined));
};
}, [computedData, dispatch]);
return null;
};
var selectChartData = state => state.chartData.chartData;
/**
* "data" is the data of the chart - it has no type because this part of recharts is very flexible.
* Basically it's an array of "something" and then there's the dataKey property in various places
* that's meant to pull other things away from the data.
*
* Some charts have `data` defined on the chart root, and they will return the array through this hook.
* For example: <ComposedChart data={data} />.
*
* Other charts, such as Pie, have data defined on individual graphical elements.
* These charts will return `undefined` through this hook, and you need to read the data from children.
* For example: <PieChart><Pie data={data} />
*
* Some charts also allow setting both - data on the parent, and data on the children at the same time!
* However, this particular selector will only return the ones defined on the parent.
*
* @deprecated use one of the other selectors instead - which one, depends on how do you identify the applicable graphical items.
*
* @return data array for some charts and undefined for other
*/
export var useChartData = () => useAppSelector(selectChartData);
var selectDataIndex = state => {
var _state$chartData = state.chartData,
dataStartIndex = _state$chartData.dataStartIndex,
dataEndIndex = _state$chartData.dataEndIndex;
return {
startIndex: dataStartIndex,
endIndex: dataEndIndex
};
};
/**
* startIndex and endIndex are data boundaries, set through Brush.
*
* @return object with startIndex and endIndex
*/
export var useDataIndex = () => {
return useAppSelector(selectDataIndex);
};

View file

@ -0,0 +1,242 @@
import { useEffect } from 'react';
import { useAppDispatch, useAppSelector } from '../state/hooks';
import { setChartSize, setMargin } from '../state/layoutSlice';
import { selectChartOffsetInternal, selectChartViewBox } from '../state/selectors/selectChartOffsetInternal';
import { selectChartHeight, selectChartWidth } from '../state/selectors/containerSelectors';
import { useIsPanorama } from './PanoramaContext';
import { selectBrushDimensions, selectBrushSettings } from '../state/selectors/brushSelectors';
import { useResponsiveContainerContext } from '../component/ResponsiveContainer';
import { isPositiveNumber } from '../util/isWellBehavedNumber';
export function cartesianViewBoxToTrapezoid(box) {
if (!box) {
return undefined;
}
return {
x: box.x,
y: box.y,
upperWidth: 'upperWidth' in box ? box.upperWidth : box.width,
lowerWidth: 'lowerWidth' in box ? box.lowerWidth : box.width,
width: box.width,
height: box.height
};
}
export var useViewBox = () => {
var _useAppSelector;
var panorama = useIsPanorama();
var rootViewBox = useAppSelector(selectChartViewBox);
var brushDimensions = useAppSelector(selectBrushDimensions);
var brushPadding = (_useAppSelector = useAppSelector(selectBrushSettings)) === null || _useAppSelector === void 0 ? void 0 : _useAppSelector.padding;
if (!panorama || !brushDimensions || !brushPadding) {
return rootViewBox;
}
return {
width: brushDimensions.width - brushPadding.left - brushPadding.right,
height: brushDimensions.height - brushPadding.top - brushPadding.bottom,
x: brushPadding.left,
y: brushPadding.top
};
};
var manyComponentsThrowErrorsIfOffsetIsUndefined = {
top: 0,
bottom: 0,
left: 0,
right: 0,
width: 0,
height: 0,
brushBottom: 0
};
/**
* For internal use only. If you want this information, `import { useOffset } from 'recharts'` instead.
*
* Returns the offset of the chart in pixels.
*
* @returns {ChartOffsetInternal} The offset of the chart in pixels, or a default value if not in a chart context.
*/
export var useOffsetInternal = () => {
var _useAppSelector2;
return (_useAppSelector2 = useAppSelector(selectChartOffsetInternal)) !== null && _useAppSelector2 !== void 0 ? _useAppSelector2 : manyComponentsThrowErrorsIfOffsetIsUndefined;
};
/**
* Returns the width of the chart in pixels.
*
* If you are using chart with hardcoded `width` prop, then the width returned will be the same
* as the `width` prop on the main chart element.
*
* If you are using a chart with a `ResponsiveContainer`, the width will be the size of the chart
* as the ResponsiveContainer has decided it would be.
*
* If the chart has any axes or legend, the `width` will be the size of the chart
* including the axes and legend. Meaning: adding axes and legend will not change the width.
*
* The dimensions do not scale, meaning as user zoom in and out, the width number will not change
* as the chart gets visually larger or smaller.
*
* Returns `undefined` if used outside a chart context.
*
* @returns {number | undefined} The width of the chart in pixels, or `undefined` if not in a chart context.
*/
export var useChartWidth = () => {
return useAppSelector(selectChartWidth);
};
/**
* Returns the height of the chart in pixels.
*
* If you are using chart with hardcoded `height` props, then the height returned will be the same
* as the `height` prop on the main chart element.
*
* If you are using a chart with a `ResponsiveContainer`, the height will be the size of the chart
* as the ResponsiveContainer has decided it would be.
*
* If the chart has any axes or legend, the `height` will be the size of the chart
* including the axes and legend. Meaning: adding axes and legend will not change the height.
*
* The dimensions do not scale, meaning as user zoom in and out, the height number will not change
* as the chart gets visually larger or smaller.
*
* Returns `undefined` if used outside a chart context.
*
* @returns {number | undefined} The height of the chart in pixels, or `undefined` if not in a chart context.
*/
export var useChartHeight = () => {
return useAppSelector(selectChartHeight);
};
/**
* Margin is the empty space around the chart. Excludes axes and legend and brushes and the like.
* This is declared by the user in the chart props.
* If you are interested in the space occupied by axes, legend, or brushes,
* use {@link useOffset} instead, which also includes calculated widths and heights of axes and legends.
*
* Returns `undefined` if used outside a chart context.
*
* @returns {Margin | undefined} The margin of the chart in pixels, or `undefined` if not in a chart context.
*/
export var useMargin = () => {
return useAppSelector(state => state.layout.margin);
};
export var selectChartLayout = state => state.layout.layoutType;
/**
* Returns the chart layout as configured by the chart.
*
* Cartesian charts use `horizontal` or `vertical`.
* Polar charts use `centric` or `radial`.
*
* Returns `undefined` if used outside a chart context.
*
* @deprecated this hook mixes cartesian and polar layouts together; prefer to use {@link useCartesianChartLayout} and {@link usePolarChartLayout} instead, which give you better type safety.
*
* @returns {LayoutType | undefined} The chart layout, or `undefined` if not in a chart context.
*
* @since 3.9
*/
export var useChartLayout = () => useAppSelector(selectChartLayout);
/**
* Returns the chart layout only for Cartesian charts.
*
* Returns `horizontal` or `vertical` for Cartesian charts.
* Returns `undefined` for non-Cartesian charts or outside chart context.
*
* @since 3.9
*
* @returns {CartesianLayout | undefined} The Cartesian chart layout, or `undefined`.
*/
export var useCartesianChartLayout = () => {
var layout = useChartLayout();
if (layout === 'horizontal' || layout === 'vertical') {
return layout;
}
return undefined;
};
export var selectPolarChartLayout = state => {
var layout = state.layout.layoutType;
if (layout === 'centric' || layout === 'radial') {
return layout;
}
return undefined;
};
/**
* Returns the chart layout only for Polar charts.
*
* Returns `centric` or `radial` for Polar charts.
* Returns `undefined` for non-Polar charts or outside chart context.
*
* @returns {PolarLayout | undefined} The Polar chart layout, or `undefined`.
*
* @since 3.9
*/
export var usePolarChartLayout = () => {
return useAppSelector(selectPolarChartLayout);
};
/**
* Returns true if the component is rendered inside a chart context.
* Some components may be used both inside and outside of charts,
* and this hook allows them to determine if they are in a chart context or not.
*
* Other selectors may return undefined when used outside a chart context,
* or undefined when inside a chart, but without relevant data.
* This hook provides a more explicit way to check for chart context.
*
* @returns {boolean} True if in chart context, false otherwise.
*/
export var useIsInChartContext = () => {
/*
* All charts provide a layout type in the chart context.
* If we have a layout type, we are in a chart context.
*/
var layout = useChartLayout();
return layout !== undefined;
};
export var ReportChartSize = props => {
var dispatch = useAppDispatch();
/*
* Skip dispatching properties in panorama chart for two reasons:
* 1. The root chart should be deciding on these properties, and
* 2. Brush reads these properties from redux store, and so they must remain stable
* to avoid circular dependency and infinite re-rendering.
*/
var isPanorama = useIsPanorama();
var widthFromProps = props.width,
heightFromProps = props.height;
var responsiveContainerCalculations = useResponsiveContainerContext();
var width = widthFromProps;
var height = heightFromProps;
if (responsiveContainerCalculations) {
/*
* In case we receive width and height from ResponsiveContainer,
* we will always prefer those.
* Only in case ResponsiveContainer does not provide width or height,
* we will fall back to the explicitly provided width and height.
*
* This to me feels backwards - we should allow override by the more specific props on individual charts, right?
* But this is 3.x behaviour, so let's keep it for backwards compatibility.
*
* We can change this in 4.x if we want to.
*/
width = responsiveContainerCalculations.width > 0 ? responsiveContainerCalculations.width : widthFromProps;
height = responsiveContainerCalculations.height > 0 ? responsiveContainerCalculations.height : heightFromProps;
}
useEffect(() => {
if (!isPanorama && isPositiveNumber(width) && isPositiveNumber(height)) {
dispatch(setChartSize({
width,
height
}));
}
}, [dispatch, isPanorama, width, height]);
return null;
};
export var ReportChartMargin = _ref => {
var margin = _ref.margin;
var dispatch = useAppDispatch();
useEffect(() => {
dispatch(setMargin(margin));
}, [dispatch, margin]);
return null;
};

View file

@ -0,0 +1,10 @@
import { useAppSelector } from '../state/hooks';
import { selectLegendPayload } from '../state/selectors/legendSelectors';
/**
* Use this hook in Legend, or anywhere else where you want to read the current Legend items.
* @return all Legend items ready to be rendered
*/
export function useLegendPayload() {
return useAppSelector(selectLegendPayload);
}

View file

@ -0,0 +1,3 @@
import { createContext, useContext } from 'react';
export var LegendPortalContext = /*#__PURE__*/createContext(null);
export var useLegendPortal = () => useContext(LegendPortalContext);

View file

@ -0,0 +1,39 @@
import { useAppDispatch } from '../state/hooks';
import { mouseLeaveItem, setActiveClickItemIndex, setActiveMouseOverItemIndex } from '../state/tooltipSlice';
/**
* Some graphical items choose to provide more information to the tooltip
* and some do not.
*/
export var useMouseEnterItemDispatch = (onMouseEnterFromProps, dataKey, graphicalItemId) => {
var dispatch = useAppDispatch();
return (data, index) => event => {
onMouseEnterFromProps === null || onMouseEnterFromProps === void 0 || onMouseEnterFromProps(data, index, event);
dispatch(setActiveMouseOverItemIndex({
activeIndex: String(index),
activeDataKey: dataKey,
activeCoordinate: data.tooltipPosition,
activeGraphicalItemId: graphicalItemId
}));
};
};
export var useMouseLeaveItemDispatch = onMouseLeaveFromProps => {
var dispatch = useAppDispatch();
return (data, index) => event => {
onMouseLeaveFromProps === null || onMouseLeaveFromProps === void 0 || onMouseLeaveFromProps(data, index, event);
dispatch(mouseLeaveItem());
};
};
export var useMouseClickItemDispatch = (onMouseClickFromProps, dataKey, graphicalItemId) => {
var dispatch = useAppDispatch();
return (data, index) => event => {
onMouseClickFromProps === null || onMouseClickFromProps === void 0 || onMouseClickFromProps(data, index, event);
dispatch(setActiveClickItemIndex({
activeIndex: String(index),
activeDataKey: dataKey,
activeCoordinate: data.tooltipPosition,
activeGraphicalItemId: graphicalItemId
}));
};
};

View file

@ -0,0 +1,3 @@
import { createContext, useContext } from 'react';
export var TooltipPortalContext = /*#__PURE__*/createContext(null);
export var useTooltipPortal = () => useContext(TooltipPortalContext);

View file

@ -0,0 +1,21 @@
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
import { useAppSelector } from '../state/hooks';
import { getBandSizeOfAxis } from '../util/ChartUtils';
import { selectTooltipAxis } from '../state/selectors/axisSelectors';
import { selectTooltipAxisScale, selectTooltipAxisTicks } from '../state/selectors/tooltipSelectors';
export var useTooltipAxis = () => useAppSelector(selectTooltipAxis);
export var useTooltipAxisBandSize = () => {
var tooltipAxis = useTooltipAxis();
var tooltipTicks = useAppSelector(selectTooltipAxisTicks);
var tooltipAxisScale = useAppSelector(selectTooltipAxisScale);
if (!tooltipAxis || !tooltipAxisScale) {
return getBandSizeOfAxis(undefined, tooltipTicks);
}
return getBandSizeOfAxis(_objectSpread(_objectSpread({}, tooltipAxis), {}, {
scale: tooltipAxisScale
}), tooltipTicks);
};

487
frontend/node_modules/recharts/es6/hooks.js generated vendored Normal file
View file

@ -0,0 +1,487 @@
import { defaultAxisId } from './state/cartesianAxisSlice';
import { selectAxisDomain, selectAxisInverseScale, selectAxisInverseDataSnapScale, selectAxisInverseTickSnapScale, selectAxisScale, selectAxisWithScale, selectRenderedTicksOfAxis } from './state/selectors/axisSelectors';
import { useAppSelector } from './state/hooks';
import { useIsPanorama } from './context/PanoramaContext';
import { selectActiveLabel, selectActiveTooltipCoordinate, selectActiveTooltipDataPoints, selectIsTooltipActive } from './state/selectors/tooltipSelectors';
import { selectChartOffset } from './state/selectors/selectChartOffset';
import { selectPlotArea } from './state/selectors/selectPlotArea';
export var useXAxis = xAxisId => {
var isPanorama = useIsPanorama();
return useAppSelector(state => selectAxisWithScale(state, 'xAxis', xAxisId, isPanorama));
};
export var useYAxis = yAxisId => {
var isPanorama = useIsPanorama();
return useAppSelector(state => selectAxisWithScale(state, 'yAxis', yAxisId, isPanorama));
};
/**
* A function that converts data values to pixel coordinates.
* @param value - The data value to convert (number, string, or category).
* @param options - Optional configuration for banded scales.
* @param options.position - Position within a band: 'start', 'middle', or 'end'.
* @returns The pixel coordinate, or `undefined` if the value is not in the domain.
*/
/**
* A function that converts pixel coordinates back to data values.
* @param pixelValue - The pixel coordinate to convert.
* @returns The closest data value in the domain.
*/
/**
* Returns a function to convert data values to pixel coordinates for an {@link XAxis}.
*
* This is useful for positioning annotations, custom shapes, or other elements
* at specific data points on the chart.
*
* This hook must be used within a chart context (inside a {@link LineChart}, {@link BarChart}, etc.).
* Returns `undefined` if used outside a chart context, or if the axes don't exist.
*
* @example
* ```tsx
* const xScale = useXAxisScale();
* if (xScale) {
* const pixelX = xScale('Page A'); // Returns the pixel x-coordinate for 'Page A'
* }
* ```
*
* @param xAxisId The `xAxisId` of the XAxis. Defaults to `0` if not provided.
* @returns A scale function that maps data values to pixel coordinates, or `undefined`.
* @since 3.8
*/
export var useXAxisScale = function useXAxisScale() {
var xAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultAxisId;
var isPanorama = useIsPanorama();
var scale = useAppSelector(state => selectAxisScale(state, 'xAxis', xAxisId, isPanorama));
return scale === null || scale === void 0 ? void 0 : scale.map;
};
/**
* Returns a function to convert data values to pixel coordinates for a {@link YAxis}.
*
* This is useful for positioning annotations, custom shapes, or other elements
* at specific data points on the chart.
*
* This hook must be used within a chart context (inside a {@link LineChart}, {@link BarChart}, etc.).
* Returns `undefined` if used outside a chart context, or if the axes don't exist.
*
* @example
* ```tsx
* const yScale = useYAxisScale();
* if (yScale) {
* const pixelY = yScale(1500); // Returns the pixel y-coordinate for value 1500
* }
* ```
*
* @param yAxisId The `yAxisId` of the YAxis. Defaults to `0` if not provided.
* @returns A scale function that maps data values to pixel coordinates, or `undefined`.
* @since 3.8
*/
export var useYAxisScale = function useYAxisScale() {
var yAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultAxisId;
var isPanorama = useIsPanorama();
var scale = useAppSelector(state => selectAxisScale(state, 'yAxis', yAxisId, isPanorama));
return scale === null || scale === void 0 ? void 0 : scale.map;
};
/**
* Returns a function to convert pixel coordinates back to data values for an {@link XAxis}.
*
* This is useful for implementing interactions like click-to-add-annotation,
* drag interactions, or tooltips that need to determine what data point
* corresponds to a mouse position.
*
* For continuous (numerical) scales, returns an interpolated value.
* For categorical scales, returns the closest category in the domain - which is the same behaviour as {@link useXAxisInverseDataSnapScale}.
*
* This hook must be used within a chart context (inside a {@link LineChart}, {@link BarChart}, etc.).
* Returns `undefined` if used outside a chart context, or if the axes don't exist.
*
* @example
* ```tsx
* const xInverseScale = useXAxisInverseScale();
* if (xInverseScale) {
* const dataValue = xInverseScale(150); // Returns the data value at pixel x=150
* }
* ```
*
* @param xAxisId The `xAxisId` of the XAxis. Defaults to `0` if not provided.
* @returns An inverse scale function that maps pixel coordinates to data values, or `undefined`.
* @since 3.8
*/
export var useXAxisInverseScale = function useXAxisInverseScale() {
var xAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultAxisId;
var isPanorama = useIsPanorama();
return useAppSelector(state => selectAxisInverseScale(state, 'xAxis', xAxisId, isPanorama));
};
/**
* Returns a function to convert pixel coordinates back to data values for an {@link XAxis},
* but snapping to the closest data point.
*
* This is similar to {@link useXAxisInverseScale}, but instead of returning the exact data value
* at the pixel position (interpolation), it returns the value of the closest data point.
*
* This is useful for implementing interactions where you want to select the closest data point
* rather than an exact value or a tick.
*
* This hook must be used within a chart context (inside a {@link LineChart}, {@link BarChart}, etc.).
* Returns `undefined` if used outside a chart context, or if the axes don't exist.
*
* @param xAxisId The `xAxisId` of the XAxis. Defaults to `0` if not provided.
* @returns An inverse scale function that maps pixel coordinates to the closest data value, or `undefined`.
* @since 3.8
*/
export var useXAxisInverseDataSnapScale = function useXAxisInverseDataSnapScale() {
var xAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultAxisId;
var isPanorama = useIsPanorama();
return useAppSelector(state => selectAxisInverseDataSnapScale(state, 'xAxis', xAxisId, isPanorama));
};
/**
* Returns a function to convert pixel coordinates back to data values for an {@link XAxis},
* but snapping to the closest axis tick.
*
* This is similar to {@link useXAxisInverseScale}, but instead of returning the exact data value
* at the pixel position (interpolation), it returns the value of the closest tick.
*
* This is useful for implementing interactions where you want to select the closest tick
* rather than an exact value or a data point.
*
* This hook must be used within a chart context (inside a {@link LineChart}, {@link BarChart}, etc.).
* Returns `undefined` if used outside a chart context, or if the axes don't exist.
*
* @param xAxisId The `xAxisId` of the XAxis. Defaults to `0` if not provided.
* @returns An inverse scale function that maps pixel coordinates to the closest tick value, or `undefined`.
* @since 3.8
*/
export var useXAxisInverseTickSnapScale = function useXAxisInverseTickSnapScale() {
var xAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultAxisId;
return useAppSelector(state => selectAxisInverseTickSnapScale(state, 'xAxis', xAxisId));
};
/**
* Returns a function to convert pixel coordinates back to data values for a {@link YAxis}.
*
* This is useful for implementing interactions like click-to-add-annotation,
* drag interactions, or tooltips that need to determine what data point
* corresponds to a mouse position.
*
* For continuous (numerical) scales, returns an interpolated value.
* For categorical scales, returns the closest category in the domain - which is the same behaviour as {@link useYAxisInverseDataSnapScale}.
*
* This hook must be used within a chart context (inside a {@link LineChart}, {@link BarChart}, etc.).
* Returns `undefined` if used outside a chart context, or if the axes don't exist.
*
* @example
* ```tsx
* const yInverseScale = useYAxisInverseScale();
* if (yInverseScale) {
* const dataValue = yInverseScale(200); // Returns the data value at pixel y=200
* }
* ```
*
* @param yAxisId The `yAxisId` of the YAxis. Defaults to `0` if not provided.
* @returns An inverse scale function that maps pixel coordinates to data values, or `undefined`.
* @since 3.8
*/
export var useYAxisInverseScale = function useYAxisInverseScale() {
var yAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultAxisId;
var isPanorama = useIsPanorama();
return useAppSelector(state => selectAxisInverseScale(state, 'yAxis', yAxisId, isPanorama));
};
/**
* Returns a function to convert pixel coordinates back to data values for a {@link YAxis},
* but snapping to the closest data point.
*
* This is similar to {@link useYAxisInverseScale}, but instead of returning the exact data value
* at the pixel position (interpolation), it returns the value of the closest data point.
*
* This is useful for implementing interactions where you want to select the closest data point
* rather than an exact value or a tick.
*
* This hook must be used within a chart context (inside a {@link LineChart}, {@link BarChart}, etc.).
* Returns `undefined` if used outside a chart context, or if the axes don't exist.
*
* @param yAxisId The `yAxisId` of the YAxis. Defaults to `0` if not provided.
* @returns An inverse scale function that maps pixel coordinates to the closest data value, or `undefined`.
* @since 3.8
*/
export var useYAxisInverseDataSnapScale = function useYAxisInverseDataSnapScale() {
var yAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultAxisId;
var isPanorama = useIsPanorama();
return useAppSelector(state => selectAxisInverseDataSnapScale(state, 'yAxis', yAxisId, isPanorama));
};
/**
* Returns a function to convert pixel coordinates back to data values for a {@link YAxis},
* but snapping to the closest axis tick.
*
* This is similar to {@link useYAxisInverseScale}, but instead of returning the exact data value
* at the pixel position (interpolation), it returns the value of the closest tick.
*
* This is useful for implementing interactions where you want to select the closest tick
* rather than an exact value or a data point.
*
* This hook must be used within a chart context (inside a {@link LineChart}, {@link BarChart}, etc.).
* Returns `undefined` if used outside a chart context, or if the axes don't exist.
*
* @param yAxisId The `yAxisId` of the YAxis. Defaults to `0` if not provided.
* @returns An inverse scale function that maps pixel coordinates to the closest tick value, or `undefined`.
* @since 3.8
*/
export var useYAxisInverseTickSnapScale = function useYAxisInverseTickSnapScale() {
var yAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultAxisId;
return useAppSelector(state => selectAxisInverseTickSnapScale(state, 'yAxis', yAxisId));
};
/**
* Returns the ticks of an {@link XAxis}.
*
* This hook is useful for accessing the calculated ticks of an XAxis.
* The ticks are the same as the ones rendered by the XAxis component.
*
* @param xAxisId The `xAxisId` of the XAxis. Defaults to `0` if not provided.
* @returns An array of ticks, or `undefined` if the axis doesn't exist or hasn't been calculated yet.
* @since 3.8
*/
export var useXAxisTicks = function useXAxisTicks() {
var xAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultAxisId;
return useAppSelector(state => selectRenderedTicksOfAxis(state, 'xAxis', xAxisId));
};
/**
* Returns the ticks of a {@link YAxis}.
*
* This hook is useful for accessing the calculated ticks of a YAxis.
* The ticks are the same as the ones rendered by the YAxis component.
*
* @param yAxisId The `yAxisId` of the YAxis. Defaults to `0` if not provided.
* @returns An array of ticks, or `undefined` if the axis doesn't exist or hasn't been calculated yet.
* @since 3.8
*/
export var useYAxisTicks = function useYAxisTicks() {
var yAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultAxisId;
return useAppSelector(state => selectRenderedTicksOfAxis(state, 'yAxis', yAxisId));
};
/**
* Data point with x and y values that can be converted to pixel coordinates.
* The x and y values should be in the same format as your chart data.
*/
/**
* Converts a data point (in data coordinates) to pixel coordinates.
*
* This hook is useful for positioning annotations, custom shapes, or other elements
* at specific data points on the chart. It uses the axis scales to convert
* data values to their corresponding pixel positions within the chart area.
*
* This hook must be used within a chart context (inside a {@link LineChart}, {@link BarChart}, etc.).
* Returns `undefined` if used outside a chart context, or if the axes don't exist, or if the data point
* cannot be converted (e.g., if the data values are outside the axis domains).
*
* This is a convenience hook that combines {@link useXAxisScale} and {@link useYAxisScale} together in a single call.
*
* @example
* ```tsx
* // Position a marker at data point { x: 'Page C', y: 2500 }
* const pixelCoords = useCartesianScale({ x: 'Page C', y: 2500 });
* if (pixelCoords) {
* return <circle cx={pixelCoords.x} cy={pixelCoords.y} r={5} fill="red" />;
* }
* ```
*
* @param dataPoint The data point with x and y values in data coordinates.
* @param xAxisId The `xAxisId` of the X-axis. Defaults to `0` if not provided.
* @param yAxisId The `yAxisId` of the Y-axis. Defaults to `0` if not provided.
* @returns The pixel x,y coordinates, or `undefined` if conversion is not possible.
* @since 3.8
*/
export var useCartesianScale = function useCartesianScale(dataPoint) {
var xAxisId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultAxisId;
var yAxisId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultAxisId;
var xScale = useXAxisScale(xAxisId);
var yScale = useYAxisScale(yAxisId);
if (xScale == null || yScale == null) {
return undefined;
}
var pixelX = xScale(dataPoint.x);
var pixelY = yScale(dataPoint.y);
if (pixelX == null || pixelY == null) {
return undefined;
}
return {
x: pixelX,
y: pixelY
};
};
/**
* Returns the active tooltip label. The label is one of the values from the chart data,
* and is used to display in the tooltip content.
*
* Returns undefined if there is no active user interaction or if used outside a chart context
*
* @returns ActiveLabel
* @since 3.0
*/
export var useActiveTooltipLabel = () => {
return useAppSelector(selectActiveLabel);
};
/**
* Returns the offset of the chart in pixels.
*
* Offset defines the blank space between the chart and the plot area.
* This blank space is occupied by supporting elements like axes, legends, and brushes.
*
* The offset includes:
*
* - Margins
* - Width and height of the axes
* - Width and height of the legend
* - Brush height
*
* If you are interested in the margin alone, use {@link useMargin} instead.
*
* The offset is independent of charts position on the page, meaning it does not change as the chart is scrolled or resized.
*
* It is also independent of the scale and zoom, meaning that as the user zooms in and out,
* the numbers will not change as the chart gets visually larger or smaller.
*
* This hook must be used within a chart context (inside a `<LineChart>`, `<BarChart>`, etc.).
* This hook returns `undefined` if used outside a chart context.
*
* @returns Offset of the chart in pixels, or undefined if used outside a chart context.
* @since 3.1
*/
export var useOffset = () => {
return useAppSelector(selectChartOffset);
};
/**
* Plot area is the area where the actual chart data is rendered.
* This means: bars, lines, scatter points, etc.
*
* The plot area is calculated based on the chart dimensions and the offset.
*
* Plot area `width` and `height` are the dimensions in pixels;
* `x` and `y` are the coordinates of the top-left corner of the plot area relative to the chart container.
*
* They are also independent of the scale and zoom, meaning that as the user zooms in and out,
* the plot area dimensions will not change as the chart gets visually larger or smaller.
*
* This hook must be used within a chart context (inside a `<LineChart>`, `<BarChart>`, etc.).
* This hook returns `undefined` if used outside a chart context.
*
* @returns Plot area of the chart in pixels, or undefined if used outside a chart context.
* @since 3.1
*/
export var usePlotArea = () => {
return useAppSelector(selectPlotArea);
};
/**
* Returns the currently active data points being displayed in the Tooltip.
* Active means that it is currently visible; this hook will return `undefined` if there is no current interaction.
*
* This follows the `<Tooltip />` props, if the Tooltip element is present in the chart.
* If there is no `<Tooltip />` then this hook will follow the default Tooltip props.
*
* Data point is whatever you pass as an input to the chart using the `data={}` prop.
*
* This returns an array because a chart can have multiple graphical items in it (multiple Lines for example)
* and tooltip with `shared={true}` will display all items at the same time.
*
* Returns undefined when used outside a chart context.
*
* @returns Data points that are currently visible in a Tooltip
*
* @since 3.1
*/
export var useActiveTooltipDataPoints = () => {
return useAppSelector(selectActiveTooltipDataPoints);
};
/**
* Returns the calculated domain of an X-axis.
*
* The domain can be numerical: `[min, max]`, or categorical: `['a', 'b', 'c']`.
*
* The type of the domain is defined by the `type` prop of the XAxis.
*
* The values of the domain are calculated based on the data and the `dataKey` of the axis.
*
* If the chart has a Brush, the domain will be filtered to the brushed indexes if the hook is used outside a Brush context,
* and the full domain will be returned if the hook is used inside a Brush context.
*
* @param xAxisId The `xAxisId` of the X-axis. Defaults to `0` if not provided.
* @returns The domain of the X-axis, or `undefined` if it cannot be calculated or if used outside a chart context.
* @since 3.2
*/
export var useXAxisDomain = function useXAxisDomain() {
var xAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultAxisId;
var isPanorama = useIsPanorama();
return useAppSelector(state => selectAxisDomain(state, 'xAxis', xAxisId, isPanorama));
};
/**
* Returns the calculated domain of a Y-axis.
*
* The domain can be numerical: `[min, max]`, or categorical: `['a', 'b', 'c']`.
*
* The type of the domain is defined by the `type` prop of the YAxis.
*
* The values of the domain are calculated based on the data and the `dataKey` of the axis.
*
* Does not interact with Brushes, as Y-axes do not support brushing.
*
* @param yAxisId The `yAxisId` of the Y-axis. Defaults to `0` if not provided.
* @returns The domain of the Y-axis, or `undefined` if it cannot be calculated or if used outside a chart context.
* @since 3.2
*/
export var useYAxisDomain = function useYAxisDomain() {
var yAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultAxisId;
var isPanorama = useIsPanorama();
return useAppSelector(state => selectAxisDomain(state, 'yAxis', yAxisId, isPanorama));
};
/**
* Returns true if the {@link Tooltip} is currently active (visible).
*
* Returns false if the Tooltip is not active or if used outside a chart context.
*
* Recharts only allows one Tooltip per chart, so this hook does not take any parameters.
* Weird things may happen if you have multiple Tooltip components in the same chart so please don't do that.
*
* @returns {boolean} True if the Tooltip is active, false otherwise.
* @since 3.7
*/
export var useIsTooltipActive = () => {
var _useAppSelector;
return (_useAppSelector = useAppSelector(selectIsTooltipActive)) !== null && _useAppSelector !== void 0 ? _useAppSelector : false;
};
/**
* Returns the Cartesian `x` + `y` coordinates of the active {@link Tooltip}.
*
* Returns undefined if there is no active user interaction or if used outside a chart context.
*
* Recharts only allows one Tooltip per chart, so this hook does not take any parameters.
* Weird things may happen if you have multiple Tooltip components in the same chart so please don't do that.
*
* @returns {Coordinate | undefined} The coordinate of the active Tooltip, or undefined.
* @since 3.7
*/
export var useActiveTooltipCoordinate = () => {
var coordinate = useAppSelector(selectActiveTooltipCoordinate);
if (coordinate == null) {
return undefined;
}
return {
x: coordinate.x,
y: coordinate.y
};
};

76
frontend/node_modules/recharts/es6/index.js generated vendored Normal file
View file

@ -0,0 +1,76 @@
// "export type" declarations on separate lines are in use
// to workaround babel issue(s) 11465 12578
//
// see https://github.com/babel/babel/issues/11464#issuecomment-617606898
export { Surface } from './container/Surface';
export { Layer } from './container/Layer';
export { Legend } from './component/Legend';
export { DefaultLegendContent } from './component/DefaultLegendContent';
export { Tooltip } from './component/Tooltip';
export { DefaultTooltipContent } from './component/DefaultTooltipContent';
export { ResponsiveContainer } from './component/ResponsiveContainer';
export { Cell } from './component/Cell';
export { Text } from './component/Text';
export { Label } from './component/Label';
export { LabelList } from './component/LabelList';
export { Customized } from './component/Customized';
export { Sector } from './shape/Sector';
export { Curve } from './shape/Curve';
export { Rectangle } from './shape/Rectangle';
export { Polygon } from './shape/Polygon';
export { Dot } from './shape/Dot';
export { Cross } from './shape/Cross';
export { Symbols } from './shape/Symbols';
export { PolarGrid } from './polar/PolarGrid';
export { PolarRadiusAxis } from './polar/PolarRadiusAxis';
export { PolarAngleAxis } from './polar/PolarAngleAxis';
export { Pie } from './polar/Pie';
export { Radar } from './polar/Radar';
export { RadialBar } from './polar/RadialBar';
export { Brush } from './cartesian/Brush';
export { ReferenceLine } from './cartesian/ReferenceLine';
export { ReferenceDot } from './cartesian/ReferenceDot';
export { ReferenceArea } from './cartesian/ReferenceArea';
export { CartesianAxis } from './cartesian/CartesianAxis';
export { CartesianGrid } from './cartesian/CartesianGrid';
export { Line } from './cartesian/Line';
export { Area } from './cartesian/Area';
export { Bar } from './cartesian/Bar';
export { BarStack } from './cartesian/BarStack';
export { Scatter } from './cartesian/Scatter';
export { XAxis } from './cartesian/XAxis';
export { YAxis } from './cartesian/YAxis';
export { ZAxis } from './cartesian/ZAxis';
export { ErrorBar } from './cartesian/ErrorBar';
export { LineChart } from './chart/LineChart';
export { BarChart } from './chart/BarChart';
export { PieChart } from './chart/PieChart';
export { Treemap } from './chart/Treemap';
export { Sankey } from './chart/Sankey';
export { RadarChart } from './chart/RadarChart';
export { ScatterChart } from './chart/ScatterChart';
export { AreaChart } from './chart/AreaChart';
export { RadialBarChart } from './chart/RadialBarChart';
export { ComposedChart } from './chart/ComposedChart';
export { SunburstChart } from './chart/SunburstChart';
export { Funnel } from './cartesian/Funnel';
export { FunnelChart } from './chart/FunnelChart';
export { Trapezoid } from './shape/Trapezoid';
export { Global } from './util/Global';
export { matchByIndex, matchByDataKey, matchAppend } from './animation/matchBy';
export { JavascriptAnimation, CSSTransitionAnimation } from './animation/AnimationHandle';
export { AnimationControllerProvider } from './animation/useAnimationController';
export { AreaRevealShape } from './cartesian/AreaRevealShape';
export { LineDrawShape } from './cartesian/LineDrawShape';
export { ZIndexLayer } from './zIndex/ZIndexLayer';
export { DefaultZIndexes } from './zIndex/DefaultZIndexes';
/** export getNiceTickValues so this can be used as a replacement for what is in recharts-scale */
export { getNiceTickValues } from './util/scale/getNiceTickValues';
export { useActiveTooltipLabel, useOffset, usePlotArea, useActiveTooltipDataPoints, useXAxisDomain, useYAxisDomain, useIsTooltipActive, useActiveTooltipCoordinate, useXAxisScale, useYAxisScale, useXAxisInverseScale, useXAxisInverseDataSnapScale, useXAxisInverseTickSnapScale, useYAxisInverseScale, useYAxisInverseDataSnapScale, useYAxisInverseTickSnapScale, useXAxisTicks, useYAxisTicks, useCartesianScale } from './hooks';
export { useChartHeight, useChartWidth, useMargin, useChartLayout, useCartesianChartLayout, usePolarChartLayout } from './context/chartLayoutContext';
export { getRelativeCoordinate } from './util/getRelativeCoordinate';
export { createHorizontalChart, createVerticalChart } from './util/createCartesianCharts';
export { createCentricChart, createRadialChart } from './util/createPolarCharts';
export { interpolate } from './util/DataUtils';

639
frontend/node_modules/recharts/es6/polar/Pie.js generated vendored Normal file
View file

@ -0,0 +1,639 @@
var _excluded = ["key"],
_excluded2 = ["onMouseEnter", "onClick", "onMouseLeave"],
_excluded3 = ["id"],
_excluded4 = ["id"];
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); }
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; }
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; }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
import * as React from 'react';
import { useMemo, useRef } from 'react';
import get from 'es-toolkit/compat/get';
import { clsx } from 'clsx';
import { selectPieLegend, selectPieSectors } from '../state/selectors/pieSelectors';
import { useAppSelector } from '../state/hooks';
import { Layer } from '../container/Layer';
import { Curve } from '../shape/Curve';
import { Sector } from '../shape/Sector';
import { Text } from '../component/Text';
import { Cell } from '../component/Cell';
import { findAllByType } from '../util/ReactUtils';
import { getMaxRadius, polarToCartesian } from '../util/PolarUtils';
import { getPercentValue, interpolate, isNumber, mathSign } from '../util/DataUtils';
import { getTooltipNameProp, getValueByDataKey } from '../util/ChartUtils';
import { adaptEventsOfChild } from '../util/types';
import { Shape } from '../util/ActiveShapeUtils';
import { useMouseClickItemDispatch, useMouseEnterItemDispatch, useMouseLeaveItemDispatch } from '../context/tooltipContext';
import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings';
import { selectActiveTooltipDataKey, selectActiveTooltipGraphicalItemId, selectActiveTooltipIndex } from '../state/selectors/tooltipSelectors';
import { SetPolarLegendPayload } from '../state/SetLegendPayload';
import { DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME, DATA_ITEM_INDEX_ATTRIBUTE_NAME } from '../util/Constants';
import { AnimatedItems, useAnimationCallbacks } from '../animation/AnimatedItems';
import { matchAppend } from '../animation/matchBy';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId';
import { SetPolarGraphicalItem } from '../state/SetGraphicalItem';
import { svgPropertiesNoEvents, svgPropertiesNoEventsFromUnknown } from '../util/svgPropertiesNoEvents';
import { LabelListFromLabelProp, PolarLabelListContextProvider } from '../component/LabelList';
import { ZIndexLayer } from '../zIndex/ZIndexLayer';
import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
import { getClassNameFromUnknown } from '../util/getClassNameFromUnknown';
import { usePolarChartLayout } from '../context/chartLayoutContext';
/**
* The `label` prop in Pie accepts a variety of alternatives.
*/
/**
* We spread the data object into the sector data item,
* so we can't really know what is going to be inside.
*
* This type represents our best effort, but it all depends on the input data
* and what is inside of it.
*
* https://github.com/recharts/recharts/issues/6380
* https://github.com/recharts/recharts/discussions/6375
*/
/**
* Internal props, combination of external props + defaultProps + private Recharts state
*/
var defaultPieSectorShape = Sector;
function SetPiePayloadLegend(props) {
var cells = useMemo(() => findAllByType(props.children, Cell), [props.children]);
var legendPayload = useAppSelector(state => selectPieLegend(state, props.id, cells));
if (legendPayload == null) {
return null;
}
return /*#__PURE__*/React.createElement(SetPolarLegendPayload, {
legendPayload: legendPayload
});
}
function getActiveShapeFill(activeShape) {
// activeShape can be boolean/function/element/object; only element/object can carry a static fill value.
if (activeShape == null || typeof activeShape === 'boolean' || typeof activeShape === 'function') {
return undefined;
}
if (/*#__PURE__*/React.isValidElement(activeShape)) {
var _activeShape$props;
// React element form: <Sector fill="..."/> or custom element with fill prop.
var _fill = (_activeShape$props = activeShape.props) === null || _activeShape$props === void 0 ? void 0 : _activeShape$props.fill;
return typeof _fill === 'string' ? _fill : undefined;
}
var fill = activeShape.fill;
return typeof fill === 'string' ? fill : undefined;
}
var SetPieTooltipEntrySettings = /*#__PURE__*/React.memo(_ref => {
var dataKey = _ref.dataKey,
nameKey = _ref.nameKey,
sectors = _ref.sectors,
stroke = _ref.stroke,
strokeWidth = _ref.strokeWidth,
fill = _ref.fill,
name = _ref.name,
hide = _ref.hide,
tooltipType = _ref.tooltipType,
formatter = _ref.formatter,
id = _ref.id,
activeShape = _ref.activeShape;
var activeShapeFill = getActiveShapeFill(activeShape);
var tooltipDataDefinedOnItem = sectors.map(sector => {
var sectorTooltipPayload = sector.tooltipPayload;
if (activeShapeFill == null || sectorTooltipPayload == null) {
return sectorTooltipPayload;
}
return sectorTooltipPayload.map(item => _objectSpread(_objectSpread({}, item), {}, {
color: activeShapeFill,
fill: activeShapeFill
}));
});
var tooltipEntrySettings = {
dataDefinedOnItem: tooltipDataDefinedOnItem,
getPosition: index => {
var _sectors$Number;
return (_sectors$Number = sectors[Number(index)]) === null || _sectors$Number === void 0 ? void 0 : _sectors$Number.tooltipPosition;
},
settings: {
stroke,
strokeWidth,
fill,
dataKey,
nameKey,
name: getTooltipNameProp(name, dataKey),
hide,
type: tooltipType,
color: fill,
unit: '',
// why doesn't Pie support unit?
formatter,
graphicalItemId: id
}
};
return /*#__PURE__*/React.createElement(SetTooltipEntrySettings, {
tooltipEntrySettings: tooltipEntrySettings
});
});
var getTextAnchor = (x, cx) => {
if (x > cx) {
return 'start';
}
if (x < cx) {
return 'end';
}
return 'middle';
};
var getOuterRadius = (dataPoint, outerRadius, maxPieRadius) => {
if (typeof outerRadius === 'function') {
return getPercentValue(outerRadius(dataPoint), maxPieRadius, maxPieRadius * 0.8);
}
return getPercentValue(outerRadius, maxPieRadius, maxPieRadius * 0.8);
};
var parseCoordinateOfPie = (pieSettings, offset, dataPoint) => {
var top = offset.top,
left = offset.left,
width = offset.width,
height = offset.height;
var maxPieRadius = getMaxRadius(width, height);
var cx = left + getPercentValue(pieSettings.cx, width, width / 2);
var cy = top + getPercentValue(pieSettings.cy, height, height / 2);
var innerRadius = getPercentValue(pieSettings.innerRadius, maxPieRadius, 0);
var outerRadius = getOuterRadius(dataPoint, pieSettings.outerRadius, maxPieRadius);
var maxRadius = pieSettings.maxRadius || Math.sqrt(width * width + height * height) / 2;
return {
cx,
cy,
innerRadius,
outerRadius,
maxRadius
};
};
var parseDeltaAngle = (startAngle, endAngle) => {
var sign = mathSign(endAngle - startAngle);
var deltaAngle = Math.min(Math.abs(endAngle - startAngle), 360);
return sign * deltaAngle;
};
var renderLabelLineItem = (option, props) => {
if (/*#__PURE__*/React.isValidElement(option)) {
// @ts-expect-error we can't know if the type of props matches the element
return /*#__PURE__*/React.cloneElement(option, props);
}
if (typeof option === 'function') {
return option(props);
}
var className = clsx('recharts-pie-label-line', typeof option !== 'boolean' ? option.className : '');
// React doesn't like it when we spread a key property onto an element
var key = props.key,
otherProps = _objectWithoutProperties(props, _excluded);
return /*#__PURE__*/React.createElement(Curve, _extends({}, otherProps, {
type: "linear",
className: className
}));
};
var renderLabelItem = (option, props, value) => {
if (/*#__PURE__*/React.isValidElement(option)) {
// @ts-expect-error element cloning is not typed
return /*#__PURE__*/React.cloneElement(option, props);
}
var label = value;
if (typeof option === 'function') {
label = option(props);
if (/*#__PURE__*/React.isValidElement(label)) {
return label;
}
}
var className = clsx('recharts-pie-label-text', getClassNameFromUnknown(option));
return /*#__PURE__*/React.createElement(Text, _extends({}, props, {
alignmentBaseline: "middle",
className: className
}), label);
};
function PieLabels(_ref2) {
var sectors = _ref2.sectors,
props = _ref2.props,
showLabels = _ref2.showLabels;
var label = props.label,
labelLine = props.labelLine,
dataKey = props.dataKey;
if (!showLabels || !label || !sectors) {
return null;
}
var pieProps = svgPropertiesNoEvents(props);
var customLabelProps = svgPropertiesNoEventsFromUnknown(label);
var customLabelLineProps = svgPropertiesNoEventsFromUnknown(labelLine);
var offsetRadius = typeof label === 'object' && 'offsetRadius' in label && typeof label.offsetRadius === 'number' && label.offsetRadius || 20;
var labels = sectors.map((entry, i) => {
var midAngle = (entry.startAngle + entry.endAngle) / 2;
var endPoint = polarToCartesian(entry.cx, entry.cy, entry.outerRadius + offsetRadius, midAngle);
var labelProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, pieProps), entry), {}, {
// @ts-expect-error customLabelProps is contributing unknown props
stroke: 'none'
}, customLabelProps), {}, {
index: i,
textAnchor: getTextAnchor(endPoint.x, entry.cx)
}, endPoint);
var lineProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, pieProps), entry), {}, {
// @ts-expect-error customLabelLineProps is contributing unknown props
fill: 'none',
// @ts-expect-error customLabelLineProps is contributing unknown props
stroke: entry.fill
}, customLabelLineProps), {}, {
index: i,
points: [polarToCartesian(entry.cx, entry.cy, entry.outerRadius, midAngle), endPoint],
key: 'line'
});
return /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: DefaultZIndexes.label,
key: "label-".concat(entry.startAngle, "-").concat(entry.endAngle, "-").concat(entry.midAngle, "-").concat(i)
}, /*#__PURE__*/React.createElement(Layer, null, labelLine && renderLabelLineItem(labelLine, lineProps), renderLabelItem(label, labelProps, getValueByDataKey(entry, dataKey))));
});
return /*#__PURE__*/React.createElement(Layer, {
className: "recharts-pie-labels"
}, labels);
}
function PieLabelList(_ref3) {
var sectors = _ref3.sectors,
props = _ref3.props,
showLabels = _ref3.showLabels;
var label = props.label;
if (typeof label === 'object' && label != null && 'position' in label) {
return /*#__PURE__*/React.createElement(LabelListFromLabelProp, {
label: label
});
}
return /*#__PURE__*/React.createElement(PieLabels, {
sectors: sectors,
props: props,
showLabels: showLabels
});
}
function PieSectors(props) {
var sectors = props.sectors,
activeShape = props.activeShape,
inactiveShapeProp = props.inactiveShape,
allOtherPieProps = props.allOtherPieProps,
shape = props.shape,
id = props.id,
animationElapsedTime = props.animationElapsedTime,
isAnimating = props.isAnimating,
isEntrance = props.isEntrance;
var activeIndex = useAppSelector(selectActiveTooltipIndex);
var activeDataKey = useAppSelector(selectActiveTooltipDataKey);
var activeGraphicalItemId = useAppSelector(selectActiveTooltipGraphicalItemId);
var onMouseEnterFromProps = allOtherPieProps.onMouseEnter,
onItemClickFromProps = allOtherPieProps.onClick,
onMouseLeaveFromProps = allOtherPieProps.onMouseLeave,
restOfAllOtherProps = _objectWithoutProperties(allOtherPieProps, _excluded2);
var onMouseEnterFromContext = useMouseEnterItemDispatch(onMouseEnterFromProps, allOtherPieProps.dataKey, id);
var onMouseLeaveFromContext = useMouseLeaveItemDispatch(onMouseLeaveFromProps);
var onClickFromContext = useMouseClickItemDispatch(onItemClickFromProps, allOtherPieProps.dataKey, id);
if (sectors == null || sectors.length === 0) {
return null;
}
return /*#__PURE__*/React.createElement(React.Fragment, null, sectors.map((entry, i) => {
if ((entry === null || entry === void 0 ? void 0 : entry.startAngle) === 0 && (entry === null || entry === void 0 ? void 0 : entry.endAngle) === 0 && sectors.length !== 1) return null;
// For Pie charts, when multiple Pies share the same dataKey, we need to ensure only the hovered Pie's sector is active.
// We do this by checking if the active graphical item ID matches this Pie's ID.
var graphicalItemMatches = activeGraphicalItemId == null || activeGraphicalItemId === id;
var isActive = String(i) === activeIndex && (activeDataKey == null || allOtherPieProps.dataKey === activeDataKey) && graphicalItemMatches;
var inactiveShape = activeIndex ? inactiveShapeProp : null;
var sectorOptions = activeShape && isActive ? activeShape : inactiveShape;
var sectorProps = _objectSpread(_objectSpread({}, entry), {}, {
stroke: entry.stroke,
tabIndex: -1,
index: i,
isActive,
animationElapsedTime,
isAnimating,
isEntrance,
[DATA_ITEM_INDEX_ATTRIBUTE_NAME]: i,
[DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME]: id
});
return /*#__PURE__*/React.createElement(Layer, _extends({
key: "sector-".concat(entry === null || entry === void 0 ? void 0 : entry.startAngle, "-").concat(entry === null || entry === void 0 ? void 0 : entry.endAngle, "-").concat(entry.midAngle, "-").concat(i),
tabIndex: -1,
className: "recharts-pie-sector"
}, adaptEventsOfChild(restOfAllOtherProps, entry, i), {
onMouseEnter: onMouseEnterFromContext(entry, i),
onMouseLeave: onMouseLeaveFromContext(entry, i),
onClick: onClickFromContext(entry, i)
}), /*#__PURE__*/React.createElement(Shape, {
option: sectorOptions !== null && sectorOptions !== void 0 ? sectorOptions : shape,
DefaultShape: defaultPieSectorShape,
shapeProps: sectorProps
}));
}));
}
export function computePieSectors(_ref4) {
var _pieSettings$paddingA;
var pieSettings = _ref4.pieSettings,
displayedData = _ref4.displayedData,
cells = _ref4.cells,
offset = _ref4.offset;
var cornerRadius = pieSettings.cornerRadius,
startAngle = pieSettings.startAngle,
endAngle = pieSettings.endAngle,
dataKey = pieSettings.dataKey,
nameKey = pieSettings.nameKey,
tooltipType = pieSettings.tooltipType;
var minAngle = Math.abs(pieSettings.minAngle);
var deltaAngle = parseDeltaAngle(startAngle, endAngle);
var absDeltaAngle = Math.abs(deltaAngle);
var paddingAngle = displayedData.length <= 1 ? 0 : (_pieSettings$paddingA = pieSettings.paddingAngle) !== null && _pieSettings$paddingA !== void 0 ? _pieSettings$paddingA : 0;
var notZeroItemCount = displayedData.filter(entry => getValueByDataKey(entry, dataKey, 0) !== 0).length;
var totalPaddingAngle = (absDeltaAngle >= 360 ? notZeroItemCount : notZeroItemCount - 1) * paddingAngle;
var sum = displayedData.reduce((result, entry) => {
var val = getValueByDataKey(entry, dataKey, 0);
return result + (isNumber(val) ? val : 0);
}, 0);
// Only apply minAngle redistribution when at least one non-zero segment's
// natural angle falls below the minAngle threshold. Otherwise, minAngle
// unnecessarily shifts all segments even when none need the boost.
// See: https://github.com/recharts/recharts/issues/6814
var needsMinAngleAdjustment = minAngle > 0 && sum > 0 && displayedData.some(entry => {
var val = getValueByDataKey(entry, dataKey, 0);
var percent = (isNumber(val) ? val : 0) / sum;
return val !== 0 && percent * absDeltaAngle < minAngle;
});
var effectiveMinAngle = needsMinAngleAdjustment ? minAngle : 0;
var realTotalAngle = absDeltaAngle - notZeroItemCount * effectiveMinAngle - totalPaddingAngle;
var sectors;
if (sum > 0) {
var prev;
sectors = displayedData.map((entry, i) => {
var val = getValueByDataKey(entry, dataKey, 0);
var name = getValueByDataKey(entry, nameKey, i);
var coordinate = parseCoordinateOfPie(pieSettings, offset, entry);
var percent = (isNumber(val) ? val : 0) / sum;
var tempStartAngle;
// @ts-expect-error can't spread unknown
var entryWithCellInfo = _objectSpread(_objectSpread({}, entry), cells && cells[i] && cells[i].props);
var sectorColor = entryWithCellInfo != null && 'fill' in entryWithCellInfo && typeof entryWithCellInfo.fill === 'string' ? entryWithCellInfo.fill : pieSettings.fill;
if (i) {
tempStartAngle = prev.endAngle + mathSign(deltaAngle) * paddingAngle * (val !== 0 ? 1 : 0);
} else {
tempStartAngle = startAngle;
}
var tempEndAngle = tempStartAngle + mathSign(deltaAngle) * ((val !== 0 ? effectiveMinAngle : 0) + percent * realTotalAngle);
var midAngle = (tempStartAngle + tempEndAngle) / 2;
var middleRadius = (coordinate.innerRadius + coordinate.outerRadius) / 2;
var tooltipPayload = [{
name,
value: val,
payload: entryWithCellInfo,
dataKey,
type: tooltipType,
color: sectorColor,
fill: sectorColor,
graphicalItemId: pieSettings.id
}];
var tooltipPosition = polarToCartesian(coordinate.cx, coordinate.cy, middleRadius, midAngle);
prev = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, pieSettings.presentationProps), {}, {
percent,
cornerRadius: typeof cornerRadius === 'string' ? parseFloat(cornerRadius) : cornerRadius,
name,
tooltipPayload,
midAngle,
middleRadius,
tooltipPosition
}, entryWithCellInfo), coordinate), {}, {
value: val,
dataKey,
startAngle: tempStartAngle,
endAngle: tempEndAngle,
payload: entryWithCellInfo,
paddingAngle: val !== 0 ? mathSign(deltaAngle) * paddingAngle : 0
});
return prev;
});
}
return sectors;
}
function PieLabelListProvider(_ref5) {
var showLabels = _ref5.showLabels,
sectors = _ref5.sectors,
children = _ref5.children;
var labelListEntries = useMemo(() => {
if (!showLabels || !sectors) {
return [];
}
return sectors.map(entry => ({
value: entry.value,
payload: entry.payload,
clockWise: false,
parentViewBox: undefined,
viewBox: {
cx: entry.cx,
cy: entry.cy,
innerRadius: entry.innerRadius,
outerRadius: entry.outerRadius,
startAngle: entry.startAngle,
endAngle: entry.endAngle,
clockWise: false
},
fill: entry.fill
}));
}, [sectors, showLabels]);
return /*#__PURE__*/React.createElement(PolarLabelListContextProvider, {
value: showLabels ? labelListEntries : undefined
}, children);
}
var defaultPieAnimateItems = (items, animationElapsedTime) => {
if (items == null) return [];
var stepData = [];
var firstNonRemoved = items.find(item => item.status !== 'removed');
var curAngle = firstNonRemoved ? firstNonRemoved.next.startAngle : 0;
items.forEach((item, index) => {
if (item.status === 'removed') return;
var paddingAngle = index > 0 ? get(item.next, 'paddingAngle', 0) : 0;
if (item.status === 'matched') {
var angle = interpolate(item.prev.endAngle - item.prev.startAngle, item.next.endAngle - item.next.startAngle, animationElapsedTime);
var latest = _objectSpread(_objectSpread({}, item.next), {}, {
startAngle: curAngle + paddingAngle,
endAngle: curAngle + angle + paddingAngle
});
stepData.push(latest);
curAngle = latest.endAngle;
} else {
// added
var deltaAngle = interpolate(0, item.next.endAngle - item.next.startAngle, animationElapsedTime);
var _latest = _objectSpread(_objectSpread({}, item.next), {}, {
startAngle: curAngle + paddingAngle,
endAngle: curAngle + deltaAngle + paddingAngle
});
stepData.push(_latest);
curAngle = _latest.endAngle;
}
});
return stepData;
};
function SectorsWithAnimation(_ref6) {
var props = _ref6.props,
previousSectorsRef = _ref6.previousSectorsRef,
id = _ref6.id;
var sectors = props.sectors,
activeShape = props.activeShape,
inactiveShape = props.inactiveShape,
animationInterpolateFn = props.animationInterpolateFn;
var _useAnimationCallback = useAnimationCallbacks(props.onAnimationStart, props.onAnimationEnd),
isAnimating = _useAnimationCallback.isAnimating,
handleAnimationStart = _useAnimationCallback.handleAnimationStart,
handleAnimationEnd = _useAnimationCallback.handleAnimationEnd;
var layout = usePolarChartLayout();
if (layout == null) return null;
return /*#__PURE__*/React.createElement(PieLabelListProvider, {
showLabels: !isAnimating,
sectors: sectors
}, /*#__PURE__*/React.createElement(AnimatedItems, {
animationInput: props,
animationIdPrefix: "recharts-pie-",
items: sectors,
previousItemsRef: previousSectorsRef,
isAnimationActive: props.isAnimationActive,
animationBegin: props.animationBegin,
animationDuration: props.animationDuration,
animationEasing: props.animationEasing,
onAnimationStart: handleAnimationStart,
onAnimationEnd: handleAnimationEnd,
animationInterpolateFn: animationInterpolateFn,
animationMatchBy: props.animationMatchBy,
layout: layout
}, (stepData, animationElapsedTime, isEntrance) => /*#__PURE__*/React.createElement(Layer, null, /*#__PURE__*/React.createElement(PieSectors, {
sectors: stepData,
activeShape: activeShape,
inactiveShape: inactiveShape,
allOtherPieProps: props,
shape: props.shape,
id: id,
animationElapsedTime: animationElapsedTime,
isAnimating: isAnimating || animationElapsedTime < 1,
isEntrance: isEntrance
}))), /*#__PURE__*/React.createElement(PieLabelList, {
showLabels: !isAnimating,
sectors: sectors,
props: props
}), props.children);
}
export var defaultPieProps = {
animationBegin: 400,
animationDuration: 1500,
animationEasing: 'ease',
animationInterpolateFn: defaultPieAnimateItems,
animationMatchBy: matchAppend,
cx: '50%',
cy: '50%',
dataKey: 'value',
endAngle: 360,
fill: '#808080',
hide: false,
innerRadius: 0,
isAnimationActive: 'auto',
label: false,
labelLine: true,
legendType: 'rect',
minAngle: 0,
nameKey: 'name',
outerRadius: '80%',
paddingAngle: 0,
rootTabIndex: 0,
shape: defaultPieSectorShape,
startAngle: 0,
stroke: '#fff',
zIndex: DefaultZIndexes.area
};
function PieImpl(props) {
var id = props.id,
propsWithoutId = _objectWithoutProperties(props, _excluded3);
var hide = props.hide,
className = props.className,
rootTabIndex = props.rootTabIndex;
var cells = useMemo(() => findAllByType(props.children, Cell), [props.children]);
var sectors = useAppSelector(state => selectPieSectors(state, id, cells));
var previousSectorsRef = useRef(null);
var layerClass = clsx('recharts-pie', className);
if (hide || sectors == null) {
previousSectorsRef.current = null;
return /*#__PURE__*/React.createElement(Layer, {
tabIndex: rootTabIndex,
className: layerClass
});
}
return /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: props.zIndex
}, /*#__PURE__*/React.createElement(SetPieTooltipEntrySettings, {
dataKey: props.dataKey,
nameKey: props.nameKey,
sectors: sectors,
stroke: props.stroke,
strokeWidth: props.strokeWidth,
fill: props.fill,
name: props.name,
hide: props.hide,
tooltipType: props.tooltipType,
formatter: props.formatter,
id: id,
activeShape: props.activeShape
}), /*#__PURE__*/React.createElement(Layer, {
tabIndex: rootTabIndex,
className: layerClass
}, /*#__PURE__*/React.createElement(SectorsWithAnimation, {
props: _objectSpread(_objectSpread({}, propsWithoutId), {}, {
sectors
}),
previousSectorsRef: previousSectorsRef,
id: id
})));
}
/**
* @consumes PolarChartContext
* @provides LabelListContext
* @provides CellReader
*/
function PieFn(outsideProps) {
var props = resolveDefaultProps(outsideProps, defaultPieProps);
var externalId = props.id,
propsWithoutId = _objectWithoutProperties(props, _excluded4);
var presentationProps = svgPropertiesNoEvents(propsWithoutId);
return /*#__PURE__*/React.createElement(RegisterGraphicalItemId, {
id: externalId,
type: "pie"
}, id => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetPolarGraphicalItem, {
type: "pie",
id: id,
data: propsWithoutId.data,
dataKey: propsWithoutId.dataKey,
hide: propsWithoutId.hide,
angleAxisId: 0,
radiusAxisId: 0,
name: propsWithoutId.name,
nameKey: propsWithoutId.nameKey,
tooltipType: propsWithoutId.tooltipType,
legendType: propsWithoutId.legendType,
fill: propsWithoutId.fill,
cx: propsWithoutId.cx,
cy: propsWithoutId.cy,
startAngle: propsWithoutId.startAngle,
endAngle: propsWithoutId.endAngle,
paddingAngle: propsWithoutId.paddingAngle,
minAngle: propsWithoutId.minAngle,
innerRadius: propsWithoutId.innerRadius,
outerRadius: propsWithoutId.outerRadius,
cornerRadius: propsWithoutId.cornerRadius,
presentationProps: presentationProps,
maxRadius: props.maxRadius
}), /*#__PURE__*/React.createElement(SetPiePayloadLegend, _extends({}, propsWithoutId, {
id: id
})), /*#__PURE__*/React.createElement(PieImpl, _extends({}, propsWithoutId, {
id: id
}))));
}
export var Pie = PieFn;
// @ts-expect-error we need to set the displayName for debugging purposes
Pie.displayName = 'Pie';

View file

@ -0,0 +1,271 @@
var _excluded = ["children", "type"],
_excluded2 = ["ref"];
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); }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
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; }
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; }
import * as React from 'react';
import { useEffect, useMemo } from 'react';
import { clsx } from 'clsx';
import { Layer } from '../container/Layer';
import { Dot } from '../shape/Dot';
import { Polygon } from '../shape/Polygon';
import { Text } from '../component/Text';
import { adaptEventsOfChild } from '../util/types';
import { degreeToRadian, polarToCartesian } from '../util/PolarUtils';
import { addAngleAxis, removeAngleAxis } from '../state/polarAxisSlice';
import { useAppDispatch, useAppSelector } from '../state/hooks';
import { selectPolarAngleAxisTicks, selectPolarAxisScale } from '../state/selectors/polarScaleSelectors';
import { selectAngleAxis, selectPolarViewBox } from '../state/selectors/polarAxisSelectors';
import { defaultPolarAngleAxisProps } from './defaultPolarAngleAxisProps';
import { useIsPanorama } from '../context/PanoramaContext';
import { svgPropertiesNoEvents, svgPropertiesNoEventsFromUnknown } from '../util/svgPropertiesNoEvents';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { ZIndexLayer } from '../zIndex/ZIndexLayer';
import { usePolarChartLayout } from '../context/chartLayoutContext';
import { noop } from '../util/DataUtils';
import { getAxisTypeBasedOnLayout } from '../util/getAxisTypeBasedOnLayout';
import { getClassNameFromUnknown } from '../util/getClassNameFromUnknown';
var eps = 1e-5;
var COS_45 = Math.cos(degreeToRadian(45));
var AXIS_TYPE = 'angleAxis';
function SetAngleAxisSettings(props) {
var dispatch = useAppDispatch();
var layout = usePolarChartLayout();
var settings = useMemo(() => {
var children = props.children,
typeFromProps = props.type,
rest = _objectWithoutProperties(props, _excluded);
var evaluatedType = getAxisTypeBasedOnLayout(layout, 'angleAxis', typeFromProps);
if (evaluatedType == null) {
return undefined;
}
return _objectSpread(_objectSpread({}, rest), {}, {
type: evaluatedType
});
}, [props, layout]);
var synchronizedSettings = useAppSelector(state => selectAngleAxis(state, settings === null || settings === void 0 ? void 0 : settings.id));
var settingsAreSynchronized = settings === synchronizedSettings;
useEffect(() => {
if (settings == null) {
return noop;
}
dispatch(addAngleAxis(settings));
return () => {
dispatch(removeAngleAxis(settings));
};
}, [dispatch, settings]);
if (settingsAreSynchronized) {
return props.children;
}
return null;
}
/**
* Calculate the coordinate of line endpoint
* @param data The data if there are ticks
* @param props axis settings
* @return (x1, y1): The point close to text,
* (x2, y2): The point close to axis
*/
var getTickLineCoord = (data, props) => {
var cx = props.cx,
cy = props.cy,
radius = props.radius,
orientation = props.orientation,
tickSize = props.tickSize;
var tickLineSize = tickSize || 8;
var p1 = polarToCartesian(cx, cy, radius, data.coordinate);
var p2 = polarToCartesian(cx, cy, radius + (orientation === 'inner' ? -1 : 1) * tickLineSize, data.coordinate);
return {
x1: p1.x,
y1: p1.y,
x2: p2.x,
y2: p2.y
};
};
/**
* Get the text-anchor of each tick
* @param data Data of ticks
* @param orientation of the axis ticks
* @return text-anchor
*/
var getTickTextAnchor = (data, orientation) => {
var cos = Math.cos(degreeToRadian(-data.coordinate));
if (cos > eps) {
return orientation === 'outer' ? 'start' : 'end';
}
if (cos < -eps) {
return orientation === 'outer' ? 'end' : 'start';
}
return 'middle';
};
/**
* Get the text vertical anchor of each tick
* @param data Data of a tick
* @return text vertical anchor
*/
var getTickTextVerticalAnchor = data => {
var cos = Math.cos(degreeToRadian(-data.coordinate));
var sin = Math.sin(degreeToRadian(-data.coordinate));
// handle top and bottom sectors: 90±45deg and 270±45deg
if (Math.abs(cos) <= COS_45) {
// sin > 0: top sector, sin < 0: bottom sector
return sin > 0 ? 'start' : 'end';
}
return 'middle';
};
var AxisLine = props => {
var cx = props.cx,
cy = props.cy,
radius = props.radius,
axisLineType = props.axisLineType,
axisLine = props.axisLine,
ticks = props.ticks;
if (!axisLine) {
return null;
}
var axisLineProps = _objectSpread(_objectSpread({}, svgPropertiesNoEvents(props)), {}, {
fill: 'none'
}, svgPropertiesNoEvents(axisLine));
if (axisLineType === 'circle') {
// @ts-expect-error wrong SVG element type
return /*#__PURE__*/React.createElement(Dot, _extends({
className: "recharts-polar-angle-axis-line"
}, axisLineProps, {
cx: cx,
cy: cy,
r: radius
}));
}
var points = ticks.map(entry => polarToCartesian(cx, cy, radius, entry.coordinate));
// @ts-expect-error wrong SVG element type
return /*#__PURE__*/React.createElement(Polygon, _extends({
className: "recharts-polar-angle-axis-line"
}, axisLineProps, {
points: points
}));
};
var TickItemText = _ref => {
var tick = _ref.tick,
tickProps = _ref.tickProps,
value = _ref.value;
if (!tick) {
return null;
}
if (/*#__PURE__*/React.isValidElement(tick)) {
return /*#__PURE__*/React.cloneElement(tick, tickProps);
}
if (typeof tick === 'function') {
return tick(tickProps);
}
return /*#__PURE__*/React.createElement(Text, _extends({}, tickProps, {
className: "recharts-polar-angle-axis-tick-value"
}), value);
};
var Ticks = props => {
var tick = props.tick,
tickLine = props.tickLine,
tickFormatter = props.tickFormatter,
stroke = props.stroke,
ticks = props.ticks;
var _svgPropertiesNoEvent = svgPropertiesNoEvents(props),
ref = _svgPropertiesNoEvent.ref,
axisProps = _objectWithoutProperties(_svgPropertiesNoEvent, _excluded2);
var customTickProps = svgPropertiesNoEventsFromUnknown(tick);
var tickLineProps = _objectSpread(_objectSpread({}, axisProps), {}, {
fill: 'none'
}, svgPropertiesNoEvents(tickLine));
var items = ticks.map((entry, i) => {
var lineCoord = getTickLineCoord(entry, props);
var textAnchor = getTickTextAnchor(entry, props.orientation);
var verticalAnchor = getTickTextVerticalAnchor(entry);
var tickProps = _objectSpread(_objectSpread(_objectSpread({}, axisProps), {}, {
// @ts-expect-error customTickProps is contributing unknown props
textAnchor,
verticalAnchor,
// @ts-expect-error customTickProps is contributing unknown props
stroke: 'none',
// @ts-expect-error customTickProps is contributing unknown props
fill: stroke
}, customTickProps), {}, {
index: i,
payload: entry,
x: lineCoord.x2,
y: lineCoord.y2
});
return /*#__PURE__*/React.createElement(Layer, _extends({
className: clsx('recharts-polar-angle-axis-tick', getClassNameFromUnknown(tick)),
key: "tick-".concat(entry.coordinate)
}, adaptEventsOfChild(props, entry, i)), tickLine && /*#__PURE__*/React.createElement("line", _extends({
className: "recharts-polar-angle-axis-tick-line"
}, tickLineProps, lineCoord)), /*#__PURE__*/React.createElement(TickItemText, {
tick: tick,
tickProps: tickProps,
value: tickFormatter ? tickFormatter(entry.value, i) : entry.value
}));
});
return /*#__PURE__*/React.createElement(Layer, {
className: "recharts-polar-angle-axis-ticks"
}, items);
};
export var PolarAngleAxisWrapper = defaultsAndInputs => {
var angleAxisId = defaultsAndInputs.angleAxisId;
var viewBox = useAppSelector(selectPolarViewBox);
var scale = useAppSelector(state => selectPolarAxisScale(state, 'angleAxis', angleAxisId));
var isPanorama = useIsPanorama();
var ticks = useAppSelector(state => selectPolarAngleAxisTicks(state, 'angleAxis', angleAxisId, isPanorama));
if (viewBox == null || !ticks || !ticks.length || scale == null) {
return null;
}
var props = _objectSpread(_objectSpread(_objectSpread({}, defaultsAndInputs), {}, {
scale
}, viewBox), {}, {
radius: viewBox.outerRadius,
ticks
});
return /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: props.zIndex
}, /*#__PURE__*/React.createElement(Layer, {
className: clsx('recharts-polar-angle-axis', AXIS_TYPE, props.className)
}, /*#__PURE__*/React.createElement(AxisLine, props), /*#__PURE__*/React.createElement(Ticks, props)));
};
/**
* @provides PolarLabelContext
* @consumes PolarViewBoxContext
*/
export function PolarAngleAxis(outsideProps) {
var _props$niceTicks;
var props = resolveDefaultProps(outsideProps, defaultPolarAngleAxisProps);
return /*#__PURE__*/React.createElement(SetAngleAxisSettings, {
id: props.angleAxisId,
scale: props.scale,
type: props.type,
dataKey: props.dataKey,
unit: undefined,
name: props.name,
allowDuplicatedCategory: false // Ignoring the prop on purpose because axis calculation behaves as if it was false and Tooltip requires it to be true.
,
allowDataOverflow: false,
reversed: props.reversed,
includeHidden: false,
allowDecimals: props.allowDecimals,
tickCount: props.tickCount,
niceTicks: (_props$niceTicks = props.niceTicks) !== null && _props$niceTicks !== void 0 ? _props$niceTicks : 'auto'
// @ts-expect-error the type does not match. Is RadiusAxis really expecting what it says?
,
ticks: props.ticks,
tick: props.tick,
domain: props.domain
}, /*#__PURE__*/React.createElement(PolarAngleAxisWrapper, props));
}
PolarAngleAxis.displayName = 'PolarAngleAxis';

191
frontend/node_modules/recharts/es6/polar/PolarGrid.js generated vendored Normal file
View file

@ -0,0 +1,191 @@
var _excluded = ["gridType", "radialLines", "angleAxisId", "radiusAxisId", "cx", "cy", "innerRadius", "outerRadius", "polarAngles", "polarRadius", "zIndex"];
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; }
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; }
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); }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
import { clsx } from 'clsx';
import * as React from 'react';
import { polarToCartesian } from '../util/PolarUtils';
import { useAppSelector } from '../state/hooks';
import { selectPolarGridAngles, selectPolarGridRadii } from '../state/selectors/polarGridSelectors';
import { selectPolarViewBox } from '../state/selectors/polarAxisSelectors';
import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
import { ZIndexLayer } from '../zIndex/ZIndexLayer';
import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
var getPolygonPath = (radius, cx, cy, polarAngles) => {
var path = '';
polarAngles.forEach((angle, i) => {
var point = polarToCartesian(cx, cy, radius, angle);
if (i) {
path += "L ".concat(point.x, ",").concat(point.y);
} else {
path += "M ".concat(point.x, ",").concat(point.y);
}
});
path += 'Z';
return path;
};
// Draw axis of radial line
var PolarAngles = props => {
var cx = props.cx,
cy = props.cy,
innerRadius = props.innerRadius,
outerRadius = props.outerRadius,
polarAngles = props.polarAngles,
radialLines = props.radialLines;
if (!polarAngles || !polarAngles.length || !radialLines) {
return null;
}
var polarAnglesProps = _objectSpread({}, svgPropertiesNoEvents(props));
return /*#__PURE__*/React.createElement("g", {
className: "recharts-polar-grid-angle"
}, polarAngles.map(entry => {
var start = polarToCartesian(cx, cy, innerRadius, entry);
var end = polarToCartesian(cx, cy, outerRadius, entry);
return /*#__PURE__*/React.createElement("line", _extends({
key: "line-".concat(entry)
}, polarAnglesProps, {
x1: start.x,
y1: start.y,
x2: end.x,
y2: end.y
}));
}));
};
// Draw concentric circles
var ConcentricCircle = props => {
var cx = props.cx,
cy = props.cy,
radius = props.radius;
var concentricCircleProps = _objectSpread({}, svgPropertiesNoEvents(props));
return (
/*#__PURE__*/
// @ts-expect-error wrong SVG element type
React.createElement("circle", _extends({}, concentricCircleProps, {
className: clsx('recharts-polar-grid-concentric-circle', props.className),
cx: cx,
cy: cy,
r: radius
}))
);
};
// Draw concentric polygons
var ConcentricPolygon = props => {
var radius = props.radius;
var concentricPolygonProps = _objectSpread({}, svgPropertiesNoEvents(props));
return /*#__PURE__*/React.createElement("path", _extends({}, concentricPolygonProps, {
className: clsx('recharts-polar-grid-concentric-polygon', props.className),
d: getPolygonPath(radius, props.cx, props.cy, props.polarAngles)
}));
};
// Draw concentric axis
var ConcentricGridPath = props => {
var polarRadius = props.polarRadius,
gridType = props.gridType;
if (!polarRadius || !polarRadius.length) {
return null;
}
var maxPolarRadius = Math.max(...polarRadius);
var renderBackground = props.fill && props.fill !== 'none';
return /*#__PURE__*/React.createElement("g", {
className: "recharts-polar-grid-concentric"
}, renderBackground && gridType === 'circle' && /*#__PURE__*/React.createElement(ConcentricCircle, _extends({}, props, {
radius: maxPolarRadius
})), renderBackground && gridType !== 'circle' && /*#__PURE__*/React.createElement(ConcentricPolygon, _extends({}, props, {
radius: maxPolarRadius
})), polarRadius.map((entry, i) => {
var key = i;
if (gridType === 'circle') {
return /*#__PURE__*/React.createElement(ConcentricCircle, _extends({
key: key
}, props, {
fill: "none",
radius: entry
}));
}
return /*#__PURE__*/React.createElement(ConcentricPolygon, _extends({
key: key
}, props, {
fill: "none",
radius: entry
}));
}));
};
export var defaultPolarGridProps = {
angleAxisId: 0,
radiusAxisId: 0,
gridType: 'polygon',
radialLines: true,
zIndex: DefaultZIndexes.grid,
stroke: '#ccc',
strokeWidth: 1,
fill: 'none'
};
/**
* @consumes PolarViewBoxContext
*/
export var PolarGrid = outsideProps => {
var _ref, _polarViewBox$cx, _ref2, _polarViewBox$cy, _ref3, _polarViewBox$innerRa, _ref4, _polarViewBox$outerRa;
var _resolveDefaultProps = resolveDefaultProps(outsideProps, defaultPolarGridProps),
gridType = _resolveDefaultProps.gridType,
radialLines = _resolveDefaultProps.radialLines,
angleAxisId = _resolveDefaultProps.angleAxisId,
radiusAxisId = _resolveDefaultProps.radiusAxisId,
cxFromOutside = _resolveDefaultProps.cx,
cyFromOutside = _resolveDefaultProps.cy,
innerRadiusFromOutside = _resolveDefaultProps.innerRadius,
outerRadiusFromOutside = _resolveDefaultProps.outerRadius,
polarAnglesInput = _resolveDefaultProps.polarAngles,
polarRadiusInput = _resolveDefaultProps.polarRadius,
zIndex = _resolveDefaultProps.zIndex,
inputs = _objectWithoutProperties(_resolveDefaultProps, _excluded);
var polarViewBox = useAppSelector(selectPolarViewBox);
var polarAnglesFromRedux = useAppSelector(state => selectPolarGridAngles(state, angleAxisId));
var polarRadiiFromRedux = useAppSelector(state => selectPolarGridRadii(state, radiusAxisId));
var polarAngles = Array.isArray(polarAnglesInput) ? polarAnglesInput : polarAnglesFromRedux;
var polarRadius = Array.isArray(polarRadiusInput) ? polarRadiusInput : polarRadiiFromRedux;
if (polarAngles == null || polarRadius == null) {
return null;
}
var props = _objectSpread({
cx: (_ref = (_polarViewBox$cx = polarViewBox === null || polarViewBox === void 0 ? void 0 : polarViewBox.cx) !== null && _polarViewBox$cx !== void 0 ? _polarViewBox$cx : cxFromOutside) !== null && _ref !== void 0 ? _ref : 0,
cy: (_ref2 = (_polarViewBox$cy = polarViewBox === null || polarViewBox === void 0 ? void 0 : polarViewBox.cy) !== null && _polarViewBox$cy !== void 0 ? _polarViewBox$cy : cyFromOutside) !== null && _ref2 !== void 0 ? _ref2 : 0,
innerRadius: (_ref3 = (_polarViewBox$innerRa = polarViewBox === null || polarViewBox === void 0 ? void 0 : polarViewBox.innerRadius) !== null && _polarViewBox$innerRa !== void 0 ? _polarViewBox$innerRa : innerRadiusFromOutside) !== null && _ref3 !== void 0 ? _ref3 : 0,
outerRadius: (_ref4 = (_polarViewBox$outerRa = polarViewBox === null || polarViewBox === void 0 ? void 0 : polarViewBox.outerRadius) !== null && _polarViewBox$outerRa !== void 0 ? _polarViewBox$outerRa : outerRadiusFromOutside) !== null && _ref4 !== void 0 ? _ref4 : 0,
polarAngles,
polarRadius,
zIndex
}, inputs);
var outerRadius = props.outerRadius;
if (outerRadius <= 0) {
return null;
}
return /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: props.zIndex
}, /*#__PURE__*/React.createElement("g", {
className: "recharts-polar-grid"
}, /*#__PURE__*/React.createElement(ConcentricGridPath, _extends({
gridType: gridType,
radialLines: radialLines
}, props, {
polarAngles: polarAngles,
polarRadius: polarRadius
})), /*#__PURE__*/React.createElement(PolarAngles, _extends({
gridType: gridType,
radialLines: radialLines
}, props, {
polarAngles: polarAngles,
polarRadius: polarRadius
}))));
};
PolarGrid.displayName = 'PolarGrid';

View file

@ -0,0 +1,216 @@
var _excluded = ["type"],
_excluded2 = ["cx", "cy", "angle", "axisLine"],
_excluded3 = ["angle", "tickFormatter", "stroke", "tick"];
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); }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
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; }
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; }
import * as React from 'react';
import { useEffect, useMemo } from 'react';
import maxBy from 'es-toolkit/compat/maxBy';
import minBy from 'es-toolkit/compat/minBy';
import { clsx } from 'clsx';
import { Text } from '../component/Text';
import { PolarLabelContextProvider, PolarLabelFromLabelProp } from '../component/Label';
import { Layer } from '../container/Layer';
import { polarToCartesian } from '../util/PolarUtils';
import { adaptEventsOfChild } from '../util/types';
import { addRadiusAxis, removeRadiusAxis } from '../state/polarAxisSlice';
import { useAppDispatch, useAppSelector } from '../state/hooks';
import { selectPolarAxisScale, selectPolarAxisTicks } from '../state/selectors/polarScaleSelectors';
import { selectPolarViewBox } from '../state/selectors/polarAxisSelectors';
import { defaultPolarRadiusAxisProps } from './defaultPolarRadiusAxisProps';
import { svgPropertiesNoEvents, svgPropertiesNoEventsFromUnknown } from '../util/svgPropertiesNoEvents';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { ZIndexLayer } from '../zIndex/ZIndexLayer';
import { usePolarChartLayout } from '../context/chartLayoutContext';
import { noop } from '../util/DataUtils';
import { getAxisTypeBasedOnLayout } from '../util/getAxisTypeBasedOnLayout';
import { getClassNameFromUnknown } from '../util/getClassNameFromUnknown';
var AXIS_TYPE = 'radiusAxis';
function SetRadiusAxisSettings(props) {
var dispatch = useAppDispatch();
var layout = usePolarChartLayout();
var settings = useMemo(() => {
var typeFromProps = props.type,
rest = _objectWithoutProperties(props, _excluded);
var evaluatedType = getAxisTypeBasedOnLayout(layout, 'radiusAxis', typeFromProps);
if (evaluatedType == null) {
return undefined;
}
return _objectSpread(_objectSpread({}, rest), {}, {
type: evaluatedType
});
}, [props, layout]);
useEffect(() => {
if (settings == null) {
return noop;
}
dispatch(addRadiusAxis(settings));
return () => {
dispatch(removeRadiusAxis(settings));
};
}, [dispatch, settings]);
return null;
}
/**
* Calculate the coordinate of tick
* @param coordinate The radius of tick
* @param angle from props
* @param cx from chart
* @param cy from chart
* @return (x, y)
*/
var getTickValueCoord = (_ref, angle, cx, cy) => {
var coordinate = _ref.coordinate;
return polarToCartesian(cx, cy, coordinate, angle);
};
var getTickTextAnchor = orientation => {
var textAnchor;
switch (orientation) {
case 'left':
textAnchor = 'end';
break;
case 'right':
textAnchor = 'start';
break;
default:
textAnchor = 'middle';
break;
}
return textAnchor;
};
var getViewBox = (angle, cx, cy, ticks) => {
var maxRadiusTick = maxBy(ticks, entry => entry.coordinate || 0);
var minRadiusTick = minBy(ticks, entry => entry.coordinate || 0);
return {
cx,
cy,
startAngle: angle,
endAngle: angle,
innerRadius: (minRadiusTick === null || minRadiusTick === void 0 ? void 0 : minRadiusTick.coordinate) || 0,
outerRadius: (maxRadiusTick === null || maxRadiusTick === void 0 ? void 0 : maxRadiusTick.coordinate) || 0,
clockWise: false
};
};
var renderAxisLine = (props, ticks) => {
var cx = props.cx,
cy = props.cy,
angle = props.angle,
axisLine = props.axisLine,
others = _objectWithoutProperties(props, _excluded2);
var extent = ticks.reduce((result, entry) => [Math.min(result[0], entry.coordinate), Math.max(result[1], entry.coordinate)], [Infinity, -Infinity]);
var point0 = polarToCartesian(cx, cy, extent[0], angle);
var point1 = polarToCartesian(cx, cy, extent[1], angle);
var axisLineProps = _objectSpread(_objectSpread(_objectSpread({}, svgPropertiesNoEvents(others)), {}, {
fill: 'none'
}, svgPropertiesNoEvents(axisLine)), {}, {
x1: point0.x,
y1: point0.y,
x2: point1.x,
y2: point1.y
});
// @ts-expect-error wrong SVG element type
return /*#__PURE__*/React.createElement("line", _extends({
className: "recharts-polar-radius-axis-line"
}, axisLineProps));
};
var renderTickItem = (option, tickProps, value) => {
var tickItem;
if (/*#__PURE__*/React.isValidElement(option)) {
tickItem = /*#__PURE__*/React.cloneElement(option, tickProps);
} else if (typeof option === 'function') {
tickItem = option(tickProps);
} else {
tickItem = /*#__PURE__*/React.createElement(Text, _extends({}, tickProps, {
className: "recharts-polar-radius-axis-tick-value"
}), value);
}
return tickItem;
};
var renderTicks = (props, ticks) => {
var angle = props.angle,
tickFormatter = props.tickFormatter,
stroke = props.stroke,
tick = props.tick,
others = _objectWithoutProperties(props, _excluded3);
var textAnchor = getTickTextAnchor(props.orientation);
var axisProps = svgPropertiesNoEvents(others);
var customTickProps = svgPropertiesNoEventsFromUnknown(tick);
var items = ticks.map((entry, i) => {
var coord = getTickValueCoord(entry, props.angle, props.cx, props.cy);
var tickProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
textAnchor,
transform: "rotate(".concat(90 - angle, ", ").concat(coord.x, ", ").concat(coord.y, ")")
}, axisProps), {}, {
stroke: 'none',
fill: stroke
}, customTickProps), {}, {
index: i
}, coord), {}, {
payload: entry
});
return /*#__PURE__*/React.createElement(Layer, _extends({
className: clsx('recharts-polar-radius-axis-tick', getClassNameFromUnknown(tick)),
key: "tick-".concat(entry.coordinate)
}, adaptEventsOfChild(props, entry, i)), renderTickItem(tick, tickProps, tickFormatter ? tickFormatter(entry.value, i) : entry.value));
});
return /*#__PURE__*/React.createElement(Layer, {
className: "recharts-polar-radius-axis-ticks"
}, items);
};
export var PolarRadiusAxisWrapper = defaultsAndInputs => {
var radiusAxisId = defaultsAndInputs.radiusAxisId;
var viewBox = useAppSelector(selectPolarViewBox);
var scale = useAppSelector(state => selectPolarAxisScale(state, 'radiusAxis', radiusAxisId));
var ticks = useAppSelector(state => selectPolarAxisTicks(state, 'radiusAxis', radiusAxisId, false));
if (viewBox == null || !ticks || !ticks.length || scale == null) {
return null;
}
var props = _objectSpread(_objectSpread({}, defaultsAndInputs), {}, {
scale
}, viewBox);
var tick = props.tick,
axisLine = props.axisLine;
return /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: props.zIndex
}, /*#__PURE__*/React.createElement(Layer, {
className: clsx('recharts-polar-radius-axis', AXIS_TYPE, props.className)
}, axisLine && renderAxisLine(props, ticks), tick && renderTicks(props, ticks), /*#__PURE__*/React.createElement(PolarLabelContextProvider, getViewBox(props.angle, props.cx, props.cy, ticks), /*#__PURE__*/React.createElement(PolarLabelFromLabelProp, {
label: props.label
}), props.children)));
};
/**
* @provides PolarLabelContext
* @consumes PolarViewBoxContext
*/
export function PolarRadiusAxis(outsideProps) {
var _props$niceTicks;
var props = resolveDefaultProps(outsideProps, defaultPolarRadiusAxisProps);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetRadiusAxisSettings, {
domain: props.domain,
id: props.radiusAxisId,
scale: props.scale,
type: props.type,
dataKey: props.dataKey,
unit: undefined,
name: props.name,
allowDuplicatedCategory: props.allowDuplicatedCategory,
allowDataOverflow: props.allowDataOverflow,
reversed: props.reversed,
includeHidden: props.includeHidden,
allowDecimals: props.allowDecimals,
niceTicks: (_props$niceTicks = props.niceTicks) !== null && _props$niceTicks !== void 0 ? _props$niceTicks : 'auto',
ticks: props.ticks,
tickCount: props.tickCount,
tick: props.tick
}), /*#__PURE__*/React.createElement(PolarRadiusAxisWrapper, props));
}
PolarRadiusAxis.displayName = 'PolarRadiusAxis';

423
frontend/node_modules/recharts/es6/polar/Radar.js generated vendored Normal file
View file

@ -0,0 +1,423 @@
var _excluded = ["id"];
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); }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
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; }
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; }
import * as React from 'react';
import { useRef } from 'react';
import last from 'es-toolkit/compat/last';
import { clsx } from 'clsx';
import { interpolate, isNullish, noop } from '../util/DataUtils';
import { polarToCartesian } from '../util/PolarUtils';
import { getTooltipNameProp, getValueByDataKey } from '../util/ChartUtils';
import { Polygon } from '../shape/Polygon';
import { Layer } from '../container/Layer';
import { CartesianLabelListContextProvider, LabelListFromLabelProp } from '../component/LabelList';
import { Dots } from '../component/Dots';
import { ActivePoints } from '../component/ActivePoints';
import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings';
import { selectRadarPoints } from '../state/selectors/radarSelectors';
import { useAppSelector } from '../state/hooks';
import { useIsPanorama } from '../context/PanoramaContext';
import { SetPolarLegendPayload } from '../state/SetLegendPayload';
import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId';
import { SetPolarGraphicalItem } from '../state/SetGraphicalItem';
import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
import { AnimatedItems, useAnimationCallbacks } from '../animation/AnimatedItems';
import { matchAnimationItems, matchByIndex } from '../animation/matchBy';
import { useAnimationStartSnapshot } from '../animation/useAnimationStartSnapshot';
import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { ZIndexLayer } from '../zIndex/ZIndexLayer';
import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
import { usePolarChartLayout } from '../context/chartLayoutContext';
function getLegendItemColor(stroke, fill) {
return stroke && stroke !== 'none' ? stroke : fill;
}
var computeLegendPayloadFromRadarSectors = props => {
var dataKey = props.dataKey,
name = props.name,
stroke = props.stroke,
fill = props.fill,
legendType = props.legendType,
hide = props.hide;
return [{
inactive: hide,
dataKey,
type: legendType,
color: getLegendItemColor(stroke, fill),
value: getTooltipNameProp(name, dataKey),
payload: props
}];
};
var SetRadarTooltipEntrySettings = /*#__PURE__*/React.memo(_ref => {
var dataKey = _ref.dataKey,
stroke = _ref.stroke,
strokeWidth = _ref.strokeWidth,
fill = _ref.fill,
name = _ref.name,
hide = _ref.hide,
tooltipType = _ref.tooltipType,
id = _ref.id;
var tooltipEntrySettings = {
/*
* I suppose this here _could_ return props.points
* because while Radar does not support item tooltip mode, it _could_ support it.
* But when I actually do return the points here, a defaultIndex test starts failing.
* So, undefined it is.
*/
dataDefinedOnItem: undefined,
getPosition: noop,
settings: {
stroke,
strokeWidth,
fill,
nameKey: undefined,
// RadarChart does not have nameKey unfortunately
dataKey,
name: getTooltipNameProp(name, dataKey),
hide,
type: tooltipType,
color: getLegendItemColor(stroke, fill),
unit: '',
// why doesn't Radar support unit?
graphicalItemId: id
}
};
return /*#__PURE__*/React.createElement(SetTooltipEntrySettings, {
tooltipEntrySettings: tooltipEntrySettings
});
});
function RadarDotsWrapper(_ref2) {
var points = _ref2.points,
props = _ref2.props;
var dot = props.dot,
dataKey = props.dataKey;
var id = props.id,
propsWithoutId = _objectWithoutProperties(props, _excluded);
var baseProps = svgPropertiesNoEvents(propsWithoutId);
return /*#__PURE__*/React.createElement(Dots, {
points: points,
dot: dot,
className: "recharts-radar-dots",
dotClassName: "recharts-radar-dot",
dataKey: dataKey,
baseProps: baseProps
});
}
export function computeRadarPoints(_ref3) {
var radiusAxis = _ref3.radiusAxis,
angleAxis = _ref3.angleAxis,
displayedData = _ref3.displayedData,
dataKey = _ref3.dataKey,
bandSize = _ref3.bandSize;
var cx = angleAxis.cx,
cy = angleAxis.cy;
var isRange = false;
var points = [];
var angleBandSize = angleAxis.type !== 'number' ? bandSize !== null && bandSize !== void 0 ? bandSize : 0 : 0;
displayedData.forEach((entry, i) => {
var _angleAxis$scale$map, _radiusAxis$scale$map;
var name = getValueByDataKey(entry, angleAxis.dataKey, i);
var value = getValueByDataKey(entry, dataKey);
var angle = ((_angleAxis$scale$map = angleAxis.scale.map(name)) !== null && _angleAxis$scale$map !== void 0 ? _angleAxis$scale$map : 0) + angleBandSize;
var pointValue = Array.isArray(value) ? last(value) : value;
var radius = isNullish(pointValue) ? 0 : (_radiusAxis$scale$map = radiusAxis.scale.map(pointValue)) !== null && _radiusAxis$scale$map !== void 0 ? _radiusAxis$scale$map : 0;
if (Array.isArray(value) && value.length >= 2) {
isRange = true;
}
points.push(_objectSpread(_objectSpread({}, polarToCartesian(cx, cy, radius, angle)), {}, {
// getValueByDataKey does not validate the output type
name,
// getValueByDataKey does not validate the output type
value,
cx,
cy,
radius,
angle,
payload: entry
}));
});
var baseLinePoints = [];
if (isRange) {
points.forEach(point => {
if (Array.isArray(point.value)) {
var _radiusAxis$scale$map2;
var baseValue = point.value[0];
var radius = isNullish(baseValue) ? 0 : (_radiusAxis$scale$map2 = radiusAxis.scale.map(baseValue)) !== null && _radiusAxis$scale$map2 !== void 0 ? _radiusAxis$scale$map2 : 0;
baseLinePoints.push(_objectSpread(_objectSpread({}, point), {}, {
radius
}, polarToCartesian(cx, cy, radius, point.angle)));
} else {
baseLinePoints.push(point);
}
});
}
return {
points,
isRange,
baseLinePoints
};
}
function RadarLabelListProvider(_ref4) {
var showLabels = _ref4.showLabels,
points = _ref4.points,
children = _ref4.children;
/*
* Radar provides a Cartesian label list context. Do we want to also provide a polar label list context?
* That way, users can choose to use polar positions for the Radar labels.
*/
// const labelListEntries: ReadonlyArray<PolarLabelListEntry> = points.map(
// (point): PolarLabelListEntry => ({
// value: point.value,
// payload: point.payload,
// parentViewBox: undefined,
// clockWise: false,
// viewBox: {
// cx: point.cx,
// cy: point.cy,
// innerRadius: point.radius,
// outerRadius: point.radius,
// startAngle: point.angle,
// endAngle: point.angle,
// clockWise: false,
// },
// }),
// );
var labelListEntries = points.map(point => {
var _point$value;
var viewBox = {
x: point.x,
y: point.y,
width: 0,
lowerWidth: 0,
upperWidth: 0,
height: 0
};
return _objectSpread(_objectSpread({}, viewBox), {}, {
value: (_point$value = point.value) !== null && _point$value !== void 0 ? _point$value : '',
payload: point.payload,
parentViewBox: undefined,
viewBox,
fill: undefined
});
});
return /*#__PURE__*/React.createElement(CartesianLabelListContextProvider, {
value: showLabels ? labelListEntries : undefined
}, children);
}
function StaticPolygon(_ref5) {
var points = _ref5.points,
baseLinePoints = _ref5.baseLinePoints,
props = _ref5.props;
if (points == null) {
return null;
}
var shape = props.shape,
isRange = props.isRange,
connectNulls = props.connectNulls;
var handleMouseEnter = e => {
var onMouseEnter = props.onMouseEnter;
if (onMouseEnter) {
onMouseEnter(props, e);
}
};
var handleMouseLeave = e => {
var onMouseLeave = props.onMouseLeave;
if (onMouseLeave) {
onMouseLeave(props, e);
}
};
var radar;
if (/*#__PURE__*/React.isValidElement(shape)) {
radar = /*#__PURE__*/React.cloneElement(shape, _objectSpread(_objectSpread({}, props), {}, {
points
}));
} else if (typeof shape === 'function') {
radar = shape(_objectSpread(_objectSpread({}, props), {}, {
points
}));
} else {
radar = /*#__PURE__*/React.createElement(Polygon, _extends({}, svgPropertiesAndEvents(props), {
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
points: points,
baseLinePoints: isRange ? baseLinePoints : undefined,
connectNulls: connectNulls
}));
}
return /*#__PURE__*/React.createElement(Layer, {
className: "recharts-radar-polygon"
}, radar, /*#__PURE__*/React.createElement(RadarDotsWrapper, {
props: props,
points: points
}));
}
var defaultRadarAnimateItems = (items, animationElapsedTime) => {
if (items == null) return [];
if (animationElapsedTime === 1) {
return items.flatMap(item => item.status === 'removed' ? [] : [item.next]);
}
return items.flatMap(item => {
if (item.status === 'removed') return [];
if (item.status === 'matched') {
return [_objectSpread(_objectSpread({}, item.next), {}, {
x: interpolate(item.prev.x, item.next.x, animationElapsedTime),
y: interpolate(item.prev.y, item.next.y, animationElapsedTime)
})];
}
// added: animate from center
return [_objectSpread(_objectSpread({}, item.next), {}, {
x: interpolate(item.next.cx, item.next.x, animationElapsedTime),
y: interpolate(item.next.cy, item.next.y, animationElapsedTime)
})];
});
};
function PolygonWithAnimation(_ref6) {
var props = _ref6.props,
previousPointsRef = _ref6.previousPointsRef,
previousBaseLinePointsRef = _ref6.previousBaseLinePointsRef;
var points = props.points,
baseLinePoints = props.baseLinePoints,
isAnimationActive = props.isAnimationActive,
animationBegin = props.animationBegin,
animationDuration = props.animationDuration,
animationEasing = props.animationEasing,
animationMatchBy = props.animationMatchBy,
animationInterpolateFn = props.animationInterpolateFn,
onAnimationStart = props.onAnimationStart,
onAnimationEnd = props.onAnimationEnd;
var baseLineAnimationState = useAnimationStartSnapshot(props, previousBaseLinePointsRef);
var prevBaseLinePoints = baseLineAnimationState.startValue;
var baseLineAnimationItems = matchAnimationItems(prevBaseLinePoints !== null && prevBaseLinePoints !== void 0 ? prevBaseLinePoints : null, baseLinePoints, animationMatchBy);
var _useAnimationCallback = useAnimationCallbacks(onAnimationStart, onAnimationEnd),
isAnimating = _useAnimationCallback.isAnimating,
handleAnimationStart = _useAnimationCallback.handleAnimationStart,
handleAnimationEnd = _useAnimationCallback.handleAnimationEnd;
var layout = usePolarChartLayout();
if (layout == null) return null;
return /*#__PURE__*/React.createElement(RadarLabelListProvider, {
showLabels: !isAnimating,
points: points
}, /*#__PURE__*/React.createElement(AnimatedItems, {
animationInput: props,
animationIdPrefix: "recharts-radar-",
items: points,
previousItemsRef: previousPointsRef,
isAnimationActive: isAnimationActive,
animationBegin: animationBegin,
animationDuration: animationDuration,
animationEasing: animationEasing,
onAnimationStart: handleAnimationStart,
onAnimationEnd: handleAnimationEnd,
animationInterpolateFn: animationInterpolateFn,
animationMatchBy: animationMatchBy,
layout: layout
}, (stepData, animationElapsedTime) => {
var stepBaseLinePoints = animationElapsedTime === 1 ? baseLinePoints : animationInterpolateFn(baseLineAnimationItems, animationElapsedTime, layout);
baseLineAnimationState.syncStepValue(stepBaseLinePoints, animationElapsedTime);
return /*#__PURE__*/React.createElement(StaticPolygon, {
points: stepData,
baseLinePoints: stepBaseLinePoints,
props: props
});
}), /*#__PURE__*/React.createElement(LabelListFromLabelProp, {
label: props.label
}), props.children);
}
function RenderPolygon(props) {
var previousPointsRef = useRef(undefined);
var previousBaseLinePointsRef = useRef(undefined);
return /*#__PURE__*/React.createElement(PolygonWithAnimation, {
props: props,
previousPointsRef: previousPointsRef,
previousBaseLinePointsRef: previousBaseLinePointsRef
});
}
export var defaultRadarProps = {
activeDot: true,
angleAxisId: 0,
animationBegin: 0,
animationDuration: 1500,
animationEasing: 'ease',
animationMatchBy: matchByIndex,
animationInterpolateFn: defaultRadarAnimateItems,
dot: false,
hide: false,
isAnimationActive: 'auto',
label: false,
legendType: 'rect',
radiusAxisId: 0,
zIndex: DefaultZIndexes.area
};
function RadarWithState(props) {
var hide = props.hide,
className = props.className,
points = props.points;
if (hide) {
return null;
}
var layerClass = clsx('recharts-radar', className);
return /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: props.zIndex
}, /*#__PURE__*/React.createElement(Layer, {
className: layerClass
}, /*#__PURE__*/React.createElement(RenderPolygon, props)), /*#__PURE__*/React.createElement(ActivePoints, {
points: points,
mainColor: getLegendItemColor(props.stroke, props.fill),
itemDataKey: props.dataKey,
activeDot: props.activeDot
}));
}
function RadarImpl(props) {
var isPanorama = useIsPanorama();
var radarPoints = useAppSelector(state => selectRadarPoints(state, props.radiusAxisId, props.angleAxisId, isPanorama, props.id));
if ((radarPoints === null || radarPoints === void 0 ? void 0 : radarPoints.points) == null) {
return null;
}
return /*#__PURE__*/React.createElement(RadarWithState, _extends({}, props, {
points: radarPoints === null || radarPoints === void 0 ? void 0 : radarPoints.points,
baseLinePoints: radarPoints === null || radarPoints === void 0 ? void 0 : radarPoints.baseLinePoints,
isRange: radarPoints === null || radarPoints === void 0 ? void 0 : radarPoints.isRange
}));
}
/**
* @consumes PolarChartContext
* @provides LabelListContext
*/
export function Radar(outsideProps) {
var props = resolveDefaultProps(outsideProps, defaultRadarProps);
return /*#__PURE__*/React.createElement(RegisterGraphicalItemId, {
id: props.id,
type: "radar"
}, id => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetPolarGraphicalItem, {
type: "radar",
id: id,
data: undefined // Radar does not have data prop, why?
,
dataKey: props.dataKey,
hide: props.hide,
angleAxisId: props.angleAxisId,
radiusAxisId: props.radiusAxisId
}), /*#__PURE__*/React.createElement(SetPolarLegendPayload, {
legendPayload: computeLegendPayloadFromRadarSectors(props)
}), /*#__PURE__*/React.createElement(SetRadarTooltipEntrySettings, {
dataKey: props.dataKey,
stroke: props.stroke,
strokeWidth: props.strokeWidth,
fill: props.fill,
name: props.name,
hide: props.hide,
tooltipType: props.tooltipType,
id: id
}), /*#__PURE__*/React.createElement(RadarImpl, _extends({}, props, {
id: id
}))));
}
Radar.displayName = 'Radar';

464
frontend/node_modules/recharts/es6/polar/RadialBar.js generated vendored Normal file
View file

@ -0,0 +1,464 @@
var _excluded = ["shape", "activeShape", "cornerRadius", "id"],
_excluded2 = ["onMouseEnter", "onClick", "onMouseLeave"],
_excluded3 = ["value", "background"];
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); }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
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; }
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; }
import * as React from 'react';
import { PureComponent, useRef } from 'react';
import { clsx } from 'clsx';
import { defaultRadialBarShape, parseCornerRadius, RadialBarSector } from '../util/RadialBarUtils';
import { Layer } from '../container/Layer';
import { findAllByType } from '../util/ReactUtils';
import { LabelListFromLabelProp, PolarLabelListContextProvider } from '../component/LabelList';
import { Cell } from '../component/Cell';
import { interpolate, mathSign, noop } from '../util/DataUtils';
import { getCateCoordinateOfBar, getNormalizedStackId, getTooltipNameProp, getValueByDataKey, truncateByDomain } from '../util/ChartUtils';
import { adaptEventsOfChild } from '../util/types';
import { useMouseClickItemDispatch, useMouseEnterItemDispatch, useMouseLeaveItemDispatch } from '../context/tooltipContext';
import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings';
import { selectRadialBarLegendPayload, selectRadialBarSectors } from '../state/selectors/radialBarSelectors';
import { useAppSelector } from '../state/hooks';
import { selectActiveTooltipIndex } from '../state/selectors/tooltipSelectors';
import { SetPolarLegendPayload } from '../state/SetLegendPayload';
import { AnimatedItems, useAnimationCallbacks } from '../animation/AnimatedItems';
import { matchAppend } from '../animation/matchBy';
import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId';
import { SetPolarGraphicalItem } from '../state/SetGraphicalItem';
import { svgPropertiesNoEvents, svgPropertiesNoEventsFromUnknown } from '../util/svgPropertiesNoEvents';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { ZIndexLayer } from '../zIndex/ZIndexLayer';
import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
import { getZIndexFromUnknown } from '../zIndex/getZIndexFromUnknown';
import { usePolarChartLayout } from '../context/chartLayoutContext';
var STABLE_EMPTY_ARRAY = [];
function RadialBarLabelListProvider(_ref) {
var showLabels = _ref.showLabels,
sectors = _ref.sectors,
children = _ref.children;
var labelListEntries = sectors.map(sector => ({
value: sector.value,
payload: sector.payload,
parentViewBox: undefined,
clockWise: false,
viewBox: {
cx: sector.cx,
cy: sector.cy,
innerRadius: sector.innerRadius,
outerRadius: sector.outerRadius,
startAngle: sector.startAngle,
endAngle: sector.endAngle,
clockWise: false
},
fill: sector.fill
}));
return /*#__PURE__*/React.createElement(PolarLabelListContextProvider, {
value: showLabels ? labelListEntries : undefined
}, children);
}
function RadialBarSectors(_ref2) {
var sectors = _ref2.sectors,
allOtherRadialBarProps = _ref2.allOtherRadialBarProps,
showLabels = _ref2.showLabels,
animationElapsedTime = _ref2.animationElapsedTime,
isAnimating = _ref2.isAnimating,
isEntrance = _ref2.isEntrance;
var shape = allOtherRadialBarProps.shape,
activeShape = allOtherRadialBarProps.activeShape,
cornerRadius = allOtherRadialBarProps.cornerRadius,
id = allOtherRadialBarProps.id,
others = _objectWithoutProperties(allOtherRadialBarProps, _excluded);
var baseProps = svgPropertiesNoEvents(others);
var activeIndex = useAppSelector(selectActiveTooltipIndex);
var onMouseEnterFromProps = allOtherRadialBarProps.onMouseEnter,
onItemClickFromProps = allOtherRadialBarProps.onClick,
onMouseLeaveFromProps = allOtherRadialBarProps.onMouseLeave,
restOfAllOtherProps = _objectWithoutProperties(allOtherRadialBarProps, _excluded2);
var onMouseEnterFromContext = useMouseEnterItemDispatch(onMouseEnterFromProps, allOtherRadialBarProps.dataKey, id);
var onMouseLeaveFromContext = useMouseLeaveItemDispatch(onMouseLeaveFromProps);
var onClickFromContext = useMouseClickItemDispatch(onItemClickFromProps, allOtherRadialBarProps.dataKey, id);
if (sectors == null) {
return null;
}
return /*#__PURE__*/React.createElement(RadialBarLabelListProvider, {
showLabels: showLabels,
sectors: sectors
}, sectors.map((entry, i) => {
var isActive = Boolean(activeShape && activeIndex === String(i));
var onMouseEnter = onMouseEnterFromContext(entry, i);
var onMouseLeave = onMouseLeaveFromContext(entry, i);
var onClick = onClickFromContext(entry, i);
var radialBarSectorProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, baseProps), {}, {
cornerRadius: parseCornerRadius(cornerRadius)
}, entry), adaptEventsOfChild(restOfAllOtherProps, entry, i)), {}, {
onMouseEnter,
onMouseLeave,
onClick,
className: "recharts-radial-bar-sector ".concat(entry.className),
forceCornerRadius: others.forceCornerRadius,
cornerIsExternal: others.cornerIsExternal,
animationElapsedTime,
isAnimating,
isEntrance,
isActive,
option: isActive && activeShape != null ? activeShape : shape,
index: i
});
if (isActive) {
return /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: DefaultZIndexes.activeBar,
key: "sector-".concat(entry.cx, "-").concat(entry.cy, "-").concat(entry.innerRadius, "-").concat(entry.outerRadius, "-").concat(entry.startAngle, "-").concat(entry.endAngle, "-").concat(i)
}, /*#__PURE__*/React.createElement(RadialBarSector, radialBarSectorProps));
}
return /*#__PURE__*/React.createElement(RadialBarSector, _extends({
key: "sector-".concat(entry.cx, "-").concat(entry.cy, "-").concat(entry.innerRadius, "-").concat(entry.outerRadius, "-").concat(entry.startAngle, "-").concat(entry.endAngle, "-").concat(i)
}, radialBarSectorProps));
}), /*#__PURE__*/React.createElement(LabelListFromLabelProp, {
label: allOtherRadialBarProps.label
}), allOtherRadialBarProps.children);
}
var defaultRadialBarAnimateItems = (items, animationElapsedTime) => {
if (items == null) return [];
if (animationElapsedTime === 1) {
return items.flatMap(item => item.status === 'removed' ? [] : [item.next]);
}
return items.flatMap(item => {
if (item.status === 'removed') return [];
if (item.status === 'matched') {
return [_objectSpread(_objectSpread({}, item.next), {}, {
startAngle: interpolate(item.prev.startAngle, item.next.startAngle, animationElapsedTime),
endAngle: interpolate(item.prev.endAngle, item.next.endAngle, animationElapsedTime)
})];
}
// added
return [_objectSpread(_objectSpread({}, item.next), {}, {
endAngle: interpolate(item.next.startAngle, item.next.endAngle, animationElapsedTime)
})];
});
};
function SectorsWithAnimation(_ref3) {
var props = _ref3.props,
previousSectorsRef = _ref3.previousSectorsRef;
var sectors = props.sectors,
isAnimationActive = props.isAnimationActive,
animationBegin = props.animationBegin,
animationDuration = props.animationDuration,
animationEasing = props.animationEasing,
onAnimationStart = props.onAnimationStart,
onAnimationEnd = props.onAnimationEnd;
var _useAnimationCallback = useAnimationCallbacks(onAnimationStart, onAnimationEnd),
isAnimating = _useAnimationCallback.isAnimating,
handleAnimationStart = _useAnimationCallback.handleAnimationStart,
handleAnimationEnd = _useAnimationCallback.handleAnimationEnd;
var layout = usePolarChartLayout();
if (layout == null) return null;
return /*#__PURE__*/React.createElement(AnimatedItems, {
animationInput: props,
animationIdPrefix: "recharts-radialbar-",
items: sectors,
previousItemsRef: previousSectorsRef,
isAnimationActive: isAnimationActive,
animationBegin: animationBegin,
animationDuration: animationDuration,
animationEasing: animationEasing,
onAnimationStart: handleAnimationStart,
onAnimationEnd: handleAnimationEnd,
animationInterpolateFn: props.animationInterpolateFn,
animationMatchBy: props.animationMatchBy,
layout: layout
}, (stepData, animationElapsedTime, isEntrance) => /*#__PURE__*/React.createElement(RadialBarSectors, {
sectors: stepData,
allOtherRadialBarProps: props,
showLabels: !isAnimating,
animationElapsedTime: animationElapsedTime,
isAnimating: isAnimating || animationElapsedTime < 1,
isEntrance: isEntrance
}));
}
function RenderSectors(props) {
var previousSectorsRef = useRef(null);
return /*#__PURE__*/React.createElement(SectorsWithAnimation, {
props: props,
previousSectorsRef: previousSectorsRef
});
}
function SetRadialBarPayloadLegend(props) {
var legendPayload = useAppSelector(state => selectRadialBarLegendPayload(state, props.legendType));
return /*#__PURE__*/React.createElement(SetPolarLegendPayload, {
legendPayload: legendPayload !== null && legendPayload !== void 0 ? legendPayload : []
});
}
var SetRadialBarTooltipEntrySettings = /*#__PURE__*/React.memo(_ref4 => {
var dataKey = _ref4.dataKey,
sectors = _ref4.sectors,
stroke = _ref4.stroke,
strokeWidth = _ref4.strokeWidth,
name = _ref4.name,
hide = _ref4.hide,
fill = _ref4.fill,
tooltipType = _ref4.tooltipType,
formatter = _ref4.formatter,
id = _ref4.id;
var tooltipEntrySettings = {
dataDefinedOnItem: sectors,
getPosition: noop,
settings: {
graphicalItemId: id,
stroke,
strokeWidth,
fill,
nameKey: undefined,
// RadialBar does not have nameKey, why?
dataKey,
name: getTooltipNameProp(name, dataKey),
hide,
type: tooltipType,
color: fill,
unit: '',
// Why does RadialBar not support unit?
formatter
}
};
return /*#__PURE__*/React.createElement(SetTooltipEntrySettings, {
tooltipEntrySettings: tooltipEntrySettings
});
});
class RadialBarWithState extends PureComponent {
renderBackground(sectors) {
if (sectors == null) {
return null;
}
var cornerRadius = this.props.cornerRadius;
var backgroundProps = svgPropertiesNoEventsFromUnknown(this.props.background);
return /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: getZIndexFromUnknown(this.props.background, DefaultZIndexes.barBackground)
}, sectors.map((entry, i) => {
var value = entry.value,
background = entry.background,
rest = _objectWithoutProperties(entry, _excluded3);
if (!background) {
return null;
}
var props = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
cornerRadius: parseCornerRadius(cornerRadius)
}, rest), {}, {
// @ts-expect-error backgroundProps is contributing unknown props
fill: '#eee'
}, background), backgroundProps), adaptEventsOfChild(this.props, entry, i)), {}, {
index: i,
className: clsx('recharts-radial-bar-background-sector', String(backgroundProps === null || backgroundProps === void 0 ? void 0 : backgroundProps.className)),
option: background,
isActive: false
});
return /*#__PURE__*/React.createElement(RadialBarSector, _extends({
key: "background-".concat(rest.cx, "-").concat(rest.cy, "-").concat(rest.innerRadius, "-").concat(rest.outerRadius, "-").concat(rest.startAngle, "-").concat(rest.endAngle, "-").concat(i)
}, props));
}));
}
render() {
var _this$props = this.props,
hide = _this$props.hide,
sectors = _this$props.sectors,
className = _this$props.className,
background = _this$props.background;
if (hide) {
return null;
}
var layerClass = clsx('recharts-area', className);
return /*#__PURE__*/React.createElement(ZIndexLayer, {
zIndex: this.props.zIndex
}, /*#__PURE__*/React.createElement(Layer, {
className: layerClass
}, background && /*#__PURE__*/React.createElement(Layer, {
className: "recharts-radial-bar-background"
}, this.renderBackground(sectors)), /*#__PURE__*/React.createElement(Layer, {
className: "recharts-radial-bar-sectors"
}, /*#__PURE__*/React.createElement(RenderSectors, this.props))));
}
}
function RadialBarImpl(props) {
var _useAppSelector;
var cells = React.useMemo(() => findAllByType(props.children, Cell), [props.children]);
var radialBarSettings = React.useMemo(() => ({
data: undefined,
hide: false,
id: props.id,
dataKey: props.dataKey,
minPointSize: props.minPointSize,
stackId: getNormalizedStackId(props.stackId),
maxBarSize: props.maxBarSize,
barSize: props.barSize,
type: 'radialBar',
angleAxisId: props.angleAxisId,
radiusAxisId: props.radiusAxisId
}), [props.id, props.dataKey, props.minPointSize, props.stackId, props.maxBarSize, props.barSize, props.angleAxisId, props.radiusAxisId]);
var sectors = (_useAppSelector = useAppSelector(state => selectRadialBarSectors(state, props.radiusAxisId, props.angleAxisId, radialBarSettings, cells))) !== null && _useAppSelector !== void 0 ? _useAppSelector : STABLE_EMPTY_ARRAY;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetRadialBarTooltipEntrySettings, {
dataKey: props.dataKey,
sectors: sectors,
stroke: props.stroke,
strokeWidth: props.strokeWidth,
name: props.name,
hide: props.hide,
fill: props.fill,
tooltipType: props.tooltipType,
formatter: props.formatter,
id: props.id
}), /*#__PURE__*/React.createElement(RadialBarWithState, _extends({}, props, {
sectors: sectors
})));
}
export var defaultRadialBarProps = {
angleAxisId: 0,
animationBegin: 0,
animationDuration: 1500,
animationEasing: 'ease',
animationMatchBy: matchAppend,
animationInterpolateFn: defaultRadialBarAnimateItems,
background: false,
cornerIsExternal: false,
cornerRadius: 0,
forceCornerRadius: false,
hide: false,
isAnimationActive: 'auto',
label: false,
legendType: 'rect',
minPointSize: 0,
radiusAxisId: 0,
shape: defaultRadialBarShape,
zIndex: DefaultZIndexes.bar
};
export function computeRadialBarDataItems(_ref5) {
var displayedData = _ref5.displayedData,
stackedData = _ref5.stackedData,
dataStartIndex = _ref5.dataStartIndex,
stackedDomain = _ref5.stackedDomain,
dataKey = _ref5.dataKey,
baseValue = _ref5.baseValue,
layout = _ref5.layout,
radiusAxis = _ref5.radiusAxis,
radiusAxisTicks = _ref5.radiusAxisTicks,
bandSize = _ref5.bandSize,
pos = _ref5.pos,
angleAxis = _ref5.angleAxis,
minPointSize = _ref5.minPointSize,
cx = _ref5.cx,
cy = _ref5.cy,
angleAxisTicks = _ref5.angleAxisTicks,
cells = _ref5.cells,
rootStartAngle = _ref5.startAngle,
rootEndAngle = _ref5.endAngle;
if (angleAxisTicks == null || radiusAxisTicks == null) {
return STABLE_EMPTY_ARRAY;
}
return (displayedData !== null && displayedData !== void 0 ? displayedData : []).map((entry, index) => {
var value, innerRadius, outerRadius, startAngle, endAngle, backgroundSector;
if (stackedData) {
// @ts-expect-error truncateByDomain expects only numerical domain, but it can received categorical domain too
value = truncateByDomain(stackedData[dataStartIndex + index], stackedDomain);
} else {
value = getValueByDataKey(entry, dataKey);
if (!Array.isArray(value)) {
value = [baseValue, value];
}
}
if (layout === 'radial') {
var _angleAxis$scale$map, _angleAxis$scale$map2;
startAngle = (_angleAxis$scale$map = angleAxis.scale.map(value[0])) !== null && _angleAxis$scale$map !== void 0 ? _angleAxis$scale$map : rootStartAngle;
endAngle = (_angleAxis$scale$map2 = angleAxis.scale.map(value[1])) !== null && _angleAxis$scale$map2 !== void 0 ? _angleAxis$scale$map2 : rootEndAngle;
innerRadius = getCateCoordinateOfBar({
axis: radiusAxis,
ticks: radiusAxisTicks,
bandSize,
offset: pos.offset,
entry,
index
});
if (innerRadius != null && endAngle != null && startAngle != null) {
outerRadius = innerRadius + pos.size;
var deltaAngle = endAngle - startAngle;
if (Math.abs(minPointSize) > 0 && Math.abs(deltaAngle) < Math.abs(minPointSize)) {
var delta = mathSign(deltaAngle || minPointSize) * (Math.abs(minPointSize) - Math.abs(deltaAngle));
endAngle += delta;
}
backgroundSector = {
background: {
cx,
cy,
innerRadius,
outerRadius,
startAngle: rootStartAngle,
endAngle: rootEndAngle
}
};
}
} else {
innerRadius = radiusAxis.scale.map(value[0]);
outerRadius = radiusAxis.scale.map(value[1]);
startAngle = getCateCoordinateOfBar({
axis: angleAxis,
ticks: angleAxisTicks,
bandSize,
offset: pos.offset,
entry,
index
});
if (innerRadius != null && outerRadius != null && startAngle != null) {
endAngle = startAngle + pos.size;
var deltaRadius = outerRadius - innerRadius;
if (Math.abs(minPointSize) > 0 && Math.abs(deltaRadius) < Math.abs(minPointSize)) {
var _delta = mathSign(deltaRadius || minPointSize) * (Math.abs(minPointSize) - Math.abs(deltaRadius));
outerRadius += _delta;
}
}
}
return _objectSpread(_objectSpread(_objectSpread({}, entry), backgroundSector), {}, {
payload: entry,
value: stackedData ? value : value[1],
cx,
cy,
innerRadius,
outerRadius,
startAngle,
// @ts-expect-error endAngle is used before assigned (?)
endAngle
}, cells && cells[index] && cells[index].props);
});
}
/**
* @consumes PolarChartContext
* @provides LabelListContext
* @provides CellReader
*/
export function RadialBar(outsideProps) {
var props = resolveDefaultProps(outsideProps, defaultRadialBarProps);
return /*#__PURE__*/React.createElement(RegisterGraphicalItemId, {
id: props.id,
type: "radialBar"
}, id => {
var _props$hide, _props$angleAxisId, _props$radiusAxisId;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetPolarGraphicalItem, {
type: "radialBar",
id: id,
data: undefined // why does RadialBar not allow data defined on the item?
,
dataKey: props.dataKey,
hide: (_props$hide = props.hide) !== null && _props$hide !== void 0 ? _props$hide : defaultRadialBarProps.hide,
angleAxisId: (_props$angleAxisId = props.angleAxisId) !== null && _props$angleAxisId !== void 0 ? _props$angleAxisId : defaultRadialBarProps.angleAxisId,
radiusAxisId: (_props$radiusAxisId = props.radiusAxisId) !== null && _props$radiusAxisId !== void 0 ? _props$radiusAxisId : defaultRadialBarProps.radiusAxisId,
stackId: getNormalizedStackId(props.stackId),
barSize: props.barSize,
minPointSize: props.minPointSize,
maxBarSize: props.maxBarSize
}), /*#__PURE__*/React.createElement(SetRadialBarPayloadLegend, props), /*#__PURE__*/React.createElement(RadialBarImpl, _extends({}, props, {
id: id
})));
});
}
RadialBar.displayName = 'RadialBar';

View file

@ -0,0 +1,25 @@
import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
export var defaultPolarAngleAxisProps = {
allowDecimals: false,
allowDuplicatedCategory: true,
// if I set this to false then Tooltip synchronisation stops working in Radar, wtf
allowDataOverflow: false,
angle: 0,
angleAxisId: 0,
axisLine: true,
axisLineType: 'polygon',
cx: 0,
cy: 0,
hide: false,
includeHidden: false,
label: false,
niceTicks: 'auto',
orientation: 'outer',
reversed: false,
scale: 'auto',
tick: true,
tickLine: true,
tickSize: 8,
type: 'auto',
zIndex: DefaultZIndexes.axis
};

View file

@ -0,0 +1,22 @@
import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
export var defaultPolarRadiusAxisProps = {
allowDataOverflow: false,
allowDecimals: false,
allowDuplicatedCategory: true,
angle: 0,
axisLine: true,
includeHidden: false,
hide: false,
niceTicks: 'auto',
label: false,
orientation: 'right',
radiusAxisId: 0,
reversed: false,
scale: 'auto',
stroke: '#ccc',
tick: true,
tickCount: 5,
tickLine: true,
type: 'auto',
zIndex: DefaultZIndexes.axis
};

50
frontend/node_modules/recharts/es6/shape/Cross.js generated vendored Normal file
View file

@ -0,0 +1,50 @@
var _excluded = ["x", "y", "top", "left", "width", "height", "className"];
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); }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
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; }
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; }
/**
* @fileOverview Cross
*/
import * as React from 'react';
import { clsx } from 'clsx';
import { isNumber } from '../util/DataUtils';
import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents';
var getPath = (x, y, width, height, top, left) => {
return "M".concat(x, ",").concat(top, "v").concat(height, "M").concat(left, ",").concat(y, "h").concat(width);
};
export var Cross = _ref => {
var _ref$x = _ref.x,
x = _ref$x === void 0 ? 0 : _ref$x,
_ref$y = _ref.y,
y = _ref$y === void 0 ? 0 : _ref$y,
_ref$top = _ref.top,
top = _ref$top === void 0 ? 0 : _ref$top,
_ref$left = _ref.left,
left = _ref$left === void 0 ? 0 : _ref$left,
_ref$width = _ref.width,
width = _ref$width === void 0 ? 0 : _ref$width,
_ref$height = _ref.height,
height = _ref$height === void 0 ? 0 : _ref$height,
className = _ref.className,
rest = _objectWithoutProperties(_ref, _excluded);
var props = _objectSpread({
x,
y,
top,
left,
width,
height
}, rest);
if (!isNumber(x) || !isNumber(y) || !isNumber(width) || !isNumber(height) || !isNumber(top) || !isNumber(left)) {
return null;
}
return /*#__PURE__*/React.createElement("path", _extends({}, svgPropertiesAndEvents(props), {
className: clsx('recharts-cross', className),
d: getPath(x, y, width, height, top, left)
}));
};

146
frontend/node_modules/recharts/es6/shape/Curve.js generated vendored Normal file
View file

@ -0,0 +1,146 @@
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); }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
/**
* @fileOverview Curve
*/
import * as React from 'react';
import { area as shapeArea, curveBasis, curveBasisClosed, curveBasisOpen, curveBumpX, curveBumpY, curveLinear, curveLinearClosed, curveMonotoneX, curveMonotoneY, curveNatural, curveStep, curveStepAfter, curveStepBefore, line as shapeLine } from 'victory-vendor/d3-shape';
import { clsx } from 'clsx';
import { adaptEventHandlers } from '../util/types';
import { isNumber, upperFirst } from '../util/DataUtils';
import { isWellBehavedNumber } from '../util/isWellBehavedNumber';
import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
import { useChartLayout } from '../context/chartLayoutContext';
var CURVE_FACTORIES = {
curveBasisClosed,
curveBasisOpen,
curveBasis,
curveBumpX,
curveBumpY,
curveLinearClosed,
curveLinear,
curveMonotoneX,
curveMonotoneY,
curveNatural,
curveStep,
curveStepAfter,
curveStepBefore
};
/**
* @inline
*/
/**
* @inline
*/
var defined = p => isWellBehavedNumber(p.x) && isWellBehavedNumber(p.y);
var areaDefined = d => d.base != null && defined(d.base) && defined(d);
var getX = p => p.x;
var getY = p => p.y;
var getCurveFactory = (type, layout) => {
if (typeof type === 'function') {
return type;
}
var name = "curve".concat(upperFirst(type));
if ((name === 'curveMonotone' || name === 'curveBump') && layout) {
var factory = CURVE_FACTORIES["".concat(name).concat(layout === 'vertical' ? 'Y' : 'X')];
if (factory) {
return factory;
}
}
return CURVE_FACTORIES[name] || curveLinear;
};
// Mouse event handlers receive the full Props, including the event handlers themselves.
export var defaultCurveProps = {
connectNulls: false,
type: 'linear'
};
/**
* Calculate the path of curve. Returns null if points is an empty array.
* @return path or null
*/
export var getPath = _ref => {
var _ref$type = _ref.type,
type = _ref$type === void 0 ? defaultCurveProps.type : _ref$type,
_ref$points = _ref.points,
points = _ref$points === void 0 ? [] : _ref$points,
baseLine = _ref.baseLine,
layout = _ref.layout,
_ref$connectNulls = _ref.connectNulls,
connectNulls = _ref$connectNulls === void 0 ? defaultCurveProps.connectNulls : _ref$connectNulls;
var curveFactory = getCurveFactory(type, layout);
var formatPoints = connectNulls ? points.filter(defined) : points;
// When dealing with an area chart (where `baseLine` is an array),
// we need to pair points with their corresponding `baseLine` points first.
// This is to ensure that we filter points and their baseline counterparts together,
// preventing errors from mismatched array lengths and ensuring `defined` checks both.
if (Array.isArray(baseLine)) {
var _lineFunction;
var areaPoints = points.map((entry, index) => _objectSpread(_objectSpread({}, entry), {}, {
base: baseLine[index]
}));
if (layout === 'vertical') {
_lineFunction = shapeArea().y(getY).x1(getX).x0(d => d.base.x);
} else {
_lineFunction = shapeArea().x(getX).y1(getY).y0(d => d.base.y);
}
/*
* What happens here is that the `.defined()` call will make it so that this function can accept
* nullable points, and internally it will filter them out and skip when generating the path.
* So on the input it accepts NullableCoordinate, but it never calls getX/getY on null points because of the defined() filter.
*
* The d3 type definition has only one generic so it doesn't allow to describe this properly.
* However. d3 types are mutable, but we can pretend that they are not, and we can pretend
* that calling defined() returns a new function with a different generic type.
*/
// @ts-expect-error the defined call changes the generic type internally but d3 types don't reflect that
var _nullableLineFunction = _lineFunction.defined(areaDefined).curve(curveFactory);
var finalPoints = connectNulls ? areaPoints.filter(areaDefined) : areaPoints;
return _nullableLineFunction(finalPoints);
}
var lineFunction;
if (layout === 'vertical' && isNumber(baseLine)) {
lineFunction = shapeArea().y(getY).x1(getX).x0(baseLine);
} else if (isNumber(baseLine)) {
lineFunction = shapeArea().x(getX).y1(getY).y0(baseLine);
} else {
lineFunction = shapeLine().x(getX).y(getY);
}
// @ts-expect-error the defined call changes the generic type internally but d3 types don't reflect that
var nullableLineFunction = lineFunction.defined(defined).curve(curveFactory);
return nullableLineFunction(formatPoints);
};
export var Curve = props => {
var className = props.className,
points = props.points,
path = props.path,
pathRef = props.pathRef;
var layout = useChartLayout();
if ((!points || !points.length) && !path) {
return null;
}
var getPathInput = {
type: props.type,
points: props.points,
baseLine: props.baseLine,
layout: props.layout || layout,
connectNulls: props.connectNulls
};
var realPath = points && points.length ? getPath(getPathInput) : path;
return /*#__PURE__*/React.createElement("path", _extends({}, svgPropertiesNoEvents(props), adaptEventHandlers(props), {
className: clsx('recharts-curve', className),
d: realPath === null ? undefined : realPath,
ref: pathRef
}));
};

32
frontend/node_modules/recharts/es6/shape/Dot.js generated vendored Normal file
View file

@ -0,0 +1,32 @@
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); }
import * as React from 'react';
import { clsx } from 'clsx';
import { adaptEventHandlers } from '../util/types';
import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
import { isNumber } from '../util/DataUtils';
/**
* Renders a dot in the chart.
*
* This component accepts X and Y coordinates in pixels.
* If you need to position the rectangle based on your chart's data,
* consider using the {@link ReferenceDot} component instead.
*
* @param props
* @constructor
*/
export var Dot = props => {
var cx = props.cx,
cy = props.cy,
r = props.r,
className = props.className;
var layerClass = clsx('recharts-dot', className);
if (isNumber(cx) && isNumber(cy) && isNumber(r)) {
return /*#__PURE__*/React.createElement("circle", _extends({}, svgPropertiesNoEvents(props), adaptEventHandlers(props), {
className: layerClass,
cx: cx,
cy: cy,
r: r
}));
}
return null;
};

93
frontend/node_modules/recharts/es6/shape/Polygon.js generated vendored Normal file
View file

@ -0,0 +1,93 @@
var _excluded = ["points", "className", "baseLinePoints", "connectNulls"];
var _templateObject;
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); }
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; }
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; }
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
/**
* @fileOverview Polygon
*/
import * as React from 'react';
import { clsx } from 'clsx';
import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents';
import { roundTemplateLiteral } from '../util/round';
var isValidatePoint = point => {
return point != null && point.x === +point.x && point.y === +point.y;
};
var getParsedPoints = function getParsedPoints() {
var points = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
var segmentPoints = [[]];
points.forEach(entry => {
var lastLink = segmentPoints[segmentPoints.length - 1];
if (isValidatePoint(entry)) {
if (lastLink) {
lastLink.push(entry);
}
} else if (lastLink && lastLink.length > 0) {
// add another path
segmentPoints.push([]);
}
});
var firstPoint = points[0];
var lastLink = segmentPoints[segmentPoints.length - 1];
if (isValidatePoint(firstPoint) && lastLink) {
lastLink.push(firstPoint);
}
var finalLink = segmentPoints[segmentPoints.length - 1];
if (finalLink && finalLink.length <= 0) {
segmentPoints = segmentPoints.slice(0, -1);
}
return segmentPoints;
};
var getSinglePolygonPath = (points, connectNulls) => {
var segmentPoints = getParsedPoints(points);
if (connectNulls) {
segmentPoints = [segmentPoints.reduce((res, segPoints) => {
return [...res, ...segPoints];
}, [])];
}
var polygonPath = segmentPoints.map(segPoints => {
return segPoints.reduce((path, point, index) => {
return roundTemplateLiteral(_templateObject || (_templateObject = _taggedTemplateLiteral(["", "", "", ",", ""])), path, index === 0 ? 'M' : 'L', point.x, point.y);
}, '');
}).join('');
return segmentPoints.length === 1 ? "".concat(polygonPath, "Z") : polygonPath;
};
var getRanglePath = (points, baseLinePoints, connectNulls) => {
var outerPath = getSinglePolygonPath(points, connectNulls);
return "".concat(outerPath.slice(-1) === 'Z' ? outerPath.slice(0, -1) : outerPath, "L").concat(getSinglePolygonPath(Array.from(baseLinePoints).reverse(), connectNulls).slice(1));
};
export var Polygon = props => {
var points = props.points,
className = props.className,
baseLinePoints = props.baseLinePoints,
connectNulls = props.connectNulls,
others = _objectWithoutProperties(props, _excluded);
if (!points || !points.length) {
return null;
}
var layerClass = clsx('recharts-polygon', className);
if (baseLinePoints && baseLinePoints.length) {
var hasStroke = others.stroke && others.stroke !== 'none';
var rangePath = getRanglePath(points, baseLinePoints, connectNulls);
return /*#__PURE__*/React.createElement("g", {
className: layerClass
}, /*#__PURE__*/React.createElement("path", _extends({}, svgPropertiesAndEvents(others), {
fill: rangePath.slice(-1) === 'Z' ? others.fill : 'none',
stroke: "none",
d: rangePath
})), hasStroke ? /*#__PURE__*/React.createElement("path", _extends({}, svgPropertiesAndEvents(others), {
fill: "none",
d: getSinglePolygonPath(points, connectNulls)
})) : null, hasStroke ? /*#__PURE__*/React.createElement("path", _extends({}, svgPropertiesAndEvents(others), {
fill: "none",
d: getSinglePolygonPath(baseLinePoints, connectNulls)
})) : null);
}
var singlePath = getSinglePolygonPath(points, connectNulls);
return /*#__PURE__*/React.createElement("path", _extends({}, svgPropertiesAndEvents(others), {
fill: singlePath.slice(-1) === 'Z' ? others.fill : 'none',
className: layerClass,
d: singlePath
}));
};

213
frontend/node_modules/recharts/es6/shape/Rectangle.js generated vendored Normal file
View file

@ -0,0 +1,213 @@
var _excluded = ["radius"],
_excluded2 = ["radius"];
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0;
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
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); }
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; }
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; }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
/**
* @fileOverview Rectangle
*/
import * as React from 'react';
import { useEffect, useMemo, useRef, useState } from 'react';
import { clsx } from 'clsx';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { JavascriptAnimate } from '../animation/JavascriptAnimate';
import { interpolate } from '../util/DataUtils';
import { useAnimationId } from '../util/useAnimationId';
import { getTransitionVal } from '../animation/util';
import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents';
import { round, roundTemplateLiteral } from '../util/round';
/**
* @inline
*/
var getRectanglePath = (x, y, width, height, radius) => {
var roundedWidth = round(width);
var roundedHeight = round(height);
var maxRadius = Math.min(Math.abs(roundedWidth) / 2, Math.abs(roundedHeight) / 2);
var ySign = roundedHeight >= 0 ? 1 : -1;
var xSign = roundedWidth >= 0 ? 1 : -1;
var clockWise = roundedHeight >= 0 && roundedWidth >= 0 || roundedHeight < 0 && roundedWidth < 0 ? 1 : 0;
var path;
if (maxRadius > 0 && Array.isArray(radius)) {
var newRadius = [0, 0, 0, 0];
for (var i = 0, len = 4; i < len; i++) {
var _radius$i;
var r = (_radius$i = radius[i]) !== null && _radius$i !== void 0 ? _radius$i : 0;
newRadius[i] = r > maxRadius ? maxRadius : r;
}
path = roundTemplateLiteral(_templateObject || (_templateObject = _taggedTemplateLiteral(["M", ",", ""])), x, y + ySign * newRadius[0]);
if (newRadius[0] > 0) {
path += roundTemplateLiteral(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["A ", ",", ",0,0,", ",", ",", ""])), newRadius[0], newRadius[0], clockWise, x + xSign * newRadius[0], y);
}
path += roundTemplateLiteral(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["L ", ",", ""])), x + width - xSign * newRadius[1], y);
if (newRadius[1] > 0) {
path += roundTemplateLiteral(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["A ", ",", ",0,0,", ",\n ", ",", ""])), newRadius[1], newRadius[1], clockWise, x + width, y + ySign * newRadius[1]);
}
path += roundTemplateLiteral(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["L ", ",", ""])), x + width, y + height - ySign * newRadius[2]);
if (newRadius[2] > 0) {
path += roundTemplateLiteral(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["A ", ",", ",0,0,", ",\n ", ",", ""])), newRadius[2], newRadius[2], clockWise, x + width - xSign * newRadius[2], y + height);
}
path += roundTemplateLiteral(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["L ", ",", ""])), x + xSign * newRadius[3], y + height);
if (newRadius[3] > 0) {
path += roundTemplateLiteral(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["A ", ",", ",0,0,", ",\n ", ",", ""])), newRadius[3], newRadius[3], clockWise, x, y + height - ySign * newRadius[3]);
}
path += 'Z';
} else if (maxRadius > 0 && radius === +radius && radius > 0) {
var _newRadius = Math.min(maxRadius, radius);
path = roundTemplateLiteral(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["M ", ",", "\n A ", ",", ",0,0,", ",", ",", "\n L ", ",", "\n A ", ",", ",0,0,", ",", ",", "\n L ", ",", "\n A ", ",", ",0,0,", ",", ",", "\n L ", ",", "\n A ", ",", ",0,0,", ",", ",", " Z"])), x, y + ySign * _newRadius, _newRadius, _newRadius, clockWise, x + xSign * _newRadius, y, x + width - xSign * _newRadius, y, _newRadius, _newRadius, clockWise, x + width, y + ySign * _newRadius, x + width, y + height - ySign * _newRadius, _newRadius, _newRadius, clockWise, x + width - xSign * _newRadius, y + height, x + xSign * _newRadius, y + height, _newRadius, _newRadius, clockWise, x, y + height - ySign * _newRadius);
} else {
path = roundTemplateLiteral(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["M ", ",", " h ", " v ", " h ", " Z"])), x, y, width, height, -width);
}
return path;
};
export var defaultRectangleProps = {
x: 0,
y: 0,
width: 0,
height: 0,
radius: 0,
isAnimationActive: false,
isUpdateAnimationActive: false,
animationBegin: 0,
animationDuration: 1500,
animationEasing: 'ease'
};
/**
* Renders a rectangle element. Unlike the {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/rect rect SVG element}, this component supports rounded corners
* and animation.
*
* This component accepts X and Y coordinates in pixels.
* If you need to position the rectangle based on your chart's data,
* consider using the {@link ReferenceArea} component instead.
*
* @param rectangleProps
* @constructor
*/
export var Rectangle = rectangleProps => {
var props = resolveDefaultProps(rectangleProps, defaultRectangleProps);
var pathRef = useRef(null);
var _useState = useState(-1),
_useState2 = _slicedToArray(_useState, 2),
totalLength = _useState2[0],
setTotalLength = _useState2[1];
useEffect(() => {
if (pathRef.current && pathRef.current.getTotalLength) {
try {
var pathTotalLength = pathRef.current.getTotalLength();
if (pathTotalLength) {
setTotalLength(pathTotalLength);
}
} catch (_unused) {
// calculate total length error
}
}
}, []);
var x = props.x,
y = props.y,
width = props.width,
height = props.height,
radius = props.radius,
className = props.className;
var animationEasing = props.animationEasing,
animationDuration = props.animationDuration,
animationBegin = props.animationBegin,
isAnimationActive = props.isAnimationActive,
isUpdateAnimationActive = props.isUpdateAnimationActive;
var prevWidthRef = useRef(width);
var prevHeightRef = useRef(height);
var prevXRef = useRef(x);
var prevYRef = useRef(y);
var animationIdInput = useMemo(() => ({
x,
y,
width,
height,
radius
}), [x, y, width, height, radius]);
var animationId = useAnimationId(animationIdInput, 'rectangle-');
if (x !== +x || y !== +y || width !== +width || height !== +height || width === 0 || height === 0) {
return null;
}
var layerClass = clsx('recharts-rectangle', className);
if (!isUpdateAnimationActive) {
var _svgPropertiesAndEven = svgPropertiesAndEvents(props),
_ = _svgPropertiesAndEven.radius,
otherPathProps = _objectWithoutProperties(_svgPropertiesAndEven, _excluded);
return /*#__PURE__*/React.createElement("path", _extends({}, otherPathProps, {
x: round(x),
y: round(y),
width: round(width),
height: round(height),
radius: typeof radius === 'number' ? radius : undefined,
className: layerClass,
d: getRectanglePath(x, y, width, height, radius)
}));
}
var prevWidth = prevWidthRef.current;
var prevHeight = prevHeightRef.current;
var prevX = prevXRef.current;
var prevY = prevYRef.current;
var from = "0px ".concat(totalLength === -1 ? 1 : totalLength, "px");
var to = "".concat(totalLength, "px ").concat(totalLength, "px");
var transition = getTransitionVal(['strokeDasharray'], animationDuration, typeof animationEasing === 'string' ? animationEasing : defaultRectangleProps.animationEasing);
return /*#__PURE__*/React.createElement(JavascriptAnimate, {
animationId: animationId,
key: animationId,
canBegin: totalLength > 0,
duration: animationDuration,
easing: animationEasing,
isActive: isUpdateAnimationActive,
begin: animationBegin
}, animationElapsedTime => {
var currWidth = interpolate(prevWidth, width, animationElapsedTime);
var currHeight = interpolate(prevHeight, height, animationElapsedTime);
var currX = interpolate(prevX, x, animationElapsedTime);
var currY = interpolate(prevY, y, animationElapsedTime);
if (pathRef.current) {
prevWidthRef.current = currWidth;
prevHeightRef.current = currHeight;
prevXRef.current = currX;
prevYRef.current = currY;
}
var animationStyle;
if (!isAnimationActive) {
animationStyle = {
strokeDasharray: to
};
} else if (animationElapsedTime > 0) {
animationStyle = {
transition,
strokeDasharray: to
};
} else {
animationStyle = {
strokeDasharray: from
};
}
var _svgPropertiesAndEven2 = svgPropertiesAndEvents(props),
_ = _svgPropertiesAndEven2.radius,
otherPathProps = _objectWithoutProperties(_svgPropertiesAndEven2, _excluded2);
return /*#__PURE__*/React.createElement("path", _extends({}, otherPathProps, {
radius: typeof radius === 'number' ? radius : undefined,
className: layerClass,
d: getRectanglePath(currX, currY, currWidth, currHeight, radius),
ref: pathRef,
style: _objectSpread(_objectSpread({}, animationStyle), props.style)
}));
});
};

213
frontend/node_modules/recharts/es6/shape/Sector.js generated vendored Normal file
View file

@ -0,0 +1,213 @@
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
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); }
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
import * as React from 'react';
import { clsx } from 'clsx';
import { polarToCartesian, RADIAN } from '../util/PolarUtils';
import { getPercentValue, mathSign } from '../util/DataUtils';
import { resolveDefaultProps } from '../util/resolveDefaultProps';
import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents';
import { roundTemplateLiteral } from '../util/round';
var getDeltaAngle = (startAngle, endAngle) => {
var sign = mathSign(endAngle - startAngle);
var deltaAngle = Math.min(Math.abs(endAngle - startAngle), 359.999);
return sign * deltaAngle;
};
var getTangentCircle = _ref => {
var cx = _ref.cx,
cy = _ref.cy,
radius = _ref.radius,
angle = _ref.angle,
sign = _ref.sign,
isExternal = _ref.isExternal,
cornerRadius = _ref.cornerRadius,
cornerIsExternal = _ref.cornerIsExternal;
var centerRadius = cornerRadius * (isExternal ? 1 : -1) + radius;
var theta = Math.asin(cornerRadius / centerRadius) / RADIAN;
var centerAngle = cornerIsExternal ? angle : angle + sign * theta;
var center = polarToCartesian(cx, cy, centerRadius, centerAngle);
// The coordinate of point which is tangent to the circle
var circleTangency = polarToCartesian(cx, cy, radius, centerAngle);
// The coordinate of point which is tangent to the radius line
var lineTangencyAngle = cornerIsExternal ? angle - sign * theta : angle;
var lineTangency = polarToCartesian(cx, cy, centerRadius * Math.cos(theta * RADIAN), lineTangencyAngle);
return {
center,
circleTangency,
lineTangency,
theta
};
};
var getSectorPath = _ref2 => {
var cx = _ref2.cx,
cy = _ref2.cy,
innerRadius = _ref2.innerRadius,
outerRadius = _ref2.outerRadius,
startAngle = _ref2.startAngle,
endAngle = _ref2.endAngle;
var angle = getDeltaAngle(startAngle, endAngle);
// When the angle of sector equals to 360, star point and end point coincide
var tempEndAngle = startAngle + angle;
var outerStartPoint = polarToCartesian(cx, cy, outerRadius, startAngle);
var outerEndPoint = polarToCartesian(cx, cy, outerRadius, tempEndAngle);
var path = roundTemplateLiteral(_templateObject || (_templateObject = _taggedTemplateLiteral(["M ", ",", "\n A ", ",", ",0,\n ", ",", ",\n ", ",", "\n "])), outerStartPoint.x, outerStartPoint.y, outerRadius, outerRadius, +(Math.abs(angle) > 180), +(startAngle > tempEndAngle), outerEndPoint.x, outerEndPoint.y);
if (innerRadius > 0) {
var innerStartPoint = polarToCartesian(cx, cy, innerRadius, startAngle);
var innerEndPoint = polarToCartesian(cx, cy, innerRadius, tempEndAngle);
path += roundTemplateLiteral(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["L ", ",", "\n A ", ",", ",0,\n ", ",", ",\n ", ",", " Z"])), innerEndPoint.x, innerEndPoint.y, innerRadius, innerRadius, +(Math.abs(angle) > 180), +(startAngle <= tempEndAngle), innerStartPoint.x, innerStartPoint.y);
} else {
path += roundTemplateLiteral(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["L ", ",", " Z"])), cx, cy);
}
return path;
};
var getSectorWithCorner = _ref3 => {
var cx = _ref3.cx,
cy = _ref3.cy,
innerRadius = _ref3.innerRadius,
outerRadius = _ref3.outerRadius,
cornerRadius = _ref3.cornerRadius,
forceCornerRadius = _ref3.forceCornerRadius,
cornerIsExternal = _ref3.cornerIsExternal,
startAngle = _ref3.startAngle,
endAngle = _ref3.endAngle;
var sign = mathSign(endAngle - startAngle);
var _getTangentCircle = getTangentCircle({
cx,
cy,
radius: outerRadius,
angle: startAngle,
sign,
cornerRadius,
cornerIsExternal
}),
soct = _getTangentCircle.circleTangency,
solt = _getTangentCircle.lineTangency,
sot = _getTangentCircle.theta;
var _getTangentCircle2 = getTangentCircle({
cx,
cy,
radius: outerRadius,
angle: endAngle,
sign: -sign,
cornerRadius,
cornerIsExternal
}),
eoct = _getTangentCircle2.circleTangency,
eolt = _getTangentCircle2.lineTangency,
eot = _getTangentCircle2.theta;
var outerArcAngle = cornerIsExternal ? Math.abs(startAngle - endAngle) : Math.abs(startAngle - endAngle) - sot - eot;
if (outerArcAngle < 0) {
if (forceCornerRadius) {
return roundTemplateLiteral(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["M ", ",", "\n a", ",", ",0,0,1,", ",0\n a", ",", ",0,0,1,", ",0\n "])), solt.x, solt.y, cornerRadius, cornerRadius, cornerRadius * 2, cornerRadius, cornerRadius, -cornerRadius * 2);
}
return getSectorPath({
cx,
cy,
innerRadius,
outerRadius,
startAngle,
endAngle
});
}
var path = roundTemplateLiteral(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["M ", ",", "\n A", ",", ",0,0,", ",", ",", "\n A", ",", ",0,", ",", ",", ",", "\n A", ",", ",0,0,", ",", ",", "\n "])), solt.x, solt.y, cornerRadius, cornerRadius, +(sign < 0), soct.x, soct.y, outerRadius, outerRadius, +(outerArcAngle > 180), +(sign < 0), eoct.x, eoct.y, cornerRadius, cornerRadius, +(sign < 0), eolt.x, eolt.y);
if (innerRadius > 0) {
var _getTangentCircle3 = getTangentCircle({
cx,
cy,
radius: innerRadius,
angle: startAngle,
sign,
isExternal: true,
cornerRadius,
cornerIsExternal
}),
sict = _getTangentCircle3.circleTangency,
silt = _getTangentCircle3.lineTangency,
sit = _getTangentCircle3.theta;
var _getTangentCircle4 = getTangentCircle({
cx,
cy,
radius: innerRadius,
angle: endAngle,
sign: -sign,
isExternal: true,
cornerRadius,
cornerIsExternal
}),
eict = _getTangentCircle4.circleTangency,
eilt = _getTangentCircle4.lineTangency,
eit = _getTangentCircle4.theta;
var innerArcAngle = cornerIsExternal ? Math.abs(startAngle - endAngle) : Math.abs(startAngle - endAngle) - sit - eit;
if (innerArcAngle < 0 && cornerRadius === 0) {
return "".concat(path, "L").concat(cx, ",").concat(cy, "Z");
}
path += roundTemplateLiteral(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["L", ",", "\n A", ",", ",0,0,", ",", ",", "\n A", ",", ",0,", ",", ",", ",", "\n A", ",", ",0,0,", ",", ",", "Z"])), eilt.x, eilt.y, cornerRadius, cornerRadius, +(sign < 0), eict.x, eict.y, innerRadius, innerRadius, +(innerArcAngle > 180), +(sign > 0), sict.x, sict.y, cornerRadius, cornerRadius, +(sign < 0), silt.x, silt.y);
} else {
path += roundTemplateLiteral(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["L", ",", "Z"])), cx, cy);
}
return path;
};
/**
* SVG cx, cy are `string | number | undefined`, but internally we use `number` so let's
* override the types here.
*/
export var defaultSectorProps = {
cx: 0,
cy: 0,
innerRadius: 0,
outerRadius: 0,
startAngle: 0,
endAngle: 0,
cornerRadius: 0,
forceCornerRadius: false,
cornerIsExternal: false
};
export var Sector = sectorProps => {
var props = resolveDefaultProps(sectorProps, defaultSectorProps);
var cx = props.cx,
cy = props.cy,
innerRadius = props.innerRadius,
outerRadius = props.outerRadius,
cornerRadius = props.cornerRadius,
forceCornerRadius = props.forceCornerRadius,
cornerIsExternal = props.cornerIsExternal,
startAngle = props.startAngle,
endAngle = props.endAngle,
className = props.className;
if (outerRadius < innerRadius || startAngle === endAngle) {
return null;
}
var layerClass = clsx('recharts-sector', className);
var deltaRadius = outerRadius - innerRadius;
var cr = getPercentValue(cornerRadius, deltaRadius, 0, true);
var path;
if (cr > 0 && Math.abs(startAngle - endAngle) < 360) {
path = getSectorWithCorner({
cx,
cy,
innerRadius,
outerRadius,
cornerRadius: Math.min(cr, deltaRadius / 2),
forceCornerRadius,
cornerIsExternal,
startAngle,
endAngle
});
} else {
path = getSectorPath({
cx,
cy,
innerRadius,
outerRadius,
startAngle,
endAngle
});
}
return /*#__PURE__*/React.createElement("path", _extends({}, svgPropertiesAndEvents(props), {
className: layerClass,
d: path
}));
};

111
frontend/node_modules/recharts/es6/shape/Symbols.js generated vendored Normal file
View file

@ -0,0 +1,111 @@
var _excluded = ["type", "size", "sizeType"];
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); }
function 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; }
function _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; }
function _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; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _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); }
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; }
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; }
import * as React from 'react';
import { symbol as shapeSymbol, symbolCircle, symbolCross, symbolDiamond, symbolSquare, symbolStar, symbolTriangle, symbolWye } from 'victory-vendor/d3-shape';
import { clsx } from 'clsx';
import { isNumber, upperFirst } from '../util/DataUtils';
import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents';
var symbolFactories = {
symbolCircle,
symbolCross,
symbolDiamond,
symbolSquare,
symbolStar,
symbolTriangle,
symbolWye
};
var RADIAN = Math.PI / 180;
var getSymbolFactory = type => {
var name = "symbol".concat(upperFirst(type));
return symbolFactories[name] || symbolCircle;
};
var calculateAreaSize = (size, sizeType, type) => {
if (sizeType === 'area') {
return size;
}
switch (type) {
case 'cross':
return 5 * size * size / 9;
case 'diamond':
return 0.5 * size * size / Math.sqrt(3);
case 'square':
return size * size;
case 'star':
{
var angle = 18 * RADIAN;
return 1.25 * size * size * (Math.tan(angle) - Math.tan(angle * 2) * Math.tan(angle) ** 2);
}
case 'triangle':
return Math.sqrt(3) * size * size / 4;
case 'wye':
return (21 - 10 * Math.sqrt(3)) * size * size / 8;
default:
return Math.PI * size * size / 4;
}
};
var registerSymbol = (key, factory) => {
symbolFactories["symbol".concat(upperFirst(key))] = factory;
};
/**
* Renders a symbol from a set of predefined shapes.
*/
export var Symbols = _ref => {
var _ref$type = _ref.type,
type = _ref$type === void 0 ? 'circle' : _ref$type,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 64 : _ref$size,
_ref$sizeType = _ref.sizeType,
sizeType = _ref$sizeType === void 0 ? 'area' : _ref$sizeType,
rest = _objectWithoutProperties(_ref, _excluded);
var props = _objectSpread(_objectSpread({}, rest), {}, {
type,
size,
sizeType
});
var realType = 'circle';
if (typeof type === 'string') {
/*
* Our type guard is not as strong as it could be (i.e. non-existent),
* and so despite the typescript type saying that `type` is a `SymbolType`,
* we can get numbers or really anything, so let's have a runtime check here to fix the exception.
*
* https://github.com/recharts/recharts/issues/6197
*/
realType = type;
}
/**
* Calculate the path of curve
* @return {String} path
*/
var getPath = () => {
var symbolFactory = getSymbolFactory(realType);
var symbol = shapeSymbol().type(symbolFactory).size(calculateAreaSize(size, sizeType, realType));
var s = symbol();
if (s === null) {
return undefined;
}
return s;
};
var className = props.className,
cx = props.cx,
cy = props.cy;
var filteredProps = svgPropertiesAndEvents(props);
if (isNumber(cx) && isNumber(cy) && isNumber(size)) {
return /*#__PURE__*/React.createElement("path", _extends({}, filteredProps, {
className: clsx('recharts-symbols', className),
transform: "translate(".concat(cx, ", ").concat(cy, ")"),
d: getPath()
}));
}
return null;
};
Symbols.registerSymbol = registerSymbol;

Some files were not shown because too many files have changed in this diff Show more