ui fix
This commit is contained in:
MuslemRahimi
parent
d9f0768657
commit
8049a504d2
@ -543,17 +543,17 @@ $: {
|
||||
<!--End Mobile Navbar-->
|
||||
|
||||
|
||||
<div class="w-full xl:w-fit max-w-3xl sm:max-w-6xl m-auto px-3">
|
||||
<div class="w-full xl:w-fit max-w-3xl sm:max-w-7xl m-auto px-3">
|
||||
|
||||
<div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
|
||||
<!-- Main content -->
|
||||
<div class="pb-12 md:pb-20 w-full max-w-5xl lg:max-w-3xl">
|
||||
<div class="pb-12 md:pb-20 w-full max-w-3xl lg:max-w-5xl">
|
||||
<div class="md:pr-6 lg:pr-10">
|
||||
|
||||
|
||||
<!-----Start-Header-CandleChart-Indicators------>
|
||||
|
||||
<div class="m-auto pl-0 sm:pl-4 max-w-3xl overflow-hidden mb-5 md:mt-10">
|
||||
<div class="m-auto pl-0 sm:pl-4 overflow-hidden mb-5 md:mt-10">
|
||||
|
||||
<div class="hidden sm:flex flex-row w-full justify-between items-center pb-10">
|
||||
|
||||
@ -702,7 +702,7 @@ $: {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="hidden lg:block w-fit max-w-xl 2xl:w-[120px] m-auto sm:m-0 md:shrink-0 md:pt-10 pb-12 md:pb-20">
|
||||
<aside class="hidden xl:block w-fit max-w-xl 2xl:w-[120px] m-auto sm:m-0 md:shrink-0 md:pt-10 pb-12 md:pb-20">
|
||||
<div class="sm:pl-10">
|
||||
|
||||
<CryptoProfileCard
|
||||
|
||||
@ -681,7 +681,6 @@ afterUpdate(async () => {
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content={`${$displayCompanyName} (${$cryptoTicker}) Stock Price, Quote & News · stocknear`}/>
|
||||
<meta property="og:description" content={`Get a real-time ${$displayCompanyName} (${$cryptoTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
|
||||
<!--<meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>-->
|
||||
<meta property="og:type" content="website"/>
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
|
||||
@ -689,7 +688,6 @@ afterUpdate(async () => {
|
||||
<meta name="twitter:card" content="summary_large_image"/>
|
||||
<meta name="twitter:title" content={`${$displayCompanyName} (${$cryptoTicker}) Stock Price, Quote & News · stocknear`}/>
|
||||
<meta name="twitter:description" content={`Get a real-time ${$displayCompanyName} (${$cryptoTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
|
||||
<!--<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>-->
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
|
||||
</svelte:head>
|
||||
@ -697,12 +695,12 @@ afterUpdate(async () => {
|
||||
|
||||
<section class="bg-[#09090B] min-h-screen pb-40">
|
||||
|
||||
<div class="w-full max-w-4xl m-auto ">
|
||||
<div class="w-full max-w-5xl m-auto ">
|
||||
|
||||
|
||||
<div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
|
||||
<!-- Main content -->
|
||||
<div class="pb-12 md:pb-20 w-full max-w-3xl sm:pr-6 xl:pr-0">
|
||||
<div class="pb-12 md:pb-20 w-full sm:pr-6 xl:pr-0">
|
||||
<div class="xl:pr-10">
|
||||
|
||||
|
||||
@ -798,7 +796,7 @@ afterUpdate(async () => {
|
||||
|
||||
|
||||
|
||||
<label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-[#09090B] sm:hover:bg-[#09090B] duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
|
||||
<label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-[#27272A] sm:hover:bg-[#303030] duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
|
||||
{#if displayChartType === 'line'}
|
||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z"/></svg>
|
||||
{:else}
|
||||
@ -813,7 +811,7 @@ afterUpdate(async () => {
|
||||
<!-- Start Graph -->
|
||||
|
||||
{#if output !== null}
|
||||
<div class ="w-full sm:pl-7 ml-auto max-w-3xl mb-10">
|
||||
<div class ="w-full sm:pl-7 ml-auto max-w-5xl mb-10">
|
||||
{#if displayData === '1D' && oneDayPrice?.length === 0}
|
||||
<h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
|
||||
No data available
|
||||
@ -835,7 +833,7 @@ afterUpdate(async () => {
|
||||
No data available
|
||||
</h2>
|
||||
{:else if displayData === 'MAX' && threeYearPrice?.length === 0}
|
||||
<h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
|
||||
<h2 class="mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
|
||||
No data available
|
||||
</h2>
|
||||
{:else}
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
import { getPartyForPoliticians } from '$lib/utils';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
|
||||
export let data;
|
||||
|
||||
let rawData = data?.getSenateTrading;
|
||||
@ -65,7 +66,7 @@ const district = {
|
||||
|
||||
function replaceMultipleStrings(inputString, replacements) {
|
||||
// Create a regular expression pattern by joining the keys of the replacements object with '|'
|
||||
const pattern = new RegExp(Object.keys(replacements).join('|'), 'gi');
|
||||
const pattern = new RegExp(Object?.keys(replacements)?.join('|'), 'gi');
|
||||
|
||||
// Replace occurrences of the pattern with the corresponding values in the replacements object
|
||||
const resultString = inputString.replace(pattern, match => replacements[match]);
|
||||
@ -79,7 +80,7 @@ async function infiniteHandler({ detail: { loaded, complete } })
|
||||
complete();
|
||||
} else {
|
||||
const nextIndex = senateTradingList?.length;
|
||||
const newArticles = rawData?.slice(nextIndex, nextIndex + 5);
|
||||
const newArticles = rawData?.slice(nextIndex, nextIndex + 20);
|
||||
senateTradingList = [...senateTradingList, ...newArticles];
|
||||
loaded();
|
||||
}
|
||||
@ -141,12 +142,13 @@ const typeCounts = rawData?.reduce((counts, item) => {
|
||||
}, {});
|
||||
|
||||
partyRatio = partyCounts['Democratic'] > 0 && partyCounts['Republican'] === undefined ? 1 : partyCounts['Democratic'] === undefined ? 0 : partyCounts["Democratic"]/partyCounts["Republican"];
|
||||
buySellRatio = typeCounts['Bought']/typeCounts['Sold'];
|
||||
buySellRatio = typeCounts['Bought'] > 0 && typeCounts['Sold'] === undefined ? 1 : typeCounts['Bought'] === undefined ? 0 : typeCounts["Bought"]/typeCounts["Sold"];
|
||||
|
||||
senateTradingList = rawData?.slice(0,20) ?? [];
|
||||
|
||||
|
||||
isLoaded = true;
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -164,7 +166,6 @@ isLoaded = true;
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content={`${$displayCompanyName} (${$cryptoTicker}) US Congress & Senate Trading · stocknear`}/>
|
||||
<meta property="og:description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$cryptoTicker}) from democrates and republicans.`} />
|
||||
<meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
|
||||
<meta property="og:type" content="website"/>
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
|
||||
@ -172,7 +173,6 @@ isLoaded = true;
|
||||
<meta name="twitter:card" content="summary_large_image"/>
|
||||
<meta name="twitter:title" content={`${$displayCompanyName} (${$cryptoTicker}) US Congress & Senate Trading · stocknear`}/>
|
||||
<meta name="twitter:description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$cryptoTicker}) from democrates and republicans.`} />
|
||||
<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
|
||||
</svelte:head>
|
||||
@ -181,10 +181,10 @@ isLoaded = true;
|
||||
|
||||
|
||||
|
||||
<section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0">
|
||||
<div class="flex justify-center w-fit m-auto h-full overflow-hidden">
|
||||
<section class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0">
|
||||
<div class="h-full overflow-hidden">
|
||||
<div class="relative flex justify-center items-center overflow-hidden">
|
||||
<div class="sm:p-7 sm:w-full sm:max-w-3xl m-auto mt-5 sm:mt-0">
|
||||
<div class="sm:p-7 w-full mt-2 sm:mt-0">
|
||||
<div class="mb-6">
|
||||
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
|
||||
Congress Trading
|
||||
@ -210,7 +210,7 @@ isLoaded = true;
|
||||
</h3>
|
||||
<!--Start Widget-->
|
||||
<div class="w-full mt-5 mb-10 m-auto flex justify-center items-center ">
|
||||
<div class="w-full grid grid-cols-2 gap-y-3 lg:gap-y-3 gap-x-3 ">
|
||||
<div class="w-full grid grid-cols-2 sm:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
|
||||
|
||||
<!--Start Buy/Sell-->
|
||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">
|
||||
@ -330,8 +330,11 @@ isLoaded = true;
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
<script lang='ts'>
|
||||
import {numberOfUnreadNotification, displayCompanyName, cryptoTicker} from '$lib/store';
|
||||
import { formatDate } from '$lib/utils';
|
||||
import {numberOfUnreadNotification, displayCompanyName, cryptoTicker} from '$lib/store';
|
||||
import { formatDate } from '$lib/utils';
|
||||
|
||||
export let data;
|
||||
export let data;
|
||||
|
||||
|
||||
|
||||
|
||||
let rawNews = data?.getStockNews;
|
||||
let newsList = rawNews?.slice(0,20) ?? [];
|
||||
let rawNews = data?.getStockNews;
|
||||
let newsList = rawNews?.slice(0,20) ?? [];
|
||||
|
||||
|
||||
let videoId = null;
|
||||
let videoId = null;
|
||||
|
||||
function checkIfYoutubeVideo(link) {
|
||||
function checkIfYoutubeVideo(link) {
|
||||
|
||||
const url = new URL(link);
|
||||
if (url?.hostname === "www.youtube.com") {
|
||||
@ -27,21 +27,21 @@ function checkIfYoutubeVideo(link) {
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function loadMoreData() {
|
||||
function loadMoreData() {
|
||||
const nextIndex = newsList?.length;
|
||||
const newArticles = rawNews?.slice(nextIndex, nextIndex + 20);
|
||||
newsList = [...newsList, ...newArticles];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
||||
|
||||
<svelte:head>
|
||||
<svelte:head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
@ -53,7 +53,6 @@ function loadMoreData() {
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content={`${$displayCompanyName} (${$cryptoTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
|
||||
<meta property="og:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`} />
|
||||
<meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
|
||||
<meta property="og:type" content="website"/>
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
|
||||
@ -61,15 +60,14 @@ function loadMoreData() {
|
||||
<meta name="twitter:card" content="summary_large_image"/>
|
||||
<meta name="twitter:title" content={`${$displayCompanyName} (${$cryptoTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
|
||||
<meta name="twitter:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`} />
|
||||
<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
|
||||
</svelte:head>
|
||||
</svelte:head>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="w-auto max-w-3xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
|
||||
<section class="w-auto max-w-4xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
|
||||
<div class="m-auto h-full overflow-hidden ">
|
||||
<main class="">
|
||||
<div class="sm:p-7 m-auto mt-2 sm:mt-0">
|
||||
@ -79,20 +77,20 @@ function loadMoreData() {
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{#if newsList.length !== 0}
|
||||
{#if newsList?.length !== 0}
|
||||
<div class="grid grid-cols-1 gap-2 pb-5">
|
||||
{#each newsList as item}
|
||||
<div class="flex flex-col bg-[#09090B] rounded-lg m-auto">
|
||||
<div class="w-full flex flex-col bg-[#09090B] rounded-lg m-auto">
|
||||
{#if videoId = checkIfYoutubeVideo(item.url)}
|
||||
<iframe
|
||||
class="w-full h-96 rounded-lg"
|
||||
class="w-full h-96 rounded-lg border border-gray-800"
|
||||
src={`https://www.youtube.com/embed/${videoId}`}
|
||||
frameborder="0"
|
||||
allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
{:else}
|
||||
<a href={item?.url} rel="noopener noreferrer" target="_blank">
|
||||
<a href={item?.url} rel="noopener noreferrer" target="_blank" class="border border-gray-800 rounded-lg">
|
||||
<div class="flex-shrink-0 m-auto ">
|
||||
<img src={item?.image} class=" w-full rounded-lg" alt="news image" loading="lazy">
|
||||
</div>
|
||||
@ -105,7 +103,6 @@ function loadMoreData() {
|
||||
|
||||
<a href={item?.url} rel="noopener noreferrer" target="_blank" class="text-lg font-bold text-white">
|
||||
{item?.title}
|
||||
|
||||
<p class="text-white text-sm mt-2 font-normal">
|
||||
{item?.text}
|
||||
</p>
|
||||
@ -118,7 +115,7 @@ function loadMoreData() {
|
||||
|
||||
</div>
|
||||
{#if newsList?.length !== rawNews?.length}
|
||||
<label on:click={loadMoreData} class="shadow-lg rounded-lg cursor-pointer w-11/12 sm:w-full flex justify-center items-center py-3 h-full text-sm sm:text-lg text-center font-medium text-white m-auto hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6]">
|
||||
<label on:click={loadMoreData} class="shadow-lg rounded-lg cursor-pointer w-5/6 sm:w-3/5 sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6]">
|
||||
Load More News
|
||||
</label>
|
||||
{/if}
|
||||
@ -135,4 +132,4 @@ function loadMoreData() {
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
@ -873,7 +873,7 @@ async function initializePrice() {
|
||||
|
||||
|
||||
|
||||
<label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-[#18181B] sm:hover:bg-[#09090B] duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
|
||||
<label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-[#27272A] sm:hover:bg-[#303030] duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
|
||||
{#if displayChartType === 'line'}
|
||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z"/></svg>
|
||||
{:else}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script lang='ts'>
|
||||
import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
|
||||
import {numberOfUnreadNotification, displayCompanyName, etfTicker} from '$lib/store';
|
||||
import { formatDate } from '$lib/utils';
|
||||
|
||||
export let data;
|
||||
@ -46,20 +46,20 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$stockTicker}) latest Stock Market News and Breaking Stories · stocknear
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$etfTicker}) latest Stock Market News and Breaking Stories · stocknear
|
||||
</title>
|
||||
<meta name="description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$stockTicker}).`} />
|
||||
<meta name="description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`} />
|
||||
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
|
||||
<meta property="og:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$stockTicker}).`} />
|
||||
<meta property="og:title" content={`${$displayCompanyName} (${$etfTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
|
||||
<meta property="og:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`} />
|
||||
<meta property="og:type" content="website"/>
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
|
||||
<!-- Twitter specific meta tags -->
|
||||
<meta name="twitter:card" content="summary_large_image"/>
|
||||
<meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
|
||||
<meta name="twitter:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$stockTicker}).`} />
|
||||
<meta name="twitter:title" content={`${$displayCompanyName} (${$etfTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
|
||||
<meta name="twitter:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`} />
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
|
||||
</svelte:head>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
|
||||
import {numberOfUnreadNotification, displayCompanyName, etfTicker} from '$lib/store';
|
||||
import {numberOfUnreadNotification, displayCompanyName, screenWidth, etfTicker} from '$lib/store';
|
||||
import { Chart } from 'svelte-echarts'
|
||||
import { abbreviateNumber } from '$lib/utils';
|
||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||
@ -108,8 +108,8 @@ use([BarChart, GridComponent, CanvasRenderer])
|
||||
},
|
||||
silent: true,
|
||||
grid: {
|
||||
left: '10%',
|
||||
right: '5%',
|
||||
left: $screenWidth < 640 ? '5%' : '2%',
|
||||
right: $screenWidth < 640 ? '5%' : '2%',
|
||||
bottom: '20%',
|
||||
containLabel: true
|
||||
},
|
||||
@ -392,7 +392,7 @@ use([BarChart, GridComponent, CanvasRenderer])
|
||||
</div>
|
||||
|
||||
|
||||
<div class="app w-full bg-[#09090B] bg-opacity-1 rounded-xl">
|
||||
<div class="app w-full bg-[#09090B] rounded-xl">
|
||||
<Chart {init} options={options} class="chart" />
|
||||
</div>
|
||||
|
||||
|
||||
@ -832,7 +832,7 @@ function changeChartType() {
|
||||
|
||||
|
||||
|
||||
<label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-purple-600 sm:hover:bg-purple-700 duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
|
||||
<label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-[#27272A] sm:hover:bg-[#303030] duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
|
||||
{#if displayChartType === 'line'}
|
||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z"/></svg>
|
||||
{:else}
|
||||
|
||||
@ -210,7 +210,7 @@ isLoaded = true;
|
||||
</h3>
|
||||
<!--Start Widget-->
|
||||
<div class="w-full mt-5 mb-10 m-auto flex justify-center items-center ">
|
||||
<div class="w-full grid grid-cols-2 gap-y-3 lg:gap-y-3 gap-x-3 ">
|
||||
<div class="w-full grid grid-cols-2 sm:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
|
||||
|
||||
<!--Start Buy/Sell-->
|
||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">
|
||||
|
||||
@ -1,59 +1,60 @@
|
||||
<script lang="ts">
|
||||
|
||||
import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
|
||||
import { Chart } from 'svelte-echarts'
|
||||
import { abbreviateNumber } from '$lib/utils';
|
||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||
import { onMount } from 'svelte'
|
||||
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
|
||||
import { init, use } from 'echarts/core'
|
||||
import { BarChart } from 'echarts/charts'
|
||||
import { GridComponent } from 'echarts/components'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
use([BarChart, GridComponent, CanvasRenderer])
|
||||
|
||||
export let data;
|
||||
|
||||
const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
|
||||
let optionsPlotData = data?.getOptionsPlotData?.plot;
|
||||
let displayData = 'volume';
|
||||
let options;
|
||||
let rawData = data?.getOptionsFlowData
|
||||
let optionList = rawData?.slice(0,30);
|
||||
let flowSentiment = 'n/a';
|
||||
let callPercentage;
|
||||
let putPercentage;
|
||||
let displayCallVolume;
|
||||
let displayPutVolume;
|
||||
let latestPutCallRatio;
|
||||
let displayOTMRatio;
|
||||
|
||||
const totalPutCallRatio = data?.getOptionsPlotData?.putCallRatio;
|
||||
import {numberOfUnreadNotification, displayCompanyName, screenWidth, stockTicker} from '$lib/store';
|
||||
import { Chart } from 'svelte-echarts'
|
||||
import { abbreviateNumber } from '$lib/utils';
|
||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||
import { onMount } from 'svelte'
|
||||
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
|
||||
import { init, use } from 'echarts/core'
|
||||
import { BarChart } from 'echarts/charts'
|
||||
import { GridComponent } from 'echarts/components'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
use([BarChart, GridComponent, CanvasRenderer])
|
||||
|
||||
|
||||
const totalVolume = data?.getOptionsPlotData?.totalVolume;
|
||||
export let data;
|
||||
|
||||
const totalOpenInterest = data?.getOptionsPlotData?.totalOpenInterest;
|
||||
const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
|
||||
let optionsPlotData = data?.getOptionsPlotData?.plot;
|
||||
let displayData = 'volume';
|
||||
let options;
|
||||
let rawData = data?.getOptionsFlowData
|
||||
let optionList = rawData?.slice(0,30);
|
||||
let flowSentiment = 'n/a';
|
||||
let callPercentage;
|
||||
let putPercentage;
|
||||
let displayCallVolume;
|
||||
let displayPutVolume;
|
||||
let latestPutCallRatio;
|
||||
let displayOTMRatio;
|
||||
|
||||
const totalPutCallRatio = data?.getOptionsPlotData?.putCallRatio;
|
||||
|
||||
|
||||
// Computing the put-call ratio for open interest
|
||||
const putCallOpenInterestRatio = data?.getOptionsPlotData?.putCallOpenInterestRatio;
|
||||
const totalVolume = data?.getOptionsPlotData?.totalVolume;
|
||||
|
||||
const displayTotalVolume = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0})?.format(totalVolume);
|
||||
const displayTotalOpenInterest = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0})?.format(totalOpenInterest);
|
||||
const totalOpenInterest = data?.getOptionsPlotData?.totalOpenInterest;
|
||||
|
||||
const dateList = data?.getOptionsPlotData?.dateList;
|
||||
|
||||
const callVolumeList = data?.getOptionsPlotData?.callVolumeList;
|
||||
const putVolumeList = data?.getOptionsPlotData?.putVolumeList;
|
||||
const callOpenInterestList = data?.getOptionsPlotData?.callOpenInterestList;
|
||||
const putOpenInterestList = data?.getOptionsPlotData?.putOpenInterestList;
|
||||
// Computing the put-call ratio for open interest
|
||||
const putCallOpenInterestRatio = data?.getOptionsPlotData?.putCallOpenInterestRatio;
|
||||
|
||||
const displayTotalVolume = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0})?.format(totalVolume);
|
||||
const displayTotalOpenInterest = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0})?.format(totalOpenInterest);
|
||||
|
||||
const dateList = data?.getOptionsPlotData?.dateList;
|
||||
|
||||
const callVolumeList = data?.getOptionsPlotData?.callVolumeList;
|
||||
const putVolumeList = data?.getOptionsPlotData?.putVolumeList;
|
||||
const callOpenInterestList = data?.getOptionsPlotData?.callOpenInterestList;
|
||||
const putOpenInterestList = data?.getOptionsPlotData?.putOpenInterestList;
|
||||
|
||||
|
||||
|
||||
|
||||
function formatDate(dateStr) {
|
||||
function formatDate(dateStr) {
|
||||
// Parse the input date string (YYYY-mm-dd)
|
||||
var date = new Date(dateStr);
|
||||
|
||||
@ -72,9 +73,9 @@ function formatDate(dateStr) {
|
||||
var formattedDate = month + "/" + day + "/" + year;
|
||||
|
||||
return formattedDate;
|
||||
}
|
||||
}
|
||||
|
||||
function formatTime(timeString) {
|
||||
function formatTime(timeString) {
|
||||
// Split the time string into components
|
||||
const [hours, minutes, seconds] = timeString.split(':').map(Number);
|
||||
|
||||
@ -88,16 +89,16 @@ function formatTime(timeString) {
|
||||
const formattedTimeString = `${formattedHours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')} ${period}`;
|
||||
|
||||
return formattedTimeString;
|
||||
}
|
||||
}
|
||||
|
||||
function changeStatement(event)
|
||||
{
|
||||
function changeStatement(event)
|
||||
{
|
||||
displayData = event.target.value;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function plotData(callData, putData) {
|
||||
function plotData(callData, putData) {
|
||||
const options = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
@ -107,8 +108,8 @@ function plotData(callData, putData) {
|
||||
},
|
||||
silent: true,
|
||||
grid: {
|
||||
left: '10%',
|
||||
right: '5%',
|
||||
left: $screenWidth < 640 ? '5%' : '2%',
|
||||
right: $screenWidth < 640 ? '5%' : '2%',
|
||||
bottom: '20%',
|
||||
containLabel: true
|
||||
},
|
||||
@ -167,9 +168,9 @@ function plotData(callData, putData) {
|
||||
]
|
||||
};
|
||||
return options;
|
||||
}
|
||||
}
|
||||
|
||||
function calculateStats() {
|
||||
function calculateStats() {
|
||||
const currentPrice = parseFloat(data?.getStockQuote?.price);
|
||||
|
||||
const { callVolumeSum, putVolumeSum, bullishCount, bearishCount, otmVolume, itmVolume } = rawData?.reduce((acc, item) => {
|
||||
@ -217,9 +218,9 @@ function calculateStats() {
|
||||
|
||||
// Calculate OTM/ITM ratio
|
||||
displayOTMRatio = otmVolume / (itmVolume+otmVolume) ?? 0;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleScroll() {
|
||||
async function handleScroll() {
|
||||
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
||||
if (isBottom && optionList?.length !== rawData?.length) {
|
||||
@ -231,7 +232,7 @@ async function handleScroll() {
|
||||
|
||||
|
||||
|
||||
onMount(async () => {
|
||||
onMount(async () => {
|
||||
calculateStats();
|
||||
|
||||
if(data?.user?.tier === 'Pro') {
|
||||
@ -240,10 +241,10 @@ onMount(async () => {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
$: {
|
||||
$: {
|
||||
if(displayData && optionsPlotData?.length !== 0 && typeof window !== 'undefined') {
|
||||
if (displayData === 'volume') {
|
||||
options = plotData(callVolumeList, putVolumeList)
|
||||
@ -252,36 +253,36 @@ $: {
|
||||
options = plotData(callOpenInterestList, putOpenInterestList)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<svelte:head>
|
||||
<svelte:head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$stockTicker}) Options Activity · stocknear
|
||||
</title>
|
||||
<meta name="description" content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`} />
|
||||
</title>
|
||||
<meta name="description" content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`} />
|
||||
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Options Activity · stocknear`}/>
|
||||
<meta property="og:description" content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`} />
|
||||
<meta property="og:type" content="website"/>
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Options Activity · stocknear`}/>
|
||||
<meta property="og:description" content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`} />
|
||||
<meta property="og:type" content="website"/>
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
|
||||
<!-- Twitter specific meta tags -->
|
||||
<meta name="twitter:card" content="summary_large_image"/>
|
||||
<meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Options Activity · stocknear`}/>
|
||||
<meta name="twitter:description" content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`} />
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
<!-- Twitter specific meta tags -->
|
||||
<meta name="twitter:card" content="summary_large_image"/>
|
||||
<meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Options Activity · stocknear`}/>
|
||||
<meta name="twitter:description" content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`} />
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
|
||||
</svelte:head>
|
||||
</svelte:head>
|
||||
|
||||
|
||||
|
||||
@ -310,7 +311,7 @@ $: {
|
||||
|
||||
{#if optionsPlotData?.length !== 0}
|
||||
|
||||
<div class="stats stats-horizontal bg-[#272727] w-full rounded-lg">
|
||||
<div class="stats stats-horizontal bg-[#27272A] w-full rounded-lg">
|
||||
|
||||
<div class="grid grid-cols-2">
|
||||
|
||||
@ -391,7 +392,7 @@ $: {
|
||||
</div>
|
||||
|
||||
|
||||
<div class="app w-full bg-[#09090B] bg-opacity-1 rounded-xl">
|
||||
<div class="app w-full bg-[#09090B] rounded-xl">
|
||||
<Chart {init} options={options} class="chart" />
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user