G2Plot is a charting library developed by the same people as Ant Design. Since we're using Ant Design as our UI framework, switching to G2Plot will help keep the design language consistent.

https://g2plot.antv.vision/en

As someone who has lots of React experience, would love to have your feedback on how we can improve our code base for now and for later devs.

I saw that you added a beautify script, could you explain how it works here and how it would affect the files? @jjchung3

#36

Since we use Ant.Design as our front-end framework, look into https://ant.design/components/card/#components-card-demo-in-column

• Create a new component in the client/src/components/DataVisualization directory
• Create a new index.js (You can look into existing components to use as boilerplate)
• Implement the card feature and style it
• Import into DashboardPage component in client/src/components/Pages/DashboardPage
• Pipe the data using props :)

Since right now, we only have the breakbeam data, we can pass those into the component for the time being.
If you have any questions, lmk!

The Search Bar is the bar which appears on the top of the ZotBins Management Client website

• Implement the Search Bar functionality to take as input the Bin Id, location or Building name and update the dashboard data to show data analytics on the bin that was specified.
• If bin was not found, display "Bin Not found"

The Profile Page will appear when the user clicks on the circular profile icon on the top right corner of the screen.

• Implement Profile page using the following design guideline

• Handle the routing necessary for the Profile Page

The mocked API code. There is some comments there that are useful - https://github.com/zotbins/ZotBinsAPI/blob/master/ZotBinsAPI.py#L349

A sample of an API call - https://zotbins.pythonanywhere.com/mocked/observation/get?sensor_id=ZBin3Di&start_timestamp=2020-02-04&end_timestamp=2020-02-05

The idea is to replace all the hardcoded data values with the mocked data returned from this API.

• Implement the DateRange and Dropdown component on the UI
• Write the logic for onChange to set the component state and refetch data

Please finish this by Sunday 10/18/20 at midnight.

Should be a one page wireframe-- let's just start with something and we will revise it as we communicate with UCI Dining + other facilities management. This is for the "Export to PDF" feature.

I would love some kind of "Key Statistics" page with very easy to look at stats (e.g., average of the month, maximum of the month, minimum of the month). Ideally it has more visuals and less text.

IMO, there is no right or wrong answer to visualize data-- please be as creative as you want. HOWEVER PLEASE USE THE SAME COLORS AS THIS WIREFRAME. Later, I want the web app to be revamped with your UI/UX enhancements. Please note the color codes you use in the Google doc I linked in the Slack (can also find the "Color Codes" doc in Google Drive under "ZotBins Media".

Here are some other ideas I found on Google...

Ex 1:

Ex 2:

This is what we have before:

Its a placeholder and not representative of how we should actually visualize diversion rate.

FYI diversion rate is defined as (recyclables+compost)/(recyclables+compost+landfill).

Since it looks like we are visualizing data based off of a set of bins (compost, landfill, recycling) we can always calculate the diversion rate. (I think the idea is that ZotBins is always deployed in a set-- however, that is something we can worry about later).

I think the best way to visualize diversion rate is to have a chart plotting "landfill" vs "diversion rate". For example, see the following diagram:

Since all our values are hardcoded and our "weight" chart only has Jan, Feb, March, then we can do the same for our diversion rates. For now, let's just plot "Jan", "Feb", and "Mar".

Please finish this by our next subgroup meeting! As always, let me know if you need more time

Backend: Write an endpoint on the express server to fetch the Image List from the pythonanywhere server to display on the management app.

Frontend: Implement an ImageGallery component to display images with the sources provided by the API.

We need to track the location(floor, building, campus), and bin id of each bin manually to generate specific bin pages.

Must have the following detail for each bin available on the server:

{
  floor:"",
  buidling: "",
  campus: "",
  binId: ""
}

We'll need to hardcode the bin search bar for now and use react-router to route to specific bins.

On each bin page, we'll need to generate the data for that binId and list its attribute.

Good documentation!

There should be a way to automate these
Needs some research though

Hardcoded values for now since db isn't storing data for fullness/weight yet

This is a big change so let's try to have this whole thing done by end of the quarter.

RELATED ISSUES:
Export to PDF wireframe - #29
Export to CSV feature - #21

PART 1: Export to CSV
Once @uci-mars has the wireframe ready, you can begin. In the meanwhile, make sure the export to CSV feature is working properly. Merge the master branch into the "export-to-csv" branch and work in the "export-csv" branch until you are sure the export to CSV feature works as intended.

screenshot of export-csv branch:

Might have to clarify with Mars @uci-mars on this one. From my understanding, export to CSV should initiate a download of a CSV of the data being visualized. So, since we have dummy data it should just be a CSV file of the chosen time range (e.g., January 1st to January 3rd) for a particular sensor/bin. Check the API call and work with it, it will change later on most likely: https://github.com/zotbins/ZotBinsAPI/blob/master/README.md#get-observation-stats-as-csv

From what I checked, the export to csv button is broken and wont generate the file. please take a look at that and see if you can get it function. It's possible that this will be a really easy fix/change.

DELIVERABLE: A downloadable CSV file that shows the data retrieved from the API. Then, submit a PR.
DEADLINE: 1-2 weeks from now.

PART 2: Export to PDF
Add a new drop down to the CSV button like so

from the drop down arrow, they should be able to choose their file type. With this kind of functionality in place, it will let the web app support other file types. But for now, just add one for the drop down for PDF.

Once they select pdf, the button's text will change to "Export PDF".

In terms of functionality, the idea is similar to the Export to CSV feature. It will need to initiate a download of a PDF report. Check the Figma link in the agenda. You would need to make an API call or find a way to retrieve all the data being visualized on the landing page at the moment of the "Export to PDF" button press.

For this feature change, these are the most interesting questions to tackle:

1. How do you generate a PDF?
2. How do you style the generated PDF?
3. How do you start a download of that generated PDF?
4. Should the PDF report be generated dynamically or are we storing all of them?

DELIVERABLE: A downloadable PDF file report that shows all the data being visualized on the front page. Then, submit a PR.
DEADLINE: End of quarter.

Let me know if you have any questions. We have 5-6 weeks starting from today, so let's see how much we will be able to get done this quarter! This is a big feature and will be very interesting to see.

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.

It's tricky to visualize data in a meaningful way.

The idea of this was to show "at-a-glance" what data looks like over a period of time. For example:

Looking back at it now, not sure if its a good idea. We already have these plots, which the management app shows off:

To borrow ideas from our old mobile app (which is to be redesigned again) maybe it would be a good idea to revamp these "Realtime data" into avg. min. max. median statistics.

Need to find a good way to visualize data that isnt clunky or convoluted. Mars, as our design expert, is there some way for you to visualize this?

Reminder:

1. We visualize data points based on the time range (if its 1 month, then its the sum of all data points from that time range).
   eg) January month (Jan 1st - JAn31st) the sum, avg, max, min, of that time range. Data won't be constantly increasing-- it's based on the selected time range. Ask me if u need this clarified
2. instead of "Realtime Data", call it "Data Highlights" so we can use the sum, avg, max, min on the "Dashboard" page.
3. remove the box charts from Dashboard page
4. remove the percentages from the Dashboard page

As we discussed, "Realtime Data" would probably be better in the "Bin Status" page. Feel free to mock this up

Not displaying pics as before, will need to collab with Grace/Systems team on this.

Let's say I'm a waste management person that wants to very quickly check the statuses of all the bins I'm managing. I want to be able to visually see (without really looking at the data) that a bin is full, so I can go send someone to empty it.

This is a rough idea I had. It's a bit ugly, but the idea I had involves using color to indicate the fullness of a bin. I think this feature could be extended to other metrics as well...

Red
Bin is completely full
Bin has very low diversion rate

Yellow
Bin is moderately full
Bin has okay diversion rate

Green
Bin is empty/near empty
Bin has great diversion rate

etc...

Current status of "TIPPERS": Only breakbeam sensor is logged.

Create an endpoint to get an array of breakbeam data given a startTime and endTime. Since the weight sensor is currently not available, we need to use the breakbeam data to mock the weight data. We need to seperate the time period by hour and find the total breakbeam instance per hour.

Let each breakbeam instance == 10g of waste and the first instance in the array be 0g. Over time the "waste data" should increment at every breakbeam instance.

Realtime: To generate the realtime data we would need to pretend that the waste bin is full at a certain point. Let that point be full bin == 1200g of waste. Whenever the bin is full, its weight data should be 0g.

Cumulative (rate of change): Depending on the length of the time period, we need to divide the time into different sections. (i.e. Last 6 months == monthly, Last month == weekly) Get the total of "waste data" per section and then calculate the rate of change between each two points.

refer to notes in the slack channel

or drone.io whichever works best

this would be good in preventing any feature breaking changes if we implement enzyme, jest or some testing library alongside this.

Let's start with a very simple change-- move a few cards around. (No need to change the bar charts, keep them as static images and keep the hard coded values).

1. Move the "Realtime Data" card to where the leaderboard card is. No need to change anything.
2. Move the leaderboard card to the Bin Status-- no need to change anything. This will be assigned to someone else.

Please do this by Sunday, 10/18/20 at midnight. After you move the leaderboard card to Bin Status I can assign the task to revamp the page.

This is before:

This is after:

The notification feature exists towards the right of the search bar
Intended functionality of the feature:

• Notify the user about any bin that is currently full and that it needs the trash to be collected
• Notify the user on the addition of any new bins across Campus
• Handle the whole notification feature with keeping a track of the viewed notifications and accordingly displaying them on the notification tab

Compared to the mock-ups and our research paper, the UI we currently have is a bit outdated. We want to make sure that our web app is accurately representing what we show to others.

Here is a list of styling changes that need to be updated:

1. Change the text "Waste" to "Landfill" on the front page
2. Change the text "Recyclable" to "Recycling" on the front page
3. See if there's any inline CSS that can be extracted to SASS/CSS (msg me for more info on this)
4. Change the color scheme to match our mockup (take a look out our ZotBins media folder-- there's design guidelines in a presentation)

Deadline: 2 weeks from now (Week of Nov. 12th). No rush, and let me know if anything comes up!

Here are some references:

This is what it looks like now:

Take a look at these red lines/arrows. I believe these are all the instances where text needs to be changed:

This is the mock up we started to work with since last school year. I think we prefer the colors here (ignore the text, its inaccurate and incorrect):

Feel free to leave more feedback for improvement under this issue.

Current Improvements To-do:

• Improve responsiveness: Hide nav labels and "Zotbins" when the screen width shrinks, Improve the grid layouts of the data viz.