🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

react-native-chart

Package Overview
Dependencies
Maintainers
2
Versions
25
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-chart - npm Package Compare versions

Comparing version

1.0.1-beta
to
1.0.2-beta

2

dist/BarChart.js

@@ -33,3 +33,3 @@ Object.defineProperty(exports,"__esModule",{value:true});var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};var _jsxFileName='src/BarChart.js';var _slicedToArray=function(){function sliceIterator(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[typeof Symbol==='function'?Symbol.iterator:'@@iterator'](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally {try{if(!_n&&_i["return"])_i["return"]();}finally {if(_d)throw _e;}}return _arr;}return function(arr,i){if(Array.isArray(arr)){return arr;}else if((typeof Symbol==='function'?Symbol.iterator:'@@iterator') in Object(arr)){return sliceIterator(arr,i);}else {throw new TypeError("Invalid attempt to destructure non-iterable instance");}};}();var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value" in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();

var WIDTH=_this.props.width;
var widthPercent=_this.props.data.widthPercent||0.5;
var widthPercent=_this.props.widthPercent||0.5;
if(widthPercent>1)widthPercent=1;

@@ -36,0 +36,0 @@ if(widthPercent<0)widthPercent=0;

32

dist/Chart.js

@@ -57,2 +57,3 @@ 'use strict';Object.defineProperty(exports,"__esModule",{value:true});var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};var _jsxFileName='src/Chart.js';var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value" in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();

function Chart(props){_classCallCheck(this,Chart);var _this=_possibleConstructorReturn(this,Object.getPrototypeOf(Chart).call(this,

@@ -129,8 +130,5 @@ props));_this.

_onContainerLayout=function(e){return _this.setState({
containerHeight:Math.ceil(e.nativeEvent.layout.height)+1,
containerWidth:Math.ceil(e.nativeEvent.layout.width)});};_this.state={bounds:{min:0,max:0}};return _this;}_createClass(Chart,[{key:'componentDidMount',value:function componentDidMount(){this._computeBounds();}},{key:'componentWillUpdate',value:function componentWillUpdate(){_reactNative.LayoutAnimation.configureNext(_reactNative.LayoutAnimation.Presets.easeInEaseOut);}},{key:'componentDidUpdate',value:function componentDidUpdate(props){if(this.props!==props){this._computeBounds();}}},{key:'_computeBounds',value:function _computeBounds(){var min=Infinity;var max=-Infinity;var data=this.props.data||[];data.forEach(function(XYPair){var number=XYPair[1];if(number<min)min=number;if(number>max)max=number;});min=Math.round(min);max=Math.round(max); // Exit if we want tight bounds
containerWidth:Math.ceil(e.nativeEvent.layout.width)});};_this.state={bounds:{min:0,max:0}};return _this;}_createClass(Chart,[{key:'componentDidMount',value:function componentDidMount(){this._computeBounds();}},{key:'componentDidUpdate',value:function componentDidUpdate(props){if(this.props!==props){this._computeBounds();}}},{key:'_computeBounds',value:function _computeBounds(){var min=Infinity;var max=-Infinity;var data=this.props.data||[];data.forEach(function(XYPair){var number=XYPair[1];if(number<min)min=number;if(number>max)max=number;});min=Math.round(min);max=Math.round(max); // Exit if we want tight bounds
if(this.props.tightBounds){return this.setState({bounds:{min:min,max:max}});}max=getRoundNumber(max,this.props.verticalGridStep);if(min<0){var step=void 0;if(this.props.verticalGridStep>3){step=Math.abs(max-min)/(this.props.verticalGridStep-1);}else {step=Math.max(Math.abs(max-min)/2,Math.max(Math.abs(min),Math.abs(max)));}step=getRoundNumber(step,this.props.verticalGridStep);var newMin=void 0;var newMax=void 0;if(Math.abs(min)>Math.abs(max)){var m=Math.ceil(Math.abs(min)/step);newMin=step*m*(min>0?1:-1);newMax=step*(this.props.verticalGridStep-m)*(max>0?1:-1);}else {var _m=Math.ceil(Math.abs(max)/step);newMax=step*_m*(max>0?1:-1);newMin=step*(this.props.verticalGridStep-_m)*(min>0?1:-1);}if(min<newMin){newMin-=step;newMax-=step;}if(max>newMax+step){newMin+=step;newMax+=step;}if(max<min){var tmp=max;max=min;min=tmp;}}return this.setState({bounds:{max:max,min:min}});}},{key:'_minVerticalBound',value:function _minVerticalBound()

@@ -152,3 +150,3 @@

return (
_react2.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:150}},
_react2.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:148}},
function(){

@@ -161,6 +159,6 @@ var ChartType=components[_this2.props.type]||_BarChart2.default;

style:[_this2.props.style||{},{flex:1,flexDirection:'column'}],
onLayout:_this2._onContainerLayout,__source:{fileName:_jsxFileName,lineNumber:155}},
onLayout:_this2._onContainerLayout,__source:{fileName:_jsxFileName,lineNumber:153}},
_react2.default.createElement(_reactNative.View,{style:[styles.default,{flexDirection:'row'}],__source:{fileName:_jsxFileName,lineNumber:160}},
_react2.default.createElement(_reactNative.View,{ref:'yAxis',__source:{fileName:_jsxFileName,lineNumber:161}},
_react2.default.createElement(_reactNative.View,{style:[styles.default,{flexDirection:'row'}],__source:{fileName:_jsxFileName,lineNumber:158}},
_react2.default.createElement(_reactNative.View,{ref:'yAxis',__source:{fileName:_jsxFileName,lineNumber:159}},
_react2.default.createElement(_yAxis2.default,_extends({},

@@ -174,3 +172,3 @@ _this2.props,{

maxVerticalBound:_this2.state.bounds.max,
style:{width:_this2.props.yAxisWidth},__source:{fileName:_jsxFileName,lineNumber:162}}))),
style:{width:_this2.props.yAxisWidth},__source:{fileName:_jsxFileName,lineNumber:160}}))),

@@ -184,3 +182,3 @@

minVerticalBound:_this2.state.bounds.min,
maxVerticalBound:_this2.state.bounds.max,__source:{fileName:_jsxFileName,lineNumber:173}}))),
maxVerticalBound:_this2.state.bounds.max,__source:{fileName:_jsxFileName,lineNumber:171}}))),

@@ -190,3 +188,3 @@

return (
_react2.default.createElement(_reactNative.View,{ref:'xAxis',__source:{fileName:_jsxFileName,lineNumber:184}},
_react2.default.createElement(_reactNative.View,{ref:'xAxis',__source:{fileName:_jsxFileName,lineNumber:182}},
_react2.default.createElement(_xAxis2.default,_extends({},

@@ -198,3 +196,3 @@ _this2.props,{

align:axisAlign,
style:{marginLeft:_this2.props.yAxisWidth-1},__source:{fileName:_jsxFileName,lineNumber:185}}))));}()));}
style:{marginLeft:_this2.props.yAxisWidth-1},__source:{fileName:_jsxFileName,lineNumber:183}}))));}()));}

@@ -211,9 +209,11 @@

onLayout:_this2._onContainerLayout,
style:[_this2.props.style||{},styles.default],__source:{fileName:_jsxFileName,lineNumber:200}},
style:[_this2.props.style||{},styles.default],__source:{fileName:_jsxFileName,lineNumber:198}},
_react2.default.createElement(ChartType,_extends({},
_this2.props,{
width:_this2.state.containerWidth,
height:_this2.state.containerHeight,
data:_this2.props.data,__source:{fileName:_jsxFileName,lineNumber:205}}))));}()));}}]);return Chart;}(_react.Component);Chart.defaultProps={data:[],animationDuration:0.5,axisColor:C.BLACK,axisLabelColor:C.BLACK,axisLineWidth:1,axisTitleColor:C.GREY,axisTitleFontSize:16,chartFontSize:14,dataPointRadius:3,gridColor:C.BLACK,gridLineWidth:0.5,hideHorizontalGridLines:false,hideVerticalGridLines:false,horizontalScale:1,labelFontSize:10,lineWidth:1,showAxis:true,showDataPoint:false,showGrid:true,showXAxisLabels:true,showYAxisLabels:true,tightBounds:false,verticalGridStep:4,xAxisHeight:20,yAxisWidth:30};exports.default=Chart;
data:_this2.props.data,
width:_this2.state.containerWidth-_this2.props.yAxisWidth,
height:_this2.state.containerHeight-_this2.props.xAxisHeight,
minVerticalBound:_this2.state.bounds.min,
maxVerticalBound:_this2.state.bounds.max,__source:{fileName:_jsxFileName,lineNumber:203}}))));}()));}}]);return Chart;}(_react.Component);Chart.defaultProps={data:[],animated:true,animationDuration:300,axisColor:C.BLACK,axisLabelColor:C.BLACK,axisLineWidth:1,axisTitleColor:C.GREY,axisTitleFontSize:16,chartFontSize:14,dataPointRadius:3,gridColor:C.BLACK,gridLineWidth:0.5,hideHorizontalGridLines:false,hideVerticalGridLines:false,horizontalScale:1,labelFontSize:10,lineWidth:1,showAxis:true,showDataPoint:false,showGrid:true,showXAxisLabels:true,showYAxisLabels:true,tightBounds:false,verticalGridStep:4,xAxisHeight:20,yAxisWidth:30};exports.default=Chart;

@@ -220,0 +220,0 @@

35

dist/LineChart.js

@@ -34,2 +34,10 @@ Object.defineProperty(exports,"__esModule",{value:true});var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};var _jsxFileName='src/LineChart.js';var _slicedToArray=function(){function sliceIterator(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[typeof Symbol==='function'?Symbol.iterator:'@@iterator'](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally {try{if(!_n&&_i["return"])_i["return"]();}finally {if(_d)throw _e;}}return _arr;}return function(arr,i){if(Array.isArray(arr)){return arr;}else if((typeof Symbol==='function'?Symbol.iterator:'@@iterator') in Object(arr)){return sliceIterator(arr,i);}else {throw new TypeError("Invalid attempt to destructure non-iterable instance");}};}();var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value" in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();

_drawLine=function(){

@@ -54,2 +62,3 @@ var containerHeight=_this.props.height;

var height=minBound*scale+(containerHeight-firstDataPoint*scale);
if(height<0)height=0;

@@ -64,3 +73,3 @@ var path=new Path().moveTo(0,height);

if(height<0)_height=20;
if(_height<0)_height=0;

@@ -80,11 +89,11 @@ var x=horizontalStep*i+horizontalStep;

return (
_react2.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:77}},
_react2.default.createElement(_reactNative.View,{style:{position:'absolute'},__source:{fileName:_jsxFileName,lineNumber:78}},
_react2.default.createElement(Surface,{width:containerWidth,height:containerHeight,__source:{fileName:_jsxFileName,lineNumber:79}},
_react2.default.createElement(AnimatedShape,{d:path,stroke:_this.props.color||C.BLUE,strokeWidth:_this.props.lineWidth,__source:{fileName:_jsxFileName,lineNumber:80}}),
_react2.default.createElement(AnimatedShape,{d:fillPath,fill:_this.props.fillColor,__source:{fileName:_jsxFileName,lineNumber:81}}))),
_react2.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:86}},
_react2.default.createElement(_reactNative.View,{style:{position:'absolute'},__source:{fileName:_jsxFileName,lineNumber:87}},
_react2.default.createElement(Surface,{width:containerWidth,height:containerHeight,__source:{fileName:_jsxFileName,lineNumber:88}},
_react2.default.createElement(AnimatedShape,{d:path,stroke:_this.props.color||C.BLUE,strokeWidth:_this.props.lineWidth,__source:{fileName:_jsxFileName,lineNumber:89}}),
_react2.default.createElement(AnimatedShape,{d:fillPath,fill:_this.props.fillColor,__source:{fileName:_jsxFileName,lineNumber:90}}))),
_react2.default.createElement(_reactNative.View,{style:{position:'absolute'},__source:{fileName:_jsxFileName,lineNumber:84}},
_react2.default.createElement(Surface,{width:containerWidth,height:containerHeight,__source:{fileName:_jsxFileName,lineNumber:85}})),
_react2.default.createElement(_reactNative.View,{style:{position:'absolute'},__source:{fileName:_jsxFileName,lineNumber:93}},
_react2.default.createElement(Surface,{width:containerWidth,height:containerHeight,__source:{fileName:_jsxFileName,lineNumber:94}})),

@@ -94,4 +103,4 @@ function(){

return (
_react2.default.createElement(Surface,{width:containerWidth,height:containerHeight+3,__source:{fileName:_jsxFileName,lineNumber:90}},
dataPoints.map(function(d,i){return _react2.default.createElement(_Circle2.default,_extends({key:i},d,{__source:{fileName:_jsxFileName,lineNumber:91}}));})));}()));};_this.state={opacity:new _reactNative.Animated.Value(0)};return _this;}_createClass(LineChart,[{key:'componentWillUpdate',value:function componentWillUpdate(){_reactNative.Animated.timing(this.state.opacity,{duration:0,toValue:0}).start();}},{key:'componentDidUpdate',value:function componentDidUpdate(){_reactNative.Animated.timing(this.state.opacity,{duration:500,toValue:1}).start();}},{key:'render',value:function render()
_react2.default.createElement(Surface,{width:containerWidth,height:containerHeight,__source:{fileName:_jsxFileName,lineNumber:99}},
dataPoints.map(function(d,i){return _react2.default.createElement(_Circle2.default,_extends({key:i},d,{__source:{fileName:_jsxFileName,lineNumber:100}}));})));}()));};var heightValue=props.animated?0:props.containerHeight;var opacityValue=props.animated?0:1;_this.state={height:new _reactNative.Animated.Value(heightValue),opacity:new _reactNative.Animated.Value(opacityValue)};return _this;}_createClass(LineChart,[{key:'componentWillUpdate',value:function componentWillUpdate(){if(props.animated){_reactNative.Animated.timing(this.state.opacity,{duration:0,toValue:0}).start();_reactNative.Animated.timing(this.state.height,{duration:0,toValue:0}).start();}}},{key:'componentDidUpdate',value:function componentDidUpdate(){if(props.animated){_reactNative.Animated.timing(this.state.height,{duration:this.props.animationDuration,toValue:1}).start();_reactNative.Animated.timing(this.state.opacity,{duration:this.props.animationDuration,toValue:1}).start();}}},{key:'render',value:function render()

@@ -106,5 +115,5 @@

return (
_react2.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:101}},
_react2.default.createElement(_Grid2.default,_extends({},this.props,{__source:{fileName:_jsxFileName,lineNumber:102}})),
_react2.default.createElement(_reactNative.Animated.View,{style:{opacity:this.state.opacity,backgroundColor:'transparent'},__source:{fileName:_jsxFileName,lineNumber:103}},
_react2.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:110}},
_react2.default.createElement(_Grid2.default,_extends({},this.props,{__source:{fileName:_jsxFileName,lineNumber:111}})),
_react2.default.createElement(_reactNative.Animated.View,{style:{height:this.state.height,opacity:this.state.opacity,backgroundColor:'transparent'},__source:{fileName:_jsxFileName,lineNumber:112}},
this._drawLine())));}}]);return LineChart;}(_react.Component);exports.default=LineChart;

9

package.json
{
"name": "react-native-chart",
"version": "1.0.1-beta",
"version": "1.0.2-beta",
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"lint": "eslint src",

@@ -12,8 +11,8 @@ "build": "babel src --out-dir dist",

"dependencies": {
},
"devDependencies": {
"babel-cli": "^6.10.1",
"babel-eslint": "^6.0.0",
"babel-plugin-transform-flow-strip-types": "^6.8.0",
"babel-preset-react-native": "^1.5.3",
"babel-preset-react-native": "^1.5.3"
},
"devDependencies": {
"eslint": "^2.8.0",

@@ -20,0 +19,0 @@ "eslint-config-airbnb": "^8.0.0",

64

react-native-chart.flow.js

@@ -8,24 +8,23 @@ declare type Chart = {

onDataPointPress?: Function,
axisColor: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
axisLabelColor: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
axisLineWidth: PropTypes.number,
gridColor: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
gridLineWidth: PropTypes.number,
hideHorizontalGridLines: PropTypes.bool,
hideVerticalGridLines: PropTypes.bool,
showAxis: PropTypes.bool,
showGrid: PropTypes.bool,
showXAxisLabels: PropTypes.bool,
showYAxisLabels: PropTypes.bool,
style: PropTypes.any,
tightBounds: PropTypes.bool,
verticalGridStep: PropTypes.number,
xAxisHeight: PropTypes.number,
yAxisTransform: PropTypes.func,
yAxisWidth: PropTypes.number,
axisColor?: number | string,
axisLabelColor?: number | string,
axisLineWidth?: number,
gridColor?: number | string,
gridLineWidth?: number,
hideHorizontalGridLines?: boolean,
hideVerticalGridLines?: boolean,
showAxis?: boolean,
showGrid?: boolean,
showXAxisLabels?: boolean,
showYAxisLabels?: boolean,
style?: any,
tightBounds?: boolean,
verticalGridStep?: number,
xAxisHeight?: number,
yAxisTransform?: Function,
yAxisWidth?: number,
// Bar chart props
color?: number | string,
cornerRadius?: number
// fillGradient: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), // TODO
cornerRadius?: number,
widthPercent?: number,

@@ -37,4 +36,4 @@

dataPointFillColor?: number | string,
dataPointRadius?: number
lineWidth?: number
dataPointRadius?: number,
lineWidth?: number,
showDataPoint?: boolean,

@@ -46,13 +45,14 @@

// TODO
// highlightRadius: PropTypes.number, // TODO
// pieCenterRatio: PropTypes.number, // TODO
// animationDuration: PropTypes.number, // TODO
// axisTitleColor: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
// axisTitleFontSize: PropTypes.number,
// chartFontSize: PropTypes.number,
// chartTitle: PropTypes.string,
// chartTitleColor: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
// labelFontSize: PropTypes.number,
// xAxisTitle: PropTypes.string,
// yAxisTitle: PropTypes.string,
highlightRadius?: number,
pieCenterRatio?: number,
animationDuration?: number,
axisTitleColor?: number | string,
axisTitleFontSize?: number,
chartFontSize?: number,
chartTitle?: string,
chartTitleColor?: number | string,
labelFontSize?: number,
xAxisTitle?: string,
yAxisTitle?: string,
fillGradient?: Array<number | string>,
};

7

README.md

@@ -112,2 +112,9 @@ # react-native-chart

| yAxisWidth | number | Width of the Y-axis container | No | 30 |
## TODO
- [ ] Code cleanup
- [ ] Multi-line chart
- [ ] Horizontal line chart
- [ ] Scatter chart
## Info/Support

@@ -114,0 +121,0 @@

2

src/BarChart.js

@@ -33,3 +33,3 @@ /* @flow */

const WIDTH = this.props.width;
let widthPercent = this.props.data.widthPercent || 0.5;
let widthPercent = this.props.widthPercent || 0.5;
if (widthPercent > 1) widthPercent = 1;

@@ -36,0 +36,0 @@ if (widthPercent < 0) widthPercent = 0;

16

src/Chart.js

@@ -31,3 +31,4 @@ /* @flow */

data: [],
animationDuration: 0.5,
animated: true,
animationDuration: 300,
axisColor: C.BLACK,

@@ -65,5 +66,2 @@ axisLabelColor: C.BLACK,

}
componentWillUpdate() {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
}

@@ -207,8 +205,10 @@ componentDidUpdate(props : any) {

>
<ChartType
<ChartType
{...this.props}
width={this.state.containerWidth}
height={this.state.containerHeight}
data={this.props.data}
/>
width={this.state.containerWidth - this.props.yAxisWidth}
height={this.state.containerHeight - this.props.xAxisHeight}
minVerticalBound={this.state.bounds.min}
maxVerticalBound={this.state.bounds.max}
/>
</View>

@@ -215,0 +215,0 @@ );

23

src/LineChart.js

@@ -23,11 +23,19 @@ /* @flow */

super(props);
this.state = { opacity: new Animated.Value(0) };
const heightValue = (props.animated) ? 0 : props.containerHeight;
const opacityValue = (props.animated) ? 0 : 1;
this.state = { height: new Animated.Value(heightValue), opacity: new Animated.Value(opacityValue) };
}
componentWillUpdate() {
Animated.timing(this.state.opacity, { duration: 0, toValue: 0 }).start();
if (props.animated) {
Animated.timing(this.state.opacity, { duration: 0, toValue: 0 }).start();
Animated.timing(this.state.height, { duration: 0, toValue: 0 }).start();
}
}
componentDidUpdate() {
Animated.timing(this.state.opacity, { duration: 500, toValue: 1 }).start();
if (props.animated) {
Animated.timing(this.state.height, { duration: this.props.animationDuration, toValue: 1 }).start();
Animated.timing(this.state.opacity, { duration: this.props.animationDuration, toValue: 1 }).start();
}
}

@@ -53,3 +61,4 @@

const firstDataPoint = data[0][1];
const height = (minBound * scale) + (containerHeight - (firstDataPoint * scale));
let height = (minBound * scale) + (containerHeight - (firstDataPoint * scale));
if (height < 0) height = 0;

@@ -64,3 +73,3 @@ const path = new Path().moveTo(0, height);

if (height < 0) _height = 20;
if (_height < 0) _height = 0;

@@ -93,3 +102,3 @@ const x = horizontalStep * (i) + horizontalStep;

return (
<Surface width={containerWidth} height={containerHeight + 3}>
<Surface width={containerWidth} height={containerHeight}>
{dataPoints.map((d, i) => <Circle key={i} {...d} />)}

@@ -107,3 +116,3 @@ </Surface>

<Grid {...this.props} />
<Animated.View style={{ opacity: this.state.opacity, backgroundColor: 'transparent' }}>
<Animated.View style={{ height: this.state.height, opacity: this.state.opacity, backgroundColor: 'transparent' }}>
{this._drawLine()}

@@ -110,0 +119,0 @@ </Animated.View>