mirror of
https://github.com/elastic/kibana.git
synced 2025-04-25 18:27:59 -04:00
146518cab7
This commit accompanies the four that precede it. Rather than squash them altogether, the four previous commits all do nothing except move files to help avoid conflicts.
58 lines
No EOL
2.9 KiB
Text
58 lines
No EOL
2.9 KiB
Text
[[development-embedding-visualizations]]
|
|
=== Embedding Visualizations
|
|
|
|
To embed visualization use the `VisualizeLoader`.
|
|
|
|
==== VisualizeLoader
|
|
|
|
The `VisualizeLoader` class is the easiest way to embed a visualization into your plugin.
|
|
It will take care of loading the data and rendering the visualization.
|
|
|
|
To get an instance of the loader, do the following:
|
|
|
|
["source","js"]
|
|
-----------
|
|
import { getVisualizeLoader } from 'ui/visualize/loader';
|
|
|
|
getVisualizeLoader().then((loader) => {
|
|
// You now have access to the loader
|
|
});
|
|
-----------
|
|
|
|
The loader exposes the following methods:
|
|
|
|
- `getVisualizationList()`: which returns promise which gets resolved with a list of saved visualizations
|
|
- `embedVisualizationWithId(container, savedId, params)`: which embeds visualization by id
|
|
- `embedVisualizationWithSavedObject(container, savedObject, params)`: which embeds visualization from saved object
|
|
|
|
Depending on which embed method you are using, you either pass in the id of the
|
|
saved object for the visualization, or a `savedObject`, that you can retrieve via
|
|
the `savedVisualizations` Angular service by its id. The `savedObject` give you access
|
|
to the filter and query logic and allows you to attach listeners to the visualizations.
|
|
For a more complex use-case you usually want to use that method.
|
|
|
|
`container` should be a DOM element (jQuery wrapped or regular DOM element) into which the visualization should be embedded
|
|
`params` is a parameter object specifying several parameters, that influence rendering.
|
|
|
|
You will find a detailed description of all the parameters in the inline docs
|
|
in the {repo}blob/{branch}/src/legacy/ui/public/visualize/loader/types.ts[loader source code].
|
|
|
|
Both methods return an `EmbeddedVisualizeHandler`, that gives you some access
|
|
to the visualization. The `embedVisualizationWithSavedObject` method will return
|
|
the handler immediately from the method call, whereas the `embedVisualizationWithId`
|
|
will return a promise, that resolves with the handler, as soon as the `id` could be
|
|
found. It will reject, if the `id` is invalid.
|
|
|
|
The returned `EmbeddedVisualizeHandler` itself has the following methods and properties:
|
|
|
|
- `destroy()`: destroys the embedded visualization. You MUST call that method when navigating away
|
|
or destroying the DOM node you have embedded into.
|
|
- `getElement()`: a reference to the jQuery wrapped DOM element, that renders the visualization
|
|
- `whenFirstRenderComplete()`: will return a promise, that resolves as soon as the visualization has
|
|
finished rendering for the first time
|
|
- `addRenderCompleteListener(listener)`: will register a listener to be called whenever
|
|
a rendering of this visualization finished (not just the first one)
|
|
- `removeRenderCompleteListener(listener)`: removes an event listener from the handler again
|
|
|
|
You can find the detailed `EmbeddedVisualizeHandler` documentation in its
|
|
{repo}blob/{branch}/src/legacy/ui/public/visualize/loader/embedded_visualize_handler.ts[source code]. |