Refined comparison page

This commit is contained in:
Claudio Maggioni 2023-05-21 16:16:18 +02:00
parent 189c8cd2f7
commit 388dbd90b2
7 changed files with 265 additions and 188 deletions

View file

@ -2,22 +2,24 @@ import os
import pandas as pd
import numpy as np
from scraper.top100_extractor import programming_crime_list
from typing import Optional
COMPANIES_CSV_PATH: str = 'scraper/companies.csv'
COMPANY_DATA_CSV_PATH: str = 'Elaborated_Data/normalized_data.csv'
ROOT_PATH: str = os.path.join(os.path.dirname(__file__), '..', '..')
COMPANIES_CSV_PATH: str = os.path.join('scraper', 'companies.csv')
COMPANY_DATA_CSV_PATH: str = os.path.join('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))
def get_companies(root_dir: str) -> list[dict]:
def get_companies(tickers: Optional[list[str]] = None) -> list[dict]:
"""
reads the companies.csv file and returns it as a JSON-ifiable object
to return to the frontend.
"""
df = pd.read_csv(os.path.join(root_dir, COMPANIES_CSV_PATH), index_col='ticker')
tickers = pd.Series(programming_crime_list)
df = pd.read_csv(os.path.join(ROOT_PATH, COMPANIES_CSV_PATH), index_col='ticker')
tickers = pd.Series(programming_crime_list if tickers is None else tickers)
df = df.loc[df.index.isin(tickers), :]
df['tags'] = df[['tag 1', 'tag 2', 'tag 3']].values.tolist()
df['tags'] = df['tags'].apply(non_nan)
@ -26,7 +28,7 @@ def get_companies(root_dir: str) -> list[dict]:
del df['tag 3']
# Include company metrics
df_data = pd.read_csv(os.path.join(root_dir, COMPANY_DATA_CSV_PATH), index_col='Ticker') \
df_data = pd.read_csv(os.path.join(ROOT_PATH, COMPANY_DATA_CSV_PATH), index_col='Ticker') \
.loc[:, ['Valuation', 'Financial Health', 'Estimated Growth', 'Past Performance']]
# Compute limits of metrics

View file

@ -25,11 +25,13 @@ export interface PriceHistory {
[ticker: string]: string | number; // really just number
}
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}`
})));
export const getCompanies = (tickers?: string[]): Promise<Company[]> =>
fetch(BACKEND_URL + '/companies' + (tickers ? ('/' + tickers.join('/')) : ''))
.then(r => r.json())
.then(list => list.map((e: Company) => ({
...e,
logoSrc: `${BACKEND_URL}/companies/logos/${e.ticker}`
})));
export const getPriceHistory = (tickers: string[]): Promise<PriceHistory[]> =>
fetch(BACKEND_URL + '/price_history/' + tickers.join(',').toUpperCase()).then(r => r.json())
export const getPriceHistory = (tickers: string[]): Promise<PriceHistory[]> =>
fetch(BACKEND_URL + '/price_history/' + tickers.join('/').toUpperCase()).then(r => r.json())

View file

@ -0,0 +1,17 @@
import { reactive } from "vue";
export const defineLoader = <ApiResult>(apiCall: () => Promise<ApiResult>) => reactive({
loading: true,
data: undefined as ApiResult | undefined,
async load() {
try {
const result: ApiResult = await apiCall();
this.data = result;
} catch (e) {
console.error(e);
alert('Error loading data'); // don't do this for the final product
}
this.loading = false;
console.log(this.data, this.loading);
}
})

View file

@ -0,0 +1,170 @@
<template>
<v-card :class="{
'ma-1': true,
'fill-height': true,
'd-flex': true,
'flex-column': true,
'text-white': props.markerColor
}" :color="props.markerColor ?? void (0)">
<div class="pa-4 bg-white">
<v-img :src="company.logoSrc" :aspect-ratio="4.5" class="bg-white" />
</div>
<v-card-item>
<v-card-title>{{ company['short name'] }}</v-card-title>
<v-card-subtitle>{{ company['company name'] }}</v-card-subtitle>
</v-card-item>
<v-card-text class="flex-0" v-if="!props.minimal">
<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(company) }}{{ m.symbol ?? '' }}</span>
</div>
<v-progress-linear :color="m.color(company)" :model-value="m.percentage(company)"></v-progress-linear>
</div>
</v-card-text>
<div class="px-4 flex-0">
<v-chip label :color="props.markerColor ? void(0) : 'pink'" class="ma-1">
<v-icon start icon="mdi-chart-timeline-variant"></v-icon>
{{ company.ticker }}
</v-chip>
<template v-if="!props.minimal">
<v-chip label color="green" class="ma-1">
<v-icon start icon="mdi-currency-usd"></v-icon>
{{ formatCurrency(company['market cap']) }}
</v-chip>
<template v-for="tag in company.tags" :key="tag">
<v-chip label class="ma-1" :color="props.highlightTag === tag ? 'teal' : void (0)"
@click="emit('tagClicked', tag)">
{{ tag }}
</v-chip>
</template>
</template>
</div>
<slot></slot>
</v-card>
</template>
<script setup lang="ts">
import { Company } from '@/api';
import { roundTo } from 'round-to';
import { reactive, computed } from 'vue';
const props = defineProps<{
company: Company,
highlightTag?: string,
minimal?: boolean,
markerColor?: string
}>();
const emit = defineEmits<{
(e: 'tagClicked', tag: string): void
}>()
const company = computed(() => props.company);
type ColorScale = { gt?: number, color: string }[];
interface Metric {
title: 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',
minValue: 0,
maxValue: 150,
value: c => c['Valuation'],
scale: [
{ gt: 1.1, color: COLORS.bad },
{ gt: 0.9, color: COLORS.warning },
{ color: COLORS.good }
]
},
{
title: 'Financial Health',
minValue: 0,
maxValue: 500,
value: c => c['Financial Health'],
scale: [
{ gt: 1.1, color: COLORS.bad },
{ gt: 0.9, color: COLORS.warning },
{ color: COLORS.good }
]
},
{
title: 'Estimated Growth',
minValue: 0,
maxValue: 200,
value: c => c['Estimated Growth'],
symbol: ' %',
scale: [
{ gt: 8, color: COLORS.good },
{ gt: 0, color: COLORS.warning },
{ color: COLORS.bad }
]
},
{
title: 'Past Performance',
minValue: -100,
maxValue: 200,
value: c => c['Past Performance'],
symbol: ' %',
scale: [
{ gt: 5, color: COLORS.good },
{ gt: -5, color: COLORS.warning },
{ gt: -Infinity, color: COLORS.bad }
]
}
]);
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),
color: (c: Company) => {
const value = e.value(c);
for (const s of e.scale) {
if (typeof s.gt !== 'number' || value > s.gt) {
return s.color;
}
}
return 'blue-grey' // default value, should never be displayed
}
})));
const formatCurrency = (d: number) => {
if (d < 1000) return `${d}`;
if (d < 1_000_000) return `${Math.round(d / 1000)} K`;
if (d < 1_000_000_000) return `${Math.round(d / 1_000_000)} M`
return `${Math.round(d / 1_000_000_000)} B`
}
</script>

View file

@ -8,6 +8,21 @@
</v-app-bar-title>
</v-app-bar>
<v-container class="fill-height">
<v-row style="width: 100%">
<h1 class="ma-4">Company comparison</h1>
</v-row>
<v-row>
<template v-if="companies.loading" v-for="i in tickers" :key="i">
<v-col cols="12" md="6" lg="4">
<v-skeleton-loader class="mx-auto" type="card"></v-skeleton-loader>
</v-col>
</template>
<template v-else>
<v-col cols="12" md="6" lg="4" v-for="company in companies.data" :key="company.ticker">
<company-card :company="company" minimal :marker-color="getTickerColor(company.ticker)" />
</v-col>
</template>
</v-row>
<v-row>
<v-col cols="12">
<v-card>
@ -23,7 +38,7 @@
<v-btn value="5Y">5Y</v-btn>
<v-btn value="MAX">Max</v-btn>
</v-btn-toggle>
<v-skeleton-loader class="chart-loader" v-if="loading" />
<v-skeleton-loader class="chart-loader" v-if="stockPrice.loading" />
<ag-charts-vue class="chart" v-else :options="options" />
</v-card-text>
</v-card>
@ -34,7 +49,7 @@
<style>
.chart-loader .v-skeleton-loader__bone.v-skeleton-loader__image {
width: 100%;
width: 100%;
height: 30em !important;
}
@ -45,14 +60,16 @@
</style>
<script setup lang="ts">
import { AgAxisLabelFormatterParams, AgSeriesTooltipRendererParams, time } from 'ag-charts-community';
import { AgAxisLabelFormatterParams, time } from 'ag-charts-community';
import { AgChartsVue } from 'ag-charts-vue3';
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { PriceHistory, getPriceHistory } from '@/api';
import { Company, PriceHistory, getCompanies, getPriceHistory } from '@/api';
import { DateTime, DurationLike } from 'luxon';
import { TimeInterval } from 'ag-charts-community/dist/cjs/es5/util/time/interval';
import { roundTo } from 'round-to';
import { defineLoader } from '@/api/loader';
import CompanyCard from '@/components/CompanyCard.vue';
const route = useRoute();
const router = useRouter();
@ -62,6 +79,8 @@ const goHome = () => router.push('/');
type TimeOptions = '1M' | '3M' | '6M' | '1Y' | '5Y' | 'MAX';
const timeToggle = ref<TimeOptions>('1M');
const companies = defineLoader<Company[]>(() => getCompanies(tickers.value));
const stockPrice = defineLoader<PriceHistory[]>(() => getPriceHistory(tickers.value));
const optToDuration: Record<TimeOptions, [DurationLike | undefined, TimeInterval, string]> = {
'1M': [{ months: 1 }, time.day, '%d'],
@ -69,19 +88,19 @@ const optToDuration: Record<TimeOptions, [DurationLike | undefined, TimeInterval
'6M': [{ months: 6 }, time.friday.every(2), '%m-%d'],
'1Y': [{ years: 1 }, time.month, '%Y-%m'],
'5Y': [{ years: 5 }, time.month.every(3, {
snapTo: DateTime.utc(2000, 1, 1).toJSDate()
snapTo: DateTime.utc(2000, 1, 1).toJSDate() // snap to solar year quarters
}), '%Y-%m'],
'MAX': [undefined, time.year.every(2), '%Y']
};
const loading = ref<boolean>(true);
const priceHistoryData = ref<PriceHistory[]>([]);
const tickers = ref<string[]>([]);
const colors = ['#E91E63', '#FF9800', '#3F51B5'];
const colors = ['#9C27B0', '#D32F2F', '#3F51B5'];
const getTickerColor = (ticker: string) => colors[tickers.value.indexOf(ticker)];
const options = computed(() => {
if (loading.value) return null;
if (stockPrice.loading) return null;
const maxDate = DateTime.now();
const opts = optToDuration[timeToggle.value];
@ -91,19 +110,19 @@ const options = computed(() => {
title: params.title,
content: DateTime.fromMillis(params.xValue).toISODate() + ': ' + roundTo(params.yValue, 2),
});
return {
theme: 'ag-material',
data: priceHistoryData.value.map(e => ({ ...e, date: Date.parse(e.date) })),
series: tickers.value.map((t: string, i: number) => ({
xKey: 'date',
yKey: t,
yName: t,
stroke: colors[i],
data: stockPrice.data?.map(e => ({ ...e, date: Date.parse(e.date) })),
series: tickers.value.map((t: string) => ({
xKey: 'date',
yKey: t,
yName: t,
stroke: getTickerColor(t),
tooltip: { renderer: renderer },
marker: {
fill: colors[i],
stroke: colors[i]
fill: getTickerColor(t),
stroke: getTickerColor(t)
}
})),
axes: [
@ -127,7 +146,9 @@ const options = computed(() => {
label: {
format: '$~s',
formatter: (params: AgAxisLabelFormatterParams) =>
params?.formatter?.(params.value).replace('k', 'K').replace('G', 'B') ?? ''
params?.formatter?.(params.value)
.replace('k', 'K')
.replace('G', 'B') ?? ''
},
},
],
@ -140,11 +161,7 @@ const options = computed(() => {
// load chart data
onMounted(() => {
tickers.value = route.params.tickers.toString().split(',');
getPriceHistory(tickers.value).then((p: PriceHistory[]) => {
loading.value = false;
priceHistoryData.value = p;
});
stockPrice.load();
companies.load();
});
</script>

View file

@ -17,47 +17,9 @@
<v-skeleton-loader class="mx-auto" type="card"></v-skeleton-loader>
</v-col>
</template>
<template v-else v-for="company in filteredCompanies" :key="company.ticker">
<v-col cols="12" md="6" lg="4">
<v-card class="ma-1 fill-height d-flex flex-column">
<div class="d-flex stretch align-center flex-0">
<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 class="flex-0">
<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(company) }}{{ m.symbol ?? '' }}</span>
</div>
<v-progress-linear :color="m.color(company)" :model-value="m.percentage(company)"></v-progress-linear>
</div>
</v-card-text>
<div class="px-4 flex-0">
<v-chip label color="pink" class="ma-1">
<v-icon start icon="mdi-chart-timeline-variant"></v-icon>
{{ company.ticker }}
</v-chip>
<v-chip label color="green" class="ma-1">
<v-icon start icon="mdi-currency-usd"></v-icon>
{{ formatCurrency(company['market cap']) }}
</v-chip>
<template v-for="tag in company.tags" :key="tag">
<v-chip label class="ma-1" :color="searchText == tag ? 'teal' : void (0)" @click="setSearch(tag)">{{ tag
}}</v-chip>
</template>
</div>
<template v-else>
<v-col cols="12" md="6" lg="4" v-for="company in filteredCompanies" :key="company.ticker">
<company-card :company="company" :highlight-tag="searchText" @tag-clicked="setSearch($event)">
<v-card-actions class="flex-1">
<v-btn :variant="isSelected(company.ticker) ? 'tonal' : 'text'"
@click="(isSelected(company.ticker) ? unselect : select)(company.ticker)"
@ -65,6 +27,13 @@
{{ isSelected(company.ticker) ? 'Unselect' : 'Select' }}
</v-btn>
</v-card-actions>
</company-card>
</v-col>
<v-col cols="12" md="6" lg="4" v-if="filteredCompanies.length === 0">
<v-card>
<v-card-text>
No companies found.
</v-card-text>
</v-card>
</v-col>
</template>
@ -88,11 +57,11 @@
<script lang="ts" setup>
import { getCompanies, Company } from '@/api';
import { ref, reactive, computed, watch } from 'vue';
import { roundTo } from 'round-to';
import { ref, reactive, watch } from 'vue';
import debounce from 'debounce';
import Fuse from 'fuse.js';
import { useRouter } from 'vue-router';
import CompanyCard from '@/components/CompanyCard.vue';
const MAX_SELECT = 3;
@ -139,110 +108,10 @@ const goToComparison = (tickers: string[]) => router.push('/comparison/' + ticke
watch(filteredCompanies, () => loading.value = false);
type ColorScale = { gt?: number, color: string }[];
interface Metric {
title: 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',
minValue: 0,
maxValue: 150,
value: c => c['Valuation'],
scale: [
{ gt: 1.1, color: COLORS.bad },
{ gt: 0.9, color: COLORS.warning },
{ color: COLORS.good }
]
},
{
title: 'Financial Health',
minValue: 0,
maxValue: 500,
value: c => c['Financial Health'],
scale: [
{ gt: 1.1, color: COLORS.bad },
{ gt: 0.9, color: COLORS.warning },
{ color: COLORS.good }
]
},
{
title: 'Estimated Growth',
minValue: 0,
maxValue: 200,
value: c => c['Estimated Growth'],
symbol: ' %',
scale: [
{ gt: 8, color: COLORS.good },
{ gt: 0, color: COLORS.warning },
{ color: COLORS.bad }
]
},
{
title: 'Past Performance',
minValue: -100,
maxValue: 200,
value: c => c['Past Performance'],
symbol: ' %',
scale: [
{ gt: 5, color: COLORS.good },
{ gt: -5, color: COLORS.warning },
{ gt: -Infinity, color: COLORS.bad }
]
}
]);
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),
color: (c: Company) => {
const value = e.value(c);
for (const s of e.scale) {
if (typeof s.gt !== 'number' || value > s.gt) {
return s.color;
}
}
return 'blue-grey' // default value, should never be displayed
}
})));
getCompanies().then(cs => {
companies.value = cs;
const myIndex = Fuse.createIndex(['ceo', 'company name', 'description', 'sector', 'tags', 'ticker', 'website'], cs);
fuse = new Fuse(cs, { threshold: 0.5, ignoreLocation: true }, myIndex);
filteredCompanies.value = cs;
});
const formatCurrency = (d: number) => {
if (d < 1000) return `${d}`;
if (d < 1_000_000) return `${Math.round(d / 1000)} K`;
if (d < 1_000_000_000) return `${Math.round(d / 1_000_000)} M`
return `${Math.round(d / 1_000_000_000)} B`
}
</script>

View file

@ -6,7 +6,7 @@ from backend.api.closing_price import get_closing_price_hist
import os
import sys
import subprocess
from typing import Optional
ROOT_DIR: str = os.path.dirname(__file__)
@ -24,14 +24,14 @@ def index():
@app.route('/companies', methods=['GET'])
def companies() -> object:
return jsonify(get_companies(ROOT_DIR))
@app.route('/companies/<path:tickers>', methods=['GET'])
def companies(tickers: Optional[str] = None) -> object:
return jsonify(get_companies(None if tickers is None else tickers.split('/')))
@app.route('/price_history/<tickers>', methods=['GET'])
def price_history(tickers) -> object:
tickers: list[str] = str(tickers).split(',')
return jsonify(get_closing_price_hist(tickers))
@app.route('/price_history/<path:tickers>', methods=['GET'])
def price_history(tickers: Optional[str]) -> object:
return jsonify(get_closing_price_hist(tickers.split('/')))
@app.route('/companies/logos/<ticker>')