Embed Kibana Visualization in Angular 2+

[Giuseppe_Merlo]

Hi everyone!

As title says, i want to embed Kibana Visualizations into my own Angular 2+ app. I know that it's possible to do embedding via iFrame, but i want something different. Navigating through the web and Google, i see this:

visualization directive
_The visualization directive takes a visualization configuration and data. It should be used, if you don’t want to render a saved visualization, but specify the config and data directly.

<visualization vis='vis' vis-data='visData' ui-state='uiState' ></visualization>

where

vis is an instance of Vis object. The constructor takes 3 parameters:

indexPattern : the indexPattern you want to pass to the visualization
visConfig : the configuration object
uiState : uiState object you want to pass to Vis. If not provided Vis will create its own.
visData is the data object. Each visualization defines a responseHandler, which defines the format of this object.

uiState is an instance of PersistedState. Visualizations use it to keep track of their current state. If not provided will create its own (but you won’t be able to check its values)

code example: create single metric visualization

<div ng-controller="KbnTestController" class="test_vis">
  <visualization vis='vis' vis-data='visData'></visualize>
</div>

import { uiModules } from 'ui/modules';

uiModules.get('kibana')
.controller('KbnTestController', function ($scope) {
  const visConfig = {
    type: 'metric'
  };
  $scope.vis = new Vis('.logstash*', visConfig);
  $scope.visData = [{ columns: [{ title: 'Count' }], rows: [[ 1024 ], [ 256 ]] }];
});

visualization will trigger renderComplete event on the element once it’s done rendering._

This is a Angular method. How can i reuse for Angular 2+? How can import ui/module and visualization directive?

Thank you very much for your time.

[timroes]

Hi,

we currently have a stack of two different "directives" in the visualize framework inside of Kibana.

One is <visualize> which actually also take care about fetching data from ES and one is <visualization> which you need to pass the data to yourself.

The first one can (and only should) be used via the visualize loader (documentation). This is a plain JavaScript API you can use to embed any visualization into any DOM node. This is the recommended way!

I am sure you potentially can embed an Angular 1 directive into an Angular 2+ application - Google might be a better help here than this forum - BUT I would not recommend you doing this anymore. We will remove that directive very likely in one of the upcoming minor versions, since we are trying to remove Angular completely from Kibana. So I would recommend you only using the plain JavaScript loader as mentioned above.

Also please note (just that there is no confusion around this): All of those APIs are only working if you run INSIDE of Kibana. So if you are writing a custom application plugin for Kibana you can use those APIs. But there is no way you could call these APIs outside of Kibana, since they need Kibana being present around it. You cannot simply import some Kibana classes from your application and expect anything to work.

If that's actually your use case embedding via iFrame is currently the only viable solution you are having currently.

Cheers,
Tim

[Giuseppe_Merlo]

Hi Timroes,

thank you very much for your reply. That is so clear and plain!

I'll try to use the visualize loader, but i think i can only import graph via iFrame for my case.

Thank you a lot again!

[Giuseppe_Merlo]

I have another question.

I embed my visualization via iFrame and this gives creation filters possibility to me. But, when i clicked on iFrame or create manually filters via filters-bar, nothing happens. There's a way to make it works?

Thank you in advance!

[timroes]

That's unfortunately an issue in the embedding mode currently, that you can find and follow here: https://github.com/elastic/kibana/issues/16595

[Giuseppe_Merlo]

You're great!

Thank you so much!