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

ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2025-03-11 17:32:47 +01:00
parent e7b09f0407
commit 8703879150
11 changed files with 136 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/lib/components/Options/GreekByExpiry.svelte
View File

@ -1,9 +1,10 @@
<script lang="ts"> <script lang="ts">
import { abbreviateNumberWithColor, abbreviateNumber } from "$lib/utils"; import { abbreviateNumber } from "$lib/utils";
import { onMount } from "svelte"; import { onMount } from "svelte";
import TableHeader from "$lib/components/Table/TableHeader.svelte"; import TableHeader from "$lib/components/Table/TableHeader.svelte";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte"; import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import highcharts from "$lib/highcharts.ts"; import highcharts from "$lib/highcharts.ts";
import { mode } from "mode-watcher";
export let data; export let data;
export let title = "Gamma"; export let title = "Gamma";
@ -86,15 +87,15 @@
}, },
chart: { chart: {
type: "column", type: "column",
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: `<h3 class="mt-3 mb-1 ">${title === "Gamma" ? "GEX" : "DEX"} Chart</h3>`, text: `<h3 class="mt-3 mb-1 ">${title === "Gamma" ? "GEX" : "DEX"} Chart</h3>`,
style: { style: {
color: "white", color: $mode === "light" ? "black" : "white",
// Using inline CSS for margin-top and margin-bottom // Using inline CSS for margin-top and margin-bottom
}, },
useHTML: true, // Enable HTML to apply custom class styling useHTML: true, // Enable HTML to apply custom class styling
@ -119,8 +120,8 @@
}, },
borderRadius: 4, borderRadius: 4,
formatter: function () { formatter: function () {
// Format the x value to display time in hh:mm format // Format the x value to display time in a custom format
let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">${new Date( let tooltipContent = `<span class="m-auto text-[1rem] font-[501]">${new Date(
this?.x, this?.x,
).toLocaleDateString("en-US", { ).toLocaleDateString("en-US", {
year: "numeric", year: "numeric",
@ -129,11 +130,11 @@
})}</span><br>`; })}</span><br>`;
// Loop through each point in the shared tooltip // Loop through each point in the shared tooltip
this.points?.forEach((point) => { this.points.forEach((point) => {
tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span> tooltipContent += `
<span class="text-white font-normal text-sm" style="color:${point?.color}">${abbreviateNumber( <span style="display:inline-block; width:10px; height:10px; background-color:${point.color}; border-radius:50%; margin-right:5px;"></span>
point.y, <span class="font-semibold text-sm">${point.series.name}:</span>
)}</span><br>`; <span class="font-normal text-sm">${abbreviateNumber(point.y)}</span><br>`;
}); });
return tooltipContent; return tooltipContent;
@ -144,13 +145,13 @@
endOnTick: false, endOnTick: false,
categories: expiries, categories: expiries,
crosshair: { 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 width: 1, // Adjust the line width as needed
dashStyle: "Solid", dashStyle: "Solid",
}, },
labels: { labels: {
style: { style: {
color: "#fff", color: $mode === "light" ? "black" : "white",
}, },
distance: 20, // Increases space between label and axis distance: 20, // Increases space between label and axis
formatter: function () { formatter: function () {
@ -165,7 +166,7 @@
}, },
yAxis: { yAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: "#111827", gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
labels: { labels: {
style: { color: "white" }, style: { color: "white" },
formatter: function () { formatter: function () {
@ -310,32 +311,36 @@
displayList = [...originalData].sort(compareValues); displayList = [...originalData].sort(compareValues);
}; };
let config = plotData(); let config = null;
$: {
if ($mode) {
config = plotData() || null;
}
}
</script> </script>
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0"> <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
<h2 <h2 class=" flex flex-row items-center text-xl sm:text-2xl font-bold w-fit">
class=" flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit"
>
{title} Exposure By Expiry {title} Exposure By Expiry
</h2> </h2>
<div class="w-full overflow-hidden m-auto mt-3"> <div class="w-full overflow-hidden m-auto mt-3 shadow-sm">
{#if config !== null} {#if config !== null}
<div <div
class="chart border border-gray-800 rounded" class=" border border-gray-300 dark:border-gray-800 rounded"
use:highcharts={config} use:highcharts={config}
></div> ></div>
{/if} {/if}
</div> </div>
<h3 class="text-xl sm:text-2xl text-white font-bold mt-5"> <h3 class="text-xl sm:text-2xl font-bold mt-5">
{title === "Gamma" ? "GEX" : "DEX"} Table {title === "Gamma" ? "GEX" : "DEX"} Table
</h3> </h3>
<div class="mt-3 w-full overflow-x-auto text-white"> <div class="mt-3 w-full 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 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"
> >
<thead> <thead>
<TableHeader {columns} {sortOrders} {sortData} /> <TableHeader {columns} {sortOrders} {sortData} />
@ -343,50 +348,40 @@
<tbody> <tbody>
{#each data?.user?.tier === "Pro" ? displayList : displayList?.slice(0, 3) as item, index} {#each data?.user?.tier === "Pro" ? displayList : displayList?.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 ===
displayList?.slice(0, 3)?.length && displayList?.slice(0, 3)?.length &&
!['Pro']?.includes(data?.user?.tier) !['Pro']?.includes(data?.user?.tier)
? 'opacity-[0.1]' ? 'opacity-[0.1]'
: ''}" : ''}"
> >
<td <td class=" text-sm sm:text-[1rem] text-start whitespace-nowrap">
class="text-white text-sm sm:text-[1rem] text-start whitespace-nowrap"
>
{formatDate(item?.expiry)} {formatDate(item?.expiry)}
</td> </td>
<td <td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap" {abbreviateNumber(
>
{@html abbreviateNumberWithColor(
(isGamma ? item?.call_gex : item?.call_dex)?.toFixed(2), (isGamma ? item?.call_gex : item?.call_dex)?.toFixed(2),
false, false,
true, true,
)} )}
</td> </td>
<td <td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap" {abbreviateNumber(
>
{@html abbreviateNumberWithColor(
(isGamma ? item?.put_gex : item?.put_dex)?.toFixed(2), (isGamma ? item?.put_gex : item?.put_dex)?.toFixed(2),
false, false,
true, true,
)} )}
</td> </td>
<td <td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap" {abbreviateNumber(
>
{@html abbreviateNumberWithColor(
(isGamma ? item?.net_gex : item?.net_dex)?.toFixed(2), (isGamma ? item?.net_gex : item?.net_dex)?.toFixed(2),
false, false,
true, true,
)} )}
</td> </td>
<td <td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{#if item?.put_call_ratio <= 1 && item?.put_call_ratio !== null} {#if item?.put_call_ratio <= 1 && item?.put_call_ratio !== null}
<span class="text-green-600 dark:text-[#00FC50]" <span class="text-green-600 dark:text-[#00FC50]"
>{item?.put_call_ratio?.toFixed(2)}</span >{item?.put_call_ratio?.toFixed(2)}</span

88
src/lib/components/Options/GreekByStrike.svelte
View File

@ -1,9 +1,10 @@
<script lang="ts"> <script lang="ts">
import { abbreviateNumberWithColor, abbreviateNumber } from "$lib/utils"; import { abbreviateNumber } from "$lib/utils";
import { onMount } from "svelte"; import { onMount } from "svelte";
import TableHeader from "$lib/components/Table/TableHeader.svelte"; import TableHeader from "$lib/components/Table/TableHeader.svelte";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte"; import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import highcharts from "$lib/highcharts.ts"; import highcharts from "$lib/highcharts.ts";
import { mode } from "mode-watcher";
export let data; export let data;
export let title = "Gamma"; export let title = "Gamma";
@ -66,8 +67,8 @@
}, },
chart: { chart: {
type: "column", type: "column",
backgroundColor: "#09090B", backgroundColor: $mode === "light" ? "#fff" : "#09090B",
plotBackgroundColor: "#09090B", plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
height: 360, height: 360,
animation: false, animation: false,
}, },
@ -99,17 +100,15 @@
}, },
borderRadius: 4, borderRadius: 4,
formatter: function () { formatter: function () {
// Format the x value to display time in hh:mm format // Displaying "Strike" and the x value in the header
let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">Strike ${ let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">Strike ${this?.x}</span><br>`;
this?.x
}</span><br>`;
// Loop through each point in the shared tooltip // Loop through each point in the shared tooltip
this.points?.forEach((point) => { this.points.forEach((point) => {
tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span> tooltipContent += `
<span class="text-white font-normal text-sm" style="color:${point?.color}">${abbreviateNumber( <span style="display:inline-block; width:10px; height:10px; background-color:${point.color}; border-radius:50%; margin-right:5px;"></span>
point.y, <span class="text-white font-semibold text-sm">${point.series.name}:</span>
)}</span><br>`; <span class="text-white font-normal text-sm">${abbreviateNumber(point.y)}</span><br>`;
}); });
return tooltipContent; return tooltipContent;
@ -117,16 +116,16 @@
}, },
xAxis: { xAxis: {
categories: strikes, categories: strikes,
lineColor: "#fff", lineColor: $mode === "light" ? "black" : "white",
endOnTick: false, endOnTick: false,
crosshair: { 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 width: 1, // Adjust the line width as needed
dashStyle: "Solid", dashStyle: "Solid",
}, },
labels: { labels: {
style: { style: {
color: "#fff", color: $mode === "light" ? "black" : "white",
}, },
// Only display every 5th label // Only display every 5th label
formatter: function () { formatter: function () {
@ -136,9 +135,9 @@
}, },
yAxis: { yAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: "#111827", gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
labels: { labels: {
style: { color: "white" }, style: { color: $mode === "light" ? "black" : "white" },
formatter: function () { formatter: function () {
return abbreviateNumber(this.value); return abbreviateNumber(this.value);
}, },
@ -287,31 +286,34 @@
displayList = [...originalData].sort(compareValues); displayList = [...originalData].sort(compareValues);
}; };
let config = plotData() || null; let config = null;
$: {
if ($mode) {
config = plotData() || null;
}
}
</script> </script>
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0"> <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
<h2 <h2 class=" flex flex-row items-center text-xl sm:text-2xl font-bold w-fit">
class=" flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit"
>
{title} Exposure By Strike {title} Exposure By Strike
</h2> </h2>
<div class="w-full overflow-hidden m-auto mt-3"> <div class="w-full overflow-hidden m-auto mt-3 shadow-sm">
{#if config !== null} {#if config !== null}
<div <div
class="chart border border-gray-800 rounded" class="chart border border-gray-300 dark:border-gray-800 rounded"
use:highcharts={config} use:highcharts={config}
></div> ></div>
{/if} {/if}
</div> </div>
<h3 class="text-xl sm:text-2xl text-white font-bold mt-5"> <h3 class="text-xl sm:text-2xl font-bold mt-5">
{title === "Gamma" ? "GEX" : "DEX"} Table {title === "Gamma" ? "GEX" : "DEX"} Table
</h3> </h3>
<div class="w-full overflow-x-auto text-white mt-3"> <div class="w-full overflow-x-auto mt-3">
<table <table
class="w-full table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md m-auto 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"
> >
<thead> <thead>
<TableHeader {columns} {sortOrders} {sortData} /> <TableHeader {columns} {sortOrders} {sortData} />
@ -319,50 +321,34 @@
<tbody> <tbody>
{#each data?.user?.tier === "Pro" ? displayList : displayList?.slice(0, 3) as item, index} {#each data?.user?.tier === "Pro" ? displayList : displayList?.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 ===
displayList?.slice(0, 3)?.length && displayList?.slice(0, 3)?.length &&
!['Pro']?.includes(data?.user?.tier) !['Pro']?.includes(data?.user?.tier)
? 'opacity-[0.1]' ? 'opacity-[0.1]'
: ''}" : ''}"
> >
<td <td class=" text-sm sm:text-[1rem] text-start whitespace-nowrap">
class="text-white text-sm sm:text-[1rem] text-start whitespace-nowrap"
>
{item?.strike?.toFixed(2)} {item?.strike?.toFixed(2)}
</td> </td>
<td <td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap" {abbreviateNumber(
>
{@html abbreviateNumberWithColor(
(isGamma ? item?.call_gex : item?.call_dex)?.toFixed(2), (isGamma ? item?.call_gex : item?.call_dex)?.toFixed(2),
false,
true,
)} )}
</td> </td>
<td <td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap" {abbreviateNumber(
>
{@html abbreviateNumberWithColor(
(isGamma ? item?.put_gex : item?.put_dex)?.toFixed(2), (isGamma ? item?.put_gex : item?.put_dex)?.toFixed(2),
false,
true,
)} )}
</td> </td>
<td <td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap" {abbreviateNumber(
>
{@html abbreviateNumberWithColor(
(isGamma ? item?.net_gex : item?.net_dex)?.toFixed(2), (isGamma ? item?.net_gex : item?.net_dex)?.toFixed(2),
false,
true,
)} )}
</td> </td>
<td <td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{#if item?.put_call_ratio <= 1 && item?.put_call_ratio !== null} {#if item?.put_call_ratio <= 1 && item?.put_call_ratio !== null}
<span class="text-green-600 dark:text-[#00FC50]" <span class="text-green-600 dark:text-[#00FC50]"
>{item?.put_call_ratio?.toFixed(2)}</span >{item?.put_call_ratio?.toFixed(2)}</span

78
src/lib/components/Options/GreekExposure.svelte
View File

@ -4,6 +4,7 @@
import TableHeader from "$lib/components/Table/TableHeader.svelte"; import TableHeader from "$lib/components/Table/TableHeader.svelte";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte"; import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import highcharts from "$lib/highcharts.ts"; import highcharts from "$lib/highcharts.ts";
import { mode } from "mode-watcher";
export let data; export let data;
export let title; export let title;
@ -103,15 +104,15 @@
enabled: false, enabled: false,
}, },
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: `<h3 class="mt-3 mb-1 ">${title === "Gamma" ? "GEX" : "DEX"} Chart</h3>`, text: `<h3 class="mt-3 mb-1 ">${title === "Gamma" ? "GEX" : "DEX"} Chart</h3>`,
style: { style: {
color: "white", color: $mode === "light" ? "black" : "white",
// Using inline CSS for margin-top and margin-bottom // Using inline CSS for margin-top and margin-bottom
}, },
useHTML: true, // Enable HTML to apply custom class styling useHTML: true, // Enable HTML to apply custom class styling
@ -129,8 +130,8 @@
}, },
borderRadius: 4, borderRadius: 4,
formatter: function () { formatter: function () {
// Format the x value to display time in hh:mm format // Format the x value to display time in a custom format
let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">${new Date( let tooltipContent = `<span class="m-auto text-[1rem] font-[501]">${new Date(
this?.x, this?.x,
).toLocaleDateString("en-US", { ).toLocaleDateString("en-US", {
year: "numeric", year: "numeric",
@ -139,11 +140,11 @@
})}</span><br>`; })}</span><br>`;
// Loop through each point in the shared tooltip // Loop through each point in the shared tooltip
this.points?.forEach((point) => { this.points.forEach((point) => {
tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span> tooltipContent += `
<span class="text-white font-normal text-sm" style="color:${point?.color}">${abbreviateNumber( <span style="display:inline-block; width:10px; height:10px; background-color:${point.color}; border-radius:50%; margin-right:5px;"></span>
point.y, <span class="font-semibold text-sm">${point.series.name}:</span>
)}</span><br>`; <span class="font-normal text-sm">${abbreviateNumber(point.y)}</span><br>`;
}); });
return tooltipContent; return tooltipContent;
@ -154,13 +155,13 @@
endOnTick: false, endOnTick: false,
categories: dateList, categories: dateList,
crosshair: { 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 width: 1, // Adjust the line width as needed
dashStyle: "Solid", dashStyle: "Solid",
}, },
labels: { labels: {
style: { style: {
color: "#fff", color: $mode === "light" ? "black" : "white",
}, },
distance: 20, // Increases space between label and axis distance: 20, // Increases space between label and axis
formatter: function () { formatter: function () {
@ -190,7 +191,7 @@
yAxis: [ yAxis: [
{ {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: "#111827", gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
labels: { labels: {
style: { color: "white" }, style: { color: "white" },
formatter: function () { formatter: function () {
@ -221,7 +222,7 @@
type: "line", type: "line",
data: priceList, data: priceList,
yAxis: 1, yAxis: 1,
color: "#fff", color: $mode === "light" ? "#3B82F6" : "white",
lineWidth: 2, lineWidth: 2,
zIndex: 10, zIndex: 10,
marker: { enabled: false }, marker: { enabled: false },
@ -366,16 +367,14 @@
}; };
$: { $: {
if (timePeriod) { if (timePeriod || $mode) {
config = plotData(); config = plotData();
} }
} }
</script> </script>
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0"> <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
<h2 <h2 class=" flex flex-row items-center text-xl sm:text-2xl font-bold w-fit">
class=" flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit"
>
Daily {title} Exposure Daily {title} Exposure
</h2> </h2>
@ -386,19 +385,20 @@
{#if data?.user?.tier === "Pro" || index === 0} {#if data?.user?.tier === "Pro" || index === 0}
<label <label
on:click={() => (timePeriod = item)} on:click={() => (timePeriod = item)}
class="px-3 py-1 text-sm {timePeriod === item class="px-3 py-1 text-sm shadow-sm border border-gray-300 dark:border-gray-600 {timePeriod ===
? 'bg-white text-black ' item
: 'text-white bg-table text-opacity-[0.6]'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer" ? 'bg-gray-300 dark:bg-white text-black '
: ' bg-gray-100 dark:bg-table text-opacity-[0.6]'} transition ease-out duration-100 rounded-md cursor-pointer"
> >
{item} {item}
</label> </label>
{:else if data?.user?.tier !== "Pro"} {:else if data?.user?.tier !== "Pro"}
<a <a
href="/pricing" href="/pricing"
class="px-3 py-1 text-sm flex flex-row items-center border border-gray-700 {timePeriod === class="px-3 py-1 text-sm flex flex-row items-center border border-gray-300 dark:border-gray-600 {timePeriod ===
item item
? 'bg-white text-black ' ? 'bg-gray-300 dark:bg-white text-black '
: 'text-white bg-table text-opacity-[0.6]'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer" : ' bg-gray-100 dark:bg-table text-opacity-[0.6]'} transition ease-out duration-100 rounded-md cursor-pointer"
> >
{item} {item}
<svg <svg
@ -416,19 +416,19 @@
</div> </div>
<div <div
class="chart border border-gray-800 rounded" class="shadow-sm border border-gray-300 dark:border-gray-800 rounded"
use:highcharts={config} use:highcharts={config}
></div> ></div>
{/if} {/if}
</div> </div>
<h3 class="text-xl sm:text-2xl text-white font-bold mt-5"> <h3 class="text-xl sm:text-2xl font-bold mt-5">
{title === "Gamma" ? "GEX" : "DEX"} History {title === "Gamma" ? "GEX" : "DEX"} History
</h3> </h3>
<div class="mt-3 w-full overflow-x-auto text-white"> <div class="mt-3 w-full 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 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"
> >
<thead> <thead>
<TableHeader {columns} {sortOrders} {sortData} /> <TableHeader {columns} {sortOrders} {sortData} />
@ -436,30 +436,24 @@
<tbody> <tbody>
{#each data?.user?.tier === "Pro" ? displayList : displayList?.slice(0, 3) as item, index} {#each data?.user?.tier === "Pro" ? displayList : displayList?.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 ===
displayList?.slice(0, 3)?.length && displayList?.slice(0, 3)?.length &&
!['Pro']?.includes(data?.user?.tier) !['Pro']?.includes(data?.user?.tier)
? 'opacity-[0.1]' ? 'opacity-[0.1]'
: ''}" : ''}"
> >
<td <td class=" text-sm sm:text-[1rem] text-start whitespace-nowrap">
class="text-white text-sm sm:text-[1rem] text-start whitespace-nowrap"
>
{formatDate(item?.date)} {formatDate(item?.date)}
</td> </td>
<td <td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{@html abbreviateNumberWithColor( {@html abbreviateNumberWithColor(
title === "Gamma" ? item?.call_gex : item?.call_dex, title === "Gamma" ? item?.call_gex : item?.call_dex,
false, false,
true, true,
)} )}
</td> </td>
<td <td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{@html abbreviateNumberWithColor( {@html abbreviateNumberWithColor(
title === "Gamma" ? item?.put_gex : item?.put_dex, title === "Gamma" ? item?.put_gex : item?.put_dex,
false, false,
@ -467,9 +461,7 @@
)} )}
</td> </td>
<td <td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{@html abbreviateNumberWithColor( {@html abbreviateNumberWithColor(
title === "Gamma" ? item?.netGex : item?.netDex, title === "Gamma" ? item?.netGex : item?.netDex,
false, false,
@ -477,9 +469,7 @@
)} )}
</td> </td>
<td <td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{#if item?.putCallRatio <= 1 && item?.putCallRatio !== null} {#if item?.putCallRatio <= 1 && item?.putCallRatio !== null}
<span class="text-green-600 dark:text-[#00FC50]" <span class="text-green-600 dark:text-[#00FC50]"
>{item?.putCallRatio?.toFixed(2)}</span >{item?.putCallRatio?.toFixed(2)}</span

6
src/lib/components/Options/HottestContracts.svelte
View File

@ -570,7 +570,7 @@
} }
</script> </script>
<section class="w-full overflow-hidden min-h-screen pb-40"> <section class="w-full overflow-hidden">
<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"
@ -612,7 +612,7 @@
on:click={() => handleViewData(item)} on:click={() => handleViewData(item)}
on:mouseover={() => on:mouseover={() =>
getContractHistory(item?.option_symbol)} getContractHistory(item?.option_symbol)}
class="px-2 sm:px-0 cursor-pointer text-[#04D9FF] sm:hover: sm:hover:underline sm:hover:underline-offset-4" class="px-2 sm:px-0 cursor-pointer text-[#3B82F6] dark:text-[#04D9FF] sm:hover: sm:hover:underline sm:hover:underline-offset-4"
> >
{item?.strike_price} {item?.strike_price}
@ -622,7 +622,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="inline-block w-4 h-4 -mt-1" class="inline-block w-4 h-4 -mt-1"
viewBox="0 0 512 512" viewBox="0 0 512 512"
fill="#04D9FF" fill={$mode === "light" ? "#3B82F6" : "#04D9FF"}
><path ><path
d="M104 496H72a24 24 0 01-24-24V328a24 24 0 0124-24h32a24 24 0 0124 24v144a24 24 0 01-24 24zM328 496h-32a24 24 0 01-24-24V232a24 24 0 0124-24h32a24 24 0 0124 24v240a24 24 0 01-24 24zM440 496h-32a24 24 0 01-24-24V120a24 24 0 0124-24h32a24 24 0 0124 24v352a24 24 0 01-24 24zM216 496h-32a24 24 0 01-24-24V40a24 24 0 0124-24h32a24 24 0 0124 24v432a24 24 0 01-24 24z" d="M104 496H72a24 24 0 01-24-24V328a24 24 0 0124-24h32a24 24 0 0124 24v144a24 24 0 01-24 24zM328 496h-32a24 24 0 01-24-24V232a24 24 0 0124-24h32a24 24 0 0124 24v240a24 24 0 01-24 24zM440 496h-32a24 24 0 01-24-24V120a24 24 0 0124-24h32a24 24 0 0124 24v352a24 24 0 01-24 24zM216 496h-32a24 24 0 01-24-24V40a24 24 0 0124-24h32a24 24 0 0124 24v432a24 24 0 01-24 24z"
></path></svg ></path></svg

10
src/lib/components/Options/OpenInterestByExpiry.svelte
View File

@ -269,7 +269,13 @@
displayList = [...originalData].sort(compareValues); displayList = [...originalData].sort(compareValues);
}; };
let config = plotData() || null; let config = null;
$: {
if ($mode) {
config = plotData() || null;
}
}
</script> </script>
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0"> <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
@ -277,7 +283,7 @@
Open Interest Chart Open Interest Chart
</h2> </h2>
<div class="w-full overflow-hidden m-auto mt-3"> <div class="w-full overflow-hidden m-auto mt-3 shadow-sm">
{#if config !== null} {#if config !== null}
<div <div
class="border border-gray-300 dark:border-gray-800 rounded w-full" class="border border-gray-300 dark:border-gray-800 rounded w-full"

2
src/lib/components/Options/OpenInterestByStrike.svelte
View File

@ -255,7 +255,7 @@
Open Interest Chart Open Interest Chart
</h2> </h2>
<div class="w-full overflow-hidden m-auto mt-3"> <div class="w-full overflow-hidden m-auto mt-3 shadow-sm">
{#if config !== null} {#if config !== null}
<div <div
class="border border-gray-300 dark:border-gray-800 rounded w-full" class="border border-gray-300 dark:border-gray-800 rounded w-full"

1
src/lib/components/Options/Volatility.svelte
View File

@ -454,7 +454,6 @@
{/if} {/if}
{/each} {/each}
</div> </div>
<div <div
class="border border-gray-300 dark:border-gray-800 rounded w-full" class="border border-gray-300 dark:border-gray-800 rounded w-full"
use:highcharts={config} use:highcharts={config}

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

@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
import { stockTicker } from "$lib/store"; import { stockTicker } from "$lib/store";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
import { page } from "$app/stores"; import { page } from "$app/stores";
export let data; export let data;
@ -54,13 +53,13 @@
<nav <nav
class="sm:ml-4 overflow-x-auto pt-1 text-sm sm:text-[1rem] whitespace-nowrap" class="sm:ml-4 overflow-x-auto pt-1 text-sm sm:text-[1rem] whitespace-nowrap"
> >
<ul class="flex flex-row items-center w-full text-white"> <ul class="flex flex-row items-center w-full">
<a <a
href={`/stocks/${$stockTicker}/options/gex`} href={`/stocks/${$stockTicker}/options/gex`}
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>
@ -69,8 +68,8 @@
href={`/stocks/${$stockTicker}/options/gex/strike`} href={`/stocks/${$stockTicker}/options/gex/strike`}
on:click={() => changeSubSection("strike")} on:click={() => changeSubSection("strike")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'strike' class="p-2 px-5 cursor-pointer {displaySubSection === 'strike'
? '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'}"
> >
By Strike By Strike
</a> </a>
@ -78,8 +77,8 @@
href={`/stocks/${$stockTicker}/options/gex/expiry`} href={`/stocks/${$stockTicker}/options/gex/expiry`}
on:click={() => changeSubSection("expiry")} on:click={() => changeSubSection("expiry")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'expiry' class="p-2 px-5 cursor-pointer {displaySubSection === 'expiry'
? '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'}"
> >
By Expiry By Expiry
</a> </a>

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

@ -13,9 +13,7 @@
description={`Analyze daily gamma exposure for ${$displayCompanyName} (${$stockTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`} description={`Analyze daily gamma exposure for ${$displayCompanyName} (${$stockTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
/> />
<section <section class="w-full overflow-hidden min-h-screen pb-40">
class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
>
<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"

4
src/routes/stocks/[tickerID]/options/gex/expiry/+page.svelte
View File

@ -14,9 +14,7 @@
description={`Analyze Gamma Exposure by expiry for ${$displayCompanyName} (${$stockTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`} description={`Analyze Gamma Exposure by expiry for ${$displayCompanyName} (${$stockTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
/> />
<section <section class="w-full overflow-hidden min-h-screen pb-40">
class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
>
<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"

54
src/routes/stocks/[tickerID]/options/gex/strike/+page.svelte
View File

@ -1,58 +1,18 @@
<script lang="ts"> <script lang="ts">
import { import { stockTicker, displayCompanyName } from "$lib/store";
stockTicker, import SEO from "$lib/components/SEO.svelte";
numberOfUnreadNotification,
displayCompanyName,
} from "$lib/store";
import Infobox from "$lib/components/Infobox.svelte"; import Infobox from "$lib/components/Infobox.svelte";
import GreekByStrike from "$lib/components/Options/GreekByStrike.svelte"; import GreekByStrike from "$lib/components/Options/GreekByStrike.svelte";
export let data; export let data;
</script> </script>
<svelte:head> <SEO
<meta charset="utf-8" /> title={`${$displayCompanyName} (${$stockTicker}) Gamma Exposure by Strike Price`}
<meta name="viewport" content="width=device-width" /> description={`Discover detailed Gamma Exposure analysis by strike price for ${$displayCompanyName} (${$stockTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
<title> />
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
{$displayCompanyName} ({$stockTicker}) Gamma Exposure by Strike Price ·
Stocknear
</title>
<meta
name="description"
content={`Discover detailed Gamma Exposure analysis by strike price for ${$displayCompanyName} (${$stockTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
/>
<!-- Other meta tags --> <section class="w-full overflow-hidden min-h-screen pb-40">
<meta
property="og:title"
content={`${$displayCompanyName} (${$stockTicker}) Gamma Exposure by Strike Price · Stocknear`}
/>
<meta
property="og:description"
content={`Discover detailed Gamma Exposure analysis by strike price for ${$displayCompanyName} (${$stockTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
/>
<meta property="og:type" content="website" />
<!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content={`${$displayCompanyName} (${$stockTicker}) Gamma Exposure by Strike Price · Stocknear`}
/>
<meta
name="twitter:description"
content={`Discover detailed Gamma Exposure analysis by strike price for ${$displayCompanyName} (${$stockTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<section
class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
>
<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"