From fdd6fc3d72aeb6f09526ed1731e88219ca32c2c3 Mon Sep 17 00:00:00 2001
From: Claudio Maggioni <maggicl@usi.ch>
Date: Wed, 17 May 2023 12:20:19 +0200
Subject: [PATCH 1/2] Integrated metrics without color ranges

---
 backend/api/companies.py               | 12 ++++++++
 stockingly-frontend/package.json       |  1 +
 stockingly-frontend/src/api/index.ts   |  8 ++++--
 stockingly-frontend/src/views/Home.vue | 39 ++++++++++++++++++--------
 stockingly-frontend/yarn.lock          |  5 ++++
 5 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/backend/api/companies.py b/backend/api/companies.py
index a690b50..07da8a1 100644
--- a/backend/api/companies.py
+++ b/backend/api/companies.py
@@ -2,7 +2,10 @@ import os
 import pandas as pd
 import numpy as np
 from scraper.top100_extractor import programming_crime_list
+
 COMPANIES_CSV_PATH: str = 'scraper/companies.csv'
+COMPANY_DATA_CSV_PATH: str = 'Elaborated_Data/normalized_data.csv'
+
 
 def non_nan(a: list[any]) -> list[any]:
     return list(filter(lambda a: type(a) == str or not np.isnan(a), a))
@@ -21,4 +24,13 @@ def get_companies(root_dir: str) -> list[dict]:
     del df['tag 1']
     del df['tag 2']
     del df['tag 3']
+
+    # Include company metrics
+    df_data = pd.read_csv(os.path.join(root_dir, COMPANY_DATA_CSV_PATH), index_col='Ticker') \
+        .loc[:, ['Valuation', 'Financial Health', 'Estimated Growth', 'Past Performance']]
+
+    # Compute limits of metrics
+    # print(df_data.agg([min, max]).to_dict('records'))
+    
+    df = df.join(df_data)
     return df.reset_index().replace({ np.nan: None }).to_dict('records')
\ No newline at end of file
diff --git a/stockingly-frontend/package.json b/stockingly-frontend/package.json
index 2f9a9e3..7ce9d2e 100644
--- a/stockingly-frontend/package.json
+++ b/stockingly-frontend/package.json
@@ -14,6 +14,7 @@
     "debounce": "^1.2.1",
     "fuse.js": "^6.6.2",
     "roboto-fontface": "*",
+    "round-to": "^6.0.0",
     "vue": "^3.2.0",
     "vue-router": "^4.0.0",
     "vuetify": "^3.2.3",
diff --git a/stockingly-frontend/src/api/index.ts b/stockingly-frontend/src/api/index.ts
index 61298e2..27a3c15 100644
--- a/stockingly-frontend/src/api/index.ts
+++ b/stockingly-frontend/src/api/index.ts
@@ -13,10 +13,14 @@ export interface Company {
     tags: string[];
     ticker: string;
     website: string;
-    logoSrc: string
+    logoSrc: string;
+    'Valuation': number;
+    'Financial Health': number;
+    'Estimated Growth': number;
+    'Past Performance': number;
 }
 
-export const getCompanies = (): Promise<Company[]> => 
+export const getCompanies = (): Promise<Company[]> =>
     fetch(BACKEND_URL + '/companies').then(r => r.json()).then(list => list.map((e: Company) => ({
         ...e,
         logoSrc: `${BACKEND_URL}/companies/logos/${e.ticker}`
diff --git a/stockingly-frontend/src/views/Home.vue b/stockingly-frontend/src/views/Home.vue
index 4e2132c..97dd4f4 100644
--- a/stockingly-frontend/src/views/Home.vue
+++ b/stockingly-frontend/src/views/Home.vue
@@ -88,6 +88,7 @@
 <script lang="ts" setup>
 import { getCompanies, Company } from '@/api';
 import { ref, reactive, computed, watch } from 'vue';
+import { roundTo } from 'round-to';
 import debounce from 'debounce';
 import Fuse from 'fuse.js';
 
@@ -139,30 +140,46 @@ interface Metric {
   minValue: number,
   maxValue: number,
   value: (c: Company) => number // in [0, 100],
-  symbol?: string
+  symbol?: string,
+  decimals?: number
 }
 
 const metricsData = reactive<Metric[]>([
   {
-    title: 'Metric 1',
-    color: 'green',
+    title: 'Valuation',
+    color: 'secondary',
     minValue: 0,
-    maxValue: 100,
-    value: _ => 20
+    maxValue: 150,
+    value: c => c['Valuation']
   },
   {
-    title: 'Length of ticker',
-    color: 'orange',
+    title: 'Financial Health',
+    color: 'secondary',
     minValue: 0,
-    maxValue: 5,
-    value: c => c.ticker.length,
-    symbol: ' chars'
+    maxValue: 500,
+    value: c => c['Financial Health']
   },
+  {
+    title: 'Estimated Growth',
+    color: 'secondary',
+    minValue: 0,
+    maxValue: 200,
+    value: c => c['Estimated Growth'],
+    symbol: ' %'
+  },
+  {
+    title: 'Past Performance',
+    color: 'secondary',
+    minValue: 0,
+    maxValue: 200,
+    value: c => c['Past Performance']
+  }
 ]);
 
 const metrics = computed<(Metric & { percentage: (c: Company) => number })[]>(() => metricsData.map(e => ({
   ...e,
-  percentage: (c: Company) => (e.value(c) - e.minValue) * 100 / (e.maxValue - e.minValue)
+  percentage: (c: Company) => (e.value(c) - e.minValue) * 100 / (e.maxValue - e.minValue),
+  value: (c: Company) => roundTo(e.value(c), e.decimals ?? 2)
 })));
 
 getCompanies().then(cs => {
diff --git a/stockingly-frontend/yarn.lock b/stockingly-frontend/yarn.lock
index fd7d6af..a573c91 100644
--- a/stockingly-frontend/yarn.lock
+++ b/stockingly-frontend/yarn.lock
@@ -1446,6 +1446,11 @@ rollup@^3.21.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
+round-to@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/round-to/-/round-to-6.0.0.tgz#c12a8dee3c78cbc981d161ba8ff0214abd6cae53"
+  integrity sha512-jFvBgyRueGU0QVa7EqXZOkarkzrqEnF3VTCzATRcBkzxXJ4/+pzDf1iouqOqGsx6ZpnIIu5gvFDGnyzoX58ldQ==
+
 run-parallel@^1.1.9:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"

From 74928aee46080b74d422e9b1269aaece175a113f Mon Sep 17 00:00:00 2001
From: Claudio Maggioni <maggicl@usi.ch>
Date: Fri, 19 May 2023 19:53:13 +0200
Subject: [PATCH 2/2] Added color scale support to main page indicators

---
 stockingly-frontend/src/views/Home.vue | 75 +++++++++++++++++++++-----
 1 file changed, 62 insertions(+), 13 deletions(-)

diff --git a/stockingly-frontend/src/views/Home.vue b/stockingly-frontend/src/views/Home.vue
index 97dd4f4..193ce57 100644
--- a/stockingly-frontend/src/views/Home.vue
+++ b/stockingly-frontend/src/views/Home.vue
@@ -39,7 +39,7 @@
                   <strong>{{ m.title }}</strong>
                   <span class="text-right">{{ m.value(company) }}{{ m.symbol ?? '' }}</span>
                 </div>
-                <v-progress-linear :color="m.color" :model-value="m.percentage(company)"></v-progress-linear>
+                <v-progress-linear :color="m.color(company)" :model-value="m.percentage(company)"></v-progress-linear>
               </div>
             </v-card-text>
 
@@ -134,52 +134,101 @@ const setSearch = (text: string) => searchText.value = text;
 
 watch(filteredCompanies, () => loading.value = false);
 
+type ColorScale = { gt?: number, color: string }[];
+
 interface Metric {
   title: string,
-  color: string,
   minValue: number,
   maxValue: number,
   value: (c: Company) => number // in [0, 100],
   symbol?: string,
   decimals?: number
+  scale: ColorScale
 }
 
+// COLORS from Pietro:
+// Valuation: < 1 ( GREEN); > 1 (RED); = 1 (ORANGE)
+// Financial Health: < 1 (GREEN); > 1 (RED); = 1 (ORANGE)
+// Growth: < 0 (RED); 0 < x < 8% (ORANGE); < 8 % (GREEN)
+// Past performance: -100 < x < 0 (RED); = 0 (ORANGE); 0 < x < 100 (GREEN)
+
+const COLORS = {
+  good: 'success',
+  warning: 'warning',
+  bad: 'error'
+};
+
 const metricsData = reactive<Metric[]>([
   {
     title: 'Valuation',
-    color: 'secondary',
     minValue: 0,
     maxValue: 150,
-    value: c => c['Valuation']
+    value: c => c['Valuation'],
+    scale: [
+      { gt: 1.1, color: COLORS.bad },
+      { gt: 0.9, color: COLORS.warning },
+      { color: COLORS.good }
+    ]
   },
   {
     title: 'Financial Health',
-    color: 'secondary',
     minValue: 0,
     maxValue: 500,
-    value: c => c['Financial Health']
+    value: c => c['Financial Health'],
+    scale: [
+      { gt: 1.1, color: COLORS.bad },
+      { gt: 0.9, color: COLORS.warning },
+      { color: COLORS.good }
+    ]
   },
   {
     title: 'Estimated Growth',
-    color: 'secondary',
     minValue: 0,
     maxValue: 200,
     value: c => c['Estimated Growth'],
-    symbol: ' %'
+    symbol: ' %',
+    scale: [
+      { gt: 8, color: COLORS.good },
+      { gt: 0, color: COLORS.warning },
+      { color: COLORS.bad }
+    ]
   },
   {
     title: 'Past Performance',
-    color: 'secondary',
-    minValue: 0,
+    minValue: -100,
     maxValue: 200,
-    value: c => c['Past Performance']
+    value: c => c['Past Performance'],
+    symbol: ' %',
+    scale: [
+      { gt: 5, color: COLORS.good },
+      { gt: -5, color: COLORS.warning },
+      { gt: -Infinity, color: COLORS.bad }
+    ]
   }
 ]);
 
-const metrics = computed<(Metric & { percentage: (c: Company) => number })[]>(() => metricsData.map(e => ({
+type ExtendedMetric = Metric & {
+  percentage: (c: Company) => number,
+  color: (c: Company) => string
+}
+
+const metrics = computed<ExtendedMetric[]>(() => metricsData.map(e => ({
   ...e,
   percentage: (c: Company) => (e.value(c) - e.minValue) * 100 / (e.maxValue - e.minValue),
-  value: (c: Company) => roundTo(e.value(c), e.decimals ?? 2)
+  value: (c: Company) => roundTo(e.value(c), e.decimals ?? 2),
+  color: (c: Company) => {
+    console.log(JSON.parse(JSON.stringify(e.scale)));
+    const value = e.value(c);
+    console.log(c.ticker, value);
+    for (const s of e.scale) {
+      console.log('checking', s.gt, s.color);
+      if (typeof s.gt !== 'number' || value > s.gt) {
+        console.log(s.gt, s.color);
+        return s.color;
+      }
+    }
+    return 'blue-grey' // default value, should never be displayed
+  }
 })));
 
 getCompanies().then(cs => {