891 lines
42 KiB
Svelte
891 lines
42 KiB
Svelte
<script lang='ts'>
|
|
import { goto } from '$app/navigation';
|
|
import { screenWidth, userRegion, numberOfUnreadNotification} from '$lib/store';
|
|
import Searchbar from '$lib/components/Searchbar.svelte';
|
|
|
|
import AddPortfolio from '$lib/components/AddPortfolio.svelte';
|
|
|
|
import { onMount } from 'svelte';
|
|
import { fade } from 'svelte/transition';
|
|
|
|
export let data;
|
|
export let form;
|
|
|
|
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
|
|
|
|
|
|
|
const usRegion = ['cle1','iad1','pdx1','sfo1'];
|
|
let fastifyURL = import.meta.env.VITE_EU_FASTIFY_URL; // Set a default FASTIFY URL
|
|
userRegion.subscribe(value => {
|
|
if (usRegion.includes(value)) {
|
|
fastifyURL = import.meta.env.VITE_USEAST_FASTIFY_URL;
|
|
} else {
|
|
fastifyURL = import.meta.env.VITE_EU_FASTIFY_URL;
|
|
}
|
|
});
|
|
|
|
let isLoaded = false;
|
|
|
|
|
|
|
|
|
|
async function getUserPortfolio()
|
|
{
|
|
const postData = {'userId': data?.user?.id};
|
|
|
|
const response = await fetch(fastifyURL+'/get-portfolio', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(postData)
|
|
});
|
|
|
|
portfolio = (await response.json())?.items;
|
|
}
|
|
|
|
|
|
const currentDate = new Date();
|
|
const monthNames = [
|
|
'January', 'February', 'March', 'April', 'May', 'June',
|
|
'July', 'August', 'September', 'October', 'November', 'December'
|
|
];
|
|
|
|
const currentMonthIndex = currentDate.getMonth();
|
|
let displayMonth = 'n/a';
|
|
|
|
if (currentMonthIndex >= 0 && currentMonthIndex < monthNames.length) {
|
|
displayMonth = monthNames[currentMonthIndex];
|
|
}
|
|
|
|
let portfolio = [];
|
|
|
|
let lastUpdate = 'n/a';
|
|
|
|
let holdingsList = [];
|
|
let tradingHistoryList = [];
|
|
|
|
|
|
|
|
let LoginPopup;
|
|
|
|
onMount( async () => {
|
|
|
|
if(data?.user)
|
|
{
|
|
await getUserPortfolio();
|
|
}
|
|
else {
|
|
LoginPopup = (await import('$lib/components/LoginPopup.svelte')).default;
|
|
}
|
|
|
|
if (portfolio?.length !== 0)
|
|
{
|
|
holdingsList = portfolio?.at(0)['holdings'] || [];
|
|
tradingHistoryList = portfolio?.at(0)['tradingHistory'] || [];
|
|
tradingHistoryList.sort((a, b) => new Date(b?.date) - new Date(a?.date));
|
|
|
|
lastUpdate = portfolio[0]?.updated;
|
|
|
|
}
|
|
|
|
isLoaded = true;
|
|
|
|
})
|
|
|
|
|
|
let displayChange = 'Change in %';
|
|
let showTradingHistory = false;
|
|
|
|
|
|
|
|
function handleChange(state:string)
|
|
{
|
|
displayChange = state;
|
|
}
|
|
|
|
|
|
let deg = 0;
|
|
|
|
async function handleUpdatePortfolio() {
|
|
deg = (deg + 180) % 360;
|
|
|
|
await getUserPortfolio();
|
|
|
|
if (portfolio?.length !== 0)
|
|
{
|
|
holdingsList = portfolio[0]['holdings'] || [];
|
|
tradingHistoryList = portfolio[0]['tradingHistory'] || [];
|
|
tradingHistoryList.sort((a, b) => new Date(a?.date) - new Date(b?.date));
|
|
lastUpdate = portfolio[0]?.updated;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
let charNumber = 20;
|
|
|
|
$: {
|
|
if($screenWidth < 640) {
|
|
charNumber = 20;
|
|
}
|
|
else {
|
|
charNumber = 30
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<svelte:head>
|
|
<title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Portfolio · stocknear</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
|
|
<meta name="description" content="Join our monthly Portfolio Tournament for free to win real prizes.">
|
|
<!-- Other meta tags -->
|
|
<meta property="og:title" content="Portfolio · stocknear"/>
|
|
<meta property="og:description" content="Join our monthly Portfolio Tournament for free to win real prizes.">
|
|
<meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
|
|
<meta property="og:type" content="website"/>
|
|
<!-- Add more Open Graph meta tags as needed -->
|
|
|
|
<!-- Twitter specific meta tags -->
|
|
<meta name="twitter:card" content="summary_large_image"/>
|
|
<meta name="twitter:title" content="Portfolio · stocknear"/>
|
|
<meta name="twitter:description" content="Join our monthly Portfolio Tournament for free to win real prizes.">
|
|
<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
|
|
<!-- Add more Twitter meta tags as needed -->
|
|
</svelte:head>
|
|
|
|
|
|
|
|
|
|
<div class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 mb-40">
|
|
|
|
|
|
|
|
<div class="w-full max-w-4xl m-auto sm:bg-[#202020] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
|
|
|
<!-- Start Column -->
|
|
<div>
|
|
<div class="flex flex-col justify-center items-center">
|
|
<h1 class="text-center text-3xl sm:text-4xl text-white font-bold mb-2">
|
|
Portfolio Tournament
|
|
</h1>
|
|
<h1 class="text-center text-lg sm:text-2xl text-white font-medium mb-5">
|
|
{displayMonth} 2024 🚀
|
|
</h1>
|
|
</div>
|
|
|
|
<span class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center ">
|
|
🥇Secure the top position in the tournament to claim your fame and prize 🏆
|
|
</span>
|
|
</div>
|
|
<!-- End Column -->
|
|
|
|
<!-- Start Column -->
|
|
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
|
|
<svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<filter id="glow">
|
|
<feGaussianBlur stdDeviation="5" result="glow"/>
|
|
<feMerge>
|
|
<feMergeNode in="glow"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" />
|
|
</svg>
|
|
|
|
|
|
<div class="z-1 absolute top-7">
|
|
<img class="w-36 h-fit ml-2" src={cloudFrontUrl+"/assets/portfolio_icon.png"} alt="logo" loading="lazy">
|
|
</div>
|
|
</div>
|
|
<!-- End Column -->
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{#if isLoaded}
|
|
<div class="flex flex-col sm:flex-row justify-center sm:justify-start items-center mt-5">
|
|
</div>
|
|
|
|
{#if portfolio.length === 0}
|
|
|
|
<div class="bg-[#202020] pt-5 pb-5 mt-5 sm:rounded-2xl border-t border-b sm:border border-slate-800">
|
|
|
|
|
|
<div class="flex flex-row ">
|
|
<div class="text-slate-300 font-bold text-xl pl-5 w-full flex items-center">
|
|
Portfolio
|
|
</div>
|
|
|
|
|
|
|
|
<div class="w-3/4 flex ml-auto mr-3 flex-row justify-end items-center -mt-2">
|
|
<a href="/leaderboard" class="text-blue-400 hover:text-white font-medium text-lg mr-3 sm:mr-8 hover:underline">
|
|
Rank: 'n/a'
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="p-5 grid grid-cols-3 gap-10 flex justify-center items-center mb-2">
|
|
<!--Start Column Title-->
|
|
<div class="flex flex-col">
|
|
<div class="flex flex-row items-center">
|
|
<span class="text-white font-bold text-sm sm:text-lg">
|
|
Account Value
|
|
</span>
|
|
<label for="accountValueInfo" class="cursor-pointer">
|
|
<svg class="ml-1 w-5 h-5 inline-block" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#2A323C"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="info-circle"> <g> <circle cx="12" cy="12" data-name="--Circle" fill="none" id="_--Circle" r="10" stroke="#2A323C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle> <line fill="none" stroke="#2A323C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="12" y2="16"></line> <line fill="none" stroke="#2A323C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="8" y2="8"></line> </g> </g> </g> </g></svg>
|
|
</label>
|
|
</div>
|
|
|
|
<span class="text-white text-sm sm:text-[1rem] mt-2">
|
|
$100,000.00
|
|
</span>
|
|
</div>
|
|
<!--End Column Title-->
|
|
|
|
<!--Start Column Win Rate-->
|
|
<div class="flex flex-col">
|
|
<div class="flex flex-row items-center">
|
|
<span class="text-white font-bold text-sm sm:text-lg">
|
|
Available Cash
|
|
</span>
|
|
<label for="availableCashInfo" class="cursor-pointer">
|
|
<svg class="ml-1 w-5 h-5 inline-block" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#2A323C"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="info-circle"> <g> <circle cx="12" cy="12" data-name="--Circle" fill="none" id="_--Circle" r="10" stroke="#2A323C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle> <line fill="none" stroke="#2A323C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="12" y2="16"></line> <line fill="none" stroke="#2A323C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="8" y2="8"></line> </g> </g> </g> </g></svg>
|
|
</label>
|
|
</div>
|
|
<span class="text-white text-sm sm:text-[1rem] mt-2">
|
|
$100,000.00
|
|
</span>
|
|
</div>
|
|
<!--End Column Win Rate-->
|
|
|
|
<!--Start Column Performance-->
|
|
<div class="flex flex-col">
|
|
<div class="flex flex-row items-center">
|
|
<span class="text-white font-bold text-sm sm:text-lg">
|
|
Overall Return
|
|
</span>
|
|
<label for="overallReturnInfo" class="cursor-pointer">
|
|
<svg class="ml-1 w-5 h-5 inline-block" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#2A323C"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="info-circle"> <g> <circle cx="12" cy="12" data-name="--Circle" fill="none" id="_--Circle" r="10" stroke="#2A323C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle> <line fill="none" stroke="#2A323C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="12" y2="16"></line> <line fill="none" stroke="#2A323C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="8" y2="8"></line> </g> </g> </g> </g></svg>
|
|
</label>
|
|
</div>
|
|
<span class="text-white text-sm sm:text-[1rem] mt-2">
|
|
0.00%
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="flex flex-col justify-center items-center text-gray.400 font-bold text-2xl mt-10">
|
|
|
|
<label for="{data?.user ? 'addPortfolio' : 'userLogin'}" class="btn btn-md w-64 text-black rounded-lg bg-[#fff] cursor-pointer py-2.5 px-4 btn hover:bg-[#fff]">
|
|
Join Tournament
|
|
</label>
|
|
</div>
|
|
|
|
|
|
{:else}
|
|
|
|
|
|
<div class="bg-[#202020] border-t border-b sm:border border-slate-800 pt-5 pb-5 mt-5 sm:rounded-2xl">
|
|
|
|
|
|
<div class="flex flex-row items-center">
|
|
<div class="text-slate-300 font-bold text-xl pl-5 w-full flex items-center">
|
|
Portfolio
|
|
<label on:click={handleUpdatePortfolio} class="sm:cursor-pointer rounded-full w-8 h-8 relative sm:hover:bg-gray-800 inline-block ml-2">
|
|
<svg class=" {`rotate-${deg}`} transition-transform rounded-full w-5 h-5 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2" fill="#ffffff" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 495.099 495.099" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g id="XMLID_73_"> <g id="XMLID_75_"> <path id="XMLID_76_" d="M203.82,1.475c-1.28,1.472-1.422,3.624-0.328,5.247l28.608,42.45 C129.497,57.098,48.389,142.944,48.389,247.546c0,59.917,26.716,113.6,68.714,150.149c3.524-4.587,7.842-8.597,13.274-11.282 l34.04-16.833c-38.96-26.623-64.605-71.382-64.605-122.034c0-75.819,57.44-138.424,131.083-146.733l-27.394,40.658 c-1.096,1.625-0.962,3.774,0.327,5.249c1.289,1.473,3.405,1.891,5.154,1.028c35.723-17.665,103.131-51.013,135.047-66.803 c5.734-2.837,5.722-11.012-0.013-13.846c-92.208-45.566-75.115-37.037-135.041-66.653C207.225-0.418,205.108,0.001,203.82,1.475z"></path> </g> <path id="XMLID_74_" d="M446.71,247.546c0-59.758-26.582-113.314-68.403-149.856c-3.507,4.494-7.734,8.445-12.957,10.998 l-34.415,17.015c38.817,26.649,64.353,71.309,64.353,121.844c0,75.585-57.089,138.005-130.397,146.634l27.335-40.551 c1.096-1.624,0.954-3.773-0.326-5.248c-1.289-1.473-3.408-1.891-5.156-1.028c-51.816,25.61-17.87,8.829-141.178,69.776 c-1.472,0.727-2.401,2.225-2.401,3.867v0.007c0,1.65,0.929,3.139,2.401,3.858c0,0,95.723,47.322,141.169,69.794 c1.748,0.862,3.867,0.443,5.156-1.028c1.289-1.475,1.423-3.626,0.326-5.249l-28.615-42.475 C365.919,437.667,446.71,351.946,446.71,247.546z"></path> </g> </g></svg>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="w-3/4 flex ml-auto mr-3 flex-row justify-end items-center -mt-2">
|
|
<a href="/leaderboard" class="text-blue-400 hover:text-white font-medium text-lg mr-3 sm:mr-8 hover:underline">
|
|
Rank: {portfolio[0]?.rank === 0 ? 'n/a' : portfolio[0]?.rank }
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="p-5 grid grid-cols-3 gap-10 flex justify-center items-center mb-2">
|
|
<!--Start Column Title-->
|
|
<div class="flex flex-col">
|
|
<div class="flex flex-row items-center">
|
|
<span class="text-white font-bold text-sm sm:text-lg">
|
|
Account Value
|
|
</span>
|
|
<label for="accountValueInfo" class="cursor-pointer">
|
|
<svg class="ml-1 w-5 h-5 inline-block" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#2A323C"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="info-circle"> <g> <circle cx="12" cy="12" data-name="--Circle" fill="none" id="_--Circle" r="10" stroke="#2A323C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle> <line fill="none" stroke="#2A323C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="12" y2="16"></line> <line fill="none" stroke="#2A323C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="8" y2="8"></line> </g> </g> </g> </g></svg>
|
|
</label>
|
|
</div>
|
|
|
|
<span class="text-white text-sm sm:text-[1rem] mt-2">
|
|
${new Intl.NumberFormat("en", {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2
|
|
}).format(portfolio?.at(0)?.accountValue)}
|
|
</span>
|
|
</div>
|
|
<!--End Column Title-->
|
|
|
|
<!--Start Column Win Rate-->
|
|
<div class="flex flex-col">
|
|
<div class="flex flex-row items-center">
|
|
<span class="text-white font-bold text-sm sm:text-lg">
|
|
Available Cash
|
|
</span>
|
|
<label for="availableCashInfo" class="cursor-pointer">
|
|
<svg class="ml-1 w-5 h-5 inline-block" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#2A323C"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="info-circle"> <g> <circle cx="12" cy="12" data-name="--Circle" fill="none" id="_--Circle" r="10" stroke="#2A323C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle> <line fill="none" stroke="#2A323C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="12" y2="16"></line> <line fill="none" stroke="#2A323C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="8" y2="8"></line> </g> </g> </g> </g></svg>
|
|
</label>
|
|
</div>
|
|
<span class="text-white text-sm sm:text-[1rem] mt-2">
|
|
|
|
${new Intl.NumberFormat("en", {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2
|
|
}).format(portfolio?.at(0)?.availableCash)}
|
|
</span>
|
|
</div>
|
|
<!--End Column Win Rate-->
|
|
|
|
<!--Start Column Performance-->
|
|
<div class="flex flex-col">
|
|
<div class="flex flex-row items-center">
|
|
<span class="text-white font-bold text-sm sm:text-lg">
|
|
Overall Return
|
|
</span>
|
|
<label for="overallReturnInfo" class="cursor-pointer">
|
|
<svg class="ml-1 w-5 h-5 inline-block" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#2A323C"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="info-circle"> <g> <circle cx="12" cy="12" data-name="--Circle" fill="none" id="_--Circle" r="10" stroke="#2A323C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle> <line fill="none" stroke="#2A323C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="12" y2="16"></line> <line fill="none" stroke="#2A323C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="8" y2="8"></line> </g> </g> </g> </g></svg>
|
|
</label>
|
|
</div>
|
|
{#if portfolio?.at(0)?.overallReturn > 0}
|
|
<span class="text-[#10DB06] text-sm sm:text-[1rem] mt-2">
|
|
+{portfolio?.at(0)?.overallReturn?.toFixed(2)}%
|
|
</span>
|
|
{:else if portfolio?.at(0)?.overallReturn < 0}
|
|
<span class="text-[#FF2F1F] text-sm sm:text-[1rem] mt-2">
|
|
{portfolio?.at(0)?.overallReturn?.toFixed(2)}%
|
|
</span>
|
|
{:else}
|
|
<span class="text-white text-sm sm:text-[1rem] mt-2">
|
|
{portfolio?.at(0)?.overallReturn?.toFixed(2)}%
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
<!--End Column Performance-->
|
|
|
|
<!--
|
|
<div class="flex flex-col">
|
|
<div class="flex flex-row">
|
|
<span class="text-white font-bold text-md">
|
|
Alpha
|
|
</span>
|
|
<label for="alphaInfo" class="cursor-pointer">
|
|
<svg class="w-5 h-5 inline-block ml-1 mb-1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#202020000"> <g id="SVGRepo_bgCarrier" stroke-width="0"></g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g> <g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="info-circle"> <g> <circle cx="12" cy="12" data-name="--Circle" fill="none" id="_--Circle" r="10" stroke="#3276C3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle> <line fill="none" stroke="#3276C3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="12" y2="16"></line> <line fill="none" stroke="#3276C3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="8" y2="8"></line> </g> </g> </g> </g> </svg>
|
|
</label>
|
|
</div>
|
|
<span class="text-white text-sm">
|
|
{portfolio?.at(0)?.metrics['alpha']}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col">
|
|
<div class="flex flex-row">
|
|
<span class="text-white font-bold text-md">
|
|
Beta
|
|
</span>
|
|
<label for="betaInfo" class="cursor-pointer">
|
|
<svg class="w-5 h-5 inline-block ml-1 mb-1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#202020000"> <g id="SVGRepo_bgCarrier" stroke-width="0"></g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g> <g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="info-circle"> <g> <circle cx="12" cy="12" data-name="--Circle" fill="none" id="_--Circle" r="10" stroke="#3276C3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle> <line fill="none" stroke="#3276C3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="12" y2="16"></line> <line fill="none" stroke="#3276C3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="8" y2="8"></line> </g> </g> </g> </g> </svg>
|
|
</label>
|
|
</div>
|
|
<span class="text-white text-sm">
|
|
{portfolio[0]?.metrics['beta']}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col">
|
|
<div class="flex flex-row">
|
|
<span class="text-white font-bold text-md">
|
|
Max Drawdown
|
|
</span>
|
|
<label for="maxDrawdownInfo" class="cursor-pointer">
|
|
<svg class="w-5 h-5 inline-block ml-1 mb-1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#202020000"> <g id="SVGRepo_bgCarrier" stroke-width="0"></g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g> <g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="info-circle"> <g> <circle cx="12" cy="12" data-name="--Circle" fill="none" id="_--Circle" r="10" stroke="#3276C3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle> <line fill="none" stroke="#3276C3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="12" y2="16"></line> <line fill="none" stroke="#3276C3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="8" y2="8"></line> </g> </g> </g> </g> </svg>
|
|
</label>
|
|
</div>
|
|
{#if portfolio[0]?.metrics['maxDrawdown'] < 0}
|
|
<span class="text-[#FF2F1F] text-sm">
|
|
{portfolio[0]?.metrics['maxDrawdown']} %
|
|
</span>
|
|
{:else}
|
|
<span class="text-white text-sm">
|
|
{portfolio[0]?.metrics['maxDrawdown']} %
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
|
|
-->
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
{/if}
|
|
|
|
|
|
|
|
{#if portfolio?.length !== 0}
|
|
|
|
|
|
<div class="bg-[#202020] pt-5 pb-5 mt-10 sm:rounded-2xl">
|
|
<div class="flex flex-row justify-between items-center">
|
|
<div class="text-slate-300 font-bold text-lg pl-5">
|
|
Holdings
|
|
</div>
|
|
<label for="holdingsCategoryInfo" class="cursor-pointer hover:underline text-blue-400 font-medium text-sm mr-3">
|
|
{displayChange}
|
|
<svg class="w-5 h-5 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(180 12 12)"><path fill="#1a56db" d="m12 10.8l-4.6 4.6L6 14l6-6l6 6l-1.4 1.4l-4.6-4.6Z"/></g></svg>
|
|
</label>
|
|
</div>
|
|
{#if holdingsList?.length === 0}
|
|
<div class="flex justify-center items-center text-white mt-5 sm:mt-0 font-medium text-md">
|
|
No Holdings found
|
|
</div>
|
|
|
|
<div class="w-full text-start flex flex-col justify-center items-center mt-2 sm:mt-5">
|
|
<Searchbar />
|
|
|
|
<span class="text-sm text-white m-auto mt-3 w-3/4 sm:w-1/2 text-center">
|
|
Click on the Search Icon to find your favorite stocks and begin growing your portfolio.
|
|
</span>
|
|
</div>
|
|
|
|
|
|
{:else}
|
|
<table class="table table-sm table-compact w-full m-auto mt-4">
|
|
|
|
<tbody class="">
|
|
{#each holdingsList as item, index}
|
|
<tr on:click={() => goto(`/${item?.assetType === 'etf' ? 'etf' : 'stocks'}/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] {index % 2 === 0 ? 'bg-opacity-[0.25] bg-[#323239]' : 'bg-[#202020]'} border-b-[#0F0F0F] cursor-pointer">
|
|
<td class="text-white border-b border-[#202020]">
|
|
<div class="flex flex-row">
|
|
<div class="flex flex-col text-sm">
|
|
<span class="text-blue-400">{item?.symbol}</span>
|
|
<span class="text-white">{item.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
|
<div class="flex flex-row items-center mt-0.5">
|
|
<span class="bg-[#333333] rounded text-white pl-1 pr-1 w-fit">
|
|
x{item?.numberOfShares}
|
|
</span>
|
|
<span class="text-white ml-1">
|
|
${new Intl.NumberFormat("en", {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2
|
|
}).format(item?.numberOfShares * item?.currentPrice)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
<td class="text-white border-b border-[#202020]">
|
|
<div class="flex flex-row justify-end items-center">
|
|
<div class="flex flex-col mt-3">
|
|
<span class="text-white text-md ml-auto">${item?.currentPrice?.toFixed(2)}</span>
|
|
<div class="flex flex-row mt-1">
|
|
{#if displayChange === "Change in %"}
|
|
{#if item?.sinceBoughtChange >=0}
|
|
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
|
<span class="text-[#10DB06] text-xs font-medium">+{item?.sinceBoughtChange?.toFixed(2)}%</span>
|
|
{:else}
|
|
<svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
|
<span class="text-[#FF2F1F] text-xs font-medium">{item?.sinceBoughtChange?.toFixed(2)}%</span>
|
|
{/if}
|
|
{:else}
|
|
{#if item?.sinceBoughtChange >=0}
|
|
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
|
<span class="text-[#10DB06] text-xs font-medium">+${(item?.numberOfShares * item?.currentPrice * item?.sinceBoughtChange/100 )?.toFixed(2)}</span>
|
|
{:else}
|
|
<svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
|
<span class="text-[#FF2F1F] text-xs font-medium">${(item?.numberOfShares * item?.currentPrice * item?.sinceBoughtChange/100 )?.toFixed(2)}</span>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="bg-[#202020] pt-5 pb-5 mt-10 sm:rounded-2xl {!showTradingHistory ? 'shadow-md' : ''}">
|
|
<div on:click={() => showTradingHistory = !showTradingHistory} class="cursor-pointer flex flex-row items-center justify-between">
|
|
<div class="text-slate-300 font-bold text-lg pl-5 w-full">
|
|
Trading History
|
|
</div>
|
|
|
|
<div class="pr-5 button text-md mt-1 cursor-pointer text-white font-medium hover:text-[#DF4390] hover:underline">
|
|
<svg class="{showTradingHistory ? 'rotate-180' : 'rotate-0'} transform transition-transform w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(180 12 12)"><path fill="#1a56db" d="m12 10.8l-4.6 4.6L6 14l6-6l6 6l-1.4 1.4l-4.6-4.6Z"/></g></svg>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
{#if tradingHistoryList?.length === 0}
|
|
<div class="flex justify-center items-center text-slate-300 font-medium text-md ">
|
|
{#if showTradingHistory}
|
|
<span class="text-slate-200 text-md mt-5">
|
|
No Trading History found
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
{:else}
|
|
{#if showTradingHistory}
|
|
<div transition:fade={{ delay: 0, duration: 80 }} in={showTradingHistory}>
|
|
<table class="table table-sm table-compact w-full m-auto mt-4">
|
|
<tbody class="">
|
|
{#each tradingHistoryList as item, index}
|
|
<tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] {index % 2 === 0 ? 'bg-opacity-[0.25] bg-[#323239]' : 'bg-[#202020]'} border-b-[#0F0F0F] cursor-pointer">
|
|
<td class="text-white border-b border-[#202020]">
|
|
<div class="flex flex-row items-center">
|
|
<div class="flex flex-col">
|
|
<span class="text-blue-400">{item?.symbol}</span>
|
|
<span class="text-white text-xs sm:text-sm">{item.name?.length > charNumber ? item?.name.slice(0,charNumber) + "..." : item?.name}</span>
|
|
</div>
|
|
|
|
<div class="ml-auto text-gray-300 mt-1 text-sm">
|
|
{#if item?.type === 'buy'}
|
|
<span class="text-[#10DB06]">Bought</span> {item?.numberOfShares} shares at {item?.price?.toLocaleString(undefined, {
|
|
style: 'currency',
|
|
currency: 'USD',
|
|
})}
|
|
{:else}
|
|
<span class="text-[#FF2F1F]">Sold</span> {item?.numberOfShares} shares at {item?.price?.toLocaleString(undefined, {
|
|
style: 'currency',
|
|
currency: 'USD',
|
|
})}
|
|
{/if}
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
{:else}
|
|
<div class="flex justify-center items-center h-80">
|
|
<div class="relative">
|
|
<label class="bg-[#202020] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
|
<span class="loading loading-spinner loading-md"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{/if}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!--Start Login Modal-->
|
|
{#if LoginPopup}
|
|
<LoginPopup form={form}/>
|
|
{/if}
|
|
<!--End Login Modal-->
|
|
|
|
<!--Start Account Value Modal-->
|
|
<input type="checkbox" id="accountValueInfo" class="modal-toggle" />
|
|
|
|
<dialog id="accountValueInfo" class="modal modal-bottom sm:modal-middle ">
|
|
|
|
|
|
<label id="accountValueInfo" for="accountValueInfo" class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"></label>
|
|
|
|
|
|
<div class="modal-box w-full bg-[#202020]">
|
|
|
|
|
|
|
|
<div class="text-white mb-5">
|
|
<h3 class="font-bold text-2xl mb-5">
|
|
Account Value
|
|
</h3>
|
|
Account value in a portfolio refers to the total worth of the investments it holds.
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</dialog>
|
|
<!--End Account Value Modal-->
|
|
|
|
<!--Start Available Cash Modal-->
|
|
<input type="checkbox" id="availableCashInfo" class="modal-toggle" />
|
|
|
|
<dialog id="availableCashInfo" class="modal modal-bottom sm:modal-middle ">
|
|
|
|
|
|
<label id="availableCashInfo" for="availableCashInfo" class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"></label>
|
|
|
|
|
|
<div class="modal-box w-full bg-[#202020]">
|
|
|
|
|
|
<div class="text-white mb-5">
|
|
<h3 class="font-bold text-2xl mb-5">
|
|
Available Cash
|
|
</h3>
|
|
Available cash in a portfolio refers to the amount of money that is accessible for new investments, excluding the value of existing holdings.
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</dialog>
|
|
<!--End Available Cash <Modal-->
|
|
|
|
|
|
<!--Start Overall Return Modal-->
|
|
<input type="checkbox" id="overallReturnInfo" class="modal-toggle" />
|
|
|
|
<dialog id="overallReturnInfo" class="modal modal-bottom sm:modal-middle ">
|
|
|
|
|
|
<label id="overallReturnInfo" for="overallReturnInfo" class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"></label>
|
|
|
|
|
|
<div class="modal-box w-full bg-[#202020]">
|
|
|
|
|
|
<div class="text-white mb-5">
|
|
<h3 class="font-bold text-2xl mb-5">
|
|
Overall Return
|
|
</h3>
|
|
Overall return in a portfolio is the total gain or loss on all investments as a percentage of the initial investment.
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</dialog>
|
|
<!--End Overall Return Modal-->
|
|
|
|
|
|
|
|
<!--Start Alpha Modal-->
|
|
<input type="checkbox" id="alphaInfo" class="modal-toggle" />
|
|
|
|
<dialog id="alphaInfo" class="modal modal-bottom sm:modal-middle ">
|
|
|
|
|
|
<label id="alphaInfo" for="alphaInfo" class="cursor-pointer modal-backdrop"></label>
|
|
|
|
|
|
<div class="modal-box w-full bg-[#202020] ">
|
|
|
|
|
|
|
|
<label for="alphaInfo" class="btn btn-sm btn-circle absolute right-2 top-2 bg-red-600 hover:bg-red-800">✕</label>
|
|
|
|
<div class="text-white">
|
|
<h3 class="font-bold text-2xl mb-5">
|
|
Alpha
|
|
</h3>
|
|
Alpha is a measure of a portfolio's performance relative to the S&P500 benchmark. A positive alpha indicates it outperformed the index, while a negative alpha means it underperformed.
|
|
</div>
|
|
|
|
<div class="modal-action">
|
|
<!-- if there is a button in form, it will close the modal -->
|
|
<label for="alphaInfo" class="btn bg-red-600 text-white">Got it</label>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</dialog>
|
|
<!--End Alpha Modal-->
|
|
|
|
|
|
|
|
<!--Start Beta Modal-->
|
|
<input type="checkbox" id="betaInfo" class="modal-toggle" />
|
|
|
|
<dialog id="betaInfo" class="modal modal-bottom sm:modal-middle ">
|
|
|
|
|
|
<label id="betaInfo" for="betaInfo" class="cursor-pointer modal-backdrop"></label>
|
|
|
|
|
|
<div class="modal-box w-full bg-[#202020] ">
|
|
|
|
|
|
|
|
<label for="betaInfo" class="btn btn-sm btn-circle absolute right-2 top-2 bg-red-600 hover:bg-red-800">✕</label>
|
|
|
|
<div class="text-white">
|
|
<h3 class="font-bold text-2xl mb-5">
|
|
Beta
|
|
</h3>
|
|
Beta measures your portfolio's sensitivity to market movements.
|
|
<br>
|
|
<br>
|
|
A beta of 1 means it moves in line with the S&P500. A beta less than 1 implies lower volatility, while a beta greater than 1 suggests higher volatility.
|
|
</div>
|
|
|
|
<div class="modal-action">
|
|
<!-- if there is a button in form, it will close the modal -->
|
|
<label for="betaInfo" class="btn bg-red-600 text-white">Got it</label>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</dialog>
|
|
<!--End Beta Modal-->
|
|
|
|
|
|
|
|
<!--Start Max Drawdown Modal-->
|
|
<input type="checkbox" id="maxDrawdownInfo" class="modal-toggle" />
|
|
|
|
<dialog id="maxDrawdownInfo" class="modal modal-bottom sm:modal-middle ">
|
|
|
|
|
|
<label id="maxDrawdownInfo" for="maxDrawdownInfo" class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.08]"></label>
|
|
|
|
|
|
<div class="modal-box w-full bg-[#202020] border border-slate-800">
|
|
|
|
|
|
|
|
<label for="maxDrawdownInfo" class="btn btn-sm btn-circle absolute right-2 top-2 bg-red-600 hover:bg-red-800">✕</label>
|
|
|
|
<div class="text-white">
|
|
<h3 class="font-bold text-2xl mb-5">
|
|
Max Drawdown
|
|
</h3>
|
|
Max Drawdown measures the largest loss from a portfolio peak to its lowest point, showing the worst possible drop in value.
|
|
</div>
|
|
|
|
<div class="modal-action">
|
|
<!-- if there is a button in form, it will close the modal -->
|
|
<label for="maxDrawdownInfo" class="btn bg-red-600 text-white">Got it</label>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</dialog>
|
|
<!--End Max Drawdown Modal-->
|
|
|
|
|
|
|
|
|
|
|
|
<!--Start Holdings Category Modal-->
|
|
|
|
<input type="checkbox" id="holdingsCategoryInfo" class="modal-toggle" />
|
|
|
|
<dialog id="holdingsCategoryInfo" class="modal modal-bottom sm:modal-middle ">
|
|
|
|
|
|
<label id="holdingsCategoryInfo" for="holdingsCategoryInfo" class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"></label>
|
|
|
|
|
|
<div class="modal-box w-full bg-[#202020] sm:border sm:border-slate-800">
|
|
|
|
|
|
|
|
<div class="text-white">
|
|
<h3 class="font-medium text-lg sm:text-2xl mb-10">
|
|
Performance
|
|
</h3>
|
|
|
|
|
|
<div class="flex flex-col items-center w-full max-w-3xl bg-[#202020]">
|
|
|
|
|
|
<label for="holdingsCategoryInfo" on:click={() => handleChange('Change in %')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
|
|
|
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {displayChange === 'Change in %' ? 'ring-2 ring-[#04E000]' : ''}">
|
|
|
|
<span class="ml-1 text-white font-medium mr-auto">
|
|
Change in %
|
|
</span>
|
|
|
|
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
|
{#if displayChange === 'Change in %'}
|
|
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#202020000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
|
|
{/if}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</label>
|
|
|
|
|
|
<label for="holdingsCategoryInfo" on:click={() => handleChange('Change in $')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
|
|
|
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {displayChange === 'Change in $' ? 'ring-2 ring-[#04E000]' : ''}">
|
|
|
|
<span class="ml-1 text-white font-medium mr-auto">
|
|
Change in $
|
|
</span>
|
|
|
|
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
|
{#if displayChange === 'Change in $'}
|
|
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#202020000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
|
|
{/if}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</label>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</dialog>
|
|
<!--End Holdings Category Modal-->
|
|
|
|
|
|
|
|
|
|
<!--Start Add Portfolio Modal-->
|
|
<AddPortfolio data={data} />
|
|
<!--End Add Portfolio Modal-->
|
|
|