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

make stock page bigger

Browse Source
This commit is contained in:
MuslemRahimi 2024-08-07 12:51:34 +02:00
parent 35aca697f9
commit 1542a0dba7
13 changed files with 56 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/Circle/Circle.html.svelte
View File

@ -6,6 +6,7 @@
import { stratify, pack, hierarchy } from 'd3-hierarchy'
import { getContext } from 'svelte';
import { format } from 'd3-format';
import { screenWidth } from '$lib/store';
const { width, height, data } = getContext('LayerCake');
@ -78,6 +79,7 @@
$: descendants = packed.descendants();
$: ballSize = $screenWidth < 1024 ? 2 : 3;
const titleCase = d => d.replace(/^\w/, w => w.toUpperCase());
const commas = format(',');
@ -92,7 +94,7 @@
>
<div
class="circle"
style="left:{d.x}px;top:{d.y}px;width:{d.r * 2}px;height:{d.r * 2}px;background-color:{(index === 1 && d.data.id === 'puts') ? '#FF2F1F' : (index === 1 && d.data.id === 'calls') ? '#0FB307' : '#1E1E1E'}; border: 0px solid #000;"
style="left:{d.x}px;top:{d.y}px;width:{d.r * ballSize}px;height:{d.r * ballSize}px;background-color:{(index === 1 && d.data.id === 'puts') ? '#FF2F1F' : (index === 1 && d.data.id === 'calls') ? '#0FB307' : '#1E1E1E'}; border: 0px solid #000;"
/>
<div
class="text-group"

18
src/lib/components/OptionsData.svelte
View File

@ -127,11 +127,8 @@ $: {
</script>
<section class="bg-[#09090B] overflow-hidden text-white h-full w-full sm:mb-10">
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
<div class="relative flex justify-center items-center overflow-hidden w-full">
<main class="w-full">
<div class="w-full sm:max-w-2xl m-auto mt-5 sm:mt-0">
<section class="overflow-hidden text-white h-full pb-8">
<main class="overflow-hidden ">
<div class="flex flex-row items-center">
@ -190,7 +187,7 @@ $: {
<div>
<div class="sm:mt-5">
The Options activity signals a
{#if signal === 'Bullish' }
<span class="text-[#10DB06]">
@ -250,12 +247,11 @@ $: {
</div>
{/if}
</div>
</main>
</div>
</div>
</main>
</section>

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

@ -487,17 +487,17 @@ $: isScrolled = y > 0;
<!--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 max-w-5xl overflow-hidden mb-5 md:mt-10">
<div class="hidden sm:flex flex-row w-full justify-between items-center pb-10">
<Markethour />
@ -668,7 +668,7 @@ $: isScrolled = y > 0;
</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">
<!--Start Company Info -->

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

@ -702,12 +702,12 @@ function changeChartType() {
<section class="bg-[#09090B] min-h-screen pb-40 overflow-hidden">
<div class="w-full max-w-4xl m-auto overflow-hidden">
<div class="w-full max-w-5xl m-auto overflow-hidden">
<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 max-w-5xl sm:pr-6 xl:pr-0">
<div class="xl:pr-10">
@ -847,7 +847,7 @@ function changeChartType() {
<!-- 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

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

@ -150,7 +150,6 @@ onMount(async() => {
<!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Dividend History, Dates & Yield · stocknear`}/>
<meta property="og:description" content={`Get the latest dividend data for ${$displayCompanyName} (${$stockTicker}), including dividend history, yield, key dates, growth and other metrics.`} />
<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 -->
@ -158,7 +157,6 @@ onMount(async() => {
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Dividend History, Dates & Yield · stocknear`}/>
<meta name="twitter:description" content={`Get the latest dividend data for ${$displayCompanyName} (${$stockTicker}) 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>

14
src/routes/stocks/[tickerID]/insider/+layout.svelte
View File

@ -40,15 +40,11 @@
</script>
<section class="w-auto max-w-3xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
<div class="m-auto h-full overflow-hidden">
<main class="w-fit sm:w-full sm:max-w-2xl ">
<div class="m-auto">
<section class="w-full max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
<div class="h-full overflow-hidden">
<main class="w-full">
<div class="sm:ml-8 w-screen sm:w-full {$screenWidth < 640 ? 'overflow-auto scrollbar no-scrollbar' : ''} mb-2" >
<ul class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll space-x-6 rtl:space-x-reverse py-2">
<li class="cursor-pointer flex flex-col items-center">
@ -73,8 +69,6 @@
</div>
</div>
</main>

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

@ -287,7 +287,6 @@ onMount(async() => {
<!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) US Congress & Senate Trading · stocknear`}/>
<meta property="og:description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) 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 -->
@ -295,24 +294,21 @@ onMount(async() => {
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) US Congress & Senate Trading · stocknear`}/>
<meta name="twitter:description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) 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>
<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">
<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="mb-6">
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
Insider Trading
</h1>
<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 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">
Insider Trading
</h1>
<div class="text-white p-3 sm:p-5 mb-5 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">

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

@ -166,7 +166,6 @@ isLoaded = true;
<!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) US Congress & Senate Trading · stocknear`}/>
<meta property="og:description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) 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 -->
@ -174,7 +173,6 @@ isLoaded = true;
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) US Congress & Senate Trading · stocknear`}/>
<meta name="twitter:description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) 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>
@ -183,14 +181,14 @@ 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">
<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="mb-6">
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
Congress Trading
</h1>
<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 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
</h1>
<div class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">

19
src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
View File

@ -113,7 +113,6 @@
<!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) · Q${quarter} ${year} · Earnings Call Transcript · stocknear`}/>
<meta property="og:description" content={`Get the latest Earnings Call Transcript of ${$displayCompanyName} (${$stockTicker}) for different years and quarters.`} />
<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 -->
@ -121,7 +120,6 @@
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) · Q${quarter} ${year} · Earnings Call Transcript · stocknear`}/>
<meta name="twitter:description" content={`Get the latest Earnings Call Transcript of ${$displayCompanyName} (${$stockTicker}) for different years and quarters.`} />
<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
@ -130,15 +128,16 @@
<section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0">
<div class="flex justify-center m-auto h-full overflow-hidden">
<div class="relative flex justify-center items-center overflow-hidden w-full">
<div class="sm:p-7 sm:w-full sm:max-w-3xl m-auto mt-5 sm:mt-0">
<div class="mb-6 w-full">
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
<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 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">
Transcripts
</h1>
</h1>
<div class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
<svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
Discover the earnings call highlights and investor Q&A with {$displayCompanyName}!

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

@ -53,7 +53,6 @@ function loadMoreData() {
<!-- 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: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,7 +60,6 @@ function loadMoreData() {
<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:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
@ -69,7 +67,7 @@ function loadMoreData() {
<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">
@ -82,17 +80,17 @@ function loadMoreData() {
{#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>
@ -117,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}

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

@ -47,7 +47,7 @@ function changeSubSection(state) {
</script>
<section class="w-auto max-w-3xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
<section class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
<div class="m-auto h-full overflow-hidden">
<main class="w-fit sm:w-full sm:max-w-2xl">
<div class="m-auto">

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

@ -130,7 +130,6 @@ updateYearRange()
<!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Statistics & Valuation Metrics · stocknear`}/>
<meta property="og:description" content={`Detailed statistics for ${$displayCompanyName} (${$stockTicker}) stock, including valuation, metrics, financial numbers, share information 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 -->
@ -138,7 +137,6 @@ updateYearRange()
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Statistics & Valuation Metrics · stocknear`}/>
<meta name="twitter:description" content={`Detailed statistics for ${$displayCompanyName} (${$stockTicker}) stock, including valuation, metrics, financial numbers, share information 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>
@ -146,7 +144,7 @@ updateYearRange()
<section class="text-white w-full">
<div class="sm:pl-7 m-auto pt-5">
<div class="sm:p-7 m-auto">
<div class="mb-6">
<h1 class="text-2xl sm:text-3xl text-white font-bold mb-5">
Fundamental Data

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

@ -306,7 +306,7 @@ optionsGrowth = plotGrowth();
<section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0">
<div class="flex justify-center m-auto h-full overflow-hidden">
<div class="relative flex justify-center items-center overflow-hidden">
<div class="sm:p-7 w-full sm:max-w-3xl m-auto mt-2 sm:mt-0">
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
<div class="mb-6">
<h2 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
Employees