search

visualize-admin / visualization-tool

The tool for visualizing Swiss Open Government Data. Project ownership: Federal Office for the Environment FOEN
https://visualize.admin.ch
BSD 3-Clause "New" or "Revised" License
29 stars 3 forks source link

Dashboard tiles layout #1520

Closed ptbrowne closed 1 month ago

ptbrowne commented 1 month ago

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.

vercel[bot] commented 1 month ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
visualization-tool ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 21, 2024 8:13pm
ptbrowne commented 1 month ago

Fantastic work, I am amazed how well this works ✨ 👏

Thanks 😊

I wonder if drag handles like in other layouts wouldn't make this more coherent?

Yes I will look into that, thanks for the feedback.

I managed to make an invisible scatterplot (first chart)

Yes, not sure if it should be solved. I think people would be aware yes :)

ptbrowne commented 1 month ago

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 👍

ptbrowne commented 1 month ago

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 :/