add filter to economic calendar
This commit is contained in:
MuslemRahimi
parent
e7939b0a34
commit
8889ed04e2
@ -214,7 +214,7 @@ onMount( async() => {
|
||||
<Feedback data={data} />
|
||||
{/if}
|
||||
|
||||
|
||||
<!--
|
||||
<div class="text-center mb-10 relative w-fit flex justify-center m-auto">
|
||||
<a href="/options-flow" class="text-white antialiased bg-[#27272A] w-full px-4 py-2 rounded-lg m-auto font-medium text-[1rem] flex items-center">
|
||||
<span class="text-white sm:hover:text-blue-400">Options Flow Filter</span>
|
||||
@ -225,7 +225,7 @@ onMount( async() => {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<h1 class="text-white text-3xl font-semibold text-start w-full pl-4 pb-4 sm:pb-2">
|
||||
Dashboard
|
||||
|
||||
@ -164,7 +164,7 @@ async function handleChangeValue(value) {
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40">
|
||||
|
||||
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs">
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4 sm:ml-0">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li class="text-gray-300">Economic Calendar</li>
|
||||
@ -265,17 +265,12 @@ async function handleChangeValue(value) {
|
||||
|
||||
|
||||
|
||||
<div class="flex flex-row items-center w-fit ml-auto mt-6 mb-2 mr-3 sm:mr-0">
|
||||
{#if filterList?.length !== 0}
|
||||
<Button on:click={() => {filterList = []; checkedItems = new Set();} } class="mr-3 border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-4 h-4 mr-2" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M3.578 6.487A8 8 0 1 1 2.5 10.5"/><path d="M7.5 6.5h-4v-4"/></g></svg>
|
||||
Reset All
|
||||
</Button>
|
||||
{/if}
|
||||
<div class="flex flex-row items-center w-fit m-auto sm:m-0 pt-6 pb-3">
|
||||
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 gap-y-3 sm:gap-y-0 gap-x-2.5 lg:grid-cols-3 w-full mt-3 ">
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild let:builder>
|
||||
<Button builders={[builder]} class="border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate">
|
||||
<Button builders={[builder]} class="border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate">
|
||||
<span class="truncate text-white">Filter Country</span>
|
||||
<svg class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
@ -307,7 +302,58 @@ async function handleChangeValue(value) {
|
||||
</DropdownMenu.Group>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
|
||||
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild let:builder>
|
||||
<Button builders={[builder]} class="border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate">
|
||||
<span class="truncate text-white">Filter Importance</span>
|
||||
<svg class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content class="w-56 h-fit max-h-72 overflow-y-auto scroller">
|
||||
<div class="relative sticky z-40 focus:outline-none -top-1"
|
||||
tabindex="0" role="menu" style="">
|
||||
|
||||
</div>
|
||||
<DropdownMenu.Group>
|
||||
{#each [1, 2, 3] as i}
|
||||
<DropdownMenu.Item class="sm:hover:bg-[#27272A]">
|
||||
<div class="flex items-center">
|
||||
<label on:click={() => { handleChangeValue(i) }} class="flex flex-row items-center cursor-pointer text-white" for={i}>
|
||||
<input type="checkbox" checked={checkedItems?.has(i)} />
|
||||
<div class="ml-2 flex flex-row items-center">
|
||||
{#if i > 0}
|
||||
{#each Array(i).fill() as _, index}
|
||||
<svg class="w-4 h-4 text-[#FFA500]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
|
||||
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
|
||||
</svg>
|
||||
{/each}
|
||||
{#each Array(3 - i).fill() as _}
|
||||
<svg class="w-4 h-4 text-gray-300 dark:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
|
||||
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
|
||||
</svg>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</DropdownMenu.Item>
|
||||
{/each}
|
||||
|
||||
</DropdownMenu.Group>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
|
||||
{#if filterList?.length !== 0}
|
||||
<Button on:click={() => {filterList = []; checkedItems = new Set();} } class="w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-start items-center px-3 py-2 text-white rounded-lg truncate">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-4 h-4 mr-2" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M3.578 6.487A8 8 0 1 1 2.5 10.5"/><path d="M7.5 6.5h-4v-4"/></g></svg>
|
||||
Reset All
|
||||
</Button>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
@ -321,9 +367,9 @@ async function handleChangeValue(value) {
|
||||
<table class="table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
||||
<thead>
|
||||
<tr class="whitespace-nowrap">
|
||||
<th class="text-start text-white font-semibold text-sm"></th>
|
||||
<th class="text-start text-white font-semibold text-sm">Time</th>
|
||||
|
||||
<th class="text-start text-white font-semibold text-sm sm:text-[1rem]"></th>
|
||||
<th class="text-start text-white font-semibold text-sm sm:text-[1rem]">Country</th>
|
||||
<th class="text-start text-white font-semibold text-sm sm:text-[1rem]">Event</th>
|
||||
<th class="text-end text-white font-semibold text-sm sm:text-[1rem]">Actual</th>
|
||||
<th class="text-end text-white font-semibold text-sm sm:text-[1rem]">Forecast</th>
|
||||
@ -362,7 +408,7 @@ async function handleChangeValue(value) {
|
||||
</td>
|
||||
|
||||
<td class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{item?.actual !== null ? abbreviateNumber(item?.actual) : '-'}
|
||||
{item?.actual !== (null || '') ? abbreviateNumber(item?.actual) : '-'}
|
||||
</td>
|
||||
|
||||
<td class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
@ -380,7 +426,7 @@ async function handleChangeValue(value) {
|
||||
<td class="text-white text-start text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||
<div class="flex flex-row items-center justify-end">
|
||||
{#each Array.from({ length: 3 }) as _, i}
|
||||
{#if i <= Math.floor(item?.importance)}
|
||||
{#if i < Math.floor(item?.importance)}
|
||||
<svg class="w-4 h-4 text-[#FFA500]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
|
||||
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
|
||||
</svg>
|
||||
|
||||
@ -41,26 +41,39 @@ const countryMap = Object.fromEntries(
|
||||
listOfRelevantCountries.map((entry) => {
|
||||
const [code, name] = Object.entries(entry)[0];
|
||||
return [name, code];
|
||||
}),
|
||||
})
|
||||
);
|
||||
|
||||
onmessage = async (event: MessageEvent) => {
|
||||
const rawData = event.data?.rawData;
|
||||
const filterList = event.data?.filterList;
|
||||
const filterList: (string | number)[] = event.data?.filterList;
|
||||
console.log(filterList);
|
||||
|
||||
// Separate importance filters and country filters
|
||||
const importanceFilters = filterList.filter(
|
||||
(item) => typeof item === "number" && [1, 2, 3].includes(item as number)
|
||||
) as number[];
|
||||
const countryFilters = filterList.filter(
|
||||
(item) => typeof item === "string"
|
||||
) as string[];
|
||||
|
||||
// Map filterList country names to abbreviations
|
||||
const filterCodes = filterList?.map((name) => countryMap[name]) || [];
|
||||
const filterCodes = countryFilters.map((name) => countryMap[name]) || [];
|
||||
|
||||
// Filter rawData based on the mapped country codes
|
||||
// Filter rawData based on the mapped country codes and importance
|
||||
const output = rawData?.map((subArray) =>
|
||||
subArray?.filter((item) => filterCodes.includes(item?.country)),
|
||||
subArray?.filter((item) => {
|
||||
const countryMatch =
|
||||
filterCodes.length === 0 || filterCodes.includes(item?.country);
|
||||
const importanceMatch =
|
||||
importanceFilters.length === 0 ||
|
||||
importanceFilters.includes(item?.importance);
|
||||
return countryMatch && importanceMatch;
|
||||
})
|
||||
);
|
||||
|
||||
let finalData = { output };
|
||||
postMessage({ message: "success", finalData });
|
||||
|
||||
// Sending data back to the main thread
|
||||
//postMessage({ message: 'Data received in the worker', ticker, apiURL });
|
||||
};
|
||||
|
||||
export {};
|
||||
|
||||
@ -505,23 +505,6 @@ onDestroy(async() => {
|
||||
|
||||
})
|
||||
|
||||
|
||||
async function assetSelector(symbol, assetType)
|
||||
{
|
||||
|
||||
if(assetType === 'etf')
|
||||
{
|
||||
etfTicker.update(value => symbol);
|
||||
goto(`/etf/${symbol}`)
|
||||
}
|
||||
else if(assetType === 'stock') {
|
||||
stockTicker.update(value => symbol);
|
||||
goto(`/stocks/${symbol}`)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function reformatDate(dateString) {
|
||||
return dateString.substring(5, 7) + '/' + dateString.substring(8) + '/' + dateString.substring(2, 4);
|
||||
@ -1232,17 +1215,16 @@ $: {
|
||||
let:index
|
||||
let:style
|
||||
{style}
|
||||
class="tr cursor-pointer {index % 2 === 0 ? 'bg-[#27272A]' : 'bg-[#09090B]'}"
|
||||
class="tr {index % 2 === 0 ? 'bg-[#27272A]' : 'bg-[#09090B]'}"
|
||||
>
|
||||
<!-- Row data -->
|
||||
|
||||
<div style="justify-content: center;" class="td text-white pb-3 text-xs sm:text-sm text-start">
|
||||
{formatTime(displayedData[index]?.time)}
|
||||
</div>
|
||||
|
||||
<div on:click|stopPropagation={() => assetSelector(displayedData[index]?.ticker, displayedData[index]?.underlying_type)} style="justify-content: center;" class="td text-sm sm:hover:text-white sm:text-[1rem] text-blue-400 font-normal">
|
||||
<a href={displayedData[index]?.underlying_type === 'stock' ? `/stocks/${displayedData[index]?.ticker}` : `/etf/${displayedData[index]?.ticker}`} on:click|stopPropagation style="justify-content: center;" class="td text-sm sm:hover:text-white sm:text-[1rem] text-blue-400 font-normal">
|
||||
{displayedData[index]?.ticker}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div style="justify-content: center;" class="td text-sm sm:text-[1rem] text-white text-start">
|
||||
{reformatDate(displayedData[index]?.date_expiration)}
|
||||
|
||||
@ -195,7 +195,7 @@ $: charNumber = $screenWidth < 640 ? 15 : 40;
|
||||
<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">Watchlist</li>
|
||||
<li class="text-gray-300">Price Alert</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -294,14 +294,14 @@ $: charNumber = $screenWidth < 640 ? 15 : 40;
|
||||
|
||||
<div class="flex flex-row justify-end items-center pr-4 sm:pr-0 pb-2">
|
||||
{#if editMode}
|
||||
<label on:click={handleDelete} class="cursor-pointer bg-[#27272A] sm:hover:bg-[#27272A] duratiion-100 transition ease-in-out px-4 py-2 rounded-lg shadow-lg mr-3">
|
||||
<label on:click={handleDelete} class="cursor-pointer bg-[#27272A] sm:hover:bg-[#313131] duratiion-100 transition ease-in-out px-4 py-2 rounded-lg shadow-lg mr-3">
|
||||
<svg class="inline-block w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M10 5h4a2 2 0 1 0-4 0M8.5 5a3.5 3.5 0 1 1 7 0h5.75a.75.75 0 0 1 0 1.5h-1.32l-1.17 12.111A3.75 3.75 0 0 1 15.026 22H8.974a3.75 3.75 0 0 1-3.733-3.389L4.07 6.5H2.75a.75.75 0 0 1 0-1.5zm2 4.75a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0zM14.25 9a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75m-7.516 9.467a2.25 2.25 0 0 0 2.24 2.033h6.052a2.25 2.25 0 0 0 2.24-2.033L18.424 6.5H5.576z"/></svg>
|
||||
<span class="ml-1 text-white text-sm">
|
||||
{numberOfChecked}
|
||||
</span>
|
||||
</label>
|
||||
{/if}
|
||||
<label on:click={() => editMode = !editMode} class="cursor-pointer bg-[#27272A] sm:hover:bg-[#27272A] duratiion-100 transition ease-in-out px-4 py-2 rounded-lg shadow-lg">
|
||||
<label on:click={() => editMode = !editMode} class="cursor-pointer bg-[#27272A] sm:hover:bg-[#313131] duratiion-100 transition ease-in-out px-4 py-2 rounded-lg shadow-lg">
|
||||
<svg class="inline-block w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="white" d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640z"/><path fill="white" d="m469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"/></svg>
|
||||
{#if !editMode}
|
||||
<span class="ml-1 text-white text-sm">
|
||||
|
||||
@ -672,10 +672,10 @@ async function exportData(timePeriod:string) {
|
||||
{$displayCompanyName} ({$stockTicker}) Stock Price, Quote & News · stocknear
|
||||
</title>
|
||||
|
||||
<meta name="description" content={`Get a real-time ${$displayCompanyName} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
|
||||
<meta name="description" content={`Get a real-time ${$displayCompanyName} (${$stockTicker}) stock chart, price quote with breaking news, financials, statistics, charts and more.`} />
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Stock Price, Quote & News · stocknear`} />
|
||||
<meta property="og:description" content={`Get a real-time ${$displayCompanyName} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
|
||||
<meta property="og:description" content={`Get a real-time ${$displayCompanyName} (${$stockTicker}) stock chart, price quote with breaking news, financials, statistics, charts and more.`} />
|
||||
<!--<meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>-->
|
||||
<meta property="og:type" content="website" />
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
@ -683,7 +683,7 @@ async function exportData(timePeriod:string) {
|
||||
<!-- Twitter specific meta tags -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Stock Price, Quote & News · stocknear`} />
|
||||
<meta name="twitter:description" content={`Get a real-time ${$displayCompanyName} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
|
||||
<meta name="twitter:description" content={`Get a real-time ${$displayCompanyName} (${$stockTicker}) stock chart, price quote with breaking news, financials, statistics, charts and more.`} />
|
||||
<!--<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>-->
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user