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-03-30 15:45:22 +02:00
parent 742449d50a
commit 625150ceef
4 changed files with 73 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/lib/components/DarkPool/HistoricalVolume.svelte
View File

@ -85,14 +85,23 @@
animation: false, animation: false,
}, },
title: { title: {
text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">${removeCompanyStrings($displayCompanyName)} Historical Chart</h3>`, text: `<h3 class="mt-3 -mb-3 text-[1rem] sm:text-lg">${removeCompanyStrings($displayCompanyName)} Historical Chart</h3>`,
style: { style: {
color: $mode === "light" ? "black" : "white", color: $mode === "light" ? "black" : "white",
}, },
useHTML: true, useHTML: true,
}, },
legend: { legend: {
enabled: false, enabled: true,
align: "center", // Positions legend at the left edge
verticalAlign: "top", // Positions legend at the top
layout: "horizontal", // Align items horizontally (use 'vertical' if preferred)
itemStyle: {
color: $mode === "light" ? "black" : "white",
},
symbolWidth: 16, // Controls the width of the legend symbol
symbolRadius: 8, // Creates circular symbols (adjust radius as needed)
squareSymbol: false, // Ensures symbols are circular, not square
}, },
xAxis: { xAxis: {
type: "datetime", type: "datetime",

32
src/lib/components/DarkPool/PriceLevel.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { displayCompanyName, stockTicker, etfTicker } from "$lib/store"; import { displayCompanyName, stockTicker, etfTicker } from "$lib/store";
import { abbreviateNumber } from "$lib/utils"; import { abbreviateNumber, removeCompanyStrings } from "$lib/utils";
import highcharts from "$lib/highcharts.ts"; import highcharts from "$lib/highcharts.ts";
import RealtimeTrade from "$lib/components/DarkPool/RealtimeTrade.svelte"; import RealtimeTrade from "$lib/components/DarkPool/RealtimeTrade.svelte";
import { mode } from "mode-watcher"; import { mode } from "mode-watcher";
@ -47,7 +47,7 @@
endonTick: false, endonTick: false,
categories: yAxis, categories: yAxis,
crosshair: { crosshair: {
color: $mode === "light" ? "black" : "white", // Set the color of the crosshair line color: $mode === "light" ? "#545454" : "white", // Set the color of the crosshair line
width: 1, // Adjust the line width as needed width: 1, // Adjust the line width as needed
dashStyle: "Solid", dashStyle: "Solid",
}, },
@ -84,7 +84,7 @@
return abbreviateNumber(this?.value); return abbreviateNumber(this?.value);
}, },
style: { style: {
color: "#fff", color: $mode === "light" ? "#545454" : "white",
}, },
}, },
}, },
@ -102,7 +102,7 @@
borderRadius: 4, borderRadius: 4,
formatter: function () { formatter: function () {
// Format the x value to display time in hh:mm format // Format the x value to display time in hh:mm format
let tooltipContent = `<span class=" m-auto text-[1rem] font-[501]">Price Level ${this?.x}</span><br>`; let tooltipContent = `<span class=" m-auto text-sm font-[501]">Price Level ${this?.x}</span><br>`;
// Loop through each point in the shared tooltip // Loop through each point in the shared tooltip
this.points?.forEach((point) => { this.points?.forEach((point) => {
@ -150,19 +150,17 @@
{#if rawData?.length !== 0 && Object?.keys(metrics)?.length > 0} {#if rawData?.length !== 0 && Object?.keys(metrics)?.length > 0}
<div class="w-full flex flex-col items-start"> <div class="w-full flex flex-col items-start">
<div class=" text-[1rem] mt-2 w-full"> <div class=" text-[1rem] mt-2 w-full">
{$displayCompanyName} has seen an average dark pool trade size of {abbreviateNumber( {removeCompanyStrings($displayCompanyName)} has seen an average dark pool
metrics?.avgTradeSize, trade size of
false, <strong
true, >{Math.floor(metrics?.avgTradeSize)?.toLocaleString(
)} and an average premium per trade of {abbreviateNumber( "en-US",
metrics?.avgPremTrade, )}</strong
false, >
true, and an average premium per trade of
)}, with a total premium of {abbreviateNumber( <strong>${abbreviateNumber(metrics?.avgPremTrade)}</strong>, with a
metrics?.totalPrem, total premium of
false, <strong>${abbreviateNumber(metrics?.totalPrem)}</strong>.
true,
)}.
</div> </div>
</div> </div>

66
src/lib/components/DarkPool/RealtimeTrade.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import { stockTicker, etfTicker, screenWidth } from "$lib/store"; import { stockTicker, etfTicker, screenWidth } from "$lib/store";
import { abbreviateNumber } from "$lib/utils";
import highcharts from "$lib/highcharts.ts"; import highcharts from "$lib/highcharts.ts";
import { mode } from "mode-watcher"; import { mode } from "mode-watcher";
@ -67,6 +68,9 @@
let yMin = minValue * (1 - padding) === 0 ? null : minValue * (1 - padding); let yMin = minValue * (1 - padding) === 0 ? null : minValue * (1 - padding);
let yMax = maxValue * (1 + padding) === 0 ? null : maxValue * (1 + padding); let yMax = maxValue * (1 + padding) === 0 ? null : maxValue * (1 + padding);
const fillColorStart = "rgb(70, 129, 244,0.5)";
const fillColorEnd = "rgb(70, 129, 244,0.001)";
const options = { const options = {
chart: { chart: {
backgroundColor: $mode === "light" ? "#fff" : "#09090B", backgroundColor: $mode === "light" ? "#fff" : "#09090B",
@ -74,9 +78,20 @@
height: 360, height: 360,
}, },
credits: { enabled: false }, credits: { enabled: false },
legend: { enabled: false }, legend: {
enabled: true,
align: "center", // Positions legend at the left edge
verticalAlign: "top", // Positions legend at the top
layout: "horizontal", // Align items horizontally (use 'vertical' if preferred)
itemStyle: {
color: $mode === "light" ? "black" : "white",
},
symbolWidth: 16, // Controls the width of the legend symbol
symbolRadius: 8, // Creates circular symbols (adjust radius as needed)
squareSymbol: false, // Ensures symbols are circular, not square
},
title: { title: {
text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">Realtime Dark Pool Trades Impact</h3>`, text: `<h3 class="mt-3 -mb-3 text-[1rem] sm:text-lg">Realtime Dark Pool Trades Impact</h3>`,
useHTML: true, useHTML: true,
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
}, },
@ -91,7 +106,7 @@
dashStyle: "Solid", dashStyle: "Solid",
}, },
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "#545454" : "white" },
distance: 20, distance: 20,
formatter: function () { formatter: function () {
const date = new Date(this?.value); const date = new Date(this?.value);
@ -108,7 +123,7 @@
min: yMin ?? null, min: yMin ?? null,
max: yMax ?? null, max: yMax ?? null,
title: { text: null }, title: { text: null },
labels: { style: { color: $mode === "light" ? "black" : "white" } }, labels: { style: { color: $mode === "light" ? "#545454" : "white" } },
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
opposite: true, opposite: true,
@ -116,9 +131,9 @@
{ {
title: { title: {
text: $screenWidth < 640 ? null : "Total Trades", text: $screenWidth < 640 ? null : "Total Trades",
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "#545454" : "white" },
}, },
labels: { style: { color: $mode === "light" ? "black" : "white" } }, labels: { style: { color: $mode === "light" ? "#545454" : "white" } },
gridLineWidth: 0, gridLineWidth: 0,
opposite: false, opposite: false,
}, },
@ -126,39 +141,32 @@
tooltip: { tooltip: {
shared: true, shared: true,
useHTML: true, useHTML: true,
backgroundColor: "rgba(0, 0, 0, 0.8)", backgroundColor: "rgba(0, 0, 0, 0.8)", // Semi-transparent black
borderColor: "rgba(255, 255, 255, 0.2)", borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border
borderWidth: 1, borderWidth: 1,
style: { style: {
color: "#fff", color: $mode === "light" ? "black" : "white",
fontSize: "16px", fontSize: "16px",
padding: "10px", padding: "10px",
}, },
borderRadius: 4, borderRadius: 4,
formatter: function () { formatter: function () {
// Create a Date object from the x value and format it as time
const date = new Date(this?.x); const date = new Date(this?.x);
let formattedTime = date.toLocaleTimeString("en-US", { let formattedDate = date?.toLocaleTimeString("en-US", {
hour: "2-digit", hour: "2-digit",
minute: "2-digit", minute: "2-digit",
}); });
// Build the tooltip content starting with the formatted time let tooltipContent = `<span class="text-white m-auto text-black text-sm font-normal">${formattedDate}</span><br>`;
let tooltipContent = `<span class="m-auto text-sm text-white">${formattedTime}</span><br>`;
// Loop through each point and add its details, excluding "Dark Pool Volume" // Loop through each point in the shared tooltip
this.points?.forEach((point) => { this.points?.forEach((point) => {
if (point.series.name !== "Dark Pool Volume") { tooltipContent += `<span class="text-white text-sm font-[501]">${point.series.name}: ${abbreviateNumber(point.y)}</span><br>`;
tooltipContent += `
<span class="font-semibold text-sm">${point.series.name}:</span>
<span class="font-normal text-sm"><b>${point.y}</b></span><br>`;
}
}); });
return tooltipContent; return tooltipContent;
}, },
}, },
plotOptions: { plotOptions: {
series: { series: {
animation: false, animation: false,
@ -185,19 +193,25 @@
series: [ series: [
{ {
name: "Price", name: "Price",
type: "line", type: "area",
data: seriesData, data: seriesData,
color: $mode === "light" ? "blue" : "white", fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, fillColorStart],
[1, fillColorEnd],
],
},
color: "#4681f4",
lineWidth: 1.3, lineWidth: 1.3,
yAxis: 0, // Use primary yAxis yAxis: 0, // Use primary yAxis
animation: false, animation: false,
}, },
{ {
name: "Dark Pool Volume", name: "DP Volume",
type: "column", type: "column",
data: darkPoolSeries, data: darkPoolSeries,
color: color: "#F21C64",
data?.getStockQuote?.changesPercentage >= 0 ? "#04D347" : "#E11D48",
yAxis: 1, // Use secondary yAxis yAxis: 1, // Use secondary yAxis
animation: false, animation: false,
}, },
@ -220,7 +234,7 @@
<div <div
class="{!['Pro']?.includes(data?.user?.tier) class="{!['Pro']?.includes(data?.user?.tier)
? 'blur-[3px]' ? 'blur-[3px]'
: ''} mt-5 shadow-sm sm:mt-0 border border-gray-300 dark:border-gray-800 rounded" : ''} mt-5 sm:mt-0 border border-gray-300 dark:border-gray-800 rounded"
use:highcharts={config} use:highcharts={config}
></div> ></div>
<!-- Overlay with "Upgrade to Pro" --> <!-- Overlay with "Upgrade to Pro" -->

14
src/lib/components/InfoModal.svelte
View File

@ -7,12 +7,12 @@
<div class="relative"> <div class="relative">
<label <label
for={id} for={id}
class="absolute -bottom-1 left-0 cursor-pointer p-1 text-gray-800 sm:hover:text-white" class="absolute -bottom-1 left-0 cursor-pointer p-1 text-gray-500 dark:text-gray-300 dark:sm:hover:text-white"
> >
<svg <svg
class="h-[10.5px] w-[10.5px]" class="h-[10.5px] w-[10.5px]"
viewBox="0 0 4 16" viewBox="0 0 4 16"
fill="white" fill="currentColor"
style="max-width:20px" style="max-width:20px"
> >
<path <path
@ -30,18 +30,18 @@
<!-- Desktop modal content --> <!-- Desktop modal content -->
<div <div
class="modal-box rounded-md border border-gray-600 w-full bg-secondary flex flex-col items-center" class="modal-box rounded-md border border-gray-300 dark:border-gray-600 w-full bg-white dark:bg-secondary flex flex-col items-center"
> >
<div class="mx-auto h-1.5 w-20 shrink-0 rounded-full" /> <div class="mx-auto h-1.5 w-20 shrink-0 rounded-full" />
<div class="text-white mb-5 text-center"> <div class=" mb-5 text-center">
<h3 class="font-bold text-xl sm:text-2xl mb-5">{title}</h3> <h3 class="font-bold text-xl sm:text-2xl mb-5">{title}</h3>
<span class="text-white text-[1rem] font-normal">{@html content}</span> <span class=" text-[1rem] font-normal">{@html content}</span>
</div> </div>
<div class="border-t border-gray-600 mt-2 w-full"> <div class="border-t border-gray-300 dark:border-gray-600 mt-2 w-full">
<label <label
for={id} for={id}
class="mt-4 font-semibold text-white text-xl m-auto flex justify-center cursor-pointer" class="mt-4 font-semibold text-xl m-auto flex justify-center cursor-pointer"
> >
Close Close
</label> </label>