Merge pull request #159 from JesperLekland/release/5.1.0

Release/5.1.0

CHANGELOG.md

@@ -1,46 +1,12 @@
+5.x.0
 
-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.
+* Added `cornerRadius` to progressCircle
+* Adhere to `Svg` api with `height` and `width` instead of `flex: 1`
+* StackedBarChart now supports `svg` prop for each data entry! Allowing onPress among other things.
+* StackedAreaChart now supports `svg` prop for each area! Allowing onPress among other things
+    * The two above changes does remove the other "svg" props from the charts, for example `renderGradient`
+    that is now replaces with the same gradient API as the other charts (i.e children).
+* PieChart supports `(start|end)Angle`
 
-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.
-
-## 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
 
 

README.md

@@ -122,7 +122,7 @@ Also see
 
 #### Example
 
-```javascript
+```jsx
 import React from 'react'
 import { AreaChart, Grid } from 'react-native-svg-charts'
 import * as shape from 'd3-shape'
@@ -162,15 +162,16 @@ 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.
+Very similar to an area chart but with multiple sets of data stacked together.
 We suggest that you read up on [d3 stacks](https://github.com/d3/d3-shape#stacks) in order to better understand this chart and its props
 See [Area stack chart with Y axis](https://github.com/JesperLekland/react-native-svg-charts-examples/blob/master/storybook/stories/area-stack/with-y-axis.js) to see how to use a YAxis with this component
+Use the `svgs` prop to pass in `react-native-svg` compliant props to each area.
 
 ![Stacked area chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/area-stack.png)
 
 #### Example
 
-```javascript
+```jsx
 import React from 'react'
 import { StackedAreaChart } from 'react-native-svg-charts'
 import * as shape from 'd3-shape'
@@ -212,6 +213,12 @@ class StackedAreaExample extends React.PureComponent {
 
         const colors = [ '#8800cc', '#aa00ff', '#cc66ff', '#eeccff' ]
         const keys   = [ 'apples', 'bananas', 'cherries', 'dates' ]
+        const svgs = [
+                    { onPress: () => console.log('apples') },
+                    { onPress: () => console.log('bananas') },
+                    { onPress: () => console.log('cherries') },
+                    { onPress: () => console.log('dates') },
+                ]
 
         return (
             <StackedAreaChart
@@ -221,6 +228,7 @@ class StackedAreaExample extends React.PureComponent {
                 colors={ colors }
                 curve={ shape.curveNatural }
                 showGrid={ false }
+                svgs={ svgs }
             />
         )
     }
@@ -259,7 +267,8 @@ when trying to layout decorators. It does however call with the rest of the [com
 ![Bar chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/bar-chart.png)
 
 #### Example
-```javascript
+
+```jsx
 import React from 'react'
 import { BarChart, Grid } from 'react-native-svg-charts'
 
@@ -307,15 +316,19 @@ Also supports all [Common arguments to children](#common-arguments-to-children)
 
 ### StackedBarChart
 
-The same as the [StackedAreaChart](#stackedareachart) except with bars.
+The same as the [StackedAreaChart](#stackedareachart) except with bars (and different `svgs` prop).
 We suggest that you read up on [d3 stacks](https://github.com/d3/d3-shape#stacks) in order to better understand this chart and its props
 
+The `svgs` prop here is not based on keys, but rather entries, as the user might want to specify different props
+for each entry in each bar. Therefore each key entry can contain a complex object that contains e.g an `svg` prop. See [this example](./storybook/stories/bar-stack/with-on-press.js) for inspiration
+
+
 ![Stacked bar chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/bar-stack.png)
 ![Stacked bar chart - horizontal](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/bar-stack-horizontal.png)
 
 #### Example
 
-```javascript
+```jsx
 import React from 'react'
 import { StackedBarChart } from 'react-native-svg-charts'
 
@@ -378,9 +391,10 @@ class StackedBarChartExample extends React.PureComponent {
 
 | Property | Default | Description |
 | --- | --- | --- |
-| data | **required** | An array of the data entries  |
+| data | **required** | An array of the data entries: each value can be a number or a complex object with custom `svg` props for example |
 | keys | **required** | This array should contain the object keys of interest (see above example)
 | colors | **required** | An array of equal size as `keys` with the color for each key |
+| valueAccessor | ({ item, key }) => item[key] | Very similar to the `yAccessor` of the other charts, usually needed when using complex objects as values |
 | horizontal | false | Boolean whether or not the bars should be horizontal |
 | 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 |
@@ -407,7 +421,7 @@ when trying to layout decorators. It does however call with the rest of the [com
 
 #### Example
 
-```javascript
+```jsx
 import React from 'react'
 import { LineChart, Grid } from 'react-native-svg-charts'
 
@@ -448,7 +462,8 @@ See more examples in the [examples repo](https://github.com/JesperLekland/react-
 ![Pie chart](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/pie-chart.png)
 
 #### Example
-```javascript
+
+```jsx
 import React from 'react'
 import { PieChart } from 'react-native-svg-charts'
 
@@ -493,6 +508,8 @@ class PieChartExample extends React.PureComponent {
 | innerRadius | "50%" | The inner radius, use this to create a donut. Takes either percentages or absolute numbers (pixels) |
 | 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 |
+| startAngle | 0 | The start angle in radians of the entire pie |
+| endAngle | Math.PI * 2 | The end angle in radians of the entire pie |
 | 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 |
 
 #### Arguments to children
@@ -509,7 +526,8 @@ class PieChartExample extends React.PureComponent {
 ![Progress circle](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/progress-circle.png)
 
 #### Example
-```javascript
+
+```jsx
 import React from 'react'
 import { ProgressCircle }  from 'react-native-svg-charts'
 
@@ -541,6 +559,17 @@ class ProgressCircleExample extends React.PureComponent {
 | startAngle | `0` | PropTypes.number |
 | endAngle | `Math.PI * 2` |  PropTypes.number |
 | strokeWidth | 5 |  PropTypes.number |
+| cornerRadius | 45 |  PropTypes.number |
+
+
+#### 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 |
+
 
 #### Arguments to children
 
@@ -560,7 +589,8 @@ It's very important that the component has the exact same view bounds (preferabl
 If the chart has property `contentInset` set it's very important that the YAxis has the same vertical contentInset.
 
 #### Example
-```javascript
+
+```jsx
 import React from 'react'
 import { LineChart, YAxis, Grid } from 'react-native-svg-charts'
 import { View } from 'react-native'
@@ -632,7 +662,8 @@ If the chart has property `contentInset` set it's very important that the XAxis
 The XAxis also supports the `xAccessor` prop, if it's not supplied it will assume that you're only interested in the index of the data set.
 
 #### Example
-```javascript
+
+```jsx
 import React from 'react'
 import { LineChart, XAxis, Grid } from 'react-native-svg-charts'
 import { View } from 'react-native'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-svg-charts",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "private": false,
   "description": "Customizable charts (Line, Bar, Area, Pie, Circle, Progress) for React Native",
   "main": "src/index.js",
@@ -10,6 +10,14 @@
     "storybook": "storybook start -p 7008",
     "eslint": "./node_modules/.bin/eslint ."
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.js": "eslint"
+  },
   "keywords": [
     "react-native",
     "react-component",
@@ -65,7 +73,9 @@
     "eslint-plugin-react": "^7.7.0",
     "eslint-plugin-react-native": "^2.3.2",
     "eslint-plugin-standard": "^3.0.1",
+    "husky": "^1.0.0-rc.8",
     "jest": "20.0.1",
+    "lint-staged": "^7.1.3",
     "react": "16.2.0",
     "react-dom": ">=16.0.0-alpha.12",
     "react-native": "0.52.2",

src/animated-path.js

@@ -11,9 +11,9 @@ class AnimatedPath extends Component {
         this.state = { d: props.d }
     }
 
-    componentWillReceiveProps(props) {
-        const { d: newD, animate } = props
-        const { d: oldD }          = this.props
+    componentDidUpdate(props) {
+        const { d: newD, animate } = this.props
+        const { d: oldD }          = props
 
         this.newD = newD
 

src/bar-chart/bar-chart.js

@@ -168,39 +168,42 @@ class BarChart extends PureComponent {
                     style={{ flex: 1 }}
                     onLayout={ event => this._onLayout(event) }
                 >
-                    <Svg style={{ flex: 1 }}>
-                        {
-                            React.Children.map(children, child => {
-                                if(child.props.belowChart) {
-                                    return React.cloneElement(child, extraProps)
-                                }
-                            })
-                        }
-                        {
-                            areas.map((area, index) => {
-
-                                const { bar: { svg: barSvg = {} }, path } = area
-
-                                return (
-                                    <Path
-                                        key={ index }
-                                        { ...svg }
-                                        { ...barSvg }
-                                        d={ path }
-                                        animate={ animate }
-                                        animationDuration={ animationDuration }
-                                    />
-                                )
-                            })
-                        }
-                        {
-                            React.Children.map(children, child => {
-                                if(!child.props.belowChart) {
-                                    return React.cloneElement(child, extraProps)
-                                }
-                            })
-                        }
-                    </Svg>
+                    {
+                        height > 0 && width > 0 &&
+                        <Svg style={{ height, width }}>
+                            {
+                                React.Children.map(children, child => {
+                                    if(child && child.props.belowChart) {
+                                        return React.cloneElement(child, extraProps)
+                                    }
+                                })
+                            }
+                            {
+                                areas.map((area, index) => {
+
+                                    const { bar: { svg: barSvg = {} }, path } = area
+
+                                    return (
+                                        <Path
+                                            key={ index }
+                                            { ...svg }
+                                            { ...barSvg }
+                                            d={ path }
+                                            animate={ animate }
+                                            animationDuration={ animationDuration }
+                                        />
+                                    )
+                                })
+                            }
+                            {
+                                React.Children.map(children, child => {
+                                    if(child && !child.props.belowChart) {
+                                        return React.cloneElement(child, extraProps)
+                                    }
+                                })
+                            }
+                        </Svg>
+                    }
                 </View>
             </View>
         )

src/chart-decorators/tooltip.js

@@ -58,6 +58,7 @@ Tooltip.propTypes = {
     height: PropTypes.number,
     stroke: PropTypes.string,
     pointStroke: PropTypes.string,
+    text: PropTypes.string,
 }
 
 export default Tooltip