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

table fix of financials page

Browse Source
This commit is contained in:
MuslemRahimi 2024-10-25 19:43:06 +02:00
parent 7f878a12e4
commit c3ee0843e3
4 changed files with 229 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,7 +28,7 @@
let filterRule = "annual"; let filterRule = "annual";
let displayStatement = "revenue"; let displayStatement = "revenue";
let mode = true; let mode = false;
let timeFrame = "10Y"; let timeFrame = "10Y";
onMount(async () => { onMount(async () => {
@ -716,23 +716,23 @@
<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 border-r border-[#191E24] bg-[#09090B] text-white text-sm font-semibold pr-10" class="text-start bg-[#09090B] text-white text-sm font-semibold pr-10"
>Year</td >Year</td
> >
{#each income as cash} {#each income as cash}
{#if filterRule === "annual"} {#if filterRule === "annual"}
<td <td
class="bg-[#09090B] font-semibold pr-5 sm:pr-14 text-sm" class="bg-[#09090B] font-semibold text-sm text-end"
> >
{"FY" + cash?.calendarYear?.slice(-2)} {"FY" + cash?.calendarYear?.slice(-2)}
</td> </td>
{:else} {:else}
<td <td
class="bg-[#09090B] font-semibold pr-5 sm:pr-14 text-sm" class="bg-[#09090B] font-semibold text-sm text-end"
> >
{"FY" + {"FY" +
cash?.calendarYear?.slice(-2) + cash?.calendarYear?.slice(-2) +
@ -747,144 +747,139 @@
<!-- row --> <!-- row -->
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm" class="text-start border-r border-gray-700 text-white text-sm sm:text-[1rem]"
>Revenue</td >Revenue</td
> >
{#each income as cash} {#each income as cash}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber(cash?.revenue, true)}</td {abbreviateNumber(cash?.revenue)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm" class="text-start border-r border-gray-700 text-white text-sm sm:text-[1rem]"
>Cost of Revenue</td >Cost of Revenue</td
> >
{#each income as cash} {#each income as cash}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber(cash?.costOfRevenue, true)}</td {abbreviateNumber(cash?.costOfRevenue)}</td
> >
{/each} {/each}
</tr> </tr>
<!-- row --> <!-- row -->
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm" class="text-start border-r border-gray-700 text-white text-sm sm:text-[1rem]"
>Gross Profit</td >Gross Profit</td
> >
{#each income as cash} {#each income as cash}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber(cash?.grossProfit, true)}</td {abbreviateNumber(cash?.grossProfit)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm" class="text-start border-r border-gray-700 text-white text-sm sm:text-[1rem]"
>Selling, General & Admin</td >Selling, General & Admin</td
> >
{#each income as cash} {#each income as cash}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber( {abbreviateNumber(
cash?.sellingGeneralAndAdministrativeExpenses, cash?.sellingGeneralAndAdministrativeExpenses,
true,
)}</td )}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm" class="text-start border-r border-gray-700 text-white text-sm sm:text-[1rem]"
>Research & Development</td >Research & Development</td
> >
{#each income as cash} {#each income as cash}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber( {abbreviateNumber(
cash?.researchAndDevelopmentExpenses, cash?.researchAndDevelopmentExpenses,
true,
)}</td )}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm" class="text-start border-r border-gray-700 text-white text-sm sm:text-[1rem]"
>Other Expenses</td >Other Expenses</td
> >
{#each income as cash} {#each income as cash}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber(cash?.otherExpenses, true)}</td {abbreviateNumber(cash?.otherExpenses)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm" class="text-start border-r border-gray-700 text-white text-sm sm:text-[1rem]"
>Operating Expenses</td >Operating Expenses</td
> >
{#each income as cash} {#each income as cash}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber( {abbreviateNumber(cash?.o)}</td
cash?.operatingExpenses,
true,
)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm" class="text-start border-r border-gray-700 text-white text-sm sm:text-[1rem]"
>Interest Expense</td >Interest Expense</td
> >
{#each income as cash} {#each income as cash}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber(cash?.interestExpense, true)}</td {abbreviateNumber(cash?.interestExpense)}</td
> >
{/each} {/each}
</tr> </tr>
<!-- row --> <!-- row -->
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm" class="text-start border-r border-gray-700 text-white text-sm sm:text-[1rem]"
>Pretax Income</td >Pretax Income</td
> >
{#each income as cash} {#each income as cash}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber(cash?.incomeBeforeTax, true)}</td {abbreviateNumber(cash?.incomeBeforeTax)}</td
> >
{/each} {/each}
</tr> </tr>
<!-- row --> <!-- row -->
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm" class="text-start border-r border-gray-700 text-white text-sm sm:text-[1rem]"
>Income Tax</td >Income Tax</td
> >
{#each income as cash} {#each income as cash}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber(cash?.incomeTaxExpense, true)}</td {abbreviateNumber(cash?.incomeTaxExpense)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm" class="text-start border-r border-gray-700 text-white text-sm sm:text-[1rem]"
>Net Income</td >Net Income</td
> >
{#each income as cash} {#each income as cash}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber(cash?.netIncome, true)}</td {abbreviateNumber(cash?.netIncome)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm" class="text-start border-r border-gray-700 text-white text-sm sm:text-[1rem]"
>Shares Outstanding (Basic)</td >Shares Outstanding (Basic)</td
> >
{#each income as cash} {#each income as cash}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber(cash?.weightedAverageShsOut)}</td {abbreviateNumber(cash?.weightedAverageShsOut)}</td
> >
{/each} {/each}
@ -892,11 +887,11 @@
<!-- row --> <!-- row -->
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm" class="text-start border-r border-gray-700 text-white text-sm sm:text-[1rem]"
>Shares Outstanding (Diluted)</td >Shares Outstanding (Diluted)</td
> >
{#each income as cash} {#each income as cash}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber( {abbreviateNumber(
cash?.weightedAverageShsOutDil, cash?.weightedAverageShsOutDil,
)}</td )}</td
@ -905,48 +900,45 @@
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm" class="text-start border-r border-gray-700 text-white text-sm sm:text-[1rem]"
>EPS (Basic)</td >EPS (Basic)</td
> >
{#each income as cash} {#each income as cash}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{cash?.eps?.toFixed(2)}</td {cash?.eps?.toFixed(2)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm" class="text-start border-r border-gray-700 text-white text-sm sm:text-[1rem]"
>EPS (Diluted)</td >EPS (Diluted)</td
> >
{#each income as cash} {#each income as cash}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{cash?.epsdiluted?.toFixed(2)}</td {cash?.epsdiluted?.toFixed(2)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm" class="text-start border-r border-gray-700 text-white text-sm sm:text-[1rem]"
>EBITDA</td >EBITDA</td
> >
{#each income as cash} {#each income as cash}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber(cash?.ebitda, true)}</td {abbreviateNumber(cash?.ebitda)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-white text-xs sm:text-sm" class="text-start border-r whitespace-nowrap border-[#191E24] text-white text-sm sm:text-[1rem]"
>Depreciation & Amortization</td >Depreciation & Amortization</td
> >
{#each income as cash} {#each income as cash}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber( {abbreviateNumber(cash?.depreciation)}</td
cash?.depreciationAndAmortization,
true,
)}</td
> >
{/each} {/each}
</tr> </tr>

190
src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
View File

@ -27,7 +27,7 @@
let displayStatement = "cashAndCashEquivalents"; let displayStatement = "cashAndCashEquivalents";
let mode = true; let mode = false;
let timeFrame = "10Y"; let timeFrame = "10Y";
const statementConfig = [ const statementConfig = [
@ -819,23 +819,23 @@
<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 border-r border-[#191E24] bg-[#09090B] text-white text-sm sm:text-[1rem] font-bold pr-10" class="text-start bg-[#09090B] text-white text-sm sm:text-[1rem] font-bold pr-10"
>Year</td >Year</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
{#if filterRule === "annual"} {#if filterRule === "annual"}
<td <td
class="bg-[#09090B] font-semibold pr-5 sm:pr-14 text-sm" class="bg-[#09090B] font-semibold text-sm text-end"
> >
{"FY" + balance?.calendarYear?.slice(-2)} {"FY" + balance?.calendarYear?.slice(-2)}
</td> </td>
{:else} {:else}
<td <td
class="bg-[#09090B] font-semibold pr-5 sm:pr-14 text-sm" class="bg-[#09090B] font-semibold text-sm text-end"
> >
{"FY" + {"FY" +
balance?.calendarYear?.slice(-2) + balance?.calendarYear?.slice(-2) +
@ -850,356 +850,320 @@
<!-- row --> <!-- row -->
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Cash & Equivalents</td >Cash & Equivalents</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber( {abbreviateNumber(
balance?.cashAndCashEquivalents, balance?.cashAndCashEquivalents,
true,
)}</td )}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Short-Term Investments</td >Short-Term Investments</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber( {abbreviateNumber(balance?.shortTermInvestments)}</td
balance?.shortTermInvestments,
true,
)}</td
> >
{/each} {/each}
</tr> </tr>
<!-- row --> <!-- row -->
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Long-Term Investments</td >Long-Term Investments</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber( {abbreviateNumber(balance?.longTermInvestments)}</td
balance?.longTermInvestments,
true,
)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Other Long-Term Assets</td >Other Long-Term Assets</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber( {abbreviateNumber(balance?.otherNonCurrentAssets)}</td
balance?.otherNonCurrentAssets,
true,
)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Receivables</td >Receivables</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber(balance?.netReceivables, true)}</td {abbreviateNumber(balance?.netReceivables)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Inventory</td >Inventory</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber(balance?.inventory, true)}</td {abbreviateNumber(balance?.inventory)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Other Current Assets</td >Other Current Assets</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber( {abbreviateNumber(balance?.otherCurrentAssets)}</td
balance?.otherCurrentAssets,
true,
)}</td
> >
{/each} {/each}
</tr> </tr>
<!-- row --> <!-- row -->
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Total Current Assets</td >Total Current Assets</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber( {abbreviateNumber(balance?.totalCurrentAssets)}</td
balance?.totalCurrentAssets,
true,
)}</td
> >
{/each} {/each}
</tr> </tr>
<!-- row --> <!-- row -->
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start whitespace-nowrap border-r border-gray-700 text-sm sm:text-[1rem]"
>Property, Plant & Equipment</td >Property, Plant & Equipment</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber( {abbreviateNumber(
balance?.propertyPlantEquipmentNet, balance?.propertyPlantEquipmentNet,
true,
)}</td )}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Goodwill & Intangibles</td >Goodwill & Intangibles</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber( {abbreviateNumber(
balance?.goodwillAndIntangibleAssets, balance?.goodwillAndIntangibleAssets,
true,
)}</td )}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Total Long-Term Assets</td >Total Long-Term Assets</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber( {abbreviateNumber(balance?.totalNonCurrentAssets)}</td
balance?.totalNonCurrentAssets,
true,
)}</td
> >
{/each} {/each}
</tr> </tr>
<!-- row --> <!-- row -->
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Total Assets</td >Total Assets</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber(balance?.totalAssets, true)}</td {abbreviateNumber(balance?.totalAssets)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Account Payables</td >Account Payables</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber(balance?.accountPayables, true)}</td {abbreviateNumber(balance?.accountPayables)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Deferred Revenue</td >Deferred Revenue</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber(balance?.deferredRevenue, true)}</td {abbreviateNumber(balance?.deferredRevenue)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Short-Term Debt</td >Short-Term Debt</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber(balance?.shortTermDebt, true)}</td {abbreviateNumber(balance?.shortTermDebt)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Other Current Liabilities</td >Other Current Liabilities</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber( {abbreviateNumber(
balance?.otherCurrentLiabilities, balance?.otherCurrentLiabilities,
true,
)}</td )}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Total Current Liabilities</td >Total Current Liabilities</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber( {abbreviateNumber(
balance?.totalCurrentLiabilities, balance?.totalCurrentLiabilities,
true,
)}</td )}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Long-Term Debt</td >Long-Term Debt</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber(balance?.longTermDebt, true)}</td {abbreviateNumber(balance?.longTermDebt)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Other Long-Term Liabilities</td >Other Long-Term Liabilities</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber( {abbreviateNumber(
balance?.otherNonCurrentLiabilities, balance?.otherNonCurrentLiabilities,
true,
)}</td )}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Total Long-Term Liabilities</td >Total Long-Term Liabilities</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber( {abbreviateNumber(
balance?.totalNonCurrentLiabilities, balance?.totalNonCurrentLiabilities,
true,
)}</td )}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Total Liabilities</td >Total Liabilities</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber( {abbreviateNumber(balance?.totalLiabilities)}</td
balance?.totalLiabilities,
true,
)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Total Debt</td >Total Debt</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber(balance?.totalDebt, true)}</td {abbreviateNumber(balance?.totalDebt)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Common Stock</td >Common Stock</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber(balance?.commonStock, true)}</td {abbreviateNumber(balance?.commonStock)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Retained Earnings</td >Retained Earnings</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber( {abbreviateNumber(balance?.retainedEarnings)}</td
balance?.retainedEarnings,
true,
)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Comprehensive Income</td >Comprehensive Income</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber( {abbreviateNumber(
balance?.accumulatedOtherComprehensiveIncomeLoss, balance?.accumulatedOtherComprehensiveIncomeLoss,
true,
)}</td )}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Shareholders' Equity</td >Shareholders' Equity</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber( {abbreviateNumber(
balance?.totalStockholdersEquity, balance?.totalStockholdersEquity,
true,
)}</td )}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Total Investments</td >Total Investments</td
> >
{#each balanceSheet as balance} {#each balanceSheet as balance}
<td class=" text-xs sm:text-sm"> <td class=" text-sm sm:text-[1rem] text-end">
{abbreviateNumber( {abbreviateNumber(balance?.totalInvestments)}</td
balance?.totalInvestments,
true,
)}</td
> >
{/each} {/each}
</tr> </tr>

150
src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
View File

@ -25,7 +25,7 @@
let filterRule = "annual"; let filterRule = "annual";
let displayStatement = "netIncome"; let displayStatement = "netIncome";
let mode = true; let mode = false;
let tableList = []; let tableList = [];
let timeFrame = "10Y"; let timeFrame = "10Y";
@ -754,19 +754,19 @@
<thead> <thead>
<tr class="text-white"> <tr class="text-white">
<td <td
class="text-start border-r border-[#191E24] text-white text-sm sm:text-[1rem] font-bold pr-10" class="text-start text-white text-sm sm:text-[1rem] font-semibold"
>Year</td >Year</td
> >
{#each cashFlow as cash} {#each cashFlow as cash}
{#if filterRule === "annual"} {#if filterRule === "annual"}
<td <td
class="bg-[#09090B] font-semibold pr-5 sm:pr-14 text-sm" class="bg-[#09090B] font-semibold text-end text-sm"
> >
{"FY" + cash?.calendarYear?.slice(-2)} {"FY" + cash?.calendarYear?.slice(-2)}
</td> </td>
{:else} {:else}
<td <td
class="bg-[#09090B] font-semibold pr-5 sm:pr-14 text-sm" class="bg-[#09090B] font-semibold text-end text-sm"
> >
{"FY" + {"FY" +
cash?.calendarYear?.slice(-2) + cash?.calendarYear?.slice(-2) +
@ -781,25 +781,24 @@
<!-- row --> <!-- row -->
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Net Income</td >Net Income</td
> >
{#each cashFlow as cash} {#each cashFlow as cash}
<td class="text-xs sm:text-sm"> <td class="text-end text-sm sm:text-[1rem]">
{abbreviateNumber(cash?.netIncome, true)}</td {abbreviateNumber(cash?.netIncome)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start whitespace-nowrap border-r border-gray-700 text-sm sm:text-[1rem]"
>Depreciation & Amortization</td >Depreciation & Amortization</td
> >
{#each cashFlow as cash} {#each cashFlow as cash}
<td class="text-xs sm:text-sm"> <td class="text-end text-sm sm:text-[1rem]">
{abbreviateNumber( {abbreviateNumber(
cash?.depreciationAndAmortization, cash?.depreciationAndAmortization,
true,
)}</td )}</td
> >
{/each} {/each}
@ -807,78 +806,68 @@
<!-- row --> <!-- row -->
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Stock-Based Compensation</td >Stock-Based Compensation</td
> >
{#each cashFlow as cash} {#each cashFlow as cash}
<td class="text-xs sm:text-sm"> <td class="text-end text-sm sm:text-[1rem]">
{abbreviateNumber( {abbreviateNumber(cash?.stockBasedCompensation)}</td
cash?.stockBasedCompensation,
true,
)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Other Working Capital</td >Other Working Capital</td
> >
{#each cashFlow as cash} {#each cashFlow as cash}
<td class="text-xs sm:text-sm"> <td class="text-end text-sm sm:text-[1rem]">
{abbreviateNumber( {abbreviateNumber(cash?.otherWorkingCapital)}</td
cash?.otherWorkingCapital,
true,
)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Other Non-Cash Items</td >Other Non-Cash Items</td
> >
{#each cashFlow as cash} {#each cashFlow as cash}
<td class="text-xs sm:text-sm"> <td class="text-end text-sm sm:text-[1rem]">
{abbreviateNumber(cash?.otherNonCashItems, true)}</td {abbreviateNumber(cash?.otherNonCashItems)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Deferred Income Tax</td >Deferred Income Tax</td
> >
{#each cashFlow as cash} {#each cashFlow as cash}
<td class="text-xs sm:text-sm"> <td class="text-end text-sm sm:text-[1rem]">
{abbreviateNumber(cash?.deferredIncomeTax, true)}</td {abbreviateNumber(cash?.deferredIncomeTax)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Change in Working Capital</td >Change in Working Capital</td
> >
{#each cashFlow as cash} {#each cashFlow as cash}
<td class="text-xs sm:text-sm"> <td class="text-end text-sm sm:text-[1rem]">
{abbreviateNumber( {abbreviateNumber(cash?.changeInWorkingCapital)}</td
cash?.changeInWorkingCapital,
true,
)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Operating Cash Flow</td >Operating Cash Flow</td
> >
{#each cashFlow as cash} {#each cashFlow as cash}
<td class="text-xs sm:text-sm"> <td class="text-end text-sm sm:text-[1rem]">
{abbreviateNumber( {abbreviateNumber(
cash?.netCashProvidedByOperatingActivities, cash?.netCashProvidedByOperatingActivities,
true,
)}</td )}</td
> >
{/each} {/each}
@ -886,51 +875,47 @@
<!-- row --> <!-- row -->
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Capital Expenditures</td >Capital Expenditures</td
> >
{#each cashFlow as cash} {#each cashFlow as cash}
<td class="text-xs sm:text-sm"> <td class="text-end text-sm sm:text-[1rem]">
{abbreviateNumber(cash?.capitalExpenditure, true)}</td {abbreviateNumber(cash?.capitalExpenditure)}</td
> >
{/each} {/each}
</tr> </tr>
<!-- row --> <!-- row -->
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Acquisitions</td >Acquisitions</td
> >
{#each cashFlow as cash} {#each cashFlow as cash}
<td class="text-xs sm:text-sm"> <td class="text-end text-sm sm:text-[1rem]">
{abbreviateNumber(cash?.acquisitionsNet, true)}</td {abbreviateNumber(cash?.acquisitionsNet)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Purchase of Investments</td >Purchase of Investments</td
> >
{#each cashFlow as cash} {#each cashFlow as cash}
<td class="text-xs sm:text-sm"> <td class="text-end text-sm sm:text-[1rem]">
{abbreviateNumber( {abbreviateNumber(cash?.purchasesOfInvestments)}</td
cash?.purchasesOfInvestments,
true,
)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start 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}
<td class="text-xs sm:text-sm"> <td class="text-end text-sm sm:text-[1rem]">
{abbreviateNumber( {abbreviateNumber(
cash?.salesMaturitiesOfInvestments, cash?.salesMaturitiesOfInvestments,
true,
)}</td )}</td
> >
{/each} {/each}
@ -938,115 +923,104 @@
<!-- row --> <!-- row -->
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Other Investing Acitivies</td >Other Investing Acitivies</td
> >
{#each cashFlow as cash} {#each cashFlow as cash}
<td class="text-xs sm:text-sm"> <td class="text-end text-sm sm:text-[1rem]">
{abbreviateNumber( {abbreviateNumber(cash?.otherInvestingActivites)}</td
cash?.otherInvestingActivites,
true,
)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Investing Cash Flow</td >Investing Cash Flow</td
> >
{#each cashFlow as cash} {#each cashFlow as cash}
<td class="text-xs sm:text-sm"> <td class="text-end text-sm sm:text-[1rem]">
{abbreviateNumber( {abbreviateNumber(
cash?.netCashUsedForInvestingActivites, cash?.netCashUsedForInvestingActivites,
true,
)}</td )}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Debt Repayment</td >Debt Repayment</td
> >
{#each cashFlow as cash} {#each cashFlow as cash}
<td class="text-xs sm:text-sm"> <td class="text-end text-sm sm:text-[1rem]">
{abbreviateNumber(cash?.debtRepayment, true)}</td {abbreviateNumber(cash?.debtRepayment)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start whitespace-nowrap border-r border-gray-700 text-sm sm:text-[1rem]"
>Common Stock Repurchased</td >Common Stock Repurchased</td
> >
{#each cashFlow as cash} {#each cashFlow as cash}
<td class="text-xs sm:text-sm"> <td class="text-end text-sm sm:text-[1rem]">
{abbreviateNumber( {abbreviateNumber(cash?.commonStockRepurchased)}</td
cash?.commonStockRepurchased,
true,
)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Dividend Paid</td >Dividend Paid</td
> >
{#each cashFlow as cash} {#each cashFlow as cash}
<td class="text-xs sm:text-sm"> <td class="text-end text-sm sm:text-[1rem]">
{abbreviateNumber(cash?.dividendsPaid, true)}</td {abbreviateNumber(cash?.dividendsPaid)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Other Financial Acitivies</td >Other Financial Acitivies</td
> >
{#each cashFlow as cash} {#each cashFlow as cash}
<td class="text-xs sm:text-sm"> <td class="text-end text-sm sm:text-[1rem]">
{abbreviateNumber( {abbreviateNumber(cash?.otherFinancingActivites)}</td
cash?.otherFinancingActivites,
true,
)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Financial Cash Flow</td >Financial Cash Flow</td
> >
{#each cashFlow as cash} {#each cashFlow as cash}
<td class="text-xs sm:text-sm"> <td class="text-end text-sm sm:text-[1rem]">
{abbreviateNumber( {abbreviateNumber(
cash?.netCashUsedProvidedByFinancingActivities, cash?.netCashUsedProvidedByFinancingActivities,
true,
)}</td )}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Net Cash Flow</td >Net Cash Flow</td
> >
{#each cashFlow as cash} {#each cashFlow as cash}
<td class="text-xs sm:text-sm"> <td class="text-end text-sm sm:text-[1rem]">
{abbreviateNumber(cash?.netChangeInCash, true)}</td {abbreviateNumber(cash?.netChangeInCash)}</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Free Cash Flow</td >Free Cash Flow</td
> >
{#each cashFlow as cash} {#each cashFlow as cash}
<td class="text-xs sm:text-sm"> <td class="text-end text-sm sm:text-[1rem]">
{abbreviateNumber(cash?.freeCashFlow, true)}</td {abbreviateNumber(cash?.freeCashFlow)}</td
> >
{/each} {/each}
</tr> </tr>

80
src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
View File

@ -27,7 +27,7 @@
let displayStatement = "priceEarningsRatio"; let displayStatement = "priceEarningsRatio";
let mode = true; let mode = false;
let timeFrame = "10Y"; let timeFrame = "10Y";
const statementConfig = [ const statementConfig = [
@ -702,19 +702,19 @@
<thead> <thead>
<tr class="text-white"> <tr class="text-white">
<td <td
class="text-start border-r border-[#191E24] text-sm sm:text-[1rem] font-bold pr-10" class="text-start text-sm sm:text-[1rem] font-bold pr-10"
>Year</td >Year</td
> >
{#each ratios as item} {#each ratios as item}
{#if filterRule === "annual"} {#if filterRule === "annual"}
<td <td
class="bg-[#09090B] font-semibold pr-5 sm:pr-14 text-sm" class="bg-[#09090B] font-semibold text-end text-sm"
> >
{"FY" + item?.calendarYear?.slice(-2)} {"FY" + item?.calendarYear?.slice(-2)}
</td> </td>
{:else} {:else}
<td <td
class="bg-[#09090B] font-semibold pr-5 sm:pr-14 text-sm" class="bg-[#09090B] font-semibold text-end text-sm"
> >
{"FY" + {"FY" +
item?.calendarYear?.slice(-2) + item?.calendarYear?.slice(-2) +
@ -729,11 +729,11 @@
<!-- row --> <!-- row -->
<tr class="text-white odd:bg-[#27272A] whitespace-nowrap"> <tr class="text-white odd:bg-[#27272A] whitespace-nowrap">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>PE Ratio</td >PE Ratio</td
> >
{#each ratios as item} {#each ratios as item}
<td class="text-xs sm:text-sm"> <td class="text-sm sm:text-[1rem] text-end">
{filterRule === "annual" {filterRule === "annual"
? (item?.priceEarningsRatio / 4)?.toFixed(2) ? (item?.priceEarningsRatio / 4)?.toFixed(2)
: item?.priceEarningsRatio?.toFixed(2)} : item?.priceEarningsRatio?.toFixed(2)}
@ -742,11 +742,11 @@
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>PS Ratio</td >PS Ratio</td
> >
{#each ratios as item} {#each ratios as item}
<td class="text-xs sm:text-sm"> <td class="text-sm sm:text-[1rem] text-end">
{filterRule === "annual" {filterRule === "annual"
? (item?.priceToSalesRatio / 4)?.toFixed(2) ? (item?.priceToSalesRatio / 4)?.toFixed(2)
: item?.priceToSalesRatio?.toFixed(2)} : item?.priceToSalesRatio?.toFixed(2)}
@ -756,11 +756,11 @@
<!-- row --> <!-- row -->
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>PB Ratio</td >PB Ratio</td
> >
{#each ratios as item} {#each ratios as item}
<td class="text-xs sm:text-sm"> <td class="text-sm sm:text-[1rem] text-end">
{filterRule === "annual" {filterRule === "annual"
? (item?.priceToBookRatio / 4)?.toFixed(2) ? (item?.priceToBookRatio / 4)?.toFixed(2)
: item?.priceToBookRatio?.toFixed(2)} : item?.priceToBookRatio?.toFixed(2)}
@ -769,11 +769,11 @@
</tr> </tr>
<tr class="text-white odd:bg-[#27272A] whitespace-nowrap"> <tr class="text-white odd:bg-[#27272A] whitespace-nowrap">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>P/FCF Ratio</td >P/FCF Ratio</td
> >
{#each ratios as item} {#each ratios as item}
<td class="text-xs sm:text-sm"> <td class="text-sm sm:text-[1rem] text-end">
{filterRule === "annual" {filterRule === "annual"
? (item?.priceToFreeCashFlowsRatio / 4)?.toFixed(2) ? (item?.priceToFreeCashFlowsRatio / 4)?.toFixed(2)
: item?.priceToFreeCashFlowsRatio?.toFixed(2)} : item?.priceToFreeCashFlowsRatio?.toFixed(2)}
@ -782,11 +782,11 @@
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>P/OCF Ratio</td >P/OCF Ratio</td
> >
{#each ratios as item} {#each ratios as item}
<td class="text-xs sm:text-sm"> <td class="text-sm sm:text-[1rem] text-end">
{filterRule === "annual" {filterRule === "annual"
? ( ? (
item?.priceToOperatingCashFlowsRatio / 4 item?.priceToOperatingCashFlowsRatio / 4
@ -797,11 +797,11 @@
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>OCF/S Ratio</td >OCF/S Ratio</td
> >
{#each ratios as item} {#each ratios as item}
<td class="text-xs sm:text-sm"> <td class="text-sm sm:text-[1rem] text-end">
{filterRule === "annual" {filterRule === "annual"
? (item?.operatingCashFlowSalesRatio / 4)?.toFixed( ? (item?.operatingCashFlowSalesRatio / 4)?.toFixed(
2, 2,
@ -812,11 +812,11 @@
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start whitespace-nowrap border-r border-gray-700 text-sm sm:text-[1rem]"
>Debt / Equity Ratio</td >Debt / Equity Ratio</td
> >
{#each ratios as item} {#each ratios as item}
<td class="text-xs sm:text-sm"> <td class="text-sm sm:text-[1rem] text-end">
{filterRule === "annual" {filterRule === "annual"
? (item?.debtEquityRatio / 4)?.toFixed(2) ? (item?.debtEquityRatio / 4)?.toFixed(2)
: item?.debtEquityRatio?.toFixed(2)} : item?.debtEquityRatio?.toFixed(2)}
@ -826,11 +826,11 @@
<!-- row --> <!-- row -->
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Quick Ratio</td >Quick Ratio</td
> >
{#each ratios as item} {#each ratios as item}
<td class="text-xs sm:text-sm"> <td class="text-sm sm:text-[1rem] text-end">
{filterRule === "annual" {filterRule === "annual"
? (item?.quickRatio / 4)?.toFixed(2) ? (item?.quickRatio / 4)?.toFixed(2)
: item?.quickRatio?.toFixed(2)} : item?.quickRatio?.toFixed(2)}
@ -840,11 +840,11 @@
<!-- row --> <!-- row -->
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Current Ratio</td >Current Ratio</td
> >
{#each ratios as item} {#each ratios as item}
<td class="text-xs sm:text-sm"> <td class="text-sm sm:text-[1rem] text-end">
{filterRule === "annual" {filterRule === "annual"
? (item?.currentRatio / 4)?.toFixed(2) ? (item?.currentRatio / 4)?.toFixed(2)
: item?.currentRatio?.toFixed(2)} : item?.currentRatio?.toFixed(2)}
@ -853,22 +853,22 @@
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm whitespace-nowrap" class="text-start border-r border-gray-700 text-sm sm:text-[1rem] whitespace-nowrap"
>Asset Turnover</td >Asset Turnover</td
> >
{#each ratios as item} {#each ratios as item}
<td class="text-xs sm:text-sm"> <td class="text-sm sm:text-[1rem] text-end">
{item?.assetTurnover?.toFixed(2)} {item?.assetTurnover?.toFixed(2)}
</td> </td>
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Interest Coverage</td >Interest Coverage</td
> >
{#each ratios as item} {#each ratios as item}
<td class="text-xs sm:text-sm"> <td class="text-sm sm:text-[1rem] text-end">
{filterRule === "annual" {filterRule === "annual"
? (item?.interestCoverage / 4)?.toFixed(2) ? (item?.interestCoverage / 4)?.toFixed(2)
: item?.interestCoverage?.toFixed(2)} : item?.interestCoverage?.toFixed(2)}
@ -878,33 +878,33 @@
<!-- row --> <!-- row -->
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Return on Equity (ROE)</td >Return on Equity (ROE)</td
> >
{#each ratios as item} {#each ratios as item}
<td class="text-xs sm:text-sm"> <td class="text-sm sm:text-[1rem] text-end">
{(item?.returnOnEquity * 100)?.toFixed(2)}% {(item?.returnOnEquity * 100)?.toFixed(2)}%
</td> </td>
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start whitespace-nowrap border-r border-gray-700 text-sm sm:text-[1rem]"
>Return on Assets (ROA)</td >Return on Assets (ROA)</td
> >
{#each ratios as item} {#each ratios as item}
<td class="text-xs sm:text-sm" <td class="text-sm sm:text-[1rem]"
>{(item?.returnOnAssets * 100)?.toFixed(2)}%</td >{(item?.returnOnAssets * 100)?.toFixed(2)}%</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Return on Capital (ROIC)</td >Return on Capital (ROIC)</td
> >
{#each ratios as item} {#each ratios as item}
<td class="text-xs sm:text-sm"> <td class="text-sm sm:text-[1rem] text-end">
{(item?.returnOnCapitalEmployed * 100)?.toFixed( {(item?.returnOnCapitalEmployed * 100)?.toFixed(
2, 2,
)}%</td )}%</td
@ -913,22 +913,22 @@
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Dividend Yield</td >Dividend Yield</td
> >
{#each ratios as item} {#each ratios as item}
<td class="text-xs sm:text-sm"> <td class="text-sm sm:text-[1rem] text-end">
{(item?.dividendYield * 100)?.toFixed(2)}%</td {(item?.dividendYield * 100)?.toFixed(2)}%</td
> >
{/each} {/each}
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Payout Ratio</td >Payout Ratio</td
> >
{#each ratios as item} {#each ratios as item}
<td class="text-xs sm:text-sm"> <td class="text-sm sm:text-[1rem] text-end">
{filterRule === "annual" {filterRule === "annual"
? ((item?.payoutRatio / 4) * 100)?.toFixed(2) ? ((item?.payoutRatio / 4) * 100)?.toFixed(2)
: (item?.payoutRatio * 100)?.toFixed(2)}% : (item?.payoutRatio * 100)?.toFixed(2)}%
@ -937,11 +937,11 @@
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Gross Profit Margin</td >Gross Profit Margin</td
> >
{#each ratios as item} {#each ratios as item}
<td class="text-xs sm:text-sm"> <td class="text-sm sm:text-[1rem] text-end">
{filterRule === "annual" {filterRule === "annual"
? ((item?.grossProfitMargin / 4) * 100)?.toFixed(2) ? ((item?.grossProfitMargin / 4) * 100)?.toFixed(2)
: (item?.grossProfitMargin * 100)?.toFixed(2)}% : (item?.grossProfitMargin * 100)?.toFixed(2)}%
@ -950,11 +950,11 @@
</tr> </tr>
<tr class="text-white odd:bg-[#27272A]"> <tr class="text-white odd:bg-[#27272A]">
<td <td
class="text-start border-r border-[#191E24] text-xs sm:text-sm" class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
>Net Profit Margin</td >Net Profit Margin</td
> >
{#each ratios as item} {#each ratios as item}
<td class="text-xs sm:text-sm"> <td class="text-sm sm:text-[1rem] text-end">
{filterRule === "annual" {filterRule === "annual"
? ((item?.netProfitMargin / 4) * 100)?.toFixed(2) ? ((item?.netProfitMargin / 4) * 100)?.toFixed(2)
: (item?.netProfitMargin * 100)?.toFixed(2)}% : (item?.netProfitMargin * 100)?.toFixed(2)}%