Skip to content

Commit

Permalink
update visualize development docs (#20507)
Browse files Browse the repository at this point in the history
  • Loading branch information
ppisljar authored Jul 9, 2018
1 parent fffa3d4 commit dfeb947
Showing 1 changed file with 2 additions and 49 deletions.
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
[[development-embedding-visualizations]]
=== Embedding Visualizations

There are two different methods you can use to insert a visualization in your page.

To display an already saved visualization, use the `VisualizeLoader`.
To reuse an existing visualization implementation for a more custom purpose,
use the Angular `<visualization>` directive instead.
To embed visualization use the `VisualizeLoader`.

==== VisualizeLoader

Expand Down Expand Up @@ -58,47 +54,4 @@ The returned `EmbeddedVisualizeHandler` itself has the following methods and pro
- `removeRenderCompleteListener(listener)`: removes an event listener from the handler again

You can find the detailed `EmbeddedVisualizeHandler` documentation in its
{repo}blob/{branch}/src/ui/public/visualize/loader/embedded_visualize_handler.js[source code].

We recommend *not* to use the internal `<visualize>` Angular directive directly.

==== `<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` <string>: the indexPattern you want to pass to the visualization
- `visConfig` <object>: the configuration object
- `uiState` <object>: 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
`<visualization>` will create its own (but you won't be able to check its values)

*code example: create single metric visualization*
["source","html"]
-----------
<div ng-controller="KbnTestController" class="test_vis">
<visualization vis='vis' vis-data='visData'></visualize>
</div>
-----------
["source","js"]
-----------
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.
{repo}blob/{branch}/src/ui/public/visualize/loader/embedded_visualize_handler.js[source code].

0 comments on commit dfeb947

Please sign in to comment.