AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2024-08-07 13:43:04 +02:00
parent d9f0768657
commit 8049a504d2
10 changed files with 835 additions and 836 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/routes/crypto/[tickerID]/+layout.svelte
View File

@ -543,17 +543,17 @@ $: {
<!--End Mobile Navbar--> <!--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"> <div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
<!-- Main content --> <!-- 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"> <div class="md:pr-6 lg:pr-10">
<!-----Start-Header-CandleChart-Indicators------> <!-----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"> <div class="hidden sm:flex flex-row w-full justify-between items-center pb-10">
@ -702,7 +702,7 @@ $: {
</div> </div>
</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"> <div class="sm:pl-10">
<CryptoProfileCard <CryptoProfileCard

12
src/routes/crypto/[tickerID]/+page.svelte
View File

@ -681,7 +681,6 @@ afterUpdate(async () => {
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$cryptoTicker}) Stock Price, Quote & News · stocknear`}/> <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: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"/> <meta property="og:type" content="website"/>
<!-- Add more Open Graph meta tags as needed --> <!-- 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:card" content="summary_large_image"/>
<meta name="twitter:title" content={`${$displayCompanyName} (${$cryptoTicker}) Stock Price, Quote & News · stocknear`}/> <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: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 --> <!-- Add more Twitter meta tags as needed -->
</svelte:head> </svelte:head>
@ -697,12 +695,12 @@ afterUpdate(async () => {
<section class="bg-[#09090B] min-h-screen pb-40"> <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"> <div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
<!-- Main content --> <!-- 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"> <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'} {#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> <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} {:else}
@ -813,7 +811,7 @@ afterUpdate(async () => {
<!-- Start Graph --> <!-- Start Graph -->
{#if output !== null} {#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} {#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"> <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 No data available
@ -835,7 +833,7 @@ afterUpdate(async () => {
No data available No data available
</h2> </h2>
{:else if displayData === 'MAX' && threeYearPrice?.length === 0} {: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 No data available
</h2> </h2>
{:else} {:else}

21
src/routes/crypto/[tickerID]/congress-trading/+page.svelte
View File

@ -9,6 +9,7 @@
import { getPartyForPoliticians } from '$lib/utils'; import { getPartyForPoliticians } from '$lib/utils';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
export let data; export let data;
let rawData = data?.getSenateTrading; let rawData = data?.getSenateTrading;
@ -65,7 +66,7 @@ const district = {
function replaceMultipleStrings(inputString, replacements) { function replaceMultipleStrings(inputString, replacements) {
// Create a regular expression pattern by joining the keys of the replacements object with '|' // 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 // Replace occurrences of the pattern with the corresponding values in the replacements object
const resultString = inputString.replace(pattern, match => replacements[match]); const resultString = inputString.replace(pattern, match => replacements[match]);
@ -79,7 +80,7 @@ async function infiniteHandler({ detail: { loaded, complete } })
complete(); complete();
} else { } else {
const nextIndex = senateTradingList?.length; const nextIndex = senateTradingList?.length;
const newArticles = rawData?.slice(nextIndex, nextIndex + 5); const newArticles = rawData?.slice(nextIndex, nextIndex + 20);
senateTradingList = [...senateTradingList, ...newArticles]; senateTradingList = [...senateTradingList, ...newArticles];
loaded(); 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"]; 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) ?? []; senateTradingList = rawData?.slice(0,20) ?? [];
isLoaded = true; isLoaded = true;
}); });
</script> </script>
@ -164,7 +166,6 @@ isLoaded = true;
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$cryptoTicker}) US Congress & Senate Trading · stocknear`}/> <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: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"/> <meta property="og:type" content="website"/>
<!-- Add more Open Graph meta tags as needed --> <!-- 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:card" content="summary_large_image"/>
<meta name="twitter:title" content={`${$displayCompanyName} (${$cryptoTicker}) US Congress & Senate Trading · stocknear`}/> <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: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 --> <!-- Add more Twitter meta tags as needed -->
</svelte:head> </svelte:head>
@ -181,10 +181,10 @@ isLoaded = true;
<section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0"> <section class="w-full 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"> <div class="h-full overflow-hidden">
<div class="relative flex justify-center items-center 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"> <div class="mb-6">
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4"> <h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
Congress Trading Congress Trading
@ -210,7 +210,7 @@ isLoaded = true;
</h3> </h3>
<!--Start Widget--> <!--Start Widget-->
<div class="w-full mt-5 mb-10 m-auto flex justify-center items-center "> <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--> <!--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"> <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> </td>
</tr> </tr>
{/each} {/each}
</tbody> </tbody>
</table> </table>
</div> </div>
<InfiniteLoading on:infinite={infiniteHandler} /> <InfiniteLoading on:infinite={infiniteHandler} />

43
src/routes/crypto/[tickerID]/news/+page.svelte
View File

@ -1,19 +1,19 @@
<script lang='ts'> <script lang='ts'>
import {numberOfUnreadNotification, displayCompanyName, cryptoTicker} from '$lib/store'; import {numberOfUnreadNotification, displayCompanyName, cryptoTicker} from '$lib/store';
import { formatDate } from '$lib/utils'; import { formatDate } from '$lib/utils';
export let data; export let data;
let rawNews = data?.getStockNews; let rawNews = data?.getStockNews;
let newsList = rawNews?.slice(0,20) ?? []; let newsList = rawNews?.slice(0,20) ?? [];
let videoId = null; let videoId = null;
function checkIfYoutubeVideo(link) { function checkIfYoutubeVideo(link) {
const url = new URL(link); const url = new URL(link);
if (url?.hostname === "www.youtube.com") { if (url?.hostname === "www.youtube.com") {
@ -27,21 +27,21 @@ function checkIfYoutubeVideo(link) {
} else { } else {
return null; return null;
} }
} }
function loadMoreData() { function loadMoreData() {
const nextIndex = newsList?.length; const nextIndex = newsList?.length;
const newArticles = rawNews?.slice(nextIndex, nextIndex + 20); const newArticles = rawNews?.slice(nextIndex, nextIndex + 20);
newsList = [...newsList, ...newArticles]; newsList = [...newsList, ...newArticles];
} }
</script> </script>
<svelte:head> <svelte:head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
@ -53,7 +53,6 @@ function loadMoreData() {
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$cryptoTicker}) latest Stock Market News and Breaking Stories · stocknear`}/> <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: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"/> <meta property="og:type" content="website"/>
<!-- Add more Open Graph meta tags as needed --> <!-- 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:card" content="summary_large_image"/>
<meta name="twitter:title" content={`${$displayCompanyName} (${$cryptoTicker}) latest Stock Market News and Breaking Stories · stocknear`}/> <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: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 --> <!-- 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 "> <div class="m-auto h-full overflow-hidden ">
<main class=""> <main class="">
<div class="sm:p-7 m-auto mt-2 sm:mt-0"> <div class="sm:p-7 m-auto mt-2 sm:mt-0">
@ -79,20 +77,20 @@ function loadMoreData() {
</h1> </h1>
</div> </div>
{#if newsList.length !== 0} {#if newsList?.length !== 0}
<div class="grid grid-cols-1 gap-2 pb-5"> <div class="grid grid-cols-1 gap-2 pb-5">
{#each newsList as item} {#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)} {#if videoId = checkIfYoutubeVideo(item.url)}
<iframe <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}`} src={`https://www.youtube.com/embed/${videoId}`}
frameborder="0" frameborder="0"
allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture" allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen allowfullscreen
></iframe> ></iframe>
{:else} {: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 "> <div class="flex-shrink-0 m-auto ">
<img src={item?.image} class=" w-full rounded-lg" alt="news image" loading="lazy"> <img src={item?.image} class=" w-full rounded-lg" alt="news image" loading="lazy">
</div> </div>
@ -105,7 +103,6 @@ function loadMoreData() {
<a href={item?.url} rel="noopener noreferrer" target="_blank" class="text-lg font-bold text-white"> <a href={item?.url} rel="noopener noreferrer" target="_blank" class="text-lg font-bold text-white">
{item?.title} {item?.title}
<p class="text-white text-sm mt-2 font-normal"> <p class="text-white text-sm mt-2 font-normal">
{item?.text} {item?.text}
</p> </p>
@ -118,7 +115,7 @@ function loadMoreData() {
</div> </div>
{#if newsList?.length !== rawNews?.length} {#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 Load More News
</label> </label>
{/if} {/if}
@ -135,4 +132,4 @@ function loadMoreData() {
</div> </div>
</main> </main>
</div> </div>
</section> </section>

2
src/routes/etf/[tickerID]/+page.svelte
View File

@ -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'} {#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> <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} {:else}

14
src/routes/etf/[tickerID]/news/+page.svelte
View File

@ -1,5 +1,5 @@
<script lang='ts'> <script lang='ts'>
import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store'; import {numberOfUnreadNotification, displayCompanyName, etfTicker} from '$lib/store';
import { formatDate } from '$lib/utils'; import { formatDate } from '$lib/utils';
export let data; export let data;
@ -46,20 +46,20 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<title> <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> </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 --> <!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) latest Stock Market News and Breaking Stories · stocknear`}/> <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} (${$stockTicker}).`} /> <meta property="og:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`} />
<meta property="og:type" content="website"/> <meta property="og:type" content="website"/>
<!-- Add more Open Graph meta tags as needed --> <!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags --> <!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image"/> <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: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} (${$stockTicker}).`} /> <meta name="twitter:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`} />
<!-- Add more Twitter meta tags as needed --> <!-- Add more Twitter meta tags as needed -->
</svelte:head> </svelte:head>

8
src/routes/etf/[tickerID]/options/+page.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import {numberOfUnreadNotification, displayCompanyName, etfTicker} from '$lib/store'; import {numberOfUnreadNotification, displayCompanyName, screenWidth, etfTicker} from '$lib/store';
import { Chart } from 'svelte-echarts' import { Chart } from 'svelte-echarts'
import { abbreviateNumber } from '$lib/utils'; import { abbreviateNumber } from '$lib/utils';
import InfoModal from '$lib/components/InfoModal.svelte'; import InfoModal from '$lib/components/InfoModal.svelte';
@ -108,8 +108,8 @@ use([BarChart, GridComponent, CanvasRenderer])
}, },
silent: true, silent: true,
grid: { grid: {
left: '10%', left: $screenWidth < 640 ? '5%' : '2%',
right: '5%', right: $screenWidth < 640 ? '5%' : '2%',
bottom: '20%', bottom: '20%',
containLabel: true containLabel: true
}, },
@ -392,7 +392,7 @@ use([BarChart, GridComponent, CanvasRenderer])
</div> </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" /> <Chart {init} options={options} class="chart" />
</div> </div>

2
src/routes/stocks/[tickerID]/+page.svelte
View File

@ -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'} {#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> <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} {:else}

2
src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
View File

@ -210,7 +210,7 @@ isLoaded = true;
</h3> </h3>
<!--Start Widget--> <!--Start Widget-->
<div class="w-full mt-5 mb-10 m-auto flex justify-center items-center "> <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--> <!--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"> <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">

159
src/routes/stocks/[tickerID]/options/+page.svelte
View File

@ -1,59 +1,60 @@
<script lang="ts"> <script lang="ts">
import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store'; import {numberOfUnreadNotification, displayCompanyName, screenWidth, stockTicker} from '$lib/store';
import { Chart } from 'svelte-echarts' import { Chart } from 'svelte-echarts'
import { abbreviateNumber } from '$lib/utils'; import { abbreviateNumber } from '$lib/utils';
import InfoModal from '$lib/components/InfoModal.svelte'; import InfoModal from '$lib/components/InfoModal.svelte';
import { onMount } from 'svelte' import { onMount } from 'svelte'
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte'; import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
import { init, use } from 'echarts/core' import { init, use } from 'echarts/core'
import { BarChart } from 'echarts/charts' import { BarChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components' import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers' import { CanvasRenderer } from 'echarts/renderers'
use([BarChart, GridComponent, CanvasRenderer]) 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;
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 totalVolume = data?.getOptionsPlotData?.totalVolume;
const putCallOpenInterestRatio = data?.getOptionsPlotData?.putCallOpenInterestRatio;
const displayTotalVolume = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0})?.format(totalVolume); const totalOpenInterest = data?.getOptionsPlotData?.totalOpenInterest;
const displayTotalOpenInterest = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0})?.format(totalOpenInterest);
const dateList = data?.getOptionsPlotData?.dateList;
const callVolumeList = data?.getOptionsPlotData?.callVolumeList; // Computing the put-call ratio for open interest
const putVolumeList = data?.getOptionsPlotData?.putVolumeList; const putCallOpenInterestRatio = data?.getOptionsPlotData?.putCallOpenInterestRatio;
const callOpenInterestList = data?.getOptionsPlotData?.callOpenInterestList;
const putOpenInterestList = data?.getOptionsPlotData?.putOpenInterestList; 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) // Parse the input date string (YYYY-mm-dd)
var date = new Date(dateStr); var date = new Date(dateStr);
@ -72,9 +73,9 @@ function formatDate(dateStr) {
var formattedDate = month + "/" + day + "/" + year; var formattedDate = month + "/" + day + "/" + year;
return formattedDate; return formattedDate;
} }
function formatTime(timeString) { function formatTime(timeString) {
// Split the time string into components // Split the time string into components
const [hours, minutes, seconds] = timeString.split(':').map(Number); 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}`; const formattedTimeString = `${formattedHours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')} ${period}`;
return formattedTimeString; return formattedTimeString;
} }
function changeStatement(event) function changeStatement(event)
{ {
displayData = event.target.value; displayData = event.target.value;
} }
function plotData(callData, putData) { function plotData(callData, putData) {
const options = { const options = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
@ -107,8 +108,8 @@ function plotData(callData, putData) {
}, },
silent: true, silent: true,
grid: { grid: {
left: '10%', left: $screenWidth < 640 ? '5%' : '2%',
right: '5%', right: $screenWidth < 640 ? '5%' : '2%',
bottom: '20%', bottom: '20%',
containLabel: true containLabel: true
}, },
@ -167,9 +168,9 @@ function plotData(callData, putData) {
] ]
}; };
return options; return options;
} }
function calculateStats() { function calculateStats() {
const currentPrice = parseFloat(data?.getStockQuote?.price); const currentPrice = parseFloat(data?.getStockQuote?.price);
const { callVolumeSum, putVolumeSum, bullishCount, bearishCount, otmVolume, itmVolume } = rawData?.reduce((acc, item) => { const { callVolumeSum, putVolumeSum, bullishCount, bearishCount, otmVolume, itmVolume } = rawData?.reduce((acc, item) => {
@ -217,9 +218,9 @@ function calculateStats() {
// Calculate OTM/ITM ratio // Calculate OTM/ITM ratio
displayOTMRatio = otmVolume / (itmVolume+otmVolume) ?? 0; displayOTMRatio = otmVolume / (itmVolume+otmVolume) ?? 0;
} }
async function handleScroll() { async function handleScroll() {
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold; const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
if (isBottom && optionList?.length !== rawData?.length) { if (isBottom && optionList?.length !== rawData?.length) {
@ -231,7 +232,7 @@ async function handleScroll() {
onMount(async () => { onMount(async () => {
calculateStats(); calculateStats();
if(data?.user?.tier === 'Pro') { if(data?.user?.tier === 'Pro') {
@ -240,10 +241,10 @@ onMount(async () => {
window.removeEventListener('scroll', handleScroll); window.removeEventListener('scroll', handleScroll);
}; };
} }
}) })
$: { $: {
if(displayData && optionsPlotData?.length !== 0 && typeof window !== 'undefined') { if(displayData && optionsPlotData?.length !== 0 && typeof window !== 'undefined') {
if (displayData === 'volume') { if (displayData === 'volume') {
options = plotData(callVolumeList, putVolumeList) options = plotData(callVolumeList, putVolumeList)
@ -252,36 +253,36 @@ $: {
options = plotData(callOpenInterestList, putOpenInterestList) options = plotData(callOpenInterestList, putOpenInterestList)
} }
} }
} }
</script> </script>
<svelte:head> <svelte:head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<title> <title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$stockTicker}) Options Activity · stocknear {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$stockTicker}) Options Activity · stocknear
</title> </title>
<meta name="description" content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`} /> <meta name="description" content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`} />
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Options Activity · stocknear`}/> <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:description" content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`} />
<meta property="og:type" content="website"/> <meta property="og:type" content="website"/>
<!-- Add more Open Graph meta tags as needed --> <!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags --> <!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Options Activity · stocknear`}/> <meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Options Activity · stocknear`}/>
<meta name="twitter:description" content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`} /> <meta name="twitter:description" content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`} />
<!-- Add more Twitter meta tags as needed --> <!-- Add more Twitter meta tags as needed -->
</svelte:head> </svelte:head>
@ -310,7 +311,7 @@ $: {
{#if optionsPlotData?.length !== 0} {#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"> <div class="grid grid-cols-2">
@ -391,7 +392,7 @@ $: {
</div> </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" /> <Chart {init} options={options} class="chart" />
</div> </div>