From db1e800a4abc5211c8e496619b0ac890006ae349 Mon Sep 17 00:00:00 2001 From: Stephan Schwaer Date: Tue, 2 Jun 2015 14:04:01 +0200 Subject: Added logarithmic scaling into graph and smoothie.js. --- static/smoothie.js | 21 ++++++++++++++------- static/status-dnbd3.html | 18 +++++++++++------- 2 files changed, 25 insertions(+), 14 deletions(-) (limited to 'static') 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 @@