Marker style
This commit is contained in:
parent
34d7955870
commit
636cc119e6
5 changed files with 108 additions and 109 deletions
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<v-row>
|
<v-card variant="outlined">
|
||||||
<v-col cols="12">
|
|
||||||
<v-card>
|
|
||||||
<v-card-item>
|
<v-card-item>
|
||||||
<v-card-title>Past Performance</v-card-title>
|
<v-card-title>Past Performance</v-card-title>
|
||||||
</v-card-item>
|
</v-card-item>
|
||||||
|
@ -10,34 +8,32 @@
|
||||||
<ag-charts-vue class="chart" v-else :options="options" />
|
<ag-charts-vue class="chart" v-else :options="options" />
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-col>
|
</template>
|
||||||
</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 {
|
||||||
|
@ -48,8 +44,11 @@
|
||||||
type: 'line',
|
type: 'line',
|
||||||
yKey: t,
|
yKey: t,
|
||||||
yName: t,
|
yName: t,
|
||||||
fill: getTickerColor(t),
|
|
||||||
stroke: getTickerColor(t),
|
stroke: getTickerColor(t),
|
||||||
|
marker: {
|
||||||
|
fill: getTickerColor(t),
|
||||||
|
stroke: getTickerColor(t)
|
||||||
|
},
|
||||||
tooltip: { renderer: renderer },
|
tooltip: { renderer: renderer },
|
||||||
highlightStyle: {
|
highlightStyle: {
|
||||||
item: { fillOpacity: 0 },
|
item: { fillOpacity: 0 },
|
||||||
|
@ -90,7 +89,7 @@
|
||||||
}, {
|
}, {
|
||||||
lineDash: [Infinity],
|
lineDash: [Infinity],
|
||||||
}],
|
}],
|
||||||
crossLines:[
|
crossLines: [
|
||||||
{
|
{
|
||||||
type: 'range',
|
type: 'range',
|
||||||
value: 0,
|
value: 0,
|
||||||
|
@ -104,9 +103,9 @@
|
||||||
position: 'bottom',
|
position: 'bottom',
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
epsCompData.load();
|
epsCompData.load();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
|
@ -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>
|
||||||
|
|
Reference in a new issue