More flexible widgets grid (allow finer control over height/width)

User should be able to control widget’s placement, width and height

Current implementation

Currently editing a dashboard works as follow:

1. When adding a widget you select its width: regular (half width) or double (full width). Height is set based on the content.
2. When opening the “Edit Dashboard” dialog, you can rearrange the order of the widgets.

Issues with the current approach:

• You can’t change widget size after placing it.
• You can’t change widget’s height.
• You can’t control widget’s width beyond the current two options.

Solution

To solve this we want to have a flexible (but still responsive) grid that the user can freely place and move widgets on.

• Each visualization will define minimum width and height sizes (derived from the visualization type). This will be the default sizes for the widget when placed on the grid, but the user will be able to resize it to be larger (but not smaller) afterwards.
• Once entering dashboard “edit mode”, the user will be able to move around and resize the widgets in place instead of a dedicated UI.
• We should probably change other behaviors in the UI (move add widget to be part of the edit mode, change dashboard title editing to be in place, etc), but we will leave it to second iteration after the grid behavior is implemented.

Technical Notes

• We currently use angular-gridster to allow moving around the widgets in the Edit Dashboard dialog. Maybe we can use it for the grid or a similar library.
• Currently the widget knows nothing about its placement, but only its size (width). The dashboard has a layout property, which is an array of arrays of widgets ids (each item in the array is a row/array of widgets). This is error prone and makes layout changes harder. If possible, it will be better if each widget retains its own placement information.
• The API to update a widget currently supports only updating a textbox widget. We will need to extend it to support all widget types.

[pdfforge]

This is open for some time now, any plans on implementing this? We would love it!

[arikfr]

As this feature is going to be implemented soon, I’ve updated the details. Feel free to comment.