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 2024-12-26 12:59:15 +01:00
parent 9c5f39fc6f
commit e0e098b7f4
6 changed files with 96 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
<script>
<script lang="ts">
export let title;
export let content;
export let id;

2
src/lib/components/Infobox.svelte
View File

@ -19,7 +19,7 @@
>
<div class="ml-3 w-full">
<div class="flex w-full flex-row justify-between">
<div>
<div class="p-3 sm:p-0 text-sm sm:text-[1rem]">
{@html text}
</div>
</div>

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

@ -1,6 +1,6 @@
<script lang="ts">
import { screenWidth } from "$lib/store";
import { abbreviateNumber, sectorNavigation } from "$lib/utils";
import { abbreviateNumberWithColor, sectorNavigation } from "$lib/utils";
import VirtualList from "svelte-tiny-virtual-list";
import HoverStockChart from "$lib/components/HoverStockChart.svelte";
@ -416,7 +416,9 @@
style="justify-content: center; "
class=" td w-full text-white text-xs sm:text-sm whitespace-nowrap m-auto"
>
{formatToNewYorkTime(displayedData[index]?.date)}
{$screenWidth < 640
? formatToNewYorkTime(displayedData[index]?.date)?.slice(0, -3)
: formatToNewYorkTime(displayedData[index]?.date)}
</div>
<div
on:click|stopPropagation
@ -440,7 +442,11 @@
style="justify-content: center;"
class="td text-sm sm:text-[1rem] text-start text-white"
>
{@html abbreviateNumber(displayedData[index]?.premium, true, true)}
{@html abbreviateNumberWithColor(
displayedData[index]?.premium,
true,
true,
)}
</div>
<div
@ -457,7 +463,11 @@
style="justify-content: center;"
class="td text-sm sm:text-[1rem] text-white text-end"
>
{@html abbreviateNumber(displayedData[index]?.volume, false, true)}
{@html abbreviateNumberWithColor(
displayedData[index]?.volume,
false,
true,
)}
</div>
<div

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

@ -1,6 +1,6 @@
<script lang="ts">
import { screenWidth } from "$lib/store";
import { abbreviateNumber } from "$lib/utils";
import { abbreviateNumberWithColor } from "$lib/utils";
import VirtualList from "svelte-tiny-virtual-list";
import HoverStockChart from "$lib/components/HoverStockChart.svelte";
@ -695,7 +695,7 @@
style="justify-content: center;"
class="td text-sm sm:text-[1rem] text-start text-white"
>
{@html abbreviateNumber(
{@html abbreviateNumberWithColor(
displayedData[index]?.cost_basis,
false,
true,

66
src/lib/utils.ts
View File

@ -608,7 +608,8 @@ export function formatString(inputString) {
return formattedString;
}
export function abbreviateNumber(number, addDollarSign = false, color = false) {
export function abbreviateNumberWithColor(number, addDollarSign = false, color = false) {
// Check if number is null or undefined, return "-" if true
if (number == null) {
return "-";
@ -685,6 +686,69 @@ if (color) {
}
export function abbreviateNumber(number, addDollarSign = false) {
// Check if number is null or undefined, return "-" if true
if (number == null) {
return "-";
}
const negative = number < 0;
// Handle special case for exactly 1000
if (Math.abs(number) === 1000) {
return addDollarSign
? negative
? "-$1K"
: "$1K"
: negative
? "-1K"
: "1K";
}
if (Math.abs(number) !== 0 && Math.abs(number) > 1000) {
const suffixes = ["", "K", "M", "B", "B", "T", "Q", "Qu", "S", "O", "N", "D"];
const magnitude = Math.floor(Math.log10(Math.abs(number)));
let index = Math.min(Math.floor(magnitude / 3), suffixes.length - 1);
// Special case to keep numbers in trillions formatted as billions
if (index >= 4) {
index = 3; // Keep the suffix at "B"
}
let abbreviation = Math.abs(number) / Math.pow(10, index * 3);
// Set the desired number of decimals
if (abbreviation >= 1000) {
abbreviation = abbreviation.toFixed(1);
index++;
} else {
abbreviation = abbreviation.toFixed(2);
}
abbreviation = parseFloat(abbreviation).toLocaleString("en-US", {
maximumFractionDigits: 2,
minimumFractionDigits: 2,
});
const formattedNumber = abbreviation + suffixes[index];
return addDollarSign
? (negative ? "-$" : "$") + formattedNumber
: negative
? "-" + formattedNumber
: formattedNumber;
} else if (Math.abs(number) >= 0 && Math.abs(number) < 1000) {
return addDollarSign
? (negative ? "-$" : "$") + Math.abs(number)
: negative
? "-" + Math.abs(number)
: number.toString();
} else {
return addDollarSign ? "$0" : "0";
}
}
export const formatDate = (dateString) => {
const date = new Date(dateString);

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

@ -863,7 +863,7 @@
<body class="overflow-y-auto">
<section
class="w-full max-w-screen sm:max-w-7xl xl:max-w-screen-2xl flex justify-center items-center bg-default pb-20"
class="w-full max-w-screen sm:max-w-7xl xl:max-w-screen-2xl flex justify-center items-center bg-default pb-20 10 p-3 sm:p-0"
>
<div class="w-full m-auto min-h-screen">
<!--
@ -885,7 +885,7 @@
</div>
{/if}
<div class="rounded-md border border-gray-700 bg-odd p-2">
<div class="rounded-md border border-gray-700 bg-primary p-2">
<div
class="flex flex-col sm:flex-row items-center pt-3 sm:pt-1 pb-3 sm:border-b sm:border-gray-600"
>
@ -963,7 +963,7 @@
<div class="sm:ml-auto w-full sm:w-fit pt-5">
<div class="relative flex flex-col sm:flex-row items-center">
<div
class="relative w-full sm:w-fit pl-3 sm:mr-5 mb-4 sm:mb-0 flex-auto text-center bg-[#19191F] rounded-md border border-gray-600"
class="relative w-full sm:w-fit pl-3 sm:mr-5 mb-4 sm:mb-0 flex-auto text-center bg-secondary rounded-md border border-gray-600"
>
<label class="flex flex-row items-center">
<input
@ -1284,7 +1284,7 @@
: ""}
on:input={(e) =>
handleValueInput(e, row?.rule, 0)}
class="ios-zoom-fix block max-w-[3.5rem] rounded-sm placeholder:text-gray-200 font-normal p-1 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-secondary"
class="ios-zoom-fix block max-w-[3.5rem] rounded-sm placeholder:text-gray-200 font-normal p-1 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-primary"
/>
<span
class="text-white text-[1rem] font-normal mt-1"
@ -1301,7 +1301,7 @@
: ""}
on:input={(e) =>
handleValueInput(e, row?.rule, 1)}
class="ios-zoom-fix block max-w-[3.5rem] rounded-sm placeholder:text-gray-200 font-normal p-1 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-secondary"
class="ios-zoom-fix block max-w-[3.5rem] rounded-sm placeholder:text-gray-200 font-normal p-1 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-primary"
/>
</div>
{:else}
@ -1313,7 +1313,7 @@
: valueMappings[row?.rule]}
on:input={(e) =>
handleValueInput(e, row?.rule)}
class="ios-zoom-fix block max-w-[4.8rem] rounded-sm placeholder:text-gray-200 font-normal p-1 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-secondary"
class="ios-zoom-fix block max-w-[4.8rem] rounded-sm placeholder:text-gray-200 font-normal p-1 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-primary"
/>
{/if}
@ -1466,7 +1466,7 @@
<div class="w-full grid grid-cols-1 lg:grid-cols-4 gap-y-3 gap-x-3">
<!--Start Flow Sentiment-->
<div
class="flex flex-row items-center flex-wrap w-full px-5 bg-odd border border-gray-600 rounded-md h-20"
class="flex flex-row items-center flex-wrap w-full px-5 bg-primary border border-gray-600 rounded-md h-20"
>
<div class="flex flex-col items-start">
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem]"
@ -1487,7 +1487,7 @@
<!--End Flow Sentiment-->
<!--Start Put/Call-->
<div
class="flex flex-row items-center flex-wrap w-full px-5 bg-odd border border-gray-600 rounded-md h-20"
class="flex flex-row items-center flex-wrap w-full px-5 bg-primary border border-gray-600 rounded-md h-20"
>
<div class="flex flex-col items-start">
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem]"
@ -1543,7 +1543,7 @@
<!--End Put/Call-->
<!--Start Call Flow-->
<div
class="flex flex-row items-center flex-wrap w-full px-5 bg-odd border border-gray-600 rounded-md h-20"
class="flex flex-row items-center flex-wrap w-full px-5 bg-primary border border-gray-600 rounded-md h-20"
>
<div class="flex flex-col items-start">
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem]"
@ -1600,7 +1600,7 @@
<!--End Call Flow-->
<!--Start Put Flow-->
<div
class="flex flex-row items-center flex-wrap w-full px-5 bg-odd border border-gray-600 rounded-md h-20"
class="flex flex-row items-center flex-wrap w-full px-5 bg-primary border border-gray-600 rounded-md h-20"
>
<div class="flex flex-col items-start">
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem]"
@ -1696,7 +1696,7 @@
<div class="flex justify-center items-center h-80">
<div class="relative">
<label
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
class="bg-primary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
>
<span class="loading loading-spinner loading-md text-gray-400"
></span>
@ -1807,7 +1807,7 @@
autocomplete="off"
type="search"
id="search"
class="placeholder-gray-300 block w-full p-2 ps-10 text-sm text-gray-200 border border-gray-600 rounded-md bg-secondary border border-blue-500"
class="placeholder-gray-300 block w-full p-2 ps-10 text-sm text-gray-200 border border-gray-600 rounded-md bg-primary border border-blue-500"
placeholder="Search"
bind:value={searchTerm}
/>
@ -1876,7 +1876,7 @@
<!-- Desktop modal content -->
<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-600 w-full bg-primary flex flex-col items-center"
>
<div class="text-white mb-5 text-center">
<h3 class="font-bold text-2xl mb-5">{tooltipTitle}</h3>