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

update chart

Browse Source
This commit is contained in:
MuslemRahimi 2025-02-27 13:48:21 +01:00
parent 9557d945db
commit a9c3af4e1b
5 changed files with 247 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,28 +1,9 @@
<script lang="ts"> <script lang="ts">
import { abbreviateNumberWithColor } from "$lib/utils"; import { abbreviateNumberWithColor, abbreviateNumber } from "$lib/utils";
import { screenWidth } from "$lib/store";
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 { Chart } from "svelte-echarts"; import highcharts from "$lib/highcharts.ts";
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,
]);
export let data; export let data;
export let title = "Gamma"; export let title = "Gamma";
@ -59,7 +40,6 @@
}, []); }, []);
let displayList = rawData?.slice(0, 150); let displayList = rawData?.slice(0, 150);
let options = null;
function formatDate(dateString) { function formatDate(dateString) {
if (!dateString) return null; // Handle null or undefined input if (!dateString) return null; // Handle null or undefined input
@ -76,7 +56,8 @@
// Determine if the current data is Gamma-based or not // Determine if the current data is Gamma-based or not
const isGamma = title === "Gamma"; 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 const processedData = rawData
?.map((d) => ({ ?.map((d) => ({
expiry: formatDate(d?.expiry), expiry: formatDate(d?.expiry),
@ -84,83 +65,137 @@
putValue: isGamma ? d?.put_gex : d?.put_dex, putValue: isGamma ? d?.put_gex : d?.put_dex,
netValue: isGamma ? d?.net_gex : d?.net_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 expiries = processedData.map((d) => d.expiry);
const callValue = processedData.map((d) => d.callValue?.toFixed(2)); // Convert values to numbers (toFixed returns a string)
const putValue = processedData.map((d) => d.putValue?.toFixed(2)); const callValues = processedData.map((d) =>
const netValue = processedData.map((d) => d.netValue?.toFixed(2)); 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 = { const options = {
credits: {
enabled: false,
},
chart: {
type: "column",
backgroundColor: "#09090B",
plotBackgroundColor: "#09090B",
height: 360,
animation: false, 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",
},
},
tooltip: { tooltip: {
trigger: "axis", shared: true,
axisPointer: { useHTML: true,
type: "shadow", backgroundColor: "rgba(0, 0, 0, 0.8)", // Semi-transparent black
}, borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border
backgroundColor: "#313131", borderWidth: 1,
textStyle: { style: {
color: "#fff", color: "#fff",
fontSize: "16px",
padding: "10px",
}, },
formatter: function (params) { borderRadius: 4,
const expiry = params[0].axisValue; formatter: function () {
const put = params[0].data; // Format the x value to display time in hh:mm format
const net = params[1].data; let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">${new Date(
const call = params[2].data; this?.x,
).toLocaleDateString("en-US", {
year: "numeric",
month: "short",
day: "numeric",
})}</span><br>`;
return ` // Loop through each point in the shared tooltip
<div style="text-align:left;"> this.points?.forEach((point) => {
<b>Expiry:</b> ${expiry}<br/> tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span>
<span style="color:#9B5DC4;">● Put ${isGamma ? "Gamma" : "Delta"}:</span> ${abbreviateNumberWithColor(put, false, true)}<br/> <span class="text-white font-normal text-sm" style="color:${point?.color}">${abbreviateNumber(
<span style="color:#FF2F1F;">● Net ${isGamma ? "Gamma" : "Delta"}:</span> ${abbreviateNumberWithColor(net, false, true)}<br/> point.y,
<span style="color:#C4E916;">● Call ${isGamma ? "Gamma" : "Delta"}:</span> ${abbreviateNumberWithColor(call, false, true)}<br/> )}</span><br>`;
</div>`; });
return tooltipContent;
}, },
}, },
grid: {
left: $screenWidth < 640 ? "5%" : "1%",
right: $screenWidth < 640 ? "5%" : "0%",
bottom: "10%",
containLabel: true,
},
xAxis: { xAxis: {
type: "value", type: "datetime",
name: isGamma ? "Gamma" : "Delta", endOnTick: false,
nameTextStyle: { color: "#fff" }, categories: expiries,
splitLine: { show: false }, crosshair: {
axisLabel: { color: "#fff", // Set the color of the crosshair line
show: false, // Hide y-axis labels 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: { yAxis: {
type: "category", gridLineWidth: 1,
data: expiries, gridLineColor: "#111827",
axisLine: { lineStyle: { color: "#fff" } }, labels: {
axisLabel: { color: "#fff" }, style: { color: "white" },
splitLine: { show: false }, formatter: function () {
return abbreviateNumber(this.value);
},
},
title: { text: null },
opposite: true,
}, },
series: [ series: [
{ {
name: `Put ${isGamma ? "Gamma" : "Delta"}`, name: `Put ${isGamma ? "Gamma" : "Delta"}`,
type: "bar", data: putValues,
data: putValue, color: "#9B5DC4",
stack: isGamma ? "gamma" : "delta", borderColor: "#9B5DC4",
itemStyle: { color: "#9B5DC4" }, animation: false,
barWidth: "40%",
}, },
{ {
name: `Net ${isGamma ? "Gamma" : "Delta"}`, name: `Net ${isGamma ? "Gamma" : "Delta"}`,
type: "bar", data: netValues,
data: netValue, color: "#FF2F1F",
stack: isGamma ? "gamma" : "delta", borderColor: "#FF2F1F",
itemStyle: { color: "#FF2F1F" }, animation: false,
}, },
{ {
name: `Call ${isGamma ? "Gamma" : "Delta"}`, name: `Call ${isGamma ? "Gamma" : "Delta"}`,
type: "bar", data: callValues,
data: callValue, color: "#C4E916",
stack: isGamma ? "gamma" : "delta", borderColor: "#C4E916",
itemStyle: { color: "#C4E916" }, animation: false,
}, },
], ],
}; };
@ -275,11 +310,7 @@
displayList = [...originalData].sort(compareValues); displayList = [...originalData].sort(compareValues);
}; };
$: { let config = plotData();
if (typeof window !== "undefined") {
options = 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">
@ -289,26 +320,20 @@
{title} Exposure By Expiry {title} Exposure By Expiry
</h2> </h2>
<div class="w-full overflow-hidden m-auto"> <div class="w-full overflow-hidden m-auto mt-3">
{#if options !== null} {#if config !== null}
<div class="app w-full relative"> <div
<Chart {init} {options} class="chart" /> class="chart border border-gray-800 rounded"
</div> use:highcharts={config}
{:else} ></div>
<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>
{/if} {/if}
</div> </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 <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="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} /> <UpgradeToPro {data} />
</div> </div>
<style>
.app {
height: 600px;
width: 100%;
}
@media (max-width: 560px) {
.app {
width: 100%;
height: 500px;
}
}
.chart {
width: 100%;
}
</style>

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

@ -1,28 +1,9 @@
<script lang="ts"> <script lang="ts">
import { abbreviateNumberWithColor } from "$lib/utils"; import { abbreviateNumberWithColor, abbreviateNumber } from "$lib/utils";
import { screenWidth } from "$lib/store";
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 { Chart } from "svelte-echarts"; import highcharts from "$lib/highcharts.ts";
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,
]);
export let data; export let data;
export let title = "Gamma"; export let title = "Gamma";
@ -54,10 +35,9 @@
}); });
let displayList = rawData?.slice(0, 150); let displayList = rawData?.slice(0, 150);
let options = null;
function plotData() { 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 const processedData = rawData
?.map((d) => ({ ?.map((d) => ({
strike: d?.strike, strike: d?.strike,
@ -65,81 +45,134 @@
putValue: isGamma ? d?.put_gex : d?.put_dex, putValue: isGamma ? d?.put_gex : d?.put_dex,
netValue: isGamma ? d?.net_gex : d?.net_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 strikes = processedData?.map((d) => d.strike);
const callValues = processedData?.map((d) => d.callValue?.toFixed(2)); // Ensure numerical values instead of strings (toFixed returns a string)
const putValues = processedData?.map((d) => d.putValue?.toFixed(2)); const callValues = processedData?.map((d) =>
const netValues = processedData?.map((d) => d.netValue?.toFixed(2)); parseFloat(d.callValue.toFixed(2)),
const options = { );
animation: false, const putValues = processedData?.map((d) =>
tooltip: { parseFloat(d.putValue.toFixed(2)),
trigger: "axis", );
axisPointer: { const netValues = processedData?.map((d) =>
type: "shadow", parseFloat(d.netValue.toFixed(2)),
}, );
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;
return ` const options = {
<div style="text-align:left;"> credits: {
<b>Strike:</b> ${strike}<br/> enabled: false,
<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/> chart: {
<span style="color:#C4E916;">● Call ${isGamma ? "Gamma" : "Delta"}:</span> ${abbreviateNumberWithColor(call, false, true)}<br/> type: "column",
</div>`; 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: { tooltip: {
left: $screenWidth < 640 ? "5%" : "0%", shared: true,
right: $screenWidth < 640 ? "5%" : "0%", useHTML: true,
bottom: "5%", backgroundColor: "rgba(0, 0, 0, 0.8)", // Semi-transparent black
containLabel: true, 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: { xAxis: {
type: "value", categories: strikes,
nameTextStyle: { color: "#fff" }, lineColor: "#fff",
splitLine: { show: false }, endOnTick: false,
axisLabel: { crosshair: {
show: false, // Hide x-axis labels 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: { yAxis: {
type: "category", gridLineWidth: 1,
data: strikes, gridLineColor: "#111827",
axisLine: { lineStyle: { color: "#fff" } }, labels: {
axisLabel: { color: "#fff" }, style: { color: "white" },
splitLine: { show: false }, formatter: function () {
return abbreviateNumber(this.value);
},
},
title: { text: null },
opposite: true,
}, },
series: [ series: [
{ {
name: `Put ${isGamma ? "Gamma" : "Delta"}`, name: `Put ${isGamma ? "Gamma" : "Delta"}`,
type: "bar",
data: putValues, data: putValues,
stack: "value", stack: "value",
itemStyle: { color: "#9B5DC4" }, color: "#9B5DC4",
barWidth: "40%", borderColor: "#9B5DC4",
borderRadius: "1px",
animation: false,
}, },
{ {
name: `Net ${isGamma ? "Gamma" : "Delta"}`, name: `Net ${isGamma ? "Gamma" : "Delta"}`,
type: "bar",
data: netValues, data: netValues,
stack: "value", stack: "value",
itemStyle: { color: "#FF2F1F" }, color: "#FF2F1F",
borderColor: "#FF2F1F",
borderRadius: "1px",
animation: false,
}, },
{ {
name: `Call ${isGamma ? "Gamma" : "Delta"}`, name: `Call ${isGamma ? "Gamma" : "Delta"}`,
type: "bar",
data: callValues, data: callValues,
stack: "value", stack: "value",
itemStyle: { color: "#C4E916" }, color: "#C4E916",
borderColor: "#C4E916",
borderRadius: "1px",
animation: false,
}, },
], ],
}; };
@ -254,11 +287,7 @@
displayList = [...originalData].sort(compareValues); displayList = [...originalData].sort(compareValues);
}; };
$: { let config = plotData() || null;
if (typeof window !== "undefined") {
options = 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">
@ -268,26 +297,19 @@
{title} Exposure By Strike {title} Exposure By Strike
</h2> </h2>
<div class="w-full overflow-hidden m-auto"> <div class="w-full overflow-hidden m-auto mt-3">
{#if options !== null} {#if config !== null}
<div class="app w-full relative"> <div
<Chart {init} {options} class="chart" /> class="chart border border-gray-800 rounded"
</div> use:highcharts={config}
{:else} ></div>
<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>
{/if} {/if}
</div> </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 <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="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} /> <UpgradeToPro {data} />
</div> </div>
<style>
.app {
height: 1000px;
width: 100%;
}
@media (max-width: 560px) {
.app {
width: 100%;
height: 500px;
}
}
.chart {
width: 100%;
}
</style>

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

@ -1,10 +1,5 @@
<script lang="ts"> <script lang="ts">
import { import { abbreviateNumberWithColor, abbreviateNumber } from "$lib/utils";
abbreviateNumberWithColor,
abbreviateNumber,
monthNames,
} from "$lib/utils";
import { screenWidth } from "$lib/store";
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";
@ -422,7 +417,7 @@
{title === "Gamma" ? "GEX" : "DEX"} History {title === "Gamma" ? "GEX" : "DEX"} History
</h3> </h3>
<div class="mt-5 w-full overflow-x-scroll text-white"> <div class="mt-3 w-full overflow-x-scroll text-white">
<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="w-full table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md m-auto overflow-x-auto"
> >

2
src/routes/index/[tickerID]/options/oi/+page.svelte
View File

@ -10,7 +10,7 @@
</script> </script>
<SEO <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.`} 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.`}
/> />

2
src/routes/stocks/[tickerID]/options/oi/+page.svelte
View File

@ -14,7 +14,7 @@
</script> </script>
<SEO <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.`} 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.`}
/> />