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

26
frontend/node_modules/recharts/AGENTS.md generated vendored Normal file
View file

@ -0,0 +1,26 @@
This is Recharts repository. Recharts is a React-based charting library.
The goal is to provide a simple, declarative, and composable way to build charts.
We value consistency, usability, and performance. Accessibility is important.
We do not solve internationalization. Do not hardcode any strings or formatting choices in the library code,
we expect the users of Recharts to provide localized strings as desired.
Read ./DEVELOPING.md for instructions how to develop this project.
Read ./CONTRIBUTING.md for guidelines on contributing to this project.
When running unit tests, prefer to run a single test file:
```shell
npm run test -- path/to/TestFile.spec.tsx
```
If you run all tests at once using `npm test`, it may take a long time to complete.
Only do that when you want to verify that everything is working correctly.
This project has a long history. You may observe some inconsistencies in coding style.
When making changes, prefer current best practices as described in CONTRIBUTING.md,
and try to improve the code style where possible and where relevant to the current task.
Do not attempt to fix too much at once, or when it is not related to the current changes.
Do not focus too much on fitting the existing style, if it is not ideal.

1965
frontend/node_modules/recharts/CHANGELOG.md generated vendored Normal file

File diff suppressed because it is too large Load diff

99
frontend/node_modules/recharts/CONTRIBUTING.md generated vendored Normal file
View file

@ -0,0 +1,99 @@
# Contributing to Recharts
We'd love for you to contribute to our source code and to make Recharts even better than it is today!
If you want to know how to develop then check out the [Development Guide](/DEVELOPING.md).
Here are the guidelines we'd like you to follow:
## Ongoing Initiatives
We use Github Discussion to organize our discussion along new initiatives and organize ourselves. Please do check the [announcements](https://github.com/recharts/recharts/discussions/categories/announcements) section for an overview of recent initiatives.
Also feel free to join us on Slack: https://recharts.slack.com/archives/C042Q5K5UDC
## <a name="issues"></a>Issues and Bugs
### Where to Find Known Issues
We will be using [GitHub Issues](https://github.com/recharts/recharts/issues) for our bugs and feature requests. We will keep a close eye on this and try to make it clear when we have an internal fix in progress. Before filing a new task, try to make sure your problem doesn't already exist.
### Reporting New Issues
The best way to get your bug fixed is to provide a reduced test case. codesandbox provide a way to give live examples. You can fork our example in [recharts.github.io](https://recharts.github.io/) to show your case.
## <a name="testing"></a>Testing
We do cherish tests. They help us move swiftly, and release with confidence.
In our repo, you will find three types of tests: Unit tests, rendering tests with RTL, and user interaction tests in storybook.
Wherever possible we prefer the simplest tests - unit tests. Only where needed / useful we would use RTL or storybook tests.
### Unit tests
When writing new code, aim for 100% unit test code coverage.
When implementing a new feature we would prefer to extract pure helper function for data processing.
Such functions are found in a few utils files. An example is `test/util/ShallowEqual.spec.ts`.
Unit testing in recharts has some specialties, please see [Recharts unit tests README](test/README.md) for more information.
### React Testing Library
Some behaviour must be tested upon rendering, such as interactions between components (Line, Tooltip), see `test/component/Tooltip.visibility.spec.tsx` for an example.
### Storybook Test Runner
Storybook also has a great interface for adding tests. By default every story in storybook is a smoke test (rendering without error logs means the test passed). Additionally, it is possible to add actual tests as play functions with an assert to a story. This will often be easier than using React Testing Library, because the natural test debugging tool is Storybook itself. See for example `storybook/stories/Examples/cartesian/ReferenceLine/ReferenceLineIfOverflow.stories.tsx`
### Mutation tests
We have [stryker](https://stryker-mutator.io/docs/) installed and ready to use for mutation testing.
If you want to run mutation test be aware that these may take hours! A single file will take 15 minutes or more.
To run, update the list of checked files in `./stryker.config.mjs` and then run with `npm run test-mutation`.
You will find test output in your console, and also HTML report in the `./reports` folder.
## <a name="pr"></a>Pull Requests
**Working on your first Pull Request?** You can learn how from this _free_ series [How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github)
_Before_ submitting a pull request, please make sure the following is done…
- Search [GitHub](https://github.com/recharts/recharts/pulls) for an open or closed Pull Request that relates to your submission. You don't want to duplicate effort.
- Fork the repo and create your branch from `main`.
- If you have added functionality or changed existing functionality, be sure to add a test. Ideally a unit test for helper function, or a test that includes rendering with RTL.
- If you've changed APIs, make sure that the stories in Storybook are working as expected.
- Ensure the test suite passes (`npm run test`).
- Make sure your code lints (`npm run lint`) - we've done our best to make sure these rules match our internal linting guidelines.
## <a name="code"></a>Code Guide
Our linter will catch most styling issues that may exist in your code.
You can check the status of your code styling by running: `npm run lint`
However, there are still some styles that the linter cannot pick up. If you are unsure about something, looking at [Airbnb's Style Guide](https://github.com/airbnb/javascript) will guide you in the right direction.
## Documentation
We use `omnidoc` to auto-generate API documentation from TypeScript types and JSDoc comments.
- **Do not edit files in `www/src/docs/api/` or `storybook/stories/API/arg-types/` manually.** These files are auto-generated and ignored by git.
- To update documentation, update the TypeScript interfaces and JSDoc comments in the source code (`src/`).
- Run `npm run omnidoc` to regenerate the documentation files locally and verify your changes.
- Documentation is also regenerated automatically when running `npm run build`.
## Types
We use TypeScript for type safety. Some rules to follow:
- Never use `any` type. Implicit or explicit.
- Prefer `unknown` over `any`. Refine the type.
- Type your function parameters and return values explicitly, do not rely on implicit any or inference. Exceptions are React components and trivial functions where the types are obvious.
- Do not use `as` type assertions, ever. The only exception is `as const`.
## <a name="license"></a>License
By contributing to Recharts, you agree that your contributions will be licensed under its MIT license.

263
frontend/node_modules/recharts/DEVELOPING.md generated vendored Normal file
View file

@ -0,0 +1,263 @@
This is a development guide.
If you want to know the guidelines we follow then read [CONTRIBUTING.md](CONTRIBUTING.md).
# Setup development environment
```sh
git clone https://github.com/recharts/recharts.git
cd recharts
npm install # the right Node version can be found in .nvmrc file
```
**Note for Windows users:** `npm install` may fail because `@codecov/bundle-analyzer` is only supported on Linux/Darwin. If that happens, run `npm install --force` to continue the setup.
# Linting and types
You may also want to enable ESLint and Prettier configuration in your favourite IDE.
```sh
npm run lint
npm run check-types
```
## Import restrictions
The project enforces that all imports from `recharts` must use the public API entry point. Imports from internal paths like `recharts/types/*` or `recharts/src/*` are not allowed and will fail the linter.
**Good:**
```typescript
import { TooltipIndex, DataKey, BarRectangleItem } from 'recharts';
```
**Bad:**
```typescript
import { TooltipIndex } from 'recharts/types/state/tooltipSlice'; // ❌ Will fail lint
import { DataKey } from 'recharts/src/util/types'; // ❌ Will fail lint
```
This ensures that consumers of the library only depend on stable, public APIs.
# Automated testing
## Running unit tests
Most unit tests are in the `test` directory, some others are in `www/test`.
Run all tests:
```sh
npm run test
```
Run a specific test file:
```sh
npm run test -- path/to/TestFile.spec.tsx
```
## Running mutation tests
Mutation tests may take several hours to complete.
You may want to first open `./stryker.config.mjs` and set the `mutate` property to a specific file or directory
that you want to test. That may take 5-10 minutes to run.
Mutation tests do not run in CI.
```sh
npm run test-mutation
```
## Storybook
To run the Storybook UI:
```sh
npm run storybook
```
and then browse to http://localhost:6006.
While the storybook is running:
```sh
npm run test-storybook
```
## Run visual regression tests (using playwright)
### Prerequisites
Playwright tests are running inside Docker. You will need to have Docker installed and running.
See https://docs.docker.com/get-started/get-docker/. You do not need Docker account or login.
You only need to do this once.
### Build the Docker image
This takes two or three minutes to complete.
You will need to re-build every time you make a change to dependencies in `package.json`.
```sh
npm run test-vr:prepare
```
### Run the tests
Now, the usual loop. Write a new test, run it, fix it, repeat.
```sh
npm run test-vr
```
Alternatively, the UI playwright mode is available as well:
```sh
npm run test-vr:ui
```
If you want to record new snapshots or update the old ones, you can run:
```sh
npm run test-vr:update
```
You will see new files created in the `test-vr/__snapshots__` directory, please commit them to the repository!
### See VR test results
Open http://localhost:9323 in your browser to see the results of the tests.
The CLI will tell you to run a "show-report" which is not necessary because there is already a Docker container running
in the background and serving the report. Just open the URL in your browser.
# Manual testing
## recharts.github.io local run
To manually test Recharts in a real application environment, you can use the `www` directory which contains the source code
for the Recharts documentation website https://recharts.github.io.
You can add a new example and commit it too!
To run the website locally in dev mode with hot-reloading:
```sh
npm run start -w www
```
When running locally, the website pulls the Recharts library from the local filesystem.
When you make changes to the Recharts source code, you need to re-build it for the changes to be reflected in the website:
```sh
npm run build
```
In production build, the website pulls recharts from npm registry.
## Storybook
You can also use Storybook for manual testing of individual components.
```sh
npm run storybook
```
When adding new stories, mind that all stories here are also used for automated visual regression tests,
using Chromatic cloud infrastructure.
Chromatic are very generous and free for open source projects,
however we already have so many stories that we hit the limit for open source plan in some months.
For this reason, try to keep storybook for high fidelity examples, the ones you want to see published on the website
and in storybook UI. For low fidelity tests, use unit tests or VR tests instead.
## Playwright UI mode
You can also use Playwright in UI mode for manual testing. This opens a browser window where you can see the tests running,
and you can see before & after.
```sh
npm run test-vr:ui
```
# Releasing new versions
[Releases](https://github.com/recharts/recharts/releases) are automated via GH Actions - when a new release is created
in GH, CI will trigger that:
1. Installs dependencies
2. Runs a build
3. Runs `npm publish` with the appropriate npm dist-tag
GitHub releases are created by maintainers manually.
The GitHub release tag must match the `package.json` version, with a leading `v`.
## Stable releases
For a normal release, use a stable semver version such as `3.8.2`.
1. Run `npm version 3.8.2`
2. Push the version commit and tag
3. Create a GitHub release with tag `v3.8.2` via GitHub UI, and add release notes
4. The publish workflow will release the package to npm
## Alpha and canary releases
For prereleases, use a semver prerelease identifier in `package.json`, for example `3.8.2-alpha.0` or `3.8.2-canary.0`.
1. Update `package.json` to the prerelease version. For example:
```sh
npm version 3.8.2-canary.0
```
2. Push the version commit and tag
3. Create a GitHub prerelease with the matching tag, for example `v3.8.2-alpha.0` or `v3.8.2-canary.0`
4. The publish workflow will derive the npm dist-tag from the prerelease identifier and publish to `alpha` or `canary`, so `latest` stays unchanged
# Folder structure
Source code:
- `src` - source code for Recharts library
- `test` - unit tests
- `test-vr` - visual regression tests (using Playwright)
- `www` - source code for Recharts documentation website recharts.github.io
- `storybook` - Storybook stories for Recharts components, and Storybook config+scaffolding
- `scripts` - helper scripts for development and releases
- `.husky` and `.github` - git hooks and GitHub Actions workflows for CI
Autogenerated code:
Running `npm run build` generates the following folders:
- `lib` - compiled output of Recharts library in CJS format - published to npm
- `es6` - compiled output of Recharts library in ESM format - published to npm
- `umd` - compiled output of Recharts library in UMD format - published to npm
- `types` - generated TypeScript declaration files - published to npm
- `build` - output of `tsc` build - we don't use this for anything at all I think
Running `npm run test-coverage` generates:
- `coverage` - code coverage report
Running `npm run test-mutation` generates:
- `reports` - mutation testing report
Running `npm run omnidoc` generates:
- all `www/src/docs/api/*API.tsx` files - these are later used to generate API reference pages on the website on URL `/docs/api/*`
- all `storybook/stories/API/arg-types/*Args.ts` files - these are later used by Storybook to show props tables for components, and to generate
controls for props in Storybook UI
- `www/src/docs/api/index.ts` - exports all generated API docs
These generated files are excluded from the repository via `.gitignore` to reduce noise. They are generated automatically during build.
If you need to add a manual file in these directories (e.g. a manual MDX file), you must force add it to git: `git add -f path/to/file`.
If you want to modify any of the autogenerated code, you need to modify the JSDoc comments and/or TypeScript definitions in the appropriate source files in `src` folder,
and then run `npm run omnidoc` to update the generated files.
The `npm run omnidoc` command is also run automatically as part of `npm run build`.

22
frontend/node_modules/recharts/LICENSE generated vendored Normal file
View file

@ -0,0 +1,22 @@
The MIT License (MIT)
Copyright (c) 2015-present recharts
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

98
frontend/node_modules/recharts/README.md generated vendored Normal file
View file

@ -0,0 +1,98 @@
# Recharts
[![storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg)](https://recharts.github.io/en-US/storybook)
[![Build Status](https://github.com/recharts/recharts/workflows/Node.js%20CI/badge.svg)](https://github.com/recharts/recharts/actions)
[![codecov](https://codecov.io/gh/recharts/recharts/graph/badge.svg?token=Bn6L2hrl8T)](https://codecov.io/gh/recharts/recharts)
[![npm version](https://badge.fury.io/js/recharts.svg)](http://badge.fury.io/js/recharts)
[![npm downloads](https://img.shields.io/npm/dm/recharts.svg?style=flat-square)](https://www.npmjs.com/package/recharts)
[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](/LICENSE)
## Introduction
Recharts is a **Redefined** chart library built with [React](https://facebook.github.io/react/) and [D3](http://d3js.org).
The main purpose of this library is to help you to write charts in React applications without any pain. Main principles of Recharts are:
1. **Simply** deploy with React components.
2. **Native** SVG support, lightweight with minimal dependencies.
3. **Declarative** components.
Documentation at [recharts.github.io](https://recharts.github.io) and our [storybook](https://recharts.github.io/en-US/storybook)
Also see [the wiki](https://github.com/recharts/recharts/wiki).
All development is done on the `main` branch. The current latest release and storybook documentation reflects what is on the `release` branch.
## Examples
```jsx
<LineChart width={400} height={400} data={data}>
<XAxis dataKey="name" />
<Tooltip />
<CartesianGrid stroke="#f5f5f5" />
<Line type="monotone" dataKey="uv" stroke="#ff7300" />
<Line type="monotone" dataKey="pv" stroke="#387908" />
</LineChart>
```
All the components of Recharts are clearly separated. The LineChart is composed of x axis, tooltip, grid, and line items, and each of them is an independent React Component. The clear separation and composition of components is one of the principle Recharts follows.
## Installation
### npm
NPM is the easiest and fastest way to get started using Recharts. It is also the recommended installation method when building single-page applications (SPAs). It pairs nicely with a CommonJS module bundler such as Webpack.
```sh
# latest stable
$ npm install recharts react-is
```
`react-is` needs to match the version of your installed `react` package.
### Deno
Deno is a drop-in replacement for npm, so Recharts installs the same way:
```sh
$ deno add recharts react-is
```
### umd
The UMD build is also available on unpkg.com:
```html
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-is/umd/react-is.production.min.js"></script>
<script src="https://unpkg.com/recharts/umd/Recharts.min.js"></script>
```
Then you can find the library on `window.Recharts`.
## Contributing
Recharts is open source. If you want to contribute to the project, please read the [CONTRIBUTING.md](/CONTRIBUTING.md)
to understand how to contribute to the project and [DEVELOPING.md](/DEVELOPING.md) to set up your development
environment.
## Thanks
<a href="https://www.chromatic.com/"><img src="https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png" width="153" height="30" alt="Chromatic" /></a>
Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.
[![JetBrains logo.](https://resources.jetbrains.com/storage/products/company/brand/logos/jetbrains.svg)](https://jb.gg/OpenSourceSupport)
Thanks to JetBrains for providing OSS development license for their IDEs.
Browser testing via
[![TestMu AI](www/public/assets/testmu-logo-black.svg)](https://www.testmuai.com/?utm_medium=sponsor&utm_source=recharts)
## License
[MIT](http://opensource.org/licenses/MIT)
Copyright (c) 2015-2026 Recharts Group.

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)
}));
};

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