update swap component

This commit is contained in:
MuslemRahimi 2024-07-21 10:01:24 +02:00
parent 35c6262542
commit 2c69754182
2 changed files with 22 additions and 12 deletions

View File

@ -10,8 +10,8 @@
let isLoaded = false;
const usRegion = ['cle1','iad1','pdx1','sfo1'];
let apiURL;
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
let apiURL;
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
userRegion.subscribe(value => {

View File

@ -1,5 +1,7 @@
<script lang ='ts'>
import { swapComponent, displayCompanyName, stockTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
import { abbreviateNumber } from "$lib/utils";
import { swapComponent, stockTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts'
import { Motion, AnimateSharedLayout } from "svelte-motion";
@ -56,9 +58,10 @@ function changeTab(index) {
let rawData = [];
let optionsData;
let sentiment;
let avgNotionalAmount;
let avgNotionalQuantity;
function normalizer(value) {
if (Math?.abs(value) >= 1e18) {
return { unit: 'Q', denominator: 1e18 };
@ -83,7 +86,7 @@ function changeTab(index) {
let dates = [];
let notionalAmount = [];
let notionalQuanitity = [];
let notionalQuantity = [];
// Iterate over the data and extract required information
rawData?.forEach(item => {
@ -95,20 +98,27 @@ function changeTab(index) {
dates?.push(item['Expiration Date']);
}
notionalAmount?.push(item['Notional amount-Leg 1']);
notionalQuanitity?.push(item['Total notional quantity-Leg 1']);
notionalQuantity?.push(item['Total notional quantity-Leg 1']);
});
dates?.sort((a, b) => {
return new Date(a) - new Date(b);
});
// Compute the average of item?.traded
const totalNotionalAmount = notionalAmount?.reduce((acc, item) => acc + item, 0);
avgNotionalAmount = totalNotionalAmount / notionalAmount?.length;
const totalNotionalQuantity = notionalQuantity?.reduce((acc, item) => acc + item, 0);
avgNotionalQuantity = totalNotionalQuantity / notionalQuantity?.length;
const {unit, denominator } = normalizer(Math.max(...notionalAmount) ?? 0)
const { unit: quantityUnit, denominator: quantityDenominator } = normalizer(Math.max(...notionalQuanitity) ?? 0);
const { unit: quantityUnit, denominator: quantityDenominator } = normalizer(Math.max(...notionalQuantity) ?? 0);
const option = {
silent: true,
animation: $screenWidth < 640 ? false: true,
animation: false,
grid: {
left: '2%',
right: $screenWidth < 640 ? '2%' : '6%',
@ -174,7 +184,7 @@ function changeTab(index) {
{
type: 'scatter',
symbolSize: 8,
data: dates?.map((date, index) => [date, notionalQuanitity[index]]),
data: dates?.map((date, index) => [date, notionalQuantity[index]]),
yAxisIndex: 1,
itemStyle: {
color: '#fff'
@ -276,7 +286,7 @@ function changeTab(index) {
<div class="w-full flex flex-col items-start">
<div class="text-white text-sm sm: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 swap data from the past 100 days shows an average notional amount of {abbreviateNumber(avgNotionalAmount,true)} and an average notional quantity of {abbreviateNumber(avgNotionalQuantity)}.
</div>
</div>
@ -287,7 +297,7 @@ function changeTab(index) {
{#each tabs as item, i}
<button
on:click={() => changeTab(i)}
class="group relative z-[1] rounded-full px-3 sm:px-6 py-1 {activeIdx === i
class="group relative z-[1] rounded-full px-3 py-1 {activeIdx === i
? 'z-0'
: ''} "
>