add ticker flow
This commit is contained in:
MuslemRahimi
parent
7f8a198f6a
commit
40f410d5fb
461
src/lib/components/Options/TickerFlow.svelte
Normal file
461
src/lib/components/Options/TickerFlow.svelte
Normal file
@ -0,0 +1,461 @@
|
||||
<script lang="ts">
|
||||
import { screenWidth } from "$lib/store";
|
||||
|
||||
import HoverStockChart from "$lib/components/HoverStockChart.svelte";
|
||||
import { abbreviateNumberWithColor } from "$lib/utils";
|
||||
import InfoModal from "$lib/components/InfoModal.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,
|
||||
]);
|
||||
|
||||
export let tickerFlow = [];
|
||||
let isLoading = false;
|
||||
let optionsData = null;
|
||||
|
||||
function findLastNonNull(dataArray, key) {
|
||||
for (let i = dataArray.length - 1; i >= 0; i--) {
|
||||
if (
|
||||
dataArray[i]?.net_call_premium !== null &&
|
||||
dataArray[i]?.net_call_premium !== undefined
|
||||
) {
|
||||
return dataArray[i][key];
|
||||
}
|
||||
}
|
||||
return null; // Return null if no non-null value is found.
|
||||
}
|
||||
|
||||
function formatDate(dateStr) {
|
||||
// Parse the input date string
|
||||
var date = new Date(dateStr);
|
||||
|
||||
// Get month, day, and year
|
||||
var month = date.getMonth() + 1; // Month starts from 0
|
||||
var day = date.getDate();
|
||||
var year = date.getFullYear();
|
||||
|
||||
// Get hours and minutes
|
||||
var hours = date.getHours();
|
||||
var minutes = date.getMinutes();
|
||||
|
||||
// Determine AM/PM and adjust hours
|
||||
var ampm = hours >= 12 ? "PM" : "AM";
|
||||
hours = hours % 12;
|
||||
hours = hours === 0 ? 12 : hours; // Convert 0 hours to 12 for AM/PM
|
||||
|
||||
// Add leading zeros if necessary
|
||||
month = (month < 10 ? "0" : "") + month;
|
||||
day = (day < 10 ? "0" : "") + day;
|
||||
minutes = (minutes < 10 ? "0" : "") + minutes;
|
||||
|
||||
// Format the date as MM/DD/YYYY HH:MM AM/PM
|
||||
var formattedDate = `${month}/${day}/${year} ${hours}:${minutes} ${ampm}`;
|
||||
|
||||
return formattedDate;
|
||||
}
|
||||
|
||||
function getPlotOptions() {
|
||||
isLoading = true;
|
||||
let dates = tickerFlow?.map((item) => item?.time);
|
||||
const priceList = tickerFlow?.map((item) =>
|
||||
item?.close !== null ? item?.close?.toFixed(2) : item?.close,
|
||||
);
|
||||
const netCallPremList = tickerFlow?.map((item) => item?.net_call_premium);
|
||||
const netPutPremList = tickerFlow?.map((item) => item?.net_put_premium);
|
||||
const volumeList = tickerFlow?.map((item) => item?.net_volume);
|
||||
|
||||
const positiveVolume = volumeList.map((v) => (v >= 0 ? v : "-"));
|
||||
const negativeVolume = volumeList.map((v) => (v < 0 ? v : "-"));
|
||||
|
||||
const options = {
|
||||
silent: true,
|
||||
animation: false,
|
||||
legend: {
|
||||
data: ["Price", "Vol", "Net Call Premium", "Net Put Premium"],
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
hideDelay: 100,
|
||||
borderColor: "#969696",
|
||||
borderWidth: 1,
|
||||
backgroundColor: "#313131",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
formatter: function (params) {
|
||||
const timestamp = params[0].axisValue;
|
||||
let result = timestamp + "<br/>";
|
||||
|
||||
// Find volume value and determine color
|
||||
const volParams = params.find((p) => p.seriesName.includes("Vol"));
|
||||
const volIndex = volParams?.dataIndex ?? 0;
|
||||
const volValue = volumeList[volIndex];
|
||||
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) => {
|
||||
const marker =
|
||||
'<span style="display:inline-block;margin-right:4px;' +
|
||||
"border-radius:10px;width:10px;height:10px;background-color:" +
|
||||
param.color +
|
||||
'"></span>';
|
||||
result +=
|
||||
marker +
|
||||
param.seriesName +
|
||||
": " +
|
||||
abbreviateNumberWithColor(param.value, false, true) +
|
||||
"<br/>";
|
||||
});
|
||||
|
||||
return result;
|
||||
},
|
||||
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 "";
|
||||
},
|
||||
interval: 30,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
type: "category",
|
||||
gridIndex: 1,
|
||||
data: dates,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
gridIndex: 0,
|
||||
position: "left",
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
show: true,
|
||||
},
|
||||
scale: true,
|
||||
min: (value) => Math.floor(value.min * 0.999),
|
||||
max: (value) => Math.ceil(value.max * 1.001),
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
gridIndex: 0,
|
||||
position: "right",
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
gridIndex: 1,
|
||||
position: "right",
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "Price",
|
||||
type: "line",
|
||||
data: priceList,
|
||||
yAxisIndex: 0,
|
||||
xAxisIndex: 0,
|
||||
showSymbol: false,
|
||||
lineStyle: { color: "#fff" },
|
||||
itemStyle: { color: "#fff" },
|
||||
smooth: true,
|
||||
},
|
||||
{
|
||||
name: "Net Call Premium",
|
||||
type: "line",
|
||||
data: netCallPremList,
|
||||
yAxisIndex: 1,
|
||||
xAxisIndex: 0,
|
||||
showSymbol: false,
|
||||
lineStyle: { color: "#90EE90" },
|
||||
itemStyle: { color: "#90EE90" },
|
||||
smooth: true,
|
||||
},
|
||||
{
|
||||
name: "Net Put Premium",
|
||||
type: "line",
|
||||
data: netPutPremList,
|
||||
yAxisIndex: 1,
|
||||
xAxisIndex: 0,
|
||||
showSymbol: false,
|
||||
lineStyle: { color: "#FF6B6B" },
|
||||
itemStyle: { color: "#FF6B6B" },
|
||||
smooth: true,
|
||||
},
|
||||
{
|
||||
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" },
|
||||
},
|
||||
],
|
||||
};
|
||||
isLoading = false;
|
||||
return options;
|
||||
}
|
||||
optionsData = tickerFlow ? getPlotOptions() : null;
|
||||
</script>
|
||||
|
||||
<section class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden">
|
||||
<div class="w-full overflow-hidden m-auto">
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||
<div
|
||||
class="relative flex justify-center items-start overflow-hidden w-full"
|
||||
>
|
||||
<main class="w-full">
|
||||
<div class="w-full m-auto">
|
||||
{#if optionsData !== null}
|
||||
<label
|
||||
for="dailyNetPutCallPrem"
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit"
|
||||
>
|
||||
Daily Net Put / Call Premium
|
||||
<InfoModal
|
||||
title={"Daily Net Put / Call Premium"}
|
||||
content={`Daily Net Put / Call Premium works similar like the Market Flow, which evaluates the balance between advancing and
|
||||
declining price movements, net call
|
||||
premiums and net put premiums, providing a real-time snapshot of
|
||||
market sentiment and momentum. <a
|
||||
href="/learning-center/article/market-sentiment-through-options-activity-riding-the-tide"
|
||||
class="text-blue-400 sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
|
||||
>Learn more here.</a
|
||||
>`}
|
||||
id={"dailyNetPutCallPrem"}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div class="text-white text-xs sm:text-sm italic mt-5 mb-3">
|
||||
Last Updated: {formatDate(findLastNonNull(tickerFlow, "time"))}
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6"
|
||||
>
|
||||
<div
|
||||
class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"
|
||||
>
|
||||
<div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
|
||||
<span>Volume</span>
|
||||
<span class="ml-1 text-yellow-400">●</span>
|
||||
</div>
|
||||
<div class="flex items-baseline">
|
||||
<span class="text-2xl font-bold text-white">
|
||||
{@html abbreviateNumberWithColor(
|
||||
findLastNonNull(tickerFlow, "net_volume"),
|
||||
false,
|
||||
true,
|
||||
)}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"
|
||||
>
|
||||
<div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
|
||||
<span>Net Call Prem</span>
|
||||
<span class="ml-1 text-green-500">●</span>
|
||||
</div>
|
||||
<div class="flex items-baseline">
|
||||
<span class="text-2xl font-bold text-white"
|
||||
>{@html abbreviateNumberWithColor(
|
||||
findLastNonNull(tickerFlow, "net_call_premium"),
|
||||
false,
|
||||
true,
|
||||
)}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"
|
||||
>
|
||||
<div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
|
||||
<span>Net Put Prem</span>
|
||||
<span class="ml-1 text-red-400">●</span>
|
||||
</div>
|
||||
<div class="flex items-baseline">
|
||||
<span class="text-2xl font-bold text-white"
|
||||
>{@html abbreviateNumberWithColor(
|
||||
findLastNonNull(tickerFlow, "net_put_premium"),
|
||||
false,
|
||||
true,
|
||||
)}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="app w-full h-[300px] mt-5">
|
||||
{#if isLoading}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<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}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
@ -33,10 +33,8 @@
|
||||
|
||||
if (state !== "overview" && subSectionMap[state]) {
|
||||
displaySubSection = state;
|
||||
//goto(`/stocks/${$stockTicker}${subSectionMap[state]}`);
|
||||
} else {
|
||||
displaySubSection = state;
|
||||
//goto(`/stocks/${$stockTicker}/stats`);
|
||||
}
|
||||
}
|
||||
|
||||
@ -82,6 +80,17 @@
|
||||
>
|
||||
Analysts Ratings
|
||||
</a>
|
||||
<!--
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/forecast/ai`}
|
||||
on:click={() => changeSubSection("ai")}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection === 'ai'
|
||||
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
|
||||
>
|
||||
AI Forecast
|
||||
</a>
|
||||
-->
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@ -26,6 +26,26 @@ export const load = async ({ locals, params }) => {
|
||||
};
|
||||
|
||||
|
||||
const getTickerFlow = async () => {
|
||||
const postData = {
|
||||
ticker: params.tickerID,
|
||||
};
|
||||
|
||||
const response = await fetch(apiURL + "/ticker-flow", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-API-KEY": apiKey,
|
||||
},
|
||||
body: JSON.stringify(postData),
|
||||
});
|
||||
|
||||
const output = await response.json();
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
|
||||
|
||||
const getOptionsHistoricalData = async () => {
|
||||
const postData = {
|
||||
@ -52,6 +72,7 @@ export const load = async ({ locals, params }) => {
|
||||
// Make sure to return a promise
|
||||
return {
|
||||
getDailyStats: await getDailyStats(),
|
||||
getTickerFlow: await getTickerFlow(),
|
||||
getOptionsHistoricalData: await getOptionsHistoricalData(),
|
||||
};
|
||||
};
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { displayCompanyName, screenWidth, stockTicker } from "$lib/store";
|
||||
import DailyStats from "$lib/components/Options/DailyStats.svelte";
|
||||
import TickerFlow from "$lib/components/Options/TickerFlow.svelte";
|
||||
|
||||
import { Chart } from "svelte-echarts";
|
||||
import { abbreviateNumberWithColor, monthNames } from "$lib/utils";
|
||||
import { onMount } from "svelte";
|
||||
@ -16,6 +18,7 @@
|
||||
|
||||
export let data;
|
||||
let dailyStats = data?.getDailyStats;
|
||||
let tickerFlow = data?.getTickerFlow;
|
||||
|
||||
let filteredList = [];
|
||||
|
||||
@ -299,6 +302,11 @@
|
||||
<Infobox text="No Options data available" />
|
||||
{/if}
|
||||
|
||||
{#if tickerFlow?.length > 0}
|
||||
<div class="w-full mb-5">
|
||||
<TickerFlow {tickerFlow} />
|
||||
</div>
|
||||
{/if}
|
||||
{#if Object?.keys(dailyStats)?.length > 0}
|
||||
<div class="w-full mb-10">
|
||||
<DailyStats rawData={dailyStats} />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user