Coder Social home page Coder Social logo

Applying filter on other visualisations of the dashboard when clicked on any value on the vega visualisation about kibana-vega-vis HOT 10 CLOSED

nyurik avatar nyurik commented on September 14, 2024 2
Applying filter on other visualisations of the dashboard when clicked on any value on the vega visualisation

from kibana-vega-vis.

Comments (10)

robinsummerhill avatar robinsummerhill commented on September 14, 2024 1

Just adding a link to a tutorial that shows how to use the filterManager service to add a filter to the dashboard: https://www.timroes.de/2015/12/06/writing-kibana-4-plugins-visualizations-using-data/#adding-filters-on-click

from kibana-vega-vis.

spalger avatar spalger commented on September 14, 2024

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 :)

from kibana-vega-vis.

nyurik avatar nyurik commented on September 14, 2024

@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.

from kibana-vega-vis.

nyurik avatar nyurik commented on September 14, 2024

I started the implementation in https://github.com/nyurik/kibana-vega-vis/compare/indexPattern but the indexPattern I get from the code injector has index id set to undefined. @nreese do yuo know how to properly get the index ID and the context filter string, and also to modify them from code?

from kibana-vega-vis.

nreese avatar nreese commented on September 14, 2024

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 kibana-vega-vis.

spalger avatar spalger commented on September 14, 2024

@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:

  • filterBarClickHandler used to listen to click events from Kibana visualizations and create filters based on the queries used by that visualization
  • queryFilter service this seems to manage the state of the query box at the top of the page, but I'm not certain
  • filterManager service another peice to the puzzel, but I'm not certain how it ties in

from kibana-vega-vis.

nyurik avatar nyurik commented on September 14, 2024

Thanks @spalger. @nreese has sent me some good links too, documenting here for others:

Here is an example of how a map kibana plugin I wrote added geospatical filter pills. Line 7 is an example of how to get an instance of the interface. Line 63 is an example of how to add a new filter. Your code could do the same. When the signal is passed to your visualization, your code can convert that into a filter and add it to kibana. https://github.com/nreese/enhanced_tilemap/blob/master/public/vislib/geoFilter.js#L7
The rest of the code is looking for any filters previously built so that they can be updated instead of making a new filter each time

from kibana-vega-vis.

thekofimensah avatar thekofimensah commented on September 14, 2024

Yes, needed! That would take the vega visuals to the next level :)

from kibana-vega-vis.

nyurik avatar nyurik commented on September 14, 2024

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: getContextFilterAsString() and setContextFilterStringAndUpdateScreen(newFilter). Once these two functions are ready, it should be fairly easy to add them to the Vega plugin.

from kibana-vega-vis.

nyurik avatar nyurik commented on September 14, 2024

This issue was moved to elastic/kibana#17210

from kibana-vega-vis.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.