From 396f07292dd06837fb6bf81b61719460ce741e77 Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Thu, 13 Mar 2025 00:40:15 +0100 Subject: [PATCH] ui fix --- src/lib/components/AIScore.svelte | 13 +- src/routes/pricing/+page.svelte | 4 +- .../[tickerID]/forecast/ai/+layout.svelte | 28 ++- .../[tickerID]/forecast/ai/+page.svelte | 204 ++++++++++-------- 4 files changed, 148 insertions(+), 101 deletions(-) diff --git a/src/lib/components/AIScore.svelte b/src/lib/components/AIScore.svelte index f0dcd152..642d9d3f 100644 --- a/src/lib/components/AIScore.svelte +++ b/src/lib/components/AIScore.svelte @@ -29,7 +29,12 @@ -
+
{:else} - +
@@ -99,11 +104,11 @@
- +
{/if}
- +

{#if ["Pro", "Plus"]?.includes(tier)} {#if score === 10} diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte index ecbf897a..f00894ac 100644 --- a/src/routes/pricing/+page.svelte +++ b/src/routes/pricing/+page.svelte @@ -123,7 +123,7 @@ fill="currentColor" stroke-width="0" viewBox="0 0 576 512" - class="text-yellow-400 dark:text-zinc-400 mr-2" + class="text-muted dark:text-indigo-400 mr-2" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" @@ -1043,7 +1043,7 @@
diff --git a/src/routes/stocks/[tickerID]/forecast/ai/+layout.svelte b/src/routes/stocks/[tickerID]/forecast/ai/+layout.svelte index 3e3e8ddb..350c5487 100644 --- a/src/routes/stocks/[tickerID]/forecast/ai/+layout.svelte +++ b/src/routes/stocks/[tickerID]/forecast/ai/+layout.svelte @@ -36,13 +36,14 @@
-

Revenue Definition

+

AI Score Definition

Revenue, also called sales, is the amount of money a company receives from its business activities, such as sales of products or services. Revenue does not take any expenses into account and is therefore different from profits.
+ +
+ +
+

+ AI Trend Forecast Definition +

+
+ Revenue, also called sales, is the amount of money a company + receives from its business activities, such as sales of products + or services. Revenue does not take any expenses into account and + is therefore different from profits. +
+
diff --git a/src/routes/stocks/[tickerID]/forecast/ai/+page.svelte b/src/routes/stocks/[tickerID]/forecast/ai/+page.svelte index 27a1ed4d..a8c7e8df 100644 --- a/src/routes/stocks/[tickerID]/forecast/ai/+page.svelte +++ b/src/routes/stocks/[tickerID]/forecast/ai/+page.svelte @@ -122,6 +122,9 @@ return dataPoint; }); + const solidData = processedData.slice(0, -1); + const lastTwoPoints = processedData.slice(-2); // Extract the last two points + // Highcharts options for plotting the data with markers. const options = { chart: { @@ -175,7 +178,7 @@ series: [ { name: "Close Price", - data: processedData, + data: solidData, color: $mode === "light" ? "#007050" : "#fff", animation: false, marker: { @@ -183,7 +186,19 @@ }, lineWidth: 2, }, + { + name: "Projected Price", + data: lastTwoPoints, // Include the second-last and last point + color: $mode === "light" ? "#007050" : "#fff", + animation: false, + marker: { + enabled: false, + }, + lineWidth: 2, + dashStyle: "Dash", // Dashed line for the last part + }, ], + plotOptions: { series: { enableMouseTracking: false, @@ -374,92 +389,6 @@ }, }, ], - /* - annotations: [ - { - labels: [ - { - point: { - x: forecastHigh[forecastHigh.length - 1][0], // Last X (timestamp) - y: forecastHigh[forecastHigh.length - 1][1], // Last Y (Average value) - xAxis: 0, - yAxis: 0, - }, - text: `High
$${forecastHigh[forecastHigh.length - 1][1]}`, - useHTML: true, - style: { - backgroundColor: "rgba(0, 0, 0, 0.8)", - borderColor: "rgba(255, 255, 255, 0.2)", - borderWidth: 1, - fontSize: "12px", - fontWeight: "bold", - }, - align: "left", - verticalAlign: "middles", - x: -10, - y: 0, - backgroundColor: "rgba(0, 0, 0, 0.8)", - borderColor: "rgba(255, 255, 255, 0.2)", - borderWidth: 1, - padding: 8, - shape: "", - }, - { - point: { - x: forecastAvg[forecastAvg.length - 1][0], // Last X (timestamp) - y: forecastAvg[forecastAvg.length - 1][1], // Last Y (Average value) - xAxis: 0, - yAxis: 0, - }, - text: `Average
$${forecastAvg[forecastAvg.length - 1][1]}`, - useHTML: true, - style: { - backgroundColor: "rgba(0, 0, 0, 0.8)", - borderColor: "rgba(255, 255, 255, 0.2)", - borderWidth: 1, - fontSize: "12px", - fontWeight: "bold", - }, - align: "right", - verticalAlign: "middle", - x: -10, - y: 30, - backgroundColor: "rgba(0, 0, 0, 0.8)", - borderColor: "rgba(255, 255, 255, 0.2)", - borderWidth: 1, - padding: 5, - shape: "", - }, - { - point: { - x: forecastLow[forecastLow.length - 1][0], // Last X (timestamp) - y: forecastLow[forecastLow.length - 1][1], // Last Y (Average value) - xAxis: 0, - yAxis: 0, - }, - text: `Low
$${forecastLow[forecastLow.length - 1][1]}`, - useHTML: true, - style: { - backgroundColor: "rgba(0, 0, 0, 0.8)", - borderColor: "rgba(255, 255, 255, 0.2)", - borderWidth: 1, - fontSize: "12px", - fontWeight: "bold", - }, - align: "top", - verticalAlign: "middle", - x: -10, - y: -40, - backgroundColor: "rgba(0, 0, 0, 0.8)", - borderColor: "rgba(255, 255, 255, 0.2)", - borderWidth: 1, - padding: 5, - shape: "", - }, - ], - }, - ], - */ legend: { enabled: false, @@ -477,7 +406,7 @@ $: { if ($mode) { configScore = getAIScorePlot() || null; - config = getAIScorePlot() || null; + config = getPriceForecastChart() || null; } } @@ -494,13 +423,100 @@ >
-
-

- {removeCompanyStrings($displayCompanyName)} Trend Forecast -

-
+ {#if Object?.keys(data?.getPriceAnalysis)?.length > 0} +
+

+ {removeCompanyStrings($displayCompanyName)} AI Score +

+
+
+ + +
+
+
+ +
+ + + + + + + + + + + + + + + +
Date Q1 '23Q2 '23Q3 '23Q4 '23
Score8 (Bullish)9 (Bullish)8 (Bullish)7 (Hold)
QoQ Change 0 + ? "before:content-['+'] text-green-600 dark:text-[#00FC50]" + : "text-red-600 dark:text-[#FF2F1F]"} + >{lowChange}% 0 + ? "before:content-['+'] text-green-600 dark:text-[#00FC50]" + : "text-red-600 dark:text-[#FF2F1F]"} + >{avgChange}% 0 + ? "before:content-['+'] text-green-600 dark:text-[#00FC50]" + : "text-red-600 dark:text-[#FF2F1F]"} + >{medianChange}% 0 + ? "before:content-['+'] text-green-600 dark:text-[#00FC50]" + : "text-red-600 dark:text-[#FF2F1F]"} + >{highChange}%
+
+ +

+ Following the AI Score for {removeCompanyStrings( + $displayCompanyName, + )} the model shows that the total return would be + +22.2%, with a maximum drawdown of + -12% based on the backtesting results. +

+
+
+
+ {/if} {#if Object?.keys(data?.getPriceAnalysis)?.length > 0} +
+

+ {removeCompanyStrings($displayCompanyName)} Trend Forecast +

+