Merge pull request #1 from kevinjpuscan/feature/essentials

Feature/essentials merge of realease version 1.0.2

Author: kevinjpuscan

README.md

@@ -1,6 +1,6 @@
 # react-simple-gauge
 
-[![NPM](https://img.shields.io/npm/v/react-simple-gauge.svg)](https://www.npmjs.com/package/react-simple-gauges) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+[![NPM](https://img.shields.io/npm/v/react-simple-gauges.svg)](https://www.npmjs.com/package/react-simple-gauges) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
 <img src="./.github/gauge.png" alt="demo" height="100">
 
@@ -24,6 +24,14 @@ class Example extends Component {
 }
 ```
 
+## Options
+
+| Option | type | Description | Example | 
+|--|--|--|--|
+| percent | required | Percent of progress in gauge | 75 |
+| color | optional | Color if not define intervals of colors | #FFFFFF, red, rgba(255,243,12,.5) |
+| intervals | optional | Intervals values for define color, value in [min,max> | [60,75,101] |
+| colors | optional | Array of colors for intervals values | ['green','grba(255,255,40,.5)','#d73a49'] |
 ## License
 
 MIT © [kevinjpuscan](https://github.com/kevinjpuscan)

example/src/App.js

@@ -5,8 +5,7 @@ import { SimpleGauge } from 'react-simple-gauges'
 
 const App = () => {
   return (<div style={{margin:'10px'}}>
-          
-        <SimpleGauge width="250px" percent="75"/>
+        <SimpleGauge width="250px" percent="89" color="rgba(255,243,12,.5)" intervals={[60,85,101]} colors={['green','rgba(255,255,40,.8)','#d73a49']} />
   </div>
   )
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-gauges",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A simple gauge charts for react",
   "author": "Kevin Puscán Ortiz <[email protected]>",
   "license": "MIT",

src/SimpleGauge/index.js

@@ -10,7 +10,17 @@ class SimpleGauge extends React.Component{
     }
     componentDidMount(){
 
-		const percent=this.props.percent?this.props.percent:100;
+		const percent=this.props.percent?this.props.percent>=0?this.props.percent<=100?this.props.percent:100:0:100;
+		let color=this.props.color||'#5BB030';
+		if(this.props.intervals && this.props.colors){
+			let startValue=0;
+			this.props.intervals.forEach((element,idx) => {
+				if(percent>=startValue && percent<element){
+					color=this.props.colors[idx]||color;
+				}
+				startValue=element;
+			});
+		}
 
 		let container=this.container.current;
 		const width=container.clientWidth;
@@ -51,7 +61,7 @@ class SimpleGauge extends React.Component{
             circle.style.strokeDashoffset=offset;
 			circle.style.strokeWidth=strokeWidth.toString();
             circle.style.transform=`translate(${strokeWidth/2}px,${strokeWidth/2}px)`;
-        
+ 
 		circle=this.point.current;
 			circle.style.width='100%';
 			circle.style.height='100%';
@@ -66,7 +76,9 @@ class SimpleGauge extends React.Component{
 
 
 		let progress=this.progress.current;
-		progress.style.stroke='#5BB030';
+		progress.style.stroke=color;
+
+		
 		progress.style.strokeDasharray=`${bar} ${offsetBar}`;
 
 		let point=this.point.current;
@@ -78,7 +90,7 @@ class SimpleGauge extends React.Component{
 		text.style.fontSize=`${height/3}px`;
 		text.style.fontWeight='bold';
 		text.style.marginTop=`-${height/2}px`;
-		text.style.color='#5BB030';
+		text.style.color=color;
 		text.style.display='grid';
 		text.style.justifyContent='center';
 
@@ -91,7 +103,7 @@ class SimpleGauge extends React.Component{
 					<circle ref={this.progress}></circle>
 					<circle ref={this.point}></circle>
 				</svg>	
-				<div className="number" ref={this.text}>{this.props.percent?this.props.percent:100}%</div>
+				<div className="number" ref={this.text}>{this.props.percent?this.props.percent>=0?this.props.percent<=100?this.props.percent:100:0:100}%</div>
 			</div>
         );
     }