-
Notifications
You must be signed in to change notification settings - Fork 1
/
groph.min.js
8 lines (6 loc) · 15.6 KB
/
groph.min.js
1
2
3
4
5
6
7
8
/*
groph 1.0.0
(c) 2014 Ricky Boyce.
groph may be freely distributed under the MIT license.
For all details and documentation: http://github.com/boyyce/groph
*/!function(a,b){"use strict";function c(c){var d=this;b=TWEEN,d.defaults={selector:"graph1",cwd:"imgs/",w:1008,h:365,symbol:"$",decimals:2,pointMax:!1,pointMin:0,displayPointer:!1,graphScale:1,graphPadding:[60,0,55.5,20],data1:[600,500,700,900,500,700,600,900,700],data2:[200,300,100,200,50,150,300,200,300],anim:!0,smoothing:.8,color1:[9425396,5680639,7258346],color2:[11516152,11516152,9479656],shadow:8228802,colorLine:730713,dot1File:"dot1.png",dot2File:"dot2.png",showConstruct:!1},d.settings(c,!0)&&(d.renderer=new PIXI.CanvasRenderer(d.w,d.h,{transparent:!0}),d.target.appendChild(d.renderer.view),d.resizeBinded=a.throttle.call(this,20,d.resize),a.addEventListener("resize",d.resizeBinded),d.line1Active=!1,d.line2Active=!1,d.stage=new PIXI.Container,d.line1=new PIXI.Graphics,d.line2=new PIXI.Graphics,d.pointer=new PIXI.Container,d.line=new PIXI.Graphics,d.stand=new PIXI.Graphics,d.dot1=new PIXI.Sprite,d.dot2=new PIXI.Sprite,d.tip1Box=new PIXI.Container,d.tip2Box=new PIXI.Container,d.pointer.alpha=0,d.dot1.anchor.set(.5,.5),d.dot2.anchor.set(.5,.5),d.dot1Offset=.5,d.dot2Offset=.5,d.line.beginFill(d.colorLine,.43),d.line.drawRect(0,0,1,d.h),d.line.endFill(),d.stand.beginFill(d.colorLine,.43),d.stand.drawRect(-12,0,24,4),d.stand.endFill(),d.stand.y=d.h-1,d.tip1Box.pivot.set(.5,.5),d.tip2Box.pivot.set(.5,.5),d.drawTooltips(),d.stage.addChild(d.line2),d.stage.addChild(d.line1),d.pointer.addChild(d.line),d.pointer.addChild(d.stand),d.pointer.addChild(d.dot1),d.pointer.addChild(d.dot2),d.pointer.addChild(d.tip1Box),d.pointer.addChild(d.tip2Box),d.stage.addChild(d.pointer),d.dataChanged=!0,d.setup())}function d(a){var b,c=.1,d=.7;return 0===a?0:1===a?1:(!c||1>c?(c=1,b=d/4):b=d*Math.asin(1/c)/(2*Math.PI),c*Math.pow(2,-10*a)*Math.sin((a-b)*(2*Math.PI)/d)+1)}function e(a){return a[a.length-1]}function f(a){var b,c;for(b=a.length;b--;)if(a[b]instanceof Array)for(c=a[b].length;c--;)1!=c&&(a[b][c]=parseFloat(a[b][c]));else a[b]=parseFloat(a[b]);return a}function g(a){return!isNaN(parseFloat(a))&&isFinite(a)}function h(a){for(var b=1/0,c=0,d=a.length;d>c;c++)a[c]<b&&(b=a[c]);return b}function i(a){for(var b=-(1/0),c=0,d=a.length;d>c;c++)a[c]>b&&(b=a[c]);return b}function j(){var a=this;return"string"==typeof a.selector||a.selector instanceof String?a.target=document.getElementById(a.selector):a.target=a.selector,a.target?!0:(console.log("selector returned nothing."),!1)}function k(a,b,c,d){function e(){var c=+new Date-k;i&&clearTimeout(i),c>a?g():b!==!0&&(i=setTimeout(g,a-c))}function f(){i||g(),i&&clearTimeout(i),j!==!0&&(i=setTimeout(h,a))}function g(){k=+new Date,c.apply(l,m)}function h(){i=void 0}var i,j,k=0,l=this,m=arguments;return"boolean"!=typeof b&&(c=b,b=j=!1),d?f:e}function l(a,b,c){return k(a,b,c,!0)}var m=function(){return c.prototype}();m.remake=function(b){var c=this;c.target&&c.remove(),c.settings(b)&&(c.drawTooltips(),c.target.appendChild(c.renderer.view),a.addEventListener("resize",c.resizeBinded),c.setup())},m.resize=function(){var a=this,b=a.target.offsetWidth,c=a.target.offsetHeight;(a.w!=a._w||a.h!=a._h||b!=a._w||c!=a._h)&&(a.w=b,a.h=c,a.renderer.resize(b,c),a.removeAnimations(),a.data1=$.extend([],a._data1),a.data2=$.extend([],a._data2),a.dataChanged=!0,a.resized=!0,a.setup())},m.remove=function(){var b=this;return null===b.target?void console.log("Groph already removed"):(this.removeTooltips(),this.removeAnimations(),b.target.innerHTML="",b.target=null,void a.removeEventListener("resize",b.resizeBinded))},m.settings=function(a,b){var c,d,e,g=this;if(a=a||{},b?$.extend(g,g.defaults,a):$.extend(g,a),!j.call(this))return!1;g._w=g.w,g._h=g.h,g.w=g.target.offsetWidth,g.h=g.target.offsetHeight,g.resized=!1,g.graphPadding=$.extend([],g.graphPadding),(b||a.data1||a.data2)&&(g.dataChanged=!0);for(var h=1;3>h;h++)if((a["data"+h]||b)&&(d=g["display"+h]=[],c=g["data"+h]=$.extend([],f(g["data"+h])),g["_data"+h]=$.extend([],c),c[0]instanceof Array))for(e=c.length;e--;)c[e]instanceof Array?(d[e]=c[e][1],c[e]=c[e][0]):d[e]=c[e];return(a.dot1File||a.cwd||b)&&(g.dot1Tex&&g.dot1Tex.destroy(1),g.dot1Tex=PIXI.Texture.fromImage(g.cwd+g.dot1File)),(a.dot1File||a.cwd||b)&&(g.dot2Tex&&g.dot2Tex.destroy(1),g.dot2Tex=PIXI.Texture.fromImage(g.cwd+g.dot2File)),!0},m.setup=function(){var a,b,c=this;c.tickers=[],c.initDelays=[],c.lineTweens1=[],c.lineTweens2=[],c.animating={},c.stageMouseOver=!1,c.pointerGo=!1,c.data1Nill=[],c.data2Nill=[],c.ctp1Nill=[],c.ctp2Nill=[],c.dot1.texture=c.dot1Tex,c.dot2.texture=c.dot2Tex,c.dataChanged&&(c.ctp1=[],c.ctp2=[],c.dataChanged=!1,c.columnWidth=Math.round(c.w/(c.data1.length-1)),c.defaultIndex=Math.round((c.data1.length-1)/2),c.dataConversion()),c.line.height=c.h,c.stand.y=c.h-1,c.tip1Y=5,c.tip2Y=c.h-36,c.interactivePointer(),c.tickers.push(requestAnimationFrame(function(){c.interactiveTicker()})),c.interactiveTickerI=c.tickers.length-1;var d=c.anim&&!c.resized?1500:200;if(c.initDelays.push(setTimeout(function(){c.initDelays.splice(0,1),c.pointerGo=!0,c.displayPointer?(c.showPointerTween(),c.movePointerTween({indexRB:c.defaultIndex})):c.stageMouseOver&&c.showPointerTween()},d)),!c.anim||c.resized)c.data1Nill=c.data1,c.data2Nill=c.data2,c.ctp1Nill=c.ctp1,c.ctp2Nill=c.ctp2,c.drawLines(!0);else{for(a=0,b=c.data1.length;b>a;a++)c.data1Nill.push({x:c.data1[a].x,y:c.lowest}),c.data2Nill.push({x:c.data2[a].x,y:c.lowest}),a!=b-1&&(c.ctp1Nill.push([{x:c.ctp1[a][0].x,y:c.lowest},{x:c.ctp1[a][1].x,y:c.lowest}]),c.ctp2Nill.push([{x:c.ctp2[a][0].x,y:c.lowest},{x:c.ctp2[a][1].x,y:c.lowest}]));c.drawLines(!0),c.initDelays.push(setTimeout(function(){c.initDelays.splice(1,1),c.startLineTweens()},500))}},m.removeAnimations=function(){var a,b,c,d=this;for(a=d.initDelays.length;a--;)clearTimeout(d.initDelays[a]);for(a=d.lineTweens1.length;a--;)d.lineTweens1[a].stop();for(a=d.lineTweens2.length;a--;)d.lineTweens2[a].stop();for(b in d.animating)c=d.animating[b],d.animating.hasOwnProperty(c)&&c&&c.stop();for(a=d.tickers.length;a--;)d.tickers[a]&&cancelAnimationFrame(d.tickers[a]);d.tickers=null,d.removeInteractivePointer(),d.line1Active=!1,d.line2Active=!1},m.interactivePointer=function(){function a(a){i.movePointerTween(a)}function b(){i.showPointerTween()}function c(){i.hidePointerTween()}var d,e,f,g,h,i=this,j=Math.round(this.columnWidth/2);for(i.boxes=new PIXI.Container,e=0,f=i.data1.length;f>e;e++)0===e?(d=0,g=j):e==f-1?(d=(e-1)*i.columnWidth+j,g=j):(d=(e-1)*i.columnWidth+j,g=i.columnWidth),h=new PIXI.Graphics,h.lineStyle(1,"0x000",0),h.drawRect(d,0,g,i.h),h.indexRB=e,h.hitArea=new PIXI.Rectangle(d,0,g,i.h),h.mouseover=a,h.interactive=!0,i.boxes.addChild(h);i.boxes.mouseover=b,i.boxes.mouseout=c,i.boxes.interactive=!0,i.stage.addChild(i.boxes)},m.removeInteractivePointer=function(){var a=this;a.boxes.interactive=!1,a.displayPointer=!1,this.pointerGo=!1,a.stage.removeChild(a.boxes),a.showHidePointer(0)},m.drawLines=function(a){var b=this;(b.line1Active||a)&&b.drawLine(1,b.data1Nill,b.ctp1Nill),(b.line2Active||a)&&b.drawLine(2,b.data2Nill,b.ctp2Nill)},m.drawLine=function(a,b,c){var d,f,g,h,i,j=this,k=j["line"+a];for(k.clear(),g=2;g--;){for(0===g?(h=0,k.lineStyle(5,j["color"+a][0],1),k.beginFill(j["color"+a][1],.15),k.moveTo(-10,j.h+10),k.lineTo(-10,b[0].y+h)):(h=1,k.lineStyle(5,j.shadow,1),k.moveTo(-10,b[0].y+h)),d=0,f=b.length;f>d;d++)d>=f-1||k.bezierCurveTo(c[d][0].x,c[d][0].y+h,c[d][1].x,c[d][1].y+h,b[d+1].x,b[d+1].y+h);i=e(b),k.bezierCurveTo(i.x,i.y+h,i.x,i.y+h,i.x,i.y+h),k.lineTo(j.w+10,i.y+h),0===g&&(k.lineTo(j.w+10,j.h+10),k.endFill())}},m.movePoints=function(a,b,c){var d,e,f,g,h=this,i=this.lowest;1==a?(d=h.data1Nill,e=h.ctp1Nill,f=h.data1,g=h.ctp1):2==a&&(d=h.data2Nill,e=h.ctp2Nill,f=h.data2,g=h.ctp2),d[b].y=c;var j=(c-i)/(f[b].y-i)*100;isNaN(j)&&(j=100);var k=f.length-1;b!==k&&(e[b][0].y=j*(g[b][0].y-i)/100+i),0!==b&&(e[b-1][1].y=j*(g[b-1][1].y-i)/100+i)},m.showHidePointer=function(a){this.pointer.alpha=a;var b=-38,c=38;this.tip1Box.position.y=b-b*a,this.tip2Box.position.y=c-c*a},m.showHideDots=function(a){this.dot1.scale.set(a,a),this.dot2.scale.set(a,a)},m.movePointer=function(a){this.pointer.position.x=a},m.moveDot1=function(a){this.dot1.position.y=a},m.moveDot2=function(a){this.dot2.position.y=a},m.drawTooltips=function(){var a,b,c=this;for(c.allTips1=[],c.allTips2=[],c.currentTipIndex=!1,a=0,b=c.data1.length;b>a;a++)c.allTips1.push(c.drawTooltip(1,a)),c.allTips2.push(c.drawTooltip(2,a))},m.drawTooltip=function(a,b){var c,d,e=this,f=[22,8],g=e["color"+a][2],h=new PIXI.Container,i=new PIXI.Graphics,j=new PIXI.Graphics,k=new PIXI.Text("",{font:"13px Arial",fill:"white"});return e["display"+a].length?k.text=e["display"+a][b]:k.text=e.symbol+e["_data"+a][b].toFixed(e.decimals),k.x=f[0],k.y=f[1],i.beginFill(g,1),i.drawRoundedRect(0,0,k.width+2*f[0],k.height+2*f[1],3),i.endFill(),c=i.width,d=Math.round(i.width/2),j.beginFill(g,1),j.drawPolygon([0,0,17,0,9,7]),j.x=d-8,j.y=1==a?i.height:0,j.scale.y=1==a?1:-1,h.y=-100,h.pivot.set(.5,.5),h.x=h.originalx=-d+1,0===b?(h.x=h.originalx=-Math.round(f[0]/2),j.x=3):b===e.data1.length-1&&(h.x=h.originalx=-c+Math.round(f[0]/2),j.x=c-Math.round(f[0]/2)-6),h.addChild(i),h.addChild(j),h.addChild(k),e["tip"+a+"Box"].addChild(h),h},m.removeTooltips=function(){var a,b;if(this.allTips1)for(a=this.allTips1.length;a--;){for(b=this.allTips1[a].children.length;b--;)this.allTips1[a].children[b].destroy&&this.allTips1[a].children[b].destroy();this.tip1Box.removeChild(this.allTips1[a])}if(this.allTips2)for(a=this.allTips2.length;a--;){for(b=this.allTips2[a].children.length;b--;)this.allTips2[a].children[b].destroy&&this.allTips2[a].children[b].destroy();this.tip2Box.removeChild(this.allTips2[a])}},m.changeTips=function(a){var b=this.allTips1[this.currentTipIndex],c=this.allTips2[this.currentTipIndex],d=Math.round(b.width/2),e=Math.round(c.width/2);0===this.currentTipIndex?(b.x=b.originalx-(d-d*a),c.x=c.originalx-(e-e*a)):(b.x=b.originalx+(d-d*a),c.x=c.originalx+(e-e*a))},m.startLineTweens=function(){var a,b,c,d,f=this,g=function(a,b){return function(){f.movePoints(a,b,this.y)}},h=function(){f.line1Active=!0},i=function(){f.line2Active=!0},j=function(){f.tickers[f.initTicker]&&(cancelAnimationFrame(f.tickers[f.initTickerI]),f.tickers[f.initTickerI]=null)};for(a=0,b=f.data1.length;b>a;a++)c=new TWEEN.Tween({y:f.lowest}).delay(100*(a+1)).to({y:f.data1[a].y},2500).easing(TWEEN.Easing.Elastic.Out).onUpdate(g(1,a)).onStart(h).start(),d=new TWEEN.Tween({y:f.lowest}).delay(100*(a+1)+500).to({y:f.data2[a].y},2500).easing(TWEEN.Easing.Elastic.Out).onUpdate(g(2,a)).onStart(i).start(),f.lineTweens1.push(c),f.lineTweens2.push(d);e(f.lineTweens1).onComplete(function(){f.line1Active=!1}),e(f.lineTweens2).onComplete(function(){f.line1Active=!0,f.line2Active=!0,setTimeout(j,24)}),f.tickers.push(requestAnimationFrame(function(){f.initTicker()})),f.initTickerI=f.tickers.length-1},m.showPointerTween=function(a){this.stageMouseOver=!0,this.pointerGo&&this.showHidePointerTween(!0)},m.hidePointerTween=function(a){this.stageMouseOver=!1,this.pointerGo&&this.showHidePointerTween()},m.showHidePointerTween=function(a){var c,d=this,e=this.pointer.alpha;d.animating.pointer&&d.animating.pointer.stop(),d.animating.dots&&d.animating.dots.stop(),c=a?1:0,d.animating.pointer=new b.Tween({value:e}).to({value:c},250).easing(TWEEN.Easing.Quadratic.InOut).onUpdate(function(){d.showHidePointer(this.value)}).onComplete(function(){d.animating.pointer=null}).start(),d.animating.dots=new b.Tween({value:e}).to({value:c},a?600:300).easing(a?TWEEN.Easing.Elastic.Out:TWEEN.Easing.Quadratic.InOut).onUpdate(function(){d.showHideDots(this.value)}).onComplete(function(){d.animating.dots=null}).start()},m.movePointerTween=function(a){var b=this,c=this.pointer.x,e=this.dot1.y,f=this.dot2.y,g=this.data1,h=this.data2,i=b.animating,j=a.indexRB||a.target.indexRB;b.currentTipIndex!==!1&&(b.allTips1[b.currentTipIndex].y=-100,b.allTips2[b.currentTipIndex].y=-100),b.currentTipIndex=j,b.displayPointer||(b.allTips1[j].y=b.tip1Y,b.allTips2[j].y=b.tip2Y),0===b.pointer.alpha?(b.pointer.x=g[j].x,b.dot1.y=g[j].y+b.dot1Offset,b.dot2.y=h[j].y+b.dot2Offset,(0===j||j===g.length-1)&&b.changeTips(1)):(i.pointerx&&i.pointerx.stop(),i.dot1y&&i.dot1y.stop(),i.dot2y&&i.dot2y.stop(),i.tips&&i.tips.stop(),(0===j||j===g.length-1)&&(i.tips=new TWEEN.Tween({value:0}).to({value:1},300).easing(TWEEN.Easing.Quadratic.InOut).onUpdate(function(){b.changeTips(this.value)}).onComplete(function(){i.tips=null}).start()),i.pointerx=new TWEEN.Tween({value:c}).to({value:g[j].x},600).easing(d).onUpdate(function(){b.movePointer(this.value)}).onComplete(function(){i.pointerx=null}).start(),i.dot1y=new TWEEN.Tween({value:e}).to({value:g[j].y+b.dot1Offset},600).easing(d).onUpdate(function(){b.moveDot1(this.value)}).onComplete(function(){i.dot1y=null}).start(),i.dot2y=new TWEEN.Tween({value:f}).to({value:h[j].y+b.dot2Offset},600).easing(d).onUpdate(function(){b.moveDot2(this.value)}).onComplete(function(){i.dot2y=null}).start())},m.initTicker=function(a){var b=this;b.tickers[b.initTickerI]=requestAnimationFrame(function(){b.initTicker()}),b.drawLines()},m.interactiveTicker=function(a){var c=this;c.tickers[c.interactiveTickerI]=requestAnimationFrame(function(){c.interactiveTicker()}),b.update(a),c.renderer.render(c.stage)},m.dataConversion=function(){var a,b,c=this,d=this.data1,f=this.data2;for(c.lowest=c.pointsToGraph(),a=0,b=d.length;b>a;a++)b-1>a?(d[a]={x:a*c.columnWidth,y:d[a]},f[a]={x:a*c.columnWidth,y:f[a]}):(d[a]={x:c.w-1,y:d[a]},f[a]={x:c.w-1,y:f[a]});for(d.unshift(d[0]),d.push(e(d)),f.unshift(f[0]),f.push(e(f)),a=0,b=d.length;b>a;a++)0===a||a>=b-2||(c.ctp1.push(c.lineControlPoints(d[a-1],d[a],d[a+1],d[a+2],5,c.smoothing)),c.ctp2.push(c.lineControlPoints(f[a-1],f[a],f[a+1],f[a+2],5,c.smoothing)));d.splice(0,1),d.splice(-1,1),f.splice(0,1),f.splice(-1,1)},m.pointsToGraph=function(){var a,b,c,d,e,f=this,j=f.h,k=f.pointMax,l=f.pointMin,m=f.graphPadding,n=f.graphScale,o=f.data1,p=f.data2,q=0+m[0],r=j-m[2];1!==n&&(b=r-q,c=Math.round(b/2),d=Math.round(b*n/2),q=c-d,r=c+d);var s=o.concat(p);g(k)&&s.push(k),g(l)&&s.push(l),k=i(s),l=h(s);var t=k-l,u=r-q,v=l;for(a=o.length;a--;)o[a]-=v,p[a]-=v,e=o[a]/t*100,0===t&&(e=0),e=100-e,o[a]=e*u/100,o[a]=Math.round(10*(o[a]+q))/10-1,e=p[a]/t*100,0===t&&(e=0),e=100-e,p[a]=e*u/100,p[a]=Math.round(10*(p[a]+q))/10-1;return r},m.lineControlPoints=function(a,b,c,d,e,f){e=e||5;var g=this.lowest-1,h=!1,i=this.findControlPoints(a,b,c),j=this.findControlPoints(b,c,d),k=i.c2,l=j.c1;return this.showConstruct&&(this.plotSquare(k,3,"0xff0000"),this.plotLine(b,k,"0xfc69f7"),this.plotSquare(l,3,"0xff0000"),this.plotLine(c,l,"0xfc69f7")),b.y==g&&c.y==g&&(h=!0),f!==!1&&(k.x=b.x-(b.x-k.x)*(h?.1:f),k.y=b.y-(b.y-k.y)*(h?.1:f),l.x=c.x-(c.x-l.x)*(h?.1:f),l.y=c.y-(c.y-l.y)*(h?.1:f)),[k,l]},m.findControlPoints=function(a,b,c){var d=a.x-b.x,e=a.y-b.y,f=b.x-c.x,g=b.y-c.y,h=Math.sqrt(d*d+e*e),i=Math.sqrt(f*f+g*g),j={x:(a.x+b.x)/2,y:(a.y+b.y)/2},k={x:(b.x+c.x)/2,y:(b.y+c.y)/2},l=j.x-k.x,m=j.y-k.y,n=i/(h+i),o={x:k.x+l*n,y:k.y+m*n},p=b.x-o.x,q=b.y-o.y,r={x:j.x+p,y:j.y+q},s={x:k.x+p,y:k.y+q};return this.showConstruct&&(this.plotLine(a,b,"0xdfcb45"),this.plotLine(b,c,"0xdfcb45"),this.plotPoint(j,1,"0x6ae676"),this.plotPoint(k,1,"0x1ad32b"),this.plotLine(j,k,"0x6ae676"),this.plotPoint(o,1,"0x3086e7")),{c1:r,c2:s,l1:Math.floor(h),l2:Math.floor(i)}},m.plotPoint=function(a,b,c){var d=new PIXI.Graphics;d.lineStyle(0,c),d.beginFill(c),d.drawCircle(a.x-b/2,a.y-b/2,b),d.endFill(),this.stage.addChild(d)},m.plotLine=function(a,b,c){var d=new PIXI.Graphics;d.lineStyle(1,c),d.moveTo(a.x,a.y),d.lineTo(b.x,b.y),this.stage.addChild(d)},m.plotSquare=function(a,b,c){var d=new PIXI.Graphics;d.lineStyle(0,c),d.beginFill(c),d.drawRect(a.x-b/2,a.y-b/2,b,b),d.endFill(),this.stage.addChild(d)},a.Groph=c,a.throttle=k,a.debounce=l}(window);