Visualization Request Handlers

edit

Request handler gets called when one of the following keys on AppState change: vis, query, filters or uiState and when timepicker is updated. On top of that it will also get called on force refresh.

By default visualizations will use the courier request handler. They can also choose to use any of the other provided request handlers. It is also possible to define your own request handler (which you can then register to be used by other visualizations).

courier request handler

edit

courier is the default request handler which works with the default side bar editor.

none request handler

edit

Using none as your request handles means your visualization does not require any data to be requested.

custom request handler

edit

You can define your custom request handler by providing a function with the following signature: function (vis, { uiState, appState, timeRange }) { ... }

The timeRange will be an object with a from and to key, that can contain datemath expressions, like now-7d. You can use the datemath library to parse them.

This function must return a promise, which should get resolved with new data that will be passed to responseHandler.

It’s up to function to decide when it wants to issue a new request or return previous data (if none of the objects relevant to the request handler changed).

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

const myRequestHandler = async (vis, { appState, uiState, timeRange }) => {
  const data = ... parse ...
  return data;
};

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',
    requestHandler: myRequestHandler
  });
}

VisTypesRegistryProvider.register(MyNewVisType);