I'm building my own visualizations in Vega, and I am adding signals to my Vega code using the "bind" option to have a "range" or "select" object that the user of my Kibana dashboard can use to customize the visualization. The issue is that no matter what size the window containing the visualization is, the signal slider or menu always is positioned below the display such that one has to scroll down to get to it. I suspect Kibana isn't including the extra space required for the signals when it determines the window size, but I have not been able to figure out how to trick it to include it. Does anyone have any workarounds for this? Thanks for any help!
Hey! Can you send us your vega config and the kibana version you are working on in order to replicate it?
I am running Kibana 7.12. I started with Bar Chart Example, and took out the set height and width, and added a signal element with input element binding per [Signals | Vega]:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A basic bar chart example, with value labels shown upon mouse hover.",
"padding": {"bottom": 150},
"data": [
{
"name": "table",
"values": [
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
{"category": "C", "amount": 43},
{"category": "D", "amount": 91},
{"category": "E", "amount": 81},
{"category": "F", "amount": 53},
{"category": "G", "amount": 19},
{"category": "H", "amount": 87}
]
}
],
"signals": [
{ "name":"mypadding", "value": 0.05, "bind": {"input":"range", "min": 0, "max": 1, "step":0.05} },
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": {"signal":"mypadding"},
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "datum === tooltip", "value": 0},
{"value": 1}
]
}
}
}
]
}
Thank you!
I see. I think that your best shot is to define width and height. For example:
"autosize": "none",
"height": 700,
"width": 800,
This will solve the problem with the dashboard embeddable. I see on the vega editor page that there is a problem when you dont set these properties on your example so my guess is that is something on the vega side.
Yeah, the Vega editor gets unhappy if you don't set the height and width. Within Kibana, "autosize" is the default so I was hoping that it was possible to have the signals appear within the autosized window without scrolling.
Yes, I saw that you opened an issue on our repo. Thanx for that, we will need to investigate it though to see if we can provide a fix for that on our end.
1 Like
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.