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">
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";
export let rawData = {};
</script>
<div class="text-white">
<div class="">
<label
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
<InfoModal
@ -21,49 +21,41 @@
<div
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
><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
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Call Volume</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]"
>{@html abbreviateNumberWithColor(
rawData?.call_volume,
false,
true,
)}</td
>{abbreviateNumber(rawData?.call_volume)}</td
></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
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Call Premium</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]"
>{@html abbreviateNumberWithColor(
rawData?.call_premium,
false,
true,
)}</td
>{abbreviateNumber(rawData?.call_premium)}</td
></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
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Premium</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]"
>{@html abbreviateNumberWithColor(
>{abbreviateNumber(
rawData?.call_premium + rawData?.put_premium,
false,
true,
@ -71,22 +63,18 @@
></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
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Call Open Interest</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]"
>{@html abbreviateNumberWithColor(
rawData?.call_open_interest,
false,
true,
)}</td
>{abbreviateNumber(rawData?.call_open_interest)}</td
></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
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Implied Volatility (IV)
@ -97,71 +85,59 @@
></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
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Total Open Interest</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]"
>{@html abbreviateNumberWithColor(
rawData?.total_open_interest,
false,
true,
)}</td
>{abbreviateNumber(rawData?.total_open_interest)}</td
></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
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Net Premium
</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]"
>{@html rawData?.net_premium
? abbreviateNumberWithColor(rawData?.net_premium, false, true)
>{rawData?.net_premium
? abbreviateNumber(rawData?.net_premium)
: "n/a"}</td
></tr
>
</tbody>
</table>
<table class="w-[50%] text-sm text-white xl:min-w-[300px]">
<table class="w-[50%] text-sm xl:min-w-[300px]">
<tbody
><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
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Put Volume</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]"
>{@html abbreviateNumberWithColor(
rawData?.put_volume,
false,
true,
)}</td
>{abbreviateNumber(rawData?.put_volume)}</td
></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
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Put Premium</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]"
>{@html abbreviateNumberWithColor(
rawData?.put_premium,
false,
true,
)}</td
>{abbreviateNumber(rawData?.put_premium)}</td
></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
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>P/C Ratio</td
@ -173,23 +149,19 @@
>
<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
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Put Open Interest</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]"
>{@html abbreviateNumberWithColor(
rawData?.put_open_interest,
false,
true,
)}</td
>{abbreviateNumber(rawData?.put_open_interest)}</td
></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
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>IV Rank</td
@ -201,7 +173,7 @@
>
<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
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>🐻/🐂 Prem
@ -258,26 +230,26 @@
</div>
</HoverCard.Trigger>
<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="space-y-1 flex flex-col items-start text-white">
<div class="space-y-1 flex flex-col items-start">
<div>
Bearish: {@html abbreviateNumberWithColor(
Bearish: {abbreviateNumber(
rawData?.premium_ratio?.at(0),
false,
true,
)}
</div>
<div>
Neutral: {@html abbreviateNumberWithColor(
Neutral: {abbreviateNumber(
rawData?.premium_ratio?.at(1),
false,
true,
)}
</div>
<div>
Bullish: {@html abbreviateNumberWithColor(
Bullish: {abbreviateNumber(
rawData?.premium_ratio?.at(2),
false,
true,
@ -294,7 +266,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
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>(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]"
>
{#if rawData?.net_call_premium || rawData?.net_put_premium}
{@html abbreviateNumberWithColor(
rawData?.net_call_premium,
false,
true,
)}
x {@html abbreviateNumberWithColor(
rawData?.net_put_premium,
false,
true,
)}
{abbreviateNumber(rawData?.net_call_premium)}
x {abbreviateNumber(rawData?.net_put_premium)}
{:else}
n/a
{/if}

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

@ -1,5 +1,5 @@
<script lang="ts">
import { abbreviateNumberWithColor } from "$lib/utils";
import { abbreviateNumber } from "$lib/utils";
import InfoModal from "$lib/components/InfoModal.svelte";
export let tickerFlow = [];
@ -57,7 +57,7 @@
{#if tickerFlow?.length > 0}
<label
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
<InfoModal
@ -74,22 +74,21 @@
/>
</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"))}
</div>
<div
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6"
>
<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 class="ml-1 text-yellow-400">●</span>
</div>
<div class="flex items-baseline">
<span class="text-xl font-bold text-white">
{@html abbreviateNumberWithColor(
<span class="text-xl font-bold">
{abbreviateNumber(
findLastNonNull(tickerFlow, "net_volume"),
false,
true,
@ -99,15 +98,14 @@
</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 class="ml-1 text-green-600">●</span>
</div>
<div class="flex items-baseline">
<span class="text-xl font-bold text-white"
>{@html abbreviateNumberWithColor(
<span class="text-xl font-bold"
>{abbreviateNumber(
findLastNonNull(tickerFlow, "net_call_premium"),
false,
true,
@ -117,15 +115,14 @@
</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 class="ml-1 text-red-400">●</span>
</div>
<div class="flex items-baseline">
<span class="text-xl font-bold text-white"
>{@html abbreviateNumberWithColor(
<span class="text-xl font-bold"
>{abbreviateNumber(
findLastNonNull(tickerFlow, "net_put_premium"),
false,
true,

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

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

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

@ -319,9 +319,7 @@
>
Analyst Star Rankings
</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
</p>
</div>
@ -332,7 +330,7 @@
<div class="relative pl-14">
<dt class=" font-semibold leading-4 md:leading-7">
<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
xmlns="http://www.w3.org/2000/svg"
@ -340,7 +338,7 @@
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6 text-black"
class="h-6 w-6 text-white dark:text-black"
><path
stroke-linecap="round"
stroke-linejoin="round"
@ -350,14 +348,14 @@
</div>
Success Rate
</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.
</dd>
</div>
<div class="relative pl-14">
<dt class=" font-semibold leading-4 md:leading-7">
<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
xmlns="http://www.w3.org/2000/svg"
@ -365,7 +363,7 @@
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6 text-black"
class="h-6 w-6 text-white dark:text-black"
><path
stroke-linecap="round"
stroke-linejoin="round"
@ -375,7 +373,7 @@
</div>
Average Return
</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
rating.
</dd>
@ -383,7 +381,7 @@
<div class="relative pl-14">
<dt class=" font-semibold leading-4 md:leading-7">
<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
xmlns="http://www.w3.org/2000/svg"
@ -391,7 +389,7 @@
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6 text-black"
class="h-6 w-6 text-white dark:text-black"
><path
stroke-linecap="round"
stroke-linejoin="round"
@ -401,7 +399,7 @@
</div>
Rating Count
</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 score.
</dd>
@ -409,7 +407,7 @@
<div class="relative pl-14">
<dt class=" font-semibold leading-4 md:leading-7">
<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
xmlns="http://www.w3.org/2000/svg"
@ -417,7 +415,7 @@
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6 text-black"
class="h-6 w-6 text-white dark:text-black"
><path
stroke-linecap="round"
stroke-linejoin="round"
@ -427,7 +425,7 @@
</div>
Recency
</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
higher score.
</dd>

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

@ -83,7 +83,7 @@
<div class="relative pl-14">
<dt class=" font-semibold leading-4 md:leading-7">
<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
xmlns="http://www.w3.org/2000/svg"
@ -91,7 +91,7 @@
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6 text-black"
class="h-6 w-6 text-white dark:text-black"
><path
stroke-linecap="round"
stroke-linejoin="round"
@ -108,7 +108,7 @@
<div class="relative pl-14">
<dt class=" font-semibold leading-4 md:leading-7">
<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
xmlns="http://www.w3.org/2000/svg"
@ -116,7 +116,7 @@
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6 text-black"
class="h-6 w-6 text-white dark:text-black"
><path
stroke-linecap="round"
stroke-linejoin="round"
@ -134,7 +134,7 @@
<div class="relative pl-14">
<dt class=" font-semibold leading-4 md:leading-7">
<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
xmlns="http://www.w3.org/2000/svg"
@ -142,7 +142,7 @@
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6 text-black"
class="h-6 w-6 text-white dark:text-black"
><path
stroke-linecap="round"
stroke-linejoin="round"
@ -160,7 +160,7 @@
<div class="relative pl-14">
<dt class=" font-semibold leading-4 md:leading-7">
<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
xmlns="http://www.w3.org/2000/svg"
@ -168,7 +168,7 @@
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6 text-black"
class="h-6 w-6 text-white"
><path
stroke-linecap="round"
stroke-linejoin="round"

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

@ -410,7 +410,7 @@
viewBox="0 0 1024 1024"
><g transform="rotate(-90 512 512)"
><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"
/></g
></svg
@ -473,7 +473,7 @@
></g><g id="SVGRepo_iconCarrier">
<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"
fill="currentColor"
fill={$mode === "light" ? "#2C6288" : "white"}
></path>
</g></svg
>
@ -495,7 +495,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
><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"
/></svg
>
@ -505,7 +505,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
><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"
/></svg
>
@ -518,11 +518,11 @@
>
{#if isTickerIncluded}
<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"
viewBox="0 0 16 16"
><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"
/></svg
>
@ -532,7 +532,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
><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"
/></svg
>
@ -547,7 +547,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
><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"
/></svg
>
@ -616,7 +616,9 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
><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"
/></svg
>
@ -626,7 +628,9 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
><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"
/></svg
>
@ -648,7 +652,9 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
><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"
/></svg
>
@ -658,7 +664,9 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
><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"
/></svg
>
@ -680,7 +688,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
><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"
/></svg
>

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

@ -2,23 +2,11 @@
import { displayCompanyName, stockTicker, screenWidth } from "$lib/store";
import Infobox from "$lib/components/Infobox.svelte";
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";
export let data;
use([
LineChart,
GaugeChart,
BarChart,
GridComponent,
TooltipComponent,
CanvasRenderer,
]);
const price = data?.getStockQuote?.price?.toFixed(2) || 0;
@ -56,82 +44,158 @@
// Determine the value based on the consensus rating
switch (consensusRating) {
case "Strong Sell":
value = 0;
break;
case "Sell":
value = 0.25;
break;
case "Hold":
value = 0.5;
break;
case "Sell":
value = 1.5;
break;
case "Hold":
value = 2.5;
break;
case "Buy":
value = 0.75;
value = 3.5;
break;
case "Strong Buy":
value = 1;
value = 4.5;
break;
default:
value = 0.5;
break;
}
const option = {
silent: true,
animation: false,
const options = {
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: [
{
type: "gauge",
startAngle: 180,
endAngle: 0,
center: ["50%", "45%"],
radius: "70%",
min: 0,
max: 1,
splitNumber: 4,
axisLine: {
lineStyle: {
width: 25,
color: [
[0.2, "#9E190A"],
[0.4, "#D9220E"],
[0.6, "#FF9E21"],
[0.8, "#31B800"],
[1, "#008A00"],
],
name: "Rating",
data: [value],
animation: false,
dataLabels: {
enabled: true,
useHTML: true,
borderWidth: 0,
backgroundColor: "transparent",
style: {
textOutline: "none",
fontSize: "16px",
fontWeight: "bold",
},
formatter: function () {
const rating = this.y;
let ratingText = "";
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: {
icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
length: "25%",
width: 20,
offsetCenter: [0, "-30%"],
itemStyle: {
color: "#fff",
},
dial: {
radius: "80%",
backgroundColor: "#2A2E39",
baseWidth: 12,
baseLength: "0%",
rearLength: "0%",
},
axisTick: {
length: 0,
pivot: {
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() {
@ -201,18 +265,18 @@
},
},
chart: {
backgroundColor: "#09090B",
plotBackgroundColor: "#09090B",
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
height: 360,
animation: false,
},
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-right">${$screenWidth && $screenWidth < 640 ? "Next Year" : "12 Month Forecast"}</h3>
</div>`,
style: {
color: "white",
color: $mode === "light" ? "black" : "white",
width: "100%",
},
verticalAlign: "top",
@ -220,12 +284,12 @@
},
xAxis: {
gridLineWidth: 1,
gridLineColor: "#111827",
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
type: "datetime",
endOnTick: false,
labels: {
style: {
color: "#fff",
color: $mode === "light" ? "black" : "white",
},
formatter: function () {
const date = new Date(this.value);
@ -242,15 +306,14 @@
},
labels: {
style: {
color: "#fff",
color: $mode === "light" ? "black" : "white",
},
formatter: function () {
return `$${this.value.toFixed(0)}`;
},
},
gridLineWidth: 1,
gridLineColor: "#111827",
tickInterval: 20, // Adjust this value to reduce step size
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
},
series: [
@ -258,7 +321,7 @@
animation: false,
name: "Historical",
data: processedHistorical,
color: "#fff",
color: $mode === "light" ? "#007050" : "#fff",
marker: {
enabled: true,
symbol: "circle",
@ -280,7 +343,7 @@
animation: false,
name: "Average",
data: forecastAvg,
color: "#fff",
color: $mode === "light" ? "#007050" : "#fff",
dashStyle: "Dash",
marker: {
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: {
enabled: false,
},
@ -307,8 +457,15 @@
return options;
}
let optionsPieChart = getPieChart() || null;
let config = getPriceForecastChart() || null;
let optionsPieChart = null;
let config = null;
$: {
if ($mode) {
optionsPieChart = getPieChart() || null;
config = getPriceForecastChart() || null;
}
}
</script>
<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.`}
/>
<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 relative flex justify-center items-center overflow-hidden"
@ -328,7 +485,7 @@
{#if Object?.keys(data?.getPriceAnalysis)?.length > 0}
<div class="w-full mb-6 mt-3">
<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
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 class="app h-[160px]">
{#if optionsPieChart !== null}
<Chart {init} options={optionsPieChart} class="chart" />
{/if}
</div>
<div
class="max-h-[225px]"
use:highcharts={optionsPieChart}
></div>
<div class="-mt-36 text-center text-xl font-semibold">
Analyst Consensus: <span
class="font-bold {['Strong Buy', 'Buy']?.includes(
@ -373,18 +529,16 @@
</div>
<div class="grow pt-2 md:pt-4 lg:pl-4 lg:pt-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>
<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"
>
<table
class="w-full text-right text-tiny text-white xs:text-sm sm:"
>
<table class="w-full text-right text-tiny xs:text-sm">
<thead
><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"
>Target</th
> <th class="font-semibold">Low</th>
@ -395,7 +549,7 @@
>
<tbody
><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>${lowPriceTarget}</td>
<td>${avgPriceTarget}</td> <td>${medianPriceTarget}</td>
@ -406,22 +560,26 @@
<td
class={lowChange > 0
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}>{lowChange}%</td
: "text-red-600 dark:text-[#FF2F1F]"}
>{lowChange}%</td
>
<td
class={avgChange > 0
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}>{avgChange}%</td
: "text-red-600 dark:text-[#FF2F1F]"}
>{avgChange}%</td
>
<td
class={medianChange > 0
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}>{medianChange}%</td
: "text-red-600 dark:text-[#FF2F1F]"}
>{medianChange}%</td
>
<td
class={highChange > 0
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}>{highChange}%</td
: "text-red-600 dark:text-[#FF2F1F]"}
>{highChange}%</td
></tr
></tbody
>
@ -437,20 +595,3 @@
</div>
</div>
</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.`}
/>
<section
class="bg-default overflow-hidden text-white h-full min-h-screen mb-40 sm:mb-0 w-full"
>
<section class=" overflow-hidden 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="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"
>
<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}
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
@ -238,7 +236,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
>
@ -261,7 +259,7 @@
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
i
? 'text-black'
: 'text-white'}"
: ''}"
>
{item.title}
</span>
@ -275,10 +273,12 @@
</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 class="text-[1rem] font-normal text-white">Total Analysts</div>
<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
class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
@ -286,10 +286,10 @@
{numOfAnalyst}
</div>
</div>
<div class="p-4 bp:p-5 sm:p-6 border-r-0 md:border-r border-gray-600">
<div class="text-[1rem] font-normal text-white">
Consensus Rating
</div>
<div
class="p-4 bp:p-5 sm:p-6 border-r-0 md:border-r border-gray-300 dark:border-gray-600"
>
<div class="text-[1rem] font-normal">Consensus Rating</div>
<div
class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
>
@ -297,9 +297,9 @@
</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
class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl"
>
@ -309,16 +309,16 @@
</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
class="mt-1 break-words font-semibold leading-8 text-xl sm:text-2xl {changesPercentage >=
0
? "before:content-['+'] after:content-['%'] text-[#00FC50]"
? "before:content-['+'] after:content-['%'] text-green-600 dark:text-[#00FC50]"
: changesPercentage < 0
? "after:content-['%'] text-[#FF2F1F]"
: 'text-white'}"
? "after:content-['%'] text-red-600 dark:text-[#FF2F1F]"
: ''}"
>
{changesPercentage}
</div>
@ -336,44 +336,32 @@
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">
<h3 class="text-xl sm:text-2xl text-white font-bold">
Ratings History
</h3>
<h3 class="text-xl sm:text-2xl font-bold">Ratings History</h3>
</div>
</div>
<div class=" w-full m-auto mb-4 overflow-x-auto lg:overflow-hidden">
<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>
<td class="text-white font-semibold text-sm text-start"
>Analyst</td
>
<td class="text-white font-semibold text-sm text-start"
>Firm</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=" font-semibold text-sm text-start">Analyst</td>
<td class=" font-semibold text-sm text-start">Firm</td>
<td class=" font-semibold text-sm text-end">Rating</td>
<td class=" font-semibold text-sm text-end">Action</td>
<td class=" 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>
</thead>
<tbody>
{#each ["Pro", "Plus"]?.includes(data?.user?.tier) ? historyList : historyList?.slice(0, 3) as item, index}
<tr
class=" {latestInfoDate(item?.date)
? 'bg-[#F9AB00]/10'
: 'odd:bg-odd '} {index + 1 ===
? 'bg-blue-100 dark:bg-[#F9AB00]/10 shadow'
: 'dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd'} {index +
1 ===
historyList?.slice(0, 3)?.length &&
!['Pro', 'Plus']?.includes(data?.user?.tier)
? 'opacity-[0.1]'
@ -387,7 +375,7 @@
href={item?.analystId !== null
? `/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}
</a>
@ -407,7 +395,7 @@
</svg>
{:else}
<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"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
@ -430,7 +418,7 @@
</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?.slice(0, charNumber) + "..."
@ -438,7 +426,7 @@
</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
class=" {['Strong Buy', 'Buy']?.includes(
@ -458,7 +446,7 @@
</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(
"Initiates Coverage On",
@ -467,7 +455,7 @@
</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-row items-center">
@ -503,12 +491,12 @@
</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">
{#if latestInfoDate(item?.date)}
{#if !latestInfoDate(item?.date)}
<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
</label>
@ -529,7 +517,7 @@
{:else if activeIdx === 1}
<div class="w-full flex justify-start items-center m-auto mt-10 mb-6">
<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
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="mx-auto max-w-7xl px-3 xs:px-6 lg:px-8">
<div class="mx-auto max-w-2xl md:text-center">
<h3
class="mt-2 text-2xl font-bold tracking-tight text-white bp:text-3xl"
>
<h3 class="mt-2 text-2xl font-bold tracking-tight bp:text-3xl">
Analyst Star Rankings
</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
</p>
</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"
>
<div class="relative pl-14">
<dt
class=" font-semibold leading-4 text-white md:leading-7"
>
<dt class=" font-semibold leading-4 md:leading-7">
<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
xmlns="http://www.w3.org/2000/svg"
@ -579,7 +563,7 @@
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6 text-black"
class="h-6 w-6 text-white dark:text-black"
><path
stroke-linecap="round"
stroke-linejoin="round"
@ -589,16 +573,14 @@
</div>
Success Rate
</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.
</dd>
</div>
<div class="relative pl-14">
<dt
class=" font-semibold leading-4 text-white md:leading-7"
>
<dt class=" font-semibold leading-4 md:leading-7">
<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
xmlns="http://www.w3.org/2000/svg"
@ -606,7 +588,7 @@
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6 text-black"
class="h-6 w-6 text-white dark:text-black"
><path
stroke-linecap="round"
stroke-linejoin="round"
@ -616,17 +598,15 @@
</div>
Average Return
</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
rating.
</dd>
</div>
<div class="relative pl-14">
<dt
class=" font-semibold leading-4 text-white md:leading-7"
>
<dt class=" font-semibold leading-4 md:leading-7">
<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
xmlns="http://www.w3.org/2000/svg"
@ -634,7 +614,7 @@
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6 text-black"
class="h-6 w-6 text-white dark:text-black"
><path
stroke-linecap="round"
stroke-linejoin="round"
@ -644,17 +624,15 @@
</div>
Rating Count
</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
score.
</dd>
</div>
<div class="relative pl-14">
<dt
class=" font-semibold leading-4 text-white md:leading-7"
>
<dt class=" font-semibold leading-4 md:leading-7">
<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
xmlns="http://www.w3.org/2000/svg"
@ -662,7 +640,7 @@
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6 text-black"
class="h-6 w-6 text-white dark:text-black"
><path
stroke-linecap="round"
stroke-linejoin="round"
@ -672,7 +650,7 @@
</div>
Recency
</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
higher score.
</dd>

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

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

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

@ -3,7 +3,7 @@
import DailyStats from "$lib/components/Options/DailyStats.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 UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
@ -90,7 +90,7 @@
marker +
param.seriesName +
": " +
abbreviateNumberWithColor(param.value, false, true) +
abbreviateNumber(param.value, false, true) +
"<br/>";
});
@ -282,7 +282,7 @@
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 relative flex justify-center items-center overflow-hidden"
@ -318,15 +318,15 @@
</select>
</div>
<div class="app w-full bg-default">
<div class="app w-full ">
{#if filteredList?.length !== 0}
<Chart {init} {options} class="chart" />
{:else}
<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
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
class="w-5 h-5 inline-block sm:mr-2 shrink-0"
@ -345,64 +345,42 @@
-->
{#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
</h3>
<div class="flex justify-start items-center m-auto overflow-x-auto">
<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="">
<td class="text-white font-semibold text-sm text-start"
>Date</td
>
<td class="text-white font-semibold text-sm text-end"
>% Change</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=" font-semibold text-sm text-start">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=" font-semibold text-sm text-center">Volume</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"
<td class=" font-semibold text-sm text-end"
>Vol/30D</td
>
-->
<!--
<td class="text-white font-semibold text-sm text-end"
<td class=" font-semibold text-sm text-end"
>🐻/🐂 Prem</td
>
-->
<td class="text-white font-semibold text-sm text-end"
>Total OI</td
>
<td class="text-white font-semibold text-sm text-end"
>OI Change</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=" font-semibold text-sm text-end">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=" font-semibold text-sm text-end">C Prem</td>
<td class=" 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
>
<td class="text-white font-semibold text-sm text-end"
<td class=" font-semibold text-sm text-end"
>Total Prem</td
>
-->
@ -411,32 +389,28 @@
<tbody>
{#each data?.user?.tier === "Pro" ? optionList : optionList?.slice(0, 3) as item, index}
<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 ===
optionList?.slice(0, 3)?.length &&
!['Pro']?.includes(data?.user?.tier)
? '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)}
</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}
<span class="text-green-600 dark:text-[#00FC50]"
>+{item?.changesPercentage >= 1000
? abbreviateNumberWithColor(
item?.changesPercentage,
)
? abbreviateNumber(item?.changesPercentage)
: item?.changesPercentage?.toFixed(2)}%</span
>
{:else if item?.changesPercentage < 0 && item?.changesPercentage !== null}
<span class="text-red-600 dark:text-[#FF2F1F]"
>{item?.changesPercentage <= -1000
? abbreviateNumberWithColor(
item?.changesPercentage,
)
? abbreviateNumber(item?.changesPercentage)
: item?.changesPercentage?.toFixed(2)}%
</span>
{:else}
@ -444,11 +418,11 @@
{/if}
</td>
<td class="text-sm sm:text-[1rem] text-end text-white">
<td class="text-sm sm:text-[1rem] text-end">
{item?.putCallRatio}
</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")}
</td>
@ -464,7 +438,7 @@
{item?.put_volume?.toLocaleString("en-US")}
</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)}
</td>
-->
@ -512,24 +486,24 @@
>
<div class="flex justify-between space-x-4">
<div
class="space-y-1 flex flex-col items-start text-white"
class="space-y-1 flex flex-col items-start "
>
<div>
Bearish: {@html abbreviateNumberWithColor(
Bearish: {@html abbreviateNumber(
item?.premium_ratio[0],
false,
true,
)}
</div>
<div>
Neutral: {@html abbreviateNumberWithColor(
Neutral: {@html abbreviateNumber(
item?.premium_ratio[1],
false,
true,
)}
</div>
<div>
Bullish: {@html abbreviateNumberWithColor(
Bullish: {@html abbreviateNumber(
item?.premium_ratio[2],
false,
true,
@ -542,15 +516,15 @@
</td>
-->
<td class="text-sm sm:text-[1rem] text-end text-white">
{@html abbreviateNumberWithColor(
<td class="text-sm sm:text-[1rem] text-end">
{@html abbreviateNumber(
item?.total_open_interest,
false,
true,
)}
</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}
<span class="text-green-600 dark:text-[#00FC50]"
>+{item?.changeOI?.toLocaleString("en-US")}</span
@ -560,58 +534,50 @@
>{item?.changeOI?.toLocaleString("en-US")}
</span>
{:else}
<span class="text-white"> n/a </span>
<span class=""> n/a </span>
{/if}
</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}
<span class="text-green-600 dark:text-[#00FC50]"
>+{item?.changesPercentageOI >= 1000
? abbreviateNumberWithColor(
item?.changesPercentageOI,
)
? abbreviateNumber(item?.changesPercentageOI)
: item?.changesPercentageOI?.toFixed(2)}%</span
>
{:else if item?.changesPercentageOI < 0}
<span class="text-red-600 dark:text-[#FF2F1F]"
>{item?.changesPercentageOI <= -1000
? abbreviateNumberWithColor(
item?.changesPercentageOI,
)
? abbreviateNumber(item?.changesPercentageOI)
: item?.changesPercentageOI?.toFixed(2)}%
</span>
{:else}
<span class="text-white"> n/a </span>
<span class=""> n/a </span>
{/if}
</td>
<td class="text-sm sm:text-[1rem] text-end text-white">
{@html abbreviateNumberWithColor(
<td class="text-sm sm:text-[1rem] text-end">
{@html abbreviateNumber(
item?.call_premium,
false,
true,
)}
</td>
<td class="text-sm sm:text-[1rem] text-end text-white">
{@html abbreviateNumberWithColor(
item?.put_premium,
false,
true,
)}
<td class="text-sm sm:text-[1rem] text-end">
{@html abbreviateNumber(item?.put_premium, false, true)}
</td>
<!--
<td class="text-sm sm:text-[1rem] text-end text-white">
{@html abbreviateNumberWithColor(
<td class="text-sm sm:text-[1rem] text-end ">
{@html abbreviateNumber(
item?.net_premium,
false,
true,
)}
</td>
<td class="text-sm sm:text-[1rem] text-end text-white">
{@html abbreviateNumberWithColor(
<td class="text-sm sm:text-[1rem] text-end ">
{@html abbreviateNumber(
item?.total_premium,
false,
true,