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

refactor code

Browse Source
This commit is contained in:
MuslemRahimi 2024-12-01 19:55:22 +01:00
parent 85ba1761ec
commit 3dd2276996
6 changed files with 996 additions and 1747 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/lib/components/FinancialTable.svelte
View File

@ -1,38 +1,8 @@
<script lang="ts"> <script lang="ts">
import { abbreviateNumber } from "$lib/utils"; import { abbreviateNumber } from "$lib/utils";
export let data; export let data;
export let fields;
const fields = [ export let filterRule = null;
{ 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" },
];
</script> </script>
{#each fields as { label, key }} {#each fields as { label, key }}
@ -44,9 +14,15 @@
</td> </td>
{#each data as item} {#each data as item}
<td class="text-sm sm:text-[1rem] text-end"> <td class="text-sm sm:text-[1rem] text-end">
{#if filterRule === "annual"}
{item[key] !== null && item[key] !== 0 {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> </td>
{/each} {/each}
</tr> </tr>

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

@ -45,7 +45,7 @@
} }
</script> </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="w-full overflow-hidden m-auto">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden"> <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div <div

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

@ -60,6 +60,30 @@
label: "Gross Profit", 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.", 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", propertyName: "sellingGeneralAndAdministrativeExpenses",
growthPropertyName: "growthSellingGeneralAndAdministrativeExpenses", 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.", 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", propertyName: "sellingAndMarketingExpenses",
growthPropertyName: "growthIncomeBeforeTax", growthPropertyName: "growthSellingAndMarketingExpenses",
label: "Pretax Income", label: "Selling & Marketing Expenses",
text: "Pretax income is a company's profits before accounting for income taxes.", 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", propertyName: "incomeTaxExpense",
@ -102,12 +132,6 @@
label: "Income Tax", label: "Income Tax",
text: "Income tax is the amount of corporate income tax that the company has incurred during the fiscal period.", 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", propertyName: "weightedAverageShsOut",
growthPropertyName: "growthWeightedAverageShsOut", growthPropertyName: "growthWeightedAverageShsOut",
@ -146,6 +170,10 @@
}, },
]; ];
const fields = statementConfig.map((item) => ({
label: item.label,
key: item.propertyName,
}));
function toggleMode() { function toggleMode() {
$coolMode = !$coolMode; $coolMode = !$coolMode;
} }
@ -746,7 +774,7 @@
</thead> </thead>
<tbody> <tbody>
<!-- row --> <!-- row -->
<FinancialTable data={income} /> <FinancialTable data={income} {fields} />
</tbody> </tbody>
</table> </table>
</div> </div>

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

@ -11,6 +11,7 @@
import { abbreviateNumber } from "$lib/utils"; import { abbreviateNumber } from "$lib/utils";
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
//import * as XLSX from 'xlsx'; //import * as XLSX from 'xlsx';
import FinancialTable from "$lib/components/FinancialTable.svelte";
import { init, use } from "echarts/core"; import { init, use } from "echarts/core";
import { LineChart, BarChart } from "echarts/charts"; 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() { function toggleMode() {
$coolMode = !$coolMode; $coolMode = !$coolMode;
@ -506,13 +510,14 @@
{statementConfig?.find( {statementConfig?.find(
(item) => item?.propertyName === displayStatement, (item) => item?.propertyName === displayStatement,
)?.text} )?.text}
<!--<Katex formula={true} math={"\\textrm{Revenue}=\\textrm{Revenue} - \\textrm{All Expenses}"}/>--> {:else if balanceSheet?.length > 0}
{:else}
Get detailed breakdowns of the balance-sheet with total debts, Get detailed breakdowns of the balance-sheet with total debts,
total investments, and much more. total investments, and much more.
{:else}
No financial data available for {$displayCompanyName}
{/if} {/if}
</div> </div>
{#if balanceSheet?.length > 0}
<div <div
class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6" 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} {#if activeIdx === i}
<div class="absolute inset-0 rounded-md bg-[#fff]"></div> <div
class="absolute inset-0 rounded-md bg-[#fff]"
></div>
{/if} {/if}
<span <span
class="relative text-sm block font-semibold {activeIdx === class="relative text-sm block font-semibold {activeIdx ===
@ -700,17 +707,20 @@
<option value="totalNonCurrentLiabilities" <option value="totalNonCurrentLiabilities"
>Total Long-Term Liabilities</option >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="totalDebt">Total Debt</option>
<option value="commonStock">Common Stock</option> <option value="commonStock">Common Stock</option>
<option value="retainedEarnings">Retained Earnigns</option> <option value="retainedEarnings">Retained Earnigns</option
>
<option value="accumulatedOtherComprehensiveIncomeLoss" <option value="accumulatedOtherComprehensiveIncomeLoss"
>Comprehensive Income</option >Comprehensive Income</option
> >
<option value="totalStockholdersEquity" <option value="totalStockholdersEquity"
>Shareholders' Equity</option >Shareholders' Equity</option
> >
<option value="totalInvestments">Total Investments</option> <option value="totalInvestments">Total Investments</option
>
</select> </select>
</div> </div>
</div> </div>
@ -800,7 +810,8 @@
<span class="text-[#FF2F1F]"> <span class="text-[#FF2F1F]">
-{( -{(
Math?.abs( Math?.abs(
(tableList[index + 1]?.value - item?.value) / (tableList[index + 1]?.value -
item?.value) /
Math.abs(item?.value), Math.abs(item?.value),
) * 100 ) * 100
)?.toFixed(2)}% )?.toFixed(2)}%
@ -825,21 +836,21 @@
class="text-start 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 balanceSheet as balance} {#each balanceSheet as cash}
{#if filterRule === "annual"} {#if filterRule === "annual"}
<td <td
class="bg-[#09090B] font-semibold text-sm text-end" class="bg-[#09090B] font-semibold text-sm text-end"
> >
{"FY" + balance?.calendarYear?.slice(-2)} {"FY" + cash?.calendarYear?.slice(-2)}
</td> </td>
{:else} {:else}
<td <td
class="bg-[#09090B] font-semibold text-sm text-end" class="bg-[#09090B] font-semibold text-sm text-end"
> >
{"FY" + {"FY" +
balance?.calendarYear?.slice(-2) + cash?.calendarYear?.slice(-2) +
" " + " " +
balance?.period} cash?.period}
</td> </td>
{/if} {/if}
{/each} {/each}
@ -847,329 +858,12 @@
</thead> </thead>
<tbody> <tbody>
<!-- row --> <!-- row -->
<tr class="text-white odd:bg-[#27272A]"> <FinancialTable data={balanceSheet} {fields} />
<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>
</tbody> </tbody>
</table> </table>
</div> </div>
{/if} {/if}
{/if}
</div> </div>
</div> </div>
</main> </main>

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

@ -15,6 +15,8 @@
import { LineChart, BarChart } from "echarts/charts"; import { LineChart, BarChart } from "echarts/charts";
import { GridComponent, TooltipComponent } from "echarts/components"; import { GridComponent, TooltipComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers"; import { CanvasRenderer } from "echarts/renderers";
import FinancialTable from "$lib/components/FinancialTable.svelte";
use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]); use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
export let data; export let data;
@ -168,6 +170,11 @@
}, },
]; ];
const fields = statementConfig.map((item) => ({
label: item.label,
key: item.propertyName,
}));
function toggleMode() { function toggleMode() {
$coolMode = !$coolMode; $coolMode = !$coolMode;
} }
@ -447,13 +454,14 @@
{statementConfig?.find( {statementConfig?.find(
(item) => item?.propertyName === displayStatement, (item) => item?.propertyName === displayStatement,
)?.text} )?.text}
<!--<Katex formula={true} math={"\\textrm{Revenue}=\\textrm{Revenue} - \\textrm{All Expenses}"}/>--> {:else if cashFlow?.length > 0}
{:else}
Get detailed ratio statement breakdowns, uncovering price to Get detailed ratio statement breakdowns, uncovering price to
free cash flow ratio, price per earnings, and much more. free cash flow ratio, price per earnings, and much more.
{:else}
No financial data available for {$displayCompanyName}
{/if} {/if}
</div> </div>
{#if cashFlow?.length > 0}
<div <div
class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6" 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} {#if activeIdx === i}
<div class="absolute inset-0 rounded-md bg-[#fff]"></div> <div
class="absolute inset-0 rounded-md bg-[#fff]"
></div>
{/if} {/if}
<span <span
class="relative text-sm block font-semibold {activeIdx === class="relative text-sm block font-semibold {activeIdx ===
@ -733,7 +743,8 @@
<span class="text-[#FF2F1F]"> <span class="text-[#FF2F1F]">
-{( -{(
Math?.abs( Math?.abs(
(tableList[index + 1]?.value - item?.value) / (tableList[index + 1]?.value -
item?.value) /
Math.abs(item?.value), Math.abs(item?.value),
) * 100 ) * 100
)?.toFixed(2)}% )?.toFixed(2)}%
@ -779,255 +790,12 @@
</thead> </thead>
<tbody> <tbody>
<!-- row --> <!-- row -->
<tr class="text-white odd:bg-[#27272A]"> <FinancialTable data={cashFlow} {fields} />
<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>
</tbody> </tbody>
</table> </table>
</div> </div>
{/if} {/if}
{/if}
</div> </div>
</div> </div>
</main> </main>

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

@ -15,6 +15,8 @@
import { LineChart, BarChart } from "echarts/charts"; import { LineChart, BarChart } from "echarts/charts";
import { GridComponent, TooltipComponent } from "echarts/components"; import { GridComponent, TooltipComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers"; import { CanvasRenderer } from "echarts/renderers";
import FinancialTable from "$lib/components/FinancialTable.svelte";
use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]); use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
export let data; export let data;
@ -132,6 +134,11 @@
}, },
]; ];
const fields = statementConfig.map((item) => ({
label: item.label,
key: item.propertyName,
}));
function toggleMode() { function toggleMode() {
$coolMode = !$coolMode; $coolMode = !$coolMode;
} }
@ -411,13 +418,14 @@
{statementConfig?.find( {statementConfig?.find(
(item) => item?.propertyName === displayStatement, (item) => item?.propertyName === displayStatement,
)?.text} )?.text}
<!--<Katex formula={true} math={"\\textrm{Revenue}=\\textrm{Revenue} - \\textrm{All Expenses}"}/>--> {:else if ratios?.length > 0}
{:else}
Get detailed income statement breakdowns, uncovering revenue, Get detailed income statement breakdowns, uncovering revenue,
expenses, and much more. expenses, and much more.
{:else}
No financial data available for {$displayCompanyName}
{/if} {/if}
</div> </div>
{#if ratios?.length > 0}
<div <div
class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6" 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} {#if activeIdx === i}
<div class="absolute inset-0 rounded-md bg-[#fff]"></div> <div
class="absolute inset-0 rounded-md bg-[#fff]"
></div>
{/if} {/if}
<span <span
class="relative text-sm block font-semibold {activeIdx === class="relative text-sm block font-semibold {activeIdx ===
@ -559,7 +569,8 @@
on:change={changeStatement} on:change={changeStatement}
> >
<option disabled>Choose an Income Variable</option> <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="priceToSalesRatio">PS Ratio</option>
<option value="priceToBookRatio">PB Ratio</option> <option value="priceToBookRatio">PB Ratio</option>
@ -572,11 +583,14 @@
<option value="operatingCashFlowSalesRatio" <option value="operatingCashFlowSalesRatio"
>OCF/S Ratio</option >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="quickRatio">Quick Ratio</option>
<option value="currentRatio">Current Ratio</option> <option value="currentRatio">Current Ratio</option>
<option value="assetTurnover">Asset Turnover</option> <option value="assetTurnover">Asset Turnover</option>
<option value="interestCoverage">Interest Coverage</option> <option value="interestCoverage">Interest Coverage</option
>
<option value="returnOnEquity" <option value="returnOnEquity"
>Return on Equity (ROE)</option >Return on Equity (ROE)</option
> >
@ -679,7 +693,8 @@
<span class="text-[#FF2F1F]"> <span class="text-[#FF2F1F]">
-{( -{(
Math?.abs( Math?.abs(
(tableList[index + 1]?.value - item?.value) / (tableList[index + 1]?.value -
item?.value) /
Math.abs(item?.value), Math.abs(item?.value),
) * 100 ) * 100
)?.toFixed(2)}% )?.toFixed(2)}%
@ -723,244 +738,12 @@
</thead> </thead>
<tbody> <tbody>
<!-- row --> <!-- row -->
<tr class="text-white odd:bg-[#27272A] whitespace-nowrap"> <FinancialTable data={ratios} {fields} {filterRule} />
<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>
</tbody> </tbody>
</table> </table>
</div> </div>
{/if} {/if}
{/if}
</div> </div>
</div> </div>
</main> </main>