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 grid grid-cols-2 lg:grid-cols-3 gap-y-3 gap-x-3 ">
<!--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">
<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>
@ -234,7 +234,7 @@ $: {
<!--End Flow Sentiment-->
<!--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">
<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">
@ -262,7 +262,7 @@ $: {
<!--End Put/Call-->
<!--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">
<span class="font-medium text-gray-200 text-sm">MAPE</span>
<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 grid grid-cols-2 lg:grid-cols-3 gap-y-3 gap-x-3 ">
<!--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">
<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>
@ -137,7 +137,7 @@ $: {
<!--End Flow Sentiment-->
<!--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">
<span class="font-medium text-gray-200 text-sm ">Accuracy</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@ -165,7 +165,7 @@ $: {
<!--End Put/Call-->
<!--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">
<span class="font-medium text-gray-200 text-sm ">Precision</span>
<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 -->
<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: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 -->
@ -179,7 +178,6 @@
<meta name="twitter:card" content="summary_large_image"/>
<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:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
@ -250,7 +248,7 @@
</span>
</div>
<span class="text-white text-[1rem] font-semibold">
${annualDividend !== '0.00' ? annualDividend : '0'}
${annualDividend !== '0.00' ? annualDividend?.toFixed(2) : '0'}
</span>
</div>
<!--End Column Win Rate-->
@ -309,14 +307,14 @@
</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
</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">
<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}
@ -348,36 +346,36 @@
{:else}
<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>
<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
</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
</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
</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
</th>
</tr>
</thead>
<tbody class="shadow-md">
<tbody class="">
{#each stockDividends as item}
<tr class="text-gray-200 ">
<td class="text-start bg-[#0F0F0F] text-xs sm:text-sm text-white font-medium border-b border-[#0F0F0F]">
<tr class="text-gray-200 odd:bg-[#202020]">
<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' })}
</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)}
</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'}
</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'}
</td>
</tr>

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

@ -76,7 +76,6 @@ $: {
<!-- Other meta tags -->
<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: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 -->
@ -84,7 +83,6 @@ $: {
<meta name="twitter:card" content="summary_large_image"/>
<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:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
@ -135,10 +133,10 @@ $: {
</tr>
</thead>
<tbody>
{#each holdings as item,index}
{#each (data?.user?.tier === 'Pro' ? holdings : holdings?.slice(0,3)) as item,index}
<!-- row -->
{#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]">
{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 grid grid-cols-2 lg:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
<!--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">
<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>
@ -398,7 +398,7 @@ $: {
</div>
<!--End Flow Sentiment-->
<!--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">
<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">
@ -425,7 +425,7 @@ $: {
</div>
<!--End Put/Call-->
<!--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">
<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">
@ -454,7 +454,7 @@ $: {
</div>
<!--End Call 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">
<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">
@ -514,7 +514,7 @@ $: {
<tbody>
{#each optionList as item}
<!-- 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">
{formatDate(item?.updated)}

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

@ -261,7 +261,7 @@ function latestInfoDate(inputDate) {
</thead>
<tbody>
{#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">
<div class="flex flex-col items-start">
<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 class="flex flex-row items-center w-full mt-14 mb-8">
<h3 class="text-xl text-white font-medium ">
Dividends History
</h3>
<label class="{stockDividends?.length === 0 ? 'hidden' : ''} inline-flex cursor-pointer relative ml-auto">
<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>
{#if mode}
<span class="ml-2 text-sm font-medium text-gray-300">
Cool Mode
</span>
{:else}
<span class="ml-2 text-sm font-medium text-gray-500">
Boring Mode
</span>
{/if}
</label>
</div>
<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-semibold ">
Dividends History
</h3>
<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">
<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}
<span class="ml-2 text-sm font-medium text-gray-300">
Cool Mode
</span>
{:else}
<span class="ml-2 text-sm font-medium text-gray-500">
Boring Mode
</span>
{/if}
</label>
</div>
{#if stockDividends?.length !== 0}
@ -321,36 +320,36 @@ onMount(async() => {
{:else}
<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>
<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
</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
</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
</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
</th>
</tr>
</thead>
<tbody class="shadow-md">
{#each stockDividends as item}
<tr class="text-gray-200 ">
<td class="text-start bg-[#0F0F0F] text-xs sm:text-sm text-white font-medium border-b border-[#0F0F0F]">
<tr class="text-gray-200 odd:bg-[#202020]">
<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' })}
</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)}
</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'}
</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'}
</td>
</tr>

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

@ -59,7 +59,7 @@ function selectSortingMethod(state:string) {
const options = {
grid: {
left: '0%',
right: '0%',
right: '2%',
top: '10%',
bottom: '20%',
containLabel: true,
@ -285,7 +285,6 @@ optionsGrowth = plotGrowth();
<!-- Other meta tags -->
<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: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 -->
@ -293,7 +292,6 @@ optionsGrowth = plotGrowth();
<meta name="twitter:card" content="summary_large_image"/>
<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:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
@ -338,50 +336,69 @@ optionsGrowth = plotGrowth();
</div>
<div class="no-scrollbar stats stats-horizontal bg-[#0F0F0F] shadow-md w-full rounded-lg">
<div class="stat">
<div class="stat-title text-sm font-medium text-white">Total Employees</div>
<div class="stat-value text-white text-[1rem] font-medium">{abbreviateNumber(employees)}</div>
</div>
<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="flex flex-col">
<div class="flex flex-row items-center">
<span class="text-gray-300 font-medium text-[1rem]">
Total Employees
</span>
</div>
<div class="stat">
<div class="stat-title text-white text-sm font-medium">Change (1Y)</div>
<div class="stat-value text-white text-[1rem] font-medium">
<span class="text-white text-[1rem] font-semibold">
{abbreviateNumber(employees)}
</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}
n/a
{:else}
{abbreviateNumber(changeRate)}
{/if}
</div>
</span>
</div>
<div class="stat">
<div class="stat-title text-white text-sm font-medium">Growth (1Y)</div>
<div class="stat-value text-lg font-medium">
{#if growthRate >= 0}
<span class="text-white text-md font-medium">
<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>
<span class="text-[#10DB06] text-[1rem]">+{growthRate}%</span>
</span>
{:else if growthRate < 0}
<div class="text-white text-md font-medium">
<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-[#FF2F1F] text-[1rem]">{growthRate}%</span>
</div>
{:else}
<span class="text-white m-auto">
n/a
</span>
{/if}
<!--End Column Win Rate-->
<!--Start Column Performance-->
<div class="flex flex-col">
<div class="flex flex-row items-center">
<span class="text-gray-300 font-medium text-[1rem]">
Growth (1Y)
</span>
</div>
<span class="text-white text-[1rem] font-semibold">
{#if growthRate >= 0}
<span class="text-white text-md font-medium">
<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>
<span class="text-[#10DB06] text-[1rem]">+{growthRate}%</span>
</span>
{:else if growthRate < 0}
<div class="text-white text-md font-medium">
<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-[#FF2F1F] text-[1rem]">{growthRate}%</span>
</div>
{:else}
<span class="text-white m-auto">
n/a
</span>
{/if}
</span>
</div>
</div>
<!--End Column-->
</div>
</div>
<div class="flex flex-row items-center w-full mt-10 mb-8">
@ -431,36 +448,36 @@ optionsGrowth = plotGrowth();
{/if}
<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>
<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
</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
</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
</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
</th>
</tr>
</thead>
<tbody class="shadow-md">
<tbody class="">
{#each historyList as item, index}
<tr class="text-gray-200 ">
<td class="text-start bg-[#0F0F0F] border-b border-[#0F0F0F] text-xs sm:text-sm text-white">
<tr class="text-gray-200 odd:bg-[#202020]">
<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' })}
</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)}
</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)}
</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}
0.00%
{:else}