MoLeaf

This Repository is a forked version of the original repository for submission.

Original Repo: https://github.com/SnowSuno/moleaf

Final Prototype Link: https://moleaf.sparcsandbox.com/

For real app-like usage, please use Add to home screen, and it will act like an app.

Teammates

20200510 이지윤 nicolelee2001@kaist.ac.kr

20200549 장준하 andy.jang@kaist.ac.kr

20220042 권순호 snowsuno@kaist.ac.kr

Selected Topic

Visual Analytics for Better Self-regulating Phone Usage Behaviors

Tasks

1. Allow users to set and visualize clear goals
2. Provide intuitive visual aids to motivate users to regulate usage
3. Enable user customization to deliver the data more effectively

Links

• Process Book
• Final Prototype

How to run development server

yarn install
yarn dev

Code Explanation

Page Layout

• Main page (Overview page): src/pages/home/Home.tsx
  • summary of phone usage data using widgets (src/components/widgets)
• Customization page: src/pages/home/Customize.tsx
  • main page customization feature
• Total usage page (page with main graph): src/pages/home/TotalUsage.tsx
  • view weekly and daily usage graphs (src/components/graphs)
• Goal page: src/goals/Goals.tsx
  • see list of set and unset goals
• Edit goal page: src/pages/goals/TotalTime.tsx, src/pages/goals/DownTime.tsx, src/pages/goals/Unlocks.tsx
  • allow editing of each goal
• Settings page: src/pages/Settings.tsx
  • view basic user information

Main Graphs

• Horizontal bar graph: src/components/graphs/BarGauge.tsx
  • main page widget preview
  • total usage page daily usage view
• Vertical bar graph: src/components/graphs/BarGraph.tsx
  • total usage page weekly usage view

Processed data

• Code used to process the raw data can be seen in the data_processor directory on the feat/data-processing branch
• Processed data is located in src/data