update option page
This commit is contained in:
MuslemRahimi
parent
2960bd6c83
commit
77afc0aab1
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import InfoModal from "$lib/components/InfoModal.svelte";
|
||||
import * as HoverCard from "$lib/components/shadcn/hover-card/index.js";
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
import { abbreviateNumberWithColor } from "$lib/utils";
|
||||
|
||||
export let rawData = {};
|
||||
</script>
|
||||
@ -31,31 +31,14 @@
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
||||
>{abbreviateNumber(rawData?.call_volume, false)}</td
|
||||
></tr
|
||||
>
|
||||
<tr
|
||||
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
|
||||
><td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
|
||||
>Call Volume Ask Side</td
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
||||
>{abbreviateNumber(rawData?.call_volume_ask_side, false)}</td
|
||||
></tr
|
||||
>
|
||||
<tr
|
||||
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
|
||||
><td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
|
||||
>Call Volume Bid Side</td
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
||||
>{abbreviateNumber(rawData?.call_volume_bid_side, false)}</td
|
||||
>{@html abbreviateNumberWithColor(
|
||||
rawData?.call_volume,
|
||||
false,
|
||||
true,
|
||||
)}</td
|
||||
></tr
|
||||
>
|
||||
|
||||
<tr
|
||||
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
|
||||
><td
|
||||
@ -64,7 +47,11 @@
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
||||
>{abbreviateNumber(rawData?.call_premium, false)}</td
|
||||
>{@html abbreviateNumberWithColor(
|
||||
rawData?.call_premium,
|
||||
false,
|
||||
true,
|
||||
)}</td
|
||||
></tr
|
||||
>
|
||||
|
||||
@ -72,11 +59,15 @@
|
||||
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
|
||||
><td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
|
||||
>Net Call Premium</td
|
||||
>Total Premium</td
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
||||
>{abbreviateNumber(rawData?.net_call_premium, false)}</td
|
||||
>{@html abbreviateNumberWithColor(
|
||||
rawData?.call_premium + rawData?.put_premium,
|
||||
false,
|
||||
true,
|
||||
)}</td
|
||||
></tr
|
||||
>
|
||||
<tr
|
||||
@ -87,18 +78,11 @@
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
||||
>{abbreviateNumber(rawData?.call_open_interest, false)}</td
|
||||
></tr
|
||||
>
|
||||
<tr
|
||||
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
|
||||
><td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
|
||||
>IV Rank</td
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
||||
>{abbreviateNumber(rawData?.iv_rank, false)}</td
|
||||
>{@html abbreviateNumberWithColor(
|
||||
rawData?.call_open_interest,
|
||||
false,
|
||||
true,
|
||||
)}</td
|
||||
></tr
|
||||
>
|
||||
<tr
|
||||
@ -109,7 +93,7 @@
|
||||
</td>
|
||||
<td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
||||
>{rawData?.volatility}</td
|
||||
>{rawData?.iv}%</td
|
||||
></tr
|
||||
>
|
||||
<tr
|
||||
@ -120,18 +104,22 @@
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
||||
>{abbreviateNumber(rawData?.total_open_interest, false)}</td
|
||||
>{@html abbreviateNumberWithColor(
|
||||
rawData?.total_open_interest,
|
||||
false,
|
||||
true,
|
||||
)}</td
|
||||
></tr
|
||||
>
|
||||
<tr
|
||||
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
|
||||
><td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
|
||||
>Gex Ratio</td
|
||||
>GEX</td
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
||||
>{rawData?.gex_ratio}</td
|
||||
>{@html abbreviateNumberWithColor(rawData?.dex, false, true)}</td
|
||||
></tr
|
||||
>
|
||||
</tbody>
|
||||
@ -146,31 +134,14 @@
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
||||
>{abbreviateNumber(rawData?.put_volume, false)}</td
|
||||
></tr
|
||||
>
|
||||
<tr
|
||||
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
|
||||
><td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
|
||||
>Put Volume Ask Side</td
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
||||
>{abbreviateNumber(rawData?.put_volume_ask_side, false)}</td
|
||||
></tr
|
||||
>
|
||||
<tr
|
||||
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
|
||||
><td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
|
||||
>Put Volume Bid Side</td
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
||||
>{abbreviateNumber(rawData?.put_volume_bid_side, false)}</td
|
||||
>{@html abbreviateNumberWithColor(
|
||||
rawData?.put_volume,
|
||||
false,
|
||||
true,
|
||||
)}</td
|
||||
></tr
|
||||
>
|
||||
|
||||
<tr
|
||||
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
|
||||
><td
|
||||
@ -179,31 +150,14 @@
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
||||
>{abbreviateNumber(rawData?.put_premium, false)}</td
|
||||
></tr
|
||||
>
|
||||
<tr
|
||||
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
|
||||
><td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
|
||||
>Net Put Premium</td
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
||||
>{abbreviateNumber(rawData?.net_put_premium, false)}</td
|
||||
></tr
|
||||
>
|
||||
<tr
|
||||
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
|
||||
><td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
|
||||
>Put Open Interest</td
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
||||
>{abbreviateNumber(rawData?.put_open_interest, false)}</td
|
||||
>{@html abbreviateNumberWithColor(
|
||||
rawData?.put_premium,
|
||||
false,
|
||||
true,
|
||||
)}</td
|
||||
></tr
|
||||
>
|
||||
|
||||
<tr
|
||||
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
|
||||
><td
|
||||
@ -212,111 +166,85 @@
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
||||
>{rawData?.put_call_ratio}</td
|
||||
>{rawData?.putCallRatio}</td
|
||||
></tr
|
||||
>
|
||||
|
||||
<tr
|
||||
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
|
||||
><td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
|
||||
>🐻/🐂 Prem
|
||||
</td>
|
||||
<td
|
||||
class="whitespace-nowrap w-full px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
||||
>
|
||||
<HoverCard.Root>
|
||||
<HoverCard.Trigger
|
||||
class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
|
||||
>
|
||||
<div class="flex items-center sm:justify-end">
|
||||
<!-- Bar Container -->
|
||||
<div
|
||||
class="flex w-full max-w-28 h-5 bg-gray-200 rounded-md overflow-hidden"
|
||||
>
|
||||
<!-- Bearish -->
|
||||
<div
|
||||
class="bg-red-500 h-full"
|
||||
style="width: calc(({rawData
|
||||
?.premium_ratio[0]} / ({rawData
|
||||
?.premium_ratio[0]} + {rawData
|
||||
?.premium_ratio[1]} + {rawData
|
||||
?.premium_ratio[2]})) * 100%)"
|
||||
></div>
|
||||
|
||||
<!-- Neutral -->
|
||||
<div
|
||||
class="bg-gray-300 h-full"
|
||||
style="width: calc(({rawData
|
||||
?.premium_ratio[1]} / ({rawData
|
||||
?.premium_ratio[0]} + {rawData
|
||||
?.premium_ratio[1]} + {rawData
|
||||
?.premium_ratio[2]})) * 100%)"
|
||||
></div>
|
||||
|
||||
<!-- Bullish -->
|
||||
<div
|
||||
class="bg-green-500 h-full"
|
||||
style="width: calc(({rawData
|
||||
?.premium_ratio[2]} / ({rawData
|
||||
?.premium_ratio[0]} + {rawData
|
||||
?.premium_ratio[1]} + {rawData
|
||||
?.premium_ratio[2]})) * 100%)"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</HoverCard.Trigger>
|
||||
<HoverCard.Content
|
||||
class="w-auto bg-secondary border border-gray-600"
|
||||
>
|
||||
<div class="flex justify-between space-x-4">
|
||||
<div class="space-y-1 flex flex-col items-start text-white">
|
||||
<div>
|
||||
Bearish: {abbreviateNumber(
|
||||
rawData?.premium_ratio[0],
|
||||
false,
|
||||
true,
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
Neutral: {abbreviateNumber(
|
||||
rawData?.premium_ratio[1],
|
||||
false,
|
||||
true,
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
Bullish: {abbreviateNumber(
|
||||
rawData?.premium_ratio[2],
|
||||
false,
|
||||
true,
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</HoverCard.Content>
|
||||
</HoverCard.Root></td
|
||||
>
|
||||
</tr>
|
||||
<tr
|
||||
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
|
||||
><td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
|
||||
>Open Interest Change</td
|
||||
>Put Open Interest</td
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
||||
>{abbreviateNumber(rawData?.open_interest_change, false)}</td
|
||||
>{@html abbreviateNumberWithColor(
|
||||
rawData?.put_open_interest,
|
||||
false,
|
||||
true,
|
||||
)}</td
|
||||
></tr
|
||||
>
|
||||
|
||||
<tr
|
||||
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
|
||||
><td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
|
||||
>IV 30d</td
|
||||
>Open Interest (OI) Change</td
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
||||
>{rawData?.iv30d}</td
|
||||
>
|
||||
{#if rawData?.changeOI >= 0}
|
||||
<span class="text-[#00FC50]"
|
||||
>+{rawData?.changeOI?.toLocaleString("en-US")}</span
|
||||
>
|
||||
{:else if rawData?.changeOI < 0}
|
||||
<span class="text-[#FF2F1F]"
|
||||
>{rawData?.changeOI?.toLocaleString("en-US")}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-white"> n/a </span>
|
||||
{/if}</td
|
||||
></tr
|
||||
>
|
||||
|
||||
<tr
|
||||
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
|
||||
><td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
|
||||
>% OI Change</td
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
||||
>
|
||||
{#if rawData?.changesPercentageOI >= 0}
|
||||
<span class="text-[#00FC50]"
|
||||
>+{rawData?.changesPercentageOI >= 1000
|
||||
? abbreviateNumberWithColor(rawData?.changesPercentageOI)
|
||||
: rawData?.changesPercentageOI?.toFixed(2)}%</span
|
||||
>
|
||||
{:else if rawData?.changesPercentageOI < 0}
|
||||
<span class="text-[#FF2F1F]"
|
||||
>{rawData?.changesPercentageOI <= -1000
|
||||
? abbreviateNumberWithColor(rawData?.changesPercentageOI)
|
||||
: rawData?.changesPercentageOI?.toFixed(2)}%
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-white"> n/a </span>
|
||||
{/if}</td
|
||||
></tr
|
||||
>
|
||||
|
||||
<tr
|
||||
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
|
||||
><td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
|
||||
>DEX</td
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
||||
>{@html abbreviateNumberWithColor(rawData?.dex, false, true)}</td
|
||||
></tr
|
||||
>
|
||||
</tbody>
|
||||
|
||||
@ -1,10 +1,5 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
numberOfUnreadNotification,
|
||||
displayCompanyName,
|
||||
screenWidth,
|
||||
stockTicker,
|
||||
} from "$lib/store";
|
||||
import { displayCompanyName, screenWidth, stockTicker } from "$lib/store";
|
||||
import DailyStats from "$lib/components/Options/DailyStats.svelte";
|
||||
import { Chart } from "svelte-echarts";
|
||||
import { abbreviateNumberWithColor, monthNames } from "$lib/utils";
|
||||
@ -15,6 +10,7 @@
|
||||
import { GridComponent, TooltipComponent } from "echarts/components";
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
|
||||
use([BarChart, LineChart, GridComponent, TooltipComponent, CanvasRenderer]);
|
||||
|
||||
@ -60,10 +56,6 @@
|
||||
return formattedDate;
|
||||
}
|
||||
|
||||
function changeTimePeriod(event) {
|
||||
displayTimePeriod = event.target.value;
|
||||
}
|
||||
|
||||
function changeVolumeOI(event) {
|
||||
displayData = event.target.value;
|
||||
}
|
||||
@ -292,42 +284,10 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
|
||||
{$displayCompanyName} ({$stockTicker}) Options Activity · Stocknear
|
||||
</title>
|
||||
<meta
|
||||
name="description"
|
||||
content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`}
|
||||
/>
|
||||
|
||||
<!-- Other meta tags -->
|
||||
<meta
|
||||
property="og:title"
|
||||
content={`${$displayCompanyName} (${$stockTicker}) Options Activity · Stocknear`}
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`}
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
|
||||
<!-- Twitter specific meta tags -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta
|
||||
name="twitter:title"
|
||||
content={`${$displayCompanyName} (${$stockTicker}) Options Activity · Stocknear`}
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`}
|
||||
/>
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
<SEO
|
||||
title="Options Activity"
|
||||
description={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`}
|
||||
/>
|
||||
|
||||
<section class="w-full bg-default overflow-hidden text-white min-h-screen">
|
||||
<div class="w-full flex h-full overflow-hidden">
|
||||
@ -347,6 +307,7 @@
|
||||
|
||||
{#if rawData?.length > 0}
|
||||
<div class="flex flex-row items-center w-full mt-10">
|
||||
<!--
|
||||
<select
|
||||
class="ml-1 w-40 select select-bordered select-sm p-0 pl-5 bg-secondary"
|
||||
on:change={changeTimePeriod}
|
||||
@ -358,9 +319,10 @@
|
||||
<option value="sixMonths">6 Months</option>
|
||||
<option value="oneYear" selected>1 Year</option>
|
||||
</select>
|
||||
-->
|
||||
|
||||
<select
|
||||
class="ml-auto sm:ml-3 w-40 select select-bordered select-sm p-0 pl-5 bg-secondary"
|
||||
class=" w-40 select select-bordered select-sm p-0 pl-5 bg-secondary"
|
||||
on:change={changeVolumeOI}
|
||||
>
|
||||
<option disabled>Choose a category</option>
|
||||
@ -436,6 +398,9 @@
|
||||
<td class="text-white font-semibold text-sm text-end"
|
||||
>Total OI</td
|
||||
>
|
||||
<td class="text-white font-semibold text-sm text-end"
|
||||
>OI Change</td
|
||||
>
|
||||
<td class="text-white font-semibold text-sm text-end"
|
||||
>% OI Change</td
|
||||
>
|
||||
@ -470,7 +435,7 @@
|
||||
</td>
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] text-end">
|
||||
{#if item?.changesPercentage >= 0}
|
||||
{#if item?.changesPercentage >= 0 && item?.changesPercentage !== null}
|
||||
<span class="text-[#00FC50]"
|
||||
>+{item?.changesPercentage >= 1000
|
||||
? abbreviateNumberWithColor(
|
||||
@ -478,7 +443,7 @@
|
||||
)
|
||||
: item?.changesPercentage?.toFixed(2)}%</span
|
||||
>
|
||||
{:else if item?.changesPercentage < 0}
|
||||
{:else if item?.changesPercentage < 0 && item?.changesPercentage !== null}
|
||||
<span class="text-[#FF2F1F]"
|
||||
>{item?.changesPercentage <= -1000
|
||||
? abbreviateNumberWithColor(
|
||||
@ -597,6 +562,20 @@
|
||||
)}
|
||||
</td>
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] text-end">
|
||||
{#if item?.changeOI >= 0}
|
||||
<span class="text-[#00FC50]"
|
||||
>+{item?.changeOI?.toLocaleString("en-US")}</span
|
||||
>
|
||||
{:else if item?.changeOI < 0}
|
||||
<span class="text-[#FF2F1F]"
|
||||
>{item?.changeOI?.toLocaleString("en-US")}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-white"> n/a </span>
|
||||
{/if}
|
||||
</td>
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] text-end">
|
||||
{#if item?.changesPercentageOI >= 0}
|
||||
<span class="text-[#00FC50]"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user