ui fix

src/lib/components/FailToDeliver.svelte

@@ -113,15 +113,10 @@
       plotOptions: {
         series: {
           color: "white",
-          animation: false,
+          animation: false, // Disable series animation
-          dataLabels: {
+          states: {
-            enabled: false,
+            hover: {
-            style: {
+              enabled: false, // Disable hover effect globally
-              fontSize: "13px",
-              fontWeight: "bold",
-            },
-            formatter: function () {
-              return abbreviateNumber(this.y);
             },
           },
         },
@@ -129,7 +124,6 @@
       legend: {
         enabled: false,
       },
-
       tooltip: {
         shared: true,
         useHTML: true,

src/lib/components/Options/UnusualActivity.svelte

@@ -1,9 +1,5 @@
 <script lang="ts">
-  import {
+  import { abbreviateNumber, abbreviateNumberWithColor } from "$lib/utils";
-    abbreviateNumber,
-    abbreviateNumberWithColor,
-    monthNames,
-  } from "$lib/utils";
   import { screenWidth, setCache, getCache } from "$lib/store";
 
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
@@ -134,12 +130,12 @@
 
     // Build data arrays from the aggregated data
     dates = Object.keys(aggregatedData);
-    callData = dates.map((date) => aggregatedData[date].callSize);
+    callData = dates?.map((date) => aggregatedData[date].callSize);
-    putData = dates.map((date) => aggregatedData[date].putSize);
+    putData = dates?.map((date) => aggregatedData[date].putSize);
-    totalPremiums = dates.map((date) => aggregatedData[date].totalPremium);
+    totalPremiums = dates?.map((date) => aggregatedData[date].totalPremium);
 
     // Get the historical prices for matching dates
-    priceList = dates.map((date) => {
+    priceList = dates?.map((date) => {
       const matchingData = data?.getHistoricalPrice?.find(
         (d) => d?.time === date,
       );
@@ -151,6 +147,17 @@
       credits: {
         enabled: false,
       },
+      plotOptions: {
+        series: {
+          color: "white",
+          animation: false, // Disable series animation
+          states: {
+            hover: {
+              enabled: false, // Disable hover effect globally
+            },
+          },
+        },
+      },
       chart: {
         // Removed global type so each series can define its own type.
         backgroundColor: "#09090B",
@@ -262,6 +269,7 @@
           data: callData,
           color: "#00FC50",
           borderColor: "#00FC50", // Match border color
+          borderRadius: "2px",
           marker: {
             enabled: false,
           },
@@ -273,13 +281,14 @@
           data: putData,
           color: "#EE5365",
           borderColor: "#EE5365", // Match border color
+          borderRadius: "2px",
           marker: {
             enabled: false,
           },
           animation: false,
         },
         {
-          name: "Price",
+          name: "Stock Price",
           type: "area",
           yAxis: 1,
           data: priceList,
@@ -449,12 +458,11 @@
       // Disable markers globally on hover for all series
       plotOptions: {
         series: {
-          marker: {
+          color: "white",
-            enabled: false,
+          animation: false, // Disable series animation
           states: {
             hover: {
-                enabled: false,
+              enabled: false, // Disable hover effect globally
-              },
             },
           },
         },
@@ -922,20 +930,22 @@
       </div>
 
       <div class="pb-8 sm:pb-2 rounded-md bg-default overflow-hidden">
-        <div class="flex justify-end ml-auto w-fit mr-2 mt-2">
+        <div
+          class="flex flex-row items-center justify-between gap-x-2 ml-auto w-fit mt-2"
+        >
           {#each ["Vol/OI", "IV"] as item}
             <label
               on:click={() => (selectGraphType = item)}
-              class="px-3 py-1.5 mr-2 {selectGraphType === item
+              class="px-3 py-1.5 {selectGraphType === item
                 ? 'bg-white text-black '
-                : 'text-white bg-default text-opacity-[0.6] border border-gray-800'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
+                : 'text-white bg-default text-opacity-[0.6] border border-gray-600'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
             >
               {item}
             </label>
           {/each}
         </div>
         <div
-          class="mt-5 border border-gray-800 rounded"
+          class="mt-2 border border-gray-800 rounded"
           use:highcharts={configContract}
         ></div>
       </div>

src/lib/components/RatingsChart.svelte

@@ -241,11 +241,14 @@
         },
       },
       plotOptions: {
-        animation: false,
+        series: {
-        column: {
+          color: "white",
-          grouping: true,
+          animation: false, // Disable series animation
-          shadow: false,
+          states: {
-          borderWidth: 0,
+            hover: {
+              enabled: false, // Disable hover effect globally
+            },
+          },
         },
       },
 

src/routes/market-flow/+page.svelte

@@ -414,7 +414,12 @@
       plotOptions: {
         series: {
           color: "white",
-          animation: false,
+          animation: false, // Disable series animation
+          states: {
+            hover: {
+              enabled: false, // Disable hover effect globally
+            },
+          },
         },
       },
     };

src/routes/market-flow/sector-flow/+page.svelte

@@ -439,7 +439,12 @@
       plotOptions: {
         series: {
           color: "white",
-          animation: false,
+          animation: false, // Disable series animation
+          states: {
+            hover: {
+              enabled: false, // Disable hover effect globally
+            },
+          },
         },
       },
     };

src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte

@@ -349,16 +349,10 @@
       plotOptions: {
         series: {
           color: "white",
-          animation: false,
+          animation: false, // Disable series animation
-          dataLabels: {
+          states: {
-            enabled: false,
+            hover: {
-            color: "white",
+              enabled: false, // Disable hover effect globally
-            style: {
-              fontSize: "13px",
-              fontWeight: "bold",
-            },
-            formatter: function () {
-              return abbreviateNumber(this?.y);
             },
           },
         },