add ai score feature
This commit is contained in:
MuslemRahimi
parent
19bbbba75b
commit
5c6645b5a1
@ -1,45 +1,177 @@
|
||||
|
||||
<script lang ="ts">
|
||||
|
||||
let aiScoreDict = {'score': 9};
|
||||
let score = aiScoreDict?.score;
|
||||
|
||||
export let score;
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<section class="overflow-hidden text-white h-full pb-10 sm:pb-0">
|
||||
<section class="overflow-hidden text-white">
|
||||
<main class="overflow-hidden ">
|
||||
|
||||
<div class="w-full">
|
||||
<div class="flex flex-col items-center w-auto p-4 sm:p-4 bg-[#09090B] sm:bg-[#09090B] rounded-lg relative">
|
||||
<div class="relative">
|
||||
<h3 class="text-center text-white text-sm sm:text-[1rem] mb-2">AI Score</h3>
|
||||
|
||||
{#if Object?.keys(aiScoreDict)?.length !== 0}
|
||||
|
||||
|
||||
|
||||
<div class="pb-4 w-full mt-5">
|
||||
<div class="w-auto p-4 sm:p-6 bg-[#09090B] sm:bg-[#09090B] rounded-lg relative">
|
||||
<div class="flex flex-row items-center justify-between ">
|
||||
<div class="relative size-[60px] sm:size-[90px] ml-auto">
|
||||
<svg class="size-full w-[60px] h-[60px] sm:w-[90px] sm:h-[90px]" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Background Circle -->
|
||||
<circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#303030]" stroke-width="4"></circle>
|
||||
<!-- Progress Circle inside a group with rotation -->
|
||||
<g class="origin-center -rotate-90 transform">
|
||||
<circle cx="18" cy="18" r="16" fill="none" class="stroke-current {score > 5 ? 'text-[#37C97D]' : score < 5 ? 'text-[#FF2F1F]' : 'text-white'} " stroke-width="4" stroke-dasharray="100" stroke-dashoffset={10-score}></circle>
|
||||
</g>
|
||||
<label for="scoreInfo" class="absolute -top-3 -right-4 cursor-pointer border border-gray-900 rounded-full bg-[#242424] sm:hover:bg-[#313131] duration-100 p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
|
||||
<svg class="h-[8px] w-[8px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
|
||||
<path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<div class="relative size-[50px] sm:size-[60px] ml-auto">
|
||||
<svg class="size-full w-[50px] h-[50px] sm:w-[60px] sm:h-[60px]" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Background Circle -->
|
||||
<circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#303030]" stroke-width="2"></circle>
|
||||
<!-- score Circle inside a group with rotation -->
|
||||
<g class="origin-center -rotate-90 transform">
|
||||
<!-- score Circle -->
|
||||
<circle cx="18" cy="18" r="16" fill="none"
|
||||
class="stroke-current {score >= 7 ? 'text-[#37C97D]' : score >=4 ? 'text-[#FF9E21]' : 'text-[#FF2F1F]'}"
|
||||
stroke-width="3"
|
||||
stroke-dasharray="100.48"
|
||||
stroke-dashoffset="{100.48 - (score / 10) * 100.48}">
|
||||
</circle>
|
||||
</g>
|
||||
<!-- Text in the middle -->
|
||||
<text x="18" y="21" text-anchor="middle" font-size="10" fill="#000">{score}</text>
|
||||
</svg>
|
||||
|
||||
<!-- Percentage Text -->
|
||||
<div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
|
||||
<span class="text-center text-white text-xl sm:text-2xl font-semibold">
|
||||
<span class="text-center text-white text-xl font-semibold">
|
||||
{score}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<h4 class="text-center text-white text-sm mt-2 font-semibold">
|
||||
{#if score === 10}
|
||||
Strong Buy
|
||||
{:else if score >=7}
|
||||
Buy
|
||||
{:else if score >=4}
|
||||
Hold
|
||||
{:else if score >=2}
|
||||
Sell
|
||||
{:else}
|
||||
Strong Sell
|
||||
{/if}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</main>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Put this part before </body> tag -->
|
||||
<input type="checkbox" id="scoreInfo" class="modal-toggle" />
|
||||
|
||||
|
||||
|
||||
<label for="scoreInfo" class="modal modal-bottom sm:modal-middle cursor-pointer">
|
||||
|
||||
<label for="scoreInfo" class="cursor-pointer modal-backdrop"></label>
|
||||
|
||||
|
||||
|
||||
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||
<label class="modal-box w-full relative bg-[#09090B] border border-gray-800 h-auto">
|
||||
<label for="scoreInfo" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-2xl text-white">
|
||||
✕
|
||||
</label>
|
||||
|
||||
<h3 class="text-2xl font-bold text-white">
|
||||
AI Score
|
||||
</h3>
|
||||
<p class="py-4 text-gray-200 bg-[#09090B] w-full">
|
||||
Our AI model analyzes fundamental, technical, and statistical indicators to predict the probability of a bullish trend over the next three months.
|
||||
<br>
|
||||
<br>
|
||||
We regularly update and refine our models to deliver the most reliable forecasts for you.
|
||||
</p>
|
||||
|
||||
<table class="table table-sm table-compact bg-[#09090B] w-full mt-5 mb-10 text-white">
|
||||
<!-- head -->
|
||||
<thead>
|
||||
<tr class="border-b border-slate-700 odd:bg-[#27272A]">
|
||||
<th class="bg-[#09090B] text-white text-sm font-semibold">
|
||||
Bullish Probability
|
||||
</th>
|
||||
<th class="bg-[#09090B] text-white text-sm font-semibold">
|
||||
Sentiment
|
||||
</th>
|
||||
<th class="bg-[#09090B] text-white text-sm text-end font-semibold">
|
||||
Score
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- row 1 -->
|
||||
<tr class="border-b border-slate-700 odd:bg-[#27272A]">
|
||||
<td class="text-sm sm:text-[1rem]">+80% </td>
|
||||
<td class="text-sm sm:text-[1rem]">Strong Bullish</td>
|
||||
<td class="text-sm sm:text-[1rem] text-end">10</td>
|
||||
</tr>
|
||||
<!-- row 2 -->
|
||||
<tr class="border-b border-slate-700 odd:bg-[#27272A]">
|
||||
<td class="text-sm sm:text-[1rem]">+75%</td>
|
||||
<td class="text-sm sm:text-[1rem]">Buy</td>
|
||||
<td class="text-sm sm:text-[1rem] text-end">9</td>
|
||||
</tr>
|
||||
<tr class="border-b border-slate-700 odd:bg-[#27272A]">
|
||||
<td class="text-sm sm:text-[1rem]">+70%</td>
|
||||
<td class="text-sm sm:text-[1rem]">Buy</td>
|
||||
<td class="text-sm sm:text-[1rem] text-end">8</td>
|
||||
</tr>
|
||||
<tr class="border-b border-slate-700 odd:bg-[#27272A]">
|
||||
<td class="text-sm sm:text-[1rem]">
|
||||
+60%
|
||||
</td>
|
||||
<td class="text-sm sm:text-[1rem]">Buys</td>
|
||||
<td class="text-sm sm:text-[1rem] text-end">7</td>
|
||||
</tr>
|
||||
<tr class="border-b border-slate-700 odd:bg-[#27272A]">
|
||||
<td class="text-sm sm:text-[1rem]">+50%</td>
|
||||
<td class="text-sm sm:text-[1rem]">Hold</td>
|
||||
<td class="text-sm sm:text-[1rem] text-end">6</td>
|
||||
</tr>
|
||||
<tr class="border-b border-slate-700 odd:bg-[#27272A]">
|
||||
<td class="text-sm sm:text-[1rem]">+45%</td>
|
||||
<td class="text-sm sm:text-[1rem]">Hold</td>
|
||||
<td class="text-sm sm:text-[1rem] text-end">5</td>
|
||||
</tr>
|
||||
<tr class="border-b border-slate-700 odd:bg-[#27272A]">
|
||||
<td class="text-sm sm:text-[1rem]">+40%</td>
|
||||
<td class="text-sm sm:text-[1rem]">Hold</td>
|
||||
<td class="text-sm sm:text-[1rem] text-end">4</td>
|
||||
</tr>
|
||||
<tr class="border-b border-slate-700 odd:bg-[#27272A]">
|
||||
<td class="text-sm sm:text-[1rem]">+35%</td>
|
||||
<td class="text-sm sm:text-[1rem]">Sell</td>
|
||||
<td class="text-sm sm:text-[1rem] text-end">3</td>
|
||||
</tr>
|
||||
<tr class="border-b border-slate-700 odd:bg-[#27272A]">
|
||||
<td class="text-sm sm:text-[1rem]">+30%</td>
|
||||
<td class="text-sm sm:text-[1rem]">Sell</td>
|
||||
<td class="text-sm sm:text-[1rem] text-end">2</td>
|
||||
</tr>
|
||||
<tr class="odd:bg-[#27272A]">
|
||||
<td class="text-sm sm:text-[1rem]">+20%</td>
|
||||
<td class="text-sm sm:text-[1rem]">Strong Sell</td>
|
||||
<td class="text-sm sm:text-[1rem] text-end">1</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
</label>
|
||||
</label>
|
||||
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
import toast from "svelte-french-toast";
|
||||
import Sidecard from "$lib/components/Sidecard.svelte";
|
||||
import Markethour from "$lib/components/Markethour.svelte";
|
||||
import AIScore from "$lib/components/AIScore.svelte";
|
||||
|
||||
export let data;
|
||||
|
||||
@ -436,23 +437,24 @@ async function toggleUserWatchlist(watchListId: string) {
|
||||
</div>
|
||||
<!--End Mobile Navbar-->
|
||||
|
||||
<div class="pt-20 sm:pt-0 w-auto max-w-3xl lg:max-w-content 2xl:max-w-6xl px-3 sm:px-0">
|
||||
<div class="pt-14 sm:pt-0 w-auto max-w-3xl lg:max-w-content 2xl:max-w-6xl px-3 sm:px-0">
|
||||
<div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
|
||||
<!-- Main content -->
|
||||
<div class="pb-12 md:pb-20 w-full 2xl:max-w-5xl">
|
||||
<div class="md:pr-6 lg:pr-10">
|
||||
<!-----Start-Header-CandleChart-Indicators------>
|
||||
|
||||
<div class="m-auto pl-0 sm:pl-4 overflow-hidden mb-5 md:mt-10">
|
||||
<div class="hidden sm:flex flex-row w-full justify-between items-center pb-10">
|
||||
<div class="m-auto pl-0 sm:pl-4 overflow-hidden mb-3 md:mt-10 xl:pr-7">
|
||||
<div class="hidden sm:flex flex-row w-full justify-between items-center ">
|
||||
<Markethour />
|
||||
|
||||
|
||||
|
||||
<!--Start Watchlist-->
|
||||
|
||||
{#if data?.user}
|
||||
<div class="flex flex-col ml-auto mr-2">
|
||||
{#if userWatchList?.length !== 0}
|
||||
<div class="flex-shrink-0 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#09090B] flex items-center justify-center">
|
||||
<div class="flex-shrink-0 rounded-full sm:hover:bg-white sm:hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#09090B] flex items-center justify-center">
|
||||
<label for="addWatchListModal" class="cursor-pointer flex-shrink-0">
|
||||
{#if isTickerIncluded}
|
||||
<svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
|
||||
@ -522,8 +524,8 @@ async function toggleUserWatchlist(watchListId: string) {
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||
|
||||
<div class="flex items-center w-full">
|
||||
<div class="flex flex-row justify-start items-center mb-5 mt-2">
|
||||
<div class="flex items-center w-full mt-3">
|
||||
<div class="flex flex-row justify-start w-full items-center ">
|
||||
<!--<img class="rounded-full w-10 h-10" src={logoUrl} alt="" />-->
|
||||
<div class="flex-shrink-0 rounded-full w-10 h-10 relative bg-[#141417] flex items-center justify-center border border-slate-800">
|
||||
<img style="clip-path: circle(50%);" class="avatar w-6 h-6" src={`https://financialmodelingprep.com/image-stock/${$stockTicker?.toUpperCase()}.png`} alt=" " loading="lazy" />
|
||||
@ -537,34 +539,16 @@ async function toggleUserWatchlist(watchListId: string) {
|
||||
{$displayCompanyName?.length > charNumber ? $displayCompanyName?.slice(0, charNumber) + "..." : $displayCompanyName}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="ml-auto {data?.getStockDeck?.at(0)?.score === (undefined || null) ? 'invisible' : ''}">
|
||||
<AIScore score={data?.getStockDeck?.at(0)?.score} />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="ml-auto sm:hidden">
|
||||
<Markethour />
|
||||
</div>
|
||||
|
||||
|
||||
<!--Start Trade-->
|
||||
<!--
|
||||
<div class="hidden sm:flex ml-auto">
|
||||
{#if holdingShares !== 0 && data?.user}
|
||||
|
||||
<label for="{!data?.user ? 'userLogin' : userPortfolio?.length !== 0 ? 'typeOfTrade' : ''}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#2A303C] border border-slate-800 normal-case cursor-pointer items-center">
|
||||
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z"/></svg>
|
||||
<span class="text-white font-medium">
|
||||
Portfolio
|
||||
</span>
|
||||
</label>
|
||||
{:else}
|
||||
<label for="{!data?.user ? 'userLogin' : userPortfolio?.length === 0 ? 'addPortfolio' : 'buyTradeModal'}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#2A303C] border border-slate-800 normal-case cursor-pointer items-center">
|
||||
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z"/></svg>
|
||||
<span class="text-white font-medium">
|
||||
Portfolio
|
||||
</span>
|
||||
</label>
|
||||
{/if}
|
||||
</div>
|
||||
-->
|
||||
<!--End Trade-->
|
||||
</div>
|
||||
</div>
|
||||
<!-----End-Header-CandleChart-Indicators------>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user