From e7ca5ac597119b8dc195049b8f4577f85f1cb551 Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Thu, 27 Feb 2025 12:00:15 +0100 Subject: [PATCH] update gex chart --- .../components/Options/GreekExposure.svelte | 333 +++++++++--------- src/routes/stock-screener/+page.svelte | 8 +- 2 files changed, 164 insertions(+), 177 deletions(-) diff --git a/src/lib/components/Options/GreekExposure.svelte b/src/lib/components/Options/GreekExposure.svelte index 024d5aca..caa01a99 100644 --- a/src/lib/components/Options/GreekExposure.svelte +++ b/src/lib/components/Options/GreekExposure.svelte @@ -8,25 +8,7 @@ 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; @@ -56,7 +38,7 @@ let displayList = rawData?.slice(0, 150); let timePeriod = "3M"; - let options = null; + let config = null; function filterDataByPeriod(historicalData, period = "3M") { const currentDate = new Date(); @@ -111,116 +93,145 @@ history, timePeriod, ); + const options = { - animation: false, - tooltip: { - trigger: "axis", - hideDelay: 100, - borderColor: "#969696", // Black border color - borderWidth: 1, // Border width of 1px - backgroundColor: "#313131", // Optional: Set background color for contrast - textStyle: { - color: "#fff", // Optional: Text color for better visibility + credits: { + enabled: false, + }, + chart: { + backgroundColor: "#09090B", + plotBackgroundColor: "#09090B", + height: 360, + animation: false, + }, + title: { + text: `

${title === "Gamma" ? "GEX" : "DEX"} Chart

`, + style: { + color: "white", + // Using inline CSS for margin-top and margin-bottom }, - formatter: function (params) { - // Get the timestamp from the first parameter - const timestamp = params[0].axisValue; + useHTML: true, // Enable HTML to apply custom class styling + }, + 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 = `${new Date( + this?.x, + ).toLocaleDateString("en-US", { + year: "numeric", + month: "short", + day: "numeric", + })}
`; - // Initialize result with timestamp - let result = timestamp + "
"; - - // Add each series data - params?.forEach((param) => { - const marker = - ''; - result += - marker + - param.seriesName + - ": " + - abbreviateNumber(param.value) + - "
"; + // Loop through each point in the shared tooltip + this.points.forEach((point) => { + tooltipContent += `${point.series.name}: + ${abbreviateNumber( + point.y, + )}
`; }); - return result; + return tooltipContent; }, - axisPointer: { - lineStyle: { + }, + xAxis: { + type: "datetime", + endOnTick: false, + categories: dateList, + 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 + }); + }, }, - }, - silent: true, - grid: { - left: $screenWidth < 640 ? "5%" : "0%", - right: $screenWidth < 640 ? "5%" : "0%", - bottom: "10%", - containLabel: true, - }, - xAxis: [ - { - type: "category", - data: dateList, - axisLabel: { - color: "#fff", + tickPositioner: function () { + // Create custom tick positions with optimized spacing + const positions = []; + const info = this.getExtremes(); + const tickCount = 6; // Increase tick count for better readability + const interval = Math.floor((info.max - info.min) / (tickCount - 1)); - formatter: function (value) { - // Assuming dates are in the format 'yyyy-mm-dd' - const dateParts = value.split("-"); - const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects - const year = parseInt(dateParts[0]); - const day = parseInt(dateParts[2]); - return `${day} ${monthNames[monthIndex]} ${year}`; - }, - }, + for (let i = 0; i < tickCount; i++) { + const tick = info.min + i * interval; + positions.push(Math.round(tick)); // Ensure clean tick values + } + return positions; }, - ], + }, + yAxis: [ { - type: "value", - splitLine: { - show: false, // Disable x-axis grid lines - }, - axisLabel: { - show: false, // Hide y-axis labels + gridLineWidth: 1, + gridLineColor: "#111827", + labels: { + style: { color: "white" }, + formatter: function () { + return abbreviateNumber(this.value); + }, }, + title: { text: null }, + opposite: true, }, { - type: "value", - splitLine: { - show: false, // Disable x-axis grid lines - }, - position: "right", - axisLabel: { - show: false, // Hide y-axis labels - }, + title: { text: "" }, + gridLineWidth: 0, + labels: { enabled: false }, }, ], series: [ + { + name: title, + type: "column", + data: dataList, + color: "#9B5DC4", + borderColor: "#9B5DC4", + borderRadius: "1px", + animation: false, + }, { name: "Price", type: "line", data: priceList, - yAxisIndex: 1, - lineStyle: { width: 2 }, - itemStyle: { - color: "#fff", - }, - smooth: true, - showSymbol: false, - }, - { - name: title, - type: "bar", - data: dataList, - itemStyle: { - color: "#9B5DC4", - }, + yAxis: 1, + color: "#fff", + lineWidth: 2, + zIndex: 10, + marker: { enabled: false }, + animation: false, }, ], + legend: { enabled: false }, + plotOptions: { + series: { + animation: false, + }, + }, }; + return options; } @@ -351,8 +362,8 @@ }; $: { - if (typeof window !== "undefined" && timePeriod) { - options = plotData(); + if (timePeriod) { + config = plotData(); } } @@ -365,59 +376,53 @@
- {#if options !== null} -
-
- {#each ["3M", "6M", "1Y"] as item, index} - {#if data?.user?.tier === "Pro" || index === 0} -
- -
- {:else} -
-
- -
-
+
{/if}
-
+ +

+ {title === "Gamma" ? "GEX" : "DEX"} History +

+ +
@@ -490,21 +495,3 @@ - - diff --git a/src/routes/stock-screener/+page.svelte b/src/routes/stock-screener/+page.svelte index 2f61eea8..ef039ddb 100644 --- a/src/routes/stock-screener/+page.svelte +++ b/src/routes/stock-screener/+page.svelte @@ -2482,8 +2482,8 @@ const handleKeyDown = (event) => { { name: "change1Y", value: "any" }, ]; tabRuleList = otherTabRules - .map((rule) => allRows.find((row) => row.rule === rule.name)) - .filter(Boolean); + ?.map((rule) => allRows.find((row) => row.rule === rule.name)) + ?.filter(Boolean); await updateStockScreenerData(); } else if (displayTableTab === "analysts") { @@ -2496,8 +2496,8 @@ const handleKeyDown = (event) => { { name: "upside", value: "any" }, ]; tabRuleList = otherTabRules - .map((rule) => allRows.find((row) => row.rule === rule.name)) - .filter(Boolean); + ?.map((rule) => allRows?.find((row) => row?.rule === rule?.name)) + ?.filter(Boolean); await updateStockScreenerData(); }