Visualization Editors

By default, visualizations will use the default editor. This is the sidebar editor you see in many of the Kibana visualizations. You can also write your own editor.

default editor controller

The default editor controller receives an optionsTemplate or optionsTabs parameter. These can be either an AngularJS template or React component.

{
    name: 'my_new_vis',
    title: 'My New Vis',
    icon: 'my_icon',
    description: 'Cool new chart',
    editor: 'default',
    editorConfig: {
       optionsTemplate: '<my-custom-options-directive></my-custom-options-directive>' // or
       optionsTemplate: MyReactComponent // or if multiple tabs are required:
       optionsTabs: [
           { title: 'tab 1', template: '<div>....</div> },
           { title: 'tab 2', template: '<my-custom-options-directive></my-custom-options-directive>' },
           { title: 'tab 3', template: MyReactComponent }
       ]
    }
  }

custom editor controller

You can create a custom editor controller. To do so pass an Editor object (the same format as VisController class). You can make your controller take extra configuration which is passed to the editorConfig property.

import { VisFactoryProvider } from 'ui/vis/vis_factory';

class MyEditorController {
    constructor(el, vis) {
      this.el = el;
      this.vis = vis;
      this.config = vis.type.editorConfig;
   }
   async render(visData) {
      console.log(this.config.my);
      ...
      return 'done rendering';
   }
   destroy() {
      console.log('destroying');
   }
}

const MyNewVisType = (Private) => {
  const VisFactory = Private(VisFactoryProvider);

  return VisFactory.createAngularVisualization({
    name: 'my_new_vis',
    title: 'My New Vis',
    icon: 'my_icon',
    description: 'Cool new chart',
    editor: MyEditorController,
    editorConfig: { my: 'custom config' }
  });
}

VisTypesRegistryProvider.register(MyNewVisType);