From c02ee13a5958fa6bc3a80c9050c0019b10618fda Mon Sep 17 00:00:00 2001 From: Chris Kim Date: Thu, 22 Dec 2016 17:03:07 -0800 Subject: [PATCH] Users can utilize the barColors attribute to individually color each bar. --- dist/BarChart.js | 45 +++++----- dist/Chart.js | 103 +++++++++++------------ dist/Circle.js | 14 ++-- dist/Grid.js | 46 ++++++----- dist/LineChart.js | 133 +++++++++++++++--------------- dist/PieChart.js | 59 ++++++++------ dist/Wedge.js | 203 +++++++++++++++++++++++----------------------- dist/util.js | 28 +++++-- dist/xAxis.js | 34 +++++--- dist/yAxis.js | 46 ++++++----- package.json | 1 + src/BarChart.js | 2 +- 12 files changed, 384 insertions(+), 330 deletions(-) diff --git a/dist/BarChart.js b/dist/BarChart.js index 430c251..402fc40 100644 --- a/dist/BarChart.js +++ b/dist/BarChart.js @@ -1,34 +1,34 @@ -Object.defineProperty(exports,"__esModule",{value:true});var _extends=Object.assign||function(target){for(var i=1;imax)max=number;});});var ceilMax=Math.ceil(max);var floorMin=Math.floor(min);if(ceilMax-floorMin>this.props.verticalGridStep){min=floorMin;max=ceilMax;} // 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(minnewMax+step){newMin+=step;newMax+=step;}if(maxmax)max=number;});});var ceilMax=Math.ceil(max);var floorMin=Math.floor(min);if(ceilMax-floorMin>this.props.verticalGridStep){min=floorMin;max=ceilMax;}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(minnewMax+step){newMin+=step;newMax+=step;}if(max0?this.state.bounds.min:0;}},{key:'_maxVerticalBound',value:function _maxVerticalBound() - +return this.state.bounds.min>0?this.state.bounds.min:0; +}},{key:'_maxVerticalBound',value:function _maxVerticalBound() { if(this.props.tightBounds)return this.state.bounds.max; -return this.state.bounds.max>0?this.state.bounds.max:0;}},{key:'render',value:function render() - +return this.state.bounds.max>0?this.state.bounds.max:0; +}},{key:'render',value:function render() {var _this2=this; var components={'line':_LineChart2.default,'bar':_BarChart2.default,'pie':_PieChart2.default}; var axisAlign=this.props.type==='line'?'left':'center'; -return ( -_react2.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:167}}, +return( +_react2.default.createElement(_reactNative.View,null, function(){ var ChartType=components[_this2.props.type]||_BarChart2.default; if(_this2.props.showAxis&&Chart!==_PieChart2.default){ -return ( +return( _react2.default.createElement(_reactNative.View,{ ref:'container', style:[_this2.props.style||{},{flex:1,flexDirection:'column'}], -onLayout:_this2._onContainerLayout,__source:{fileName:_jsxFileName,lineNumber:172}}, +onLayout:_this2._onContainerLayout}, -_react2.default.createElement(_reactNative.View,{style:[styles.default,{flexDirection:'row'}],__source:{fileName:_jsxFileName,lineNumber:177}}, -_react2.default.createElement(_reactNative.View,{ref:'yAxis',__source:{fileName:_jsxFileName,lineNumber:178}}, +_react2.default.createElement(_reactNative.View,{style:[styles.default,{flexDirection:'row'}]}, +_react2.default.createElement(_reactNative.View,{ref:'yAxis'}, _react2.default.createElement(_yAxis2.default,_extends({}, _this2.props,{ data:_this2.props.data, @@ -186,7 +187,7 @@ containerWidth:_this2.state.containerWidth, maxVerticalBound:_this2.state.bounds.max, yAxisUseDecimal:_this2.props.yAxisUseDecimal, yAxisShortLabel:_this2.props.yAxisShortLabel, -style:{width:_this2.props.yAxisWidth},__source:{fileName:_jsxFileName,lineNumber:179}}))), +style:{width:_this2.props.yAxisWidth}}))), _react2.default.createElement(ChartType,_extends({}, @@ -195,31 +196,31 @@ 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:192}}))), +maxVerticalBound:_this2.state.bounds.max}))), function(){ -return ( -_react2.default.createElement(_reactNative.View,{ref:'xAxis',__source:{fileName:_jsxFileName,lineNumber:203}}, +return( +_react2.default.createElement(_reactNative.View,{ref:'xAxis'}, _react2.default.createElement(_xAxis2.default,_extends({}, _this2.props,{ width:_this2.state.containerWidth-_this2.props.yAxisWidth, data:_this2.props.data, height:_this2.props.xAxisHeight, align:axisAlign, -style:{marginLeft:_this2.props.yAxisWidth-1},__source:{fileName:_jsxFileName,lineNumber:204}}))));}()));} +style:{marginLeft:_this2.props.yAxisWidth-1}})))); +}())); - - -return ( +} +return( _react2.default.createElement(_reactNative.View,{ ref:'container', onLayout:_this2._onContainerLayout, -style:[_this2.props.style||{},styles.default],__source:{fileName:_jsxFileName,lineNumber:219}}, +style:[_this2.props.style||{},styles.default]}, _react2.default.createElement(ChartType,_extends({}, _this2.props,{ @@ -227,58 +228,58 @@ data:_this2.props.data, width:_this2.state.containerWidth, height:_this2.state.containerHeight, minVerticalBound:_this2.state.bounds.min, -maxVerticalBound:_this2.state.bounds.max,__source:{fileName:_jsxFileName,lineNumber:224}}))));}()));}}]);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,yAxisUseDecimal:false,yAxisShortLabel:false};exports.default=Chart; +maxVerticalBound:_this2.state.bounds.max})))); +}())); +}}]);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,color:[],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,yAxisUseDecimal:false,yAxisShortLabel:false};exports.default=Chart; +Chart.propTypes={ -Chart.propTypes={ -// Shared properties between most types -// data: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.array)).isRequired, type:_react.PropTypes.oneOf(['line','bar','pie']).isRequired, -highlightColor:_react.PropTypes.oneOfType([_react.PropTypes.number,_react.PropTypes.string]), // TODO -highlightIndices:_react.PropTypes.arrayOf(_react.PropTypes.number), // TODO +highlightColor:_react.PropTypes.oneOfType([_react.PropTypes.number,_react.PropTypes.string]), +highlightIndices:_react.PropTypes.arrayOf(_react.PropTypes.number), onDataPointPress:_react.PropTypes.func, yAxisUseDecimal:_react.PropTypes.bool, yAxisShortLabel:_react.PropTypes.bool, -// Bar chart props + color:_react.PropTypes.arrayOf(_react.PropTypes.oneOfType([_react.PropTypes.number,_react.PropTypes.string])), cornerRadius:_react.PropTypes.number, -// fillGradient: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), // TODO + widthPercent:_react.PropTypes.number, -// Line/multi-line chart props -fillColor:_react.PropTypes.oneOfType([_react.PropTypes.number,_react.PropTypes.string]), // need to adjust for multi-line + +fillColor:_react.PropTypes.oneOfType([_react.PropTypes.number,_react.PropTypes.string]), dataPointColor:_react.PropTypes.arrayOf(_react.PropTypes.oneOfType([_react.PropTypes.number,_react.PropTypes.string])), dataPointFillColor:_react.PropTypes.arrayOf(_react.PropTypes.oneOfType([_react.PropTypes.number,_react.PropTypes.string])), dataPointRadius:_react.PropTypes.number, -// highlightRadius: PropTypes.number, // TODO + lineWidth:_react.PropTypes.number, -showDataPoint:_react.PropTypes.bool, // TODO +showDataPoint:_react.PropTypes.bool, + + -// Pie chart props -// pieCenterRatio: PropTypes.number, // TODO sliceColors:_react.PropTypes.arrayOf(_react.PropTypes.oneOfType([_react.PropTypes.number,_react.PropTypes.string])), animationDuration:_react.PropTypes.number, axisColor:_react.PropTypes.oneOfType([_react.PropTypes.number,_react.PropTypes.string]), axisLabelColor:_react.PropTypes.oneOfType([_react.PropTypes.number,_react.PropTypes.string]), axisLineWidth:_react.PropTypes.number, -// axisTitleColor: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), -// axisTitleFontSize: PropTypes.number, -// chartFontSize: PropTypes.number, -// chartTitle: PropTypes.string, -// chartTitleColor: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + + + + + gridColor:_react.PropTypes.oneOfType([_react.PropTypes.number,_react.PropTypes.string]), gridLineWidth:_react.PropTypes.number, hideHorizontalGridLines:_react.PropTypes.bool, hideVerticalGridLines:_react.PropTypes.bool, -// labelFontSize: PropTypes.number, + showAxis:_react.PropTypes.bool, showGrid:_react.PropTypes.bool, showXAxisLabels:_react.PropTypes.bool, @@ -287,9 +288,9 @@ style:_react.PropTypes.any, tightBounds:_react.PropTypes.bool, verticalGridStep:_react.PropTypes.number, horizontalGridStep:_react.PropTypes.number, -// xAxisTitle: PropTypes.string, + xAxisHeight:_react.PropTypes.number, xAxisTransform:_react.PropTypes.func, -// yAxisTitle: PropTypes.string, + yAxisTransform:_react.PropTypes.func, yAxisWidth:_react.PropTypes.number}; \ No newline at end of file diff --git a/dist/Circle.js b/dist/Circle.js index b8d9106..0bf0256 100644 --- a/dist/Circle.js +++ b/dist/Circle.js @@ -1,10 +1,10 @@ -Object.defineProperty(exports,"__esModule",{value:true});var _jsxFileName='src/Circle.js';var _createClass=function(){function defineProperties(target,props){for(var i=0;i0;i--){horizontalRange.push(i);} -for(var _i=data.length-1;_i>0;_i-=stepsBetweenVerticalLines){verticalRange.push(_i);} +for(var _i=xData.length-1;_i>0;_i-=stepsBetweenVerticalLines){verticalRange.push(_i);} var containerStyle={width:this.props.width,height:this.props.height,position:'absolute',left:0}; var intendedLineWidth=this.props.gridLineWidth; if(this.props.gridLineWidth<1){ -intendedLineWidth=_reactNative.StyleSheet.hairlineWidth;} - +intendedLineWidth=_reactNative.StyleSheet.hairlineWidth; +} var horizontalGridStyle={ height:this.props.height/this.props.verticalGridStep, @@ -49,23 +49,29 @@ borderTopWidth:intendedLineWidth}; var verticalGridStyle={ height:this.props.height+1, -width:this.props.width/data.length*stepsBetweenVerticalLines, +width:this.props.width/(xData.length-1)*stepsBetweenVerticalLines, borderRightColor:this.props.gridColor, borderRightWidth:intendedLineWidth}; -return ( -_react2.default.createElement(_reactNative.View,{style:containerStyle,__source:{fileName:_jsxFileName,lineNumber:58}}, +return( +_react2.default.createElement(_reactNative.View,{style:containerStyle}, function(){ if(_this2.props.hideHorizontalGridLines)return null; -return ( -_react2.default.createElement(_reactNative.View,{style:{position:'absolute',flexDirection:'column',justifyContent:'space-around'},__source:{fileName:_jsxFileName,lineNumber:62}}, -horizontalRange.map(function(_,i){return _react2.default.createElement(_reactNative.View,{key:i,style:horizontalGridStyle,__source:{fileName:_jsxFileName,lineNumber:63}});})));}(), - +return( +_react2.default.createElement(_reactNative.View,{style:{position:'absolute',flexDirection:'column',justifyContent:'space-around'}}, +horizontalRange.map(function(_,i){return _react2.default.createElement(_reactNative.View,{key:i,style:horizontalGridStyle});}))); +}(), function(){ if(_this2.props.hideVerticalGridLines)return null; -return ( -_react2.default.createElement(_reactNative.View,{style:{flexDirection:'row',position:'absolute',justifyContent:'space-around'},__source:{fileName:_jsxFileName,lineNumber:70}}, -verticalRange.map(function(_,i){return _react2.default.createElement(_reactNative.View,{key:i,style:verticalGridStyle,__source:{fileName:_jsxFileName,lineNumber:71}});})));}()));}}]);return Grid;}(_react.Component);Grid.propTypes={showGrid:_react.PropTypes.bool,data:_react.PropTypes.arrayOf(_react.PropTypes.arrayOf(_react.PropTypes.array)).isRequired,verticalGridStep:_react.PropTypes.number.isRequired,horizontalGridStep:_react.PropTypes.number,gridLineWidth:_react.PropTypes.number,gridColor:_react.PropTypes.oneOfType([_react.PropTypes.number,_react.PropTypes.string]),hideHorizontalGridLines:_react.PropTypes.bool,hideVerticalGridLines:_react.PropTypes.bool,height:_react.PropTypes.number,width:_react.PropTypes.number,type:_react.PropTypes.oneOf(['line','bar','pie']).isRequired};Grid.defaultProps={};exports.default=Grid; \ No newline at end of file +return( +_react2.default.createElement(_reactNative.View,{style:{flexDirection:'row',position:'absolute',justifyContent:'space-around'}}, +verticalRange.map(function(_,i){return _react2.default.createElement(_reactNative.View,{key:i,style:verticalGridStyle});}))); + + +}())); + + +}}]);return Grid;}(_react.Component);Grid.propTypes={showGrid:_react.PropTypes.bool,data:_react.PropTypes.arrayOf(_react.PropTypes.arrayOf(_react.PropTypes.array)).isRequired,verticalGridStep:_react.PropTypes.number.isRequired,horizontalGridStep:_react.PropTypes.number,gridLineWidth:_react.PropTypes.number,gridColor:_react.PropTypes.oneOfType([_react.PropTypes.number,_react.PropTypes.string]),hideHorizontalGridLines:_react.PropTypes.bool,hideVerticalGridLines:_react.PropTypes.bool,height:_react.PropTypes.number,width:_react.PropTypes.number,type:_react.PropTypes.oneOf(['line','bar','pie']).isRequired};Grid.defaultProps={};exports.default=Grid; \ No newline at end of file diff --git a/dist/LineChart.js b/dist/LineChart.js index 7d4f57b..bb19d30 100644 --- a/dist/LineChart.js +++ b/dist/LineChart.js @@ -1,11 +1,12 @@ -Object.defineProperty(exports,"__esModule",{value:true});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 _extends=Object.assign||function(target){for(var i=1;i0?n[1]:0.001;}); @@ -58,26 +58,26 @@ var colors=[]; sectors.forEach(function(sectionPiece,i){ var endAngle=startAngle+sectionPiece; if(endAngle>360){ -endAngle=360;} - +endAngle=360; +} if(endAngle-startAngle===0){ startAngle+=sectionPiece; -return;} - +return; +} if(i===sectors.length-1&&endAngle<360){ -endAngle=360;} - +endAngle=360; +} arcs.push({startAngle:startAngle,endAngle:endAngle,outerRadius:radius}); colors.push(getColor(COLORS,i)); -startAngle+=sectionPiece;}); - -return ( -_react2.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:this._handlePress,__source:{fileName:_jsxFileName,lineNumber:75}}, -_react2.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:76}}, -_react2.default.createElement(Surface,{width:this.props.width,height:this.props.height,__source:{fileName:_jsxFileName,lineNumber:77}}, -_react2.default.createElement(Group,{originX:centerX,width:this.props.width,height:this.props.height,originY:centerY,rotation:this.state.rotation,__source:{fileName:_jsxFileName,lineNumber:78}}, +startAngle+=sectionPiece; +}); +return( +_react2.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:this._handlePress}, +_react2.default.createElement(_reactNative.View,null, +_react2.default.createElement(Surface,{width:this.props.width,height:this.props.height}, +_react2.default.createElement(Group,{originX:centerX,width:this.props.width,height:this.props.height,originY:centerY,rotation:this.state.rotation}, arcs.map(function(arc,i){ -return ( +return( _react2.default.createElement(_Wedge2.default,_extends({ stroke:colors[i], strokeWidth:STROKE_WIDTH, @@ -85,4 +85,13 @@ fill:colors[i], key:i, originX:centerX, originY:centerY}, -arc,{__source:{fileName:_jsxFileName,lineNumber:81}})));}))))));}}]);return PieChart;}(_react.Component);exports.default=PieChart; \ No newline at end of file +arc))); + + +})))))); + + + + + +}}]);return PieChart;}(_react.Component);exports.default=PieChart; \ No newline at end of file diff --git a/dist/Wedge.js b/dist/Wedge.js index 070f5c8..9325254 100644 --- a/dist/Wedge.js +++ b/dist/Wedge.js @@ -1,4 +1,4 @@ -Object.defineProperty(exports,"__esModule",{value:true});var _extends=Object.assign||function(target){for(var i=1;i - * - * Additional optional property: - * (Int) innerRadius - * - */var Shape=_reactNative.ART.Shape;var Path=_reactNative.ART.Path; /** - * Wedge is a React component for drawing circles, wedges and arcs. Like other - * ReactART components, it must be used in a . - */var Wedge=function(_Component){_inherits(Wedge,_Component);function Wedge(props){_classCallCheck(this,Wedge);var _this=_possibleConstructorReturn(this,Object.getPrototypeOf(Wedge).call(this,props));_this.circleRadians=Math.PI*2;_this.radiansPerDegree=Math.PI/180;_this._degreesToRadians=_this._degreesToRadians.bind(_this);return _this;} /** - * _degreesToRadians(degrees) - * - * Helper function to convert degrees to radians - * - * @param {number} degrees - * @return {number} - */_createClass(Wedge,[{key:'_degreesToRadians',value:function _degreesToRadians( +var _reactNative=require('react-native');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}var +Shape=_reactNative.ART.Shape,Path=_reactNative.ART.Path;var + + + + + +Wedge=function(_Component){_inherits(Wedge,_Component); + + + + + + + + + + + +function Wedge(props){_classCallCheck(this,Wedge);var _this=_possibleConstructorReturn(this,(Wedge.__proto__||Object.getPrototypeOf(Wedge)).call(this, +props)); +_this.circleRadians=Math.PI*2; +_this.radiansPerDegree=Math.PI/180; +_this._degreesToRadians=_this._degreesToRadians.bind(_this);return _this; +}_createClass(Wedge,[{key:'_degreesToRadians',value:function _degreesToRadians( + + + + + + + + + degrees){ -if(degrees!==0&°rees%360===0){ // 360, 720, etc. -return this.circleRadians;} +if(degrees!==0&°rees%360===0){ +return this.circleRadians; +} +return degrees*this.radiansPerDegree%this.circleRadians; +}},{key:'_createCirclePath',value:function _createCirclePath( + + + + + + + -return degrees*this.radiansPerDegree%this.circleRadians;} -/** - * _createCirclePath(or, ir) - * - * Creates the ReactART Path for a complete circle. - * - * @param {number} or The outer radius of the circle - * @param {number} ir The inner radius, greater than zero for a ring - * @return {object} - */},{key:'_createCirclePath',value:function _createCirclePath( or,ir){ var path=new Path(); @@ -84,100 +84,101 @@ arc(-or*2,0,or); if(ir){ path.move(or-ir,0). counterArc(ir*2,0,ir). -counterArc(-ir*2,0,ir);} - +counterArc(-ir*2,0,ir); +} path.close(); -return path;} +return path; +}},{key:'_createArcPath',value:function _createArcPath( + + + + + + + + + + -/** - * _createArcPath(sa, ea, ca, or, ir) - * - * Creates the ReactART Path for an arc or wedge. - * - * @param {number} startAngle The starting degrees relative to 12 o'clock - * @param {number} endAngle The ending degrees relative to 12 o'clock - * @param {number} or The outer radius in pixels - * @param {number} ir The inner radius in pixels, greater than zero for an arc - * @return {object} - */},{key:'_createArcPath',value:function _createArcPath( originX,originY,startAngle,endAngle,or,ir){ var path=new Path(); -// angles in radians + var sa=this._degreesToRadians(startAngle); var ea=this._degreesToRadians(endAngle); -// central arc angle in radians + var ca=sa>ea?this.circleRadians-sa+ea:ea-sa; -// cached sine and cosine values + var ss=Math.sin(sa); var es=Math.sin(ea); var sc=Math.cos(sa); var ec=Math.cos(ea); -// cached differences + var ds=es-ss; var dc=ec-sc; var dr=ir-or; -// if the angle is over pi radians (180 degrees) -// we will need to let the drawing method know. + + var large=ca>Math.PI; -// TODO (sema) Please improve theses comments to make the math -// more understandable. -// -// Formula for a point on a circle at a specific angle with a center -// at (0, 0): -// x = radius * Math.sin(radians) -// y = radius * Math.cos(radians) -// -// For our starting point, we offset the formula using the outer -// radius because our origin is at (top, left). -// In typical web layout fashion, we are drawing in quadrant IV -// (a.k.a. Southeast) where x is positive and y is negative. -// -// The arguments for path.arc and path.counterArc used below are: -// (endX, endY, radiusX, radiusY, largeAngle) - -path.move(or+or*ss,or-or*sc) // move to starting point -.arc(or*ds,or*-dc,or,or,large) // outer arc -.line(dr*es,dr*-ec); // width of arc or wedge + + + + + + + + + + + + + + + + +path.move(or+or*ss,or-or*sc). +arc(or*ds,or*-dc,or,or,large). +line(dr*es,dr*-ec); if(ir){ -path.counterArc(ir*-ds,ir*dc,ir,ir,large); // inner arc +path.counterArc(ir*-ds,ir*dc,ir,ir,large); } -return path;}},{key:'render',value:function render() - +return path; +}},{key:'render',value:function render() { -// angles are provided in degrees + var startAngle=this.props.startAngle; var endAngle=this.props.endAngle; -// if (startAngle - endAngle === 0) { -// return null; -// } -// radii are provided in pixels + + + + var innerRadius=this.props.innerRadius||0; var outerRadius=this.props.outerRadius;var _props= -this.props;var originX=_props.originX;var originY=_props.originY; +this.props,originX=_props.originX,originY=_props.originY; + -// sorted radii var ir=Math.min(innerRadius,outerRadius); var or=Math.max(innerRadius,outerRadius); var path=void 0; if(endAngle>=startAngle+360){ -path=this._createCirclePath(or,ir);}else -{ -path=this._createArcPath(originX,originY,startAngle,endAngle,or,ir);} - +path=this._createCirclePath(or,ir); +}else{ +path=this._createArcPath(originX,originY,startAngle,endAngle,or,ir); +} -return _react2.default.createElement(Shape,_extends({},this.props,{d:path,__source:{fileName:_jsxFileName,lineNumber:183}}));}}]);return Wedge;}(_react.Component);Wedge.propTypes={outerRadius:_react.PropTypes.number.isRequired,startAngle:_react.PropTypes.number.isRequired,endAngle:_react.PropTypes.number.isRequired,originX:_react.PropTypes.number.isRequired,originY:_react.PropTypes.number.isRequired,innerRadius:_react.PropTypes.number};exports.default=Wedge; \ No newline at end of file +return _react2.default.createElement(Shape,_extends({},this.props,{d:path})); +}}]);return Wedge;}(_react.Component);Wedge.propTypes={outerRadius:_react.PropTypes.number.isRequired,startAngle:_react.PropTypes.number.isRequired,endAngle:_react.PropTypes.number.isRequired,originX:_react.PropTypes.number.isRequired,originY:_react.PropTypes.number.isRequired,innerRadius:_react.PropTypes.number};exports.default=Wedge; \ No newline at end of file diff --git a/dist/util.js b/dist/util.js index 67731f0..7ccb6ad 100644 --- a/dist/util.js +++ b/dist/util.js @@ -1,8 +1,24 @@ Object.defineProperty(exports,"__esModule",{value:true});exports. -uniqueValuesInDataSet=uniqueValuesInDataSet;function uniqueValuesInDataSet(data){ -return data.reduce(function(result,d){ -if(result.some(function(p){return p[1]===d[1];}))return result; -result.push(d); -return result;}, -[]);} \ No newline at end of file +uniqueValuesInDataSet=uniqueValuesInDataSet;exports. + + + + + + + +uniqueValuesInDataSets=uniqueValuesInDataSets;function uniqueValuesInDataSet(data){return data.reduce(function(result,d){if(result.some(function(p){return p[1]===d[1];}))return result;result.push(d);return result;},[]);}function uniqueValuesInDataSets(data,index){ +var values=[]; +data.forEach(function(Graph){ +Graph.forEach(function(XYPair){ +if(values.indexOf(XYPair[index])===-1){ +values.push(XYPair[index]); +} +}); +}); +values.sort(function(a,b){ +return a-b; +}); +return values; +} \ No newline at end of file diff --git a/dist/xAxis.js b/dist/xAxis.js index cae8c17..2ce75f7 100644 --- a/dist/xAxis.js +++ b/dist/xAxis.js @@ -1,7 +1,8 @@ -'use strict';Object.defineProperty(exports,"__esModule",{value:true});var _jsxFileName='src/xAxis.js';var _createClass=function(){function defineProperties(target,props){for(var i=0;i=0;i--){decimal=Math.pow(1000,i+1);if(num<=-decimal||num>=decimal){return +(num/decimal).toFixed(digits)+units[i];}}return num;}},{key:'render',value:function render() +label)); +};_this.state={bounds:{min:0,max:0}};return _this;}_createClass(YAxis,[{key:'shortenLargeNumber',value:function shortenLargeNumber(num,useDecimal){var digits=useDecimal?2:0;var units=['K','M','B','t','P','E','Z','Y'],decimal;for(var i=units.length-1;i>=0;i--){decimal=Math.pow(1000,i+1);if(num<=-decimal||num>=decimal){return+(num/decimal).toFixed(digits)+units[i];}}return num;}},{key:'render',value:function render() { var range=[]; -var data=this.props.data||[[]]; -var unique=(0,_util.uniqueValuesInDataSet)(data[0]); -var steps=unique.length=0;i--){range.push(i);} -return ( +return( _react2.default.createElement(_reactNative.View,{ style:[ styles.yAxisContainer, this.props.style||{}, this.props.placement==='left'&&{borderRightColor:this.props.axisColor,borderRightWidth:this.props.axisLineWidth}, -this.props.placement==='right'&&{borderLeftColor:this.props.axisColor,borderLeftWidth:this.props.axisLineWidth}],__source:{fileName:_jsxFileName,lineNumber:101}}, +this.props.placement==='right'&&{borderLeftColor:this.props.axisColor,borderLeftWidth:this.props.axisLineWidth}]}, + + +range.map(this._createLabelForYAxis))); -range.map(this._createLabelForYAxis)));}}]);return YAxis;}(_react.Component);YAxis.propTypes={axisColor:_react.PropTypes.any,axisLineWidth:_react.PropTypes.number,data:_react.PropTypes.arrayOf(_react.PropTypes.arrayOf(_react.PropTypes.array)).isRequired,height:_react.PropTypes.number.isRequired,placement:_react.PropTypes.oneOf(['left','right']),verticalGridStep:_react.PropTypes.number.isRequired,yAxisTransform:_react.PropTypes.func,yAxisUseDecimal:_react.PropTypes.bool,yAxisShortLabel:_react.PropTypes.bool};YAxis.defaultProps={placement:'left'};exports.default=YAxis; \ No newline at end of file +}}]);return YAxis;}(_react.Component);YAxis.propTypes={axisColor:_react.PropTypes.any,axisLineWidth:_react.PropTypes.number,data:_react.PropTypes.arrayOf(_react.PropTypes.arrayOf(_react.PropTypes.array)).isRequired,height:_react.PropTypes.number.isRequired,placement:_react.PropTypes.oneOf(['left','right']),verticalGridStep:_react.PropTypes.number.isRequired,yAxisTransform:_react.PropTypes.func,yAxisUseDecimal:_react.PropTypes.bool,yAxisShortLabel:_react.PropTypes.bool};YAxis.defaultProps={placement:'left'};exports.default=YAxis; \ No newline at end of file diff --git a/package.json b/package.json index 8464b1e..cf6fa82 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ }, "description": "[![Join the chat at https://gitter.im/tomauty/react-native-chart](https://badges.gitter.im/tomauty/react-native-chart.svg)](https://gitter.im/tomauty/react-native-chart) [![npm version](https://badge.fury.io/js/react-native-chart.svg)](https://badge.fury.", "devDependencies": { + "babel-cli": "^6.18.0", "eslint": "^2.8.0", "eslint-config-airbnb": "^8.0.0", "eslint-plugin-flow-vars": "^0.3.0", diff --git a/src/BarChart.js b/src/BarChart.js index e3b9415..ef05878 100644 --- a/src/BarChart.js +++ b/src/BarChart.js @@ -27,7 +27,7 @@ export default class BarChart extends Component { _drawBar = (_dataPoint : [number, number], index : number) => { const [_x, dataPoint] = _dataPoint; - const backgroundColor = this.props.color[0] || C.BLUE; + const backgroundColor = ("barColors" in this.props && Array.isArray(this.props.barColors)) ? this.props.barColors[index] : ( this.props.color[0] || C.BLUE); // the index [0] is facilitate multi-line, fix later if need be const HEIGHT = this.props.height; const WIDTH = this.props.width;