Dashboard rows with charts confusion

Flow
1

Hi all - I’m looking for guidance on Dashboards with widgets containing charts. I seem to have two issues:

  1. I’d really like to define fixed height rows of 25% of visible space and use row span to allow for various sizes that are multiples, but the enclosed charts seem to be imposing some sort of highcharts default height of 400px.
  2. possibly related is that I can, in edit mode, change the tile widths and the charts inside refresh, but changing the heights (really, rowspan) does not redraw the charts inside.
2

Might be related to Charts ends up in a reflow loop · Issue #10316 · vaadin/web-components · GitHub and Chart size increases after expanding by adding to dialog and reinserting into dashboard widget · Issue #9886 · vaadin/web-components · GitHub

TLDR: would be best to create a ticket

3

You can’t really define the Dashboard’s row height in percentages, since the Dashboard is designed to scroll vertically (and thus doesn’t really have a height of its own).

I created a feature ticket about introducing an API for setting a fixed row height, which would solve this issue partially (but would not make it possible to define that height to be 25% of the Dashboard’s height, which would still be determined by its contents): Dashboard fixed row height · Issue #10943 · vaadin/web-components · GitHub

4

Hmm - I’ve got far from a minimal example, but I’m finding some of the examples in refactor!: prevent vaadin-chart from expanding parent containers by tomivirkki · Pull Request #10366 · vaadin/web-components · GitHub suspiciously similar.

@rofa - ugh. fair enough. What I really want is % of the visible viewport height. I don’t need to worry about mobile, but I definitely have variation in physical screen sizes across users but would like as consistent a UX as possible.

Here’s the UX I want: user selects 8 charts to appear in the dashboard. The default arrangement should result in four rows of two charts each such that the first four charts fit nicely on the visible half of a scrolling dashboard panel. If they edit the layout, they can rearrange and shrink or enlarge the charts along nicely snapping sizes and in all cases, the enclosed charts should resize to match the widget size exactly.
I’ve set maxcolumncount to 6 so that I can have 1,2,3,or 6 charts across. But widget and chart heights misbehave in a variety of ways.

5

Hmm, actually you should be able to achieve 50% of the page viewport height by setting the minRowHeight to “50vh”. The reason “50%” doesn’t work is that the css grid that handles the layout doesn’t have a defined height, but with viewport units that doesn’t matter.

1 Like