analyst links are working now
This commit is contained in:
Alexander Weber
parent
03484e6def
commit
010a0e1947
@ -1,73 +1,55 @@
|
||||
<script lang='ts'>
|
||||
<script lang="ts">
|
||||
//import ProgressBar from 'progressbar.js';
|
||||
import {stockTicker, screenWidth} from '$lib/store';
|
||||
import { abbreviateNumber } from '$lib/utils';
|
||||
import { stockTicker, screenWidth } from "$lib/store";
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
|
||||
export let lastPrice;
|
||||
export let analystRating = {};
|
||||
|
||||
|
||||
let buyCount = 0;
|
||||
let holdCount = 0;
|
||||
let sellCount = 0;
|
||||
let priceTarget = 'n/a';
|
||||
let priceTarget = "n/a";
|
||||
let numOfAnalyst = 0;
|
||||
let consensusRating = 'n/a';
|
||||
let consensusRating = "n/a";
|
||||
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
|
||||
buyCount = ((analystRating?.Buy / numOfAnalyst) * 100)?.toFixed(2);
|
||||
holdCount = ((analystRating?.Hold / numOfAnalyst) * 100)?.toFixed(2);
|
||||
sellCount = ((analystRating?.Sell / numOfAnalyst) * 100)?.toFixed(2);
|
||||
priceTarget = analystRating?.priceTarget;
|
||||
consensusRating = analystRating?.consensusRating;
|
||||
console.log(lastPrice)
|
||||
console.log(lastPrice);
|
||||
try {
|
||||
changesPercentage = ((priceTarget/lastPrice -1)*100)?.toFixed(2) ?? 0;
|
||||
} catch(e) {
|
||||
changesPercentage = ((priceTarget / lastPrice - 1) * 100)?.toFixed(2) ?? 0;
|
||||
} catch (e) {
|
||||
changesPercentage = 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--Start Analyst Card -->
|
||||
<div class="space-y-3 sm:pt-5 hidden sm:block sm:{Object?.keys(analystRating)?.length !== 0 ? '' : 'hidden'}">
|
||||
<!--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">
|
||||
|
||||
<!--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>
|
||||
<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'}
|
||||
{#if consensusRating === "Buy" || consensusRating === "Strong Buy"}
|
||||
<span class="text-start font-semibold text-[#10DB06] mr-auto ml-5 mt-2 text-xl">
|
||||
{consensusRating}
|
||||
</span>
|
||||
{:else if consensusRating === 'Sell' || consensusRating === 'Strong Sell' }
|
||||
{:else if consensusRating === "Sell" || consensusRating === "Strong Sell"}
|
||||
<span class="text-start font-semibold text-[#FF2F1F] mr-auto ml-5 mt-2 text-xl">
|
||||
{consensusRating}
|
||||
</span>
|
||||
@ -78,44 +60,33 @@ if ($stockTicker && typeof window !== 'undefined' && typeof analystRating !== 'u
|
||||
{/if}
|
||||
|
||||
<span class="mr-5 mt-2 font-semibold text-xl text-white">
|
||||
{#if priceTarget !== 'n/a'}
|
||||
{#if priceTarget !== "n/a"}
|
||||
${priceTarget}
|
||||
{:else}
|
||||
-
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="text-white pl-4 pr-4 mt-6">
|
||||
{#if changesPercentage < 0 }
|
||||
{#if changesPercentage < 0}
|
||||
The Stock Price has a downside of
|
||||
<span style="color: #FF2F1F; font-weight: 500">{abbreviateNumber(Math.abs(changesPercentage))}%</span>
|
||||
{:else if changesPercentage >= 0 }
|
||||
{:else if changesPercentage >= 0}
|
||||
The Stock Price has an upside of
|
||||
<span style="color: #10DB06; font-weight: 500">{abbreviateNumber(Math.abs(changesPercentage))}%</span>
|
||||
{/if}
|
||||
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="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>
|
||||
@ -125,9 +96,7 @@ if ($stockTicker && typeof window !== 'undefined' && typeof analystRating !== 'u
|
||||
|
||||
<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>
|
||||
@ -137,9 +106,7 @@ if ($stockTicker && typeof window !== 'undefined' && typeof analystRating !== 'u
|
||||
|
||||
<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>
|
||||
@ -147,159 +114,129 @@ if ($stockTicker && typeof window !== 'undefined' && typeof analystRating !== 'u
|
||||
<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}/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">
|
||||
Analyst Ratings
|
||||
</a>
|
||||
|
||||
</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"> Analyst Ratings </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--End Analyst Card-->
|
||||
<!--End Analyst Card-->
|
||||
|
||||
|
||||
|
||||
|
||||
<!--Start Mobile Analyst Card-->
|
||||
<!--Start Mobile Analyst Card-->
|
||||
<div class="space-y-3 sm:pt-5 sm:hidden">
|
||||
|
||||
<div class="bg-[#000] h-auto w-screen">
|
||||
|
||||
<!--Start Header-->
|
||||
<div class="bg-[#09090B] w-full p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
|
||||
<h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">
|
||||
Analyst Rating
|
||||
</h2>
|
||||
<h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">Analyst Rating</h2>
|
||||
|
||||
<div class="flex flex-col items-center mt-10 w-full">
|
||||
|
||||
<div class="flex flex-row justify-between items-center w-full mb-5">
|
||||
|
||||
|
||||
<div class="flex flex-col items-start ml-3 ">
|
||||
<span class="text-white text-lg font-medium inline-block">
|
||||
Recommendation:
|
||||
</span>
|
||||
<div class="flex flex-col items-start ml-3">
|
||||
<span class="text-white text-lg font-medium inline-block"> Recommendation: </span>
|
||||
<span class="text-white text-2xl font-medium inline-block">
|
||||
{#if consensusRating === 'Buy' || consensusRating === 'Strong Buy'}
|
||||
{#if consensusRating === "Buy" || consensusRating === "Strong Buy"}
|
||||
<span class="text-start font-medium text-[#10DB06] text-2xl">
|
||||
{consensusRating}
|
||||
</span>
|
||||
{:else if consensusRating === 'Sell' || consensusRating === 'Strong Sell' }
|
||||
{:else if consensusRating === "Sell" || consensusRating === "Strong Sell"}
|
||||
<span class="text-start font-medium text-[#FF2F1F] text-2xl">
|
||||
{consensusRating}
|
||||
</span>
|
||||
{:else if consensusRating === 'Hold'}
|
||||
{:else if consensusRating === "Hold"}
|
||||
<span class="text-start font-medium text-[#FF2F1F] text-2xl">
|
||||
{consensusRating ?? 'n/a'}
|
||||
{consensusRating ?? "n/a"}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-start font-medium text-white text-2xl">
|
||||
n/a
|
||||
</span>
|
||||
<span class="text-start font-medium text-white text-2xl"> n/a </span>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="flex flex-col items-start mr-5">
|
||||
<span class="text-white ml-auto text-lg font-medium inline-block">
|
||||
Price Target:
|
||||
</span>
|
||||
<span class="text-white ml-auto text-lg font-medium inline-block"> Price Target: </span>
|
||||
<span class="text-white ml-auto text-2xl font-medium inline-block">
|
||||
{#if priceTarget !== 'n/a'}
|
||||
{#if priceTarget !== "n/a"}
|
||||
${priceTarget}
|
||||
{:else}
|
||||
-
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{#if changesPercentage < 0 }
|
||||
{#if changesPercentage < 0}
|
||||
<div class="text-white p-4 text-center">
|
||||
The Stock Price has a downside of
|
||||
<span class="text-[#FF2F1F] font-medium">{abbreviateNumber(Math?.abs(changesPercentage))} %</span>
|
||||
based on <span class="font-semibold">{numOfAnalyst}</span> analysts.
|
||||
</div>
|
||||
{:else if changesPercentage >= 0 }
|
||||
{:else if changesPercentage >= 0}
|
||||
<div class="text-white p-4 text-center">
|
||||
The Stock Price has an upside of
|
||||
<span class="text-[#10DB06] font-medium">{abbreviateNumber(Math?.abs(changesPercentage))} %</span>
|
||||
based on <span class="font-semibold">{numOfAnalyst}</span> analysts.
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--End Header-->
|
||||
|
||||
{#if numOfAnalyst !== 0}
|
||||
<div class="mt-5 flex flex-col m-auto items-center rounded-lg w-full mb-16 p-3">
|
||||
|
||||
|
||||
<div class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 mb-5 flex flex-row items-center">
|
||||
<div class="flex flex-col -mt-2 w-full">
|
||||
<div class="flex flex-row items-center w-full">
|
||||
<span class="text-white text-md font-medium text-start mb-2 mr-auto mt-2">
|
||||
Buy
|
||||
</span>
|
||||
<span class="text-white text-md font-medium text-start mb-2 mr-auto mt-2"> Buy </span>
|
||||
<span class="text-white text-md font-medium ml-auto">
|
||||
{buyCount}%
|
||||
</span>
|
||||
</div>
|
||||
<progress class="progress w-full {buyCount >= 50 ? '[&::-webkit-progress-value]:bg-[#10DB06] [&::-moz-progress-bar]:bg-[#10DB06]' : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}" value={buyCount} max="100"></progress>
|
||||
<progress
|
||||
class="progress w-full {buyCount >= 50 ? '[&::-webkit-progress-value]:bg-[#10DB06] [&::-moz-progress-bar]:bg-[#10DB06]' : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}"
|
||||
value={buyCount}
|
||||
max="100"
|
||||
></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 mb-5 flex flex-row items-center">
|
||||
<div class="flex flex-col -mt-2 w-full">
|
||||
<div class="flex flex-row items-center w-full">
|
||||
<span class="text-white text-md font-medium text-start mb-2 mr-auto mt-2">
|
||||
Hold
|
||||
</span>
|
||||
<span class="text-white text-md font-medium text-start mb-2 mr-auto mt-2"> Hold </span>
|
||||
<span class="text-white text-md font-medium ml-auto">
|
||||
{holdCount}%
|
||||
</span>
|
||||
</div>
|
||||
<progress class="progress w-full {holdCount >= 50 ? '[&::-webkit-progress-value]:bg-[#10DB06] [&::-moz-progress-bar]:bg-[#10DB06]' : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}" value={holdCount} max="100"></progress>
|
||||
<progress
|
||||
class="progress w-full {holdCount >= 50 ? '[&::-webkit-progress-value]:bg-[#10DB06] [&::-moz-progress-bar]:bg-[#10DB06]' : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}"
|
||||
value={holdCount}
|
||||
max="100"
|
||||
></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 mb-5 flex flex-row items-center">
|
||||
<div class="flex flex-col -mt-2 w-full">
|
||||
<div class="flex flex-row items-center w-full">
|
||||
<span class="text-white text-md font-medium text-start mb-2 mr-auto mt-2">
|
||||
Sell
|
||||
</span>
|
||||
<span class="text-white text-md font-medium text-start mb-2 mr-auto mt-2"> Sell </span>
|
||||
<span class="text-white text-md font-medium ml-auto">
|
||||
{sellCount}
|
||||
</span>
|
||||
</div>
|
||||
<progress class="progress w-full {sellCount >= 50 ? '[&::-webkit-progress-value]:bg-[#10DB06] [&::-moz-progress-bar]:bg-[#10DB06]' : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}" value={sellCount} max="100"></progress>
|
||||
<progress
|
||||
class="progress w-full {sellCount >= 50 ? '[&::-webkit-progress-value]:bg-[#10DB06] [&::-moz-progress-bar]:bg-[#10DB06]' : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}"
|
||||
value={sellCount}
|
||||
max="100"
|
||||
></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
{:else}
|
||||
<div class=" mt-20 flex justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
|
||||
No data available
|
||||
</div>
|
||||
<div class=" mt-20 flex justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--End Mobile Analyst Card-->
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script lang ='ts'>
|
||||
import { analystInsightComponent, stockTicker, getCache, setCache} from '$lib/store';
|
||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||
<script lang="ts">
|
||||
import { analystInsightComponent, stockTicker, getCache, setCache } from "$lib/store";
|
||||
import InfoModal from "$lib/components/InfoModal.svelte";
|
||||
|
||||
export let data;
|
||||
|
||||
@ -8,8 +8,7 @@
|
||||
|
||||
let rawData = {};
|
||||
|
||||
|
||||
function latestInfoDate(inputDate) {
|
||||
function latestInfoDate(inputDate) {
|
||||
// Convert the input date string to milliseconds since epoch
|
||||
const inputDateMs = Date?.parse(inputDate);
|
||||
|
||||
@ -23,70 +22,63 @@ function latestInfoDate(inputDate) {
|
||||
const differenceInDays = Math?.floor(differenceInMs / (1000 * 60 * 60 * 24));
|
||||
|
||||
// Return the difference in days
|
||||
return differenceInDays <=1;
|
||||
}
|
||||
|
||||
return differenceInDays <= 1;
|
||||
}
|
||||
|
||||
const getAnalystInsight = async (ticker) => {
|
||||
// Get cached data for the specific tickerID
|
||||
const cachedData = getCache(ticker, 'getAnalystInsight');
|
||||
const cachedData = getCache(ticker, "getAnalystInsight");
|
||||
if (cachedData) {
|
||||
rawData = cachedData;
|
||||
} else {
|
||||
|
||||
const postData = {'ticker': ticker};
|
||||
const postData = { ticker: ticker };
|
||||
// make the POST request to the endpoint
|
||||
const response = await fetch(data?.apiURL + '/analyst-insight', {
|
||||
method: 'POST',
|
||||
const response = await fetch(data?.apiURL + "/analyst-insight", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json", "X-API-KEY": data?.apiKey
|
||||
"Content-Type": "application/json",
|
||||
"X-API-KEY": data?.apiKey,
|
||||
},
|
||||
body: JSON.stringify(postData)
|
||||
body: JSON.stringify(postData),
|
||||
});
|
||||
|
||||
rawData = await response.json();
|
||||
// Cache the data for this specific tickerID with a specific name 'getAnalystInsight'
|
||||
setCache(ticker, rawData, 'getAnalystInsight');
|
||||
setCache(ticker, rawData, "getAnalystInsight");
|
||||
}
|
||||
|
||||
if(Object?.keys(rawData)?.length !== 0) {
|
||||
if (Object?.keys(rawData)?.length !== 0) {
|
||||
$analystInsightComponent = true;
|
||||
} else {
|
||||
$analystInsightComponent = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
$: {
|
||||
if($stockTicker && typeof window !== 'undefined') {
|
||||
isLoaded=false;
|
||||
if ($stockTicker && typeof window !== "undefined") {
|
||||
isLoaded = false;
|
||||
const ticker = $stockTicker;
|
||||
const asyncFunctions = [
|
||||
getAnalystInsight(ticker)
|
||||
];
|
||||
const asyncFunctions = [getAnalystInsight(ticker)];
|
||||
Promise.all(asyncFunctions)
|
||||
.then((results) => {
|
||||
})
|
||||
.then((results) => {})
|
||||
.catch((error) => {
|
||||
console.error('An error occurred:', error);
|
||||
console.error("An error occurred:", error);
|
||||
});
|
||||
isLoaded = true;
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<section class="overflow-hidden text-white h-full pb-8">
|
||||
<main class="overflow-hidden ">
|
||||
|
||||
<section class="overflow-hidden text-white h-full pb-8">
|
||||
<main class="overflow-hidden">
|
||||
<div class="flex flex-row items-center">
|
||||
<label for="analystInsightInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
|
||||
<svg class="w-6 h-6 sm:w-7 sm:h-7 inline-block mr-1 mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M20.562 10.188c.25-.688.313-1.376.25-2.063c-.062-.687-.312-1.375-.625-2c-.562-.937-1.375-1.687-2.312-2.125c-1-.437-2.063-.562-3.125-.312c-.5-.5-1.063-.938-1.688-1.25S11.687 2 11 2a5.17 5.17 0 0 0-3 .938c-.875.624-1.5 1.5-1.813 2.5c-.75.187-1.375.5-2 .875c-.562.437-1 1-1.375 1.562c-.562.938-.75 2-.625 3.063a5.44 5.44 0 0 0 1.25 2.874a4.7 4.7 0 0 0-.25 2.063c.063.688.313 1.375.625 2c.563.938 1.375 1.688 2.313 2.125c1 .438 2.062.563 3.125.313c.5.5 1.062.937 1.687 1.25S12.312 22 13 22a5.17 5.17 0 0 0 3-.937c.875-.625 1.5-1.5 1.812-2.5a4.54 4.54 0 0 0 1.938-.875c.562-.438 1.062-.938 1.375-1.563c.562-.937.75-2 .625-3.062c-.125-1.063-.5-2.063-1.188-2.876m-7.5 10.5c-1 0-1.75-.313-2.437-.875c0 0 .062-.063.125-.063l4-2.312a.5.5 0 0 0 .25-.25a.57.57 0 0 0 .062-.313V11.25l1.688 1v4.625a3.685 3.685 0 0 1-3.688 3.813M5 17.25c-.438-.75-.625-1.625-.438-2.5c0 0 .063.063.125.063l4 2.312a.56.56 0 0 0 .313.063c.125 0 .25 0 .312-.063l4.875-2.812v1.937l-4.062 2.375A3.7 3.7 0 0 1 7.312 19c-1-.25-1.812-.875-2.312-1.75M3.937 8.563a3.8 3.8 0 0 1 1.938-1.626v4.751c0 .124 0 .25.062.312a.5.5 0 0 0 .25.25l4.875 2.813l-1.687 1l-4-2.313a3.7 3.7 0 0 1-1.75-2.25c-.25-.937-.188-2.062.312-2.937M17.75 11.75l-4.875-2.812l1.687-1l4 2.312c.625.375 1.125.875 1.438 1.5s.5 1.313.437 2.063a3.7 3.7 0 0 1-.75 1.937c-.437.563-1 1-1.687 1.25v-4.75c0-.125 0-.25-.063-.312c0 0-.062-.126-.187-.188m1.687-2.5s-.062-.062-.125-.062l-4-2.313c-.125-.062-.187-.062-.312-.062s-.25 0-.313.062L9.812 9.688V7.75l4.063-2.375c.625-.375 1.312-.5 2.062-.5c.688 0 1.375.25 2 .688c.563.437 1.063 1 1.313 1.625s.312 1.375.187 2.062m-10.5 3.5l-1.687-1V7.063c0-.688.187-1.438.562-2C8.187 4.438 8.75 4 9.375 3.688a3.37 3.37 0 0 1 2.062-.313c.688.063 1.375.375 1.938.813c0 0-.063.062-.125.062l-4 2.313a.5.5 0 0 0-.25.25c-.063.125-.063.187-.063.312zm.875-2L12 9.5l2.187 1.25v2.5L12 14.5l-2.188-1.25z"/></svg>
|
||||
<svg class="w-6 h-6 sm:w-7 sm:h-7 inline-block mr-1 mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="#fff"
|
||||
d="M20.562 10.188c.25-.688.313-1.376.25-2.063c-.062-.687-.312-1.375-.625-2c-.562-.937-1.375-1.687-2.312-2.125c-1-.437-2.063-.562-3.125-.312c-.5-.5-1.063-.938-1.688-1.25S11.687 2 11 2a5.17 5.17 0 0 0-3 .938c-.875.624-1.5 1.5-1.813 2.5c-.75.187-1.375.5-2 .875c-.562.437-1 1-1.375 1.562c-.562.938-.75 2-.625 3.063a5.44 5.44 0 0 0 1.25 2.874a4.7 4.7 0 0 0-.25 2.063c.063.688.313 1.375.625 2c.563.938 1.375 1.688 2.313 2.125c1 .438 2.062.563 3.125.313c.5.5 1.062.937 1.687 1.25S12.312 22 13 22a5.17 5.17 0 0 0 3-.937c.875-.625 1.5-1.5 1.812-2.5a4.54 4.54 0 0 0 1.938-.875c.562-.438 1.062-.938 1.375-1.563c.562-.937.75-2 .625-3.062c-.125-1.063-.5-2.063-1.188-2.876m-7.5 10.5c-1 0-1.75-.313-2.437-.875c0 0 .062-.063.125-.063l4-2.312a.5.5 0 0 0 .25-.25a.57.57 0 0 0 .062-.313V11.25l1.688 1v4.625a3.685 3.685 0 0 1-3.688 3.813M5 17.25c-.438-.75-.625-1.625-.438-2.5c0 0 .063.063.125.063l4 2.312a.56.56 0 0 0 .313.063c.125 0 .25 0 .312-.063l4.875-2.812v1.937l-4.062 2.375A3.7 3.7 0 0 1 7.312 19c-1-.25-1.812-.875-2.312-1.75M3.937 8.563a3.8 3.8 0 0 1 1.938-1.626v4.751c0 .124 0 .25.062.312a.5.5 0 0 0 .25.25l4.875 2.813l-1.687 1l-4-2.313a3.7 3.7 0 0 1-1.75-2.25c-.25-.937-.188-2.062.312-2.937M17.75 11.75l-4.875-2.812l1.687-1l4 2.312c.625.375 1.125.875 1.438 1.5s.5 1.313.437 2.063a3.7 3.7 0 0 1-.75 1.937c-.437.563-1 1-1.687 1.25v-4.75c0-.125 0-.25-.063-.312c0 0-.062-.126-.187-.188m1.687-2.5s-.062-.062-.125-.062l-4-2.313c-.125-.062-.187-.062-.312-.062s-.25 0-.313.062L9.812 9.688V7.75l4.063-2.375c.625-.375 1.312-.5 2.062-.5c.688 0 1.375.25 2 .688c.563.437 1.063 1 1.313 1.625s.312 1.375.187 2.062m-10.5 3.5l-1.687-1V7.063c0-.688.187-1.438.562-2C8.187 4.438 8.75 4 9.375 3.688a3.37 3.37 0 0 1 2.062-.313c.688.063 1.375.375 1.938.813c0 0-.063.062-.125.062l-4 2.313a.5.5 0 0 0-.25.25c-.063.125-.063.187-.063.312zm.875-2L12 9.5l2.187 1.25v2.5L12 14.5l-2.188-1.25z"
|
||||
/></svg
|
||||
>
|
||||
AI Analyst Insight
|
||||
</label>
|
||||
<InfoModal
|
||||
@ -96,37 +88,25 @@ function latestInfoDate(inputDate) {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if data?.user?.tier === 'Pro'}
|
||||
{#if data?.user?.tier === "Pro"}
|
||||
{#if isLoaded}
|
||||
|
||||
{#if Object?.keys(rawData)?.length !== 0}
|
||||
|
||||
<div class="w-full flex flex-col items-start">
|
||||
<div class="text-white text-[1rem] mt-2 mb-2 w-full">
|
||||
The AI model summarizes the latest Wallstreet Analyst Insight Report and extracts key points for you, focusing on what matters most.
|
||||
<div class="text-white text-[1rem] mt-2 mb-2 w-full">The AI model summarizes the latest Wallstreet Analyst Insight Report and extracts key points for you, focusing on what matters most.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="w-full mt-4">
|
||||
|
||||
<a href="{'/stocks/'+$stockTicker+'/analyst'}" class="text-blue-400 hover:text-white flex justify-end mb-3 text-sm sm:text-[1rem]">
|
||||
See All Ratings
|
||||
</a>
|
||||
<a href={"/stocks/" + $stockTicker + "/forecast/analyst"} class="text-blue-400 hover:text-white flex justify-end mb-3 text-sm sm:text-[1rem]"> See All Ratings </a>
|
||||
|
||||
<div class="relative">
|
||||
<div class="">
|
||||
|
||||
<div class="flex justify-center ">
|
||||
<div class="flex justify-center">
|
||||
<!--<div class="{rawData.changesPercentage >= 0 ? 'bg-[#10DB06]' : 'bg-[#FF2F1F]'} w-1.5 mb-5 rounded-l-xl" />-->
|
||||
|
||||
<!--Start Item-->
|
||||
<div class="flex flex-row items-center w-full mb-6">
|
||||
|
||||
<div class="w-full rounded-lg {latestInfoDate(rawData?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1]' : 'bg-[#27272A]'} shadow-lg h-full pl-3 pt-2 pb-4">
|
||||
<div class="flex flex-col items-start">
|
||||
|
||||
<div class="flex flex-row items-start w-full pt-2">
|
||||
<span class="text-white text-[0.915rem] pl-2 italic">Last Report from {rawData.date}</span>
|
||||
{#if latestInfoDate(rawData.date)}
|
||||
@ -135,28 +115,19 @@ function latestInfoDate(inputDate) {
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col w-full pt-3 pl-2 pr-2 sm:pr-4">
|
||||
<span class="text-white text-[1rem] ">
|
||||
<span class="text-white text-[1rem]">
|
||||
{rawData?.insight}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--End Item-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{/if}
|
||||
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<div class="relative">
|
||||
@ -166,26 +137,21 @@ function latestInfoDate(inputDate) {
|
||||
</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>
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.app {
|
||||
height: 300px;
|
||||
max-width: 100%; /* Ensure chart width doesn't exceed the container */
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
@ -197,5 +163,4 @@ function latestInfoDate(inputDate) {
|
||||
.chart {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,20 +1,56 @@
|
||||
<script lang="ts">
|
||||
import { AreaSeries, Chart, PriceLine, CandlestickSeries } from "svelte-lightweight-charts";
|
||||
|
||||
import {AreaSeries, Chart, PriceLine, CandlestickSeries} from 'svelte-lightweight-charts';
|
||||
|
||||
import { TrackingModeExitMode } from 'lightweight-charts';
|
||||
import {getCache, setCache, corporateLobbyingComponent, taRatingComponent, swapComponent, analystInsightComponent, governmentContractComponent, optionsNetFlowComponent, borrowedShareComponent, clinicalTrialComponent, optionComponent, failToDeliverComponent, marketMakerComponent, analystEstimateComponent, sentimentComponent, screenWidth, displayCompanyName, numberOfUnreadNotification, globalForm, varComponent, shareStatisticsComponent, enterpriseComponent, darkPoolComponent, retailVolumeComponent, shareholderComponent, trendAnalysisComponent, revenueSegmentationComponent, priceAnalysisComponent, fundamentalAnalysisComponent, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, stockTicker, isOpen, isBeforeMarketOpen, isWeekend} from '$lib/store';
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import BullBearSay from '$lib/components/BullBearSay.svelte';
|
||||
import NextEarnings from '$lib/components/NextEarnings.svelte';
|
||||
import CommunitySentiment from '$lib/components/CommunitySentiment.svelte';
|
||||
import Lazy from '$lib/components/Lazy.svelte';
|
||||
|
||||
import { TrackingModeExitMode } from "lightweight-charts";
|
||||
import {
|
||||
getCache,
|
||||
setCache,
|
||||
corporateLobbyingComponent,
|
||||
taRatingComponent,
|
||||
swapComponent,
|
||||
analystInsightComponent,
|
||||
governmentContractComponent,
|
||||
optionsNetFlowComponent,
|
||||
borrowedShareComponent,
|
||||
clinicalTrialComponent,
|
||||
optionComponent,
|
||||
failToDeliverComponent,
|
||||
marketMakerComponent,
|
||||
analystEstimateComponent,
|
||||
sentimentComponent,
|
||||
screenWidth,
|
||||
displayCompanyName,
|
||||
numberOfUnreadNotification,
|
||||
globalForm,
|
||||
varComponent,
|
||||
shareStatisticsComponent,
|
||||
enterpriseComponent,
|
||||
darkPoolComponent,
|
||||
retailVolumeComponent,
|
||||
shareholderComponent,
|
||||
trendAnalysisComponent,
|
||||
revenueSegmentationComponent,
|
||||
priceAnalysisComponent,
|
||||
fundamentalAnalysisComponent,
|
||||
isCrosshairMoveActive,
|
||||
realtimePrice,
|
||||
priceIncrease,
|
||||
currentPortfolioPrice,
|
||||
stockTicker,
|
||||
isOpen,
|
||||
isBeforeMarketOpen,
|
||||
isWeekend,
|
||||
} from "$lib/store";
|
||||
import { onDestroy, onMount } from "svelte";
|
||||
import BullBearSay from "$lib/components/BullBearSay.svelte";
|
||||
import NextEarnings from "$lib/components/NextEarnings.svelte";
|
||||
import CommunitySentiment from "$lib/components/CommunitySentiment.svelte";
|
||||
import Lazy from "$lib/components/Lazy.svelte";
|
||||
|
||||
export let data;
|
||||
export let form;
|
||||
|
||||
let displayChartType = 'line';
|
||||
let displayChartType = "line";
|
||||
|
||||
let prePostData = {};
|
||||
let communitySentiment = {};
|
||||
@ -618,73 +654,64 @@
|
||||
{#if $isBeforeMarketOpen && !$isOpen && !$isWeekend}
|
||||
<div class="flex flex-row items-center justify-end text-white text-[0.65rem] sm:text-sm font-normal text-end w-24">
|
||||
<span>Pre-market:</span>
|
||||
<svg class="ml-1 w-4 h-4 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#EA9703" d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0m72 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64m-16 0a48 48 0 1 0-48 48a48.05 48.05 0 0 0 48-48M58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32M192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72m5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8m80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8m112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16"/></svg>
|
||||
<svg class="ml-1 w-4 h-4 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#EA9703"
|
||||
d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0m72 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64m-16 0a48 48 0 1 0-48 48a48.05 48.05 0 0 0 48-48M58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32M192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72m5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8m80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8m112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-row items-center justify-end text-white text-[0.65rem] sm:text-sm font-normal text-end w-28">
|
||||
<span>Post-market:</span>
|
||||
<svg class="ml-1 w-4 h-4 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#70A1EF" d="M232.13 143.64a6 6 0 0 0-6-1.49a90.07 90.07 0 0 1-112.27-112.3a6 6 0 0 0-7.49-7.48a102.88 102.88 0 0 0-51.89 36.31a102 102 0 0 0 142.84 142.84a102.88 102.88 0 0 0 36.31-51.89a6 6 0 0 0-1.5-5.99m-42 48.29a90 90 0 0 1-126-126a90.9 90.9 0 0 1 35.52-28.27a102.06 102.06 0 0 0 118.69 118.69a90.9 90.9 0 0 1-28.24 35.58Z"/></svg>
|
||||
<svg class="ml-1 w-4 h-4 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#70A1EF"
|
||||
d="M232.13 143.64a6 6 0 0 0-6-1.49a90.07 90.07 0 0 1-112.27-112.3a6 6 0 0 0-7.49-7.48a102.88 102.88 0 0 0-51.89 36.31a102 102 0 0 0 142.84 142.84a102.88 102.88 0 0 0 36.31-51.89a6 6 0 0 0-1.5-5.99m-42 48.29a90 90 0 0 1-126-126a90.9 90.9 0 0 1 35.52-28.27a102.06 102.06 0 0 0 118.69 118.69a90.9 90.9 0 0 1-28.24 35.58Z"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-----End-Header-CandleChart-Indicators------>
|
||||
<!--Start Time Interval-->
|
||||
<div class="hidden sm:flex flex-row items-center pl-1 sm:pl-6 w-full mt-4">
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<button on:click={() => changeData('1D')} class="text-sm font-medium text-gray-400 {displayData === '1D' ? 'text-white ' : 'bg-[#09090B]'}">
|
||||
1D
|
||||
</button>
|
||||
<button on:click={() => changeData("1D")} class="text-sm font-medium text-gray-400 {displayData === '1D' ? 'text-white ' : 'bg-[#09090B]'}"> 1D </button>
|
||||
<div class="{displayData === '1D' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem] rounded-full" />
|
||||
</div>
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<button on:click={() => (changeData('1W'))} class="w-full text-sm font-medium text-gray-400 {displayData === '1W' ? 'text-white ' : 'bg-[#09090B]'}">
|
||||
1W
|
||||
</button>
|
||||
<button on:click={() => changeData("1W")} class="w-full text-sm font-medium text-gray-400 {displayData === '1W' ? 'text-white ' : 'bg-[#09090B]'}"> 1W </button>
|
||||
<div class="{displayData === '1W' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
|
||||
</div>
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<button on:click={() => (changeData('1M'))} class="text-sm font-medium text-gray-400 {displayData === '1M' ? 'text-white ' : 'bg-[#09090B]'}">
|
||||
1M
|
||||
</button>
|
||||
<button on:click={() => changeData("1M")} class="text-sm font-medium text-gray-400 {displayData === '1M' ? 'text-white ' : 'bg-[#09090B]'}"> 1M </button>
|
||||
<div class="{displayData === '1M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
|
||||
</div>
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<button on:click={() => changeData('6M')} class="text-sm font-medium text-gray-400 {displayData === '6M' ? 'text-white ' : 'bg-[#09090B]'}">
|
||||
6M
|
||||
</button>
|
||||
<button on:click={() => changeData("6M")} class="text-sm font-medium text-gray-400 {displayData === '6M' ? 'text-white ' : 'bg-[#09090B]'}"> 6M </button>
|
||||
<div class="{displayData === '6M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
|
||||
</div>
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<button on:click={() => changeData('1Y')} class="text-sm font-medium text-gray-400 {displayData === '1Y' ? 'text-white ' : 'bg-[#09090B]'}">
|
||||
1Y
|
||||
</button>
|
||||
<button on:click={() => changeData("1Y")} class="text-sm font-medium text-gray-400 {displayData === '1Y' ? 'text-white ' : 'bg-[#09090B]'}"> 1Y </button>
|
||||
<div class="{displayData === '1Y' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<button on:click={() => changeData('MAX')} class="text-sm font-medium text-gray-400 {displayData === 'MAX' ? 'text-white ' : 'bg-[#09090B]'}">
|
||||
MAX
|
||||
</button>
|
||||
<button on:click={() => changeData("MAX")} class="text-sm font-medium text-gray-400 {displayData === 'MAX' ? 'text-white ' : 'bg-[#09090B]'}"> MAX </button>
|
||||
<div class="{displayData === 'MAX' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-[#27272A] sm:hover:bg-[#303030] duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
|
||||
{#if displayChartType === 'line'}
|
||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z"/></svg>
|
||||
{#if displayChartType === "line"}
|
||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z" /></svg>
|
||||
{:else}
|
||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5L9 10l4 6l8-9.5"/></svg>
|
||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5L9 10l4 6l8-9.5" /></svg>
|
||||
{/if}
|
||||
</label>
|
||||
|
||||
</div>
|
||||
<!--End Time Interval-->
|
||||
|
||||
@ -692,37 +719,23 @@
|
||||
<!-- Start Graph -->
|
||||
|
||||
{#if output !== null}
|
||||
<div class ="w-full sm:pl-7 ml-auto max-w-5xl mb-10">
|
||||
{#if displayData === '1D' && oneDayPrice?.length === 0}
|
||||
<h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
|
||||
No data available
|
||||
</h2>
|
||||
{:else if displayData === '1W' && oneWeekPrice?.length === 0}
|
||||
<h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
|
||||
No data available
|
||||
</h2>
|
||||
{:else if displayData === '1M' && oneMonthPrice?.length === 0}
|
||||
<h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
|
||||
No data available
|
||||
</h2>
|
||||
{:else if displayData === '6M' && sixMonthPrice?.length === 0}
|
||||
<h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
|
||||
No data available
|
||||
</h2>
|
||||
{:else if displayData === '1Y' && oneYearPrice?.length === 0}
|
||||
<h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
|
||||
No data available
|
||||
</h2>
|
||||
{:else if displayData === 'MAX' && threeYearPrice?.length === 0}
|
||||
<h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
|
||||
No data available
|
||||
</h2>
|
||||
<div class="w-full sm:pl-7 ml-auto max-w-5xl mb-10">
|
||||
{#if displayData === "1D" && oneDayPrice?.length === 0}
|
||||
<h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</h2>
|
||||
{:else if displayData === "1W" && oneWeekPrice?.length === 0}
|
||||
<h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</h2>
|
||||
{:else if displayData === "1M" && oneMonthPrice?.length === 0}
|
||||
<h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</h2>
|
||||
{:else if displayData === "6M" && sixMonthPrice?.length === 0}
|
||||
<h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</h2>
|
||||
{:else if displayData === "1Y" && oneYearPrice?.length === 0}
|
||||
<h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</h2>
|
||||
{:else if displayData === "MAX" && threeYearPrice?.length === 0}
|
||||
<h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</h2>
|
||||
{:else}
|
||||
|
||||
<Chart {...options} autoSize={true} ref={(ref) => chart = ref} on:crosshairMove={handleCrosshairMove} >
|
||||
|
||||
{#if displayData === '1D'}
|
||||
{#if displayChartType === 'line'}
|
||||
<Chart {...options} autoSize={true} ref={(ref) => (chart = ref)} on:crosshairMove={handleCrosshairMove}>
|
||||
{#if displayData === "1D"}
|
||||
{#if displayChartType === "line"}
|
||||
<AreaSeries
|
||||
data={oneDayPrice?.map(({ time, close }) => ({ time, value: close }))}
|
||||
lineWidth={1.5}
|
||||
@ -732,31 +745,18 @@
|
||||
bottomColor={bottomColorChange}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
priceLineVisible={false}
|
||||
lastPriceAnimation={1}
|
||||
>
|
||||
<PriceLine
|
||||
price={oneDayPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
<PriceLine price={oneDayPrice?.at(0)?.close} lineWidth={1} color="#fff" />
|
||||
</AreaSeries>
|
||||
{:else}
|
||||
<CandlestickSeries
|
||||
data={oneDayPrice}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
>
|
||||
<PriceLine
|
||||
price={oneDayPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
<CandlestickSeries data={oneDayPrice} crosshairMarkerVisible={false} ref={handleSeriesReference} priceLineVisible={false}>
|
||||
<PriceLine price={oneDayPrice?.at(0)?.close} lineWidth={1} color="#fff" />
|
||||
</CandlestickSeries>
|
||||
{/if}
|
||||
{:else if displayData === '1W'}
|
||||
{#if displayChartType === 'line'}
|
||||
{:else if displayData === "1W"}
|
||||
{#if displayChartType === "line"}
|
||||
<AreaSeries
|
||||
data={oneWeekPrice?.map(({ time, close }) => ({ time, value: close }))}
|
||||
lineWidth={1.5}
|
||||
@ -766,32 +766,18 @@
|
||||
bottomColor={bottomColorChange}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
priceLineVisible={false}
|
||||
lastPriceAnimation={1}
|
||||
>
|
||||
<PriceLine
|
||||
price={oneWeekPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
<PriceLine price={oneWeekPrice?.at(0)?.close} lineWidth={1} color="#fff" />
|
||||
</AreaSeries>
|
||||
{:else}
|
||||
<CandlestickSeries
|
||||
data={oneWeekPrice}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
>
|
||||
<PriceLine
|
||||
price={oneWeekPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
<CandlestickSeries data={oneWeekPrice} crosshairMarkerVisible={false} ref={handleSeriesReference} priceLineVisible={false}>
|
||||
<PriceLine price={oneWeekPrice?.at(0)?.close} lineWidth={1} color="#fff" />
|
||||
</CandlestickSeries>
|
||||
{/if}
|
||||
|
||||
{:else if displayData === '1M'}
|
||||
{#if displayChartType === 'line'}
|
||||
{:else if displayData === "1M"}
|
||||
{#if displayChartType === "line"}
|
||||
<AreaSeries
|
||||
data={oneMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
|
||||
lineWidth={1.5}
|
||||
@ -801,33 +787,18 @@
|
||||
bottomColor={bottomColorChange}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
priceLineVisible={false}
|
||||
lastPriceAnimation={1}
|
||||
>
|
||||
<PriceLine
|
||||
price={oneMonthPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
<PriceLine price={oneMonthPrice?.at(0)?.close} lineWidth={1} color="#fff" />
|
||||
</AreaSeries>
|
||||
{:else}
|
||||
<CandlestickSeries
|
||||
data={oneMonthPrice}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
>
|
||||
<PriceLine
|
||||
price={oneMonthPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
<CandlestickSeries data={oneMonthPrice} crosshairMarkerVisible={false} ref={handleSeriesReference} priceLineVisible={false}>
|
||||
<PriceLine price={oneMonthPrice?.at(0)?.close} lineWidth={1} color="#fff" />
|
||||
</CandlestickSeries>
|
||||
{/if}
|
||||
|
||||
|
||||
{:else if displayData === '6M'}
|
||||
{#if displayChartType === 'line'}
|
||||
{:else if displayData === "6M"}
|
||||
{#if displayChartType === "line"}
|
||||
<AreaSeries
|
||||
data={sixMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
|
||||
lineWidth={1.5}
|
||||
@ -837,34 +808,18 @@
|
||||
bottomColor={bottomColorChange}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
priceLineVisible={false}
|
||||
lastPriceAnimation={1}
|
||||
>
|
||||
<PriceLine
|
||||
price={sixMonthPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
<PriceLine price={sixMonthPrice?.at(0)?.close} lineWidth={1} color="#fff" />
|
||||
</AreaSeries>
|
||||
{:else}
|
||||
<CandlestickSeries
|
||||
data={sixMonthPrice}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
>
|
||||
<PriceLine
|
||||
price={sixMonthPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
<CandlestickSeries data={sixMonthPrice} crosshairMarkerVisible={false} ref={handleSeriesReference} priceLineVisible={false}>
|
||||
<PriceLine price={sixMonthPrice?.at(0)?.close} lineWidth={1} color="#fff" />
|
||||
</CandlestickSeries>
|
||||
{/if}
|
||||
|
||||
|
||||
|
||||
{:else if displayData === '1Y'}
|
||||
{#if displayChartType === 'line'}
|
||||
{:else if displayData === "1Y"}
|
||||
{#if displayChartType === "line"}
|
||||
<AreaSeries
|
||||
data={oneYearPrice?.map(({ time, close }) => ({ time, value: close }))}
|
||||
lineWidth={1.5}
|
||||
@ -874,34 +829,18 @@
|
||||
bottomColor={bottomColorChange}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
priceLineVisible={false}
|
||||
lastPriceAnimation={1}
|
||||
>
|
||||
<PriceLine
|
||||
price={oneYearPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
<PriceLine price={oneYearPrice?.at(0)?.close} lineWidth={1} color="#fff" />
|
||||
</AreaSeries>
|
||||
{:else}
|
||||
<CandlestickSeries
|
||||
data={oneYearPrice}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
>
|
||||
<PriceLine
|
||||
price={oneYearPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
<CandlestickSeries data={oneYearPrice} crosshairMarkerVisible={false} ref={handleSeriesReference} priceLineVisible={false}>
|
||||
<PriceLine price={oneYearPrice?.at(0)?.close} lineWidth={1} color="#fff" />
|
||||
</CandlestickSeries>
|
||||
{/if}
|
||||
|
||||
|
||||
|
||||
{:else if displayData === 'MAX'}
|
||||
{#if displayChartType === 'line'}
|
||||
{:else if displayData === "MAX"}
|
||||
{#if displayChartType === "line"}
|
||||
<AreaSeries
|
||||
data={threeYearPrice?.map(({ time, close }) => ({ time, value: close }))}
|
||||
lineWidth={1.5}
|
||||
@ -911,35 +850,19 @@
|
||||
bottomColor={bottomColorChange}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
priceLineVisible={false}
|
||||
lastPriceAnimation={1}
|
||||
>
|
||||
<PriceLine
|
||||
price={threeYearPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
<PriceLine price={threeYearPrice?.at(0)?.close} lineWidth={1} color="#fff" />
|
||||
</AreaSeries>
|
||||
{:else}
|
||||
<CandlestickSeries
|
||||
data={threeYearPrice}
|
||||
crosshairMarkerVisible={false}
|
||||
ref={handleSeriesReference}
|
||||
priceLineVisible= {false}
|
||||
>
|
||||
<PriceLine
|
||||
price={threeYearPrice?.at(0)?.close}
|
||||
lineWidth = {1}
|
||||
color="#fff"
|
||||
/>
|
||||
<CandlestickSeries data={threeYearPrice} crosshairMarkerVisible={false} ref={handleSeriesReference} priceLineVisible={false}>
|
||||
<PriceLine price={threeYearPrice?.at(0)?.close} lineWidth={1} color="#fff" />
|
||||
</CandlestickSeries>
|
||||
{/if}
|
||||
|
||||
|
||||
{/if}
|
||||
</Chart>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
{:else}
|
||||
<!-- else output not loaded yet-->
|
||||
@ -957,200 +880,126 @@
|
||||
<!--Start Time Interval-->
|
||||
<div class="pl-1 w-screen sm:hidden flex flex-row items-center">
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<button on:click={() => changeData('1D')} class="text-sm font-medium text-gray-400 {displayData === '1D' ? 'text-white ' : 'bg-[#09090B]'}">
|
||||
1D
|
||||
</button>
|
||||
<button on:click={() => changeData("1D")} class="text-sm font-medium text-gray-400 {displayData === '1D' ? 'text-white ' : 'bg-[#09090B]'}"> 1D </button>
|
||||
<div class="{displayData === '1D' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem] rounded-full" />
|
||||
</div>
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<button on:click={() => (changeData('1W'))} class="w-full text-sm font-medium text-gray-400 {displayData === '1W' ? 'text-white ' : 'bg-[#09090B]'}">
|
||||
1W
|
||||
</button>
|
||||
<button on:click={() => changeData("1W")} class="w-full text-sm font-medium text-gray-400 {displayData === '1W' ? 'text-white ' : 'bg-[#09090B]'}"> 1W </button>
|
||||
<div class="{displayData === '1W' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
|
||||
</div>
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<button on:click={() => (changeData('1M'))} class="text-sm font-medium text-gray-400 {displayData === '1M' ? 'text-white ' : 'bg-[#09090B]'}">
|
||||
1M
|
||||
</button>
|
||||
<button on:click={() => changeData("1M")} class="text-sm font-medium text-gray-400 {displayData === '1M' ? 'text-white ' : 'bg-[#09090B]'}"> 1M </button>
|
||||
<div class="{displayData === '1M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
|
||||
</div>
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<button on:click={() => changeData('6M')} class="text-sm font-medium text-gray-400 {displayData === '6M' ? 'text-white ' : 'bg-[#09090B]'}">
|
||||
6M
|
||||
</button>
|
||||
<button on:click={() => changeData("6M")} class="text-sm font-medium text-gray-400 {displayData === '6M' ? 'text-white ' : 'bg-[#09090B]'}"> 6M </button>
|
||||
<div class="{displayData === '6M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
|
||||
</div>
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<button on:click={() => changeData('1Y')} class="text-sm font-medium text-gray-400 {displayData === '1Y' ? 'text-white ' : 'bg-[#09090B]'}">
|
||||
1Y
|
||||
</button>
|
||||
<button on:click={() => changeData("1Y")} class="text-sm font-medium text-gray-400 {displayData === '1Y' ? 'text-white ' : 'bg-[#09090B]'}"> 1Y </button>
|
||||
<div class="{displayData === '1Y' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<button on:click={() => changeData('MAX')} class="text-sm font-medium text-gray-400 {displayData === 'MAX' ? 'text-white ' : 'bg-[#09090B]'}">
|
||||
MAX
|
||||
</button>
|
||||
<button on:click={() => changeData("MAX")} class="text-sm font-medium text-gray-400 {displayData === 'MAX' ? 'text-white ' : 'bg-[#09090B]'}"> MAX </button>
|
||||
<div class="{displayData === 'MAX' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!--End Time Interval-->
|
||||
|
||||
|
||||
<div class="w-full mt-14 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
|
||||
<CommunitySentiment communitySentiment={communitySentiment}/>
|
||||
<CommunitySentiment {communitySentiment} />
|
||||
</div>
|
||||
|
||||
{#if $screenWidth <= 1022}
|
||||
<!--BUG: Dont remove since when changing ETF symbol display freezes-->
|
||||
|
||||
{#if $screenWidth <= 1022} <!--BUG: Dont remove since when changing ETF symbol display freezes-->
|
||||
|
||||
<div class="w-full mt-10 m-auto sm:p-6 lg:hidden ">
|
||||
<div class="w-full mt-10 m-auto sm:p-6 lg:hidden">
|
||||
<Lazy>
|
||||
<h3 class="cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
|
||||
Key Information
|
||||
</h3>
|
||||
{#await import('$lib/components/StockKeyInformation.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp}
|
||||
data={data} />
|
||||
<h3 class="cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">Key Information</h3>
|
||||
{#await import("$lib/components/StockKeyInformation.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} {data} />
|
||||
{/await}
|
||||
</Lazy>
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
<div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(data?.getNextEarnings || {})?.length !== 0 ? '' : 'hidden'}">
|
||||
<NextEarnings data={data}/>
|
||||
<NextEarnings {data} />
|
||||
</div>
|
||||
|
||||
<div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(data?.getBullBearSay || {})?.length !== 0 ? '' : 'hidden'}">
|
||||
<BullBearSay data={data}/>
|
||||
<BullBearSay {data} />
|
||||
</div>
|
||||
|
||||
<Lazy>
|
||||
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {data?.getWhyPriceMoved?.length !== 0 ? '' : 'hidden'}">
|
||||
{#await import('$lib/components/WIIM.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} data={data} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
|
||||
<Lazy>
|
||||
<div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pt-6 {!$analystInsightComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/AnalystInsight.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} data={data} />
|
||||
{#await import("$lib/components/WIIM.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 {!$clinicalTrialComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/ClinicalTrial.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} data={data} />
|
||||
{#await import("$lib/components/ClinicalTrial.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 {!$priceAnalysisComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/PriceAnalysis.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 {!$trendAnalysisComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/TrendAnalysis.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 {!$fundamentalAnalysisComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/FundamentalAnalysis.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 {!$sentimentComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/SentimentAnalysis.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} data={data} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
|
||||
<Lazy>
|
||||
<div class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$varComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/VaR.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} data={data} />
|
||||
{#await import("$lib/components/VaR.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} {data} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
|
||||
|
||||
<Lazy>
|
||||
<div class="w-full m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$analystEstimateComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/AnalystEstimate.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:pt-6 {!$governmentContractComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/GovernmentContract.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} data={data} />
|
||||
{#await import("$lib/components/GovernmentContract.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 {!$corporateLobbyingComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/CorporateLobbying.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} data={data} />
|
||||
{#await import("$lib/components/CorporateLobbying.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 {!$swapComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/Swap.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} data={data} />
|
||||
{#await import("$lib/components/Swap.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 {!$enterpriseComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/Enterprise.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} data={data} />
|
||||
{#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 ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/OptionsData.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} data={data} />
|
||||
{#await import("$lib/components/OptionsData.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 {!$optionsNetFlowComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/OptionsNetFlow.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} data={data} />
|
||||
{#await import("$lib/components/OptionsNetFlow.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} {data} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
@ -1165,93 +1014,72 @@
|
||||
</Lazy>
|
||||
-->
|
||||
|
||||
|
||||
<!--Start RevenueSegmentation-->
|
||||
<Lazy>
|
||||
<div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {!$revenueSegmentationComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/RevenueSegmentation.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} apiURL={data?.apiURL} apiKey={data?.apiKey} userTier={data?.user?.tier}/>
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
<!--End RevenueSegmentation-->
|
||||
|
||||
<Lazy>
|
||||
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$failToDeliverComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/FailToDeliver.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} data={data} />
|
||||
{#await import("$lib/components/FailToDeliver.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 {!$borrowedShareComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/BorrowedShare.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} data={data} />
|
||||
{#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={data} />
|
||||
{#await import("$lib/components/MarketMaker.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 {!$darkPoolComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/DarkPool.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} data={data} />
|
||||
{#await import("$lib/components/DarkPool.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 {!$retailVolumeComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/RetailVolume.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} data={data} />
|
||||
{#await import("$lib/components/RetailVolume.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 {!$shareStatisticsComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/ShareStatistics.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} data={data}/>
|
||||
{#await import("$lib/components/ShareStatistics.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} {data} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
|
||||
<!--Start Shareholders-->
|
||||
<Lazy>
|
||||
<div class="w-full sm:pl-6 sm:pb-6 sm:pt-6 m-auto mb-5 {!$shareholderComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/ShareHolders.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} data={data}/>
|
||||
{#await import("$lib/components/ShareHolders.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} {data} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
<!--End Shareholders-->
|
||||
|
||||
|
||||
|
||||
|
||||
<Lazy>
|
||||
<div class="w-full pt-10 m-auto sm:pl-6 sm:pb-6 sm:pt-6 rounded-2xl {!$taRatingComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/TARating.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} data={data}/>
|
||||
{#await import("$lib/components/TARating.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} {data} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
<Lazy>
|
||||
<div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {!$dcfComponent ? 'hidden' : ''}">
|
||||
@ -1271,34 +1099,20 @@
|
||||
|
||||
<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 import("$lib/components/StockSplits.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} stockDeck={data?.getStockDeck} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--End-Indicator-Modal-->
|
||||
|
||||
|
||||
<style lang='scss'>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--End-Indicator-Modal-->
|
||||
|
||||
<style lang="scss">
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { stockTicker, screenWidth } from "$lib/store";
|
||||
import { onDestroy } from "svelte";
|
||||
import { page } from "$app/stores";
|
||||
|
||||
let displaySubSection = "overview";
|
||||
@ -24,6 +25,9 @@
|
||||
analyst: "/forecast/analyst",
|
||||
};
|
||||
|
||||
console.log(state);
|
||||
console.log(subSectionMap[state]);
|
||||
|
||||
if (state !== "overview" && subSectionMap[state]) {
|
||||
displaySubSection = state;
|
||||
//goto(`/stocks/${$stockTicker}${subSectionMap[state]}`);
|
||||
@ -32,6 +36,17 @@
|
||||
//goto(`/stocks/${$stockTicker}/stats`);
|
||||
}
|
||||
}
|
||||
|
||||
const unsubscribe = page.subscribe(($page) => {
|
||||
const splitRoute = $page.url.pathname.split("/");
|
||||
const routeState = splitRoute[splitRoute.length - 1] !== "forecast" ? splitRoute[splitRoute.length - 1] : "overview";
|
||||
|
||||
changeSubSection(routeState);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
unsubscribe();
|
||||
});
|
||||
</script>
|
||||
|
||||
<section class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user