Histogram in Kibana

Aravinda_Kolla · December 26, 2019, 4:12pm

I am trying to replicate the histogram visualization type in kibana using the plugin new visualization type functionality. I used VisFactory's createVislibVisualization. The visualization is not rendered. I encounter the following problem
TypeError: Cannot read property 'splitColumn' of undefined. How can I overcome this error?

bhavyarm · December 26, 2019, 4:59pm

Can you please post your whole error log?

Thanks,
Bhavya

Aravinda_Kolla · December 27, 2019, 6:46am

I am using Kibana version 7.1.1. The following is the browser console message.

Uncaught (in promise) TypeError: Cannot read property 'splitColumn' of undefined
at legacy.js:42
at new Promise (<anonymous>)
at handler (legacy.js:39)
at vislib.js:73
at new Promise (<anonymous>)
at VisualizeDataLoader.responseHandler (vislib.js:72)
at VisualizeDataLoader.<anonymous> (visualize_data_loader.ts:68)
at step (tslib.js:129)
at Object.eval [as next] (tslib.js:110)
at fulfilled (tslib.js:100)

nickofthyme · December 27, 2019, 3:24pm

@Aravinda_Kolla I'm not too familiar with the legacy plugin but just looking at the error message, it seems that the responseHandler is expecting a dimensions object, here .

github.com

elastic/kibana/blob/master/src/legacy/ui/public/vis/response_handlers/legacy.js#L38


* function.
*/


export const legacyResponseHandlerProvider = function() {
 return {
   name: 'legacy',
   handler: function(table, dimensions) {
     return new Promise(resolve => {
       const converted = { tables: [] };


       const split = dimensions.splitColumn || dimensions.splitRow;


       if (split) {
         converted.direction = dimensions.splitRow ? 'row' : 'column';
         const splitColumnIndex = split[0].accessor;
         const splitColumnFormatter = getFormat(split[0].format);
         const splitColumn = table.columns[splitColumnIndex];
         const splitMap = {};
         let splitIndex = 0;


         table.rows.forEach((row, rowIndex) => {

The shape of the dimensions looks something like that of the kibana_datatable vis, for example...

{
  "x": null,
  "y": [
    {
      "accessor": 0,
      "format": {
        "id": "number"
      },
      "params": {},
      "label": "Total Delays",
      "aggType": "count"
    }
  ]
}

You may just need to decorate the Vis object with dimensions using getVisParams helper method

github.com

elastic/kibana/blob/3ed5264cc307964ced5f90402264232724956602/src/legacy/core_plugins/visualizations/public/np_ready/public/legacy/build_pipeline.ts#L465-L482


// If not using the expression pipeline (i.e. visualize_data_loader), we need a mechanism to
// take a Vis object and decorate it with the necessary params (dimensions, bucket, metric, etc)
export const getVisParams = async (
  vis: Vis,
  params: { searchSource: ISearchSource; timeRange?: any; abortSignal?: AbortSignal }
) => {
  const schemas = getSchemas(vis, params.timeRange);
  let visConfig = cloneDeep(vis.params);
  if (buildVisConfig[vis.type.name]) {
    visConfig = {
      ...visConfig,
      ...buildVisConfig[vis.type.name](schemas, visConfig),
    };
  } else if (vislibCharts.includes(vis.type.name)) {
    visConfig.dimensions = await buildVislibDimensions(vis, params);
  }
  return visConfig;
};

If you could post more source code it would be easier to assist you further.

Aravinda_Kolla · December 30, 2019, 5:57am

@nickofthyme I replicated the code on github kibana tagv7.1.1. The index.js looks as follows:

export default function (kibana) {

  return new kibana.Plugin({
    uiExports: {
      visTypes: [
        'plugins/hist_vis/hist_vis'
      ]
    }
  });
}

Copy pasted the code from the following link with no modifications in hist_vis.js.

https://github.com/elastic/kibana/blob/v7.1.1/src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js

Aravinda_Kolla · December 30, 2019, 8:12am

I tried to do the same for version 7.5.1.

I get the following javascript error:

Uncaught (in promise) TypeError: Cannot read property 'find' of undefined
    at point_series.js:133
    at Array.forEach (<anonymous>)
    at point_series.js:124
    at new VisConfig (vis_config.js:45)
    at Vis.initVisConfig (vis.js:88)
    at _callee$ (controller.js:109)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at asyncGeneratorStep (controller.js:18)

The index.js is as follows:

export default function (kibana) {
  return new kibana.Plugin({
    require: ['elasticsearch'],
    name: 'hist_vis',
    uiExports: {
      visTypes: [
        'plugins/hist_vis/hist_vis'
      ],
      interpreter: [
        'plugins/hist_vis/pie_fn',
        'plugins/hist_vis/hist_vis_fn',
      ]
    },

    config(Joi) {
      return Joi.object({
        enabled: Joi.boolean().default(true),
      }).default();
    },
  });
}

The hist_vis.js is same as:
https://github.com/elastic/kibana/blob/v7.5.1/src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js .
The hist_fn.js is same as :
https://github.com/elastic/kibana/blob/v7.5.1/src/legacy/core_plugins/kbn_vislib_vis_types/public/vislib_fn.js .
The pie_fn.js is same as :
https://github.com/elastic/kibana/blob/v7.5.1/src/legacy/core_plugins/kbn_vislib_vis_types/public/pie_fn.js .
the controller is same as :
https://github.com/elastic/kibana/blob/v7.5.1/src/legacy/core_plugins/kbn_vislib_vis_types/public/controller.js

nickofthyme · January 6, 2020, 3:19pm

@Aravinda_Kolla sorry for the delay. It took me a bit to fully understand your question and figure out the code involved.

From what I understand, you just want to replicate the current histogram visualization. In coping all the files you mentioned below and attempting to create my own plugin/visualization under legacy/core_plugins/hist_vis I did encounter the same error as you with the find of undefined.

The problem is that it is never calling the fn method on the hist_fn.js which does the response handling, this guy .

github.com

elastic/kibana/blob/6d05841a418cfec4a88f0afbee172bccd9f0cded/src/legacy/core_plugins/kbn_vislib_vis_types/public/vislib_fn.js#L45-L64


      
            async fn(context, args) {
              const responseHandler = vislibSeriesResponseHandlerProvider().handler;
              const visConfigParams = JSON.parse(args.visConfig);
          
              const convertedData = await responseHandler(context, visConfigParams.dimensions);
          
              return {
                type: 'render',
                as: 'visualization',
                value: {
                  visData: convertedData,
                  visType: args.type,
                  visConfig: visConfigParams,
                  params: {
                    listenOnChange: true,
                  }
                },
              };
            },
          });

This is because hist_vis is not a vislibCharts type which are defined here .

github.com

elastic/kibana/blob/6d05841a418cfec4a88f0afbee172bccd9f0cded/src/legacy/ui/public/visualize/loader/pipeline_helpers/build_pipeline.ts#L68-L76


      
          const vislibCharts: string[] = [
            'area',
            'gauge',
            'goal',
            'heatmap',
            'histogram',
            'horizontal_bar',
            'line',
          ];

Adding hist_vis to this array renders the replicated visualization as expected. This is sort of complex because the kbn_vislib_vis_types plugin handles several visualizations that have shared logic.

Note: This area of code is very volatile right now as we are internally migrating all our existing plugins, including visualizations, to a new platform. See here if interested in more details.

Sorry, I can't give more context than this. I'm not too familiar with how this would work as a third-party plugin having replicated the kbn_vislib_vis_types logic. If that is your end intent, you might have more issues. Please let me know if you have any other questions.

Aravinda_Kolla · January 7, 2020, 4:35am

@nickofthyme Thank you for your elaborate reply. So if I want to replicate what the kbn_vislib_vis_types histogram does, as a third party plugin, do I have to write custom request and response handlers ?

nickofthyme · January 7, 2020, 3:04pm

@Aravinda_Kolla yup, that's exactly right.

system · February 4, 2020, 3:04pm

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.