realtimechart-1.6.0.js

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.realtimechart=e():t.realtimechart=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var s=n[i]={i:i,l:!1,exports:{}};return t[i].call(s.exports,s,s.exports,e),s.l=!0,s.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/",e(e.s=0)}([function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(1);window.RealTimeChart=i.a,e.default=i.a},function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var s=n(2),a=n(3),o=n(4),r=n(5),h=n(6),u=n(7),l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},c=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},v=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),d=function(){function t(e){i(this,t),this.element=e,this.ctx=this.element.getContext("2d"),this.data=[],this.options={},this.settings={paddingBottom:0,paddingRight:0,borderWidth:2,boxInnerPadding:2,stageWidth:0,stageHeight:0,oneXSegment:0,oneYSegment:0,valueDiff:0}}return v(t,[{key:"setOptions",value:function(t){var e=this;this.options={onHover:function(t){},waitWindowLoad:!1,isResponsive:!1,type:"line",width:600,height:600,totalElement:50,minValue:250,maxValue:500,calcMaxValue:!1,showRuler:!0,showFrame:!0,textColor:"#313131",frameColor:"#DDDDDD",legend:[{color:"#846f08"},{color:"#2cabe3"},{color:"#000"},{color:"#53e69d"}],paddingRight:0,paddingBottom:0},this.options=c({},this.options,t),this.onLoad().then(function(){e.init()})}},{key:"onLoad",value:function(){var t=this;return new Promise(function(e){t.options.waitWindowLoad?"complete"===document.readyState||"interactive"===document.readyState?e():window.addEventListener("load",function(){e()}):e()})}},{key:"init",value:function(){this.calculateDefaults(),this.createPlugins(),this.createResizePlugin()}},{key:"createPlugins",value:function(){this.Bar=new s.a(this),this.Stacked=new a.a(this),this.Line=new o.a(this),this.Stage=new r.a(this),this.Hover=new h.a(this)}},{key:"createResizePlugin",value:function(){this.Resize=new u.a(this)}},{key:"recalculateBounds",value:function(){this.Resize&&this.Resize.setSize()}},{key:"addChartData",value:function(t){this.data.push(this.transformChartDataToPercent(t)),this.data.length>this.options.totalElement&&this.data.shift()}},{key:"render",value:function(){switch(this.Stage.clearStage(),this.options.type){case"line":this.renderLine();break;case"bar":this.renderBar();break;case"stacked":this.renderStacked()}}},{key:"renderStacked",value:function(){var t=this;this.data.forEach(function(e,n){t.drawStacked(e,n)})}},{key:"drawStacked",value:function(t,e){var n=this,i=0;t.forEach(function(t,s){n.Stacked.setOptions({segmentKey:e,iterKey:s,percent:t.value,marginPercent:i,id:t.id}),i+=t.value,n.Stacked.draw()})}},{key:"renderBar",value:function(){var t=this;this.data.forEach(function(e,n){t.drawBar(e,n)})}},{key:"drawBar",value:function(t,e){var n=this;t.sort(this.sortDesc).forEach(function(t,i){n.Bar.setOptions({segmentKey:e,iterKey:i,percent:t.value,id:t.id}),n.Bar.draw()})}},{key:"sortDesc",value:function(t,e){return"number"==typeof t?t<e:"object"===(void 0===t?"undefined":l(t))?t.value<e.value:void 0}},{key:"destroy",value:function(){this.Resize.destroy(),this.Hover.destroy()}},{key:"drawLine",value:function(t,e){var n=this;t.forEach(function(t,i){n.Line.setOptions({segmentKey:e,iterKey:i,percent:t.value,id:t.id}),n.Line.draw()})}},{key:"renderLine",value:function(){var t=this;this.data.forEach(function(e,n){t.drawLine(e,n)}),this.Line.resetXY()}},{key:"calculateDefaults",value:function(){!0===this.options.hasOwnProperty("legend")&&this.options.legend.length>0&&(this.settings.paddingBottom=this.options.paddingBottom+30),!0===this.options.showRuler&&(this.settings.paddingRight=this.options.paddingRight+30),this.settings.borderWidth=2,this.settings.boxInnerPadding=2,this.settings.stageWidth=this.options.width-this.settings.borderWidth-this.settings.paddingRight-this.settings.boxInnerPadding,this.settings.stageHeight=this.options.height-this.settings.borderWidth-this.settings.paddingBottom-this.settings.boxInnerPadding,this.settings.oneXSegment=this.settings.stageWidth/this.options.totalElement,this.settings.oneYSegment=this.settings.stageHeight/100,this.calculateValueDiff()}},{key:"filterValue",value:function(t){return t<this.options.minValue?this.options.minValue:t>this.options.maxValue?this.options.calcMaxValue?(this.options.maxValue=t+.1*t,this.calculateValueDiff(),this.recalculatePercents(),this.Stage.printRuler(),t):this.options.maxValue:t}},{key:"calculateValueDiff",value:function(){this.settings.valueDiff=this.options.maxValue-this.options.minValue}},{key:"calculatePercent",value:function(t){var e=this.filterValue(t);return Math.round((e-this.options.minValue)/this.settings.valueDiff*100)||1}},{key:"recalculatePercents",value:function(){var t=this;this.data=this.data.map(function(e){return e.map(function(e){return e.value=t.calculatePercent(e.defValue),e})})}},{key:"transformChartDataToPercent",value:function(t){var e=this;return"number"==typeof t?this.transformChartDataToPercent([{value:t}]):"object"===(void 0===t?"undefined":l(t))&&"number"==typeof t.value?this.transformChartDataToPercent([t]):Array.isArray(t)?t.map(function(t){return"object"===(void 0===t?"undefined":l(t))?(t.defValue=t.value,t.value=e.calculatePercent(t.value),t):"number"==typeof t?{value:e.calculatePercent(t),defValue:t}:void 0}):void 0}}]),t}();e.a=d},function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var s=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),a=function(){function t(e){i(this,t),this.Canvas=e}return s(t,[{key:"setOptions",value:function(t){this.segmentKey=t.segmentKey,this.percent=t.percent,this.iterKey=t.iterKey,this.id=t.id||!1,this.x=this.Canvas.settings.borderWidth+this.segmentKey*this.Canvas.settings.oneXSegment,this.y=this.Canvas.settings.borderWidth+(100-this.percent)*this.Canvas.settings.oneYSegment,this.setColor()}},{key:"draw",value:function(){this.drawRectangleHead(),this.drawRectangleBody()}},{key:"drawRectangleHead",value:function(){this.Canvas.ctx.fillRect(this.x,this.y,this.Canvas.settings.oneXSegment,this.Canvas.settings.oneYSegment)}},{key:"drawRectangleBody",value:function(){this.Canvas.ctx.globalAlpha=.7,this.Canvas.ctx.fillRect(this.x,this.y+this.Canvas.settings.oneYSegment,this.Canvas.settings.oneXSegment,this.Canvas.settings.oneYSegment*this.percent-this.Canvas.settings.oneYSegment),this.Canvas.ctx.globalAlpha=1}},{key:"setColor",value:function(){var t=this,e="#000";!1!==this.id?this.Canvas.options.legend.forEach(function(n){t.id===n.id&&(e=n.color)}):e=this.Canvas.options.legend[this.iterKey].color,this.Canvas.ctx.fillStyle=e}}]),t}();e.a=a},function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var s=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),a=function(){function t(e){i(this,t),this.Canvas=e}return s(t,[{key:"setOptions",value:function(t){this.segmentKey=t.segmentKey,this.percent=t.percent,this.iterKey=t.iterKey,this.marginPercent=t.marginPercent,this.id=t.id||!1,this.x=this.Canvas.settings.borderWidth+this.segmentKey*this.Canvas.settings.oneXSegment;var e=100-this.marginPercent,n=e-this.percent;n<0&&(e>=0?(n=0,this.percent=e):this.percent=0),this.y=this.Canvas.settings.borderWidth+n*this.Canvas.settings.oneYSegment,this.setColor()}},{key:"draw",value:function(){this.Canvas.ctx.fillRect(this.x,this.y,this.Canvas.settings.oneXSegment,this.Canvas.settings.oneYSegment*this.percent)}},{key:"setColor",value:function(){var t=this,e="#000";!1!==this.id?this.Canvas.options.legend.forEach(function(n){t.id===n.id&&(e=n.color)}):e=this.Canvas.options.legend[this.iterKey].color,this.Canvas.ctx.fillStyle=e}}]),t}();e.a=a},function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var s=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),a=function(){function t(e){i(this,t),this.Canvas=e,this.lastX=[],this.lastY=[]}return s(t,[{key:"setOptions",value:function(t){this.segmentKey=t.segmentKey,this.percent=t.percent,this.iterKey=t.iterKey,this.id=t.id||!1,this.x=this.Canvas.settings.borderWidth+2.5+this.segmentKey*this.Canvas.settings.oneXSegment,this.y=this.Canvas.settings.borderWidth+2.5+(100-this.percent)*this.Canvas.settings.oneYSegment,this.setColor()}},{key:"draw",value:function(){this.setColor(),this.drawQuadraticCurve(),this.saveHistory()}},{key:"getLastY",value:function(){return void 0!==this.lastY[this.iterKey]?this.lastY[this.iterKey]:this.y}},{key:"getLastX",value:function(){return void 0!==this.lastX[this.iterKey]?this.lastX[this.iterKey]:0+this.Canvas.settings.paddingLeft}},{key:"drawQuadraticCurve",value:function(){this.Canvas.ctx.beginPath(),this.Canvas.ctx.moveTo(this.getLastX(),this.getLastY()),this.Canvas.ctx.lineTo(this.x,this.y),this.Canvas.ctx.closePath(),this.Canvas.ctx.stroke()}},{key:"saveHistory",value:function(){this.lastX[this.iterKey]=this.x,this.lastY[this.iterKey]=this.y}},{key:"resetXY",value:function(){var t=this;this.lastX.length>0&&this.lastX.forEach(function(e,n){t.lastX[n]=void 0}),this.lastY.length>0&&this.lastY.forEach(function(e,n){t.lastY[n]=void 0})}},{key:"setColor",value:function(){var t=this,e="#000";!1!==this.id?this.Canvas.options.legend.forEach(function(n){t.id===n.id&&(e=n.color)}):e=this.Canvas.options.legend[this.iterKey].color,this.Canvas.ctx.strokeStyle=e}}]),t}();e.a=a},function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var s=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),a=function(){function t(e){i(this,t),this.Canvas=e,!0===this.Canvas.options.showRuler&&this.printRuler(),!0===this.Canvas.options.hasOwnProperty("legend")&&this.Canvas.options.legend.length>0&&this.drawLegend(),this.Canvas.options.showFrame&&this.drawFrame()}return s(t,[{key:"clearStage",value:function(){this.Canvas.ctx.clearRect(2,2,this.Canvas.settings.stageWidth+this.Canvas.settings.boxInnerPadding,this.Canvas.settings.stageHeight+this.Canvas.settings.boxInnerPadding)}},{key:"nFormatter",value:function(t,e){var n=[{value:1e18,symbol:"E"},{value:1e15,symbol:"P"},{value:1e12,symbol:"T"},{value:1e9,symbol:"G"},{value:1e6,symbol:"M"},{value:1e3,symbol:"k"}],i=/\.0+$|(\.[0-9]*[1-9])0+$/,s=void 0;for(s=0;s<n.length;s++)if(t>=n[s].value)return(t/n[s].value).toFixed(e).replace(i,"$1")+n[s].symbol;return t.toFixed(e).replace(i,"$1")}},{key:"printRuler",value:function(){var t=this.Canvas.options.width-this.Canvas.settings.paddingRight+this.Canvas.settings.borderWidth+5,e=this.Canvas.settings.borderWidth+5,n=(this.Canvas.settings.stageHeight+this.Canvas.settings.boxInnerPadding+this.Canvas.settings.borderWidth)/2,i=this.Canvas.options.height-this.Canvas.settings.paddingBottom;this.Canvas.ctx.clearRect(t,this.Canvas.settings.borderWidth-5,this.Canvas.settings.paddingRight,this.Canvas.options.height-this.Canvas.settings.paddingBottom-this.Canvas.settings.borderWidth+5),this.Canvas.ctx.fillStyle=this.Canvas.options.textColor,this.Canvas.ctx.font="10px Arial",this.Canvas.ctx.fillText(this.nFormatter(this.Canvas.options.maxValue,1),t,e),this.Canvas.ctx.fillText(this.nFormatter(this.Canvas.options.minValue+(this.Canvas.options.maxValue-this.Canvas.options.minValue)/2,1),t,n),this.Canvas.ctx.fillText(this.nFormatter(this.Canvas.options.minValue,1),t,i)}},{key:"drawFrame",value:function(){this.Canvas.ctx.strokeStyle=this.Canvas.options.frameColor,this.Canvas.ctx.rect(1,1,this.Canvas.options.width-this.Canvas.settings.paddingRight,this.Canvas.options.height-this.Canvas.settings.paddingBottom),this.Canvas.ctx.stroke()}},{key:"drawLegend",value:function(){var t=this,e=2,n=this.Canvas.options.height-this.Canvas.settings.paddingBottom+5+2;this.Canvas.ctx.font="10px Arial",this.Canvas.options.legend.forEach(function(i,s){t.Canvas.ctx.fillStyle=i.color,t.Canvas.ctx.fillRect(e,n,12,12),t.Canvas.ctx.fillStyle=t.Canvas.options.textColor;var a=i.title?i.title.toUpperCase():("value "+(s+1)).toUpperCase();t.Canvas.ctx.fillText(a,e+15,n+10),e+=25+t.Canvas.ctx.measureText(a).width})}}]),t}();e.a=a},function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var s=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),a=function(){function t(e){i(this,t),this.Canvas=e,this.currentSegmentKey=-1,this.currentData=!1,this.lastData=!1,this.x=0,this.y=0,this.mouseMoveListener=this.mouseMoveListener.bind(this),this.mouseOutListener=this.mouseOutListener.bind(this),this.setListener()}return s(t,[{key:"setListener",value:function(){this.Canvas.element.addEventListener("mousemove",this.mouseMoveListener),this.Canvas.element.addEventListener("mouseout",this.mouseOutListener)}},{key:"mouseMoveListener",value:function(t){var e=t.target.getBoundingClientRect();this.x=t.clientX-e.left,this.y=t.clientY-e.top,this.calculateSegmentKeyFromPosition(),this.calculateDataBySegmentKey(),this.callHoverCallback()}},{key:"mouseOutListener",value:function(){this.currentData=!1,this.callHoverCallback()}},{key:"calculateSegmentKeyFromPosition",value:function(){var t=this.x;t-=this.Canvas.settings.borderWidth,this.currentSegmentKey=Math.floor(t/this.Canvas.settings.oneXSegment)}},{key:"calculateDataBySegmentKey",value:function(){this.currentData=this.Canvas.data[this.currentSegmentKey]||!1}},{key:"callHoverCallback",value:function(){"function"==typeof this.Canvas.options.onHover&&this.lastData!==this.currentData&&(this.lastData=this.currentData,this.Canvas.options.onHover({value:this.currentData,x:this.x,y:this.y}))}},{key:"destroy",value:function(){this.Canvas.element.addEventListener("mousemove",this.mouseMoveListener),this.Canvas.element.addEventListener("mouseout",this.mouseOutListener)}}]),t}();e.a=a},function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var s=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),a=function(){function t(e){i(this,t),this.Canvas=e,this.Canvas.options.isResponsive&&(this.windowResizeListener=this.windowResizeListener.bind(this),this.setListener(),this.setSize())}return s(t,[{key:"setListener",value:function(){window.addEventListener("resize",this.windowResizeListener)}},{key:"windowResizeListener",value:function(){this.setSize()}},{key:"setSize",value:function(){this.Canvas.options.width=this.Canvas.element.parentElement.offsetWidth,this.Canvas.element.width=this.Canvas.options.width,this.Canvas.calculateDefaults(),this.Canvas.createPlugins(),this.Canvas.render()}},{key:"destroy",value:function(){window.removeEventListener("resize",this.windowResizeListener)}}]),t}();e.a=a}])});