analyst links are workingn now
This commit is contained in:
Alexander Weber
commit
03484e6def
@ -45,7 +45,7 @@ if ($stockTicker && typeof window !== 'undefined' && typeof analystRating !== 'u
|
||||
|
||||
<!--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] -mx-1 sm:mx-0">
|
||||
<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">
|
||||
|
||||
@ -4,10 +4,10 @@ import InfoModal from '$lib/components/InfoModal.svelte';
|
||||
import { Chart } from 'svelte-echarts'
|
||||
import { abbreviateNumber, formatString } from "$lib/utils";
|
||||
import { init, use } from 'echarts/core'
|
||||
import { LineChart } from 'echarts/charts'
|
||||
import { BarChart } from 'echarts/charts'
|
||||
import { GridComponent, TooltipComponent } from 'echarts/components'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
use([LineChart, GridComponent, TooltipComponent, CanvasRenderer])
|
||||
use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
|
||||
|
||||
export let data;
|
||||
|
||||
@ -147,6 +147,7 @@ function getPlotOptions() {
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '# of Trials',
|
||||
data: valueList,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
</script>
|
||||
|
||||
<div class="sm:space-y-3">
|
||||
<div class="lg:rounded-lg shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full md:w-[420px] lg:pt-0">
|
||||
<div class="lg:rounded-lg shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#09090B] 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`});">
|
||||
|
||||
@ -14,7 +14,6 @@
|
||||
dividendHistoryList = dividendList?.history;
|
||||
|
||||
dividendYield = dividendList?.dividendYield;
|
||||
console.log(dividendList)
|
||||
|
||||
}
|
||||
}
|
||||
@ -25,7 +24,7 @@
|
||||
|
||||
<div class="space-y-3 lg:pt-5 lg:{dividendHistoryList?.length !== 0 ? '' : 'hidden'}">
|
||||
|
||||
<div class="sm:rounded-lg shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[420px]">
|
||||
<div class="sm:rounded-lg shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px]">
|
||||
|
||||
<div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
|
||||
<div class="flex flex-row items-center w-full ml-2 pb-2 p-3">
|
||||
|
||||
@ -20,23 +20,14 @@ $: {
|
||||
if ($stockTicker && typeof window !== 'undefined' && typeof stockDeck !== 'undefined' && stockDeck?.length !== 0)
|
||||
{
|
||||
|
||||
info = stockDeck[0]
|
||||
|
||||
|
||||
info = stockDeck?.at(0)
|
||||
esgScore = info?.esgScore !== 'n/a' ? Math.round(info?.esgScore.toFixed(1)) : 'n/a';
|
||||
socialScore = info?.socialScore !== 'n/a' ? Math.round(info?.socialScore.toFixed(1)) : 'n/a';
|
||||
environmentalScore = info?.environmentalScore !== 'n/a' ? Math.round(info?.environmentalScore.toFixed(1)) : 'n/a';
|
||||
governanceScore = info?.governanceScore !== 'n/a' ? Math.round(info?.governanceScore.toFixed(1)) : 'n/a';
|
||||
environmentalScore = info?.environmentalScore !== 'n/a' ? Math.round(info?.environmentalScore?.toFixed(1)) : 'n/a';
|
||||
governanceScore = info?.governanceScore !== 'n/a' ? Math.round(info?.governanceScore?.toFixed(1)) : 'n/a';
|
||||
esgRiskRating = info?.esgRiskRating;
|
||||
|
||||
};
|
||||
/*
|
||||
if (esgRatingCircleContainer)
|
||||
{
|
||||
esgRatingAcc(esgScore/100);
|
||||
}
|
||||
*/
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -50,7 +41,7 @@ $: {
|
||||
|
||||
<!--Start ESG Card -->
|
||||
<div class="space-y-3 lg:pt-5 hidden lg:block lg:{esgScore && esgRiskRating && environmentalScore && governanceScore !== 'n/a' ? '' : 'hidden'}">
|
||||
<div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto sm:h-[470px] {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] -mx-1 sm:mx-0">
|
||||
<div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto sm:h-[470px] {$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">
|
||||
@ -146,20 +137,16 @@ $: {
|
||||
<div class="bg-[#000] h-auto w-screen">
|
||||
|
||||
<!--Start Header-->
|
||||
<div class="bg-[#27272A] 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">
|
||||
<div class="w-full p-1 flex flex-col items-center pb-5 h-auto">
|
||||
<h2 class="text-center m-auto text-[1.1rem] font-semibold text-white mt-5">
|
||||
ESG Score
|
||||
</h2>
|
||||
|
||||
<div class="flex flex-col items-center mt-10 w-full">
|
||||
<span class="text-white text-center text-md text-opacity-[0.8]">
|
||||
<div class="flex flex-col items-center mt-10 mb-5 w-full px-3">
|
||||
<span class="text-white text-center text-md">
|
||||
Gain valuable insights into a company's sustainability by evaluating its ESG (Environmental, Social, and Governance) scores.
|
||||
</span>
|
||||
|
||||
<div class="flex flex-row justify-center items-center w-full mt-5">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--End Header-->
|
||||
|
||||
@ -72,7 +72,7 @@
|
||||
|
||||
<div class="w-screen overflow-y-scroll" >
|
||||
|
||||
<ETFProfileCard etfProfile = {etfProfile}/>
|
||||
<ETFProfileCard data={data} etfProfile = {etfProfile}/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
@ -6,27 +6,21 @@
|
||||
import { goto } from '$app/navigation';
|
||||
import defaultImage from '$lib/images/etf/cover/default.jpg';
|
||||
|
||||
export let logoUrl;
|
||||
export let etfProfile;
|
||||
|
||||
export let data;
|
||||
|
||||
let info;
|
||||
let imageUrl;
|
||||
|
||||
let tierList = 'S';
|
||||
let assetClass = '-';
|
||||
let aum = '-';
|
||||
let avgVolume = '-';
|
||||
let inceptionDate = '-';
|
||||
let holdingsCount = '-';
|
||||
let exchange = '-';
|
||||
let provider = '-';
|
||||
let sectorExposed;
|
||||
let country;
|
||||
let description = '';
|
||||
let website = '-';
|
||||
let snippet;
|
||||
|
||||
|
||||
let showFullText = false;
|
||||
|
||||
@ -50,13 +44,12 @@ let showFullText = false;
|
||||
description = info?.description ?? 'A detailed description of the company is not yet available.';
|
||||
website = info?.website;
|
||||
snippet= description?.slice(0, 150) + "...";
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="sm:space-y-3">
|
||||
<div class="sm:rounded-lg shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full md:w-[420px] lg:pt-0">
|
||||
<div class="sm:rounded-lg shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full md:w-[420px] xl:w-[450px] lg:pt-0">
|
||||
|
||||
<!--Start Header-->
|
||||
<div class="lg:rounded-t-sm w-full h-[130px] bg-[#09090B] p-3 flex flex-col bg-cover bg-center bg-no-repeat" style="background-image: url('{defaultImage}');">
|
||||
@ -92,35 +85,57 @@ let showFullText = false;
|
||||
<div class="w-full flex flex-wrap border-t border-slate-800">
|
||||
<h2 class="text-start ml-4 text-2xl font-bold text-white pb-2 mt-3">ETF Info</h2>
|
||||
<div class="flex items-center w-full">
|
||||
<table class="table table-md table-compact">
|
||||
<table class="table table-sm 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-[#09090B] text-white font-medium">Name</td>
|
||||
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B]">{$displayCompanyName?.length > 30 ? $displayCompanyName?.slice(0,30) + '...' : $displayCompanyName}</td>
|
||||
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Ticker</td>
|
||||
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B]">{$etfTicker}</td>
|
||||
|
||||
|
||||
<tr class="text-white border-b border-[#27272A]">
|
||||
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Provider</td>
|
||||
<td on:click={() => goto(`/etf/etf-providers/${provider}`)} class="text-center sm:text-end text-blue-400 lg:hover:text-white cursor-pointer bg-[#000] lg:bg-[#09090B]">{formatETFName(provider)}</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Country</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{country?.length !== 0 ? country : '-'}</td>
|
||||
</tr>
|
||||
<!-- row 3 -->
|
||||
<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-[#09090B] text-white font-medium">Provider</td>
|
||||
<td on:click={() => goto(`/etf/etf-providers/${provider}`)} class="text-blue-400 lg:border-b lg:border-[#27272A] lg:hover:text-white cursor-pointer bg-[#000] lg:bg-[#09090B]">{formatETFName(provider)}</td>
|
||||
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Country</td>
|
||||
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B]">{country?.length !== 0 ? country : '-'}</td>
|
||||
<tr class="text-white border-b border-[#27272A]">
|
||||
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">AUM</td>
|
||||
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(aum,true)}</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Vol</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{abbreviateNumber(data?.getStockQuote?.volume)}</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-[#09090B] text-white font-medium">Value</td>
|
||||
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal">{abbreviateNumber(aum,true)}</td>
|
||||
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Volume</td>
|
||||
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal">{abbreviateNumber(avgVolume)}</td>
|
||||
<tr class="text-white border-b border-[#27272A]">
|
||||
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">NAV</td>
|
||||
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{info?.nav?.toFixed(2)}</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Expense Ratio</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{info?.expenseRatio?.toFixed(2)}%</td>
|
||||
</tr>
|
||||
<!-- row 3 -->
|
||||
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.8rem">
|
||||
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-medium">Holdings</td>
|
||||
<td class="bg-[#000] lg:bg-[#09090B]">{holdingsCount} Assets</td>
|
||||
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-medium">Inception</td>
|
||||
<td class="bg-[#000] lg:bg-[#09090B]">{inceptionDate}</td>
|
||||
<tr class="text-white border-b border-[#27272A]">
|
||||
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Shares Out.</td>
|
||||
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.sharesOutstanding)}</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Avg. Vol</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{abbreviateNumber(avgVolume)}</td>
|
||||
</tr>
|
||||
<tr class="text-white border-b border-[#27272A]">
|
||||
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Open</td>
|
||||
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.open?.toFixed(2)}</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Prev. Close</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{data?.getStockQuote?.previousClose?.toFixed(2)}</td>
|
||||
</tr>
|
||||
<tr class="text-white border-b border-[#27272A]">
|
||||
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">EPS (ttm)</td>
|
||||
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.eps?.toFixed(2)}</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">PE Ratio (ttm)</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.pe?.toFixed(2)}</td>
|
||||
</tr>
|
||||
<tr class="text-white border-b border-[#27272A]">
|
||||
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Dividend Yield</td>
|
||||
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockDividend?.dividendYield?.toFixed(2)}%</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Payout Ratio</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockDividend?.payoutRatio?.toFixed(2)}%</td>
|
||||
</tr>
|
||||
<tr class="text-white border-b border-[#27272A]">
|
||||
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Holdings</td>
|
||||
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{holdingsCount} Assets</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Inception</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{inceptionDate}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -80,13 +80,13 @@ afterUpdate(async() => {
|
||||
<div class="space-y-3 sm:pt-5">
|
||||
<div class="bg-[#000] h-auto w-screen">
|
||||
<!--Start Header-->
|
||||
<div class="bg-[#27272A] w-full p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
|
||||
<div class="w-full p-1 flex flex-col items-center pb-5 h-auto">
|
||||
<h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">
|
||||
Executives
|
||||
</h2>
|
||||
|
||||
<div class="{!isLoaded ? 'hidden' : ''} flex flex-col items-center mt-10 w-full">
|
||||
<span class="text-white text-md text-opacity-[0.55]">
|
||||
<span class="text-white text-[1rem]">
|
||||
Female/Total Ratio
|
||||
</span>
|
||||
|
||||
@ -128,10 +128,10 @@ afterUpdate(async() => {
|
||||
<!--Start Item-->
|
||||
<div class="flex flex-row items-center pl-4 pr-4 w-full mb-3">
|
||||
|
||||
<div class="w-full rounded-md bg-[#27272A] shadow-lg h-auto pb-3 pl-3 pt-3">
|
||||
<div class="w-full rounded-md bg-[#27272A] h-auto pb-3 pl-3 pt-3">
|
||||
<div class="flex flex-row items-center relative">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-row items-center mr-auto mb-2 text-white font-medium text-[1rem] w-56">
|
||||
<div class="flex flex-row items-center mr-auto mb-2 text-white font-medium text-sm w-56">
|
||||
<span>
|
||||
{item?.name}
|
||||
{#if item?.yearBorn !== null}
|
||||
@ -140,7 +140,7 @@ afterUpdate(async() => {
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<span class="text-white text-opacity-[0.6] text-sm w-48">
|
||||
<span class="text-gray-300 text-sm w-48">
|
||||
{item?.title}
|
||||
</span>
|
||||
</div>
|
||||
@ -148,7 +148,7 @@ afterUpdate(async() => {
|
||||
{#if item?.gender === 'male'}
|
||||
<div class="flex flex-row items-center ml-auto absolute right-3 top-0">
|
||||
<div class="h-full bg-[#27272A] transform -translate-x-1/2" aria-hidden="true"></div>
|
||||
<div class="w-2 h-2 bg-[#FF2F1F] border-4 box-content border-gray-900 rounded-full transform -translate-x-1/2" aria-hidden="true"></div>
|
||||
<div class="w-2 h-2 bg-[#FF2F1F] box-content rounded-full transform -translate-x-1/2" aria-hidden="true"></div>
|
||||
<span class="text-white text-[0.85rem] inline-block">
|
||||
Male
|
||||
</span>
|
||||
@ -156,7 +156,7 @@ afterUpdate(async() => {
|
||||
{:else if item?.gender === 'female'}
|
||||
<div class="flex flex-row items-center ml-auto absolute right-3 top-0">
|
||||
<div class="h-full bg-[#27272A] transform -translate-x-1/2 " aria-hidden="true"></div>
|
||||
<div class="w-2 h-2 bg-[#0FC008] border-4 box-content border-gray-900 rounded-full transform -translate-x-1/2" aria-hidden="true"></div>
|
||||
<div class="w-2 h-2 bg-[#0FC008] box-content rounded-full transform -translate-x-1/2" aria-hidden="true"></div>
|
||||
<span class="text-white text-[0.85rem] inline-block">
|
||||
Female
|
||||
</span>
|
||||
|
||||
@ -54,9 +54,11 @@
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0" >
|
||||
<a href="/pricing" class="no-underline hover:underline text-gray-300 sm:hover:text-purple-400">Pricing</a>
|
||||
</li>
|
||||
<!--
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0" >
|
||||
<a href="/changelog" class="no-underline hover:underline text-gray-300 sm:hover:text-purple-400">Changelog</a>
|
||||
</li>
|
||||
-->
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
const bottomLineColor = '#FF7070';
|
||||
const bottomFillColor1 = 'rgba(239, 83, 80, 0.2)';
|
||||
|
||||
let width = $screenWidth < 640 ? 80 : $screenWidth < 1200 ? 150 : 180 //= ($screenWidth <= 1200 && $screenWidth > 900) ? 360 : ($screenWidth <= 900 && $screenWidth > 700) ? 260 : ($screenWidth <= 700 && $screenWidth >=600 ) ? 200 : ($screenWidth < 600 && $screenWidth >=500 ) ? 150 : 80;
|
||||
let width = $screenWidth < 640 ? 80 : $screenWidth < 1500 ? 150 : 220 //= ($screenWidth <= 1200 && $screenWidth > 900) ? 360 : ($screenWidth <= 900 && $screenWidth > 700) ? 260 : ($screenWidth <= 700 && $screenWidth >=600 ) ? 200 : ($screenWidth < 600 && $screenWidth >=500 ) ? 150 : 80;
|
||||
|
||||
|
||||
//Initial height of graph
|
||||
|
||||
88
src/lib/components/NextEarnings.svelte
Normal file
88
src/lib/components/NextEarnings.svelte
Normal file
@ -0,0 +1,88 @@
|
||||
<script lang='ts'>
|
||||
import { stockTicker, displayCompanyName } from "$lib/store";
|
||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
export let data;
|
||||
|
||||
let rawData = {};
|
||||
let revenueRatio = 0;
|
||||
let epsRatio = 0;
|
||||
|
||||
function compareTimes(time1, time2) {
|
||||
const [hours1, minutes1] = time1?.split(':').map(Number);
|
||||
const [hours2, minutes2] = time2?.split(':').map(Number);
|
||||
|
||||
if (hours1 > hours2) return 1;
|
||||
if (hours1 < hours2) return -1;
|
||||
if (minutes1 > minutes2) return 1;
|
||||
if (minutes1 < minutes2) return -1;
|
||||
return 0;
|
||||
}
|
||||
|
||||
|
||||
$: {
|
||||
if($stockTicker && typeof window !== 'undefined') {
|
||||
rawData = data?.getNextEarnings;
|
||||
epsRatio = ((rawData?.epsEst/rawData?.epsPrior-1)*100)?.toFixed(2)
|
||||
revenueRatio = ((rawData?.revenueEst/rawData?.revenuePrior-1)*100)?.toFixed(2)
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
{#if Object?.keys(rawData)?.length !== 0}
|
||||
|
||||
<div class="space-y-3 overflow-hidden">
|
||||
<!--Start Content-->
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto">
|
||||
|
||||
<div class="flex flex-col items-center w-full mb-6">
|
||||
<div class="flex flex-row justify-start mr-auto items-center">
|
||||
<!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
|
||||
<div class="flex flex-row items-center">
|
||||
<label for="nextEarningsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
|
||||
Next Earnings Release
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Next Earnings"}
|
||||
content={`Earnings represent a company's net profit after expenses, taxes, and costs. Reported quarterly, they show financial health, including revenue and EPS, influencing stock prices and investor decisions.`}
|
||||
id={"nextEarningsInfo"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if data?.user?.tier === 'Pro'}
|
||||
<div class="text-white text-[1rem]">
|
||||
{$displayCompanyName} is scheduled to release its earnings on {new Date(rawData?.date ?? null)?.toLocaleString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
timeZone: 'Europe/Berlin'
|
||||
})},
|
||||
{#if compareTimes(rawData?.time, '16:00') > 0}
|
||||
after market closes.
|
||||
{:else if compareTimes(rawData?.time, '09:30') < 0}
|
||||
before market opens.
|
||||
{:else}
|
||||
during market hours.
|
||||
{/if}
|
||||
<br>
|
||||
Analysts project revenue of <strong>{abbreviateNumber(rawData?.revenueEst,true)}</strong>, reflecting a
|
||||
<strong>{revenueRatio}%</strong> YoY {revenueRatio > 0 ? 'growth' : revenueRatio < 0 ? 'shrinking' : ''} and earnings per share of
|
||||
<strong>{rawData?.epsEst}</strong>, making a <strong>{epsRatio}%</strong> {epsRatio > 0 ? 'increase' : epsRatio < 0 ? 'decrease' : ''} YoY.
|
||||
</div>
|
||||
{: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}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
@ -25,7 +25,7 @@ onMount(async () => {
|
||||
|
||||
</script>
|
||||
|
||||
<section class="bg-[#09090B] min-h-screen max-w-3xl sm:max-w-screen-xl w-full pt-24 m-auto">
|
||||
<section class="bg-[#09090B] min-h-screen max-w-3xl sm:max-w-screen-lg w-full pt-24 m-auto">
|
||||
<div class="px-3">
|
||||
<div class="mx-auto text-center mb-8 ">
|
||||
|
||||
@ -273,12 +273,12 @@ onMount(async () => {
|
||||
|
||||
|
||||
<!--Start Pricing Card-->
|
||||
|
||||
<!--
|
||||
<div class="sm:h-[660px] sm:order-2 box sm:-mt-10 flex flex-col p-6 lg:p-8 mx-auto ring-[1px] ring-gray-400 rounded-lg w-full text-center text-white">
|
||||
|
||||
<div class="absolute top-0 left-1/2 transform -translate-x-1/2 rounded-b-2xl flex flex-row border-l border-r border-b border-gray-400 items-center p-2">
|
||||
<span class="text-white text-md font-semibold px-3">
|
||||
Best Support
|
||||
Limited Offer
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -342,7 +342,7 @@ onMount(async () => {
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
|
||||
-->
|
||||
<!--End Pricing Card-->
|
||||
|
||||
|
||||
|
||||
@ -43,12 +43,12 @@
|
||||
for (const category in values) {
|
||||
if (count >= 4) break; // Stop after the fifth element
|
||||
const value = values[category];
|
||||
if (value !== 0) {
|
||||
if (value > 0) {
|
||||
nodes?.push({
|
||||
id: (category?.length > 35 ? category?.slice(0, 35) + "..." : category) + `- $${abbreviateNumber(value)}`,
|
||||
id: (category?.length > 35 ? category?.slice(0, 35) + "..." : category) + ' · ' +`$${abbreviateNumber(value)}`,
|
||||
});
|
||||
links?.push({
|
||||
source: (category?.length > 35 ? category?.slice(0, 35) + "..." : category) + `- $${abbreviateNumber(value)}`,
|
||||
source: (category?.length > 35 ? category?.slice(0, 35) + "..." : category) + ' · ' +`$${abbreviateNumber(value)}`,
|
||||
target: "Revenue",
|
||||
value: value,
|
||||
});
|
||||
@ -169,15 +169,8 @@
|
||||
}
|
||||
|
||||
let showFullStats = false;
|
||||
let charNumber = 40;
|
||||
$: charNumber = $screenWidth < 640 ? 25 :40;
|
||||
|
||||
$: {
|
||||
if ($screenWidth < 640) {
|
||||
charNumber = 25;
|
||||
} else {
|
||||
charNumber = 40;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="overflow-hidden text-white h-full pb-8">
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import {userRegion, secFilingsClicked, stockTicker, clientSideCache, } from '$lib/store';
|
||||
import * as Tabs from "$lib/components/shadcn/tabs/index.js";
|
||||
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
@ -21,24 +22,19 @@ if (usRegion?.includes(value)) {
|
||||
|
||||
|
||||
let displayList = [];
|
||||
let secType = '8K';
|
||||
let accordionOpen = {};
|
||||
let newData;
|
||||
let isLoaded = false;
|
||||
|
||||
function changeSECType(index) {
|
||||
activeIdx = index;
|
||||
switch (activeIdx) {
|
||||
case 0:
|
||||
secType = '8K';
|
||||
function changeSECType(secType) {
|
||||
switch (secType) {
|
||||
case '8-K':
|
||||
prepareData(secFilingsList?.eightK);
|
||||
break;
|
||||
case 1:
|
||||
secType = '10K';
|
||||
case '10-K':
|
||||
prepareData(secFilingsList?.tenK);
|
||||
break;
|
||||
case 2:
|
||||
secType = '10Q';
|
||||
case '10-Q':
|
||||
prepareData(secFilingsList?.tenQ);
|
||||
break;
|
||||
// Default case in case changeType doesn't match any of the specified cases
|
||||
@ -116,27 +112,12 @@ async function fetchData() {
|
||||
};
|
||||
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
title: "8-K",
|
||||
},
|
||||
{
|
||||
title: "10-K",
|
||||
},
|
||||
{
|
||||
title: "10-Q"
|
||||
}
|
||||
];
|
||||
let activeIdx = 0;
|
||||
|
||||
|
||||
$: {
|
||||
|
||||
if($stockTicker && typeof window !== 'undefined' && $secFilingsClicked === true) {
|
||||
isLoaded = false;
|
||||
$secFilingsClicked = false;
|
||||
activeIdx = 0;
|
||||
secType = '8K';
|
||||
accordionOpen = {}
|
||||
|
||||
const asyncFunctions = [
|
||||
@ -173,40 +154,14 @@ $: {
|
||||
<div class="w-11/12 mt-5">
|
||||
<div class="relative right-0 bg-[#27272A] rounded-lg">
|
||||
|
||||
<div class="relative flex flex-row items-center p-1 list-none rounded-lg">
|
||||
{#each tabs as item, i}
|
||||
<button
|
||||
on:click={() => changeSECType(i)}
|
||||
class="group relative z-[1] rounded-lg px-6 py-1 border z-30 flex items-center justify-center w-full px-0 py-1 mb-0 border-0 bg-inherit {activeIdx === i
|
||||
? 'z-0'
|
||||
: ''} "
|
||||
>
|
||||
{#if activeIdx === i}
|
||||
<div
|
||||
class="absolute inset-0 rounded-lg sm:rounded-lg {[0,1,2]?.includes(activeIdx) ? 'bg-[#00C806]' : 'bg-[#E02424]'}"
|
||||
></div>
|
||||
{/if}
|
||||
|
||||
{#if item?.title === '8-K'}
|
||||
<span
|
||||
class="relative block font-medium duration-200 {secType === '8K' ? 'text-black' : 'text-white'}">
|
||||
{item.title}
|
||||
</span>
|
||||
{:else if item?.title === '10-K'}
|
||||
<span
|
||||
class="relative block font-medium duration-200 {secType === '10K' ? 'text-black' : 'text-white'}">
|
||||
{item.title}
|
||||
</span>
|
||||
{:else}
|
||||
<span
|
||||
class="relative block font-medium duration-200 {secType === '10Q' ? 'text-black' : 'text-white'}">
|
||||
{item.title}
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<Tabs.Root value="eightK" class="w-full">
|
||||
<Tabs.List class="grid w-full grid-cols-3 bg-[#27272A]">
|
||||
<Tabs.Trigger on:click={() => changeSECType('8-K')} value="eightK">8-K</Tabs.Trigger>
|
||||
<Tabs.Trigger on:click={() => changeSECType('10-K')} value="tenK">10-K</Tabs.Trigger>
|
||||
<Tabs.Trigger on:click={() => changeSECType('10-Q')} value="tenQ">10-Q</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
</Tabs.Root>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -169,7 +169,7 @@ $: {
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-white font-medium text-[1rem] mb-4">
|
||||
{#if data?.user?.tier === 'Pro'}
|
||||
{item?.value}
|
||||
{item?.value !== 0 ? item?.value : '-'}
|
||||
{:else if ['1M','1Y']?.includes(item?.label)}
|
||||
{item?.value}
|
||||
{:else}
|
||||
@ -185,7 +185,7 @@ $: {
|
||||
<div class="bg-[#2F2F2F] w-2 rounded-t-full" style="height: {(100)}%;"></div>
|
||||
{/if}
|
||||
</div>
|
||||
<span class="text-gray-400 font-medium text-sm mt-4">
|
||||
<span class="text-white font-medium text-sm mt-4">
|
||||
{item?.label}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -214,7 +214,7 @@ let charNumber = 30;
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{#if putCallRatio !== 0}
|
||||
<h1 class="text-white font-semibold text-xl sm:text-2xl mb-3 mt-5 sm:-mt-5">
|
||||
Options Activity
|
||||
</h1>
|
||||
@ -315,6 +315,7 @@ let charNumber = 30;
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
import TickerInfoCard from '$lib/components/TickerInfoCard.svelte';
|
||||
import AnalystCard from '$lib/components/AnalystCard.svelte';
|
||||
import ESGCard from '$lib/components/ESGCard.svelte';
|
||||
//import ESGCard from '$lib/components/ESGCard.svelte';
|
||||
import SimilarTickerCard from '$lib/components/SimilarTickerCard.svelte';
|
||||
import TopETFTickerHolder from '$lib/components/TopETFTickerHolder.svelte';
|
||||
|
||||
@ -24,7 +24,7 @@ export let analystRating
|
||||
<AnalystCard lastPrice={lastPrice} analystRating={analystRating} />
|
||||
|
||||
|
||||
<ESGCard stockDeck={stockDeck} />
|
||||
<!--<ESGCard stockDeck={stockDeck} />-->
|
||||
|
||||
<SimilarTickerCard similarstock={similarstock}/>
|
||||
|
||||
|
||||
@ -26,7 +26,7 @@ export let similarTicker;
|
||||
|
||||
<div class="space-y-3 sm:pt-5 hidden lg:block sm:{similarTicker?.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]">
|
||||
<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]">
|
||||
|
||||
<div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
|
||||
<h2 class="text-start ml-2 text-2xl font-bold text-white pb-2 p-3">
|
||||
|
||||
@ -26,7 +26,7 @@ export let similarstock;
|
||||
|
||||
<div class="space-y-3 sm:pt-5 hidden lg:block lg:{similarstock?.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]">
|
||||
<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]">
|
||||
|
||||
<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">
|
||||
@ -103,18 +103,14 @@ export let similarstock;
|
||||
<div class="bg-[#000] h-auto w-screen">
|
||||
|
||||
<!--Start Header-->
|
||||
<div class="bg-[#27272A] w-full p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
|
||||
<div class="w-full p-1 flex flex-col items-center pb-5 h-auto">
|
||||
<h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">
|
||||
Similar Ticker
|
||||
</h2>
|
||||
<div class="flex flex-col items-center mt-10 w-full">
|
||||
<span class="text-white text-center text-md text-opacity-[0.8] pl-8 pr-8">
|
||||
<div class="flex flex-col items-center mt-10 mb-5 w-full px-8">
|
||||
<span class="text-white text-center text-md">
|
||||
Identify trends in similar assets and explore superior competing options in your portfolio.
|
||||
</span>
|
||||
|
||||
<div class="flex flex-row justify-center items-center w-full mt-5">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -125,9 +121,9 @@ export let similarstock;
|
||||
<table class="table table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-white font-bold text-sm text-start bg-[#000]">Company</th>
|
||||
<th class="text-white font-bold text-sm text-center bg-[#000]">Market Cap</th>
|
||||
<th class="text-white font-bold text-sm text-end bg-[#000]">Avg Volume</th>
|
||||
<th class="text-white font-semibold text-sm text-start bg-[#000]">Company</th>
|
||||
<th class="text-white font-semibold text-sm text-end bg-[#000]">Market Cap</th>
|
||||
<th class="text-white font-semibold text-sm text-end bg-[#000]">Avg Volume</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -135,16 +131,13 @@ export let similarstock;
|
||||
<tr on:click={() => stockSelector(item?.symbol)} class="text-white cursor-pointer bg-[#000] border-b border-[#000]">
|
||||
{#if index <=6}
|
||||
|
||||
<td class="text-gray-200">
|
||||
<td class="text-white whitespace-nowrap">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="rounded-full w-10 h-10 relative flex items-center justify-center">
|
||||
<img style="clip-path: circle(50%);" class="w-6 h-6 rounded-full" src={`https://financialmodelingprep.com/image-stock/${item.symbol}.png`} loading="lazy"/>
|
||||
</div>
|
||||
<div class="flex flex-col ml-3 w-full">
|
||||
<div class="flex flex-col w-full">
|
||||
<span class="text-blue-400 text-sm font-medium">{item?.symbol}</span>
|
||||
<span class="text-white text-xs">
|
||||
{#if typeof item?.name !== 'undefined'}
|
||||
{item?.name?.length > 10 ? item?.name?.slice(0,10) + "..." : item?.name}
|
||||
{item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
|
||||
{:else}
|
||||
n/a
|
||||
{/if}
|
||||
@ -155,11 +148,11 @@ export let similarstock;
|
||||
|
||||
</td>
|
||||
|
||||
<td class="text-white text-center font-medium ">
|
||||
<td class="text-white text-end font-medium text-sm">
|
||||
{item?.marketCap !== null ? abbreviateNumber(item?.marketCap,true) : '-'}
|
||||
</td>
|
||||
|
||||
<td class="text-white font-medium text-end">
|
||||
<td class="text-white font-medium text-end text-sm">
|
||||
{item?.avgVolume !== null ? abbreviateNumber(item?.avgVolume) : '-'}
|
||||
</td>
|
||||
{/if}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
import ExecutiveCard from '$lib/components/ExecutiveCard.svelte';
|
||||
|
||||
import SimilarTickerCard from '$lib/components/SimilarTickerCard.svelte';
|
||||
import ESGCard from '$lib/components/ESGCard.svelte';
|
||||
//import ESGCard from '$lib/components/ESGCard.svelte';
|
||||
import SECFilingsCard from '$lib/components/SECFilingsCard.svelte';
|
||||
import TopETFTickerHolder from '$lib/components/TopETFTickerHolder.svelte';
|
||||
|
||||
@ -44,9 +44,11 @@ $: {
|
||||
<label on:click={() => $secFilingsClicked = true} for="secFilingModal" 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">
|
||||
SEC Filings
|
||||
</label>
|
||||
<!--
|
||||
<label for="esgModal" 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">
|
||||
ESG Score
|
||||
</label>
|
||||
-->
|
||||
<label for="similarTickerModal" 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">
|
||||
Similar
|
||||
</label>
|
||||
@ -145,6 +147,7 @@ $: {
|
||||
|
||||
|
||||
<!--Start ESG Modal-->
|
||||
<!--
|
||||
<div class="drawer drawer-end z-40 overflow-hidden w-screen">
|
||||
<input id="esgModal" type="checkbox" class="drawer-toggle"/>
|
||||
<div class="drawer-side overflow-hidden">
|
||||
@ -164,6 +167,7 @@ $: {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<!--End ESG Modal-->
|
||||
|
||||
|
||||
|
||||
@ -74,7 +74,7 @@ $: {
|
||||
website = info?.website;
|
||||
snippet= description?.slice(0, 150) + "...";
|
||||
forwardPE = info?.forwardPE;
|
||||
beta = info?.beta;
|
||||
beta = info?.beta?.toFixed(2);
|
||||
}
|
||||
|
||||
}
|
||||
@ -83,7 +83,7 @@ $: {
|
||||
</script>
|
||||
|
||||
<div class="sm:space-y-3">
|
||||
<div class="sm:rounded-lg lg:border lg:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto w-screen pt-16 sm:w-full md:w-[420px] lg:pt-0">
|
||||
<div class="sm:rounded-lg lg:border lg:border-slate-800 bg-[#000] lg:bg-[#09090B] 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`});">
|
||||
@ -110,66 +110,70 @@ $: {
|
||||
</div>
|
||||
<!--End Header-->
|
||||
<!--Start Content-->
|
||||
<div class="w-full flex flex-wrap border-t border-slate-800 px-2 lg:px-0">
|
||||
<div class="w-full flex flex-wrap border-t border-slate-800 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]" style="font-size: 0.75rem">
|
||||
<!--
|
||||
<tr class="text-white border-b border-[#27272A]">
|
||||
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">CEO</td>
|
||||
<td class="text-center bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal font-semibold">{ceoName}</td>
|
||||
<td class="text-start sm:text-center lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Country</td>
|
||||
<td class="text-center sm:text-end bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal font-semibold">{ceoName}</td>
|
||||
<td class="text-start sm:text-end lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] 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-[#09090B] whitespace-normal font-semibold">{country}</td>
|
||||
</tr>
|
||||
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
|
||||
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Market Cap</td>
|
||||
<td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{abbreviateNumber(data?.getStockQuote?.marketCap,true)}</td>
|
||||
<td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Volume</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold">{abbreviateNumber(data?.getStockQuote?.volume)}</td>
|
||||
-->
|
||||
<tr class="text-white border-b border-[#27272A]">
|
||||
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Mkt Cap</td>
|
||||
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.marketCap,true)}</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Vol</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.volume)}</td>
|
||||
</tr>
|
||||
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
|
||||
<tr class="text-white border-b border-[#27272A]">
|
||||
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Beta</td>
|
||||
<td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{beta}</td>
|
||||
<td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Avg. Volume</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold">{abbreviateNumber(data?.getStockQuote?.avgVolume)}</td>
|
||||
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{beta}</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Avg. Vol</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.avgVolume)}</td>
|
||||
</tr>
|
||||
<tr class="text-white " style="font-size: 0.75rem">
|
||||
<!--
|
||||
<tr class="text-white ">
|
||||
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] 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-[#09090B] whitespace-pre-line font-semibold">{sector}</td>
|
||||
<td class="text-start sm:text-center lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] 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-[#09090B] font-semibold">{employees}</td>
|
||||
</tr>
|
||||
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
|
||||
<tr class="text-white border-b border-[#27272A]">
|
||||
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Industry</td>
|
||||
<td class="text-center bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal font-semibold">{industry}</td>
|
||||
<td class="text-start sm:text-center lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] 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-[#09090B] font-semibold">{exchange}</td>
|
||||
</tr>
|
||||
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
|
||||
-->
|
||||
<tr class="text-white border-b border-[#27272A]">
|
||||
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Open</td>
|
||||
<td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{data?.getStockQuote?.open}</td>
|
||||
<td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Previous Close</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold whitespace-nowrap ">{data?.getStockQuote?.previousClose}</td>
|
||||
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.open?.toFixed(2)}</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Prev. Close</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{data?.getStockQuote?.previousClose?.toFixed(2)}</td>
|
||||
</tr>
|
||||
{#if $screenWidth > 640}
|
||||
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
|
||||
<tr class="text-white border-b border-[#27272A]">
|
||||
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Day's Range</td>
|
||||
<td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{data?.getStockQuote?.dayLow} - {data?.getStockQuote?.dayHigh}</td>
|
||||
<td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">52-Week Range</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold whitespace-nowrap ">{data?.getStockQuote?.yearLow} - {data?.getStockQuote?.yearHigh}</td>
|
||||
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.dayLow?.toFixed(2)} - {data?.getStockQuote?.dayHigh?.toFixed(2)}</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">52-Week Range</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{data?.getStockQuote?.yearLow?.toFixed(2)} - {data?.getStockQuote?.yearHigh?.toFixed(2)}</td>
|
||||
</tr>
|
||||
{/if}
|
||||
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
|
||||
<tr class="text-white border-b border-[#27272A]">
|
||||
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">EPS (ttm)</td>
|
||||
<td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{data?.getStockQuote?.eps}</td>
|
||||
<td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">PE Ratio (ttm)</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold">{data?.getStockQuote?.pe}</td>
|
||||
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.eps}</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">PE Ratio (ttm)</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.pe}</td>
|
||||
</tr>
|
||||
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
|
||||
<tr class="text-white border-b border-[#27272A]">
|
||||
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Shares Out.</td>
|
||||
<td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{abbreviateNumber(data?.getStockQuote?.sharesOutstanding)}</td>
|
||||
<td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Forward PE</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold whitespace-nowrap ">{forwardPE === undefined ? '-' : forwardPE}</td>
|
||||
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.sharesOutstanding)}</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Forward PE</td>
|
||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{forwardPE === undefined ? '-' : forwardPE}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
|
||||
<div class="space-y-3 sm:pt-5 hidden lg:block lg:{topETFHolder?.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]">
|
||||
<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]">
|
||||
|
||||
<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">
|
||||
@ -101,18 +101,15 @@
|
||||
<div class="bg-[#000] h-auto w-screen">
|
||||
|
||||
<!--Start Header-->
|
||||
<div class="bg-[#27272A] 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">
|
||||
<div class="w-full p-1 flex flex-col items-center pb-5 h-auto">
|
||||
<h2 class="text-center m-auto text-lg font-semibold text-white mt-5">
|
||||
Top ETFs Holder
|
||||
</h2>
|
||||
<div class="flex flex-col items-center mt-10 w-full">
|
||||
<span class="text-white text-center text-md text-opacity-[0.8] pl-8 pr-8">
|
||||
<div class="flex flex-col items-center mt-10 mb-5 w-full px-8">
|
||||
<span class="text-white text-center text-md">
|
||||
Find the ETFs with the highest portfolio weights for this stock.
|
||||
</span>
|
||||
|
||||
<div class="flex flex-row justify-center items-center w-full mt-5">
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -123,9 +120,9 @@
|
||||
<table class="table table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-white font-bold text-sm text-start bg-[#000]">Company</th>
|
||||
<th class="text-white font-bold text-sm text-center bg-[#000]">Total Assets</th>
|
||||
<th class="text-white font-bold text-sm text-end bg-[#000]">% of Fund</th>
|
||||
<th class="text-white font-semibold text-sm text-start bg-[#000]">Company</th>
|
||||
<th class="text-white font-semibold text-sm text-end bg-[#000]">Total Assets</th>
|
||||
<th class="text-white font-semibold text-sm text-end bg-[#000]">% of Fund</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -133,13 +130,13 @@
|
||||
<tr on:click={() => etfSelector(item?.symbol)} class="text-white cursor-pointer bg-[#000] border-b border-[#000]">
|
||||
{#if index <=6}
|
||||
|
||||
<td class="text-gray-200">
|
||||
<td class="text-white whitespace-nowrap">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex flex-col w-full">
|
||||
<span class="text-blue-400 text-sm font-medium">{item?.symbol}</span>
|
||||
<span class="text-white text-xs">
|
||||
{#if typeof item?.name !== 'undefined'}
|
||||
{item?.name?.length > 15 ? item?.name?.slice(0,15) + "..." : item?.name}
|
||||
{item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
|
||||
{:else}
|
||||
n/a
|
||||
{/if}
|
||||
@ -150,7 +147,7 @@
|
||||
|
||||
</td>
|
||||
|
||||
<td class="text-white text-center font-medium ">
|
||||
<td class="text-white text-end font-medium ">
|
||||
{item?.totalAssets !== null ? abbreviateNumber(item?.totalAssets,true) : '-'}
|
||||
</td>
|
||||
|
||||
|
||||
@ -37,7 +37,7 @@ $: {
|
||||
|
||||
<div class="space-y-3 lg:pt-5 lg:{topHoldingList?.length !== 0 ? '' : 'hidden'}">
|
||||
|
||||
<div class="sm:rounded-sm shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[420px]">
|
||||
<div class="sm:rounded-sm shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px]">
|
||||
|
||||
<div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
|
||||
<TabsPrimitive.List
|
||||
class={cn(
|
||||
"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
|
||||
"inline-flex h-12 items-center justify-center rounded-md bg-muted p-1 text-gray-400",
|
||||
className
|
||||
)}
|
||||
{...$$restProps}
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
|
||||
<TabsPrimitive.Trigger
|
||||
class={cn(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-2 text-[1rem] font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-purple-600 data-[state=active]:text-white data-[state=active]:shadow-sm",
|
||||
className
|
||||
)}
|
||||
{value}
|
||||
|
||||
@ -580,7 +580,7 @@ $: {
|
||||
</a>
|
||||
</Button>
|
||||
</Sheet.Close>
|
||||
|
||||
|
||||
<Sheet.Close asChild let:builder>
|
||||
<Button builders={[builder]} type="submit" class="bg-[#141417] hover:bg-[#141417] -ml-4 w-full">
|
||||
<a href="/community" class="flex flex-row items-center w-full -mt-2">
|
||||
|
||||
@ -53,7 +53,7 @@ export const actions = {
|
||||
}
|
||||
|
||||
|
||||
redirect(301, '/home');
|
||||
redirect(301, '/pricing');
|
||||
},
|
||||
|
||||
register: async ({ locals, request }) => {
|
||||
@ -107,7 +107,7 @@ export const actions = {
|
||||
error(err.status, err.message);
|
||||
}
|
||||
|
||||
redirect(301, "/home");
|
||||
redirect(301, "/pricing");
|
||||
},
|
||||
|
||||
|
||||
@ -157,7 +157,7 @@ export const actions = {
|
||||
maxAge: 60*60
|
||||
});
|
||||
|
||||
cookies.set('path', "/home", {httpOnly: true,
|
||||
cookies.set('path', "/pricing", {httpOnly: true,
|
||||
sameSite: 'lax',
|
||||
secure: true,
|
||||
path: '/',
|
||||
|
||||
867
src/routes/economic-indicator/+page.svelte
Normal file
867
src/routes/economic-indicator/+page.svelte
Normal file
@ -0,0 +1,867 @@
|
||||
<script lang='ts'>
|
||||
import { goto } from '$app/navigation';
|
||||
import { numberOfUnreadNotification, screenWidth } from '$lib/store';
|
||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||
import { Chart } from 'svelte-echarts'
|
||||
import Lazy from '$lib/components/Lazy.svelte';
|
||||
|
||||
import { init, use } from 'echarts/core'
|
||||
import { LineChart, BarChart } from 'echarts/charts'
|
||||
import { GridComponent, TooltipComponent } from 'echarts/components'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { onMount } from 'svelte';
|
||||
use([LineChart, BarChart, GridComponent,TooltipComponent, CanvasRenderer])
|
||||
|
||||
|
||||
|
||||
export let data;
|
||||
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
||||
|
||||
let isLoaded = false;
|
||||
let rawData;
|
||||
let tableList = [];
|
||||
let optionsData;
|
||||
let optionsCPI;
|
||||
let optionsGDP;
|
||||
let optionsInflation;
|
||||
|
||||
let filterRule = 'annual';
|
||||
|
||||
let timePeriod = 'threeYears';
|
||||
const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
|
||||
const treasuryLabel = {
|
||||
'month1': '1-Month',
|
||||
'month2': '2-Month',
|
||||
'month3': '3-Month',
|
||||
'month6': '6-Month',
|
||||
'year1': '1-Year',
|
||||
'year2': '2-Year',
|
||||
'year3': '3-Year',
|
||||
'year5': '5-Year',
|
||||
'year7': '7-Year',
|
||||
'year10': '10-Year',
|
||||
'year20': '20-Year',
|
||||
'year30': '30-Year',
|
||||
}
|
||||
|
||||
function filterEndOfYearDates(data) {
|
||||
// Step 1: Group data by year
|
||||
const groupedByYear = data.reduce((acc, item) => {
|
||||
const year = new Date(item.date).getFullYear();
|
||||
if (!acc[year]) {
|
||||
acc[year] = [];
|
||||
}
|
||||
acc[year].push(item);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
// Step 2: For each year, find the entry with the latest date
|
||||
const annualData = Object.values(groupedByYear).map(yearData => {
|
||||
return yearData.reduce((latest, current) => {
|
||||
return new Date(latest.date) > new Date(current.date) ? latest : current;
|
||||
});
|
||||
});
|
||||
|
||||
return annualData;
|
||||
}
|
||||
|
||||
function filterEndOfQuarterDates(data) {
|
||||
// Step 1: Group data by year and quarter
|
||||
const groupedByQuarter = data?.reduce((acc, item) => {
|
||||
const date = new Date(item?.date);
|
||||
const year = date.getFullYear();
|
||||
const quarter = Math?.floor(date?.getMonth() / 3) + 1; // Get the quarter (1-4)
|
||||
|
||||
const key = `${year}-Q${quarter}`;
|
||||
if (!acc[key]) {
|
||||
acc[key] = [];
|
||||
}
|
||||
acc[key].push(item);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
// Step 2: For each year-quarter group, find the entry with the latest date
|
||||
const quarterlyData = Object?.values(groupedByQuarter)?.map(quarterData => {
|
||||
return quarterData?.reduce((latest, current) => {
|
||||
return new Date(latest?.date) > new Date(current?.date) ? latest : current;
|
||||
});
|
||||
});
|
||||
|
||||
return quarterlyData;
|
||||
}
|
||||
|
||||
function changeTablePeriod(state:string) {
|
||||
filterRule = state;
|
||||
if(state === 'annual') {
|
||||
tableList = filterEndOfYearDates(rawData);
|
||||
} else {
|
||||
tableList = filterEndOfQuarterDates(rawData);
|
||||
}
|
||||
tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
|
||||
}
|
||||
|
||||
async function changeStatement(event)
|
||||
{
|
||||
timePeriod = event.target.value;
|
||||
|
||||
optionsData = await plotData();
|
||||
}
|
||||
|
||||
// Function to filter data by a specified time period
|
||||
function filterDataByTimePeriod(rawData, timePeriod) {
|
||||
let dates = [];
|
||||
let seriesData = {};
|
||||
|
||||
const now = new Date();
|
||||
|
||||
// Calculate the date threshold based on the selected time period
|
||||
let thresholdDate;
|
||||
switch (timePeriod) {
|
||||
case 'oneMonth':
|
||||
thresholdDate = new Date(now);
|
||||
thresholdDate.setMonth(now.getMonth() - 1);
|
||||
break;
|
||||
case 'sixMonths':
|
||||
thresholdDate = new Date(now);
|
||||
thresholdDate.setMonth(now.getMonth() - 6);
|
||||
break;
|
||||
case 'oneYear':
|
||||
thresholdDate = new Date(now);
|
||||
thresholdDate.setFullYear(now.getFullYear() - 1);
|
||||
break;
|
||||
case 'threeYears':
|
||||
thresholdDate = new Date(now);
|
||||
thresholdDate.setFullYear(now.getFullYear() - 3);
|
||||
break;
|
||||
case 'fiveYears':
|
||||
thresholdDate = new Date(now);
|
||||
thresholdDate.setFullYear(now.getFullYear() - 5);
|
||||
break;
|
||||
case 'tenYears':
|
||||
thresholdDate = new Date(now);
|
||||
thresholdDate.setFullYear(now.getFullYear() - 10);
|
||||
break;
|
||||
case 'max':
|
||||
default:
|
||||
thresholdDate = new Date(0); // Set to the earliest possible date
|
||||
break;
|
||||
}
|
||||
|
||||
// Filter the data based on the threshold date
|
||||
rawData?.forEach(item => {
|
||||
const itemDate = new Date(item?.date);
|
||||
if (itemDate >= thresholdDate) {
|
||||
dates.push(item?.date);
|
||||
|
||||
// Iterate over each key in the item, except for 'date'
|
||||
Object.keys(item).forEach(key => {
|
||||
if (key !== 'date') {
|
||||
// Initialize the array if it doesn't exist
|
||||
if (!seriesData[key]) {
|
||||
seriesData[key] = [];
|
||||
}
|
||||
// Push the corresponding value into the appropriate array
|
||||
seriesData[key].push(item[key]);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return { dates, seriesData };
|
||||
}
|
||||
|
||||
// Function to plot data based on a specified time period
|
||||
async function plotData() {
|
||||
// Get the filtered data based on the selected time period
|
||||
const { dates, seriesData } = filterDataByTimePeriod(rawData, timePeriod);
|
||||
|
||||
// Convert seriesData to the format required by the series property
|
||||
let series = Object?.keys(seriesData).map(key => {
|
||||
return {
|
||||
name: treasuryLabel[key],
|
||||
data: seriesData[key],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
};
|
||||
});
|
||||
|
||||
const options = {
|
||||
animation: false,
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
top: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
formatter: function (value) {
|
||||
// Assuming dates are in the format 'yyyy-mm-dd'
|
||||
// Extract the month and day from the date string and convert the month to its abbreviated name
|
||||
const dateParts = value.split('-');
|
||||
const year = dateParts[0].substring(2); // Extracting the last two digits of the year
|
||||
const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
|
||||
return `${monthNames[monthIndex]} '${year}`;
|
||||
}
|
||||
},
|
||||
data: dates,
|
||||
type: 'category',
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff', // Change label color to white
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
},
|
||||
],
|
||||
series: series, // Use the dynamically created series array
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
hideDelay: 100,
|
||||
},
|
||||
};
|
||||
|
||||
return options;
|
||||
}
|
||||
|
||||
async function plotCPI() {
|
||||
// Get the filtered data based on the selected time period
|
||||
let dates = [];
|
||||
let valueList = [];
|
||||
// Iterate over the data and extract required information
|
||||
data?.getEconomicIndicator?.cpi?.forEach(item => {
|
||||
|
||||
dates?.push(item?.date);
|
||||
valueList?.push(item?.value);
|
||||
});
|
||||
|
||||
const options = {
|
||||
animation: false,
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
top: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
formatter: function (value) {
|
||||
// Assuming dates are in the format 'yyyy-mm-dd'
|
||||
// Extract the month and day from the date string and convert the month to its abbreviated name
|
||||
const dateParts = value.split('-');
|
||||
const year = dateParts[0].substring(2); // Extracting the last two digits of the year
|
||||
const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
|
||||
return `${monthNames[monthIndex]} '${year}`;
|
||||
}
|
||||
},
|
||||
data: dates,
|
||||
type: 'category',
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff', // Change label color to white
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
},
|
||||
],
|
||||
series: {
|
||||
name: 'CPI',
|
||||
data: valueList,
|
||||
type: 'line',
|
||||
areaStyle: {opacity: 0.2},
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
hideDelay: 100,
|
||||
},
|
||||
};
|
||||
|
||||
return options;
|
||||
}
|
||||
|
||||
async function plotGDP() {
|
||||
// Get the filtered data based on the selected time period
|
||||
let dates = [];
|
||||
let gdpList = [];
|
||||
let realGDPList = [];
|
||||
let realGDPPerCapitaList = []
|
||||
// Iterate over the data and extract required information
|
||||
data?.getEconomicIndicator?.gdp?.forEach(item => {
|
||||
|
||||
dates?.push(item?.date);
|
||||
gdpList?.push(item?.value);
|
||||
});
|
||||
|
||||
data?.getEconomicIndicator?.realGDP?.forEach(item => {
|
||||
realGDPList?.push(item?.value);
|
||||
});
|
||||
|
||||
data?.getEconomicIndicator?.realGDPPerCapita?.forEach(item => {
|
||||
realGDPPerCapitaList?.push(item?.value);
|
||||
});
|
||||
|
||||
const options = {
|
||||
animation: false,
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
top: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
formatter: function (value) {
|
||||
// Assuming dates are in the format 'yyyy-mm-dd'
|
||||
// Extract the month and day from the date string and convert the month to its abbreviated name
|
||||
const dateParts = value.split('-');
|
||||
const year = dateParts[0].substring(2); // Extracting the last two digits of the year
|
||||
const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
|
||||
return `${monthNames[monthIndex]} '${year}`;
|
||||
}
|
||||
},
|
||||
data: dates,
|
||||
type: 'category',
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff', // Change label color to white
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff', // Change label color to white
|
||||
},
|
||||
},
|
||||
],
|
||||
series:
|
||||
[
|
||||
{
|
||||
name: 'GDP',
|
||||
data: gdpList,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
},
|
||||
{
|
||||
name: 'Real GDP',
|
||||
data: realGDPList,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
},
|
||||
{
|
||||
name: 'Real GDP Per Capita',
|
||||
data: realGDPPerCapitaList,
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
hideDelay: 100,
|
||||
},
|
||||
};
|
||||
|
||||
return options;
|
||||
}
|
||||
|
||||
async function plotInflation() {
|
||||
// Get the filtered data based on the selected time period
|
||||
let dates = [];
|
||||
let inflationRateList = [];
|
||||
let recessionList = [];
|
||||
// Iterate over the data and extract required information
|
||||
data?.getEconomicIndicator?.inflationRate?.forEach(item => {
|
||||
|
||||
dates?.push(item?.date);
|
||||
inflationRateList?.push(item?.value);
|
||||
});
|
||||
|
||||
data?.getEconomicIndicator?.unemploymentRate?.forEach(item => {
|
||||
recessionList?.push(item?.value);
|
||||
});
|
||||
|
||||
|
||||
const options = {
|
||||
animation: false,
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
top: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
formatter: function (value) {
|
||||
// Assuming dates are in the format 'yyyy-mm-dd'
|
||||
// Extract the month and day from the date string and convert the month to its abbreviated name
|
||||
const dateParts = value.split('-');
|
||||
const year = dateParts[0].substring(2); // Extracting the last two digits of the year
|
||||
const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
|
||||
return `${monthNames[monthIndex]} '${year}`;
|
||||
}
|
||||
},
|
||||
data: dates,
|
||||
type: 'category',
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff', // Change label color to white
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff', // Change label color to white
|
||||
},
|
||||
},
|
||||
],
|
||||
series:
|
||||
[
|
||||
{
|
||||
name: 'Inflation Rate',
|
||||
data: inflationRateList,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
},
|
||||
{
|
||||
name: 'Unemployment Rate',
|
||||
data: recessionList,
|
||||
yAxisIndex: 1,
|
||||
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
},
|
||||
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
hideDelay: 100,
|
||||
},
|
||||
};
|
||||
|
||||
return options;
|
||||
}
|
||||
onMount(async () => {
|
||||
rawData = data?.getEconomicIndicator?.treasury ?? {};
|
||||
|
||||
// Run the async functions concurrently
|
||||
[optionsData, optionsCPI, optionsGDP, optionsInflation] = await Promise.all([
|
||||
plotData(),
|
||||
plotCPI(),
|
||||
plotGDP(),
|
||||
plotInflation(),
|
||||
]);
|
||||
|
||||
tableList = filterEndOfYearDates(rawData);
|
||||
tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
|
||||
|
||||
isLoaded = true;
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} US Economic Indicator · stocknear
|
||||
</title>
|
||||
<meta name="description" content={`Economic indicators measure economic performance and identify growth trends.`} />
|
||||
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content={`US Economic Indicator · stocknear`}/>
|
||||
<meta property="og:description" content={`Economic indicators measure economic performance and identify growth trends.`} />
|
||||
<meta property="og:type" content="website"/>
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
|
||||
<!-- Twitter specific meta tags -->
|
||||
<meta name="twitter:card" content="summary_large_image"/>
|
||||
<meta name="twitter:title" content={`US Economic Indicator · stocknear`}/>
|
||||
<meta name="twitter:description" content={`Economic indicators measure economic performance and identify growth trends.`} />
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
|
||||
</svelte:head>
|
||||
|
||||
|
||||
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
|
||||
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li class="text-gray-300">US Economic Indicator</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="w-full overflow-hidden m-auto mt-5">
|
||||
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
|
||||
<div class="relative flex justify-center items-start overflow-hidden w-full">
|
||||
|
||||
|
||||
<main class="w-full lg:w-3/4 lg:pr-5">
|
||||
|
||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
|
||||
<!-- Start Column -->
|
||||
<div>
|
||||
<div class="flex flex-row justify-center items-center">
|
||||
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5">
|
||||
Economic Indicators
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<span class="text-white text-md font-medium text-center flex justify-center items-center ">
|
||||
The indicators measure economic performance and identify growth trends.
|
||||
</span>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- End Column -->
|
||||
|
||||
<!-- Start Column -->
|
||||
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
|
||||
<svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="5" result="glow"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="glow"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" />
|
||||
</svg>
|
||||
|
||||
|
||||
<div class="z-1 absolute top-1">
|
||||
<img class="w-[80px] ml-10" src={cloudFrontUrl+'/assets/economic_data_logo.png'} alt="logo" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Column -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{#if isLoaded}
|
||||
<div class="w-screen sm:w-full m-auto mt-20 sm:mt-10 p-3">
|
||||
|
||||
<h2 class="text-2xl text-gray-200 font-bold">
|
||||
Consumer Price Index (CPI)
|
||||
</h2>
|
||||
|
||||
<div class="text-[1rem] text-white mt-2 mb-2">
|
||||
The CPI measures the average change in prices for a typical basket of goods. It's key for tracking inflation, affecting interest rates, wages, and business decisions. Rising CPI indicates inflation, impacting purchasing power and the overall economy.
|
||||
</div>
|
||||
|
||||
<Lazy>
|
||||
<div class="app w-full">
|
||||
<Chart {init} options={optionsCPI} class="chart" />
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<h2 class="text-2xl text-gray-200 font-bold mt-20 sm:mt-10">
|
||||
Gross Domestic Product (GDP)
|
||||
</h2>
|
||||
|
||||
<div class="text-[1rem] text-white mt-2 mb-2">
|
||||
The GDP measures a country's economic performance, representing the total value of all goods and services produced within a specific period. It's a key indicator of economic health, used to compare the economic output of different nations and track growth or decline over time.
|
||||
</div>
|
||||
|
||||
<Lazy>
|
||||
<div class="app w-full ">
|
||||
<Chart {init} options={optionsGDP} class="chart" />
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<h2 class="text-2xl text-gray-200 font-bold mt-20 sm:mt-10">
|
||||
Unemployment Rate vs Inflation Rate
|
||||
</h2>
|
||||
|
||||
<div class="text-[1rem] text-white mt-2 mb-2">
|
||||
The unemployment rate measures the jobless percentage in the labor force, impacting spending and growth. Low unemployment boosts wages and activity, while high unemployment slows them. The inflation rate tracks price increases, with moderate inflation (~2%) being healthy. These rates are often inversely related and crucial for economic stability, influencing spending, savings, and investment.
|
||||
</div>
|
||||
|
||||
<Lazy>
|
||||
<div class="app w-full ">
|
||||
<Chart {init} options={optionsInflation} class="chart" />
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<h2 class="text-2xl text-gray-200 font-bold mt-20 sm:mt-10">
|
||||
Treasury Rates
|
||||
</h2>
|
||||
|
||||
<div class="text-[1rem] text-white mt-2 mb-2">
|
||||
Treasury rates are the interest rates that the US government pays on its debt obligations, and they are a key benchmark for interest rates across the economy.
|
||||
</div>
|
||||
|
||||
<div class="w-full text-white">
|
||||
<div class="relative flex justify-end">
|
||||
<select class="w-24 select select-bordered select-sm p-0 pl-5 bg-[#2A303C]" on:change={changeStatement}>
|
||||
<option disabled>Choose a Time Period</option>
|
||||
<option value="oneMonth">1M</option>
|
||||
<option value="sixMonths">6M</option>
|
||||
<option value="oneYear">1Y</option>
|
||||
<option value="threeYears" selected>3Y</option>
|
||||
<option value="fiveYears">5Y</option>
|
||||
<option value="max">Max</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<Lazy>
|
||||
<div class="app w-full ">
|
||||
<Chart {init} options={optionsData} class="chart" />
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<ul class="text-[0.8rem] font-medium text-center w-56 pt-10 sm:w-56 mb-5 flex justify-center sm:justify-end items-center ml-auto">
|
||||
<li class="w-full">
|
||||
<label on:click={() => changeTablePeriod('annual')} class="cursor-pointer rounded-l-lg inline-block w-full py-2.5 text-white {filterRule === 'annual' ? 'bg-purple-600' : 'bg-[#2A303C]'} font-semibold border-r border-gray-600" aria-current="page">
|
||||
Annual
|
||||
</label>
|
||||
</li>
|
||||
<li class="w-full">
|
||||
{#if data?.user?.tier === 'Pro'}
|
||||
<label on:click={() => changeTablePeriod('quarterly')} class="cursor-pointer inline-block w-full py-2.5 {filterRule === 'quarterly' ? 'bg-purple-600' : 'bg-[#2A303C]'} font-semibold text-white rounded-r-lg">
|
||||
Quartely
|
||||
</label>
|
||||
{:else}
|
||||
<a href="/pricing" class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-2.5 bg-[#2A303C] font-semibold text-white rounded-r-lg">
|
||||
<span class="">Quarterly</span>
|
||||
<svg class="ml-1 -mt-0.5 w-3.5 h-3.5" 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>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="w-full overflow-x-scroll">
|
||||
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
||||
<thead>
|
||||
<tr class="border border-slate-800">
|
||||
<th class="text-white font-semibold text-start text-sm sm:text-[1rem]">Date</th>
|
||||
<th class="text-white font-semibold text-end text-sm sm:text-[1rem]">1-Month</th>
|
||||
<th class="text-white font-semibold text-end text-sm sm:text-[1rem]">2-Month</th>
|
||||
<th class="text-white font-semibold text-end text-sm sm:text-[1rem]">3-Month</th>
|
||||
<th class="text-white font-semibold text-end text-sm sm:text-[1rem]">6-Month</th>
|
||||
<th class="text-white font-semibold text-end text-sm sm:text-[1rem]">1-Year</th>
|
||||
<th class="text-white font-semibold text-end text-sm sm:text-[1rem]">2-Year</th>
|
||||
<th class="text-white font-semibold text-end text-sm sm:text-[1rem]">3-Year</th>
|
||||
<th class="text-white font-semibold text-end text-sm sm:text-[1rem]">5-Year</th>
|
||||
<th class="text-white font-semibold text-end text-sm sm:text-[1rem]">7-Year</th>
|
||||
<th class="text-white font-semibold text-end text-sm sm:text-[1rem]">10-Year</th>
|
||||
<th class="text-white font-semibold text-end text-sm sm:text-[1rem]">20-Year</th>
|
||||
<th class="text-white font-semibold text-end text-sm sm:text-[1rem]">30-Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each tableList as item}
|
||||
<!-- row -->
|
||||
<tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
||||
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||
{item?.date}
|
||||
</td>
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
|
||||
{item?.month1}
|
||||
</td>
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
|
||||
{item?.month2 !== null ? item?.month2 : '-'}
|
||||
</td>
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
|
||||
{item?.month3}
|
||||
</td>
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
|
||||
{item?.month6}
|
||||
</td>
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
|
||||
{item?.year1}
|
||||
</td>
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
|
||||
{item?.year2}
|
||||
</td>
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
|
||||
{item?.year3}
|
||||
</td>
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
|
||||
{item?.year5}
|
||||
</td>
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
|
||||
{item?.year7}
|
||||
</td>
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
|
||||
{item?.year10}
|
||||
</td>
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
|
||||
{item?.year20}
|
||||
</td>
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
|
||||
{item?.year30}
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<div class="relative">
|
||||
<label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
||||
<span class="loading loading-spinner loading-md"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
</main>
|
||||
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
||||
|
||||
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
|
||||
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Pro Subscription
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Upgrade now for unlimited access to all data and tools.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Wallstreet Analyst
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Wall Street analyst ratings.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Congress Trading
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Congress trading insights.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.app {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.app {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
35
src/routes/economic-indicator/+page.ts
Normal file
35
src/routes/economic-indicator/+page.ts
Normal file
@ -0,0 +1,35 @@
|
||||
import { getCache, setCache } from '$lib/store';
|
||||
|
||||
|
||||
|
||||
export const load = async ({parent}) => {
|
||||
const getEconomicIndicator = async () => {
|
||||
let output;
|
||||
const {apiKey, apiURL} = await parent();
|
||||
|
||||
const cachedData = getCache('', 'getEconomicIndicator');
|
||||
if (cachedData) {
|
||||
output = cachedData;
|
||||
} else {
|
||||
const response = await fetch(apiURL + '/economic-indicator', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
"Content-Type": "application/json", "X-API-KEY": apiKey
|
||||
},
|
||||
});
|
||||
|
||||
output = await response.json();
|
||||
|
||||
|
||||
setCache('', output, 'getEconomicIndicator');
|
||||
|
||||
}
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
// Make sure to return a promise
|
||||
return {
|
||||
getEconomicIndicator: await getEconomicIndicator()
|
||||
};
|
||||
};
|
||||
@ -69,6 +69,6 @@ export const load = async ({ params, locals, setHeaders }) => {
|
||||
getWhyPriceMoved,
|
||||
getOneDayPrice,
|
||||
getUserWatchlist,
|
||||
companyName: cleanString(getETFProfile?.[0]?.name),
|
||||
companyName: cleanString(getETFProfile?.at(0)?.name),
|
||||
};
|
||||
};
|
||||
@ -763,6 +763,7 @@ $: {
|
||||
<!--Start Company Info -->
|
||||
|
||||
<ETFProfileCard
|
||||
data = {data}
|
||||
etfProfile = {etfProfile}
|
||||
/>
|
||||
|
||||
|
||||
@ -3,7 +3,9 @@
|
||||
import { page } from '$app/stores';
|
||||
import logo from '$lib/images/provider_logo.png';
|
||||
import { formatETFName } from '$lib/utils';
|
||||
|
||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||
|
||||
export let data;
|
||||
let currentPath = '';
|
||||
|
||||
$: {
|
||||
@ -58,8 +60,16 @@
|
||||
|
||||
|
||||
|
||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
<div class="w-full overflow-hidden m-auto mt-5">
|
||||
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
|
||||
<div class="relative flex justify-center items-start overflow-hidden w-full">
|
||||
|
||||
|
||||
<main class="w-full lg:w-3/4 lg:pr-5">
|
||||
|
||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
|
||||
<!-- Start Column -->
|
||||
<div>
|
||||
@ -119,9 +129,64 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
||||
|
||||
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
|
||||
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Pro Subscription
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Upgrade now for unlimited access to all data and tools.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Wallstreet Analyst
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Wall Street analyst ratings.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Congress Trading
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Congress trading insights.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -3,25 +3,13 @@ import { goto } from '$app/navigation';
|
||||
import { numberOfUnreadNotification, screenWidth } from '$lib/store';
|
||||
import { abbreviateNumber } from '$lib/utils';
|
||||
import logo from '$lib/images/new_launcher_logo.png';
|
||||
|
||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||
|
||||
export let data;
|
||||
|
||||
let etfData = data?.getETFNewLaunches;
|
||||
|
||||
|
||||
|
||||
let charNumber = 50;
|
||||
|
||||
$: {
|
||||
if ($screenWidth < 640)
|
||||
{
|
||||
charNumber = 30;
|
||||
}
|
||||
else {
|
||||
charNumber = 30;
|
||||
}
|
||||
}
|
||||
|
||||
$: charNumber = $screenWidth < 640 ? 30 : 40
|
||||
</script>
|
||||
|
||||
|
||||
@ -55,8 +43,16 @@ $: {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto p-10 mt-3 sm:mb-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
<div class="w-full overflow-hidden m-auto mt-5">
|
||||
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
|
||||
<div class="relative flex justify-center items-start overflow-hidden w-full">
|
||||
|
||||
|
||||
<main class="w-full lg:w-3/4 lg:pr-5">
|
||||
|
||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
|
||||
<!-- Start Column -->
|
||||
<div>
|
||||
@ -173,10 +169,66 @@ $: {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
||||
|
||||
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
|
||||
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Pro Subscription
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Upgrade now for unlimited access to all data and tools.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Wallstreet Analyst
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Wall Street analyst ratings.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Congress Trading
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Congress trading insights.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
@ -10,8 +10,9 @@
|
||||
import Crown from "lucide-svelte/icons/crown";
|
||||
import Activity from "lucide-svelte/icons/activity";
|
||||
import { abbreviateNumber, formatDate } from '$lib/utils';
|
||||
|
||||
import { numberOfUnreadNotification} from '$lib/store';
|
||||
import * as Tabs from "$lib/components/shadcn/tabs/index.js";
|
||||
|
||||
import { screenWidth, numberOfUnreadNotification} from '$lib/store';
|
||||
|
||||
/*
|
||||
import { Chart } from 'svelte-echarts'
|
||||
@ -28,9 +29,10 @@
|
||||
export let data;
|
||||
let isLoaded = false;
|
||||
const quickInfo = data?.getDashboard?.quickInfo;
|
||||
let optionsMode = 'premium';
|
||||
|
||||
|
||||
function compareTimes(time1, time2) {
|
||||
function compareTimes(time1, time2) {
|
||||
const [hours1, minutes1] = time1.split(':').map(Number);
|
||||
const [hours2, minutes2] = time2.split(':').map(Number);
|
||||
|
||||
@ -156,8 +158,18 @@ function latestInfoDate(inputDate) {
|
||||
return differenceInDays <=1;
|
||||
}
|
||||
|
||||
let optionsTable = data?.getDashboard?.optionsFlow?.premium || [];
|
||||
|
||||
|
||||
function changeTable(state) {
|
||||
optionsMode = state;
|
||||
if (optionsMode === 'premium') {
|
||||
optionsTable = data?.getDashboard?.optionsFlow?.premium || [];
|
||||
} else if (optionsMode === 'volume') {
|
||||
optionsTable = data?.getDashboard?.optionsFlow?.volume || [];
|
||||
} else {
|
||||
optionsTable = data?.getDashboard?.optionsFlow?.openInterest || [];
|
||||
}
|
||||
}
|
||||
let Feedback;
|
||||
|
||||
onMount( async() => {
|
||||
@ -202,10 +214,10 @@ onMount( async() => {
|
||||
<Feedback data={data} />
|
||||
{/if}
|
||||
|
||||
<!--
|
||||
|
||||
<div class="text-center mb-10 relative w-fit flex justify-center m-auto">
|
||||
<a href="/corporate-lobbying-tracker" class="text-white antialiased bg-[#27272A] w-full px-4 py-2 rounded-lg m-auto font-medium text-[1rem] flex items-center">
|
||||
<span class="font-semibold">Corporate Lobbying Tracker</span>
|
||||
<a href="/economic-indicator" class="text-white antialiased bg-[#27272A] w-full px-4 py-2 rounded-lg m-auto font-medium text-[1rem] flex items-center">
|
||||
<span class="font-semibold">US Economic Indicators</span>
|
||||
</a>
|
||||
<div class="absolute top-[-1.2rem] -right-5 sm:-right-8 rotate-[7deg]">
|
||||
<span class="bg-[#FBCE3C] text-black text-sm sm:text-[0.9rem] rounded-xl font-semibold sm:me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">
|
||||
@ -213,7 +225,7 @@ onMount( async() => {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
|
||||
<h1 class="text-white text-3xl font-semibold text-start w-full pl-4 pb-4 sm:pb-2">
|
||||
Dashboard
|
||||
@ -325,37 +337,44 @@ onMount( async() => {
|
||||
<ArrowUpRight class="hidden sm:inline-block h-4 w-4 shrink-0 -mt-1 ml-0.5" />
|
||||
</a>
|
||||
</div>
|
||||
<Card.Description class="mt-2 text-sm sm:text-[1rem]">Recent hedge fund options with the highest premiums.</Card.Description>
|
||||
<Card.Description class="mt-2 text-sm sm:text-[1rem]">Recent hedge fund options with the highest ...</Card.Description>
|
||||
<Tabs.Root value="premium" class="w-fit mt-5 ">
|
||||
<Tabs.List class="grid w-full grid-cols-3 bg-[#313131]">
|
||||
<Tabs.Trigger on:click={() => changeTable('premium')} value="premium" class="text-sm">Premium</Tabs.Trigger>
|
||||
<Tabs.Trigger on:click={() => changeTable('volume')} value="volume" class="text-sm">Volume</Tabs.Trigger>
|
||||
<Tabs.Trigger on:click={() => changeTable('openInterest')} value="openInterest" class="text-sm">{$screenWidth < 640 ? 'OI' : 'Open Interest'}</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
</Tabs.Root>
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<Table.Root class="overflow-x-scroll w-full">
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head class="text-white">Symbol</Table.Head>
|
||||
<Table.Head class="text-white">Prem.</Table.Head>
|
||||
<Table.Head class="text-white">Strike</Table.Head>
|
||||
<Table.Head class="text-white">Sent.</Table.Head>
|
||||
<Table.Head class="text-white">C/P</Table.Head>
|
||||
<Table.Head class="text-right text-white">Expiry</Table.Head>
|
||||
<Table.Head class="text-white font-semibold">Symbol</Table.Head>
|
||||
<Table.Head class="text-white text-right font-semibold">Prem</Table.Head>
|
||||
<Table.Head class="text-white text-right font-semibold">Strike</Table.Head>
|
||||
<Table.Head class="text-white text-right font-semibold">{optionsMode === 'openInterest' ? 'OI' : 'Vol'}</Table.Head>
|
||||
<Table.Head class="text-white text-right font-semibold">C/P</Table.Head>
|
||||
<Table.Head class="text-right text-white font-semibold">Expiry</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each data?.getDashboard?.optionsFlow as item}
|
||||
{#each optionsTable as item}
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<a href={item?.assetType === 'stock' ? `/stocks/${item?.ticker}` : `/etf/${item?.ticker}`} class="text-sm sm:text-[1rem] font-medium text-blue-400 sm:hover:text-white transition duration-100">{item?.ticker}</a>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="xl:table.-column text-sm sm:text-[1rem] {item?.put_call === 'Calls' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">
|
||||
<Table.Cell class="text-right xl:table.-column text-sm sm:text-[1rem] {item?.put_call === 'Calls' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">
|
||||
{abbreviateNumber(item?.cost_basis,true)}
|
||||
</Table.Cell>
|
||||
<Table.Cell class="xl:table.-column text-sm sm:text-[1rem]">
|
||||
<Table.Cell class="text-right xl:table.-column text-sm sm:text-[1rem]">
|
||||
${item?.strike_price}
|
||||
</Table.Cell>
|
||||
<Table.Cell class="md:table.-cell xl:table.-column text-sm sm:text-[1rem] {item?.sentiment === 'Bullish' ? 'text-[#00FC50]' : item?.sentiment === 'Bearish' ? 'text-[#FC2120]' : 'text-[#C6A755]'}">
|
||||
{item?.sentiment}
|
||||
<Table.Cell class="text-right md:table.-cell xl:table.-column text-sm sm:text-[1rem] text-white">
|
||||
{abbreviateNumber(optionsMode === 'openInterest' ? item?.open_interest : item?.volume)}
|
||||
</Table.Cell>
|
||||
<Table.Cell class="md:table.-cell xl:table.-column text-sm sm:text-[1rem] {item?.put_call === 'Calls' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">
|
||||
<Table.Cell class="text-right md:table.-cell xl:table.-column text-sm sm:text-[1rem] {item?.put_call === 'Calls' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">
|
||||
{item?.put_call}
|
||||
</Table.Cell>
|
||||
|
||||
@ -367,7 +386,7 @@ onMount( async() => {
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
||||
<Card.Root class="overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar sm:max-h-[400px]">
|
||||
<Card.Root class="overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar sm:max-h-[470px]">
|
||||
<Card.Header class="flex flex-row items-center">
|
||||
<div class="flex flex-col items-start w-full">
|
||||
<div class="flex flex-row w-full items-center">
|
||||
@ -376,6 +395,7 @@ onMount( async() => {
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
{#if data?.getDashboard?.recentDividends?.length !== 0}
|
||||
<ul style="padding-left: 5px;">
|
||||
{#each data?.getDashboard?.recentDividends as item}
|
||||
<strong>{item?.name}</strong> (<a href="/stocks/{item?.symbol}" class="sm:hover:text-white text-blue-400">{item?.symbol}</a>) has announced its upcoming dividend details as of {convertTimestamp(item?.updated)}:
|
||||
@ -398,6 +418,9 @@ onMount( async() => {
|
||||
|
||||
{/each}
|
||||
</ul>
|
||||
{:else}
|
||||
Currently, there are no dividend announcement reports available.
|
||||
{/if}
|
||||
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
@ -486,6 +509,7 @@ onMount( async() => {
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
{#if data?.getDasboard?.recentEarnings?.length !== 0}
|
||||
<ul style="padding-left: 5px;">
|
||||
{#each data?.getDashboard?.recentEarnings as item}
|
||||
<strong>{item?.name}</strong> (<a href="/stocks/{item?.symbol}" class="sm:hover:text-white text-blue-400">{item?.symbol}</a>) has released its quarterly earnings at {formatTime(item?.time)}:
|
||||
@ -500,7 +524,9 @@ onMount( async() => {
|
||||
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
{:else}
|
||||
Currently, there are no recent earnings reports available.
|
||||
{/if}
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
||||
|
||||
@ -4,9 +4,12 @@ import { screenWidth, numberOfUnreadNotification } from '$lib/store';
|
||||
import logo from '$lib/images/top_winner_logo.png';
|
||||
import { abbreviateNumber } from '$lib/utils';
|
||||
import MiniPlot from '$lib/components/MiniPlot.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import * as Tabs from "$lib/components/shadcn/tabs/index.js";
|
||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||
|
||||
export let data;
|
||||
|
||||
let isLoaded = false;
|
||||
const rawData = data?.getMiniPlotsIndex;
|
||||
|
||||
let priceDataSP500;
|
||||
@ -18,6 +21,7 @@ let changeSP500, changeNasdaq, changeDowJones, changeRussel2000;
|
||||
let previousCloseSP500, previousCloseNasdaq, previousCloseDowJones, previousCloseRussel2000;
|
||||
|
||||
|
||||
|
||||
function getCurrentDateFormatted() {
|
||||
// Get current date
|
||||
let date = new Date();
|
||||
@ -76,11 +80,11 @@ rawData?.forEach(({ symbol, priceData, changesPercentage, previousClose }) => {
|
||||
});
|
||||
|
||||
|
||||
let timePeriod = '1D';
|
||||
let outputList = data?.getDailyGainerLoserActive;
|
||||
let gainerLoserActive = outputList?.gainers[timePeriod]
|
||||
let gainerLoserActive = outputList?.gainers['1D']
|
||||
let displaySection = 'gainer'
|
||||
let order = 'highToLow';
|
||||
let sortBy = ''; // Default sorting by change percentage
|
||||
|
||||
|
||||
let buttonText = 'Top Winners';
|
||||
@ -96,7 +100,7 @@ function changeOrder(state:string) {
|
||||
}
|
||||
}
|
||||
|
||||
const sortByHighestChange = (tickerList) => {
|
||||
const sortByChange = (tickerList) => {
|
||||
return tickerList?.sort(function(a, b) {
|
||||
if(order === 'highToLow')
|
||||
{
|
||||
@ -108,15 +112,15 @@ const sortByHighestChange = (tickerList) => {
|
||||
|
||||
});
|
||||
}
|
||||
/*
|
||||
const sortByLowestChange = (tickerList) => {
|
||||
|
||||
const sortByPrice = (tickerList) => {
|
||||
return tickerList?.sort(function(a, b) {
|
||||
if(order === 'highToLow')
|
||||
{
|
||||
return a?.changesPercentage - b?.changesPercentage;
|
||||
return a?.price - b?.price;
|
||||
}
|
||||
else {
|
||||
return b?.changesPercentage - a?.changesPercentage;
|
||||
return b?.price - a?.price;
|
||||
}
|
||||
|
||||
});
|
||||
@ -134,7 +138,7 @@ const sortByVolume = (tickerList) => {
|
||||
|
||||
});
|
||||
}
|
||||
*/
|
||||
|
||||
const sortByMarketCap = (tickerList) => {
|
||||
return tickerList?.sort(function(a, b) {
|
||||
if(order === 'highToLow')
|
||||
@ -151,7 +155,9 @@ const sortByMarketCap = (tickerList) => {
|
||||
function changeSection(state) {
|
||||
|
||||
displaySection = state;
|
||||
timePeriod = '1D';
|
||||
const timePeriod = '1D';
|
||||
sortBy = '';
|
||||
order = '';
|
||||
|
||||
if (state === 'gainer')
|
||||
{
|
||||
@ -173,8 +179,12 @@ function changeSection(state) {
|
||||
|
||||
|
||||
|
||||
function selectTimeInterval(interval) {
|
||||
timePeriod = interval;
|
||||
function selectTimeInterval(event) {
|
||||
sortBy = '';
|
||||
order = '';
|
||||
|
||||
const timePeriod = event.target.value === 'oneDay' ? '1D' : event.target.value === 'oneWeek' ? '1W' : event.target.value === 'oneMonth' ? '1M' : event.target.value === 'threeMonths' ? '3M' : '6M';
|
||||
|
||||
|
||||
if (buttonText === 'Top Winners')
|
||||
{
|
||||
@ -191,31 +201,30 @@ function selectTimeInterval(interval) {
|
||||
|
||||
}
|
||||
|
||||
onMount( () => {
|
||||
isLoaded = true;
|
||||
})
|
||||
|
||||
$: {
|
||||
if(order)
|
||||
{
|
||||
if(displaySection === 'gainer')
|
||||
{
|
||||
gainerLoserActive = sortByHighestChange(outputList?.gainers[timePeriod]);
|
||||
}
|
||||
else if(displaySection === 'loser')
|
||||
{
|
||||
gainerLoserActive = sortByHighestChange(outputList?.losers[timePeriod]);
|
||||
}
|
||||
else if(displaySection === 'active')
|
||||
{
|
||||
gainerLoserActive = sortByHighestChange(outputList?.active[timePeriod]);
|
||||
}
|
||||
|
||||
|
||||
// Add this condition for market cap sorting
|
||||
if (sortBy === 'marketCap') {
|
||||
gainerLoserActive = sortByMarketCap(gainerLoserActive);
|
||||
}
|
||||
else if (sortBy === 'change') {
|
||||
gainerLoserActive = sortByChange(gainerLoserActive);
|
||||
}
|
||||
else if (sortBy === 'price') {
|
||||
gainerLoserActive = sortByPrice(gainerLoserActive);
|
||||
}
|
||||
else if (sortBy === 'volume') {
|
||||
gainerLoserActive = sortByVolume(gainerLoserActive);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let sortBy = 'change'; // Default sorting by change percentage
|
||||
|
||||
$: charNumber = $screenWidth < 640 ? 20 : 30;
|
||||
|
||||
@ -246,22 +255,26 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
|
||||
|
||||
</svelte:head>
|
||||
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
|
||||
|
||||
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
|
||||
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li class="text-gray-300">
|
||||
Market Movers
|
||||
</li>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li class="text-gray-300">Market Movers</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="w-full overflow-hidden m-auto mt-5">
|
||||
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
|
||||
<div class="relative flex justify-center items-start overflow-hidden w-full">
|
||||
|
||||
|
||||
<main class="w-full lg:w-3/4 lg:pr-5">
|
||||
|
||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto sm:p-10 mt-8 mb-4 sm:mb-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
|
||||
<div class="w-full m-auto sm:bg-[#27272A] h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
|
||||
<!-- Start Column -->
|
||||
<div>
|
||||
@ -271,7 +284,7 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<span class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center ">
|
||||
<span class="hidden sm:block text-white text-md font-semibold text-center flex justify-center items-center ">
|
||||
Explore top-performing, underperforming & most active traded stocks across different time frames.
|
||||
</span>
|
||||
|
||||
@ -304,12 +317,14 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
|
||||
|
||||
</div>
|
||||
|
||||
{#if isLoaded}
|
||||
|
||||
<div class="text-white text-xs sm:text-sm pb-5 sm:pb-2 pl-3 sm:pl-0">
|
||||
Stock Indexes - {getCurrentDateFormatted()}
|
||||
</div>
|
||||
|
||||
<div class="w-full -mt-4 sm:mt-0 mb-8 m-auto flex justify-start sm:justify-center items-center p-3 sm:p-0">
|
||||
<div class="w-full grid grid-cols-2 md:grid-cols-4 gap-y-3 lg:gap-y-0 gap-x-3 ">
|
||||
<div class="w-full grid grid-cols-2 md:grid-cols-3 gap-y-3 gap-x-3 ">
|
||||
<MiniPlot title="S&P500" priceData = {priceDataSP500} changesPercentage={changeSP500} previousClose={previousCloseSP500}/>
|
||||
<MiniPlot title="Nasdaq" priceData = {priceDataNasdaq} changesPercentage={changeNasdaq} previousClose={previousCloseNasdaq}/>
|
||||
<MiniPlot title="Dow" priceData = {priceDataDowJones} changesPercentage={changeDowJones} previousClose={previousCloseDowJones}/>
|
||||
@ -323,20 +338,13 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
|
||||
|
||||
|
||||
<div class="tabs flex flex-row justify-between sm:justify-start items-center w-full pl-3 pr-3 sm:pl-0 sm:pr-0">
|
||||
<button class="w-fit text-xl mr-0 sm:mr-10 rounded-md transition font-semibold hover:text-white {displaySection === 'gainer' ? ' text-white' : 'text-[#9A9996]'}" on:click={() => (changeSection('gainer'))} >
|
||||
Gainers
|
||||
<div class="{displaySection === 'gainer' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem] rounded-full" />
|
||||
</button>
|
||||
|
||||
<button class="w-fit text-xl mr-0 sm:mr-10 rounded-md transition font-semibold hover:text-white {displaySection === 'loser' ? ' text-white' : 'text-[#9A9996]'}" on:click={() => (changeSection('loser'))} >
|
||||
Losers
|
||||
<div class="{displaySection === 'loser' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem] rounded-full" />
|
||||
</button>
|
||||
|
||||
<button class="w-fit text-xl mr-0 sm:mr-10 rounded-md transition font-semibold hover:text-white {displaySection === 'active' ? ' text-white' : 'text-[#9A9996]'}" on:click={() => (changeSection('active'))} >
|
||||
Active
|
||||
<div class="{displaySection === 'active' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem] rounded-full" />
|
||||
</button>
|
||||
<Tabs.Root value="gainers" class="w-[400px]">
|
||||
<Tabs.List class="grid w-full grid-cols-3 bg-[#27272A]">
|
||||
<Tabs.Trigger on:click={() => (changeSection('gainer'))} value="gainers">Gainers</Tabs.Trigger>
|
||||
<Tabs.Trigger on:click={() => (changeSection('loser'))} value="losers">Losers</Tabs.Trigger>
|
||||
<Tabs.Trigger on:click={() => (changeSection('active'))} value="active">Active</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
</Tabs.Root>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -347,24 +355,21 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
|
||||
|
||||
|
||||
|
||||
<div class="pl-2 sm:pl-0 flex justify-start items-center mb-10 w-full">
|
||||
<label for="timePeriodModal" class="px-4 py-3 rounded-lg cursor-pointer bg-[#27272A] flex flex-row items-center">
|
||||
<span class="text-white text-sm sm:text-md mr-2">
|
||||
Time Period:
|
||||
<div class="w-full flex justify-start sm:justify-end items-center mb-10 ml-5 sm:ml-0">
|
||||
<div class="relative flex flex-col items-start">
|
||||
<span class="sm:hidden text-white text-sm mb-3">
|
||||
Time Period:
|
||||
</span>
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-sm sm:text-md m-auto font-medium text-white">
|
||||
{timePeriod}
|
||||
</span>
|
||||
<svg class="inline-block w-4 h-4 ml-1 mt-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
||||
<g transform="rotate(180 512 512)">
|
||||
<path fill="#fff" d="m488.832 344.32l-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872l319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
<select class="w-32 text-white select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#2A303C]" on:change={selectTimeInterval}>
|
||||
<option disabled>Choose a time period</option>
|
||||
<option value="oneDay" selected>1 Day</option>
|
||||
<option value="oneWeek">1 Week</option>
|
||||
<option value="oneMonth">1 Month</option>
|
||||
<option value="threeMonths">3 Months</option>
|
||||
<option value="sixMonths">6 Months</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@ -372,17 +377,23 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
|
||||
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-white font-semibold text-sm whitespace-nowrap">Company</th>
|
||||
<th on:click={() => { sortBy = 'change'; changeOrder(order); }} class="whitespace-nowrap cursor-pointer text-white font-semibold text-sm text-end">
|
||||
<th class="text-white font-semibold text-[1rem] whitespace-nowrap">Company</th>
|
||||
<th on:click={() => { sortBy = 'change'; changeOrder(order); }} class="whitespace-nowrap cursor-pointer text-white font-semibold text-[1rem] text-end">
|
||||
% Change
|
||||
<svg class="w-5 h-5 inline-block {order === 'highToLow' && sortBy === 'change' ? '' : 'rotate-180'}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
<svg class="w-5 h-5 inline-block {order === 'highToLow' && sortBy === 'change' ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</th>
|
||||
<th class="text-white font-semibold text-end text-sm">Price</th>
|
||||
<th on:click={() => { sortBy = 'marketCap'; changeOrder(order); }} class="whitespace-nowrap cursor-pointer text-white font-semibold text-sm text-end">
|
||||
<th on:click={() => { sortBy = 'price'; changeOrder(order); }} class="cursor-pointer text-white font-semibold text-end text-[1rem]">
|
||||
Price
|
||||
<svg class="w-5 h-5 inline-block {order === 'highToLow' && sortBy === 'price' ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</th>
|
||||
<th on:click={() => { sortBy = 'marketCap'; changeOrder(order); }} class="whitespace-nowrap cursor-pointer text-white font-semibold text-[1rem] text-end">
|
||||
Market Cap
|
||||
<svg class="w-5 h-5 inline-block {order === 'highToLow' && sortBy === 'marketCap' ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</th>
|
||||
<th class="text-white font-semibold text-sm text-end ">Volume</th>
|
||||
<th on:click={() => { sortBy = 'volume'; changeOrder(order); }} class="cursor-pointer text-white font-semibold text-[1rem] text-end">
|
||||
Volume
|
||||
<svg class="w-5 h-5 inline-block {order === 'highToLow' && sortBy === 'volume' ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -391,16 +402,16 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
|
||||
|
||||
<td class="border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-blue-400 font-medium">
|
||||
<span class="text-blue-400 font-semibold">
|
||||
{item?.symbol}
|
||||
</span>
|
||||
<span class="text-white font-medium border-b-[#09090B]">
|
||||
<span class="text-white text-sm font-semibold border-b-[#09090B]">
|
||||
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="text-white text-end text-sm sm:text-[1rem] font-medium border-b-[#09090B]">
|
||||
<td class="text-white text-end text-sm sm:text-[1rem] font-semibold border-b-[#09090B]">
|
||||
{#if item?.changesPercentage >=0}
|
||||
<span class="text-[#10DB06]">+{item?.changesPercentage >= 1000 ? abbreviateNumber(item?.changesPercentage) : item?.changesPercentage?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
@ -408,15 +419,15 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
|
||||
{/if}
|
||||
</td>
|
||||
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] text-end border-b-[#09090B]">
|
||||
<td class="text-white font-semibold text-sm sm:text-[1rem] text-end border-b-[#09090B]">
|
||||
${item?.price?.toFixed(2)}
|
||||
</td>
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] font-medium border-b-[#09090B] text-end">
|
||||
<td class="text-white text-sm sm:text-[1rem] font-semibold border-b-[#09090B] text-end">
|
||||
{item?.marketCap !== null ? abbreviateNumber(item?.marketCap, true) : '-'}
|
||||
</td>
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] font-medium border-b-[#09090B] text-end">
|
||||
<td class="text-white text-sm sm:text-[1rem] font-semibold border-b-[#09090B] text-end">
|
||||
{item?.volume !== null ? abbreviateNumber(item?.volume) : '-'}
|
||||
</td>
|
||||
|
||||
@ -433,144 +444,78 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
{#if !fullList}
|
||||
<label on:click={showFullList} class="mt-10 btn btn-sm btn-outline btn-ghost text-white text-xs m-auto normal-case ">
|
||||
Show more
|
||||
</label>
|
||||
{/if}
|
||||
-->
|
||||
|
||||
</div>
|
||||
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<div class="relative">
|
||||
<label class="bg-[#09090B] rounded-lg 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"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
||||
|
||||
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
|
||||
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Pro Subscription
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Upgrade now for unlimited access to all data and tools.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Wallstreet Analyst
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Wall Street analyst ratings.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Congress Trading
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Congress trading insights.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--Start Time Period Modal-->
|
||||
<input type="checkbox" id="timePeriodModal" class="modal-toggle" />
|
||||
|
||||
<dialog id="timePeriodModal" class="modal modal-bottom sm:modal-middle ">
|
||||
|
||||
|
||||
<label id="timePeriodModal" for="timePeriodModal" class="cursor-pointer modal-backdrop bg-[#09090B] bg-opacity-[0.5]"></label>
|
||||
|
||||
|
||||
<div class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-800">
|
||||
|
||||
|
||||
|
||||
<label for="timePeriodModal" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-[1.8rem] text-white">
|
||||
✕
|
||||
</label>
|
||||
|
||||
<div class="text-white">
|
||||
<h3 class="font-medium text-lg sm:text-2xl mb-10">
|
||||
Time Period
|
||||
</h3>
|
||||
|
||||
|
||||
<div class="flex flex-col items-center w-full max-w-3xl bg-[#09090B]">
|
||||
|
||||
|
||||
<label for="timePeriodModal" on:click={() => selectTimeInterval('1D')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
||||
|
||||
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {timePeriod === '1D' ? 'ring-2 ring-[#04E000]' : ''}">
|
||||
|
||||
<span class="ml-1 text-white font-medium mr-auto">
|
||||
1 Day
|
||||
</span>
|
||||
|
||||
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
||||
{#if timePeriod === '1D'}
|
||||
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</label>
|
||||
|
||||
<label for="timePeriodModal" on:click={() => selectTimeInterval('1W')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
||||
|
||||
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {timePeriod === '1W' ? 'ring-2 ring-[#04E000]' : ''}">
|
||||
|
||||
<span class="ml-1 text-white font-medium mr-auto">
|
||||
1 Week
|
||||
</span>
|
||||
|
||||
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
||||
{#if timePeriod === '1W'}
|
||||
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</label>
|
||||
|
||||
|
||||
<label for="timePeriodModal" on:click={() => selectTimeInterval('1M')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
||||
|
||||
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {timePeriod === '1M' ? 'ring-2 ring-[#04E000]' : ''}">
|
||||
|
||||
<span class="ml-1 text-white font-medium mr-auto">
|
||||
1 Month
|
||||
</span>
|
||||
|
||||
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
||||
{#if timePeriod === '1M'}
|
||||
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</label>
|
||||
|
||||
|
||||
|
||||
|
||||
<label for="timePeriodModal" on:click={() => selectTimeInterval('3M')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
||||
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {timePeriod === '3M' ? 'ring-2 ring-[#04E000]' : ''}">
|
||||
<span class="ml-1 text-white font-medium mr-auto">
|
||||
3 Months
|
||||
</span>
|
||||
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
||||
{#if timePeriod === '3M'}
|
||||
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label for="timePeriodModal" on:click={() => selectTimeInterval('6M')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
||||
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {timePeriod === '6M' ? 'ring-2 ring-[#04E000]' : ''}">
|
||||
<span class="ml-1 text-white font-medium mr-auto">
|
||||
6 Months
|
||||
</span>
|
||||
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
||||
{#if timePeriod === '6M'}
|
||||
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</label>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</dialog>
|
||||
<!--End Time Period Modal-->
|
||||
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
<script lang='ts'>
|
||||
import logo from '$lib/images/news_logo.png'
|
||||
import ScrollToTop from '$lib/components/ScrollToTop.svelte';
|
||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
|
||||
export let data;
|
||||
let displaySection = 'stock'
|
||||
|
||||
|
||||
@ -17,23 +19,24 @@ let displaySection = 'stock'
|
||||
|
||||
|
||||
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
|
||||
|
||||
<!--
|
||||
<div class="text-sm breadcrumbs ml-4">
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
|
||||
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li class="text-gray-300">Market News</li>
|
||||
</ul>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="w-full overflow-hidden m-auto mt-5">
|
||||
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
|
||||
<div class="relative flex justify-center items-start overflow-hidden w-full">
|
||||
|
||||
<div class="flex justify-center w-full m-auto h-full overflow-hidden mb-40">
|
||||
<div class="relative flex justify-center items-center overflow-hidden">
|
||||
<main>
|
||||
|
||||
|
||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
|
||||
<main class="w-full lg:w-3/4 lg:pr-5">
|
||||
|
||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
|
||||
<!-- Start Column -->
|
||||
@ -83,7 +86,7 @@ let displaySection = 'stock'
|
||||
|
||||
|
||||
|
||||
<div class="ml-4 w-full mb-2" >
|
||||
<div class="w-full mb-2" >
|
||||
<ul class="pr-4 sm:pr-0 w-full font-medium flex flex-row items-center bg-[#09090B] overflow-x-scroll no-scrollbar space-x-3 rtl:space-x-reverse py-2">
|
||||
<li class="cursor-pointer flex flex-col items-center text-xl">
|
||||
<a href='/market-news' on:click={() => displaySection = 'stock'} class="px-3 font-medium text-gray-400 sm:hover:text-white {displaySection === 'stock' ? 'text-white ' : 'bg-[#09090B]'}" >
|
||||
@ -111,11 +114,64 @@ let displaySection = 'stock'
|
||||
|
||||
</main>
|
||||
|
||||
</div>
|
||||
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
||||
|
||||
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
|
||||
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Pro Subscription
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Upgrade now for unlimited access to all data and tools.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Wallstreet Analyst
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Wall Street analyst ratings.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Congress Trading
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Congress trading insights.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -96,7 +96,7 @@ function checkIfYoutubeVideo(link) {
|
||||
</svelte:head>
|
||||
|
||||
|
||||
<section class="w-full max-w-5xl overflow-hidden m-auto mt-10">
|
||||
<section class="w-full overflow-hidden m-auto mt-10">
|
||||
|
||||
<div class="flex justify-center w-full m-auto overflow-hidden">
|
||||
<div class="relative flex justify-center items-center overflow-hidden">
|
||||
@ -105,7 +105,7 @@ function checkIfYoutubeVideo(link) {
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
||||
{#if news.length !== 0}
|
||||
{#each news as item}
|
||||
<div class="flex flex-col w-full mt-5 bg-[#27272A] shadow-lg h-auto sm:h-[430px] pb-10 sm:pb-5 rounded-none sm:rounded-lg m-auto">
|
||||
<div class="flex flex-col w-full mt-5 bg-[#141417] shadow-lg h-auto sm:h-[450px] xl:h-[430px] pb-10 sm:pb-5 rounded-none sm:rounded-lg m-auto">
|
||||
{#if videoId = checkIfYoutubeVideo(item.url)}
|
||||
<iframe
|
||||
class="w-full h-60 rounded-none sm:rounded-lg"
|
||||
|
||||
@ -71,7 +71,7 @@
|
||||
|
||||
|
||||
|
||||
<section class="w-full max-w-5xl overflow-hidden m-auto mt-10">
|
||||
<section class="w-full overflow-hidden m-auto mt-10">
|
||||
|
||||
<div class="flex justify-center w-full m-auto overflow-hidden">
|
||||
<div class="relative flex justify-center items-center overflow-hidden">
|
||||
|
||||
@ -226,7 +226,6 @@ use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
|
||||
itemStyle: {
|
||||
color: '#22C55E' // Change bar color to white
|
||||
},
|
||||
barWidth: '25%',
|
||||
},
|
||||
|
||||
{
|
||||
@ -234,9 +233,8 @@ use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
|
||||
data: soldList,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: '#E11D48' // Change bar color to white
|
||||
color: '#F71F4F' // Change bar color to white
|
||||
},
|
||||
barWidth: '25%',
|
||||
},
|
||||
]
|
||||
};
|
||||
@ -471,7 +469,7 @@ use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
|
||||
<div class="h-full bg-[#313131] transform -translate-x-1/2 " aria-hidden="true"></div>
|
||||
<div class="w-3 h-3 bg-[#E11D48] border-4 box-content border-[#313131] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
|
||||
<div class="w-3 h-3 bg-[#F71F4F] border-4 box-content border-[#313131] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
|
||||
<span class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block">
|
||||
Sold
|
||||
</span>
|
||||
|
||||
@ -10,6 +10,8 @@
|
||||
import { onMount } from 'svelte';
|
||||
import defaultLogo from '$lib/images/stocks/logo/default_logo.png';
|
||||
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
|
||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||
|
||||
// import * as XLSX from 'xlsx';
|
||||
|
||||
export let data;
|
||||
@ -287,27 +289,8 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let charNumber = 40;
|
||||
$: {
|
||||
if ($screenWidth < 640)
|
||||
{
|
||||
charNumber = 20;
|
||||
}
|
||||
else {
|
||||
charNumber = 40;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$: charNumber = $screenWidth < 640 ? 20 : 40;
|
||||
|
||||
|
||||
$: {
|
||||
@ -365,17 +348,25 @@
|
||||
|
||||
|
||||
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li class="text-gray-300">Congress Flow</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
|
||||
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li class="text-gray-300">Congress Flow</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="w-full overflow-hidden m-auto mt-5">
|
||||
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
|
||||
<div class="relative flex justify-center items-start overflow-hidden w-full">
|
||||
|
||||
|
||||
<main class="w-full lg:w-3/4 lg:pr-5">
|
||||
|
||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
|
||||
<!-- Start Column -->
|
||||
<div>
|
||||
@ -669,7 +660,68 @@
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
||||
|
||||
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
|
||||
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Pro Subscription
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Upgrade now for unlimited access to all data and tools.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Wallstreet Analyst
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Wall Street analyst ratings.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Congress Trading
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Congress trading insights.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -111,7 +111,7 @@ async function purchasePlan(subscriptionType:string='') {
|
||||
|
||||
|
||||
|
||||
<section class="bg-[#09090B] min-h-screen mb-40 w-full max-w-3xl sm:max-w-screen-xl pt-10 pb-40 m-auto">
|
||||
<section class="bg-[#09090B] min-h-screen mb-40 w-full max-w-3xl sm:max-w-screen-lg pt-10 pb-40 m-auto">
|
||||
<div class="px-3">
|
||||
<div class="mx-auto text-center mb-8 ">
|
||||
|
||||
@ -127,7 +127,7 @@ async function purchasePlan(subscriptionType:string='') {
|
||||
|
||||
|
||||
<div class="flex flex-row items-center justify-center mt-6 pb-5">
|
||||
<span class="text-sm font-medium text-white text-opacity-[0.6] mr-3">
|
||||
<span class="text-sm font-semibold text-white mr-3">
|
||||
Pay Monthly
|
||||
</span>
|
||||
|
||||
@ -138,7 +138,7 @@ async function purchasePlan(subscriptionType:string='') {
|
||||
</label>
|
||||
|
||||
<div class="ml-3 -mb-4 flex flex-col items-start">
|
||||
<span class="text-sm font-medium text-white text-opacity-[0.6]">
|
||||
<span class="text-sm font-semibold text-white">
|
||||
Pay Yearly
|
||||
</span>
|
||||
<span class="text-[#FBCE3C] text-sm font-semibold">
|
||||
@ -372,12 +372,12 @@ async function purchasePlan(subscriptionType:string='') {
|
||||
|
||||
|
||||
<!--Start Pricing Card-->
|
||||
|
||||
<!--
|
||||
<div class="sm:h-[660px] sm:order-2 box sm:-mt-10 flex flex-col p-6 lg:p-8 mx-auto ring-[1px] ring-gray-400 rounded-lg w-full text-center text-white">
|
||||
|
||||
<div class="absolute top-0 left-1/2 transform -translate-x-1/2 rounded-b-2xl flex flex-row border-l border-r border-b border-gray-400 items-center p-2">
|
||||
<span class="text-white text-md font-semibold px-3">
|
||||
Best Support
|
||||
Limited Offer
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -441,7 +441,7 @@ async function purchasePlan(subscriptionType:string='') {
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
|
||||
-->
|
||||
<!--End Pricing Card-->
|
||||
|
||||
|
||||
@ -465,9 +465,9 @@ async function purchasePlan(subscriptionType:string='') {
|
||||
<div class="space-y-4 mb-12">
|
||||
<!-- Table (Tidy Essential) -->
|
||||
<div class="overflow-x-auto" data-aos="fade-up">
|
||||
<table class="table-auto w-full border-b border-slate-400">
|
||||
<table class="table table-sm table-compact w-full">
|
||||
<!-- Table header -->
|
||||
<thead>
|
||||
<thead class="border-b border-gray-800">
|
||||
<tr class="text-base sm:text-lg text-white">
|
||||
<th class="text-xl md:text-2xl whitespace-nowrap font-bold text-left pr-2 py-4 min-w-[10rem] md:min-w-[24rem]">Plan</th>
|
||||
<th class="text-bold text-center px-2 py-4">Free</th>
|
||||
@ -477,7 +477,7 @@ async function purchasePlan(subscriptionType:string='') {
|
||||
<!-- Table body -->
|
||||
<tbody>
|
||||
<!-- Row -->
|
||||
<tr class="border-t first:border-t-2 border-slate-400">
|
||||
<tr class="border-t first:border-t-2 border-gray-800">
|
||||
<td class="text-sm sm:text-base font-medium text-white pr-2 py-4">
|
||||
<div class="flex items-center justify-between max-w-xs">
|
||||
<div>Unusual Options Activity</div>
|
||||
@ -491,7 +491,7 @@ async function purchasePlan(subscriptionType:string='') {
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row -->
|
||||
<tr class="border-t first:border-t-2 border-slate-400">
|
||||
<tr class="border-t first:border-t-2 border-gray-800">
|
||||
<td class="text-sm sm:text-base font-medium text-white pr-2 py-4">
|
||||
<div class="flex items-center justify-between max-w-xs">
|
||||
<div>Retail Trader Activity</div>
|
||||
@ -505,7 +505,7 @@ async function purchasePlan(subscriptionType:string='') {
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row -->
|
||||
<tr class="border-t first:border-t-2 border-slate-400">
|
||||
<tr class="border-t first:border-t-2 border-gray-800">
|
||||
<td class="text-sm sm:text-base font-medium text-white pr-2 py-4">
|
||||
<div class="flex items-center justify-between max-w-xs">
|
||||
<div>Dark Pool Data</div>
|
||||
@ -519,7 +519,7 @@ async function purchasePlan(subscriptionType:string='') {
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row -->
|
||||
<tr class="border-t first:border-t-2 border-slate-400">
|
||||
<tr class="border-t first:border-t-2 border-gray-800">
|
||||
<td class="text-sm sm:text-base font-medium text-white pr-2 py-4">
|
||||
<div class="flex items-center justify-between max-w-xs">
|
||||
<div>AI Predictions</div>
|
||||
@ -533,7 +533,7 @@ async function purchasePlan(subscriptionType:string='') {
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row -->
|
||||
<tr class="border-t first:border-t-2 border-slate-400">
|
||||
<tr class="border-t first:border-t-2 border-gray-800">
|
||||
<td class="text-sm sm:text-base font-medium text-white pr-2 py-4">
|
||||
<div class="flex items-center justify-between max-w-xs">
|
||||
<div>Wallstreet Analyst Database</div>
|
||||
@ -547,7 +547,7 @@ async function purchasePlan(subscriptionType:string='') {
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row -->
|
||||
<tr class="border-t first:border-t-2 border-slate-400">
|
||||
<tr class="border-t first:border-t-2 border-gray-800">
|
||||
<td class="text-sm sm:text-base font-medium text-white pr-2 py-4">
|
||||
<div class="flex items-center justify-between max-w-xs">
|
||||
<div>Hedge Fund Database</div>
|
||||
@ -561,7 +561,7 @@ async function purchasePlan(subscriptionType:string='') {
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row -->
|
||||
<tr class="border-t first:border-t-2 border-slate-400">
|
||||
<tr class="border-t first:border-t-2 border-gray-800">
|
||||
<td class="text-sm sm:text-base font-medium text-white pr-2 py-4">
|
||||
<div class="flex items-center justify-between max-w-xs">
|
||||
<div>Congress Database</div>
|
||||
@ -575,7 +575,7 @@ async function purchasePlan(subscriptionType:string='') {
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row -->
|
||||
<tr class="border-t first:border-t-2 border-slate-400">
|
||||
<tr class="border-t first:border-t-2 border-gray-800">
|
||||
<td class="text-sm sm:text-base font-medium text-white pr-2 py-4">
|
||||
<div class="flex items-center justify-between max-w-xs">
|
||||
<div>Financial History</div>
|
||||
@ -589,7 +589,7 @@ async function purchasePlan(subscriptionType:string='') {
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row -->
|
||||
<tr class="border-t first:border-t-2 border-slate-400">
|
||||
<tr class="border-t first:border-t-2 border-gray-800">
|
||||
<td class="text-sm sm:text-base font-medium text-white pr-2 py-4">
|
||||
<div class="flex items-center justify-between max-w-xs">
|
||||
<div>Watchlist</div>
|
||||
@ -603,7 +603,7 @@ async function purchasePlan(subscriptionType:string='') {
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row -->
|
||||
<tr class="border-t first:border-t-2 border-slate-400">
|
||||
<tr class="border-t first:border-t-2 border-gray-800">
|
||||
<td class="text-sm sm:text-base font-medium text-white pr-2 py-4">
|
||||
<div class="flex items-center justify-between max-w-xs">
|
||||
<div class="flex items-center space-x-2">
|
||||
@ -653,7 +653,7 @@ async function purchasePlan(subscriptionType:string='') {
|
||||
</div>
|
||||
|
||||
<!-- Faqs -->
|
||||
<ul class="mx-auto divide-y divide-slate-400">
|
||||
<ul class="mx-auto divide-y divide-gray-800">
|
||||
<li>
|
||||
<details class="collapse collapse-arrow">
|
||||
<summary class="collapse-title text-white font-semibold text-[1rem] sm:text-xl flex items-center justify-between w-full text-left py-5">What are the advantages of Stocknear Service?</summary>
|
||||
|
||||
@ -18,13 +18,10 @@
|
||||
const title = data?.getStrategy?.title;
|
||||
|
||||
let stockScreenerData = data?.getStockScreenerData?.filter(item =>
|
||||
item?.ratingRecommendation !== null &&
|
||||
item?.trendAnalysis?.accuracy !== null &&
|
||||
item?.fundamentalAnalysis?.accuracy !== null &&
|
||||
item?.dividendYield !== null &&
|
||||
item?.annualDividend !== null &&
|
||||
item?.dividendGrowth !== null &&
|
||||
item?.payoutRatio !== null
|
||||
Object?.values(item)?.every(value =>
|
||||
value !== null && value !== undefined &&
|
||||
(typeof value !== 'object' || Object?.values(value)?.every(subValue => subValue !== null && subValue !== undefined))
|
||||
)
|
||||
);
|
||||
|
||||
|
||||
@ -113,6 +110,13 @@ const getStockScreenerData = async (rules) => {
|
||||
var: (ruleOfList?.find(item => item.name === "var") || { condition: 'above' }).condition,
|
||||
trendAnalysis: (ruleOfList?.find(item => item.name === "trendAnalysis") || { condition: 'above' }).condition,
|
||||
fundamentalAnalysis: (ruleOfList?.find(item => item.name === "fundamentalAnalysis") || { condition: 'above' }).condition,
|
||||
currentRatio: (ruleOfList?.find(item => item.name === "currentRatio") || { condition: 'above' }).condition,
|
||||
quickRatio: (ruleOfList?.find(item => item.name === "quickRatio") || { condition: 'above' }).condition,
|
||||
debtEquityRatio: (ruleOfList?.find(item => item.name === "debtEquityRatio") || { condition: 'above' }).condition,
|
||||
debtRatio: (ruleOfList?.find(item => item.name === "debtRatio") || { condition: 'above' }).condition,
|
||||
returnOnAssets: (ruleOfList?.find(item => item.name === "returnOnAssets") || { condition: 'above' }).condition,
|
||||
returnOnEquity: (ruleOfList?.find(item => item.name === "returnOnEquity") || { condition: 'above' }).condition,
|
||||
|
||||
};
|
||||
|
||||
let ruleTrend = {
|
||||
@ -174,7 +178,14 @@ const getStockScreenerData = async (rules) => {
|
||||
{ rule: 'var', label: 'Value at Risk (VaR)', category: 'fund' },
|
||||
{ rule: 'trendAnalysis', label: 'AI Trend Analysis (Bullish)', category: 'ai' },
|
||||
{ rule: 'fundamentalAnalysis', label: 'AI Fundamental Analysis (Bullish)', category: 'ai' },
|
||||
{ rule: 'ratingRecommendation', label: 'Analyst Rating', category: 'fund'}
|
||||
{ rule: 'ratingRecommendation', label: 'Analyst Rating', category: 'fund'},
|
||||
{ rule: 'currentRatio', label: 'Current Ratio',category: 'fund' },
|
||||
{ rule: 'quickRatio', label: 'Quick Ratio',category: 'fund' },
|
||||
{ rule: 'debtEquityRatio', label: 'Debt Equity Ratio',category: 'fund' },
|
||||
{ rule: 'debtRatio', label: 'Debt Ratio',category: 'fund' },
|
||||
{ rule: 'returnOnAssets', label: 'Return on Assets',category: 'fund' },
|
||||
{ rule: 'returnOnEquity', label: 'Return on Equity',category: 'fund' },
|
||||
|
||||
];
|
||||
|
||||
// Creating the ruleMappings object from allRows
|
||||
@ -232,6 +243,13 @@ const getStockScreenerData = async (rules) => {
|
||||
let valueDividendGrowth = (ruleOfList?.find(item => item.name === "dividendGrowth") || { value: 5 }).value;
|
||||
let valuePayoutRatio = (ruleOfList?.find(item => item.name === "payoutRatio") || { value: 20 }).value;
|
||||
|
||||
let valueCurrentRatio = (ruleOfList?.find(item => item.name === "currentRatio") || { value: 1 }).value;
|
||||
let valueQuickRatio = (ruleOfList?.find(item => item.name === "quickRatio") || { value: 1 }).value;
|
||||
let valueDebtEquityRatio = (ruleOfList?.find(item => item.name === "debtEquityRatio") || { value: 1 }).value;
|
||||
let valueDebtRatio = (ruleOfList?.find(item => item.name === "debtRatio") || { value: 1 }).value;
|
||||
let valueReturnOnAssets = (ruleOfList?.find(item => item.name === "returnOnAssets") || { value: 0 }).value;
|
||||
let valueReturnOnEquity = (ruleOfList?.find(item => item.name === "returnOnEquity") || { value: 0 }).value;
|
||||
|
||||
let valueEPS = (ruleOfList?.find(item => item.name === "eps") || { value: 2 }).value;
|
||||
let valueGrowthEPS = (ruleOfList?.find(item => item.name === "growthEPS") || { value: 10 }).value;
|
||||
let valuePE = (ruleOfList?.find(item => item.name === "pe") || { value: 10 }).value;
|
||||
@ -342,6 +360,12 @@ const valueMappings = {
|
||||
var: valueVaR,
|
||||
trendAnalysis: valueTrendAnalysis,
|
||||
fundamentalAnalysis: valueFundamentalAnalysis,
|
||||
currentRatio: valueCurrentRatio,
|
||||
quickRatio: valueQuickRatio,
|
||||
debtEquityRatio: valueDebtEquityRatio,
|
||||
debtRatio: valueDebtRatio,
|
||||
returnOnAssets: valueReturnOnAssets,
|
||||
returnOnEquity: valueReturnOnEquity,
|
||||
};
|
||||
|
||||
const conditions = {
|
||||
@ -394,6 +418,11 @@ const conditions = {
|
||||
var: ruleCondition.var,
|
||||
trendAnalysis: ruleCondition.trendAnalysis,
|
||||
fundamentalAnalysis: ruleCondition.fundamentalAnalysis,
|
||||
currentRatio: ruleCondition.currentRatio,
|
||||
quickRatio: ruleCondition.quickRatio,
|
||||
debtEquityRatio: ruleCondition.debtEquityRatio,
|
||||
debtRatio: ruleCondition.debtRatio,
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -453,14 +482,11 @@ async function updateStockScreenerData() {
|
||||
try {
|
||||
const newData = await getStockScreenerData(ruleOfList);
|
||||
stockScreenerData = newData?.filter(item =>
|
||||
item?.ratingRecommendation !== null &&
|
||||
item?.trendAnalysis?.accuracy !== null &&
|
||||
item?.fundamentalAnalysis?.accuracy !== null &&
|
||||
item?.dividendYield !== null &&
|
||||
item?.annualDividend !== null &&
|
||||
item?.dividendGrowth !== null &&
|
||||
item?.payoutRatio !== null
|
||||
);
|
||||
Object.values(item).every(value =>
|
||||
value !== null && value !== undefined &&
|
||||
(typeof value !== 'object' || Object.values(value).every(subValue => subValue !== null && subValue !== undefined))
|
||||
)
|
||||
);
|
||||
|
||||
filteredData = filterStockScreenerData();
|
||||
displayResults = filteredData?.slice(0, 50);
|
||||
@ -771,6 +797,24 @@ $: {
|
||||
case 'fundamentalAnalysis':
|
||||
ruleToUpdate.value = valueFundamentalAnalysis;
|
||||
break;
|
||||
case 'currentRatio':
|
||||
ruleToUpdate.value = valueCurrentRatio;
|
||||
break;
|
||||
case 'quickRatio':
|
||||
ruleToUpdate.value = valueQuickRatio;
|
||||
break;
|
||||
case 'debtEquityRatio':
|
||||
ruleToUpdate.value = valueDebtEquityRatio;
|
||||
break;
|
||||
case 'debtRatio':
|
||||
ruleToUpdate.value = valueDebtRatio;
|
||||
break;
|
||||
case 'returnOnAssets':
|
||||
ruleToUpdate.value = valueReturnOnAssets;
|
||||
break;
|
||||
case 'returnOnEquity':
|
||||
ruleToUpdate.value = valueReturnOnEquity;
|
||||
break;
|
||||
default:
|
||||
// Handle any case not explicitly mentioned
|
||||
break;
|
||||
@ -852,7 +896,7 @@ function filterStockScreenerData() {
|
||||
}
|
||||
|
||||
let order = 'highToLow';
|
||||
let sortBy = 'change'; // Default sorting by change percentage
|
||||
let sortBy = ''; // Default sorting by change percentage
|
||||
|
||||
function changeOrder(state:string) {
|
||||
if (state === 'highToLow')
|
||||
@ -1605,7 +1649,152 @@ $: charNumber = $screenWidth < 640 ? 20 : 40;
|
||||
{/if}
|
||||
<!--End Market Cap Rule-->
|
||||
|
||||
{#if ruleName === 'currentRatio'}
|
||||
|
||||
<div class="w-full max-w-xl text-white font-medium text-sm sm:text-[1rem] flex flex-row justify-center items-center">
|
||||
Current Ratio {ruleCondition[ruleName]} {valueCurrentRatio}
|
||||
|
||||
<label on:click={() => changeRuleCondition('below')} class="ml-5 cursor-pointer flex flex-row mr-2 justify-center items-center">
|
||||
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" checked={ruleCondition[ruleName] === 'below'} />
|
||||
<span class="label-text text-white">Below</span>
|
||||
</label>
|
||||
<label on:click={() => changeRuleCondition('above')} class="cursor-pointer flex flex-row ml-2 justify-center items-center">
|
||||
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" checked={ruleCondition[ruleName] === 'above'} />
|
||||
<span class="label-text text-white">Above</span>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full pt-5">
|
||||
<input type="range" min="0" max="50" step="0.5" bind:value={valueCurrentRatio} class="range range-secondary" />
|
||||
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
|
||||
{#if ruleName === 'quickRatio'}
|
||||
|
||||
<div class="w-full max-w-xl text-white font-medium text-sm sm:text-[1rem] flex flex-row justify-center items-center">
|
||||
Quick Ratio {ruleCondition[ruleName]} {valueQuickRatio}
|
||||
|
||||
<label on:click={() => changeRuleCondition('below')} class="ml-5 cursor-pointer flex flex-row mr-2 justify-center items-center">
|
||||
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" checked={ruleCondition[ruleName] === 'below'} />
|
||||
<span class="label-text text-white">Below</span>
|
||||
</label>
|
||||
<label on:click={() => changeRuleCondition('above')} class="cursor-pointer flex flex-row ml-2 justify-center items-center">
|
||||
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" checked={ruleCondition[ruleName] === 'above'} />
|
||||
<span class="label-text text-white">Above</span>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full pt-5">
|
||||
<input type="range" min="0" max="50" step="0.5" bind:value={valueQuickRatio} class="range range-secondary" />
|
||||
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
|
||||
{#if ruleName === 'returnOnAssets'}
|
||||
|
||||
<div class="w-full max-w-xl text-white font-medium text-sm sm:text-[1rem] flex flex-row justify-center items-center">
|
||||
Return on Assets {ruleCondition[ruleName]} {valueReturnOnAssets}
|
||||
|
||||
<label on:click={() => changeRuleCondition('below')} class="ml-5 cursor-pointer flex flex-row mr-2 justify-center items-center">
|
||||
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" checked={ruleCondition[ruleName] === 'below'} />
|
||||
<span class="label-text text-white">Below</span>
|
||||
</label>
|
||||
<label on:click={() => changeRuleCondition('above')} class="cursor-pointer flex flex-row ml-2 justify-center items-center">
|
||||
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" checked={ruleCondition[ruleName] === 'above'} />
|
||||
<span class="label-text text-white">Above</span>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full pt-5">
|
||||
<input type="range" min="-5" max="5" step="0.1" bind:value={valueReturnOnAssets} class="range range-secondary" />
|
||||
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
|
||||
|
||||
{#if ruleName === 'returnOnEquity'}
|
||||
|
||||
<div class="w-full max-w-xl text-white font-medium text-sm sm:text-[1rem] flex flex-row justify-center items-center">
|
||||
Return on Equity {ruleCondition[ruleName]} {valueReturnOnEquity}
|
||||
|
||||
<label on:click={() => changeRuleCondition('below')} class="ml-5 cursor-pointer flex flex-row mr-2 justify-center items-center">
|
||||
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" checked={ruleCondition[ruleName] === 'below'} />
|
||||
<span class="label-text text-white">Below</span>
|
||||
</label>
|
||||
<label on:click={() => changeRuleCondition('above')} class="cursor-pointer flex flex-row ml-2 justify-center items-center">
|
||||
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" checked={ruleCondition[ruleName] === 'above'} />
|
||||
<span class="label-text text-white">Above</span>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full pt-5">
|
||||
<input type="range" min="-5" max="5" step="0.1" bind:value={valueReturnOnEquity} class="range range-secondary" />
|
||||
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
|
||||
{#if ruleName === 'debtRatio'}
|
||||
|
||||
<div class="w-full max-w-xl text-white font-medium text-sm sm:text-[1rem] flex flex-row justify-center items-center">
|
||||
Debt Ratio {ruleCondition[ruleName]} {valueDebtRatio}
|
||||
|
||||
<label on:click={() => changeRuleCondition('below')} class="ml-5 cursor-pointer flex flex-row mr-2 justify-center items-center">
|
||||
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" checked={ruleCondition[ruleName] === 'below'} />
|
||||
<span class="label-text text-white">Below</span>
|
||||
</label>
|
||||
<label on:click={() => changeRuleCondition('above')} class="cursor-pointer flex flex-row ml-2 justify-center items-center">
|
||||
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" checked={ruleCondition[ruleName] === 'above'} />
|
||||
<span class="label-text text-white">Above</span>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full pt-5">
|
||||
<input type="range" min="0" max="50" step="0.5" bind:value={valueDebtRatio} class="range range-secondary" />
|
||||
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
|
||||
|
||||
{#if ruleName === 'debtEquityRatio'}
|
||||
|
||||
<div class="w-full max-w-xl text-white font-medium text-sm sm:text-[1rem] flex flex-row justify-center items-center">
|
||||
Debt Equity Ratio {ruleCondition[ruleName]} {valueDebtEquityRatio}
|
||||
|
||||
<label on:click={() => changeRuleCondition('below')} class="ml-5 cursor-pointer flex flex-row mr-2 justify-center items-center">
|
||||
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" checked={ruleCondition[ruleName] === 'below'} />
|
||||
<span class="label-text text-white">Below</span>
|
||||
</label>
|
||||
<label on:click={() => changeRuleCondition('above')} class="cursor-pointer flex flex-row ml-2 justify-center items-center">
|
||||
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" checked={ruleCondition[ruleName] === 'above'} />
|
||||
<span class="label-text text-white">Above</span>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full pt-5">
|
||||
<input type="range" min="0" max="50" step="0.5" bind:value={valueDebtEquityRatio} class="range range-secondary" />
|
||||
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
|
||||
<!--Start Rule-->
|
||||
{#if ruleName === 'payoutRatio'}
|
||||
|
||||
|
||||
@ -41,7 +41,7 @@ const fetchCommunitySentiment = async (pb, ticker, cookies) => {
|
||||
|
||||
return {
|
||||
alreadyVoted: cookieVote || null,
|
||||
sentimentData: output[0] || {}
|
||||
sentimentData: output?.at(0) || {}
|
||||
};
|
||||
};
|
||||
|
||||
@ -51,7 +51,7 @@ export const load = async ({ params, locals, cookies, setHeaders }) => {
|
||||
|
||||
const endpoints = [
|
||||
'/similar-stocks', '/stockdeck', '/analyst-summary-rating', '/stock-quote',
|
||||
'/bull-bear-say', '/wiim', '/top-etf-ticker-holder', '/one-day-price'
|
||||
'/bull-bear-say','/wiim', '/top-etf-ticker-holder', '/one-day-price','/next-earnings'
|
||||
];
|
||||
|
||||
const promises = [
|
||||
@ -63,7 +63,7 @@ export const load = async ({ params, locals, cookies, setHeaders }) => {
|
||||
|
||||
const [
|
||||
getSimilarStock, getStockDeck, getAnalystRating, getStockQuote,
|
||||
getBullBearSay, getWhyPriceMoved, getTopETFHolder, getOneDayPrice,
|
||||
getBullBearSay, getWhyPriceMoved, getTopETFHolder, getOneDayPrice, getNextEarnings,
|
||||
getUserWatchlist, getCommunitySentiment
|
||||
] = await Promise.all(promises);
|
||||
|
||||
@ -78,8 +78,9 @@ export const load = async ({ params, locals, cookies, setHeaders }) => {
|
||||
getWhyPriceMoved,
|
||||
getTopETFHolder,
|
||||
getOneDayPrice,
|
||||
getNextEarnings,
|
||||
getUserWatchlist,
|
||||
getCommunitySentiment,
|
||||
companyName: cleanString(getStockDeck?.[0]?.companyName),
|
||||
companyName: cleanString(getStockDeck?.at(0)?.companyName),
|
||||
};
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@ -609,22 +609,26 @@ $: {
|
||||
</td>
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
|
||||
{#if index+1-tableList?.length === 0}
|
||||
-
|
||||
{:else}
|
||||
{#if (item?.value- tableList[index+1]?.value) > 0}
|
||||
<span class="text-[#10DB06]">
|
||||
+{(((item?.value-tableList[index+1]?.value) / item?.value) * 100 )?.toFixed(2)}%
|
||||
</span>
|
||||
{:else if (item?.value - tableList[index+1]?.value ) < 0}
|
||||
<span class="text-[#FF2F1F]">
|
||||
-{(Math?.abs((tableList[index+1]?.value - item?.value) / item?.value) * 100 )?.toFixed(2)}%
|
||||
</span>
|
||||
{:else}
|
||||
-
|
||||
{/if}
|
||||
{/if}
|
||||
</td>
|
||||
{#if index + 1 - tableList?.length === 0}
|
||||
-
|
||||
{:else}
|
||||
{#if (item?.value === 0 && tableList[index+1]?.value < 0)}
|
||||
<span class="text-[#FF2F1F]">-100.00%</span>
|
||||
{:else if (item?.value === 0 && tableList[index+1]?.value > 0)}
|
||||
<span class="text-[#10DB06]">100.00%</span>
|
||||
{:else if ((item?.value - tableList[index+1]?.value) > 0)}
|
||||
<span class="text-[#10DB06]">
|
||||
{(((item?.value - tableList[index+1]?.value) / Math.abs(item?.value)) * 100)?.toFixed(2)}%
|
||||
</span>
|
||||
{:else if ((item?.value - tableList[index+1]?.value) < 0)}
|
||||
<span class="text-[#FF2F1F]">
|
||||
-{(Math?.abs((tableList[index+1]?.value - item?.value) / Math.abs(item?.value)) * 100)?.toFixed(2)}%
|
||||
</span>
|
||||
{:else}
|
||||
-
|
||||
{/if}
|
||||
{/if}
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
@ -565,22 +565,26 @@ $: {
|
||||
</td>
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
|
||||
{#if index+1-tableList?.length === 0}
|
||||
-
|
||||
{:else}
|
||||
{#if (item?.value- tableList[index+1]?.value) > 0}
|
||||
<span class="text-[#10DB06]">
|
||||
+{(((item?.value-tableList[index+1]?.value) / item?.value) * 100 )?.toFixed(2)}%
|
||||
</span>
|
||||
{:else if (item?.value - tableList[index+1]?.value ) < 0}
|
||||
<span class="text-[#FF2F1F]">
|
||||
-{(Math?.abs((tableList[index+1]?.value - item?.value) / item?.value) * 100 )?.toFixed(2)}%
|
||||
</span>
|
||||
{:else}
|
||||
-
|
||||
{/if}
|
||||
{/if}
|
||||
</td>
|
||||
{#if index + 1 - tableList?.length === 0}
|
||||
-
|
||||
{:else}
|
||||
{#if (item?.value === 0 && tableList[index+1]?.value < 0)}
|
||||
<span class="text-[#FF2F1F]">-100.00%</span>
|
||||
{:else if (item?.value === 0 && tableList[index+1]?.value > 0)}
|
||||
<span class="text-[#10DB06]">100.00%</span>
|
||||
{:else if ((item?.value - tableList[index+1]?.value) > 0)}
|
||||
<span class="text-[#10DB06]">
|
||||
{(((item?.value - tableList[index+1]?.value) / Math.abs(item?.value)) * 100)?.toFixed(2)}%
|
||||
</span>
|
||||
{:else if ((item?.value - tableList[index+1]?.value) < 0)}
|
||||
<span class="text-[#FF2F1F]">
|
||||
-{(Math?.abs((tableList[index+1]?.value - item?.value) / Math.abs(item?.value)) * 100)?.toFixed(2)}%
|
||||
</span>
|
||||
{:else}
|
||||
-
|
||||
{/if}
|
||||
{/if}
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
@ -519,41 +519,46 @@ $: {
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each tableList as item, index}
|
||||
<!-- row -->
|
||||
<tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
||||
<!-- row -->
|
||||
<tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
||||
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||
{item?.date}
|
||||
</td>
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]">
|
||||
{abbreviateNumber(item?.value)}
|
||||
</td>
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
|
||||
{item?.value-tableList[index+1]?.value !== 0 ? abbreviateNumber((item?.value-tableList[index+1]?.value)?.toFixed(2)) : '-'}
|
||||
</td>
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
|
||||
{#if index + 1 - tableList?.length === 0}
|
||||
-
|
||||
{:else}
|
||||
{#if (item?.value === 0 && tableList[index+1]?.value < 0)}
|
||||
<span class="text-[#FF2F1F]">-100.00%</span>
|
||||
{:else if (item?.value === 0 && tableList[index+1]?.value > 0)}
|
||||
<span class="text-[#10DB06]">100.00%</span>
|
||||
{:else if ((item?.value - tableList[index+1]?.value) > 0)}
|
||||
<span class="text-[#10DB06]">
|
||||
{(((item?.value - tableList[index+1]?.value) / Math.abs(item?.value)) * 100)?.toFixed(2)}%
|
||||
</span>
|
||||
{:else if ((item?.value - tableList[index+1]?.value) < 0)}
|
||||
<span class="text-[#FF2F1F]">
|
||||
-{(Math?.abs((tableList[index+1]?.value - item?.value) / Math.abs(item?.value)) * 100)?.toFixed(2)}%
|
||||
</span>
|
||||
{:else}
|
||||
-
|
||||
{/if}
|
||||
{/if}
|
||||
</td>
|
||||
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||
{item?.date}
|
||||
</td>
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]">
|
||||
{abbreviateNumber(item?.value)}
|
||||
</td>
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
|
||||
{item?.value-tableList[index+1]?.value !== 0 ? abbreviateNumber((item?.value-tableList[index+1]?.value)?.toFixed(2)) : '-'}
|
||||
</td>
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
|
||||
{#if index+1-tableList?.length === 0}
|
||||
-
|
||||
{:else}
|
||||
{#if (item?.value- tableList[index+1]?.value) > 0}
|
||||
<span class="text-[#10DB06]">
|
||||
+{(((item?.value-tableList[index+1]?.value) / item?.value) * 100 )?.toFixed(2)}%
|
||||
</span>
|
||||
{:else if (item?.value - tableList[index+1]?.value ) < 0}
|
||||
<span class="text-[#FF2F1F]">
|
||||
-{(Math?.abs((tableList[index+1]?.value - item?.value) / item?.value) * 100 )?.toFixed(2)}%
|
||||
</span>
|
||||
{:else}
|
||||
-
|
||||
{/if}
|
||||
{/if}
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -503,22 +503,26 @@ $: {
|
||||
</td>
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
|
||||
{#if index+1-tableList?.length === 0}
|
||||
-
|
||||
{:else}
|
||||
{#if (item?.value- tableList[index+1]?.value) > 0}
|
||||
<span class="text-[#10DB06]">
|
||||
+{(((item?.value-tableList[index+1]?.value) / item?.value) * 100 )?.toFixed(2)}%
|
||||
</span>
|
||||
{:else if (item?.value - tableList[index+1]?.value ) < 0}
|
||||
<span class="text-[#FF2F1F]">
|
||||
-{(Math?.abs((tableList[index+1]?.value - item?.value) / item?.value) * 100 )?.toFixed(2)}%
|
||||
</span>
|
||||
{:else}
|
||||
-
|
||||
{/if}
|
||||
{/if}
|
||||
</td>
|
||||
{#if index + 1 - tableList?.length === 0}
|
||||
-
|
||||
{:else}
|
||||
{#if (item?.value === 0 && tableList[index+1]?.value < 0)}
|
||||
<span class="text-[#FF2F1F]">-100.00%</span>
|
||||
{:else if (item?.value === 0 && tableList[index+1]?.value > 0)}
|
||||
<span class="text-[#10DB06]">100.00%</span>
|
||||
{:else if ((item?.value - tableList[index+1]?.value) > 0)}
|
||||
<span class="text-[#10DB06]">
|
||||
{(((item?.value - tableList[index+1]?.value) / Math.abs(item?.value)) * 100)?.toFixed(2)}%
|
||||
</span>
|
||||
{:else if ((item?.value - tableList[index+1]?.value) < 0)}
|
||||
<span class="text-[#FF2F1F]">
|
||||
-{(Math?.abs((tableList[index+1]?.value - item?.value) / Math.abs(item?.value)) * 100)?.toFixed(2)}%
|
||||
</span>
|
||||
{:else}
|
||||
-
|
||||
{/if}
|
||||
{/if}
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
@ -9,6 +9,8 @@ import Input from '$lib/components/Input.svelte';
|
||||
import WatchListCard from '$lib/components/WatchListCard.svelte';
|
||||
import {screenWidth, switchWatchList } from '$lib/store';
|
||||
import MiniPlot from '$lib/components/MiniPlot.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||
|
||||
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
||||
|
||||
@ -389,11 +391,26 @@ onDestroy( () => {
|
||||
|
||||
|
||||
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
|
||||
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li class="text-gray-300">Watchlist</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="w-full overflow-hidden m-auto mt-5">
|
||||
|
||||
|
||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
|
||||
<div class="relative flex justify-center items-start overflow-hidden w-full">
|
||||
|
||||
|
||||
<main class="w-full lg:w-3/4 lg:pr-5">
|
||||
|
||||
|
||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
|
||||
<!-- Start Column -->
|
||||
<div>
|
||||
@ -441,7 +458,7 @@ onDestroy( () => {
|
||||
</div>
|
||||
|
||||
<div class="w-full -mt-4 sm:mt-0 mb-8 m-auto flex justify-start sm:justify-center items-center p-3 sm:p-0">
|
||||
<div class="w-full grid grid-cols-2 md:grid-cols-4 gap-y-3 lg:gap-y-0 gap-x-3 ">
|
||||
<div class="w-full grid grid-cols-2 md:grid-cols-3 gap-y-3 gap-x-3 ">
|
||||
<MiniPlot title="S&P500" priceData = {priceDataSP500} changesPercentage={changeSP500} previousClose={previousCloseSP500}/>
|
||||
<MiniPlot title="Nasdaq" priceData = {priceDataNasdaq} changesPercentage={changeNasdaq} previousClose={previousCloseNasdaq}/>
|
||||
<MiniPlot title="Dow" priceData = {priceDataDowJones} changesPercentage={changeDowJones} previousClose={previousCloseDowJones}/>
|
||||
@ -534,7 +551,68 @@ onDestroy( () => {
|
||||
|
||||
{/if}
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
||||
|
||||
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
|
||||
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Pro Subscription
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Upgrade now for unlimited access to all data and tools.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Wallstreet Analyst
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Wall Street analyst ratings.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Congress Trading
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Congress trading insights.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
# Allow all web crawlers full access to all content
|
||||
User-agent: *
|
||||
Disallow: /
|
||||
Disallow:
|
||||
|
||||
# Sitemap for better indexing
|
||||
Sitemap: https://stocknear.com/sitemap.xml
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user