Embedding visualizations docu error

[havidarou (Javier Castro)]

Hi everyone,

I'm following the documentation here: https://www.elastic.co/guide/en/kibana/master/development-embedding-visualizations.html

But I can't load a visualization. Whenever I try to do it, lots of errors appear in the browser's console:

When I inspect the html code, I see the directive has expanded inner tags, but I can't see anything:

My controller:

app.controller('KbnTestController', function ($scope, AppState, savedVisualizations) {
    const visId = '86b01da0-bd7d-11e7-813c-357ee9494075';
    savedVisualizations.get(visId).then(savedVis => $scope.savedObj = savedVis);
});

My html:

<div ng-controller="KbnTestController" class="test_vis">
  <visualize saved-obj='savedVis'></visualize>
</div>

Thanks in advance.

[thomasneirynck]

hi @havidarou

hard to tell from the code what's going wrong.

Instead of using the angular-directive, could you instead use the ui/visualize/loader module to embed a visualization?

You can use the

visualizeLoader.embedVisualizationWithId(container, savedId, params)

to achieve the same effect.

thanks,

[havidarou (Javier Castro)]

Hi @thomasneirynck

I've tried that too.

I'm using repo branch 6.0.

This is my index.js:

import { injectVars } from '../../src/core_plugins/kibana/inject_vars';

export default function (kibana) {

  return new kibana.Plugin({
    uiExports: {
      app: {
        title: 'Test Visualize',
        description: 'Test vis dddd',
        main: 'plugins/test_visualize_app/test_vis_app',
        uses: [
          'visTypes',
          'visResponseHandlers',
          'visRequestHandlers',
          'visEditorTypes',
          'savedObjectTypes',
          'spyModes',
          'fieldFormats',
        ],
        injectVars
      }
    }
  });
}

This is my whole controller:

'use strict';

import $ from 'jquery';
import { SavedObjectRegistryProvider } from 'ui/saved_objects/saved_object_registry';
import { VisProvider } from 'ui/vis';
import { VisualizeLoaderProvider } from 'ui/visualize/loader';

require('ui/autoload/all');
require('ui/routes').enable();
require('ui/chrome');
require('ui/visualize');

const app = require('ui/modules').get('apps/test_visualize_app', []);


require('ui/routes')
  .when('/', {
    template: require('./test_vis_app.html'),
    reloadOnSearch: false,
  });

app.controller('TestVisApp', function (
  $compile,
  $scope,
  $timeout,
  AppState,
  config,
  Private,
  timefilter,
  savedVisualizations
) {

  const services = Private(SavedObjectRegistryProvider).byLoaderPropertiesName;
  const visualizationService = services.visualizations;
  const visualizeLoader = Private(VisualizeLoaderProvider);

  const fetchItems = () => {
    visualizationService.find()
      .then(result => {
        $scope.savedVisualizations = result.hits;
      });
  };

  const visContainer = $('.test-vis-app-visualize');
  const timeRange = {
    min: '2017-09-01T00:00:00.000Z',
    max: '2017-10-31T00:00:00.000Z'
  };

  $scope.$watch('selectedVisualization', (visualizationId) => {
    if (!visualizationId) return;
    visualizeLoader.embedVisualizationWithId(visContainer, visualizationId, {
      timeRange: timeRange
    }).then(() => {
      console.log('renderComplete!');
    });
  });

  $scope.savedVisualizations = [];
  $scope.selectedVisualization = null;

  fetchItems();
});

And this is my html:

<div class="test-vis-app app-container" ng-controller="TestVisApp">

  <div class="test-vis-app-selector">
    <select ng-options="item.id as item.title for item in savedVisualizations" ng-model="selectedVisualization"></select>
    rendering: {{renderVisualization}}
  </div>
  <div class="test-vis-app-visualize"></div>
</div>

The selector successfully shows my saved visualizations:

And after you select a visualization the console shows the tabify response with the print after rendering is complete:

As I mention before, the HTML code get expanded, but nothing shows up in the screen:

[ppisljar (Peter Pisljar)]

could you put your whole plugin to github ?

i am guessing you are missing some styles ... visualize requires flex display:

.test-vis-app-visualize, visualize, visualization {
 display: flex;
 flex: 1 1 100%;
}

[havidarou (Javier Castro)]

Hi @ppisljar,

I'm using the following less file with the same result:

 @import (reference) "~ui/styles/mixins.less";

.test-vis-app {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
}

.test-vis-app-visualize, .test-vis-app-visualization, visualize, visualization {
  display: flex;
  flex: 1 1 100%;
}

P.S.: the Kibana branch is 6.0

And this is the whole plugin: https://uploadfiles.io/fpxbe