From 2ff9f164fe9437a68fa1a835ab1d9d1297e17fc2 Mon Sep 17 00:00:00 2001
From: Claudio Maggioni <maggicl@usi.ch>
Date: Mon, 15 May 2023 11:12:43 +0200
Subject: [PATCH 1/2] Added stub configurable metrics to home

---
 stockingly-frontend/package.json       |  2 +-
 stockingly-frontend/src/views/Home.vue | 48 ++++++++++++++++++++++++--
 stockingly-frontend/yarn.lock          |  8 ++---
 3 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/stockingly-frontend/package.json b/stockingly-frontend/package.json
index 4aae167..2c16fdc 100644
--- a/stockingly-frontend/package.json
+++ b/stockingly-frontend/package.json
@@ -9,7 +9,7 @@
     "lint": "eslint . --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "@mdi/font": "7.0.96",
+    "@mdi/font": "^7.2.96",
     "core-js": "^3.29.0",
     "roboto-fontface": "*",
     "vue": "^3.2.0",
diff --git a/stockingly-frontend/src/views/Home.vue b/stockingly-frontend/src/views/Home.vue
index 1ac6d2a..6f9bff1 100644
--- a/stockingly-frontend/src/views/Home.vue
+++ b/stockingly-frontend/src/views/Home.vue
@@ -15,7 +15,16 @@
             </v-card-item>
 
             <v-card-text>
-              {{ company.description }}
+              <p class="text--primary">
+                {{ company.description }}
+              </p>
+              <div class="pt-2 pb-2" v-for="m in metrics" :key="m.title">
+                <div class="d-inline-flex justify-space-between" style="width: 100%">
+                  <strong>{{ m.title }}</strong>
+                  <span class="text-right">{{ m.value }}{{ m.symbol ?? '' }}</span>
+                </div>
+                <v-progress-linear :color="m.color" v-model="m.percentage"></v-progress-linear>
+              </div>
             </v-card-text>
 
             <div class="px-4">
@@ -28,7 +37,7 @@
                 {{ formatCurrency(company['market cap']) }}
               </v-chip>
               <template v-for="tag in company.tags" :key="tag">
-                <v-chip label class="ma-1">{{ tag }}</v-chip>  
+                <v-chip label class="ma-1">{{ tag }}</v-chip>
               </template>
             </div>
           </v-card>
@@ -40,11 +49,44 @@
 
 <script lang="ts" setup>
 import { getCompanies, Company } from '@/api';
-import { ref, reactive } from 'vue';
+import { ref, reactive, computed, watch } from 'vue';
 
 const loading = ref(true);
 const companies = reactive<Company[]>([]);
 
+interface Metric {
+  title: string,
+  color: string,
+  minValue: number,
+  maxValue: number,
+  value: number // in [0, 100],
+  symbol?: string
+}
+
+const metricsData = reactive<Metric[]>([
+  {
+    title: 'Metric 1',
+    color: 'green',
+    minValue: 0,
+    maxValue: 100,
+    value: 20
+  },
+  {
+    title: 'Metric 2',
+    color: 'orange',
+    minValue: 0,
+    maxValue: 100,
+    value: 60,
+    symbol: '%'
+  },
+]);
+
+const metrics = computed<(Metric & { percentage: number })[]>(() => metricsData.map(e => ({
+  ...e,
+  percentage: (e.value - e.minValue) * 100 / (e.maxValue - e.minValue) 
+})));
+
+
 getCompanies().then(cs => {
   loading.value = false;
   companies.push(...cs);
diff --git a/stockingly-frontend/yarn.lock b/stockingly-frontend/yarn.lock
index 4117c14..e859a4e 100644
--- a/stockingly-frontend/yarn.lock
+++ b/stockingly-frontend/yarn.lock
@@ -192,10 +192,10 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
 
-"@mdi/font@7.0.96":
-  version "7.0.96"
-  resolved "https://registry.yarnpkg.com/@mdi/font/-/font-7.0.96.tgz#9853c222623072f5575b4039c8c195ea929b61fc"
-  integrity sha512-rzlxTfR64hqY8yiBzDjmANfcd8rv+T5C0Yedv/TWk2QyAQYdc66e0kaN1ipmnYU3RukHRTRcBARHzzm+tIhL7w==
+"@mdi/font@^7.2.96":
+  version "7.2.96"
+  resolved "https://registry.yarnpkg.com/@mdi/font/-/font-7.2.96.tgz#af800d9fe3b424f85ad45e9baa755bd003ab4986"
+  integrity sha512-e//lmkmpFUMZKhmCY9zdjRe4zNXfbOIJnn6xveHbaV2kSw5aJ5dLXUxcRt1Gxfi7ZYpFLUWlkG2MGSFAiqAu7w==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"

From e5fbed7fa933d8548221a61d468a2d920cd1a573 Mon Sep 17 00:00:00 2001
From: Claudio Maggioni <maggicl@usi.ch>
Date: Mon, 15 May 2023 11:50:07 +0200
Subject: [PATCH 2/2] company logos added

---
 company_generic.svg                    |  1 +
 stockingly-frontend/src/api/index.ts   |  6 ++++-
 stockingly-frontend/src/views/Home.vue | 34 +++++++++++++++-----------
 stockingly.py                          | 11 +++++++++
 4 files changed, 37 insertions(+), 15 deletions(-)
 create mode 100644 company_generic.svg

diff --git a/company_generic.svg b/company_generic.svg
new file mode 100644
index 0000000..c935139
--- /dev/null
+++ b/company_generic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M80 976V495l280-119v80l200-81v121h320v480H80Zm60-60h680V556.199H500V464l-200 80v-79l-160 71v380Zm310-100h60V656h-60v160Zm-160 0h60V656h-60v160Zm320 0h60V656h-60v160Zm270-320H700l40-320h100l40 320ZM140 916h680-680Z"/></svg>
\ No newline at end of file
diff --git a/stockingly-frontend/src/api/index.ts b/stockingly-frontend/src/api/index.ts
index 2dbc27e..61298e2 100644
--- a/stockingly-frontend/src/api/index.ts
+++ b/stockingly-frontend/src/api/index.ts
@@ -13,7 +13,11 @@ export interface Company {
     tags: string[];
     ticker: string;
     website: string;
+    logoSrc: string
 }
 
 export const getCompanies = (): Promise<Company[]> => 
-    fetch(BACKEND_URL + '/companies').then(r => r.json())
\ No newline at end of file
+    fetch(BACKEND_URL + '/companies').then(r => r.json()).then(list => list.map((e: Company) => ({
+        ...e,
+        logoSrc: `${BACKEND_URL}/companies/logos/${e.ticker}`
+    })));
\ No newline at end of file
diff --git a/stockingly-frontend/src/views/Home.vue b/stockingly-frontend/src/views/Home.vue
index 6f9bff1..789b8d3 100644
--- a/stockingly-frontend/src/views/Home.vue
+++ b/stockingly-frontend/src/views/Home.vue
@@ -9,10 +9,16 @@
       <template v-else v-for="company in companies" :key="company.ticker">
         <v-col cols="12" md="6" lg="4">
           <v-card class="ma-1 fill-height">
-            <v-card-item>
-              <v-card-title>{{ company['short name'] }}</v-card-title>
-              <v-card-subtitle>{{ company['company name'] }}</v-card-subtitle>
-            </v-card-item>
+
+            <div class="d-flex stretch align-center">
+              <div class="flex-0 pa-3">
+                <img style="max-height: 36px; min-height: 24px;" :src="company.logoSrc"/>
+              </div>
+              <v-card-item style="flex: 1 !important">
+                <v-card-title>{{ company['short name'] }}</v-card-title>
+                <v-card-subtitle>{{ company['company name'] }}</v-card-subtitle>
+              </v-card-item>
+            </div>
 
             <v-card-text>
               <p class="text--primary">
@@ -21,9 +27,9 @@
               <div class="pt-2 pb-2" v-for="m in metrics" :key="m.title">
                 <div class="d-inline-flex justify-space-between" style="width: 100%">
                   <strong>{{ m.title }}</strong>
-                  <span class="text-right">{{ m.value }}{{ m.symbol ?? '' }}</span>
+                  <span class="text-right">{{ m.value(company) }}{{ m.symbol ?? '' }}</span>
                 </div>
-                <v-progress-linear :color="m.color" v-model="m.percentage"></v-progress-linear>
+                <v-progress-linear :color="m.color" :model-value="m.percentage(company)"></v-progress-linear>
               </div>
             </v-card-text>
 
@@ -59,7 +65,7 @@ interface Metric {
   color: string,
   minValue: number,
   maxValue: number,
-  value: number // in [0, 100],
+  value: (c: Company) => number // in [0, 100],
   symbol?: string
 }
 
@@ -69,21 +75,21 @@ const metricsData = reactive<Metric[]>([
     color: 'green',
     minValue: 0,
     maxValue: 100,
-    value: 20
+    value: _ => 20
   },
   {
-    title: 'Metric 2',
+    title: 'Length of ticker',
     color: 'orange',
     minValue: 0,
-    maxValue: 100,
-    value: 60,
-    symbol: '%'
+    maxValue: 5,
+    value: c => c.ticker.length,
+    symbol: ' chars'
   },
 ]);
 
-const metrics = computed<(Metric & { percentage: number })[]>(() => metricsData.map(e => ({
+const metrics = computed<(Metric & { percentage: (c: Company) => number })[]>(() => metricsData.map(e => ({
   ...e,
-  percentage: (e.value - e.minValue) * 100 / (e.maxValue - e.minValue) 
+  percentage: (c: Company) => (e.value(c) - e.minValue) * 100 / (e.maxValue - e.minValue)
 })));
 
 
diff --git a/stockingly.py b/stockingly.py
index 3ed9e56..069840a 100644
--- a/stockingly.py
+++ b/stockingly.py
@@ -26,6 +26,17 @@ def companies() -> object:
     return jsonify(get_companies(ROOT_DIR))
 
 
+@app.route('/companies/logos/<ticker>')
+def get_company_logo(ticker: str):
+    logo_dir: str = os.path.join(ROOT_DIR, 'scraper', 'logos', 'logos')
+    logo_name: str = str(ticker).upper() + '.png'
+
+    if os.path.exists(os.path.join(logo_dir, logo_name)):
+        return send_from_directory(logo_dir, logo_name)
+
+    return send_from_directory(ROOT_DIR, 'company_generic.svg')
+
+
 if __name__ == '__main__':
     build_frontend()
     app.run()