diff --git a/src/animated-path.js b/src/animated-path.js index 4eee9cfc..a85faaf3 100644 --- a/src/animated-path.js +++ b/src/animated-path.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import { InteractionManager } from 'react-native' import PropTypes from 'prop-types' -import { Path } from 'react-native-svg' +import { Path, Rect } from 'react-native-svg' import * as interpolate from 'd3-interpolate-path' class AnimatedPath extends Component { @@ -80,26 +80,70 @@ class AnimatedPath extends Component { } render() { + const { radiusX, radiusY, showPlaceholderView, heightPlaceholderView, showCustomRect } = this.props + if (showCustomRect) { + + var commands = this.state.d.split(/(?=[LMC])/); + + var pointArrays = commands.map(function (d) { + var pointsArray = d.slice(1, d.length).split(','); + var pairsArray = []; + for (var i = 0; i < pointsArray.length; i += 2) { + pairsArray.push([+pointsArray[i], +pointsArray[i + 1]]); + } + return pairsArray; + }); + + const width = Math.abs(pointArrays[1][0][0] - pointArrays[0][0][0]); + const height = Math.abs(pointArrays[2][0][1] - pointArrays[1][0][1]); + const x = Math.abs(pointArrays[0][0][0]); + const y = Math.abs(pointArrays[0][0][1]); + return ( - + {showPlaceholderView && } + (this.component = ref)} {...this.props} - d={this.props.animate ? this.state.d : this.props.d} /> + ) + } else { + return ( + (this.component = ref)} + {...this.props} + d={this.props.animate ? this.state.d : this.props.d} + /> + ) } } +} AnimatedPath.propTypes = { animate: PropTypes.bool, animationDuration: PropTypes.number, renderPlaceholder: PropTypes.func, + radiusX: PropTypes.number, + radiusY: PropTypes.number, + showPlaceholderView: PropTypes.bool, + heightPlaceholderView: PropTypes.number, + showCustomRect: PropTypes.bool, ...Path.propTypes, } AnimatedPath.defaultProps = { animate: false, animationDuration: 300, + radiusX: 10, + radiusY: 10, + showPlaceholderView: true, + showCustomRect: true, + heightPlaceholderView: 220, renderPlaceholder: () => null, } diff --git a/src/bar-chart/bar-chart.js b/src/bar-chart/bar-chart.js index 0ed426c5..64cab344 100644 --- a/src/bar-chart/bar-chart.js +++ b/src/bar-chart/bar-chart.js @@ -121,7 +121,7 @@ class BarChart extends PureComponent { } render() { - const { data, animate, animationDuration, style, numberOfTicks, svg, horizontal, children } = this.props + const { data, animate, animationDuration, style, numberOfTicks, svg, horizontal, children, radiusX, radiusY, heightPlaceholderView, showPlaceholderView, showCustomRect } = this.props const { height, width } = this.state @@ -173,6 +173,11 @@ class BarChart extends PureComponent { return (