From 3e38fcbb2ba789c029ac4b08e0afffdac4314ff6 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Wed, 7 Aug 2024 18:05:08 +0200
Subject: [PATCH] ui fix

---
 src/lib/components/FundamentalAnalysis.svelte |   2 +-
 src/lib/components/KLineChart.svelte          |  59 +++++++++
 src/routes/market-mover/+page.svelte          | 124 +++++++++---------
 3 files changed, 123 insertions(+), 62 deletions(-)
 create mode 100644 src/lib/components/KLineChart.svelte

diff --git a/src/lib/components/FundamentalAnalysis.svelte b/src/lib/components/FundamentalAnalysis.svelte
index 2bea392b..a2a226d5 100644
--- a/src/lib/components/FundamentalAnalysis.svelte
+++ b/src/lib/components/FundamentalAnalysis.svelte
@@ -101,7 +101,7 @@ $: {
            
 
             <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-4 gap-y-3 gap-x-3 ">
                   <!--Start Flow Sentiment-->  
                   <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">
diff --git a/src/lib/components/KLineChart.svelte b/src/lib/components/KLineChart.svelte
new file mode 100644
index 00000000..8ed66953
--- /dev/null
+++ b/src/lib/components/KLineChart.svelte
@@ -0,0 +1,59 @@
+<script lang='ts'>
+import { onMount } from 'svelte';
+
+let chart;
+
+const options = {
+  grid: {
+    show: false,
+    horizontal: {
+      show: false,
+      size: 1,
+      color: '#EDEDED',
+      style: 'dashed',
+      dashedValue: [2, 2]
+    },
+    vertical: {
+      show: false,
+      size: 1,
+      color: '#EDEDED',
+      style: 'dashed',
+      dashedValue: [2, 2]
+    }
+  }
+};
+
+onMount(async () => {
+  const klinecharts = await import('klinecharts');
+  chart = klinecharts.init('k-line-chart', options);
+  chart.applyNewData(genData());
+});
+
+function genData(timestamp = new Date().getTime(), length = 800) {
+    let basePrice = 5000
+    timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000
+    const dataList = []
+    for (let i = 0; i < length; i++) {
+      const prices = []
+      for (let j = 0; j < 4; j++) {
+        prices.push(basePrice + Math.random() * 60 - 30)
+      }
+      prices.sort()
+      const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))
+      const high = +(prices[3].toFixed(2))
+      const low = +(prices[0].toFixed(2))
+      const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))
+      const volume = Math.round(Math.random() * 100) + 10
+      const turnover = (open + high + low + close) / 4 * volume
+      dataList.push({ timestamp, open, high, low, close, volume, turnover })
+ 
+      basePrice = close
+      timestamp += 60 * 1000
+    }
+    return dataList
+}
+
+</script>
+
+    
+    <div id="k-line-chart" style="height:430px"/>
\ No newline at end of file
diff --git a/src/routes/market-mover/+page.svelte b/src/routes/market-mover/+page.svelte
index 9a09a4af..d40df90b 100644
--- a/src/routes/market-mover/+page.svelte
+++ b/src/routes/market-mover/+page.svelte
@@ -176,15 +176,15 @@ function selectTimeInterval(interval) {
     }
   }
 
-let charNumber = 50;
+let charNumber = 30;
 
 $: {
   if($screenWidth < 640)
   {
-    charNumber = 20;
+    charNumber = 15;
   }
   else {
-    charNumber =50;
+    charNumber =30;
   }
 }
 
@@ -311,8 +311,8 @@ $: {
       
 
         
-      <div class="flex justify-start items-center mb-10 w-full">
-        <label for="timePeriodModal" class="pl-3  cursor-pointer bg-[#09090B] flex flex-row items-center">
+      <div class="pl-2 sm:pl-0 flex justify-start items-center mb-10 w-full">
+        <label for="timePeriodModal" class="px-4 py-3 rounded-lg cursor-pointer bg-[#27272A] flex flex-row items-center">
           <span class="text-white text-sm sm:text-md mr-2">
             Time Period: 
           </span>
@@ -336,69 +336,71 @@ $: {
     
 
 
-     
-    <table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]">
-      <thead>
-        <tr>
-          <th class="text-white font-bold text-sm">Company</th>
-          <th class="text-white font-bold text-sm {$screenWidth < 640 && displaySection === 'active' ? 'hidden' : ''}">Market Cap</th>
-          <th class="text-white font-bold text-sm {$screenWidth < 640 && displaySection !== 'active' ? 'hidden' : ''}">Volume</th>
-          <th class="text-white font-bold text-end text-sm">Today</th>
-        </tr>
-      </thead>
-      <tbody>
-        {#each gainerLoserActive as item, index}
-        <tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] cursor-pointer">
+    <div class="w-full overflow-x-scroll no-scrollbar">
+      <table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]">
+        <thead>
+          <tr>
+            <th class="text-white font-bold text-sm">Company</th>
+            <th on:click={() => console.log('mkt')} class="text-white font-bold text-sm text-end">Market Cap</th>
+            <th class="text-white font-bold text-sm text-end ">Volume</th>
+            <th class="text-white font-bold text-end text-sm">Today</th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each gainerLoserActive as item, index}
+          <tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] cursor-pointer">
+    
+          <td class="border-b-[#09090B]">
+            <div class="flex flex-col">
+              <span class="text-blue-400 font-medium">
+                {item?.symbol}
+              </span>
+              <span class="hidden sm:block text-white text-opacity-[0.8] font-medium border-b-[#09090B]">
+                {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
+              </span>
+            </div>
+          </td>
+
   
-        <td class="border-b-[#09090B]">
-          <div class="flex flex-col">
-            <span class="text-blue-400 font-medium">
-              {item?.symbol}
-            </span>
-            <span class="text-white text-opacity-[0.8] font-medium border-b-[#09090B]">
-              {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
-            </span>
+
+          <td class="text-white font-medium border-b-[#09090B] text-end">
+            {item?.marketCap !== null ? abbreviateNumber(item?.marketCap, true) : '-'}
+          </td>
+
+          <td class="text-white font-medium border-b-[#09090B] text-end">
+            {item?.volume !== null ? abbreviateNumber(item?.volume) : '-'}
+          </td>
+
+
+
+          <td class="text-white font-medium border-b-[#09090B]">
+            <div class="flex flex-row justify-end items-center">
+
+              <div class="flex flex-col items-center">
+                <span class="text-white font-medium text-md ml-auto">${item.price?.toFixed(2)}</span>
+                <div class="flex flex-row mt-1">
+                  {#if item?.changesPercentage >=0}
+                    <svg class="w-5 h-5 -mr-0.5 -mt-0.5" 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">+{item?.changesPercentage >= 1000 ? abbreviateNumber(item?.changesPercentage) : item?.changesPercentage?.toFixed(2)}%</span>
+                  {:else}
+                    <svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180" 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">{item?.changesPercentage <= -1000 ? abbreviateNumber(item?.changesPercentage) : item?.changesPercentage?.toFixed(2)}% </span> 
+                  {/if}
+                </div>
+              </div>
+
+              
           </div>
         </td>
 
- 
-
-        <td class="text-white font-medium border-b-[#09090B] {$screenWidth < 640 && displaySection === 'active' ? 'hidden' : ''}">
-          {item?.marketCap !== null ? abbreviateNumber(item?.marketCap, true) : '-'}
-        </td>
-
-        <td class="text-white font-medium border-b-[#09090B] {$screenWidth < 640 && displaySection !== 'active' ? 'hidden' : ''}">
-          {item?.volume !== null ? abbreviateNumber(item?.volume) : '-'}
-        </td>
 
 
+          </tr>
+          {/each}
+        </tbody>
+      </table>
 
-        <td class="text-white font-medium border-b-[#09090B]">
-          <div class="flex flex-row justify-end items-center">
-
-            <div class="flex flex-col items-center">
-              <span class="text-white font-medium text-md ml-auto">${item.price?.toFixed(2)}</span>
-              <div class="flex flex-row mt-1">
-                {#if item?.changesPercentage >=0}
-                  <svg class="w-5 h-5 -mr-0.5 -mt-0.5" 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">+{item?.changesPercentage >= 1000 ? abbreviateNumber(item?.changesPercentage) : item?.changesPercentage?.toFixed(2)}%</span>
-                {:else}
-                  <svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180" 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">{item?.changesPercentage <= -1000 ? abbreviateNumber(item?.changesPercentage) : item?.changesPercentage?.toFixed(2)}% </span> 
-                {/if}
-              </div>
-            </div>
-
-            
-        </div>
-      </td>
-
-
-
-        </tr>
-        {/each}
-      </tbody>
-    </table>
+    </div>