remove unnecessary components && ui fixes
This commit is contained in:
MuslemRahimi
parent
7f55db6ea1
commit
a6771db026
@ -424,7 +424,7 @@ $: {
|
||||
<a href={"/community/post/"+posts?.id}>
|
||||
{#if posts?.postType === 'text'}
|
||||
<!--Start PostType Text-->
|
||||
<div class="flex flex-wrap md:flex-row">
|
||||
<div class="flex flex-wrap md:flex-row container">
|
||||
<div class="cursor-pointer flex items-start">
|
||||
<div class="flex-grow w-full sm:w-3/4 max-w-2xl break-all">
|
||||
|
||||
@ -434,8 +434,8 @@ $: {
|
||||
</div>
|
||||
|
||||
|
||||
<div class="p-3 text-sm sm:text-[1rem] whitespace-pre-line break-normal text-[#D7DADC]">
|
||||
{@html posts?.description?.length > 400 ? posts?.description.slice(0, 400) + "..." : posts?.description}
|
||||
<div class="{posts?.description?.length > 400 ? 'darken-overlay' : ''} p-3 text-sm sm:text-[1rem] whitespace-pre-line break-normal text-[#D7DADC]">
|
||||
{@html posts?.description}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -676,4 +676,22 @@ $: {
|
||||
</div>
|
||||
</dialog>
|
||||
<!--End Delete Modal-->
|
||||
|
||||
|
||||
<style>
|
||||
.container {
|
||||
position: relative; /* Ensure relative positioning for the gradient overlay */
|
||||
overflow: hidden; /* To ensure the gradient does not overflow */
|
||||
max-height: 330px; /* Limit the container's height */
|
||||
}
|
||||
|
||||
.darken-overlay::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 50px; /* Adjust as needed for the gradient effect */
|
||||
background: linear-gradient(0deg, rgb(32, 32, 32, 1), rgb(32, 32, 32, 0)); /* Smooth gradient transition */
|
||||
pointer-events: none; /* Ensure it doesn't interfere with text interaction */
|
||||
}
|
||||
</style>
|
||||
@ -1,513 +0,0 @@
|
||||
<script lang="ts">
|
||||
import {stockTicker, etfTicker} from '$lib/store';
|
||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||
import Lazy from 'svelte-lazy';
|
||||
import { Chart } from 'svelte-echarts'
|
||||
|
||||
export let pricePrediction;
|
||||
export let pastPriceList;
|
||||
export let lastPrice;
|
||||
export let assetType;
|
||||
|
||||
|
||||
|
||||
let mode:boolean;
|
||||
let optionsPrediction;
|
||||
let rawData;
|
||||
|
||||
let timePeriod = '1W'
|
||||
let timeFrame = 7;
|
||||
|
||||
function selectTimeInterval(interval) {
|
||||
timePeriod = interval;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let lowPrice;
|
||||
let meanPrice;
|
||||
let highPrice;
|
||||
let changeMin;
|
||||
//let changeMean = ((meanPrice/lastPrice -1)*100) ?? 'n/a'
|
||||
let changeMax;
|
||||
|
||||
let changeMean;
|
||||
|
||||
|
||||
|
||||
const plotPredictionChart = () => {
|
||||
|
||||
if (typeof rawData !== 'undefined')
|
||||
{
|
||||
|
||||
|
||||
const pastDates = rawData.map(item => item.time);
|
||||
const pastPriceData = rawData.map(item => item.close);
|
||||
const nullList = Array.from({ length: pastPriceData.length -1}, () => null);
|
||||
|
||||
|
||||
|
||||
const startDate = new Date(pastDates?.slice(-1));
|
||||
const futureDates = [];
|
||||
|
||||
for (let i = 0; i < timeFrame; i++) {
|
||||
const date = new Date(startDate);
|
||||
date.setDate(startDate.getDate() + i);
|
||||
const year = date.getFullYear();
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
const day = date.getDate().toString().padStart(2, '0');
|
||||
const formattedDate = `${year}-${month}-${day}`;
|
||||
futureDates.push(formattedDate);
|
||||
}
|
||||
const futureNullList = Array.from({ length: futureDates.length -2}, () => null);
|
||||
|
||||
const dates = [...new Set([...pastDates, ...futureDates]) ];
|
||||
|
||||
const options = {
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
top: '10%',
|
||||
bottom: '10%',
|
||||
containLabel: true,
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
// prettier-ignore
|
||||
data: dates,
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
scale: true,
|
||||
splitLine: {
|
||||
show: false, // Disable y-axis grid lines
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '${value}', // Display value with a percent sign
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Past Price',
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
color: 'white', // Set the color to green
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
},
|
||||
smooth: true,
|
||||
// prettier-ignore
|
||||
data: pastPriceData,
|
||||
},
|
||||
{
|
||||
name: 'Average',
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
color: 'orange' // Set the color to green
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1.5,
|
||||
type: 'dashed',
|
||||
},
|
||||
smooth: true,
|
||||
connectNulls: true, // Connect null data points
|
||||
// prettier-ignore
|
||||
data: [...nullList, pastPriceData?.at(-1), ...futureNullList, meanPrice],
|
||||
markArea: {
|
||||
itemStyle: {
|
||||
color: 'rgb(31, 31, 35, 1)'
|
||||
},
|
||||
data: [
|
||||
[
|
||||
{
|
||||
name: '',
|
||||
xAxis: pastDates?.at(-1),
|
||||
},
|
||||
{
|
||||
xAxis: futureDates?.at(-1),
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'High',
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
color: 'green',
|
||||
width: 1.5,
|
||||
type: 'dashed',
|
||||
},
|
||||
smooth: true,
|
||||
connectNulls: true, // Connect null data points
|
||||
// prettier-ignore
|
||||
data: [...nullList, pastPriceData?.at(-1), ...futureNullList, highPrice],
|
||||
},
|
||||
{
|
||||
name: 'Low',
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
color: 'red',
|
||||
width: 1.5,
|
||||
type: 'dashed',
|
||||
},
|
||||
smooth: true,
|
||||
connectNulls: true, // Connect null data points
|
||||
// prettier-ignore
|
||||
data: [...nullList, pastPriceData?.at(-1), ...futureNullList, lowPrice],
|
||||
},
|
||||
],
|
||||
|
||||
};
|
||||
|
||||
return options;
|
||||
}
|
||||
|
||||
else {
|
||||
return {};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
$: {
|
||||
if ((assetType === 'stock' ? $stockTicker : $etfTicker ) && typeof window !== 'undefined' && typeof pricePrediction !== 'undefined' && typeof pastPriceList !== 'undefined')
|
||||
{
|
||||
mode = false;
|
||||
if (timePeriod === '3M')
|
||||
{
|
||||
rawData = pastPriceList['6M']?.slice(-80,-1);
|
||||
timeFrame = 90;
|
||||
}
|
||||
else if (timePeriod === '1W')
|
||||
{
|
||||
rawData = pastPriceList['6M']?.slice(-10);
|
||||
timeFrame = 7;
|
||||
}
|
||||
else if (timePeriod === '1M')
|
||||
{
|
||||
rawData = pastPriceList['6M']?.slice(-20,-1);
|
||||
timeFrame = 30;
|
||||
}
|
||||
else if (timePeriod === '6M')
|
||||
{
|
||||
rawData = pastPriceList['1Y'];
|
||||
timeFrame = 180;
|
||||
}
|
||||
|
||||
|
||||
lowPrice = pricePrediction[timePeriod]['min'] ?? 'n/a';
|
||||
meanPrice = pricePrediction[timePeriod]['mean'] ?? 'n/a'
|
||||
highPrice = pricePrediction[timePeriod]['max'] ?? 'n/a'
|
||||
changeMin = ((lowPrice/lastPrice -1)*100) ?? 'n/a'
|
||||
//changeMean = ((meanPrice/lastPrice -1)*100) ?? 'n/a'
|
||||
changeMax = ((highPrice/lastPrice -1)*100) ?? 'n/a'
|
||||
|
||||
changeMean = ((changeMax+changeMin)/2) ?? 'n/a';
|
||||
|
||||
optionsPrediction = plotPredictionChart()
|
||||
|
||||
mode = true;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<!--Start Copilot Card -->
|
||||
|
||||
<div class="space-y-3 overflow-hidden">
|
||||
<!--Start Content-->
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto">
|
||||
|
||||
<div class="flex flex-col items-center w-full mb-6">
|
||||
<div class="flex flex-row justify-start mr-auto items-center">
|
||||
<!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
|
||||
<div class="flex flex-row items-center">
|
||||
<label for="pricePredictionInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
|
||||
Price Prediction
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Price Prediction"}
|
||||
content={`The Algorithm forecasts the price for various time periods such as one week, one month, three months, and six months using historical data and various machine-learning techniques.`}
|
||||
id={"pricePredictionInfo"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<p class="text-white text-md">
|
||||
Expect prices between ${lowPrice?.toFixed(2)} and ${highPrice?.toFixed(2)} for the next {timePeriod === '1W' ? '7 days' : timePeriod === '1M' ? '1 month' : timePeriod === '3M' ? '3 months' : timePeriod === '6M' ? '6 months' : 'n/a'}.
|
||||
</p>
|
||||
-->
|
||||
<div class="flex flex-row items-center sm:mt-3 mb-5">
|
||||
|
||||
<span class="text-white text-md font-medium">
|
||||
Time Period
|
||||
</span>
|
||||
<div class="ml-auto text-white rounded">
|
||||
|
||||
|
||||
<label for="timePeriodModal" class="pl-3 pr-3 py-1 text-sm sm:text-sm cursor-pointer mr-1 flex flex-row ease-in-out duration-200 rounded-lg bg-[#1E1E1E] hover:bg-[#333333] normal-case cursor-pointer items-center">
|
||||
<div class="flex flex-row">
|
||||
<span class="m-auto mr-1 text-white">{timePeriod}</span>
|
||||
<svg class="inline-block w-4 h-4 ml-1 mt-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
||||
<g transform="rotate(180 512 512)">
|
||||
<path fill="#fff" d="m488.832 344.32l-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872l319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{#if mode}
|
||||
|
||||
<div class="text-white flex flex-row items-center justify-between w-full font-medium text-md text-center mt-3">
|
||||
<span class="text-white text-sm m-auto">
|
||||
Past Price
|
||||
</span>
|
||||
<span class="text-white text-end text-sm">
|
||||
Future Price
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
|
||||
<div class="app w-[90vw] sm:w-[50vw] m-auto mb-5">
|
||||
<Chart options={optionsPrediction} class="chart w-full" />
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<p class="text-white text-md mb-5">
|
||||
You can anticipate future returns in the next {timePeriod === '1W' ? '7 days' : timePeriod === '1M' ? '1 month' : timePeriod === '3M' ? '3 months' : timePeriod === '6M' ? '6 months' : 'n/a'}, based on the last price, with a 68% confidence level.
|
||||
</p>
|
||||
|
||||
<table class="table table-pin-rows table-sm table-compact w-full mb-5">
|
||||
<!-- head -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-white text-sm font-medium bg-[#0F0F0F] shadow-md">Target</th>
|
||||
<th class="text-white text-sm font-medium bg-[#0F0F0F] shadow-md">Lowest</th>
|
||||
<th class="text-white text-sm font-medium bg-[#0F0F0F] shadow-md">Average</th>
|
||||
<th class="text-white text-sm font-medium bg-[#0F0F0F] shadow-md">Highest</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="">
|
||||
<td class="text-white border-b border-[#0F0F0F]">
|
||||
<span class="text-white font-medium">Price</span>
|
||||
</td>
|
||||
<td class="text-white sm:font-medium text-[0.95rem] border-b border-[#0F0F0F]">
|
||||
${lowPrice?.toFixed(2)}
|
||||
</td>
|
||||
<td class="text-white sm:font-medium text-[0.95rem] border-b border-[#0F0F0F]">
|
||||
${meanPrice?.toFixed(2)}
|
||||
</td>
|
||||
<td class="text-white sm:font-medium text-[0.95rem] border-b border-[#0F0F0F]">
|
||||
${highPrice?.toFixed(2)}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="border-[#0F0F0F]">
|
||||
<td class="text-white">
|
||||
<span class="text-white sm:font-medium">Change</span>
|
||||
</td>
|
||||
<td class="text-white">
|
||||
<div class="flex flex-row items-center">
|
||||
{#if changeMin >= 0}
|
||||
<svg class="w-2.5 h-2.5 hidden sm:inline-block mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path fill="#10DB06" d="M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19z"/></g></svg>
|
||||
<span class="text-[#10DB06] sm:font-medium sm:text-[0.95rem]">+{changeMin?.toFixed(2)}%</span>
|
||||
{:else if changeMin < 0}
|
||||
<svg class="w-2.5 h-2.5 hidden sm:inline-block mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(180 12 12)"><path fill="#FF0000" d="M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19z"/></g></svg>
|
||||
<span class="text-[#FF2F1F] sm:font-medium text-[0.95rem]">{changeMin?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-gray-300 sm:font-medium text-[0.95rem] m-auto pr-2">n/a</span>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-white">
|
||||
<div class="flex flex-row items-center ">
|
||||
{#if changeMean >= 0}
|
||||
<svg class="w-2.5 h-2.5 hidden sm:inline-block mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path fill="#10DB06" d="M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19z"/></g></svg>
|
||||
<span class="text-[#10DB06] sm:font-medium text-[0.95rem]">+{changeMean?.toFixed(2)}%</span>
|
||||
{:else if changeMean < 0}
|
||||
<svg class="w-2.5 h-2.5 hidden sm:inline-block mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(180 12 12)"><path fill="#FF0000" d="M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19z"/></g></svg>
|
||||
<span class="text-[#FF2F1F] sm:font-medium text-[0.95rem]">{changeMean?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-gray-300 sm:font-medium text-[0.95rem] m-auto pr-2">n/a</span>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-white">
|
||||
<div class="flex flex-row items-center">
|
||||
{#if changeMax >= 0}
|
||||
<svg class="w-2.5 h-2.5 hidden sm:inline-block mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path fill="#10DB06" d="M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19z"/></g></svg>
|
||||
<span class="text-[#10DB06] sm:font-medium text-[0.95rem]">+{changeMax?.toFixed(2)}%</span>
|
||||
{:else if changeMax < 0}
|
||||
<svg class="w-2.5 h-2.5 hidden sm:inline-block mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(180 12 12)"><path fill="#FF0000" d="M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19z"/></g></svg>
|
||||
<span class="text-[#FF2F1F] sm:font-medium text-[0.95rem]">{changeMax?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-gray-300 sm:font-medium text-[0.95rem] m-auto pr-2">n/a</span>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--End Copilot Card-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--Start Time Period Modal-->
|
||||
<input type="checkbox" id="timePeriodModal" class="modal-toggle" />
|
||||
|
||||
<dialog id="timePeriodModal" class="modal modal-bottom sm:modal-middle">
|
||||
|
||||
|
||||
<label id="timePeriodModal" for="timePeriodModal" class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"></label>
|
||||
|
||||
|
||||
<div class="modal-box w-full bg-[#191919] flex flex-col items-center">
|
||||
<div class="mx-auto mb-8 h-1.5 w-20 flex-shrink-0 rounded-full bg-[#404040]" />
|
||||
|
||||
|
||||
|
||||
<div class="text-white w-full">
|
||||
<h3 class="font-medium text-lg sm:text-xl mb-6 ml-2">
|
||||
Forecast Time Period
|
||||
</h3>
|
||||
|
||||
|
||||
<div class="flex flex-col items-center w-full max-w-3xl bg-[#191919]">
|
||||
|
||||
|
||||
<label for="timePeriodModal" on:click={() => selectTimeInterval('1W')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
||||
|
||||
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {timePeriod === '1W' ? 'ring-2 ring-[#04E000]' : ''}">
|
||||
|
||||
<span class="ml-1 text-white font-medium mr-auto">
|
||||
1 Week
|
||||
</span>
|
||||
|
||||
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
||||
{#if timePeriod === '1W'}
|
||||
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#0F0F0F000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</label>
|
||||
|
||||
|
||||
<label for="timePeriodModal" on:click={() => selectTimeInterval('1M')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
||||
|
||||
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {timePeriod === '1M' ? 'ring-2 ring-[#04E000]' : ''}">
|
||||
|
||||
<span class="ml-1 text-white font-medium mr-auto">
|
||||
1 Month
|
||||
</span>
|
||||
|
||||
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
||||
{#if timePeriod === '1M'}
|
||||
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#0F0F0F000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</label>
|
||||
|
||||
|
||||
|
||||
|
||||
<label for="timePeriodModal" on:click={() => selectTimeInterval('3M')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
||||
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {timePeriod === '3M' ? 'ring-2 ring-[#04E000]' : ''}">
|
||||
<span class="ml-1 text-white font-medium mr-auto">
|
||||
3 Months
|
||||
</span>
|
||||
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
||||
{#if timePeriod === '3M'}
|
||||
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#0F0F0F000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label for="timePeriodModal" on:click={() => selectTimeInterval('6M')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
||||
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {timePeriod === '6M' ? 'ring-2 ring-[#04E000]' : ''}">
|
||||
<span class="ml-1 text-white font-medium mr-auto">
|
||||
6 Months
|
||||
</span>
|
||||
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
||||
{#if timePeriod === '6M'}
|
||||
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#0F0F0F000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</label>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</dialog>
|
||||
<!--End Time Period Modal-->
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.app {
|
||||
height: 300px;
|
||||
max-width: 100%; /* Ensure chart width doesn't exceed the container */
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.app {
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,243 +0,0 @@
|
||||
<script lang='ts'>
|
||||
|
||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||
|
||||
export let modelStats = {};
|
||||
let showFullStats = false;
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<section class="overflow-hidden">
|
||||
|
||||
<main>
|
||||
{#if Object?.keys(modelStats)?.length !== 0}
|
||||
|
||||
<div class="flex flex-row items-center">
|
||||
<label for="tradingModelInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-medium">
|
||||
Trading Algorithm
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Trading Algorithm"}
|
||||
content={`The AI Trading Model uses historical data and technical indicators to generate optimal buy and sell signals for maximizing profits.`}
|
||||
id={"tradingModelInfo"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="text-white text-[1rem] sm:text-lg mt-3 mb-8 text-start">
|
||||
The Algorithm signals a
|
||||
{#if modelStats['nextSignal'] === 'Buy'}
|
||||
<span class="text-[#10DB06] sm:font-medium">
|
||||
<svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="#10db06" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"><path d="m3 17l6-6l4 4l8-8"/><path d="M17 7h4v4"/></g></svg>
|
||||
{modelStats['nextSignal']}
|
||||
</span>
|
||||
|
||||
{:else if modelStats['nextSignal'] === 'Hold'}
|
||||
<span class="text-[#E57C34] sm:font-medium">
|
||||
<svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#e57c34" d="m22 12l-4-4v3H3v2h15v3l4-4Z"/></svg>
|
||||
{modelStats['nextSignal']}.
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F] sm:font-medium">
|
||||
<svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#ff2f1f" d="M244 136v64a12 12 0 0 1-12 12h-64a12 12 0 0 1 0-24h35l-67-67l-31.51 31.52a12 12 0 0 1-17 0l-72-72a12 12 0 0 1 17-17L96 127l31.51-31.52a12 12 0 0 1 17 0L220 171v-35a12 12 0 0 1 24 0Z"/></svg>
|
||||
{modelStats['nextSignal']}.
|
||||
</span>
|
||||
{/if}
|
||||
<br>
|
||||
<span class="text-gray-300 text-xs sm:text-sm italic">
|
||||
For past performance on historical data see Backtesting result.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-start">
|
||||
|
||||
<div class="flex flex-row items-center">
|
||||
<label for="backtestingInfo" class="cursor-pointer flex flex-row items-center text-gray-200 text-lg sm:text-lg font-medium">
|
||||
Backtesting
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Backtesting"}
|
||||
content={`Backtesting is the process of evaluating the performance of a trading strategy by applying it to historical market data to see how it would have performed in the past.`}
|
||||
id={"backtestingInfo"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<table class="table table-pin-rows table-sm table-compact mt-3 mb-5">
|
||||
<tbody>
|
||||
<!-- row 1 -->
|
||||
<tr class="text-white ">
|
||||
<td class="text-start bg-[#0F0F0F] border-b border-[#0F0F0F] text-xs sm:text-sm sm:font-medium">
|
||||
Total Return
|
||||
</td>
|
||||
<td class="tex-white bg-[#0F0F0F] border-b border-[#0F0F0F] sm:font-medium">
|
||||
<div class="flex flex-row items-center ">
|
||||
{#if modelStats['Return [%]'] >= 0}
|
||||
<span class="text-[#10DB06] text-xs sm:text-[0.95rem]">+{modelStats['Return [%]']?.toFixed(2)} %</span>
|
||||
{:else if modelStats['Return [%]'] < 0}
|
||||
<span class="text-[#FF2F1F] text-xs sm:text-[0.95rem]">{modelStats['Return [%]']?.toFixed(2)} %</span>
|
||||
{:else}
|
||||
<span class="text-gray-300 text-xs sm:text-sm m-auto pr-2">n/a</span>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-start text-white border-b border-[#0F0F0F] bg-[#0F0F0F] text-xs sm:text-sm sm:font-medium">
|
||||
Buy & Hold Return
|
||||
</td>
|
||||
<td class="text-white bg-[#0F0F0F] border-b border-[#0F0F0F] text-xs sm:text-sm sm:font-medium">
|
||||
<div class="flex flex-row items-center ">
|
||||
{#if modelStats['Buy & Hold Return [%]'] >= 0}
|
||||
<span class="text-[#10DB06] text-xs sm:text-[0.95rem]">+{modelStats['Buy & Hold Return [%]']?.toFixed(2)} %</span>
|
||||
{:else if modelStats['Buy & Hold Return [%]'] < 0}
|
||||
<span class="text-[#FF2F1F] text-xs sm:text-[0.95rem]">{modelStats['Buy & Hold Return [%]']?.toFixed(2)} %</span>
|
||||
{:else}
|
||||
<span class="text-gray-300 text-xs sm:text-sm m-auto pr-2">n/a</span>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="text-white {!showFullStats ? 'opacity-[0.50]' : ''}">
|
||||
<td class="text-start bg-[#0F0F0F] border-b border-[#0F0F0F] text-xs sm:text-sm sm:font-medium">
|
||||
Win Rate
|
||||
</td>
|
||||
<td class="tex-white bg-[#0F0F0F] border-b border-[#0F0F0F] text-xs sm:text-sm sm:font-medium">
|
||||
<div class="flex flex-row items-center ">
|
||||
{#if modelStats['Win Rate [%]'] >= 0}
|
||||
<span class="text-[#10DB06] text-xs sm:text-[0.95rem]">+{modelStats['Win Rate [%]']?.toFixed(2)} %</span>
|
||||
{:else if modelStats['Win Rate [%]'] < 0}
|
||||
<span class="text-[#FF2F1F] text-xs sm:text-[0.95rem]">{modelStats['Win Rate [%]']?.toFixed(2)} %</span>
|
||||
{:else}
|
||||
<span class="text-gray-300 text-xs sm:text-sm m-auto pr-2">n/a</span>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-start text-white bg-[#0F0F0F] border-b border-[#0F0F0F] text-xs sm:text-sm sm:font-medium">
|
||||
Best Trade
|
||||
</td>
|
||||
<td class="text-white bg-[#0F0F0F] border-b border-[#0F0F0F] text-xs sm:text-sm sm:font-medium">
|
||||
<div class="flex flex-row items-center ">
|
||||
{#if modelStats['Best Trade [%]'] >= 0}
|
||||
<span class="text-[#10DB06] text-xs sm:text-[0.95rem]">+{modelStats['Best Trade [%]']?.toFixed(2)} %</span>
|
||||
{:else if modelStats['Best Trade [%]'] < 0}
|
||||
<span class="text-[#FF2F1F] text-xs sm:text-[0.95rem]">{modelStats['Best Trade [%]']?.toFixed(2)} %</span>
|
||||
{:else}
|
||||
<span class="text-gray-300 text-xs sm:text-[0.95rem] m-auto pr-2">n/a</span>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{#if showFullStats}
|
||||
<tr class="text-white">
|
||||
<td class="text-start bg-[#0F0F0F] border-b border-[#0F0F0F] text-xs sm:text-sm sm:font-medium">
|
||||
Avg. Trade
|
||||
</td>
|
||||
<td class="tex-white bg-[#0F0F0F] border-b border-[#0F0F0F] text-xs sm:text-sm sm:font-medium">
|
||||
<div class="flex flex-row items-center ">
|
||||
{#if modelStats['Avg. Trade [%]'] >= 0}
|
||||
<span class="text-[#10DB06] text-xs sm:text-[0.95rem]">+{modelStats['Avg. Trade [%]']?.toFixed(2)} %</span>
|
||||
{:else if modelStats['Avg. Trade [%]'] < 0}
|
||||
<span class="text-[#FF2F1F] text-xs sm:text-[0.95rem]">{modelStats['Avg. Trade [%]']?.toFixed(2)} %</span>
|
||||
{:else}
|
||||
<span class="text-gray-300 text-xs sm:text-sm m-auto pr-2">n/a</span>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-start text-white border-b border-[#0F0F0F] text-xs sm:text-sm bg-[#0F0F0F] sm:font-medium">
|
||||
Worst Trade
|
||||
</td>
|
||||
<td class="text-white bg-[#0F0F0F] border-b border-[#0F0F0F] text-xs sm:text-sm sm:font-medium">
|
||||
<div class="flex flex-row items-center ">
|
||||
{#if modelStats['Worst Trade [%]'] >= 0}
|
||||
<span class="text-[#10DB06] text-xs sm:text-[0.95rem]">+{modelStats['Worst Trade [%]']?.toFixed(2)} %</span>
|
||||
{:else if modelStats['Worst Trade [%]'] < 0}
|
||||
<span class="text-[#FF2F1F] text-xs sm:text-[0.95rem]">{modelStats['Worst Trade [%]']?.toFixed(2)} %</span>
|
||||
{:else}
|
||||
<span class="text-gray-300 text-xs sm:text-[0.95rem] m-auto pr-2">n/a</span>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start bg-[#0F0F0F] border-b border-[#0F0F0F] text-xs sm:text-sm sm:font-medium">
|
||||
Avg. Drawdown
|
||||
</td>
|
||||
<td class="tex-white bg-[#0F0F0F] border-b border-[#0F0F0F] text-xs sm:text-sm sm:font-medium">
|
||||
<div class="flex flex-row items-center ">
|
||||
{#if modelStats['Avg. Drawdown [%]'] >= 0}
|
||||
<span class="text-[#10DB06] text-xs sm:text-[0.95rem]">+{modelStats['Avg. Drawdown [%]']?.toFixed(2)} %</span>
|
||||
{:else if modelStats['Avg. Drawdown [%]'] < 0}
|
||||
<span class="text-[#FF2F1F] text-xs sm:text-[0.95rem]">{modelStats['Avg. Drawdown [%]']?.toFixed(2)} %</span>
|
||||
{:else}
|
||||
<span class="text-gray-300 text-xs sm:text-[0.95rem] m-auto pr-2">n/a</span>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-start text-white border-b border-[#0F0F0F] text-xs sm:text-sm bg-[#0F0F0F] sm:font-medium">
|
||||
Max. Drawdown
|
||||
</td>
|
||||
<td class="text-white bg-[#0F0F0F] border-b border-[#0F0F0F] text-xs sm:text-sm sm:font-medium">
|
||||
<div class="flex flex-row items-center ">
|
||||
{#if modelStats['Max. Drawdown [%]'] >= 0}
|
||||
<span class="text-[#10DB06] text-xs sm:text-[0.95rem]">+{modelStats['Max. Drawdown [%]']?.toFixed(2)} %</span>
|
||||
{:else if modelStats['Max. Drawdown [%]'] < 0}
|
||||
<span class="text-[#FF2F1F] text-xs sm:text-[0.95rem]">{modelStats['Max. Drawdown [%]']?.toFixed(2)} %</span>
|
||||
{:else}
|
||||
<span class="text-gray-300 text-xs sm:text-[0.95rem] m-auto pr-2">n/a</span>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start text-xs border-b border-[#0F0F0F] sm:text-sm bg-[#0F0F0F] sm:font-medium">
|
||||
Number of Trades
|
||||
</td>
|
||||
<td class="tex-white bg-[#0F0F0F] border-b border-[#0F0F0F] text-xs sm:text-[0.95rem] sm:font-medium">{modelStats['# Trades']} </td>
|
||||
<td class="text-start text-xs border-b border-[#0F0F0F] sm:text-sm text-white bg-[#0F0F0F] sm:font-medium">
|
||||
Profit Factor
|
||||
</td>
|
||||
<td class="text-white bg-[#0F0F0F] border-b border-[#0F0F0F] text-xs sm:text-[0.95rem] sm:font-medium">{modelStats['Profit Factor']?.toFixed(2)} </td>
|
||||
</tr>
|
||||
<tr class="text-white">
|
||||
<td class="text-start bg-[#0F0F0F] border-b border-[#0F0F0F] text-xs sm:text-sm sm:font-medium">
|
||||
Sharpe Ratio
|
||||
</td>
|
||||
<td class="tex-white bg-[#0F0F0F] border-b border-[#0F0F0F] text-xs sm:text-[0.95rem] sm:font-medium">{modelStats['Sharpe Ratio']?.toFixed(2)} </td>
|
||||
<td class="text-start text-xs sm:text-sm text-white bg-[#0F0F0F] sm:font-medium">
|
||||
Sortino Ratio
|
||||
</td>
|
||||
<td class="text-white bg-[#0F0F0F] border-b border-[#0F0F0F] text-xs sm:text-[0.95rem] sm:font-medium">{modelStats['Sortino Ratio']?.toFixed(2)} </td>
|
||||
</tr>
|
||||
{/if}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<span class="{!showFullStats ? 'hidden' : ''} text-start italic text-xs sm:text-sm text-gray-200 mr-auto pt-10">
|
||||
Time Period between {new Date(modelStats['Start'])?.toLocaleString('en-US', { month: 'long', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||
-
|
||||
{new Date(modelStats['End'])?.toLocaleString('en-US', { month: 'long', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||
</span>
|
||||
|
||||
<label on:click={() => showFullStats = !showFullStats} class="cursor-pointer flex justify-center items-center mt-5">
|
||||
<svg class="w-10 h-10 transform {showFullStats ? 'rotate-180' : ''} " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#2A323C" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 13.5L7.5 11l1.42-1.41L12 12.67l3.08-3.08L16.5 11L12 15.5z"/></svg>
|
||||
</label>
|
||||
|
||||
{:else}
|
||||
<h2 class="mt-10 mb-5 flex justify-center items-center text-3xl sm:font-medium text-slate-700 m-auto">
|
||||
No data available
|
||||
<svg class="ml-2 w-10 sm:w-12 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#334155" d="M18.68 12.32a4.49 4.49 0 0 0-6.36.01a4.49 4.49 0 0 0 0 6.36a4.508 4.508 0 0 0 5.57.63L21 22.39L22.39 21l-3.09-3.11c1.13-1.77.87-4.09-.62-5.57m-1.41 4.95c-.98.98-2.56.97-3.54 0c-.97-.98-.97-2.56.01-3.54c.97-.97 2.55-.97 3.53 0c.97.98.97 2.56 0 3.54M10.9 20.1a6.527 6.527 0 0 1-1.48-2.32C6.27 17.25 4 15.76 4 14v3c0 2.21 3.58 4 8 4c-.4-.26-.77-.56-1.1-.9M4 9v3c0 1.68 2.07 3.12 5 3.7v-.2c0-.93.2-1.85.58-2.69C6.34 12.3 4 10.79 4 9m8-6C7.58 3 4 4.79 4 7c0 2 3 3.68 6.85 4h.05c1.2-1.26 2.86-2 4.6-2c.91 0 1.81.19 2.64.56A3.215 3.215 0 0 0 20 7c0-2.21-3.58-4-8-4Z"/></svg>
|
||||
</h2>
|
||||
{/if}
|
||||
</main>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -456,35 +456,35 @@ onMount( async() => {
|
||||
</div>
|
||||
|
||||
<!--Start of Mode-->
|
||||
<table class="table table-sm table-pin-rows table-compact rounded-none sm:rounded-lg bg-[#202020]">
|
||||
<table class="table table-sm table-pin-rows table-compact rounded-none sm:rounded-lg">
|
||||
<thead class="rounded-lg">
|
||||
<tr class="bg-[#313131]">
|
||||
<th class="text-white font-medium text-sm">Symbol</th>
|
||||
<th class="text-white font-medium text-sm">Name</th>
|
||||
<th class="text-white font-medium text-sm ">Market Cap</th>
|
||||
<th class="text-white font-medium text-end text-sm">Today</th>
|
||||
<tr class="bg-[#0F0F0F]">
|
||||
<th class="text-white font-semibold text-sm">Symbol</th>
|
||||
<th class="text-white font-semibold text-sm">Name</th>
|
||||
<th class="text-white font-semibold text-sm ">Market Cap</th>
|
||||
<th class="text-white font-semibold text-end text-sm">Today</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{#each gainerLoserTickers as item}
|
||||
<tr on:click={() => goto("/stocks/"+item.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] border-b-[#202020] shake-ticker cursor-pointer">
|
||||
<td class="text-blue-400 border-b border-[#202020]">
|
||||
<tr on:click={() => goto("/stocks/"+item.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#202020] shake-ticker cursor-pointer">
|
||||
<td class="text-blue-400">
|
||||
{item?.symbol}
|
||||
</td>
|
||||
|
||||
<td class="text-white border-b border-[#202020]">
|
||||
<td class="text-white">
|
||||
{item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
|
||||
</td>
|
||||
|
||||
|
||||
|
||||
<td class="text-white border-b border-[#202020]">
|
||||
<td class="text-white">
|
||||
{item?.marketCap !== null ? abbreviateNumber(item?.marketCap,true) : '-'}
|
||||
</td>
|
||||
|
||||
|
||||
<td class="text-white border-b border-[#202020] font-semibold">
|
||||
<td class="text-white font-semibold">
|
||||
<div class="flex flex-row justify-end items-center">
|
||||
|
||||
<div class="flex flex-col items-center">
|
||||
@ -603,9 +603,9 @@ onMount( async() => {
|
||||
|
||||
</div>
|
||||
|
||||
<table class="table table-sm table-compact table-pin-rows shadow-md rounded-none sm:rounded-lg bg-[#202020]">
|
||||
<table class="table table-sm table-compact table-pin-rows shadow-md rounded-none sm:rounded-lg bg-[#0F0F0F]">
|
||||
<thead>
|
||||
<tr class="bg-[#313131]">
|
||||
<tr class="bg-[#0F0F0F]">
|
||||
<th class="text-white font-semibold text-sm">Symbol</th>
|
||||
<th class="text-white font-semibold text-sm">Name</th>
|
||||
<th class="text-white font-semibold text-sm ">Volume</th>
|
||||
@ -614,23 +614,23 @@ onMount( async() => {
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each active as item, index}
|
||||
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] border-b-[#202020] shake-ticker cursor-pointer">
|
||||
<td class="text-blue-400 border-b border-[#202020]">
|
||||
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#202020] shake-ticker cursor-pointer">
|
||||
<td class="text-blue-400 ">
|
||||
{item?.symbol}
|
||||
</td>
|
||||
|
||||
<td class="text-white border-b border-[#202020]">
|
||||
<td class="text-white ">
|
||||
{item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
|
||||
</td>
|
||||
|
||||
|
||||
|
||||
<td class="text-white border-b border-[#202020]">
|
||||
<td class="text-white ">
|
||||
{item?.volume !== null ? abbreviateNumber(item?.volume) : '-'}
|
||||
</td>
|
||||
|
||||
|
||||
<td class="text-white border-b border-[#202020] font-semibold">
|
||||
<td class="text-white font-semibold">
|
||||
<div class="flex flex-row justify-end items-center">
|
||||
|
||||
<div class="flex flex-col items-center">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user