From f9dfcb2924fc8d33591029b8dd545bd8b78b3580 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Tue, 25 Feb 2025 23:50:28 +0100
Subject: [PATCH] ui fixes

---
 .../Options/OpenInterestByStrike.svelte       | 207 +++++++++---------
 src/lib/components/Options/Volatility.svelte  |   1 -
 src/lib/highcharts.ts                         |  93 ++++----
 .../options/volatility/+page.svelte           |   4 +-
 4 files changed, 160 insertions(+), 145 deletions(-)

diff --git a/src/lib/components/Options/OpenInterestByStrike.svelte b/src/lib/components/Options/OpenInterestByStrike.svelte
index 7b338bc0..8a8231b5 100644
--- a/src/lib/components/Options/OpenInterestByStrike.svelte
+++ b/src/lib/components/Options/OpenInterestByStrike.svelte
@@ -1,28 +1,10 @@
 <script lang="ts">
-  import { abbreviateNumberWithColor } from "$lib/utils";
+  import { abbreviateNumberWithColor, abbreviateNumber } from "$lib/utils";
   import { screenWidth } from "$lib/store";
   import { onMount } from "svelte";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.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;
 
@@ -39,90 +21,125 @@
   });
 
   let displayList = rawData?.slice(0, 150);
-  let options = null;
 
   function plotData() {
+    // Process the raw data, sorting by strike value
     const processedData = rawData
       ?.map((d) => ({
         strike: d?.strike,
         callValue: d?.call_oi,
         putValue: d?.put_oi,
       }))
-      ?.sort((a, b) => a?.strike - b?.strike);
+      ?.sort((a, b) => a.strike - b.strike);
 
+    // Extract arrays for categories and series data
     const strikes = processedData?.map((d) => d.strike);
-    const callValues = processedData?.map((d) => d.callValue?.toFixed(2));
-    const putValues = processedData?.map((d) => d.putValue?.toFixed(2));
+    const callValues = processedData?.map((d) =>
+      parseFloat(d.callValue.toFixed(2)),
+    );
+    const putValues = processedData?.map((d) =>
+      parseFloat(d.putValue.toFixed(2)),
+    );
+
+    // Calculate a bar width percentage (if needed for further calculations)
     const barWidthPercentage = Math.max(100 / processedData.length, 30);
 
     const options = {
-      animation: false,
-      tooltip: {
-        trigger: "axis",
-        axisPointer: {
-          type: "shadow",
-        },
-        backgroundColor: "#313131",
-        textStyle: {
-          color: "#fff",
-        },
-        formatter: function (params) {
-          const strike = params[0].axisValue;
-          const call = params[1].data;
-          const put = params[0].data;
-
-          return `
-          <div style="text-align:left;">
-            <b>Strike:</b> ${strike}<br/>
-            <span style="color:#00FC50;">● Call OI:</span> ${abbreviateNumberWithColor(call, false, true)}<br/>
-            <span style="color:#FF2F1F;">● Put OI:</span> ${abbreviateNumberWithColor(put, false, true)}<br/>
-            </div>`;
-        },
+      chart: {
+        backgroundColor: "#09090B",
+        animation: false,
+        height: 360,
       },
-      grid: {
-        left: $screenWidth < 640 ? "5%" : "2%",
-        right: $screenWidth < 640 ? "5%" : "2%",
-        bottom: "10%",
-        containLabel: true,
-      },
-      yAxis: {
-        type: "value",
-        nameTextStyle: { color: "#fff" },
-        splitLine: { show: false },
-        axisLabel: {
-          show: false, // Hide x-axis labels
-        },
+      credits: { enabled: false },
+      legend: { enabled: false },
+      title: {
+        text: `<h3 class="mt-3 mb-1">Open Interest By Strike</h3>`,
+        useHTML: true,
+        style: { color: "white" },
       },
       xAxis: {
-        type: "category",
-        data: strikes,
-        axisLine: { lineStyle: { color: "#fff" } },
-        axisLabel: {
-          color: "#fff",
-          interval: (index) => index % 5 === 0, // Show every 5th label
-          rotate: 45, // Rotate labels for better readability
-          fontSize: $screenWidth < 640 ? 10 : 14, // Adjust font size if needed
-          margin: 20,
+        categories: strikes,
+        lineColor: "#fff",
+        endOnTick: false,
+        crosshair: {
+          color: "#fff", // Set the color of the crosshair line
+          width: 1, // Adjust the line width as needed
+          dashStyle: "Solid",
+        },
+        labels: {
+          style: {
+            color: "#fff",
+          },
+          rotation: 45,
+          // Only display every 5th label
+          formatter: function () {
+            return this.pos % 4 === 0 ? this.value : "";
+          },
         },
-        splitLine: { show: false },
       },
+      yAxis: {
+        gridLineWidth: 1,
+        gridLineColor: "#111827",
+        labels: {
+          style: { color: "white" },
+        },
+        title: { text: null },
+        opposite: true,
+      },
+      tooltip: {
+        shared: true,
+        useHTML: true,
+        backgroundColor: "rgba(0, 0, 0, 0.8)", // Semi-transparent black
+        borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border
+        borderWidth: 1,
+        style: {
+          color: "#fff",
+          fontSize: "16px",
+          padding: "10px",
+        },
+        borderRadius: 4,
+        formatter: function () {
+          // Format the x value to display time in hh:mm format
+          let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">Strike ${this?.x}</span><br>`;
 
+          // Loop through each point in the shared tooltip
+          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;
+        },
+      },
+      plotOptions: {
+        animation: false,
+        column: {
+          grouping: true,
+          shadow: false,
+          borderWidth: 0,
+        },
+      },
       series: [
         {
-          name: `Put`,
-          type: "bar",
+          name: "Put",
+          type: "column",
           data: putValues,
-          itemStyle: { color: "#FF2F1F" },
-          barWidth: `${barWidthPercentage}%`,
+          color: "#FF2F1F",
+          animation: false,
         },
         {
-          name: `Call `,
-          type: "bar",
+          name: "Call",
+          type: "column",
           data: callValues,
-          itemStyle: { color: "#00FC50" },
-          barWidth: `${barWidthPercentage}%`,
+          color: "#00FC50",
+          animation: false,
         },
       ],
+      credits: {
+        enabled: false,
+      },
     };
 
     return options;
@@ -229,39 +246,29 @@
     displayList = [...originalData].sort(compareValues);
   };
 
-  $: {
-    if (typeof window !== "undefined") {
-      options = plotData();
-    }
-  }
+  let config = plotData() || null;
 </script>
 
 <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
   <h2
     class=" flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit"
   >
-    Open Interest (OI) By Strike
+    Open Interest Chart
   </h2>
 
-  <div class="w-full overflow-hidden m-auto">
-    {#if options !== null}
-      <div class="app w-full relative">
-        <Chart {init} {options} class="chart" />
-      </div>
-    {:else}
-      <div class="flex justify-center items-center h-80">
-        <div class="relative">
-          <label
-            class="bg-primary 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 sm:loading-[1rem] text-gray-400"
-            ></span>
-          </label>
-        </div>
-      </div>
+  <div class="w-full overflow-hidden m-auto mt-3">
+    {#if config !== null}
+      <div
+        class="border border-gray-800 rounded w-full"
+        use:highcharts={config}
+      ></div>
     {/if}
   </div>
+
+  <h3 class="mt-5 text-xl sm:text-2xl text-white font-bold mb-3">
+    Open Interest Table
+  </h3>
+
   <div class="w-full overflow-x-scroll text-white">
     <table
       class="w-full table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md m-auto overflow-x-auto"
diff --git a/src/lib/components/Options/Volatility.svelte b/src/lib/components/Options/Volatility.svelte
index 720765e6..935bc66d 100644
--- a/src/lib/components/Options/Volatility.svelte
+++ b/src/lib/components/Options/Volatility.svelte
@@ -94,7 +94,6 @@
       priceList,
     } = filterDataByPeriod(data, timePeriod);
 
-    console.log(volatilitySpread);
     const options = {
       chart: {
         backgroundColor: "#09090B",
diff --git a/src/lib/highcharts.ts b/src/lib/highcharts.ts
index 5b8a658c..482b6da3 100644
--- a/src/lib/highcharts.ts
+++ b/src/lib/highcharts.ts
@@ -1,56 +1,65 @@
 import Highcharts from 'highcharts';
 import { browser } from '$app/environment';
 
-/*
 if (browser) {
-  import('highcharts/modules/exporting').then(module => {
-    module.default(Highcharts);
+  Highcharts.setOptions({
+    lang: {
+      numericSymbols: ['K', 'M', 'B', 'T', 'P', 'E']
+    }
   });
-
-  import('highcharts/modules/export-data').then(module => {
-    module.default(Highcharts);
-  });
-}
-  */
-
-
-if (browser) {
-Highcharts.setOptions({
-  lang: {
-    numericSymbols: ['K', 'M', 'B', 'T', 'P', 'E']
-  }
-});
 }
 
 export default (node, config) => {
   const redraw = true;
   const oneToOne = true;
+
+  // Merge our watermark load event with any provided chart events
+  const mergedChartOptions = {
+    ...(config.chart || {}),
+    events: {
+      ...(config.chart && config.chart.events ? config.chart.events : {}),
+     load: function () {
+  const chart = this;
+  const marginX = 10; // Adjust horizontal margin
+  const marginY = 5; // Adjust vertical margin
+
+  // Destroy existing watermark if it exists
+  if (chart.watermark) {
+    chart.watermark.destroy();
+  }
+
+  // Get the actual width and height of the plotting area
+  const x = chart.chartWidth - marginX;
+  const y = chart.chartHeight - marginY;
+
+  // Add watermark
+  chart.watermark = chart.renderer
+    .text('stocknear.com', x, y)
+    .attr({
+      align: 'right'
+    })
+    .css({
+      fontSize: '12px',
+      color: 'rgba(255, 255, 255, 0.6)',
+      fontWeight: 'medium',
+      pointerEvents: 'none'
+    })
+    .add();
+
+  // Adjust on redraw
+  Highcharts.addEvent(chart, 'redraw', function () {
+    const newX = chart.chartWidth - marginX;
+    const newY = chart.chartHeight - marginY;
+    chart.watermark.attr({ x: newX, y: newY });
+  });
+}
+
+    }
+  };
+
   const chart = Highcharts.chart(node, {
     ...config,
-	/*
-    exporting: {
-		filename: 'event-id-metadata-graph',
-		fetchOptions:{
-		credentials: "omit", // omit, same-origin, include
-		mode: "cors" // cors, no-cors, same-origin
-	},
-      buttons: {
-        customButton: {
-          menuItems: [
-            'viewFullscreen',
-            'printChart',
-            'separator',
-            'downloadPNG',
-            'downloadJPEG',
-            'downloadPDF',
-            'downloadSVG',
-          ],
-          className: 'bg-gray-500',
-          text: 'Custom button',
-        },
-      },
-    },
-	*/
+    chart: mergedChartOptions,
   });
 
   return {
@@ -60,8 +69,10 @@ export default (node, config) => {
     destroy() {
       chart.destroy();
     },
+    /*
     exportChart(options = {}, chartOptions = {}) {
       chart.exportChart(options, chartOptions);
     },
+    */
   };
 };
diff --git a/src/routes/stocks/[tickerID]/options/volatility/+page.svelte b/src/routes/stocks/[tickerID]/options/volatility/+page.svelte
index ec554b52..4e66a755 100644
--- a/src/routes/stocks/[tickerID]/options/volatility/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/volatility/+page.svelte
@@ -14,9 +14,7 @@
   description={`Track volatility and implied volatility trends with our interactive chart. Analyze price movements, 30-day implied volatility, and realized volatility to make data-driven trading decisions.`}
 />
 
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
->
+<section class="w-full bg-default overflow-hidden text-white min-h-screen">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"