react-gauge-capacity/lib/react-gauge.min.js

A React JS gauge component

var React=require("react"),PropTypes=require("prop-types"),createReactClass=require("create-react-class"),ReactGauge=createReactClass({displayName:"ReactGauge",getInitialState:function(){return{radius:this.props.radius,arcStrokeWidth:this.props.arcStrokeWidth,tickOffset:this.props.tickOffset,tickStrokeWidth:this.props.tickStrokeWidth,tickLength:this.props.tickLength,miniTickLength:this.props.miniTickLength,miniTickStrokeWidth:this.props.miniTickStrokeWidth,scaleDivisionNumber:this.props.scaleDivisionNumber,tickLabelOffset:this.props.tickLabelOffset,centralCircleRadius:this.props.centralCircleRadius,isInnerNumbers:this.props.isInnerNumbers,arrowValue:this.props.arrowValue,arrowColor:this.props.arrowColor,marks:this.props.marks,ranges:this.props.ranges,aperture:this.props.aperture,contentWidth:this.props.contentWidth,svgContainerWidth:this.props.contentWidth,svgContainerHeight:this.props.svgContainerHeight,gaugeCenterLineHeight:this.props.gaugeCenterLineHeight,viewBox:this.props.viewBox}},getDefaultProps:function(){return{radius:175,arcStrokeWidth:3,tickOffset:7,tickStrokeWidth:2,tickLength:5,miniTickLength:1,miniTickStrokeWidth:1,scaleDivisionNumber:10,tickLabelOffset:10,centralCircleRadius:10,isInnerNumbers:!1,arrowValue:0,arrowColor:"#354357",marks:[0,1,2,3,4,5,6],ranges:[{start:0,end:.75,color:"#666"},{start:.75,end:5.5/6,color:"#ffa500"},{start:5.5/6,end:1,color:"#ff0000"}],aperture:80,contentWidth:450,svgContainerWidth:450,svgContainerHeight:450,gaugeCenterLineHeight:35,viewBox:"30 0 300 200"}},handleChange:function(e){this.setState({radius:e.target.radius,arcStrokeWidth:e.target.arcStrokeWidth,tickOffset:e.target.tickOffset,tickStrokeWidth:e.target.tickStrokeWidth,tickLength:e.target.tickLength,miniTickLength:e.target.miniTickLength,miniTickStrokeWidth:e.target.miniTickStrokeWidth,scaleDivisionNumber:e.target.scaleDivisionNumber,tickLabelOffset:e.target.tickLabelOffset,centralCircleRadius:e.target.centralCircleRadius,isInnerNumbers:e.target.isInnerNumbers,arrowValue:e.target.arrowValue,arrowColor:e.target.arrowColor,marks:e.target.marks,ranges:e.target.ranges,aperture:e.target.aperture,contentWidth:e.target.contentWidth,svgContainerWidth:e.target.svgContainerWidth,svgContainerHeight:e.target.svgContainerHeight,gaugeCenterLineHeight:e.target.gaugeCenterLineHeight,viewBox:e.target.viewBox})},propTypes:{radius:PropTypes.number,arcStrokeWidth:PropTypes.number,tickOffset:PropTypes.number,tickStrokeWidth:PropTypes.number,tickLength:PropTypes.number,miniTickLength:PropTypes.number,miniTickStrokeWidth:PropTypes.number,scaleDivisionNumber:PropTypes.number,tickLabelOffset:PropTypes.number,centralCircleRadius:PropTypes.number,isInnerNumbers:PropTypes.bool,arrowValue:PropTypes.number,arrowColor:PropTypes.string,marks:PropTypes.array,ranges:PropTypes.arrayOf(PropTypes.shape({start:PropTypes.number.isRequired,end:PropTypes.number.isRequired,color:PropTypes.string.isRequired})).isRequired,aperture:PropTypes.number,contentWidth:PropTypes.number,svgContainerWidth:PropTypes.number,svgContainerHeight:PropTypes.number,gaugeCenterLineHeight:PropTypes.number,viewBox:PropTypes.string.isRequired},render:function(){var e,t,r,i=this.state.radius,s=this.state.arcStrokeWidth,a=this.state.tickOffset,n=this.state.tickStrokeWidth,o=this.state.tickLength,c=this.state.miniTickLength,h=this.state.miniTickStrokeWidth,p=this.state.scaleDivisionNumber,g=this.state.tickLabelOffset,u=this.state.centralCircleRadius,l=this.state.isInnerNumbers,k=this.props.arrowValue,d=this.state.arrowColor,m=this.state.marks,y=this.state.ranges,f=this.state.aperture,x=this.state.contentWidth,b=this.state.gaugeCenterLineHeight,v=(this.state.viewBox,{x:x/2,y:x/2}),T=f/2-180,W=180-f/2-T,C=function(e,t,r,i){var s=(i-90)*Math.PI/180;return{x:e+r*Math.cos(s),y:t+r*Math.sin(s)}};return React.createElement("svg",{className:"gauge",width:this.state.svgContainerWidth,height:this.state.svgContainerHeight,shapeRendering:"geometricPrecision",viewBox:this.state.viewBox},(r=[],y.forEach(function(e,t){var a,n,o,c;r.push((a=T+e.start*W,n=T+e.end*W,o=e.color,c=t,React.createElement("path",{className:"gauge-arc-"+c,key:c,fill:"none",stroke:o,strokeWidth:s,d:function(e,t,r,i,s){var a=C(e,t,r,s),n=C(e,t,r,i),o=s-i<=180?"0":"1";return["M",a.x,a.y,"A",r,r,0,o,0,n.x,n.y].join(" ")}(v.x,v.y,i,a,n)})))}),r),(e=[],t=0,m.forEach(function(r,s,n){if(0!==s)for(var o=W/(n.length-1)/p,g=1;g<p;g++){var u=C(v.x,v.y,i+(l?-1:1)*a,T+s*W/(n.length-1)-o*g),k=C(v.x,v.y,i+(l?-1:1)*(a+c),T+s*W/(n.length-1)-o*g);e.push(React.createElement("line",{className:"gauge-mini-tick",key:t++,stroke:"#000000",x1:u.x,y1:u.y,x2:k.x,y2:k.y,strokeWidth:h}))}}),m.forEach(function(r,s,c){var h=C(v.x,v.y,i+(l?-1:1)*a,T+s*W/(c.length-1)),p=C(v.x,v.y,i+(l?-1:1)*(a+o),T+s*W/(c.length-1));e.push(React.createElement("line",{className:"gauge-tick",key:t++,stroke:"#a3a3a3",x1:h.x,y1:h.y,x2:p.x,y2:p.y,strokeWidth:n}))}),e),function(){var e=[],t=0;return m.forEach(function(r,s,c){var h=C(v.x,v.y,i+(l?-1:1)*(a+o+g),T+s*W/(c.length-1)),p="",u=0;t==parseInt(c.length/2)&&(p=" gauge-center-label",u=8),e.push(React.createElement("text",{className:"gauge-label"+p,key:t++,fill:"#666666",x:h.x,y:h.y-u,alignmentBaseline:"middle",textAnchor:"middle",strokeWidth:n},r))}),e}(),function(){var e=[],t=0;return e.push(React.createElement("line",{className:"gauge-tick",key:t++,stroke:"#a3a3a3",x1:v.x,y1:b,x2:v.x,y2:v.x,strokeWidth:n})),e}(),function(){var e=[],t=0,r=C(v.x,v.y,u/2,T+W*k-90),s=C(v.x,v.y,i+(l?-1:1)*(a+o/2),T+W*k),n=C(v.x,v.y,u/2,T+W*k+90),c=["M",r.x,r.y,"L",s.x,s.y,"L",n.x,n.y,"Z"].join(" ");return e.push(React.createElement("path",{className:"gauge-arrow",key:t++,fill:d,d:c})),e.push(React.createElement("circle",{className:"gauge-arrow",key:t++,fill:d,cx:v.x,cy:v.y,r:u})),e}())}});module.exports=ReactGauge;