summaryrefslogtreecommitdiffstats
path: root/static
diff options
context:
space:
mode:
authorStephan Schwaer2015-06-02 14:04:01 +0200
committerStephan Schwaer2015-06-02 14:04:01 +0200
commitdb1e800a4abc5211c8e496619b0ac890006ae349 (patch)
tree04edd322e0a2db1bf478f0d964f31331c6f06c2f /static
parentAdded upload rate to the server statistics. (diff)
downloaddnbd3-status-db1e800a4abc5211c8e496619b0ac890006ae349.tar.gz
dnbd3-status-db1e800a4abc5211c8e496619b0ac890006ae349.tar.xz
dnbd3-status-db1e800a4abc5211c8e496619b0ac890006ae349.zip
Added logarithmic scaling into graph and smoothie.js.
Diffstat (limited to 'static')
-rw-r--r--static/smoothie.js21
-rw-r--r--static/status-dnbd3.html18
2 files changed, 25 insertions, 14 deletions
diff --git a/static/smoothie.js b/static/smoothie.js
index 27f5151..827c121 100644
--- a/static/smoothie.js
+++ b/static/smoothie.js
@@ -227,7 +227,10 @@
* maxValue: undefined, // specify to clamp the upper y-axis to a given value
* maxValueScale: 1, // allows proportional padding to be added above the chart. for 10% padding, specify 1.1.
* minValueScale: 1, // allows proportional padding to be added below the chart. for 10% padding, specify 1.1.
- * yRangeFunction: undefined, // function({min: , max: }) { return {min: , max: }; }
+ * yRangeFunction: function(value) { // function({min: , max: }) { return {min: , max: }; }
+ * return value)
+ * }
+ * valueTransformFunction: undefinde // function(value) { return value; }
* scaleSmoothing: 0.125, // controls the rate at which y-value zoom animation occurs
* millisPerPixel: 20, // sets the speed at which the chart pans by
* enableDpiScaling: true, // support rendering at different DPI depending on the device
@@ -285,6 +288,9 @@
},
maxValueScale: 1,
minValueScale: 1,
+ valueTransformFunction: function (value) {
+ return value;
+ },
interpolation: 'bezier',
scaleSmoothing: 0.125,
maxDataSetLength: 2,
@@ -572,10 +578,10 @@
// Calculate the threshold time for the oldest data points.
oldestValidTime = time - (dimensions.width * chartOptions.millisPerPixel),
valueToYPixel = function(value) {
- var offset = value - this.currentVisMinValue;
- return this.currentValueRange === 0
+ var offset = this.options.valueTransformFunction(value - this.currentVisMinValue);
+ return this.currentValueRange === 0
? dimensions.height
- : dimensions.height - (Math.round((offset / this.currentValueRange) * dimensions.height));
+ : dimensions.height - (Math.round((offset / this.options.valueTransformFunction(this.currentValueRange)) * dimensions.height));
}.bind(this),
timeToXPixel = function(t) {
if(chartOptions.scrollBackwards) {
@@ -751,10 +757,11 @@
if (!chartOptions.labels.disabled && !isNaN(this.valueRange.min) && !isNaN(this.valueRange.max)) {
var maxValueString = chartOptions.yMaxFormatter(this.valueRange.max, chartOptions.labels.precision),
minValueString = chartOptions.yMinFormatter(this.valueRange.min, chartOptions.labels.precision),
- labelPos = chartOptions.scrollBackwards ? 0 : dimensions.width - context.measureText(maxValueString).width - 2;
+ maxLabelPos = chartOptions.scrollBackwards ? 0 : dimensions.width - context.measureText(maxValueString).width - 2;
+ minLabelPos = chartOptions.scrollBackwards ? 0 : dimensions.width - context.measureText(minValueString).width - 2;
context.fillStyle = chartOptions.labels.fillStyle;
- context.fillText(maxValueString, labelPos, chartOptions.labels.fontSize);
- context.fillText(minValueString, labelPos, dimensions.height - 2);
+ context.fillText(maxValueString, maxLabelPos, chartOptions.labels.fontSize);
+ context.fillText(minValueString, minLabelPos, dimensions.height - 2);
}
// Display timestamps along x-axis at the bottom of the chart.
diff --git a/static/status-dnbd3.html b/static/status-dnbd3.html
index 645447f..d9ce816 100644
--- a/static/status-dnbd3.html
+++ b/static/status-dnbd3.html
@@ -21,7 +21,7 @@
<script type="text/javascript">
// Initialize the statistics chart at the bottom.
-var smoothie = new SmoothieChart({'millisPerPixel': 300, 'grid': {'millisPerLine': 30000}, timestampFormatter:SmoothieChart.timeFormatter});
+var smoothie = new SmoothieChart({'millisPerPixel': 300, 'grid': {'millisPerLine': 30000}, timestampFormatter:SmoothieChart.timeFormatter, yMaxFormatter: bytesToString, yMinFormatter: bytesToString, valueTransformFunction: logarithmicScaling});
smoothie.streamTo(document.getElementById("traffic"), 2000);
// For coloring the servers and the chart-lines.
@@ -32,6 +32,10 @@ function makeId(prefix, text) {
return prefix + text.replace(/\./g, "-");
}
+function logarithmicScaling(value) {
+ return Math.log(value/1000000+1);
+}
+
function myGraph(el) {
var changed = false;
@@ -332,16 +336,16 @@ function updateGraph(g, data){
function bytesToString( bytes ) {
var convertedValue;
var unit;
- if (bytes > 1099511627776 ) {
+ if (bytes >= 1099511627776 ) {
convertedValue = Math.round( (bytes / 1099511627776) * 100 ) / 100 ;
unit = " TiB";
- } else if (bytes > 1073741824 ) {
+ } else if (bytes >= 1073741824 ) {
convertedValue = Math.round( (bytes / 1073741824) * 100 ) / 100 ;
unit = " GiB";
- } else if (bytes > 1048576 ) {
+ } else if (bytes >= 1048576 ) {
convertedValue = Math.round( (bytes / 1048576) * 100 ) / 100 ;
unit = " MiB";
- } else if ( bytes > 1024 ) {
+ } else if ( bytes >= 1024 ) {
convertedValue = Math.round( (bytes / 1024) * 100 ) / 100 ;
// convertedValue = Math.round( ( convertedValue / 1024 ) * 100 ) / 100;
unit = " KiB";
@@ -385,7 +389,7 @@ function updateTrafficGraph(stats, data){
for (var i = 0; i < stats.length; ++i) {
var server = servers[stats[i].address];
if (!server) {
- servers[stats[i].address] = server = { 'lastUptime': 0, 'lastSent': 0, 'line': new TimeSeries(), 'index': serverCount++ , 'uploadRate': 0, 'downloadRate': 0}
+ servers[stats[i].address] = server = { 'lastUptime': 0, 'lastSent': 0, 'line': new TimeSeries({logarithmicScale: true}), 'index': serverCount++ , 'uploadRate': 0, 'downloadRate': 0}
server.color = colorList(stats[i].address);
smoothie.addTimeSeries(server['line'], {lineWidth:2, strokeStyle: server.color});
// console.log("Added");
@@ -400,7 +404,7 @@ function updateTrafficGraph(stats, data){
// Upload rate in bytes/s
server['uploadRate'] = (stats[i].bytesSent - server['lastSent'])/(data.timestamp - lastTime) * 1000;
// Rate in MiB/s
- server['line'].append(new Date().getTime(), server['uploadRate']/( 1024 * 1024));
+ server['line'].append(new Date().getTime(), server['uploadRate']);
} else {
server['uploadRate'] = 0;
}