# **City of Data Notes**
# Group 9

**HELEN SONG (hs3288), CHENYOU WU (hw2864) & ERIC DIOS (emd2206)**

Codepen Link: https://codepen.io/hs3288/collab/mdpxZXm

Firestore Collection: [https://console.firebase.google.com/u/0/project/mstu5013-playground/firestore/data/~2Fclothes~2F3G1EfHSLtkw5jaDZFx3b](https://)

- After quite a bit of time brainstorming we decided on visualizing the inventory of a clothing shop (a small corner of a city haha).
- The doodle developed from originally having a website storefront that users could purchase clothes from. However, we found it more appropriate to set up a website for management to better understand their current inventory.

- We identified that there are two main focuses of this project:
1. Structure the data and decide on the states (properties and values of each object)
2. Connecting the data to codes so they are visualized

- Our Inspiration
*Our data will be converted to imagery which will enable the manager to view graphs regarding what items are on hand and which are not so that they may be ordered to maintain stockage levels.
*When users purchase or return items data from that perspective will be pushed into our database. When a new shipment is recieved to the store that information will also be pushed into the database.

- Example 1
- Example 2

**Initial layout**
- We Initially wanted to create a "storefront" that looks like 👇🏻. We imagined printing out different numbers of clothing representing the stock.

- However, we came to realization that customers don't really care/need synthesized data of the store. In comparison, we felt that a store manager / owner would tend see individual clothing (documents in firebase) as data sets that representing the stock and sales indirectly.

- We broke the clothing up into three main "types" (Shirts, Pants and Shoes)

- The image above encapsulates our desired end state as it contains the data we will utilize and a sketch of what the actual page will look like. We imagined that if we were store managers, what are the aspects that we care about and wish to see on a digest page. According to that, we've summarized that type of clothing, price, color and whether the clothing is on sale are the four aspects (data states) needed.


- The collection above is our input into the firestore. We will have 30 items of mixed values in our database.

**Final layout**
- We went online and learnt about a library for data visualization: *chartjs* and imported it into our codepen as a component of *Vue*.
-

**Lessons Learned**
* Taking time to brainstorm our concept paid dividends as we were able to clearly lay out our breakdown of work.

* Our intent to have a barchart to display this information seemed relatively easy yet converting data from the Firestore into a visual representation proved quite difficult. We were able to use the computed to filter out our values accordingly however, it became difficult to connect the firestore data to a real-time barchart. Specifically, we struggled to import numbers from the root component:
While the import of type works, using the same syntax seems to break our code...