update options net flow
This commit is contained in:
MuslemRahimi
parent
92d0fef9a8
commit
3cd74bee0b
@ -3,14 +3,17 @@
|
||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||
import { Chart } from 'svelte-echarts'
|
||||
import { init, use } from 'echarts/core'
|
||||
import { LineChart } from 'echarts/charts'
|
||||
import { GridComponent } from 'echarts/components'
|
||||
import { BarChart } from 'echarts/charts'
|
||||
import { GridComponent, TooltipComponent } from 'echarts/components'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
|
||||
export let data;
|
||||
|
||||
use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
|
||||
|
||||
|
||||
const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
|
||||
use([LineChart, GridComponent, CanvasRenderer])
|
||||
|
||||
let isLoaded = false;
|
||||
|
||||
|
||||
@ -43,7 +46,7 @@
|
||||
let priceList = [];
|
||||
let netCallList = [];
|
||||
let netPutList = [];
|
||||
|
||||
console.log(rawData)
|
||||
// Iterate over the data and extract required information
|
||||
rawData?.forEach(item => {
|
||||
|
||||
@ -55,7 +58,7 @@
|
||||
});
|
||||
|
||||
sentiment = netCallList?.slice(-1)?.at(0) > netPutList?.slice(-1)?.at(0) ? 'bullish' : 'bearish';
|
||||
|
||||
|
||||
const {unit, denominator } = normalizer(Math.max(...netCallList) ?? 0)
|
||||
|
||||
const option = {
|
||||
@ -72,15 +75,25 @@
|
||||
top: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis:
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: dates,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: dates, // Use the full dates here
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
formatter: function (value, index) {
|
||||
if (index % 2 === 0) {
|
||||
|
||||
const dateParts = value.split(' ')[0].split('-');
|
||||
const day = dateParts[2]; // Extracting the day
|
||||
const monthIndex = parseInt(dateParts[1], 10) - 1; // Zero-indexed months
|
||||
return `${day} ${monthNames[monthIndex]}`; // Return formatted day and month
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
@ -100,60 +113,31 @@
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
position: 'right',
|
||||
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
formatter: function (value, index) {
|
||||
if (index % 2 === 0) {
|
||||
return '$'+value?.toFixed(1)
|
||||
} else {
|
||||
return ''; // Hide this tick
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Price',
|
||||
data: priceList,
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
{
|
||||
name: 'Net Call',
|
||||
data: netCallList,
|
||||
type: 'bar',
|
||||
stack: 'NetFlow',
|
||||
itemStyle: {
|
||||
color: '#fff'
|
||||
color: '#2256FF'
|
||||
},
|
||||
showSymbol: false,
|
||||
showSymbol: false,
|
||||
|
||||
},
|
||||
{
|
||||
name: 'Net Put',
|
||||
data: netPutList,
|
||||
type: 'line',
|
||||
areaStyle: {opacity: 0.5},
|
||||
type: 'bar',
|
||||
stack: 'NetFlow',
|
||||
itemStyle: {
|
||||
color: '#FF2F1F'
|
||||
color: '#FF2256'
|
||||
},
|
||||
showSymbol: false,
|
||||
|
||||
},
|
||||
{
|
||||
name: 'Net Call',
|
||||
data: netCallList,
|
||||
type: 'line',
|
||||
areaStyle: {opacity: 0.5},
|
||||
stack: 'NetFlow',
|
||||
itemStyle: {
|
||||
color: '#10DB06'
|
||||
},
|
||||
showSymbol: false,
|
||||
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
@ -215,7 +199,6 @@
|
||||
|
||||
</script>
|
||||
|
||||
<svelte:options immutable={true} />
|
||||
|
||||
<section class="overflow-hidden text-white h-full pb-8">
|
||||
<main class="overflow-hidden ">
|
||||
@ -238,7 +221,7 @@
|
||||
|
||||
<div class="w-full flex flex-col items-start">
|
||||
<div class="text-white text-[1rem] mt-2 mb-2 w-full">
|
||||
Analysis of the 20-day moving average of the options net flow demonstrates a {sentiment} trend, characterized by the {sentiment === 'bullish' ? 'Net Call Flow exceeding the Net Put Flow' : 'Net Put Flow exceeding the Net Call Flow'} .
|
||||
The options net flow demonstrates a {sentiment} trend in the last 2 trading hours, characterized by the {sentiment === 'bullish' ? 'Net Call Flow exceeding the Net Put Flow' : 'Net Put Flow exceeding the Net Call Flow'}.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -253,17 +236,9 @@
|
||||
|
||||
<div class="flex flex-row items-center justify-between mx-auto mt-5 w-full sm:w-11/12">
|
||||
|
||||
<div class="mt-3.5 sm:mt-0 flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
|
||||
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
|
||||
<div class="w-3 h-3 bg-[#fff] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
|
||||
<span class="mt-2 sm:mt-0 text-white text-center sm:text-start text-xs sm:text-md inline-block">
|
||||
Price
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
|
||||
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
|
||||
<div class="w-3 h-3 bg-[#10DB06] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
|
||||
<div class="w-3 h-3 bg-[#2256FF] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
|
||||
<span class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block">
|
||||
Net Call
|
||||
</span>
|
||||
|
||||
@ -811,9 +811,8 @@ $: {
|
||||
<div class="flex flex-col items-start">
|
||||
<a href="/dividends-calendar" class="text-[1rem] text-white ml-4 mt-4">Dividends Calendar</a>
|
||||
<a href="/earnings-calendar" class="text-[1rem] text-white ml-4 mt-4">Earnings Calendar</a>
|
||||
<a href="/fda-calendar" class="text-[1rem] text-white ml-4 mt-4">FDA Calendar</a>
|
||||
<a href="/ipos/2024" class="text-[1rem] text-white ml-4 mt-4">IPO Calendar</a>
|
||||
<!--<a href="/fda-calendar" class="text-[1rem] text-white ml-4 mt-4">FDA Calendar</a>-->
|
||||
<a href="/ipos/2024" class="text-[1rem] text-white ml-4 mt-4">IPO Calendar</a>
|
||||
<a href="/economic-calendar" class="text-[1rem] text-white ml-4 mt-4">Economic Calendar</a>
|
||||
<a href="/stock-splits-calendar" class="text-[1rem] text-white ml-4 mt-4">Stock Splits Calendar</a>
|
||||
</div>
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
import { articleId, numberOfUnreadNotification } from '$lib/store';
|
||||
import { goto } from '$app/navigation';
|
||||
import {getImageURL} from '$lib/utils';
|
||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||
|
||||
|
||||
export let data;
|
||||
@ -81,18 +82,25 @@ let allBlogPosts = data?.getAllBlogPost;
|
||||
|
||||
|
||||
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
|
||||
|
||||
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
|
||||
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li class="text-gray-300">All Blog Post</li>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li class="text-gray-300">Top Shorted Stocks</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full overflow-hidden m-auto mt-5">
|
||||
|
||||
<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">
|
||||
|
||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10 ">
|
||||
|
||||
<main class="w-full lg:w-3/4 lg:pr-5">
|
||||
|
||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
|
||||
<!-- Start Column -->
|
||||
<div>
|
||||
@ -157,9 +165,9 @@ let allBlogPosts = data?.getAllBlogPost;
|
||||
<label on:click={() => blogSelector(item?.id)} class="cursor-pointer">
|
||||
<div class="flex-shrink-0 m-auto">
|
||||
<img
|
||||
class="w-full h-56 rounded-t-xl"
|
||||
class="w-full object-cover h-56 rounded-t-xl"
|
||||
src={getImageURL(item?.collectionId, item?.id, item?.cover)}
|
||||
alt="User avatar" loading="lazy"/>
|
||||
alt="Wallpaper" loading="lazy"/>
|
||||
</div>
|
||||
|
||||
<div class="pl-4 pt-3 w-11/12">
|
||||
@ -209,7 +217,64 @@ let allBlogPosts = data?.getAllBlogPost;
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
||||
|
||||
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
|
||||
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Pro Subscription 🔥
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Upgrade now for unlimited access to all data and tools
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Top Analyst 📊
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Wall Street analyst ratings
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div on:click={() => goto('/analysts/top-stocks')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Top Stocks Picks ⭐
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Wall Street analyst ratings.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
@ -22,7 +22,6 @@ const article = data?.getArticle;
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content="{article?.title}"/>
|
||||
<meta property="og:description" content="{article?.abstract}"/>
|
||||
<meta property="og:image" content="{getImageURL(article?.collectionId, article?.id, article?.cover)}"/>
|
||||
<meta property="og:type" content="article"/>
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
|
||||
@ -30,14 +29,13 @@ const article = data?.getArticle;
|
||||
<meta name="twitter:card" content="summary_large_image"/>
|
||||
<meta name="twitter:title" content="{article?.title}"/>
|
||||
<meta name="twitter:description" content="{article?.abstract}"/>
|
||||
<meta name="twitter:image" content="{getImageURL(article?.collectionId, article?.id, article?.cover)}"/>
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
|
||||
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
|
||||
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4 sm:ml-0">
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs ">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li><a href="/blog" class="text-gray-300">All Blog Post</a></li>
|
||||
@ -46,7 +44,7 @@ const article = data?.getArticle;
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-3 w-full max-w-4xl h-72 flex flex-col bg-cover bg-center bg-no-repeat"
|
||||
<div class="mt-3 w-full max-w-4xl h-72 flex flex-col bg-cover bg-center bg-no-repeat rounded-lg"
|
||||
style="background-image: url('{article?.cover ? getImageURL(article?.collectionId, article?.id, article?.cover) : ''}');" />
|
||||
|
||||
<main class="grow m-auto">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user