From 4c3f2d2cfd038c6c3fc8808598d7cbd9b6277f7a Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Thu, 10 Oct 2024 12:36:41 +0200 Subject: [PATCH] add sorting column --- src/routes/options-flow/+page.svelte | 215 +++++++++++++++++++++++++-- 1 file changed, 200 insertions(+), 15 deletions(-) diff --git a/src/routes/options-flow/+page.svelte b/src/routes/options-flow/+page.svelte index 6a3e52b7..a3bb41ec 100644 --- a/src/routes/options-flow/+page.svelte +++ b/src/routes/options-flow/+page.svelte @@ -25,6 +25,7 @@ let ruleOfList = data?.getPredefinedCookieRuleOfList || []; let displayRules = []; + let filteredData = []; let filterQuery = ''; let animationClass = '' let animationId = ''; @@ -109,6 +110,7 @@ async function handleDeleteRule(state) { async function handleResetAll() { ruleOfList = []; + filteredData = []; ruleOfList = [...ruleOfList]; ruleName = ''; filterQuery = ''; @@ -202,7 +204,8 @@ const loadWorker = async () => { const handleMessage = (event) => { displayRules = allRows?.filter(row => ruleOfList.some(rule => rule.name === row.rule)); - displayedData = event.data?.filteredData ?? []; + filteredData = event.data?.filteredData ?? []; + displayedData = filteredData console.log('handle Message') calculateStats(displayedData); @@ -808,7 +811,6 @@ $: { ruleToUpdate.value = valueMappings[ruleToUpdate.name]; ruleToUpdate.condition = ruleCondition[ruleToUpdate.name]; ruleOfList = [...ruleOfList]; - console.log('test') shouldLoadWorker.set(true); } @@ -816,7 +818,150 @@ $: { } +let sortOrders = { + time: 'none', + ticker: 'none', + expiry: 'none', + dte: 'none', + strike: 'none', + callPut: 'none', + sentiment: 'none', + spot: 'none', + price: 'none', + premium: 'none', + type: 'none', + vol: 'none', + oi: 'none', + }; +// Generalized sorting function +function sortData(key) { + // Reset all other keys to 'none' except the current key + for (const k in sortOrders) { + if (k !== key) { + sortOrders[k] = 'none'; + } + } + + // Cycle through 'none', 'asc', 'desc' for the clicked key + if (key === 'time') { + // Only cycle between 'asc' and 'desc' for the 'time' key + if (sortOrders[key] === 'asc') { + sortOrders[key] = 'desc'; + } else { + sortOrders[key] = 'asc'; + } + } else { + // Cycle through 'none', 'asc', 'desc' for other keys + if (sortOrders[key] === 'none') { + sortOrders[key] = 'asc'; + } else if (sortOrders[key] === 'asc') { + sortOrders[key] = 'desc'; + } else { + sortOrders[key] = 'none'; + } + } + + + const sortOrder = sortOrders[key]; + const originalData = filteredData?.length !==0 ? [...filteredData] : [...rawData]; + if (sortOrder === 'none') { + // Reset to original data when 'none' + displayedData = originalData; + } else { + displayedData = [...originalData]?.sort((a, b) => { + if (key === 'time') { + // Handle time comparison + const timeA = new Date('1970-01-01T' + a.time).getTime(); + const timeB = new Date('1970-01-01T' + b.time).getTime(); + return sortOrder === 'asc' ? timeA - timeB : timeB - timeA; + } else if (key === 'ticker') { + // Handle alphabetical comparison for symbol + const tickerA = a.ticker.toUpperCase(); + const tickerB = b.ticker.toUpperCase(); + if (sortOrder === 'asc') { + return tickerA > tickerB ? 1 : -1; + } else { + return tickerA < tickerB ? 1 : -1; + } + } else if (key === 'expiry' || key==='dte') { + // Handle alphabetical comparison for symbol + const timeA = new Date (a?.date_expiration); + const timeB = new Date (b?.date_expiration); + return sortOrder === 'asc' ? timeA - timeB : timeB - timeA; + } else if (key === 'strike') { + // Handle numeric comparison for strike + const strikeA = parseFloat(a.strike_price); // Convert to float for comparison + const strikeB = parseFloat(b.strike_price); + return sortOrder === 'asc' ? strikeA - strikeB : strikeB - strikeA; + + } else if (key === 'spot') { + // Handle numeric comparison for strike + const strikeA = parseFloat(a.underlying_price); // Convert to float for comparison + const strikeB = parseFloat(b.underlying_price); + return sortOrder === 'asc' ? strikeA - strikeB : strikeB - strikeA; + } else if (key === 'price') { + // Handle numeric comparison for strike + const strikeA = parseFloat(a?.price); // Convert to float for comparison + const strikeB = parseFloat(b?.price); + return sortOrder === 'asc' ? strikeA - strikeB : strikeB - strikeA; + } else if (key === 'premium') { + // Handle numeric comparison for strike + const strikeA = parseFloat(a.cost_basis); // Convert to float for comparison + const strikeB = parseFloat(b.cost_basis); + return sortOrder === 'asc' ? strikeA - strikeB : strikeB - strikeA; + } else if (key === 'vol') { + // Handle numeric comparison for strike + const strikeA = parseFloat(a.volume); // Convert to float for comparison + const strikeB = parseFloat(b.volume); + return sortOrder === 'asc' ? strikeA - strikeB : strikeB - strikeA; + } else if (key === 'oi') { + // Handle numeric comparison for strike + const strikeA = parseFloat(a.open_interest); // Convert to float for comparison + const strikeB = parseFloat(b.open_interest); + return sortOrder === 'asc' ? strikeA - strikeB : strikeB - strikeA; + } else if (key === 'callPut') { + // Handle Call/Put sorting + const callPutA = a?.put_call?.toUpperCase(); // Normalize to uppercase + const callPutB = b?.put_call?.toUpperCase(); + if (sortOrder === 'asc') { + return callPutA > callPutB ? 1 : -1; + } else { + return callPutA < callPutB ? 1 : -1; + } + } else if (key === 'sentiment') { + // Handle sentiment sorting + const sentimentOrder = { + 'BULLISH': 1, + 'NEUTRAL': 2, + 'BEARISH': 3, + }; + const sentimentA = sentimentOrder[a.sentiment?.toUpperCase()] || 4; // Fallback for undefined values + const sentimentB = sentimentOrder[b.sentiment?.toUpperCase()] || 4; + + if (sortOrder === 'asc') { + return sentimentA - sentimentB; // Ascending order + } else { + return sentimentB - sentimentA; // Descending order + } + } else if (key === 'type') { + // Handle sentiment sorting + const sentimentOrder = { + 'SWEEP': 1, + 'TRADE': 2, + }; + const sentimentA = sentimentOrder[a?.option_activity_type?.toUpperCase()] || 3; // Fallback for undefined values + const sentimentB = sentimentOrder[b?.option_activity_type?.toUpperCase()] || 3; + + if (sortOrder === 'asc') { + return sentimentA - sentimentB; // Ascending order + } else { + return sentimentB - sentimentA; // Descending order + } + } + }); + } + } @@ -1281,20 +1426,59 @@ $: { >
-
Time
-
Symbol
+
sortData('time')} class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase"> + Time + +
+
sortData('ticker')} class="td cursor-pointer select-none bg-[#161618] font-bold text-slate-300 text-xs text-start uppercase"> + Symbol + +
Save
-
Expiry
-
DTE
-
Strike
-
C/P
-
Sent.
-
Spot
-
Price
-
Prem.
-
Type
-
Vol
-
OI
+
sortData('expiry')} class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase"> + Expiry + +
+
sortData('dte')} class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase"> + DTE + +
+
sortData('strike')} class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase"> + Strike + +
+
sortData('callPut')} class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase"> + C/P + +
+
sortData('sentiment')} class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase"> + Sent. + +
+
sortData('spot')} class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase"> + Spot + +
+
sortData('price')} class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase"> + Price + +
+
sortData('premium')} class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase"> + Prem + +
+
sortData('type')} class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase"> + Type + +
+
sortData('vol')} class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase"> + Vol + +
+
sortData('oi')} class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase"> + OI + +
{formatTime(displayedData[index]?.time)} +
{displayedData[index]?.ticker}