IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Graph: legend sorting while in table mode implemented, panel persisted property, Closes #1030

Browse Source
This commit is contained in:
Torkel Ödegaard 2014-11-12 10:11:01 +01:00
parent 882a477c0f
commit 0b966b7a28
2 changed files with 46 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/directives/grafanaGraph.js
View File

@ -106,7 +106,7 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
var series = data[i]; var series = data[i];
var axis = yaxis[series.yaxis - 1]; var axis = yaxis[series.yaxis - 1];
var formater = kbn.valueFormats[scope.panel.y_formats[series.yaxis - 1]]; var formater = kbn.valueFormats[scope.panel.y_formats[series.yaxis - 1]];
series.updateLegendValues(formater, axis.tickDecimals, axis.scaledDecimals+ 2); series.updateLegendValues(formater, axis.tickDecimals, axis.scaledDecimals + 2);
if(!scope.$$phase) { scope.$digest(); } if(!scope.$$phase) { scope.$digest(); }
} }
} }

56
src/app/panels/graph/legend.js
View File

@ -20,6 +20,7 @@ function (angular, app, _, kbn, $) {
var firstRender = true; var firstRender = true;
var panel = scope.panel; var panel = scope.panel;
var data; var data;
var seriesList;
var i; var i;
scope.$on('render', function() { scope.$on('render', function() {
@ -36,7 +37,7 @@ function (angular, app, _, kbn, $) {
function openColorSelector(e) { function openColorSelector(e) {
var el = $(e.currentTarget); var el = $(e.currentTarget);
var index = getSeriesIndexForElement(el); var index = getSeriesIndexForElement(el);
var seriesInfo = data[index]; var seriesInfo = seriesList[index];
var popoverScope = scope.$new(); var popoverScope = scope.$new();
popoverScope.series = seriesInfo; popoverScope.series = seriesInfo;
popoverSrv.show({ popoverSrv.show({
@ -49,12 +50,35 @@ function (angular, app, _, kbn, $) {
function toggleSeries(e) { function toggleSeries(e) {
var el = $(e.currentTarget); var el = $(e.currentTarget);
var index = getSeriesIndexForElement(el); var index = getSeriesIndexForElement(el);
var seriesInfo = data[index]; var seriesInfo = seriesList[index];
scope.toggleSeries(seriesInfo, e); scope.toggleSeries(seriesInfo, e);
} }
function sortLegend(e) { function sortLegend(e) {
var el = $(e.currentTarget);
if (panel.legend.sortDesc === false) {
panel.legend.sort = null;
panel.legend.sortDesc = null;
render();
return;
}
panel.legend.sortDesc = !panel.legend.sortDesc;
panel.legend.sort = el.data('stat');
render();
}
function getTableHeaderHtml(statName) {
if (!panel.legend[statName]) { return ""; }
var html = '<th class="pointer" data-stat="' + statName + '">' + statName;
if (panel.legend.sort === statName) {
var cssClass = panel.legend.sortDesc ? 'icon-caret-down' : 'icon-caret-up' ;
html += ' <span class="' + cssClass + '"></span>';
}
return html + '</th>';
} }
function render() { function render() {
@ -66,27 +90,37 @@ function (angular, app, _, kbn, $) {
firstRender = false; firstRender = false;
} }
seriesList = data;
$container.empty(); $container.empty();
$container.toggleClass('graph-legend-table', panel.legend.alignAsTable === true); $container.toggleClass('graph-legend-table', panel.legend.alignAsTable === true);
if (panel.legend.alignAsTable) { if (panel.legend.alignAsTable) {
var header = '<tr>'; var header = '<tr>';
header += '<th></th>'; header += '<th colspan="2" style="text-align:left"></th>';
header += '<th></th>';
if (panel.legend.values) { if (panel.legend.values) {
if (panel.legend.min) { header += '<th>min</div>'; } header += getTableHeaderHtml('min');
if (panel.legend.max) { header += '<th>max</div>'; } header += getTableHeaderHtml('max');
if (panel.legend.avg) { header += '<th>avg</div>'; } header += getTableHeaderHtml('avg');
if (panel.legend.current) { header += '<th>current</div>'; } header += getTableHeaderHtml('current');
if (panel.legend.total) { header += '<th>total</div>'; } header += getTableHeaderHtml('total');
} }
header += '</tr>'; header += '</tr>';
$container.append($(header)); $container.append($(header));
} }
for (i = 0; i < data.length; i++) { if (panel.legend.sort) {
var series = data[i]; seriesList = _.sortBy(seriesList, function(series) {
return series.stats[panel.legend.sort];
});
if (panel.legend.sortDesc) {
seriesList = seriesList.reverse();
}
}
for (i = 0; i < seriesList.length; i++) {
var series = seriesList[i];
var html = '<div class="graph-legend-series'; var html = '<div class="graph-legend-series';
if (series.yaxis === 2) { html += ' pull-right'; } if (series.yaxis === 2) { html += ' pull-right'; }
if (scope.hiddenSeries[series.alias]) { html += ' graph-legend-series-hidden'; } if (scope.hiddenSeries[series.alias]) { html += ' graph-legend-series-hidden'; }