This commit is contained in:
MuslemRahimi 2024-08-17 23:28:03 +02:00
parent 8332672a1f
commit 62e827f2df

View File

@ -10,9 +10,9 @@
import { init, use } from 'echarts/core' import { init, use } from 'echarts/core'
import { BarChart } from 'echarts/charts' import { BarChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components' import { GridComponent, TooltipComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers' import { CanvasRenderer } from 'echarts/renderers'
use([BarChart, GridComponent, CanvasRenderer]) use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
import { onMount } from 'svelte'; import { onMount } from 'svelte';
@ -130,6 +130,11 @@ use([BarChart, GridComponent, CanvasRenderer])
const option = { const option = {
silent: true, silent: true,
animation: false,
tooltip: {
trigger: 'axis',
hideDelay: 100, // Set the delay in milliseconds
},
grid: { grid: {
left: $screenWidth < 640 ? '5.2%' : '0.5%', left: $screenWidth < 640 ? '5.2%' : '0.5%',
right: $screenWidth < 640 ? '5%' : '0.5%', right: $screenWidth < 640 ? '5%' : '0.5%',
@ -167,6 +172,7 @@ use([BarChart, GridComponent, CanvasRenderer])
], ],
series: [ series: [
{ {
name: 'Bought',
data: boughtList, data: boughtList,
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {
@ -176,6 +182,7 @@ use([BarChart, GridComponent, CanvasRenderer])
}, },
{ {
name: 'Sold',
data: soldList, data: soldList,
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {
@ -283,14 +290,14 @@ use([BarChart, GridComponent, CanvasRenderer])
<div class="flex flex-row justify-between items-center w-full px-10 pb-4"> <div class="flex flex-row justify-between items-center w-full px-10 pb-4">
<label class="cursor-pointer flex flex-col items-center"> <label class="cursor-pointer flex flex-col items-center">
<span class="text-white text-[1rem] font-semibold">{abbreviateNumber(numOfTrades)}</span> <span class="text-white text-[1rem] font-semibold">{abbreviateNumber(numOfTrades)}</span>
<span class="text-slate-300 font-medium text-sm">Total Trades</span> <span class="text-slate-300 font-medium text-[1rem]">Total Trades</span>
</label> </label>
<div class="flex flex-col items-center "> <div class="flex flex-col items-center ">
<span class="text-white text-[1rem] font-semibold"> <span class="text-white text-[1rem] font-semibold">
{lastTradedDate?.length !== undefined ? new Date(lastTradedDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'} {lastTradedDate?.length !== undefined ? new Date(lastTradedDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}
</span> </span>
<span class="text-slate-300 font-medium text-sm">Last Traded</span> <span class="text-slate-300 font-medium text-[1rem]">Last Traded</span>
</div> </div>
</div> </div>