ECS 272 HW2 - Yash Vekaria

Homework2/yvekaria/README.md

@@ -0,0 +1,54 @@
+# More about the Framework
+
+
+This is a tempalate in Vue.js and TypeScript. Vue 3.0 sits between React and basic JavaScript depending on the developers comfort level. For this class, we stick with [Options API](https://vuejs.org/api/#options-api) rather than Composition API (not required so you can switch depending on how you feel). We offer Vue, since it is a modern framework that companies use so it could be useful for you if one of your projects in this class could make use of it.
+
+What this page covers:
+ - Pointers if you want to use your own setup or a simpler template for the assignment
+ - **The files you have to care about**
+ - Libraries used in this framework
+
+## Other Setups
+
+If you want to be free of any frontend frameworks (e.g., Vue.js and React), go to the `VanillaJS-Template` folder.
+If you want to use Vue.js but not with TypeScript, just remove any type specifications from the `Example.vue`. You can always refer to `VanillaJS-Template/example.js` for this migration.
+
+
+## The Files You Have to Care about
+
+`package.json` is where we manage the libraries we installed. Besides this, most of the files you can ignore, but **the files under `./src/` are your concern**.
+
+* `./src/main.ts` is the root script file for Vue.js that instatinates our single page application.
+* `./src/App.vue` is the root file for all **development** needs and is also where we manage the layout and load in components.
+* `./src/types.ts` is usually where we declare our customized types (if you have any)
+* `./src/stores/` is where we manage the stores if you're planning to use it. The store is a container that holds your application state.
+* `./src/components/` is where we create the components. You may have multiple components depends on your design.
+
+## Libraries Installed in this Framework
+ * D3.js v7 for visualization
+ * [axios](https://axios-http.com/docs/intro) for API.
+ * [pinia](https://pinia.vuejs.org/introduction.html) for store management in Vue.js
+ * [Vuetify](https://next.vuetifyjs.com/en/components/all/) for UI that follows Google Material Design 3.
+ * [lodash](https://lodash.com/) for utility functions in JavaScript.
+
+
+# Vite 
+
+**NOTE: the following is from Vite, which you can ignore it.**
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support For `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

Homework2/yvekaria/data/bar_data.csv

@@ -0,0 +1,19 @@
+Type_1,1,2,3,4,5,6
+Bug,12,10,12,8,18,3
+Dark,0,5,4,3,13,3
+Dragon,3,0,7,3,7,4
+Electric,9,6,4,7,7,3
+Fairy,2,5,0,1,0,9
+Fighting,7,2,4,2,7,3
+Fire,12,8,6,5,8,8
+Flying,0,0,0,0,1,2
+Ghost,3,1,4,6,5,4
+Grass,12,9,12,13,15,5
+Ground,8,3,6,4,9,0
+Ice,2,4,6,3,6,2
+Normal,22,15,18,17,17,4
+Poison,14,1,3,6,2,2
+Psychic,8,7,8,7,14,3
+Rock,9,4,8,6,6,8
+Steel,0,2,9,3,4,4
+Water,28,18,24,13,17,5

Homework2/yvekaria/data/demo.json

@@ -0,0 +1,41 @@
+{
+    "data":[
+        {
+            "value": 21,
+            "category": "a"
+        },
+        {
+            "value": 42,
+            "category": "b"
+        },
+        {
+            "value": 43,
+            "category": "c"
+        },
+        {
+            "value": 5,
+            "category": "d"
+        },
+        {
+            "value": 26,
+            "category": "e"
+        },
+        {
+            "value": 7,
+            "category": "f"
+        },
+        {
+            "value": 10,
+            "category": "l"
+        },
+        {
+            "value": 18,
+            "category": "s"
+        },
+        {
+            "value": 85,
+            "category": "x"
+        }
+    ]
+
+}