AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update options widget

Browse Source
This commit is contained in:
MuslemRahimi 2024-08-30 16:13:39 +02:00
parent 9018c6028a
commit 87a131180b
1 changed files with 36 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/routes/home/+page.svelte
View File

@ -10,8 +10,9 @@
import Crown from "lucide-svelte/icons/crown"; import Crown from "lucide-svelte/icons/crown";
import Activity from "lucide-svelte/icons/activity"; import Activity from "lucide-svelte/icons/activity";
import { abbreviateNumber, formatDate } from '$lib/utils'; import { abbreviateNumber, formatDate } from '$lib/utils';
import * as Tabs from "$lib/components/shadcn/tabs/index.js";
import { numberOfUnreadNotification} from '$lib/store';
import { screenWidth, numberOfUnreadNotification} from '$lib/store';
/* /*
import { Chart } from 'svelte-echarts' import { Chart } from 'svelte-echarts'
@ -28,6 +29,7 @@
export let data; export let data;
let isLoaded = false; let isLoaded = false;
const quickInfo = data?.getDashboard?.quickInfo; const quickInfo = data?.getDashboard?.quickInfo;
let optionsMode = 'premium';
function compareTimes(time1, time2) { function compareTimes(time1, time2) {
@ -156,8 +158,18 @@ function latestInfoDate(inputDate) {
return differenceInDays <=1; return differenceInDays <=1;
} }
let optionsTable = data?.getDashboard?.optionsFlow?.premium || [];
function changeTable(state) {
optionsMode = state;
if (optionsMode === 'premium') {
optionsTable = data?.getDashboard?.optionsFlow?.premium || [];
} else if (optionsMode === 'volume') {
optionsTable = data?.getDashboard?.optionsFlow?.volume || [];
} else {
optionsTable = data?.getDashboard?.optionsFlow?.openInterest || [];
}
}
let Feedback; let Feedback;
onMount( async() => { onMount( async() => {
@ -325,37 +337,44 @@ onMount( async() => {
<ArrowUpRight class="hidden sm:inline-block h-4 w-4 shrink-0 -mt-1 ml-0.5" /> <ArrowUpRight class="hidden sm:inline-block h-4 w-4 shrink-0 -mt-1 ml-0.5" />
</a> </a>
</div> </div>
<Card.Description class="mt-2 text-sm sm:text-[1rem]">Recent hedge fund options with the highest premiums.</Card.Description> <Card.Description class="mt-2 text-sm sm:text-[1rem]">Recent hedge fund options with the highest ...</Card.Description>
<Tabs.Root value="premium" class="w-fit mt-5 ">
<Tabs.List class="grid w-full grid-cols-3 bg-[#27272A]">
<Tabs.Trigger on:click={() => changeTable('premium')} value="premium" class="text-sm">Premium</Tabs.Trigger>
<Tabs.Trigger on:click={() => changeTable('volume')} value="volume" class="text-sm">Volume</Tabs.Trigger>
<Tabs.Trigger on:click={() => changeTable('openInterest')} value="openInterest" class="text-sm">{$screenWidth < 640 ? 'OI' : 'Open Interest'}</Tabs.Trigger>
</Tabs.List>
</Tabs.Root>
</div> </div>
</Card.Header> </Card.Header>
<Card.Content> <Card.Content>
<Table.Root class="overflow-x-scroll w-full"> <Table.Root class="overflow-x-scroll w-full">
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.Head class="text-white">Symbol</Table.Head> <Table.Head class="text-white font-semibold">Symbol</Table.Head>
<Table.Head class="text-white">Prem.</Table.Head> <Table.Head class="text-white text-right font-semibold">Prem</Table.Head>
<Table.Head class="text-white">Strike</Table.Head> <Table.Head class="text-white text-right font-semibold">Strike</Table.Head>
<Table.Head class="text-white">Sent.</Table.Head> <Table.Head class="text-white text-right font-semibold">{optionsMode === 'openInterest' ? 'OI' : 'Vol'}</Table.Head>
<Table.Head class="text-white">C/P</Table.Head> <Table.Head class="text-white text-right font-semibold">C/P</Table.Head>
<Table.Head class="text-right text-white">Expiry</Table.Head> <Table.Head class="text-right text-white font-semibold">Expiry</Table.Head>
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{#each data?.getDashboard?.optionsFlow as item} {#each optionsTable as item}
<Table.Row> <Table.Row>
<Table.Cell> <Table.Cell>
<a href={item?.assetType === 'stock' ? `/stocks/${item?.ticker}` : `/etf/${item?.ticker}`} class="text-sm sm:text-[1rem] font-medium text-blue-400 sm:hover:text-white transition duration-100">{item?.ticker}</a> <a href={item?.assetType === 'stock' ? `/stocks/${item?.ticker}` : `/etf/${item?.ticker}`} class="text-sm sm:text-[1rem] font-medium text-blue-400 sm:hover:text-white transition duration-100">{item?.ticker}</a>
</Table.Cell> </Table.Cell>
<Table.Cell class="xl:table.-column text-sm sm:text-[1rem] {item?.put_call === 'Calls' ? 'text-[#00FC50]' : 'text-[#FC2120]'}"> <Table.Cell class="text-right xl:table.-column text-sm sm:text-[1rem] {item?.put_call === 'Calls' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">
{abbreviateNumber(item?.cost_basis,true)} {abbreviateNumber(item?.cost_basis,true)}
</Table.Cell> </Table.Cell>
<Table.Cell class="xl:table.-column text-sm sm:text-[1rem]"> <Table.Cell class="text-right xl:table.-column text-sm sm:text-[1rem]">
${item?.strike_price} ${item?.strike_price}
</Table.Cell> </Table.Cell>
<Table.Cell class="md:table.-cell xl:table.-column text-sm sm:text-[1rem] {item?.sentiment === 'Bullish' ? 'text-[#00FC50]' : item?.sentiment === 'Bearish' ? 'text-[#FC2120]' : 'text-[#C6A755]'}"> <Table.Cell class="text-right md:table.-cell xl:table.-column text-sm sm:text-[1rem] text-white">
{item?.sentiment} {abbreviateNumber(optionsMode === 'openInterest' ? item?.open_interest : item?.volume)}
</Table.Cell> </Table.Cell>
<Table.Cell class="md:table.-cell xl:table.-column text-sm sm:text-[1rem] {item?.put_call === 'Calls' ? 'text-[#00FC50]' : 'text-[#FC2120]'}"> <Table.Cell class="text-right md:table.-cell xl:table.-column text-sm sm:text-[1rem] {item?.put_call === 'Calls' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">
{item?.put_call} {item?.put_call}
</Table.Cell> </Table.Cell>
@ -367,7 +386,7 @@ onMount( async() => {
</Card.Content> </Card.Content>
</Card.Root> </Card.Root>
<Card.Root class="overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar sm:max-h-[400px]"> <Card.Root class="overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar sm:max-h-[470px]">
<Card.Header class="flex flex-row items-center"> <Card.Header class="flex flex-row items-center">
<div class="flex flex-col items-start w-full"> <div class="flex flex-col items-start w-full">
<div class="flex flex-row w-full items-center"> <div class="flex flex-row w-full items-center">