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

update plot

Browse Source
This commit is contained in:
MuslemRahimi 2025-04-03 12:20:47 +02:00
parent d6db0850f2
commit e3cb01ac04
2 changed files with 51 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,13 @@
let config = null;
let modalLabel;
let highestValue;
let highestValueDate;
let lowestValueDate;
let lowestValue;
let fiveYearsGrowth;
const marginKeys = new Set([
/*
"pretaxProfitMargin",
@ -48,11 +55,28 @@
const valueList = rawData?.map((item) => item[key]);
// Calculate highest and lowest value
highestValue = Math.max(...valueList);
lowestValue = Math.min(...valueList);
let highestValueIndex = valueList.indexOf(highestValue);
let lowestValueIndex = valueList.indexOf(lowestValue);
highestValueDate = dateList[highestValueIndex] || null;
lowestValueDate = dateList[lowestValueIndex] || null;
// Calculate last 5 years growth
fiveYearsGrowth = null;
if (valueList?.length >= 5) {
let firstValue = valueList[valueList.length - 5];
let lastValue = valueList[valueList.length - 1];
fiveYearsGrowth = ((lastValue - firstValue) / Math.abs(firstValue)) * 100;
}
const options = {
chart: {
type: "column",
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
backgroundColor: $mode === "light" ? "#fff" : "#2A2E39",
plotBackgroundColor: $mode === "light" ? "#fff" : "#2A2E39",
height: 360,
animation: false,
},
@ -98,7 +122,7 @@
},
yAxis: {
gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
gridLineColor: $mode === "light" ? "#e5e7eb" : "#404657",
labels: {
style: { color: $mode === "light" ? "black" : "white" },
formatter: function () {
@ -125,7 +149,7 @@
this.points.forEach((point) => {
tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span>
<span class="text-white font-normal text-sm">${abbreviateNumber(
point.y,
point.y?.toFixed(2),
)}</span><br>`;
});
return tooltipContent;
@ -146,6 +170,7 @@
}
async function handleChart(label, key) {
modalLabel = label;
config = plotData(label, key);
}
</script>
@ -157,7 +182,7 @@
<td
class="text-start min-w-[220px] sm:min-w-[320px] border-r border-gray-300 dark:border-gray-700 text-sm sm:text-[1rem] w-full flex flex-row items-center justify-between"
>
<span class="truncate w-fit max-w-40 sm:max-w-fit">{label}</span>
<span class="truncate w-fit max-w-40 sm:max-w-64">{label}</span>
<label
for="financialPlotModal"
on:click={() => handleChart(label, key)}
@ -200,24 +225,27 @@
<label for="financialPlotModal" class="cursor-pointer modal-backdrop"></label>
<div
class="modal-box bg-white relative dark:bg-default w-full max-w-3xl rounded-md border-t sm:border border-gray-300 dark:border-gray-700 min-h-48 h-auto"
class="modal-box w-full p-6 rounded shadow-lg border
bg-white dark:bg-secondary border border-gray-600 dark:border-gray-800"
>
<label
for="financialPlotModal"
class="cursor-pointer text-[1.8rem] focus:outline-hidden absolute top-2 right-3"
>
<svg
class="w-8 h-8 text-muted dark:text-white"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="currentColor"
d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
/>
</svg>
</label>
{#if config}
<div class="mt-2" use:highcharts={config}></div>
{/if}
<p class="text-sm mb-6">
Revenue peaked at {abbreviateNumber(highestValue?.toFixed(2))} in {highestValueDate}
and hit its lowest at {abbreviateNumber(lowestValue?.toFixed(2))} in {lowestValueDate}.
Over the past five years, it has {fiveYearsGrowth >= 0
? "grown"
: "declined"} by {fiveYearsGrowth?.toFixed(2)}%.
</p>
<div class="border-t border-gray-300 dark:border-gray-600 mt-2 w-full">
<label
for="financialPlotModal"
class="mt-4 font-semibold text-xl m-auto flex justify-center cursor-pointer"
>
Close
</label>
</div>
</div>
</dialog>

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

@ -22,7 +22,6 @@
let financialData = [];
let fullStatement = [];
let filterRule = "annual";
let displayStatement = "revenue";
let activeIdx = 0;
@ -38,135 +37,92 @@
const statementConfig = [
{
propertyName: "revenue",
growthPropertyName: "growthRevenue",
label: "Revenue",
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: "costOfRevenue",
growthPropertyName: "growthCostOfRevenue",
label: "Cost of Revenue",
text: "Cost of revenue is also called cost of goods sold (COGS). It is the variable cost related to the company's production of products and services.",
},
{
propertyName: "grossProfit",
growthPropertyName: "growthGrossProfit",
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",
label: "Selling & General & Admin",
text: "Selling, general and administrative (SG&A) is an operating expense. It involves various company expenses that are not related to production.",
},
{
propertyName: "researchAndDevelopmentExpenses",
growthPropertyName: "growthResearchAndDevelopmentExpenses",
label: "Research & Development",
text: "Research and development (R&D) is an operating expense. It is the amount of money a company spends on researching and developing new products and services, or improving existing ones.",
},
{
propertyName: "otherExpenses",
growthPropertyName: "growthOtherExpenses",
label: "Other Expenses",
text: "Other expenses typically refer to costs that are not directly related to the primary operations of the business. These can include a wide variety of things, such as interest expense, taxes, depreciation and amortization, losses from investments, legal fees and restructuring costs.",
},
{
propertyName: "operatingExpenses",
growthPropertyName: "growthOperatingExpenses",
label: "Operating Expenses",
text: "Operating expenses are a company's fixed costs that a company incurs during its ongoing business operations. It can include SG&A, R&D and other expenses.",
},
{
propertyName: "interestExpense",
growthPropertyName: "growthInterestExpense",
label: "Interest Expense",
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: "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",
growthPropertyName: "growthIncomeTaxExpense",
label: "Income Tax",
text: "Income tax is the amount of corporate income tax that the company has incurred during the fiscal period.",
},
{
propertyName: "weightedAverageShsOut",
growthPropertyName: "growthWeightedAverageShsOut",
label: "Shares Outstanding (Basic)",
text: "Basic shares outstanding is the total amount of common stock held by all of a company's shareholders.",
},
{
propertyName: "weightedAverageShsOutDil",
growthPropertyName: "growthWeightedAverageShsOutDil",
label: "Shares Outstanding (Diluted)",
text: "Diluted shares outstanding is the total amount of common stock that will be outstanding if all stock options, warrants and convertible securities are exercised.",
},
{
propertyName: "eps",
growthPropertyName: "growthEPS",
label: "EPS (Basic)",
text: "Earnings per share is the portion of a company's profit that is allocated to each individual stock. EPS is calculated by dividing net income by shares outstanding.",
},
{
propertyName: "epsDiluted",
growthPropertyName: "growthEPSDiluted",
label: "EPS (Diluted)",
text: `Earnings per share is the portion of a company's profit that is allocated to each individual stock. Diluted EPS is calculated by dividing net income by "diluted" shares outstanding.`,
},
{
propertyName: "ebitda",
growthPropertyName: "growthEBITDA",
label: "EBITDA",
text: `EBITDA stands for "Earnings Before Interest, Taxes, Depreciation and Amortization." It is a commonly used measure of profitability.`,
},
{
propertyName: "ebit",
growthPropertyName: "growthEBIT",
label: "EBIT",
text: ``,
},
{
propertyName: "depreciationAndAmortization",
growthPropertyName: "growthDepreciationAndAmortization",
label: "Depreciation & Amortization",
text: "Depreciation and amortization are accounting methods for calculating how the value of a business's assets change over time. Depreciation refers to physical assets, while amortization refers to intangible assets.",
},
];
@ -198,7 +154,6 @@
};
fullStatement = data?.getData;
displayStatement = "revenue";
const exportFundamentalData = (format = "csv") => {
if (["Pro", "Plus"]?.includes(data?.user?.tier)) {
@ -326,7 +281,7 @@
<SEO
title={`${$displayCompanyName} (${$stockTicker}) Financials - Income Statement`}
description={`Detailed annual and timeFramely income statement for ${$displayCompanyName} (${$stockTicker}). See many years of revenue, expenses and profits or losses.`}
description={`Detailed annual and quarter income statement for ${$displayCompanyName} (${$stockTicker}). See many years of revenue, expenses and profits or losses.`}
/>
<section class=" w-full overflow-hidden h-full">
@ -506,10 +461,10 @@
</div>
{:else}
<div
class="flex flex-col sm:flex-row items-start sm:items-center sm:justify-between"
class="flex flex-col sm:flex-row items-start sm:items-end sm:justify-between"
>
<span
class="text-sm order-1 sm:order-0 mt-5 sm:mt-0 text-gray-600 dark:text-gray-400 w-full"
class="text-xs sm:text-sm order-1 sm:order-0 mt-5 sm:mt-0 text-gray-600 dark:text-gray-400 w-full"
>
Financials in {data?.getProfileData?.currency}. Fiscal year
is