StateTimeline: Fill opacity overrides are applied to incorrect series #87931
Labels
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
{{ message }}
What happened?
In the image I'm trying to override fill opacity of series. Selecting a series via the 'Fields with Name' selector and applying opacity override applied the override to a series not selected (offset by one).
Other overrides appear to apply to the correct series, but I did not test all possible overrides
What did you expect to happen?
In screenshot, top series should have 0% opacity, second series should have 50% opacity.
Did this work before?
Not sure, we recently upgraded to 10.4, but I don't remember trying this in the past.
How do we reproduce it?
Full panel pasted below. I reproduced this with multiple data-sources (BigQuery and Grafana random walk).
Is the bug inside a dashboard panel?
Panel debug snapshot dashboard
{ "panels": [ { "datasource": { "type": "grafana", "uid": "grafana" }, "type": "state-timeline", "title": "Reproduced with embedded data", "gridPos": { "h": 13, "w": 15, "x": 0, "y": 0 }, "id": 2, "targets": [ { "refId": "A", "datasource": { "type": "grafana", "uid": "grafana" }, "queryType": "snapshot", "snapshot": [ { "schema": { "refId": "A", "meta": { "typeVersion": [ 0, 0 ], "custom": { "customStat": 10 } }, "fields": [ { "name": "time", "type": "time", "typeInfo": { "frame": "time.Time", "nullable": true }, "config": { "interval": 100 } }, { "name": "A-series", "type": "number", "typeInfo": { "frame": "float64", "nullable": true }, "labels": {}, "config": {} } ] }, "data": { "values": [ [ ], [ ] ] } }, { "schema": { "refId": "B", "meta": { "typeVersion": [ 0, 0 ], "custom": { "customStat": 10 } }, "fields": [ { "name": "time", "type": "time", "typeInfo": { "frame": "time.Time", "nullable": true }, "config": { "interval": 100 } }, { "name": "B-series", "type": "number", "typeInfo": { "frame": "float64", "nullable": true }, "labels": {}, "config": {} } ] }, "data": { "values": [ [ ], [ ] ] } }, { "schema": { "refId": "C", "meta": { "typeVersion": [ 0, 0 ], "custom": { "customStat": 10 } }, "fields": [ { "name": "time", "type": "time", "typeInfo": { "frame": "time.Time", "nullable": true }, "config": { "interval": 100 } }, { "name": "C-series", "type": "number", "typeInfo": { "frame": "float64", "nullable": true }, "labels": {}, "config": {} } ] }, "data": { "values": [ [ ], [ ] ] } } ] } ], "options": { "mergeValues": true, "showValue": "auto", "alignValue": "left", "rowHeight": 0.85, "legend": { "showLegend": false, "displayMode": "list", "placement": "bottom" }, "tooltip": { "mode": "single", "sort": "none" } }, "fieldConfig": { "defaults": { "custom": { "lineWidth": 0, "fillOpacity": 100, "spanNulls": false, "insertNulls": false, "hideFrom": { "tooltip": false, "viz": false, "legend": false } }, "color": { "mode": "thresholds" }, "mappings": [], "thresholds": { "mode": "percentage", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 50 }, { "value": 80, "color": "#EAB839" } ] }, "fieldMinMax": false }, "overrides": [ { "matcher": { "id": "byName", "options": "A-series" }, "properties": [ { "id": "custom.fillOpacity", "value": 0 }, { "id": "color", "value": { "mode": "fixed", "fixedColor": "red" } } ] }, { "matcher": { "id": "byName", "options": "B-series" }, "properties": [ { "id": "custom.lineWidth", "value": 7 }, { "id": "custom.fillOpacity", "value": 55 } ] } ] } }, { "gridPos": { "h": 7, "w": 9, "x": 15, "y": 0 }, "id": 5, "options": { "content": "<table width=\"100%\">\n <tr>\n <th width=\"2%\">Panel</th>\n <td >state-timeline @ 10.4.2 (701c851be7a930e04fbc6ebb1cd4254da80edd4c)</td>\n </tr>\n <tr>\n <th>Queries</th>\n <td>A[datasource], B[datasource], C[datasource]</td>\n </tr>\n \n <tr><th>Data</th><td> 3 frames, 6 fields, 2157 rows </td></tr>\n \n <tr>\n <th>Grafana</th>\n <td>10.4.2 (701c851be7a930e04fbc6ebb1cd4254da80edd4c) // Open Source</td>\n </tr>\n </table>", "mode": "html" }, "title": "Debug info", "type": "text" }, { "id": 6, "title": "Original Panel JSON", "type": "text", "gridPos": { "h": 13, "w": 9, "x": 15, "y": 7 }, "options": { "content": "{\n \"datasource\": {\n \"uid\": \"grafana\",\n \"type\": \"datasource\"\n },\n \"type\": \"state-timeline\",\n \"title\": \"Panel Title\",\n \"gridPos\": {\n \"x\": 0,\n \"y\": 0,\n \"w\": 12,\n \"h\": 8\n },\n \"id\": 672,\n \"targets\": [\n {\n \"queryType\": \"randomWalk\",\n \"datasource\": {\n \"type\": \"datasource\",\n \"uid\": \"grafana\"\n },\n \"refId\": \"A\"\n },\n {\n \"queryType\": \"randomWalk\",\n \"datasource\": {\n \"type\": \"datasource\",\n \"uid\": \"grafana\"\n },\n \"refId\": \"B\",\n \"hide\": false\n },\n {\n \"queryType\": \"randomWalk\",\n \"datasource\": {\n \"type\": \"datasource\",\n \"uid\": \"grafana\"\n },\n \"refId\": \"C\",\n \"hide\": false\n }\n ],\n \"options\": {\n \"mergeValues\": true,\n \"showValue\": \"auto\",\n \"alignValue\": \"left\",\n \"rowHeight\": 0.85,\n \"legend\": {\n \"showLegend\": false,\n \"displayMode\": \"list\",\n \"placement\": \"bottom\"\n },\n \"tooltip\": {\n \"mode\": \"single\",\n \"sort\": \"none\"\n }\n },\n \"fieldConfig\": {\n \"defaults\": {\n \"custom\": {\n \"lineWidth\": 0,\n \"fillOpacity\": 100,\n \"spanNulls\": false,\n \"insertNulls\": false,\n \"hideFrom\": {\n \"tooltip\": false,\n \"viz\": false,\n \"legend\": false\n }\n },\n \"color\": {\n \"mode\": \"thresholds\"\n },\n \"mappings\": [],\n \"thresholds\": {\n \"mode\": \"percentage\",\n \"steps\": [\n {\n \"color\": \"green\",\n \"value\": null\n },\n {\n \"color\": \"red\",\n \"value\": 50\n },\n {\n \"value\": 80,\n \"color\": \"#EAB839\"\n }\n ]\n },\n \"fieldMinMax\": false\n },\n \"overrides\": [\n {\n \"matcher\": {\n \"id\": \"byName\",\n \"options\": \"A-series\"\n },\n \"properties\": [\n {\n \"id\": \"custom.fillOpacity\",\n \"value\": 0\n },\n {\n \"id\": \"color\",\n \"value\": {\n \"mode\": \"fixed\",\n \"fixedColor\": \"red\"\n }\n }\n ]\n },\n {\n \"matcher\": {\n \"id\": \"byName\",\n \"options\": \"B-series\"\n },\n \"properties\": [\n {\n \"id\": \"custom.lineWidth\",\n \"value\": 7\n },\n {\n \"id\": \"custom.fillOpacity\",\n \"value\": 55\n }\n ]\n }\n ]\n }\n}", "mode": "code", "code": { "language": "json", "showLineNumbers": true, "showMiniMap": true } } }, { "id": 3, "title": "Data from panel above", "type": "table", "datasource": { "type": "datasource", "uid": "-- Dashboard --" }, "gridPos": { "h": 7, "w": 15, "x": 0, "y": 13 }, "options": { "showTypeIcons": true }, "targets": [ { "datasource": { "type": "datasource", "uid": "-- Dashboard --" }, "panelId": 2, "withTransforms": true, "refId": "A" } ] } ], "schemaVersion": 37, "title": "Debug: Panel Title // 2024-05-15 11:48:40", "tags": [ "debug", "debug-state-timeline" ], "time": { "from": "2024-05-08T17:08:45.200Z", "to": "2024-05-08T17:09:57.019Z" } }Environment (with versions)?
Grafana: 10.4.2
OS: Ubuntu 22.04
Browser:
Grafana platform?
None
Datasource(s)?
No response
The text was updated successfully, but these errors were encountered: