AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rework forecast page

Browse Source
This commit is contained in:
MuslemRahimi 2024-10-02 12:00:17 +02:00
parent a98588852e
commit 9ffb8e9b59
15 changed files with 487 additions and 309 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/lib/components/AnalystInsight.svelte
View File

@ -1,13 +1,9 @@
<script lang="ts">
import { analystInsightComponent, stockTicker, getCache, setCache } from "$lib/store";
import { stockTicker} from "$lib/store";
import InfoModal from "$lib/components/InfoModal.svelte";
export let data;
let isLoaded = false;
let rawData = {};
function latestInfoDate(inputDate) {
// Convert the input date string to milliseconds since epoch
const inputDateMs = Date?.parse(inputDate);
@ -25,47 +21,6 @@
return differenceInDays <= 1;
}
const getAnalystInsight = async (ticker) => {
// Get cached data for the specific tickerID
const cachedData = getCache(ticker, "getAnalystInsight");
if (cachedData) {
rawData = cachedData;
} else {
const postData = { ticker: ticker, path: 'analyst-insight' };
// make the POST request to the endpoint
const response = await fetch("/api/ticker-data", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(postData),
});
rawData = await response.json();
// Cache the data for this specific tickerID with a specific name 'getAnalystInsight'
setCache(ticker, rawData, "getAnalystInsight");
}
if (Object?.keys(rawData)?.length !== 0) {
$analystInsightComponent = true;
} else {
$analystInsightComponent = false;
}
};
$: {
if ($stockTicker && typeof window !== "undefined") {
isLoaded = false;
const ticker = $stockTicker;
const asyncFunctions = [getAnalystInsight(ticker)];
Promise.all(asyncFunctions)
.then((results) => {})
.catch((error) => {
console.error("An error occurred:", error);
});
isLoaded = true;
}
}
</script>
<section class="overflow-hidden text-white h-full pb-8">
@ -87,8 +42,6 @@
/>
</div>
{#if data?.user?.tier === 'Pro'}
{#if isLoaded}
{#if Object?.keys(rawData)?.length !== 0}
<div class="w-full flex flex-col items-start">
<div class="text-white text-[1rem] mt-2 mb-2 w-full">The AI model summarizes the latest Wallstreet Analyst Insight Report and extracts key points for you, focusing on what matters most.</div>
</div>
@ -99,22 +52,22 @@
<div class="relative">
<div class="">
<div class="flex justify-center">
<!--<div class="{rawData.changesPercentage >= 0 ? 'bg-[#37C97D]' : 'bg-[#FF2F1F]'} w-1.5 mb-5 rounded-l-xl" />-->
<!--<div class="{data?.getAnalystInsight.changesPercentage >= 0 ? 'bg-[#37C97D]' : 'bg-[#FF2F1F]'} w-1.5 mb-5 rounded-l-xl" />-->
<!--Start Item-->
<div class="flex flex-row items-center w-full mb-6">
<div class="w-full rounded-lg {latestInfoDate(rawData?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1]' : 'bg-[#27272A]'} shadow-lg h-full pl-3 pt-2 pb-4">
<div class="w-full rounded-lg {latestInfoDate(data?.getAnalystInsight?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1]' : 'bg-[#27272A]'} shadow-lg h-full pl-3 pt-2 pb-4">
<div class="flex flex-col items-start">
<div class="flex flex-row items-start w-full pt-2">
<span class="text-white text-[0.915rem] pl-2 italic">Last Report from {rawData.date}</span>
{#if latestInfoDate(rawData.date)}
<span class="text-white text-[0.915rem] pl-2 italic">Last Report from {data?.getAnalystInsight?.date}</span>
{#if latestInfoDate(data?.getAnalystInsight?.date)}
<label class="bg-[#2D4F8A] text-white font-medium text-xs rounded-lg px-2 py-0.5 ml-3">New</label>
{/if}
</div>
<div class="flex flex-col w-full pt-3 pl-2 pr-2 sm:pr-4">
<span class="text-white text-[1rem]">
{rawData?.insight}
{data?.getAnalystInsight?.insight}
</span>
</div>
</div>
@ -125,16 +78,6 @@
</div>
</div>
</div>
{/if}
{: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}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#111112] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<svg class="mr-1.5 w-5 h-5 inline-block"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"/></svg>

84
src/lib/components/PriceAnalysis.svelte
View File

@ -1,9 +1,9 @@
<script lang ='ts'>
import { priceAnalysisComponent, displayCompanyName, stockTicker, etfTicker, cryptoTicker, assetType, screenWidth, getCache, setCache} from '$lib/store';
<script lang ="ts">
import { displayCompanyName, screenWidth} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts'
import { onMount } from 'svelte';
import { init, use } from 'echarts/core'
import { LineChart } from 'echarts/charts'
@ -14,12 +14,10 @@
export let data;
let isLoaded = false;
let priceAnalysisDict = {};
let priceAnalysisDict = data?.getPriceAnalysis;
let lastPrice = data?.getStockQuote?.price ?? "n/a";
const modalContent = `
Our AI model, employing a Bayesian approach, predicts future prices by breaking down trends, seasonality, and holiday effects. It integrates uncertainty to offer forecasts with intervals.<br><br>
@ -37,7 +35,6 @@
let r2Score;
let mape;
let priceSentiment = 'n/a';
let lastPrice = 'n/a';
let oneYearPricePrediction = 'n/a';
let optionsData;
@ -71,8 +68,8 @@ function getPlotOptions() {
formatter: function (value) {
// Assuming dates are in the format 'yyyy-mm-dd'
// Extract the month and day from the date string and convert the month to its abbreviated name
const dateParts = value.split('-');
const year = dateParts[0].substring(2); // Extracting the last two digits of the year
const dateParts = value?.split('-');
const year = dateParts[0]?.substring(2); // Extracting the last two digits of the year
const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
return `${monthNames[monthIndex]} '${year}`;
}
@ -146,63 +143,14 @@ function getPlotOptions() {
return option;
}
const getPriceAnalysis = async (ticker) => {
// Get cached data for the specific tickerID
const cachedData = getCache(ticker, 'getPriceAnalysis');
if (cachedData) {
priceAnalysisDict = cachedData;
} else {
const postData = {'ticker': ticker, path: 'price-analysis'};
// make the POST request to the endpoint
const response = await fetch('/api/ticker-data', {
method: 'POST',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(postData)
});
priceAnalysisDict = await response.json();
// Cache the data for this specific tickerID with a specific name 'getPriceAnalysis'
setCache(ticker, priceAnalysisDict, 'getPriceAnalysis');
}
if(Object?.keys(priceAnalysisDict)?.length !== 0) {
$priceAnalysisComponent = true;
}
else {
$priceAnalysisComponent = false;
}
};
$: {
if(($assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker) && typeof window !== 'undefined') {
isLoaded = false;
lastPrice = data?.getStockQuote?.price ?? "n/a";
const ticker = $assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker;
const asyncFunctions = [
getPriceAnalysis(ticker)
];
Promise.all(asyncFunctions)
.then((results) => {
oneYearPricePrediction = priceAnalysisDict?.meanResult?.slice(-1)?.at(0);
mape = priceAnalysisDict?.mape;
r2Score = priceAnalysisDict?.r2Score;
priceSentiment = lastPrice < oneYearPricePrediction ? 'Bullish' : 'Bearish';
optionsData = getPlotOptions()
})
.catch((error) => {
console.error('An error occurred:', error);
});
isLoaded = true;
}
}
onMount(async () => {
oneYearPricePrediction = priceAnalysisDict?.meanResult?.slice(-1)?.at(0);
mape = priceAnalysisDict?.mape;
r2Score = priceAnalysisDict?.r2Score;
priceSentiment = lastPrice < oneYearPricePrediction ? 'Bullish' : 'Bearish';
optionsData = await getPlotOptions()
isLoaded = true;
})
</script>
@ -223,7 +171,6 @@ $: {
</div>
{#if isLoaded}
{#if Object?.keys(priceAnalysisDict)?.length !== 0}
<div class="w-full flex flex-col items-start">
<div class="text-white text-[1rem] mt-1 sm:mt-3 mb-1 w-full">
@ -331,6 +278,7 @@ $: {
</div>
{/if}
</main>
</section>

85
src/lib/components/SentimentAnalysis.svelte
View File

@ -1,16 +1,15 @@
<script lang ='ts'>
import {sentimentComponent, displayCompanyName, stockTicker, etfTicker, cryptoTicker, assetType, getCache, setCache} from '$lib/store';
import {displayCompanyName} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
let sentimentList = [];
let isLoaded = false;
export let data;
let oneMonthResult;
let outlook;
let oneYearResult;
let sentimentList = data?.getSentimentAnalysis;
let oneMonthResult = sentimentList?.at(1)?.value;
let outlook = oneMonthResult > 5 ? 'Positive' : oneMonthResult < 5 ? 'Negative' : 'Neutral';
let oneYearResult = sentimentList?.at(-1)?.value;
let dashedLinePosition = {
'0': '-mt-[80px]',
@ -25,58 +24,6 @@
'9': '-mt-[190px]',
'10': '-mt-[200px]',
}
const getSentimentAnalysis = async (ticker) => {
// Get cached data for the specific tickerID
const cachedData = getCache(ticker, 'getSentimentAnalysis');
if (cachedData) {
sentimentList = cachedData;
} else {
const postData = {'ticker': ticker, path: 'sentiment-analysis'};
// make the POST request to the endpoint
const response = await fetch('/api/ticker-data', {
method: 'POST',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(postData)
});
sentimentList = await response?.json();
// Cache the data for this specific tickerID with a specific name 'getSentimentAnalysis'
setCache(ticker, sentimentList, 'getSentimentAnalysis');
}
if(sentimentList?.length !== 0) {
$sentimentComponent = true;
} else {
$sentimentComponent = false;
}
};
$: {
if($assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker && typeof window !== 'undefined') {
isLoaded= false;
const ticker = $assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker;
const asyncFunctions = [
getSentimentAnalysis(ticker)
];
Promise.all(asyncFunctions)
.then((results) => {
oneMonthResult = sentimentList?.at(1)?.value;
outlook = oneMonthResult > 5 ? 'Positive' : oneMonthResult < 5 ? 'Negative' : 'Neutral';
oneYearResult = sentimentList?.at(-1)?.value;
})
.catch((error) => {
console.error('An error occurred:', error);
});
isLoaded = true;
}
}
</script>
@ -95,7 +42,6 @@ $: {
/>
</div>
{#if isLoaded}
{#if sentimentList?.length !== 0}
@ -216,26 +162,7 @@ $: {
<!--End AI News Score-->
{: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}
{: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>

25
src/routes/crypto/[tickerID]/+layout.svelte
View File

@ -110,8 +110,9 @@ function changeSection(state, item) {
scrollToItem(item);
const sectionMap = {
'stats': '/stats',
'news': '/news',
stats: "/stats",
forecast: "/forecast",
news: "/news",
};
if (state !== 'overview' && sectionMap[state]) {
@ -377,18 +378,7 @@ $: {
let charNumber = 12;
$: {
if($screenWidth < 640)
{
charNumber = 12;
}
else {
charNumber = 25;
}
}
$: charNumber = $screenWidth < 640 ? 12 : 25;
$: {
if($cryptoTicker && typeof window !== 'undefined' && $page.url.pathname === `/crypto/${$cryptoTicker}`)
@ -403,6 +393,7 @@ $: {
const parts = $page?.url?.pathname?.split('/');
const sectionMap = {
'stats': 'stats',
'forecast': 'forecast',
'congress-trading': 'congress-trading',
'news': 'news'
};
@ -637,6 +628,12 @@ $: {
<a href={`/crypto/${$cryptoTicker}/stats`} id="item2" on:click={() => (changeSection('stats','item2'))} class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'stats' ? 'text-white ' : 'bg-[#09090B]'}" >Stats</a>
<div class="{displaySection === 'stats' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]" />
</li>
<li class="cursor-pointer flex flex-col items-center">
<a href={`/crypto/${$cryptoTicker}/forecast`} id="item2" on:click={() => (changeSection('forecast','item3'))} class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'forecast' ? 'text-white ' : 'bg-[#09090B]'}" >
Forecast
</a>
<div class="{displaySection === 'forecast' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]" />
</li>
<li class="cursor-pointer flex flex-col items-center">
<a href={`/crypto/${$cryptoTicker}/congress-trading`} id="item7" on:click={() => (changeSection('congress-trading','item7'))} class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'congress-trading' ? 'text-white ' : 'bg-[#09090B]'}" >
Insider

29
src/routes/crypto/[tickerID]/+page.svelte
View File

@ -3,7 +3,7 @@
import {AreaSeries, Chart, PriceLine, CandlestickSeries} from 'svelte-lightweight-charts';
import { TrackingModeExitMode } from 'lightweight-charts';
import {setCache, getCache, screenWidth, taRatingComponent, displayCompanyName, numberOfUnreadNotification, globalForm, priceAnalysisComponent, trendAnalysisComponent, sentimentComponent, varComponent, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, cryptoTicker} from '$lib/store';
import {setCache, getCache, screenWidth, taRatingComponent, displayCompanyName, numberOfUnreadNotification, globalForm, varComponent, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, cryptoTicker} from '$lib/store';
import { onDestroy } from 'svelte';
import CryptoKeyInformation from '$lib/components/CryptoKeyInformation.svelte';
import Lazy from '$lib/components/Lazy.svelte';
@ -1125,32 +1125,7 @@ afterUpdate(async () => {
<Lazy>
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$priceAnalysisComponent ? 'hidden' : ''}">
{#await import('$lib/components/PriceAnalysis.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data} />
{/await}
</div>
</Lazy>
<Lazy>
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$trendAnalysisComponent ? 'hidden' : ''}">
{#await import('$lib/components/TrendAnalysis.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data} />
{/await}
</div>
</Lazy>
<Lazy>
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$sentimentComponent ? 'hidden' : ''}">
{#await import('$lib/components/SentimentAnalysis.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data} />
{/await}
</div>
</Lazy>
<Lazy>
<div class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$varComponent ? 'hidden' : ''}">

77
src/routes/crypto/[tickerID]/forecast/+layout.svelte Normal file
View File

@ -0,0 +1,77 @@
<script lang="ts">
import { stockTicker, screenWidth } from "$lib/store";
import { onDestroy } from "svelte";
import { page } from "$app/stores";
let displaySubSection = "overview";
if (displaySubSection) {
const parts = $page?.url?.pathname.split("/");
const sectionMap = {
overview: "overview",
ai: "ai",
analyst: "analyst",
};
const foundSection = parts?.find((part) => Object?.values(sectionMap)?.includes(part));
displaySubSection = Object?.keys(sectionMap)?.find((key) => sectionMap[key] === foundSection) || "overview";
}
function changeSubSection(state) {
const subSectionMap = {
overview: "/forecast",
ai: "/forecast/ai",
analyst: "/forecast/analyst",
};
if (state !== "overview" && subSectionMap[state]) {
displaySubSection = state;
//goto(`/stocks/${$stockTicker}${subSectionMap[state]}`);
} else {
displaySubSection = state;
//goto(`/stocks/${$stockTicker}/stats`);
}
}
const unsubscribe = page.subscribe(($page) => {
const splitRoute = $page.url.pathname.split("/");
const routeState = splitRoute[splitRoute.length - 1] !== "forecast" ? splitRoute[splitRoute.length - 1] : "overview";
changeSubSection(routeState);
});
onDestroy(() => {
unsubscribe();
});
</script>
<section class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
<div class="m-auto h-full overflow-hidden">
<slot />
</div>
</section>
<style>
.scrollbar {
display: grid;
grid-gap: 18px;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
grid-auto-flow: column;
overflow-x: auto;
scrollbar-width: thin; /* Hide the default scrollbar in Firefox */
scrollbar-color: transparent transparent; /* Hide the default scrollbar in Firefox */
}
/* Custom scrollbar for Webkit (Chrome, Safari) */
.scrollbar::-webkit-scrollbar {
width: 0; /* Hide the width of the scrollbar */
height: 0; /* Hide the height of the scrollbar */
}
.scrollbar::-webkit-scrollbar-thumb {
background: transparent; /* Make the thumb transparent */
}
</style>

54
src/routes/crypto/[tickerID]/forecast/+page.server.ts Normal file
View File

@ -0,0 +1,54 @@
export const load = async ({ locals, params }) => {
const { apiURL, apiKey } = locals;
const postData = {
ticker: params.tickerID,
};
const getAnalystInsight = async () => {
const response = await fetch(apiURL + "/analyst-insight", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": apiKey,
},
body: JSON.stringify(postData),
});
const output = await response.json();
return output;
};
const getPriceAnalysis = async () => {
const response = await fetch(apiURL + "/price-analysis", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": apiKey,
},
body: JSON.stringify(postData),
});
const output = await response.json();
return output;
};
const getSentimentAnalysis = async () => {
const response = await fetch(apiURL + "/sentiment-analysis", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": apiKey,
},
body: JSON.stringify(postData),
});
const output = await response.json();
return output;
};
// Make sure to return a promise
return {
getAnalystInsight: await getAnalystInsight(),
getPriceAnalysis: await getPriceAnalysis(),
getSentimentAnalysis: await getSentimentAnalysis(),
};
};

63
src/routes/crypto/[tickerID]/forecast/+page.svelte Normal file
View File

@ -0,0 +1,63 @@
<script lang="ts">
import { numberOfUnreadNotification, displayCompanyName, stockTicker, sentimentComponent, priceAnalysisComponent } from "$lib/store";
import PriceAnalysis from "$lib/components/PriceAnalysis.svelte";
import SentimentAnalysis from "$lib/components/SentimentAnalysis.svelte";
import AnalystInsight from "$lib/components/AnalystInsight.svelte";
import Lazy from "$lib/components/Lazy.svelte";
export let data;
</script>
<svelte:head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
{$displayCompanyName} ({$stockTicker}) Forecast AI · stocknear
</title>
<meta name="description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
<!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Forecast AI · stocknear`} />
<meta property="og:description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
<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={`${$displayCompanyName} (${$stockTicker}) Forecast AI · stocknear`} />
<meta name="twitter:description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full">
<div class="flex justify-center m-auto h-full overflow-hidden w-full">
<div class="relative flex justify-center items-center overflow-hidden w-full">
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
<Lazy>
<div class="w-full mt-10 sm:mt-0 m-auto sm:pt-6 {Object?.keys(data?.getAnalystInsight)?.length === 0 ? 'hidden' : ''}">
<AnalystInsight data={data} />
</div>
</Lazy>
<Lazy>
<div class="w-full mt-10 sm:mt-5 m-auto sm:pb-6 sm:pt-6 {Object?.keys(data?.getPriceAnalysis)?.length === 0 ? 'hidden' : ''}">
<PriceAnalysis data={data} />
</div>
</Lazy>
<Lazy>
<div class="w-full mt-10 sm:mt-5 m-auto sm:pb-6 sm:pt-6 {data?.getSentimentAnalysis?.length === 0 ? 'hidden' : ''}">
<SentimentAnalysis data={data} />
</div>
</Lazy>
</div>
</div>
</div>
</section>

18
src/routes/etf/[tickerID]/+layout.svelte
View File

@ -120,11 +120,12 @@ async function loadSearchData() {
scrollToItem(item);
const sectionMap = {
'options': '/options',
'holdings': '/holdings',
'dividends': '/dividends',
'stats': '/stats',
'news': '/news',
options: '/options',
holdings: "/holdings",
forecast: "/forecast",
dividends: '/dividends',
stats: '/stats',
news: '/news',
};
if (state !== 'overview' && sectionMap[state]) {
@ -419,6 +420,7 @@ $: {
const parts = $page?.url?.pathname?.split('/');
const sectionMap = {
'stats': 'stats',
'forecast': 'forecast',
'options': 'options',
'holdings': 'holdings',
'dividends': 'dividends',
@ -670,6 +672,12 @@ $: {
</a>
<div class="{displaySection === 'stats' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]" />
</li>
<li class="cursor-pointer flex flex-col items-center">
<a href={`/etf/${$etfTicker}/forecast`} id="item10" on:click={() => (changeSection('forecast','item10'))} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'forecast' ? 'text-white ' : 'bg-[#09090B]'}" >
Forecast
</a>
<div class="{displaySection === 'forecast' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3rem]" />
</li>
<li class="cursor-pointer flex flex-col items-center">
<a href={`/etf/${$etfTicker}/options`} id="item3" on:click={() => (changeSection('options','item3'))} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'options' ? 'text-white ' : 'bg-[#09090B]'}" >
Options

27
src/routes/etf/[tickerID]/+page.svelte
View File

@ -1296,32 +1296,7 @@ async function exportData() {
{/await}
</div>
</Lazy>
<Lazy>
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$priceAnalysisComponent ? 'hidden' : ''}">
{#await import('$lib/components/PriceAnalysis.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data} />
{/await}
</div>
</Lazy>
<Lazy>
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$trendAnalysisComponent ? 'hidden' : ''}">
{#await import('$lib/components/TrendAnalysis.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data} />
{/await}
</div>
</Lazy>
<Lazy>
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$sentimentComponent ? 'hidden' : ''}">
{#await import('$lib/components/SentimentAnalysis.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data} />
{/await}
</div>
</Lazy>
<Lazy>
<div class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$varComponent ? 'hidden' : ''}">
{#await import('$lib/components/VaR.svelte') then {default: Comp}}

77
src/routes/etf/[tickerID]/forecast/+layout.svelte Normal file
View File

@ -0,0 +1,77 @@
<script lang="ts">
import { stockTicker, screenWidth } from "$lib/store";
import { onDestroy } from "svelte";
import { page } from "$app/stores";
let displaySubSection = "overview";
if (displaySubSection) {
const parts = $page?.url?.pathname.split("/");
const sectionMap = {
overview: "overview",
ai: "ai",
analyst: "analyst",
};
const foundSection = parts?.find((part) => Object?.values(sectionMap)?.includes(part));
displaySubSection = Object?.keys(sectionMap)?.find((key) => sectionMap[key] === foundSection) || "overview";
}
function changeSubSection(state) {
const subSectionMap = {
overview: "/forecast",
ai: "/forecast/ai",
analyst: "/forecast/analyst",
};
if (state !== "overview" && subSectionMap[state]) {
displaySubSection = state;
//goto(`/stocks/${$stockTicker}${subSectionMap[state]}`);
} else {
displaySubSection = state;
//goto(`/stocks/${$stockTicker}/stats`);
}
}
const unsubscribe = page.subscribe(($page) => {
const splitRoute = $page.url.pathname.split("/");
const routeState = splitRoute[splitRoute.length - 1] !== "forecast" ? splitRoute[splitRoute.length - 1] : "overview";
changeSubSection(routeState);
});
onDestroy(() => {
unsubscribe();
});
</script>
<section class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
<div class="m-auto h-full overflow-hidden">
<slot />
</div>
</section>
<style>
.scrollbar {
display: grid;
grid-gap: 18px;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
grid-auto-flow: column;
overflow-x: auto;
scrollbar-width: thin; /* Hide the default scrollbar in Firefox */
scrollbar-color: transparent transparent; /* Hide the default scrollbar in Firefox */
}
/* Custom scrollbar for Webkit (Chrome, Safari) */
.scrollbar::-webkit-scrollbar {
width: 0; /* Hide the width of the scrollbar */
height: 0; /* Hide the height of the scrollbar */
}
.scrollbar::-webkit-scrollbar-thumb {
background: transparent; /* Make the thumb transparent */
}
</style>

54
src/routes/etf/[tickerID]/forecast/+page.server.ts Normal file
View File

@ -0,0 +1,54 @@
export const load = async ({ locals, params }) => {
const { apiURL, apiKey } = locals;
const postData = {
ticker: params.tickerID,
};
const getAnalystInsight = async () => {
const response = await fetch(apiURL + "/analyst-insight", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": apiKey,
},
body: JSON.stringify(postData),
});
const output = await response.json();
return output;
};
const getPriceAnalysis = async () => {
const response = await fetch(apiURL + "/price-analysis", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": apiKey,
},
body: JSON.stringify(postData),
});
const output = await response.json();
return output;
};
const getSentimentAnalysis = async () => {
const response = await fetch(apiURL + "/sentiment-analysis", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": apiKey,
},
body: JSON.stringify(postData),
});
const output = await response.json();
return output;
};
// Make sure to return a promise
return {
getAnalystInsight: await getAnalystInsight(),
getPriceAnalysis: await getPriceAnalysis(),
getSentimentAnalysis: await getSentimentAnalysis(),
};
};

63
src/routes/etf/[tickerID]/forecast/+page.svelte Normal file
View File

@ -0,0 +1,63 @@
<script lang="ts">
import { numberOfUnreadNotification, displayCompanyName, stockTicker, sentimentComponent, priceAnalysisComponent } from "$lib/store";
import PriceAnalysis from "$lib/components/PriceAnalysis.svelte";
import SentimentAnalysis from "$lib/components/SentimentAnalysis.svelte";
import AnalystInsight from "$lib/components/AnalystInsight.svelte";
import Lazy from "$lib/components/Lazy.svelte";
export let data;
</script>
<svelte:head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
{$displayCompanyName} ({$stockTicker}) Forecast AI · stocknear
</title>
<meta name="description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
<!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Forecast AI · stocknear`} />
<meta property="og:description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
<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={`${$displayCompanyName} (${$stockTicker}) Forecast AI · stocknear`} />
<meta name="twitter:description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full">
<div class="flex justify-center m-auto h-full overflow-hidden w-full">
<div class="relative flex justify-center items-center overflow-hidden w-full">
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
<Lazy>
<div class="w-full mt-10 sm:mt-0 m-auto sm:pt-6 {Object?.keys(data?.getAnalystInsight)?.length === 0 ? 'hidden' : ''}">
<AnalystInsight data={data} />
</div>
</Lazy>
<Lazy>
<div class="w-full mt-10 sm:mt-5 m-auto sm:pb-6 sm:pt-6 {Object?.keys(data?.getPriceAnalysis)?.length === 0 ? 'hidden' : ''}">
<PriceAnalysis data={data} />
</div>
</Lazy>
<Lazy>
<div class="w-full mt-10 sm:mt-5 m-auto sm:pb-6 sm:pt-6 {data?.getSentimentAnalysis?.length === 0 ? 'hidden' : ''}">
<SentimentAnalysis data={data} />
</div>
</Lazy>
</div>
</div>
</div>
</section>

46
src/routes/stocks/[tickerID]/forecast/ai/+page.server.ts
View File

@ -1,13 +1,10 @@
export const load = async ({ locals, params }) => {
const getAnalystTickerHistory = async () => {
const { apiURL, apiKey } = locals;
const postData = {
ticker: params.tickerID,
};
// make the POST request to the endpoint
const response = await fetch(apiURL + "/analyst-ticker-history", {
const { apiURL, apiKey } = locals;
const postData = {
ticker: params.tickerID,
};
const getAnalystInsight = async () => {
const response = await fetch(apiURL + "/analyst-insight", {
method: "POST",
headers: {
"Content-Type": "application/json",
@ -17,12 +14,41 @@ export const load = async ({ locals, params }) => {
});
const output = await response.json();
return output;
};
const getPriceAnalysis = async () => {
const response = await fetch(apiURL + "/price-analysis", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": apiKey,
},
body: JSON.stringify(postData),
});
const output = await response.json();
return output;
};
const getSentimentAnalysis = async () => {
const response = await fetch(apiURL + "/sentiment-analysis", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": apiKey,
},
body: JSON.stringify(postData),
});
const output = await response.json();
return output;
};
// Make sure to return a promise
return {
getAnalystTickerHistory: await getAnalystTickerHistory(),
getAnalystInsight: await getAnalystInsight(),
getPriceAnalysis: await getPriceAnalysis(),
getSentimentAnalysis: await getSentimentAnalysis(),
};
};

25
src/routes/stocks/[tickerID]/forecast/ai/+page.svelte
View File

@ -1,8 +1,6 @@
<script lang="ts">
import { numberOfUnreadNotification, displayCompanyName, stockTicker, analystInsightComponent, sentimentComponent, trendAnalysisComponent, priceAnalysisComponent, fundamentalAnalysisComponent } from "$lib/store";
import { numberOfUnreadNotification, displayCompanyName, stockTicker, sentimentComponent, priceAnalysisComponent } from "$lib/store";
import PriceAnalysis from "$lib/components/PriceAnalysis.svelte";
import TrendAnalysis from "$lib/components/TrendAnalysis.svelte";
import FundamentalAnalysis from "$lib/components/FundamentalAnalysis.svelte";
import SentimentAnalysis from "$lib/components/SentimentAnalysis.svelte";
import AnalystInsight from "$lib/components/AnalystInsight.svelte";
@ -33,36 +31,29 @@
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full">
<div class="flex justify-center m-auto h-full overflow-hidden w-full">
<div class="relative flex justify-center items-center overflow-hidden w-full">
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
<Lazy>
<div class="w-full mt-10 sm:mt-0 m-auto sm:pt-6 {!$analystInsightComponent ? 'hidden' : ''}">
<div class="w-full mt-10 sm:mt-0 m-auto sm:pt-6 {Object?.keys(data?.getAnalystInsight)?.length === 0 ? 'hidden' : ''}">
<AnalystInsight data={data} />
</div>
</Lazy>
<Lazy>
<div class="w-full mt-10 sm:mt-5 m-auto sm:pb-6 sm:pt-6 {!$priceAnalysisComponent ? 'hidden' : ''}">
<div class="w-full mt-10 sm:mt-5 m-auto sm:pb-6 sm:pt-6 {Object?.keys(data?.getPriceAnalysis)?.length === 0 ? 'hidden' : ''}">
<PriceAnalysis data={data} />
</div>
</Lazy>
<Lazy>
<div class="w-full mt-10 sm:mt-5 m-auto sm:pb-6 sm:pt-6 {!$trendAnalysisComponent ? 'hidden' : ''}">
<TrendAnalysis data={data} />
</div>
</Lazy>
<Lazy>
<div class="w-full mt-10 sm:mt-5 m-auto sm:pb-6 sm:pt-6 {!$fundamentalAnalysisComponent ? 'hidden' : ''}">
<FundamentalAnalysis data={data} />
</div>
</Lazy>
<Lazy>
<div class="w-full mt-10 sm:mt-5 m-auto sm:pb-6 sm:pt-6 {!$sentimentComponent ? 'hidden' : ''}">
<div class="w-full mt-10 sm:mt-5 m-auto sm:pb-6 sm:pt-6 {data?.getSentimentAnalysis?.length === 0 ? 'hidden' : ''}">
<SentimentAnalysis data={data} />
</div>
</Lazy>