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

Marker style

Browse source
This commit is contained in:
Claudio Maggioni 2023-05-29 16:35:27 +02:00
parent 34d7955870
commit 636cc119e6
5 changed files with 108 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
stockingly-frontend/src/components/BalanceSheet.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<v-card color="blue-grey-lighten-4"> <v-card variant="outlined">
<v-card-item> <v-card-item>
<v-card-title>Balance sheet</v-card-title> <v-card-title>Balance sheet</v-card-title>
</v-card-item> </v-card-item>

2
stockingly-frontend/src/components/EmployeesChart.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<v-card color="blue-grey-lighten-4"> <v-card variant="outlined">
<v-card-item> <v-card-item>
<v-card-title>Employees over time</v-card-title> <v-card-title>Employees over time</v-card-title>
</v-card-item> </v-card-item>

2
stockingly-frontend/src/components/EpsChart.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<v-card color="blue-grey-lighten-4"> <v-card variant="outlined">
<v-card-item> <v-card-item>
<v-card-title>Earnings per Share (EPS)</v-card-title> <v-card-title>Earnings per Share (EPS)</v-card-title>
</v-card-item> </v-card-item>

195
stockingly-frontend/src/components/EpsComparisonChart.vue
View file

@ -1,112 +1,111 @@
<template> <template>
<v-row> <v-card variant="outlined">
<v-col cols="12"> <v-card-item>
<v-card> <v-card-title>Past Performance</v-card-title>
<v-card-item> </v-card-item>
<v-card-title>Past Performance</v-card-title> <v-card-text>
</v-card-item> <v-skeleton-loader class="chart-loader" v-if="epsCompData.loading" />
<v-card-text> <ag-charts-vue class="chart" v-else :options="options" />
<v-skeleton-loader class="chart-loader" v-if="epsCompData.loading" /> </v-card-text>
<ag-charts-vue class="chart" v-else :options="options" /> </v-card>
</v-card-text> </template>
</v-card>
</v-col>
</v-row>
</template>
<script setup lang="ts"> <script setup lang="ts">
import { EpsComp, getEpsComp } from '@/api'; import { EpsComp, getEpsComp } from '@/api';
import { defineLoader } from '@/api/loader'; import { defineLoader } from '@/api/loader';
import { DateTime } from 'luxon'; import { DateTime } from 'luxon';
import { AgAxisLabelFormatterParams } from 'ag-charts-community'; import { AgAxisLabelFormatterParams } from 'ag-charts-community';
import { roundTo } from 'round-to'; import { roundTo } from 'round-to';
import { onMounted, computed } from 'vue'; import { onMounted, computed } from 'vue';
import { AgChartsVue } from 'ag-charts-vue3'; import { AgChartsVue } from 'ag-charts-vue3';
const renderer = (params: any) => ({ const renderer = (params: any) => ({
title: params.title, title: params.title,
content: DateTime.fromMillis(params.xValue).toFormat('yyyy-MM') + ': ' + roundTo(params.yValue, 4) + '%', content: DateTime.fromMillis(params.xValue).toFormat('yyyy-MM') + ': ' + roundTo(params.yValue, 4) + '%',
}); });
const props = defineProps<{ const props = defineProps<{
tickers: string[], tickers: string[],
colors: string[] colors: string[]
}>(); }>();
const getTickerColor = (ticker: string) => props.colors[props.tickers.indexOf(ticker)]; const getTickerColor = (ticker: string) => props.colors[props.tickers.indexOf(ticker)];
const epsCompData = defineLoader<EpsComp[]>(() => getEpsComp(props.tickers)); const epsCompData = defineLoader<EpsComp[]>(() => getEpsComp(props.tickers));
const options = computed(() => { const options = computed(() => {
if (epsCompData.loading) return null; if (epsCompData.loading) return null;
return { return {
theme: 'ag-material', theme: 'ag-material',
data: epsCompData.data?.map(e => ({ ...e, quarter: Date.parse(e.quarter) })), data: epsCompData.data?.map(e => ({ ...e, quarter: Date.parse(e.quarter) })),
series: props.tickers.map((t: string) => ({ series: props.tickers.map((t: string) => ({
xKey: 'quarter', xKey: 'quarter',
type: 'line', type: 'line',
yKey: t, yKey: t,
yName: t, yName: t,
stroke: getTickerColor(t),
marker: {
fill: getTickerColor(t), fill: getTickerColor(t),
stroke: getTickerColor(t), stroke: getTickerColor(t)
tooltip: { renderer: renderer }, },
highlightStyle: { tooltip: { renderer: renderer },
item: { fillOpacity: 0 }, highlightStyle: {
series: { enabled: false } item: { fillOpacity: 0 },
series: { enabled: false }
},
})),
axes: [
{
type: 'category',
position: 'bottom',
label: {
autoRotate: true,
autoRotateAngle: 335,
formatter: (params: any) => {
return DateTime.fromMillis(parseInt(params.value)).toFormat('yyyy-MM');
}
}, },
})), gridStyle: [
axes: [ {
{
type: 'category',
position: 'bottom',
label: {
autoRotate: true,
autoRotateAngle: 335,
formatter: (params: any) => {
return DateTime.fromMillis(parseInt(params.value)).toFormat('yyyy-MM');
}
},
gridStyle: [
{
lineDash: [Infinity],
}, {
lineDash: [Infinity],
}
],
},
{
type: 'number',
position: 'left',
label: {
format: '$~s',
formatter: (params: AgAxisLabelFormatterParams) => {
params?.formatter?.(params.value)
return params.value + '%';
}
},
gridStyle: [{
lineDash: [Infinity], lineDash: [Infinity],
}, { }, {
lineDash: [Infinity], lineDash: [Infinity],
}], }
crossLines:[ ],
{ },
type: 'range', {
value: 0, type: 'number',
lineDash: [6, 3], position: 'left',
stroke: 'black', label: {
} format: '$~s',
] formatter: (params: AgAxisLabelFormatterParams) => {
params?.formatter?.(params.value)
return params.value + '%';
}
}, },
], gridStyle: [{
legend: { lineDash: [Infinity],
position: 'bottom', }, {
} lineDash: [Infinity],
}; }],
}); crossLines: [
{
type: 'range',
value: 0,
lineDash: [6, 3],
stroke: 'black',
}
]
},
],
legend: {
position: 'bottom',
}
};
});
onMounted(() => { onMounted(() => {
epsCompData.load(); epsCompData.load();
}); });
</script> </script>

2
stockingly-frontend/src/components/StockPrice.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<v-card color="blue-grey-lighten-4"> <v-card variant="outlined">
<v-card-item> <v-card-item>
<v-card-title>Stock price over time</v-card-title> <v-card-title>Stock price over time</v-card-title>
</v-card-item> </v-card-item>