- |
+ |
{formatDate(item?.expiry)}
|
-
- {@html abbreviateNumberWithColor(
+ |
+ {abbreviateNumber(
(isGamma ? item?.call_gex : item?.call_dex)?.toFixed(2),
false,
true,
)}
|
-
- {@html abbreviateNumberWithColor(
+ |
+ {abbreviateNumber(
(isGamma ? item?.put_gex : item?.put_dex)?.toFixed(2),
false,
true,
)}
|
-
- {@html abbreviateNumberWithColor(
+ |
+ {abbreviateNumber(
(isGamma ? item?.net_gex : item?.net_dex)?.toFixed(2),
false,
true,
)}
|
-
+ |
{#if item?.put_call_ratio <= 1 && item?.put_call_ratio !== null}
{item?.put_call_ratio?.toFixed(2)}
- 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 = `Strike ${
- this?.x
- }
`;
+ // Displaying "Strike" and the x value in the header
+ let tooltipContent = `Strike ${this?.x}
`;
// Loop through each point in the shared tooltip
- this.points?.forEach((point) => {
- tooltipContent += `${point.series.name}:
- ${abbreviateNumber(
- point.y,
- )}
`;
+ this.points.forEach((point) => {
+ tooltipContent += `
+
+ ${point.series.name}:
+ ${abbreviateNumber(point.y)}
`;
});
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;
+ }
+ }
-
+
{title} Exposure By Strike
-
+
{#if config !== null}
{/if}
-
+
{title === "Gamma" ? "GEX" : "DEX"} Table
-
+
@@ -319,50 +321,34 @@
{#each data?.user?.tier === "Pro" ? displayList : displayList?.slice(0, 3) as item, index}
- |
+ |
{item?.strike?.toFixed(2)}
|
-
- {@html abbreviateNumberWithColor(
+ |
+ {abbreviateNumber(
(isGamma ? item?.call_gex : item?.call_dex)?.toFixed(2),
- false,
- true,
)}
|
-
- {@html abbreviateNumberWithColor(
+ |
+ {abbreviateNumber(
(isGamma ? item?.put_gex : item?.put_dex)?.toFixed(2),
- false,
- true,
)}
|
-
- {@html abbreviateNumberWithColor(
+ |
+ {abbreviateNumber(
(isGamma ? item?.net_gex : item?.net_dex)?.toFixed(2),
- false,
- true,
)}
|
-
+ |
{#if item?.put_call_ratio <= 1 && item?.put_call_ratio !== null}
{item?.put_call_ratio?.toFixed(2)}${title === "Gamma" ? "GEX" : "DEX"} Chart`,
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 = `${new Date(
+ // Format the x value to display time in a custom format
+ let tooltipContent = `${new Date(
this?.x,
).toLocaleDateString("en-US", {
year: "numeric",
@@ -139,11 +140,11 @@
})}
`;
// Loop through each point in the shared tooltip
- this.points?.forEach((point) => {
- tooltipContent += `${point.series.name}:
- ${abbreviateNumber(
- point.y,
- )}
`;
+ this.points.forEach((point) => {
+ tooltipContent += `
+
+ ${point.series.name}:
+ ${abbreviateNumber(point.y)}
`;
});
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();
}
}
-
+
Daily {title} Exposure
@@ -386,19 +385,20 @@
{#if data?.user?.tier === "Pro" || index === 0}
{:else if data?.user?.tier !== "Pro"}
{item}
+
{title === "Gamma" ? "GEX" : "DEX"} History
-
+
@@ -436,30 +436,24 @@
{#each data?.user?.tier === "Pro" ? displayList : displayList?.slice(0, 3) as item, index}
- |
+ |
{formatDate(item?.date)}
|
-
+ |
{@html abbreviateNumberWithColor(
title === "Gamma" ? item?.call_gex : item?.call_dex,
false,
true,
)}
|
-
+ |
{@html abbreviateNumberWithColor(
title === "Gamma" ? item?.put_gex : item?.put_dex,
false,
@@ -467,9 +461,7 @@
)}
|
-
+ |
{@html abbreviateNumberWithColor(
title === "Gamma" ? item?.netGex : item?.netDex,
false,
@@ -477,9 +469,7 @@
)}
|
-
+ |
{#if item?.putCallRatio <= 1 && item?.putCallRatio !== null}
{item?.putCallRatio?.toFixed(2)}
-
+
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"}
>
@@ -277,7 +283,7 @@
Open Interest Chart
-
+
{#if config !== null}
-
+
{#if config !== null}
-
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 @@
| | |