update chart
This commit is contained in:
MuslemRahimi
parent
9557d945db
commit
a9c3af4e1b
@ -1,28 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { abbreviateNumberWithColor } from "$lib/utils";
|
||||
import { screenWidth } from "$lib/store";
|
||||
import { abbreviateNumberWithColor, abbreviateNumber } from "$lib/utils";
|
||||
import { onMount } from "svelte";
|
||||
import TableHeader from "$lib/components/Table/TableHeader.svelte";
|
||||
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
|
||||
import { Chart } from "svelte-echarts";
|
||||
|
||||
import { init, use } from "echarts/core";
|
||||
import { LineChart, BarChart } from "echarts/charts";
|
||||
import {
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
} from "echarts/components";
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
|
||||
use([
|
||||
LineChart,
|
||||
BarChart,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
CanvasRenderer,
|
||||
]);
|
||||
import highcharts from "$lib/highcharts.ts";
|
||||
|
||||
export let data;
|
||||
export let title = "Gamma";
|
||||
@ -59,7 +40,6 @@
|
||||
}, []);
|
||||
|
||||
let displayList = rawData?.slice(0, 150);
|
||||
let options = null;
|
||||
|
||||
function formatDate(dateString) {
|
||||
if (!dateString) return null; // Handle null or undefined input
|
||||
@ -76,7 +56,8 @@
|
||||
// Determine if the current data is Gamma-based or not
|
||||
const isGamma = title === "Gamma";
|
||||
|
||||
// Process and sort data by strike or expiry
|
||||
// Process data; note that the original sort was based on a missing "strike" field.
|
||||
// Here we sort by expiry (assuming formatDate returns a sortable date string).
|
||||
const processedData = rawData
|
||||
?.map((d) => ({
|
||||
expiry: formatDate(d?.expiry),
|
||||
@ -84,83 +65,137 @@
|
||||
putValue: isGamma ? d?.put_gex : d?.put_dex,
|
||||
netValue: isGamma ? d?.net_gex : d?.net_dex,
|
||||
}))
|
||||
.sort((a, b) => a.strike - b.strike);
|
||||
.sort((a, b) => new Date(a.expiry) - new Date(b.expiry));
|
||||
|
||||
// Create arrays for categories and series data.
|
||||
const expiries = processedData.map((d) => d.expiry);
|
||||
const callValue = processedData.map((d) => d.callValue?.toFixed(2));
|
||||
const putValue = processedData.map((d) => d.putValue?.toFixed(2));
|
||||
const netValue = processedData.map((d) => d.netValue?.toFixed(2));
|
||||
// Convert values to numbers (toFixed returns a string)
|
||||
const callValues = processedData.map((d) =>
|
||||
parseFloat(d.callValue.toFixed(2)),
|
||||
);
|
||||
const putValues = processedData.map((d) =>
|
||||
parseFloat(d.putValue.toFixed(2)),
|
||||
);
|
||||
const netValues = processedData.map((d) =>
|
||||
parseFloat(d.netValue.toFixed(2)),
|
||||
);
|
||||
|
||||
const options = {
|
||||
animation: false,
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
credits: {
|
||||
enabled: false,
|
||||
},
|
||||
chart: {
|
||||
type: "column",
|
||||
backgroundColor: "#09090B",
|
||||
plotBackgroundColor: "#09090B",
|
||||
height: 360,
|
||||
animation: false,
|
||||
},
|
||||
title: {
|
||||
text: `<h3 class="mt-3 mb-1 ">${title === "Gamma" ? "GEX" : "DEX"} Chart</h3>`,
|
||||
style: {
|
||||
color: "white",
|
||||
// Using inline CSS for margin-top and margin-bottom
|
||||
},
|
||||
backgroundColor: "#313131",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
formatter: function (params) {
|
||||
const expiry = params[0].axisValue;
|
||||
const put = params[0].data;
|
||||
const net = params[1].data;
|
||||
const call = params[2].data;
|
||||
|
||||
return `
|
||||
<div style="text-align:left;">
|
||||
<b>Expiry:</b> ${expiry}<br/>
|
||||
<span style="color:#9B5DC4;">● Put ${isGamma ? "Gamma" : "Delta"}:</span> ${abbreviateNumberWithColor(put, false, true)}<br/>
|
||||
<span style="color:#FF2F1F;">● Net ${isGamma ? "Gamma" : "Delta"}:</span> ${abbreviateNumberWithColor(net, false, true)}<br/>
|
||||
<span style="color:#C4E916;">● Call ${isGamma ? "Gamma" : "Delta"}:</span> ${abbreviateNumberWithColor(call, false, true)}<br/>
|
||||
</div>`;
|
||||
useHTML: true, // Enable HTML to apply custom class styling
|
||||
},
|
||||
legend: { enabled: false },
|
||||
plotOptions: {
|
||||
series: {
|
||||
animation: false,
|
||||
stacking: "normal",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: $screenWidth < 640 ? "5%" : "1%",
|
||||
right: $screenWidth < 640 ? "5%" : "0%",
|
||||
bottom: "10%",
|
||||
containLabel: true,
|
||||
tooltip: {
|
||||
shared: true,
|
||||
useHTML: true,
|
||||
backgroundColor: "rgba(0, 0, 0, 0.8)", // Semi-transparent black
|
||||
borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border
|
||||
borderWidth: 1,
|
||||
style: {
|
||||
color: "#fff",
|
||||
fontSize: "16px",
|
||||
padding: "10px",
|
||||
},
|
||||
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(
|
||||
this?.x,
|
||||
).toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
})}</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>`;
|
||||
});
|
||||
|
||||
return tooltipContent;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "value",
|
||||
name: isGamma ? "Gamma" : "Delta",
|
||||
nameTextStyle: { color: "#fff" },
|
||||
splitLine: { show: false },
|
||||
axisLabel: {
|
||||
show: false, // Hide y-axis labels
|
||||
type: "datetime",
|
||||
endOnTick: false,
|
||||
categories: expiries,
|
||||
crosshair: {
|
||||
color: "#fff", // Set the color of the crosshair line
|
||||
width: 1, // Adjust the line width as needed
|
||||
dashStyle: "Solid",
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
color: "#fff",
|
||||
},
|
||||
distance: 20, // Increases space between label and axis
|
||||
formatter: function () {
|
||||
const date = new Date(this.value);
|
||||
return date.toLocaleDateString("en-US", {
|
||||
day: "2-digit", // Include day number
|
||||
month: "short", // Display short month name
|
||||
year: "numeric", // Include year
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "category",
|
||||
data: expiries,
|
||||
axisLine: { lineStyle: { color: "#fff" } },
|
||||
axisLabel: { color: "#fff" },
|
||||
splitLine: { show: false },
|
||||
gridLineWidth: 1,
|
||||
gridLineColor: "#111827",
|
||||
labels: {
|
||||
style: { color: "white" },
|
||||
formatter: function () {
|
||||
return abbreviateNumber(this.value);
|
||||
},
|
||||
},
|
||||
title: { text: null },
|
||||
opposite: true,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: `Put ${isGamma ? "Gamma" : "Delta"}`,
|
||||
type: "bar",
|
||||
data: putValue,
|
||||
stack: isGamma ? "gamma" : "delta",
|
||||
itemStyle: { color: "#9B5DC4" },
|
||||
barWidth: "40%",
|
||||
data: putValues,
|
||||
color: "#9B5DC4",
|
||||
borderColor: "#9B5DC4",
|
||||
animation: false,
|
||||
},
|
||||
{
|
||||
name: `Net ${isGamma ? "Gamma" : "Delta"}`,
|
||||
type: "bar",
|
||||
data: netValue,
|
||||
stack: isGamma ? "gamma" : "delta",
|
||||
itemStyle: { color: "#FF2F1F" },
|
||||
data: netValues,
|
||||
color: "#FF2F1F",
|
||||
borderColor: "#FF2F1F",
|
||||
animation: false,
|
||||
},
|
||||
{
|
||||
name: `Call ${isGamma ? "Gamma" : "Delta"}`,
|
||||
type: "bar",
|
||||
data: callValue,
|
||||
stack: isGamma ? "gamma" : "delta",
|
||||
itemStyle: { color: "#C4E916" },
|
||||
data: callValues,
|
||||
color: "#C4E916",
|
||||
borderColor: "#C4E916",
|
||||
animation: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
@ -275,11 +310,7 @@
|
||||
displayList = [...originalData].sort(compareValues);
|
||||
};
|
||||
|
||||
$: {
|
||||
if (typeof window !== "undefined") {
|
||||
options = plotData();
|
||||
}
|
||||
}
|
||||
let config = plotData();
|
||||
</script>
|
||||
|
||||
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
|
||||
@ -289,26 +320,20 @@
|
||||
{title} Exposure By Expiry
|
||||
</h2>
|
||||
|
||||
<div class="w-full overflow-hidden m-auto">
|
||||
{#if options !== null}
|
||||
<div class="app w-full relative">
|
||||
<Chart {init} {options} class="chart" />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<div class="relative">
|
||||
<label
|
||||
class="bg-primary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
||||
>
|
||||
<span
|
||||
class="loading loading-spinner loading-md sm:loading-[1rem] text-gray-400"
|
||||
></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full overflow-hidden m-auto mt-3">
|
||||
{#if config !== null}
|
||||
<div
|
||||
class="chart border border-gray-800 rounded"
|
||||
use:highcharts={config}
|
||||
></div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="w-full overflow-x-scroll text-white">
|
||||
|
||||
<h3 class="text-xl sm:text-2xl text-white font-bold mt-5">
|
||||
{title === "Gamma" ? "GEX" : "DEX"} Table
|
||||
</h3>
|
||||
|
||||
<div class="mt-3 w-full overflow-x-scroll text-white">
|
||||
<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"
|
||||
>
|
||||
@ -381,21 +406,3 @@
|
||||
|
||||
<UpgradeToPro {data} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.app {
|
||||
height: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.app {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,28 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { abbreviateNumberWithColor } from "$lib/utils";
|
||||
import { screenWidth } from "$lib/store";
|
||||
import { abbreviateNumberWithColor, abbreviateNumber } from "$lib/utils";
|
||||
import { onMount } from "svelte";
|
||||
import TableHeader from "$lib/components/Table/TableHeader.svelte";
|
||||
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
|
||||
import { Chart } from "svelte-echarts";
|
||||
|
||||
import { init, use } from "echarts/core";
|
||||
import { LineChart, BarChart } from "echarts/charts";
|
||||
import {
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
} from "echarts/components";
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
|
||||
use([
|
||||
LineChart,
|
||||
BarChart,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
CanvasRenderer,
|
||||
]);
|
||||
import highcharts from "$lib/highcharts.ts";
|
||||
|
||||
export let data;
|
||||
export let title = "Gamma";
|
||||
@ -54,10 +35,9 @@
|
||||
});
|
||||
|
||||
let displayList = rawData?.slice(0, 150);
|
||||
let options = null;
|
||||
|
||||
function plotData() {
|
||||
const isGamma = title === "Gamma"; // don't delete this $: isGamma is not rendered fast enough; stupid fkn javascript
|
||||
const isGamma = title === "Gamma"; // Don't delete this; isGamma is used below.
|
||||
const processedData = rawData
|
||||
?.map((d) => ({
|
||||
strike: d?.strike,
|
||||
@ -65,81 +45,134 @@
|
||||
putValue: isGamma ? d?.put_gex : d?.put_dex,
|
||||
netValue: isGamma ? d?.net_gex : d?.net_dex,
|
||||
}))
|
||||
?.sort((a, b) => a?.strike - b?.strike);
|
||||
?.sort((a, b) => a.strike - b.strike);
|
||||
|
||||
// Extract data arrays
|
||||
const strikes = processedData?.map((d) => d.strike);
|
||||
const callValues = processedData?.map((d) => d.callValue?.toFixed(2));
|
||||
const putValues = processedData?.map((d) => d.putValue?.toFixed(2));
|
||||
const netValues = processedData?.map((d) => d.netValue?.toFixed(2));
|
||||
const options = {
|
||||
animation: false,
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
backgroundColor: "#313131",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
formatter: function (params) {
|
||||
const strike = params[0].axisValue;
|
||||
const put = params[0].data;
|
||||
const net = params[1].data;
|
||||
const call = params[2].data;
|
||||
// Ensure numerical values instead of strings (toFixed returns a string)
|
||||
const callValues = processedData?.map((d) =>
|
||||
parseFloat(d.callValue.toFixed(2)),
|
||||
);
|
||||
const putValues = processedData?.map((d) =>
|
||||
parseFloat(d.putValue.toFixed(2)),
|
||||
);
|
||||
const netValues = processedData?.map((d) =>
|
||||
parseFloat(d.netValue.toFixed(2)),
|
||||
);
|
||||
|
||||
return `
|
||||
<div style="text-align:left;">
|
||||
<b>Strike:</b> ${strike}<br/>
|
||||
<span style="color:#9B5DC4;">● Put ${isGamma ? "Gamma" : "Delta"}:</span> ${abbreviateNumberWithColor(put, false, true)}<br/>
|
||||
<span style="color:#FF2F1F;">● Net ${isGamma ? "Gamma" : "Delta"}:</span> ${abbreviateNumberWithColor(net, false, true)}<br/>
|
||||
<span style="color:#C4E916;">● Call ${isGamma ? "Gamma" : "Delta"}:</span> ${abbreviateNumberWithColor(call, false, true)}<br/>
|
||||
</div>`;
|
||||
const options = {
|
||||
credits: {
|
||||
enabled: false,
|
||||
},
|
||||
chart: {
|
||||
type: "column",
|
||||
backgroundColor: "#09090B",
|
||||
plotBackgroundColor: "#09090B",
|
||||
height: 360,
|
||||
animation: false,
|
||||
},
|
||||
title: {
|
||||
text: `<h3 class="mt-3 mb-1 ">${title === "Gamma" ? "GEX" : "DEX"} Chart</h3>`,
|
||||
style: {
|
||||
color: "white",
|
||||
// Using inline CSS for margin-top and margin-bottom
|
||||
},
|
||||
useHTML: true, // Enable HTML to apply custom class styling
|
||||
},
|
||||
legend: { enabled: false },
|
||||
plotOptions: {
|
||||
series: {
|
||||
animation: false,
|
||||
stacking: "normal",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: $screenWidth < 640 ? "5%" : "0%",
|
||||
right: $screenWidth < 640 ? "5%" : "0%",
|
||||
bottom: "5%",
|
||||
containLabel: true,
|
||||
tooltip: {
|
||||
shared: true,
|
||||
useHTML: true,
|
||||
backgroundColor: "rgba(0, 0, 0, 0.8)", // Semi-transparent black
|
||||
borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border
|
||||
borderWidth: 1,
|
||||
style: {
|
||||
color: "#fff",
|
||||
fontSize: "16px",
|
||||
padding: "10px",
|
||||
},
|
||||
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>`;
|
||||
|
||||
// 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>`;
|
||||
});
|
||||
|
||||
return tooltipContent;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "value",
|
||||
nameTextStyle: { color: "#fff" },
|
||||
splitLine: { show: false },
|
||||
axisLabel: {
|
||||
show: false, // Hide x-axis labels
|
||||
categories: strikes,
|
||||
lineColor: "#fff",
|
||||
endOnTick: false,
|
||||
crosshair: {
|
||||
color: "#fff", // Set the color of the crosshair line
|
||||
width: 1, // Adjust the line width as needed
|
||||
dashStyle: "Solid",
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
color: "#fff",
|
||||
},
|
||||
// Only display every 5th label
|
||||
formatter: function () {
|
||||
return this.pos % 2 === 0 ? this.value : "";
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "category",
|
||||
data: strikes,
|
||||
axisLine: { lineStyle: { color: "#fff" } },
|
||||
axisLabel: { color: "#fff" },
|
||||
splitLine: { show: false },
|
||||
gridLineWidth: 1,
|
||||
gridLineColor: "#111827",
|
||||
labels: {
|
||||
style: { color: "white" },
|
||||
formatter: function () {
|
||||
return abbreviateNumber(this.value);
|
||||
},
|
||||
},
|
||||
title: { text: null },
|
||||
opposite: true,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: `Put ${isGamma ? "Gamma" : "Delta"}`,
|
||||
type: "bar",
|
||||
data: putValues,
|
||||
stack: "value",
|
||||
itemStyle: { color: "#9B5DC4" },
|
||||
barWidth: "40%",
|
||||
color: "#9B5DC4",
|
||||
borderColor: "#9B5DC4",
|
||||
borderRadius: "1px",
|
||||
animation: false,
|
||||
},
|
||||
{
|
||||
name: `Net ${isGamma ? "Gamma" : "Delta"}`,
|
||||
type: "bar",
|
||||
data: netValues,
|
||||
stack: "value",
|
||||
itemStyle: { color: "#FF2F1F" },
|
||||
color: "#FF2F1F",
|
||||
borderColor: "#FF2F1F",
|
||||
borderRadius: "1px",
|
||||
animation: false,
|
||||
},
|
||||
{
|
||||
name: `Call ${isGamma ? "Gamma" : "Delta"}`,
|
||||
type: "bar",
|
||||
data: callValues,
|
||||
stack: "value",
|
||||
itemStyle: { color: "#C4E916" },
|
||||
color: "#C4E916",
|
||||
borderColor: "#C4E916",
|
||||
borderRadius: "1px",
|
||||
animation: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
@ -254,11 +287,7 @@
|
||||
displayList = [...originalData].sort(compareValues);
|
||||
};
|
||||
|
||||
$: {
|
||||
if (typeof window !== "undefined") {
|
||||
options = plotData();
|
||||
}
|
||||
}
|
||||
let config = plotData() || null;
|
||||
</script>
|
||||
|
||||
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
|
||||
@ -268,26 +297,19 @@
|
||||
{title} Exposure By Strike
|
||||
</h2>
|
||||
|
||||
<div class="w-full overflow-hidden m-auto">
|
||||
{#if options !== null}
|
||||
<div class="app w-full relative">
|
||||
<Chart {init} {options} class="chart" />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<div class="relative">
|
||||
<label
|
||||
class="bg-primary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
||||
>
|
||||
<span
|
||||
class="loading loading-spinner loading-md sm:loading-[1rem] text-gray-400"
|
||||
></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full overflow-hidden m-auto mt-3">
|
||||
{#if config !== null}
|
||||
<div
|
||||
class="chart border border-gray-800 rounded"
|
||||
use:highcharts={config}
|
||||
></div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="w-full overflow-x-scroll text-white">
|
||||
|
||||
<h3 class="text-xl sm:text-2xl text-white font-bold mt-5">
|
||||
{title === "Gamma" ? "GEX" : "DEX"} Table
|
||||
</h3>
|
||||
<div class="w-full overflow-x-scroll text-white 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"
|
||||
>
|
||||
@ -360,21 +382,3 @@
|
||||
|
||||
<UpgradeToPro {data} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.app {
|
||||
height: 1000px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.app {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,10 +1,5 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
abbreviateNumberWithColor,
|
||||
abbreviateNumber,
|
||||
monthNames,
|
||||
} from "$lib/utils";
|
||||
import { screenWidth } from "$lib/store";
|
||||
import { abbreviateNumberWithColor, abbreviateNumber } from "$lib/utils";
|
||||
import { onMount } from "svelte";
|
||||
import TableHeader from "$lib/components/Table/TableHeader.svelte";
|
||||
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
|
||||
@ -422,7 +417,7 @@
|
||||
{title === "Gamma" ? "GEX" : "DEX"} History
|
||||
</h3>
|
||||
|
||||
<div class="mt-5 w-full overflow-x-scroll text-white">
|
||||
<div class="mt-3 w-full overflow-x-scroll text-white">
|
||||
<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"
|
||||
>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
</script>
|
||||
|
||||
<SEO
|
||||
title="Open Interet by Strike Price"
|
||||
title="Open Interest by Strike Price"
|
||||
description={`Discover detailed Open Interest analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
|
||||
/>
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
</script>
|
||||
|
||||
<SEO
|
||||
title="Open Interet by Strike Price"
|
||||
title="Open Interest by Strike Price"
|
||||
description={`Discover detailed Open Interest analysis by strike price for ${$displayCompanyName} (${$stockTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
|
||||
/>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user