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

ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2025-03-09 00:44:30 +01:00
parent e2f2fab507
commit 8f69e96e06
10 changed files with 162 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.css
View File

@ -55,7 +55,7 @@
.table {
tr {
@apply border-b border-gray-800;
@apply border-b border-gray-300 dark:border-gray-800;
}
}

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

@ -179,7 +179,9 @@
<HoverCard.Trigger
class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
>
<a href={getHref(symbol)} class="sm:hover:text-white text-blue-400"
<a
href={getHref(symbol)}
class="sm:hover:text-muted dark:sm:hover:text-white text-blue-500 dark:text-blue-400"
>{symbol?.length !== 0 ? symbol : "-"}</a
>
</HoverCard.Trigger>

6
src/lib/components/Table/TableHeader.svelte
View File

@ -16,11 +16,13 @@
`;
</script>
<tr class="bg-default border-b border-[#27272A]">
<tr
class="bg-white dark:bg-default border-b border-[#27272A] text-muted dark:text-white"
>
{#each columns as column}
<th
on:click={() => sortData(column.key)}
class="cursor-pointer select-none text-white font-semibold text-sm whitespace-nowrap {column.align ===
class="cursor-pointer select-none font-semibold text-sm whitespace-nowrap {column.align ===
'right'
? 'text-end'
: 'text-start'}"

2
src/lib/components/shadcn/dropdown-menu/dropdown-menu-content.svelte
View File

@ -17,7 +17,7 @@
{transitionConfig}
{sideOffset}
class={cn(
"z-50 min-w-[8rem] no-scrollbar rounded-md border border-gray-500 bg-default p-1 text-white shadow-md focus:outline-hidden",
"z-50 min-w-[8rem] no-scrollbar rounded-md border border-gray-300 dark:border-gray-500 bg-white dark:bg-default p-1 text-muted dark:text-white shadow-md focus:outline-hidden",
className,
)}
{...$$restProps}

16
src/lib/components/shadcn/dropdown-menu/dropdown-menu-separator.svelte
View File

@ -1,14 +1,14 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
import { cn } from "$lib/utils";
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
import { cn } from "$lib/utils";
type $$Props = DropdownMenuPrimitive.SeparatorProps;
type $$Props = DropdownMenuPrimitive.SeparatorProps;
let className: $$Props["class"] = undefined;
export { className as class };
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<DropdownMenuPrimitive.Separator
class={cn("-mx-1 my-1 h-px bg-gray-800", className)}
{...$$restProps}
/>
class={cn("-mx-1 my-1 h-px bg-gray-300 dark:bg-gray-800", className)}
{...$$restProps}
/>

2
src/lib/components/shadcn/dropdown-menu/dropdown-menu-sub-content.svelte
View File

@ -18,7 +18,7 @@
{transition}
{transitionConfig}
class={cn(
"z-50 min-w-[8rem] rounded-md border bg-default p-1 text-white shadow-lg focus:outline-hidden",
"z-50 min-w-[8rem] rounded-md border bg-white dark:bg-default p-1 text-white shadow-lg focus:outline-hidden",
className,
)}
{...$$restProps}

5
src/routes/+layout.svelte
View File

@ -53,7 +53,6 @@
import Newspaper from "lucide-svelte/icons/newspaper";
import AudioLine from "lucide-svelte/icons/audio-lines";
import Gem from "lucide-svelte/icons/gem";
import stocknear_logo from "$lib/images/stocknear_logo.png";
export let data;
@ -812,13 +811,13 @@
</Sheet.Content>
</Sheet.Root>
<a href="/" class="-ml-2 flex shrink-0">
<a href="/" class="-ml-2 flex flex-row items-center shrink-0">
<img
class="avatar w-9 3xl:w-10 rounded-full"
src="/pwa-192x192.png"
alt="Stocknear Logo"
/>
<span class="text-muted dark:text-white font-semibold ml-2 text-lg">Stocknear</span>
<span class="text-muted dark:text-white font-semibold ml-2 text-xl">Stocknear</span>
</a>
<div

38
src/routes/market-flow/+layout.svelte
View File

@ -27,12 +27,12 @@
</script>
<section
class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pb-40 pt-5 px-4 lg:px-3"
class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pb-40 pt-5 px-4 lg:px-3 text-muted dark:text-white"
>
<div class="text-sm sm:text-[1rem] breadcrumbs">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
<li class="text-gray-300">Market Flow</li>
<li><a href="/" class="text-muted dark:text-gray-300">Home</a></li>
<li class="text-muted dark:text-gray-300">Market Flow</li>
</ul>
</div>
@ -42,18 +42,20 @@
class="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4 lg:pr-10">
<h1 class="mb-3 text-white text-2xl sm:text-3xl font-bold">
<h1 class="mb-3 text-2xl sm:text-3xl font-bold">
{activeIdx === 0 ? "Market Flow" : "Sector Flow"}
</h1>
<nav class=" border-b-[2px] overflow-x-auto whitespace-nowrap">
<ul class="flex flex-row items-center w-full text-lg text-white">
<nav
class="border-[#2C6288] dark:border-white border-b-[2px] overflow-x-auto whitespace-nowrap"
>
<ul class="flex flex-row items-center w-full text-lg">
{#each tabs as item, i}
<a
href={item?.path}
class="p-2 px-5 cursor-pointer {activeIdx === i
? 'text-white bg-primary/90 font-semibold'
: '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'}"
>
{item.title}
</a>
@ -67,38 +69,42 @@
</main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
<div
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
>
<a
href="/list/highest-open-interest-change"
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
<h2 class="text-start text-xl font-semibold ml-3">
Highest OI Change
</h2>
<ArrowLogo class="w-8 h-8 mr-3 shrink-0" />
<ArrowLogo
class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
/>
</div>
<span class="text-white p-3 ml-3 mr-3">
<span class=" p-3 ml-3 mr-3">
Stocks with the highest changes in open interest (OI).
</span>
</a>
</div>
<div
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
>
<a
href="/list/highest-option-premium"
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
<h2 class="text-start text-xl font-semibold ml-3">
Highest Option Premium
</h2>
<ArrowLogo class="w-8 h-8 mr-3 shrink-0" />
<ArrowLogo
class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
/>
</div>
<span class="text-white p-3 ml-3 mr-3">
<span class=" p-3 ml-3 mr-3">
Stocks with the highest option premium.
</span>
</a>

124
src/routes/market-flow/+page.svelte
View File

@ -1,8 +1,9 @@
<script lang="ts">
import HoverStockChart from "$lib/components/HoverStockChart.svelte";
import TableHeader from "$lib/components/Table/TableHeader.svelte";
import { abbreviateNumberWithColor } from "$lib/utils";
import { abbreviateNumber } from "$lib/utils";
import InfoModal from "$lib/components/InfoModal.svelte";
import { mode } from "mode-watcher";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
@ -255,8 +256,8 @@
const options = {
chart: {
type: "column",
backgroundColor: "#09090B",
plotBackgroundColor: "#09090B",
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
height: 360, // Set the maximum height for the chart
animation: false,
},
@ -295,7 +296,7 @@
// Loop through each point in the shared tooltip
this.points.forEach((point) => {
tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span>
<span class="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumberWithColor(
<span class="text-white font-normal text-sm" >${abbreviateNumber(
point.y,
)}</span><br>`;
});
@ -309,14 +310,12 @@
min: startTime, // Force start at 9:30
max: endTime, // Force end at 16:10
crosshair: {
color: "#fff", // Set the color of the crosshair line
color: $mode === "light" ? "black" : "white", // Set the color of the crosshair line
width: 1, // Adjust the line width as needed
dashStyle: "Solid",
},
labels: {
style: {
color: "#fff",
},
style: { color: $mode === "light" ? "black" : "white" },
distance: 20, // Increases space between label and axis
formatter: function () {
return new Date(this.value).toLocaleTimeString("en-US", {
@ -352,9 +351,9 @@
},
{
gridLineWidth: 1,
gridLineColor: "#111827",
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
labels: {
style: { color: "white" },
style: { color: $mode === "light" ? "black" : "white" },
},
title: { text: null },
opposite: true,
@ -367,7 +366,7 @@
type: "spline",
data: priceSeries,
yAxis: 0,
color: "#fff",
color: $mode === "light" ? "#2C6288" : "#fff",
marker: {
enabled: false,
states: {
@ -379,12 +378,13 @@
lineWidth: 2,
zIndex: 10,
},
{
name: "Net Call Prem",
type: "spline",
data: netCallPremSeries,
yAxis: 1,
color: "#90EE90",
color: $mode === "light" ? "#208646" : "#90EE90",
marker: {
enabled: false,
states: {
@ -399,7 +399,7 @@
type: "spline",
data: netPutPremSeries,
yAxis: 1,
color: "#FF6B6B",
color: $mode === "light" ? "#DC2626" : "#FF6B6B",
marker: {
enabled: false,
states: {
@ -427,7 +427,11 @@
return options;
}
config = marketTideData ? getPlotOptions() : null;
$: {
if ($mode) {
config = marketTideData ? getPlotOptions() : null;
}
}
</script>
<SEO
@ -435,7 +439,7 @@
description="Get real-time insights on S&P 500 market flow sentiment through options premium analysis. Track trends and make informed trading decisions."
/>
<section class="w-full overflow-hidden">
<section class="w-full overflow-hidden text-muted dark:text-white">
<div class="w-full overflow-hidden m-auto">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div
@ -444,18 +448,18 @@
<main class="w-full">
<div class="w-full m-auto">
{#if config !== null}
<p class="mt-4 text-white">
<p class="mt-4">
Market Flow evaluates the balance between advancing and
declining stocks by analyzing SP& 500 price movements, net call
premiums and net put premiums, providing a real-time snapshot of
market sentiment and momentum. <a
href="/learning-center/article/market-sentiment-through-options-activity-riding-the-tide"
class="text-blue-400 sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
>Learn more here.</a
>
</p>
<div class="text-white text-sm italic mt-5 mb-3">
<div class=" text-sm italic mt-5 mb-3">
Last Updated: {formatDate(
findLastNonNull(marketTideData, "time"),
)}
@ -464,15 +468,16 @@
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="dark:text-[#c3c6d0] 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">
{@html abbreviateNumber(
findLastNonNull(marketTideData, "net_volume"),
false,
true,
@ -482,15 +487,16 @@
</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="dark:text-[#c3c6d0] text-sm mb-2 flex items-center"
>
<span>Net Call Prem</span>
<span class="ml-1 text-green-500">●</span>
</div>
<div class="flex items-baseline">
<span class="text-xl font-bold text-white"
>{@html abbreviateNumberWithColor(
<span class="text-xl font-bold"
>{@html abbreviateNumber(
findLastNonNull(marketTideData, "net_call_premium"),
false,
true,
@ -500,15 +506,16 @@
</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="dark:text-[#c3c6d0] 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"
>{@html abbreviateNumber(
findLastNonNull(marketTideData, "net_put_premium"),
false,
true,
@ -519,7 +526,7 @@
</div>
<div
class=" border border-gray-800 rounded w-full"
class=" border border-gray-300 dark:border-gray-800 rounded w-full"
use:highcharts={config}
></div>
{/if}
@ -530,7 +537,7 @@
<div class="flex flex-row items-center">
<label
for="topPosNetPrem"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl font-bold"
class="mr-1 cursor-pointer flex flex-row items-center text-xl font-bold"
>
Top Stocks by Positive Net Prem
</label>
@ -546,7 +553,7 @@
class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto"
>
<table
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md text-white 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-table border border-gray-300 dark:border-gray-800 m-auto"
>
<thead>
<TableHeader
@ -558,7 +565,7 @@
<tbody>
{#each displayPosTickers as item, index}
<tr
class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd {index +
class="bg-white dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
1 ===
originalPosTickers?.length &&
!['Pro']?.includes(data?.user?.tier)
@ -566,7 +573,7 @@
: ''}"
>
<td
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.rank}
</td>
@ -578,7 +585,7 @@
</td>
<td
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.name?.length > 20
? item?.name?.slice(0, 20) + "..."
@ -586,7 +593,7 @@
</td>
<td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.price}
</td>
@ -594,28 +601,28 @@
<td
class="text-sm sm:text-[1rem] {item?.changesPercentage >=
0
? "text-[#00FC50] before:content-['+'] "
: 'text-[#FF2F1F]'} text-end"
? "text-[#208646] dark:text-[#00FC50] before:content-['+'] "
: 'text-[#DC2626] dark:text-[#FF2F1F]'} text-end"
>
{item?.changesPercentage}%
{item?.changesPercentage?.toFixed(2)}%
</td>
<td class="text-sm sm:text-[1rem] text-end">
{@html abbreviateNumberWithColor(
{@html abbreviateNumber(
item?.net_premium,
false,
true,
)}
</td>
<td class="text-sm sm:text-[1rem] text-end">
{@html abbreviateNumberWithColor(
{@html abbreviateNumber(
item?.net_call_premium,
false,
true,
)}
</td>
<td class="text-sm sm:text-[1rem] text-end">
{@html abbreviateNumberWithColor(
{@html abbreviateNumber(
item?.net_put_premium,
false,
true,
@ -635,7 +642,7 @@
<div class="flex flex-row items-center">
<label
for="topNegNetPrem"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl font-bold"
class="mr-1 cursor-pointer flex flex-row items-center text-xl font-bold"
>
Top Stocks by Negative Net Prem
</label>
@ -650,7 +657,7 @@
class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto"
>
<table
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md text-white 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-table border border-gray-300 dark:border-gray-800 m-auto"
>
<thead>
<TableHeader
@ -662,7 +669,7 @@
<tbody>
{#each displayNegTickers as item, index}
<tr
class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd {index +
class="bg-white dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
1 ===
originalNegTickers?.length &&
!['Pro']?.includes(data?.user?.tier)
@ -670,7 +677,7 @@
: ''}"
>
<td
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.rank}
</td>
@ -682,7 +689,7 @@
</td>
<td
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.name?.length > 20
? item?.name?.slice(0, 20) + "..."
@ -690,7 +697,7 @@
</td>
<td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.price}
</td>
@ -705,21 +712,21 @@
</td>
<td class="text-sm sm:text-[1rem] text-end">
{@html abbreviateNumberWithColor(
{@html abbreviateNumber(
item?.net_premium,
false,
true,
)}
</td>
<td class="text-sm sm:text-[1rem] text-end">
{@html abbreviateNumberWithColor(
{@html abbreviateNumber(
item?.net_call_premium,
false,
true,
)}
</td>
<td class="text-sm sm:text-[1rem] text-end">
{@html abbreviateNumberWithColor(
{@html abbreviateNumber(
item?.net_put_premium,
false,
true,
@ -742,10 +749,3 @@
</div>
</div>
</section>
<style lang="scss">
.chart {
width: 100%;
transition: none;
}
</style>

133
src/routes/market-flow/sector-flow/+page.svelte
View File

@ -3,7 +3,7 @@
import HoverStockChart from "$lib/components/HoverStockChart.svelte";
import TableHeader from "$lib/components/Table/TableHeader.svelte";
import { abbreviateNumberWithColor, sectorList } from "$lib/utils";
import { abbreviateNumber, sectorList } from "$lib/utils";
import InfoModal from "$lib/components/InfoModal.svelte";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
@ -11,6 +11,7 @@
import { Button } from "$lib/components/shadcn/button/index.js";
import SEO from "$lib/components/SEO.svelte";
import highcharts from "$lib/highcharts.ts";
import { mode } from "mode-watcher";
export let data;
let isLoading = false;
@ -280,8 +281,8 @@
const options = {
chart: {
type: "column",
backgroundColor: "#09090B",
plotBackgroundColor: "#09090B",
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
height: 360, // Set the maximum height for the chart
animation: false,
},
@ -320,7 +321,7 @@
// Loop through each point in the shared tooltip
this.points.forEach((point) => {
tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span>
<span class="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumberWithColor(
<span class="text-white font-normal text-sm" >${abbreviateNumber(
point.y,
)}</span><br>`;
});
@ -334,13 +335,13 @@
min: startTime, // Force start at 9:30
max: endTime, // Force end at 16:10
crosshair: {
color: "#fff", // Set the color of the crosshair line
color: $mode === "light" ? "black" : "white", // Set the color of the crosshair line
width: 1, // Adjust the line width as needed
dashStyle: "Solid",
},
labels: {
style: {
color: "#fff",
color: $mode === "light" ? "black" : "white",
},
distance: 20, // Increases space between label and axis
formatter: function () {
@ -377,9 +378,9 @@
},
{
gridLineWidth: 1,
gridLineColor: "#111827",
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
labels: {
style: { color: "white" },
style: { color: $mode === "light" ? "black" : "white" },
},
title: { text: null },
opposite: true,
@ -392,7 +393,7 @@
type: "spline",
data: priceSeries,
yAxis: 0,
color: "#fff",
color: $mode === "light" ? "#2C6288" : "#fff",
marker: {
enabled: false,
states: {
@ -404,12 +405,13 @@
lineWidth: 2,
zIndex: 10,
},
{
name: "Net Call Prem",
type: "spline",
data: netCallPremSeries,
yAxis: 1,
color: "#90EE90",
color: $mode === "light" ? "#208646" : "#90EE90",
marker: {
enabled: false,
states: {
@ -424,7 +426,7 @@
type: "spline",
data: netPutPremSeries,
yAxis: 1,
color: "#FF6B6B",
color: $mode === "light" ? "#DC2626" : "#FF6B6B",
marker: {
enabled: false,
states: {
@ -456,7 +458,7 @@
config = marketTideData ? getPlotOptions() : null;
$: {
if (selectedSector) {
if (selectedSector || $mode) {
topPosNetPremium =
data?.getData?.topPosNetPremium[sectorDict[selectedSector]] || [];
topNegNetPremium =
@ -479,7 +481,9 @@
description="Get real-time insights on all sectors of the stock market flow sentiment through options premium analysis. Track trends and make informed trading decisions."
/>
<section class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden">
<section
class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden text-muted dark:text-white"
>
<div class="w-full overflow-hidden m-auto">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div
@ -488,7 +492,7 @@
<main class="w-full">
<div class="w-full m-auto">
{#if config !== null}
<p class="mt-4 text-white">
<p class="mt-4">
<strong>{selectedSector}</strong> Flow tracks sector stocks, net
call/put premiums, and price movements to gauge market sentiment
and momentum in real time.
@ -497,7 +501,7 @@
<div
class="flex flex-col sm:flex-row items-start sm:items-center sm:justify-between w-full mt-2 sm:mt-0"
>
<div class="text-white text-xs sm:text-sm italic mt-5 mb-5">
<div class=" text-xs sm:text-sm italic mt-5 mb-5">
Last Updated: {formatDate(
findLastNonNull(marketTideData, "time"),
)}
@ -507,10 +511,9 @@
<DropdownMenu.Trigger asChild let:builder>
<Button
builders={[builder]}
class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
class="w-full border-gray-300 font-semibold dark:font-normal dark:border-gray-600 border bg-white dark:bg-default sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 rounded-md truncate"
>
<span class="truncate text-white">{selectedSector}</span
>
<span class="truncate">{selectedSector}</span>
<svg
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
viewBox="0 0 20 20"
@ -529,7 +532,7 @@
<DropdownMenu.Content
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
>
<DropdownMenu.Label class="text-gray-400">
<DropdownMenu.Label class="text-muted dark:text-gray-400">
Select Sector
</DropdownMenu.Label>
<DropdownMenu.Separator />
@ -538,14 +541,14 @@
{#if sector === "Technology" || data?.user?.tier === "Pro"}
<DropdownMenu.Item
on:click={() => (selectedSector = sector)}
class="cursor-pointer hover:bg-primary"
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
>
{sector}
</DropdownMenu.Item>
{:else}
<DropdownMenu.Item
on:click={() => goto("/pricing")}
class="cursor-pointer hover:bg-primary"
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
>
{sector}
<svg
@ -574,15 +577,14 @@
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">
{@html abbreviateNumber(
findLastNonNull(marketTideData, "net_volume"),
false,
true,
@ -592,15 +594,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-500">●</span>
</div>
<div class="flex items-baseline">
<span class="text-xl font-bold text-white"
>{@html abbreviateNumberWithColor(
<span class="text-xl font-bold"
>{@html abbreviateNumber(
findLastNonNull(marketTideData, "net_call_premium"),
false,
true,
@ -610,15 +611,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"
>{@html abbreviateNumber(
findLastNonNull(marketTideData, "net_put_premium"),
false,
true,
@ -629,7 +629,7 @@
</div>
<div
class="chart border border-gray-800 rounded"
class="chart border border-gray-300 dark:border-gray-800 rounded"
use:highcharts={config}
></div>
{/if}
@ -640,7 +640,7 @@
<div class="flex flex-row items-center">
<label
for="topPosNetPrem"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl font-bold"
class="mr-1 cursor-pointer flex flex-row items-center text-xl font-bold"
>
Top Stocks by Positive Net Prem
</label>
@ -656,7 +656,7 @@
class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto"
>
<table
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md text-white 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-table border border-gray-300 dark:border-gray-300 dark:border-gray-800 m-auto"
>
<thead>
<TableHeader
@ -668,7 +668,7 @@
<tbody>
{#each displayPosTickers as item, index}
<tr
class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd {index +
class="bg-white dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
1 ===
originalPosTickers?.length &&
!['Pro']?.includes(data?.user?.tier)
@ -676,7 +676,7 @@
: ''}"
>
<td
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.rank}
</td>
@ -688,7 +688,7 @@
</td>
<td
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.name?.length > 20
? item?.name?.slice(0, 20) + "..."
@ -696,7 +696,7 @@
</td>
<td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.price}
</td>
@ -704,28 +704,28 @@
<td
class="text-sm sm:text-[1rem] {item?.changesPercentage >=
0
? "text-[#00FC50] before:content-['+'] "
: 'text-[#FF2F1F]'} text-end"
? "text-[#208646] dark:text-[#00FC50] before:content-['+'] "
: 'text-[#DC2626] dark:text-[#FF2F1F]'} text-end"
>
{item?.changesPercentage}%
{item?.changesPercentage?.toFixed(2)}%
</td>
<td class="text-sm sm:text-[1rem] text-end">
{@html abbreviateNumberWithColor(
{@html abbreviateNumber(
item?.net_premium,
false,
true,
)}
</td>
<td class="text-sm sm:text-[1rem] text-end">
{@html abbreviateNumberWithColor(
{@html abbreviateNumber(
item?.net_call_premium,
false,
true,
)}
</td>
<td class="text-sm sm:text-[1rem] text-end">
{@html abbreviateNumberWithColor(
{@html abbreviateNumber(
item?.net_put_premium,
false,
true,
@ -745,7 +745,7 @@
<div class="flex flex-row items-center">
<label
for="topNegNetPrem"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl font-bold"
class="mr-1 cursor-pointer flex flex-row items-center text-xl font-bold"
>
Top Stocks by Negative Net Prem
</label>
@ -761,7 +761,7 @@
class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto"
>
<table
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md text-white 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-table border border-gray-300 dark:border-gray-300 dark:border-gray-800 m-auto"
>
<thead>
<TableHeader
@ -773,7 +773,7 @@
<tbody>
{#each displayNegTickers as item, index}
<tr
class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd {index +
class="bg-white dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
1 ===
originalNegTickers?.length &&
!['Pro']?.includes(data?.user?.tier)
@ -781,7 +781,7 @@
: ''}"
>
<td
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.rank}
</td>
@ -793,7 +793,7 @@
</td>
<td
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.name?.length > 20
? item?.name?.slice(0, 20) + "..."
@ -801,7 +801,7 @@
</td>
<td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.price}
</td>
@ -816,21 +816,21 @@
</td>
<td class="text-sm sm:text-[1rem] text-end">
{@html abbreviateNumberWithColor(
{@html abbreviateNumber(
item?.net_premium,
false,
true,
)}
</td>
<td class="text-sm sm:text-[1rem] text-end">
{@html abbreviateNumberWithColor(
{@html abbreviateNumber(
item?.net_call_premium,
false,
true,
)}
</td>
<td class="text-sm sm:text-[1rem] text-end">
{@html abbreviateNumberWithColor(
{@html abbreviateNumber(
item?.net_put_premium,
false,
true,
@ -853,20 +853,3 @@
</div>
</div>
</section>
<style>
.app {
height: 600px;
max-width: 100%; /* Ensure chart width doesn't exceed the container */
}
@media (max-width: 640px) {
.app {
height: 510px;
}
}
.chart {
width: 100%;
}
</style>