Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue with width signal #75

Open
lorenzolightsgdwarf opened this issue Jun 13, 2018 · 0 comments
Open

Issue with width signal #75

lorenzolightsgdwarf opened this issue Jun 13, 2018 · 0 comments

Comments

@lorenzolightsgdwarf
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant