hydrar/mistserver
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

LSP stats map coordinates (WIP)

Browse source
This commit is contained in:
cat 2014-04-10 12:57:32 +02:00 • committed by Thulinma
parent 6cbf81bdb9
commit d277ef3922
3 changed files with 306 additions and 143 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
lsp/main.css
View file

@ -455,8 +455,19 @@ button[disabled=disabled] {
margin: 0.1em; margin: 0.1em;
padding: 0 0.5em; padding: 0 0.5em;
} }
#graphcontainer .graph > .graphforeground {
width: 100%;
height: 100%;
display: block;
}
#graphcontainer .graph > .graphbackground {
position: absolute;
display: block;
opacity: 0.5;
}
#graphcontainer .graph { #graphcontainer .graph {
height: 250px; height: 400px;
margin: 0 auto;
} }
.legend { .legend {
font-size: 0.8em; font-size: 0.8em;

87
lsp/map.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 841 KiB

349
lsp/pages.js
View file

@ -1535,156 +1535,221 @@ function showTab(tabName,streamName) {
$('#'+graph.id).children('.graph,.legend').html(''); $('#'+graph.id).children('.graph,.legend').html('');
return; return;
} }
var yaxes = []; switch (graph.type) {
var yaxesTemplates = { case 'coords':
percentage: { //format [lat,long]
name: 'percentage', var data = [[-54.657438,-65.11675],[49.725719,-1.941553],[-34.425464,172.677617],[76.958669,68.494178],[0,0]];
color: 'black', //correct latitude according to the Miller cylindrical projection
display: false, for (var i in data) {
tickColor: 0, var lat = data[i][0];
tickDecimals: 0, var lon = data[i][1];
tickFormatter: function(val,axis){ //to radians
return val.toFixed(axis.tickDecimals) + '%'; lat = Math.PI * lat / 180;
}, var y = 1.25 * Math.log(Math.tan(0.25 * Math.PI + 0.4 * lat));
tickLength: 0, data[i] = [lon,y];
min: 0 }
}, console.log(data);
amount: {
name: 'amount', plotsets = [{data:data}];
color: 'black', //make sure the plot area has the correct height/width ratio
display: false, if ($('#'+graph.id+' .graphbackground').length == 0) {
tickColor: 0, var parent = $('#'+graph.id+' .graph');
tickDecimals: 0, var mapheight = 2450;
tickFormatter: function(val,axis){ var mapwidth = 3386.08;
return seperateThousands(val.toFixed(axis.tickDecimals),' '); parent.height(parent.width()*mapheight/mapwidth);
}, var placeholder = $('<div>').addClass('graphforeground')
tickLength: 0, parent.html(
min: 0 $('<img>').attr('src','map.svg').addClass('graphbackground').width(parent.width).height(parent.height())
}, ).append(
bytespersec: { placeholder
name: 'bytespersec', );
color: 'black', }
display: false, else {
tickColor: 0, var placeholder = $('#'+graph.id+' .graphforeground');
tickDecimals: 1, }
tickFormatter: function(val,axis){ plot = $.plot(
var suffix = ['bytes','KiB','MiB','GiB','TiB','PiB']; placeholder,
if (val == 0) { plotsets,
val = val+' '+suffix[0]; {
legend: {show: false},
xaxis: {
show: false,
min: -170,
max: 190
},
yaxis: {
show: false,
min: -2.248101053,
max: 2.073709536
},
series: {
lines: {show: false},
points: {show: true}
},
grid: {
hoverable: true,
margin: 0,
border: 0,
borderWidth: 0,
minBorderMargin: 0
}
} }
else { );
var exponent = Math.floor(Math.log(Math.abs(val)) / Math.log(1024)); break;
if (exponent < 0) { case 'time':
val = val.toFixed(axis.tickDecimals)+' '+suffix[0]; case 'default':
var yaxes = [];
var yaxesTemplates = {
percentage: {
name: 'percentage',
color: 'black',
display: false,
tickColor: 0,
tickDecimals: 0,
tickFormatter: function(val,axis){
return val.toFixed(axis.tickDecimals) + '%';
},
tickLength: 0,
min: 0
},
amount: {
name: 'amount',
color: 'black',
display: false,
tickColor: 0,
tickDecimals: 0,
tickFormatter: function(val,axis){
return seperateThousands(val.toFixed(axis.tickDecimals),' ');
},
tickLength: 0,
min: 0
},
bytespersec: {
name: 'bytespersec',
color: 'black',
display: false,
tickColor: 0,
tickDecimals: 1,
tickFormatter: function(val,axis){
var suffix = ['bytes','KiB','MiB','GiB','TiB','PiB'];
if (val == 0) {
val = val+' '+suffix[0];
} }
else { else {
val = Math.round(val / Math.pow(1024,exponent) * Math.pow(10,axis.tickDecimals)) / Math.pow(10,axis.tickDecimals) +' '+suffix[exponent]; var exponent = Math.floor(Math.log(Math.abs(val)) / Math.log(1024));
if (exponent < 0) {
val = val.toFixed(axis.tickDecimals)+' '+suffix[0];
}
else {
val = Math.round(val / Math.pow(1024,exponent) * Math.pow(10,axis.tickDecimals)) / Math.pow(10,axis.tickDecimals) +' '+suffix[exponent];
}
} }
} return val + '/s';
return val + '/s'; },
}, tickLength: 0,
tickLength: 0, ticks: function(axis,a,b,c,d){
ticks: function(axis,a,b,c,d){ //taken from flot source code (function setupTickGeneration),
//taken from flot source code (function setupTickGeneration), //modified to think in multiples of 1024 by Carina van der Meer for DDVTECH
//modified to think in multiples of 1024 by Carina van der Meer for DDVTECH
// heuristic based on the model a*sqrt(x) fitted to
// heuristic based on the model a*sqrt(x) fitted to // some data points that seemed reasonable
// some data points that seemed reasonable var noTicks = 0.3 * Math.sqrt($('.graph').first().height());
var noTicks = 0.3 * Math.sqrt($('.graph').first().height());
var delta = (axis.max - axis.min) / noTicks,
var delta = (axis.max - axis.min) / noTicks, exponent = Math.floor(Math.log(Math.abs(delta)) / Math.log(1024)),
exponent = Math.floor(Math.log(Math.abs(delta)) / Math.log(1024)), correcteddelta = delta / Math.pow(1024,exponent),
correcteddelta = delta / Math.pow(1024,exponent), dec = -Math.floor(Math.log(correcteddelta) / Math.LN10),
dec = -Math.floor(Math.log(correcteddelta) / Math.LN10), maxDec = axis.tickDecimals;
maxDec = axis.tickDecimals;
if (maxDec != null && dec > maxDec) {
if (maxDec != null && dec > maxDec) { dec = maxDec;
dec = maxDec;
}
var magn = Math.pow(10, -dec),
norm = correcteddelta / magn, // norm is between 1.0 and 10.0
size;
if (norm < 1.5) {
size = 1;
} else if (norm < 3) {
size = 2;
// special case for 2.5, requires an extra decimal
if (norm > 2.25 && (maxDec == null || dec + 1 <= maxDec)) {
size = 2.5;
++dec;
} }
} else if (norm < 7.5) {
size = 5; var magn = Math.pow(10, -dec),
} else { norm = correcteddelta / magn, // norm is between 1.0 and 10.0
size = 10; size;
}
if (norm < 1.5) {
size *= magn; size = 1;
size = size * Math.pow(1024,exponent); } else if (norm < 3) {
size = 2;
if (axis.minTickSize != null && size < axis.minTickSize) { // special case for 2.5, requires an extra decimal
size = axis.minTickSize; if (norm > 2.25 && (maxDec == null || dec + 1 <= maxDec)) {
} size = 2.5;
++dec;
axis.delta = delta; }
axis.tickDecimals = Math.max(0, maxDec != null ? maxDec : dec); } else if (norm < 7.5) {
axis.tickSize = size; size = 5;
} else {
var ticks = [], size = 10;
start = axis.tickSize * Math.floor(axis.min / axis.tickSize), }
i = 0,
v = Number.NaN, size *= magn;
prev; size = size * Math.pow(1024,exponent);
do { if (axis.minTickSize != null && size < axis.minTickSize) {
prev = v; size = axis.minTickSize;
v = start + i * axis.tickSize; }
ticks.push(v);
++i; axis.delta = delta;
} while (v < axis.max && v != prev); axis.tickDecimals = Math.max(0, maxDec != null ? maxDec : dec);
return ticks; axis.tickSize = size;
},
min: 0 var ticks = [],
} start = axis.tickSize * Math.floor(axis.min / axis.tickSize),
}; i = 0,
var xaxistemplates = { v = Number.NaN,
time: { prev;
name: 'time',
mode: 'time', do {
timezone: 'browser', prev = v;
ticks: 5 v = start + i * axis.tickSize;
} ticks.push(v);
} ++i;
var plotsets = []; } while (v < axis.max && v != prev);
for (var i in datasets) { return ticks;
if (datasets[i].display) { },
if (yaxesTemplates[datasets[i].yaxistype].display === false) { min: 0
yaxes.push(yaxesTemplates[datasets[i].yaxistype]);
yaxesTemplates[datasets[i].yaxistype].display = yaxes.length;
} }
datasets[i].yaxis = yaxesTemplates[datasets[i].yaxistype].display; };
datasets[i].color = Number(i); var xaxistemplates = {
plotsets.push(datasets[i]); time: {
} name: 'time',
} mode: 'time',
if (yaxes[0]) { yaxes[0].color = 0; } timezone: 'browser',
plot = $.plot( ticks: 5
$('#'+graph.id+' .graph'),
plotsets,
{
legend: {show: false},
xaxis: xaxistemplates[graph.type],
yaxes: yaxes,
grid: {
hoverable: true,
borderWidth: {top: 0, right: 0, bottom: 1, left: 1},
color: 'black',
backgroundColor: {colors: ['#fff','#ededed']}
} }
} }
); var plotsets = [];
for (var i in datasets) {
if (datasets[i].display) {
if (yaxesTemplates[datasets[i].yaxistype].display === false) {
yaxes.push(yaxesTemplates[datasets[i].yaxistype]);
yaxesTemplates[datasets[i].yaxistype].display = yaxes.length;
}
datasets[i].yaxis = yaxesTemplates[datasets[i].yaxistype].display;
datasets[i].color = Number(i);
plotsets.push(datasets[i]);
}
}
if (yaxes[0]) { yaxes[0].color = 0; }
plot = $.plot(
$('#'+graph.id+' .graph'),
plotsets,
{
legend: {show: false},
xaxis: xaxistemplates[graph.type],
yaxes: yaxes,
grid: {
hoverable: true,
borderWidth: {top: 0, right: 0, bottom: 1, left: 1},
color: 'black',
backgroundColor: {colors: ['#fff','#ededed']}
}
}
);
break;
} //end of graph type switch
$('#'+graph.id+' .legend').html( $('#'+graph.id+' .legend').html(
$('<div>').addClass('legend-list').addClass('checklist') $('<div>').addClass('legend-list').addClass('checklist')
); );