requestHandler

Elastic Stack Kibana
5

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!