diff --git a/src/lib/components/OptionsNetFlow.svelte b/src/lib/components/OptionsNetFlow.svelte index ea59efd3..b88cd4ad 100644 --- a/src/lib/components/OptionsNetFlow.svelte +++ b/src/lib/components/OptionsNetFlow.svelte @@ -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 @@ -
@@ -238,7 +221,7 @@
- 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'}.
@@ -253,17 +236,9 @@
-
- - - - Price - -
-
- + Net Call diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index b7e9f012..9ad2927d 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -811,9 +811,8 @@ $: {
Dividends Calendar Earnings Calendar - FDA Calendar - IPO Calendar + IPO Calendar Economic Calendar Stock Splits Calendar
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte index f5abfa29..4caa9184 100644 --- a/src/routes/blog/+page.svelte +++ b/src/routes/blog/+page.svelte @@ -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; -
- - -
+
+ +
    -
  • Home
    • -
  • All Blog Post
    • +
  • Home
    • +
  • Top Shorted Stocks
-
+
+ +
+ +
+
-
-
+ +
+ +
+
@@ -157,9 +165,9 @@ let allBlogPosts = data?.getAllBlogPost;
+ + +
+
+ + +
+ + + +
-
diff --git a/src/routes/blog/article/[slug]/+page.svelte b/src/routes/blog/article/[slug]/+page.svelte index 8775d3cb..c8ea51d2 100644 --- a/src/routes/blog/article/[slug]/+page.svelte +++ b/src/routes/blog/article/[slug]/+page.svelte @@ -22,7 +22,6 @@ const article = data?.getArticle; - @@ -30,14 +29,13 @@ const article = data?.getArticle; -
-
+
-