ui fix

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"}
       />
+
+      <a
+        href={`/dark-pool-flow?query=${ticker}`}
+        class="ml-auto rounded text-xs sm:text-sm px-2 sm:px-3 py-2 font-semibold bg-blue-100 dark:bg-[#fff] text-black"
+      >
+        View All
+      </a>
     </div>
 
     {#if rawData?.length !== 0}

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",
         },

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 = `<span class="m-auto text-[1rem] font-[501]">${new Date(
+          let tooltipContent = "";
-            this?.x,
-          ).toLocaleDateString("en-US", {
-            year: "numeric",
-            month: "short",
-            day: "numeric",
-          })}</span><br>`;
 
           // 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
+        min: startTime,
-        max: endTime, // Force end at 16:10
+        max: endTime,
+        tickLength: 0,
         crosshair: {
-          color: $mode === "light" ? "black" : "white", // Set the color of the crosshair line
+          color: $mode === "light" ? "#545454" : "white",
-          width: 1, // Adjust the line width as needed
+          width: 1,
           dashStyle: "Solid",
         },
         labels: {
-          style: { color: $mode === "light" ? "black" : "white" },
+          style: { color: $mode === "light" ? "#545454" : "white" },
-          distance: 20, // Increases space between label and axis
+          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,

src/routes/etf/[tickerID]/dark-pool/+page.svelte

@@ -57,7 +57,7 @@
           />
         {/if}
         {#if hottestTrades?.length > 0}
-          <HottestTrades {data} rawData={hottestTrades} />
+          <HottestTrades {data} rawData={hottestTrades} ticker={$etfTicker} />
         {/if}
 
         {#if historicalDarkPool?.length > 10}

src/routes/stocks/[tickerID]/dark-pool/+page.svelte

@@ -57,7 +57,7 @@
           />
         {/if}
         {#if hottestTrades?.length > 0}
-          <HottestTrades {data} rawData={hottestTrades} />
+          <HottestTrades {data} rawData={hottestTrades} ticker={$stockTicker} />
         {/if}
 
         {#if historicalDarkPool?.length > 10}

src/routes/stocks/[tickerID]/options/+page.svelte

@@ -298,7 +298,7 @@
           </div>
         {/if}
 
-        {#if tickerFlow?.length > 0}
+        {#if tickerFlow?.length > 0 && data?.getStockQuote?.marketCap > 500 * 10 ** 9}
           <div class="w-full">
             <TickerFlow {tickerFlow} />
           </div>