565 lines
22 KiB
Svelte
565 lines
22 KiB
Svelte
<script lang='ts'>
|
|
import { goto } from '$app/navigation';
|
|
import { numberOfUnreadNotification, screenWidth } from '$lib/store';
|
|
import { onMount } from 'svelte';
|
|
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
|
import * as Card from "$lib/components/shadcn/card/index.ts";
|
|
|
|
import { Chart } from 'svelte-echarts'
|
|
import Lazy from '$lib/components/Lazy.svelte';
|
|
|
|
import { init, use } from 'echarts/core'
|
|
import { GaugeChart, LineChart,} from 'echarts/charts'
|
|
import { GridComponent, TooltipComponent } from 'echarts/components'
|
|
import { CanvasRenderer } from 'echarts/renderers'
|
|
use([GaugeChart, LineChart, GridComponent, TooltipComponent, CanvasRenderer])
|
|
|
|
|
|
|
|
export let data;
|
|
let optionGraphWinrate;
|
|
let optionGraphReturn;
|
|
|
|
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
|
|
|
let isLoaded = false;
|
|
let rawData = data?.getCramerTracker ?? [];
|
|
let displayList = rawData?.slice(0,50) ?? []
|
|
let cumulativeList = []
|
|
let winRate;
|
|
|
|
async function handleScroll() {
|
|
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
|
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
|
if (isBottom && displayList?.length !== rawData?.length) {
|
|
const nextIndex = displayList?.length;
|
|
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
|
|
displayList = [...displayList, ...filteredNewResults];
|
|
}
|
|
}
|
|
|
|
function computeWinRate(data) {
|
|
// Filter sentiments that should be considered bullish/buy or bearish/sell
|
|
const bullishSentiments = ['bullish', 'buy'];
|
|
const bearishSentiments = ['bearish', 'sell'];
|
|
|
|
// Reduce through the array to calculate the total trades and wins
|
|
const { wins, totalTrades } = data.reduce((acc, item) => {
|
|
const sentiment = item.sentiment.toLowerCase(); // Normalize to lower case for easier comparison
|
|
const isBullish = bullishSentiments.some(keyword => sentiment.includes(keyword));
|
|
const isBearish = bearishSentiments.some(keyword => sentiment.includes(keyword));
|
|
|
|
// Count the total trades
|
|
acc.totalTrades++;
|
|
|
|
// Evaluate the wins based on sentiment and returnSince
|
|
if ((isBullish && item.returnSince > 0) || (isBearish && item.returnSince < 0)) {
|
|
acc.wins++;
|
|
}
|
|
|
|
return acc;
|
|
}, { wins: 0, totalTrades: 0 });
|
|
|
|
// Calculate and return the win rate percentage
|
|
return (wins / totalTrades) ;
|
|
}
|
|
|
|
|
|
function getPlotOptions() {
|
|
let dates = [];
|
|
const returnMap = {};
|
|
const reverseData = data?.getCramerTracker?.reverse();
|
|
// Iterate over the data and sum the returnSince values for each unique date
|
|
reverseData?.forEach(item => {
|
|
const { date, returnSince } = item;
|
|
|
|
if (returnMap[date]) {
|
|
returnMap[date] += returnSince; // Add to the existing return
|
|
} else {
|
|
returnMap[date] = returnSince; // Initialize the return for this date
|
|
dates.push(date); // Save the unique date in the dates array
|
|
}
|
|
});
|
|
|
|
// Convert the returnMap to an array of objects (cumulativeList)
|
|
cumulativeList = Object?.keys(returnMap)?.map(date => (
|
|
returnMap[date]?.toFixed(1)
|
|
));
|
|
|
|
//console.log('Cumulative List:', cumulativeList);
|
|
//console.log('Unique Dates:', dates);
|
|
|
|
const optionCumulativeReturn = {
|
|
silent: true,
|
|
animation: false,
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
hideDelay: 100, // Set the delay in milliseconds
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '0%',
|
|
top: $screenWidth < 640 ? '20%' : '10%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
splitLine: {
|
|
show: false, // Disable x-axis grid lines
|
|
},
|
|
data: dates,
|
|
axisLabel: {
|
|
show: false // Hide x-axis labels
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false, // Disable x-axis grid lines
|
|
},
|
|
axisLabel: {
|
|
show: false // Hide y-axis labels
|
|
}
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: 'Cumulative Returns [%]',
|
|
type: 'line',
|
|
smooth: true,
|
|
lineStyle: {
|
|
width: 0
|
|
},
|
|
showSymbol: false,
|
|
areaStyle: {
|
|
opacity: 1,
|
|
color: '#3B82F6'
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: cumulativeList
|
|
},
|
|
]
|
|
};
|
|
|
|
const optionWinrate = {
|
|
silent: true,
|
|
animation: false,
|
|
series: [
|
|
{
|
|
type: 'gauge',
|
|
startAngle: 180,
|
|
endAngle: 0,
|
|
center: ['50%', '75%'],
|
|
radius: '90%',
|
|
min: 0,
|
|
max: 1,
|
|
splitNumber: 8,
|
|
axisLine: {
|
|
lineStyle: {
|
|
width: 6,
|
|
color: [
|
|
[0.3, '#F71F4F'],
|
|
[0.7, '#FFA838'],
|
|
[1, '#20AE54']
|
|
]
|
|
}
|
|
},
|
|
pointer: {
|
|
icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
|
|
length: '12%',
|
|
width: 10,
|
|
offsetCenter: [0, '-60%'],
|
|
itemStyle: {
|
|
color: 'auto'
|
|
}
|
|
},
|
|
axisTick: {
|
|
length: 4,
|
|
lineStyle: {
|
|
color: 'auto',
|
|
width: 1
|
|
}
|
|
},
|
|
splitLine: {
|
|
length: 20,
|
|
lineStyle: {
|
|
color: 'auto',
|
|
width: 2
|
|
}
|
|
},
|
|
axisLabel: {
|
|
formatter: function (value) {
|
|
return '';
|
|
}
|
|
},
|
|
title: {
|
|
offsetCenter: [0, '5%'],
|
|
fontSize: 14,
|
|
color: '#fff',
|
|
},
|
|
detail: {
|
|
fontSize: 22,
|
|
offsetCenter: [0, '-20%'],
|
|
valueAnimation: true,
|
|
formatter: function (value) {
|
|
return (value * 100)?.toFixed(0)+ '%';
|
|
},
|
|
color: 'inherit'
|
|
},
|
|
data: [
|
|
{
|
|
value: winRate,
|
|
name: 'Winrate'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
return {optionCumulativeReturn, optionWinrate};
|
|
}
|
|
|
|
|
|
onMount(() => {
|
|
winRate = computeWinRate(rawData);
|
|
|
|
const {optionCumulativeReturn, optionWinrate} = getPlotOptions()
|
|
optionGraphReturn = optionCumulativeReturn;
|
|
optionGraphWinrate = optionWinrate;
|
|
|
|
isLoaded = true;
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => {
|
|
window.removeEventListener('scroll', handleScroll);
|
|
};
|
|
})
|
|
|
|
|
|
$: charNumber = 20;
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<title>
|
|
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Jim Carmer Tracker · stocknear
|
|
</title>
|
|
<meta name="description" content={`Track the stock recommendations and performance of CNBC's Jim Cramer`} />
|
|
|
|
<!-- Other meta tags -->
|
|
<meta property="og:title" content={`Jim Carmer Tracker · stocknear`}/>
|
|
<meta property="og:description" content={`Track the stock recommendations and performance of CNBC's Jim Cramer`} />
|
|
<meta property="og:type" content="website"/>
|
|
<!-- Add more Open Graph meta tags as needed -->
|
|
|
|
<!-- Twitter specific meta tags -->
|
|
<meta name="twitter:card" content="summary_large_image"/>
|
|
<meta name="twitter:title" content={`Jim Carmer Tracker · stocknear`}/>
|
|
<meta name="twitter:description" content={`Track the stock recommendations and performance of CNBC's Jim Cramer`} />
|
|
<!-- Add more Twitter meta tags as needed -->
|
|
|
|
</svelte:head>
|
|
|
|
|
|
|
|
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
|
|
|
|
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
|
|
<ul>
|
|
<li><a href="/" class="text-gray-300">Home</a></li>
|
|
<li class="text-gray-300">Jim Cramer Tracker</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="w-full overflow-hidden m-auto mt-5">
|
|
|
|
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
|
|
<div class="relative flex justify-center items-start overflow-hidden w-full">
|
|
|
|
|
|
<main class="w-full lg:w-3/4 lg:pr-5">
|
|
|
|
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
|
|
|
<!-- Start Column -->
|
|
<div>
|
|
<div class="flex flex-row justify-center items-center">
|
|
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5">
|
|
Jim Cramer Tracker
|
|
</h1>
|
|
</div>
|
|
|
|
<span class="text-white text-md font-medium text-center flex justify-center items-center ">
|
|
Track the stock recommendations and performance of CNBC's Jim Cramer
|
|
</span>
|
|
|
|
|
|
</div>
|
|
<!-- End Column -->
|
|
|
|
<!-- Start Column -->
|
|
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
|
|
<svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<filter id="glow">
|
|
<feGaussianBlur stdDeviation="5" result="glow"/>
|
|
<feMerge>
|
|
<feMergeNode in="glow"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" />
|
|
</svg>
|
|
|
|
|
|
<div class="z-1 absolute top-4">
|
|
<img class="w-24 ml-7" src={cloudFrontUrl+'/assets/cramer_logo.png'} alt="logo" loading="lazy">
|
|
</div>
|
|
</div>
|
|
<!-- End Column -->
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
{#if isLoaded}
|
|
|
|
|
|
<div class="grid gap-4 grid-cols-1 sm:grid-cols-2 md:gap-8 px-3 sm:px-0">
|
|
<Card.Root class="bg-[#141417]">
|
|
<Card.Header class="flex flex-col items-start space-y-0 pb-2">
|
|
<Card.Title class="text-start text-xl sm:text-2xl font-semibold pb-2">Cumulative Return</Card.Title>
|
|
<Card.Description class="text-white text-sm pb-2">
|
|
Following Jim Cramer's stock picks since {rawData?.slice(0)?.at(0)?.date}, would have yielded a <strong class="{cumulativeList?.slice(-1) > 0 ? 'text-[#00FC50]' : 'text-[#FC2120]'}">{cumulativeList?.slice(-1) > 0 ? '+' : ''}{cumulativeList?.slice(-1)}%</strong> cumulative return.
|
|
</Card.Description>
|
|
</Card.Header>
|
|
<Card.Content class="w-full h-fit">
|
|
<Lazy>
|
|
<div class="w-full h-[250px] -mt-10">
|
|
<Chart {init} options={optionGraphReturn} class="chart" />
|
|
</div>
|
|
</Lazy>
|
|
</Card.Content>
|
|
</Card.Root>
|
|
<Card.Root class="bg-[#141417]">
|
|
<Card.Header class="flex flex-col items-start space-y-0 pb-2">
|
|
<Card.Title class="text-start text-xl sm:text-2xl font-semibold pb-2">Winrate</Card.Title>
|
|
<Card.Description class="text-white text-sm pb-2">
|
|
Cramer was accurate in <strong>{(winRate*100)?.toFixed(0)}%</strong> of his last {rawData?.length} forecasts.
|
|
Time to consider the "Inverse Cramer" strategy?
|
|
</Card.Description>
|
|
</Card.Header>
|
|
<Card.Content class="w-full h-[250px] ">
|
|
<Lazy>
|
|
<div class="w-full h-[250px] -mt-5">
|
|
<Chart {init} options={optionGraphWinrate} class="chart" />
|
|
</div>
|
|
</Lazy>
|
|
</Card.Content>
|
|
</Card.Root>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="w-screen sm:w-full m-auto mt-20 sm:mt-10">
|
|
|
|
|
|
<div class="w-screen sm:w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll">
|
|
<table class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
|
|
<thead>
|
|
<tr class="bg-[#09090B]">
|
|
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
|
|
Company Name
|
|
</th>
|
|
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
|
|
Date
|
|
</th>
|
|
<th class="text-center bg-[#09090B] text-white text-[1rem] font-semibold">
|
|
Sentiment
|
|
</th>
|
|
<th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
|
|
Return Since
|
|
</th>
|
|
<th class="hidden xl:table-cell text-end bg-[#09090B] text-white text-[1rem] font-semibold">
|
|
Sector
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each displayList as item, index}
|
|
|
|
<tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A]">
|
|
|
|
<td class="text-sm sm:text-[1rem] text-start whitespace-nowrap">
|
|
{#if index >= 5 && data?.user?.tier !== 'Pro'}
|
|
<a class="block relative" href="/pricing">
|
|
<span class="text-base font-semibold text-blue-link blur group-hover:blur-[6px]">
|
|
XXXX
|
|
</span>
|
|
|
|
<div class="ml-px max-w-[130px] truncate text-sm text-default blur group-hover:blur-[6px] lg:max-w-[150px]">
|
|
XXXXXXXXXXXXXXXX
|
|
</div>
|
|
|
|
<div class="absolute top-3 flex items-center">
|
|
<svg class="size-5 text-[#FBCE3C]"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
style="max-width: 40px;">
|
|
<path fill-rule="evenodd"
|
|
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
|
|
clip-rule="evenodd">
|
|
</path>
|
|
</svg>
|
|
|
|
<span class="ml-1 font-semibold text-muted group-hover:text-default">
|
|
Upgrade
|
|
</span>
|
|
</div>
|
|
</a>
|
|
{:else}
|
|
<div class="flex flex-col items-start">
|
|
<a href={`/stocks/${item?.ticker}`}
|
|
class="sm:hover:text-white text-blue-400 text-sm sm:text-[1rem]">
|
|
{item?.ticker}
|
|
</a>
|
|
<span class="text-white">
|
|
{item?.name?.length > charNumber
|
|
? item?.name?.slice(0, charNumber) + "..."
|
|
: item?.name}
|
|
</span>
|
|
</div>
|
|
{/if}
|
|
</td>
|
|
|
|
|
|
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white">
|
|
{new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
|
</td>
|
|
|
|
|
|
<td class="text-sm sm:text-[1rem] whitespace-nowrap {item?.sentiment === 'Bullish' ? 'text-[#00FC50]' : item?.sentiment === 'Bearish' ? 'text-[#FC2120]' : 'text-[#C6A755]'} text-center">
|
|
{item?.sentiment}
|
|
</td>
|
|
|
|
<td class="text-sm sm:text-[1rem] {item?.returnSince >= 0 ? 'text-[#00FC50]' : 'text-[#FC2120]'} text-end">
|
|
{item?.returnSince > 0 ? '+' : ''}{item?.returnSince}%
|
|
</td>
|
|
|
|
<td class="hidden xl:table-cell text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white">
|
|
{item?.sector}
|
|
</td>
|
|
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{:else}
|
|
<div class="flex justify-center items-center h-80">
|
|
<div class="relative">
|
|
<label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
|
<span class="loading loading-spinner loading-md"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
|
|
</main>
|
|
|
|
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
|
|
|
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
|
|
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
|
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
|
<div class="w-full flex justify-between items-center p-3 mt-3">
|
|
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
|
Pro Subscription 🔥
|
|
</h2>
|
|
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
|
</div>
|
|
<span class="text-white p-3 ml-3 mr-3">
|
|
Upgrade now for unlimited access to all data and tools.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<div on:click={() => goto('/reddit-tracker')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
|
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
|
<div class="w-full flex justify-between items-center p-3 mt-3">
|
|
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
|
Reddit Tracker 🚀
|
|
</h2>
|
|
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
|
</div>
|
|
<span class="text-white p-3 ml-3 mr-3">
|
|
Get the latest trends of r/Wallstreetbets
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div on:click={() => goto('/most-retail-volume')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
|
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
|
<div class="w-full flex justify-between items-center p-3 mt-3">
|
|
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
|
Retail Trader Tracker 💳
|
|
</h2>
|
|
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
|
</div>
|
|
<span class="text-white p-3 ml-3 mr-3">
|
|
Follow the daily trends of retail investors
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</aside>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</section>
|
|
|
|
<style>
|
|
.app {
|
|
height: 150px;
|
|
max-width: 100%; /* Ensure chart width doesn't exceed the container */
|
|
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.app {
|
|
height: 120px;
|
|
}
|
|
}
|
|
|
|
.chart {
|
|
width: 100%;
|
|
}
|
|
|
|
</style> |