ui fixes

src/lib/components/ShareHolders.svelte

@@ -244,7 +244,7 @@
               maximumFractionDigits: 0,
             }).format(rawData?.investorsHolding)}</span
           >
-          Hedge Funds hold a total of
+          Institutions hold a total of
           <span class="font-semibold"
             >{abbreviateNumber(rawData?.numberOf13Fshares)}</span
           >
@@ -309,7 +309,7 @@
         </h1>
 
         <div class="mt-3 text-white text-md">
-          Hedge Funds are holding {callPercentage > 55
+          Institutions are holding {callPercentage > 55
             ? "more Calls Contracts as Puts Contracts, indicating a bullish sentiment."
             : callPercentage < 45
               ? "more Puts Contracts as Calls Contracts, indicating a bearish sentiment."

src/routes/market-mover/[slug]/+page.svelte

@@ -4,7 +4,7 @@
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
   import InfoModal from "$lib/components/InfoModal.svelte";
-  import DownloadData from "$lib/components/DownloadData.svelte";
+  import Table from "$lib/components/Table/Table.svelte";
 
   import { afterUpdate } from "svelte";
   export let data;
@@ -26,87 +26,26 @@
     "5Y": "5 Year title",
   };
   let rawData = data?.getMarketMover[data?.getParams];
-  let stockList = rawData[timePeriod];
+
+  const excludedRules = new Set([
+    "volume",
+    "price",
+    "changesPercentage",
+    "eps",
+    "marketCap",
+  ]);
+
+  const defaultList = [
+    { name: "Market Cap", rule: "marketCap" },
+    { name: "Price", rule: "price" },
+    { name: "% Change", rule: "changesPercentage" },
+    { name: "Volume", rule: "volume" },
+  ];
 
   function selectTimeInterval(state) {
     timePeriod = state;
-    stockList = rawData[timePeriod];
   }
 
-  let columns = [
-    { key: "rank", label: "Rank", align: "center" },
-    { key: "symbol", label: "Symbol", align: "left" },
-    { key: "name", label: "Name", align: "left" },
-    { key: "changesPercentage", label: "% Change", align: "right" },
-    { key: "price", label: "Price", align: "right" },
-    { key: "marketCap", label: "Market Cap", align: "right" },
-    { key: "volume", label: "Volume", align: "right" },
-  ];
-
-  let sortOrders = {
-    rank: { order: "none", type: "number" },
-    symbol: { order: "none", type: "string" },
-    name: { order: "none", type: "string" },
-    changesPercentage: { order: "none", type: "number" },
-    price: { order: "none", type: "number" },
-    marketCap: { order: "none", type: "number" },
-    volume: { order: "none", type: "number" },
-  };
-
-  const sortData = (key) => {
-    // Reset all other keys to 'none' except the current key
-    for (const k in sortOrders) {
-      if (k !== key) {
-        sortOrders[k].order = "none";
-      }
-    }
-
-    // Cycle through 'none', 'asc', 'desc' for the clicked key
-    const orderCycle = ["none", "asc", "desc"];
-    const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
-    sortOrders[key].order =
-      orderCycle[(currentOrderIndex + 1) % orderCycle.length];
-
-    const sortOrder = sortOrders[key].order;
-
-    // Reset to original data when 'none' and stop further sorting
-    if (sortOrder === "none") {
-      stockList = [...rawData[timePeriod]]; // Reset to original data (spread to avoid mutation)
-      return;
-    }
-
-    // Define a generic comparison function
-    const compareValues = (a, b) => {
-      const { type } = sortOrders[key];
-      let valueA, valueB;
-      switch (type) {
-        case "date":
-          valueA = new Date(a[key]);
-          valueB = new Date(b[key]);
-          break;
-        case "string":
-          valueA = a[key].toUpperCase();
-          valueB = b[key].toUpperCase();
-          return sortOrder === "asc"
-            ? valueA.localeCompare(valueB)
-            : valueB.localeCompare(valueA);
-        case "number":
-        default:
-          valueA = parseFloat(a[key]);
-          valueB = parseFloat(b[key]);
-          break;
-      }
-      if (sortOrder === "asc") {
-        return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
-      } else {
-        return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
-      }
-    };
-
-    // Sort using the generic comparison function
-    stockList = [...rawData[timePeriod]].sort(compareValues);
-  };
-
   let previousTimePeriod;
   let previousPage = data?.getParams;
   let title;
@@ -116,7 +55,6 @@
       previousTimePeriod = timePeriod;
       previousPage = data?.getParams;
       rawData = data?.getMarketMover[data?.getParams];
-      stockList = rawData[timePeriod];
       title =
         data?.getParams?.charAt(0)?.toUpperCase() + data?.getParams?.slice(1);
     }
@@ -249,95 +187,15 @@
                 <span class="hidden lg:inline">Updated</span>
                 {lastTradingDay}
               </div>
-
+            </div>
-              <div
+          </div>
-                class="flex flex-row items-center justify-end w-fit sm:w-[50%] md:w-auto ml-auto"
+          <Table
-              >
-                <DownloadData
             {data}
             rawData={rawData[timePeriod]}
-                  title={data?.getParams + "_" + timePeriod ?? "data"}
+            {excludedRules}
+            {defaultList}
           />
         </div>
-            </div>
-          </div>
-
-          <div class="w-full overflow-x-scroll no-scrollbar">
-            <table
-              class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]"
-            >
-              <thead>
-                <TableHeader {columns} {sortOrders} {sortData} />
-              </thead>
-              <tbody>
-                {#each stockList as item}
-                  <tr
-                    class="border-b border-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A]"
-                  >
-                    <td
-                      class="text-white text-sm sm:text-[1rem] text-center border-b-[#09090B]"
-                    >
-                      {item?.rank}
-                    </td>
-
-                    <td
-                      class="border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap"
-                    >
-                      <HoverStockChart symbol={item?.symbol} />
-                    </td>
-                    <td
-                      class="border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                    >
-                      {item?.name?.length > charNumber
-                        ? item?.name?.slice(0, charNumber) + "..."
-                        : item?.name}
-                    </td>
-
-                    <td
-                      class="text-white text-end text-sm sm:text-[1rem] font-medium border-b-[#09090B]"
-                    >
-                      {#if item?.changesPercentage >= 0}
-                        <span class="text-[#00FC50]"
-                          >+{item?.changesPercentage >= 1000
-                            ? abbreviateNumber(item?.changesPercentage)
-                            : item?.changesPercentage?.toFixed(2)}%</span
-                        >
-                      {:else}
-                        <span class="text-[#FF2F1F]"
-                          >{item?.changesPercentage <= -1000
-                            ? abbreviateNumber(item?.changesPercentage)
-                            : item?.changesPercentage?.toFixed(2)}%
-                        </span>
-                      {/if}
-                    </td>
-
-                    <td
-                      class="text-white text-sm sm:text-[1rem] text-end border-b-[#09090B]"
-                    >
-                      {item?.price?.toFixed(2)}
-                    </td>
-
-                    <td
-                      class="text-white text-sm sm:text-[1rem] border-b-[#09090B] text-end"
-                    >
-                      {item?.marketCap !== null
-                        ? abbreviateNumber(item?.marketCap)
-                        : "-"}
-                    </td>
-
-                    <td
-                      class="text-white text-sm sm:text-[1rem] border-b-[#09090B] text-end"
-                    >
-                      {item?.volume !== null
-                        ? abbreviateNumber(item?.volume)
-                        : "-"}
-                    </td>
-                  </tr>
-                {/each}
-              </tbody>
-            </table>
-          </div>
-        </div>
       </main>
     </div>
   </div>

src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte

@@ -17,6 +17,26 @@
 
   let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
 
+  function getAbbreviatedName(fullName) {
+    if (fullName === null) {
+      return "-";
+    }
+
+    const names = fullName?.split(" ");
+    let firstName = names[0];
+    // Remove any title prefix (e.g. Dr., Mr., Mrs., Ms.)
+    if (names.length > 1 && /^(Dr|Mr|Mrs|Ms)\.?$/i.test(names[0])) {
+      firstName = names[1];
+      names?.splice(0, 1);
+    }
+    const initials = names
+      ?.slice(0, -1)
+      ?.map((name) => name?.charAt(0))
+      ?.join(". ");
+    const lastName = names[names?.length - 1];
+    return `${firstName?.charAt(0)}. ${lastName}`;
+  }
+
   function backToTop() {
     window.scrollTo({
       top: 0,
@@ -308,7 +328,7 @@
                         >
                           <div class="flex flex-row items-center">
                             <div
-                              class="flex-shrink-0 rounded-full border border-slate-700 w-10 h-10 sm:w-12 sm:h-12 relative {item?.party ===
+                              class="flex-shrink-0 rounded-full border border-slate-700 w-9 h-9 relative {item?.party ===
                               'Republican'
                                 ? 'bg-[#98272B]'
                                 : item?.party === 'Democratic'
@@ -317,18 +337,20 @@
                             >
                               <img
                                 style="clip-path: circle(50%);"
-                                class="avatar rounded-full w-7 sm:w-9"
+                                class="rounded-full w-7"
                                 src={`${cloudFrontUrl}/assets/senator/${item?.representative?.replace(/\s+/g, "_")}.png`}
                                 loading="lazy"
                               />
                             </div>
-                            <div class="flex flex-col ml-3">
+                            <div class="flex flex-col ml-3 font-normal">
                               <a
                                 href={`/politicians/${item?.id}`}
                                 class="sm:hover:text-white text-blue-400"
-                                >{item?.representative?.replace("_", " ")}</a
+                                >{getAbbreviatedName(
+                                  item?.representative?.replace("_", " "),
+                                )}</a
                               >
-                              <span class="">{item?.party}</span>
+                              <span class="text-gray-300">{item?.party}</span>
                             </div>
                           </div>
                           <!--{item?.firstName} {item?.lastName}-->