Last active
September 28, 2016 07:05
-
-
Save filimo/08197362cbc3eb5cc18258674918ad44 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function main() { | |
var DevicesConnector = function() { | |
return new Common.Connector("Handlers/JSonHandler.ashx/Devices/"); | |
} | |
var params = { | |
chartType: $(document).getUrlParam("chartType"), | |
baseCUID: $(document).getUrlParam("CUID"), | |
CUID: $(document).getUrlParam("CUID"), | |
hash: document.location.hash.replace("#", ""), | |
url: $(document).getUrlParam("url"), | |
startDate: Number($(document).getUrlParam("startTime")), | |
isCompare: $(".compareMenu").size() != 0, | |
compareData: [], | |
activeLoad : [], | |
sortedList:[], | |
compareDevices:$("#compareTask").size() == 0 | |
}; | |
if (params.chartType == "ResponseTime" | |
|| params.chartType == "ResponseTime_ByLocation" | |
|| params.chartType == "ResponseTime_ByTask" | |
|| params.isCompare) | |
$(".outlier").show(); | |
else $(".outlier").hide(); | |
function filterOutlier() { | |
var useOutlier = $("#outlier").is(":checked"); | |
function removeElement(ar, index) { | |
ar.splice(index, 1); | |
} | |
function isOutlier(val, avr, stdev) { | |
return Math.abs(val[1] - avr) > 2*stdev; | |
} | |
var series = $.extend(true, [], params.plotData); | |
if (useOutlier) { | |
var max = 0; | |
var min = null; | |
var maxAvr = 0; | |
var minAvr = null; | |
var maxLim = null; | |
var minLim = null; | |
var mint = null; | |
var maxt = null; | |
for (var i = 0; i < series.length; i++) { | |
var points = series[i].data; | |
if (points.length && points[0].info) { | |
if(mint=-null) | |
{ | |
maxt = series[i].Average + series[i].STDDev*2; | |
mint = series[i].Average - series[i].STDDev*2; | |
} | |
else | |
{ | |
var tt = series[i].Average + series[i].STDDev*2; | |
if (tt>maxt) maxt = tt; | |
tt = series[i].Average - series[i].STDDev*2; | |
if (tt<mint) mint = tt; | |
} | |
} | |
} | |
maxLim = maxt; | |
minLim = mint; | |
for (var i = 0; i < series.length; i++) { | |
var points = series[i].data; | |
if (points.length && points[0].info) { | |
var avr = series[i].Average; | |
for (var j = 0; j < points.length; j++) { | |
if (minLim > points[j][1] || maxLim < points[j][1]) { | |
removeElement(points, j--); | |
} else { | |
if (max < points[j][1]) max = points[j][1]; | |
if (min === null) min = points[j][1]; | |
else if (min > points[j][1]) min = points[j][1]; | |
} | |
} | |
} | |
} | |
series.maxY = max; | |
series.minY = min; | |
} else { | |
var max = 0; | |
var min = null; | |
for (var i = 0; i < series.length; i++) { | |
var points = series[i].data; | |
if (points.length && points[0].info) { | |
for (var j = 0; j < points.length; j++) { | |
//if (points && points[i] && points[i][j] && points[i][j]) { | |
if (max < points[j][1]) max = points[j][1]; | |
if (min === null) min = points[j][1]; | |
else if (min > points[j][1]) min = points[j][1]; | |
//} | |
} | |
} | |
} | |
series = params.plotData; | |
series.maxY = max; | |
series.minY = min; | |
} | |
new Plot(series, true); | |
} | |
(function outlier() { | |
var el = $("#outlier"); | |
el.click(filterOutlier); | |
})(); | |
function setStddev(av, st) { | |
/*if (typeof (av) !== "undefined" && typeof (st) !== "undefined") { | |
params.average = av; | |
params.stddev = st; | |
$("#outlier").removeAttr("disabled"); | |
} else { | |
params.average = null; | |
params.stddev = null; | |
$("#outlier").attr("disabled", "disabled"); | |
}*/ | |
} | |
function anyWait() { | |
for (var i in params.activeLoad) { | |
if (params.activeLoad[i]) | |
return true; | |
} | |
return false; | |
} | |
function waitOff() { | |
for (var i in params.activeLoad) { | |
delete params.activeLoad[i] | |
} | |
waiting(false); | |
} | |
if (params.isCompare) { | |
params.tasks = { | |
init: function() { | |
$("#compareDevice").change(params.tasks.load); | |
$("#compareTask").change(function() { | |
params.devices.isContains(); | |
}) | |
params.tasks.load(); | |
}, | |
load: function() { | |
$("#compareTask").hide(); | |
$("#addChart").hide(); | |
var dev = $("#compareDevice").val(); | |
function on(data) { | |
if (!data || (typeof data.Error !== "undefined" && data.Error != "")) { | |
error(data); | |
return; | |
} | |
$("#compareTask").empty(); | |
var html = ""; | |
var newData = []; | |
for (var i in data) { | |
if (data[i].Task_ID != defTaskID) | |
newData.push(data[i]); | |
} | |
data = newData; | |
if (data.length == 0) { | |
$("#compareTask").html("<option>No tasks</option>"); | |
} else { | |
for (var i in data) { | |
if (!data[i].Task_Name) data[i].Task_Name = "Task"; | |
html += "<option value=" + data[i].Task_ID + ">" + data[i].Task_Name + "</option>"; | |
} | |
$("#compareTask").html(html); | |
$("#addChart").show(); | |
} | |
$("#compareTask").show(); | |
params.devices.isContains(); | |
} | |
DevicesConnector().Post("TasksOf", { Site_Seq_ID: dev }, on); | |
} | |
} | |
params.devices = { | |
cache: new Array(), | |
actionState: true, | |
isContains: function() { | |
params.devices.switchButton(!params.devices.isinchart()); | |
}, | |
switchButton: function(state) { | |
if (params.devices.actionState == state) return; | |
params.devices.actionState = state; | |
$("#addChart").val(state ? "Add" : "Remove"); | |
$("#addChart").unbind("click"); | |
if (state) { | |
$("#addChart").click(params.devices.addAction); | |
} else { | |
$("#addChart").click(params.devices.removeActive); | |
} | |
}, | |
isinchart: function() { | |
var devId = Number(params.compareDevices ? $("#compareDevice").val() : $("#compareTask").val()); | |
return !!params.devices.cache[devId]; | |
}, | |
addDevice: function(deviceId, baseCUID) { | |
params.activeLoad[deviceId] = true; | |
waiting(true); | |
params.devices.changeDevice(baseCUID, deviceId, function(cuid) { | |
cuid = cuid.CUID; | |
params.devices.getUID(cuid, function(processData) { | |
params.devices.wait(processData, function(chartParams) { | |
params.devices.getChartData(chartParams, function(chartData) { | |
var pts = []; | |
$.each(chartData.Series[0].Points, function(i, key) { | |
var el = [key.X, key.Y]; | |
el.info = key; | |
pts.push(el); | |
}) | |
var newData = { Device: deviceId, label: chartData.Series[0].LegendName, data: pts, color: undefined, tooltip: params.plotData[0].tooltip, Average : chartData.Average, STDDev : chartData.STDDev }; | |
if (!params.compareDevices) { | |
newData.label = newData.label; | |
} | |
params.plotData.push(newData); | |
params.devices.sort(); | |
new Plot(params.plotData); | |
filterOutlier(); | |
params.devices.isContains(); | |
params.activeLoad[deviceId] = false; | |
waiting(false); | |
}) | |
}) | |
}) | |
}) | |
}, | |
sort: function() { | |
function _sort(a, b) { | |
if (!a.Device) | |
return -1; | |
if (!b.Device) | |
return 1; | |
var aInd = sortList[a.Device]; | |
var bInd = sortList[b.Device]; | |
if (aInd > bInd) return 1; | |
else if (aInd < bInd) return -1; | |
else return 0; | |
} | |
var sortList = []; | |
var ind = 0; | |
for (var i in params.sortedList) { | |
sortList[params.sortedList[i]] = i + 1; | |
} | |
params.plotData = params.plotData.sort(_sort); | |
}, | |
removeActive: function() { | |
var devId = Number(params.compareDevices ? $("#compareDevice").val() : $("#compareTask").val()); | |
params.devices.removeDevice(devId); | |
}, | |
removeDevice: function(deviceId) { | |
var newCache = []; | |
var newPlotData = []; | |
for (var i in params.devices.cache) { | |
if (i != deviceId) | |
newCache[i] = params.devices.cache[i]; | |
} | |
for (var i in params.plotData) { | |
if ((!params.plotData[i].Device || params.plotData[i].Device != deviceId)) { | |
if (isNaN(Number(i))) | |
newPlotData[i] = params.plotData[i]; | |
else | |
newPlotData.push(params.plotData[i]); | |
} | |
} | |
params.plotData = newPlotData; | |
params.devices.cache = newCache; | |
Plot(params.plotData); | |
params.devices.isContains(); | |
}, | |
changeDevice: function(CUID, newDevice, callback) { | |
if (params.devices.cache[newDevice] && params.devices.cache[newDevice].CUID) { | |
callback({ CUID: params.devices.cache[newDevice].CUID }); | |
} | |
else { | |
if (params.compareDevices) { | |
if ( sitePlatform == "BrowserView" || sitePlatform == "UserView" || sitePlatform == "MetricsView") { | |
function __on(data) { | |
if (data && data.length > 0) { | |
var tid = data[0].Task_ID; | |
Connector().Post("ChangeTask", { CUID: unescape(CUID), newTask: tid }, _on); | |
} else { error(); } | |
} | |
DevicesConnector().Post("TasksOf", { Site_Seq_ID: $("#compareDevice").val() }, __on); | |
} else { | |
Connector().Post("ChangeDevice", { CUID: unescape(CUID), newDevice: newDevice }, _on); | |
} | |
} | |
else | |
Connector().Post("ChangeTask", { CUID: unescape(CUID), newTask: newDevice }, _on); | |
} | |
function _on(data) { | |
if (!data || (typeof data.Error !== "undefined" && data.Error != "")) { | |
error(data); | |
return; | |
} | |
params.sortedList.push(newDevice); | |
params.devices.cache[newDevice] = {}; | |
params.devices.cache[newDevice].CUID = data.CUID; | |
callback(data); | |
} | |
}, | |
update: function() { | |
for (var i in params.devices.cache) { | |
if (!isNaN(Number(i))) { | |
params.devices.addDevice(i); | |
} | |
} | |
}, | |
getChartData: function(_data, callback) { | |
var basedata = { | |
chartType: params.chartType | |
} | |
var data = $.extend(data, _data); | |
Connector().Post("GetChart", data, _on); | |
function _on(data) { | |
if (!data || (typeof data.Error !== "undefined" && data.Error != "")) { | |
error(data); | |
return; | |
} | |
callback(data); | |
} | |
}, | |
getUID: function(CUID, callback) { | |
var data = { | |
CUID: unescape(CUID), | |
UID: "", | |
ResponseFilterUri: null, | |
chartType: params.chartType | |
}; | |
if (params.filter) { | |
data.Start = params.filter.Start; | |
data.End = params.filter.End; | |
} else if (params.devices.cache[CUID]) { | |
callback({ CUID: CUID, UID: params.devices.cache[CUID] }); | |
return; | |
} | |
Connector().Post("IsInProcess", data, _on); | |
function _on(data) { | |
if (!data || (typeof data.Error !== "undefined" && data.Error != "")) { | |
error(data); | |
return; | |
} | |
params.devices.cache[data.CUID] = data.UID; | |
callback({ CUID: data.CUID, UID: data.UID }); | |
} | |
}, | |
wait: function(_data, callback) { | |
if (!_data || (typeof _data.Error !== "undefined" && _data.Error != "")) { | |
error(data); | |
return; | |
} | |
var basedata = { | |
chartType: params.chartType | |
} | |
var data = $.extend(data, _data); | |
Connector().Post("IsInProcess", data, check); | |
function check(data) { | |
if (!_data || (typeof data.Error !== "undefined" && data.Error != "")) { | |
error(data); | |
return; | |
} | |
if (data.IsDone) { | |
callback({ CUID: data.CUID, UID: data.UID }); | |
} else if (data.IsInProcess) { | |
setTimeout(function() { Connector().Post("IsInProcess", data, check); }, 3000); | |
} | |
} | |
}, | |
addAction: function() { | |
params.devices.addDevice(params.compareDevices ? Number($("#compareDevice").val()) : Number($("#compareTask").val()), params.CUID); | |
}, | |
init: function() { | |
$("#addChart").click(params.devices.addAction); | |
if (params.compareDevices) $("#compareDevice").change(function() { | |
params.devices.isContains(); | |
}) | |
} | |
}; | |
if (!params.compareDevices) | |
params.tasks.init(); | |
params.devices.init(); | |
} | |
function error(msg) { | |
$.colorbox({ html: $("<div>").css('padding', '10px').html(msg?(msg.Error? msg.Error : msg):"<center>Please, reload page and try again<br><input type='button' value='Reload Page' style='margin-top:20px;' onclick='javascript:location.reload(true);'/></center>"), title: "Server Error" }); | |
} | |
var Connector = function() { | |
var onStart = function() { | |
if(this.data.CUID === undefined) this.data.CUID = params.CUID; | |
}; | |
return new Common.Connector("Handlers/JSonHandler.ashx/ChartAdapter/", {onStart: onStart}); | |
} | |
var filter = new Filter(), | |
wholeBtn = $("#whole"); | |
var data = {ResponseFilterUri: params.url}; | |
if(params.startDate !== undefined) { | |
data.Start = params.startDate - 1000 * 60 * 60 * 24 * 7; | |
data.End = params.startDate ; | |
$("#startDate").val($.formatDate(new Date(data.Start), "MM/dd/yyyy hh:mm:ss a")); | |
$("#endDate").val($.formatDate(new Date(data.End), "MM/dd/yyyy hh:mm:ss a")); | |
} | |
new GetChart(data); | |
var oldShowStripValue = true; | |
function StripVisible() { | |
return $($.find("input:radio[name=getParams]:checked")).val() === "true"; | |
} | |
function ActualUrl() { | |
return unescape(StripVisible() ? params.url : params.url.split('%3F')[0] + '*') | |
} | |
function toUTCString(dateString) { | |
var d = new Date(Number(dateString)); | |
return d.toUTCString().replace(" GMT", ""); | |
} | |
function setRanges(filter) { | |
var data = { | |
Start: filter.from, | |
End: filter.to, | |
ResponseFilterUri: filter.url | |
}; | |
params.filter = data; | |
new GetChart(data); | |
whole(); | |
} | |
function whole() | |
{ | |
wholeBtn.filter(":not(visible)") | |
.data("hash", document.location.hash) | |
.unbind("click") | |
.click(function() { | |
document.location.hash = $(this).hide().data("hash"); | |
params.CUID = params.baseCUID; | |
new GetChart(); | |
delete params.filter; | |
}); | |
} | |
function ToolTip() { | |
var showTooltip = function(x, y, contents) { | |
$('<div id="tooltip">' + contents + '</div>').css({ | |
position: 'absolute', | |
display: 'none', | |
top: y + 5, | |
left: x + 5, | |
border: '1px solid #fdd', | |
padding: '2px', | |
'background-color': '#fee', | |
opacity: 0.80 | |
}).appendTo("body").fadeIn(200); | |
}; | |
var point = function(item) { | |
var getPoint = function(n) { return item.datapoint[n].toFixed(2); }; | |
var x = toUTCString(getPoint(0)); | |
var y = getPoint(1); | |
return { x: x, y: y }; | |
}; | |
this.Downtime = function(item) { | |
showTooltip(item.pageX, item.pageY, item.series.label); | |
}; | |
this.ResponseTime = function(item) { | |
var p = point(item); | |
if (item.series.ttmessage) | |
showTooltip(item.pageX, item.pageY, item.series.ttmessage); | |
else | |
showTooltip(item.pageX, item.pageY, p.x + " = " + p.y); | |
}; | |
this.ResponseTime_ByLocation = function(item) { | |
var p = point(item); | |
if (item.series.ttmessage) | |
showTooltip(item.pageX, item.pageY, item.series.ttmessage); | |
else | |
showTooltip(item.pageX, item.pageY, item.series.label + " of " + p.x + " = " + p.y); | |
}; | |
this.ResponseTimeWithUri = function(item) { | |
var p = point(item); | |
if (item.series.ttmessage) | |
showTooltip(item.pageX, item.pageY, item.series.ttmessage); | |
else | |
showTooltip(item.pageX, item.pageY, item.series.label + " of " + p.x + " = " + p.y); | |
}; | |
this.ResponseTime_ByTask = function(item) { | |
var p = point(item); | |
if (item.series.ttmessage) | |
showTooltip(item.pageX, item.pageY, item.series.ttmessage); | |
else | |
showTooltip(item.pageX, item.pageY, item.series.label + " of " + p.x + " = " + p.y); | |
}; | |
this.Week = function(item) { | |
var p = point(item); | |
if (item.series.ttmessage) | |
showTooltip(item.pageX, item.pageY, item.series.ttmessage); | |
else | |
showTooltip(item.pageX, item.pageY, p.y); | |
}; | |
this.Day = function(item) { | |
var p = point(item); | |
if (item.series.ttmessage) | |
showTooltip(item.pageX, item.pageY, item.series.ttmessage); | |
else | |
showTooltip(item.pageX, item.pageY, p.y); | |
}; | |
this.History = function(item) { | |
var info = item.series.info; | |
var from = toUTCString(info.StartTime); | |
var to = toUTCString(info.EndTime); | |
var type = info.BaseType; | |
showTooltip(item.pageX, item.pageY, type + "<br/>from " + from + "<br/>to " + to); | |
}; | |
} | |
function Plot(data, notsave) { | |
if (!notsave) { params.plotData = data; } | |
if (params.isCompare) { | |
data.options.legend.show = true; | |
data.options.legend.container = $("#legend_container"); | |
$("#legend_container").show(); | |
} | |
var plot = $("#TimeWork").empty(); | |
if (!data.options.yaxis) data.options.yaxis = {}; | |
data.options.yaxis.autoscaleMargin = null; | |
if (params.chartType.toLowerCase() === "downtime") { | |
if (!data.options.series) data.options.series = {}; | |
data.options.series.pie = { show: true, label: { show:false } }; | |
} | |
if (data.maxY && data.options.yaxis) data.options.yaxis.max = data.maxY; | |
if (data.minY && data.options.yaxis) data.options.yaxis.min = data.minY; | |
$.plot(plot, data, data.options); | |
plot.unbind("plotclick"); | |
if (params.chartType.toLowerCase() !== "downtime") { | |
plot.bind("plotclick", plotclick); | |
} | |
if(Plot.IsSetEvents != true) { | |
Plot.IsSetEvents = true; | |
plot.bind("plothover", plothover); | |
plot.bind("plotselected", plotselected); | |
} | |
function plotclick(event, pos, item) { | |
if (item && item.series.data[item.dataIndex].info) { | |
var info = item.series.data[item.dataIndex].info; | |
if (info.CanShowWaterfall) { | |
function on(r) { | |
if (r.CanShowDetailView) { | |
window.open('DetailView.aspx?id=' + info.ID + '&CUID=' + params.CUID); | |
} | |
} | |
Connector().Post("CanShowDetailView", { ID: info.ID }, on); | |
} | |
if(info.CanDrillDown) { | |
var data = { | |
Start: info.Start, | |
End: info.End, | |
ResponseFilterUri: ActualUrl() | |
}; | |
new GetChart(data); | |
whole(); | |
wholeBtn.show(); | |
} | |
} | |
} | |
function plotselected(event, ranges) { | |
wholeBtn.show(); | |
setRanges({ from: ranges.xaxis.from, to: ranges.xaxis.to, url: params.url }); | |
} | |
function plothover(event, pos, item) { | |
function select(on) { | |
if (on) { | |
this.currentSelected = item; | |
plot.highlight(item.series, item.datapoint, false); | |
} else { | |
if (this.currentSelected !== undefined) { | |
plot.unhighlight(this.currentSelected.series, this.currentSelected.datapoint); | |
this.currentSelected = undefined; | |
} | |
} | |
} | |
function tooltip(on) { | |
var elm = $("#tooltip"); | |
elm.remove(); | |
if (on) { | |
if (item.series.tooltip) | |
item.series.tooltip(item); | |
else if (params.chartType.toLowerCase() === "downtime") { | |
$('<div id="tooltip">' + item.series.label + '</div>').css({ | |
position: 'absolute', | |
display: 'none', | |
top: pos.pageY - 15, | |
left: pos.pageX + 5, | |
border: '1px solid #fdd', | |
padding: '2px', | |
'background-color': '#fee', | |
opacity: 0.80 | |
}).appendTo("body").fadeIn(200); | |
} | |
} | |
} | |
if (item) { | |
if (typeof (this.previousPoint) == 'undefined') { | |
this.previousPoint = item.datapoint; | |
tooltip(true); | |
} | |
if (this.previousPoint != item.datapoint) { | |
this.previousPoint = item.datapoint; | |
tooltip(true); | |
} | |
} | |
else { | |
tooltip(false); | |
this.previousPoint = undefined; | |
} | |
} | |
} | |
function Chart(data, reLegend) { | |
//setStddev(data.Average, data.STDDev); | |
var tooltip = (new ToolTip())[params.chartType]; | |
if (reLegend != false) Chart.legend = new Legend($("#legend_container"), params.chartType, data.Series); | |
var legend = Chart.legend; | |
legend.click(function() { new Chart(data, false); }); | |
if ($(".charttitle").text() === "") | |
$(".charttitle").html(data.Header); | |
$("#footer").text(data.Footer); | |
new Plot(new Types(params.chartType)); | |
function Types(type) { | |
var dest = []; | |
function line() { | |
dest.zoom = true; | |
dest.options = { | |
xaxis: { mode: "time" }, | |
selection: { mode: "x" }, | |
legend: { show: false }, | |
grid: { hoverable: true, clickable: true, color: "#a1a1a1", borderWidth: 0.5 } | |
}; | |
dest.maxY = 0; | |
dest.minY = null; | |
$(data.Series).each(function(index, line) { | |
var filter = legend.filter(index + "" + line.LegendName); | |
if (filter.val) { | |
var l = { label: line.LegendName, data: [], tooltip: tooltip, color: filter.color, Average: typeof (data.Average) !== "undefined" ? data.Average : line.Average, STDDev: typeof (data.STDDev) !== "undefined" ? data.STDDev : line.STDDev }; | |
$(line.Points).each(function(index, p) { | |
var v = [p.X, p.Y]; | |
v.info= {ID: p.ID, Start: p.Start, End: p.End, CanShowWaterfall: p.CanShowWaterfall, CanDrillDown: p.CanDrillDown, y: p.Y}; | |
l.data.push(v); | |
if (p.Y > dest.maxY) { dest.maxY = p.Y; } | |
if (dest.minY === null) dest.minY = p.Y; | |
else if (dest.minY > p.Y) dest.minY = p.Y; | |
}); | |
dest.push(l); | |
} | |
}); | |
if (data.Background) | |
$(data.Background).each(function(index, line) { | |
var max = dest.maxY == 0 ? 100 : dest.maxY; | |
var l = { data: [[line.Start, max]], ttmessage: "<span style='font-weight:bold;'>" + line.Type + "</span><br>HitCount: " + line.HitCount+"<br/>From: "+new Date(line.Start) + "<br/>To:"+new Date(line.End), tooltip: tooltip, color: line.color, bars: { lineWidth: 0, barWidth: (line.End - line.Start), show: true} }; | |
dest.push(l); | |
}); | |
if (dest.maxY === 0) { dest.maxY = 0.001; } | |
} | |
this.Downtime = function() { | |
dest.zoom = false; | |
var tickFormatter = function(v, axis, a) { | |
return ""; | |
}; | |
dest.options = { | |
xaxis: { tickSize: 1, tickFormatter: tickFormatter }, | |
yaxis: { max: 100 }, | |
legend: { show: false }, | |
grid: { hoverable: true, clickable: true, color: "#a1a1a1", borderWidth: 0.5 } | |
}; | |
var x = 0; | |
$(data.Series).each(function(index, line) { | |
var filter = legend.filter(index + "" + line.LegendName); | |
var l = { label: line.LegendName, data: [], bars: { show: true }, tooltip: tooltip, color: filter.color }; | |
$(line.Points).each(function(index, point) { | |
l.data.push([x++, point.Y]); | |
}); | |
dest.push(l); | |
}); | |
} | |
this.ResponseTime = function() { line(); }; | |
this.ResponseTime_ByLocation = function() { line(); }; | |
this.ResponseTimeWithUri = function() { line(); }; | |
this.ResponseTime_ByTask = function() { line(); }; | |
this.Week = function() { | |
dest.zoom = false; | |
var tickFormatter = function(v, axis) { | |
return ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", ""][v]; | |
}; | |
dest.options = { | |
xaxis: { tickFormatter: tickFormatter }, | |
legend: { show: false }, | |
grid: { hoverable: true, clickable: true, color: "#a1a1a1", borderWidth: 0.5 } | |
}; | |
var x = 0; | |
$(data.Series).each(function(index, line) { | |
var l = { label: line.LegendName, data: [], bars: { show: true, align: "center" }, tooltip: tooltip }; | |
$(line.Points).each(function(index, point) { | |
l.data.push([x++, point.Y]); | |
}); | |
dest.push(l); | |
}); | |
}; | |
this.Day = function() { | |
dest.zoom = false; | |
var tickFormatter = function(v, axis) { return v; }; | |
dest.options = { | |
xaxis: { tickSize: 1, tickFormatter: tickFormatter }, | |
legend: { show: false }, | |
grid: { hoverable: true, clickable: true, color: "#a1a1a1", borderWidth: 0.5 } | |
}; | |
var x = 0; | |
$(data.Series).each(function(index, line) { | |
var l = { label: line.LegendName, data: [], bars: { show: true, align: "center" }, tooltip: tooltip }; | |
$(line.Points).each(function(index, point) { | |
l.data.push([x++, point.Y]); | |
}); | |
dest.push(l); | |
}); | |
}; | |
this[type](); | |
return dest; | |
} | |
} | |
function waiting(on, proc) { | |
if (!on && anyWait()) return; | |
var waiting = $("#waiting"); | |
if (on) { | |
var dialogWidth; | |
var dialogHeight = 150; | |
waiting.dialog({ | |
modal: true, | |
width: 600, | |
position: (isMobile.any()) ? [0, 0] : { my: "center", at: "center", of: window }, | |
closeOnEscape: false, | |
open: function () { | |
if (isMobile.any()) { | |
$(this).dialog("option", "width", (window.innerWidth > 600) ? 600 : (window.innerWidth - 10)); | |
dialogWidth = $(this).dialog("option", "width"); | |
var left = (window.innerWidth / 2) - (dialogWidth / 2); | |
var top = (window.innerHeight / 2) - (dialogHeight / 2); | |
$(this).dialog("option", "position", [left, top]); | |
} | |
}, | |
}); | |
waiting.dialog("open"); | |
waiting.prev(".ui-dialog-titlebar").hide(); | |
}else{ | |
waiting.dialog("close"); | |
} | |
} | |
function GetChart(extra_params) { | |
var CUID; | |
params.activeLoad["main"] = true; | |
waiting(true); | |
if(extra_params !== undefined || params.hash == "") { | |
wait({UID: ""}); | |
}else{ | |
get({UID: params.hash}); | |
} | |
function get(r) { | |
var UID = r.UID; | |
function on(r) { | |
new Chart(r); | |
filterOutlier(); | |
filter.set(r.Range); | |
if (params.isCompare) { params.devices.update(); } | |
params.activeLoad["main"] = false; | |
waiting(false); | |
} | |
Connector().Post("GetChart", { chartType: params.chartType, CUID: unescape(params.CUID), UID: UID, ResponseFilterUri: ActualUrl() }, on); | |
} | |
function wait(r) { | |
function check(r) { | |
CUID = r.CUID; | |
if (r.Error != "") { | |
params.activeLoad["main"] = false; | |
waiting(false); | |
if (isMobile.any()) { | |
$.colorbox.settings.width = "70%"; | |
$.colorbox.settings.height = "260px"; | |
$.colorbox.settings.reposition = false; | |
} | |
$.colorbox({ html: $("<div>").css('padding', '10px').html(r.Error), title: 'Server error' }); | |
$(document).bind('cbox_complete', function () { | |
if (isMobile.any()) { | |
$("#colorbox").css({ | |
left: window.pageXOffset + ((window.innerWidth / 2) - ($("#colorbox").width() / 2)) | |
}); | |
$("#colorbox").css('font-size', '3vw'); | |
$("#colorbox").css('text-align', 'center'); | |
$("#cboxTitle").css('font-size', '3vw'); | |
} | |
}); | |
} else if (r.IsDone) { | |
document.location.hash = "#" + escape(r.UID); | |
if (params.hash === '') params.hash = document.location.hash.replace("#", ""); | |
get(r); | |
} else { | |
setTimeout(function() { wait(r); }, 3000); | |
} | |
} | |
var data = $.extend({ chartType: params.chartType, CUID: unescape(params.CUID), UID: r.UID }, extra_params); | |
extra_params = {}; | |
if (data.Start <= 0 || data.End <= 0) { | |
delete data.Start; | |
delete data.End; | |
} | |
if (data.ResponseFilterUri) | |
data.ResponseFilterUri = unescape(data.ResponseFilterUri); | |
Connector().Post("IsInProcess", data, check); | |
} | |
} | |
function Legend(container, type, lines) { | |
var click; | |
var filter = {}; | |
var color = ["#a7cd5e", "#ae59b3", "#757fce", "#7d7d41", "#e15f00", "#3896c6", "#2c9f36", "#a02f09", "#eab80b", "#a7a7a7", "#6a3604", "#afcffd", "#c2c655", "#71d3d4", "#b07061", "#dc143c", "#483d8b", "#ff1493", "#696969", "#ffb6c1", "#ffa500", "#ff0000", "#000080", "#00ff00", "#ffa07a", "#8b0000"]; | |
color.current = 0; | |
this.container = container; | |
tr(); | |
draw(); | |
function tr() { | |
var elm = container.find("tr").hide(); | |
if (elm.size() == 1) { | |
var maxRows = Math.ceil(lines.length / container.find("tr:first td").size()); | |
for(var i = 0; i < maxRows; i++) { | |
elm.after(elm.clone()); | |
} | |
} | |
} | |
function Types() { | |
function draw() { | |
function widthTd() { | |
var count = container.find("tr:first td").size(); | |
return $(document).width() / count; | |
} | |
refresh(); | |
var tds = container.find("td"); | |
var i = 0; | |
var widthTd = widthTd(); | |
jQuery.each(filter, function(key, val) { | |
var enabled = lines[i].Points.length != 0; | |
var elm = new Checkbox(lines[i].LegendName, key, filter[key].color, check, enabled); | |
if (enabled) elm.on(); else elm.off(); | |
$(tds[i++]).empty().append(elm.elm).closest("tr").show(); | |
}); | |
//extending to a full list of monitors | |
if (params.chartType == "ResponseTime_ByLocation" || params.chartType == "ResponseTimeWithUri") | |
if (existingMonitors !== undefined) { | |
jQuery.each(existingMonitors, function(index, mName) { | |
if (filter === undefined || filter[mName] == null) { | |
var elm = new Checkbox(mName, mName, "lightgray", function(){}, false); | |
elm.off(); | |
$(tds[i++]).empty().append(elm.elm).closest("tr").show(); | |
} | |
}); | |
} | |
} | |
function downtime() { | |
refresh(); | |
var tds = container.find("td"); | |
var i = 0; | |
jQuery.each(filter, function(key, val) { | |
var elm = new Checkbox(lines[i].LegendName, key, filter[key].color); | |
elm.off(); | |
$(tds[i++]).empty().append(elm.elm).closest("tr").show(); | |
}); | |
} | |
this.Downtime = function() { downtime(); }; | |
this.ResponseTime = function() { }; | |
this.ResponseTime_ByTask = function() { draw(); }; | |
this.ResponseTime_ByLocation = function() { draw(); }; | |
this.ResponseTimeWithUri = function() { draw(); }; | |
this.Week = function() { }; | |
this.Day = function() { }; | |
} | |
function draw() { | |
(new Types())[type](); | |
} | |
this.filter = function(name) { | |
var f = filter[name]; | |
if (f === undefined) { | |
return { val: true }; | |
} else { | |
return { val: f.val, color: f.color }; | |
} | |
}; | |
this.click = function(callback) { | |
click = callback; | |
}; | |
function refresh() { | |
var empty = true; | |
$(lines).each(function(index, line) { | |
var f = filter[index+line.LegendName] = {}; | |
f.val = true; | |
f.color = color[color.current++]; | |
empty = false; | |
}); | |
if (!empty) { container.show(); } | |
} | |
function check(data, val) { | |
filter[data].val = val; | |
click(); | |
} | |
} | |
function Checkbox(text, data, color, click, width) { | |
if(Checkbox.checkbox === undefined) Checkbox.checkbox = $(".legendcheckboxlist").clone(true).show(); | |
var obj = this; | |
var img = { on: "images/ccheckbox-on.gif", off: "images/ccheckbox-off.gif" }; | |
var elms = { | |
elm: Checkbox.checkbox.clone(true) | |
}; | |
elms.div = elms.elm.find(".legendcheckbox").css("background-color", color); | |
elms.img = elms.elm.find("img")[0]; | |
this.elm = elms.elm; | |
if (width != false) elms.elm.click(onclick); | |
var div = $('<div style="overflow:hidden"><div>').text(text); | |
if (width == false) $(div).css("color", "lightgray"); | |
div.width(width); | |
elms.elm.find(".legendcheckboxlabel").html(div); | |
var val = false; | |
function onclick() { | |
if (click !== undefined) { | |
if (val) { | |
obj.off(); | |
} else { | |
obj.on(); | |
} | |
click(data, val); | |
} | |
} | |
this.off = function() { | |
elms.img.src = img.off; | |
val = false; | |
}; | |
this.on = function() { | |
elms.img.src = img.on; | |
val = true; | |
}; | |
this.val = function() { return data; }; | |
} | |
function Filter() { | |
var testDate = new RegExp(/\d{1,2}\/\d{1,2}\/\d{2,4}/); | |
var elms = { | |
startDate: $("#startDate"), | |
endDate: $("#endDate") | |
} | |
$("#startDate, #endDate") | |
.focus(function() { | |
$(this).attr("prevValue", $(this).val()); | |
}) | |
.blur(function() { | |
var val = $(this).val(); | |
var dStart = new Date(elms.startDate.val()); | |
var dEnd = new Date(elms.endDate.val()); | |
var d = new Date(val); | |
var test = new RegExp(/(\d{1,2})\/(\d{1,2})\/(\d{4,4})\D((\d{1,2}):(\d{1,2}):(\d{1,2})\s(PM|AM))?/); | |
var ex = test.exec(val); | |
if ($(this).attr("prevValue")) { | |
var dt = Date.parse(val); | |
if (!test.test(val) || isNaN(dt) || (dStart.getTime() == dEnd.getTime()) || Number(ex[1]) <= 0 || Number(ex[2]) <= 0 || Number(ex[3]) <= 0 || Number(ex[1]) > 12 || Number(ex[2]) > 31) | |
$(this).val($(this).attr("prevValue")) | |
} | |
$(this).removeAttr("prevValue"); | |
}); | |
this.set = function(range) { | |
//set(elms.startDate, range.from); | |
//set(elms.endDate, range.to); | |
function set(elm, val) { | |
var v = $.formatDate(new Date(val), "MM/dd/yyyy hh:mm:ss a"); | |
elm.val(v); | |
} | |
}; | |
if(params.url!==null) { | |
$("#filter").show(); | |
$("#back").show(); | |
} | |
$("#load").click(function() { | |
if (Date.parse(elms.startDate.val()) && Date.parse(elms.endDate.val())) | |
var filter = { | |
from: m(elms.startDate.val()), | |
to: m(elms.endDate.val()), | |
url: ActualUrl() | |
}; | |
setRanges(filter); | |
function m(s) { return new Date(s).getUTCTotalMilliseconds(); } | |
}); | |
$("#back").click(function() { | |
if (document.referrer != '') window.location = document.referrer; | |
else window.history.go(-1 * (window.history.length - 1)); | |
}); | |
$("input:radio[name=getParams]").change(function() { | |
if (StripVisible() == oldShowStripValue) return; | |
oldShowStripValue = StripVisible(); | |
var filter = { | |
from: m(elms.startDate.val()), | |
to: m(elms.endDate.val()), | |
url: ActualUrl() | |
}; | |
setRanges(filter); | |
function m(s) { return new Date(s).getUTCTotalMilliseconds(); } | |
}); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment