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

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

@ -1,9 +1,10 @@
<script lang="ts">
import { abbreviateNumberWithColor, abbreviateNumber } from "$lib/utils";
import { abbreviateNumber } from "$lib/utils";
import { onMount } from "svelte";
import TableHeader from "$lib/components/Table/TableHeader.svelte";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import highcharts from "$lib/highcharts.ts";
import { mode } from "mode-watcher";
export let data;
export let title = "Gamma";
@ -66,8 +67,8 @@
},
chart: {
type: "column",
backgroundColor: "#09090B",
plotBackgroundColor: "#09090B",
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
height: 360,
animation: false,
},
@ -99,17 +100,15 @@
},
borderRadius: 4,
formatter: function () {
// Format the x value to display time in hh:mm format
let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">Strike ${
this?.x
}</span><br>`;
// Displaying "Strike" and the x value in the header
let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">Strike ${this?.x}</span><br>`;
// Loop through each point in the shared tooltip
this.points?.forEach((point) => {
tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span>
<span class="text-white font-normal text-sm" style="color:${point?.color}">${abbreviateNumber(
point.y,
)}</span><br>`;
this.points.forEach((point) => {
tooltipContent += `
<span style="display:inline-block; width:10px; height:10px; background-color:${point.color}; border-radius:50%; margin-right:5px;"></span>
<span class="text-white font-semibold text-sm">${point.series.name}:</span>
<span class="text-white font-normal text-sm">${abbreviateNumber(point.y)}</span><br>`;
});
return tooltipContent;
@ -117,16 +116,16 @@
},
xAxis: {
categories: strikes,
lineColor: "#fff",
lineColor: $mode === "light" ? "black" : "white",
endOnTick: false,
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",
},
// Only display every 5th label
formatter: function () {
@ -136,9 +135,9 @@
},
yAxis: {
gridLineWidth: 1,
gridLineColor: "#111827",
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
labels: {
style: { color: "white" },
style: { color: $mode === "light" ? "black" : "white" },
formatter: function () {
return abbreviateNumber(this.value);
},
@ -287,31 +286,34 @@
displayList = [...originalData].sort(compareValues);
};
let config = plotData() || null;
let config = null;
$: {
if ($mode) {
config = plotData() || null;
}
}
</script>
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
<h2
class=" flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit"
>
<h2 class=" flex flex-row items-center text-xl sm:text-2xl font-bold w-fit">
{title} Exposure By Strike
</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}
<div
class="chart border border-gray-800 rounded"
class="chart border border-gray-300 dark:border-gray-800 rounded"
use:highcharts={config}
></div>
{/if}
</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
</h3>
<div class="w-full overflow-x-auto text-white mt-3">
<div class="w-full overflow-x-auto mt-3">
<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>
<TableHeader {columns} {sortOrders} {sortData} />
@ -319,50 +321,34 @@
<tbody>
{#each data?.user?.tier === "Pro" ? displayList : displayList?.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 ===
displayList?.slice(0, 3)?.length &&
!['Pro']?.includes(data?.user?.tier)
? 'opacity-[0.1]'
: ''}"
>
<td
class="text-white text-sm sm:text-[1rem] text-start whitespace-nowrap"
>
<td class=" text-sm sm:text-[1rem] text-start whitespace-nowrap">
{item?.strike?.toFixed(2)}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{@html abbreviateNumberWithColor(
<td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
{abbreviateNumber(
(isGamma ? item?.call_gex : item?.call_dex)?.toFixed(2),
false,
true,
)}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{@html abbreviateNumberWithColor(
<td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
{abbreviateNumber(
(isGamma ? item?.put_gex : item?.put_dex)?.toFixed(2),
false,
true,
)}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{@html abbreviateNumberWithColor(
<td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
{abbreviateNumber(
(isGamma ? item?.net_gex : item?.net_dex)?.toFixed(2),
false,
true,
)}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
<td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
{#if item?.put_call_ratio <= 1 && item?.put_call_ratio !== null}
<span class="text-green-600 dark:text-[#00FC50]"
>{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 UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import highcharts from "$lib/highcharts.ts";
import { mode } from "mode-watcher";
export let data;
export let title;
@ -103,15 +104,15 @@
enabled: false,
},
chart: {
backgroundColor: "#09090B",
plotBackgroundColor: "#09090B",
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
height: 360,
animation: false,
},
title: {
text: `<h3 class="mt-3 mb-1 ">${title === "Gamma" ? "GEX" : "DEX"} Chart</h3>`,
style: {
color: "white",
color: $mode === "light" ? "black" : "white",
// Using inline CSS for margin-top and margin-bottom
},
useHTML: true, // Enable HTML to apply custom class styling
@ -129,8 +130,8 @@
},
borderRadius: 4,
formatter: function () {
// Format the x value to display time in hh:mm format
let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">${new Date(
// Format the x value to display time in a custom format
let tooltipContent = `<span class="m-auto text-[1rem] font-[501]">${new Date(
this?.x,
).toLocaleDateString("en-US", {
year: "numeric",
@ -139,11 +140,11 @@
})}</span><br>`;
// Loop through each point in the shared tooltip
this.points?.forEach((point) => {
tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span>
<span class="text-white font-normal text-sm" style="color:${point?.color}">${abbreviateNumber(
point.y,
)}</span><br>`;
this.points.forEach((point) => {
tooltipContent += `
<span style="display:inline-block; width:10px; height:10px; background-color:${point.color}; border-radius:50%; margin-right:5px;"></span>
<span class="font-semibold text-sm">${point.series.name}:</span>
<span class="font-normal text-sm">${abbreviateNumber(point.y)}</span><br>`;
});
return tooltipContent;
@ -154,13 +155,13 @@
endOnTick: false,
categories: dateList,
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 () {
@ -190,7 +191,7 @@
yAxis: [
{
gridLineWidth: 1,
gridLineColor: "#111827",
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
labels: {
style: { color: "white" },
formatter: function () {
@ -221,7 +222,7 @@
type: "line",
data: priceList,
yAxis: 1,
color: "#fff",
color: $mode === "light" ? "#3B82F6" : "white",
lineWidth: 2,
zIndex: 10,
marker: { enabled: false },
@ -366,16 +367,14 @@
};
$: {
if (timePeriod) {
if (timePeriod || $mode) {
config = plotData();
}
}
</script>
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
<h2
class=" flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit"
>
<h2 class=" flex flex-row items-center text-xl sm:text-2xl font-bold w-fit">
Daily {title} Exposure
</h2>
@ -386,19 +385,20 @@
{#if data?.user?.tier === "Pro" || index === 0}
<label
on:click={() => (timePeriod = item)}
class="px-3 py-1 text-sm {timePeriod === item
? '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"
class="px-3 py-1 text-sm shadow-sm border border-gray-300 dark:border-gray-600 {timePeriod ===
item
? '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}
</label>
{:else if data?.user?.tier !== "Pro"}
<a
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
? '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-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}
<svg
@ -416,19 +416,19 @@
</div>
<div
class="chart border border-gray-800 rounded"
class="shadow-sm border border-gray-300 dark:border-gray-800 rounded"
use:highcharts={config}
></div>
{/if}
</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
</h3>
<div class="mt-3 w-full overflow-x-auto text-white">
<div class="mt-3 w-full 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 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>
<TableHeader {columns} {sortOrders} {sortData} />
@ -436,30 +436,24 @@
<tbody>
{#each data?.user?.tier === "Pro" ? displayList : displayList?.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 ===
displayList?.slice(0, 3)?.length &&
!['Pro']?.includes(data?.user?.tier)
? 'opacity-[0.1]'
: ''}"
>
<td
class="text-white text-sm sm:text-[1rem] text-start whitespace-nowrap"
>
<td class=" text-sm sm:text-[1rem] text-start whitespace-nowrap">
{formatDate(item?.date)}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
<td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
{@html abbreviateNumberWithColor(
title === "Gamma" ? item?.call_gex : item?.call_dex,
false,
true,
)}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
<td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
{@html abbreviateNumberWithColor(
title === "Gamma" ? item?.put_gex : item?.put_dex,
false,
@ -467,9 +461,7 @@
)}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
<td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
{@html abbreviateNumberWithColor(
title === "Gamma" ? item?.netGex : item?.netDex,
false,
@ -477,9 +469,7 @@
)}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
<td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
{#if item?.putCallRatio <= 1 && item?.putCallRatio !== null}
<span class="text-green-600 dark:text-[#00FC50]"
>{item?.putCallRatio?.toFixed(2)}</span

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

@ -570,7 +570,7 @@
}
</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 relative flex justify-center items-center overflow-hidden"
@ -612,7 +612,7 @@
on:click={() => handleViewData(item)}
on:mouseover={() =>
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}
@ -622,7 +622,7 @@
xmlns="http://www.w3.org/2000/svg"
class="inline-block w-4 h-4 -mt-1"
viewBox="0 0 512 512"
fill="#04D9FF"
fill={$mode === "light" ? "#3B82F6" : "#04D9FF"}
><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"
></path></svg

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

@ -269,7 +269,13 @@
displayList = [...originalData].sort(compareValues);
};
let config = plotData() || null;
let config = null;
$: {
if ($mode) {
config = plotData() || null;
}
}
</script>
<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
</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}
<div
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
</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}
<div
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}
{/each}
</div>
<div
class="border border-gray-300 dark:border-gray-800 rounded w-full"
use:highcharts={config}

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

@ -1,6 +1,5 @@
<script lang="ts">
import { stockTicker } from "$lib/store";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
import { page } from "$app/stores";
export let data;
@ -54,13 +53,13 @@
<nav
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
href={`/stocks/${$stockTicker}/options/gex`}
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>
@ -69,8 +68,8 @@
href={`/stocks/${$stockTicker}/options/gex/strike`}
on:click={() => changeSubSection("strike")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'strike'
? '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'}"
>
By Strike
</a>
@ -78,8 +77,8 @@
href={`/stocks/${$stockTicker}/options/gex/expiry`}
on:click={() => changeSubSection("expiry")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'expiry'
? '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'}"
>
By Expiry
</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.`}
/>
<section
class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
>
<section class="w-full overflow-hidden min-h-screen pb-40">
<div class="w-full flex h-full overflow-hidden">
<div
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.`}
/>
<section
class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
>
<section class="w-full overflow-hidden min-h-screen pb-40">
<div class="w-full flex h-full overflow-hidden">
<div
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">
import {
stockTicker,
numberOfUnreadNotification,
displayCompanyName,
} from "$lib/store";
import { stockTicker, displayCompanyName } from "$lib/store";
import SEO from "$lib/components/SEO.svelte";
import Infobox from "$lib/components/Infobox.svelte";
import GreekByStrike from "$lib/components/Options/GreekByStrike.svelte";
export let data;
</script>
<svelte:head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<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.`}
/>
<SEO
title={`${$displayCompanyName} (${$stockTicker}) Gamma Exposure by Strike Price`}
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.`}
/>
<!-- Other meta tags -->
<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"
>
<section class="w-full overflow-hidden min-h-screen pb-40">
<div class="w-full flex h-full overflow-hidden">
<div
class="w-full relative flex justify-center items-center overflow-hidden"