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

ui fixes

Browse Source
This commit is contained in:
MuslemRahimi 2024-06-21 09:02:24 +02:00
parent cfeea4771f
commit 0aaadabf5c
8 changed files with 126 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/components/PriceAnalysis.svelte
View File

@ -225,7 +225,7 @@ $: {
<div class="w-full mt-5 mb-5 flex justify-start items-center"> <div class="w-full mt-5 mb-5 flex justify-start items-center">
<div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 gap-x-3 "> <div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 gap-x-3 ">
<!--Start Flow Sentiment--> <!--Start Flow Sentiment-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-2xl h-20"> <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-lg h-20">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm">Price Sentiment</span> <span class="font-medium text-gray-200 text-sm">Price Sentiment</span>
<span class="text-start text-[1rem] font-medium {priceSentiment === 'Bullish' ? 'text-[#10DB06]' : 'text-[#FC2120]'}">{priceSentiment}</span> <span class="text-start text-[1rem] font-medium {priceSentiment === 'Bullish' ? 'text-[#10DB06]' : 'text-[#FC2120]'}">{priceSentiment}</span>
@ -234,7 +234,7 @@ $: {
<!--End Flow Sentiment--> <!--End Flow Sentiment-->
<!--Start Put/Call--> <!--Start Put/Call-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-2xl h-20"> <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-lg h-20">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm"><span class="italic">R</span><sup>2</sup> Score</span> <span class="font-medium text-gray-200 text-sm"><span class="italic">R</span><sup>2</sup> Score</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white"> <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@ -262,7 +262,7 @@ $: {
<!--End Put/Call--> <!--End Put/Call-->
<!--Start mape--> <!--Start mape-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-2xl h-20"> <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-lg h-20">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm">MAPE</span> <span class="font-medium text-gray-200 text-sm">MAPE</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white"> <span class="text-start text-sm sm:text-[1rem] font-medium text-white">

6
src/lib/components/TrendAnalysis.svelte
View File

@ -128,7 +128,7 @@ $: {
<div class="w-full mt-5 mb-5 flex justify-start items-center"> <div class="w-full mt-5 mb-5 flex justify-start items-center">
<div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 gap-x-3 "> <div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 gap-x-3 ">
<!--Start Flow Sentiment--> <!--Start Flow Sentiment-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-2xl h-20"> <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-lg h-20">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm">Trend Sentiment</span> <span class="font-medium text-gray-200 text-sm">Trend Sentiment</span>
<span class="text-start text-[1rem] font-medium {flowSentiment === 'Bullish' ? 'text-[#10DB06]' : 'text-[#FC2120]'}">{flowSentiment}</span> <span class="text-start text-[1rem] font-medium {flowSentiment === 'Bullish' ? 'text-[#10DB06]' : 'text-[#FC2120]'}">{flowSentiment}</span>
@ -137,7 +137,7 @@ $: {
<!--End Flow Sentiment--> <!--End Flow Sentiment-->
<!--Start Put/Call--> <!--Start Put/Call-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-2xl h-20"> <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-lg h-20">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm ">Accuracy</span> <span class="font-medium text-gray-200 text-sm ">Accuracy</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white"> <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@ -165,7 +165,7 @@ $: {
<!--End Put/Call--> <!--End Put/Call-->
<!--Start Precision--> <!--Start Precision-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-2xl h-20"> <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-lg h-20">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm ">Precision</span> <span class="font-medium text-gray-200 text-sm ">Precision</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white"> <span class="text-start text-sm sm:text-[1rem] font-medium text-white">

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

@ -171,7 +171,6 @@
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$etfTicker}) Dividend History, Dates & Yield · stocknear`}/> <meta property="og:title" content={`${$displayCompanyName} (${$etfTicker}) Dividend History, Dates & Yield · stocknear`}/>
<meta property="og:description" content={`Get the latest dividend data for ${$displayCompanyName} (${$etfTicker}), including dividend history, yield, key dates, growth and other metrics.`} /> <meta property="og:description" content={`Get the latest dividend data for ${$displayCompanyName} (${$etfTicker}), 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"/> <meta property="og:type" content="website"/>
<!-- Add more Open Graph meta tags as needed --> <!-- Add more Open Graph meta tags as needed -->
@ -179,7 +178,6 @@
<meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content={`${$displayCompanyName} (${$etfTicker}) Dividend History, Dates & Yield · stocknear`}/> <meta name="twitter:title" content={`${$displayCompanyName} (${$etfTicker}) Dividend History, Dates & Yield · stocknear`}/>
<meta name="twitter:description" content={`Get the latest dividend data for ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} /> <meta name="twitter:description" content={`Get the latest dividend data for ${$displayCompanyName} (${$etfTicker}) 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>
@ -250,7 +248,7 @@
</span> </span>
</div> </div>
<span class="text-white text-[1rem] font-semibold"> <span class="text-white text-[1rem] font-semibold">
${annualDividend !== '0.00' ? annualDividend : '0'} ${annualDividend !== '0.00' ? annualDividend?.toFixed(2) : '0'}
</span> </span>
</div> </div>
<!--End Column Win Rate--> <!--End Column Win Rate-->
@ -309,14 +307,14 @@
</div> </div>
<div class="flex flex-row items-center w-full mt-14 mb-8"> <div class="flex flex-col sm:flex-row items-start sm:items-center w-full mt-14 mb-8">
<h3 class="text-xl text-white font-medium "> <h3 class="text-xl text-white font-semibold ">
Dividends History Dividends History
</h3> </h3>
<label class="{stockDividends?.length === 0 ? 'hidden' : ''} inline-flex cursor-pointer relative ml-auto"> <label class="{stockDividends?.length === 0 ? 'hidden' : ''} inline-flex cursor-pointer relative ml-auto mt-5 sm:mt-0">
<input on:click={toggleMode} type="checkbox" value={mode} class="sr-only peer"> <input on:click={toggleMode} type="checkbox" value={mode} class="sr-only peer">
<div class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"></div> <div class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"></div>
{#if mode} {#if mode}
@ -348,36 +346,36 @@
{:else} {:else}
<div class="flex justify-start items-center w-full m-auto shadow-md rounded-none sm:rounded-lg mb-4"> <div class="flex justify-start items-center w-full m-auto shadow-md rounded-none sm:rounded-lg mb-4">
<table class="table table-sm table-pin-rows shadow-md table-compact flex justify-start items-center w-full m-auto"> <table class="table table-sm table-compact flex justify-start items-center w-full m-auto">
<thead> <thead>
<tr class="bg-[#0F0F0F] border-b-slate-600 shadow-md"> <tr class="bg-[#0F0F0F] border-b-slate-600 shadow-md">
<th class="text-start bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-sm font-medium"> <th class="text-start bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-sm font-semibold">
Ex-Divid. Date Ex-Divid. Date
</th> </th>
<th class="text-end bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-sm font-medium"> <th class="text-end bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-sm font-semibold">
Cash Amount Cash Amount
</th> </th>
<th class="text-end bg-[#0F0F0F] border-b border-[#0F0F0F] hidden sm:table-cell text-white text-sm font-medium"> <th class="text-end bg-[#0F0F0F] border-b border-[#0F0F0F] hidden sm:table-cell text-white text-sm font-semibold">
Record Date Record Date
</th> </th>
<th class="text-end bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-sm font-medium"> <th class="text-end bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-sm font-semibold">
Pay Date Pay Date
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody class="shadow-md"> <tbody class="">
{#each stockDividends as item} {#each stockDividends as item}
<tr class="text-gray-200 "> <tr class="text-gray-200 odd:bg-[#202020]">
<td class="text-start bg-[#0F0F0F] text-xs sm:text-sm text-white font-medium border-b border-[#0F0F0F]"> <td class="text-start text-xs sm:text-sm text-white font-medium border-b border-[#0F0F0F]">
{new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} {new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
</td> </td>
<td class="text-end bg-[#0F0F0F] text-xs sm:text-sm text-white border-b border-[#0F0F0F]"> <td class="text-end text-xs sm:text-sm text-white border-b border-[#0F0F0F]">
${item?.adjDividend?.toFixed(2)} ${item?.adjDividend?.toFixed(2)}
</td> </td>
<td class="text-end bg-[#0F0F0F] text-xs sm:text-sm hidden sm:table-cell text-white border-b border-[#0F0F0F]"> <td class="text-end text-xs sm:text-sm hidden sm:table-cell text-white border-b border-[#0F0F0F]">
{item?.recordDate?.length !== 0 ? new Date(item?.recordDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'} {item?.recordDate?.length !== 0 ? new Date(item?.recordDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}
</td> </td>
<td class="text-end bg-[#0F0F0F] text-xs sm:text-sm text-white border-b border-[#0F0F0F]"> <td class="text-end text-xs sm:text-sm text-white border-b border-[#0F0F0F]">
{item?.paymentDate?.length !== 0 ? new Date(item?.paymentDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'} {item?.paymentDate?.length !== 0 ? new Date(item?.paymentDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}
</td> </td>
</tr> </tr>

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

@ -76,7 +76,6 @@ $: {
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$etfTicker}) Holdings List · stocknear`}/> <meta property="og:title" content={`${$displayCompanyName} (${$etfTicker}) Holdings List · stocknear`}/>
<meta property="og:description" content={`Get the Holdings List of ${$displayCompanyName} (${$etfTicker}).`} /> <meta property="og:description" content={`Get the Holdings List of ${$displayCompanyName} (${$etfTicker}).`} />
<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 -->
@ -84,7 +83,6 @@ $: {
<meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content={`${$displayCompanyName} (${$etfTicker}) Holdings List · stocknear`}/> <meta name="twitter:title" content={`${$displayCompanyName} (${$etfTicker}) Holdings List · stocknear`}/>
<meta name="twitter:description" content={`Get the Holdings List of ${$displayCompanyName} (${$etfTicker}).`} /> <meta name="twitter:description" content={`Get the Holdings List of ${$displayCompanyName} (${$etfTicker}).`} />
<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>
@ -135,10 +133,10 @@ $: {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each holdings as item,index} {#each (data?.user?.tier === 'Pro' ? holdings : holdings?.slice(0,3)) as item,index}
<!-- row --> <!-- row -->
{#if item?.asset !== null} {#if item?.asset !== null}
<tr on:click={() => stockSelector(item?.asset)} class="w-full sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#0F0F0F] border-b-[#0F0F0F] shake-ticker {item?.asset?.length !== 0 ? 'cursor-pointer' : ''}"> <tr on:click={() => stockSelector(item?.asset)} class="w-full sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#202020] {index+1 === holdings?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''} {item?.asset?.length !== 0 ? 'cursor-pointer' : ''}">
<td class="text-gray-200 border-b border-[#0F0F0F]"> <td class="text-gray-200 border-b border-[#0F0F0F]">
{index+1} {index+1}

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

@ -389,7 +389,7 @@ $: {
<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 lg:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 "> <div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
<!--Start Flow Sentiment--> <!--Start Flow Sentiment-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20"> <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-lg h-20">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm ">Flow Sentiment</span> <span class="font-medium text-gray-200 text-sm ">Flow Sentiment</span>
<span class="text-start text-[1rem] font-medium {flowSentiment === 'Bullish' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">{flowSentiment}</span> <span class="text-start text-[1rem] font-medium {flowSentiment === 'Bullish' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">{flowSentiment}</span>
@ -398,7 +398,7 @@ $: {
</div> </div>
<!--End Flow Sentiment--> <!--End Flow Sentiment-->
<!--Start Put/Call--> <!--Start Put/Call-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20"> <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-lg h-20">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm ">Put/Call</span> <span class="font-medium text-gray-200 text-sm ">Put/Call</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white"> <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@ -425,7 +425,7 @@ $: {
</div> </div>
<!--End Put/Call--> <!--End Put/Call-->
<!--Start Call Flow--> <!--Start Call Flow-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20"> <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-lg h-20">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm ">Call Flow</span> <span class="font-medium text-gray-200 text-sm ">Call Flow</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white"> <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@ -454,7 +454,7 @@ $: {
</div> </div>
<!--End Call Flow--> <!--End Call Flow-->
<!--Start Put Flow--> <!--Start Put Flow-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20"> <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-lg h-20">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm ">Put Flow</span> <span class="font-medium text-gray-200 text-sm ">Put Flow</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white"> <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@ -514,7 +514,7 @@ $: {
<tbody> <tbody>
{#each optionList as item} {#each optionList as item}
<!-- row --> <!-- row -->
<tr class="bg-[#0F0F0F] border-b-[#0F0F0F]"> <tr class="bg-[#0F0F0F] border-b-[#0F0F0F] ">
<td class="text-white text-xs sm:text-sm text-start"> <td class="text-white text-xs sm:text-sm text-start">
{formatDate(item?.updated)} {formatDate(item?.updated)}

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

@ -261,7 +261,7 @@ function latestInfoDate(inputDate) {
</thead> </thead>
<tbody> <tbody>
{#each (data?.user?.tier === 'Pro' ? historyList : historyList?.slice(0,3)) as item,index} {#each (data?.user?.tier === 'Pro' ? historyList : historyList?.slice(0,3)) as item,index}
<tr on:click={() => goto(`/analysts/${item?.analystId}`)} class="cursor-pointer {latestInfoDate(item?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1]' : 'bg-[#0F0F0F]'} border-b-[#0F0F0F] {index+1 === historyList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}"> <tr on:click={() => goto(`/analysts/${item?.analystId}`)} class="cursor-pointer odd:bg-[#202020] {latestInfoDate(item?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1]' : 'bg-[#0F0F0F]'} border-b-[#0F0F0F] {index+1 === historyList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
<td class="text-sm text-start"> <td class="text-sm text-start">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="text-blue-400 font-medium">{item?.analyst_name} </span> <span class="text-blue-400 font-medium">{item?.analyst_name} </span>

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

@ -280,29 +280,28 @@ onMount(async() => {
</div> </div>
<div class="flex flex-row items-center w-full mt-14 mb-8"> <div class="flex flex-col sm:flex-row items-start sm:items-center w-full mt-14 mb-8">
<h3 class="text-xl text-white font-medium "> <h3 class="text-xl text-white font-semibold ">
Dividends History Dividends History
</h3> </h3>
<label class="{stockDividends?.length === 0 ? 'hidden' : ''} inline-flex cursor-pointer relative ml-auto"> <label class="{stockDividends?.length === 0 ? 'hidden' : ''} inline-flex cursor-pointer relative ml-auto mt-5 sm:mt-0">
<input on:click={toggleMode} type="checkbox" value={mode} class="sr-only peer"> <input on:click={toggleMode} type="checkbox" value={mode} class="sr-only peer">
<div class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"></div> <div class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"></div>
{#if mode} {#if mode}
<span class="ml-2 text-sm font-medium text-gray-300"> <span class="ml-2 text-sm font-medium text-gray-300">
Cool Mode Cool Mode
</span> </span>
{:else} {:else}
<span class="ml-2 text-sm font-medium text-gray-500"> <span class="ml-2 text-sm font-medium text-gray-500">
Boring Mode Boring Mode
</span> </span>
{/if} {/if}
</label> </label>
</div> </div>
{#if stockDividends?.length !== 0} {#if stockDividends?.length !== 0}
@ -321,36 +320,36 @@ onMount(async() => {
{:else} {:else}
<div class="flex justify-start items-center w-full m-auto shadow-md rounded-none sm:rounded-lg mb-4"> <div class="flex justify-start items-center w-full m-auto shadow-md rounded-none sm:rounded-lg mb-4">
<table class="table table-sm table-pin-rows shadow-md table-compact flex justify-start items-center w-full m-auto"> <table class="table table-sm table-compact flex justify-start items-center w-full m-auto">
<thead> <thead>
<tr class="bg-[#0F0F0F] border-b-slate-600 shadow-md"> <tr class="bg-[#0F0F0F] border-b-slate-600 shadow-md">
<th class="text-start bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-sm font-medium"> <th class="text-start bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-sm font-semibold">
Ex-Divid. Date Ex-Divid. Date
</th> </th>
<th class="text-end bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-sm font-medium"> <th class="text-end bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-sm font-semibold">
Cash Amount Cash Amount
</th> </th>
<th class="text-end bg-[#0F0F0F] border-b border-[#0F0F0F] hidden sm:table-cell text-white text-sm font-medium"> <th class="text-end bg-[#0F0F0F] border-b border-[#0F0F0F] hidden sm:table-cell text-white text-sm font-semibold">
Record Date Record Date
</th> </th>
<th class="text-end bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-sm font-medium"> <th class="text-end bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-sm font-semibold">
Pay Date Pay Date
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody class="shadow-md"> <tbody class="shadow-md">
{#each stockDividends as item} {#each stockDividends as item}
<tr class="text-gray-200 "> <tr class="text-gray-200 odd:bg-[#202020]">
<td class="text-start bg-[#0F0F0F] text-xs sm:text-sm text-white font-medium border-b border-[#0F0F0F]"> <td class="text-start text-xs sm:text-sm text-white font-medium border-b border-[#0F0F0F]">
{new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} {new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
</td> </td>
<td class="text-end bg-[#0F0F0F] text-xs sm:text-sm text-white border-b border-[#0F0F0F]"> <td class="text-end text-xs sm:text-sm text-white border-b border-[#0F0F0F]">
${item?.adjDividend?.toFixed(2)} ${item?.adjDividend?.toFixed(2)}
</td> </td>
<td class="text-end bg-[#0F0F0F] text-xs sm:text-sm hidden sm:table-cell text-white border-b border-[#0F0F0F]"> <td class="text-end text-xs sm:text-sm hidden sm:table-cell text-white border-b border-[#0F0F0F]">
{item?.recordDate?.length !== 0 ? new Date(item?.recordDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'} {item?.recordDate?.length !== 0 ? new Date(item?.recordDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}
</td> </td>
<td class="text-end bg-[#0F0F0F] text-xs sm:text-sm text-white border-b border-[#0F0F0F]"> <td class="text-end text-xs sm:text-sm text-white border-b border-[#0F0F0F]">
{item?.paymentDate?.length !== 0 ? new Date(item?.paymentDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'} {item?.paymentDate?.length !== 0 ? new Date(item?.paymentDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}
</td> </td>
</tr> </tr>

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

@ -59,7 +59,7 @@ function selectSortingMethod(state:string) {
const options = { const options = {
grid: { grid: {
left: '0%', left: '0%',
right: '0%', right: '2%',
top: '10%', top: '10%',
bottom: '20%', bottom: '20%',
containLabel: true, containLabel: true,
@ -285,7 +285,6 @@ optionsGrowth = plotGrowth();
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Number of Employees · stocknear`}/> <meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Number of Employees · stocknear`}/>
<meta property="og:description" content={`Detailed historical employees number for ${$displayCompanyName} (${$stockTicker}). See many years of change, growth and the impact.`} /> <meta property="og:description" content={`Detailed historical employees number for ${$displayCompanyName} (${$stockTicker}). See many years of change, growth and the impact.`} />
<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 -->
@ -293,7 +292,6 @@ optionsGrowth = plotGrowth();
<meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Number of Employees · stocknear`}/> <meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Number of Employees · stocknear`}/>
<meta name="twitter:description" content={`Detailed historical employees number for ${$displayCompanyName} (${$stockTicker}). See many years of change, growth and the impact.`} /> <meta name="twitter:description" content={`Detailed historical employees number for ${$displayCompanyName} (${$stockTicker}). See many years of change, growth and the impact.`} />
<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>
@ -338,50 +336,69 @@ optionsGrowth = plotGrowth();
</div> </div>
<div class="no-scrollbar stats stats-horizontal bg-[#0F0F0F] shadow-md w-full rounded-lg"> <div class="grid grid-cols-2 sm:grid-cols-3 gap-10 sm:gap-5 bg-[#202020] shadow-md rounded-xl p-5 flex justify-center items-center mb-2">
<!--Start Column Title-->
<div class="stat"> <div class="flex flex-col">
<div class="stat-title text-sm font-medium text-white">Total Employees</div> <div class="flex flex-row items-center">
<div class="stat-value text-white text-[1rem] font-medium">{abbreviateNumber(employees)}</div> <span class="text-gray-300 font-medium text-[1rem]">
</div> Total Employees
</span>
</div>
<div class="stat"> <span class="text-white text-[1rem] font-semibold">
<div class="stat-title text-white text-sm font-medium">Change (1Y)</div> {abbreviateNumber(employees)}
<div class="stat-value text-white text-[1rem] font-medium"> </span>
</div>
<!--End Column Title-->
<!--Start Column Win Rate-->
<div class="flex flex-col">
<div class="flex flex-row items-center">
<span class="text-gray-300 font-medium text-[1rem] ">
Change (1Y)
</span>
</div>
<span class="text-white text-[1rem] font-semibold">
{#if dateDistance} {#if dateDistance}
n/a n/a
{:else} {:else}
{abbreviateNumber(changeRate)} {abbreviateNumber(changeRate)}
{/if} {/if}
</div> </span>
</div> </div>
<!--End Column Win Rate-->
<div class="stat">
<div class="stat-title text-white text-sm font-medium">Growth (1Y)</div> <!--Start Column Performance-->
<div class="stat-value text-lg font-medium"> <div class="flex flex-col">
{#if growthRate >= 0} <div class="flex flex-row items-center">
<span class="text-white text-md font-medium"> <span class="text-gray-300 font-medium text-[1rem]">
<svg class="w-5 h-5 inline-block -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg> Growth (1Y)
<span class="text-[#10DB06] text-[1rem]">+{growthRate}%</span> </span>
</span> </div>
{:else if growthRate < 0} <span class="text-white text-[1rem] font-semibold">
<div class="text-white text-md font-medium"> {#if growthRate >= 0}
<svg class="w-5 h-5 rotate-180 inline-block -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg> <span class="text-white text-md font-medium">
<span class="text-[#FF2F1F] text-[1rem]">{growthRate}%</span> <svg class="w-5 h-5 inline-block -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
</div> <span class="text-[#10DB06] text-[1rem]">+{growthRate}%</span>
{:else} </span>
<span class="text-white m-auto"> {:else if growthRate < 0}
n/a <div class="text-white text-md font-medium">
</span> <svg class="w-5 h-5 rotate-180 inline-block -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
{/if} <span class="text-[#FF2F1F] text-[1rem]">{growthRate}%</span>
</div>
{:else}
<span class="text-white m-auto">
n/a
</span>
{/if}
</span>
</div> </div>
</div> <!--End Column-->
</div>
</div>
<div class="flex flex-row items-center w-full mt-10 mb-8"> <div class="flex flex-row items-center w-full mt-10 mb-8">
@ -431,36 +448,36 @@ optionsGrowth = plotGrowth();
{/if} {/if}
<div class="flex justify-start items-center w-full m-auto pr-1 pl-1 p-3"> <div class="flex justify-start items-center w-full m-auto pr-1 pl-1 p-3">
<table class="table table-sm table-compact table-pin-rows flex justify-start items-center w-full px-3 m-auto"> <table class="table table-sm table-compact flex justify-start items-center w-full px-3 m-auto">
<thead> <thead>
<tr> <tr>
<th class="text-start shadow-md border-b border-[#0F0F0F] bg-[#0F0F0F] text-white text-sm font-medium"> <th class="text-start border-b border-[#0F0F0F] bg-[#0F0F0F] text-white text-sm font-semibiold">
Date Date
</th> </th>
<th class="text-end shadow-md border-b border-[#0F0F0F] bg-[#0F0F0F] text-white text-sm font-medium"> <th class="text-end border-b border-[#0F0F0F] bg-[#0F0F0F] text-white text-sm font-semibiold">
Employees Employees
</th> </th>
<th class="text-end shadow-md border-b border-[#0F0F0F] bg-[#0F0F0F] hidden sm:table-cell text-white text-sm font-medium"> <th class="text-end border-b border-[#0F0F0F] bg-[#0F0F0F] hidden sm:table-cell text-white text-sm font-semibiold">
Change Change
</th> </th>
<th class="text-end shadow-md border-b border-[#0F0F0F] bg-[#0F0F0F] text-white text-sm font-medium"> <th class="text-end border-b border-[#0F0F0F] bg-[#0F0F0F] text-white text-sm font-semibiold">
Growth Growth
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody class="shadow-md"> <tbody class="">
{#each historyList as item, index} {#each historyList as item, index}
<tr class="text-gray-200 "> <tr class="text-gray-200 odd:bg-[#202020]">
<td class="text-start bg-[#0F0F0F] border-b border-[#0F0F0F] text-xs sm:text-sm text-white"> <td class="text-start border-b border-[#0F0F0F] text-xs sm:text-sm text-white">
{new Date(item?.filingDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} {new Date(item?.filingDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
</td> </td>
<td class="text-end border-b border-[#0F0F0F] bg-[#0F0F0F] text-xs sm:text-sm text-white"> <td class="text-end border-b border-[#0F0F0F] text-xs sm:text-sm text-white">
{new Intl.NumberFormat("en").format(item?.employeeCount)} {new Intl.NumberFormat("en").format(item?.employeeCount)}
</td> </td>
<td class="text-end border-b border-[#0F0F0F] bg-[#0F0F0F] text-xs sm:text-sm hidden sm:table-cell text-white"> <td class="text-end border-b border-[#0F0F0F] text-xs sm:text-sm hidden sm:table-cell text-white">
{abbreviateNumber(item?.employeeCount-historyList[index+1]?.employeeCount)} {abbreviateNumber(item?.employeeCount-historyList[index+1]?.employeeCount)}
</td> </td>
<td class="text-end border-b border-[#0F0F0F] bg-[#0F0F0F] text-xs sm:text-sm text-white text-end"> <td class="text-end border-b border-[#0F0F0F] text-xs sm:text-sm text-white text-end">
{#if index+1-historyList?.length == 0} {#if index+1-historyList?.length == 0}
0.00% 0.00%
{:else} {:else}