From 7da1500963d9b537a1d7822b3693b3d4421ffc67 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Wed, 4 Dec 2024 21:22:08 +0100
Subject: [PATCH] ui fixes

---
 src/lib/components/Table/Table.svelte         |   9 +-
 src/routes/+layout.svelte                     |  17 --
 src/routes/list/+layout.svelte                |   4 +
 src/routes/list/+page.svelte                  |   6 +
 .../list/most-shorted-stocks/+page.server.ts  |  26 +++
 .../list/most-shorted-stocks/+page.svelte     |  45 +++++
 .../list/overbought-stocks/+page.svelte       |  17 +-
 src/routes/list/oversold-stocks/+page.svelte  |  17 +-
 .../most-shorted-stocks/+page.server.ts       |  25 ---
 src/routes/most-shorted-stocks/+page.svelte   | 168 ------------------
 10 files changed, 118 insertions(+), 216 deletions(-)
 create mode 100644 src/routes/list/most-shorted-stocks/+page.server.ts
 create mode 100644 src/routes/list/most-shorted-stocks/+page.svelte
 delete mode 100644 src/routes/most-shorted-stocks/+page.server.ts
 delete mode 100644 src/routes/most-shorted-stocks/+page.svelte

diff --git a/src/lib/components/Table/Table.svelte b/src/lib/components/Table/Table.svelte
index 0b82a94d..d1e9a302 100644
--- a/src/lib/components/Table/Table.svelte
+++ b/src/lib/components/Table/Table.svelte
@@ -35,7 +35,7 @@
 
   export let hideLastRow = false;
   let originalData = [...rawData]; // Unaltered copy of raw data
-  let ruleOfList = defaultList;
+  let ruleOfList = [...defaultList];
   let socket;
 
   const defaultRules = defaultList?.map((item) => item?.rule);
@@ -105,6 +105,7 @@
     { name: "Altman-Z-Score", rule: "altmanZScore", type: "float" },
     { name: "Piotroski F-Score", rule: "piotroskiScore", type: "float" },
     { name: "Total Liabilities", rule: "totalLiabilities", type: "int" },
+    { name: "RSI", rule: "rsi", type: "float" },
     { name: "Short Ratio", rule: "shortRatio", type: "int" },
     { name: "Short Interest", rule: "sharesShort", type: "int" },
     { name: "Short % Float", rule: "shortFloatPercent", type: "percent" },
@@ -150,7 +151,8 @@
       ?.map((item) => item?.name), // Map the remaining items to their names
   );
 
-  checkedItems = new Set(ruleOfList.map((item) => item.name));
+  checkedItems = new Set(ruleOfList?.map((item) => item.name));
+
   allRows = sortIndicatorCheckMarks(allRows);
   const handleDownloadMessage = (event) => {
     let updateData = event?.data?.rawData ?? []; // Use a new variable for updated data
@@ -168,7 +170,7 @@
         Object.assign(newData, updateData[i]);
 
         // Merge fields from defaultRules that are missing in updateData
-        defaultRules.forEach((rule) => {
+        defaultRules?.forEach((rule) => {
           if (!(rule in updateData[i]) && rule in rawData[i]) {
             newData[rule] = rawData[i][rule];
           }
@@ -494,7 +496,6 @@
       score: "AI Score",
       researchAndDevelopmentExpenses: "R&D",
       counter: "Ratings Count",
-      rsi: "RSI",
       // Add more key-label mappings here as needed
     };
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e467befb..937aee5c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -325,18 +325,6 @@
                             >
                           </Button>
 
-                          <Button
-                            builders={[builder]}
-                            type="submit"
-                            class="w-full bg-[#141417] hover:bg-[#141417]"
-                          >
-                            <a
-                              href="/most-shorted-stocks"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-4"
-                              >Top Shorted Stocks</a
-                            >
-                          </Button>
-
                           <Button
                             builders={[builder]}
                             type="submit"
@@ -928,11 +916,6 @@
                             >Top Analyst Stocks</a
                           >
 
-                          <a
-                            href="/most-shorted-stocks"
-                            class="text-[1rem] text-white ml-4 mt-4"
-                            >Top Shorted Stocks</a
-                          >
                           <a
                             href="/industry"
                             class="text-[1rem] text-white ml-4 mt-4"
diff --git a/src/routes/list/+layout.svelte b/src/routes/list/+layout.svelte
index b1b72dc6..8b93b43e 100644
--- a/src/routes/list/+layout.svelte
+++ b/src/routes/list/+layout.svelte
@@ -202,6 +202,10 @@
       title: "Biggest Companies with Failed-to-Deliver Shares",
       link: "/list/most-ftd-shares",
     },
+    {
+      title: "Most Shorted Stocks",
+      link: "/list/most-shorted-stocks",
+    },
   ];
 
   navigation = [...navigationIndustry, ...navigation];
diff --git a/src/routes/list/+page.svelte b/src/routes/list/+page.svelte
index e0391c80..6c67854b 100644
--- a/src/routes/list/+page.svelte
+++ b/src/routes/list/+page.svelte
@@ -166,6 +166,12 @@
         >Penny Stocks</a
       >
     </li>
+    <li>
+      <a
+        class="text-blue-400 sm:hover:text-white"
+        href="/list/most-shorted-stocks">Most Shorted Stocks</a
+      >
+    </li>
     <li>
       <a class="text-blue-400 sm:hover:text-white" href="/list/oversold-stocks/"
         >Oversold Stocks</a
diff --git a/src/routes/list/most-shorted-stocks/+page.server.ts b/src/routes/list/most-shorted-stocks/+page.server.ts
new file mode 100644
index 00000000..f86ac27f
--- /dev/null
+++ b/src/routes/list/most-shorted-stocks/+page.server.ts
@@ -0,0 +1,26 @@
+export const load = async ({ locals, setHeaders }) => {
+
+  const getStocks = async () => {
+    const { apiKey, apiURL } = locals;
+    const postData = { filterList: 'most-shorted-stocks' };
+
+    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(),
+  };
+};
diff --git a/src/routes/list/most-shorted-stocks/+page.svelte b/src/routes/list/most-shorted-stocks/+page.svelte
new file mode 100644
index 00000000..ec08fec9
--- /dev/null
+++ b/src/routes/list/most-shorted-stocks/+page.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import Table from "$lib/components/Table/Table.svelte";
+
+  export let data;
+
+  const defaultList = [
+    { name: "Short % Float", rule: "shortFloatPercent" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Market Cap", rule: "marketCap" },
+  ];
+
+  const excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "revenue",
+    "eps",
+    "marketCap",
+    "shortFloatPercent",
+  ]);
+</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
+    >
+
+    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.
+  </div>
+
+  <!-- Page wrapper -->
+  <Table {data} rawData={data?.getStocks} {excludedRules} {defaultList} />
+</section>
diff --git a/src/routes/list/overbought-stocks/+page.svelte b/src/routes/list/overbought-stocks/+page.svelte
index 1306434a..afc63ece 100644
--- a/src/routes/list/overbought-stocks/+page.svelte
+++ b/src/routes/list/overbought-stocks/+page.svelte
@@ -9,6 +9,16 @@
     { name: "% Change", rule: "changesPercentage" },
     { name: "Market Cap", rule: "marketCap" },
   ];
+
+  const excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "revenue",
+    "eps",
+    "marketCap",
+    "rsi",
+  ]);
 </script>
 
 <section class="w-full overflow-hidden m-auto">
@@ -32,5 +42,10 @@
   </div>
 
   <!-- Page wrapper -->
-  <Table {data} rawData={data?.getOverBoughtStocks} {defaultList} />
+  <Table
+    {data}
+    rawData={data?.getOverBoughtStocks}
+    {excludedRules}
+    {defaultList}
+  />
 </section>
diff --git a/src/routes/list/oversold-stocks/+page.svelte b/src/routes/list/oversold-stocks/+page.svelte
index 01084f02..f2a1f67e 100644
--- a/src/routes/list/oversold-stocks/+page.svelte
+++ b/src/routes/list/oversold-stocks/+page.svelte
@@ -9,6 +9,16 @@
     { name: "% Change", rule: "changesPercentage" },
     { name: "Market Cap", rule: "marketCap" },
   ];
+
+  const excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "revenue",
+    "eps",
+    "marketCap",
+    "rsi",
+  ]);
 </script>
 
 <section class="w-full overflow-hidden m-auto">
@@ -33,5 +43,10 @@
   </div>
 
   <!-- Page wrapper -->
-  <Table {data} rawData={data?.getOverSoldStocks} {defaultList} />
+  <Table
+    {data}
+    rawData={data?.getOverSoldStocks}
+    {excludedRules}
+    {defaultList}
+  />
 </section>
diff --git a/src/routes/most-shorted-stocks/+page.server.ts b/src/routes/most-shorted-stocks/+page.server.ts
deleted file mode 100644
index efd6e233..00000000
--- a/src/routes/most-shorted-stocks/+page.server.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export const load = async ({ locals, setHeaders }) => {
-  const getMostShortedStocks = async () => {
-    const { apiKey, apiURL, user } = locals;
-
-    const response = await fetch(apiURL + "/most-shorted-stocks", {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-        "X-API-KEY": apiKey,
-      },
-    });
-
-    let output = await response.json();
-    output = user?.tier !== "Pro" ? output?.reverse()?.slice(0, 6) : output;
-
-    setHeaders({ "cache-control": "public, max-age=3000" });
-
-    return output;
-  };
-
-  // Make sure to return a promise
-  return {
-    getMostShortedStocks: await getMostShortedStocks(),
-  };
-};
diff --git a/src/routes/most-shorted-stocks/+page.svelte b/src/routes/most-shorted-stocks/+page.svelte
deleted file mode 100644
index 687c7c5c..00000000
--- a/src/routes/most-shorted-stocks/+page.svelte
+++ /dev/null
@@ -1,168 +0,0 @@
-<script lang="ts">
-  import { numberOfUnreadNotification } from "$lib/store";
-  import Table from "$lib/components/Table/Table.svelte";
-  import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
-  import ArrowLogo from "lucide-svelte/icons/move-up-right";
-  export let data;
-
-  const excludedRules = new Set([
-    "volume",
-    "price",
-    "shortRatio",
-    "sharesShort",
-    "shortOutStandingPercent",
-    "shortFloatPercent",
-    "changesPercentage",
-  ]);
-
-  const defaultList = [
-    { name: "Short Ratio", rule: "shortRatio" },
-    { name: "Short Interest", rule: "sharesShort" },
-    { name: "Short % Shares", rule: "shortOutStandingPercent" },
-    { name: "Short % Float", rule: "shortFloatPercent" },
-  ];
-  const hideLastRow = true;
-</script>
-
-<svelte:head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} High
-    Short Interest Stocks · stocknear
-  </title>
-  <meta
-    name="description"
-    content={`Short interest, stock short squeeze, short interest ratio & short selling data positions for NASDAQ, NYSE & AMEX stocks to find shorts in the stock market.`}
-  />
-
-  <!-- Other meta tags -->
-  <meta
-    property="og:title"
-    content={`High Short Interest Stocks · stocknear`}
-  />
-  <meta
-    property="og:description"
-    content={`Short interest, stock short squeeze, short interest ratio & short selling data positions for NASDAQ, NYSE & AMEX stocks to find shorts in the stock market.`}
-  />
-  <meta property="og:type" content="website" />
-  <!-- Add more Open Graph meta tags as needed -->
-
-  <!-- Twitter specific meta tags -->
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta
-    name="twitter:title"
-    content={`High Short Interest Stocks · stocknear`}
-  />
-  <meta
-    name="twitter:description"
-    content={`Short interest, stock short squeeze, short interest ratio & short selling data positions for NASDAQ, NYSE & AMEX stocks to find shorts in the stock market.`}
-  />
-  <!-- Add more Twitter meta tags as needed -->
-</svelte:head>
-
-<section
-  class="w-full 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>
-      <li><a href="/" class="text-gray-300">Home</a></li>
-      <li class="text-gray-300">Top Shorted Stocks</li>
-    </ul>
-  </div>
-
-  <div class="w-full overflow-hidden m-auto mt-5">
-    <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
-      <div
-        class="relative flex justify-center items-start overflow-hidden w-full"
-      >
-        <main class="w-full lg:w-3/4 lg:pr-5">
-          <div class="mb-6 border-b-[3px]">
-            <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
-              Top Shorted Stocks
-            </h1>
-            <p class="mb-3 px-1 text-base font-semibold text-muted sm:px-0">
-              High short-interest stocks are volatile and prone to short
-              squeezes.
-            </p>
-          </div>
-
-          <div class="w-full m-auto mt-20 sm:mt-10">
-            <Table
-              {data}
-              rawData={data?.getMostShortedStocks}
-              {excludedRules}
-              {defaultList}
-              {hideLastRow}
-            />
-          </div>
-
-          <UpgradeToPro
-            {data}
-            title="Get stock forecasts from Wall Street's highest rated professionals"
-          />
-        </main>
-        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
-          {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
-            <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
-            >
-              <a
-                href={"/pricing"}
-                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-              >
-                <div class="w-full flex justify-between items-center p-3 mt-3">
-                  <h2 class="text-start text-xl font-semibold text-white ml-3">
-                    Pro Subscription
-                  </h2>
-                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-                </div>
-                <span class="text-white p-3 ml-3 mr-3">
-                  Upgrade now for unlimited access to all data and tools
-                </span>
-              </a>
-            </div>
-          {/if}
-
-          <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
-          >
-            <a
-              href={"/analysts"}
-              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-            >
-              <div class="w-full flex justify-between items-center p-3 mt-3">
-                <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Top Analyst
-                </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-              </div>
-              <span class="text-white p-3 ml-3 mr-3">
-                Get the latest top Wall Street analyst ratings
-              </span>
-            </a>
-          </div>
-
-          <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
-          >
-            <a
-              href={"/analysts/top-stocks"}
-              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-            >
-              <div class="w-full flex justify-between items-center p-3 mt-3">
-                <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Top Stocks Picks
-                </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-              </div>
-              <span class="text-white p-3 ml-3 mr-3">
-                Get the latest top Wall Street analyst ratings.
-              </span>
-            </a>
-          </div>
-        </aside>
-      </div>
-    </div>
-  </div>
-</section>