1030 lines
53 KiB
Svelte
1030 lines
53 KiB
Svelte
<script lang="ts">
|
|
|
|
import ReturnCard from '$lib/components/ReturnCard.svelte'
|
|
import {numberOfUnreadNotification, displayCompanyName, screenWidth, stockTicker} from '$lib/store';
|
|
import { abbreviateNumber } from '$lib/utils';
|
|
|
|
export let data;
|
|
|
|
|
|
let quantStats = {};
|
|
let stockQuote;
|
|
|
|
|
|
let marketCap = '-';
|
|
let yearHigh = '-';
|
|
let yearLow = '-';
|
|
let dayHigh = '-';
|
|
let dayLow = '-';
|
|
|
|
let currentPrice = 0;
|
|
let previousClose = '-';
|
|
let volume = '-';
|
|
let eps = '-';
|
|
let pe = '-';
|
|
let alpha = '-';
|
|
let beta = '-';
|
|
|
|
// Function to check if a date is today or yesterday, adjusting for weekends
|
|
function ongoingDD(dateString) {
|
|
const date = new Date(dateString);
|
|
const today = new Date();
|
|
const yesterday = new Date(today);
|
|
yesterday.setDate(yesterday.getDate() - 1);
|
|
|
|
// Adjust today to Friday if it's Saturday or Sunday
|
|
if (today.getDay() === 6) { // Saturday
|
|
today.setDate(today.getDate() - 1); // Set to Friday
|
|
} else if (today.getDay() === 0) { // Sunday
|
|
today.setDate(today.getDate() - 2); // Set to Friday
|
|
}
|
|
|
|
return date.getDate() === today.getDate() &&
|
|
date.getMonth() === today.getMonth() &&
|
|
date.getFullYear() === today.getFullYear() ||
|
|
date.getDate() === yesterday.getDate() &&
|
|
date.getMonth() === yesterday.getMonth() &&
|
|
date.getFullYear() === yesterday.getFullYear();
|
|
}
|
|
|
|
/*
|
|
let progressDayPriceValue = 0;
|
|
let progressYearPriceValue = 0;
|
|
let totalDuration = 500;
|
|
|
|
async function updateDayRange() {
|
|
|
|
const interval = 10; // interval between each update in ms
|
|
const increment = (currentPrice / (totalDuration / interval));
|
|
|
|
if (progressDayPriceValue < currentPrice) {
|
|
progressDayPriceValue = progressDayPriceValue + increment;
|
|
setTimeout(updateDayRange, interval);
|
|
}
|
|
};
|
|
|
|
|
|
async function updateYearRange() {
|
|
|
|
const interval = 10; // interval between each update in ms
|
|
const increment = (currentPrice / (totalDuration / interval));
|
|
|
|
if (progressYearPriceValue < currentPrice) {
|
|
progressYearPriceValue = progressYearPriceValue + increment;
|
|
setTimeout(updateYearRange, interval);
|
|
}
|
|
};
|
|
|
|
*/
|
|
|
|
marketCap = '-';
|
|
yearHigh = '-';
|
|
yearLow = '-';
|
|
dayHigh = '-';
|
|
dayLow = '-';
|
|
|
|
currentPrice = '-';
|
|
previousClose = '-';
|
|
volume = '-';
|
|
eps = '-';
|
|
pe = '-';
|
|
alpha = '-';
|
|
beta = '-';
|
|
|
|
stockQuote = data?.getStockQuote;
|
|
quantStats = data?.getQuantStats ?? {};
|
|
|
|
marketCap = abbreviateNumber(stockQuote?.marketCap);
|
|
volume = abbreviateNumber(stockQuote?.volume);
|
|
currentPrice = stockQuote?.price;
|
|
previousClose = stockQuote?.previousClose;
|
|
eps = stockQuote?.eps;
|
|
pe = stockQuote?.pe;
|
|
|
|
beta = stockQuote?.beta;
|
|
|
|
dayLow = stockQuote?.dayLow?.toFixed(2);
|
|
dayHigh = stockQuote?.dayHigh?.toFixed(2);
|
|
yearLow = stockQuote?.yearLow?.toFixed(2);
|
|
yearHigh = stockQuote?.yearHigh?.toFixed(2);
|
|
|
|
alpha = quantStats[$stockTicker?.toUpperCase()]?.Alpha;
|
|
|
|
console.log(quantStats)
|
|
/*
|
|
updateDayRange()
|
|
updateYearRange()
|
|
*/
|
|
|
|
</script>
|
|
|
|
|
|
<svelte:head>
|
|
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<title>
|
|
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$stockTicker}) Statistics & Valuation Metrics · stocknear
|
|
</title>
|
|
<meta name="description" content={`Detailed statistics for ${$displayCompanyName} (${$stockTicker}) stock, including valuation, metrics, financial numbers, share information and more.`} />
|
|
|
|
<!-- Other meta tags -->
|
|
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Statistics & Valuation Metrics · stocknear`}/>
|
|
<meta property="og:description" content={`Detailed statistics for ${$displayCompanyName} (${$stockTicker}) stock, including valuation, metrics, financial numbers, share information and more.`} />
|
|
<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={`${$displayCompanyName} (${$stockTicker}) Statistics & Valuation Metrics · stocknear`}/>
|
|
<meta name="twitter:description" content={`Detailed statistics for ${$displayCompanyName} (${$stockTicker}) stock, including valuation, metrics, financial numbers, share information and more.`} />
|
|
<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
|
|
<!-- Add more Twitter meta tags as needed -->
|
|
|
|
</svelte:head>
|
|
|
|
|
|
|
|
<section class="text-white w-full">
|
|
<div class="sm:pl-7 m-auto pt-5">
|
|
<div class="mb-6">
|
|
<h1 class="text-2xl sm:text-3xl text-white font-bold mb-5">
|
|
Fundamental Data
|
|
</h1>
|
|
|
|
<div class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
|
|
<svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#60a5fa" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
|
Get detailed Fundamental insights of {$displayCompanyName} and compare it to the S&P500.
|
|
</div>
|
|
|
|
{#if Object?.keys(quantStats)?.length !== 0}
|
|
<div class="grid grid-cols-1 gap-2 mt-10">
|
|
|
|
<div class="flex justify-start items-start w-full m-auto">
|
|
<table class="table table-sm table-pin-rows table-compact pb-2 text-start flex justify-start items-center w-full px-3 m-auto ">
|
|
<tbody class="shadow-md">
|
|
<!-- row 1 -->
|
|
<tr class="text-white">
|
|
{#if $screenWidth <= 550}
|
|
<td class="text-start bg-[#0F0F0F] border-b border-[#0F0F0F] text-white font-medium">
|
|
1-Day Range
|
|
</td>
|
|
<td class="bg-[#0F0F0F] border-b border-[#0F0F0F]">
|
|
<div class="flex flex-col items-start">
|
|
<div class="flex justify-between w-full mb-1.5">
|
|
<span class="text-start">{dayLow}</span>
|
|
<span class="text-end">{dayHigh}</span>
|
|
</div>
|
|
<div class="flex justify-center w-full">
|
|
<progress class="progress [&::-webkit-progress-value]:bg-blue-600 [&::-moz-progress-bar]:bg-blue-600 w-full bg-white h-[4px]" min={dayLow} value={currentPrice} max={dayHigh} style="flex-direction: row-reverse" />
|
|
</div>
|
|
</div>
|
|
</td>
|
|
{:else}
|
|
<td class="text-start bg-[#0F0F0F] text-white font-medium border-b border-[#0F0F0F]">
|
|
1-Day Range
|
|
</td>
|
|
<td class="bg-[#0F0F0F] border-b border-[#0F0F0F]">
|
|
{dayLow}
|
|
</td>
|
|
<td class="bg-[#0F0F0F] border-b border-[#0F0F0F]">
|
|
<!--<span class="text-center flex justify-center items-center ">158.8</span>-->
|
|
<progress class="progress [&::-webkit-progress-value]:bg-blue-600 [&::-moz-progress-bar]:bg-blue-600 bg-white w-[200px] sm:w-full h-[4px]" min={dayLow} value={currentPrice} max={dayHigh} />
|
|
</td>
|
|
<td class="bg-[#0F0F0F] border-b border-[#0F0F0F] ">
|
|
{dayHigh}
|
|
</td>
|
|
{/if}
|
|
</tr>
|
|
<!--2 row -->
|
|
<tr class="text-white bg-[#0F0F0F]">
|
|
{#if $screenWidth < 640}
|
|
<td class="text-start bg-[#0F0F0F] text-white font-medium">
|
|
1-Year Range
|
|
</td>
|
|
<td class="bg-[#0F0F0F]">
|
|
<div class="flex flex-col items-start">
|
|
<div class="flex justify-between w-full mb-1.5">
|
|
<span class="text-start">{yearLow}</span>
|
|
<span class="text-end">{yearHigh}</span>
|
|
</div>
|
|
<div class="flex justify-center w-full">
|
|
<progress class="progress [&::-webkit-progress-value]:bg-blue-600 [&::-moz-progress-bar]:bg-blue-600 bg-white w-[200px] sm:w-full h-[4px]" min={yearLow} value={currentPrice} max={yearHigh} style="flex-direction: row-reverse" />
|
|
</div>
|
|
</div>
|
|
</td>
|
|
{:else}
|
|
<td class="text-start bg-[#0F0F0F] text-white font-medium">
|
|
1-Year Range
|
|
</td>
|
|
<td class="bg-[#0F0F0F]">
|
|
{yearLow}
|
|
</td>
|
|
<td class="bg-[#0F0F0F]">
|
|
<progress class="progress [&::-webkit-progress-value]:bg-blue-600 [&::-moz-progress-bar]:bg-blue-600 w-full bg-white h-[4px]" min={yearLow} value={currentPrice} max={yearHigh} />
|
|
</td>
|
|
<td class="bg-[#0F0F0F]">
|
|
{yearHigh}
|
|
</td>
|
|
{/if}
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
|
|
|
|
<h3 class="text-start ml-2 text-lg sm:text-2xl font-bold text-white mt-5 ">
|
|
Company Stats
|
|
</h3>
|
|
|
|
|
|
<div class="flex justify-start items-center w-full m-auto">
|
|
<table class="table table-sm table-compact text-start flex justify-start items-center w-full px-3 m-auto">
|
|
<tbody class="shadow-md">
|
|
<!-- row 1 -->
|
|
<tr class="text-white">
|
|
<td class="text-start border-b border-[#0F0F0F] bg-[#0F0F0F] text-white font-medium">Market Cap</td>
|
|
<td class="bg-[#0F0F0F] border-b border-[#0F0F0F]"> ${marketCap}</td>
|
|
<td class="text-start border-b border-[#0F0F0F] bg-[#0F0F0F] text-white font-medium">Volume</td>
|
|
<td class="bg-[#0F0F0F] border-b border-[#0F0F0F]">{volume}</td>
|
|
</tr>
|
|
<!-- row 2 -->
|
|
<tr class="text-white ">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium">Price</td>
|
|
<td class="bg-[#0F0F0F] border-b border-[#0F0F0F]" >${currentPrice}</td>
|
|
<td class="text-start bg-[#0F0F0F] border-b border-[#0F0F0F] text-white font-medium">Prev. Close</td>
|
|
<td class="bg-[#0F0F0F] border-b border-[#0F0F0F]">${previousClose}</td>
|
|
</tr>
|
|
<!-- row 3 -->
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start border-b border-[#0F0F0F] bg-[#0F0F0F] text-white font-medium">Alpha</td>
|
|
<td class="bg-[#0F0F0F] border-b border-[#0F0F0F]">
|
|
{#if typeof alpha !== 'undefined'}
|
|
{alpha}
|
|
{:else}
|
|
-
|
|
{/if}
|
|
</td>
|
|
<td class="text-start bg-[#0F0F0F] border-b border-[#0F0F0F] text-white font-medium">Beta</td>
|
|
<td class="bg-[#0F0F0F] border-b border-[#0F0F0F]">
|
|
{#if typeof beta !== 'undefined' && !isNaN(beta)}
|
|
{beta?.toFixed(2)}
|
|
{:else}
|
|
-
|
|
{/if}
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white font-medium">EPS</td>
|
|
<td class="bg-[#0F0F0F]">{eps}</td>
|
|
<td class="text-start bg-[#0F0F0F] text-white font-medium">PE</td>
|
|
<td class="bg-[#0F0F0F]">{pe}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
|
|
|
|
{#if $stockTicker in quantStats && Object.keys(quantStats[$stockTicker]).length > 0}
|
|
|
|
<h3 class="text-start w-full mt-8 mb-2 text-lg sm:text-2xl font-bold text-white">
|
|
Worst 10 Drawdowns of {$stockTicker}
|
|
</h3>
|
|
<table class="table table-sm table-pin-rows table-compact text-start w-full flex justify-start items-center m-auto">
|
|
<thead>
|
|
<tr class="bg-[#0F0F0F] border-slate-800 rounded shadow-md">
|
|
<th class="text-start bg-[#0F0F0F] text-white text-sm font-medium w-36 sm:w-56">Started</th>
|
|
<th class="bg-[#0F0F0F] text-white text-sm font-medium text-end">Recovered</th>
|
|
<th class="bg-[#0F0F0F] text-white text-sm text-end font-medium">Drawdown</th>
|
|
<th class="bg-[#0F0F0F] text-white text-sm font-medium text-end ">Days</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="shadow-md">
|
|
{#each quantStats[$stockTicker?.toUpperCase()]['Worst 10 Drawdowns'] as item}
|
|
<tr class="text-white">
|
|
<td class="text-start border-b border-[#0F0F0F] text-xs sm:text-sm bg-[#0F0F0F] text-white w-36 sm:w-56">
|
|
{new Date(item['Started']).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
|
</td>
|
|
<td class="border-b border-[#0F0F0F] text-xs sm:text-sm bg-[#0F0F0F] text-white text-end">
|
|
{#if ongoingDD(item['Recovered']) === true}
|
|
continuing
|
|
{:else}
|
|
{new Date(item['Recovered']).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
|
{/if}
|
|
</td>
|
|
<td class="text-start border-b border-[#0F0F0F] bg-[#0F0F0F] text-white text-end">
|
|
{item['Drawdown']?.toFixed(2)}%
|
|
</td>
|
|
<td class="text-end border-b border-[#0F0F0F] bg-[#0F0F0F] text-white">
|
|
{item['Days']}
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
<h2 class="text-start ml-2 text-lg sm:text-2xl font-bold text-white mt-8 ">
|
|
{$stockTicker} vs.
|
|
S&P500
|
|
</h2>
|
|
|
|
<p class="ml-2 flex justify-start items-center m-auto text-white ">
|
|
Comparison of company stats against the S&P500 Index.
|
|
</p>
|
|
|
|
<span class="ml-2 text-start italic text-xs sm:text-sm text-gray-300 mb-2 sm:mb-5">
|
|
Time Period between {new Date(quantStats[$stockTicker?.toUpperCase()]["Start Period"]).toLocaleString('en-US', { month: 'long', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
|
-
|
|
{new Date(quantStats[$stockTicker?.toUpperCase()]["End Period"]).toLocaleString('en-US', { month: 'long', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
|
</span>
|
|
|
|
|
|
<ReturnCard quantData={quantStats} />
|
|
|
|
<div class="ml-2 grid grid-cols-3 gap-10 text-lg font-medium sm:font-medium text-sm sm:text-[1rem]">
|
|
<span class="text-white ml-1 sm:ml-3 font-bold">
|
|
Metric
|
|
</span>
|
|
<span class="text-white ml-auto">
|
|
{$stockTicker}
|
|
</span>
|
|
<span class="text-white text-end mr-3">
|
|
S&P500
|
|
</span>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex flex-col justify-center items-center w-full m-auto">
|
|
<table class="table table-sm table-pin-rows table-compact text-start w-full flex justify-start items-center w-full m-auto">
|
|
<tbody class="shadow-md">
|
|
<tr class="text-white ">
|
|
<td class="text-start bg-[#0F0F0F] border-b border-[#0F0F0F] text-white font-medium w-36 sm:w-56">
|
|
Cumulative Return
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Cumulative Return %"]}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Cumulative Return %"]} %
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white font-medium">
|
|
Compound Annual Growth Rate (CAGR)
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["CAGR %"]}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["CAGR %"]}%
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
<table class="table table-sm table-compact table-pin-rows w-full mt-4 flex justify-start items-center w-full px-3 m-auto">
|
|
<tbody class="shadow-md" >
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] border-b border-[#0F0F0F] text-white font-medium w-36 sm:w-56">
|
|
Sharpe
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Sharpe"]?.toFixed(2)}
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Sharpe"]?.toFixed(2)}
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] border-b border-[#0F0F0F] text-white font-medium ">
|
|
Sortino
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Sortino"]?.toFixed(2)}
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Sortino"]?.toFixed(2)}
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
<table class="table table-sm table-compact table-pin-rows w-full mt-4 flex justify-start items-center w-full px-3 m-auto">
|
|
<tbody class="shadow-md">
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] border-b border-[#0F0F0F] text-white font-medium w-36 sm:w-56">
|
|
Max Drawdown
|
|
</td>
|
|
<td class="text-start bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Max Drawdown"]}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Max Drawdown"]}%
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
Longest Drawdown Days
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Longest DD Days"]}
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Longest DD Days"]}
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium w-36 sm:w-56">
|
|
Volatility (ann.)
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Volatility (ann.) %"]}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Volatility (ann.) %"]}%
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium w-36 sm:w-56">
|
|
Correlation
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Correlation"]}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Correlation"]}
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white font-medium border-b border-[#0F0F0F]">
|
|
R^2
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["R^2"]}
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["R^2"]}
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white font-medium border-b border-[#0F0F0F]">
|
|
Calmar
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Calmar"]}
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Calmar"]}
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white font-medium border-b border-[#0F0F0F]">
|
|
Skew
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Skew"]?.toFixed(2)}
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Skew"]?.toFixed(2)}
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white font-medium border-b border-[#0F0F0F]">
|
|
Kurtosis
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Kurtosis"]?.toFixed(2)}
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Kurtosis"]?.toFixed(2)}
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
<table class="table table-sm table-pin-rows table-compact mt-4 text-start w-full flex justify-start items-center w-full px-3 m-auto">
|
|
<tbody class="shadow-md">
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium w-36 sm:w-56">
|
|
Expected Daily
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Expected Daily %"]}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Expected Daily %"]}%
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white font-medium border-b border-[#0F0F0F]">
|
|
Expected Monthly
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Expected Monthly %"]}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Expected Monthly %"]}%
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white font-medium border-b border-[#0F0F0F]">
|
|
Expected Yearly
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Expected Yearly %"]}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Expected Yearly %"]}%
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white font-medium border-b border-[#0F0F0F]">
|
|
Kelly Criterion
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Kelly Criterion %"]}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Kelly Criterion %"]}%
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white font-medium border-b border-[#0F0F0F]">
|
|
Risk of Ruin
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Risk of Ruin %"]}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Risk of Ruin %"]}%
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
Daily Value-at-Risk
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Daily Value-at-Risk %"]?.toFixed(2)}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Daily Value-at-Risk %"]?.toFixed(2)}%
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white font-medium border-b border-[#0F0F0F]">
|
|
Expected Shortfall (cVaR)
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Expected Shortfall (cVaR) %"]?.toFixed(2)}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Expected Shortfall (cVaR) %"]?.toFixed(2)}%
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
<table class="table table-sm table-pin-rows table-compact text-start mt-4 w-full flex justify-start items-center w-full px-3 m-auto">
|
|
<tbody class="shadow-md">
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white font-medium border-b border-[#0F0F0F] w-36 sm:w-56">
|
|
Max Consecutive Wins
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white text-start border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Max Consecutive Wins"]}
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Max Consecutive Wins"]}
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white font-medium border-b border-[#0F0F0F] w-36 sm:w-56">
|
|
Max Consecutive Losses
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white text-start border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Max Consecutive Losses"]}
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Max Consecutive Losses"]}
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium w-36 sm:w-56">
|
|
Gain/Pain Ratio
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white text-start border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Gain/Pain Ratio"]?.toFixed(2)}
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Gain/Pain Ratio"]?.toFixed(2)}
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
Gain/Pain (1M)
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Gain/Pain (1M)"]?.toFixed(2)}
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Gain/Pain (1M)"]?.toFixed(2)}
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
Payoff Ratio
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Payoff Ratio"]?.toFixed(2)}
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Payoff Ratio"]?.toFixed(2)}
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
Profit Factor
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Profit Factor"]?.toFixed(2)}
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Profit Factor"]?.toFixed(2)}
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
Outlier Win Ratio
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Outlier Win Ratio"]?.toFixed(2)}
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Outlier Win Ratio"]?.toFixed(2)}
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
Outlier Loss Ratio
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Outlier Loss Ratio"]?.toFixed(2)}
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Outlier Loss Ratio"]?.toFixed(2)}
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
<table class="table table-sm table-pin-rows table-compact text-start mt-4 w-full flex justify-start items-center w-full px-3 m-auto">
|
|
<tbody class="shadow-md">
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium w-36 sm:w-56">
|
|
MTD
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white text-start border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["MTD %"]?.toFixed(2)}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["MTD %"]?.toFixed(2)}%
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
3M
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["3M %"]?.toFixed(2)}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["3M %"]?.toFixed(2)}%
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
6M
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["6M %"]?.toFixed(2)}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["6M %"]?.toFixed(2)}%
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
YTD
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["YTD %"]?.toFixed(2)}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["YTD %"]?.toFixed(2)}%
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
1Y
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["1Y %"]?.toFixed(2)}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["1Y %"]?.toFixed(2)}%
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
3Y (ann.)
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["3Y (ann.) %"]?.toFixed(2)}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["3Y (ann.) %"]?.toFixed(2)}%
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
<table class="table table-sm table-pin-rows table-compact text-start mt-4 w-full flex justify-start items-center w-full px-3 m-auto">
|
|
<tbody class="shadow-md">
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium w-36 sm:w-56">
|
|
Best Day
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white text-start border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Best Day %"]?.toFixed(2)}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Best Day %"]?.toFixed(2)}%
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
Worst Day
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Worst Day %"]?.toFixed(2)}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Worst Day %"]?.toFixed(2)}%
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
Best Month
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Best Month %"]?.toFixed(2)}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Best Month %"]?.toFixed(2)}%
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
Worst Month
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Worst Month %"]?.toFixed(2)}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Worst Month %"]?.toFixed(2)}%
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
Best Year
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Best Year %"]?.toFixed(2)}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Best Year %"]?.toFixed(2)}%
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
Worst Year
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Worst Year %"]?.toFixed(2)}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Worst Year %"]?.toFixed(2)}%
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
<table class="table table-sm table-pin-rows table-compact mt-4 w-full flex justify-start items-center w-full px-3 m-auto">
|
|
<tbody class="shadow-md">
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium w-36 sm:w-56">
|
|
Avg. Drawdown
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white text-start border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Avg. Drawdown"]?.toFixed(2)}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Avg. Drawdown"]?.toFixed(2)}%
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
Avg. Drawdown Days
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Avg. Drawdown Days"]}
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Avg. Drawdown Days"]}
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
Recovery Factor
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Recovery Factor"]?.toFixed(2)}
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Recovery Factor"]?.toFixed(2)}
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
Ulcer Index
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Ulcer Index"]?.toFixed(2)}
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Ulcer Index"]?.toFixed(2)}
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
<table class="table table-sm table-pin-rows table-compact text-start w-full mt-4 flex justify-start items-center w-full px-3 m-auto">
|
|
<tbody class="shadow-md">
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium w-36 sm:w-56">
|
|
Avg. Up Month
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white text-start border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Avg. Up Month %"]?.toFixed(2)}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Avg. Up Month %"]?.toFixed(2)}%
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
Avg. Down Month
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Avg. Down Month %"]?.toFixed(2)}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Avg. Down Month %"]?.toFixed(2)}%
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
Win Days
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Win Days %"]?.toFixed(2)}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Win Days %"]?.toFixed(2)}%
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
Win Month
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Win Month %"]?.toFixed(2)}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Win Month %"]?.toFixed(2)}%
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
Win Quarter
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Win Quarter %"]?.toFixed(2)}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Win Quarter %"]?.toFixed(2)}%
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="text-white">
|
|
<td class="text-start bg-[#0F0F0F] text-white border-b border-[#0F0F0F] font-medium ">
|
|
Win Year
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats[$stockTicker?.toUpperCase()]["Win Year %"]?.toFixed(2)}%
|
|
</td>
|
|
<td class="bg-[#0F0F0F] text-white border-b border-[#0F0F0F] text-end text-xs sm:text-sm">
|
|
{quantStats['SPY']["Win Year %"]?.toFixed(2)}%
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
|
|
{:else}
|
|
|
|
<h1 class="m-auto mt-10 text-slate-400 text-2xl font-medium">
|
|
<svg class="w-10 sm:w-12 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#334155" d="M18.68 12.32a4.49 4.49 0 0 0-6.36.01a4.49 4.49 0 0 0 0 6.36a4.508 4.508 0 0 0 5.57.63L21 22.39L22.39 21l-3.09-3.11c1.13-1.77.87-4.09-.62-5.57m-1.41 4.95c-.98.98-2.56.97-3.54 0c-.97-.98-.97-2.56.01-3.54c.97-.97 2.55-.97 3.53 0c.97.98.97 2.56 0 3.54M10.9 20.1a6.527 6.527 0 0 1-1.48-2.32C6.27 17.25 4 15.76 4 14v3c0 2.21 3.58 4 8 4c-.4-.26-.77-.56-1.1-.9M4 9v3c0 1.68 2.07 3.12 5 3.7v-.2c0-.93.2-1.85.58-2.69C6.34 12.3 4 10.79 4 9m8-6C7.58 3 4 4.79 4 7c0 2 3 3.68 6.85 4h.05c1.2-1.26 2.86-2 4.6-2c.91 0 1.81.19 2.64.56A3.215 3.215 0 0 0 20 7c0-2.21-3.58-4-8-4Z"/></svg>
|
|
</h1>
|
|
{/if}
|
|
|
|
|
|
</div>
|
|
{:else}
|
|
<h2 class=" mt-16 flex justify-center items-center text-3xl font-medium text-slate-700 mb-5 m-auto">
|
|
No data available
|
|
</h2>
|
|
{/if}
|
|
|
|
</div>
|
|
</section> |