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

ui fixes

Browse Source
This commit is contained in:
MuslemRahimi 2025-02-25 18:47:43 +01:00
parent 5a63299a6c
commit 117a303e71
4 changed files with 82 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/lib/components/FailToDeliver.svelte
View File

@ -128,29 +128,47 @@
legend: {
enabled: false,
},
tooltip: {
shared: true,
useHTML: true,
backgroundColor: "#fff",
backgroundColor: "rgba(0, 0, 0, 0.8)", // Semi-transparent black
borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border
borderWidth: 1,
style: {
color: "black",
color: "#fff",
fontSize: "16px",
padding: "10px",
},
borderRadius: 2,
borderWidth: 1,
borderColor: "#ffffff",
borderRadius: 4,
formatter: function () {
return `<span class="m-auto text-black text-[1rem] font-[501]">${new Date(
// Format the x value to display time in hh:mm format
let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">${new Date(
this?.x,
).toLocaleDateString("en-US", {
year: "numeric",
month: "short",
day: "numeric",
})}</span> <br> <span class="text-black font-normal text-sm">${abbreviateNumber(this.y)}</span>`;
})}</span><br>`;
// Loop through each point in the shared tooltip
this.points.forEach((point) => {
tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span>
<span class="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumber(
point.y,
)}</span><br>`;
});
return tooltipContent;
},
},
xAxis: {
categories: dates,
crosshair: {
color: "#fff", // Set the color of the crosshair line
width: 1, // Adjust the line width as needed
dashStyle: "Solid",
},
labels: {
style: {
color: "#fff",
@ -197,7 +215,12 @@
yAxis: 1,
color: "#E11D48",
marker: {
fillColor: "transparent",
enabled: false,
states: {
hover: {
enabled: false,
},
},
},
},
{
@ -207,7 +230,12 @@
data: priceList,
color: "#fff",
marker: {
fillColor: "transparent",
enabled: false,
states: {
hover: {
enabled: false,
},
},
},
lineWidth: 2,
},

4
src/routes/pricing/+page.svelte
View File

@ -661,7 +661,7 @@
/></svg
>
<span class="text-white text-[1rem] font-semibold"
>Unlimited Options Data</span
>Realtime Options Data</span
>
</li>
<li class="flex items-center space-x-3">
@ -689,7 +689,7 @@
/></svg
>
<span class="text-white text-[1rem] font-semibold"
>Unlimited Dark Pool Data</span
>Realtime Dark Pool Data</span
>
</li>
</ol>

31
src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
View File

@ -273,6 +273,11 @@
type: "datetime",
endOnTick: false,
categories: filteredData?.dates,
crosshair: {
color: "#fff", // Set the color of the crosshair line
width: 1, // Adjust the line width as needed
dashStyle: "Solid",
},
labels: {
style: {
color: "#fff",
@ -309,24 +314,36 @@
opposite: true,
},
tooltip: {
shared: true,
useHTML: true,
backgroundColor: "#fff",
backgroundColor: "rgba(0, 0, 0, 0.8)", // Semi-transparent black
borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border
borderWidth: 1,
style: {
color: "black",
color: "#fff",
fontSize: "16px",
padding: "10px",
},
borderRadius: 2,
borderWidth: 1,
borderColor: "#fff",
borderRadius: 4,
formatter: function () {
return `<span class="m-auto text-black text-[1rem] font-[501]">${new Date(
// Format the x value to display time in hh:mm format
let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">${new Date(
this?.x,
).toLocaleDateString("en-US", {
year: "numeric",
month: "short",
day: "numeric",
})}</span> <br> <span class="text-black font-normal text-sm">${abbreviateNumber(this.y)}</span>`;
})}</span><br>`;
// Loop through each point in the shared tooltip
this.points.forEach((point) => {
tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span>
<span class="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumber(
point.y,
)}</span><br>`;
});
return tooltipContent;
},
},
plotOptions: {

26
src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte
View File

@ -129,24 +129,36 @@
opposite: true,
},
tooltip: {
shared: true,
useHTML: true,
backgroundColor: "#fff",
backgroundColor: "rgba(0, 0, 0, 0.8)", // Semi-transparent black
borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border
borderWidth: 1,
style: {
color: "black",
color: "#fff",
fontSize: "16px",
padding: "10px",
},
borderRadius: 2,
borderWidth: 1,
borderColor: "#fff",
borderRadius: 4,
formatter: function () {
return `<span class="m-auto text-black text-[1rem] font-[501]">${new Date(
// Format the x value to display time in hh:mm format
let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">${new Date(
this?.x,
).toLocaleDateString("en-US", {
year: "numeric",
month: "short",
day: "numeric",
})}</span> <br> <span class="text-black font-normal text-sm">${abbreviateNumber(this.y)}</span>`;
})}</span><br>`;
// Loop through each point in the shared tooltip
this.points.forEach((point) => {
tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span>
<span class="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumber(
point.y,
)}</span><br>`;
});
return tooltipContent;
},
},