AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update reit page

Browse Source
This commit is contained in:
MuslemRahimi 2024-11-12 12:26:22 +01:00
parent 8f7b3f5cf0
commit 86f0fa7c62
6 changed files with 115 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/routes/list/+layout.svelte
View File

@ -149,10 +149,7 @@
title: "Consumer Defensive Sector Stocks",
link: "/list/sector/consumer-defensive",
},
{
title: "Delisted Companies",
link: "/list/delisted-stocks",
},
{
title: "Bitcoin ETFs",
link: "/list/bitcoin-etfs",

17
src/routes/list/+page.svelte
View File

@ -541,14 +541,6 @@
All REITs
</a>
</li>
<li class="mb-2 cursor-pointer sm:hidden">
<a
href="/list/delisted-stocks"
class="sm:hover:text-white text-blue-400 text-lg"
>
Delisted Companies
</a>
</li>
</ul>
</div>
@ -563,14 +555,7 @@
All REITs
</a>
</li>
<li class="mb-2 cursor-pointer">
<a
href="/list/delisted-stocks"
class="sm:hover:text-white text-blue-400 text-lg"
>
Delisted Companies
</a>
</li>
<!-- ...other list items -->
</ul>
</div>

22
src/routes/list/delisted-stocks/+page.server.ts
View File

@ -1,22 +0,0 @@
export const load = async ({ locals }) => {
const getDelistedStocks = async () => {
const { apiKey, apiURL } = locals;
const response = await fetch(apiURL + "/delisted-companies", {
method: "GET",
headers: {
"Content-Type": "application/json",
"X-API-KEY": apiKey,
},
});
const output = await response.json();
return output;
};
// Make sure to return a promise
return {
getDelistedStocks: await getDelistedStocks(),
};
};

150
src/routes/list/delisted-stocks/+page.svelte
View File

@ -1,150 +0,0 @@
<script lang="ts">
import { screenWidth } from "$lib/store";
import { onMount } from "svelte";
export let data;
let rawData = data?.getDelistedStocks;
let marketCapList = rawData?.slice(0, 50);
async function handleScroll() {
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
if (isBottom && marketCapList?.length !== rawData?.length) {
const nextIndex = marketCapList?.length;
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
marketCapList = [...marketCapList, ...filteredNewResults];
}
}
onMount(async () => {
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
});
let charNumber = 40;
$: {
if ($screenWidth < 640) {
charNumber = 15;
} else {
charNumber = 40;
}
}
</script>
<section class="w-full overflow-hidden m-auto">
<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="#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 companies delisted from the exchange and no longer publicly
traded.
</div>
<div
class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg"
>
<div class="stat">
<div class="stat-title text-sm sm:text-lg font-semibold text-white">
Total Stocks
</div>
<div class="stat-value text-lg font-semibold text-white">
{rawData?.length}
</div>
</div>
<div class="stat">
<div class="stat-title text-sm sm:text-lg font-semibold text-white">
Total Market Cap
</div>
<div class="stat-value text-lg font-semibold text-white">---</div>
</div>
<div class="stat">
<div class="stat-title text-sm sm:text-lg font-semibold text-white">
Total Revenue
</div>
<div class="stat-value text-lg font-semibold text-white">---</div>
</div>
</div>
<!-- Page wrapper -->
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
<!-- Content area -->
<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]">Symbol</th>
<th class="text-white font-semibold text-[1rem]">Company</th>
<th class="text-white font-semibold text-[1rem]">IPO</th>
<th class="text-white font-semibold text-center text-[1rem]"
>Exchange</th
>
<th class="text-white font-semibold text-[1rem] text-end"
>Delisted</th
>
</tr>
</thead>
<tbody>
{#each marketCapList as item, index}
<!-- row -->
<tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
>
<td
class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
>
{item?.symbol}
</td>
<td
class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
>
{item?.companyName?.length > charNumber
? item?.companyName?.slice(0, charNumber) + "..."
: item?.companyName}
</td>
<td
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
>
{new Date(item?.ipoDate).toLocaleDateString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
})}
</td>
<td
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-center border-b-[#09090B]"
>
{item?.exchange}
</td>
<td
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
>
{new Date(item?.delistedDate).toLocaleDateString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
})}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</div>
</section>

11
src/routes/list/reit-stocks/+page.server.ts
View File

@ -1,9 +1,10 @@
export const load = async ({ locals }) => {
const getAllREITs = async () => {
const { apiKey, apiURL } = locals;
const postData = { filterList: "reit" };
const response = await fetch(apiURL + "/filter-stock-list", {
const getAllREITS = async () => {
const { apiKey, apiURL } = locals;
const postData = { filterList: 'reits' };
const response = await fetch(apiURL + "/list-category", {
method: "POST",
headers: {
"Content-Type": "application/json",
@ -19,6 +20,6 @@ export const load = async ({ locals }) => {
// Make sure to return a promise
return {
getAllREITs: await getAllREITs(),
getAllREITS: await getAllREITS(),
};
};

134
src/routes/list/reit-stocks/+page.svelte
View File

@ -2,9 +2,12 @@
import { screenWidth } from "$lib/store";
import { onMount } from "svelte";
import { abbreviateNumber } from "$lib/utils";
import TableHeader from "$lib/components/Table/TableHeader.svelte";
import HoverStockChart from "$lib/components/HoverStockChart.svelte";
import DownloadData from "$lib/components/DownloadData.svelte";
export let data;
let rawData = data?.getAllREITs;
let rawData = data?.getAllREITS;
let stockList = rawData?.slice(0, 50);
async function handleScroll() {
@ -24,6 +27,84 @@
};
});
let columns = [
{ key: "rank", label: "Rank", align: "center" },
{ key: "symbol", label: "Symbol", align: "left" },
{ key: "name", label: "Name", align: "left" },
{ key: "price", label: "Price", align: "right" },
{ key: "changesPercentage", label: "% Change", align: "right" },
{ key: "dividendYield", label: "Div. Yield", align: "right" },
{ key: "marketCap", label: "Market Cap", align: "right" },
];
let sortOrders = {
rank: { order: "none", type: "number" },
symbol: { order: "none", type: "string" },
name: { order: "none", type: "string" },
price: { order: "none", type: "number" },
changesPercentage: { order: "none", type: "number" },
dividendYield: { order: "none", type: "number" },
marketCap: { 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 = rawData;
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 = [...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
stockList = [...originalData].sort(compareValues)?.slice(0, 50);
};
$: charNumber = $screenWidth < 640 ? 20 : 30;
</script>
@ -45,28 +126,17 @@
the US stock market.
</div>
<div class="flex flex-row items-end justify-end w-fit ml-auto mt-5 mb-2">
<DownloadData {data} rawData={data?.getAllREITS} title="all_reits_stocks" />
</div>
<!-- Page wrapper -->
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
<!-- Content area -->
<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]">Symbol</th>
<th class="text-white font-semibold text-[1rem]">Company</th>
<th class="text-white font-semibold text-end text-[1rem]"
>Stock Price</th
>
<th class="text-white font-semibold text-center text-[1rem]"
>% Change</th
>
<th class="text-white font-semibold text-[1rem] text-end"
>Div. Yield</th
>
<th class="text-white font-semibold text-[1rem] text-end"
>Market Cap</th
>
</tr>
<TableHeader {columns} {sortOrders} {sortData} />
</thead>
<tbody>
{#each stockList as item}
@ -75,13 +145,17 @@
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
>
<td
class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
class="text-white font-semibold sm:font-normal text-center text-sm sm:text-[1rem] border-b-[#09090B]"
>
{item?.symbol}
{item?.rank}
</td>
<td class="text-[1rem] border-b-[#09090B]">
<HoverStockChart symbol={item?.symbol} />
</td>
<td
class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
class="text-white border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.name?.length > charNumber
? item?.name?.slice(0, charNumber) + "..."
@ -89,23 +163,29 @@
</td>
<td
class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
class="text-white text-end text-sm sm:text-[1rem] border-b-[#09090B]"
>
{item?.price}
</td>
<td
class="{item?.changesPercentage >= 0
? 'text-[#00FC50]'
: 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
class="text-white text-end text-sm sm:text-[1rem] border-b-[#09090B]"
>
{item?.changesPercentage?.toFixed(2)}%
{#if item?.changesPercentage >= 0}
<span class="text-[#00FC50]"
>+{item.changesPercentage?.toFixed(2)}%</span
>
{:else}
<span class="text-[#FF2F1F]"
>{item.changesPercentage?.toFixed(2)}%
</span>
{/if}
</td>
<td
class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
class="text-white text-end text-sm sm:text-[1rem] border-b-[#09090B]"
>
{item?.dividendYield?.toFixed(2)}%
{item?.dividendYield}%
</td>
<td