Vega: Map mode is not yet supported in Kibana Core

Elastic Stack Kibana
1

Hi there. I just updated my ELK stack with the newest version (6.2.2) today in order to use Vega viz. I am taking the sample code for logstash-* index from Logstash mapping.
However, I get the following error and do not know why is this happenning:

_callee2/<@http://localhost:5601/bundles/kibana.bundle.js?v=16588:86:229253
tryCatch@http://localhost:5601/bundles/vendors.bundle.js?v=16588:63:99703
makeInvokeMethod/<@http://localhost:5601/bundles/vendors.bundle.js?v=16588:63:101781
defineIteratorMethods/</prototype[method]@http://localhost:5601/bundles/vendors.bundle.js?v=16588:63:99985
step@http://localhost:5601/bundles/kibana.bundle.js?v=16588:86:227354
_asyncToGenerator/</<@http://localhost:5601/bundles/kibana.bundle.js?v=16588:86:227565
$Promise@http://localhost:5601/bundles/vendors.bundle.js?v=16588:63:68355
_asyncToGenerator/<@http://localhost:5601/bundles/kibana.bundle.js?v=16588:86:227281
_render@http://localhost:5601/bundles/kibana.bundle.js?v=16588:86:228785
_callee/<@http://localhost:5601/bundles/kibana.bundle.js?v=16588:86:228445
tryCatch@http://localhost:5601/bundles/vendors.bundle.js?v=16588:63:99703
makeInvokeMethod/<@http://localhost:5601/bundles/vendors.bundle.js?v=16588:63:101781
defineIteratorMethods/</prototype[method]@http://localhost:5601/bundles/vendors.bundle.js?v=16588:63:99985
step@http://localhost:5601/bundles/kibana.bundle.js?v=16588:86:227354
_asyncToGenerator/</<@http://localhost:5601/bundles/kibana.bundle.js?v=16588:86:227565
$Promise@http://localhost:5601/bundles/vendors.bundle.js?v=16588:63:68355
_asyncToGenerator/<@http://localhost:5601/bundles/kibana.bundle.js?v=16588:86:227281
render@http://localhost:5601/bundles/kibana.bundle.js?v=16588:86:228057
_callee/<@http://localhost:5601/bundles/kibana.bundle.js?v=16588:64:81569
tryCatch@http://localhost:5601/bundles/vendors.bundle.js?v=16588:63:99703
makeInvokeMethod/<@http://localhost:5601/bundles/vendors.bundle.js?v=16588:63:101781
defineIteratorMethods/</prototype[method]@http://localhost:5601/bundles/vendors.bundle.js?v=16588:63:99985
step@http://localhost:5601/bundles/kibana.bundle.js?v=16588:64:78235
step/<@http://localhost:5601/bundles/kibana.bundle.js?v=16588:64:78370
notify/</<@http://localhost:5601/bundles/vendors.bundle.js?v=16588:63:66473
notify/<@http://localhost:5601/bundles/vendors.bundle.js?v=16588:63:66199
flush@http://localhost:5601/bundles/vendors.bundle.js?v=16588:63:71214
´´´
2

@emil.mirzayev please post the Vega code that you use. Thx!

3

@nyuriks, this is the code I used. I just copy pasted it from your github repository example under https://github.com/nyurik/kibana-vega-vis/blob/master/examples/logstash/logstash-geosrc-map-with-destinations.hjson

  $schema: https://vega.github.io/schema/vega/v3.0.json
  config: {
    kibana: {type: "map", latitude: 10, longitude: -5, zoom: 2, delayRepaint: false}
  }
  data: [
    {
      name: centroidOverrides
      values: [
        {code: "US", lon: -101, lat: 40}
        {code: "CA", lon: -110, lat: 58}
        {code: "FR", lon: 2, lat: 47}
      ]
      transform: [
        {
          type: geopoint
          projection: projection
          fields: ["lon", "lat"]
        }
        {type: "formula", expr: "[datum.x, datum.y]", as: "center"}
      ]
    }
    {
      name: allCountries
      url: {%type%: "emsfile", name: "World Countries"}
      format: {property: "features"}
      transform: [
        {type: "formula", expr: "datum.properties.iso2", as: "countryCode"}
        {
          type: lookup
          from: centroidOverrides
          key: code
          fields: ["countryCode"]
          values: ["center"]
          as: ["sourceOverride"]
        }
        {
          type: formula
          expr: datum.sourceOverride || geoCentroid('projection', datum)
          as: sourceCentroid
        }
        {
          type: formula
          expr: "{x:datum.sourceCentroid[0], y:datum.sourceCentroid[1]}"
          as: source
        }
      ]
    }
    {
      name: logCount
      url: {
        index: logstash-*
        %context%: true
        %timefield%: @timestamp
        body: {
          size: 0
          aggs: {
            countries: {
              terms: {field: "geo.src", size: 200}
              aggs: {
                dest: {
                  terms: {field: "geo.dest", size: 50}
                }
              }
            }
          }
        }
      }
      format: {property: "aggregations.countries.buckets"}
      transform: [
        {
          type: lookup
          from: allCountries
          key: countryCode
          fields: ["key"]
          values: ["source"]
        }
      ]
    }
    {
      name: countries
      source: allCountries
      transform: [
        {
          type: lookup
          from: logCount
          key: key
          fields: ["countryCode"]
          values: ["doc_count"]
        }
        {type: "filter", expr: "datum.doc_count != null"}
      ]
    }
  ]
  scales: [
    {
      name: color
      type: sqrt
      domain: {data: "countries", field: "doc_count"}
      range: {
        scheme: {signal: "colors"}
      }
    }
  ]
  marks: [
    {
      name: countrymark
      type: shape
      from: {data: "countries"}
      encode: {
        enter: {
          tooltip: {signal: "datum.countryCode + ': ' + format(datum.doc_count, '0,')"}
          fillOpacity: {value: 0.7}
        }
        update: {
          fill: {scale: "color", field: "doc_count"}
        }
        hover: {
          fill: {value: "red"}
        }
      }
      transform: [
        {type: "geoshape", projection: "projection"}
      ]
    }
    {
      type: symbol
      from: {data: "countries"}
      encode: {
        update: {
          size: {value: 5}
          xc: {signal: "datum.source.x"}
          yc: {signal: "datum.source.y"}
        }
      }
    }
    {
      type: group
      data: [
        {
          name: selectedDatum
          source: logCount
          transform: [
            {type: "filter", expr: "hover && datum.key == hover.countryCode && datum.source"}
          ]
        }
      ]
      marks: [
        {
          type: group
          from: {
            facet: {name: "facetedDatum", data: "selectedDatum", field: "dest.buckets"}
          }
          data: [
            {
              name: facetDatumElems
              source: facetedDatum
              transform: [
                {
                  type: lookup
                  from: allCountries
                  key: countryCode
                  fields: ["key"]
                  values: ["source"]
                  as: ["target"]
                }
                {type: "filter", expr: "datum.target"}
                {type: "formula", expr: "parent.source", as: "source"}
                {
                  type: linkpath
                  shape: {signal: "lineshape"}
                }
              ]
            }
            {
              name: ranks
              source: facetDatumElems
              transform: [
                {
                  type: aggregate
                  groupby: ["key"]
                  ops: ["sum"]
                  fields: ["doc_count"]
                  as: ["summary"]
                }
                {
                  type: window
                  sort: {
                    field: ["summary", "key"]
                    order: descending
                  }
                  ignorePeers: {valuea: 11}
                  ops: ["rank"]
                }
              ]
            }
            {
              name: summary
              source: facetDatumElems
              transform: [
                {
                  type: lookup
                  from: ranks
                  key: key
                  values: ["rank"]
                  fields: ["key"]
                }
                {type: "formula", as: "Category", expr: "datum.rank < 5 ? datum.key : 'Other'"}
                {
                  type: aggregate
                  groupby: ["Category"]
                  ops: ["sum"]
                  fields: ["doc_count"]
                  as: ["summary"]
                }
                {type: "pie", field: "summary"}
              ]
            }
          ]
          scales: [
            {
              name: pieColors
              type: ordinal
              domain: {data: "summary", field: "Category"}
              range: {scheme: "category10"}
            }
            {
              name: lineThickness
              type: log
              domain: {data: "facetDatumElems", field: "doc_count"}
              range: [0.1, 8]
            }
            {
              name: lineOpacity
              type: linear
              domain: {data: "facetDatumElems", field: "doc_count"}
              range: [0.2, 0.8]
            }
          ]
          marks: [
            {
              from: {data: "facetDatumElems"}
              type: path
              interactive: false
              encode: {
                update: {
                  path: {field: "path"}
                  stroke: {value: "black"}
                  strokeWidth: {scale: "lineThickness", field: "doc_count"}
                  strokeOpacity: {scale: "lineOpacity", field: "doc_count"}
                }
              }
            }

         ..... Some long code
}```
4

@emil.mirzayev Hi, my apologies, I think I missed the link. This Vega code uses type:map -- interactive baselayer map that is not yet available in the Kibana core, only in the plugin. Did you see an error at the top of the screen about it?

I will release Kibana 6.2 plugin soon -- there is some work being done for the ElasticON that's coming up next week.

5

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.