r-gauger v3.1.0

r-gauger

wonderfull and powerfull Reactjs gauge width unlimit style

all of this examples created by r-gauger

Install

npm install r-gauger

Usage

ES6: import Gauge from 'r-gauger;' ES5: var Gauge = require('r-gauger');

Step By Step Tutorial

Step1 : start and end prop

<Gauge 
  start={0}
  end={120}
/>

Step2 : ranges prop

each object properties

...
ranges={[
  {value:70,color:"#13e1f9"},
  {value:110,color:"#ff090f"},
  {value:120,color:"#f5c125"}
]}
...

Step3 : style prop

...
style={{width:200,height:200,background:"#eeeeee",border:'1px solid #ccc',borderRadius:'5px'}}
...

Step4 : angle prop

...
angle={270}
...

Step5 : thickness props

...
thickness={4}
...

Step6 : radius prop

...
radius={88}
...

Step7 : label prop

label style with object type:

... 
label={
  {
    step:20, //diffrence of each 2 labels, type=number
    style:{ //styling labels, type=object or function(here use object)
      color:"#909090", //color of labels, type=string
      fontSize:8, //font size of labels, type=number 
      offset:61 //distance of labels from center, type=number
    }
  }
}
...

label style with function type:

... 
label={{
  step:20,
  style:function(value,props){ //use functional style, parameters = (value : value of label, props : all gauge props)
    var color;
    for(var i = 0; i < props.ranges.length; i++){
      if(value <= props.ranges[i].value){
        color = props.ranges[i].color;
        break;
      }
    }
    return {
      color,
      fontSize:8,
      offset:61
    }
  }
}}
...

Step8 : scale prop

scale style with object type:

... 
scale={{
  step:5, //distance between each 2 scales, type=number
  style:{ //styling scales, type=object or function
    color:"#b4b4b4", //color of scales, type=string
    width:1, //width of scales, type=number
    height:10, //height of scales, type=number
    offset:70 //distance of scales from center, type=number
  }
}}
...

scale style with function type:

...
scale={{
  step:5,
  style:function(value,props){
    var height = value % 10 === 0?10:5;
    var offset = value % 10 === 0?70:75;
    var width = value % 10 === 0?2:1;
    return {
      color:"#b4b4b4",
      width,
      height,
      offset
    }
  }
}}
...

Step8 : circles prop

...
circles={[
  {
    lineWidth:1, //line width of circle, type=number
    stroke:"#b4b4b4", //stroke color of circle, type=string, default='#000'
    radius:80, //radius of circle, type=number
    slice:true //slicing circle or not, type=boolean, default=false
  },
  {
    fill:"#e5e5e5", //set fill color of circle, type=string, default='#000'
    stroke:'#aaa',
    radius:50,
    slice:false
  }
]}
...

Step9 : handle prop

Set one handle (Object)

...
handle={{
  value:30, //value of handle, type=number, required
  style:{ //styling handle
    width:4, //width of handle, type=number, default=4
    height:58, //height of handle, type=number, default=calculate by component
    radius:5, //radius of circle of handle center, type=number, default=4
    offset:0, //distance of handle from center, type=number, default=0
    color:"#666666" //color of handle, type=string, default='#000'
  }
}}
...

Set 2 handles (Array Of Objects)

...
handle={[
  {
    value:30,
    style:{
      width:4,
      height:58,
      radius:5,
      offset:0,
      color:"#666666"
    }
  },
  {
    value:50,
    style:{
      width:12,
      height:-10,
      radius:0,
      offset:99,
      color:"blue"
    }
  }
]}
...

Step10 : text prop

Set 2 text

...
text:[
  {
    value:"My Gauge", //value of text, type=string or function(here use string)
    style:{
      fontSize:12, //font size of text, type=number, default=10
      top:74, //top of text, type=number, default=20
      left:0, //left of text, type=number, default=0
      color:"#000000", //color of text, type=string, default='#000'
      rotate:0  //rotate angle of text, type=number between 0 and 360, default=0
    }
  },
  {
    value:function(props){ //value of text, type=string of function(here use function)
      return props.handle[0].value;
    },
    style:{
      fontSize:20,
      top:24,
      left:0,
      color:"#000000",
      rotate:0
     }
  },
],
...

Step11 : direction prop

...
direction='clockwise'
...

Step12 : position prop

...
position={['50%',190]}
...

Step13 : rotate prop

...
rotate={90}
...