ui fix && update options page
This commit is contained in:
MuslemRahimi
parent
88abc08daf
commit
e25fe6d18b
@ -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>
|
||||||
|
|||||||
@ -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 for="addWatchListModal" class="cursor-pointer bg-[#191919] absolute right-5 top-2 text-[1.8rem] text-white"> ✕ </label>
|
||||||
|
|
||||||
<label id="addWatchListModal" for="addWatchListModal" class="cursor-pointer modal-backdrop bg-[#09090B] bg-opacity-[0.5]"></label>
|
<div class="text-white">
|
||||||
|
<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-[#191919]">
|
||||||
|
{#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">
|
||||||
|
<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">
|
||||||
|
<span class="ml-1 text-white font-medium mr-auto">
|
||||||
|
{item?.title}
|
||||||
|
</span>
|
||||||
|
<span class="ml-1 text-white text-opacity-40 text-sm font-medium mr-auto">
|
||||||
|
{item?.ticker?.length}
|
||||||
|
{item?.ticker?.length !== 1 ? "Companies" : "Company"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-800">
|
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
||||||
|
{#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">
|
||||||
<label for="addWatchListModal" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-[1.8rem] text-white">
|
<!-- 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">
|
||||||
</label>
|
<g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero">
|
||||||
|
<path
|
||||||
<div class="text-white">
|
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"
|
||||||
<h3 class="font-semibold text-lg sm:text-xl mb-10">
|
id="🎨-Color"
|
||||||
Add to Watchlist
|
>
|
||||||
</h3>
|
</path>
|
||||||
|
</g>
|
||||||
<div class="flex flex-col items-center w-full max-w-3xl bg-[#09090B]">
|
</g>
|
||||||
|
</g></svg
|
||||||
{#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">
|
{/if}
|
||||||
|
</div>
|
||||||
<div class="flex flex-row items-center w-full bg-[#313131] p-3 rounded-lg {item?.ticker?.includes($cryptoTicker) ? 'ring-2 ring-[#04E000]' : ''}">
|
</div>
|
||||||
|
</label>
|
||||||
<div class="flex flex-col items-center w-full">
|
{/each}
|
||||||
<span class="ml-1 text-white font-medium mr-auto">
|
|
||||||
{item?.title}
|
|
||||||
</span>
|
|
||||||
<span class="ml-1 text-white text-opacity-40 text-sm font-medium mr-auto">
|
|
||||||
{item?.ticker?.length} {item?.ticker?.length !==1 ? 'Companies' : 'Company'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
|
||||||
{#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>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</label>
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</dialog>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</dialog>
|
|
||||||
<!--End Add Watchlist Modal-->
|
<!--End Add Watchlist Modal-->
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -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 for="addWatchListModal" class="cursor-pointer bg-[#191919] absolute right-5 top-2 text-[1.8rem] text-white"> ✕ </label>
|
||||||
|
|
||||||
<label id="addWatchListModal" for="addWatchListModal" class="cursor-pointer modal-backdrop bg-[#09090B] bg-opacity-[0.5]"></label>
|
<div class="text-white">
|
||||||
|
<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-[#191919]">
|
||||||
|
{#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">
|
||||||
|
<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">
|
||||||
|
<span class="ml-1 text-white font-medium mr-auto">
|
||||||
|
{item?.title}
|
||||||
|
</span>
|
||||||
|
<span class="ml-1 text-white text-opacity-40 text-sm font-medium mr-auto">
|
||||||
|
{item?.ticker?.length}
|
||||||
|
{item?.ticker?.length !== 1 ? "Companies" : "Company"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-800">
|
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
||||||
|
{#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">
|
||||||
<label for="addWatchListModal" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-[1.8rem] text-white">
|
<!-- 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">
|
||||||
</label>
|
<g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero">
|
||||||
|
<path
|
||||||
<div class="text-white">
|
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"
|
||||||
<h3 class="font-semibold text-lg sm:text-xl mb-10">
|
id="🎨-Color"
|
||||||
Add to Watchlist
|
>
|
||||||
</h3>
|
</path>
|
||||||
|
</g>
|
||||||
<div class="flex flex-col items-center w-full max-w-3xl bg-[#09090B]">
|
</g>
|
||||||
|
</g></svg
|
||||||
{#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">
|
{/if}
|
||||||
|
</div>
|
||||||
<div class="flex flex-row items-center w-full bg-[#313131] p-3 rounded-lg {item?.ticker?.includes($etfTicker) ? 'ring-2 ring-[#04E000]' : ''}">
|
</div>
|
||||||
|
</label>
|
||||||
<div class="flex flex-col items-center w-full">
|
{/each}
|
||||||
<span class="ml-1 text-white font-medium mr-auto">
|
|
||||||
{item?.title}
|
|
||||||
</span>
|
|
||||||
<span class="ml-1 text-white text-opacity-40 text-sm font-medium mr-auto">
|
|
||||||
{item?.ticker?.length} {item?.ticker?.length !==1 ? 'Companies' : 'Company'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
|
||||||
{#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>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</label>
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</dialog>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</dialog>
|
|
||||||
<!--End Add Watchlist Modal-->
|
<!--End Add Watchlist Modal-->
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -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}
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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]' : ''}">
|
||||||
|
|||||||
@ -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}
|
||||||
|
|||||||
@ -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>
|
||||||
@ -560,45 +560,45 @@ onDestroy( () => {
|
|||||||
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
||||||
|
|
||||||
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
|
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
|
||||||
<div on:click={() => goto('/pricing')} 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('/pricing')} 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">
|
||||||
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>
|
||||||
<span class="text-white p-3 ml-3 mr-3">
|
<span class="text-white p-3 ml-3 mr-3">
|
||||||
Upgrade now for unlimited access to all data and tools.
|
Upgrade now for unlimited access to all data and tools.
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user