add industry
This commit is contained in:
MuslemRahimi
parent
44c5a3024b
commit
a2421b7632
67
src/lib/components/IndustryTable.svelte
Normal file
67
src/lib/components/IndustryTable.svelte
Normal file
@ -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>
|
||||||
258
src/routes/industry/+layout.svelte
Normal file
258
src/routes/industry/+layout.svelte
Normal file
@ -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>
|
||||||
|
|
||||||
|
|
||||||
55
src/routes/industry/+page.svelte
Normal file
55
src/routes/industry/+page.svelte
Normal file
@ -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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
34
src/routes/industry/+page.ts
Normal file
34
src/routes/industry/+page.ts
Normal file
@ -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(),
|
||||||
|
};
|
||||||
|
};
|
||||||
@ -5,7 +5,7 @@ export const load = async ({ parent }) => {
|
|||||||
let output;
|
let output;
|
||||||
|
|
||||||
// Get cached data for the specific tickerID
|
// Get cached data for the specific tickerID
|
||||||
const cachedData = getCache("", "getAllReEITs");
|
const cachedData = getCache("", "getAllREITs");
|
||||||
if (cachedData) {
|
if (cachedData) {
|
||||||
output = cachedData;
|
output = cachedData;
|
||||||
} else {
|
} else {
|
||||||
@ -23,7 +23,7 @@ export const load = async ({ parent }) => {
|
|||||||
|
|
||||||
output = await response.json();
|
output = await response.json();
|
||||||
|
|
||||||
setCache("", output, "getAllReEITs");
|
setCache("", output, "getAllREITs");
|
||||||
}
|
}
|
||||||
|
|
||||||
return output;
|
return output;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user