Real-Time Data Revamp - Creating Bin Status Bars.

This is a mockup Mars came up with for replacing the bin status page. This replacement for the bin status page is called the "Real time data page". The reason why we are changing the name of this page and putting these new data visualizations there is because earlier on, we weren't completely sure how to visualize real time data. We believe its best that real time data is shown as statistics rather than in graph form, so this new page will represent that idea.

Mockups:

This is what the Bin Status page looks like now:

Your task is to implement a subset of this page revamp-- just the Bin Status Bars.

The Bin Status Bars range from 0 to 100%. They show the fullness rate (which is hardcoded at the moment).

For now, focus on having it look like the mockup. The colors represent what type of data it is showing (compost, recycling, landfill) and they are clickable. Upon click, they show more details (as seen in the screenshot). For now, hardcode all of these values. Ask @uci-mars for recommendations on what libraries to use in completing this task.

Also, keep the page's name the same (Bin Status). You can also add the Bin Status Bars below the leaderboard that is currently on the page, or comment out the leaderboard entirely. We will probably remove this feature as I don't foresee us supporting a social feature within the near future.

Let me know if I can clarify anything!

What you are focusing on in this task:

Deadline: END OF QUARTER.

zotbins / ZotBins-Management-Client

Real-Time Data Revamp - Creating Bin Status Bars. #43