IMPORTANT: No additional bug fixes or documentation updates will be released for this version. For the latest information, see the current release documentation.

« Visualization Request Handlers Vis object »

› › ›

Visualization Response Handlers

edit

Visualization Response Handlers

edit

The response handler is a function that receives the data from a request handler, as well as an instance of Vis object. Its job is to convert the data to a format visualization can use. By default default request handler is used which produces a table representation of the data. The data object will then be passed to visualization. This response matches the visData property of the <visualization> directive.

default response handler

edit

The default response handler converts pure elasticsearch responses into a tabular format. It is the recommended responseHandler. The response object contains a table property, which is an array of all the tables in the response. Each of the table objects has two properties:

columns: array of column objects, where each column object has a title property and an aggConfig property
rows: array of rows, where each row is an array of non formatted cell values

Here is an example of a response with 1 table, 3 columns and 2 rows:

{
  tables: [{
    columns: [{
      title: 'column1',
      aggConfig: ...
    },{
      title: 'column2',
      aggConfig: ...
    },{
      title: 'column3',
      aggConfig: ...
    }],
    rows: [
      [ '404', 1262, 12.5 ]
      [ '200', 343546, 60.1 ]
    ]
  }];
}

none response handler

edit

None response handler is an identity function, which will return the same data it receives.

custom response handler

edit

You can define your custom response handler by providing a function with the following definition: function (vis, response) { … }.

Function should return the transformed data object that visualization can consume.

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

const myResponseHandler = (vis, response) => {
   // transform the response (based on vis object?)
   const response = ... transform data ...;
   return response;
};

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',
    responseHandler: myResponseHandler
  });
}

VisTypesRegistryProvider.register(MyNewVisType);

« Visualization Request Handlers Vis object »