Skip to content

N
nexpie-grafana-theme
Commit 815ef05d by Torkel Ödegaard
Options

Graph: refactoring some stuff with legend values

parent 2ab19148
Showing with 50 additions and 49 deletions
src/app/components/timeSeries.js
......@@ -7,9 +7,10 @@ function (_, kbn) {
function TimeSeries(opts) {
this.datapoints = opts.datapoints;
this.info = opts.info;
this.label = opts.info.alias;
this.id = opts.info.alias;
this.label = opts.alias;
this.id = opts.alias;
this.alias = opts.alias;
this.color = opts.color;
this.valueFormater = kbn.valueFormats.none;
this.stats = {};
}
......@@ -33,13 +34,13 @@ function (_, kbn) {
this.lines = {};
this.points = {};
this.bars = {};
this.info.yaxis = 1;
this.yaxis = 1;
this.zindex = 0;
delete this.stack;
for (var i = 0; i < overrides.length; i++) {
var override = overrides[i];
if (!matchSeriesOverride(override.alias, this.info.alias)) {
if (!matchSeriesOverride(override.alias, this.alias)) {
continue;
}
if (override.lines !== void 0) { this.lines.show = override.lines; }
......@@ -54,7 +55,7 @@ function (_, kbn) {
if (override.fillBelowTo !== void 0) { this.fillBelowTo = override.fillBelowTo; }
if (override.yaxis !== void 0) {
this.info.yaxis = override.yaxis;
this.yaxis = override.yaxis;
}
}
};
......@@ -62,9 +63,6 @@ function (_, kbn) {
TimeSeries.prototype.getFlotPairs = function (fillStyle) {
var result = [];
this.color = this.info.color;
this.yaxis = this.info.yaxis;
this.stats.total = 0;
this.stats.max = Number.MIN_VALUE;
this.stats.min = Number.MAX_VALUE;
......@@ -123,12 +121,6 @@ function (_, kbn) {
this.valueFormater = formater;
this.decimals = decimals;
this.scaledDecimals = scaledDecimals;
this.info.avg = this.formatValue(this.stats.avg);
this.info.current = this.formatValue(this.stats.current);
this.info.min = this.formatValue(this.stats.min);
this.info.max = this.formatValue(this.stats.max);
this.info.total = this.formatValue(this.stats.total);
};
TimeSeries.prototype.formatValue = function(value) {
......
src/app/directives/grafanaGraph.js
......@@ -175,7 +175,7 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
series.data = series.getFlotPairs(panel.nullPointMode, panel.y_formats);
// if hidden remove points and disable stack
if (scope.hiddenSeries[series.info.alias]) {
if (scope.hiddenSeries[series.alias]) {
series.data = [];
series.stack = false;
}
......
src/app/panels/graph/legend.js
......@@ -36,7 +36,7 @@ function (angular, app, _, kbn, $) {
function openColorSelector(e) {
var el = $(e.currentTarget);
var index = getSeriesIndexForElement(el);
var seriesInfo = data[index].info;
var seriesInfo = data[index];
var popoverScope = scope.$new();
popoverScope.series = seriesInfo;
popoverSrv.show({
......@@ -49,7 +49,7 @@ function (angular, app, _, kbn, $) {
function toggleSeries(e) {
var el = $(e.currentTarget);
var index = getSeriesIndexForElement(el);
var seriesInfo = data[index].info;
var seriesInfo = data[index];
scope.toggleSeries(seriesInfo, e);
}
......@@ -83,8 +83,8 @@ function (angular, app, _, kbn, $) {
for (i = 0; i < data.length; i++) {
var series = data[i];
var html = '<div class="graph-legend-series';
if (series.info.yaxis === 2) { html += ' pull-right'; }
if (scope.hiddenSeries[series.label]) { html += ' graph-legend-series-hidden'; }
if (series.yaxis === 2) { html += ' pull-right'; }
if (scope.hiddenSeries[series.alias]) { html += ' graph-legend-series-hidden'; }
html += '" data-series-index="' + i + '">';
html += '<div class="graph-legend-icon">';
html += '<i class="icon-minus pointer" style="color:' + series.color + '"></i>';
......@@ -94,12 +94,18 @@ function (angular, app, _, kbn, $) {
html += '<a>' + series.label + '</a>';
html += '</div>';
var avg = series.formatValue(series.stats.avg);
var current = series.formatValue(series.stats.current);
var min = series.formatValue(series.stats.min);
var max = series.formatValue(series.stats.max);
var total = series.formatValue(series.stats.total);
if (panel.legend.values) {
if (panel.legend.min) { html += '<div class="graph-legend-value min small">' + series.info.min + '</div>'; }
if (panel.legend.max) { html += '<div class="graph-legend-value max small">' + series.info.max + '</div>'; }
if (panel.legend.avg) { html += '<div class="graph-legend-value avg small">' + series.info.avg + '</div>'; }
if (panel.legend.current) { html += '<div class="graph-legend-value current small">' + series.info.current + '</div>'; }
if (panel.legend.total) { html += '<div class="graph-legend-value total small">' + series.info.total + '</div>'; }
if (panel.legend.min) { html += '<div class="graph-legend-value min small">' + min + '</div>'; }
if (panel.legend.max) { html += '<div class="graph-legend-value max small">' + max + '</div>'; }
if (panel.legend.avg) { html += '<div class="graph-legend-value avg small">' + avg + '</div>'; }
if (panel.legend.current) { html += '<div class="graph-legend-value current small">' + current + '</div>'; }
if (panel.legend.total) { html += '<div class="graph-legend-value total small">' + total + '</div>'; }
}
html += '</div>';
......
src/app/panels/graph/module.js
......@@ -112,6 +112,7 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
_.defaults($scope.panel.legend, _d.legend);
$scope.hiddenSeries = {};
$scope.seriesList = [];
$scope.updateTimeRange = function () {
$scope.range = timeSrv.timeRange();
......@@ -145,6 +146,7 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
$scope.panelMeta.loading = false;
$scope.panelMeta.error = err.message || "Timeseries data request error";
$scope.inspector.error = err;
$scope.seriesList = [];
$scope.render([]);
});
};
......@@ -162,16 +164,16 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
$scope.datapointsCount = 0;
$scope.datapointsOutside = false;
var data = _.map(results.data, $scope.seriesHandler);
$scope.seriesList = _.map(results.data, $scope.seriesHandler);
$scope.datapointsWarning = $scope.datapointsCount === 0 || $scope.datapointsOutside;
$scope.annotationsPromise
.then(function(annotations) {
data.annotations = annotations;
$scope.render(data);
$scope.seriesList.annotations = annotations;
$scope.render($scope.seriesList);
}, function() {
$scope.render(data);
$scope.render($scope.seriesList);
});
};
......@@ -182,7 +184,8 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
var series = new TimeSeries({
datapoints: datapoints,
info: {alias: alias, color: color},
alias: alias,
color: color,
});
if (datapoints && datapoints.length > 0) {
......@@ -231,7 +234,7 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
}
// check if every other series is hidden
var alreadyExclusive = _.every($scope.legend, function(value) {
var alreadyExclusive = _.every($scope.seriesList, function(value) {
if (value.alias === serie.alias) {
return true;
}
......@@ -241,13 +244,13 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
if (alreadyExclusive) {
// remove all hidden series
_.each($scope.legend, function(value) {
_.each($scope.seriesList, function(value) {
delete $scope.hiddenSeries[value.alias];
});
}
else {
// hide all but this serie
_.each($scope.legend, function(value) {
_.each($scope.seriesList, function(value) {
if (value.alias === serie.alias) {
return;
}
......
src/test/specs/grafanaGraph-specs.js
......@@ -47,11 +47,11 @@ define([
ctx.data = [];
ctx.data.push(new TimeSeries({
datapoints: [[1,1],[2,2]],
info: { alias: 'series1', enable: true }
alias: 'series1'
}));
ctx.data.push(new TimeSeries({
datapoints: [[1,1],[2,2]],
info: { alias: 'series2', enable: true }
alias: 'series2'
}));
setupFunc(scope, ctx.data);
......@@ -131,7 +131,7 @@ define([
scope.panel.bars = true;
data[0] = new TimeSeries({
datapoints: [[1,10],[2,20]],
info: { alias: 'series1', enable: true }
alias: 'series1',
});
});
......@@ -148,7 +148,7 @@ define([
{ alias: 'test', fill: 0, points: true }
];
data[1].info.alias = 'test';
data[1].alias = 'test';
});
it('should match second series and fill zero, and enable points', function() {
......@@ -164,8 +164,8 @@ define([
});
it('should move zindex 2 last', function() {
expect(ctx.plotData[0].info.alias).to.be('series2');
expect(ctx.plotData[1].info.alias).to.be('series1');
expect(ctx.plotData[0].alias).to.be('series2');
expect(ctx.plotData[1].alias).to.be('series1');
});
});
......@@ -175,7 +175,7 @@ define([
});
it('should remove datapoints and disable stack', function() {
expect(ctx.plotData[0].info.alias).to.be('series1');
expect(ctx.plotData[0].alias).to.be('series1');
expect(ctx.plotData[1].data.length).to.be(0);
expect(ctx.plotData[1].stack).to.be(false);
});
......
src/test/specs/timeSeries-specs.js
......@@ -7,7 +7,7 @@ define([
var points, series;
var yAxisFormats = ['short', 'ms'];
var testData = {
info: { alias: 'test' },
alias: 'test',
datapoints: [
[1,2],[null,3],[10,4],[8,5]
]
......@@ -36,7 +36,7 @@ define([
describe('fill & points', function() {
beforeEach(function() {
series.info.alias = 'test';
series.alias = 'test';
series.applySeriesOverrides([{ alias: 'test', fill: 0, points: true }]);
});
......@@ -48,7 +48,7 @@ define([
describe('series option overrides, bars, true & lines false', function() {
beforeEach(function() {
series.info.alias = 'test';
series.alias = 'test';
series.applySeriesOverrides([{ alias: 'test', bars: true, lines: false }]);
});
......@@ -60,7 +60,7 @@ define([
describe('series option overrides, linewidth, stack', function() {
beforeEach(function() {
series.info.alias = 'test';
series.alias = 'test';
series.applySeriesOverrides([{ alias: 'test', linewidth: 5, stack: false }]);
});
......@@ -72,7 +72,7 @@ define([
describe('series option overrides, fill below to', function() {
beforeEach(function() {
series.info.alias = 'test';
series.alias = 'test';
series.applySeriesOverrides([{ alias: 'test', fillBelowTo: 'min' }]);
});
......@@ -83,7 +83,7 @@ define([
describe('series option overrides, pointradius, steppedLine', function() {
beforeEach(function() {
series.info.alias = 'test';
series.alias = 'test';
series.applySeriesOverrides([{ alias: 'test', pointradius: 5, steppedLine: true }]);
});
......@@ -95,7 +95,7 @@ define([
describe('override match on regex', function() {
beforeEach(function() {
series.info.alias = 'test_01';
series.alias = 'test_01';
series.applySeriesOverrides([{ alias: '/.*01/', lines: false }]);
});
......@@ -106,12 +106,12 @@ define([
describe('override series y-axis, and z-index', function() {
beforeEach(function() {
series.info.alias = 'test';
series.alias = 'test';
series.applySeriesOverrides([{ alias: 'test', yaxis: 2, zindex: 2 }]);
});
it('should set yaxis', function() {
expect(series.info.yaxis).to.be(2);
expect(series.yaxis).to.be(2);
});
it('should set zindex', function() {
......
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