283 lines
8.9 KiB
Svelte
283 lines
8.9 KiB
Svelte
<script lang="ts">
|
|
import { stockTicker, etfTicker } from "$lib/store";
|
|
import InfoModal from "$lib/components/InfoModal.svelte";
|
|
import TableHeader from "$lib/components/Table/TableHeader.svelte";
|
|
|
|
import { abbreviateNumberWithColor } from "$lib/utils";
|
|
|
|
export let rawData = [
|
|
{
|
|
date: "2024-12-27T17:52:33Z",
|
|
price: 31.89,
|
|
size: 14526,
|
|
volume: 6937280.0,
|
|
premium: "463232.6874",
|
|
sizeVolRatio: 0.21,
|
|
sizeAvgVolRatio: 0.14,
|
|
trackingID: 46353769264496,
|
|
rank: 1,
|
|
},
|
|
{
|
|
date: "2024-12-27T17:52:33Z",
|
|
price: 31.89,
|
|
size: 14526,
|
|
volume: 6937280.0,
|
|
premium: "463232.6874",
|
|
sizeVolRatio: 0.21,
|
|
sizeAvgVolRatio: 0.14,
|
|
trackingID: 46353769264496,
|
|
rank: 2,
|
|
},
|
|
{
|
|
date: "2024-12-27T18:03:31Z",
|
|
price: 32.0,
|
|
size: 12198,
|
|
volume: 7146904.0,
|
|
premium: "390336",
|
|
sizeVolRatio: 0.17,
|
|
sizeAvgVolRatio: 0.12,
|
|
trackingID: 47011633532241,
|
|
rank: 3,
|
|
},
|
|
{
|
|
date: "2024-12-27T18:03:31Z",
|
|
price: 32.0,
|
|
size: 12198,
|
|
volume: 7146904.0,
|
|
premium: "390336",
|
|
sizeVolRatio: 0.17,
|
|
sizeAvgVolRatio: 0.12,
|
|
trackingID: 47011633532241,
|
|
rank: 4,
|
|
},
|
|
{
|
|
date: "2024-12-27T20:00:53Z",
|
|
price: 31.78,
|
|
size: 7345,
|
|
volume: 8220987.0,
|
|
premium: "233424.10",
|
|
sizeVolRatio: 0.09,
|
|
sizeAvgVolRatio: 0.07,
|
|
trackingID: 54053503366366,
|
|
rank: 5,
|
|
},
|
|
];
|
|
|
|
let stockList = [];
|
|
let isLoaded = false;
|
|
|
|
function formatToNewYorkTime(isoString) {
|
|
const date = new Date(isoString);
|
|
|
|
// Get the date components in New York time zone
|
|
const options = {
|
|
year: "numeric",
|
|
month: "numeric",
|
|
day: "numeric",
|
|
hour: "numeric",
|
|
minute: "numeric",
|
|
second: "numeric",
|
|
timeZone: "America/New_York",
|
|
hour12: true, // Enable AM/PM format
|
|
};
|
|
|
|
// Format date for New York timezone
|
|
const formatter = new Intl.DateTimeFormat("en-US", options);
|
|
const parts = formatter.formatToParts(date);
|
|
|
|
const year = parts.find((p) => p.type === "year").value;
|
|
const day = parts.find((p) => p.type === "day").value;
|
|
const hour = parts.find((p) => p.type === "hour").value.padStart(2, "0");
|
|
const minute = parts
|
|
.find((p) => p.type === "minute")
|
|
.value.padStart(2, "0");
|
|
|
|
const ampm = parts.find((p) => p.type === "dayPeriod").value; // AM/PM
|
|
|
|
return `${day}/${year} ${hour}:${minute} ${ampm}`;
|
|
}
|
|
|
|
$: columns = [
|
|
{ key: "rank", label: "Rank", align: "left" },
|
|
{ key: "date", label: "Time", align: "left" },
|
|
{ key: "price", label: "Price", align: "right" },
|
|
{ key: "size", label: "Size", align: "right" },
|
|
{ key: "volume", label: "Volume", align: "right" },
|
|
{ key: "sizeVolRatio", label: "Size / Vol", align: "right" },
|
|
{ key: "sizeAvgVolRatio", label: "Size / Avg Vol", align: "right" },
|
|
{ key: "premium", label: "Premium", align: "right" },
|
|
];
|
|
$: sortOrders = {
|
|
rank: { order: "none", type: "number" },
|
|
date: { order: "none", type: "date" },
|
|
price: { order: "none", type: "number" },
|
|
size: { order: "none", type: "number" },
|
|
volume: { order: "none", type: "number" },
|
|
sizeVolRatio: { order: "none", type: "number" },
|
|
sizeAvgVolRatio: { order: "none", type: "number" },
|
|
premium: { order: "none", type: "number" },
|
|
};
|
|
|
|
const sortData = (key) => {
|
|
// Reset all other keys to 'none' except the current key
|
|
for (const k in sortOrders) {
|
|
if (k !== key) {
|
|
sortOrders[k].order = "none";
|
|
}
|
|
}
|
|
|
|
// Cycle through 'none', 'asc', 'desc' for the clicked key
|
|
const orderCycle = ["none", "asc", "desc"];
|
|
let originalData = rawData;
|
|
|
|
const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
|
|
sortOrders[key].order =
|
|
orderCycle[(currentOrderIndex + 1) % orderCycle.length];
|
|
const sortOrder = sortOrders[key].order;
|
|
|
|
// Reset to original data when 'none' and stop further sorting
|
|
if (sortOrder === "none") {
|
|
stockList = originalData?.slice(0, 50); // Reset displayed data
|
|
return;
|
|
}
|
|
|
|
// Define a generic comparison function
|
|
const compareValues = (a, b) => {
|
|
const { type } = sortOrders[key];
|
|
let valueA, valueB;
|
|
|
|
switch (type) {
|
|
case "date":
|
|
valueA = new Date(a[key]);
|
|
valueB = new Date(b[key]);
|
|
break;
|
|
case "string":
|
|
valueA = a[key].toUpperCase();
|
|
valueB = b[key].toUpperCase();
|
|
return sortOrder === "asc"
|
|
? valueA.localeCompare(valueB)
|
|
: valueB.localeCompare(valueA);
|
|
case "number":
|
|
default:
|
|
valueA = parseFloat(a[key]);
|
|
valueB = parseFloat(b[key]);
|
|
break;
|
|
}
|
|
|
|
if (sortOrder === "asc") {
|
|
return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
|
|
} else {
|
|
return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
|
|
}
|
|
};
|
|
|
|
// Sort using the generic comparison function
|
|
stockList = [...originalData].sort(compareValues)?.slice(0, 50);
|
|
};
|
|
|
|
$: if (typeof window !== "undefined" && ($stockTicker || $etfTicker)) {
|
|
isLoaded = false;
|
|
stockList = rawData;
|
|
isLoaded = true;
|
|
}
|
|
</script>
|
|
|
|
<section class="overflow-hidden text-white h-full pb-8">
|
|
<main class="overflow-hidden">
|
|
<div class="flex flex-row items-center">
|
|
<label
|
|
for="hottestDPTrade"
|
|
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
|
|
>
|
|
Hottest Trades
|
|
</label>
|
|
<InfoModal
|
|
title={"Hottest DP Trades"}
|
|
content={"Real-time hottest trades highlight significant premium flows, revealing where big players are active and hinting at market trends or sentiment."}
|
|
id={"hottestDPTrade"}
|
|
/>
|
|
</div>
|
|
|
|
{#if isLoaded}
|
|
{#if rawData?.length !== 0}
|
|
<div class="w-full flex flex-col items-start">
|
|
<div class="text-white text-[1rem] mt-2 mb-2 w-full">
|
|
Get in realtime the latest hottest trades based on premium.
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-scroll"
|
|
>
|
|
<table
|
|
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md text-white w-full bg-table border border-gray-800 m-auto"
|
|
>
|
|
<thead>
|
|
<TableHeader {columns} {sortOrders} {sortData} />
|
|
</thead>
|
|
<tbody>
|
|
{#each stockList as item, index}
|
|
<tr
|
|
class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd"
|
|
>
|
|
<td
|
|
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
|
>
|
|
{item?.rank}
|
|
</td>
|
|
|
|
<td
|
|
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
|
>
|
|
{formatToNewYorkTime(item?.date)}
|
|
</td>
|
|
|
|
<td
|
|
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
|
>
|
|
{item?.price}
|
|
</td>
|
|
|
|
<td class="text-sm sm:text-[1rem] text-end">
|
|
{@html abbreviateNumberWithColor(item?.size, false, true)}
|
|
</td>
|
|
|
|
<td class="text-sm sm:text-[1rem] text-end">
|
|
{@html abbreviateNumberWithColor(item?.volume, false, true)}
|
|
</td>
|
|
|
|
<td class="text-sm sm:text-[1rem] text-end">
|
|
{item?.sizeVolRatio?.toFixed(2)}%
|
|
</td>
|
|
<td class="text-sm sm:text-[1rem] text-end">
|
|
{item?.sizeAvgVolRatio?.toFixed(2)}%
|
|
</td>
|
|
|
|
<td class="text-sm sm:text-[1rem] text-end">
|
|
{@html abbreviateNumberWithColor(
|
|
item?.premium,
|
|
false,
|
|
true,
|
|
)}
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{/if}
|
|
{:else}
|
|
<div class="flex justify-center items-center h-80">
|
|
<div class="relative">
|
|
<label
|
|
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
|
>
|
|
<span class="loading loading-spinner loading-md text-gray-400"
|
|
></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</main>
|
|
</section>
|