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">
import { abbreviateNumberWithColor, abbreviateNumber } from "$lib/utils";
import { abbreviateNumber } from "$lib/utils";
import { onMount } from "svelte";
import TableHeader from "$lib/components/Table/TableHeader.svelte";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
@ -99,6 +99,9 @@
timePeriod,
);
const fillColorStart = "rgb(70, 129, 244,0.5)";
const fillColorEnd = "rgb(70, 129, 244,0.001)";
const options = {
credits: {
enabled: false,
@ -110,7 +113,7 @@
animation: false,
},
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: {
color: $mode === "light" ? "black" : "white",
// Using inline CSS for margin-top and margin-bottom
@ -208,6 +211,25 @@
},
],
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,
type: "column",
@ -217,19 +239,19 @@
borderRadius: "1px",
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: {
series: {
animation: false,
@ -447,35 +469,29 @@
{formatDate(item?.date)}
</td>
<td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
{@html abbreviateNumberWithColor(
{abbreviateNumber(
title === "Gamma" ? item?.call_gex : item?.call_dex,
false,
true,
)}
</td>
<td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
{@html abbreviateNumberWithColor(
{abbreviateNumber(
title === "Gamma" ? item?.put_gex : item?.put_dex,
false,
true,
)}
</td>
<td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
{@html abbreviateNumberWithColor(
{abbreviateNumber(
title === "Gamma" ? item?.netGex : item?.netDex,
false,
true,
)}
</td>
<td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
{#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
>
{: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
>
{:else}

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

@ -91,6 +91,9 @@
priceList,
} = filterDataByPeriod(data, timePeriod);
const fillColorStart = "rgb(70, 129, 244,0.5)";
const fillColorEnd = "rgb(70, 129, 244,0.001)";
const options = {
chart: {
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
@ -98,9 +101,20 @@
height: 360,
},
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: {
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,
style: { color: $mode === "light" ? "black" : "white" },
},
@ -219,11 +233,19 @@
series: [
{
name: "Stock Price",
type: "spline", // smooth line
type: "area", // smooth line
data: priceList,
yAxis: 1,
lineWidth: 2,
color: $mode === "light" ? "black" : "white",
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, fillColorStart],
[1, fillColorEnd],
],
},
color: "#4681f4",
borderColor: "4681f4",
lineWidth: 1.3,
animation: false,
},
{

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

@ -352,7 +352,7 @@
{style}
class="grid grid-cols-10 gap-0"
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-[#F6F7F8]={index % 2 !== 0 && $mode == "light"}
class:opacity-30={index + 1 === rawData?.length &&

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

@ -234,12 +234,12 @@
}
</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 -->
<div class="min-w-[1000px]">
<!-- Header row using grid -->
<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
on:click={() => sortData("time")}
@ -590,7 +590,7 @@
{style}
class="grid grid-cols-16 gap-0"
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-[#F6F7F8]={index % 2 !== 0 && $mode == "light"}
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."
/>
<body class="overflow-y-auto text-muted dark:text-white">
<body class="overflow-y-auto">
<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"
>

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}%
in one year.
</p>
<table
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<table class="w-full border border-gray-300 dark:border-gray-800">
<tbody
><tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@ -144,9 +142,7 @@
)}, so {rawData?.shortOutStandingPercent}% of the outstanding
shares have been sold short.
</p>
<table
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<table class="w-full border border-gray-300 dark:border-gray-800">
<tbody
><tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@ -197,9 +193,7 @@
: ""}
</p>
<table
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<table class="w-full border border-gray-300 dark:border-gray-800">
<tbody
><tr
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}.
{/if}
</p>
<table
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<table class="w-full border border-gray-300 dark:border-gray-800">
<tbody
><tr
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
a Debt / Equity ratio of {rawData?.debtToEquityRatio}.
</p>
<table
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<table class="w-full border border-gray-300 dark:border-gray-800">
<tbody
><tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@ -402,9 +392,7 @@
"percent",
)}.
</p>
<table
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<table class="w-full border border-gray-300 dark:border-gray-800">
<tbody
><tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@ -483,9 +471,7 @@
</div>
<div>
<h2 class="mb-2 px-0.5 text-xl font-bold">Taxes</h2>
<table
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<table class="w-full border border-gray-300 dark:border-gray-800">
<tbody
><tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@ -520,9 +506,7 @@
? "higher"
: "lower"} than the market average.
</p>
<table
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<table class="w-full border border-gray-300 dark:border-gray-800">
<tbody
><tr
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}.
{/if}
</p>
<table
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<table class="w-full border border-gray-300 dark:border-gray-800">
<tbody
><tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@ -675,9 +657,7 @@
false,
)}.
</p>
<table
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<table class="w-full border border-gray-300 dark:border-gray-800">
<tbody
><tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@ -760,9 +740,7 @@
false,
)}.
</p>
<table
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<table class="w-full border border-gray-300 dark:border-gray-800">
<tbody
><tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@ -822,9 +800,7 @@
)} and {checkValue(rawData?.netProfitMargin, "percent")}.
{/if}
</p>
<table
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<table class="w-full border border-gray-300 dark:border-gray-800">
<tbody
><tr
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.
{/if}
</p>
<table
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<table class="w-full border border-gray-300 dark:border-gray-800">
<tbody
><tr
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}.
{/if}
</p>
<table
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<table class="w-full border border-gray-300 dark:border-gray-800">
<tbody
><tr
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}.
</p>
<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
><tr
@ -1139,9 +1111,7 @@
{/if}
<div>
<h2 class="mb-2 px-0.5 text-xl font-bold">Scores</h2>
<table
class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
>
<table class="w-full border border-gray-300 dark:border-gray-800">
<tbody
><tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"