ui fixes

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

@@ -39,7 +39,7 @@ let activeIdx = 0;
         body: JSON.stringify(postData),
       });
 
-      output = await response?.json();
+      output = await response.json();
 
       setCache(transactionId, output, "getDailyTransactions");
     }
@@ -59,7 +59,6 @@ let activeIdx = 0;
     let rawData = data?.getOptionsHistoricalData;
     let optionList = rawData?.slice(0,30);
     let optionChainList = data?.getOptionsChainData?.at(0)?.chain || [];
-    
 
     let totalVolume //= data?.getOptionsPlotData?.totalVolume;
     
@@ -82,21 +81,6 @@ let activeIdx = 0;
     
     let displayTimePeriod = 'threeMonths'
 
-function normalizer(value) {
-  if (Math?.abs(value) >= 1e18) {
-    return { unit: 'Q', denominator: 1e18 };
-  } else if (Math?.abs(value) >= 1e12) {
-    return { unit: 'T', denominator: 1e12 };
-  } else if (Math?.abs(value) >= 1e9) {
-    return { unit: 'B', denominator: 1e9 };
-  } else if (Math?.abs(value) >= 1e6) {
-    return { unit: 'M', denominator: 1e6 };
-  } else if (Math?.abs(value) >= 1e5) {
-    return { unit: 'K', denominator: 1e5 };
-  } else {
-    return { unit: '', denominator: 1 };
-  }
-}
 
     function formatDate(dateStr) {
       // Parse the input date string (YYYY-mm-dd)
@@ -180,15 +164,26 @@ function plotData(callData, putData) {
             }
         ],
         yAxis: [
-        {
+    {
-            type: 'value',
+      type: 'value',
-            splitLine: {
+      splitLine: {
-                show: false,
+            show: false, // Disable x-axis grid lines
-            },
+      },
-            axisLabel: {
+      
-                show: false // Hide the y-axis label
+       axisLabel: {
-            }
+        show: false // Hide y-axis labels
-        }
+      }
+    },
+    { 
+        type: 'value',
+        splitLine: {
+            show: false, // Disable x-axis grid lines
+        },
+        position: 'right',
+        axisLabel: {
+          show: false // Hide y-axis labels
+       },
+    },
     ],
         series: [
             {
@@ -233,8 +228,6 @@ function getEXPlot(state) {
 
   });
 
-    const {unit, denominator } = normalizer(Math.max(...valueList) ?? 0)
-
 
     const option = {
     silent: true,
@@ -267,41 +260,25 @@ function getEXPlot(state) {
         }
     },
     yAxis: [
-      {
+    {
       type: 'value',
       splitLine: {
             show: false, // Disable x-axis grid lines
       },
-      position: 'left',
+      
-      axisLabel: {
+       axisLabel: {
-        color: '#fff',
+        show: false // Hide y-axis labels
-          formatter: function (value, index) {
-            if (index % 2 === 0) {
-              return value?.toFixed(2); // Format the sentiment value
-            } else {
-                  return ''; // Hide this tick
-              }
-          }
       }
     },
     { 
-      position: 'right',
         type: 'value',
         splitLine: {
             show: false, // Disable x-axis grid lines
         },
+        position: 'right',
         axisLabel: {
-            color: '#fff', // Change label color to white
+          show: false // Hide y-axis labels
-            formatter: function (value, index) {
+       },
-                // Display every second tick
-                if (index % 2 === 0) {
-                    value = Math.max(value, 0);
-                    return (value / denominator)?.toFixed(1) + unit; // Format value in millions
-                } else {
-                    return ''; // Hide this tick
-                }
-            }
-        },
     },
     ],
     series: [
@@ -316,7 +293,7 @@ function getEXPlot(state) {
             showSymbol: false
         },
         {
-            name: 'GEX',
+            name: state?.toUpperCase(),
             data: valueList,
             type: 'bar',
             yAxisIndex: 1,
@@ -553,7 +530,7 @@ $: {
         <section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full">
             <div class="flex justify-center m-auto h-full overflow-hidden w-full">
                 <div class="relative flex justify-center items-center overflow-hidden w-full">
-                      <div class="xl:p-7 w-full m-auto mt-2 sm:mt-0">
+                      <div class="xl:p-7 w-full m-auto mt-2 ">
                             <div class="mb-6">
                                 <h2 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
                                     Unsual Options Activity

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

@@ -106,11 +106,11 @@ const transactionStyles = {
      
 
 
-<section class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0">
+<section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full">
-  <div class="h-full overflow-hidden">
+    <div class="flex justify-center m-auto h-full overflow-hidden w-full">
-      <div class="relative flex justify-center items-center overflow-hidden">
+        <div class="relative flex justify-center items-center overflow-hidden w-full">
-            <div class="sm:p-7 w-full mt-2 sm:mt-0">
+              <div class="xl:p-7 w-full m-auto mt-2">
-                  <div class="mb-6">
+                    <div class="mb-6">
                       <h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
                           Insider Trading
                       </h1>
@@ -125,36 +125,6 @@ const transactionStyles = {
                             No trading history available for {$displayCompanyName}. Likely no insider trading has happened yet.
                           {/if}
                         </div>
-                        
-                        {#if insiderTradingList?.length !== 0}
-                        <!--
-                        <div class="text-white text-[1rem] text-center m-auto w-full pb-3">
-                          We can divide four types of insider transactions:
-                        
-                          <div class="flex flex-row items-center justify-center">
-                            Buy, Sell,
-                            
-                            <label for="grantInfo" class="ml-1 cursor-pointer font-medium">
-                              Grant
-                            </label>
-                            <InfoModal
-                              title={"Stock Grant"}
-                              content={"A stock grant occurs when a company compensates an employee by offering them equity, or when an insider gifts shares. In essence, the company grants ownership of shares, or an insider transfers shares. These grants may involve common stock shares, preferred shares, or another class of shares."}
-                              id={"grantInfo"}
-                            />
-                            <label for="exerciseInfo" class="ml-6 cursor-pointer font-medium">
-                              Exercise
-                            </label>
-                            <InfoModal
-                              title={"Exercise"}
-                              content={`Exercising an option involves the owner granting themselves the right to buy or sell a specific number of shares at a future date. Essentially, the owner converts the options into shares, which they can subsequently trade. When the owner opts to buy or sell the underlying instrument rather than letting the contract expire unused or closing the position, they are said to be "exercising the option."`}
-                              id={"exerciseInfo"}
-                            />.
-                            </div>
-                        
-                          </div>
-                          -->
-                        {/if}
 
                     </div>
       
@@ -162,55 +132,7 @@ const transactionStyles = {
 
                       {#if insiderTradingList?.length !== 0}
 
-                    <!--
+               
-                    {#if Object?.keys(options)?.length !== 0}
-                      <div class="app w-full">
-                        <Chart {init} options={options} class="chart" />
-                      </div>
-
-
-                      <div class="grid grid-cols-3 sm:grid-cols-5 gap-y-6 sm:gap-y-4 sm:gap-4 flex-shrink-0 mx-auto mb-10 w-full">
-
-                        <div class="flex flex-col sm:flex-row items-center justify-center">
-                          <div class="h-full bg-gray-800 transform -translate-x-1/2 " aria-hidden="true"></div>
-                          <div class="flex-shrink-0 w-3 h-3 bg-[#fff] border-4 box-content border-gray-900 rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
-                          <span class="mt-2 sm:mt-0 text-white text-xs sm:text-[1rem] inline-block">
-                              Stock Price
-                          </span>
-                      </div>
-
-                        <div class="flex flex-col sm:flex-row items-center justify-center">
-                          <div class="h-full bg-gray-800 transform -translate-x-1/2 " aria-hidden="true"></div>
-                          <div class="flex-shrink-0 w-3 h-3 bg-[#0FC008] border-4 box-content border-gray-900 rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
-                          <span class="mt-2 sm:mt-0 text-white text-xs sm:text-[1rem] inline-block">
-                              Bought
-                          </span>
-                      </div>
-                        <div class="flex flex-col sm:flex-row items-center justify-center">
-                            <div class="h-full bg-gray-800 transform -translate-x-1/2 " aria-hidden="true"></div>
-                            <div class="flex-shrink-0 w-3 h-3 bg-[#FF2F1F] border-4 box-content border-gray-900 rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
-                            <span class="mt-2 sm:mt-0 text-white text-xs sm:text-[1rem] sm:font-medium inline-block">
-                                Sold
-                            </span>
-                        </div>
-                        <div class="flex flex-col sm:flex-row items-center justify-center">
-                          <div class="h-full bg-gray-800 transform -translate-x-1/2 " aria-hidden="true"></div>
-                          <div class="flex-shrink-0 w-3 h-3 bg-[#8f95a1] border-4 box-content border-gray-900 rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
-                          <span class="mt-2 sm:mt-0 text-white text-xs sm:text-[1rem] inline-block">
-                              Grant
-                          </span>
-                      </div>
-                      <div class="flex flex-col sm:flex-row items-center justify-center">
-                        <div class="h-full bg-gray-800 transform -translate-x-1/2 " aria-hidden="true"></div>
-                        <div class="flex-shrink-0 w-3 h-3 bg-[#F8901E] border-4 box-content border-gray-900 rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
-                        <span class="mt-2 sm:mt-0 text-white text-xs sm:text-[1rem] inline-block">
-                            Exercise
-                        </span>
-                    </div>
-                    </div>
-
-                    {/if}
-                     -->
 
                     
                     {#if Object?.keys(statistics)?.length !== 0 }

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

@@ -81,21 +81,6 @@ let activeIdx = 0;
     
     let displayTimePeriod = 'threeMonths'
 
-function normalizer(value) {
-  if (Math?.abs(value) >= 1e18) {
-    return { unit: 'Q', denominator: 1e18 };
-  } else if (Math?.abs(value) >= 1e12) {
-    return { unit: 'T', denominator: 1e12 };
-  } else if (Math?.abs(value) >= 1e9) {
-    return { unit: 'B', denominator: 1e9 };
-  } else if (Math?.abs(value) >= 1e6) {
-    return { unit: 'M', denominator: 1e6 };
-  } else if (Math?.abs(value) >= 1e5) {
-    return { unit: 'K', denominator: 1e5 };
-  } else {
-    return { unit: '', denominator: 1 };
-  }
-}
 
     function formatDate(dateStr) {
       // Parse the input date string (YYYY-mm-dd)
@@ -179,15 +164,26 @@ function plotData(callData, putData) {
             }
         ],
         yAxis: [
-        {
+    {
-            type: 'value',
+      type: 'value',
-            splitLine: {
+      splitLine: {
-                show: false,
+            show: false, // Disable x-axis grid lines
-            },
+      },
-            axisLabel: {
+      
-                show: false // Hide the y-axis label
+       axisLabel: {
-            }
+        show: false // Hide y-axis labels
-        }
+      }
+    },
+    { 
+        type: 'value',
+        splitLine: {
+            show: false, // Disable x-axis grid lines
+        },
+        position: 'right',
+        axisLabel: {
+          show: false // Hide y-axis labels
+       },
+    },
     ],
         series: [
             {
@@ -232,8 +228,6 @@ function getEXPlot(state) {
 
   });
 
-    const {unit, denominator } = normalizer(Math.max(...valueList) ?? 0)
-
 
     const option = {
     silent: true,
@@ -266,41 +260,25 @@ function getEXPlot(state) {
         }
     },
     yAxis: [
-      {
+    {
       type: 'value',
       splitLine: {
             show: false, // Disable x-axis grid lines
       },
-      position: 'left',
+      
-      axisLabel: {
+       axisLabel: {
-        color: '#fff',
+        show: false // Hide y-axis labels
-          formatter: function (value, index) {
-            if (index % 2 === 0) {
-              return value?.toFixed(2); // Format the sentiment value
-            } else {
-                  return ''; // Hide this tick
-              }
-          }
       }
     },
     { 
-      position: 'right',
         type: 'value',
         splitLine: {
             show: false, // Disable x-axis grid lines
         },
+        position: 'right',
         axisLabel: {
-            color: '#fff', // Change label color to white
+          show: false // Hide y-axis labels
-            formatter: function (value, index) {
+       },
-                // Display every second tick
-                if (index % 2 === 0) {
-                    value = Math.max(value, 0);
-                    return (value / denominator)?.toFixed(1) + unit; // Format value in millions
-                } else {
-                    return ''; // Hide this tick
-                }
-            }
-        },
     },
     ],
     series: [
@@ -315,7 +293,7 @@ function getEXPlot(state) {
             showSymbol: false
         },
         {
-            name: 'GEX',
+            name: state?.toUpperCase(),
             data: valueList,
             type: 'bar',
             yAxisIndex: 1,
@@ -552,7 +530,7 @@ $: {
         <section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full">
             <div class="flex justify-center m-auto h-full overflow-hidden w-full">
                 <div class="relative flex justify-center items-center overflow-hidden w-full">
-                      <div class="xl:p-7 w-full m-auto mt-2 sm:mt-0">
+                      <div class="xl:p-7 w-full m-auto mt-2 ">
                             <div class="mb-6">
                                 <h2 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
                                     Unsual Options Activity