AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stats page update

Browse Source
This commit is contained in:
MuslemRahimi 2024-08-12 11:48:10 +02:00
parent 1633add36d
commit 35c8e89efa
5 changed files with 1508 additions and 1729 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

405
src/routes/crypto/[tickerID]/stats/+page.svelte
View File

File diff suppressed because it is too large Load Diff

2464
src/routes/etf/[tickerID]/+page.svelte
View File

File diff suppressed because it is too large Load Diff

2
src/routes/etf/[tickerID]/stats/+page.svelte
View File

@ -239,7 +239,7 @@
</h3> </h3>
<div class="flex justify-start items-center w-full m-auto"> <div class="flex justify-start items-center w-full m-auto overflow-x-scroll no-scrollbar">
<table class="table table-sm table-compact text-start flex justify-start items-center w-full px-3 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"> <tbody class="shadow-md">
<!-- row 1 --> <!-- row 1 -->

2
src/routes/stocks/[tickerID]/analyst/+page.svelte
View File

@ -223,7 +223,7 @@ changeTab(0)
<div class="mt-5 text-white p-3 sm:p-5 mb-5 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"> <div class="mt-5 w-fit text-white p-3 sm:p-5 mb-5 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='#a474f6' 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> <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='#a474f6' 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>
In previous years, Wall Street analysts have given {$displayCompanyName} a total of {data?.getAnalystTickerHistory?.length} ratings. In previous years, Wall Street analysts have given {$displayCompanyName} a total of {data?.getAnalystTickerHistory?.length} ratings.
</div> </div>

342
src/routes/stocks/[tickerID]/stats/+page.svelte
View File

@ -237,32 +237,32 @@ updateYearRange()
</h3> </h3>
<div class="flex justify-start items-center w-full m-auto"> <div class="flex justify-start items-center w-full m-auto overflow-x-scroll no-scrollbar">
<table class="table table-sm table-compact text-start flex justify-start items-center w-full px-3 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"> <tbody class="">
<!-- row 1 --> <!-- row 1 -->
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start text-white ">Mkt Cap</td> <td class="text-start text-sm sm:text-[1rem] text-white ">Mkt Cap</td>
<td class="text-end"> ${marketCap}</td> <td class="text-end text-sm sm:text-[1rem]"> ${marketCap}</td>
<td class="text-end text-white ">Volume</td> <td class="text-end text-sm sm:text-[1rem] text-white ">Volume</td>
<td class="text-end">{volume}</td> <td class="text-end text-sm sm:text-[1rem]">{volume}</td>
</tr> </tr>
<!-- row 2 --> <!-- row 2 -->
<tr class="text-white odd:bg-[#27272A] "> <tr class="text-white odd:bg-[#27272A] text-sm sm:text-[1rem] ">
<td class="text-start">Price</td> <td class="text-start text-sm sm:text-[1rem]">Price</td>
<td class="text-end" >${currentPrice}</td> <td class="text-end text-sm sm:text-[1rem]">${currentPrice}</td>
<td class="text-end text-white ">Prev. Close</td> <td class="text-end text-white text-sm sm:text-[1rem]">Prev. Close</td>
<td class="text-end">${previousClose}</td> <td class="text-end text-sm sm:text-[1rem]">${previousClose}</td>
</tr> </tr>
<!-- row 3 --> <!-- row 3 -->
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start text-white ">Alpha</td> <td class="text-start text-sm sm:text-[1rem] text-white ">Alpha</td>
<td class="text-end"> <td class="text-end text-sm sm:text-[1rem]">
{typeof alpha !== 'undefined' ? alpha : '-'} {typeof alpha !== 'undefined' ? alpha : '-'}
</td> </td>
<td class="text-end text-white">Beta</td> <td class="text-end text-sm sm:text-[1rem] text-white">Beta</td>
<td class="text-end"> <td class="text-end text-sm sm:text-[1rem]">
{typeof beta !== 'undefined' && !isNaN(beta) ? beta?.toFixed(2) : '-'} {typeof beta !== 'undefined' && !isNaN(beta) ? beta?.toFixed(2) : '-'}
</td> </td>
</tr> </tr>
@ -289,29 +289,29 @@ updateYearRange()
<table class="table table-sm table-pin-rows table-compact text-start w-full flex justify-start items-center m-auto"> <table class="table table-sm table-pin-rows table-compact text-start w-full flex justify-start items-center m-auto">
<thead> <thead>
<tr class="bg-[#09090B] border-slate-800 rounded text-white font-semibold"> <tr class="bg-[#09090B] border-slate-800 rounded text-white font-semibold">
<th class="text-start text-sm w-36 sm:w-56">Started</th> <th class="text-start text-sm sm:text-[1rem] ">Started</th>
<th class="text-sm text-end">Recovered</th> <th class="text-sm sm:text-[1rem] text-end">Recovered</th>
<th class="text-sm text-end">Drawdown</th> <th class="text-sm sm:text-[1rem] text-end">Drawdown</th>
<th class="text-sm text-end ">Days</th> <th class="text-sm sm:text-[1rem] text-end ">Days</th>
</tr> </tr>
</thead> </thead>
<tbody class="shadow-md"> <tbody class="shadow-md">
{#each quantStats[$stockTicker?.toUpperCase()]['Worst 10 Drawdowns'] as item} {#each quantStats[$stockTicker?.toUpperCase()]['Worst 10 Drawdowns'] as item}
<tr class="text-white border-y border-gray-800 odd:bg-[#27272A]"> <tr class="text-white border-y border-gray-800 odd:bg-[#27272A]">
<td class="text-start text-sm text-white whitespace-nowrap"> <td class="text-start text-sm sm:text-[1rem] text-white whitespace-nowrap">
{new Date(item['Started']).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} {new Date(item['Started']).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
</td> </td>
<td class="text-sm text-white text-end whitespace-nowrap"> <td class="text-sm sm:text-[1rem] text-white text-end whitespace-nowrap">
{#if ongoingDD(item['Recovered']) === true} {#if ongoingDD(item['Recovered']) === true}
continuing continuing
{:else} {:else}
{new Date(item['Recovered']).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} {new Date(item['Recovered']).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
{/if} {/if}
</td> </td>
<td class="text-start font-semibold text-white text-end"> <td class="text-start font-semibold text-white text-end text-sm sm:text-[1rem]">
{item['Drawdown']?.toFixed(2)}% {item['Drawdown']?.toFixed(2)}%
</td> </td>
<td class="text-end font-semibold text-white"> <td class="text-end font-semibold text-white text-sm sm:text-[1rem]">
{item['Days']} {item['Days']}
</td> </td>
</tr> </tr>
@ -326,11 +326,11 @@ updateYearRange()
S&P500 S&P500
</h2> </h2>
<p class="ml-2 flex justify-start items-center m-auto text-white "> <p class="ml-2 text-[1rem] flex justify-start items-center m-auto text-white ">
Comparison of company stats against the S&P500 Index. Comparison of company stats against the S&P500 Index.
</p> </p>
<span class="ml-2 text-start italic text-xs text-gray-300 mt-5 mb-2 sm:mb-5"> <span class="ml-2 text-start italic text-sm text-gray-300 mt-5 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' })} 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' })} {new Date(quantStats[$stockTicker?.toUpperCase()]["End Period"]).toLocaleString('en-US', { month: 'long', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
@ -341,34 +341,34 @@ updateYearRange()
<div class="flex flex-col justify-center items-center w-full m-auto"> <div class="flex flex-col justify-center items-center w-full m-auto overflow-x-scroll no-scrollbar">
<table class="table table-sm table-pin-rows table-compact text-start w-full flex justify-start 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">
<thead> <thead>
<tr class="bg-[#09090B] text-white text-sm font-medium"> <tr class="bg-[#09090B] text-white text-sm">
<th class="text-start"> <th class="text-start text-sm sm:text-[1rem] font-semibold">
Metric Metric
</th> </th>
<th class="text-end bg-[#09090B]"> <th class="text-end bg-[#09090B] text-sm sm:text-[1rem] font-semibold">
{$stockTicker} {$stockTicker}
</th> </th>
<th class="text-end"> <th class="text-end text-sm sm:text-[1rem] font-semibold">
S&P500 S&P500
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody class="shadow-md"> <tbody>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start text-white w-36 sm:w-56"> <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
Cumulative Return Cumulative Return
</td> </td>
<td class="text-white text-end text-sm"> <td class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats[$stockTicker?.toUpperCase()]["Cumulative Return %"] >=0} {#if quantStats[$stockTicker?.toUpperCase()]["Cumulative Return %"] >=0}
<span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Cumulative Return %"]}%</span> <span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Cumulative Return %"]}%</span>
{:else} {:else}
<span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Cumulative Return %"]}% </span> <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Cumulative Return %"]}% </span>
{/if} {/if}
</td> </td>
<td class="text-white text-end text-sm"> <td class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats['SPY']["Cumulative Return %"] >=0} {#if quantStats['SPY']["Cumulative Return %"] >=0}
<span class="text-[#10DB06] ">+{quantStats['SPY']["Cumulative Return %"]}%</span> <span class="text-[#10DB06] ">+{quantStats['SPY']["Cumulative Return %"]}%</span>
{:else} {:else}
@ -378,17 +378,17 @@ updateYearRange()
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start"> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Compound Annual Growth Rate (CAGR) Compound Annual Growth Rate (CAGR)
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats[$stockTicker?.toUpperCase()]["CAGR %"] >=0} {#if quantStats[$stockTicker?.toUpperCase()]["CAGR %"] >=0}
<span class="text-[#10DB06]">+{quantStats[$stockTicker?.toUpperCase()]["CAGR %"]}%</span> <span class="text-[#10DB06]">+{quantStats[$stockTicker?.toUpperCase()]["CAGR %"]}%</span>
{:else} {:else}
<span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["CAGR %"]}% </span> <span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["CAGR %"]}% </span>
{/if} {/if}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats['SPY']["CAGR %"] >=0} {#if quantStats['SPY']["CAGR %"] >=0}
<span class="text-[#10DB06] ">+{quantStats['SPY']["CAGR %"]}%</span> <span class="text-[#10DB06] ">+{quantStats['SPY']["CAGR %"]}%</span>
{:else} {:else}
@ -398,41 +398,41 @@ updateYearRange()
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start w-36 sm:w-56"> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Sharpe Sharpe
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats[$stockTicker?.toUpperCase()]["Sharpe"]?.toFixed(2)} {quantStats[$stockTicker?.toUpperCase()]["Sharpe"]?.toFixed(2)}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Sharpe"]?.toFixed(2)} {quantStats['SPY']["Sharpe"]?.toFixed(2)}
</td> </td>
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] "> <tr class="text-white odd:bg-[#27272A] ">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Sortino Sortino
</td> </td>
<td class=" text-end text-sm"> <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats[$stockTicker?.toUpperCase()]["Sortino"]?.toFixed(2)} {quantStats[$stockTicker?.toUpperCase()]["Sortino"]?.toFixed(2)}
</td> </td>
<td class=" text-end text-sm"> <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Sortino"]?.toFixed(2)} {quantStats['SPY']["Sortino"]?.toFixed(2)}
</td> </td>
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start text-white w-36 sm:w-56"> <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
Max Drawdown Max Drawdown
</td> </td>
<td class="text-start text-white text-end text-sm"> <td class="text-start text-white text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats[$stockTicker?.toUpperCase()]["Max Drawdown"] >=0} {#if quantStats[$stockTicker?.toUpperCase()]["Max Drawdown"] >=0}
<span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Max Drawdown"]}%</span> <span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Max Drawdown"]}%</span>
{:else} {:else}
<span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Max Drawdown"]}% </span> <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Max Drawdown"]}% </span>
{/if} {/if}
</td> </td>
<td class=" text-end text-sm"> <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats['SPY']["Max Drawdown"] >=0} {#if quantStats['SPY']["Max Drawdown"] >=0}
<span class="text-[#10DB06] ">+{quantStats['SPY']["Max Drawdown"]}%</span> <span class="text-[#10DB06] ">+{quantStats['SPY']["Max Drawdown"]}%</span>
{:else} {:else}
@ -442,87 +442,87 @@ updateYearRange()
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Longest Drawdown Days Longest Drawdown Days
</td> </td>
<td class=" text-end text-sm"> <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats[$stockTicker?.toUpperCase()]["Longest DD Days"]} {quantStats[$stockTicker?.toUpperCase()]["Longest DD Days"]}
</td> </td>
<td class=" text-end text-sm"> <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Longest DD Days"]} {quantStats['SPY']["Longest DD Days"]}
</td> </td>
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start w-36 sm:w-56"> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Volatility (ann.) Volatility (ann.)
</td> </td>
<td class=" text-end text-sm"> <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats[$stockTicker?.toUpperCase()]["Volatility (ann.) %"]}% {quantStats[$stockTicker?.toUpperCase()]["Volatility (ann.) %"]}%
</td> </td>
<td class=" text-end text-sm"> <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Volatility (ann.) %"]}% {quantStats['SPY']["Volatility (ann.) %"]}%
</td> </td>
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start w-36 sm:w-56"> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Correlation Correlation
</td> </td>
<td class=" text-end text-sm"> <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats[$stockTicker?.toUpperCase()]["Correlation"]}% {quantStats[$stockTicker?.toUpperCase()]["Correlation"]}%
</td> </td>
<td class=" text-end text-sm"> <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Correlation"]} {quantStats['SPY']["Correlation"]}
</td> </td>
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start text-white "> <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
R^2 R^2
</td> </td>
<td class=" text-end text-sm"> <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats[$stockTicker?.toUpperCase()]["R^2"]} {quantStats[$stockTicker?.toUpperCase()]["R^2"]}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["R^2"]} {quantStats['SPY']["R^2"]}
</td> </td>
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start text-white "> <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
Calmar Calmar
</td> </td>
<td class=" text-end text-sm"> <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats[$stockTicker?.toUpperCase()]["Calmar"]} {quantStats[$stockTicker?.toUpperCase()]["Calmar"]}
</td> </td>
<td class=" text-end text-sm"> <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Calmar"]} {quantStats['SPY']["Calmar"]}
</td> </td>
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start text-white "> <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
Skew Skew
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats[$stockTicker?.toUpperCase()]["Skew"]?.toFixed(2)} {quantStats[$stockTicker?.toUpperCase()]["Skew"]?.toFixed(2)}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Skew"]?.toFixed(2)} {quantStats['SPY']["Skew"]?.toFixed(2)}
</td> </td>
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start text-white "> <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
Kurtosis Kurtosis
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats[$stockTicker?.toUpperCase()]["Kurtosis"]?.toFixed(2)} {quantStats[$stockTicker?.toUpperCase()]["Kurtosis"]?.toFixed(2)}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Kurtosis"]?.toFixed(2)} {quantStats['SPY']["Kurtosis"]?.toFixed(2)}
</td> </td>
</tr> </tr>
@ -530,17 +530,17 @@ updateYearRange()
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start w-36 sm:w-56"> <td class="text-starttext-sm sm:text-[1rem] whitespace-nowrap">
Expected Daily Expected Daily
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats[$stockTicker?.toUpperCase()]["Expected Daily %"] >=0} {#if quantStats[$stockTicker?.toUpperCase()]["Expected Daily %"] >=0}
<span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Expected Daily %"]}%</span> <span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Expected Daily %"]}%</span>
{:else} {:else}
<span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Expected Daily %"]}% </span> <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Expected Daily %"]}% </span>
{/if} {/if}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats['SPY']["Expected Daily %"] >=0} {#if quantStats['SPY']["Expected Daily %"] >=0}
<span class="text-[#10DB06] ">+{quantStats['SPY']["Expected Daily %"]}%</span> <span class="text-[#10DB06] ">+{quantStats['SPY']["Expected Daily %"]}%</span>
{:else} {:else}
@ -550,17 +550,17 @@ updateYearRange()
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start text-white "> <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
Expected Monthly Expected Monthly
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats[$stockTicker?.toUpperCase()]["Expected Monthly %"] >=0} {#if quantStats[$stockTicker?.toUpperCase()]["Expected Monthly %"] >=0}
<span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Expected Monthly %"]}%</span> <span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Expected Monthly %"]}%</span>
{:else} {:else}
<span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Expected Monthly %"]}% </span> <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Expected Monthly %"]}% </span>
{/if} {/if}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats['SPY']["Expected Monthly %"] >=0} {#if quantStats['SPY']["Expected Monthly %"] >=0}
<span class="text-[#10DB06] ">+{quantStats['SPY']["Expected Monthly %"]}%</span> <span class="text-[#10DB06] ">+{quantStats['SPY']["Expected Monthly %"]}%</span>
{:else} {:else}
@ -570,17 +570,17 @@ updateYearRange()
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start text-white "> <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
Expected Yearly Expected Yearly
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats[$stockTicker?.toUpperCase()]["Expected Yearly %"] >=0} {#if quantStats[$stockTicker?.toUpperCase()]["Expected Yearly %"] >=0}
<span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Expected Yearly %"]}%</span> <span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Expected Yearly %"]}%</span>
{:else} {:else}
<span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Expected Yearly %"]}% </span> <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Expected Yearly %"]}% </span>
{/if} {/if}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats['SPY']["Expected Yearly %"] >=0} {#if quantStats['SPY']["Expected Yearly %"] >=0}
<span class="text-[#10DB06] ">+{quantStats['SPY']["Expected Yearly %"]}%</span> <span class="text-[#10DB06] ">+{quantStats['SPY']["Expected Yearly %"]}%</span>
{:else} {:else}
@ -590,41 +590,41 @@ updateYearRange()
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start text-white "> <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
Kelly Criterion Kelly Criterion
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats[$stockTicker?.toUpperCase()]["Kelly Criterion %"]}% {quantStats[$stockTicker?.toUpperCase()]["Kelly Criterion %"]}%
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Kelly Criterion %"]}% {quantStats['SPY']["Kelly Criterion %"]}%
</td> </td>
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start text-white "> <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
Risk of Ruin Risk of Ruin
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats[$stockTicker?.toUpperCase()]["Risk of Ruin %"]}% {quantStats[$stockTicker?.toUpperCase()]["Risk of Ruin %"]}%
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Risk of Ruin %"]}% {quantStats['SPY']["Risk of Ruin %"]}%
</td> </td>
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Daily Value-at-Risk Daily Value-at-Risk
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats[$stockTicker?.toUpperCase()]["Daily Value-at-Risk %"] >=0} {#if quantStats[$stockTicker?.toUpperCase()]["Daily Value-at-Risk %"] >=0}
<span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Daily Value-at-Risk %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Daily Value-at-Risk %"]?.toFixed(2)}%</span>
{:else} {:else}
<span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Daily Value-at-Risk %"]?.toFixed(2)}% </span> <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Daily Value-at-Risk %"]?.toFixed(2)}% </span>
{/if} {/if}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats['SPY']["Daily Value-at-Risk %"] >=0} {#if quantStats['SPY']["Daily Value-at-Risk %"] >=0}
<span class="text-[#10DB06] ">+{quantStats['SPY']["Daily Value-at-Risk %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats['SPY']["Daily Value-at-Risk %"]?.toFixed(2)}%</span>
{:else} {:else}
@ -634,17 +634,17 @@ updateYearRange()
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start text-white "> <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
Expected Shortfall (cVaR) Expected Shortfall (cVaR)
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats[$stockTicker?.toUpperCase()]["Expected Shortfall (cVaR) %"] >=0} {#if quantStats[$stockTicker?.toUpperCase()]["Expected Shortfall (cVaR) %"] >=0}
<span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Expected Shortfall (cVaR) %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Expected Shortfall (cVaR) %"]?.toFixed(2)}%</span>
{:else} {:else}
<span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Expected Shortfall (cVaR) %"]?.toFixed(2)}% </span> <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Expected Shortfall (cVaR) %"]?.toFixed(2)}% </span>
{/if} {/if}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats['SPY']["Expected Shortfall (cVaR) %"] >=0} {#if quantStats['SPY']["Expected Shortfall (cVaR) %"] >=0}
<span class="text-[#10DB06] ">+{quantStats['SPY']["Expected Shortfall (cVaR) %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats['SPY']["Expected Shortfall (cVaR) %"]?.toFixed(2)}%</span>
{:else} {:else}
@ -655,104 +655,104 @@ updateYearRange()
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start text-white w-36 sm:w-56"> <td class="text-start text-whitetext-sm sm:text-[1rem] whitespace-nowrap">
Max Consecutive Wins Max Consecutive Wins
</td> </td>
<td class="text-start text-end text-sm"> <td class="text-start text-end text-sm">
{quantStats[$stockTicker?.toUpperCase()]["Max Consecutive Wins"]} {quantStats[$stockTicker?.toUpperCase()]["Max Consecutive Wins"]}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Max Consecutive Wins"]} {quantStats['SPY']["Max Consecutive Wins"]}
</td> </td>
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start text-white w-36 sm:w-56"> <td class="text-start text-whitetext-sm sm:text-[1rem] whitespace-nowrap">
Max Consecutive Losses Max Consecutive Losses
</td> </td>
<td class="text-start text-end text-sm"> <td class="text-start text-end text-sm">
{quantStats[$stockTicker?.toUpperCase()]["Max Consecutive Losses"]} {quantStats[$stockTicker?.toUpperCase()]["Max Consecutive Losses"]}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Max Consecutive Losses"]} {quantStats['SPY']["Max Consecutive Losses"]}
</td> </td>
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start w-36 sm:w-56"> <td class="text-starttext-sm sm:text-[1rem] whitespace-nowrap">
Gain/Pain Ratio Gain/Pain Ratio
</td> </td>
<td class="text-start text-end text-sm"> <td class="text-start text-end text-sm">
{quantStats[$stockTicker?.toUpperCase()]["Gain/Pain Ratio"]?.toFixed(2)} {quantStats[$stockTicker?.toUpperCase()]["Gain/Pain Ratio"]?.toFixed(2)}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Gain/Pain Ratio"]?.toFixed(2)} {quantStats['SPY']["Gain/Pain Ratio"]?.toFixed(2)}
</td> </td>
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Gain/Pain (1M) Gain/Pain (1M)
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats[$stockTicker?.toUpperCase()]["Gain/Pain (1M)"]?.toFixed(2)} {quantStats[$stockTicker?.toUpperCase()]["Gain/Pain (1M)"]?.toFixed(2)}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Gain/Pain (1M)"]?.toFixed(2)} {quantStats['SPY']["Gain/Pain (1M)"]?.toFixed(2)}
</td> </td>
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Payoff Ratio Payoff Ratio
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats[$stockTicker?.toUpperCase()]["Payoff Ratio"]?.toFixed(2)} {quantStats[$stockTicker?.toUpperCase()]["Payoff Ratio"]?.toFixed(2)}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Payoff Ratio"]?.toFixed(2)} {quantStats['SPY']["Payoff Ratio"]?.toFixed(2)}
</td> </td>
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Profit Factor Profit Factor
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats[$stockTicker?.toUpperCase()]["Profit Factor"]?.toFixed(2)} {quantStats[$stockTicker?.toUpperCase()]["Profit Factor"]?.toFixed(2)}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Profit Factor"]?.toFixed(2)} {quantStats['SPY']["Profit Factor"]?.toFixed(2)}
</td> </td>
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Outlier Win Ratio Outlier Win Ratio
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats[$stockTicker?.toUpperCase()]["Outlier Win Ratio"]?.toFixed(2)} {quantStats[$stockTicker?.toUpperCase()]["Outlier Win Ratio"]?.toFixed(2)}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Outlier Win Ratio"]?.toFixed(2)} {quantStats['SPY']["Outlier Win Ratio"]?.toFixed(2)}
</td> </td>
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Outlier Loss Ratio Outlier Loss Ratio
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats[$stockTicker?.toUpperCase()]["Outlier Loss Ratio"]?.toFixed(2)} {quantStats[$stockTicker?.toUpperCase()]["Outlier Loss Ratio"]?.toFixed(2)}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Outlier Loss Ratio"]?.toFixed(2)} {quantStats['SPY']["Outlier Loss Ratio"]?.toFixed(2)}
</td> </td>
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start w-36 sm:w-56"> <td class="text-starttext-sm sm:text-[1rem] whitespace-nowrap">
MTD MTD
</td> </td>
<td class="text-start text-end text-sm"> <td class="text-start text-end text-sm">
@ -762,7 +762,7 @@ updateYearRange()
<span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["MTD %"]?.toFixed(2)}% </span> <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["MTD %"]?.toFixed(2)}% </span>
{/if} {/if}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats['SPY']["MTD %"] >=0} {#if quantStats['SPY']["MTD %"] >=0}
<span class="text-[#10DB06] ">+{quantStats['SPY']["MTD %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats['SPY']["MTD %"]?.toFixed(2)}%</span>
{:else} {:else}
@ -772,17 +772,17 @@ updateYearRange()
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
3M 3M
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats[$stockTicker?.toUpperCase()]["3M %"] >=0} {#if quantStats[$stockTicker?.toUpperCase()]["3M %"] >=0}
<span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["3M %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["3M %"]?.toFixed(2)}%</span>
{:else} {:else}
<span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["3M %"]?.toFixed(2)}% </span> <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["3M %"]?.toFixed(2)}% </span>
{/if} {/if}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats['SPY']["3M %"] >=0} {#if quantStats['SPY']["3M %"] >=0}
<span class="text-[#10DB06] ">+{quantStats['SPY']["3M %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats['SPY']["3M %"]?.toFixed(2)}%</span>
{:else} {:else}
@ -792,17 +792,17 @@ updateYearRange()
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
6M 6M
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats[$stockTicker?.toUpperCase()]["6M %"] >=0} {#if quantStats[$stockTicker?.toUpperCase()]["6M %"] >=0}
<span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["6M %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["6M %"]?.toFixed(2)}%</span>
{:else} {:else}
<span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["6M %"]?.toFixed(2)}% </span> <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["6M %"]?.toFixed(2)}% </span>
{/if} {/if}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats['SPY']["6M %"] >=0} {#if quantStats['SPY']["6M %"] >=0}
<span class="text-[#10DB06] ">+{quantStats['SPY']["6M %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats['SPY']["6M %"]?.toFixed(2)}%</span>
{:else} {:else}
@ -812,17 +812,17 @@ updateYearRange()
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
YTD YTD
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats[$stockTicker?.toUpperCase()]["YTD %"] >=0} {#if quantStats[$stockTicker?.toUpperCase()]["YTD %"] >=0}
<span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["YTD %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["YTD %"]?.toFixed(2)}%</span>
{:else} {:else}
<span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["YTD %"]?.toFixed(2)}% </span> <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["YTD %"]?.toFixed(2)}% </span>
{/if} {/if}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats['SPY']["YTD %"] >=0} {#if quantStats['SPY']["YTD %"] >=0}
<span class="text-[#10DB06] ">+{quantStats['SPY']["YTD %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats['SPY']["YTD %"]?.toFixed(2)}%</span>
{:else} {:else}
@ -832,17 +832,17 @@ updateYearRange()
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
1Y 1Y
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats[$stockTicker?.toUpperCase()]["1Y %"] >=0} {#if quantStats[$stockTicker?.toUpperCase()]["1Y %"] >=0}
<span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["1Y %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["1Y %"]?.toFixed(2)}%</span>
{:else} {:else}
<span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["1Y %"]?.toFixed(2)}% </span> <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["1Y %"]?.toFixed(2)}% </span>
{/if} {/if}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats['SPY']["1Y %"] >=0} {#if quantStats['SPY']["1Y %"] >=0}
<span class="text-[#10DB06] ">+{quantStats['SPY']["1Y %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats['SPY']["1Y %"]?.toFixed(2)}%</span>
{:else} {:else}
@ -852,17 +852,17 @@ updateYearRange()
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
3Y (ann.) 3Y (ann.)
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats[$stockTicker?.toUpperCase()]["3Y (ann.) %"] >=0} {#if quantStats[$stockTicker?.toUpperCase()]["3Y (ann.) %"] >=0}
<span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["3Y (ann.) %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["3Y (ann.) %"]?.toFixed(2)}%</span>
{:else} {:else}
<span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["3Y (ann.) %"]?.toFixed(2)}% </span> <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["3Y (ann.) %"]?.toFixed(2)}% </span>
{/if} {/if}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats['SPY']["3Y (ann.) %"] >=0} {#if quantStats['SPY']["3Y (ann.) %"] >=0}
<span class="text-[#10DB06] ">+{quantStats['SPY']["3Y (ann.) %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats['SPY']["3Y (ann.) %"]?.toFixed(2)}%</span>
{:else} {:else}
@ -872,7 +872,7 @@ updateYearRange()
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start w-36 sm:w-56"> <td class="text-starttext-sm sm:text-[1rem] whitespace-nowrap">
Best Day Best Day
</td> </td>
<td class="text-start text-end text-sm"> <td class="text-start text-end text-sm">
@ -882,7 +882,7 @@ updateYearRange()
<span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Best Day %"]?.toFixed(2)}% </span> <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Best Day %"]?.toFixed(2)}% </span>
{/if} {/if}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats['SPY']["Best Day %"] >=0} {#if quantStats['SPY']["Best Day %"] >=0}
<span class="text-[#10DB06] ">+{quantStats['SPY']["Best Day %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats['SPY']["Best Day %"]?.toFixed(2)}%</span>
{:else} {:else}
@ -892,17 +892,17 @@ updateYearRange()
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Worst Day Worst Day
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats[$stockTicker?.toUpperCase()]["Worst Day %"] >=0} {#if quantStats[$stockTicker?.toUpperCase()]["Worst Day %"] >=0}
<span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Worst Day %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Worst Day %"]?.toFixed(2)}%</span>
{:else} {:else}
<span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Worst Day %"]?.toFixed(2)}% </span> <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Worst Day %"]?.toFixed(2)}% </span>
{/if} {/if}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats['SPY']["Worst Day %"] >=0} {#if quantStats['SPY']["Worst Day %"] >=0}
<span class="text-[#10DB06] ">+{quantStats['SPY']["Worst Day %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats['SPY']["Worst Day %"]?.toFixed(2)}%</span>
{:else} {:else}
@ -912,17 +912,17 @@ updateYearRange()
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Best Month Best Month
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats[$stockTicker?.toUpperCase()]["Worst Day %"] >=0} {#if quantStats[$stockTicker?.toUpperCase()]["Worst Day %"] >=0}
<span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Worst Day %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Worst Day %"]?.toFixed(2)}%</span>
{:else} {:else}
<span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Worst Day %"]?.toFixed(2)}% </span> <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Worst Day %"]?.toFixed(2)}% </span>
{/if} {/if}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats['SPY']["Worst Day %"] >=0} {#if quantStats['SPY']["Worst Day %"] >=0}
<span class="text-[#10DB06] ">+{quantStats['SPY']["Worst Day %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats['SPY']["Worst Day %"]?.toFixed(2)}%</span>
{:else} {:else}
@ -932,17 +932,17 @@ updateYearRange()
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Worst Month Worst Month
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats[$stockTicker?.toUpperCase()]["Worst Month %"] >=0} {#if quantStats[$stockTicker?.toUpperCase()]["Worst Month %"] >=0}
<span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Worst Month %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Worst Month %"]?.toFixed(2)}%</span>
{:else} {:else}
<span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Worst Month %"]?.toFixed(2)}% </span> <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Worst Month %"]?.toFixed(2)}% </span>
{/if} {/if}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats['SPY']["Worst Month %"] >=0} {#if quantStats['SPY']["Worst Month %"] >=0}
<span class="text-[#10DB06] ">+{quantStats['SPY']["Worst Month %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats['SPY']["Worst Month %"]?.toFixed(2)}%</span>
{:else} {:else}
@ -952,17 +952,17 @@ updateYearRange()
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Best Year Best Year
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats[$stockTicker?.toUpperCase()]["Best Year %"] >=0} {#if quantStats[$stockTicker?.toUpperCase()]["Best Year %"] >=0}
<span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Best Year %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Best Year %"]?.toFixed(2)}%</span>
{:else} {:else}
<span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Best Year %"]?.toFixed(2)}% </span> <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Best Year %"]?.toFixed(2)}% </span>
{/if} {/if}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats['SPY']["Best Year %"] >=0} {#if quantStats['SPY']["Best Year %"] >=0}
<span class="text-[#10DB06] ">+{quantStats['SPY']["Best Year %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats['SPY']["Best Year %"]?.toFixed(2)}%</span>
{:else} {:else}
@ -972,17 +972,17 @@ updateYearRange()
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Worst Year Worst Year
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats[$stockTicker?.toUpperCase()]["Worst Year %"] >=0} {#if quantStats[$stockTicker?.toUpperCase()]["Worst Year %"] >=0}
<span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Worst Year %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Worst Year %"]?.toFixed(2)}%</span>
{:else} {:else}
<span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Worst Year %"]?.toFixed(2)}% </span> <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Worst Year %"]?.toFixed(2)}% </span>
{/if} {/if}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats['SPY']["Worst Year %"] >=0} {#if quantStats['SPY']["Worst Year %"] >=0}
<span class="text-[#10DB06] ">+{quantStats['SPY']["Worst Year %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats['SPY']["Worst Year %"]?.toFixed(2)}%</span>
{:else} {:else}
@ -992,7 +992,7 @@ updateYearRange()
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start w-36 sm:w-56"> <td class="text-starttext-sm sm:text-[1rem] whitespace-nowrap">
Avg. Drawdown Avg. Drawdown
</td> </td>
<td class="text-start text-end text-sm"> <td class="text-start text-end text-sm">
@ -1002,7 +1002,7 @@ updateYearRange()
<span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Avg. Drawdown"]?.toFixed(2)}% </span> <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Avg. Drawdown"]?.toFixed(2)}% </span>
{/if} {/if}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats['SPY']["Avg. Drawdown"] >=0} {#if quantStats['SPY']["Avg. Drawdown"] >=0}
<span class="text-[#10DB06] ">+{quantStats['SPY']["Avg. Drawdown"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats['SPY']["Avg. Drawdown"]?.toFixed(2)}%</span>
{:else} {:else}
@ -1012,44 +1012,44 @@ updateYearRange()
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Avg. Drawdown Days Avg. Drawdown Days
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats[$stockTicker?.toUpperCase()]["Avg. Drawdown Days"]} {quantStats[$stockTicker?.toUpperCase()]["Avg. Drawdown Days"]}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Avg. Drawdown Days"]} {quantStats['SPY']["Avg. Drawdown Days"]}
</td> </td>
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Recovery Factor Recovery Factor
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats[$stockTicker?.toUpperCase()]["Recovery Factor"]?.toFixed(2)} {quantStats[$stockTicker?.toUpperCase()]["Recovery Factor"]?.toFixed(2)}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Recovery Factor"]?.toFixed(2)} {quantStats['SPY']["Recovery Factor"]?.toFixed(2)}
</td> </td>
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Ulcer Index Ulcer Index
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats[$stockTicker?.toUpperCase()]["Ulcer Index"]?.toFixed(2)} {quantStats[$stockTicker?.toUpperCase()]["Ulcer Index"]?.toFixed(2)}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Ulcer Index"]?.toFixed(2)} {quantStats['SPY']["Ulcer Index"]?.toFixed(2)}
</td> </td>
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start w-36 sm:w-56"> <td class="text-starttext-sm sm:text-[1rem] whitespace-nowrap">
Avg. Up Month Avg. Up Month
</td> </td>
<td class="text-start text-end text-sm"> <td class="text-start text-end text-sm">
@ -1059,7 +1059,7 @@ updateYearRange()
<span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Avg. Up Month %"]?.toFixed(2)}% </span> <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Avg. Up Month %"]?.toFixed(2)}% </span>
{/if} {/if}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats['SPY']["Avg. Up Month %"] >=0} {#if quantStats['SPY']["Avg. Up Month %"] >=0}
<span class="text-[#10DB06] ">+{quantStats['SPY']["Avg. Up Month %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats['SPY']["Avg. Up Month %"]?.toFixed(2)}%</span>
{:else} {:else}
@ -1069,17 +1069,17 @@ updateYearRange()
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Avg. Down Month Avg. Down Month
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats[$stockTicker?.toUpperCase()]["Avg. Down Month %"] >=0} {#if quantStats[$stockTicker?.toUpperCase()]["Avg. Down Month %"] >=0}
<span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Avg. Down Month %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats[$stockTicker?.toUpperCase()]["Avg. Down Month %"]?.toFixed(2)}%</span>
{:else} {:else}
<span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Avg. Down Month %"]?.toFixed(2)}% </span> <span class="text-[#FF2F1F] ">{quantStats[$stockTicker?.toUpperCase()]["Avg. Down Month %"]?.toFixed(2)}% </span>
{/if} {/if}
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if quantStats['SPY']["Avg. Down Month %"] >=0} {#if quantStats['SPY']["Avg. Down Month %"] >=0}
<span class="text-[#10DB06] ">+{quantStats['SPY']["Avg. Down Month %"]?.toFixed(2)}%</span> <span class="text-[#10DB06] ">+{quantStats['SPY']["Avg. Down Month %"]?.toFixed(2)}%</span>
{:else} {:else}
@ -1090,49 +1090,49 @@ updateYearRange()
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Win Days Win Days
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats[$stockTicker?.toUpperCase()]["Win Days %"]?.toFixed(2)}% {quantStats[$stockTicker?.toUpperCase()]["Win Days %"]?.toFixed(2)}%
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Win Days %"]?.toFixed(2)}% {quantStats['SPY']["Win Days %"]?.toFixed(2)}%
</td> </td>
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Win Month Win Month
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats[$stockTicker?.toUpperCase()]["Win Month %"]?.toFixed(2)}% {quantStats[$stockTicker?.toUpperCase()]["Win Month %"]?.toFixed(2)}%
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Win Month %"]?.toFixed(2)}% {quantStats['SPY']["Win Month %"]?.toFixed(2)}%
</td> </td>
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Win Quarter Win Quarter
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats[$stockTicker?.toUpperCase()]["Win Quarter %"]?.toFixed(2)}% {quantStats[$stockTicker?.toUpperCase()]["Win Quarter %"]?.toFixed(2)}%
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Win Quarter %"]?.toFixed(2)}% {quantStats['SPY']["Win Quarter %"]?.toFixed(2)}%
</td> </td>
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] font-semibold"> <tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start "> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
Win Year Win Year
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats[$stockTicker?.toUpperCase()]["Win Year %"]?.toFixed(2)}% {quantStats[$stockTicker?.toUpperCase()]["Win Year %"]?.toFixed(2)}%
</td> </td>
<td class="text-end text-sm"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
{quantStats['SPY']["Win Year %"]?.toFixed(2)}% {quantStats['SPY']["Win Year %"]?.toFixed(2)}%
</td> </td>
</tr> </tr>