Table: Color text, color background, and apply to row can co-mingle (#109939)

* Table: Color text, color background, and apply to row can co-mingle

* fix test

* lean on existing memoization and utils more

* just make that method a prop of TableCellRenderer

* add prop to tooltip stuff as well

* fix another test

* update TableNG with apply to row mixed color cell table

* simplify color overrides table

* special case: apply to row transparent bg

* add unit test

* delete erroneous import

* update for readability
This commit is contained in:
Paul Marbach
2025-08-25 19:47:11 +00:00
committed by GitHub
parent 4d2decfa0c
commit 67502a5a7c
10 changed files with 444 additions and 94 deletions
@@ -434,9 +434,6 @@
"id": 1,
"options": {
"cellHeight": "sm",
"frozenColumns": {
"left": 1
},
"footer": {
"countRows": false,
"enablePagination": false,
@@ -445,6 +442,9 @@
"show": true
},
"frameIndex": 0,
"frozenColumns": {
"left": 1
},
"showHeader": true,
"sortBy": [
{
@@ -797,6 +797,10 @@
"value": {
"type": "data-links"
}
},
{
"id": "custom.width",
"value": 140
}
]
}
@@ -804,7 +808,7 @@
},
"gridPos": {
"h": 7,
"w": 24,
"w": 12,
"x": 0,
"y": 12
},
@@ -834,6 +838,166 @@
"title": "Colors and Links",
"type": "table"
},
{
"datasource": {
"type": "grafana-testdata-datasource"
},
"fieldConfig": {
"defaults": {
"color": {
"fixedColor": "transparent",
"mode": "fixed"
},
"custom": {
"align": "auto",
"cellOptions": {
"type": "auto"
},
"inspect": false,
"width": 100,
"wrapHeaderText": false
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": 0
}
]
}
},
"overrides": [
{
"matcher": {
"id": "byName",
"options": "highlight"
},
"properties": [
{
"id": "custom.cellOptions",
"value": {
"applyToRow": true,
"mode": "basic",
"type": "color-background"
}
},
{
"id": "mappings",
"value": [
{
"options": {
"1": {
"color": "#fff899",
"index": 0
}
},
"type": "value"
}
]
}
]
},
{
"matcher": {
"id": "byRegexp",
"options": "/^color-*/"
},
"properties": [
{
"id": "mappings",
"value": [
{
"options": {
"1": {
"color": "green",
"index": 0
}
},
"type": "value"
}
]
}
]
},
{
"matcher": {
"id": "byName",
"options": "color-bg"
},
"properties": [
{
"id": "custom.cellOptions",
"value": {
"type": "color-background"
}
}
]
},
{
"matcher": {
"id": "byName",
"options": "color-text"
},
"properties": [
{
"id": "custom.cellOptions",
"value": {
"type": "color-text"
}
},
{
"id": "color",
"value": {
"fixedColor": "text",
"mode": "fixed"
}
}
]
},
{
"matcher": {
"id": "byName",
"options": "use-case"
},
"properties": [
{
"id": "custom.width"
}
]
}
]
},
"gridPos": {
"h": 7,
"w": 12,
"x": 12,
"y": 12
},
"id": 10,
"options": {
"cellHeight": "sm",
"footer": {
"countRows": false,
"fields": "",
"reducer": ["sum"],
"show": false
},
"showHeader": true,
"sortBy": []
},
"pluginVersion": "12.2.0-pre",
"targets": [
{
"csvContent": "use-case,normal,color-text,color-bg,highlight\n\"color bg and apply to row\",1,0,1,1\n\"color text and apply to row\",1,1,0,1\n\"color text + color bg + apply to row\",1,1,1,1\n\"only apply to row\",1,0,0,1\n\"only color bg\",1,0,1,0\n\"only color text\",1,1,0,0\n\"color text + color bg\",1,1,1,0\n\"no colorization\",1,0,0,0",
"refId": "A",
"scenarioId": "csv_content"
}
],
"title": "Apply to Row - mixed color cell types",
"type": "table"
},
{
"datasource": {
"type": "grafana-testdata-datasource"
@@ -1697,5 +1861,5 @@
"timezone": "",
"title": "Panel Tests - Table - Kitchen Sink",
"uid": "dcb9f5e9-8066-4397-889e-864b99555dbb",
"version": 9
"version": 32
}