Dashboard tiles layout #1520
Dashboard tiles layout #1520
Conversation
They are handled via children by react-grid-layout, so we need to drill them and display them
- chart states functions do no need the aspect aspectRatio and rely on their container aspect ratio - chart containers will control the aspect ratio - dashboard grid layout chart container will not control aspect ratio
…for provider wrap assertion works correctly
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Fantastic work, I am amazed how well this works ✨ 👏
While playing around with the deployment preview, I've noticed two things:
- it's almost impossible to interact with the chart in the Tiles Dashboard (e.g. switch to table chart or opening the metadata panel). It seems to work when I click and hold, drag the chart a bit, and then release 😅 I wonder if drag handles like in other layouts wouldn't make this more coherent?
tiles.layout.1080p.mov
- I managed to make an invisible scatterplot (first chart) – I guess it's not a big issue, as creators will see what they publish beforehand, but still this is not possible for line or column chart 👀
Thanks 😊
Yes I will look into that, thanks for the feedback.
Yes, not sure if it should be solved. I think people would be aware yes :) |
|
I could add the drag handle and react-grid-layout has a option so that only elements matching a particular class name are used for drag 👍 |
|
Checked the red tests and they work locally (apart from an old config which uses a datasets for which there are duplicated cubes on int). Sometimes we need to find out why we have those flaky tests :/ |
Tiles layout
In this PR is implemented the tiles layout where the user can move and resize the charts at will.
It makes use of react-grid-layout under the hood and the react grid layouts are saved under
the chart config.
To be able to have charts inside blocks that are resizable, I had to change how the aspect ratio
was dealt with within the charts: previously the charts would all have an aspect ratio (deep
within them), and would compute their height based on this. This would make it impossible to
have charts inside fixed boxes, since the height of the chart could overflow the box because
of the aspect ratio.
This is why I had to remove the constrain of aspect ratio for the dashboard tiles layout. This
was done through the removal of the aspect ratio in all charts. Now they all render based
on the available space they have.
To keep the previous behavior, the chart container now puts a default "5 / 2" aspect ratio,
which ensures that charts have the same space as before. It would be possible to have
a different aspect ratio for each chart via CSS.
For the dashboard layout, the chart container removes the aspect ratio constraint, and the
chart containers take all the space available.