kibana-vega-vis icon indicating copy to clipboard operation
kibana-vega-vis copied to clipboard

Issue with width signal

Open lorenzolightsgdwarf opened this issue 6 years ago • 0 comments

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. image

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 image image

Can you help me to figure out what is wrong? Thanks

lorenzolightsgdwarf avatar Jun 13 '18 11:06 lorenzolightsgdwarf