Merge remote-tracking branch 'origin/master' into dev

# Conflicts:
#	src/chart.js
#	src/pie-chart.js
#	src/progress-circle.js
#	src/x-axis.js
#	src/y-axis.js

CHANGELOG.md

@@ -1,21 +1,12 @@
 
-* **Support for styles xAxis labels**
+* **Support for horizontal StackedBarChart**
 
-  XAxis now supports complex data argument with `svg` property to style each label individually. See [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples) for usage.
-  Thanks to @fqueiruga for this ❤️
+  StackedBarChart now supports the prop `horizontal`
+  just as a regular BarChart
 
 
-* **Support for backgroundColor in ProgressCircle**
-
-  You can now customize the progress "background" color
-
-* **Support for strokeWidth in ProgressCircle**
-
-  Customize the width of the ProgressCircle
-
-* **Prettier transition in ProgressCircle from progress to background**
-
-  Old implementation used to have a small cutoff between the progress and the background.
-  Now the progress seems to be "inside" the circle instead.
+* **StackedBar/AreaChart adheres to new `extras` api**
 
+  StackedBarChart and StackedAreaChart was still on the legacy `renderExtras`
+  pattern. It has now been migrated to the single `extras` prop api.
 

README.md

@@ -87,7 +87,6 @@ yarn storybook
 | 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) |
-| renderOrder | `[ 'grid', 'chart', 'decorators', 'extras' ]` | A function, returning an array of strings, defining the order in which components should be rendered. First item from array gets rendered first. 
 
 ## Components
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-svg-charts",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "private": false,
   "description": "Customizable charts (Line, Bar, Area, Pie, Circle, Progress) for React Native",
   "main": "src/index.js",

src/chart.js

@@ -4,7 +4,7 @@ import * as shape from 'd3-shape'
 import PropTypes from 'prop-types'
 import React, { PureComponent } from 'react'
 import { View } from 'react-native'
-import Svg, { G } from 'react-native-svg'
+import Svg from 'react-native-svg'
 import Path from './animated-path'
 import Grid from './grid'
 
@@ -15,10 +15,6 @@ class Chart extends PureComponent {
         height: 0,
     }
 
-    _getComponentOrder(key) {
-        return this.props.renderOrder().findIndex(o => o === key)
-    }
-
     _onLayout(event) {
         const { nativeEvent: { layout: { height, width } } } = event
         this.setState({ height, width })
@@ -98,20 +94,20 @@ class Chart extends PureComponent {
             ...paths,
         }
 
-        const components = [
-            { key: 'grid', render: () => showGrid && renderGrid({ x, y, ticks, data, gridProps }) },
-            { key: 'chart', render: () => <Path fill={ 'none' } { ...svg } d={ paths.path } animate={ animate } animationDuration={ animationDuration }/> },
-            { key: 'decorators', render: () => data.map((value, index) => renderDecorator({ x, y, value, index })) },
-            { key: 'extras', render: () => extras.map((item, index) => item({ ...extraData, index })) },
-        ]
-            .filter(it => this._getComponentOrder(it.key) > -1)
-            .sort((a,b) => this._getComponentOrder(a.key) > this._getComponentOrder(b.key) ? 1 : -1)
-
         return (
             <View style={ style }>
                 <View style={{ flex: 1 }} onLayout={ event => this._onLayout(event) }>
                     <Svg style={{ flex: 1 }}>
-                        { components.map((it, i) => <G key={ i }>{it.render(i)}</G>) }
+                        {showGrid && renderGrid({ x, y, ticks, data, gridProps })}
+                        <Path
+                            fill={ 'none' }
+                            { ...svg }
+                            d={ paths.path }
+                            animate={ animate }
+                            animationDuration={ animationDuration }
+                        />
+                        {data.map((value, index) => renderDecorator({ x, y, value, index }))}
+                        {extras.map((item, index) => item({ ...extraData, index }))}
                     </Svg>
                 </View>
             </View>
@@ -154,8 +150,6 @@ Chart.propTypes = {
 
     xAccessor: PropTypes.func,
     yAccessor: PropTypes.func,
-
-    renderOrder: PropTypes.func,
 }
 
 Chart.defaultProps = {
@@ -171,8 +165,8 @@ Chart.defaultProps = {
     yScale: scale.scaleLinear,
     xAccessor: ({ index }) => index,
     yAccessor: ({ item }) => item,
-    renderDecorator: () => {},
-    renderOrder: () => [ 'grid', 'chart', 'decorators', 'extras' ],
+    renderDecorator: () => {
+    },
 }
 
 export default Chart

src/x-axis.js

@@ -60,6 +60,7 @@ class XAxis extends PureComponent {
             formatLabel,
             numberOfTicks,
             svg,
+            children,
         } = this.props
 
         const { width } = this.state
@@ -86,6 +87,7 @@ class XAxis extends PureComponent {
                         { formatLabel(ticks[0], 0) }
                     </Text>
                     <Svg style={ StyleSheet.absoluteFill }>
+                        {children}
                         {
                             // don't render labels if width isn't measured yet,
                             // causes rendering issues

src/y-axis.js

@@ -62,6 +62,7 @@ class YAxis extends PureComponent {
             min,
             max,
             svg,
+            children,
         } = this.props
 
         const { height } = this.state
@@ -99,6 +100,7 @@ class YAxis extends PureComponent {
                         {longestValue}
                     </Text>
                     <Svg style={ StyleSheet.absoluteFill }>
+                        {children}
                         {
                             // don't render labels if width isn't measured yet,
                             // causes rendering issues