AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui fixes

Browse Source
This commit is contained in:
MuslemRahimi 2024-07-26 16:51:21 +02:00
parent 1f153f055f
commit 56bed7a643
18 changed files with 36 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -204,7 +204,7 @@ $: {
</div> </div>
<div class="text-white text-sm sm:text-[1rem] mt-1 sm:mt-3 mb-1 w-full sm:w-5/6"> <div class="text-white text-[1rem] mt-1 sm:mt-3 mb-1 w-full sm:w-5/6">
We analyze insights from various analysts to offer both historical and future fundamental data forecasts. We analyze insights from various analysts to offer both historical and future fundamental data forecasts.
</div> </div>

4
src/lib/components/AnalystInsight.svelte
View File

@ -102,7 +102,7 @@ function latestInfoDate(inputDate) {
{#if Object?.keys(rawData)?.length !== 0} {#if Object?.keys(rawData)?.length !== 0}
<div class="w-full flex flex-col items-start"> <div class="w-full flex flex-col items-start">
<div class="text-white text-sm sm:text-[1rem] mt-2 mb-2 w-full"> <div class="text-white text-[1rem] mt-2 mb-2 w-full">
The AI model summarizes the latest Wallstreet Analyst Insight Report and extracts key points for you, focusing on what matters most. The AI model summarizes the latest Wallstreet Analyst Insight Report and extracts key points for you, focusing on what matters most.
</div> </div>
</div> </div>
@ -135,7 +135,7 @@ function latestInfoDate(inputDate) {
</div> </div>
<div class="flex flex-col w-full pt-3 pl-2 pr-2 sm:pr-4"> <div class="flex flex-col w-full pt-3 pl-2 pr-2 sm:pr-4">
<span class="text-white text-[0.915rem] "> <span class="text-white text-[1rem] ">
{rawData?.insight} {rawData?.insight}
</span> </span>
</div> </div>

14
src/lib/components/BorrowedShare.svelte
View File

@ -215,17 +215,7 @@ function findLowestAndHighestFee(data, lastDateStr) {
} }
} }
let charNumber = 20; $: charNumber = $screenWidth < 640 ? 20 : 40;
$: {
if($screenWidth < 640)
{
charNumber = 20;
}
else {
charNumber =40;
}
}
@ -253,7 +243,7 @@ function findLowestAndHighestFee(data, lastDateStr) {
{#if rawData?.length !== 0} {#if rawData?.length !== 0}
<div class="w-full flex flex-col items-start"> <div class="w-full flex flex-col items-start">
<div class="text-white text-sm sm:text-[1rem] mt-2 mb-2 w-full"> <div class="text-white text-[1rem] mt-2 mb-2 w-full">
Over the past six months, Interactive Brokers had {abbreviateNumber(totalAvailableShares)} shares available for borrowing, with an average fee of {avgFee}%. Over the past six months, Interactive Brokers had {abbreviateNumber(totalAvailableShares)} shares available for borrowing, with an average fee of {avgFee}%.
</div> </div>
</div> </div>

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

@ -115,7 +115,7 @@ $: {
<div class="flex mt-5 h-auto"> <div class="flex mt-5 h-auto">
<div class="{activeIdx === 0 ? 'bg-[#10DB06]' : 'bg-[#FF2F1F]'} w-3.5 rounded-l-xl" /> <div class="{activeIdx === 0 ? 'bg-[#10DB06]' : 'bg-[#FF2F1F]'} w-3.5 rounded-l-xl" />
<span class="text-gray-100 ml-3 text-[0.915rem] "> <span class="text-gray-100 ml-3 text-[1rem] ">
{#if showFullText} {#if showFullText}
{#each (showFullText ? paragraphs : paragraphs?.slice(0,1)) as paragraph, index} {#each (showFullText ? paragraphs : paragraphs?.slice(0,1)) as paragraph, index}
<p class="{index !== 0 ? 'mt-1' : ''} pr-1">{paragraph} {paragraphs?.length <= index+1 ? '' : '.'}</p> <p class="{index !== 0 ? 'mt-1' : ''} pr-1">{paragraph} {paragraphs?.length <= index+1 ? '' : '.'}</p>

14
src/lib/components/ClinicalTrial.svelte
View File

@ -205,16 +205,6 @@ $: {
let charNumber = 20; let charNumber = 20;
$: {
if($screenWidth < 640)
{
charNumber = 20;
}
else {
charNumber =20;
}
}
</script> </script>
@ -276,7 +266,7 @@ $: {
<div class="w-full m-auto h-auto max-h-[500px] overflow-x-scroll sm:overflow-hidden sm:overflow-y-scroll scroller "> <div class="w-full m-auto h-auto max-h-[500px] overflow-x-scroll sm:overflow-hidden sm:overflow-y-scroll scroller ">
<table class="table table-sm table-compact table-pin-rows table-pin-cols w-full"> <table class="table table-sm table-compact table-pin-rows table-pin-cols w-full">
<thead> <thead>
<tr class="border-b border-blue-400"> <tr>
<th class="text-white shadow-md font-semibold text-sm text-start bg-[#09090B]">Drug</th> <th class="text-white shadow-md font-semibold text-sm text-start bg-[#09090B]">Drug</th>
<th class="text-white shadow-md font-semibold text-sm text-start bg-[#09090B]">Stage</th> <th class="text-white shadow-md font-semibold text-sm text-start bg-[#09090B]">Stage</th>
<th class="text-white shadow-md font-semibold text-sm text-center bg-[#09090B]">Phase Status</th> <th class="text-white shadow-md font-semibold text-sm text-center bg-[#09090B]">Phase Status</th>
@ -287,7 +277,7 @@ $: {
{#each displayList as item,index} {#each displayList as item,index}
<tr on:click={() => handleViewData(item)} class="border-y border-gray-800 odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] cursor-pointer"> <tr on:click={() => handleViewData(item)} class="border-y border-gray-800 odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] cursor-pointer">
<td class="text-white font-medium"> <td class="text-white font-medium whitespace-nowrap">
{item["Interventions"]?.length === 0 ? '-' : item["Interventions"]?.length > charNumber ? formatString(item["Interventions"]?.slice(0,charNumber)) + "..." : formatString(item["Interventions"])} {item["Interventions"]?.length === 0 ? '-' : item["Interventions"]?.length > charNumber ? formatString(item["Interventions"]?.slice(0,charNumber)) + "..." : formatString(item["Interventions"])}
</td> </td>
<!-- <!--

1
src/lib/components/DCF.svelte
View File

@ -26,7 +26,6 @@
const plotBarChart = () => { const plotBarChart = () => {
const options = { const options = {
grid: { grid: {
left: '0%', left: '0%',

4
src/lib/components/DarkPool.svelte
View File

@ -231,7 +231,7 @@ $: {
{#if rawData?.length !== 0} {#if rawData?.length !== 0}
<div class="w-full flex flex-col items-start"> <div class="w-full flex flex-col items-start">
<div class="text-white text-sm sm:text-[1rem] mt-2 mb-2 w-full"> <div class="text-white text-[1rem] mt-2 mb-2 w-full">
Over the past 12 months, {$displayCompanyName} has experienced an average dark pool trading volume of Over the past 12 months, {$displayCompanyName} has experienced an average dark pool trading volume of
<span class="font-semibold">{abbreviateNumber(avgVolume)}</span> shares. <span class="font-semibold">{abbreviateNumber(avgVolume)}</span> shares.
Out of this total, an average of <span class="font-semibold">{abbreviateNumber(avgShortVolume)}</span> shares, Out of this total, an average of <span class="font-semibold">{abbreviateNumber(avgShortVolume)}</span> shares,
@ -282,7 +282,7 @@ $: {
<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">
<span>Date</span> <span>Date</span>
</td> </td>
<td class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"> <td class="px-[5px] py-1.5 text-sm text-right font-medium xs:px-2.5 xs:py-2">
{ formatDateRange(rawData?.slice(-1)?.at(0)?.date)} { formatDateRange(rawData?.slice(-1)?.at(0)?.date)}
</td> </td>
</tr> </tr>

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

@ -191,7 +191,7 @@ $: {
<div class="mt-2 pb-4"> <div class="mt-2 pb-4">
<div class="w-full flex flex-col items-start"> <div class="w-full flex flex-col items-start">
<div class="text-white text-sm sm:text-[1rem] mt-1 sm:mt-3 mb-1 w-full"> <div class="text-white text-[1rem] mt-1 sm:mt-3 mb-1 w-full">
{$displayCompanyName}'s' enterprise value provides a comprehensive snapshot of its total worth, crucial for assessing its financial health and making informed investment decisions. {$displayCompanyName}'s' enterprise value provides a comprehensive snapshot of its total worth, crucial for assessing its financial health and making informed investment decisions.
</div> </div>
</div> </div>

10
src/lib/components/FundamentalAnalysis.svelte
View File

@ -94,7 +94,7 @@ $: {
{#if Object?.keys(fundamentalAnalysisDict)?.length !== 0} {#if Object?.keys(fundamentalAnalysisDict)?.length !== 0}
<div class="w-full flex flex-col items-start"> <div class="w-full flex flex-col items-start">
<div class="text-white text-sm sm:text-[1rem] mt-1 sm:mt-3 mb-1 w-full"> <div class="text-white text-[1rem] mt-1 sm:mt-3 mb-1 w-full">
Our model uses fundamental data only to predict the next quarter. Here are the stats of the model for {$displayCompanyName} to ensure transparency and reliability. Our model uses fundamental data only to predict the next quarter. Here are the stats of the model for {$displayCompanyName} to ensure transparency and reliability.
</div> </div>
</div> </div>
@ -103,7 +103,7 @@ $: {
<div class="w-full mt-5 mb-5 flex justify-start items-center"> <div class="w-full mt-5 mb-5 flex justify-start items-center">
<div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 gap-x-3 "> <div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 gap-x-3 ">
<!--Start Flow Sentiment--> <!--Start Flow Sentiment-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-2xl h-20"> <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-lg h-20">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm">Quarter Sentiment</span> <span class="font-medium text-gray-200 text-sm">Quarter Sentiment</span>
{#if !deactivateContent} {#if !deactivateContent}
@ -119,7 +119,7 @@ $: {
<!--End Flow Sentiment--> <!--End Flow Sentiment-->
<!--Start Put/Call--> <!--Start Put/Call-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-2xl h-20"> <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-lg h-20">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm ">Accuracy</span> <span class="font-medium text-gray-200 text-sm ">Accuracy</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white"> <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@ -147,7 +147,7 @@ $: {
<!--End Put/Call--> <!--End Put/Call-->
<!--Start Precision--> <!--Start Precision-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-2xl h-20"> <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-lg h-20">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm ">Precision</span> <span class="font-medium text-gray-200 text-sm ">Precision</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white"> <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@ -180,7 +180,7 @@ $: {
<div class="text-white text-sm sm:text-[1rem] mt-4 sm:mt-7 ml-1"> <div class="text-white text-[1rem] mt-4 sm:mt-7 ml-1">
Over the next quarter the model forecasts a Over the next quarter the model forecasts a
{#if !deactivateContent} {#if !deactivateContent}
<span class="font-semibold {flowSentiment === 'Bullish' ? 'text-[#10DB06]' : 'text-[#FC2120]'}">{flowSentiment}</span> price movement. <span class="font-semibold {flowSentiment === 'Bullish' ? 'text-[#10DB06]' : 'text-[#FC2120]'}">{flowSentiment}</span> price movement.

15
src/lib/components/ImpliedVolatility.svelte
View File

@ -247,19 +247,8 @@ function findLowestAndhighestIV(data, lastDateStr) {
} }
} }
let charNumber = 20;
$: {
if($screenWidth < 640)
{
charNumber = 20;
}
else {
charNumber =40;
}
}
$: charNumber = $screenWidth < 640 ? 20 : 40;
</script> </script>
@ -285,7 +274,7 @@ function findLowestAndhighestIV(data, lastDateStr) {
{#if rawData?.length !== 0} {#if rawData?.length !== 0}
<div class="w-full flex flex-col items-start"> <div class="w-full flex flex-col items-start">
<div class="text-white text-sm sm:text-[1rem] mt-2 mb-2 w-full"> <div class="text-white text-[1rem] mt-2 mb-2 w-full">
Based on the past 12 months of historical data, {$displayCompanyName} has an IV Rank of <span class="font-semibold">{ivRank}%</span>, with the current implied volatility standing at <span class="font-semibold">{rawData?.slice(-1)?.at(0)?.iv60}%</span>. Based on the past 12 months of historical data, {$displayCompanyName} has an IV Rank of <span class="font-semibold">{ivRank}%</span>, with the current implied volatility standing at <span class="font-semibold">{rawData?.slice(-1)?.at(0)?.iv60}%</span>.
</div> </div>
</div> </div>

10
src/lib/components/MarketMaker.svelte
View File

@ -235,7 +235,7 @@ else {
{#if historyData?.length !== 0} {#if historyData?.length !== 0}
<div class="w-full flex flex-col items-start"> <div class="w-full flex flex-col items-start">
<div class="text-white text-sm sm:text-[1rem] mt-2 mb-2 w-full"> <div class="text-white text-[1rem] mt-2 mb-2 w-full">
Over the past year, {$displayCompanyName} has seen a weekly average of Over the past year, {$displayCompanyName} has seen a weekly average of
<span class="font-semibold">{abbreviateNumber(avgTradeCount)}</span> trades, involving an average of <span class="font-semibold">{abbreviateNumber(avgTradeCount)}</span> trades, involving an average of
<span class="font-semibold">{abbreviateNumber(avgShareQuantity)}</span> shares bought and sold. <span class="font-semibold">{abbreviateNumber(avgShareQuantity)}</span> shares bought and sold.
@ -338,19 +338,19 @@ else {
{#each (showFullStats ? topMarketMakers?.slice(0,10) : topMarketMakers?.slice(0,3)) as item,index} {#each (showFullStats ? topMarketMakers?.slice(0,10) : topMarketMakers?.slice(0,3)) as item,index}
<tr class="border-y border-gray-800 odd:bg-[#27272A] {index === 2 && !showFullStats && topMarketMakers?.length > 3 ? 'opacity-[0.5]' : '' } sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B]"> <tr class="border-y border-gray-800 odd:bg-[#27272A] {index === 2 && !showFullStats && topMarketMakers?.length > 3 ? 'opacity-[0.5]' : '' } sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B]">
<td class="text-white font-medium"> <td class="text-white font-medium whitespace-nowrap">
{item?.name?.length > charNumber ? formatString(item?.name?.slice(0,charNumber)) + "..." : formatString(item?.name)} {item?.name?.length > charNumber ? formatString(item?.name?.slice(0,charNumber)) + "..." : formatString(item?.name)}
</td> </td>
<td class="text-white text-end font-medium"> <td class="text-white text-end font-medium whitespace-nowrap">
{abbreviateNumber(item?.avgWeeklyTradeCount)} {abbreviateNumber(item?.avgWeeklyTradeCount)}
</td> </td>
<td class="text-white text-end font-medium"> <td class="text-white text-end font-medium whitespace-nowrap">
{abbreviateNumber(item?.avgWeeklyShareQuantity)} {abbreviateNumber(item?.avgWeeklyShareQuantity)}
</td> </td>
<td class="text-white text-end font-medium "> <td class="text-white text-end font-medium whitespace-nowrap">
{abbreviateNumber(item?.avgNotionalSum, true)} {abbreviateNumber(item?.avgNotionalSum, true)}
</td> </td>
</tr> </tr>

14
src/lib/components/OptionsNetFlow.svelte
View File

@ -201,17 +201,7 @@
} }
} }
let charNumber = 20; $: charNumber = $screenWidth < 640 ? 20 : 40;
$: {
if($screenWidth < 640)
{
charNumber = 20;
}
else {
charNumber =40;
}
}
@ -239,7 +229,7 @@
{#if rawData?.length !== 0} {#if rawData?.length !== 0}
<div class="w-full flex flex-col items-start"> <div class="w-full flex flex-col items-start">
<div class="text-white text-sm sm:text-[1rem] mt-2 mb-2 w-full"> <div class="text-white text-[1rem] mt-2 mb-2 w-full">
Analysis of the 20-day moving average of the options net flow demonstrates a {sentiment} trend, characterized by the {sentiment === 'bullish' ? 'Net Call Flow exceeding the Net Put Flow' : 'Net Put Flow exceeding the Net Call Flow'} . Analysis of the 20-day moving average of the options net flow demonstrates a {sentiment} trend, characterized by the {sentiment === 'bullish' ? 'Net Call Flow exceeding the Net Put Flow' : 'Net Put Flow exceeding the Net Call Flow'} .
</div> </div>
</div> </div>

4
src/lib/components/PriceAnalysis.svelte
View File

@ -206,7 +206,7 @@ $: {
{#if Object?.keys(priceAnalysisDict)?.length !== 0} {#if Object?.keys(priceAnalysisDict)?.length !== 0}
<div class="w-full flex flex-col items-start"> <div class="w-full flex flex-col items-start">
<div class="text-white text-sm sm:text-[1rem] mt-1 sm:mt-3 mb-1 w-full"> <div class="text-white text-[1rem] mt-1 sm:mt-3 mb-1 w-full">
Our model predicts future prices by analyzing trends, seasonal variations, and holiday impacts. Here are the stats of the model for {$displayCompanyName} to ensure transparency and reliability. Our model predicts future prices by analyzing trends, seasonal variations, and holiday impacts. Here are the stats of the model for {$displayCompanyName} to ensure transparency and reliability.
</div> </div>
</div> </div>
@ -291,7 +291,7 @@ $: {
</div> </div>
</Lazy> </Lazy>
<div class="text-white text-sm sm:text-[1rem] mt-4 sm:mt-7 ml-1"> <div class="text-white text-[1rem] mt-4 sm:mt-7 ml-1">
Over the next 12 months, the model predicts a Over the next 12 months, the model predicts a
<span class="font-semibold {priceSentiment === 'Bullish' ? 'text-[#10DB06]' : 'text-[#FC2120]'}">{priceSentiment}</span> <span class="font-semibold {priceSentiment === 'Bullish' ? 'text-[#10DB06]' : 'text-[#FC2120]'}">{priceSentiment}</span>
trend, suggesting that the future price is expected to {priceSentiment === 'Bullish' ? 'surpass' : 'to be less than'} the previous price of trend, suggesting that the future price is expected to {priceSentiment === 'Bullish' ? 'surpass' : 'to be less than'} the previous price of

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

@ -259,7 +259,7 @@ $: {
{#if Object?.keys(rawData)?.length !== 0} {#if Object?.keys(rawData)?.length !== 0}
<div class="w-full flex flex-col items-start"> <div class="w-full flex flex-col items-start">
<div class="text-white text-sm sm:text-[1rem] mt-2 mb-2 w-full"> <div class="text-white text-[1rem] mt-2 mb-2 w-full">
In the past six months, the {$displayCompanyName} had an average retail investor volume of <span class="font-semibold">{avgVolume > 100e3 ? abbreviateNumber(avgVolume,true) : '< $100K'}</span>, with a prevailing In the past six months, the {$displayCompanyName} had an average retail investor volume of <span class="font-semibold">{avgVolume > 100e3 ? abbreviateNumber(avgVolume,true) : '< $100K'}</span>, with a prevailing
{#if avgSentiment === 'Bullish' } {#if avgSentiment === 'Bullish' }
<span class="text-[#10DB06]"> <span class="text-[#10DB06]">

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

@ -174,7 +174,7 @@ $: {
<div class="mt-2 pb-4 bg-[#09090B]"> <div class="mt-2 pb-4 bg-[#09090B]">
<div class="w-full flex flex-col items-start"> <div class="w-full flex flex-col items-start">
<div class="text-white text-sm sm:text-[1rem] mt-1 sm:mt-3 mb-1 w-full"> <div class="text-white text-[1rem] mt-1 sm:mt-3 mb-1 w-full">
{$displayCompanyName}'s' has <span class="font-semibold">{abbreviateNumber(rawData?.latestOutstandingShares)}</span> shares outstanding with <span class="font-semibold">{abbreviateNumber(rawData?.latestFloatShares)}</span> of those shares currently floating. {$displayCompanyName}'s' has <span class="font-semibold">{abbreviateNumber(rawData?.latestOutstandingShares)}</span> shares outstanding with <span class="font-semibold">{abbreviateNumber(rawData?.latestFloatShares)}</span> of those shares currently floating.
</div> </div>
</div> </div>

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

@ -232,7 +232,7 @@
{#if rawData?.length !== 0} {#if rawData?.length !== 0}
<div class="w-full flex flex-col items-start"> <div class="w-full flex flex-col items-start">
<div class="text-white text-sm sm:text-[1rem] mt-2 mb-2 w-full"> <div class="text-white text-[1rem] mt-2 mb-2 w-full">
The swap data from the past 100 days shows an average notional amount of {abbreviateNumber(avgNotionalAmount,true)} and an average notional quantity of {abbreviateNumber(avgNotionalQuantity)}. The swap data from the past 100 days shows an average notional amount of {abbreviateNumber(avgNotionalAmount,true)} and an average notional quantity of {abbreviateNumber(avgNotionalQuantity)}.
</div> </div>
</div> </div>

4
src/lib/components/TrendAnalysis.svelte
View File

@ -107,7 +107,7 @@ $: {
{#if isLoaded} {#if isLoaded}
{#if trendList?.length !== 0} {#if trendList?.length !== 0}
<div class="w-full flex flex-col items-start"> <div class="w-full flex flex-col items-start">
<div class="text-white text-sm sm:text-[1rem] mt-1 sm:mt-3 mb-1 w-full"> <div class="text-white text-[1rem] mt-1 sm:mt-3 mb-1 w-full">
Our model uses technical indicators to predict the next trend. Here are the stats of the model for {$displayCompanyName} to ensure transparency and reliability. Our model uses technical indicators to predict the next trend. Here are the stats of the model for {$displayCompanyName} to ensure transparency and reliability.
</div> </div>
</div> </div>
@ -198,7 +198,7 @@ $: {
<div class="text-white text-sm sm:text-[1rem] mt-4 sm:mt-7 ml-1"> <div class="text-white text-[1rem] mt-4 sm:mt-7 ml-1">
Over the next {displayData === 'threeMonth' ? '3 months' : displayData === 'oneMonth' ? '1 month' : '1 week'}, the model forecasts a Over the next {displayData === 'threeMonth' ? '3 months' : displayData === 'oneMonth' ? '1 month' : '1 week'}, the model forecasts a
<span class="font-semibold {flowSentiment === 'Bullish' ? 'text-[#10DB06]' : 'text-[#FC2120]'}">{flowSentiment}</span> <span class="font-semibold {flowSentiment === 'Bullish' ? 'text-[#10DB06]' : 'text-[#FC2120]'}">{flowSentiment}</span>
trend, indicating that the future price is expected to {flowSentiment === 'Bullish' ? 'exceed' : 'to be less than'} the previous price of trend, indicating that the future price is expected to {flowSentiment === 'Bullish' ? 'exceed' : 'to be less than'} the previous price of

6
src/lib/components/WIIM.svelte
View File

@ -81,16 +81,16 @@ $: {
<div class="text-white text-sm ml-auto pr-4 font-medium"> <div class="text-white text-sm ml-auto pr-4 font-medium">
{#if item?.changesPercentage >=0} {#if item?.changesPercentage >=0}
<svg class="w-5 h-5 -mr-0.5 -mt-0.5 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg> <svg class="w-5 h-5 -mr-0.5 -mt-0.5 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
<span class="text-[#10DB06] text-xs font-medium inline-block">+{item?.changesPercentage}%</span> <span class="text-[#10DB06] inline-block">+{item?.changesPercentage}%</span>
{:else if item?.changesPercentage < 0 } {:else if item?.changesPercentage < 0 }
<svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg> <svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
<span class="text-[#FF2F1F] text-xs font-medium inline-block">{item?.changesPercentage}% </span> <span class="text-[#FF2F1F] inline-block">{item?.changesPercentage}% </span>
{/if} {/if}
</div> </div>
</div> </div>
<div class="flex flex-col w-full max-w-[430px] pt-2 pl-2 pr-2 sm:pr-0"> <div class="flex flex-col w-full max-w-[430px] pt-2 pl-2 pr-2 sm:pr-0">
<span class="text-white text-sm "> <span class="text-white text-[1rem] ">
{data?.user?.tier !== 'Pro' && latestInfoDate(item?.date) ? item?.text?.slice(0,30) + '...' : item?.text } {data?.user?.tier !== 'Pro' && latestInfoDate(item?.date) ? item?.text?.slice(0,30) + '...' : item?.text }
</span> </span>
</div> </div>