Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update visualize development docs #20507

Merged
merged 2 commits into from
Jul 9, 2018
Merged

update visualize development docs #20507

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
41bd267
clean up visualize docs
ppisljar Jul 6, 2018
cb70b4c
removing mention of visualize directive in docs
ppisljar Jul 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 2 additions & 49 deletions docs/development/visualize/development-embedding-visualizations.asciidoc
View file
Open in desktop
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].