Register
Submit a solution
The challenge is finished.

Challenge Overview

Welcome to the Analytics Dashboard - Create New Widget Contest. As part of this contest, you need to create a new fully functional widget to be used in our Analytics Dashboard application.

 

This contest has been relaunched where we have reduced the scope of the contest and will launch another contest after this one ends to complete the functionality.

 

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

Our Analytics Dashboard application currently has the following features:

  1. Supports two languages - English and French

  2. Uses HTML5 local storage to store user configurations

  3. Setting up the layout and re-arranging the widgets.

 

Until now, all widgets were dummy widgets. We had the Weather widget that could be added but even that was not fully functional.

 

As part of this contest, we want you to create a fully functional widget named the Retail Pricing widget. This widget can be used to display different views of retailer pricing data. You will find further details regarding the new widget in another document that we will share in the contest forum. For this contest, only the following are in scope:

  1. Small display mode

  2. Mobile display mode

  3. Widget Creation / Add Widget screen

  4. Widget Details Screen (List View only).

 

Graphs and full display are not in scope for this contest. It will be taken up in the next contest.

 

Kindly note the following:

  1. In the Add New Widget page, specify the first option as the Retail Pricing Widget. Reference image: http://i.imgur.com/zlI1WxF.jpg. Clicking on it should open the configuration page for that widget. See the shared document for the different possible configurations. Make sure that you reuse the existing UI elements and that your changes fit in with the theme of the application.

  2. You need to allow the widget to be resized. Click on the gear icon for any widget and then click on Resize to get the available options. Make sure that the widget expands responsively when selecting different sizes. Adjacent widgets need to move around appropriately on resize to accommodate the resized widget. Only 1x1, 1x2 and 2x1 are in scope for this contest (list view only, no graphs / no 2x2 view)

  3. When creating the configuration page for the widget, make sure that you provide French translations too. Use the existing translation tools to carry this out. The README file contains more information on adding new translations. For entering the Widget Name, please sure that you ask the user to enter the name both in English and French.

  4. When the widget is added, make sure to save the widget in the user’s configuration. Again, see how the existing widgets, their sizes and positions are stored and follow the same.

  5. The widget contains a details page too which is displayed when clicked on the “>” icon for that widget. See the shared document for the content to show in this page.

  6. The widget has a mobile view too. Again, refer to the shared document.

  7. The performance of the web app should not deteriorate when reading the provided data. The page should continue to load smoothly and none of the executing javascript should block the page load.


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.

ELIGIBLE EVENTS:

2016 TopCoder(R) Open

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30053695