add new list

src/lib/components/Table/Table.svelte

@@ -119,6 +119,7 @@
     { name: "Debt / Equity", rule: "debtEquityRatio", type: "int" },
     { name: "Profit Margin", rule: "netProfitMargin", type: "percent" },
     { name: "FTD Shares", rule: "failToDeliver", type: "int" },
+    { name: "Relative FTD", rule: "relativeFTD", type: "percent" },
     { name: "Interest Income", rule: "interestIncome", type: "int" },
     { name: "Operating Income", rule: "operatingIncome", type: "int" },
     {

src/routes/list/+layout.svelte

@@ -198,6 +198,10 @@
       title: "Biggest U.S. Employers",
       link: "/list/most-employees",
     },
+    {
+      title: "Biggest Companies with Failed-to-Deliver Shares",
+      link: "/list/most-ftd-shares",
+    },
   ];
 
   navigation = [...navigationIndustry, ...navigation];

src/routes/list/+page.svelte

@@ -28,6 +28,11 @@
         >U.S. Companies With The Most Employees</a
       >
     </li>
+    <li>
+      <a class="text-blue-400 sm:hover:text-white" href="/list/most-ftd-shares"
+        >U.S. Companies With The Most Fail-to-Deliver Shares</a
+      >
+    </li>
   </ul>
 </div>
 

src/routes/list/most-ftd-shares/+page.server.ts

@@ -0,0 +1,26 @@
+export const load = async ({ locals, setHeaders }) => {
+
+  const getData = async () => {
+    const { apiKey, apiURL } = locals;
+    const postData = { filterList: 'most-ftd-shares' };
+
+    const response = await fetch(apiURL + "/list-category", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+      body: JSON.stringify(postData),
+    });
+
+    const output = await response.json();
+    setHeaders({ "cache-control": "public, max-age=60*5" });
+
+    return output;
+  };
+
+  // Make sure to return a promise
+  return {
+    getData: await getData(),
+  };
+};

src/routes/list/most-ftd-shares/+page.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+
+  export let data;
+
+  const defaultList = [
+    { name: "Relative FTD", rule: "relativeFTD" },
+    { name: "FTD Shares", rule: "failToDeliver" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+  ];
+</script>
+
+<section class="w-full overflow-hidden m-auto">
+  <div
+    class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5 mb-4"
+  >
+    <svg
+      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      ><path
+        fill="#fff"
+        d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
+      /></svg
+    >
+
+    These are the biggest U.S. companies ranked by failed-to-deliver (FTD)
+    shares, updated daily. 'Relative FTD' compares FTD shares to average trading
+    volume, showing their significance in overall trading.
+  </div>
+
+  <!-- Page wrapper -->
+  <Table {data} rawData={data?.getData} {defaultList} />
+</section>

src/routes/sitemap/+page.svelte

@@ -167,7 +167,7 @@
 </svelte:head>
 
 <section
-  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden pb-20 pt-5 px-4 lg:px-3"
+  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
 >
   <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>