requestHandler

[masterThomas]

hi team,
Writing custom visualizations , so please guide where can i find any examples of requestHandler of VisFactory.createReactVisualization ? my task is to receive data from elastic and visualize it with my custom view.

[rashmi (kulkarni)]

Hi

Request handler gets called when one of the following keys on AppState change: vis , query , filters or uiState and when timepicker is updated. On top of that it will also get called on force refresh.

By default visualizations will use the courier request handler. They can also choose to use any of the other provided request handlers. It is also possible to define your own request handler (which you can then register to be used by other visualizations). Have you looked at this detailed documentation? https://github.com/elastic/kibana/blob/master/docs/development/visualize/development-create-visualization.asciidoc#development-visualization-request-handlers

Thanks
Rashmi

[masterThomas]

rashmi, sure i have seen it, but still cant understand how it works. are there any simple workable example with functionality like getting data from elastic indexes and passing it to visualize in somebody`s custom view ?

[rashmi (kulkarni)]

@lukeelmers will shed more light here.

Thanks
Rashmi

[lukeelmers]

Hi @masterThomas,

A simple setup of a React visualization might look something like this (where ReactComponent is the component you've created for rendering the visualization):

  import { VisFactoryProvider } from 'ui/vis/vis_factory';
  import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
  import { ReactComponent } from './my_react_component';
  import { ReactOptionsComponent } from './my_react_options_component';

  const MyNewVisType = (Private) => {
    const VisFactory = Private(VisFactoryProvider);
    return VisFactory.createReactVisualization({
      name: 'my_new_vis',
      title: 'My New Vis',
      icon: 'my_icon',
      description: 'Cool new chart',
      visConfig: {
        component: ReactComponent
      },
      editorConfig: {
        optionsTemplate: ReactOptionsComponent
      }
    });
  };

  VisTypesRegistryProvider.register(MyNewVisType);

By not explicitly specifying a request or response handler, you will by default get the data passed to the props of ReactComponent in "tabify" format which you can find more info & examples of here.

If you are looking for a more complete example, I'd recommend looking at something like the markdown visualization in Kibana's source. This is a relatively simple visualization implemented in React.

Hope that helps point you in the right direction!

[masterThomas]

Hi @lukeelmers, thanks for answers. So i put the requestHandler in courier, but has issue then :

Error in visualization

flatData.index is undefined

what is that meaning? i tried to pull out data from elastic to my view.
Also, markdown does not meet my requirements because it does not send any requests and does not fetch data then and i need some example which more or less has that logic . where can i find it ?

[lukeelmers]

Sounds like perhaps an index pattern isn't selected for your visualization. I assume you haven't changed options.showIndexSelection from the default when using the visualization factory?

Although markdown isn't handling aggregations, it is still representative of how data is passed into a visualization. I'd recommend checking out the docs on the default vis editor as a starting point -- if you correctly configure the editor, it will handle requesting bucket aggs for you, passing the data along to your vis component similar to how it is passed to the markdown component.

Another example you might look at is tagcloud -- the editor params still use angular in this case, but this will give an example of usage with bucket aggs.