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.

10

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