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-03 16:51:46 +02:00
parent d26fa70bb1
commit 040cb5e39b
6 changed files with 89 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/lib/components/Options/GreekExposure.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { abbreviateNumberWithColor, abbreviateNumber } from "$lib/utils"; import { abbreviateNumber } from "$lib/utils";
import { onMount } from "svelte"; import { onMount } from "svelte";
import TableHeader from "$lib/components/Table/TableHeader.svelte"; import TableHeader from "$lib/components/Table/TableHeader.svelte";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte"; import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
@ -99,6 +99,9 @@
timePeriod, timePeriod,
); );
const fillColorStart = "rgb(70, 129, 244,0.5)";
const fillColorEnd = "rgb(70, 129, 244,0.001)";
const options = { const options = {
credits: { credits: {
enabled: false, enabled: false,
@ -110,7 +113,7 @@
animation: false, animation: false,
}, },
title: { title: {
text: `<h3 class="mt-3 mb-1 ">${title === "Gamma" ? "GEX" : "DEX"} Chart</h3>`, text: `<h3 class="mt-3 -mb-2 ">${title === "Gamma" ? "GEX" : "DEX"} Chart</h3>`,
style: { style: {
color: $mode === "light" ? "black" : "white", color: $mode === "light" ? "black" : "white",
// Using inline CSS for margin-top and margin-bottom // Using inline CSS for margin-top and margin-bottom
@ -208,6 +211,25 @@
}, },
], ],
series: [ series: [
{
name: "Stock Price",
type: "area",
data: priceList,
yAxis: 1,
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, fillColorStart],
[1, fillColorEnd],
],
},
color: "#4681f4",
borderColor: "4681f4",
lineWidth: 1.3,
zIndex: 10,
marker: { enabled: false },
animation: false,
},
{ {
name: title, name: title,
type: "column", type: "column",
@ -217,19 +239,19 @@
borderRadius: "1px", borderRadius: "1px",
animation: false, animation: false,
}, },
{
name: "Price",
type: "line",
data: priceList,
yAxis: 1,
color: $mode === "light" ? "#3B82F6" : "white",
lineWidth: 2,
zIndex: 10,
marker: { enabled: false },
animation: 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
},
plotOptions: { plotOptions: {
series: { series: {
animation: false, animation: false,
@ -447,35 +469,29 @@
{formatDate(item?.date)} {formatDate(item?.date)}
</td> </td>
<td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap"> <td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
{@html abbreviateNumberWithColor( {abbreviateNumber(
title === "Gamma" ? item?.call_gex : item?.call_dex, title === "Gamma" ? item?.call_gex : item?.call_dex,
false,
true,
)} )}
</td> </td>
<td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap"> <td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
{@html abbreviateNumberWithColor( {abbreviateNumber(
title === "Gamma" ? item?.put_gex : item?.put_dex, title === "Gamma" ? item?.put_gex : item?.put_dex,
false,
true,
)} )}
</td> </td>
<td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap"> <td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
{@html abbreviateNumberWithColor( {abbreviateNumber(
title === "Gamma" ? item?.netGex : item?.netDex, title === "Gamma" ? item?.netGex : item?.netDex,
false,
true,
)} )}
</td> </td>
<td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap"> <td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
{#if item?.putCallRatio <= 1 && item?.putCallRatio !== null} {#if item?.putCallRatio <= 1 && item?.putCallRatio !== null}
<span class="text-green-800 dark:text-[#00FC50]" <span class="dark:text-[#00FC50]"
>{item?.putCallRatio?.toFixed(2)}</span >{item?.putCallRatio?.toFixed(2)}</span
> >
{:else if item?.putCallRatio >= 0 && item?.putCallRatio !== null} {:else if item?.putCallRatio >= 0 && item?.putCallRatio !== null}
<span class="text-red-800 dark:text-[#FF2F1F]" <span class=" dark:text-[#FF2F1F]"
>{item?.putCallRatio?.toFixed(2)}</span >{item?.putCallRatio?.toFixed(2)}</span
> >
{:else} {:else}

32
src/lib/components/Options/Volatility.svelte
View File

@ -91,6 +91,9 @@
priceList, priceList,
} = filterDataByPeriod(data, timePeriod); } = filterDataByPeriod(data, timePeriod);
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",
@ -98,9 +101,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">Volatiltiy Exposure</h3>`, text: `<h3 class="mt-3 -mb-2 text-[1rem] sm:text-lg">Volatiltiy Exposure</h3>`,
useHTML: true, useHTML: true,
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
}, },
@ -219,11 +233,19 @@
series: [ series: [
{ {
name: "Stock Price", name: "Stock Price",
type: "spline", // smooth line type: "area", // smooth line
data: priceList, data: priceList,
yAxis: 1, yAxis: 1,
lineWidth: 2, fillColor: {
color: $mode === "light" ? "black" : "white", linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, fillColorStart],
[1, fillColorEnd],
],
},
color: "#4681f4",
borderColor: "4681f4",
lineWidth: 1.3,
animation: false, animation: false,
}, },
{ {

2
src/lib/components/Table/DarkPoolTable.svelte
View File

@ -352,7 +352,7 @@
{style} {style}
class="grid grid-cols-10 gap-0" class="grid grid-cols-10 gap-0"
class:bg-[#fff]={index % 2 === 0 && $mode === "light"} class:bg-[#fff]={index % 2 === 0 && $mode === "light"}
class:bg-[#19191F]={index % 2 === 0 && $mode !== "light"} class:bg-[#09090B]={index % 2 === 0 && $mode !== "light"}
class:bg-[#121217]={index % 2 !== 0 && $mode !== "light"} class:bg-[#121217]={index % 2 !== 0 && $mode !== "light"}
class:bg-[#F6F7F8]={index % 2 !== 0 && $mode == "light"} class:bg-[#F6F7F8]={index % 2 !== 0 && $mode == "light"}
class:opacity-30={index + 1 === rawData?.length && class:opacity-30={index + 1 === rawData?.length &&

6
src/lib/components/Table/OptionsFlowTable.svelte
View File

@ -234,12 +234,12 @@
} }
</script> </script>
<div class="w-full overflow-x-auto text-muted dark:text-white"> <div class="w-full overflow-x-auto">
<!-- Set a min-width on smaller screens so the grid can show all columns --> <!-- Set a min-width on smaller screens so the grid can show all columns -->
<div class="min-w-[1000px]"> <div class="min-w-[1000px]">
<!-- Header row using grid --> <!-- Header row using grid -->
<div <div
class="grid grid-cols-16 sticky top-0 z-10 border border-gray-300 dark:border-gray-800 bg-white dark:bg-default font-bold text-xs uppercase" class="grid grid-cols-16 sticky top-0 z-10 border border-gray-300 dark:border-gray-800 font-bold text-xs uppercase"
> >
<div <div
on:click={() => sortData("time")} on:click={() => sortData("time")}
@ -590,7 +590,7 @@
{style} {style}
class="grid grid-cols-16 gap-0" class="grid grid-cols-16 gap-0"
class:bg-[#fff]={index % 2 === 0 && $mode === "light"} class:bg-[#fff]={index % 2 === 0 && $mode === "light"}
class:bg-[#19191F]={index % 2 === 0 && $mode !== "light"} class:bg-[#09090B]={index % 2 === 0 && $mode !== "light"}
class:bg-[#121217]={index % 2 !== 0 && $mode !== "light"} class:bg-[#121217]={index % 2 !== 0 && $mode !== "light"}
class:bg-[#F6F7F8]={index % 2 !== 0 && $mode == "light"} class:bg-[#F6F7F8]={index % 2 !== 0 && $mode == "light"}
class:opacity-30={index + 1 === rawData?.length && class:opacity-30={index + 1 === rawData?.length &&

2
src/routes/options-flow/+page.svelte
View File

@ -831,7 +831,7 @@
description="Explore unusual options from big institutional traders and hedge funds." description="Explore unusual options from big institutional traders and hedge funds."
/> />
<body class="overflow-y-auto text-muted dark:text-white"> <body class="overflow-y-auto">
<section <section
class="w-full max-w-screen sm:max-w-7xl sm:max-w-[1400px] flex justify-center items-center pb-20 10 p-3 sm:p-0" class="w-full max-w-screen sm:max-w-7xl sm:max-w-[1400px] flex justify-center items-center pb-20 10 p-3 sm:p-0"
> >

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

@ -54,9 +54,7 @@
shares outstanding. The number of shares has increased by {rawData?.sharesYoY}% shares outstanding. The number of shares has increased by {rawData?.sharesYoY}%
in one year. in one year.
</p> </p>
<table <table class="w-full border border-gray-300 dark:border-gray-800">
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<tbody <tbody
><tr ><tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd" class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@ -144,9 +142,7 @@
)}, so {rawData?.shortOutStandingPercent}% of the outstanding )}, so {rawData?.shortOutStandingPercent}% of the outstanding
shares have been sold short. shares have been sold short.
</p> </p>
<table <table class="w-full border border-gray-300 dark:border-gray-800">
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<tbody <tbody
><tr ><tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd" class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@ -197,9 +193,7 @@
: ""} : ""}
</p> </p>
<table <table class="w-full border border-gray-300 dark:border-gray-800">
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<tbody <tbody
><tr ><tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd" class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@ -283,9 +277,7 @@
Currently the Enterprise Value (EV) is not available for {companyName}. Currently the Enterprise Value (EV) is not available for {companyName}.
{/if} {/if}
</p> </p>
<table <table class="w-full border border-gray-300 dark:border-gray-800">
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<tbody <tbody
><tr ><tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd" class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@ -329,9 +321,7 @@
The company has a current ratio of {rawData?.currentRatio}, with The company has a current ratio of {rawData?.currentRatio}, with
a Debt / Equity ratio of {rawData?.debtToEquityRatio}. a Debt / Equity ratio of {rawData?.debtToEquityRatio}.
</p> </p>
<table <table class="w-full border border-gray-300 dark:border-gray-800">
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<tbody <tbody
><tr ><tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd" class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@ -402,9 +392,7 @@
"percent", "percent",
)}. )}.
</p> </p>
<table <table class="w-full border border-gray-300 dark:border-gray-800">
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<tbody <tbody
><tr ><tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd" class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@ -483,9 +471,7 @@
</div> </div>
<div> <div>
<h2 class="mb-2 px-0.5 text-xl font-bold">Taxes</h2> <h2 class="mb-2 px-0.5 text-xl font-bold">Taxes</h2>
<table <table class="w-full border border-gray-300 dark:border-gray-800">
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<tbody <tbody
><tr ><tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd" class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@ -520,9 +506,7 @@
? "higher" ? "higher"
: "lower"} than the market average. : "lower"} than the market average.
</p> </p>
<table <table class="w-full border border-gray-300 dark:border-gray-800">
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<tbody <tbody
><tr ><tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd" class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@ -589,9 +573,7 @@
in profits. Earnings per share was {rawData?.eps}. in profits. Earnings per share was {rawData?.eps}.
{/if} {/if}
</p> </p>
<table <table class="w-full border border-gray-300 dark:border-gray-800">
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<tbody <tbody
><tr ><tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd" class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@ -675,9 +657,7 @@
false, false,
)}. )}.
</p> </p>
<table <table class="w-full border border-gray-300 dark:border-gray-800">
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<tbody <tbody
><tr ><tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd" class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@ -760,9 +740,7 @@
false, false,
)}. )}.
</p> </p>
<table <table class="w-full border border-gray-300 dark:border-gray-800">
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<tbody <tbody
><tr ><tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd" class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@ -822,9 +800,7 @@
)} and {checkValue(rawData?.netProfitMargin, "percent")}. )} and {checkValue(rawData?.netProfitMargin, "percent")}.
{/if} {/if}
</p> </p>
<table <table class="w-full border border-gray-300 dark:border-gray-800">
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<tbody <tbody
><tr ><tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd" class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@ -926,9 +902,7 @@
{$stockTicker} does not appear to pay any dividends at this time. {$stockTicker} does not appear to pay any dividends at this time.
{/if} {/if}
</p> </p>
<table <table class="w-full border border-gray-300 dark:border-gray-800">
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<tbody <tbody
><tr ><tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd" class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@ -1019,9 +993,7 @@
Currently there are no analyst rating for {$stockTicker}. Currently there are no analyst rating for {$stockTicker}.
{/if} {/if}
</p> </p>
<table <table class="w-full border border-gray-300 dark:border-gray-800">
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<tbody <tbody
><tr ><tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd" class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@ -1094,7 +1066,7 @@
split with a ratio of {rawData?.splitRatio}. split with a ratio of {rawData?.splitRatio}.
</p> </p>
<table <table
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800" class="w-full border border-gray-300 dark:border-gray-800"
> >
<tbody <tbody
><tr ><tr
@ -1139,9 +1111,7 @@
{/if} {/if}
<div> <div>
<h2 class="mb-2 px-0.5 text-xl font-bold">Scores</h2> <h2 class="mb-2 px-0.5 text-xl font-bold">Scores</h2>
<table <table class="w-full border border-gray-300 dark:border-gray-800">
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<tbody <tbody
><tr ><tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd" class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"