add ratings chart to analyst page

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
+        name: "Price",
-        data: closeValues, // Use close values
+        data: closeValues,
-        type: "line", // Line chart
+        type: "line",
-        smooth: true, // Smooth lines
+        smooth: true,
-        showSymbol: false, // Hide symbols on data points
+        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 @@
 <div class="w-full overflow-hidden m-auto mt-5">
   {#if isLoaded && optionsData !== null}
     <div class="app w-full relative">
+      <div class="flex justify-start space-x-4 absolute left-20 top-0 z-10">
+        {#each ["1Y", "3Y", "5Y", "Max"] as item}
+          <label
+            on:click={() => (timePeriod = item)}
+            class="px-4 py-2 {timePeriod === item
+              ? 'bg-[#27272A]'
+              : ''} sm:hover:bg-[#27272A] border border-gray-600 text-white rounded-md cursor-pointer"
+          >
+            {item}
+          </label>
+        {/each}
+      </div>
       <h2
         class="text-white text-xl font-semibold text-center absolute left-1/2 transform -translate-x-1/2 top-5 -translate-y-1/2"
       >

src/routes/analysts/[slug]/+page.svelte

@@ -84,8 +84,10 @@
   }
   $: charNumber = $screenWidth < 640 ? 20 : 40;
 
-  let columns = [
+  $: columns = [
-    { key: "chart", label: "", align: "right" },
+    ...($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 @@
                       <tr
                         class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A]"
                       >
-                        <td
+                        <td class="hidden lg:table-cell"
                           ><button
                             on:click={() => openGraph(item?.ticker)}
                             class="h-full pl-2 pr-2 align-middle lg:pl-3"
@@ -564,14 +566,15 @@
                               <div class="relative h-[400px]">
                                 <div class="absolute top-0 w-full">
                                   <div
-                                    class="h-[250px] w-full border-gray-600 xs:h-[300px] sm:h-[400px] md:border"
+                                    class="h-[250px] w-full xs:h-[300px] sm:h-[400px]"
                                     style="overflow: hidden;"
                                   >
                                     <div
                                       style="position: relative; height: 0px; z-index: 1;"
                                     >
                                       <RatingsChart
-                                        ratingsList={rawData}
+                                        ratingsList={data?.getAnalystStats
+                                          ?.ratingsList}
                                         symbol={item?.ticker}
                                         numOfRatings={item?.ratings}
                                       />