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-01-01 11:39:33 +01:00
parent 02a7ff54f0
commit c77cced136
4 changed files with 351 additions and 322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -234,11 +234,17 @@
Latest Information
</h2>
<div class="flex justify-start items-center w-full m-auto">
<table class="w-full bg-table border border-gray-800">
<div
class="flex justify-start items-center w-full m-auto overflow-x-auto"
>
<table
class="w-full bg-table table table-sm table-compact border border-gray-800"
>
<tbody>
<tr class="border-y border-gray-800 odd:bg-odd">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<td
class="px-[5px] py-1.5 xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
>
<span>Date</span>
</td>
<td
@ -248,7 +254,9 @@
</td>
</tr>
<tr class="border-y border-gray-800 whitespace-nowrap odd:bg-odd">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<td
class="px-[5px] py-1.5 xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
>
<span>Total Volume</span>
</td>
<td
@ -258,7 +266,9 @@
</td>
</tr>
<tr class="border-y border-gray-800 whitespace-nowrap odd:bg-odd">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<td
class="px-[5px] py-1.5 xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
>
<span>Avg. Short % of Volume</span>
</td>
<td

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

@ -261,31 +261,37 @@
<table class="w-full bg-table border border-gray-800">
<tbody>
<tr class="border-y border-gray-800 odd:bg-odd">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<td
class="px-[5px] py-1.5 xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
>
<span>Date</span>
</td>
<td
class="px-[5px] py-1.5 text-right whitespace-nowrap font-medium xs:px-2.5 xs:py-2"
class="px-[5px] py-1.5 text-right whitespace-nowrap font-medium xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
>
{formatDateRange(rawData?.slice(-1)?.at(0)?.date)}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-odd">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<td
class="px-[5px] py-1.5 xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
>
<span>Price Range</span>
</td>
<td
class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
>
{lowestPrice + "-" + highestPrice}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-odd">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<td
class="px-[5px] py-1.5 xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
>
<span>Latest FTD</span>
</td>
<td
class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
>
{abbreviateNumber(rawData?.slice(-1)?.at(0)?.failToDeliver)}
</td>

5
src/routes/stocks/[tickerID]/options/hottest-contracts/+page.server.ts
View File

@ -1,7 +1,7 @@
export const load = async ({ locals, params }) => {
const { apiKey, apiURL } = locals;
const { apiKey, apiURL, user } = locals;
const getData = async () => {
const postData = {
@ -17,7 +17,8 @@ export const load = async ({ locals, params }) => {
body: JSON.stringify(postData),
});
const output = await response.json();
let output = await response.json();
output = user?.tier !== "Pro" ? output?.slice(0, 3) : output;
return output;
};

38
src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import { abbreviateNumberWithColor } from "$lib/utils";
import * as HoverCard from "$lib/components/shadcn/hover-card/index.js";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
export let data;
let volumeList = data?.getData;
@ -24,7 +24,9 @@
}
</script>
<section class="w-full bg-default overflow-hidden text-white min-h-screen">
<section
class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
>
<div class="w-full flex h-full overflow-hidden">
<div
class="w-full relative flex justify-center items-center overflow-hidden"
@ -35,19 +37,22 @@
>
Hottest Contracts (Highest Volume)
</h2>
<div class="w-full overflow-x-scroll text-white">
<table
class="w-full table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md m-auto mt-4 overflow-x-auto"
>
<thead class="bg-default">
<tr class="">
<td class="text-white font-semibold text-sm text-center">Chain</td
<td class="text-white font-semibold text-sm text-center"
>Chain</td
>
<td class="text-white font-semibold text-sm text-end">Last</td>
<td class="text-white font-semibold text-sm text-end">Low-High</td
<td class="text-white font-semibold text-sm text-end"
>Low-High</td
>
<td class="text-white font-semibold text-sm text-end">Volume</td
>
<td class="text-white font-semibold text-sm text-end">Volume</td>
<td class="text-white font-semibold text-sm text-end">OI</td>
<td class="text-white font-semibold text-sm text-end"
>OI Change</td
@ -65,7 +70,8 @@
<tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800 {index +
1 ===
volumeList?.slice(0, 3)?.length && data?.user?.tier !== 'Pro'
volumeList?.slice(0, 3)?.length &&
data?.user?.tier !== 'Pro'
? 'opacity-[0.1]'
: ''}"
>
@ -193,26 +199,30 @@
{/each}
</tbody>
</table>
</div>
<h2
class="mt-10 flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit"
>
Highest OI Contracts
</h2>
<div class="w-full overflow-x-scroll text-white">
<table
class="w-full table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md m-auto mt-4 overflow-x-auto"
>
<thead class="bg-default">
<tr class="">
<td class="text-white font-semibold text-sm text-center">Chain</td
<td class="text-white font-semibold text-sm text-center"
>Chain</td
>
<td class="text-white font-semibold text-sm text-end">Strike</td
>
<td class="text-white font-semibold text-sm text-end">Strike</td>
<td class="text-white font-semibold text-sm text-end">Last</td>
<td class="text-white font-semibold text-sm text-end">Low-High</td
<td class="text-white font-semibold text-sm text-end"
>Low-High</td
>
<td class="text-white font-semibold text-sm text-end">Volume</td
>
<td class="text-white font-semibold text-sm text-end">Volume</td>
<td class="text-white font-semibold text-sm text-end">OI</td>
<td class="text-white font-semibold text-sm text-end"
>OI Change</td
@ -363,6 +373,8 @@
</tbody>
</table>
</div>
<UpgradeToPro {data} />
</div>
</div>
</div>
</section>