update dp chart

src/lib/components/DarkPool/PriceLevel.svelte

@@ -1,115 +1,145 @@
 <script lang="ts">
   import { displayCompanyName, stockTicker, etfTicker } from "$lib/store";
   import InfoModal from "$lib/components/InfoModal.svelte";
-  import { Chart } from "svelte-echarts";
   import { abbreviateNumber, abbreviateNumberWithColor } from "$lib/utils";
-  import { init, use } from "echarts/core";
+  import highcharts from "$lib/highcharts.ts";
-  import { BarChart } from "echarts/charts";
-  import { GridComponent, TooltipComponent } from "echarts/components";
-  import { CanvasRenderer } from "echarts/renderers";
 
   let category = "Size";
 
-  use([BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
-
   export let rawData = [];
   export let metrics = {};
 
-  let optionsData;
+  let config;
 
   function getPlotOptions(category) {
-    const xAxis = rawData.map((item) => item[category?.toLowerCase()]); // Convert volume to millions for clarity
+    const xAxis = rawData?.map((item) => item[category?.toLowerCase()]);
-    const yAxis = rawData.map((item) => item?.price_level || 0);
+    const yAxis = rawData?.map((item) => item?.price_level || 0);
+
+    // Find max value index for highlighting
+    const maxValueIndex = xAxis?.indexOf(Math.max(...xAxis));
+
+    // Create colors array with highlighted bar
+    const colors = xAxis?.map((value, index) =>
+      index === maxValueIndex ? "#3BA272" : "#e2e8f0",
+    );
 
     const options = {
-      silent: true,
+      chart: {
-      tooltip: {
+        type: "column",
-        trigger: "axis",
+        backgroundColor: "#09090B",
-        hideDelay: 100,
-        borderColor: "#969696",
-        borderWidth: 1,
-        backgroundColor: "#313131",
-        textStyle: {
-          color: "#fff",
-        },
-        formatter: function (params) {
-          const priceLevel = params[0].axisValue;
-
-          let result = `Price Level: ${priceLevel}<br/>`;
-
-          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>';
-            result += `${param.seriesName}: ${abbreviateNumber(param.value)}<br/>`;
-          });
-
-          return result;
-        },
-        axisPointer: {
-          lineStyle: {
-            color: "#fff",
-          },
-        },
-      },
         animation: false,
-      grid: {
+        height: 360,
-        left: "0%", // Adjust to create space for y-axis labels
+      },
-        right: "5%",
+      credits: { enabled: false },
-        bottom: "0%",
+      legend: { enabled: false },
-        top: "5%",
+      title: {
-        containLabel: true,
+        text: `<h3 class="mt-3 mb-1">Dark Pool Price Levels</h3>`,
+        useHTML: true,
+        style: { color: "white" },
       },
       xAxis: {
-        type: "value",
+        endonTick: false,
-        name: "",
+        categories: yAxis,
-        splitLine: { show: false },
+        crosshair: {
-        axisLabel: {
+          color: "#fff", // Set the color of the crosshair line
+          width: 1, // Adjust the line width as needed
+          dashStyle: "Solid",
+        },
+        labels: {
+          style: {
             color: "#fff",
-          interval: 0, // Show all labels
+          },
-          rotate: 45, // Rotate labels for better readability
+          distance: 10, // Increases space between label and axis
-          fontSize: 12, // Adjust font size if needed
+          formatter: function () {
-          margin: 10,
+            return this.value;
-          formatter: function (value) {
-            return abbreviateNumber(value); // Call your abbreviateNumber function
           },
         },
       },
       yAxis: {
-        type: "category",
+        title: {
-        name: "",
+          text: null,
-        data: yAxis,
+        },
-        axisLabel: { color: "#fff" },
+        opposite: true,
+        gridLineWidth: 1,
+        gridLineColor: "#111827",
+        tickPositioner: function () {
+          const positions = [];
+          const info = this.getExtremes();
+          const tickCount = 3; // 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;
+        },
+        labels: {
+          formatter: function () {
+            return abbreviateNumber(this?.value);
+          },
+          style: {
+            color: "#fff",
+          },
+        },
+      },
+      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]">Price Level ${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: {
+        column: {
+          colorByPoint: true,
+          colors: colors,
+          borderColor: colors,
+          borderRadius: "1px",
+          dataLabels: {
+            enabled: false,
+          },
+        },
+        animation: false,
       },
       series: [
         {
           name: `Total ${category}`,
           data: xAxis,
-          type: "bar",
+          animation: false,
-          itemStyle: {
-            color: (params) => {
-              // Highlight a specific bar (e.g., the maximum volume)
-              const maxVolumeIndex = xAxis.indexOf(Math.max(...xAxis));
-              return params.dataIndex === maxVolumeIndex
-                ? "#3BA272"
-                : "#e2e8f0"; // Green for highlight, blue for others
-            },
-          },
-          showSymbol: false,
         },
       ],
     };
+
     return options;
   }
 
   $: if (($stockTicker || $etfTicker) && category) {
-    optionsData = getPlotOptions(category);
+    config = getPlotOptions(category) || null;
   }
 </script>
 
-<section class="overflow-hidden text-white h-full pb-8 pt-6">
+<section class="overflow-hidden text-white h-full pb-8 pt-3">
   <main class="overflow-hidden">
     <div class="flex flex-row items-center">
       <label
@@ -127,7 +157,7 @@
 
     {#if rawData?.length !== 0 && Object?.keys(metrics)?.length > 0}
       <div class="w-full flex flex-col items-start">
-        <div class="text-white text-[1rem] mt-2 mb-2 w-full">
+        <div class="text-white text-[1rem] mt-2 w-full">
           {$displayCompanyName} has seen an average dark pool trade size of {@html abbreviateNumberWithColor(
             metrics?.avgTradeSize,
             false,
@@ -144,43 +174,25 @@
         </div>
       </div>
 
-      <div class="pb-2 rounded-md bg-default mt-14 sm:mt-0">
+      <div class=" rounded-md bg-default mt-5 sm:mt-0">
-        <div class="app w-full h-[300px] mt-5 relative">
+        <div class="flex justify-end mb-2 space-x-2 z-10 text-sm">
-          <div
-            class="flex justify-start space-x-2 absolute right-0 -top-10 sm:-top-8 z-10 text-sm"
-          >
           {#each ["Size", "Premium"] as item}
             <label
               on:click={() => (category = item)}
-                class="px-4 py-2 {category === item
+              class="px-3 py-1 {category === item
-                  ? 'bg-white text-black shadow-xl'
+                ? 'bg-white text-black'
-                  : 'text-white bg-table text-opacity-[0.6]'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
+                : 'text-white bg-table'} 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>
 
-          <Chart {init} options={optionsData} class="chart " />
+        <div
-        </div>
+          class="border border-gray-800 rounded w-full"
+          use:highcharts={config}
+        ></div>
       </div>
     {/if}
   </main>
 </section>
-
-<style>
-  .app {
-    height: 300px;
-    max-width: 100%; /* Ensure chart width doesn't exceed the container */
-  }
-
-  @media (max-width: 640px) {
-    .app {
-      height: 210px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>

src/lib/components/Options/Volatility.svelte

@@ -199,7 +199,7 @@
           return tooltipContent;
         },
       },
-      // Disable markers globally on hover for all series
+
       plotOptions: {
         series: {
           marker: {
@@ -210,6 +210,13 @@
               },
             },
           },
+          color: "white",
+          animation: false, // Disable series animation
+          states: {
+            hover: {
+              enabled: false, // Disable hover effect globally
+            },
+          },
         },
       },
       series: [