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!