Skip to content

N
nexpie-grafana-theme
Commit fdedb917 by Marcus Efraimsson Committed by GitHub
Options

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

Fix bug with background color in table cell with link
parents 5882e5bb 32c93793
Showing with 116 additions and 8 deletions
devenv/dev-dashboards/panel_tests_table.json
...@@ -404,6 +404,112 @@ ...@@ -404,6 +404,112 @@
"title": "Column style thresholds & units", "title": "Column style thresholds & units",
"transform": "timeseries_to_columns", "transform": "timeseries_to_columns",
"type": "table" "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, "refresh": false,
...@@ -449,5 +555,5 @@ ...@@ -449,5 +555,5 @@
"timezone": "browser", "timezone": "browser",
"title": "Panel Tests - Table", "title": "Panel Tests - Table",
"uid": "pttable", "uid": "pttable",
"version": 1 "version": 2
} }
\ No newline at end of file
public/app/plugins/panel/table/renderer.ts
...@@ -211,16 +211,17 @@ export class TableRenderer { ...@@ -211,16 +211,17 @@ export class TableRenderer {
value = this.formatColumnValue(columnIndex, value); value = this.formatColumnValue(columnIndex, value);
const column = this.table.columns[columnIndex]; const column = this.table.columns[columnIndex];
let style = ''; let cellStyle = '';
let textStyle = '';
const cellClasses = []; const cellClasses = [];
let cellClass = ''; let cellClass = '';
if (this.colorState.cell) { if (this.colorState.cell) {
style = ' style="background-color:' + this.colorState.cell + '"'; cellStyle = ' style="background-color:' + this.colorState.cell + '"';
cellClasses.push('table-panel-color-cell'); cellClasses.push('table-panel-color-cell');
this.colorState.cell = null; this.colorState.cell = null;
} else if (this.colorState.value) { } else if (this.colorState.value) {
style = ' style="color:' + this.colorState.value + '"'; textStyle = ' style="color:' + this.colorState.value + '"';
this.colorState.value = null; this.colorState.value = null;
} }
// because of the fixed table headers css only solution // because of the fixed table headers css only solution
...@@ -232,7 +233,7 @@ export class TableRenderer { ...@@ -232,7 +233,7 @@ export class TableRenderer {
} }
if (value === undefined) { if (value === undefined) {
style = ' style="display:none;"'; cellStyle = ' style="display:none;"';
column.hidden = true; column.hidden = true;
} else { } else {
column.hidden = false; column.hidden = false;
...@@ -258,7 +259,7 @@ export class TableRenderer { ...@@ -258,7 +259,7 @@ export class TableRenderer {
cellClasses.push('table-panel-cell-link'); cellClasses.push('table-panel-cell-link');
columnHtml += ` 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} ${value}
</a> </a>
`; `;
...@@ -283,7 +284,7 @@ export class TableRenderer { ...@@ -283,7 +284,7 @@ export class TableRenderer {
cellClass = ' class="' + cellClasses.join(' ') + '"'; cellClass = ' class="' + cellClasses.join(' ') + '"';
} }
columnHtml = '<td' + cellClass + style + '>' + columnHtml + '</td>'; columnHtml = '<td' + cellClass + cellStyle + textStyle + '>' + columnHtml + '</td>';
return columnHtml; return columnHtml;
} }
......
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