Introduction

In the current digital landscape, the integration of dashboards into web applications is a prevalent trend. These dashboards serve as a pivotal tool for presenting users with an insightful summary of crucial data and Key Performance Indicators (KPIs). Examples include sales statistics, user traffic analytics, cash flow, or Lifetime Value (LTV) metrics. Typically, these dashboards are designed during the initial design and discovery phase of the application and are static in nature. However, offering dynamic or personalized dashboards significantly enriches the user experience. Such dashboards adapt to display user-specific data and allow interactive exploration, presenting a unique view based on individual user needs or roles. From a technical perspective, this feature poses a considerable challenge, since it demands the development team to proficiently handle the generation of semi-customized charts and graphs. These visualizations must not only represent data effectively from diverse sources but also need to be flexible enough to accommodate user interactions and customizations. This dynamic approach to dashboard design is a stride towards more user-centric web applications, enhancing both engagement and utility.
‍

In this article we are going to describe how we implemented this kind of concrete solution for one of our customers.

‍

Problem and Solution

First thing first, we needed a technical way of ensuring that a user will have a dynamic dashboard building experience within our base frontend technology - React. The tool we chose was React Grid Layout, due to its simplicity, flexibility and previous experience we had working with it.

Introducing React Grid Layout

React Grid Layout is a layout system that allows to dynamically accommodate general React components within a predefined grid in runtime. Installing it is as simple as running the following commands (assuming that your trusted tool is yarn, you can use npm as well)

Then, we need to import it in the project and set up an initial layout constraint

The previous code sets up a basic responsive grid layout that allows droppable items. Now, let’s start setting up the layout model and adding some items.

Adding dashboard items and handling changes

First we define the dashboard type which will abstract our implementation. Keep in mind this is a simple view of how a dashboard item could be defined.

Basically, a dashboard will be composed of a title and a set of items and their corresponding layout specs. For each item in the dashboard, we have an item in both arrays in which:

• layout[i] represents where the element is located in the grid
• items[i] represents the content of the item being rendered

Let's have a look to the layout type first

Here we set the basic elements that define a dashboard item layout:

• the id of the item corresponding to the position it will occupy on the <GridLayout /> (i property), 
• x and y are the coordinates of the element on the grid, 
• w and h are the column-span and row-span respectively. 

‍

We defined these properties following the library naming convention - the property names are chosen based on what exactly React Grid Layout expects.

Now let's dig into the structure for each item

This is a simplified version of the real entity but it contains the most important properties:

• We define a content (can be any content that can be transformed into a React component and stored into the grid
• A layout Item property which links the content to a specific id within the dashboard, so after the React component is built from the spec, we know exactly where it needs to be located

‍

An example of a Dashboard with two items using the defined entities:

With this we’ve set up all necessary entities on the frontend side. Now let’s set the grid to handle the possible events. Let’s start setting up the initial (clean) dashboard and fetching it from the backend via some arbitrary function.

The second step is to integrate the layout and items to the grid

What we have now is a static dashboard. Now let’s allow to handle changes from the UI: we add a default drop item and start handling layout changes

What we have now is a completely dynamic dashboard that allows new items to be dropped and dynamically added. By adding a removal and save capabilities, our full-fledged dynamic dashboard will be ready to go - we will omit this for the sake of simplicity in this article.

Conclusion

React-grid-layout simplifies the process of creating dynamic dashboards with draggable and resizable components. By following the steps outlined in this post, you can easily integrate this library into your React project and build flexible, responsive dashboards for data visualization and user interaction. At Ensolvers, we've used this library to provide customizable dashboards on different projects.