ui fix
This commit is contained in:
MuslemRahimi
parent
cac0e644cd
commit
a996c5dcf7
@ -20,13 +20,13 @@
|
||||
<aside class="hidden lg:block relative fixed w-1/4 mt-3">
|
||||
{#if newsList?.length !== 0}
|
||||
<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">
|
||||
<h3 class="text-lg text-white font-semibold mb-3">
|
||||
<h3 class="text-lg font-semibold mb-3">
|
||||
{$stockTicker} News
|
||||
</h3>
|
||||
<ul class="text-white">
|
||||
<ul class="">
|
||||
{#each newsList?.slice(0, 10) as item}
|
||||
<li class="mb-3 last:mb-1">
|
||||
{formatDate(item?.publishedDate)} ·
|
||||
|
||||
@ -68,59 +68,53 @@
|
||||
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 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="w-full mb-6">
|
||||
<h1 class="text-xl sm:text-2xl text-gray-200 font-bold mb-4 w-full">
|
||||
Dividends
|
||||
</h1>
|
||||
<h1 class="text-xl sm:text-2xl font-bold mb-4 w-full">Dividends</h1>
|
||||
|
||||
<Infobox text={htmlOutput} />
|
||||
</div>
|
||||
|
||||
{#if rawData?.history?.length !== 0}
|
||||
<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">
|
||||
<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
|
||||
</label>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-light text-xl"
|
||||
>
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-xl">
|
||||
{dividendYield !== "0.00" ? dividendYield : "0"}%
|
||||
</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
|
||||
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
|
||||
</label>
|
||||
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-light text-xl"
|
||||
>
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-xl">
|
||||
{annualDividend !== "0.00" ? annualDividend : "0"}
|
||||
</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
|
||||
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
|
||||
</label>
|
||||
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-light text-xl"
|
||||
>
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-xl">
|
||||
{new Date(exDividendDate)?.toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
@ -132,53 +126,47 @@
|
||||
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-t">
|
||||
<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
|
||||
</label>
|
||||
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-light text-xl"
|
||||
>
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-xl">
|
||||
{payoutFrequency ? payoutFrequency : "n/a"}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bp:p-5 sm:p-6">
|
||||
<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
|
||||
</label>
|
||||
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-light text-xl"
|
||||
>
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-xl">
|
||||
{payoutRatio !== "0.00" && payoutRatio !== null
|
||||
? payoutRatio + "%"
|
||||
: "n/a"}
|
||||
</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
|
||||
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
|
||||
</label>
|
||||
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-light text-xl"
|
||||
>
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-xl">
|
||||
{dividendGrowth ? dividendGrowth + "%" : "n/a"}
|
||||
</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">
|
||||
Dividends History
|
||||
</h2>
|
||||
<h2 class="text-xl sm:text-2xl font-bold">Dividends History</h2>
|
||||
</div>
|
||||
|
||||
{#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"
|
||||
>
|
||||
<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="">
|
||||
<th class="text-start text-white text-sm font-semibold">
|
||||
<th class="text-start text-sm font-semibold">
|
||||
Ex-Dividend Date
|
||||
</th>
|
||||
<th class="text-end text-white text-sm font-semibold">
|
||||
<th class="text-end text-sm font-semibold">
|
||||
Cash Amount
|
||||
</th>
|
||||
<th class="text-end text-white text-sm font-semibold">
|
||||
<th class="text-end text-sm font-semibold">
|
||||
Declaration Date
|
||||
</th>
|
||||
<th class="text-end text-white text-sm font-semibold">
|
||||
<th class="text-end text-sm font-semibold">
|
||||
Record Date
|
||||
</th>
|
||||
<th class="text-end text-white text-sm font-semibold">
|
||||
Pay Date
|
||||
</th>
|
||||
<th class="text-end text-sm font-semibold"> Pay Date </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="">
|
||||
{#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
|
||||
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", {
|
||||
month: "short",
|
||||
@ -221,12 +209,12 @@
|
||||
})}
|
||||
</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)}
|
||||
</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
|
||||
? new Date(item?.declarationDate)?.toLocaleString(
|
||||
@ -241,7 +229,7 @@
|
||||
: "n/a"}
|
||||
</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
|
||||
? new Date(item?.recordDate)?.toLocaleString(
|
||||
@ -256,7 +244,7 @@
|
||||
: "n/a"}
|
||||
</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
|
||||
? new Date(item?.paymentDate)?.toLocaleString(
|
||||
|
||||
@ -275,7 +275,7 @@
|
||||
/>
|
||||
|
||||
<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="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||
@ -298,11 +298,9 @@
|
||||
<DropdownMenu.Trigger asChild let:builder>
|
||||
<Button
|
||||
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"
|
||||
>{timePeriod}</span
|
||||
>
|
||||
<span class="truncate px-1">{timePeriod}</span>
|
||||
<svg
|
||||
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
||||
viewBox="0 0 20 20"
|
||||
@ -321,20 +319,20 @@
|
||||
<DropdownMenu.Content
|
||||
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
|
||||
</DropdownMenu.Label>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Group>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => (timePeriod = "Daily")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||
>
|
||||
Daily
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => (timePeriod = "Weekly")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||
>
|
||||
Weekly
|
||||
</DropdownMenu.Item>
|
||||
@ -342,7 +340,7 @@
|
||||
{#each ["Monthly", "Quarterly", "Annual"] as entry}
|
||||
<DropdownMenu.Item
|
||||
on:click={() => goto("/pricing")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||
>
|
||||
{entry}
|
||||
<svg
|
||||
@ -350,7 +348,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><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"
|
||||
/></svg
|
||||
>
|
||||
@ -359,19 +357,19 @@
|
||||
{:else}
|
||||
<DropdownMenu.Item
|
||||
on:click={() => (timePeriod = "Monthly")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||
>
|
||||
Monthly
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => (timePeriod = "Quarterly")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||
>
|
||||
Quarterly
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => (timePeriod = "Annual")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||
>
|
||||
Annual
|
||||
</DropdownMenu.Item>
|
||||
@ -383,9 +381,9 @@
|
||||
|
||||
<Button
|
||||
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
|
||||
class="{['Pro', 'Plus']?.includes(data?.user?.tier)
|
||||
? 'hidden'
|
||||
@ -393,7 +391,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><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"
|
||||
/></svg
|
||||
>
|
||||
@ -406,7 +404,7 @@
|
||||
class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto"
|
||||
>
|
||||
<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>
|
||||
<TableHeader {columns} {sortOrders} {sortData} />
|
||||
@ -415,7 +413,7 @@
|
||||
<tbody>
|
||||
{#each stockList as item, index}
|
||||
<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 ===
|
||||
rawData?.length &&
|
||||
!['Pro', 'Plus']?.includes(data?.user?.tier)
|
||||
@ -423,7 +421,7 @@
|
||||
: ''}"
|
||||
>
|
||||
<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"}
|
||||
Week of {new Date(item?.time).toLocaleString(
|
||||
@ -445,45 +443,45 @@
|
||||
{/if}
|
||||
</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)}
|
||||
</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)}
|
||||
</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)}
|
||||
</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)}
|
||||
</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"}
|
||||
</td>
|
||||
<td
|
||||
class="text-sm sm:text-[1rem] {item?.changesPercentage >=
|
||||
0 && item?.changesPercentage !== null
|
||||
? "text-[#00FC50] before:content-['+'] "
|
||||
? "text-green-600 dark:text-[#00FC50] before:content-['+'] "
|
||||
: item?.changesPercentage < 0 &&
|
||||
item?.changesPercentage !== null
|
||||
? 'text-red-600 dark:text-[#FF2F1F]'
|
||||
: 'text-white'} text-end"
|
||||
: ''} text-end"
|
||||
>
|
||||
{item?.changesPercentage !== null
|
||||
? item?.changesPercentage + "%"
|
||||
: "n/a"}
|
||||
</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")}
|
||||
</td>
|
||||
@ -512,9 +510,7 @@
|
||||
<h2 class="text-start text-xl font-semibold ml-3">
|
||||
Stock Screener
|
||||
</h2>
|
||||
<ArrowLogo
|
||||
class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
|
||||
/>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:" />
|
||||
</div>
|
||||
<span class="p-3 ml-3 mr-3">
|
||||
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">
|
||||
<h2 class="text-start text-xl font-semibold ml-3">Watchlist</h2>
|
||||
<ArrowLogo
|
||||
class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
|
||||
/>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:" />
|
||||
</div>
|
||||
<span class="p-3 ml-3 mr-3">
|
||||
Keep track of your favorite stocks in real-time.
|
||||
|
||||
@ -55,14 +55,12 @@
|
||||
|
||||
<!-- 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">
|
||||
<main class="w-full">
|
||||
<div class="m-auto">
|
||||
{#if names?.length > 0}
|
||||
<nav
|
||||
class="sm:ml-4 pt-1 overflow-x-auto text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
<nav class="ml-4 overflow-x-auto whitespace-nowrap">
|
||||
<ul class="flex flex-row items-center w-full text-white">
|
||||
{#each subsectionTitles as title}
|
||||
{@const sectionKey = title
|
||||
@ -77,8 +75,8 @@
|
||||
on:click={() => changeSubSection(sectionKey)}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection ===
|
||||
sectionKey
|
||||
? 'text-white bg-primary/90'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
|
||||
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
|
||||
: '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}
|
||||
</a>
|
||||
|
||||
@ -72,14 +72,14 @@
|
||||
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="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">
|
||||
{#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
|
||||
</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"
|
||||
>
|
||||
<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>
|
||||
<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
|
||||
>
|
||||
{#each xData as item}
|
||||
<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", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
@ -109,20 +109,20 @@
|
||||
</thead>
|
||||
<tbody class="shadow-md">
|
||||
{#each revenueNames as name, index}
|
||||
<tr class="bg-table odd:bg-odd">
|
||||
<tr class=" odd:bg-[#F6F7F8] dark:odd:bg-odd">
|
||||
<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
|
||||
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
|
||||
</a>
|
||||
</th>
|
||||
{#each categoryValues[index] as value}
|
||||
<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
|
||||
? abbreviateNumber(value, false, true)
|
||||
@ -130,9 +130,9 @@
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="bg-table border-b-[#09090B]">
|
||||
<tr class="">
|
||||
<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>
|
||||
</td>
|
||||
@ -142,7 +142,7 @@
|
||||
? 'text-green-600 dark:text-[#00FC50]'
|
||||
: growthValue < 0
|
||||
? '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 !== undefined
|
||||
@ -157,7 +157,7 @@
|
||||
</div>
|
||||
|
||||
{#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
|
||||
</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"
|
||||
>
|
||||
<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>
|
||||
<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
|
||||
>
|
||||
{#each geographicXData as item}
|
||||
<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", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
@ -187,14 +187,14 @@
|
||||
</thead>
|
||||
<tbody class="shadow-md">
|
||||
{#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
|
||||
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
|
||||
>
|
||||
{#each geographiCategoryValues[index] as value}
|
||||
<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 &&
|
||||
value !== 0 &&
|
||||
@ -204,9 +204,9 @@
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="bg-table border-b-[#09090B]">
|
||||
<tr>
|
||||
<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>
|
||||
</td>
|
||||
@ -217,7 +217,7 @@
|
||||
? 'text-green-600 dark:text-[#00FC50]'
|
||||
: growthValue < 0
|
||||
? '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 &&
|
||||
@ -234,7 +234,7 @@
|
||||
{/if}
|
||||
|
||||
{#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
|
||||
</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"
|
||||
>
|
||||
<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>
|
||||
<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
|
||||
>
|
||||
{#each operatingExpensesXData as item}
|
||||
<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", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
@ -264,14 +264,14 @@
|
||||
</thead>
|
||||
<tbody class="shadow-md">
|
||||
{#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
|
||||
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
|
||||
>
|
||||
{#each operatingExpensesCategoryValues[index] as value}
|
||||
<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 &&
|
||||
value !== 0 &&
|
||||
@ -281,9 +281,9 @@
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="bg-table border-b-[#09090B]">
|
||||
<tr class="">
|
||||
<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>
|
||||
</td>
|
||||
@ -294,7 +294,7 @@
|
||||
? 'text-green-600 dark:text-[#00FC50]'
|
||||
: growthValue < 0
|
||||
? '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 &&
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
} from "$lib/utils";
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
import highcharts from "$lib/highcharts.ts";
|
||||
import { mode } from "mode-watcher";
|
||||
|
||||
export let data;
|
||||
|
||||
@ -59,15 +60,15 @@
|
||||
},
|
||||
chart: {
|
||||
type: "column",
|
||||
backgroundColor: "#09090B",
|
||||
plotBackgroundColor: "#09090B",
|
||||
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
|
||||
plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
|
||||
height: 360, // Set the maximum height for the chart
|
||||
animation: false,
|
||||
},
|
||||
title: {
|
||||
text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">${removeCompanyStrings($displayCompanyName)} Revenue by ${convertToTitleCase(data?.getParams)}</h3>`,
|
||||
style: {
|
||||
color: "white",
|
||||
color: $mode === "light" ? "black" : "white",
|
||||
// Using inline CSS for margin-top and margin-bottom
|
||||
},
|
||||
useHTML: true, // Enable HTML to apply custom class styling
|
||||
@ -83,7 +84,7 @@
|
||||
return `${monthNames[monthIndex]} '${year}`;
|
||||
},
|
||||
style: {
|
||||
color: "#fff",
|
||||
color: $mode === "light" ? "black" : "white",
|
||||
fontSize: "12px",
|
||||
},
|
||||
rotation: 45, // Rotate labels for better readability
|
||||
@ -92,9 +93,9 @@
|
||||
},
|
||||
yAxis: {
|
||||
gridLineWidth: 1,
|
||||
gridLineColor: "#111827",
|
||||
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
|
||||
labels: {
|
||||
style: { color: "white" },
|
||||
style: { color: $mode === "light" ? "black" : "white" },
|
||||
},
|
||||
title: { text: null },
|
||||
opposite: true,
|
||||
@ -112,8 +113,8 @@
|
||||
},
|
||||
borderRadius: 4,
|
||||
formatter: function () {
|
||||
// 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(
|
||||
// Format the x value to display time in a custom format
|
||||
let tooltipContent = `<span class="m-auto text-[1rem] font-[501]">${new Date(
|
||||
this?.x,
|
||||
).toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
@ -123,10 +124,10 @@
|
||||
|
||||
// Loop through each point in the shared tooltip
|
||||
this.points.forEach((point) => {
|
||||
tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span>
|
||||
<span class="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumber(
|
||||
point.y,
|
||||
)}</span><br>`;
|
||||
tooltipContent += `
|
||||
<span style="display:inline-block; width:10px; height:10px; background-color:${point.color}; border-radius:50%; margin-right:5px;"></span>
|
||||
<span class="font-semibold text-sm">${point.series.name}:</span>
|
||||
<span class="font-normal text-sm">${abbreviateNumber(point.y)}</span><br>`;
|
||||
});
|
||||
|
||||
return tooltipContent;
|
||||
@ -153,7 +154,7 @@
|
||||
{
|
||||
name: "Revenue",
|
||||
data: valueList,
|
||||
color: "#fff",
|
||||
color: $mode === "light" ? "#2C6288" : "white",
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
@ -165,7 +166,7 @@
|
||||
}
|
||||
|
||||
$: {
|
||||
if ($stockTicker && data?.getParams) {
|
||||
if (($stockTicker && data?.getParams) || $mode) {
|
||||
dataset = [];
|
||||
tableList = [];
|
||||
// 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.`}
|
||||
/>
|
||||
|
||||
<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 relative flex justify-center items-center overflow-hidden"
|
||||
@ -201,48 +202,38 @@
|
||||
<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="mb-3">
|
||||
<h1 class="text-2xl text-gray-200 font-bold">
|
||||
<h1 class="text-2xl font-bold">
|
||||
{convertToTitleCase(data?.getParams)} Revenue
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{#if rawData?.length !== 0}
|
||||
<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}
|
||||
></div>
|
||||
|
||||
<h2 class="mt-5 text-xl sm:text-2xl text-white font-bold">
|
||||
History
|
||||
</h2>
|
||||
<h2 class="mt-5 text-xl sm:text-2xl font-bold">History</h2>
|
||||
|
||||
<div class="w-full overflow-x-auto">
|
||||
<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">
|
||||
<tr class="border-b border-gray-800">
|
||||
<th class="text-white font-semibold text-start text-sm"
|
||||
>Quarter</th
|
||||
>
|
||||
<th class="text-white font-semibold text-end text-sm"
|
||||
>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
|
||||
>
|
||||
<thead class="text-muted dark:text-white">
|
||||
<tr class="border-b border-gray-300 dark:border-gray-800">
|
||||
<th class=" font-semibold text-start text-sm">Quarter</th>
|
||||
<th class=" font-semibold text-end text-sm">Value</th>
|
||||
<th class=" font-semibold text-end text-sm"> Change </th>
|
||||
<th class=" font-semibold text-end text-sm">Growth</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each tableList as item, index}
|
||||
<!-- row -->
|
||||
<tr class=" odd:bg-odd border-b border-gray-800">
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
<tr
|
||||
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
|
||||
>
|
||||
<td class=" text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{new Date(item?.date ?? null)?.toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
@ -251,7 +242,7 @@
|
||||
</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
|
||||
? abbreviateNumber(item?.value, false, true)
|
||||
@ -259,7 +250,7 @@
|
||||
</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)}
|
||||
{@html abbreviateNumber(
|
||||
@ -273,7 +264,7 @@
|
||||
</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}
|
||||
<span class="text-green-600 dark:text-[#00FC50]">
|
||||
@ -294,7 +285,7 @@
|
||||
</div>
|
||||
{:else}
|
||||
<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
|
||||
</h2>
|
||||
|
||||
@ -326,8 +326,8 @@
|
||||
},
|
||||
borderRadius: 4,
|
||||
formatter: function () {
|
||||
// Format the x value to display time in hh:mm format
|
||||
let tooltipContent = `<span class=" m-auto text-[1rem] font-[501]">${new Date(
|
||||
// Format the x value to display time in a custom format
|
||||
let tooltipContent = `<span class="m-auto text-[1rem] font-[501]">${new Date(
|
||||
this?.x,
|
||||
).toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
@ -337,15 +337,16 @@
|
||||
|
||||
// Loop through each point in the shared tooltip
|
||||
this.points.forEach((point) => {
|
||||
tooltipContent += `<span class=" font-semibold text-sm">${point.series.name}:</span>
|
||||
<span class=" font-normal text-sm">${abbreviateNumber(
|
||||
point.y,
|
||||
)}</span><br>`;
|
||||
tooltipContent += `
|
||||
<span style="display:inline-block; width:10px; height:10px; background-color:${point.color}; border-radius:50%; margin-right:5px;"></span>
|
||||
<span class="font-semibold text-sm">${point.series.name}:</span>
|
||||
<span class="font-normal text-sm">${abbreviateNumber(point.y)}</span><br>`;
|
||||
});
|
||||
|
||||
return tooltipContent;
|
||||
},
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
series: {
|
||||
color: "white",
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
<aside class="inline-block relative w-full lg:w-1/4 mt-3">
|
||||
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) || data?.user?.freeTrial}
|
||||
<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
|
||||
href="/pricing"
|
||||
|
||||
@ -142,8 +142,8 @@
|
||||
},
|
||||
borderRadius: 4,
|
||||
formatter: function () {
|
||||
// Format the x value to display time in hh:mm format
|
||||
let tooltipContent = `<span class=" m-auto text-[1rem] font-[501]">${new Date(
|
||||
// Format the x value to display time in a custom format
|
||||
let tooltipContent = `<span class="m-auto text-[1rem] font-[501]">${new Date(
|
||||
this?.x,
|
||||
).toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
@ -153,10 +153,10 @@
|
||||
|
||||
// Loop through each point in the shared tooltip
|
||||
this.points.forEach((point) => {
|
||||
tooltipContent += `<span class=" font-semibold text-sm">${point.series.name}:</span>
|
||||
<span class=" font-normal text-sm">${abbreviateNumber(
|
||||
point.y,
|
||||
)}</span><br>`;
|
||||
tooltipContent += `
|
||||
<span style="display:inline-block; width:10px; height:10px; background-color:${point.color}; border-radius:50%; margin-right:5px;"></span>
|
||||
<span class="font-semibold text-sm">${point.series.name}:</span>
|
||||
<span class="font-normal text-sm">${abbreviateNumber(point.y)}</span><br>`;
|
||||
});
|
||||
|
||||
return tooltipContent;
|
||||
@ -196,7 +196,7 @@
|
||||
}
|
||||
|
||||
$: {
|
||||
if ($stockTicker) {
|
||||
if ($stockTicker || $mode) {
|
||||
changeTablePeriod(0);
|
||||
changeTimePeriod(0);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user