Creating a new visualization in Kibana v8 using React

Elastic Stack Kibana
1

I am trying to create a custom visualization in Kibana v8.10.4 using React. I'll try to be brief, because there is already a lot of code required simply to register and display a basic visualization, but do let me know if you require more context.

I copied a lot of the code in kibana/test/plugin_functional/plugins/kbn_tp_custom_visualizations at main · elastic/kibana · GitHub as a starting point.

I then added some schemas to my Definition:

...,
schemas: [
      {
        group: 'metrics',
        name: 'metric',
        title: 'Metric (Y Dimension)',
        min: 1,
        max: 1,
        aggFilter: ['count', 'sum', 'min', 'max', 'avg'],
        defaults: [{ type: 'count', schema: 'metric' }],
      },
      {
        group: 'buckets',
        name: 'bucket',
        title: 'X Axis',
        min: 1,
        max: 1,
        aggFilter: ['histogram'],
      },
      {
        group: 'buckets',
        name: 'split',
        title: 'Z Axis',
        min: 1,
        max: 1,
        aggFilter: ['histogram'],
      },
    ],
...,

When I configure the Z Axis bucket (using histogram aggregation and any field), I get the following message in Kibana:

 Unknown argument 'row' passed to function

I suspect I have not set up my render component parameters correctly, but I cannot work out how to do this just using the test plugin (or built-in plugins such as Gauge, Pie , etc) as a reference.

Ultimately, I want to create a custom visualization that can be configured using the above metrics & buckets. I think my problem is that I don't understand how to pass the metrics & buckets between the editor component and my main component, but I may be barking up the wrong tree entirely. Thanks in advance for any help!

2

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