336 lines
11 KiB
Svelte
336 lines
11 KiB
Svelte
<script lang='ts'>
|
|
|
|
import { Chart } from 'svelte-echarts'
|
|
import { init, use } from 'echarts/core'
|
|
|
|
import { BarChart } from 'echarts/charts'
|
|
import { GridComponent } from 'echarts/components'
|
|
import { CanvasRenderer } from 'echarts/renderers'
|
|
use([BarChart, GridComponent, CanvasRenderer])
|
|
|
|
import {stockTicker, etfTicker, cryptoTicker, assetType} from '$lib/store';
|
|
|
|
export let quantData;
|
|
|
|
|
|
|
|
const months = [
|
|
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
|
|
];
|
|
|
|
let firstElementKey;
|
|
|
|
let monthlyReturnsData;
|
|
let benchmarkMonthlyReturnsData;
|
|
|
|
|
|
|
|
|
|
|
|
const plotAnnualReturn = () => {
|
|
|
|
const annualReturnList = [];
|
|
const annualReturnListBenchmark = [];
|
|
|
|
// Find the maximum year in monthlyReturnsData
|
|
// Find the maximum year in monthlyReturnsData
|
|
let maxYear = Math?.max(...Object?.keys(monthlyReturnsData)?.map(year => parseInt(year)));
|
|
|
|
// Iterate over the last 4 years
|
|
for (let year = maxYear; year > maxYear - 4; year--) {
|
|
if (monthlyReturnsData.hasOwnProperty(year.toString())) {
|
|
const values = monthlyReturnsData[year.toString()];
|
|
annualReturnList.push(values[values.length - 1]);
|
|
}
|
|
}
|
|
|
|
// Find the maximum year in benchmarkMonthlyReturnsData
|
|
maxYear = Math?.max(...Object?.keys(benchmarkMonthlyReturnsData)?.map(year => parseInt(year)));
|
|
|
|
// Iterate over the last 4 years
|
|
for (let year = maxYear; year > maxYear - 4; year--) {
|
|
if (benchmarkMonthlyReturnsData.hasOwnProperty(year.toString())) {
|
|
const values = benchmarkMonthlyReturnsData[year.toString()];
|
|
annualReturnListBenchmark.push(values[values.length - 1]);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const options = {
|
|
grid: {
|
|
left: "2%",
|
|
right: "2%",
|
|
bottom: '0%',
|
|
height: "90%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
data: ['2020', '2021', '2022', '2023','2024'],
|
|
type: 'category',
|
|
axisTick: {
|
|
alignWithLabel: true,
|
|
},
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false, // Disable y-axis grid lines
|
|
},
|
|
},
|
|
{
|
|
type: 'value',
|
|
axisLabel: {
|
|
formatter: '{value} %', // Display value with a percent sign
|
|
},
|
|
splitLine: {
|
|
show: false, // Disable y-axis grid lines
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: $assetType === 'etf' ? $etfTicker : $assetType === 'crypto' ? $cryptoTicker : $stockTicker,
|
|
data: annualReturnList,
|
|
type: 'bar',
|
|
barWidth: '30%',
|
|
smooth: true,
|
|
itemStyle: {
|
|
color: '#398EC2',
|
|
},
|
|
|
|
},
|
|
{
|
|
name: 'S&P500',
|
|
data: annualReturnListBenchmark,
|
|
type: 'bar',
|
|
barWidth: '30%',
|
|
smooth: true,
|
|
itemStyle: {
|
|
color: '#FEDD78',
|
|
},
|
|
|
|
|
|
},
|
|
],
|
|
|
|
};
|
|
|
|
|
|
return options;
|
|
|
|
}
|
|
|
|
const plotMonthlyDistributionReturn = () => {
|
|
const allReturns = Object?.values(monthlyReturnsData)?.flat();
|
|
|
|
let histogramData = [];
|
|
// Calculate histogram data
|
|
let binSize = 6;
|
|
let maxBin = Math.ceil(Math.max(...allReturns) / binSize) * binSize;
|
|
let minBin = Math.floor(Math.min(...allReturns) / binSize) * binSize;
|
|
|
|
for (let i = minBin; i <= maxBin; i += binSize) {
|
|
let count = allReturns.filter(r => r >= i && r < i + binSize)?.length;
|
|
histogramData.push([i, count]);
|
|
}
|
|
|
|
const options = {
|
|
grid: {
|
|
left: "0%",
|
|
right: "0%",
|
|
bottom: '0%',
|
|
height: "90%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
name: 'Return (%)', // X-axis label
|
|
nameLocation: 'center',
|
|
axisTick: {
|
|
alignWithLabel: true,
|
|
},
|
|
|
|
nameTextStyle: {
|
|
color: 'white', // Set label color to white
|
|
padding: [30, 0, 0, 0],
|
|
},
|
|
}
|
|
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: 'Frequency', // X-axis label
|
|
nameLocation: 'center',
|
|
splitLine: {
|
|
show: false, // Disable y-axis grid lines
|
|
},
|
|
nameTextStyle: {
|
|
color: 'white', // Set label color to white
|
|
padding: [0, 0, 20, 0],
|
|
},
|
|
},
|
|
{
|
|
type: 'value',
|
|
axisLabel: {
|
|
formatter: '{value} %', // Display value with a percent sign
|
|
},
|
|
splitLine: {
|
|
show: false, // Disable y-axis grid lines
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: 'Frequency of Return',
|
|
type: 'bar',
|
|
barWidth: '80%',
|
|
itemStyle: {
|
|
color: 'white',
|
|
},
|
|
data: histogramData
|
|
}
|
|
],
|
|
|
|
};
|
|
|
|
return options;
|
|
};
|
|
|
|
let displayReturn = 'annualReturn';
|
|
let optionsAnnualReturn;
|
|
let optionsMonthlyDistributionReturn;
|
|
|
|
function changeStatement(event)
|
|
|
|
{
|
|
|
|
displayReturn = event.target.value;
|
|
|
|
}
|
|
|
|
|
|
|
|
$: {
|
|
|
|
if (($assetType === 'etf' ? $etfTicker : $assetType === 'crypto' ? $cryptoTicker : $stockTicker) && typeof window !== 'undefined')
|
|
{
|
|
try {
|
|
firstElementKey = Object?.keys(quantData)[0];
|
|
monthlyReturnsData = quantData[firstElementKey]['Monthly Return'];
|
|
benchmarkMonthlyReturnsData = quantData['SPY']['Monthly Return']
|
|
}
|
|
|
|
catch(e) {
|
|
monthlyReturnsData = [];
|
|
benchmarkMonthlyReturnsData = [];
|
|
}
|
|
|
|
|
|
if (displayReturn === 'annualReturn')
|
|
{
|
|
optionsAnnualReturn = plotAnnualReturn()
|
|
}
|
|
else if(displayReturn === 'monthlyDistributionReturn')
|
|
{
|
|
optionsMonthlyDistributionReturn = plotMonthlyDistributionReturn();
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<section class="mt-4 overflow-hidden text-white h-full">
|
|
|
|
<div class="w-full m-auto h-full overflow-hidden">
|
|
<main>
|
|
|
|
<div class="text-start mr-auto w-full">
|
|
<select class="w-48 select select-bordered select-sm p-0 pl-5 ml-2 mt-2 bg-[#2A303C]" on:change={changeStatement}>
|
|
<option disabled>Choose your Return</option>
|
|
<option value="annualReturn" selected>
|
|
Annual Return
|
|
</option>
|
|
<option value="monthlyDistributionReturn" >
|
|
Distribution of Monthly Returns
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
|
|
<div class="rounded-2xl pl-3 sm:pr-0 pt-3 w-full mt-4">
|
|
|
|
{#if displayReturn === 'annualReturn'}
|
|
<h1 class="text-white m-auto font-bold text-lg text-center">
|
|
Annual Return (%)
|
|
</h1>
|
|
|
|
<div class="text-white flex flex-row items-center justify-center m-auto font-medium text-md text-center mt-3">
|
|
|
|
<div class="flex flex-row items-center">
|
|
<div class="h-full bg-gray-800 transform -translate-x-1/2 " aria-hidden="true"></div>
|
|
<div class="w-4 h-4 bg-[#3E9CD5] border-4 box-content border-gray-900 rounded-full transform -translate-x-1/2" aria-hidden="true"></div>
|
|
<span class="text-white font-medium inline-block">
|
|
{$assetType === 'etf' ? $etfTicker : $assetType === 'crypto' ? $cryptoTicker : $stockTicker}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex flex-row items-center ml-10">
|
|
<div class="h-full bg-gray-800 transform -translate-x-1/2 " aria-hidden="true"></div>
|
|
<div class="w-4 h-4 bg-[#FFF384] border-4 box-content border-gray-900 rounded-full transform -translate-x-1/2" aria-hidden="true"></div>
|
|
<span class="text-white font-medium inline-block">
|
|
S&P500
|
|
</span>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="app w-full h-[300px] mt-5 mb-16">
|
|
<Chart {init} options={optionsAnnualReturn} class="chart" />
|
|
</div>
|
|
|
|
|
|
{:else if displayReturn === 'monthlyDistributionReturn'}
|
|
|
|
<h1 class="text-white m-auto font-bold text-lg sm:-mb-2 text-center">
|
|
Distribution of Monthly Returns
|
|
</h1>
|
|
|
|
<div class="app w-full h-[300px] mt-5 mb-16">
|
|
<Chart {init} options={optionsMonthlyDistributionReturn} class="chart" />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
|
|
.app {
|
|
height: 300px;
|
|
max-width: 100%; /* Ensure chart width doesn't exceed the container */
|
|
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.app {
|
|
height: 210px;
|
|
}
|
|
}
|
|
|
|
.chart {
|
|
width: 100%;
|
|
}
|
|
|
|
</style> |