Canvas plugin development

[luis.montecatine (Luis Montecatine Beltrán)]

Hello,

Kibana version: 7.3.1

I'm trying to develop a simple canvas plugins that can contains a html button or something similar.

I have followed this post:

Custom Kibana Canvas Elements

In the intro to canvas webinar, Rashid khan mentions a plugin interface that allows users to add their own custom Canvas Elements. But I couldn't find any documentation for the same. Any pointers to how to develop new Canvas elements (say heatmaps)? Thank you

And the basic plugin works, but I can't make It works when I tried to use ReactDom.render

Is there any documentation about developing plugins on canvas??

Thanks in advance, Luis

[clintandrewhall]

Hi Luis! Can you provide me the exact error you're getting? It's likely you haven't registered a renderer with the kbnInterpreter. For example, take a look at the markdown renderer.

domNode

The HTML node provided by Canvas to manipulate and render within.

config

Parameters passed by the expression to the renderer.

handlers

Handlers invoked by Canvas when rendering, moving, destroying, etc

You should be able to register a renderer using the same call:

const fooRenderer = ({
  name: 'foo',
  displayName: 'Foo',
  help: 'Render Foo',
  reuseDomNode: true,
  render(domNode, config, handlers) {
    ReactDOM.render(
      <div className="fooContainer">{config.foo}, {config.baz}</div>,
      domNode,
      () => handlers.done()
    );

    handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
  },
});

const renderers = [ fooRenderer];

kbnInterpreter.register({
  elements,
  browserFunctions,
  renderers,
});

Hope this helps!