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

Merge pull request #13892 from grisme/13606-table-cell-background-color

Browse Source 
Fix bug with background color in table cell with link
This commit is contained in:
Marcus Efraimsson 2018-11-05 11:43:47 +01:00 committed by GitHub
commit fdedb917a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 115 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
devenv/dev-dashboards/panel_tests_table.json
View File

@ -404,6 +404,112 @@
"title": "Column style thresholds & units",
"transform": "timeseries_to_columns",
"type": "table"
},
{
"columns": [],
"datasource": "gdev-testdata",
"fontSize": "100%",
"gridPos": {
"h": 10,
"w": 24,
"x": 0,
"y": 26
},
"id": 6,
"links": [],
"pageSize": 20,
"scroll": true,
"showHeader": true,
"sort": {
"col": 0,
"desc": true
},
"styles": [
{
"alias": "Time",
"dateFormat": "YYYY-MM-DD HH:mm:ss",
"pattern": "Time",
"type": "date"
},
{
"alias": "",
"colorMode": "cell",
"colors": [
"rgba(245, 54, 54, 0.5)",
"rgba(237, 129, 40, 0.5)",
"rgba(50, 172, 45, 0.5)"
],
"dateFormat": "YYYY-MM-DD HH:mm:ss",
"decimals": 2,
"link": true,
"linkTargetBlank": true,
"linkTooltip": "",
"linkUrl": "http://www.grafana.com",
"mappingType": 1,
"pattern": "ColorCell",
"thresholds": [
"5",
"10"
],
"type": "number",
"unit": "currencyUSD"
},
{
"alias": "",
"colorMode": "value",
"colors": [
"rgba(245, 54, 54, 0.5)",
"rgba(237, 129, 40, 0.5)",
"rgba(50, 172, 45, 0.5)"
],
"dateFormat": "YYYY-MM-DD HH:mm:ss",
"decimals": 2,
"link": true,
"linkUrl": "http://www.grafana.com",
"mappingType": 1,
"pattern": "ColorValue",
"thresholds": [
"5",
"10"
],
"type": "number",
"unit": "Bps"
},
{
"alias": "",
"colorMode": null,
"colors": [
"rgba(245, 54, 54, 0.9)",
"rgba(237, 129, 40, 0.89)",
"rgba(50, 172, 45, 0.97)"
],
"decimals": 2,
"pattern": "/.*/",
"thresholds": [],
"type": "number",
"unit": "short"
}
],
"targets": [
{
"alias": "ColorValue",
"expr": "",
"format": "table",
"intervalFactor": 1,
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "null,1,20,90,30,5,0,20,10"
},
{
"alias": "ColorCell",
"refId": "B",
"scenarioId": "csv_metric_values",
"stringInput": "null,5,1,2,3,4,5,10,20"
}
],
"title": "Column style thresholds and links",
"transform": "timeseries_to_columns",
"type": "table"
}
],
"refresh": false,
@ -449,5 +555,5 @@
"timezone": "browser",
"title": "Panel Tests - Table",
"uid": "pttable",
"version": 1
}
"version": 2
}

13
public/app/plugins/panel/table/renderer.ts
View File

@ -211,16 +211,17 @@ export class TableRenderer {
value = this.formatColumnValue(columnIndex, value);
const column = this.table.columns[columnIndex];
let style = '';
let cellStyle = '';
let textStyle = '';
const cellClasses = [];
let cellClass = '';
if (this.colorState.cell) {
style = ' style="background-color:' + this.colorState.cell + '"';
cellStyle = ' style="background-color:' + this.colorState.cell + '"';
cellClasses.push('table-panel-color-cell');
this.colorState.cell = null;
} else if (this.colorState.value) {
style = ' style="color:' + this.colorState.value + '"';
textStyle = ' style="color:' + this.colorState.value + '"';
this.colorState.value = null;
}
// because of the fixed table headers css only solution
@ -232,7 +233,7 @@ export class TableRenderer {
}
if (value === undefined) {
style = ' style="display:none;"';
cellStyle = ' style="display:none;"';
column.hidden = true;
} else {
column.hidden = false;
@ -258,7 +259,7 @@ export class TableRenderer {
cellClasses.push('table-panel-cell-link');
columnHtml += `
<a href="${cellLink}" target="${cellTarget}" data-link-tooltip data-original-title="${cellLinkTooltip}" data-placement="right"${style}>
<a href="${cellLink}" target="${cellTarget}" data-link-tooltip data-original-title="${cellLinkTooltip}" data-placement="right"${textStyle}>
${value}
</a>
`;
@ -283,7 +284,7 @@ export class TableRenderer {
cellClass = ' class="' + cellClasses.join(' ') + '"';
}
columnHtml = '<td' + cellClass + style + '>' + columnHtml + '</td>';
columnHtml = '<td' + cellClass + cellStyle + textStyle + '>' + columnHtml + '</td>';
return columnHtml;
}