From b5bed6cfeaedc84c0fb76fd25c37ea423b2f72ec Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Tue, 11 Mar 2025 10:34:04 +0100 Subject: [PATCH] update dark pool page --- .../DarkPool/HistoricalVolume.svelte | 75 +++++++++---------- .../components/DarkPool/HottestTrades.svelte | 30 +++----- src/lib/components/DarkPool/PriceLevel.svelte | 54 +++++++------ .../components/DarkPool/RealtimeTrade.svelte | 45 +++++++---- .../stocks/[tickerID]/dark-pool/+page.svelte | 4 +- 5 files changed, 108 insertions(+), 100 deletions(-) diff --git a/src/lib/components/DarkPool/HistoricalVolume.svelte b/src/lib/components/DarkPool/HistoricalVolume.svelte index a782d5e2..c0857e19 100644 --- a/src/lib/components/DarkPool/HistoricalVolume.svelte +++ b/src/lib/components/DarkPool/HistoricalVolume.svelte @@ -4,6 +4,7 @@ import { abbreviateNumber, removeCompanyStrings } from "$lib/utils"; import highcharts from "$lib/highcharts.ts"; import { goto } from "$app/navigation"; + import { mode } from "mode-watcher"; export let data; export let rawData = []; @@ -75,8 +76,8 @@ }, chart: { type: "line", - backgroundColor: "#09090B", - plotBackgroundColor: "#09090B", + backgroundColor: $mode === "light" ? "#fff" : "#09090B", + plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B", height: 360, spacingTop: 5, animation: false, @@ -84,7 +85,7 @@ title: { text: `

${removeCompanyStrings($displayCompanyName)} Historical Chart

`, style: { - color: "white", + color: $mode === "light" ? "black" : "white", }, useHTML: true, }, @@ -96,13 +97,13 @@ endOnTick: false, categories: dates, crosshair: { - color: "#fff", // Set the color of the crosshair line + color: $mode === "light" ? "black" : "white", // Set the color of the crosshair line width: 1, // Adjust the line width as needed dashStyle: "Solid", }, labels: { style: { - color: "#fff", + color: $mode === "light" ? "black" : "white", }, distance: 20, // Increases space between label and axis formatter: function () { @@ -118,7 +119,7 @@ yAxis: [ { gridLineWidth: 1, - gridLineColor: "#111827", + gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", labels: { enabled: false, }, @@ -149,8 +150,8 @@ }, borderRadius: 4, formatter: function () { - // Format the x value to display time in hh:mm format - let tooltipContent = `${new Date( + // Format the x value to display time in a custom format + let tooltipContent = `${new Date( this?.x, ).toLocaleDateString("en-US", { year: "numeric", @@ -160,10 +161,10 @@ // Loop through each point in the shared tooltip this.points.forEach((point) => { - tooltipContent += `${point.series.name}: - ${abbreviateNumber( - point.y, - )}
`; + tooltipContent += ` + + ${point.series.name}: + ${abbreviateNumber(point.y)}
`; }); return tooltipContent; @@ -185,7 +186,7 @@ name: "Total Volume", data: totalVolumeList, type: "line", - color: "#fff", + color: $mode === "light" ? "#2C6288" : "white", }, { name: "Short Volume", @@ -236,17 +237,17 @@ }); } - $: if ($stockTicker || $etfTicker) { + $: if ($stockTicker || $etfTicker || $mode) { config = getPlotOptions() || null; } -
+
@@ -259,7 +260,7 @@ {#if rawData?.length !== 0}
-
+
Over the past 12 months, {$displayCompanyName} has experienced an average dark pool trading volume of {abbreviateNumber(avgVolume)} @@ -273,14 +274,14 @@
-

+

Dark Pool Table

@@ -288,7 +289,7 @@ class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto" >
{#each tabs as item, i} {#if data?.user?.tier !== "Pro" && i > 0} @@ -303,7 +304,7 @@ xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" > @@ -324,7 +325,7 @@ class="relative text-sm block font-semibold whitespace-nowrap {activeIdx === i ? 'text-black' - : 'text-white'}" + : ''}" > {item.title} @@ -337,18 +338,14 @@
- + - - - - + + + @@ -357,9 +354,9 @@ {#each tableList as item, index} - -
DateTotal VolumeShort VolumeDateTotal VolumeShort Volume% Short Volume Change
+ {new Date(item?.date)?.toLocaleDateString("en-US", { day: "2-digit", // Include day number month: "short", // Display short month name @@ -368,20 +365,18 @@ {abbreviateNumber(item?.totalVolume)} {abbreviateNumber(item?.shortVolume)} + {#if index === tableList?.length - 1} n/a {:else if item?.shortVolume > tableList[index + 1]?.shortVolume} diff --git a/src/lib/components/DarkPool/HottestTrades.svelte b/src/lib/components/DarkPool/HottestTrades.svelte index c7ed1cdc..47ac1f2b 100644 --- a/src/lib/components/DarkPool/HottestTrades.svelte +++ b/src/lib/components/DarkPool/HottestTrades.svelte @@ -2,7 +2,7 @@ import InfoModal from "$lib/components/InfoModal.svelte"; import TableHeader from "$lib/components/Table/TableHeader.svelte"; - import { abbreviateNumberWithColor } from "$lib/utils"; + import { abbreviateNumber } from "$lib/utils"; export let data; export let rawData = []; @@ -120,12 +120,12 @@ }; -
+
@@ -138,7 +138,7 @@ {#if rawData?.length !== 0}
-
+
Get in realtime the latest hottest trades based on premium.
@@ -147,7 +147,7 @@ class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto" > @@ -155,36 +155,30 @@ {#each stockList as item, index} - - - {/each} diff --git a/src/lib/components/DarkPool/PriceLevel.svelte b/src/lib/components/DarkPool/PriceLevel.svelte index aa6eccfe..961505a2 100644 --- a/src/lib/components/DarkPool/PriceLevel.svelte +++ b/src/lib/components/DarkPool/PriceLevel.svelte @@ -1,8 +1,9 @@ -
+
{#if rawData?.length !== 0 && Object?.keys(metrics)?.length > 0}
-
- {$displayCompanyName} has seen an average dark pool trade size of {@html abbreviateNumberWithColor( +
+ {$displayCompanyName} has seen an average dark pool trade size of {abbreviateNumber( metrics?.avgTradeSize, false, true, - )} and an average premium per trade of {@html abbreviateNumberWithColor( + )} and an average premium per trade of {abbreviateNumber( metrics?.avgPremTrade, false, true, - )}, with a total premium of {@html abbreviateNumberWithColor( + )}, with a total premium of {abbreviateNumber( metrics?.totalPrem, false, true, @@ -161,25 +166,26 @@
-
+
{#each ["Today's Trend", "Price Level"] as item, index} {#if data?.user?.tier === "Pro" || index === 0} {:else if data?.user?.tier !== "Pro"} {item}
{:else} diff --git a/src/lib/components/DarkPool/RealtimeTrade.svelte b/src/lib/components/DarkPool/RealtimeTrade.svelte index d7a042d0..506a4130 100644 --- a/src/lib/components/DarkPool/RealtimeTrade.svelte +++ b/src/lib/components/DarkPool/RealtimeTrade.svelte @@ -1,6 +1,7 @@
diff --git a/src/routes/stocks/[tickerID]/dark-pool/+page.svelte b/src/routes/stocks/[tickerID]/dark-pool/+page.svelte index ed997e7b..7f6fc16b 100644 --- a/src/routes/stocks/[tickerID]/dark-pool/+page.svelte +++ b/src/routes/stocks/[tickerID]/dark-pool/+page.svelte @@ -19,7 +19,7 @@ description={`Explore exclusive dark pool trading data for ${$displayCompanyName} (${$stockTicker}). Get insights into hidden market activity, stock price movements, institutional trades, financials, and key statistics.`} /> -
+
+ {item?.rank} + {formatToNewYorkTime(item?.date)} + {item?.price} - {@html abbreviateNumberWithColor(item?.size, false, true)} + {abbreviateNumber(item?.size, false, true)} - {@html abbreviateNumberWithColor(item?.volume, false, true)} + {abbreviateNumber(item?.volume, false, true)} @@ -195,7 +189,7 @@ - {@html abbreviateNumberWithColor(item?.premium, false, true)} + {abbreviateNumber(item?.premium, false, true)}