From 643c6ba84be751a91196eab8611d7f965597dd33 Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Wed, 28 Aug 2024 12:21:25 +0200 Subject: [PATCH] adjust miniplot and add sidebar to market mover && watchlist page --- src/lib/components/MiniPlot.svelte | 2 +- src/routes/market-mover/+page.svelte | 112 ++++++++++++++++++++++----- src/routes/watchlist/+page.svelte | 90 +++++++++++++++++++-- 3 files changed, 178 insertions(+), 26 deletions(-) diff --git a/src/lib/components/MiniPlot.svelte b/src/lib/components/MiniPlot.svelte index 496b80ba..2c00bbed 100644 --- a/src/lib/components/MiniPlot.svelte +++ b/src/lib/components/MiniPlot.svelte @@ -15,7 +15,7 @@ const bottomLineColor = '#FF7070'; const bottomFillColor1 = 'rgba(239, 83, 80, 0.2)'; - let width = $screenWidth < 640 ? 80 : $screenWidth < 1200 ? 150 : 180 //= ($screenWidth <= 1200 && $screenWidth > 900) ? 360 : ($screenWidth <= 900 && $screenWidth > 700) ? 260 : ($screenWidth <= 700 && $screenWidth >=600 ) ? 200 : ($screenWidth < 600 && $screenWidth >=500 ) ? 150 : 80; + let width = $screenWidth < 640 ? 80 : $screenWidth < 1500 ? 150 : 220 //= ($screenWidth <= 1200 && $screenWidth > 900) ? 360 : ($screenWidth <= 900 && $screenWidth > 700) ? 260 : ($screenWidth <= 700 && $screenWidth >=600 ) ? 200 : ($screenWidth < 600 && $screenWidth >=500 ) ? 150 : 80; //Initial height of graph diff --git a/src/routes/market-mover/+page.svelte b/src/routes/market-mover/+page.svelte index fe719db0..12611f59 100644 --- a/src/routes/market-mover/+page.svelte +++ b/src/routes/market-mover/+page.svelte @@ -4,9 +4,11 @@ import { screenWidth, numberOfUnreadNotification } from '$lib/store'; import logo from '$lib/images/top_winner_logo.png'; import { abbreviateNumber } from '$lib/utils'; import MiniPlot from '$lib/components/MiniPlot.svelte'; +import { onMount } from 'svelte'; +import ArrowLogo from "lucide-svelte/icons/move-up-right"; export let data; - +let isLoaded = false; const rawData = data?.getMiniPlotsIndex; let priceDataSP500; @@ -191,6 +193,9 @@ function selectTimeInterval(interval) { } +onMount( () => { + isLoaded = true; +}) $: { if(order) @@ -246,22 +251,26 @@ $: charNumber = $screenWidth < 640 ? 20 : 30; -
- - +
+
    -
  • Home
    • -
  • - Market Movers -
    • +
  • Home
    • +
  • Market Movers
+ +
+ +
+
+
-
-
+ +
+
@@ -304,12 +313,14 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
+ {#if isLoaded} +
Stock Indexes - {getCurrentDateFormatted()}
-
+
@@ -433,16 +444,77 @@ $: charNumber = $screenWidth < 640 ? 20 : 30; - -
+ {:else} +
+
+ +
+
+ + {/if} + + +
+ + + + +
+
+ + +
+
@@ -451,6 +523,8 @@ $: charNumber = $screenWidth < 640 ? 20 : 30; + + diff --git a/src/routes/watchlist/+page.svelte b/src/routes/watchlist/+page.svelte index 0ccec118..672981e5 100644 --- a/src/routes/watchlist/+page.svelte +++ b/src/routes/watchlist/+page.svelte @@ -9,6 +9,8 @@ import Input from '$lib/components/Input.svelte'; import WatchListCard from '$lib/components/WatchListCard.svelte'; import {screenWidth, switchWatchList } from '$lib/store'; import MiniPlot from '$lib/components/MiniPlot.svelte'; +import { goto } from '$app/navigation'; +import ArrowLogo from "lucide-svelte/icons/move-up-right"; let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; @@ -389,11 +391,26 @@ onDestroy( () => { -
+
+ +
+
    +
  • Home
    • +
  • Watchlist
    • +
+
+ +
- -
-
+
+
+ + +
+ + +
+
@@ -441,7 +458,7 @@ onDestroy( () => {
-
+
@@ -534,7 +551,68 @@ onDestroy( () => { {/if} -
+ + + + + + + + + + + + + + +
+