clean code
This commit is contained in:
MuslemRahimi
parent
5d7ccf6358
commit
fa55ed4634
@ -1,210 +0,0 @@
|
|||||||
<svelte:options immutable={true} />
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import {
|
|
||||||
correlationComponent,
|
|
||||||
stockTicker,
|
|
||||||
etfTicker,
|
|
||||||
assetType,
|
|
||||||
screenWidth,
|
|
||||||
getCache,
|
|
||||||
setCache,
|
|
||||||
} from "$lib/store";
|
|
||||||
import { goto } from "$app/navigation";
|
|
||||||
import InfoModal from "$lib/components/InfoModal.svelte";
|
|
||||||
import Lazy from "svelte-lazy";
|
|
||||||
|
|
||||||
export let data;
|
|
||||||
|
|
||||||
let showFullStats = false;
|
|
||||||
let isLoaded = false;
|
|
||||||
let rawData = [];
|
|
||||||
|
|
||||||
async function stockSelector(symbol) {
|
|
||||||
window?.scroll({ top: 0, left: 0, behavior: "smooth" });
|
|
||||||
|
|
||||||
if ($assetType === "etf") {
|
|
||||||
etfTicker.update((value) => symbol);
|
|
||||||
goto(`/etf/${symbol}`);
|
|
||||||
} else {
|
|
||||||
stockTicker.update((value) => symbol);
|
|
||||||
goto(`/stocks/${symbol}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getCorrelation(ticker) {
|
|
||||||
const cachedData = getCache(ticker, "getCorrelation");
|
|
||||||
if (cachedData) {
|
|
||||||
rawData = cachedData;
|
|
||||||
} else {
|
|
||||||
try {
|
|
||||||
const response = await fetch("/api/ticker-data", {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
"X-API-KEY": data?.apiKey,
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ ticker: ticker, path: "correlation-ticker" }),
|
|
||||||
});
|
|
||||||
rawData = (await response?.json()) || [];
|
|
||||||
+setCache(ticker, rawData, "getCorrelation");
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Failed to fetch swap data:", error);
|
|
||||||
rawData = [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (rawData?.lenght !== 0) {
|
|
||||||
$correlationComponent = true;
|
|
||||||
} else {
|
|
||||||
$correlationComponent = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$: {
|
|
||||||
if (
|
|
||||||
($assetType === "stock" ? $stockTicker : $etfTicker) &&
|
|
||||||
typeof window !== "undefined"
|
|
||||||
) {
|
|
||||||
showFullStats = false;
|
|
||||||
isLoaded = false;
|
|
||||||
const ticker = $assetType === "stock" ? $stockTicker : $etfTicker;
|
|
||||||
getCorrelation(ticker).then(() => {
|
|
||||||
isLoaded = true;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$: charNumber = $screenWidth < 640 ? 10 : 20;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<section class="overflow-hidden w-full">
|
|
||||||
<main>
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label
|
|
||||||
for="correlationInfo"
|
|
||||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold"
|
|
||||||
>
|
|
||||||
Most Correlated Stocks
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Most Correlated Stocks"}
|
|
||||||
content={"Correlation between -1 and +1 shows how two stocks move together. +1 means they move in sync, while -1 means they move in opposite directions. Zero means no clear relationship."}
|
|
||||||
id={"correlationInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if data?.user?.tier === "Pro"}
|
|
||||||
{#if isLoaded}
|
|
||||||
{#if rawData?.length !== 0}
|
|
||||||
<Lazy
|
|
||||||
height={300}
|
|
||||||
fadeOption={{ delay: 100, duration: 500 }}
|
|
||||||
keep={true}
|
|
||||||
>
|
|
||||||
{#each showFullStats ? rawData : rawData?.slice(0, 3) as item, index}
|
|
||||||
<div
|
|
||||||
class="shadow-lg bg-primary w-full rounded-md p-4 sm:p-3 mb-5 flex flex-row items-center {index ===
|
|
||||||
0
|
|
||||||
? 'mt-4'
|
|
||||||
: ''} {index === 2 && !showFullStats && rawData?.length > 2
|
|
||||||
? 'opacity-[0.3]'
|
|
||||||
: ''}"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
on:click={() => stockSelector(item?.symbol)}
|
|
||||||
class="flex-shrink-0 mr-3 rounded-full w-8 h-8 sm:w-10 sm:h-10 relative bg-default"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
class="avatar rounded-full w-5 h-5 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
|
||||||
src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`}
|
|
||||||
alt=" "
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col -mt-3 sm:-mt-5s w-full">
|
|
||||||
<div class="flex flex-row items-center w-full">
|
|
||||||
<div class="mr-auto mt-2 mb-2 text-sm sm:text-md">
|
|
||||||
<span class="text-blue-400">
|
|
||||||
{item?.symbol}
|
|
||||||
</span>
|
|
||||||
<span class="text-white">
|
|
||||||
· {item?.name?.length > charNumber
|
|
||||||
? item?.name?.slice(0, charNumber) + "..."
|
|
||||||
: item?.name}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<span
|
|
||||||
class="text-white text-sm sm:text-md font-medium ml-auto"
|
|
||||||
>
|
|
||||||
{item?.value?.toFixed(2)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{#if item?.value >= 0}
|
|
||||||
<progress
|
|
||||||
class="progress bg-[#3B3D3F] [&::-webkit-progress-value]:bg-[#00FC50] [&::-moz-progress-bar]:bg-[#00FC50]"
|
|
||||||
value={item?.value}
|
|
||||||
max="1"
|
|
||||||
></progress>
|
|
||||||
{:else}
|
|
||||||
<progress
|
|
||||||
class="progress bg-[#3B3D3F] [&::-webkit-progress-value]:bg-[#C7271A] [&::-moz-progress-bar]:bg-[#C7271A]"
|
|
||||||
value={-item?.value}
|
|
||||||
min="1"
|
|
||||||
></progress>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
<label
|
|
||||||
on:click={() => (showFullStats = !showFullStats)}
|
|
||||||
class="{rawData?.length < 4
|
|
||||||
? 'hidden'
|
|
||||||
: ''} cursor-pointer 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>
|
|
||||||
</Lazy>
|
|
||||||
{/if}
|
|
||||||
{:else}
|
|
||||||
<div class="flex justify-center items-center h-80">
|
|
||||||
<div class="relative">
|
|
||||||
<label
|
|
||||||
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
|
||||||
>
|
|
||||||
<span class="loading loading-spinner loading-md text-gray-400"
|
|
||||||
></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{:else}
|
|
||||||
<div
|
|
||||||
class="shadow-lg shadow-bg-[#000] bg-[#111112] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="mr-1.5 w-5 h-5 inline-block"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
><path
|
|
||||||
fill="#A3A3A3"
|
|
||||||
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
Unlock content with
|
|
||||||
<a
|
|
||||||
class="inline-block ml-2 text-blue-400 hover:sm:text-white"
|
|
||||||
href="/pricing">Pro Subscription</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</main>
|
|
||||||
</section>
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
|
|
||||||
import CryptoProfileCard from '$lib/components/CryptoProfileCard.svelte';
|
|
||||||
|
|
||||||
export let cryptoProfile;
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<section class="mt-4">
|
|
||||||
|
|
||||||
|
|
||||||
<div class="grid grid-cols-3 gap-x-4 gap-y-2">
|
|
||||||
<label for="tickerModal" class="w-auto border border-gray-300 flex px-4 py-2 mb-2 justify-center items-center text-xs font-medium rounded-xl text-gray-200">
|
|
||||||
Details
|
|
||||||
</label>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--Start Crypto Modal-->
|
|
||||||
<div class="drawer drawer-end z-40 overflow-hidden w-screen">
|
|
||||||
<input id="tickerModal" type="checkbox" class="drawer-toggle"/>
|
|
||||||
<div class="drawer-side overflow-hidden">
|
|
||||||
|
|
||||||
|
|
||||||
<div class="bg-[#000] min-h-screen w-screen pb-20 overflow-hidden">
|
|
||||||
|
|
||||||
<label for="tickerModal" class="absolute left-6 top-6">
|
|
||||||
<svg class="w-6 h-6 inline-block mb-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"/></svg>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="w-screen overflow-y-scroll" >
|
|
||||||
|
|
||||||
<CryptoProfileCard cryptoProfile = {cryptoProfile}/>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--End Crypto Modal-->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,248 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { cryptoTicker, screenWidth, displayCompanyName } from "$lib/store";
|
|
||||||
|
|
||||||
import { abbreviateNumber } from "$lib/utils";
|
|
||||||
import { fade } from "svelte/transition";
|
|
||||||
import { goto } from "$app/navigation";
|
|
||||||
import defaultImage from "$lib/images/etf/cover/default.jpg";
|
|
||||||
|
|
||||||
export let cryptoProfile;
|
|
||||||
|
|
||||||
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; // Set a default API URL
|
|
||||||
|
|
||||||
let info;
|
|
||||||
let imageUrl;
|
|
||||||
let marketCap = "-";
|
|
||||||
let totalVolume = "-";
|
|
||||||
let circulatingSupply = "-";
|
|
||||||
let maxSupply = "-";
|
|
||||||
let description = "";
|
|
||||||
let snippet;
|
|
||||||
let website;
|
|
||||||
let athPrice;
|
|
||||||
let athDate;
|
|
||||||
|
|
||||||
let showFullText = false;
|
|
||||||
|
|
||||||
$: {
|
|
||||||
if (
|
|
||||||
$cryptoTicker &&
|
|
||||||
typeof $cryptoTicker !== "undefined" &&
|
|
||||||
typeof window !== "undefined" &&
|
|
||||||
typeof cryptoProfile !== "undefined" &&
|
|
||||||
Object?.keys(cryptoProfile)?.length !== 0
|
|
||||||
) {
|
|
||||||
marketCap = cryptoProfile?.market_cap;
|
|
||||||
totalVolume = cryptoProfile?.total_volume;
|
|
||||||
description =
|
|
||||||
cryptoProfile?.description ??
|
|
||||||
"A detailed description of the company is not yet available.";
|
|
||||||
snippet = description?.slice(0, 150) + "...";
|
|
||||||
circulatingSupply = cryptoProfile?.circulating_supply;
|
|
||||||
maxSupply = cryptoProfile?.max_supply;
|
|
||||||
website = cryptoProfile?.website;
|
|
||||||
athPrice = cryptoProfile?.ath;
|
|
||||||
athDate = cryptoProfile?.ath_date;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="sm:space-y-3">
|
|
||||||
<div
|
|
||||||
class="lg:rounded-md shadow-lg sm:border sm:border-gray-600 bg-[#000] lg:bg-default h-auto h-auto w-screen pt-16 sm:w-full md:w-[420px] xl:w-[450px] lg:pt-0"
|
|
||||||
>
|
|
||||||
<!--Start Header-->
|
|
||||||
<div
|
|
||||||
class="sm:rounded-t-lg w-full h-[130px] bg-[#000] p-3 flex flex-col bg-cover bg-center bg-no-repeat"
|
|
||||||
style="background-image: url({`${cloudFrontUrl}/stocks/cover/${$cryptoTicker?.toUpperCase()}.jpg`});"
|
|
||||||
>
|
|
||||||
<div class="flex flex-row pt-1 pb-2"></div>
|
|
||||||
<!--
|
|
||||||
<div class="flex flex-row justify-end items-center mt-2 relative z-10 -my-5">
|
|
||||||
<div style={`background-image: url(${sTier}`} class="animate-bounce circle-background mr-5 w-20 h-20 z-10">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-28 h-28" viewBox="0 0 106 34">
|
|
||||||
<g class="sparkles">
|
|
||||||
<path style="--duration: 4s;" d="M2.5740361 5.33344622s1.1875777-6.20179466 2.24320232 0c0 0 5.9378885 1.05562462 0 2.11124925 0 0-1.05562463 6.33374774-2.24320233 0-3.5627331-.6597654-3.29882695-1.31953078 0-2.11124925z" />
|
|
||||||
<path style="--duration: 3.2s;" d="M33.5173993 29.97263826s1.03464615-5.40315215 1.95433162 0c0 0 5.17323078.91968547 0 1.83937095 0 0-.91968547 5.51811283-1.95433162 0-3.10393847-.57480342-2.8740171-1.14960684 0-1.83937095z" />
|
|
||||||
<path style="--duration: 2.5s;" d="M69.03038108 1.71240809s.73779281-3.852918 1.39360864 0c0 0 3.68896404.65581583 0 1.31163166 0 0-.65581583 3.93489497-1.39360864 0-2.21337842-.4098849-2.04942447-.81976979 0-1.31163166z" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
<div class="tier-text italic m-auto text-xl">
|
|
||||||
<span class="text-4xl" style="color: #FFFFFF}">
|
|
||||||
{tierList ?? 'n/a'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
-->
|
|
||||||
</div>
|
|
||||||
<!--End Header-->
|
|
||||||
|
|
||||||
<!--Start Content-->
|
|
||||||
<div class="w-full flex flex-wrap border-t border-gray-600">
|
|
||||||
<h2 class="text-start ml-4 text-2xl font-bold text-white pb-2 mt-3">
|
|
||||||
Crypto Info
|
|
||||||
</h2>
|
|
||||||
<div class="flex items-center w-full">
|
|
||||||
<table class="table table-md table-compact">
|
|
||||||
<tbody>
|
|
||||||
<!-- row 1 -->
|
|
||||||
<tr
|
|
||||||
class="text-white border-b border-[#27272A]"
|
|
||||||
style="font-size: 0.8rem"
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-default text-white font-medium"
|
|
||||||
>Name</td
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-default"
|
|
||||||
>{$displayCompanyName?.length > 30
|
|
||||||
? $displayCompanyName?.slice(0, 30) + "..."
|
|
||||||
: $displayCompanyName}</td
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-default text-white font-medium"
|
|
||||||
>Ticker</td
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-default"
|
|
||||||
>{$cryptoTicker}</td
|
|
||||||
>
|
|
||||||
</tr>
|
|
||||||
<!-- row 2 -->
|
|
||||||
<tr
|
|
||||||
class="text-white border-b border-[#27272A]"
|
|
||||||
style="font-size: 0.8rem"
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-default text-white font-medium"
|
|
||||||
>Mkt Cap</td
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-default whitespace-normal"
|
|
||||||
>{abbreviateNumber(marketCap, true)}</td
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-default text-white font-medium"
|
|
||||||
>Total Volume</td
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-default whitespace-normal"
|
|
||||||
>{abbreviateNumber(totalVolume)}</td
|
|
||||||
>
|
|
||||||
</tr>
|
|
||||||
<!-- row 2 -->
|
|
||||||
<tr
|
|
||||||
class="text-white border-b border-[#27272A]"
|
|
||||||
style="font-size: 0.8rem"
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-default text-white font-medium"
|
|
||||||
>Circulating Supply</td
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-default whitespace-normal"
|
|
||||||
>{abbreviateNumber(circulatingSupply)}</td
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-default text-white font-medium"
|
|
||||||
>Max Supply</td
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-default whitespace-normal"
|
|
||||||
>{maxSupply !== null
|
|
||||||
? abbreviateNumber(maxSupply)
|
|
||||||
: "Uncapped"}</td
|
|
||||||
>
|
|
||||||
</tr>
|
|
||||||
<!-- row 2 -->
|
|
||||||
<tr
|
|
||||||
class="text-white border-b border-[#27272A]"
|
|
||||||
style="font-size: 0.8rem"
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-default text-white font-medium"
|
|
||||||
>ATH Price</td
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-default whitespace-normal"
|
|
||||||
>${new Intl.NumberFormat("en", {
|
|
||||||
minimumFractionDigits: 2,
|
|
||||||
maximumFractionDigits: 2,
|
|
||||||
}).format(athPrice)}</td
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-default text-white font-medium"
|
|
||||||
>ATH Date</td
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-default whitespace-normal"
|
|
||||||
>{new Date(athDate).toLocaleString("en-US", {
|
|
||||||
month: "short",
|
|
||||||
day: "numeric",
|
|
||||||
year: "numeric",
|
|
||||||
daySuffix: "2-digit",
|
|
||||||
})}</td
|
|
||||||
>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2
|
|
||||||
class="text-start ml-2 text-xl font-bold text-white pb-2 pt-6 lg:pt-3"
|
|
||||||
>
|
|
||||||
Description
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<p class="text-gray-100 ml-2 text-sm whitespace-normal">
|
|
||||||
{#if showFullText}
|
|
||||||
<div transition:fade={{ delay: 0, duration: 80 }} in={showFullText}>
|
|
||||||
{description}
|
|
||||||
</div>
|
|
||||||
{:else if $screenWidth <= 800}
|
|
||||||
{description}
|
|
||||||
{:else}
|
|
||||||
{snippet}
|
|
||||||
{/if}
|
|
||||||
</p>
|
|
||||||
{#if description.length !== 0}
|
|
||||||
<div class="flex flex-row w-full items-center mt-4 pb-2 mb-2">
|
|
||||||
<label
|
|
||||||
on:click={() => (showFullText = !showFullText)}
|
|
||||||
class="hidden lg:block ml-3 w-full text-md mt-1 cursor-pointer font-medium text-white sm:hover:text-blue-400 sm:hover:underline"
|
|
||||||
>
|
|
||||||
{#if showFullText}
|
|
||||||
Show less
|
|
||||||
{:else}
|
|
||||||
Show more
|
|
||||||
{/if}
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div class="flex justify-end w-full relative bottom-0 right-0 mr-3">
|
|
||||||
<a
|
|
||||||
target="_blank"
|
|
||||||
href={website}
|
|
||||||
class="inline-flex text-sm font-medium text-white sm:hover:text-blue-400 sm:hover:underline"
|
|
||||||
>
|
|
||||||
Go to website
|
|
||||||
<svg
|
|
||||||
class="w-5 h-5 ml-2"
|
|
||||||
fill="currentColor"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
><path
|
|
||||||
d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"
|
|
||||||
></path><path
|
|
||||||
d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"
|
|
||||||
></path></svg
|
|
||||||
>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
File diff suppressed because one or more lines are too long
@ -1,316 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { stockTicker, screenWidth, wsBidPrice, wsAskPrice } from "$lib/store";
|
|
||||||
|
|
||||||
import { abbreviateNumber } from "$lib/utils";
|
|
||||||
import { fade } from "svelte/transition";
|
|
||||||
|
|
||||||
export let stockDeck;
|
|
||||||
export let data;
|
|
||||||
|
|
||||||
let info;
|
|
||||||
|
|
||||||
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; // Set a default API URL
|
|
||||||
|
|
||||||
let earningDate = null;
|
|
||||||
let tierList = "-";
|
|
||||||
//let ceoName = "-";
|
|
||||||
let sector = "-";
|
|
||||||
let industry = "-";
|
|
||||||
let exchange = "-";
|
|
||||||
let employees = "-";
|
|
||||||
//let country = "-";
|
|
||||||
let description = "";
|
|
||||||
let website = "-";
|
|
||||||
let snippet;
|
|
||||||
let forwardPE = "-";
|
|
||||||
let beta = "-";
|
|
||||||
|
|
||||||
let showFullText = false;
|
|
||||||
/*
|
|
||||||
function getAbbreviatedName(fullName) {
|
|
||||||
try {
|
|
||||||
const names = fullName?.split(" ");
|
|
||||||
let firstName = names?.at(0);
|
|
||||||
// Remove any title prefix (e.g. Dr., Mr., Mrs., Ms.)
|
|
||||||
if (names?.length > 1 && /^(Dr|Mr|Mrs|Ms)\.?$/i?.test(names?.at(0))) {
|
|
||||||
firstName = names?.at(1);
|
|
||||||
names?.splice(0, 1);
|
|
||||||
}
|
|
||||||
//const initials = names?.slice(0, -1)?.map(name => name?.charAt(0))?.join('. ');
|
|
||||||
const lastName = names[names?.length - 1];
|
|
||||||
return `${firstName?.charAt(0)}. ${lastName}`;
|
|
||||||
} catch (e) {
|
|
||||||
//console.log(e)
|
|
||||||
return "-";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
$: {
|
|
||||||
if (
|
|
||||||
$stockTicker &&
|
|
||||||
typeof window !== "undefined" &&
|
|
||||||
typeof stockDeck !== "undefined" &&
|
|
||||||
stockDeck?.length !== 0
|
|
||||||
) {
|
|
||||||
info = stockDeck?.at(0);
|
|
||||||
earningDate =
|
|
||||||
info?.earning !== undefined
|
|
||||||
? new Date(info?.earning)?.toLocaleDateString("en-GB", {
|
|
||||||
day: "numeric",
|
|
||||||
month: "long",
|
|
||||||
})
|
|
||||||
: "";
|
|
||||||
|
|
||||||
tierList = info?.tierList;
|
|
||||||
//ceoName = info?.ceoName?.length !== 0 ? getAbbreviatedName(info?.ceoName) : "-";
|
|
||||||
sector = info?.sector ?? "-";
|
|
||||||
industry = info?.industry ?? "-";
|
|
||||||
exchange = info?.exchange;
|
|
||||||
employees = abbreviateNumber(info?.fullTimeEmployees) ?? "-";
|
|
||||||
//country = info?.country ?? "-";
|
|
||||||
description =
|
|
||||||
info?.description ??
|
|
||||||
"A detailed description of the company is not yet available.";
|
|
||||||
website = info?.website;
|
|
||||||
snippet = description?.slice(0, 250) + "...";
|
|
||||||
forwardPE = info?.forwardPE;
|
|
||||||
beta = info?.beta !== undefined ? info?.beta?.toFixed(2) : "-";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="sm:space-y-3">
|
|
||||||
<div
|
|
||||||
class="sm:rounded-md lg:border lg:border-gray-600 bg-[#000] lg:bg-default h-auto w-screen pt-16 sm:w-full md:w-[420px] xl:w-[450px] lg:pt-0"
|
|
||||||
>
|
|
||||||
<!--Start Header-->
|
|
||||||
<div
|
|
||||||
class="sm:rounded-t-lg w-full h-[130px] bg-[#000] p-3 flex flex-col bg-cover bg-center bg-no-repeat"
|
|
||||||
style="background-image: url({`${cloudFrontUrl}/stocks/cover/${$stockTicker?.toUpperCase()}.jpg`});"
|
|
||||||
>
|
|
||||||
<div class="flex flex-row pt-1 pb-2">
|
|
||||||
{#if earningDate}
|
|
||||||
<div
|
|
||||||
class="badge bg-[#fff] gap-2 mt-2 font-semibold text-sm text-black"
|
|
||||||
>
|
|
||||||
Earnings Call - {earningDate}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<!--
|
|
||||||
<div class="flex flex-row justify-end items-center mt-2 relative z-10 -my-5">
|
|
||||||
<div style={`background-image: url(${tierList === 'S' || tierList === 'S+' || tierList === 'S-' ? sTier : tierList === 'A' || tierList === 'A+' || tierList === 'A-' ? aTier : tierList === 'B' || tierList === 'B+' || tierList === 'B-' ? bTier : defaultTier});`} class="animate-bounce circle-background mr-5 w-20 h-20 z-10">
|
|
||||||
<div class="tier-text italic m-auto text-xl">
|
|
||||||
<span class="{tierList !== null ? 'text-4xl' : 'hidden'} " style="color: ${tierList === 'S' || tierList === 'S+' || tierList === 'S-' ? '#FFFFFF' : tierList === 'A' || tierList === 'A+' || tierList === 'A-' ? '#1239FA' : ''});`}">
|
|
||||||
{tierList ?? 'n/a'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
-->
|
|
||||||
</div>
|
|
||||||
<!--End Header-->
|
|
||||||
<!--Start Content-->
|
|
||||||
<div class="w-full flex flex-wrap border-t border-gray-600 px-2">
|
|
||||||
<h2 class="text-start ml-2 text-2xl font-bold text-white pb-2 mt-3">
|
|
||||||
Company Info
|
|
||||||
</h2>
|
|
||||||
<div class="flex justify-center items-center w-full m-auto">
|
|
||||||
<table class="table table-sm table-compact">
|
|
||||||
<tbody>
|
|
||||||
<!--
|
|
||||||
<tr class="text-white border-b border-[#27272A]">
|
|
||||||
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap">CEO</td>
|
|
||||||
<td class="text-center sm:text-end bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-default whitespace-normal font-semibold">{ceoName}</td>
|
|
||||||
<td class="text-start sm:text-end lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap">Country</td>
|
|
||||||
<td class="text-start sm:text-end bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-default whitespace-normal font-semibold">{country}</td>
|
|
||||||
</tr>
|
|
||||||
-->
|
|
||||||
<tr class="text-white border-b border-[#27272A]">
|
|
||||||
<td
|
|
||||||
class="text-start bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
||||||
>Bid</td
|
|
||||||
>
|
|
||||||
<td class="text-center sm:text-end bg-[#000] lg:bg-default"
|
|
||||||
>{$wsBidPrice !== 0 && $wsBidPrice !== null
|
|
||||||
? $wsBidPrice
|
|
||||||
: (data?.getStockQuote?.bid ?? "-")}</td
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="text-start sm:text-end bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
||||||
>Ask</td
|
|
||||||
>
|
|
||||||
<td class="text-start sm:text-end bg-[#000] lg:bg-default"
|
|
||||||
>{$wsAskPrice !== 0 && $wsAskPrice !== null
|
|
||||||
? $wsAskPrice
|
|
||||||
: (data?.getStockQuote?.ask ?? "-")}</td
|
|
||||||
>
|
|
||||||
</tr>
|
|
||||||
<tr class="text-white border-b border-[#27272A]">
|
|
||||||
<td
|
|
||||||
class="text-start bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
||||||
>Mkt Cap</td
|
|
||||||
>
|
|
||||||
<td class="text-center sm:text-end bg-[#000] lg:bg-default"
|
|
||||||
>{abbreviateNumber(data?.getStockQuote?.marketCap)}</td
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="text-start sm:text-end bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
||||||
>Vol</td
|
|
||||||
>
|
|
||||||
<td class="text-start sm:text-end bg-[#000] lg:bg-default"
|
|
||||||
>{abbreviateNumber(data?.getStockQuote?.volume)}</td
|
|
||||||
>
|
|
||||||
</tr>
|
|
||||||
<tr class="text-white border-b border-[#27272A]">
|
|
||||||
<td
|
|
||||||
class="text-start bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
||||||
>Beta</td
|
|
||||||
>
|
|
||||||
<td class="text-center sm:text-end bg-[#000] lg:bg-default"
|
|
||||||
>{beta}</td
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="text-start sm:text-end bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
||||||
>Avg. Vol</td
|
|
||||||
>
|
|
||||||
<td class="text-start sm:text-end bg-[#000] lg:bg-default"
|
|
||||||
>{abbreviateNumber(data?.getStockQuote?.avgVolume)}</td
|
|
||||||
>
|
|
||||||
</tr>
|
|
||||||
<!--
|
|
||||||
<tr class="text-white ">
|
|
||||||
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-default text-white whitespace-pre-line font-semibold whitespace-nowrap">Sector</td>
|
|
||||||
<td class="text-center bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-default whitespace-pre-line font-semibold">{sector}</td>
|
|
||||||
<td class="text-start sm:text-center lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap">Employees</td>
|
|
||||||
<td class="text-start sm:text-end bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-default font-semibold">{employees}</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="text-white border-b border-[#27272A]">
|
|
||||||
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap">Industry</td>
|
|
||||||
<td class="text-center bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-default whitespace-normal font-semibold">{industry}</td>
|
|
||||||
<td class="text-start sm:text-center lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap">Exchange</td>
|
|
||||||
<td class="text-start sm:text-end bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-default font-semibold">{exchange}</td>
|
|
||||||
</tr>
|
|
||||||
-->
|
|
||||||
<tr class="text-white border-b border-[#27272A]">
|
|
||||||
<td
|
|
||||||
class="text-start bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
||||||
>Open</td
|
|
||||||
>
|
|
||||||
<td class="text-center sm:text-end bg-[#000] lg:bg-default"
|
|
||||||
>{data?.getStockQuote?.open?.toFixed(2)}</td
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="text-start sm:text-end bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
||||||
>Prev. Close</td
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="text-start sm:text-end bg-[#000] lg:bg-default whitespace-nowrap"
|
|
||||||
>{data?.getStockQuote?.previousClose?.toFixed(2) ?? "-"}</td
|
|
||||||
>
|
|
||||||
</tr>
|
|
||||||
<!--
|
|
||||||
{#if $screenWidth > 640}
|
|
||||||
<tr class="text-white border-b border-[#27272A]">
|
|
||||||
<td class="text-start bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap">1D-Range</td>
|
|
||||||
<td class="text-center sm:text-end bg-[#000] lg:bg-default">{data?.getStockQuote?.dayLow?.toFixed(2)} - {data?.getStockQuote?.dayHigh?.toFixed(2)}</td>
|
|
||||||
<td class="text-start sm:text-end bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap ">1Y-Range</td>
|
|
||||||
<td class="text-start sm:text-end bg-[#000] lg:bg-default whitespace-nowrap ">{data?.getStockQuote?.yearLow?.toFixed(2)} - {data?.getStockQuote?.yearHigh?.toFixed(2)}</td>
|
|
||||||
</tr>
|
|
||||||
{/if}
|
|
||||||
-->
|
|
||||||
<tr class="text-white border-b border-[#27272A]">
|
|
||||||
<td
|
|
||||||
class="text-start bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
||||||
>EPS (ttm)</td
|
|
||||||
>
|
|
||||||
<td class="text-center sm:text-end bg-[#000] lg:bg-default"
|
|
||||||
>{data?.getStockQuote?.eps}</td
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="text-start sm:text-end bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
||||||
>PE Ratio (ttm)</td
|
|
||||||
>
|
|
||||||
<td class="text-start sm:text-end bg-[#000] lg:bg-default"
|
|
||||||
>{data?.getStockQuote?.pe}</td
|
|
||||||
>
|
|
||||||
</tr>
|
|
||||||
<tr class="text-white border-b border-[#27272A]">
|
|
||||||
<td
|
|
||||||
class="text-start bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
||||||
>Shares Out.</td
|
|
||||||
>
|
|
||||||
<td class="text-center sm:text-end bg-[#000] lg:bg-default"
|
|
||||||
>{abbreviateNumber(data?.getStockQuote?.sharesOutstanding)}</td
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="text-start sm:text-end bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
||||||
>Forward PE</td
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="text-start sm:text-end bg-[#000] lg:bg-default whitespace-nowrap"
|
|
||||||
>{forwardPE === undefined || forwardPE === null
|
|
||||||
? "-"
|
|
||||||
: forwardPE}</td
|
|
||||||
>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2
|
|
||||||
class="text-start sm:ml-4 text-xl font-bold text-white pb-2 pt-5 sm:pt-3 p-1 sm:p-0"
|
|
||||||
>
|
|
||||||
Description
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<p class="text-gray-100 sm:ml-2 text-sm whitespace-normal p-1 sm:p-2">
|
|
||||||
{#if showFullText}
|
|
||||||
<div transition:fade={{ delay: 0, duration: 80 }} in={showFullText}>
|
|
||||||
{description}
|
|
||||||
</div>
|
|
||||||
{:else if $screenWidth <= 800}
|
|
||||||
{description}
|
|
||||||
{:else}
|
|
||||||
{snippet}
|
|
||||||
{/if}
|
|
||||||
</p>
|
|
||||||
{#if description.length !== 0}
|
|
||||||
<div class="flex flex-row w-full items-center mt-4 pb-2 mb-2">
|
|
||||||
<label
|
|
||||||
on:click={() => (showFullText = !showFullText)}
|
|
||||||
class="hidden lg:block ml-3 w-full text-md mt-1 cursor-pointer font-medium text-white sm:hover:text-blue-400 sm:hover:underline"
|
|
||||||
>
|
|
||||||
{#if showFullText}
|
|
||||||
Show less
|
|
||||||
{:else}
|
|
||||||
Show more
|
|
||||||
{/if}
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div class="flex justify-end w-full relative bottom-0 right-0 mr-3">
|
|
||||||
<a
|
|
||||||
target="_blank"
|
|
||||||
href={website}
|
|
||||||
class="inline-flex text-sm font-medium text-white sm:hover:text-blue-400 sm:hover:underline"
|
|
||||||
>
|
|
||||||
Go to website
|
|
||||||
<svg
|
|
||||||
class="w-5 h-5 ml-2"
|
|
||||||
fill="currentColor"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
><path
|
|
||||||
d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"
|
|
||||||
></path><path
|
|
||||||
d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"
|
|
||||||
></path></svg
|
|
||||||
>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user