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

update market cap page

Browse Source
This commit is contained in:
MuslemRahimi 2025-03-10 17:11:47 +01:00
parent 8176707777
commit 241f2f628a
10 changed files with 384 additions and 312 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/lib/components/Infobox.svelte
View File

@ -1,14 +1,15 @@
<script lang="ts"> <script lang="ts">
import { mode } from "mode-watcher";
export let text; export let text;
</script> </script>
<div <div
class="sm:mt-5 sm:mt-0 border-l-3 border-l-muted dark:border-l-white border-r-0 border-t-0 border-b-0 border p-0 sm:p-4 text-muted dark:text-white flex flex-row items-center" class="sm:mt-5 sm:mt-0 border-l-3 border-l-[#3B82F6] dark:border-l-white border-r-0 border-t-0 border-b-0 border p-0 sm:p-4 text-muted dark:text-white flex flex-row items-center"
> >
<svg <svg
class="h-6 w-6 hidden sm:block" class="h-6 w-6 hidden sm:block"
viewBox="0 0 20 20" viewBox="0 0 20 20"
fill="currentColor" fill={$mode === "light" ? "#3B82F6" : "currentColor"}
style="max-width:40px" style="max-width:40px"
aria-hidden="true" aria-hidden="true"
><path ><path

24
src/routes/market-mover/active/+layout.svelte
View File

@ -55,48 +55,48 @@
<a <a
href="/market-mover/active" href="/market-mover/active"
class="p-2 px-5 cursor-pointer {timePeriod === 'active' class="p-2 px-5 cursor-pointer {timePeriod === 'active'
? 'text-white bg-primary/90' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
Today Today
</a> </a>
<a <a
href="/market-mover/active/week" href="/market-mover/active/week"
class="p-2 px-5 cursor-pointer {timePeriod === 'week' class="p-2 px-5 cursor-pointer {timePeriod === 'week'
? 'text-white bg-primary/90' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
Week Week
</a> </a>
<a <a
href="/market-mover/active/month" href="/market-mover/active/month"
class="p-2 px-5 cursor-pointer {timePeriod === 'month' class="p-2 px-5 cursor-pointer {timePeriod === 'month'
? 'text-white bg-primary/90' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
Month Month
</a> </a>
<a <a
href="/market-mover/active/year" href="/market-mover/active/year"
class="p-2 px-5 cursor-pointer {timePeriod === 'year' class="p-2 px-5 cursor-pointer {timePeriod === 'year'
? 'text-white bg-primary/90' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
Year Year
</a> </a>
<a <a
href="/market-mover/active/3Y" href="/market-mover/active/3Y"
class="p-2 px-5 cursor-pointer {timePeriod === '3Y' class="p-2 px-5 cursor-pointer {timePeriod === '3Y'
? 'text-white bg-primary/90' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
3 Years 3 Years
</a> </a>
<a <a
href="/market-mover/active/5Y" href="/market-mover/active/5Y"
class="p-2 px-5 cursor-pointer {timePeriod === '5Y' class="p-2 px-5 cursor-pointer {timePeriod === '5Y'
? 'text-white bg-primary/90' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
5 Years 5 Years
</a> </a>

8
src/routes/market-mover/afterhours/+layout.svelte
View File

@ -37,16 +37,16 @@
<a <a
href="/market-mover/afterhours/gainers" href="/market-mover/afterhours/gainers"
class="p-2 px-5 cursor-pointer {categoryType === 'gainers' class="p-2 px-5 cursor-pointer {categoryType === 'gainers'
? 'text-white bg-primary/90' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
Gainers Gainers
</a> </a>
<a <a
href="/market-mover/afterhours/losers" href="/market-mover/afterhours/losers"
class="p-2 px-5 cursor-pointer {categoryType === 'losers' class="p-2 px-5 cursor-pointer {categoryType === 'losers'
? 'text-white bg-primary/90' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
Losers Losers
</a> </a>

24
src/routes/market-mover/losers/+layout.svelte
View File

@ -55,48 +55,48 @@
<a <a
href="/market-mover/losers" href="/market-mover/losers"
class="p-2 px-5 cursor-pointer {timePeriod === 'losers' class="p-2 px-5 cursor-pointer {timePeriod === 'losers'
? 'text-white bg-primary/90' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
Today Today
</a> </a>
<a <a
href="/market-mover/losers/week" href="/market-mover/losers/week"
class="p-2 px-5 cursor-pointer {timePeriod === 'week' class="p-2 px-5 cursor-pointer {timePeriod === 'week'
? 'text-white bg-primary/90' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
Week Week
</a> </a>
<a <a
href="/market-mover/losers/month" href="/market-mover/losers/month"
class="p-2 px-5 cursor-pointer {timePeriod === 'month' class="p-2 px-5 cursor-pointer {timePeriod === 'month'
? 'text-white bg-primary/90' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
Month Month
</a> </a>
<a <a
href="/market-mover/losers/year" href="/market-mover/losers/year"
class="p-2 px-5 cursor-pointer {timePeriod === 'year' class="p-2 px-5 cursor-pointer {timePeriod === 'year'
? 'text-white bg-primary/90' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
Year Year
</a> </a>
<a <a
href="/market-mover/losers/3Y" href="/market-mover/losers/3Y"
class="p-2 px-5 cursor-pointer {timePeriod === '3Y' class="p-2 px-5 cursor-pointer {timePeriod === '3Y'
? 'text-white bg-primary/90' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
3 Years 3 Years
</a> </a>
<a <a
href="/market-mover/losers/5Y" href="/market-mover/losers/5Y"
class="p-2 px-5 cursor-pointer {timePeriod === '5Y' class="p-2 px-5 cursor-pointer {timePeriod === '5Y'
? 'text-white bg-primary/90' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
5 Years 5 Years
</a> </a>

8
src/routes/market-mover/premarket/+layout.svelte
View File

@ -37,16 +37,16 @@
<a <a
href="/market-mover/premarket/gainers" href="/market-mover/premarket/gainers"
class="p-2 px-5 cursor-pointer {categoryType === 'gainers' class="p-2 px-5 cursor-pointer {categoryType === 'gainers'
? 'text-white bg-primary/90' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
Gainers Gainers
</a> </a>
<a <a
href="/market-mover/premarket/losers" href="/market-mover/premarket/losers"
class="p-2 px-5 cursor-pointer {categoryType === 'losers' class="p-2 px-5 cursor-pointer {categoryType === 'losers'
? 'text-white bg-primary/90' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
Losers Losers
</a> </a>

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

@ -65,8 +65,8 @@
href={`/stocks/${$stockTicker}/forecast`} href={`/stocks/${$stockTicker}/forecast`}
on:click={() => changeSubSection("overview")} on:click={() => changeSubSection("overview")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'overview' class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
? 'text-white bg-primary/90' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
Overview Overview
</a> </a>
@ -75,8 +75,8 @@
href={`/stocks/${$stockTicker}/forecast/analyst`} href={`/stocks/${$stockTicker}/forecast/analyst`}
on:click={() => changeSubSection("analyst")} on:click={() => changeSubSection("analyst")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'analyst' class="p-2 px-5 cursor-pointer {displaySubSection === 'analyst'
? 'text-white bg-primary/90' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
Analysts Ratings Analysts Ratings
</a> </a>
@ -84,8 +84,8 @@
href={`/stocks/${$stockTicker}/forecast/ai`} href={`/stocks/${$stockTicker}/forecast/ai`}
on:click={() => changeSubSection("ai")} on:click={() => changeSubSection("ai")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'ai' class="p-2 px-5 cursor-pointer {displaySubSection === 'ai'
? 'text-white bg-primary/90' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
AI Forecast AI Forecast
</a> </a>

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

@ -41,7 +41,7 @@
} }
</script> </script>
<section class="w-auto bg-default overflow-hidden text-black h-full"> <section class="w-auto overflow-hidden h-full">
<div class="m-auto h-full overflow-hidden"> <div class="m-auto h-full overflow-hidden">
<main class="w-full"> <main class="w-full">
<div class="m-auto"> <div class="m-auto">
@ -53,8 +53,8 @@
href={`/stocks/${$stockTicker}/statistics`} href={`/stocks/${$stockTicker}/statistics`}
on:click={() => changeSubSection("overview")} on:click={() => changeSubSection("overview")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'overview' class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
? 'text-white bg-primary/90' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
Overview Overview
</a> </a>
@ -63,8 +63,8 @@
href={`/stocks/${$stockTicker}/statistics/market-cap`} href={`/stocks/${$stockTicker}/statistics/market-cap`}
on:click={() => changeSubSection("market-cap")} on:click={() => changeSubSection("market-cap")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'market-cap' class="p-2 px-5 cursor-pointer {displaySubSection === 'market-cap'
? 'text-white bg-primary/90' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
Market Cap Market Cap
</a> </a>
@ -73,8 +73,8 @@
href={`/stocks/${$stockTicker}/statistics/revenue`} href={`/stocks/${$stockTicker}/statistics/revenue`}
on:click={() => changeSubSection("revenue")} on:click={() => changeSubSection("revenue")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'revenue' class="p-2 px-5 cursor-pointer {displaySubSection === 'revenue'
? 'text-white bg-primary/90' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
Revenue Revenue
</a> </a>
@ -84,8 +84,8 @@
on:click={() => changeSubSection("price-reaction")} on:click={() => changeSubSection("price-reaction")}
class="p-2 px-5 cursor-pointer {displaySubSection === class="p-2 px-5 cursor-pointer {displaySubSection ===
'price-reaction' 'price-reaction'
? 'text-white bg-primary/90' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
Price Reaction Price Reaction
</a> </a>
@ -95,8 +95,8 @@
on:click={() => changeSubSection("fail-to-deliver")} on:click={() => changeSubSection("fail-to-deliver")}
class="p-2 px-5 cursor-pointer {displaySubSection === class="p-2 px-5 cursor-pointer {displaySubSection ===
'fail-to-deliver' 'fail-to-deliver'
? 'text-white bg-primary/90' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
Fail-to-Deliver Fail-to-Deliver
</a> </a>

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

File diff suppressed because it is too large Load Diff

30
src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte
View File

@ -83,20 +83,18 @@
<aside class="inline-block relative w-full lg:w-1/4 mt-3"> <aside class="inline-block relative w-full lg:w-1/4 mt-3">
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) || data?.user?.freeTrial} {#if !["Pro", "Plus"]?.includes(data?.user?.tier) || data?.user?.freeTrial}
<div <div
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100" class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
> >
<a <a
href="/pricing" href="/pricing"
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0" class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
> >
<div class="w-full flex justify-between items-center p-3 mt-3"> <div class="w-full flex justify-between items-center p-3 mt-3">
<h2 <h2 class="text-start text-xl font-semibold sm:ml-3">
class="text-start text-xl font-semibold text-white sm:ml-3"
>
Pro Subscription Pro Subscription
</h2> </h2>
</div> </div>
<span class="text-white p-3 sm:ml-3 sm:mr-3 -mt-4"> <span class=" p-3 sm:ml-3 sm:mr-3 -mt-4">
Upgrade now for unlimited access to all data and tools. Upgrade now for unlimited access to all data and tools.
</span> </span>
</a> </a>
@ -104,12 +102,12 @@
{/if} {/if}
<div <div
class="w-full p-2 text-white border border-gray-600 bg-inherit rounded-md h-fit pb-4 mt-4" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4"
> >
<h3 class="p-2 pt-4 text-xl font-semibold"> <h3 class="p-2 pt-4 text-xl font-semibold">
Market Capitalization Market Capitalization
</h3> </h3>
<div class="text-white p-2"> <div class=" p-2">
Market capitalization, also called net worth, is the total value Market capitalization, also called net worth, is the total value
of all of a company's outstanding shares. It is calculated by of all of a company's outstanding shares. It is calculated by
multiplying the stock price by the number of shares outstanding. multiplying the stock price by the number of shares outstanding.
@ -120,7 +118,7 @@
<div class="px-2"> <div class="px-2">
<a <a
href="/blog/article/market-capitalization" href="/blog/article/market-capitalization"
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-2 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100" class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-white dark:text-black m-auto sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 bg-[#3B82F6] dark:bg-[#fff] transition duration-100"
> >
Full Definition Full Definition
</a> </a>
@ -129,18 +127,18 @@
{#if similarStocks?.length > 0} {#if similarStocks?.length > 0}
<div <div
class="w-full p-2 text-white border border-gray-600 bg-inherit rounded-md h-fit pb-4 mt-4" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4"
> >
<h3 class="p-2 pt-4 text-xl font-semibold">Related Stocks</h3> <h3 class="p-2 pt-4 text-xl font-semibold">Related Stocks</h3>
<table class="table table-sm table-compact w-full text-white"> <table class="table table-sm table-compact w-full">
<thead class="text-white" <thead class="text-muted dark:text-white"
><tr ><tr
><th ><th
class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-left px-2" class="whitespace-nowrap border-b border-gray-300 dark:border-gray-600 font-semibold text-[1rem] text-left px-2"
>Company</th >Company</th
> >
<th <th
class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-right px-2" class="whitespace-nowrap border-b border-gray-300 dark:border-gray-600 font-semibold text-[1rem] text-right px-2"
>Market Cap</th >Market Cap</th
></tr ></tr
></thead ></thead
@ -149,14 +147,14 @@
{#each similarStocks?.slice(0, 8) as item, index} {#each similarStocks?.slice(0, 8) as item, index}
{#if item?.marketCap > 0} {#if item?.marketCap > 0}
<tr <tr
class="border-gray-800 text-[1rem] {index !== class="border-gray-300 dark:border-gray-800 text-[1rem] {index !==
similarStocks?.slice(0, 8).length - 1 similarStocks?.slice(0, 8).length - 1
? 'border-b' ? 'border-b'
: ''}" : ''}"
><td class="text-left text-[1rem] px-2" ><td class="text-left text-[1rem] px-2"
><a ><a
href={`/stocks/${item?.symbol}`} href={`/stocks/${item?.symbol}`}
class="sm:hover:text-white text-blue-400" class="text-blue-500 sm:hover:text-muted dark:sm:hover:text-white dark:text-blue-400"
>{item?.name}</a >{item?.name}</a
></td ></td
> >
@ -172,7 +170,7 @@
<div class="px-2"> <div class="px-2">
<a <a
href={capCategory?.link} href={capCategory?.link}
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100" class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-white dark:text-black m-auto sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 bg-[#3B82F6] dark:bg-[#fff] transition duration-100"
> >
{capCategory?.name} Rankings {capCategory?.name} Rankings
</a> </a>

135
src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
View File

@ -8,6 +8,7 @@
//import * as XLSX from 'xlsx'; //import * as XLSX from 'xlsx';
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import highcharts from "$lib/highcharts.ts"; import highcharts from "$lib/highcharts.ts";
import { mode } from "mode-watcher";
export let data; export let data;
@ -188,7 +189,6 @@
tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date)); tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
} }
let config = plotData();
tableList = filterEndOfYearDates(rawData); tableList = filterEndOfYearDates(rawData);
tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date)); tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
changePercentageYearAgo = computeYearOverYearChange(rawData); changePercentageYearAgo = computeYearOverYearChange(rawData);
@ -196,7 +196,7 @@
async function changeStatement(state) { async function changeStatement(state) {
timePeriod = state; timePeriod = state;
config = await plotData(); config = plotData();
} }
function filterDataByTimePeriod(rawData, timePeriod) { function filterDataByTimePeriod(rawData, timePeriod) {
@ -257,14 +257,14 @@
enabled: false, enabled: false,
}, },
chart: { chart: {
backgroundColor: "#09090B", backgroundColor: $mode === "light" ? "#fff" : "#09090B",
plotBackgroundColor: "#09090B", plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
height: 360, // Set the maximum height for the chart height: 360, // Set the maximum height for the chart
}, },
title: { title: {
text: `<h3 class="mt-3 mb-1 ">${$stockTicker} Market Cap</h3>`, text: `<h3 class="mt-3 mb-1 ">${$stockTicker} Market Cap</h3>`,
style: { style: {
color: "white", color: $mode === "light" ? "black" : "white",
// Using inline CSS for margin-top and margin-bottom // Using inline CSS for margin-top and margin-bottom
}, },
useHTML: true, // Enable HTML to apply custom class styling useHTML: true, // Enable HTML to apply custom class styling
@ -274,13 +274,13 @@
endOnTick: false, endOnTick: false,
categories: filteredData?.dates, categories: filteredData?.dates,
crosshair: { crosshair: {
color: "#fff", // Set the color of the crosshair line color: $mode === "light" ? "black" : "white", // Set the color of the crosshair line
width: 1, // Adjust the line width as needed width: 1, // Adjust the line width as needed
dashStyle: "Solid", dashStyle: "Solid",
}, },
labels: { labels: {
style: { style: {
color: "#fff", color: $mode === "light" ? "black" : "white",
}, },
distance: 20, // Increases space between label and axis distance: 20, // Increases space between label and axis
formatter: function () { formatter: function () {
@ -306,9 +306,9 @@
}, },
yAxis: { yAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: "#111827", gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
labels: { labels: {
style: { color: "white" }, style: { color: $mode === "light" ? "black" : "white" },
}, },
title: { text: null }, title: { text: null },
opposite: true, opposite: true,
@ -327,7 +327,7 @@
borderRadius: 4, borderRadius: 4,
formatter: function () { formatter: function () {
// Format the x value to display time in hh:mm format // Format the x value to display time in hh:mm format
let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">${new Date( let tooltipContent = `<span class=" m-auto text-[1rem] font-[501]">${new Date(
this?.x, this?.x,
).toLocaleDateString("en-US", { ).toLocaleDateString("en-US", {
year: "numeric", year: "numeric",
@ -337,8 +337,8 @@
// Loop through each point in the shared tooltip // Loop through each point in the shared tooltip
this.points.forEach((point) => { this.points.forEach((point) => {
tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span> tooltipContent += `<span class=" font-semibold text-sm">${point.series.name}:</span>
<span class="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumber( <span class=" font-normal text-sm">${abbreviateNumber(
point.y, point.y,
)}</span><br>`; )}</span><br>`;
}); });
@ -365,7 +365,7 @@
name: "Mkt Cap", name: "Mkt Cap",
type: "area", type: "area",
data: filteredData?.marketCapList, data: filteredData?.marketCapList,
color: "#fff", color: $mode === "light" ? "blue" : "white",
lineWidth: 1, lineWidth: 1,
marker: { marker: {
enabled: false, enabled: false,
@ -417,6 +417,13 @@
} }
}; };
let config = null;
$: {
if ($mode) {
config = plotData();
}
}
$: capCategory = getMarketCapCategory(data?.getStockQuote?.marketCap); $: capCategory = getMarketCapCategory(data?.getStockQuote?.marketCap);
</script> </script>
@ -425,7 +432,7 @@
description={`Historical Market Cap of ${$displayCompanyName}.`} description={`Historical Market Cap of ${$displayCompanyName}.`}
/> />
<section class="bg-default w-full overflow-hidden text-white h-full"> <section class=" w-full overflow-hidden h-full">
<div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden"> <div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
<div <div
class="w-full relative flex justify-center items-center overflow-hidden" class="w-full relative flex justify-center items-center overflow-hidden"
@ -433,7 +440,7 @@
<main class="w-full"> <main class="w-full">
<div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0"> <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
<div class=""> <div class="">
<h1 class="text-xl sm:text-2xl text-white font-bold"> <h1 class="text-xl sm:text-2xl font-bold">
{removeCompanyStrings($displayCompanyName)} Market Cap {removeCompanyStrings($displayCompanyName)} Market Cap
</h1> </h1>
</div> </div>
@ -463,31 +470,29 @@
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6 mt-3" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6 mt-3"
> >
<div <div
class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors" class="shadow-md bg-gray-100 dark:bg-gray-800/30 rounded-lg p-4 transition-colors"
> >
<div class="text-[#c3c6d0] text-sm mb-2 flex items-center"> <div class=" text-sm mb-2 flex items-center">
<span>Market Cap</span> <span>Market Cap</span>
<span class="ml-1 text-violet-400">●</span>
</div> </div>
<div class="flex items-baseline"> <div class="flex items-baseline">
<span class="text-xl font-bold text-white"> <span class="text-xl font-bold">
{abbreviateNumber(data?.getStockQuote?.marketCap)}</span {abbreviateNumber(data?.getStockQuote?.marketCap)}</span
> >
</div> </div>
</div> </div>
<div <div
class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors" class="shadow-md bg-gray-100 dark:bg-gray-800/30 rounded-lg p-4 transition-colors"
> >
<div class="text-[#c3c6d0] text-sm mb-2 flex items-center"> <div class=" text-sm mb-2 flex items-center">
<span>Category</span> <span>Category</span>
<span class="ml-1 text-red-400">●</span>
</div> </div>
<div class="flex items-baseline"> <div class="flex items-baseline">
<span class="text-xl font-bold text-white" <span class="text-xl font-bold"
>{#if capCategory} >{#if capCategory}
<a <a
class="sm:hover:text-white text-blue-400" class="text-blue-500 sm:hover:text-muted dark:sm:hover:text-white dark:text-blue-400"
href={capCategory.link} href={capCategory.link}
> >
{capCategory.name} {capCategory.name}
@ -500,14 +505,13 @@
</div> </div>
<div <div
class="bg-gray-800/30 rounded p-4 sm:hover:bg-gray-800/40 transition-colors" class="shadow-md bg-gray-100 dark:bg-gray-800/30 rounded-lg p-4 transition-colors"
> >
<div class="text-[#c3c6d0] text-sm mb-2 flex items-center"> <div class=" text-sm mb-2 flex items-center">
<span>1-Year Change</span> <span>1-Year Change</span>
<span class="ml-1">●</span>
</div> </div>
<div class="flex items-baseline"> <div class="flex items-baseline">
<span class="text-xl font-bold text-white" <span class="text-xl font-bold"
>{changePercentageYearAgo > 100 >{changePercentageYearAgo > 100
? "> 100" ? "> 100"
: changePercentageYearAgo?.toFixed(1)}%</span : changePercentageYearAgo?.toFixed(1)}%</span
@ -516,11 +520,11 @@
<span <span
class="text-sm {changePercentageYearAgo >= 0 && class="text-sm {changePercentageYearAgo >= 0 &&
changePercentageYearAgo !== null changePercentageYearAgo !== null
? "before:content-['+'] text-[#00FC50]" ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: changePercentageYearAgo < 0 && : changePercentageYearAgo < 0 &&
changePercentageYearAgo !== null changePercentageYearAgo !== null
? 'text-[#FF2F1F]' ? 'text-red-600 dark:text-[#FF2F1F]'
: 'text-white'}" : ''}"
> >
{changePercentageYearAgo >= 0 ? "Positive" : "Negative"} {changePercentageYearAgo >= 0 ? "Positive" : "Negative"}
Trend Trend
@ -533,9 +537,7 @@
<div <div
class="flex flex-col sm:flex-row items-start sm:items-center w-full" class="flex flex-col sm:flex-row items-start sm:items-center w-full"
> >
<h2 <h2 class="mb-3 sm:mb-0 text-xl sm:text-2xl font-bold">
class="mb-3 sm:mb-0 text-xl sm:text-2xl text-white font-bold"
>
Market Cap Chart Market Cap Chart
</h2> </h2>
@ -547,9 +549,9 @@
<DropdownMenu.Trigger asChild let:builder> <DropdownMenu.Trigger asChild let:builder>
<Button <Button
builders={[builder]} builders={[builder]}
class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate" class="w-full shadow-sm border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 rounded-md truncate"
> >
<span class="truncate text-white text-xs sm:text-sm" <span class="truncate text-xs sm:text-sm"
>{timePeriod}</span >{timePeriod}</span
> >
<svg <svg
@ -570,50 +572,52 @@
<DropdownMenu.Content <DropdownMenu.Content
class="w-56 h-fit max-h-72 overflow-y-auto scroller" class="w-56 h-fit max-h-72 overflow-y-auto scroller"
> >
<DropdownMenu.Label class="text-gray-400"> <DropdownMenu.Label
class="text-muted dark:text-gray-400"
>
Select time frame Select time frame
</DropdownMenu.Label> </DropdownMenu.Label>
<DropdownMenu.Separator /> <DropdownMenu.Separator />
<DropdownMenu.Group> <DropdownMenu.Group>
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => changeStatement("1M")} on:click={() => changeStatement("1M")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
1 Month 1 Month
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => changeStatement("6M")} on:click={() => changeStatement("6M")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
6 Months 6 Months
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => changeStatement("1Y")} on:click={() => changeStatement("1Y")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
1 Year 1 Year
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => changeStatement("3Y")} on:click={() => changeStatement("3Y")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
3 Years 3 Years
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => changeStatement("5Y")} on:click={() => changeStatement("5Y")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
5 Years 5 Years
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => changeStatement("10Y")} on:click={() => changeStatement("10Y")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
10 Years 10 Years
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => changeStatement("Max")} on:click={() => changeStatement("Max")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
Max Max
</DropdownMenu.Item> </DropdownMenu.Item>
@ -623,11 +627,9 @@
</div> </div>
<Button <Button
on:click={() => exportData("csv")} on:click={() => exportData("csv")}
class="ml-2 w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate" class="ml-2 w-full shadow-sm border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 rounded-md truncate"
> >
<span class="truncate text-white text-xs sm:text-sm" <span class="truncate text-xs sm:text-sm">Download</span>
>Download</span
>
<svg <svg
class="{['Pro', 'Plus']?.includes(data?.user?.tier) class="{['Pro', 'Plus']?.includes(data?.user?.tier)
? 'hidden' ? 'hidden'
@ -644,14 +646,14 @@
</div> </div>
<div <div
class="chart border border-gray-800 rounded" class="chart border border-gray-300 shadow-sm dark:border-gray-800 rounded"
use:highcharts={config} use:highcharts={config}
></div> ></div>
<div <div
class=" flex flex-col sm:flex-row items-start sm:items-center w-full justify-between" class=" flex flex-col sm:flex-row items-start sm:items-center w-full justify-between"
> >
<h3 class="text-xl sm:text-2xl text-white font-bold"> <h3 class="text-xl sm:text-2xl font-bold">
Market Cap History Market Cap History
</h3> </h3>
@ -659,7 +661,7 @@
class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto" class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto"
> >
<div <div
class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4" class="bg-gray-300 dark:bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
> >
{#each tabs as item, i} {#each tabs as item, i}
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0} {#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
@ -697,7 +699,7 @@
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx === class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
i i
? 'text-black' ? 'text-black'
: 'text-white'}" : ''}"
> >
{item.title} {item.title}
</span> </span>
@ -710,30 +712,23 @@
<div class="w-full overflow-x-auto"> <div class="w-full overflow-x-auto">
<table <table
class="table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md w-full m-auto mt-4" class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto mt-4"
> >
<thead class="bg-default"> <thead class="text-muted dark:text-white">
<tr> <tr>
<th class="text-white font-semibold text-start text-sm" <th class=" font-semibold text-start text-sm">Date</th>
>Date</th <th class=" font-semibold text-end text-sm">Market Cap</th
>
<th class="text-white font-semibold text-end text-sm"
>Market Cap</th
>
<th class="text-white font-semibold text-end text-sm"
>% Change</th
> >
<th class=" font-semibold text-end text-sm">% Change</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each tableList as item, index} {#each tableList as item, index}
<!-- row --> <!-- row -->
<tr <tr
class="sm:hover:bg-[#245073]/10 odd:bg-odd border-b border-gray-800" class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
> >
<td <td class=" text-sm sm:text-[1rem] whitespace-nowrap">
class="text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{new Date(item?.date)?.toLocaleDateString("en-US", { {new Date(item?.date)?.toLocaleDateString("en-US", {
day: "2-digit", // Include day number day: "2-digit", // Include day number
month: "short", // Display short month name month: "short", // Display short month name
@ -742,18 +737,18 @@
</td> </td>
<td <td
class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap" class=" text-sm sm:text-[1rem] text-right whitespace-nowrap"
> >
{@html abbreviateNumber(item?.marketCap, false, true)} {@html abbreviateNumber(item?.marketCap, false, true)}
</td> </td>
<td <td
class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-end" class=" text-sm sm:text-[1rem] whitespace-nowrap text-end"
> >
{#if index === tableList?.length - 1} {#if index === tableList?.length - 1}
n/a n/a
{:else if item?.marketCap > tableList[index + 1]?.marketCap} {:else if item?.marketCap > tableList[index + 1]?.marketCap}
<span class="text-[#00FC50]"> <span class="text-green-600 dark:text-[#00FC50]">
+{( +{(
((item?.marketCap - ((item?.marketCap -
tableList[index + 1]?.marketCap) / tableList[index + 1]?.marketCap) /
@ -762,7 +757,7 @@
)?.toFixed(2)}% )?.toFixed(2)}%
</span> </span>
{:else if item?.marketCap < tableList[index + 1]?.marketCap} {:else if item?.marketCap < tableList[index + 1]?.marketCap}
<span class="text-[#FF2F1F]"> <span class="text-red-600 dark:text-[#FF2F1F]">
-{( -{(
Math.abs( Math.abs(
(item?.marketCap - (item?.marketCap -