react-svg-graph/dist/index.js

An SVG-based graph component for React

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports["react-svg-graph"]=e(require("react")):t["react-svg-graph"]=e(t.react)}(this,function(t){return function(t){function e(a){if(r[a])return r[a].exports;var p=r[a]={exports:{},id:a,loaded:!1};return t[a].call(p.exports,p,p.exports,e),p.loaded=!0,p.exports}var r={};return e.m=t,e.c=r,e.p="",e(0)}([function(t,e,r){t.exports=r(1)},function(t,e,r){"use strict";function a(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var p=r(2),i=a(p);e["default"]=i["default"]},function(t,e,r){"use strict";function a(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var p=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(t[a]=r[a])}return t},i=r(3),o=a(i),s=r(4),n=a(s),l=r(8),d=a(l),h=r(9),u=a(h),g=r(10),f=a(g);e["default"]=o["default"].createClass({displayName:"graph",mixins:[n["default"]],getDefaultProps:function(){return{graphType:"bar",data:[],maxValue:null,width:400,height:200,leftPadding:35,topPadding:5,rightPadding:5,bottomPadding:20,animationRenderInterval:50,graphClass:"",fill:"steelblue"}},getInitialState:function(){return{maxValue:this.props.maxValue||Math.max.apply(null,this.props.data.map(function(t){return t.value})),oldMaxValue:this.props.maxValue||Math.max.apply(null,this.props.data.map(function(t){return t.value})),percentHeight:0,oldData:this.props.data,graphWidth:this.props.width-this.props.leftPadding-this.props.rightPadding,graphHeight:this.props.height-this.props.topPadding-this.props.bottomPadding}},componentDidMount:function(){this.timer()},componentWillReceiveProps:function(t){this.isMounted()&&this.setState({maxValue:t.maxValue||Math.max.apply(null,t.data.map(function(t){return t.value})),oldMaxValue:this.state.maxValue,percentHeight:0,graphWidth:this.props.width-this.props.leftPadding-this.props.rightPadding,graphHeight:this.props.height-this.props.topPadding-this.props.bottomPadding},this.timer)},timer:function c(){var t=this,c=setInterval(function(){t.isMounted()?t.state.percentHeight<1?t.setState({percentHeight:parseFloat((t.state.percentHeight+.1).toPrecision(2))}):(clearInterval(c),t.setState({oldData:t.props.data,oldMaxValue:t.props.maxValue||Math.max.apply(null,t.props.data.map(function(t){return t.value}))})):clearInterval(c)},this.props.animationRenderInterval||50)},render:function(){return o["default"].createElement("svg",{width:this.props.width,height:this.props.height},o["default"].createElement("g",{transform:"translate("+this.props.leftPadding+","+this.props.topPadding+")"},"bar"===this.props.graphType&&o["default"].createElement(d["default"],p({},this.props,this.state)),"line"===this.props.graphType&&o["default"].createElement(u["default"],p({},this.props,this.state))),o["default"].createElement(f["default"],p({},this.props,this.state)))}})},function(e,r){e.exports=t},function(t,e,r){"use strict";t.exports=r(5)},function(t,e,r){"use strict";var a=r(6),p={shouldComponentUpdate:function(t,e){return a(this,t,e)}};t.exports=p},function(t,e,r){"use strict";function a(t,e,r){return!p(t.props,e)||!p(t.state,r)}var p=r(7);t.exports=a},function(t,e){"use strict";function r(t,e){return t===e?0!==t||1/t===1/e:t!==t&&e!==e}function a(t,e){if(r(t,e))return!0;if("object"!==("undefined"==typeof t?"undefined":p(t))||null===t||"object"!==("undefined"==typeof e?"undefined":p(e))||null===e)return!1;var a=Object.keys(t),o=Object.keys(e);if(a.length!==o.length)return!1;for(var s=0;s<a.length;s++)if(!i.call(e,a[s])||!r(t[a[s]],e[a[s]]))return!1;return!0}var p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol?"symbol":typeof t},i=Object.prototype.hasOwnProperty;t.exports=a},function(t,e,r){"use strict";function a(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var p=r(3),i=a(p),o=r(4),s=a(o);e["default"]=i["default"].createClass({displayName:"bar-graph",mixins:[s["default"]],getDefaultProps:function(){return{graphWidth:0,graphHeight:0,maxValue:0,oldMaxValue:0,data:[],oldData:[],percentHeight:0,graphClass:"",fill:"steelblue"}},render:function(){var t=this;return i["default"].createElement("g",null,this.props.data.map(function(e,r){var a=t.props.data[r].value/t.props.maxValue*t.props.graphHeight;isNaN(a)&&(a=0);var p=t.props.oldData&&t.props.oldData[r]?t.props.oldData[r].value:void 0;p=p?p/t.props.oldMaxValue*t.props.graphHeight:0;var o=a>=p?p+(a-p)*t.props.percentHeight:p-(p-a)*t.props.percentHeight;return 0>o&&(o=0),2>o&&e>0&&(o=2),i["default"].createElement("rect",{className:t.props.graphClass,width:t.props.graphWidth>0?t.props.graphWidth/t.props.data.length-2:0,height:o,fill:t.props.fill,x:r*(t.props.graphWidth/t.props.data.length)+1,y:t.props.graphHeight-o,key:"bar-graph-bar-"+r})}))}})},function(t,e,r){"use strict";function a(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var p=r(3),i=a(p),o=r(4),s=a(o);e["default"]=i["default"].createClass({displayName:"line-graph",mixins:[s["default"]],getDefaultProps:function(){return{graphWidth:0,graphHeight:0,maxValue:0,oldMaxValue:0,data:[],oldData:[],percentHeight:0,graphClass:"",fill:"steelblue"}},render:function(){var t=this,e=this.props.data.map(function(e,r){var a=t.props.data[r].value/t.props.maxValue*t.props.graphHeight;isNaN(a)&&(a=0);var p=t.props.oldData&&t.props.oldData[r]?t.props.oldData[r].value:void 0;p=p?p/t.props.oldMaxValue*t.props.graphHeight:0;var i=a>=p?p+(a-p)*t.props.percentHeight:p-(p-a)*t.props.percentHeight;return 0>i&&(i=0),{x:r*(t.props.graphWidth/t.props.data.length),y:t.props.graphHeight-i}}),r="M0,"+this.props.graphHeight+"L";return e.forEach(function(t){r+=t.x+","+t.y+"L"}),r+=this.props.graphWidth+","+this.props.graphHeight+"Z",i["default"].createElement("path",{className:this.props.graphClass,d:r,stroke:this.props.fill,strokeWidth:"2",fill:this.props.fill,fillOpacity:"0.3"})}})},function(t,e,r){"use strict";function a(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var p=r(3),i=a(p),o=r(4),s=a(o);e["default"]=i["default"].createClass({displayName:"graph-axes",mixins:[s["default"]],getDefaultProps:function(){return{graphType:"bar",maxValue:0,data:[],leftPadding:35,topPadding:5,rightPadding:5,bottomPadding:20,graphWidth:0,graphHeight:0}},render:function(){var t=this,e=this.props.graphWidth/this.props.data.length;return i["default"].createElement("g",null,i["default"].createElement("line",{x1:this.props.leftPadding,y1:this.props.topPadding,x2:this.props.leftPadding,y2:this.props.graphHeight+this.props.topPadding,stroke:"rgb(0,0,0)",strokeWidth:"1"}),i["default"].createElement("line",{x1:this.props.leftPadding-5,y1:this.props.topPadding,x2:this.props.leftPadding,y2:this.props.topPadding,stroke:"rgb(0,0,0)",strokeWidth:"1"}),i["default"].createElement("line",{x1:this.props.leftPadding-5,y1:this.props.graphHeight+this.props.topPadding,x2:this.props.leftPadding,y2:this.props.graphHeight+this.props.topPadding,stroke:"rgb(0,0,0)",strokeWidth:"1"}),i["default"].createElement("text",{x:this.props.leftPadding-5,y:this.props.graphHeight/2+this.props.topPadding,textAnchor:"middle",transform:"rotate(270 "+(this.props.leftPadding-5)+","+(this.props.graphHeight/2+this.props.topPadding)+")",fill:"black",fontSize:"10px"},"Count"),i["default"].createElement("text",{x:this.props.leftPadding-7,y:this.props.topPadding+3,textAnchor:"end",fill:"black",fontSize:"10px"},this.props.maxValue.toString()),i["default"].createElement("text",{x:this.props.leftPadding-7,y:this.props.graphHeight+this.props.topPadding+3,textAnchor:"end",fill:"black",fontSize:"10px"},"0"),i["default"].createElement("rect",{width:this.props.graphWidth>0?this.props.graphWidth:0,height:this.props.bottomPadding,fill:"rgb(255,255,255)",x:this.props.leftPadding,y:this.props.graphHeight+this.props.topPadding}),i["default"].createElement("line",{x1:this.props.leftPadding,y1:this.props.graphHeight+this.props.topPadding,x2:this.props.graphWidth+this.props.leftPadding,y2:this.props.graphHeight+this.props.topPadding,stroke:"rgb(0,0,0)",strokeWidth:"1"}),this.props.data.map(function(r,a){return i["default"].createElement("line",{x1:a*e+t.props.leftPadding,y1:t.props.graphHeight+t.props.topPadding,x2:a*e+t.props.leftPadding,y2:t.props.graphHeight+t.props.topPadding+(""===r?3:5),stroke:"rgb(0,0,0)",strokeWidth:"1",key:"graph-horizontal-tick-"+a})}),this.props.data.map(function(r,a){return i["default"].createElement("text",{x:"bar"===t.props.graphType?a*e+t.props.leftPadding+e/2:a*e+t.props.leftPadding,y:t.props.graphHeight+t.props.topPadding+15,textAnchor:"middle",fill:"black",fontSize:"10px",key:"graph-horizontal-text-"+a},r.id.toString())}))}})}])});