diff --git a/web/src/main/resources/pinpoint-web.properties b/web/src/main/resources/pinpoint-web.properties index 0faea0bcb85e..29fc033e67ce 100644 --- a/web/src/main/resources/pinpoint-web.properties +++ b/web/src/main/resources/pinpoint-web.properties @@ -1,11 +1,11 @@ -# local +#local cluster.enable=true cluster.web.tcp.port=9997 cluster.zookeeper.address=localhost cluster.zookeeper.sessiontimeout=30000 cluster.zookeeper.retry.interval=60000 cluster.connect.address= - + # FIXME - should be removed for proper authentication admin.password=admin @@ -19,4 +19,4 @@ config.sendUsage=true config.editUserInfo=true web.hbase.selectSpans.limit=500 -web.hbase.selectAllSpans.limit=500 \ No newline at end of file +web.hbase.selectAllSpans.limit=500 diff --git a/web/src/main/webapp/common/help/help-content-ko.js b/web/src/main/webapp/common/help/help-content-ko.js index 9a446a0d8694..651a11439b47 100644 --- a/web/src/main/webapp/common/help/help-content-ko.js +++ b/web/src/main/webapp/common/help/help-content-ko.js @@ -491,6 +491,18 @@ },{ name: "", desc: "설치된 agent의 agent-id" + },{ + name: "", + desc: "정상적으로 실행중인 agent 상태 표시" + },{ + name: "", + desc: "Shutdown 된 agent 상태 표시" + },{ + name: "", + desc: "연결이 끊긴 agent 상태 표시" + },{ + name: "", + desc: "알수 없는 상태의 agent 상태 표시" }] }] }, diff --git a/web/src/main/webapp/common/services/agent-ajax.service.js b/web/src/main/webapp/common/services/agent-ajax.service.js new file mode 100644 index 000000000000..fd9fa716d60f --- /dev/null +++ b/web/src/main/webapp/common/services/agent-ajax.service.js @@ -0,0 +1,52 @@ +(function($) { + 'use strict'; + + /** + * (en) Agent 모든 Ajax 요청을 대리함. + * @ko Agent 모든 Ajax 요청을 대리함. + * @group Service + * @name AgentAjaxService + * @class + */ + pinpointApp.constant('AgentAjaxServiceConfig', { + "agentList": "/getAgentList.pinpoint", // agentId, timestamp ( or agentId, from, to ) + "agentInfo": "/getAgentInfo.pinpoint", // agentId, timestamp + "agetEvent": "/getAgentEvent.pinpoint", // agentId, eventTimestamp, eventTypeCode + "agentStatus": "/getAgentStatus.pinpoint", // agentId, timestamp + "agentEventList": "/getAgentEvents.pinpoint", // agentId, from, to + "agentStateForChart": "/getAgentStat.pinpoint" // + }); + + pinpointApp.service('AgentAjaxService', [ 'AgentAjaxServiceConfig', '$http', function ($config, $http) { + this.getAgentList = function(data, callback) { + retrieve($config.agentList, data, callback); + }; + this.getAgentStateForChart = function( data, callback ) { + retrieve($config.agentStateForChart, data, callback); + }; + this.getAgentInfo = function( data, callback ) { + retrieve($config.agentInfo, data, callback); + }; + this.getEventList = function( data, callback ) { + retrieve($config.agentEventList, data, callback); + }; + this.getEvent = function( data, callback ) { + retrieve($config.agetEvent, data, callback); + }; + + function retrieve(url, data, callback) { + $http.get(url + getQueryStr( data ) ).then(function(result) { + callback(result.data); + }, function(error) { + callback(error); + }); + } + function getQueryStr( o ) { + var query = "?"; + for( var p in o ) { + query += ( query == "?" ? "" : "&" ) + p + "=" + o[p]; + } + return query; + } + }]); +})(jQuery); \ No newline at end of file diff --git a/web/src/main/webapp/common/services/navbar-vo.service.js b/web/src/main/webapp/common/services/navbar-vo.service.js index ed7406b390c5..2ec83d8b9465 100644 --- a/web/src/main/webapp/common/services/navbar-vo.service.js +++ b/web/src/main/webapp/common/services/navbar-vo.service.js @@ -23,8 +23,8 @@ this._sReadablePeriod = false; this._sQueryEndDateTime = false; - this._nCallerRange = preferenceService.getDepth(); - this._nCalleeRange = preferenceService.getDepth(); + this._nCallerRange = preferenceService.getCaller(); + this._nCalleeRange = preferenceService.getCallee(); this._sHint = false; diff --git a/web/src/main/webapp/common/services/preference.service.js b/web/src/main/webapp/common/services/preference.service.js index 87afc6ee0a96..e4f7617f8c2b 100644 --- a/web/src/main/webapp/common/services/preference.service.js +++ b/web/src/main/webapp/common/services/preference.service.js @@ -9,16 +9,21 @@ */ pinpointApp.constant('PreferenceServiceConfig', { names: { - depth: "preference.depth", + caller: "preference.caller", + callee: "preference.callee", period: "preference.period", favorite: "preference.favorite" }, defaults: { - depth: 1, + caller: 1, + callee: 1, period: "5m" }, list: [{ - name: "depth", + name: "caller", + type: "number" + },{ + name: "callee", type: "number" },{ name: "period", @@ -26,7 +31,7 @@ }], cst: { periodTypes: ['5m', '20m', '1h', '3h', '6h', '12h', '1d', '2d'], - depthList: [ 1, 2, 3, 4, 5, 6, 7, 8], + depthList: [ 1, 2, 3, 4], maxFavorite: 5000, maxPeriod: 2 } @@ -45,16 +50,16 @@ } aFavoriteList.push( applicationName ); setFavoriteList(); - } + }; this.removeFavorite = function( applicationName ) { var index = aFavoriteList.indexOf( applicationName ); if ( index === -1 ) return; aFavoriteList.splice( index, 1 ); setFavoriteList(); - } + }; function setFavoriteList() { localStorage.setItem(cfg.names.favorite, JSON.stringify(aFavoriteList) ); - }; + } this.getFavoriteList = function() { return aFavoriteList; }; @@ -66,7 +71,7 @@ }; this.getMaxPeriod = function() { return cfg.cst.maxPeriod; - } + }; function loadPreference() { diff --git a/web/src/main/webapp/common/services/tooltip.service.js b/web/src/main/webapp/common/services/tooltip.service.js new file mode 100644 index 000000000000..526fca19e9f0 --- /dev/null +++ b/web/src/main/webapp/common/services/tooltip.service.js @@ -0,0 +1,66 @@ +(function($) { + 'use strict'; + + /** + * (en) initialize tooltip. + * @ko Tooltip 초기화. + * @group Service + * @name TooltipService + * @class + */ + pinpointApp.constant('TooltipServiceConfig', { + "navbar": { + "position": "bottom", + "trigger": "click" + }, + "agentList": { + "position": "bottom", + "trigger": "click" + }, + "heap": { + "position": "top", + "trigger": "click" + }, + "permGen": { + "position": "top", + "trigger": "click" + }, + "cpuUsage": { + "position": "top", + "trigger": "click" + }, + "tps": { + "position": "top", + "trigger": "click" + } + }); + + pinpointApp.service('TooltipService', [ 'TooltipServiceConfig', 'helpContentTemplate', 'helpContentService', function ( $config, helpContentTemplate, helpContentService ) { + + this.init = function(type) { + $("." + type + "Tooltip").tooltipster({ + content: getTooltipStr( type ), + position: $config[type].position, + trigger: $config[type].trigger + }); + }; + + function getTooltipStr( type ) { + switch( type ) { + case "navbar": + return function() { return helpContentTemplate(helpContentService.navbar.applicationSelector) + helpContentTemplate(helpContentService.navbar.depth) + helpContentTemplate(helpContentService.navbar.periodSelector); }; + case "agentList": + return function() { return helpContentTemplate(helpContentService.inspector.list); }; + case "heap": + return function() { return helpContentTemplate(helpContentService.inspector.heap); }; + case "permGen": + return function() { return helpContentTemplate(helpContentService.inspector.permGen); }; + case "cpuUsage": + return function() { return helpContentTemplate(helpContentService.inspector.cpuUsage); }; + case "tps": + return function() { return helpContentTemplate(helpContentService.inspector.tps); }; + } + } + + }]); +})(jQuery); \ No newline at end of file diff --git a/web/src/main/webapp/components/snap.svg/snap.svg.min.js b/web/src/main/webapp/components/snap.svg/snap.svg.min.js new file mode 100755 index 000000000000..6567d1992aa0 --- /dev/null +++ b/web/src/main/webapp/components/snap.svg/snap.svg.min.js @@ -0,0 +1,21 @@ +// Snap.svg 0.4.1 +// +// Copyright (c) 2013 – 2015 Adobe Systems Incorporated. All rights reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +// build: 2015-04-13 + +!function(a){var b,c,d="0.4.2",e="hasOwnProperty",f=/[\.\/]/,g=/\s*,\s*/,h="*",i=function(a,b){return a-b},j={n:{}},k=function(){for(var a=0,b=this.length;b>a;a++)if("undefined"!=typeof this[a])return this[a]},l=function(){for(var a=this.length;--a;)if("undefined"!=typeof this[a])return this[a]},m=function(a,d){a=String(a);var e,f=c,g=Array.prototype.slice.call(arguments,2),h=m.listeners(a),j=0,n=[],o={},p=[],q=b;p.firstDefined=k,p.lastDefined=l,b=a,c=0;for(var r=0,s=h.length;s>r;r++)"zIndex"in h[r]&&(n.push(h[r].zIndex),h[r].zIndex<0&&(o[h[r].zIndex]=h[r]));for(n.sort(i);n[j]<0;)if(e=o[n[j++]],p.push(e.apply(d,g)),c)return c=f,p;for(r=0;s>r;r++)if(e=h[r],"zIndex"in e)if(e.zIndex==n[j]){if(p.push(e.apply(d,g)),c)break;do if(j++,e=o[n[j]],e&&p.push(e.apply(d,g)),c)break;while(e)}else o[e.zIndex]=e;else if(p.push(e.apply(d,g)),c)break;return c=f,b=q,p};m._events=j,m.listeners=function(a){var b,c,d,e,g,i,k,l,m=a.split(f),n=j,o=[n],p=[];for(e=0,g=m.length;g>e;e++){for(l=[],i=0,k=o.length;k>i;i++)for(n=o[i].n,c=[n[m[e]],n[h]],d=2;d--;)b=c[d],b&&(l.push(b),p=p.concat(b.f||[]));o=l}return p},m.on=function(a,b){if(a=String(a),"function"!=typeof b)return function(){};for(var c=a.split(g),d=0,e=c.length;e>d;d++)!function(a){for(var c,d=a.split(f),e=j,g=0,h=d.length;h>g;g++)e=e.n,e=e.hasOwnProperty(d[g])&&e[d[g]]||(e[d[g]]={n:{}});for(e.f=e.f||[],g=0,h=e.f.length;h>g;g++)if(e.f[g]==b){c=!0;break}!c&&e.f.push(b)}(c[d]);return function(a){+a==+a&&(b.zIndex=+a)}},m.f=function(a){var b=[].slice.call(arguments,1);return function(){m.apply(null,[a,null].concat(b).concat([].slice.call(arguments,0)))}},m.stop=function(){c=1},m.nt=function(a){return a?new RegExp("(?:\\.|\\/|^)"+a+"(?:\\.|\\/|$)").test(b):b},m.nts=function(){return b.split(f)},m.off=m.unbind=function(a,b){if(!a)return void(m._events=j={n:{}});var c=a.split(g);if(c.length>1)for(var d=0,i=c.length;i>d;d++)m.off(c[d],b);else{c=a.split(f);var k,l,n,d,i,o,p,q=[j];for(d=0,i=c.length;i>d;d++)for(o=0;od;d++)for(k=q[d];k.n;){if(b){if(k.f){for(o=0,p=k.f.length;p>o;o++)if(k.f[o]==b){k.f.splice(o,1);break}!k.f.length&&delete k.f}for(l in k.n)if(k.n[e](l)&&k.n[l].f){var r=k.n[l].f;for(o=0,p=r.length;p>o;o++)if(r[o]==b){r.splice(o,1);break}!r.length&&delete k.n[l].f}}else{delete k.f;for(l in k.n)k.n[e](l)&&k.n[l].f&&delete k.n[l].f}k=k.n}}},m.once=function(a,b){var c=function(){return m.unbind(a,c),b.apply(this,arguments)};return m.on(a,c)},m.version=d,m.toString=function(){return"You are running Eve "+d},"undefined"!=typeof module&&module.exports?module.exports=m:"function"==typeof define&&define.amd?define("eve",[],function(){return m}):a.eve=m}(this),function(a,b){if("function"==typeof define&&define.amd)define(["eve"],function(c){return b(a,c)});else if("undefined"!=typeof exports){var c=require("eve");module.exports=b(a,c)}else b(a,a.eve)}(window||this,function(a,b){var c=function(b){var c={},d=a.requestAnimationFrame||a.webkitRequestAnimationFrame||a.mozRequestAnimationFrame||a.oRequestAnimationFrame||a.msRequestAnimationFrame||function(a){setTimeout(a,16)},e=Array.isArray||function(a){return a instanceof Array||"[object Array]"==Object.prototype.toString.call(a)},f=0,g="M"+(+new Date).toString(36),h=function(){return g+(f++).toString(36)},i=Date.now||function(){return+new Date},j=function(a){var b=this;if(null==a)return b.s;var c=b.s-a;b.b+=b.dur*c,b.B+=b.dur*c,b.s=a},k=function(a){var b=this;return null==a?b.spd:void(b.spd=a)},l=function(a){var b=this;return null==a?b.dur:(b.s=b.s*a/b.dur,void(b.dur=a))},m=function(){var a=this;delete c[a.id],a.update(),b("mina.stop."+a.id,a)},n=function(){var a=this;a.pdif||(delete c[a.id],a.update(),a.pdif=a.get()-a.b)},o=function(){var a=this;a.pdif&&(a.b=a.get()-a.pdif,delete a.pdif,c[a.id]=a)},p=function(){var a,b=this;if(e(b.start)){a=[];for(var c=0,d=b.start.length;d>c;c++)a[c]=+b.start[c]+(b.end[c]-b.start[c])*b.easing(b.s)}else a=+b.start+(b.end-b.start)*b.easing(b.s);b.set(a)},q=function(){var a=0;for(var e in c)if(c.hasOwnProperty(e)){var f=c[e],g=f.get();a++,f.s=(g-f.b)/(f.dur/f.spd),f.s>=1&&(delete c[e],f.s=1,a--,function(a){setTimeout(function(){b("mina.finish."+a.id,a)})}(f)),f.update()}a&&d(q)},r=function(a,b,e,f,g,i,s){var t={id:h(),start:a,end:b,b:e,s:0,dur:f-e,spd:1,get:g,set:i,easing:s||r.linear,status:j,speed:k,duration:l,stop:m,pause:n,resume:o,update:p};c[t.id]=t;var u,v=0;for(u in c)if(c.hasOwnProperty(u)&&(v++,2==v))break;return 1==v&&d(q),t};return r.time=i,r.getById=function(a){return c[a]||null},r.linear=function(a){return a},r.easeout=function(a){return Math.pow(a,1.7)},r.easein=function(a){return Math.pow(a,.48)},r.easeinout=function(a){if(1==a)return 1;if(0==a)return 0;var b=.48-a/1.04,c=Math.sqrt(.1734+b*b),d=c-b,e=Math.pow(Math.abs(d),1/3)*(0>d?-1:1),f=-c-b,g=Math.pow(Math.abs(f),1/3)*(0>f?-1:1),h=e+g+.5;return 3*(1-h)*h*h+h*h*h},r.backin=function(a){if(1==a)return 1;var b=1.70158;return a*a*((b+1)*a-b)},r.backout=function(a){if(0==a)return 0;a-=1;var b=1.70158;return a*a*((b+1)*a+b)+1},r.elastic=function(a){return a==!!a?a:Math.pow(2,-10*a)*Math.sin(2*(a-.075)*Math.PI/.3)+1},r.bounce=function(a){var b,c=7.5625,d=2.75;return 1/d>a?b=c*a*a:2/d>a?(a-=1.5/d,b=c*a*a+.75):2.5/d>a?(a-=2.25/d,b=c*a*a+.9375):(a-=2.625/d,b=c*a*a+.984375),b},a.mina=r,r}("undefined"==typeof b?function(){}:b),d=function(a){function c(a,b){if(a){if(a.nodeType)return w(a);if(e(a,"array")&&c.set)return c.set.apply(c,a);if(a instanceof s)return a;if(null==b)return a=y.doc.querySelector(String(a)),w(a)}return a=null==a?"100%":a,b=null==b?"100%":b,new v(a,b)}function d(a,b){if(b){if("#text"==a&&(a=y.doc.createTextNode(b.text||b["#text"]||"")),"#comment"==a&&(a=y.doc.createComment(b.text||b["#text"]||"")),"string"==typeof a&&(a=d(a)),"string"==typeof b)return 1==a.nodeType?"xlink:"==b.substring(0,6)?a.getAttributeNS(T,b.substring(6)):"xml:"==b.substring(0,4)?a.getAttributeNS(U,b.substring(4)):a.getAttribute(b):"text"==b?a.nodeValue:null;if(1==a.nodeType){for(var c in b)if(b[z](c)){var e=A(b[c]);e?"xlink:"==c.substring(0,6)?a.setAttributeNS(T,c.substring(6),e):"xml:"==c.substring(0,4)?a.setAttributeNS(U,c.substring(4),e):a.setAttribute(c,e):a.removeAttribute(c)}}else"text"in b&&(a.nodeValue=b.text)}else a=y.doc.createElementNS(U,a);return a}function e(a,b){return b=A.prototype.toLowerCase.call(b),"finite"==b?isFinite(a):"array"==b&&(a instanceof Array||Array.isArray&&Array.isArray(a))?!0:"null"==b&&null===a||b==typeof a&&null!==a||"object"==b&&a===Object(a)||J.call(a).slice(8,-1).toLowerCase()==b}function f(a){if("function"==typeof a||Object(a)!==a)return a;var b=new a.constructor;for(var c in a)a[z](c)&&(b[c]=f(a[c]));return b}function h(a,b){for(var c=0,d=a.length;d>c;c++)if(a[c]===b)return a.push(a.splice(c,1)[0])}function i(a,b,c){function d(){var e=Array.prototype.slice.call(arguments,0),f=e.join("␀"),g=d.cache=d.cache||{},i=d.count=d.count||[];return g[z](f)?(h(i,f),c?c(g[f]):g[f]):(i.length>=1e3&&delete g[i.shift()],i.push(f),g[f]=a.apply(b,e),c?c(g[f]):g[f])}return d}function j(a,b,c,d,e,f){if(null==e){var g=a-c,h=b-d;return g||h?(180+180*D.atan2(-h,-g)/H+360)%360:0}return j(a,b,e,f)-j(c,d,e,f)}function k(a){return a%360*H/180}function l(a){return 180*a/H%360}function m(a){var b=[];return a=a.replace(/(?:^|\s)(\w+)\(([^)]+)\)/g,function(a,c,d){return d=d.split(/\s*,\s*|\s+/),"rotate"==c&&1==d.length&&d.push(0,0),"scale"==c&&(d.length>2?d=d.slice(0,2):2==d.length&&d.push(0,0),1==d.length&&d.push(d[0],0,0)),b.push("skewX"==c?["m",1,0,D.tan(k(d[0])),1,0,0]:"skewY"==c?["m",1,D.tan(k(d[0])),0,1,0,0]:[c.charAt(0)].concat(d)),a}),b}function n(a,b){var d=ab(a),e=new c.Matrix;if(d)for(var f=0,g=d.length;g>f;f++){var h,i,j,k,l,m=d[f],n=m.length,o=A(m[0]).toLowerCase(),p=m[0]!=o,q=p?e.invert():0;"t"==o&&2==n?e.translate(m[1],0):"t"==o&&3==n?p?(h=q.x(0,0),i=q.y(0,0),j=q.x(m[1],m[2]),k=q.y(m[1],m[2]),e.translate(j-h,k-i)):e.translate(m[1],m[2]):"r"==o?2==n?(l=l||b,e.rotate(m[1],l.x+l.width/2,l.y+l.height/2)):4==n&&(p?(j=q.x(m[2],m[3]),k=q.y(m[2],m[3]),e.rotate(m[1],j,k)):e.rotate(m[1],m[2],m[3])):"s"==o?2==n||3==n?(l=l||b,e.scale(m[1],m[n-1],l.x+l.width/2,l.y+l.height/2)):4==n?p?(j=q.x(m[2],m[3]),k=q.y(m[2],m[3]),e.scale(m[1],m[1],j,k)):e.scale(m[1],m[1],m[2],m[3]):5==n&&(p?(j=q.x(m[3],m[4]),k=q.y(m[3],m[4]),e.scale(m[1],m[2],j,k)):e.scale(m[1],m[2],m[3],m[4])):"m"==o&&7==n&&e.add(m[1],m[2],m[3],m[4],m[5],m[6])}return e}function o(a){var b=a.node.ownerSVGElement&&w(a.node.ownerSVGElement)||a.node.parentNode&&w(a.node.parentNode)||c.select("svg")||c(0,0),d=b.select("defs"),e=null==d?!1:d.node;return e||(e=u("defs",b.node).node),e}function p(a){return a.node.ownerSVGElement&&w(a.node.ownerSVGElement)||c.select("svg")}function q(a,b,c){function e(a){if(null==a)return I;if(a==+a)return a;d(j,{width:a});try{return j.getBBox().width}catch(b){return 0}}function f(a){if(null==a)return I;if(a==+a)return a;d(j,{height:a});try{return j.getBBox().height}catch(b){return 0}}function g(d,e){null==b?i[d]=e(a.attr(d)||0):d==b&&(i=e(null==c?a.attr(d)||0:c))}var h=p(a).node,i={},j=h.querySelector(".svg---mgr");switch(j||(j=d("rect"),d(j,{x:-9e9,y:-9e9,width:10,height:10,"class":"svg---mgr",fill:"none"}),h.appendChild(j)),a.type){case"rect":g("rx",e),g("ry",f);case"image":g("width",e),g("height",f);case"text":g("x",e),g("y",f);break;case"circle":g("cx",e),g("cy",f),g("r",e);break;case"ellipse":g("cx",e),g("cy",f),g("rx",e),g("ry",f);break;case"line":g("x1",e),g("x2",e),g("y1",f),g("y2",f);break;case"marker":g("refX",e),g("markerWidth",e),g("refY",f),g("markerHeight",f);break;case"radialGradient":g("fx",e),g("fy",f);break;case"tspan":g("dx",e),g("dy",f);break;default:g(b,e)}return h.removeChild(j),i}function r(a){e(a,"array")||(a=Array.prototype.slice.call(arguments,0));for(var b=0,c=0,d=this.node;this[b];)delete this[b++];for(b=0;bc;c++){var e={type:a[c].type,attr:a[c].attr()},f=a[c].children();b.push(e),f.length&&x(f,e.childNodes=[])}}c.version="0.4.0",c.toString=function(){return"Snap v"+this.version},c._={};var y={win:a.window,doc:a.window.document};c._.glob=y;{var z="hasOwnProperty",A=String,B=parseFloat,C=parseInt,D=Math,E=D.max,F=D.min,G=D.abs,H=(D.pow,D.PI),I=(D.round,""),J=Object.prototype.toString,K=/^\s*((#[a-f\d]{6})|(#[a-f\d]{3})|rgba?\(\s*([\d\.]+%?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+%?(?:\s*,\s*[\d\.]+%?)?)\s*\)|hsba?\(\s*([\d\.]+(?:deg|\xb0|%)?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+(?:%?\s*,\s*[\d\.]+)?%?)\s*\)|hsla?\(\s*([\d\.]+(?:deg|\xb0|%)?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+(?:%?\s*,\s*[\d\.]+)?%?)\s*\))\s*$/i,L=(c._.separator=/[,\s]+/,/[\s]*,[\s]*/),M={hs:1,rg:1},N=/([a-z])[\s,]*((-?\d*\.?\d*(?:e[\-+]?\d+)?[\s]*,?[\s]*)+)/gi,O=/([rstm])[\s,]*((-?\d*\.?\d*(?:e[\-+]?\d+)?[\s]*,?[\s]*)+)/gi,P=/(-?\d*\.?\d*(?:e[\-+]?\\d+)?)[\s]*,?[\s]*/gi,Q=0,R="S"+(+new Date).toString(36),S=function(a){return(a&&a.type?a.type:I)+R+(Q++).toString(36)},T="http://www.w3.org/1999/xlink",U="http://www.w3.org/2000/svg",V={};c.url=function(a){return"url('#"+a+"')"}}c._.$=d,c._.id=S,c.format=function(){var a=/\{([^\}]+)\}/g,b=/(?:(?:^|\.)(.+?)(?=\[|\.|$|\()|\[('|")(.+?)\2\])(\(\))?/g,c=function(a,c,d){var e=d;return c.replace(b,function(a,b,c,d,f){b=b||d,e&&(b in e&&(e=e[b]),"function"==typeof e&&f&&(e=e()))}),e=(null==e||e==d?a:e)+""};return function(b,d){return A(b).replace(a,function(a,b){return c(a,b,d)})}}(),c._.clone=f,c._.cacher=i,c.rad=k,c.deg=l,c.sin=function(a){return D.sin(c.rad(a))},c.tan=function(a){return D.tan(c.rad(a))},c.cos=function(a){return D.cos(c.rad(a))},c.asin=function(a){return c.deg(D.asin(a))},c.acos=function(a){return c.deg(D.acos(a))},c.atan=function(a){return c.deg(D.atan(a))},c.atan2=function(a){return c.deg(D.atan2(a))},c.angle=j,c.len=function(a,b,d,e){return Math.sqrt(c.len2(a,b,d,e))},c.len2=function(a,b,c,d){return(a-c)*(a-c)+(b-d)*(b-d)},c.closestPoint=function(a,b,c){function d(a){var d=a.x-b,e=a.y-c;return d*d+e*e}for(var e,f,g,h,i=a.node,j=i.getTotalLength(),k=j/i.pathSegList.numberOfItems*.125,l=1/0,m=0;j>=m;m+=k)(h=d(g=i.getPointAtLength(m))).5;){var n,o,p,q,r,s;(p=f-k)>=0&&(r=d(n=i.getPointAtLength(p)))f)return b-f;if(f>a-c)return b-f+a}return b},c.getRGB=i(function(a){if(!a||(a=A(a)).indexOf("-")+1)return{r:-1,g:-1,b:-1,hex:"none",error:1,toString:Z};if("none"==a)return{r:-1,g:-1,b:-1,hex:"none",toString:Z};if(!(M[z](a.toLowerCase().substring(0,2))||"#"==a.charAt())&&(a=W(a)),!a)return{r:-1,g:-1,b:-1,hex:"none",error:1,toString:Z};var b,d,f,g,h,i,j=a.match(K);return j?(j[2]&&(f=C(j[2].substring(5),16),d=C(j[2].substring(3,5),16),b=C(j[2].substring(1,3),16)),j[3]&&(f=C((h=j[3].charAt(3))+h,16),d=C((h=j[3].charAt(2))+h,16),b=C((h=j[3].charAt(1))+h,16)),j[4]&&(i=j[4].split(L),b=B(i[0]),"%"==i[0].slice(-1)&&(b*=2.55),d=B(i[1]),"%"==i[1].slice(-1)&&(d*=2.55),f=B(i[2]),"%"==i[2].slice(-1)&&(f*=2.55),"rgba"==j[1].toLowerCase().slice(0,4)&&(g=B(i[3])),i[3]&&"%"==i[3].slice(-1)&&(g/=100)),j[5]?(i=j[5].split(L),b=B(i[0]),"%"==i[0].slice(-1)&&(b/=100),d=B(i[1]),"%"==i[1].slice(-1)&&(d/=100),f=B(i[2]),"%"==i[2].slice(-1)&&(f/=100),("deg"==i[0].slice(-3)||"°"==i[0].slice(-1))&&(b/=360),"hsba"==j[1].toLowerCase().slice(0,4)&&(g=B(i[3])),i[3]&&"%"==i[3].slice(-1)&&(g/=100),c.hsb2rgb(b,d,f,g)):j[6]?(i=j[6].split(L),b=B(i[0]),"%"==i[0].slice(-1)&&(b/=100),d=B(i[1]),"%"==i[1].slice(-1)&&(d/=100),f=B(i[2]),"%"==i[2].slice(-1)&&(f/=100),("deg"==i[0].slice(-3)||"°"==i[0].slice(-1))&&(b/=360),"hsla"==j[1].toLowerCase().slice(0,4)&&(g=B(i[3])),i[3]&&"%"==i[3].slice(-1)&&(g/=100),c.hsl2rgb(b,d,f,g)):(b=F(D.round(b),255),d=F(D.round(d),255),f=F(D.round(f),255),g=F(E(g,0),1),j={r:b,g:d,b:f,toString:Z},j.hex="#"+(16777216|f|d<<8|b<<16).toString(16).slice(1),j.opacity=e(g,"finite")?g:1,j)):{r:-1,g:-1,b:-1,hex:"none",error:1,toString:Z}},c),c.hsb=i(function(a,b,d){return c.hsb2rgb(a,b,d).hex}),c.hsl=i(function(a,b,d){return c.hsl2rgb(a,b,d).hex}),c.rgb=i(function(a,b,c,d){if(e(d,"finite")){var f=D.round;return"rgba("+[f(a),f(b),f(c),+d.toFixed(2)]+")"}return"#"+(16777216|c|b<<8|a<<16).toString(16).slice(1)});var W=function(a){var b=y.doc.getElementsByTagName("head")[0]||y.doc.getElementsByTagName("svg")[0],c="rgb(255, 0, 0)";return(W=i(function(a){if("red"==a.toLowerCase())return c;b.style.color=c,b.style.color=a;var d=y.doc.defaultView.getComputedStyle(b,I).getPropertyValue("color");return d==c?null:d}))(a)},X=function(){return"hsb("+[this.h,this.s,this.b]+")"},Y=function(){return"hsl("+[this.h,this.s,this.l]+")"},Z=function(){return 1==this.opacity||null==this.opacity?this.hex:"rgba("+[this.r,this.g,this.b,this.opacity]+")"},$=function(a,b,d){if(null==b&&e(a,"object")&&"r"in a&&"g"in a&&"b"in a&&(d=a.b,b=a.g,a=a.r),null==b&&e(a,string)){var f=c.getRGB(a);a=f.r,b=f.g,d=f.b}return(a>1||b>1||d>1)&&(a/=255,b/=255,d/=255),[a,b,d]},_=function(a,b,d,f){a=D.round(255*a),b=D.round(255*b),d=D.round(255*d);var g={r:a,g:b,b:d,opacity:e(f,"finite")?f:1,hex:c.rgb(a,b,d),toString:Z};return e(f,"finite")&&(g.opacity=f),g};c.color=function(a){var b;return e(a,"object")&&"h"in a&&"s"in a&&"b"in a?(b=c.hsb2rgb(a),a.r=b.r,a.g=b.g,a.b=b.b,a.opacity=1,a.hex=b.hex):e(a,"object")&&"h"in a&&"s"in a&&"l"in a?(b=c.hsl2rgb(a),a.r=b.r,a.g=b.g,a.b=b.b,a.opacity=1,a.hex=b.hex):(e(a,"string")&&(a=c.getRGB(a)),e(a,"object")&&"r"in a&&"g"in a&&"b"in a&&!("error"in a)?(b=c.rgb2hsl(a),a.h=b.h,a.s=b.s,a.l=b.l,b=c.rgb2hsb(a),a.v=b.b):(a={hex:"none"},a.r=a.g=a.b=a.h=a.s=a.v=a.l=-1,a.error=1)),a.toString=Z,a},c.hsb2rgb=function(a,b,c,d){e(a,"object")&&"h"in a&&"s"in a&&"b"in a&&(c=a.b,b=a.s,d=a.o,a=a.h),a*=360;var f,g,h,i,j;return a=a%360/60,j=c*b,i=j*(1-G(a%2-1)),f=g=h=c-j,a=~~a,f+=[j,i,0,0,i,j][a],g+=[i,j,j,i,0,0][a],h+=[0,0,i,j,j,i][a],_(f,g,h,d)},c.hsl2rgb=function(a,b,c,d){e(a,"object")&&"h"in a&&"s"in a&&"l"in a&&(c=a.l,b=a.s,a=a.h),(a>1||b>1||c>1)&&(a/=360,b/=100,c/=100),a*=360;var f,g,h,i,j;return a=a%360/60,j=2*b*(.5>c?c:1-c),i=j*(1-G(a%2-1)),f=g=h=c-j/2,a=~~a,f+=[j,i,0,0,i,j][a],g+=[i,j,j,i,0,0][a],h+=[0,0,i,j,j,i][a],_(f,g,h,d)},c.rgb2hsb=function(a,b,c){c=$(a,b,c),a=c[0],b=c[1],c=c[2];var d,e,f,g;return f=E(a,b,c),g=f-F(a,b,c),d=0==g?null:f==a?(b-c)/g:f==b?(c-a)/g+2:(a-b)/g+4,d=(d+360)%6*60/360,e=0==g?0:g/f,{h:d,s:e,b:f,toString:X}},c.rgb2hsl=function(a,b,c){c=$(a,b,c),a=c[0],b=c[1],c=c[2];var d,e,f,g,h,i;return g=E(a,b,c),h=F(a,b,c),i=g-h,d=0==i?null:g==a?(b-c)/i:g==b?(c-a)/i+2:(a-b)/i+4,d=(d+360)%6*60/360,f=(g+h)/2,e=0==i?0:.5>f?i/(2*f):i/(2-2*f),{h:d,s:e,l:f,toString:Y}},c.parsePathString=function(a){if(!a)return null;var b=c.path(a);if(b.arr)return c.path.clone(b.arr);var d={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},f=[];return e(a,"array")&&e(a[0],"array")&&(f=c.path.clone(a)),f.length||A(a).replace(N,function(a,b,c){var e=[],g=b.toLowerCase();if(c.replace(P,function(a,b){b&&e.push(+b)}),"m"==g&&e.length>2&&(f.push([b].concat(e.splice(0,2))),g="l",b="m"==b?"l":"L"),"o"==g&&1==e.length&&f.push([b,e[0]]),"r"==g)f.push([b].concat(e));else for(;e.length>=d[g]&&(f.push([b].concat(e.splice(0,d[g]))),d[g]););}),f.toString=c.path.toString,b.arr=c.path.clone(f),f};var ab=c.parseTransformString=function(a){if(!a)return null;var b=[];return e(a,"array")&&e(a[0],"array")&&(b=c.path.clone(a)),b.length||A(a).replace(O,function(a,c,d){{var e=[];c.toLowerCase()}d.replace(P,function(a,b){b&&e.push(+b)}),b.push([c].concat(e))}),b.toString=c.path.toString,b};c._.svgTransform2string=m,c._.rgTransform=/^[a-z][\s]*-?\.?\d/i,c._.transform2matrix=n,c._unit2px=q;y.doc.contains||y.doc.compareDocumentPosition?function(a,b){var c=9==a.nodeType?a.documentElement:a,d=b&&b.parentNode;return a==d||!(!d||1!=d.nodeType||!(c.contains?c.contains(d):a.compareDocumentPosition&&16&a.compareDocumentPosition(d)))}:function(a,b){if(b)for(;b;)if(b=b.parentNode,b==a)return!0;return!1};c._.getSomeDefs=o,c._.getSomeSVG=p,c.select=function(a){return a=A(a).replace(/([^\\]):/g,"$1\\:"),w(y.doc.querySelector(a))},c.selectAll=function(a){for(var b=y.doc.querySelectorAll(a),d=(c.set||Array)(),e=0;ei;i++)h[g[i].nodeName]=g[i].nodeValue;return h}if(e(a,"string")){if(!(arguments.length>1))return b("snap.util.getattr."+a,d).firstDefined();var k={};k[a]=c,a=k}for(var l in a)a[z](l)&&b("snap.util.attr."+l,d,a[l]);return d},c.parse=function(a){var b=y.doc.createDocumentFragment(),c=!0,d=y.doc.createElement("div");if(a=A(a),a.match(/^\s*<\s*svg(?:\s|>)/)||(a=""+a+"",c=!1),d.innerHTML=a,a=d.getElementsByTagName("svg")[0])if(c)b=a;else for(;a.firstChild;)b.appendChild(a.firstChild);return new t(b)},c.fragment=function(){for(var a=Array.prototype.slice.call(arguments,0),b=y.doc.createDocumentFragment(),d=0,e=a.length;e>d;d++){var f=a[d];f.node&&f.node.nodeType&&b.appendChild(f.node),f.nodeType&&b.appendChild(f),"string"==typeof f&&b.appendChild(c.parse(f).node)}return new t(b)},c._.make=u,c._.wrap=w,v.prototype.el=function(a,b){var c=u(a,this.node);return b&&c.attr(b),c},s.prototype.children=function(){for(var a=[],b=this.node.childNodes,d=0,e=b.length;e>d;d++)a[d]=c(b[d]);return a},s.prototype.toJSON=function(){var a=[];return x([this],a),a[0]},b.on("snap.util.getattr",function(){var a=b.nt();a=a.substring(a.lastIndexOf(".")+1);var c=a.replace(/[A-Z]/g,function(a){return"-"+a.toLowerCase()});return bb[z](c)?this.node.ownerDocument.defaultView.getComputedStyle(this.node,null).getPropertyValue(c):d(this.node,a)});var bb={"alignment-baseline":0,"baseline-shift":0,clip:0,"clip-path":0,"clip-rule":0,color:0,"color-interpolation":0,"color-interpolation-filters":0,"color-profile":0,"color-rendering":0,cursor:0,direction:0,display:0,"dominant-baseline":0,"enable-background":0,fill:0,"fill-opacity":0,"fill-rule":0,filter:0,"flood-color":0,"flood-opacity":0,font:0,"font-family":0,"font-size":0,"font-size-adjust":0,"font-stretch":0,"font-style":0,"font-variant":0,"font-weight":0,"glyph-orientation-horizontal":0,"glyph-orientation-vertical":0,"image-rendering":0,kerning:0,"letter-spacing":0,"lighting-color":0,marker:0,"marker-end":0,"marker-mid":0,"marker-start":0,mask:0,opacity:0,overflow:0,"pointer-events":0,"shape-rendering":0,"stop-color":0,"stop-opacity":0,stroke:0,"stroke-dasharray":0,"stroke-dashoffset":0,"stroke-linecap":0,"stroke-linejoin":0,"stroke-miterlimit":0,"stroke-opacity":0,"stroke-width":0,"text-anchor":0,"text-decoration":0,"text-rendering":0,"unicode-bidi":0,visibility:0,"word-spacing":0,"writing-mode":0};b.on("snap.util.attr",function(a){var c=b.nt(),e={};c=c.substring(c.lastIndexOf(".")+1),e[c]=a;var f=c.replace(/-(\w)/gi,function(a,b){return b.toUpperCase()}),g=c.replace(/[A-Z]/g,function(a){return"-"+a.toLowerCase()});bb[z](g)?this.node.style[f]=null==a?I:a:d(this.node,e)}),function(){}(v.prototype),c.ajax=function(a,c,d,f){var g=new XMLHttpRequest,h=S();if(g){if(e(c,"function"))f=d,d=c,c=null;else if(e(c,"object")){var i=[];for(var j in c)c.hasOwnProperty(j)&&i.push(encodeURIComponent(j)+"="+encodeURIComponent(c[j]));c=i.join("&")}return g.open(c?"POST":"GET",a,!0),c&&(g.setRequestHeader("X-Requested-With","XMLHttpRequest"),g.setRequestHeader("Content-type","application/x-www-form-urlencoded")),d&&(b.once("snap.ajax."+h+".0",d),b.once("snap.ajax."+h+".200",d),b.once("snap.ajax."+h+".304",d)),g.onreadystatechange=function(){4==g.readyState&&b("snap.ajax."+h+"."+g.status,f,g)},4==g.readyState?g:(g.send(c),g)}},c.load=function(a,b,d){c.ajax(a,function(a){var e=c.parse(a.responseText);d?b.call(d,e):b(e)})};var cb=function(a){var b=a.getBoundingClientRect(),c=a.ownerDocument,d=c.body,e=c.documentElement,f=e.clientTop||d.clientTop||0,h=e.clientLeft||d.clientLeft||0,i=b.top+(g.win.pageYOffset||e.scrollTop||d.scrollTop)-f,j=b.left+(g.win.pageXOffset||e.scrollLeft||d.scrollLeft)-h;return{y:i,x:j}};return c.getElementByPoint=function(a,b){var c=this,d=(c.canvas,y.doc.elementFromPoint(a,b));if(y.win.opera&&"svg"==d.tagName){var e=cb(d),f=d.createSVGRect();f.x=a-e.x,f.y=b-e.y,f.width=f.height=1;var g=d.getIntersectionList(f,null);g.length&&(d=g[g.length-1])}return d?w(d):null},c.plugin=function(a){a(c,s,v,y,t)},y.win.Snap=c,c}(a||this);return d.plugin(function(d,e,f,g,h){function i(a,b){if(null==b){var c=!0;if(b=a.node.getAttribute("linearGradient"==a.type||"radialGradient"==a.type?"gradientTransform":"pattern"==a.type?"patternTransform":"transform"),!b)return new d.Matrix;b=d._.svgTransform2string(b)}else b=d._.rgTransform.test(b)?o(b).replace(/\.{3}|\u2026/g,a._.transform||""):d._.svgTransform2string(b),n(b,"array")&&(b=d.path?d.path.toString.call(b):o(b)),a._.transform=b;var e=d._.transform2matrix(b,a.getBBox(1));return c?e:void(a.matrix=e)}function j(a){function b(a,b){var c=q(a.node,b);c=c&&c.match(f),c=c&&c[2],c&&"#"==c.charAt()&&(c=c.substring(1),c&&(h[c]=(h[c]||[]).concat(function(c){var d={};d[b]=URL(c),q(a.node,d)})))}function c(a){var b=q(a.node,"xlink:href");b&&"#"==b.charAt()&&(b=b.substring(1),b&&(h[b]=(h[b]||[]).concat(function(b){a.attr("xlink:href","#"+b)})))}for(var d,e=a.selectAll("*"),f=/^\s*url\(("|'|)(.*)\1\)\s*$/,g=[],h={},i=0,j=e.length;j>i;i++){d=e[i],b(d,"fill"),b(d,"stroke"),b(d,"filter"),b(d,"mask"),b(d,"clip-path"),c(d);var k=q(d.node,"id");k&&(q(d.node,{id:d.id}),g.push({old:k,id:d.id}))}for(i=0,j=g.length;j>i;i++){var l=h[g[i].old];if(l)for(var m=0,n=l.length;n>m;m++)l[m](g[i].id)}}function k(a,b,c){return function(d){var e=d.slice(a,b);return 1==e.length&&(e=e[0]),c?c(e):e}}function l(a){return function(){var b=a?"<"+this.type:"",c=this.node.attributes,d=this.node.childNodes;if(a)for(var e=0,f=c.length;f>e;e++)b+=" "+c[e].name+'="'+c[e].value.replace(/"/g,'\\"')+'"';if(d.length){for(a&&(b+=">"),e=0,f=d.length;f>e;e++)3==d[e].nodeType?b+=d[e].nodeValue:1==d[e].nodeType&&(b+=u(d[e]).toString());a&&(b+="")}else a&&(b+="/>");return b}}var m=e.prototype,n=d.is,o=String,p=d._unit2px,q=d._.$,r=d._.make,s=d._.getSomeDefs,t="hasOwnProperty",u=d._.wrap;m.getBBox=function(a){if(!d.Matrix||!d.path)return this.node.getBBox();var b=this,c=new d.Matrix;if(b.removed)return d._.box();for(;"use"==b.type;)if(a||(c=c.add(b.transform().localMatrix.translate(b.attr("x")||0,b.attr("y")||0))),b.original)b=b.original;else{var e=b.attr("xlink:href");b=b.original=b.node.ownerDocument.getElementById(e.substring(e.indexOf("#")+1))}var f=b._,g=d.path.get[b.type]||d.path.get.deflt;try{return a?(f.bboxwt=g?d.path.getBBox(b.realPath=g(b)):d._.box(b.node.getBBox()),d._.box(f.bboxwt)):(b.realPath=g(b),b.matrix=b.transform().localMatrix,f.bbox=d.path.getBBox(d.path.map(b.realPath,c.add(b.matrix))),d._.box(f.bbox))}catch(h){return d._.box()}};var v=function(){return this.string};m.transform=function(a){var b=this._;if(null==a){for(var c,e=this,f=new d.Matrix(this.node.getCTM()),g=i(this),h=[g],j=new d.Matrix,k=g.toTransformString(),l=o(g)==o(this.matrix)?o(b.transform):k;"svg"!=e.type&&(e=e.parent());)h.push(i(e));for(c=h.length;c--;)j.add(h[c]);return{string:l,globalMatrix:f,totalMatrix:j,localMatrix:g,diffMatrix:f.clone().add(g.invert()),global:f.toTransformString(),total:j.toTransformString(),local:k,toString:v}}return a instanceof d.Matrix?(this.matrix=a,this._.transform=a.toTransformString()):i(this,a),this.node&&("linearGradient"==this.type||"radialGradient"==this.type?q(this.node,{gradientTransform:this.matrix}):"pattern"==this.type?q(this.node,{patternTransform:this.matrix}):q(this.node,{transform:this.matrix})),this},m.parent=function(){return u(this.node.parentNode)},m.append=m.add=function(a){if(a){if("set"==a.type){var b=this;return a.forEach(function(a){b.add(a)}),this}a=u(a),this.node.appendChild(a.node),a.paper=this.paper}return this},m.appendTo=function(a){return a&&(a=u(a),a.append(this)),this},m.prepend=function(a){if(a){if("set"==a.type){var b,c=this;return a.forEach(function(a){b?b.after(a):c.prepend(a),b=a}),this}a=u(a);var d=a.parent();this.node.insertBefore(a.node,this.node.firstChild),this.add&&this.add(),a.paper=this.paper,this.parent()&&this.parent().add(),d&&d.add()}return this},m.prependTo=function(a){return a=u(a),a.prepend(this),this},m.before=function(a){if("set"==a.type){var b=this;return a.forEach(function(a){var c=a.parent();b.node.parentNode.insertBefore(a.node,b.node),c&&c.add()}),this.parent().add(),this}a=u(a);var c=a.parent();return this.node.parentNode.insertBefore(a.node,this.node),this.parent()&&this.parent().add(),c&&c.add(),a.paper=this.paper,this},m.after=function(a){a=u(a);var b=a.parent();return this.node.nextSibling?this.node.parentNode.insertBefore(a.node,this.node.nextSibling):this.node.parentNode.appendChild(a.node),this.parent()&&this.parent().add(),b&&b.add(),a.paper=this.paper,this},m.insertBefore=function(a){a=u(a);var b=this.parent();return a.node.parentNode.insertBefore(this.node,a.node),this.paper=a.paper,b&&b.add(),a.parent()&&a.parent().add(),this},m.insertAfter=function(a){a=u(a);var b=this.parent();return a.node.parentNode.insertBefore(this.node,a.node.nextSibling),this.paper=a.paper,b&&b.add(),a.parent()&&a.parent().add(),this},m.remove=function(){var a=this.parent();return this.node.parentNode&&this.node.parentNode.removeChild(this.node),delete this.paper,this.removed=!0,a&&a.add(),this},m.select=function(a){return u(this.node.querySelector(a))},m.selectAll=function(a){for(var b=this.node.querySelectorAll(a),c=(d.set||Array)(),e=0;eb;b++)a[b].stop();return this},m.animate=function(a,d,e,f){"function"!=typeof e||e.length||(f=e,e=c.linear),a instanceof w&&(f=a.callback,e=a.easing,d=a.dur,a=a.attr);var g,h,i,j,l=[],m=[],p={},q=this;for(var r in a)if(a[t](r)){q.equal?(j=q.equal(r,o(a[r])),g=j.from,h=j.to,i=j.f):(g=+q.attr(r),h=+a[r]);var s=n(g,"array")?g.length:1;p[r]=k(l.length,l.length+s,i),l=l.concat(g),m=m.concat(h)}var u=c.time(),v=c(l,m,u,u+d,c.time,function(a){var b={};for(var c in p)p[t](c)&&(b[c]=p[c](a));q.attr(b)},e);return q.anims[v.id]=v,v._attrs=a,v._callback=f,b("snap.animcreated."+q.id,v),b.once("mina.finish."+v.id,function(){delete q.anims[v.id],f&&f.call(q)}),b.once("mina.stop."+v.id,function(){delete q.anims[v.id]}),q};var x={};m.data=function(a,c){var e=x[this.id]=x[this.id]||{};if(0==arguments.length)return b("snap.data.get."+this.id,this,e,null),e; +if(1==arguments.length){if(d.is(a,"object")){for(var f in a)a[t](f)&&this.data(f,a[f]);return this}return b("snap.data.get."+this.id,this,e[a],a),e[a]}return e[a]=c,b("snap.data.set."+this.id,this,c,a),this},m.removeData=function(a){return null==a?x[this.id]={}:x[this.id]&&delete x[this.id][a],this},m.outerSVG=m.toString=l(1),m.innerSVG=l(),m.toDataURL=function(){if(a&&a.btoa){var b=this.getBBox(),c=d.format('{contents}',{x:+b.x.toFixed(3),y:+b.y.toFixed(3),width:+b.width.toFixed(3),height:+b.height.toFixed(3),contents:this.outerSVG()});return"data:image/svg+xml;base64,"+btoa(unescape(encodeURIComponent(c)))}},h.prototype.select=m.select,h.prototype.selectAll=m.selectAll}),d.plugin(function(a){function b(a,b,d,e,f,g){return null==b&&"[object SVGMatrix]"==c.call(a)?(this.a=a.a,this.b=a.b,this.c=a.c,this.d=a.d,this.e=a.e,void(this.f=a.f)):void(null!=a?(this.a=+a,this.b=+b,this.c=+d,this.d=+e,this.e=+f,this.f=+g):(this.a=1,this.b=0,this.c=0,this.d=1,this.e=0,this.f=0))}var c=Object.prototype.toString,d=String,e=Math,f="";!function(c){function g(a){return a[0]*a[0]+a[1]*a[1]}function h(a){var b=e.sqrt(g(a));a[0]&&(a[0]/=b),a[1]&&(a[1]/=b)}c.add=function(a,c,d,e,f,g){var h,i,j,k,l=[[],[],[]],m=[[this.a,this.c,this.e],[this.b,this.d,this.f],[0,0,1]],n=[[a,d,f],[c,e,g],[0,0,1]];for(a&&a instanceof b&&(n=[[a.a,a.c,a.e],[a.b,a.d,a.f],[0,0,1]]),h=0;3>h;h++)for(i=0;3>i;i++){for(k=0,j=0;3>j;j++)k+=m[h][j]*n[j][i];l[h][i]=k}return this.a=l[0][0],this.b=l[1][0],this.c=l[0][1],this.d=l[1][1],this.e=l[0][2],this.f=l[1][2],this},c.invert=function(){var a=this,c=a.a*a.d-a.b*a.c;return new b(a.d/c,-a.b/c,-a.c/c,a.a/c,(a.c*a.f-a.d*a.e)/c,(a.b*a.e-a.a*a.f)/c)},c.clone=function(){return new b(this.a,this.b,this.c,this.d,this.e,this.f)},c.translate=function(a,b){return this.add(1,0,0,1,a,b)},c.scale=function(a,b,c,d){return null==b&&(b=a),(c||d)&&this.add(1,0,0,1,c,d),this.add(a,0,0,b,0,0),(c||d)&&this.add(1,0,0,1,-c,-d),this},c.rotate=function(b,c,d){b=a.rad(b),c=c||0,d=d||0;var f=+e.cos(b).toFixed(9),g=+e.sin(b).toFixed(9);return this.add(f,g,-g,f,c,d),this.add(1,0,0,1,-c,-d)},c.x=function(a,b){return a*this.a+b*this.c+this.e},c.y=function(a,b){return a*this.b+b*this.d+this.f},c.get=function(a){return+this[d.fromCharCode(97+a)].toFixed(4)},c.toString=function(){return"matrix("+[this.get(0),this.get(1),this.get(2),this.get(3),this.get(4),this.get(5)].join()+")"},c.offset=function(){return[this.e.toFixed(4),this.f.toFixed(4)]},c.determinant=function(){return this.a*this.d-this.b*this.c},c.split=function(){var b={};b.dx=this.e,b.dy=this.f;var c=[[this.a,this.c],[this.b,this.d]];b.scalex=e.sqrt(g(c[0])),h(c[0]),b.shear=c[0][0]*c[1][0]+c[0][1]*c[1][1],c[1]=[c[1][0]-c[0][0]*b.shear,c[1][1]-c[0][1]*b.shear],b.scaley=e.sqrt(g(c[1])),h(c[1]),b.shear/=b.scaley,this.determinant()<0&&(b.scalex=-b.scalex);var d=-c[0][1],f=c[1][1];return 0>f?(b.rotate=a.deg(e.acos(f)),0>d&&(b.rotate=360-b.rotate)):b.rotate=a.deg(e.asin(d)),b.isSimple=!(+b.shear.toFixed(9)||b.scalex.toFixed(9)!=b.scaley.toFixed(9)&&b.rotate),b.isSuperSimple=!+b.shear.toFixed(9)&&b.scalex.toFixed(9)==b.scaley.toFixed(9)&&!b.rotate,b.noRotation=!+b.shear.toFixed(9)&&!b.rotate,b},c.toTransformString=function(a){var b=a||this.split();return+b.shear.toFixed(9)?"m"+[this.get(0),this.get(1),this.get(2),this.get(3),this.get(4),this.get(5)]:(b.scalex=+b.scalex.toFixed(4),b.scaley=+b.scaley.toFixed(4),b.rotate=+b.rotate.toFixed(4),(b.dx||b.dy?"t"+[+b.dx.toFixed(4),+b.dy.toFixed(4)]:f)+(1!=b.scalex||1!=b.scaley?"s"+[b.scalex,b.scaley,0,0]:f)+(b.rotate?"r"+[+b.rotate.toFixed(4),0,0]:f))}}(b.prototype),a.Matrix=b,a.matrix=function(a,c,d,e,f,g){return new b(a,c,d,e,f,g)}}),d.plugin(function(a,c,d,e,f){function g(d){return function(e){if(b.stop(),e instanceof f&&1==e.node.childNodes.length&&("radialGradient"==e.node.firstChild.tagName||"linearGradient"==e.node.firstChild.tagName||"pattern"==e.node.firstChild.tagName)&&(e=e.node.firstChild,n(this).appendChild(e),e=l(e)),e instanceof c)if("radialGradient"==e.type||"linearGradient"==e.type||"pattern"==e.type){e.node.id||p(e.node,{id:e.id});var g=q(e.node.id)}else g=e.attr(d);else if(g=a.color(e),g.error){var h=a(n(this).ownerSVGElement).gradient(e);h?(h.node.id||p(h.node,{id:h.id}),g=q(h.node.id)):g=e}else g=r(g);var i={};i[d]=g,p(this.node,i),this.node.style[d]=t}}function h(a){b.stop(),a==+a&&(a+="px"),this.node.style.fontSize=a}function i(a){for(var b=[],c=a.childNodes,d=0,e=c.length;e>d;d++){var f=c[d];3==f.nodeType&&b.push(f.nodeValue),"tspan"==f.tagName&&b.push(1==f.childNodes.length&&3==f.firstChild.nodeType?f.firstChild.nodeValue:i(f))}return b}function j(){return b.stop(),this.node.style.fontSize}var k=a._.make,l=a._.wrap,m=a.is,n=a._.getSomeDefs,o=/^url\(#?([^)]+)\)$/,p=a._.$,q=a.url,r=String,s=a._.separator,t="";b.on("snap.util.attr.mask",function(a){if(a instanceof c||a instanceof f){if(b.stop(),a instanceof f&&1==a.node.childNodes.length&&(a=a.node.firstChild,n(this).appendChild(a),a=l(a)),"mask"==a.type)var d=a;else d=k("mask",n(this)),d.node.appendChild(a.node);!d.node.id&&p(d.node,{id:d.id}),p(this.node,{mask:q(d.id)})}}),function(a){b.on("snap.util.attr.clip",a),b.on("snap.util.attr.clip-path",a),b.on("snap.util.attr.clipPath",a)}(function(a){if(a instanceof c||a instanceof f){if(b.stop(),"clipPath"==a.type)var d=a;else d=k("clipPath",n(this)),d.node.appendChild(a.node),!d.node.id&&p(d.node,{id:d.id});p(this.node,{"clip-path":q(d.node.id||d.id)})}}),b.on("snap.util.attr.fill",g("fill")),b.on("snap.util.attr.stroke",g("stroke"));var u=/^([lr])(?:\(([^)]*)\))?(.*)$/i;b.on("snap.util.grad.parse",function(a){a=r(a);var b=a.match(u);if(!b)return null;var c=b[1],d=b[2],e=b[3];return d=d.split(/\s*,\s*/).map(function(a){return+a==a?+a:a}),1==d.length&&0==d[0]&&(d=[]),e=e.split("-"),e=e.map(function(a){a=a.split(":");var b={color:a[0]};return a[1]&&(b.offset=parseFloat(a[1])),b}),{type:c,params:d,stops:e}}),b.on("snap.util.attr.d",function(c){b.stop(),m(c,"array")&&m(c[0],"array")&&(c=a.path.toString.call(c)),c=r(c),c.match(/[ruo]/i)&&(c=a.path.toAbsolute(c)),p(this.node,{d:c})})(-1),b.on("snap.util.attr.#text",function(a){b.stop(),a=r(a);for(var c=e.doc.createTextNode(a);this.node.firstChild;)this.node.removeChild(this.node.firstChild);this.node.appendChild(c)})(-1),b.on("snap.util.attr.path",function(a){b.stop(),this.attr({d:a})})(-1),b.on("snap.util.attr.class",function(a){b.stop(),this.node.className.baseVal=a})(-1),b.on("snap.util.attr.viewBox",function(a){var c;c=m(a,"object")&&"x"in a?[a.x,a.y,a.width,a.height].join(" "):m(a,"array")?a.join(" "):a,p(this.node,{viewBox:c}),b.stop()})(-1),b.on("snap.util.attr.transform",function(a){this.transform(a),b.stop()})(-1),b.on("snap.util.attr.r",function(a){"rect"==this.type&&(b.stop(),p(this.node,{rx:a,ry:a}))})(-1),b.on("snap.util.attr.textpath",function(a){if(b.stop(),"text"==this.type){var d,e,f;if(!a&&this.textPath){for(e=this.textPath;e.node.firstChild;)this.node.appendChild(e.node.firstChild);return e.remove(),void delete this.textPath}if(m(a,"string")){var g=n(this),h=l(g.parentNode).path(a);g.appendChild(h.node),d=h.id,h.attr({id:d})}else a=l(a),a instanceof c&&(d=a.attr("id"),d||(d=a.id,a.attr({id:d})));if(d)if(e=this.textPath,f=this.node,e)e.attr({"xlink:href":"#"+d});else{for(e=p("textPath",{"xlink:href":"#"+d});f.firstChild;)e.appendChild(f.firstChild);f.appendChild(e),this.textPath=l(e)}}})(-1),b.on("snap.util.attr.text",function(a){if("text"==this.type){for(var c=this.node,d=function(a){var b=p("tspan");if(m(a,"array"))for(var c=0;c1&&(a=Array.prototype.slice.call(arguments,0));var b={};return h(a,"object")&&!h(a,"array")?b=a:null!=a&&(b={points:a}),this.el("polyline",b)},g.polygon=function(a){arguments.length>1&&(a=Array.prototype.slice.call(arguments,0));var b={};return h(a,"object")&&!h(a,"array")?b=a:null!=a&&(b={points:a}),this.el("polygon",b)},function(){function d(){return this.selectAll("stop")}function e(a,b){var d=k("stop"),e={offset:+b+"%"};return a=c.color(a),e["stop-color"]=a.hex,a.opacity<1&&(e["stop-opacity"]=a.opacity),k(d,e),this.node.appendChild(d),this}function f(){if("linearGradient"==this.type){var a=k(this.node,"x1")||0,b=k(this.node,"x2")||1,d=k(this.node,"y1")||0,e=k(this.node,"y2")||0;return c._.box(a,d,math.abs(b-a),math.abs(e-d))}var f=this.node.cx||.5,g=this.node.cy||.5,h=this.node.r||0;return c._.box(f-h,g-h,2*h,2*h)}function h(a,c){function d(a,b){for(var c=(b-l)/(a-m),d=m;a>d;d++)g[d].offset=+(+l+c*(d-m)).toFixed(2);m=a,l=b}var e,f=b("snap.util.grad.parse",null,c).firstDefined();if(!f)return null;f.params.unshift(a),e="l"==f.type.toLowerCase()?i.apply(0,f.params):j.apply(0,f.params),f.type!=f.type.toLowerCase()&&k(e.node,{gradientUnits:"userSpaceOnUse"});var g=f.stops,h=g.length,l=0,m=0;h--;for(var n=0;h>n;n++)"offset"in g[n]&&d(n,g[n].offset);for(g[h].offset=g[h].offset||100,d(h,g[h].offset),n=0;h>=n;n++){var o=g[n];e.addStop(o.color,o.offset)}return e}function i(a,b,g,h,i){var j=c._.make("linearGradient",a);return j.stops=d,j.addStop=e,j.getBBox=f,null!=b&&k(j.node,{x1:b,y1:g,x2:h,y2:i}),j}function j(a,b,g,h,i,j){var l=c._.make("radialGradient",a);return l.stops=d,l.addStop=e,l.getBBox=f,null!=b&&k(l.node,{cx:b,cy:g,r:h}),null!=i&&null!=j&&k(l.node,{fx:i,fy:j}),l}var k=c._.$;g.gradient=function(a){return h(this.defs,a)},g.gradientLinear=function(a,b,c,d){return i(this.defs,a,b,c,d)},g.gradientRadial=function(a,b,c,d,e){return j(this.defs,a,b,c,d,e)},g.toString=function(){var a,b=this.node.ownerDocument,d=b.createDocumentFragment(),e=b.createElement("div"),f=this.node.cloneNode(!0);return d.appendChild(e),e.appendChild(f),c._.$(f,{xmlns:"http://www.w3.org/2000/svg"}),a=e.innerHTML,d.removeChild(d.firstChild),a},g.toDataURL=function(){return a&&a.btoa?"data:image/svg+xml;base64,"+btoa(unescape(encodeURIComponent(this))):void 0},g.clear=function(){for(var a,b=this.node.firstChild;b;)a=b.nextSibling,"defs"!=b.tagName?b.parentNode.removeChild(b):g.clear.call({node:b}),b=a}}()}),d.plugin(function(a,b){function c(a){var b=c.ps=c.ps||{};return b[a]?b[a].sleep=100:b[a]={sleep:100},setTimeout(function(){for(var c in b)b[K](c)&&c!=a&&(b[c].sleep--,!b[c].sleep&&delete b[c])}),b[a]}function d(a,b,c,d){return null==a&&(a=b=c=d=0),null==b&&(b=a.y,c=a.width,d=a.height,a=a.x),{x:a,y:b,width:c,w:c,height:d,h:d,x2:a+c,y2:b+d,cx:a+c/2,cy:b+d/2,r1:N.min(c,d)/2,r2:N.max(c,d)/2,r0:N.sqrt(c*c+d*d)/2,path:w(a,b,c,d),vb:[a,b,c,d].join(" ")}}function e(){return this.join(",").replace(L,"$1")}function f(a){var b=J(a);return b.toString=e,b}function g(a,b,c,d,e,f,g,h,j){return null==j?n(a,b,c,d,e,f,g,h):i(a,b,c,d,e,f,g,h,o(a,b,c,d,e,f,g,h,j))}function h(c,d){function e(a){return+(+a).toFixed(3)}return a._.cacher(function(a,f,h){a instanceof b&&(a=a.attr("d")),a=E(a);for(var j,k,l,m,n,o="",p={},q=0,r=0,s=a.length;s>r;r++){if(l=a[r],"M"==l[0])j=+l[1],k=+l[2];else{if(m=g(j,k,l[1],l[2],l[3],l[4],l[5],l[6]),q+m>f){if(d&&!p.start){if(n=g(j,k,l[1],l[2],l[3],l[4],l[5],l[6],f-q),o+=["C"+e(n.start.x),e(n.start.y),e(n.m.x),e(n.m.y),e(n.x),e(n.y)],h)return o;p.start=o,o=["M"+e(n.x),e(n.y)+"C"+e(n.n.x),e(n.n.y),e(n.end.x),e(n.end.y),e(l[5]),e(l[6])].join(),q+=m,j=+l[5],k=+l[6];continue}if(!c&&!d)return n=g(j,k,l[1],l[2],l[3],l[4],l[5],l[6],f-q)}q+=m,j=+l[5],k=+l[6]}o+=l.shift()+l}return p.end=o,n=c?q:d?p:i(j,k,l[0],l[1],l[2],l[3],l[4],l[5],1)},null,a._.clone)}function i(a,b,c,d,e,f,g,h,i){var j=1-i,k=R(j,3),l=R(j,2),m=i*i,n=m*i,o=k*a+3*l*i*c+3*j*i*i*e+n*g,p=k*b+3*l*i*d+3*j*i*i*f+n*h,q=a+2*i*(c-a)+m*(e-2*c+a),r=b+2*i*(d-b)+m*(f-2*d+b),s=c+2*i*(e-c)+m*(g-2*e+c),t=d+2*i*(f-d)+m*(h-2*f+d),u=j*a+i*c,v=j*b+i*d,w=j*e+i*g,x=j*f+i*h,y=90-180*N.atan2(q-s,r-t)/O;return{x:o,y:p,m:{x:q,y:r},n:{x:s,y:t},start:{x:u,y:v},end:{x:w,y:x},alpha:y}}function j(b,c,e,f,g,h,i,j){a.is(b,"array")||(b=[b,c,e,f,g,h,i,j]);var k=D.apply(null,b);return d(k.min.x,k.min.y,k.max.x-k.min.x,k.max.y-k.min.y)}function k(a,b,c){return b>=a.x&&b<=a.x+a.width&&c>=a.y&&c<=a.y+a.height}function l(a,b){return a=d(a),b=d(b),k(b,a.x,a.y)||k(b,a.x2,a.y)||k(b,a.x,a.y2)||k(b,a.x2,a.y2)||k(a,b.x,b.y)||k(a,b.x2,b.y)||k(a,b.x,b.y2)||k(a,b.x2,b.y2)||(a.xb.x||b.xa.x)&&(a.yb.y||b.ya.y)}function m(a,b,c,d,e){var f=-3*b+9*c-9*d+3*e,g=a*f+6*b-12*c+6*d;return a*g-3*b+3*c}function n(a,b,c,d,e,f,g,h,i){null==i&&(i=1),i=i>1?1:0>i?0:i;for(var j=i/2,k=12,l=[-.1252,.1252,-.3678,.3678,-.5873,.5873,-.7699,.7699,-.9041,.9041,-.9816,.9816],n=[.2491,.2491,.2335,.2335,.2032,.2032,.1601,.1601,.1069,.1069,.0472,.0472],o=0,p=0;k>p;p++){var q=j*l[p]+j,r=m(q,a,c,e,g),s=m(q,b,d,f,h),t=r*r+s*s;o+=n[p]*N.sqrt(t)}return j*o}function o(a,b,c,d,e,f,g,h,i){if(!(0>i||n(a,b,c,d,e,f,g,h)o;)l/=2,m+=(i>j?1:-1)*l,j=n(a,b,c,d,e,f,g,h,m);return m}}function p(a,b,c,d,e,f,g,h){if(!(Q(a,c)Q(e,g)||Q(b,d)Q(f,h))){var i=(a*d-b*c)*(e-g)-(a-c)*(e*h-f*g),j=(a*d-b*c)*(f-h)-(b-d)*(e*h-f*g),k=(a-c)*(f-h)-(b-d)*(e-g);if(k){var l=i/k,m=j/k,n=+l.toFixed(2),o=+m.toFixed(2);if(!(n<+P(a,c).toFixed(2)||n>+Q(a,c).toFixed(2)||n<+P(e,g).toFixed(2)||n>+Q(e,g).toFixed(2)||o<+P(b,d).toFixed(2)||o>+Q(b,d).toFixed(2)||o<+P(f,h).toFixed(2)||o>+Q(f,h).toFixed(2)))return{x:l,y:m}}}}function q(a,b,c){var d=j(a),e=j(b);if(!l(d,e))return c?0:[];for(var f=n.apply(0,a),g=n.apply(0,b),h=~~(f/8),k=~~(g/8),m=[],o=[],q={},r=c?0:[],s=0;h+1>s;s++){var t=i.apply(0,a.concat(s/h));m.push({x:t.x,y:t.y,t:s/h})}for(s=0;k+1>s;s++)t=i.apply(0,b.concat(s/k)),o.push({x:t.x,y:t.y,t:s/k});for(s=0;h>s;s++)for(var u=0;k>u;u++){var v=m[s],w=m[s+1],x=o[u],y=o[u+1],z=S(w.x-v.x)<.001?"y":"x",A=S(y.x-x.x)<.001?"y":"x",B=p(v.x,v.y,w.x,w.y,x.x,x.y,y.x,y.y);if(B){if(q[B.x.toFixed(4)]==B.y.toFixed(4))continue;q[B.x.toFixed(4)]=B.y.toFixed(4);var C=v.t+S((B[z]-v[z])/(w[z]-v[z]))*(w.t-v.t),D=x.t+S((B[A]-x[A])/(y[A]-x[A]))*(y.t-x.t);C>=0&&1>=C&&D>=0&&1>=D&&(c?r++:r.push({x:B.x,y:B.y,t1:C,t2:D}))}}return r}function r(a,b){return t(a,b)}function s(a,b){return t(a,b,1)}function t(a,b,c){a=E(a),b=E(b);for(var d,e,f,g,h,i,j,k,l,m,n=c?0:[],o=0,p=a.length;p>o;o++){var r=a[o];if("M"==r[0])d=h=r[1],e=i=r[2];else{"C"==r[0]?(l=[d,e].concat(r.slice(1)),d=l[6],e=l[7]):(l=[d,e,d,e,h,i,h,i],d=h,e=i);for(var s=0,t=b.length;t>s;s++){var u=b[s];if("M"==u[0])f=j=u[1],g=k=u[2];else{"C"==u[0]?(m=[f,g].concat(u.slice(1)),f=m[6],g=m[7]):(m=[f,g,f,g,j,k,j,k],f=j,g=k);var v=q(l,m,c);if(c)n+=v;else{for(var w=0,x=v.length;x>w;w++)v[w].segment1=o,v[w].segment2=s,v[w].bez1=l,v[w].bez2=m;n=n.concat(v)}}}}}return n}function u(a,b,c){var d=v(a);return k(d,b,c)&&t(a,[["M",b,c],["H",d.x2+10]],1)%2==1}function v(a){var b=c(a);if(b.bbox)return J(b.bbox);if(!a)return d();a=E(a);for(var e,f=0,g=0,h=[],i=[],j=0,k=a.length;k>j;j++)if(e=a[j],"M"==e[0])f=e[1],g=e[2],h.push(f),i.push(g);else{var l=D(f,g,e[1],e[2],e[3],e[4],e[5],e[6]);h=h.concat(l.min.x,l.max.x),i=i.concat(l.min.y,l.max.y),f=e[5],g=e[6]}var m=P.apply(0,h),n=P.apply(0,i),o=Q.apply(0,h),p=Q.apply(0,i),q=d(m,n,o-m,p-n);return b.bbox=J(q),q}function w(a,b,c,d,f){if(f)return[["M",+a+ +f,b],["l",c-2*f,0],["a",f,f,0,0,1,f,f],["l",0,d-2*f],["a",f,f,0,0,1,-f,f],["l",2*f-c,0],["a",f,f,0,0,1,-f,-f],["l",0,2*f-d],["a",f,f,0,0,1,f,-f],["z"]];var g=[["M",a,b],["l",c,0],["l",0,d],["l",-c,0],["z"]];return g.toString=e,g}function x(a,b,c,d,f){if(null==f&&null==d&&(d=c),a=+a,b=+b,c=+c,d=+d,null!=f)var g=Math.PI/180,h=a+c*Math.cos(-d*g),i=a+c*Math.cos(-f*g),j=b+c*Math.sin(-d*g),k=b+c*Math.sin(-f*g),l=[["M",h,j],["A",c,c,0,+(f-d>180),0,i,k]];else l=[["M",a,b],["m",0,-d],["a",c,d,0,1,1,0,2*d],["a",c,d,0,1,1,0,-2*d],["z"]];return l.toString=e,l}function y(b){var d=c(b),g=String.prototype.toLowerCase;if(d.rel)return f(d.rel);a.is(b,"array")&&a.is(b&&b[0],"array")||(b=a.parsePathString(b));var h=[],i=0,j=0,k=0,l=0,m=0;"M"==b[0][0]&&(i=b[0][1],j=b[0][2],k=i,l=j,m++,h.push(["M",i,j]));for(var n=m,o=b.length;o>n;n++){var p=h[n]=[],q=b[n];if(q[0]!=g.call(q[0]))switch(p[0]=g.call(q[0]),p[0]){case"a":p[1]=q[1],p[2]=q[2],p[3]=q[3],p[4]=q[4],p[5]=q[5],p[6]=+(q[6]-i).toFixed(3),p[7]=+(q[7]-j).toFixed(3);break;case"v":p[1]=+(q[1]-j).toFixed(3);break;case"m":k=q[1],l=q[2];default:for(var r=1,s=q.length;s>r;r++)p[r]=+(q[r]-(r%2?i:j)).toFixed(3)}else{p=h[n]=[],"m"==q[0]&&(k=q[1]+i,l=q[2]+j);for(var t=0,u=q.length;u>t;t++)h[n][t]=q[t]}var v=h[n].length;switch(h[n][0]){case"z":i=k,j=l;break;case"h":i+=+h[n][v-1];break;case"v":j+=+h[n][v-1];break;default:i+=+h[n][v-2],j+=+h[n][v-1]}}return h.toString=e,d.rel=f(h),h}function z(b){var d=c(b);if(d.abs)return f(d.abs);if(I(b,"array")&&I(b&&b[0],"array")||(b=a.parsePathString(b)),!b||!b.length)return[["M",0,0]];var g,h=[],i=0,j=0,k=0,l=0,m=0;"M"==b[0][0]&&(i=+b[0][1],j=+b[0][2],k=i,l=j,m++,h[0]=["M",i,j]);for(var n,o,p=3==b.length&&"M"==b[0][0]&&"R"==b[1][0].toUpperCase()&&"Z"==b[2][0].toUpperCase(),q=m,r=b.length;r>q;q++){if(h.push(n=[]),o=b[q],g=o[0],g!=g.toUpperCase())switch(n[0]=g.toUpperCase(),n[0]){case"A":n[1]=o[1],n[2]=o[2],n[3]=o[3],n[4]=o[4],n[5]=o[5],n[6]=+o[6]+i,n[7]=+o[7]+j;break;case"V":n[1]=+o[1]+j;break;case"H":n[1]=+o[1]+i;break;case"R":for(var s=[i,j].concat(o.slice(1)),t=2,u=s.length;u>t;t++)s[t]=+s[t]+i,s[++t]=+s[t]+j;h.pop(),h=h.concat(G(s,p));break;case"O":h.pop(),s=x(i,j,o[1],o[2]),s.push(s[0]),h=h.concat(s);break;case"U":h.pop(),h=h.concat(x(i,j,o[1],o[2],o[3])),n=["U"].concat(h[h.length-1].slice(-2));break;case"M":k=+o[1]+i,l=+o[2]+j;default:for(t=1,u=o.length;u>t;t++)n[t]=+o[t]+(t%2?i:j)}else if("R"==g)s=[i,j].concat(o.slice(1)),h.pop(),h=h.concat(G(s,p)),n=["R"].concat(o.slice(-2));else if("O"==g)h.pop(),s=x(i,j,o[1],o[2]),s.push(s[0]),h=h.concat(s);else if("U"==g)h.pop(),h=h.concat(x(i,j,o[1],o[2],o[3])),n=["U"].concat(h[h.length-1].slice(-2));else for(var v=0,w=o.length;w>v;v++)n[v]=o[v];if(g=g.toUpperCase(),"O"!=g)switch(n[0]){case"Z":i=+k,j=+l;break;case"H":i=n[1];break;case"V":j=n[1];break;case"M":k=n[n.length-2],l=n[n.length-1];default:i=n[n.length-2],j=n[n.length-1]}}return h.toString=e,d.abs=f(h),h}function A(a,b,c,d){return[a,b,c,d,c,d]}function B(a,b,c,d,e,f){var g=1/3,h=2/3;return[g*a+h*c,g*b+h*d,g*e+h*c,g*f+h*d,e,f]}function C(b,c,d,e,f,g,h,i,j,k){var l,m=120*O/180,n=O/180*(+f||0),o=[],p=a._.cacher(function(a,b,c){var d=a*N.cos(c)-b*N.sin(c),e=a*N.sin(c)+b*N.cos(c);return{x:d,y:e}});if(k)y=k[0],z=k[1],w=k[2],x=k[3];else{l=p(b,c,-n),b=l.x,c=l.y,l=p(i,j,-n),i=l.x,j=l.y;var q=(N.cos(O/180*f),N.sin(O/180*f),(b-i)/2),r=(c-j)/2,s=q*q/(d*d)+r*r/(e*e);s>1&&(s=N.sqrt(s),d=s*d,e=s*e);var t=d*d,u=e*e,v=(g==h?-1:1)*N.sqrt(S((t*u-t*r*r-u*q*q)/(t*r*r+u*q*q))),w=v*d*r/e+(b+i)/2,x=v*-e*q/d+(c+j)/2,y=N.asin(((c-x)/e).toFixed(9)),z=N.asin(((j-x)/e).toFixed(9));y=w>b?O-y:y,z=w>i?O-z:z,0>y&&(y=2*O+y),0>z&&(z=2*O+z),h&&y>z&&(y-=2*O),!h&&z>y&&(z-=2*O)}var A=z-y;if(S(A)>m){var B=z,D=i,E=j;z=y+m*(h&&z>y?1:-1),i=w+d*N.cos(z),j=x+e*N.sin(z),o=C(i,j,d,e,f,0,h,D,E,[z,B,w,x])}A=z-y;var F=N.cos(y),G=N.sin(y),H=N.cos(z),I=N.sin(z),J=N.tan(A/4),K=4/3*d*J,L=4/3*e*J,M=[b,c],P=[b+K*G,c-L*F],Q=[i+K*I,j-L*H],R=[i,j];if(P[0]=2*M[0]-P[0],P[1]=2*M[1]-P[1],k)return[P,Q,R].concat(o);o=[P,Q,R].concat(o).join().split(",");for(var T=[],U=0,V=o.length;V>U;U++)T[U]=U%2?p(o[U-1],o[U],n).y:p(o[U],o[U+1],n).x;return T}function D(a,b,c,d,e,f,g,h){for(var i,j,k,l,m,n,o,p,q=[],r=[[],[]],s=0;2>s;++s)if(0==s?(j=6*a-12*c+6*e,i=-3*a+9*c-9*e+3*g,k=3*c-3*a):(j=6*b-12*d+6*f,i=-3*b+9*d-9*f+3*h,k=3*d-3*b),S(i)<1e-12){if(S(j)<1e-12)continue;l=-k/j,l>0&&1>l&&q.push(l)}else o=j*j-4*k*i,p=N.sqrt(o),0>o||(m=(-j+p)/(2*i),m>0&&1>m&&q.push(m),n=(-j-p)/(2*i),n>0&&1>n&&q.push(n));for(var t,u=q.length,v=u;u--;)l=q[u],t=1-l,r[0][u]=t*t*t*a+3*t*t*l*c+3*t*l*l*e+l*l*l*g,r[1][u]=t*t*t*b+3*t*t*l*d+3*t*l*l*f+l*l*l*h;return r[0][v]=a,r[1][v]=b,r[0][v+1]=g,r[1][v+1]=h,r[0].length=r[1].length=v+2,{min:{x:P.apply(0,r[0]),y:P.apply(0,r[1])},max:{x:Q.apply(0,r[0]),y:Q.apply(0,r[1])}}}function E(a,b){var d=!b&&c(a);if(!b&&d.curve)return f(d.curve);for(var e=z(a),g=b&&z(b),h={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},j=(function(a,b,c){var d,e;if(!a)return["C",b.x,b.y,b.x,b.y,b.x,b.y];switch(!(a[0]in{T:1,Q:1})&&(b.qx=b.qy=null),a[0]){case"M":b.X=a[1],b.Y=a[2];break;case"A":a=["C"].concat(C.apply(0,[b.x,b.y].concat(a.slice(1))));break;case"S":"C"==c||"S"==c?(d=2*b.x-b.bx,e=2*b.y-b.by):(d=b.x,e=b.y),a=["C",d,e].concat(a.slice(1));break;case"T":"Q"==c||"T"==c?(b.qx=2*b.x-b.qx,b.qy=2*b.y-b.qy):(b.qx=b.x,b.qy=b.y),a=["C"].concat(B(b.x,b.y,b.qx,b.qy,a[1],a[2]));break;case"Q":b.qx=a[1],b.qy=a[2],a=["C"].concat(B(b.x,b.y,a[1],a[2],a[3],a[4]));break;case"L":a=["C"].concat(A(b.x,b.y,a[1],a[2]));break;case"H":a=["C"].concat(A(b.x,b.y,a[1],b.y));break;case"V":a=["C"].concat(A(b.x,b.y,b.x,a[1]));break;case"Z":a=["C"].concat(A(b.x,b.y,b.X,b.Y))}return a}),k=function(a,b){if(a[b].length>7){a[b].shift();for(var c=a[b];c.length;)m[b]="A",g&&(n[b]="A"),a.splice(b++,0,["C"].concat(c.splice(0,6)));a.splice(b,1),r=Q(e.length,g&&g.length||0)}},l=function(a,b,c,d,f){a&&b&&"M"==a[f][0]&&"M"!=b[f][0]&&(b.splice(f,0,["M",d.x,d.y]),c.bx=0,c.by=0,c.x=a[f][1],c.y=a[f][2],r=Q(e.length,g&&g.length||0))},m=[],n=[],o="",p="",q=0,r=Q(e.length,g&&g.length||0);r>q;q++){e[q]&&(o=e[q][0]),"C"!=o&&(m[q]=o,q&&(p=m[q-1])),e[q]=j(e[q],h,p),"A"!=m[q]&&"C"==o&&(m[q]="C"),k(e,q),g&&(g[q]&&(o=g[q][0]),"C"!=o&&(n[q]=o,q&&(p=n[q-1])),g[q]=j(g[q],i,p),"A"!=n[q]&&"C"==o&&(n[q]="C"),k(g,q)),l(e,g,h,i,q),l(g,e,i,h,q);var s=e[q],t=g&&g[q],u=s.length,v=g&&t.length;h.x=s[u-2],h.y=s[u-1],h.bx=M(s[u-4])||h.x,h.by=M(s[u-3])||h.y,i.bx=g&&(M(t[v-4])||i.x),i.by=g&&(M(t[v-3])||i.y),i.x=g&&t[v-2],i.y=g&&t[v-1]}return g||(d.curve=f(e)),g?[e,g]:e}function F(a,b){if(!b)return a;var c,d,e,f,g,h,i;for(a=E(a),e=0,g=a.length;g>e;e++)for(i=a[e],f=1,h=i.length;h>f;f+=2)c=b.x(i[f],i[f+1]),d=b.y(i[f],i[f+1]),i[f]=c,i[f+1]=d;return a}function G(a,b){for(var c=[],d=0,e=a.length;e-2*!b>d;d+=2){var f=[{x:+a[d-2],y:+a[d-1]},{x:+a[d],y:+a[d+1]},{x:+a[d+2],y:+a[d+3]},{x:+a[d+4],y:+a[d+5]}];b?d?e-4==d?f[3]={x:+a[0],y:+a[1]}:e-2==d&&(f[2]={x:+a[0],y:+a[1]},f[3]={x:+a[2],y:+a[3]}):f[0]={x:+a[e-2],y:+a[e-1]}:e-4==d?f[3]=f[2]:d||(f[0]={x:+a[d],y:+a[d+1]}),c.push(["C",(-f[0].x+6*f[1].x+f[2].x)/6,(-f[0].y+6*f[1].y+f[2].y)/6,(f[1].x+6*f[2].x-f[3].x)/6,(f[1].y+6*f[2].y-f[3].y)/6,f[2].x,f[2].y])}return c}var H=b.prototype,I=a.is,J=a._.clone,K="hasOwnProperty",L=/,?([a-z]),?/gi,M=parseFloat,N=Math,O=N.PI,P=N.min,Q=N.max,R=N.pow,S=N.abs,T=h(1),U=h(),V=h(0,1),W=a._unit2px,X={path:function(a){return a.attr("path")},circle:function(a){var b=W(a);return x(b.cx,b.cy,b.r)},ellipse:function(a){var b=W(a);return x(b.cx||0,b.cy||0,b.rx,b.ry)},rect:function(a){var b=W(a);return w(b.x||0,b.y||0,b.width,b.height,b.rx,b.ry)},image:function(a){var b=W(a);return w(b.x||0,b.y||0,b.width,b.height)},line:function(a){return"M"+[a.attr("x1")||0,a.attr("y1")||0,a.attr("x2"),a.attr("y2")]},polyline:function(a){return"M"+a.attr("points")},polygon:function(a){return"M"+a.attr("points")+"z"},deflt:function(a){var b=a.node.getBBox();return w(b.x,b.y,b.width,b.height)}};a.path=c,a.path.getTotalLength=T,a.path.getPointAtLength=U,a.path.getSubpath=function(a,b,c){if(this.getTotalLength(a)-c<1e-6)return V(a,b).end;var d=V(a,c,1);return b?V(d,b).end:d},H.getTotalLength=function(){return this.node.getTotalLength?this.node.getTotalLength():void 0},H.getPointAtLength=function(a){return U(this.attr("d"),a)},H.getSubpath=function(b,c){return a.path.getSubpath(this.attr("d"),b,c)},a._.box=d,a.path.findDotsAtSegment=i,a.path.bezierBBox=j,a.path.isPointInsideBBox=k,a.closest=function(b,c,e,f){for(var g=100,h=d(b-g/2,c-g/2,g,g),i=[],j=e[0].hasOwnProperty("x")?function(a){return{x:e[a].x,y:e[a].y}}:function(a){return{x:e[a],y:f[a]}},l=0;1e6>=g&&!l;){for(var m=0,n=e.length;n>m;m++){var o=j(m);if(k(h,o.x,o.y)){l++,i.push(o);break}}l||(g*=2,h=d(b-g/2,c-g/2,g,g))}if(1e6!=g){var p,q=1/0;for(m=0,n=i.length;n>m;m++){var r=a.len(b,c,i[m].x,i[m].y);q>r&&(q=r,i[m].len=r,p=i[m])}return p}},a.path.isBBoxIntersect=l,a.path.intersection=r,a.path.intersectionNumber=s,a.path.isPointInside=u,a.path.getBBox=v,a.path.get=X,a.path.toRelative=y,a.path.toAbsolute=z,a.path.toCubic=E,a.path.map=F,a.path.toString=e,a.path.clone=f}),d.plugin(function(a){var d=Math.max,e=Math.min,f=function(a){if(this.items=[],this.bindings={},this.length=0,this.type="set",a)for(var b=0,c=a.length;c>b;b++)a[b]&&(this[this.items.length]=this.items[this.items.length]=a[b],this.length++)},g=f.prototype;g.push=function(){for(var a,b,c=0,d=arguments.length;d>c;c++)a=arguments[c],a&&(b=this.items.length,this[b]=this.items[b]=a,this.length++);return this},g.pop=function(){return this.length&&delete this[this.length--],this.items.pop()},g.forEach=function(a,b){for(var c=0,d=this.items.length;d>c;c++)if(a.call(b,this.items[c],c)===!1)return this;return this},g.animate=function(d,e,f,g){"function"!=typeof f||f.length||(g=f,f=c.linear),d instanceof a._.Animation&&(g=d.callback,f=d.easing,e=f.dur,d=d.attr);var h=arguments;if(a.is(d,"array")&&a.is(h[h.length-1],"array"))var i=!0;var j,k=function(){j?this.b=j:j=this.b},l=0,m=this,n=g&&function(){++l==m.length&&g.call(this) +};return this.forEach(function(a,c){b.once("snap.animcreated."+a.id,k),i?h[c]&&a.animate.apply(a,h[c]):a.animate(d,e,f,n)})},g.remove=function(){for(;this.length;)this.pop().remove();return this},g.bind=function(a,b,c){var d={};if("function"==typeof b)this.bindings[a]=b;else{var e=c||a;this.bindings[a]=function(a){d[e]=a,b.attr(d)}}return this},g.attr=function(a){var b={};for(var c in a)this.bindings[c]?this.bindings[c](a[c]):b[c]=a[c];for(var d=0,e=this.items.length;e>d;d++)this.items[d].attr(b);return this},g.clear=function(){for(;this.length;)this.pop()},g.splice=function(a,b){a=0>a?d(this.length+a,0):a,b=d(0,e(this.length-a,b));var c,g=[],h=[],i=[];for(c=2;cc;c++)h.push(this[a+c]);for(;cc?i[c]:g[c-j];for(c=this.items.length=this.length-=b-j;this[c];)delete this[c++];return new f(h)},g.exclude=function(a){for(var b=0,c=this.length;c>b;b++)if(this[b]==a)return this.splice(b,1),!0;return!1},g.insertAfter=function(a){for(var b=this.items.length;b--;)this.items[b].insertAfter(a);return this},g.getBBox=function(){for(var a=[],b=[],c=[],f=[],g=this.items.length;g--;)if(!this.items[g].removed){var h=this.items[g].getBBox();a.push(h.x),b.push(h.y),c.push(h.x+h.width),f.push(h.y+h.height)}return a=e.apply(0,a),b=e.apply(0,b),c=d.apply(0,c),f=d.apply(0,f),{x:a,y:b,x2:c,y2:f,width:c-a,height:f-b,cx:a+(c-a)/2,cy:b+(f-b)/2}},g.clone=function(a){a=new f;for(var b=0,c=this.items.length;c>b;b++)a.push(this.items[b].clone());return a},g.toString=function(){return"Snap‘s set"},g.type="set",a.Set=f,a.set=function(){var a=new f;return arguments.length&&a.push.apply(a,Array.prototype.slice.call(arguments,0)),a}}),d.plugin(function(a,c){function d(a){var b=a[0];switch(b.toLowerCase()){case"t":return[b,0,0];case"m":return[b,1,0,0,1,0,0];case"r":return 4==a.length?[b,0,a[2],a[3]]:[b,0];case"s":return 5==a.length?[b,1,1,a[3],a[4]]:3==a.length?[b,1,1]:[b,1]}}function e(b,c,e){c=p(c).replace(/\.{3}|\u2026/g,b),b=a.parseTransformString(b)||[],c=a.parseTransformString(c)||[];for(var f,g,h,i,l=Math.max(b.length,c.length),m=[],n=[],o=0;l>o;o++){if(h=b[o]||d(c[o]),i=c[o]||d(h),h[0]!=i[0]||"r"==h[0].toLowerCase()&&(h[2]!=i[2]||h[3]!=i[3])||"s"==h[0].toLowerCase()&&(h[3]!=i[3]||h[4]!=i[4])){b=a._.transform2matrix(b,e()),c=a._.transform2matrix(c,e()),m=[["m",b.a,b.b,b.c,b.d,b.e,b.f]],n=[["m",c.a,c.b,c.c,c.d,c.e,c.f]];break}for(m[o]=[],n[o]=[],f=0,g=Math.max(h.length,i.length);g>f;f++)f in h&&(m[o][f]=h[f]),f in i&&(n[o][f]=i[f])}return{from:k(m),to:k(n),f:j(m)}}function f(a){return a}function g(a){return function(b){return+b.toFixed(3)+a}}function h(a){return a.join(" ")}function i(b){return a.rgb(b[0],b[1],b[2])}function j(a){var b,c,d,e,f,g,h=0,i=[];for(b=0,c=a.length;c>b;b++){for(f="[",g=['"'+a[b][0]+'"'],d=1,e=a[b].length;e>d;d++)g[d]="val["+h++ +"]";f+=g+"]",i[b]=f}return Function("val","return Snap.path.toString.call(["+i+"])")}function k(a){for(var b=[],c=0,d=a.length;d>c;c++)for(var e=1,f=a[c].length;f>e;e++)b.push(a[c][e]);return b}function l(a){return isFinite(parseFloat(a))}function m(b,c){return a.is(b,"array")&&a.is(c,"array")?b.toString()==c.toString():!1}var n={},o=/[a-z]+$/i,p=String;n.stroke=n.fill="colour",c.prototype.equal=function(a,c){return b("snap.util.equal",this,a,c).firstDefined()},b.on("snap.util.equal",function(b,c){var d,q,r=p(this.attr(b)||""),s=this;if(l(r)&&l(c))return{from:parseFloat(r),to:parseFloat(c),f:f};if("colour"==n[b])return d=a.color(r),q=a.color(c),{from:[d.r,d.g,d.b,d.opacity],to:[q.r,q.g,q.b,q.opacity],f:i};if("viewBox"==b)return d=this.attr(b).vb.split(" ").map(Number),q=c.split(" ").map(Number),{from:d,to:q,f:h};if("transform"==b||"gradientTransform"==b||"patternTransform"==b)return c instanceof a.Matrix&&(c=c.toTransformString()),a._.rgTransform.test(c)||(c=a._.svgTransform2string(c)),e(r,c,function(){return s.getBBox(1)});if("d"==b||"path"==b)return d=a.path.toCubic(r,c),{from:k(d[0]),to:k(d[1]),f:j(d[0])};if("points"==b)return d=p(r).split(a._.separator),q=p(c).split(a._.separator),{from:d,to:q,f:function(a){return a}};var t=r.match(o),u=p(c).match(o);return t&&m(t,u)?{from:parseFloat(r),to:parseFloat(c),f:g(t)}:{from:this.asPX(b),to:this.asPX(b,c),f:f}})}),d.plugin(function(a,c,d,e){for(var f=c.prototype,g="hasOwnProperty",h=("createTouch"in e.doc),i=["click","dblclick","mousedown","mousemove","mouseout","mouseover","mouseup","touchstart","touchmove","touchend","touchcancel"],j={mousedown:"touchstart",mousemove:"touchmove",mouseup:"touchend"},k=(function(a,b){var c="y"==a?"scrollTop":"scrollLeft",d=b&&b.node?b.node.ownerDocument:e.doc;return d[c in d.documentElement?"documentElement":"body"][c]}),l=function(){return this.originalEvent.preventDefault()},m=function(){return this.originalEvent.stopPropagation()},n=function(a,b,c,d){var e=h&&j[b]?j[b]:b,f=function(e){var f=k("y",d),i=k("x",d);if(h&&j[g](b))for(var n=0,o=e.targetTouches&&e.targetTouches.length;o>n;n++)if(e.targetTouches[n].target==a||a.contains(e.targetTouches[n].target)){var p=e;e=e.targetTouches[n],e.originalEvent=p,e.preventDefault=l,e.stopPropagation=m;break}var q=e.clientX+i,r=e.clientY+f;return c.call(d,e,q,r)};return b!==e&&a.addEventListener(b,f,!1),a.addEventListener(e,f,!1),function(){return b!==e&&a.removeEventListener(b,f,!1),a.removeEventListener(e,f,!1),!0}},o=[],p=function(a){for(var c,d=a.clientX,e=a.clientY,f=k("y"),g=k("x"),i=o.length;i--;){if(c=o[i],h){for(var j,l=a.touches&&a.touches.length;l--;)if(j=a.touches[l],j.identifier==c.el._drag.id||c.el.node.contains(j.target)){d=j.clientX,e=j.clientY,(a.originalEvent?a.originalEvent:a).preventDefault();break}}else a.preventDefault();{var m=c.el.node;m.nextSibling,m.parentNode,m.style.display}d+=g,e+=f,b("snap.drag.move."+c.el.id,c.move_scope||c.el,d-c.el._drag.x,e-c.el._drag.y,d,e,a)}},q=function(c){a.unmousemove(p).unmouseup(q);for(var d,e=o.length;e--;)d=o[e],d.el._drag={},b("snap.drag.end."+d.el.id,d.end_scope||d.start_scope||d.move_scope||d.el,c),b.off("snap.drag.*."+d.el.id);o=[]},r=i.length;r--;)!function(b){a[b]=f[b]=function(c,d){if(a.is(c,"function"))this.events=this.events||[],this.events.push({name:b,f:c,unbind:n(this.node||document,b,c,d||this)});else for(var e=0,f=this.events.length;f>e;e++)if(this.events[e].name==b)try{this.events[e].f.call(this)}catch(g){}return this},a["un"+b]=f["un"+b]=function(a){for(var c=this.events||[],d=c.length;d--;)if(c[d].name==b&&(c[d].f==a||!a))return c[d].unbind(),c.splice(d,1),!c.length&&delete this.events,this;return this}}(i[r]);f.hover=function(a,b,c,d){return this.mouseover(a,c).mouseout(b,d||c)},f.unhover=function(a,b){return this.unmouseover(a).unmouseout(b)};var s=[];f.drag=function(c,d,e,f,g,h){function i(i,j,l){(i.originalEvent||i).preventDefault(),k._drag.x=j,k._drag.y=l,k._drag.id=i.identifier,!o.length&&a.mousemove(p).mouseup(q),o.push({el:k,move_scope:f,start_scope:g,end_scope:h}),d&&b.on("snap.drag.start."+k.id,d),c&&b.on("snap.drag.move."+k.id,c),e&&b.on("snap.drag.end."+k.id,e),b("snap.drag.start."+k.id,g||f||k,j,l,i)}function j(a,c,d){b("snap.draginit."+k.id,k,a,c,d)}var k=this;if(!arguments.length){var l;return k.drag(function(a,b){this.attr({transform:l+(l?"T":"t")+[a,b]})},function(){l=this.transform().local})}return b.on("snap.draginit."+k.id,i),k._drag={},s.push({el:k,start:i,init:j}),k.mousedown(j),k},f.undrag=function(){for(var c=s.length;c--;)s[c].el==this&&(this.unmousedown(s[c].init),s.splice(c,1),b.unbind("snap.drag.*."+this.id),b.unbind("snap.draginit."+this.id));return!s.length&&a.unmousemove(p).unmouseup(q),this}}),d.plugin(function(a,c,d){var e=(c.prototype,d.prototype),f=/^\s*url\((.+)\)/,g=String,h=a._.$;a.filter={},e.filter=function(b){var d=this;"svg"!=d.type&&(d=d.paper);var e=a.parse(g(b)),f=a._.id(),i=(d.node.offsetWidth,d.node.offsetHeight,h("filter"));return h(i,{id:f,filterUnits:"userSpaceOnUse"}),i.appendChild(e.node),d.defs.appendChild(i),new c(i)},b.on("snap.util.getattr.filter",function(){b.stop();var c=h(this.node,"filter");if(c){var d=g(c).match(f);return d&&a.select(d[1])}}),b.on("snap.util.attr.filter",function(d){if(d instanceof c&&"filter"==d.type){b.stop();var e=d.node.id;e||(h(d.node,{id:d.id}),e=d.id),h(this.node,{filter:a.url(e)})}d&&"none"!=d||(b.stop(),this.node.removeAttribute("filter"))}),a.filter.blur=function(b,c){null==b&&(b=2);var d=null==c?b:[b,c];return a.format('',{def:d})},a.filter.blur.toString=function(){return this()},a.filter.shadow=function(b,c,d,e,f){return"string"==typeof d&&(e=d,f=e,d=4),"string"!=typeof e&&(f=e,e="#000"),e=e||"#000",null==d&&(d=4),null==f&&(f=1),null==b&&(b=0,c=2),null==c&&(c=b),e=a.color(e),a.format('',{color:e,dx:b,dy:c,blur:d,opacity:f})},a.filter.shadow.toString=function(){return this()},a.filter.grayscale=function(b){return null==b&&(b=1),a.format('',{a:.2126+.7874*(1-b),b:.7152-.7152*(1-b),c:.0722-.0722*(1-b),d:.2126-.2126*(1-b),e:.7152+.2848*(1-b),f:.0722-.0722*(1-b),g:.2126-.2126*(1-b),h:.0722+.9278*(1-b)})},a.filter.grayscale.toString=function(){return this()},a.filter.sepia=function(b){return null==b&&(b=1),a.format('',{a:.393+.607*(1-b),b:.769-.769*(1-b),c:.189-.189*(1-b),d:.349-.349*(1-b),e:.686+.314*(1-b),f:.168-.168*(1-b),g:.272-.272*(1-b),h:.534-.534*(1-b),i:.131+.869*(1-b)})},a.filter.sepia.toString=function(){return this()},a.filter.saturate=function(b){return null==b&&(b=1),a.format('',{amount:1-b})},a.filter.saturate.toString=function(){return this()},a.filter.hueRotate=function(b){return b=b||0,a.format('',{angle:b})},a.filter.hueRotate.toString=function(){return this()},a.filter.invert=function(b){return null==b&&(b=1),a.format('',{amount:b,amount2:1-b})},a.filter.invert.toString=function(){return this()},a.filter.brightness=function(b){return null==b&&(b=1),a.format('',{amount:b})},a.filter.brightness.toString=function(){return this()},a.filter.contrast=function(b){return null==b&&(b=1),a.format('',{amount:b,amount2:.5-b/2})},a.filter.contrast.toString=function(){return this()}}),d.plugin(function(a,b){var c=a._.box,d=a.is,e=/^[^a-z]*([tbmlrc])/i,f=function(){return"T"+this.dx+","+this.dy};b.prototype.getAlign=function(a,b){null==b&&d(a,"string")&&(b=a,a=null),a=a||this.paper;var g=a.getBBox?a.getBBox():c(a),h=this.getBBox(),i={};switch(b=b&&b.match(e),b=b?b[1].toLowerCase():"c"){case"t":i.dx=0,i.dy=g.y-h.y;break;case"b":i.dx=0,i.dy=g.y2-h.y2;break;case"m":i.dx=0,i.dy=g.cy-h.cy;break;case"l":i.dx=g.x-h.x,i.dy=0;break;case"r":i.dx=g.x2-h.x2,i.dy=0;break;default:i.dx=g.cx-h.cx,i.dy=0}return i.toString=f,i},b.prototype.align=function(a,b){return this.transform("..."+this.getAlign(a,b))}}),d}); diff --git a/web/src/main/webapp/components/time-slider/time-slider.min.js b/web/src/main/webapp/components/time-slider/time-slider.min.js new file mode 100644 index 000000000000..25487d63e753 --- /dev/null +++ b/web/src/main/webapp/components/time-slider/time-slider.min.js @@ -0,0 +1,3 @@ +!function(w,$){"use strict";var TimeSlider=function(id,options){this.$snap=$("#"+id),this.snap=Snap("#"+id),this._init(options),this._initControlClass(),this._addInnerEventListener()};TimeSlider.prototype._init=function(options){this.groups={},this._aListener={inEvent:[],outEvent:[],clickEvent:[],selectTime:[],changeSliderTimeSeries:[],changeSelectionZone:[]},this.opt={duration:300,xAxisTicks:5,eventZoneHeight:30,headerZoneHeight:20,stateLineThickness:4,minSliderTimeSeries:6e3,maxSelectionTimeSeries:1728e5,headerTextTopPadding:10,selectionPointRadius:5},this.opt.minSliderTimeSeries=1e3*(this.opt.xAxisTicks+1);var p;for(p in options)this.opt[p]=options[p];this.oEventData=new TimeSlider.EventData(this.opt.eventData||[]),this._checkOffset()},TimeSlider.prototype._initControlClass=function(options){this.oPositionManager=new TimeSlider.PositionManager({width:this.opt.width,selectTime:this.opt.selectTime,xAxisTicks:this.opt.xAxisTicks,handleTimeSeries:this.opt.handleTimeSeries,sliderTimeSeries:this.opt.timeSeries,minSliderTimeSeries:this.opt.minSliderTimeSeries,maxSelectionTimeSeries:this.opt.maxSelectionTimeSeries});var contentZoneHeight=this.opt.height-this.opt.headerZoneHeight-this.opt.eventZoneHeight;this.oLoading=new TimeSlider.LoadingIndicator(this,this.getGroup("loading",TimeSlider.GROUP_TYPE.TOP_BASE,TimeSlider.oDrawOrder.loading),{width:this.opt.width,height:this.opt.height,duration:2e3}),this.oBackground=new TimeSlider.Background(this,this.getGroup("background",TimeSlider.GROUP_TYPE.CONTENT_BASE,TimeSlider.oDrawOrder.background),{top:0,left:0,width:this.opt.width,height:contentZoneHeight,duration:this.opt.duration}),this.oSelectionManager=new TimeSlider.SelectionManager(this,{margin:this.opt.left,height:this.opt.height,duration:this.opt.duration,handleSrc:this.opt.handleSrc,eventZoneHeight:this.opt.eventZoneHeight,headerZoneHeight:this.opt.headerZoneHeight,contentZoneHeight:contentZoneHeight,selectionPointRadius:this.opt.selectionPointRadius}),this.oXAxis=new TimeSlider.XAxis(this,this.getGroup("x-axis",TimeSlider.GROUP_TYPE.TOP_BASE,TimeSlider.oDrawOrder["x-axis"]),{endY:this.opt.height-this.opt.eventZoneHeight,width:this.opt.width,textY:this.opt.headerTextTopPadding,startY:this.opt.headerZoneHeight,duration:this.opt.duration}),this.oStateLine=new TimeSlider.StateLine(this,this.getGroup("state-line",TimeSlider.GROUP_TYPE.TOP_BASE,TimeSlider.oDrawOrder["state-line"]),{width:this.opt.width,duration:this.opt.duration,topLineY:this.opt.headerZoneHeight,thickness:this.opt.stateLineThickness,timeSeries:this.opt.timeSeries,bottomLineY:this.opt.height-this.opt.eventZoneHeight}),this.oEvents=new TimeSlider.Events(this,this.getGroup("events",TimeSlider.GROUP_TYPE.BOTTOM_BASE,TimeSlider.oDrawOrder.events),{duration:this.opt.duration}),this.oLoading.hide()},TimeSlider.prototype.getGroup=function(name,type,zIndex){if(this.groups[name])return this.groups[name];var g=this.groups[name]=this.snap.g().attr({"class":name,"data-order":zIndex});return this._setTransform(g,type),this._sortGroup(g,zIndex),this.groups[name]},TimeSlider.prototype._setTransform=function(newGroup,type){switch(type){case TimeSlider.GROUP_TYPE.TOP_BASE:break;case TimeSlider.GROUP_TYPE.CONTENT_BASE:newGroup.attr({transform:"translate(0, "+this.opt.headerZoneHeight+")"});break;case TimeSlider.GROUP_TYPE.BOTTOM_BASE:newGroup.attr({transform:"translate(0, "+(this.opt.height-this.opt.eventZoneHeight)+")"})}},TimeSlider.prototype._sortGroup=function(newGroup,zIndex){for(var aGroups=this.snap.selectAll("g"),afterGroup=null,i=aGroups.length-1;i>=0;i--)aGroups[i]!=newGroup&&zIndex=0;i--)this._aRawData.unshift(aNewData[i]),this._oHash[this.makeID(aNewData[i])]=aNewData[i];var afterBoundary=this._getAfterDataBoundary(aNewData,beforeBoundary);for(i=afterBoundary;ibeforeBoundary)for(i=beforeBoundary;ii;i++){var time=aNewData[i].eventTimestamp;if(!(startTime>time))break;boundary=i}return boundary},ts.EventData.prototype._getAfterDataBoundary=function(aNewData,skipIndex){var boundary=Number.MAX_SAFE_INTEGER,startIndex=skipIndex+1,len=aNewData.length;if(len>startIndex)for(var endTime=this._aRawData[this._aRawData.length-1].eventTimestamp,i=startIndex;len>i;i++){var time=aNewData[i].eventTimestamp;if(time>endTime){boundary=i;break}}return boundary}}(window,jQuery),function(w,$){var ts=w.TimeSlider;ts.Background=function(timeSlider,svgGroup,options){this.timeSlider=timeSlider,this.opt=options,this.group=svgGroup,this._addElements()},ts.Background.prototype._addElements=function(){this.rect=this.timeSlider.snap.rect(this.opt.left,this.opt.top,this.opt.width,this.opt.height),this.group.add(this.rect)},ts.Background.prototype.reset=function(){this.rect.animate({width:this.timeSlider.oPositionManager.getSliderEndPosition()},this.opt.duration,mina.easein)}}(window,jQuery),function(w,$){var ts=w.TimeSlider;ts.SelectionManager=function(timeSlider,options){this.timeSlider=timeSlider,this.opt=options,this.initClass()},ts.SelectionManager.prototype.initClass=function(){var self=this,aHandlerPosition=this.timeSlider.oPositionManager.getSelectionPosition();this.oSelectionZone=new TimeSlider.SelectionZone(this.timeSlider,this.timeSlider.getGroup("selection-zone",TimeSlider.GROUP_TYPE.CONTENT_BASE,TimeSlider.oDrawOrder["selection-zone"]),{top:0,left:aHandlerPosition[0],width:aHandlerPosition[1]-aHandlerPosition[0],height:this.opt.contentZoneHeight,duration:50}),this.oSelectionPoint=new TimeSlider.SelectionPoint(this.timeSlider,this.timeSlider.getGroup("selection-point",TimeSlider.GROUP_TYPE.CONTENT_BASE,TimeSlider.oDrawOrder["selection-point"]),{y:this.opt.headerZoneHeight,x:this.timeSlider.oPositionManager.getSelectPosition(),radius:this.opt.selectionPointRadius,height:this.opt.contentZoneHeight,duration:this.opt.duration,eventStartY:this.opt.headerZoneHeight,eventEndY:this.opt.height-this.opt.eventZoneHeight}),this.oLeftHandler=new TimeSlider.Handler(this.timeSlider,this.timeSlider.getGroup("left-handler",TimeSlider.GROUP_TYPE.CONTENT_BASE,TimeSlider.oDrawOrder["left-handler"]),{x:aHandlerPosition[0],zone:[0,aHandlerPosition[1]],height:this.opt.contentZoneHeight,margin:this.opt.margin,duration:50,handleSrc:this.opt.handleSrc},function(x){self.oLeftTimeSignboard.onDragStart(x)},function(x){self.oLeftTimeSignboard.onDrag(x)},function(bIsDraged,x){self.oLeftTimeSignboard.onDragEnd(),bIsDraged&&self.moveLeftHandler(x)}),this.oRightHandler=new TimeSlider.Handler(this.timeSlider,this.timeSlider.getGroup("right-handler",TimeSlider.GROUP_TYPE.CONTENT_BASE,TimeSlider.oDrawOrder["right-handler"]),{x:aHandlerPosition[1],zone:[aHandlerPosition[0],this.timeSlider.oPositionManager.getSliderEndPosition()],height:this.opt.contentZoneHeight,margin:this.opt.margin,duration:0,handleSrc:this.opt.handleSrc},function(x){self.oRightTimeSignboard.onDragStart(x)},function(x){self.oRightTimeSignboard.onDrag(x)},function(bIsDraged,x){self.oRightTimeSignboard.onDragEnd(),bIsDraged&&self.moveRightHandler(x)}),this.oLeftTimeSignboard=new TimeSlider.TimeSignboard(this.timeSlider,this.timeSlider.getGroup("time-left-signboard",TimeSlider.GROUP_TYPE.CONTENT_BASE,TimeSlider.oDrawOrder["time-signboard"]),{x:aHandlerPosition[0],direction:"left"}),this.oRightTimeSignboard=new TimeSlider.TimeSignboard(this.timeSlider,this.timeSlider.getGroup("time-right-signboard",TimeSlider.GROUP_TYPE.CONTENT_BASE,TimeSlider.oDrawOrder["time-signboard"]),{x:aHandlerPosition[1],direction:"right"})},ts.SelectionManager.prototype.moveLeftHandler=function(x){var aCurrentSelectionTimeSeries=this.timeSlider.oPositionManager.getSelectionTimeSeries(),newLeftTime=this.timeSlider.oPositionManager.getTimeFromPosition(x);if(this.timeSlider.oPositionManager.isInMaxSelectionTimeSeries(newLeftTime,aCurrentSelectionTimeSeries[1]))this.oRightHandler.setZone(x,this.timeSlider.oPositionManager.getSliderEndPosition()),this.timeSlider.oPositionManager.setSelectionStartPosition(x);else{var aNewSelectionTimeSeries=this.timeSlider.oPositionManager.getNewSelectionTimeSeriesFromStart(newLeftTime),newRightX=this.timeSlider.oPositionManager.getPositionFromTime(aNewSelectionTimeSeries[1]);this.oRightHandler.setZone(x,this.timeSlider.oPositionManager.getSliderEndPosition()),this.timeSlider.oPositionManager.setSelectionStartPosition(x),this.oRightHandler.setX(newRightX),this.oRightTimeSignboard.onDrag(newRightX),this.oLeftHandler.setZone(0,newRightX),this.timeSlider.oPositionManager.setSelectionEndPosition(newRightX),this.timeSlider.oPositionManager.isInSelectionZoneSelectPoint()===!1&&(this.oSelectionPoint.onMouseClick(newRightX),this.timeSlider.fireEvent("selectTime",aNewSelectionTimeSeries[1]))}this.oSelectionZone.redraw(),this._fireChangeZoneEvent()},ts.SelectionManager.prototype.moveRightHandler=function(x){var aCurrentSelectionTimeSeries=this.timeSlider.oPositionManager.getSelectionTimeSeries(),newRightTime=this.timeSlider.oPositionManager.getTimeFromPosition(x);if(this.timeSlider.oPositionManager.isInMaxSelectionTimeSeries(aCurrentSelectionTimeSeries[0],newRightTime))this.oLeftHandler.setZone(0,x),this.timeSlider.oPositionManager.setSelectionEndPosition(x);else{var aNewSelectionTimeSeries=this.timeSlider.oPositionManager.getNewSelectionTimeSeriesFromEnd(newRightTime),newLeftX=this.timeSlider.oPositionManager.getPositionFromTime(aNewSelectionTimeSeries[0]);this.oLeftHandler.setZone(0,x),this.timeSlider.oPositionManager.setSelectionEndPosition(x),this.oLeftHandler.setX(newLeftX),this.oLeftTimeSignboard.onDrag(newLeftX),this.oRightHandler.setZone(newLeftX,this.timeSlider.oPositionManager.getSliderEndPosition()),this.timeSlider.oPositionManager.setSelectionStartPosition(newLeftX),this.timeSlider.oPositionManager.isInSelectionZoneSelectPoint()===!1&&(this.oSelectionPoint.onMouseClick(newLeftX),this.timeSlider.fireEvent("selectTime",aNewSelectionTimeSeries[0]))}this.oSelectionZone.redraw(),this._fireChangeZoneEvent()},ts.SelectionManager.prototype.moveSelectionAndHandler=function(x){var aNewSelectionZone=this.timeSlider.oPositionManager.getSelectionPosition();this.oLeftHandler.setPositionAndZone(aNewSelectionZone[0],[0,aNewSelectionZone[1]]),this.oRightHandler.setPositionAndZone(aNewSelectionZone[1],[aNewSelectionZone[0],this.timeSlider.oPositionManager.getSliderEndPosition()]),this.oSelectionZone.redraw(),this._fireChangeZoneEvent()},ts.SelectionManager.prototype.onMouseClick=function(event,x,y){y>this.opt.headerZoneHeight&&ythis._maxSelectionTimeSeries&&(aTime[0]=aTime[1]-this._maxSelectionTimeSeries),this._setSelectionTimeSeries(aTime[0],aTime[1])},ts.PositionManager.prototype._resetSelectionByPosition=function(){this._setSelectionTimeSeries(this.getTimeFromPosition(this._aSelectionPosition[0]),this.getTimeFromPosition(this._aSelectionPosition[1]))},ts.PositionManager.prototype._setSelectionTimeSeries=function(start,end){this._aSelectionTimeSeries[0]=null===start?this._aSelectionTimeSeries[0]:start,this._aSelectionTimeSeries[1]=null===end?this._aSelectionTimeSeries[1]:end},ts.PositionManager.prototype._resetSelectionByTime=function(){this._setSelectionPosition(this.getPositionFromTime(this._aSelectionTimeSeries[0]),this.getPositionFromTime(this._aSelectionTimeSeries[1]))},ts.PositionManager.prototype._setSelectionPosition=function(start,end){this._aSelectionPosition[0]=null===start?this._aSelectionPosition[0]:start,this._aSelectionPosition[1]=null===end?this._aSelectionPosition[1]:end},ts.PositionManager.prototype.isInMaxSelectionTimeSeries=function(start,end){return end-start<=this._maxSelectionTimeSeries},ts.PositionManager.prototype.getNewSelectionTimeSeriesFromStart=function(start){return[start,start+this._maxSelectionTimeSeries]},ts.PositionManager.prototype.getNewSelectionTimeSeriesFromEnd=function(end){return[end-this._maxSelectionTimeSeries,end]},ts.PositionManager.prototype.isBeforeSliderStartTime=function(time){return timethis._endTime},ts.PositionManager.prototype.getSliderEndTime=function(){return this._endTime},ts.PositionManager.prototype.setWidth=function(width){this._width=width,this._calcuTimePerPoint(),this._reset()},ts.PositionManager.prototype.getSliderEndPosition=function(){return this._width},ts.PositionManager.prototype.getSliderStartTimeStr=function(){return this._formatDate(new Date(this._startTime))},ts.PositionManager.prototype.getSliderEndTimeStr=function(){return this._formatDate(new Date(this._endTime))},ts.PositionManager.prototype.getFullTimeStr=function(x){return this._formatDate(new Date(this.getTimeFromPosition(x)))},ts.PositionManager.prototype._formatDate=function(d){return d.getFullYear()+"."+this._twoChipers(d.getMonth()+1)+"."+this._twoChipers(d.getDate())+" "+this._twoChipers(d.getHours())+":"+this._twoChipers(d.getMinutes())+":"+this._twoChipers(d.getSeconds())},ts.PositionManager.prototype._twoChipers=function(n){return 10>n?"0"+n:n},ts.PositionManager.prototype.isInSelectionZone=function(x){return x>=this._aSelectionPosition[0]&&x<=this._aSelectionPosition[1]?!0:!1},ts.PositionManager.prototype.isInSliderTimeSeries=function(time){return time>=this._startTime&&time<=this._endTime?!0:!1},ts.PositionManager.prototype.getSliderTimeSeries=function(){return[this._startTime,this._endTime]},ts.PositionManager.prototype.getSelectionTimeSeries=function(){return[this._aSelectionTimeSeries[0],this._aSelectionTimeSeries[1]]},ts.PositionManager.prototype.getSelectionPosition=function(){return[this._aSelectionPosition[0],this._aSelectionPosition[1]]},ts.PositionManager.prototype.isInSelectionZoneSelectPoint=function(){return this._selectPosition>=this._aSelectionPosition[0]&&this._selectPosition<=this._aSelectionPosition[1]?!0:!1},ts.PositionManager.prototype.getSelectPosition=function(){return this._selectPosition},ts.PositionManager.prototype.setSelectTime=function(time){this._selectTime=time,this._selectPosition=this.getPositionFromTime(time)},ts.PositionManager.prototype.setSelectPosition=function(x){this._selectPosition=x,this._selectTime=this.getTimeFromPosition(x)},ts.PositionManager.prototype.getTimeFromPosition=function(x){return this._startTime+this._timePerPoint*x},ts.PositionManager.prototype.getPositionFromTime=function(time){return parseInt((time-this._startTime)/this._timePerPoint)},ts.PositionManager.prototype.calcuSelectionZone=function(){var defaultZone=parseInt((this._aSelectionPosition[1]-this._aSelectionPosition[0])/2),zoneStart=this._selectPosition-defaultZone,zoneEnd=this._selectPosition+defaultZone;0>zoneStart?(zoneEnd+=Math.abs(zoneStart),zoneStart=0):zoneEnd>this._width&&(zoneStart-=zoneEnd-this._width,zoneEnd=this._width),this._setSelectionTimeSeries(this.getTimeFromPosition(zoneStart),this.getTimeFromPosition(zoneEnd)),this._setSelectionPosition(zoneStart,zoneEnd)},ts.PositionManager.prototype.getXBarPosition=function(){for(var self=this,max=this._xAxisTicks+1,space=parseInt(this._width/max),a=[],i=0;max>i;i++)if(0!==i){var x=i*space;a.push({x:x,time:self.getTimeStr(x)})}return a},ts.PositionManager.prototype.getTimeStr=function(x){var timeX=x*this._timePerPoint+this._startTime,d=new Date(timeX);return this._twoChipers(d.getMonth()+1)+"."+this._twoChipers(d.getDate())+" "+this._twoChipers(d.getHours())+":"+this._twoChipers(d.getMinutes())},ts.PositionManager.prototype.setSelectionStartPosition=function(x){this._setSelectionTimeSeries(this.getTimeFromPosition(x),null),this._setSelectionPosition(x,null)},ts.PositionManager.prototype.setSelectionEndPosition=function(x){this._setSelectionTimeSeries(null,this.getTimeFromPosition(x)),this._setSelectionPosition(null,x)},ts.PositionManager.prototype.zoomIn=function(){if(this._startTime!==this._aSelectionTimeSeries[0]||this._endTime!==this._aSelectionTimeSeries[1]){var quarterSliderTime=parseInt((this._endTime-this._startTime)/4),tempStartTime=this._selectTime-quarterSliderTime,tempEndTime=this._selectTime+quarterSliderTime;if(tempEndTime-tempStartTimetempEndTime?tempEndTime:this._aSelectionTimeSeries[1]+gap;this._setSelectionTimeSeries(tempStartTime,tempSelectionEndTime)}if(this._aSelectionTimeSeries[1]>tempEndTime){gap=this._aSelectionTimeSeries[1]-tempEndTime;var tempSelectionStartTime=this._aSelectionTimeSeries[0]-gapi;i++)this._addEventElement(this._oEventData.getDataByIndex(i))},ts.StateLine.prototype._addEventElement=function(oEvent){if("undefined"!=typeof oEvent.durationStartTimestamp){if(this.timeSlider.oPositionManager.isInSliderTimeSeries(oEvent.durationStartTimestamp)===!1&&this.timeSlider.oPositionManager.isInSliderTimeSeries(oEvent.durationEndTimestamp)===!1)return;this._hasDurationData=!0,this._addLine(this.timeSlider.oPositionManager.getPositionFromTime(oEvent.durationStartTimestamp),this._getX2(oEvent),oEvent)}},ts.StateLine.prototype._makeID=function(oEvent){return this._oEventData.makeID(oEvent)+consts.ID_POSTFIX},ts.StateLine.prototype._addLine=function(x,x2,oEvent){var lineID=this._makeID(oEvent),elLineTop=this._makeLine(x,x2,this.opt.topLineY,oEvent.eventTypeCode,lineID),elLineBottom=this._makeLine(x,x2,this.opt.bottomLineY,oEvent.eventTypeCode,lineID);this._oLineElementHash[lineID]=[elLineTop,elLineBottom],this.group.add(elLineTop,elLineBottom)},ts.StateLine.prototype._makeLine=function(x,x2,y,eventType,id){return this.timeSlider.snap.line(x,y,x2,y).attr({stroke:TimeSlider.EventColor[eventType],"data-id":id,strokeWidth:this.opt.thickness})},ts.StateLine.prototype._hasEventData=function(id){return"undefined"==typeof this._oLineElementHash[id]?!1:!0},ts.StateLine.prototype._getX2=function(oEvent){return this.timeSlider.oPositionManager.getPositionFromTime(-1==oEvent.durationEndTimestamp?this.timeSlider.oPositionManager.getSliderEndTime():oEvent.durationEndTimestamp)},ts.StateLine.prototype.changeData=function(){for(var len=this._oEventData.count(),i=0;len>i;i++){var oEvent=this._oEventData.getDataByIndex(i);this._hasEventData(this._makeID(oEvent))===!1&&this._addEventElement(oEvent)}this.reset()},ts.StateLine.prototype.emptyData=function(){for(var p in this._oLineElementHash){var aLine=this._oLineElementHash[p];aLine[0].remove(),aLine[1].remove()}this._oLineElementHash={}},ts.StateLine.prototype.setDefaultStateLineColor=function(color){this._baseColor=color,this._hasDurationData!==!0&&this._aBaseLine.forEach(function(elLine){elLine.attr("stroke",color)})},ts.StateLine.prototype._resetBaseLineColor=function(){var self=this;this._aBaseLine.forEach(function(elLine){elLine.attr("stroke",this._hasDurationData===!0?TimeSlider.EventColor.base:self._baseColor)})},ts.StateLine.prototype.reset=function(){var self=this,oPM=this.timeSlider.oPositionManager;for(var p in this._oLineElementHash){var aLine=this._oLineElementHash[p],oEvent=this._oEventData.getDataByKey(p.split(consts.ID_SPLITER)[0]);oPM.isInSliderTimeSeries(oEvent.durationStartTimestamp)||oPM.isInSliderTimeSeries(oEvent.durationEndTimestamp)?aLine.forEach(function(elLine){self.show(elLine),elLine.animate({x1:oPM.getPositionFromTime(oEvent.durationStartTimestamp),x2:self._getX2(oEvent)},self.opt.duration)}):aLine.forEach(function(elLine){self.hide(elLine)})}this._aBaseLine.forEach(function(elBase){elBase.animate({x2:oPM.getSliderEndPosition()},self.opt.duration)}),this._resetBaseLineColor()},ts.StateLine.prototype.show=function(el){el.attr("display","block")},ts.StateLine.prototype.hide=function(el){el.attr("display","none")}}(window,jQuery),function(w,$){var consts={HANDLER_IMAGE_WIDTH:30,HANDLER_IMAGE_HEIGHT:18},ts=w.TimeSlider;ts.Handler=function(timeSlider,svgGroup,options,callbackStart,callbackDrag,callbackEnd){this.timeSlider=timeSlider,this.group=svgGroup,this.opt=options,this._previousX=options.x,this._handleSrc=options.handleSrc||consts.NORMAL_IMG,this._handleDownSrc=this._getHandleDownSrc(),this.callbackStart=callbackStart,this.callbackDrag=callbackDrag,this.callbackEnd=callbackEnd,this._addElements(),this.setX(options.x),this.addEvent()},ts.Handler.prototype._getHandleDownSrc=function(){var lastIndex=this._handleSrc.lastIndexOf(".");return this._handleSrc.substring(0,lastIndex)+"_down"+this._handleSrc.substring(lastIndex)},ts.Handler.prototype._addElements=function(){this.handlerGrip=this.timeSlider.snap.image(this._handleSrc,-(consts.HANDLER_IMAGE_WIDTH/2),-(consts.HANDLER_IMAGE_HEIGHT/2),consts.HANDLER_IMAGE_WIDTH,consts.HANDLER_IMAGE_HEIGHT),this.handlerGroup=this.group.g(),this.handlerGroup.add(this.timeSlider.snap.line(0,0,0,this.opt.height),this.handlerGrip)},ts.Handler.prototype.addEvent=function(callback){var self=this,lastX=-1;this.handlerGrip.mousedown(function(event,x,y){event.stopPropagation()}),this.handlerGrip.click(function(event,x,y){event.stopPropagation()}),this.handlerGrip.drag(function(dx,dy,x,y,event){ +var newX=x-self.opt.margin;self._isInRestirctionZone(newX)!==!1&&(self.handlerGroup.attr({transform:"translate("+newX+", 0)"}),lastX=newX,self.callbackDrag(newX))},function(x,y,event){event.stopPropagation(),self.handlerGrip.attr("href",self._handleDownSrc),self.callbackStart(x-self.opt.margin)},function(event){event.stopPropagation(),self.handlerGrip.attr("href",self._handleSrc),self._previousX!==lastX&&-1!==lastX?(self.callbackEnd(!0,lastX),self._previousX=lastX):self.callbackEnd(!1)})},ts.Handler.prototype.setX=function(x){this.handlerGroup.animate({transform:"translate("+x+", 0)"},this.opt.duration,mina.easeout)},ts.Handler.prototype._isInRestirctionZone=function(x){return x<=this.opt.zone[0]||x>=this.opt.zone[1]?!1:!0},ts.Handler.prototype.setZone=function(start,end){this.opt.zone=[start,end]},ts.Handler.prototype.setPositionAndZone=function(x,aZone){this.setX(x),this.callbackDrag(x),this.setZone(aZone[0],aZone[1])}}(window,jQuery),function(w,$){var ts=w.TimeSlider;ts.SelectionPoint=function(timeSlider,svgGroup,options){this.timeSlider=timeSlider,this.group=svgGroup,this.opt=options,this._addElements(),this.onMouseClick(options.x)},ts.SelectionPoint.prototype._addElements=function(){this.group.add(this.timeSlider.snap.line(0,0,0,this.opt.height),this.timeSlider.snap.circle(0,this.opt.height/2,this.opt.radius).attr({filter:this.timeSlider.snap.filter(Snap.filter.shadow(0,0,2,"#000",.3))}))},ts.SelectionPoint.prototype.onMouseClick=function(x){this.group.animate({transform:"translate("+x+", "+this.opt.y+")"},this.opt.duration,mina.easein)}}(window,jQuery),function(w,$){var consts={ID_POSTFIX:"+event-circle",ID_SPLITER:"+"},ts=w.TimeSlider;ts.Events=function(timeSlider,svgGroup,options){this.timeSlider=timeSlider,this.group=svgGroup,this._oEventData=timeSlider.oEventData,this._init(options),this._addEventElements(),this._addEvents()},ts.Events.prototype._init=function(options){this._oEventGroupElementHash={},this.opt={y:4,barLength:4,gapBarNCircle:2,circleRadius:8};for(var p in options)this.opt[p]=options[p];this._filterShadow=this.timeSlider.snap.filter(Snap.filter.shadow(1,1,1,"#000",.3))},ts.Events.prototype._addEventElements=function(){for(var len=this._oEventData.count(),i=0;len>i;i++)this._addEventElement(this._oEventData.getDataByIndex(i),!0)},ts.Events.prototype._addEventElement=function(oEvent,bAppend){var el=this._makeElement(oEvent);return this.group[bAppend?"append":"prepend"](el),this.timeSlider.oPositionManager.isInSliderTimeSeries(oEvent.eventTimestamp)===!1&&this.hide(el),el},ts.Events.prototype._makeID=function(oEvent){return this._oEventData.makeID(oEvent)+consts.ID_POSTFIX},ts.Events.prototype._makeElement=function(oEvent){var opt=this.opt,time=oEvent.eventTimestamp,groupID=this._makeID(oEvent),elEventGroup=this.group.g().attr({"data-id":groupID,"data-time":time,transform:"translate("+this.timeSlider.oPositionManager.getPositionFromTime(time)+",0)"}).add(this.timeSlider.snap.line(0,opt.y,0,opt.y+opt.barLength),this.timeSlider.snap.circle(0,opt.y+opt.circleRadius+opt.gapBarNCircle+opt.barLength,opt.circleRadius).attr({fill:TimeSlider.EventColor[oEvent.eventTypeCode],"class":"event",filter:this._filterShadow,"data-time":time}));return this._oEventGroupElementHash[groupID]=elEventGroup,elEventGroup},ts.Events.prototype._addEvents=function(){var self=this;this.group.mouseover(function(event,x,y){self._fireEvent("inEvent",event,x,y)}),this.group.mouseout(function(event,x,y){self._fireEvent("outEvent",event,x,y)}),this.group.click(function(event,x,y){self._fireEvent("clickEvent",event,x,y)})},ts.Events.prototype._fireEvent=function(eventType,event,x,y){this.timeSlider.fireEvent(eventType,[x,y,this._oEventData.getDataByKey(event.srcElement.parentNode.getAttribute("data-id").split(consts.ID_SPLITER)[0])])},ts.Events.prototype.reset=function(){var self=this;for(var p in this._oEventGroupElementHash){var elGroupEvent=this._oEventGroupElementHash[p],time=this._oEventData.getDataByKey(p.split(consts.ID_SPLITER)[0]).eventTimestamp;self.timeSlider.oPositionManager.isInSliderTimeSeries(time)?(self.show(elGroupEvent),function(el,x){el.animate({transform:"translate("+x+",0)"},self.opt.duration)}(elGroupEvent,this.timeSlider.oPositionManager.getPositionFromTime(time))):!function(el,x){el.animate({transform:"translate("+x+",0)"},self.opt.duration,function(){self.hide(el)})}(elGroupEvent,self.timeSlider.oPositionManager.isBeforeSliderStartTime(time)?0:self.timeSlider.oPositionManager.getSliderEndPosition())}},ts.Events.prototype.changeData=function(){var aGroupElements=this.group.selectAll("g");if(0===aGroupElements.length)return void this._addEventElements();var i,j,oEvent,skip=0,lenData=this._oEventData.count(),lenElements=aGroupElements.length,lastElement=aGroupElements[lenElements-1];for(i=0;lenElements>i;i++){var el=aGroupElements[i],timestamp=parseInt(el.attr("data-time"));for(j=skip;lenData>j;j++){if(oEvent=this._oEventData.getDataByIndex(j),!(oEvent.eventTimestampskip;skip++){oEvent=this._oEventData.getDataByIndex(skip);var newEl=this._makeElement(oEvent);lastElement.after(newEl),lastElement=newEl}this.reset()},ts.Events.prototype.emptyData=function(){for(var p in this._oEventGroupElementHash)this._oEventGroupElementHash[p].remove();this._oEventGroupElementHash={}},ts.Events.prototype.show=function(el){el.attr("display","block")},ts.Events.prototype.hide=function(el){el.attr("display","none")}}(window,jQuery),function(w,$){var ts=w.TimeSlider;ts.TimeSeriesSignboard=function(timeSlider,svgGroup,options){this.timeSlider=timeSlider,this.group=svgGroup,this.opt=options,this._init(),this._addElements()},ts.TimeSeriesSignboard.prototype._init=function(){this._halfHeight=this.opt.height-12},ts.TimeSeriesSignboard.prototype._addElements=function(){this._elStartTime=this.group.text(0,this._halfHeight,this.timeSlider.oPositionManager.getSliderStartTimeStr()).attr({"text-anchor":"start"}),this._elEndTime=this.group.text(this.timeSlider.oPositionManager.getSliderEndPosition(),this._halfHeight,this.timeSlider.oPositionManager.getSliderEndTimeStr()).attr({"text-anchor":"end"}),this.group.add(this._elStartTime,this._elEndTime)},ts.TimeSeriesSignboard.prototype.reset=function(){this._elStartTime.attr("text",this.timeSlider.oPositionManager.getSliderStartTimeStr()),this._elEndTime.attr("text",this.timeSlider.oPositionManager.getSliderEndTimeStr())},ts.TimeSeriesSignboard.prototype.resize=function(){var self=this;this._elEndTime.animate({x:self.timeSlider.oPositionManager.getSliderEndPosition()},this.opt.duration,function(){self._elEndTime.attr("text",self.timeSlider.oPositionManager.getSliderEndTimeStr())})}}(window,jQuery),function(w,$){var ts=w.TimeSlider;ts.TimeSignboard=function(timeSlider,svgGroup,options){this.timeSlider=timeSlider,this.group=svgGroup,this.opt=options,this._textMaxWidth=100,this._xPadding=2,this._addElements()},ts.TimeSignboard.prototype._addElements=function(){var isIn=this._isIn(this.opt.x),x=this.opt.x+(isIn?this._xPadding:-this._xPadding);this.timeText=this.group.text(x,26,this.timeSlider.oPositionManager.getFullTimeStr(this.opt.x)).attr({textAnchor:isIn?"start":"end"}),this.group.add(this.timeText)},ts.TimeSignboard.prototype.setX=function(x){var isIn=this._isIn(x);this.timeText.attr({x:x+(isIn?this._xPadding:-this._xPadding),text:this.timeSlider.oPositionManager.getFullTimeStr(x),textAnchor:isIn?"start":"end"})},ts.TimeSignboard.prototype._isIn=function(x){return"left"==this.opt.direction?x= 0 ; i-- ) {\n if( aGroups[i] == newGroup ) continue;\n if ( zIndex < parseInt( aGroups[i].attr(\"data-order\") ) ) {\n afterGroup = aGroups[i];\n }\n }\n if ( afterGroup !== null ) {\n afterGroup.before( newGroup );\n }\n };\n TimeSlider.prototype._checkOffset = function() {\n var o = this.$snap.offset();\n this.opt.top = o.top;\n this.opt.left = o.left;\n };\n TimeSlider.prototype._addInnerEventListener = function() {\n var self = this;\n var mousedownX = -1;\n $(window).on(\"resize\", function() {\n self._checkOffset();\n self._resize();\n });\n this.snap.mousemove(function(event, x, y) {\n });\n this.snap.mouseout(function(event, x, y) {\n });\n this.snap.mousedown(function(event, x, y) {\n mousedownX = x;\n });\n this.snap.click(function(event, x, y) {\n if ( mousedownX !== x ) return;\n self.oSelectionManager.onMouseClick(event, x - self.opt.left, y - self.opt.top);\n });\n };\n TimeSlider.prototype.fireEvent = function( eventType, argu ) {\n this._aListener[eventType].forEach(function(fn) {\n fn( argu );\n });\n };\n TimeSlider.prototype.addEvent = function( eventType, listener ) {\n this._aListener[eventType].push( listener );\n return this;\n };\n TimeSlider.prototype.addEventData = function( aNewData ) {\n this.oLoading.show();\n var aBoundary = this.oEventData.addData( aNewData );\n this.oEvents.changeData();\n this.oStateLine.changeData();\n this.oLoading.hide();\n };\n TimeSlider.prototype.reset = function() {\n // this.oTimeSeriesSignboard.reset();\n this.oXAxis.reset();\n this.oSelectionManager.reset();\n this.oStateLine.reset();\n this.oEvents.reset();\n };\n TimeSlider.prototype._resize = function() {\n this.oPositionManager.setWidth( this.$snap.width() );\n this.oBackground.reset();\n // this.oTimeSeriesSignboard.resize();\n this.reset();\n };\n TimeSlider.prototype.zoomIn = function( zoomLevel ) {\n // 1/2배씩\n this.oPositionManager.zoomIn();\n this.reset();\n };\n TimeSlider.prototype.zoomOut = function( zoomLevel ) {\n // 2배씩\n this.oPositionManager.zoomOut();\n this.reset();\n };\n TimeSlider.prototype.getSliderTimeSeries = function() {\n return this.oPositionManager.getSliderTimeSeries();\n };\n TimeSlider.prototype.getSelectionTimeSeries = function() {\n return this.oPositionManager.getSelectionTimeSeries();\n };\n TimeSlider.prototype.setDefaultStateLineColor = function( color ) {\n this.oStateLine.setDefaultStateLineColor( color );\n };\n TimeSlider.prototype.emptyData = function() {\n this.oLoading.show();\n var aBoundary = this.oEventData.emptyData();\n this.oEvents.emptyData();\n this.oStateLine.emptyData();\n this.oLoading.hide();\n };\n TimeSlider.prototype.setSelectTime = function( time ) {\n this.oSelectionManager.setSelectTime( time );\n };\n\n TimeSlider.GROUP_TYPE = {\n TOP_BASE: \"top-base\",\n CONTENT_BASE: \"content-base\",\n BOTTOM_BASE: \"bottom-base\"\n };\n TimeSlider.oDrawOrder = {\n \"background\": 0,\n \"selection-zone\": 5,\n \"time-series-signboard\": 7,\n \"x-axis\": 10,\n \"events\": 10,\n \"time-signboard\": 15,\n \"selection-point\": 15,\n \"state-line\": 20,\n \"left-handler\": 25,\n \"right-handler\": 25,\n \"guide\": 30,\n \"loading\": 100\n };\n TimeSlider.EventColor = {\n \"base\": \"rgba(187, 187, 187, .3)\",\n \"10100\": \"#009E00\", //Agent connected\n \"10199\": \"#FAEBD7\", //Agent ping\n \"10200\": \"#D15260\", //Agent shutdown\n \"10201\": \"#E95C63\", //Agent unexpected shutdown\n \"10300\": \"#FF9D7B\", //Agent connection closed by server\n \"10301\": \"#F2F089\", //Agent connection unexpectedly closed by server\n \"20100\": \"#00F\" //thread dump\n };\n w.TimeSlider = TimeSlider;\n})(window, jQuery);\n","(function(w, $) {\n var ts = w.TimeSlider;\n ts.EventData = function( aRawData ) {\n this._init( aRawData );\n };\n ts.EventData.prototype._init = function( aRawData ) {\n var self = this;\n this._aRawData = aRawData;\n this._oHash = {};\n this._aRawData.forEach(function( o ) {\n self._oHash[self.makeID(o)] = o;\n });\n };\n ts.EventData.prototype.makeID = function( oEvent ) {\n return oEvent.eventTypeCode + \"-\" + oEvent.eventTimestamp;\n };\n ts.EventData.prototype.count = function() {\n return this._aRawData.length;\n };\n ts.EventData.prototype.getDataByIndex = function( index ) {\n return this._aRawData[index];\n };\n ts.EventData.prototype.getDataByKey = function( key ) {\n return this._oHash[key];\n };\n ts.EventData.prototype.emptyData = function() {\n this._aRawData = [];\n this._oHash = {};\n };\n ts.EventData.prototype.addData = function( aNewData ) {\n if ( aNewData.length === 0 ) return;\n\n var i, j;\n var beforeBoundary = this._getBeforeDataBoundary( aNewData );\n for ( i = beforeBoundary ; i >= 0 ; i-- ) {\n this._aRawData.unshift( aNewData[i] );\n this._oHash[this.makeID(aNewData[i])] = aNewData[i];\n }\n\n var afterBoundary = this._getAfterDataBoundary( aNewData, beforeBoundary );\n for ( i = afterBoundary ; i < aNewData.length ; i++ ) {\n this._aRawData.push( aNewData[i] );\n this._oHash[this.makeID(aNewData[i])] = aNewData[i];\n }\n\n beforeBoundary = beforeBoundary === -1 ? 0 : beforeBoundary + 1;\n afterBoundary = afterBoundary === Number.MAX_SAFE_INTEGER ? aNewData.length - 1 : afterBoundary - 1;\n\n var skip = beforeBoundary;\n if ( afterBoundary > beforeBoundary ) {\n for( i = beforeBoundary ; i < this._aRawData.length ; i++ ) {\n var rawTimestamp = this._aRawData[i].eventTimestamp;\n for( j = skip; j < aNewData.length ; j++ ) {\n var oNewEventData = aNewData[j];\n if ( oNewEventData.eventTimestamp < rawTimestamp ) {\n this._aRawData.splice( i, 0, oNewEventData );\n this._oHash[this.makeID(oNewEventData)] = oNewEventData;\n i++;\n skip = j + 1;\n } else if ( oNewEventData.eventTimestamp === rawTimestamp ) {\n skip = j + 1;\n break;\n }\n }\n if ( skip === aNewData.length ) break;\n }\n }\n };\n ts.EventData.prototype._getBeforeDataBoundary = function( aNewData ) {\n var boundary = -1;\n if ( this._aRawData.length === 0 ) {\n boundary = aNewData.length - 1;\n } else {\n var startTime = this._aRawData[0].eventTimestamp;\n var len = aNewData.length;\n for ( var i = 0 ; i < len ; i++ ) {\n var time = aNewData[i].eventTimestamp;\n if ( time < startTime ) {\n boundary = i;\n } else {\n break;\n }\n }\n }\n return boundary;\n };\n ts.EventData.prototype._getAfterDataBoundary = function( aNewData, skipIndex ) {\n var boundary = Number.MAX_SAFE_INTEGER;\n var startIndex = skipIndex + 1;\n var len = aNewData.length;\n if ( len > startIndex ) {\n var endTime = this._aRawData[this._aRawData.length - 1].eventTimestamp;\n for ( var i = startIndex ; i < len ; i++ ) {\n var time = aNewData[i].eventTimestamp;\n if ( time > endTime ) {\n boundary = i;\n break;\n }\n }\n }\n return boundary;\n };\n\n})(window, jQuery);\n","(function(w, $) {\n var ts = w.TimeSlider;\n ts.Background = function( timeSlider, svgGroup, options ) {\n this.timeSlider = timeSlider;\n this.opt = options;\n this.group = svgGroup;\n this._addElements();\n };\n ts.Background.prototype._addElements = function() {\n this.rect = this.timeSlider.snap.rect(this.opt.left, this.opt.top, this.opt.width, this.opt.height);\n this.group.add(this.rect);\n };\n ts.Background.prototype.reset = function() {\n this.rect.animate({\n \"width\": this.timeSlider.oPositionManager.getSliderEndPosition()\n }, this.opt.duration, mina.easein);\n };\n})(window, jQuery);\n","(function(w, $) {\n var ts = w.TimeSlider;\n ts.SelectionManager = function( timeSlider, options ) {\n this.timeSlider = timeSlider;\n this.opt = options;\n this.initClass();\n };\n ts.SelectionManager.prototype.initClass = function() {\n var self = this;\n var aHandlerPosition = this.timeSlider.oPositionManager.getSelectionPosition();\n this.oSelectionZone = new TimeSlider.SelectionZone( this.timeSlider, this.timeSlider.getGroup(\"selection-zone\", TimeSlider.GROUP_TYPE.CONTENT_BASE, TimeSlider.oDrawOrder[\"selection-zone\"]), {\n \"top\": 0,\n \"left\": aHandlerPosition[0],\n \"width\": aHandlerPosition[1] - aHandlerPosition[0],\n \"height\": this.opt.contentZoneHeight,\n \"duration\": 50//this.opt.duration\n });\n this.oSelectionPoint = new TimeSlider.SelectionPoint( this.timeSlider, this.timeSlider.getGroup(\"selection-point\", TimeSlider.GROUP_TYPE.CONTENT_BASE, TimeSlider.oDrawOrder[\"selection-point\"]), {\n \"y\": this.opt.headerZoneHeight,\n \"x\": this.timeSlider.oPositionManager.getSelectPosition(),\n \"radius\": this.opt.selectionPointRadius,\n \"height\": this.opt.contentZoneHeight,\n \"duration\": this.opt.duration,\n \"eventStartY\": this.opt.headerZoneHeight,\n \"eventEndY\": this.opt.height - this.opt.eventZoneHeight\n });\n this.oLeftHandler = new TimeSlider.Handler( this.timeSlider, this.timeSlider.getGroup(\"left-handler\", TimeSlider.GROUP_TYPE.CONTENT_BASE, TimeSlider.oDrawOrder[\"left-handler\"]), {\n \"x\": aHandlerPosition[0],\n \"zone\": [0, aHandlerPosition[1]],\n \"height\": this.opt.contentZoneHeight,\n \"margin\": this.opt.margin,\n \"duration\": 50,//this.opt.duration\n \"handleSrc\": this.opt.handleSrc\n }, function( x ) {\n self.oLeftTimeSignboard.onDragStart( x );\n }, function( x ) {\n self.oLeftTimeSignboard.onDrag( x );\n }, function( bIsDraged, x ) {\n self.oLeftTimeSignboard.onDragEnd();\n if ( bIsDraged ) {\n self.moveLeftHandler( x );\n }\n });\n this.oRightHandler = new TimeSlider.Handler( this.timeSlider, this.timeSlider.getGroup(\"right-handler\", TimeSlider.GROUP_TYPE.CONTENT_BASE, TimeSlider.oDrawOrder[\"right-handler\"]), {\n \"x\": aHandlerPosition[1],\n \"zone\": [ aHandlerPosition[0], this.timeSlider.oPositionManager.getSliderEndPosition() ],\n \"height\": this.opt.contentZoneHeight,\n \"margin\": this.opt.margin,\n \"duration\": 0,//this.opt.duration\n \"handleSrc\": this.opt.handleSrc\n }, function( x ) {\n self.oRightTimeSignboard.onDragStart( x );\n }, function( x ) {\n self.oRightTimeSignboard.onDrag( x );\n }, function( bIsDraged, x ) {\n self.oRightTimeSignboard.onDragEnd();\n if ( bIsDraged ) {\n self.moveRightHandler( x );\n }\n });\n this.oLeftTimeSignboard = new TimeSlider.TimeSignboard( this.timeSlider, this.timeSlider.getGroup(\"time-left-signboard\", TimeSlider.GROUP_TYPE.CONTENT_BASE, TimeSlider.oDrawOrder[\"time-signboard\"]), {\n \"x\": aHandlerPosition[0],\n \"direction\": \"left\"\n });\n this.oRightTimeSignboard = new TimeSlider.TimeSignboard( this.timeSlider, this.timeSlider.getGroup(\"time-right-signboard\", TimeSlider.GROUP_TYPE.CONTENT_BASE, TimeSlider.oDrawOrder[\"time-signboard\"]), {\n \"x\": aHandlerPosition[1],\n \"direction\": \"right\"\n });\n };\n ts.SelectionManager.prototype.moveLeftHandler = function( x ) {\n var aCurrentSelectionTimeSeries = this.timeSlider.oPositionManager.getSelectionTimeSeries();\n var newLeftTime = this.timeSlider.oPositionManager.getTimeFromPosition( x );\n if ( this.timeSlider.oPositionManager.isInMaxSelectionTimeSeries( newLeftTime, aCurrentSelectionTimeSeries[1] ) ) {\n this.oRightHandler.setZone( x, this.timeSlider.oPositionManager.getSliderEndPosition() );\n this.timeSlider.oPositionManager.setSelectionStartPosition( x );\n } else {\n var aNewSelectionTimeSeries = this.timeSlider.oPositionManager.getNewSelectionTimeSeriesFromStart( newLeftTime );\n var newRightX = this.timeSlider.oPositionManager.getPositionFromTime( aNewSelectionTimeSeries[1] );\n this.oRightHandler.setZone( x, this.timeSlider.oPositionManager.getSliderEndPosition() );\n this.timeSlider.oPositionManager.setSelectionStartPosition( x );\n this.oRightHandler.setX( newRightX );\n this.oRightTimeSignboard.onDrag( newRightX );\n this.oLeftHandler.setZone( 0, newRightX );\n this.timeSlider.oPositionManager.setSelectionEndPosition( newRightX );\n\n if ( this.timeSlider.oPositionManager.isInSelectionZoneSelectPoint() === false ) {\n this.oSelectionPoint.onMouseClick( newRightX );\n this.timeSlider.fireEvent( \"selectTime\", aNewSelectionTimeSeries[1] );\n }\n }\n this.oSelectionZone.redraw();\n this._fireChangeZoneEvent();\n\n };\n ts.SelectionManager.prototype.moveRightHandler = function( x ) {\n var aCurrentSelectionTimeSeries = this.timeSlider.oPositionManager.getSelectionTimeSeries();\n var newRightTime = this.timeSlider.oPositionManager.getTimeFromPosition( x );\n if ( this.timeSlider.oPositionManager.isInMaxSelectionTimeSeries( aCurrentSelectionTimeSeries[0], newRightTime ) ) {\n this.oLeftHandler.setZone( 0, x );\n this.timeSlider.oPositionManager.setSelectionEndPosition( x );\n } else {\n var aNewSelectionTimeSeries = this.timeSlider.oPositionManager.getNewSelectionTimeSeriesFromEnd( newRightTime );\n var newLeftX = this.timeSlider.oPositionManager.getPositionFromTime( aNewSelectionTimeSeries[0] );\n this.oLeftHandler.setZone( 0, x );\n this.timeSlider.oPositionManager.setSelectionEndPosition( x );\n this.oLeftHandler.setX( newLeftX );\n this.oLeftTimeSignboard.onDrag( newLeftX );\n this.oRightHandler.setZone( newLeftX, this.timeSlider.oPositionManager.getSliderEndPosition() );\n this.timeSlider.oPositionManager.setSelectionStartPosition( newLeftX );\n\n if ( this.timeSlider.oPositionManager.isInSelectionZoneSelectPoint() === false ) {\n this.oSelectionPoint.onMouseClick( newLeftX );\n this.timeSlider.fireEvent( \"selectTime\", aNewSelectionTimeSeries[0] );\n }\n }\n this.oSelectionZone.redraw();\n this._fireChangeZoneEvent();\n };\n ts.SelectionManager.prototype.moveSelectionAndHandler = function( x ) {\n var aNewSelectionZone = this.timeSlider.oPositionManager.getSelectionPosition();\n this.oLeftHandler.setPositionAndZone( aNewSelectionZone[0], [0, aNewSelectionZone[1] ] );\n this.oRightHandler.setPositionAndZone( aNewSelectionZone[1], [ aNewSelectionZone[0], this.timeSlider.oPositionManager.getSliderEndPosition() ] );\n this.oSelectionZone.redraw();\n this._fireChangeZoneEvent();\n };\n ts.SelectionManager.prototype.onMouseClick = function( event, x, y ) {\n if ( y > this.opt.headerZoneHeight && y < (this.opt.headerZoneHeight + this.opt.contentZoneHeight ) ) {\n this._setSelectTime( x );\n }\n };\n ts.SelectionManager.prototype._fireChangeZoneEvent = function() {\n var aNewSelectionZone = this.timeSlider.oPositionManager.getSelectionPosition();\n this.timeSlider.fireEvent( \"changeSelectionZone\", [ this.timeSlider.oPositionManager.getTimeFromPosition(aNewSelectionZone[0]), this.timeSlider.oPositionManager.getTimeFromPosition(aNewSelectionZone[1]) ] );\n };\n ts.SelectionManager.prototype.setSelectTime = function( time ) {\n var x = this.timeSlider.oPositionManager.getPositionFromTime( time );\n if ( this.timeSlider.oPositionManager.isInSliderTimeSeries( time ) ) {\n this._setSelectTime( time );\n } else {\n this.timeSlider.oPositionManager.resetBySelectTime( time );\n this.timeSlider.reset();\n this.timeSlider.fireEvent( \"selectTime\", time );\n }\n };\n ts.SelectionManager.prototype._setSelectTime = function( time ) {\n this.timeSlider.oPositionManager.setSelectTime( time );\n if ( this.timeSlider.oPositionManager.isInSelectionZone( this.timeSlider.oPositionManager.getSelectionPosition() ) === false ) {\n this.timeSlider.oPositionManager.calcuSelectionZone();\n this.moveSelectionAndHandler();\n }\n this.oSelectionPoint.onMouseClick( this.timeSlider.oPositionManager.getSelectionPosition() );\n this.timeSlider.fireEvent( \"selectTime\", time );\n };\n ts.SelectionManager.prototype.reset = function() {\n var aNewSelectionZone = this.timeSlider.oPositionManager.getSelectionPosition();\n this.oLeftHandler.setPositionAndZone( aNewSelectionZone[0], [0, aNewSelectionZone[1] ] );\n this.oRightHandler.setPositionAndZone( aNewSelectionZone[1], [ aNewSelectionZone[0], this.timeSlider.oPositionManager.getSliderEndPosition() ] );\n this.oSelectionZone.redraw();\n this.oSelectionPoint.onMouseClick( this.timeSlider.oPositionManager.getSelectPosition() );\n };\n})(window, jQuery);\n","(function(w, $) {\n var consts = {\n xAxisTicks: 5\n };\n var ts = w.TimeSlider;\n ts.PositionManager = function( options ) {\n this._width = options.width;\n this._minSliderTimeSeries = options.minSliderTimeSeries;\n this._maxSelectionTimeSeries = options.maxSelectionTimeSeries;\n\n this._initInnerVar();\n this._setSliderTimeSeries( options.sliderTimeSeries[0], options.sliderTimeSeries[1] );\n this._initSelectionTimeSeries( options.handleTimeSeries || [] );\n this._resetSelectionByTime();\n this._xAxisTicks = options.xAxisTicks || consts.xAxisTicks;\n this.setSelectTime( options.selectTime );\n };\n ts.PositionManager.prototype._initInnerVar = function() {\n this._aSelectionTimeSeries = [];\n this._aSelectionPosition = [];\n };\n ts.PositionManager.prototype._setSliderTimeSeries = function( start, end ) {\n this._startTime = start;\n this._endTime = end;\n this._calcuTimePerPoint();\n };\n ts.PositionManager.prototype._initSelectionTimeSeries = function( aTime ) {\n if ( aTime.length != 2 ) {\n aTime = [ this._startTime, this._endTime ]; // TODO ??\n }\n if ( aTime[1] - aTime[0] > this._maxSelectionTimeSeries ) {\n aTime[0] = aTime[1] - this._maxSelectionTimeSeries;\n }\n this._setSelectionTimeSeries( aTime[0], aTime[1] );\n };\n ts.PositionManager.prototype._resetSelectionByPosition = function() {\n this._setSelectionTimeSeries( this.getTimeFromPosition( this._aSelectionPosition[0] ), this.getTimeFromPosition( this._aSelectionPosition[1] ) );\n };\n ts.PositionManager.prototype._setSelectionTimeSeries = function( start, end ) {\n this._aSelectionTimeSeries[0] = start === null ? this._aSelectionTimeSeries[0] : start;\n this._aSelectionTimeSeries[1] = end === null ? this._aSelectionTimeSeries[1] : end;\n };\n ts.PositionManager.prototype._resetSelectionByTime = function() {\n this._setSelectionPosition( this.getPositionFromTime( this._aSelectionTimeSeries[0] ), this.getPositionFromTime( this._aSelectionTimeSeries[1] ) );\n };\n ts.PositionManager.prototype._setSelectionPosition = function( start, end ) {\n this._aSelectionPosition[0] = start === null ? this._aSelectionPosition[0] : start;\n this._aSelectionPosition[1] = end === null ? this._aSelectionPosition[1] : end;\n };\n\n\n ts.PositionManager.prototype.isInMaxSelectionTimeSeries = function( start, end ) {\n return ( end - start ) <= this._maxSelectionTimeSeries;\n };\n ts.PositionManager.prototype.getNewSelectionTimeSeriesFromStart = function( start ) {\n return [ start, start + this._maxSelectionTimeSeries ];\n };\n ts.PositionManager.prototype.getNewSelectionTimeSeriesFromEnd = function( end ) {\n return [ end - this._maxSelectionTimeSeries, end ];\n };\n ts.PositionManager.prototype.isBeforeSliderStartTime = function( time ) {\n return time < this._startTime;\n };\n ts.PositionManager.prototype.isAfterSliderEndTime = function( time ) {\n return time > this._endTime;\n };\n ts.PositionManager.prototype.getSliderEndTime = function() {\n return this._endTime;\n };\n ts.PositionManager.prototype.setWidth = function( width ) {\n this._width = width;\n this._calcuTimePerPoint();\n this._reset();\n };\n ts.PositionManager.prototype.getSliderEndPosition = function() {\n return this._width;\n };\n ts.PositionManager.prototype.getSliderStartTimeStr = function() {\n return this._formatDate( new Date(this._startTime) );\n };\n ts.PositionManager.prototype.getSliderEndTimeStr = function() {\n return this._formatDate( new Date(this._endTime) );\n };\n ts.PositionManager.prototype.getFullTimeStr = function( x ) {\n return this._formatDate( new Date(this.getTimeFromPosition(x)) );\n };\n ts.PositionManager.prototype._formatDate = function( d ) {\n return d.getFullYear() +\".\" + this._twoChipers( d.getMonth() + 1 ) + \".\" + this._twoChipers( d.getDate() ) + \" \" + this._twoChipers( d.getHours() ) + \":\" + this._twoChipers( d.getMinutes() ) + \":\" + this._twoChipers( d.getSeconds() );\n };\n ts.PositionManager.prototype._twoChipers = function( n ) {\n return n < 10 ? \"0\" + n : n;\n };\n ts.PositionManager.prototype.isInSelectionZone = function( x ) {\n return ( x >= this._aSelectionPosition[0] && x <= this._aSelectionPosition[1] ) ? true : false;\n };\n ts.PositionManager.prototype.isInSliderTimeSeries = function( time ) {\n return ( time >= this._startTime && time <= this._endTime ) ? true : false;\n };\n ts.PositionManager.prototype.getSliderTimeSeries = function() {\n return [ this._startTime, this._endTime ];\n };\n ts.PositionManager.prototype.getSelectionTimeSeries = function() {\n return [ this._aSelectionTimeSeries[0], this._aSelectionTimeSeries[1] ];\n };\n ts.PositionManager.prototype.getSelectionPosition = function() {\n return [ this._aSelectionPosition[0], this._aSelectionPosition[1] ];\n };\n ts.PositionManager.prototype.isInSelectionZoneSelectPoint = function() {\n if ( this._selectPosition >= this._aSelectionPosition[0] && this._selectPosition <= this._aSelectionPosition[1] ) {\n return true;\n } else {\n return false;\n }\n };\n ts.PositionManager.prototype.getSelectPosition = function() {\n return this._selectPosition;\n };\n ts.PositionManager.prototype.setSelectTime = function( time ) {\n this._selectTime = time;\n this._selectPosition = this.getPositionFromTime( time );\n };\n ts.PositionManager.prototype.setSelectPosition = function( x ) {\n this._selectPosition = x;\n this._selectTime = this.getTimeFromPosition( x );\n };\n ts.PositionManager.prototype.getTimeFromPosition = function( x ) {\n return this._startTime + ( this._timePerPoint * x );\n };\n ts.PositionManager.prototype.getPositionFromTime = function( time ) {\n return parseInt( ( time - this._startTime ) / this._timePerPoint );\n };\n ts.PositionManager.prototype.calcuSelectionZone = function() {\n var defaultZone = parseInt((this._aSelectionPosition[1] - this._aSelectionPosition[0]) / 2);\n var zoneStart = this._selectPosition - defaultZone;\n var zoneEnd = this._selectPosition + defaultZone;\n if ( zoneStart < 0 ) {\n zoneEnd += Math.abs( zoneStart );\n zoneStart = 0;\n } else if ( zoneEnd > this._width ) {\n zoneStart -= ( zoneEnd - this._width );\n zoneEnd = this._width;\n }\n this._setSelectionTimeSeries( this.getTimeFromPosition( zoneStart ), this.getTimeFromPosition( zoneEnd ) );\n this._setSelectionPosition( zoneStart, zoneEnd );\n };\n ts.PositionManager.prototype.getXBarPosition = function() {\n var self = this;\n var max = this._xAxisTicks + 1;\n var space = parseInt( this._width / max );\n var a = [];\n for( var i = 0 ; i < max ; i++ ) {\n if ( i === 0 ) continue;\n var x = i * space;\n a.push( {\n x: x,\n time: self.getTimeStr( x )\n });\n }\n return a;\n };\n ts.PositionManager.prototype.getTimeStr = function( x ) {\n var timeX = ( x * this._timePerPoint ) + this._startTime;\n var d = new Date( timeX );\n return this._twoChipers(d.getMonth() + 1) + \".\" + this._twoChipers(d.getDate()) + \" \" + this._twoChipers( d.getHours() ) + \":\" + this._twoChipers( d.getMinutes() );\n };\n ts.PositionManager.prototype.setSelectionStartPosition = function( x ) {\n this._setSelectionTimeSeries( this.getTimeFromPosition(x), null );\n this._setSelectionPosition( x, null );\n };\n ts.PositionManager.prototype.setSelectionEndPosition = function( x ) {\n this._setSelectionTimeSeries( null, this.getTimeFromPosition(x) );\n this._setSelectionPosition( null, x );\n };\n ts.PositionManager.prototype.zoomIn = function() {\n // 선택 영역 중심으로 확대\n if( this._startTime === this._aSelectionTimeSeries[0] && this._endTime === this._aSelectionTimeSeries[1] ) return;\n var quarterSliderTime = parseInt( (this._endTime - this._startTime) / 4 );\n var tempStartTime = this._selectTime - quarterSliderTime;\n var tempEndTime = this._selectTime + quarterSliderTime;\n\n if ( tempEndTime - tempStartTime < this._minSliderTimeSeries ) {\n var minHalf = parseInt( this.minSliderTimeSeris / 2 );\n tempStartTime = this._selectTime - minHalf;\n tempEndTime = this._selectTime + minHalf;\n }\n var gap;\n if ( this._aSelectionTimeSeries[0] < tempStartTime ) {\n gap = tempStartTime - this._aSelectionTimeSeries[0];\n var tempSelectionEndTime = (this._aSelectionTimeSeries[1] + gap > tempEndTime) ? tempEndTime : this._aSelectionTimeSeries[1] + gap;\n this._setSelectionTimeSeries( tempStartTime, tempSelectionEndTime );\n }\n if ( this._aSelectionTimeSeries[1] > tempEndTime ) {\n gap = this._aSelectionTimeSeries[1] - tempEndTime;\n var tempSelectionStartTime = ( this._aSelectionTimeSeries[0] - gap < tempStartTime ) ? tempStartTime : this._aSelectionTimeSeries[0] - gap;\n this._setSelectionTimeSeries( tempSelectionStartTime, tempEndTime );\n }\n this._setSliderTimeSeries( tempStartTime, tempEndTime );\n this._reset();\n };\n ts.PositionManager.prototype.zoomOut = function() {\n var one = this._endTime - this._startTime;\n var tempCenterTime = this._aSelectionTimeSeries[0] + ( this._aSelectionTimeSeries[1] - this._aSelectionTimeSeries[0] ) / 2;\n this._setSliderTimeSeries( tempCenterTime - one, tempCenterTime + one );\n this._reset();\n };\n ts.PositionManager.prototype.resetBySelectTime = function( time ) {\n time = parseInt( time );\n var halfSliderTimeSeries = parseInt( ( this._endTime - this._startTime ) / 2 );\n var halfSelectionTimeSeries = parseInt( ( this._aSelectionTimeSeries[1] - this._aSelectionTimeSeries[0] ) / 2 );\n this._setSliderTimeSeries( time - halfSliderTimeSeries, time + halfSliderTimeSeries );\n this._setSelectionTimeSeries( time - halfSelectionTimeSeries, time + halfSelectionTimeSeries );\n this._resetSelectionByTime();\n this.setSelectTime( time );\n };\n ts.PositionManager.prototype._reset = function() {\n this.setSelectTime( this._selectTime );\n this._resetSelectionByTime();\n };\n ts.PositionManager.prototype._calcuTimePerPoint = function() {\n this._timePerPoint = parseInt( ( this._endTime - this._startTime ) / this._width );\n };\n})(window, jQuery);\n","(function(w, $) {\n var ts = w.TimeSlider;\n ts.SelectionZone = function( timeSlider, svgGroup, options ) {\n this.timeSlider = timeSlider;\n this.group = svgGroup;\n this.opt = options;\n this._addElements();\n };\n ts.SelectionZone.prototype._addElements = function() {\n var aSelectionZone = this.timeSlider.oPositionManager.getSelectionPosition();\n this.elZone = this.timeSlider.snap.rect(aSelectionZone[0], this.opt.top, aSelectionZone[1] - aSelectionZone[0], this.opt.height);\n this.group.add(this.elZone);\n };\n ts.SelectionZone.prototype.redraw = function() {\n var aSelectionZone = this.timeSlider.oPositionManager.getSelectionPosition();\n this.elZone.animate({\n \"x\": aSelectionZone[0],\n \"width\": aSelectionZone[1] - aSelectionZone[0]\n }, this.opt.duration);\n };\n})(window, jQuery);\n","(function(w, $) {\n w.TimeSlider.XAxis = function( timeSlider, svgGroup, options ) {\n this.timeSlider = timeSlider;\n this.group = svgGroup;\n this.opt = options;\n this.aSubGroup = [];\n this.aText = [];\n this.init();\n };\n w.TimeSlider.XAxis.prototype.init = function() {\n var aXBarPosition = this.timeSlider.oPositionManager.getXBarPosition();\n var halfX = this.opt.width / 2;\n var self = this;\n for( var i = 0 ; i < aXBarPosition.length ; i++ ) {\n var g = self.group.g();\n self.aText.push( self.timeSlider.snap.text(0, self.opt.textY, aXBarPosition[i].time) );\n g.attr(\"transform\", \"translate(\" + halfX + \", 0)\");\n g.add(\n self.aText[i],\n self.timeSlider.snap.line(0, self.opt.startY, 0, self.opt.endY)\n );\n self.group.add( g );\n self.aSubGroup.push( g );\n self.setX( i, aXBarPosition[i].x, halfX );\n }\n };\n w.TimeSlider.XAxis.prototype.setX = function( index, x, startX ) {\n var ele = this.aSubGroup[index];\n if ( arguments.length === 3 ) {\n Snap.animate( startX, x, function( val ) {\n ele.attr(\"transform\", \"translate(\" + val + \", 0)\");\n }, this.opt.duration);\n } else {\n ele.attr(\"transform\", \"translate(\" + x + \", 0)\");\n }\n };\n w.TimeSlider.XAxis.prototype.reset = function() {\n var self = this;\n var aYBarPosition = this.timeSlider.oPositionManager.getXBarPosition();\n var halfX = this.opt.width / 2;\n for ( var i = 0 ; i < aYBarPosition.length ; i++ ) {\n self.aSubGroup[i].attr( \"transform\", \"translate(\" + aYBarPosition[i].x + \",0)\");\n self.aText[i].attr(\"text\", aYBarPosition[i].time );\n }\n };\n})(window, jQuery);\n","(function(w, $) {\n var consts = {\n AGENT_CONNECT: 10100,\n AGENT_SHUTDOWN: 10200,\n ID_POSTFIX: \"+state-line\",\n ID_SPLITER: \"+\"\n };\n var ts = w.TimeSlider;\n ts.StateLine = function( timeSlider, svgGroup, options ) {\n this.timeSlider = timeSlider;\n this.group = svgGroup;\n this.opt = options;\n this._oEventData = timeSlider.oEventData;\n\n this._init();\n this._addBaseLine();\n this._addEventElements();\n this._resetBaseLineColor();\n };\n ts.StateLine.prototype._init = function() {\n this._hasDurationData = false;\n this._filterShadow = this.timeSlider.snap.filter( Snap.filter.shadow(0, 1, 0.5, \"#000\", 0.2));\n this._oLineElementHash = {};\n };\n ts.StateLine.prototype._addBaseLine = function() {\n this._baseColor = TimeSlider.EventColor[\"base\"];\n this._aBaseLine = [ this._makeLine( 0, this.opt.width, this.opt.topLineY, \"base\", \"base-\" + Date.now() ), this._makeLine( 0, this.opt.width, this.opt.bottomLineY, \"base\", \"base-\" + Date.now() ) ];\n this.group.add( this._aBaseLine[0], this._aBaseLine[1] );\n };\n ts.StateLine.prototype._addEventElements = function( ) {\n var len = this._oEventData.count();\n for( var i = 0 ; i < len ; i++ ) {\n this._addEventElement( this._oEventData.getDataByIndex(i) );\n }\n };\n ts.StateLine.prototype._addEventElement = function( oEvent ) {\n if ( typeof oEvent.durationStartTimestamp !== \"undefined\" ) {\n if ( this.timeSlider.oPositionManager.isInSliderTimeSeries( oEvent.durationStartTimestamp ) === false && this.timeSlider.oPositionManager.isInSliderTimeSeries( oEvent.durationEndTimestamp ) === false ) return;\n this._hasDurationData = true;\n this._addLine(\n this.timeSlider.oPositionManager.getPositionFromTime( oEvent.durationStartTimestamp ),\n this._getX2( oEvent ),\n oEvent\n );\n }\n };\n ts.StateLine.prototype._makeID = function( oEvent ) {\n return this._oEventData.makeID( oEvent ) + consts.ID_POSTFIX;\n };\n ts.StateLine.prototype._addLine = function( x, x2, oEvent ) {\n var lineID = this._makeID( oEvent );\n var elLineTop = this._makeLine( x, x2, this.opt.topLineY, oEvent.eventTypeCode, lineID );\n var elLineBottom = this._makeLine( x, x2, this.opt.bottomLineY, oEvent.eventTypeCode, lineID );\n this._oLineElementHash[lineID] = [ elLineTop, elLineBottom ];\n this.group.add( elLineTop, elLineBottom );\n };\n ts.StateLine.prototype._makeLine = function( x, x2, y, eventType, id ) {\n return this.timeSlider.snap.line( x, y, x2, y ).attr({\n //\"filter\": this._filterShadow,\n \"stroke\": TimeSlider.EventColor[eventType],\n \"data-id\": id,\n \"strokeWidth\": this.opt.thickness\n });\n };\n ts.StateLine.prototype._hasEventData = function( id ) {\n return typeof this._oLineElementHash[id] === \"undefined\" ? false : true;\n };\n ts.StateLine.prototype._getX2 = function( oEvent ) {\n return this.timeSlider.oPositionManager.getPositionFromTime( oEvent.durationEndTimestamp == -1 ? this.timeSlider.oPositionManager.getSliderEndTime() : oEvent.durationEndTimestamp );\n };\n ts.StateLine.prototype.changeData = function() {\n var len = this._oEventData.count();\n for( var i = 0 ; i < len ; i++ ) {\n var oEvent = this._oEventData.getDataByIndex(i);\n if ( this._hasEventData( this._makeID( oEvent ) ) === false ) {\n this._addEventElement( oEvent );\n }\n }\n this.reset();\n };\n ts.StateLine.prototype.emptyData = function() {\n for( var p in this._oLineElementHash ) {\n var aLine = this._oLineElementHash[p];\n aLine[0].remove();\n aLine[1].remove();\n }\n this._oLineElementHash = {};\n };\n ts.StateLine.prototype.setDefaultStateLineColor = function( color ) {\n this._baseColor = color;\n if ( this._hasDurationData === true ) return;\n this._aBaseLine.forEach(function( elLine ) {\n elLine.attr(\"stroke\", color);\n });\n };\n ts.StateLine.prototype._resetBaseLineColor = function() {\n var self = this;\n this._aBaseLine.forEach(function( elLine ) {\n elLine.attr(\"stroke\", this._hasDurationData === true ? TimeSlider.EventColor[\"base\"] : self._baseColor );\n });\n };\n ts.StateLine.prototype.reset = function() {\n var self = this;\n var oPM = this.timeSlider.oPositionManager;\n for( var p in this._oLineElementHash ) {\n var aLine = this._oLineElementHash[p];\n var oEvent = this._oEventData.getDataByKey(p.split(consts.ID_SPLITER)[0]);\n if ( oPM.isInSliderTimeSeries( oEvent.durationStartTimestamp ) || oPM.isInSliderTimeSeries( oEvent.durationEndTimestamp ) ) {\n aLine.forEach(function( elLine ) {\n self.show( elLine );\n elLine.animate({\n \"x1\": oPM.getPositionFromTime( oEvent.durationStartTimestamp ),\n \"x2\": self._getX2( oEvent )\n }, self.opt.duration);\n });\n } else {\n aLine.forEach(function( elLine ) {\n self.hide( elLine );\n });\n }\n }\n this._aBaseLine.forEach(function( elBase ) {\n elBase.animate({\n \"x2\": oPM.getSliderEndPosition()\n }, self.opt.duration);\n });\n this._resetBaseLineColor();\n };\n ts.StateLine.prototype.show = function( el ) {\n el.attr(\"display\", \"block\");\n };\n ts.StateLine.prototype.hide = function( el ) {\n el.attr(\"display\", \"none\");\n };\n})(window, jQuery);\n","(function(w, $) {\n var consts = {\n HANDLER_IMAGE_WIDTH: 30,\n HANDLER_IMAGE_HEIGHT: 18\n };\n var ts = w.TimeSlider;\n ts.Handler = function( timeSlider, svgGroup, options, callbackStart, callbackDrag, callbackEnd ) {\n this.timeSlider = timeSlider;\n this.group = svgGroup;\n this.opt = options;\n this._previousX = options.x;\n this._handleSrc = options.handleSrc || consts.NORMAL_IMG;\n this._handleDownSrc = this._getHandleDownSrc();\n this.callbackStart = callbackStart;\n this.callbackDrag = callbackDrag;\n this.callbackEnd = callbackEnd;\n this._addElements();\n this.setX( options.x );\n this.addEvent();\n };\n ts.Handler.prototype._getHandleDownSrc = function() {\n var lastIndex = this._handleSrc.lastIndexOf( \".\" );\n return this._handleSrc.substring( 0 , lastIndex ) + \"_down\" + this._handleSrc.substring( lastIndex );\n };\n ts.Handler.prototype._addElements = function() {\n this.handlerGrip = this.timeSlider.snap.image( this._handleSrc, -(consts.HANDLER_IMAGE_WIDTH / 2), -(consts.HANDLER_IMAGE_HEIGHT / 2), consts.HANDLER_IMAGE_WIDTH, consts.HANDLER_IMAGE_HEIGHT );\n this.handlerGroup = this.group.g();\n this.handlerGroup.add(\n this.timeSlider.snap.line( 0, 0, 0, this.opt.height ),\n this.handlerGrip\n );\n };\n ts.Handler.prototype.addEvent = function( callback ) {\n var self = this;\n var lastX = -1;\n // onmove, onstart, onend\n this.handlerGrip.mousedown(function(event, x, y) {\n event.stopPropagation();\n });\n this.handlerGrip.click(function(event, x, y) {\n event.stopPropagation();\n });\n this.handlerGrip.drag(function(dx, dy, x, y, event) {\n var newX = x - self.opt.margin;\n if ( self._isInRestirctionZone( newX ) === false ) return;\n self.handlerGroup.attr({ transform: \"translate(\" + newX + \", 0)\" });\n lastX = newX;\n self.callbackDrag( newX );\n }, function(x, y, event) {\n event.stopPropagation();\n self.handlerGrip.attr( \"href\", self._handleDownSrc );\n self.callbackStart( x - self.opt.margin );\n }, function(event) {\n event.stopPropagation();\n self.handlerGrip.attr( \"href\", self._handleSrc );\n if ( self._previousX !== lastX && lastX !== -1 ) {\n self.callbackEnd( true, lastX );\n self._previousX = lastX;\n } else {\n self.callbackEnd( false );\n }\n });\n };\n ts.Handler.prototype.setX = function( x ) {\n this.handlerGroup.animate({\n \"transform\": \"translate(\" + x + \", 0)\"\n }, this.opt.duration, mina.easeout);\n };\n ts.Handler.prototype._isInRestirctionZone = function( x ) {\n return ( x <= this.opt.zone[0] || x >= this.opt.zone[1] ) ? false : true;\n };\n ts.Handler.prototype.setZone = function( start, end ) {\n this.opt.zone = [start, end];\n };\n ts.Handler.prototype.setPositionAndZone = function( x, aZone ) {\n this.setX( x );\n this.callbackDrag( x );\n this.setZone( aZone[0], aZone[1] );\n };\n\n})(window, jQuery);\n","(function(w, $) {\n var ts = w.TimeSlider;\n ts.SelectionPoint = function( timeSlider, svgGroup, options ) {\n this.timeSlider = timeSlider;\n this.group = svgGroup;\n this.opt = options;\n this._addElements();\n this.onMouseClick( options.x );\n };\n ts.SelectionPoint.prototype._addElements = function() {\n this.group.add(\n this.timeSlider.snap.line( 0, 0, 0, this.opt.height ),\n this.timeSlider.snap.circle( 0, this.opt.height / 2, this.opt.radius ).attr({\n filter: this.timeSlider.snap.filter( Snap.filter.shadow(0, 0, 2, \"#000\", 0.3))\n })\n );\n };\n ts.SelectionPoint.prototype.onMouseClick = function( x ) {\n this.group.animate({\n \"transform\": \"translate(\" + x +\", \" + this.opt.y + \")\"\n }, this.opt.duration, mina.easein);\n };\n})(window, jQuery);\n","(function(w, $) {\n var consts = {\n ID_POSTFIX: \"+event-circle\",\n ID_SPLITER: \"+\"\n };\n var ts = w.TimeSlider;\n ts.Events = function( timeSlider, svgGroup, options ) {\n this.timeSlider = timeSlider;\n this.group = svgGroup;\n this._oEventData = timeSlider.oEventData;\n\n this._init(options);\n this._addEventElements();\n this._addEvents();\n };\n ts.Events.prototype._init = function( options ) {\n this._oEventGroupElementHash = {};\n this.opt = {\n \"y\": 4,\n \"barLength\": 4,\n \"gapBarNCircle\": 2,\n \"circleRadius\": 8\n };\n for( var p in options ) {\n this.opt[p] = options[p];\n }\n this._filterShadow = this.timeSlider.snap.filter( Snap.filter.shadow(1, 1, 1, \"#000\", 0.3));\n };\n ts.Events.prototype._addEventElements = function() {\n var len = this._oEventData.count();\n for ( var i = 0 ; i < len ; i++ ) {\n this._addEventElement( this._oEventData.getDataByIndex(i), true );\n }\n };\n ts.Events.prototype._addEventElement = function( oEvent, bAppend ) {\n var el = this._makeElement( oEvent );\n this.group[bAppend ? \"append\": \"prepend\"]( el );\n if ( this.timeSlider.oPositionManager.isInSliderTimeSeries( oEvent.eventTimestamp ) === false ) {\n this.hide( el );\n }\n return el;\n };\n ts.Events.prototype._makeID = function( oEvent ) {\n return this._oEventData.makeID( oEvent ) + consts.ID_POSTFIX;\n };\n ts.Events.prototype._makeElement = function( oEvent ) {\n var opt = this.opt;\n var time = oEvent.eventTimestamp;\n var groupID = this._makeID( oEvent );\n var elEventGroup = this.group.g().attr({\n \"data-id\": groupID,\n \"data-time\": time,\n \"transform\": \"translate(\" + this.timeSlider.oPositionManager.getPositionFromTime( time ) + \",0)\"\n }).add(\n this.timeSlider.snap.line( 0, opt.y, 0, opt.y + opt.barLength ),\n this.timeSlider.snap.circle( 0, opt.y + opt.circleRadius + opt.gapBarNCircle + opt.barLength, opt.circleRadius ).attr({\n \"fill\": TimeSlider.EventColor[oEvent.eventTypeCode],\n \"class\": \"event\",\n \"filter\": this._filterShadow,\n \"data-time\": time\n })\n );\n this._oEventGroupElementHash[groupID] = elEventGroup;\n return elEventGroup;\n };\n ts.Events.prototype._addEvents = function() {\n var self = this;\n this.group.mouseover(function(event, x, y) {\n self._fireEvent( \"inEvent\", event, x, y );\n });\n this.group.mouseout(function(event, x, y) {\n self._fireEvent( \"outEvent\", event, x, y );\n });\n this.group.click(function(event, x, y) {\n self._fireEvent( \"clickEvent\", event, x, y );\n });\n };\n ts.Events.prototype._fireEvent = function( eventType, event, x, y ) {\n this.timeSlider.fireEvent(eventType, [x, y, this._oEventData.getDataByKey( event.srcElement.parentNode.getAttribute(\"data-id\").split(consts.ID_SPLITER)[0] )] );\n };\n ts.Events.prototype.reset = function() {\n var self = this;\n for ( var p in this._oEventGroupElementHash ) {\n var elGroupEvent = this._oEventGroupElementHash[p];\n var time = this._oEventData.getDataByKey(p.split(consts.ID_SPLITER)[0]).eventTimestamp;\n\n if ( self.timeSlider.oPositionManager.isInSliderTimeSeries( time ) ) {\n self.show( elGroupEvent );\n (function( el, x ) {\n el.animate({\n \"transform\": \"translate(\" + x + \",0)\"\n }, self.opt.duration);\n })(elGroupEvent, this.timeSlider.oPositionManager.getPositionFromTime( time ));\n } else {\n (function( el, x ) {\n el.animate({\n \"transform\": \"translate(\" + x + \",0)\"\n }, self.opt.duration, function() {\n self.hide( el );\n });\n })(elGroupEvent, self.timeSlider.oPositionManager.isBeforeSliderStartTime( time ) ? 0 : self.timeSlider.oPositionManager.getSliderEndPosition() );\n }\n }\n };\n ts.Events.prototype.changeData = function() {\n var aGroupElements = this.group.selectAll(\"g\");\n if ( aGroupElements.length === 0 ) {\n this._addEventElements();\n return;\n }\n var i, j, oEvent, skip = 0, lenData = this._oEventData.count(), lenElements = aGroupElements.length;\n var lastElement = aGroupElements[lenElements - 1];\n\n for( i = 0 ; i < lenElements ; i++ ) {\n var el = aGroupElements[i];\n var timestamp = parseInt( el.attr(\"data-time\") );\n\n for( j = skip ; j < lenData ; j++ ) {\n oEvent = this._oEventData.getDataByIndex(j);\n if ( oEvent.eventTimestamp < timestamp ) {\n el.before( this._makeElement( oEvent ) );\n skip = j;\n } else if ( oEvent.eventTimestamp === timestamp ) {\n skip = j + 1;\n lastElement = el;\n break;\n } else {\n skip = j;\n lastElement = el;\n break;\n }\n }\n }\n for( skip ; skip < lenData ; skip++ ) {\n oEvent = this._oEventData.getDataByIndex(skip);\n var newEl = this._makeElement( oEvent );\n lastElement.after( newEl );\n lastElement = newEl;\n }\n this.reset();\n };\n ts.Events.prototype.emptyData = function() {\n for ( var p in this._oEventGroupElementHash ) {\n this._oEventGroupElementHash[p].remove();\n }\n this._oEventGroupElementHash = {};\n };\n ts.Events.prototype.show = function( el ) {\n el.attr(\"display\", \"block\");\n };\n ts.Events.prototype.hide = function( el ) {\n el.attr(\"display\", \"none\");\n };\n\n})(window, jQuery);\n","(function(w, $) {\n var ts = w.TimeSlider;\n ts.TimeSeriesSignboard = function( timeSlider, svgGroup, options ) {\n this.timeSlider = timeSlider;\n this.group = svgGroup;\n this.opt = options;\n this._init();\n this._addElements();\n };\n ts.TimeSeriesSignboard.prototype._init = function() {\n this._halfHeight = this.opt.height - 12;\n };\n ts.TimeSeriesSignboard.prototype._addElements = function() {\n this._elStartTime = this.group.text(0, this._halfHeight, this.timeSlider.oPositionManager.getSliderStartTimeStr() ).attr({\n \"text-anchor\": \"start\"\n });\n this._elEndTime = this.group.text(this.timeSlider.oPositionManager.getSliderEndPosition(), this._halfHeight, this.timeSlider.oPositionManager.getSliderEndTimeStr() ).attr({\n \"text-anchor\": \"end\"\n });\n this.group.add( this._elStartTime, this._elEndTime );\n };\n ts.TimeSeriesSignboard.prototype.reset = function() {\n this._elStartTime.attr(\"text\", this.timeSlider.oPositionManager.getSliderStartTimeStr() );\n this._elEndTime.attr(\"text\", this.timeSlider.oPositionManager.getSliderEndTimeStr() );\n };\n ts.TimeSeriesSignboard.prototype.resize = function() {\n var self = this;\n this._elEndTime.animate({\n \"x\": self.timeSlider.oPositionManager.getSliderEndPosition()\n }, this.opt.duration, function() {\n self._elEndTime.attr(\"text\", self.timeSlider.oPositionManager.getSliderEndTimeStr() );\n });\n };\n})(window, jQuery);\n","(function(w, $) {\n var ts = w.TimeSlider;\n ts.TimeSignboard = function( timeSlider, svgGroup, options ) {\n this.timeSlider = timeSlider;\n this.group = svgGroup;\n this.opt = options;\n this._textMaxWidth = 100;\n this._xPadding = 2;\n this._addElements();\n };\n ts.TimeSignboard.prototype._addElements = function() {\n var isIn = this._isIn( this.opt.x );\n var x = this.opt.x + ( isIn ? this._xPadding : -this._xPadding );\n this.timeText = this.group.text(x, 26, this.timeSlider.oPositionManager.getFullTimeStr(this.opt.x) ).attr({\n \"textAnchor\": isIn ? \"start\" : \"end\"\n });\n this.group.add( this.timeText );\n };\n ts.TimeSignboard.prototype.setX = function( x ) {\n var isIn = this._isIn( x );\n this.timeText.attr({\n \"x\": x + ( isIn ? this._xPadding : -this._xPadding ),\n \"text\": this.timeSlider.oPositionManager.getFullTimeStr(x),\n \"textAnchor\": isIn ? \"start\" : \"end\"\n });\n\n };\n ts.TimeSignboard.prototype._isIn = function( x ) {\n if ( this.opt.direction == \"left\" ) {\n return x < this._textMaxWidth;\n } else {\n return x + this._textMaxWidth < this.timeSlider.oPositionManager.getSliderEndPosition();\n }\n };\n ts.TimeSignboard.prototype.onDragStart = function( x ) {\n this.setX( x );\n };\n ts.TimeSignboard.prototype.onDragEnd = function() {\n };\n ts.TimeSignboard.prototype.onDrag = function( x ) {\n this.setX( x );\n };\n})(window, jQuery);\n","(function(w, $) {\n var consts = {\n SIZE: 30\n };\n var ts = w.TimeSlider;\n ts.LoadingIndicator = function( timeSlider, svgGroup, options ) {\n this.timeSlider = timeSlider;\n this.opt = options;\n this.group = svgGroup;\n this._bRunn = false;\n this._addElements();\n this.show();\n };\n ts.LoadingIndicator.prototype._addElements = function() {\n var size = 30;\n var halfSize = consts.SIZE / 2;\n var x = this.opt.width / 2 - halfSize;\n var y = this.opt.height / 2 - halfSize;\n this.group.add( this.timeSlider.snap.rect(0, 0, this.opt.width, this.opt.height) );\n this.elClockwiseBox = this.timeSlider.snap.rect(x, y, consts.SIZE, consts.SIZE).attr({\n \"stroke\": \"rgba(197, 197, 197, .9)\"\n });\n this.elAnitclockwiseBox = this.timeSlider.snap.rect(x, y, consts.SIZE, consts.SIZE).attr({\n \"stroke\": \"rgba(239, 246, 105, .9)\"\n });\n this.group.add( this.elClockwiseBox, this.elAnitclockwiseBox );\n };\n ts.LoadingIndicator.prototype.show = function() {\n this.group.attr(\"display\", \"block\");\n this._bRunn = true;\n this._animate( this.elClockwiseBox, 0, 360, mina.easeout );\n this._animate( this.elAnitclockwiseBox, 45, -315, mina.easein );\n };\n ts.LoadingIndicator.prototype._animate = function( ele, from, to, fnEase ) {\n var self = this;\n Snap.animate( from, to, function(val) {\n ele.attr(\"transform\", \"rotate(\" + val + \"deg)\");\n }, self.opt.duration, fnEase, function() {\n if ( self._bRunn === true ) {\n self._animate( ele, to, from, fnEase );\n }\n });\n };\n ts.LoadingIndicator.prototype.hide = function() {\n this.group.attr(\"display\", \"none\");\n this._bRunn = false;\n };\n})(window, jQuery);\n"],"sourceRoot":"/source/"} \ No newline at end of file diff --git a/web/src/main/webapp/features/agentInfo/agent-info.directive.js b/web/src/main/webapp/features/agentInfo/agent-info.directive.js index 2c33f516b3e9..b278ca4b88cc 100644 --- a/web/src/main/webapp/features/agentInfo/agent-info.directive.js +++ b/web/src/main/webapp/features/agentInfo/agent-info.directive.js @@ -1,4 +1,4 @@ -(function() { +(function( $ ) { 'use strict'; /** * (en)agentInfoDirective @@ -11,196 +11,244 @@ agentStatUrl: '/getAgentStat.pinpoint' }); - pinpointApp.directive('agentInfoDirective', [ 'agentInfoConfig', '$timeout', 'AlertsService', 'ProgressBarService', 'AgentDaoService', 'helpContentTemplate', 'helpContentService', - function (cfg, $timeout, AlertsService, ProgressBarService, AgentDaoService, helpContentTemplate, helpContentService) { + pinpointApp.directive('agentInfoDirective', [ 'agentInfoConfig', '$timeout', 'AlertsService', 'ProgressBarService', 'AgentDaoService', 'AgentAjaxService', 'TooltipService', + function ( cfg, $timeout, AlertsService, ProgressBarService, AgentDaoService, agentAjaxService, tooltipService ) { return { restrict: 'EA', replace: true, templateUrl: 'features/agentInfo/agentInfo.html?v' + G_BUILD_TIME, link: function postLink(scope, element, attrs) { - - // define private variables - var oNavbarVoService, oAlertService, oProgressBarService, bInitTooltip = false; - - // define private variables of methods - var getAgentStat, getLink, initServiceInfo, showCharts, parseMemoryChartDataForAmcharts, parseCpuLoadChartDataForAmcharts, - broadcastToCpuLoadChart, broadcastToTpsChart, resetServerMetaDataDiv, initTooltip; - - // initialize + scope.agentInfoTemplate = 'features/agentInfo/agentInfoReady.html?v=' + G_BUILD_TIME; - oAlertService = new AlertsService(); - oProgressBarService = new ProgressBarService(); - + scope.showEventInfo = false; + scope.showDetail = false; + scope.selectTime = -1; + var oNavbarVoService, timeSlider = null, bInitTooltip = false; + var oAlertService = new AlertsService(); + var oProgressBarService = new ProgressBarService(); + var $targetPicker = null; + + var initTimePicker = function( time ) { + if ( $targetPicker === null ) { + $targetPicker = $("#target-picker"); + $targetPicker.datetimepicker({ + dateFormat: "yy-mm-dd", + timeFormat: "HH:mm:ss", + controlType: "select", + showButtonPanel: true, + onSelect: function () { + //console.log(moment($targetPicker.datetimepicker('getDate'))); + }, + onClose: function (selectedTime) { + var time = new Date(selectedTime).valueOf(); + if ( scope.selectTime !== time ) { + timeSlider.setSelectTime( time ); + } + } + }); + $("#ui-datepicker-div").addClass("inspector-datepicker"); + } + setPickerTime( time ); + }; + var setPickerTime = function( time ) { + $targetPicker.datetimepicker( 'setDate', new Date( time ) ); + }; + var initTimeSlider = function( aSelectionFromTo, aFromTo ) { + if ( timeSlider !== null ) { + timeSlider.emptyData(); + } else { + timeSlider = new TimeSlider( "timeSlider", { + "width": $("#timeSlider").width(), + "height": 90, + "handleSrc": "images/handle.png", + "timeSeries": aFromTo ? aFromTo : calcuSliderTimeSeries( aSelectionFromTo ), + "handleTimeSeries": aSelectionFromTo, + "selectTime": aSelectionFromTo[1], + "eventData": [] + }).addEvent("clickEvent", function( aEvent ) {// [x, y, obj] + loadEventInfo(aEvent[2]); + }).addEvent("selectTime", function( time ) { + scope.selectTime = time; + loadAgentInfo( time ); + setTimeSliderBaseColor(); + setPickerTime( time ); + }).addEvent("changeSelectionZone", function( aTime ) { + loadChartData( scope.agent.agentId, aTime, getPeriod(aTime[0], aTime[1] ), function() { + }); + }).addEvent("changeSliderTimeSeries", function( aEvents ) { + }); + } + }; + var getPeriod = function( from, to ) { + return (to - from) / 1000 / 60; + }; + var setTimeSliderBaseColor = function() { + timeSlider.setDefaultStateLineColor( TimeSlider.EventColor[ scope.agent.status.state.code == 100 ? "10100" : "10200"] ); + }; + + var loadChartData = function( agentId, aFromTo, period, callback ) { + oProgressBarService.startLoading(); + oProgressBarService.setLoading(40); + agentAjaxService.getAgentStateForChart({ + "agentId": agentId, + "from": aFromTo[0], + "to": aFromTo[1], + "sampleRate": AgentDaoService.getSampleRate(period) + }, function (result) { + if ( result.errorCode || result.status ) { + oProgressBarService.stopLoading(); + oAlertService.showError('There is some error.'); + return; + } + scope.agentStat = result; + if (angular.isDefined(result.type) && result.type) { + scope.agent['jvmGcType'] = result.type; + } + oProgressBarService.setLoading(80); + showCharts(result); + $timeout(function () { + oProgressBarService.setLoading(100); + oProgressBarService.stopLoading(); + }, 700); + callback(); + }); + }; + var loadAgentInfo = function( time ) { + oProgressBarService.startLoading(); + oProgressBarService.setLoading(40); + agentAjaxService.getAgentInfo({ + "agentId": scope.agent.agentId, + "timestamp": time + }, function( result ) { + var jvmGcType = scope.agent.jvmGcType; + oProgressBarService.setLoading(80); + scope.agent = result; + scope.agent.jvmGcType = jvmGcType; + scope.currentServiceInfo = initServiceInfo(result); + oProgressBarService.setLoading(100); + oProgressBarService.stopLoading(); + }); + }; + var loadEventInfo = function( oEvent ) { + agentAjaxService.getEvent({ + "agentId": scope.agent.agentId, + "eventTimestamp": oEvent.eventTimestamp, + "eventTypeCode": oEvent.eventTypeCode + }, function( result ) { + if ( result.errorCode || result.status ) { + oAlertService.showError('There is some error.'); + } else { + scope.eventInfo = result; + scope.showEventInfo = true; + } + }); + }; + var calcuSliderTimeSeries = function( aFromTo ) { + var from = aFromTo[0], to = aFromTo[1]; + var twoDay = 172800000; + var fromTo = to - from; + if ( fromTo > twoDay ) { + return [to - twoDay, to]; + } else { + return [ to - ( fromTo * 3 ), to ]; + } + }; - initTooltip = function() { + var initTooltip = function() { if ( bInitTooltip === false ) { - jQuery('.heapTooltip').tooltipster({ - content: function() { - return helpContentTemplate(helpContentService.inspector.heap); - }, - position: "top", - trigger: "click" - }); - jQuery('.permGenTooltip').tooltipster({ - content: function() { - return helpContentTemplate(helpContentService.inspector.permGen); - }, - position: "top", - trigger: "click" - }); - jQuery('.cpuUsageTooltip').tooltipster({ - content: function() { - return helpContentTemplate(helpContentService.inspector.cpuUsage); - }, - position: "top", - trigger: "click" - }); - jQuery('.tpsTooltip').tooltipster({ - content: function() { - return helpContentTemplate(helpContentService.inspector.tps); - }, - position: "top", - trigger: "click" - }); + tooltipService.init( "heap" ); + tooltipService.init( "permGen" ); + tooltipService.init( "cpuUsage" ); + tooltipService.init( "tps" ); + bInitTooltip = true; } }; - - /** - * scope event of agentInfo.initialize - */ - scope.$on('agentInfoDirective.initialize', function (event, navbarVoService, agent) { - scope.agentInfoTemplate = 'features/agentInfo/agentInfoMain.html?v=' + G_BUILD_TIME; - scope.agent = agent; - oNavbarVoService = navbarVoService; - scope.chartGroup = null; - scope.info = { - 'agentId': agent.agentId, - 'applicationName': agent.applicationName, - 'hostName': agent.hostName, - 'ip': agent.ip, - 'serviceType': agent.serviceType, - 'pid': agent.pid, - 'agentVersion': agent.agentVersion, - 'vmVersion': agent.vmVersion, - 'jvmGcType': '', - 'serverMetaData': agent.serverMetaData, - 'linkList': agent.linkList - }; - scope.currentServiceInfo = initServiceInfo(agent); - - $timeout(function () { - getAgentStat(agent.agentId, oNavbarVoService.getQueryStartTime(), oNavbarVoService.getQueryEndTime(), oNavbarVoService.getPeriod()); - scope.$apply(); - }); - }); - - scope.selectServiceInfo = function(serviceInfo) { - if (serviceInfo.serviceLibs.length > 0) { - scope.currentServiceInfo = serviceInfo; - } - }; - - initServiceInfo = function (agent) { + var initServiceInfo = function (agent) { if (agent.serverMetaData && agent.serverMetaData.serviceInfos) { var serviceInfos = agent.serverMetaData.serviceInfos; for (var i = 0; i < serviceInfos.length; ++i) { if (serviceInfos[i].serviceLibs.length > 0) { return serviceInfos[i]; } - } + } } return; } - + /** * show charts * @param agentStat */ - showCharts = function (agentStat) { - + var showCharts = function (agentStat) { + var heap = { id: 'heap', title: 'Heap Usage', span: 'span12', line: [ { id: 'JVM_MEMORY_HEAP_USED', key: 'Used', values: [], isFgc: false }, { id: 'JVM_MEMORY_HEAP_MAX', key: 'Max', values: [], isFgc: false }, { id: 'fgc', key: 'FGC', values: [], bar: true, isFgc: true } ]}; - + var nonheap = { id: 'nonheap', title: 'PermGen Usage', span: 'span12', line: [ { id: 'JVM_MEMORY_NON_HEAP_USED', key: 'Used', values: [], isFgc: false }, { id: 'JVM_MEMORY_NON_HEAP_MAX', key: 'Max', values: [], isFgc: false }, { id: 'fgc', key: 'FGC', values: [], bar: true, isFgc: true } ]}; - + var cpuLoad = { id: 'cpuLoad', title: 'JVM/System Cpu Usage', span: 'span12', isAvailable: false}; - + var tps = { id: 'tps', title: 'Transactions Per Second', span: 'span12', isAvailable: false }; - + scope.memoryGroup = [ heap, nonheap ]; scope.cpuLoadChart = cpuLoad; scope.tpsChart = tps; - + scope.$broadcast('jvmMemoryChartDirective.initAndRenderWithData.forHeap', AgentDaoService.parseMemoryChartDataForAmcharts(heap, agentStat), '100%', '270px'); scope.$broadcast('jvmMemoryChartDirective.initAndRenderWithData.forNonHeap', AgentDaoService.parseMemoryChartDataForAmcharts(nonheap, agentStat), '100%', '270px'); scope.$broadcast('cpuLoadChartDirective.initAndRenderWithData.forCpuLoad', AgentDaoService.parseCpuLoadChartDataForAmcharts(cpuLoad, agentStat), '100%', '270px'); scope.$broadcast('tpsChartDirective.initAndRenderWithData.forTps', AgentDaoService.parseTpsChartDataForAmcharts(tps, agentStat), '100%', '270px'); }; - - /** - * get agent stat - * @param agentId - * @param from - * @param to - */ - getAgentStat = function (agentId, from, to, period) { - oProgressBarService.startLoading(); - var query = { - agentId: agentId, - from: from, - to: to, - sampleRate: AgentDaoService.getSampleRate(period) - }; - oProgressBarService.setLoading(40); - AgentDaoService.getAgentStat(query, function (err, result) { - if (err || result.exception ) { - oProgressBarService.stopLoading(); - if ( err ) { - oAlertService.showError('There is some error.'); - } else { - oAlertService.showError(result.exception); - } - return; - } - - scope.agentStat = result; - if (angular.isDefined(result.type) && result.type) { - scope.info['jvmGcType'] = result.type; - } - oProgressBarService.setLoading(80); - showCharts(result); - $timeout(function () { - oProgressBarService.setLoading(100); - oProgressBarService.stopLoading(); - }, 700); - scope.$digest(); - - initTooltip(); - }); - }; - - broadcastToCpuLoadChart = function(e, event) { + var getEventList = function( agentId, aFromTo ) { + agentAjaxService.getEventList({ + "agentId": agentId, + "from": aFromTo[0], + "to": aFromTo[1] + }, function( result ) { + if ( result.errorCode || result.status ) { + oAlertService.showError('There is some error.'); + } else { + timeSlider.addEventData(result); + } + }); + }; + + var broadcastToCpuLoadChart = function(e, event) { if (scope.cpuLoadChart.isAvailable) { scope.$broadcast('cpuLoadChartDirective.showCursorAt.forCpuLoad', event.index); } - } - - broadcastToTpsChart = function(e, event) { + }; + var broadcastToTpsChart = function(e, event) { if (scope.tpsChart.isAvailable) { scope.$broadcast('tpsChartDirective.showCursorAt.forTps', event.index); } - } - - scope.openDetail = function() { - $('#serverMetaDataDiv').modal({}); }; + + scope.formatDate = function( time ) { + return moment(time).format('YYYY.MM.DD HH:mm:ss'); + }; + scope.hideEventInfo = function() { + scope.showEventInfo = false; + }; + scope.zoomInTimeSlider = function() { + timeSlider.zoomIn(); + }; + scope.zoomOutTimeSlider = function() { + timeSlider.zoomOut(); + var aRange = timeSlider.getSliderTimeSeries(); + getEventList( scope.agent.agentId, aRange ); + }; + + scope.toggleShowDetail = function() { + scope.showDetail = !scope.showDetail; + }; scope.hasDuplicate = function( libName, index ) { var len = scope.currentServiceInfo.serviceLibs.length; var bHas = false; @@ -212,36 +260,60 @@ } return bHas ? "color:red" : ""; }; - /** - * scope event on jvmMemoryChartDirective.cursorChanged.forHeap - */ + + scope.selectServiceInfo = function(serviceInfo) { + if (serviceInfo.serviceLibs.length > 0) { + scope.currentServiceInfo = serviceInfo; + } + }; + scope.$on('agentInfoDirective.initialize', function (event, navbarVoService, agent) { + oNavbarVoService = navbarVoService; + scope.agentInfoTemplate = 'features/agentInfo/agentInfoMain.html?v=' + G_BUILD_TIME; + scope.agent = agent; + scope.chartGroup = null; + scope.currentServiceInfo = initServiceInfo(agent); + + var aFromTo, period, aSelectionFromTo = []; + if ( scope.selectTime === -1 ) { + scope.selectTime = oNavbarVoService.getQueryEndTime(); + aSelectionFromTo[0] = oNavbarVoService.getQueryStartTime(); + aSelectionFromTo[1] = oNavbarVoService.getQueryEndTime(); + period = oNavbarVoService.getPeriod(); + } else { + if ( scope.selectTime !== oNavbarVoService.getQueryEndTime() ) { + loadAgentInfo( scope.selectTime ); + } + aSelectionFromTo = timeSlider.getSelectionTimeSeries(); + aFromTo = timeSlider.getSliderTimeSeries(); + period = getPeriod( aSelectionFromTo[0], aSelectionFromTo[1] ); + } + $timeout(function () { + loadChartData(agent.agentId, aSelectionFromTo, period, function() { + initTimePicker( scope.selectTime ); + initTooltip(); + initTimeSlider( aSelectionFromTo, aFromTo ); + setTimeSliderBaseColor(); + getEventList( agent.agentId, aFromTo || calcuSliderTimeSeries( aSelectionFromTo ) ); + }); + scope.$apply(); + }); + + }); scope.$on('jvmMemoryChartDirective.cursorChanged.forHeap', function (e, event) { scope.$broadcast('jvmMemoryChart.showCursorAt.forNonHeap', event.index); broadcastToCpuLoadChart(e, event); broadcastToTpsChart(e, event); }); - - /** - * scope event on jvmMemoryChartDirective.cursorChanged.forNonHeap - */ scope.$on('jvmMemoryChartDirective.cursorChanged.forNonHeap', function (e, event) { scope.$broadcast('jvmMemoryChartDirective.showCursorAt.forHeap', event.index); broadcastToCpuLoadChart(e, event); broadcastToTpsChart(e, event); }); - - /** - * scope event on cpuLoadChart.cursorChanged.forCpuLoad - */ scope.$on('cpuLoadChartDirective.cursorChanged.forCpuLoad', function (e, event) { scope.$broadcast('jvmMemoryChartDirective.showCursorAt.forHeap', event.index); scope.$broadcast('jvmMemoryChartDirective.showCursorAt.forNonHeap', event.index); broadcastToTpsChart(e, event); }); - - /** - * scope event on tpsChart.cursorChanged.forTps - */ scope.$on('tpsChartDirective.cursorChanged.forTps', function (e, event) { scope.$broadcast('jvmMemoryChartDirective.showCursorAt.forHeap', event.index); scope.$broadcast('jvmMemoryChartDirective.showCursorAt.forNonHeap', event.index); @@ -251,4 +323,4 @@ }; } ]); -})(); \ No newline at end of file +})(jQuery); \ No newline at end of file diff --git a/web/src/main/webapp/features/agentInfo/agentInfoMain.html b/web/src/main/webapp/features/agentInfo/agentInfoMain.html index 1243cb1b5af5..48a27e672188 100644 --- a/web/src/main/webapp/features/agentInfo/agentInfoMain.html +++ b/web/src/main/webapp/features/agentInfo/agentInfoMain.html @@ -3,64 +3,154 @@
- +
+
+
+
+ + + + +
+ + +
+
+ +
+
+
+

{{eventInfo.eventTypeDesc}} - Event

+
+
+ + + + + + + + + + + + + + + +
Event Time{{formatDate(eventInfo.eventTimestamp)}}
Description{{eventInfo.eventTypeDesc}}
Message{{eventInfo.eventMessage}}
+
+
-

Information

+

Information {{formatDate(selectTime)}}

- - - - + + + + - + - + - - - + + - + - +
Application Name{{info.applicationName}}Agent Version{{info.agentVersion}}Application Name{{agent.applicationName}}Agent Version{{agent.agentVersion}}
Agent Id{{info.agentId}}{{agent.agentId}} PID{{info.pid}}{{agent.pid}}
Hostname{{info.hostName}}  -
    -
  • +
{{agent.hostName}}  + - {{info.linkName}} + {{agent.linkName}} JVM (GC Type){{info.vmVersion}} ({{info.jvmGcType}}){{info.jvmGcType}}{{agent.vmVersion}} ({{agent.jvmGcType}}){{agent.jvmGcType}}
IP -
{{info.ip}}
+
{{agent.ip}}
Start Time{{agent.startTime | date:'yyyy-MM-dd HH:mm:ss Z'}}{{agent.startTimestamp | date:'yyyy-MM-dd HH:mm:ss Z'}}
Service Type - {{info.serviceType}} - -  ({{info.serverMetaData.serverInfo}})  - + {{agent.serviceType}} + +  ({{agent.serverMetaData.serverInfo}})  + End Status{{agent.endStatus}} (last checked : {{agent.endTimeStamp | date:'yyyy-MM-dd HH:mm:ss Z'}}){{agent.status.state.desc}} (last checked : {{agent.status.eventTimestamp | date:'yyyy-MM-dd HH:mm:ss Z'}})
+
+

Detail

+
+
+ + + + + + + + + + + + + + + +
Server Info + {{agent.serverMetaData.serverInfo}} + N/A +
JVM Arguments +
+
    +
  • {{vmArg}}
  • +
+
+ N/A +
Services +
+ +
+
    +
  • {{serviceLib}}
  • +
+
+
+ N/A +
+
+
+
@@ -85,68 +175,4 @@

diff --git a/web/src/main/webapp/features/agentList/agent-list.directive.js b/web/src/main/webapp/features/agentList/agent-list.directive.js index afd68698edb1..f5b20c0d2d0a 100644 --- a/web/src/main/webapp/features/agentList/agent-list.directive.js +++ b/web/src/main/webapp/features/agentList/agent-list.directive.js @@ -8,65 +8,47 @@ * @class */ pinpointApp.constant('agentListConfig', { - agentGroupUrl: '/getAgentList.pinpoint' }); - pinpointApp.directive('agentListDirective', [ 'agentListConfig', '$rootScope', 'helpContentTemplate', 'helpContentService', function (cfg, $rootScope, helpContentTemplate, helpContentService) { + pinpointApp.directive('agentListDirective', [ 'agentListConfig', '$rootScope', 'AgentAjaxService', 'TooltipService', function (cfg, $rootScope, agentAjaxService, tooltipService) { return { restrict: 'EA', replace: true, templateUrl: 'features/agentList/agentList.html?v=' + G_BUILD_TIME, link: function postLink(scope, element, attrs) { - - // define private variables of methods - var getAgentGroup, showAgentGroup, findAgentByAgentId; - - /** - * get agent group - * @param query - * @param cb - */ - getAgentGroup = function (query, cb) { - jQuery.ajax({ - type: 'GET', - url: cfg.agentGroupUrl, - cache: false, - dataType: 'json', - data: { - application: query.applicationName, - from: query.from, - to: query.to - }, - success: function (result) { - cb(result); - }, - error: function (xhr, status, error) { - console.log("ERROR", status, error); - } - }); + tooltipService.init( "agentList" ); + + var oAgentState = { + "sign": { + "100": "ok-sign", + "200": "minus-sign", + "201": "minus-sign", + "300": "remove-sign", + "-1": "question-sign" + }, + "color": { + "100": "#40E340", + "200": "#F00", + "201": "#F00", + "300": "#AAA", + "-1": "#AAA" + } + }; + var showAgentGroup = function (applicationName, serviceType, from, to, selectedAgentId) { + agentAjaxService.getAgentList( { + application: applicationName, + from: from, + to: to + }, function( result ) { + if ( result.errorCode || result.status ) { + + } else { + scope.agentGroup = result; + scope.select(findAgentByAgentId(selectedAgentId)); + } + }); }; - - /** - * show agent group - * @param applicationName - * @param serviceType - * @param from - * @param to - */ - showAgentGroup = function (applicationName, serviceType, from, to, selectedAgentId) { - var query = { - applicationName: applicationName, - from: from, - to: to - }; - getAgentGroup(query, function (result) { - scope.agentGroup = result; - scope.select(findAgentByAgentId(selectedAgentId)); - scope.$digest(); - }); - }; - - findAgentByAgentId = function (agentId) { + var findAgentByAgentId = function (agentId) { for (var key in scope.agentGroup) { for (var innerKey in scope.agentGroup[key]) { if (scope.agentGroup[key][innerKey].agentId === agentId) { @@ -77,28 +59,19 @@ return false; }; - /** - * scope select - * @param agent - */ scope.select = function (agent) { scope.currentAgent = agent; scope.$emit('agentListDirective.agentChanged', agent); }; - - /** - * scope event on agentList.initialize - */ + scope.getState = function( stateCode ) { + return oAgentState.sign[stateCode+""]; + }; + scope.getStateColor = function( stateCode ) { + return oAgentState.color[stateCode+""]; + }; scope.$on('agentListDirective.initialize', function (event, navbarVoService) { showAgentGroup(navbarVoService.getApplicationName(), navbarVoService.getServiceTypeName(), navbarVoService.getQueryStartTime(), navbarVoService.getQueryEndTime(), navbarVoService.getAgentId()); }); - jQuery('.agentListTooltip').tooltipster({ - content: function() { - return helpContentTemplate(helpContentService.inspector.list); - }, - position: "bottom", - trigger: "click" - }); } }; }]); diff --git a/web/src/main/webapp/features/agentList/agentList.html b/web/src/main/webapp/features/agentList/agentList.html index 29b7dc697f89..139bd212eeb6 100644 --- a/web/src/main/webapp/features/agentList/agentList.html +++ b/web/src/main/webapp/features/agentList/agentList.html @@ -13,6 +13,7 @@