Skip to content

N
nexpie-grafana-theme
Commit 0a1af65a by Torkel Ödegaard
Options

feat(tablepanel): more column style rules

parent 60c7bfe9
Showing with 111 additions and 82 deletions
public/app/panels/table/controller.ts
......@@ -37,15 +37,18 @@ export class TablePanelCtrl {
transform: 'timeseries_to_rows',
pageSize: 50,
showHeader: true,
columns: [{
pattern: '/.*/',
unit: 'short',
decimals: 2,
colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"],
}],
columns: [],
};
_.defaults($scope.panel, panelDefaults);
$scope.init = function() {
_.defaults($scope.panel, panelDefaults);
if ($scope.panel.columns.length === 0) {
$scope.addColumnStyle();
}
panelSrv.init($scope);
};
$scope.setUnitFormat = function(column, subItem) {
column.unit = subItem.value;
......@@ -73,7 +76,32 @@ export class TablePanelCtrl {
panelHelper.broadcastRender($scope, $scope.table);
};
panelSrv.init($scope);
$scope.getColumnNames = function() {
if (!$scope.table) {
return [];
}
return _.map($scope.table.columns, function(col: any) {
return col.text;
});
};
$scope.addColumnStyle = function() {
var columnStyleDefaults = {
unit: 'short',
decimals: 2,
colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"],
pattern: '/.*/',
colorMode: 'value',
};
$scope.panel.columns.push(angular.copy(columnStyleDefaults));
};
$scope.removeColumnStyle = function(col) {
$scope.panel.columns = _.without($scope.panel.columns, col);
};
$scope.init();
}
}
public/app/panels/table/module.ts
......@@ -42,10 +42,10 @@ export function tablePanelDirective() {
function createColumnFormater(style) {
return function(v) {
if (v === null) {
if (v === null || v === void 0) {
return '-';
}
if (_.isString(v)) {
if (_.isString(v) || style) {
return v;
}
let valueFormater = kbn.valueFormats[style.unit];
......@@ -79,7 +79,8 @@ export function tablePanelDirective() {
let rowElements = $(document.createDocumentFragment());
let rowEnd = Math.min(panel.pageSize, data.rows.length);
let rowStart = 0;
// reset formater cache
formaters = [];
for (var y = rowStart; y < rowEnd; y++) {
let row = data.rows[y];
......
public/app/panels/table/options.html
......@@ -41,76 +41,76 @@
<div class="editor-row" style="margin-top: 20px">
<h5>Column Styles</h5>
<div class="tight-form-container" ng-repeat="column in panel.columns">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item">
<i class="fa fa-remove pointer" ng-click="removeColumnStyle(column)"></i>
</li>
<li class="tight-form-item">
Name or regex
</li>
<li>
<input type="text" ng-model="column.pattern" bs-typeahead="getColumnNames" ng-blur="render()" data-min-length=0 data-items=100 class="input-medium tight-form-input">
</li>
<li class="tight-form-item">
Unit
</li>
<li class="dropdown"
ng-model="column.unit"
dropdown-typeahead="unitFormats"
dropdown-typeahead-on-select="setUnitFormat(column, $subItem)">
</li>
<li class="tight-form-item">
Decimals
</li>
<li style="width: 105px">
<input type="number" class="input-mini tight-form-input" ng-model="column.decimals" ng-change="render()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item">
<i class="fa fa-remove pointer invisible"></i>
</li>
<li class="tight-form-item">
Coloring
</li>
<li>
<select class="input-small tight-form-input"
ng-model="panel.transform"
<div class="tight-form-container">
<div ng-repeat="column in panel.columns">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item">
<i class="fa fa-remove pointer" ng-click="removeColumnStyle(column)"></i>
</li>
<li class="tight-form-item">
Name or regex
</li>
<li>
<input type="text" ng-model="column.pattern" bs-typeahead="getColumnNames" ng-blur="render()" data-min-length=0 data-items=100 class="input-medium tight-form-input">
</li>
<li class="tight-form-item" style="width: 86px">
Unit
</li>
<li class="dropdown" style="width: 150px"
ng-model="column.unit"
dropdown-typeahead="unitFormats"
dropdown-typeahead-on-select="setUnitFormat(column, $subItem)">
</li>
<li class="tight-form-item" style="width: 60px">
Decimals
</li>
<li style="width: 105px">
<input type="number" class="input-mini tight-form-input" ng-model="column.decimals" ng-change="render()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item">
<i class="fa fa-remove pointer invisible"></i>
</li>
<li class="tight-form-item text-right" style="width: 93px">
Coloring
</li>
<li>
<select class="input-small tight-form-input"
ng-model="column.colorMode"
ng-options="k as v.text for (k, v) in colorModes"
ng-change="render()"></select>
</li>
<li class="tight-form-item">
Thresholds<tip>Comma seperated values</tip>
</li>
<li>
<input type="text" class="input-small tight-form-input" ng-model="column.thresholds" ng-blur="render()" placeholder="0,50,80"></input>
</li>
<li class="tight-form-item">
Colors
</li>
<li class="tight-form-item">
<spectrum-picker ng-model="column.colors[0]" ng-change="render()" ></spectrum-picker>
<spectrum-picker ng-model="column.colors[1]" ng-change="render()" ></spectrum-picker>
<spectrum-picker ng-model="column.colors[2]" ng-change="render()" ></spectrum-picker>
</li>
<li class="tight-form-item last">
<a class="pointer" ng-click="invertColorOrder()">invert order</a>
</li>
</ul>
<div class="clearfix"></div>
ng-change="render()"
style="width: 150px"
></select>
</li>
<li class="tight-form-item">
Thresholds<tip>Comma seperated values</tip>
</li>
<li>
<input type="text" class="input-small tight-form-input" style="width: 150px" ng-model="column.thresholds" ng-blur="render()" placeholder="0,50,80"></input>
</li>
<li class="tight-form-item" style="width: 60px">
Colors
</li>
<li class="tight-form-item">
<spectrum-picker ng-model="column.colors[0]" ng-change="render()" ></spectrum-picker>
<spectrum-picker ng-model="column.colors[1]" ng-change="render()" ></spectrum-picker>
<spectrum-picker ng-model="column.colors[2]" ng-change="render()" ></spectrum-picker>
</li>
<li class="tight-form-item last">
<a class="pointer" ng-click="invertColorOrder()">invert order</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<button class="btn btn-inverse" style="margin-top: 20px" ng-click="addSeriesOverride()">
<button class="btn btn-inverse" style="margin-top: 20px" ng-click="addColumnStyle()">
Add column display rule
</button>
</div>
......
public/app/panels/table/specs/transformers_specs.ts
......@@ -30,7 +30,7 @@ describe('when transforming time series table', () => {
expect(table.rows[0][1]).to.be('series1');
expect(table.rows[1][1]).to.be('series1');
expect(table.rows[2][1]).to.be('series2');
expect(table.rows[0][2]).to.be('12.12');
expect(table.rows[0][2]).to.be(12.12);
});
it('should return 3 rows', () => {
......@@ -59,12 +59,12 @@ describe('when transforming time series table', () => {
it ('should return 2 rows', () => {
expect(table.rows.length).to.be(2);
expect(table.rows[0][1]).to.be('12.12');
expect(table.rows[0][2]).to.be('16.12');
expect(table.rows[0][1]).to.be(12.12);
expect(table.rows[0][2]).to.be(16.12);
});
it ('should show - when no value for timestamp', () => {
expect(table.rows[1][2]).to.be('-');
it ('should be undefined when no value for timestamp', () => {
expect(table.rows[1][2]).to.be(undefined);
});
});
});
......
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