From 1ae91f39de680b07c2b93953a50fd55daef729c5 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Tue, 25 Feb 2025 20:50:46 +0100
Subject: [PATCH] ui fix

---
 .../etf/[tickerID]/options/+page.svelte       |   2 +-
 .../options/hottest-contracts/+page.svelte    | 460 +++++++++---------
 .../options/hottest-contracts/+page.svelte    | 460 +++++++++---------
 3 files changed, 453 insertions(+), 469 deletions(-)

diff --git a/src/routes/etf/[tickerID]/options/+page.svelte b/src/routes/etf/[tickerID]/options/+page.svelte
index 0d2d7bac..b2becba0 100644
--- a/src/routes/etf/[tickerID]/options/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/+page.svelte
@@ -305,7 +305,7 @@
         {/if}
 
         {#if tickerFlow?.length > 0}
-          <div class="w-full mb-10">
+          <div class="w-full">
             <TickerFlow {tickerFlow} />
           </div>
         {/if}
diff --git a/src/routes/etf/[tickerID]/options/hottest-contracts/+page.svelte b/src/routes/etf/[tickerID]/options/hottest-contracts/+page.svelte
index 3d3b3886..3e158ab8 100644
--- a/src/routes/etf/[tickerID]/options/hottest-contracts/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/hottest-contracts/+page.svelte
@@ -1,9 +1,5 @@
 <script lang="ts">
-  import {
-    abbreviateNumberWithColor,
-    abbreviateNumber,
-    monthNames,
-  } from "$lib/utils";
+  import { abbreviateNumberWithColor, abbreviateNumber } from "$lib/utils";
   import {
     setCache,
     getCache,
@@ -17,29 +13,11 @@
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
   import Infobox from "$lib/components/Infobox.svelte";
-  import { Chart } from "svelte-echarts";
-
-  import { init, use } from "echarts/core";
-  import { LineChart, BarChart } from "echarts/charts";
-  import {
-    GridComponent,
-    TooltipComponent,
-    LegendComponent,
-  } from "echarts/components";
-  import { CanvasRenderer } from "echarts/renderers";
-
-  use([
-    LineChart,
-    BarChart,
-    GridComponent,
-    TooltipComponent,
-    LegendComponent,
-    CanvasRenderer,
-  ]);
+  import highcharts from "$lib/highcharts.ts";
 
   export let data;
   let isLoaded = false;
-  let optionsData = null;
+  let config = null;
 
   let optionHistoryList = [];
   let selectGraphType = "Vol/OI";
@@ -296,175 +274,228 @@
     openInterestList = [...originalData].sort(compareValues);
   };
 
-  function plotData() {
-    let data = rawDataHistory?.sort(
-      (a, b) => new Date(a?.date) - new Date(b?.date),
-    );
-    let dates = data?.map((item) => item?.date);
-    let avgPrice = data?.map((item) => item?.mark);
-    let priceList = data?.map((item) => item?.price);
+  function plotContractHistory() {
+    // Ensure rawDataHistory exists and sort it by date
+    const sortedData =
+      rawDataHistory?.sort((a, b) => new Date(a?.date) - new Date(b?.date)) ||
+      [];
 
-    let volumeList = data?.map((item) => item?.volume);
-    let oiList = data?.map((item) => item?.open_interest);
-    let ivList = data?.map((item) =>
-      Math?.floor(item?.implied_volatility * 100),
-    );
-
-    const createLineSeries = (name, data, color, yAxisIndex = 1) => ({
-      name,
-      type: "line",
-      yAxisIndex,
-      data,
-      itemStyle: { color },
-      lineStyle: { width: 2 },
-      smooth: true,
-      showSymbol: false,
-    });
-
-    const createBarSeries = (name, data, color, stack = null) => ({
-      name,
-      type: "bar",
-      stack,
-      data,
-      itemStyle: { color },
-      emphasis: { focus: "series" },
-    });
+    // Filter out data points that have an undefined price so they don't appear in any series
+    const filteredData = sortedData.filter((item) => item?.price !== undefined);
 
+    // Build series based on the selected graph type, using filteredData
     let series = [];
-    if (selectGraphType === "Vol/OI") {
+    if (selectGraphType == "Vol/OI") {
       series = [
-        createBarSeries("Volume", volumeList, "#FD7E14"),
-        createBarSeries("OI", oiList, "#33B890"),
-        createLineSeries("Avg Fill", avgPrice, "#FAD776"),
-        createLineSeries("Stock Price", priceList, "#fff", 2),
+        {
+          name: "Volume",
+          type: "column",
+          data: filteredData.map((item) => [
+            new Date(item.date).getTime(),
+            item.volume,
+          ]),
+          color: "#FD7E14",
+          borderColor: "#FD7E14",
+          borderRadius: "2px",
+          yAxis: 0,
+          animation: false,
+        },
+        {
+          name: "OI",
+          type: "column",
+          data: filteredData.map((item) => [
+            new Date(item.date).getTime(),
+            item.open_interest,
+          ]),
+          color: "#33B890",
+          borderColor: "#33B890",
+          borderRadius: "2px",
+          yAxis: 0,
+          animation: false,
+        },
+        {
+          name: "Avg Fill",
+          type: "spline", // smooth line
+          data: filteredData.map((item) => [
+            new Date(item.date).getTime(),
+            item.mark,
+          ]),
+          color: "#FAD776",
+          yAxis: 2,
+          animation: false,
+          marker: { enabled: false },
+        },
+        {
+          name: "Price",
+          type: "spline",
+          yAxis: 1,
+          data: filteredData.map((item) => [
+            new Date(item.date).getTime(),
+            item.price,
+          ]),
+          color: "#fff",
+          lineWidth: 1,
+          marker: { enabled: false },
+          animation: false,
+        },
       ];
     } else {
       series = [
-        createLineSeries("IV", ivList, "#B24BF3", 0),
-        createLineSeries("Avg Fill", avgPrice, "#FAD776"),
-        createLineSeries("Stock Price", priceList, "#fff", 2),
+        {
+          name: "IV",
+          type: "spline",
+          data: filteredData.map((item) => [
+            new Date(item.date).getTime(),
+            Math.floor(item.implied_volatility * 100),
+          ]),
+          color: "#B24BF3",
+          yAxis: 0,
+          animation: false,
+          marker: { enabled: false },
+        },
+        {
+          name: "Avg Fill",
+          type: "spline",
+          data: filteredData.map((item) => [
+            new Date(item.date).getTime(),
+            item.mark,
+          ]),
+          color: "#FAD776",
+          yAxis: 2,
+          lineWidth: 1,
+          animation: false,
+          marker: { enabled: false },
+        },
+        {
+          name: "Price",
+          type: "spline",
+          yAxis: 1,
+          data: filteredData.map((item) => [
+            new Date(item.date).getTime(),
+            item.price,
+          ]),
+          color: "#fff",
+          lineWidth: 1,
+          marker: { enabled: false },
+          animation: false,
+        },
       ];
     }
 
+    // Highcharts configuration object
     const options = {
-      animation: false,
-      tooltip: {
-        trigger: "axis",
-        hideDelay: 100,
-        borderColor: "#969696", // Black border color
-        borderWidth: 1, // Border width of 1px
-        backgroundColor: "#313131", // Optional: Set background color for contrast
-        textStyle: {
-          color: "#fff", // Optional: Text color for better visibility
-        },
-        formatter: function (params) {
-          // Get the timestamp from the first parameter
-          const timestamp = params[0].axisValue;
-
-          // Find the matching data point in rawDataHistory based on the date
-          const rawDataPoint = rawDataHistory.find(
-            (item) => item.date === timestamp,
-          );
-
-          // Initialize result with timestamp
-          let result = timestamp + "<br/>";
-
-          // Sort params to ensure Vol appears last
-          params.sort((a, b) => {
-            if (a.seriesName === "Vol") return 1;
-            if (b.seriesName === "Vol") return -1;
-            return 0;
-          });
-
-          // Loop through each series data
-          params?.forEach((param) => {
-            const marker =
-              '<span style="display:inline-block;margin-right:4px;' +
-              "border-radius:10px;width:10px;height:10px;background-color:" +
-              param.color +
-              '"></span>';
-
-            // 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) {
-            result += `Days to Expiration : ${rawDataPoint.dte}<br/>`;
-          }
-
-          return result;
-        },
-
-        axisPointer: {
-          lineStyle: {
-            color: "#fff",
-          },
-        },
+      chart: {
+        backgroundColor: "#09090B",
+        animation: false,
+        height: 360,
       },
-
-      silent: true,
-      grid: {
-        left: $screenWidth < 640 ? "5%" : "2%",
-        right: $screenWidth < 640 ? "5%" : "2%",
-        bottom: "20%",
-        containLabel: true,
+      credits: { enabled: false },
+      title: {
+        text: `<h3 class="mt-3 mb-1">Contract History</h3>`,
+        useHTML: true,
+        style: { color: "white" },
       },
-      xAxis: [
-        {
-          type: "category",
-          data: dates,
-          axisLabel: {
-            color: "#fff",
-
-            formatter: function (value) {
-              // Assuming dates are in the format 'yyyy-mm-dd'
-              const dateParts = value.split("-");
-              const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
-              const year = parseInt(dateParts[0]);
-              const day = parseInt(dateParts[2]);
-              return `${day} ${monthNames[monthIndex]} ${year}`;
+      // Disable markers globally on hover for all series
+      plotOptions: {
+        series: {
+          marker: {
+            enabled: false,
+            states: {
+              hover: {
+                enabled: false,
+              },
             },
           },
         },
-      ],
+      },
+      xAxis: {
+        type: "datetime",
+        endOnTick: false,
+        crosshair: {
+          color: "#fff",
+          width: 1,
+          dashStyle: "Solid",
+        },
+        labels: {
+          style: { color: "#fff" },
+          distance: 20,
+          formatter: function () {
+            return new Date(this.value).toLocaleDateString("en-US", {
+              month: "short",
+              year: "numeric",
+            });
+          },
+        },
+        tickPositioner: function () {
+          const positions = [];
+          const info = this.getExtremes();
+          const tickCount = 5; // Reduce number of ticks displayed
+          const interval = Math.floor((info.max - info.min) / tickCount);
+
+          for (let i = 0; i <= tickCount; i++) {
+            positions.push(info.min + i * interval);
+          }
+          return positions;
+        },
+      },
       yAxis: [
         {
-          type: "value",
-          splitLine: {
-            show: false, // Disable x-axis grid lines
-          },
-          axisLabel: {
-            show: false, // Hide y-axis labels
-          },
+          gridLineWidth: 1,
+          gridLineColor: "#111827",
+          labels: { style: { color: "white" } },
+          title: { text: null },
+          opposite: true,
         },
         {
-          type: "value",
-          splitLine: {
-            show: false, // Disable x-axis grid lines
-          },
-          position: "right",
-          axisLabel: {
-            show: false, // Hide y-axis labels
-          },
+          title: { text: null },
+          gridLineWidth: 0,
+          labels: { enabled: false },
         },
         {
-          type: "value",
-          splitLine: {
-            show: false, // Disable x-axis grid lines
-          },
-          position: "top",
-          axisLabel: {
-            show: false, // Hide y-axis labels
-          },
+          title: { text: null },
+          gridLineWidth: 0,
+          labels: { enabled: false },
+        },
+        {
+          title: { text: null },
+          gridLineWidth: 0,
+          labels: { enabled: false },
         },
       ],
+      tooltip: {
+        shared: true,
+        useHTML: true,
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        borderColor: "rgba(255, 255, 255, 0.2)",
+        borderWidth: 1,
+        style: {
+          color: "#fff",
+          fontSize: "16px",
+          padding: "10px",
+        },
+        borderRadius: 4,
+        formatter: function () {
+          let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">${new Date(
+            this.x,
+          ).toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+          })}</span><br>`;
+
+          this.points.forEach((point) => {
+            tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span> 
+          <span class="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumber(
+            point.y,
+          )}</span><br>`;
+          });
+          return tooltipContent;
+        },
+      },
+      legend: { enabled: false },
       series: series,
     };
+
     return options;
   }
 
@@ -520,13 +551,13 @@
       });
 
       rawDataHistory = calculateDTE(rawDataHistory, dateExpiration);
-      optionsData = plotData();
+      config = plotContractHistory();
       rawDataHistory = rawDataHistory?.sort(
         (a, b) => new Date(b?.date) - new Date(a?.date),
       );
       optionHistoryList = rawDataHistory?.slice(0, 20);
     } else {
-      optionsData = null;
+      config = null;
     }
 
     isLoaded = true;
@@ -536,9 +567,9 @@
     if (typeof window !== "undefined" && selectGraphType) {
       isLoaded = false;
       if (rawDataHistory?.length > 0) {
-        optionsData = plotData();
+        config = plotContractHistory();
       } else {
-        optionsData = null;
+        config = null;
       }
 
       isLoaded = true;
@@ -596,7 +627,7 @@
                         on:click={() => handleViewData(item)}
                         on:mouseover={() =>
                           getContractHistory(item?.option_symbol)}
-                        class="cursor-pointer text-[#04D9FF] sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
+                        class="px-2 sm:px-0 cursor-pointer text-[#04D9FF] sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
                       >
                         {item?.strike_price}
 
@@ -604,7 +635,7 @@
 
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
-                          class="inline-block w-4 h-4"
+                          class="inline-block w-4 h-4 -mt-1"
                           viewBox="0 0 512 512"
                           fill="#04D9FF"
                           ><path
@@ -821,13 +852,13 @@
 <dialog
   id="optionDetailsDesktopModal"
   class="modal {$screenWidth < 640
-    ? 'modal-bottom'
+    ? 'modal-bottom '
     : ''} bg-[#000] bg-opacity-[0.8] sm:px-5"
 >
   <div
     class="modal-box w-full {rawDataHistory?.length > 0
       ? 'max-w-7xl'
-      : 'w-full'} rounded-md bg-table border-t sm:border border-gray-600 min-h-48 h-auto"
+      : 'w-full'} rounded-md bg-default border-t sm:border border-gray-800 min-h-48 h-auto"
   >
     <form
       method="dialog"
@@ -835,7 +866,7 @@
     >
       <p class="text-white text-[1rem] sm:text-xl font-semibold cursor-text">
         Contract: <span
-          class={optionType === "C" ? "text-[#00FC50]" : "text-[#FF2F1F]"}
+          class={optionType === "Calls" ? "text-[#00FC50]" : "text-[#FF2F1F]"}
           >{$etfTicker}
           {strikePrice}
           {optionType}
@@ -858,7 +889,7 @@
     </form>
     {#if rawDataHistory?.length > 0}
       <div
-        class="border-b border-gray-600 w-full mt-2 mb-2 sm:mb-3 sm:mt-3"
+        class="border-b border-gray-800 w-full mt-2 mb-2 sm:mb-3 sm:mt-3"
       ></div>
 
       <div class="hidden sm:flex flex-wrap text-white pb-2">
@@ -887,47 +918,26 @@
             "en-US",
           )}%
         </div>
-
-        <div class="mr-3 whitespace-nowrap">
-          <span class="text-[var(--light-text-color)] font-normal">OTM:</span>
-          {otmPercentage}%
-        </div>
       </div>
 
-      {#if $screenWidth > 640}
-        <div
-          class="pb-8 sm:pb-2 rounded-md bg-table border border-gray-600 overflow-hidden"
-        >
-          <div class="flex justify-end ml-auto w-fit mr-2 mt-2">
-            {#each ["Vol/OI", "IV"] as item}
-              <label
-                on:click={() => (selectGraphType = item)}
-                class="px-3 py-1.5 mr-2 {selectGraphType === item
-                  ? 'bg-white text-black '
-                  : 'text-white bg-table 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="app w-full h-[300px] mt-5">
-            {#if isLoaded}
-              <Chart {init} options={optionsData} class="chart" />
-            {: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-white"
-                    ></span>
-                  </label>
-                </div>
-              </div>
-            {/if}
-          </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">
+          {#each ["Vol/OI", "IV"] as item}
+            <label
+              on:click={() => (selectGraphType = item)}
+              class="px-3 py-1.5 mr-2 {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"
+            >
+              {item}
+            </label>
+          {/each}
         </div>
-      {/if}
+        <div
+          class="mt-5 border border-gray-800 rounded"
+          use:highcharts={config}
+        ></div>
+      </div>
 
       <div
         bind:this={container}
@@ -1072,21 +1082,3 @@
     <button>close</button>
   </form>
 </dialog>
-
-<style>
-  .app {
-    height: 400px;
-    width: 100%;
-  }
-
-  @media (max-width: 560px) {
-    .app {
-      width: 100%;
-      height: 300px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>
diff --git a/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte b/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte
index f2c74e91..b9d441a1 100644
--- a/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte
@@ -1,9 +1,5 @@
 <script lang="ts">
-  import {
-    abbreviateNumberWithColor,
-    abbreviateNumber,
-    monthNames,
-  } from "$lib/utils";
+  import { abbreviateNumberWithColor, abbreviateNumber } from "$lib/utils";
   import {
     setCache,
     getCache,
@@ -17,29 +13,11 @@
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
   import Infobox from "$lib/components/Infobox.svelte";
-  import { Chart } from "svelte-echarts";
-
-  import { init, use } from "echarts/core";
-  import { LineChart, BarChart } from "echarts/charts";
-  import {
-    GridComponent,
-    TooltipComponent,
-    LegendComponent,
-  } from "echarts/components";
-  import { CanvasRenderer } from "echarts/renderers";
-
-  use([
-    LineChart,
-    BarChart,
-    GridComponent,
-    TooltipComponent,
-    LegendComponent,
-    CanvasRenderer,
-  ]);
+  import highcharts from "$lib/highcharts.ts";
 
   export let data;
   let isLoaded = false;
-  let optionsData = null;
+  let config = null;
 
   let optionHistoryList = [];
   let selectGraphType = "Vol/OI";
@@ -296,175 +274,228 @@
     openInterestList = [...originalData].sort(compareValues);
   };
 
-  function plotData() {
-    let data = rawDataHistory?.sort(
-      (a, b) => new Date(a?.date) - new Date(b?.date),
-    );
-    let dates = data?.map((item) => item?.date);
-    let avgPrice = data?.map((item) => item?.mark);
-    let priceList = data?.map((item) => item?.price);
+  function plotContractHistory() {
+    // Ensure rawDataHistory exists and sort it by date
+    const sortedData =
+      rawDataHistory?.sort((a, b) => new Date(a?.date) - new Date(b?.date)) ||
+      [];
 
-    let volumeList = data?.map((item) => item?.volume);
-    let oiList = data?.map((item) => item?.open_interest);
-    let ivList = data?.map((item) =>
-      Math?.floor(item?.implied_volatility * 100),
-    );
-
-    const createLineSeries = (name, data, color, yAxisIndex = 1) => ({
-      name,
-      type: "line",
-      yAxisIndex,
-      data,
-      itemStyle: { color },
-      lineStyle: { width: 2 },
-      smooth: true,
-      showSymbol: false,
-    });
-
-    const createBarSeries = (name, data, color, stack = null) => ({
-      name,
-      type: "bar",
-      stack,
-      data,
-      itemStyle: { color },
-      emphasis: { focus: "series" },
-    });
+    // Filter out data points that have an undefined price so they don't appear in any series
+    const filteredData = sortedData.filter((item) => item?.price !== undefined);
 
+    // Build series based on the selected graph type, using filteredData
     let series = [];
-    if (selectGraphType === "Vol/OI") {
+    if (selectGraphType == "Vol/OI") {
       series = [
-        createBarSeries("Volume", volumeList, "#FD7E14"),
-        createBarSeries("OI", oiList, "#33B890"),
-        createLineSeries("Avg Fill", avgPrice, "#FAD776"),
-        createLineSeries("Stock Price", priceList, "#fff", 2),
+        {
+          name: "Volume",
+          type: "column",
+          data: filteredData.map((item) => [
+            new Date(item.date).getTime(),
+            item.volume,
+          ]),
+          color: "#FD7E14",
+          borderColor: "#FD7E14",
+          borderRadius: "2px",
+          yAxis: 0,
+          animation: false,
+        },
+        {
+          name: "OI",
+          type: "column",
+          data: filteredData.map((item) => [
+            new Date(item.date).getTime(),
+            item.open_interest,
+          ]),
+          color: "#33B890",
+          borderColor: "#33B890",
+          borderRadius: "2px",
+          yAxis: 0,
+          animation: false,
+        },
+        {
+          name: "Avg Fill",
+          type: "spline", // smooth line
+          data: filteredData.map((item) => [
+            new Date(item.date).getTime(),
+            item.mark,
+          ]),
+          color: "#FAD776",
+          yAxis: 2,
+          animation: false,
+          marker: { enabled: false },
+        },
+        {
+          name: "Price",
+          type: "spline",
+          yAxis: 1,
+          data: filteredData.map((item) => [
+            new Date(item.date).getTime(),
+            item.price,
+          ]),
+          color: "#fff",
+          lineWidth: 1,
+          marker: { enabled: false },
+          animation: false,
+        },
       ];
     } else {
       series = [
-        createLineSeries("IV", ivList, "#B24BF3", 0),
-        createLineSeries("Avg Fill", avgPrice, "#FAD776"),
-        createLineSeries("Stock Price", priceList, "#fff", 2),
+        {
+          name: "IV",
+          type: "spline",
+          data: filteredData.map((item) => [
+            new Date(item.date).getTime(),
+            Math.floor(item.implied_volatility * 100),
+          ]),
+          color: "#B24BF3",
+          yAxis: 0,
+          animation: false,
+          marker: { enabled: false },
+        },
+        {
+          name: "Avg Fill",
+          type: "spline",
+          data: filteredData.map((item) => [
+            new Date(item.date).getTime(),
+            item.mark,
+          ]),
+          color: "#FAD776",
+          yAxis: 2,
+          lineWidth: 1,
+          animation: false,
+          marker: { enabled: false },
+        },
+        {
+          name: "Price",
+          type: "spline",
+          yAxis: 1,
+          data: filteredData.map((item) => [
+            new Date(item.date).getTime(),
+            item.price,
+          ]),
+          color: "#fff",
+          lineWidth: 1,
+          marker: { enabled: false },
+          animation: false,
+        },
       ];
     }
 
+    // Highcharts configuration object
     const options = {
-      animation: false,
-      tooltip: {
-        trigger: "axis",
-        hideDelay: 100,
-        borderColor: "#969696", // Black border color
-        borderWidth: 1, // Border width of 1px
-        backgroundColor: "#313131", // Optional: Set background color for contrast
-        textStyle: {
-          color: "#fff", // Optional: Text color for better visibility
-        },
-        formatter: function (params) {
-          // Get the timestamp from the first parameter
-          const timestamp = params[0].axisValue;
-
-          // Find the matching data point in rawDataHistory based on the date
-          const rawDataPoint = rawDataHistory.find(
-            (item) => item.date === timestamp,
-          );
-
-          // Initialize result with timestamp
-          let result = timestamp + "<br/>";
-
-          // Sort params to ensure Vol appears last
-          params.sort((a, b) => {
-            if (a.seriesName === "Vol") return 1;
-            if (b.seriesName === "Vol") return -1;
-            return 0;
-          });
-
-          // Loop through each series data
-          params?.forEach((param) => {
-            const marker =
-              '<span style="display:inline-block;margin-right:4px;' +
-              "border-radius:10px;width:10px;height:10px;background-color:" +
-              param.color +
-              '"></span>';
-
-            // 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) {
-            result += `Days to Expiration : ${rawDataPoint.dte}<br/>`;
-          }
-
-          return result;
-        },
-
-        axisPointer: {
-          lineStyle: {
-            color: "#fff",
-          },
-        },
+      chart: {
+        backgroundColor: "#09090B",
+        animation: false,
+        height: 360,
       },
-
-      silent: true,
-      grid: {
-        left: $screenWidth < 640 ? "5%" : "2%",
-        right: $screenWidth < 640 ? "5%" : "2%",
-        bottom: "20%",
-        containLabel: true,
+      credits: { enabled: false },
+      title: {
+        text: `<h3 class="mt-3 mb-1">Contract History</h3>`,
+        useHTML: true,
+        style: { color: "white" },
       },
-      xAxis: [
-        {
-          type: "category",
-          data: dates,
-          axisLabel: {
-            color: "#fff",
-
-            formatter: function (value) {
-              // Assuming dates are in the format 'yyyy-mm-dd'
-              const dateParts = value.split("-");
-              const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
-              const year = parseInt(dateParts[0]);
-              const day = parseInt(dateParts[2]);
-              return `${day} ${monthNames[monthIndex]} ${year}`;
+      // Disable markers globally on hover for all series
+      plotOptions: {
+        series: {
+          marker: {
+            enabled: false,
+            states: {
+              hover: {
+                enabled: false,
+              },
             },
           },
         },
-      ],
+      },
+      xAxis: {
+        type: "datetime",
+        endOnTick: false,
+        crosshair: {
+          color: "#fff",
+          width: 1,
+          dashStyle: "Solid",
+        },
+        labels: {
+          style: { color: "#fff" },
+          distance: 20,
+          formatter: function () {
+            return new Date(this.value).toLocaleDateString("en-US", {
+              month: "short",
+              year: "numeric",
+            });
+          },
+        },
+        tickPositioner: function () {
+          const positions = [];
+          const info = this.getExtremes();
+          const tickCount = 5; // Reduce number of ticks displayed
+          const interval = Math.floor((info.max - info.min) / tickCount);
+
+          for (let i = 0; i <= tickCount; i++) {
+            positions.push(info.min + i * interval);
+          }
+          return positions;
+        },
+      },
       yAxis: [
         {
-          type: "value",
-          splitLine: {
-            show: false, // Disable x-axis grid lines
-          },
-          axisLabel: {
-            show: false, // Hide y-axis labels
-          },
+          gridLineWidth: 1,
+          gridLineColor: "#111827",
+          labels: { style: { color: "white" } },
+          title: { text: null },
+          opposite: true,
         },
         {
-          type: "value",
-          splitLine: {
-            show: false, // Disable x-axis grid lines
-          },
-          position: "right",
-          axisLabel: {
-            show: false, // Hide y-axis labels
-          },
+          title: { text: null },
+          gridLineWidth: 0,
+          labels: { enabled: false },
         },
         {
-          type: "value",
-          splitLine: {
-            show: false, // Disable x-axis grid lines
-          },
-          position: "top",
-          axisLabel: {
-            show: false, // Hide y-axis labels
-          },
+          title: { text: null },
+          gridLineWidth: 0,
+          labels: { enabled: false },
+        },
+        {
+          title: { text: null },
+          gridLineWidth: 0,
+          labels: { enabled: false },
         },
       ],
+      tooltip: {
+        shared: true,
+        useHTML: true,
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        borderColor: "rgba(255, 255, 255, 0.2)",
+        borderWidth: 1,
+        style: {
+          color: "#fff",
+          fontSize: "16px",
+          padding: "10px",
+        },
+        borderRadius: 4,
+        formatter: function () {
+          let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">${new Date(
+            this.x,
+          ).toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+          })}</span><br>`;
+
+          this.points.forEach((point) => {
+            tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span> 
+          <span class="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumber(
+            point.y,
+          )}</span><br>`;
+          });
+          return tooltipContent;
+        },
+      },
+      legend: { enabled: false },
       series: series,
     };
+
     return options;
   }
 
@@ -520,13 +551,13 @@
       });
 
       rawDataHistory = calculateDTE(rawDataHistory, dateExpiration);
-      optionsData = plotData();
+      config = plotContractHistory();
       rawDataHistory = rawDataHistory?.sort(
         (a, b) => new Date(b?.date) - new Date(a?.date),
       );
       optionHistoryList = rawDataHistory?.slice(0, 20);
     } else {
-      optionsData = null;
+      config = null;
     }
 
     isLoaded = true;
@@ -536,9 +567,9 @@
     if (typeof window !== "undefined" && selectGraphType) {
       isLoaded = false;
       if (rawDataHistory?.length > 0) {
-        optionsData = plotData();
+        config = plotContractHistory();
       } else {
-        optionsData = null;
+        config = null;
       }
 
       isLoaded = true;
@@ -596,7 +627,7 @@
                         on:click={() => handleViewData(item)}
                         on:mouseover={() =>
                           getContractHistory(item?.option_symbol)}
-                        class="cursor-pointer text-[#04D9FF] sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
+                        class="px-2 sm:px-0 cursor-pointer text-[#04D9FF] sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
                       >
                         {item?.strike_price}
 
@@ -604,7 +635,7 @@
 
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
-                          class="inline-block w-4 h-4"
+                          class="inline-block w-4 h-4 -mt-1"
                           viewBox="0 0 512 512"
                           fill="#04D9FF"
                           ><path
@@ -821,13 +852,13 @@
 <dialog
   id="optionDetailsDesktopModal"
   class="modal {$screenWidth < 640
-    ? 'modal-bottom'
+    ? 'modal-bottom '
     : ''} bg-[#000] bg-opacity-[0.8] sm:px-5"
 >
   <div
     class="modal-box w-full {rawDataHistory?.length > 0
       ? 'max-w-7xl'
-      : 'w-full'} rounded-md bg-table border-t sm:border border-gray-600 min-h-48 h-auto"
+      : 'w-full'} rounded-md bg-default border-t sm:border border-gray-800 min-h-48 h-auto"
   >
     <form
       method="dialog"
@@ -835,7 +866,7 @@
     >
       <p class="text-white text-[1rem] sm:text-xl font-semibold cursor-text">
         Contract: <span
-          class={optionType === "C" ? "text-[#00FC50]" : "text-[#FF2F1F]"}
+          class={optionType === "Calls" ? "text-[#00FC50]" : "text-[#FF2F1F]"}
           >{$stockTicker}
           {strikePrice}
           {optionType}
@@ -858,7 +889,7 @@
     </form>
     {#if rawDataHistory?.length > 0}
       <div
-        class="border-b border-gray-600 w-full mt-2 mb-2 sm:mb-3 sm:mt-3"
+        class="border-b border-gray-800 w-full mt-2 mb-2 sm:mb-3 sm:mt-3"
       ></div>
 
       <div class="hidden sm:flex flex-wrap text-white pb-2">
@@ -887,47 +918,26 @@
             "en-US",
           )}%
         </div>
-
-        <div class="mr-3 whitespace-nowrap">
-          <span class="text-[var(--light-text-color)] font-normal">OTM:</span>
-          {otmPercentage}%
-        </div>
       </div>
 
-      {#if $screenWidth > 640}
-        <div
-          class="pb-8 sm:pb-2 rounded-md bg-table border border-gray-600 overflow-hidden"
-        >
-          <div class="flex justify-end ml-auto w-fit mr-2 mt-2">
-            {#each ["Vol/OI", "IV"] as item}
-              <label
-                on:click={() => (selectGraphType = item)}
-                class="px-3 py-1.5 mr-2 {selectGraphType === item
-                  ? 'bg-white text-black '
-                  : 'text-white bg-table 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="app w-full h-[300px] mt-5">
-            {#if isLoaded}
-              <Chart {init} options={optionsData} class="chart" />
-            {: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-white"
-                    ></span>
-                  </label>
-                </div>
-              </div>
-            {/if}
-          </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">
+          {#each ["Vol/OI", "IV"] as item}
+            <label
+              on:click={() => (selectGraphType = item)}
+              class="px-3 py-1.5 mr-2 {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"
+            >
+              {item}
+            </label>
+          {/each}
         </div>
-      {/if}
+        <div
+          class="mt-5 border border-gray-800 rounded"
+          use:highcharts={config}
+        ></div>
+      </div>
 
       <div
         bind:this={container}
@@ -1072,21 +1082,3 @@
     <button>close</button>
   </form>
 </dialog>
-
-<style>
-  .app {
-    height: 400px;
-    width: 100%;
-  }
-
-  @media (max-width: 560px) {
-    .app {
-      width: 100%;
-      height: 300px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>