Analytics Dashboard - Configurations and Widget Layout

Welcome to the Analytics Dashboard - Configurations and Widget Layout contest. This contest is to update an existing application with configurations based on HTML5 LocalStorage and to work with Widget Layouts.

 

Project Overview

The Analytics Dashboard site will serve as a tool for users to build, configure and monitor a dashboard of data, statistics and analytics for their specific industry. It will be used by industry professionals and will contain charts, graphs, analytics, statistics etc that will allow the user to make more informed decisions and monitor trends throughout their specific industry. The dashboard will be designed around a series of user configurable widgets.

 

Contest Details

We have already created a UI Prototype for our application. This is a Proof-of-Concept application and as such does not have any backend. For this contest as well, we would like you to completely work on the frontend alone. Do not create any backend for this application.

 

For this contest we would like you to create the following:

1. Come up with a suitable data structure to store information per user

2. Provide a drag and drop feature where existing widgets can be dragged and dropped and the page layout can be updated.

 

Come up with a suitable data structure to store information per user

The following information can be configured for each user of the application:

1. Pages in the dashboard

2. Sub - Pages or rather Tabs in each page

3. Widgets in each Tab

4. The location or rather position of each widget in the tab that forms the layout of the tab. Note that the layout of the tab will always be two columns and multiple rows.

5. The size of each widget. Each widget can occupy one row and one column, two rows and one column, two columns and one row and two rows and two columns. Some widgets may not even allow all four sizes.

 

We would like you to come up with a data structure to capture all the above configurations. We would then like you to create two users and associate these configurations for each user. Store this configuration in the HTML5 LocalStorage of the browser per user.

 

Note that currently, the app allows only single user to log in. Create two users for this use case. Also note that the Page names, the Tab names and the Widget names need to have their respective translations for English and French. Currently, you can assume that only English Text is available but make sure that you capture that the texts are in English.

 

Finally, use the current Pages, Tabs and Widget configuration as default for each user. You can add and remove widgets too so make sure that the updates are captured as well.

 

Provide a drag and drop feature where existing widgets can be dragged and dropped and the page layout can be updated.

When you click on the Gears icon for any existing widget, you will get the “Move” option. Clicking on this should allow the user to move the widget anywhere within the same page.

Thus, provide a feature to allow the widgets to be dragged and dropped anywhere in the same page to update the page layout.

 

Note that in case you move a widget to a place where there already exists a widget, the existing widget should be moved accordingly and the new widget should take its place. There are other scenarios where if a row does not have any widget, it should collapse. This should function similar to how you can move around apps in Android or iOS or WIndows Phone devices. Follow the same scenarios here not just for the ones mentioned but for all possible move and replace functions.

 

Points to Note

1. Currently, the existing configurations are stored in JSON files. Remove them and make sure that you store this information only in the browser’s HTML5 LocalStorage. You can use a single JSON file to contain the default configurations, in case that user does not have any configuration in the HTML5 LocalStorage.

2. The app currently allows English and French versions. These should continue to work as expected. Make sure that you capture the language the texts for the Pages, Sub Pages, Widget names etc are in.

3. The widgets are of different sizes. When moving them around, make sure to take it into consideration and move any adjacent widgets accordingly.

 

Final Submission Guidelines

Upload your submission as a .zip file to the Submit and Review tool for this contest. Please make sure that you have met all requirements outlined above. The winner will be asked to create a pull request to the project repository.