Getting width/height of a component in pixels

Hi,

I am trying to use a D3 heatMap as a vaadin component. I have been able to achieve this, however I am facing issues in having a resizable component.
If I set the hight and width of the component in percentage in the component, the same is retrieved in the js and I am unable to convert it into pixels.
eg:
HeatChart chart = new HeatChart();
chart.setWidth(“100%”);
chart.setHeight(“50%”);

Is there a way I can convert these measures in pixel before sending to the javascript(client -side). Can someone expalin how this is achieved in Vaadin Charts?

Hello, I’m not sure that I exactly get your question, so I got two answers :slight_smile:

If you want to set width of any Vaadin Component in pixels just use setWidth(“400px”).
So in your case Chart chart = new Chart(ChartType.BAR); chart.setWidth("400px"); chart.setHeight("300px");
If you want to set size in percentage and then get it in pixels, then there is already a thread about it

https://vaadin.com/forum/#!/thread/349278/4300255

There is also and add-on
https://vaadin.com/directory#addon/sizereporter

Thanks for your answer Dmitrii… I am looking for the second option…where the application can provide a relative size(in percentage), however when that gets passed to the client-side js, it is converted in pixels as svg elements don’t work on percentage. I will have a look at that thread.
Thanks!

Hi Dmitrii,
I tried the addon but it is not of much help in my case.
Let me rephrase my problem: As stated earlier I set the size in PERCENTAGE.

MyChart chart = new MyChart ();
chart.setWidth("100%");
chart.setHeight("50%");

In my [b]
JS
[/b] when I retrieve the value using
var width = this.getState().width;

output is : 100% (or if I use parseInt(width): 100). it doesn't return the pixeled value.

Am I doing something wrong?