From 90f504c3283b3ee3453f1da7bdc782d2d0f51634 Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Mon, 2 Dec 2024 15:46:27 +0100 Subject: [PATCH] add ratings chart to analyst page --- src/lib/components/RatingsChart.svelte | 68 +++++++++++++++++++------ src/routes/analysts/[slug]/+page.svelte | 15 +++--- 2 files changed, 62 insertions(+), 21 deletions(-) diff --git a/src/lib/components/RatingsChart.svelte b/src/lib/components/RatingsChart.svelte index 16233e1d..82ca3c15 100644 --- a/src/lib/components/RatingsChart.svelte +++ b/src/lib/components/RatingsChart.svelte @@ -7,7 +7,6 @@ GridComponent, TooltipComponent, MarkPointComponent, - MarkLineComponent, } from "echarts/components"; import { CanvasRenderer } from "echarts/renderers"; use([ @@ -16,7 +15,6 @@ GridComponent, TooltipComponent, MarkPointComponent, - MarkLineComponent, CanvasRenderer, ]); @@ -118,13 +116,13 @@ // Prepare markPoints for ratings const markPoints = ratingsList - .filter((rating) => { + ?.filter((rating) => { // Ensure date format is correct and matches - return dates.includes(rating.date); + return dates.includes(rating?.date) && rating?.ticker === symbol; }) .map((rating) => ({ // Marker at the rating's date - type: "1Y", // Marking the rating date + type: "max", // Marking the rating date name: rating.rating_current, coord: [ rating.date, @@ -133,10 +131,10 @@ label: { formatter: rating.rating_current, // Display the rating_current text position: "top", // Position the label above the point - color: "yellow", // Set label color (can be customized) + color: "white", // Set label color (can be customized) fontSize: 14, // Set font size (increase for better visibility) }, - symbol: "circle", // Symbol type (can be customized) + symbol: "rectangle", // Symbol type (can be customized) symbolSize: 12, // Increase symbol size for better visibility itemStyle: { color: "red", // Set symbol color to red for better visibility @@ -145,16 +143,44 @@ const series = [ { - name: "Price", // Name of the series - data: closeValues, // Use close values - type: "line", // Line chart - smooth: true, // Smooth lines - showSymbol: false, // Hide symbols on data points + name: "Price", + data: closeValues, + type: "line", + smooth: true, + showSymbol: false, areaStyle: { - color: "rgba(255, 255, 255, 0.08)", // Set the area color to a white color with opacity + color: "rgba(255, 255, 255, 0.08)", }, lineStyle: { - color: "#fff", // Set the line color to white + color: "#fff", + width: 1, + }, + markPoint: { + data: markPoints.map((point) => { + let pinColor = "#FF0000"; // Default to red (Sell, Strong Sell) + // Set the color based on the label + if (["Buy", "Strong Buy"]?.includes(point?.label?.formatter)) { + pinColor = "#00FF00"; // Green for Buy, Strong Buy + } else if (["Hold", "Neutral"]?.includes(point?.label?.formatter)) { + pinColor = "#FFA500"; // Orange for Hold + } + + return { + name: point.name, + coord: point.coord, + label: { + ...point.label, + fontSize: 16, // Increase font size + fontWeight: "bold", // Make label bold + color: "#fff", // Change label color to white + }, + symbol: "pin", // Use pin symbol + symbolSize: 20, // Increase symbol size + itemStyle: { + color: pinColor, // Apply the dynamically set color + }, + }; + }), }, }, ]; @@ -216,7 +242,7 @@ } $: { - if (symbol && typeof window !== "undefined") { + if (symbol && typeof window !== "undefined" && timePeriod) { isLoaded = false; optionsData = null; historicalData = []; @@ -230,6 +256,18 @@
{#if isLoaded && optionsData !== null}
+
+ {#each ["1Y", "3Y", "5Y", "Max"] as item} + + {/each} +

diff --git a/src/routes/analysts/[slug]/+page.svelte b/src/routes/analysts/[slug]/+page.svelte index 2f0b73b7..b05ff618 100644 --- a/src/routes/analysts/[slug]/+page.svelte +++ b/src/routes/analysts/[slug]/+page.svelte @@ -84,8 +84,10 @@ } $: charNumber = $screenWidth < 640 ? 20 : 40; - let columns = [ - { key: "chart", label: "", align: "right" }, + $: columns = [ + ...($screenWidth > 1024 + ? [{ key: "chart", label: "", align: "right" }] + : []), { key: "ticker", label: "Name", align: "left" }, { key: "rating_current", label: "Action", align: "left" }, { key: "adjusted_pt_current", label: "Price Target", align: "right" }, @@ -95,7 +97,7 @@ { key: "date", label: "Updated", align: "right" }, ]; - let sortOrders = { + $: sortOrders = { chart: { order: "none", type: "string" }, ticker: { order: "none", type: "string" }, rating_current: { order: "none", type: "string" }, @@ -388,7 +390,7 @@ -