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 2ec83d8b9465..8c36a803612a 100644 --- a/web/src/main/webapp/common/services/navbar-vo.service.js +++ b/web/src/main/webapp/common/services/navbar-vo.service.js @@ -205,6 +205,9 @@ self._nQueryStartTime = self._nQueryEndTime - self._nQueryPeriod; return self; }; + this.getPartialURL = function( bAddApplication, bAddFilter) { + return (bAddApplication ? self.getApplication() + "/" : "" ) + self.getReadablePeriod() + "/" + self.getQueryEndDateTime() + ( bAddFilter ? ( self.getFilter() ? "/" + self.getFilter() : "" ) : "" ); + } }; }]); })(); \ No newline at end of file diff --git a/web/src/main/webapp/common/services/server-map-dao.service.js b/web/src/main/webapp/common/services/server-map-dao.service.js index 5d8792ccb5e9..adafd0e6f629 100644 --- a/web/src/main/webapp/common/services/server-map-dao.service.js +++ b/web/src/main/webapp/common/services/server-map-dao.service.js @@ -73,7 +73,8 @@ filter: query.filter, limit: cfg.FILTER_FETCH_LIMIT, callerRange: query.callerRange, - calleeRange: query.calleeRange + calleeRange: query.calleeRange, + v: 3 }; if ( isNaN( parseInt( query.serviceTypeName ) ) ) { data.serviceTypeName = query.serviceTypeName; diff --git a/web/src/main/webapp/common/services/tooltip.service.js b/web/src/main/webapp/common/services/tooltip.service.js index 526fca19e9f0..3d73d1cb9e1d 100644 --- a/web/src/main/webapp/common/services/tooltip.service.js +++ b/web/src/main/webapp/common/services/tooltip.service.js @@ -9,6 +9,10 @@ * @class */ pinpointApp.constant('TooltipServiceConfig', { + "scatter": { + "position": "bottom", + "trigger": "click" + }, "navbar": { "position": "bottom", "trigger": "click" @@ -47,6 +51,8 @@ function getTooltipStr( type ) { switch( type ) { + case "scatter": + return function() { return helpContentTemplate(helpContentService.scatter["default"]); }; case "navbar": return function() { return helpContentTemplate(helpContentService.navbar.applicationSelector) + helpContentTemplate(helpContentService.navbar.depth) + helpContentTemplate(helpContentService.navbar.periodSelector); }; case "agentList": @@ -61,6 +67,5 @@ return function() { return helpContentTemplate(helpContentService.inspector.tps); }; } } - }]); })(jQuery); \ No newline at end of file diff --git a/web/src/main/webapp/features/navbar/navbar.directive.js b/web/src/main/webapp/features/navbar/navbar.directive.js index 103cdc7a033c..52121253c3aa 100644 --- a/web/src/main/webapp/features/navbar/navbar.directive.js +++ b/web/src/main/webapp/features/navbar/navbar.directive.js @@ -610,17 +610,19 @@ bIsClickDepthInnerArea = false; bIsClickDepthInnerBtn = true; $("#navbar_depth .dropdown-menu").trigger("click.bs.dropdown"); - if ( prevCaller !== scope.caller || prevCallee !== scope.callee ) { - prevCaller = scope.caller; + console.log( "previous :", prevCallee, prevCaller, ", current :", scope.callee, scope.caller ); + if ( prevCallee !== scope.callee || prevCaller !== scope.caller ) { prevCallee = scope.callee; - setDepthToStorage(scope.application + "+caller", scope.caller); + prevCaller = scope.caller; setDepthToStorage(scope.application + "+callee", scope.callee); + setDepthToStorage(scope.application + "+caller", scope.caller); + broadcast(); } }; scope.cancelDepth = function( bHide ) { - scope.caller = prevCaller; scope.callee = prevCallee; + scope.caller = prevCaller; if ( bHide ) { bIsClickDepthInnerArea = false; bIsClickDepthInnerBtn = true; diff --git a/web/src/main/webapp/features/responseTimeChart/response-time-chart.directive.js b/web/src/main/webapp/features/responseTimeChart/response-time-chart.directive.js index 7ce9f641cf8d..c3521ee78f73 100644 --- a/web/src/main/webapp/features/responseTimeChart/response-time-chart.directive.js +++ b/web/src/main/webapp/features/responseTimeChart/response-time-chart.directive.js @@ -100,7 +100,7 @@ oChart.addListener('clickGraphItem', function(event) { analyticsService.send(analyticsService.CONST.MAIN, analyticsService.CONST.CLK_RESPONSE_GRAPH); if ( event.item.category == "Error" ) { - scope.$emit('responseTimeChartDirective.errorClicked' ); + scope.$emit('responseTimeChartDirective.showErrorTransacitonList' ); } if ( useFilterTransaction ) { scope.$emit('responseTimeChartDirective.itemClicked.' + scope.namespace, event.item.serialDataItem.dataContext); diff --git a/web/src/main/webapp/features/scatter/jquery.BigScatterChart.js b/web/src/main/webapp/features/scatter/jquery.BigScatterChart.js index 87ed92adb04b..530719cc89b3 100644 --- a/web/src/main/webapp/features/scatter/jquery.BigScatterChart.js +++ b/web/src/main/webapp/features/scatter/jquery.BigScatterChart.js @@ -16,83 +16,84 @@ var BigScatterChart = $.Class({ * @param {Object} option option object * @param {Service} helpContentService angularjs service object */ - $init: function (htOption, helpContentTemplate, helpContentService, webStorage, analyticsService) { + $init: function (htOption, aAgentList, tooltipService, webStorage, analyticsService) { + this._consts = { + "ALL": "All" + }; this.analyticsService = analyticsService; + this._aAgentList = aAgentList; this.option({ - 'sContainerId': '', - 'sPrefix': 'bigscatterchart-', - 'nWidth': 600, - 'nHeight': 400, - 'nXMin': 0, 'nXMax': 100, - 'nYMin': 0, 'nYMax': 100, - 'nZMin': 0, 'nZMax': 1, - 'nXSteps': 5, - 'nYSteps': 5, - 'nXLabel': null, - 'nYLabel': null, - 'nBubbleSize': 10, - 'nPaddingTop': 40, - 'nPaddingRight': 40, - 'nPaddingBottom': 30, - 'nPaddingLeft': 50, - 'sLineColor': '#3d3d3d', - 'htTypeAndColor': { - 'Success': '#b6da54', // type name : color, also order - 'Warning': '#fcc666', - 'Failed': '#fd7865', - 'Others': '#55c7c7' + "sContainerId": "", + "sPrefix": "bigscatterchart-", + "nWidth": 600, + "nHeight": 400, + "nXMin": 0, "nXMax": 100, + "nYMin": 0, "nYMax": 100, + "nZMin": 0, "nZMax": 1, + "nXSteps": 5, + "nYSteps": 5, + "nXLabel": null, + "nYLabel": null, + "nBubbleSize": 10, + "nPaddingTop": 40, + "nPaddingRight": 40, + "nPaddingBottom": 30, + "nPaddingLeft": 50, + "sLineColor": "#3d3d3d", + "htTypeAndColor": { + "Success": "#b6da54", // type name : color, also order + "Warning": "#fcc666", + "Failed": "#fd7865", + "Others": "#55c7c7" }, - 'nZIndexForCanvas': 1, - 'nDefaultRadius': 3, - 'htGuideLine': { - 'nLineWidth': 1, - 'aLineDash': [2, 5], - 'nGlobalAlpha': 0.2, - 'sLineColor' : '#e3e3e3' + "nZIndexForCanvas": 1, + "nDefaultRadius": 3, + "htGuideLine": { + "nLineWidth": 1, + "aLineDash": [2, 5], + "nGlobalAlpha": 0.2, + "sLineColor" : "#e3e3e3" }, - 'sTitle': 'Big Scatter Chart by Denny', - 'htTitleStyle': { - 'font-size': '12px', - 'font-weight': 'bold' + "sTitle": "Big Scatter Chart by Denny", + "htTitleStyle": { + "font-size": "12px", + "font-weight": "bold" }, - 'sXLabel': '', - 'sYLabel': '', - 'htLabelStyle': { - 'font-size': '10px', - 'line-height': '12px', - 'height': '20px', - 'padding-top': '5px' + "sXLabel": "", + "sYLabel": "", + "htLabelStyle": { + "font-size": "10px", + "line-height": "12px", + "height": "20px", + "padding-top": "5px" }, - 'sShowLoading': 'Loading', - 'sShowNoData': 'No Data', - 'htShowNoDataStyle': { - 'font-size': '15px', - 'color': '#000', - 'font-weight': 'bold' + "sShowLoading": "Loading", + "sShowNoData": "No Data", + "htShowNoDataStyle": { + "font-size": "15px", + "color": "#000", + "font-weight": "bold" }, - 'bUseMouseGuideLine' : true, - 'sDragToSelectClassName': 'jquery-drag-to-select', - 'htCheckBoxImage': { - 'checked': 'data:image/gif;base64,R0lGODlhDgANANU7APf6/QBoAO31+wBEAABZABSmDfj7/kLFLM/k9CpFeCA7bBs1ZiU/cWDZQBgxYvL4/PD2/ABLAKzQ6wBTAPn8/vD3/FLPNgBzAO30/J/J6JKgu1/YPzBLfzVQhQBvAO31/EhknURgmNTn9NPm9Orz+9fc51LQNztWjfX5/e/2++72+9vh7Njp9kBbk9jp9aCvzd3r+QB3AABhAKXM6SGvFTG5IEtnoBUuXuLu+v//zP///wAAAAAAAAAAAAAAAAAAACH5BAEAADsALAAAAAAOAA0AAAaHwJ1tSCS+VrsdSMdsOmOxXUiHq1ohlFguF2vpMAYDBvYxXDaNxuWkA3gCABIgYLGYAruOTraVoWQHgTIlOxw6BDWJiIoUGjsJOg8TNJSUEw8QCTsMOiwVEQWhERUuOAw7CjoSIykDrioiEjgKOws6MzMIArsIuDgLOw4ZVsRWDkk3ycrLN0lBADs=', - 'unchecked': 'data:image/gif;base64,R0lGODlhDgANAPcbANnZ2X9/f3Nzc4eHh4ODg5GRkfDw8IqKim1tbXt7e46Ojnd3d3BwcOzs7NPT09jY2O/v7+3t7eHh4eXl5dXV1enp6d3d3Wtra5OTk/Ly8v///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjYxQjZBNkRCQUVEQTExRTI5Q0M1REU5NjlFRThGRDZBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjYxQjZBNkRDQUVEQTExRTI5Q0M1REU5NjlFRThGRDZBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjFCNkE2RDlBRURBMTFFMjlDQzVERTk2OUVFOEZENkEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjFCNkE2REFBRURBMTFFMjlDQzVERTk2OUVFOEZENkEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQBAAAbACwAAAAADgANAAAIgwA3YBhIsCCGDRsKaFjIsGGGAhsUaMhAsaJFBRsOaIDAkaMBAxwzHNgwQEOEkygbnMwwYAMBDRViypSZgcCGABom6Ny5M0OADQk0SBhKlGiGBBsWaLDAtGnTDAs2CNDw4AEAq1WvZhCwgYEGCmDDhs3AYAMCBxbTZkCA8ILbt3AvIAwIADs=' + "bUseMouseGuideLine" : true, + "sDragToSelectClassName": "jquery-drag-to-select", + "htCheckBoxImage": { + "checked": "data:image/gif;base64,R0lGODlhDgANANU7APf6/QBoAO31+wBEAABZABSmDfj7/kLFLM/k9CpFeCA7bBs1ZiU/cWDZQBgxYvL4/PD2/ABLAKzQ6wBTAPn8/vD3/FLPNgBzAO30/J/J6JKgu1/YPzBLfzVQhQBvAO31/EhknURgmNTn9NPm9Orz+9fc51LQNztWjfX5/e/2++72+9vh7Njp9kBbk9jp9aCvzd3r+QB3AABhAKXM6SGvFTG5IEtnoBUuXuLu+v//zP///wAAAAAAAAAAAAAAAAAAACH5BAEAADsALAAAAAAOAA0AAAaHwJ1tSCS+VrsdSMdsOmOxXUiHq1ohlFguF2vpMAYDBvYxXDaNxuWkA3gCABIgYLGYAruOTraVoWQHgTIlOxw6BDWJiIoUGjsJOg8TNJSUEw8QCTsMOiwVEQWhERUuOAw7CjoSIykDrioiEjgKOws6MzMIArsIuDgLOw4ZVsRWDkk3ycrLN0lBADs=", + "unchecked": "data:image/gif;base64,R0lGODlhDgANAPcbANnZ2X9/f3Nzc4eHh4ODg5GRkfDw8IqKim1tbXt7e46Ojnd3d3BwcOzs7NPT09jY2O/v7+3t7eHh4eXl5dXV1enp6d3d3Wtra5OTk/Ly8v///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjYxQjZBNkRCQUVEQTExRTI5Q0M1REU5NjlFRThGRDZBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjYxQjZBNkRDQUVEQTExRTI5Q0M1REU5NjlFRThGRDZBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjFCNkE2RDlBRURBMTFFMjlDQzVERTk2OUVFOEZENkEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjFCNkE2REFBRURBMTFFMjlDQzVERTk2OUVFOEZENkEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQBAAAbACwAAAAADgANAAAIgwA3YBhIsCCGDRsKaFjIsGGGAhsUaMhAsaJFBRsOaIDAkaMBAxwzHNgwQEOEkygbnMwwYAMBDRViypSZgcCGABom6Ny5M0OADQk0SBhKlGiGBBsWaLDAtGnTDAs2CNDw4AEAq1WvZhCwgYEGCmDDhs3AYAMCBxbTZkCA8ILbt3AvIAwIADs=" }, - 'fXAxisFormat': function (nXStep, i) { + "fXAxisFormat": function (nXStep, i) { var nMilliseconds = (nXStep * i + this._nXMin); return moment(nMilliseconds).format("MM-DD") + "
" + moment(nMilliseconds).format("HH:mm:ss"); }, - 'fYAxisFormat': function (nYStep, i) { + "fYAxisFormat": function (nYStep, i) { return this._addComma((this._nYMax + this._nYMin) - ((nYStep * i) + this._nYMin)); }, - 'htDataSource': { - sUrl: function () { - }, - htParam: function (htFetchedData) { - }, - nFetch: function (htFetchedData) { - }, + "htDataSource": { + sUrl: function () {}, + nFetch: function (htFetchedData) {}, + htParam: function (htFetchedData) {}, htOption: { - dataType: 'jsonp', - jsonp: 'callback' + dataType: "jsonp", + jsonp: "callback" }, index: { x: 0, @@ -101,16 +102,16 @@ var BigScatterChart = $.Class({ type: 3 }, type: { - '0' : 'Failed', - '1' : 'Success' + "0" : "Failed", + "1" : "Success" } }, - 'useTypeUlSort' : false, - 'sConfigImage': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAADFUlEQVR4XnWTbWgcVRSGnxmzs6ssbZC0/1TSTUPSaFOTaPdPStYfQURpQQRZSgMNUrMaC61Nt5sPjVVKI9pakBLRElFsaEsNCSSpIlGq1oprSxKzm4WWtDQtREsy1d2d/TzeGxIQpGd4Oee8L++5d+6dMY6+/wEApmkCUCgUsCyLYrEoKjAMQ2uG5ldCa6yGCSAimhxW+FrXmUyGXC7HzmBQZ91rXQ+/q/KQiPxvwHBl5cYXfL4NO7LZ7J/KJKVr13J1agqdde84TrGiwvfwxsqK7UUpDgv6AVNESKfTHtu+R82mGgKBQFlLyy6aAgHcLovGxkZUr/gmQ+uLto2d+ttyJEeGHPQefg/A1/3WO4uDZ87JxZ8uydj4tzI69o3Oq1jmTyv9YE/3ArAh0XeRqcgQpjokPeSaSLF0S+1mUqk0KC6eSDATixGfnSWTdRTvoHW1/XWzfT9ey5GXrFHA1Ket33H9+jL+SaawXC7i8Rg35q6fP3tmcPucynM3buJxu0k7GdyWhafqMWyvF8M0xNTX09raSnPzs6TSKVyWi3w+T2xm5vgvl36+EIvFjucK8IDHy9nzI7z6SojPE1+xdGuR/F8LlAD09/dTXl5O7eZaAEpKStjyZF1Lw9Nb55W5xbDW8NDQi4R393Fs4DT+rX5GvxvlxMmjDQZQD/BmR/i3YDCoV2fJtpmeniZXMDA9pTxzp4+659fBzevMunbzyeU8Hx7pbfgjNBAl0tVDONLFvgMdxZGRMblydVJ+V7gyGZdobF5+jdSIXG4WOfe4yKdl8kXoCQHqOzq72N/VibnyFd6trqo2qjZVcev2bdwPesHykv1sG08trzwP9gKnoo+S9Pdy4FB3xMTAJSb6Fkgmk5P6X5iYmGB8/MLSiY9PUp3YhX/fHljTBEt3GIg+QsbfqUwOTjpZKsqnwcFDnQC+ttfaf2gLvT4B1AL1Xx7ZKWODb4vMHJNToTrR3Bv7w4ttofbvgQrt02C10CTg64j0cHjvS/S0vyzv7nlOEh/tWDbvDfeyMtynPaswuH/U/6eOcp/4F3+xsCxH/WvuAAAAAElFTkSuQmCC', - 'sDownloadImage' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUU3MjQyMUQ2QTlGMTFFM0IxRTY4MjI3MUU5MUUyMzMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUU3MjQyMUU2QTlGMTFFM0IxRTY4MjI3MUU5MUUyMzMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFRTcyNDIxQjZBOUYxMUUzQjFFNjgyMjcxRTkxRTIzMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFRTcyNDIxQzZBOUYxMUUzQjFFNjgyMjcxRTkxRTIzMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlnySxAAAADPSURBVHjaxFLBDYMwDLQjMgEf4M8E4Y0YgzHaTTpGFuDfARAdoH3DiwmQSLmqRIZSpPLpSTH4krOjc9g5R0cQIDDzgozj2Ffrum6xOTcKtqolSUJCuNlR0UH8WTiZcpPGzEaB3xVWVXVO0/QhOeTgP1rKOU7/QdM0RZ7nd2OMwxc5eHkeixEm+71aKUVhGJLWmoZhoL7vaRxHX7xtW/ZzlHOTgDiKIirL8oTcWnuZ914dsyzbfXfoCuAmdV3z15ezBgRr8Nuc4ocRXhGeAgwAFHJVgfQ6KdUAAAAASUVORK5CYII=', - 'sFullScreenImage' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkMwOTc3QTg2QTlGMTFFMzk5MzhBOTM4OEFCMzg3MTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkMwOTc3QTk2QTlGMTFFMzk5MzhBOTM4OEFCMzg3MTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQzA5NzdBNjZBOUYxMUUzOTkzOEE5Mzg4QUIzODcxNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQzA5NzdBNzZBOUYxMUUzOTkzOEE5Mzg4QUIzODcxNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvZjiPIAAAE/SURBVHjanFKxaoRAEHXhbM4UopViGWzv0C5VUvsJqdP7A/6Dfb7DMmCVSuRCunClaKUYSKUQM2+zY1SsMjDuuDtv9u3ME9M0af+xAz6u687opmnENslxnFX1uq6FhhvDMKRluofvVeczuMr9vREmhMhRmRy/F3IukhOjM7Mh4B9VNkqQq67rR9u25VnbtsdxHPkZ6zcWRfFAN2qGYVzx3/e9X1XVC2LLsnzTNK8MQK5kCL4AwcqylPTiOH4m8C1igNI0fUIcBEGu3rwGRlFkK3qvRM9XtD+I9h3iLMvaXaDneRdF78T0cHPXdW+Iif6ZgavmALClB9q0nBRw3RyMAa0mWnJzGIbvJEneOeb9hRgEK0e2mjtG9kX+qeJH8hs163lkh2UlVWAruYIlp8ShzeNYqEQqaE9ym638R4ABADZiqF446UJLAAAAAElFTkSuQmCC', - 'fFullScreenMode' : function () { - } + "useTypeUlSort" : false, + "sConfigImage": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAADFUlEQVR4XnWTbWgcVRSGnxmzs6ssbZC0/1TSTUPSaFOTaPdPStYfQURpQQRZSgMNUrMaC61Nt5sPjVVKI9pakBLRElFsaEsNCSSpIlGq1oprSxKzm4WWtDQtREsy1d2d/TzeGxIQpGd4Oee8L++5d+6dMY6+/wEApmkCUCgUsCyLYrEoKjAMQ2uG5ldCa6yGCSAimhxW+FrXmUyGXC7HzmBQZ91rXQ+/q/KQiPxvwHBl5cYXfL4NO7LZ7J/KJKVr13J1agqdde84TrGiwvfwxsqK7UUpDgv6AVNESKfTHtu+R82mGgKBQFlLyy6aAgHcLovGxkZUr/gmQ+uLto2d+ttyJEeGHPQefg/A1/3WO4uDZ87JxZ8uydj4tzI69o3Oq1jmTyv9YE/3ArAh0XeRqcgQpjokPeSaSLF0S+1mUqk0KC6eSDATixGfnSWTdRTvoHW1/XWzfT9ey5GXrFHA1Ket33H9+jL+SaawXC7i8Rg35q6fP3tmcPucynM3buJxu0k7GdyWhafqMWyvF8M0xNTX09raSnPzs6TSKVyWi3w+T2xm5vgvl36+EIvFjucK8IDHy9nzI7z6SojPE1+xdGuR/F8LlAD09/dTXl5O7eZaAEpKStjyZF1Lw9Nb55W5xbDW8NDQi4R393Fs4DT+rX5GvxvlxMmjDQZQD/BmR/i3YDCoV2fJtpmeniZXMDA9pTxzp4+659fBzevMunbzyeU8Hx7pbfgjNBAl0tVDONLFvgMdxZGRMblydVJ+V7gyGZdobF5+jdSIXG4WOfe4yKdl8kXoCQHqOzq72N/VibnyFd6trqo2qjZVcev2bdwPesHykv1sG08trzwP9gKnoo+S9Pdy4FB3xMTAJSb6Fkgmk5P6X5iYmGB8/MLSiY9PUp3YhX/fHljTBEt3GIg+QsbfqUwOTjpZKsqnwcFDnQC+ttfaf2gLvT4B1AL1Xx7ZKWODb4vMHJNToTrR3Bv7w4ttofbvgQrt02C10CTg64j0cHjvS/S0vyzv7nlOEh/tWDbvDfeyMtynPaswuH/U/6eOcp/4F3+xsCxH/WvuAAAAAElFTkSuQmCC", + "sDownloadImage" : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUU3MjQyMUQ2QTlGMTFFM0IxRTY4MjI3MUU5MUUyMzMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUU3MjQyMUU2QTlGMTFFM0IxRTY4MjI3MUU5MUUyMzMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFRTcyNDIxQjZBOUYxMUUzQjFFNjgyMjcxRTkxRTIzMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFRTcyNDIxQzZBOUYxMUUzQjFFNjgyMjcxRTkxRTIzMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlnySxAAAADPSURBVHjaxFLBDYMwDLQjMgEf4M8E4Y0YgzHaTTpGFuDfARAdoH3DiwmQSLmqRIZSpPLpSTH4krOjc9g5R0cQIDDzgozj2Ffrum6xOTcKtqolSUJCuNlR0UH8WTiZcpPGzEaB3xVWVXVO0/QhOeTgP1rKOU7/QdM0RZ7nd2OMwxc5eHkeixEm+71aKUVhGJLWmoZhoL7vaRxHX7xtW/ZzlHOTgDiKIirL8oTcWnuZ914dsyzbfXfoCuAmdV3z15ezBgRr8Nuc4ocRXhGeAgwAFHJVgfQ6KdUAAAAASUVORK5CYII=", + "sFullScreenImage" : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkMwOTc3QTg2QTlGMTFFMzk5MzhBOTM4OEFCMzg3MTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkMwOTc3QTk2QTlGMTFFMzk5MzhBOTM4OEFCMzg3MTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQzA5NzdBNjZBOUYxMUUzOTkzOEE5Mzg4QUIzODcxNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQzA5NzdBNzZBOUYxMUUzOTkzOEE5Mzg4QUIzODcxNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvZjiPIAAAE/SURBVHjanFKxaoRAEHXhbM4UopViGWzv0C5VUvsJqdP7A/6Dfb7DMmCVSuRCunClaKUYSKUQM2+zY1SsMjDuuDtv9u3ME9M0af+xAz6u687opmnENslxnFX1uq6FhhvDMKRluofvVeczuMr9vREmhMhRmRy/F3IukhOjM7Mh4B9VNkqQq67rR9u25VnbtsdxHPkZ6zcWRfFAN2qGYVzx3/e9X1XVC2LLsnzTNK8MQK5kCL4AwcqylPTiOH4m8C1igNI0fUIcBEGu3rwGRlFkK3qvRM9XtD+I9h3iLMvaXaDneRdF78T0cHPXdW+Iif6ZgavmALClB9q0nBRw3RyMAa0mWnJzGIbvJEneOeb9hRgEK0e2mjtG9kX+qeJH8hs163lkh2UlVWAruYIlp8ShzeNYqEQqaE9ym638R4ABADZiqF446UJLAAAAAElFTkSuQmCC", + "fFullScreenMode" : function () {}, + "fOnSelect": function() {} }); this.webStorage = webStorage; this.option(htOption); @@ -120,22 +121,9 @@ var BigScatterChart = $.Class({ this._initEvents(); this._drawXYAxis(); this.updateXYAxis(); - this._initTooltip( helpContentTemplate, helpContentService ); - }, - /** - * initialize tooltipster - * @ko tooltipster 를 초기화 - * @constructor - * @method BigScatterChart#_initTooltip - * @param {Service} helpContentService angularjs service object - */ - _initTooltip: function(helpContentTemplate, helpContentService) { - this._welContainer.find(".scatterTooltip").tooltipster({ - content: function() { - return helpContentTemplate(helpContentService.scatter["default"]); - }, - position: "bottom", - trigger: "click" + + setTimeout(function() { + tooltipService.init("scatter"); }); }, @@ -145,31 +133,31 @@ var BigScatterChart = $.Class({ this._aBubbleStep = []; } - var nPaddingTop = this.option('nPaddingTop'), - nPaddingLeft = this.option('nPaddingLeft'), - nPaddingBottom = this.option('nPaddingBottom'), - nPaddingRight = this.option('nPaddingRight'), - nBubbleSize = this.option('nBubbleSize'), - nWidth = this.option('nWidth'), - nHeight = this.option('nHeight'); + var nPaddingTop = this.option("nPaddingTop"), + nPaddingLeft = this.option("nPaddingLeft"), + nPaddingBottom = this.option("nPaddingBottom"), + nPaddingRight = this.option("nPaddingRight"), + nBubbleSize = this.option("nBubbleSize"), + nWidth = this.option("nWidth"), + nHeight = this.option("nHeight"); - this._nXSteps = this.option('nXSteps') - 1; - this._nYSteps = this.option('nYSteps') - 1; + this._nXSteps = this.option("nXSteps") - 1; + this._nYSteps = this.option("nYSteps") - 1; - if (this.option('nYLabel')) this._paddingLeft += 30; - if (this.option('nXLabel')) this._paddingBottom += 20; + if (this.option("nYLabel")) this._paddingLeft += 30; + if (this.option("nXLabel")) this._paddingBottom += 20; this._nXWork = (nWidth - (nPaddingLeft + nPaddingRight)) - nBubbleSize * 2; this._nYWork = (nHeight - (nPaddingTop + nPaddingBottom)) - nBubbleSize * 2; - this._nXMax = this.option('nXMax'); - this._nXMin = this.option('nXMin'); + this._nXMax = this.option("nXMax"); + this._nXMin = this.option("nXMin"); - this._nYMax = this.webStorage.get("scatter-y-max") || this.option('nYMax'); - this._nYMin = this.webStorage.get("scatter-y-min") || this.option('nYMin'); + this._nYMax = this.webStorage.get("scatter-y-max") || this.option("nYMax"); + this._nYMin = this.webStorage.get("scatter-y-min") || this.option("nYMin"); - this._nZMax = this.option('nZMax'); - this._nZMin = this.option('nZMin'); + this._nZMax = this.option("nZMax"); + this._nZMin = this.option("nZMin"); this._awelXNumber = []; this._awelYNumber = []; @@ -186,158 +174,177 @@ var BigScatterChart = $.Class({ var self = this, nXStep = this._nXWork / this._nXSteps, nYStep = this._nYWork / this._nYSteps, - nWidth = this.option('nWidth'), - nHeight = this.option('nHeight'), - nPaddingTop = this.option('nPaddingTop'), - nPaddingLeft = this.option('nPaddingLeft'), - nPaddingBottom = this.option('nPaddingBottom'), - nPaddingRight = this.option('nPaddingRight'), - nBubbleSize = this.option('nBubbleSize'), - sLineColor = this.option('sLineColor'), - htType = this.option('htTypeAndColor'), - sPrefix = this.option('sPrefix'), - nZIndexForCanvas = this.option('nZIndexForCanvas'); + nWidth = this.option("nWidth"), + nHeight = this.option("nHeight"), + nPaddingTop = this.option("nPaddingTop"), + nPaddingLeft = this.option("nPaddingLeft"), + nPaddingBottom = this.option("nPaddingBottom"), + nPaddingRight = this.option("nPaddingRight"), + nBubbleSize = this.option("nBubbleSize"), + sLineColor = this.option("sLineColor"), + htType = this.option("htTypeAndColor"), + sPrefix = this.option("sPrefix"), + nZIndexForCanvas = this.option("nZIndexForCanvas"); // container - var sContainerId = this.option('sContainerId'); - if (typeof sContainerId === 'string') { - this._welContainer = $('#' + sContainerId); - } else if (typeof sContainerId === 'object') { + var sContainerId = this.option("sContainerId"); + if (typeof sContainerId === "string") { + this._welContainer = $("#" + sContainerId); + } else if (typeof sContainerId === "object") { this._welContainer = sContainerId; - } else if (typeof sContainerId === 'function') { + } else if (typeof sContainerId === "function") { this._welContainer = sContainerId(); } - if (typeof this._welContainer !== 'object') { + if (typeof this._welContainer !== "object") { return false; } this._welContainer.css({ - 'position': 'relative', - 'width': this.option('nWidth'), - 'height': this.option('nHeight') - }).addClass('bigscatterchart'); - this._welContainer.append( $('
') ); + "position": "relative", + "width": this.option("nWidth"), + "height": this.option("nHeight") + }).addClass("bigscatterchart"); + + this._welAgentSelect = $("') .append('') @@ -607,17 +608,17 @@ var BigScatterChart = $.Class({ .append(this._welConfigCancel = $('')); this._welConfigApply.click(function () { - var nYMin = parseInt($('#' + sYMin).val(), 10), - nYMax = parseInt($('#' + sYMax).val(), 10); + var nYMin = parseInt($("#" + sYMin).val(), 10), + nYMax = parseInt($("#" + sYMax).val(), 10); if (nYMin >= nYMax) { - alert('Min of Y axis is should be smaller than ' + nYMax); + alert("Min of Y axis is should be smaller than " + nYMax); return; } self.webStorage.add( "scatter-y-min", nYMin ); self.webStorage.add( "scatter-y-max", nYMax ); - self.option('nYMin', nYMin); - self.option('nYMax', nYMax); + self.option("nYMin", nYMin); + self.option("nYMax", nYMax); fConfigToggle(); self._redraw(); }); @@ -630,84 +631,94 @@ var BigScatterChart = $.Class({ var sImageUrl = self.getChartAsPNG(); // document.location.href = sImageUrl.replace("image/png", "image/octet-stream"); $(this).attr({ - 'href': sImageUrl, - 'download': sTitle + '__' + moment(self.option('nXMin')).format("YYYYMMDD_HHmm") + '~' + moment(self.option('nXMax')).format("YYYYMMDD_HHmm") + '__response_scatter' + "href": sImageUrl, + "download": sTitle + "__" + moment(self.option("nXMin")).format("YYYYMMDD_HHmm") + "~" + moment(self.option("nXMax")).format("YYYYMMDD_HHmm") + "__response_scatter" }); // if (e) e.preventDefault(); }; - var sDownloadImage = this.option('sDownloadImage'); - this._welContainer.append(this._welDownloadButton = $('') + var sDownloadImage = this.option("sDownloadImage"); + this._welContainer.append(this._welDownloadButton = $("") .attr({ - 'href': sDownloadImage, - 'alt' : 'Download Scatter Chart', - 'title' : 'Download Scatter Chart', - 'download': sTitle + "href": sDownloadImage, + "alt" : "Download Scatter Chart", + "title" : "Download Scatter Chart", + "download": sTitle }) .css({ - 'position': 'absolute', - 'top': '29px', - 'right': '5px', - 'cursor': 'pointer', - 'z-index': nZIndexForCanvas++ + "position": "absolute", + "top": "29px", + "right": "5px", + "cursor": "pointer", + "z-index": nZIndexForCanvas++ }) .click(fDownloadToggle) ); - this._welDownloadButton.append(this._welDownloadButton = $('') + this._welDownloadButton.append(this._welDownloadButton = $("") .attr({ - 'src': sDownloadImage + "src": sDownloadImage }) ); // full screen var fFullScreenToggle = function (e) { - var fFullScreenMode = self.option('fFullScreenMode'); - if (typeof fFullScreenMode === 'function') { + var fFullScreenMode = self.option("fFullScreenMode"); + if (typeof fFullScreenMode === "function") { fFullScreenMode.call(self); } if (e) e.preventDefault(); }; - var sFullScreenImage = this.option('sFullScreenImage'); - this._welContainer.append(this._welFullScreenButton = $('') + var sFullScreenImage = this.option("sFullScreenImage"); + this._welContainer.append(this._welFullScreenButton = $("") .attr({ - 'src': sFullScreenImage, - 'alt' : 'Full Screen Mode', - 'title' : 'Full Screen Mode' + "src": sFullScreenImage, + "alt" : "Full Screen Mode", + "title" : "Full Screen Mode" }) .css({ - 'position': 'absolute', - 'top': '61px', - 'right': '5px', - 'cursor': 'pointer', - 'z-index': nZIndexForCanvas++ + "position": "absolute", + "top": "61px", + "right": "5px", + "cursor": "pointer", + "z-index": nZIndexForCanvas++ }) .click(fFullScreenToggle) ); + this._welContainer.append( $('
') ); }, _initEvents: function () { var self = this; - var htCheckBoxImage = this.option('htCheckBoxImage'); - _.each(this._htwelTypeLi, function (welTypeLi, sKey) { + var htCheckBoxImage = this.option("htCheckBoxImage"); + var sPrefix = this.option("sPrefix"); + jQuery.each(this._htwelTypeLi, function (sKey, welTypeLi) { welTypeLi.click(function (e) { if ( sKey === "Success" ) { - self.analyticsService.send(self.analyticsService.CONST.MAIN, self.analyticsService.CONST.TG_SCATTER_SUCCESS, welTypeLi.hasClass('unchecked') ? self.analyticsService.CONST.ON : self.analyticsService.CONST.OFF ); + self.analyticsService.send(self.analyticsService.CONST.MAIN, self.analyticsService.CONST.TG_SCATTER_SUCCESS, welTypeLi.hasClass("unchecked") ? self.analyticsService.CONST.ON : self.analyticsService.CONST.OFF ); } else { - self.analyticsService.send(self.analyticsService.CONST.MAIN, self.analyticsService.CONST.TG_SCATTER_FAILED, welTypeLi.hasClass('unchecked') ? self.analyticsService.CONST.ON : self.analyticsService.CONST.OFF ); + self.analyticsService.send(self.analyticsService.CONST.MAIN, self.analyticsService.CONST.TG_SCATTER_FAILED, welTypeLi.hasClass("unchecked") ? self.analyticsService.CONST.ON : self.analyticsService.CONST.OFF ); } e.preventDefault(); - self._htwelChartCanvas[sKey].toggle(); - if (!welTypeLi.hasClass('unchecked')) { - welTypeLi.addClass('unchecked') - welTypeLi.css('background-image', 'url(' + htCheckBoxImage.unchecked + ')'); + var currentAgent = self._welAgentSelect.val(); + if ( currentAgent === self._consts.ALL ) { + jQuery.each( self._htwelChartCanvas, function( k, obj ) { + if ( k.endsWith( sKey ) ) { + obj.toggle(); + } + }); + } else { + self._htwelChartCanvas[currentAgent + "-" + sPrefix + sKey].toggle(); + } + + if (!welTypeLi.hasClass("unchecked")) { + welTypeLi.addClass("unchecked").css("background-image", "url(" + htCheckBoxImage.unchecked + ")"); } else { - welTypeLi.removeClass('unchecked') - welTypeLi.css('background-image', 'url(' + htCheckBoxImage.checked + ')'); + welTypeLi.removeClass("unchecked").css("background-image", "url(" + htCheckBoxImage.checked + ")"); } }); - }, this); + }); - var sDragToSelectClassName = this.option('sDragToSelectClassName'), + var sDragToSelectClassName = this.option("sDragToSelectClassName"), bGuideLineStart = false; this._welOverlay.dragToSelect({ className: sDragToSelectClassName, @@ -716,14 +727,14 @@ var BigScatterChart = $.Class({ htXY = self._parseCoordinatesToXY(htPosition); self._welSelectBox = welSelectBox; - var fOnSelect = self.option('fOnSelect'); - if (_.isFunction(fOnSelect)) { + var fOnSelect = self.option("fOnSelect"); + if (jQuery.isFunction(fOnSelect) && self.hasDataByXY(htXY.nXFrom, htXY.nXTo, htXY.nYFrom, htXY.nYTo) ) { fOnSelect.call(self, htPosition, htXY); } welSelectBox.hide(); }, onMove: function (e) { - if (!self.option('bUseMouseGuideLine')) { + if (!self.option("bUseMouseGuideLine")) { return false; } if (self._checkMouseXYInChart(e.pageX, e.pageY)) { @@ -738,46 +749,52 @@ var BigScatterChart = $.Class({ } } }); + + this._welAgentSelect.on("change", function() { + self.selectAgent( $(this).val() ); + }); }, fireDragEvent: function( oParam ) { - var htPosition = this._adjustSelectBoxForChart(oParam), - htXY = this._parseCoordinatesToXY(htPosition); - - var fOnSelect = this.option('fOnSelect'); - if (_.isFunction(fOnSelect)) { - fOnSelect.call(this, htPosition, htXY); + var fOnSelect = this.option("fOnSelect"); + if ( jQuery.isFunction(fOnSelect) ) { + var htPosition = this._adjustSelectBoxForChart(oParam), + htXY = this._parseCoordinatesToXY(htPosition); + + if ( this.hasDataByXY(htXY.nXFrom, htXY.nXTo, htXY.nYFrom, htXY.nYTo)) { + fOnSelect.call(this, htPosition, htXY); + } + } }, selectFailedOnly: function() { var self = this; - _.each( self._htwelTypeLi, function( welTypeLi, sKey ) { + jQuery.each( self._htwelTypeLi, function( sKey, welTypeLi ) { if ( sKey === "Success" ) { self._htwelChartCanvas[sKey].hide(); - welTypeLi.addClass('unchecked') - welTypeLi.css('background-image', 'url(' + self.option('htCheckBoxImage').unchecked + ')'); + welTypeLi.addClass("unchecked") + welTypeLi.css("background-image", "url(" + self.option("htCheckBoxImage").unchecked + ")"); } else { self._htwelChartCanvas[sKey].show(); - welTypeLi.removeClass('unchecked') - welTypeLi.css('background-image', 'url(' + self.option('htCheckBoxImage').checked + ')'); + welTypeLi.removeClass("unchecked") + welTypeLi.css("background-image", "url(" + self.option("htCheckBoxImage").checked + ")"); } }); return this; }, _checkMouseXYInChart: function (nX, nY) { - var nPaddingTop = this.option('nPaddingTop'), - nPaddingLeft = this.option('nPaddingLeft'), - nPaddingBottom = this.option('nPaddingBottom'), - nPaddingRight = this.option('nPaddingRight'), - nBubbleSize = this.option('nBubbleSize'), + var nPaddingTop = this.option("nPaddingTop"), + nPaddingLeft = this.option("nPaddingLeft"), + nPaddingBottom = this.option("nPaddingBottom"), + nPaddingRight = this.option("nPaddingRight"), + nBubbleSize = this.option("nBubbleSize"), htOffset = this._welContainer.offset(), nXMin = htOffset.left + nPaddingLeft + nBubbleSize, nXMax = htOffset.left + this._welContainer.width() - nPaddingRight - nBubbleSize, nYMin = htOffset.top + nPaddingTop + nBubbleSize, nYMax = htOffset.top + this._welContainer.height() - nPaddingBottom - nBubbleSize; - if (nX >= nXMin && nX <= nXMax - && nY >= nYMin && nY <= nYMax) { + if (nX >= nXMin && nX <= nXMax && nY >= nYMin && nY <= nYMax) { return true; } else { return false; @@ -791,15 +808,15 @@ var BigScatterChart = $.Class({ _moveGuideLine: function (nX, nY) { var htOffset = this._welContainer.offset(), - nPaddingTop = this.option('nPaddingTop'), - nPaddingBottom = this.option('nPaddingBottom'), - nPaddingLeft = this.option('nPaddingLeft'), - nBubbleSize = this.option('nBubbleSize'), - nHeight = this.option('nHeight'); - this._welXGuideNumber.css('left', nX - htOffset.left); - this._welXGuideNumber.find('span').text(moment(this._parseMouseXToXData(nX - htOffset.left - nPaddingLeft - nBubbleSize)).format("HH:mm:ss")); - this._welYGuideNumber.css('top', nY - htOffset.top); - this._welYGuideNumber.find('span').text(this._addComma(this._parseMouseYToYData(nHeight - nPaddingBottom - nBubbleSize - (nY - htOffset.top)))); + nPaddingTop = this.option("nPaddingTop"), + nPaddingBottom = this.option("nPaddingBottom"), + nPaddingLeft = this.option("nPaddingLeft"), + nBubbleSize = this.option("nBubbleSize"), + nHeight = this.option("nHeight"); + this._welXGuideNumber.css("left", nX - htOffset.left); + this._welXGuideNumber.find("span").text(moment(this._parseMouseXToXData(nX - htOffset.left - nPaddingLeft - nBubbleSize)).format("HH:mm:ss")); + this._welYGuideNumber.css("top", nY - htOffset.top); + this._welYGuideNumber.find("span").text(this._addComma(this._parseMouseYToYData(nHeight - nPaddingBottom - nBubbleSize - (nY - htOffset.top)))); }, _hideGuideLine: function () { @@ -813,19 +830,19 @@ var BigScatterChart = $.Class({ var nPositionXGap = (nXGap / (this._nXMax - this._nXMin)) * this._nXWork; - var nLeft = parseInt(this._welSelectBox.css('left'), 10), + var nLeft = parseInt(this._welSelectBox.css("left"), 10), nWidth = this._welSelectBox.width(), - nPaddingLeft = this.option('nPaddingLeft'), - nBubbleSize = this.option('nBubbleSize'), + nPaddingLeft = this.option("nPaddingLeft"), + nBubbleSize = this.option("nBubbleSize"), nXMin = nPaddingLeft + nBubbleSize; var nNewLeft = nLeft - nPositionXGap; if (nLeft > nXMin) { if (nNewLeft > nXMin) { - this._welSelectBox.css('left', nNewLeft); + this._welSelectBox.css("left", nNewLeft); } else { - this._welSelectBox.css('left', nXMin); + this._welSelectBox.css("left", nXMin); this._welSelectBox.width(nWidth + nNewLeft); } } else { @@ -833,29 +850,27 @@ var BigScatterChart = $.Class({ } if (nLeft - nPositionXGap > nPaddingLeft + nBubbleSize) { - this._welSelectBox.css('left', nLeft - nPositionXGap); - } else { - + this._welSelectBox.css("left", nLeft - nPositionXGap); } }, _adjustSelectBoxForChart: function (welSelectBox) { - var nPaddingTop = this.option('nPaddingTop'), - nPaddingLeft = this.option('nPaddingLeft'), - nPaddingBottom = this.option('nPaddingBottom'), - nPaddingRight = this.option('nPaddingRight'), - nWidth = this.option('nWidth'), - nHeight = this.option('nHeight'), - nBubbleSize = this.option('nBubbleSize'); + var nPaddingTop = this.option("nPaddingTop"), + nPaddingLeft = this.option("nPaddingLeft"), + nPaddingBottom = this.option("nPaddingBottom"), + nPaddingRight = this.option("nPaddingRight"), + nWidth = this.option("nWidth"), + nHeight = this.option("nHeight"), + nBubbleSize = this.option("nBubbleSize"); var nMinLeft = nPaddingLeft + nBubbleSize, nMaxRight = nWidth - nPaddingRight - nBubbleSize, nMinTop = nPaddingTop + nBubbleSize, nMaxBottom = nHeight - nPaddingBottom - nBubbleSize; - var nLeft = parseInt(welSelectBox.css('left'), 10), + var nLeft = parseInt(welSelectBox.css("left"), 10), nRight = nLeft + welSelectBox.width(), - nTop = parseInt(welSelectBox.css('top'), 10), + nTop = parseInt(welSelectBox.css("top"), 10), nBottom = nTop + welSelectBox.height(); if (nLeft < nMinLeft) { @@ -872,34 +887,33 @@ var BigScatterChart = $.Class({ } welSelectBox.animate({ - 'left': nLeft, - 'width': nRight - nLeft, - 'top': nTop, - 'height': nBottom - nTop + "left": nLeft, + "width": nRight - nLeft, + "top": nTop, + "height": nBottom - nTop }, 200); - var htPosition = { - 'nLeft': nLeft, - 'nWidth': nRight - nLeft, - 'nTop': nTop, - 'nHeight': nBottom - nTop - }; - return htPosition; + return { + "nLeft": nLeft, + "nWidth": nRight - nLeft, + "nTop": nTop, + "nHeight": nBottom - nTop + }; }, _parseCoordinatesToXY: function (htPosition) { - var nPaddingTop = this.option('nPaddingTop'), - nPaddingLeft = this.option('nPaddingLeft'), - nPaddingBottom = this.option('nPaddingBottom'), - nPaddingRight = this.option('nPaddingRight'), - nWidth = this.option('nWidth'), - nHeight = this.option('nHeight'), - nBubbleSize = this.option('nBubbleSize'); + var nPaddingTop = this.option("nPaddingTop"), + nPaddingLeft = this.option("nPaddingLeft"), + nPaddingBottom = this.option("nPaddingBottom"), + nPaddingRight = this.option("nPaddingRight"), + nWidth = this.option("nWidth"), + nHeight = this.option("nHeight"), + nBubbleSize = this.option("nBubbleSize"); var htXY = { - 'nXFrom': htPosition.nLeft - nPaddingLeft - nBubbleSize, - 'nXTo': htPosition.nLeft + htPosition.nWidth - nPaddingLeft - nBubbleSize, - 'nYFrom': (nHeight - (nPaddingBottom + nBubbleSize)) - (htPosition.nTop + htPosition.nHeight), - 'nYTo': (nHeight - (nPaddingBottom + nBubbleSize)) - (htPosition.nTop) + "nXFrom": htPosition.nLeft - nPaddingLeft - nBubbleSize, + "nXTo": htPosition.nLeft + htPosition.nWidth - nPaddingLeft - nBubbleSize, + "nYFrom": (nHeight - (nPaddingBottom + nBubbleSize)) - (htPosition.nTop + htPosition.nHeight), + "nYTo": (nHeight - (nPaddingBottom + nBubbleSize)) - (htPosition.nTop) }; htXY.nXFrom = this._parseMouseXToXData(htXY.nXFrom); htXY.nXTo = this._parseMouseXToXData(htXY.nXTo); @@ -909,19 +923,19 @@ var BigScatterChart = $.Class({ }, _drawXYAxis: function () { - var nPaddingTop = this.option('nPaddingTop'), - nPaddingLeft = this.option('nPaddingLeft'), - nPaddingBottom = this.option('nPaddingBottom'), - nPaddingRight = this.option('nPaddingRight'), - nBubbleSize = this.option('nBubbleSize'), - nWidth = this.option('nWidth'), - nHeight = this.option('nHeight'), - sLineColor = this.option('sLineColor'), - htGuideLine = this.option('htGuideLine'); + var nPaddingTop = this.option("nPaddingTop"), + nPaddingLeft = this.option("nPaddingLeft"), + nPaddingBottom = this.option("nPaddingBottom"), + nPaddingRight = this.option("nPaddingRight"), + nBubbleSize = this.option("nBubbleSize"), + nWidth = this.option("nWidth"), + nHeight = this.option("nHeight"), + sLineColor = this.option("sLineColor"), + htGuideLine = this.option("htGuideLine"); this._oAxisCtx.lineWidth = htGuideLine.nLineWidth; this._oAxisCtx.globalAlpha = 1; - this._oAxisCtx.lineCap = 'round'; + this._oAxisCtx.lineCap = "round"; this._oAxisCtx.strokeStyle = sLineColor; this._oAxisCtx.beginPath(); this._moveTo(this._oAxisCtx, nPaddingLeft, nPaddingTop); @@ -988,38 +1002,39 @@ var BigScatterChart = $.Class({ }, updateXYAxis: function (nXMin, nXMax, nYMin, nYMax) { - if (_.isNumber(nXMin)) { - this._nXMin = this.option('nXMin', nXMin); + var self = this; + if (jQuery.isNumeric(nXMin)) { + this._nXMin = this.option("nXMin", nXMin); } - if (_.isNumber(nXMax)) { - this._nXMax = this.option('nXMin', nXMax); + if (jQuery.isNumeric(nXMax)) { + this._nXMax = this.option("nXMin", nXMax); } - if (_.isNumber(nYMin)) { - this._nYMin = this.option('nYMin', nYMin); + if (jQuery.isNumeric(nYMin)) { + this._nYMin = this.option("nYMin", nYMin); } - if (_.isNumber(nYMin)) { - this._nYMax = this.option('nYMax', nYMax); + if (jQuery.isNumeric(nYMin)) { + this._nYMax = this.option("nYMax", nYMax); } - var fXAxisFormat = this.option('fXAxisFormat'), + var fXAxisFormat = this.option("fXAxisFormat"), nXStep = (this._nXMax - this._nXMin) / this._nXSteps; - _.each(this._awelXNumber, function (el, i) { - if (_.isFunction(fXAxisFormat)) { - el.html(fXAxisFormat.call(this, nXStep, i)); + jQuery.each(this._awelXNumber, function (i, el) { + if (jQuery.isFunction(fXAxisFormat)) { + el.html(fXAxisFormat.call(self, nXStep, i)); } else { - el.html((xstep * i + this._nXMin).round()); + el.html((xstep * i + self._nXMin).round()); } - }, this); + }); - var fYAxisFormat = this.option('fYAxisFormat'), + var fYAxisFormat = this.option("fYAxisFormat"), nYStep = (this._nYMax - this._nYMin) / this._nYSteps; - _.each(this._awelYNumber, function (el, i) { - if (_.isFunction(fXAxisFormat)) { - el.text(fYAxisFormat.call(this, nYStep, i)); + jQuery.each(this._awelYNumber, function (i, el) { + if (jQuery.isFunction(fXAxisFormat)) { + el.text(fYAxisFormat.call(self, nYStep, i)); } else { - el.text(this._addComma((this._nYMax + this._nYMin) - ((nYStep * i) + this._nYMin))); + el.text(self._addComma((self._nYMax + self._nYMin) - ((nYStep * i) + self._nYMin))); } - }, this) + }); }, setBubbles: function (aBubbles) { @@ -1029,97 +1044,106 @@ var BigScatterChart = $.Class({ this.addBubbles(aBubbles); }, - addBubbles: function (aBubbles, htTypeCount) { - if (_.isArray(this._aBubbles) === false) return; - this._aBubbles.push(aBubbles); - - var htTypeCount = htTypeCount || this._countPerType(aBubbles), - htDataSource = this.option('htDataSource'), - htDataIndex = htDataSource.index, - htDataType = htDataSource.type; - var htBubble = { - 'nXMin': aBubbles[0].x, - 'nXMax': aBubbles[aBubbles.length - 1][htDataIndex.x], - 'nYMin': (_.min(aBubbles, function (a) { - return a[htDataIndex.y]; - })).y, - 'nYMax': (_.max(aBubbles, function (a) { - return a[htDataIndex.y]; - })).y, - 'nLength': aBubbles.length, - 'htTypeCount': {} - }; - var htType = this.option('htTypeAndColor'); - _.each(htType, function (sVal, sKey) { - htBubble.htTypeCount[sKey] = htTypeCount[sKey]; - }, this); - + addBubbles: function (oBubbles) { + var self = this; + if (jQuery.isArray(this._aBubbles) === false) return; + this._aBubbles.push(oBubbles); + + var htDataIndex = this.option("htDataSource").index; + var htBubble = {}; + for( var p in oBubbles ) { + var aBubbles = oBubbles[p]; + var htTypeCount = self._countPerType(aBubbles); + + var oBubble = { + "nXMin": aBubbles[0][htDataIndex.x], + "nXMax": aBubbles[aBubbles.length - 1][htDataIndex.x], + "nYMin": (_.min(aBubbles, function (a) { + return a[htDataIndex.y]; + }))[htDataIndex.y], + "nYMax": (_.max(aBubbles, function (a) { + return a[htDataIndex.y]; + }))[htDataIndex.y], + "nLength": aBubbles.length, + "htTypeCount": {} + }; + var htType = self.option("htTypeAndColor"); + jQuery.each(htType, function (sKey, sVal) { + oBubble.htTypeCount[sKey] = htTypeCount[sKey]; + }); + + htBubble[p] = oBubble; + } this._aBubbleStep.push(htBubble); }, _countPerType: function (aBubbles) { - var aBubbles = aBubbles, - htTypeCount = {}, - htDataSource = this.option('htDataSource'), + var self = this; + var htTypeCount = {}, + htDataSource = this.option("htDataSource"), htDataIndex = htDataSource.index, htDataType = htDataSource.type; - if (_.isArray(aBubbles) && aBubbles.length > 0) { - for (var i = 0, nLen = aBubbles.length; i < nLen; i++) { - if (_.isNumber(htTypeCount[htDataType[aBubbles[i][htDataIndex.type]]]) === false) { - htTypeCount[htDataType[aBubbles[i][htDataIndex.type]]] = 0; - } - htTypeCount[htDataType[aBubbles[i][htDataIndex.type]]] += 1; - } - } - _.each(htTypeCount, function (sVal, sKey) { - this._htTypeCount[sKey] += htTypeCount[sKey]; - }, this); + + for (var i = 0, nLen = aBubbles.length; i < nLen; i++) { + if (jQuery.isNumeric(htTypeCount[htDataType[aBubbles[i][htDataIndex.type]]]) === false) { + htTypeCount[htDataType[aBubbles[i][htDataIndex.type]]] = 0; + } + htTypeCount[htDataType[aBubbles[i][htDataIndex.type]]] += 1; + } + jQuery.each(htTypeCount, function (sKey, sVal) { + self._htTypeCount[sKey] += htTypeCount[sKey]; + }); return htTypeCount; }, _resetTypeCount: function () { + var self = this; this._htTypeCount = {}; - var htType = this.option('htTypeAndColor'); - _.each(htType, function (sVal, sKey) { - this._htTypeCount[sKey] = 0; - }, this); + jQuery.each(this.option("htTypeAndColor"), function (sKey, sVal) { + self._htTypeCount[sKey] = 0; + }); }, _recountAllPerType: function () { + var self = this; var aBubbles = this._aBubbles, - htDataSource = this.option('htDataSource'), + htDataSource = this.option("htDataSource"), htDataIndex = htDataSource.index, htDataType = htDataSource.type; this._resetTypeCount(); for (var i = 0, nLen = aBubbles.length; i < nLen; i++) { - for (var j = 0, nLen2 = aBubbles[i].length; j < nLen2; j++) { - this._htTypeCount[htDataType[aBubbles[i][j][htDataIndex.type]]] += 1; - } + var oBubbles = aBubbles[i]; + for( var p in oBubbles ) { + var aSectionBubble = oBubbles[p]; + var nLen2 = aSectionBubble.length; + for (var j = 0 ; j < nLen2; j++) { + self._htTypeCount[htDataType[aSectionBubble[j][htDataIndex.type]]] += 1; + } + } } return this._htTypeCount; }, _showTypeCount: function () { - _.each(this._htTypeCount, function (sVal, sKey) { - this._htwelTypeSpan[sKey].text(this._addComma(sVal)); - }, this); + var self = this; + jQuery.each(this._htTypeCount, function (sKey, sVal) { + self._htwelTypeSpan[sKey].text(self._addComma(sVal)); + }); }, _addComma: function (nNumber) { - var sNumber = nNumber + ''; + var sNumber = nNumber + ""; var sPattern = /(-?[0-9]+)([0-9]{3})/; while (sPattern.test(sNumber)) { sNumber = sNumber.replace(sPattern, "$1,$2"); } return sNumber; }, - _removeComma: function (sNumber) { - return parseInt(sNumber.replace(/\,/g, ''), 10); + return parseInt(sNumber.replace(/\,/g, ""), 10); }, - redrawBubbles: function () { this._recountAllPerType(); this._showTypeCount(); @@ -1128,34 +1152,37 @@ var BigScatterChart = $.Class({ if (this._aBubbles.length > 0) { this._hideNoData(); } - for (var i = 0, nLen = this._aBubbles.length; i < nLen; i++) { - this._drawBubbules(this._aBubbles[i]); + this._drawBubbles(this._aBubbles[i]); } }, clear: function () { - var nPaddingLeft = this.option('nPaddingLeft'), - nPaddingBottom = this.option('nPaddingBottom'), - nWidth = this.option('nWidth'), - nHeight = this.option('nHeight'), - htType = this.option('htTypeAndColor'), - sDragToSelectClassName = this.option('sDragToSelectClassName'); - - _.each(htType, function (sVal, sKey) { - this._htBubbleCtx[sKey].clearRect(0, 0, nWidth, nHeight); - }, this); + var self = this; + var nPaddingLeft = this.option("nPaddingLeft"), + nPaddingBottom = this.option("nPaddingBottom"), + nWidth = this.option("nWidth"), + nHeight = this.option("nHeight"), + htType = this.option("htTypeAndColor"), + sPrefix = this.option("sPrefix"), + sDragToSelectClassName = this.option("sDragToSelectClassName"); + + jQuery.each( this._aAgentList, function( index, agentName ) { + jQuery.each(htType, function (sKey, sVal) { + self._htBubbleCtx[agentName + "-" + sPrefix + sKey].clearRect(0, 0, nWidth, nHeight); + }); + }); this._resetTypeCount(); this._showTypeCount(); this._aBubbles = []; this._aBubbleStep = []; this._showNoData(); - this._welContainer.find('.' + sDragToSelectClassName).hide(); + this._welContainer.find("." + sDragToSelectClassName).hide(); }, addBubbleAndDraw: function (aBubbles) { - if (_.isArray(aBubbles) === false || aBubbles.length === 0) { + if (jQuery.isArray(aBubbles) === false || aBubbles.length === 0) { return; } if (aBubbles.length > 0) { @@ -1164,44 +1191,61 @@ var BigScatterChart = $.Class({ this.addBubbles(aBubbles); this._showTypeCount(); - this._drawBubbules(aBubbles); + this._drawBubbles(aBubbles); }, - _drawBubbules: function (aBubbles) { - var nPaddingTop = this.option('nPaddingTop'), - nPaddingLeft = this.option('nPaddingLeft'), - nPaddingBottom = this.option('nPaddingBottom'), - nPaddingRight = this.option('nPaddingRight'), - nBubbleSize = this.option('nBubbleSize'), - htTypeAndColor = this.option('htTypeAndColor'), - nDefaultRadius = this.option('nDefaultRadius'), - htDataSource = this.option('htDataSource'), + _drawBubbles: function (oBubbles) { + var self = this; + var htTypeAndColor = this.option("htTypeAndColor"), + nDefaultRadius = this.option("nDefaultRadius"), + htDataSource = this.option("htDataSource"), htDataIndex = htDataSource.index, - htDataType = htDataSource.type; - - //this._oChartCtx.lineWidth = 1; - setTimeout(function () { - for (var i = 0, nLen = aBubbles.length; i < nLen && !this._bDestroied; i++) { - var x = this._parseXDataToXChart(this._checkXMinMax(aBubbles[i][htDataIndex.x])), - y = this._parseYDataToYChart(this._checkYMinMax(aBubbles[i][htDataIndex.y])), - r = this._parseZDataToZChart(aBubbles[i].r || nDefaultRadius), - a = aBubbles[i][htDataIndex.y] / this._nYMax * 0.7, - sThisType = htDataType[aBubbles[i][htDataIndex.type]]; - - this._htBubbleCtx[sThisType].beginPath(); - // this._htBubbleCtx[sThisType].globalAlpha = 0.8; - this._htBubbleCtx[sThisType].fillStyle = htTypeAndColor[sThisType]; - this._htBubbleCtx[sThisType].strokeStyle = htTypeAndColor[sThisType]; - this._htBubbleCtx[sThisType].arc(x, y, r, 0, Math.PI * 2, true); - this._htBubbleCtx[sThisType].globalAlpha = 0.3 + a; - //this._htBubbleCtx[sThisType].stroke(); - this._htBubbleCtx[sThisType].fill(); - - aBubbles[i].realx = x; - aBubbles[i].realy = y; - aBubbles[i].realz = r; - } - }.bind(this)); + htDataType = htDataSource.type, + sPrefix = this.option("sPrefix"); + + setTimeout(function () { + jQuery.each( oBubbles, function( agentName , aBubbleData ) { + for (var i = 0, nLen = aBubbleData.length; i < nLen && !self._bDestroied; i++) { + var x = self._parseXDataToXChart(self._checkXMinMax(aBubbleData[i][htDataIndex.x])), + y = self._parseYDataToYChart(self._checkYMinMax(aBubbleData[i][htDataIndex.y])), + r = self._parseZDataToZChart(aBubbleData[i].r || nDefaultRadius), + a = aBubbleData[i][htDataIndex.y] / self._nYMax * 0.7, + sThisType = htDataType[aBubbleData[i][htDataIndex.type]], + key = agentName + "-" + sPrefix + sThisType; + + self._htBubbleCtx[key].beginPath(); + self._htBubbleCtx[key].fillStyle = htTypeAndColor[sThisType]; + self._htBubbleCtx[key].strokeStyle = htTypeAndColor[sThisType]; + self._htBubbleCtx[key].arc(x, y, r, 0, Math.PI * 2, true); + self._htBubbleCtx[key].globalAlpha = 0.3 + a; + self._htBubbleCtx[key].fill(); + + aBubbleData[i].realx = x; + aBubbleData[i].realy = y; + aBubbleData[i].realz = r; + } + }); + }); + //setTimeout(function () { + // for (var i = 0, nLen = aBubbles.length; i < nLen && !this._bDestroied; i++) { + // var x = this._parseXDataToXChart(this._checkXMinMax(aBubbles[i][htDataIndex.x])), + // y = this._parseYDataToYChart(this._checkYMinMax(aBubbles[i][htDataIndex.y])), + // r = this._parseZDataToZChart(aBubbles[i].r || nDefaultRadius), + // a = aBubbles[i][htDataIndex.y] / this._nYMax * 0.7, + // sThisType = htDataType[aBubbles[i][htDataIndex.type]]; + // + // this._htBubbleCtx[sThisType].beginPath(); + // this._htBubbleCtx[sThisType].fillStyle = htTypeAndColor[sThisType]; + // this._htBubbleCtx[sThisType].strokeStyle = htTypeAndColor[sThisType]; + // this._htBubbleCtx[sThisType].arc(x, y, r, 0, Math.PI * 2, true); + // this._htBubbleCtx[sThisType].globalAlpha = 0.3 + a; + // this._htBubbleCtx[sThisType].fill(); + // + // aBubbles[i].realx = x; + // aBubbles[i].realy = y; + // aBubbles[i].realz = r; + // } + //}.bind(this)); }, _checkXMinMax: function (nX) { @@ -1225,8 +1269,8 @@ var BigScatterChart = $.Class({ }, _parseXDataToXChart: function (nX) { - var nPaddingLeft = this.option('nPaddingLeft'), - nBubbleSize = this.option('nBubbleSize'); + var nPaddingLeft = this.option("nPaddingLeft"), + nBubbleSize = this.option("nBubbleSize"); return Math.round(((nX - this._nXMin) / (this._nXMax - this._nXMin)) * this._nXWork) + nPaddingLeft + nBubbleSize; }, @@ -1235,8 +1279,8 @@ var BigScatterChart = $.Class({ }, _parseYDataToYChart: function (nY) { - var nPaddingTop = this.option('nPaddingTop'), - nBubbleSize = this.option('nBubbleSize'); + var nPaddingTop = this.option("nPaddingTop"), + nBubbleSize = this.option("nBubbleSize"); return Math.round(this._nYWork - (((nY - this._nYMin) / (this._nYMax - this._nYMin)) * this._nYWork)) + nPaddingTop + nBubbleSize; }, @@ -1245,121 +1289,109 @@ var BigScatterChart = $.Class({ }, _parseZDataToZChart: function (nZ) { - var nBubbleSize = this.option('nBubbleSize'); + var nBubbleSize = this.option("nBubbleSize"); return Math.round(((nZ - this._nZMin) / (this._nZMax - this._nZMin)) * (nBubbleSize)); }, - addBubbleAndMoveAndDraw: function (aBubbles, nXMax) { - var nPaddingLeft = this.option('nPaddingLeft'), - nBubbleSize = this.option('nBubbleSize'), - nWidth = this.option('nWidth'), - nHeight = this.option('nHeight'); - - if (_.isArray(aBubbles) === false || aBubbles.length === 0) { + //addBubbleAndMoveAndDraw: function (aBubbles, nXMax) { + addBubbleAndMoveAndDraw: function (oBubbles, nXMax) { + if (jQuery.isPlainObject(oBubbles) === false || this._isEmpty( oBubbles ) ) { return; } else { this._hideNoData(); } + var self = this; + var nPaddingLeft = this.option("nPaddingLeft"), + nBubbleSize = this.option("nBubbleSize"), + nWidth = this.option("nWidth"), + nHeight = this.option("nHeight"); + if (nXMax > this._nXMax) { var nXGap = nXMax - this._nXMax; var nX = nXGap + this._nXMin; var nXWidth = Math.round(((nX - this._nXMin) / (this._nXMax - this._nXMin)) * this._nXWork); this._moveSelectBox(nXGap); - this._moveChartLeftwardly(nPaddingLeft + nBubbleSize + nXWidth, 0, nWidth - nXWidth, nHeight); + this._moveChartLeftwardly(nPaddingLeft + nBubbleSize + fnXWidth, 0, nWidth - nXWidth, nHeight); this._nXMax = nXMax; this._nXMin += nXGap; this._removeOldDataLessThan(this._nXMin); } - this.addBubbles(aBubbles); + this.addBubbles(oBubbles); this._showTypeCount(); - this._drawBubbules(aBubbles); // takes on average 33 ~ 45 ms - //this.redrawBubbles(); // takes on average 2629 ~ 3526 ms, around 90 ~ 100 times longer compared to _drawBubbules + this._drawBubbles(oBubbles); // takes on average 33 ~ 45 ms + //this.redrawBubbles(); // takes on average 2629 ~ 3526 ms, around 90 ~ 100 times longer compared to _drawBubbles this.updateXYAxis(); - - // _drawBubbules: 35.000ms - // _drawBubbules: 44.000ms - // _drawBubbules: 43.000ms - // _drawBubbules: 43.000ms - // _drawBubbules: 45.000ms - // _drawBubbules: 36.000ms - // _drawBubbules: 37.000ms - // _drawBubbules: 36.000ms - // _drawBubbules: 33.000ms - // - // redrawBubbles: 3468.000ms - // redrawBubbles: 3526.000ms - // redrawBubbles: 3481.000ms - // redrawBubbles: 3446.000ms - // redrawBubbles: 3478.000ms - // redrawBubbles: 3425.000ms - // redrawBubbles: 2784.000ms - // redrawBubbles: 2685.000ms - // redrawBubbles: 2629.000ms }, _removeOldDataLessThan: function (nX) { - // may cause some slowdowns, but it won't affect rendering much + // may cause some slowdowns, but it won"t affect rendering much // takes a long time sending/receiving arrays, even when using walker - var aBubbles = this._aBubbles || [], - aIndexToBeRemoved = [], - htType = this.option('htTypeAndColor'), - htDataSource = this.option('htDataSource'), - htDataIndex = htDataSource.index, - htDataType = htDataSource.type; - - outerLoop: - for (var i = 0, nLen = aBubbles.length; i < nLen; i++) { - var htTypeCountToBeRemoved = {}; - _.each(htType, function (sVal, sKey) { - htTypeCountToBeRemoved[sKey] = 0; - }, this); - - if (this._aBubbleStep[i].nXMin <= nX) { - for (var j = 0, nLen2 = aBubbles[i].length; j < nLen2; j++) { - htTypeCountToBeRemoved[aBubbles[i][j][htDataType[htDataIndex.type]]] += 1; - if (aBubbles[i][j].x > nX || j === nLen2 - 1) { - aBubbles[i].splice(0, j + 1); - this._aBubbleStep[i].nXMin = nX; - this._aBubbleStep[i].nLength = aBubbles[i].length; - - _.each(htTypeCountToBeRemoved, function (sVal, sKey) { - this._aBubbleStep[i]['htTypeCount'][sKey] -= sVal; - this._htTypeCount[sKey] -= sVal; - }, this); - - if (aBubbles[i].length === 0) { - aIndexToBeRemoved.push(i); - } - break outerLoop; - } - } - } - } - for (var i = 0, nLen = aIndexToBeRemoved.length; i < nLen; i++) { - aBubbles.splice(aIndexToBeRemoved[i], 1); - this._aBubbleStep.splice(aIndexToBeRemoved[i], 1); - } - return; + //var self = this; + //var aBubbles = this._aBubbles || [], + // aIndexToBeRemoved = [], + // htType = this.option("htTypeAndColor"), + // htDataSource = this.option("htDataSource"), + // htDataIndex = htDataSource.index, + // htDataType = htDataSource.type; + // + //outerLoop: + // for (var i = 0, nLen = aBubbles.length; i < nLen; i++) { + // var htTypeCountToBeRemoved = {}; + // jQuery.each(htType, function (sKey, sVal) { + // htTypeCountToBeRemoved[sKey] = 0; + // }); + // + // if (this._aBubbleStep[i].nXMin <= nX) { + // for (var j = 0, nLen2 = aBubbles[i].length; j < nLen2; j++) { + // htTypeCountToBeRemoved[aBubbles[i][j][htDataType[htDataIndex.type]]] += 1; + // if (aBubbles[i][j].x > nX || j === nLen2 - 1) { + // aBubbles[i].splice(0, j + 1); + // this._aBubbleStep[i].nXMin = nX; + // this._aBubbleStep[i].nLength = aBubbles[i].length; + // + // jQuery.each(htTypeCountToBeRemoved, function (sKey, sVal) { + // self._aBubbleStep[i]["htTypeCount"][sKey] -= sVal; + // self._htTypeCount[sKey] -= sVal; + // }); + // + // if (aBubbles[i].length === 0) { + // aIndexToBeRemoved.push(i); + // } + // break outerLoop; + // } + // } + // } + // } + //for (var i = 0, nLen = aIndexToBeRemoved.length; i < nLen; i++) { + // aBubbles.splice(aIndexToBeRemoved[i], 1); + // this._aBubbleStep.splice(aIndexToBeRemoved[i], 1); + //} + //return; }, _moveChartLeftwardly: function (x, y, width, height) { - var nPaddingLeft = this.option('nPaddingLeft'), - nBubbleSize = this.option('nBubbleSize'), - htType = this.option('htTypeAndColor'); - - _.each(htType, function (sVal, sKey) { - var aImgData = this._htBubbleCtx[sKey].getImageData(x, y, width, height); - this._htBubbleCtx[sKey].putImageData(aImgData, nPaddingLeft + nBubbleSize, 0); - }, this); + var self = this; + var nPaddingLeft = this.option("nPaddingLeft"), + nBubbleSize = this.option("nBubbleSize"), + htType = this.option("htTypeAndColor"), + sPrefix = this.option("sPrefix"); + + jQuery.each(this._aAgentList, function( index, agentName ) { + jQuery.each(htType, function (sKey, sVal) { + var saveKey = agentName + "-" + sPrefix + sKey; + var aImgData = self._htBubbleCtx[saveKey].getImageData(x, y, width, height); + self._htBubbleCtx[saveKey].putImageData(aImgData, nPaddingLeft + nBubbleSize, 0); + }); + }); }, + //@@eye 범위(영역)내에 속한 데이터를 뽑아냄 getDataByXY: function (nXFrom, nXTo, nYFrom, nYTo) { var aBubbleStep = this._aBubbleStep, aBubbles = this._aBubbles, aData = [], - bStarted = false, - htDataSource = this.option('htDataSource'), + htDataSource = this.option("htDataSource"), htDataIndex = htDataSource.index, htDataType = htDataSource.type; @@ -1369,89 +1401,39 @@ var BigScatterChart = $.Class({ nYTo = parseInt(nYTo, 10); var aVisibleType = []; - _.each(this._htwelTypeLi, function (welTypeLi, sKey) { - if (welTypeLi.hasClass('unchecked') === false) { + jQuery.each(this._htwelTypeLi, function (sKey, welTypeLi) { + if (welTypeLi.hasClass("unchecked") === false) { aVisibleType.push(sKey); } - }, this); + }); - // console.time('getDataByXY'); - // tried to improve performance to no avail..it even takes a bit longer -_-;; + var currentAgent = this._welAgentSelect.val(); for (var i = 0, nLen = aBubbleStep.length; i < nLen; i++) { - // if(nXFrom <= aBubbleStep[i].nXMin && nXTo >= aBubbleStep[i].nXMax - // && nYFrom <= aBubbleStep[i].nYMin && nYTo >= aBubbleStep[i].nYMax){ // xFrom -- min ======= max ---- nTo - // aData = aData.concat(aBubbles[i]); - // }else if(nXFrom >= aBubbleStep[i].nXMin && nXFrom <= aBubbleStep[i].nXMax){ // min ----- xFrom ====== max - // for(var j=0, nLen2=aBubbleStep[i].nLength; j= nXFrom && aBubbles[i][j].x <= nXTo){ // use the first one as reference - // //aData = aData.concat(aBubbles[i].slice(j)); - // //break; - // if(nYFrom <= aBubbles[i][j].y && nYTo >= aBubbles[i][j].y){ - // console.log('a', i, j); - // aData.push(aBubbles[i][j]); - // } - // } - // } - // }else if(nXTo >= aBubbleStep[i].nXMin && nXTo <= aBubbleStep[i].nXMax){ // min ====== xTo ---- max - // for(var j=0, nLen2=aBubbleStep[i].nLength; j= nXFrom && aBubbles[i][j].x <= nXTo){ - // //aData = aData.concat(aBubbles[i].slice(0, j-1)); // use the first one as reference - // //break; - // if(nYFrom <= aBubbles[i][j].y && nYTo >= aBubbles[i][j].y){ - // console.log('b', i, j); - // aData.push(aBubbles[i][j]); - // } - // } - // } - // }else if(nXFrom >= aBubbleStep[i].nXMin || nXTo <= aBubbleStep[i].nXMax){ - // console.log('i', i, aBubbleStep[i].nXMin, aBubbleStep[i].nXMax); - // for(var j=0, nLen2=aBubbleStep[i].nLength; j= nXFrom && aBubbles[i][j].x <= nXTo - // && aBubbles[i][j].y >= nYFrom && aBubbles[i][j].y <= nYTo){ - // console.log('b', i, j); - // aData.push(aBubbles[i][j]); - // } - // } - // }else if((nXFrom >= aBubbleStep[i].nXMin && nXFrom <= aBubbleStep[i].nXMax) || bStarted){ - // bStarted = true; - // if(nXTo >= aBubbleStep[i].nXMin){ - // console.log('i', i); - // for(var j=0, nLen2=aBubbleStep[i].nLength; j= nXFrom && aBubbles[i][j].x <= nXTo - // && aBubbles[i][j].y >= nYFrom && aBubbles[i][j].y <= nYTo){ - // //console.log('c', i, j); - // aData.push(aBubbles[i][j]); - // } - // } - // }else{ - // break; - // } - // }else{ - for (var j = 0, nLen2 = aBubbleStep[i].nLength; j < nLen2; j++) { - if (aBubbles[i][j][htDataIndex.x] >= nXFrom && aBubbles[i][j][htDataIndex.x] <= nXTo - && _.indexOf(aVisibleType, htDataType[aBubbles[i][j][htDataIndex.type]]) >= 0) { - - if (aBubbles[i][j][htDataIndex.y] >= nYFrom && aBubbles[i][j][htDataIndex.y] <= nYTo - || nYTo === this._nYMax && nYTo < aBubbles[i][j][htDataIndex.y]) { - aData.push(aBubbles[i][j]); - } - } - // if(aBubbles[i][j].x >= nXFrom && aBubbles[i][j].x <= nXTo - // && aBubbles[i][j].y >= nYFrom && aBubbles[i][j].y <= nYTo - // && _.indexOf(aVisibleType, aBubbles[i][j].type) >= 0){ - // aData.push(aBubbles[i][j]); - // } - } - // } + var oBubbleStep = aBubbleStep[i]; + for( var p in oBubbleStep ) { + if ( currentAgent === self._consts.ALL || currentAgent == p ) { + var aBubbleStepData = oBubbleStep[p]; + for (var j = 0, nLen2 = aBubbleStepData.nLength; j < nLen2; j++) { + var oBubbleData = aBubbles[i][p][j]; + if (oBubbleData[htDataIndex.x] >= nXFrom && oBubbleData[htDataIndex.x] <= nXTo + && _.indexOf(aVisibleType, htDataType[oBubbleData[htDataIndex.type]]) >= 0) { + + if (oBubbleData[htDataIndex.y] >= nYFrom && oBubbleData[htDataIndex.y] <= nYTo + || nYTo === this._nYMax && nYTo < oBubbleData[htDataIndex.y]) { + aData.push(oBubbleData); + } + } + } + } + } } - // console.timeEnd('getDataByXY'); return aData; }, hasDataByXY: function (nXFrom, nXTo, nYFrom, nYTo) { var aBubbleStep = this._aBubbleStep, aBubbles = this._aBubbles, - htDataSource = this.option('htDataSource'), + htDataSource = this.option("htDataSource"), htDataIndex = htDataSource.index, htDataType = htDataSource.type; @@ -1461,20 +1443,25 @@ var BigScatterChart = $.Class({ nYTo = parseInt(nYTo, 10); var aVisibleType = []; - _.each(this._htwelTypeLi, function (welTypeLi, sKey) { - if (welTypeLi.hasClass('unchecked') === false) { + jQuery.each(this._htwelTypeLi, function (sKey, welTypeLi) { + if (welTypeLi.hasClass("unchecked") === false) { aVisibleType.push(sKey); } - }, this); - - for (var i = 0, nLen = aBubbleStep.length; i < nLen; i++) { - for (var j = 0, nLen2 = aBubbleStep[i].nLength; j < nLen2; j++) { - if (aBubbles[i][j][htDataIndex.x] >= nXFrom && aBubbles[i][j][htDataIndex.x] <= nXTo - && _.indexOf(aVisibleType, htDataType[aBubbles[i][j][htDataIndex.type]]) >= 0) { + }); - if (aBubbles[i][j][htDataIndex.y] >= nYFrom && aBubbles[i][j][htDataIndex.y] <= nYTo - || nYTo === this._nYMax && nYTo < aBubbles[i][j][htDataIndex.y]) { - return true; + for (var i = 0, nLen = aBubbleStep.length; i < nLen; i++) { + var oBubbleStep = aBubbleStep[i]; + for( var p in oBubbleStep ) { + var aBubbleStepData = oBubbleStep[p]; + for (var j = 0, nLen2 = aBubbleStepData.nLength; j < nLen2; j++) { + var oBubbleData = aBubbles[i][p][j]; + if (oBubbleData[htDataIndex.x] >= nXFrom && oBubbleData[htDataIndex.x] <= nXTo + && _.indexOf(aVisibleType, htDataType[oBubbleData[htDataIndex.type]]) >= 0) { + + if (oBubbleData[htDataIndex.y] >= nYFrom && oBubbleData[htDataIndex.y] <= nYTo + || nYTo === this._nYMax && nYTo < oBubbleData[htDataIndex.y]) { + return true; + } } } @@ -1495,11 +1482,12 @@ var BigScatterChart = $.Class({ }, destroy: function () { + var self = this; this._unbindAllEvents(); this._empty(); - _.each(this, function (content, property) { - delete this[property]; - }, this); + jQuery.each(this, function (property, content) { + delete self[property]; + }); this._bDestroied = true; }, @@ -1508,34 +1496,35 @@ var BigScatterChart = $.Class({ }, _unbindAllEvents: function () { - if (this.option('useTypeUlSort')) { - this._welTypeUl.sortable('destroy'); + if (this.option("useTypeUlSort")) { + this._welTypeUl.sortable("destroy"); } // this is for drag-selecting. it should be unbinded. - jQuery(document).unbind('mousemove').unbind('mouseup'); + jQuery(document).unbind("mousemove").unbind("mouseup"); }, _mergeAllDisplay: function (fCb) { - var nWidth = this.option('nWidth'), - nHeight = this.option('nHeight'); - var welCanvas = $('').attr({ - 'width': nWidth, - 'height': nHeight + var self = this; + var nWidth = this.option("nWidth"), + nHeight = this.option("nHeight"); + var welCanvas = $("").attr({ + "width": nWidth, + "height": nHeight }); - var oCtx = welCanvas.get(0).getContext('2d'); + var oCtx = welCanvas.get(0).getContext("2d"); oCtx.fillStyle = "#FFFFFF"; oCtx.fillRect(0, 0, nWidth, nHeight); - // soCtx.globalCompositeOperation = 'destination-out'; + // soCtx.globalCompositeOperation = "destination-out"; // guide line oCtx.drawImage(this._welGuideCanvas.get(0), 0, 0); // scatter - _.each(this._awelChartCanvasInOrder, function (welChartCanvas, sKey) { - if (welChartCanvas.css('display') === 'block') { + jQuery.each(this._awelChartCanvasInOrder, function (sKey, welChartCanvas) { + if (welChartCanvas.css("display") === "block") { oCtx.drawImage(welChartCanvas.get(0), 0, 0); } - }, this); + }); // xy axis oCtx.drawImage(this._welAxisCanvas.get(0), 0, 0); @@ -1545,50 +1534,50 @@ var BigScatterChart = $.Class({ // count var htContainerOffset = this._welContainer.offset(), - htCheckBoxImage = this.option('htCheckBoxImage'); + htCheckBoxImage = this.option("htCheckBoxImage"); oCtx.textAlign = "left"; - _.each(this._htwelTypeLi, function (welTypeLi) { + jQuery.each(this._htwelTypeLi, function (sKey, welTypeLi) { var htOffset = welTypeLi.offset(); var nX = htOffset.left - htContainerOffset.left, nY = htOffset.top - htContainerOffset.top; - oCtx.fillStyle = welTypeLi.css('color'); - oCtx.font = welTypeLi.css('font'); - oCtx.fillText(welTypeLi.text(), nX + parseInt(welTypeLi.css('padding-left'), 10), nY); + oCtx.fillStyle = welTypeLi.css("color"); + oCtx.font = welTypeLi.css("font"); + oCtx.fillText(welTypeLi.text(), nX + parseInt(welTypeLi.css("padding-left"), 10), nY); - if (welTypeLi.hasClass('unchecked')) { - oCtx.drawImage(this._oUncheckedBoxImage, nX, nY); + if (welTypeLi.hasClass("unchecked")) { + oCtx.drawImage(self._oUncheckedBoxImage, nX, nY); } else { - oCtx.drawImage(this._oCheckedBoxImage, nX, nY); + oCtx.drawImage(self._oCheckedBoxImage, nX, nY); } - }, this); + }); // title if (this._welTitle) { - var nTitleX = parseInt(this._welTitle.css('left'), 10), - nTitleY = parseInt(this._welTitle.css('top'), 10); + var nTitleX = parseInt(this._welTitle.css("left"), 10), + nTitleY = parseInt(this._welTitle.css("top"), 10); oCtx.textAlign = "left"; - oCtx.fillStyle = this._welTitle.css('color'); - oCtx.font = this._welTitle.css('font'); + oCtx.fillStyle = this._welTitle.css("color"); + oCtx.font = this._welTitle.css("font"); oCtx.fillText(this._welTitle.text(), nTitleX, nTitleY); } // x axis oCtx.textAlign = "center"; - _.each(this._awelXNumber, function (welXNumber) { - var nX = parseInt(welXNumber.css('left'), 10) + welXNumber.width() / 2, - nY = parseInt(welXNumber.css('top'), 10); - oCtx.fillStyle = welXNumber.css('color'); - oCtx.font = welXNumber.css('font'); + jQuery.each(this._awelXNumber, function (index, welXNumber) { + var nX = parseInt(welXNumber.css("left"), 10) + welXNumber.width() / 2, + nY = parseInt(welXNumber.css("top"), 10); + oCtx.fillStyle = welXNumber.css("color"); + oCtx.font = welXNumber.css("font"); oCtx.fillText(welXNumber.text(), nX, nY); }); // y axis oCtx.textAlign = "right"; - _.each(this._awelYNumber, function (welYNumber) { - var nX = parseInt(welYNumber.css('left'), 10) + welYNumber.width(), - nY = parseInt(welYNumber.css('top'), 10); - oCtx.fillStyle = welYNumber.css('color'); - oCtx.font = welYNumber.css('font'); + jQuery.each(this._awelYNumber, function (index, welYNumber) { + var nX = parseInt(welYNumber.css("left"), 10) + welYNumber.width(), + nY = parseInt(welYNumber.css("top"), 10); + oCtx.fillStyle = welYNumber.css("color"); + oCtx.font = welYNumber.css("font"); oCtx.fillText(welYNumber.text(), nX, nY); }); @@ -1596,38 +1585,38 @@ var BigScatterChart = $.Class({ if (this._welXLabel) { oCtx.textAlign = "right"; var nX = nWidth, - nY = parseInt(this._welXLabel.css('top'), 10); - oCtx.fillStyle = this._welXLabel.css('color'); - oCtx.font = this._welXLabel.css('font'); + nY = parseInt(this._welXLabel.css("top"), 10); + oCtx.fillStyle = this._welXLabel.css("color"); + oCtx.font = this._welXLabel.css("font"); oCtx.fillText(this._welXLabel.text(), nX, nY); } // y label if (this._welYLabel) { oCtx.textAlign = "right"; - var nX = parseInt(this._welYLabel.css('left'), 10) + this._welYLabel.width(), - nY = parseInt(this._welYLabel.css('top'), 10); - oCtx.fillStyle = this._welYLabel.css('color'); - oCtx.font = this._welYLabel.css('font'); + var nX = parseInt(this._welYLabel.css("left"), 10) + this._welYLabel.width(), + nY = parseInt(this._welYLabel.css("top"), 10); + oCtx.fillStyle = this._welYLabel.css("color"); + oCtx.font = this._welYLabel.css("font"); oCtx.fillText(this._welYLabel.text(), nX, nY); } // nodata - if (this._welShowNoData.css('display') === 'block') { + if (this._welShowNoData.css("display") === "block") { oCtx.textAlign = "center"; - oCtx.fillStyle = this._welShowNoData.css('color'); - oCtx.font = this._welShowNoData.css('font'); - oCtx.fillText(this._welShowNoData.text(), parseInt(this._welShowNoData.css('top')), nWidth / 2); + oCtx.fillStyle = this._welShowNoData.css("color"); + oCtx.font = this._welShowNoData.css("font"); + oCtx.fillText(this._welShowNoData.text(), parseInt(this._welShowNoData.css("top")), nWidth / 2); } // drag-selecting - var sDragToSelectClassName = this.option('sDragToSelectClassName'), - welDragToSelect = $('.' + sDragToSelectClassName); - oCtx.rect(parseInt(welDragToSelect.css('left')), parseInt(welDragToSelect.css('top')), welDragToSelect.width(), welDragToSelect.height()); - oCtx.globalAlpha = welDragToSelect.css('opacity'); - oCtx.fillStyle = welDragToSelect.css('background-color'); + var sDragToSelectClassName = this.option("sDragToSelectClassName"), + welDragToSelect = $("." + sDragToSelectClassName); + oCtx.rect(parseInt(welDragToSelect.css("left")), parseInt(welDragToSelect.css("top")), welDragToSelect.width(), welDragToSelect.height()); + oCtx.globalAlpha = welDragToSelect.css("opacity"); + oCtx.fillStyle = welDragToSelect.css("background-color"); oCtx.fill(); - oCtx.strokeStyle = welDragToSelect.css('border-color'); + oCtx.strokeStyle = welDragToSelect.css("border-color"); oCtx.stroke(); return welCanvas; @@ -1635,17 +1624,17 @@ var BigScatterChart = $.Class({ getChartAsPNG: function () { var welCanvas = this._mergeAllDisplay(); - return welCanvas.get(0).toDataURL('image/png') + return welCanvas.get(0).toDataURL("image/png") }, getChartAsJPEG: function () { var welCanvas = this._mergeAllDisplay(); - return welCanvas.get(0).toDataURL('image/jpeg'); + return welCanvas.get(0).toDataURL("image/jpeg"); }, drawWithDataSource: function (htDataSource) { if (_.isObject(htDataSource)) { - this.option('htDataSource', htDataSource); + this.option("htDataSource", htDataSource); } this.clear(); this.abortAjax(); @@ -1655,15 +1644,15 @@ var BigScatterChart = $.Class({ _drawWithDataSource: function () { var self = this; - var htDataSource = this.option('htDataSource'); if (this._bPause || this._bRequesting) { return; } if (this._nCallCount === 0) { - this._welShowNoData.text(this.option('sShowLoading')); + this._welShowNoData.text(this.option("sShowLoading")); } + var htDataSource = this.option("htDataSource"); var htOption = htDataSource.htOption; htOption.context = this; @@ -1675,24 +1664,11 @@ var BigScatterChart = $.Class({ htOption.success = function (htData) { self._nCallCount += 1; self._hideNoData(); - if (htData.scatter.length > 0) { + + if ( self._isEmpty( htData.scatter ) === false ) { self.addBubbleAndMoveAndDraw(htData.scatter, htData.resultFrom); } self._htLastFetchedData = htData; - /* for testing - else{ - console.log('--------------'); - self.addBubbleAndMoveAndDraw([ - { - "x" : self._nXMax + 1000, - "y" : 5000, - "z" : 10, - "traceId" : "e553df1f-6e31-4142-8aea-bdbf50d08f5c", - "type" : "Success" - } - ], self._nXMax + 1000) - }*/ -// htDataSource = self.option('htDataSource'); // refresh var nInterval = htDataSource.nFetch.call(self, htData); if (nInterval > -1) { setTimeout(function () { @@ -1700,12 +1676,19 @@ var BigScatterChart = $.Class({ }, nInterval); } else if (!self._aBubbles || self._aBubbles.length === 0) { self._showNoData(); - self._welShowNoData.text(self.option('sShowNoData')); + self._welShowNoData.text(self.option("sShowNoData")); } }; this._oAjax = $.ajax(htOption); this._bRequesting = true; }, + _isEmpty : function( oData ) { + var count = 0; + for( var p in oData ) { + count += oData[p].length; + } + return count === 0; + }, abortAjax: function () { if (this._oAjax) { @@ -1723,7 +1706,6 @@ var BigScatterChart = $.Class({ this._drawXYAxis(); this.updateXYAxis(); this.redrawBubbles(); - }, pause: function () { @@ -1733,5 +1715,49 @@ var BigScatterChart = $.Class({ resume: function () { this._bPause = false; this._drawWithDataSource(); - } + }, + selectAgent: function( agentName ) { + var self = this; + var bIsAll = agentName === this._consts.ALL; + var sPrefix = this.option("sPrefix"); + var viewSuccess = this._htwelTypeLi["Success"].hasClass("unchecked") === false; + var viewFail = this._htwelTypeLi["Failed"].hasClass("unchecked") === false; + + jQuery.each( this._htwelChartCanvas, function( sKey, sVal ) { + if ( bIsAll ) { + if ( sKey.endsWith( "Success" ) ) { + sVal[ viewSuccess ? "show" : "hide" ](); + } else { + sVal[ viewFail ? "show" : "hide" ](); + } + } else { + + if ( sKey.startsWith( agentName ) ) { + if ( sKey.endsWith( "Success" ) ) { + sVal[ viewSuccess ? "show" : "hide" ](); + } else { + sVal[ viewFail ? "show" : "hide" ](); + } + } else { + sVal.hide(); + } + } + }); + var htTypeCount = {}; + jQuery.each( this.option("htTypeAndColor"), function( sKey, sVal ) { + htTypeCount[sKey] = 0; + }); + jQuery.each( this._aBubbleStep, function( index, obj ) { + jQuery.each( obj, function( sKey, innerObj ) { + if ( bIsAll || agentName === sKey ) { + jQuery.each( htTypeCount, function( k, v ) { + htTypeCount[k] += innerObj.htTypeCount[k]; + }) + } + }); + }); + jQuery.each( htTypeCount, function( sKey, nVal ) { + self._htwelTypeLi[sKey].find("span").html( nVal ); + }); + } }); \ No newline at end of file diff --git a/web/src/main/webapp/features/scatter/scatter.directive.js b/web/src/main/webapp/features/scatter/scatter.directive.js index d7dea782c508..f8f154a5b0d0 100644 --- a/web/src/main/webapp/features/scatter/scatter.directive.js +++ b/web/src/main/webapp/features/scatter/scatter.directive.js @@ -1,5 +1,5 @@ (function() { - 'use strict'; + "use strict"; /** * (en)scatterDirective * @ko scatterDirective @@ -7,42 +7,41 @@ * @name scatterDirective * @class */ - pinpointApp.constant('scatterDirectiveConfig', { + pinpointApp.constant("scatterDirectiveConfig", { + template: "
", get: { - scatterData: '/getScatterData.pinpoint', - lastScatterData: '/getLastScatterData.pinpoint' + scatterData: "/getScatterData.pinpoint", + lastScatterData: "/getLastScatterData.pinpoint" }, useIntervalForFetching: false, nFetchingInterval: 2000, nFetchLimit: 5000, options: { - sContainerId: '', + sContainerId: "", nWidth: 400, nHeight: 250, nXMin: 0, nXMax: 1000, nYMin: 0, nYMax: 10000, nZMin: 0, nZMax: 5, nBubbleSize: 3, - sXLabel: '', - sYLabel: '(ms)', - sTitle: '', - 'htGuideLine': { - 'nLineWidth': 1, - 'aLineDash': [1, 0], - 'nGlobalAlpha': 1, - 'sLineColor' : '#e3e3e3' + sXLabel: "", + sYLabel: "(ms)", + sTitle: "", + "htGuideLine": { + "nLineWidth": 1, + "aLineDash": [1, 0], + "nGlobalAlpha": 1, + "sLineColor" : "#e3e3e3" }, htTypeAndColor: { - // type name : color - 'Success': '#2ca02c', - // 'Warning' : '#f5d025', - 'Failed': '#d62728' + "Success": "#2ca02c", + "Failed": "#d62728" }, htOption: { headers: { - accept: 'application/json' + accept: "application/json" }, - dataType: 'json' + dataType: "json" }, index: { x: 0, @@ -51,333 +50,219 @@ type: 3 }, type: { - '0': 'Failed', - '1': 'Success' + "0": "Failed", + "1": "Success" }, - 'htCheckBoxImage': { - 'checked' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODk0MjRENUI2Qjk2MTFFM0E3NkNCRkIyQTkxMjZFQjMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODk0MjRENUM2Qjk2MTFFM0E3NkNCRkIyQTkxMjZFQjMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4OTQyNEQ1OTZCOTYxMUUzQTc2Q0JGQjJBOTEyNkVCMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4OTQyNEQ1QTZCOTYxMUUzQTc2Q0JGQjJBOTEyNkVCMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkJ02akAAAEfSURBVHjalJI/aoRQEMbnrU8RRVYsBAXJASxEtLGRXEDIJXKTpPcOHiDl1gsp1QvEIiD2AbGLmpm3f7Is68YMjOOb9/0Y/Rg2zzPEcTzDP6IsS7Y5QXTAsibFIH4BQVVVi1Mcx9liyTFN13W/+JpPI0iSpL1hGEHf9+E0TSBAxtifkGVZgSzLgBkMwwCbNZNOEIVpmo3v+78gigLMt+O/3IR0XW/yPH/uuu4AEqQoComeSIznhyUoDMP3cRwPoKZpLyjaqqoKJOacfy5B6Mc39QRYFMUrOtbQO4lt24Z70BlMkqSkSxJdmrMEiYiiSGwOrh6v6/oxTdMP6lGlM/Wv3RYMPY55hrMs292DKNn1kqOb4HketG0L5N5CsB8BBgCZjoUNsxfiYwAAAABJRU5ErkJggg==', - 'unchecked' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEQxQ0ZERUQ2Qjk2MTFFMzg5MjNGMjAzRjdCQ0FEMjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEQxQ0ZERUU2Qjk2MTFFMzg5MjNGMjAzRjdCQ0FEMjkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4RDFDRkRFQjZCOTYxMUUzODkyM0YyMDNGN0JDQUQyOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4RDFDRkRFQzZCOTYxMUUzODkyM0YyMDNGN0JDQUQyOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pq1+Js8AAABTSURBVHjaYvz//z+DiYnJfwYSwJkzZxgZjY2NYZoYidQHVs9Eoia4WhY0JxDUBfQWA7KNRGlCVsfEQCYY1UhLjf9hEUtEAgAnOUZyEjlIH0CAAQDn/BlKI9rDJAAAAABJRU5ErkJggg==' + "htCheckBoxImage": { + "checked" : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODk0MjRENUI2Qjk2MTFFM0E3NkNCRkIyQTkxMjZFQjMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODk0MjRENUM2Qjk2MTFFM0E3NkNCRkIyQTkxMjZFQjMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4OTQyNEQ1OTZCOTYxMUUzQTc2Q0JGQjJBOTEyNkVCMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4OTQyNEQ1QTZCOTYxMUUzQTc2Q0JGQjJBOTEyNkVCMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkJ02akAAAEfSURBVHjalJI/aoRQEMbnrU8RRVYsBAXJASxEtLGRXEDIJXKTpPcOHiDl1gsp1QvEIiD2AbGLmpm3f7Is68YMjOOb9/0Y/Rg2zzPEcTzDP6IsS7Y5QXTAsibFIH4BQVVVi1Mcx9liyTFN13W/+JpPI0iSpL1hGEHf9+E0TSBAxtifkGVZgSzLgBkMwwCbNZNOEIVpmo3v+78gigLMt+O/3IR0XW/yPH/uuu4AEqQoComeSIznhyUoDMP3cRwPoKZpLyjaqqoKJOacfy5B6Mc39QRYFMUrOtbQO4lt24Z70BlMkqSkSxJdmrMEiYiiSGwOrh6v6/oxTdMP6lGlM/Wv3RYMPY55hrMs292DKNn1kqOb4HketG0L5N5CsB8BBgCZjoUNsxfiYwAAAABJRU5ErkJggg==", + "unchecked" : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEQxQ0ZERUQ2Qjk2MTFFMzg5MjNGMjAzRjdCQ0FEMjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEQxQ0ZERUU2Qjk2MTFFMzg5MjNGMjAzRjdCQ0FEMjkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4RDFDRkRFQjZCOTYxMUUzODkyM0YyMDNGN0JDQUQyOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4RDFDRkRFQzZCOTYxMUUzODkyM0YyMDNGN0JDQUQyOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pq1+Js8AAABTSURBVHjaYvz//z+DiYnJfwYSwJkzZxgZjY2NYZoYidQHVs9Eoia4WhY0JxDUBfQWA7KNRGlCVsfEQCYY1UhLjf9hEUtEAgAnOUZyEjlIH0CAAQDn/BlKI9rDJAAAAABJRU5ErkJggg==" }, - 'sConfigImage': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTI2NzMzRDI2QTlGMTFFM0E1RENBRjZGODkwRDBCMEIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTI2NzMzRDM2QTlGMTFFM0E1RENBRjZGODkwRDBCMEIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBMjY3MzNEMDZBOUYxMUUzQTVEQ0FGNkY4OTBEMEIwQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBMjY3MzNEMTZBOUYxMUUzQTVEQ0FGNkY4OTBEMEIwQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pn/ejkcAAAFwSURBVHjanFKxSsNQFE2CFEtaTNsMCbSQ4lA6GSghi2igo/o/GVz6AfmD/EFGJ7cKDiVLO0hFEByzpG1EA5LUxntC80jFKhi4LzfnnnPfzXmPz7KM+9ezT6iq6gnF+T4Nny88/110VK1WbwRB4OM4vgyC4PVXIQlW9JqRwGo2mzm2XC65zWYzplSnBo1CeFDu1Ov1XhaLhVWpVBimKAqXJInVarWmJGQ42xHjybIcQSSK4rNt29cgOI5jR1Gkk5gLw1DC2LkvWGBCu90eDwaDDOF53hXhhwjf908LHByYBo2ArqZpfnY6HbEYw3XdJ5riAzEajR4LHJxut6syhyhq5c6apt1hdER5EnCIKzFzqPM7fUwkSZrhf+r1+lmaphFqjUZuJIeaYRgT4q7ZqFvxmn7+GAQYBDcRyIGhBs6PN4dyjKLP5/OL4XA4RSAHhlpZs3OO1PF+W3ggwxQ6u7d+v3+7s9Nfd3VrQm3fXf0SYADyptv3yy4A0QAAAABJRU5ErkJggg==', - 'sDownloadImage': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUU3MjQyMUQ2QTlGMTFFM0IxRTY4MjI3MUU5MUUyMzMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUU3MjQyMUU2QTlGMTFFM0IxRTY4MjI3MUU5MUUyMzMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFRTcyNDIxQjZBOUYxMUUzQjFFNjgyMjcxRTkxRTIzMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFRTcyNDIxQzZBOUYxMUUzQjFFNjgyMjcxRTkxRTIzMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlnySxAAAADPSURBVHjaxFLBDYMwDLQjMgEf4M8E4Y0YgzHaTTpGFuDfARAdoH3DiwmQSLmqRIZSpPLpSTH4krOjc9g5R0cQIDDzgozj2Ffrum6xOTcKtqolSUJCuNlR0UH8WTiZcpPGzEaB3xVWVXVO0/QhOeTgP1rKOU7/QdM0RZ7nd2OMwxc5eHkeixEm+71aKUVhGJLWmoZhoL7vaRxHX7xtW/ZzlHOTgDiKIirL8oTcWnuZ914dsyzbfXfoCuAmdV3z15ezBgRr8Nuc4ocRXhGeAgwAFHJVgfQ6KdUAAAAASUVORK5CYII=', - 'sFullScreenImage': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkMwOTc3QTg2QTlGMTFFMzk5MzhBOTM4OEFCMzg3MTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkMwOTc3QTk2QTlGMTFFMzk5MzhBOTM4OEFCMzg3MTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQzA5NzdBNjZBOUYxMUUzOTkzOEE5Mzg4QUIzODcxNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQzA5NzdBNzZBOUYxMUUzOTkzOEE5Mzg4QUIzODcxNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvZjiPIAAAE/SURBVHjanFKxaoRAEHXhbM4UopViGWzv0C5VUvsJqdP7A/6Dfb7DMmCVSuRCunClaKUYSKUQM2+zY1SsMjDuuDtv9u3ME9M0af+xAz6u687opmnENslxnFX1uq6FhhvDMKRluofvVeczuMr9vREmhMhRmRy/F3IukhOjM7Mh4B9VNkqQq67rR9u25VnbtsdxHPkZ6zcWRfFAN2qGYVzx3/e9X1XVC2LLsnzTNK8MQK5kCL4AwcqylPTiOH4m8C1igNI0fUIcBEGu3rwGRlFkK3qvRM9XtD+I9h3iLMvaXaDneRdF78T0cHPXdW+Iif6ZgavmALClB9q0nBRw3RyMAa0mWnJzGIbvJEneOeb9hRgEK0e2mjtG9kX+qeJH8hs163lkh2UlVWAruYIlp8ShzeNYqEQqaE9ym638R4ABADZiqF446UJLAAAAAElFTkSuQmCC' + "sConfigImage": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTI2NzMzRDI2QTlGMTFFM0E1RENBRjZGODkwRDBCMEIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTI2NzMzRDM2QTlGMTFFM0E1RENBRjZGODkwRDBCMEIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBMjY3MzNEMDZBOUYxMUUzQTVEQ0FGNkY4OTBEMEIwQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBMjY3MzNEMTZBOUYxMUUzQTVEQ0FGNkY4OTBEMEIwQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pn/ejkcAAAFwSURBVHjanFKxSsNQFE2CFEtaTNsMCbSQ4lA6GSghi2igo/o/GVz6AfmD/EFGJ7cKDiVLO0hFEByzpG1EA5LUxntC80jFKhi4LzfnnnPfzXmPz7KM+9ezT6iq6gnF+T4Nny88/110VK1WbwRB4OM4vgyC4PVXIQlW9JqRwGo2mzm2XC65zWYzplSnBo1CeFDu1Ov1XhaLhVWpVBimKAqXJInVarWmJGQ42xHjybIcQSSK4rNt29cgOI5jR1Gkk5gLw1DC2LkvWGBCu90eDwaDDOF53hXhhwjf908LHByYBo2ArqZpfnY6HbEYw3XdJ5riAzEajR4LHJxut6syhyhq5c6apt1hdER5EnCIKzFzqPM7fUwkSZrhf+r1+lmaphFqjUZuJIeaYRgT4q7ZqFvxmn7+GAQYBDcRyIGhBs6PN4dyjKLP5/OL4XA4RSAHhlpZs3OO1PF+W3ggwxQ6u7d+v3+7s9Nfd3VrQm3fXf0SYADyptv3yy4A0QAAAABJRU5ErkJggg==", + "sDownloadImage": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUU3MjQyMUQ2QTlGMTFFM0IxRTY4MjI3MUU5MUUyMzMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUU3MjQyMUU2QTlGMTFFM0IxRTY4MjI3MUU5MUUyMzMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFRTcyNDIxQjZBOUYxMUUzQjFFNjgyMjcxRTkxRTIzMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFRTcyNDIxQzZBOUYxMUUzQjFFNjgyMjcxRTkxRTIzMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlnySxAAAADPSURBVHjaxFLBDYMwDLQjMgEf4M8E4Y0YgzHaTTpGFuDfARAdoH3DiwmQSLmqRIZSpPLpSTH4krOjc9g5R0cQIDDzgozj2Ffrum6xOTcKtqolSUJCuNlR0UH8WTiZcpPGzEaB3xVWVXVO0/QhOeTgP1rKOU7/QdM0RZ7nd2OMwxc5eHkeixEm+71aKUVhGJLWmoZhoL7vaRxHX7xtW/ZzlHOTgDiKIirL8oTcWnuZ914dsyzbfXfoCuAmdV3z15ezBgRr8Nuc4ocRXhGeAgwAFHJVgfQ6KdUAAAAASUVORK5CYII=", + "sFullScreenImage": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkMwOTc3QTg2QTlGMTFFMzk5MzhBOTM4OEFCMzg3MTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkMwOTc3QTk2QTlGMTFFMzk5MzhBOTM4OEFCMzg3MTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQzA5NzdBNjZBOUYxMUUzOTkzOEE5Mzg4QUIzODcxNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQzA5NzdBNzZBOUYxMUUzOTkzOEE5Mzg4QUIzODcxNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvZjiPIAAAE/SURBVHjanFKxaoRAEHXhbM4UopViGWzv0C5VUvsJqdP7A/6Dfb7DMmCVSuRCunClaKUYSKUQM2+zY1SsMjDuuDtv9u3ME9M0af+xAz6u687opmnENslxnFX1uq6FhhvDMKRluofvVeczuMr9vREmhMhRmRy/F3IukhOjM7Mh4B9VNkqQq67rR9u25VnbtsdxHPkZ6zcWRfFAN2qGYVzx3/e9X1XVC2LLsnzTNK8MQK5kCL4AwcqylPTiOH4m8C1igNI0fUIcBEGu3rwGRlFkK3qvRM9XtD+I9h3iLMvaXaDneRdF78T0cHPXdW+Iif6ZgavmALClB9q0nBRw3RyMAa0mWnJzGIbvJEneOeb9hRgEK0e2mjtG9kX+qeJH8hs163lkh2UlVWAruYIlp8ShzeNYqEQqaE9ym638R4ABADZiqF446UJLAAAAAElFTkSuQmCC" } }); - // FIXME made global to allow access from the child window. Refactor later. - //var selectdTracesBox = {}; - - pinpointApp.directive('scatterDirective', ['scatterDirectiveConfig', '$rootScope', '$timeout', 'webStorage', 'TransactionDaoService', '$window', 'helpContentTemplate', 'helpContentService', 'AnalyticsService', - function (cfg, $rootScope, $timeout, webStorage, oTransactionDaoService, $window, helpContentTemplate, helpContentService, analyticsService) { + pinpointApp.directive("scatterDirective", ["scatterDirectiveConfig", "$rootScope", "$compile", "$timeout", "webStorage", "$window", "TooltipService", "AnalyticsService", + function (cfg, $rootScope, $compile, $timeout, webStorage, $window, tooltipService, analyticsService) { return { - template: '
', - restrict: 'EA', + template: cfg.template, + restrict: "EA", replace: true, link: function (scope, element, attrs) { - // define private variables - var oNavbarVoService, htScatterSet, htLastNode; - - // define private variables of methods - var getDataSource, makeScatter, showScatter, showScatterBy, pauseScatterAll, makeScatterWithData; - - // initialize - oNavbarVoService = null; - htScatterSet = {}; - htLastNode = {}; - - /** - * get data source - * @param applicationName - * @param from - * @param to - * @param period - * @param filter - */ - getDataSource = function (applicationName, from, to, filter) { - var bDrawOnceAll = false; - var htDataSource = { - sUrl: function (nFetchIndex) { - return cfg.get.scatterData; - }, - htParam: function (nFetchIndex, htLastFetchedData) { - // calculate parameter - var htData; - if (nFetchIndex === 0) { - htData = { - 'application': applicationName, - 'from': from, - 'to': to, - 'limit': cfg.nFetchLimit, - 'v': 2 - }; - } else { - htData = { - 'application': applicationName, - // array[0] : most recent - // array[len] : oldest - 'from': from, - 'to': htLastFetchedData.resultFrom - 1, - 'limit': cfg.nFetchLimit, - 'v': 2 - }; - } - if (filter) { - htData.filter = filter; - } - - return htData; - }, - nFetch: function (htLastFetchedData) { - // -1 : stop, n = 0 : immediately, n > 0 : interval - if (htLastFetchedData.resultFrom - 1 > from) { - if (cfg.useIntervalForFetching) { - bDrawOnceAll = true; - return cfg.nFetchingInterval; - } - // TO THE NEXT - return 0; - } - - // STOP - return -1; - }, - htOption: { - headers: { - accept: 'application/json' - }, - dataType: 'json' - }, - index: { - x: 0, - y: 1, - transactionId: 2, - type: 3 - }, - type: { - '0': 'Failed', - '1': 'Success' - } - }; - return htDataSource; - }; - - /** - * make scatter - * @param title - * @param start - * @param end - * @param period - * @param filter - * @param w - * @param h - * @param scatterData - */ - makeScatter = function (target, title, start, end, period, filter, w, h, scatterData) { -// if (!Modernizr.canvas) { -// alert("Can't draw scatter. Not supported browser."); -// } + var oNavbarVoService = null, htScatterSet = {}, htLastNode = null; - var options = angular.copy(cfg.options); + function makeScatter(target, application, w, h, scatterData) { + var start = oNavbarVoService.getQueryStartTime(); + var end = oNavbarVoService.getQueryEndTime(); + var filter = oNavbarVoService.getFilter(); + var applicationName = application.split("^")[0]; + var options = {}; + angular.copy(cfg.options, options); options.sPrefix = "bigscatterchart-" + parseInt( Math.random() * 100000 ) + "-"; options.sContainerId = target; options.nWidth = w ? w : 400; options.nHeight = h ? h : 250; options.nXMin = start; options.nXMax = end; -// options.sTitle = title; options.fOnSelect = function (htPosition, htXY) { -// var transactions = { -// htXY: htXY, -// aTraces: [] -// }; - - // by netspider -// console.log(target, title, start, end, period, filter, w, h); -// var NEW_URL = "/transactionmetadata2.pinpoint?application=" + title; -// NEW_URL += "&from=" + htXY.nXFrom; -// NEW_URL += "&to=" + htXY.nXTo; -// NEW_URL += "&responseFrom="+ htXY.nYFrom; -// NEW_URL += "&responseTo=" + htXY.nYTo; -// NEW_URL += "&limit=3"; -// if (filter) { -// NEW_URL += "&filter=" + filter; -// } - // var ww = window.open(NEW_URL); - // end - -// transactions.aTraces = this.getDataByXY(htXY.nXFrom, htXY.nXTo, htXY.nYFrom, htXY.nYTo); -// if (transactions.aTraces.length === 0) { -// return; -// } - if (!this.hasDataByXY(htXY.nXFrom, htXY.nXTo, htXY.nYFrom, htXY.nYTo)) { - return; - } - -// var token = 'transactionsFromScatter_' + _.random(100000, 999999); -// webStorage.session.add(token, transactions); -// window[token] = transactions; -// window.open("/selectedScatter.pinpoint", token); -// oTransactionDaoService.addData(token, transactions); - - var token = title + '|' + htXY.nXFrom + '|' + htXY.nXTo + '|' + htXY.nYFrom + '|' + htXY.nYTo; - $window.open('#/transactionList/' + oNavbarVoService.getApplication() + '/' + - oNavbarVoService.getReadablePeriod() + '/' + oNavbarVoService.getQueryEndDateTime(), token); + var token = application + "|" + htXY.nXFrom + "|" + htXY.nXTo + "|" + htXY.nYFrom + "|" + htXY.nYTo; + $window.open("#/transactionList/" + oNavbarVoService.getPartialURL( true, false ), token); }; options.fFullScreenMode = function () { - var url = '#/scatterFullScreenMode/' + htLastNode.applicationName + '@' + htLastNode.serviceTypeCode + '/' + - oNavbarVoService.getReadablePeriod() + '/' + oNavbarVoService.getQueryEndDateTime(); - if (oNavbarVoService.getFilter()) { - url += '/' + oNavbarVoService.getFilter(); - } - $window.open(url, "width=900, height=700, resizable=yes"); + $window.open( "#/scatterFullScreenMode/" + htLastNode.applicationName + "@" + htLastNode.serviceType + "/" + oNavbarVoService.getPartialURL( false, true ) + "/" + getAgentList().join(","), "width=900, height=700, resizable=yes"); }; - var oScatterChart = null; - oScatterChart = new BigScatterChart(options, helpContentTemplate, helpContentService, webStorage, analyticsService); + var oScatterChart = new BigScatterChart(options, getAgentList(scatterData), tooltipService, webStorage, analyticsService); $timeout(function () { if (angular.isUndefined(scatterData)) { - oScatterChart.drawWithDataSource(getDataSource(title, start, end, filter)); + // 주는 데이터가 없으면 기반 정보를 기반으로 로딩 + oScatterChart.drawWithDataSource(getDataSource(applicationName, start, end, filter)); } else { + // 주는 데이터가 있으면 그걸로 끝. oScatterChart.addBubbleAndMoveAndDraw(scatterData.scatter, scatterData.resultFrom); } - $window.htoScatter[title] = oScatterChart; + $window.htoScatter[application] = oScatterChart; }, 100); return oScatterChart; - }; - - /** - * show scatter - * @param title - * @param start - * @param end - * @param period - * @param filter - * @param w - * @param h - * @todo data is simply cached - might be a good idea to add pause/resume when loading scatter data to reduce server load. - * adding pause/resume methods to BigScatterChart.js, and invoking them below would work. - */ - showScatter = function (title, start, end, period, filter, w, h) { + } + function showScatter (application, w, h) { element.children().hide(); pauseScatterAll(); - if (angular.isDefined(htScatterSet[title])) { - htScatterSet[title].target.show(); - htScatterSet[title].scatter.resume(); + if (angular.isDefined(htScatterSet[application])) { + htScatterSet[application].target.show(); + htScatterSet[application].scatter.resume(); } else { - var target = angular.element('
'); - var oScatter = makeScatter(target, title, start, end, period, filter, w, h); - htScatterSet[title] = { - target : target, - scatter : oScatter - }; - element.append(target); + makeNewScatter( application, w, h ); } - }; + } + function showScatterWithData(application, w, h, data) { + if (angular.isDefined(htScatterSet[application])) { + htScatterSet[application].scatter.addBubbleAndMoveAndDraw(data.scatter, data.resultFrom); + } else { + makeNewScatter(application, w, h, data).hide(); + } + } + function makeNewScatter( application, w, h, data ) { + var target = angular.element( cfg.template ); + var oScatter = makeScatter(target, application, w, h, data); + htScatterSet[application] = { + target : target, + scatter : oScatter + }; + element.append( target ); + return target; + } - /** - * show scatter by - * @param title - */ - showScatterBy = function (title) { + function showScatterBy(application) { element.children().hide(); - if (angular.isDefined(htScatterSet[title])) { - htScatterSet[title].target.show(); + if (angular.isDefined(htScatterSet[application])) { + htScatterSet[application].target.show(); } - }; + } - /** - * make scatter with data - * @param title - * @param start - * @param end - * @param period - * @param filter - * @param w - * @param h - * @param data - */ - makeScatterWithData = function (title, start, end, period, filter, w, h, data) { - if (angular.isDefined(htScatterSet[title])) { - htScatterSet[title].scatter.addBubbleAndMoveAndDraw(data.scatter, data.resultFrom); - } else { - var target = angular.element('
'); - var oScatter = makeScatter(target, title, start, end, period, filter, w, h, data); - htScatterSet[title] = { - target : target, - scatter : oScatter - }; - element.append(target); - target.hide(); - } - }; - /** - * pause scatter all - */ - pauseScatterAll = function () { + function pauseScatterAll() { angular.forEach(htScatterSet, function (scatterSet, key) { scatterSet.scatter.pause(); }); }; + function getDataSource(application, from, to, filter) { + var bDrawOnceAll = false; + var htDataSource = { + sUrl: function (nFetchIndex) { + return cfg.get.scatterData; + }, + htParam: function (nFetchIndex, htLastFetchedData) { + // calculate parameter + var htData = { + "v": 3, + "to": nFetchIndex === 0 ? to : htLastFetchedData.resultFrom - 1, + "from": from, + "limit": cfg.nFetchLimit, + "application": application + }; + if (filter) { + htData.filter = filter; + } + return htData; + }, + nFetch: function (htLastFetchedData) { + if (htLastFetchedData.resultFrom - 1 > from) { + if (cfg.useIntervalForFetching) { + bDrawOnceAll = true; + return cfg.nFetchingInterval; + } + // TO THE NEXT + return 0; + } - /** - * scope event on scatter.initialize - */ - scope.$on('scatterDirective.initialize', function (event, navbarVoService) { - oNavbarVoService = navbarVoService; - if ( htScatterSet !== null ) { - for( var p in htScatterSet ) { - htScatterSet[p].scatter.abortAjax(); + // STOP + return -1; + }, + htOption: { + headers: { + accept: "application/json" + }, + dataType: "json" + }, + index: { + x: 0, + y: 1, + transactionId: 2, + type: 3 + }, + type: { + "0": "Failed", + "1": "Success" + } + }; + return htDataSource; + } + function initScatterHash() { + for (var p in htScatterSet) { + htScatterSet[p].scatter.abortAjax(); + } + htScatterSet = {}; + } + function getAgentList( scatterData ) { + var aAgentList = [], server; + if ( typeof scatterData !== "undefined" ) { + for( server in scatterData.scatter ) { + aAgentList.push( server ); + } + return aAgentList; + } + if ( htLastNode.agentList ) { + return htLastNode.agentList; + } + + if ( htLastNode.serverList ) { + for ( server in htLastNode.serverList ) { + var oInstanceList = htLastNode.serverList[server].instanceList; + for (var agentName in oInstanceList) { + aAgentList.push(oInstanceList[agentName].name); + } } } - htScatterSet = {}; + return aAgentList; + } + + scope.$on("scatterDirective.initialize", function (event, navbarVoService) { + oNavbarVoService = navbarVoService; + initScatterHash(); element.empty(); }); - - /** - * scope event on scatter.initializeWithNode - */ - scope.$on('scatterDirective.initializeWithNode', function (event, node, w, h) { - htLastNode = node; - showScatter(node.applicationName, oNavbarVoService.getQueryStartTime(), - oNavbarVoService.getQueryEndTime(), oNavbarVoService.getQueryPeriod(), oNavbarVoService.getFilter(), w, h); + scope.$on("scatterDirective.initializeWithNode", function (event, node, w, h) { + htLastNode = node; + showScatter(node.key, w, h); }); - - /** - * scope event on scatter.initializeWithData - */ - scope.$on('scatterDirective.initializeWithData', function (event, applicationName, data) { + scope.$on("scatterDirective.initializeWithData", function (event, application, data) { + var aSplit = application.split("^"); htLastNode = { - applicationName: applicationName.split('^')[0] + applicationName: aSplit[0], + serviceType: aSplit[1] }; - makeScatterWithData(applicationName, oNavbarVoService.getQueryStartTime(), - oNavbarVoService.getQueryEndTime(), oNavbarVoService.getQueryPeriod(), oNavbarVoService.getFilter(), null, null, data); + showScatterWithData(application, null, null, data); }); - - /** - * scope event on scatter.showByNode - */ - scope.$on('scatterDirective.showByNode', function (event, node) { + scope.$on("scatterDirective.showByNode", function (event, node) { htLastNode = node; showScatterBy(node.key); }); - scope.$on('responseTimeChartDirective.errorClicked', function(event) { - // max size of drag box - var oParam = { - animate: function() {}, - css : function( param ) { - if ( param === "left" ) return "51px"; - else return "40px"; - }, - width: function() { - return 320; - }, - height: function() { - return 200; - } - }; - $window.htoScatter[htLastNode.applicationName].selectFailedOnly().fireDragEvent( oParam ); + scope.$on("responseTimeChartDirective.showErrorTransacitonList", function() { + $window.htoScatter[htLastNode.applicationName].selectFailedOnly().fireDragEvent({ + animate: function() {}, + css : function( param ) { + return ( param === "left" ) ? "51px" : "40px"; + }, + width: function() { + return 320; + }, + height: function() { + return 200; + } + }); }); } }; diff --git a/web/src/main/webapp/features/serverMap/jquery.ServerMap2.js b/web/src/main/webapp/features/serverMap/jquery.ServerMap2.js index 5e843e1b5d73..d1bdbd7cc34d 100644 --- a/web/src/main/webapp/features/serverMap/jquery.ServerMap2.js +++ b/web/src/main/webapp/features/serverMap/jquery.ServerMap2.js @@ -909,19 +909,19 @@ }); this._oDiagram.addDiagramListener("BackgroundSingleClicked", function (e) { var fOnBackgroundClicked = self.option('fOnBackgroundClicked'); - if (_.isFunction(fOnBackgroundClicked)) { + if (angular.isFunction(fOnBackgroundClicked)) { fOnBackgroundClicked.call(self, e); } }); this._oDiagram.addDiagramListener("BackgroundDoubleClicked", function (e) { var fOnBackgroundDoubleClicked = self.option('fOnBackgroundDoubleClicked'); - if (_.isFunction(fOnBackgroundDoubleClicked)) { + if (angular.isFunction(fOnBackgroundDoubleClicked)) { fOnBackgroundDoubleClicked.call(self, e); } }); this._oDiagram.addDiagramListener("BackgroundContextClicked", function (e) { var fOnBackgroundContextClicked = self.option('fOnBackgroundContextClicked'); - if (_.isFunction(fOnBackgroundContextClicked)) { + if (angular.isFunction(fOnBackgroundContextClicked)) { fOnBackgroundContextClicked.call(self, e); } }); @@ -1035,6 +1035,13 @@ var part = this._oDiagram.findPartForKey(sKey); this._oDiagram.select(part); this._updateHightlights(node); + //console.log( this._oDiagram.documentBounds, this._oDiagram.scale ); + //this._oDiagram.zoomToRect( { + // x: part.actualBounds.x - part.actualBounds.width * 3, + // y: part.actualBounds.y - part.actualBounds.height * 3, + // width: part.actualBounds.width * 6, + // height: part.actualBounds.height * 6, + //}, this._oDiagram.UniformToFill ); } }, @@ -1249,7 +1256,7 @@ _onNodeSubGroupClicked: function(e, obj, unknownKey, fromName) { var node = obj.part, fOnNodeSubGroupClicked = this.option('fOnNodeSubGroupClicked'); - if (_.isFunction(fOnNodeSubGroupClicked)) { + if (angular.isFunction(fOnNodeSubGroupClicked)) { this.analyticsService.send(this.analyticsService.CONST.MAIN, this.analyticsService.CONST.CLK_NODE); fOnNodeSubGroupClicked.call(this, e, node, unknownKey, fromName); } @@ -1266,7 +1273,7 @@ var node = obj.part, htData = node.data, fOnNodeClicked = this.option('fOnNodeClicked'); - if (_.isFunction(fOnNodeClicked)) { + if (angular.isFunction(fOnNodeClicked)) { this.analyticsService.send(this.analyticsService.CONST.MAIN, this.analyticsService.CONST.CLK_NODE); fOnNodeClicked.call(this, e, htData, unknownKey, query); } @@ -1282,7 +1289,7 @@ var node = obj.part, htData = node.data, fOnNodeDoubleClicked = this.option('fOnNodeDoubleClicked'); - if (_.isFunction(fOnNodeDoubleClicked)) { + if (angular.isFunction(fOnNodeDoubleClicked)) { fOnNodeDoubleClicked.call(this, e, node, htData); } }, @@ -1298,7 +1305,7 @@ var node = obj.part, htData = node.data, fOnNodeContextClicked = this.option('fOnNodeContextClicked'); - if (_.isFunction(fOnNodeContextClicked)) { + if (angular.isFunction(fOnNodeContextClicked)) { fOnNodeContextClicked.call(this, e, htData); } }, @@ -1314,7 +1321,7 @@ var link = obj.part, htData = link.data, fOnLinkClicked = this.option('fOnLinkClicked'); - if (_.isFunction(fOnLinkClicked)) { + if (angular.isFunction(fOnLinkClicked)) { this.analyticsService.send(this.analyticsService.CONST.MAIN, this.analyticsService.CONST.CLK_LINK); htData.fromNode = obj.fromNode.part.data; htData.toNode = obj.toNode.part.data; @@ -1333,7 +1340,7 @@ var link = obj.part, htData = link.data, fOnLinkContextClicked = this.option('fOnLinkContextClicked'); - if (_.isFunction(fOnLinkContextClicked)) { + if (angular.isFunction(fOnLinkContextClicked)) { htData.fromNode = obj.fromNode.part.data; htData.toNode = obj.toNode.part.data; fOnLinkContextClicked.call(this, e, htData); diff --git a/web/src/main/webapp/pages/scatterFullScreenMode/scatter-full-screen-mode.controller.js b/web/src/main/webapp/pages/scatterFullScreenMode/scatter-full-screen-mode.controller.js index e9cce6082e50..7e1cafaa12d6 100644 --- a/web/src/main/webapp/pages/scatterFullScreenMode/scatter-full-screen-mode.controller.js +++ b/web/src/main/webapp/pages/scatterFullScreenMode/scatter-full-screen-mode.controller.js @@ -37,7 +37,12 @@ } oNavbarVoService.autoCalculateByQueryEndDateTimeAndReadablePeriod(); $scope.$emit('scatterDirective.initialize', oNavbarVoService); - $scope.$emit('scatterDirective.initializeWithNode', {applicationName: oNavbarVoService.getApplicationName()}, 800, 600) + $scope.$emit('scatterDirective.initializeWithNode', { + key: oNavbarVoService.getApplicationName() + "^" + oNavbarVoService.getServiceTypeName(), + serviceType: oNavbarVoService.getServiceTypeName(), + applicationName: oNavbarVoService.getApplicationName(), + agentList : $routeParams.agentList.split(",") + }, 800, 600) }, 500); } ]); diff --git a/web/src/main/webapp/scripts/app.js b/web/src/main/webapp/scripts/app.js index ffd2f9388dac..4ad1799aba2f 100644 --- a/web/src/main/webapp/scripts/app.js +++ b/web/src/main/webapp/scripts/app.js @@ -44,7 +44,7 @@ pinpointApp.config(['$routeProvider', '$locationProvider', '$modalProvider', fun }).when('/transactionView/:agentId/:traceId/:focusTimestamp', { templateUrl: 'pages/transactionView/transactionView.html', controller: 'TransactionViewCtrl' - }).when('/scatterFullScreenMode/:application/:readablePeriod/:queryEndDateTime', { + }).when('/scatterFullScreenMode/:application/:readablePeriod/:queryEndDateTime/:agentList', { templateUrl: 'pages/scatterFullScreenMode/scatterFullScreenMode.html', controller: 'ScatterFullScreenModeCtrl' }).when('/scatterFullScreenMode/:application/:readablePeriod/:queryEndDateTime/:filter', {