The base visualization type does not make any assumptions about the rendering technology you are going to use and works with pure Javascript. It is the visualization type we recommend to use.

You need to provide a type with a constructor function, a render method which will be called every time options or data change, and a destroy method which will be called to cleanup.

The render function receives the data object and status object which tells what actually changed. Render function needs to return a promise, which should be resolved once the visualization is done rendering.

Status object has the following properties: vis, aggs, resize, data. Each of them is set to true if the matching object changed since last call to the render function or set to false otherwise. You can use it to make your visualization rendering more efficient.

import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';

class MyVisualization {
   constructor(el, vis) {
      this.el = el;
      this.vis = vis;
   }
   async render(visData, status) {
      ...
      return 'done rendering';
   }
   destroy() {
      console.log('destroying');
   }
}

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

  return VisFactory.createBaseVisualization({
    name: 'my_new_vis',
    title: 'My New Vis',
    icon: 'my_icon',
    description: 'Cool new chart',
    visualization: MyVisualization
  });
}

VisTypesRegistryProvider.register(MyNewVisType);

The AngularJS visualization type assumes you are using angular as your rendering technology. Instead of providing the controller we need to provide the angular template to render.

The visualization will receive vis, uiState and visData on the $scope and needs to call $scope.renderComplete() once it is done rendering.

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',
    visConfig: {
       template: '<div ng-controller="MyAngularController"></div>`
    }
  });
}

React visualization type assumes you are using React as your rendering technology. Instead of passing it an AngularJS template you need to pass a React component.

The visualization will receive vis, uiState and visData as props. It also has a renderComplete function, which needs to be called once the rendering has completed.

import { ReactComponent } from './my_react_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: {
       template: ReactComponent
    }
  });
}

This visualization type should only be used for vislib visualizations. Vislib is kibana’s D3 library which can produce point series charts and pie charts.