ui fix

src/lib/components/FailToDeliver.svelte

@@ -5,21 +5,19 @@
     assetType,
     etfTicker,
   } from "$lib/store";
-  import { Chart } from "svelte-echarts";
+  import {
-  import { abbreviateNumber, monthNames } from "$lib/utils";
+    abbreviateNumber,
-
+    monthNames,
-  import { init, use } from "echarts/core";
+    removeCompanyStrings,
-  import { LineChart } from "echarts/charts";
+  } from "$lib/utils";
-  import { GridComponent, TooltipComponent } from "echarts/components";
+  import highcharts from "$lib/highcharts.ts";
-  import { CanvasRenderer } from "echarts/renderers";
 
   export let data;
   export let rawData = [];
 
-  use([LineChart, GridComponent, TooltipComponent, CanvasRenderer]);
+  let config = null;
 
   let isLoaded = false;
-  let optionsData;
   let avgFailToDeliver;
   let weightedFTD;
 
@@ -92,117 +90,130 @@
     });
 
     const totalNumber = failToDeliverList?.reduce((acc, item) => acc + item, 0);
-    avgFailToDeliver = (totalNumber / failToDeliverList?.length)?.toFixed(0);
+    avgFailToDeliver = Math?.floor(totalNumber / failToDeliverList?.length);
 
-    const option = {
+    const options = {
-      silent: true,
+      credits: {
-      tooltip: {
+        enabled: false,
-        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;
-
-          // Initialize result with timestamp
-          let result = timestamp + "<br/>";
-
-          // Add 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>';
-            result +=
-              marker +
-              param.seriesName +
-              ": " +
-              abbreviateNumber(param.value, false, true) +
-              "<br/>";
-          });
-
-          return result;
-        },
-        axisPointer: {
-          lineStyle: {
-            color: "#fff",
-          },
-        },
       },
+      chart: {
+        // Removed global type so each series can define its own type.
+        backgroundColor: "#09090B",
+        plotBackgroundColor: "#09090B",
+        height: 360,
         animation: false,
-      grid: {
-        left: "3%",
-        right: "3%",
-        bottom: "2%",
-        top: "5%",
-        containLabel: true,
       },
+      title: {
+        text: `<h3 class="mt-3 mb-1">${removeCompanyStrings($displayCompanyName)} FTD</h3>`,
+        style: {
+          color: "white",
+        },
+        useHTML: true,
+      },
+      plotOptions: {
+        series: {
+          color: "white",
+          animation: false,
+          dataLabels: {
+            enabled: false,
+            style: {
+              fontSize: "13px",
+              fontWeight: "bold",
+            },
+            formatter: function () {
+              return abbreviateNumber(this.y);
+            },
+          },
+        },
+      },
+      legend: {
+        enabled: false,
+      },
+      tooltip: {
+        useHTML: true,
+        backgroundColor: "#fff",
+        style: {
+          color: "black",
+          fontSize: "16px",
+          padding: "10px",
+        },
+        borderRadius: 2,
+        borderWidth: 1,
+        borderColor: "#ffffff",
+        formatter: function () {
+          return `<span class="m-auto text-black text-[1rem] font-[501]">${new Date(
+            this?.x,
+          ).toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+          })}</span> <br> <span class="text-black font-normal">${abbreviateNumber(this.y)}</span>`;
+        },
+      },
+
       xAxis: {
-        type: "category",
+        categories: dates,
-        boundaryGap: false,
+        labels: {
-        data: dates,
+          style: {
-        axisLabel: {
             color: "#fff",
-          formatter: function (value) {
+          },
-            const dateParts = value.split("-");
+          formatter: function () {
+            const dateParts = this.value.split("-");
             const day = dateParts[2].substring(0);
-            const monthIndex = parseInt(dateParts[1]) - 1;
+            const monthIndex = parseInt(dateParts[1], 10) - 1;
             return `${day} ${monthNames[monthIndex]}`;
           },
         },
       },
       yAxis: [
         {
-          type: "value",
+          gridLineWidth: 0,
-          splitLine: {
+          labels: {
-            show: false,
+            enabled: false,
           },
-          axisLabel: {
+          title: {
-            show: false,
+            text: null,
           },
         },
         {
-          type: "value",
+          gridLineWidth: 0,
-          splitLine: {
+          labels: {
-            show: false,
+            enabled: false,
           },
-          position: "right",
+          title: {
-          axisLabel: {
+            text: null,
-            show: false,
           },
+          opposite: true,
         },
       ],
       series: [
         {
-          name: "Price",
+          // FTD Shares area series drawn first (behind the line)
-          data: priceList,
+          name: "FTD Shares",
-          type: "line",
+          type: "area",
-          itemStyle: {
+          data: failToDeliverList,
-            color: "#fff",
+          fillOpacity: 1,
+          yAxis: 1,
+          color: "#E11D48",
+          marker: {
+            fillColor: "transparent",
           },
-          showSymbol: false,
         },
         {
-          name: "FTD Shares",
+          // Price line series drawn on top
-          data: failToDeliverList,
+          name: "Price",
           type: "line",
-          areaStyle: { opacity: 1 },
+          data: priceList,
-          yAxisIndex: 1,
+          color: "#fff",
-          itemStyle: {
+          marker: {
-            color: "#E11D48",
+            fillColor: "transparent",
           },
-          showSymbol: false,
+          lineWidth: 2,
         },
       ],
     };
 
-    return option;
+    return options;
   }
 
   $: {
@@ -215,7 +226,7 @@
             data?.getStockQuote?.avgVolume) *
           100
         )?.toFixed(2);
-        optionsData = getPlotOptions();
+        config = getPlotOptions();
       }
       isLoaded = true;
     }
@@ -224,8 +235,8 @@
 
 <section class="overflow-hidden text-white h-full pb-8">
   <main class="overflow-hidden">
-    <div class="flex flex-row items-center w-full mt-5">
+    <div class="flex flex-row items-center w-full mt-3">
-      <h1 class="text-2xl text-white font-bold">FTD Chart</h1>
+      <h1 class="text-xl sm:text-2xl text-white font-bold">FTD Chart</h1>
     </div>
 
     {#if isLoaded}
@@ -235,55 +246,15 @@
             Over the past year, {$displayCompanyName} has seen a monthly average
             of
             <span class="font-semibold"
-              >{abbreviateNumber(avgFailToDeliver)}</span
+              >{avgFailToDeliver?.toLocaleString("en-US")}
-            > fail to deliver shares.
+            </span> fail to deliver shares.
-          </div>
-        </div>
-
-        <div class="pb-2 rounded-md bg-default">
-          <div class="app w-full h-[300px] mt-5">
-            <Chart {init} options={optionsData} class="chart" />
           </div>
         </div>
 
         <div
-          class="flex flex-row items-center justify-between mx-auto mt-5 w-full sm:w-11/12"
+          class="chart mt-5 sm:mt-0 border border-gray-800 rounded"
-        >
+          use:highcharts={config}
-          <div
-            class="mt-3.5 sm:mt-0 flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"
-          >
-            <div
-              class="h-full transform -translate-x-1/2"
-              aria-hidden="true"
         ></div>
-            <div
-              class="w-3 h-3 bg-[#fff] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2"
-              aria-hidden="true"
-            ></div>
-            <span
-              class="mt-2 sm:mt-0 text-white text-center sm:text-start text-xs sm:text-md inline-block"
-            >
-              Price
-            </span>
-          </div>
-          <div
-            class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"
-          >
-            <div
-              class="h-full transform -translate-x-1/2"
-              aria-hidden="true"
-            ></div>
-            <div
-              class="w-3 h-3 bg-[#E11D48] border-4 box-content border-[#27272A] 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-md sm:font-medium inline-block"
-            >
-              Share Quantity
-            </span>
-          </div>
-        </div>
 
         <div
           class="mt-5 flex flex-col sm:flex-row items-start sm:items-center w-full justify-between sm:border-y border-gray-800 sm:pt-2 sm:pb-2"
@@ -351,6 +322,7 @@
               <tr>
                 <th class="text-white font-semibold text-start text-sm">Date</th
                 >
+                <th class="text-white font-semibold text-end text-sm">Price</th>
                 <th class="text-white font-semibold text-end text-sm"
                   >FTD Shares</th
                 >
@@ -371,6 +343,12 @@
                     {item?.date}
                   </td>
 
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
+                  >
+                    {item?.price}
+                  </td>
+
                   <td
                     class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
                   >

src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+page.svelte

@@ -77,7 +77,7 @@
 
           {#if rawData?.length !== 0}
             <div
-              class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6"
+              class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-4"
             >
               <div
                 class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"