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.

20200510 이지윤 [email protected]

20200549 장준하 [email protected]

20220042 권순호 [email protected]

Visual Analytics for Better Self-regulating Phone Usage Behaviors

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

• Process Book
• Final Prototype

yarn install
yarn dev

• 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

• 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

• 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