tiles do not respect field override value mappings #47
Comments
|
Confirming that Value Mappings are broken in TreeMap. In my case, I am trying to use Regex to make the data more human readable and the settings are not being used. Identical settings in a table visualization work. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'm trying to use field overrides to make my treemap more human-friendly, and I'm getting inconsistent results.
For demo purposes I made two field overrides, with one value mapping in each. The mapping just adds a
!suffix to make it clear when the override is being respected:I also added those fields to the tooltip:
When rendering the labels for each tile, the override is not respected:
I expected to see
kube-system!andcoredns!there.However, the tooltip does show the expected value mappings:
Looking briefly at the code, I think the difference is in
<TreemapPanel>. It calls adisplay()function for the tooltip:https://github.com/grafana/grafana-treemap-panel/blob/main/src/TreemapPanel.tsx#L101
but not for the node name:
https://github.com/grafana/grafana-treemap-panel/blob/main/src/TreemapPanel.tsx#L133
Panel debug snapshot dashboard
{ "panels": [ { "id": 2, "gridPos": { "h": 13, "w": 15, "x": 0, "y": 0 }, "type": "marcusolsson-treemap-panel", "title": "Reproduced with embedded data", "datasource": { "type": "grafana", "uid": "grafana" }, "description": "overrides value mappings are not respected", "fieldConfig": { "defaults": { "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 80 } ] }, "color": { "mode": "thresholds" } }, "overrides": [ { "matcher": { "id": "byName", "options": "namespace" }, "properties": [ { "id": "mappings", "value": [ { "type": "value", "options": { "kube-system": { "text": "kube-system!", "index": 0 } } } ] } ] }, { "matcher": { "id": "byName", "options": "deployment" }, "properties": [ { "id": "mappings", "value": [ { "type": "value", "options": { "coredns": { "text": "coredns!", "index": 0 } } } ] } ] } ] }, "options": { "tiling": "treemapSquarify", "colorByField": "Value", "groupByField": "namespace", "labelFields": [ "namespace", "deployment" ], "sizeField": "Value", "textField": "deployment" }, "targets": [ { "refId": "A", "datasource": { "type": "grafana", "uid": "grafana" }, "queryType": "snapshot", "snapshot": [ { "schema": { "refId": "A", "meta": { "type": "timeseries-many", "custom": { "resultType": "matrix" }, "executedQueryString": "Expr: sum by (namespace, deployment) (kube_deployment_spec_replicas{namespace!=\"nalb-cp\"})\nStep: 1m0s", "preferredVisualisationType": "table" }, "fields": [ { "name": "Time", "type": "time", "config": {} }, { "name": "deployment", "config": { "filterable": true }, "type": "string" }, { "name": "namespace", "config": { "filterable": true }, "type": "string" }, { "name": "Value", "type": "number", "config": {} } ] }, "data": { "values": [ [ 1671032640000, 1671032700000, 1671032760000, 1671032820000, 1671032880000, 1671032940000, 1671032640000, 1671032700000, 1671032760000, 1671032820000, 1671032880000, 1671032940000, 1671032640000, 1671032700000, 1671032760000, 1671032820000, 1671032880000, 1671032940000, 1671032640000, 1671032700000, 1671032760000, 1671032820000, 1671032880000, 1671032940000, 1671032640000, 1671032700000, 1671032760000, 1671032820000, 1671032880000, 1671032940000, 1671032640000, 1671032700000, 1671032760000, 1671032820000, 1671032880000, 1671032940000, 1671032640000, 1671032700000, 1671032760000, 1671032820000, 1671032880000, 1671032940000, 1671032640000, 1671032700000, 1671032760000, 1671032820000, 1671032880000, 1671032940000, 1671032640000, 1671032700000, 1671032760000, 1671032820000, 1671032880000, 1671032940000, 1671032640000, 1671032700000, 1671032760000, 1671032820000, 1671032880000, 1671032940000, 1671032640000, 1671032700000, 1671032760000, 1671032820000, 1671032880000, 1671032940000, 1671032640000, 1671032700000, 1671032760000, 1671032820000, 1671032880000, 1671032940000, 1671032640000, 1671032700000, 1671032760000, 1671032820000, 1671032880000, 1671032940000, 1671032640000, 1671032700000, 1671032760000, 1671032820000, 1671032880000, 1671032940000, 1671032640000, 1671032700000, 1671032760000, 1671032820000, 1671032880000, 1671032940000, 1671032640000, 1671032700000, 1671032760000, 1671032820000, 1671032880000, 1671032940000, 1671032640000, 1671032700000, 1671032760000, 1671032820000, 1671032880000, 1671032940000, 1671032640000, 1671032700000, 1671032760000, 1671032820000, 1671032880000, 1671032940000 ], [ "aad-pod-identity-mic", "aad-pod-identity-mic", "aad-pod-identity-mic", "aad-pod-identity-mic", "aad-pod-identity-mic", "aad-pod-identity-mic", "cert-manager", "cert-manager", "cert-manager", "cert-manager", "cert-manager", "cert-manager", "cert-manager-cainjector", "cert-manager-cainjector", "cert-manager-cainjector", "cert-manager-cainjector", "cert-manager-cainjector", "cert-manager-cainjector", "cert-manager-webhook", "cert-manager-webhook", "cert-manager-webhook", "cert-manager-webhook", "cert-manager-webhook", "cert-manager-webhook", "coredns", "coredns", "coredns", "coredns", "coredns", "coredns", "coredns-autoscaler", "coredns-autoscaler", "coredns-autoscaler", "coredns-autoscaler", "coredns-autoscaler", "coredns-autoscaler", "grafana-agent-traces", "grafana-agent-traces", "grafana-agent-traces", "grafana-agent-traces", "grafana-agent-traces", "grafana-agent-traces", "helm-controller", "helm-controller", "helm-controller", "helm-controller", "helm-controller", "helm-controller", "image-automation-controller", "image-automation-controller", "image-automation-controller", "image-automation-controller", "image-automation-controller", "image-automation-controller", "image-reflector-controller", "image-reflector-controller", "image-reflector-controller", "image-reflector-controller", "image-reflector-controller", "image-reflector-controller", "ingress-nginx-controller", "ingress-nginx-controller", "ingress-nginx-controller", "ingress-nginx-controller", "ingress-nginx-controller", "ingress-nginx-controller", "konnectivity-agent", "konnectivity-agent", "konnectivity-agent", "konnectivity-agent", "konnectivity-agent", "konnectivity-agent", "kustomize-controller", "kustomize-controller", "kustomize-controller", "kustomize-controller", "kustomize-controller", "kustomize-controller", "metrics-server", "metrics-server", "metrics-server", "metrics-server", "metrics-server", "metrics-server", "monitoring-kube-prometheus-operator", "monitoring-kube-prometheus-operator", "monitoring-kube-prometheus-operator", "monitoring-kube-prometheus-operator", "monitoring-kube-prometheus-operator", "monitoring-kube-prometheus-operator", "monitoring-kube-prometheus-stack-kube-state-metrics", "monitoring-kube-prometheus-stack-kube-state-metrics", "monitoring-kube-prometheus-stack-kube-state-metrics", "monitoring-kube-prometheus-stack-kube-state-metrics", "monitoring-kube-prometheus-stack-kube-state-metrics", "monitoring-kube-prometheus-stack-kube-state-metrics", "notification-controller", "notification-controller", "notification-controller", "notification-controller", "notification-controller", "notification-controller", "source-controller", "source-controller", "source-controller", "source-controller", "source-controller", "source-controller" ], [ "aad-pod-identity", "aad-pod-identity", "aad-pod-identity", "aad-pod-identity", "aad-pod-identity", "aad-pod-identity", "cert-manager", "cert-manager", "cert-manager", "cert-manager", "cert-manager", "cert-manager", "cert-manager", "cert-manager", "cert-manager", "cert-manager", "cert-manager", "cert-manager", "cert-manager", "cert-manager", "cert-manager", "cert-manager", "cert-manager", "cert-manager", "kube-system", "kube-system", "kube-system", "kube-system", "kube-system", "kube-system", "kube-system", "kube-system", "kube-system", "kube-system", "kube-system", "kube-system", "monitoring", "monitoring", "monitoring", "monitoring", "monitoring", "monitoring", "flux-system", "flux-system", "flux-system", "flux-system", "flux-system", "flux-system", "flux-system", "flux-system", "flux-system", "flux-system", "flux-system", "flux-system", "flux-system", "flux-system", "flux-system", "flux-system", "flux-system", "flux-system", "ingress-nginx", "ingress-nginx", "ingress-nginx", "ingress-nginx", "ingress-nginx", "ingress-nginx", "kube-system", "kube-system", "kube-system", "kube-system", "kube-system", "kube-system", "flux-system", "flux-system", "flux-system", "flux-system", "flux-system", "flux-system", "kube-system", "kube-system", "kube-system", "kube-system", "kube-system", "kube-system", "monitoring", "monitoring", "monitoring", "monitoring", "monitoring", "monitoring", "monitoring", "monitoring", "monitoring", "monitoring", "monitoring", "monitoring", "flux-system", "flux-system", "flux-system", "flux-system", "flux-system", "flux-system", "flux-system", "flux-system", "flux-system", "flux-system", "flux-system", "flux-system" ], [ 21, 21, 21, 21, 21, 21, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 22, 22, 22, 22, 22, 22, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22, 11, 11, 11, 11, 11, 11, 22, 22, 22, 22, 22, 22, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11 ] ] } } ] } ] }, { "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 >marcusolsson-treemap-panel @ 9.3.2-45041 (07be773161)</td>\n </tr>\n <tr>\n <th>Queries</th>\n <td>A[prometheus]</td>\n </tr>\n \n <tr><th>Data</th><td> 1 frames, 4 fields, 108 rows </td></tr>\n \n <tr>\n <th>Grafana</th>\n <td>9.3.2-45041 (07be773161) // Pro</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 \"id\": 96,\n \"gridPos\": {\n \"h\": 8,\n \"w\": 24,\n \"x\": 0,\n \"y\": 47\n },\n \"type\": \"marcusolsson-treemap-panel\",\n \"title\": \"Treemap override demo\",\n \"datasource\": {\n \"uid\": \"grafanacloud-prom\",\n \"type\": \"prometheus\"\n },\n \"description\": \"overrides value mappings are not respected\",\n \"fieldConfig\": {\n \"defaults\": {\n \"mappings\": [],\n \"thresholds\": {\n \"mode\": \"absolute\",\n \"steps\": [\n {\n \"color\": \"green\",\n \"value\": null\n },\n {\n \"color\": \"red\",\n \"value\": 80\n }\n ]\n },\n \"color\": {\n \"mode\": \"thresholds\"\n }\n },\n \"overrides\": [\n {\n \"matcher\": {\n \"id\": \"byName\",\n \"options\": \"namespace\"\n },\n \"properties\": [\n {\n \"id\": \"mappings\",\n \"value\": [\n {\n \"type\": \"value\",\n \"options\": {\n \"kube-system\": {\n \"text\": \"kube-system!\",\n \"index\": 0\n }\n }\n }\n ]\n }\n ]\n },\n {\n \"matcher\": {\n \"id\": \"byName\",\n \"options\": \"deployment\"\n },\n \"properties\": [\n {\n \"id\": \"mappings\",\n \"value\": [\n {\n \"type\": \"value\",\n \"options\": {\n \"coredns\": {\n \"text\": \"coredns!\",\n \"index\": 0\n }\n }\n }\n ]\n }\n ]\n }\n ]\n },\n \"options\": {\n \"tiling\": \"treemapSquarify\",\n \"colorByField\": \"Value\",\n \"groupByField\": \"namespace\",\n \"labelFields\": [\n \"namespace\",\n \"deployment\"\n ],\n \"sizeField\": \"Value\",\n \"textField\": \"deployment\"\n },\n \"targets\": [\n {\n \"datasource\": {\n \"type\": \"prometheus\",\n \"uid\": \"grafanacloud-prom\"\n },\n \"editorMode\": \"code\",\n \"expr\": \"sum by (namespace, deployment) (kube_deployment_spec_replicas{namespace!=\\\"nalb-cp\\\"})\",\n \"format\": \"table\",\n \"legendFormat\": \"__auto\",\n \"range\": true,\n \"refId\": \"A\"\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: Treemap override demo // 2022-12-14 15:50:02", "tags": [ "debug", "debug-marcusolsson-treemap-panel" ], "time": { "from": "2022-12-14T15:45:02.104Z", "to": "2022-12-14T15:50:02.104Z" } }The text was updated successfully, but these errors were encountered: