Create a Dashboard

The ‘Create a Dashboard’ utilises a combination of the react-grid-layout and react-beautiful-dnd libraries to allow sections and widgets to be added to the dashboard layout.

Each section added to the dashboard is made up of a single react-grid-layout grid. The grid layout is expected to be in a particular format for react-grid-layout to display the layout properly. This format contains the width and height of each widget, along with the x and y placement of the widget in the grid, for example:

// Grid layout for breakpoint size 'Medium'

md: [
    { i: "widget1", x: 0, y: 0, w: 2, h: 2 },
    { i: "widget2", x: 0, y: 2, w: 2, h: 2 },
    { i: "widget3", x: 2, y: 0, w: 4, h: 2 }
]

The configuration above would translate to the following layout at the 'Medium' breakpoint:

When a dashboard is saved, we need to convert this format to the format that the Section Dashboard can read and translate into grid layout, which is a string based on css grid. The string for the layout above would look like this:

'widget1 widget1 widget2 widget2'
'widget1 widget1 widget2 widget2'
'widget3 widget3 widget3 widget3'
'widget3 widget3 widget3 widget3'

This is the format that we save to the database ready to be able to display the dashboard in the browser. We have to save a formatted string for each breakpoint size, depending on the layout chosen by the user at each breakpoint in the ‘Create a Dashboard’ page. We have two helper functions that handle the conversion back and forth between these two formats:

• parse-grid-areas - Converts the react-grid-layout object into a grid layout string ready to save to the database.
• parse-grid-layouts - Converts the grid layout string saved in the database back into a react-grid-layout layout object to be displayed in the browser.