ui fixes
This commit is contained in:
parent
8d834d1d3a
commit
dcd972deac
@ -49,6 +49,15 @@
|
|||||||
}));
|
}));
|
||||||
|
|
||||||
const dates = processedData?.map((d) => d.expiry);
|
const dates = processedData?.map((d) => d.expiry);
|
||||||
|
const formattedDates = dates.map((date) => {
|
||||||
|
const d = new Date(date);
|
||||||
|
return d.toLocaleDateString("en-US", {
|
||||||
|
month: "short", // Abbreviated month name
|
||||||
|
day: "numeric", // Day of the month
|
||||||
|
year: "2-digit", // Two-digit year
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
const callValues = processedData?.map((d) => d.callValue?.toFixed(2));
|
const callValues = processedData?.map((d) => d.callValue?.toFixed(2));
|
||||||
const putValues = processedData?.map((d) => d.putValue?.toFixed(2));
|
const putValues = processedData?.map((d) => d.putValue?.toFixed(2));
|
||||||
const barWidthPercentage = Math.max(100 / processedData.length, 20); // Adjust automatically, max 80%
|
const barWidthPercentage = Math.max(100 / processedData.length, 20); // Adjust automatically, max 80%
|
||||||
@ -93,18 +102,13 @@
|
|||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: "category",
|
type: "category",
|
||||||
data: dates,
|
data: formattedDates,
|
||||||
axisLine: { lineStyle: { color: "#fff" } },
|
axisLine: { lineStyle: { color: "#fff" } },
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
interval: (index) => index % 2 === 0, // Show every 5th label
|
|
||||||
rotate: 45, // Rotate labels for better readability
|
|
||||||
fontSize: 12, // Adjust font size if needed
|
|
||||||
margin: 20,
|
|
||||||
},
|
},
|
||||||
splitLine: { show: false },
|
splitLine: { show: false },
|
||||||
},
|
},
|
||||||
|
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: `Put`,
|
name: `Put`,
|
||||||
|
|||||||
@ -53,7 +53,7 @@
|
|||||||
const strikes = processedData?.map((d) => d.strike);
|
const strikes = processedData?.map((d) => d.strike);
|
||||||
const callValues = processedData?.map((d) => d.callValue?.toFixed(2));
|
const callValues = processedData?.map((d) => d.callValue?.toFixed(2));
|
||||||
const putValues = processedData?.map((d) => d.putValue?.toFixed(2));
|
const putValues = processedData?.map((d) => d.putValue?.toFixed(2));
|
||||||
const barWidthPercentage = Math.max(100 / processedData.length, 30); // Adjust automatically, max 80%
|
const barWidthPercentage = Math.max(100 / processedData.length, 30);
|
||||||
|
|
||||||
const options = {
|
const options = {
|
||||||
animation: false,
|
animation: false,
|
||||||
@ -101,7 +101,7 @@
|
|||||||
color: "#fff",
|
color: "#fff",
|
||||||
interval: (index) => index % 5 === 0, // Show every 5th label
|
interval: (index) => index % 5 === 0, // Show every 5th label
|
||||||
rotate: 45, // Rotate labels for better readability
|
rotate: 45, // Rotate labels for better readability
|
||||||
fontSize: 14, // Adjust font size if needed
|
fontSize: $screenWidth < 640 ? 10 : 14, // Adjust font size if needed
|
||||||
margin: 20,
|
margin: 20,
|
||||||
},
|
},
|
||||||
splitLine: { show: false },
|
splitLine: { show: false },
|
||||||
|
|||||||
@ -736,6 +736,7 @@
|
|||||||
{displayedData[index]?.execution_estimate
|
{displayedData[index]?.execution_estimate
|
||||||
?.replace("At", "")
|
?.replace("At", "")
|
||||||
?.replace("Above", "")
|
?.replace("Above", "")
|
||||||
|
?.replace("Below", "")
|
||||||
?.replace("Midpoint", "Mid")}
|
?.replace("Midpoint", "Mid")}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -738,15 +738,17 @@
|
|||||||
<div
|
<div
|
||||||
class="flex flex-row justify-between items-center w-full sm:-mt-[50px] mb-5 sm:mb-10"
|
class="flex flex-row justify-between items-center w-full sm:-mt-[50px] mb-5 sm:mb-10"
|
||||||
>
|
>
|
||||||
<span
|
<div
|
||||||
class="text-2xl lg:text-3xl font-bold text-white"
|
class="text-2xl lg:text-3xl font-bold text-white"
|
||||||
>
|
>
|
||||||
{$displayCompanyName?.length > charNumber
|
{$displayCompanyName?.length > charNumber
|
||||||
? $displayCompanyName?.slice(0, charNumber) +
|
? $displayCompanyName?.slice(0, charNumber) +
|
||||||
"..."
|
"..."
|
||||||
: $displayCompanyName}
|
: $displayCompanyName}
|
||||||
({$stockTicker?.toUpperCase()})
|
<span class="hidden sm:inline-block"
|
||||||
</span>
|
>({$stockTicker?.toUpperCase()})</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
class="sm:hidden items-end justify-end absolute right-3 top-14 {$scoreComponent ===
|
class="sm:hidden items-end justify-end absolute right-3 top-14 {$scoreComponent ===
|
||||||
false
|
false
|
||||||
@ -804,7 +806,7 @@
|
|||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{#if Object?.keys(prePostData)?.length !== 0 && !$isOpen}
|
{#if Object?.keys(prePostData)?.length !== 0 && !$isOpen && prePostData?.timestamp > 0}
|
||||||
<div
|
<div
|
||||||
class="border-l border-default pl-3 bp:pl-5"
|
class="border-l border-default pl-3 bp:pl-5"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -969,7 +969,7 @@
|
|||||||
? $wsBidPrice
|
? $wsBidPrice
|
||||||
: ((data?.getStockQuote?.bid !== 0
|
: ((data?.getStockQuote?.bid !== 0
|
||||||
? data?.getStockQuote?.bid
|
? data?.getStockQuote?.bid
|
||||||
: "-") ?? "n/a")}</td
|
: "n/a") ?? "n/a")}</td
|
||||||
></tr
|
></tr
|
||||||
>
|
>
|
||||||
<tr
|
<tr
|
||||||
@ -1094,7 +1094,7 @@
|
|||||||
? $wsAskPrice
|
? $wsAskPrice
|
||||||
: ((data?.getStockQuote?.ask !== 0
|
: ((data?.getStockQuote?.ask !== 0
|
||||||
? data?.getStockQuote?.ask
|
? data?.getStockQuote?.ask
|
||||||
: "-") ?? "n/a")}</td
|
: "n/a") ?? "n/a")}</td
|
||||||
></tr
|
></tr
|
||||||
>
|
>
|
||||||
<tr
|
<tr
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user