-
Notifications
You must be signed in to change notification settings - Fork 8.1k
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
Applying filter on other visualisations of the dashboard when clicked on any value on the vega visualisation #17210
Comments
From @spalger on August 25, 2017 20:36 The filters are accessible to the vis type, but I'm not confident that there is a way for vega visualizations to automatically set filters based on clicks. Perhaps we could come up with a way to define the filter desired? @sainath-reancloud can you share the visualization you are building, the item you would like to click, and the filter you would expect to produce? Screenshots would be helpful along with sample data if you can provide it. Thanks for the request :) |
@sainath-reancloud that's an awesome idea, thanks! It should be possible to do with Vega signals - they can be modified by both the environment and by the Vega JSON. I already use it for the underlying map synchronization - a graph is notified when user moves the map (latitude/longitude/zoom signals), and the graph can position the map to a different location on some event by modifying those signals. @spalger What's the best way for my code to set Kibana dashboardContext's filter string and fire a global update? Note: Until #11 is fixed, there will be a full graph regeneration/reinitialization whenever the filter expression is changed, so this might cause some visual disruptions, depending on the graph. |
I started the implementation in https://github.com/nyurik/kibana-vega-vis/compare/indexPattern but the |
From @nreese on September 8, 2017 14:45 The indexPatterns get method creates a new index pattern when an id argument is not provided. What are you trying to do? Are you trying to create a new index-pattern or get an existing index-pattern based on the index-pattern title? |
From @spalger on September 11, 2017 19:24 @nyurik I'm not super familiar with this section of things and I assume it's changing a fair amount with the work that @lukasolson and @Bargs have been doing. It looks like you're going to want to checkout the following modules:
|
Thanks @spalger. @nreese has sent me some good links too, documenting here for others:
|
From @robinsummerhill on October 3, 2017 13:59 Just adding a link to a tutorial that shows how to use the |
From @seanziee on March 7, 2018 1:26 Yes, needed! That would take the vega visuals to the next level :) |
Update: Per @timroes , there is currently some refactoring going on inside Kibana to make accessing filters easier. I am waiting for that work to complete, and once done, I will add this feature. Essentially I need two functions from Kibana: |
elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ```
elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ```
elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ```
elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ```
elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ```
elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ```
elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ```
elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ```
elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ``` changed Vega signal to custom func rough draft implementation support timefilter, filter removal use buildQueryFilter wrapper rebase and sync with tooltip
elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ```
elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ``` changed Vega signal to custom func rough draft implementation support timefilter, filter removal use buildQueryFilter wrapper rebase and sync with tooltip
elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ``` changed Vega signal to custom func rough draft implementation support timefilter, filter removal use buildQueryFilter wrapper rebase and sync with tooltip
elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ``` changed Vega signal to custom func rough draft implementation support timefilter, filter removal use buildQueryFilter wrapper rebase and sync with tooltip func error handling, filters (WIP) console.log to dbg removeFilter manual merge of upstream patch
elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ``` changed Vega signal to custom func rough draft implementation support timefilter, filter removal use buildQueryFilter wrapper rebase and sync with tooltip func error handling, filters (WIP) console.log to dbg removeFilter manual merge of upstream patch
elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ``` changed Vega signal to custom func rough draft implementation support timefilter, filter removal use buildQueryFilter wrapper rebase and sync with tooltip func error handling, filters (WIP) console.log to dbg removeFilter manual merge of upstream patch
elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ``` changed Vega signal to custom func rough draft implementation support timefilter, filter removal use buildQueryFilter wrapper rebase and sync with tooltip func error handling, filters (WIP) console.log to dbg removeFilter manual merge of upstream patch
elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ``` changed Vega signal to custom func rough draft implementation support timefilter, filter removal use buildQueryFilter wrapper rebase and sync with tooltip func error handling, filters (WIP) console.log to dbg removeFilter manual merge of upstream patch
elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ``` changed Vega signal to custom func rough draft implementation support timefilter, filter removal use buildQueryFilter wrapper rebase and sync with tooltip func error handling, filters (WIP) console.log to dbg removeFilter manual merge of upstream patch
elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ``` changed Vega signal to custom func rough draft implementation support timefilter, filter removal use buildQueryFilter wrapper rebase and sync with tooltip func error handling, filters (WIP) console.log to dbg removeFilter manual merge of upstream patch
elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ``` changed Vega signal to custom func rough draft implementation support timefilter, filter removal use buildQueryFilter wrapper rebase and sync with tooltip func error handling, filters (WIP) console.log to dbg removeFilter manual merge of upstream patch
* [Vega] Implement context filter modification #17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ```
elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ``` changed Vega signal to custom func rough draft implementation support timefilter, filter removal use buildQueryFilter wrapper rebase and sync with tooltip func error handling, filters (WIP) console.log to dbg removeFilter manual merge of upstream patch
Done. Will be part of Kibana 6.4 |
* [Vega] Implement context filter modification elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ```
* [Vega] Implement context filter modification #17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ```
Edit: Hmmm. I thought that this propagates signals to other dashboards but after deeper investigation it seems that isn't (see example below). If I am right, what does this do and how can we setup on our dashboards (examples?)? Hello, can someone provide more context on this functionality? Some instructions would be helpful. For example, consider two visualizations:
And the other has a text that is updated according to the drop down.
As expected, the text visualization does not compile because it can't find the I actually find it curious on why I have two dropdowns when I set up just one (I saved the visualisation). |
@bphenriques independent Vega graphs do not communicate with each other via signals. You have to put both the drop down and the click handler into the same graph:
|
@nyurik Thank you for clearing that out! |
From @sainath-reancloud on August 23, 2017 5:19
Hello Team,
This plugin solves most of our complex use-cases and it's indeed very useful. Is there a way where we could apply filter on other visualisations of the dashboard, whenever we click on a particular value on the vega visualisation. Similarly where it could emulate the 'filtering by value' provided by out of the box kibana visualisations.
Copied from original issue: nyurik/kibana-vega-vis#13
The text was updated successfully, but these errors were encountered: