update plot
This commit is contained in:
MuslemRahimi
parent
d6db0850f2
commit
e3cb01ac04
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user