mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
parent
992dc10193
commit
874e4dd0f8
3 changed files with 16 additions and 71 deletions
|
@ -1,58 +0,0 @@
|
|||
[[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].
|
|
@ -1,21 +1,26 @@
|
|||
[[development-visualize-index]]
|
||||
== Developing Visualizations
|
||||
|
||||
Kibana Visualizations are the easiest way to add additional functionality to Kibana.
|
||||
This part of documentation is split into two parts.
|
||||
The first part tells you all you need to know on how to embed existing Kibana Visualizations in your plugin.
|
||||
The second step explains how to create your own custom visualization.
|
||||
|
||||
[IMPORTANT]
|
||||
==============================================
|
||||
These pages document internal APIs and are not guaranteed to be supported across future versions of Kibana.
|
||||
However, these docs will be kept up-to-date to reflect the current implementation of Visualization plugins in Kibana.
|
||||
These pages document internal APIs and are not guaranteed to be supported across future versions of Kibana.
|
||||
==============================================
|
||||
|
||||
* <<development-embedding-visualizations>>
|
||||
* <<development-create-visualization>>
|
||||
The internal APIs for creating custom visualizations are in a state of heavy churn as
|
||||
they are being migrated to the new Kibana platform, and large refactorings have been
|
||||
happening across minor releases in the `7.x` series. In particular, in `7.5` and later
|
||||
we have made significant changes to the legacy APIs as we work to gradually replace them.
|
||||
|
||||
As a result, starting in `7.5` we have removed the documentation for the legacy APIs
|
||||
to prevent confusion. We expect to be able to create new documentation later in `7.x`
|
||||
when the visualizations plugin has been completed.
|
||||
|
||||
include::development-embedding-visualizations.asciidoc[]
|
||||
We would recommend waiting until later in `7.x` to upgrade your plugins if possible.
|
||||
If you would like to keep up with progress on the visualizations plugin in the meantime,
|
||||
here are a few resources:
|
||||
|
||||
include::development-create-visualization.asciidoc[]
|
||||
* The <<breaking-changes,breaking changes>> documentation, where we try to capture any changes to the APIs as they occur across minors.
|
||||
* link:https://github.com/elastic/kibana/issues/44121[Meta issue] which is tracking the move of the plugin to the new Kibana platform
|
||||
* Our link:https://www.elastic.co/blog/join-our-elastic-stack-workspace-on-slack[Elastic Stack workspace on Slack].
|
||||
* The {repo}blob/{branch}/src/plugins/visualizations[source code], which will continue to be
|
||||
the most accurate source of information.
|
||||
|
|
|
@ -58,8 +58,6 @@ You can also nest these aggregations. For example, if you want to produce a thir
|
|||
|
||||
{ref}/search-aggregations-pipeline-serialdiff-aggregation.html[Serial diff]:: Values in a time series are subtracted from itself at different time lags or periods.
|
||||
|
||||
Custom {kib} plugins can <<development-visualize-index, add more capabilities to the default editor>>, which includes support for adding more aggregations.
|
||||
|
||||
[float]
|
||||
[[visualize-sibling-pipeline-aggregations]]
|
||||
=== Sibling pipeline aggregations
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue