Implementing vega into my custom kibana app

[masterThomas]

Hi team,

is it possible to implement Vega chart code into my custom kibana app? I am developing my custom app and want to display some data with Vega

Kibana 7.10.0

[aaron-nimocks]

Yes. Per the usage you can just use Vega in JavaScript but I am not sure if you would lose/gain anything if you did that since you are using it outside the Kibana scope.

Might have to do your own querying for the data and not have access to the filters/dates. @wylie might know that answer.

[wylie (Wylie Conlon)]

Yes, @aaron-nimocks is right that Vega is a Javascript library that your Kibana app can use in a standalone way, without any of the data fetching/filtering logic that is custom for Kibana. There is also another option which is to use Kibana expressions in very recent versions of Kibana, maybe 7.12.0 and higher.

The vis_type_vega plugin in Kibana registers a vega function to the expressions registry in your browser. I would recommend opening the Canvas app and trying to build a vega visParams="{...}" expression to see how this works. You can use the expressions_renderer code in your own app to display the output to the DOM.

There is also an example if you use --run-examples when starting Kibana, under the expressions explorer.

[masterThomas]

@wylie , i tried to render some vega snippet and faced some issue below. is there any docs to follow to make it working?

[wylie (Wylie Conlon)]

This is not documented, you'll have to read the source code and get familiar with the expressions syntax. Here is the vega function definition, looks like it's called spec not visParams: kibana/vega_fn.ts at master · elastic/kibana · GitHub

[masterThomas]

@wylie as i see Vega should be imported in kibana.json as requiredPlugins like below. But what functions shoud i import in "plugins.tsx" from Vega afterwards to make it working?

    {
          "id": "expressionsExplorer",
          "version": "0.0.1",
          "kibanaVersion": "kibana",
          "server": false,
          "ui": true,
          "requiredPlugins": ["visTypeVega", "expressions", "inspector", "uiActions", "developerExamples"],
          "optionalPlugins": [],
          "requiredBundles": []
    }

[wylie (Wylie Conlon)]

This is a good question but it's a little bit off. I assume you've read about the kibana plugin lifecycle.

You can use the expressions.ReactExpressionRenderer which is used by Lens (there might also be a non-react renderer). The renderer is available during the start phase of your plugin, so if you need to register something during setup phase that relies on the start phase you can register some kind of async function that waits or core.getStartServices() on the setup.

The ExpressionRenderer uses the registry of expressions, which will include vega because you loaded it.