diff --git a/docs/src/content/docs/common-container-props.md b/docs/src/content/docs/common-container-props.md index 4fdf4970a..4028a1f41 100644 --- a/docs/src/content/docs/common-container-props.md +++ b/docs/src/content/docs/common-container-props.md @@ -1,5 +1,5 @@ --- -id: 33 +id: 98 title: Common Container Props category: containers sidebar: true diff --git a/docs/src/content/docs/create-container.md b/docs/src/content/docs/create-container.md index b7c9aee76..eb6bc6b0f 100644 --- a/docs/src/content/docs/create-container.md +++ b/docs/src/content/docs/create-container.md @@ -1,5 +1,5 @@ --- -id: 32 +id: 99 title: createContainer category: containers type: docs diff --git a/docs/src/content/docs/victory-area.md b/docs/src/content/docs/victory-area.md index cceb4f2c0..971bb0480 100644 --- a/docs/src/content/docs/victory-area.md +++ b/docs/src/content/docs/victory-area.md @@ -1,5 +1,5 @@ --- -id: 4 +id: 1 title: VictoryArea category: charts type: docs diff --git a/docs/src/content/docs/victory-axis.md b/docs/src/content/docs/victory-axis.md index 0a2711b35..983408496 100644 --- a/docs/src/content/docs/victory-axis.md +++ b/docs/src/content/docs/victory-axis.md @@ -1,5 +1,5 @@ --- -id: 5 +id: 2 title: VictoryAxis category: charts type: docs diff --git a/docs/src/content/docs/victory-bar.md b/docs/src/content/docs/victory-bar.md index 31c744246..4cad33752 100644 --- a/docs/src/content/docs/victory-bar.md +++ b/docs/src/content/docs/victory-bar.md @@ -1,5 +1,5 @@ --- -id: 6 +id: 3 title: VictoryBar category: charts type: docs diff --git a/docs/src/content/docs/victory-boxplot.md b/docs/src/content/docs/victory-boxplot.md index 85b29017f..b6955bbf6 100644 --- a/docs/src/content/docs/victory-boxplot.md +++ b/docs/src/content/docs/victory-boxplot.md @@ -1,5 +1,5 @@ --- -id: 0 +id: 4 title: VictoryBoxPlot category: charts type: docs diff --git a/docs/src/content/docs/victory-candlestick.md b/docs/src/content/docs/victory-candlestick.md index 076c29899..54bb8ac12 100644 --- a/docs/src/content/docs/victory-candlestick.md +++ b/docs/src/content/docs/victory-candlestick.md @@ -1,5 +1,5 @@ --- -id: 8 +id: 5 title: VictoryCandlestick category: charts type: docs diff --git a/docs/src/content/docs/victory-canvas.md b/docs/src/content/docs/victory-canvas.md index d1ec9c2f2..8125a60ae 100644 --- a/docs/src/content/docs/victory-canvas.md +++ b/docs/src/content/docs/victory-canvas.md @@ -8,7 +8,9 @@ scope: null # Victory Canvas -The `victory-canvas` package currently provides a set of experimental primitive components that will allow Victory to render data in a Canvas container rather than as an SVG. +The `victory-canvas` package currently provides a set of *experimental* primitive components that will allow Victory to render data in a Canvas container rather than as an SVG. + +> This API should not be used in production and only serves as an experiment to help guide the next phase of Victory development. ## Container Components diff --git a/docs/src/content/docs/victory-chart.md b/docs/src/content/docs/victory-chart.md index 1ebb457d0..4bbe0d62e 100644 --- a/docs/src/content/docs/victory-chart.md +++ b/docs/src/content/docs/victory-chart.md @@ -1,7 +1,7 @@ --- -id: 9 +id: 1 title: VictoryChart -category: charts +category: containers type: docs scope: - sampleData diff --git a/docs/src/content/docs/victory-errorbar.md b/docs/src/content/docs/victory-errorbar.md index 633ef032e..b5cd3687b 100644 --- a/docs/src/content/docs/victory-errorbar.md +++ b/docs/src/content/docs/victory-errorbar.md @@ -1,5 +1,5 @@ --- -id: 13 +id: 6 title: VictoryErrorBar category: charts type: docs diff --git a/docs/src/content/docs/victory-group.md b/docs/src/content/docs/victory-group.md index 27e3cde4a..c3ec2f1c3 100644 --- a/docs/src/content/docs/victory-group.md +++ b/docs/src/content/docs/victory-group.md @@ -1,7 +1,7 @@ --- id: 14 title: VictoryGroup -category: charts +category: containers type: docs scope: - sampleData diff --git a/docs/src/content/docs/victory-histogram.md b/docs/src/content/docs/victory-histogram.md index 448209e17..68ca371d1 100644 --- a/docs/src/content/docs/victory-histogram.md +++ b/docs/src/content/docs/victory-histogram.md @@ -1,5 +1,5 @@ --- -id: 35 +id: 7 title: VictoryHistogram category: charts type: docs diff --git a/docs/src/content/docs/victory-line.md b/docs/src/content/docs/victory-line.md index 9b65caadb..c74cf373d 100644 --- a/docs/src/content/docs/victory-line.md +++ b/docs/src/content/docs/victory-line.md @@ -1,5 +1,5 @@ --- -id: 17 +id: 8 title: VictoryLine category: charts type: docs diff --git a/docs/src/content/docs/victory-pie.md b/docs/src/content/docs/victory-pie.md index c766d577d..a7faff143 100644 --- a/docs/src/content/docs/victory-pie.md +++ b/docs/src/content/docs/victory-pie.md @@ -1,5 +1,5 @@ --- -id: 18 +id: 9 title: VictoryPie category: charts type: docs diff --git a/docs/src/content/docs/victory-polar-axis.md b/docs/src/content/docs/victory-polar-axis.md index 05c145888..64aa4d4c9 100644 --- a/docs/src/content/docs/victory-polar-axis.md +++ b/docs/src/content/docs/victory-polar-axis.md @@ -1,5 +1,5 @@ --- -id: 19 +id: 10 title: VictoryPolarAxis category: charts type: docs diff --git a/docs/src/content/docs/victory-scatter.md b/docs/src/content/docs/victory-scatter.md index 88f336719..c8cbe90b1 100644 --- a/docs/src/content/docs/victory-scatter.md +++ b/docs/src/content/docs/victory-scatter.md @@ -1,5 +1,5 @@ --- -id: 22 +id: 11 title: VictoryScatter category: charts type: docs diff --git a/docs/src/content/docs/victory-stack.md b/docs/src/content/docs/victory-stack.md index be851762a..d32fb69a9 100644 --- a/docs/src/content/docs/victory-stack.md +++ b/docs/src/content/docs/victory-stack.md @@ -1,7 +1,7 @@ --- id: 25 title: VictoryStack -category: charts +category: containers type: docs scope: - sampleData diff --git a/docs/src/content/docs/victory-voronoi.md b/docs/src/content/docs/victory-voronoi.md index e77be5ee6..ae78d2230 100644 --- a/docs/src/content/docs/victory-voronoi.md +++ b/docs/src/content/docs/victory-voronoi.md @@ -1,5 +1,5 @@ --- -id: 30 +id: 12 title: VictoryVoronoi category: charts type: docs diff --git a/docs/src/content/introduction/index.md b/docs/src/content/introduction/index.md index 7945f5a36..c625bbe3c 100644 --- a/docs/src/content/introduction/index.md +++ b/docs/src/content/introduction/index.md @@ -9,85 +9,108 @@ scope: null Victory is an opinionated, but fully overridable, ecosystem of composable React components for building interactive data visualizations. The following tutorial explains how to set up a basic chart. For next steps, please see our [FAQs][] and [Gallery][] sections. For more advanced examples, check out [our guides][]. -#### Getting Started with Victory Native? - -Check out the documentation for [Victory Native XL](https://commerce.nearform.com/open-source/victory-native/) - the rewrite of Victory Native that favors flexibility, ease of use, and performance. - -For the legacy versions of Victory Native, see [Getting Started with Victory Native](/docs/native). - -## Tutorial - -In this guide, we’ll show you how to get started with Victory and walk you through the creation and customization of a composed chart. We’ve created a GitHub repository with the completed project, and will link to the corresponding commit where appropriate to help you follow along. If you want, you can [view the completed tutorial here](https://github.com/FormidableLabs/victory-tutorial/blob/master/src/js/client.js). +```playground_norender +const data2012 = [ + {quarter: 1, earnings: 13000}, + {quarter: 2, earnings: 16500}, + {quarter: 3, earnings: 14250}, + {quarter: 4, earnings: 19000} +]; -#### 1. Set up a basic React project +const data2013 = [ + {quarter: 1, earnings: 15000}, + {quarter: 2, earnings: 12500}, + {quarter: 3, earnings: 19500}, + {quarter: 4, earnings: 13000} +]; -You can do this on your own if you'd like, or you can... +const data2014 = [ + {quarter: 1, earnings: 11500}, + {quarter: 2, earnings: 13250}, + {quarter: 3, earnings: 20000}, + {quarter: 4, earnings: 15500} +]; -* Clone down [this project we've started for you](https://github.com/FormidableLabs/victory-tutorial) using `git clone git@github.com:FormidableLabs/victory-tutorial.git` -* `cd victory-tutorial` -* Replace the existing code in the `client.js` file with: +const data2015 = [ + {quarter: 1, earnings: 18000}, + {quarter: 2, earnings: 13250}, + {quarter: 3, earnings: 15000}, + {quarter: 4, earnings: 12000} +]; -```jsx -import React from 'react'; -import ReactDOM from 'react-dom'; - -class Main extends React.Component { - render() { -    return ( -      
-        

Victory Tutorial

-      
-    ); -  } +function App() { + return ( + + + (`$${x / 1000}k`)} + /> + + + + + + + + ) } -const app = document.getElementById('app'); -ReactDOM.render(
, app); +render(); ``` -* Run `npm install` to install all necessary dependencies. +## Tutorial -Once you've completed these steps, you can run the webpack server with the command `npm start`, and the project will render at `localhost:8080`. All modifications will take place in your client.js file. +In this guide, we’ll show you how to get started with Victory and walk you through the creation and customization of a composed chart. We’ve created a GitHub repository with the completed project, and will link to the corresponding commit where appropriate to help you follow along. If you want, you can [view the completed tutorial here](https://github.com/FormidableLabs/victory-tutorial/blob/master/src/js/client.js). -#### 2. Add Victory +#### 1. Import Victory -Add Victory to your project with the command `npm install victory`, then import it into your React project. For now, let's import the whole library until we know what chart type we'll be using. The imports at the top of your main Javascript file should now look like this: +Add Victory to your project with the command `npm install victory`, then import it into your component. For now, let's start with a simple Bar Chart. ```jsx import React from 'react'; -import ReactDOM from 'react-dom'; -import * as V from 'victory'; +import { VictoryBar } from 'victory'; ``` -#### 3. Add your data +#### 2. Render VictoryBar inside your React Component -You can import your data from an external file or API, or create an array of data points as a variable. Here is the data that we'll be using for our chart, which is tracking earnings per fiscal quarter: +Components include sensible defaults, so even without data `VictoryBar` will render a series of bars with default data. ```jsx -const data = [ - {quarter: 1, earnings: 13000}, - {quarter: 2, earnings: 16500}, - {quarter: 3, earnings: 14250}, - {quarter: 4, earnings: 19000} -]; -``` - -#### 4. Add your first Victory component - -Since we're doing a simple comparison of earnings between quarters, let's use a bar chart to visualize the data. We aren't going to need the whole Victory library, so let's change our import statement to reflect only the components that we need. +function App() { + return ( + + ) +} -```jsx -import React from 'react'; -import ReactDOM from 'react-dom'; -import { VictoryBar } from 'victory'; +render(); ``` -Components include sensible defaults, so even without data `VictoryBar` will render a series of bars with default data. - -```playground -// renders the default component with fallback data - -``` +#### 3. Add your data Let's add some data. VictoryBar looks for `x` and `y` values in data points, which our data doesn't have. We can work around this by adding accessor props to our `VictoryBar` component. ([See the commit here](https://github.com/FormidableLabs/victory-tutorial/blob/3a0951d78202e4333fc8ae07a673173732209ee5/src/js/client.js).) @@ -97,32 +120,29 @@ const data = [ {quarter: 2, earnings: 16500}, {quarter: 3, earnings: 14250}, {quarter: 4, earnings: 19000} -]; - -class App extends React.Component { - render() { - return ( - - ) - } +] + +function App() { + return ( + + ) } render(); ``` -#### 5. Add a Chart wrapper +#### 4. Add Chart Axes `VictoryChart` is a wrapper component that plots all of its children on the same scale. `VictoryChart` also provides default axes. Import `VictoryChart` like so: ```jsx import React from 'react'; -import ReactDOM from 'react-dom'; import { VictoryBar, VictoryChart } from 'victory'; ``` @@ -136,18 +156,16 @@ const data = [ {quarter: 4, earnings: 19000} ]; -class App extends React.Component { - render() { - return ( - - - - ) - } +function App() { + return ( + + + + ) } render(); @@ -155,13 +173,12 @@ render(); While the axes defaults are great, you can see there's some overlap with the y-axis and first bar. Let's fix that in the next section. -#### 6. Customize the axes +#### 5. Customize the axes Next, let's modify the tick labels on the axes to be a little more descriptive. We can do this by adding and configuring `VictoryAxis` components to our chart, so let's import `VictoryAxis`. Import statements should now look like this: ```jsx import React from 'react'; -import ReactDOM from 'react-dom'; import { VictoryBar, VictoryChart, VictoryAxis } from 'victory'; ``` @@ -175,48 +192,44 @@ const data = [ {quarter: 4, earnings: 19000} ]; -class App extends React.Component { - render() { - return ( - - - (`$${x / 1000}k`)} - /> - - - ) - } +function App() { + return ( + + + (`$${x / 1000}k`)} + /> + + + ) } render(); ``` -#### 7. Add a theme +#### 6. Add a theme Victory charts come with a default grayscale theme so that all components look clean and consistent. But let’s switch it up with the Victory-provided Material theme. We can do that by importing VictoryTheme and adding a theme prop to `VictoryChart`. Themes should always be applied to the outermost wrapper component in a chart. Import statements should look like this: ```jsx import React from 'react'; -import ReactDOM from 'react-dom'; -import { VictoryBar, VictoryChart, VictoryAxis, - VictoryTheme } from 'victory'; +import { VictoryBar, VictoryChart, VictoryAxis, VictoryTheme } from 'victory'; ``` And here's the code and rendered component with the new theme ([See the commit here](https://github.com/FormidableLabs/victory-tutorial/tree/fb904143eea6046e6841b4284e044360d4af5cf1/src/js/client.js)): @@ -229,42 +242,39 @@ const data = [ {quarter: 4, earnings: 19000} ]; -class App extends React.Component { - render() { - return ( - - - (`$${x / 1000}k`)} - /> - - - ) - } +function App() { + return ( + + + (`$${x / 1000}k`)} + /> + + + ) } render(); ``` -#### 8. Stack multiple bar charts +#### 7. Stack multiple bar charts Next, let's add more data. In this example we'll compare three years' worth of quarterly earnings in a stacked bar chart. `VictoryStack` will handle the layout. ```jsx import React from 'react'; -import ReactDOM from 'react-dom'; import { VictoryBar, VictoryChart, VictoryAxis, VictoryTheme, VictoryStack } from 'victory'; ``` @@ -300,52 +310,50 @@ const data2015 = [ {quarter: 4, earnings: 12000} ]; -class App extends React.Component { - render() { - return ( - - + + (`$${x / 1000}k`)} + /> + + + + - (`$${x / 1000}k`)} + - - - - - - - - ) - } + + + ) } render(); ``` -#### 9. Override theme's color scale +#### 8. Override theme's color scale `VictoryStack` can also be used to provide shared styles and props to its children. Let's add a `colorScale` prop to `VictoryStack` to override the default `colorScale` defined in `VictoryTheme.material`. ([See the commit here](https://github.com/FormidableLabs/victory-tutorial/tree/9c77240e45db4e9fde4123ae29304461739a7035/src/js/client.js).) @@ -378,48 +386,46 @@ const data2015 = [ {quarter: 4, earnings: 12000} ]; -class App extends React.Component { - render() { - return ( - + + (`$${x / 1000}k`)} + /> + - - (`$${x / 1000}k`)} + + + - - - - - - - - ) - } + + + ) } render(); diff --git a/docs/src/content/introduction/native.md b/docs/src/content/introduction/native.md index 19ec1e5f1..ebde86770 100644 --- a/docs/src/content/introduction/native.md +++ b/docs/src/content/introduction/native.md @@ -1,6 +1,6 @@ --- id: 1 -title: Native +title: React Native category: introduction type: docs scope: null @@ -8,8 +8,7 @@ scope: null # Getting Started with Victory Native -> These docs are for the legacy versions of Victory Native. Victory Native XL is our rewrite of Victory Native designed specifically for React Native. Please [see here for more information] -(https://commerce.nearform.com/open-source/victory-native/). If you would like to continue to use this version of Victory with React Native, follow the legacy guide below. +> These docs are for the legacy versions of Victory Native. Victory Native XL is our rewrite of Victory Native designed specifically for React Native. Please [see here for more information](https://commerce.nearform.com/open-source/victory-native/). If you would like to continue to use this version of Victory with React Native, follow the legacy guide below. In this guide, we’ll show you how to get started with Victory Native and the React Native SVG dependency running in your React Native app for iOS and Android. diff --git a/docs/src/content/introduction/new.md b/docs/src/content/introduction/new.md deleted file mode 100644 index 93d802ef1..000000000 --- a/docs/src/content/introduction/new.md +++ /dev/null @@ -1,322 +0,0 @@ ---- -id: 1 -title: New Features -category: introduction -slug: new -type: docs -scope: - - range - - sampleData ---- - -# New Features - -Victory is actively developed. You can read about some of our newest features here. For more information on improvements and bug fixes, check out our [changelog](https://github.com/FormidableLabs/victory/blob/main/CHANGELOG.md). - -## Accessibility Features - -With improved chart and chart component accessibility in mind, we've added a [`VictoryAccessibleGroup`](/docs/victory-accessible-group) for use with the [`groupComponent`](/docs/common-props#groupcomponent) prop. This component will wrap its children in a `g` tag with a user provided `aria-label` and optional description via the `desc` prop. Other available props can be found in the [docs](/docs/victory-accessible-group). - -We've also added `ariaLabel` and `tabIndex` props to all our primitives. Documentation on these can be found in under [`VictoryPrimitives`](/docs/victory-primitives#victory-primitives). - -We've also added automatic `onFocus` and `onBlur` events for `VictoryTooltip` so that charts with `tabIndex` defined can easily show tooltips to users navigating with a keyboard. - -```playground - - `y: ${datum.y}`} - labelComponent={} - dataComponent={ - `x: ${datum.x}`} - /> - } - /> - -``` - -## Backgrounds for Victory Label - -`VictoryLabel` now supports backgrounds! The [`backgroundStyle`](/docs/victory-label#backgroundstyle) prop lets you render and style a `rect` element behind your label. The size of the `rect` is determined for you based on the size and style of the label. The [`backgroundPadding`](/docs/victory-label#backgroundpadding) prop may be used to adjust the size of the background `rect`. - -```playground - - } -/> -``` - -Label backgrounds also work with multi-line and inline labels: - -```playground - - } -/> -``` - -Label backgrounds are also compatible with tooltips! - -```playground - - } - /> - } -/> -``` - -## Better label placement options for VictoryPie - -We added a [`labelPlacement`](/docs/victory-pie#labelplacement) prop to `VictoryPie` that makes it easier to match label angles to the angles of their corresponding slices. Placement options are "vertical", "parallel", and "perpendicular". This prop may also be given as a function. It works with tooltips, too! - -```playground - `${datum.placement}\nlabel`} - labelPlacement={({ datum }) => datum.placement} - labelPosition="startAngle" - labelComponent={} -/> -``` - -## VictoryHistogram - -We've added a new charting component to allow you to easily create histogram charts. With [`VictoryHistogram`](/docs/victory-histogram) you can create beautiful and interactive histograms. - -```playground - - - -``` - -Using the [`bins`](/docs/victory-histogram#bins) prop, you have flexibility in how your data is binned, allowing you to specify specific bin ranges, or an approximate count of how many bins you want. - -```playground - - - -``` - -You can stack `VictoryHistogram` too, just wrap it in [`VictoryStack`](/docs/victory-stack)! - -```playground - - - - - - - -``` - -## Backgrounds for VictoryChart - -We wanted to make it easier to style the chart backgrounds, so we added a [`backgroundComponent`](/docs/victory-chart#backgroundcomponent) for `VictoryChart`. Now, when you include `background` styles, `VictoryChart` will render [`Background`](/docs/victory-primitives#background), a styled element that fills the area between your axes. - -Try it out! - -```playground - - - -``` - -Polar charts are also supported, with `Background` rendering a `circle` instead of a `rect` element`: - -```playground -
- - - - - - /> - - - - - - - - -
-``` - -As with other components Victory renders, you can add props directly to `Background`, or create your own custom `backgroundComponent`. - -```playground_norender -const CustomBackground = props => { - return ( - - ); -}; - -const Matterhorn = props => { - return ( - } - > - - - - ) -}; - -render(); -``` diff --git a/docs/src/partials/sidebar/index.js b/docs/src/partials/sidebar/index.js index b02daca5e..8bdcef6d2 100644 --- a/docs/src/partials/sidebar/index.js +++ b/docs/src/partials/sidebar/index.js @@ -197,26 +197,12 @@ const Sidebar = ({ className, content, onCloseClick }) => { ) : ( <> - + + + + - + )}