update financial page
This commit is contained in:
MuslemRahimi
parent
bf8cce77a5
commit
b9ab0ca632
@ -1,174 +1,203 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { stockTicker, screenWidth } from "$lib/store";
|
||||||
|
import { goto } from "$app/navigation";
|
||||||
|
import { abbreviateNumber } from "$lib/utils";
|
||||||
|
|
||||||
import {stockTicker, screenWidth} from '$lib/store';
|
export let topETFHolder;
|
||||||
import { goto } from '$app/navigation';
|
|
||||||
import { abbreviateNumber } from '$lib/utils';
|
async function etfSelector(state) {
|
||||||
|
//window?.scroll({ top: 0, left: 0, behavior: 'smooth' });
|
||||||
|
goto("/etf/" + state + "/");
|
||||||
export let topETFHolder;
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
async function etfSelector(state)
|
<!--Start ETF Holder Card -->
|
||||||
{
|
|
||||||
//window?.scroll({ top: 0, left: 0, behavior: 'smooth' });
|
<div
|
||||||
goto("/etf/"+state+"/")
|
class="space-y-3 sm:pt-5 hidden lg:block lg:{topETFHolder?.length !== 0
|
||||||
}
|
? ''
|
||||||
|
: 'hidden'}"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth <
|
||||||
</script>
|
640
|
||||||
<!--Start ETF Holder Card -->
|
? 'w-screen pt-16'
|
||||||
|
: ''} md:w-[420px] xl:w-[450px]"
|
||||||
<div class="space-y-3 sm:pt-5 hidden lg:block lg:{topETFHolder?.length !== 0 ? '' : 'hidden'}">
|
>
|
||||||
|
<div
|
||||||
<div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px]">
|
class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0"
|
||||||
|
>
|
||||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">
|
<h2 class="text-start text-2xl font-semibold text-white p-3 mt-3 ml-1">
|
||||||
<h2 class="text-start text-2xl font-semibold text-white p-3 mt-3 ml-1">
|
Top ETFs Holder
|
||||||
Top ETFs Holder
|
</h2>
|
||||||
</h2>
|
<p class="text-white mb-5 ml-4 mr-1">
|
||||||
<p class="text-white mb-5 ml-4 mr-1">
|
ETFs with the largest estimated holdings in {$stockTicker}.
|
||||||
ETFs with the largest estimated holdings in {$stockTicker}.
|
</p>
|
||||||
</p>
|
|
||||||
|
{#if topETFHolder?.length !== 0}
|
||||||
{#if topETFHolder?.length !== 0}
|
<div class="flex justify-start items-center w-full m-auto">
|
||||||
|
<table
|
||||||
|
class="table table-sm table-compact text-start flex justify-start items-center w-full px-3 m-auto"
|
||||||
|
>
|
||||||
<div class="flex justify-start items-center w-full m-auto ">
|
<thead>
|
||||||
<table class="table table-sm table-compact text-start flex justify-start items-center w-full px-3 m-auto">
|
<tr>
|
||||||
<thead>
|
<th
|
||||||
<tr >
|
class="text-white font-semibold text-sm text-start bg-[#000] sm:bg-[#09090B]"
|
||||||
<th class="text-white font-semibold text-sm text-start bg-[#000] sm:bg-[#09090B]">Company Name</th>
|
>Company Name</th
|
||||||
<th class="text-white font-semibold text-sm text-end bg-[#000] sm:bg-[#09090B]">Total Assets</th>
|
>
|
||||||
<th class="text-white font-semibold text-sm text-end bg-[#000] sm:bg-[#09090B]">% of Fund</th>
|
<th
|
||||||
</tr>
|
class="text-white font-semibold text-sm text-end bg-[#000] sm:bg-[#09090B]"
|
||||||
</thead>
|
>Total Assets</th
|
||||||
<tbody>
|
>
|
||||||
{#each topETFHolder as item, index}
|
<th
|
||||||
<tr class="sm:hover:text-white text-blue-400 sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#000] sm:bg-[#09090B] border-b border-[#000] sm:border-[#27272A]">
|
class="text-white font-semibold text-sm text-end bg-[#000] sm:bg-[#09090B]"
|
||||||
{#if index <=6}
|
>% of Fund</th
|
||||||
|
>
|
||||||
<td >
|
</tr>
|
||||||
<a href={"/etf/"+item?.symbol} class="flex flex-row items-center">
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{#each topETFHolder as item, index}
|
||||||
|
<tr
|
||||||
|
class="sm:hover:text-white text-blue-400 sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#000] sm:bg-[#09090B] border-b border-[#000] sm:border-[#27272A]"
|
||||||
|
>
|
||||||
|
{#if index <= 6}
|
||||||
|
<td>
|
||||||
|
<label
|
||||||
|
on:click={() => goto("/etf/" + item?.symbol)}
|
||||||
|
class="flex flex-row items-center cursor-pointer"
|
||||||
|
>
|
||||||
<div class="flex flex-col w-full">
|
<div class="flex flex-col w-full">
|
||||||
<span class="text-sm sm:text-[1rem]">{item?.symbol}</span>
|
<span class="text-sm sm:text-[1rem]"
|
||||||
|
>{item?.symbol}</span
|
||||||
|
>
|
||||||
<span class="text-white text-sm">
|
<span class="text-white text-sm">
|
||||||
{#if typeof item?.name !== 'undefined'}
|
{#if typeof item?.name !== "undefined"}
|
||||||
{item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
|
{item?.name?.length > 20
|
||||||
|
? item?.name?.slice(0, 20) + "..."
|
||||||
|
: item?.name}
|
||||||
{:else}
|
{:else}
|
||||||
n/a
|
n/a
|
||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</label>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td class="text-white text-end text-sm sm:text-[1rem]">
|
||||||
|
{item?.totalAssets !== null
|
||||||
|
? abbreviateNumber(item?.totalAssets)
|
||||||
|
: "-"}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td class="text-white text-end text-sm sm:text-[1rem]">
|
||||||
|
{item?.weightPercentage !== null
|
||||||
|
? item?.weightPercentage?.toFixed(2)
|
||||||
|
: "-"}%
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white text-end text-sm sm:text-[1rem]">
|
|
||||||
{item?.totalAssets !== null ? abbreviateNumber(item?.totalAssets) : '-'}
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td class="text-white text-end text-sm sm:text-[1rem]">
|
|
||||||
{item?.weightPercentage !== null ? item?.weightPercentage?.toFixed(2) : '-'}%
|
|
||||||
</td>
|
|
||||||
{/if}
|
{/if}
|
||||||
</tr>
|
</tr>
|
||||||
{/each}
|
{/each}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
|
||||||
|
|
||||||
{:else}
|
|
||||||
<div class=" mt-20 flex justify-center items-center text-2xl font-bold text-slate-700 mb-20 m-auto">
|
|
||||||
No data available
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--End ETF Holder Card -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--Start Mobile ETF Holder Card-->
|
|
||||||
<div class="lg:hidden space-y-3 sm:pt-5">
|
|
||||||
|
|
||||||
<div class="bg-[#000] h-auto w-screen">
|
|
||||||
|
|
||||||
<!--Start Header-->
|
|
||||||
<div class="w-full p-1 flex flex-col items-center pb-5 h-auto">
|
|
||||||
<h2 class="text-center m-auto text-lg font-semibold text-white mt-5">
|
|
||||||
Top ETFs Holder
|
|
||||||
</h2>
|
|
||||||
<div class="flex flex-col items-center mt-10 mb-5 w-full px-8">
|
|
||||||
<span class="text-white text-center text-md">
|
|
||||||
Find the ETFs with the highest portfolio weights for this stock.
|
|
||||||
</span>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div
|
||||||
|
class=" mt-20 flex justify-center items-center text-2xl font-bold text-slate-700 mb-20 m-auto"
|
||||||
|
>
|
||||||
|
No data available
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--End ETF Holder Card -->
|
||||||
|
|
||||||
|
<!--Start Mobile ETF Holder Card-->
|
||||||
|
<div class="lg:hidden space-y-3 sm:pt-5">
|
||||||
|
<div class="bg-[#000] h-auto w-screen">
|
||||||
|
<!--Start Header-->
|
||||||
|
<div class="w-full p-1 flex flex-col items-center pb-5 h-auto">
|
||||||
|
<h2 class="text-center m-auto text-lg font-semibold text-white mt-5">
|
||||||
|
Top ETFs Holder
|
||||||
|
</h2>
|
||||||
|
<div class="flex flex-col items-center mt-10 mb-5 w-full px-8">
|
||||||
|
<span class="text-white text-center text-md">
|
||||||
|
Find the ETFs with the highest portfolio weights for this stock.
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<!--End Header-->
|
</div>
|
||||||
|
<!--End Header-->
|
||||||
{#if topETFHolder?.length !== 0}
|
|
||||||
<div class="flex justify-start items-center w-full m-auto mt-10 overflow-x-scroll">
|
{#if topETFHolder?.length !== 0}
|
||||||
<table class="table table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto">
|
<div
|
||||||
<thead>
|
class="flex justify-start items-center w-full m-auto mt-10 overflow-x-scroll"
|
||||||
<tr>
|
>
|
||||||
<th class="text-white font-semibold text-sm text-start bg-[#000]">Company</th>
|
<table
|
||||||
<th class="text-white font-semibold text-sm text-end bg-[#000]">Total Assets</th>
|
class="table table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto"
|
||||||
<th class="text-white font-semibold text-sm text-end bg-[#000]">% of Fund</th>
|
>
|
||||||
</tr>
|
<thead>
|
||||||
</thead>
|
<tr>
|
||||||
<tbody>
|
<th class="text-white font-semibold text-sm text-start bg-[#000]"
|
||||||
{#each topETFHolder as item, index}
|
>Company</th
|
||||||
<tr on:click={() => etfSelector(item?.symbol)} class="text-white cursor-pointer bg-[#000] border-b border-[#000]">
|
>
|
||||||
{#if index <=6}
|
<th class="text-white font-semibold text-sm text-end bg-[#000]"
|
||||||
|
>Total Assets</th
|
||||||
|
>
|
||||||
|
<th class="text-white font-semibold text-sm text-end bg-[#000]"
|
||||||
|
>% of Fund</th
|
||||||
|
>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{#each topETFHolder as item, index}
|
||||||
|
<tr
|
||||||
|
on:click={() => etfSelector(item?.symbol)}
|
||||||
|
class="text-white cursor-pointer bg-[#000] border-b border-[#000]"
|
||||||
|
>
|
||||||
|
{#if index <= 6}
|
||||||
<td class="text-white whitespace-nowrap">
|
<td class="text-white whitespace-nowrap">
|
||||||
<div class="flex flex-row items-center">
|
<div class="flex flex-row items-center">
|
||||||
<div class="flex flex-col w-full">
|
<div class="flex flex-col w-full">
|
||||||
<span class="text-blue-400 text-sm font-medium">{item?.symbol}</span>
|
<span class="text-blue-400 text-sm font-medium"
|
||||||
|
>{item?.symbol}</span
|
||||||
|
>
|
||||||
<span class="text-white text-sm">
|
<span class="text-white text-sm">
|
||||||
{#if typeof item?.name !== 'undefined'}
|
{#if typeof item?.name !== "undefined"}
|
||||||
{item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
|
{item?.name?.length > 20
|
||||||
|
? item?.name?.slice(0, 20) + "..."
|
||||||
|
: item?.name}
|
||||||
{:else}
|
{:else}
|
||||||
n/a
|
n/a
|
||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white text-end font-semibold ">
|
<td class="text-white text-end font-semibold">
|
||||||
{item?.totalAssets !== null ? abbreviateNumber(item?.totalAssets) : '-'}
|
{item?.totalAssets !== null
|
||||||
</td>
|
? abbreviateNumber(item?.totalAssets)
|
||||||
|
: "-"}
|
||||||
<td class="text-white font-semibold text-end">
|
</td>
|
||||||
{item?.weightPercentage !== null ? abbreviateNumber(item?.weightPercentage)?.toFixed(2) : '-'}%
|
|
||||||
</td>
|
<td class="text-white font-semibold text-end">
|
||||||
|
{item?.weightPercentage !== null
|
||||||
|
? abbreviateNumber(item?.weightPercentage)?.toFixed(2)
|
||||||
|
: "-"}%
|
||||||
|
</td>
|
||||||
{/if}
|
{/if}
|
||||||
</tr>
|
</tr>
|
||||||
{/each}
|
{/each}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
|
||||||
|
|
||||||
{:else}
|
|
||||||
<div class=" mt-20 flex justify-center items-center text-2xl font-bold text-slate-700 mb-20 m-auto">
|
|
||||||
No data available
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div
|
||||||
|
class=" mt-20 flex justify-center items-center text-2xl font-bold text-slate-700 mb-20 m-auto"
|
||||||
|
>
|
||||||
|
No data available
|
||||||
</div>
|
</div>
|
||||||
<!--End Mobile ETF Holder Card-->
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--End Mobile ETF Holder Card-->
|
||||||
|
|||||||
@ -823,7 +823,7 @@
|
|||||||
<thead>
|
<thead>
|
||||||
<tr class="text-white">
|
<tr class="text-white">
|
||||||
<td
|
<td
|
||||||
class="text-start bg-[#09090B] text-white text-sm sm:text-[1rem] font-bold pr-10"
|
class="text-start bg-[#09090B] text-white text-sm font-semibold pr-10"
|
||||||
>Year</td
|
>Year</td
|
||||||
>
|
>
|
||||||
{#each balanceSheet as balance}
|
{#each balanceSheet as balance}
|
||||||
|
|||||||
@ -750,11 +750,10 @@
|
|||||||
<div
|
<div
|
||||||
class="w-full rounded-none sm:rounded-lg m-auto overflow-x-auto"
|
class="w-full rounded-none sm:rounded-lg m-auto overflow-x-auto"
|
||||||
>
|
>
|
||||||
<table class="table w-full">
|
<table class="table table-sm table-compact w-full">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="text-white">
|
<tr class="text-white">
|
||||||
<td
|
<td class="text-start text-white text-sm font-semibold"
|
||||||
class="text-start text-white text-sm sm:text-[1rem] font-semibold"
|
|
||||||
>Year</td
|
>Year</td
|
||||||
>
|
>
|
||||||
{#each cashFlow as cash}
|
{#each cashFlow as cash}
|
||||||
@ -909,7 +908,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
<tr class="text-white odd:bg-[#27272A]">
|
<tr class="text-white odd:bg-[#27272A]">
|
||||||
<td
|
<td
|
||||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
class="text-start whitespace-nowrap border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||||
>Sales Maturities Of Investments</td
|
>Sales Maturities Of Investments</td
|
||||||
>
|
>
|
||||||
{#each cashFlow as cash}
|
{#each cashFlow as cash}
|
||||||
|
|||||||
@ -698,13 +698,10 @@
|
|||||||
<div
|
<div
|
||||||
class="w-full rounded-none sm:rounded-lg m-auto overflow-x-auto"
|
class="w-full rounded-none sm:rounded-lg m-auto overflow-x-auto"
|
||||||
>
|
>
|
||||||
<table class="table w-full">
|
<table class="table table-sm table-compact w-full">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="text-white">
|
<tr class="text-white">
|
||||||
<td
|
<td class="text-start text-sm font-semibold">Year</td>
|
||||||
class="text-start text-sm sm:text-[1rem] font-bold pr-10"
|
|
||||||
>Year</td
|
|
||||||
>
|
|
||||||
{#each ratios as item}
|
{#each ratios as item}
|
||||||
{#if filterRule === "annual"}
|
{#if filterRule === "annual"}
|
||||||
<td
|
<td
|
||||||
|
|||||||
@ -169,80 +169,78 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if rawData?.length !== 0}
|
{#if rawData?.length !== 0}
|
||||||
<div class="grid grid-cols-1 gap-2">
|
<div class="app w-full">
|
||||||
<div class="app w-full">
|
<Chart {init} options={optionsData} class="chart" />
|
||||||
<Chart {init} options={optionsData} class="chart" />
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 class="mt-10 text-xl text-gray-200 font-bold">History</h2>
|
<h2 class="mt-10 text-xl text-gray-200 font-bold">History</h2>
|
||||||
|
|
||||||
<div class="w-full overflow-x-scroll">
|
<div class="w-full overflow-x-scroll">
|
||||||
<table
|
<table
|
||||||
class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
|
class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
|
||||||
>
|
>
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="border border-slate-800">
|
<tr class="border border-slate-800">
|
||||||
<th
|
<th
|
||||||
class="text-white font-semibold text-start text-sm sm:text-[1rem]"
|
class="text-white font-semibold text-start text-sm sm:text-[1rem]"
|
||||||
>Quarter</th
|
>Quarter</th
|
||||||
|
>
|
||||||
|
<th
|
||||||
|
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
|
||||||
|
>Value</th
|
||||||
|
>
|
||||||
|
<th
|
||||||
|
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
|
||||||
|
>% Change</th
|
||||||
|
>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{#each tableList as item}
|
||||||
|
<!-- row -->
|
||||||
|
<tr
|
||||||
|
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
|
||||||
>
|
>
|
||||||
<th
|
{new Date(item?.date ?? null)?.toLocaleString(
|
||||||
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
|
"en-US",
|
||||||
>Value</th
|
{
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
year: "numeric",
|
||||||
|
},
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]"
|
||||||
>
|
>
|
||||||
<th
|
{item?.value !== null
|
||||||
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
|
? abbreviateNumber(item?.value)
|
||||||
>% Change</th
|
: "-"}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]"
|
||||||
>
|
>
|
||||||
|
{#if item?.valueGrowth > 0}
|
||||||
|
<span class="text-[#37C97D]">
|
||||||
|
+{item?.valueGrowth?.toFixed(2)}%
|
||||||
|
</span>
|
||||||
|
{:else if item?.valueGrowth < 0}
|
||||||
|
<span class="text-[#FF2F1F]">
|
||||||
|
{item?.valueGrowth?.toFixed(2)}%
|
||||||
|
</span>
|
||||||
|
{:else}
|
||||||
|
-
|
||||||
|
{/if}
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
{/each}
|
||||||
<tbody>
|
</tbody>
|
||||||
{#each tableList as item, index}
|
</table>
|
||||||
<!-- row -->
|
|
||||||
<tr
|
|
||||||
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
|
|
||||||
>
|
|
||||||
{new Date(item?.date ?? null)?.toLocaleString(
|
|
||||||
"en-US",
|
|
||||||
{
|
|
||||||
month: "short",
|
|
||||||
day: "numeric",
|
|
||||||
year: "numeric",
|
|
||||||
},
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td
|
|
||||||
class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]"
|
|
||||||
>
|
|
||||||
{item?.value !== null
|
|
||||||
? abbreviateNumber(item?.value)
|
|
||||||
: "-"}
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td
|
|
||||||
class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]"
|
|
||||||
>
|
|
||||||
{#if item?.valueGrowth > 0}
|
|
||||||
<span class="text-[#37C97D]">
|
|
||||||
+{item?.valueGrowth?.toFixed(2)}%
|
|
||||||
</span>
|
|
||||||
{:else if item?.valueGrowth < 0}
|
|
||||||
<span class="text-[#FF2F1F]">
|
|
||||||
{item?.valueGrowth?.toFixed(2)}%
|
|
||||||
</span>
|
|
||||||
{:else}
|
|
||||||
-
|
|
||||||
{/if}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{/each}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<h2
|
<h2
|
||||||
|
|||||||
@ -121,7 +121,7 @@ updateYearRange()
|
|||||||
<div class="mb-6">
|
<div class="mb-6">
|
||||||
{#if Object?.keys(quantStats)?.length !== 0}
|
{#if Object?.keys(quantStats)?.length !== 0}
|
||||||
<div
|
<div
|
||||||
class="space-y-5 xs:space-y-6 lg:grid 2xl:grid-cols-2 lg:space-x-6 2xl:space-x-10 lg:space-y-0"
|
class="space-y-5 xs:space-y-6 lg:grid 2xl:grid-cols-2 2xl:space-x-10 lg:space-y-0"
|
||||||
>
|
>
|
||||||
<div class="flex flex-col space-y-5 xs:space-y-6 lg:space-y-8">
|
<div class="flex flex-col space-y-5 xs:space-y-6 lg:space-y-8">
|
||||||
<div
|
<div
|
||||||
@ -164,38 +164,7 @@ updateYearRange()
|
|||||||
>
|
>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">
|
|
||||||
Important Dates
|
|
||||||
</h2>
|
|
||||||
<p
|
|
||||||
class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
|
|
||||||
>
|
|
||||||
The last earnings date was Wednesday, October 23, 2024, after
|
|
||||||
market close.
|
|
||||||
</p>
|
|
||||||
<table class="w-full">
|
|
||||||
<tbody
|
|
||||||
><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
|
||||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
|
||||||
><span>Earnings Date</span>
|
|
||||||
</td>
|
|
||||||
<td
|
|
||||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
|
||||||
title="Oct 23, 2024">Oct 23, 2024</td
|
|
||||||
>
|
|
||||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
|
||||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
|
||||||
><span>Ex-Dividend Date</span>
|
|
||||||
</td>
|
|
||||||
<td
|
|
||||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
|
||||||
title="n/a">n/a</td
|
|
||||||
>
|
|
||||||
</tr></tbody
|
|
||||||
>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">
|
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">
|
||||||
Share Statistics
|
Share Statistics
|
||||||
@ -568,7 +537,7 @@ updateYearRange()
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col space-y-5 xs:space-y-6 lg:space-y-8">
|
<div class="flex flex-col space-y-5 xs:space-y-6 lg:space-y-8">
|
||||||
<div>
|
<div class="mt-9 2xl:mt-0">
|
||||||
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">
|
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">
|
||||||
Stock Price Statistics
|
Stock Price Statistics
|
||||||
</h2>
|
</h2>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user