New

The executive guide to generative AI

Read more
About usPartnersSupport|Login
IMPORTANT: No additional bug fixes or documentation updates will be released for this version. For the latest information, see the current release documentation.
« Visualization Factory Visualization Request Handlers »
Elastic Docs ›Kibana Guide [7.4] ›Developer guide ›Developing Visualizations

Visualization Editors

edit

Visualization Editors

edit

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

edit

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

edit

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);
« Visualization Factory Visualization Request Handlers »

On this page

Was this helpful?
Feedback