maggicl/va-project
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'master' of https://gitlab.com/usi-si-teaching/msde/2022-2023/visual-analytics-atelier/group-projects/group-1

Browse source
This commit is contained in:
Pietro Rodolfo Masera 2023-05-17 13:44:46 +02:00
commit 80bcd52993
6 changed files with 104 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
Chartotherpage.xlsx Normal file
View file

Binary file not shown.

3
stockingly-frontend/package.json
View file

@ -11,6 +11,8 @@
"dependencies": {
"@mdi/font": "^7.2.96",
"core-js": "^3.29.0",
"debounce": "^1.2.1",
"fuse.js": "^6.6.2",
"roboto-fontface": "*",
"vue": "^3.2.0",
"vue-router": "^4.0.0",
@ -19,6 +21,7 @@
},
"devDependencies": {
"@babel/types": "^7.21.4",
"@types/debounce": "^1.2.1",
"@types/node": "^18.15.0",
"@types/webfontloader": "^1.6.35",
"@vitejs/plugin-vue": "^3.0.3",

23
stockingly-frontend/src/layouts/default/AppBar.vue
View file

@ -1,23 +0,0 @@
<template>
<v-app-bar color="primary">
<v-app-bar-title>
Stockingly
</v-app-bar-title>
<v-tabs centered>
<v-tab v-for="link in links" :key="link">
{{ link }}
</v-tab>
</v-tabs>
<v-spacer></v-spacer>
</v-app-bar>
</template>
<script lang="ts" setup>
const links = [
'Dashboard',
'Messages',
'Profile',
'Updates',
];
</script>

3
stockingly-frontend/src/layouts/default/Default.vue
View file

@ -1,12 +1,9 @@
<template>
<v-app>
<default-bar />
<default-view />
</v-app>
</template>
<script lang="ts" setup>
import DefaultBar from './AppBar.vue'
import DefaultView from './View.vue'
</script>

98
stockingly-frontend/src/views/Home.vue
View file

@ -1,4 +1,15 @@
<template>
<v-app-bar color="primary">
<v-app-bar-title>
Stockingly
</v-app-bar-title>
<v-text-field hide-details prepend-icon="mdi-magnify" single-line v-model="searchText"
placeholder="Search company..." />
<v-btn icon @click="clearSearch">
<v-icon>mdi-backspace-outline</v-icon>
</v-btn>
</v-app-bar>
<v-container class="fill-height">
<v-row>
<template v-if="loading" v-for="i in Array.from({ length: 10 }, (_, i) => i)" :key="i">
@ -6,13 +17,12 @@
<v-skeleton-loader class="mx-auto" type="card"></v-skeleton-loader>
</v-col>
</template>
<template v-else v-for="company in companies" :key="company.ticker">
<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">
<div class="d-flex stretch align-center">
<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"/>
<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>
@ -20,7 +30,7 @@
</v-card-item>
</div>
<v-card-text>
<v-card-text class="flex-0">
<p class="text--primary">
{{ company.description }}
</p>
@ -33,7 +43,7 @@
</div>
</v-card-text>
<div class="px-4">
<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 }}
@ -43,22 +53,85 @@
{{ formatCurrency(company['market cap']) }}
</v-chip>
<template v-for="tag in company.tags" :key="tag">
<v-chip label class="ma-1">{{ tag }}</v-chip>
<v-chip label class="ma-1" :color="searchText == tag ? 'teal' : void (0)" @click="setSearch(tag)">{{ tag
}}</v-chip>
</template>
</div>
<v-card-actions class="flex-1">
<v-btn :variant="isSelected(company.ticker) ? 'tonal' : 'text'"
@click="(isSelected(company.ticker) ? unselect : select)(company.ticker)"
:color="isSelected(company.ticker) ? 'orange-darken-4' : void (0)">
{{ isSelected(company.ticker) ? 'Unselect' : 'Select' }}
</v-btn>
</v-card-actions>
</v-card>
</v-col>
</template>
</v-row>
</v-container>
<v-sheet class="d-flex align-center justify-center" style="position: fixed; bottom: 0; width: 100%"
v-if="selected.length > 0" color="blue-grey-lighten-5" :elevation="6">
<small class="ma-2">{{ selected.length }} / {{ MAX_SELECT }} companies selected:</small>
<v-chip class="ma-2" color="secondary" closable style="flex: initial !important" v-for="s in selected" :key="s"
@click:close="unselect(s)">{{ s }}</v-chip>
<v-btn class="ma-2" variant="flat" size="small" color="primary" prepend-icon="mdi-chart-areaspline-variant">
Compare
</v-btn>
<v-btn class="ma-2" size="small" variant="flat" color="error" @click="selected.splice(0, selected.length)"
prepend-icon="mdi-delete">
Cancel
</v-btn>
</v-sheet>
</template>
<script lang="ts" setup>
import { getCompanies, Company } from '@/api';
import { ref, reactive, computed, watch } from 'vue';
import debounce from 'debounce';
import Fuse from 'fuse.js';
const MAX_SELECT = 3;
const loading = ref(true);
const companies = reactive<Company[]>([]);
const companies = ref<Company[]>([]);
const filteredCompanies = ref<(Company & { score?: number })[]>([]);
const selected = reactive<string[]>([]);
const searchText = ref("");
let fuse: Fuse<Company> | undefined = undefined;
const search = debounce(() => setTimeout(() => {
filteredCompanies.value = fuse!.search(searchText.value).map(e => ({ ...e.item, score: e.score }))
}, 800));
watch(searchText, () => {
if (!fuse) return;
if (searchText.value === '') {
filteredCompanies.value = companies.value;
loading.value = false;
return;
}
else {
loading.value = true;
search();
}
});
const isSelected = (ticker: string) => selected.indexOf(ticker) !== -1;
const unselect = (ticker: string) => {
if (isSelected(ticker)) selected.splice(selected.indexOf(ticker), 1);
}
const select = (ticker: string) => {
if (!isSelected(ticker) && selected.length < MAX_SELECT) selected.push(ticker);
}
const clearSearch = () => searchText.value = '';
const setSearch = (text: string) => searchText.value = text;
watch(filteredCompanies, () => loading.value = false);
interface Metric {
title: string,
@ -92,10 +165,11 @@ const metrics = computed<(Metric & { percentage: (c: Company) => number })[]>(()
percentage: (c: Company) => (e.value(c) - e.minValue) * 100 / (e.maxValue - e.minValue)
})));
getCompanies().then(cs => {
loading.value = false;
companies.push(...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) => {

15
stockingly-frontend/yarn.lock
View file

@ -218,6 +218,11 @@
"@nodelib/fs.scandir" "2.1.5"
fastq "^1.6.0"
"@types/debounce@^1.2.1":
version "1.2.1"
resolved "https://registry.yarnpkg.com/@types/debounce/-/debounce-1.2.1.tgz#79b65710bc8b6d44094d286aecf38e44f9627852"
integrity sha512-epMsEE85fi4lfmJUH/89/iV/LI+F5CvNIvmgs5g5jYFPfhO2S/ae8WSsLOKWdwtoaZw9Q2IhJ4tQ5tFCcS/4HA==
"@types/json-schema@^7.0.9":
version "7.0.11"
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
@ -714,6 +719,11 @@ de-indent@^1.0.2:
resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
debounce@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
version "4.3.4"
resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
@ -991,6 +1001,11 @@ fsevents@~2.3.2:
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
fuse.js@^6.6.2:
version "6.6.2"
resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-6.6.2.tgz#fe463fed4b98c0226ac3da2856a415576dc9a111"
integrity sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA==
glob-parent@^5.1.2, glob-parent@~5.1.2:
version "5.1.2"
resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"