update options flow page

This commit is contained in:
MuslemRahimi 2025-01-03 16:21:04 +01:00
parent 9da74ed0a1
commit 6f1e871fec
4 changed files with 70 additions and 85 deletions

View File

@ -1,17 +0,0 @@
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true
}
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
//
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
// from the referenced tsconfig.json - TypeScript does not merge them in
}

View File

@ -237,7 +237,13 @@
<div class="table">
<VirtualList
width="100%"
height={$screenWidth < 640 ? 550 : 850}
height={$screenWidth < 640
? data?.user?.tier === "Pro"
? 550
: 250
: data?.user?.tier === "Pro"
? 850
: 250}
itemCount={displayedData.length}
itemSize={40}
>
@ -584,7 +590,11 @@
let:index
let:style
{style}
class="tr {index % 2 === 0 ? 'bg-odd' : 'bg-[#17171D]'}"
class="tr {index % 2 === 0 ? 'bg-[#19191F]' : 'bg-[#121217]'} {index +
1 ===
rawData?.length && data?.user?.tier !== 'Pro'
? 'opacity-[0.3]'
: ''}"
>
<!-- Row data -->
@ -791,7 +801,6 @@
.th {
display: none;
font-weight: 700;
background-color: #09090b;
}
.th > .td {

View File

@ -10,7 +10,8 @@ export const load = async ({ locals, cookies }) => {
"X-API-KEY": apiKey,
},
});
const output = await response.json();
let output = await response.json();
output = user?.tier !== "Pro" ? output?.slice(0, 6) : output;
return output;
};

View File

@ -16,6 +16,7 @@
import { Button } from "$lib/components/shadcn/button/index.js";
import { Calendar } from "$lib/components/shadcn/calendar/index.js";
import CalendarIcon from "lucide-svelte/icons/calendar";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import { page } from "$app/stores";
@ -529,78 +530,74 @@
}
async function websocketRealtimeData() {
newData = [];
try {
socket = new WebSocket(data?.wsURL + "/options-flow-reader");
/*
socket.addEventListener("open", () => {
const ids = rawData.map(item => item.id);
sendMessage(JSON.stringify({ ids }));
});
*/
if (data?.user?.tier === "Pro") {
newData = [];
try {
socket = new WebSocket(data?.wsURL + "/options-flow-reader");
socket.addEventListener("message", (event) => {
const totalVolume = displayCallVolume + displayPutVolume;
if (mode === true) {
try {
newData = JSON?.parse(event.data) ?? [];
if (newData?.length > 0) {
newData?.forEach((item) => {
item.dte = daysLeft(item?.date_expiration);
});
socket.addEventListener("message", (event) => {
const totalVolume = displayCallVolume + displayPutVolume;
if (mode === true) {
try {
newData = JSON?.parse(event.data) ?? [];
if (newData?.length > 0) {
newData?.forEach((item) => {
item.dte = daysLeft(item?.date_expiration);
});
//calculateStats(newData);
//console.log(previousVolume);
if (
newData?.length > rawData?.length &&
previousVolume !== totalVolume
) {
//console.log(previousVolume,totalVolume,);
rawData = newData;
shouldLoadWorker.set(true);
//console.log('loading worker')
//displayedData = rawData;
//calculateStats(newData);
//console.log(previousVolume);
if (
newData?.length > rawData?.length &&
previousVolume !== totalVolume
) {
//console.log(previousVolume,totalVolume,);
rawData = newData;
shouldLoadWorker.set(true);
//console.log('loading worker')
//displayedData = rawData;
if (!muted) {
audio?.play();
if (!muted) {
audio?.play();
}
}
}
}
/*
/*
if (previousCallVolume !== displayCallVolume && !muted && audio) {
audio?.play();
}
*/
} catch (e) {
console.error("Error processing WebSocket message:", e);
} catch (e) {
console.error("Error processing WebSocket message:", e);
}
newData = [];
previousVolume = totalVolume;
}
newData = [];
previousVolume = totalVolume;
}
});
});
socket.addEventListener("close", (event) => {
console.log("WebSocket connection closed:", event.reason);
socket.addEventListener("close", (event) => {
console.log("WebSocket connection closed:", event.reason);
// Explicitly nullify the socket and remove all event listeners
if (socket) {
socket.onmessage = null;
socket.onopen = null;
socket.onclose = null;
socket.onerror = null;
socket = null;
}
});
// Explicitly nullify the socket and remove all event listeners
if (socket) {
socket.onmessage = null;
socket.onopen = null;
socket.onclose = null;
socket.onerror = null;
socket = null;
}
});
socket.addEventListener("error", (error) => {
console.error("WebSocket error:", error);
// Handle WebSocket errors here
});
} catch (error) {
console.error("WebSocket connection error:", error);
// Handle connection errors here
setTimeout(() => websocketRealtimeData(), 400);
socket.addEventListener("error", (error) => {
console.error("WebSocket error:", error);
// Handle WebSocket errors here
});
} catch (error) {
console.error("WebSocket connection error:", error);
// Handle connection errors here
setTimeout(() => websocketRealtimeData(), 400);
}
}
}
@ -1668,6 +1665,7 @@
{filteredData}
{rawData}
/>
<UpgradeToPro {data} />
</div>
{:else}
<div
@ -1686,12 +1684,6 @@
</div>
{/if}
</div>
<!--
<div class="relative bottom-[400px] w-fit m-auto flex justify-center items-center">
<UpgradeToPro data={data} title="Get the recent Options Flow Data from Hedge Funds and major institutional traders to never miss out"/>
</div>
-->
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">