diff --git a/CHANGELOG.md b/CHANGELOG.md index d466c814..4382ec61 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,12 +1,46 @@ -* **Support for horizontal StackedBarChart** +Version 5.0 is a major overhaul to the "decorator" and "extras" pattern. +We've simplified the API, made it declarative and added support for +rendering order. - StackedBarChart now supports the prop `horizontal` - just as a regular BarChart +All charts and axes now support React children. Meaning that your decorators +and extras should now be placed as direct children to the chart in question. +This is a breaking change but a very easy one to migrate (I migrated all storybooks in a matter of minutes), +see the [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples) +and read the [docs](https://github.com/JesperLekland/react-native-svg-charts#react-native-svg-charts) for inspiration. +I want to thank everyone who is contributing by submitting issues and joining +in on discussions. A special thanks to @narciero, @Sprit3Dan and @RoarRain for +contributing with PRs. -* **StackedBar/AreaChart adheres to new `extras` api** +## Breaking Changes +* **Extras and Decorators have been removed** + + Extras and decorators should now be passed in as children to the chart in question. + Each child will be called with similar arguments as before. See + [README](https://github.com/JesperLekland/react-native-svg-charts#react-native-svg-charts) + for more info. + + Migrating an extra is as simple as just moving it from the `extras` array to a child of the chart. + The `decorators` are nearly as easy to migrate. Create a wrapper component around + your decorator that accepts the `data` prop, now you yourself can map this array and return as many decorators as you want. + + +* **renderGrid and gridProps have been removed** + + A grid show now be rendered through as a child. We still expose a default `Grid` + component as part of the API but this must no manually be added to all charts that want to display a grid. + + As a result of this the following props are deprecated: + * `showGrid` + * `gridProps` + * `renderGrid` + + +* **Grids are consolidate into one** + + Before we hade `Grid.Vertical`,`Grid.Horizontal` and `Grid.Both`, + now we simply have `Grid` with a `direction` property. See [README](https://github.com/JesperLekland/react-native-svg-charts#react-native-svg-charts) + for more info - StackedBarChart and StackedAreaChart was still on the legacy `renderExtras` - pattern. It has now been migrated to the single `extras` prop api. diff --git a/README.md b/README.md index 91b2755e..a3b0dbfc 100644 --- a/README.md +++ b/README.md @@ -7,9 +7,8 @@ Welcome to react-native-svg-charts! -### version 4 now available! -BarChart and PieChart have joined the latest API! -A few of breaking changes are introduced in this version but we've taken great care to make sure migrating is easy. +### version 5 is now available! +A much improved decorator system has been introduced, allowing for greater flexibility and less complexity. See [releases](https://github.com/JesperLekland/react-native-svg-charts/releases) for more information. --- @@ -33,9 +32,10 @@ We use [react-native-svg](https://github.com/react-native-community/react-native We utilize the very popular [d3](https://d3js.org/) library to create our SVG paths and to calculate the coordinates. We built this library to be as extensible as possible while still providing you with the most common charts and data visualization tools out of the box. -The Line-, Bar-, Area- and Pie- charts can all be extended with "decorators" and "extras". -The `renderDecorator` prop is called on each passed `data` entry and allows you to easily add things such as points or other decorators to your charts. -The `extras` prop is used to further decorate your charts with e.g intersections, projections, gradients and much more, see the [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples) for more info. +We're very proud of our "decorator" support. All charts can be extended with "decorators", a component that somehow styles or enhances your chart. +Simply pass in a `react-native-svg` compliant component as a child to the graph and it will be called with all the necessary information to layout your decorator. +See each chart for information on what data the decorator will be called with. + Feedback and PR's are more than welcome 🙂 @@ -75,7 +75,7 @@ yarn storybook | yScale | d3Scale.scaleLinear | A function that determines the scale of said axis (only tested with scaleLinear, scaleTime & scaleBand )| | xScale | d3Scale.scaleLinear | Same as `yScale` but for the x axis | | svg | `{}` | an object containing all the props that should be passed down to the underlying `react-native-svg` component. [See available props](https://github.com/react-native-community/react-native-svg#common-props)| -| animate | true | PropTypes.bool | +| animate | false | PropTypes.bool | | animationDuration | 300 | PropTypes.number | | style | undefined | Supports all [ViewStyleProps](https://facebook.github.io/react-native/docs/viewstyleproptypes.html) | | curve | d3.curveLinear | A function like [this](https://github.com/d3/d3-shape#curves) | @@ -84,9 +84,19 @@ yarn storybook | showGrid | true | Whether or not to show the grid lines | | gridMin | undefined | Normally the graph tries to draw from edge to edge within the view bounds. Using this prop will allow the grid to reach further than the actual dataPoints. [Example](#gridmin/max) | | gridMax | undefined | The same as "gridMin" but will instead increase the grids maximum value | -| renderGrid | `Grid.Horizontal` | A function that returns the component to be rendered as the grid | -| extras | undefined | An array of whatever data you want to render. Each item in the array will call `renderExtra`. [See example](#extras) | -| renderDecorator | `() => {}`| Called once for each entry in `dataPoints` and expects a component. Use this prop to render e.g points (circles) on each data point. [See example](#decorator) | +| children | undefined | One or many `react-native-svg` components that will be used to enhance your chart| + +## Common arguments to children + +| Property | Description | +| --- | --- | +| x | a function that normally accepts the index of a data point an returns its 'x' location on the canvas | +| y | a function that normally accepts the value of a data point an returns its 'y' location on the canvas | +| width | the width of the canvas in pixels | +| height | the height of the canvas in pixels | +| data | the same data array provided to the chart, use this to map over your data points if you want decorators on each point | +| ticks | if `numberOfTicks` has been provided to the chart this array will include the calculated tick values (useful for grids) | + ## Components @@ -101,9 +111,10 @@ This library currently provides the following components * [YAxis](#yaxis) * [XAxis](#xaxis) -Also see [other examples](#other-examples) -* [Decorator](#decorator) -* [Extras](#extras) +Also see +* [Children](#children) +* [Grid](#grid) + ### AreaChart @@ -113,7 +124,7 @@ Also see [other examples](#other-examples) ```javascript import React from 'react' -import { AreaChart } from 'react-native-svg-charts' +import { AreaChart, Grid } from 'react-native-svg-charts' import * as shape from 'd3-shape' class AreaChartExample extends React.PureComponent { @@ -124,12 +135,14 @@ class AreaChartExample extends React.PureComponent { return ( + > + + ) } } @@ -143,6 +156,10 @@ See [Common Props](#common-props) | --- | --- | --- | | start | 0 | The value of which the area should start (will always end on the data point) | +#### Arguments to children + +Supports all [Common arguments to children](#common-arguments-to-children) + ### StackedAreaChart Very similar to an area chart but with multiple sets of data stacked together. Notice that the `dataPoints` prop has changed to `data` and have a different signature. @@ -223,29 +240,45 @@ class StackedAreaExample extends React.PureComponent { Also see [Common Props](#common-props) +#### Arguments to children + +| Property | Description +| --- | --- | +| x | a function that normally accepts the index of a data points an returns its 'x' location on the canvas | +| y | a function that normally accepts the value of a data points an returns its 'y' location on the canvas | +| width | the width of the canvas in pixels | +| height | the height of the canvas in pixels | +| ~~data~~ | ~~the same data array provided to the chart, use this to map over your data points if you want decorators on each point~ | +| ticks | if `numberOfTicks` has been provided to the chart this array will include the calculated tick values (useful for grids) | + +This chart does not call a child with the `data` argument. This is due to the fact that a lot of calculations go into +creating the stacked chart, meaning that the original `data` prop doesn't provide especially valuable information +when trying to layout decorators. It does however call with the rest of the [common arguments](#common-arguments-to-children) + ### BarChart ![Bar chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/bar-chart.png) #### Example ```javascript import React from 'react' -import { BarChart } from 'react-native-svg-charts' +import { BarChart, Grid } from 'react-native-svg-charts' class BarChartExample extends React.PureComponent { render() { const fill = 'rgb(134, 65, 244)' - const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ] + const data = [ 50, 10, 40, 95, -4, -24, null, 85, undefined, 0, 35, 53, -53, 24, 50, -20, -80 ] return ( + contentInset={{ top: 30, bottom: 30 }} + > + + ) } @@ -264,6 +297,14 @@ Also see [Common Props](#common-props) | spacingOuter | 0.05 | Spacing outside of the bars (or groups of bars). Percentage of one bars width | | contentInset | `{ top: 0, left: 0, right: 0, bottom: 0 }` | PropTypes.shape | +#### Arguments to children + +| Property | Description +| --- | --- | +| bandwidth | the width of a band (a.k.a bar) | + +Also supports all [Common arguments to children](#common-arguments-to-children) + ### StackedBarChart The same as the [StackedAreaChart](#stackedareachart) except with bars. @@ -344,10 +385,23 @@ class StackedBarChartExample extends React.PureComponent { | order | [d3.stackOrderNone](https://github.com/d3/d3-shape#stackOrderNone) | The order in which to sort the areas | | offset | [d3.stackOffsetNone](https://github.com/d3/d3-shape#stackOffsetNone) | A function to determine the offset of the areas | -*Note:* `renderDecorator` is not supported for this chart type. - Also see [Common Props](#common-props) +#### Arguments to children + +| Property | Description | +| --- | --- | +| x | a function that normally accepts the index of a data points an returns its 'x' location on the canvas | +| y | a function that normally accepts the value of a data points an returns its 'y' location on the canvas | +| width | the width of the canvas in pixels | +| height | the height of the canvas in pixels | +| ~~data~~ | ~~the same data array provided to the chart, use this to map over your data points if you want decorators on each point~~ | +| ticks | if `numberOfTicks` has been provided to the chart this array will include the calculated tick values (useful for grids) | + +This chart does not call a child with the `data` argument. This is due to the fact that a lot of calculations go into +creating the stacked chart, meaning that the original `data` prop doesn't provide especially valuable information +when trying to layout decorators. It does however call with the rest of the [common arguments](#common-arguments-to-children) + ### LineChart ![Line chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/line-chart.png) @@ -355,7 +409,7 @@ Also see [Common Props](#common-props) ```javascript import React from 'react' -import { LineChart } from 'react-native-svg-charts' +import { LineChart, Grid } from 'react-native-svg-charts' class LineChartExample extends React.PureComponent { @@ -365,11 +419,13 @@ class LineChartExample extends React.PureComponent { return ( + contentInset={{ top: 20, bottom: 20 }} + > + + ) } @@ -380,12 +436,13 @@ class LineChartExample extends React.PureComponent { #### Props See [Common Props](#common-props) +#### Arguments to children + +Supports all [Common arguments to children](#common-arguments-to-children) + ### PieChart The PieChart is a really nice component with great support for custom behavior. -The PieChart does not support the `extras` prop as it doesn't make much sense in the context of a pie chart. -It does however support the decorator prop with some extra arguments to help you layout your labels (and whatnot). - See more examples in the [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples) ![Pie chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/pie-chart.png) @@ -437,7 +494,15 @@ class PieChartExample extends React.PureComponent { | labelRadius | undefined | The radius of the circle that will help you layout your labels. Takes either percentages or absolute numbers (pixels) | | padAngle | | The angle between the slices | | sort | `(a,b) => b.value - a.value` | Like any normal sort function it expects either 0, a positive or negative return value. The arguments are each an object from the `dataPoints` array | -| extras | [ ] | see [extras](#extras) | + +#### Arguments to children + +| Property | Description +| --- | --- | +| width | the width of the canvas in pixels +| height | the height of the canvas in pixels +| slices | an array of the pie chart slices. See source code and examples for what it includes +| data | the same data array provided to the chart, use this to map over your data points if you want decorators on each point ### ProgressCircle @@ -476,7 +541,15 @@ class ProgressCircleExample extends React.PureComponent { | startAngle | `0` | PropTypes.number | | endAngle | `Math.PI * 2` | PropTypes.number | | strokeWidth | 5 | PropTypes.number | -| extras | [ ] | see [extras](#extras) | + +#### Arguments to children + +| Property | Description +| --- | --- | +| width | the width of the canvas in pixels | +| height | the height of the canvas in pixels | +| data | the same data array provided to the chart, use this to map over your data points if you want decorators on each point | + ### YAxis @@ -489,7 +562,7 @@ If the chart has property `contentInset` set it's very important that the YAxis #### Example ```javascript import React from 'react' -import { LineChart, YAxis } from 'react-native-svg-charts' +import { LineChart, YAxis, Grid } from 'react-native-svg-charts' import { View } from 'react-native' class YAxisExample extends React.PureComponent { @@ -501,22 +574,25 @@ class YAxisExample extends React.PureComponent { const contentInset = { top: 20, bottom: 20 } return ( - + `${value}ºC` } + data={ data } + contentInset={ contentInset } + svg={{ + fill: 'grey', + fontSize: 10, + }} + numberOfTicks={ 10 } + formatLabel={ value => `${value}ºC` } /> + > + + ) } @@ -540,6 +616,10 @@ class YAxisExample extends React.PureComponent { | min | undefined | Used to sync layout with chart (if gridMin is used there) | | max | undefined | Used to sync layout with chart (if gridMax is used there) | +#### Arguments to children + +No arguments + ### XAxis @@ -554,7 +634,7 @@ The XAxis also supports the `xAccessor` prop, if it's not supplied it will assum #### Example ```javascript import React from 'react' -import { LineChart, XAxis } from 'react-native-svg-charts' +import { LineChart, XAxis, Grid } from 'react-native-svg-charts' import { View } from 'react-native' class XAxisExample extends React.PureComponent { @@ -567,17 +647,19 @@ class XAxisExample extends React.PureComponent { + > + + index } + formatLabel={ (value, index) => index } contentInset={{ left: 10, right: 10 }} - svg={{ fontSize: 10 }} + svg={{ fontSize: 10, fill: 'black' }} /> ) @@ -599,69 +681,35 @@ class XAxisExample extends React.PureComponent { | formatLabel | `value => value` | A utility function to format the text before it is displayed, e.g `value => "day" + value`. Passes back the value provided by the `xAccessor` | | contentInset | { left: 0, right: 0 } | Used to sync layout with chart (if same prop used there) | +#### Arguments to children -### Decorator - -The `renderDecorator` prop allow for decorations on each of the provided data points. The `renderDecorator` is very similar to the `renderItem` of a [FlatList](https://facebook.github.io/react-native/docs/flatlist.html) -and is a function that is called with an object as an arguments to help the layout of the extra decorator. The content of the argument object is as follows: - -```javascript -{ - value: number, // the value of the data points. Pass to y function to get y coordinate of data point - index: number, // the index of the data points. Pass to x function to get x coordinate of data point - x: function, // the function used to calculate the x coordinate of a specific data point index - y: function, // the function used to calculate the y coordinate of a specific data point value -} -``` - -Remember that all components returned by `renderDecorator` must be one that is renderable by the [``](https://github.com/react-native-community/react-native-svg#svg) element, i.e all components supported by [react-native-svg](https://github.com/react-native-community/react-native-svg) - -![Decorator](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/decorators.png) - -[Examples](https://github.com/JesperLekland/react-native-svg-charts-examples) - -### Extras -The `extras` prop allow for arbitrary decorators on your chart. -and is a function that is called with an object as an arguments to help the layout of the extra decorator. -This prop is what really makes this library special. With this prop you can customize your charts to your hearts content - gradients, toolTips, clips, images, text, anything that is supported by `react-native-svg` can be added to your chart through this prop. -See the [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples) for some really cool use cases - -The content of the extras argument object is as follows: - -```javascript -{ - item: any, // the entry of the 'extras' array - x: function, // the function used to calculate the x coordinate of a specific data point index - y: function, // the function used to calculate the y coordinate of a specific data point value - index: number, // the index of the item in the 'extras' array - width: number, // the width of the svg canvas, - height: number, // the number fo the svg canvas, -} -``` - -For `PieChart` and `ProgressCircle` the extras argument object is: +No arguments -```javascript -{ - width: number, // the width of the svg canvas - height: number, // the number fo the svg canvas -} -``` +### Children -There might be additional parameters sent to the `extras` functions as well, depending on the chart type. +New for version 5.0. +Each chart (and axes) component now accepts React children. *Important* note is that all children must be a `react-native-svg` component +on order for it to be rendered by the chart. This API deprecates the old one with `extras` and `decorators`. +Everything that should be rendered above or below the chart should now be supplied as a child to said chart. +This allows you to declare the order in which your decorators should be rendered. If you want anything rendered below the chart, +simply add the prop `belowChart={true}`. There's a ton of examples in the [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples), go and have a look. -The `LineChart` passes the svg path data that rendered the line. (argument name `line`) -The `AreaChart` passes both the area svg path as well as the -svg path for the line following the upper bounds of the area. -(argument name `area` and `line` respectively) +### Grid +This library provides a helper component for drawing grids. +Simply place it as child to the chart of your choice and (if necessary) set its direction. -Take a look in the source code for additional details. +#### Props -![Decorator](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/extras.png) +| Property | Default | Description | +| --- | --- | --- | +| svg | `{}` | an object containing all the props that should be passed down to the underlying `react-native-svg` component. [See available props](https://github.com/react-native-community/react-native-svg#common-props) | +| direction | Grid.Direction.HORIZONTAL | The direction of the grid lines. | +| belowChart | true | whether or not to render below the chart | -[Examples](https://github.com/JesperLekland/react-native-svg-charts-examples) +### Examples +There is a ton of examples over at [react-native-svg-chart-exampels](https://github.com/JesperLekland/react-native-svg-charts-examples) ## License diff --git a/ios/react-native-svg-charts.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist b/ios/react-native-svg-charts.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist new file mode 100644 index 00000000..18d98100 --- /dev/null +++ b/ios/react-native-svg-charts.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist @@ -0,0 +1,8 @@ + + + + + IDEDidComputeMac32BitWarning + + + diff --git a/package.json b/package.json index 46e58d20..bd0dcf16 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-svg-charts", - "version": "4.2.0", + "version": "5.0.0", "private": false, "description": "Customizable charts (Line, Bar, Area, Pie, Circle, Progress) for React Native", "main": "src/index.js", diff --git a/src/bar-chart/bar-chart.js b/src/bar-chart/bar-chart.js index 6cb1ecf1..a8c3613e 100644 --- a/src/bar-chart/bar-chart.js +++ b/src/bar-chart/bar-chart.js @@ -6,7 +6,6 @@ import React, { PureComponent } from 'react' import { View } from 'react-native' import Svg from 'react-native-svg' import Path from '../animated-path' -import Grid from '../grid' class BarChart extends PureComponent { @@ -122,14 +121,10 @@ class BarChart extends PureComponent { animate, animationDuration, style, - showGrid, numberOfTicks, - gridProps, - extras, - renderDecorator, - renderGrid = Grid, svg, horizontal, + children, } = this.props const { height, width } = this.state @@ -157,6 +152,16 @@ class BarChart extends PureComponent { area.path !== null )) + const extraProps = { + x, + y, + width, + height, + bandwidth, + ticks, + data, + } + return ( this._onLayout(event) } > - {showGrid && renderGrid({ x, y, ticks, data, gridProps })} + { + React.Children.map(children, child => { + if(child.props.belowChart) { + return React.cloneElement(child, extraProps) + } + }) + } { areas.map((area, index) => { @@ -182,17 +193,13 @@ class BarChart extends PureComponent { ) }) } - - {data.map((item, index) => renderDecorator( - { - item, - x, - y, - index, - bandwidth, - } - ))} - {extras.map((extra, index) => extra({ item: extra, x, y, index, width, height }))} + { + React.Children.map(children, child => { + if(!child.props.belowChart) { + return React.cloneElement(child, extraProps) + } + }) + } @@ -217,13 +224,8 @@ BarChart.propTypes = { bottom: PropTypes.number, }), numberOfTicks: PropTypes.number, - showGrid: PropTypes.bool, gridMin: PropTypes.number, gridMax: PropTypes.number, - gridProps: PropTypes.object, - extras: PropTypes.array, - renderDecorator: PropTypes.func, - renderGrid: PropTypes.func, svg: PropTypes.object, } @@ -232,11 +234,7 @@ BarChart.defaultProps = { spacingOuter: 0.05, contentInset: {}, numberOfTicks: 10, - showGrid: true, - extras: [], svg: {}, - renderDecorator: () => { - }, yAccessor: ({ item }) => item, } diff --git a/src/chart.js b/src/chart.js index db645e55..46146982 100644 --- a/src/chart.js +++ b/src/chart.js @@ -6,7 +6,6 @@ import React, { PureComponent } from 'react' import { View } from 'react-native' import Svg from 'react-native-svg' import Path from './animated-path' -import Grid from './grid' class Chart extends PureComponent { @@ -35,7 +34,6 @@ class Chart extends PureComponent { style, animate, animationDuration, - showGrid, numberOfTicks, contentInset: { top = 0, @@ -45,11 +43,8 @@ class Chart extends PureComponent { }, gridMax, gridMin, - renderDecorator, - extras, - gridProps, svg, - renderGrid = Grid, + children, } = this.props const { width, height } = this.state @@ -86,9 +81,11 @@ class Chart extends PureComponent { const ticks = y.ticks(numberOfTicks) - const extraData = { + const extraProps = { x, y, + data, + ticks, width, height, ...paths, @@ -98,7 +95,14 @@ class Chart extends PureComponent { this._onLayout(event) }> - {showGrid && renderGrid({ x, y, ticks, data, gridProps })} + { + React.Children.map(children, child => { + if (child.props.belowChart) { + return React.cloneElement(child, extraProps) + } + return null + }) + } - {data.map((value, index) => renderDecorator({ x, y, value, index }))} - {extras.map((item, index) => item({ ...extraData, index }))} + { + React.Children.map(children, child => { + if (!child.props.belowChart) { + return React.cloneElement(child, extraProps) + } + return null + }) + } @@ -135,15 +145,10 @@ Chart.propTypes = { bottom: PropTypes.number, }), numberOfTicks: PropTypes.number, - extras: PropTypes.arrayOf(PropTypes.func), - - renderDecorator: PropTypes.func, gridMin: PropTypes.number, gridMax: PropTypes.number, - showGrid: PropTypes.bool, gridProps: PropTypes.object, - renderGrid: PropTypes.func, xScale: PropTypes.func, yScale: PropTypes.func, @@ -159,14 +164,10 @@ Chart.defaultProps = { curve: shape.curveLinear, contentInset: {}, numberOfTicks: 10, - showGrid: true, - extras: [], xScale: scale.scaleLinear, yScale: scale.scaleLinear, xAccessor: ({ index }) => index, yAccessor: ({ item }) => item, - renderDecorator: () => { - }, } export default Chart diff --git a/src/decorator.js b/src/decorator.js new file mode 100644 index 00000000..b5b2e595 --- /dev/null +++ b/src/decorator.js @@ -0,0 +1,16 @@ +import React from 'react' +import { G } from 'react-native-svg' + +const Decorator = ({ children, data, ...props }) => { + return ( + + { + React.Children.map(children, child => { + return data.map((value, index) => React.cloneElement(child, { value, index, ...props })) + }) + } + + ) +} + +export default Decorator diff --git a/src/extra.js b/src/extra.js new file mode 100644 index 00000000..302927f4 --- /dev/null +++ b/src/extra.js @@ -0,0 +1,16 @@ +import React from 'react' +import { G } from 'react-native-svg' + +const Extra = ({ children, ...props }) => { + return ( + + { + React.Children.map(children, child => { + return React.cloneElement(child, props) + }) + } + + ) +} + +export default Extra diff --git a/src/grid.js b/src/grid.js index 73ff6fed..d7b698a1 100644 --- a/src/grid.js +++ b/src/grid.js @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import { G, Line } from 'react-native-svg' -const Horizontal = ({ ticks = [], y, gridProps = {} }) => { +const Horizontal = ({ ticks = [], y, svg }) => { return ( { @@ -15,16 +15,15 @@ const Horizontal = ({ ticks = [], y, gridProps = {} }) => { y2={ y(tick) } strokeWidth={ 1 } stroke={ 'rgba(0,0,0,0.2)' } - { ...gridProps } + { ...svg } /> )) - } ) } -const Vertical = ({ ticks, x, gridProps = {} }) => { +const Vertical = ({ ticks = [], x, svg }) => { return ( { @@ -37,7 +36,7 @@ const Vertical = ({ ticks, x, gridProps = {} }) => { x2={ x(tick) } strokeWidth={ 1 } stroke={ 'rgba(0,0,0,0.2)' } - { ...gridProps } + { ...svg } /> )) @@ -56,15 +55,14 @@ const Both = (props) => { } Vertical.propTypes = { - x: PropTypes.func.isRequired, - dataPoints: PropTypes.array.isRequired, - gridProps: PropTypes.object, + x: PropTypes.func, + dataPoints: PropTypes.array, + svg: PropTypes.object, } Horizontal.propTypes = { - y: PropTypes.func.isRequired, - ticks: PropTypes.array.isRequired, - gridProps: PropTypes.object, + y: PropTypes.func, + ticks: PropTypes.array, } Both.propTypes = { @@ -72,10 +70,35 @@ Both.propTypes = { ...Horizontal.propTypes, } -export default Horizontal +const Direction = { + VERTICAL: 'VERTICAL', + HORIZONTAL: 'HORIZONTAL', + BOTH: 'BOTH', +} + +const Grid = ({ direction, ...props }) => { + if (direction === Direction.VERTICAL) { + return + } else if (direction === Direction.HORIZONTAL) { + return + } else if (direction === Direction.BOTH) { + return + } -export { - Horizontal, - Vertical, - Both, + return null } + +Grid.Direction = Direction + +Grid.propTypes = { + direction: PropTypes.oneOf(Object.values(Direction)), + belowChart: PropTypes.bool, + svg: PropTypes.object, +} + +Grid.defaultProps = { + direction: Direction.HORIZONTAL, + belowChart: true, +} + +export default Grid diff --git a/src/index.js b/src/index.js index d33d0f21..17000bba 100644 --- a/src/index.js +++ b/src/index.js @@ -8,7 +8,7 @@ import ProgressCircle from './progress-circle' import XAxis from './x-axis' import YAxis from './y-axis' import Decorators from './chart-decorators' -import * as Grid from './grid' +import Grid from './grid' import Path from './animated-path' export { diff --git a/src/pie-chart.js b/src/pie-chart.js index 49101396..ffb9e447 100644 --- a/src/pie-chart.js +++ b/src/pie-chart.js @@ -38,10 +38,9 @@ class PieChart extends PureComponent { animate, animationDuration, style, - renderDecorator, sort, valueAccessor, - extras, + children, } = this.props const { height, width } = this.state @@ -104,9 +103,17 @@ class PieChart extends PureComponent { .sort(sort) (data) - const extraData = { + const slices = pieSlices.map((slice, index) =>({ + ...slice, + pieCentroid: arcs[index].centroid(slice), + labelCentroid: labelArcs[index].centroid(slice), + })) + + const extraProps = { width, height, + data, + slices, } return ( @@ -116,7 +123,19 @@ class PieChart extends PureComponent { onLayout={ event => this._onLayout(event) } > - + {/* center the progress circle*/} + + { + React.Children.map(children, child => { + if (child.props.belowChart) { + return React.cloneElement(child, extraProps) + } + return null + }) + } { pieSlices.map((slice, index) => { const { key, onPress, svg } = data[ index ] return ( @@ -130,15 +149,14 @@ class PieChart extends PureComponent { /> ) })} - { pieSlices.map((slice, index) => renderDecorator({ - index, - item: data[ index ], - height, - width, - pieCentroid: arcs[ index ].centroid(slice), - labelCentroid: labelArcs[ index ].centroid(slice), - })) } - { extras.map((item, index) => item({ ...extraData, index })) } + { + React.Children.map(children, child => { + if (!child.props.belowChart) { + return React.cloneElement(child, extraProps) + } + return null + }) + } @@ -161,10 +179,8 @@ PieChart.propTypes = { animate: PropTypes.bool, animationDuration: PropTypes.number, style: PropTypes.any, - renderDecorator: PropTypes.func, sort: PropTypes.func, valueAccessor: PropTypes.func, - extras: PropTypes.arrayOf(PropTypes.func), } PieChart.defaultProps = { @@ -174,9 +190,6 @@ PieChart.defaultProps = { valueAccessor: ({ item }) => item.value, innerRadius: '50%', sort: (a, b) => b.value - a.value, - renderDecorator: () => { - }, - extras: [], } export default PieChart diff --git a/src/progress-circle.js b/src/progress-circle.js index 2feb5ed8..8881b1a0 100644 --- a/src/progress-circle.js +++ b/src/progress-circle.js @@ -27,7 +27,7 @@ class ProgressCircle extends PureComponent { endAngle, animate, animateDuration, - extras, + children, } = this.props let { progress } = this.props @@ -40,6 +40,7 @@ class ProgressCircle extends PureComponent { progress = 0 } + // important order to have progress render over "rest" const data = [ { key: 'rest', @@ -55,9 +56,11 @@ class ProgressCircle extends PureComponent { const pieSlices = shape .pie() + .value(d => d.value) + .sort((a) => a.key === 'rest' ? 1 : -1) .startAngle(startAngle) .endAngle(endAngle) - (data.map(d => d.value)) + (data) const arcs = pieSlices.map((slice, index) => ( { @@ -73,10 +76,7 @@ class ProgressCircle extends PureComponent { } )) - const x = width / 2 - const y = height / 2 - - const extraData = { + const extraProps = { width, height, } @@ -87,10 +87,19 @@ class ProgressCircle extends PureComponent { onLayout={ event => this._onLayout(event) } > + {/* center the progress circle*/} + { + React.Children.map(children, child => { + if (child.props.belowChart) { + return React.cloneElement(child, extraProps) + } + return null + }) + } {arcs.map((shape, index) => { return ( ) })} - {extras.map((item, index) => item({ ...extraData, index }))} + { + React.Children.map(children, child => { + if (!child.props.belowChart) { + return React.cloneElement(child, extraProps) + } + return null + }) + } @@ -120,7 +136,6 @@ ProgressCircle.propTypes = { endAngle: PropTypes.number, animate: PropTypes.bool, animateDuration: PropTypes.number, - extras: PropTypes.arrayOf(PropTypes.func), } ProgressCircle.defaultProps = { @@ -129,7 +144,6 @@ ProgressCircle.defaultProps = { strokeWidth: 5, startAngle: 0, endAngle: Math.PI * 2, - extras: [], } export default ProgressCircle diff --git a/src/stacked-area-chart.js b/src/stacked-area-chart.js index 08692ee2..455bc100 100644 --- a/src/stacked-area-chart.js +++ b/src/stacked-area-chart.js @@ -5,7 +5,6 @@ import * as shape from 'd3-shape' import React, { PureComponent } from 'react' import { View } from 'react-native' import { Defs, G, Svg } from 'react-native-svg' -import Grid from './grid' import Path from './animated-path' class AreaStack extends PureComponent { @@ -42,7 +41,6 @@ class AreaStack extends PureComponent { style, renderGradient, curve, - showGrid, numberOfTicks, contentInset: { top = 0, @@ -52,9 +50,7 @@ class AreaStack extends PureComponent { }, gridMin, gridMax, - gridProps, - renderDecorator, - extras, + children, offset, order, } = this.props @@ -101,11 +97,12 @@ class AreaStack extends PureComponent { } }) - const extraData = { + const extraProps = { x, y, width, height, + ticks, } return ( @@ -115,12 +112,13 @@ class AreaStack extends PureComponent { onLayout={ event => this._onLayout(event) } > - { showGrid && - + { + React.Children.map(children, child => { + if (child.props.belowChart) { + return React.cloneElement(child, extraProps) + } + return null + }) } { areas.map((area, index) => ( @@ -145,12 +143,14 @@ class AreaStack extends PureComponent { ) ) } - { series.map((serie) => { - return data.map((key, index) => { - return renderDecorator({ x, y, index, value: serie[ index ][ 1 ] }) + { + React.Children.map(children, child => { + if (!child.props.belowChart) { + return React.cloneElement(child, extraProps) + } + return null }) - }) } - { extras.map((item, index) => item({ ...extraData, index })) } + } diff --git a/src/stacked-bar-chart.js b/src/stacked-bar-chart.js index afc176b1..1ce31cee 100644 --- a/src/stacked-bar-chart.js +++ b/src/stacked-bar-chart.js @@ -6,7 +6,6 @@ import React, { PureComponent } from 'react' import { View } from 'react-native' import Svg, { Defs, G } from 'react-native-svg' import Path from './animated-path' -import Grid from './grid' class BarChart extends PureComponent { static extractDataPoints(data, keys, order = shape.stackOrderNone, offset = shape.stackOffsetNone) { @@ -133,13 +132,11 @@ class BarChart extends PureComponent { animate, animationDuration, style, - showGrid, renderGradient, numberOfTicks, gridMax, gridMin, - gridProps, - extras, + children, horizontal, } = this.props @@ -170,11 +167,27 @@ class BarChart extends PureComponent { const areas = this.calcAreas(x, y, series) + const extraProps = { + x, + y, + width, + height, + ticks, + data, + } + return ( this._onLayout(event) }> - {showGrid && } + { + React.Children.map(children, child => { + if (child.props.belowChart) { + return React.cloneElement(child, extraProps) + } + return null + }) + } {areas.map((bar, index) => { return ( @@ -194,7 +207,14 @@ class BarChart extends PureComponent { ) })} - {extras.map((extra, index) => extra({ item: extra, x, y, index, width, height }))} + { + React.Children.map(children, child => { + if (!child.props.belowChart) { + return React.cloneElement(child, extraProps) + } + return null + }) + } diff --git a/storybook/stories/area-chart/index.js b/storybook/stories/area-chart/index.js index 216b8ef1..4b091799 100644 --- a/storybook/stories/area-chart/index.js +++ b/storybook/stories/area-chart/index.js @@ -1,5 +1,5 @@ import React from 'react' -import { AreaChart } from 'react-native-svg-charts' +import { AreaChart, Grid } from 'react-native-svg-charts' import * as shape from 'd3-shape' class AreaChartExample extends React.PureComponent { @@ -15,7 +15,9 @@ class AreaChartExample extends React.PureComponent { contentInset={{ top: 30, bottom: 30 }} curve={ shape.curveNatural } svg={{ fill: 'rgba(134, 65, 244, 0.8)' }} - /> + > + + ) } } diff --git a/storybook/stories/area-stack/index.js b/storybook/stories/area-stack/index.js index f6f61250..ac22cc8b 100644 --- a/storybook/stories/area-stack/index.js +++ b/storybook/stories/area-stack/index.js @@ -1,5 +1,5 @@ import React from 'react' -import { StackedAreaChart } from 'react-native-svg-charts' +import { StackedAreaChart, Grid } from 'react-native-svg-charts' import * as shape from 'd3-shape' class AreaStackChartExample extends React.PureComponent { @@ -48,7 +48,9 @@ class AreaStackChartExample extends React.PureComponent { colors={ colors } curve={ shape.curveNatural } showGrid={ false } - /> + > + + ) } } diff --git a/storybook/stories/area-stack/with-y-axis.js b/storybook/stories/area-stack/with-y-axis.js index 53f4f7f4..24875b89 100644 --- a/storybook/stories/area-stack/with-y-axis.js +++ b/storybook/stories/area-stack/with-y-axis.js @@ -1,5 +1,5 @@ import React from 'react' -import { StackedAreaChart, YAxis } from 'react-native-svg-charts' +import { StackedAreaChart, YAxis, Grid } from 'react-native-svg-charts' import * as shape from 'd3-shape' import { View } from 'react-native' @@ -50,7 +50,9 @@ class AreaStackWithAxisExample extends React.PureComponent { keys={ keys } colors={ colors } curve={ shape.curveNatural } - /> + > + + + > + + ) } diff --git a/storybook/stories/bar-chart/horizontal-grouped.js b/storybook/stories/bar-chart/horizontal-grouped.js index ee49bfa7..55e8f995 100644 --- a/storybook/stories/bar-chart/horizontal-grouped.js +++ b/storybook/stories/bar-chart/horizontal-grouped.js @@ -83,12 +83,13 @@ class BarChartExample extends React.PureComponent { fill: 'blue', }} horizontal={ true } - extras={ [ Gradient ] } contentInset={{ top: 10, bottom: 10 }} spacingInner={ 0.2 } gridMin={ 0 } - renderGrid={ Grid.Vertical } - /> + > + + + ) } diff --git a/storybook/stories/bar-chart/horizontal.js b/storybook/stories/bar-chart/horizontal.js index 6abe5a17..f3a63f7f 100644 --- a/storybook/stories/bar-chart/horizontal.js +++ b/storybook/stories/bar-chart/horizontal.js @@ -56,17 +56,19 @@ class BarChartExample extends React.PureComponent { ) const CUT_OFF = 50 - const Label = ({ item, x, y, index, bandwidth }) => ( - CUT_OFF ? x(0) + 10 : x(item.value) + 10 } - y={ y(index) + (bandwidth / 2) } - fontSize={ 14 } - fill={ item.value > CUT_OFF ? 'white' : 'black' } - alignmentBaseline={ 'middle' } - > - {item.label} - + const Labels = ({ x, y, bandwidth, data }) => ( + data.map((item, index) => ( + CUT_OFF ? x(0) + 10 : x(item.value) + 10 } + y={ y(index) + (bandwidth / 2) } + fontSize={ 14 } + fill={ item.value > CUT_OFF ? 'white' : 'black' } + alignmentBaseline={ 'middle' } + > + {item.label} + + )) ) return ( @@ -87,13 +89,14 @@ class BarChartExample extends React.PureComponent { svg={{ fill: 'blue', }} - extras={ [ Gradient ] } contentInset={{ top: 10, bottom: 10 }} spacingInner={ 0.2 } gridMin={ 0 } - renderDecorator={ Label } - renderGrid={ Grid.Vertical } - /> + > + + + + ) } diff --git a/storybook/stories/bar-chart/index.js b/storybook/stories/bar-chart/index.js index e398a4bd..771acd4f 100644 --- a/storybook/stories/bar-chart/index.js +++ b/storybook/stories/bar-chart/index.js @@ -1,5 +1,5 @@ import React from 'react' -import { BarChart } from 'react-native-svg-charts' +import { BarChart, Grid } from 'react-native-svg-charts' class BarChartExample extends React.PureComponent { @@ -14,7 +14,9 @@ class BarChartExample extends React.PureComponent { data={ data } svg={{ fill }} contentInset={{ top: 30, bottom: 30 }} - /> + > + + ) } diff --git a/storybook/stories/bar-stack/horizontal.js b/storybook/stories/bar-stack/horizontal.js index 4a888106..272a11a5 100644 --- a/storybook/stories/bar-stack/horizontal.js +++ b/storybook/stories/bar-stack/horizontal.js @@ -1,5 +1,5 @@ import React from 'react' -import { StackedBarChart } from 'react-native-svg-charts' +import { StackedBarChart, Grid } from 'react-native-svg-charts' class StackedBarChartExample extends React.PureComponent { render() { @@ -47,7 +47,9 @@ class StackedBarChartExample extends React.PureComponent { showGrid={ false } contentInset={{ top: 30, bottom: 30 }} horizontal={ true } - /> + > + + ) } } diff --git a/storybook/stories/bar-stack/index.js b/storybook/stories/bar-stack/index.js index 5e0d1f7f..91ffce74 100644 --- a/storybook/stories/bar-stack/index.js +++ b/storybook/stories/bar-stack/index.js @@ -1,5 +1,5 @@ import React from 'react' -import { StackedBarChart } from 'react-native-svg-charts' +import { StackedBarChart, Grid } from 'react-native-svg-charts' class StackedBarChartExample extends React.PureComponent { render() { @@ -46,7 +46,9 @@ class StackedBarChartExample extends React.PureComponent { data={ data } showGrid={ false } contentInset={{ top: 30, bottom: 30 }} - /> + > + + ) } } diff --git a/storybook/stories/custom-grid.js b/storybook/stories/custom-grid.js index d6b5dff7..4ba3aa77 100644 --- a/storybook/stories/custom-grid.js +++ b/storybook/stories/custom-grid.js @@ -47,9 +47,11 @@ class CustomGridExample extends React.PureComponent { data={ data } svg={{ stroke: 'rgb(134, 65, 244)', + strokeWidth: 5, }} - renderGrid={ CustomGrid } - /> + > + + ) } diff --git a/storybook/stories/decorator.js b/storybook/stories/decorator.js index d846a872..3e824501 100644 --- a/storybook/stories/decorator.js +++ b/storybook/stories/decorator.js @@ -1,6 +1,6 @@ import React from 'react' -import { AreaChart } from 'react-native-svg-charts' -import { Circle } from 'react-native-svg' +import { AreaChart, Grid } from 'react-native-svg-charts' +import { Circle, Path } from 'react-native-svg' class DecoratorExample extends React.PureComponent { @@ -8,23 +8,38 @@ class DecoratorExample extends React.PureComponent { const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ] + const Decorator = ({ x, y, data }) => { + return data.map((value, index) => ( + + )) + } + + const Line = ({ line }) => ( + + ) + return ( ( - - ) } - /> + > + + + + ) } diff --git a/storybook/stories/extras.js b/storybook/stories/extras.js index 60ebea62..64b5e356 100644 --- a/storybook/stories/extras.js +++ b/storybook/stories/extras.js @@ -1,5 +1,5 @@ import React from 'react' -import { LineChart } from 'react-native-svg-charts' +import { LineChart, Grid } from 'react-native-svg-charts' import * as shape from 'd3-shape' import { Circle, G, Line, Rect, Text } from 'react-native-svg' @@ -79,8 +79,11 @@ class ExtrasExample extends React.PureComponent { }} contentInset={{ top: 20, bottom: 20 }} curve={ shape.curveLinear } - extras={ [ HorizontalLine, Tooltip ] } - /> + > + + + + ) } diff --git a/storybook/stories/gradient-bar.js b/storybook/stories/gradient-bar.js index 8a7ca221..5076e020 100644 --- a/storybook/stories/gradient-bar.js +++ b/storybook/stories/gradient-bar.js @@ -22,12 +22,13 @@ class GradientBarExample extends React.PureComponent { style={{ height: 200 }} data={ data } contentInset={{ top: 20, bottom: 20 }} - extras={ [ Gradient ] } svg={{ strokeWidth: 2, fill: 'url(#gradient)', }} - /> + > + + ) } diff --git a/storybook/stories/gradient-line.js b/storybook/stories/gradient-line.js index 53aa7924..9e950682 100644 --- a/storybook/stories/gradient-line.js +++ b/storybook/stories/gradient-line.js @@ -26,8 +26,9 @@ class GradientLineExample extends React.PureComponent { strokeWidth: 2, stroke: 'url(#gradient)', }} - extras={ [ Gradient ] } - /> + > + + ) } diff --git a/storybook/stories/gradient.js b/storybook/stories/gradient.js index a0565e9d..73916792 100644 --- a/storybook/stories/gradient.js +++ b/storybook/stories/gradient.js @@ -22,9 +22,10 @@ class GradientExample extends React.PureComponent { style={{ height: 200 }} data={ data } contentInset={{ top: 20, bottom: 20 }} - extras={ [ Gradient ] } svg={{ fill: 'url(#gradient)' }} - /> + > + + ) } diff --git a/storybook/stories/grid-min-max.js b/storybook/stories/grid-min-max.js index d1f519d5..26b74fb8 100644 --- a/storybook/stories/grid-min-max.js +++ b/storybook/stories/grid-min-max.js @@ -8,6 +8,15 @@ class GridMinMaxExample extends React.PureComponent { const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ] + const Line = ({ line }) => ( + + ) + return ( ( - - ), - ] } - /> + > + + ) } diff --git a/storybook/stories/layered-charts.js b/storybook/stories/layered-charts.js index c6c2957a..ca32046e 100644 --- a/storybook/stories/layered-charts.js +++ b/storybook/stories/layered-charts.js @@ -1,5 +1,5 @@ import React from 'react' -import { AreaChart } from 'react-native-svg-charts' +import { AreaChart, Grid } from 'react-native-svg-charts' import * as shape from 'd3-shape' import { StyleSheet, View } from 'react-native' @@ -18,7 +18,9 @@ class LayeredChartsExample extends React.PureComponent { svg={{ fill: 'rgba(134, 65, 244, 0.5)' }} contentInset={{ top: 20, bottom: 20 }} curve={ shape.curveNatural } - /> + > + + + > + + ) } diff --git a/storybook/stories/partial-chart/area-chart.js b/storybook/stories/partial-chart/area-chart.js index f3785375..ce90999f 100644 --- a/storybook/stories/partial-chart/area-chart.js +++ b/storybook/stories/partial-chart/area-chart.js @@ -58,13 +58,12 @@ class PartialAreaChartExample extends React.PureComponent { fill: 'url(#gradient)', clipPath: 'url(#clip-path-1)', }} - extras={ [ - Gradient, - Clips, - Line, - DashedLine, - ] } - /> + > + + + + + ) } } diff --git a/storybook/stories/partial-chart/line-chart.js b/storybook/stories/partial-chart/line-chart.js index b40c7886..f65cbf9b 100644 --- a/storybook/stories/partial-chart/line-chart.js +++ b/storybook/stories/partial-chart/line-chart.js @@ -55,12 +55,11 @@ class PartialLineChartExample extends React.PureComponent { strokeWidth: 2, clipPath: 'url(#clip-path-1)', }} - extras={ [ - Clips, - Shadow, - DashedLine, - ] } - /> + > + + + + ) } } diff --git a/storybook/stories/pie-chart/with-center-text.js b/storybook/stories/pie-chart/with-center-text.js index 1087736b..fc54866a 100644 --- a/storybook/stories/pie-chart/with-center-text.js +++ b/storybook/stories/pie-chart/with-center-text.js @@ -1,34 +1,28 @@ import React from 'react' -import { Text } from 'react-native-svg' +import { Text, G } from 'react-native-svg' import { PieChart } from 'react-native-svg-charts' class PieChartWithCenterTextExample extends React.PureComponent { render() { - const titleText = () => { - return ( + const TextGroup = () => ( + Title - ) - } - - const subtitleText = () => { - return ( Subtitle - ) - } + + ) const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ] @@ -49,8 +43,9 @@ class PieChartWithCenterTextExample extends React.PureComponent { + > + + ) } diff --git a/storybook/stories/pie-chart/with-labels.js b/storybook/stories/pie-chart/with-labels.js index 585e2b78..d8e39520 100644 --- a/storybook/stories/pie-chart/with-labels.js +++ b/storybook/stories/pie-chart/with-labels.js @@ -18,32 +18,39 @@ class PieChartWithLabelExample extends React.PureComponent { key: `pie-${index}`, })) - return ( - ( + const Labels = ({ slices }) => { + return slices.map((slice, index) => { + const { labelCentroid, pieCentroid, data } = slice + return ( - ) } + ) + }) + } - /> + return ( + + + ) } diff --git a/storybook/stories/progress-circle/index.js b/storybook/stories/progress-circle/index.js index d7020dbe..f264cbaf 100644 --- a/storybook/stories/progress-circle/index.js +++ b/storybook/stories/progress-circle/index.js @@ -8,7 +8,7 @@ class ProgressCircleExample extends React.PureComponent { return ( ) diff --git a/storybook/stories/progress-circle/with-center-text.js b/storybook/stories/progress-circle/with-center-text.js index a2d7755a..3b55d2ad 100644 --- a/storybook/stories/progress-circle/with-center-text.js +++ b/storybook/stories/progress-circle/with-center-text.js @@ -1,42 +1,37 @@ import React from 'react' -import { Text } from 'react-native-svg' +import { Text, G } from 'react-native-svg' import { ProgressCircle } from 'react-native-svg-charts' class ProgressCircleWithCenterTextExample extends React.PureComponent { render() { - const titleText = () => { - return ( + const TextGroup = () => ( + - Progress Title + Title - ) - } - - const subtitleText = () => { - return ( - This is a subtitle + Subtitle - ) - } + + ) return ( + > + + ) } diff --git a/storybook/stories/x-axis/scale-linear.js b/storybook/stories/x-axis/scale-linear.js index 279c62d1..a5b64621 100644 --- a/storybook/stories/x-axis/scale-linear.js +++ b/storybook/stories/x-axis/scale-linear.js @@ -1,5 +1,5 @@ import React from 'react' -import { LineChart, XAxis } from 'react-native-svg-charts' +import { LineChart, XAxis, Grid } from 'react-native-svg-charts' import { View } from 'react-native' class XAxisExample extends React.PureComponent { @@ -16,7 +16,9 @@ class XAxisExample extends React.PureComponent { gridMin={ 0 } contentInset={{ top: 10, bottom: 10 }} svg={{ stroke: 'rgb(134, 65, 244)' }} - /> + > + + + > + + + > + + ) } diff --git a/storybook/storybook.js b/storybook/storybook.js index 3bf7b51d..b4194b95 100644 --- a/storybook/storybook.js +++ b/storybook/storybook.js @@ -10,7 +10,7 @@ configure(() => { // This assumes that storybook is running on the same host as your RN packager, // to set manually use, e.g. host: 'localhost' option -const StorybookUIRoot = getStorybookUI({ port: 7008, onDeviceUI: true }) +const StorybookUIRoot = getStorybookUI({ port: 7008, onDeviceUI: false }) // react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991 // https://github.com/storybooks/storybook/issues/2081