Skip to content

N
nexpie-grafana-theme
Commit 1b0cddfa by Torkel Ödegaard
Options

Graph: Tooltip refactoring for testability

parent 231a599f
Showing with 227 additions and 150 deletions
src/app/components/kbn.js
...@@ -316,6 +316,10 @@ function($, _, moment) { ...@@ -316,6 +316,10 @@ function($, _, moment) {
kbn.formatFuncCreator = function(factor, extArray) { kbn.formatFuncCreator = function(factor, extArray) {
return function(size, decimals, scaledDecimals) { return function(size, decimals, scaledDecimals) {
if (size === null) {
return "";
}
var steps = 0; var steps = 0;
while (Math.abs(size) >= factor) { while (Math.abs(size) >= factor) {
...@@ -331,6 +335,10 @@ function($, _, moment) { ...@@ -331,6 +335,10 @@ function($, _, moment) {
}; };
kbn.toFixed = function(value, decimals) { kbn.toFixed = function(value, decimals) {
if (value === null) {
return "";
}
var factor = decimals ? Math.pow(10, decimals) : 1; var factor = decimals ? Math.pow(10, decimals) : 1;
var formatted = String(Math.round(value * factor) / factor); var formatted = String(Math.round(value * factor) / factor);
...@@ -359,6 +367,8 @@ function($, _, moment) { ...@@ -359,6 +367,8 @@ function($, _, moment) {
kbn.valueFormats.none = kbn.toFixed; kbn.valueFormats.none = kbn.toFixed;
kbn.valueFormats.ms = function(size, decimals, scaledDecimals) { kbn.valueFormats.ms = function(size, decimals, scaledDecimals) {
if (size === null) { return ""; }
if (Math.abs(size) < 1000) { if (Math.abs(size) < 1000) {
return kbn.toFixed(size, decimals) + " ms"; return kbn.toFixed(size, decimals) + " ms";
} }
...@@ -383,6 +393,8 @@ function($, _, moment) { ...@@ -383,6 +393,8 @@ function($, _, moment) {
}; };
kbn.valueFormats.s = function(size, decimals, scaledDecimals) { kbn.valueFormats.s = function(size, decimals, scaledDecimals) {
if (size === null) { return ""; }
if (Math.abs(size) < 600) { if (Math.abs(size) < 600) {
return kbn.toFixed(size, decimals) + " s"; return kbn.toFixed(size, decimals) + " s";
} }
...@@ -407,6 +419,8 @@ function($, _, moment) { ...@@ -407,6 +419,8 @@ function($, _, moment) {
}; };
kbn.valueFormats['µs'] = function(size, decimals, scaledDecimals) { kbn.valueFormats['µs'] = function(size, decimals, scaledDecimals) {
if (size === null) { return ""; }
if (Math.abs(size) < 1000) { if (Math.abs(size) < 1000) {
return kbn.toFixed(size, decimals) + " µs"; return kbn.toFixed(size, decimals) + " µs";
} }
...@@ -419,6 +433,8 @@ function($, _, moment) { ...@@ -419,6 +433,8 @@ function($, _, moment) {
}; };
kbn.valueFormats.ns = function(size, decimals, scaledDecimals) { kbn.valueFormats.ns = function(size, decimals, scaledDecimals) {
if (size === null) { return ""; }
if (Math.abs(size) < 1000) { if (Math.abs(size) < 1000) {
return kbn.toFixed(size, decimals) + " ns"; return kbn.toFixed(size, decimals) + " ns";
} }
......
src/app/components/timeSeries.js
...@@ -5,10 +5,15 @@ define([ ...@@ -5,10 +5,15 @@ define([
function (_, kbn) { function (_, kbn) {
'use strict'; 'use strict';
function defaultValueFormater(value) {
return kbn.valueFormats.none(value, 2, 2);
}
function TimeSeries(opts) { function TimeSeries(opts) {
this.datapoints = opts.datapoints; this.datapoints = opts.datapoints;
this.info = opts.info; this.info = opts.info;
this.label = opts.info.alias; this.label = opts.info.alias;
this.valueFormater = defaultValueFormater;
} }
function matchSeriesOverride(aliasOrRegex, seriesAlias) { function matchSeriesOverride(aliasOrRegex, seriesAlias) {
...@@ -108,11 +113,14 @@ function (_, kbn) { ...@@ -108,11 +113,14 @@ function (_, kbn) {
}; };
TimeSeries.prototype.updateLegendValues = function(formater, decimals, scaledDecimals) { TimeSeries.prototype.updateLegendValues = function(formater, decimals, scaledDecimals) {
this.info.avg = this.info.avg != null ? formater(this.info.avg, decimals, scaledDecimals) : null; this.valueFormater = function(value) {
this.info.current = this.info.current != null ? formater(this.info.current, decimals, scaledDecimals) : null; return formater(value, decimals, scaledDecimals);
this.info.min = this.info.min != null ? formater(this.info.min, decimals, scaledDecimals) : null; };
this.info.max = this.info.max != null ? formater(this.info.max, decimals, scaledDecimals) : null; this.info.avg = this.valueFormater(this.info.avg);
this.info.total = this.info.total != null ? formater(this.info.total, decimals, scaledDecimals) : null; this.info.current = this.valueFormater(this.info.current);
this.info.min = this.valueFormater(this.info.min);
this.info.max = this.valueFormater(this.info.max);
this.info.total = this.valueFormater(this.info.total);
}; };
return TimeSeries; return TimeSeries;
......
src/app/directives/grafanaGraph.js
...@@ -6,7 +6,7 @@ define([ ...@@ -6,7 +6,7 @@ define([
'lodash', 'lodash',
'./grafanaGraph.tooltip' './grafanaGraph.tooltip'
], ],
function (angular, $, kbn, moment, _, graphTooltip) { function (angular, $, kbn, moment, _, GraphTooltip) {
'use strict'; 'use strict';
var module = angular.module('grafana.directives'); var module = angular.module('grafana.directives');
...@@ -105,6 +105,7 @@ function (angular, $, kbn, moment, _, graphTooltip) { ...@@ -105,6 +105,7 @@ function (angular, $, kbn, moment, _, graphTooltip) {
function updateLegendValues(plot) { function updateLegendValues(plot) {
var yaxis = plot.getYAxes(); var yaxis = plot.getYAxes();
console.log("value");
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
var series = data[i]; var series = data[i];
...@@ -416,7 +417,7 @@ function (angular, $, kbn, moment, _, graphTooltip) { ...@@ -416,7 +417,7 @@ function (angular, $, kbn, moment, _, graphTooltip) {
elem.html('<img src="' + url + '"></img>'); elem.html('<img src="' + url + '"></img>');
} }
graphTooltip.register(elem, dashboard, scope, $rootScope); new GraphTooltip(elem, dashboard, scope);
elem.bind("plotselected", function (event, ranges) { elem.bind("plotselected", function (event, ranges) {
scope.$apply(function() { scope.$apply(function() {
......
src/app/panels/graph/module.js
...@@ -244,7 +244,7 @@ function (angular, app, $, _, kbn, moment, TimeSeries) { ...@@ -244,7 +244,7 @@ function (angular, app, $, _, kbn, moment, TimeSeries) {
var seriesInfo = { var seriesInfo = {
alias: alias, alias: alias,
color: color, color: color,
}; };
$scope.legend.push(seriesInfo); $scope.legend.push(seriesInfo);
......
src/css/less/graph.less
...@@ -169,6 +169,8 @@ ...@@ -169,6 +169,8 @@
} }
.graph-tooltip { .graph-tooltip {
white-space: nowrap;
.graph-tooltip-time { .graph-tooltip-time {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
......
src/test/specs/graph-tooltip-specs.js
define([ define([
'jquery', 'jquery',
'directives/grafanaGraph.tooltip' 'directives/grafanaGraph.tooltip'
], function($, tooltip) { ], function($, GraphTooltip) {
'use strict'; 'use strict';
describe('graph tooltip', function() { var scope = {
var elem = $('<div></div>'); appEvent: sinon.spy(),
var dashboard = { onAppEvent: sinon.spy(),
formatDate: sinon.stub().returns('date'), };
};
var scope = { var elem = $('<div></div>');
appEvent: sinon.spy(), var dashboard = { };
onAppEvent: sinon.spy(),
panel: {
tooltip: {
shared: true
},
y_formats: ['ms', 'none'],
stack: true
}
};
var data = [ function describeSharedTooltip(desc, fn) {
{ var ctx = {};
data: [[10,10], [12,20]], ctx.scope = scope;
info: { yaxis: 1 }, ctx.scope.panel = {
yaxis: { tickDecimals: 2 }, tooltip: {
shared: true
}, },
{ stack: false
data: [[10,10], [12,20]], };
info: { yaxis: 1 },
yaxis: { tickDecimals: 2 }, ctx.setup = function(setupFn) {
} ctx.setupFn = setupFn;
];
var plot = {
getData: sinon.stub().returns(data),
highlight: sinon.stub(),
unhighlight: sinon.stub()
}; };
elem.data('plot', plot); describe(desc, function() {
beforeEach(function() {
ctx.setupFn();
var tooltip = new GraphTooltip(elem, dashboard, scope);
ctx.results = tooltip.getMultiSeriesPlotHoverInfo(ctx.data, ctx.pos);
});
fn(ctx);
});
}
describeSharedTooltip("steppedLine false, stack false", function(ctx) {
ctx.setup(function() {
ctx.data = [
{ data: [[10, 15], [12, 20]], },
{ data: [[10, 2], [12, 3]], }
];
ctx.pos = { x: 11 };
});
it('should return 2 series', function() {
expect(ctx.results.length).to.be(2);
});
it('should add time to results array', function() {
expect(ctx.results.time).to.be(10);
});
it('should set value and hoverIndex', function() {
expect(ctx.results[0].value).to.be(15);
expect(ctx.results[1].value).to.be(2);
expect(ctx.results[0].hoverIndex).to.be(0);
});
});
describeSharedTooltip("steppedLine false, stack true, individual false", function(ctx) {
ctx.setup(function() {
ctx.data = [
{ data: [[10, 15], [12, 20]], },
{ data: [[10, 2], [12, 3]], }
];
ctx.scope.panel.stack = true;
ctx.pos = { x: 11 };
});
it('should show stacked value', function() {
expect(ctx.results[1].value).to.be(17);
});
});
beforeEach(function() { describeSharedTooltip("steppedLine false, stack true, individual true", function(ctx) {
tooltip.register(elem, dashboard, scope); ctx.setup(function() {
elem.trigger('plothover', [{}, {x: 13}, {}]); ctx.data = [
{ data: [[10, 15], [12, 20]], },
{ data: [[10, 2], [12, 3]], }
];
ctx.scope.panel.stack = true;
ctx.scope.panel.tooltip.value_type = 'individual';
ctx.pos = { x: 11 };
}); });
it('should add tooltip', function() { it('should not show stacked value', function() {
var tooltipHtml = $(".graph-tooltip").text(); expect(ctx.results[1].value).to.be(2);
expect(tooltipHtml).to.be('date : 40.00 ms : 20.00 ms');
}); });
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment