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

ui fixes

Browse Source
This commit is contained in:
MuslemRahimi 2024-12-25 18:43:08 +01:00
parent f9662226be
commit c2f9cde371
10 changed files with 486 additions and 335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/Infobox.svelte
View File

@ -3,7 +3,7 @@
</script> </script>
<div <div
class="mt-5 sm:mt-0 border-l-4 border-white p-0 sm:p-4 text-white flex flex-row items-center" class="mt-5 bg-primary rounded-l-none rounded-md sm:mt-0 border-l-4 border-white p-0 sm:p-4 text-white flex flex-row items-center"
> >
<svg <svg
class="h-6 w-6 hidden sm:block" class="h-6 w-6 hidden sm:block"

9
src/routes/stocks/[tickerID]/metrics/+layout.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { stockTicker, screenWidth } from "$lib/store"; import { stockTicker } from "$lib/store";
import { page } from "$app/stores"; import { page } from "$app/stores";
export let data; export let data;
@ -57,14 +57,14 @@
<section class="w-full bg-[#09090B] overflow-hidden h-full"> <section class="w-full bg-[#09090B] overflow-hidden h-full">
<div class="m-auto h-full overflow-hidden"> <div class="m-auto h-full overflow-hidden">
<main class="w-fit sm:w-full sm:max-w-2xl"> <main class="w-full">
<div class="m-auto"> <div class="m-auto">
{#if names?.length > 0} {#if names?.length > 0}
<nav <nav
class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap" class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
> >
<ul class="flex flex-row items-center w-full text-white"> <ul class="flex flex-row items-center w-full text-white">
{#each subsectionTitles?.slice(0, 4) as title} {#each subsectionTitles as title}
{@const sectionKey = title {@const sectionKey = title
?.toLowerCase() ?.toLowerCase()
?.replace(/&/g, "") // Remove & symbol ?.replace(/&/g, "") // Remove & symbol
@ -75,7 +75,8 @@
<a <a
href={getHref(sectionKey)} href={getHref(sectionKey)}
on:click={() => changeSubSection(sectionKey)} on:click={() => changeSubSection(sectionKey)}
class="p-2 px-5 cursor-pointer {displaySubSection === sectionKey class="p-2 px-5 cursor-pointer {displaySubSection ===
sectionKey
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]' ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}" : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
> >

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

@ -103,17 +103,17 @@
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" 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 <table
class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]" class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B]"
> >
<thead> <thead class="">
<tr> <tr>
<th <th
class="bg-[#09090B] border-b border-[#09090B] text-white font-semibold text-sm sm:text-[1rem] text-start" class=" border-b border-gray-800 text-white font-semibold text-sm sm:text-[1rem] text-start"
>Quarter</th >Quarter</th
> >
{#each xData as item} {#each xData as item}
<th <th
class="z-20 bg-[#09090B] border-b border-[#09090B] text-white font-semibold text-sm text-center bg-[#09090B]" class="z-20 border-b border-gray-800 text-white font-semibold text-sm text-center"
>{new Date(item ?? null)?.toLocaleString("en-US", { >{new Date(item ?? null)?.toLocaleString("en-US", {
month: "short", month: "short",
day: "numeric", day: "numeric",
@ -125,32 +125,30 @@
</thead> </thead>
<tbody class="shadow-md"> <tbody class="shadow-md">
{#each revenueNames as name, index} {#each revenueNames as name, index}
<tr class="bg-[#09090B] border-b-[#09090B] odd:bg-secondary"> <tr class="bg-[#09090B] border-b-[#09090B] odd:bg-odd">
<th <th
class="whitespace-nowrap odd:bg-secondary text-sm sm:text-[1rem] text-start font-medium border-b border-[#09090B]" class="whitespace-nowrap odd:bg-odd text-sm sm:text-[1rem] text-start font-medium border-b border-gray-800"
> >
{#if index < 3}
<a <a
href={getHref(name)} href={getHref(name)}
class="sm:hover:text-blue-400 cursor-pointer underline underline-offset-4" class="sm:hover:text-blue-400 cursor-pointer underline underline-offset-4"
> >
{name} Revenue {name} Revenue
</a> </a>
{:else}
{name} Revenue
{/if}
</th> </th>
{#each categoryValues[index] as value} {#each categoryValues[index] as value}
<td <td
class="text-white text-sm sm:text-[1rem] text-end font-medium border-b border-[#09090B]" class="text-white text-sm sm:text-[1rem] text-end font-medium border-b border-gray-800"
> >
{value !== null && value !== undefined ? abbreviateNumber(value) : "n/a"} {@html value !== null && value !== undefined
? abbreviateNumber(value, false, true)
: "n/a"}
</td> </td>
{/each} {/each}
</tr> </tr>
<tr class="bg-[#09090B] border-b-[#09090B]"> <tr class="bg-[#09090B] border-b-[#09090B]">
<td <td
class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-[#09090B] border-b border-[#09090B]" class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-[#09090B] border-b border-gray-800"
> >
<span class="ml-2">{name} Revenue Growth</span> <span class="ml-2">{name} Revenue Growth</span>
</td> </td>
@ -160,9 +158,10 @@
? 'text-[#00FC50]' ? 'text-[#00FC50]'
: growthValue < 0 : growthValue < 0
? 'text-[#FF2F1F]' ? 'text-[#FF2F1F]'
: 'text-white'} font-medium border-b border-[#09090B]" : 'text-white'} font-medium border-b border-gray-800"
> >
{growthValue > 0 ? "+" : ""}{growthValue !== null && growthValue !== undefined {growthValue > 0 ? "+" : ""}{growthValue !== null &&
growthValue !== undefined
? growthValue?.toFixed(2) + "%" ? growthValue?.toFixed(2) + "%"
: "n/a"} : "n/a"}
</td> </td>
@ -187,12 +186,12 @@
<thead> <thead>
<tr> <tr>
<th <th
class="bg-[#09090B] border-b border-[#09090B] text-white font-semibold text-sm sm:text-[1rem] text-start" class="bg-[#09090B] border-b border-gray-800 text-white font-semibold text-sm sm:text-[1rem] text-start"
>Quarter</th >Quarter</th
> >
{#each geographicXData as item} {#each geographicXData as item}
<th <th
class="z-20 bg-[#09090B] border-b border-[#09090B] text-white font-semibold text-sm text-center bg-[#09090B]" class="z-20 bg-[#09090B] border-b border-gray-800 text-white font-semibold text-sm text-center bg-[#09090B]"
>{new Date(item ?? null)?.toLocaleString("en-US", { >{new Date(item ?? null)?.toLocaleString("en-US", {
month: "short", month: "short",
day: "numeric", day: "numeric",
@ -204,26 +203,26 @@
</thead> </thead>
<tbody class="shadow-md"> <tbody class="shadow-md">
{#each geographicNames as name, index} {#each geographicNames as name, index}
<tr <tr class="bg-[#09090B] border-b-[#09090B] odd:bg-odd">
class="bg-[#09090B] border-b-[#09090B] odd:bg-secondary"
>
<th <th
class="text-white whitespace-nowrap odd:bg-secondary text-sm sm:text-[1rem] text-start font-medium border-b border-[#09090B]" 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 >{name} Revenue</th
> >
{#each geographiCategoryValues[index] as value} {#each geographiCategoryValues[index] as value}
<th <th
class="text-white text-sm sm:text-[1rem] text-end font-medium border-b border-[#09090B]" class="text-white text-sm sm:text-[1rem] text-end font-medium border-b border-gray-800"
> >
{value !== null && value !== 0 && value !== undefined {@html value !== null &&
? abbreviateNumber(value) value !== 0 &&
: "-"} value !== undefined
? abbreviateNumber(value, false, true)
: "n/a"}
</th> </th>
{/each} {/each}
</tr> </tr>
<tr class="bg-[#09090B] border-b-[#09090B]"> <tr class="bg-[#09090B] border-b-[#09090B]">
<td <td
class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-[#09090B] border-b border-[#09090B]" class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-[#09090B] border-b border-gray-800"
> >
<span class="ml-2">{name} Revenue Growth</span> <span class="ml-2">{name} Revenue Growth</span>
</td> </td>
@ -234,13 +233,13 @@
? 'text-[#00FC50]' ? 'text-[#00FC50]'
: growthValue < 0 : growthValue < 0
? 'text-[#FF2F1F]' ? 'text-[#FF2F1F]'
: 'text-white'} font-medium border-b border-[#09090B]" : 'text-white'} font-medium border-b border-gray-800"
> >
{growthValue > 0 ? "+" : ""}{growthValue !== null && {growthValue > 0 ? "+" : ""}{growthValue !== null &&
growthValue !== 0 && growthValue !== 0 &&
growthValue !== undefined growthValue !== undefined
? growthValue?.toFixed(2) + "%" ? growthValue?.toFixed(2) + "%"
: "-"} : "n/a"}
</td> </td>
{/each} {/each}
</tr> </tr>
@ -273,7 +272,6 @@
</div> </div>
</div> </div>
</div> </div>
{/if} {/if}
</div> </div>
</div> </div>

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

@ -8,10 +8,10 @@
import { Chart } from "svelte-echarts"; import { Chart } from "svelte-echarts";
import { init, use } from "echarts/core"; import { init, use } from "echarts/core";
import { LineChart, BarChart } from "echarts/charts"; import { 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";
use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]); use([BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
export let data; export let data;
@ -98,8 +98,7 @@
{ {
name: "Revenue", name: "Revenue",
data: valueList, data: valueList,
type: "line", type: "bar",
areaStyle: { opacity: 0.08 },
smooth: true, smooth: true,
symbol: "none", symbol: "none",
itemStyle: { itemStyle: {
@ -206,7 +205,7 @@
class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4" class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
> >
<thead> <thead>
<tr class="border border-gray-600"> <tr class="border-b border-gray-800">
<th <th
class="text-white font-semibold text-start text-sm sm:text-[1rem]" class="text-white font-semibold text-start text-sm sm:text-[1rem]"
>Quarter</th >Quarter</th
@ -229,9 +228,7 @@
<tbody> <tbody>
{#each tableList as item, index} {#each tableList as item, index}
<!-- row --> <!-- row -->
<tr <tr class=" odd:bg-odd border-b border-gray-800">
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B] cursor-pointer"
>
<td <td
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
> >
@ -248,20 +245,22 @@
<td <td
class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]" class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]"
> >
{item?.value !== null {@html item?.value !== null
? abbreviateNumber(item?.value) ? abbreviateNumber(item?.value, false, true)
: "-"} : "n/a"}
</td> </td>
<td <td
class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]" class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]"
> >
{#if Number(item?.value - tableList[index + 1]?.value)} {#if Number(item?.value - tableList[index + 1]?.value)}
{abbreviateNumber( {@html abbreviateNumber(
item?.value - tableList[index + 1]?.value, item?.value - tableList[index + 1]?.value,
false,
true,
)} )}
{:else} {:else}
- n/a
{/if} {/if}
</td> </td>
@ -298,7 +297,7 @@
<div class="w-full flex justify-center items-center h-80"> <div class="w-full flex justify-center items-center h-80">
<div class="relative"> <div class="relative">
<label <label
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="bg-odd rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
> >
<span class="loading loading-spinner loading-md text-gray-400" <span class="loading loading-spinner loading-md text-gray-400"
></span> ></span>

412
src/routes/stocks/[tickerID]/statistics/+page.svelte
View File

@ -91,22 +91,30 @@
<p <p
class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal" class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
> >
{companyName} has {abbreviateNumber(rawData?.sharesOutStanding)} {companyName} has {@html abbreviateNumber(
rawData?.sharesOutStanding,
false,
true,
)}
shares outstanding. The number of shares has increased by {rawData?.sharesYoY}% shares outstanding. The number of shares has increased by {rawData?.sharesYoY}%
in one year. in one year.
</p> </p>
<table class="w-full"> <table class="w-full">
<tbody <tbody
><tr class="border-y border-gray-600 odd:bg-secondary" ><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Shares Outstanding</span> ><span>Shares Outstanding</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
title="3,194,640,415" title="3,194,640,415"
>{abbreviateNumber(rawData?.sharesOutStanding)}</td >{@html abbreviateNumber(
rawData?.sharesOutStanding,
false,
true,
)}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Shares Change (YoY)</span> ><span>Shares Change (YoY)</span>
</td> </td>
@ -117,7 +125,7 @@
"percent", "percent",
)}</td )}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Shares Change (QoQ)</span> ><span>Shares Change (QoQ)</span>
</td> </td>
@ -125,7 +133,7 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{checkValue(rawData?.sharesQoQ, "percent")}</td >{checkValue(rawData?.sharesQoQ, "percent")}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Owned by Institutions (%)</span> ><span>Owned by Institutions (%)</span>
</td> </td>
@ -136,26 +144,34 @@
"percent", "percent",
)}</td )}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Shares Floating</span> ><span>Shares Floating</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
title="2,777,647,654" title="2,777,647,654"
>{abbreviateNumber(rawData?.floatShares)}</td >{@html abbreviateNumber(
rawData?.floatShares,
false,
true,
)}</td
> >
</tr> </tr>
<tr class="border-y border-gray-600 odd:bg-secondary" <tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Failed to Deliver (FTD) Shares</span> ><span>Failed to Deliver (FTD) Shares</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
title="2,777,647,654" title="2,777,647,654"
>{abbreviateNumber(rawData?.failToDeliver)}</td >{@html abbreviateNumber(
rawData?.failToDeliver,
false,
true,
)}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>FTD / Avg. Volume</span> ><span>FTD / Avg. Volume</span>
</td> </td>
@ -177,23 +193,29 @@
<p <p
class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal" class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
> >
The latest short interest is {abbreviateNumber( The latest short interest is {@html abbreviateNumber(
rawData?.sharesShort, rawData?.sharesShort,
false,
true,
)}, so {rawData?.shortOutStandingPercent}% of the outstanding )}, so {rawData?.shortOutStandingPercent}% of the outstanding
shares have been sold short. shares have been sold short.
</p> </p>
<table class="w-full"> <table class="w-full">
<tbody <tbody
><tr class="border-y border-gray-600 odd:bg-secondary" ><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Short Interest</span> ><span>Short Interest</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
title="74,332,630" title="74,332,630"
>{abbreviateNumber(rawData?.sharesShort)}</td >{@html abbreviateNumber(
rawData?.sharesShort,
false,
true,
)}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Short % of Shares Out</span> ><span>Short % of Shares Out</span>
</td> </td>
@ -201,7 +223,7 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.shortOutStandingPercent}%</td >{rawData?.shortOutStandingPercent}%</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Short % of Float</span> ><span>Short % of Float</span>
</td> </td>
@ -209,7 +231,7 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.shortFloatPercent}%</td >{rawData?.shortFloatPercent}%</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Short Ratio (days to cover)</span> ><span>Short Ratio (days to cover)</span>
</td> </td>
@ -238,7 +260,7 @@
<table class="w-full"> <table class="w-full">
<tbody <tbody
><tr class="border-y border-gray-600 odd:bg-secondary" ><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>PE Ratio</span> ><span>PE Ratio</span>
</td> </td>
@ -246,7 +268,7 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.priceEarningsRatio}</td >{rawData?.priceEarningsRatio}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Forward PE</span> ><span>Forward PE</span>
</td> </td>
@ -254,7 +276,7 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.forwardPE}</td >{rawData?.forwardPE}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>PS Ratio</span> ><span>PS Ratio</span>
</td> </td>
@ -262,7 +284,7 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.priceToSalesRatio}</td >{rawData?.priceToSalesRatio}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Forward PS</span> ><span>Forward PS</span>
</td> </td>
@ -270,7 +292,7 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.forwardPS}</td >{rawData?.forwardPS}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>PB Ratio</span> ><span>PB Ratio</span>
</td> </td>
@ -278,7 +300,7 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.priceToBookRatio}</td >{rawData?.priceToBookRatio}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>P/FCF Ratio</span> ><span>P/FCF Ratio</span>
</td> </td>
@ -286,7 +308,7 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.priceToFreeCashFlowsRatio}</td >{rawData?.priceToFreeCashFlowsRatio}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>PEG Ratio</span> ><span>PEG Ratio</span>
</td> </td>
@ -312,8 +334,10 @@
class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal" class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
> >
{#if rawData?.enterpriseValue !== null} {#if rawData?.enterpriseValue !== null}
{$displayCompanyName} has an Enterprise Value (EV) of {abbreviateNumber( {$displayCompanyName} has an Enterprise Value (EV) of {@html abbreviateNumber(
rawData?.enterpriseValue, rawData?.enterpriseValue,
false,
true,
)}. )}.
{:else} {:else}
Currently the Enterprise Value (EV) is not available for {$displayCompanyName}. Currently the Enterprise Value (EV) is not available for {$displayCompanyName}.
@ -321,45 +345,45 @@
</p> </p>
<table class="w-full"> <table class="w-full">
<tbody <tbody
><tr class="border-y border-gray-600 odd:bg-secondary" ><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>EV / Earnings</span> ><span>EV / Earnings</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.evEarnings ?? 'n/a'}</td >{rawData?.evEarnings ?? "n/a"}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>EV / Sales</span> ><span>EV / Sales</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.evSales ?? 'n/a'}</td >{rawData?.evSales ?? "n/a"}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>EV / EBITDA</span> ><span>EV / EBITDA</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.evEBITDA ?? 'n/a'}</td >{rawData?.evEBITDA ?? "n/a"}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>EV / EBIT</span> ><span>EV / EBIT</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.evEBIT ?? 'n/a'}</td >{rawData?.evEBIT ?? "n/a"}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>EV / FCF</span> ><span>EV / FCF</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.evFCF ?? 'n/a'}</td >{rawData?.evFCF ?? "n/a"}</td
> >
</tr></tbody </tr></tbody
> >
@ -377,7 +401,7 @@
</p> </p>
<table class="w-full"> <table class="w-full">
<tbody <tbody
><tr class="border-y border-gray-600 odd:bg-secondary" ><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Current Ratio</span> ><span>Current Ratio</span>
</td> </td>
@ -385,7 +409,7 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.currentRatio}</td >{rawData?.currentRatio}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Quick Ratio</span> ><span>Quick Ratio</span>
</td> </td>
@ -393,7 +417,7 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.quickRatio}</td >{rawData?.quickRatio}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Debt / Equity</span> ><span>Debt / Equity</span>
</td> </td>
@ -401,17 +425,19 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.debtEquityRatio}</td >{rawData?.debtEquityRatio}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Total Debt / Capitalization</span> ><span>Total Debt / Capitalization</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{abbreviateNumber( >{@html abbreviateNumber(
rawData?.totalDebtToCapitalization, rawData?.totalDebtToCapitalization,
false,
true,
)}</td )}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Cash Flow / Debt</span> ><span>Cash Flow / Debt</span>
</td> </td>
@ -419,7 +445,7 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.cashFlowToDebtRatio}</td >{rawData?.cashFlowToDebtRatio}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Interest Coverage</span> ><span>Interest Coverage</span>
</td> </td>
@ -443,7 +469,7 @@
</p> </p>
<table class="w-full"> <table class="w-full">
<tbody <tbody
><tr class="border-y border-gray-600 odd:bg-secondary" ><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Return on Equity (ROE)</span> ><span>Return on Equity (ROE)</span>
</td> </td>
@ -451,7 +477,7 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.returnOnEquity}%</td >{rawData?.returnOnEquity}%</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Return on Assets (ROA)</span> ><span>Return on Assets (ROA)</span>
</td> </td>
@ -459,7 +485,7 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.returnOnAssets}%</td >{rawData?.returnOnAssets}%</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Return on Capital (ROIC)</span> ><span>Return on Capital (ROIC)</span>
</td> </td>
@ -467,31 +493,44 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.returnOnInvestedCapital}%</td >{rawData?.returnOnInvestedCapital}%</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Revenue Per Employee</span> ><span>Revenue Per Employee</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{abbreviateNumber(rawData?.revenuePerEmployee)}</td >{@html abbreviateNumber(
rawData?.revenuePerEmployee,
false,
true,
)}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Profits Per Employee</span> ><span>Profits Per Employee</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{abbreviateNumber(rawData?.profitPerEmployee)}</td >{@html abbreviateNumber(
rawData?.profitPerEmployee,
false,
true,
)}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Employee Count</span></td ><span>Employee Count</span></td
> >
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
title="140,473">{abbreviateNumber(rawData?.employees)}</td title="140,473"
>{@html abbreviateNumber(
rawData?.employees,
false,
true,
)}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Asset Turnover</span> ><span>Asset Turnover</span>
</td> </td>
@ -499,13 +538,17 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.assetTurnover}</td >{rawData?.assetTurnover}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Inventory Turnover</span> ><span>Inventory Turnover</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{abbreviateNumber(rawData?.inventoryTurnover)}</td >{@html abbreviateNumber(
rawData?.inventoryTurnover,
false,
true,
)}</td
> >
</tr></tbody </tr></tbody
> >
@ -515,15 +558,19 @@
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">Taxes</h2> <h2 class="mb-2 px-0.5 text-xl font-bold text-white">Taxes</h2>
<table class="w-full"> <table class="w-full">
<tbody <tbody
><tr class="border-y border-gray-600 odd:bg-secondary" ><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Income Tax</span> ><span>Income Tax</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{abbreviateNumber(rawData?.incomeTaxExpense)}</td >{@html abbreviateNumber(
rawData?.incomeTaxExpense,
false,
true,
)}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Effective Tax Rate</span> ><span>Effective Tax Rate</span>
</td> </td>
@ -552,7 +599,7 @@
</p> </p>
<table class="w-full"> <table class="w-full">
<tbody <tbody
><tr class="border-y border-gray-600 odd:bg-secondary" ><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Beta</span> ><span>Beta</span>
</td> </td>
@ -560,7 +607,7 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.beta}</td >{rawData?.beta}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>52-Week Price Change</span> ><span>52-Week Price Change</span>
</td> </td>
@ -568,7 +615,7 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.change1Y}%</td >{rawData?.change1Y}%</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>50-Day Moving Average</span> ><span>50-Day Moving Average</span>
</td> </td>
@ -576,7 +623,7 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.sma50}</td >{rawData?.sma50}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>200-Day Moving Average</span> ><span>200-Day Moving Average</span>
</td> </td>
@ -584,7 +631,7 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.sma200}</td >{rawData?.sma200}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Relative Strength Index (RSI)</span> ><span>Relative Strength Index (RSI)</span>
</td> </td>
@ -592,13 +639,17 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.rsi}</td >{rawData?.rsi}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Average Volume (20 Days)</span> ><span>Average Volume (20 Days)</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{abbreviateNumber(rawData?.avgVolume)}</td >{@html abbreviateNumber(
rawData?.avgVolume,
false,
true,
)}</td
> >
</tr></tbody </tr></tbody
> >
@ -613,63 +664,90 @@
class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal" class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
> >
{#if rawData?.revenue !== null && rawData?.revenue !== 0} {#if rawData?.revenue !== null && rawData?.revenue !== 0}
In the last 12 months, {companyName} had revenue of {abbreviateNumber( In the last 12 months, {companyName} had revenue of {@html abbreviateNumber(
rawData?.revenue)} rawData?.revenue,
and earned {abbreviateNumber(rawData?.netIncome)} in profits. false,
Earnings per share was {rawData?.eps}. true,
)}
and earned {@html abbreviateNumber(
rawData?.netIncome,
false,
true,
)} in profits. Earnings per share was {rawData?.eps}.
{/if} {/if}
</p> </p>
<table class="w-full"> <table class="w-full">
<tbody <tbody
><tr class="border-y border-gray-600 odd:bg-secondary" ><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Revenue</span></td ><span>Revenue</span></td
> >
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.revenue !== 0 && rawData?.revenue !== null ? abbreviateNumber(rawData?.revenue) : 'n/a'}</td >{@html rawData?.revenue !== 0 &&
rawData?.revenue !== null
? abbreviateNumber(rawData?.revenue, false, true)
: "n/a"}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Gross Profit</span> ><span>Gross Profit</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{abbreviateNumber(rawData?.grossProfit)}</td >{@html abbreviateNumber(
rawData?.grossProfit,
false,
true,
)}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Operating Income</span> ><span>Operating Income</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{abbreviateNumber(rawData?.operatingIncome)}</td >{@html abbreviateNumber(
rawData?.operatingIncome,
false,
true,
)}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Net Income</span> ><span>Net Income</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{abbreviateNumber(rawData?.netIncome)}</td >{@html abbreviateNumber(
rawData?.netIncome,
false,
true,
)}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>EBITDA</span> ><span>EBITDA</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{abbreviateNumber(rawData?.ebitda)}</td >{@html abbreviateNumber(
rawData?.ebitda,
false,
true,
)}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>EBIT</span> ><span>EBIT</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.ebit !== 0 && rawData?.ebit !== null ? abbreviateNumber(rawData?.ebit) : 'n/a'}</td >{@html rawData?.ebit !== 0 && rawData?.ebit !== null
? abbreviateNumber(rawData?.ebit, false, true)
: "n/a"}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Earnings Per Share (EPS)</span> ><span>Earnings Per Share (EPS)</span>
</td> </td>
@ -694,67 +772,94 @@
<p <p
class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal" class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
> >
The company has {abbreviateNumber( The company has {@html abbreviateNumber(
rawData?.cashAndCashEquivalents, rawData?.cashAndCashEquivalents,
false,
true, true,
)} in cash and {abbreviateNumber(rawData?.totalDebt, true)} in debt, )} in cash and {@html abbreviateNumber(
giving a net cash position of {abbreviateNumber( rawData?.totalDebt,
false,
true,
)} in debt, giving a net cash position of {@html abbreviateNumber(
rawData?.cashAndCashEquivalents - rawData?.totalDebt, rawData?.cashAndCashEquivalents - rawData?.totalDebt,
false,
true, true,
)}. )}.
</p> </p>
<table class="w-full"> <table class="w-full">
<tbody <tbody
><tr class="border-y border-gray-600 odd:bg-secondary" ><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Cash &amp; Cash Equivalents</span> ><span>Cash &amp; Cash Equivalents</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{abbreviateNumber(rawData?.cashAndCashEquivalents)}</td >{@html abbreviateNumber(
rawData?.cashAndCashEquivalents,
false,
true,
)}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Total Debt</span> ><span>Total Debt</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{abbreviateNumber(rawData?.totalDebt)}</td >{@html abbreviateNumber(
rawData?.totalDebt,
false,
true,
)}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Net Cash</span> ><span>Net Cash</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
title="20,865,000,000" title="20,865,000,000"
>{abbreviateNumber( >{@html abbreviateNumber(
rawData?.cashAndCashEquivalents - rawData?.totalDebt, rawData?.cashAndCashEquivalents - rawData?.totalDebt,
false,
true,
)}</td )}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Retained Earnings</span> ><span>Retained Earnings</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{abbreviateNumber(rawData?.retainedEarnings)}</td >{@html abbreviateNumber(
rawData?.retainedEarnings,
false,
true,
)}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Total Assets</span> ><span>Total Assets</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{abbreviateNumber(rawData?.totalAssets)}</td >{@html abbreviateNumber(
rawData?.totalAssets,
false,
true,
)}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Working Capital</span> ><span>Working Capital</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{abbreviateNumber(rawData?.workingCapital)}</td >{@html abbreviateNumber(
rawData?.workingCapital,
false,
true,
)}</td
> >
</tr></tbody </tr></tbody
> >
@ -773,45 +878,60 @@
<p <p
class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal" class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
> >
In the last 12 months, operating cash flow was {abbreviateNumber( In the last 12 months, operating cash flow was {@html abbreviateNumber(
rawData?.operatingCashFlow, rawData?.operatingCashFlow,
false,
true, true,
)} )}
and capital expenditures {abbreviateNumber( and capital expenditures {@html abbreviateNumber(
rawData?.capitalExpenditure, rawData?.capitalExpenditure,
false,
true, true,
)}, giving a free cash flow of {abbreviateNumber( )}, giving a free cash flow of {@html abbreviateNumber(
rawData?.freeCashFlow, rawData?.freeCashFlow,
false,
true, true,
)}. )}.
</p> </p>
<table class="w-full"> <table class="w-full">
<tbody <tbody
><tr class="border-y border-gray-600 odd:bg-secondary" ><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Operating Cash Flow</span> ><span>Operating Cash Flow</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{abbreviateNumber(rawData?.operatingCashFlow)}</td >{@html abbreviateNumber(
rawData?.operatingCashFlow,
false,
true,
)}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Capital Expenditures</span> ><span>Capital Expenditures</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{abbreviateNumber(rawData?.capitalExpenditure)}</td >{@html abbreviateNumber(
rawData?.capitalExpenditure,
false,
true,
)}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Free Cash Flow</span> ><span>Free Cash Flow</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{abbreviateNumber(rawData?.freeCashFlow)}</td >{@html abbreviateNumber(
rawData?.freeCashFlow,
false,
true,
)}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>FCF Per Share</span> ><span>FCF Per Share</span>
</td> </td>
@ -846,61 +966,83 @@
</p> </p>
<table class="w-full"> <table class="w-full">
<tbody <tbody
><tr class="border-y border-gray-600 odd:bg-secondary" ><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Gross Margin</span> ><span>Gross Margin</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.grossProfitMargin !== 0 && rawData?.grossProfitMargin !== null ? checkValue(rawData?.grossProfitMargin, "int")+'%' : 'n/a'}</td >{rawData?.grossProfitMargin !== 0 &&
rawData?.grossProfitMargin !== null
? checkValue(rawData?.grossProfitMargin, "int") + "%"
: "n/a"}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Operating Margin</span> ><span>Operating Margin</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.operatingProfitMargin !== 0 && rawData?.operatingProfitMargin !== null ? checkValue(rawData?.operatingProfitMargin, "int")+'%' : 'n/a'}</td >{rawData?.operatingProfitMargin !== 0 &&
rawData?.operatingProfitMargin !== null
? checkValue(rawData?.operatingProfitMargin, "int") +
"%"
: "n/a"}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Pretax Margin</span> ><span>Pretax Margin</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.pretaxProfitMargin !== 0 && rawData?.pretaxProfitMargin !== null ? checkValue(rawData?.pretaxProfitMargin, "int")+'%' : 'n/a'}</td >{rawData?.pretaxProfitMargin !== 0 &&
rawData?.pretaxProfitMargin !== null
? checkValue(rawData?.pretaxProfitMargin, "int") + "%"
: "n/a"}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Profit Margin</span> ><span>Profit Margin</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.netProfitMargin !== 0 && rawData?.netProfitMargin !== null ? checkValue(rawData?.netProfitMargin, "int")+'%' : 'n/a'}</td >{rawData?.netProfitMargin !== 0 &&
rawData?.netProfitMargin !== null
? checkValue(rawData?.netProfitMargin, "int") + "%"
: "n/a"}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>EBITDA Margin</span> ><span>EBITDA Margin</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.ebitdaMargin !== 0 && rawData?.ebitdaMargin !== null ? checkValue(rawData?.ebitdaMargin, "int")+'%' : 'n/a'}</td >{rawData?.ebitdaMargin !== 0 &&
rawData?.ebitdaMargin !== null
? checkValue(rawData?.ebitdaMargin, "int") + "%"
: "n/a"}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>EBIT Margin</span> ><span>EBIT Margin</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.ebitMargin !== 0 && rawData?.ebitMargin !== null ? checkValue(rawData?.ebitMargin, "int")+'%' : 'n/a'}</td >{rawData?.ebitMargin !== 0 &&
rawData?.ebitMargin !== null
? checkValue(rawData?.ebitMargin, "int") + "%"
: "n/a"}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>FCF Margin</span> ><span>FCF Margin</span>
</td> </td>
<td <td
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
>{rawData?.freeCashFlowMargin !== 0 && rawData?.freeCashFlowMargin !== null ? checkValue(rawData?.freeCashFlowMargin, "int")+'%' : 'n/a'}</td >{rawData?.freeCashFlowMargin !== 0 &&
rawData?.freeCashFlowMargin !== null
? checkValue(rawData?.freeCashFlowMargin, "int") + "%"
: "n/a"}</td
> >
</tr></tbody </tr></tbody
> >
@ -925,7 +1067,7 @@
</p> </p>
<table class="w-full" data-test="statistics-table"> <table class="w-full" data-test="statistics-table">
<tbody <tbody
><tr class="border-y border-gray-600 odd:bg-secondary" ><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Dividend Per Share</span> ><span>Dividend Per Share</span>
</td> </td>
@ -935,7 +1077,7 @@
? "$" + rawData?.annualDividend?.toFixed(2) ? "$" + rawData?.annualDividend?.toFixed(2)
: "n/a"}</td : "n/a"}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Dividend Yield</span> ><span>Dividend Yield</span>
</td> </td>
@ -945,7 +1087,7 @@
? rawData?.dividendYield + "%" ? rawData?.dividendYield + "%"
: "n/a"}</td : "n/a"}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Dividend Growth (YoY)</span> ><span>Dividend Growth (YoY)</span>
</td> </td>
@ -955,7 +1097,7 @@
? rawData?.dividendGrowth + "%" ? rawData?.dividendGrowth + "%"
: "n/a"}</td : "n/a"}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Payout Ratio</span> ><span>Payout Ratio</span>
</td> </td>
@ -966,7 +1108,7 @@
? rawData?.payoutRatio + "%" ? rawData?.payoutRatio + "%"
: "n/a"}</td : "n/a"}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Earnings Yield</span> ><span>Earnings Yield</span>
</td> </td>
@ -976,7 +1118,7 @@
? rawData?.earningsYield + "%" ? rawData?.earningsYield + "%"
: "n/a"}</td : "n/a"}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>FCF Yield</span> ><span>FCF Yield</span>
</td> </td>
@ -1016,7 +1158,7 @@
</p> </p>
<table class="w-full" data-test="statistics-table"> <table class="w-full" data-test="statistics-table">
<tbody <tbody
><tr class="border-y border-gray-600 odd:bg-secondary" ><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Price Target</span> ><span>Price Target</span>
</td> </td>
@ -1027,7 +1169,7 @@
? "$" + rawData?.priceTarget ? "$" + rawData?.priceTarget
: "n/a"}</td : "n/a"}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Price Target Difference</span> ><span>Price Target Difference</span>
</td> </td>
@ -1038,7 +1180,7 @@
? rawData?.upside + "%" ? rawData?.upside + "%"
: "n/a"}</td : "n/a"}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Analyst Consensus</span> ><span>Analyst Consensus</span>
</td> </td>
@ -1046,7 +1188,7 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
title="Strong Buy">{rawData?.analystRating ?? "n/a"}</td title="Strong Buy">{rawData?.analystRating ?? "n/a"}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Analyst Count</span> ><span>Analyst Count</span>
</td> </td>
@ -1086,7 +1228,7 @@
</p> </p>
<table class="w-full" data-test="statistics-table"> <table class="w-full" data-test="statistics-table">
<tbody <tbody
><tr class="border-y border-gray-600 odd:bg-secondary" ><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Last Split Date</span> ><span>Last Split Date</span>
</td> </td>
@ -1103,7 +1245,7 @@
}, },
)}</td )}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Split Type</span> ><span>Split Type</span>
</td> </td>
@ -1111,7 +1253,7 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
title="Forward">{rawData?.splitType}</td title="Forward">{rawData?.splitType}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Split Ratio</span> ><span>Split Ratio</span>
</td> </td>
@ -1128,7 +1270,7 @@
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">Scores</h2> <h2 class="mb-2 px-0.5 text-xl font-bold text-white">Scores</h2>
<table class="w-full" data-test="statistics-table"> <table class="w-full" data-test="statistics-table">
<tbody <tbody
><tr class="border-y border-gray-600 odd:bg-secondary" ><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Altman Z-Score</span> ><span>Altman Z-Score</span>
</td> </td>
@ -1136,7 +1278,7 @@
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2" class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
title="n/a">{rawData?.altmanZScore}</td title="n/a">{rawData?.altmanZScore}</td
> >
</tr><tr class="border-y border-gray-600 odd:bg-secondary" </tr><tr class="border-y border-gray-800 odd:bg-odd"
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2" ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
><span>Piotroski F-Score</span> ><span>Piotroski F-Score</span>
</td> </td>

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

@ -40,7 +40,7 @@
{/if} {/if}
{#if similarStocks?.length > 0} {#if similarStocks?.length > 0}
<div <div
class="w-full p-2 text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer" class="w-full p-2 bg-primary text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
> >
<h3 class="p-2 pt-4 text-2xl font-semibold">Related Stocks</h3> <h3 class="p-2 pt-4 text-2xl font-semibold">Related Stocks</h3>
<table class="table table-sm table-compact w-full text-white"> <table class="table table-sm table-compact w-full text-white">

65
src/routes/stocks/[tickerID]/statistics/employees/+page.svelte
View File

@ -346,17 +346,23 @@
function generateEmployeeInfoHTML() { function generateEmployeeInfoHTML() {
if (employeeHistory?.length !== 0 && !dateDistance) { if (employeeHistory?.length !== 0 && !dateDistance) {
const formattedEmployees = new Intl.NumberFormat('en').format(employees); const formattedEmployees = new Intl.NumberFormat("en").format(employees);
const latestFilingDate = new Date( const latestFilingDate = new Date(
employeeHistory[employeeHistory.length - 1]['filingDate'] employeeHistory[employeeHistory.length - 1]["filingDate"],
).toLocaleString('en-US', { ).toLocaleString("en-US", {
month: 'short', month: "short",
day: 'numeric', day: "numeric",
year: 'numeric' year: "numeric",
}); });
const formattedChangeRate = new Intl.NumberFormat('en').format(changeRate); const formattedChangeRate = new Intl.NumberFormat("en").format(
const changeDirection = changeRate >= 0 && changeRate !== null ? 'increased' : 'decreased'; changeRate,
const growthRateClass = changeRate >= 0 && changeRate !== null ? 'text-[#00FC50]' : 'text-[#FF2F1F]'; );
const changeDirection =
changeRate >= 0 && changeRate !== null ? "increased" : "decreased";
const growthRateClass =
changeRate >= 0 && changeRate !== null
? "text-[#00FC50]"
: "text-[#FF2F1F]";
return ` return `
<span> <span>
@ -371,11 +377,11 @@
} else if (employeeHistory?.length !== 0 && dateDistance) { } else if (employeeHistory?.length !== 0 && dateDistance) {
const abbreviatedEmployees = abbreviateNumber(employees); const abbreviatedEmployees = abbreviateNumber(employees);
const latestFilingDate = new Date( const latestFilingDate = new Date(
employeeHistory[employeeHistory.length - 1]['filingDate'] employeeHistory[employeeHistory.length - 1]["filingDate"],
).toLocaleString('en-US', { ).toLocaleString("en-US", {
month: 'short', month: "short",
day: 'numeric', day: "numeric",
year: 'numeric' year: "numeric",
}); });
return ` return `
@ -443,7 +449,6 @@ const htmlOutput = generateEmployeeInfoHTML();
{$stockTicker} Employees {$stockTicker} Employees
</h2> </h2>
<Infobox text={htmlOutput} /> <Infobox text={htmlOutput} />
</div> </div>
@ -515,7 +520,11 @@ const htmlOutput = generateEmployeeInfoHTML();
<div <div
class="mt-0.5 text-lg font-semibold bp:text-xl sm:mt-1.5 sm:text-2xl" class="mt-0.5 text-lg font-semibold bp:text-xl sm:mt-1.5 sm:text-2xl"
> >
{abbreviateNumber(data?.getStockQuote?.marketCap)} {@html abbreviateNumber(
data?.getStockQuote?.marketCap,
false,
true,
)}
</div> </div>
</div> </div>
</div> </div>
@ -527,9 +536,7 @@ const htmlOutput = generateEmployeeInfoHTML();
Employees Chart Employees Chart
</h1> </h1>
{#if historyList?.length > 0} {#if historyList?.length > 0}
<div <div class="flex flex-row items-center w-fit ml-auto">
class="flex flex-row items-center w-fit ml-auto"
>
<div class="relative inline-block text-left grow"> <div class="relative inline-block text-left grow">
<DropdownMenu.Root> <DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder> <DropdownMenu.Trigger asChild let:builder>
@ -623,25 +630,25 @@ const htmlOutput = generateEmployeeInfoHTML();
<table <table
class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4" class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
> >
<thead> <thead class="border-b border-gray-800">
<tr> <tr>
<th <th
class="text-start border-b border-[#09090B] bg-[#09090B] text-white text-sm whitespace-nowrap font-semibold" class="text-start text-white text-sm whitespace-nowrap font-semibold"
> >
Date Date
</th> </th>
<th <th
class="text-end border-b border-[#09090B] bg-[#09090B] text-white text-sm whitespace-nowrap font-semibold" class="text-end text-white text-sm whitespace-nowrap font-semibold"
> >
Employees Employees
</th> </th>
<th <th
class="text-end border-b border-[#09090B] bg-[#09090B] text-white text-sm whitespace-nowrap font-semibold" class="text-end text-white text-sm whitespace-nowrap font-semibold"
> >
Change Change
</th> </th>
<th <th
class="text-end border-b border-[#09090B] bg-[#09090B] text-white text-sm whitespace-nowrap font-semibold" class="text-end text-white text-sm whitespace-nowrap font-semibold"
> >
Growth Growth
</th> </th>
@ -649,9 +656,9 @@ const htmlOutput = generateEmployeeInfoHTML();
</thead> </thead>
<tbody class=""> <tbody class="">
{#each historyList as item, index} {#each historyList as item, index}
<tr class="text-gray-200 odd:bg-secondary"> <tr class="text-gray-200 odd:bg-odd">
<td <td
class="text-start border-b border-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-start border-b border-gray-800 text-sm sm:text-[1rem] whitespace-nowrap text-white"
> >
{new Date(item?.filingDate)?.toLocaleString("en-US", { {new Date(item?.filingDate)?.toLocaleString("en-US", {
month: "short", month: "short",
@ -661,12 +668,12 @@ const htmlOutput = generateEmployeeInfoHTML();
})} })}
</td> </td>
<td <td
class="text-end border-b border-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end border-b border-gray-800 text-sm sm:text-[1rem] whitespace-nowrap text-white"
> >
{new Intl.NumberFormat("en").format(item?.employeeCount)} {new Intl.NumberFormat("en").format(item?.employeeCount)}
</td> </td>
<td <td
class="text-end border-b border-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end border-b border-gray-800 text-sm sm:text-[1rem] whitespace-nowrap text-white"
> >
{#if Number(item?.employeeCount - historyList[index + 1]?.employeeCount)} {#if Number(item?.employeeCount - historyList[index + 1]?.employeeCount)}
{new Intl.NumberFormat("en")?.format( {new Intl.NumberFormat("en")?.format(
@ -678,7 +685,7 @@ const htmlOutput = generateEmployeeInfoHTML();
{/if} {/if}
</td> </td>
<td <td
class="text-end border-b border-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap text-white text-end" class="text-end border-b border-gray-800 text-sm sm:text-[1rem] whitespace-nowrap text-white text-end"
> >
{#if index + 1 - historyList?.length === 0} {#if index + 1 - historyList?.length === 0}
n/a n/a

2
src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte
View File

@ -105,7 +105,7 @@
{#if similarStocks?.length > 0} {#if similarStocks?.length > 0}
<div <div
class="w-full p-2 text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer" class="w-full p-2 text-white border border-gray-600 bg-primary rounded-md h-fit pb-4 mt-4 cursor-pointer"
> >
<h3 class="p-2 pt-4 text-2xl font-semibold">Related Stocks</h3> <h3 class="p-2 pt-4 text-2xl font-semibold">Related Stocks</h3>
<table class="table table-sm table-compact w-full text-white"> <table class="table table-sm table-compact w-full text-white">

39
src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
View File

@ -301,7 +301,6 @@
name: "Mkt Cap", name: "Mkt Cap",
data: filteredData?.marketCapList, data: filteredData?.marketCapList,
type: "line", type: "line",
areaStyle: { opacity: 0.2 },
smooth: true, smooth: true,
symbol: "none", symbol: "none",
itemStyle: { itemStyle: {
@ -416,27 +415,27 @@
{#if rawData?.length !== 0} {#if rawData?.length !== 0}
<div class="grid grid-cols-1 gap-2"> <div class="grid grid-cols-1 gap-2">
<Infobox
<Infobox text={`${$displayCompanyName} has a market cap of ${abbreviateNumber( text={`${$displayCompanyName} has a market cap of ${abbreviateNumber(
data?.getStockQuote?.marketCap data?.getStockQuote?.marketCap,
)} as of ${new Date()?.toLocaleString("en-US", { )} as of ${new Date()?.toLocaleString("en-US", {
month: "short", month: "short",
day: "numeric", day: "numeric",
year: "numeric", year: "numeric",
daySuffix: "2-digit", daySuffix: "2-digit",
})}. Its market cap has ${changePercentageYearAgo > 0 })}. Its market cap has ${
changePercentageYearAgo > 0
? "increased" ? "increased"
: changePercentageYearAgo < 0 : changePercentageYearAgo < 0
? "decreased" ? "decreased"
: "unchanged"} by ${abbreviateNumber( : "unchanged"
} by ${abbreviateNumber(
changePercentageYearAgo?.toFixed(2), changePercentageYearAgo?.toFixed(2),
)}% in one year.`} )}% in one year.`}
/> />
<div <div
class="mb-4 mt-5 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0" class="mb-4 mt-5 bg-primary flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
> >
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6"> <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
@ -446,7 +445,11 @@
<div <div
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl" class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
> >
{abbreviateNumber(data?.getStockQuote?.marketCap)} {@html abbreviateNumber(
data?.getStockQuote?.marketCap,
false,
true,
)}
</div> </div>
</div> </div>
</div> </div>
@ -660,10 +663,10 @@
<div class="w-full overflow-x-scroll"> <div class="w-full overflow-x-scroll">
<table <table
class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4" class="table table-sm table-compact rounded-none sm:rounded-md w-full m-auto mt-4"
> >
<thead> <thead class="">
<tr class="border border-gray-600"> <tr class="border-b border-gray-800">
<th class="text-white font-semibold text-start text-sm" <th class="text-white font-semibold text-start text-sm"
>Date</th >Date</th
> >
@ -679,22 +682,22 @@
{#each tableList as item, index} {#each tableList as item, index}
<!-- row --> <!-- row -->
<tr <tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B] shake-ticker cursor-pointer" class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800"
> >
<td <td
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b border-gray-800"
> >
{item?.date} {item?.date}
</td> </td>
<td <td
class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]" class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b border-gray-800"
> >
{abbreviateNumber(item?.marketCap)} {abbreviateNumber(item?.marketCap)}
</td> </td>
<td <td
class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]" class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b border-gray-800"
> >
{#if index + 1 - tableList?.length === 0} {#if index + 1 - tableList?.length === 0}
- -
@ -740,7 +743,7 @@
<div class="w-full flex justify-center items-center h-80"> <div class="w-full flex justify-center items-center h-80">
<div class="relative"> <div class="relative">
<label <label
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="bg-odd rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
> >
<span class="loading loading-spinner loading-md text-gray-400" <span class="loading loading-spinner loading-md text-gray-400"
></span> ></span>

1
tailwind.config.cjs
View File

@ -27,6 +27,7 @@ module.exports = {
foreground: "hsl(var(--foreground) / <alpha-value>)", foreground: "hsl(var(--foreground) / <alpha-value>)",
primary: "#1E222D", primary: "#1E222D",
secondary: "#2A2E39", secondary: "#2A2E39",
odd: "#121217",
destructive: { destructive: {
DEFAULT: "hsl(var(--destructive) / <alpha-value>)", DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
foreground: "hsl(var(--destructive-foreground) / <alpha-value>)", foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",