add industry

src/lib/components/IndustryTable.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+    import { abbreviateNumber } from '$lib/utils';
+    export let charNumber;
+    export let industryList
+</script>
+
+
+<div class="w-full overflow-x-scroll">
+
+<table class="table rounded-none sm:rounded-md w-full m-auto mt-4 ">
+    <thead>
+        <tr class="border border-slate-800">
+        <th class="text-white font-semibold text-[1rem]">Industry Name</th>
+        <th class="text-white text-end font-semibold text-[1rem]">Stocks</th>
+        <th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
+        <th class="text-white font-semibold text-[1rem] text-end">Div. Yield</th>
+        <th class="text-white font-semibold text-[1rem] text-end">PE Ratio</th>
+        <th class="text-white font-semibold text-[1rem] text-end">Profit Margin</th>
+        <th class="text-white font-semibold text-[1rem] text-end">1M Change</th>
+        <th class="text-white font-semibold text-[1rem] text-end">1Y Change</th>
+        </tr>
+    </thead>
+    <tbody>
+        {#each industryList as item}
+        <!-- row -->
+        <tr class="cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
+        <td class="hover:sm:text-white text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
+            {item?.industry?.length > charNumber ? item?.industry?.slice(0,charNumber) + "..." : item?.industry}
+        </td>
+
+
+        <td class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
+            {item?.numStocks}
+        </td>
+
+        <td class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
+            {abbreviateNumber(item?.totalMarketCap) ?? '-'}
+        </td>
+
+        <td class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
+            {item?.avgDividendYield?.toFixed(2) ?? '-'}%
+        </td>
+
+        <td class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
+            {item?.pe?.toFixed(2) ?? '-'}
+        </td>
+
+
+        <td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
+            {item?.profitMargin?.toFixed(2)}%
+        </td>
+
+        <td class="{item?.avgChange1M >= 0 ? 'text-[#10DB06]' : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
+            {item?.avgChange1M?.toFixed(2) ?? '-'}%
+        </td>
+
+        <td class="{item?.avgChange1Y >= 0 ? 'text-[#10DB06]' : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
+            {item?.avgChange1Y?.toFixed(2) ?? '-'}%
+        </td>
+
+        </tr>
+        
+    
+        {/each}
+    </tbody>
+</table>
+</div>

src/routes/industry/+layout.svelte

@@ -0,0 +1,258 @@
+<script lang='ts'>
+    import { numberOfUnreadNotification } from '$lib/store';
+    import { page } from '$app/stores';
+    import ArrowLogo from "lucide-svelte/icons/move-up-right";
+    import { goto } from '$app/navigation';
+
+    export let data;
+
+let navigation = [
+    {
+        title: 'Stock Lists',
+        link: '/list'
+    },
+    {
+        title: 'Mega-Cap Stocks',
+        link: '/list/mega-cap-stocks'
+    },
+    {
+        title: 'Large-Cap Stocks',
+        link: '/list/large-cap-stocks'
+    },
+    {
+        title: 'Mid-Cap Stocks',
+        link: '/list/mid-cap-stocks'
+    },
+    {
+        title: 'Small-Cap Stocks',
+        link: '/list/small-cap-stocks'
+    },
+    {
+        title: 'Micro-Cap Stocks',
+        link: '/list/micro-cap-stocks'
+    },
+    {
+        title: 'Nano-Cap Stocks',
+        link: '/list/nano-cap-stocks'
+    },
+    {
+        title: 'All Stocks Listed on the NASDAQ',
+        link: '/list/nasdaq-stocks'
+    },
+    {
+        title: 'All Stocks Listed on the NYSE',
+        link: '/list/nyse-stocks'
+    },
+    {
+        title: 'All Stocks Listed on XETRA',
+        link: '/list/xetra-stocks'
+    },
+    {
+        title: 'All Stocks Listed on AMEX',
+        link: '/list/amex-stocks'
+    },
+    {
+        title: 'Dow Jones Industrial Average Stocks List',
+        link: '/list/dow-jones-stocks'
+    },
+    {
+        title: 'NASDAQ 100 Index Stocks List',
+        link: '/list/nasdaq-100-stocks'
+    },
+    {
+        title: 'S&P 500 Index Stocks List',
+        link: '/list/sp-500-stocks'
+    },
+    {
+        title: 'German Companies on the US Stock Market',
+        link: '/list/german-stocks-us'
+    },
+    {
+        title: 'Canadian Companies on the US Stock Market',
+        link: '/list/canadian-stocks-us'
+    },
+    {
+        title: 'Chinese Companies on the US Stock Market',
+        link: '/list/chinese-stocks-us'
+    },
+    {
+        title: 'Indian Companies on the US Stock Market',
+        link: '/list/indian-stocks-us'
+    },
+    {
+        title: 'Israeli Companies on the US Stock Market',
+        link: '/list/israeli-stocks-us'
+    },
+    {
+        title: 'UK Companies on the US Stock Market',
+        link: '/list/uk-stocks-us'
+    },
+    {
+        title: 'Japanese Companies on the US Stock Market',
+        link: '/list/japanese-stocks-us'
+    },
+    {
+        title: 'Financials Sector Stocks',
+        link: '/list/financial-sector'
+    },
+    {
+        title: 'Healthcare Sector Stocks',
+        link: '/list/healthcare-sector'
+    },
+    {
+        title: 'Technology Sector Stocks',
+        link: '/list/technology-sector'
+    },
+    {
+        title: 'Industrials Sector Stocks',
+        link: '/list/industrials-sector'
+    },
+    {
+        title: 'Energy Sector Stocks',
+        link: '/list/energy-sector'
+    },
+    {
+        title: 'Utilities Sector Stocks',
+        link: '/list/utilities-sector'
+    },
+    {
+        title: 'Consumer Cyclical Sector Stocks',
+        link: '/list/consumer-cyclical-sector'
+    },
+    {
+        title: 'Real Estate Sector Stocks',
+        link: '/list/real-estate-sector'
+    },
+    {
+        title: 'Basic Materials Sector Stocks',
+        link: '/list/basic-materials-sector'
+    },
+    {
+        title: 'Communication Services Sector Stocks',
+        link: '/list/communication-services-sector'
+    },
+    {
+        title: 'Consumer Defensive Sector Stocks',
+        link: '/list/consumer-defensive-sector'
+    },
+    {
+        title: 'Delisted Companies',
+        link: '/list/delisted-stocks'
+    },
+    {
+        title: 'Bitcoin ETFs',
+        link: '/list/bitcoin-etfs'
+    },
+    {
+        title: 'Magnificent Seven Stocks',
+        link: '/list/magnificent-seven'
+    },
+    {
+        title: 'Dividend Kings',
+        link: '/list/dividend-kings'
+    },
+    {
+        title: 'Dividend Aristocrats',
+        link: '/list/dividend-aristocrats'
+    },
+    {
+        title: 'All Active REITs on the US Stock Market',
+        link: '/list/reit-stocks'
+    },
+    
+];
+
+let updatedNavigation = navigation?.map(item => {
+    return {
+        ...item,
+        link: item.link + '/'
+    };
+});
+
+const combinedNavigation = navigation?.concat(updatedNavigation);
+</script>
+        
+
+
+<svelte:head>
+  <title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Industry · stocknear</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+
+  <meta name="description" content="Lists of stocks industry and sectors.">
+  <!-- Other meta tags -->
+  <meta property="og:title" content="Industry · stocknear"/>
+  <meta property="og:description" content="Lists of stocks industry and sectors.">
+  <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="Industry · stocknear"/>
+  <meta name="twitter:description" content="Lists of stocks industry and sectors.">
+  <!-- Add more Twitter meta tags as needed -->
+</svelte:head>
+    
+    
+          
+<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40">
+            
+            <div class="text-sm sm:text-[1rem] breadcrumbs ml-3 lg:ml-10">
+                <ul>
+                  <li><a href="/" class="text-gray-300">Home</a></li> 
+                  <li><a href="/list/" class="text-gray-300">Lists</a></li>
+                  {#if $page.url.pathname.startsWith('/list/')}
+                    <li>
+                        <a class="text-gray-300">
+                            {combinedNavigation?.find((item) => item?.link === $page.url.pathname)?.title}
+                        </a>
+                    </li> 
+                    {/if}
+                </ul>
+            </div>
+
+
+
+        
+
+
+        
+        <div class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-[#09090B] px-3 lg:px-10 overflow-hidden">
+        
+        
+            <!--Start Top Winners/Losers-->
+            <div class="flex flex-col justify-center items-center">
+              
+              <div class="ml-2 text-start w-full text-white mb-2">
+                {#each navigation as item}
+                  {#if item?.link === $page.url.pathname}      
+                    <span class="font-bold text-2xl">
+                      {item?.title}
+                    </span>
+                  {/if}
+                  {/each}
+              </div>
+    
+              <div class="border-b mt-2 border-blue-400 w-full mb-7" />
+
+              <div class="flex justify-center w-full m-auto overflow-hidden">
+      
+            <main class="w-full">
+              <slot />
+            </main>
+
+          
+
+            </div>
+
+
+          
+          </div>
+    
+    
+        </div>
+     
+        
+        </section>
+        
+        

src/routes/industry/+page.svelte

@@ -0,0 +1,55 @@
+<script lang='ts'>
+import { screenWidth } from '$lib/store';
+import IndustryTable from '$lib/components/IndustryTable.svelte';
+import { sectorList } from '$lib/utils';
+
+export let data;
+let rawData = data?.getIndustryOverview;
+
+
+  
+
+$: charNumber = $screenWidth < 640 ? 20 : 30;
+
+</script>
+    
+    <section class="w-full overflow-hidden m-auto px-2 sm:px-0">
+            
+          
+        <div class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg 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="#a474f6" 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 all the actively traded REITs (Real Estate Investment Trusts) on the US stock market.
+            
+          </div>
+    
+      
+        
+          <!-- Page wrapper -->
+          <div class="flex justify-center w-full m-auto h-full overflow-hidden">
+      
+              
+        
+              <!-- Content area -->
+              <div class="w-full">
+                {#each sectorList as sector}
+                    <h2 class="cursor-pointer text-white sm:hover:underline font-semibold text-lg sm:text-xl mt-5">
+                        Sector: {sector} <svg class="inline-block h-6 w-6 -mt-1" viewBox="0 0 20 20" fill="white" style="max-width:40px"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
+                    </h2>
+                    
+                    <div class="border-t border-gray-600 mt-5"/>
+
+                    <IndustryTable charNumber = {charNumber} industryList = {rawData[sector]} />
+                    <div class="border-t border-gray-600 mt-5"/>
+                {/each}
+    
+                  
+          </div>
+
+          
+      
+      </section>
+      
+      
+      
+      

src/routes/industry/+page.ts

@@ -0,0 +1,34 @@
+import { getCache, setCache } from "$lib/store";
+
+export const load = async ({ parent }) => {
+  const getIndustryOverview = async () => {
+    let output;
+
+    // Get cached data for the specific tickerID
+    const cachedData = getCache("", "getIndustryOverview");
+    if (cachedData) {
+      output = cachedData;
+    } else {
+      const { apiKey, apiURL } = await parent();
+
+      const response = await fetch(apiURL + "/industry-overview", {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          "X-API-KEY": apiKey,
+        },
+      });
+
+      output = await response.json();
+
+      setCache("", output, "getAllReEITs");
+    }
+
+    return output;
+  };
+
+  // Make sure to return a promise
+  return {
+    getIndustryOverview: await getIndustryOverview(),
+  };
+};

src/routes/list/reit-stocks/+page.ts

@@ -5,7 +5,7 @@ export const load = async ({ parent }) => {
     let output;
 
     // Get cached data for the specific tickerID
-    const cachedData = getCache("", "getAllReEITs");
+    const cachedData = getCache("", "getAllREITs");
     if (cachedData) {
       output = cachedData;
     } else {
@@ -23,7 +23,7 @@ export const load = async ({ parent }) => {
 
       output = await response.json();
 
-      setCache("", output, "getAllReEITs");
+      setCache("", output, "getAllREITs");
     }
 
     return output;