-
You've done a good job understanding the Vega docs and Kibana examples and I think your spec is close.
-
You seem to be using some features that are not available in Vega-Lite v2- the most recent version is v5, which was released in Kibana 7.13. You should test out the online Vega editor to validate your spec is using the right version.
-
Since you have provided both sample data & a spec, it was possible to reproduce your case. If you had not provided sample data I would not have been able to do this.
Based on your spec, I added a tooltip: true
to your rectangle mark, and second layer with a mark: text, dy: -20
to offset the percent label. I'm not really sure what you meant about the sorting, but FYI you can sort at the axis level. So I added sorting to your X and Y just in case.
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"title": "Pipeline health",
"width": 200,
"height": 200,
"data": {
"values": [
{
"key": "Pipeline_id",
"doc_count": 21678,
"grief_count": {"doc_count": 15820, "dev_grief": {"value": 15820}},
"total_exec": {"value": 21448},
"grief_percentage": {"value": 73.234}
},
{
"key": "Pipeline_id_2",
"doc_count": 123443,
"grief_count": {"doc_count": 12433, "dev_grief": {"value": 12433}},
"total_exec": {"value": 2141},
"grief_percentage": {"value": 60.234}
}
],
"format": {"type": "json"}
},
"encoding": {
"x": {
"field": "doc_count",
"type": "ordinal",
"title": "Total Executions",
"sort": { "op": "sum", "field": "grief_percentage.value", "order": "descending" }
},
"y": {
"field": "key",
"type": "ordinal",
"title": "PipelineId",
"sort": { "op": "sum", "field": "grief_percentage.value", "order": "descending" }
},
"color": {
"field": "grief_count.doc_count",
"type": "quantitative",
"title": "Grief Count"
}
},
"layer": [{
"mark": {
"type": "rect",
"tooltip": true
}
}, {
"mark": "text",
"encoding": {
"text": {"field": "grief_count.doc_count", "type": "nominal"},
"color": {"value": "white"}
}
}, {
"mark": {
"type": "text",
"dy": -20
},
"encoding": {
"text": {"field": "grief_percentage.value", "type": "nominal", "format": "0.0f"},
"color": {"value": "white"}
}
}],
"config": {"axis": {"grid": false }}
}