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-29 21:54:27 +01:00
parent a25d06cc2b
commit c7c229ce71
2 changed files with 43 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/lib/components/DarkPool/HottestTrades.svelte
View File

@ -5,63 +5,7 @@
import { abbreviateNumberWithColor } from "$lib/utils";
export let rawData = [
{
date: "2024-12-27T17:52:33Z",
price: 31.89,
size: 14526,
volume: 6937280.0,
premium: "463232.6874",
sizeVolRatio: 0.21,
sizeAvgVolRatio: 0.14,
trackingID: 46353769264496,
rank: 1,
},
{
date: "2024-12-27T17:52:33Z",
price: 31.89,
size: 14526,
volume: 6937280.0,
premium: "463232.6874",
sizeVolRatio: 0.21,
sizeAvgVolRatio: 0.14,
trackingID: 46353769264496,
rank: 2,
},
{
date: "2024-12-27T18:03:31Z",
price: 32.0,
size: 12198,
volume: 7146904.0,
premium: "390336",
sizeVolRatio: 0.17,
sizeAvgVolRatio: 0.12,
trackingID: 47011633532241,
rank: 3,
},
{
date: "2024-12-27T18:03:31Z",
price: 32.0,
size: 12198,
volume: 7146904.0,
premium: "390336",
sizeVolRatio: 0.17,
sizeAvgVolRatio: 0.12,
trackingID: 47011633532241,
rank: 4,
},
{
date: "2024-12-27T20:00:53Z",
price: 31.78,
size: 7345,
volume: 8220987.0,
premium: "233424.10",
sizeVolRatio: 0.09,
sizeAvgVolRatio: 0.07,
trackingID: 54053503366366,
rank: 5,
},
];
export let rawData = [];
let stockList = [];
let isLoaded = false;

71
src/routes/stocks/[tickerID]/dark-pool/+page.svelte
View File

@ -9,9 +9,17 @@
import InfoModal from "$lib/components/InfoModal.svelte";
import Infobox from "$lib/components/Infobox.svelte";
import HottestTrades from "$lib/components/DarkPool/HottestTrades.svelte";
import { onMount } from "svelte";
export let data;
let historicalDarkPool = data?.getHistoricalDarkPool || [];
let priceLevel = data?.getPriceLevel?.priceLevel || [];
let hottestTrades = data?.getPriceLevel?.hottestTrades || [];
let isLoaded = false;
onMount(() => {
isLoaded = true;
});
</script>
<svelte:head>
@ -70,37 +78,42 @@
id={"darkPoolInfo"}
/>
</div>
<Infobox
text="Track the Dark Pool Trades of major whales to monitor hidden trading activity and trends."
/>
{#if priceLevel?.length === 0 && hottestTrades?.length === 0 && historicalDarkPool?.length === 0}
<Infobox
text={`No Dark Pool activity are detected for ${$displayCompanyName}`}
/>
{:else}
<Infobox
text="Track the Dark Pool Trades of major whales to monitor hidden trading activity and trends."
/>
{/if}
</div>
<PriceLevel
rawData={data?.getPriceLevel?.priceLevel}
metrics={data?.getPriceLevel?.metrics}
/>
<HottestTrades rawData={data?.getPriceLevel?.hottestTrades} />
<HistoricalVolume rawData={historicalDarkPool} />
{#if isLoaded}
{#if priceLevel?.length > 0}
<PriceLevel
rawData={priceLevel}
metrics={data?.getPriceLevel?.metrics}
/>
{/if}
{#if hottestTrades?.length > 0}
<HottestTrades rawData={hottestTrades} />
{/if}
{#if historicalDarkPool?.length > 0}
<HistoricalVolume rawData={historicalDarkPool} />
{/if}
{:else}
<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"
>
<span class="loading loading-spinner loading-md text-gray-400"
></span>
</label>
</div>
</div>
{/if}
</div>
</div>
</div>
</section>
<style>
.app {
height: 400px;
width: 100%;
}
@media (max-width: 560px) {
.app {
width: 100%;
height: 300px;
}
}
.chart {
width: 100%;
}
</style>