From 189035776dd7938e35973e750a4ffc57817a4b5b Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 20 Feb 2025 13:22:01 +0100
Subject: [PATCH] ui fix

---
 src/lib/components/Options/TickerFlow.svelte  |  7 ++--
 .../etf/[tickerID]/options/+page.svelte       | 33 +++++++------------
 .../stocks/[tickerID]/options/+page.svelte    | 30 ++++++-----------
 3 files changed, 25 insertions(+), 45 deletions(-)

diff --git a/src/lib/components/Options/TickerFlow.svelte b/src/lib/components/Options/TickerFlow.svelte
index b8e97ed1..e73314bd 100644
--- a/src/lib/components/Options/TickerFlow.svelte
+++ b/src/lib/components/Options/TickerFlow.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { screenWidth } from "$lib/store";
 
-  import HoverStockChart from "$lib/components/HoverStockChart.svelte";
   import { abbreviateNumberWithColor } from "$lib/utils";
   import InfoModal from "$lib/components/InfoModal.svelte";
 
@@ -369,7 +368,7 @@
                     <span class="ml-1 text-yellow-400">●</span>
                   </div>
                   <div class="flex items-baseline">
-                    <span class="text-2xl font-bold text-white">
+                    <span class="text-xl font-bold text-white">
                       {@html abbreviateNumberWithColor(
                         findLastNonNull(tickerFlow, "net_volume"),
                         false,
@@ -387,7 +386,7 @@
                     <span class="ml-1 text-green-500">●</span>
                   </div>
                   <div class="flex items-baseline">
-                    <span class="text-2xl font-bold text-white"
+                    <span class="text-xl font-bold text-white"
                       >{@html abbreviateNumberWithColor(
                         findLastNonNull(tickerFlow, "net_call_premium"),
                         false,
@@ -405,7 +404,7 @@
                     <span class="ml-1 text-red-400">●</span>
                   </div>
                   <div class="flex items-baseline">
-                    <span class="text-2xl font-bold text-white"
+                    <span class="text-xl font-bold text-white"
                       >{@html abbreviateNumberWithColor(
                         findLastNonNull(tickerFlow, "net_put_premium"),
                         false,
diff --git a/src/routes/etf/[tickerID]/options/+page.svelte b/src/routes/etf/[tickerID]/options/+page.svelte
index 61bce5ba..0d2d7bac 100644
--- a/src/routes/etf/[tickerID]/options/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/+page.svelte
@@ -18,7 +18,7 @@
 
   export let data;
   let dailyStats = data?.getDailyStats;
-  let tickerFlow = data?.getTickerFlow || [];
+  let tickerFlow = data?.getTickerFlow;
 
   let filteredList = [];
 
@@ -54,6 +54,7 @@
 
     return formatter.format(date);
   }
+
   function changeVolumeOI(event) {
     displayData = event.target.value;
   }
@@ -297,33 +298,22 @@
           <Infobox text="No Options data available" />
         {/if}
 
-        {#if tickerFlow?.length > 0}
-          <div class="w-full mb-5">
-            <TickerFlow {tickerFlow} />
-          </div>
-        {/if}
         {#if Object?.keys(dailyStats)?.length > 0}
           <div class="w-full mb-10">
             <DailyStats rawData={dailyStats} />
           </div>
         {/if}
 
-        {#if rawData?.length > 0}
-          <div class="flex flex-row items-center w-full mt-10">
-            <!--
-            <select
-              class="ml-1 w-40 select select-bordered select-sm p-0 pl-5 bg-secondary"
-              on:change={changeTimePeriod}
-            >
-              <option disabled>Choose a time period</option>
-              <option value="oneWeek">1 Week</option>
-              <option value="oneMonth">1 Month</option>
-              <option value="threeMonths">3 Months</option>
-              <option value="sixMonths">6 Months</option>
-              <option value="oneYear" selected>1 Year</option>
-            </select>
-            -->
+        {#if tickerFlow?.length > 0}
+          <div class="w-full mb-10">
+            <TickerFlow {tickerFlow} />
+          </div>
+        {/if}
 
+        {#if rawData?.length > 0}
+          <!--
+          <div class="flex flex-row items-center w-full mt-10">
+  
             <select
               class=" w-40 select select-bordered select-sm p-0 pl-5 bg-secondary"
               on:change={changeVolumeOI}
@@ -358,6 +348,7 @@
               </span>
             {/if}
           </div>
+          -->
 
           {#if optionList?.length !== 0}
             <h3 class="text-xl sm:text-2xl text-white font-bold text-start">
diff --git a/src/routes/stocks/[tickerID]/options/+page.svelte b/src/routes/stocks/[tickerID]/options/+page.svelte
index a3c5d2ee..97da0682 100644
--- a/src/routes/stocks/[tickerID]/options/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/+page.svelte
@@ -298,33 +298,22 @@
           <Infobox text="No Options data available" />
         {/if}
 
-        {#if tickerFlow?.length > 0}
-          <div class="w-full mb-5">
-            <TickerFlow {tickerFlow} />
-          </div>
-        {/if}
         {#if Object?.keys(dailyStats)?.length > 0}
           <div class="w-full mb-10">
             <DailyStats rawData={dailyStats} />
           </div>
         {/if}
 
-        {#if rawData?.length > 0}
-          <div class="flex flex-row items-center w-full mt-10">
-            <!--
-            <select
-              class="ml-1 w-40 select select-bordered select-sm p-0 pl-5 bg-secondary"
-              on:change={changeTimePeriod}
-            >
-              <option disabled>Choose a time period</option>
-              <option value="oneWeek">1 Week</option>
-              <option value="oneMonth">1 Month</option>
-              <option value="threeMonths">3 Months</option>
-              <option value="sixMonths">6 Months</option>
-              <option value="oneYear" selected>1 Year</option>
-            </select>
-            -->
+        {#if tickerFlow?.length > 0}
+          <div class="w-full mb-10">
+            <TickerFlow {tickerFlow} />
+          </div>
+        {/if}
 
+        {#if rawData?.length > 0}
+          <!--
+          <div class="flex flex-row items-center w-full mt-10">
+  
             <select
               class=" w-40 select select-bordered select-sm p-0 pl-5 bg-secondary"
               on:change={changeVolumeOI}
@@ -359,6 +348,7 @@
               </span>
             {/if}
           </div>
+          -->
 
           {#if optionList?.length !== 0}
             <h3 class="text-xl sm:text-2xl text-white font-bold text-start">