refactor code
This commit is contained in:
MuslemRahimi
parent
85ba1761ec
commit
3dd2276996
@ -1,38 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
export let data;
|
||||
|
||||
const fields = [
|
||||
{ label: "Revenue", key: "revenue" },
|
||||
{ label: "Cost of Revenue", key: "costOfRevenue" },
|
||||
{ label: "Gross Profit", key: "grossProfit" },
|
||||
{ label: "Net Income", key: "netIncome" },
|
||||
{ label: "Operating Income", key: "operatingIncome" },
|
||||
{
|
||||
label: "Selling, General & Admin",
|
||||
key: "sellingGeneralAndAdministrativeExpenses",
|
||||
},
|
||||
{
|
||||
label: "Selling & Marketing Expenses",
|
||||
key: "sellingAndMarketingExpenses",
|
||||
},
|
||||
{ label: "Research & Development", key: "researchAndDevelopmentExpenses" },
|
||||
{ label: "Other Expenses", key: "otherExpenses" },
|
||||
{ label: "Operating Expenses", key: "operatingExpenses" },
|
||||
{ label: "Cost & Expenses", key: "costAndExpenses" },
|
||||
{ label: "Interest Expense", key: "interestExpense" },
|
||||
{ label: "Pretax Income", key: "incomeBeforeTax" },
|
||||
{ label: "Income Tax", key: "incomeTaxExpense" },
|
||||
|
||||
{ label: "Interest Income", key: "interestIncome" },
|
||||
{ label: "Interest Expense", key: "interestExpense" },
|
||||
{ label: "Shares Outstanding (Basic)", key: "weightedAverageShsOut" },
|
||||
{ label: "Shares Outstanding (Diluted)", key: "weightedAverageShsOutDil" },
|
||||
{ label: "EPS (Basic)", key: "eps" },
|
||||
{ label: "EPS (Diluted)", key: "epsdiluted" },
|
||||
{ label: "EBITDA", key: "ebitda" },
|
||||
{ label: "Depreciation & Amortization", key: "depreciation" },
|
||||
];
|
||||
export let fields;
|
||||
export let filterRule = null;
|
||||
</script>
|
||||
|
||||
{#each fields as { label, key }}
|
||||
@ -44,9 +14,15 @@
|
||||
</td>
|
||||
{#each data as item}
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{#if filterRule === "annual"}
|
||||
{item[key] !== null && item[key] !== 0
|
||||
? abbreviateNumber(item[key])
|
||||
? abbreviateNumber((item[key] / 4).toFixed(2))
|
||||
: "-"}
|
||||
{:else}
|
||||
{item[key] !== null && item[key] !== 0
|
||||
? abbreviateNumber(item[key]?.toFixed(2))
|
||||
: "-"}
|
||||
{/if}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="w-full overflow-hidden">
|
||||
<section class="w-full overflow-hidden min-h-screen">
|
||||
<div class="w-full overflow-hidden m-auto">
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||
<div
|
||||
|
||||
@ -60,6 +60,30 @@
|
||||
label: "Gross Profit",
|
||||
text: "Gross profit is a company’s profit after subtracting the costs directly linked to making and delivering its products and services.",
|
||||
},
|
||||
{
|
||||
propertyName: "operatingIncome",
|
||||
growthPropertyName: "growthOperatingIncome",
|
||||
label: "Operating Income",
|
||||
text: "Gross profit is a company’s profit after subtracting the costs directly linked to making and delivering its products and services.",
|
||||
},
|
||||
{
|
||||
propertyName: "interestIncome",
|
||||
growthPropertyName: "growthInterestIncome",
|
||||
label: "Interest Income",
|
||||
text: "Gross profit is a company’s profit after subtracting the costs directly linked to making and delivering its products and services.",
|
||||
},
|
||||
{
|
||||
propertyName: "incomeBeforeTax",
|
||||
growthPropertyName: "growthIncomeBeforeTax",
|
||||
label: "Pretax Income",
|
||||
text: "Pretax income is a company's profits before accounting for income taxes.",
|
||||
},
|
||||
{
|
||||
propertyName: "netIncome",
|
||||
growthPropertyName: "growthNetIncome",
|
||||
label: "Net Income",
|
||||
text: `Net income is a company's accounting profits after subtracting all costs and expenses from the revenue. It is also called earnings, profits or "the bottom line."`,
|
||||
},
|
||||
{
|
||||
propertyName: "sellingGeneralAndAdministrativeExpenses",
|
||||
growthPropertyName: "growthSellingGeneralAndAdministrativeExpenses",
|
||||
@ -91,10 +115,16 @@
|
||||
text: "Interest expense is the amount that the company paid or received in interest. A positive number indicates a net expense, while a negative number implies that the company had more interest income from its cash reserves than it paid for interest on debt.",
|
||||
},
|
||||
{
|
||||
propertyName: "incomeBeforeTax",
|
||||
growthPropertyName: "growthIncomeBeforeTax",
|
||||
label: "Pretax Income",
|
||||
text: "Pretax income is a company's profits before accounting for income taxes.",
|
||||
propertyName: "sellingAndMarketingExpenses",
|
||||
growthPropertyName: "growthSellingAndMarketingExpenses",
|
||||
label: "Selling & Marketing Expenses",
|
||||
text: "Revenue, also called sales, is the amount of money a company receives from its business activities, such as sales of products or services. Revenue does not take any expenses into account and is therefore different from profits.",
|
||||
},
|
||||
{
|
||||
propertyName: "costAndExpenses",
|
||||
growthPropertyName: "growthCostAndExpensess",
|
||||
label: "Cost & Expenses",
|
||||
text: "Revenue, also called sales, is the amount of money a company receives from its business activities, such as sales of products or services. Revenue does not take any expenses into account and is therefore different from profits.",
|
||||
},
|
||||
{
|
||||
propertyName: "incomeTaxExpense",
|
||||
@ -102,12 +132,6 @@
|
||||
label: "Income Tax",
|
||||
text: "Income tax is the amount of corporate income tax that the company has incurred during the fiscal period.",
|
||||
},
|
||||
{
|
||||
propertyName: "netIncome",
|
||||
growthPropertyName: "growthNetIncome",
|
||||
label: "Net Income",
|
||||
text: `Net income is a company's accounting profits after subtracting all costs and expenses from the revenue. It is also called earnings, profits or "the bottom line."`,
|
||||
},
|
||||
{
|
||||
propertyName: "weightedAverageShsOut",
|
||||
growthPropertyName: "growthWeightedAverageShsOut",
|
||||
@ -146,6 +170,10 @@
|
||||
},
|
||||
];
|
||||
|
||||
const fields = statementConfig.map((item) => ({
|
||||
label: item.label,
|
||||
key: item.propertyName,
|
||||
}));
|
||||
function toggleMode() {
|
||||
$coolMode = !$coolMode;
|
||||
}
|
||||
@ -746,7 +774,7 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- row -->
|
||||
<FinancialTable data={income} />
|
||||
<FinancialTable data={income} {fields} />
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
import { goto } from "$app/navigation";
|
||||
//import * as XLSX from 'xlsx';
|
||||
import FinancialTable from "$lib/components/FinancialTable.svelte";
|
||||
|
||||
import { init, use } from "echarts/core";
|
||||
import { LineChart, BarChart } from "echarts/charts";
|
||||
@ -206,7 +207,10 @@
|
||||
},
|
||||
];
|
||||
|
||||
let namingList = statementConfig?.map((config) => config?.propertyName) || [];
|
||||
const fields = statementConfig.map((item) => ({
|
||||
label: item.label,
|
||||
key: item.propertyName,
|
||||
}));
|
||||
|
||||
function toggleMode() {
|
||||
$coolMode = !$coolMode;
|
||||
@ -506,13 +510,14 @@
|
||||
{statementConfig?.find(
|
||||
(item) => item?.propertyName === displayStatement,
|
||||
)?.text}
|
||||
<!--<Katex formula={true} math={"\\textrm{Revenue}=\\textrm{Revenue} - \\textrm{All Expenses}"}/>-->
|
||||
{:else}
|
||||
{:else if balanceSheet?.length > 0}
|
||||
Get detailed breakdowns of the balance-sheet with total debts,
|
||||
total investments, and much more.
|
||||
{:else}
|
||||
No financial data available for {$displayCompanyName}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if balanceSheet?.length > 0}
|
||||
<div
|
||||
class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6"
|
||||
>
|
||||
@ -528,7 +533,9 @@
|
||||
: ''} "
|
||||
>
|
||||
{#if activeIdx === i}
|
||||
<div class="absolute inset-0 rounded-md bg-[#fff]"></div>
|
||||
<div
|
||||
class="absolute inset-0 rounded-md bg-[#fff]"
|
||||
></div>
|
||||
{/if}
|
||||
<span
|
||||
class="relative text-sm block font-semibold {activeIdx ===
|
||||
@ -700,17 +707,20 @@
|
||||
<option value="totalNonCurrentLiabilities"
|
||||
>Total Long-Term Liabilities</option
|
||||
>
|
||||
<option value="totalLiabilities">Total Liabilities</option>
|
||||
<option value="totalLiabilities">Total Liabilities</option
|
||||
>
|
||||
<option value="totalDebt">Total Debt</option>
|
||||
<option value="commonStock">Common Stock</option>
|
||||
<option value="retainedEarnings">Retained Earnigns</option>
|
||||
<option value="retainedEarnings">Retained Earnigns</option
|
||||
>
|
||||
<option value="accumulatedOtherComprehensiveIncomeLoss"
|
||||
>Comprehensive Income</option
|
||||
>
|
||||
<option value="totalStockholdersEquity"
|
||||
>Shareholders' Equity</option
|
||||
>
|
||||
<option value="totalInvestments">Total Investments</option>
|
||||
<option value="totalInvestments">Total Investments</option
|
||||
>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@ -800,7 +810,8 @@
|
||||
<span class="text-[#FF2F1F]">
|
||||
-{(
|
||||
Math?.abs(
|
||||
(tableList[index + 1]?.value - item?.value) /
|
||||
(tableList[index + 1]?.value -
|
||||
item?.value) /
|
||||
Math.abs(item?.value),
|
||||
) * 100
|
||||
)?.toFixed(2)}%
|
||||
@ -825,21 +836,21 @@
|
||||
class="text-start bg-[#09090B] text-white text-sm font-semibold pr-10"
|
||||
>Year</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
{#each balanceSheet as cash}
|
||||
{#if filterRule === "annual"}
|
||||
<td
|
||||
class="bg-[#09090B] font-semibold text-sm text-end"
|
||||
>
|
||||
{"FY" + balance?.calendarYear?.slice(-2)}
|
||||
{"FY" + cash?.calendarYear?.slice(-2)}
|
||||
</td>
|
||||
{:else}
|
||||
<td
|
||||
class="bg-[#09090B] font-semibold text-sm text-end"
|
||||
>
|
||||
{"FY" +
|
||||
balance?.calendarYear?.slice(-2) +
|
||||
cash?.calendarYear?.slice(-2) +
|
||||
" " +
|
||||
balance?.period}
|
||||
cash?.period}
|
||||
</td>
|
||||
{/if}
|
||||
{/each}
|
||||
@ -847,329 +858,12 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- row -->
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Cash & Equivalents</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(
|
||||
balance?.cashAndCashEquivalents,
|
||||
)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Short-Term Investments</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(balance?.shortTermInvestments)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Long-Term Investments</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(balance?.longTermInvestments)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Other Long-Term Assets</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(balance?.otherNonCurrentAssets)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Receivables</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(balance?.netReceivables)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Inventory</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(balance?.inventory)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Other Current Assets</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(balance?.otherCurrentAssets)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Total Current Assets</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(balance?.totalCurrentAssets)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start whitespace-nowrap border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Property, Plant & Equipment</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(
|
||||
balance?.propertyPlantEquipmentNet,
|
||||
)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Goodwill & Intangibles</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(
|
||||
balance?.goodwillAndIntangibleAssets,
|
||||
)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Total Long-Term Assets</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(balance?.totalNonCurrentAssets)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Total Assets</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(balance?.totalAssets)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Account Payables</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(balance?.accountPayables)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Deferred Revenue</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(balance?.deferredRevenue)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Short-Term Debt</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(balance?.shortTermDebt)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Other Current Liabilities</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(
|
||||
balance?.otherCurrentLiabilities,
|
||||
)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Total Current Liabilities</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(
|
||||
balance?.totalCurrentLiabilities,
|
||||
)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Long-Term Debt</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(balance?.longTermDebt)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Other Long-Term Liabilities</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(
|
||||
balance?.otherNonCurrentLiabilities,
|
||||
)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Total Long-Term Liabilities</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(
|
||||
balance?.totalNonCurrentLiabilities,
|
||||
)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Total Liabilities</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(balance?.totalLiabilities)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Total Debt</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(balance?.totalDebt)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Common Stock</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(balance?.commonStock)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Retained Earnings</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(balance?.retainedEarnings)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Comprehensive Income</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(
|
||||
balance?.accumulatedOtherComprehensiveIncomeLoss,
|
||||
)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Shareholders' Equity</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(
|
||||
balance?.totalStockholdersEquity,
|
||||
)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Total Investments</td
|
||||
>
|
||||
{#each balanceSheet as balance}
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{abbreviateNumber(balance?.totalInvestments)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<FinancialTable data={balanceSheet} {fields} />
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -15,6 +15,8 @@
|
||||
import { LineChart, BarChart } from "echarts/charts";
|
||||
import { GridComponent, TooltipComponent } from "echarts/components";
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
import FinancialTable from "$lib/components/FinancialTable.svelte";
|
||||
|
||||
use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
|
||||
|
||||
export let data;
|
||||
@ -168,6 +170,11 @@
|
||||
},
|
||||
];
|
||||
|
||||
const fields = statementConfig.map((item) => ({
|
||||
label: item.label,
|
||||
key: item.propertyName,
|
||||
}));
|
||||
|
||||
function toggleMode() {
|
||||
$coolMode = !$coolMode;
|
||||
}
|
||||
@ -447,13 +454,14 @@
|
||||
{statementConfig?.find(
|
||||
(item) => item?.propertyName === displayStatement,
|
||||
)?.text}
|
||||
<!--<Katex formula={true} math={"\\textrm{Revenue}=\\textrm{Revenue} - \\textrm{All Expenses}"}/>-->
|
||||
{:else}
|
||||
{:else if cashFlow?.length > 0}
|
||||
Get detailed ratio statement breakdowns, uncovering price to
|
||||
free cash flow ratio, price per earnings, and much more.
|
||||
{:else}
|
||||
No financial data available for {$displayCompanyName}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if cashFlow?.length > 0}
|
||||
<div
|
||||
class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6"
|
||||
>
|
||||
@ -469,7 +477,9 @@
|
||||
: ''} "
|
||||
>
|
||||
{#if activeIdx === i}
|
||||
<div class="absolute inset-0 rounded-md bg-[#fff]"></div>
|
||||
<div
|
||||
class="absolute inset-0 rounded-md bg-[#fff]"
|
||||
></div>
|
||||
{/if}
|
||||
<span
|
||||
class="relative text-sm block font-semibold {activeIdx ===
|
||||
@ -733,7 +743,8 @@
|
||||
<span class="text-[#FF2F1F]">
|
||||
-{(
|
||||
Math?.abs(
|
||||
(tableList[index + 1]?.value - item?.value) /
|
||||
(tableList[index + 1]?.value -
|
||||
item?.value) /
|
||||
Math.abs(item?.value),
|
||||
) * 100
|
||||
)?.toFixed(2)}%
|
||||
@ -779,255 +790,12 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- row -->
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Net Income</td
|
||||
>
|
||||
{#each cashFlow as cash}
|
||||
<td class="text-end text-sm sm:text-[1rem]">
|
||||
{abbreviateNumber(cash?.netIncome)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start whitespace-nowrap border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Depreciation & Amortization</td
|
||||
>
|
||||
{#each cashFlow as cash}
|
||||
<td class="text-end text-sm sm:text-[1rem]">
|
||||
{abbreviateNumber(
|
||||
cash?.depreciationAndAmortization,
|
||||
)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Stock-Based Compensation</td
|
||||
>
|
||||
{#each cashFlow as cash}
|
||||
<td class="text-end text-sm sm:text-[1rem]">
|
||||
{abbreviateNumber(cash?.stockBasedCompensation)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Other Working Capital</td
|
||||
>
|
||||
{#each cashFlow as cash}
|
||||
<td class="text-end text-sm sm:text-[1rem]">
|
||||
{abbreviateNumber(cash?.otherWorkingCapital)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Other Non-Cash Items</td
|
||||
>
|
||||
{#each cashFlow as cash}
|
||||
<td class="text-end text-sm sm:text-[1rem]">
|
||||
{abbreviateNumber(cash?.otherNonCashItems)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Deferred Income Tax</td
|
||||
>
|
||||
{#each cashFlow as cash}
|
||||
<td class="text-end text-sm sm:text-[1rem]">
|
||||
{abbreviateNumber(cash?.deferredIncomeTax)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Change in Working Capital</td
|
||||
>
|
||||
{#each cashFlow as cash}
|
||||
<td class="text-end text-sm sm:text-[1rem]">
|
||||
{abbreviateNumber(cash?.changeInWorkingCapital)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Operating Cash Flow</td
|
||||
>
|
||||
{#each cashFlow as cash}
|
||||
<td class="text-end text-sm sm:text-[1rem]">
|
||||
{abbreviateNumber(
|
||||
cash?.netCashProvidedByOperatingActivities,
|
||||
)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Capital Expenditures</td
|
||||
>
|
||||
{#each cashFlow as cash}
|
||||
<td class="text-end text-sm sm:text-[1rem]">
|
||||
{abbreviateNumber(cash?.capitalExpenditure)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Acquisitions</td
|
||||
>
|
||||
{#each cashFlow as cash}
|
||||
<td class="text-end text-sm sm:text-[1rem]">
|
||||
{abbreviateNumber(cash?.acquisitionsNet)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Purchase of Investments</td
|
||||
>
|
||||
{#each cashFlow as cash}
|
||||
<td class="text-end text-sm sm:text-[1rem]">
|
||||
{abbreviateNumber(cash?.purchasesOfInvestments)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start whitespace-nowrap border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Sales Maturities Of Investments</td
|
||||
>
|
||||
{#each cashFlow as cash}
|
||||
<td class="text-end text-sm sm:text-[1rem]">
|
||||
{abbreviateNumber(
|
||||
cash?.salesMaturitiesOfInvestments,
|
||||
)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Other Investing Acitivies</td
|
||||
>
|
||||
{#each cashFlow as cash}
|
||||
<td class="text-end text-sm sm:text-[1rem]">
|
||||
{abbreviateNumber(cash?.otherInvestingActivites)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Investing Cash Flow</td
|
||||
>
|
||||
{#each cashFlow as cash}
|
||||
<td class="text-end text-sm sm:text-[1rem]">
|
||||
{abbreviateNumber(
|
||||
cash?.netCashUsedForInvestingActivites,
|
||||
)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Debt Repayment</td
|
||||
>
|
||||
{#each cashFlow as cash}
|
||||
<td class="text-end text-sm sm:text-[1rem]">
|
||||
{abbreviateNumber(cash?.debtRepayment)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start whitespace-nowrap border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Common Stock Repurchased</td
|
||||
>
|
||||
{#each cashFlow as cash}
|
||||
<td class="text-end text-sm sm:text-[1rem]">
|
||||
{abbreviateNumber(cash?.commonStockRepurchased)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Dividend Paid</td
|
||||
>
|
||||
{#each cashFlow as cash}
|
||||
<td class="text-end text-sm sm:text-[1rem]">
|
||||
{abbreviateNumber(cash?.dividendsPaid)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Other Financial Acitivies</td
|
||||
>
|
||||
{#each cashFlow as cash}
|
||||
<td class="text-end text-sm sm:text-[1rem]">
|
||||
{abbreviateNumber(cash?.otherFinancingActivites)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Financial Cash Flow</td
|
||||
>
|
||||
{#each cashFlow as cash}
|
||||
<td class="text-end text-sm sm:text-[1rem]">
|
||||
{abbreviateNumber(
|
||||
cash?.netCashUsedProvidedByFinancingActivities,
|
||||
)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Net Cash Flow</td
|
||||
>
|
||||
{#each cashFlow as cash}
|
||||
<td class="text-end text-sm sm:text-[1rem]">
|
||||
{abbreviateNumber(cash?.netChangeInCash)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Free Cash Flow</td
|
||||
>
|
||||
{#each cashFlow as cash}
|
||||
<td class="text-end text-sm sm:text-[1rem]">
|
||||
{abbreviateNumber(cash?.freeCashFlow)}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<FinancialTable data={cashFlow} {fields} />
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -15,6 +15,8 @@
|
||||
import { LineChart, BarChart } from "echarts/charts";
|
||||
import { GridComponent, TooltipComponent } from "echarts/components";
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
import FinancialTable from "$lib/components/FinancialTable.svelte";
|
||||
|
||||
use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
|
||||
|
||||
export let data;
|
||||
@ -132,6 +134,11 @@
|
||||
},
|
||||
];
|
||||
|
||||
const fields = statementConfig.map((item) => ({
|
||||
label: item.label,
|
||||
key: item.propertyName,
|
||||
}));
|
||||
|
||||
function toggleMode() {
|
||||
$coolMode = !$coolMode;
|
||||
}
|
||||
@ -411,13 +418,14 @@
|
||||
{statementConfig?.find(
|
||||
(item) => item?.propertyName === displayStatement,
|
||||
)?.text}
|
||||
<!--<Katex formula={true} math={"\\textrm{Revenue}=\\textrm{Revenue} - \\textrm{All Expenses}"}/>-->
|
||||
{:else}
|
||||
{:else if ratios?.length > 0}
|
||||
Get detailed income statement breakdowns, uncovering revenue,
|
||||
expenses, and much more.
|
||||
{:else}
|
||||
No financial data available for {$displayCompanyName}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if ratios?.length > 0}
|
||||
<div
|
||||
class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6"
|
||||
>
|
||||
@ -433,7 +441,9 @@
|
||||
: ''} "
|
||||
>
|
||||
{#if activeIdx === i}
|
||||
<div class="absolute inset-0 rounded-md bg-[#fff]"></div>
|
||||
<div
|
||||
class="absolute inset-0 rounded-md bg-[#fff]"
|
||||
></div>
|
||||
{/if}
|
||||
<span
|
||||
class="relative text-sm block font-semibold {activeIdx ===
|
||||
@ -559,7 +569,8 @@
|
||||
on:change={changeStatement}
|
||||
>
|
||||
<option disabled>Choose an Income Variable</option>
|
||||
<option value="priceEarningsRatio" selected>PE Ratio</option
|
||||
<option value="priceEarningsRatio" selected
|
||||
>PE Ratio</option
|
||||
>
|
||||
<option value="priceToSalesRatio">PS Ratio</option>
|
||||
<option value="priceToBookRatio">PB Ratio</option>
|
||||
@ -572,11 +583,14 @@
|
||||
<option value="operatingCashFlowSalesRatio"
|
||||
>OCF/S Ratio</option
|
||||
>
|
||||
<option value="debtEquityRatio">Debt / Equity Ratio</option>
|
||||
<option value="debtEquityRatio"
|
||||
>Debt / Equity Ratio</option
|
||||
>
|
||||
<option value="quickRatio">Quick Ratio</option>
|
||||
<option value="currentRatio">Current Ratio</option>
|
||||
<option value="assetTurnover">Asset Turnover</option>
|
||||
<option value="interestCoverage">Interest Coverage</option>
|
||||
<option value="interestCoverage">Interest Coverage</option
|
||||
>
|
||||
<option value="returnOnEquity"
|
||||
>Return on Equity (ROE)</option
|
||||
>
|
||||
@ -679,7 +693,8 @@
|
||||
<span class="text-[#FF2F1F]">
|
||||
-{(
|
||||
Math?.abs(
|
||||
(tableList[index + 1]?.value - item?.value) /
|
||||
(tableList[index + 1]?.value -
|
||||
item?.value) /
|
||||
Math.abs(item?.value),
|
||||
) * 100
|
||||
)?.toFixed(2)}%
|
||||
@ -723,244 +738,12 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- row -->
|
||||
<tr class="text-white odd:bg-[#27272A] whitespace-nowrap">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>PE Ratio</td
|
||||
>
|
||||
{#each ratios as item}
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{filterRule === "annual"
|
||||
? (item?.priceEarningsRatio / 4)?.toFixed(2)
|
||||
: item?.priceEarningsRatio?.toFixed(2)}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>PS Ratio</td
|
||||
>
|
||||
{#each ratios as item}
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{filterRule === "annual"
|
||||
? (item?.priceToSalesRatio / 4)?.toFixed(2)
|
||||
: item?.priceToSalesRatio?.toFixed(2)}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>PB Ratio</td
|
||||
>
|
||||
{#each ratios as item}
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{filterRule === "annual"
|
||||
? (item?.priceToBookRatio / 4)?.toFixed(2)
|
||||
: item?.priceToBookRatio?.toFixed(2)}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A] whitespace-nowrap">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>P/FCF Ratio</td
|
||||
>
|
||||
{#each ratios as item}
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{filterRule === "annual"
|
||||
? (item?.priceToFreeCashFlowsRatio / 4)?.toFixed(2)
|
||||
: item?.priceToFreeCashFlowsRatio?.toFixed(2)}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>P/OCF Ratio</td
|
||||
>
|
||||
{#each ratios as item}
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{filterRule === "annual"
|
||||
? (
|
||||
item?.priceToOperatingCashFlowsRatio / 4
|
||||
)?.toFixed(2)
|
||||
: item?.priceToOperatingCashFlowsRatio?.toFixed(2)}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>OCF/S Ratio</td
|
||||
>
|
||||
{#each ratios as item}
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{filterRule === "annual"
|
||||
? (item?.operatingCashFlowSalesRatio / 4)?.toFixed(
|
||||
2,
|
||||
)
|
||||
: item?.operatingCashFlowSalesRatio?.toFixed(2)}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start whitespace-nowrap border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Debt / Equity Ratio</td
|
||||
>
|
||||
{#each ratios as item}
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{filterRule === "annual"
|
||||
? (item?.debtEquityRatio / 4)?.toFixed(2)
|
||||
: item?.debtEquityRatio?.toFixed(2)}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Quick Ratio</td
|
||||
>
|
||||
{#each ratios as item}
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{filterRule === "annual"
|
||||
? (item?.quickRatio / 4)?.toFixed(2)
|
||||
: item?.quickRatio?.toFixed(2)}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Current Ratio</td
|
||||
>
|
||||
{#each ratios as item}
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{filterRule === "annual"
|
||||
? (item?.currentRatio / 4)?.toFixed(2)
|
||||
: item?.currentRatio?.toFixed(2)}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>Asset Turnover</td
|
||||
>
|
||||
{#each ratios as item}
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{item?.assetTurnover?.toFixed(2)}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Interest Coverage</td
|
||||
>
|
||||
{#each ratios as item}
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{filterRule === "annual"
|
||||
? (item?.interestCoverage / 4)?.toFixed(2)
|
||||
: item?.interestCoverage?.toFixed(2)}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- row -->
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Return on Equity (ROE)</td
|
||||
>
|
||||
{#each ratios as item}
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{(item?.returnOnEquity * 100)?.toFixed(2)}%
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start whitespace-nowrap border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Return on Assets (ROA)</td
|
||||
>
|
||||
{#each ratios as item}
|
||||
<td class="text-sm sm:text-[1rem] text-end"
|
||||
>{(item?.returnOnAssets * 100)?.toFixed(2)}%</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Return on Capital (ROIC)</td
|
||||
>
|
||||
{#each ratios as item}
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{(item?.returnOnCapitalEmployed * 100)?.toFixed(
|
||||
2,
|
||||
)}%</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Dividend Yield</td
|
||||
>
|
||||
{#each ratios as item}
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{(item?.dividendYield * 100)?.toFixed(2)}%</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Payout Ratio</td
|
||||
>
|
||||
{#each ratios as item}
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{filterRule === "annual"
|
||||
? ((item?.payoutRatio / 4) * 100)?.toFixed(2)
|
||||
: (item?.payoutRatio * 100)?.toFixed(2)}%
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Gross Profit Margin</td
|
||||
>
|
||||
{#each ratios as item}
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{filterRule === "annual"
|
||||
? ((item?.grossProfitMargin / 4) * 100)?.toFixed(2)
|
||||
: (item?.grossProfitMargin * 100)?.toFixed(2)}%
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="text-white odd:bg-[#27272A]">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
|
||||
>Net Profit Margin</td
|
||||
>
|
||||
{#each ratios as item}
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{filterRule === "annual"
|
||||
? ((item?.netProfitMargin / 4) * 100)?.toFixed(2)
|
||||
: (item?.netProfitMargin * 100)?.toFixed(2)}%
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<FinancialTable data={ratios} {fields} {filterRule} />
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user