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

update business metrics

Browse Source
This commit is contained in:
MuslemRahimi 2025-01-03 13:42:29 +01:00
parent 6a74495849
commit 9da74ed0a1
1 changed files with 91 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/routes/stocks/[tickerID]/metrics/+page.svelte
View File

@ -25,15 +25,20 @@
}),
);
const dataset = data?.getBusinessMetrics?.revenue?.history || [];
const geographicDataset = data?.getBusinessMetrics?.geographic?.history || [];
const operatingExpensesDataset =
data?.getBusinessMetrics?.operatingExpenses?.history || [];
const revenueNames = data?.getBusinessMetrics?.revenue?.names || [];
const geographicNames = data?.getBusinessMetrics?.geographic?.names || [];
const operatingExpensesNames =
data?.getBusinessMetrics?.operatingExpenses?.names || [];
const xData = dataset?.map((item) => item?.date);
const geographicXData = geographicDataset?.map((item) => item?.date);
const operatingExpensesXData = operatingExpensesDataset?.map(
(item) => item?.date,
);
const categoryValues = revenueNames?.map((_, index) =>
dataset?.map((item) => item.value[index]),
@ -41,6 +46,9 @@
const geographiCategoryValues = geographicNames?.map((_, index) =>
geographicDataset?.map((item) => item.value[index]),
);
const operatingExpensesCategoryValues = operatingExpensesNames?.map(
(_, index) => operatingExpensesDataset?.map((item) => item.value[index]),
);
const growthValues = revenueNames?.map((_, index) =>
dataset?.map((item) => item.valueGrowth[index]),
@ -48,6 +56,10 @@
const geographicGrowthValues = geographicNames?.map((_, index) =>
geographicDataset?.map((item) => item.valueGrowth[index]),
);
const operatingExpensesGrowthValues = operatingExpensesNames?.map(
(_, index) =>
operatingExpensesDataset?.map((item) => item.valueGrowth[index]),
);
function getHref(title) {
const key = title?.toLowerCase().replace(/ & /g, "-").replace(/ /g, "-");
@ -248,6 +260,83 @@
</table>
</div>
{/if}
{#if operatingExpensesNames?.length !== 0}
<h2 class="mt-10 text-xl sm:text-2xl text-gray-200 font-bold mb-4">
Operating Expense Breakdown
</h2>
<div
class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto overflow-x-scroll pr-5 sm:pr-0"
>
<table
class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800"
>
<thead>
<tr>
<th
class="bg-default border-b border-gray-800 text-white font-semibold text-sm sm:text-[1rem] text-start"
>Quarter</th
>
{#each operatingExpensesXData as item}
<th
class="z-20 bg-default border-b border-gray-800 text-white font-semibold text-sm text-center bg-default"
>{new Date(item ?? null)?.toLocaleString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
})}</th
>
{/each}
</tr>
</thead>
<tbody class="shadow-md">
{#each operatingExpensesNames as name, index}
<tr class="bg-table border-b-[#09090B] odd:bg-odd">
<th
class="text-white whitespace-nowrap odd:bg-odd text-sm sm:text-[1rem] text-start font-medium border-b border-gray-800"
>{name} Revenue</th
>
{#each operatingExpensesCategoryValues[index] as value}
<th
class="text-white text-sm sm:text-[1rem] text-center font-medium border-b border-gray-800"
>
{@html value !== null &&
value !== 0 &&
value !== undefined
? abbreviateNumber(value, false, true)
: "n/a"}
</th>
{/each}
</tr>
<tr class="bg-table border-b-[#09090B]">
<td
class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-table border-b border-gray-800"
>
<span class="ml-2">{name} Revenue Growth</span>
</td>
{#each operatingExpensesGrowthValues[index] as growthValue}
<td
class="text-sm sm:text-[1rem] text-center {growthValue >
0
? 'text-[#00FC50]'
: growthValue < 0
? 'text-[#FF2F1F]'
: 'text-white'} font-medium border-b border-gray-800"
>
{growthValue > 0 ? "+" : ""}{growthValue !== null &&
growthValue !== 0 &&
growthValue !== undefined
? growthValue?.toFixed(2) + "%"
: "n/a"}
</td>
{/each}
</tr>
{/each}
</tbody>
</table>
</div>
{/if}
{:else}
<div
class="mt-5 sm:mt-0 border-l-4 border-white p-0 sm:p-4 text-white flex flex-row items-center"