nhan0504 / CS326

0 stars 1 forks source link

Statistic View Page #14

Closed nhan0504 closed 3 weeks ago

nhan0504 commented 3 weeks ago

What

Created the Statistic Page with 5 charts:
- Bar chart for top 5 most worn items
- Bar chart for items worn less than 2 times
- Calculate and display cost per wear for each item
- Doughnut chart for wear frequency of items in each category
- Pie chart for number of items in each category
Use chart.js library to create charts
Populate wardrobeItems with TestData

Testing done

Run npm run start to view the stats page

Note

Statistic is displayed based on test data. Will integrate with the indexedDb once the service is ready.

sophia-hubscher commented 3 weeks ago

Oops just noticed this! Our site is supposed to be responsive, so it might be worth messing around with the CSS a bit more to make sure it functions on all screen sizes.

Screen Shot 2024-10-29 at 5 37 31 PM

My first instinct would be to use @media (max-width: somenumber px) {} and to stack everything vertically when the screen is narrow enough. You might also want to add more text wrapping. That should probably clear things up though.