diff --git a/src/lib/components/DarkPool/HottestTrades.svelte b/src/lib/components/DarkPool/HottestTrades.svelte
index 47ac1f2b..b851ea5c 100644
--- a/src/lib/components/DarkPool/HottestTrades.svelte
+++ b/src/lib/components/DarkPool/HottestTrades.svelte
@@ -6,6 +6,7 @@
export let data;
export let rawData = [];
+ export let ticker;
let stockList = rawData || [];
@@ -134,6 +135,13 @@
content={"Real-time hottest trades highlight significant premium flows, revealing where big players are active and hinting at market trends or sentiment."}
id={"hottestDPTrade"}
/>
+
+
+ View All
+
{#if rawData?.length !== 0}
diff --git a/src/lib/components/DarkPool/RealtimeTrade.svelte b/src/lib/components/DarkPool/RealtimeTrade.svelte
index c374eca4..0a14e36c 100644
--- a/src/lib/components/DarkPool/RealtimeTrade.svelte
+++ b/src/lib/components/DarkPool/RealtimeTrade.svelte
@@ -101,7 +101,7 @@
max: endTime,
tickLength: 0,
crosshair: {
- color: $mode === "light" ? "black" : "white",
+ color: $mode === "light" ? "#545454" : "white",
width: 1,
dashStyle: "Solid",
},
diff --git a/src/lib/components/Options/TickerFlow.svelte b/src/lib/components/Options/TickerFlow.svelte
index db448b0e..2079e86e 100644
--- a/src/lib/components/Options/TickerFlow.svelte
+++ b/src/lib/components/Options/TickerFlow.svelte
@@ -104,7 +104,7 @@
},
legend: {
enabled: true,
- align: "left", // Positions legend at the left edge
+ align: "center", // Positions legend at the left edge
verticalAlign: "top", // Positions legend at the top
layout: "horizontal", // Align items horizontally (use 'vertical' if preferred)
itemStyle: {
@@ -131,13 +131,7 @@
borderRadius: 4,
formatter: function () {
// Format the x value to display time in a custom format
- let tooltipContent = `${new Date(
- this?.x,
- ).toLocaleDateString("en-US", {
- year: "numeric",
- month: "short",
- day: "numeric",
- })}
`;
+ let tooltipContent = "";
// Loop through each point in the shared tooltip
this.points.forEach((point) => {
@@ -153,37 +147,26 @@
xAxis: {
type: "datetime",
- min: startTime, // Force start at 9:30
- max: endTime, // Force end at 16:10
+ min: startTime,
+ max: endTime,
+ tickLength: 0,
crosshair: {
- color: $mode === "light" ? "black" : "white", // Set the color of the crosshair line
- width: 1, // Adjust the line width as needed
+ color: $mode === "light" ? "#545454" : "white",
+ width: 1,
dashStyle: "Solid",
},
labels: {
- style: { color: $mode === "light" ? "black" : "white" },
- distance: 20, // Increases space between label and axis
+ style: { color: $mode === "light" ? "#545454" : "white" },
+ distance: 10,
formatter: function () {
- return new Date(this.value).toLocaleTimeString("en-US", {
+ const date = new Date(this?.value);
+ return date?.toLocaleTimeString("en-US", {
hour: "2-digit",
minute: "2-digit",
});
},
},
- tickPositioner: function () {
- // Create custom tick positions with wider spacing
- const positions = [];
- const info = this.getExtremes();
- const tickCount = 5; // Reduce number of ticks displayed
- const interval = (info.max - info.min) / tickCount;
-
- for (let i = 0; i <= tickCount; i++) {
- positions.push(info.min + i * interval);
- }
- return positions;
- },
},
-
yAxis: [
{
title: {
@@ -199,7 +182,7 @@
gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: {
- style: { color: $mode === "light" ? "black" : "white" },
+ style: { color: $mode === "light" ? "#545454" : "white" },
},
title: { text: null },
opposite: true,
diff --git a/src/routes/etf/[tickerID]/dark-pool/+page.svelte b/src/routes/etf/[tickerID]/dark-pool/+page.svelte
index dc0aed88..bbc92886 100644
--- a/src/routes/etf/[tickerID]/dark-pool/+page.svelte
+++ b/src/routes/etf/[tickerID]/dark-pool/+page.svelte
@@ -57,7 +57,7 @@
/>
{/if}
{#if hottestTrades?.length > 0}
-