clean code
This commit is contained in:
MuslemRahimi
parent
dded5ba854
commit
fe26adba4e
@ -1,27 +1,47 @@
|
||||
<script lang="ts">
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
export let data;
|
||||
export let fields;
|
||||
export let data: any[];
|
||||
export let fields: { label: string; key: string }[];
|
||||
|
||||
// Use a Set for fast margin lookup
|
||||
const marginKeys = new Set([
|
||||
"pretaxProfitMargin",
|
||||
"freeCashFlowMargin",
|
||||
"grossProfitMargin",
|
||||
"netProfitMargin",
|
||||
"operatingProfitMargin",
|
||||
"ebitdaMargin",
|
||||
]);
|
||||
|
||||
// Precompute fields with an additional flag
|
||||
$: computedFields = fields.map((field) => ({
|
||||
...field,
|
||||
isMargin: marginKeys.has(field.key),
|
||||
}));
|
||||
|
||||
// Helper to format the cell value
|
||||
function formatValue(
|
||||
value: number | null | undefined,
|
||||
isMargin: boolean,
|
||||
): string {
|
||||
if (value === null || value === undefined || value === 0) {
|
||||
return "n/a";
|
||||
}
|
||||
const formatted = abbreviateNumber(value.toFixed(2));
|
||||
return isMargin ? formatted + "%" : formatted;
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each fields as { label, key }}
|
||||
{#each computedFields as { label, key, isMargin } (key)}
|
||||
<tr class="text-white odd:bg-odd whitespace-nowrap border-b border-gray-800">
|
||||
<td
|
||||
class="text-start border-r border-gray-700 text-white text-sm sm:text-[1rem]"
|
||||
>
|
||||
{label}
|
||||
</td>
|
||||
{#each data as item}
|
||||
{#each data as item, index (index)}
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{#if ["pretaxProfitMargin", "freeCashFlowMargin", "grossProfitMargin", "netProfitMargin", "operatingProfitMargin", "ebitdaMargin"]?.includes(key)}
|
||||
{item[key] !== null && item[key] !== 0 && item[key] !== undefined
|
||||
? abbreviateNumber(item[key]?.toFixed(2)) + "%"
|
||||
: "n/a"}
|
||||
{:else}
|
||||
{item[key] !== null && item[key] !== 0 && item[key] !== undefined
|
||||
? abbreviateNumber(item[key]?.toFixed(2))
|
||||
: "n/a"}
|
||||
{/if}
|
||||
{formatValue(item[key], isMargin)}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
|
||||
@ -87,77 +87,87 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="px-0.5 lg:px-0">
|
||||
<h2 class="mb-2 text-2xl text-white font-semibold">
|
||||
About {$stockTicker}
|
||||
</h2>
|
||||
<p class="text-gray-200">
|
||||
{snippet}
|
||||
</p>
|
||||
<div class="inline-block">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/profile`}
|
||||
class="w-full text-md mt-1 cursor-pointer font-medium sm:hover:text-white text-blue-400 sm:hover:underline"
|
||||
>
|
||||
[Show more]
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mt-3 grid grid-cols-2 gap-3 w-full border-b border-gray-600 lg:border-none pb-8 lg:pb-0"
|
||||
>
|
||||
<div class="col-span-1 text-gray-200">
|
||||
<span class="block font-semibold">Industry</span>
|
||||
<a
|
||||
href={getIndustryHref(industry)}
|
||||
class="sm:hover:text-blue-400 text-white underline underline-offset-4"
|
||||
>{industry}</a
|
||||
>
|
||||
</div>
|
||||
<div class="col-span-1 text-gray-200">
|
||||
<span class="block font-semibold">Sector</span>
|
||||
<a
|
||||
href={sectorNavigation?.find((item) => item?.title === sector)?.link}
|
||||
class="sm:hover:text-blue-400 text-white underline underline-offset-4"
|
||||
>{sector}</a
|
||||
>
|
||||
</div>
|
||||
<div class="col-span-1 text-gray-200">
|
||||
<span class="block font-semibold">IPO Date</span>
|
||||
<span>{ipoDate}</span>
|
||||
</div>
|
||||
<div class="col-span-1 text-gray-200">
|
||||
<span class="block font-semibold">Employees</span>
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/statistics/employees`}
|
||||
class="sm:hover:text-blue-400 text-white underline underline-offset-4"
|
||||
>{new Intl.NumberFormat("en")?.format(employees)}</a
|
||||
>
|
||||
</div>
|
||||
<div class="col-span-1 text-gray-200">
|
||||
<span class="block font-semibold">Stock Exchange</span>
|
||||
<span>{exchange}</span>
|
||||
</div>
|
||||
<div class="col-span-1 text-gray-200">
|
||||
<span class="block font-semibold">Ticker Symbol</span>
|
||||
<span>{$stockTicker}</span>
|
||||
</div>
|
||||
{#if website}
|
||||
<div class="col-span-1 whitespace-nowrap text-gray-200">
|
||||
<span class="block font-semibold">Website</span>
|
||||
<div class="space-y-3">
|
||||
<div class="h-auto w-full">
|
||||
<!--Start Content-->
|
||||
<div class="w-auto lg:w-full flex flex-col m-auto">
|
||||
<h2 class="mb-2 text-2xl text-white font-semibold">
|
||||
About {$stockTicker}
|
||||
</h2>
|
||||
<p class="text-gray-200">
|
||||
{snippet}
|
||||
</p>
|
||||
<div class="inline-block">
|
||||
<a
|
||||
href={website}
|
||||
class="hover:sm:text-white truncate text-blue-400"
|
||||
target="_blank">{website}</a
|
||||
href={`/stocks/${$stockTicker}/profile`}
|
||||
class="w-full text-md mt-1 cursor-pointer font-medium sm:hover:text-white text-blue-400 sm:hover:underline"
|
||||
>
|
||||
[Show more]
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="mt-3 grid grid-cols-2 gap-3 w-full">
|
||||
<div class="col-span-1 text-gray-200">
|
||||
<span class="block font-semibold">Industry</span>
|
||||
<a
|
||||
href={getIndustryHref(industry)}
|
||||
class="sm:hover:text-blue-400 text-white underline underline-offset-4"
|
||||
>{industry}</a
|
||||
>
|
||||
</div>
|
||||
<div class="col-span-1 text-gray-200">
|
||||
<span class="block font-semibold">Sector</span>
|
||||
<a
|
||||
href={sectorNavigation?.find((item) => item?.title === sector)
|
||||
?.link}
|
||||
class="sm:hover:text-blue-400 text-white underline underline-offset-4"
|
||||
>{sector}</a
|
||||
>
|
||||
</div>
|
||||
<div class="col-span-1 text-gray-200">
|
||||
<span class="block font-semibold">IPO Date</span>
|
||||
<span>{ipoDate}</span>
|
||||
</div>
|
||||
<div class="col-span-1 text-gray-200">
|
||||
<span class="block font-semibold">Employees</span>
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/statistics/employees`}
|
||||
class="sm:hover:text-blue-400 text-white underline underline-offset-4"
|
||||
>{new Intl.NumberFormat("en")?.format(employees)}</a
|
||||
>
|
||||
</div>
|
||||
<div class="col-span-1 text-gray-200">
|
||||
<span class="block font-semibold">Stock Exchange</span>
|
||||
<span>{exchange}</span>
|
||||
</div>
|
||||
<div class="col-span-1 text-gray-200">
|
||||
<span class="block font-semibold">Ticker Symbol</span>
|
||||
<span>{$stockTicker}</span>
|
||||
</div>
|
||||
{#if website}
|
||||
<div class="col-span-1 whitespace-nowrap text-gray-200">
|
||||
<span class="block font-semibold">Website</span>
|
||||
<a
|
||||
href={website}
|
||||
class="hover:sm:text-white truncate text-blue-400"
|
||||
target="_blank">{website}</a
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/profile`}
|
||||
class="rounded cursor-pointer w-full m-auto py-2 h-full mt-6 text-lg text-center font-semibold text-black sm:hover:hover:bg-gray-300 bg-[#ffff] transition duration-100"
|
||||
>
|
||||
Full Company Profile
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if Object?.keys(data?.getAnalystRating ?? {})?.length !== 0}
|
||||
<div
|
||||
class="space-y-3 pt-5 {Object?.keys(data?.getAnalystRating ?? {})
|
||||
class="space-y-3 pt-10 sm:pt-5 {Object?.keys(data?.getAnalystRating ?? {})
|
||||
?.length !== 0
|
||||
? ''
|
||||
: 'hidden'}"
|
||||
|
||||
@ -1186,7 +1186,7 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full mt-5 m-auto sm:pl-6 sm:pb-6 {Object?.keys(
|
||||
class="w-full m-auto mt-5 sm:mt-0 sm:pl-6 sm:pb-6 {Object?.keys(
|
||||
data?.getNextEarnings || {},
|
||||
)?.length !== 0
|
||||
? ''
|
||||
@ -1196,7 +1196,7 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full mt-5 sm:mt-0 m-auto sm:pl-6 sm:pb-6 {data
|
||||
class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 {data
|
||||
?.getWhyPriceMoved?.length !== 0
|
||||
? ''
|
||||
: 'hidden'}"
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
|
||||
|
||||
use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
|
||||
|
||||
export let data;
|
||||
@ -422,7 +422,6 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<SEO
|
||||
title={`${$displayCompanyName} (${$stockTicker}) Financials - Income Statement · Stocknear`}
|
||||
description={`Detailed annual and timeFramely income statement for ${$displayCompanyName} (${$stockTicker}). See many years of revenue, expenses and profits or losses.`}
|
||||
@ -445,9 +444,7 @@
|
||||
(item) => item?.propertyName === displayStatement,
|
||||
)?.label}
|
||||
{:else}
|
||||
Income Statement {filterRule === "annual"
|
||||
? "(Annual)"
|
||||
: "(Quarter)"}
|
||||
{$displayCompanyName?.replace("Inc.", "")} Income Statement
|
||||
{/if}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user