mirror of
https://github.com/elastic/kibana.git
synced 2025-06-28 11:05:39 -04:00
update visualize development docs (#20507)
This commit is contained in:
parent
fffa3d4fac
commit
dfeb947d20
1 changed files with 2 additions and 49 deletions
|
@ -1,11 +1,7 @@
|
||||||
[[development-embedding-visualizations]]
|
[[development-embedding-visualizations]]
|
||||||
=== Embedding Visualizations
|
=== Embedding Visualizations
|
||||||
|
|
||||||
There are two different methods you can use to insert a visualization in your page.
|
To embed visualization use the `VisualizeLoader`.
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
==== VisualizeLoader
|
==== VisualizeLoader
|
||||||
|
|
||||||
|
@ -59,46 +55,3 @@ The returned `EmbeddedVisualizeHandler` itself has the following methods and pro
|
||||||
|
|
||||||
You can find the detailed `EmbeddedVisualizeHandler` documentation in its
|
You can find the detailed `EmbeddedVisualizeHandler` documentation in its
|
||||||
{repo}blob/{branch}/src/ui/public/visualize/loader/embedded_visualize_handler.js[source code].
|
{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.
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue