kibana-vega-vis
kibana-vega-vis copied to clipboard
Issue with width signal
Hi,
I'm using the plugin with Kibana 5.5.2. I want to have a simple text visualization with the fontsize being dependent on view width. For some reason that I cannot understand, the width changes according to the results of the query. For example, the same query with different time filters causes two different values for the width.
When inspecting the view object, the property _width is equal to the container width but the signal has a wrong value.
Here is the code:
{
"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"data": {
"name": "results",
"url": {
"index": "mouse_moves_v2,teleport_moves_v2",
"body": {
"size": 0,
"query": {
"bool": {
"must": [
{"match_all": {}},
"%dashboard_context-must_clause%",
{"range": {"timestamp_milliseconds": {"%timefilter%": true}}}
],
"must_not": ["%dashboard_context-must_not_clause%"]
}
},
"_source": {"excludes": []},
"aggs": {
"per_day": {
"date_histogram": {"field": "timestamp_milliseconds", "interval": "day"},
"aggs": {
"uuid_agg": {
"terms": {"field": "uuid", "size": 2147483647},
"aggs": {
"sum_td": {
"sum": {
"script": "(doc.containsKey('distance_mm')) ? doc['distance_mm'].value : doc['traveled_distance_mm'].value "
}
}
}
},
"avg_TD": {
"avg_bucket": {
"buckets_path": "uuid_agg>sum_td",
"gap_policy": "skip"
}
}
}
},
"avg_TD_day": {"avg_bucket": {"buckets_path": "per_day>avg_TD"}},
"min_TD_day": {"min_bucket": {"buckets_path": "per_day>avg_TD"}},
"max_TD_day": {"max_bucket": {"buckets_path": "per_day>avg_TD"}}
}
}
},
"format": {"property": "aggregations"}
},
"layout": {"padding": 10, "columns": 3, "align": "each"},
"marks": [
{"type": "group"},
{
"type": "group",
"marks": [
{
"type": "text",
"encode": {
"enter": {
"fill": {"value": "#000"},
"text": {"value": "Avg:"},
"align": {"value": "center"},
"baseline": {"value": "bottom"}
},
"update": {
"fontSize": {"signal": "width/10"},
"text": {"signal": "width"}
}
}
}
]
},
{"type": "group"},
{"type": "group"},
{
"type": "group",
"marks": [
{
"type": "text",
"from": {"data": "results"},
"encode": {
"update": {
"text": {
"signal": "format(datum.avg_TD_day.value/1000, \".2f\")+\"m\""
},
"align": {"value": "center"},
"baseline": {"value": "middle"},
"fontSize": {"signal": "width/3"}
}
}
}
]
},
{"type": "group"},
{
"type": "group",
"marks": [
{
"type": "text",
"encode": {
"enter": {
"fill": {"value": "#000"},
"text": {"value": "Min:"},
"align": {"value": "center"},
"baseline": {"value": "bottom"}
},
"update": {"fontSize": {"signal": "width/10"}}
}
}
]
},
{"type": "group"},
{
"type": "group",
"marks": [
{
"type": "text",
"encode": {
"enter": {
"fill": {"value": "#000"},
"text": {"value": "Max:"},
"align": {"value": "center"},
"baseline": {"value": "bottom"}
},
"update": {"fontSize": {"signal": "width/10"}}
}
}
]
},
{
"type": "group",
"marks": [
{
"type": "text",
"from": {"data": "results"},
"encode": {
"update": {
"text": {"signal": "format(datum.min_TD_day.value/1000, \".2f\")"},
"align": {"value": "center"},
"baseline": {"value": "middle"},
"fontSize": {"signal": "width/10"}
}
}
}
]
},
{"type": "group"},
{
"type": "group",
"marks": [
{
"type": "text",
"from": {"data": "results"},
"encode": {
"update": {
"text": {"signal": "format(datum.max_TD_day.value/1000, \".2f\")"},
"align": {"value": "center"},
"baseline": {"value": "middle"},
"fontSize": {"signal": "width/10"}
}
}
}
]
}
]
}
This code generates these two results when changing the time filter
Can you help me to figure out what is wrong? Thanks