From 437ca39b0224ea2096112f7893ec6ad96ba7318c Mon Sep 17 00:00:00 2001
From: Claudio Maggioni <maggicl@usi.ch>
Date: Wed, 24 May 2023 09:58:06 +0200
Subject: [PATCH 1/2] implemented assets_debts route in backend

---
 backend/api/assets_debts.py | 21 +++++++++++++++++++++
 stockingly.py               |  6 ++++++
 2 files changed, 27 insertions(+)
 create mode 100644 backend/api/assets_debts.py

diff --git a/backend/api/assets_debts.py b/backend/api/assets_debts.py
new file mode 100644
index 0000000..c0f5598
--- /dev/null
+++ b/backend/api/assets_debts.py
@@ -0,0 +1,21 @@
+import pandas as pd
+import numpy as np
+import os
+
+ROOT_PATH: str = os.path.join(os.path.dirname(__file__), '..', '..')
+
+
+def compare_balance_sheets(ticker_list: list):
+    df_ret = pd.DataFrame(columns=['total_assets', 'current_assets', 'total_debt', 'current_debt'])
+
+    for i, ticker in enumerate(ticker_list):
+        assets_debt = pd.read_csv(ROOT_PATH + r'/Companies_Data/' + ticker + '_Data/' + ticker + '_balance_sheet_4Y+4Q.csv')
+        selected_data = assets_debt[['TotalAssets', 'TotalDebt', 'CurrentAssets', 'CurrentDebt']]
+
+        df_ret.loc[ticker, 'total_assets'] = selected_data.iloc[0]['TotalAssets']
+        df_ret.loc[ticker, 'current_assets'] = selected_data.iloc[0]['TotalDebt']
+        df_ret.loc[ticker, 'total_debt'] = selected_data.iloc[0]['CurrentAssets']
+        df_ret.loc[ticker, 'current_debt'] = selected_data.iloc[0]['CurrentDebt']
+
+    df_ret.index.name = 'ticker'
+    return df_ret.reset_index(drop=False).replace({ np.nan: None }).to_dict('records')
\ No newline at end of file
diff --git a/stockingly.py b/stockingly.py
index 525c499..bebb8b7 100644
--- a/stockingly.py
+++ b/stockingly.py
@@ -4,6 +4,7 @@ from backend.utils.build_frontend import build_frontend
 from backend.api.companies import get_companies
 from backend.api.closing_price import get_closing_price_hist
 from backend.api.employees import get_employees
+from backend.api.assets_debts import compare_balance_sheets
 import os
 import sys
 import subprocess
@@ -40,6 +41,11 @@ def price_history(tickers: Optional[str]) -> object:
     return jsonify(get_closing_price_hist(tickers.split('/')))
 
 
+@app.route('/assets_debts/<path:tickers>', methods=['GET'])
+def assets_debts(tickers: Optional[str]) -> object:
+    return jsonify(compare_balance_sheets(tickers.split('/')))
+
+
 @app.route('/companies/logos/<ticker>')
 def get_company_logo(ticker: str):
     logo_dir: str = os.path.join(ROOT_DIR, 'scraper', 'logos', 'logos')

From 37775e650db4458e7bf016a2beb5a2edb487b33d Mon Sep 17 00:00:00 2001
From: Tommaso Verzegnassi <verzet@usi.ch>
Date: Mon, 29 May 2023 10:51:16 +0200
Subject: [PATCH 2/2] Implemented assets/debts chart

---
 backend/api/assets_debts.py                   |   3 +
 stockingly-frontend/src/api/index.ts          |  11 ++
 stockingly-frontend/src/api/loader.ts         |   1 -
 .../src/components/BalanceSheet.vue           | 130 ++++++++++++++++++
 .../src/components/EmployeesChart.vue         |   3 +-
 stockingly-frontend/src/views/Comparison.vue  |  12 +-
 6 files changed, 155 insertions(+), 5 deletions(-)
 create mode 100644 stockingly-frontend/src/components/BalanceSheet.vue

diff --git a/backend/api/assets_debts.py b/backend/api/assets_debts.py
index c0f5598..5e8ad44 100644
--- a/backend/api/assets_debts.py
+++ b/backend/api/assets_debts.py
@@ -17,5 +17,8 @@ def compare_balance_sheets(ticker_list: list):
         df_ret.loc[ticker, 'total_debt'] = selected_data.iloc[0]['CurrentAssets']
         df_ret.loc[ticker, 'current_debt'] = selected_data.iloc[0]['CurrentDebt']
 
+    df_ret.loc[:, 'old_assets'] = df_ret['total_assets'].copy() - df_ret['current_assets'].copy()
+    df_ret.loc[:, 'old_debt'] = df_ret['total_debt'].copy() - df_ret['current_debt'].copy()
+
     df_ret.index.name = 'ticker'
     return df_ret.reset_index(drop=False).replace({ np.nan: None }).to_dict('records')
\ No newline at end of file
diff --git a/stockingly-frontend/src/api/index.ts b/stockingly-frontend/src/api/index.ts
index 520f861..146e14a 100644
--- a/stockingly-frontend/src/api/index.ts
+++ b/stockingly-frontend/src/api/index.ts
@@ -30,6 +30,14 @@ export interface PriceHistory {
     [ticker: string]: string | number; // really just number
 }
 
+export interface BalanceSheet {
+    ticker: string;
+    current_assets: number;
+    current_debt: number;
+    total_assets: number;
+    total_debt: number;
+}
+
 export const getCompanies = (tickers?: string[]): Promise<Company[]> =>
     fetch(BACKEND_URL + '/companies' + (tickers ? ('/' + tickers.join('/')) : ''))
         .then(r => r.json())
@@ -43,3 +51,6 @@ export const getEmployees = (tickers: string[]): Promise<EmployeeCount[]> =>
 
 export const getPriceHistory = (tickers: string[]): Promise<PriceHistory[]> =>
     fetch(BACKEND_URL + '/price_history/' + tickers.join('/').toUpperCase()).then(r => r.json())
+
+export const getBalanceSheet = (tickers: string[]): Promise<BalanceSheet[]> =>
+    fetch(BACKEND_URL + '/assets_debts/' + tickers.join('/')).then(r=>r.json())
diff --git a/stockingly-frontend/src/api/loader.ts b/stockingly-frontend/src/api/loader.ts
index fbd421c..0dd90e7 100644
--- a/stockingly-frontend/src/api/loader.ts
+++ b/stockingly-frontend/src/api/loader.ts
@@ -12,6 +12,5 @@ export const defineLoader = <ApiResult>(apiCall: () => Promise<ApiResult>) => re
       alert('Error loading data'); // don't do this for the final product
     }
     this.loading = false;
-    console.log(this.data, this.loading);
   }
 })
\ No newline at end of file
diff --git a/stockingly-frontend/src/components/BalanceSheet.vue b/stockingly-frontend/src/components/BalanceSheet.vue
new file mode 100644
index 0000000..a010211
--- /dev/null
+++ b/stockingly-frontend/src/components/BalanceSheet.vue
@@ -0,0 +1,130 @@
+<template>
+  <v-row>
+    <v-col cols="12">
+      <v-card>
+        <v-card-item>
+          <v-card-title>Balance sheet</v-card-title>
+        </v-card-item>
+        <v-card-text>
+          <v-skeleton-loader class="chart-loader" v-if="balanceSheet.loading" />
+          <ag-charts-vue class="chart" v-else :options="options" />
+        </v-card-text>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+ 
+<script setup lang="ts">
+import { BalanceSheet, EmployeeCount, getBalanceSheet } from '@/api';
+import { defineLoader } from '@/api/loader';
+import { AgAxisLabelFormatterParams, time } from 'ag-charts-community';
+import { DateTime } from 'luxon';
+import { roundTo } from 'round-to';
+import { onMounted, computed } from 'vue';
+import { AgChartsVue } from 'ag-charts-vue3';
+
+const renderer = (params: any) => ({
+  title: params.title,
+  content: DateTime.fromMillis(params.xValue).year + ': ' + roundTo(params.yValue, 0),
+});
+
+const props = defineProps<{
+  tickers: string[],
+  colors: string[]
+}>();
+
+const getTickerColor = (ticker: string) => props.colors[props.tickers.indexOf(ticker)];
+
+const balanceSheet = defineLoader<BalanceSheet[]>(() => getBalanceSheet(props.tickers));
+
+const options = computed(() => {
+  if (balanceSheet.loading) return null;
+
+  const currencyFormat = (num: number) => {
+    return '$' + num.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
+  }
+
+  const renderer = (params: any) => {
+    return {
+      title: params.title,
+      content: params.xValue + ': ' + currencyFormat(params.yKey.startsWith('old') ?
+        (params.datum[params.yKey.replace('old', 'total')]) :
+        (params.yValue)),
+    }
+  };
+
+  return {
+    theme: 'ag-material',
+    data: balanceSheet.data,
+    series: [
+      {
+        type: 'column',
+        xKey: 'ticker',
+        yKey: 'current_assets',
+        yName: 'Current Assets',
+        stackGroup: 'Assets',
+        fill: '#004D40',
+        stroke: '#004D40'
+      },
+      {
+        type: 'column',
+        xKey: 'ticker',
+        yKey: 'old_assets',
+        yName: 'Total Assets',
+        stackGroup: 'Assets',
+        fill: '#4DB6AC',
+        stroke: '#4DB6AC'
+      },
+      {
+        type: 'column',
+        xKey: 'ticker',
+        yKey: 'current_debt',
+        yName: 'Current Debt',
+        stackGroup: 'Debt',
+        fill: '#880E4F',
+        stroke: '#880E4F'
+      },
+      {
+        type: 'column',
+        xKey: 'ticker',
+        yKey: 'old_debt',
+        yName: 'Total Debt',
+        stackGroup: 'Debt',
+        fill: '#F06292',
+        stroke: '#F06292'
+      }
+    ].map(e => ({
+      ...e,
+      highlightStyle: {
+        item: { fillOpacity: 0 },
+        series: { enabled: false }
+      },
+      tooltip: { renderer: renderer },
+    })),
+    axes: [
+      {
+        type: 'category',
+        position: 'bottom',
+      },
+      {
+        type: 'number',
+        position: 'left',
+        label: {
+          format: '$~s',
+          formatter: (params: AgAxisLabelFormatterParams) =>
+            params?.formatter?.(params.value)
+              .replace('k', 'K')
+              .replace('G', 'B') ?? ''
+        },
+      },
+    ],
+    legend: {
+      position: 'bottom',
+    },
+  };
+});
+
+onMounted(() => {
+  balanceSheet.load();
+});
+</script>
\ No newline at end of file
diff --git a/stockingly-frontend/src/components/EmployeesChart.vue b/stockingly-frontend/src/components/EmployeesChart.vue
index a8713ab..88d1225 100644
--- a/stockingly-frontend/src/components/EmployeesChart.vue
+++ b/stockingly-frontend/src/components/EmployeesChart.vue
@@ -3,7 +3,7 @@
       <v-col cols="12">
         <v-card>
           <v-card-item>
-            <v-card-title>Stock price over time</v-card-title>
+            <v-card-title>Employees over time</v-card-title>
           </v-card-item>
           <v-card-text>
             <v-skeleton-loader class="chart-loader" v-if="employees.loading" />
@@ -85,7 +85,6 @@ const options = computed(() => {
 });
 
 onMounted(() => {
-  console.log(JSON.parse(JSON.stringify(props)));
   employees.load();
 });
 </script>
\ No newline at end of file
diff --git a/stockingly-frontend/src/views/Comparison.vue b/stockingly-frontend/src/views/Comparison.vue
index 48dda4a..425802a 100644
--- a/stockingly-frontend/src/views/Comparison.vue
+++ b/stockingly-frontend/src/views/Comparison.vue
@@ -46,7 +46,10 @@
     </v-row>
     <v-row>
       <v-col cols="12">
-        <EmployeesChart :colors="colors" :tickers="tickers"></EmployeesChart>
+        <employees-chart :colors="colors" :tickers="tickers" />
+      </v-col>
+      <v-col cols="12">
+        <balance-sheet :colors="colors" :tickers="tickers" />
       </v-col>
     </v-row>
   </v-container>
@@ -62,6 +65,10 @@
   width: 100%;
   height: 30em !important;
 }
+
+.v-row {
+  width: 100% !important;
+}
 </style>
 
 <script setup lang="ts">
@@ -76,6 +83,7 @@ import { roundTo } from 'round-to';
 import { defineLoader } from '@/api/loader';
 import CompanyCard from '@/components/CompanyCard.vue';
 import EmployeesChart from '@/components/EmployeesChart.vue';
+import BalanceSheet from '@/components/BalanceSheet.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -154,7 +162,7 @@ const options = computed(() => {
           formatter: (params: AgAxisLabelFormatterParams) =>
             params?.formatter?.(params.value)
               .replace('k', 'K')
-              .replace('G', 'B') ?? ''
+              .replace('G', 'B') ?? '' + '$'
         },
       },
     ],