update market flow page
This commit is contained in:
MuslemRahimi
parent
5e00605993
commit
302e96eac0
@ -1,6 +1,4 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { screenWidth } from "$lib/store";
|
|
||||||
|
|
||||||
import HoverStockChart from "$lib/components/HoverStockChart.svelte";
|
import HoverStockChart from "$lib/components/HoverStockChart.svelte";
|
||||||
import TableHeader from "$lib/components/Table/TableHeader.svelte";
|
import TableHeader from "$lib/components/Table/TableHeader.svelte";
|
||||||
import { abbreviateNumberWithColor } from "$lib/utils";
|
import { abbreviateNumberWithColor } from "$lib/utils";
|
||||||
@ -8,30 +6,12 @@
|
|||||||
|
|
||||||
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
|
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
|
||||||
|
|
||||||
import { Chart } from "svelte-echarts";
|
|
||||||
import SEO from "$lib/components/SEO.svelte";
|
import SEO from "$lib/components/SEO.svelte";
|
||||||
|
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;
|
||||||
let isLoading = false;
|
let isLoading = false;
|
||||||
let optionsData = null;
|
let config = null;
|
||||||
//let sectorData = data?.getData?.sectorData || [];
|
//let sectorData = data?.getData?.sectorData || [];
|
||||||
let topPosNetPremium = data?.getData?.topPosNetPremium || [];
|
let topPosNetPremium = data?.getData?.topPosNetPremium || [];
|
||||||
let topNegNetPremium = data?.getData?.topNegNetPremium || {};
|
let topNegNetPremium = data?.getData?.topNegNetPremium || {};
|
||||||
@ -235,7 +215,7 @@
|
|||||||
isLoading = true;
|
isLoading = true;
|
||||||
let dates = marketTideData?.map((item) => item?.time);
|
let dates = marketTideData?.map((item) => item?.time);
|
||||||
const priceList = marketTideData?.map((item) =>
|
const priceList = marketTideData?.map((item) =>
|
||||||
item?.close !== null ? item?.close?.toFixed(2) : item?.close,
|
item?.close !== null ? item?.close : item?.close,
|
||||||
);
|
);
|
||||||
const netCallPremList = marketTideData?.map(
|
const netCallPremList = marketTideData?.map(
|
||||||
(item) => item?.net_call_premium,
|
(item) => item?.net_call_premium,
|
||||||
@ -243,251 +223,185 @@
|
|||||||
const netPutPremList = marketTideData?.map((item) => item?.net_put_premium);
|
const netPutPremList = marketTideData?.map((item) => item?.net_put_premium);
|
||||||
const volumeList = marketTideData?.map((item) => item?.net_volume);
|
const volumeList = marketTideData?.map((item) => item?.net_volume);
|
||||||
|
|
||||||
const positiveVolume = volumeList.map((v) => (v >= 0 ? v : "-"));
|
const positiveVolume = volumeList?.map((v) => (v >= 0 ? v : "-"));
|
||||||
const negativeVolume = volumeList.map((v) => (v < 0 ? v : "-"));
|
const negativeVolume = volumeList?.map((v) => (v < 0 ? v : "-"));
|
||||||
|
|
||||||
const options = {
|
const options = {
|
||||||
silent: true,
|
chart: {
|
||||||
|
type: "column",
|
||||||
|
backgroundColor: "#09090B",
|
||||||
|
plotBackgroundColor: "#09090B",
|
||||||
|
height: 360, // Set the maximum height for the chart
|
||||||
animation: false,
|
animation: false,
|
||||||
|
},
|
||||||
|
|
||||||
|
title: {
|
||||||
|
text: null,
|
||||||
|
},
|
||||||
|
|
||||||
legend: {
|
legend: {
|
||||||
data: ["Price", "Vol", "Net Call Premium", "Net Put Premium"],
|
enabled: false,
|
||||||
textStyle: {
|
|
||||||
color: "#fff",
|
|
||||||
},
|
},
|
||||||
axisPointer: {
|
credits: {
|
||||||
lineStyle: {
|
enabled: false,
|
||||||
color: "#fff",
|
|
||||||
},
|
},
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
shared: true,
|
||||||
hideDelay: 100,
|
useHTML: true,
|
||||||
borderColor: "#969696",
|
backgroundColor: "rgba(0, 0, 0, 0.8)", // Semi-transparent black
|
||||||
|
borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
backgroundColor: "#313131",
|
style: {
|
||||||
textStyle: {
|
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
|
fontSize: "16px",
|
||||||
|
padding: "10px",
|
||||||
},
|
},
|
||||||
formatter: function (params) {
|
borderRadius: 4,
|
||||||
const timestamp = params[0].axisValue;
|
formatter: function () {
|
||||||
let result = timestamp + "<br/>";
|
// Format the x value to display time in hh:mm format
|
||||||
|
let tooltipContent = `<span class="m-auto text-white text-[1rem] font-[501]">${new Date(
|
||||||
|
this?.x,
|
||||||
|
).toLocaleTimeString("en-US", {
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
// Uncomment the next line for 12-hour format with AM/PM
|
||||||
|
// hour12: true,
|
||||||
|
// For 24-hour format, either leave it or set hour12: false
|
||||||
|
})}</span><br>`;
|
||||||
|
|
||||||
// Find volume value and determine color
|
// Loop through each point in the shared tooltip
|
||||||
const volParams = params.find((p) => p.seriesName.includes("Vol"));
|
this.points.forEach((point) => {
|
||||||
const volIndex = volParams?.dataIndex ?? 0;
|
tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span>
|
||||||
const volValue = volumeList[volIndex];
|
<span class="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumberWithColor(point.y)}</span><br>`;
|
||||||
const volColor = volValue >= 0 ? "#90EE90" : "#FF6B6B";
|
|
||||||
|
|
||||||
// Sort and filter params
|
|
||||||
const filteredParams = params
|
|
||||||
.filter(
|
|
||||||
(p) =>
|
|
||||||
!p.seriesName.includes("Vol") ||
|
|
||||||
p.seriesName === "Positive Vol",
|
|
||||||
)
|
|
||||||
.map((p) => {
|
|
||||||
if (p.seriesName.includes("Vol")) {
|
|
||||||
return {
|
|
||||||
...p,
|
|
||||||
seriesName: "Vol",
|
|
||||||
value: volValue,
|
|
||||||
color: volColor,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return p;
|
|
||||||
})
|
|
||||||
.sort((a, b) => {
|
|
||||||
if (a.seriesName === "Vol") return 1;
|
|
||||||
if (b.seriesName === "Vol") return -1;
|
|
||||||
return 0;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
filteredParams.forEach((param) => {
|
return tooltipContent;
|
||||||
const marker =
|
},
|
||||||
'<span style="display:inline-block;margin-right:4px;' +
|
},
|
||||||
"border-radius:10px;width:10px;height:10px;background-color:" +
|
|
||||||
param.color +
|
xAxis: {
|
||||||
'"></span>';
|
type: "datetime",
|
||||||
result +=
|
crosshair: {
|
||||||
marker +
|
color: "#fff", // Set the color of the crosshair line
|
||||||
param.seriesName +
|
width: 1, // Adjust the line width as needed
|
||||||
": " +
|
dashStyle: "Solid", // You can change the dash style if desired
|
||||||
abbreviateNumberWithColor(param.value, false, true) +
|
},
|
||||||
"<br/>";
|
endOnTick: false,
|
||||||
|
categories: dates,
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
distance: 20, // Increases space between label and axis
|
||||||
|
formatter: function () {
|
||||||
|
const date = new Date(this.value);
|
||||||
|
return date.toLocaleTimeString("en-US", {
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
// Uncomment the line below for 12-hour format with AM/PM
|
||||||
|
// hour12: true,
|
||||||
|
// For 24-hour format, you can either leave hour12 as false (default) or set it explicitly:
|
||||||
|
// hour12: false
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tickPositioner: function () {
|
||||||
|
// Create custom tick positions with wider spacing
|
||||||
|
const positions = [];
|
||||||
|
const info = this.getExtremes();
|
||||||
|
const tickCount = 5; // Reduce number of ticks displayed
|
||||||
|
const interval = Math.floor((info.max - info.min) / tickCount);
|
||||||
|
|
||||||
return result;
|
for (let i = 0; i <= tickCount; i++) {
|
||||||
},
|
positions.push(info.min + i * interval);
|
||||||
axisPointer: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "#fff",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisPointer: {
|
|
||||||
link: [{ xAxisIndex: [0, 1] }],
|
|
||||||
},
|
|
||||||
grid: [
|
|
||||||
{
|
|
||||||
left: "3%",
|
|
||||||
right: "3%",
|
|
||||||
top: $screenWidth < 640 ? "15%" : "5%",
|
|
||||||
height: "60%",
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
left: "3%",
|
|
||||||
right: "3%",
|
|
||||||
bottom: "5%",
|
|
||||||
height: "20%",
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: "category",
|
|
||||||
boundaryGap: false,
|
|
||||||
data: dates,
|
|
||||||
axisLabel: {
|
|
||||||
color: "#fff",
|
|
||||||
formatter: (value, index) => {
|
|
||||||
const [datePart, timePart] = value.split(" ");
|
|
||||||
let [hours, minutes] = timePart.split(":").map(Number);
|
|
||||||
|
|
||||||
// Only show labels at 30-minute intervals (XX:00 and XX:30)
|
|
||||||
if (minutes % 30 === 0) {
|
|
||||||
const amPm = hours >= 12 ? "PM" : "AM";
|
|
||||||
hours = hours % 12 || 12;
|
|
||||||
return minutes === 0
|
|
||||||
? `${hours} ${amPm}`
|
|
||||||
: `${hours}:30 ${amPm}`;
|
|
||||||
}
|
}
|
||||||
return "";
|
return positions;
|
||||||
},
|
|
||||||
interval: 30,
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
|
||||||
type: "category",
|
|
||||||
gridIndex: 1,
|
|
||||||
data: dates,
|
|
||||||
splitLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: "value",
|
title: {
|
||||||
gridIndex: 0,
|
text: null,
|
||||||
position: "left",
|
|
||||||
splitLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
},
|
||||||
axisLabel: {
|
labels: {
|
||||||
color: "#fff",
|
enabled: false,
|
||||||
show: true,
|
|
||||||
},
|
},
|
||||||
scale: true,
|
gridLineWidth: 0,
|
||||||
min: (value) => Math.floor(value.min * 0.999),
|
opposite: false,
|
||||||
max: (value) => Math.ceil(value.max * 1.001),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "value",
|
gridLineWidth: 1,
|
||||||
gridIndex: 0,
|
gridLineColor: "#111827",
|
||||||
position: "right",
|
labels: {
|
||||||
splitLine: {
|
style: { color: "white" },
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "value",
|
|
||||||
gridIndex: 1,
|
|
||||||
position: "right",
|
|
||||||
splitLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: false,
|
|
||||||
},
|
},
|
||||||
|
title: { text: null },
|
||||||
|
opposite: true,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "Price",
|
name: "Price",
|
||||||
type: "line",
|
type: "spline",
|
||||||
data: priceList,
|
data: priceList,
|
||||||
yAxisIndex: 0,
|
yAxis: 0,
|
||||||
xAxisIndex: 0,
|
color: "#fff",
|
||||||
showSymbol: false,
|
marker: {
|
||||||
lineStyle: { color: "#fff" },
|
enabled: false,
|
||||||
itemStyle: { color: "#fff" },
|
states: {
|
||||||
smooth: true,
|
hover: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
lineWidth: 2,
|
||||||
|
zIndex: 10,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Net Call Premium",
|
name: "Net Call Prem",
|
||||||
type: "line",
|
type: "spline",
|
||||||
data: netCallPremList,
|
data: netCallPremList,
|
||||||
yAxisIndex: 1,
|
yAxis: 1,
|
||||||
xAxisIndex: 0,
|
color: "#90EE90",
|
||||||
showSymbol: false,
|
marker: {
|
||||||
lineStyle: { color: "#90EE90" },
|
enabled: false,
|
||||||
itemStyle: { color: "#90EE90" },
|
states: {
|
||||||
smooth: true,
|
hover: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Net Put Premium",
|
name: "Net Put Prem",
|
||||||
type: "line",
|
type: "spline",
|
||||||
data: netPutPremList,
|
data: netPutPremList,
|
||||||
yAxisIndex: 1,
|
yAxis: 1,
|
||||||
xAxisIndex: 0,
|
color: "#FF6B6B",
|
||||||
showSymbol: false,
|
marker: {
|
||||||
lineStyle: { color: "#FF6B6B" },
|
enabled: false,
|
||||||
itemStyle: { color: "#FF6B6B" },
|
states: {
|
||||||
smooth: true,
|
hover: {
|
||||||
|
enabled: false,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name: "Positive Vol",
|
|
||||||
type: "line",
|
|
||||||
data: positiveVolume,
|
|
||||||
xAxisIndex: 1,
|
|
||||||
yAxisIndex: 2,
|
|
||||||
showSymbol: false,
|
|
||||||
areaStyle: {
|
|
||||||
opacity: 1,
|
|
||||||
color: "#19AA75",
|
|
||||||
},
|
},
|
||||||
itemStyle: { color: "#19AA75" },
|
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name: "Negative Vol",
|
|
||||||
type: "line",
|
|
||||||
data: negativeVolume,
|
|
||||||
xAxisIndex: 1,
|
|
||||||
yAxisIndex: 2,
|
|
||||||
showSymbol: false,
|
|
||||||
areaStyle: {
|
|
||||||
opacity: 1,
|
|
||||||
color: "#F71F4F",
|
|
||||||
},
|
|
||||||
itemStyle: { color: "#F71F4F" },
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
||||||
|
plotOptions: {
|
||||||
|
series: {
|
||||||
|
color: "white",
|
||||||
|
animation: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
isLoading = false;
|
isLoading = false;
|
||||||
return options;
|
return options;
|
||||||
}
|
}
|
||||||
optionsData = marketTideData ? getPlotOptions() : null;
|
config = marketTideData ? getPlotOptions() : null;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<SEO
|
<SEO
|
||||||
@ -503,7 +417,7 @@
|
|||||||
>
|
>
|
||||||
<main class="w-full">
|
<main class="w-full">
|
||||||
<div class="w-full m-auto">
|
<div class="w-full m-auto">
|
||||||
{#if optionsData !== null}
|
{#if config !== null}
|
||||||
<p class="mt-4 text-white">
|
<p class="mt-4 text-white">
|
||||||
Market Flow evaluates the balance between advancing and
|
Market Flow evaluates the balance between advancing and
|
||||||
declining stocks by analyzing SP& 500 price movements, net call
|
declining stocks by analyzing SP& 500 price movements, net call
|
||||||
@ -531,7 +445,7 @@
|
|||||||
<span class="ml-1 text-yellow-400">●</span>
|
<span class="ml-1 text-yellow-400">●</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-baseline">
|
<div class="flex items-baseline">
|
||||||
<span class="text-2xl font-bold text-white">
|
<span class="text-xl font-bold text-white">
|
||||||
{@html abbreviateNumberWithColor(
|
{@html abbreviateNumberWithColor(
|
||||||
findLastNonNull(marketTideData, "net_volume"),
|
findLastNonNull(marketTideData, "net_volume"),
|
||||||
false,
|
false,
|
||||||
@ -549,7 +463,7 @@
|
|||||||
<span class="ml-1 text-green-500">●</span>
|
<span class="ml-1 text-green-500">●</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-baseline">
|
<div class="flex items-baseline">
|
||||||
<span class="text-2xl font-bold text-white"
|
<span class="text-xl font-bold text-white"
|
||||||
>{@html abbreviateNumberWithColor(
|
>{@html abbreviateNumberWithColor(
|
||||||
findLastNonNull(marketTideData, "net_call_premium"),
|
findLastNonNull(marketTideData, "net_call_premium"),
|
||||||
false,
|
false,
|
||||||
@ -567,7 +481,7 @@
|
|||||||
<span class="ml-1 text-red-400">●</span>
|
<span class="ml-1 text-red-400">●</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-baseline">
|
<div class="flex items-baseline">
|
||||||
<span class="text-2xl font-bold text-white"
|
<span class="text-xl font-bold text-white"
|
||||||
>{@html abbreviateNumberWithColor(
|
>{@html abbreviateNumberWithColor(
|
||||||
findLastNonNull(marketTideData, "net_put_premium"),
|
findLastNonNull(marketTideData, "net_put_premium"),
|
||||||
false,
|
false,
|
||||||
@ -578,34 +492,19 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pb-8 sm:pb-2 rounded border border-gray-600">
|
<div
|
||||||
<div class="app w-full h-[300px] mt-5">
|
class="chart border border-gray-800 rounded"
|
||||||
{#if isLoading}
|
use:highcharts={config}
|
||||||
<div class="flex justify-center items-center h-80">
|
></div>
|
||||||
<div class="relative">
|
|
||||||
<label
|
|
||||||
class="bg-secondary z-10 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 text-white"
|
|
||||||
></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<Chart {init} options={optionsData} class="chart" />
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
<div class="w-full m-auto mt-5">
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<div class="w-full m-auto mt-10">
|
|
||||||
<div
|
<div
|
||||||
class="flex flex-wrap sm:flex-row items-center sm:justify-between mb-4"
|
class="flex flex-wrap sm:flex-row items-center sm:justify-between mb-4"
|
||||||
>
|
>
|
||||||
<div class="flex flex-row items-center">
|
<div class="flex flex-row items-center">
|
||||||
<label
|
<label
|
||||||
for="topPosNetPrem"
|
for="topPosNetPrem"
|
||||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
|
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl font-bold"
|
||||||
>
|
>
|
||||||
Top Stocks by Positive Net Prem
|
Top Stocks by Positive Net Prem
|
||||||
</label>
|
</label>
|
||||||
@ -710,7 +609,7 @@
|
|||||||
<div class="flex flex-row items-center">
|
<div class="flex flex-row items-center">
|
||||||
<label
|
<label
|
||||||
for="topNegNetPrem"
|
for="topNegNetPrem"
|
||||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
|
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl font-bold"
|
||||||
>
|
>
|
||||||
Top Stocks by Negative Net Prem
|
Top Stocks by Negative Net Prem
|
||||||
</label>
|
</label>
|
||||||
@ -817,20 +716,3 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<style>
|
|
||||||
.app {
|
|
||||||
height: 600px;
|
|
||||||
max-width: 100%; /* Ensure chart width doesn't exceed the container */
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.app {
|
|
||||||
height: 510px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { screenWidth } from "$lib/store";
|
|
||||||
import { goto } from "$app/navigation";
|
import { goto } from "$app/navigation";
|
||||||
|
|
||||||
import HoverStockChart from "$lib/components/HoverStockChart.svelte";
|
import HoverStockChart from "$lib/components/HoverStockChart.svelte";
|
||||||
@ -11,30 +10,11 @@
|
|||||||
import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
|
import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
|
||||||
import { Button } from "$lib/components/shadcn/button/index.js";
|
import { Button } from "$lib/components/shadcn/button/index.js";
|
||||||
import SEO from "$lib/components/SEO.svelte";
|
import SEO from "$lib/components/SEO.svelte";
|
||||||
|
import highcharts from "$lib/highcharts.ts";
|
||||||
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,
|
|
||||||
]);
|
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
let isLoading = false;
|
let isLoading = false;
|
||||||
let optionsData = null;
|
let config = null;
|
||||||
let selectedSector = "Technology";
|
let selectedSector = "Technology";
|
||||||
const sectorDict = {
|
const sectorDict = {
|
||||||
"Basic Materials": "XLB",
|
"Basic Materials": "XLB",
|
||||||
@ -256,7 +236,7 @@
|
|||||||
isLoading = true;
|
isLoading = true;
|
||||||
let dates = marketTideData?.map((item) => item?.time);
|
let dates = marketTideData?.map((item) => item?.time);
|
||||||
const priceList = marketTideData?.map((item) =>
|
const priceList = marketTideData?.map((item) =>
|
||||||
item?.close !== null ? item?.close?.toFixed(2) : item?.close,
|
item?.close !== null ? item?.close : item?.close,
|
||||||
);
|
);
|
||||||
const netCallPremList = marketTideData?.map(
|
const netCallPremList = marketTideData?.map(
|
||||||
(item) => item?.net_call_premium,
|
(item) => item?.net_call_premium,
|
||||||
@ -264,251 +244,186 @@
|
|||||||
const netPutPremList = marketTideData?.map((item) => item?.net_put_premium);
|
const netPutPremList = marketTideData?.map((item) => item?.net_put_premium);
|
||||||
const volumeList = marketTideData?.map((item) => item?.net_volume);
|
const volumeList = marketTideData?.map((item) => item?.net_volume);
|
||||||
|
|
||||||
const positiveVolume = volumeList.map((v) => (v >= 0 ? v : "-"));
|
const positiveVolume = volumeList?.map((v) => (v >= 0 ? v : "-"));
|
||||||
const negativeVolume = volumeList.map((v) => (v < 0 ? v : "-"));
|
const negativeVolume = volumeList?.map((v) => (v < 0 ? v : "-"));
|
||||||
|
|
||||||
const options = {
|
const options = {
|
||||||
silent: true,
|
chart: {
|
||||||
|
type: "column",
|
||||||
|
backgroundColor: "#09090B",
|
||||||
|
plotBackgroundColor: "#09090B",
|
||||||
|
height: 360, // Set the maximum height for the chart
|
||||||
animation: false,
|
animation: false,
|
||||||
|
},
|
||||||
|
|
||||||
|
title: {
|
||||||
|
text: null,
|
||||||
|
},
|
||||||
|
|
||||||
legend: {
|
legend: {
|
||||||
data: ["Price", "Vol", "Net Call Premium", "Net Put Premium"],
|
enabled: false,
|
||||||
textStyle: {
|
|
||||||
color: "#fff",
|
|
||||||
},
|
},
|
||||||
axisPointer: {
|
credits: {
|
||||||
lineStyle: {
|
enabled: false,
|
||||||
color: "#fff",
|
|
||||||
},
|
},
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
shared: true,
|
||||||
hideDelay: 100,
|
useHTML: true,
|
||||||
borderColor: "#969696",
|
backgroundColor: "rgba(0, 0, 0, 0.8)", // Semi-transparent black
|
||||||
|
borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
backgroundColor: "#313131",
|
style: {
|
||||||
textStyle: {
|
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
|
fontSize: "16px",
|
||||||
|
padding: "10px",
|
||||||
},
|
},
|
||||||
formatter: function (params) {
|
borderRadius: 4,
|
||||||
const timestamp = params[0].axisValue;
|
formatter: function () {
|
||||||
let result = timestamp + "<br/>";
|
// Format the x value to display time in hh:mm format
|
||||||
|
let tooltipContent = `<span class="m-auto text-white text-[1rem] font-[501]">${new Date(
|
||||||
|
this?.x,
|
||||||
|
).toLocaleTimeString("en-US", {
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
// Uncomment the next line for 12-hour format with AM/PM
|
||||||
|
// hour12: true,
|
||||||
|
// For 24-hour format, either leave it or set hour12: false
|
||||||
|
})}</span><br>`;
|
||||||
|
|
||||||
// Find volume value and determine color
|
// Loop through each point in the shared tooltip
|
||||||
const volParams = params.find((p) => p.seriesName.includes("Vol"));
|
this.points.forEach((point) => {
|
||||||
const volIndex = volParams?.dataIndex ?? 0;
|
tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span>
|
||||||
const volValue = volumeList[volIndex];
|
<span class="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumberWithColor(point.y)}</span><br>`;
|
||||||
const volColor = volValue >= 0 ? "#90EE90" : "#FF6B6B";
|
|
||||||
|
|
||||||
// Sort and filter params
|
|
||||||
const filteredParams = params
|
|
||||||
.filter(
|
|
||||||
(p) =>
|
|
||||||
!p.seriesName.includes("Vol") ||
|
|
||||||
p.seriesName === "Positive Vol",
|
|
||||||
)
|
|
||||||
.map((p) => {
|
|
||||||
if (p.seriesName.includes("Vol")) {
|
|
||||||
return {
|
|
||||||
...p,
|
|
||||||
seriesName: "Vol",
|
|
||||||
value: volValue,
|
|
||||||
color: volColor,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return p;
|
|
||||||
})
|
|
||||||
.sort((a, b) => {
|
|
||||||
if (a.seriesName === "Vol") return 1;
|
|
||||||
if (b.seriesName === "Vol") return -1;
|
|
||||||
return 0;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
filteredParams.forEach((param) => {
|
return tooltipContent;
|
||||||
const marker =
|
},
|
||||||
'<span style="display:inline-block;margin-right:4px;' +
|
},
|
||||||
"border-radius:10px;width:10px;height:10px;background-color:" +
|
|
||||||
param.color +
|
xAxis: {
|
||||||
'"></span>';
|
type: "datetime",
|
||||||
result +=
|
crosshair: {
|
||||||
marker +
|
color: "#fff", // Set the color of the crosshair line
|
||||||
param.seriesName +
|
width: 1, // Adjust the line width as needed
|
||||||
": " +
|
dashStyle: "Solid", // You can change the dash style if desired
|
||||||
abbreviateNumberWithColor(param.value, false, true) +
|
},
|
||||||
"<br/>";
|
endOnTick: false,
|
||||||
|
categories: dates,
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
distance: 20, // Increases space between label and axis
|
||||||
|
formatter: function () {
|
||||||
|
const date = new Date(this.value);
|
||||||
|
return date.toLocaleTimeString("en-US", {
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
// Uncomment the line below for 12-hour format with AM/PM
|
||||||
|
// hour12: true,
|
||||||
|
// For 24-hour format, you can either leave hour12 as false (default) or set it explicitly:
|
||||||
|
// hour12: false
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tickPositioner: function () {
|
||||||
|
// Create custom tick positions with wider spacing
|
||||||
|
const positions = [];
|
||||||
|
const info = this.getExtremes();
|
||||||
|
const tickCount = 5; // Reduce number of ticks displayed
|
||||||
|
const interval = Math.floor((info.max - info.min) / tickCount);
|
||||||
|
|
||||||
return result;
|
for (let i = 0; i <= tickCount; i++) {
|
||||||
},
|
positions.push(info.min + i * interval);
|
||||||
axisPointer: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "#fff",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisPointer: {
|
|
||||||
link: [{ xAxisIndex: [0, 1] }],
|
|
||||||
},
|
|
||||||
grid: [
|
|
||||||
{
|
|
||||||
left: "3%",
|
|
||||||
right: "3%",
|
|
||||||
top: $screenWidth < 640 ? "15%" : "5%",
|
|
||||||
height: "60%",
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
left: "3%",
|
|
||||||
right: "3%",
|
|
||||||
bottom: "5%",
|
|
||||||
height: "20%",
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: "category",
|
|
||||||
boundaryGap: false,
|
|
||||||
data: dates,
|
|
||||||
axisLabel: {
|
|
||||||
color: "#fff",
|
|
||||||
formatter: (value, index) => {
|
|
||||||
const [datePart, timePart] = value.split(" ");
|
|
||||||
let [hours, minutes] = timePart.split(":").map(Number);
|
|
||||||
|
|
||||||
// Only show labels at 30-minute intervals (XX:00 and XX:30)
|
|
||||||
if (minutes % 30 === 0) {
|
|
||||||
const amPm = hours >= 12 ? "PM" : "AM";
|
|
||||||
hours = hours % 12 || 12;
|
|
||||||
return minutes === 0
|
|
||||||
? `${hours} ${amPm}`
|
|
||||||
: `${hours}:30 ${amPm}`;
|
|
||||||
}
|
}
|
||||||
return "";
|
return positions;
|
||||||
},
|
|
||||||
interval: 30,
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
|
||||||
type: "category",
|
|
||||||
gridIndex: 1,
|
|
||||||
data: dates,
|
|
||||||
splitLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: "value",
|
title: {
|
||||||
gridIndex: 0,
|
text: null,
|
||||||
position: "left",
|
|
||||||
splitLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
},
|
||||||
axisLabel: {
|
labels: {
|
||||||
color: "#fff",
|
enabled: false,
|
||||||
show: true,
|
|
||||||
},
|
},
|
||||||
scale: true,
|
gridLineWidth: 0,
|
||||||
min: (value) => Math.floor(value.min * 0.999),
|
opposite: false,
|
||||||
max: (value) => Math.ceil(value.max * 1.001),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "value",
|
gridLineWidth: 1,
|
||||||
gridIndex: 0,
|
gridLineColor: "#111827",
|
||||||
position: "right",
|
labels: {
|
||||||
splitLine: {
|
style: { color: "white" },
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "value",
|
|
||||||
gridIndex: 1,
|
|
||||||
position: "right",
|
|
||||||
splitLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: false,
|
|
||||||
},
|
},
|
||||||
|
title: { text: null },
|
||||||
|
opposite: true,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "Price",
|
name: "Price",
|
||||||
type: "line",
|
type: "spline",
|
||||||
data: priceList,
|
data: priceList,
|
||||||
yAxisIndex: 0,
|
yAxis: 0,
|
||||||
xAxisIndex: 0,
|
color: "#fff",
|
||||||
showSymbol: false,
|
marker: {
|
||||||
lineStyle: { color: "#fff" },
|
enabled: false,
|
||||||
itemStyle: { color: "#fff" },
|
states: {
|
||||||
smooth: true,
|
hover: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
lineWidth: 2,
|
||||||
|
zIndex: 10,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Net Call Premium",
|
name: "Net Call Prem",
|
||||||
type: "line",
|
type: "spline",
|
||||||
data: netCallPremList,
|
data: netCallPremList,
|
||||||
yAxisIndex: 1,
|
yAxis: 1,
|
||||||
xAxisIndex: 0,
|
color: "#90EE90",
|
||||||
showSymbol: false,
|
marker: {
|
||||||
lineStyle: { color: "#90EE90" },
|
enabled: false,
|
||||||
itemStyle: { color: "#90EE90" },
|
states: {
|
||||||
smooth: true,
|
hover: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Net Put Premium",
|
name: "Net Put Prem",
|
||||||
type: "line",
|
type: "spline",
|
||||||
data: netPutPremList,
|
data: netPutPremList,
|
||||||
yAxisIndex: 1,
|
yAxis: 1,
|
||||||
xAxisIndex: 0,
|
color: "#FF6B6B",
|
||||||
showSymbol: false,
|
marker: {
|
||||||
lineStyle: { color: "#FF6B6B" },
|
enabled: false,
|
||||||
itemStyle: { color: "#FF6B6B" },
|
states: {
|
||||||
smooth: true,
|
hover: {
|
||||||
|
enabled: false,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name: "Positive Vol",
|
|
||||||
type: "line",
|
|
||||||
data: positiveVolume,
|
|
||||||
xAxisIndex: 1,
|
|
||||||
yAxisIndex: 2,
|
|
||||||
showSymbol: false,
|
|
||||||
areaStyle: {
|
|
||||||
opacity: 1,
|
|
||||||
color: "#19AA75",
|
|
||||||
},
|
},
|
||||||
itemStyle: { color: "#19AA75" },
|
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name: "Negative Vol",
|
|
||||||
type: "line",
|
|
||||||
data: negativeVolume,
|
|
||||||
xAxisIndex: 1,
|
|
||||||
yAxisIndex: 2,
|
|
||||||
showSymbol: false,
|
|
||||||
areaStyle: {
|
|
||||||
opacity: 1,
|
|
||||||
color: "#F71F4F",
|
|
||||||
},
|
|
||||||
itemStyle: { color: "#F71F4F" },
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
||||||
|
plotOptions: {
|
||||||
|
series: {
|
||||||
|
color: "white",
|
||||||
|
animation: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
isLoading = false;
|
isLoading = false;
|
||||||
return options;
|
return options;
|
||||||
}
|
}
|
||||||
optionsData = marketTideData ? getPlotOptions() : null;
|
|
||||||
|
config = marketTideData ? getPlotOptions() : null;
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
if (selectedSector) {
|
if (selectedSector) {
|
||||||
@ -524,7 +439,7 @@
|
|||||||
|
|
||||||
originalNegTickers = topNegNetPremium;
|
originalNegTickers = topNegNetPremium;
|
||||||
displayNegTickers = topNegNetPremium;
|
displayNegTickers = topNegNetPremium;
|
||||||
optionsData = marketTideData ? getPlotOptions() : null;
|
config = marketTideData ? getPlotOptions() : null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -542,7 +457,7 @@
|
|||||||
>
|
>
|
||||||
<main class="w-full">
|
<main class="w-full">
|
||||||
<div class="w-full m-auto">
|
<div class="w-full m-auto">
|
||||||
{#if optionsData !== null}
|
{#if config !== null}
|
||||||
<p class="mt-4 text-white">
|
<p class="mt-4 text-white">
|
||||||
<strong>{selectedSector}</strong> Flow tracks sector stocks, net
|
<strong>{selectedSector}</strong> Flow tracks sector stocks, net
|
||||||
call/put premiums, and price movements to gauge market sentiment
|
call/put premiums, and price movements to gauge market sentiment
|
||||||
@ -550,9 +465,14 @@
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="flex flex-row items-center w-fit ml-auto mt-2 sm:mt-0"
|
class="flex flex-row items-center justify-between w-full mt-2 sm:mt-0"
|
||||||
>
|
>
|
||||||
<div class="relative inline-block text-left grow">
|
<div class="text-white text-sm italic mt-5 mb-3">
|
||||||
|
Last Updated: {formatDate(
|
||||||
|
findLastNonNull(marketTideData, "time"),
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div class="relative inline-block text-left w-fit">
|
||||||
<DropdownMenu.Root>
|
<DropdownMenu.Root>
|
||||||
<DropdownMenu.Trigger asChild let:builder>
|
<DropdownMenu.Trigger asChild let:builder>
|
||||||
<Button
|
<Button
|
||||||
@ -620,11 +540,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="text-white text-sm italic mt-5 mb-3">
|
|
||||||
Last Updated: {formatDate(
|
|
||||||
findLastNonNull(marketTideData, "time"),
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6"
|
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6"
|
||||||
>
|
>
|
||||||
@ -636,7 +551,7 @@
|
|||||||
<span class="ml-1 text-yellow-400">●</span>
|
<span class="ml-1 text-yellow-400">●</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-baseline">
|
<div class="flex items-baseline">
|
||||||
<span class="text-2xl font-bold text-white">
|
<span class="text-xl font-bold text-white">
|
||||||
{@html abbreviateNumberWithColor(
|
{@html abbreviateNumberWithColor(
|
||||||
findLastNonNull(marketTideData, "net_volume"),
|
findLastNonNull(marketTideData, "net_volume"),
|
||||||
false,
|
false,
|
||||||
@ -654,7 +569,7 @@
|
|||||||
<span class="ml-1 text-green-500">●</span>
|
<span class="ml-1 text-green-500">●</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-baseline">
|
<div class="flex items-baseline">
|
||||||
<span class="text-2xl font-bold text-white"
|
<span class="text-xl font-bold text-white"
|
||||||
>{@html abbreviateNumberWithColor(
|
>{@html abbreviateNumberWithColor(
|
||||||
findLastNonNull(marketTideData, "net_call_premium"),
|
findLastNonNull(marketTideData, "net_call_premium"),
|
||||||
false,
|
false,
|
||||||
@ -672,7 +587,7 @@
|
|||||||
<span class="ml-1 text-red-400">●</span>
|
<span class="ml-1 text-red-400">●</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-baseline">
|
<div class="flex items-baseline">
|
||||||
<span class="text-2xl font-bold text-white"
|
<span class="text-xl font-bold text-white"
|
||||||
>{@html abbreviateNumberWithColor(
|
>{@html abbreviateNumberWithColor(
|
||||||
findLastNonNull(marketTideData, "net_put_premium"),
|
findLastNonNull(marketTideData, "net_put_premium"),
|
||||||
false,
|
false,
|
||||||
@ -683,34 +598,19 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pb-8 sm:pb-2 rounded border border-gray-600">
|
<div
|
||||||
<div class="app w-full h-[300px] mt-5">
|
class="chart border border-gray-800 rounded"
|
||||||
{#if isLoading}
|
use:highcharts={config}
|
||||||
<div class="flex justify-center items-center h-80">
|
></div>
|
||||||
<div class="relative">
|
|
||||||
<label
|
|
||||||
class="bg-secondary z-10 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 text-white"
|
|
||||||
></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<Chart {init} options={optionsData} class="chart" />
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
<div class="w-full m-auto mt-5">
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<div class="w-full m-auto mt-10">
|
|
||||||
<div
|
<div
|
||||||
class="flex flex-wrap sm:flex-row items-center sm:justify-between mb-4"
|
class="flex flex-wrap sm:flex-row items-center sm:justify-between mb-4"
|
||||||
>
|
>
|
||||||
<div class="flex flex-row items-center">
|
<div class="flex flex-row items-center">
|
||||||
<label
|
<label
|
||||||
for="topPosNetPrem"
|
for="topPosNetPrem"
|
||||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
|
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl font-bold"
|
||||||
>
|
>
|
||||||
Top Stocks by Positive Net Prem
|
Top Stocks by Positive Net Prem
|
||||||
</label>
|
</label>
|
||||||
@ -815,7 +715,7 @@
|
|||||||
<div class="flex flex-row items-center">
|
<div class="flex flex-row items-center">
|
||||||
<label
|
<label
|
||||||
for="topNegNetPrem"
|
for="topNegNetPrem"
|
||||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
|
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl font-bold"
|
||||||
>
|
>
|
||||||
Top Stocks by Negative Net Prem
|
Top Stocks by Negative Net Prem
|
||||||
</label>
|
</label>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user