grafana / grafana-treemap-panel Goto Github PK
View Code? Open in Web Editor NEWA panel plugin for Grafana to visualize treemaps.
License: Apache License 2.0
A panel plugin for Grafana to visualize treemaps.
License: Apache License 2.0
I have a treemap chart which is divided into three sub-groups ("Group by"). The sizes of the squares refer to percent values, so they add up to 100 in each of the sub-treemaps.
Since the size of all sub-treemaps is identical, they are positioned arbitrarily within the whole treemap chart. As a result, they often swap positions after reloading the dashboard, which is confusing for the user.
I tried to establish a fixed order of the sub-charts by ordering the underlying data. The following order by
clause in the SQL query allows ordering categorical data in a determined way:
ORDER BY (
CASE WHEN category ='system1' THEN 1
WHEN category ='system5' THEN 2
WHEN category ='system2' THEN 3
ELSE 4
END
)
This, indeed, orders the data table as expected, but the sub-treemaps are still randomly distributed.
I would love to have the possibility to define the position of the sub-treemaps in the whole treemap. I think this would also be beneficial in case the sub-treemaps have different sizes to get an individual design of the whole treemap.
Reproduction Steps:
Would it be possible to set value mappings to be displayed in the panel ?
This will avoid many queries updates / data modification.
Anyway having this type of panel is amazing !
Thanks
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!
and coredns!
there.
However, the tooltip does show the expected value mappings:
Looking briefly at the code, I think the difference is in <TreemapPanel>
. It calls a display()
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
Key | Value |
---|---|
Panel | marcusolsson-treemap-panel @ 9.3.2-45041 (07be773161) |
Grafana | 9.3.2-45041 (07be773161) // Pro |
{
"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"
}
}
Hello, I've imported little amout of stats from elasticsearch into grafana and chose this plugin to draw a treemap panel.
Grafana version: 7.0.6
Treemap plugin version: 0.2.0
Display: Squarify
Dimensions:
Just like the visualization of the treemap lib in echarts.
Is there anything wrong with my settings or it's just an uncompleted function of treemap plugin?
My stats in elasticsearch:
{
"_index" : "game-resource-pirates-1",
"_type" : "_doc",
"_id" : "1",
"_version" : 8,
"_seq_no" : 17,
"_primary_term" : 3,
"found" : true,
"_source" : {
"asset" : "Engine/Content/xxx/1.uasset",
"offset" : 0,
"size" : 413,
"sha1" : "154E806131D7C77245C00088593979C510407E7C",
"@timestamp" : "2020-08-12T10:06:56Z"
}
}
{
"_index" : "game-resource-pirates-1",
"_type" : "_doc",
"_id" : "2",
"_version" : 4,
"_seq_no" : 18,
"_primary_term" : 3,
"found" : true,
"_source" : {
"asset" : "Engine/Content/yyy/2.uasset",
"offset" : 486,
"size" : 435,
"sha1" : "DB784BF38D47A6EFDA1E131064D45065584EA8A5",
"@timestamp" : "2020-08-12T10:06:59Z"
}
}
{
"_index" : "game-resource-pirates-1",
"_type" : "_doc",
"_id" : "3",
"_version" : 4,
"_seq_no" : 19,
"_primary_term" : 3,
"found" : true,
"_source" : {
"asset" : "Engine/Content/zzz/3.uasset",
"offset" : 994,
"size" : 443,
"sha1" : "F4BD3E99142AF63A07A871562070F09130B93CC3",
"@timestamp" : "2020-08-12T10:07:04Z"
}
}
{
"_index" : "game-resource-pirates-1",
"_type" : "_doc",
"_id" : "5",
"_version" : 3,
"_seq_no" : 20,
"_primary_term" : 3,
"found" : true,
"_source" : {
"@timestamp" : "2020-08-12T10:07:08Z",
"asset" : "Engine/Content/xyz/5.uasset",
"offset" : 71302,
"size" : 1048,
"sha1" : "253084F0D6206E5DCE7540E06A156BB740187A13"
}
}
{
"_index" : "game-resource-pirates-1",
"_type" : "_doc",
"_id" : "6",
"_version" : 2,
"_seq_no" : 21,
"_primary_term" : 3,
"found" : true,
"_source" : {
"@timestamp" : "2020-08-12T10:07:08Z",
"asset" : "Engine/",
"offset" : 87054,
"size" : 2339,
"sha1" : "BEC945B4758C4D2E57CDBEF6FF12D205A4014A1E"
}
}
Thanks for this amazing plugin !
The first level cell's tooltip just display the label and the second level cell's tooltip display label: value by default as linked on the capture.
I couldn't find a way to add the total beside renaming the value with the correct syntax which isn't preferable, thanks by advance I hope you had a nice holyday!
Small values completely disappear on the treemap. It would be great if there was an option to keep everything visible, ie enforce a minimum size for each tile.
Hello, I used your plugin to create a treemap, but only the authenticated users are able to visualize it.
I'd like to build a dashboard available to guest (e.g. not authenticated) users.
Not authenticated users get a "Error loading: marcusolsson-treemap-panel" in the panel, while other plugins show correctly their data.
I'm using Grafana 7.4.3 on Ubuntu 20.04.
Thanks.
The panel has data-links defined:
And these work fine when the panel type is "Table":
But not when the panel-type is Treemap:
As far as I can tell, the "Data links" text in that popover is just hard-coded text, and a placeholder for this feature to be implemented.
I gathered the below bug-report data using the New panel help option
Key | Value |
---|---|
Panel | marcusolsson-treemap-panel @ 9.4.0-42921pre |
Grafana | 9.4.0-42921pre (d5274dfdda) // Enterprise |
{
"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"
},
"pluginVersion": "9.4.0-42921pre",
"description": "Shows the labels attached to metric ${metric}. You see both the label name and then the number of values for each label name. Label names are sorted by the number of values they have in descending order.",
"fieldConfig": {
"defaults": {
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
},
"color": {
"mode": "fixed"
}
},
"overrides": [
{
"matcher": {
"id": "byName",
"options": "Label"
},
"properties": [
{
"id": "links",
"value": [
{
"title": "View detailed cardinality dashboard for label: ${__data.fields.Label}",
"url": "d/cardinality-management-label-detail/?var-label=${__data.fields.Label}&${datasource:queryparam}&${filter:queryparam}"
}
]
}
]
}
]
},
"targets": [
{
"refId": "A",
"datasource": {
"type": "grafana",
"uid": "grafana"
},
"queryType": "snapshot",
"snapshot": [
{
"schema": {
"refId": "A",
"fields": [
{
"name": "frvue",
"type": "string",
"config": {
"displayName": "Label"
}
},
{
"name": "cjjhr",
"type": "number",
"config": {
"displayName": "Number of values"
}
},
{
"name": "qhjktsvc",
"type": "other",
"config": {
"displayName": "Example label values"
}
}
]
},
"data": {
"values": [
[
"ijlac",
"gf",
"zfgpms_aklwsnv",
"ahucyfqh",
"dyj",
"__sjir__"
],
[
22,
12,
7,
7,
7,
1
],
[
[
"Amsterdam",
"Atlanta",
"Dallas"
],
[
"+Inf",
"0.005",
"0.01"
],
[
"1646328570523959552",
"1646328570551495168",
"1646328570558905600"
],
[
"giraffe-reader.com",
"grafana.com",
"https://giraffe-reader.com"
],
[
"Giraffe Reader http",
"Giraffe Reader ping",
"Giraffe Reader staging site http"
],
[
"probe_all_duration_seconds_bucket"
]
]
]
}
}
]
}
],
"options": {
"tiling": "treemapSquarify"
}
},
{
"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.4.0-42921pre</td>\n </tr>\n <tr>\n <th>Queries</th>\n <td>A[undefined]</td>\n </tr>\n \n <tr><th>Data</th><td> 1 frames, 3 fields, 6 rows </td></tr>\n \n <tr>\n <th>Grafana</th>\n <td>9.4.0-42921pre (d5274dfdda) // Enterprise</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\": 21,\n \"gridPos\": {\n \"h\": 9,\n \"w\": 24,\n \"x\": 0,\n \"y\": 12\n },\n \"type\": \"marcusolsson-treemap-panel\",\n \"title\": \"Labels attached to metric ${metric}\",\n \"datasource\": {\n \"uid\": \"${cardinality}\"\n },\n \"pluginVersion\": \"9.4.0-42921pre\",\n \"description\": \"Shows the labels attached to metric ${metric}. You see both the label name and then the number of values for each label name. Label names are sorted by the number of values they have in descending order.\",\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\": \"fixed\"\n }\n },\n \"overrides\": [\n {\n \"matcher\": {\n \"id\": \"byName\",\n \"options\": \"Label\"\n },\n \"properties\": [\n {\n \"id\": \"links\",\n \"value\": [\n {\n \"title\": \"View detailed cardinality dashboard for label: ${__data.fields.Label}\",\n \"url\": \"d/cardinality-management-label-detail/?var-label=${__data.fields.Label}&${datasource:queryparam}&${filter:queryparam}\"\n }\n ]\n }\n ]\n }\n ]\n },\n \"targets\": [\n {\n \"cardinalityType\": \"metrics\",\n \"exampleCount\": \"3\",\n \"parameterList\": [\n \"${metric}\"\n ],\n \"refId\": \"A\",\n \"resultType\": \"details\",\n \"targetDatasource\": \"${datasource}\",\n \"datasource\": {\n \"uid\": \"${cardinality}\"\n },\n \"selector\": \"\"\n }\n ],\n \"options\": {\n \"tiling\": \"treemapSquarify\"\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: Labels attached to metric ${metric} // 2022-11-30 14:58:51",
"tags": [
"debug",
"debug-marcusolsson-treemap-panel"
],
"time": {
"from": "2022-11-29T14:58:51.110Z",
"to": "2022-11-30T14:58:51.110Z"
}
}
{ "test.first" : { "mappings" : { "properties" : { "age" : { "type" : "long" }, "birth" : { "type" : "date" }, "married" : { "type" : "boolean" }, "uid" : { "type" : "text", "fields" : { "keyword" : { "type" : "keyword", "ignore_above" : 256 } } }, "username" : { "type" : "text", "fields" : { "keyword" : { "type" : "keyword", "ignore_above" : 256 } } } } } } }
It seems the only color assignment available is white->green. This doesn't look great, especially when combined with white text.
Setting the color to use the text field doesn't work (it claims the text is "ambiguous").
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.