refactor stock page
This commit is contained in:
MuslemRahimi
parent
402367e98d
commit
0536279f6e
@ -15,16 +15,25 @@
|
||||
let changesPercentage = 0;
|
||||
|
||||
$: {
|
||||
if ($stockTicker && typeof window !== "undefined" && typeof analystRating !== "undefined" && Object?.keys(analystRating)?.length !== 0) {
|
||||
if (
|
||||
$stockTicker &&
|
||||
typeof window !== "undefined" &&
|
||||
typeof analystRating !== "undefined" &&
|
||||
Object?.keys(analystRating)?.length !== 0
|
||||
) {
|
||||
numOfAnalyst = analystRating?.numOfAnalyst;
|
||||
buyCount = ((analystRating?.Buy / numOfAnalyst) * 100)?.toFixed(2);
|
||||
holdCount = ((analystRating?.Hold / numOfAnalyst) * 100)?.toFixed(2);
|
||||
sellCount = ((analystRating?.Sell / numOfAnalyst) * 100)?.toFixed(2);
|
||||
priceTarget = analystRating?.priceTarget !== ('n/a' && 0) ? analystRating?.priceTarget : '-';
|
||||
priceTarget =
|
||||
analystRating?.priceTarget !== ("n/a" && 0)
|
||||
? analystRating?.priceTarget
|
||||
: "-";
|
||||
consensusRating = analystRating?.consensusRating;
|
||||
|
||||
try {
|
||||
changesPercentage = ((priceTarget / lastPrice - 1) * 100)?.toFixed(2) ?? 0;
|
||||
changesPercentage =
|
||||
((priceTarget / lastPrice - 1) * 100)?.toFixed(2) ?? 0;
|
||||
} catch (e) {
|
||||
changesPercentage = 0;
|
||||
}
|
||||
@ -33,28 +42,52 @@
|
||||
</script>
|
||||
|
||||
<!--Start Analyst Card -->
|
||||
<div class="space-y-3 sm:pt-5 hidden sm:block sm:{Object?.keys(analystRating)?.length !== 0 ? '' : 'hidden'}">
|
||||
<div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px] -mx-1 sm:mx-0">
|
||||
<div
|
||||
class="space-y-3 sm:pt-5 hidden sm:block sm:{Object?.keys(analystRating)
|
||||
?.length !== 0
|
||||
? ''
|
||||
: 'hidden'}"
|
||||
>
|
||||
<div
|
||||
class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth <
|
||||
640
|
||||
? 'w-screen pt-16'
|
||||
: ''} md:w-[420px] xl:w-[450px] -mx-1 sm:mx-0"
|
||||
>
|
||||
<!--Start Content-->
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">
|
||||
<h2 class="text-start text-2xl font-semibold text-white p-3 mt-3 ml-1">Analyst Rating</h2>
|
||||
<div
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0"
|
||||
>
|
||||
<h2 class="text-start text-2xl font-semibold text-white p-3 mt-3 ml-1">
|
||||
Analyst Rating
|
||||
</h2>
|
||||
|
||||
<div class="flex flex-col mt-5 w-full">
|
||||
<div class="flex flex-row m-auto w-full">
|
||||
<span class="text-start mr-auto ml-5 text-white font-medium text-xl"> Signal </span>
|
||||
<span class="mr-5 text-white font-medium text-xl"> Price Target </span>
|
||||
<span class="text-start mr-auto ml-5 text-white font-medium text-xl">
|
||||
Signal
|
||||
</span>
|
||||
<span class="mr-5 text-white font-medium text-xl">
|
||||
Price Target
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-row m-auto w-full">
|
||||
{#if consensusRating === "Buy" || consensusRating === "Strong Buy"}
|
||||
<span class="text-start font-semibold text-[#37C97D] mr-auto ml-5 mt-2 text-xl">
|
||||
<span
|
||||
class="text-start font-semibold text-[#37C97D] mr-auto ml-5 mt-2 text-xl"
|
||||
>
|
||||
{consensusRating}
|
||||
</span>
|
||||
{:else if consensusRating === "Sell" || consensusRating === "Strong Sell"}
|
||||
<span class="text-start font-semibold text-[#FF2F1F] mr-auto ml-5 mt-2 text-xl">
|
||||
<span
|
||||
class="text-start font-semibold text-[#FF2F1F] mr-auto ml-5 mt-2 text-xl"
|
||||
>
|
||||
{consensusRating}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-start font-semibold text-[#FF2F1F] mr-auto ml-5 mt-2 text-xl">
|
||||
<span
|
||||
class="text-start font-semibold text-[#FF2F1F] mr-auto ml-5 mt-2 text-xl"
|
||||
>
|
||||
{consensusRating}
|
||||
</span>
|
||||
{/if}
|
||||
@ -68,53 +101,81 @@
|
||||
<div class="text-white pl-4 pr-4 mt-6">
|
||||
{#if changesPercentage < 0}
|
||||
The Stock Price has a downside of
|
||||
<span style="color: #FF2F1F; font-weight: 500">{abbreviateNumber(Math.abs(changesPercentage))}%</span>
|
||||
<span style="color: #FF2F1F; font-weight: 500"
|
||||
>{abbreviateNumber(Math.abs(changesPercentage))}%</span
|
||||
>
|
||||
{:else if changesPercentage >= 0}
|
||||
The Stock Price has an upside of
|
||||
<span style="color: #37C97D; font-weight: 500">{abbreviateNumber(Math.abs(changesPercentage))}%</span>
|
||||
<span style="color: #37C97D; font-weight: 500"
|
||||
>{abbreviateNumber(Math.abs(changesPercentage))}%</span
|
||||
>
|
||||
{/if}
|
||||
based on <span style="font-weight: 600">{numOfAnalyst}</span> analysts in the past 12 months.
|
||||
based on <span style="font-weight: 600">{numOfAnalyst}</span> analysts in
|
||||
the past 12 months.
|
||||
</div>
|
||||
|
||||
<div class="mt-5 w-full rounded-full flex justify-center items-center mb-5">
|
||||
<div
|
||||
class="mt-5 w-full rounded-full flex justify-center items-center mb-5"
|
||||
>
|
||||
<div class="flex flex-col items-center w-full">
|
||||
<!--Start Progress-->
|
||||
|
||||
<div class="flex flex-col items-center w-full">
|
||||
<div class="flex flex-row items-center w-11/12 mt-5 mb-2">
|
||||
<span class="text-white font-medium text-start mr-auto"> Buy </span>
|
||||
<span class="text-white font-medium text-start mr-auto">
|
||||
Buy
|
||||
</span>
|
||||
<span class="text-white text-md font-medium ml-auto">
|
||||
{buyCount}%
|
||||
</span>
|
||||
</div>
|
||||
<progress class="progress bg-[#3B3D3F] w-11/12 [&::-webkit-progress-value]:bg-[#37C97D] [&::-moz-progress-bar]:bg-[#37C97D]" value={buyCount} max="100"></progress>
|
||||
<progress
|
||||
class="progress bg-[#3B3D3F] w-11/12 [&::-webkit-progress-value]:bg-[#37C97D] [&::-moz-progress-bar]:bg-[#37C97D]"
|
||||
value={buyCount}
|
||||
max="100"
|
||||
></progress>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center w-full">
|
||||
<div class="flex flex-row items-center w-11/12 mt-5 mb-2">
|
||||
<span class="text-white font-medium text-start mr-auto"> Hold </span>
|
||||
<span class="text-white font-medium text-start mr-auto">
|
||||
Hold
|
||||
</span>
|
||||
<span class="text-white text-md font-medium ml-auto">
|
||||
{holdCount}%
|
||||
</span>
|
||||
</div>
|
||||
<progress class="progress bg-[#3B3D3F] w-11/12 [&::-webkit-progress-value]:bg-[#fff] [&::-moz-progress-bar]:bg-[#fff]" value={holdCount} max="100"></progress>
|
||||
<progress
|
||||
class="progress bg-[#3B3D3F] w-11/12 [&::-webkit-progress-value]:bg-[#fff] [&::-moz-progress-bar]:bg-[#fff]"
|
||||
value={holdCount}
|
||||
max="100"
|
||||
></progress>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center w-full">
|
||||
<div class="flex flex-row items-center w-11/12 mt-5 mb-2">
|
||||
<span class="text-white font-medium text-start mr-auto"> Sell </span>
|
||||
<span class="text-white font-medium text-start mr-auto">
|
||||
Sell
|
||||
</span>
|
||||
<span class="text-white text-md font-medium ml-auto">
|
||||
{sellCount}%
|
||||
</span>
|
||||
</div>
|
||||
<progress class="progress bg-[#3B3D3F] w-11/12 [&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]" value={sellCount} max="100"></progress>
|
||||
<progress
|
||||
class="progress bg-[#3B3D3F] w-11/12 [&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]"
|
||||
value={sellCount}
|
||||
max="100"
|
||||
></progress>
|
||||
</div>
|
||||
|
||||
<!--End Progress-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href={`/stocks/${$stockTicker}/forecast/analyst`} class="rounded-lg cursor-pointer w-11/12 py-2 h-full mt-6 text-lg text-center font-bold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/forecast/analyst`}
|
||||
class="rounded-md cursor-pointer w-11/12 py-2 h-full mt-6 text-lg text-center font-bold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100"
|
||||
>
|
||||
Analyst Ratings
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
<script lang="ts">
|
||||
import { revenueSegmentationComponent, stockTicker, screenWidth, getCache, setCache } from "$lib/store";
|
||||
import {
|
||||
revenueSegmentationComponent,
|
||||
stockTicker,
|
||||
screenWidth,
|
||||
getCache,
|
||||
setCache,
|
||||
} from "$lib/store";
|
||||
import { abbreviateNumber, formatString } from "$lib/utils";
|
||||
import Sankey from "$lib/components/Sankey.svelte";
|
||||
import { LayerCake, Svg } from "layercake";
|
||||
@ -7,12 +13,10 @@
|
||||
|
||||
import InfoModal from "$lib/components/InfoModal.svelte";
|
||||
|
||||
export let userTier;
|
||||
export let revenueSegmentation = [];
|
||||
let revenueSegmentation = [];
|
||||
|
||||
let isLoaded = false;
|
||||
|
||||
|
||||
let data = [];
|
||||
let geographicList = [];
|
||||
let totalProductRevenue = 0;
|
||||
@ -43,10 +47,20 @@
|
||||
const value = values[category];
|
||||
if (value > 0) {
|
||||
nodes?.push({
|
||||
id: (category?.length > 35 ? category?.slice(0, 35) + "..." : category) + ' · ' +`$${abbreviateNumber(value)}`,
|
||||
id:
|
||||
(category?.length > 35
|
||||
? category?.slice(0, 35) + "..."
|
||||
: category) +
|
||||
" · " +
|
||||
`${abbreviateNumber(value)}`,
|
||||
});
|
||||
links?.push({
|
||||
source: (category?.length > 35 ? category?.slice(0, 35) + "..." : category) + ' · ' +`$${abbreviateNumber(value)}`,
|
||||
source:
|
||||
(category?.length > 35
|
||||
? category?.slice(0, 35) + "..."
|
||||
: category) +
|
||||
" · " +
|
||||
`${abbreviateNumber(value)}`,
|
||||
target: "Revenue",
|
||||
value: value,
|
||||
});
|
||||
@ -119,14 +133,14 @@
|
||||
$revenueSegmentationComponent = false;
|
||||
}
|
||||
}
|
||||
/*
|
||||
|
||||
const getRevenueSegmentation = async (ticker) => {
|
||||
// Get cached data for the specific tickerID
|
||||
const cachedData = getCache(ticker, "getRevenueSegmentation");
|
||||
if (cachedData) {
|
||||
revenueSegmentation = cachedData;
|
||||
} else {
|
||||
const postData = { ticker: ticker, path: 'revenue-segmentation' };
|
||||
const postData = { ticker: ticker, path: "revenue-segmentation" };
|
||||
// make the POST request to the endpoint
|
||||
const response = await fetch("/api/ticker-data", {
|
||||
method: "POST",
|
||||
@ -142,7 +156,6 @@
|
||||
setCache(ticker, revenueSegmentation, "getRevenueSegmentation");
|
||||
}
|
||||
};
|
||||
*/
|
||||
|
||||
$: {
|
||||
if ($stockTicker && typeof window !== "undefined") {
|
||||
@ -152,20 +165,32 @@
|
||||
geographicList = [];
|
||||
totalProductRevenue = 0;
|
||||
totalGeographicRevenue = 0;
|
||||
prepareData(revenueSegmentation);
|
||||
Promise.all([getRevenueSegmentation($stockTicker)])
|
||||
.then(() => {
|
||||
if (revenueSegmentation?.length !== 0) {
|
||||
prepareData(revenueSegmentation);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("An error occurred:", error);
|
||||
});
|
||||
isLoaded = true;
|
||||
}
|
||||
}
|
||||
|
||||
let showFullStats = false;
|
||||
$: charNumber = $screenWidth < 640 ? 25 :40;
|
||||
|
||||
$: charNumber = $screenWidth < 640 ? 25 : 40;
|
||||
</script>
|
||||
|
||||
<section class="overflow-hidden text-white h-full pb-8">
|
||||
<main class="overflow-hidden">
|
||||
<div class="flex flex-row items-center">
|
||||
<label for="revenueProductSegmentationInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold"> Revenue Breakdown </label>
|
||||
<label
|
||||
for="revenueProductSegmentationInfo"
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold"
|
||||
>
|
||||
Revenue Breakdown
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Revenue Breakdown"}
|
||||
content={"A revenue stream for a company is how they make money. It can come from selling things, providing services, or other sources. These different ways of making money add up to keep the company running and growing."}
|
||||
@ -173,100 +198,185 @@ $: charNumber = $screenWidth < 640 ? 25 :40;
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if isLoaded}
|
||||
{#if Object?.keys(data)?.length !== 0 && totalProductRevenue !== 0}
|
||||
<div class="mt-2 pb-4">
|
||||
<div class="text-white text-md mt-3 w-full mb-5">Based on the latest earnings report the main contributors of revenue are:</div>
|
||||
|
||||
<div class="mt-5 w-full rounded-full flex justify-center items-center">
|
||||
<div class="flex flex-col items-center w-full">
|
||||
<div class="chart-container">
|
||||
<LayerCake {data}>
|
||||
<Svg>
|
||||
<Sankey colorNodes={(d) => "#3B82F6"} colorLinks={(d) => "#3B82F635"} />
|
||||
</Svg>
|
||||
</LayerCake>
|
||||
</div>
|
||||
|
||||
<a href={`/stocks/${$stockTicker}/stats/income`} class="mt-10 mr-3 sm:mr-0 ml-auto text-blue-400 hover:text-white"> Full report </a>
|
||||
</div>
|
||||
</div>
|
||||
{#if isLoaded}
|
||||
{#if Object?.keys(data)?.length !== 0 && totalProductRevenue !== 0}
|
||||
<div class="mt-2 pb-4">
|
||||
<div class="text-white text-md mt-3 w-full mb-5">
|
||||
Based on the latest earnings report the main contributors of revenue
|
||||
are:
|
||||
</div>
|
||||
|
||||
{#if geographicList?.length !== 0 && totalGeographicRevenue !== 0}
|
||||
<div class="text-white text-md mt-6">
|
||||
The highest revenue was generated in the {geographicList?.length} regions:
|
||||
</div>
|
||||
|
||||
<div class="w-full rounded-full flex justify-center items-center">
|
||||
<div class="flex flex-col items-center w-full">
|
||||
<!--Start Progress-->
|
||||
{#each showFullStats ? geographicList : geographicList?.slice(0, 3) as item, index}
|
||||
<div class="shadow-lg bg-[#27272A] w-full rounded-lg p-4 sm:p-3 mb-5 flex flex-row items-center {index === 0 ? 'mt-4' : ''} {index === 2 && !showFullStats && geographicList?.length > 3 ? 'opacity-[0.3]' : ''}">
|
||||
<div class="mr-3 rounded-full w-8 h-8 sm:w-10 sm:h-10 relative bg-[#27272A]">
|
||||
{#if item?.name?.toLowerCase() === "europe"}
|
||||
<svg class="rounded-full w-6 h-6 sm:w-7 sm:h-7 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
|
||||
><mask id="circleFlagsEu0"><circle cx="256" cy="256" r="256" fill="#fff" /></mask><g mask="url(#circleFlagsEu0)"
|
||||
><path fill="#0052b4" d="M0 0h512v512H0z" /><path
|
||||
fill="#ffda44"
|
||||
d="m256 100.2l8.3 25.5H291l-21.7 15.7l8.3 25.6l-21.7-15.8l-21.7 15.8l8.3-25.6l-21.7-15.7h26.8zm-110.2 45.6l24 12.2l18.9-19l-4.2 26.5l23.9 12.2l-26.5 4.2l-4.2 26.5l-12.2-24l-26.5 4.3l19-19zM100.2 256l25.5-8.3V221l15.7 21.7l25.6-8.3l-15.8 21.7l15.8 21.7l-25.6-8.3l-15.7 21.7v-26.8zm45.6 110.2l12.2-24l-19-18.9l26.5 4.2l12.2-23.9l4.2 26.5l26.5 4.2l-24 12.2l4.3 26.5l-19-19zM256 411.8l-8.3-25.5H221l21.7-15.7l-8.3-25.6l21.7 15.8l21.7-15.8l-8.3 25.6l21.7 15.7h-26.8zm110.2-45.6l-24-12.2l-18.9 19l4.2-26.5l-23.9-12.2l26.5-4.2l4.2-26.5l12.2 24l26.5-4.3l-19 19zM411.8 256l-25.5 8.3V291l-15.7-21.7l-25.6 8.3l15.8-21.7l-15.8-21.7l25.6 8.3l15.7-21.7v26.8zm-45.6-110.2l-12.2 24l19 18.9l-26.5-4.2l-12.2 23.9l-4.2-26.5l-26.5-4.2l24-12.2l-4.3-26.5l19 19z"
|
||||
/></g
|
||||
></svg
|
||||
>
|
||||
{:else if item?.name?.toLowerCase() === "taiwan"}
|
||||
<svg class="rounded-full w-6 h-6 sm:w-7 sm:h-7 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"
|
||||
><path fill="#ed4c5c" d="M32 2v30H2c0 16.6 13.4 30 30 30s30-13.4 30-30S48.6 2 32 2" /><path fill="#2a5f9e" d="M32 2C15.4 2 2 15.4 2 32h30z" /><path
|
||||
fill="#fff"
|
||||
d="m24 20.3l5-1.3l-5-1.3l3.7-3.7l-5 1.3l1.3-5l-3.7 3.7L19 9l-1.3 5l-3.7-3.7l1.3 5l-5-1.3l3.7 3.7L9 19l5 1.3l-3.7 3.7l5-1.3l-1.3 5l3.7-3.7l1.3 5l1.3-5l3.7 3.7l-1.3-5l5 1.3z"
|
||||
/><circle cx="19" cy="19" r="5.7" fill="#428bc1" /><circle cx="19" cy="19" r="5" fill="#fff" /></svg
|
||||
>
|
||||
{:else if item?.code == "xx"}
|
||||
<svg class="rounded-full w-6 h-6 sm:w-7 sm:h-7 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"
|
||||
><path fill="#7cb342" d="M24 4C13 4 4 13 4 24s9 20 20 20s20-9 20-20S35 4 24 4" /><path
|
||||
fill="#0277bd"
|
||||
d="M45 24c0 11.7-9.5 21-21 21S3 35.7 3 24S12.3 3 24 3s21 9.3 21 21m-21.2 9.7c0-.4-.2-.6-.6-.8c-1.3-.4-2.5-.4-3.6-1.5c-.2-.4-.2-.8-.4-1.3c-.4-.4-1.5-.6-2.1-.8h-4.2c-.6-.2-1.1-1.1-1.5-1.7c0-.2 0-.6-.4-.6c-.4-.2-.8.2-1.3 0c-.2-.2-.2-.4-.2-.6c0-.6.4-1.3.8-1.7c.6-.4 1.3.2 1.9.2c.2 0 .2 0 .4.2c.6.2.8 1 .8 1.7v.4c0 .2.2.2.4.2c.2-1.1.2-2.1.4-3.2c0-1.3 1.3-2.5 2.3-2.9c.4-.2.6.2 1.1 0c1.3-.4 4.4-1.7 3.8-3.4c-.4-1.5-1.7-2.9-3.4-2.7c-.4.2-.6.4-1 .6c-.6.4-1.9 1.7-2.5 1.7c-1.1-.2-1.1-1.7-.8-2.3c.2-.8 2.1-3.6 3.4-3.1l.8.8c.4.2 1.1.2 1.7.2c.2 0 .4 0 .6-.2c.2-.2.2-.2.2-.4c0-.6-.6-1.3-1-1.7c-.4-.4-1.1-.8-1.7-1.1c-2.1-.6-5.5.2-7.1 1.7s-2.9 4-3.8 6.1c-.4 1.3-.8 2.9-1 4.4c-.2 1-.4 1.9.2 2.9c.6 1.3 1.9 2.5 3.2 3.4c.8.6 2.5.6 3.4 1.7c.6.8.4 1.9.4 2.9c0 1.3.8 2.3 1.3 3.4c.2.6.4 1.5.6 2.1c0 .2.2 1.5.2 1.7c1.3.6 2.3 1.3 3.8 1.7c.2 0 1-1.3 1-1.5c.6-.6 1.1-1.5 1.7-1.9c.4-.2.8-.4 1.3-.8c.4-.4.6-1.3.8-1.9c.1-.5.3-1.3.1-1.9m.4-19.4c.2 0 .4-.2.8-.4c.6-.4 1.3-1.1 1.9-1.5c.6-.4 1.3-1.1 1.7-1.5c.6-.4 1.1-1.3 1.3-1.9c.2-.4.8-1.3.6-1.9c-.2-.4-1.3-.6-1.7-.8c-1.7-.4-3.1-.6-4.8-.6c-.6 0-1.5.2-1.7.8c-.2 1.1.6.8 1.5 1.1c0 0 .2 1.7.2 1.9c.2 1-.4 1.7-.4 2.7c0 .6 0 1.7.4 2.1zM41.8 29c.2-.4.2-1.1.4-1.5c.2-1 .2-2.1.2-3.1c0-2.1-.2-4.2-.8-6.1c-.4-.6-.6-1.3-.8-1.9c-.4-1.1-1-2.1-1.9-2.9c-.8-1.1-1.9-4-3.8-3.1c-.6.2-1 1-1.5 1.5c-.4.6-.8 1.3-1.3 1.9c-.2.2-.4.6-.2.8c0 .2.2.2.4.2c.4.2.6.2 1 .4c.2 0 .4.2.2.4c0 0 0 .2-.2.2c-1 1.1-2.1 1.9-3.1 2.9c-.2.2-.4.6-.4.8c0 .2.2.2.2.4s-.2.2-.4.4c-.4.2-.8.4-1.1.6c-.2.4 0 1.1-.2 1.5c-.2 1.1-.8 1.9-1.3 2.9c-.4.6-.6 1.3-1 1.9c0 .8-.2 1.5.2 2.1c1 1.5 2.9.6 4.4 1.3c.4.2.8.2 1.1.6c.6.6.6 1.7.8 2.3c.2.8.4 1.7.8 2.5c.2 1 .6 2.1.8 2.9c1.9-1.5 3.6-3.1 4.8-5.2c1.5-1.3 2.1-3 2.7-4.7"
|
||||
/></svg
|
||||
>
|
||||
{:else}
|
||||
<img class="rounded-full w-6 h-6 sm:w-7 sm:h-7 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2" src={`https://hatscripts.github.io/circle-flags/flags/${item?.code}.svg`} alt="Country Logo" />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col -mt-3 sm:-mt-5 w-full">
|
||||
<div class="flex flex-row items-center w-full">
|
||||
<span class="text-white text-sm sm:text-md font-medium text-start mb-2 mr-auto mt-2">
|
||||
{item?.name?.length > charNumber ? formatString(item?.name)?.slice(0, charNumber) + "..." : formatString(item?.name)} · ${abbreviateNumber(item?.value)}
|
||||
</span>
|
||||
<span class="text-white text-sm sm:text-md font-medium ml-auto">
|
||||
{((item?.value / totalGeographicRevenue) * 100)?.toFixed(2)}%
|
||||
</span>
|
||||
</div>
|
||||
<progress class="progress bg-[#3B3D3F] [&::-webkit-progress-value]:bg-[#37C97D] [&::-moz-progress-bar]:bg-[#37C97D]" value={(item?.value / totalGeographicRevenue) * 100} max="100"></progress>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
<!--End Progress-->
|
||||
<div
|
||||
class="mt-5 w-full rounded-full flex justify-center items-center"
|
||||
>
|
||||
<div class="flex flex-col items-center w-full">
|
||||
<div class="chart-container">
|
||||
<LayerCake {data}>
|
||||
<Svg>
|
||||
<Sankey
|
||||
colorNodes={(d) => "#3B82F6"}
|
||||
colorLinks={(d) => "#3B82F635"}
|
||||
/>
|
||||
</Svg>
|
||||
</LayerCake>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if geographicList?.length > 3}
|
||||
<label on:click={() => (showFullStats = !showFullStats)} class="cursor-pointer m-auto flex justify-center items-center mt-5">
|
||||
<svg class="w-10 h-10 transform {showFullStats ? 'rotate-180' : ''} " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
||||
><path fill="#2A323C" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 13.5L7.5 11l1.42-1.41L12 12.67l3.08-3.08L16.5 11L12 15.5z" /></svg
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/stats/income`}
|
||||
class="mt-10 mr-3 sm:mr-0 ml-auto text-blue-400 hover:text-white"
|
||||
>
|
||||
</label>{/if}
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<div class="relative">
|
||||
<label class="bg-[#09090B] rounded-xl 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>
|
||||
</label>
|
||||
Full report
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if geographicList?.length !== 0 && totalGeographicRevenue !== 0}
|
||||
<div class="text-white text-md mt-6">
|
||||
The highest revenue was generated in the {geographicList?.length} regions:
|
||||
</div>
|
||||
|
||||
<div class="w-full rounded-full flex justify-center items-center">
|
||||
<div class="flex flex-col items-center w-full">
|
||||
<!--Start Progress-->
|
||||
{#each showFullStats ? geographicList : geographicList?.slice(0, 3) as item, index}
|
||||
<div
|
||||
class="shadow-lg bg-[#27272A] w-full rounded-lg p-4 sm:p-3 mb-5 flex flex-row items-center {index ===
|
||||
0
|
||||
? 'mt-4'
|
||||
: ''} {index === 2 &&
|
||||
!showFullStats &&
|
||||
geographicList?.length > 3
|
||||
? 'opacity-[0.3]'
|
||||
: ''}"
|
||||
>
|
||||
<div
|
||||
class="mr-3 rounded-full w-8 h-8 sm:w-10 sm:h-10 relative bg-[#27272A]"
|
||||
>
|
||||
{#if item?.name?.toLowerCase() === "europe"}
|
||||
<svg
|
||||
class="rounded-full w-6 h-6 sm:w-7 sm:h-7 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
><mask id="circleFlagsEu0"
|
||||
><circle
|
||||
cx="256"
|
||||
cy="256"
|
||||
r="256"
|
||||
fill="#fff"
|
||||
/></mask
|
||||
><g mask="url(#circleFlagsEu0)"
|
||||
><path fill="#0052b4" d="M0 0h512v512H0z" /><path
|
||||
fill="#ffda44"
|
||||
d="m256 100.2l8.3 25.5H291l-21.7 15.7l8.3 25.6l-21.7-15.8l-21.7 15.8l8.3-25.6l-21.7-15.7h26.8zm-110.2 45.6l24 12.2l18.9-19l-4.2 26.5l23.9 12.2l-26.5 4.2l-4.2 26.5l-12.2-24l-26.5 4.3l19-19zM100.2 256l25.5-8.3V221l15.7 21.7l25.6-8.3l-15.8 21.7l15.8 21.7l-25.6-8.3l-15.7 21.7v-26.8zm45.6 110.2l12.2-24l-19-18.9l26.5 4.2l12.2-23.9l4.2 26.5l26.5 4.2l-24 12.2l4.3 26.5l-19-19zM256 411.8l-8.3-25.5H221l21.7-15.7l-8.3-25.6l21.7 15.8l21.7-15.8l-8.3 25.6l21.7 15.7h-26.8zm110.2-45.6l-24-12.2l-18.9 19l4.2-26.5l-23.9-12.2l26.5-4.2l4.2-26.5l12.2 24l26.5-4.3l-19 19zM411.8 256l-25.5 8.3V291l-15.7-21.7l-25.6 8.3l15.8-21.7l-15.8-21.7l25.6 8.3l15.7-21.7v26.8zm-45.6-110.2l-12.2 24l19 18.9l-26.5-4.2l-12.2 23.9l-4.2-26.5l-26.5-4.2l24-12.2l-4.3-26.5l19 19z"
|
||||
/></g
|
||||
></svg
|
||||
>
|
||||
{:else if item?.name?.toLowerCase() === "taiwan"}
|
||||
<svg
|
||||
class="rounded-full w-6 h-6 sm:w-7 sm:h-7 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 64 64"
|
||||
><path
|
||||
fill="#ed4c5c"
|
||||
d="M32 2v30H2c0 16.6 13.4 30 30 30s30-13.4 30-30S48.6 2 32 2"
|
||||
/><path
|
||||
fill="#2a5f9e"
|
||||
d="M32 2C15.4 2 2 15.4 2 32h30z"
|
||||
/><path
|
||||
fill="#fff"
|
||||
d="m24 20.3l5-1.3l-5-1.3l3.7-3.7l-5 1.3l1.3-5l-3.7 3.7L19 9l-1.3 5l-3.7-3.7l1.3 5l-5-1.3l3.7 3.7L9 19l5 1.3l-3.7 3.7l5-1.3l-1.3 5l3.7-3.7l1.3 5l1.3-5l3.7 3.7l-1.3-5l5 1.3z"
|
||||
/><circle
|
||||
cx="19"
|
||||
cy="19"
|
||||
r="5.7"
|
||||
fill="#428bc1"
|
||||
/><circle cx="19" cy="19" r="5" fill="#fff" /></svg
|
||||
>
|
||||
{:else if item?.code == "xx"}
|
||||
<svg
|
||||
class="rounded-full w-6 h-6 sm:w-7 sm:h-7 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 48 48"
|
||||
><path
|
||||
fill="#7cb342"
|
||||
d="M24 4C13 4 4 13 4 24s9 20 20 20s20-9 20-20S35 4 24 4"
|
||||
/><path
|
||||
fill="#0277bd"
|
||||
d="M45 24c0 11.7-9.5 21-21 21S3 35.7 3 24S12.3 3 24 3s21 9.3 21 21m-21.2 9.7c0-.4-.2-.6-.6-.8c-1.3-.4-2.5-.4-3.6-1.5c-.2-.4-.2-.8-.4-1.3c-.4-.4-1.5-.6-2.1-.8h-4.2c-.6-.2-1.1-1.1-1.5-1.7c0-.2 0-.6-.4-.6c-.4-.2-.8.2-1.3 0c-.2-.2-.2-.4-.2-.6c0-.6.4-1.3.8-1.7c.6-.4 1.3.2 1.9.2c.2 0 .2 0 .4.2c.6.2.8 1 .8 1.7v.4c0 .2.2.2.4.2c.2-1.1.2-2.1.4-3.2c0-1.3 1.3-2.5 2.3-2.9c.4-.2.6.2 1.1 0c1.3-.4 4.4-1.7 3.8-3.4c-.4-1.5-1.7-2.9-3.4-2.7c-.4.2-.6.4-1 .6c-.6.4-1.9 1.7-2.5 1.7c-1.1-.2-1.1-1.7-.8-2.3c.2-.8 2.1-3.6 3.4-3.1l.8.8c.4.2 1.1.2 1.7.2c.2 0 .4 0 .6-.2c.2-.2.2-.2.2-.4c0-.6-.6-1.3-1-1.7c-.4-.4-1.1-.8-1.7-1.1c-2.1-.6-5.5.2-7.1 1.7s-2.9 4-3.8 6.1c-.4 1.3-.8 2.9-1 4.4c-.2 1-.4 1.9.2 2.9c.6 1.3 1.9 2.5 3.2 3.4c.8.6 2.5.6 3.4 1.7c.6.8.4 1.9.4 2.9c0 1.3.8 2.3 1.3 3.4c.2.6.4 1.5.6 2.1c0 .2.2 1.5.2 1.7c1.3.6 2.3 1.3 3.8 1.7c.2 0 1-1.3 1-1.5c.6-.6 1.1-1.5 1.7-1.9c.4-.2.8-.4 1.3-.8c.4-.4.6-1.3.8-1.9c.1-.5.3-1.3.1-1.9m.4-19.4c.2 0 .4-.2.8-.4c.6-.4 1.3-1.1 1.9-1.5c.6-.4 1.3-1.1 1.7-1.5c.6-.4 1.1-1.3 1.3-1.9c.2-.4.8-1.3.6-1.9c-.2-.4-1.3-.6-1.7-.8c-1.7-.4-3.1-.6-4.8-.6c-.6 0-1.5.2-1.7.8c-.2 1.1.6.8 1.5 1.1c0 0 .2 1.7.2 1.9c.2 1-.4 1.7-.4 2.7c0 .6 0 1.7.4 2.1zM41.8 29c.2-.4.2-1.1.4-1.5c.2-1 .2-2.1.2-3.1c0-2.1-.2-4.2-.8-6.1c-.4-.6-.6-1.3-.8-1.9c-.4-1.1-1-2.1-1.9-2.9c-.8-1.1-1.9-4-3.8-3.1c-.6.2-1 1-1.5 1.5c-.4.6-.8 1.3-1.3 1.9c-.2.2-.4.6-.2.8c0 .2.2.2.4.2c.4.2.6.2 1 .4c.2 0 .4.2.2.4c0 0 0 .2-.2.2c-1 1.1-2.1 1.9-3.1 2.9c-.2.2-.4.6-.4.8c0 .2.2.2.2.4s-.2.2-.4.4c-.4.2-.8.4-1.1.6c-.2.4 0 1.1-.2 1.5c-.2 1.1-.8 1.9-1.3 2.9c-.4.6-.6 1.3-1 1.9c0 .8-.2 1.5.2 2.1c1 1.5 2.9.6 4.4 1.3c.4.2.8.2 1.1.6c.6.6.6 1.7.8 2.3c.2.8.4 1.7.8 2.5c.2 1 .6 2.1.8 2.9c1.9-1.5 3.6-3.1 4.8-5.2c1.5-1.3 2.1-3 2.7-4.7"
|
||||
/></svg
|
||||
>
|
||||
{:else}
|
||||
<img
|
||||
class="rounded-full w-6 h-6 sm:w-7 sm:h-7 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
||||
src={`https://hatscripts.github.io/circle-flags/flags/${item?.code}.svg`}
|
||||
alt="Country Logo"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col -mt-3 sm:-mt-5 w-full">
|
||||
<div class="flex flex-row items-center w-full">
|
||||
<span
|
||||
class="text-white text-sm sm:text-md font-medium text-start mb-2 mr-auto mt-2"
|
||||
>
|
||||
{item?.name?.length > charNumber
|
||||
? formatString(item?.name)?.slice(0, charNumber) +
|
||||
"..."
|
||||
: formatString(item?.name)} · {abbreviateNumber(
|
||||
item?.value,
|
||||
)}
|
||||
</span>
|
||||
<span
|
||||
class="text-white text-sm sm:text-md font-medium ml-auto"
|
||||
>
|
||||
{(
|
||||
(item?.value / totalGeographicRevenue) *
|
||||
100
|
||||
)?.toFixed(2)}%
|
||||
</span>
|
||||
</div>
|
||||
<progress
|
||||
class="progress bg-[#3B3D3F] [&::-webkit-progress-value]:bg-[#37C97D] [&::-moz-progress-bar]:bg-[#37C97D]"
|
||||
value={(item?.value / totalGeographicRevenue) * 100}
|
||||
max="100"
|
||||
></progress>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
<!--End Progress-->
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if geographicList?.length > 3}
|
||||
<label
|
||||
on:click={() => (showFullStats = !showFullStats)}
|
||||
class="cursor-pointer m-auto flex justify-center items-center mt-5"
|
||||
>
|
||||
<svg
|
||||
class="w-10 h-10 transform {showFullStats ? 'rotate-180' : ''} "
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="#2A323C"
|
||||
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 13.5L7.5 11l1.42-1.41L12 12.67l3.08-3.08L16.5 11L12 15.5z"
|
||||
/></svg
|
||||
>
|
||||
</label>{/if}
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<div class="relative">
|
||||
<label
|
||||
class="bg-[#09090B] rounded-xl 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>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
</section>
|
||||
|
||||
|
||||
@ -98,22 +98,12 @@ function handleTypeOfTrade(state:string)
|
||||
}
|
||||
*/
|
||||
|
||||
function scrollToItem(itemId) {
|
||||
const item = document.getElementById(itemId);
|
||||
if (item) {
|
||||
item.scrollIntoView({ behavior: "smooth" });
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
function changeSection(state, item) {
|
||||
scrollToItem(item);
|
||||
|
||||
function changeSection(state) {
|
||||
const sectionMap = {
|
||||
insider: "/insider",
|
||||
options: "/options",
|
||||
dividends: "/dividends",
|
||||
stats: "/stats",
|
||||
statistics: "/statistics",
|
||||
forecast: "/forecast",
|
||||
news: "/news",
|
||||
};
|
||||
@ -333,7 +323,8 @@ function handleTypeOfTrade(state:string)
|
||||
if ($page.url.pathname) {
|
||||
const parts = $page?.url?.pathname?.split("/");
|
||||
const sectionMap = {
|
||||
stats: "stats",
|
||||
statistics: "statistics",
|
||||
financials: "financials",
|
||||
options: "options",
|
||||
metrics: "metrics",
|
||||
insider: "insider",
|
||||
@ -768,13 +759,12 @@ function handleTypeOfTrade(state:string)
|
||||
: ''} mb-2"
|
||||
>
|
||||
<ul
|
||||
class="pr-4 sm:pr-0 w-screen font-medium flex flex-row items-center bg-[#09090B] space-x-3 rtl:space-x-reverse py-2"
|
||||
class="pr-4 sm:pr-0 w-screen sm:w-full overflow-x-scroll font-medium flex flex-row items-center bg-[#09090B] space-x-3 rtl:space-x-reverse py-2"
|
||||
>
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}`}
|
||||
id="item1"
|
||||
on:click={() => changeSection("overview", "item1")}
|
||||
on:click={() => changeSection("overview")}
|
||||
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
|
||||
'overview'
|
||||
? 'text-white '
|
||||
@ -790,16 +780,30 @@ function handleTypeOfTrade(state:string)
|
||||
</li>
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/stats`}
|
||||
id="item2"
|
||||
on:click={() => changeSection("stats", "item2")}
|
||||
href={`/stocks/${$stockTicker}/financials`}
|
||||
on:click={() => changeSection("financials")}
|
||||
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
|
||||
'stats'
|
||||
'financials'
|
||||
? 'text-white '
|
||||
: 'bg-[#09090B]'}">Stats</a
|
||||
: 'bg-[#09090B]'}">Financials</a
|
||||
>
|
||||
<div
|
||||
class="{displaySection === 'stats'
|
||||
class="{displaySection === 'financials'
|
||||
? 'bg-[#75D377]'
|
||||
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]"
|
||||
/>
|
||||
</li>
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/statistics`}
|
||||
on:click={() => changeSection("statistics")}
|
||||
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
|
||||
'statistics'
|
||||
? 'text-white '
|
||||
: 'bg-[#09090B]'}">Statistics</a
|
||||
>
|
||||
<div
|
||||
class="{displaySection === 'statistics'
|
||||
? 'bg-[#75D377]'
|
||||
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]"
|
||||
/>
|
||||
@ -808,8 +812,7 @@ function handleTypeOfTrade(state:string)
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/metrics`}
|
||||
id="item2"
|
||||
on:click={() => changeSection("metrics", "item6")}
|
||||
on:click={() => changeSection("metrics")}
|
||||
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
|
||||
'metrics'
|
||||
? 'text-white '
|
||||
@ -826,8 +829,7 @@ function handleTypeOfTrade(state:string)
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/forecast`}
|
||||
id="item3"
|
||||
on:click={() => changeSection("forecast", "item3")}
|
||||
on:click={() => changeSection("forecast")}
|
||||
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
|
||||
'forecast'
|
||||
? 'text-white '
|
||||
@ -844,8 +846,7 @@ function handleTypeOfTrade(state:string)
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/options`}
|
||||
id="item3"
|
||||
on:click={() => changeSection("options", "item3")}
|
||||
on:click={() => changeSection("options")}
|
||||
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
|
||||
'options'
|
||||
? 'text-white '
|
||||
@ -862,8 +863,7 @@ function handleTypeOfTrade(state:string)
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/insider`}
|
||||
id="item4"
|
||||
on:click={() => changeSection("insider", "item4")}
|
||||
on:click={() => changeSection("insider")}
|
||||
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
|
||||
'insider'
|
||||
? 'text-white '
|
||||
@ -880,8 +880,7 @@ function handleTypeOfTrade(state:string)
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/dividends`}
|
||||
id="item5"
|
||||
on:click={() => changeSection("dividends", "item5")}
|
||||
on:click={() => changeSection("dividends")}
|
||||
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
|
||||
'dividends'
|
||||
? 'text-white '
|
||||
@ -898,8 +897,7 @@ function handleTypeOfTrade(state:string)
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/news`}
|
||||
id="item7"
|
||||
on:click={() => changeSection("news", "item7")}
|
||||
on:click={() => changeSection("news")}
|
||||
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
|
||||
'news'
|
||||
? 'text-white '
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
setCache,
|
||||
fomcImpactComponent,
|
||||
corporateLobbyingComponent,
|
||||
revenueSegmentationComponent,
|
||||
taRatingComponent,
|
||||
swapComponent,
|
||||
governmentContractComponent,
|
||||
@ -1580,6 +1581,18 @@
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<Lazy>
|
||||
<div
|
||||
class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$revenueSegmentationComponent
|
||||
? 'hidden'
|
||||
: ''}"
|
||||
>
|
||||
{#await import("$lib/components/RevenueSegmentation.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<Lazy>
|
||||
<div
|
||||
class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$clinicalTrialComponent
|
||||
@ -1652,18 +1665,6 @@
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<Lazy>
|
||||
<div
|
||||
class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$enterpriseComponent
|
||||
? 'hidden'
|
||||
: ''}"
|
||||
>
|
||||
{#await import("$lib/components/Enterprise.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} {data} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<Lazy>
|
||||
<div
|
||||
class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$optionComponent
|
||||
@ -1688,16 +1689,6 @@
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<!--
|
||||
<Lazy>
|
||||
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$impliedVolatilityComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/ImpliedVolatility.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} data={data} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
-->
|
||||
|
||||
<Lazy>
|
||||
<div
|
||||
class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$failToDeliverComponent
|
||||
@ -1709,32 +1700,6 @@
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
<!--
|
||||
<Lazy>
|
||||
<div
|
||||
class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$borrowedShareComponent
|
||||
? 'hidden'
|
||||
: ''}"
|
||||
>
|
||||
{#await import("$lib/components/BorrowedShare.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} {data} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
-->
|
||||
<!--
|
||||
<Lazy>
|
||||
<div
|
||||
class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$marketMakerComponent
|
||||
? 'hidden'
|
||||
: ''}"
|
||||
>
|
||||
{#await import("$lib/components/MarketMaker.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} {data} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
-->
|
||||
|
||||
<Lazy>
|
||||
<div
|
||||
@ -1748,18 +1713,6 @@
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<Lazy>
|
||||
<div
|
||||
class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$shareStatisticsComponent
|
||||
? 'hidden'
|
||||
: ''}"
|
||||
>
|
||||
{#await import("$lib/components/ShareStatistics.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} {data} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<!--Start Shareholders-->
|
||||
<Lazy>
|
||||
<div
|
||||
@ -1785,37 +1738,6 @@
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<!--
|
||||
<Lazy>
|
||||
<div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {!$dcfComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/DCF.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} data={data}/>
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<!--
|
||||
<div class="w-full m-auto pt-10 sm:pl-6 sm:pb-6 sm:pt-6 {!$correlationComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/Correlation.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} data={data}/>
|
||||
{/await}
|
||||
</div>
|
||||
-->
|
||||
|
||||
<Lazy>
|
||||
<div
|
||||
class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {data?.getStockDeck?.at(
|
||||
0,
|
||||
)?.stockSplits?.length === 0
|
||||
? 'hidden'
|
||||
: ''}"
|
||||
>
|
||||
{#await import("$lib/components/StockSplits.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} stockDeck={data?.getStockDeck} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
158
src/routes/stocks/[tickerID]/financials/+layout.svelte
Normal file
158
src/routes/stocks/[tickerID]/financials/+layout.svelte
Normal file
@ -0,0 +1,158 @@
|
||||
<script lang="ts">
|
||||
import { stockTicker, screenWidth } from "$lib/store";
|
||||
import { page } from "$app/stores";
|
||||
|
||||
let displaySubSection = "income";
|
||||
|
||||
function changeSubSection(state) {
|
||||
const subSectionMap = {
|
||||
income: "/financials/income",
|
||||
"balance-sheet": "/financials/balance-sheet",
|
||||
"cash-flow": "/financials/cash-flow",
|
||||
ratios: "/financials/ratios",
|
||||
};
|
||||
|
||||
if (state !== "income" && subSectionMap[state]) {
|
||||
displaySubSection = state;
|
||||
//goto(`/stocks/${$stockTicker}${subSectionMap[state]}`);
|
||||
} else {
|
||||
displaySubSection = state;
|
||||
//goto(`/stocks/${$stockTicker}/financials`);
|
||||
}
|
||||
}
|
||||
|
||||
$: {
|
||||
if ($page?.url?.pathname) {
|
||||
const parts = $page?.url?.pathname.split("/");
|
||||
const sectionMap = {
|
||||
income: "income",
|
||||
"balance-sheet": "balance-sheet",
|
||||
"cash-flow": "cash-flow",
|
||||
ratios: "ratios",
|
||||
};
|
||||
|
||||
const foundSection = parts?.find((part) =>
|
||||
Object?.values(sectionMap)?.includes(part),
|
||||
);
|
||||
|
||||
displaySubSection =
|
||||
Object?.keys(sectionMap)?.find(
|
||||
(key) => sectionMap[key] === foundSection,
|
||||
) || "income";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<section
|
||||
class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
|
||||
>
|
||||
<div class="m-auto h-full overflow-hidden">
|
||||
<main class="w-fit sm:w-full sm:max-w-2xl">
|
||||
<div class="m-auto">
|
||||
<div
|
||||
class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640
|
||||
? 'overflow-auto scrollbar'
|
||||
: 'no-scrollbar'} mb-2"
|
||||
>
|
||||
<ul
|
||||
class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2"
|
||||
>
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/financials`}
|
||||
on:click={() => changeSubSection("income")}
|
||||
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
|
||||
'income'
|
||||
? 'text-white '
|
||||
: 'bg-[#09090B]'}"
|
||||
>
|
||||
Income
|
||||
</a>
|
||||
<div
|
||||
class="{displaySubSection === 'income'
|
||||
? 'bg-[#75D377]'
|
||||
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]"
|
||||
/>
|
||||
</li>
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/financials/balance-sheet`}
|
||||
on:click={() => changeSubSection("balance-sheet")}
|
||||
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
|
||||
'balance-sheet'
|
||||
? 'text-white '
|
||||
: 'bg-[#09090B]'}"
|
||||
>
|
||||
Balance Sheet
|
||||
</a>
|
||||
<div
|
||||
class="{displaySubSection === 'balance-sheet'
|
||||
? 'bg-[#75D377]'
|
||||
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]"
|
||||
/>
|
||||
</li>
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/financials/cash-flow`}
|
||||
on:click={() => changeSubSection("cash-flow")}
|
||||
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
|
||||
'cash-flow'
|
||||
? 'text-white '
|
||||
: 'bg-[#09090B]'}"
|
||||
>
|
||||
Cashflow
|
||||
</a>
|
||||
<div
|
||||
class="{displaySubSection === 'cash-flow'
|
||||
? 'bg-[#75D377]'
|
||||
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]"
|
||||
/>
|
||||
</li>
|
||||
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/financials/ratios`}
|
||||
on:click={() => changeSubSection("ratios")}
|
||||
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
|
||||
'ratios'
|
||||
? 'text-white '
|
||||
: 'bg-[#09090B]'}"
|
||||
>
|
||||
Ratios
|
||||
</a>
|
||||
<div
|
||||
class="{displaySubSection === 'ratios'
|
||||
? 'bg-[#75D377]'
|
||||
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.scrollbar {
|
||||
display: grid;
|
||||
grid-gap: 18px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
|
||||
grid-auto-flow: column;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin; /* Hide the default scrollbar in Firefox */
|
||||
scrollbar-color: transparent transparent; /* Hide the default scrollbar in Firefox */
|
||||
}
|
||||
|
||||
/* Custom scrollbar for Webkit (Chrome, Safari) */
|
||||
.scrollbar::-webkit-scrollbar {
|
||||
width: 0; /* Hide the width of the scrollbar */
|
||||
height: 0; /* Hide the height of the scrollbar */
|
||||
}
|
||||
|
||||
.scrollbar::-webkit-scrollbar-thumb {
|
||||
background: transparent; /* Make the thumb transparent */
|
||||
}
|
||||
</style>
|
||||
137
src/routes/stocks/[tickerID]/statistics/+layout.svelte
Normal file
137
src/routes/stocks/[tickerID]/statistics/+layout.svelte
Normal file
@ -0,0 +1,137 @@
|
||||
<script lang="ts">
|
||||
import { stockTicker, screenWidth } from "$lib/store";
|
||||
import { page } from "$app/stores";
|
||||
|
||||
let displaySubSection = "overview";
|
||||
|
||||
function changeSubSection(state) {
|
||||
const subSectionMap = {
|
||||
"market-cap": "/statistics/market-cap",
|
||||
employees: "/statistics/employees",
|
||||
};
|
||||
|
||||
if (state !== "overview" && subSectionMap[state]) {
|
||||
displaySubSection = state;
|
||||
//goto(`/stocks/${$stockTicker}${subSectionMap[state]}`);
|
||||
} else {
|
||||
displaySubSection = state;
|
||||
//goto(`/stocks/${$stockTicker}/statistics`);
|
||||
}
|
||||
}
|
||||
|
||||
$: {
|
||||
if ($page?.url?.pathname) {
|
||||
const parts = $page?.url?.pathname.split("/");
|
||||
const sectionMap = {
|
||||
"market-cap": "market-cap",
|
||||
employees: "employees",
|
||||
};
|
||||
|
||||
const foundSection = parts?.find((part) =>
|
||||
Object?.values(sectionMap)?.includes(part),
|
||||
);
|
||||
|
||||
displaySubSection =
|
||||
Object?.keys(sectionMap)?.find(
|
||||
(key) => sectionMap[key] === foundSection,
|
||||
) || "overview";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<section
|
||||
class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
|
||||
>
|
||||
<div class="m-auto h-full overflow-hidden">
|
||||
<main class="w-fit sm:w-full sm:max-w-2xl">
|
||||
<div class="m-auto">
|
||||
<div
|
||||
class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640
|
||||
? 'overflow-auto scrollbar'
|
||||
: 'no-scrollbar'} mb-2"
|
||||
>
|
||||
<ul
|
||||
class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2"
|
||||
>
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/statistics`}
|
||||
on:click={() => changeSubSection("overview")}
|
||||
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
|
||||
'overview'
|
||||
? 'text-white '
|
||||
: 'bg-[#09090B]'}"
|
||||
>
|
||||
Overview
|
||||
</a>
|
||||
<div
|
||||
class="{displaySubSection === 'overview'
|
||||
? 'bg-[#75D377]'
|
||||
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]"
|
||||
/>
|
||||
</li>
|
||||
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/statistics/market-cap`}
|
||||
on:click={() => changeSubSection("market-cap")}
|
||||
class="whitespace-nowrap px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
|
||||
'market-cap'
|
||||
? 'text-white '
|
||||
: 'bg-[#09090B]'}"
|
||||
>
|
||||
Market Cap
|
||||
</a>
|
||||
<div
|
||||
class="{displaySubSection === 'market-cap'
|
||||
? 'bg-[#75D377]'
|
||||
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]"
|
||||
/>
|
||||
</li>
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/statistics/employees`}
|
||||
on:click={() => changeSubSection("employees")}
|
||||
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
|
||||
'employees'
|
||||
? 'text-white '
|
||||
: 'bg-[#09090B]'}"
|
||||
>
|
||||
Employees
|
||||
</a>
|
||||
<div
|
||||
class="{displaySubSection === 'employees'
|
||||
? 'bg-[#75D377]'
|
||||
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.scrollbar {
|
||||
display: grid;
|
||||
grid-gap: 18px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
|
||||
grid-auto-flow: column;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin; /* Hide the default scrollbar in Firefox */
|
||||
scrollbar-color: transparent transparent; /* Hide the default scrollbar in Firefox */
|
||||
}
|
||||
|
||||
/* Custom scrollbar for Webkit (Chrome, Safari) */
|
||||
.scrollbar::-webkit-scrollbar {
|
||||
width: 0; /* Hide the width of the scrollbar */
|
||||
height: 0; /* Hide the height of the scrollbar */
|
||||
}
|
||||
|
||||
.scrollbar::-webkit-scrollbar-thumb {
|
||||
background: transparent; /* Make the thumb transparent */
|
||||
}
|
||||
</style>
|
||||
@ -25,30 +25,9 @@ export const load = async ({ locals, params }) => {
|
||||
return output;
|
||||
};
|
||||
|
||||
const getRevenueSegmentation = async () => {
|
||||
const postData = {
|
||||
ticker: params.tickerID,
|
||||
};
|
||||
|
||||
// make the POST request to the endpoint
|
||||
const response = await fetch(apiURL + "/revenue-segmentation", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-API-KEY": apiKey,
|
||||
},
|
||||
body: JSON.stringify(postData),
|
||||
});
|
||||
|
||||
const output = await response.json();
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
// Make sure to return a promise
|
||||
return {
|
||||
getQuantStats: await getQuantStats(),
|
||||
getRevenueSegmentation: await getRevenueSegmentation(),
|
||||
};
|
||||
};
|
||||
|
||||
@ -56,7 +35,7 @@ export const actions = {
|
||||
login: async ({ request, locals }) => {
|
||||
const { formData, errors } = await validateData(
|
||||
await request.formData(),
|
||||
loginUserSchema
|
||||
loginUserSchema,
|
||||
);
|
||||
|
||||
if (errors) {
|
||||
@ -90,7 +69,7 @@ export const actions = {
|
||||
register: async ({ locals, request }) => {
|
||||
const { formData, errors } = await validateData(
|
||||
await request.formData(),
|
||||
registerUserSchema
|
||||
registerUserSchema,
|
||||
);
|
||||
|
||||
if (errors) {
|
||||
@ -144,7 +123,7 @@ await locals.pb?.collection('users').update(
|
||||
const redirectURL = `${url.origin}/oauth`;
|
||||
|
||||
const targetItem = authMethods.authProviders?.findIndex(
|
||||
(item) => item?.name === providerSelected
|
||||
(item) => item?.name === providerSelected,
|
||||
);
|
||||
//console.log("==================")
|
||||
//console.log(authMethods.authProviders)
|
||||
996
src/routes/stocks/[tickerID]/statistics/+page.svelte
Normal file
996
src/routes/stocks/[tickerID]/statistics/+page.svelte
Normal file
@ -0,0 +1,996 @@
|
||||
<script lang="ts">
|
||||
import Lazy from "$lib/components/Lazy.svelte";
|
||||
import ReturnCard from "$lib/components/ReturnCard.svelte";
|
||||
import {
|
||||
numberOfUnreadNotification,
|
||||
displayCompanyName,
|
||||
screenWidth,
|
||||
stockTicker,
|
||||
revenueSegmentationComponent,
|
||||
} from "$lib/store";
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
|
||||
export let data;
|
||||
|
||||
let quantStats = {};
|
||||
|
||||
// Function to check if a date is today or yesterday, adjusting for weekends
|
||||
function ongoingDD(dateString: string) {
|
||||
const date = new Date(dateString);
|
||||
const today = new Date();
|
||||
const yesterday = new Date(today);
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
|
||||
// Adjust today to Friday if it's Saturday or Sunday
|
||||
if (today.getDay() === 6) {
|
||||
// Saturday
|
||||
today.setDate(today.getDate() - 1); // Set to Friday
|
||||
} else if (today.getDay() === 0) {
|
||||
// Sunday
|
||||
today.setDate(today.getDate() - 2); // Set to Friday
|
||||
}
|
||||
|
||||
return (
|
||||
(date.getDate() === today.getDate() &&
|
||||
date.getMonth() === today.getMonth() &&
|
||||
date.getFullYear() === today.getFullYear()) ||
|
||||
(date.getDate() === yesterday.getDate() &&
|
||||
date.getMonth() === yesterday.getMonth() &&
|
||||
date.getFullYear() === yesterday.getFullYear())
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
let progressDayPriceValue = 0;
|
||||
let progressYearPriceValue = 0;
|
||||
let totalDuration = 500;
|
||||
|
||||
async function updateDayRange() {
|
||||
|
||||
const interval = 10; // interval between each update in ms
|
||||
const increment = (currentPrice / (totalDuration / interval));
|
||||
|
||||
if (progressDayPriceValue < currentPrice) {
|
||||
progressDayPriceValue = progressDayPriceValue + increment;
|
||||
setTimeout(updateDayRange, interval);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
async function updateYearRange() {
|
||||
|
||||
const interval = 10; // interval between each update in ms
|
||||
const increment = (currentPrice / (totalDuration / interval));
|
||||
|
||||
if (progressYearPriceValue < currentPrice) {
|
||||
progressYearPriceValue = progressYearPriceValue + increment;
|
||||
setTimeout(updateYearRange, interval);
|
||||
}
|
||||
};
|
||||
|
||||
*/
|
||||
|
||||
quantStats = data?.getQuantStats ?? {};
|
||||
|
||||
/*
|
||||
updateDayRange()
|
||||
updateYearRange()
|
||||
*/
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
|
||||
{$displayCompanyName} ({$stockTicker}) Statistics & Valuation Metrics ·
|
||||
stocknear
|
||||
</title>
|
||||
<meta
|
||||
name="description"
|
||||
content={`Detailed statistics for ${$displayCompanyName} (${$stockTicker}) stock, including valuation, metrics, financial numbers, share information and more.`}
|
||||
/>
|
||||
|
||||
<!-- Other meta tags -->
|
||||
<meta
|
||||
property="og:title"
|
||||
content={`${$displayCompanyName} (${$stockTicker}) Statistics & Valuation Metrics · stocknear`}
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content={`Detailed statistics for ${$displayCompanyName} (${$stockTicker}) stock, including valuation, metrics, financial numbers, share information and more.`}
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
|
||||
<!-- Twitter specific meta tags -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta
|
||||
name="twitter:title"
|
||||
content={`${$displayCompanyName} (${$stockTicker}) Statistics & Valuation Metrics · stocknear`}
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content={`Detailed statistics for ${$displayCompanyName} (${$stockTicker}) stock, including valuation, metrics, financial numbers, share information and more.`}
|
||||
/>
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
|
||||
<section class="text-white w-full">
|
||||
<div class="sm:p-7 m-auto mt-7 sm:mt-0">
|
||||
<div class="mb-6">
|
||||
{#if Object?.keys(quantStats)?.length !== 0}
|
||||
<div
|
||||
class="space-y-5 xs:space-y-6 lg:grid xl:grid-cols-2 xl:space-x-10 lg:space-y-0"
|
||||
>
|
||||
<div class="flex flex-col space-y-5 xs:space-y-6 lg:space-y-8">
|
||||
<div
|
||||
class="-mb-2 flex items-start justify-between border-b border-gray-500 md:-mb-4"
|
||||
>
|
||||
<h1 class="mb-3 text-2xl font-bold">Tesla Statistics</h1>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">
|
||||
Total Valuation
|
||||
</h2>
|
||||
<p
|
||||
class="mb-4 px-0.5 text-base leading-relaxed text-white xs:text-[1.05rem] lg:leading-normal"
|
||||
>
|
||||
Tesla has a market cap or net worth of $832.14 billion. The
|
||||
enterprise value is $812.05 billion.
|
||||
</p>
|
||||
<table class="w-full">
|
||||
<tbody
|
||||
><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><a
|
||||
class="dothref text-default"
|
||||
href="/stocks/tsla/market-cap/">Market Cap</a
|
||||
></td
|
||||
>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="832,139,935,299">832.14B</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Enterprise Value</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="812,053,935,299">812.05B</td
|
||||
>
|
||||
</tr></tbody
|
||||
>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">
|
||||
Important Dates
|
||||
</h2>
|
||||
<p
|
||||
class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal"
|
||||
>
|
||||
The last earnings date was Wednesday, October 23, 2024, after
|
||||
market close.
|
||||
</p>
|
||||
<table class="w-full">
|
||||
<tbody
|
||||
><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Earnings Date</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="Oct 23, 2024">Oct 23, 2024</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Ex-Dividend Date</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="n/a">n/a</td
|
||||
>
|
||||
</tr></tbody
|
||||
>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">
|
||||
Share Statistics
|
||||
</h2>
|
||||
<p
|
||||
class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal"
|
||||
>
|
||||
Tesla has 3.19 billion shares outstanding. The number of shares
|
||||
has increased by 0.31% in one year.
|
||||
</p>
|
||||
<table class="w-full">
|
||||
<tbody
|
||||
><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Shares Outstanding</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
|
||||
title="3,194,640,415">3.19B</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Shares Change (YoY)</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
|
||||
title="0.309%">+0.31%</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Shares Change (QoQ)</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
|
||||
title="0.460%">+0.46%</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Owned by Insiders (%)</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
|
||||
title="12.963%">12.96%</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Owned by Institutions (%)</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
|
||||
title="45.989%">45.99%</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Float</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
|
||||
title="2,777,647,654">2.78B</td
|
||||
>
|
||||
</tr></tbody
|
||||
>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">
|
||||
Valuation Ratios
|
||||
</h2>
|
||||
<p
|
||||
class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal"
|
||||
>
|
||||
The trailing PE ratio is 71.41 and the forward PE ratio is
|
||||
86.99. Tesla's PEG ratio is 5.94.
|
||||
</p>
|
||||
|
||||
<table class="w-full">
|
||||
<tbody
|
||||
><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>PE Ratio</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="71.411">71.41</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Forward PE</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="86.986">86.99</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>PS Ratio</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="8.552">8.55</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Forward PS</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="7.500">7.50</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>PB Ratio</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="11.945">11.95</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>P/FCF Ratio</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="230.510">230.51</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>PEG Ratio</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="5.941">5.94</td
|
||||
>
|
||||
</tr></tbody
|
||||
>
|
||||
</table>
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/financials/ratios`}
|
||||
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-lg text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100"
|
||||
>
|
||||
Financial Ratio History
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">
|
||||
Enterprise Valuation
|
||||
</h2>
|
||||
<p
|
||||
class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal"
|
||||
>
|
||||
The stock's EV/EBITDA ratio is 61.31, with an EV/FCF ratio of
|
||||
224.95.
|
||||
</p>
|
||||
<table class="w-full">
|
||||
<tbody
|
||||
><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>EV / Earnings</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="63.73">63.73</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>EV / Sales</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="8.36">8.36</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>EV / EBITDA</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="61.31">61.31</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>EV / EBIT</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="99.76">99.76</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>EV / FCF</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="224.95">224.95</td
|
||||
>
|
||||
</tr></tbody
|
||||
>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">
|
||||
Financial Position
|
||||
</h2>
|
||||
<p
|
||||
class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal"
|
||||
>
|
||||
The company has a current ratio of 1.84, with a Debt / Equity
|
||||
ratio of 0.18.
|
||||
</p>
|
||||
<table class="w-full">
|
||||
<tbody
|
||||
><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Current Ratio</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="1.844">1.84</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Quick Ratio</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="1.214">1.21</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Debt / Equity</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="0.18">0.18</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Debt / EBITDA</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="0.87">0.87</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Debt / FCF</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="3.54">3.54</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Interest Coverage</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="25.841">25.84</td
|
||||
>
|
||||
</tr></tbody
|
||||
>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">
|
||||
Financial Efficiency
|
||||
</h2>
|
||||
<p
|
||||
class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal"
|
||||
>
|
||||
Return on equity (ROE) is 20.39% and return on invested capital
|
||||
(ROIC) is 6.96%.
|
||||
</p>
|
||||
<table class="w-full">
|
||||
<tbody
|
||||
><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Return on Equity (ROE)</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="20.389%">20.39%</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Return on Assets (ROA)</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="4.759%">4.76%</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Return on Capital (ROIC)</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="6.961%">6.96%</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Revenue Per Employee</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="691,592">$691,592</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Profits Per Employee</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="90,715">$90,715</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><a
|
||||
class="dothref text-default"
|
||||
href="/stocks/tsla/employees/">Employee Count</a
|
||||
></td
|
||||
>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="140,473">140,473</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Asset Turnover</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="0.909">0.91</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Inventory Turnover</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="5.624">5.62</td
|
||||
>
|
||||
</tr></tbody
|
||||
>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">Taxes</h2>
|
||||
<table class="w-full">
|
||||
<tbody
|
||||
><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Income Tax</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="-4.35B">-4.35B</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Effective Tax Rate</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="n/a">n/a</td
|
||||
>
|
||||
</tr></tbody
|
||||
>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-5 xs:space-y-6 lg:space-y-8">
|
||||
<div>
|
||||
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">
|
||||
Stock Price Statistics
|
||||
</h2>
|
||||
<p
|
||||
class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal"
|
||||
>
|
||||
The stock price has increased by +22.82% in the last 52 weeks.
|
||||
The beta is 2.30, so Tesla's price volatility has been higher
|
||||
than the market average.
|
||||
</p>
|
||||
<table class="w-full">
|
||||
<tbody
|
||||
><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Beta (5Y)</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="2.297">2.30</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>52-Week Price Change</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="22.82%">+22.82%</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>50-Day Moving Average</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="229.468">229.47</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>200-Day Moving Average</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="201.395">201.40</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Relative Strength Index (RSI)</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="64.905">64.91</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Average Volume (20 Days)</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="79,477,783">79,477,783</td
|
||||
>
|
||||
</tr></tbody
|
||||
>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">
|
||||
Short Selling Information
|
||||
</h2>
|
||||
<p
|
||||
class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal"
|
||||
>
|
||||
The latest short interest is 74.33 million, so 2.33% of the
|
||||
outstanding shares have been sold short.
|
||||
</p>
|
||||
<table class="w-full">
|
||||
<tbody
|
||||
><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Short Interest</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="74,332,630">74.33M</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Short Previous Month</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="77,219,507">77.22M</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Short % of Shares Out</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="2.327%">2.33%</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Short % of Float</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="2.676%">2.68%</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Short Ratio (days to cover)</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="0.930">0.93</td
|
||||
>
|
||||
</tr></tbody
|
||||
>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">
|
||||
Income Statement
|
||||
</h2>
|
||||
<p
|
||||
class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal"
|
||||
>
|
||||
In the last 12 months, Tesla had revenue of $97.15 billion and
|
||||
earned $12.74 billion in profits. Earnings per share was $3.65.
|
||||
</p>
|
||||
<table class="w-full">
|
||||
<tbody
|
||||
><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><a
|
||||
class="dothref text-default"
|
||||
href="/stocks/tsla/revenue/">Revenue</a
|
||||
></td
|
||||
>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="97,150,000,000">97.15B</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Gross Profit</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="17,709,000,000">17.71B</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Operating Income</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="8,140,000,000">8.14B</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Pretax Income</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="7,605,000,000">7.61B</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Net Income</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="12,743,000,000">12.74B</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>EBITDA</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="13,244,000,000">13.24B</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>EBIT</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="8,140,000,000">8.14B</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Earnings Per Share (EPS)</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="3.648">$3.65</td
|
||||
>
|
||||
</tr></tbody
|
||||
>
|
||||
</table>
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/financials`}
|
||||
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-lg text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100"
|
||||
>
|
||||
Full Income Statement
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">
|
||||
Balance Sheet
|
||||
</h2>
|
||||
<p
|
||||
class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal"
|
||||
>
|
||||
The company has $33.65 billion in cash and $12.78 billion in
|
||||
debt, giving a net cash position of $20.87 billion or $6.53 per
|
||||
share.
|
||||
</p>
|
||||
<table class="w-full">
|
||||
<tbody
|
||||
><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Cash & Cash Equivalents</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="33,648,000,000">33.65B</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Total Debt</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="12,783,000,000">12.78B</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Net Cash</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="20,865,000,000">20.87B</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Net Cash Per Share</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="6.531">$6.53</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Equity (Book Value)</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="70,710,000,000">70.71B</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Book Value Per Share</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="21.806">21.81</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Working Capital</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="25,802,000,000">25.80B</td
|
||||
>
|
||||
</tr></tbody
|
||||
>
|
||||
</table>
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/financials/balance-sheet`}
|
||||
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-lg text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100"
|
||||
>
|
||||
Full Balance Sheet
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">
|
||||
Cash Flow
|
||||
</h2>
|
||||
<p
|
||||
class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal"
|
||||
>
|
||||
In the last 12 months, operating cash flow was $14.48 billion
|
||||
and capital expenditures -$10.87 billion, giving a free cash
|
||||
flow of $3.61 billion.
|
||||
</p>
|
||||
<table class="w-full">
|
||||
<tbody
|
||||
><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Operating Cash Flow</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="14,479,000,000">14.48B</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Capital Expenditures</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="-10,869,000,000">-10.87B</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Free Cash Flow</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="3,610,000,000">3.61B</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>FCF Per Share</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="1.130">$1.13</td
|
||||
>
|
||||
</tr></tbody
|
||||
>
|
||||
</table>
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/financials/cash-flow`}
|
||||
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-lg text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100"
|
||||
>
|
||||
Full Cash Flow Statement
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">Margins</h2>
|
||||
<p
|
||||
class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal"
|
||||
>
|
||||
Gross margin is 18.23%, with operating and profit margins of
|
||||
8.38% and 13.07%.
|
||||
</p>
|
||||
<table class="w-full">
|
||||
<tbody
|
||||
><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Gross Margin</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="18.229%">18.23%</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Operating Margin</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="8.379%">8.38%</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Pretax Margin</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="8.662%">8.66%</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Profit Margin</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="13.075%">13.07%</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>EBITDA Margin</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="13.633%">13.63%</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>EBIT Margin</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="8.379%">8.38%</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>FCF Margin</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="1.801%">1.80%</td
|
||||
>
|
||||
</tr></tbody
|
||||
>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<h2
|
||||
class=" mt-16 flex justify-center items-center text-3xl font-medium text-slate-700 mb-5 m-auto"
|
||||
>
|
||||
No data available
|
||||
</h2>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -1,148 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { stockTicker, screenWidth } from "$lib/store";
|
||||
import { page } from "$app/stores";
|
||||
|
||||
let displaySubSection = "overview";
|
||||
|
||||
if (displaySubSection) {
|
||||
const parts = $page?.url?.pathname.split("/");
|
||||
const sectionMap = {
|
||||
"market-cap": "market-cap",
|
||||
employees: "employees",
|
||||
income: "income",
|
||||
"balance-sheet": "balance-sheet",
|
||||
"cash-flow": "cash-flow",
|
||||
ratios: "ratios",
|
||||
};
|
||||
|
||||
const foundSection = parts?.find((part) => Object?.values(sectionMap)?.includes(part));
|
||||
|
||||
displaySubSection = Object?.keys(sectionMap)?.find((key) => sectionMap[key] === foundSection) || "overview";
|
||||
}
|
||||
|
||||
function changeSubSection(state) {
|
||||
const subSectionMap = {
|
||||
"market-cap": "/stats/market-cap",
|
||||
employees: "/stats/employees",
|
||||
income: "/stats/income",
|
||||
"balance-sheet": "/stats/balance-sheet",
|
||||
"cash-flow": "/stats/cash-flow",
|
||||
ratios: "/stats/ratios",
|
||||
};
|
||||
|
||||
if (state !== "overview" && subSectionMap[state]) {
|
||||
displaySubSection = state;
|
||||
//goto(`/stocks/${$stockTicker}${subSectionMap[state]}`);
|
||||
} else {
|
||||
displaySubSection = state;
|
||||
//goto(`/stocks/${$stockTicker}/stats`);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
|
||||
<div class="m-auto h-full overflow-hidden">
|
||||
<main class="w-fit sm:w-full sm:max-w-2xl">
|
||||
<div class="m-auto">
|
||||
<div class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640 ? 'overflow-auto scrollbar' : 'no-scrollbar'} mb-2">
|
||||
<ul class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2">
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/stats`}
|
||||
on:click={() => changeSubSection("overview")}
|
||||
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'overview' ? 'text-white ' : 'bg-[#09090B]'}"
|
||||
>
|
||||
Overview
|
||||
</a>
|
||||
<div class="{displaySubSection === 'overview' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]" />
|
||||
</li>
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/stats/ratios`}
|
||||
on:click={() => changeSubSection("ratios")}
|
||||
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'ratios' ? 'text-white ' : 'bg-[#09090B]'}"
|
||||
>
|
||||
Ratios
|
||||
</a>
|
||||
<div class="{displaySubSection === 'ratios' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]" />
|
||||
</li>
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/stats/income`}
|
||||
on:click={() => changeSubSection("income")}
|
||||
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'income' ? 'text-white ' : 'bg-[#09090B]'}"
|
||||
>
|
||||
Income
|
||||
</a>
|
||||
<div class="{displaySubSection === 'income' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]" />
|
||||
</li>
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/stats/cash-flow`}
|
||||
on:click={() => changeSubSection("cash-flow")}
|
||||
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'cash-flow' ? 'text-white ' : 'bg-[#09090B]'}"
|
||||
>
|
||||
Cashflow
|
||||
</a>
|
||||
<div class="{displaySubSection === 'cash-flow' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]" />
|
||||
</li>
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/stats/balance-sheet`}
|
||||
on:click={() => changeSubSection("balance-sheet")}
|
||||
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'balance-sheet' ? 'text-white ' : 'bg-[#09090B]'}"
|
||||
>
|
||||
Balance
|
||||
</a>
|
||||
<div class="{displaySubSection === 'balance-sheet' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]" />
|
||||
</li>
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/stats/market-cap`}
|
||||
on:click={() => changeSubSection("market-cap")}
|
||||
class="whitespace-nowrap px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'market-cap' ? 'text-white ' : 'bg-[#09090B]'}"
|
||||
>
|
||||
Market Cap
|
||||
</a>
|
||||
<div class="{displaySubSection === 'market-cap' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]" />
|
||||
</li>
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/stats/employees`}
|
||||
on:click={() => changeSubSection("employees")}
|
||||
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'employees' ? 'text-white ' : 'bg-[#09090B]'}"
|
||||
>
|
||||
Employees
|
||||
</a>
|
||||
<div class="{displaySubSection === 'employees' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.scrollbar {
|
||||
display: grid;
|
||||
grid-gap: 18px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
|
||||
grid-auto-flow: column;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin; /* Hide the default scrollbar in Firefox */
|
||||
scrollbar-color: transparent transparent; /* Hide the default scrollbar in Firefox */
|
||||
}
|
||||
|
||||
/* Custom scrollbar for Webkit (Chrome, Safari) */
|
||||
.scrollbar::-webkit-scrollbar {
|
||||
width: 0; /* Hide the width of the scrollbar */
|
||||
height: 0; /* Hide the height of the scrollbar */
|
||||
}
|
||||
|
||||
.scrollbar::-webkit-scrollbar-thumb {
|
||||
background: transparent; /* Make the thumb transparent */
|
||||
}
|
||||
</style>
|
||||
@ -1,923 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Lazy from "$lib/components/Lazy.svelte";
|
||||
import ReturnCard from "$lib/components/ReturnCard.svelte";
|
||||
import { numberOfUnreadNotification, displayCompanyName, screenWidth, stockTicker, revenueSegmentationComponent } from "$lib/store";
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
import RevenueSegmentation from "$lib/components/RevenueSegmentation.svelte";
|
||||
|
||||
export let data;
|
||||
|
||||
let quantStats = {};
|
||||
|
||||
|
||||
// Function to check if a date is today or yesterday, adjusting for weekends
|
||||
function ongoingDD(dateString: string) {
|
||||
const date = new Date(dateString);
|
||||
const today = new Date();
|
||||
const yesterday = new Date(today);
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
|
||||
// Adjust today to Friday if it's Saturday or Sunday
|
||||
if (today.getDay() === 6) {
|
||||
// Saturday
|
||||
today.setDate(today.getDate() - 1); // Set to Friday
|
||||
} else if (today.getDay() === 0) {
|
||||
// Sunday
|
||||
today.setDate(today.getDate() - 2); // Set to Friday
|
||||
}
|
||||
|
||||
return date.getDate() === today.getDate() &&
|
||||
date.getMonth() === today.getMonth() &&
|
||||
date.getFullYear() === today.getFullYear() ||
|
||||
date.getDate() === yesterday.getDate() &&
|
||||
date.getMonth() === yesterday.getMonth() &&
|
||||
date.getFullYear() === yesterday.getFullYear();
|
||||
}
|
||||
|
||||
/*
|
||||
let progressDayPriceValue = 0;
|
||||
let progressYearPriceValue = 0;
|
||||
let totalDuration = 500;
|
||||
|
||||
async function updateDayRange() {
|
||||
|
||||
const interval = 10; // interval between each update in ms
|
||||
const increment = (currentPrice / (totalDuration / interval));
|
||||
|
||||
if (progressDayPriceValue < currentPrice) {
|
||||
progressDayPriceValue = progressDayPriceValue + increment;
|
||||
setTimeout(updateDayRange, interval);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
async function updateYearRange() {
|
||||
|
||||
const interval = 10; // interval between each update in ms
|
||||
const increment = (currentPrice / (totalDuration / interval));
|
||||
|
||||
if (progressYearPriceValue < currentPrice) {
|
||||
progressYearPriceValue = progressYearPriceValue + increment;
|
||||
setTimeout(updateYearRange, interval);
|
||||
}
|
||||
};
|
||||
|
||||
*/
|
||||
|
||||
|
||||
|
||||
quantStats = data?.getQuantStats ?? {};
|
||||
|
||||
|
||||
|
||||
/*
|
||||
updateDayRange()
|
||||
updateYearRange()
|
||||
*/
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
|
||||
{$displayCompanyName} ({$stockTicker}) Statistics & Valuation Metrics · stocknear
|
||||
</title>
|
||||
<meta name="description" content={`Detailed statistics for ${$displayCompanyName} (${$stockTicker}) stock, including valuation, metrics, financial numbers, share information and more.`} />
|
||||
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Statistics & Valuation Metrics · stocknear`} />
|
||||
<meta property="og:description" content={`Detailed statistics for ${$displayCompanyName} (${$stockTicker}) stock, including valuation, metrics, financial numbers, share information and more.`} />
|
||||
<meta property="og:type" content="website" />
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
|
||||
<!-- Twitter specific meta tags -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Statistics & Valuation Metrics · stocknear`} />
|
||||
<meta name="twitter:description" content={`Detailed statistics for ${$displayCompanyName} (${$stockTicker}) stock, including valuation, metrics, financial numbers, share information and more.`} />
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
|
||||
<section class="text-white w-full">
|
||||
<div class="sm:p-7 m-auto">
|
||||
<div class="mb-6">
|
||||
<h1 class="text-2xl sm:text-3xl text-white font-bold mb-5">Fundamental Data</h1>
|
||||
|
||||
<div class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
|
||||
<svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
|
||||
><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16" /></svg
|
||||
>
|
||||
Get detailed Fundamental insights of {$displayCompanyName} and compare it to the S&P500.
|
||||
</div>
|
||||
|
||||
{#if Object?.keys(quantStats)?.length !== 0}
|
||||
<!--Start Widget-->
|
||||
<div class="w-full mt-5 mb-5 flex justify-center items-center">
|
||||
<div class="w-full grid grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-y-3 gap-x-3">
|
||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#09090B] border border-gray-800 rounded-lg h-auto">
|
||||
<div class="flex flex-col items-center w-full p-3">
|
||||
<span class="font-medium text-white text-xl font-semibold">YTD Return</span>
|
||||
<div class="grid grid-cols-3 w-full mt-2">
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-center text-white font-semibold">{$stockTicker}</span>
|
||||
<span class="text-center text-[1rem] sm:text-lg font-semibold mt-1">
|
||||
{#if quantStats[$stockTicker?.toUpperCase()]["YTD %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["YTD %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#F71F4F]">{quantStats[$stockTicker?.toUpperCase()]["YTD %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-center text-white">vs.</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-center text-white font-semibold">SPY</span>
|
||||
<span class="text-center text-[1rem] sm:text-lg font-semibold mt-1">
|
||||
{#if quantStats["SPY"]["YTD %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats["SPY"]["YTD %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#F71F4F]">{quantStats["SPY"]["YTD %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#09090B] border border-gray-800 rounded-lg h-auto">
|
||||
<div class="flex flex-col items-center w-full p-3">
|
||||
<span class="font-medium text-white text-xl font-semibold">1-Year Return</span>
|
||||
<div class="grid grid-cols-3 w-full mt-2">
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-center text-white font-semibold">{$stockTicker}</span>
|
||||
<span class="text-center text-[1rem] sm:text-lg font-semibold mt-1">
|
||||
{#if quantStats[$stockTicker?.toUpperCase()]["1Y %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["1Y %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#F71F4F]">{quantStats[$stockTicker?.toUpperCase()]["1Y %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-center text-white">vs.</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-center text-white font-semibold">SPY</span>
|
||||
<span class="text-center text-[1rem] sm:text-lg font-semibold mt-1">
|
||||
{#if quantStats["SPY"]["1Y %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats["SPY"]["1Y %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#F71F4F]">{quantStats["SPY"]["1Y %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#09090B] border border-gray-800 rounded-lg h-auto">
|
||||
<div class="flex flex-col items-center w-full p-3">
|
||||
<span class="font-medium text-white text-xl font-semibold">3-Year Return</span>
|
||||
<div class="grid grid-cols-3 w-full mt-2">
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-center text-white font-semibold">{$stockTicker}</span>
|
||||
<span class="text-center text-[1rem] sm:text-lg font-semibold mt-1">
|
||||
{#if quantStats[$stockTicker?.toUpperCase()]["3Y (ann.) %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["3Y (ann.) %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#F71F4F]">{quantStats[$stockTicker?.toUpperCase()]["3Y (ann.) %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-center text-white">vs.</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-center text-white font-semibold">SPY</span>
|
||||
<span class="text-center text-[1rem] sm:text-lg font-semibold mt-1">
|
||||
{#if quantStats["SPY"]["3Y (ann.) %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats["SPY"]["3Y (ann.) %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#F71F4F]">{quantStats["SPY"]["3Y (ann.) %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--End Widget-->
|
||||
|
||||
<!--Start RevenueSegmentation-->
|
||||
<Lazy>
|
||||
<div class="w-full pt-10 sm:pb-6 sm:pt-6 m-auto {!$revenueSegmentationComponent ? 'hidden' : ''}">
|
||||
<RevenueSegmentation userTier={data?.user?.tier} revenueSegmentation={data?.getRevenueSegmentation}/>
|
||||
</div>
|
||||
</Lazy>
|
||||
<!--End RevenueSegmentation-->
|
||||
|
||||
<div class="grid grid-cols-1 gap-2 mt-10">
|
||||
|
||||
|
||||
|
||||
{#if $stockTicker in quantStats && Object.keys(quantStats[$stockTicker]).length > 0}
|
||||
<h3 class="text-start w-full mb-2 text-lg sm:text-2xl font-bold text-white">
|
||||
Worst 10 Drawdowns of {$stockTicker}
|
||||
</h3>
|
||||
<div class="w-full overflow-x-scroll">
|
||||
<table class="table table-sm table-pin-rows table-compact text-start w-full flex justify-start items-center m-auto">
|
||||
<thead>
|
||||
<tr class="bg-[#09090B] border-slate-800 rounded text-white font-semibold">
|
||||
<th class="text-start text-sm sm:text-[1rem]">Started</th>
|
||||
<th class="text-sm sm:text-[1rem] text-end">Recovered</th>
|
||||
<th class="text-sm sm:text-[1rem] text-end">Drawdown</th>
|
||||
<th class="text-sm sm:text-[1rem] text-end">Days</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="shadow-md">
|
||||
{#each quantStats[$stockTicker?.toUpperCase()]["Worst 10 Drawdowns"] as item}
|
||||
<tr class="text-white border-y border-gray-800 odd:bg-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] text-white whitespace-nowrap">
|
||||
{new Date(item["Started"]).toLocaleString("en-US", { month: "short", day: "numeric", year: "numeric", daySuffix: "2-digit" })}
|
||||
</td>
|
||||
<td class="text-sm sm:text-[1rem] text-white text-end whitespace-nowrap">
|
||||
{#if ongoingDD(item["Recovered"]) === true}
|
||||
continuing
|
||||
{:else}
|
||||
{new Date(item["Recovered"]).toLocaleString("en-US", { month: "short", day: "numeric", year: "numeric", daySuffix: "2-digit" })}
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-start font-semibold text-white text-end text-sm sm:text-[1rem]">
|
||||
{item["Drawdown"]?.toFixed(2)}%
|
||||
</td>
|
||||
<td class="text-end font-semibold text-white text-sm sm:text-[1rem]">
|
||||
{item["Days"]}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h2 class="text-start ml-2 text-lg sm:text-2xl font-bold text-white mt-8">
|
||||
{$stockTicker} vs. S&P500
|
||||
</h2>
|
||||
|
||||
<p class="ml-2 text-[1rem] flex justify-start items-center m-auto text-white">Comparison of company stats against the S&P500 Index.</p>
|
||||
|
||||
<span class="ml-2 text-start italic text-sm text-gray-300 mt-5 mb-2 sm:mb-5">
|
||||
Time Period between {new Date(quantStats[$stockTicker?.toUpperCase()]["Start Period"]).toLocaleString("en-US", { month: "long", day: "numeric", year: "numeric", daySuffix: "2-digit" })}
|
||||
-
|
||||
{new Date(quantStats[$stockTicker?.toUpperCase()]["End Period"]).toLocaleString("en-US", { month: "long", day: "numeric", year: "numeric", daySuffix: "2-digit" })}
|
||||
</span>
|
||||
|
||||
<ReturnCard quantData={quantStats} />
|
||||
|
||||
<div class="flex flex-col justify-center items-center w-full m-auto overflow-x-scroll no-scrollbar">
|
||||
<table class="table table-sm table-pin-rows table-compact text-start w-full flex justify-start items-center w-full m-auto">
|
||||
<thead>
|
||||
<tr class="bg-[#09090B] text-white text-sm ">
|
||||
<th class="text-start text-sm sm:text-[1rem] font-semibold"> Metric </th>
|
||||
<th class="text-end bg-[#09090B] text-sm sm:text-[1rem] font-semibold">
|
||||
{$stockTicker}
|
||||
</th>
|
||||
<th class="text-end text-sm sm:text-[1rem] font-semibold"> S&P500 </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Cumulative Return </td>
|
||||
<td class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats[$stockTicker?.toUpperCase()]["Cumulative Return %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{abbreviateNumber(quantStats[$stockTicker?.toUpperCase()]["Cumulative Return %"])}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{abbreviateNumber(quantStats[$stockTicker?.toUpperCase()]["Cumulative Return %"])}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats["SPY"]["Cumulative Return %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats["SPY"]["Cumulative Return %"]}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats["SPY"]["Cumulative Return %"]}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Compound Annual Growth Rate (CAGR) </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats[$stockTicker?.toUpperCase()]["CAGR %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["CAGR %"]}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["CAGR %"]}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats["SPY"]["CAGR %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats["SPY"]["CAGR %"]}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats["SPY"]["CAGR %"]}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Sharpe </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Sharpe"]?.toFixed(2)}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Sharpe"]?.toFixed(2)}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Sortino </td>
|
||||
<td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Sortino"]?.toFixed(2)}
|
||||
</td>
|
||||
<td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Sortino"]?.toFixed(2)}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Max Drawdown </td>
|
||||
<td class="text-start text-white text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats[$stockTicker?.toUpperCase()]["Max Drawdown"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Max Drawdown"]}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Max Drawdown"]}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats["SPY"]["Max Drawdown"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats["SPY"]["Max Drawdown"]}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats["SPY"]["Max Drawdown"]}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Longest Drawdown Days </td>
|
||||
<td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Longest DD Days"]}
|
||||
</td>
|
||||
<td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Longest DD Days"]}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Volatility (ann.) </td>
|
||||
<td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Volatility (ann.) %"]}%
|
||||
</td>
|
||||
<td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Volatility (ann.) %"]}%
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Correlation </td>
|
||||
<td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Correlation"]}%
|
||||
</td>
|
||||
<td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Correlation"]}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> R^2 </td>
|
||||
<td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["R^2"]}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["R^2"]}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Calmar </td>
|
||||
<td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Calmar"]}
|
||||
</td>
|
||||
<td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Calmar"]}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Skew </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Skew"]?.toFixed(2)}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Skew"]?.toFixed(2)}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Kurtosis </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Kurtosis"]?.toFixed(2)}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Kurtosis"]?.toFixed(2)}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-starttext-sm sm:text-[1rem] whitespace-nowrap"> Expected Daily </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats[$stockTicker?.toUpperCase()]["Expected Daily %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Expected Daily %"]}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Expected Daily %"]}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats["SPY"]["Expected Daily %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats["SPY"]["Expected Daily %"]}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats["SPY"]["Expected Daily %"]}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Expected Monthly </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats[$stockTicker?.toUpperCase()]["Expected Monthly %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Expected Monthly %"]}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Expected Monthly %"]}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats["SPY"]["Expected Monthly %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats["SPY"]["Expected Monthly %"]}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats["SPY"]["Expected Monthly %"]}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Expected Yearly </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats[$stockTicker?.toUpperCase()]["Expected Yearly %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Expected Yearly %"]}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Expected Yearly %"]}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats["SPY"]["Expected Yearly %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats["SPY"]["Expected Yearly %"]}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats["SPY"]["Expected Yearly %"]}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Kelly Criterion </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Kelly Criterion %"]}%
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Kelly Criterion %"]}%
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Risk of Ruin </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Risk of Ruin %"]}%
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Risk of Ruin %"]}%
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Daily Value-at-Risk </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats[$stockTicker?.toUpperCase()]["Daily Value-at-Risk %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Daily Value-at-Risk %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Daily Value-at-Risk %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats["SPY"]["Daily Value-at-Risk %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats["SPY"]["Daily Value-at-Risk %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats["SPY"]["Daily Value-at-Risk %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Expected Shortfall (cVaR) </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats[$stockTicker?.toUpperCase()]["Expected Shortfall (cVaR) %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Expected Shortfall (cVaR) %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Expected Shortfall (cVaR) %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats["SPY"]["Expected Shortfall (cVaR) %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats["SPY"]["Expected Shortfall (cVaR) %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats["SPY"]["Expected Shortfall (cVaR) %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Max Consecutive Wins </td>
|
||||
<td class="text-start text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Max Consecutive Wins"]}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Max Consecutive Wins"]}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Max Consecutive Losses </td>
|
||||
<td class="text-start text-end text-sm sm:text-[1rem]">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Max Consecutive Losses"]}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Max Consecutive Losses"]}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-starttext-sm sm:text-[1rem] whitespace-nowrap"> Gain/Pain Ratio </td>
|
||||
<td class="text-start text-end text-sm sm:text-[1rem]">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Gain/Pain Ratio"]?.toFixed(2)}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Gain/Pain Ratio"]?.toFixed(2)}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Gain/Pain (1M) </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Gain/Pain (1M)"]?.toFixed(2)}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Gain/Pain (1M)"]?.toFixed(2)}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Payoff Ratio </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Payoff Ratio"]?.toFixed(2)}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Payoff Ratio"]?.toFixed(2)}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Profit Factor </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Profit Factor"]?.toFixed(2)}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Profit Factor"]?.toFixed(2)}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Outlier Win Ratio </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Outlier Win Ratio"]?.toFixed(2)}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Outlier Win Ratio"]?.toFixed(2)}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Outlier Loss Ratio </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Outlier Loss Ratio"]?.toFixed(2)}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Outlier Loss Ratio"]?.toFixed(2)}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> MTD </td>
|
||||
<td class="text-start text-end text-sm sm:text-[1rem]">
|
||||
{#if quantStats[$stockTicker?.toUpperCase()]["MTD %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["MTD %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["MTD %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats["SPY"]["MTD %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats["SPY"]["MTD %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats["SPY"]["MTD %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> 3M </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats[$stockTicker?.toUpperCase()]["3M %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["3M %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["3M %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats["SPY"]["3M %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats["SPY"]["3M %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats["SPY"]["3M %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> 6M </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats[$stockTicker?.toUpperCase()]["6M %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["6M %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["6M %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats["SPY"]["6M %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats["SPY"]["6M %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats["SPY"]["6M %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-starttext-sm sm:text-[1rem] whitespace-nowrap"> Best Day </td>
|
||||
<td class="text-start text-end text-sm">
|
||||
{#if quantStats[$stockTicker?.toUpperCase()]["Best Day %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Best Day %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Best Day %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats["SPY"]["Best Day %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats["SPY"]["Best Day %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats["SPY"]["Best Day %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Worst Day </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats[$stockTicker?.toUpperCase()]["Worst Day %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Worst Day %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Worst Day %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats["SPY"]["Worst Day %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats["SPY"]["Worst Day %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats["SPY"]["Worst Day %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Best Month </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats[$stockTicker?.toUpperCase()]["Best Month %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Best Month %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Best Month %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats["SPY"]["Best Month %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats["SPY"]["Best Month %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats["SPY"]["Best Month %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Worst Month </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats[$stockTicker?.toUpperCase()]["Worst Month %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Worst Month %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Worst Month %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats["SPY"]["Worst Month %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats["SPY"]["Worst Month %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats["SPY"]["Worst Month %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Best Year </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats[$stockTicker?.toUpperCase()]["Best Year %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Best Year %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Best Year %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats["SPY"]["Best Year %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats["SPY"]["Best Year %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats["SPY"]["Best Year %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Worst Year </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats[$stockTicker?.toUpperCase()]["Worst Year %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Worst Year %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Worst Year %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats["SPY"]["Worst Year %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats["SPY"]["Worst Year %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats["SPY"]["Worst Year %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Avg. Drawdown </td>
|
||||
<td class="text-start text-end ttext-sm sm:text-[1rem]">
|
||||
{#if quantStats[$stockTicker?.toUpperCase()]["Avg. Drawdown"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Avg. Drawdown"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Avg. Drawdown"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats["SPY"]["Avg. Drawdown"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats["SPY"]["Avg. Drawdown"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats["SPY"]["Avg. Drawdown"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Avg. Drawdown Days </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Avg. Drawdown Days"]}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Avg. Drawdown Days"]}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Recovery Factor </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Recovery Factor"]?.toFixed(2)}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Recovery Factor"]?.toFixed(2)}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Ulcer Index </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Ulcer Index"]?.toFixed(2)}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Ulcer Index"]?.toFixed(2)}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Avg. Up Month </td>
|
||||
<td class="text-start text-end text-sm sm:text-[1rem]">
|
||||
{#if quantStats[$stockTicker?.toUpperCase()]["Avg. Up Month %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Avg. Up Month %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Avg. Up Month %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats["SPY"]["Avg. Up Month %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats["SPY"]["Avg. Up Month %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats["SPY"]["Avg. Up Month %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Avg. Down Month </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats[$stockTicker?.toUpperCase()]["Avg. Down Month %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats[$stockTicker?.toUpperCase()]["Avg. Down Month %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats[$stockTicker?.toUpperCase()]["Avg. Down Month %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if quantStats["SPY"]["Avg. Down Month %"] >= 0}
|
||||
<span class="text-[#22C55E]">+{quantStats["SPY"]["Avg. Down Month %"]?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{quantStats["SPY"]["Avg. Down Month %"]?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Win Days </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Win Days %"]?.toFixed(2)}%
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Win Days %"]?.toFixed(2)}%
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Win Month </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Win Month %"]?.toFixed(2)}%
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Win Month %"]?.toFixed(2)}%
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Win Quarter </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Win Quarter %"]?.toFixed(2)}%
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Win Quarter %"]?.toFixed(2)}%
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Win Year </td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats[$stockTicker?.toUpperCase()]["Win Year %"]?.toFixed(2)}%
|
||||
</td>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{quantStats["SPY"]["Win Year %"]?.toFixed(2)}%
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{:else}
|
||||
<h1 class="m-auto mt-10 text-slate-400 text-2xl">
|
||||
<svg class="w-10 sm:w-12 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="#334155"
|
||||
d="M18.68 12.32a4.49 4.49 0 0 0-6.36.01a4.49 4.49 0 0 0 0 6.36a4.508 4.508 0 0 0 5.57.63L21 22.39L22.39 21l-3.09-3.11c1.13-1.77.87-4.09-.62-5.57m-1.41 4.95c-.98.98-2.56.97-3.54 0c-.97-.98-.97-2.56.01-3.54c.97-.97 2.55-.97 3.53 0c.97.98.97 2.56 0 3.54M10.9 20.1a6.527 6.527 0 0 1-1.48-2.32C6.27 17.25 4 15.76 4 14v3c0 2.21 3.58 4 8 4c-.4-.26-.77-.56-1.1-.9M4 9v3c0 1.68 2.07 3.12 5 3.7v-.2c0-.93.2-1.85.58-2.69C6.34 12.3 4 10.79 4 9m8-6C7.58 3 4 4.79 4 7c0 2 3 3.68 6.85 4h.05c1.2-1.26 2.86-2 4.6-2c.91 0 1.81.19 2.64.56A3.215 3.215 0 0 0 20 7c0-2.21-3.58-4-8-4Z"
|
||||
/></svg
|
||||
>
|
||||
</h1>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<h2 class=" mt-16 flex justify-center items-center text-3xl font-medium text-slate-700 mb-5 m-auto">No data available</h2>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Loading…
x
Reference in New Issue
Block a user