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

ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2025-04-04 11:46:06 +02:00
parent bdc97d13f2
commit e374c8d778
3 changed files with 25 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/lib/utils.ts
View File

@ -1301,6 +1301,7 @@ export function getPartyForPoliticians(name) {
"John Delaney": "Democratic", "John Delaney": "Democratic",
"Cleo Fields": "Democratic", "Cleo Fields": "Democratic",
"James Banks": "Republican", "James Banks": "Republican",
"April Delaney": "Democratic",
}; };
// Combine first and last name to form the key // Combine first and last name to form the key

18
src/routes/market-flow/+page.svelte
View File

@ -263,12 +263,17 @@
}, },
title: { title: {
text: null, text: `<h3 class="mt-3 -mb-2">S&P500 Flow</h3>`,
style: {
color: $mode === "light" ? "black" : "white",
// Using inline CSS for margin-top and margin-bottom
},
useHTML: true, // Enable HTML to apply custom class styling
}, },
legend: { legend: {
enabled: true, enabled: true,
align: "left", // Positions legend at the left edge align: "center", // Positions legend at the left edge
verticalAlign: "top", // Positions legend at the top verticalAlign: "top", // Positions legend at the top
layout: "horizontal", // Align items horizontally (use 'vertical' if preferred) layout: "horizontal", // Align items horizontally (use 'vertical' if preferred)
itemStyle: { itemStyle: {
@ -297,10 +302,9 @@
// Format the x value to display time in a custom format // Format the x value to display time in a custom format
let tooltipContent = `<span class="m-auto text-[1rem] font-[501]">${new Date( let tooltipContent = `<span class="m-auto text-[1rem] font-[501]">${new Date(
this?.x, this?.x,
).toLocaleDateString("en-US", { )?.toLocaleTimeString("en-US", {
year: "numeric", hour: "2-digit",
month: "short", minute: "2-digit",
day: "numeric",
})}</span><br>`; })}</span><br>`;
// Loop through each point in the shared tooltip // Loop through each point in the shared tooltip
@ -462,7 +466,7 @@
{#if config !== null} {#if config !== null}
<p class="mt-4"> <p class="mt-4">
Market Flow evaluates the balance between advancing and Market Flow evaluates the balance between advancing and
declining stocks by analyzing SP& 500 price movements, net call declining stocks by analyzing S&P500 price movements, net call
premiums and net put premiums, providing a real-time snapshot of premiums and net put premiums, providing a real-time snapshot of
market sentiment and momentum. <a market sentiment and momentum. <a
href="/learning-center/article/market-sentiment-through-options-activity-riding-the-tide" href="/learning-center/article/market-sentiment-through-options-activity-riding-the-tide"

25
src/routes/market-flow/sector-flow/+page.svelte
View File

@ -233,9 +233,7 @@
?.slice(0, 50); ?.slice(0, 50);
}; };
function getPlotOptions() { function plotData() {
isLoading = true;
// Determine the base date (using the first data point, or fallback to today) // Determine the base date (using the first data point, or fallback to today)
const baseDate = const baseDate =
marketTideData && marketTideData.length marketTideData && marketTideData.length
@ -288,12 +286,17 @@
}, },
title: { title: {
text: null, text: `<h3 class="mt-3 -mb-2">${selectedSector} Flow</h3>`,
style: {
color: $mode === "light" ? "black" : "white",
// Using inline CSS for margin-top and margin-bottom
},
useHTML: true, // Enable HTML to apply custom class styling
}, },
legend: { legend: {
enabled: true, enabled: true,
align: "left", // Positions legend at the left edge align: "center", // Positions legend at the left edge
verticalAlign: "top", // Positions legend at the top verticalAlign: "top", // Positions legend at the top
layout: "horizontal", // Align items horizontally (use 'vertical' if preferred) layout: "horizontal", // Align items horizontally (use 'vertical' if preferred)
itemStyle: { itemStyle: {
@ -322,10 +325,9 @@
// Format the x value to display time in a custom format // Format the x value to display time in a custom format
let tooltipContent = `<span class="m-auto text-[1rem] font-[501]">${new Date( let tooltipContent = `<span class="m-auto text-[1rem] font-[501]">${new Date(
this?.x, this?.x,
).toLocaleDateString("en-US", { )?.toLocaleTimeString("en-US", {
year: "numeric", hour: "2-digit",
month: "short", minute: "2-digit",
day: "numeric",
})}</span><br>`; })}</span><br>`;
// Loop through each point in the shared tooltip // Loop through each point in the shared tooltip
@ -461,11 +463,10 @@
}, },
}; };
isLoading = false;
return options; return options;
} }
config = marketTideData ? getPlotOptions() : null; config = marketTideData ? plotData() : null;
$: { $: {
if (selectedSector || $mode) { if (selectedSector || $mode) {
@ -481,7 +482,7 @@
originalNegTickers = topNegNetPremium; originalNegTickers = topNegNetPremium;
displayNegTickers = topNegNetPremium; displayNegTickers = topNegNetPremium;
config = marketTideData ? getPlotOptions() : null; config = marketTideData ? plotData() : null;
} }
} }
</script> </script>