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-06-18 20:23:40 +02:00
parent bb7eaa5019
commit 23a15e5eb2
6 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,6 +11,7 @@
let isLoaded = false;
const usRegion = ['cle1','iad1','pdx1','sfo1'];
let historyData = [];
let apiURL;
userRegion.subscribe(value => {
@ -49,7 +50,7 @@ function getPlotOptions() {
let tradingList = [];
let sentimentList = [];
// Iterate over the data and extract required information
rawData?.forEach(item => {
historyData?.forEach(item => {
dates?.push(item?.date);
tradingList?.push(item?.traded);
@ -164,6 +165,7 @@ const getRetailVolume = async (ticker) => {
const cachedData = getCache(ticker, 'getRetailVolume');
if (cachedData) {
rawData = cachedData;
historyData = rawData?.history;
} else {
const postData = {'ticker': ticker};
@ -177,11 +179,11 @@ const getRetailVolume = async (ticker) => {
});
rawData = await response.json();
historyData = rawData?.history;
// Cache the data for this specific tickerID with a specific name 'getRetailVolume'
setCache(ticker, rawData, 'getRetailVolume');
}
if(rawData?.length !== 0) {
if(Object?.keys(rawData)?.length !== 0) {
$retailVolumeComponent = true;
} else {
$retailVolumeComponent = false;
@ -216,11 +218,11 @@ $: {
<div class="flex flex-row items-center">
<label for="retailTraderTrackerInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
Retail Investor Volume
Retail Trader Volume
</label>
<InfoModal
title={"Retail Investor Volume"}
content={"Gain insights into retail investor activity with the following visualization: The green bar illustrates the daily volume trend, signifying a bullish sentiment if it ranges from 0 to 100, or bearish if it spans from -100 to just below 0. The white line depicts the daily trading volume of retail investors."}
title={"Retail Trader Volume"}
content={"Gain insights into Retail Trader activity with the following visualization: The green bar illustrates the daily volume trend, signifying a bullish sentiment if it ranges from 0 to 100, or bearish if it spans from -100 to just below 0. The white line depicts the daily trading volume of retail investors."}
id={"retailTraderTrackerInfo"}
/>
</div>
@ -228,7 +230,7 @@ $: {
{#if data?.user?.tier === 'Pro'}
{#if isLoaded}
{#if rawData?.length !== 0}
{#if Object?.keys(rawData)?.length !== 0}
<div class="w-full flex flex-col items-start">
<div class="text-white text-sm sm:text-[1rem] mt-2 mb-2 w-full">
@ -268,6 +270,9 @@ $: {
<h2 class="mt-10 mr-1 flex flex-row items-center text-white text-xl sm:text-2xl font-bold mb-3">
Latest Information
</h2>
<span class="text-white">
On {new Date(rawData?.lastDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}, retail traders accounted for <span class="font-semibold">{rawData?.retailStrength}%</span> of the trading volume.
</span>
<div class="flex justify-start items-center w-full m-auto mt-6 ">
<table class="w-full" data-test="statistics-table">
<tbody>
@ -276,7 +281,7 @@ $: {
<span>Date</span>
</td>
<td class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
{new Date(rawData?.slice(-1)?.at(0)?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
{new Date(rawData?.lastDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
@ -284,15 +289,15 @@ $: {
<span>Volume</span>
</td>
<td class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
{abbreviateNumber(rawData?.slice(-1)?.at(0)?.traded,true)}
{abbreviateNumber(rawData?.lastTrade,true)}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Retail Sentiment</span>
</td>
<td class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2 { rawData?.slice(-1)?.at(0)?.sentiment > 0 ? 'text-[#10DB06]' : 'text-[#E57C34]'} ">
{rawData?.slice(-1)?.at(0)?.sentiment > 0 ? rawData?.slice(-1)?.at(0)?.sentimentt+' '+'(Bullish)' : rawData?.slice(-1)?.at(0)?.sentiment+' '+'(Bearish)'}
<td class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2 { rawData?.lastSentiment >= 0 ? 'text-[#10DB06]' : 'text-[#E57C34]'} ">
{rawData?.lastSentiment >=0 ? rawData?.lastSentiment+' '+'(Bullish)' : rawData?.lastSentiment +' '+'(Bearish)'}
</td>
</tr>
</tbody>

BIN
src/lib/images/community_banner.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 61 KiB

4
src/lib/images/community_banner.jpg:Zone.Identifier Normal file
View File

@ -0,0 +1,4 @@
[ZoneTransfer]
ZoneId=3
ReferrerUrl=https://imagecompressor.com/
HostUrl=https://imagecompressor.com/download/2p41up112mm1rrc1/file_k4ogqo1j276r91pt3sd1kat1tt/community_banner-min.jpg

2
src/routes/+page.svelte
View File

@ -222,7 +222,7 @@ async function loadSearchData() {
<div class="flex flex-row justify-center items-center">
<h1 class="text-center text-4xl sm:text-4xl text-white font-bold mb-6 w-full">
<h1 class="text-center text-4xl sm:text-5xl text-white font-bold mb-6 w-full">
Your
<span class="text-[#9DED1E] italic">All-in-One</span>
Solution for

5
src/routes/community/+page.svelte
View File

@ -1,7 +1,7 @@
<script lang='ts'>
import { onMount,onDestroy } from 'svelte';
import { screenWidth, userRegion, discordMembers, twitchStatus, setCache, getCache, cachedPosts, currentPagePosition, numberOfUnreadNotification, postIdDeleted } from '$lib/store';
import { userRegion, discordMembers, setCache, getCache, cachedPosts, currentPagePosition, numberOfUnreadNotification, postIdDeleted } from '$lib/store';
import { afterNavigate } from '$app/navigation';
import { base } from '$app/paths'
@ -10,7 +10,6 @@
import SkeletonLoading from '$lib/components/SkeletonLoading.svelte';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
import communityBanner from '$lib/images/community_banner.jpg';
import { abbreviateNumber } from '$lib/utils';
export let data;
export let form;
@ -386,7 +385,7 @@ $: {
<main class="m-auto w-full max-w-3xl lg:max-w-6xl">
<!--Start Header-->
<div class="w-full max-w-6xl sm:rounded-2xl m-auto h-44 sm:h-60 bg-[#202020] bg-cover bg-center bg-no-repeat" style="background-image: url('{communityBanner}');" />
<div class="w-full max-w-6xl sm:rounded-2xl m-auto h-44 sm:h-60 shadow-sm shadow-black bg-center bg-cover bg-no-repeat" style="background-image: url('{communityBanner}');" />
<!--End Header-->

2
src/routes/community/create-post/+page.server.ts
View File

@ -208,7 +208,7 @@ export const actions = {
fit: sharp.fit.inside,
withoutEnlargement: true,
})
.jpeg({ quality: 50 })
.jpeg({ quality: 80 })
.toBuffer();
}