mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
feat(tablepanel): worked on more display options for table panel
This commit is contained in:
parent
8a61ec4b4e
commit
5c0cf9f5d7
@ -192,6 +192,8 @@ function (_, $, coreModule) {
|
||||
var option = _.findWhere($scope.options, {text: $scope.segment.value});
|
||||
if (option && option.value !== $scope.property) {
|
||||
$scope.property = option.value;
|
||||
} else if (attrs.custom !== 'false') {
|
||||
$scope.property = $scope.segment.value;
|
||||
}
|
||||
} else {
|
||||
$scope.property = $scope.segment.value;
|
||||
|
@ -30,6 +30,8 @@ export class TablePanelCtrl {
|
||||
showHeader: true,
|
||||
columns: [],
|
||||
fields: [],
|
||||
scroll: true,
|
||||
fontSize: '100%',
|
||||
sort: {col: null, desc: true},
|
||||
};
|
||||
|
||||
@ -75,18 +77,13 @@ export class TablePanelCtrl {
|
||||
|
||||
$scope.dataHandler = function(results) {
|
||||
$scope.dataRaw = results.data;
|
||||
$scope.pageIndex = 0;
|
||||
$scope.render();
|
||||
};
|
||||
|
||||
$scope.render = function() {
|
||||
$scope.table = TableModel.transform($scope.dataRaw, $scope.panel);
|
||||
$scope.table.sort($scope.panel.sort);
|
||||
|
||||
$scope.pageCount = Math.ceil($scope.table.rows.length / $scope.panel.pageSize);
|
||||
$scope.showPagination = $scope.pageCount > 1;
|
||||
$scope.showPrevPageLink = $scope.pageIndex > 0;
|
||||
$scope.showNextPageLink = $scope.pageIndex < $scope.pageCount;
|
||||
|
||||
panelHelper.broadcastRender($scope, $scope.table, $scope.dataRaw);
|
||||
};
|
||||
|
||||
|
@ -47,6 +47,15 @@
|
||||
<input type="number" class="input-small tight-form-input" placeholder="50"
|
||||
empty-to-null ng-model="panel.pageSize" ng-change="render()" ng-model-onblur>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
<editor-checkbox text="Scroll" model="panel.scroll" change="render()"></editor-checkbox>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
Font size
|
||||
</li>
|
||||
<li>
|
||||
<select class="input-small tight-form-input" ng-model="panel.fontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
@ -90,7 +99,7 @@
|
||||
Format
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" class="input-large tight-form-input" ng-model="column.dateFormat" ng-change="render()" ng-model-onblur>
|
||||
<metric-segment-model property="column.dateFormat" options="dateFormats" on-change="render()" custom="true"></metric-segment-model>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
|
@ -29,6 +29,12 @@ export function tablePanelEditor() {
|
||||
{text: 'String', value: 'string'},
|
||||
{text: 'Date', value: 'date'},
|
||||
];
|
||||
scope.fontSizes = ['80%', '90%', '100%', '110%', '120%', '130%', '150%', '160%', '180%', '200%', '220%', '250%'];
|
||||
scope.dateFormats = [
|
||||
{text: 'YYYY-MM-DD HH:mm:ss', value: 'YYYY-MM-DD HH:mm:ss'},
|
||||
{text: 'MM/DD/YY h:mm:ss a', value: 'MM/DD/YY h:mm:ss a'},
|
||||
{text: 'MMMM D, YYYY LT', value: 'MMMM D, YYYY LT'},
|
||||
];
|
||||
|
||||
scope.updateJsonFieldsMenu = function(data) {
|
||||
scope.jsonFieldsMenu = [];
|
||||
@ -103,7 +109,6 @@ export function tablePanelEditor() {
|
||||
return col.text;
|
||||
});
|
||||
};
|
||||
|
||||
}
|
||||
};
|
||||
}
|
||||
|
@ -20,7 +20,6 @@ export function tablePanel() {
|
||||
var data;
|
||||
var panel = scope.panel;
|
||||
var formaters = [];
|
||||
var pageIndex = 0;
|
||||
|
||||
function getTableHeight() {
|
||||
var panelHeight = scope.height || scope.panel.height || scope.row.height;
|
||||
@ -34,12 +33,12 @@ export function tablePanel() {
|
||||
function appendTableRows(tbodyElem) {
|
||||
var renderer = new TableRenderer(panel, data, scope.dashboard.timezone);
|
||||
tbodyElem.empty();
|
||||
tbodyElem.html(renderer.render(pageIndex));
|
||||
tbodyElem.html(renderer.render(scope.pageIndex));
|
||||
}
|
||||
|
||||
function switchPage(e) {
|
||||
var el = $(e.currentTarget);
|
||||
pageIndex = (parseInt(el.text(), 10)-1);
|
||||
scope.pageIndex = (parseInt(el.text(), 10)-1);
|
||||
renderPanel();
|
||||
}
|
||||
|
||||
@ -51,7 +50,7 @@ export function tablePanel() {
|
||||
return;
|
||||
}
|
||||
|
||||
var startPage = Math.max(pageIndex - 3, 0);
|
||||
var startPage = Math.max(scope.pageIndex - 3, 0);
|
||||
var endPage = Math.min(pageCount, startPage + 9);
|
||||
|
||||
var paginationList = $('<ul></ul>');
|
||||
@ -60,7 +59,7 @@ export function tablePanel() {
|
||||
paginationList.append(prevLink);
|
||||
|
||||
for (var i = startPage; i < endPage; i++) {
|
||||
var activeClass = i === pageIndex ? 'active' : '';
|
||||
var activeClass = i === scope.pageIndex ? 'active' : '';
|
||||
var pageLinkElem = $('<li><a class="table-panel-page-link pointer ' + activeClass + '">' + (i+1) + '</a></li>');
|
||||
paginationList.append(pageLinkElem);
|
||||
}
|
||||
@ -72,13 +71,18 @@ export function tablePanel() {
|
||||
}
|
||||
|
||||
function renderPanel() {
|
||||
var container = elem.find('.table-panel-container');
|
||||
var rootElem = elem.find('.table-panel-scroll');
|
||||
var tbodyElem = elem.find('tbody');
|
||||
var footerElem = elem.find('.table-panel-footer');
|
||||
|
||||
appendTableRows(tbodyElem);
|
||||
|
||||
rootElem.css({'max-height': getTableHeight()});
|
||||
rootElem.css({
|
||||
'max-height': panel.scroll ? getTableHeight() : ''
|
||||
});
|
||||
|
||||
container.css({'font-size': panel.fontSize});
|
||||
appendPaginationControls(footerElem);
|
||||
}
|
||||
|
||||
@ -95,7 +99,6 @@ export function tablePanel() {
|
||||
return;
|
||||
}
|
||||
|
||||
pageIndex = 0;
|
||||
renderPanel();
|
||||
});
|
||||
}
|
||||
|
@ -12,7 +12,7 @@
|
||||
}
|
||||
|
||||
.table-panel-container {
|
||||
padding-top: 32px;
|
||||
padding-top: 2em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 6px 0 6px 15px;
|
||||
padding: 0.45em 0 0.45em 1.1em;
|
||||
border-bottom: 2px solid @bodyBackground;
|
||||
border-right: 2px solid @bodyBackground;
|
||||
|
||||
@ -79,7 +79,7 @@
|
||||
background: @grafanaListAccent;
|
||||
border-top: 2px solid @bodyBackground;
|
||||
border-bottom: 2px solid @bodyBackground;
|
||||
height: 32px;
|
||||
height: 2.0em;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@ -87,12 +87,10 @@
|
||||
}
|
||||
|
||||
.table-panel-table-header-inner {
|
||||
padding: 6px 0 6px 15px;
|
||||
padding: 0.45em 0 0.45em 1.1em;
|
||||
text-align: left;
|
||||
color: @blue;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
line-height: 23px;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user