From f073e07edf1106f704cebd2ccf8f711aba7085dd Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Thu, 31 Oct 2024 18:18:24 +0100 Subject: [PATCH] ui fixes --- .../{+page.server.ts => +layout.server.ts} | 101 +++++++------ .../stocks/[tickerID]/forecast/+layout.svelte | 9 +- .../stocks/[tickerID]/forecast/+page.svelte | 134 ++++++++++++++---- .../forecast/analyst/+page.server.ts | 29 ---- 4 files changed, 171 insertions(+), 102 deletions(-) rename src/routes/stocks/[tickerID]/forecast/{+page.server.ts => +layout.server.ts} (61%) delete mode 100644 src/routes/stocks/[tickerID]/forecast/analyst/+page.server.ts diff --git a/src/routes/stocks/[tickerID]/forecast/+page.server.ts b/src/routes/stocks/[tickerID]/forecast/+layout.server.ts similarity index 61% rename from src/routes/stocks/[tickerID]/forecast/+page.server.ts rename to src/routes/stocks/[tickerID]/forecast/+layout.server.ts index 01c6375d..86fefe3b 100644 --- a/src/routes/stocks/[tickerID]/forecast/+page.server.ts +++ b/src/routes/stocks/[tickerID]/forecast/+layout.server.ts @@ -1,41 +1,60 @@ -export const load = async ({ locals, params }) => { - const { apiURL, apiKey } = locals; - const postData = { - ticker: params.tickerID, - }; - const getAnalystEstimate = async () => { - // make the POST request to the endpoint - const response = await fetch(apiURL + "/analyst-estimate", { - method: "POST", - headers: { - "Content-Type": "application/json", - "X-API-KEY": apiKey, - }, - body: JSON.stringify(postData), - }); - - const output = await response.json(); - - return output; - }; - - 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; - }; - - // Make sure to return a promise - return { - getAnalystEstimate: await getAnalystEstimate(), - getAnalystInsight: await getAnalystInsight(), - }; -}; +export const load = async ({ locals, params }) => { + const { apiURL, apiKey, user } = locals; + const postData = { + ticker: params.tickerID, + }; + + const getAnalystTickerHistory = async () => { + // make the POST request to the endpoint + const response = await fetch(apiURL + "/analyst-ticker-history", { + method: "POST", + headers: { + "Content-Type": "application/json", + "X-API-KEY": apiKey, + }, + body: JSON.stringify(postData), + }); + + let output = await response.json(); + output = user?.tier !== "Pro" ? output?.slice(0, 6) : output; + + return output; + }; + + const getAnalystEstimate = async () => { + // make the POST request to the endpoint + const response = await fetch(apiURL + "/analyst-estimate", { + method: "POST", + headers: { + "Content-Type": "application/json", + "X-API-KEY": apiKey, + }, + body: JSON.stringify(postData), + }); + + const output = await response.json(); + + return output; + }; + + 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; + }; + + // Make sure to return a promise + return { + getAnalystEstimate: await getAnalystEstimate(), + getAnalystInsight: await getAnalystInsight(), + getAnalystTickerHistory: await getAnalystTickerHistory(), + }; +}; diff --git a/src/routes/stocks/[tickerID]/forecast/+layout.svelte b/src/routes/stocks/[tickerID]/forecast/+layout.svelte index 61443f10..a133ea3b 100644 --- a/src/routes/stocks/[tickerID]/forecast/+layout.svelte +++ b/src/routes/stocks/[tickerID]/forecast/+layout.svelte @@ -26,13 +26,10 @@ function changeSubSection(state) { const subSectionMap = { overview: "/forecast", - ai: "/forecast/ai", + //ai: "/forecast/ai", analyst: "/forecast/analyst", }; - console.log(state); - console.log(subSectionMap[state]); - if (state !== "overview" && subSectionMap[state]) { displaySubSection = state; //goto(`/stocks/${$stockTicker}${subSectionMap[state]}`); @@ -86,6 +83,7 @@ : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]" /> +
  • - Analysts + Analysts Ratings
    @@ -124,9 +123,6 @@ itemStyle: { color: colors[idx], }, - tooltip: { - valueFormatter: (value) => `${value.toFixed(2)}%`, - }, })); // Define chart option @@ -138,12 +134,7 @@ top: "5%", containLabel: true, }, - tooltip: { - trigger: "axis", - axisPointer: { - type: "shadow", - }, - }, + legend: { data: categories, bottom: 0, @@ -153,6 +144,12 @@ data: rawAnalystList.map((item) => item.date), axisLabel: { color: "#fff", + formatter: function (value) { + const dateParts = value.split("-"); + const year = dateParts[0].substring(0); + const monthIndex = parseInt(dateParts[1]) - 1; + return `${monthNames[monthIndex]} ${year}`; + }, }, }, yAxis: { @@ -168,11 +165,96 @@ }, series, animation: false, + silent: true, }; return option; } + function getPieChart() { + const consensusRating = "Buy"; + let value; + // Determine the value based on the consensus rating + switch (consensusRating) { + case "Strong Sell": + value = 0; + break; + case "Sell": + value = 0.25; + break; + case "Hold": + value = 0.5; + break; + case "Buy": + value = 0.75; + break; + case "Strong Buy": + value = 1; + break; + default: + value = 0.5; + break; + } + const option = { + silent: true, + animation: false, + series: [ + { + type: "gauge", + startAngle: 180, + endAngle: 0, + center: ["50%", "45%"], + radius: "70%", + min: 0, + max: 1, + splitNumber: 4, + axisLine: { + lineStyle: { + width: 25, + color: [ + [0.2, "#9E190A"], + [0.4, "#D9220E"], + [0.6, "#FF9E21"], + [0.8, "#31B800"], + [1, "#008A00"], + ], + }, + }, + pointer: { + icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z", + length: "25%", + width: 20, + offsetCenter: [0, "-30%"], + itemStyle: { + color: "#fff", + }, + }, + axisTick: { + length: 0, + }, + splitLine: { + length: 0, + }, + axisLabel: { + show: false, + }, + detail: { + show: false, // Hide the numerical value display + }, + data: [ + { + value: value, + label: { + show: false, // Hide the data label + }, + }, + ], + }, + ], + }; + return option; + } + if (data?.getAnalystEstimate?.length !== 0) { index = findIndex(data?.getAnalystEstimate); @@ -198,6 +280,7 @@ } let optionsData = getPlotOptions() || null; + let optionsPieChart = getPieChart() || null; @@ -265,20 +348,17 @@ stock have an median target of {medianPriceTarget}, with a low estimate of {lowPriceTarget} and a high estimate of {highPriceTarget}. The median target - predicts an increase of {medianChange}% from the current stock - price of {price}. + predicts {medianChange > 0 ? "an increase" : "a decrease"} of {medianChange}% + from the current stock price of {price}.

    -
    - +
    + {#if optionsPieChart !== null} + + {/if}
    -
    +
    Analyst Consensus: {lowChange}%{medianChange}% 0 @@ -674,7 +754,7 @@ @media (max-width: 640px) { .app { - height: 210px; + height: 300px; } } diff --git a/src/routes/stocks/[tickerID]/forecast/analyst/+page.server.ts b/src/routes/stocks/[tickerID]/forecast/analyst/+page.server.ts deleted file mode 100644 index c34681fd..00000000 --- a/src/routes/stocks/[tickerID]/forecast/analyst/+page.server.ts +++ /dev/null @@ -1,29 +0,0 @@ -export const load = async ({ locals, params }) => { - const getAnalystTickerHistory = async () => { - const { apiURL, apiKey, user } = locals; - - const postData = { - ticker: params.tickerID, - }; - - // make the POST request to the endpoint - const response = await fetch(apiURL + "/analyst-ticker-history", { - method: "POST", - headers: { - "Content-Type": "application/json", - "X-API-KEY": apiKey, - }, - body: JSON.stringify(postData), - }); - - let output = await response.json(); - output = user?.tier !== "Pro" ? output?.slice(0, 6) : output; - - return output; - }; - - // Make sure to return a promise - return { - getAnalystTickerHistory: await getAnalystTickerHistory(), - }; -};