From 7b7f3e946a93610668ead94937b5f49feaa40ede Mon Sep 17 00:00:00 2001 From: boygirl Date: Tue, 17 Jul 2018 14:42:49 -0700 Subject: [PATCH 1/2] update contributing --- CONTRIBUTING.md | 53 +- packages/victory-chart/CHANGELOG.md | 881 ---------------------- packages/victory-core/CHANGELOG.md | 1055 --------------------------- packages/victory-pie/CHANGELOG.md | 344 --------- 4 files changed, 19 insertions(+), 2314 deletions(-) delete mode 100644 packages/victory-chart/CHANGELOG.md delete mode 100644 packages/victory-core/CHANGELOG.md delete mode 100644 packages/victory-pie/CHANGELOG.md diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index bf6368512..731904662 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -7,6 +7,10 @@ Thanks for helping out! Victory is a monorepo built with [Lerna](https://lernajs.io/) and [Yarn](https://yarnpkg.com/) workspaces. All `victory-*` packages live in the `packages` directory, and each has its own `package.json`. Installing this repo with `yarn` will automatically link all interdependent `victory-*` packages. **You must use `yarn` rather than `npm` when installing and running `package.json` scripts in this project.** +## `package-scripts.js` + +Victory uses [`nps`](https://github.com/kentcdodds/nps) to organize package scripts. Check `package-scripts.js` for the full list of commands. + ### Requirements - [Node.js](https://nodejs.org/) 8.10.0 or higher. @@ -27,33 +31,17 @@ Use [Yarn](https://yarnpkg.com/) to install dependencies: $ yarn install ``` -A `postinstall` script will build `lib/` and `es/` for all `victory-*` packages. - -Now you're ready to run a development server and check out the demos. Demos will be served at localhost:3000/ +Run a development server and check out the demos. Demos will be served at localhost:3000/. This command will also build and watch `lib/` and `es/` directories in all packages, so your demos will always be in sync with code changes. ```console $ yarn start ``` -## Developing multiple packages - -When making changes across multiple dependent packages, it is necessary to rebuild libs in order to pick up changes in dependent packages. You can manually rebuild libs by running: - -```console -$ nps build-libs -``` - -or start a task in a new terminal window that will watch for code changes, and automatically rebuild libs - -```console -$ nps watch -``` - ## Checks, Tests All checks and tests run from the root directory. -The `check` script will lint all packages and infrastructure before starting a test server and running our suite of tests +The `check` script will lint all packages and infrastructure before building packages and starting a test server and running our suite of tests ```console $ nps check @@ -74,36 +62,26 @@ Victory relies heavily on visual regression testing with [Storybook](https://sto Write visual tests for new features by adding them in the `stories` directory. Run storybooks and check out changes. Storybooks are served from localhost:6006/ ```console -$ nps storybook +$ yarn storybook ``` [Chromatic](https://www.chromaticqa.com/) provides automated visual testing. All PRs will trigger a new chromatic build, which will be displayed along with CI status. You can also trigger a new build manually with: ```console -$ nps storybook +$ yarn chromatic ``` -**External contributors will not be able to automate their visual regression testing with Chromatic, as it requires a secret app code.** - -TODO: Set up chromatic CI for this repo - +**External contributors will not be able to use Chromatic to automate their visual regression testing, as it requires a secret app code.** ## Release -Victory uses [publishr](https://github.com/FormidableLabs/publishr) to organize compiled code for released versions. +Victory uses [Lerna](https://lernajs.io/) to automate versioning and publishing packages. -Each package must contain the following version scripts and publishr config in its `package.json`: +Each package must contain the following `version` script `package.json`: ``` "scripts": { "version": "nps build-libs && nps build-dists", - "postversion": "publishr postversion -V", - "postpublish": "publishr postpublish -V" -}, -"publishr": { - "files": { - ".npmignore": "../../.npmignore.publishr" - } } ``` Pre version checks are run _once_ for all packages, and are defined in the root directory `package.json` @@ -115,10 +93,17 @@ Pre version checks are run _once_ for all packages, and are defined in the root The following commands will let you try a version without publishing or creating git commits: ```console -// This command bumps versions, runs checks, builds libs, and runs publishr postversion (~5 minutes) +// This command bumps versions, runs checks, builds libs. No git commits will be made, and nothing will be published. `package.json` files in all packages will be altered, so be careful to clean up afterwards. $ nps lerna-dry-run ``` +To publish a package _for real_ + +```console +$ lerna publish +``` +You will be prompted to select an appropriate version before continuing. Lerna will run preversion checks, bump versions in all packages, create git commits, build libs, and publish packages. The whole process takes about 5 minutes. Be patient! + ## Contributor Covenant Code of Conduct ### Our Pledge diff --git a/packages/victory-chart/CHANGELOG.md b/packages/victory-chart/CHANGELOG.md deleted file mode 100644 index 7f4e1d684..000000000 --- a/packages/victory-chart/CHANGELOG.md +++ /dev/null @@ -1,881 +0,0 @@ -# VictoryChart Changelog - -## 27.1.1 (2018-06-29) - --[604](https://github.com/FormidableLabs/victory-chart/pull/604) Average value and baseline (_i.e._ `y` and `y0`) when calculating voronoi layout - -## 27.1.0 (2018-06-20) - --[555](https://github.com/FormidableLabs/victory-chart/pull/555) Refactors how `VictoryStack` and `VictoryGroup` interact with child data. Fixes bugs related to stacked and grouped charts in `VictoryVoronoiContainer` - -## 27.0.0 (2018-06-05) - --[600](https://github.com/FormidableLabs/victory-chart/pull/600) - -**Breaking Changes** -- Refactors utility methods. This is an internal breaking change, but should not be a breaking change for most Victory users. See [victory-core/380](https://github.com/FormidableLabs/victory-core/pull/380) for details -- Upgrades to `react-fast-compare@^2.0.0` which changes function comparison. This means that Victory components _will_ update when functions are not equal. This closes several Victory issues, but may cause a slight performance decline - -**New Features** -- Adds `minDomain` and `maxDomain` props. These props may be used to set one edge of a domain while allowing the other edge to be determined by data or other props. `minDomain` and `maxDomain` override `domainPadding`. -- Adds `singleQuadrantDomainPadding` prop. This prop may be given as a boolean or an object with boolean values for x and y. When this prop is set to `false` for a given dimension, any `domainPadding` applied in that dimension will _not_ be constrained to existing quadrants. - -## 26.1.1 (2018-05-28) - --[599](https://github.com/FormidableLabs/victory-chart/pull/599) Add `allowDraw` boolean prop for `VictoryBrushContainer` and `VictoryBrushLine` --[598](https://github.com/FormidableLabs/victory-chart/pull/598) Fix category bugs --[596](https://github.com/FormidableLabs/victory-chart/pull/596) Only call `onSelectionCleared` when selected data exists - -## 26.1.0 (2018-05-04) - --[594](https://github.com/FormidableLabs/victory-chart/pull/594) Support functional `cornerRadius` and objects with `cornerRadius` defined for "top" and "bottom" --[593](https://github.com/FormidableLabs/victory-chart/pull/593) Add `defaultBrushArea` prop with supported options "all", "none" and "disable" - -## 26.0.1 (2018-04-25) - --[591](https://github.com/FormidableLabs/victory-chart/pull/591) Ensure that `VictoryVoronoiContainer` works correctly with `VictoryGroup` data. - -## 26.0.0 (2018-04-21) - -**Breaking Changes** - --[587](https://github.com/FormidableLabs/victory-chart/pull/587) Disable styles on data - -This change deprecates Victory's ability to automatically pick up style attributes from the data object. This change will improve performance, but will be a breaking change for many users. Fortunately the upgrade path is simple: - -If your data object looks like -``` -data={[ - { x: 1, y: 1, fill: "red", opacity: 0.2 }, - ... -]} -``` -Add the following functional styles: -``` -style={{ data: { fill: (d) => d.fill, opacity: (d) => d.opacity } }} -``` -and everything will work as before. - --[584](https://github.com/FormidableLabs/victory-chart/pull/584) Check for labels prop before computing baseProps for labels - -Base props for labels will no longer be pre-calculated unless a labels prop exists. This change improves performance, but it will be a breaking change for users who were using events for adding labels to elements that did not already have them using an event mutation like: - -``` -events={[{ - target: "data", - eventHandlers: { - onClick: () => { - return [{ target: "labels", mutation: () => ({ text: "clicked" }) }]; - } - } -}]} -``` -If you are using this pattern, you can make labels work as expected by adding a dummy labels prop like: `labels={() => null}` - -Note: This change _does not_ affect tooltips, which exist, but are invisible until they receive the `active` prop - -Other changes --[589](https://github.com/FormidableLabs/victory-chart/pull/589) Audit lodash methods --[583](https://github.com/FormidableLabs/victory-chart/pull/583) Perf improvement for `VictorySelectionContainer` - -## 25.2.5 (2018-04-17) - -- [583](https://github.com/FormidableLabs/victory-chart/pull/583) Perf improvements for `VictorySelectionContainer` and general perf improvements from `victory-core@21.1.12` - -## 25.2.4 (2018-04-13) - -- [581](https://github.com/FormidableLabs/victory-chart/pull/580) Add `react-fast-compare`, use in place of `lodash.isEqual`; add demo that uses and calls shouldComponentUpdate. - -## 25.2.3 (2018-04-10) - -- [580](https://github.com/FormidableLabs/victory-chart/pull/580) Improvements for `VictoryBrushLine` - -## 25.2.2 (2018-04-04) - -- Upgrade to `victory-core@^21.1.2`. -- [577](https://github.com/FormidableLabs/victory-chart/pull/577). Replace lodash omit. Remove any style prop scrubbing (`victory-core` now handles this). - - -## 25.2.1 (2018-03-30) - --[576]https://github.com/FormidableLabs/victory-chart/pull/576 Fixes a bug in `VictoryBrushLine` - -## 25.2.0 (2018-03-27) - --[557](https://github.com/FormidableLabs/victory-chart/pull/557) `VictoryBoxPlot` --[575](https://github.com/FormidableLabs/victory-chart/pull/575) Stack datasets with differeing domains --[574](https://github.com/FormidableLabs/victory-chart/pull/574) Refactor helper method exports - -## 25.1.1 (2018-02-14) - --[573](https://github.com/FormidableLabs/victory-chart/pull/573) Use fallback styles in VictoryBrushLine - -## 25.1.0 (2018-02-12) - --[571](https://github.com/FormidableLabs/victory-chart/pull/571) - - Adds `selectionBlacklist` to `VictorySelectionContainer` - - Adds `activateData` and `activateLabels` to `VictoryVoronoiContainer` (true by default) - - Adds `activateSelectedData` to `VictorySelectionContainer` (true by default) --[572](https://github.com/FormidableLabs/victory-chart/pull/572) Changes behavior of `labels` in `VictoryVoronoiContainer` - - `labels` is now called with `point, index, points` instead of `point, active`. This will not be a breaking change for most users, as this function was only called when labels were `active` - -## 25.0.6 (2018-02-09) - --[570](https://github.com/FormidableLabs/victory-chart/pull/570) Add "minus" option for `VictoryScatter` `symbol` prop --[569](https://github.com/FormidableLabs/victory-chart/pull/569) Fixes a bug in `createContainer` --[568](https://github.com/FormidableLabs/victory-chart/pull/568) Adds `brushAreaWidth` prop for `VictoryBrushLine` --[567](https://github.com/FormidableLabs/victory-chart/pull/567) Fixes brushArea active state in `VictoryBrushLine` - -## 25.0.5 (2018-02-07) - --[565](https://github.com/FormidableLabs/victory-chart/pull/565) Prevent re-renders with disable prop - -## 25.0.4 (2018-02-07) - --[564](https://github.com/FormidableLabs/victory-chart/pull/564) Adds `disable` prop to all interactive containers and addon components - -## 25.0.3 (2018-02-07) - --[563](https://github.com/FormidableLabs/victory-chart/pull/563) `stopPropagation` in when panning or selection `VictoryBrushLine` - -## 25.0.2 (2018-02-06) - --[562](https://github.com/FormidableLabs/victory-chart/pull/562) Bugfix for `VictoryCursorContainer` - -## 25.0.1 (2018-02-05) - --[560](https://github.com/FormidableLabs/victory-chart/pull/560) Add `sideEffects: false` --[561](https://github.com/FormidableLabs/victory-chart/pull/561) Bugfix for createContainer - -## 25.0.0 (2018-02-04) - -**Major Features** -- `VictoryBrushLine` for multi-brush support - -**Breaking Changes** - - `Candle` expects a new set of props from `VictoryCandlestick` - - The `Line` component has been renamed to `Axis` / `Grid` - - Internal methods for _all_ Victory primitive components have changed. This will be a breaking change for users who are extending primitive components, including `victory-native`. - --[551](https://github.com/FormidableLabs/victory-chart/pull/551) Bux fixes and improvements for VictoryStack --[553](https://github.com/FormidableLabs/victory-chart/pull/553) Allow renderInPortal to be false for tooltips in `VictoryVoronoiContainer` --[554](https://github.com/FormidableLabs/victory-chart/pull/554) Add support for `wickStrokeWidth` in `VictoryCandlestick` - **This is a breaking change as the expected props for `Candle` are changed** --[556](https://github.com/FormidableLabs/victory-chart/pull/556) Fixes undefined context variable --[558](https://github.com/FormidableLabs/victory-chart/pull/558) Allow `func` PropType for `color` on `VictoryGroup` --[559](https://github.com/FormidableLabs/victory-chart/pull/559) Implement `VictoryBrushLine` and use updated primitive components - **This is a breaking change for anyone using the `Line` primitive. It has been renamed to `Axis` / `Grid`. - **This may be a breaking change for anyone who was _extending_ Victory primitives** - -## 24.6.1 (2018-01-08) - -- [550](https://github.com/FormidableLabs/victory-chart/pull/550) Fixes a bug related to voronoi tooltip positioning -- [549](https://github.com/FormidableLabs/victory-chart/pull/549) Fixes a prop type warning for `categories` supplied to `VictoryAxis` -- [548](https://github.com/FormidableLabs/victory-chart/pull/548) Adds a `voronoiBlacklist` prop to `VictoryVoronoiContainer` -- [547](https://github.com/FormidableLabs/victory-chart/pull/547) Fixes downsampling in `VictoryZoomContainer` with function plotting -- [545](https://github.com/FormidableLabs/victory-chart/pull/545) Fixes a bug related to panning in `VictoryZoomContainer` - -## 24.6.0 (2018-01-02) - -- [544](https://github.com/FormidableLabs/victory-chart/pull/544) -- [victory-core/324](https://github.com/FormidableLabs/victory-core/pull/324) Adds support for external event mutations - - Adds `externalEventMutations` prop to `VictorySharedEvents` and all components enhanced with the `add-events` HOC - - `externalEventMutations` prop format: - ``` -externalEventMutations: PropTypes.arrayOf(PropTypes.shape({ - callback: PropTypes.function, - childName: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.array - ]), - eventKey: PropTypes.oneOfType([ - PropTypes.array, - CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]), - PropTypes.string - ]), - mutation: PropTypes.function, - target: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.array - ]) -})) -``` -*Note:* `eventKey` and `target` must be specified for externalEventMutations. When using `extenalEventMutations` with shared events (_i.e._ events on VictoryChart etc), `childName` is also required. - -*Note:* The `callback` supplied to `externalEventMutations` should be used for clearing mutations. This is crucial for animating charts - -## 24.5.1 (2018-01-02) - -- [543](https://github.com/FormidableLabs/victory-chart/pull/543) Fixes a bug related to dates in `VictoryBrushContainer` -- [545](https://github.com/FormidableLabs/victory-chart/pull/545) Fixes a bug in `VictoryZoomContainer` - -## 24.5.0 (2017-12-21) - -- [542](https://github.com/FormidableLabs/victory-chart/pull/542) Adds support for immutable data *note: compatible with `immutable@v3.8.x` and will be compatible with `immutable@v4.0.x` when released* - -## 24.4.0 (2017-12-17) -- [541](https://github.com/FormidableLabs/victory-chart/pull/541) Implements `sortOrder` prop with "ascending" and "descending" options - -## 24.3.1 (2017-12-08) - -- [540] (https://github.com/FormidableLabs/victory-chart/pull/540) Adds `allowSelection` boolean prop for `VictorySelectionContainer` (true by default) - -## 24.3.0 (2017-11-14) - -- [538](https://github.com/FormidableLabs/victory-chart/pull/538) Adds `barRatio` and `cornerRadius` props to `VictoryBar` - -- [539](https://github.com/FormidableLabs/victory-chart/pull/539) Fixes a bug in bubble plots - -## 24.2.0 (2017-11-07) - -- [534](https://github.com/FormidableLabs/victory-chart/pull/534) Add `allowResize` and `allowDrag` props for `VictoryBrushContainer` -- [537](https://github.com/FormidableLabs/victory-chart/pull/537) Update infrastructure for React 16 - -## 24.1.0 (2017-10-22) - -- [532](https://github.com/FormidableLabs/victory-chart/pull/532) Filters tickValues so that values outside of the domain of an axis are not included - -## 24.0.0 (2017-10-19) - -**Breaking Changes** - -- [527](https://github.com/FormidableLabs/victory-chart/pull/527) - - adds an `invertAxis` prop for `VictoryAxis` that will flip the domain of a given axis when true. Changing the `orientation` prop of a given axis will no longer flip the domain on that axis _unless_ the `invertAxis` prop is also set. - - `tickFormat` as an array will set the number of ticks if `tickValues` are not given. - - `tickValues` will be forced to a unique array. `tickFormat` may still have non-unique values. - - `tickCount` will now always have an effect when set. Previously, this prop would do nothing when `tickValues` were provided. Now `tickCount` will downsample any array provided to either `tickValues` or `tickFormat`. - -Other Changes - -- [529](https://github.com/FormidableLabs/victory-chart/pull/529) `VictoryChart` no longer calculates `tickValues` or `tickFormat` for axis children. `stringMap` and `categories` are passed to axis components instead. - -- [528](https://github.com/FormidableLabs/victory-chart/pull/528) and [530](https://github.com/FormidableLabs/victory-chart/pull/530) Remove numeric keys from styles - -- [526](https://github.com/FormidableLabs/victory-chart/pull/526) Always set animation state - -## 23.0.1 ( 2017-10-04) - --[524](https://github.com/FormidableLabs/victory-chart/pull/524) Fix naming changes for `VictoryCursorContainer` - -## 23.0.0 (2017-09-30) - -**BREAKING CHANGES:** - -**[victory-core/299](https://github.com/FormidableLabs/victory-core/pull/299) Containers are now rendered in parent divs.** This may be a breaking change for parent styles. - - -**[518](https://github.com/FormidableLabs/victory-chart/pull/518) Naming changes for container props** - -`VictoryBrushContainer` -- `dimension` -> `brushDimension` -- `selectionComponent` -> `brushComponent` -- `selectedDomain` -> `brushDomain` -- `selectionStyle` -> `brushStyle` -- `onDomainChange` -> `onBrushDomainChange` - -`VictoryCursorContainer` -- `dimension` -> `cursorDimension` -- `onChange` -> `onCursorChange` - -`VictorySelectionContainer` -- `dimension` -> `selectionDimension` - -`VictoryVoronoiContainer` -- `dimension` -> `voronoiDimension` - -`VictoryZoomContainer` -- `dimension` -> `zoomDimension` -- `onDomainChange` -> `onZoomDomainChange` - -**Other Changes** -- [516](https://github.com/FormidableLabs/victory-chart/pull/516) Ensure that `VictoryZoomContainer` respects `clipId` -- [517](https://github.com/FormidableLabs/victory-chart/pull/517) `VictoryZoomContainer` and `VictoryVoronoiCOntainer` should ignore legend children -- [519](https://github.com/FormidableLabs/victory-chart/pull/519) Adds an `alignment` prop for `VictoryBar` so that bars may be rendered with "start", "middle" (default), or "end" alignment relative to their value. -- [520](https://github.com/FormidableLabs/victory-chart/pull/520) Adds an `allowPan` prop for `VictoryZoomContainer`. (Default true) -- [521](https://github.com/FormidableLabs/victory-chart/pull/521) Changes how children of `VictoryZoomContainer` are clipped to enable better zooming for `VictoryPortal` -- [522](https://github.com/FormidableLabs/victory-chart/pull/522) Fixes a bug in `VictoryZoomContainer` that effected time scale charts with `zoomDomain` specified - -## 22.0.0 (2017-09-09) - -- Updates to `victory-core@18.0.0` which includes breaking changes for `VictoryTooltip` styling. - -## 21.6.2 (2017-08-19) - -- [511](https://github.com/FormidableLabs/victory-chart/pull/511) Bugfix: VictoryZoomContainer works properly with VictoryPortal wrapped children -- [512](https://github.com/FormidableLabs/victory-chart/pull/512) Bugfix: fix allowZoom prop for panning only (broken by [496](https://github.com/FormidableLabs/victory-chart/pull/496)) - -## 21.6.1 (2017-08-09) - -- [510](https://github.com/FormidableLabs/victory-chart/pull/510) Render axis line under other axis elements - -## 21.6.0 (2017-08-08) - -- [504](https://github.com/FormidableLabs/victory-chart/pull/504) bugfix: padding bug in `VictoryCursorContainer` -- [505](https://github.com/FormidableLabs/victory-chart/pull/505) Support touch events on all containers -- [506](https://github.com/FormidableLabs/victory-chart/pull/506) Add `props` argument for `VictoryVoronoiContainer` callbacks -- [507](https://github.com/FormidableLabs/victory-chart/pull/507) bugfix: Support array styles for `VictoryLabel` when it is used as a direct child of `VictoryChart` or other wrappers -- [508](https://github.com/FormidableLabs/victory-chart/pull/508) Add support for `animate` as a boolean prop -- [509](https://github.com/FormidableLabs/victory-chart/pull/509) Add `props` as the last argument for all container callbacks - -## 21.5.0 (2017-08-02) - -- [502](https://github.com/FormidableLabs/victory-chart/pull/502) Fix bug in `VictoryZoomContainer` -- [503](https://github.com/FormidableLabs/victory-chart/pull/503) Add downsample option for `VictoryZoomContainer` -- [504](https://github.com/FormidableLabs/victory-chart/pull/504) Fix padding bug in `VictoryCursorContainer` - -## 21.4.0 (2017-07-24) - -- [496](https://github.com/FormidableLabs/victory-chart/pull/496) `VictoryZoomContainer` improvements for real-time, updating data -- [497](https://github.com/FormidableLabs/victory-chart/pull/497) bugfix: apply `domainPadding` to explicit domains -- [498](https://github.com/FormidableLabs/victory-chart/pull/498) `VictoryAxis` determines its own default `tickFormat` -- [499](https://github.com/FormidableLabs/victory-chart/pull/499) Fix label prop merge order for `VictoryVoronoiContainer` labels -- [500](https://github.com/FormidableLabs/victory-chart/pull/500) Support performance improvements for evented components _e.g._ `VictoryArea`, `VictoryBar` ... - -## 21.3.0 (2017-07-13) - -- [495](https://github.com/FormidableLabs/victory-chart/pull/495) Support Webpack 3 and ES6 exports - -## 21.2.4 (2017-07-09) - -- [494](https://github.com/FormidableLabs/victory-chart/pull/494) Ensure that `tickFormat` has access to `tick`, `index`, and `ticks` - -## 21.2.3 (2017-07-02) - -- [491](https://github.com/FormidableLabs/victory-chart/pull/491) Corrects dependent axis for `innerRadius` - -## 21.2.2 (2017-07-02) - -- [490](https://github.com/FormidableLabs/victory-chart/pull/490) Fixes a bug in domain calculation for polar axes - -## 21.2.1 (2017-07-02) - -- [488](https://github.com/FormidableLabs/victory-chart/pull/488) `VictoryZoomContainer` only updates the domain in the dimension it controls -- [489](https://github.com/FormidableLabs/victory-chart/pull/489) Adds support for `innerRadius` on polar charts - -## 21.2.0 (2017-06-29) - -[484](https://github.com/FormidableLabs/victory-chart/pull/484) Remove inappropriate interpolation options for `VictoryArea` and `VictoryLine` -[487](https://github.com/FormidableLabs/victory-chart/pull/487) Fix a bug in `VictoryPolarAxis` domain calculation - -## 21.1.4 (2017-06-22) - -[482](https://github.com/FormidableLabs/victory-chart/pull/482) Add `minBubbleSize` prop to `VictoryScatter` - -## 21.1.3 (2017-06-21) - -[481](https://github.com/FormidableLabs/victory-chart/pull/481) Conditional `preventDefault` for `VictoryZoomContainer` - -## 21.1.2 (2017-06-15) - -[480](https://github.com/FormidableLabs/victory-chart/pull/480) Refactors `VictoryPolarAxis` to support native version - -## 21.1.1 (2017-06-13) - -- Use explicit minimum version of `victory-core` - -## 21.1.0 (2017-06-12) - -[479](https://github.com/FormidableLabs/victory-chart/pull/479) - - Allows multiple dependent axes in `VictoryChart` (all will use the same domain, so normalizing data is necessary) - - Fixes axis labels for `VictoryPolarAxis` - - Adds an `axisValue` convenience helper so that users don't need to calculate an `axisAngle` for a given x value - -[478](https://github.com/FormidableLabs/victory-chart/pull/478) - - Changes how domains are calculated when there is only one data point. After this change, domains will no longer be arbitrarily include zero. - -## 21.0.0 (2017-06-06) - -[466](https://github.com/FormidableLabs/victory-chart/pull/466) Polar Charts -[475](https://github.com/FormidableLabs/victory-chart/pull/475) Brush and Zoom fixes -[476](https://github.com/FormidableLabs/victory-chart/pull/476) Zoom Improvements - -**Breaking Changes** -- Changes how default widths are calculated for `VictoryBar` and groups of bars -- Removes default bar widths from themes - -**Overview** - - Supports polar charts by adding the `polar` prop to charts. - - Polar charts are supported for `VictoryArea`, `VictoryChart`, `VictoryGroup`, `VictoryLine`, `VictoryScatter` `VictoryStack` and `VictoryVoronoi` - - Polar charts are supported for `VictoryBar`, but horizontal (radial) bars are not yet supported - - Polar charts work with `VictoryVoronoiContainer` - - Polar charts work with `VictorySelectionContainer`, but the dimension prop is not supported for polar selections - - Polar charts work with `VictoryZoomContainer`, but zooming is limited to centered radial zooming. Panning has no effect. - - Polar-specific default animations for `VictoryLine` and `VictoryArea` - - *horizontal polar charts are not yet supported* - - *`VictoryCandlestick` and `VictoryErrorBar` do not yet work with polar charts* - - *`VictoryCursorContainer` does not yet work with polar charts* - - *`VictoryBrushContainer` does not work with polar charts* - - *`VictoryZoomContainer` has limitations for polar charts* - -**Planned additional work** - - Support for radial bars - - Support for spider charts (i.e. linear grid lines rather than arcs on polar charts) - - Support separate theming for polar charts (at least axes) - - Support for a polar version of `VictoryCursorContainer` - - Minimal support for polar versions of `VictoryCandleStick` and `VictoryErrorBar` (Elements will be correctly positioned and angled, but path elements will not be altered to reflect curvature, _i.e._ candles will still be `rects` rather than arc paths) - - Investigate hollow polar charts - -**Details** -- Adds `VictoryPolarAxis` with new props: `axisAngle` `startAngle`, `endAngle`, and `labelPlacement` -- Adds `polar`, `startAngle`, `endAngle`, and `defaultPolarAxes` props for `VictoryChart` -- Adds `polar`, `origin`, and `range` props to all chart types. -- Adds `defaultPolarTransitions` static methods to `VictoryLine` and `VictoryArea` -- Uses `LabelHelpers` to simplify all `helper-methods` - - -## 20.0.0 (2017-05-24) - -**Breaking Changes** --[471](https://github.com/FormidableLabs/victory-chart/pull/471) Passes the string value of ticks to the tickFormat function rather than the associated index. **This may be a breaking change for users who are using categorical data and formatting tick values by index** - -**Minor Changes** --[474](https://github.com/FormidableLabs/victory-chart/pull/474) Adds support for a y0 accessor so that users can have granular control over the baseline of components like `VictoryArea` --[472](https://github.com/FormidableLabs/victory-chart/pull/472) Fixes a bug that was cuasing VictoryGroup to override styles on any independent VictoryLabel children - - -## 19.1.1 (2017-05-12) - -- Export `CursorHelpers` - -## 19.1.0 (2017-05-12) - -- [469](https://github.com/FormidableLabs/victory-chart/pull/469) Adds `VictoryCursorContainer` -- [victory-core/243](https://github.com/FormidableLabs/victory-core/pull/243) Impovements to `VictoryContainer` - - Automatic `overflow: "visible"` for elements rendered in `VictoryPortal` (tooltips) - - `VictoryContainer` no longer renders `g` tags (this was causing confusion with evented containers) - - Default responsive styles are now `width: "100%"` `height: "100%"` (fixes a bug in safari) - - Changes the merge order for responsive styles so that `width` and `height` attrs may be overridden -- [468](https://github.com/FormidableLabs/victory-chart/pull/468) Uses new `VictoryContainer` and adds -`renderInPortal` prop to the default label component rendered by continuous data types (`VictoryLine` and `VictoryArea`) so that labels are not clipped. - -## 19.0.0 (2017-05-02) - -**BREAKING CHANGE** -- Updates to `react@^15.5.0` -- Uses separate `prop-types` package -- Projects using Victory must also depend on `prop-types` - -## 18.2.1 (2017-04-20) - -- add `RawZoomHelpers` and `makeCreateContainerFunction` -- `combineContainerMixins` handles arbitrary number of mixins -- upgrade `victory-core` to get `getSVGEventCoordinates` native support - -## 18.2.0 (2017-04-04) - -- Adds `createContainer` for creating containers with multiple behaviors (e.g. Zoom and Voronoi) -- Adds `combineContainerMixins` and mixins for all containers for combining custom containers -- Correct styling bug for containers -- Correct theme propagation for containers -- Support `victory-native` upgrade. - -## 18.1.4 (2017-03-21) - -- [447](https://github.com/FormidableLabs/victory-chart/pull/447) Improves performance for container components -- Fixes [#511](https://github.com/FormidableLabs/victory/issues/511) -- Fixes [#526](https://github.com/FormidableLabs/victory/issues/526) - -## 18.1.3 (2017-03-15) - -- Removes unnecessary props from group components -- Fixes a bug with domainPadding in grouped bar charts - -## 18.1.2 (2017-03-14) - -- [441](https://github.com/FormidableLabs/victory-chart/pull/441) -- Support for better multi-repo tooling - -## 18.1.1 (2017-03-10) - -- Fixes a bug that was causing unnecessary `VictoryClipContainer` components to be rendered by `VictoryZoomContainer` - -## 18.1.0 (2017-03-03) - -- Adds `onActivated` and `onDeactivated` callbacks for `VictoryVoronoiContainer` -- Supports `VictoryClipContainer` on all components (as groupComponent) - -## 18.0.0 (2017-02-27) - -[438](https://github.com/FormidableLabs/victory-chart/pull/438) -**Breaking Changes** -- `VictoryZoomContainer` now zooms both x and y dimensions, use the prop `dimension="x"` to return to the old behavior -- `VictoryZoomContainer` now centers zoom behavior on the mouse position rather than the center of the chart -- `VictoryZoomContainer` has a minimum zoom level of the extent of the domain / 1000. Set a custom minimum with the `minimumZoom` prop, which takes an object with numeric values for x and/ or y. -- `VictoryBrushContainer` no longer has `dimension="x"` as the default value. - -## 17.0.1 (2017-02-25) - -[437](https://github.com/FormidableLabs/victory-chart/pull/437) -- Fixes a bug with `VictoryZoomContainer` panning behavior - -## 17.0.0 (2017-02-25) - -[432](https://github.com/FormidableLabs/victory-chart/pull/432) - -**This is a breaking change for `VictoryLine` and `VictoryArea` charts using the `label` prop** - -- Adds `VictoryVoronoiContainer` for hover events (tooltips). `VictoryVoronoiContainer` has several benefits over `VictoryVoronoi` and `VictoryVoronoiTooltip` - - Supports multi-dataset voronoi - - Much better performance (voronoi polygons are not actually rendered, so the number of nodes rendered is dramatically lower) - - Supports multi-data tooltips - - Supports rectangular selections with a dimension prop - _i.e._ `dimension="x"` creates vertical hover areas for every unique x value in all child data - -- Deprecates `label` in favor of `labels` in `VictoryLine` and `VictoryArea`, allowing individual data labels for these components like in other Victory components. This will be a breaking change for anyone using the `label` prop in `VictoryLine` or `VictoryArea`. Series labels will need to be configured manually - -- Changes how null values are handled in `VictoryArea`, and groups all line and area segments (i.e. split by null values) into the same `eventKey`, so that they operate as a single line for the purposes of events. - -## 16.1.2 (2017-02-05) - -- [431](https://github.com/FormidableLabs/victory-chart/pull/431) -- Sets a maximum amount of scale per zoom event for smoother interaction with fast onWheel events - -## 16.1.1 (2017-02-03) - -- Correct export of `SelectionHelpers` - -## 16.1.0 (2017-02-03) - -- [429](https://github.com/FormidableLabs/victory-chart/pull/429) -- Throttles `onWheel` and `onMouseMove` events on Victory container components -- Exports container event helpers - -## 16.0.1 (2017-02-01) - -- [428](https://github.com/FormidableLabs/victory-chart/pull/428) -- Fixes a bug in `VictoryBrushContainer` - -## 16.0.0 (2017-01-30) - -- [427](https://github.com/FormidableLabs/victory-chart/pull/427) -- Adds `VictoryBrushContainer` -- Adds `VictoryZoomContainer` -- **Deprecates `VictoryZoom`** -- Changes default styles for `VictorySelectionContainer` -- Adds override-able `selectionComponent` for `VictorySelectionContainer` -- Adds `domain` and `standalone` to list of props that get stored in parent state -- Simplifies and standardizes container rendering across components. - -[See pull request for examples](https://github.com/FormidableLabs/victory-chart/pull/427) - - -## 15.0.1 (2017-01-06) - -- Add `bounds` as the second argument for VictorySelectionContainer `onSelection` callback - -## 15.0.0 (2017-01-03) - -- Adds `VictorySelectionContainer` -- All functional styles and props are evaluated at the level of the primitive component rather than eariler -- Adds support for `defaultEvents` on `containerComponents` - -## 14.0.4 (2016-12-13) - -- Fixes date handling in VictoryZoom - -## 14.0.3 (2016-12-12) - -- Fixes an animation bug with continuous children. - -## 14.0.2 (2016-12-09) - -- Fixes VictoryZoom bugs related to events and render order. - -## 14.0.1 (2016-12-07) - -- Fixes an [animation bug](https://github.com/FormidableLabs/victory/issues/444) by removing data accessor props from the animation whitelist - -## 14.0.0 (2016-12-02) - -- Change how continuous animations behave _i.e._ VictoryArea and VictoryLine - - clipPath curtain will never be smaller than the range except during `onLoad` -- Fixes a bug where paths defining bars were not being closed. - -## 13.2.4 (2016-21-16) - -- Fixes a bug with `VictoryAxis` offsets -- Adds an `allowZoom` prop that can turn on / off zooming on VictoryZoom. This prop is `true` by default - -## 13.2.3 (2016-18-09) - -- fix broken timer on unmount - -## 13.2.2 (2016-11-09) - -- Get timer only when needed - -## 13.2.1 (2016-11-09) - -- Code style consistency - -## 13.2.0 (2016-11-09) - -- Adds `VictoryZoom` to enable panning and zooming on charts - -## 13.1.1 (2016-10-31) - -- Stricter npmignore - -## 13.1.0 (2016-10-26) - -- Uses `publishr` to reduce npm installed package size [#413](https://github.com/FormidableLabs/victory/issues/413) -- Fixes a bug where label padding was not being applied to tick labels [#408](https://github.com/FormidableLabs/victory/issues/408) -- Changes how the domain is calculated when there is only one data point, or when the minimum and maximum of the data is equal in a given dimension [#407](https://github.com/FormidableLabs/victory/issues/407) -- Ensures that ticks array is not empty after filtering zeroes for crossed axes -- Fixes naming for "stack" and "group" roles - -## 13.0.3 (2016-10-26) - -- Allow npm 2 install -- Add `shouldAnimate` conditional for victory-native compatibility - -## 13.0.2 (2016-10-19) - -- Fix date bug in `VictoryGroup` -- Ensure axis ticks always exist - -## 13.0.1 (2016-10-18) - -- Update `victory-core` for react native support -- Fix bugs in exit transitions for continuous data components (line, area) - -## 13.0.0 (2016-10-13) - -- Upgrades all d3 packages -- Greater consistency of props for props passed to primitive components -- Adds `VictoryPortal` which renders any child elements in a top level portal container if it exists -- Adds `VictoryClipContainer` which renders children in a group container with a `clipPath` if `clipPath` props exist -- `VictoryArea` and `VictoryLine` use `VictoryClipContainer` as their `groupComponent` -- Removes `clipPath` properties from `VictoryLine` and `VictoryArea` -- Extracts event logic into a new inverted inheritance higher order component `addEvents` which is used by all chart components -- Moves `Data`, `Domain`, and `Scale` helpers from `victory-chart` to `victory-core` -- Fixes date related domain bugs -- Fixes stacking for time scale data -- Supports separate theming for x and y axes - -## 12.0.1 (2016-09-15) - -- Fixes ordering in stacked and grouped data -- Fixes minor tooltip bugs -- Removes unused `flyoutProps` prop from `VictoryVoronoiTooltip` - -## 12.0.0 (2016-09-09) - -- Adds support for `VictoryTooltip` -- Adds `VictoryVoronoi` component -- Adds `VictoryVoronoiTooltip` -- Moves all primitive rendered components to `victory-core` where they are exported for external use -- Enhances `VictoryGroup` so that it can accept a `data` prop which it will pass to all children. This also allows groups of components to be stacked as one -- Adds support for `defaultEvents` in any primitive component (_i.e._ `dataComponent`, `labelComponent`) -- Adds `onLoad` animations -- Adds a `sortKey` prop to `VictoryLine` to allow sorting by fields other than "x" -- Adds a `fixLabelOverlap` boolean prop to `VictoryAxis`. When enables, this feature renders a smaller subset of ticks when the full set of ticks would cause overlapping labels. This feature is currently limited to evenly spaced labels. -- Fixes a bug related to `bubbleProperty` in `VictoryScatter` -- Allows string data in `VictoryCandlestick` and `VictoryErrorBar` -- Performance optimizations - -## 11.0.1 (2016-08-21) - -- Refactors ClipPath component to make it easier to write a native version. - -## 11.0.0 (2016-08-18) - -**This release includes breaking changes for Themes** -- Updates the VictoryTheme API to more closely match the props object -- Uses `VictoryTheme.grayscale` for default styling -- Fixes a bug related to bar width -- Improves performance by simplifying scale type checking for VictoryBar and VictoryArea -- Fixes default transitions for VictoryBar and VictoryArea -- Adds documentation for VictoryTheme - -## 10.3.0 (2016-08-11) - -- Improved animation for continuous data components (_i.e._ VictoryLine, VictoryArea) using clipPath -- Support for arrays of `childName` in events -- Adds `displayName` to all component for ease of debugging / testing - -## 10.2.6 (2016-08-04) - -- Fix bug in automatic domainPadding -- Fix bug in generated data -- Fix bug in domainPadding for stacked charts -- Fix colorScale in wrapped components - -## 10.2.5 (2016-08-02) - -- Fix animation bug in VictoryCandlestick -- Fix label bug in VictoryCandlestick -- Fix style bug in VictoryCandlestick -- Fix axis orientation for negative charts -- Clean up documentation - -## 10.2.4 (2016-08-01) - -- Fix label style bug - -## 10.2.3 (2016-08-01) - -- Fix minor errorbar bug - -## 10.2.2 (2016-07-29) - -- Fix tick style bug - -## 10.2.1 (2016-07-29) - -- Update `victory-core` -- Removes `reduce-calc-css` - -## 10.2.0 (2016-07-29) - -- Performance improvements across all components -- Supports asymmetric `domainPadding` -- Supports `domainPadding` on all child components -- Adds automatic `domainPadding` for grouped bars -- Fixes [bugs related to log scales](https://github.com/FormidableLabs/victory-chart/pull/317) -- Fixes [a bug related to time scales](https://github.com/FormidableLabs/victory-chart/pull/318) -- Improves consistency for charts with empty and single value data arrays - -## 10.1.0 (2016-07-15) - -- Adds VictoryErrorBar -- Changes default styles to the greyscale theme -- Auto-width enhancement for VictoryBar -- Aria roles for all rendered elements -- Supports negative domain padding - -## 10.0.0 (2016-07-07) - -- Adds support for Victory Native - - Adds `containerComponent` and `groupComponent` props to all components - -## 9.2.1 (2016-06-30) - -- Changes helper methods to make horizontal bar chart behavior more intuitive - -## 9.2.0 (2016-06-17) - -- Supports events on the parent element via the `parent` namespace in the `events` prop. -- `parent` events have access to `width`, `height`, `style` and the calculated `scale` (with `domain` and `range` already applied). Where applicable `parent` events also have access to `data` -- Shared `parent` events are automatically supported in components that use `VictorySharedEvents` by default (_i.e._ VictoryChart, VictoryGroup, VictoryStack) -- When mutating elements via the return from event handlers, mutation objects may now take arrays for `eventKey` to target several individual elements, or the special value "all" to apply changes to all elements of a particular target type -- Fixes a bug related to an incorrect default `tickFormat` for dates -- FIxes a bug related to incorrect axis label placement - -## 9.1.3 (2016-06-14) - -- Alters the render order for children of `VictoryChart` so that _default_ axes are always rendered before other children. When axes are explicitly defined children of `VictoryChart` will still be rendered in the order they are defined. -- Alters the render order of elements within `VictoryAxis` so that grid elements are rendered before ticks and tick labels -- Fixes a bug in `VictoryGroup` that was causing custom `labelComponents` of its children to be overridden. - -## 9.1.2 (2016-06-13) - -- Pre-calculates and applies VictoryAxis transform to individual elements. This allows custom axis components (_i.e._ `tickLabelComponent`) to be absolutely positioned by overriding position props - -## 9.1.1 (2016-06-13) - -- Custom component props get precedence over calculated props - -## 9.1.0 (2016-06-13) - -- Fixes bugs related to horizontal bar charts -- Fixes bugs related to label transfroms -- Increases default font sizes for readability -- Adds basic aria roles -- Adds support for custom container elements -- Adds vectorEffect non-scaling-stroke to support responsive charts - -## 9.0.0 (2016-06-01) - -- Upgrades to React 15 -- Supports wrapped components -- Updates the events API to support shared events **This is a breaking change for events** - -## 8.0.0 (2016-05-13) - - - improves consistency for `labelComponent` and `dataComponent` props. Replaces a custom `SliceLabel` component with `VictoryLabel` to make the api more consistent and predictable. **This is a breaking change for custom label components**, as `VictoryLabel` expects a different set of props than the previous `SliceLabel` component. See [VictoryLabel](http://formidable.com/open-source/victory/docs/victory-label) for more detail. - - - Custom components are now supported for all rendered axis elements (axis, axisLabel, grid, ticks, tickLabels) - - - All data and label components now have access to scale so that they can create correctly scaled elements from data i.e. error bars. - -- Functional styles and props are now all evaluated before they are passed as props to `labelComponent` or `dataComponent`, so that custom components will have access to the final values. - -- events are bound and partially applied prior to being passed as props to `labelComponent` or `dataComponent` - -- it is now possible to specify `angle` and `verticalAnchor` props for` VictoryLabel` via the style object - -- event return values are stored differently on state to facilitate interaction between data and labels. **This is a breaking change for events** as event handlers must now return an object with with `data` and/or `labels` keys so that these values may be applied appropriately to data and label elements respectively. - -## 7.0.0 (2016-04-15) - -- VictoryBar and VictoryArea no longer support multiple datasets. -- VictoryStack and VictoryGroup define stacked and grouped layouts for their children -- Custom data components supported on for VictoryBar, VictoryLine, VictoryScatter, - VictoryArea via the `dataComponent` prop -- Enter and exit transitions animate. Enter and exit transition defaults defined - VictoryBar, VictoryArea, VictoryScatter, and VictoryLine. Custom transitions may be - defined via the `onExit` and `onEnter` properties of the `animation` prop -- Top level svgs are all responsive by default (using svg viewBox). To render a fixed size - component, set the `standalone` prop to false and render the component inside an svg tag - -## 6.0.0 (2016-03-14) - -- Add VictoryArea component -- Add event handling via an `events` prop -- Update to lodash 4 -- Update `d3-shape` to the latest version (minor breaking changes on interpolation types) -- Updates via `builder-victory-component` to support Babel 6 -- Provide label text via a `text` prop rather than children - -## 5.0.2 (2016-03-04) - -- Add validation of length for `dataAttributes` prop -- Remove source-maps from git -- Various documentation fixes - -## 5.0.1 (2016-03-01) - -- Provide datum to victory-line custom label -- Upgrade to `victory-core@1.0.0` - -## 5.0.0 (2016-02-26) - -- VictoryBar, VictoryLine, VictoryScatter, and VictoryAxis are now all part of the VictoryChart repo. -- VictoryChart depends on VictoryCore instead of VictoryUtil, VictoryLabel, and VictoryAnimation individually. -- VictoryChart no longer depends on Radium -- Significant rendering performance improvements - -## 4.0.0 (2016-01-30) - -- Supports data accessor functions! -[more detail](https://github.com/FormidableLabs/victory/issues/84) -- Application dependencies like `radium` and `lodash` now live in components, not in the Builder archetype. This is a breaking change. https://github.com/FormidableLabs/victory/issues/176 - -## 3.0.0 (2016-01-26) - -- Upgrade to Radium 0.16.2. This is a breaking change if you're using media queries or keyframes in your components. Please review upgrade guide at https://github.com/FormidableLabs/radium/blob/master/docs/guides/upgrade-v0.16.x.md - -## 2.2.0 (2016-1-21) - -- Extracted shared code into `victory-util` -- Increased unit test coverage to ~75% - -## 2.1.3 (2015-12-30) - -- update archetype - -## 2.1.2 (2015-12-30) - -- Fixed a bug in `victory-bar` that was causing the cumulative max on stacked bar charts to be overestimated -- Fixed a bug related to date formatting in Firefox - -## 2.1.1 Alpha (2015-12-18) - -Functional styles and functional props (where appropriate) for child components - -using `d3-modules` instead of all of `d3` - -Basic code coverage. - -We make no promises about any code prior to this release. diff --git a/packages/victory-core/CHANGELOG.md b/packages/victory-core/CHANGELOG.md deleted file mode 100644 index a7b6e188e..000000000 --- a/packages/victory-core/CHANGELOG.md +++ /dev/null @@ -1,1055 +0,0 @@ -VictoryCore Changelog -===================== - -## 24.0.1 (2018-06-21) - --[392](https://github.com/FormidableLabs/victory-core/pull/392) Make sure transforms are applied to primitive components - -## 24.0.0 (2018-06-19) - --[390](https://github.com/FormidableLabs/victory-core/pull/390) *Breaking Change for other Victory packages* -This PR changes how the exported helper `reduceChildren` operates, and removes `getDomainFromGroupedData` - -## 23.0.7 (2018-06-15) - --[332](https://github.com/FormidableLabs/victory-core/pull/332) Adds ability to skip roles in `reduceChildren` - -## 23.0.6 (2018-06-12) - --[388](https://github.com/FormidableLabs/victory-core/pull/388) Improve default single point domain padding (use positive values only when the single point is zero) --[389](https://github.com/FormidableLabs/victory-core/pull/389) Don't enforce zero for explicit domains (VictoryArea and VictoryBar) - -## 23.0.5 (2018-06-06) - --[387](https://github.com/FormidableLabs/victory-core/pull/387) Use `evt.nativeEvent.identifier` to differentiate DOM events from react-native events - -## 23.0.4 (2018-06-06) - --[386](https://github.com/FormidableLabs/victory-core/pull/386) Alter `Selection` util for `victory-native` - -## 23.0.3 (2018-06-06) - --[385](https://github.com/FormidableLabs/victory-core/pull/385) Revert to module export for `Selection` util for `victory-native` - -## 23.0.2 (2018-06-05) - --[384](https://github.com/FormidableLabs/victory-core/pull/384) Changes to `domainPadding` behavior will only occur when new `singleQuadrantDomainPadding` prop is false. - -## 23.0.1 (2018-06-05) - --[382](https://github.com/FormidableLabs/victory-core/pull/382) Fixes bug for charts with y0 values - -## 23.0.0 (2018-06-04) - --[380](https://github.com/FormidableLabs/victory-core/pull/380) - -**Breaking Changes** -- `domainPadding` no longer constrains the padding to existing quadrants. Use the new `minDomain` prop to create a padded domain that stops cleanly at zero -- Refactors utility methods. This is an internal breaking change, but should not be a breaking change for most Victory users. See pull request for details -- Upgrades to `react-fast-compare@^2.0.0` which changes function comparison. This means that Victory components _will_ update when functions are not equal. This closes several Victory issues, but may cause a slight performance decline - -## 22.1.6 (2018-06-01) - --[378](https://github.com/FormidableLabs/victory-core/pull/378) Fixes a cornerRadius bug in `Bar` - -## 22.1.5 (2018-05-31) - -- [377](https://github.com/FormidableLabs/victory-core/pull/377) Allow negative gutters for `VictoryLegend` - -## 22.1.4 (2018-05-23) - -- Republish with `npm@5.6.0` - -## 22.1.3 (2018-05-23) - --[376](https://github.com/FormidableLabs/victory-core/pull/376) Ensure symmetric category domain for polar charts - -## 22.1.2 (2018-05-23) - --[375](https://github.com/FormidableLabs/victory-core/pull/375) Check for axis specific categories in stacked charts - -## 22.1.1 (2018-05-17) - --[374](https://github.com/FormidableLabs/victory-core/pull/374) Consistent `PropTypes` for `clipId` --[373](https://github.com/FormidableLabs/victory-core/pull/373) Evaluate styles for polar bars - -## 22.1.0 (2018-05-04) - --[372](https://github.com/FormidableLabs/victory-core/pull/372) Support top and bottom cornerRadius for bars. Support functional cornerRadius --[371](https://github.com/FormidableLabs/victory-core/pull/371) Evaluate Whisker styles --[370](https://github.com/FormidableLabs/victory-core/pull/370) Refactor to remove lifecycle methods - -## 22.0.0 (2018-04-21) - -**Breaking Changes** --[364](https://github.com/FormidableLabs/victory-core/pull/364) Perf: Remove style whitelist filter. - -Other Changes --[369](https://github.com/FormidableLabs/victory-core/pull/369) Ensure state --[368](https://github.com/FormidableLabs/victory-core/pull/368) Audit lodash methods --[367](https://github.com/FormidableLabs/victory-core/pull/367) Simplify state filtering --[365](https://github.com/FormidableLabs/victory-core/pull/365) Perf: Return early when label content is null or undefined --[362](https://github.com/FormidableLabs/victory-core/pull/362) Perf: Filter falsey mutations from state - -## 21.1.3 (2018-04-17) - --[363](https://github.com/FormidableLabs/victory-core/pull/363) Bugfix events system - -## 21.1.12 (2018-04-17) - -Event system perf improvements --[362](https://github.com/FormidableLabs/victory-core/pull/362) --[361](https://github.com/FormidableLabs/victory-core/pull/361) - -## 21.1.11 (2018-04-16) - --[360](https://github.com/FormidableLabs/victory-core/pull/360) add clipPath to style whitelist - -## 21.1.10 (2018-04-14) - --[359](https://github.com/FormidableLabs/victory-core/pull/359) Add missing attributes to style whitelist - -## 21.1.9 (2018-04-13) - --[358](https://github.com/FormidableLabs/victory-core/pull/358) Add missing boxplot theme --[357](https://github.com/FormidableLabs/victory-core/pull/357) Use `react-fast-compare`, not a local copy --[356](https://github.com/FormidableLabs/victory-core/pull/356) Text primitive now accepts string percentages for `x` and `y`. Thanks @Olliebaba! - -## 21.1.8 (2018-04-11) - --[355](https://github.com/FormidableLabs/victory-core/pull/355) Fix for [issue 963](https://github.com/FormidableLabs/victory/issues/964), Maximum call stack size exceeded. Adds a custom fork of `fast-deep-equal` (with bugfix) locally. - -## 21.1.6 (2018-04-09) - --[353](https://github.com/FormidableLabs/victory-core/pull/353) When `fast-deep-equal` fails it will now warn instead of throwing an error. --[352](https://github.com/FormidableLabs/victory-core/pull/352) Correct typo in `victory-util/add-events` - -## 21.1.5 (2018-04-06) - --[351](https://github.com/FormidableLabs/victory-core/pull/351) Replace `Collection.checkEquality` with [fast-deep-equal](https://github.com/epoberezkin/fast-deep-equal) - -## 21.1.4 (2018-04-05) - --[350](https://github.com/FormidableLabs/victory-core/pull/350) Adds support for arrays in event targets (event attachment, not mutation) - -## 21.1.3 (2018-04-04) - --[348](https://github.com/FormidableLabs/victory-core/pull/348) Upgrade to builder 4 --[349](https://github.com/FormidableLabs/victory-core/pull/349) Add missing style props to whitelist - -## 21.1.2 (2018-04-04) - --[347](https://github.com/FormidableLabs/victory-core/pull/347) Use sanitizeStyle on primitive components; allows style checks to be removed from `victory-chart`. --[346](https://github.com/FormidableLabs/victory-core/pull/346) Completely remove `lodash.omit()` for performance. See [issue 956](https://github.com/FormidableLabs/victory/issues/956). - -## 21.1.1 (2018-03-27) - --[345](https://github.com/FormidableLabs/victory-core/pull/345) Fix naming bug in boxplot themes - -## 21.1.0 (2018-03-27) - --[343](https://github.com/FormidableLabs/victory-core/pull/343) Changes the render order of lines and areas in the `Area` primitive --[344](https://github.com/FormidableLabs/victory-core/pull/344) bug fix for `VictoryTransition` with fewer children --[334](https://github.com/FormidableLabs/victory-core/pull/334) Add `Whisker` primitive for `VictoryBoxPlot` - -## 21.0.4 (2018-02-07) - --[339](https://github.com/FormidableLabs/victory-core/pull/339) Adds a "minus" option for `Point` - -## 21.0.3 (2018-02-07) - --[341](https://github.com/FormidableLabs/victory-core/pull/341) Improve sCU logic for primitive components - -## 21.0.2 (2018-02-05) - --[337](https://github.com/FormidableLabs/victory-core/pull/337) Add `sideEffects: false` --[338](https://github.com/FormidableLabs/victory-core/pull/338) Fix bar path bug in Firefox - -## 21.0.1 (2018-02-04) - --[336](https://github.com/FormidableLabs/victory-core/pull/336) Fixes key names for `ErrorBar` - -## 21.0.0 (2018-02-04) - --[325](https://github.com/FormidableLabs/victory-core/pull/325) Adds a `getDimension` static method for `VictoryLegend` --[326](https://github.com/FormidableLabs/victory-core/pull/326) Adds a fallback prop for `VictoryLegend` `titleOrientation` --[327](https://github.com/FormidableLabs/victory-core/pull/327) Use `pointerEvents: "painted"` for grid styles --[328](https://github.com/FormidableLabs/victory-core/pull/328) Adds `inline` prop for `VictoryLabel` --[329](https://github.com/FormidableLabs/victory-core/pull/329) Bugfix `add-events` --[330](https://github.com/FormidableLabs/victory-core/pull/330) Adds `wickStyleWidth` prop for `Candle` - *This is a breaking change as it changes the expected props for `Candle`* --[331](https://github.com/FormidableLabs/victory-core/pull/331) Bugfix portal rendering --[333](https://github.com/FormidableLabs/victory-core/pull/333) Whitelist style attributes --[335](https://github.com/FormidableLabs/victory-core/pull/335) Update primitives - *This is a breaking change for `victory-native` and anyone extending primitive components.* - *This is a breaking change for for the `Line` component. Renamed `Axis` / `Grid` - -## 20.6.0 - -- [324](https://github.com/FormidableLabs/victory-core/pull/324) Adds support for external event mutations - - Adds `externalEventMutations` prop to `VictorySharedEvents` and all components enhanced with the `add-events` HOC - - `externalEventMutations` prop format: - -``` -externalEventMutations: PropTypes.arrayOf(PropTypes.shape({ - callback: PropTypes.function, - childName: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.array - ]), - eventKey: PropTypes.oneOfType([ - PropTypes.array, - CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]), - PropTypes.string - ]), - mutation: PropTypes.function, - target: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.array - ]) -})) -``` - -*Note:* `eventKey` and `target` must be specified for externalEventMutations. When using `extenalEventMutations` with shared events (_i.e._ events on VictoryChart etc), `childName` is also required. - -*Note:* The `callback` supplied to `externalEventMutations` should be used for clearing mutations. This is crucial for animating charts - - -## 20.5.0 (2017-12-21) - --[323](https://github.com/FormidableLabs/victory-core/pull/323) Add support for immutable data structures -*note: compatible with `immutable@v3.8.x` and will be compatible with `immutable@v4.0.x` when released* - -## 20.4.0 (2017-12-17) - -- [322](https://github.com/FormidableLabs/victory-core/pull/322) Adds support for a `sortOrder` prop with values "ascending" or "descending" - -## 20.3.0 (2017-12-04) - -- [320](https://github.com/FormidableLabs/victory-core/pull/320) Adds `rowGutter` and support for asymmetric gutters for both `gutter` and `rowGutter` in `VictoryLegend` - -## 20.2.0 (2017-11-14) - -- [316] (https://github.com/FormidableLabs/victory-core/pull/316) - - adds `cornerRadius` prop for `Bar` - - adds `barRatio` prop for `Bar` - - removes rounding from calculated paths - - fixes a domain bug for negative bars and areas - -## 20.1.0 (2017-11-07) - -- [315](https://github.com/FormidableLabs/victory-core/pull/315) Infrastructure updates to support React 16 - -## 20.0.0 (2017-10-19) - -**Breaking Change** -- [312](https://github.com/FormidableLabs/victory-core/pull/312) Removes `orientDomain` method, as it will not be used with corresponding change for `VictoryChart`. This change will be incompatible with versions of `victory-chart` lower than `24.0.0` - -- [310](https://github.com/FormidableLabs/victory-core/pull/310) Add `getPath` prop for `Point` to support custom path calculation -- [311](https://github.com/FormidableLabs/victory-core/pull/311) Fix bug in `TextSize` -- [313](https://github.com/FormidableLabs/victory-core/pull/313) Use `tickFormat` for calculating a stringMap when appropriate -- [314](https://github.com/FormidableLabs/victory-core/pull/314) Theme changes: Change `pointerEvents` to "visible" for grids - -## 19.0.3 (2017-10-04) - -- [308](https://github.com/FormidableLabs/victory-core/pull/308) Fix borderWidth on error bars -- [309](https://github.com/FormidableLabs/victory-core/pull/309) Fix non-responsive container styles, add container ref - -## 19.0.2 (2017-10-02) - -- [307](https://github.com/FormidableLabs/victory-core/pull/307) Adds a default className for containers - -## 19.0.1 (2017-10-02) - -- [306](https://github.com/FormidableLabs/victory-core/pull/306) Simplify container styling - -## 19.0.0 (2017-09-30) - -**BREAKING CHANGES:** Containers are now rendered in parent divs. This may be a breaking change for parent styles. - -- [299](https://github.com/FormidableLabs/victory-core/pull/299) Renders charts and portals in `div` elements to give z-index control to portals -- [300](https://github.com/FormidableLabs/victory-core/pull/300) Fixes path rendering for decimal values -- [302](https://github.com/FormidableLabs/victory-core/pull/302) Adds an `alignment` prop for `` so that bars may be rendered with "start", "middle" (default), or "end" alignment relative to their value. -- [304](https://github.com/FormidableLabs/victory-core/pull/304) `VictoryLabel` positioning is calculated from `datum` when `x` and `y` positioning props are not provided. This features supports data annotations -- [305](https://github.com/FormidableLabs/victory-core/pull/305) Adds a `groupComponent` prop for `VictoryPortal`. This prop is used by `VictoryZoomContainer` so that children rendered within `VictoryPortal` may still be clipped when zooming - -## 18.0.2 (2017-09-12) - -- [297](https://github.com/FormidableLabs/victory-core/pull/297) Adjusts automatic width in `VictoryLegend` - -## 18.0.1 (2017-09-09) - -- [296](https://github.com/FormidableLabs/victory-core/pull/296) Fixes layout bug in `VictoryLegend` - -## 18.0.0 (2017-09-09) - -**BREAKING CHANGES:** Styling and layout for `VictoryTooltip` and `VictoryLegend` are impacted - -- [293](https://github.com/FormidableLabs/victory-core/pull/293) **This may be a breaking change** -Removes the default theme from `VictoryTooltip`. See PR for additional details. -- [294](https://github.com/FormidableLabs/victory-core/pull/294) **This may be a breaking change** Improvements for `VictoryLegend` - - Adds a legend border that can be styled or replaced with a custom component - - new props: `borderComponent={}` and `borderPadding` - - new style / event namespace: "border" - - Adds new primitive component `Border` which renders a `rect` element - - props: common props + `width`, `height`, `x` and `y` - - Adds a legend title with supporting props for positioning and centering titles - - new props: title, titleComponent={}, titleOrientation, centerTitle - - new style / event namespace: "title" -- [295](https://github.com/FormidableLabs/victory-core/pull/295) Fixes deprecation error for React 16 - -## 17.2.7 (2017-08-22) - -- [291](https://github.com/FormidableLabs/victory-core/pull/291) Domain should include negative y0 values -- [292](https://github.com/FormidableLabs/victory-core/pull/292) Fix single point domain logic for dates - -## 17.2.6 (2017-08-19) - -- [290](https://github.com/FormidableLabs/victory-core/pull/290) Bugfix: VictoryPortal with VictoryZoomContainer - -## 17.2.5 (2017-08-14) - -- [289](https://github.com/FormidableLabs/victory-core/pull/289) Bugfix: createContainer + containerId - -## 17.2.4 (2017-08-13) - -- [288](https://github.com/FormidableLabs/victory-core/pull/288) Bugfix: containerId - -## 17.2.3 (2017-08-09) - -- [287](https://github.com/FormidableLabs/victory-core/pull/287) Allow users to override `touchAction` style in containers - -## 17.2.2 (2017-08-08) - -- [286](https://github.com/FormidableLabs/victory-core/pull/286) bugfix: tooltip positioning with `dx` and `dy` - -## 17.2.1 (2017-08-07) - --[285](https://github.com/FormidableLabs/victory-core/pull/285) bugfix: tooltips with `activateData` - -## 17.2.0 (2017-08-07) - -- [278](https://github.com/FormidableLabs/victory-core/pull/278) Support touch events -- [280](https://github.com/FormidableLabs/victory-core/pull/280) Fix tooltip rendering in VictoryPortal -- [281](https://github.com/FormidableLabs/victory-core/pull/281) bugfix: functional label padding -- [282](https://github.com/FormidableLabs/victory-core/pull/282) bugfix: fix "unknown props on `` tag" warning -- [283](https://github.com/FormidableLabs/victory-core/pull/283) Allow boolean value for animate prop -- [284](https://github.com/FormidableLabs/victory-core/pull/284) Sort arrays by "key" when animating. See [#684](https://github.com/FormidableLabs/victory/issues/684) - -## 17.1.0 (2017-08-02) - -- [274](https://github.com/FormidableLabs/victory-core/pull/274) Fixes automatic bar width calculation for horizontal bars -- [275](https://github.com/FormidableLabs/victory-core/pull/275) Adds an optional `containerId` prop for all Victory containers -- [276](https://github.com/FormidableLabs/victory-core/pull/276) Adds `downsample` method for `Data` - -## 17.0.0 (2017-07-24) - -- [267](https://github.com/FormidableLabs/victory-core/pull/267) Correct single-point domain logic -- [268](https://github.com/FormidableLabs/victory-core/pull/268) Correct stacked domain logic -- [269](https://github.com/FormidableLabs/victory-core/pull/269) `VictoryLabel` accepts percentage values for `x` and `y` -- [270](https://github.com/FormidableLabs/victory-core/pull/270) `VictoryLegend` supports events -- [272](https://github.com/FormidableLabs/victory-core/pull/272) Aggressive `shouldComponentUpdate` logic for evented Victory components *Breaking change for some components using `addEvents` - -## 16.3.0 (2017-07-13) - -- [266](https://github.com/FormidableLabs/victory-core/pull/266) Support Webpack 3 and ES6 exports - -## 16.2.0 (2017-07-12) - -- [265](https://github.com/FormidableLabs/victory-core/pull/265) Translates `Slice` when an `origin` prop is given - -## 16.1.1 (2017-07-02) - -- [263](https://github.com/FormidableLabs/victory-core/pull/263) Removes commas prior to interpolating strings - -## 16.1.0 (2017-06-29) - -- [262](https://github.com/FormidableLabs/victory-core/pull/262) Consistent widths for polar bars. -**This change may require style adjustments to maintain visual continuity** - -## 16.0.4 (2017-06-28) - -- [515](https://github.com/FormidableLabs/victory/issues/515) Bugfix for ARIA title and desc. Now both have unique IDs. - -## 16.0.3 (2017-06-27) - -Minor bug fixes: - - [255](https://github.com/FormidableLabs/victory-core/pull/255) - - [257](https://github.com/FormidableLabs/victory-core/pull/257) - - [259](https://github.com/FormidableLabs/victory-core/pull/259) - - [260](https://github.com/FormidableLabs/victory-core/pull/260) - -## 16.0.2 (2017-06-12) - --[254](https://github.com/FormidableLabs/victory-core/pull/254) Generalize label angle helper - -## 16.0.1 (2017-06-06) - --[251](https://github.com/FormidableLabs/victory-core/pull/251) Adds an optional `clipId` prop to `VictoryClipContainer` --[252](https://github.com/FormidableLabs/victory-core/pull/252) Changes domain calculation for single data point components so that domains aren't forced to include zero - -## 16.0.0 (2017-06-06) - --[240](https://github.com/FormidableLabs/victory-core/pull/240) Polar Charts - -*Breaking Changes* - - Removes default bar width from themes - - Changes how default bar widths are calculated - - Changes render methods for `Area`, `Bar` and `Curve` primitives (Breaking change for `victory-native` and others extending primitives) - - Changes function sigintures for `Selection.getDomainCoordinates` and `Selection.getDataCoordinates` (Breaking change for `victory-native`) - -*Features* - - Adds a new `Arc` primitive which is used for polar axes and grid lines - - Adds `polar` and `origin` props to rendered components (primitives, `VictoryLabel`, `VictoryClipContainer` `VictoryContainer`) - - Supports radial areas for `Area` and `Curve`. These props have no effect for cartesian charts - - Adds an `openPath` prop for `Curve`. This prop is used to determine whether radial curves should be closed. Curves are closed by default, but when this prop is set to true they will not be. This prop has no effect for cartesian charts - - Supports polar bars in the `Bar` primitive. (Angular bars only, radial bars are not yet supported) - - Adds a `labelPlacement` prop to `VictoryLabel` and `VictoryTooltip`. Values are "parallel", "perpendicular", and "vertical". These flags help to appropriately position labels in polar charts. Polar charts will use "parallel" label placement by default. Cartesian charts will only use "'vertical" placement. - - Adds support for circular clipPath - - Adds support for polar animation transitions for continuous chart types. During `onLoad`, all points grow from zero. During `onEnter` and `onExit` new points are added / removed at the location of an adjacent point to keep path interpolation as smooth as possible. This implementation obviates the need for radial clip-path animations for these chart types. - - `before` and `after` callbacks for `onLoad`, `onEnter` and `onExit` are now called with `datum`, `index`, and `data` instead of only `datum`. - - Adds `LabelHelpers` - - Adds helper methods for polar charts - -## 15.2.0 (2017-05-22) - --[244](https://github.com/FormidableLabs/victory-core/pull/244) Passes missing `datum` and `index` props to `Flyout` --[246](https://github.com/FormidableLabs/victory-core/pull/246) Adds an `itemsPerRow` prop to `VictoryLegend` to support automatic legend wrapping --[249](https://github.com/FormidableLabs/victory-core/pull/249) Adds support for a y0 accessor so that users can have granular control over the baseline of components like `VictoryArea` --[250](https://github.com/FormidableLabs/victory-core/pull/250) Audits `shouldComponentUpdate` logic for all primitive components so that changes to optional props like `className` will cause components to re-render. - - -## 15.1.0 (2017-05-12) - -- [241](https://github.com/FormidableLabs/victory-core/pull/241) Adds optional `title` an `desc` props to `VictoryLabel` -- [243](https://github.com/FormidableLabs/victory-core/pull/243) Impovements to `VictoryContainer` - - Automatic `overflow: "visible"` for elements rendered in `VictoryPortal` (tooltips) - - `VictoryContainer` no longer renders `g` tags (this was causing confusion with evented containers) - - Default responsive styles are now `width: "100%"` `height: "100%"` (fixes a bug in safari) - - Changes the merge order for responsive styles so that `width` and `height` attrs may be overridden -- [244](https://github.com/FormidableLabs/victory-core/pull/244) adds missing `index` and `datum` props to `Flyout` -- [245](https://github.com/FormidableLabs/victory-core/pull/245) fixes `dy` calculation in `VictoryLabel` - -## 15.0.0 (2017-05-02) - -**BREAKING CHANGE** -- Updates to `react@^15.5.0` -- Uses separate `prop-types` package -- Projects using Victory must also depend on `prop-types` - -## 14.1.1 (2017-04-20) - -- Add `victory-native` support to getSVGEventCoordinates - -## 14.1.0 (2017-04-04) - -- Remove default container theme -- Fix clipWidth bug -- Support `victory-native` upgrade - -## 14.0.7 (2017-03-21) - -- Fixes a bug in `shouldComponentUpdate` logic in `Candle` -- Adds static roles for `VictoryContainer`, `VictoryClipContainer`, and `VictoryLabel` -- Fixes a bug in `VictoryClipContainer` -- Prevents unknown prop `clipWidth` on `` tags - -## 14.0.6 (2017-03-15) - -- Fixes clipPath bugs -- FIxes VictoryLegend bugs - -## 14.0.5 (2017-03-14) - -[217](https://github.com/FormidableLabs/victory-core/pull/217) -- Adds support for multi-repo tooling - -[215](https://github.com/FormidableLabs/victory-core/pull/215) -- Rounds path values to prevent sub-pixel rendering - -## 14.0.4 (2017-03-10) - -[214](https://github.com/FormidableLabs/victory-core/pull/214) -- Allows simple events directly on container components - -## 14.0.3 (2017-03-03) - -[210](https://github.com/FormidableLabs/victory-core/pull/210) -- Support `VictoryClipContainer` for all x, y components - -## 14.0.2 (2017-02-28) - -[208](https://github.com/FormidableLabs/victory-core/pull/208) - - Add `clipPadding` prop to `VictoryClipContainer` to match the prop on `ClipPath` - -## 14.0.1 (2017-02-26) - -[207](https://github.com/FormidableLabs/victory-core/pull/207) - - Adds a `translateY` prop for clipPath to support x, y zoom behavior - - Removes default clipPadding - -## 14.0.0 (2017-02-24) - -- Adds a `theme` prop to `VictoryContainer` so that custom containers may pick up themes from their parents -- Removes default `title` and `desc` props from `VictoryContainer` -- Adds support for providing `text` as an array for `VictoryLabel` -- Adds support for providing `style` as an array for `VictoryLabel` so that each line of a multi-line label may be styled independently -- Changes how null data values are handled by `Area` and `Curve` primitives -- Adds a `reduceChildren` method to `Helpers` to ensure order consistency when working with nested children -- `VictoryTooltip` no longer automatically adds the `active` prop to data when hovered. To turn this behavior on, set the new `activateData` boolean prop on `VictoryTooltip` - -## 13.0.4 (2017-02-21) - -- Supports sorting data with a `sortKey` prop. -- Styles gridlines with `pointerEvents: "none"` in all themes - -## 13.0.3 (2017-02-09) - --[198](https://github.com/FormidableLabs/victory-core/pull/198) - - Fixes a regression in `VictoryPortal`. Only top level containers should register and render portals - -## 13.0.2 (2017-02-05) - -- [195](https://github.com/FormidableLabs/victory-core/pull/195) - - Fixes null event state bug - -## 13.0.1 (2017-01-30) - -- [193](https://github.com/FormidableLabs/victory-core/pull/193) - - Removes the default `standalone: true` from VictoryContainer so that parents can set the value - -## 13.0.0 (2017-01-30) - -- [189](https://github.com/FormidableLabs/victory-core/pull/189) and [191](https://github.com/FormidableLabs/victory-core/pull/190) - - Adds `VictoryLegend` component -- [190](https://github.com/FormidableLabs/victory-core/pull/190) - - Allows `VictoryContainer` to render either `` or `` depending on the value of the standalone prop - - Passes a timer down in context for `VictorySharedEvents` - - Event handlers have access to the context they are being called from via an argument - - _i.e._ `onClick: (event, targetProps, eventKey, context) => {...}` - - Enhances `addEvents` so that evented components can pick up "parentControllerProps" from parent state - - useful for `VictoryZoomContainer` - - Adds the ability to define callbacks in the events prop that will be called after `setState` - - useful for allowing `VictoryZoomContainer` to call methods like `resumeAnimation` - -## 12.0.2 (2017-01-14) - -- [188](https://github.com/FormidableLabs/victory-core/pull/188) -- Retains "x" and "y" in addition to "_x" and "_y" in formatted data. See PR for rationale and details. - -## 12.0.1 (2017-01-13) - -- [187](https://github.com/FormidableLabs/victory-core/pull/187) -- Fix a bug in voronoi themes -- Fix a bug in logic related to filtering data on selection. - -## 12.0.0 (2017-01-12) - -- [183](https://github.com/FormidableLabs/victory-core/pull/183) Adds `shouldComponentUpdate` logic to all primitive components -- [184](https://github.com/FormidableLabs/victory-core/pull/184) Fixes a bugs related to tooltip themes - - Fixes [471](https://github.com/FormidableLabs/victory/issues/471) -- [185](https://github.com/FormidableLabs/victory-core/pull/185) Uses "_x" and "_y" instead of "x" and "y" for storing formatted data on data objects - - Fixes [451](https://github.com/FormidableLabs/victory/issues/451) - - Fixes [350](https://github.com/FormidableLabs/victory/issues/350) - - **This is a breaking change for anyone using data accessors and functional styles / props that reference datum.x, datum.y** -- [186](https://github.com/FormidableLabs/victory-core/pull/186) Adds a custom interpolator for objects so that properties are correctly interpolated - - Fixes [460](https://github.com/FormidableLabs/victory/issues/460) - -## 11.0.1 (2017-01-05) - -- Fixes a bug in VictorySharedEvents - -## 11.0.0 (2017-01-03) - -- Adds support for `active` boolean prop on all primitive components -- Tooltips trigger `active` on both data and label components -- Adds selection helpers to support `VictorySelectionContainer` -- Changes when functional styles / props are evaluated - - they will now be evaluated from the primitive components so they can be evaluated with `active` -- Better support for `defaultEvents` on container components - -## 10.0.3 (2016-12-13) - -- Add support for `className` on all primitive components - -## 10.0.2 (2016-12-12) - -- Add `pointerEvents: "none"` to tooltip themes - -## 10.0.1 (2016-12-09) - -- Fix bug related to duplicate keys in shared event children - -## 10.0.0 (2016-12-01) - -- Change how continuous animations behave - - clipPath curtain will never be smaller than the range except onLoad -- Simplify transitions code -- Ensure that animations and transitions use the global timer passed in context or create their own -- Fix `bypassAnimation` bug -- Ensure that clipPath width and height are never negative - -## 9.2.4 (2016-11-21) - -- Change how data is generated for accessors to handle edge cases like https://github.com/FormidableLabs/victory/issues/397 - -## 9.2.3 (2016-11-21) - -- Fix Transition domain bug - -## 9.2.2 (2016-11-09) - -- Create timer only when needed - -## 9.2.1 (2016-11-09) - -- Code style consistency - -## 9.2.0 (2016-11-09) - -- Adds a global animation timer (non-breaking change) - -## 9.1.1 (2016-10-31) - -- Stricter npmignore - -## 9.1.0 (2016-10-28) - -- Uses `publishr` to reduce npm installed package size [#413](https://github.com/FormidableLabs/victory/issues/413) -- Fixes a bug where label padding was not being applied to tick labels [#408](https://github.com/FormidableLabs/victory/issues/408) -- Removes default tick padding in themes -- Changes how the domain is calculated when there is only one data point, or when the minimum and maximum of the data is equal in a given dimension [#407](https://github.com/FormidableLabs/victory/issues/407) -- Removes hard-codes `` from `VictorySharedEvents` [#402](https://github.com/FormidableLabs/victory/issues/402) - -## 9.0.3 (2016-10-26) - -- Fix aria role bug -- Allow npm 2 install - -## 9.0.2 (2016-10-18) - -- Refactor rendered components for ease of native versions -- Fix bugs in exit transitions for continuous data components (line, area) -- Fix `dx` bug in `VictoryLabel` Thanks to @gcedo - -## 9.0.1 (2016-10-12) - -- Simplify cleanData so accessors are called only once - -## 9.0.0 (2016-10-12) - -- removes support for `children` for VictoryLabel. Use `text` instead -- upgrades all d3 packages -- renames `VictoryGroupContainer` -> `VictoryClipContainer` -- refactors `VictoryClipContainer` for ease of native implementation -- consistency of props for primitive components and VictoryLabel -- refactors ErrorBar primitive for clarity and ease of native implementation -- fixes a 0/falsey bug in transitions to allow for durations of 0 rather than falling back to defaults -- Fixes date related domain bugs - -## 8.0.1 (2016-10-07) - -- Adds fallbacks to `formatData` so that data accessor props are optional - -## 8.0.0 (2016-10-06) - -- Adds `VictoryPortal` which renders a single child in a top level portal container if it exists. Thanks to @nfcampos -- Adds `VictoryGroupContainer` which renders children in a group container with a `clipPath` if clipPath props exist -- Removes `clipPath` properties from `Curve` and `Area` primitives -- `VictoryTransition` only passes `clipPath` props to continuous children (_i.e._ `VictoryLine`, `VictoryArea`) -- Adds an aggressive `shouldComponentUpdate` check to `VictoryTransition` to prevent unnecessary rendering -- Extracts event logic into a new inverted inheritance higher order component `addEvents` -- Moves `Data`, `Domain`, and `Scale` helpers from `victory-chart` to `victory-core` - -## 7.0.2 (2016-09-18) - -- Minor changes in VictoryTooltip to support native version - -## 7.0.1 (2016-09-15) - -- Fixes minor bugs related to tooltips - -## 7.0.0 (2016-09-09) - -**Breaking Changes for `VictoryPie` themes** - -- This PR alters the label padding for `VictoryPie` in themes to work with the new `labelRadius` prop. - -## 6.1.1 (2016-09-08) - -- Fix axis themes - -## 6.1.0 (2016-09-07) - -- Adds `Flyout` and `Voronoi` primitives -- Adds `VictoryTooltip` a component with `defaultEvents` that renders a label within a flyout when `active={true}` and renders nothing when `active={false}` -- Events now add `this.componentEvents` to the set of events for a component instance -- Adds `getComponentEvents` helper to `Events` -- Padding consistency and small stylistic changes in `VictoryTheme` - -## 6.0.2 (2016-09-01) - -- Fix `onEnd` animation callback - -## 6.0.1 (2016-09-01) - -- Add `translateX` prop to `ClipPath` - -## 6.0.0 (2016-08-31) - -- Adds support for `onLoad` animations -- Adds an `animating` state for `VictoryTransition` so that the global `onEnd` callback is only called after all other transitions have finished -- Fixes a bug in `onExit` clipPath transitions -- Fixes a stylistic bug in the default `grayscale` theme [#117](https://github.com/FormidableLabs/victory-core/issues/117) -- Adds a `TextSize` utility for calculating the size of a text element without needing to render it. Thanks @nightwolfdu! -- Exports all basic svg components from VictoryCore (_i.e._ `Bar`, `Point`, `Slice` etc.) - -## 5.1.2 (2016-08-22) - -- VictoryLabel: minor changes to support `victory-core-native` - -## 5.1.1 (2016-08-18) - -- VictoryLabel: Adds a check for `fontSize` given as a string, and strips "px" when present - -## 5.1.0 (2016-08-18) - -- Updates `builder-victory-component` to fix problems caused by missing lodash methods. Incomplete feature sets using `lodash-webpack-plugin` - -## 5.0.2 (2016-08-17) - -- Fixes a minor bug in VictoryTheme.material - -## 5.0.1 (2016-08-17) - -- Fixes a minor bug for VictoryTransition - -## 5.0.0 (2016-08-17) - -** This is a breaking change for themes ** -- Alters the `VictoryTheme` API to match props. -- Adds `VictoryTheme.grayscale` - -## 4.6.1 (2016-08-11) - -- Fixes a bug for clipPath animations with parentState - -## 4.6.0 (2016-08-10) - -- Adds `displayName` to components for debugging -- Adds array support for `childName` properties on event objects (attachment and mutation) -- Enhances `onExit` and `onExit` transitions with support for clipPath curtain effect - -## 4.5.1 (2016-08-5) - -- Fix PropType warnings in React 15.3+ -- Add animationInfo as 2nd argument to victory-animation child function call - -## 4.5.0 (2016-07-29) - -- Remove `reduce-calc-css` dependency. - -## 4.4.2 (2016-7-26) - -- Creates new getMinValue and getMaxValue array methods in order to maintain dates for domains. - -## 4.4.1 (2016-7-12) - -- Adjusting the props passed to the text element of VictoryLabel to eliminate error messages - -## 4.4.0 (2016-7-11) - -- Adding a new propType to validate numbers greater than zero - -## 4.3.0 (2016-7-02) - -- Supports Victory Native - -## 4.2.1 (2016-06-22) - -- Fixes a bug that prevented axis labels from displaying properly for vertical axes. - -## 4.2.1 (2016-06-21) - -- Adds the modifyProps method, which merges component props with theme props and/or fallback props. Helps to further support theme implementation. - -## 4.2.0 (2016-06-18) - -- Adds VictoryTheme, which allows users to import themes and custom themes into their VictoryChart and VictoryPie components -- Adds a minimalist grayscale theme compatible with all VictoryChart components and VictoryPie - -## 4.1.1 (2016-06-16) - -- Fixes a bug related to event specificity - -## 4.1.0 (2016-06-16) - -- Supports events on parent containers via the `parent` namespace in the event prop -- Adds support for an "all" `eventKey` that will apply mutations to all elements of given `childName` and `target`. `parent` events automatically target "all" unless an `eventKey` is given. -- Adds support for applying mutations to arrays of `eventKeys` _i.e._ `[0, 2, 4]` -- Associates parent events with child events via a `container` prop on `VictorySharedEvents`. This is useful where shared events are implicit as in `VictoryChart` and `VictoryStack` - -## 4.0.0 (2016-06-12) - -- Removes logic related to inverted chart types (i.e. horizontal bars) from the `getRange` method. This is a breaking change for horizontal bars - -- Fixes a bug related to VictoryLabel transforms. Transforms provided via styles will now be applied instead of only transforms provided via the `transform` prop - -## 3.2.0 (2016-06-09) - -- Adds VictoryContainer wrapper for all Victory components via the containerComponent prop. This is added by default - unless the child component standalone prop is set to true. Helps add roles and optional titles/descriptions to make - Victory charts more accessible to users using screen readers. - -## 3.0.0 (2016-06-01) - -- Adds `VictorySharedEvents` wrapper for coordinating events between supported Victory Components. An annotated example of the new events API: - -``` - { - return { - childName: "secondBar", // the child to be modified - // props here are the props that define the targeted component i.e. what is passed to an individual bar - mutation: (props) => { - return {style: merge({}, props.style, {fill: "blue"})}; // Whatever is returned here will override the existing props - } - }; - } - } - }, { - childName: "secondBar", - target: "data", - eventKey: 0, - eventHandlers: { - onClick: () => { // event handlers can return an array of mutation objects with different targeted elements - return [ - { - childName: "firstBar", - mutation: (props) => { - return {style: merge({}, props.style, {fill: "cyan"})}; - } - }, { - mutation: (props) => { // the default target element is whatever element the handler is attached to - return {style: merge({}, props.style, {fill: "orange"})}; - } - }, { - target: "labels", - eventKey: 1, - mutation: () => { - return {text: "CLICKED"}; - } - } - ]; - } - } - } - ]} -> - - - -``` - -## 2.1.0 (2016-05-26) - -- Upgrades to React 15 -- Alters transitions to support wrapped components - -## 2.0.1 (2016-05-13) - -- Uses `.js` file extension rather than `.jsx`. -- Updates import syntax for `lodash` - -## 2.0.0 (2016-05-05) - -- Changes how events are stored on state to facilitate interactions between elements -- This is a breaking change, as it will require the namespace to be returned with any other props from the event handler like so: -``` -events: { - data: { - onClick: () => { - return { data: { style: {fill: "red"} }, labels: { style: {fill: "black"} } }; - } - } -} -``` - -## 1.4.0 (2016-04-14) - -- Adds a VictoryTransition wrapper to facilitate enter and exit transitions for any components with an array `data` prop. -- Supports coordinating transitions for deeply nested children (i.e. stacked bar charts) -- Modifies array interpolation so that the interpolated array is never longer than the end array. See https://github.com/d3/d3-interpolate/pull/19 - -## 1.3.0 (2016-03-28) - -- Adds initial enter and exit transition support -- Adds a `labelAngle` prop to VictoryLabel -- Improves transformations - -## 1.2.1 (2016-03-15) - -- Upgrades to builder 2.9.1 for lodash 4 support - -## 1.2.0 (2016-03-11) - -- Adds event helper methods -- Adds an events prop to VictoryLabel -- Updates to Babel 6 -- Updates to Lodash 4 - -## 1.1.0 (2016-03-02) - -- Add matchDataLength custom proptype - -## 1.0.0 (2016-03-01) - -- Merge `victory-label@1.0.1`, `victory-util@5.0.0`, `victory-animation@0.1.0` to `victory-core` -- Don't publish source maps to npm or git -- Don't publish `docs/build` directory to npm -- Add `npm start` and `npm test` scripts - -### VictoryLabel - -- Add support for providing label text as a prop - -### VictoryAnimation - -- Retire `velocity` in favor of `duration` in milliseconds. - -Deprecated Subcomponents -======================== - -Below are the histories of individual subcomponents before they were merged into `victory-core`. - -## VictoryLabel - -### 1.0.1 - -- Update victory-util version -- Fix README title -- Use minified file path for gzip size badge - -### 1.0.0 (2016-01-29) - -- Update `victory-util` for victory archetype bump. -- Remove react peerDependency - -### 0.3.1 (2016-01-29) - -Update `victory-util` for data accessor feature bump - -### 0.3.0 (2016-01-29) - -- Update builder and victory archetypes. -- Move lodash and radium dependencies from the archetype to the package - -### 0.2.0 (2016-1-26) - -Refactor to use shared methods from `victory-util` - -### 0.1.9 Alpha (2015-12-17) - -We make no promises about any code prior to this release. - - -## VictoryUtil - -### 5.0.0 -- Remove chart specific methods, consolidate others - -### 4.0.0 (2016-01-29) -- Application dependencies like `lodash` now live in components, not in the Builder archetype. This is a breaking change. https://github.com/FormidableLabs/victory/issues/176 - -### 3.0.0 (2016-01-29) - -- Supports data accessor functions! -[more detail](https://github.com/FormidableLabs/victory/issues/84) - -Data - - `Data.consolidateData(props)` -> `Data.formatDatasets(props)` - - `Data.createAccessor(key)` - -PropTypes - - `integer` - - `allOfType` - runs a given prop through an array of validators - -### 2.1.0 (2016-1-15) - -This tag adds shared methods to VictoryUtil to reduce code repetition in all of the chart ecosystem components (VictoryChart, VictoryBar, VictoryAxis, VictoryLine, VictoryScatter) - -Public methods added: - -Scale - - `Scale.getBaseScale(props, axis)` - - `Scale.getScaleType(props, axis)` - - `Scale.getScaleFromProps(props, axis)` - - `Scale.getScaleTypeFromData(props, axis)` - -This collection of methods: - - replaces the `getScale` methods that were used in the chart ecosystem repos - - adds scale type checking via duck typing d3 scale methods - - adds support for passing in the scale type as a string _i.e._` "linear"` instead of `d3Scale.linear()` - -Domain - - `Domain.getDomain(props, axis)` - - `Domain.getDomainFromProps(props, axis)` - - `Domain.getDomainFromData(dataset, axis)` - - `Domain.padDomain(domain, props, axis)` - -This collection of methods: -- replaces the `getDomain` method in single data series components (VictoryScatter, VictoryLine) -- Adds domain helpers for the more complicated components - -Data - - `Data.getData(props)` - - `Data.consolidateData(props)` - - `Data.createStringMap(props, axis)` - - `Data.getStringsFromCategories(props, axis)` - - `Data.getStringsFromAxes(props, axis)` - - `Data.getStringsFromData(props, axis)` - - `Data.getStringsFromXY(props, axis)` - -This collection of methods: -- replaces the `getData` method in single data series components (VictoryScatter, VictoryLine) -- replaces the `consolidateData` method in multi-series data components (VictoryBar) -- replaces the `createStringMap` method for components -- adds string helpers for creating a shared stringMap in VictoryChart - -Chart - - `getPadding(props)` - - `getRange(props, axis)` - - `getStyles(props, defaultStyles)` - - `evaluateProp(prop, data)` - - `evaluateStyle(style, data)` - -This collection of methods: - - replaces `getRange` and `getPadding` methods across all chart ecosystem components - - replaces `getStyle` method in components that take style objects in the following form -``` -style={{ - parent: {...}, - data: {...}, - labels: {...} -}} -``` -- replaces functional style and functional prop support methods `evaluateProp` and `evaluateStyle` across all chart components - -### 2.0.3 Alpha (2015-12-16) - -We make no promises about any code prior to this release. diff --git a/packages/victory-pie/CHANGELOG.md b/packages/victory-pie/CHANGELOG.md deleted file mode 100644 index 26e28886a..000000000 --- a/packages/victory-pie/CHANGELOG.md +++ /dev/null @@ -1,344 +0,0 @@ -# VictoryPie Changelog - -## 16.1.0 (2018-06-23) - --[182](https://github.com/FormidableLabs/victory-pie/pull/182) Adds optional `radius` and `origin` props to `VictoryPie`. The `radius` prop should be given as a single number. The `origin` prop should be given as an object with number values specified for "x" and "y". When these props are not given, radius and origin are determined by `width`, `height`, and `padding` as previously. - -## 16.0.1 (2018-06-21) - --[184](https://github.com/FormidableLabs/victory-pie/pull/184) Update `victory-core` - -## 16.0.0 (2018-06-05) - -**Breaking Changes** - --[181]https://github.com/FormidableLabs/victory-pie/pull/181 - -- Upgrades to `react-fast-compare@^2.0.0` which changes function comparison. This means that Victory components _will_ update when functions are not equal. This closes several Victory issues, but may cause a slight performance decline - -## 15.0.0 (2018-04-21) - -**Breaking Changes** - --[176](https://github.com/FormidableLabs/victory-pie/pull/176) Disable styles on data - -This change deprecates Victory's ability to automatically pick up style attributes from the data object. This change will improve performance, but will be a breaking change for many users. Fortunately the upgrade path is simple: - -If your data object looks like -``` -data={[ - { x: 1, y: 1, fill: "red", opacity: 0.2 }, - ... -]} -``` -Add the following functional styles: -``` -style={{ data: { fill: (d) => d.fill, opacity: (d) => d.opacity } }} -``` -and everything will work as before. - -Other changes: --[177](https://github.com/FormidableLabs/victory-pie/pull/177) Audit lodash methods - -## 14.0.2 (2018-03-27) - --[168](https://github.com/FormidableLabs/victory-pie/pull/168) Refactor helper method exports - -## 14.0.1 (2018-02-05) - -- [167](https://github.com/FormidableLabs/victory-pie/pull/167) Add `sideEffects: false` - -## 14.0.0 (2018-02-04) - --[166](https://github.com/FormidableLabs/victory-pie/pull/166) Update Victory primitives -**This is a breaking change** -Internal methods for _all_ Victory primitive components have changed. This will be a breaking change for users who are extending primitive components, including `victory-native`. - -## 13.3.1 (2018-01-08) - --[164](https://github.com/FormidableLabs/victory-pie/pull/164) Correct typo - -## 13.3.0 (2018-01-02) - -- [163](https://github.com/FormidableLabs/victory-pie/pull/163) -- [victory-core/324](https://github.com/FormidableLabs/victory-core/pull/324) Adds support for external event mutations - - Adds `externalEventMutations` prop to `VictorySharedEvents` and all components enhanced with the `add-events` HOC - - `externalEventMutations` prop format: - ``` -externalEventMutations: PropTypes.arrayOf(PropTypes.shape({ - callback: PropTypes.function, - childName: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.array - ]), - eventKey: PropTypes.oneOfType([ - PropTypes.array, - CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]), - PropTypes.string - ]), - mutation: PropTypes.function, - target: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.array - ]) -})) -``` -*Note:* `eventKey` and `target` must be specified for externalEventMutations. When using `extenalEventMutations` with shared events (_i.e._ events on VictoryChart etc), `childName` is also required. - -*Note:* The `callback` supplied to `externalEventMutations` should be used for clearing mutations. This is crucial for animating charts - -## 13.2.0 (2017-12-17) - -- [160](https://github.com/FormidableLabs/victory-pie/pull/160) Add `sortOrder` prop - -## 13.1.0 (2017-11-07) - -- [158](https://github.com/FormidableLabs/victory-pie/pull/158) Update infrastructure for React 16 - -## 13.0.1 (2017-10-19) - -Update to `victory-core@20.0.0` - -## 13.0.0 (2017-09-30) - -**BREAKING CHANGES:** - -**[victory-core/299](https://github.com/FormidableLabs/victory-core/pull/299) Containers are now rendered in parent divs.** This may be a breaking change for parent styles. - -## 12.0.0 (2017-09-09) - -- Updates to `victory-core@18.0.0` which includes breaking changes for `VictoryTooltip` styling. - -## 11.4.2 (2017-08-14) - -- [153](https://github.com/FormidableLabs/victory-pie/pull/153) Bugfix for axymmetric padding - -## 11.4.1 (2017-08-07) - -- [151](https://github.com/FormidableLabs/victory-pie/pull/151) bugfix: support functional padding for labels -- [152](https://github.com/FormidableLabs/victory-pie/pull/152) Support boolean animate prop - -## 11.4.0 (2017-07-24) - -- [150](https://github.com/FormidableLabs/victory-pie/pull/150) aggressive `shouldComponentUpdate` for evented components like `VictoryPie` - -## 11.3.0 (2017-07-13) - -- [149](https://github.com/FormidableLabs/victory-pie/pull/149) Support Webpack 3 and ES6 exports - -## 11.2.0 (2017-07-12) - -- [148](https://github.com/FormidableLabs/victory-pie/pull/148) Translates individual slices rather than an entire group translation for pie and labels - -## 11.1.2 (2017-06-06) - -- updates `victory-core` - -## 11.1.1 (2017-05-24) - --[146](https://github.com/FormidableLabs/victory-pie/pull/146) Rounds label positions - -## 11.1.0 (2017-05-12) - -- [victory-core/243](https://github.com/FormidableLabs/victory-core/pull/243) Impovements to `VictoryContainer` - - Automatic `overflow: "visible"` for elements rendered in `VictoryPortal` (tooltips) - - `VictoryContainer` no longer renders `g` tags (this was causing confusion with evented containers) - - Default responsive styles are now `width: "100%"` `height: "100%"` (fixes a bug in safari) - - Changes the merge order for responsive styles so that `width` and `height` attrs may be overridden - -## 11.0.0 (2017-05-02) - -**BREAKING CHANGE** -- Updates to `react@^15.5.0` -- Uses separate `prop-types` package -- Projects using Victory must also depend on `prop-types` - -## 10.3.0 (2017-04-04) - -- Support `victory-native` - -## 10.2.3 (2017-03-21) - -- Updates `victory-core` -- Code consistency with other Victory components - -## 10.2.2 (2017-03-14) - -- Removes unnecessary props from groupComponent - -## 10.2.1 (2017-03-14) - -[132](https://github.com/FormidableLabs/victory-pie/pull/132) -- support multi-repo tooling - -## 10.2.0 (2017-02-25) - -Updates `victory-core` to include the following changes: -- Removes default `title` and `desc` props from `VictoryContainer` -- Adds support for providing `text` as an array for `VictoryLabel` -- Adds support for providing `style` as an array for `VictoryLabel` so that each line of a multi-line label may be styled independently -- `VictoryTooltip` no longer automatically adds the `active` prop to data when hovered. To turn this behavior on, set the new `activateData` boolean prop on `VictoryTooltip` - -## 10.1.0 (2017-01-30) - -- [128](https://github.com/FormidableLabs/victory-pie/pull/128) - - Updates `victory-core` - - Code consistency with other Victory components - -## 10.0.0 (2017-01-16) - -- Uses "_x" and "_y" for internal data format rather than "x" and "y". Though "x" and "y" will -still appear in the data object, they are no longer the source of truth for data values. This may be -a breaking change for custom transitions, functional props, and functional styles. - -- Fixes functional style evaluation for enter and exit transitions - -## 9.0.0 (2017-01-03) - -- Changes when functional styles and props are evaluated. - - They are now evaluated on the primitive components -- Updates victory-core -- Supports `defaultEvents` on `containerComponents` - -## 8.0.0 (2016-12-20) - -- Changes how the positioning of the Pie is calculated so that VictoryPie is centered when padding is equal -https://github.com/FormidableLabs/victory-pie/pull/125 - -- This may be a breaking change for VictoryPie components where height != width. - -## 7.2.0 (2016-12-02) - -- Ensure that animations and transitions use the global timer passed in context or create their own - -## 7.1.2 (2016-11-11) - -- Fix tooltip bug. Force `renderInPortal={false}` for VictoryPie tooltips - -## 7.1.1 (2016-10-31) - -- Stricter npmignore - -## 7.1.0 (2016-10-28) - -- Uses `publishr` to reduce npm installed package size [#413](https://github.com/FormidableLabs/victory/issues/413) - -## 7.0.1 (2016-10-26) - -- allow npm 2 install -- add shouldAnimate check for victory-native compatibility - -## 7.0.0 (2016-10-13) - - Upgrades all d3 packages - - Greater consistency of props for props passed to primitive components - - Adds `VictoryPortal` which renders any child elments in a top level portal container if it exists - - Removes `clipPath` properties from `VictoryLine` and `VictoryArea` - - Extracts event logic into a new inverted inheritance higher order component `addEvents` which is used by all chart components - -## 6.0.0 (2016-09-09) - -**This release includes breaking changes for themes and label styles** -- Adds support for `VictoryTooltip` -- Adds a `labelRadius` prop used to position labels rather than relying only on `style.labels.padding` -- Calculates default `textAnchor` and `verticalAnchor` for labels depending on which quadrant of the pie they appear in -- Uses `Slice` component exported from `victory-core` -- Performance improvements - -## 5.0.0 (2016-08-18) - -**This release includes breaking changes for themes and label styles** -- Updates VictoryTheme API, uses `VictoryTheme.grayscale` for default styling -- Alters label placement so that when label styles include padding, the `innerRadius` of the pie does not effect label placement. -- Adds a `displayName` for ease of debugging -- Updates documentation to reflect changes - -## 4.3.1 (2016-08-02) - -- Update documentation - -## 4.3.0 (2016-07-29) - -- Performance improvements -- Update `victory-core` to remove `reduce-calc-css` - -## 4.2.0 (2016-07-02) - -- Adds support for themes -- Adds support for Victory Native - -## 4.1.0 (2016-06-17) - -- Supports events on the parent element via the `parent` namespace in the `events` prop. -- `parent` events have access to `width`, `height`, `style` and the calculated `slices` and the calculated `pathFuncton` -- When mutating elements via the return from event handlers, mutation objects may now take arrays for `eventKey` to target several individual elements, or the special value "all" to apply changes to all elements of a particular target type -- Supports a custom `containerComponent` prop, which defaults to `VictoryContainer` -- Adds default aria roles via `VictoryContainer` -- Adds support for a `cornerRadius` prop. Thanks @judikdavid! -- Renders all slices _before_ labels so that labels are not overlapped. - - -## 4.0.0 (2016-06-01) - -- Upgrades to React 15 -- Updates the events API to support shared events **This is a breaking change for events** - -## 3.0.0 (2016-05-13) - - - improves consistency for `labelComponent` and `dataComponent` props. Replaces a custom `SliceLabel` component with `VictoryLabel` to make the api more consistent and predictable. **This is a breaking change for custom label components**, as `VictoryLabel` expects a different set of props than the previous `SliceLabel` component. See [VictoryLabel](http://formidable.com/open-source/victory/docs/victory-label) for more detail. - -- Functional styles and props are now all evaluated before they are passed as props to `labelComponent` or `dataComponent`, so that custom components will have access to the final values. - -- events are bound and partially applied prior to being passed as props to `labelComponent` or `dataComponent` - -- it is now possible to specify `angle` and `verticalAnchor` props for` VictoryLabel` via the style object - -- event return values are stored differently on state to facilitate interaction between data and labels. **This is a breaking change for events** as event handlers must now return an object with with `data` and/or `labels` keys so that these values may be applied appropriately to data and label elements respectively. - -- improved integration tests - -## 2.1.0 (2016-04-15) - -- Add support for custom data components -- Add support for enter and exit transitions, and add default transitions - -## 2.0.0 (2016-03-15) - -- Add event handling via an `events` prop -- Update to lodash 4 -- Update `d3-shape` to the latest version -- Updates via `builder-victory-component` to support Babel 6 -- Provide label text via a `text` prop rather than children - -## 1.1.0 (2016-03-01) - -- Move Radium to devDependencies -- Fix unmount problems with Demo -- Add `npm start` and `npm test` scripts -- Don't publish source maps to npm -- Don't publish built docs to npm - -## 1.0.1 (2016-02-12) - -- Use minified file path for gzip size badge -- Update victory-util and victory-label versions - -## 1.0.0 (2016-01-30) - -- Supports data accessor functions! -[more detail](https://github.com/FormidableLabs/victory/issues/84) -- Application dependencies like `radium` and `lodash` now live in components, not in the Builder archetype. This is a breaking change. https://github.com/FormidableLabs/victory/issues/176 -- Extracted shared code into `victory-util` - -## 0.3.0 (2016-01-26) - -- Upgrade to Radium 0.16.2. This is a breaking change if you're using media queries or keyframes in your components. Please review upgrade guide at https://github.com/FormidableLabs/radium/blob/master/docs/guides/upgrade-v0.16.x.md - -## 0.2.0 Alpha (2015-12-16) - -Functional styles for data (each pie slice) and labels. Styles may be given as a function of `data`, where data is each data object in the array provided to `props.data` - -using d3-modules instead of all of d3 - -Basic code coverage. - -We make no promises about any code prior to this release. From f5623285c77ca138ccac9bc2cf068ed7eba3ce2e Mon Sep 17 00:00:00 2001 From: boygirl Date: Tue, 17 Jul 2018 15:45:10 -0700 Subject: [PATCH 2/2] add readmes --- packages/victory-area/README.md | 519 ++++++++++ packages/victory-axis/README.md | 473 +++++++++ packages/victory-bar/README.md | 575 +++++++++++ packages/victory-box-plot/README.md | 943 ++++++++++++++++++ packages/victory-brush-container/README.md | 158 +++ packages/victory-brush-line/README.md | 242 +++++ packages/victory-candlestick/README.md | 555 +++++++++++ packages/victory-chart/README.md | 474 +++++++++ packages/victory-core/README.md | 17 + packages/victory-create-container/README.md | 57 ++ packages/victory-cursor-container/README.md | 116 +++ packages/victory-errorbar/README.md | 510 ++++++++++ packages/victory-group/README.md | 542 ++++++++++ packages/victory-legend/README.md | 479 +++++++++ packages/victory-line/README.md | 533 ++++++++++ packages/victory-pie/README.md | 491 +++++++++ packages/victory-polar-axis/README.md | 578 +++++++++++ packages/victory-scatter/README.md | 602 +++++++++++ .../victory-selection-container/README.md | 133 +++ packages/victory-shared-events/README.md | 219 ++++ packages/victory-stack/README.md | 402 ++++++++ packages/victory-tooltip/README.md | 182 ++++ packages/victory-voronoi-container/README.md | 184 ++++ packages/victory-voronoi/README.md | 467 +++++++++ packages/victory-zoom-container/README.md | 111 +++ packages/victory/README.md | 63 ++ 26 files changed, 9625 insertions(+) create mode 100644 packages/victory-area/README.md create mode 100644 packages/victory-axis/README.md create mode 100644 packages/victory-bar/README.md create mode 100644 packages/victory-box-plot/README.md create mode 100644 packages/victory-brush-container/README.md create mode 100644 packages/victory-brush-line/README.md create mode 100644 packages/victory-candlestick/README.md create mode 100644 packages/victory-chart/README.md create mode 100644 packages/victory-core/README.md create mode 100644 packages/victory-create-container/README.md create mode 100644 packages/victory-cursor-container/README.md create mode 100644 packages/victory-errorbar/README.md create mode 100644 packages/victory-group/README.md create mode 100644 packages/victory-legend/README.md create mode 100644 packages/victory-line/README.md create mode 100644 packages/victory-pie/README.md create mode 100644 packages/victory-polar-axis/README.md create mode 100644 packages/victory-scatter/README.md create mode 100644 packages/victory-selection-container/README.md create mode 100644 packages/victory-shared-events/README.md create mode 100644 packages/victory-stack/README.md create mode 100644 packages/victory-tooltip/README.md create mode 100644 packages/victory-voronoi-container/README.md create mode 100644 packages/victory-voronoi/README.md create mode 100644 packages/victory-zoom-container/README.md create mode 100644 packages/victory/README.md diff --git a/packages/victory-area/README.md b/packages/victory-area/README.md new file mode 100644 index 000000000..2e16c86d0 --- /dev/null +++ b/packages/victory-area/README.md @@ -0,0 +1,519 @@ + +# VictoryArea + +`victory-area@^30.0.0` exports `VictoryArea` and `Area` components + +View these docs at https://formidable.com/open-source/victory/docs/victory-area to see live examples. + +VictoryArea renders a dataset as a single area. VictoryArea can be composed with [`VictoryChart`][] to create area charts. + +```playground + + + +``` + +## Props + +### animate + +`type: boolean || object` + +`VictoryArea` uses the standard `animate` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#animate) + +See the [Animations Guide][] for more detail on animations and transitions + +```jsx + animate={{ + duration: 2000, + onLoad: { duration: 1000 } + }} +``` + +### categories + +`type: array[string] || { x: array[string], y: array[string] }` + +`VictoryArea` uses the standard `categories` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#categories) + +```jsx +categories={{ x: ["dogs", "cats", "mice"] }} +``` + +### containerComponent + +`type: element` + +`VictoryArea` uses the standard `containerComponent` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#containercomponent) + +```jsx +containerComponent={} +``` + +### data + +`type: array[object]` + +`VictoryArea` uses the standard `data` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#data) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```playground + + + +``` + +### dataComponent + +`type: element` + +`VictoryArea` uses the standard `dataComponent` prop. [Read about it detail](https://formidable.com/open-source/victory/docs/common-props#datacomponent) + +`VictoryArea` supplies the following props to its `dataComponent`: `data`, `events`, `groupComponent`, `interpolation`, `origin` (for polar charts), `polar`, `scale`, `style` + +See the [Custom Components Guide][] for more detail on creating your own `dataComponents` + +*default:* `` + +```jsx +dataComponent={} +``` + + +### domain + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +`VictoryArea` uses the standard `domain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#domain) + +```jsx +domain={{x: [0, 100], y: [0, 1]}} +``` + +### domainPadding + +`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }` + +`VictoryArea` uses the standard `domainPadding` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#domainpadding) + +```jsx +domainPadding={{x: [10, -10], y: 5}} +``` + +### eventKey + +`type: string || integer || array[string] || function` + +`VictoryArea` uses the standard `eventKey` prop. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](https://formidable.com/open-source/victory/docs/common-props#eventkey) + +**note:** `VictoryArea` only renders one element per dataset, so only one event key will be generated. + +```jsx +eventKey="x" +``` + +### events + +`type: array[object]` + +`VictoryArea` uses the standard `events` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#events) + +See the [Events Guide][] for more information on defining events. + +**note:** `VictoryArea` will use the special `eventKey` "all" rather than referring to data by index, as it renders only one element for an entire dataset + +```playground +
+

Click Me

+ { + return [ + { + target: "data", + eventKey: "all", + mutation: (props) => { + const fill = props.style && props.style.fill; + return fill === "black" ? null : { style: { fill: "black" } }; + } + } + ]; + } + } + }]} + data={sampleData} + /> +
+``` + +### externalEventMutations + +`type: array[object]` + +`VictoryArea` uses the standard `externalEventMutations` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#externalEventsMutations) + +### groupComponent + +`type: element` + +`VictoryArea` uses the standard `groupComponent` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#groupcomponent) + +**note:** `VictoryArea` uses [`VictoryClipContainer`][] as its default `groupComponent` `VictoryClipContainer` renders a `` tag with a `clipPath` `def`. This allows continuous data components to transition smoothly when new data points enter and exit. **Supplying a custom `groupComponent` to `VictoryArea` may result in broken animations.** + +*default:* `` + +```playground + + } + style={{ data: { stroke: "#c43a31", strokeWidth: 15, strokeLinecap: "round" } }} + data={sampleData} + /> + +``` + +### height + +`type: number` + +`VictoryArea` uses the standard `height` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#height) + +*default (provided by default theme):* `height={300}` + +```jsx +height={400} +``` + +### interpolation + +`type: options` + +The `interpolation` prop determines how data points should be connected when creating a path. Victory uses [d3-shape](https://github.com/d3/d3-shape#curves) for interpolating curves. + +Polar area charts may use the following interpolation options: "basis", "cardinal", "catmullRom", "linear" + +Cartesian area charts may use the following interpolation options: "basis", "cardinal", "catmullRom", "linear", "monotoneX", "monotoneY", "natural", "step", "stepAfter", "stepBefore" + +[Explore all the interpolation options][]. + +*default:* `"linear"` + +```playground + +``` + +### labelComponent + +`type: element` + +`VictoryArea` uses the standard `labelComponent` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#labelcomponent) + +*default:* `` + +```playground + datum.y} + labelComponent={} +/> +``` + +### maxDomain + +`type: number || { x: number, y: number }` + +`VictoryArea` uses the standard `maxDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#maxDomain) + + +```playground + + + +``` + +### minDomain + +`type: number || { x: number, y: number }` + +`VictoryArea` uses the standard `minDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#minDomain) + + +```playground + + + +``` + +### labels + +`type: array || function` + +`VictoryArea` uses the standard `labels` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#labels) + +```playground + datum.y} +/> +``` + +### name + +`type: string` + +The `name` prop is used to reference a component instance when defining shared events. + +```jsx +name="series-1" +``` + +### origin + +`type: { x: number, y: number }` + +**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually** + +[Read about the `origin` prop in detail](https://formidable.com/open-source/victory/docs/common-props#origin) + +### padding + +`type: number || { top: number, bottom: number, left: number, right: number }` + +`VictoryArea` uses the standard `padding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#padding) + +*default (provided by default theme):* `padding={50}` + +```jsx +padding={{ top: 20, bottom: 60 }} +``` + +### polar + +`type: boolean` + +`VictoryArea` uses the standard `polar` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#polar) + +```playground + + null} + /> + + + +``` + +### range + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually** + +[Read about the `range` prop in detail](https://formidable.com/open-source/victory/docs/common-props#range) + +### samples + +`type: number` + +`VictoryArea` uses the standard `samples` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#samples) + +*default:* `samples={50}` + +```jsx +samples={100} +``` + +### scale + +`type: scale || { x: scale, y: scale }` + +`VictoryArea` uses the standard `scale` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#scale) +Options for scale include "linear", "time", "log", "sqrt" and the `d3-scale` functions that correspond to these options. + +*default:* `scale="linear"` + +```jsx +scale={{x: "linear", y: "log"}} +``` + +### sharedEvents + +**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.** + +### singleQuadrantDomainPadding + +`type: boolean || { x: boolean, y: boolean }` + +`VictoryArea` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#singlequadrantdomainpadding) + +### sortKey + +`type: string || integer || array[string] || function` + +`VictoryArea` uses the standard `sortKey` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#sortkey) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +sortKey="x" +``` + +### sortOrder + +`type: "ascending" || "descending"` + +The `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order. + +*default:* `sortOrder="ascending"` + +### standalone + +`type: boolean` + +`VictoryArea` uses the standard `standalone` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#standalone) + +**note:** When `VictoryArea` is nested within a component like `VictoryChart`, this prop will be set to `false` + +*default:* `standalone={true}` + +```playground + + + + +``` + +### style + +`type: { parent: object, data: object, labels: object }` + +`VictoryArea` uses the standard `style` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#style) + +*default (provided by default theme):* See [grayscale theme][] for more detail + +```playground + d.x === 3 ? "#000000" : "#c43a31" + } + }} + data={sampleData} + labels={(d) => d.x} + /> +``` + +### theme + +`type: object` + +`VictoryArea` uses the standard `theme` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#theme) + +See the [Themes Guide][] for information about creating custom themes. + +*default:* `theme={VictoryTheme.grayscale}` + +```jsx +theme={VictoryTheme.material} +``` + +### width + +`type: number` + +`VictoryArea` uses the standard `width` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#width) + +*default (provided by default theme):* `width={450}` + +```jsx +width={400} +``` + +### x + +`type: string || integer || array[string] || function` + +`VictoryArea` uses the standard `x` data accessor prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#x) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +x="employee.name" +``` + +### y + +`type: string || integer || array[string] || function` + +`VictoryArea` uses the standard `y` data accessor prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#y) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +y={(d) => d.value + d.error} +``` + +### y0 + +`type: string || integer || array[string] || function` + +`VictoryArea` uses the standard `y0` data accessor prop to set a baseline. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#y0) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```playground + + d.y - 1} + /> + +``` + +[Animations Guide]: https://formidable.com/open-source/victory/guides/animations +[Data Accessors Guide]: https://formidable.com/open-source/victory/guides/data-accessors +[Custom Components Guide]: https://formidable.com/open-source/victory/guides/custom-components +[Events Guide]: https://formidable.com/open-source/victory/guides/events +[Themes Guide]: https://formidable.com/open-source/victory/guides/themes +[`VictoryChart`]: https://formidable.com/open-source/victory/docs/victory-chart +[`VictoryClipContainer`]: https://formidable.com/open-source/victory/docs/victory-clip-container +[grayscale theme]: https://github.com/FormidableLabs/victory-core/blob/master/src/victory-theme/grayscale.js +[Explore all the interpolation options]: https://formidable.com/open-source/victory/gallery/interpolation diff --git a/packages/victory-axis/README.md b/packages/victory-axis/README.md new file mode 100644 index 000000000..b661c44d5 --- /dev/null +++ b/packages/victory-axis/README.md @@ -0,0 +1,473 @@ + +# VictoryAxis + +`victory-axis@^30.0.0` exports `VictoryAxis` component + +View these docs at https://formidable.com/open-source/victory/docs/victory-axis to see live examples. + +VictoryAxis renders a single axis which can be used on its own or composed with [`VictoryChart`][]. + +```playground + + + + +``` + +## Props + +### animate + +`type: boolean || object` + +`VictoryAxis` uses the standard `animate` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#animate) + +See the [Animations Guide][] for more detail on animations + +```jsx +animate={{ + duration: 2000, + easing: "bounce" +}} +``` + +### axisComponent + +`type: element` + +The `axisComponent` prop takes a component instance which will be responsible for rendering an axis line. The new element created from the passed `axisComponent` will be provided with the following props calculated by `VictoryAxis`: `x1`, `y1`, `x2`, `y2`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If an `axisComponent` is not provided, `VictoryAxis` will use its default [Line component][]. + +*default:* `axisComponent={}` + +```jsx +axisComponent={} +``` + +### axisLabelComponent + +`type: element` + +The `axisLabelComponent` prop takes a component instance which will be used to render the axis label. The new element created from the passed `axisLabelComponent` will be supplied with the following props: `x`, `y`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `axisLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above. + +*default:* `axisLabelComponent={}` + +```jsx +axisLabelComponent={} +``` + +### containerComponent + +`type: element` + +`VictoryAxis` uses the standard `containerComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#containercomponent) + +```jsx +containerComponent={} +``` + +### crossAxis + +`type: boolean` + +The `crossAxis` boolean prop specifies whether a given axis is intended to cross another axis. When this prop is true, zeroes will be removed from the array of ticks so that they do not clutter the origin of the chart. When `VictoryAxis` is nested within `VictoryChart`, `VictoryChart` will determine a value for the `crossAxis` prop based on domain, but this prop may be overridden by supplying a `crossAxis` prop directly to the `VictoryAxis` child component. + +*default:* `crossAxis={false}` + +### dependentAxis + +`type: boolean` + +The `dependentAxis` boolean prop specifies whether the axis corresponds to the dependent variable (usually y). This prop is useful when composing `VictoryAxis` with other components to form a chart. + +*default:* `dependentAxis={false}` + +```playground + +``` + +### domain + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +`VictoryAxis` uses the standard `domain` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#domain) + +```jsx +domain={{x: [0, 100], y: [0, 1]}} +``` + +### domainPadding + +`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }` + +`VictoryAxis` uses the standard `domainPadding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#domainpadding) + +```jsx +domainPadding={{x: [10, -10], y: 5}} +``` + +### events + +`type array[object]` + +`VictoryAxis` uses the standard `events` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#events) + +See the [Events Guide][] for more information on defining events. + +**note:** valid event targets for `VictoryAxis` are "axis", "axisLabel", "grid", "ticks", and "tickLabels". +Targets that correspond to only one element {"axis" and "axisLabel") should use the special eventKey "all". + +### externalEventMutations + +`type: array[object]` + +`VictoryAxis` uses the standard `externalEventMutations` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#externalEventsMutations) + +### fixLabelOverlap + +`type: boolean` + +When true, this prop reduces the number of tick labels to fit the length of the axis. Labels are +removed at approximately even intervals from the original array of labels. This feature only works +well for labels that are approximately evenly spaced. + +*default:* `fixLabelOverlap={false}` + +### gridComponent + +`type: element` + +The `gridComponent` prop takes a component instance which will be responsible for rendering a grid element. The new element created from the passed `gridComponent` will be provided with the following props calculated by `VictoryAxis`: `x1`, `y1`, `x2`, `y2`, `tick`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `gridComponent` is not provided, `VictoryAxis` will use its default [Line component][]. + +*default:* `gridComponent={}` + +```jsx +gridComponent={} +``` + +### groupComponent + +`type: element` + +`VictoryAxis` uses the standard `groupComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#groupcomponent) + +*default:* `` + +```jsx +groupComponent={} +``` + +### height + +`type: number` + +`VictoryAxis` uses the standard `height` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#height) + +*default (provided by default theme):* `height={300}` + +```jsx +height={400} +``` + +### invertAxis + +`type: boolean` + +The `invertAxis` boolean prop specifies whether the domain for a given axis should be inverted. By default, axes will be displayed with lower values on the bottom / left, and higher values on the top / right regardless of orientation. + +*default:* `invertAxis={false}` + +### label + +`type: string` + +The `label` prop defines the label that will appear with the axis. This prop should be given as a string. + +```playground + +``` + +### maxDomain + +`type: number || { x: number, y: number }` + +`VictoryAxis` uses the standard `maxDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#maxDomain) + + +```playground + +``` + +### minDomain + +`type: number || { x: number, y: number }` + +`VictoryAxis` uses the standard `minDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#minDomain) + + +```playground + +``` + +### name + +`type: string` + +`VictoryAxis` uses the standard `name` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#name) + +```jsx +name="series-1" +``` + +### offsetX + +`type: number` + +The `offsetX` prop defines how far from the edge of its permitted area an axis should be offset in the x direction. If this prop is not given, the offset will be calculated based on font size, axis orientation, and label padding. When `VictoryAxis` is used with `VictoryChart`, `VictoryChart` will determine a value for `offsetX` that makes the axes line up correctly, but this value may be overridden by supplying an `offsetX` prop directly to the `VictoryAxis` child component. + +**note:** The `offsetX` prop is relative to the edge corresponding to the orientation of the axis, _e.g._ the left edge when `orientation="left"`. + +```playground + +``` + +### offsetY + +`type: number` + +The `offsetY` prop defines how far from the edge of its permitted area an axis should be offset in the y direction. If this prop is not given, the offset will be calculated based on font size, axis orientation, and label padding. When `VictoryAxis` is used with `VictoryChart`, `VictoryChart` will determine a value for `offsetY` that makes the axes line up correctly, but this value may be overridden by supplying an `offsetY` prop directly to the `VictoryAxis` child component. + +**note:** The `offsetY` prop is relative to the edge corresponding to the orientation of the axis, _e.g._ the bottom edge when `orientation="bottom"`. + +```playground + +``` + +### orientation + +`type: "top" || "bottom" || "left" || "right"` + +The `orientation` prop specifies the position and orientation of your axis. Options are "top", "bottom", "left", and "right". + +```playground + +``` + +### padding + +`type: number || { top: number, bottom: number, left: number, right: number }` + +`VictoryAxis` uses the standard `padding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#padding) + +*default (provided by default theme):* `padding={50}` + +```jsx +padding={{ top: 20, bottom: 60 }} +``` + +### range + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually** + +[Read about the `range` prop in detail](https://formidable.com/open-source/victory/docs/common-props#range) + +### scale + +`type: scale || { x: scale, y: scale }` + +`VictoryAxis` uses the standard `scale` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#scale) +Options for scale include "linear", "time", "log", "sqrt" and the `d3-scale` functions that correspond to these options. + +**note:** Though `VictoryAxis` can take a `scale` prop with scales defined for both `x` and `y`, only the scale that corresponds the given axis will be used. + +*default:* `scale="linear"` + +```jsx +scale={{ x: "time" }} +``` + +### sharedEvents + +**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.** + +### singleQuadrantDomainPadding + +`type: boolean || { x: boolean, y: boolean }` + +`VictoryAxis` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#singlequadrantdomainpadding) + +### standalone + +`type: boolean` + +`VictoryAxis` uses the standard `standalone` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#standalone) + +**note:** When `VictoryAxis` is nested within a component like `VictoryChart`, this prop will be set to `false` + +*default:* `standalone={true}` + +```playground + + + + +``` + +### style + +`type: { axis: object, axisLabel: object, grid: object, ticks: object, tickLabels: object }` + +The `style` prop defines the style of the component. The style prop should be given as an object with styles defined for `parent`, `axis`, `axisLabel`, `grid`, `ticks`, and `tickLabels`. Any valid svg styles are supported, but `width`, `height`, and `padding` should be specified via props as they determine relative layout for components in VictoryChart. Functional styles may be defined for `grid`, `tick`, and `tickLabel` style properties, and they will be evaluated with each tick. + +**note:** When a component is rendered as a child of another Victory component, or within a custom `` element with `standalone={false}` parent styles will be applied to the enclosing `` tag. Many styles that can be applied to a parent `` will not be expressed when applied to a ``. + +**note:** custom `angle` and `verticalAnchor` properties may be included in `labels` styles. + +*default (provided by default theme):* See [grayscale theme][] for more detail + +```playground + t > 0.5 ? "red" : "grey"}, + ticks: {stroke: "grey", size: 5}, + tickLabels: {fontSize: 15, padding: 5} + }} +/> +``` + +### theme + +`type: object` + +`VictoryAxis` uses the standard `theme` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#theme) + +See the [Themes Guide][] for information about creating custom themes. + +*default:* `theme={VictoryTheme.grayscale}` + +*Note:* Use the `dependentAxis` and `independentAxis` namespaces to theme axes by type. These namespaces will be merged with any props and styles supplied in the `axis` namespace. + +```jsx +theme={VictoryTheme.material} +``` + +### tickComponent + +`type: element` + +The `tickComponent` prop takes a component instance which will be responsible for rendering a tick element. The new element created from the passed `tickComponent` will be provided with the following props calculated by `VictoryAxis`: `x1`, `y1`, `x2`, `y2`, `tick`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `tickComponent` is not provided, `VictoryAxis` will use its default [Line component][]. + +*default:* `tickComponent={}` + +```jsx +tickComponent={} +``` + +### tickCount + +`type: number` + +The `tickCount` prop specifies approximately how many ticks should be drawn on the axis. If an array of ticks is supplied in `tickValues` or `tickFormat`, the `tickCount` prop will be used to _downsample_ the provided array to the specified length. If `tickValues` are not explicitly provided, this value is used by [d3Scale][] to calculate an _approximate_ number of ticks. [d3Scale][] prioritizes returning "nice" values and evenly spaced ticks over an exact number of ticks. This prop must be given as a positive integer. + +### tickFormat + +`type: array || function` + +The `tickFormat` prop specifies how tick values should be labeled. The `tickFormat` prop can be given as an array of values to display for each tick, or as a function to be applied to every `tickValue`. When given as a function, `tickFormat` will be called with the following arguments: `tick` - the individual tick value, `index` - the index of the tick in the array, and `ticks` - the entire array of ticks. + +```playground + `${Math.round(t)}k`} + /> +``` + +### tickLabelComponent + +`type: element` + +The `tickLabelComponent` prop takes a component instance which will be used to render the axis label. The new element created from the passed `tickLabelComponent` will be supplied with the following props: `x`, `y`, `text`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `tickLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above. + +*default:* `tickLabelComponent={}` + +```jsx +tickLabelComponent={} +``` + +### tickValues + +`type: array` + +The `tickValues` prop explicitly specifies a set of tick values to draw on the axis. This prop should be given as an array of unique values of the same type (_i.e.,_ all numbers). The `tickValues` prop is used to specify the _values_ of each tick, so numeric values are typically appropriate. An array of strings or dates may be supplied for categorical and time series data respectively. Use the [tickFormat][] prop to specify how ticks should be labeled. *Note:* `tickValues` should be given as a unique array. + +```playground + +``` + +### width + +`type: number` + +`VictoryAxis` uses the standard `width` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#width) + +*default (provided by default theme):* `width={450}` + +```jsx +width={400} +``` + +[Animations Guide]: https://formidable.com/open-source/victory/guides/animations +[Events Guide]: https://formidable.com/open-source/victory/guides/events +[Themes Guide]: https://formidable.com/open-source/victory/guides/themes +[`VictoryChart`]: https://formidable.com/open-source/victory/docs/victory-chart +[tickFormat]: https://formidable.com/open-source/victory/docs/victory-axis#tickformat +[d3Scale]: https://github.com/d3/d3-scale +[grayscale theme]: https://github.com/FormidableLabs/victory-core/blob/master/src/victory-theme/grayscale.js +[Line component]: https://formidable.com/open-source/victory/docs/victory-primitives#line +[`VictoryLabel`]: https://formidable.com/open-source/victory/docs/victory-label diff --git a/packages/victory-bar/README.md b/packages/victory-bar/README.md new file mode 100644 index 000000000..8647ac462 --- /dev/null +++ b/packages/victory-bar/README.md @@ -0,0 +1,575 @@ + +# VictoryBar + +`victory-bar@^30.0.0` exports `VictoryBar` and `Bar` components + +View these docs at https://formidable.com/open-source/victory/docs/victory-bar to see live examples. + +VictoryBar renders a dataset as series of bars. VictoryBar can be composed with [`VictoryChart`][] to create bar charts. + +```playground + + + +``` + +## Props + +### alignment + +`type: "start" || "middle" || "end"` + +The `alignment` prop specifies how bars should be aligned relative to their data points. This prop may be given as "start", "middle" or "end". When this prop is not specified, bars will have "middle" alignment relative to their data points. + +```playground + + + +``` + +### animate + +`type: boolean || object` + +`VictoryBar` uses the standard `animate` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#animate) + +See the [Animations Guide][] for more detail on animations and transitions + +```jsx +animate={{ + duration: 2000, + onLoad: { duration: 1000 } +}} +``` + +### barRatio + +`type: number` + +The `barRatio` prop specifies an _approximate_ ratio between bar widths and spaces between bars. When width is not specified in bar styles, the `barRatio` prop will be used to calculate a default width for each bar given the total number of bars in the data series and the overall width of the chart. + +```playground + + + +``` + +### categories + +`type: array[string] || { x: array[string], y: array[string] }` + +`VictoryBar` uses the standard `categories` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#categories) + +```jsx +categories={{ x: ["dogs", "cats", "mice"] }} +``` + +### containerComponent + +`type: element` + +`VictoryBar` uses the standard `containerComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#containercomponent) + +```jsx +containerComponent={} +``` + +### cornerRadius + +`type: function || number || { top: number || function, bottom: number || function }` + +The `cornerRadius` prop specifies a radius to apply to each bar. If this prop is given as a single number, the radius will only be applied to the _top_ of each bar. When this prop is given as a function, it will be evaulated with the arguments `datum`, and `active`. + +```playground + + + +``` + +### data + +`type: array[object]` + +`VictoryBar` uses the standard `data` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#data) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +In addition to svg style properties and `label`, `VictoryBar` will also preferentially use `width` properties supplied via data objects + +```playground + +``` + +### dataComponent + +`type: element` + +`VictoryBar` uses the standard `dataComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#datacomponent) + +`VictoryBar` supplies the following props to its `dataComponent`: `data`, `datum`, `horizontal`, `index`, `padding`, `polar`, `origin`, `scale`, `style`, `width`, `height`, `x`, `y`, `y0`, `x0` + +See the [Custom Components Guide][] for more detail on creating your own `dataComponents` + +*default:* `` + +```jsx +dataComponent={} +``` + + +### domain + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +`VictoryBar` uses the standard `domain` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#domain) + +```jsx +domain={{x: [0, 100], y: [0, 1]}} +``` + +### domainPadding + +`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }` + +`VictoryBar` uses the standard `domainPadding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#domainpadding) + +```jsx +domainPadding={{x: [10, -10], y: 5}} +``` + +### eventKey + +`type: string || integer || array[string] || function` + +`VictoryBar` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](https://formidable.com/open-source/victory/docs/common-props#eventkey) + +```jsx +eventKey="x" +``` + +### events + +`type: array[object]` + +`VictoryBar` uses the standard `events` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#events) + +See the [Events Guide][] for more information on defining events. + +```playground +
+

Click Me

+ { + return [ + { + target: "data", + mutation: (props) => { + const fill = props.style && props.style.fill; + return fill === "black" ? null : { style: { fill: "black" } }; + } + } + ]; + } + } + }]} + data={sampleData} + /> +
+``` + +### externalEventMutations + +`type: array[object]` + +`VictoryBar` uses the standard `externalEventMutations` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#externalEventsMutations) + +### groupComponent + +`type: element` + +`VictoryBar` uses the standard `groupComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#groupcomponent) + +*default:* `` + +```jsx +groupComponent={} +``` + +### height + +`type: number` + +`VictoryBar` uses the standard `height` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#height) + +*default (provided by default theme):* `height={300}` + +```jsx +height={400} +``` + +### horizontal + +`type: boolean` + +The horizontal prop determines whether the bars will be laid vertically or horizontally. The bars will be vertical if this prop is false or unspecified, or horizontal if the prop is set to true. + +*default:* horizontal={false} + +```playground + + + +``` + +### labelComponent + +`type: element` + +`VictoryBar` uses the standard `labelComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#labelcomponent) + +*default:* `` + +```playground + d.y} + style={{ labels: { fill: "white" } }} + labelComponent={} +/> +``` + +### labels + +`type: array || function` + +`VictoryBar` uses the standard `labels` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#labels) + +```playground + `y: ${d.y}`} +/> +``` + +### maxDomain + +`type: number || { x: number, y: number }` + +`VictoryBar` uses the standard `maxDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#maxDomain) + + +```playground + + + +``` + +### minDomain + +`type: number || { x: number, y: number }` + +`VictoryBar` uses the standard `minDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#minDomain) + + +```playground + + + +``` + +### name + +`type: string` + +The `name` prop is used to reference a component instance when defining shared events. + +```jsx +name="series-1" +``` + +### origin + +`type: { x: number, y: number }` + +**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually** + +[Read about the `origin` prop in detail](https://formidable.com/open-source/victory/docs/common-props#origin) + +### padding + +`type: number || { top: number, bottom: number, left: number, right: number }` + +`VictoryBar` uses the standard `padding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#padding) + +*default (provided by default theme):* `padding={50}` + +```jsx +padding={{ top: 20, bottom: 60 }} +``` + +### polar + +`type: boolean` + +`VictoryBar` uses the standard `polar` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#polar) + +```playground + + null} + /> + + + +``` + +### range + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually** + +[Read about the `range` prop in detail](https://formidable.com/open-source/victory/docs/common-props#range) + +### samples + +`type: number` + +`VictoryBar` uses the standard `samples` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#samples) + +*default:* `samples={50}` + +```jsx +samples={100} +``` + +### scale + +`type: scale || { x: scale, y: scale }` + +`VictoryBar` uses the standard `scale` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#scale) +Options for scale include "linear", "time", "log", "sqrt" and the `d3-scale` functions that correspond to these options. + +*default:* `scale="linear"` + +```jsx +scale={{x: "linear", y: "log"}} +``` + +### sharedEvents + +**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.** + +### singleQuadrantDomainPadding + +`type: boolean || { x: boolean, y: boolean }` + +`VictoryBar` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#singlequadrantdomainpadding) + +### sortKey + +`type: string || integer || array[string] || function` + + +`VictoryBar` uses the standard `sortKey` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#sortkey) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +sortKey="x" +``` + +### sortOrder + +`type: "ascending" || "descending"` + +The `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order. + +*default:* `sortOrder="ascending"` + +### standalone + +`type: boolean` + +`VictoryBar` uses the standard `standalone` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#standalone) + +**note:** When `VictoryBar` is nested within a component like `VictoryChart`, this prop will be set to `false` + +*default:* `standalone={true}` + +```playground + + + + +``` + +### style + +`type: { parent: object, data: object, labels: object }` + +`VictoryBar` uses the standard `style` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#style) + +*default (provided by default theme):* See [grayscale theme][] for more detail + +```playground + d.x === 3 ? "#000000" : "#c43a31", + stroke: (d) => d.x === 3 ? "#000000" : "#c43a31", + fillOpacity: 0.7, + strokeWidth: 3 + }, + labels: { + fontSize: 15, + fill: (d) => d.x === 3 ? "#000000" : "#c43a31" + } + }} + data={sampleData} + labels={(d) => d.x} + /> +``` + +### theme + +`type: object` + +`VictoryBar` uses the standard `theme` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#theme) + +See the [Themes Guide][] for information about creating custom themes. + +*default:* `theme={VictoryTheme.grayscale}` + +```jsx +theme={VictoryTheme.material} +``` + +### width + +`type: number` + +`VictoryBar` uses the standard `width` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#width) + +*default (provided by default theme):* `width={450}` + +```jsx +width={400} +``` + +### x + +`type: string || integer || array[string] || function` + + +`VictoryBar` uses the standard `x` data accessor prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#x) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +x="employee.name" +``` + +### y + +`type: string || integer || array[string] || function` + +`VictoryBar` uses the standard `y` data accessor prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#y) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +y={(d) => d.value + d.error} +``` + +### y0 + +`type: string || integer || array[string] || function` + +`VictoryBar` uses the standard `y0` data accessor prop to set a baseline. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#y0) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```playground + + d.y - 1} + /> + +``` + +[Animations Guide]: https://formidable.com/open-source/victory/guides/animations +[Data Accessors Guide]: https://formidable.com/open-source/victory/guides/data-accessors +[Custom Components Guide]: https://formidable.com/open-source/victory/guides/custom-components +[Events Guide]: https://formidable.com/open-source/victory/guides/events +[Themes Guide]: https://formidable.com/open-source/victory/guides/themes +[`VictoryChart`]: https://formidable.com/open-source/victory/docs/victory-chart +[grayscale theme]: https://github.com/FormidableLabs/victory-core/blob/master/src/victory-theme/grayscale.js diff --git a/packages/victory-box-plot/README.md b/packages/victory-box-plot/README.md new file mode 100644 index 000000000..1d11448db --- /dev/null +++ b/packages/victory-box-plot/README.md @@ -0,0 +1,943 @@ + +# VictoryBoxPlot + +`victory-box-plot@^30.0.0` exports `VictoryBoxPlot` component + +View these docs at https://formidable.com/open-source/victory/docs/victory-boxplot to see live examples. + +`VictoryBoxPlot` renders a box plot to describe the distribution of a set of data. Data for `VictoryBoxPlot` may be given with summary statistics pre-calculated (`min`, `median`, `max`, `q1`, `q3`), or as an array of raw data. VictoryBoxPlot can be composed with [`VictoryChart`][] to create box plot charts. + +```playground + + + +``` + +## Props + +### animate + +`type: boolean || object` + +`VictoryBoxPlot` uses the standard `animate` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#animate) + +See the [Animations Guide][] for more detail on animations and transitions + +```jsx +animate={{ + duration: 2000, + onLoad: { duration: 1000 } +}} +``` + +### boxWidth + +`type: number` + +The `boxWidth` prop specifies how wide each box should be. If the `whiskerWidth` prop is not set, this prop will also determine the width of the whisker crosshair. + +```playground + + + +``` + +### categories + +`type: array[string] || { x: array[string], y: array[string] }` + +`VictoryBar` uses the standard `categories` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#categories) + +```jsx +categories={{ x: ["dogs", "cats", "mice"] }} +``` + +### containerComponent + +`type: element` + +`VictoryBar` uses the standard `containerComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#containercomponent) + +```jsx +containerComponent={} +``` + +### data + +`type: array[object]` + +The `data` prop for `VictoryBoxPlot` may be given in a a variety of formats: + +- As an array of standard data objects with values specified for `x` and `y` + When given in this format, repeated values for either `x `or `y` will be used for calculating summary statistics + +```jsx +data={[ + { x: 1, y: 2 }, + { x: 1, y: 3 }, + { x: 1, y: 5 }, + { x: 2, y: 1 }, + { x: 2, y: 4 }, + { x: 2, y: 5 }, + ... +]} +``` + +- As an array of data objects where _either_ `x` _or_ `y` is given as an array of values + When given in this format, array values are used for calculating summary statistics. + +```jsx +data={[ + { x: 1, y: [1, 2, 3, 5] }, + { x: 2, y: [3, 2, 8, 10] }, + { x: 3, y: [2, 8, 6, 5] }, + { x: 4, y: [1, 3, 2, 9] } +]} +``` + +- As an array of data objects with pre-calculated summary statistics(`min`, `median`, `max`, `q1`, `q3`) + When given in this format, `VictoryBoxPlot` _will not_ preform statistical analysis. Pre-calculating summary statistics for large datasets will improve performance. + +```jsx +data={[ + { x: 1, min: 2, median: 5, max: 10, q1: 3, q3: 7 }, + { x: 2, min: 1, median: 4, max: 9, q1: 3, q3: 6 }, + { x: 3, min: 1, median: 6, max: 12, q1: 4, q3: 10 }, +``` + +Use the [`x`][], [`y`][], [`min`][], [`max`][], [`median`][], [`q1`][], and [`q3`][] data accessor props to specify custom data formats. Refer to the [Data Accessors Guide][] for more detail. + +### domain + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +`VictoryBoxPlot` uses the standard `domain` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#domain) + +```jsx +domain={{x: [0, 100], y: [0, 1]}} +``` + +### domainPadding + +`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }` + +`VictoryBoxPlot` uses the standard `domainPadding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#domainpadding) + +```jsx +domainPadding={{x: [10, -10], y: 5}} +``` + +### eventKey + +`type: string || integer || array[string] || function` + +`VictoryBoxPlot` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](https://formidable.com/open-source/victory/docs/common-props#eventkey) + +```jsx +eventKey="x" +``` + +### events + +`type array[object]` + +`VictoryBoxPlot` uses the standard `events` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#events) + +See the [Events Guide][] for more information on defining events. + +**note:** valid event targets for `VictoryBoxPlot` are: +"min", "minLabels", "grid", "ticks", and "tickLabels". + +```playground +
+

Click Me

+ null} + events={[{ + target: "q3", + eventHandlers: { + onClick: () => { + return [ + { + mutation: (props) => { + return { style: Object.assign(props.style, { fill: "tomato" }) }; + } + } + ]; + } + } + }]} + data={[ + { x: 1, y: [1, 2, 3, 5] }, + { x: 2, y: [3, 2, 8, 10] }, + { x: 3, y: [2, 8, 6, 5] }, + { x: 4, y: [1, 3, 2, 9] } + ]} + /> +
+``` + +### externalEventMutations + +`type: array[object]` + +`VictoryBoxPlot` uses the standard `externalEventMutations` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#externalEventsMutations) + +### groupComponent + +`type: element` + +`VictoryBoxPlot` uses the standard `groupComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#groupcomponent) + +*default:* `` + +```jsx +groupComponent={} +``` + +### height + +`type: number` + +`VictoryBoxPlot` uses the standard `height` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#height) + +*default (provided by default theme):* `height={300}` + +```jsx +height={400} +``` + +### horizontal + +`type: boolean` + +The horizontal prop determines whether boxes will be laid vertically or horizontally. The boxes will be vertical if this prop is false or unspecified, or horizontal if the prop is set to true. + +*Note: Data should be flipped when `horizontal` is true* + +```playground + + + +``` + +### labelOrientation + +`type: "top" || "bottom" || "left" || "right"` + +The `labelOrientation` prop determines where labels are placed relative to their corresponding data. If this prop is not set, it will be set to "top" for horizontal charts, and "right" for vertical charts. + +```playground + + + +``` + +### labels + +`type: boolean` + +When the boolean `labels` prop is set to `true`, the values for `min`, `max`, `median`, `q1`, and `q3` will be displayed for each box. For more granular label control, use the individual [`minLabels`][], [`maxLabels`][], [`medianLabels`][], [`q1Labels`][], and [`q3Labels`][] props. + +### max + +`type: string || array[string] || function` + +Use the `max` data accessor prop to define the max value of a box plot. + +**string:** specify which property in an array of data objects should be used as the max value + +*examples:* `max="max_value"` + +**function:** use a function to translate each element in a data array into a max value + +*examples:* `max={() => 10}` + +**path string or path array:** specify which property in an array of nested data objects should be used as a max value + +*examples:* `max="bonds.max"`, `max={["bonds", "max"]}` + +### maxComponent + +`type: element` + +The `maxComponent` prop takes a component instance which will be responsible for rendering an element to represent the maximum value of the box plot. The new element created from the passed `maxComponent` will be provided with the following props calculated by `VictoryBoxPlot`: `datum`, `index`, `scale`, `style`, `events`, `majorWhisker` and `minorWhisker`. The `majorWhisker` and `minorWhisker` props are given as objects with values for `x1`, `y1`, `x2` and `y2` that describes the lines that make up the major and minor whisker. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `maxComponent` is not provided, `VictoryBoxPlot` will use its default [Whisker component][]. + +See the [Custom Components Guide][] for more detail on creating your own components + +*default:* `maxComponent={}` + +```jsx +maxComponent={} +``` + +### maxLabelComponent + +`type: element` + +The `maxLabelComponent` prop takes a component instance which will be used to render the label corresponding to the maximum value for each box. The new element created from the passed `maxLabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `maxLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above. + +See the [Custom Components Guide][] for more detail on creating your own components + +*default:* `maxLabelComponent={}` + +```jsx +maxLabelComponent={} +``` + +```playground + + } +/> +``` + +### maxLabels + +`type: array || function || boolean` + +The `maxLabels` prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of data. When given as a boolean value, the max value of each datum will be used for the label. + +*examples:* +- `maxLabels` +- `maxLabels={["first", "second", "third"]}` +- `maxLabels={(d) => Math.round(d.max)}` + +### maxDomain + +`type: number || { x: number, y: number }` + +`VictoryBoxPlot` uses the standard `maxDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#maxDomain) + + +```playground + + + +``` + +### median + +`type: string || array[string] || function` + +Use the `median` data accessor prop to define the median value of a box plot. + +**string:** specify which property in an array of data objects should be used as the median value + +*examples:* `median="median_value"` + +**function:** use a function to translate each element in a data array into a median value + +*examples:* `median={() => 10}` + +**path string or path array:** specify which property in an array of nested data objects should be used as a median value + +*examples:* `median="bonds.median"`, `median={["bonds", "median"]}` + +### medianComponent + +`type: element` + +The `medianComponent` prop takes a component instance which will be responsible for rendering an element to represent the median value of the box plot. The new element created from the passed `medianComponent` will be provided with the following props calculated by `VictoryBoxPlot`: `datum`, `index`, `scale`, `style`, `events`, `x1`, `y1`, `x2` and `y2` Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `medianComponent` is not provided, `VictoryBoxPlot` will use its default [Line component][]. + +See the [Custom Components Guide][] for more detail on creating your own components + +*default:* `medianComponent={}` + +```jsx +medianComponent={} +``` + +### medianLabelComponent + +`type: element` + +The `medianLabelComponent` prop takes a component instance which will be used to render the label corresponding to the median value for each box. The new element created from the passed `medianLabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `medianLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above. + +See the [Custom Components Guide][] for more detail on creating your own components + +*default:* `medianLabelComponent={}` + +```jsx +medianLabelComponent={} +``` + +```playground + + } +/> +``` + +### medianLabels + +`type: array || function || boolean` + +The `medianLabels` prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of data. When given as a boolean value, the median value of each datum will be used for the label. + +*examples:* +- `medianLabels` +- `medianLabels={["first", "second", "third"]}` +- `medianLabels={(d) => Math.round(d.median)}` + +### min + +`type: string || array[string] || function` + +Use the `min` data accessor prop to define the min value of a box plot. + +**string:** specify which property in an array of data objects should be used as the min value + +*examples:* `min="min_value"` + +**function:** use a function to translate each element in a data array into a min value + +*examples:* `min={() => 10}` + +**path string or path array:** specify which property in an array of nested data objects should be used as a min value + +*examples:* `min="bonds.min"`, `min={["bonds", "min"]}` + +### minComponent + +`type: element` + +The `minComponent` prop takes a component instance which will be responsible for rendering an element to represent the minimum value of the box plot. The new element created from the passed `minComponent` will be provided with the following props calculated by `VictoryBoxPlot`: `datum`, `index`, `scale`, `style`, `events`, `majorWhisker` and `minorWhisker`. The `majorWhisker` and `minorWhisker` props are given as objects with values for `x1`, `y1`, `x2` and `y2` that describes the lines that make up the major and minor whisker. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `minComponent` is not provided, `VictoryBoxPlot` will use its default [Whisker component][]. + +See the [Custom Components Guide][] for more detail on creating your own components + +*default:* `minComponent={}` + +```jsx +minComponent={} +``` + +### minLabelComponent + +`type: element` + +The `minLabelComponent` prop takes a component instance which will be used to render the label corresponding to the minimum value for each box. The new element created from the passed `minLabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `minLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above. + +See the [Custom Components Guide][] for more detail on creating your own components + +*default:* `minLabelComponent={}` + +```jsx +minLabelComponent={} +``` + +```playground + + } +/> +``` + +### minLabels + +`type: array || function || boolean` + +The `minLabels` prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of data. When given as a boolean value, the min value of each datum will be used for the label. + +*examples:* +- `minLabels` +- `minLabels={["first", "second", "third"]}` +- `minLabels={(d) => Math.round(d.min)}` + +### minDomain + +`type: number || { x: number, y: number }` + +`VictoryBoxPlot` uses the standard `minDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#minDomain) + + +```playground + + + +``` + +### name + +`type: string` + +The `name` prop is used to reference a component instance when defining shared events. + +```jsx +name="series-1" +``` + +### origin + +`type: { x: number, y: number }` + +**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually** + +[Read about the `origin` prop in detail](https://formidable.com/open-source/victory/docs/common-props#origin) + +### padding + +`type: number || { top: number, bottom: number, left: number, right: number }` + +`VictoryBar` uses the standard `padding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#padding) + +*default (provided by default theme):* `padding={50}` + +```jsx +padding={{ top: 20, bottom: 60 }} +``` + +### polar + +`type: boolean` + +`VictoryBoxPlot` uses the standard `polar` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#polar) + +**Note:** Polar Charts are not yet supported for `VictoryBoxPlot` + +### q1 + +`type: string || array[string] || function` + +Use the `q1` data accessor prop to define the q1 value of a box plot. + +**string:** specify which property in an array of data objects should be used as the q1 value + +*examples:* `q1="q1_value"` + +**function:** use a function to translate each element in a data array into a q1 value + +*examples:* `q1={() => 10}` + +**path string or path array:** specify which property in an array of nested data objects should be used as a q1 value + +*examples:* `q1="bonds.q1"`, `q1={["bonds", "q1"]}` + +### q1Component + +`type: element` + +The `q1Component` prop takes a component instance which will be responsible for rendering an element to represent the q1 value of the box plot. The new element created from the passed `q1Component` will be provided with the following props calculated by `VictoryBoxPlot`: `datum`, `index`, `scale`, `style`, `events`, `x`, `y`, `width` and `height` Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `q1Component` is not provided, `VictoryBoxPlot` will use its default [Box component][]. + +See the [Custom Components Guide][] for more detail on creating your own components + +*default:* `q1Component={}` + +```jsx +q1Component={} +``` + +### q1LabelComponent + +`type: element` + +The `q1LabelComponent` prop takes a component instance which will be used to render the label corresponding to the q1 value for each box. The new element created from the passed `q1LabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `q1LabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above. + +See the [Custom Components Guide][] for more detail on creating your own components + +*default:* `q1LabelComponent={}` + +```jsx +q1LabelComponent={} +``` + +```playground + + } +/> +``` + +### q1Labels + +`type: array || function || boolean` + +The `q1Labels` prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of data. When given as a boolean value, the q1 value of each datum will be used for the label. + +*examples:* +- `q1Labels` +- `q1Labels={["first", "second", "third"]}` +- `q1Labels={(d) => Math.round(d.q1)}` + +### q3 + +`type: string || array[string] || function` + +Use the `q3` data accessor prop to define the q3 value of a box plot. + +**string:** specify which property in an array of data objects should be used as the q3 value + +*examples:* `q3="q3_value"` + +**function:** use a function to translate each element in a data array into a q3 value + +*examples:* `q3={() => 10}` + +**path string or path array:** specify which property in an array of nested data objects should be used as a q3 value + +*examples:* `q3="bonds.q3"`, `q3={["bonds", "q3"]}` + +### q3Component + +`type: element` + +The `q3Component` prop takes a component instance which will be responsible for rendering an element to represent the q3 value of the box plot. The new element created from the passed `q3Component` will be provided with the following props calculated by `VictoryBoxPlot`: `datum`, `index`, `scale`, `style`, `events`, `x`, `y`, `width` and `height` Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `q3Component` is not provided, `VictoryBoxPlot` will use its default [Box component][]. + +See the [Custom Components Guide][] for more detail on creating your own components + +*default:* `q3Component={}` + +```jsx +q3Component={} +``` + +### q3LabelComponent + +`type: element` + +The `q3LabelComponent` prop takes a component instance which will be used to render the label corresponding to the q3 value for each box. The new element created from the passed `q3LabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `q3LabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above. + +See the [Custom Components Guide][] for more detail on creating your own components + +*default:* `q3LabelComponent={}` + +```jsx +q3LabelComponent={} +``` + +```playground + + } +/> +``` + +### q3Labels + +`type: array || function || boolean` + +The `q3Labels` prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of data. When given as a boolean value, the q3 value of each datum will be used for the label. + +*examples:* +- `q3Labels` +- `q3Labels={["first", "second", "third"]}` +- `q3Labels={(d) => Math.round(d.q3)}` + +### range + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually** + +[Read about the `range` prop in detail](https://formidable.com/open-source/victory/docs/common-props#range) + +### samples + +`type: number` + +`VictoryBoxPlot` uses the standard `samples` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#samples) + +*default:* `samples={50}` + +```jsx +samples={100} +``` + +### scale + +`type: scale || { x: scale, y: scale }` + +`VictoryBoxPlot` uses the standard `scale` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#scale) +Options for scale include "linear", "time", "log", "sqrt" and the `d3-scale` functions that correspond to these options. + +*default:* `scale="linear"` + +```jsx +scale={{x: "linear", y: "log"}} +``` + +### sharedEvents + +**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.** + +### singleQuadrantDomainPadding + +`type: boolean || { x: boolean, y: boolean }` + +`VictoryBoxPlot` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#singlequadrantdomainpadding) + +### sortKey + +`type: string || integer || array[string] || function` + +`VictoryBoxPlot` uses the standard `sortKey` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#sortkey) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +sortKey="x" +``` + +### sortOrder + +`type: "ascending" || "descending"` + +The `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order. + +*default:* `sortOrder="ascending"` + +### standalone + +`type: boolean` + +`VictoryBoxPlot` uses the standard `standalone` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#standalone) + +**note:** When `VictoryBar` is nested within a component like `VictoryChart`, this prop will be set to `false` + +*default:* `standalone={true}` + +### style + +``` +type: { + parent: object, + max: object, + maxLabels: object, + min: object, + minLabels: object, + median: object, + medianLabels: object, + q1: object, + q1Labels: object, + q3: object, + q3Labels: object +} +``` + +The `style` prop defines the style of the component. The style prop should be given as an object with styles defined for `parent`, `max`, `maxLabels`, `min`, `minLabels`,`median`, `medianLabels`,`q1`, `q1Labels`,`q3`, `q3Labels`. Any valid svg styles are supported, but `width`, `height`, and `padding` should be specified via props as they determine relative layout for components in VictoryChart. Functional styles may be defined for style properties, and they will be evaluated with each datum. + +**note:** When a component is rendered as a child of another Victory component, or within a custom `` element with `standalone={false}` parent styles will be applied to the enclosing `` tag. Many styles that can be applied to a parent `` will not be expressed when applied to a ``. + +**note:** custom `angle` and `verticalAnchor` properties may be included in `labels` styles. + +*default (provided by default theme):* See [grayscale theme][] for more detail + +```playground + +``` + +### theme + +`type: object` + +`VictoryBoxPlot` uses the standard `theme` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#theme) + +See the [Themes Guide][] for information about creating custom themes. + +*default:* `theme={VictoryTheme.grayscale}` + +```jsx +theme={VictoryTheme.material} +``` + +### whiskerWidth + +`type: number` + +The `whiskerWidth` prop specifies how wide each whisker crosshair should be. If the `whiskerWidth` prop is not set, the width of the whisker crosshair will match the width of the box. + +```playground + + + +``` + +### width + +`type: number` + +`VictoryBoxPlot` uses the standard `width` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#width) + +*default (provided by default theme):* `width={450}` + +```jsx +width={400} +``` + +### x + +`type: string || integer || array[string] || function` + + +`VictoryBoxPlot` uses the standard `x` data accessor prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#x) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +x="employee.name" +``` + +### y + +`type: string || integer || array[string] || function` + +`VictoryBoxPlot` uses the standard `y` data accessor prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#y) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +y={(d) => d.value + d.error} +``` + + +[Animations Guide]: https://formidable.com/open-source/victory/guides/animations +[Data Accessors Guide]: https://formidable.com/open-source/victory/guides/data-accessors +[Custom Components Guide]: https://formidable.com/open-source/victory/guides/custom-components +[Events Guide]: https://formidable.com/open-source/victory/guides/events +[Themes Guide]: https://formidable.com/open-source/victory/guides/themes +[`VictoryChart`]: https://formidable.com/open-source/victory/docs/victory-chart +[grayscale theme]: https://github.com/FormidableLabs/victory-core/blob/master/src/victory-theme/grayscale.js +[`x`]: https://formidable.com/open-source/victory/docs/victory-boxplot#x +[`y`]: https://formidable.com/open-source/victory/docs/victory-boxplot#y +[`max`]: https://formidable.com/open-source/victory/docs/victory-boxplot#max +[`maxLabels`]: https://formidable.com/open-source/victory/docs/victory-boxplot#maxlabels +[`min`]: https://formidable.com/open-source/victory/docs/victory-boxplot#min +[`minLabels`]: https://formidable.com/open-source/victory/docs/victory-boxplot#minlabels +[`median`]: https://formidable.com/open-source/victory/docs/victory-boxplot#median +[`medianLabels`]: https://formidable.com/open-source/victory/docs/victory-boxplot#medianlabels +[`q1`]: https://formidable.com/open-source/victory/docs/victory-boxplot#q1 +[`q1Labels`]: https://formidable.com/open-source/victory/docs/victory-boxplot#q1labels +[`q3`]: https://formidable.com/open-source/victory/docs/victory-boxplot#q3 +[`q3labels`]: https://formidable.com/open-source/victory/docs/victory-boxplot#q3labels +[Whisker component]: https://formidable.com/open-source/victory/docs/victory-primitives#whisker +[Box component]: https://formidable.com/open-source/victory/docs/victory-primitives#box +[Line component]: https://formidable.com/open-source/victory/docs/victory-primitives#line +[`VictoryLabel`]: https://formidable.com/open-source/victory/docs/victory-label + diff --git a/packages/victory-brush-container/README.md b/packages/victory-brush-container/README.md new file mode 100644 index 000000000..057e41b31 --- /dev/null +++ b/packages/victory-brush-container/README.md @@ -0,0 +1,158 @@ + +# VictoryBrushContainer + +`victory-brush-container@^30.0.0` exports `VictoryBrushContainer`, `brushContainerMixin` and `BrushHelpers` + +View these docs at https://formidable.com/open-source/victory/docs/victory-brush-container to see live examples. + +`VictoryBrushContainer` adds the ability to highlight a region of a chart, and interact with +highlighted regions, either by moving the region, expanding the region, or selecting a new region. +`VictoryBrushContainer` is useful for selecting a region of a larger dataset by domain. Create a +brush control by tying the domain of the selected region to the domain of a separate chart. +See the [brush and zoom guide][] for an example of using `VictoryBrushContainer` to create a brush +control. + +`VictoryBrushContainer` is similar to `VictorySelectionContainer`. `VictoryBrushContainer` may be +used to identify the domain of a selected region, whereas `VictorySelectionContainer` may be used to +identify a list of data points within a selected region. `VictoryBrushContainer` will also create +persistent highlighted regions, whereas regions created by `VictorySelectionContainer` +disappear after `onMouseUp` events. + +`VictoryBrushContainer` may be used with any Victory component that works with an x-y coordinate +system, and should be added as the `containerComponent` of the top-level component. +However, the component that uses it must be standalone +(`standalone={true}`), which is the default for all top-level Victory components. + +```playground + + } +> + + +``` + +## Props + +`VictoryBrushContainer` uses a superset of props used by [VictoryContainer][]. All props are optional. + +### allowDrag + +`type: boolean` + +The optional `allowDrag` prop accepts a boolean that enables dragging behavior for the highlighted brush area. Resizing will still be enabled when the `allowDrag` prop is set to false. + +*default:* `allowDrag={true}` + +### allowResize + +`type: boolean` + +The optional `allowResize` prop accepts a boolean that enables resizing the highlighted brush area. Dragging will still be enabled when the `allowResize` prop is set to false, but the dimensions of the brush area will be fixed. + +*default:* `allowResize={true}` + +### brushComponent + +`type: element` + +The `brushComponent` prop specifies the component to be rendered for the highlighted area. +This component will be supplied with the following props: x, y, width, height, and style. +When this prop is not specified, a `` will be rendered. + +*default:* `brushComponent={}` + +### brushDimension + +`type: "x" || "y"` + +When the `brushDimension` prop is set, brushing will only be specific to the to the given dimension +(either "x" or "y"), and the entire domain of the other dimension will be highlighted. When this prop +is not specified, highlighting will occur along both dimensions. + +*example:* `brushDimension="x"` + +### brushDomain + +`type: { x: [low, high], y: [low, high] }` + +The optional `brushDomain` prop describes the highlighted state. This prop is an object that +specifies separate arrays for `x` and `y`. Each array is a tuple that describes the minimum and maximum +values to render. If this prop is not provided initially, the chart will render with the entire +domain highlighted. When this prop changes, the chart will render with a new highlighted domain. + +*example:* `brushDomain={{x: [50, 100], y: [0, 100]}` + +### brushStyle + +`type: object` + +The `brushStyle` adds custom styles to the `brushComponent`. This prop should be given as +an object of SVG style attributes. + +*default:* `brushStyle={{stroke: "transparent", fill: "black", fillOpacity: 0.1}} + +### defaultBrushArea + +`type: "all", "none", "disable"` + +The `defaultBrushArea` prop specifies how the container will behave when a region outside the active brush is clicked without selecting a new area. When the prop is set to "all", the entire domain will be selected. When the prop is set to "none", no new region will be selected, and any existing active brush will be cleared. When the prop is set to "disable" the new selected region will default to the current active brush. + +```playground + + } +> + + +``` + +### disable + +`type: boolean` + +When the `disable` prop is set to `true`, `VictoryBrushContainer` events will not fire. + +### handleComponent + +`type: element` + +The `handleComponent` prop specifies the component to be rendered for each handle for the highlighted +area. This component will be supplied with the following props: `x`, `y`, `width`, `height`, `cursor`, and `style`. +When this prop is not specified, a `` will be rendered. + +*default:* `handleComponent={}` + +### handleStyle + +`type: object` + +The `handleStyle` adds custom styles to the `handleComponents`. This prop should be given as +an object of SVG style attributes. + +Handles refer to the region on each highlighted area where the area may be +expanded. Only handles relevant to the given `dimension` will be rendered. For example, when +`brushDimension="x"` only "left" and "right" handles will be rendered. Handles are automatically styled +with cursors appropriate to their orientation. + +*default:* `handleStyle={{stroke: "transparent", fill: "transparent"}} + +### onBrushDomainChange + +`type: function` + +The optional `onBrushDomainChange` prop accepts an function to be called on each update to the highlighted domain. The function accepts the parameters of `domain` (the updated domain), and `props` (the props used by `VictoryBrushContainer`). + +*example:* `onBrushDomainChange={(domain, props) => handleDomainChange(domain, props)}` + + +[brush and zoom guide]: https://formidable.com/open-source/victory/guides/brush-and-zoom +[VictoryContainer]: https://formidable.com/open-source/victory/docs/victory-container diff --git a/packages/victory-brush-line/README.md b/packages/victory-brush-line/README.md new file mode 100644 index 000000000..1ebbf8d82 --- /dev/null +++ b/packages/victory-brush-line/README.md @@ -0,0 +1,242 @@ + +# VictoryBrushLine + +`victory-brush-line@^30.0.0` exports `VictoryBrushLine` + +View these docs at https://formidable.com/open-source/victory/docs/victory-brush-line to see live examples. + +`VictoryBrushLine` renders a brush component centered around a line. It may be used in place of the default `axisComponent` or `gridComponent` within `VictoryAxis`. Use `VictoryBrushLine` instead of [`VictoryBrushContainer`][] in charts that require multiple brushes. + +```playground + + + } + /> + +``` + +## Props + +### allowDrag + +`type: boolean` + +The optional `allowDrag` prop accepts a boolean that enables dragging behavior for the highlighted brush area. Resizing will still be enabled when the `allowDrag` prop is set to false. + +*default:* `allowDrag={true}` + +### allowResize + +`type: boolean` + +The optional `allowResize` prop accepts a boolean that enables resizing the highlighted brush area. Dragging will still be enabled when the `allowResize` prop is set to false, but the dimensions of the brush area will be fixed. + +*default:* `allowResize={true}` + + +### brushAreaComponent + +`type: element` + +The `brushAreaComponent` prop specifies the component to be rendered for the interactive brush region. +This component will be supplied with the following props: x, y, width, height, and style. +When this prop is not specified, a [`Box`][] component will be rendered. + +*default:* `brushAreaComponent={}` + + +### brushAreaStyle + +`type: object` + +The `brushAreaStyle` prop adds custom styles to the `brushAreaComponent`. This prop should be given as +an object of SVG style attributes. Styles supplied to `brushAreaStyle` are assigned to the following default styles: + +```js +{ + stroke: "none", + fill: "black", + opacity: (d, a) => a ? 0.2 : 0.1 +} +``` + +**Note:** `cursor` styles should not be applied via this prop, as they are dynamically assigned + + +### brushAreaWidth + +`type: number` + +The `brushAreaWidth` prop is used to specify the width of the interactive brush region. If this prop is not supplied, the `width` prop will be used. + + +### brushComponent + +`type: element` + +The `brushComponent` prop specifies the component to be rendered for active brush. +This component will be supplied with the following props: x, y, width, height, and style. +When this prop is not specified, a [`Box`][] component will be rendered. + +*default:* `brushComponent={}` + +### brushDomain + +`type: array[low, high]` + +The optional `brushDomain` prop describes the highlighted state. This prop should be given as an array of the minimum and maximum values of the highlighted region. + +*example:* `brushDomain={[50, 100]}` + +### brushStyle + +`type: object` + +The `brushStyle` prop adds custom styles to the `brushComponent`. This prop should be given as +an object of SVG style attributes. Styles supplied to `brushStyle` are assigned to the following default styles: + +```js +{ + pointerEvents: "none", + stroke: "none", + fill: "black", + opacity: (d, a) => a ? 0.4 : 0.3 +} +``` + +### brushWidth + +`type: number` + +The `brushWidth` prop is used to specify the width of the active brush. If this prop is not supplied, the `width` prop will be used. + +### className + +`type: string` + +This prop specifies the class name that will be applied to the rendered element + + +### dimension + +`type: "x" || "y"` + +The `dimension` prop specified whether the brush will be vertical ("y"), or horizontal ("x") + + +### disable + +`type: boolean` + +When the `disable` prop is set to `true`, `VictoryBrushLine` events will not fire. + +### events + +`type: object` + +The `events` prop specifies a set of events that will be attached to the brush component group. This prop should not be set manually. + + +### groupComponent + +`type: element` + +This prop specifies the element used to group rendered elements + +*default:* `` + + +### handleComponent + +`type: element ` + +The `handleComponent` prop specifies the component to be rendered for each handle. +This component will be supplied with the following props: x, y, width, height, and style. +When this prop is not specified, a [`Box`][] component will be rendered. + +*default:* `handleComponent={}` + +### handleStyle + +`type: object` + +The `handleStyle` props adds custom styles to the `handleComponent`. This prop should be given as +an object of SVG style attributes. Styles supplied to `handleStyle` are assigned to the following default styles: + +```js +{ + pointerEvents: "none", + stroke: "none", + fill: "none" +} +``` + +### handleWidth + +`type: number` + +The `handleWidth` prop is used to specify the width of each handle component. + +*default:* `handleWidth={10}` + + +### lineComponent + +`type: element` + +The `lineComponent` prop specifies the component to render for the underlying axis or grid line. +This component will be supplied with the following props: x1, y1, x2, y2 and style. +When this prop is not specified, an [`Axis`][] component will be rendered. + +*default:* `lineComponent={}` + + +### onBrushDomainChange + +`type: function` + +The `onBrushDomainChange` prop specifies a callback function which will be called whenever the brush domain changes. The callback provided will be called with the following arguments: + - `currentDomain`: The current brush domain + - `props`: the current set of props for `VictoryBrushLine` + + +### scale + +`type: object` + +This prop specifies `scale` of the parent chart with `domain` and `range` applied. This prop should not be set manually. + +### style + +`type: object` + +The `style` prop specifies the styles that will be applied to the `lineComponent`. This prop should be given as +an object of SVG style attributes. + +### type + +`type: string` + +The `type` is used to specify which event target a particular `VictoryBrushLine` belongs to. When `VictoryBrushLine` is used by `VictoryAxis` as its `axisComponent` or `gridComponent`, this prop will be set automatically to "axis" or "grid" as appropriate. + +### width + +`type: number` + +The `width` prop specified the width of both the `brush` and `brushArea`. When `brushWidth` or `brushAreaWidth` are specified, this prop will not be used + +*default:* `width={10}` + + + +[`VictoryBrushContainer`]: https://formidable.com/open-source/victory/docs/victory-brush-container +[`Box`]: https://formidable.com/open-source/victory/docs/victory-primitives#box +[`Axis`]: https://formidable.com/open-source/victory/docs/victory-primitives#axis diff --git a/packages/victory-candlestick/README.md b/packages/victory-candlestick/README.md new file mode 100644 index 000000000..46c80f962 --- /dev/null +++ b/packages/victory-candlestick/README.md @@ -0,0 +1,555 @@ + +# VictoryCandlestick + +`victory-candlestick@^30.0.0` exports `VictoryCandlestick` and `Candle` components + +View these docs at https://formidable.com/open-source/victory/docs/victory-candlestick to see live examples. + +VictoryCandlestick renders a dataset as a series of candlesticks. VictoryCandlestick can be composed with [`VictoryChart`][] to create candlestick charts. + +```playground + + `${t.getDate()}/${t.getMonth()}`}/> + + + +``` + +## Props + +### animate + +`type: boolean || object` + +`VictoryCandlestick` uses the standard `animate` prop. [Read about it https://formidable.com/open-source/victoryhere](/docs/common-props#animate) + +See the [Animations Guide][] for more detail on animations and transitions + +```jsx +animate={{ + duration: 2000, + onLoad: { duration: 1000 } +}} +``` + +### candleColors + +`type: { positive: string, negative: string }` + +Candle colors are significant in candlestick charts, with colors indicating whether a market closed higher than it opened (positive), or closed lower than it opened (negative). The `candleColors` prop should be given as an object with color strings specified for positive and negative. + +*default (provided by default theme):* `candleColors={{positive: "white", negative: "black"}}` + +```playground + +``` + +### categories + +`type: array[string] || { x: array[string], y: array[string] }` + +`VictoryCandlestick` uses the standard `categories` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#categories) + +```jsx +categories={{ x: ["dogs", "cats", "mice"] }} +``` + +### close + +`type: string || integer || array[string] || function` + +Use `close` data accessor prop to define the close value of a candle. + +**string:** specify which property in an array of data objects should be used as the close value + +*examples:* `close="closing_value"` + +**function:** use a function to translate each element in a data array into a close value + +*examples:* `close={() => 10}` + +**array index:** specify which index of an array should be used as a close value when data is given as an array of arrays + +*examples:* `close={1}` + +**path string or path array:** specify which property in an array of nested data objects should be used as a close value + +*examples:* `close="bonds.close"`, `close={["bonds", "close"]}` + +### containerComponent + +`type: element` + +`VictoryCandlestick` uses the standard `containerComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#containercomponent) + +```jsx +containerComponent={} +``` + +### data + +`type: array[object]` + +Specify data via the `data` prop. By default, `VictoryCandlestick` expects data as an array of objects with `x`, `open`, `close`, `high`, and `low` keys. Use the [`x`][], [`open`][], [`close`][], [`high`][], and [`low`][] data accessor props to specify custom data formats. Refer to the [Data Accessors Guide][] for more detail. + +```playground + +``` + +### dataComponent + +`type: element` + +`VictoryCandlestick` uses the standard `dataComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#datacomponent) + +`VictoryCandlestick` supplies the following props to its `dataComponent`: `data`, `datum`, `index`, `padding`, `polar`, `origin`, `scale`, `style`, `candleHeight`, `x1`, `y1`, `y2`, `x2` + +See the [Custom Components Guide][] for more detail on creating your own `dataComponents` + +*default:* `` + +```jsx +dataComponent={} +``` + +### domain + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +`VictoryCandlestick` uses the standard `domain` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#domain) + +```jsx +domain={{x: [0, 100], y: [0, 1]}} +``` + +### domainPadding + +`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }` + +`VictoryCandlestick` uses the standard `domainPadding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#domainpadding) + +```jsx +domainPadding={{x: [10, -10], y: 5}} +``` + +### eventKey + +`type: string || integer || array[string] || function` + +`VictoryCandlestick` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](https://formidable.com/open-source/victory/docs/common-props#eventkey) + +```jsx +eventKey="x" +``` + +### events + +`type: array[object]` + +`VictoryCandlestick` uses the standard `events` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#events) + +See the [Events Guide][] for more information on defining events. + +```playground +
+

Click Me

+ { + return [ + { + target: "data", + mutation: (props) => { + const fill = props.style && props.style.fill; + return fill === "#c43a31" ? null : { style: { fill: "#c43a31" } }; + } + } + ]; + } + } + }]} + data={sampleDataDates} + /> +
+``` + +### groupComponent + +`type: element` + +`VictoryCandlestick` uses the standard `groupComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#groupcomponent) + +*default:* `` + +```jsx +groupComponent={} +``` + +### height + +`type: number` + +`VictoryCandlestick` uses the standard `height` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#height) + +*default (provided by default theme):* `height={300}` + +```jsx +height={400} +``` + +### high + +`type: string || integer || array[string] || function` + +Use `high` data accessor prop to define the high value of a candle. + +**string:** specify which property in an array of data objects should be used as the high value + +*examples:* `high="highest_value"` + +**function:** use a function to translate each element in a data array into a high value + +*examples:* `high={() => 10}` + +**array index:** specify which index of an array should be used as a high value when data is given as an array of arrays + +*examples:* `high={1}` + +**path string or path array:** specify which property in an array of nested data objects should be used as a high value + +*examples:* `high="bonds.high"`, `high={["bonds", "high"]}` + +### labelComponent + +`type: element` + +`VictoryCandlestick` uses the standard `labelComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#labelcomponent) + +*default:* `` + + +```playground + d.open} + labelComponent={} +/> +``` + +### labels + +`type: array || function` + +`VictoryCandlestick` uses the standard `labels` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#labels) + +```playground + `open: ${d.open}`} +/> +``` + +### low + +`type: string || integer || array[string] || function` + +Use `low` data accessor prop to define the low value of a candle. + +**string:** specify which property in an array of data objects should be used as the low value + +*examples:* `low="lowest_value"` + +**function:** use a function to translate each element in a data array into a low value + +*examples:* `low={() => 10}` + +**array index:** specify which index of an array should be used as a low value when data is given as an array of arrays + +*examples:* `low={1}` + +**path string or path array:** specify which property in an array of nested data objects should be used as a low value + +*examples:* `low="bonds.low"`, `low={["bonds", "low"]}` + +### maxDomain + +`type: number || { x: number, y: number }` + +`VictoryCandlestick` uses the standard `maxDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#maxDomain) + + +```playground + + + +``` + +### minDomain + +`type: number || { x: number, y: number }` + +`VictoryCandlestick` uses the standard `minDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#minDomain) + + +```playground + + + +``` + + +### name + +`type: string` + +The `name` prop is used to reference a component instance when defining shared events. + +```jsx +name="series-1" +``` + +### open + +`type: string || integer || array[string] || function` + +Use `open` data accessor prop to define the open value of a candle. + +**string:** specify which property in an array of data objects should be used as the open value + +*examples:* `open="opening_value"` + +**function:** use a function to translate each element in a data array into a open value + +*examples:* `open={() => 10}` + +**array index:** specify which index of an array should be used as a open value when data is given as an array of arrays + +*examples:* `open={1}` + +**path string or path array:** specify which property in an array of nested data objects should be used as a open value + +*examples:* `open="bonds.open"`, `open={["bonds", "open"]}` + + +### origin + +`type: { x: number, y: number }` + +**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually** + +[Read about the `origin` prop in detailhttps://formidable.com/open-source/victory](/docs/common-props#origin) + + +### padding + +`type: number || { top: number, bottom: number, left: number, right: number }` + +`VictoryCandlestick` uses the standard `padding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#padding) + +*default (provided by default theme):* `padding={50}` + +```jsx +padding={{ top: 20, bottom: 60 }} +``` + +### polar + +`type: boolean` + +`VictoryCandlestick` uses the standard `polar` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#polar) + +**Note:** Polar Charts are not yet supported for `VictoryCandlestick` + +### range + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually** + +[Read about the `range` prop in detailhttps://formidable.com/open-source/victory](/docs/common-props#range) + +### samples + +`type: number` + +`VictoryCandlestick` uses the standard `samples` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#samples) + +*default:* `samples={50}` + +```jsx +samples={100} +``` + +### scale + +`type: scale || { x: scale, y: scale }` + +`VictoryCandlestick` uses the standard `scale` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#scale) +Options for scale include "linear", "time", "log", "sqrt" and the `d3-scale` functions that correspond to these options. + +*default:* `scale="linear"` + +```jsx +scale={{x: "linear", y: "log"}} +``` + +### sharedEvents + +**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.** + +### singleQuadrantDomainPadding + +`type: boolean || { x: boolean, y: boolean }` + +`VictoryCandlestick` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#singlequadrantdomainpadding) + +### sortKey + +`type: string || integer || array[string] || function` + +`VictoryCandlestick` uses the standard `sortKey` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#sortkey) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +sortKey="x" +``` + +### sortOrder + +`type: "ascending" || "descending"` + +The `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order. + +*default:* `sortOrder="ascending"` + +### standalone + +`type: boolean` + +`VictoryCandlestick` uses the standard `standalone` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#standalone) + +**note:** When `VictoryCandlestick` is nested within a component like `VictoryChart`, this prop will be set to `false` + +*default:* `standalone={true}` + +```playground + + + + +``` + +### style + +`type: { parent: object, data: object, labels: object }` + +`VictoryCandlestick` uses the standard `style` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#style) + +*default (provided by default theme):* See [grayscale theme][] for more detail + +```playground + d.open} + /> +``` + +### theme + +`type: object` + +`VictoryCandlestick` uses the standard `theme` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#theme) + +See the [Themes Guide][] for information about creating custom themes. + +*default:* `theme={VictoryTheme.grayscale}` + +```jsx +theme={VictoryTheme.material} +``` + +### wickStrokeWidth + +`type: number` + +When the `wickStrokeWidth` prop is set, this value will be used to determine the stroke width for the candle wick. When this prop is not set, the `strokeWidth` set by the `style` prop will apply to both the candle and the wick. + +### width + +`type: number` + +`VictoryCandlestick` uses the standard `width` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#width) + +*default (provided by default theme):* `width={450}` + +```jsx +width={400} +``` + +### x + +`type: string || integer || array[string] || function` + +`VictoryCandlestick` uses the standard `x` data accessor prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#x) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +x={(datum) => new Date(datum.day)} +``` + +[Animations Guide]: https://formidable.com/open-source/victory/guides/animations +[Data Accessors Guide]: https://formidable.com/open-source/victory/guides/data-accessors +[Custom Components Guide]: https://formidable.com/open-source/victory/guides/custom-components +[Events Guide]: https://formidable.com/open-source/victory/guides/events +[Themes Guide]: https://formidable.com/open-source/victory/guides/themes +[`VictoryChart`]: https://formidable.com/open-source/victory/docs/victory-chart +[`x`]: https://formidable.com/open-source/victory/docs/victory-candlestick#x +[`open`]: https://formidable.com/open-source/victory/docs/victory-candlestick#open +[`close`]: https://formidable.com/open-source/victory/docs/victory-candlestick#close +[`high`]: https://formidable.com/open-source/victory/docs/victory-candlestick#high +[`low`]: https://formidable.com/open-source/victory/docs/victory-candlestick#low +[grayscale theme]: https://github.com/FormidableLabs/victory-core/blob/master/src/victory-theme/grayscale.js diff --git a/packages/victory-chart/README.md b/packages/victory-chart/README.md new file mode 100644 index 000000000..085b385d5 --- /dev/null +++ b/packages/victory-chart/README.md @@ -0,0 +1,474 @@ +# VictoryChart + +`victory-chart@^30.0.0` exports `VictoryChart` + +View these docs at https://formidable.com/open-source/victory/docs/victory-chart to see live examples. + +`VictoryChart` is a wrapper component that renders a given set of children on a set of Cartesian or polar axes. `VictoryChart` reconciles the domain for all its children, controls the layout of the chart, and coordinates animations and shared events. If no children are provided, `VictoryChart` will render a set of empty default axes. + + +```playground +
+ + + + + + + + +
+``` + +## Props + +### animate + +`type: boolean || object` + +`VictoryChart` uses the standard `animate` prop. [Read about it here](/docs/common-props/#animate) + +See the [Animations Guide][] for more detail on animations and transitions + +**note: `VictoryChart` controls the `animate` prop of its children when set. To animate individual children of `VictoryChart`, set the `animate` prop only on children, and not on the `VictoryChart` wrapper.** + +```jsx +animate={{ + duration: 2000, + onLoad: { duration: 1000 } +}} +``` + +### children + +`type: element || array[element]` + +`VictoryChart` works with any combination of the following children: [VictoryArea][], [VictoryAxis][] / [VictoryPolarAxis][], [VictoryBar][], [VictoryCandlestick][], [VictoryErrorBar][], [VictoryGroup][], [VictoryLine][], [VictoryScatter][], [VictoryStack][], and [VictoryVoronoi][]. Children supplied to `VictoryChart` will be cloned and rendered with new props so that all children share common props such as `domain` and `scale`. + +**Note: polar charts must use `VictoryPolarAxis` rather than `VictoryAxis`** + + +### containerComponent + +`type: element` + +`VictoryChart` uses the standard `containerComponent` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props/#containercomponent) + +```jsx +containerComponent={} +``` + +### domain + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +`VictoryChart` uses the standard `domain` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props/#domain) + +**note: `VictoryChart` controls the `domain` prop of its children.** + +```jsx +domain={{x: [0, 100], y: [0, 1]}} +``` + +### domainPadding + +`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }` + +`VictoryChart` uses the standard `domainPadding` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#domainpadding) + +**note: `VictoryChart` controls the `domainPadding` prop of its children.** + +```jsx +domainPadding={{x: [10, -10], y: 5}} +``` + +### endAngle + +`type: number` + +The `endAngle` props defines the overall end angle of a polar chart in degrees. This prop is used in conjunction with `startAngle` to create polar chart that spans only a segment of a circle, or to change overall rotation of the chart. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise. + +*default:* `endAngle={360}` + +```playground +
+ + + + + + + + + +
+``` + +### events + +`type: array[object]` + +`VictoryChart` uses the standard `events` prop. [Read about it in more detail here](https://formidable.com/open-source/victory/docs/common-props/#events) + +See the [Events Guide][] for more information on defining events. + +**Note: `VictoryChart` coordinates events between children using the `VictorySharedEvents` and the `sharedEvents` prop** + +```playground + { + return [ + { + childName: "area-2", + target: "data", + mutation: (props) => ({ style: Object.assign({}, props.style, { fill: "gold" }) }) + }, { + childName: "area-3", + target: "data", + mutation: (props) => ({ style: Object.assign({}, props.style, { fill: "orange" }) }) + }, { + childName: "area-4", + target: "data", + mutation: (props) => ({ style: Object.assign({}, props.style, { fill: "red" }) }) + } + ]; + } + } + }]} +> + + + + + + + +``` +### externalEventMutations + +`type: array[object]` + +`VictoryChart` uses the standard `externalEventMutations` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props/#externalEventsMutations) + +### groupComponent + +`type: element` + +`VictoryChart` uses the standard `groupComponent` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props/#groupcomponent) + +*default:* `` + +```jsx +groupComponent={} +``` + +### height + +`type: number` + +`VictoryChart` uses the standard `height` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props/#height) + +**note: `VictoryChart` controls the `height` prop of its children.** + +*default (provided by default theme):* `height={300}` + +```jsx +height={400} +``` + +### innerRadius + +`type: number` + +When the `innerRadius` prop is set, polar charts will be hollow rather than circular. + +```playground + + + + + +``` + +### maxDomain + +`type: number || { x: number, y: number }` + +`VictoryChart` uses the standard `maxDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#maxDomain) + + +```playground + + + +``` + +### minDomain + +`type: number || { x: number, y: number }` + +`VictoryChart` uses the standard `minDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#minDomain) + + +```playground + + + +``` + +### padding + +`type: number || { top: number, bottom: number, left: number, right: number }` + +`VictoryChart` uses the standard `padding` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props/#padding) + +**note: `VictoryChart` controls the `padding` prop of its children.** + +*default (provided by default theme):* `padding={50}` + +```jsx +padding={{ top: 20, bottom: 60 }} +``` + +### polar + +`type: boolean` + +`VictoryChart` uses the standard `polar` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props/#polar) + +**Notes:** + - `VictoryChart` controls the `polar` prop of its children + - Polar charts should use `VictoryPolarAxis` rather than `VictoryAxis` + +```playground +
+ + + + + + + + + +
+``` + +### range + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +**The `range` prop is usually calculated based on other props. It will not typically be necessary to set a `range` prop manually** + +**note: `VictoryChart` controls the `range` prop of its children.** + +[Read about the `range` prop in detail](https://formidable.com/open-source/victory/docs/common-props/#range) + + +### scale + +`type: scale || { x: scale, y: scale }` + +`VictoryChart` uses the standard `scale` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props/#scale) +Options for scale include "linear", "time", "log", "sqrt" and the `d3-scale` functions that correspond to these options. + +**note: `VictoryChart` controls the `scale` prop of its children.** + +*default:* `scale="linear"` + +```jsx +scale={{x: "linear", y: "log"}} +``` + +### sharedEvents + +**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.** + +### singleQuadrantDomainPadding + +`type: boolean || { x: boolean, y: boolean }` + +`VictoryChart` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#singlequadrantdomainpadding) + +### standalone + +`type: boolean` + +`VictoryChart` uses the standard `standalone` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props/#standalone) + +**note:** `VictoryChart` sets `standalone={false} for all of its children. + +*default:* `standalone={true}` + +```playground + + + + +``` +### startAngle + +`type: number` + +The `startAngle` props defines the overall start angle of a polar chart in degrees. This prop is used in conjunction with `endAngle` to create polar chart that spans only a segment of a circle, or to change overall rotation of the chart. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise. + +*default:* `startAngle={0}` + +```playground +
+ + + + + + + + + +
+``` + +### style + +`type: { parent: object }` + +`VictoryChart` uses the standard `style` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props/#style) + +*default (provided by default theme):* See [grayscale theme][] for more detail + +```playground + +``` + +### theme + +`type: object` + +`VictoryChart` uses the standard `theme` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props/#theme) + +See the [Themes Guide][] for information about creating custom themes. + +*default:* `theme={VictoryTheme.grayscale}` + +```jsx +theme={VictoryTheme.material} +``` + +### width + +`type: number` + +`VictoryChart` uses the standard `width` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props/#width) + +**note: `VictoryChart` controls the `width` prop of its children.** + +*default (provided by default theme):* `width={450}` + +```jsx +width={400} +``` + +[VictoryArea]: https://formidable.com/open-source/victory/docs/victory-area +[VictoryAxis]: https://formidable.com/open-source/victory/docs/victory-axis +[VictoryPolarAxis]: https://formidable.com/open-source/victory/docs/victory-polar-axis +[VictoryBar]: https://formidable.com/open-source/victory/docs/victory-bar +[VictoryCandlestick]: https://formidable.com/open-source/victory/docs/victory-candlestick +[VictoryErrorBar]: https://formidable.com/open-source/victory/docs/victory-errorbar +[VictoryGroup]: https://formidable.com/open-source/victory/docs/victory-group +[VictoryLine]: https://formidable.com/open-source/victory/docs/victory-line +[VictoryScatter]: https://formidable.com/open-source/victory/docs/victory-scatter +[VictoryStack]: https://formidable.com/open-source/victory/docs/victory-stack +[VictoryVoronoi]: https://formidable.com/open-source/victory/docs/victory-voronoi +[grayscale theme]: https://github.com/FormidableLabs/victory-core/blob/master/src/victory-theme/grayscale.js +[Animations Guide]: https://formidable.com/open-source/victory/guides/animations +[Events Guide]: https://formidable.com/open-source/victory/guides/events +[Themes Guide]: https://formidable.com/open-source/victory/guides/themes diff --git a/packages/victory-core/README.md b/packages/victory-core/README.md new file mode 100644 index 000000000..e2e3acd33 --- /dev/null +++ b/packages/victory-core/README.md @@ -0,0 +1,17 @@ +# VictoryCore + +`victory-core@30.0.0` exports packages that are used by several Victory components: + - `VictoryAnimation` + - `VictoryClipContainer` + - `VictoryContainer` + - `VictoryLabel` + - `VictoryPortal` and `Portal` + - `VictoryTheme` + - `VictoryTransition` + - Several primitive components: + `Arc`, `Border` / `Box`, `Circle`, `ClipPath`, `LineSegment` (formerly `Axis` / `Grid`), `Line`, `Path`, `Point`, `Rect`, `Text`, `TSpan`, `Whisker` + - Several utilities: + - `addEvents`, `Axis`, `Collection`, `CommonProps`, `Data`, `DefaultTransitions`, `Domain`, `Events`, `Helpers`, `Immutable`, `LabelHelpers`, `Log`, `PropTypes`, `Scale`, `Selection`, `Style`, `TextSize`, `Timer`, `Transitions`, `Wrapper` + +Please visit our documentation site to read more about these components +https://formidable.com/open-source/victory \ No newline at end of file diff --git a/packages/victory-create-container/README.md b/packages/victory-create-container/README.md new file mode 100644 index 000000000..1d0ad93ed --- /dev/null +++ b/packages/victory-create-container/README.md @@ -0,0 +1,57 @@ +# createContainer + +`victory-create-container@^30.0.0` exports `createContainer`, `combineContainerMixins` and `makeCreateContainerFunction` + +View these docs at https://formidable.com/open-source/victory/docs/create-container to see live examples. + +`createContainer` makes a container component with multiple behaviors. It allows you to effectively +combine any two of the following containers: `VictoryBrushContainer`, +`VictoryCursorContainer`, `VictorySelectionContainer`, `VictoryVoronoiContainer`, or `VictoryZoomContainer`. + +```js +const VictoryZoomVoronoiContainer = createContainer("zoom", "voronoi"); +``` + +## Arguments + +The function takes two `behavior` arguments as strings: + +```js +createContainer(behaviorA, behaviorB) +``` + +### Behavior + +Each `behavior` must be one of the following strings: +`"brush"`, `"cursor"`, `"selection"`, `"voronoi"`, and `"zoom"`. +The resulting container uses the events from both behaviors. +For example, if both behaviors use the click event (like zoom and selection) the combined container +will trigger both behaviors' events on each click. + +**Note**: Order of the behaviors matters in a few cases. +It is recommended to use `"zoom"` before any other behaviors: for example, +`createContainer("zoom", "voronoi")` instead of `createContainer("voronoi", "zoom")`. + +### Example + +The following example creates a custom container that combines `VictoryVoronoiContainer` and +`VictoryZoomContainer`. Hovering over the chart will use Voronoi to highlight data points, +while scrolling and dragging will zoom and pan. + +```playground_norender +const VictoryZoomVoronoiContainer = createContainer("zoom", "voronoi"); +const data = range(100).map((x) => ({x, y: 100 + x + random(10)})); + +const App = () => ( + `${d.x}, ${d.y}`} + /> + }> + + +); + +ReactDOM.render(, mountNode); +``` diff --git a/packages/victory-cursor-container/README.md b/packages/victory-cursor-container/README.md new file mode 100644 index 000000000..43c748dff --- /dev/null +++ b/packages/victory-cursor-container/README.md @@ -0,0 +1,116 @@ +# VictoryCursorContainer + +`victory-cursor-container@^30.0.0` exports `VictoryCursorContainer`, `cursorContainerMixin` and `CursorHelpers` + +View these docs at https://formidable.com/open-source/victory/docs/victory-cursor-container to see live examples. + +`VictoryCursorContainer` adds a cursor to a chart to inspect coordinates. +The cursor can either be a 2-dimensional crosshair, or a 1-dimensional line. +The cursor moves with the mouse (or on touch on mobile devices) along the visible domain of the chart. +The cursor can also display a label for the active coordinates using the `cursorLabel` prop. + +`VictoryCursorContainer` may be used with any Victory component that works with an x-y coordinate +system, and should be added as the `containerComponent` of the top-level component. +However, the component that uses it must be standalone +(`standalone={true}`), which is the default for all top-level Victory components. + +Note that the cursor allows you to inspect the entire domain, not just the data points. +If you would like to instead highlight only the data points, consider using [VictoryVoronoiContainer][]. + +```playground + `${round(d.x, 2)}, ${round(d.y, 2)}`} + /> + } +/> +``` + +## Props + +`VictoryCursorContainer` uses a superset of props used by [VictoryContainer][]. All props are optional. + +### cursorComponent + +`type: element` + +The `cursorComponent` prop takes a component instance which will be used to render a cursor element. The new element created will be supplied with `x1`, `y1`, `x2` and `y2` positioning props. If a `cursorComponent` is not supplied, a new [Line][] component will be rendered. + +*default:* `cursorComponent={}` + +### cursorDimension + +`type: "x" || "y"` + +When the `cursorDimension` prop is set, the cursor will be a line to inspect the given dimension +(either "x" or "y"). When this prop is not specified, the cursor will be a 2-dimensional crosshair. +For example, if you would like to inspect the time of time-series data, set `dimension={"x"}`; +the cursor will then be a vertical line that will inspect the time value of the current mouse position. + +*example:* `cursorDimension="x"` + +```playground + `${round(d.x, 2)}, ${round(d.y, 2)}`} + /> + } +/> +``` + +### cursorLabel + +`type: function` + +The `cursorLabel` prop defines the label that will appear next to the cursor. +A label will only appear if `cursorLabel` is set. This prop should be given as a function of a point (an Object with `x` and `y` properties). + +*example:* `cursorLabel={(point) => point.x}` + +### cursorLabelComponent + +`type: element` + +The `cursorLabelComponent` prop takes a component instance which will be used to render a label for the cursor. The new element created from the passed `cursorLabelComponent` will be supplied with the following props: `x`, `y`, `active`, `text`. If `cursorLabelComponent` is omitted, a new [VictoryLabel][] will be created with the props described above. + +*default:* `cursorLabelComponent={}` + +### cursorLabelOffset + +`type: number || { x: number, y: number }` + +The `cursorLabelOffset` prop determines the pixel offset of the cursor label from the cursor point. +This prop should be an Object with `x` and `y` properties, or a number to be used for both dimensions. + +*default:* `cursorLabelOffset={{ x: 5, y: -10 }}` + +### defaultCursorValue + +`type: number || { x: number, y: number }` + +Whenever the mouse is not over the chart, the cursor will not be displayed. +If instead you would like to keep it displayed, use the `defaultCursorValue` prop to set the default value. The prop should be a point (an Object with `x` and `y` properties) for 2-dimensional cursors, or a number for 1-dimensional cursors. + +*examples:* `defaultCursorValue={{x: 1, y: 1}}`, `defaultCursorValue={0}` + +### disable + +`type: boolean` + +When the `disable` prop is set to `true`, `VictoryCursorContainer` events will not fire. + +### onCursorChange + +`type: function` + +If provided, the `onChange` function will be called every time the cursor value changes. `onCursorChange` is called with `value` (the updated cursor value) and `props` (the props used by `VictoryCursorContainer`). A common use for `onChange` is to save the cursor value to state and use it in another part of the view. + +*example:* `onChange={(value, props) => this.setState({cursorValue: value})}` + +[VictoryVoronoiContainer]: https://formidable.com/open-source/victory/docs/victory-voronoi-container +[VictoryContainer]: https://formidable.com/open-source/victory/docs/victory-container +[VictoryLabel]: https://formidable.com/open-source/victory/docs/victory-label +[Line]: https://formidable.com/open-source/victory/docs/victory-primitives#line diff --git a/packages/victory-errorbar/README.md b/packages/victory-errorbar/README.md new file mode 100644 index 000000000..234fd5209 --- /dev/null +++ b/packages/victory-errorbar/README.md @@ -0,0 +1,510 @@ + +# VictoryErrorBar + +`victory-errorbar@^30.0.0` exports `VictoryErrorBar` and `ErrorBar` components + +View these docs at https://formidable.com/open-source/victory/docs/victory-errorbar to see live examples. + +`VictoryErrorBar` renders a dataset as a series of error bars. `VictoryErrorBar` can be composed with other components to add x and y error bars to data. + +```playground + + datum.error * datum.x} + errorY={(datum) => datum.error * datum.y} + /> + +``` + +## Props + +### animate + +`type: boolean || object` + +`VictoryErrorBar` uses the standard `animate` prop. [Read about it https://formidable.com/open-source/victoryhere](/docs/common-props#animate) + +See the [Animations Guide][] for more detail on animations and transitions + +```jsx +animate={{ + duration: 2000, + onLoad: { duration: 1000 } +}} +``` + +### borderWidth + +`type: number` + +The `borderWidth` prop sets the border width of the error bars. `borderWidth` will set both x and y error bar width. + +```jsx +borderWidth={10} +``` + +### categories + +`type: array[string] || { x: array[string], y: array[string] }` + +`VictoryErrorBar` uses the standard `categories` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#categories) + +```jsx +categories={{ x: ["dogs", "cats", "mice"] }} +``` + +### containerComponent + +`type: element` + +`VictoryErrorBar` uses the standard `containerComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#containercomponent) + +```jsx +containerComponent={} +``` + +### data + +`type: array[object]` + +Specify data via the `data` prop. By default, `VictoryErrorBar` expects data as an array of objects with `x`, `y`, `errorX` and `errorY` keys. Use the [`x`][], [`y`][], [`errorX`][] and [`errorY`][] data accessor props to specify custom data formats. Refer to the [Data Accessors Guide][] for more detail. + +```playground + +``` + +### dataComponent + +`type: element` + +`VictoryErrorBar` uses the standard `dataComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#datacomponent) + +`VictoryErrorBar` supplies the following props to its `dataComponent`: `data`, `datum`, `index`, `padding`, `polar`, `origin`, `scale`, `style`, `borderWidth`, `x`, `y`, `errorX`, `errorY` + +See the [Custom Components Guide][] for more detail on creating your own `dataComponents` + +*default:* `` + +```jsx +dataComponent={} +``` + +### domain + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +`VictoryErrorBar` uses the standard `domain` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#domain) + +```jsx +domain={{x: [0, 100], y: [0, 1]}} +``` + +### domainPadding + +`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }` + +`VictoryErrorBar` uses the standard `domainPadding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#domainpadding) + +```jsx +domainPadding={{x: [10, -10], y: 5}} +``` +### errorX + +`type: string || integer || array[string] || function` + +Use `errorX` data accessor prop to define the x error bar. + +**string:** specify which property in an array of data objects should be used as the errorX value + +*examples:* `errorX="uncertainty"` + +**function:** use a function to translate each element in a data array into a errorX value + +*examples:* `errorX={() => 10}` + +**array index:** specify which index of an array should be used as a errorX value when data is given as an array of arrays + +*examples:* `errorX={1}` + +**path string or path array:** specify which property in an array of nested data objects should be used as a errorX value + +*examples:* `errorX="measurement.uncertainty"`, `errorX={["measurement", "uncertainty"]}` + + +### errorY + +`type: string || integer || array[string] || function` + +Use `errorY` data accessor prop to define the y error bar. + +**string:** specify which property in an array of data objects should be used as the errorY value + +*examples:* `errorY="uncertainty"` + +**function:** use a function to translate each element in a data array into a errorY value + +*examples:* `errorY={() => 10}` + +**array index:** specify which index of an array should be used as a errorY value when data is given as an array of arrays + +*examples:* `errorY={1}` + +**path string or path array:** specify which property in an array of nested data objects should be used as a errorY value + +*examples:* `errorY="measurement.uncertainty"`, `errorY={["measurement", "uncertainty"]}` + +### eventKey + +`type: string || integer || array[string] || function` + +`VictoryErrorBar` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](https://formidable.com/open-source/victory/docs/common-props#eventkey) + +```jsx +eventKey="x" +``` + +### events + +`type: array[object]` + +`VictoryErrorBar` uses the standard `events` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#events) + +See the [Events Guide][] for more information on defining events. + +```playground +
+

Click Me

+ { + return [ + { + target: "data", + mutation: (props) => { + const stroke = props.style && props.style.stroke; + return stroke === "#c43a31" ? null : { style: { stroke: "#c43a31", strokeWidth: 7 } }; + } + } + ]; + } + } + }]} + data={[ + {x: 15, y: 35, errorX: 1, errorY: 3}, + {x: 20, y: 42, errorX: 3, errorY: 2}, + {x: 25, y: 30, errorX: 5, errorY: 5}, + {x: 30, y: 35, errorX: 5, errorY: 3}, + {x: 35, y: 22, errorX: 8, errorY: 2} + ]} + /> +
+``` + +### groupComponent + +`type: element` + +`VictoryErrorBar` uses the standard `groupComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#groupcomponent) + +*default:* `` + +```jsx +groupComponent={} +``` + +### height + +`type: number` + +`VictoryErrorBar` uses the standard `height` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#height) + +*default (provided by default theme):* `height={300}` + +```jsx +height={400} +``` + +### labelComponent + +`type: element` + +`VictoryErrorBar` uses the standard `labelComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#labelcomponent) + +*default:* `` + +```playground + d.y} + labelComponent={} +/> +``` + +### labels + +`type: array || function` + +`VictoryErrorBar` uses the standard `labels` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#labels) + +```playground + d.y} +/> +``` + +### maxDomain + +`type: number || { x: number, y: number }` + +`VictoryErrorBar` uses the standard `maxDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#maxDomain) + + +```playground + + + +``` + +### minDomain + +`type: number || { x: number, y: number }` + +`VictoryErrorBar` uses the standard `minDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#minDomain) + + +```playground + + + +``` + +### name + +`type: string` + +The `name` prop is used to reference a component instance when defining shared events. + +```jsx +name="series-1" +``` + +### origin + +`type: { x: number, y: number }` + +**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually** + +[Read about the `origin` prop in detailhttps://formidable.com/open-source/victory](/docs/common-props#origin) + + +### padding + +`type: number || { top: number, bottom: number, left: number, right: number }` + +`VictoryErrorBar` uses the standard `padding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#padding) + +*default (provided by default theme):* `padding={50}` + +```jsx +padding={{ top: 20, bottom: 60 }} +``` + +### polar + +`type: boolean` + +`VictoryErrorBar` uses the standard `polar` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#polar) + +**Note:** Polar Charts are not yet supported for `VictoryErrorBar` + +### range + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually** + +[Read about the `range` prop in detailhttps://formidable.com/open-source/victory](/docs/common-props#range) + +### samples + +`type: number` + +`VictoryErrorBar` uses the standard `samples` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#samples) + +*default:* `samples={50}` + +```jsx +samples={100} +``` + +### scale + +`type: scale || { x: scale, y: scale }` + +`VictoryErrorBar` uses the standard `scale` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#scale) +Options for scale include "linear", "time", "log", "sqrt" and the `d3-scale` functions that correspond to these options. + +*default:* `scale="linear"` + +```jsx +scale={{x: "linear", y: "log"}} +``` + +### sharedEvents + +**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.** + +### singleQuadrantDomainPadding + +`type: boolean || { x: boolean, y: boolean }` + +`VictoryErrorBar` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#singlequadrantdomainpadding) + +### sortKey + +`type: string || integer || array[string] || function` + +`VictoryErrorBar` uses the standard `sortKey` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#sortkey) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +sortKey="x" +``` + +### sortOrder + +`type: "ascending" || "descending"` + +The `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order. + +*default:* `sortOrder="ascending"` + +### standalone + +`type: boolean` + +`VictoryErrorBar` uses the standard `standalone` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#standalone) + +**note:** When `VictoryErrorBar` is nested within a component like `VictoryChart`, this prop will be set to `false` + +*default:* `standalone={true}` + +```playground + + + + +``` + +### style + +`type: { parent: object, data: object, labels: object }` + +`VictoryErrorBar` uses the standard `style` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#style) + +*default (provided by default theme):* See [grayscale theme][] for more detail + +```playground + d.x} + /> +``` + +### theme + +`type: object` + +`VictoryErrorBar` uses the standard `theme` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#theme) + +See the [Themes Guide][] for information about creating custom themes. + +*default:* `theme={VictoryTheme.grayscale}` + +```jsx +theme={VictoryTheme.material} +``` + +### width + +`type: number` + +`VictoryErrorBar` uses the standard `width` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#width) + +*default (provided by default theme):* `width={450}` + +```jsx +width={400} +``` + +### x + +`type: string || integer || array[string] || function` + +`VictoryErrorBar` uses the standard `x` data accessor prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#x) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +x={(datum) => new Date(datum.day)} +``` + +### y + +`type: string || integer || array[string] || function` + +`VictoryErrorBar` uses the standard `y` data accessor prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#y) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +y={(d) => d.value + d.error} +``` + +[Animations Guide]: https://formidable.com/open-source/victory/guides/animations +[Data Accessors Guide]: https://formidable.com/open-source/victory/guides/data-accessors +[Custom Components Guide]: https://formidable.com/open-source/victory/guides/custom-components +[Events Guide]: https://formidable.com/open-source/victory/guides/events +[Themes Guide]: https://formidable.com/open-source/victory/guides/themes +[`x`]: https://formidable.com/open-source/victory/docs/victory-candlestick#x +[`y`]: https://formidable.com/open-source/victory/docs/victory-candlestick#y +[`errorX`]: https://formidable.com/open-source/victory/docs/victory-candlestick#errorX +[`errorY`]: https://formidable.com/open-source/victory/docs/victory-candlestick#errorY +[grayscale theme]: https://github.com/FormidableLabs/victory-core/blob/master/src/victory-theme/grayscale.js diff --git a/packages/victory-group/README.md b/packages/victory-group/README.md new file mode 100644 index 000000000..e62048c23 --- /dev/null +++ b/packages/victory-group/README.md @@ -0,0 +1,542 @@ + +# VictoryGroup + +`victory-group@^30.0.0` exports `VictoryGroup` + +View these docs at https://formidable.com/open-source/victory/docs/victory-group to see live examples. + +`VictoryGroup` is a wrapper component that renders a given set of children with some shared props. `VictoryGroup` reconciles the domain and layout for all its children, and coordinates animations and shared events. `VictoryGroup` may also be used to supply common data and styles to all its children. This is especially useful when adding markers to a line, or adding voronoi tooltips to data. `VictoryGroup` may also be used to apply an offset to a group of children, as with grouped bar charts, or may be used to stack several components on the same level, _e.g.,_ stacked area charts with data markers. + +`VictoryGroup` should not have `VictoryAxis` components as children + +`VictoryGroup` works with: +[VictoryArea][], [VictoryBar][], [VictoryCandlestick][], [VictoryErrorBar][], [VictoryLine][], [VictoryScatter][], [VictoryStack][], and [VictoryVoronoi][]. + +```playground + + + + + + + +``` + +## Props + +### animate + +`type: boolean || object` + +`VictoryGroup` uses the standard `animate` prop. [Read about it herhttps://formidable.com/open-source/victorye](/docs/common-props#animate) + +See the [Animations Guide][] for more detail on animations and transitions + +**note: `VictoryGroup` controls the `animate` prop of its children when set** + +```jsx + animate={{ + duration: 2000, + onLoad: { duration: 1000 } + }} +``` + +### categories + +`type: array[string] || { x: array[string], y: array[string] }` + +`VictoryGroup` uses the standard `categories` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#categories) + +**note: When this prop is set, `VictoryGroup` controls the `categories` prop of its children.** + +```jsx +categories={["dogs", "cats", "mice"]} +``` + +### children + +`type: element || array[element]` + +`VictoryGroup` works with any combination of the following children: [VictoryArea][], [VictoryBar][], [VictoryCandlestick][], [VictoryErrorBar][], [VictoryLine][], [VictoryScatter][], [VictoryStack][], and [VictoryVoronoi][]. Children supplied to `VictoryGroup` will be cloned and rendered with new props so that all children share common props such as `domain` and `scale`. + +### color + +`type: string` + +The `color` prop is an optional prop that defines a single color to be applied to the children of `VictoryGroup`. The `color` prop will override colors specified via `colorScale`. + +```playground + + + + +``` + +### colorScale + +`type: array[string]` + +The `colorScale` prop is an optional prop that defines a color scale to be applied to the children of `VictoryGroup`. This prop should be given as an array of CSS colors, or as a string corresponding to one of the built in color scales: "grayscale", "qualitative", "heatmap", "warm", "cool", "red", "green", "blue". `VictoryGroup` will assign colors to its children by index, unless they are explicitly specified in styles. Colors will repeat when there are more children than colors in the provided `colorScale`. + +*default (provided by default theme):* See [grayscale theme][] for more detail + +```playground + + + + + +``` + + +### containerComponent + +`type: element` + +`VictoryGroup` uses the standard `containerComponent` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#containercomponent) + +```jsx +containerComponent={} +``` + +### data + +`type: array[object]` + +`VictoryGroup` uses the standard `data` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#data) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +When `data` is provided for `VictoryGroup` it will be passed to every child in the group. Use this as a convenience in cases where all components should have identical data, for example, adding data points to a line, or adding voronoi tooltips to data. Omit this prop when child components should not share data. By default, Victory components expect data as an array of objects with `x` and `y` props. Use the [x][] and [y][] data accessor props to define a custom data format. The `data` prop must be given as an array. + +```playground + + + + + + + +``` + +### domain + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +`VictoryGroup` uses the standard `domain` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#domain) + +**note: `VictoryGroup` controls the `domain` prop of its children.** + +```jsx +domain={{x: [0, 100], y: [0, 1]}} +``` + +### domainPadding + +`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }` + +`VictoryGroup` uses the standard `domainPadding` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#domainpadding) + +**note: `VictoryGroup` controls the `domainPadding` prop of its children.** + +```jsx +domainPadding={{x: [10, -10], y: 5}} +``` + +### eventKey + +`type: string || integer || array[string] || function` + +`VictoryGroup` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](https://formidable.com/open-source/victory/docs/common-props#eventkey) + +```jsx +eventKey="x" +``` + +### events + +`type: array[object]` + +`VictoryGroup` uses the standard `events` prop. [Read about it in more detail here](https://formidable.com/open-source/victory/docs/common-props#events) + +See the [Events Guide][] for more information on defining events. + +**Note: `VictoryGroup` coordinates events between children using the `VictorySharedEvents` and the `sharedEvents` prop** + +```playground + { + return [ + { + childName: "bar-2", + target: "data", + mutation: (props) => ({ style: Object.assign({}, props.style, { fill: "gold" }) }) + }, { + childName: "bar-3", + target: "data", + mutation: (props) => ({ style: Object.assign({}, props.style, { fill: "orange" }) }) + }, { + childName: "bar-4", + target: "data", + mutation: (props) => ({ style: Object.assign({}, props.style, { fill: "red" }) }) + } + ]; + } + } + }]} +> + + + + + +``` +### externalEventMutations + +`type: array[object]` + +`VictoryGroup` uses the standard `externalEventMutations` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#externalEventsMutations) + +### groupComponent + +`type: element` + +`VictoryGroup` uses the standard `groupComponent` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#groupcomponent) + +*default:* `` + +```jsx +groupComponent={} +``` + +### height + +`type: number` + +`VictoryGroup` uses the standard `height` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#height) + +*default (provided by default theme):* `height={300}` + +```jsx +height={400} +``` + +### horizontal + +`type: boolean` + +The `horizontal` prop determines whether the bars of any `VictoryBar` children supplied to `VictoryGroup` will be laid out vertically or horizontally. The bars will be vertical if this prop is false or unspecified, or horizontal if the prop is set to true. + +### labels + +`type: array || function` + +The `labels` prop defines labels that will appear above each group of data. This prop should be given as an array of values or as a function of data. If given as an array, the number of elements in the array should be equal to the length of the data array. Group labels will appear above the center series of the group, and will override the `labels` prop of child components. Omit this prop, and set `labels` props on children for individual labels. + +```jsx +labels={["spring", "summer", "fall", "winter"]}`, `labels={(datum) => datum.title} +``` + +### labelComponent + +`type: element` + +The `labelComponent` prop takes a component instance which will be used to render labels for each group. The new element created from the passed `labelComponent` will be supplied with the following props: `x`, `y`, `index`, `datum`, `verticalAnchor`, `textAnchor`, `angle`, `style`, `text`, and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `labelComponent` is omitted, a new [VictoryLabel][] will be created with the props described above. + +*default:* `` + +```jsx +labelComponent={} +``` + +### maxDomain + +`type: number || { x: number, y: number }` + +`VictoryGroup` uses the standard `maxDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#maxDomain) + +### minDomain + +`type: number || { x: number, y: number }` + +`VictoryGroup` uses the standard `minDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#minDomain) + +### name + +`type: string` + +The `name` prop is used to reference a component instance when defining shared events. + +```jsx +name="series-1" +``` + +### offset + +`type: number` + +The `offset` prop determines the number of pixels each element in a group should be offset from its original position of the on the independent axis. In the case of groups of bars, this number should be equal to the width of the bar plus the desired spacing between bars. + +```playground + + + + + +``` + +### origin + +`type: { x: number, y: number }` + +**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually** + +[Read about the `origin` prop in detail](https://formidable.com/open-source/victory/docs/common-props#origin) + + +### padding + +`type: number || { top: number, bottom: number, left: number, right: number }` + +`VictoryGroup` uses the standard `padding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#padding) + +*default (provided by default theme):* `padding={50}` + +```jsx +padding={{ top: 20, bottom: 60 }} +``` + +### polar + +`type: boolean` + +`VictoryGroup` uses the standard `polar` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#polar) + +### range + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually** + +[Read about the `range` prop in detail](https://formidable.com/open-source/victory/docs/common-props#range) + +### samples + +`type: integer` + +`VictoryGroup` uses the standard `samples` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#samples) + +*default:* `samples={50}` + +```jsx +samples={100} +``` + +### scale + +`type: scale || { x: scale, y: scale }` + +`VictoryGroup` uses the standard `scale` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#scale) +Options for scale include "linear", "time", "log", "sqrt" and the `d3-scale` functions that correspond to these options. + +**note: `VictoryGroup` controls the `scale` prop of its children.** + +*default:* `scale="linear"` + +```jsx +scale={{x: "linear", y: "log"}} +``` + +### sharedEvents + +**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.** + +### singleQuadrantDomainPadding + +`type: boolean || { x: boolean, y: boolean }` + +`VictoryGroup` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#singlequadrantdomainpadding) + +### sortKey + +`type: string || integer || array[string] || function` + + +`VictoryGroup` uses the standard `sortKey` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#sortkey) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +sortKey="x" +``` + +### sortOrder + +`type: "ascending" || "descending"` + +The `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order. + +*default:* `sortOrder="ascending"` + +### standalone + +`type: boolean` + +`VictoryGroup` uses the standard `standalone` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#standalone) + +**note:** When `VictoryGroup` is nested within a component like `VictoryChart`, this prop will be set to `false` + +*default:* `standalone={true}` + + +### style + +`type: { parent: object, data: object, labels: object }` + +`VictoryGroup` uses the standard `style` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#style) + +Styles on children of `VictoryGroup` will override styles set on the `VictoryGroup` component. + +*default (provided by default theme):* See [grayscale theme][] for more detail + +```playground + + + + + +``` + +### theme + +`type: object` + +`VictoryGroup` uses the standard `theme` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#theme) + +See the [Themes Guide][] for information about creating custom themes. + +*default:* `theme={VictoryTheme.grayscale}` + +```jsx +theme={VictoryTheme.material} +``` + +### width + +`type: number` + +`VictoryGroup` uses the standard `width` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#width) + +*default (provided by default theme):* `width={450}` + +```jsx +width={400} +``` + +### x + +`type: string || integer || array[string] || function` + +`VictoryGroup` uses the standard `x` data accessor prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#x) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +x="employee.name" +``` + +### y + +`type: string || integer || array[string] || function` + +`VictoryGroup` uses the standard `y` data accessor prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#y) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +y={(d) => d.value + d.error} +``` + +### y0 + +`type: string || integer || array[string] || function` + +`VictoryGroup` uses the standard `y0` data accessor prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#y0) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +y0={() => 10} +``` + +[Animations Guide]: https://formidable.com/open-source/victory/guides/animations +[Data Accessors Guide]: https://formidable.com/open-source/victory/guides/data-accessors +[Events Guide]: https://formidable.com/open-source/victory/guides/events +[Themes Guide]: https://formidable.com/open-source/victory/guides/themes +[grayscale theme]: https://github.com/FormidableLabs/victory-core/blob/master/src/victory-theme/grayscale.js +[VictoryArea]: https://formidable.com/open-source/victory/docs/victory-area +[VictoryBar]: https://formidable.com/open-source/victory/docs/victory-bar +[VictoryCandlestick]: https://formidable.com/open-source/victory/docs/victory-candlestick +[VictoryErrorBar]: https://formidable.com/open-source/victory/docs/victory-errorbar +[VictoryLine]: https://formidable.com/open-source/victory/docs/victory-line +[VictoryScatter]: https://formidable.com/open-source/victory/docs/victory-scatter +[VictoryStack]: https://formidable.com/open-source/victory/docs/victory-stack +[VictoryVoronoi]: https://formidable.com/open-source/victory/docs/victory-voronoi +[VictoryLabel]: https://formidable.com/open-source/victory/docs/victory-label +[x]: https://formidable.com/open-source/victory/docs/common-props#x +[y]: https://formidable.com/open-source/victory/docs/common-props#y diff --git a/packages/victory-legend/README.md b/packages/victory-legend/README.md new file mode 100644 index 000000000..d31ecb964 --- /dev/null +++ b/packages/victory-legend/README.md @@ -0,0 +1,479 @@ +# VictoryLegend + +`victory-legend@^30.0.0` exports `VictoryLegend` + +View these docs at https://formidable.com/open-source/victory/docs/victory-legend to see live examples. + +`VictoryLegend` renders a chart legend component. + +```playground + + + + +``` + +## Props + +### borderComponent + +`type: element` + +The `borderComponent` prop takes a component instance which will be responsible for rendering a border around the legend. The new element created from the passed `borderComponent` will be provided with the following properties calculated by `VictoryLegend`: `x`, `y`, `width`, `height`, and `style`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `borderComponent` is not provided, `VictoryLegend` will use its default [Border component][]. Please note that the default width and height calculated for the border component is based on _approximated_ text measurements, and may need to be adjusted. + +*default:* `` + +```jsx +borderComponent={} +``` + +### borderPadding + +`type: number || { top: number, bottom: number, left: number, right: number }` + +The `borderPadding` specifies the amount of padding that should be added between the legend items and the border. This prop may be given as a number, or as an object with values specified for `top`, `bottom`, `left`, and `right`. Please note that the default width and height calculated for the border component is based on _approximated_ text measurements, so padding may need to be adjusted. + +```jsx +borderPadding={{ top: 20, bottom: 10 }} +``` + +### centerTitle + +`type: boolean` + +The `centerTitle` boolean prop specifies whether a legend title should be centered. + +```playground + +``` + +### colorScale + +`type: array[string]` + +The `colorScale` prop defines a color scale to be applied to each data symbol in `VictoryLegend`. This prop should be given as an array of CSS colors, or as a string corresponding to one of the built in color scales: "grayscale", "qualitative", "heatmap", "warm", "cool", "red", "green", "blue". `VictoryLegend` will assign a color to each symbol by index, unless they are explicitly specified in the data object. Colors will repeat when there are more symbols than colors in the provided `colorScale`. + +```playground + +``` + +### containerComponent + +`type: element` + +`VictoryLegend` uses the standard `containerComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#containercomponent) + +**Note:** `VictoryLegend` only works with the `VictoryContainer` component + +*default:* `containerComponent={}` + +```jsx +containerComponent={} +``` + +### data + +`type: array[{ name, symbol, labels }]` + +Specify data via the `data` prop. `VictoryLegend` expects data as an array of objects with `name` (required), `symbol`, and `labels` properties. The `data` prop must be given as an array. + +*default:* `data={[{ name: "Series 1" }, { name: "Series 2" }]}` + +```playground + +``` + +### dataComponent + +`type: element` + +`VictoryLegend` uses the standard `dataComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#datacomponent) + +`VictoryLegend` supplies the following props to its `dataComponent`: `data`, `datum`, `events`, `index`, `x`, `y`, `size`, `style`, and `symbol`. `VictoryLegend` renders a [Point component][] by default. + +See the [Custom Components Guide][] for more detail on creating your own `dataComponents` + +*default:* `` + +```jsx +dataComponent={} +``` + +### eventKey + +`type: string || integer || array[string] || function` + +`VictoryLegend` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](https://formidable.com/open-source/victory/docs/common-props#eventkey) + +```jsx +eventKey="x" +``` + +### events + +`type: array[object]` + +`VictoryLegend` uses the standard `events` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#events) + +See the [Events Guide][] for more information on defining events. + +```playground +
+

Click Me

+ { + return [ + { + target: "data", + mutation: (props) => { + const fill = props.style && props.style.fill; + return fill === "#c43a31" ? null : { style: { fill: "#c43a31" } }; + } + }, { + target: "labels", + mutation: (props) => { + return props.text === "clicked" ? null : { text: "clicked" }; + } + } + ]; + } + } + }]} + data={[ + { name: "One" }, { name: "Two" }, { name: "Three" } + ]} + /> +
+``` + +### externalEventMutations + +`type: array[object]` + +`VictoryLegend` uses the standard `externalEventMutations` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#externalEventsMutations) + +### groupComponent + +`type: element` + +`VictoryLegend` uses the standard `groupComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#groupcomponent) + +*default:* `` + +```jsx +groupComponent={} +``` + +### gutter + +`type: number || { left: number, right: number }` + +The `gutter` prop defines the number of pixels between legend columns. This prop may be given as a number, or as an object with values specified for "left" and "right" gutters. To set spacing between rows, use the `rowGutter` prop. + +*default:* `gutter={10}` + +```playground + +``` + +### height + +`type: number` + +`VictoryLegend` uses the standard `height` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#height) + +*default (provided by default theme):* `height={400}` + +```jsx +height={400} +``` + +### itemsPerRow + +`type: number` + +The `itemsPerRow` prop determines how many items to render in each row of a horizontal legend, or in each column of a vertical legend. This prop should be given as an integer. When this prop is not given, legend items will be rendered in a single row or column. + +```playground + +``` + +### labelComponent + +`type: element` + +`VictoryLegend` uses the standard `labelComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#labelcomponent) + +*default:* `` + +```playground +} +/> +``` + +### orientation + +`type: "vertical" || "horizontal"` + +The `orientation` prop takes a string that defines whether legend data are displayed in a row or column. When `orientation` is `"horizontal"`, legend items will be displayed in rows. When `orientation` is `"vertical"`, legend items will be displayed in columns. + +*default:* `orientation="vertical"` + +### padding + +`type: number || { top: number, bottom: number, left: number, right: number }` + +`VictoryLegend` uses the standard `padding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#padding) + +*default (provided by default theme):* `padding={50}` + +```jsx +padding={{ top: 20, bottom: 60 }} +``` + +### rowGutter + +`type: number || { top: number, bottom: number }` + +The `rowGutter` prop defines the number of pixels between legend rows. This prop may be given as a number, or as an object with values specified for "top" and "bottom" gutters. To set spacing between columns, use the `gutter` prop. + +```playground + +``` + +### sharedEvents + +**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.** + +### standalone + +`type: boolean` + +The `standalone` props specifies whether the component should be rendered in an independent `` element or in a `` tag. This prop defaults to true, and renders an `svg`. + +*default:* `standalone={true}` + +### style + +`type: { border: object, data: object, labels: object, parent: object, title: object }` + +The `style` prop defines the style of the component. The style prop should be given as an object with styles defined for `parent`, `data`, `labels`, `title`, and `border`. Any valid svg styles are supported, but `width`, `height`, and `padding` should be specified via props as they determine relative layout for components in VictoryChart. Functional styles may be defined for `data`, and `labels` style properties, and they will be evaluated with each datum. + +**note:** When a component is rendered as a child of another Victory component, or within a custom `` element with `standalone={false}` parent styles will be applied to the enclosing `` tag. Many styles that can be applied to a parent `` will not be expressed when applied to a ``. + +**note:** custom `angle` and `verticalAnchor` properties may be included in `labels` and `title` styles. + +*default (provided by default theme):* See [grayscale theme][] for more detail + +```playground + +``` + +### symbolSpacer + +`type: number` + +The `symbolSpacer` prop defines the number of pixels between data components and label components. When a `symbolSpacer` is not defined, spacing is calculated based on symbol size and label font size. + +```playground + +``` + +### theme + +`type: object` + +The `theme` prop specifies a theme to use for determining styles and layout properties for a component. Any styles or props defined in `theme` may be overridden by props specified on the component instance. By default, components use a [grayscale theme][]. [Read more about themes here][]. + +*default:* `theme={VictoryTheme.grayscale}` + +### title + +`type: string || array[string]` + +The `title` prop specifies a title to render with the legend. This prop should be given as a string, or an array of strings for multi-line titles. + +```playground + +``` + +### titleComponent + +`type: element` + +The `titleComponent` prop takes a component instance which will be used to render a title for the component. The new element created from the passed `labelComponent` will be supplied with the following properties: `x`, `y`, `index`, `data`, `datum`, `verticalAnchor`, `textAnchor`, `style`, `text`, and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `labelComponent` is omitted, a new [VictoryLabel][] will be created with the props described above. + +*default:* `` + + +```playground +} + data={[ + { name: "One" }, { name: "Two" }, { name: "Three" } + ]} +/> +``` + +### titleOrientation + +`type: "top" || "bottom" || "left" || "right"` + +The `titleOrientation` prop specifies where the a title should be rendered in relation to the rest of the legend. Possible values for this prop are "top", "bottom", "left", and "right". + +*default (provided by default theme):* `titleOrientation="top"` + +```playground + +``` + +### width + +`type: number` + +`VictoryLegend` uses the standard `width` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#width) + +*default (provided by default theme):* `width={400}` + +```jsx +width={400} +``` + +### x + +`type: number` + +The `x` prop defines the x coordinate corresponding to the upper left corner of the legend. + +### y + +`type: number` + +The `y` prop defines the y coordinate corresponding to the upper left corner of the legend. + +[VictoryLabel]: https://formidable.com/open-source/victory/docs/victory-label +[Point component]: https://formidable.com/open-source/victory/docs/victory-primitives#point +[Border component]: https://formidable.com/open-source/victory/docs/victory-primitives#border +[grayscale theme]: https://github.com/FormidableLabs/victory-core/blob/master/src/victory-theme/grayscale.js +[Read more about themes here]: https://formidable.com/open-source/victory/guides/themes +[Custom Components Guide]: https://formidable.com/open-source/victory/guides/custom-components +[Events Guide]: https://formidable.com/open-source/victory/guides/events diff --git a/packages/victory-line/README.md b/packages/victory-line/README.md new file mode 100644 index 000000000..1063a5c48 --- /dev/null +++ b/packages/victory-line/README.md @@ -0,0 +1,533 @@ +# VictoryLine + +`victory-line@^30.0.0` exports `VictoryLine` and `Curve` components + +View these docs at https://formidable.com/open-source/victory/docs/victory-line to see live examples. + +VictoryLine renders a dataset as a single line. VictoryLine can be composed with [`VictoryChart`][] to create line charts. + +```playground + + + +``` + +## Props + +### animate + +`type: boolean || object` + +`VictoryLine` uses the standard `animate` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#animate) + +See the [Animations Guide][] for more detail on animations and transitions + +```jsx +animate={{ + duration: 2000, + onLoad: { duration: 1000 } +}} +``` + +### categories + +`type: array[string] || { x: array[string], y: array[string] }` + +`VictoryLine` uses the standard `categories` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#categories) + +```jsx +categories={{ x: ["dogs", "cats", "mice"] }} +``` + +### containerComponent + +`type: element` + +`VictoryLine` uses the standard `containerComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#containercomponent) + +```jsx +containerComponent={} +``` + +### data + +`type: array[object]` + +`VictoryLine` uses the standard `data` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#data) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```playground + + + +``` + +### dataComponent + +`type: element` + +`VictoryLine` uses the standard `dataComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#datacomponent) + +`VictoryLine` supplies the following props to its `dataComponent`: `data`, `events`, `groupComponent`, `interpolation`, `origin` (for polar charts), `polar`, `scale`, `style` + +See the [Custom Components Guide][] for more detail on creating your own `dataComponents` + +*default:* `` + +```jsx +dataComponent={} +``` + + +### domain + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +`VictoryLine` uses the standard `domain` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#domain) + +```jsx +domain={{x: [0, 100], y: [0, 1]}} +``` + +### domainPadding + +`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }` + +`VictoryLine` uses the standard `domainPadding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#domainpadding) + +```jsx +domainPadding={{x: [10, -10], y: 5}} +``` + +### eventKey + +`type: string || integer || array[string] || function` + +`VictoryLine` uses the standard `eventKey` prop. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](https://formidable.com/open-source/victory/docs/common-props#eventkey) + +**note:** `VictoryLine` only renders one element per dataset, so only one event key will be generated. + +```jsx +eventKey="x" +``` + +### events + +`type: array[object]` + +`VictoryLine` uses the standard `events` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#events) + +See the [Events Guide][] for more information on defining events. + +**note:** `VictoryLine` will use the special `eventKey` "all" rather than referring to data by index, as it renders only one element for an entire dataset + +```playground +
+

Click Me

+ { + return [ + { + target: "data", + eventKey: "all", + mutation: (props) => { + return stroke === "black" ? null : { style: { stroke: "black", strokeWidth: 5 } }; + } + } + ]; + } + } + }]} + data={sampleData} + /> +
+``` + +### externalEventMutations + +`type: array[object]` + +`VictoryLine` uses the standard `externalEventMutations` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#externalEventsMutations) + +### groupComponent + +`type: element` + +`VictoryLine` uses the standard `groupComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#groupcomponent) + +**note:** `VictoryLine` uses [`VictoryClipContainer`][] as its default `groupComponent` `VictoryClipContainer` renders a `` tag with a `clipPath` `def`. This allows continuous data components to transition smoothly when new data points enter and exit. **Supplying a completely custom `groupComponent` to `VictoryLine` may result in broken animations.** + +*default:* `` + +```playground + + } + style={{ data: { stroke: "#c43a31", strokeWidth: 15, strokeLinecap: "round" } }} + data={sampleData} + /> + +``` + +### height + +`type: number` + +`VictoryLine` uses the standard `height` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#height) + +*default (provided by default theme):* `height={300}` + +```jsx +height={400} +``` + +### interpolation + +`type: options` + +The `interpolation` prop determines how data points should be connected when creating a path. Victory uses [d3-shape](https://github.com/d3/d3-shape#curves) for interpolating curves. + +Polar line charts may use the following interpolation options: "basis", "cardinal", "catmullRom", "linear" + +Cartesian line charts may use the following interpolation options: "basis", "bundle", "cardinal", "catmullRom", "linear", "monotoneX", "monotoneY", "natural", "step", "stepAfter", "stepBefore" + +[Explore all the interpolation options][]. + +*default:* `"linear"` + +```playground + +``` + +### labelComponent + +`type: element` + +`VictoryLine` uses the standard `labelComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#labelcomponent) + +*default:* `` + +```playground + datum.y} + labelComponent={} +/> +``` + + +### labels + +`type: array || function` + +`VictoryLine` uses the standard `labels` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#labels) + +```playground + datum.y} +/> +``` + +### maxDomain + +`type: number || { x: number, y: number }` + +`VictoryLine` uses the standard `maxDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#maxDomain) + + +```playground + + + +``` + +### minDomain + +`type: number || { x: number, y: number }` + +`VictoryLine` uses the standard `minDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#minDomain) + + +```playground + + + +``` + +### name + +`type: string` + +The `name` prop is used to reference a component instance when defining shared events. + +```jsx +name="series-1" +``` + +### origin + +`type: { x: number, y: number }` + +**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually** + +[Read about the `origin` prop in detail](https://formidable.com/open-source/victory/docs/common-props#origin) + +### padding + +`type: number || { top: number, bottom: number, left: number, right: number }` + +`VictoryLine` uses the standard `padding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#padding) + +*default (provided by default theme):* `padding={50}` + +```jsx +padding={{ top: 20, bottom: 60 }} +``` + +### polar + +`type: boolean` + +`VictoryLine` uses the standard `polar` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#polar) + +```playground + + null} + /> + + + +``` + +### range + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually** + +[Read about the `range` prop in detail](https://formidable.com/open-source/victory/docs/common-props#range) + + +### samples + +`type: number` + +`VictoryLine` uses the standard `samples` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#samples) + +*default:* `samples={50}` + +```playground + + Math.sin(5 * Math.PI * d.x)} + /> + Math.cos(5 * Math.PI * d.x)} + /> + +``` + +### scale + +`type: scale || { x: scale, y: scale }` + +`VictoryLine` uses the standard `scale` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#scale) +Options for scale include "linear", "time", "log", "sqrt" and the `d3-scale` functions that correspond to these options. + +*default:* `scale="linear"` + +```jsx +scale={{x: "linear", y: "log"}} +``` + +### sharedEvents + +**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.** + +### singleQuadrantDomainPadding + +`type: boolean || { x: boolean, y: boolean }` + +`VictoryLine` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#singlequadrantdomainpadding) + +### sortKey + +`type: string || integer || array[string] || function` + +`VictoryLine` uses the standard `sortKey` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#sortkey) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```playground + ({ t }))} + sortKey="t" + x={(d) => Math.sin(3 * d.t + (2 * Math.PI))} + y={(d) => Math.sin(2 * d.t)} +/> +``` + +### sortOrder + +`type: "ascending" || "descending"` + +The `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order. + +*default:* `sortOrder="ascending"` + +### standalone + +`type: boolean` + +`VictoryLine` uses the standard `standalone` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#standalone) + +**note:** When `VictoryLine` is nested within a component like `VictoryChart`, this prop will be set to `false` + +*default:* `standalone={true}` + +```playground + + + + +``` + +### style + +`type: { parent: object, data: object, labels: object }` + +`VictoryLine` uses the standard `style` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#style) + +*default (provided by default theme):* See [grayscale theme][] for more detail + +```playground + d.x === 3 ? "#000000" : "#c43a31" + } + }} + data={sampleData} + labels={(d) => d.x} + /> +``` + +### theme + +`type: object` + +`VictoryLine` uses the standard `theme` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#theme) + +See the [Themes Guide][] for information about creating custom themes. + +*default:* `theme={VictoryTheme.grayscale}` + +```jsx +theme={VictoryTheme.material} +``` + +### width + +`type: number` + +`VictoryLine` uses the standard `width` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#width) + +*default (provided by default theme):* `width={450}` + +```jsx +width={400} +``` + +### x + +`type: string || integer || array[string] || function` + +`VictoryLine` uses the standard `x` data accessor prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#x) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +x="employee.name" +``` + +### y + +`type: string || integer || array[string] || function` + +`VictoryLine` uses the standard `y` data accessor prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#y) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +y={(d) => d.value + d.error} +``` + +### y0 + +`type: string || integer || array[string] || function` + +**It is not common to set a `y0` prop with `VictoryLine`, as baselines for `VictoryLine` are only relevant for stacked lines.** [Read more about the `y0` prop here](https://formidable.com/open-source/victory/docs/common-props#y0) + +[Animations Guide]: https://formidable.com/open-source/victory/guides/animations +[Data Accessors Guide]: https://formidable.com/open-source/victory/guides/data-accessors +[Custom Components Guide]: https://formidable.com/open-source/victory/guides/custom-components +[Events Guide]: https://formidable.com/open-source/victory/guides/events +[Themes Guide]: https://formidable.com/open-source/victory/guides/themes +[`VictoryChart`]: https://formidable.com/open-source/victory/docs/victory-chart +[`VictoryClipContainer`]: https://formidable.com/open-source/victory/docs/victory-clip-container +[grayscale theme]: https://github.com/FormidableLabs/victory-core/blob/master/src/victory-theme/grayscale.js +[Explore all the interpolation options]: https://formidable.com/open-source/victory/gallery/interpolation diff --git a/packages/victory-pie/README.md b/packages/victory-pie/README.md new file mode 100644 index 000000000..40292e142 --- /dev/null +++ b/packages/victory-pie/README.md @@ -0,0 +1,491 @@ +# VictoryPie + +`victory-pie@^30.0.0` exports `VictoryPie` and `Slice` components + +View these docs at https://formidable.com/open-source/victory/docs/victory-pie to see live examples. + +`VictoryPie` renders a dataset as a pie chart. + +```playground + +``` + +## Props + +### animate + +`type: boolean || object` + +`VictoryPie` uses the standard `animate` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#animate) + +See the [Animations Guide][] for more detail on animations and transitions + +```jsx +animate={{ + duration: 2000 +}} +``` + +### categories + +`type: array[string] || { x: array[string], y: array[string] }` + +`VictoryPie` uses the standard `categories` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#categories) + +```jsx +categories={{ x: ["dogs", "cats", "mice"] }} +``` + +### colorScale + +`type: array[string]` + +The `colorScale` prop defines a color scale to be applied to each slice of `VictoryPie`. This prop should be given as an array of CSS colors, or as a string corresponding to one of the built in color scales: "grayscale", "qualitative", "heatmap", "warm", "cool", "red", "green", "blue". `VictoryPie` will assign a color to each slice by index, unless they are explicitly specified in the data object. Colors will repeat when there are more slices than colors in the provided `colorScale`. + +*default (provided by default theme):* `colorScale="grayscale"` + +```playground + +``` + +### containerComponent + +`type: element` + +`VictoryPie` uses the standard `containerComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#containercomponent) + +**Note:** `VictoryPie` only works with the `VictoryContainer` component + +*default:* `containerComponent={}` + +```jsx +containerComponent={} +``` + +### cornerRadius + +`type: number` + +The `cornerRadius` prop specifies the corner radius of the slices rendered in the pie chart. + +```playground + +``` + +### data + +`type: array[object]` + +`VictoryPie` uses the standard `data` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#data) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + + +```playground + +``` + +### dataComponent + +`type: element` + +`VictoryPie` uses the standard `dataComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#datacomponent) + +`VictoryPie` supplies the following props to its `dataComponent`: `data`, `datum`, `events`, `index`, `pathFunction`, `slice`, `style` + +See the [Custom Components Guide][] for more detail on creating your own `dataComponents` + +*default:* `` + +```jsx +dataComponent={} +``` + +### endAngle + +`type: number` + +The `endAngle` props defines the overall end angle of the pie in degrees. This prop is used in conjunction with `startAngle` to create a pie that spans only a segment of a circle, or to change overall rotation of the pie. This prop should be given as a number of degrees. Degrees are defined as starting at the 12 o'clock position, and proceeding clockwise. + +*default:* `endAngle={360}` + + +```playground +
+ + +
+``` + +### eventKey + +`type: string || integer || array[string] || function` + +`VictoryPie` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](https://formidable.com/open-source/victory/docs/common-props#eventkey) + +```jsx +eventKey="x" +``` + +### events + +`type: array[object]` + +`VictoryPie` uses the standard `events` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#events) + +See the [Events Guide][] for more information on defining events. + +```playground +
+

Click Me

+ { + return [ + { + target: "data", + mutation: (props) => { + const fill = props.style && props.style.fill; + return fill === "#c43a31" ? null : { style: { fill: "#c43a31" } }; + } + }, { + target: "labels", + mutation: (props) => { + return props.text === "clicked" ? null : { text: "clicked" }; + } + } + ]; + } + } + }]} + data={sampleData} + /> +
+``` + +### externalEventMutations + +`type: array[object]` + +`VictoryPie` uses the standard `externalEventMutations` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#externalEventsMutations) + +### groupComponent + +`type: element` + +`VictoryPie` uses the standard `groupComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#groupcomponent) + +*default:* `` + +```jsx +groupComponent={} +``` + +### height + +`type: number` + +`VictoryPie` uses the standard `height` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#height) + +*default (provided by default theme):* `height={400}` + +```jsx +height={400} +``` + +### innerRadius + +`type: number` + +The `innerRadius` prop determines the number of pixels between the center of the chart and the inner edge of a donut chart. When this prop is set to zero a regular pie chart is rendered. + +```playground + +``` + +### labelComponent + +`type: element` + +`VictoryPie` uses the standard `labelComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#labelcomponent) + +*default:* `` + +```playground + d.y} + labelComponent={} +/> +``` + +### labelRadius + +`type: number` + +The `labelRadius` prop defines the radius of the arc that will be used for positioning each slice label. If this prop is not set, the label radius will default to the radius of the pie + label padding. + +```playground + +``` + +### labels + +`type: array || function` + +`VictoryPie` uses the standard `labels` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#labels) + +```playground + `y: ${d.y}`} +/> +``` + +### name + +`type: string` + +The `name` prop is used to reference a component instance when defining shared events. + +```jsx +name="series-1" +``` + +### origin + +`type: { x: number, y: number }` + +The `origin` prop specifies coordinates for the center of the pie. When this prop is not given, the origin will be calculated based on the `width`, `height`, and `padding` props. + +```playground + +``` + +### padAngle + +`type: number` + +The `padAngle` prop defines the amount of separation between adjacent data slices in number of degrees. + +```playground + +``` + +### padding + +`type: number || { top: number, bottom: number, left: number, right: number }` + +`VictoryPie` uses the standard `padding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#padding) + +*default (provided by default theme):* `padding={50}` + +```jsx +padding={{ top: 20, bottom: 60 }} +``` + +### radius + +`type: number` + +The `radius` prop specifies the radius of the pie. When this prop is not given, it will be calculated base on the `width`, `height`, and `padding` props. + + +```playground + +``` + + +### sharedEvents + +**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.** + +### sortKey + +`type: string || integer || array[string] || function` + +`VictoryPie` uses the standard `sortKey` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#sortkey) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +sortKey="x" +``` + +### sortOrder + +`type: "ascending" || "descending"` + +The `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order. + +*default:* `sortOrder="ascending"` + +### standalone + +`type: boolean` + +`VictoryPie` uses the standard `standalone` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#standalone) + +*default:* `standalone={true}` + +```playground + + + + +``` + +### startAngle + +`type: number` + +The `startAngle` props defines the overall start angle of the pie in degrees. This prop is used in conjunction with `endAngle` to create a pie that spans only a segment of a circle, or to change overall rotation of the pie. This prop should be given as a number of degrees. Degrees are defined as starting at the 12 o'clock position, and proceeding clockwise. + +*default:* `endAngle={0}` + + +```playground +
+ + +
+``` + +### style + +`type: { parent: object, data: object, labels: object }` + +`VictoryPie` uses the standard `style` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#style) + +*default (provided by default theme):* See [grayscale theme][] for more detail + +```playground + +``` + +### theme + +`type: object` + +`VictoryPie` uses the standard `theme` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#theme) + +See the [Themes Guide][] for information about creating custom themes. + +*default:* `theme={VictoryTheme.grayscale}` + +```jsx +theme={VictoryTheme.material} +``` + +### width + +`type: number` + +`VictoryPie` uses the standard `width` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#width) + +*default (provided by default theme):* `width={400}` + +```jsx +width={400} +``` + +### x + +`type: string || integer || array[string] || function` + +`VictoryPie` uses the standard `x` data accessor prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#x) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +x="employee.name" +``` + +### y + +`type: string || integer || array[string] || function` + +`VictoryPie` uses the standard `y` data accessor prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#y) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +y={(d) => d.value + d.error} +``` + + +[Animations Guide]: https://formidable.com/open-source/victory/guides/animations +[Data Accessors Guide]: https://formidable.com/open-source/victory/guides/data-accessors +[Custom Components Guide]: https://formidable.com/open-source/victory/guides/custom-components +[Events Guide]: https://formidable.com/open-source/victory/guides/events +[Themes Guide]: https://formidable.com/open-source/victory/guides/themes +[grayscale theme]: https://github.com/FormidableLabs/victory-core/blob/master/src/victory-theme/grayscale.js diff --git a/packages/victory-polar-axis/README.md b/packages/victory-polar-axis/README.md new file mode 100644 index 000000000..a72243778 --- /dev/null +++ b/packages/victory-polar-axis/README.md @@ -0,0 +1,578 @@ + +# VictoryPolarAxis + +`victory-polar-axis@^30.0.0` exports `VictoryPolarAxis` + +View these docs at https://formidable.com/open-source/victory/docs/victory-polar-axis to see live examples. + +VictoryPolarAxis renders a single axis which can be used on its own or composed with [`VictoryChart`][]. + +```playground + + + + +``` + +## Props + +### animate + +`type: boolean || object` + +`VictoryPolarAxis` uses the standard `animate` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#animate) + +See the [Animations Guide][] for more detail on animations + +```jsx +animate={{ + duration: 2000, + easing: "bounce" +}} +``` +### axisAngle + +`type: number` + +The `axisAngle` prop is used to position the dependent axis. This prop should be given in degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise. This prop only affects the dependent axis. + +*default:* `axisAngle={0}` + +```playground + +``` + +### axisComponent + +`type: element` + +The `axisComponent` prop takes a component instance which will be responsible for rendering an axis line for the dependent axis. The independent axis renders a `circularAxisComponent`. The new element created from the passed `axisComponent` will be provided with the following props calculated by `VictoryPolarAxis`: `x1`, `y1`, `x2`, `y2`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If an `axisComponent` is not provided, `VictoryPolarAxis` will use its default [Line component][]. + +*default:* `axisComponent={}` + +```jsx +axisComponent={} +``` + +### axisLabelComponent + +`type: element` + +The `axisLabelComponent` prop takes a component instance which will be used to render the axis label. The new element created from the passed `axisLabelComponent` will be supplied with the following props: `x`, `y`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `axisLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above. + +**Note:** Axis labels are only rendered with the dependent axis in polar charts. + +*default:* `axisLabelComponent={}` + +```jsx +axisLabelComponent={} +``` + +### axisValue + +`type: number` + +The `axisValue` prop may be used instead of `axisAngle` to position the dependent axis. Ths prop is useful when dependent axes should line up with values on the independent axis. + + +```playground + + { + ["intelligence", "strength", "speed", "stealth", "charisma"].map((d, i) => { + return ( + + ); + }) + } + + +``` + +### circularAxisComponent + +`type: element` + +The `circularAxisComponent` prop takes a component instance which will be responsible for rendering an axis arc for the independent axis. The dependent axis renders an `axisComponent`. The new element created from the passed `circularAxisComponent` will be provided with the following props calculated by `VictoryPolarAxis`: `style`, `events`, +`cx`, `cy`, `r`, `startAngle`, and `endAngle`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `circularAxisComponent` is not provided, `VictoryPolarAxis` will use its default [Arc component][]. + +*default:* `circularAxisComponent={}` + +```jsx +circularAxisComponent={} +``` + +### circularGridComponent + +`type: element` + +The `circularGridComponent` prop takes a component instance which will be responsible for rendering a grid element. The new element created from the passed `circularGridComponent` will be provided with the following props calculated by `VictoryPolarAxis`: `x1`, `y1`, `x2`, `y2`, `tick`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `circularGridComponent` is not provided, `VictoryPolarAxis` will use its default [Arc component][]. + +*default:* `circularGridComponent={}` + +```jsx +circularGridComponent={} +``` + +### containerComponent + +`type: element` + +`VictoryPolarAxis` uses the standard `containerComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#containercomponent) + +The following victory containers work with polar charts: +`VictoryContainer`, `VictorySelectionContainer`, `VictoryVoronoiContainer` and `VictoryZoomContainer` + +```jsx +containerComponent={} +``` + +### dependentAxis + +`type: boolean` + +The `dependentAxis` boolean prop specifies whether the axis corresponds to the dependent variable (usually y, or the radial dimension on a polar chart). This prop is useful when composing `VictoryPolarAxis` with other components to form a chart. + +*default:* `dependentAxis={false}` + +```playground +
+ + +
+``` + +### domain + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +`VictoryPolarAxis` uses the standard `domain` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#domain) + +```jsx +domain={{x: [0, 100], y: [0, 1]}} +``` + +### domainPadding + +`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }` + +`VictoryPolarAxis` uses the standard `domainPadding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#domainpadding) + +```jsx +domainPadding={{x: [10, -10], y: 5}} +``` + +### endAngle + +`type: number` + +The `endAngle` props defines the overall end angle of the axis in degrees. This prop is used in conjunction with `startAngle` to create an axis that spans only a segment of a circle, or to change overall rotation of the axis. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise. + +*default:* `endAngle={360}` + + +```playground +
+ + +
+``` + +### events + +`type: array[objects]` + +`VictoryPolarAxis` uses the standard `events` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#events) + +See the [Events Guide] []for more information on defining events. + +**note:** valid event targets for `VictoryPolarAxis` are "axis", "axisLabel", "grid", "ticks", and "tickLabels". +Targets that correspond to only one element {"axis" and "axisLabel") should use the special eventKey "all". + +### externalEventMutations + +`type: array[object]` + +`VictoryPolarAxis` uses the standard `externalEventMutations` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#externalEventsMutations) + +### gridComponent + +`type: element` + +The `gridComponent` prop takes a component instance which will be responsible for rendering a grid element. The new element created from the passed `gridComponent` will be provided with the following props calculated by `VictoryPolarAxis`: `x1`, `y1`, `x2`, `y2`, `tick`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `gridComponent` is not provided, `VictoryPolarAxis` will use its default [Line component][]. + +*default:* `gridComponent={}` + +```jsx +gridComponent={} +``` + +### groupComponent + +`type: element` + +`VictoryPolarAxis` uses the standard `groupComponent` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#groupcomponent) + +*default:* `` + +```jsx +groupComponent={} +``` + +### height + +`type: number` + +`VictoryPolarAxis` uses the standard `height` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#height) + +*default (provided by default theme):* `height={300}` + +```jsx +height={400} +``` + +### innerRadius + +`type: number` + +When the `innerRadius` prop is set, polar axes will be hollow rather than circular. + +```playground + +``` +### invertAxis + +`type: boolean` + +The `invertAxis` boolean prop specifies whether the domain for a given axis should be inverted. By default, axes will be displayed with lower values on the bottom / left, and higher values on the top / right regardless of orientation. + +*default:* `invertAxis={false}` + +### label + +`type: string` + +The `label` prop defines the label that will appear with a dependent axis. Labels will not appear with independent polar axes. This prop should be given as a string. + +```playground + +``` + +### labelPlacement + +`type: "parallel" || "perpendicular" || "vertical"` + +The `labelPlacement` prop specifies how tick labels should be placed relative to the angular tick values. Options for this prop are "vertical", "parallel", and "perpendicular". + +*default:* `labelPlacement="parallel"` + +```playground + +``` + +### maxDomain + +`type: number || { x: number, y: number }` + +`VictoryPolarAxis` uses the standard `maxDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#maxDomain) + + +```playground + +``` + +### minDomain + +`type: number || { x: number, y: number }` + +`VictoryPolarAxis` uses the standard `minDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#minDomain) + + +```playground + +``` + +### name + +`type: string` + +`VictoryPolarAxis` uses the standard `name` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#name) + +```jsx +name="series-1" +``` + +### origin + +`type: { x: number, y: number }` + +**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually** + +[Read about the `origin` prop in detail](https://formidable.com/open-source/victory/docs/common-props#origin) + +### padding + +`type: number || { top: number, bottom: number, left: number, right: number }` + +`VictoryPolarAxis` uses the standard `padding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#padding) + +*default (provided by default theme):* `padding={50}` + +```jsx +padding={{ top: 20, bottom: 60 }} +``` + +### range + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually** + +[Read about the `range` prop in detail](https://formidable.com/open-source/victory/docs/common-props#range) + +### scale + +`type: scale || { x: scale, y: scale }` + +`VictoryPolarAxis` uses the standard `scale` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#scale) +Options for scale include "linear", "time", "log", "sqrt" and the `d3-scale` functions that correspond to these options. + +**note:** Though `VictoryPolarAxis` can take a `scale` prop with scales defined for both `x` and `y`, only the scale that corresponds the given axis will be used. + +*default:* `scale="linear"` + +```jsx +scale={{x: "linear", y: "log"}} +``` + +### sharedEvents + +**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.** + +### singleQuadrantDomainPadding + +`type: boolean || { x: boolean, y: boolean }` + +`VictoryPolarAxis` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#singlequadrantdomainpadding) + +### standalone + +`type: boolean` + +`VictoryPolarAxis` uses the standard `standalone` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#standalone) + +**note:** When `VictoryPolarAxis` is nested within a component like `VictoryChart`, this prop will be set to `false` + +*default:* `standalone={true}` + +```playground + + + + +``` + +### startAngle + +`type: number` + +The `startAngle` props defines the overall end angle of the axis in degrees. This prop is used in conjunction with `endAngle` to create an axis that spans only a segment of a circle, or to change overall rotation of the axis. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise. + +*default:* `startAngle={0}` + + +```playground +
+ + +
+``` + +### style + +`type: { axis: object, axisLabel: object, grid: object, ticks: object, tickLabels: object }` + +The `style` prop defines the style of the component. The style prop should be given as an object with styles defined for `parent`, `axis`, `axisLabel`, `grid`, `ticks`, and `tickLabels`. Any valid svg styles are supported, but `width`, `height`, and `padding` should be specified via props as they determine relative layout for components in VictoryChart. Functional styles may be defined for `grid`, `tick`, and `tickLabel` style properties, and they will be evaluated with each tick. + +**note:** When a component is rendered as a child of another Victory component, or within a custom `` element with `standalone={false}` parent styles will be applied to the enclosing `` tag. Many styles that can be applied to a parent `` will not be expressed when applied to a ``. + +**note:** custom `angle` and `verticalAnchor` properties may be included in `labels` styles. + +*default (provided by default theme):* See [grayscale theme][] for more detail + +```playground + t > 0.5 ? "red" : "blue"}, + tickLabels: {fontSize: 15, padding: 15} + }} +/> +``` + +### theme + +`type: object` + +`VictoryPolarAxis` uses the standard `theme` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#theme) + +See the [Themes Guide][] for information about creating custom themes. + +*default:* `theme={VictoryTheme.grayscale}` + +*Note:* Use the `dependentAxis` and `independentAxis` namespaces to theme axes by type. These namespaces will be merged with any props and styles supplied in the `axis` namespace. + +```jsx +theme={VictoryTheme.material} +``` + +### tickComponent + +`type: element` + +The `tickComponent` prop takes a component instance which will be responsible for rendering a tick element. The new element created from the passed `tickComponent` will be provided with the following props calculated by `VictoryPolarAxis`: `x1`, `y1`, `x2`, `y2`, `tick`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `tickComponent` is not provided, `VictoryPolarAxis` will use its default [Line component][]. + +*default:* `tickComponent={}` + +```jsx +tickComponent={} +``` + +### tickCount + +`type: number` + +The `tickCount` prop specifies approximately how many ticks should be drawn on the axis. If an array of ticks is supplied in `tickValues` or `tickFormat`, the `tickCount` prop will be used to _downsample_ the provided array to the specified length. If `tickValues` are not explicitly provided, this value is used by [d3Scale][] to calculate an _approximate_ number of ticks. [d3Scale][] prioritizes returning "nice" values and evenly spaced ticks over an exact number of ticks. This prop must be given as a positive integer. + +### tickFormat + +`type: array || function` + +The `tickFormat` prop specifies how tick values should be labeled. The `tickFormat` prop can be given as an array of values to display for each tick, or as a function to be applied to every `tickValue`. When given as a function, `tickFormat` will be called with the following arguments: `tick` - the individual tick value, `index` - the index of the tick in the array, and `ticks` - the entire array of ticks. + +```playground + `${Math.round(t)}k`} +/> +``` + +### tickLabelComponent + +`type: element` + +The `tickLabelComponent` prop takes a component instance which will be used to render the axis label. The new element created from the passed `tickLabelComponent` will be supplied with the following props: `x`, `y`, `tick`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `tickLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above. + +*default:* `tickLabelComponent={}` + +```jsx +tickLabelComponent={} +``` + +### tickValues + +`type: array` + +The `tickValues` prop explicitly specifies a set of tick values to draw on the axis. This prop should be given as an array of unique values of the same type (_i.e.,_ all numbers). The `tickValues` prop is used to specify the _values_ of each tick, so numeric values are typically appropriate. An array of strings or dates may be supplied for categorical and time series data respectively. Use the [tickFormat][] prop to specify how ticks should be labeled. *Note:* `tickValues` should be given as a unique array. + +```playground + +``` + +### width + +`type: number` + +`VictoryPolarAxis` uses the standard `width` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#width) + +*default (provided by default theme):* `width={450}` + +```jsx +width={400} +``` + +[Animations Guide]: https://formidable.com/open-source/victory/guides/animations +[Events Guide]: https://formidable.com/open-source/victory/guides/events +[Themes Guide]: https://formidable.com/open-source/victory/guides/themes +[`VictoryChart`]: https://formidable.com/open-source/victory/docs/victory-chart +[tickFormat]: https://formidable.com/open-source/victory/docs/victory-axis#tickformat +[d3Scale]: https://github.com/d3/d3-scale +[grayscale theme]: https://github.com/FormidableLabs/victory-core/blob/master/src/victory-theme/grayscale.js +[Line component]: https://formidable.com/open-source/victory/docs/victory-primitives#line +[Arc component]: https://formidable.com/open-source/victory/docs/victory-primitives#arc +[`VictoryLabel`]: https://formidable.com/open-source/victory/docs/victory-label diff --git a/packages/victory-scatter/README.md b/packages/victory-scatter/README.md new file mode 100644 index 000000000..0f5939cdd --- /dev/null +++ b/packages/victory-scatter/README.md @@ -0,0 +1,602 @@ + +# VictoryScatter + +`victory-scatter@^30.0.0` exports `VictoryScatter` + +View these docs at https://formidable.com/open-source/victory/docs/victory-scatter to see live examples. + +VictoryScatter renders a dataset as a series of points. VictoryScatter can be composed with [`VictoryChart`][] to create scatter plots. + +```playground + + + +``` + +## Props + +### animate + +`type: boolean || object` + +`VictoryScatter` uses the standard `animate` prop. [Read about it herhttps://formidable.com/open-source/victorye](/docs/common-props#animate) + +See the [Animations Guide][] for more detail on animations and transitions + +```jsx +animate={{ + duration: 2000, + onLoad: { duration: 1000 } +}} +``` + +### bubbleProperty + +`type: string` + +The `bubbleProperty` prop indicates which property of the data object should be used to scale data points in a bubble chart. If a `bubbleProperty` is given, `size` and `symbol` props will be ignored. Bubble charts always render circular points. + +*default:* `bubbleProperty="z"` + +```playground + +``` + +### categories + +`type: array[string] || { x: array[string], y: array[string] }` + +`VictoryScatter` uses the standard `categories` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#categories) + +```jsx +categories={{ x: ["dogs", "cats", "mice"] }} +``` + +### containerComponent + +`type: element` + +`VictoryScatter` uses the standard `containerComponent` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#containercomponent) + +```jsx +containerComponent={} +``` + +### data + +`type: array[object]` + +`VictoryScatter` uses the standard `data` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#data) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +In addition to svg style properties and `label`, `VictoryScatter` will also preferentially use `symbol` and `size` properties supplied via data objects. + +```playground + +``` + +### dataComponent + +`type: element` + +`VictoryScatter` uses the standard `dataComponent` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#datacomponent) + +`VictoryScatter` supplies the following props to its `dataComponent`: `data`, `datum`, `index`, `origin`, `polar`,`scale`, `size`, `style`, `symbol`, `x`, `y` + +See the [Custom Components Guide][] for more detail on creating your own `dataComponents` + +*default:* `` + +```playground_norender +class CatPoint extends React.Component { + render() { + const {x, y, datum} = this.props; // VictoryScatter supplies x, y and datum + const cat = datum._y >= 0 ? "😻" : "😹"; + return ( + + {cat} + + ); + } +} + +class App extends React.Component { + render() { + return ( + + } + y={(d) => Math.sin(2 * Math.PI * d.x)} + samples={15} + /> + + ); + } +} +ReactDOM.render(, mountNode); +``` + +### domain + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +`VictoryScatter` uses the standard `domain` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#domain) + +```jsx +domain={{x: [0, 100], y: [0, 1]}} +``` + +### domainPadding + +`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }` + +`VictoryScatter` uses the standard `domainPadding` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#domainpadding) + +```jsx +domainPadding={{x: [10, -10], y: 5}} +``` + +### eventKey + +`type: string || integer || array[string] || function` + +`VictoryScatter` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](https://formidable.com/open-source/victory/docs/common-props#eventkey) + +```jsx +eventKey="x" +``` + +### events + +`type: array[object]` + +`VictoryScatter` uses the standard `events` prop. [Read about it in more detail here](https://formidable.com/open-source/victory/docs/common-props#events) + +See the [Events Guide][] for more information on defining events. + +```playground +
+

Click Me

+ null} + events={[{ + target: "data", + eventHandlers: { + onClick: () => { + return [ + { + target: "data", + mutation: (props) => { + const fill = props.style && props.style.fill; + return fill === "black" ? null : { style: { fill: "black" } }; + } + }, { + target: "labels", + mutation: (props) => { + return props.text === "clicked" ? + null : { text: "clicked" }; + } + } + ]; + } + } + }]} + data={sampleData} + /> +
+``` + +### externalEventMutations + +`type: array[object]` + +`VictoryScatter` uses the standard `externalEventMutations` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#externalEventsMutations) + +### groupComponent + +`type: element` + +`VictoryScatter` uses the standard `groupComponent` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#groupcomponent) + +*default:* `` + +```playground + + } + data={sampleData} + size={20} + /> + +``` + +### height + +`type: number` + +`VictoryScatter` uses the standard `height` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#height) + +*default (provided by default theme):* `height={300}` + +```jsx +height={400} +``` + +### labelComponent + +`type: element` + +`VictoryScatter` uses the standard `labelComponent` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#labelcomponent) + +*default:* `` + +```playground + datum.y} + labelComponent={} +/> +``` + +### labels + +`type: array || function` + +`VictoryScatter` uses the standard `labels` prop to define labels for each point. [Read about it in more detail here](https://formidable.com/open-source/victory/docs/common-props#labels) + +```playground + `y: ${datum.y}`} +/> +``` + +### maxBubbleSize + +`type: number` + +The `maxBubbleSize` prop sets an upper limit for scaling data points in a bubble chart. If not given, this prop will be calculated based on the `width`, `height`, and `padding` of the component. + +For more information on bubble charts, see [`bubbleProperty`][] + +```jsx +maxBubbleSize={25} +``` +### maxDomain + +`type: number || { x: number, y: number }` + +`VictoryScatter` uses the standard `maxDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#maxDomain) + + +```playground + + + +``` + +### minBubbleSize + +`type: number` + +The `minBubbleSize` prop sets a lower limit for scaling data points in a bubble chart. If not given, this prop will be calculated based on the calculated `maxBubbleSize`. + +For more information on bubble charts, see [`bubbleProperty`][] + +```jsx +minBubbleSize={5} +``` + +### minDomain + +`type: number || { x: number, y: number }` + +`VictoryScatter` uses the standard `minDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#minDomain) + + +```playground + + + +``` + +### name + +`type: string` + +The `name` prop is used to reference a component instance when defining shared events. + +```jsx +name="series-1" +``` + +### origin + +`type: { x: number, y: number }` + +**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually** + +[Read about the `origin` prop in detail](https://formidable.com/open-source/victory/docs/common-props#origin) + +### padding + +`type: number || { top: number, bottom: number, left: number, right: number }` + +`VictoryScatter` uses the standard `padding` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#padding) + +*default (provided by default theme):* `padding={50}` + +```jsx +padding={{ top: 20, bottom: 60 }} +``` + +### polar + +`type: boolean` + +`VictoryScatter` uses the standard `polar` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#polar) + +```playground + + null} + /> + + + +``` + +### range + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually** + +[Read about the `range` prop in detail](https://formidable.com/open-source/victory/docs/common-props#range) + +### samples + +`type: integer` + +`VictoryScatter` uses the standard `samples` prop to generate data when plotting functions. [Read about it in more detail here](https://formidable.com/open-source/victory/docs/common-props#samples) + +*default:* `samples={50}` + +```jsx +samples={100} +``` + +### scale + +`type: scale || { x: scale, y: scale }` + +`VictoryScatter` uses the standard `scale` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#scale) +Options for scale include "linear", "time", "log", "sqrt" and the `d3-scale` functions that correspond to these options. + +*default:* `scale="linear"` + +```jsx +scale={{x: "linear", y: "log"}} +``` + +### sharedEvents + +**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.** + +### singleQuadrantDomainPadding + +`type: boolean || { x: boolean, y: boolean }` + +`VictoryScatter` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#singlequadrantdomainpadding) + +### size + +`type: number || function` + +The `size` prop determines how to scale each data point. This prop may also be given as a function of data. If `size` is not specified, it will default to 1. `size` may also be set directly on each data object. + +```playground + datum.y + 2 } + data={sampleData} +/> +``` + +### sortKey + +`type: string || integer || array[string] || function` + +`VictoryScatter` uses the standard `sortKey` prop to determine how data should be ordered. [Read about it in more detail here](https://formidable.com/open-source/victory/docs/common-props#sortkey) + +```jsx +sortKey="x" +``` + +### sortOrder + +`type: "ascending" || "descending"` + +The `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order. + +*default:* `sortOrder="ascending"` + +### standalone + +`type: boolean` + +`VictoryScatter` uses the standard `standalone` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#standalone) + +**note:** When `VictoryScatter` is nested within a component like `VictoryChart`, this prop will be set to `false` + +*default:* `standalone={true}` + +```playground + + + + +``` + + +### style + +`type: { parent: object, data: object, labels: object }` + +`VictoryScatter` uses the standard `style` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#style) + +*default (provided by default theme):* See [grayscale theme][] for more detail + +```playground + d.x === 3 ? "#000000" : "#c43a31", + stroke: (d) => d.x === 3 ? "#000000" : "#c43a31", + fillOpacity: 0.7, + strokeWidth: 3 + }, + labels: { + fontSize: 15, + fill: (d) => d.x === 3 ? "#000000" : "#c43a31" + } + }} + size={9} + data={sampleData} + labels={(datum) => datum.x} +/> +``` + +### symbol + +`type: function || options` + +The `symbol` prop determines which symbol should be drawn to represent data points. Options are: "circle", "diamond", "plus", "square", "star", "triangleDown", "triangleUp". This prop may also be given as a function of data. If no `symbol` prop is specified, a circle will be rendered. `symbol` may also be set directly on each data object. + +*default:* `symbol="circle"` + +```playground + datum.y > 3 ? "triangleUp" : "triangleDown"} + size={7} + data={sampleData} +/> +``` + +### theme + +`type: object` + +`VictoryScatter` uses the standard `theme` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#theme) + +See the [Themes Guide][] for information about creating custom themes. + +*default:* `theme={VictoryTheme.grayscale}` + +```jsx +theme={VictoryTheme.material} +``` + +### width + +`type: number` + +`VictoryScatter` uses the standard `width` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#width) + +*default (provided by default theme):* `width={450}` + +```jsx +width={400} +``` + +### x + +`type: string || integer || array[string] || function` + +`VictoryScatter` uses the standard `x` data accessor prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#x) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +x="employee.name" +``` + +### y + +`type: string || integer || array[string] || function` + + +`VictoryScatter` uses the standard `y` data accessor prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#y) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +y={(d) => d.value + d.error} +``` + +### y0 + +`type: string || integer || array[string] || function` + +**It is not common to set a `y0` prop with `VictoryScatter`, as baselines for `VictoryScatter` are only relevant for stacked charts.** [Read more about the `y0` prop here](https://formidable.com/open-source/victory/docs/common-props#y0) + +[Animations Guide]: https://formidable.com/open-source/victory/guides/animations +[`bubbleProperty`]: https://formidable.com/open-source/victory/docs/victory-scatter#bubbleproperty +[Data Accessors Guide]: https://formidable.com/open-source/victory/guides/data-accessors +[Custom Components Guide]: https://formidable.com/open-source/victory/guides/custom-components +[Events Guide]: https://formidable.com/open-source/victory/guides/events +[Themes Guide]: https://formidable.com/open-source/victory/guides/themes +[`VictoryChart`]: https://formidable.com/open-source/victory/docs/victory-chart +[grayscale theme]: https://github.com/FormidableLabs/victory-core/blob/master/src/victory-theme/grayscale.js diff --git a/packages/victory-selection-container/README.md b/packages/victory-selection-container/README.md new file mode 100644 index 000000000..b9576a6c9 --- /dev/null +++ b/packages/victory-selection-container/README.md @@ -0,0 +1,133 @@ +# VictorySelectionContainer + +`victory-selection-container@^30.0.0` exports `VictorySelectionContainer`, `selectionContainerMixin` and `SelectionHelpers` + +View these docs at https://formidable.com/open-source/victory/docs/victory-selection-container to see live examples. + +`VictorySelectionContainer` is used to enable selecting data points within a highlighted region. +Clicking and dragging will select an x-y region, and add the `active` prop to any elements +corresponding to data points within the region. Create a select-box control by tying the set of +selected data points to other elements, such as filtered table. + +`VictorySelectionContainer` is similar to `VictoryBrushContainer`. `VictoryBrushContainer` may be +used to identify the domain of a selected region, whereas `VictorySelectionContainer` may be used to +identify a list of data points within a selected region. `VictoryBrushContainer` will also create +persistent highlighted regions, whereas regions created by `VictorySelectionContainer` +disappear after `onMouseUp` events. + +`VictorySelectionContainer` may be used with any Victory component that works with an x-y coordinate +system, and should be added as the `containerComponent` of the top-level component. +However, the component that uses it must be standalone +(`standalone={true}`), which is the default for all top-level Victory components. + +```playground +}> + active ? "tomato" : "gray" } }} + /> + +``` + +## Props + +`VictorySelectionContainer` uses a superset of props used by [VictoryContainer][]. All props are optional. + +### activateSelectedData + +`type: boolean` + +When the `activateSelectedData` prop is set to true, the `active` prop will be set to true on all selected data points. When this prop is set to false, the `onSelection` and `onSelectionCleared` callbacks will still fire, but no mutations will occur via Victory's event system. + +*default:* `activateSelectedData={true}` + +### disable + +`type: boolean` + +When the `disable` prop is set to `true`, `VictorySelectionContainer` events will not fire. + +### onSelection + +`type: function` + +The `onSelection` prop accepts a function to be called whenever new data points are selected. The +function is called with the parameters `points` (an array of objects with `childName`, `eventKey`, +and `data`), `bounds` (an object with min / max arrays specified for `x` and `y`), and `props` (the props used by `VictorySelectionContainer`) + +*example:* `onSelection={(points, bounds, props) => handleSelection(points, bounds, props)}` + +### onSelectionCleared + +`type: function` + +The `onSelectionCleared` prop accepts a function to be called whenever the selection is cleared. The function is called with the props used by `VictorySelectionContainer` + +*example:* `onSelectionCleared={(props) => handleSelectionCleared(props)}` + +### selectionBlacklist + +`type: array[string]` + +The `selectionBlacklist` prop is used to exclude data from potential selections. This prop should be given as an array of strings that match the `name` prop of Victory component that should be excluded from selection. + +*example:* `selectionBlackList={["first-line", "second-line"]}` + + +### selectionComponent + +`type: element` + +The `selectionComponent` prop specifies the element to be rendered for the selected area. When +this prop is not specified, a `` will be rendered. This component will be supplied with the +following props: `x`, `y`, `width`, `height`, and `style`. + +*default:* `selectionComponent={}` + +### selectionDimension + +`type: "x" || "y"` + +When the `selectionDimension` prop is set, the selection will only take the given dimension into account. +For example, when `dimension` is set to "x", the selected area will cover the entire y domain +regardless of mouse position. + +*example:* `selectionDimension="x"` + +```playground + + } +> + active ? "tomato" : "gray" } }} + /> + +``` + +### selectionStyle + +`type: object` + +The `selectionStyle` prop should be given as an object of style attributes to be applied to the +`selectionComponent` + +*default:* `selectionStyle={{stroke: "transparent", fill: "black", fillOpacity: 0.1}}` + +```playground + + } +> + active ? "tomato" : "gray" } }} + /> + +``` +[VictoryContainer]: https://formidable.com/open-source/victory/docs/victory-container diff --git a/packages/victory-shared-events/README.md b/packages/victory-shared-events/README.md new file mode 100644 index 000000000..9e242e627 --- /dev/null +++ b/packages/victory-shared-events/README.md @@ -0,0 +1,219 @@ +# VictorySharedEvents + +`victory-shared-events@^30.0.0` exports `VictorySharedEvents` + +View these docs at https://formidable.com/open-source/victory/docs/victory-shared-events to see live examples. + +The `VictorySharedEvents` wrapper coordinates events between its child components. Specify a set of events on the `VictorySharedEvents` wrapper to target children. [VictoryChart][], [VictoryGroup][], and [VictoryStack][] all use `VictorySharedEvents`, but it may also be used on its own. + +## Props + +### children + +`type: array[element]` + +`VictorySharedEvents` renders an array of children with new `sharedEvents` props which define a set of events, and a shared state accessor. + +### events + +`type: array[object]` + +The `events` prop takes an array of event objects. Event objects are composed of a `target`, an `eventKey`, a `childName` and `eventHandlers`. Targets may be any valid style namespace for a given component, so "data" and "labels" are valid targets for this components like `VictoryBar`. `eventKey` may be given as a single value, or as an array of values to specify individual targets. If `eventKey` is not specified, the given `eventHandlers` will be attached to all elements of the specified `target` type. The `childName` property may be given as a string or an array of strings to target multiple children. The `eventHandlers` object should be given as an object whose keys are standard event names (i.e. `onClick`) and whose values are event callbacks. The return value of an event handler is used to modify elements. The return value should be given as an object or an array of objects with optional `target`, `childName` and `eventKey` keys for specifying the element(s) to be modified, and a `mutation` key whose value is a function. The `target` and `eventKey` keys will default to those corresponding to the element the event handler was attached to. The `mutation` function will be called with the calculated props for each element that should be modified (i.e. a bar label), and the object returned from the mutation function will override the props of that element via object assignment. + +*examples:* + +```playground + + { + return [{ + childName: ["pie", "bar"], + mutation: (props) => { + return { + style: Object.assign({}, props.style, {fill: "tomato"}) + }; + } + }]; + }, + onMouseOut: () => { + return [{ + childName: ["pie", "bar"], + mutation: () => { + return null; + } + }]; + } + } + }]} + > + + } + /> + + + + + + +``` + +### eventKey + +`type: string || integer || array[string] || function` + +The `eventKey` prop is used to assign eventKeys to data. This prop operates identically to the `x` and `y` data accessor props. By default, the eventKey of each datum will be equal to its index in the data array. `eventKey` may also be defined directly on each data object. + +### externalEventMutations + +`type: array[object]` + +Occasionally is it necessary to trigger events in Victory's event system from some external element such as a button or a form field. Use the `externalEventMutation` prop to specify a set of mutations to apply to a given chart. The `externalEventMutations` should be given in the following form: + +```jsx +externalEventMutations: PropTypes.arrayOf(PropTypes.shape({ + callback: PropTypes.function, + childName: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.array + ]), + eventKey: PropTypes.oneOfType([ + PropTypes.array, + CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]), + PropTypes.string + ]), + mutation: PropTypes.function, + target: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.array + ]) +})) +``` + +The `target`, `eventKey`, and `childName` (when applicable) must always be specified. The `mutation` function will be called with the current props of the element specified by the `target`, `eventKey` and `childName` provided. The mutation function should return a mutation object for that element. The `callback` prop should be used to clear the `externalEventMutations` prop once the mutation has been applied. Clearing `externalEventMutations` is crucial for charts that animate. + +```playground_norender +class App extends React.Component { + constructor() { + super(); + this.state = { + externalMutations: undefined + }; + } + + removeMutation() { + this.setState({ + externalMutations: undefined + }); + } + + clearClicks() { + this.setState({ + externalMutations: [ + { + childName: ["bar", "pie"], + target: ["data"], + eventKey: "all", + mutation: () => ({ style: undefined }), + callback: this.removeMutation.bind(this) + } + ] + }); + } + + render() { + const buttonStyle = { + backgroundColor: "black", + color: "white", + padding: "10px", + marginTop: "10px" + }; + return ( +
+ + + { + return [{ + childName: ["pie", "bar"], + mutation: (props) => { + return { + style: Object.assign({}, props.style, {fill: "tomato"}) + }; + } + }]; + } + } + }]} + > + + } + /> + + + + + + +
+ ) + } +} + +ReactDOM.render(, mountNode) +``` + +*Note* External mutations are applied to the same state object that is used to control events in Victory, so depending on the order in which they are triggered, external event mutations may override mutations caused by internal Victory events or vice versa. + +[VictoryChart]: https://formidable.com/open-source/victory/docs/victory-chart +[VictoryGroup]: https://formidable.com/open-source/victory/docs/victory-group +[VictoryStack]: https://formidable.com/open-source/victory/docs/victory-stack diff --git a/packages/victory-stack/README.md b/packages/victory-stack/README.md new file mode 100644 index 000000000..99a6d1d3d --- /dev/null +++ b/packages/victory-stack/README.md @@ -0,0 +1,402 @@ +# VictoryStack + +`victory-stack@^30.0.0` exports `VictoryStack` + +View these docs at https://formidable.com/open-source/victory/docs/victory-stack to see live examples. + +`VictoryStack` is a wrapper component that renders a given set of children in a stacked layout. Like other wrapper components, `VictoryStack` also reconciles the domain and layout for all its children, and coordinates animations and shared events. + +`VictoryStack` should not be used with `VictoryAxis` children + +`VictoryStack` works with: +[VictoryArea][], [VictoryBar][], [VictoryCandlestick][], [VictoryErrorBar][], [VictoryGroup][],[VictoryLine][], and [VictoryScatter][] + +```playground + + + + + +``` + +## Props + +### animate + +`type: boolean || object` + +`VictoryStack` uses the standard `animate` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#animate) + +See the [Animations Guide][] for more detail on animations and transitions + +**note: `VictoryStack` controls the `animate` prop of its children when set** + +```jsx +animate={{ + duration: 2000, + onLoad: { duration: 1000 } +}} +``` + +### categories + +`type: array[string] || { x: array[string], y: array[string] }` + +`VictoryStack` uses the standard `categories` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#categories) + +**note: When this prop is set, `VictoryGroup` controls the `categories` prop of its children.** + +```jsx +categories={["dogs", "cats", "mice"]} +``` + +### children + +`type: element || array[element]` + +`VictoryStack` works with any combination of the following children: [VictoryArea][], [VictoryBar][], [VictoryCandlestick][], [VictoryErrorBar][], [VictoryGroup][], [VictoryLine][], [VictoryScatter][], [VictoryStack][], and [VictoryVoronoi][]. Children supplied to `VictoryGroup` will be cloned and rendered with new props so that all children share common props such as `domain` and `scale`. + + +### colorScale + +`type: array[string]` + +The `colorScale` prop is an optional prop that defines a color scale to be applied to the children of `VictoryStack`. This prop should be given as an array of CSS colors, or as a string corresponding to one of the built in color scales: "grayscale", "qualitative", "heatmap", "warm", "cool", "red", "green", "blue". `VictoryGroup` will assign colors to its children by index, unless they are explicitly specified in styles. Colors will repeat when there are more children than colors in the provided `colorScale`. + +*default (provided by default theme):* See [grayscale theme][] for more detail + +```playground + + + + + +``` + + +### containerComponent + +`type: element` + +`VictoryStack` uses the standard `containerComponent` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#containercomponent) + +```jsx +containerComponent={} +``` +### domain + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +`VictoryStack` uses the standard `domain` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#domain) + +**note: `VictoryStack` controls the `domain` prop of its children.** + +```jsx +domain={{x: [0, 100], y: [0, 1]}} +``` + +### domainPadding + +`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }` + +`VictoryStack` uses the standard `domainPadding` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#domainpadding) + +**note: `VictoryStack` controls the `domainPadding` prop of its children.** + +```jsx +domainPadding={{x: [10, -10], y: 5}} +``` + +### eventKey + +`type: string || integer || array[string] || function` + +`VictoryStack` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](https://formidable.com/open-source/victory/docs/common-props#eventkey) + +```jsx +eventKey="x" +``` + +### events + +`type: array[object]` + +`VictoryStack` uses the standard `events` prop. [Read about it in more detail here](https://formidable.com/open-source/victory/docs/common-props#events) + +See the [Events Guide][] for more information on defining events. + +**Note: `VictoryStack` coordinates events between children using the `VictorySharedEvents` and the `sharedEvents` prop** + +```playground + { + return [ + { + childName: "area-2", + target: "data", + mutation: (props) => ({ style: Object.assign({}, props.style, { fill: "gold" }) }) + }, { + childName: "area-3", + target: "data", + mutation: (props) => ({ style: Object.assign({}, props.style, { fill: "orange" }) }) + }, { + childName: "area-4", + target: "data", + mutation: (props) => ({ style: Object.assign({}, props.style, { fill: "red" }) }) + } + ]; + } + } + }]} +> + + + + + +``` + +### externalEventMutations + +`type: array[object]` + +`VictoryStack` uses the standard `externalEventMutations` prop. [Read about it in detailhttps://formidable.com/open-source/victory](/docs/common-props#externalEventsMutations) + +### groupComponent + +`type: element` + +`VictoryStack` uses the standard `groupComponent` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#groupcomponent) + +*default:* `` + +```jsx +groupComponent={} +``` +### height + +`type: number` + +`VictoryStack` uses the standard `height` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#height) + +*default (provided by default theme):* `height={300}` + +```jsx +height={400} +``` + +### horizontal + +`type: boolean` + +The `horizontal` prop determines whether the bars of any `VictoryBar` children supplied to `VictoryStack` will be laid out vertically or horizontally. The bars will be vertical if this prop is false or unspecified, or horizontal if the prop is set to true. + +### labelComponent + +`type: element` + +The `labelComponent` prop takes a component instance which will be used to render labels for each stack. The new element created from the passed `labelComponent` will be supplied with the following props: `x`, `y`, `index`, `datum`, `verticalAnchor`, `textAnchor`, `angle`, `style`, `text`, and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `labelComponent` is omitted, a new [VictoryLabel][] will be created with the props described above. + +*default:* `` + +```jsx +labelComponent={} +``` + +### labels + +`type: array || function` + +The `labels` prop defines labels that will appear above each stack of data. This prop should be given as an array of values or as a function of data. If given as an array, the number of elements in the array should be equal to the length of the data array. Group labels will appear above the center series of the group, and will override the `labels` prop of child components. Omit this prop, and set `labels` props on children for individual labels. + +```jsx +labels={["spring", "summer", "fall", "winter"]}`, `labels={(datum) => datum.title} +``` + +### maxDomain + +`type: number || { x: number, y: number }` + +`VictoryStack` uses the standard `maxDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#maxDomain) + +### minDomain + +`type: number || { x: number, y: number }` + +`VictoryStack` uses the standard `minDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#minDomain) + +### name + +`type: string` + +The `name` prop is used to reference a component instance when defining shared events. + +```jsx +name="series-1" +``` + +### origin + +`type: { x: number, y: number }` + +**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually** + +[Read about the `origin` prop in detailhttps://formidable.com/open-source/victory](/docs/common-props#origin) + + +### padding + +`type: number || { top: number, bottom: number, left: number, right: number }` + +`VictoryStack` uses the standard `padding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#padding) + +*default (provided by default theme):* `padding={50}` + +```jsx +padding={{ top: 20, bottom: 60 }} +``` + +### polar + +`type: boolean` + +`VictoryStack` uses the standard `polar` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#polar) + +### range + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually** + +[Read about the `range` prop in detailhttps://formidable.com/open-source/victory](/docs/common-props#range) + +### scale + +`type: scale || { x: scale, y: scale }` + +`VictoryStack` uses the standard `scale` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#scale) +Options for scale include "linear", "time", "log", "sqrt" and the `d3-scale` functions that correspond to these options. + +**note: `VictoryStack` controls the `scale` prop of its children.** + +*default:* `scale="linear"` + +```jsx +scale={{x: "linear", y: "log"}} +``` + +### sharedEvents + +**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.** + +### singleQuadrantDomainPadding + +`type: boolean || { x: boolean, y: boolean }` + +`VictoryStack` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#singlequadrantdomainpadding) + +### standalone + +`type: boolean` + +`VictoryStack` uses the standard `standalone` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#standalone) + +**note:** When `VictoryGroup` is nested within a component like `VictoryChart`, this prop will be set to `false` + +*default:* `standalone={true}` + +### style + +`type: { parent: object, data: object, labels: object }` + +`VictoryStack` uses the standard `style` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#style) + +Styles on children of `VictoryGroup` will override styles set on the `VictoryGroup` component. + +*default (provided by default theme):* See [grayscale theme][] for more detail + +```playground + + + + + +``` + +### theme + +`type: object` + +`VictoryStack` uses the standard `theme` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#theme) + +See the [Themes Guide][] for information about creating custom themes. + +*default:* `theme={VictoryTheme.grayscale}` + +```jsx +theme={VictoryTheme.material} +``` + +### width + +`type: number` + +`VictoryStack` uses the standard `width` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#width) + +*default (provided by default theme):* `width={450}` + +```jsx +width={400} +``` + +### xOffset + +`type: number` + +The `xOffset` prop is used for grouping stacks of bars. This prop will be set by the `VictoryGroup` component wrapper, or can be set manually. + + + +[Animations Guide]: https://formidable.com/open-source/victory/guides/animations +[Events Guide]: https://formidable.com/open-source/victory/guides/events +[Themes Guide]: https://formidable.com/open-source/victory/guides/themes +[grayscale theme]: https://github.com/FormidableLabs/victory-core/blob/master/src/victory-theme/grayscale.js +[VictoryArea]: https://formidable.com/open-source/victory/docs/victory-area +[VictoryBar]: https://formidable.com/open-source/victory/docs/victory-bar +[VictoryCandlestick]: https://formidable.com/open-source/victory/docs/victory-candlestick +[VictoryErrorBar]: https://formidable.com/open-source/victory/docs/victory-errorbar +[VictoryGroup]: https://formidable.com/open-source/victory/docs/victory-group +[VictoryLine]: https://formidable.com/open-source/victory/docs/victory-line +[VictoryScatter]: https://formidable.com/open-source/victory/docs/victory-scatter +[VictoryStack]: https://formidable.com/open-source/victory/docs/victory-stack +[VictoryVoronoi]: https://formidable.com/open-source/victory/docs/victory-voronoi +[VictoryLabel]: https://formidable.com/open-source/victory/docs/victory-label diff --git a/packages/victory-tooltip/README.md b/packages/victory-tooltip/README.md new file mode 100644 index 000000000..75c619043 --- /dev/null +++ b/packages/victory-tooltip/README.md @@ -0,0 +1,182 @@ +# VictoryTooltip + +`victory-tooltip@^30.0.0` exports `VictoryTooltip` and `Flyout` components + +View these docs at https://formidable.com/open-source/victory/docs/victory-tooltip to see live examples. + +`VictoryTooltip` renders a tooltip component with a set of default events. When `VictoryTooltip` is used as a label component for any Victory component that renders data, it will attach events to rendered data components that will activate the tooltip when hovered. `VictoryTooltip` renders text as well as a configurable [Flyout][] container. + +## Props + +### active + +`type: boolean` + +The `active` prop specifies whether the tooltip component should be displayed. + +### activateData + +`type: boolean` + +When true, tooltip events will set the `active` prop on both data and label elements. + +*default:* `activateData={false}` + +### angle + +`type: number` + +The `angle` prop specifies the angle to rotate the tooltip around its origin point. + +### cornerRadius + +`type: number || function` + +The `cornerRadius` prop determines corner radius of the flyout container. This prop may be given as a positive number or a function of datum. + +### data + +`type: array[object]` + +Victory components can pass a `data` prop to their label component. This can be useful in custom components that need to make use of the entire dataset. + +### datum + +`type: object` + +Victory components can pass a `datum` prop to their label component. This can +be used to calculate functional styles, and determine text. + +### dx + +`type: number || function` + +The `dx` prop defines a horizontal shift from the `x` coordinate. + +### dy + +`type: number || function` + +The `dy` prop defines a vertical shift from the `y` coordinate. + +### events + +`type: object` + +The `events` prop attaches arbitrary event handlers to the label component. This prop should be given as an object of event names and corresponding event handlers. When events are provided via Victory's event system, event handlers will be called with the event, the props of the component is attached to, and an eventKey. + +*examples:* `events={{onClick: (evt) => alert("x: " + evt.clientX)}}` + +### flyoutStyle + +`type: object` + +The `style` prop applies SVG style properties to the rendered flyout container. These props will be passed to the `flyoutComponent`. + +### flyoutComponent + +`type: element` + +The `flyoutComponent` prop takes a component instance which will be used to create the flyout path for each tooltip. The new element created from the passed `flyoutComponent` will be supplied with the following properties: x, y, dx, dy, index, datum, cornerRadius, pointerLength, pointerWidth, width, height, orientation, style, and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `flyoutComponent` is omitted, a default [Flyout][] component will be created with props described above. + +*examples:* `flyoutComponent={}`, `flyoutComponent={}` + + +*default:* `` + +### groupComponent + +`type: element` + +The `groupComponent` prop takes a component instance which will be used to create group elements for use within container elements. This prop defaults to a `` tag. + +*default:* `groupComponent={}` + +### height + +`type: number || function` + +The `height` prop defines the height of the tooltip flyout. This prop may be given as a positive number or a function of datum. If this prop is not set, `height` will be determined based on an [approximate text size][] calculated from the `text` and `style` props provided to `VictoryTooltip`. + +### horizontal + +`type: boolean` + +The `horizontal` prop determines whether to plot the flyouts to the left / right of the (x, y) coordinate rather than top / bottom. This is useful when an orientation prop is not provided, and data will determine the default orientation. _i.e._ negative values result in a left orientation and positive values will result in a right orientation by default. + +### index + +`type: number || string` + +The `index` prop represents the index of the datum in the data array. + +### labelComponent + +`type: element` + +The `labelComponent` prop takes a component instance which will be used to render each tooltip label. The new element created from the passed `labelComponent` will be supplied with the following properties: x, y, index, datum, verticalAnchor, textAnchor, style, text, and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `labelComponent` is omitted, a new [VictoryLabel][] will be created with the props described above. + +*examples:* `labelComponent={}`, `labelComponent={}` + +*default:* `` + +### orientation + +`type: function || "top" || "bottom" || "left" || "right"` + +The `orientation` prop determines which side of the (x, y) coordinate the tooltip should be rendered on. This prop can be given as "top", "bottom", "left", "right", or as a function of datum that returns one of these values. If this prop is not provided it will be determined from the sign of the `datum`, and the value of the `horizontal` prop. + +### pointerLength + +`type: number || function` + +The `pointerLength` prop determines the length of the triangular pointer extending from the flyout. This prop may be given as a positive number or a function of datum. + +### pointerWidth + +`type: number || function` + +The `pointerWidth` prop determines the width of the base of the triangular pointer extending from the flyout. This prop may be given as a positive number or a function of datum. + +### renderInPortal + +`type: boolean` + +When `renderInPortal` is true, rendered tooltips will be wrapped in [VictoryPortal][] and rendered within the [Portal][] element within [VictoryContainer][]. _Note:_ This prop should _not_ be set to true when using a custom container element. + +### style + +`type: object` + +The `style` prop applies SVG style properties to the rendered `` element. + +### text + +`type: string || number || function || array[string || number]` + +The `text` prop defines the text `VictoryTooltip` will render. The `text` prop may be given as a string, number, or function of `datum`. When [VictoryLabel][] is used as the `labelComponent`, strings may include newline characters, which VictoryLabel will split in to separate `` elements. + +### width + +`type: number || function` + +The `width` prop defines the width of the tooltip flyout. This prop may be given as a positive number or a function of datum. If this prop is not set, `width` will be determined based on an [approximate text size][] calculated from the `text` and `style` props provided to `VictoryTooltip`. + +### x + +`type: number` + +The `x` prop defines the x coordinate to use as a basis for positioning the tooltip element. + +### y + +`type: number` + +The `y` prop defines the y coordinate to use as a basis for positioning the tooltip element. + +[Flyout]: https://formidable.com/open-source/victory/docs/victory-primitives#flyout +[VictoryLabel]: https://formidable.com/open-source/victory/docs/victory-label +[VictoryPortal]: https://formidable.com/open-source/victory/docs/victory-portal +[VictoryContainer]: https://formidable.com/open-source/victory/docs/victory-container +[Portal]: https://github.com/FormidableLabs/victory-core/blob/master/src/victory-portal/portal.js +[approximate text size]: https://github.com/FormidableLabs/victory-core/blob/master/src/victory-util/textsize.js diff --git a/packages/victory-voronoi-container/README.md b/packages/victory-voronoi-container/README.md new file mode 100644 index 000000000..4bf082914 --- /dev/null +++ b/packages/victory-voronoi-container/README.md @@ -0,0 +1,184 @@ +# VictoryVoronoiContainer + +`victory-voronoi-container@^30.0.0` exports `VictoryVoronoiContainer`, `voronoiContainerMixin` and `VoronoiHelpers` + +View these docs at https://formidable.com/open-source/victory/docs/victory-voronoi-container to see live examples. + +`VictoryVoronoiContainer` adds the ability to associate a mouse position with the data point(s) +closest to it. When this container is added to a chart, changes in mouse position will add the `active` +prop to data and label components closest to the current mouse position. The closeness of data +points to a given position is determined by calculating a [voronoi diagram][] based on the data of +every child `VictoryVoronoiContainer` renders. This container is useful for adding hover interactions, +like tooltips, to small data points, or charts with dense or overlapping data. See +[this example][] to learn how to use `VictoryVoronoiContainer` with tooltips. + +`VictoryVoronoiContainer` may be used with any Victory component that works with an x-y coordinate +system, and should be added as the `containerComponent` of the top-level component. +However, the component that uses it must be standalone +(`standalone={true}`), which is the default for all top-level Victory components. + +```playground + `${round(d.x, 2)}, ${round(d.y, 2)}`} + /> + } +> + Math.sin(2 * Math.PI * datum.x)} + /> + +``` + +## Props + +`VictoryVoronoiContainer` uses a superset of props used by [VictoryContainer][]. All props are optional. + +### activateData + +`type: boolean` + +When the `activateData` prop is set to true, the `active` prop will be set to true on all data components within a voronoi area. When this prop is set to false, the `onActivated` and `onDeactivated` callbacks will still fire, but no mutations to data components will occur via Victory's event system. + +*default:* `activateData={true}` + +### activateLabels + +`type: boolean` + +When the `activateLabels` prop is set to true, the `active` prop will be set to true on all labels corresponding to points within a voronoi area. When this prop is set to false, the `onActivated` and `onDeactivated` callbacks will still fire, but no mutations to label components will occur via Victory's event system. Labels defined directly on `VictoryVoronoiContainer` via the `labels` prop will still appear when this prop is set to false. + +*default:* `activateLabels={true}` + +### disable + +`type: boolean` + +When the `disable` prop is set to `true`, `VictoryVoronoiContainer` events will not fire. + +### labels + +`type: function` + +When a `labels` prop is provided to `VictoryVoronoiContainer` it will render a label component +rather than activating labels on the child components it renders. This is useful for creating multi- +point tooltips. This prop should be given as a function which will be called once for each active point. The `labels` function will be called with the arguments `point`, `index`, and `points`, where `point` refers to a single active point, `index` refers to the position of that point in the array of active points, and `points` is an array of all active points. + +*example:* `labels={(point) => "y: " + point.y}` + +### labelComponent + +`type: element` + +The `labelComponent` prop specified the component that will be rendered when `labels` are defined +on `VictoryVoronoiContainer`. If the `labels` prop is omitted, no label component will be rendered. + +*default:* `labelComponent={}` + +### onActivated + +`type: function` + +The `onActivated` prop accepts a function to be called whenever new data points are activated. +The function is called with the parameters `points` (an array of active data objects) and `props` (the props used by `VictoryVoronoiContainer`). + +*example:* `onActivated={(points, props) => filterList(points, props)}` + +### onDeactivated + +`type: function` + +The `onDeactivated` prop accepts a function to be called whenever points are deactivated. +The function is called with the parameters `points` (an array of the newly-deactivated data objects) and `props` (the props used by `VictoryVoronoiContainer`). + +*example:* `onDeactivated={(points, props) => removeFromList(points, props)}` + +### radius + +`type: number` + +When the `radius` prop is set, the voronoi areas associated with each data point will be no larger +than the given radius. This prop should be given as a number. + +*example:* `radius={25}` + +### voronoiBlacklist + +`type: array[string]` + +The `voronoiBlacklist` prop is used to specify a list of components to ignore when calculating a shared voronoi diagram. Components with a `name` prop matching an element in the `voronoiBlacklist` array will be ignored by `VictoryVoronoiContainer`. Ignored components will never be flagged as active, and will not contribute date to shared tooltips or labels. + +*example:* `voronoiBlacklist={["redPoints"]}` + + +```playground + `y: ${d.y}`} + /> + } +> + + + +``` + +### voronoiDimension + +`type: "x" || "y"` + +When the `voronoiDimension` prop is set, voronoi selection will only take the given dimension into account. +For example, when `dimension` is set to "x", all data points matching a particular x mouse position +will be activated regardless of y value. When this prop is not given, voronoi selection is +determined by both x any y values. + +*example:* `voronoiDimension="x"` + +```playground + `y: ${d.y}`} + /> + } +> + + + +``` + +### voronoiPadding + +`type: number` + +When the `voronoiPadding` prop is given, the area of the chart that will trigger voronoi events is +reduced by the given padding on every side. By default, no padding is applied, and the entire range +of a given chart may trigger voronoi events. This prop should be given as a number. + +*example:* `voronoiPadding={5}` + +[VictoryContainer]: https://formidable.com/open-source/victory/docs/victory-container +[voronoi diagram]: https://github.com/d3/d3-voronoi +[this example]: https://formidable.com/open-source/victory/gallery/voronoi-tooltips-grouped diff --git a/packages/victory-voronoi/README.md b/packages/victory-voronoi/README.md new file mode 100644 index 000000000..bd30b3c10 --- /dev/null +++ b/packages/victory-voronoi/README.md @@ -0,0 +1,467 @@ +# VictoryVoronoi + +`victory-voronoi@^30.0.0` exports `VictoryVoronoi` and `Voronoi` components + +View these docs at https://formidable.com/open-source/victory/docs/victory-voronoi to see live examples. + +`VictoryVoronoi` renders a dataset as a series polygons optimized for the nearest data point. `VictoryVoronoi` can be composed with [`VictoryChart`][] to create voronoi overlays for charts, which are useful for attaching events to pieces of data that are otherwise difficult to interact with, usually due to their size. + +```playground + + + +``` + +## Props + +### animate + +`type: boolean || object` + +`VictoryVoronoi` uses the standard `animate` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#animate) + +See the [Animations Guide][] for more detail on animations and transitions + +```jsx +animate={{ + duration: 2000, + onLoad: { duration: 1000 } +}} +``` + +### categories + +`type: array[string] || { x: array[string], y: array[string] }` + +`VictoryVoronoi` uses the standard `categories` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#categories) + +```jsx +categories={{ x: ["dogs", "cats", "mice"] }} +``` + +### containerComponent + +`type: element` + +`VictoryVoronoi` uses the standard `containerComponent` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#containercomponent) + +```jsx +containerComponent={} +``` + +### data + +`type: array[object]` + +`VictoryVoronoi` uses the standard `data` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#data) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```playground + +``` + +### dataComponent + +`type: element` + +`VictoryVoronoi` uses the standard `dataComponent` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#datacomponent) + +`VictoryVoronoi` supplies the following props to its `dataComponent`: `data`, `datum`, `index`, `origin`, `polar`, `polygon`, `scale`, `size`, `style`, `x`, `y` + +See the [Custom Components Guide][] for more detail on creating your own `dataComponents` + +*default:* `` + +```jsx +dataComponent={} +``` + +### domain + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +`VictoryVoronoi` uses the standard `domain` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#domain) + +```jsx +domain={{x: [0, 100], y: [0, 1]}} +``` + +### domainPadding + +`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }` + +`VictoryVoronoi` uses the standard `domainPadding` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#domainpadding) + +```jsx +domainPadding={{x: [10, -10], y: 5}} +``` + +### eventKey + +`type: string || integer || array[string] || function` + +`VictoryVoronoi` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](https://formidable.com/open-source/victory/docs/common-props#eventkey) + +```jsx +eventKey="x" +``` + +### events + +`type: array[object]` + +`VictoryVoronoi` uses the standard `events` prop. [Read about it in more detail here](https://formidable.com/open-source/victory/docs/common-props#events) + +See the [Events Guide][] for more information on defining events. + +```playground +
+

Click Me

+ { + return [{ + target: "data", + mutation: (props) => { + const fill = props.style && props.style.fill; + return fill === "black" ? null : { style: { fill: "black" } }; + } + }]; + } + } + }]} + data={sampleData} + /> +
+``` + +### externalEventMutations + +`type: array[object]` + +`VictoryVoronoi` uses the standard `externalEventMutations` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#externalEventsMutations) + +### groupComponent + +`type: element` + +`VictoryVoronoi` uses the standard `groupComponent` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#groupcomponent) + +*default:* `` + +```jsx +groupComponent={} +``` + +### height + +`type: number` + +`VictoryVoronoi` uses the standard `height` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#height) + +*default (provided by default theme):* `height={300}` + +```jsx +height={400} +``` + +### labelComponent + +`type: element` + +`VictoryVoronoi` uses the standard `labelComponent` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#labelcomponent) + +*default:* `` + +```playground + datum.y} + labelComponent={} +/> +``` + +### labels + +`type: array || function` + +`VictoryVoronoi` uses the standard `labels` prop to define labels for each point. [Read about it in more detail here](https://formidable.com/open-source/victory/docs/common-props#labels) + +```playground + `y: ${datum.y}`} +/> +``` + +### maxDomain + +`type: number || { x: number, y: number }` + +`VictoryVoronoi` uses the standard `maxDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#maxDomain) + + +### minDomain + +`type: number || { x: number, y: number }` + +`VictoryVoronoi` uses the standard `minDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#minDomain) + +### name + +`type: string` + +The `name` prop is used to reference a component instance when defining shared events. + +```jsx +name="series-1" +``` + +### origin + +`type: { x: number, y: number }` + +**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually** + +[Read about the `origin` prop in detail](https://formidable.com/open-source/victory/docs/common-props#origin) + +### padding + +`type: number || { top: number, bottom: number, left: number, right: number }` + +`VictoryVoronoi` uses the standard `padding` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#padding) + +*default (provided by default theme):* `padding={50}` + +```jsx +padding={{ top: 20, bottom: 60 }} +``` + +### polar + +`type: boolean` + +`VictoryVoronoi` uses the standard `polar` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#polar) + +**Note:** Polar Charts are not yet supported for `VictoryVoronoi` + +### range + +`type: array[low, high] || { x: [low, high], y: [low, high] }` + +**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually** + +[Read about the `range` prop in detail](https://formidable.com/open-source/victory/docs/common-props#range) + +### samples + +`type: number` + +`VictoryVoronoi` uses the standard `samples` prop to generate data when plotting functions. [Read about it in more detail here](https://formidable.com/open-source/victory/docs/common-props#samples) + +*default:* `samples={50}` + +```jsx +samples={100} +``` + +### scale + +`type: scale || { x: scale, y: scale }` + +`VictoryVoronoi` uses the standard `scale` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#scale) +Options for scale include "linear", "time", "log", "sqrt" and the `d3-scale` functions that correspond to these options. + +*default:* `scale="linear"` + +```jsx +scale={{x: "linear", y: "log"}} +``` + +### sharedEvents + +**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.** + +### singleQuadrantDomainPadding + +`type: boolean || { x: boolean, y: boolean }` + +`VictoryVoronoi` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#singlequadrantdomainpadding) + +### size + +`type: number` + +The size prop determines the maximum size of each voronoi area. When this prop is given, a circular area of the specified size will be rendered, and clipped where it would overlap with other voronoi areas. If this prop is not given, the entire voronoi area will be used. + +```playground + +``` + +### sortKey + +`type: string || integer || array[string] || function` + +`VictoryVoronoi` uses the standard `sortKey` prop to determine how data should be ordered. [Read about it in more detail here](https://formidable.com/open-source/victory/docs/common-props#sortkey) + +```jsx +sortKey="x" +``` + +### sortOrder + +`type: "ascending" || "descending"` + +The `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order. + +*default:* `sortOrder="ascending"` + +### standalone + +`type: boolean` + +`VictoryVoronoi` uses the standard `standalone` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#standalone) + +**note:** When `VictoryVoronoi` is nested within a component like `VictoryChart`, this prop will be set to `false` + +*default:* `standalone={true}` + +```playground + + + + +``` + + +### style + +`type: { parent: object, data: object, labels: object }` + +`VictoryVoronoi` uses the standard `style` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#style) + +*default (provided by default theme):* See [grayscale theme][] for more detail + +```playground + datum.x} +/> +``` + +### theme + +`type: object` + +`VictoryVoronoi` uses the standard `theme` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#theme) + +See the [Themes Guide][] for information about creating custom themes. + +*default:* `theme={VictoryTheme.grayscale}` + +```jsx +theme={VictoryTheme.material} +``` + +### width + +`type: number` + +`VictoryVoronoi` uses the standard `width` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#width) + +*default (provided by default theme):* `width={450}` + +```jsx +width={400} +``` + +### x + +`type: string || integer || array[string] || function` + +`VictoryVoronoi` uses the standard `x` data accessor prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#x) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +x="employee.name" +``` + +### y + +`type: string || integer || array[string] || function` + +`VictoryVoronoi` uses the standard `y` data accessor prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#y) + +See the [Data Accessors Guide][] for more detail on formatting and processing data. + +```jsx +y={(d) => d.value + d.error} +``` + +### y0 + +`type: string || integer || array[string] || function` + +**It is not common to set a `y0` prop with `VictoryVoronoi`, as baselines for `VictoryVoronoi` are only relevant for stacked charts.** [Read more about the `y0` prop here](https://formidable.com/open-source/victory/docs/common-props#y0) + +[Animations Guide]: https://formidable.com/open-source/victory/guides/animations +[Data Accessors Guide]: https://formidable.com/open-source/victory/guides/data-accessors +[Custom Components Guide]: https://formidable.com/open-source/victory/guides/custom-components +[Events Guide]: https://formidable.com/open-source/victory/guides/events +[Themes Guide]: https://formidable.com/open-source/victory/guides/themes +[`VictoryChart`]: https://formidable.com/open-source/victory/docs/victory-chart +[grayscale theme]: https://github.com/FormidableLabs/victory-core/blob/master/src/victory-theme/grayscale.js diff --git a/packages/victory-zoom-container/README.md b/packages/victory-zoom-container/README.md new file mode 100644 index 000000000..e60c62bf3 --- /dev/null +++ b/packages/victory-zoom-container/README.md @@ -0,0 +1,111 @@ +# VictoryZoomContainer + +`victory-zoom-container@^30.0.0` exports `VictoryZoomContainer`, `zoomContainerMixin`, `ZoomHelpers`, and `RawZoomHelpers` + +View these docs at https://formidable.com/open-source/victory/docs/victory-zoom-container to see live examples. + +`VictoryZoomContainer` provides pan and zoom behavior for any Victory component that works with an +x, y axis. Zoom events are controlled by scrolling, and panning events are controlled by dragging. +[See an example of a zoomable chart][] + +`VictoryZoomContainer` may be used with any Victory component that works with an x-y coordinate +system, and should be added as the `containerComponent` of the top-level component. However, the component that uses it must be standalone +(`standalone={true}`), which is the default for all top-level Victory components. + +```playground + + } +> + Math.sin(2 * Math.PI * datum.x)} + /> + +``` + +## Props + +`VictoryZoomContainer` uses a superset of props used by [VictoryContainer][]. All props are optional. + +### allowPan + +`type: boolean` + +The optional `allowPan` prop accepts a boolean that enables the panning functionality. Zooming will still be enabled when the `allowPan` prop is set to false. + +*default:* `allowPan={true}` + +### allowZoom + +`type: boolean` + +The optional `allowZoom` prop accepts a boolean that enables the zoom functionality. Panning will still be enabled when the `allowZoom` prop is set to false. + +*default:* `allowZoom={true}` + +### clipContainerComponent + +`type: element` + +`VictoryZoomContainer` works by clipping data outside of a given domain. `VictoryZoomContainer` uses `VictoryClipContainer` by default. This prop should not be replaced with a custom component, but you may want to set props on `VictoryClipContainer`, such as `clipPadding` + +*example:* `clipContainerComponent={}` + +### disable + +`type: boolean` + +When the `disable` prop is set to `true`, `VictoryZoomContainer` events will not fire. + +### downsample + +`type: number || boolean` + +The `downsample` prop limits the number of points that will be displayed. This prop may be given as a boolean or a number corresponding to maximum number of points. When given as a boolean, the maximum number of points that will be plotted is 150. + +### minimumZoom + +`type: { x: number, y: number }` + +The `minimumZoom` prop sets a minimum domain extent for the zoomed chart. When the difference between +the maximum and minimum of a zoomed domain is equal to the `minimumZoom` in either dimension, the +component will stop responding to events that would normally trigger zooming in. Zooming out and +panning will still be enabled. When this prop is not specified, the default minimum zoom will +cover 1 / 1000th of the original domain. This prop should be given as an object with numeric values +for x and y. + +*example:* `minimumZoom={{x: 1, y: 0.01}}` + +### onZoomDomainChange + +`type: function` + +The optional `onZoomDomainChange` prop accepts an function to be called on each update to the visible domain. The function accepts the parameters `domain` (the updated domain) and `props` (the props used by `VictoryZoomContainer`). + +*example:* `onZoomDomainChange={(domain, props) => handleDomainChange(domain, props)}` + +### zoomDomain + +`type: { x: [low, high], y: [low, high] }` + +The `zoomDomain` prop describes the zoomed state. This prop is an object that +specifies separate arrays for x and y. Each array is a tuple that describes the minimum and maximum +values to render. If this prop is not provided initially, the chart will render without an initial +zoom, displaying the entire dataset. Updates to `zoomDomain` will trigger a re-render of the chart +with the new domain. + +*example:* `zoomDomain={{x: [0, 100]}}` + +### zoomDimension + +`type: "x" || "y" ` + +When the `zoomDimension` prop is set, panning and zooming will be restricted to the given dimension +(either x or y), and the domain of the other dimension will remain static. When this prop is not +specified, both x and y dimensions will pan and zoom. + +*example:* `zoomDimension="x"` + +[VictoryContainer]: https://formidable.com/open-source/victory/docs/victory-container +[See an example of a zoomable chart]: https://formidable.com/open-source/victory/guides/brush-and-zoom diff --git a/packages/victory/README.md b/packages/victory/README.md new file mode 100644 index 000000000..f65206b39 --- /dev/null +++ b/packages/victory/README.md @@ -0,0 +1,63 @@ +## [Victory Documentation](https://formidable.com/open-source/victory) + +## Getting started + +1. Add Victory to your project: + + ```sh + $ npm install victory --save + ``` + +2. Add your first Victory component: + + ```js + import React, { Component } from 'react'; + import { render } from 'react-dom'; + import { VictoryPie } from 'victory'; + + class PieChart extends Component { + render() { + return ( + + ); + } + } + + render(, document.getElementById('app')); + ``` + +3. `VictoryPie` component will be rendered, and you should see: + +

+ pie +

+ +## Requirements +Projects using Victory should also depend on [React][] and [prop-types][]. + +## Victory Native +Want to use `Victory` with React Native? Check out [victory-native](https://github.com/FormidableLabs/victory-native) +Victory Native shares most of its code with Victory, and has a nearly identical api! + +## [Contributing](CONTRIBUTING.md) + + +## Issues +### Jest Snapshots + +If you want to use [Jest snapshot testing](https://github.com/storybooks/storybook/tree/master/addons/storyshots) +with Victory, you may encounter a problem where the Jest snapshot changes every time, due to a randomly generated `clipId` +being used for a `VictoryClipContainer` group component. +The solution to this is to set a static `clipId` on your `VictoryClipContainer`. + +For example, when creating a `VictoryLine` component, you can pass a `groupComponent` prop: +```js +} +/> +``` + +Now the `clipId` attached to your `VictoryLine` component will always be the same, and your snapshot will not change with each test run. + +[React]: https://facebook.github.io/react/ +[prop-types]: https://github.com/reactjs/prop-types