company logos added

This commit is contained in:
Claudio Maggioni 2023-05-15 11:50:07 +02:00
parent 75f40c6518
commit e5fbed7fa9
4 changed files with 37 additions and 15 deletions

1
company_generic.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 317 B

View File

@ -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())
fetch(BACKEND_URL + '/companies').then(r => r.json()).then(list => list.map((e: Company) => ({
...e,
logoSrc: `${BACKEND_URL}/companies/logos/${e.ticker}`
})));

View File

@ -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)
})));

View File

@ -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()