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

ui fix && update options page

Browse Source
This commit is contained in:
MuslemRahimi 2024-09-16 00:06:13 +02:00
parent 88abc08daf
commit e25fe6d18b
8 changed files with 328 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/lib/components/BullBearSay.svelte
View File

@ -69,10 +69,17 @@
class="absolute inset-0 rounded-lg bg-purple-600" class="absolute inset-0 rounded-lg bg-purple-600"
></div> ></div>
{/if} {/if}
{#if data?.user?.tier !== 'Pro' && i === 1}
<a href='/pricing' class="relative text-sm block font-medium duration-200 text-white">
{item.title}
<svg class="inline-block ml-1 -mt-0.5 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"/></svg>
</a>
{:else}
<span <span
class="relative text-sm block font-medium duration-200 text-white"> class="relative text-sm block font-medium duration-200 text-white">
{item.title} {item.title}
</span> </span>
{/if}
</button> </button>
{/each} {/each}
</div> </div>
@ -90,6 +97,7 @@
<p class="pr-1">{rawData?.bullSays}</p> <p class="pr-1">{rawData?.bullSays}</p>
{:else} {:else}
<p class="pr-1">{rawData?.bearSays}</p> <p class="pr-1">{rawData?.bearSays}</p>
{/if} {/if}
</span> </span>
</div> </div>

56
src/routes/crypto/[tickerID]/+layout.svelte
View File

@ -874,63 +874,57 @@ $: {
<!--Start Add Watchlist Modal--> <!--Start Add Watchlist Modal-->
<input type="checkbox" id="addWatchListModal" class="modal-toggle" /> <input type="checkbox" id="addWatchListModal" class="modal-toggle" />
<dialog id="addWatchListModal" class="modal modal-bottom sm:modal-middle "> <dialog id="addWatchListModal" class="modal modal-bottom sm:modal-middle bg-[#000] bg-opacity-[0.5]">
<label id="addWatchListModal" for="addWatchListModal" class="cursor-pointer modal-backdrop"></label>
<div class="modal-box w-full bg-[#191919] sm:border sm:border-gray-800">
<label id="addWatchListModal" for="addWatchListModal" class="cursor-pointer modal-backdrop bg-[#09090B] bg-opacity-[0.5]"></label> <label for="addWatchListModal" class="cursor-pointer bg-[#191919] absolute right-5 top-2 text-[1.8rem] text-white"> ✕ </label>
<div class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-800">
<label for="addWatchListModal" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-[1.8rem] text-white">
✕
</label>
<div class="text-white"> <div class="text-white">
<h3 class="font-semibold text-lg sm:text-xl mb-10"> <h3 class="font-semibold text-lg sm:text-xl mb-10">Add to Watchlist</h3>
Add to Watchlist
</h3>
<div class="flex flex-col items-center w-full max-w-3xl bg-[#09090B]">
<div class="flex flex-col items-center w-full max-w-3xl bg-[#191919]">
{#each userWatchList as item} {#each userWatchList as item}
<label on:click|stopPropagation={() => toggleUserWatchlist(item?.id)} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5"> <label on:click|stopPropagation={() => toggleUserWatchlist(item?.id)} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
<div class="flex flex-row items-center w-full bg-[#313131] p-3 rounded-lg {item?.ticker?.includes($cryptoTicker) ? 'ring-2 ring-[#04E000]' : ''}"> <div class="flex flex-row items-center w-full bg-[#313131] p-3 rounded-lg {item?.ticker?.includes($cryptoTicker) ? 'ring-2 ring-[#04E000]' : ''}">
<div class="flex flex-col items-center w-full"> <div class="flex flex-col items-center w-full">
<span class="ml-1 text-white font-medium mr-auto"> <span class="ml-1 text-white font-medium mr-auto">
{item?.title} {item?.title}
</span> </span>
<span class="ml-1 text-white text-opacity-40 text-sm font-medium mr-auto"> <span class="ml-1 text-white text-opacity-40 text-sm font-medium mr-auto">
{item?.ticker?.length} {item?.ticker?.length !==1 ? 'Companies' : 'Company'} {item?.ticker?.length}
{item?.ticker?.length !== 1 ? "Companies" : "Company"}
</span> </span>
</div> </div>
<div class="rounded-full w-8 h-8 relative border border-[#737373]"> <div class="rounded-full w-8 h-8 relative border border-[#737373]">
{#if item?.ticker?.includes($cryptoTicker)} {#if item?.ticker?.includes($cryptoTicker)}
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg> <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"
><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc>
<g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero">
<path
d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z"
id="🎨-Color"
>
</path>
</g>
</g>
</g></svg
>
{/if} {/if}
</div> </div>
</div> </div>
</label> </label>
{/each} {/each}
</div> </div>
</div> </div>
</div> </div>
</dialog> </dialog>
<!--End Add Watchlist Modal--> <!--End Add Watchlist Modal-->

56
src/routes/etf/[tickerID]/+layout.svelte
View File

@ -952,63 +952,57 @@ $: {
<!--Start Add Watchlist Modal--> <!--Start Add Watchlist Modal-->
<input type="checkbox" id="addWatchListModal" class="modal-toggle" /> <input type="checkbox" id="addWatchListModal" class="modal-toggle" />
<dialog id="addWatchListModal" class="modal modal-bottom sm:modal-middle "> <dialog id="addWatchListModal" class="modal modal-bottom sm:modal-middle bg-[#000] bg-opacity-[0.5]">
<label id="addWatchListModal" for="addWatchListModal" class="cursor-pointer modal-backdrop"></label>
<div class="modal-box w-full bg-[#191919] sm:border sm:border-gray-800">
<label id="addWatchListModal" for="addWatchListModal" class="cursor-pointer modal-backdrop bg-[#09090B] bg-opacity-[0.5]"></label> <label for="addWatchListModal" class="cursor-pointer bg-[#191919] absolute right-5 top-2 text-[1.8rem] text-white"> ✕ </label>
<div class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-800">
<label for="addWatchListModal" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-[1.8rem] text-white">
✕
</label>
<div class="text-white"> <div class="text-white">
<h3 class="font-semibold text-lg sm:text-xl mb-10"> <h3 class="font-semibold text-lg sm:text-xl mb-10">Add to Watchlist</h3>
Add to Watchlist
</h3>
<div class="flex flex-col items-center w-full max-w-3xl bg-[#09090B]">
<div class="flex flex-col items-center w-full max-w-3xl bg-[#191919]">
{#each userWatchList as item} {#each userWatchList as item}
<label on:click|stopPropagation={() => toggleUserWatchlist(item?.id)} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5"> <label on:click|stopPropagation={() => toggleUserWatchlist(item?.id)} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
<div class="flex flex-row items-center w-full bg-[#313131] p-3 rounded-lg {item?.ticker?.includes($etfTicker) ? 'ring-2 ring-[#04E000]' : ''}"> <div class="flex flex-row items-center w-full bg-[#313131] p-3 rounded-lg {item?.ticker?.includes($etfTicker) ? 'ring-2 ring-[#04E000]' : ''}">
<div class="flex flex-col items-center w-full"> <div class="flex flex-col items-center w-full">
<span class="ml-1 text-white font-medium mr-auto"> <span class="ml-1 text-white font-medium mr-auto">
{item?.title} {item?.title}
</span> </span>
<span class="ml-1 text-white text-opacity-40 text-sm font-medium mr-auto"> <span class="ml-1 text-white text-opacity-40 text-sm font-medium mr-auto">
{item?.ticker?.length} {item?.ticker?.length !==1 ? 'Companies' : 'Company'} {item?.ticker?.length}
{item?.ticker?.length !== 1 ? "Companies" : "Company"}
</span> </span>
</div> </div>
<div class="rounded-full w-8 h-8 relative border border-[#737373]"> <div class="rounded-full w-8 h-8 relative border border-[#737373]">
{#if item?.ticker?.includes($etfTicker)} {#if item?.ticker?.includes($etfTicker)}
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg> <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"
><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc>
<g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero">
<path
d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z"
id="🎨-Color"
>
</path>
</g>
</g>
</g></svg
>
{/if} {/if}
</div> </div>
</div> </div>
</label> </label>
{/each} {/each}
</div> </div>
</div> </div>
</div> </div>
</dialog> </dialog>
<!--End Add Watchlist Modal--> <!--End Add Watchlist Modal-->

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

@ -14,8 +14,12 @@
use([BarChart,LineChart, GridComponent, TooltipComponent, CanvasRenderer]) use([BarChart,LineChart, GridComponent, TooltipComponent, CanvasRenderer])
export let data; export let data;
let isLoaded = false; let isLoaded = false;
let activeEX = 0;
let activeIdx = 0;
const getDailyTransactions = async (transactionId) => { const getDailyTransactions = async (transactionId) => {
let output; let output;
const cachedData = getCache(transactionId, "getDailyTransactions"); const cachedData = getCache(transactionId, "getDailyTransactions");
@ -51,7 +55,7 @@
let optionsPlotData = data?.getOptionsPlotData?.plot; let optionsPlotData = data?.getOptionsPlotData?.plot;
let displayData = 'volume'; let displayData = 'volume';
let options; let options;
let optionsGEX; let optionsEX;
let rawData = data?.getOptionsHistoricalData; let rawData = data?.getOptionsHistoricalData;
let optionList = rawData?.slice(0,30); let optionList = rawData?.slice(0,30);
@ -213,20 +217,20 @@ function plotData(callData, putData) {
return options; return options;
} }
function getGEXPlot() { function getEXPlot(state) {
let dates = []; let dates = [];
let gexList = []; let valueList = [];
let priceList = []; let priceList = [];
data?.getOptionsGexData?.forEach(item => { data?.getOptionsGexData?.forEach(item => {
dates?.push(item?.date); dates?.push(item?.date);
gexList?.push(item?.gex); valueList?.push(item[state]);
priceList?.push(item?.close) priceList?.push(item?.close)
}); });
const {unit, denominator } = normalizer(Math.max(...gexList) ?? 0) const {unit, denominator } = normalizer(Math.max(...valueList) ?? 0)
const option = { const option = {
@ -310,7 +314,7 @@ function getGEXPlot() {
}, },
{ {
name: 'GEX', name: 'GEX',
data: gexList, data: valueList,
type: 'bar', type: 'bar',
yAxisIndex: 1, yAxisIndex: 1,
itemStyle: { itemStyle: {
@ -407,7 +411,7 @@ function processPlotData(filteredList: any[]) {
onMount(async () => { onMount(async () => {
if(data?.getOptionsGexData?.length !== 0) { if(data?.getOptionsGexData?.length !== 0) {
optionsGEX = getGEXPlot(); optionsEX = getEXPlot('gex');
} }
@ -477,14 +481,27 @@ function handleMode(i) {
}, },
]; ];
let activeIdx = 0;
function changeStatement(event) function changeStatement(event)
{ {
optionChainList = (data?.getOptionsChainData?.filter(item => item?.date_expiration === event.target.value))?.at(0)?.chain || []; optionChainList = (data?.getOptionsChainData?.filter(item => item?.date_expiration === event.target.value))?.at(0)?.chain || [];
} }
const tabEX = [
{
title: "GEX",
},
{
title: "DEX",
},
];
function handleEXMode(i) {
activeEX = i;
optionsEX = getEXPlot(activeEX === 0 ? 'gex' : 'dex');
}
$: { $: {
@ -649,12 +666,33 @@ $: {
{#if data?.getOptionsGexData?.length !== 0} {#if data?.getOptionsGexData?.length !== 0}
<h3 class="text-2xl text-gray-200 font-bold mb-4 text-start"> <h3 class="text-2xl text-gray-200 font-bold mb-4 text-start">
Daily Gamma Exposure (GEX) {activeEX === 0 ? 'Daily Gamma Exposure (GEX)' : 'Daily Delta Exposure (DEX)'}
</h3> </h3>
<div class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-lg p-1 mt-6 mb-6">
{#each tabEX as item, i}
<button
on:click={() => handleEXMode(i)}
class="group relative z-[1] rounded-full px-6 py-1 {activeEX === i
? 'z-0'
: ''} "
>
{#if activeEX === i}
<div
class="absolute inset-0 rounded-lg bg-purple-600"
></div>
{/if}
<span
class="relative text-sm block font-medium duration-200 text-white">
{item.title}
</span>
</button>
{/each}
</div>
<div class="app w-full bg-[#09090B] rounded-xl mb-24"> <div class="app w-full bg-[#09090B] rounded-xl mb-24">
<Chart {init} options={optionsGEX} class="chart" /> <Chart {init} options={optionsEX} class="chart" />
</div> </div>
{/if} {/if}
@ -711,6 +749,7 @@ $: {
<td class="text-slate-200 font-semibold text-sm text-end">% Change</td> <td class="text-slate-200 font-semibold text-sm text-end">% Change</td>
<td class="text-slate-200 font-semibold text-sm text-end">P/C</td> <td class="text-slate-200 font-semibold text-sm text-end">P/C</td>
<td class="text-slate-200 font-semibold text-sm text-center">Bear/Bull</td> <td class="text-slate-200 font-semibold text-sm text-center">Bear/Bull</td>
<td class="text-slate-200 font-semibold text-sm text-center">Bid/Ask Vol</td>
<td class="text-slate-200 font-semibold text-sm text-end">% OTM</td> <td class="text-slate-200 font-semibold text-sm text-end">% OTM</td>
<td class="text-slate-200 font-semibold text-sm text-end">Total Volume</td> <td class="text-slate-200 font-semibold text-sm text-end">Total Volume</td>
<td class="text-slate-200 font-semibold text-sm text-end">Total OI</td> <td class="text-slate-200 font-semibold text-sm text-end">Total OI</td>
@ -721,7 +760,7 @@ $: {
{#each (data?.user?.tier === 'Pro' ? optionList : optionList?.slice(0,3)) as item, index} {#each (data?.user?.tier === 'Pro' ? optionList : optionList?.slice(0,3)) as item, index}
<tr on:click={() => handleViewData(item?.date)} on:mouseover={() => getDailyTransactions($etfTicker+'+'+item?.date)} class="cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] {index+1 === optionList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}"> <tr on:click={() => handleViewData(item?.date)} on:mouseover={() => getDailyTransactions($etfTicker+'+'+item?.date)} class="cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] {index+1 === optionList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
<td class="text-white text-sm sm:text-[1rem] text-start"> <td class="text-white text-sm text-start">
{formatDate(item?.date)} {formatDate(item?.date)}
</td> </td>
@ -737,7 +776,7 @@ $: {
{item?.c_vol !== 0 ? (item?.p_vol/item?.c_vol)?.toFixed(1) : '-'} {item?.c_vol !== 0 ? (item?.p_vol/item?.c_vol)?.toFixed(1) : '-'}
</td> </td>
<td class="whitespace-nowrap text-sm sm:text-[1rem] {item?.put_call === 'Calls' ? 'text-[#00FC50]' : 'text-[#FC2120]'} text-center"> <td class="whitespace-nowrap text-sm sm:text-[1rem] text-center">
{#if item?.bear_ratio > (item?.neutral_ratio ?? 0) && item?.bear_ratio > (item?.bull_ratio ?? 0)} {#if item?.bear_ratio > (item?.neutral_ratio ?? 0) && item?.bear_ratio > (item?.bull_ratio ?? 0)}
<div class="badge bg-[#FF2F1F] text-white font-semibold gap-2"> <div class="badge bg-[#FF2F1F] text-white font-semibold gap-2">
{item?.bear_ratio?.toFixed(0)}% Bearish {item?.bear_ratio?.toFixed(0)}% Bearish
@ -769,6 +808,38 @@ $: {
{/if} {/if}
</td> </td>
<td class="whitespace-nowrap text-sm sm:text-[1rem] text-center">
{#if item?.bid_ratio > (item?.midpoint_ratio ?? 0) && item?.bid_ratio > (item?.ask_ratio ?? 0)}
<div class="badge bg-[#FF2F1F] text-white font-semibold gap-2">
{item?.bid_ratio?.toFixed(0)}% Bid
</div>
{:else if item?.ask_ratio > (item?.midpoint_ratio ?? 0) && item?.ask_ratio > (item?.bid_ratio ?? 0)}
<div class="badge bg-[#75D377] text-black font-semibold gap-2">
{item?.ask_ratio?.toFixed(0)}% Ask
</div>
{:else if item?.midpoint_ratio > (item?.ask_ratio ?? 0) && item?.midpoint_ratio > (item?.bid_ratio ?? 0)}
<div class="badge bg-[#FBCE3C] text-black font-semibold gap-2">
{item?.midpoint_ratio?.toFixed(0)}% Midpoint
</div>
{:else if item?.bid_ratio === item?.ask_ratio && item?.bid_ratio > (item?.midpoint_ratio ?? 0)}
<div class="badge bg-[#B8B8B8] text-black font-semibold gap-2">
{item?.bid_ratio?.toFixed(0)}% Bid/Ask Tie
</div>
{:else if item?.bid_ratio === item?.midpoint_ratio && item?.bid_ratio > (item?.ask_ratio ?? 0)}
<div class="badge bg-[#B8B8B8] text-black font-semibold gap-2">
{item?.bid_ratio?.toFixed(0)}% Bid/Neutral Tie
</div>
{:else if item?.ask_ratio === item?.midpoint_ratio && item?.ask_ratio > (item?.bid_ratio ?? 0)}
<div class="badge bg-[#B8B8B8] text-black font-semibold gap-2">
{item?.ask_ratio?.toFixed(0)}% Ask/Neutral Tie
</div>
{:else}
<div class="badge bg-[#B8B8B8] text-black font-semibold gap-2">
Equal Distribution
</div>
{/if}
</td>
<td class="text-sm sm:text-[1rem] text-white text-end"> <td class="text-sm sm:text-[1rem] text-white text-end">
{item?.otm_ratio?.toFixed(0)}% {item?.otm_ratio?.toFixed(0)}%
</td> </td>
@ -924,6 +995,7 @@ $: {
<td class="text-slate-200 font-semibold text-sm text-end">Strike</td> <td class="text-slate-200 font-semibold text-sm text-end">Strike</td>
<td class="text-slate-200 font-semibold text-sm text-end">C/P</td> <td class="text-slate-200 font-semibold text-sm text-end">C/P</td>
<td class="text-slate-200 font-semibold text-sm text-start">Sent.</td> <td class="text-slate-200 font-semibold text-sm text-start">Sent.</td>
<td class="text-slate-200 font-semibold text-sm text-start">Exec.</td>
<td class="text-slate-200 font-semibold text-sm text-end">Spot</td> <td class="text-slate-200 font-semibold text-sm text-end">Spot</td>
<td class="text-slate-200 font-semibold text-sm text-end">Price</td> <td class="text-slate-200 font-semibold text-sm text-end">Price</td>
<td class="text-slate-200 font-semibold text-sm text-end">Prem.</td> <td class="text-slate-200 font-semibold text-sm text-end">Prem.</td>
@ -960,6 +1032,9 @@ $: {
<td class="text-sm sm:text-[1rem] {item?.sentiment === 'Bullish' ? 'text-[#00FC50]' : item?.sentiment === 'Bearish' ? 'text-[#FC2120]' : 'text-[#C6A755]'} text-start"> <td class="text-sm sm:text-[1rem] {item?.sentiment === 'Bullish' ? 'text-[#00FC50]' : item?.sentiment === 'Bearish' ? 'text-[#FC2120]' : 'text-[#C6A755]'} text-start">
{item?.sentiment} {item?.sentiment}
</td> </td>
<td class="text-sm sm:text-[1rem] text-white text-start whitespace-nowrap">
{item?.execution_estimate}
</td>
<td class="text-sm sm:text-[1rem] text-end text-white"> <td class="text-sm sm:text-[1rem] text-end text-white">
{item?.underlying_price} {item?.underlying_price}

18
src/routes/price-alert/+page.svelte
View File

@ -342,7 +342,7 @@ $: charNumber = $screenWidth < 640 ? 15 : 40;
<tr class=""> <tr class="">
<th class="text-white font-semibold text-[1rem] ">Symbol</th> <th class="text-white font-semibold text-[1rem] ">Symbol</th>
<th class="text-white font-semibold text-[1rem] ">Company</th> <th class="text-white font-semibold text-[1rem] ">Company</th>
<th class="text-white font-semibold text-center text-[1rem] ">Volume</th> <th class="text-white font-semibold text-end text-[1rem] ">Volume</th>
<th class="text-white font-semibold text-end text-[1rem] ">Price when Created</th> <th class="text-white font-semibold text-end text-[1rem] ">Price when Created</th>
<th class="text-white font-semibold text-end text-[1rem] ">Price Target</th> <th class="text-white font-semibold text-end text-[1rem] ">Price Target</th>
<th class="text-white font-semibold text-end text-[1rem] ">Current Price</th> <th class="text-white font-semibold text-end text-[1rem] ">Current Price</th>
@ -363,7 +363,7 @@ $: charNumber = $screenWidth < 640 ? 15 : 40;
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name} {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
</td> </td>
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-center border-b-[#09090B]"> <td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
{new Intl.NumberFormat("en", { {new Intl.NumberFormat("en", {
minimumFractionDigits: 2, minimumFractionDigits: 2,
maximumFractionDigits: 2 maximumFractionDigits: 2
@ -431,7 +431,7 @@ $: charNumber = $screenWidth < 640 ? 15 : 40;
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div class="w-full flex justify-between items-center p-3 mt-3"> <div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription Pro Subscription 🔥
</h2> </h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/> <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
</div> </div>
@ -442,30 +442,30 @@ $: charNumber = $screenWidth < 640 ? 15 : 40;
</div> </div>
{/if} {/if}
<div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"> <div on:click={() => goto('/watchlist')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div class="w-full flex justify-between items-center p-3 mt-3"> <div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Wallstreet Analyst Watchlist ⭐
</h2> </h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/> <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
</div> </div>
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Get the latest top Wall Street analyst ratings. Build your watchlist to keep track of their performance.
</span> </span>
</div> </div>
</div> </div>
<div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"> <div on:click={() => goto('/stock-screener')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div class="w-full flex justify-between items-center p-3 mt-3"> <div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Congress Trading Stock Screener 🔎
</h2> </h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/> <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
</div> </div>
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Get the latest top Congress trading insights. Build your Stock Screener to find profitable stocks.
</span> </span>
</div> </div>
</div> </div>

10
src/routes/stocks/[tickerID]/+layout.svelte
View File

@ -840,16 +840,16 @@ $: {
<!--Start Add Watchlist Modal--> <!--Start Add Watchlist Modal-->
<input type="checkbox" id="addWatchListModal" class="modal-toggle" /> <input type="checkbox" id="addWatchListModal" class="modal-toggle" />
<dialog id="addWatchListModal" class="modal modal-bottom sm:modal-middle"> <dialog id="addWatchListModal" class="modal modal-bottom sm:modal-middle bg-[#000] bg-opacity-[0.5]">
<label id="addWatchListModal" for="addWatchListModal" class="cursor-pointer modal-backdrop bg-[#09090B] bg-opacity-[0.5]"></label> <label id="addWatchListModal" for="addWatchListModal" class="cursor-pointer modal-backdrop"></label>
<div class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-800"> <div class="modal-box w-full bg-[#191919] sm:border sm:border-gray-800">
<label for="addWatchListModal" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-[1.8rem] text-white"> ✕ </label> <label for="addWatchListModal" class="cursor-pointer bg-[#191919] absolute right-5 top-2 text-[1.8rem] text-white"> ✕ </label>
<div class="text-white"> <div class="text-white">
<h3 class="font-semibold text-lg sm:text-xl mb-10">Add to Watchlist</h3> <h3 class="font-semibold text-lg sm:text-xl mb-10">Add to Watchlist</h3>
<div class="flex flex-col items-center w-full max-w-3xl bg-[#09090B]"> <div class="flex flex-col items-center w-full max-w-3xl bg-[#191919]">
{#each userWatchList as item} {#each userWatchList as item}
<label on:click|stopPropagation={() => toggleUserWatchlist(item?.id)} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5"> <label on:click|stopPropagation={() => toggleUserWatchlist(item?.id)} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
<div class="flex flex-row items-center w-full bg-[#313131] p-3 rounded-lg {item?.ticker?.includes($stockTicker) ? 'ring-2 ring-[#04E000]' : ''}"> <div class="flex flex-row items-center w-full bg-[#313131] p-3 rounded-lg {item?.ticker?.includes($stockTicker) ? 'ring-2 ring-[#04E000]' : ''}">

107
src/routes/stocks/[tickerID]/options/+page.svelte
View File

@ -14,8 +14,12 @@
use([BarChart,LineChart, GridComponent, TooltipComponent, CanvasRenderer]) use([BarChart,LineChart, GridComponent, TooltipComponent, CanvasRenderer])
export let data; export let data;
let isLoaded = false; let isLoaded = false;
let activeEX = 0;
let activeIdx = 0;
const getDailyTransactions = async (transactionId) => { const getDailyTransactions = async (transactionId) => {
let output; let output;
const cachedData = getCache(transactionId, "getDailyTransactions"); const cachedData = getCache(transactionId, "getDailyTransactions");
@ -51,7 +55,7 @@
let optionsPlotData = data?.getOptionsPlotData?.plot; let optionsPlotData = data?.getOptionsPlotData?.plot;
let displayData = 'volume'; let displayData = 'volume';
let options; let options;
let optionsGEX; let optionsEX;
let rawData = data?.getOptionsHistoricalData; let rawData = data?.getOptionsHistoricalData;
let optionList = rawData?.slice(0,30); let optionList = rawData?.slice(0,30);
@ -213,20 +217,20 @@ function plotData(callData, putData) {
return options; return options;
} }
function getGEXPlot() { function getEXPlot(state) {
let dates = []; let dates = [];
let gexList = []; let valueList = [];
let priceList = []; let priceList = [];
data?.getOptionsGexData?.forEach(item => { data?.getOptionsGexData?.forEach(item => {
dates?.push(item?.date); dates?.push(item?.date);
gexList?.push(item?.gex); valueList?.push(item[state]);
priceList?.push(item?.close) priceList?.push(item?.close)
}); });
const {unit, denominator } = normalizer(Math.max(...gexList) ?? 0) const {unit, denominator } = normalizer(Math.max(...valueList) ?? 0)
const option = { const option = {
@ -310,7 +314,7 @@ function getGEXPlot() {
}, },
{ {
name: 'GEX', name: 'GEX',
data: gexList, data: valueList,
type: 'bar', type: 'bar',
yAxisIndex: 1, yAxisIndex: 1,
itemStyle: { itemStyle: {
@ -407,7 +411,7 @@ function processPlotData(filteredList: any[]) {
onMount(async () => { onMount(async () => {
if(data?.getOptionsGexData?.length !== 0) { if(data?.getOptionsGexData?.length !== 0) {
optionsGEX = getGEXPlot(); optionsEX = getEXPlot('gex');
} }
@ -477,14 +481,27 @@ function handleMode(i) {
}, },
]; ];
let activeIdx = 0;
function changeStatement(event) function changeStatement(event)
{ {
optionChainList = (data?.getOptionsChainData?.filter(item => item?.date_expiration === event.target.value))?.at(0)?.chain || []; optionChainList = (data?.getOptionsChainData?.filter(item => item?.date_expiration === event.target.value))?.at(0)?.chain || [];
} }
const tabEX = [
{
title: "GEX",
},
{
title: "DEX",
},
];
function handleEXMode(i) {
activeEX = i;
optionsEX = getEXPlot(activeEX === 0 ? 'gex' : 'dex');
}
$: { $: {
@ -649,12 +666,33 @@ $: {
{#if data?.getOptionsGexData?.length !== 0} {#if data?.getOptionsGexData?.length !== 0}
<h3 class="text-2xl text-gray-200 font-bold mb-4 text-start"> <h3 class="text-2xl text-gray-200 font-bold mb-4 text-start">
Daily Gamma Exposure (GEX) {activeEX === 0 ? 'Daily Gamma Exposure (GEX)' : 'Daily Delta Exposure (DEX)'}
</h3> </h3>
<div class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-lg p-1 mt-6 mb-6">
{#each tabEX as item, i}
<button
on:click={() => handleEXMode(i)}
class="group relative z-[1] rounded-full px-6 py-1 {activeEX === i
? 'z-0'
: ''} "
>
{#if activeEX === i}
<div
class="absolute inset-0 rounded-lg bg-purple-600"
></div>
{/if}
<span
class="relative text-sm block font-medium duration-200 text-white">
{item.title}
</span>
</button>
{/each}
</div>
<div class="app w-full bg-[#09090B] rounded-xl mb-24"> <div class="app w-full bg-[#09090B] rounded-xl mb-24">
<Chart {init} options={optionsGEX} class="chart" /> <Chart {init} options={optionsEX} class="chart" />
</div> </div>
{/if} {/if}
@ -711,6 +749,7 @@ $: {
<td class="text-slate-200 font-semibold text-sm text-end">% Change</td> <td class="text-slate-200 font-semibold text-sm text-end">% Change</td>
<td class="text-slate-200 font-semibold text-sm text-end">P/C</td> <td class="text-slate-200 font-semibold text-sm text-end">P/C</td>
<td class="text-slate-200 font-semibold text-sm text-center">Bear/Bull</td> <td class="text-slate-200 font-semibold text-sm text-center">Bear/Bull</td>
<td class="text-slate-200 font-semibold text-sm text-center">Bid/Ask Vol</td>
<td class="text-slate-200 font-semibold text-sm text-end">% OTM</td> <td class="text-slate-200 font-semibold text-sm text-end">% OTM</td>
<td class="text-slate-200 font-semibold text-sm text-end">Total Volume</td> <td class="text-slate-200 font-semibold text-sm text-end">Total Volume</td>
<td class="text-slate-200 font-semibold text-sm text-end">Total OI</td> <td class="text-slate-200 font-semibold text-sm text-end">Total OI</td>
@ -721,7 +760,7 @@ $: {
{#each (data?.user?.tier === 'Pro' ? optionList : optionList?.slice(0,3)) as item, index} {#each (data?.user?.tier === 'Pro' ? optionList : optionList?.slice(0,3)) as item, index}
<tr on:click={() => handleViewData(item?.date)} on:mouseover={() => getDailyTransactions($stockTicker+'+'+item?.date)} class="cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] {index+1 === optionList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}"> <tr on:click={() => handleViewData(item?.date)} on:mouseover={() => getDailyTransactions($stockTicker+'+'+item?.date)} class="cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] {index+1 === optionList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
<td class="text-white text-sm sm:text-[1rem] text-start"> <td class="text-white text-sm text-start">
{formatDate(item?.date)} {formatDate(item?.date)}
</td> </td>
@ -737,7 +776,7 @@ $: {
{item?.c_vol !== 0 ? (item?.p_vol/item?.c_vol)?.toFixed(1) : '-'} {item?.c_vol !== 0 ? (item?.p_vol/item?.c_vol)?.toFixed(1) : '-'}
</td> </td>
<td class="whitespace-nowrap text-sm sm:text-[1rem] {item?.put_call === 'Calls' ? 'text-[#00FC50]' : 'text-[#FC2120]'} text-center"> <td class="whitespace-nowrap text-sm sm:text-[1rem] text-center">
{#if item?.bear_ratio > (item?.neutral_ratio ?? 0) && item?.bear_ratio > (item?.bull_ratio ?? 0)} {#if item?.bear_ratio > (item?.neutral_ratio ?? 0) && item?.bear_ratio > (item?.bull_ratio ?? 0)}
<div class="badge bg-[#FF2F1F] text-white font-semibold gap-2"> <div class="badge bg-[#FF2F1F] text-white font-semibold gap-2">
{item?.bear_ratio?.toFixed(0)}% Bearish {item?.bear_ratio?.toFixed(0)}% Bearish
@ -769,6 +808,38 @@ $: {
{/if} {/if}
</td> </td>
<td class="whitespace-nowrap text-sm sm:text-[1rem] text-center">
{#if item?.bid_ratio > (item?.midpoint_ratio ?? 0) && item?.bid_ratio > (item?.ask_ratio ?? 0)}
<div class="badge bg-[#FF2F1F] text-white font-semibold gap-2">
{item?.bid_ratio?.toFixed(0)}% Bid
</div>
{:else if item?.ask_ratio > (item?.midpoint_ratio ?? 0) && item?.ask_ratio > (item?.bid_ratio ?? 0)}
<div class="badge bg-[#75D377] text-black font-semibold gap-2">
{item?.ask_ratio?.toFixed(0)}% Ask
</div>
{:else if item?.midpoint_ratio > (item?.ask_ratio ?? 0) && item?.midpoint_ratio > (item?.bid_ratio ?? 0)}
<div class="badge bg-[#FBCE3C] text-black font-semibold gap-2">
{item?.midpoint_ratio?.toFixed(0)}% Midpoint
</div>
{:else if item?.bid_ratio === item?.ask_ratio && item?.bid_ratio > (item?.midpoint_ratio ?? 0)}
<div class="badge bg-[#B8B8B8] text-black font-semibold gap-2">
{item?.bid_ratio?.toFixed(0)}% Bid/Ask Tie
</div>
{:else if item?.bid_ratio === item?.midpoint_ratio && item?.bid_ratio > (item?.ask_ratio ?? 0)}
<div class="badge bg-[#B8B8B8] text-black font-semibold gap-2">
{item?.bid_ratio?.toFixed(0)}% Bid/Neutral Tie
</div>
{:else if item?.ask_ratio === item?.midpoint_ratio && item?.ask_ratio > (item?.bid_ratio ?? 0)}
<div class="badge bg-[#B8B8B8] text-black font-semibold gap-2">
{item?.ask_ratio?.toFixed(0)}% Ask/Neutral Tie
</div>
{:else}
<div class="badge bg-[#B8B8B8] text-black font-semibold gap-2">
Equal Distribution
</div>
{/if}
</td>
<td class="text-sm sm:text-[1rem] text-white text-end"> <td class="text-sm sm:text-[1rem] text-white text-end">
{item?.otm_ratio?.toFixed(0)}% {item?.otm_ratio?.toFixed(0)}%
</td> </td>
@ -892,7 +963,7 @@ $: {
<!-- Put this part before </body> tag --> <!-- Put this part before </body> tag -->
<dialog id="optionDetailsDesktopModal" class="modal modal-bottom sm:modal-middle cursor-pointer "> <dialog id="optionDetailsDesktopModal" class="modal modal-bottom sm:modal-middle cursor-pointer bg-[#fff] bg-opacity-[0.02]">
<div class="modal-box w-full max-w-xl lg:max-w-3xl xl:max-w-5xl bg-[#141417] sm:bg-[#09090B] border-t sm:border border-gray-600 h-auto"> <div class="modal-box w-full max-w-xl lg:max-w-3xl xl:max-w-5xl bg-[#141417] sm:bg-[#09090B] border-t sm:border border-gray-600 h-auto">
<form method="dialog" class="modal-backdrop backdrop-blur-[4px]"> <form method="dialog" class="modal-backdrop backdrop-blur-[4px]">
<button class="cursor-pointer absolute right-0 top-0 text-[1.8rem] text-white"> <button class="cursor-pointer absolute right-0 top-0 text-[1.8rem] text-white">
@ -924,6 +995,7 @@ $: {
<td class="text-slate-200 font-semibold text-sm text-end">Strike</td> <td class="text-slate-200 font-semibold text-sm text-end">Strike</td>
<td class="text-slate-200 font-semibold text-sm text-end">C/P</td> <td class="text-slate-200 font-semibold text-sm text-end">C/P</td>
<td class="text-slate-200 font-semibold text-sm text-start">Sent.</td> <td class="text-slate-200 font-semibold text-sm text-start">Sent.</td>
<td class="text-slate-200 font-semibold text-sm text-start">Exec.</td>
<td class="text-slate-200 font-semibold text-sm text-end">Spot</td> <td class="text-slate-200 font-semibold text-sm text-end">Spot</td>
<td class="text-slate-200 font-semibold text-sm text-end">Price</td> <td class="text-slate-200 font-semibold text-sm text-end">Price</td>
<td class="text-slate-200 font-semibold text-sm text-end">Prem.</td> <td class="text-slate-200 font-semibold text-sm text-end">Prem.</td>
@ -960,6 +1032,9 @@ $: {
<td class="text-sm sm:text-[1rem] {item?.sentiment === 'Bullish' ? 'text-[#00FC50]' : item?.sentiment === 'Bearish' ? 'text-[#FC2120]' : 'text-[#C6A755]'} text-start"> <td class="text-sm sm:text-[1rem] {item?.sentiment === 'Bullish' ? 'text-[#00FC50]' : item?.sentiment === 'Bearish' ? 'text-[#FC2120]' : 'text-[#C6A755]'} text-start">
{item?.sentiment} {item?.sentiment}
</td> </td>
<td class="text-sm sm:text-[1rem] text-white text-start whitespace-nowrap">
{item?.execution_estimate}
</td>
<td class="text-sm sm:text-[1rem] text-end text-white"> <td class="text-sm sm:text-[1rem] text-end text-white">
{item?.underlying_price} {item?.underlying_price}

16
src/routes/watchlist/+page.svelte
View File

@ -394,7 +394,7 @@ onDestroy( () => {
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3"> <section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4"> <div class="text-sm sm:text-[1rem] breadcrumbs ">
<ul> <ul>
<li><a href="/" class="text-gray-300">Home</a></li> <li><a href="/" class="text-gray-300">Home</a></li>
<li class="text-gray-300">Watchlist</li> <li class="text-gray-300">Watchlist</li>
@ -564,7 +564,7 @@ onDestroy( () => {
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div class="w-full flex justify-between items-center p-3 mt-3"> <div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription Pro Subscription 🔥
</h2> </h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/> <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
</div> </div>
@ -575,30 +575,30 @@ onDestroy( () => {
</div> </div>
{/if} {/if}
<div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"> <div on:click={() => goto('/price-alert')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div class="w-full flex justify-between items-center p-3 mt-3"> <div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Wallstreet Analyst Price Alert ⏰
</h2> </h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/> <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
</div> </div>
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Get the latest top Wall Street analyst ratings. Customize your alerts to never miss out again
</span> </span>
</div> </div>
</div> </div>
<div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"> <div on:click={() => goto('/stock-screener')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div class="w-full flex justify-between items-center p-3 mt-3"> <div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Congress Trading Stock Screener 🔎
</h2> </h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/> <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
</div> </div>
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Get the latest top Congress trading insights. Build your Stock Screener to find profitable stocks.
</span> </span>
</div> </div>
</div> </div>