IMPORTANT: No additional bug fixes or documentation updates
will be released for this version. For the latest information, see the
current release documentation.
Visualization Editors
editVisualization Editors
editBy 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
editThe 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
editYou 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);