add shareholder back

src/lib/components/ShareHolders.svelte

@@ -1,22 +1,22 @@
-<script lang='ts'>
+<script lang="ts">
-
+  import { Chart } from "svelte-echarts";
-import { Chart } from 'svelte-echarts'
+  import { displayCompanyName, stockTicker } from "$lib/store";
-import { shareholderComponent, stockTicker, getCache, setCache, displayCompanyName} from '$lib/store';
+  import { formatString } from "$lib/utils";
-import { formatString } from '$lib/utils';
+  import { abbreviateNumber } from "$lib/utils";
-import { abbreviateNumber } from '$lib/utils';
+  import { onMount } from "svelte";
-import InfoModal from '$lib/components/InfoModal.svelte';
+  import { init, use } from "echarts/core";
-
+  import { PieChart } from "echarts/charts";
-import { init, use } from 'echarts/core'
+  import { GridComponent } from "echarts/components";
-import { PieChart } from 'echarts/charts'
+  import { CanvasRenderer } from "echarts/renderers";
-import { GridComponent } from 'echarts/components'
+  import TableHeader from "$lib/components/Table/TableHeader.svelte";
-import { CanvasRenderer } from 'echarts/renderers'
+  import DownloadData from "$lib/components/DownloadData.svelte";
-
+  import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
-use([PieChart, GridComponent, CanvasRenderer])
 
+  use([PieChart, GridComponent, CanvasRenderer]);
 
   export let data;
-let isLoaded = false;
 
+  let rawData = data?.getShareholderData || {};
 
   let callPercentage;
   let putPercentage;
@@ -24,116 +24,76 @@ let totalCalls;
   let totalPuts;
   let putCallRatio;
 
-
+  let shareholderList = rawData?.shareholders;
-let rawData = {};
+  let displayList = shareholderList?.slice(0, 50);
-let shareholderList = []
   let optionsPieChart;
   let institutionalOwner = 0;
   let otherOwner = 0;
   let topHolders = 0;
-let showFullStats = false;
-
-
 
   const plotPieChart = () => {
     if (rawData?.ownershipPercent !== undefined) {
-    shareholderList = shareholderList?.filter(item => item?.ownership <= 100);
+      shareholderList = shareholderList?.filter(
+        (item) => item?.ownership <= 100,
+      );
       topHolders = 0;
       otherOwner = 0;
-    institutionalOwner = rawData?.ownershipPercent > 100 ? 99.99 : rawData?.ownershipPercent;
+      institutionalOwner =
+        rawData?.ownershipPercent > 100 ? 99.99 : rawData?.ownershipPercent;
 
-    otherOwner = institutionalOwner === 0 ? 0 : (100-institutionalOwner);
+      otherOwner = institutionalOwner === 0 ? 0 : 100 - institutionalOwner;
-    topHolders = shareholderList?.slice(0,10)?.reduce((total, shareholder) => total + shareholder?.ownership, 0);
+      topHolders = shareholderList
+        ?.slice(0, 10)
+        ?.reduce((total, shareholder) => total + shareholder?.ownership, 0);
 
       const options = {
         animation: false,
         grid: {
-        left: '0%',
+          left: "0%",
-        right: '0%',
+          right: "0%",
-        top: '0%',
+          top: "0%",
-        bottom: '10%',
+          bottom: "10%",
           containLabel: true,
         },
         series: [
           {
-        name: 'Shareholders',
+            name: "Shareholders",
-        type: 'pie',
+            type: "pie",
-        radius: ['40%', '50%'],
+            radius: ["40%", "50%"],
             padAngle: 5,
             itemStyle: {
-        borderRadius: 3
+              borderRadius: 3,
             },
             label: {
               show: false,
-            position: 'center',
+              position: "center",
             },
             silent: true, // Disable interactivity
             data: [
-            { value: institutionalOwner, name: 'Institutions', itemStyle: { color: '#5470C6' } }, // Set color for 'Institutions'
+              {
-            { value: otherOwner, name: 'Others', itemStyle: {color: '#F8901E'} },
+                value: institutionalOwner,
-        ]
+                name: "Institutions",
-        }
+                itemStyle: { color: "#3F83F8" },
+              }, // Set color for 'Institutions'
+              {
+                value: otherOwner,
+                name: "Others",
+                itemStyle: { color: "#fff" },
+              },
+            ],
+          },
         ],
-
       };
 
-
-
       return options;
     } else return null;
-    
-}
-
-const getShareholders = async (ticker) => {
-    // Get cached data for the specific tickerID
-    const cachedData = getCache(ticker, 'getShareholders');
-    if (cachedData) {
-      rawData = cachedData;
-    } else {
-
-      const postData = {'ticker': ticker, path: 'shareholders'};
-      // make the POST request to the endpoint
-      const response = await fetch('/api/ticker-data', {
-        method: 'POST',
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify(postData)
-      });
-
-      rawData = await response.json();
-
-      // Cache the data for this specific tickerID with a specific name 'getShareholders'
-      setCache(ticker, rawData, 'getShareholders');
-    }
-    if(Object?.keys(rawData)?.length !== 0 && rawData?.shareholders?.length > 1) {
-        $shareholderComponent = true
-        
-    }
-    else {
-        $shareholderComponent = false;
-    }
   };
 
-
+  totalCalls = rawData?.totalCalls ?? 0;
-$: {
-    if($stockTicker && typeof window !== 'undefined') 
-    {   
-
-        isLoaded = false;
-        showFullStats = false;
-
-        const asyncFunctions = [
-        getShareholders($stockTicker)
-        ];
-        Promise.all(asyncFunctions)
-            .then((results) => {
-                shareholderList = rawData?.shareholders
-                totalCalls = rawData?.totalCalls ?? 0
   totalPuts = rawData?.totalPuts ?? 0;
   if (totalCalls + totalPuts !== 0) {
-                  callPercentage = 100*totalCalls/(totalCalls+totalPuts);
+    callPercentage = (100 * totalCalls) / (totalCalls + totalPuts);
-                  putPercentage = (100- callPercentage)
+    putPercentage = 100 - callPercentage;
     putCallRatio = rawData?.putCallRatio;
   } else {
     callPercentage = 0;
@@ -141,49 +101,157 @@ $: {
     putCallRatio = 0;
   }
 
-
+  optionsPieChart = plotPieChart();
-                optionsPieChart = plotPieChart()
-            })
-            .catch((error) => {
-                console.error('An error occurred:', error);
-            });
-        isLoaded = true;
-
-    }
-
-}
-
 
   let charNumber = 30;
 
+  async function handleScroll() {
+    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
+    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
+    if (isBottom && displayList?.length !== shareholderList?.length) {
+      const nextIndex = displayList?.length;
+      const filteredNewResults = shareholderList?.slice(
+        nextIndex,
+        nextIndex + 50,
+      );
+      displayList = [...displayList, ...filteredNewResults];
+    }
+  }
 
+  onMount(async () => {
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  });
+
+  let columns = [
+    { key: "investorName", label: "Institute", align: "left" },
+    { key: "ownership", label: "Ownership", align: "right" },
+    { key: "sharesNumber", label: "Shares", align: "right" },
+    {
+      key: "changeInSharesNumberPercentage",
+      label: "Shares % Change",
+      align: "right",
+    },
+    { key: "marketValue", label: "Market Value", align: "right" },
+    { key: "weight", label: "Portfolio", align: "right" },
+  ];
+
+  let sortOrders = {
+    investorName: { order: "none", type: "string" },
+    ownership: { order: "none", type: "number" },
+    sharesNumber: { order: "none", type: "number" },
+    changeInSharesNumberPercentage: { order: "none", type: "number" },
+    marketValue: { order: "none", type: "number" },
+    weight: { 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"];
+
+    let originalData = shareholderList;
+    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") {
+      displayList = [...originalData]?.slice(0, 50); // 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
+    displayList = [...originalData].sort(compareValues)?.slice(0, 50);
+  };
 </script>
 
-
-
 <section class="overflow-hidden text-white h-full pb-8">
   <main class="overflow-hidden">
-
+    <div
-        <div class="flex flex-row items-center">
+      class="w-full text-white text-start p-3 sm:p-5 mb-5 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
-            <label for="shareholdersInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
+    >
-                Shareholder Breakdown
+      <svg
-            </label>
+        class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
-            <InfoModal
+        xmlns="http://www.w3.org/2000/svg"
-                title={"Shareholder Breakdown"}
+        viewBox="0 0 256 256"
-                content={"Institutional shareholders are large investment entities like mutual funds and pension funds that invest significant amounts in publicly traded companies. They play a big role in influencing company decisions and stock market trends."}
+        ><path
-                id={"shareholdersInfo"}
+          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
+      >
+      {#if shareholderList?.length !== 0}
+        13F institutions, like mutual and pension funds, are large investors
+        required by the SEC to disclose their holdings quarterly, significantly
+        impacting company decisions and stock trends.
+      {:else}
+        There are currently no records available for the 13 institutional
+        holders of {$displayCompanyName}
+      {/if}
     </div>
 
-                {#if isLoaded}
     {#if shareholderList?.length !== 0}
-                <div class="p-3 sm:p-0 mt-2 pb-8 sm:pb-2 rounded-lg bg-[#09090B] sm:bg-[#09090B]">
+      <div class="pb-2 rounded-lg bg-[#09090B] sm:bg-[#09090B]">
         <div class="text-white text-[1rem] mt-3">
-                        As of {new Date(rawData?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })},
+          As of {new Date(rawData?.date)?.toLocaleString("en-US", {
-                        <span class="font-semibold">{new Intl.NumberFormat("en", {
+            month: "short",
+            day: "numeric",
+            year: "numeric",
+            daySuffix: "2-digit",
+          })},
+          <span class="font-semibold"
+            >{new Intl.NumberFormat("en", {
               minimumFractionDigits: 0,
-                          maximumFractionDigits: 0
+              maximumFractionDigits: 0,
-                      }).format(rawData?.investorsHolding)}</span> Hedge Funds hold a total of <span class="font-semibold">{abbreviateNumber(rawData?.numberOf13Fshares)}</span> {$displayCompanyName} shares, with a combined investment of <span class="font-semibold">{abbreviateNumber(rawData?.totalInvested, true)}</span>.
+            }).format(rawData?.investorsHolding)}</span
+          >
+          Hedge Funds hold a total of
+          <span class="font-semibold"
+            >{abbreviateNumber(rawData?.numberOf13Fshares)}</span
+          >
+          {$displayCompanyName} shares, with a combined investment of
+          <span class="font-semibold"
+            >{abbreviateNumber(rawData?.totalInvested, true)}</span
+          >.
         </div>
 
         {#if optionsPieChart !== null}
@@ -193,20 +261,39 @@ let charNumber = 30;
             </div>
 
             <div class="flex flex-col items-center sm:pt-0 m-auto">
-
               <div class="flex flex-row items-center mr-auto mb-5">
-                                  <div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
+                <div
-                                  <div class="w-4 h-4 bg-[#F8901E] border-4 box-content border-[#27272A] rounded-full transform -translate-x-1/2" aria-hidden="true"></div>
+                  class="h-full transform -translate-x-1/2"
-                                  <span class="text-white text-sm sm:text-[1rem] font-medium inline-block">
+                  aria-hidden="true"
-                                      Others: {otherOwner >= 99.99 ? 99.99 : otherOwner?.toFixed(2)}%
+                ></div>
+                <div
+                  class="w-4 h-4 bg-[#fff] border-4 box-content border-[#27272A] rounded-full transform -translate-x-1/2"
+                  aria-hidden="true"
+                ></div>
+                <span
+                  class="text-white text-sm sm:text-[1rem] font-medium inline-block"
+                >
+                  Others: {otherOwner >= 99.99
+                    ? 99.99
+                    : otherOwner?.toFixed(2)}%
                 </span>
               </div>
 
               <div class="flex flex-row items-center mr-auto">
-                                  <div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
+                <div
-                                  <div class="w-4 h-4 bg-[#5470C6] border-4 box-content border-[#27272A] rounded-full transform -translate-x-1/2" aria-hidden="true"></div>
+                  class="h-full transform -translate-x-1/2"
-                                  <span class="text-white text-sm sm:text-[1rem] font-medium inline-block">
+                  aria-hidden="true"
-                                      Institutions: {institutionalOwner <= 0.01 ? "< 0.01%" : institutionalOwner?.toFixed(2)+'%'}
+                ></div>
+                <div
+                  class="w-4 h-4 bg-blue-500 border-4 box-content border-[#27272A] rounded-full transform -translate-x-1/2"
+                  aria-hidden="true"
+                ></div>
+                <span
+                  class="text-white text-sm sm:text-[1rem] font-medium inline-block"
+                >
+                  Institutions: {institutionalOwner <= 0.01
+                    ? "< 0.01%"
+                    : institutionalOwner?.toFixed(2) + "%"}
                 </span>
               </div>
             </div>
@@ -215,67 +302,132 @@ let charNumber = 30;
       </div>
 
       {#if putCallRatio !== 0}
-                <h1 class="text-white font-semibold text-xl sm:text-2xl mb-3 mt-5 sm:-mt-5">
+        <h1
+          class="text-white font-semibold text-xl sm:text-2xl mb-3 mt-5 sm:-mt-5"
+        >
           Options Activity
         </h1>
 
         <div class="mt-3 text-white text-md">
-                    Hedge Funds 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.' : 'Calls/Puts contracts nearly balanced, indicating a neutral sentiment.'}
+          Hedge Funds 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."
+              : "Calls/Puts contracts nearly balanced, indicating a neutral sentiment."}
         </div>
 
         <div class="w-full mt-5 mb-10 m-auto flex justify-center items-center">
-                    <div class="w-full grid grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-y-3 lg:gap-y-3 gap-x-3 ">
+          <div
+            class="w-full grid grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-y-3 lg:gap-y-3 gap-x-3"
+          >
             <!--Start Put/Call-->
-                      <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-md h-20">
+            <div
+              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 border border-gray-600 rounded-md h-20"
+            >
               <div class="flex flex-col items-start">
                 <span class="font-medium text-gray-200 text-sm">Put/Call</span>
-                            <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
+                <span
+                  class="text-start text-sm sm:text-[1rem] font-medium text-white"
+                >
                   {putCallRatio?.toFixed(3)}
                 </span>
               </div>
               <!-- Circular Progress -->
               <div class="relative size-14 ml-auto">
-                            <svg class="size-full w-14 h-14" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+                <svg
+                  class="size-full w-14 h-14"
+                  viewBox="0 0 36 36"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
                   <!-- Background Circle -->
-                              <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
+                  <circle
+                    cx="18"
+                    cy="18"
+                    r="16"
+                    fill="none"
+                    class="stroke-current text-[#3E3E3E]"
+                    stroke-width="3"
+                  ></circle>
                   <!-- Progress Circle inside a group with rotation -->
                   <g class="origin-center -rotate-90 transform">
-                                <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-blue-500" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={putCallRatio >=1 ? 0 : 100-(putCallRatio*100)?.toFixed(2)}></circle>
+                    <circle
+                      cx="18"
+                      cy="18"
+                      r="16"
+                      fill="none"
+                      class="stroke-current text-blue-500"
+                      stroke-width="3"
+                      stroke-dasharray="100"
+                      stroke-dashoffset={putCallRatio >= 1
+                        ? 0
+                        : 100 - (putCallRatio * 100)?.toFixed(2)}
+                    ></circle>
                   </g>
                 </svg>
                 <!-- Percentage Text -->
-                            <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
+                <div
-                              <span class="text-center text-white text-sm">{putCallRatio?.toFixed(2)}</span>
+                  class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
+                >
+                  <span class="text-center text-white text-sm"
+                    >{putCallRatio?.toFixed(2)}</span
+                  >
                 </div>
               </div>
               <!-- End Circular Progress -->
-              
             </div>
             <!--End Put/Call-->
             <!--Start Call Flow-->
-                    <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-md h-20">
+            <div
+              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 border border-gray-600 rounded-md h-20"
+            >
               <div class="flex flex-col items-start">
                 <span class="font-medium text-gray-200 text-sm">Call Flow</span>
-                          <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
+                <span
+                  class="text-start text-sm sm:text-[1rem] font-medium text-white"
+                >
                   {new Intl.NumberFormat("en", {
                     minimumFractionDigits: 0,
-                              maximumFractionDigits: 0
+                    maximumFractionDigits: 0,
                   }).format(rawData?.totalCalls)}
                 </span>
               </div>
               <!-- Circular Progress -->
               <div class="relative size-14 ml-auto">
-                        <svg class="size-full w-14 h-14" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+                <svg
+                  class="size-full w-14 h-14"
+                  viewBox="0 0 36 36"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
                   <!-- Background Circle -->
-                          <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
+                  <circle
+                    cx="18"
+                    cy="18"
+                    r="16"
+                    fill="none"
+                    class="stroke-current text-[#3E3E3E]"
+                    stroke-width="3"
+                  ></circle>
                   <!-- Progress Circle inside a group with rotation -->
                   <g class="origin-center -rotate-90 transform">
-                            <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#00FC50]" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={(100-callPercentage)?.toFixed(2)}></circle>
+                    <circle
+                      cx="18"
+                      cy="18"
+                      r="16"
+                      fill="none"
+                      class="stroke-current text-[#00FC50]"
+                      stroke-width="3"
+                      stroke-dasharray="100"
+                      stroke-dashoffset={(100 - callPercentage)?.toFixed(2)}
+                    ></circle>
                   </g>
                 </svg>
                 <!-- Percentage Text -->
-                        <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
+                <div
-                          <span class="text-center text-white text-sm">{callPercentage?.toFixed(0)}%</span>
+                  class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
+                >
+                  <span class="text-center text-white text-sm"
+                    >{callPercentage?.toFixed(0)}%</span
+                  >
                 </div>
               </div>
               <!-- End Circular Progress -->
@@ -283,146 +435,200 @@ let charNumber = 30;
             <!--End Call Flow-->
 
             <!--Start Put Flow-->
-                      <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-md h-20">
+            <div
+              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 border border-gray-600 rounded-md h-20"
+            >
               <div class="flex flex-col items-start">
                 <span class="font-medium text-gray-200 text-sm">Put Flow</span>
-                            <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
+                <span
+                  class="text-start text-sm sm:text-[1rem] font-medium text-white"
+                >
                   {new Intl.NumberFormat("en", {
                     minimumFractionDigits: 0,
-                                maximumFractionDigits: 0
+                    maximumFractionDigits: 0,
                   }).format(rawData?.totalPuts)}
                 </span>
               </div>
               <!-- Circular Progress -->
               <div class="relative size-14 ml-auto">
-                          <svg class="size-full w-14 h-14" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+                <svg
+                  class="size-full w-14 h-14"
+                  viewBox="0 0 36 36"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
                   <!-- Background Circle -->
-                            <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
+                  <circle
+                    cx="18"
+                    cy="18"
+                    r="16"
+                    fill="none"
+                    class="stroke-current text-[#3E3E3E]"
+                    stroke-width="3"
+                  ></circle>
                   <!-- Progress Circle inside a group with rotation -->
                   <g class="origin-center -rotate-90 transform">
-                              <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#EE5365]" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={100-putPercentage}></circle>
+                    <circle
+                      cx="18"
+                      cy="18"
+                      r="16"
+                      fill="none"
+                      class="stroke-current text-[#EE5365]"
+                      stroke-width="3"
+                      stroke-dasharray="100"
+                      stroke-dashoffset={100 - putPercentage}
+                    ></circle>
                   </g>
                 </svg>
                 <!-- Percentage Text -->
-                          <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
+                <div
-                            <span class="text-center text-white text-sm">{putPercentage?.toFixed(0)}%</span>
+                  class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
+                >
+                  <span class="text-center text-white text-sm"
+                    >{putPercentage?.toFixed(0)}%</span
+                  >
                 </div>
               </div>
               <!-- End Circular Progress -->
             </div>
             <!--End Put Flow-->
-              
-              
           </div>
         </div>
       {/if}
 
-
-
       <h3 class="text-white font-semibold text-xl sm:text-2xl mb-3 mt-5">
         Top Shareholders
       </h3>
 
       {#if topHolders !== 0}
         <span class="text-white text-[1rem">
-                    The Top 10 shareholders own <span class="font-semibold">{topHolders <= 0.01 ? "< 0.01%" : topHolders?.toFixed(2)+'%'}</span>
+          The Top 10 shareholders collectively own <span class="font-semibold"
-                    of the company.
+            >{topHolders <= 0.01
+              ? "< 0.01%"
+              : topHolders?.toFixed(2) + "%"}</span
+          >
+          of the {$displayCompanyName}.
         </span>
       {/if}
 
-
+      <div class="flex justify-end items-end ml-auto w-fit">
-                <div class="flex justify-start items-center w-full m-auto mt-6 overflow-x-scroll">
+        <DownloadData
+          {data}
+          rawData={shareholderList}
+          title={`13-institute-${$stockTicker}`}
+        />
+      </div>
+      <div
+        class="flex justify-start items-center w-full m-auto mt-6 overflow-x-scroll"
+      >
         <table class="table table-sm table-compact w-full">
           <thead>
-                        <tr>
+            <TableHeader {columns} {sortOrders} {sortData} />
-                          <th class="text-white shadow-md font-semibold text-sm text-start bg-[#09090B]">Institute</th>
-                          <th class="text-white shadow-md font-semibold text-sm text-end bg-[#09090B]">Ownership</th>
-                          <th class="text-white shadow-md font-semibold text-sm text-end hidden sm:table-cell bg-[#09090B]">Shares</th>
-                          <th class="text-white shadow-md font-semibold text-sm text-end hidden sm:table-cell bg-[#09090B]">Market Value</th>
-                          <th class="text-white shadow-md font-semibold text-sm text-end  bg-[#09090B]">Portfolio</th>
-                        </tr>
           </thead>
           <tbody>
-                        {#each (showFullStats ? shareholderList?.slice(0,10) : shareholderList?.slice(0,3)) as item,index}
+            {#each displayList as item, index}
               {#if item?.investorName?.length > 0}
-                        <tr class="border-y border-gray-800 odd:bg-[#27272A] {index === 2 && !showFullStats && shareholderList?.length > 3 ? 'opacity-[0.5]' : '' } sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B]">
+                <tr
-                         
+                  class="border-y border-gray-800 odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] {index +
-                            <td class="font-medium text-sm sm:text-[1rem] whitespace-nowrap">
+                    1 ===
-                             <a href={'/hedge-funds/'+item?.cik} class="sm:hover:text-white text-blue-400">
+                    shareholderList?.length && data?.user?.tier !== 'Pro'
-                                 {item?.investorName?.length > charNumber ? formatString(item?.investorName?.slice(0,charNumber)) + "..." : formatString(item?.investorName)}
+                    ? 'opacity-[0.1]'
+                    : ''}"
+                >
+                  <td
+                    class="font-medium text-sm sm:text-[1rem] whitespace-nowrap"
+                  >
+                    <a
+                      href={"/hedge-funds/" + item?.cik}
+                      class="sm:hover:underline sm:hover:underline-offset-4 text-white"
+                    >
+                      {item?.investorName?.length > charNumber
+                        ? formatString(
+                            item?.investorName?.slice(0, charNumber),
+                          ) + "..."
+                        : formatString(item?.investorName)}
                     </a>
                   </td>
 
-                            <td class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap">
+                  <td
-                                {item?.ownership <= 0.01 ? "< 0.01%" : item?.ownership?.toFixed(2)+'%'}
+                    class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
+                  >
+                    {item?.ownership <= 0.01
+                      ? "< 0.01%"
+                      : item?.ownership?.toFixed(2) + "%"}
                   </td>
 
-                            <td class="text-white text-end hidden sm:table-cell font-medium text-sm sm:text-[1rem] whitespace-nowrap">
+                  <td
-                                {item?.sharesNumber !== null ? abbreviateNumber(item?.sharesNumber) : '-'}
+                    class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
+                  >
+                    {item?.sharesNumber !== null
+                      ? abbreviateNumber(item?.sharesNumber)
+                      : "-"}
                   </td>
 
-                            <td class="text-white text-end hidden sm:table-cell font-medium text-sm sm:text-[1rem] whitespace-nowrap ">
+                  <td
-                                {item?.marketValue !== null ? "$" + abbreviateNumber(item?.marketValue) : '-'}
+                    class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
+                  >
+                    {#if item?.changeInSharesNumberPercentage >= 0}
+                      <span class="text-[#00FC50]"
+                        >+{abbreviateNumber(
+                          item?.changeInSharesNumberPercentage?.toFixed(2),
+                        )}%</span
+                      >
+                    {:else if item?.changeInSharesNumberPercentage < 0}
+                      <span class="text-[#FF2F1F]"
+                        >{abbreviateNumber(
+                          item?.changeInSharesNumberPercentage?.toFixed(2),
+                        )}%</span
+                      >
+                    {:else}
+                      -
+                    {/if}
                   </td>
 
-                            <td class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap">
+                  <td
-                                {item?.weight <= 0.01 ? "< 0.01%" : item?.weight?.toFixed(2)+'%'}
+                    class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
+                  >
+                    {item?.marketValue !== null
+                      ? abbreviateNumber(item?.marketValue)
+                      : "-"}
                   </td>
 
+                  <td
+                    class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
+                  >
+                    {item?.weight <= 0.01
+                      ? "< 0.01%"
+                      : item?.weight?.toFixed(2) + "%"}
+                  </td>
                 </tr>
               {/if}
             {/each}
           </tbody>
         </table>
-
-            
       </div>
 
-                  <label on:click={() => showFullStats = !showFullStats} class="cursor-pointer flex justify-center items-center mt-5">
+      <UpgradeToPro
-                    <svg class="w-10 h-10 transform {showFullStats ? 'rotate-180' : ''} " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#2A323C" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 13.5L7.5 11l1.42-1.41L12 12.67l3.08-3.08L16.5 11L12 15.5z"/></svg>
+        {data}
-                </label>
+        title="Access {$displayCompanyName}'s 13 Report to see all institutional holders and track their selling and purchasing activity"
-
+      />
-            
-
-            
     {/if}
-    
-                {:else}
-                <div class="flex justify-center items-center h-80">
-                    <div class="relative">
-                    <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                        <span class="loading loading-spinner loading-md text-gray-400"></span>
-                    </label>
-                    </div>
-                </div>  
-                {/if}
-    
-
   </main>
 </section>
 
-
-
-
-
 <style>
-
   .app {
     height: 300px;
     max-width: 100%; /* Ensure chart width doesn't exceed the container */
-
   }
 
   @media (max-width: 640px) {
     .app {
-        height: 120px;
+      height: 150px;
-        width: 120px;
+      width: 150px;
     }
   }
 
   .chart {
     width: 100%;
   }
-
-
 </style>

src/lib/components/UpgradeToPro.svelte

@@ -7,7 +7,7 @@
 {#if data?.user?.tier !== "Pro"}
   <div class="px-0 flex justify-center items-center">
     <div
-      class="rounded bg-[{color}] pl-10 pr-10 text-center pb-10 pt-5 w-full h-full m-auto -mt-5 relative"
+      class="rounded bg-[{color}] pl-10 pr-10 text-center pb-10 pt-5 w-full h-full m-auto -mt-2 relative"
     >
       <h3 class="text-white font-bold text-xl sm:text-2xl text-center">
         Upgrade to Pro

src/routes/stocks/[tickerID]/insider/+layout.svelte

@@ -40,6 +40,7 @@
   if (!displaySubSection || displaySubSection.length === 0) {
     const parts = $page?.url?.pathname.split("/");
     const sectionMap = {
+      institute: "institute",
       "congress-trading": "congress-trading",
       transcripts: "transcripts",
     };
@@ -57,6 +58,7 @@
   function changeSubSection(state) {
     const subSectionMap = {
       "congress-trading": "/insider/congress-trading",
+      institute: "/insider/institute",
       transcripts: "/insider/transcripts",
     };
 
@@ -78,7 +80,7 @@
       >
         <main class="w-full lg:w-3/4">
           <nav
-            class="sm:ml-4 pt-1 overflow-x-scroll md:overflow-hidden text-sm sm:text-[1rem] whitespace-nowrap"
+            class="mb-5 sm:mb-0 sm:ml-4 pt-1 overflow-x-scroll md:overflow-hidden text-sm sm:text-[1rem] whitespace-nowrap"
           >
             <ul class="flex flex-row items-center w-full text-white">
               <a
@@ -91,6 +93,17 @@
                 Insider Trading
               </a>
 
+              <a
+                href={`/stocks/${$stockTicker}/insider/institute`}
+                on:click={() => changeSubSection("institute")}
+                class="p-2 px-5 cursor-pointer {displaySubSection ===
+                'institute'
+                  ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+              >
+                13F Institute
+              </a>
+
               <a
                 href={`/stocks/${$stockTicker}/insider/congress-trading`}
                 on:click={() => changeSubSection("congress-trading")}

src/routes/stocks/[tickerID]/insider/institute/+page.server.ts

@@ -0,0 +1,33 @@
+
+export const load = async ({ locals, params }) => {
+  const { apiURL, apiKey, user } = locals;
+
+  const getShareholderData = async () => {
+    const postData = {
+      ticker: params.tickerID,
+    };
+
+    // make the POST request to the endpoint
+    const response = await fetch(apiURL + "/shareholders", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+      body: JSON.stringify(postData),
+    });
+
+    let output = await response.json();
+
+    output.shareholders = user?.tier !== "Pro" ? output.shareholders?.slice(0, 3) : output.shareholders;
+
+   
+    return output;
+  };
+
+
+  // Make sure to return a promise
+  return {
+    getShareholderData: await getShareholderData(),
+  };
+};

src/routes/stocks/[tickerID]/insider/institute/+page.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import {
+    displayCompanyName,
+    numberOfUnreadNotification,
+    stockTicker,
+  } from "$lib/store";
+
+  import ShareHolders from "$lib/components/ShareHolders.svelte";
+
+  export let data;
+</script>
+
+<svelte:head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
+    {$displayCompanyName} ({$stockTicker}) US Congress & Senate Trading ·
+    stocknear
+  </title>
+  <meta
+    name="description"
+    content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`}
+  />
+
+  <!-- Other meta tags -->
+  <meta
+    property="og:title"
+    content={`${$displayCompanyName} (${$stockTicker}) US Congress & Senate Trading · stocknear`}
+  />
+  <meta
+    property="og:description"
+    content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`}
+  />
+  <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={`${$displayCompanyName} (${$stockTicker}) US Congress & Senate Trading · stocknear`}
+  />
+  <meta
+    name="twitter:description"
+    content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`}
+  />
+  <!-- Add more Twitter meta tags as needed -->
+</svelte:head>
+
+<section class="w-full bg-[#09090B] overflow-hidden text-white h-full">
+  <div class="w-full flex h-full overflow-hidden">
+    <div
+      class="w-full relative flex justify-center items-center overflow-hidden"
+    >
+      <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
+        <div class="w-full mb-6">
+          <h1 class="text-xl sm:text-2xl text-white font-bold mb-4">
+            13F Institute Ownership
+          </h1>
+        </div>
+
+        <ShareHolders {data} />
+      </div>
+    </div>
+  </div>
+</section>