Kibana Custom visualisation plugin resize issue

Elastic Stack Kibana
1

Hi I am developing a custom plugin for visualisation, but the issue is that in the dashboard when I resize the plugin, the size of my visualisation doesn't change with the container.

As an alternative I've set a watcher on the draggable container's CSS as whenever the height or width of the container changes, it pipes the values to my plugin and size of my visualisation changes, but it takes an instance of only one container and if there are multiple similar visualisations in the same dashboard then they will be resizing based on one container only. So this is not working out well and also isn't appropriate.

Apart from this I am also watching appstate in which I can get some values in this form :

{
"title": "New Dashboard",
"panels": [
{
"id": "aaaa",
"type": "visualization",
"panelIndex": 1,
"size_x": 7,
"size_y": 2,
"col": 1,
"row": 1
},
{
"id": "Testing21sep2017",
"type": "visualization",
"panelIndex": 2,
"size_x": 3,
"size_y": 2,
"col": 8,
"row": 1
},
{
"id": "test",
"type": "visualization",
"panelIndex": 3,
"size_x": 6,
"size_y": 2,
"col": 1,
"row": 3
}
],
"options": {
"darkTheme": false
},
"uiState": {},
"query": {
"query_string": {
"query": "*",
"analyze_wildcard": true
}
},
"filters": []
}

I can use the size_x and size_y inside panels but can't map it with a value where I can detect that this is my custom visualisation's object.

Please help me out.

2

Hi @PRANSHU_MIDHA,

We can definitely help you with that.

@thomasneirynck will add some more information later today.

Thanks,
Chris

3

Thank you @chrisronline . I'll be looking forward to it.:smiley:

4

Have you tried to simply set the Visualization Width/Height to 100%?

5

Hi @JuanCarniglia, I am actually using a directive for my visualisation which only takes integer as an input so giving height and width 100% won't be an option for me. You can check the directive I am using here : jQCloud

6

Ok, it was just a thought. Maybe you can get that integer by querying the
width/height of its parent (Something like varwidth = parseInt($(
"#visualizationid").parent().width()); and then use that.

7

Well that's an idea, I'll surely try it.

8

HI @JuanCarniglia, I just tried what you said, but when I add two visualisations in same dashboard, it still takes height and width of one parent only and resizes both according to it.

9

When you declare your directive, you surely are passing a $element object.
Use this object as the root element of the visualization (to get the width
/ height).

10

I am not doing that right now, but will try for sure.

11

Hi @PRANSHU_MIDHA,

if you're writing a plugin as a angular controller, you can listen to the 'resize' event on the scope. You can see an example of that here: https://github.com/thomasneirynck/kibana/blob/185fb4cc1a5e9740a218ebc809cc61c847c09e3c/src/core_plugins/tagcloud/public/tag_cloud_controller.js

thanks,

12

Hi @thomasneirynck , I tried to watch the resize event in scope but it works only when visualisation is loaded, otherwise it is not working.

13

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.