add hottest contracts list

src/lib/components/Table/Table.svelte

@@ -158,6 +158,7 @@
       rule: "topAnalystUpside",
       type: "percentSign",
     },
+    { name: "Change OI", rule: "changeOI", type: "decimal" },
   ];
 
   allRows = [...allRows, ...specificRows];

src/routes/list/+layout.svelte

@@ -206,6 +206,10 @@
       title: "Most Shorted Stocks",
       link: "/list/most-shorted-stocks",
     },
+    {
+      title: "Hottest Options Contracts",
+      link: "/list/hottest-contracts",
+    },
   ];
 
   navigation = [...navigationIndustry, ...navigation];

src/routes/list/+page.svelte

@@ -30,7 +30,13 @@
     </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
+        >U.S. Companies With The Most FTD Shares</a
+      >
+    </li>
+    <li>
+      <a
+        class="text-blue-400 sm:hover:text-white"
+        href="/list/hottest-contracts">U.S. Companies with Highest OI Change</a
       >
     </li>
   </ul>
@@ -184,6 +190,7 @@
         href="/list/overbought-stocks/">Overbought Stocks</a
       >
     </li>
+
     <li>
       <a class="text-blue-400 sm:hover:text-white" href="/list/reit-stocks"
         >All REITs</a

src/routes/list/hottest-contracts/+page.server.ts

@@ -0,0 +1,26 @@
+export const load = async ({ locals, setHeaders }) => {
+
+  const getStocks = async () => {
+    const { apiKey, apiURL } = locals;
+    const postData = { filterList: 'hottest-contracts' };
+
+    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 {
+    getStocks: await getStocks(),
+  };
+};

src/routes/list/hottest-contracts/+page.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
+
+  export let data;
+
+  const defaultList = [
+    { name: "Change OI", rule: "changeOI" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Market Cap", rule: "marketCap" },
+  ];
+
+  const excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "revenue",
+    "eps",
+    "marketCap",
+    "changeOI",
+  ]);
+</script>
+
+<section class="w-full overflow-hidden m-auto">
+  <Infobox
+    text="A list of the stocks with the highest number of shares shorted relative to
+    the stock's float. Float is the amount of shares that are considered
+    available for trading."
+  />
+
+  <!-- Page wrapper -->
+  <Table {data} rawData={data?.getStocks} {excludedRules} {defaultList} />
+</section>