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

ui fixes

Browse Source
This commit is contained in:
MuslemRahimi 2025-03-11 12:28:19 +01:00
parent 400ea21052
commit 3bc72a259a
10 changed files with 485 additions and 441 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
src/lib/components/Options/DailyStats.svelte
View File

@ -1,15 +1,15 @@
<script lang="ts"> <script lang="ts">
import InfoModal from "$lib/components/InfoModal.svelte"; import InfoModal from "$lib/components/InfoModal.svelte";
import { abbreviateNumberWithColor } from "$lib/utils"; import { abbreviateNumber } from "$lib/utils";
import * as HoverCard from "$lib/components/shadcn/hover-card/index.js"; import * as HoverCard from "$lib/components/shadcn/hover-card/index.js";
export let rawData = {}; export let rawData = {};
</script> </script>
<div class="text-white"> <div class="">
<label <label
for="dailyStats" for="dailyStats"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit" class="mr-1 cursor-pointer flex flex-row items-center text-xl sm:text-2xl font-bold w-fit"
> >
Daily Stats Daily Stats
<InfoModal <InfoModal
@ -21,49 +21,41 @@
<div <div
class="mt-5 order-5 lg:order-1 flex flex-row space-x-2 sm:space-x-3 xs:space-x-4" class="mt-5 order-5 lg:order-1 flex flex-row space-x-2 sm:space-x-3 xs:space-x-4"
> >
<table class="w-[50%] text-sm text-white sm:text-[1rem] xl:min-w-[300px]"> <table class="w-[50%] text-sm sm:text-[1rem] xl:min-w-[300px]">
<tbody <tbody
><tr ><tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Call Volume</td >Call Volume</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumberWithColor( >{abbreviateNumber(rawData?.call_volume)}</td
rawData?.call_volume,
false,
true,
)}</td
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Call Premium</td >Call Premium</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumberWithColor( >{abbreviateNumber(rawData?.call_premium)}</td
rawData?.call_premium,
false,
true,
)}</td
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Premium</td >Premium</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumberWithColor( >{abbreviateNumber(
rawData?.call_premium + rawData?.put_premium, rawData?.call_premium + rawData?.put_premium,
false, false,
true, true,
@ -71,22 +63,18 @@
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Call Open Interest</td >Call Open Interest</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumberWithColor( >{abbreviateNumber(rawData?.call_open_interest)}</td
rawData?.call_open_interest,
false,
true,
)}</td
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Implied Volatility (IV) >Implied Volatility (IV)
@ -97,71 +85,59 @@
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Total Open Interest</td >Total Open Interest</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumberWithColor( >{abbreviateNumber(rawData?.total_open_interest)}</td
rawData?.total_open_interest,
false,
true,
)}</td
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Net Premium >Net Premium
</td> </td>
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html rawData?.net_premium >{rawData?.net_premium
? abbreviateNumberWithColor(rawData?.net_premium, false, true) ? abbreviateNumber(rawData?.net_premium)
: "n/a"}</td : "n/a"}</td
></tr ></tr
> >
</tbody> </tbody>
</table> </table>
<table class="w-[50%] text-sm text-white xl:min-w-[300px]"> <table class="w-[50%] text-sm xl:min-w-[300px]">
<tbody <tbody
><tr ><tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Put Volume</td >Put Volume</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumberWithColor( >{abbreviateNumber(rawData?.put_volume)}</td
rawData?.put_volume,
false,
true,
)}</td
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Put Premium</td >Put Premium</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumberWithColor( >{abbreviateNumber(rawData?.put_premium)}</td
rawData?.put_premium,
false,
true,
)}</td
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>P/C Ratio</td >P/C Ratio</td
@ -173,23 +149,19 @@
> >
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Put Open Interest</td >Put Open Interest</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumberWithColor( >{abbreviateNumber(rawData?.put_open_interest)}</td
rawData?.put_open_interest,
false,
true,
)}</td
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>IV Rank</td >IV Rank</td
@ -201,7 +173,7 @@
> >
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>🐻/🐂 Prem >🐻/🐂 Prem
@ -258,26 +230,26 @@
</div> </div>
</HoverCard.Trigger> </HoverCard.Trigger>
<HoverCard.Content <HoverCard.Content
class="w-auto bg-secondary border border-gray-600" class="w-auto bg-secondary border border-gray-300 dark:border-gray-600"
> >
<div class="flex justify-between space-x-4"> <div class="flex justify-between space-x-4">
<div class="space-y-1 flex flex-col items-start text-white"> <div class="space-y-1 flex flex-col items-start">
<div> <div>
Bearish: {@html abbreviateNumberWithColor( Bearish: {abbreviateNumber(
rawData?.premium_ratio?.at(0), rawData?.premium_ratio?.at(0),
false, false,
true, true,
)} )}
</div> </div>
<div> <div>
Neutral: {@html abbreviateNumberWithColor( Neutral: {abbreviateNumber(
rawData?.premium_ratio?.at(1), rawData?.premium_ratio?.at(1),
false, false,
true, true,
)} )}
</div> </div>
<div> <div>
Bullish: {@html abbreviateNumberWithColor( Bullish: {abbreviateNumber(
rawData?.premium_ratio?.at(2), rawData?.premium_ratio?.at(2),
false, false,
true, true,
@ -294,7 +266,7 @@
</tr> </tr>
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>(Net Call x Net Put) Prem</td >(Net Call x Net Put) Prem</td
@ -303,16 +275,8 @@
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
> >
{#if rawData?.net_call_premium || rawData?.net_put_premium} {#if rawData?.net_call_premium || rawData?.net_put_premium}
{@html abbreviateNumberWithColor( {abbreviateNumber(rawData?.net_call_premium)}
rawData?.net_call_premium, x {abbreviateNumber(rawData?.net_put_premium)}
false,
true,
)}
x {@html abbreviateNumberWithColor(
rawData?.net_put_premium,
false,
true,
)}
{:else} {:else}
n/a n/a
{/if} {/if}

33
src/lib/components/Options/TickerFlow.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { abbreviateNumberWithColor } from "$lib/utils"; import { abbreviateNumber } from "$lib/utils";
import InfoModal from "$lib/components/InfoModal.svelte"; import InfoModal from "$lib/components/InfoModal.svelte";
export let tickerFlow = []; export let tickerFlow = [];
@ -57,7 +57,7 @@
{#if tickerFlow?.length > 0} {#if tickerFlow?.length > 0}
<label <label
for="dailyNetPutCallPrem" for="dailyNetPutCallPrem"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit" class="mr-1 cursor-pointer flex flex-row items-center text-xl sm:text-2xl font-bold w-fit"
> >
Daily Net Put / Call Premium Daily Net Put / Call Premium
<InfoModal <InfoModal
@ -74,22 +74,21 @@
/> />
</label> </label>
<div class="text-white text-xs sm:text-sm italic mt-5 mb-3"> <div class=" text-xs sm:text-sm italic mt-5 mb-3">
Last Updated: {formatDate(findLastNonNull(tickerFlow, "time"))} Last Updated: {formatDate(findLastNonNull(tickerFlow, "time"))}
</div> </div>
<div <div
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6"
> >
<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>Volume</span> <span>Volume</span>
<span class="ml-1 text-yellow-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">
{@html abbreviateNumberWithColor( {abbreviateNumber(
findLastNonNull(tickerFlow, "net_volume"), findLastNonNull(tickerFlow, "net_volume"),
false, false,
true, true,
@ -99,15 +98,14 @@
</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>Net Call Prem</span> <span>Net Call Prem</span>
<span class="ml-1 text-green-600">●</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"
>{@html abbreviateNumberWithColor( >{abbreviateNumber(
findLastNonNull(tickerFlow, "net_call_premium"), findLastNonNull(tickerFlow, "net_call_premium"),
false, false,
true, true,
@ -117,15 +115,14 @@
</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>Net Put Prem</span> <span>Net Put Prem</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"
>{@html abbreviateNumberWithColor( >{abbreviateNumber(
findLastNonNull(tickerFlow, "net_put_premium"), findLastNonNull(tickerFlow, "net_put_premium"),
false, false,
true, true,

4
src/lib/components/UpgradeToPro.svelte
View File

@ -34,7 +34,7 @@
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke={$mode === "light" ? "white" : "black"} stroke={$mode === "light" ? "white" : "black"}
class="h-6 w-6 text-black" class="h-6 w-6"
><path ><path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
@ -62,7 +62,7 @@
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke={$mode === "light" ? "white" : "black"} stroke={$mode === "light" ? "white" : "black"}
class="h-6 w-6 text-black" class="h-6 w-6"
><path ><path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"

28
src/routes/analysts/+page.svelte
View File

@ -319,9 +319,7 @@
> >
Analyst Star Rankings Analyst Star Rankings
</h3> </h3>
<p <p class="mt-3 leading-8 xl:text-lg">
class="mt-3 leading-8 text-muted dark:text-faded xl:text-lg"
>
Our analyst star rankings are based on these four factors Our analyst star rankings are based on these four factors
</p> </p>
</div> </div>
@ -332,7 +330,7 @@
<div class="relative pl-14"> <div class="relative pl-14">
<dt class=" font-semibold leading-4 md:leading-7"> <dt class=" font-semibold leading-4 md:leading-7">
<div <div
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]" class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-[#fff]"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -340,7 +338,7 @@
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
class="h-6 w-6 text-black" class="h-6 w-6 text-white dark:text-black"
><path ><path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
@ -350,14 +348,14 @@
</div> </div>
Success Rate Success Rate
</dt> </dt>
<dd class="mt-2 leading-7 text-muted dark:text-faded"> <dd class="mt-2 leading-7">
The percentage of ratings that are profitable. The percentage of ratings that are profitable.
</dd> </dd>
</div> </div>
<div class="relative pl-14"> <div class="relative pl-14">
<dt class=" font-semibold leading-4 md:leading-7"> <dt class=" font-semibold leading-4 md:leading-7">
<div <div
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]" class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-[#fff]"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -365,7 +363,7 @@
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
class="h-6 w-6 text-black" class="h-6 w-6 text-white dark:text-black"
><path ><path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
@ -375,7 +373,7 @@
</div> </div>
Average Return Average Return
</dt> </dt>
<dd class="mt-2 leading-7 text-muted dark:text-faded"> <dd class="mt-2 leading-7">
The average percentage return within one year of the The average percentage return within one year of the
rating. rating.
</dd> </dd>
@ -383,7 +381,7 @@
<div class="relative pl-14"> <div class="relative pl-14">
<dt class=" font-semibold leading-4 md:leading-7"> <dt class=" font-semibold leading-4 md:leading-7">
<div <div
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]" class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-[#fff]"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -391,7 +389,7 @@
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
class="h-6 w-6 text-black" class="h-6 w-6 text-white dark:text-black"
><path ><path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
@ -401,7 +399,7 @@
</div> </div>
Rating Count Rating Count
</dt> </dt>
<dd class="mt-2 leading-7 text-muted dark:text-faded"> <dd class="mt-2 leading-7">
The more ratings the analyst has provided, the higher The more ratings the analyst has provided, the higher
the score. the score.
</dd> </dd>
@ -409,7 +407,7 @@
<div class="relative pl-14"> <div class="relative pl-14">
<dt class=" font-semibold leading-4 md:leading-7"> <dt class=" font-semibold leading-4 md:leading-7">
<div <div
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]" class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-[#fff]"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -417,7 +415,7 @@
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
class="h-6 w-6 text-black" class="h-6 w-6 text-white dark:text-black"
><path ><path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
@ -427,7 +425,7 @@
</div> </div>
Recency Recency
</dt> </dt>
<dd class="mt-2 leading-7 text-muted dark:text-faded"> <dd class="mt-2 leading-7">
Ratings provided within the past year contribute to a Ratings provided within the past year contribute to a
higher score. higher score.
</dd> </dd>

16
src/routes/analysts/top-stocks/+page.svelte
View File

@ -83,7 +83,7 @@
<div class="relative pl-14"> <div class="relative pl-14">
<dt class=" font-semibold leading-4 md:leading-7"> <dt class=" font-semibold leading-4 md:leading-7">
<div <div
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]" class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-[#fff]"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -91,7 +91,7 @@
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
class="h-6 w-6 text-black" class="h-6 w-6 text-white dark:text-black"
><path ><path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
@ -108,7 +108,7 @@
<div class="relative pl-14"> <div class="relative pl-14">
<dt class=" font-semibold leading-4 md:leading-7"> <dt class=" font-semibold leading-4 md:leading-7">
<div <div
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]" class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-[#fff]"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -116,7 +116,7 @@
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
class="h-6 w-6 text-black" class="h-6 w-6 text-white dark:text-black"
><path ><path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
@ -134,7 +134,7 @@
<div class="relative pl-14"> <div class="relative pl-14">
<dt class=" font-semibold leading-4 md:leading-7"> <dt class=" font-semibold leading-4 md:leading-7">
<div <div
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]" class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-[#fff]"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -142,7 +142,7 @@
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
class="h-6 w-6 text-black" class="h-6 w-6 text-white dark:text-black"
><path ><path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
@ -160,7 +160,7 @@
<div class="relative pl-14"> <div class="relative pl-14">
<dt class=" font-semibold leading-4 md:leading-7"> <dt class=" font-semibold leading-4 md:leading-7">
<div <div
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]" class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-[#fff]"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -168,7 +168,7 @@
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
class="h-6 w-6 text-black" class="h-6 w-6 text-white"
><path ><path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"

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

@ -410,7 +410,7 @@
viewBox="0 0 1024 1024" viewBox="0 0 1024 1024"
><g transform="rotate(-90 512 512)" ><g transform="rotate(-90 512 512)"
><path ><path
fill="currentColor" fill={$mode === "light" ? "#2C6288" : "white"}
d="M104.704 685.248a64 64 0 0 0 90.496 0l316.8-316.8l316.8 316.8a64 64 0 0 0 90.496-90.496L557.248 232.704a64 64 0 0 0-90.496 0L104.704 594.752a64 64 0 0 0 0 90.496z" d="M104.704 685.248a64 64 0 0 0 90.496 0l316.8-316.8l316.8 316.8a64 64 0 0 0 90.496-90.496L557.248 232.704a64 64 0 0 0-90.496 0L104.704 594.752a64 64 0 0 0 0 90.496z"
/></g /></g
></svg ></svg
@ -473,7 +473,7 @@
></g><g id="SVGRepo_iconCarrier"> ></g><g id="SVGRepo_iconCarrier">
<path <path
d="M20.3359 3.22136L3.87333 8.70889C3.56801 8.81066 3.55033 9.23586 3.84614 9.36263L9.89655 11.9557C9.96078 11.9832 10.0347 11.9752 10.0916 11.9346L16.0235 7.69749C16.2073 7.56618 16.4338 7.79266 16.3025 7.97648L12.0654 13.9084C12.0248 13.9653 12.0168 14.0392 12.0443 14.1034L14.6374 20.1539C14.7641 20.4497 15.1893 20.432 15.2911 20.1267L20.7786 3.66408C20.8698 3.39046 20.6095 3.13015 20.3359 3.22136Z" d="M20.3359 3.22136L3.87333 8.70889C3.56801 8.81066 3.55033 9.23586 3.84614 9.36263L9.89655 11.9557C9.96078 11.9832 10.0347 11.9752 10.0916 11.9346L16.0235 7.69749C16.2073 7.56618 16.4338 7.79266 16.3025 7.97648L12.0654 13.9084C12.0248 13.9653 12.0168 14.0392 12.0443 14.1034L14.6374 20.1539C14.7641 20.4497 15.1893 20.432 15.2911 20.1267L20.7786 3.66408C20.8698 3.39046 20.6095 3.13015 20.3359 3.22136Z"
fill="currentColor" fill={$mode === "light" ? "#2C6288" : "white"}
></path> ></path>
</g></svg </g></svg
> >
@ -495,7 +495,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="currentColor" fill={$mode === "light" ? "#2C6288" : "white"}
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
/></svg /></svg
> >
@ -505,7 +505,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="currentColor" fill={$mode === "light" ? "#2C6288" : "white"}
d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
/></svg /></svg
> >
@ -518,11 +518,11 @@
> >
{#if isTickerIncluded} {#if isTickerIncluded}
<svg <svg
class="w-6 h-6 inline-block text-muted dark:text-white" class="w-6 h-6 inline-block"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="currentColor" fill={$mode === "light" ? "#2C6288" : "white"}
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
/></svg /></svg
> >
@ -532,7 +532,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="currentColor" fill={$mode === "light" ? "#2C6288" : "white"}
d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
/></svg /></svg
> >
@ -547,7 +547,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="currentColor" fill={$mode === "light" ? "#2C6288" : "white"}
d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
/></svg /></svg
> >
@ -616,7 +616,9 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="currentColor" fill={$mode === "light"
? "#2C6288"
: "white"}
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
/></svg /></svg
> >
@ -626,7 +628,9 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="currentColor" fill={$mode === "light"
? "#2C6288"
: "white"}
d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
/></svg /></svg
> >
@ -648,7 +652,9 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="currentColor" fill={$mode === "light"
? "#2C6288"
: "white"}
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
/></svg /></svg
> >
@ -658,7 +664,9 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="currentColor" fill={$mode === "light"
? "#2C6288"
: "white"}
d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
/></svg /></svg
> >
@ -680,7 +688,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="currentColor" fill={$mode === "light" ? "#2C6288" : "white"}
d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
/></svg /></svg
> >

375
src/routes/stocks/[tickerID]/forecast/ai/+page.svelte
View File

@ -2,23 +2,11 @@
import { displayCompanyName, stockTicker, screenWidth } from "$lib/store"; import { displayCompanyName, stockTicker, screenWidth } from "$lib/store";
import Infobox from "$lib/components/Infobox.svelte"; import Infobox from "$lib/components/Infobox.svelte";
import highcharts from "$lib/highcharts.ts"; import highcharts from "$lib/highcharts.ts";
import { mode } from "mode-watcher";
import { Chart } from "svelte-echarts";
import { init, use } from "echarts/core";
import { LineChart, BarChart, GaugeChart } from "echarts/charts";
import { GridComponent, TooltipComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import SEO from "$lib/components/SEO.svelte"; import SEO from "$lib/components/SEO.svelte";
export let data; export let data;
use([
LineChart,
GaugeChart,
BarChart,
GridComponent,
TooltipComponent,
CanvasRenderer,
]);
const price = data?.getStockQuote?.price?.toFixed(2) || 0; const price = data?.getStockQuote?.price?.toFixed(2) || 0;
@ -56,82 +44,158 @@
// Determine the value based on the consensus rating // Determine the value based on the consensus rating
switch (consensusRating) { switch (consensusRating) {
case "Strong Sell": case "Strong Sell":
value = 0;
break;
case "Sell":
value = 0.25;
break;
case "Hold":
value = 0.5; value = 0.5;
break; break;
case "Sell":
value = 1.5;
break;
case "Hold":
value = 2.5;
break;
case "Buy": case "Buy":
value = 0.75; value = 3.5;
break; break;
case "Strong Buy": case "Strong Buy":
value = 1; value = 4.5;
break; break;
default: default:
value = 0.5; value = 0.5;
break; break;
} }
const option = {
silent: true, const options = {
animation: false, legend: {
enabled: false,
},
credits: {
enabled: false,
},
chart: {
type: "gauge",
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
animation: false,
},
title: {
text: null,
},
yAxis: {
min: 0,
max: 5,
tickPosition: "inside",
tickLength: 20,
tickWidth: 0,
minorTickInterval: null,
lineWidth: 0,
// Remove numeric tick labels
labels: {
enabled: false,
},
plotBands: [
{
from: 0,
to: 1,
color: "#9E190A",
thickness: 40,
borderRadius: "0px",
},
{
from: 1,
to: 2,
color: "#D9220E",
thickness: 40,
borderRadius: "0px",
},
{
from: 2,
to: 3,
color: "#f5b700",
thickness: 40,
borderRadius: "0px",
},
{
from: 3,
to: 4,
color: "#31B800",
thickness: 40,
borderRadius: "0px",
},
{
from: 4,
to: 5,
color: "#008A00",
thickness: 40,
borderRadius: "0px",
},
],
},
pane: {
startAngle: -90,
endAngle: 89.9,
background: null,
center: ["50%", "50%"],
size: "70%",
},
series: [ series: [
{ {
type: "gauge", name: "Rating",
startAngle: 180, data: [value],
endAngle: 0, animation: false,
center: ["50%", "45%"], dataLabels: {
radius: "70%", enabled: true,
min: 0, useHTML: true,
max: 1, borderWidth: 0,
splitNumber: 4, backgroundColor: "transparent",
axisLine: { style: {
lineStyle: { textOutline: "none",
width: 25, fontSize: "16px",
color: [ fontWeight: "bold",
[0.2, "#9E190A"], },
[0.4, "#D9220E"], formatter: function () {
[0.6, "#FF9E21"], const rating = this.y;
[0.8, "#31B800"], let ratingText = "";
[1, "#008A00"], let textColor = "";
],
if (rating < 1) {
ratingText = "Strong Sell";
textColor = "#D9220E";
} else if (rating < 2) {
ratingText = "Sell";
textColor = "#D9220E";
} else if (rating < 3) {
ratingText = "Hold";
textColor = "#f5b700";
} else if (rating < 4) {
ratingText = "Buy";
textColor = "#31B800";
} else {
ratingText = "Strong Buy";
textColor = "#31B800";
}
// "Analyst Consensus:" in white, rating in color
return `
<span class="text-lg">Analyst Consensus: </span>
<span class="text-lg" style="color:${textColor};">${ratingText}</span>
`;
}, },
}, },
pointer: { dial: {
icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z", radius: "80%",
length: "25%", backgroundColor: "#2A2E39",
width: 20, baseWidth: 12,
offsetCenter: [0, "-30%"], baseLength: "0%",
itemStyle: { rearLength: "0%",
color: "#fff",
},
}, },
axisTick: { pivot: {
length: 0, backgroundColor: "#2A2E39",
radius: 8,
}, },
splitLine: {
length: 0,
},
axisLabel: {
show: false,
},
detail: {
show: false, // Hide the numerical value display
},
data: [
{
value: value,
label: {
show: false, // Hide the data label
},
},
],
}, },
], ],
}; };
return option;
return options;
} }
function getPriceForecastChart() { function getPriceForecastChart() {
@ -201,18 +265,18 @@
}, },
}, },
chart: { chart: {
backgroundColor: "#09090B", backgroundColor: $mode === "light" ? "#fff" : "#09090B",
plotBackgroundColor: "#09090B", plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
height: 360, height: 360,
animation: false, animation: false,
}, },
title: { title: {
text: `<div class="grid grid-cols-2 w-[200px] sm:w-[500px] -mb-3.5 text-xs font-[501] text-gray-400"> text: `<div class="grid grid-cols-2 w-[200px] sm:w-[500px] -mb-3.5 text-xs font-[501] text-gray-600 dark:text-gray-400">
<h3 class="text-left">${$screenWidth && $screenWidth < 640 ? "Past Year" : "Past 12 Months"}</h3> <h3 class="text-left">${$screenWidth && $screenWidth < 640 ? "Past Year" : "Past 12 Months"}</h3>
<h3 class="text-right">${$screenWidth && $screenWidth < 640 ? "Next Year" : "12 Month Forecast"}</h3> <h3 class="text-right">${$screenWidth && $screenWidth < 640 ? "Next Year" : "12 Month Forecast"}</h3>
</div>`, </div>`,
style: { style: {
color: "white", color: $mode === "light" ? "black" : "white",
width: "100%", width: "100%",
}, },
verticalAlign: "top", verticalAlign: "top",
@ -220,12 +284,12 @@
}, },
xAxis: { xAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: "#111827", gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
type: "datetime", type: "datetime",
endOnTick: false, endOnTick: false,
labels: { labels: {
style: { style: {
color: "#fff", color: $mode === "light" ? "black" : "white",
}, },
formatter: function () { formatter: function () {
const date = new Date(this.value); const date = new Date(this.value);
@ -242,15 +306,14 @@
}, },
labels: { labels: {
style: { style: {
color: "#fff", color: $mode === "light" ? "black" : "white",
}, },
formatter: function () { formatter: function () {
return `$${this.value.toFixed(0)}`; return `$${this.value.toFixed(0)}`;
}, },
}, },
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: "#111827", gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
tickInterval: 20, // Adjust this value to reduce step size
}, },
series: [ series: [
@ -258,7 +321,7 @@
animation: false, animation: false,
name: "Historical", name: "Historical",
data: processedHistorical, data: processedHistorical,
color: "#fff", color: $mode === "light" ? "#007050" : "#fff",
marker: { marker: {
enabled: true, enabled: true,
symbol: "circle", symbol: "circle",
@ -280,7 +343,7 @@
animation: false, animation: false,
name: "Average", name: "Average",
data: forecastAvg, data: forecastAvg,
color: "#fff", color: $mode === "light" ? "#007050" : "#fff",
dashStyle: "Dash", dashStyle: "Dash",
marker: { marker: {
enabled: false, enabled: false,
@ -297,6 +360,93 @@
}, },
}, },
], ],
/*
annotations: [
{
labels: [
{
point: {
x: forecastHigh[forecastHigh.length - 1][0], // Last X (timestamp)
y: forecastHigh[forecastHigh.length - 1][1], // Last Y (Average value)
xAxis: 0,
yAxis: 0,
},
text: `<b>High</b><br><span class="text-sm">$${forecastHigh[forecastHigh.length - 1][1]}</span>`,
useHTML: true,
style: {
backgroundColor: "rgba(0, 0, 0, 0.8)",
borderColor: "rgba(255, 255, 255, 0.2)",
borderWidth: 1,
fontSize: "12px",
fontWeight: "bold",
},
align: "left",
verticalAlign: "middles",
x: -10,
y: 0,
backgroundColor: "rgba(0, 0, 0, 0.8)",
borderColor: "rgba(255, 255, 255, 0.2)",
borderWidth: 1,
padding: 8,
shape: "",
},
{
point: {
x: forecastAvg[forecastAvg.length - 1][0], // Last X (timestamp)
y: forecastAvg[forecastAvg.length - 1][1], // Last Y (Average value)
xAxis: 0,
yAxis: 0,
},
text: `<b>Average</b><br><span>$${forecastAvg[forecastAvg.length - 1][1]}</span>`,
useHTML: true,
style: {
backgroundColor: "rgba(0, 0, 0, 0.8)",
borderColor: "rgba(255, 255, 255, 0.2)",
borderWidth: 1,
fontSize: "12px",
fontWeight: "bold",
},
align: "right",
verticalAlign: "middle",
x: -10,
y: 30,
backgroundColor: "rgba(0, 0, 0, 0.8)",
borderColor: "rgba(255, 255, 255, 0.2)",
borderWidth: 1,
padding: 5,
shape: "",
},
{
point: {
x: forecastLow[forecastLow.length - 1][0], // Last X (timestamp)
y: forecastLow[forecastLow.length - 1][1], // Last Y (Average value)
xAxis: 0,
yAxis: 0,
},
text: `<b>Low</b><br><span>$${forecastLow[forecastLow.length - 1][1]}</span>`,
useHTML: true,
style: {
backgroundColor: "rgba(0, 0, 0, 0.8)",
borderColor: "rgba(255, 255, 255, 0.2)",
borderWidth: 1,
fontSize: "12px",
fontWeight: "bold",
},
align: "top",
verticalAlign: "middle",
x: -10,
y: -40,
backgroundColor: "rgba(0, 0, 0, 0.8)",
borderColor: "rgba(255, 255, 255, 0.2)",
borderWidth: 1,
padding: 5,
shape: "",
},
],
},
],
*/
legend: { legend: {
enabled: false, enabled: false,
}, },
@ -307,8 +457,15 @@
return options; return options;
} }
let optionsPieChart = getPieChart() || null; let optionsPieChart = null;
let config = getPriceForecastChart() || null; let config = null;
$: {
if ($mode) {
optionsPieChart = getPieChart() || null;
config = getPriceForecastChart() || null;
}
}
</script> </script>
<SEO <SEO
@ -316,7 +473,7 @@
description={`Discover our AI-powered forecast for ${$displayCompanyName} (${$stockTicker}). Get in-depth analyst ratings, price targets, upgrades, and downgrades from top Wall Street experts. Stay ahead of market trends and make smarter investment decisions.`} description={`Discover our AI-powered forecast for ${$displayCompanyName} (${$stockTicker}). Get in-depth analyst ratings, price targets, upgrades, and downgrades from top Wall Street experts. Stay ahead of market trends and make smarter investment decisions.`}
/> />
<section class="w-full bg-default overflow-hidden text-white h-full"> <section class="w-full overflow-hidden min-h-screen">
<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"
@ -328,7 +485,7 @@
{#if Object?.keys(data?.getPriceAnalysis)?.length > 0} {#if Object?.keys(data?.getPriceAnalysis)?.length > 0}
<div class="w-full mb-6 mt-3"> <div class="w-full mb-6 mt-3">
<div <div
class="rounded-sm border border-gray-600 p-0.5 xs:p-1 md:flex md:flex-col md:space-y-4 md:divide-y md:p-4 lg:flex-row lg:space-x-4 lg:space-y-0 lg:divide-x lg:divide-y-0 divide-gray-600" class="rounded-sm border border-gray-300 dark:border-gray-600 p-0.5 xs:p-1 md:flex md:flex-col md:space-y-4 md:divide-y md:p-4 lg:flex-row lg:space-x-4 lg:space-y-0 lg:divide-x lg:divide-y-0 divide-gray-300 dark:divide-gray-600"
> >
<div <div
class="p-3 md:flex md:space-x-4 md:p-0 lg:block lg:max-w-[32%] lg:space-x-0" class="p-3 md:flex md:space-x-4 md:p-0 lg:block lg:max-w-[32%] lg:space-x-0"
@ -352,11 +509,10 @@
</div> </div>
<div> <div>
<div> <div>
<div class="app h-[160px]"> <div
{#if optionsPieChart !== null} class="max-h-[225px]"
<Chart {init} options={optionsPieChart} class="chart" /> use:highcharts={optionsPieChart}
{/if} ></div>
</div>
<div class="-mt-36 text-center text-xl font-semibold"> <div class="-mt-36 text-center text-xl font-semibold">
Analyst Consensus: <span Analyst Consensus: <span
class="font-bold {['Strong Buy', 'Buy']?.includes( class="font-bold {['Strong Buy', 'Buy']?.includes(
@ -373,18 +529,16 @@
</div> </div>
<div class="grow pt-2 md:pt-4 lg:pl-4 lg:pt-0"> <div class="grow pt-2 md:pt-4 lg:pl-4 lg:pt-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>
<div <div
class="hide-scroll mb-1 mt-2 overflow-x-auto px-1.5 text-center md:mb-0 md:px-0 lg:mt-2" class="hide-scroll mb-1 mt-2 overflow-x-auto px-1.5 text-center md:mb-0 md:px-0 lg:mt-2"
> >
<table <table class="w-full text-right text-tiny xs:text-sm">
class="w-full text-right text-tiny text-white xs:text-sm sm:"
>
<thead <thead
><tr ><tr
class="border-b border-gray-600 font-normal text-sm sm:text-[1rem]" class="border-b border-gray-300 dark:border-gray-600 font-normal text-sm sm:text-[1rem]"
><th class="py-[3px] text-left font-semibold lg:py-0.5" ><th class="py-[3px] text-left font-semibold lg:py-0.5"
>Target</th >Target</th
> <th class="font-semibold">Low</th> > <th class="font-semibold">Low</th>
@ -395,7 +549,7 @@
> >
<tbody <tbody
><tr ><tr
class="border-b border-gray-600 font-normal text-sm sm:text-[1rem]" class="border-b border-gray-300 dark:border-gray-600 font-normal text-sm sm:text-[1rem]"
><td class="py-[3px] text-left lg:py-0.5">Price</td> ><td class="py-[3px] text-left lg:py-0.5">Price</td>
<td>${lowPriceTarget}</td> <td>${lowPriceTarget}</td>
<td>${avgPriceTarget}</td> <td>${medianPriceTarget}</td> <td>${avgPriceTarget}</td> <td>${medianPriceTarget}</td>
@ -406,22 +560,26 @@
<td <td
class={lowChange > 0 class={lowChange > 0
? "before:content-['+'] text-green-600 dark:text-[#00FC50]" ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}>{lowChange}%</td : "text-red-600 dark:text-[#FF2F1F]"}
>{lowChange}%</td
> >
<td <td
class={avgChange > 0 class={avgChange > 0
? "before:content-['+'] text-green-600 dark:text-[#00FC50]" ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}>{avgChange}%</td : "text-red-600 dark:text-[#FF2F1F]"}
>{avgChange}%</td
> >
<td <td
class={medianChange > 0 class={medianChange > 0
? "before:content-['+'] text-green-600 dark:text-[#00FC50]" ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}>{medianChange}%</td : "text-red-600 dark:text-[#FF2F1F]"}
>{medianChange}%</td
> >
<td <td
class={highChange > 0 class={highChange > 0
? "before:content-['+'] text-green-600 dark:text-[#00FC50]" ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}>{highChange}%</td : "text-red-600 dark:text-[#FF2F1F]"}
>{highChange}%</td
></tr ></tr
></tbody ></tbody
> >
@ -437,20 +595,3 @@
</div> </div>
</div> </div>
</section> </section>
<style>
.app {
height: 300px;
max-width: 100%; /* Ensure chart width doesn't exceed the container */
}
@media (max-width: 640px) {
.app {
height: 300px;
}
}
.chart {
width: 100%;
}
</style>

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

@ -196,9 +196,7 @@
description={`A list of analyst ratings for ${$displayCompanyName} (${$stockTicker})} stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} description={`A list of analyst ratings for ${$displayCompanyName} (${$stockTicker})} stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`}
/> />
<section <section class=" overflow-hidden h-full min-h-screen mb-40 sm:mb-0 w-full">
class="bg-default overflow-hidden text-white h-full min-h-screen mb-40 sm:mb-0 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"
@ -223,7 +221,7 @@
class="inline-flex justify-center w-full rounded-md sm:w-auto" class="inline-flex justify-center w-full rounded-md sm:w-auto"
> >
<div <div
class="bg-secondary w-full 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 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}
@ -238,7 +236,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
> >
@ -261,7 +259,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>
@ -275,10 +273,12 @@
</div> </div>
<div <div
class="mb-4 grid grid-cols-2 grid-rows-2 divide-contrast rounded-md border border-gray-600 md:grid-cols-4 md:grid-rows-1 md:divide-x" class="mb-4 grid grid-cols-2 grid-rows-2 divide-contrast rounded-md border border-gray-300 dark:border-gray-600 md:grid-cols-4 md:grid-rows-1 md:divide-x"
> >
<div class="p-4 bp:p-5 sm:p-6 border-r border-gray-600"> <div
<div class="text-[1rem] font-normal text-white">Total Analysts</div> class="p-4 bp:p-5 sm:p-6 border-r border-gray-300 dark:border-gray-600"
>
<div class="text-[1rem] font-normal">Total Analysts</div>
<div <div
class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl" class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
@ -286,10 +286,10 @@
{numOfAnalyst} {numOfAnalyst}
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6 border-r-0 md:border-r border-gray-600"> <div
<div class="text-[1rem] font-normal text-white"> class="p-4 bp:p-5 sm:p-6 border-r-0 md:border-r border-gray-300 dark:border-gray-600"
Consensus Rating >
</div> <div class="text-[1rem] font-normal">Consensus Rating</div>
<div <div
class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl" class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
> >
@ -297,9 +297,9 @@
</div> </div>
</div> </div>
<div <div
class="p-4 bp:p-5 sm:p-6 border-r-0 md:border-r border-t md:border-t-0 border-gray-600" class="p-4 bp:p-5 sm:p-6 border-r-0 md:border-r border-t md:border-t-0 border-gray-300 dark:border-gray-600"
> >
<div class="text-[1rem] font-normal text-white">Price Target</div> <div class="text-[1rem] font-normal">Price Target</div>
<div <div
class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl" class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
> >
@ -309,16 +309,16 @@
</div> </div>
</div> </div>
<div <div
class="p-4 bp:p-5 sm:p-6 border-t border-gray-600 md:border-0 border-l border-gray-600 md:border-0" class="p-4 bp:p-5 sm:p-6 border-t border-gray-300 dark:border-gray-600 md:border-0 border-l border-gray-300 dark:border-gray-600 md:border-0"
> >
<div class="text-[1rem] font-normal text-white">Upside</div> <div class="text-[1rem] font-normal">Upside</div>
<div <div
class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl {changesPercentage >= class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl {changesPercentage >=
0 0
? "before:content-['+'] after:content-['%'] text-[#00FC50]" ? "before:content-['+'] after:content-['%'] text-green-600 dark:text-[#00FC50]"
: changesPercentage < 0 : changesPercentage < 0
? "after:content-['%'] text-[#FF2F1F]" ? "after:content-['%'] text-red-600 dark:text-[#FF2F1F]"
: 'text-white'}" : ''}"
> >
{changesPercentage} {changesPercentage}
</div> </div>
@ -336,44 +336,32 @@
class="mt-10 mb-2 items-center justify-between py-0 md:mt-8 md:flex md:py-2" class="mt-10 mb-2 items-center justify-between py-0 md:mt-8 md:flex md:py-2"
> >
<div class="flex justify-between md:block"> <div class="flex justify-between md:block">
<h3 class="text-xl sm:text-2xl text-white font-bold"> <h3 class="text-xl sm:text-2xl font-bold">Ratings History</h3>
Ratings History
</h3>
</div> </div>
</div> </div>
<div class=" w-full m-auto mb-4 overflow-x-auto lg:overflow-hidden"> <div class=" w-full m-auto mb-4 overflow-x-auto lg:overflow-hidden">
<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 class="bg-default"> <thead class="text-muted dark:text-white">
<tr> <tr>
<td class="text-white font-semibold text-sm text-start" <td class=" font-semibold text-sm text-start">Analyst</td>
>Analyst</td <td class=" font-semibold text-sm text-start">Firm</td>
> <td class=" font-semibold text-sm text-end">Rating</td>
<td class="text-white font-semibold text-sm text-start" <td class=" font-semibold text-sm text-end">Action</td>
>Firm</td <td class=" font-semibold text-sm text-end">Price Target</td>
>
<td class="text-white font-semibold text-sm text-end"
>Rating</td
>
<td class="text-white font-semibold text-sm text-end"
>Action</td
>
<td class="text-white font-semibold text-sm text-end"
>Price Target</td
>
<td class="text-white font-semibold text-sm text-end">Date</td <td class=" font-semibold text-sm text-end">Date</td>
>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each ["Pro", "Plus"]?.includes(data?.user?.tier) ? historyList : historyList?.slice(0, 3) as item, index} {#each ["Pro", "Plus"]?.includes(data?.user?.tier) ? historyList : historyList?.slice(0, 3) as item, index}
<tr <tr
class=" {latestInfoDate(item?.date) class=" {latestInfoDate(item?.date)
? 'bg-[#F9AB00]/10' ? 'bg-blue-100 dark:bg-[#F9AB00]/10 shadow'
: 'odd:bg-odd '} {index + 1 === : 'dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd'} {index +
1 ===
historyList?.slice(0, 3)?.length && historyList?.slice(0, 3)?.length &&
!['Pro', 'Plus']?.includes(data?.user?.tier) !['Pro', 'Plus']?.includes(data?.user?.tier)
? 'opacity-[0.1]' ? 'opacity-[0.1]'
@ -387,7 +375,7 @@
href={item?.analystId !== null href={item?.analystId !== null
? `/analysts/${item?.analystId}` ? `/analysts/${item?.analystId}`
: "#"} : "#"}
class="text-blue-500 sm:hover:text-muted dark:sm:hover:text-white dark:text-blue-400" class="text-blue-500 sm:hover:text-muted dark:sm:hover: dark:text-blue-400"
>{item?.analyst_name} >{item?.analyst_name}
</a> </a>
@ -407,7 +395,7 @@
</svg> </svg>
{:else} {:else}
<svg <svg
class="w-3 h-3 text-gray-300 dark:text-gray-500" class="w-3 h-3 text-gray-400 dark:text-gray-500"
aria-hidden="true" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="currentColor" fill="currentColor"
@ -430,7 +418,7 @@
</td> </td>
<td <td
class="text-sm sm:text-[1rem] whitespace-nowrap text-start text-white" class="text-sm sm:text-[1rem] whitespace-nowrap text-start"
> >
{item?.analyst?.length > charNumber {item?.analyst?.length > charNumber
? item?.analyst?.slice(0, charNumber) + "..." ? item?.analyst?.slice(0, charNumber) + "..."
@ -438,7 +426,7 @@
</td> </td>
<td <td
class="text-sm sm:text-[1rem] whitespace-nowrap text-end text-white" class="text-sm sm:text-[1rem] whitespace-nowrap text-end"
> >
<span <span
class=" {['Strong Buy', 'Buy']?.includes( class=" {['Strong Buy', 'Buy']?.includes(
@ -458,7 +446,7 @@
</td> </td>
<td <td
class="text-sm sm:text-[1rem] whitespace-nowrap text-end text-white" class="text-sm sm:text-[1rem] whitespace-nowrap text-end"
> >
{item?.action_company?.replace( {item?.action_company?.replace(
"Initiates Coverage On", "Initiates Coverage On",
@ -467,7 +455,7 @@
</td> </td>
<td <td
class="text-sm sm:text-[1rem] whitespace-nowrap text-end text-white font-semibold" class="text-sm sm:text-[1rem] whitespace-nowrap text-end font-semibold"
> >
<div class="flex flex-col items-end"> <div class="flex flex-col items-end">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
@ -503,12 +491,12 @@
</td> </td>
<td <td
class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap" class=" text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
<div class="flex flex-col items-end"> <div class="flex flex-col items-end">
{#if latestInfoDate(item?.date)} {#if !latestInfoDate(item?.date)}
<label <label
class="bg-[#fff] text-black font-semibold text-xs rounded px-2 py-0.5 ml-3 mb-1" class="border-gray-300 shadow-sm bg-blue-100 dark:bg-[#fff] text-black font-semibold text-xs rounded px-2 py-0.5 ml-3 mb-1"
> >
New New
</label> </label>
@ -529,7 +517,7 @@
{:else if activeIdx === 1} {:else if activeIdx === 1}
<div class="w-full flex justify-start items-center m-auto mt-10 mb-6"> <div class="w-full flex justify-start items-center m-auto mt-10 mb-6">
<div <div
class="text-center w-fit text-gray-100 text-sm sm:text-[1rem] rounded-md h-auto border border-gray-600 p-4" class="text-center w-fit text-gray-100 text-sm sm:text-[1rem] rounded-md h-auto border border-gray-300 dark:border-gray-600 p-4"
> >
<svg <svg
class="w-5 h-5 inline-block sm:mr-1 shrink-0" class="w-5 h-5 inline-block sm:mr-1 shrink-0"
@ -553,12 +541,10 @@
<div class="mt-4 py-6 xl:mt-10 border-t border-gray-200"> <div class="mt-4 py-6 xl:mt-10 border-t border-gray-200">
<div class="mx-auto max-w-7xl px-3 xs:px-6 lg:px-8"> <div class="mx-auto max-w-7xl px-3 xs:px-6 lg:px-8">
<div class="mx-auto max-w-2xl md:text-center"> <div class="mx-auto max-w-2xl md:text-center">
<h3 <h3 class="mt-2 text-2xl font-bold tracking-tight bp:text-3xl">
class="mt-2 text-2xl font-bold tracking-tight text-white bp:text-3xl"
>
Analyst Star Rankings Analyst Star Rankings
</h3> </h3>
<p class="mt-3 leading-8 text-muted dark:text-faded xl:text-lg"> <p class="mt-3 leading-8 xl:text-lg">
Our analyst star rankings are based on these four factors Our analyst star rankings are based on these four factors
</p> </p>
</div> </div>
@ -567,11 +553,9 @@
class="grid grid-cols-1 gap-x-8 gap-y-10 md:grid-cols-2 lg:max-w-none lg:grid-cols-4 lg:gap-y-16" class="grid grid-cols-1 gap-x-8 gap-y-10 md:grid-cols-2 lg:max-w-none lg:grid-cols-4 lg:gap-y-16"
> >
<div class="relative pl-14"> <div class="relative pl-14">
<dt <dt class=" font-semibold leading-4 md:leading-7">
class=" font-semibold leading-4 text-white md:leading-7"
>
<div <div
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]" class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-[#fff]"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -579,7 +563,7 @@
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
class="h-6 w-6 text-black" class="h-6 w-6 text-white dark:text-black"
><path ><path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
@ -589,16 +573,14 @@
</div> </div>
Success Rate Success Rate
</dt> </dt>
<dd class="mt-2 leading-7 text-muted dark:text-faded"> <dd class="mt-2 leading-7">
The percentage of ratings that are profitable. The percentage of ratings that are profitable.
</dd> </dd>
</div> </div>
<div class="relative pl-14"> <div class="relative pl-14">
<dt <dt class=" font-semibold leading-4 md:leading-7">
class=" font-semibold leading-4 text-white md:leading-7"
>
<div <div
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]" class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-[#fff]"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -606,7 +588,7 @@
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
class="h-6 w-6 text-black" class="h-6 w-6 text-white dark:text-black"
><path ><path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
@ -616,17 +598,15 @@
</div> </div>
Average Return Average Return
</dt> </dt>
<dd class="mt-2 leading-7 text-muted dark:text-faded"> <dd class="mt-2 leading-7">
The average percentage return within one year of the The average percentage return within one year of the
rating. rating.
</dd> </dd>
</div> </div>
<div class="relative pl-14"> <div class="relative pl-14">
<dt <dt class=" font-semibold leading-4 md:leading-7">
class=" font-semibold leading-4 text-white md:leading-7"
>
<div <div
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]" class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-[#fff]"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -634,7 +614,7 @@
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
class="h-6 w-6 text-black" class="h-6 w-6 text-white dark:text-black"
><path ><path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
@ -644,17 +624,15 @@
</div> </div>
Rating Count Rating Count
</dt> </dt>
<dd class="mt-2 leading-7 text-muted dark:text-faded"> <dd class="mt-2 leading-7">
The more ratings the analyst has provided, the higher the The more ratings the analyst has provided, the higher the
score. score.
</dd> </dd>
</div> </div>
<div class="relative pl-14"> <div class="relative pl-14">
<dt <dt class=" font-semibold leading-4 md:leading-7">
class=" font-semibold leading-4 text-white md:leading-7"
>
<div <div
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]" class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-[#fff]"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -662,7 +640,7 @@
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
class="h-6 w-6 text-black" class="h-6 w-6 text-white dark:text-black"
><path ><path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
@ -672,7 +650,7 @@
</div> </div>
Recency Recency
</dt> </dt>
<dd class="mt-2 leading-7 text-muted dark:text-faded"> <dd class="mt-2 leading-7">
Ratings provided within the past year contribute to a Ratings provided within the past year contribute to a
higher score. higher score.
</dd> </dd>

48
src/routes/stocks/[tickerID]/options/+layout.svelte
View File

@ -58,21 +58,17 @@
<div <div
class="relative flex justify-center items-start overflow-hidden w-full" class="relative flex justify-center items-start overflow-hidden w-full"
> >
<main <main class="w-full lg:w-3/4 lg:pr-10">
class="w-full {displaySubSection === 'overview'
? ''
: 'lg:w-3/4 lg:pr-10'}"
>
<nav <nav
class="sm:ml-4 overflow-x-auto pt-1 text-sm sm:text-[1rem] whitespace-nowrap" class="sm:ml-4 pt-1 text-sm sm:text-[1rem] whitespace-nowrap overflow-x-auto whitespace-nowrap"
> >
<ul class="flex flex-row items-center w-full text-white"> <ul class="flex flex-row items-center w-full">
<a <a
href={`/stocks/${$stockTicker}/options`} href={`/stocks/${$stockTicker}/options`}
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>
@ -81,8 +77,8 @@
on:click={() => changeSubSection("unusual-activity")} on:click={() => changeSubSection("unusual-activity")}
class="p-2 px-5 cursor-pointer {displaySubSection === class="p-2 px-5 cursor-pointer {displaySubSection ===
'unusual-activity' 'unusual-activity'
? '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'}"
> >
Unusual Activity Unusual Activity
</a> </a>
@ -91,8 +87,8 @@
on:click={() => changeSubSection("hottest-contracts")} on:click={() => changeSubSection("hottest-contracts")}
class="p-2 px-5 cursor-pointer {displaySubSection === class="p-2 px-5 cursor-pointer {displaySubSection ===
'hottest-contracts' 'hottest-contracts'
? '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'}"
> >
Hottest Contracts Hottest Contracts
</a> </a>
@ -101,8 +97,8 @@
on:click={() => changeSubSection("volatility")} on:click={() => changeSubSection("volatility")}
class="p-2 px-5 cursor-pointer {displaySubSection === class="p-2 px-5 cursor-pointer {displaySubSection ===
'volatility' 'volatility'
? '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'}"
> >
Volatility Volatility
</a> </a>
@ -110,8 +106,8 @@
href={`/stocks/${$stockTicker}/options/oi`} href={`/stocks/${$stockTicker}/options/oi`}
on:click={() => changeSubSection("oi")} on:click={() => changeSubSection("oi")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'oi' class="p-2 px-5 cursor-pointer {displaySubSection === 'oi'
? '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'}"
> >
OI OI
</a> </a>
@ -120,8 +116,8 @@
href={`/stocks/${$stockTicker}/options/gex`} href={`/stocks/${$stockTicker}/options/gex`}
on:click={() => changeSubSection("gex")} on:click={() => changeSubSection("gex")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'gex' class="p-2 px-5 cursor-pointer {displaySubSection === 'gex'
? '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'}"
> >
GEX GEX
</a> </a>
@ -129,8 +125,8 @@
href={`/stocks/${$stockTicker}/options/dex`} href={`/stocks/${$stockTicker}/options/dex`}
on:click={() => changeSubSection("dex")} on:click={() => changeSubSection("dex")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'dex' class="p-2 px-5 cursor-pointer {displaySubSection === 'dex'
? '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'}"
> >
DEX DEX
</a> </a>
@ -141,11 +137,7 @@
</div> </div>
</main> </main>
<aside <aside class="hidden lg:block relative fixed w-1/4 ml-4">
class="{displaySubSection === 'overview'
? 'hidden'
: 'hidden lg:block'} relative fixed w-1/4 ml-4"
>
<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:shadow-lg dark: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"
> >
@ -161,7 +153,7 @@
class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white" 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">
Get realtime options flow and customize your screener Get realtime options flow and customize your screener
</span> </span>
</a> </a>
@ -182,7 +174,7 @@
class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white" 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">
Build your Stock Screener to find profitable stocks. Build your Stock Screener to find profitable stocks.
</span> </span>
</a> </a>

138
src/routes/stocks/[tickerID]/options/+page.svelte
View File

@ -3,7 +3,7 @@
import DailyStats from "$lib/components/Options/DailyStats.svelte"; import DailyStats from "$lib/components/Options/DailyStats.svelte";
import TickerFlow from "$lib/components/Options/TickerFlow.svelte"; import TickerFlow from "$lib/components/Options/TickerFlow.svelte";
import { abbreviateNumberWithColor, monthNames } from "$lib/utils"; import { abbreviateNumber, monthNames } from "$lib/utils";
import { onMount } from "svelte"; import { onMount } from "svelte";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte"; import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
@ -90,7 +90,7 @@
marker + marker +
param.seriesName + param.seriesName +
": " + ": " +
abbreviateNumberWithColor(param.value, false, true) + abbreviateNumber(param.value, false, true) +
"<br/>"; "<br/>";
}); });
@ -282,7 +282,7 @@
description={`Explore unusual options activity for ${$displayCompanyName} (${$stockTicker}), providing insights into market sentiment and potential stock movement.`} description={`Explore unusual options activity for ${$displayCompanyName} (${$stockTicker}), providing insights into market sentiment and potential stock movement.`}
/> />
<section class="w-full bg-default overflow-hidden text-white min-h-screen"> <section class="w-full overflow-hidden min-h-screen">
<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"
@ -318,15 +318,15 @@
</select> </select>
</div> </div>
<div class="app w-full bg-default"> <div class="app w-full ">
{#if filteredList?.length !== 0} {#if filteredList?.length !== 0}
<Chart {init} {options} class="chart" /> <Chart {init} {options} class="chart" />
{:else} {:else}
<span <span
class="text-xl text-white m-auto flex justify-center items-center h-full" class="text-xl m-auto flex justify-center items-center h-full"
> >
<div <div
class="text-white text-sm sm:text-[1rem] sm:rounded-md h-auto border border-gray-600 p-4" class=" text-sm sm:text-[1rem] sm:rounded-md h-auto border border-gray-600 p-4"
> >
<svg <svg
class="w-5 h-5 inline-block sm:mr-2 shrink-0" class="w-5 h-5 inline-block sm:mr-2 shrink-0"
@ -345,64 +345,42 @@
--> -->
{#if optionList?.length !== 0} {#if optionList?.length !== 0}
<h3 class="text-xl sm:text-2xl text-white font-bold text-start"> <h3 class="text-xl sm:text-2xl font-bold text-start">
Historical {$stockTicker} Data Historical {$stockTicker} Data
</h3> </h3>
<div class="flex justify-start items-center m-auto overflow-x-auto"> <div class="flex justify-start items-center m-auto overflow-x-auto">
<table <table
class="w-full table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md m-auto mt-4 overflow-x-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 mt-3"
> >
<thead class="bg-default"> <thead class="text-muted dark:text-white">
<tr class=""> <tr class="">
<td class="text-white font-semibold text-sm text-start" <td class=" font-semibold text-sm text-start">Date</td>
>Date</td <td class=" font-semibold text-sm text-end">% Change</td>
> <td class=" font-semibold text-sm text-end">P/C</td>
<td class="text-white font-semibold text-sm text-end" <td class=" font-semibold text-sm text-center">Volume</td>
>% Change</td <td class=" font-semibold text-sm text-center">C Volume</td>
> <td class=" font-semibold text-sm text-center">P Volume</td>
<td class="text-white font-semibold text-sm text-end"
>P/C</td
>
<td class="text-white font-semibold text-sm text-center"
>Volume</td
>
<td class="text-white font-semibold text-sm text-center"
>C Volume</td
>
<td class="text-white font-semibold text-sm text-center"
>P Volume</td
>
<!-- <!--
<td class="text-white font-semibold text-sm text-end" <td class=" font-semibold text-sm text-end"
>Vol/30D</td >Vol/30D</td
> >
--> -->
<!-- <!--
<td class="text-white font-semibold text-sm text-end" <td class=" font-semibold text-sm text-end"
>🐻/🐂 Prem</td >🐻/🐂 Prem</td
> >
--> -->
<td class="text-white font-semibold text-sm text-end" <td class=" font-semibold text-sm text-end">Total OI</td>
>Total OI</td <td class=" font-semibold text-sm text-end">OI Change</td>
> <td class=" font-semibold text-sm text-end">% OI Change</td>
<td class="text-white font-semibold text-sm text-end" <td class=" font-semibold text-sm text-end">C Prem</td>
>OI Change</td <td class=" font-semibold text-sm text-end">P Prem</td>
>
<td class="text-white font-semibold text-sm text-end"
>% OI Change</td
>
<td class="text-white font-semibold text-sm text-end"
>C Prem</td
>
<td class="text-white font-semibold text-sm text-end"
>P Prem</td
>
<!-- <!--
<td class="text-white font-semibold text-sm text-end" <td class=" font-semibold text-sm text-end"
>Net Prem</td >Net Prem</td
> >
<td class="text-white font-semibold text-sm text-end" <td class=" font-semibold text-sm text-end"
>Total Prem</td >Total Prem</td
> >
--> -->
@ -411,32 +389,28 @@
<tbody> <tbody>
{#each data?.user?.tier === "Pro" ? optionList : optionList?.slice(0, 3) as item, index} {#each data?.user?.tier === "Pro" ? optionList : optionList?.slice(0, 3) as item, index}
<tr <tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-oddborder-b border-gray-800 {index + class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
1 === 1 ===
optionList?.slice(0, 3)?.length && optionList?.slice(0, 3)?.length &&
!['Pro']?.includes(data?.user?.tier) !['Pro']?.includes(data?.user?.tier)
? 'opacity-[0.1]' ? 'opacity-[0.1]'
: ''}" : ''}"
> >
<td class="text-white text-sm sm:text-[1rem] text-start"> <td class=" text-sm sm:text-[1rem] text-start">
{formatDate(item?.date)} {formatDate(item?.date)}
</td> </td>
<td class="text-white text-sm sm:text-[1rem] text-end"> <td class=" text-sm sm:text-[1rem] text-end">
{#if item?.changesPercentage >= 0 && item?.changesPercentage !== null} {#if item?.changesPercentage >= 0 && item?.changesPercentage !== null}
<span class="text-green-600 dark:text-[#00FC50]" <span class="text-green-600 dark:text-[#00FC50]"
>+{item?.changesPercentage >= 1000 >+{item?.changesPercentage >= 1000
? abbreviateNumberWithColor( ? abbreviateNumber(item?.changesPercentage)
item?.changesPercentage,
)
: item?.changesPercentage?.toFixed(2)}%</span : item?.changesPercentage?.toFixed(2)}%</span
> >
{:else if item?.changesPercentage < 0 && item?.changesPercentage !== null} {:else if item?.changesPercentage < 0 && item?.changesPercentage !== null}
<span class="text-red-600 dark:text-[#FF2F1F]" <span class="text-red-600 dark:text-[#FF2F1F]"
>{item?.changesPercentage <= -1000 >{item?.changesPercentage <= -1000
? abbreviateNumberWithColor( ? abbreviateNumber(item?.changesPercentage)
item?.changesPercentage,
)
: item?.changesPercentage?.toFixed(2)}% : item?.changesPercentage?.toFixed(2)}%
</span> </span>
{:else} {:else}
@ -444,11 +418,11 @@
{/if} {/if}
</td> </td>
<td class="text-sm sm:text-[1rem] text-end text-white"> <td class="text-sm sm:text-[1rem] text-end">
{item?.putCallRatio} {item?.putCallRatio}
</td> </td>
<td class="text-sm sm:text-[1rem] text-end text-white"> <td class="text-sm sm:text-[1rem] text-end">
{item?.volume?.toLocaleString("en-US")} {item?.volume?.toLocaleString("en-US")}
</td> </td>
@ -464,7 +438,7 @@
{item?.put_volume?.toLocaleString("en-US")} {item?.put_volume?.toLocaleString("en-US")}
</td> </td>
<!-- <!--
<td class="text-sm sm:text-[1rem] text-white text-end"> <td class="text-sm sm:text-[1rem] text-end">
{item?.avgVolumeRatio?.toFixed(2)} {item?.avgVolumeRatio?.toFixed(2)}
</td> </td>
--> -->
@ -512,24 +486,24 @@
> >
<div class="flex justify-between space-x-4"> <div class="flex justify-between space-x-4">
<div <div
class="space-y-1 flex flex-col items-start text-white" class="space-y-1 flex flex-col items-start "
> >
<div> <div>
Bearish: {@html abbreviateNumberWithColor( Bearish: {@html abbreviateNumber(
item?.premium_ratio[0], item?.premium_ratio[0],
false, false,
true, true,
)} )}
</div> </div>
<div> <div>
Neutral: {@html abbreviateNumberWithColor( Neutral: {@html abbreviateNumber(
item?.premium_ratio[1], item?.premium_ratio[1],
false, false,
true, true,
)} )}
</div> </div>
<div> <div>
Bullish: {@html abbreviateNumberWithColor( Bullish: {@html abbreviateNumber(
item?.premium_ratio[2], item?.premium_ratio[2],
false, false,
true, true,
@ -542,15 +516,15 @@
</td> </td>
--> -->
<td class="text-sm sm:text-[1rem] text-end text-white"> <td class="text-sm sm:text-[1rem] text-end">
{@html abbreviateNumberWithColor( {@html abbreviateNumber(
item?.total_open_interest, item?.total_open_interest,
false, false,
true, true,
)} )}
</td> </td>
<td class="text-white text-sm sm:text-[1rem] text-end"> <td class=" text-sm sm:text-[1rem] text-end">
{#if item?.changeOI >= 0} {#if item?.changeOI >= 0}
<span class="text-green-600 dark:text-[#00FC50]" <span class="text-green-600 dark:text-[#00FC50]"
>+{item?.changeOI?.toLocaleString("en-US")}</span >+{item?.changeOI?.toLocaleString("en-US")}</span
@ -560,58 +534,50 @@
>{item?.changeOI?.toLocaleString("en-US")} >{item?.changeOI?.toLocaleString("en-US")}
</span> </span>
{:else} {:else}
<span class="text-white"> n/a </span> <span class=""> n/a </span>
{/if} {/if}
</td> </td>
<td class="text-white text-sm sm:text-[1rem] text-end"> <td class=" text-sm sm:text-[1rem] text-end">
{#if item?.changesPercentageOI >= 0} {#if item?.changesPercentageOI >= 0}
<span class="text-green-600 dark:text-[#00FC50]" <span class="text-green-600 dark:text-[#00FC50]"
>+{item?.changesPercentageOI >= 1000 >+{item?.changesPercentageOI >= 1000
? abbreviateNumberWithColor( ? abbreviateNumber(item?.changesPercentageOI)
item?.changesPercentageOI,
)
: item?.changesPercentageOI?.toFixed(2)}%</span : item?.changesPercentageOI?.toFixed(2)}%</span
> >
{:else if item?.changesPercentageOI < 0} {:else if item?.changesPercentageOI < 0}
<span class="text-red-600 dark:text-[#FF2F1F]" <span class="text-red-600 dark:text-[#FF2F1F]"
>{item?.changesPercentageOI <= -1000 >{item?.changesPercentageOI <= -1000
? abbreviateNumberWithColor( ? abbreviateNumber(item?.changesPercentageOI)
item?.changesPercentageOI,
)
: item?.changesPercentageOI?.toFixed(2)}% : item?.changesPercentageOI?.toFixed(2)}%
</span> </span>
{:else} {:else}
<span class="text-white"> n/a </span> <span class=""> n/a </span>
{/if} {/if}
</td> </td>
<td class="text-sm sm:text-[1rem] text-end text-white"> <td class="text-sm sm:text-[1rem] text-end">
{@html abbreviateNumberWithColor( {@html abbreviateNumber(
item?.call_premium, item?.call_premium,
false, false,
true, true,
)} )}
</td> </td>
<td class="text-sm sm:text-[1rem] text-end text-white"> <td class="text-sm sm:text-[1rem] text-end">
{@html abbreviateNumberWithColor( {@html abbreviateNumber(item?.put_premium, false, true)}
item?.put_premium,
false,
true,
)}
</td> </td>
<!-- <!--
<td class="text-sm sm:text-[1rem] text-end text-white"> <td class="text-sm sm:text-[1rem] text-end ">
{@html abbreviateNumberWithColor( {@html abbreviateNumber(
item?.net_premium, item?.net_premium,
false, false,
true, true,
)} )}
</td> </td>
<td class="text-sm sm:text-[1rem] text-end text-white"> <td class="text-sm sm:text-[1rem] text-end ">
{@html abbreviateNumberWithColor( {@html abbreviateNumber(
item?.total_premium, item?.total_premium,
false, false,
true, true,