update ftd chart

src/lib/components/FailToDeliver.svelte

@@ -17,7 +17,6 @@
 
   let config = null;
 
-  let isLoaded = false;
   let avgFailToDeliver;
   let weightedFTD;
 
@@ -85,7 +84,7 @@
     rawData?.sort((a, b) => new Date(a?.date) - new Date(b?.date));
     rawData?.forEach((item) => {
       dates?.push(item?.date);
-      priceList?.push(item?.price);
+      priceList?.push(Number(item?.price));
       failToDeliverList?.push(item?.failToDeliver);
     });
 
@@ -150,7 +149,6 @@
           })}</span> <br> <span class="text-black font-normal text-sm">${abbreviateNumber(this.y)}</span>`;
         },
       },
-
       xAxis: {
         categories: dates,
         labels: {
@@ -167,12 +165,15 @@
       },
       yAxis: [
         {
+          gridLineWidth: 1,
+          gridLineColor: "#111827",
           labels: {
             enabled: false,
           },
           title: {
             text: null,
           },
+          opposite: true,
         },
         {
           gridLineWidth: 1,
@@ -219,7 +220,6 @@
   $: {
     const ticker = $assetType === "stock" ? $stockTicker : $etfTicker;
     if (ticker) {
-      isLoaded = false;
       if (rawData?.length > 0) {
         weightedFTD = (
           (rawData?.slice(-1)?.at(0)?.failToDeliver /
@@ -228,7 +228,6 @@
         )?.toFixed(2);
         config = getPlotOptions();
       }
-      isLoaded = true;
     }
   }
 </script>
@@ -239,12 +238,10 @@
       <h1 class="text-xl sm:text-2xl text-white font-bold">FTD Chart</h1>
     </div>
 
-    {#if isLoaded}
     {#if rawData?.length !== 0}
       <div class="w-full flex flex-col items-start">
         <div class="text-white text-[1rem] mt-2 mb-2 w-full">
-            Over the past year, {$displayCompanyName} has seen a monthly average
+          Over the past year, {$displayCompanyName} has seen a monthly average of
-            of
           <span class="font-semibold"
             >{avgFailToDeliver?.toLocaleString("en-US")}
           </span> fail to deliver shares.
@@ -320,14 +317,12 @@
         >
           <thead class="bg-default">
             <tr>
-                <th class="text-white font-semibold text-start text-sm">Date</th
+              <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
               >
-                <th class="text-white font-semibold text-end text-sm"
+              <th class="text-white font-semibold text-end text-sm">% Change</th
-                  >% Change</th
               >
             </tr>
           </thead>
@@ -389,18 +384,6 @@
         </table>
       </div>
     {/if}
-    {: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-gray-400"
-            ></span>
-          </label>
-        </div>
-      </div>
-    {/if}
   </main>
 </section>
 

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

@@ -19,19 +19,19 @@
       : "n/a";
 
   function computeYearOverYearChange(rawData) {
-    if (rawData.length < 2) {
+    if (rawData?.length < 2) {
       return null; // Not enough rawData to compute change
     }
 
     // Step 1: Get the last entry in the list
-    const lastEntry = rawData[rawData.length - 1];
+    const lastEntry = rawData[rawData?.length - 1];
-    const lastDate = new Date(lastEntry.date);
+    const lastDate = new Date(lastEntry?.date);
-    const lastValue = rawData?.slice(-1)?.at(0).failToDeliver;
+    const lastValue = rawData?.slice(-1)?.at(0)?.failToDeliver;
 
     // Step 2: Find the entry closest to one year before the last date
     let closestEntry = null;
     for (let i = rawData.length - 2; i >= 0; i--) {
-      const entryDate = new Date(rawData[i].date);
+      const entryDate = new Date(rawData[i]?.date);
       const oneYearAgo = new Date(lastDate);
       oneYearAgo.setFullYear(lastDate.getFullYear() - 1);