From c7c229ce7117f289623ae207d6dbce10822cfde1 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sun, 29 Dec 2024 21:54:27 +0100
Subject: [PATCH] ui fix

---
 .../components/DarkPool/HottestTrades.svelte  | 58 +--------------
 .../stocks/[tickerID]/dark-pool/+page.svelte  | 71 +++++++++++--------
 2 files changed, 43 insertions(+), 86 deletions(-)

diff --git a/src/lib/components/DarkPool/HottestTrades.svelte b/src/lib/components/DarkPool/HottestTrades.svelte
index 1c5e97fe..b41b1d45 100644
--- a/src/lib/components/DarkPool/HottestTrades.svelte
+++ b/src/lib/components/DarkPool/HottestTrades.svelte
@@ -5,63 +5,7 @@
 
   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,
-    },
-  ];
+  export let rawData = [];
 
   let stockList = [];
   let isLoaded = false;
diff --git a/src/routes/stocks/[tickerID]/dark-pool/+page.svelte b/src/routes/stocks/[tickerID]/dark-pool/+page.svelte
index 33091809..0bd07231 100644
--- a/src/routes/stocks/[tickerID]/dark-pool/+page.svelte
+++ b/src/routes/stocks/[tickerID]/dark-pool/+page.svelte
@@ -9,9 +9,17 @@
   import InfoModal from "$lib/components/InfoModal.svelte";
   import Infobox from "$lib/components/Infobox.svelte";
   import HottestTrades from "$lib/components/DarkPool/HottestTrades.svelte";
+  import { onMount } from "svelte";
 
   export let data;
   let historicalDarkPool = data?.getHistoricalDarkPool || [];
+  let priceLevel = data?.getPriceLevel?.priceLevel || [];
+  let hottestTrades = data?.getPriceLevel?.hottestTrades || [];
+  let isLoaded = false;
+
+  onMount(() => {
+    isLoaded = true;
+  });
 </script>
 
 <svelte:head>
@@ -70,37 +78,42 @@
               id={"darkPoolInfo"}
             />
           </div>
-
-          <Infobox
-            text="Track the Dark Pool Trades of major whales to monitor hidden trading activity and trends."
-          />
+          {#if priceLevel?.length === 0 && hottestTrades?.length === 0 && historicalDarkPool?.length === 0}
+            <Infobox
+              text={`No Dark Pool activity are detected for ${$displayCompanyName}`}
+            />
+          {:else}
+            <Infobox
+              text="Track the Dark Pool Trades of major whales to monitor hidden trading activity and trends."
+            />
+          {/if}
         </div>
-
-        <PriceLevel
-          rawData={data?.getPriceLevel?.priceLevel}
-          metrics={data?.getPriceLevel?.metrics}
-        />
-        <HottestTrades rawData={data?.getPriceLevel?.hottestTrades} />
-        <HistoricalVolume rawData={historicalDarkPool} />
+        {#if isLoaded}
+          {#if priceLevel?.length > 0}
+            <PriceLevel
+              rawData={priceLevel}
+              metrics={data?.getPriceLevel?.metrics}
+            />
+          {/if}
+          {#if hottestTrades?.length > 0}
+            <HottestTrades rawData={hottestTrades} />
+          {/if}
+          {#if historicalDarkPool?.length > 0}
+            <HistoricalVolume rawData={historicalDarkPool} />
+          {/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}
       </div>
     </div>
   </div>
 </section>
-
-<style>
-  .app {
-    height: 400px;
-    width: 100%;
-  }
-
-  @media (max-width: 560px) {
-    .app {
-      width: 100%;
-      height: 300px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>