resize stock page
This commit is contained in:
MuslemRahimi
parent
9d563d9ae1
commit
6d2d4f9ec0
@ -200,11 +200,9 @@ $: {
|
||||
|
||||
|
||||
|
||||
<section class="bg-[#0F0F0F] overflow-hidden text-white h-full sm:mb-0">
|
||||
<div class="flex justify-center w-fit m-auto h-full overflow-hidden">
|
||||
<div class="relative flex justify-center items-center overflow-hidden">
|
||||
<main>
|
||||
<div class="w-fit sm:w-full sm:max-w-2xl m-auto mt-5 sm:mt-0">
|
||||
<section class="overflow-hidden text-white h-full pb-8 sm:pb-2">
|
||||
<main class="overflow-hidden ">
|
||||
<div class="w-fit sm:w-full m-auto mt-5 sm:mt-0">
|
||||
|
||||
<div class="flex flex-row items-center">
|
||||
<label for="predictiveFundamentalsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
|
||||
@ -243,7 +241,7 @@ $: {
|
||||
</select>
|
||||
|
||||
|
||||
<div class="flex flex-row items-center ml-2 sm:ml-0 justify-start w-[90vw] sm:w-[560px] h-[220px] sm:h-[250px] sm:pl-3 sm:pr-3 pt-4 pb-5 mt-5 sm:mt-10">
|
||||
<div class="flex flex-row items-center ml-2 sm:ml-0 justify-start w-[90vw] sm:w-full h-[220px] sm:h-[250px] sm:pl-3 sm:pr-3 pt-4 pb-5 mt-5 sm:mt-10">
|
||||
|
||||
|
||||
<div class="chart-container h-[250px]">
|
||||
@ -295,7 +293,7 @@ $: {
|
||||
|
||||
|
||||
|
||||
<div class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto rounded-none sm:rounded-lg overflow-hidden overflow-x-scroll pr-10">
|
||||
<div class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto rounded-none sm:rounded-lg overflow-hidden overflow-x-scroll">
|
||||
<table class="table table-sm shaodow table-pin-cols table-compact rounded-none sm:rounded-md w-full bg-[#0F0F0F] border-bg-[#0F0F0F]">
|
||||
<thead class="">
|
||||
<tr class="">
|
||||
@ -361,9 +359,8 @@ $: {
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
@ -18,26 +18,17 @@ function splitIntoParagraphs(text) {
|
||||
|
||||
let paragraphs = splitIntoParagraphs(rawData?.bullSays);
|
||||
|
||||
function changeMode(state:string) {
|
||||
mode = state;
|
||||
if(mode === 'bullish') {
|
||||
|
||||
function handleMode(i) {
|
||||
activeIdx = i;
|
||||
if(activeIdx === 0) {
|
||||
paragraphs = splitIntoParagraphs(rawData?.bullSays);
|
||||
}
|
||||
else if (mode === 'bearish') {
|
||||
else if (activeIdx === 1) {
|
||||
paragraphs = splitIntoParagraphs(rawData?.bearSays);
|
||||
}
|
||||
}
|
||||
|
||||
function handleMode() {
|
||||
if(mode === 'bullish') {
|
||||
mode = 'bearish'
|
||||
changeMode(mode)
|
||||
} else {
|
||||
mode = 'bullish';
|
||||
changeMode(mode)
|
||||
}
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
title: "Bull Case",
|
||||
@ -46,6 +37,7 @@ const tabs = [
|
||||
title: "Bear Case",
|
||||
},
|
||||
];
|
||||
|
||||
let activeIdx = 0;
|
||||
|
||||
$: {
|
||||
@ -89,13 +81,10 @@ $: {
|
||||
<AnimateSharedLayout>
|
||||
{#each tabs as item, i}
|
||||
<button
|
||||
on:click={handleMode}
|
||||
on:click={() => handleMode(i)}
|
||||
class="group relative z-[1] rounded-full px-6 py-1 {activeIdx === i
|
||||
? 'z-0'
|
||||
: ''} "
|
||||
on:click={() => {
|
||||
activeIdx = i;
|
||||
}}
|
||||
>
|
||||
{#if activeIdx === i}
|
||||
<Motion
|
||||
@ -120,13 +109,13 @@ $: {
|
||||
|
||||
|
||||
<!--End Header-->
|
||||
<span class="text-gray-200 text-xs sm:text-[0.85rem] italic mt-6 sm:ml-auto">
|
||||
<span class="text-gray-200 text-xs sm:text-[0.915rem] italic mt-6 sm:ml-auto">
|
||||
Updated {rawData?.date}
|
||||
</span>
|
||||
<div class="flex mt-5 h-auto">
|
||||
|
||||
<div class="{mode === 'bullish' ? 'bg-[#10DB06]' : 'bg-[#FF2F1F]'} w-3.5 rounded-l-xl" />
|
||||
<span class="text-gray-100 ml-3 text-sm ">
|
||||
<div class="{activeIdx === 0 ? 'bg-[#10DB06]' : 'bg-[#FF2F1F]'} w-3.5 rounded-l-xl" />
|
||||
<span class="text-gray-100 ml-3 text-[0.915rem] ">
|
||||
{#if showFullText}
|
||||
{#each (showFullText ? paragraphs : paragraphs?.slice(0,1)) as paragraph, index}
|
||||
<p class="{index !== 0 ? 'mt-1' : ''} pr-1">{paragraph} {paragraphs?.length <= index+1 ? '' : '.'}</p>
|
||||
|
||||
@ -158,7 +158,7 @@ function findLowestAndhighestIV(data, lastDateStr) {
|
||||
axisLabel: {
|
||||
formatter: function (value, index) {
|
||||
if (index % 2 === 0) {
|
||||
return value?.toFixed(1)+'%'
|
||||
return value?.toFixed(0)+'%'
|
||||
} else {
|
||||
return ''; // Hide this tick
|
||||
}
|
||||
|
||||
@ -18,7 +18,6 @@ export let analystRating
|
||||
|
||||
|
||||
|
||||
|
||||
<TickerInfoCard stockDeck={stockDeck} />
|
||||
|
||||
|
||||
@ -30,4 +29,3 @@ export let analystRating
|
||||
<SimilarTickerCard similarstock={similarstock}/>
|
||||
|
||||
<TopETFTickerHolder topETFHolder={topETFHolder}/>
|
||||
|
||||
|
||||
@ -571,11 +571,11 @@ $: {
|
||||
<!--End Mobile Navbar-->
|
||||
|
||||
|
||||
<div class="w-full xl:w-fit max-w-3xl sm:max-w-6xl m-auto px-3 sm:px-6">
|
||||
<div class="w-full xl:w-fit max-w-3xl sm:max-w-6xl m-auto px-3">
|
||||
|
||||
<div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
|
||||
<!-- Main content -->
|
||||
<div class="pb-12 md:pb-20 w-full max-w-3xl lg:max-w-2xl">
|
||||
<div class="pb-12 md:pb-20 w-full max-w-5xl lg:max-w-3xl">
|
||||
<div class="md:pr-6 lg:pr-10">
|
||||
|
||||
|
||||
|
||||
@ -751,12 +751,12 @@ function changeChartType() {
|
||||
|
||||
<section class="bg-[#0F0F0F] min-h-screen pb-40 overflow-hidden">
|
||||
|
||||
<div class="w-full max-w-3xl m-auto overflow-hidden">
|
||||
<div class="w-full max-w-4xl m-auto overflow-hidden">
|
||||
|
||||
|
||||
<div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
|
||||
<!-- Main content -->
|
||||
<div class="pb-12 md:pb-20 w-full max-w-2xl sm:pr-6 xl:pr-0">
|
||||
<div class="pb-12 md:pb-20 w-full max-w-3xl sm:pr-6 xl:pr-0">
|
||||
<div class="xl:pr-10">
|
||||
|
||||
|
||||
|
||||
@ -509,7 +509,7 @@ onMount(async() => {
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each (data?.user?.tier === 'Pro' ? insiderTradingList : insiderTradingList?.slice(0,3)) as item, index}
|
||||
<tr class="text-gray-200 bg-[#0F0F0F] {index+1 === insiderTradingList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
|
||||
<tr class="text-gray-200 odd:bg-[#202020] {index+1 === insiderTradingList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
|
||||
|
||||
<td class="text-gray-200 border-b border-[#0F0F0F]">
|
||||
<div class="flex flex-col">
|
||||
@ -532,7 +532,7 @@ onMount(async() => {
|
||||
{#if item?.transactionType === 'Bought'}
|
||||
<span class="text-[#10DB06]">Bought</span>
|
||||
{:else if item?.transactionType === 'Grant'}
|
||||
<span class="text-[#8f95a1]">Grant</span>
|
||||
<span class="text-white">Grant</span>
|
||||
{:else if item?.transactionType === 'Sold'}
|
||||
<span class="text-[#FF2F1F]">Sold</span>
|
||||
{:else if item?.transactionType === 'Exercise'}
|
||||
|
||||
@ -586,170 +586,170 @@ $: {
|
||||
|
||||
|
||||
<!-- row -->
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Cash & Equivalents</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Cash & Equivalents</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.cashAndCashEquivalents,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.cashAndCashEquivalents,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Short-Term Investments</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Short-Term Investments</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.shortTermInvestments,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.shortTermInvestments,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Long-Term Investments</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Long-Term Investments</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.longTermInvestments,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.longTermInvestments,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Other Long-Term Assets</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Other Long-Term Assets</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.otherNonCurrentAssets,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.otherNonCurrentAssets,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Receivables</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Receivables</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.netReceivables,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.netReceivables,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Inventory</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Inventory</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.inventory,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.inventory,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Other Current Assets</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Other Current Assets</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.otherCurrentAssets,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.otherCurrentAssets,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Total Current Assets</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Total Current Assets</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.totalCurrentAssets,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.totalCurrentAssets,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Property, Plant & Equipment</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Property, Plant & Equipment</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.propertyPlantEquipmentNet,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.propertyPlantEquipmentNet,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Goodwill & Intangibles</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Goodwill & Intangibles</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.goodwillAndIntangibleAssets,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.goodwillAndIntangibleAssets,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Total Long-Term Assets</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Total Long-Term Assets</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.totalNonCurrentAssets,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.totalNonCurrentAssets,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Total Assets</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Total Assets</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.totalAssets,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.totalAssets,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Account Payables</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Account Payables</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.accountPayables,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.accountPayables,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Deferred Revenue</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Deferred Revenue</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.deferredRevenue,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.deferredRevenue,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Short-Term Debt</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Short-Term Debt</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.shortTermDebt,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.shortTermDebt,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Other Current Liabilities</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Other Current Liabilities</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.otherCurrentLiabilities,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.otherCurrentLiabilities,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Total Current Liabilities</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Total Current Liabilities</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.totalCurrentLiabilities,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.totalCurrentLiabilities,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Long-Term Debt</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Long-Term Debt</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.longTermDebt,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.longTermDebt,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Other Long-Term Liabilities</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Other Long-Term Liabilities</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.otherNonCurrentLiabilities,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.otherNonCurrentLiabilities,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Total Long-Term Liabilities</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Total Long-Term Liabilities</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.totalNonCurrentLiabilities,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.totalNonCurrentLiabilities,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Total Liabilities</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Total Liabilities</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.totalLiabilities,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.totalLiabilities,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Total Debt</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Total Debt</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.totalDebt,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.totalDebt,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Common Stock</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Common Stock</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.commonStock,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.commonStock,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Retained Earnings</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Retained Earnings</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.retainedEarnings,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.retainedEarnings,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Comprehensive Income</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Comprehensive Income</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.accumulatedOtherComprehensiveIncomeLoss,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.accumulatedOtherComprehensiveIncomeLoss,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Shareholders' Equity</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Shareholders' Equity</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.totalStockholdersEquity,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.totalStockholdersEquity,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Total Investments</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Total Investments</td>
|
||||
{#each balanceSheet as balance}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(balance?.totalInvestments,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.totalInvestments,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
|
||||
|
||||
@ -525,7 +525,7 @@ $: {
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr class="text-white ">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-sm sm:text-[1rem] font-bold pr-10">Year</td>
|
||||
<td class="text-start border-r border-[#191E24] text-white text-sm sm:text-[1rem] font-bold pr-10">Year</td>
|
||||
{#each cashFlow as cash}
|
||||
{#if filterRule === 'annual'}
|
||||
<td class="bg-[#0F0F0F] font-semibold pr-5 sm:pr-14 text-sm">
|
||||
@ -543,134 +543,134 @@ $: {
|
||||
|
||||
|
||||
<!-- row -->
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Net Income</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Net Income</td>
|
||||
{#each cashFlow as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.netIncome,true)}</td>
|
||||
<td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.netIncome,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Depreciation & Amortization</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Depreciation & Amortization</td>
|
||||
{#each cashFlow as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.depreciationAndAmortization,true)}</td>
|
||||
<td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.depreciationAndAmortization,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Stock-Based Compensation</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Stock-Based Compensation</td>
|
||||
{#each cashFlow as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.stockBasedCompensation,true)}</td>
|
||||
<td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.stockBasedCompensation,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Other Working Capital</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Other Working Capital</td>
|
||||
{#each cashFlow as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.otherWorkingCapital,true)}</td>
|
||||
<td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.otherWorkingCapital,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Other Non-Cash Items</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Other Non-Cash Items</td>
|
||||
{#each cashFlow as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.otherNonCashItems,true)}</td>
|
||||
<td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.otherNonCashItems,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Deferred Income Tax</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Deferred Income Tax</td>
|
||||
{#each cashFlow as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.deferredIncomeTax,true)}</td>
|
||||
<td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.deferredIncomeTax,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Change in Working Capital</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Change in Working Capital</td>
|
||||
{#each cashFlow as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.changeInWorkingCapital,true)}</td>
|
||||
<td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.changeInWorkingCapital,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Operating Cash Flow</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Operating Cash Flow</td>
|
||||
{#each cashFlow as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.netCashProvidedByOperatingActivities,true)}</td>
|
||||
<td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.netCashProvidedByOperatingActivities,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Capital Expenditures</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Capital Expenditures</td>
|
||||
{#each cashFlow as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.capitalExpenditure,true)}</td>
|
||||
<td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.capitalExpenditure,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Acquisitions</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Acquisitions</td>
|
||||
{#each cashFlow as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.acquisitionsNet,true)}</td>
|
||||
<td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.acquisitionsNet,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Purchase of Investments</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Purchase of Investments</td>
|
||||
{#each cashFlow as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.purchasesOfInvestments,true)}</td>
|
||||
<td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.purchasesOfInvestments,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Sales Maturities Of Investments</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Sales Maturities Of Investments</td>
|
||||
{#each cashFlow as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.salesMaturitiesOfInvestments,true)}</td>
|
||||
<td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.salesMaturitiesOfInvestments,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Other Investing Acitivies</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Other Investing Acitivies</td>
|
||||
{#each cashFlow as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.otherInvestingActivites,true)}</td>
|
||||
<td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.otherInvestingActivites,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Investing Cash Flow</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Investing Cash Flow</td>
|
||||
{#each cashFlow as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.netCashUsedForInvestingActivites,true)}</td>
|
||||
<td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.netCashUsedForInvestingActivites,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Debt Repayment</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Debt Repayment</td>
|
||||
{#each cashFlow as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.debtRepayment,true)}</td>
|
||||
<td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.debtRepayment,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Common Stock Repurchased</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Common Stock Repurchased</td>
|
||||
{#each cashFlow as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.commonStockRepurchased,true)}</td>
|
||||
<td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.commonStockRepurchased,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Dividend Paid</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Dividend Paid</td>
|
||||
{#each cashFlow as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.dividendsPaid,true)}</td>
|
||||
<td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.dividendsPaid,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Other Financial Acitivies</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Other Financial Acitivies</td>
|
||||
{#each cashFlow as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.otherFinancingActivites,true)}</td>
|
||||
<td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.otherFinancingActivites,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Financial Cash Flow</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Financial Cash Flow</td>
|
||||
{#each cashFlow as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.netCashUsedProvidedByFinancingActivities,true)}</td>
|
||||
<td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.netCashUsedProvidedByFinancingActivities,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Net Cash Flow</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Net Cash Flow</td>
|
||||
{#each cashFlow as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.netChangeInCash,true)}</td>
|
||||
<td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.netChangeInCash,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Free Cash Flow</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Free Cash Flow</td>
|
||||
{#each cashFlow as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.freeCashFlow,true)}</td>
|
||||
<td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.freeCashFlow,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@ -502,7 +502,7 @@ const exportData = (format = 'csv') => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app w-full h-[300px] m-auto">
|
||||
<div class="app w-full h-[300px] m-auto">
|
||||
<Chart options={optionsData} class="chart" />
|
||||
</div>
|
||||
|
||||
@ -531,110 +531,110 @@ const exportData = (format = 'csv') => {
|
||||
|
||||
|
||||
<!-- row -->
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Revenue</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm">Revenue</td>
|
||||
{#each income as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.revenue,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.revenue,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Cost of Revenue</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm">Cost of Revenue</td>
|
||||
{#each income as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.costOfRevenue,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.costOfRevenue,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Gross Profit</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm">Gross Profit</td>
|
||||
{#each income as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.grossProfit,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.grossProfit,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Selling, General & Admin</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm">Selling, General & Admin</td>
|
||||
{#each income as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.sellingGeneralAndAdministrativeExpenses,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.sellingGeneralAndAdministrativeExpenses,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Research & Development</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm">Research & Development</td>
|
||||
{#each income as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.researchAndDevelopmentExpenses,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.researchAndDevelopmentExpenses,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Other Expenses</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm">Other Expenses</td>
|
||||
{#each income as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.otherExpenses,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.otherExpenses,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Operating Expenses</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm">Operating Expenses</td>
|
||||
{#each income as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.operatingExpenses,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.operatingExpenses,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Interest Expense</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm">Interest Expense</td>
|
||||
{#each income as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.interestExpense,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.interestExpense,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Pretax Income</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm">Pretax Income</td>
|
||||
{#each income as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.incomeBeforeTax,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.incomeBeforeTax,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Income Tax</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm">Income Tax</td>
|
||||
{#each income as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.incomeTaxExpense,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.incomeTaxExpense,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Net Income</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm">Net Income</td>
|
||||
{#each income as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.netIncome,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.netIncome,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Shares Outstanding (Basic)</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm">Shares Outstanding (Basic)</td>
|
||||
{#each income as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.weightedAverageShsOut)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.weightedAverageShsOut)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Shares Outstanding (Diluted)</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm">Shares Outstanding (Diluted)</td>
|
||||
{#each income as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.weightedAverageShsOutDil)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.weightedAverageShsOutDil)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">EPS (Basic)</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm">EPS (Basic)</td>
|
||||
{#each income as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {cash?.eps?.toFixed(2)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {cash?.eps?.toFixed(2)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">EPS (Diluted)</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm">EPS (Diluted)</td>
|
||||
{#each income as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {cash?.epsdiluted?.toFixed(2)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {cash?.epsdiluted?.toFixed(2)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">EBITDA</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm">EBITDA</td>
|
||||
{#each income as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.ebitda,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.ebitda,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Depreciation & Amortization</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm">Depreciation & Amortization</td>
|
||||
{#each income as cash}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {abbreviateNumber(cash?.depreciationAndAmortization,true)}</td>
|
||||
<td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.depreciationAndAmortization,true)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
|
||||
|
||||
@ -493,7 +493,7 @@ $: {
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr class="text-white ">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-sm sm:text-[1rem] font-bold pr-10">Year</td>
|
||||
<td class="text-start border-r border-[#191E24] text-sm sm:text-[1rem] font-bold pr-10">Year</td>
|
||||
{#each ratios as item}
|
||||
{#if filterRule === 'annual'}
|
||||
<td class="bg-[#0F0F0F] font-semibold pr-5 sm:pr-14 text-sm">
|
||||
@ -511,116 +511,116 @@ $: {
|
||||
|
||||
|
||||
<!-- row -->
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">PE Ratio</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">PE Ratio</td>
|
||||
{#each ratios as item}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {item?.priceEarningsRatio?.toFixed(2)}</td>
|
||||
<td class="text-xs sm:text-sm"> {item?.priceEarningsRatio?.toFixed(2)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">PS Ratio</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">PS Ratio</td>
|
||||
{#each ratios as item}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {item?.priceToSalesRatio?.toFixed(2)}</td>
|
||||
<td class="text-xs sm:text-sm"> {item?.priceToSalesRatio?.toFixed(2)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">PB Ratio</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">PB Ratio</td>
|
||||
{#each ratios as item}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {item?.priceToBookRatio?.toFixed(2)}</td>
|
||||
<td class="text-xs sm:text-sm"> {item?.priceToBookRatio?.toFixed(2)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">P/FCF Ratio</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">P/FCF Ratio</td>
|
||||
{#each ratios as item}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {item?.priceToFreeCashFlowsRatio?.toFixed(2)}</td>
|
||||
<td class="text-xs sm:text-sm"> {item?.priceToFreeCashFlowsRatio?.toFixed(2)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">P/OCF Ratio</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">P/OCF Ratio</td>
|
||||
{#each ratios as item}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {item?.priceToOperatingCashFlowsRatio?.toFixed(2)}</td>
|
||||
<td class="text-xs sm:text-sm"> {item?.priceToOperatingCashFlowsRatio?.toFixed(2)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">OCF/S Ratio</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">OCF/S Ratio</td>
|
||||
{#each ratios as item}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {item?.operatingCashFlowSalesRatio !== null ? item?.operatingCashFlowSalesRatio?.toFixed(2) : '-'}</td>
|
||||
<td class="text-xs sm:text-sm"> {item?.operatingCashFlowSalesRatio !== null ? item?.operatingCashFlowSalesRatio?.toFixed(2) : '-'}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Debt / Equity Ratio</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Debt / Equity Ratio</td>
|
||||
{#each ratios as item}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {item?.debtEquityRatio?.toFixed(2)}</td>
|
||||
<td class="text-xs sm:text-sm"> {item?.debtEquityRatio?.toFixed(2)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Quick Ratio</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Quick Ratio</td>
|
||||
{#each ratios as item}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {item?.quickRatio?.toFixed(2)}</td>
|
||||
<td class="text-xs sm:text-sm"> {item?.quickRatio?.toFixed(2)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Current Ratio</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Current Ratio</td>
|
||||
{#each ratios as item}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {item?.currentRatio?.toFixed(2)}</td>
|
||||
<td class="text-xs sm:text-sm"> {item?.currentRatio?.toFixed(2)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Asset Turnover</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Asset Turnover</td>
|
||||
{#each ratios as item}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {item?.assetTurnover?.toFixed(2)}</td>
|
||||
<td class="text-xs sm:text-sm"> {item?.assetTurnover?.toFixed(2)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Interest Coverage</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Interest Coverage</td>
|
||||
{#each ratios as item}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {item?.interestCoverage?.toFixed(2)}</td>
|
||||
<td class="text-xs sm:text-sm"> {item?.interestCoverage?.toFixed(2)}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Return on Equity (ROE)</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Return on Equity (ROE)</td>
|
||||
{#each ratios as item}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {(item?.returnOnEquity*100)?.toFixed(2)}%</td>
|
||||
<td class="text-xs sm:text-sm"> {(item?.returnOnEquity*100)?.toFixed(2)}%</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Return on Assets (ROA)</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Return on Assets (ROA)</td>
|
||||
{#each ratios as item}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm">{(item?.returnOnAssets*100)?.toFixed(2)}%</td>
|
||||
<td class="text-xs sm:text-sm">{(item?.returnOnAssets*100)?.toFixed(2)}%</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Return on Capital (ROIC)</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Return on Capital (ROIC)</td>
|
||||
{#each ratios as item}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {(item?.returnOnCapitalEmployed*100)?.toFixed(2)}%</td>
|
||||
<td class="text-xs sm:text-sm"> {(item?.returnOnCapitalEmployed*100)?.toFixed(2)}%</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Dividend Yield</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Dividend Yield</td>
|
||||
{#each ratios as item}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {(item?.dividendYield*100)?.toFixed(2)}%</td>
|
||||
<td class="text-xs sm:text-sm"> {(item?.dividendYield*100)?.toFixed(2)}%</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Payout Ratio</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Payout Ratio</td>
|
||||
{#each ratios as item}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {(item?.payoutRatio*100)?.toFixed(2)}%</td>
|
||||
<td class="text-xs sm:text-sm"> {(item?.payoutRatio*100)?.toFixed(2)}%</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Gross Profit Margin</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Gross Profit Margin</td>
|
||||
{#each ratios as item}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {(item?.grossProfitMargin*100)?.toFixed(2)}%</td>
|
||||
<td class="text-xs sm:text-sm"> {(item?.grossProfitMargin*100)?.toFixed(2)}%</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-xs sm:text-sm">Net Profit Margin</td>
|
||||
<tr class="text-white odd:bg-[#202020]">
|
||||
<td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Net Profit Margin</td>
|
||||
{#each ratios as item}
|
||||
<td class="bg-[#0F0F0F] text-xs sm:text-sm"> {(item?.netProfitMargin*100)?.toFixed(2)}%</td>
|
||||
<td class="text-xs sm:text-sm"> {(item?.netProfitMargin*100)?.toFixed(2)}%</td>
|
||||
{/each}
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user