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

update etf holding

Browse Source
This commit is contained in:
MuslemRahimi 2024-10-30 12:02:12 +01:00
parent 415029d0ac
commit 991f666269
4 changed files with 68 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/routes/etf/[tickerID]/holdings/+page.svelte
View File

@ -32,11 +32,13 @@
};
});
$: charNumber = $screenWidth < 640 ? 20 : 30;
$: charNumber = $screenWidth < 640 ? 20 : 20;
let columns = [
{ key: "asset", label: "Symbol", align: "left" },
{ key: "name", label: "Name", align: "left" },
{ key: "price", label: "Price", align: "right" },
{ key: "changesPercentage", label: "Change", align: "right" },
{ key: "sharesNumber", label: "Shares", align: "right" },
{ key: "weightPercentage", label: "% Weight", align: "right" },
];
@ -44,6 +46,8 @@
let sortOrders = {
asset: { order: "none", type: "string" },
name: { order: "none", type: "string" },
price: { order: "none", type: "number" },
changesPercentage: { order: "none", type: "number" },
sharesNumber: { order: "none", type: "number" },
weightPercentage: { order: "none", type: "number" },
};
@ -110,11 +114,11 @@
if (data?.user?.tier === "Pro") {
// Add headers row
const csvRows = [];
csvRows.push("Symbol,Name,Shares,Weight");
csvRows.push("Symbol,Name,Price, Change, Shares,Weight");
// Add data rows
rawData.forEach((item) => {
const csvRow = `${item?.asset},${item?.name},${item?.sharesNumber},${item?.weightPercentage}`;
const csvRow = `${item?.asset},${item?.name},${item?.price},${item?.changesPercentage},${item?.sharesNumber},${item?.weightPercentage}`;
csvRows.push(csvRow);
});
@ -271,6 +275,32 @@
: formatString(item?.name)}
</td>
<td
class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b border-[#09090B] text-end"
>
{item?.price}
</td>
<td
class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b border-[#09090B] text-end"
>
{#if item?.changesPercentage >= 0}
<span class="text-[#00FC50]"
>+{item?.changesPercentage >= 1000
? abbreviateNumber(item?.changesPercentage)
: item?.changesPercentage?.toFixed(2)}%</span
>
{:else if item?.changesPercentage < 0}
<span class="text-[#FF2F1F]"
>{item?.changesPercentage <= -1000
? abbreviateNumber(item?.changesPercentage)
: item?.changesPercentage?.toFixed(2)}%
</span>
{:else}
-
{/if}
</td>
<td
class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b border-[#09090B] text-end"
>

69
src/routes/etf/etf-providers/+layout.svelte
View File

@ -59,9 +59,9 @@
</svelte:head>
<section
class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40"
class="w-full max-w-screen-2xl overflow-hidden min-h-screen pt-5 px-4 lg:px-3"
>
<div class="text-sm sm:text-[1rem] breadcrumbs mb-2 ml-4">
<div class="text-sm sm:text-[1rem] breadcrumbs">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
<li>
@ -79,62 +79,9 @@
class="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4 lg:pr-5">
<div
class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
<!-- Start Column -->
<div>
<div class="flex flex-row justify-center items-center">
<h1
class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
>
ETF Providers
</h1>
</div>
<span
class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center"
>
Companies issue and manage ETFs actively traded on the U.S.
stock market.
</span>
</div>
<!-- End Column -->
<!-- Start Column -->
<div
class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"
>
<svg
class="w-40 -my-5"
viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="5" result="glow" />
<feMerge>
<feMergeNode in="glow" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<path
fill="#1E40AF"
d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
transform="translate(100 100)"
filter="url(#glow)"
/>
</svg>
<div class="z-1 absolute top-4">
<img class="w-32 ml-4" src={logo} alt="logo" loading="lazy" />
</div>
</div>
<!-- End Column -->
</div>
</div>
<h1 class="mb-6 text-white text-2xl sm:text-3xl font-bold">
ETF Providers
</h1>
<div class="w-full m-auto mb-10 bg-[#09090B] overflow-hidden">
<div class="w-full flex flex-col justify-center items-center">
@ -154,7 +101,7 @@
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥
Pro Subscription
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
@ -174,7 +121,7 @@
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Top Analyst 📊
Top Analyst
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
@ -193,7 +140,7 @@
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Congress Trading 🇺🇸
Congress Trading
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>

48
src/routes/etf/etf-providers/[slug]/+page.svelte
View File

@ -70,7 +70,7 @@
<section class="w-full overflow-hidden m-auto">
{#if rawData?.length !== 0}
<div
class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5 mb-4"
class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-600 sm:rounded-lg h-auto p-5 mb-4"
>
<svg
class="w-5 h-5 inline-block flex-shrink-0 mr-0.5 sm:mr-2"
@ -93,32 +93,36 @@
{/if}
<div
class="stats stats-horizontal bg-[#27272A] shadow w-full rounded-none sm:rounded-lg overflow-hidden"
class="mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
>
<div class="stat">
<div class="stat-title text-white text-sm sm:text-lg font-semibold">
Listed Funds
</div>
<div class="stat-value text-lg font-semibold text-white">
{rawData?.length}
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
<div class="flex items-center justify-between sm:block">
<div class="text-sm font-normal text-white">Listed Funds</div>
<div
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
>
{rawData?.length}
</div>
</div>
</div>
<div class="stat">
<div class="stat-title text-white text-sm sm:text-lg font-semibold">
Total Assets
</div>
<div class="stat-value text-lg font-semibold text-white">
{abbreviateNumber(totalAssets)}
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
<div class="flex items-center justify-between sm:block">
<div class="text-sm font-normal text-white">Total Assets</div>
<div
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
>
{abbreviateNumber(totalAssets)}
</div>
</div>
</div>
<div class="stat">
<div class="stat-title text-white text-sm sm:text-lg font-semibold">
Average Cost
</div>
<div class="stat-value text-lg font-semibold text-white">
{avgExpenseRatio?.toFixed(2)}%
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
<div class="flex items-center justify-between sm:block">
<div class="text-sm font-normal text-white">Average Cost</div>
<div
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
>
{avgExpenseRatio?.toFixed(2)}%
</div>
</div>
</div>
</div>

2
src/routes/stocks/[tickerID]/+page.svelte
View File

@ -1018,7 +1018,7 @@
? "before:content-['+'] text-[#00FC50]"
: "text-[#FF2F1F]"}
>
{displayLegend?.change}%
{displayLegend?.change ?? "-"}%
</span>
<span class="hidden text-gray-200 sm:block"
>({displayData})</span