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

ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2025-03-11 01:59:12 +01:00
parent cac0e644cd
commit a996c5dcf7
9 changed files with 157 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,13 +20,13 @@
<aside class="hidden lg:block relative fixed w-1/4 mt-3"> <aside class="hidden lg:block relative fixed w-1/4 mt-3">
{#if newsList?.length !== 0} {#if newsList?.length !== 0}
<div <div
class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit" class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
> >
<div class="p-4 text-sm"> <div class="p-4 text-sm">
<h3 class="text-lg text-white font-semibold mb-3"> <h3 class="text-lg font-semibold mb-3">
{$stockTicker} News {$stockTicker} News
</h3> </h3>
<ul class="text-white"> <ul class="">
{#each newsList?.slice(0, 10) as item} {#each newsList?.slice(0, 10) as item}
<li class="mb-3 last:mb-1"> <li class="mb-3 last:mb-1">
{formatDate(item?.publishedDate)} &#183; {formatDate(item?.publishedDate)} &#183;

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

@ -68,59 +68,53 @@
description={`Get the latest dividend data for ${$displayCompanyName} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} description={`Get the latest dividend data for ${$displayCompanyName} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}
/> />
<section class="w-full bg-default overflow-hidden text-white h-full"> <section class="w-full overflow-hidden h-full">
<div class="w-full flex h-full overflow-hidden"> <div class="w-full flex 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"
> >
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0"> <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
<div class="w-full mb-6"> <div class="w-full mb-6">
<h1 class="text-xl sm:text-2xl text-gray-200 font-bold mb-4 w-full"> <h1 class="text-xl sm:text-2xl font-bold mb-4 w-full">Dividends</h1>
Dividends
</h1>
<Infobox text={htmlOutput} /> <Infobox text={htmlOutput} />
</div> </div>
{#if rawData?.history?.length !== 0} {#if rawData?.history?.length !== 0}
<div <div
class="mb-4 grid grid-cols-2 grid-rows-1 divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 md:grid-cols-3 md:grid-rows-1 divide-x" class="shadow-sm mb-4 grid grid-cols-2 grid-rows-1 divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 md:grid-cols-3 md:grid-rows-1 divide-x"
> >
<div class="p-4 bp:p-5 sm:p-6"> <div class="p-4 bp:p-5 sm:p-6">
<label <label
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]" class="mr-1 cursor-pointer flex flex-row items-center text-[1rem]"
> >
Dividend Yield Dividend Yield
</label> </label>
<div <div class="mt-1 break-words font-semibold leading-8 text-xl">
class="mt-1 break-words font-semibold leading-8 text-light text-xl"
>
{dividendYield !== "0.00" ? dividendYield : "0"}% {dividendYield !== "0.00" ? dividendYield : "0"}%
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6 border-b border-gray-600"> <div
class="p-4 bp:p-5 sm:p-6 border-b border-gray-300 dark:border-gray-600"
>
<label <label
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]" class="mr-1 cursor-pointer flex flex-row items-center text-[1rem]"
> >
Annual Dividend Annual Dividend
</label> </label>
<div <div class="mt-1 break-words font-semibold leading-8 text-xl">
class="mt-1 break-words font-semibold leading-8 text-light text-xl"
>
{annualDividend !== "0.00" ? annualDividend : "0"} {annualDividend !== "0.00" ? annualDividend : "0"}
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6 border-none"> <div class="p-4 bp:p-5 sm:p-6 border-t border-b sm:border-none">
<label <label
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]" class="mr-1 cursor-pointer flex flex-row items-center text-[1rem]"
> >
Ex-Dividend Date Ex-Dividend Date
</label> </label>
<div <div class="mt-1 break-words font-semibold leading-8 text-xl">
class="mt-1 break-words font-semibold leading-8 text-light text-xl"
>
{new Date(exDividendDate)?.toLocaleString("en-US", { {new Date(exDividendDate)?.toLocaleString("en-US", {
month: "short", month: "short",
day: "numeric", day: "numeric",
@ -132,53 +126,47 @@
<div class="p-4 bp:p-5 sm:p-6 border-t"> <div class="p-4 bp:p-5 sm:p-6 border-t">
<label <label
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]" class="mr-1 cursor-pointer flex flex-row items-center text-[1rem]"
> >
Payout Frequency Payout Frequency
</label> </label>
<div <div class="mt-1 break-words font-semibold leading-8 text-xl">
class="mt-1 break-words font-semibold leading-8 text-light text-xl"
>
{payoutFrequency ? payoutFrequency : "n/a"} {payoutFrequency ? payoutFrequency : "n/a"}
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6"> <div class="p-4 bp:p-5 sm:p-6">
<label <label
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]" class="mr-1 cursor-pointer flex flex-row items-center text-[1rem]"
> >
Payout Ratio Payout Ratio
</label> </label>
<div <div class="mt-1 break-words font-semibold leading-8 text-xl">
class="mt-1 break-words font-semibold leading-8 text-light text-xl"
>
{payoutRatio !== "0.00" && payoutRatio !== null {payoutRatio !== "0.00" && payoutRatio !== null
? payoutRatio + "%" ? payoutRatio + "%"
: "n/a"} : "n/a"}
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6 border-t border-gray-600"> <div
class="p-4 bp:p-5 sm:p-6 border-t border-gray-300 dark:border-gray-600"
>
<label <label
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]" class="mr-1 cursor-pointer flex flex-row items-center text-[1rem]"
> >
Dividend Growth Dividend Growth
</label> </label>
<div <div class="mt-1 break-words font-semibold leading-8 text-xl">
class="mt-1 break-words font-semibold leading-8 text-light text-xl"
>
{dividendGrowth ? dividendGrowth + "%" : "n/a"} {dividendGrowth ? dividendGrowth + "%" : "n/a"}
</div> </div>
</div> </div>
</div> </div>
<div <div
class="flex flex-col sm:flex-row items-start sm:items-center w-full mt-5 mb-8" class="flex flex-col sm:flex-row items-start sm:items-center w-full mt-5 mb-4"
> >
<h2 class="text-xl sm:text-2xl text-white font-bold"> <h2 class="text-xl sm:text-2xl font-bold">Dividends History</h2>
Dividends History
</h2>
</div> </div>
{#if rawData?.history?.length !== 0} {#if rawData?.history?.length !== 0}
@ -186,32 +174,32 @@
class="overflow-x-auto no-scrollbar flex justify-start items-center w-full m-auto rounded-none sm:rounded-md mb-4" class="overflow-x-auto no-scrollbar flex justify-start items-center w-full m-auto rounded-none sm:rounded-md mb-4"
> >
<table <table
class="table table-sm table-compact bg-table border border-gray-800 flex justify-start items-center w-full m-auto" 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"
> >
<thead class="bg-default"> <thead class="text-muted dark:text-white">
<tr class=""> <tr class="">
<th class="text-start text-white text-sm font-semibold"> <th class="text-start text-sm font-semibold">
Ex-Dividend Date Ex-Dividend Date
</th> </th>
<th class="text-end text-white text-sm font-semibold"> <th class="text-end text-sm font-semibold">
Cash Amount Cash Amount
</th> </th>
<th class="text-end text-white text-sm font-semibold"> <th class="text-end text-sm font-semibold">
Declaration Date Declaration Date
</th> </th>
<th class="text-end text-white text-sm font-semibold"> <th class="text-end text-sm font-semibold">
Record Date Record Date
</th> </th>
<th class="text-end text-white text-sm font-semibold"> <th class="text-end text-sm font-semibold"> Pay Date </th>
Pay Date
</th>
</tr> </tr>
</thead> </thead>
<tbody class=""> <tbody class="">
{#each rawData?.history as item} {#each rawData?.history as item}
<tr class="text-white odd:bg-odd"> <tr
class=" dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
>
<td <td
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
> >
{new Date(item?.date)?.toLocaleString("en-US", { {new Date(item?.date)?.toLocaleString("en-US", {
month: "short", month: "short",
@ -221,12 +209,12 @@
})} })}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
${item?.adjDividend?.toFixed(3)} ${item?.adjDividend?.toFixed(3)}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.declarationDate?.length !== 0 {item?.declarationDate?.length !== 0
? new Date(item?.declarationDate)?.toLocaleString( ? new Date(item?.declarationDate)?.toLocaleString(
@ -241,7 +229,7 @@
: "n/a"} : "n/a"}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.recordDate?.length !== 0 {item?.recordDate?.length !== 0
? new Date(item?.recordDate)?.toLocaleString( ? new Date(item?.recordDate)?.toLocaleString(
@ -256,7 +244,7 @@
: "n/a"} : "n/a"}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.paymentDate?.length !== 0 {item?.paymentDate?.length !== 0
? new Date(item?.paymentDate)?.toLocaleString( ? new Date(item?.paymentDate)?.toLocaleString(

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

@ -275,7 +275,7 @@
/> />
<section <section
class="bg-default overflow-hidden text-white h-full min-h-screen mb-20 sm:mb-0 w-full mt-2 sm:mt-0" class=" overflow-hidden h-full min-h-screen mb-20 sm:mb-0 w-full mt-2 sm:mt-0"
> >
<div class="w-full overflow-hidden m-auto mt-5"> <div class="w-full overflow-hidden m-auto mt-5">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden"> <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
@ -298,11 +298,9 @@
<DropdownMenu.Trigger asChild let:builder> <DropdownMenu.Trigger asChild let:builder>
<Button <Button
builders={[builder]} builders={[builder]}
class="w-fit sm: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="shadow-sm w-fit 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 px-1" <span class="truncate px-1">{timePeriod}</span>
>{timePeriod}</span
>
<svg <svg
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block" class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
viewBox="0 0 20 20" viewBox="0 0 20 20"
@ -321,20 +319,20 @@
<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={() => (timePeriod = "Daily")} on:click={() => (timePeriod = "Daily")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
Daily Daily
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => (timePeriod = "Weekly")} on:click={() => (timePeriod = "Weekly")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
Weekly Weekly
</DropdownMenu.Item> </DropdownMenu.Item>
@ -342,7 +340,7 @@
{#each ["Monthly", "Quarterly", "Annual"] as entry} {#each ["Monthly", "Quarterly", "Annual"] as entry}
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => goto("/pricing")} on:click={() => goto("/pricing")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
{entry} {entry}
<svg <svg
@ -350,7 +348,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
fill="#A3A3A3" fill="currentColor"
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
/></svg /></svg
> >
@ -359,19 +357,19 @@
{:else} {:else}
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => (timePeriod = "Monthly")} on:click={() => (timePeriod = "Monthly")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
Monthly Monthly
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => (timePeriod = "Quarterly")} on:click={() => (timePeriod = "Quarterly")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
Quarterly Quarterly
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => (timePeriod = "Annual")} on:click={() => (timePeriod = "Annual")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
Annual Annual
</DropdownMenu.Item> </DropdownMenu.Item>
@ -383,9 +381,9 @@
<Button <Button
on:click={() => exportData()} on:click={() => exportData()}
class="ml-2 w-fit 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="shadow-sm ml-2 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">Download</span> <span class="truncate">Download</span>
<svg <svg
class="{['Pro', 'Plus']?.includes(data?.user?.tier) class="{['Pro', 'Plus']?.includes(data?.user?.tier)
? 'hidden' ? 'hidden'
@ -393,7 +391,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
fill="#A3A3A3" fill="currentColor"
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
/></svg /></svg
> >
@ -406,7 +404,7 @@
class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto" class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto"
> >
<table <table
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto" 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"
> >
<thead> <thead>
<TableHeader {columns} {sortOrders} {sortData} /> <TableHeader {columns} {sortOrders} {sortData} />
@ -415,7 +413,7 @@
<tbody> <tbody>
{#each stockList as item, index} {#each stockList as item, index}
<tr <tr
class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd {index + class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
1 === 1 ===
rawData?.length && rawData?.length &&
!['Pro', 'Plus']?.includes(data?.user?.tier) !['Pro', 'Plus']?.includes(data?.user?.tier)
@ -423,7 +421,7 @@
: ''}" : ''}"
> >
<td <td
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
> >
{#if timePeriod === "Weekly"} {#if timePeriod === "Weekly"}
Week of {new Date(item?.time).toLocaleString( Week of {new Date(item?.time).toLocaleString(
@ -445,45 +443,45 @@
{/if} {/if}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.open?.toFixed(2)} {item?.open?.toFixed(2)}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.high?.toFixed(2)} {item?.high?.toFixed(2)}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.low?.toFixed(2)} {item?.low?.toFixed(2)}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.close?.toFixed(2)} {item?.close?.toFixed(2)}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.change !== null ? item?.change : "n/a"} {item?.change !== null ? item?.change : "n/a"}
</td> </td>
<td <td
class="text-sm sm:text-[1rem] {item?.changesPercentage >= class="text-sm sm:text-[1rem] {item?.changesPercentage >=
0 && item?.changesPercentage !== null 0 && item?.changesPercentage !== null
? "text-[#00FC50] before:content-['+'] " ? "text-green-600 dark:text-[#00FC50] before:content-['+'] "
: item?.changesPercentage < 0 && : item?.changesPercentage < 0 &&
item?.changesPercentage !== null item?.changesPercentage !== null
? 'text-red-600 dark:text-[#FF2F1F]' ? 'text-red-600 dark:text-[#FF2F1F]'
: 'text-white'} text-end" : ''} text-end"
> >
{item?.changesPercentage !== null {item?.changesPercentage !== null
? item?.changesPercentage + "%" ? item?.changesPercentage + "%"
: "n/a"} : "n/a"}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.volume?.toLocaleString("en-US")} {item?.volume?.toLocaleString("en-US")}
</td> </td>
@ -512,9 +510,7 @@
<h2 class="text-start text-xl font-semibold ml-3"> <h2 class="text-start text-xl font-semibold ml-3">
Stock Screener Stock Screener
</h2> </h2>
<ArrowLogo <ArrowLogo class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:" />
class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
/>
</div> </div>
<span class="p-3 ml-3 mr-3"> <span class="p-3 ml-3 mr-3">
Filter, sort and analyze all stocks to find your next Filter, sort and analyze all stocks to find your next
@ -532,9 +528,7 @@
> >
<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 class="text-start text-xl font-semibold ml-3">Watchlist</h2> <h2 class="text-start text-xl font-semibold ml-3">Watchlist</h2>
<ArrowLogo <ArrowLogo class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:" />
class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
/>
</div> </div>
<span class="p-3 ml-3 mr-3"> <span class="p-3 ml-3 mr-3">
Keep track of your favorite stocks in real-time. Keep track of your favorite stocks in real-time.

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

@ -55,14 +55,12 @@
<!-- Rest of the component remains the same --> <!-- Rest of the component remains the same -->
<section class="w-full bg-default overflow-hidden h-full"> <section class="w-full 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">
{#if names?.length > 0} {#if names?.length > 0}
<nav <nav class="ml-4 overflow-x-auto whitespace-nowrap">
class="sm:ml-4 pt-1 overflow-x-auto text-sm sm:text-[1rem] whitespace-nowrap"
>
<ul class="flex flex-row items-center w-full text-white"> <ul class="flex flex-row items-center w-full text-white">
{#each subsectionTitles as title} {#each subsectionTitles as title}
{@const sectionKey = title {@const sectionKey = title
@ -77,8 +75,8 @@
on:click={() => changeSubSection(sectionKey)} on:click={() => changeSubSection(sectionKey)}
class="p-2 px-5 cursor-pointer {displaySubSection === class="p-2 px-5 cursor-pointer {displaySubSection ===
sectionKey sectionKey
? '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'}"
> >
{title} {title}
</a> </a>

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

@ -72,14 +72,14 @@
description={`View unique business metrics for ${displayCompanyName} (${$stockTicker}) stock, including revenue breakdown, operating income, revenue by geography.`} description={`View unique business metrics for ${displayCompanyName} (${$stockTicker}) stock, including revenue breakdown, operating income, revenue by geography.`}
/> />
<section class="bg-default overflow-hidden text-white min-h-screen w-full"> <section class=" overflow-hidden min-h-screen w-full">
<div class="flex justify-center m-auto h-full overflow-hidden w-full"> <div class="flex justify-center m-auto h-full overflow-hidden w-full">
<div <div
class="relative flex justify-center items-center overflow-hidden w-full" class="relative flex justify-center items-center overflow-hidden w-full"
> >
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0"> <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
{#if revenueNames?.length !== 0 || geographicNames?.length !== 0} {#if revenueNames?.length !== 0 || geographicNames?.length !== 0}
<h2 class="mt-5 text-xl sm:text-2xl text-gray-200 font-bold mb-4"> <h2 class="mt-5 text-xl sm:text-2xl font-bold mb-4">
{$displayCompanyName} Revenue Breakdown {$displayCompanyName} Revenue Breakdown
</h2> </h2>
@ -87,17 +87,17 @@
class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto overflow-x-auto pr-5 sm:pr-0" class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto overflow-x-auto pr-5 sm:pr-0"
> >
<table <table
class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800" 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"
> >
<thead class="bg-default"> <thead class="text-muted dark:text-white">
<tr> <tr>
<th <th
class=" border-b border-gray-800 text-white font-semibold text-sm sm:text-[1rem] text-start" class=" border-b border-gray-300 dark:border-gray-800 font-semibold text-sm sm:text-[1rem] text-start"
>Quarter</th >Quarter</th
> >
{#each xData as item} {#each xData as item}
<th <th
class="z-20 border-b border-gray-800 text-white font-semibold text-sm text-center" class="z-20 border-b border-gray-300 dark:border-gray-800 font-semibold text-sm text-center"
>{new Date(item ?? null)?.toLocaleString("en-US", { >{new Date(item ?? null)?.toLocaleString("en-US", {
month: "short", month: "short",
day: "numeric", day: "numeric",
@ -109,20 +109,20 @@
</thead> </thead>
<tbody class="shadow-md"> <tbody class="shadow-md">
{#each revenueNames as name, index} {#each revenueNames as name, index}
<tr class="bg-table odd:bg-odd"> <tr class=" odd:bg-[#F6F7F8] dark:odd:bg-odd">
<th <th
class="whitespace-nowrap odd:bg-odd text-sm sm:text-[1rem] font-normal text-start border-b border-gray-800" class="whitespace-nowrap odd:bg-[#F6F7F8] dark:odd:bg-odd text-sm sm:text-[1rem] font-normal text-start border-b border-gray-300 dark:border-gray-800"
> >
<a <a
href={getHref(name)} href={getHref(name)}
class="sm:hover:text-blue-400 cursor-pointer underline underline-offset-4" class="sm:hover:text-blue-500 dark:sm:hover:text-blue-400 cursor-pointer underline underline-offset-4"
> >
{name} Revenue {name} Revenue
</a> </a>
</th> </th>
{#each categoryValues[index] as value} {#each categoryValues[index] as value}
<td <td
class="text-white text-sm sm:text-[1rem] text-end border-b border-gray-800" class=" text-sm sm:text-[1rem] text-end border-b border-gray-300 dark:border-gray-800"
> >
{@html value !== null && value !== undefined {@html value !== null && value !== undefined
? abbreviateNumber(value, false, true) ? abbreviateNumber(value, false, true)
@ -130,9 +130,9 @@
</td> </td>
{/each} {/each}
</tr> </tr>
<tr class="bg-table border-b-[#09090B]"> <tr class="">
<td <td
class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start bg-table border-b border-gray-800" class=" whitespace-nowrap text-sm sm:text-[1rem] text-start border-b border-gray-300 dark:border-gray-800"
> >
<span class="ml-2">{name} Revenue Growth</span> <span class="ml-2">{name} Revenue Growth</span>
</td> </td>
@ -142,7 +142,7 @@
? 'text-green-600 dark:text-[#00FC50]' ? 'text-green-600 dark:text-[#00FC50]'
: growthValue < 0 : growthValue < 0
? 'text-red-600 dark:text-[#FF2F1F]' ? 'text-red-600 dark:text-[#FF2F1F]'
: 'text-white'} border-b border-gray-800" : ''} border-b border-gray-300 dark:border-gray-800"
> >
{growthValue > 0 ? "+" : ""}{growthValue !== null && {growthValue > 0 ? "+" : ""}{growthValue !== null &&
growthValue !== undefined growthValue !== undefined
@ -157,7 +157,7 @@
</div> </div>
{#if geographicNames?.length !== 0} {#if geographicNames?.length !== 0}
<h2 class="mt-10 text-xl sm:text-2xl text-gray-200 font-bold mb-4"> <h2 class="mt-10 text-xl sm:text-2xl font-bold mb-4">
Revenue by Geography Revenue by Geography
</h2> </h2>
@ -165,17 +165,17 @@
class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto overflow-x-auto pr-5 sm:pr-0" class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto overflow-x-auto pr-5 sm:pr-0"
> >
<table <table
class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800" 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"
> >
<thead> <thead class="text-muted dark:text-white">
<tr> <tr>
<th <th
class="bg-default border-b border-gray-800 text-white font-semibold text-sm sm:text-[1rem] text-start" class="whitespace-nowrap dark:odd:bg-odd text-sm sm:text-[1rem] font-normal text-start border-b border-gray-300 dark:border-gray-800"
>Quarter</th >Quarter</th
> >
{#each geographicXData as item} {#each geographicXData as item}
<th <th
class="z-20 bg-default border-b border-gray-800 text-white font-semibold text-sm text-center bg-default" class="z-20 border-b border-gray-300 dark:border-gray-800 font-semibold text-sm text-center"
>{new Date(item ?? null)?.toLocaleString("en-US", { >{new Date(item ?? null)?.toLocaleString("en-US", {
month: "short", month: "short",
day: "numeric", day: "numeric",
@ -187,14 +187,14 @@
</thead> </thead>
<tbody class="shadow-md"> <tbody class="shadow-md">
{#each geographicNames as name, index} {#each geographicNames as name, index}
<tr class="bg-table border-b-[#09090B] odd:bg-odd"> <tr class=" odd:bg-[#F6F7F8] dark:odd:bg-odd">
<th <th
class="text-white whitespace-nowrap odd:bg-odd text-sm sm:text-[1rem] font-normal text-start border-b border-gray-800" class="whitespace-nowrap dark:odd:bg-odd text-sm sm:text-[1rem] font-normal text-start border-b border-gray-300 dark:border-gray-800"
>{name} Revenue</th >{name} Revenue</th
> >
{#each geographiCategoryValues[index] as value} {#each geographiCategoryValues[index] as value}
<td <td
class="text-white text-sm sm:text-[1rem] text-center border-b border-gray-800" class="whitespace-nowrap text-sm sm:text-[1rem] font-normal text-start border-b border-gray-300 dark:border-gray-800"
> >
{@html value !== null && {@html value !== null &&
value !== 0 && value !== 0 &&
@ -204,9 +204,9 @@
</td> </td>
{/each} {/each}
</tr> </tr>
<tr class="bg-table border-b-[#09090B]"> <tr>
<td <td
class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start bg-table border-b border-gray-800" class="whitespace-nowrap text-sm sm:text-[1rem] font-normal text-start border-b border-gray-300 dark:border-gray-800"
> >
<span class="ml-2">{name} Revenue Growth</span> <span class="ml-2">{name} Revenue Growth</span>
</td> </td>
@ -217,7 +217,7 @@
? 'text-green-600 dark:text-[#00FC50]' ? 'text-green-600 dark:text-[#00FC50]'
: growthValue < 0 : growthValue < 0
? 'text-red-600 dark:text-[#FF2F1F]' ? 'text-red-600 dark:text-[#FF2F1F]'
: 'text-white'} border-b border-gray-800" : ''} border-b border-gray-300 dark:border-gray-800"
> >
{growthValue > 0 ? "+" : ""}{growthValue !== null && {growthValue > 0 ? "+" : ""}{growthValue !== null &&
growthValue !== 0 && growthValue !== 0 &&
@ -234,7 +234,7 @@
{/if} {/if}
{#if operatingExpensesNames?.length !== 0} {#if operatingExpensesNames?.length !== 0}
<h2 class="mt-10 text-xl sm:text-2xl text-gray-200 font-bold mb-4"> <h2 class="mt-10 text-xl sm:text-2xl font-bold mb-4">
Operating Expense Breakdown Operating Expense Breakdown
</h2> </h2>
@ -242,17 +242,17 @@
class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto overflow-x-auto pr-5 sm:pr-0" class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto overflow-x-auto pr-5 sm:pr-0"
> >
<table <table
class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800" 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"
> >
<thead> <thead class="text-muted dark:text-white">
<tr> <tr>
<th <th
class="bg-default border-b border-gray-800 text-white font-semibold text-sm sm:text-[1rem] text-start" class=" border-b border-gray-300 dark:border-gray-800 font-semibold text-sm sm:text-[1rem] text-start"
>Quarter</th >Quarter</th
> >
{#each operatingExpensesXData as item} {#each operatingExpensesXData as item}
<th <th
class="z-20 bg-default border-b border-gray-800 text-white font-semibold text-sm text-center bg-default" class="z-20 border-b border-gray-300 dark:border-gray-800 font-semibold text-sm text-center"
>{new Date(item ?? null)?.toLocaleString("en-US", { >{new Date(item ?? null)?.toLocaleString("en-US", {
month: "short", month: "short",
day: "numeric", day: "numeric",
@ -264,14 +264,14 @@
</thead> </thead>
<tbody class="shadow-md"> <tbody class="shadow-md">
{#each operatingExpensesNames as name, index} {#each operatingExpensesNames as name, index}
<tr class="bg-table border-b-[#09090B] odd:bg-odd"> <tr class=" odd:bg-[#F6F7F8] dark:odd:bg-odd">
<th <th
class="text-white whitespace-nowrap odd:bg-odd text-sm sm:text-[1rem] font-normal text-start border-b border-gray-800" class="whitespace-nowrap odd:bg-[#F6F7F8] dark:odd:bg-odd text-sm sm:text-[1rem] font-normal text-start border-b border-gray-300 dark:border-gray-800"
>{name} Revenue</th >{name} Revenue</th
> >
{#each operatingExpensesCategoryValues[index] as value} {#each operatingExpensesCategoryValues[index] as value}
<td <td
class="text-white text-sm sm:text-[1rem] text-center border-b border-gray-800" class=" whitespace-nowrap text-sm sm:text-[1rem] text-start border-b border-gray-300 dark:border-gray-800"
> >
{@html value !== null && {@html value !== null &&
value !== 0 && value !== 0 &&
@ -281,9 +281,9 @@
</td> </td>
{/each} {/each}
</tr> </tr>
<tr class="bg-table border-b-[#09090B]"> <tr class="">
<td <td
class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start bg-table border-b border-gray-800" class="whitespace-nowrap text-sm sm:text-[1rem] font-normal text-start border-b border-gray-300 dark:border-gray-800"
> >
<span class="ml-2">{name} Revenue Growth</span> <span class="ml-2">{name} Revenue Growth</span>
</td> </td>
@ -294,7 +294,7 @@
? 'text-green-600 dark:text-[#00FC50]' ? 'text-green-600 dark:text-[#00FC50]'
: growthValue < 0 : growthValue < 0
? 'text-red-600 dark:text-[#FF2F1F]' ? 'text-red-600 dark:text-[#FF2F1F]'
: 'text-white'} border-b border-gray-800" : ''} border-b border-gray-300 dark:border-gray-800"
> >
{growthValue > 0 ? "+" : ""}{growthValue !== null && {growthValue > 0 ? "+" : ""}{growthValue !== null &&
growthValue !== 0 && growthValue !== 0 &&

77
src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
View File

@ -7,6 +7,7 @@
} from "$lib/utils"; } from "$lib/utils";
import SEO from "$lib/components/SEO.svelte"; import SEO from "$lib/components/SEO.svelte";
import highcharts from "$lib/highcharts.ts"; import highcharts from "$lib/highcharts.ts";
import { mode } from "mode-watcher";
export let data; export let data;
@ -59,15 +60,15 @@
}, },
chart: { chart: {
type: "column", type: "column",
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
animation: false, animation: false,
}, },
title: { title: {
text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">${removeCompanyStrings($displayCompanyName)} Revenue by ${convertToTitleCase(data?.getParams)}</h3>`, text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">${removeCompanyStrings($displayCompanyName)} Revenue by ${convertToTitleCase(data?.getParams)}</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
@ -83,7 +84,7 @@
return `${monthNames[monthIndex]} '${year}`; return `${monthNames[monthIndex]} '${year}`;
}, },
style: { style: {
color: "#fff", color: $mode === "light" ? "black" : "white",
fontSize: "12px", fontSize: "12px",
}, },
rotation: 45, // Rotate labels for better readability rotation: 45, // Rotate labels for better readability
@ -92,9 +93,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,
@ -112,8 +113,8 @@
}, },
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 a custom 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",
@ -123,10 +124,10 @@
// 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="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumber( <span style="display:inline-block; width:10px; height:10px; background-color:${point.color}; border-radius:50%; margin-right:5px;"></span>
point.y, <span class="font-semibold text-sm">${point.series.name}:</span>
)}</span><br>`; <span class="font-normal text-sm">${abbreviateNumber(point.y)}</span><br>`;
}); });
return tooltipContent; return tooltipContent;
@ -153,7 +154,7 @@
{ {
name: "Revenue", name: "Revenue",
data: valueList, data: valueList,
color: "#fff", color: $mode === "light" ? "#2C6288" : "white",
}, },
], ],
legend: { legend: {
@ -165,7 +166,7 @@
} }
$: { $: {
if ($stockTicker && data?.getParams) { if (($stockTicker && data?.getParams) || $mode) {
dataset = []; dataset = [];
tableList = []; tableList = [];
// Find the index of the current getParams value in the names array // Find the index of the current getParams value in the names array
@ -193,7 +194,7 @@
description={`View unique business metrics for ${$displayCompanyName} (${$stockTicker}) stock, including revenue by segment, gross margin by type, gross profit by type.`} description={`View unique business metrics for ${$displayCompanyName} (${$stockTicker}) stock, including revenue by segment, gross margin by type, gross profit by type.`}
/> />
<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"
@ -201,48 +202,38 @@
<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 w-full"> <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0 w-full">
<div class="mb-3"> <div class="mb-3">
<h1 class="text-2xl text-gray-200 font-bold"> <h1 class="text-2xl font-bold">
{convertToTitleCase(data?.getParams)} Revenue {convertToTitleCase(data?.getParams)} Revenue
</h1> </h1>
</div> </div>
{#if rawData?.length !== 0} {#if rawData?.length !== 0}
<div <div
class="chart mt-5 sm:mt-0 border border-gray-800 rounded" class="chart mt-5 sm:mt-0 border border-gray-300 dark:border-gray-800 rounded"
use:highcharts={config} use:highcharts={config}
></div> ></div>
<h2 class="mt-5 text-xl sm:text-2xl text-white font-bold"> <h2 class="mt-5 text-xl sm:text-2xl font-bold">History</h2>
History
</h2>
<div class="w-full overflow-x-auto"> <div class="w-full overflow-x-auto">
<table <table
class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800 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 class="border-b border-gray-800"> <tr class="border-b border-gray-300 dark:border-gray-800">
<th class="text-white font-semibold text-start text-sm" <th class=" font-semibold text-start text-sm">Quarter</th>
>Quarter</th <th class=" font-semibold text-end text-sm">Value</th>
> <th class=" font-semibold text-end text-sm"> Change </th>
<th class="text-white font-semibold text-end text-sm" <th class=" font-semibold text-end text-sm">Growth</th>
>Value</th
>
<th class="text-white font-semibold text-end text-sm">
Change
</th>
<th class="text-white font-semibold text-end text-sm"
>Growth</th
>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each tableList as item, index} {#each tableList as item, index}
<!-- row --> <!-- row -->
<tr class=" odd:bg-odd border-b border-gray-800"> <tr
<td class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
class="text-white text-sm sm:text-[1rem] whitespace-nowrap" >
> <td class=" text-sm sm:text-[1rem] whitespace-nowrap">
{new Date(item?.date ?? null)?.toLocaleString("en-US", { {new Date(item?.date ?? null)?.toLocaleString("en-US", {
month: "short", month: "short",
day: "numeric", day: "numeric",
@ -251,7 +242,7 @@
</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 item?.value !== null && item?.value !== undefined {@html item?.value !== null && item?.value !== undefined
? abbreviateNumber(item?.value, false, true) ? abbreviateNumber(item?.value, false, true)
@ -259,7 +250,7 @@
</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"
> >
{#if Number(item?.value - tableList[index + 1]?.value)} {#if Number(item?.value - tableList[index + 1]?.value)}
{@html abbreviateNumber( {@html abbreviateNumber(
@ -273,7 +264,7 @@
</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 item?.valueGrowth > 0} {#if item?.valueGrowth > 0}
<span class="text-green-600 dark:text-[#00FC50]"> <span class="text-green-600 dark:text-[#00FC50]">
@ -294,7 +285,7 @@
</div> </div>
{:else} {:else}
<h2 <h2
class="mt-16 flex justify-center items-center text-2xl text-white mb-5 m-auto" class="mt-16 flex justify-center items-center text-2xl mb-5 m-auto"
> >
No data available No data available
</h2> </h2>

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

@ -326,8 +326,8 @@
}, },
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 a custom format
let tooltipContent = `<span class=" m-auto 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,15 +337,16 @@
// 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=" font-semibold text-sm">${point.series.name}:</span> tooltipContent += `
<span class=" font-normal text-sm">${abbreviateNumber( <span style="display:inline-block; width:10px; height:10px; background-color:${point.color}; border-radius:50%; margin-right:5px;"></span>
point.y, <span class="font-semibold text-sm">${point.series.name}:</span>
)}</span><br>`; <span class="font-normal text-sm">${abbreviateNumber(point.y)}</span><br>`;
}); });
return tooltipContent; return tooltipContent;
}, },
}, },
plotOptions: { plotOptions: {
series: { series: {
color: "white", color: "white",

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

@ -49,7 +49,7 @@
<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 border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer 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 sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
> >
<a <a
href="/pricing" href="/pricing"

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

@ -142,8 +142,8 @@
}, },
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 a custom format
let tooltipContent = `<span class=" m-auto 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",
@ -153,10 +153,10 @@
// 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=" font-semibold text-sm">${point.series.name}:</span> tooltipContent += `
<span class=" font-normal text-sm">${abbreviateNumber( <span style="display:inline-block; width:10px; height:10px; background-color:${point.color}; border-radius:50%; margin-right:5px;"></span>
point.y, <span class="font-semibold text-sm">${point.series.name}:</span>
)}</span><br>`; <span class="font-normal text-sm">${abbreviateNumber(point.y)}</span><br>`;
}); });
return tooltipContent; return tooltipContent;
@ -196,7 +196,7 @@
} }
$: { $: {
if ($stockTicker) { if ($stockTicker || $mode) {
changeTablePeriod(0); changeTablePeriod(0);
changeTimePeriod(0); changeTimePeriod(0);
} }