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 Latest Information
</h2> </h2>
<div class="flex justify-start items-center w-full m-auto"> <div
<table class="w-full bg-table border border-gray-800"> 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> <tbody>
<tr class="border-y border-gray-800 odd:bg-odd"> <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> <span>Date</span>
</td> </td>
<td <td
@ -248,7 +254,9 @@
</td> </td>
</tr> </tr>
<tr class="border-y border-gray-800 whitespace-nowrap odd:bg-odd"> <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> <span>Total Volume</span>
</td> </td>
<td <td
@ -258,7 +266,9 @@
</td> </td>
</tr> </tr>
<tr class="border-y border-gray-800 whitespace-nowrap odd:bg-odd"> <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> <span>Avg. Short % of Volume</span>
</td> </td>
<td <td

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

@ -261,31 +261,37 @@
<table class="w-full bg-table border border-gray-800"> <table class="w-full bg-table border border-gray-800">
<tbody> <tbody>
<tr class="border-y border-gray-800 odd:bg-odd"> <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> <span>Date</span>
</td> </td>
<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)} {formatDateRange(rawData?.slice(-1)?.at(0)?.date)}
</td> </td>
</tr> </tr>
<tr class="border-y border-gray-800 odd:bg-odd"> <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> <span>Price Range</span>
</td> </td>
<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} {lowestPrice + "-" + highestPrice}
</td> </td>
</tr> </tr>
<tr class="border-y border-gray-800 odd:bg-odd"> <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> <span>Latest FTD</span>
</td> </td>
<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)} {abbreviateNumber(rawData?.slice(-1)?.at(0)?.failToDeliver)}
</td> </td>

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

@ -1,7 +1,7 @@
export const load = async ({ locals, params }) => { export const load = async ({ locals, params }) => {
const { apiKey, apiURL } = locals; const { apiKey, apiURL, user } = locals;
const getData = async () => { const getData = async () => {
const postData = { const postData = {
@ -17,7 +17,8 @@ export const load = async ({ locals, params }) => {
body: JSON.stringify(postData), 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; return output;
}; };

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

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