From 46b6e47fed508a8dfc578c554b25b0ce481b3ee8 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Fri, 24 Jan 2025 14:48:20 +0100
Subject: [PATCH] ui fixes

---
 .../options/hottest-contracts/+page.svelte    | 63 ++++---------------
 .../options/hottest-contracts/+page.svelte    | 63 ++++---------------
 2 files changed, 26 insertions(+), 100 deletions(-)

diff --git a/src/routes/etf/[tickerID]/options/hottest-contracts/+page.svelte b/src/routes/etf/[tickerID]/options/hottest-contracts/+page.svelte
index e540c366..6fd0f5f0 100644
--- a/src/routes/etf/[tickerID]/options/hottest-contracts/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/hottest-contracts/+page.svelte
@@ -9,10 +9,11 @@
     getCache,
     etfTicker,
     screenWidth,
-    numberOfUnreadNotification,
     displayCompanyName,
   } from "$lib/store";
 
+  import SEO from "$lib/components/SEO.svelte";
+
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
   import Infobox from "$lib/components/Infobox.svelte";
@@ -372,12 +373,6 @@
           // Initialize result with timestamp
           let result = timestamp + "<br/>";
 
-          // Variables to store bid and ask values and their colors
-          let bidValue = null;
-          let askValue = null;
-          let bidColor = null;
-          let askColor = null;
-
           // Sort params to ensure Vol appears last
           params.sort((a, b) => {
             if (a.seriesName === "Vol") return 1;
@@ -393,12 +388,13 @@
               param.color +
               '"></span>';
 
-            result +=
-              marker +
-              param.seriesName +
-              ": " +
-              abbreviateNumberWithColor(param.value, false, true) +
-              "<br/>";
+            // Check if the series is for IV and add a '%' sign
+            const value =
+              param.seriesName === "IV"
+                ? `${param.value}%`
+                : (param.value?.toLocaleString("en-US") ?? "n/a");
+
+            result += marker + param.seriesName + ": " + value + "<br/>";
           });
 
           if (rawDataPoint?.dte !== undefined) {
@@ -554,43 +550,10 @@
   }
 </script>
 
-<svelte:head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {$displayCompanyName} ({$etfTicker}) Hottest Options Chain Contract ·
-    Stocknear
-  </title>
-  <meta
-    name="description"
-    content={`Explore historic volume & open interest of option chains & save individual contracts for later`}
-  />
-
-  <!-- Other meta tags -->
-  <meta
-    property="og:title"
-    content={`${$displayCompanyName} (${$etfTicker}) Hottest Options Chain Contract · Stocknear`}
-  />
-  <meta
-    property="og:description"
-    content={`Explore historic volume & open interest of option chains & save individual contracts for later`}
-  />
-  <meta property="og:type" content="website" />
-  <!-- Add more Open Graph meta tags as needed -->
-
-  <!-- Twitter specific meta tags -->
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta
-    name="twitter:title"
-    content={`${$displayCompanyName} (${$etfTicker}) Hottest Options Chain Contract · Stocknear`}
-  />
-  <meta
-    name="twitter:description"
-    content={`Explore historic volume & open interest of option chains & save individual contracts for later`}
-  />
-  <!-- Add more Twitter meta tags as needed -->
-</svelte:head>
+<SEO
+  title={`${$displayCompanyName} (${$etfTicker}) - Explore the Hottest Options Contracts | Stocknear`}
+  description={`Analyze historical volume, open interest, and trends in option chains for ${$displayCompanyName} (${$etfTicker}). Discover actionable insights for trading decisions.`}
+/>
 
 <section
   class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
diff --git a/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte b/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte
index 767c86a5..3f607e6c 100644
--- a/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte
@@ -9,10 +9,11 @@
     getCache,
     stockTicker,
     screenWidth,
-    numberOfUnreadNotification,
     displayCompanyName,
   } from "$lib/store";
 
+  import SEO from "$lib/components/SEO.svelte";
+
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
   import Infobox from "$lib/components/Infobox.svelte";
@@ -372,12 +373,6 @@
           // Initialize result with timestamp
           let result = timestamp + "<br/>";
 
-          // Variables to store bid and ask values and their colors
-          let bidValue = null;
-          let askValue = null;
-          let bidColor = null;
-          let askColor = null;
-
           // Sort params to ensure Vol appears last
           params.sort((a, b) => {
             if (a.seriesName === "Vol") return 1;
@@ -393,12 +388,13 @@
               param.color +
               '"></span>';
 
-            result +=
-              marker +
-              param.seriesName +
-              ": " +
-              abbreviateNumberWithColor(param.value, false, true) +
-              "<br/>";
+            // Check if the series is for IV and add a '%' sign
+            const value =
+              param.seriesName === "IV"
+                ? `${param.value}%`
+                : (param.value?.toLocaleString("en-US") ?? "n/a");
+
+            result += marker + param.seriesName + ": " + value + "<br/>";
           });
 
           if (rawDataPoint?.dte !== undefined) {
@@ -554,43 +550,10 @@
   }
 </script>
 
-<svelte:head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {$displayCompanyName} ({$stockTicker}) Hottest Options Chain Contract ·
-    Stocknear
-  </title>
-  <meta
-    name="description"
-    content={`Explore historic volume & open interest of option chains & save individual contracts for later`}
-  />
-
-  <!-- Other meta tags -->
-  <meta
-    property="og:title"
-    content={`${$displayCompanyName} (${$stockTicker}) Hottest Options Chain Contract · Stocknear`}
-  />
-  <meta
-    property="og:description"
-    content={`Explore historic volume & open interest of option chains & save individual contracts for later`}
-  />
-  <meta property="og:type" content="website" />
-  <!-- Add more Open Graph meta tags as needed -->
-
-  <!-- Twitter specific meta tags -->
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta
-    name="twitter:title"
-    content={`${$displayCompanyName} (${$stockTicker}) Hottest Options Chain Contract · Stocknear`}
-  />
-  <meta
-    name="twitter:description"
-    content={`Explore historic volume & open interest of option chains & save individual contracts for later`}
-  />
-  <!-- Add more Twitter meta tags as needed -->
-</svelte:head>
+<SEO
+  title={`${$displayCompanyName} (${$stockTicker}) - Explore the Hottest Options Contracts | Stocknear`}
+  description={`Analyze historical volume, open interest, and trends in option chains for ${$displayCompanyName} (${$stockTicker}). Discover actionable insights for trading decisions.`}
+/>
 
 <section
   class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"