The website is composed of two pages: Goal Tracking and Usage Statistics.
Purpose of this page is for user to access, set and track their 'goals' for app usage. First graph represents the actual app usage vs the set usage, with color coding representing good and bad habits. Next widget helps user to find an appropriate time limit for an app, and last widget visualizes the time limit based on pre-existing usage of that app.
First graph on the page represents day or week in review, where users phone usage data is analyzed and visualized against their schedule. Colors of the heatmap represent good or bad habits of the user (ex. using phone in class is bad, watching youtube in free time is okay). Next three widgets inform the user about their habits regarding notifications, and last one represents their most frequent feelings when using that app.
The app runs based on app.py that includes html components of Goal Tracking and Usage Statistics and its callbacks. usagePage includes files related to Usage Statistics page, including changing the data based on the callbacks (updating granularity of data in usagePageModel.py and updating the widget view in usagePageView.py). To control header and switching between two pages, we implemented header.py.
For data visualization, we use plotly express. We used dash to build our website, and a bootstrap to make our CSS better.