update ftd page

src/lib/components/FailToDeliver.svelte

@@ -5,9 +5,8 @@
     assetType,
     etfTicker,
   } from "$lib/store";
-  import InfoModal from "$lib/components/InfoModal.svelte";
   import { Chart } from "svelte-echarts";
-  import { abbreviateNumber, formatDateRange, monthNames } from "$lib/utils";
+  import { abbreviateNumber, monthNames } from "$lib/utils";
 
   import { init, use } from "echarts/core";
   import { LineChart } from "echarts/charts";
@@ -22,38 +21,76 @@
   let isLoaded = false;
   let optionsData;
   let avgFailToDeliver;
-  let lowestPrice;
-  let highestPrice;
   let weightedFTD;
 
-  function findLowestAndHighestPrice(data, lastDateStr) {
+  let activeIdx = 0;
-    const lastDate = new Date(lastDateStr);
+  const tabs = [
-    const firstDate = new Date(lastDate.getFullYear(), lastDate.getMonth(), 1);
+    {
+      title: "Annual",
+    },
+    {
+      title: "Quarterly",
+    },
+  ];
 
-    const filteredData = data?.filter((item) => {
+  let tableList = rawData?.sort(
-      const currentDate = new Date(item?.date);
+    (a, b) => new Date(b?.date) - new Date(a?.date),
-      return currentDate >= firstDate && currentDate <= lastDate;
+  );
+
+  tableList = filterByPeriod([...tableList], activeIdx);
+
+  function changeTimePeriod(i) {
+    activeIdx = i;
+    tableList = rawData?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
+
+    tableList = filterByPeriod([...tableList], i);
+  }
+
+  function filterByPeriod(data, period) {
+    if (!Array.isArray(data) || data.length === 0) return [];
+
+    if (period === 0) {
+      // Annual: one result per year.
+      const seenYears = new Set();
+      return data.filter((item) => {
+        const dt = new Date(item.date);
+        const year = dt.getFullYear();
+        if (!seenYears.has(year)) {
+          seenYears.add(year);
+          return true;
+        }
+        return false;
       });
+    } else if (period === 1) {
+      // Quarterly: one result per year-quarter.
+      const seenPeriods = new Set();
+      return data.filter((item) => {
+        const dt = new Date(item.date);
+        const year = dt.getFullYear();
+        const quarter = Math.floor(dt.getMonth() / 3) + 1; // Quarter 1 to 4
+        const key = `${year}-Q${quarter}`;
+        if (!seenPeriods.has(key)) {
+          seenPeriods.add(key);
+          return true;
+        }
+        return false;
+      });
+    }
 
-    let prices = filteredData?.map((item) => parseFloat(item.price));
+    return [];
-
-    lowestPrice = Math.min(...prices);
-    highestPrice = Math.max(...prices);
   }
 
   function getPlotOptions() {
     let dates = [];
     let priceList = [];
     let failToDeliverList = [];
-
+    rawData?.sort((a, b) => new Date(a?.date) - new Date(b?.date));
     rawData?.forEach((item) => {
       dates?.push(item?.date);
       priceList?.push(item?.price);
       failToDeliverList?.push(item?.failToDeliver);
     });
 
-    findLowestAndHighestPrice(rawData, rawData?.slice(-1)?.at(0)?.date);
-
     const totalNumber = failToDeliverList?.reduce((acc, item) => acc + item, 0);
     avgFailToDeliver = (totalNumber / failToDeliverList?.length)?.toFixed(0);
 
@@ -188,9 +225,7 @@
 <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">
-      <h1 class="text-2xl text-white font-bold">
+      <h1 class="text-2xl text-white font-bold">FTD Chart</h1>
-        Historical {$stockTicker} Chart
-      </h1>
     </div>
 
     {#if isLoaded}
@@ -250,51 +285,128 @@
           </div>
         </div>
 
-        <h2
+        <div
-          class="mt-10 mr-1 flex flex-row items-center text-white text-xl sm:text-2xl font-bold mb-3"
+          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"
         >
-          Latest Information
+          <h3 class="text-xl sm:text-2xl text-white font-bold mb-2 sm:mb-0">
-        </h2>
+            FTD History
+          </h3>
 
-        <div class="flex justify-start items-center w-full m-auto">
+          <div
-          <table class="w-full bg-table border border-gray-800">
+            class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto"
+          >
+            <div
+              class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1"
+            >
+              {#each tabs as item, i}
+                {#if data?.user?.tier !== "Pro" && i > 0}
+                  <button
+                    on:click={() => goto("/pricing")}
+                    class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
+                  >
+                    <span class="relative text-sm block font-semibold">
+                      {item.title}
+                      <svg
+                        class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        ><path
+                          fill="#A3A3A3"
+                          d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                        /></svg
+                      >
+                    </span>
+                  </button>
+                {:else}
+                  <button
+                    on:click={() => changeTimePeriod(i)}
+                    class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
+                    i
+                      ? 'z-0'
+                      : ''} "
+                  >
+                    {#if activeIdx === i}
+                      <div class="absolute inset-0 rounded-md bg-[#fff]"></div>
+                    {/if}
+                    <span
+                      class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
+                      i
+                        ? 'text-black'
+                        : 'text-white'}"
+                    >
+                      {item.title}
+                    </span>
+                  </button>
+                {/if}
+              {/each}
+            </div>
+          </div>
+        </div>
+
+        <div class="w-full overflow-x-scroll">
+          <table
+            class="table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md w-full m-auto mt-4"
+          >
+            <thead class="bg-default">
+              <tr>
+                <th class="text-white font-semibold text-start text-sm">Date</th
+                >
+                <th class="text-white font-semibold text-end text-sm"
+                  >FTD Shares</th
+                >
+                <th class="text-white font-semibold text-end text-sm"
+                  >% Change</th
+                >
+              </tr>
+            </thead>
             <tbody>
-              <tr class="border-y border-gray-800 odd:bg-odd">
+              {#each tableList as item, index}
-                <td
+                <!-- row -->
-                  class="px-[5px] py-1.5 xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
+                <tr
+                  class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800"
                 >
-                  <span>Date</span>
+                  <td
+                    class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap"
+                  >
+                    {item?.date}
                   </td>
+
                   <td
-                  class="px-[5px] py-1.5 text-right whitespace-nowrap font-medium xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
+                    class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
                   >
-                  {formatDateRange(rawData?.slice(-1)?.at(0)?.date)}
+                    {abbreviateNumber(item?.failToDeliver)}
-                </td>
+                  </td>
-              </tr>
+
-              <tr class="border-y border-gray-800 odd:bg-odd">
+                  <td
-                <td
+                    class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end"
-                  class="px-[5px] py-1.5 xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
+                  >
-                >
+                    {#if index === tableList?.length - 1}
-                  <span>Price Range</span>
+                      n/a
-                </td>
+                    {:else if item?.failToDeliver > tableList[index + 1]?.failToDeliver}
-                <td
+                      <span class="text-[#00FC50]">
-                  class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
+                        +{(
-                >
+                          ((item?.failToDeliver -
-                  {lowestPrice + "-" + highestPrice}
+                            tableList[index + 1]?.failToDeliver) /
-                </td>
+                            tableList[index + 1]?.failToDeliver) *
-              </tr>
+                          100
-              <tr class="border-y border-gray-800 odd:bg-odd">
+                        )?.toFixed(2)}%
-                <td
+                      </span>
-                  class="px-[5px] py-1.5 xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
+                    {:else if item?.failToDeliver < tableList[index + 1]?.failToDeliver}
-                >
+                      <span class="text-[#FF2F1F]">
-                  <span>Latest FTD</span>
+                        -{(
-                </td>
+                          Math.abs(
-                <td
+                            (item?.failToDeliver -
-                  class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
+                              tableList[index + 1]?.failToDeliver) /
-                >
+                              tableList[index + 1]?.failToDeliver,
-                  {abbreviateNumber(rawData?.slice(-1)?.at(0)?.failToDeliver)}
+                          ) * 100
+                        )?.toFixed(2)}%
+                      </span>
+                    {:else}
+                      n/a
+                    {/if}
                   </td>
                 </tr>
+              {/each}
             </tbody>
           </table>
         </div>

src/routes/affiliate-program/+page.svelte

@@ -25,7 +25,7 @@
             "name": "How much can I earn?",
             "acceptedAnswer": {
               "@type": "Answer",
-              "text": "You can earn up to $18.00 commission on every referral that results in a successful sale. There's no limit to how much you can make by promoting us."
+              "text": "You can earn up to $24.00 commission on every referral that results in a successful sale. There's no limit to how much you can make by promoting us."
             }
           },
           {
@@ -184,7 +184,7 @@
             </p>
           </dt>
           <dd class="ml-16 mt-2">
-            You can earn up to <strong>$18.00</strong> commission on every referral
+            You can earn up to <strong>$24.00</strong> commission on every referral
             that results in a successful sale. There's no limit to how much you can
             make by promoting us.
           </dd>

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

@@ -1,10 +1,6 @@
 <script lang="ts">
-  import {
+  import { displayCompanyName, stockTicker } from "$lib/store";
-    numberOfUnreadNotification,
+  import { abbreviateNumber, removeCompanyStrings } from "$lib/utils";
-    displayCompanyName,
-    stockTicker,
-  } from "$lib/store";
-  import { abbreviateNumber } from "$lib/utils";
   import Infobox from "$lib/components/Infobox.svelte";
   import FailToDeliver from "$lib/components/FailToDeliver.svelte";
   import SEO from "$lib/components/SEO.svelte";
@@ -75,7 +71,7 @@
         <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
           <div class="mb-3">
             <h1 class="text-xl sm:text-2xl text-white font-bold">
-              Fail-to-Deliver (FTD)
+              {removeCompanyStrings($displayCompanyName)} Fail-to-Deliver
             </h1>
           </div>
 
@@ -88,10 +84,9 @@
               >
                 <div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
                   <span>Total FTD Shares</span>
-                  <span class="ml-1 text-violet-400">●</span>
                 </div>
                 <div class="flex items-baseline">
-                  <span class="text-2xl font-bold text-white">
+                  <span class="text-xl font-bold text-white">
                     {abbreviateNumber(
                       rawData?.slice(-1)?.at(0)?.failToDeliver,
                       false,
@@ -112,10 +107,9 @@
               >
                 <div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
                   <span>FTD / Avg. Volume</span>
-                  <span class="ml-1 text-red-400">●</span>
                 </div>
                 <div class="flex items-baseline">
-                  <span class="text-2xl font-bold text-white"
+                  <span class="text-xl font-bold text-white"
                     >{relativeFTD > 0.01
                       ? relativeFTD + "%"
                       : relativeFTD !== "n/a"
@@ -135,10 +129,9 @@
               >
                 <div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
                   <span>1-Year Change</span>
-                  <span class="ml-1">●</span>
                 </div>
                 <div class="flex items-baseline">
-                  <span class="text-2xl font-bold text-white"
+                  <span class="text-xl font-bold text-white"
                     >{changePercentageYearAgo > 100
                       ? "> 100"
                       : changePercentageYearAgo?.toFixed(1)}%</span