Can we filter multiple values using kibanaAddFilter in Vega

Elastic Stack Kibana
1

Hello @everyone,

I am using Vega to create my Visualization. I want to put kibanaAddFilter so that on click it filter out a field's multiple selected values.
Like a field XYZ contains values( a,b,c,d,e,f,g). The filter should filter out a,b,c values on click.

I tried multiple ways to put it:-

 signals: [
    {
      name: point_click_1
      on: [
        {
          events: {
            source: scope
            type: click
            
          }
          update:
            '''
            kibanaAddFilter({
            "match_phrase":{
            "XYZ.keyword": "a" or "b" or "c" or "d" or "e" or "f" or "g" or "h"            
            }
            },'dataname')
            '''
        }
      ]
    }
]

This above code is giving expression parse error.

I also tried -

signals: [
    {
      name: point_click_1
      on: [
        {
          events: {
            source: scope
            type: click
          }
          update:
            '''
            kibanaAddFilter({
            "match_phrase":{
            "XYZ.keyword": "a or b or c or d or e or f or g or h"            
            }
            },'dataname')
            '''
        }
      ]
    }
]

This above code is not throwing error but not working as required. I believe it's taking the whole line as a phrase and checking that.

I also tried the way mentioned in this topic Passing multiple values in Kibana - ‘add filter’ - ‘is one of’ , But this also didn't work for me and was throwing error.

#vega

Thanks in advance!

2

Can you provide the type of data or example mapping used to create the panels in Vega?

3

It's a time series data.

In different documents the field value of XYZ can be different or same.
Example:-

Field Value
Document 1 Field1 abc
Field2 cde
Field3 1.2.3.423
XYZ a
Field4 efg
Field5 pqr
Document 2 Field1 qwe
Field2 cde
Field3 1.2.3.423
XYZ b
Field4 sdf
Field5 asd
Document 3 Field1 qwescs
Field2 azd
Field3 1.2.3.677
XYZ c
Field4 mnh
Field5 pqr
Document 4 Field1 fds
Field2 cd
Field3 1.2.3.34
XYZ a
Field4 efg
Field5 pqr
Document 5 Field1 qwe
Field2 cde
Field3 1.2.3.423
XYZ p
Field4 sdf
Field5 asd
Document 6 Field1 qwescs
Field2 azd
Field3 1.2.3.677
XYZ j
Field4 mnh
Field5 pqr

Here I want to put filter on XYZ field having values "a or b or c or d or e or f or g or h", in Vega visualization.

4

Instead of using the match_phrase query here. I would use the terms query as shown in the link to the other question you provided.

Like this:

{
  "query": {
    "terms": {
      "XYZ": [ "a", "b"],
    }
  }
}

@Luca_Belluccini Can you provide insight into using signals in Vega to create on-click events?

5

Hello @Alexis_Roberson
I am not an expert on Vega, but I can share with you an example I've edited from this documentation page.

Install the sample data commerce data to test this.
Expand the time picker to a wide time range to match some document of the sample.
Click on one of the black dots in the graph.
You should see a filter being applied with a terms filter on the field currency, hardcoded to EUR.

This is with Vega, not Vega-lite.

{
  $schema: "https://vega.github.io/schema/vega/v5.json"
  data: [
    {
      name: source_0
      url: {
        %context%: true
        %timefield%: order_date
        index: kibana_sample_data_ecommerce
        body: {
          aggs: {
            time_buckets: {
              date_histogram: {
                field: order_date
                fixed_interval: "3h"
                extended_bounds: {
                  min: {%timefilter%: "min"}
                  max: {%timefilter%: "max"}
                }
                min_doc_count: 0
              }
            }
          }
          size: 0
        }
      }
      format: { property: "aggregations.time_buckets.buckets" }
    }
  ]

  scales: [{
    name: x
    type: time
    range: width
    domain: {
      data: source_0
      field: key
    }
  }, {
    name: y
    type: linear
    range: height
    domain: {
      data: source_0
      field: doc_count
    }
  }]

  axes: [{
    orient: bottom
    scale: x
  }, {
    orient: left
    scale: y
  }]

  marks: [
    {
      type: area
      from: {
        data: source_0
      }
      encode: {
        update: {
          x: {
            scale: x
            field: key
          }
          y: {
            scale: y
            value: 0
          }
          y2: {
            scale: y
            field: doc_count
          }
        }
      }
    },
    {
      name: point
      type: symbol
      style: ["point"]
      from: {
        data: source_0
      }
      encode: {
        update: {
          x: {
            scale: x
            field: key
          }
          y: {
            scale: y
            field: doc_count
          }
          size: {
            value: 100
          }
          fill: {
            value: black
          }
          cursor: { value: "pointer" }
        }
      }
    },
    {
      type: rule
      interactive: false
      encode: {
        update: {
          y: {value: 0}
          y2: {signal: "height"}
          stroke: {value: "gray"}
          strokeDash: {
            value: [2, 1]
          }
          x: {signal: "max(currentX,0)"}
          defined: {signal: "currentX > 0"}
        }
      }
    },
    {
      type: rect
      name: selectedRect
      encode: {
        update: {
          height: {signal: "height"}
          fill: {value: "#333"}
          fillOpacity: {value: 0.2}
          x: {signal: "selected[0]"}
          x2: {signal: "selected[1]"}
          defined: {signal: "selected[0] !== selected[1]"}
        }
      }
    }
  ]

  signals: [
    {
      name: point_click
      on: [{
        events: {
          source: scope
          type: click
          markname: point
        }
        update: '''kibanaAddFilter({"terms":{"currency":["EUR"]}}, null, "currency filter to EUR")'''
      }]
    }
    {
      name: currentX
      value: -1
      on: [{
        events: {
          type: mousemove
          source: view
        },
        update: "clamp(x(), 0, width)"
      }, {
        events: {
          type: mouseout
          source: view
        }
        update: "-1"
      }]
    }
    {
      name: selected
      value: [0, 0]
      on: [{
        events: {
          type: mousedown
          source: view
        }
        update: "[clamp(x(), 0, width), clamp(x(), 0, width)]"
      }, {
        events: {
          type: mousemove
          source: window
          consume: true
          between: [{
            type: mousedown
            source: view
          }, {
            merge: [{
              type: mouseup
              source: window
            }, {
              type: keydown
              source: window
              filter: "event.key === 'Escape'"
            }]
          }]
        }
        update: "[selected[0], clamp(x(), 0, width)]"
      }, {
        events: {
          type: keydown
          source: window
          filter: "event.key === 'Escape'"
        }
        update: "[0, 0]"
      }]
    }
    {
      name: applyTimeFilter
      value: null
      on: [{
        events: {
          type: mouseup
          source: view
        }
        update: '''selected[0] !== selected[1] ? kibanaSetTimeFilter(
               invert('x',selected[0]),
               invert('x',selected[1])) : null'''
      }]
    }
  ]
}

image
image4514×1688 314 KB

Hope it helps.

7

I tried this. It's directing me to the dashboard with the filter applied.
Thanks a lot @Alexis_Roberson .

8

Glad you were able to get it working @Fiza
Were you able to compare Luca's solution to your own and figure out where you went wrong?

9

Ya I found that I was missing square brackets for writing all values. That's why it was putting filter but wasn't working properly. The dashboard was going blank as no condition matched.