Is there a way to dynamically add elements to canvas?

Elastic Stack Kibana
1

Recently, I have been experimenting with Canvas on Kibana 6. The fact that one can use essql for filtering data and the elements are tweakable from the "expression editor" is awesome.

I am now wondering if there is a way to dynamically set the layout of the page. As an example, I would like to make a page that adds a timelion for each of my servers separately. But since the number of those servers change over time, I want to be able to make a template that is added dynamically based on the data I couple it too. I have a hunch that this should be possible to do through the "Global CSS overrides" but I cannot find any documentation regarding this.

1 Like
2

This is something I'd also be interested in.

It seems like this should be possible since the Image Repeat element type seems to dynamically add elements, but I don't think Canvas does this out of the box

3

@acalypha @rozling we don't currently have this functionality but we've been discussing data-driven layout features including

  1. data-driven element creation (think "small multiples" charts where the element count is dependent on how many countries are filtered)
  2. data-driven element positioning (location, width/height, orientation)

I'd encourage the creation of a github issue at https://github.com/elastic/kibana/issues (choose Feature Request) for this to raise the visibility of this. If someone has a support contract, it's worth asking for this feature via support too.

2 Likes
4

Will do via both channels. My feature request laundry list is growing, but I'm not sure if we're a big enough customer to make a difference really :slight_smile:

I'm sure this is out of scope but it would be incredible to have something approaching the level of data <-> dom interaction that d3 has. It feels like a lot of the necessary elements are already in place.

Having said that, I still haven't learned Vega yet, so that's an option, but I think it's not possible to bring Vega visualizations into Canvas?

5

While I'm in no position to commit to future feature additions, we're already prototyping internally with, for example, Vega.

1 Like
6

HI monfera,

Thanks for the reply - sounds like fun. I actually only realised after posting that Vega is / might be related to D3; can you confirm if it uses D3 under the hood?

7

Vega itself is pretty modular and its mandatory runtime backbone (vega-transforms etc.) don't depend on D3, but in typical uses, absolutely! Many of its most often used modules depend on various substantial parts of D3 such as vega-scale, vega-scenegraph etc. and specific ones too like vega-force, vega-voronoi, vega-projection. It doesn't use d3-selection for DOM updates though.

Has a gh issue been created? Haven't found it on a cursory look.

8

That's interesting, although a shame re the d3-selection - I'll dig in and see how far I get.

I haven't had a chance to create the feature request on github yet, but will do asap!

9

After all, the data binding as done by D3 is but one way for keeping data and a scenegraph (DOM tree) in sync, Mike Bostock also recognizes the alternatives. For example, the React model of just restating the scenegraph in function of the data and not worrying about the consequences (using diffing etc. to still enable a decent speed) is popular and React-like libraries and Svelte follow something similar too.

10

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