Integrated metrics without color ranges

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')

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",

stockingly-frontend/src/api/index.ts

@@ -13,7 +13,11 @@ 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[]> =>

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 => {

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"