mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
feat(tablepanel): added support for column sorting
This commit is contained in:
parent
673ae1edc0
commit
d06b9401ea
@ -29,7 +29,8 @@ export class TablePanelCtrl {
|
||||
pageSize: 50,
|
||||
showHeader: true,
|
||||
columns: [],
|
||||
fields: []
|
||||
fields: [],
|
||||
sort: {col: null, desc: true},
|
||||
};
|
||||
|
||||
$scope.init = function() {
|
||||
@ -52,6 +53,21 @@ export class TablePanelCtrl {
|
||||
});
|
||||
};
|
||||
|
||||
$scope.toggleColumnSort = function(col, colIndex) {
|
||||
if ($scope.panel.sort.col === colIndex) {
|
||||
if ($scope.panel.sort.desc) {
|
||||
$scope.panel.sort.desc = false;
|
||||
} else {
|
||||
$scope.panel.sort.col = null;
|
||||
}
|
||||
} else {
|
||||
$scope.panel.sort.col = colIndex;
|
||||
$scope.panel.sort.desc = true;
|
||||
}
|
||||
|
||||
$scope.render();
|
||||
};
|
||||
|
||||
$scope.dataHandler = function(results) {
|
||||
$scope.dataRaw = results.data;
|
||||
$scope.render();
|
||||
@ -59,6 +75,7 @@ export class TablePanelCtrl {
|
||||
|
||||
$scope.render = function() {
|
||||
$scope.table = TableModel.transform($scope.dataRaw, $scope.panel);
|
||||
$scope.table.sort($scope.panel.sort);
|
||||
panelHelper.broadcastRender($scope, $scope.table, $scope.dataRaw);
|
||||
};
|
||||
|
||||
|
@ -7,8 +7,12 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th ng-repeat="col in table.columns">
|
||||
<div class="table-panel-table-header-inner">
|
||||
<div class="table-panel-table-header-inner" ng-click="toggleColumnSort(col, $index)">
|
||||
{{col.text}}
|
||||
<span class="table-panel-table-header-controls" ng-if="col.sort">
|
||||
<i class="fa fa-caret-down" ng-show="col.desc"></i>
|
||||
<i class="fa fa-caret-up" ng-hide="col.desc"></i>
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
|
51
public/app/panels/table/specs/table_model_specs.ts
Normal file
51
public/app/panels/table/specs/table_model_specs.ts
Normal file
@ -0,0 +1,51 @@
|
||||
import {describe, beforeEach, it, sinon, expect} from 'test/lib/common';
|
||||
|
||||
import {TableModel} from '../table_model';
|
||||
|
||||
describe('when sorting table desc', () => {
|
||||
var table;
|
||||
var panel = {
|
||||
sort: {col: 0, desc: true},
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
table = new TableModel();
|
||||
table.columns = [{}, {}];
|
||||
table.rows = [[100, 12], [105, 10], [103, 11]];
|
||||
table.sort(panel.sort);
|
||||
});
|
||||
|
||||
it('should sort by time', () => {
|
||||
expect(table.rows[0][0]).to.be(105);
|
||||
expect(table.rows[1][0]).to.be(103);
|
||||
expect(table.rows[2][0]).to.be(100);
|
||||
});
|
||||
|
||||
it ('should mark column being sorted', () => {
|
||||
expect(table.columns[0].sort).to.be(true);
|
||||
expect(table.columns[0].desc).to.be(true);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('when sorting table asc', () => {
|
||||
var table;
|
||||
var panel = {
|
||||
sort: {col: 1, desc: false},
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
table = new TableModel();
|
||||
table.columns = [{}, {}];
|
||||
table.rows = [[100, 11], [105, 15], [103, 10]];
|
||||
table.sort(panel.sort);
|
||||
});
|
||||
|
||||
it('should sort by time', () => {
|
||||
expect(table.rows[0][1]).to.be(10);
|
||||
expect(table.rows[1][1]).to.be(11);
|
||||
expect(table.rows[2][1]).to.be(15);
|
||||
});
|
||||
|
||||
});
|
||||
|
@ -19,7 +19,10 @@ describe('when transforming time series table', () => {
|
||||
];
|
||||
|
||||
describe('timeseries_to_rows', () => {
|
||||
var panel = {transform: 'timeseries_to_rows'};
|
||||
var panel = {
|
||||
transform: 'timeseries_to_rows',
|
||||
sort: {col: 0, desc: true},
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
table = TableModel.transform(timeSeries, panel);
|
||||
|
@ -9,6 +9,31 @@ export class TableModel {
|
||||
this.rows = [];
|
||||
}
|
||||
|
||||
sort(options) {
|
||||
if (options.col === null || this.columns.length < options.col) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.rows.sort(function(a, b) {
|
||||
a = a[options.col];
|
||||
b = b[options.col];
|
||||
if (a < b) {
|
||||
return -1;
|
||||
}
|
||||
if (a > b) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
this.columns[options.col].sort = true;
|
||||
|
||||
if (options.desc) {
|
||||
this.rows.reverse();
|
||||
this.columns[options.col].desc = true;
|
||||
}
|
||||
}
|
||||
|
||||
static transform(data, panel) {
|
||||
var model = new TableModel();
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user