update ratings chart

src/lib/components/RatingsChart.svelte

@@ -1,23 +1,7 @@
 <script lang="ts">
-  import { Chart } from "svelte-echarts";
   import { setCache, getCache } from "$lib/store";
-  import { init, use } from "echarts/core";
-  import { LineChart, BarChart } from "echarts/charts";
   import { monthNames } from "$lib/utils";
-  import {
+  import highcharts from "$lib/highcharts.ts";
-    GridComponent,
-    TooltipComponent,
-    MarkPointComponent,
-  } from "echarts/components";
-  import { CanvasRenderer } from "echarts/renderers";
-  use([
-    LineChart,
-    BarChart,
-    GridComponent,
-    TooltipComponent,
-    MarkPointComponent,
-    CanvasRenderer,
-  ]);
 
   export let data;
   export let symbol;
@@ -27,7 +11,7 @@
   export let addToLast = false; //if date value not found at mark point to the last value date.
 
   let isLoaded = false;
-  let optionsData = null;
+  let config = null;
   let historicalData = [];
   let timePeriod = "1Y";
 
@@ -92,7 +76,7 @@
 
       setCache(symbol, historicalData, "ratingsChart");
     }
-    optionsData = plotData();
+    config = plotData();
   }
 
   // Function to plot data based on a specified time period
@@ -102,34 +86,31 @@
       historicalData,
       timePeriod,
     );
-    // Prepare markPoints for ratings
+
-    const markPoints = ratingsList
+    // Process ratings for markers
-      ?.filter((rating) => {
+    const markers = [];
-        // Ensure date format is correct and matches the ticker symbol
+
-        return rating?.ticker === symbol;
+    if (ratingsList && ratingsList.length > 0) {
-      })
+      ratingsList
-      ?.map((rating) => {
+        ?.filter((rating) => rating?.ticker === symbol)
+        ?.forEach((rating) => {
           let dateIndex;
 
           if (addToLast) {
             // If addToLast is true, use fallback logic for the last date
             dateIndex = dates.includes(rating?.date)
-            ? dates.indexOf(rating?.date)
+              ? dates?.indexOf(rating?.date)
-            : dates.length - 1;
+              : dates?.length - 1;
           } else {
             // If addToLast is false, use the original logic
-          dateIndex = dates.indexOf(rating?.date);
+            dateIndex = dates?.indexOf(rating?.date);
           }
 
-        return {
+          // Skip if date index is invalid
-          type: "max", // Marking the rating date
+          if (dateIndex === -1) return;
-          name: rating?.type,
+
-          coord: [
+          // Format the rating type
-            dates[dateIndex], // Use the found date or the last date
+          const formattedType = rating?.type
-            closeValues[dateIndex], // Close value corresponding to the date
-          ],
-          label: {
-            formatter: rating?.type
             ?.replace("Bought", "Buy")
             ?.replace("Sold", "Sell")
             ?.replace("Sector Perform", "Hold")
@@ -140,129 +121,175 @@
             ?.replace("Outperform", "Buy")
             ?.replace("Market Underperform", "Sell")
             ?.replace("Underperform", "Sell")
-              ?.replace("Underweight", "Sell"),
+            ?.replace("Underweight", "Sell");
-            position: "top", // Position the label above the point
-            color: "white", // Set label color (can be customized)
-            fontSize: 14, // Set font size (increase for better visibility)
-          },
-          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
-          },
-        };
-      });
 
-    const series = [
+          // Determine marker color based on rating type
-      {
+          let markerColor = "#FF0000"; // Default to red (Sell)
-        name: "Price",
+          if (["Buy", "Strong Buy"].includes(formattedType)) {
-        data: closeValues,
+            markerColor = "#00FF00"; // Green for Buy ratings
-        type: "line",
+          } else if (["Hold", "Neutral"].includes(formattedType)) {
-        smooth: true,
+            markerColor = "#FFA500"; // Orange for Hold ratings
-        showSymbol: false,
-
-        lineStyle: {
-          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 {
+          // Add marker point
-              name: point.name,
+          markers.push({
-              coord: point.coord,
+            x: dateIndex,
-              label: {
+            y: closeValues[dateIndex],
-                ...point.label,
+            marker: {
-                fontSize: 16, // Increase font size
+              symbol: "triangle-down",
-                fontWeight: "bold", // Make label bold
+              radius: 6,
-                color: "#fff", // Change label color to white
+              fillColor: markerColor,
+              lineWidth: 2,
+              lineColor: "#FFFFFF",
             },
-              symbol: "pin", // Use pin symbol
+            dataLabels: {
-              symbolSize: 20, // Increase symbol size
+              enabled: true,
-              itemStyle: {
+              format: formattedType,
-                color: pinColor, // Apply the dynamically set color
+              style: {
+                color: "#FFFFFF",
+                fontWeight: "bold",
+                fontSize: "14px",
               },
-            };
+              y: -10,
-          }),
             },
-      },
+          });
-    ];
+        });
+    }
 
-    // Define chart options
+    // Create Highcharts options
     const options = {
-      animation: false,
+      chart: {
-      silent: true,
+        backgroundColor: "#09090B",
-      grid: {
+        height: 360,
-        left: "2%",
+      },
-        right: "2%",
+      credits: { enabled: false },
-        bottom: "10%",
+      legend: { enabled: false },
-        top: "10%",
+      title: {
-        containLabel: true,
+        text: `<h3 class="mt-3 mb-1">${symbol} - ${numOfRatings} Transaction</h3>`,
+        useHTML: true,
+        style: { color: "white" },
       },
       xAxis: {
-        type: "category",
+        type: "datetime",
-        data: dates, // Use the extracted dates
+        endOnTick: false,
-        axisLabel: {
+        categories: dates,
-          color: "#fff",
+        crosshair: {
-          formatter: function (value) {
+          color: "#fff", // Set the color of the crosshair line
-            // Assuming dates are in the format 'yyyy-mm-dd'
+          width: 1, // Adjust the line width as needed
-            const dateParts = value.split("-");
+          dashStyle: "Solid",
-            const year = dateParts[0].substring(2); // Extract last two digits of the year
-            const monthIndex = parseInt(dateParts[1]) - 1; // Zero-indexed months
-            return `${monthNames[monthIndex]} '${year}`;
         },
+        labels: {
+          style: {
+            color: "#fff",
+          },
+          distance: 20, // Increases space between label and axis
+          formatter: function () {
+            const date = new Date(this.value);
+            return date.toLocaleDateString("en-US", {
+              month: "short",
+              year: "numeric",
+            });
+          },
+        },
+        tickPositioner: function () {
+          // Create custom tick positions with wider spacing
+          const positions = [];
+          const info = this.getExtremes();
+          const tickCount = 5; // Reduce number of ticks displayed
+          const interval = Math.floor((info.max - info.min) / tickCount);
+
+          for (let i = 0; i <= tickCount; i++) {
+            positions.push(info.min + i * interval);
+          }
+          return positions;
         },
       },
       yAxis: {
-        show: false, // Completely hides the y-axis
+        gridLineWidth: 1,
-        type: "value",
+        gridLineColor: "#111827",
-        splitLine: {
+        labels: {
-          show: false, // Disable grid lines
+          style: { color: "white" },
         },
-        axisLabel: {
+        title: { text: null },
-          color: "#fff",
+        opposite: true,
       },
-      },
-
-      series: series, // Use the dynamically created series array
-
       tooltip: {
-        trigger: "axis",
+        shared: true,
-        hideDelay: 100,
+        useHTML: true,
-        borderColor: "#969696", // Black border color
+        backgroundColor: "rgba(0, 0, 0, 0.8)", // Semi-transparent black
-        borderWidth: 1, // Border width of 1px
+        borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border
-        backgroundColor: "#313131", // Optional: Set background color for contrast
+        borderWidth: 1,
-        textStyle: {
+        style: {
-          color: "#fff", // Optional: Text color for better visibility
+          color: "#fff",
+          fontSize: "16px",
+          padding: "10px",
         },
-        formatter: function (params) {
+        borderRadius: 4,
-          const date = params[0].name; // Get the date from the x-axis value
+        formatter: function () {
-          const dateParts = date.split("-");
+          // Format the x value to display time in hh:mm format
-          const year = dateParts[0];
+          let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">${this?.x}</span><br>`;
-          const monthIndex = parseInt(dateParts[1]) - 1;
-          const day = dateParts[2];
-          const formattedDate = `${monthNames[monthIndex]} ${day}, ${year}`;
 
-          // Return the tooltip content
+          // Loop through each point in the shared tooltip
-          return `${formattedDate}<br/> ${params[0].value}`;
+          this.points.forEach((point) => {
+            tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span> 
+          <span class="text-white font-normal text-sm" style="color:${point.color}">${
+            point.y
+          }</span><br>`;
+          });
+
+          return tooltipContent;
         },
       },
+      plotOptions: {
+        animation: false,
+        column: {
+          grouping: true,
+          shadow: false,
+          borderWidth: 0,
+        },
+      },
+
+      series: [
+        {
+          name: "Price",
+          data: closeValues.map((value, index) => {
+            return markers.some((marker) => marker.x === index)
+              ? { y: value } // Keeps the price plotted while allowing markers
+              : value;
+          }),
+          type: "area",
+          color: "#FFFFFF",
+          lineWidth: 1,
+          animation: false,
+          zIndex: 10,
+          fillColor: {
+            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+            stops: [
+              [0, "rgba(255, 255, 255, 0.1)"],
+              [1, "rgba(255, 255, 255, 0.001)"],
+            ],
+          },
+        },
+        {
+          name: "Ratings",
+          type: "scatter",
+          data: markers,
+          enableMouseTracking: false,
+          animation: false,
+          marker: {
+            enabled: true,
+          },
+        },
+      ],
     };
 
     return options;
   }
 
   $: {
-    if (symbol && typeof window !== "undefined" && timePeriod) {
+    if (symbol && timePeriod) {
       isLoaded = false;
-      optionsData = null;
+      config = null;
       historicalData = [];
 
       historicalPrice(symbol);
@@ -271,16 +298,18 @@
   }
 </script>
 
-<div class="w-full overflow-hidden m-auto mt-5">
+<div class="w-full overflow-hidden m-auto">
-  {#if isLoaded && optionsData !== null}
+  {#if isLoaded && config !== null}
     {#if historicalData?.length > 0}
-      <div class="app w-full relative">
+      <div class="relative">
-        <div class="flex justify-start space-x-2 absolute left-16 top-0 z-10">
+        <div
+          class="flex justify-start space-x-2 w-full ml-2 absolute top-3.5 z-10"
+        >
           {#each ["1Y", "3Y", "5Y", "Max"] as item, index}
             {#if data?.user?.tier === "Pro" || index === 0}
               <label
                 on:click={() => (timePeriod = item)}
-                class="px-4 py-2 {timePeriod === item
+                class="px-3 py-1 {timePeriod === item
                   ? 'bg-white text-black shadow-xl'
                   : 'text-white bg-table text-opacity-[0.6]'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
               >
@@ -307,14 +336,11 @@
             {/if}
           {/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"
-        >
-          {symbol} - {numOfRatings}
-          {title}
-        </h2>
-        <Chart {init} options={optionsData} class="chart" />
       </div>
+      <div
+        class="border border-gray-800 rounded w-full"
+        use:highcharts={config}
+      ></div>
     {:else}
       <div class="h-[250px] sm:h-[350px]">
         <div
@@ -340,21 +366,3 @@
     </div>
   {/if}
 </div>
-
-<style>
-  .app {
-    height: 400px;
-    width: 100%;
-  }
-
-  @media (max-width: 560px) {
-    .app {
-      width: 100%;
-      height: 300px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>

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

@@ -109,13 +109,13 @@
 />
 
 <section
-  class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pt-5 px-4 lg:px-3 mb-20"
+  class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pt-5 px-4 lg:px-3"
 >
   <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
       <li><a href="/" class="text-gray-300">Home</a></li>
       <li>
-        <a href="/politicians/flow-data" class="text-gray-300">Congress</a>
+        <a href="/politicians" class="text-gray-300">Congress</a>
       </li>
 
       <li class="text-gray-300">{name}</li>
@@ -163,7 +163,7 @@
                 </div>
               </div>
               <div
-                class="mt-4 grid grid-cols-2 overflow-hidden rounded border border-gray-600 py-2 text-center md:grid-cols-4 md:p-0 lg:mt-0 lg:border-none"
+                class="mt-4 grid grid-cols-2 overflow-hidden rounded border border-gray-800 py-2 text-center md:grid-cols-4 md:p-0 lg:mt-0 lg:border-none"
               >
                 <div class="flex flex-col px-4 py-2 bp:px-6 md:py-6">
                   <div
@@ -180,7 +180,7 @@
                 </div>
 
                 <div
-                  class="flex flex-col px-4 py-2 bp:px-6 sm:border-l sm:border-gray-600 md:py-6"
+                  class="flex flex-col px-4 py-2 bp:px-6 sm:border-l sm:border-gray-800 md:py-6"
                 >
                   <div
                     class="text-xl sm:text-2xl font-semibold tracking-tight text-white"
@@ -193,7 +193,7 @@
                 </div>
 
                 <div
-                  class="flex flex-col px-4 py-2 bp:px-6 sm:border-l sm:border-gray-600 md:py-6"
+                  class="flex flex-col px-4 py-2 bp:px-6 sm:border-l sm:border-gray-800 md:py-6"
                 >
                   <div
                     class="text-xl sm:text-2xl font-semibold tracking-tight text-white"
@@ -212,7 +212,7 @@
                   </div>
                 </div>
                 <div
-                  class="flex flex-col px-4 py-2 bp:px-6 sm:border-l sm:border-gray-600 md:py-6"
+                  class="flex flex-col px-4 py-2 bp:px-6 sm:border-l sm:border-gray-800 md:py-6"
                 >
                   <div
                     class="text-xl sm:text-2xl font-bold tracking-tight text-white"
@@ -229,7 +229,7 @@
             {#if mainSectors?.length !== 0}
               <div class="mb-10 mt-10 text-white">
                 <div
-                  class="relative my-3 space-y-2 rounded border border-gray-600 sm:my-6 p-4"
+                  class="relative my-3 space-y-2 rounded border border-gray-800 sm:my-6 p-4"
                 >
                   <div class="flex flex-col sm:flex-row">
                     <div class="mb-2 font-semibold sm:mb-0">Main Sectors:</div>
@@ -265,9 +265,11 @@
               </div>
             {/if}
 
-            <div class="w-full overflow-x-scroll mt-10">
+            <h3 class="text-xl text-white font-bold mt-10">Trading History</h3>
+
+            <div class="w-full overflow-x-scroll">
               <table
-                class=" table table-sm table-compact rounded-none sm:rounded-md w-full bg-default m-auto mt-5"
+                class=" table table-sm table-compact rounded-none sm:rounded-md w-full bg-default m-auto mt-5 border border-gray-800"
               >
                 <!-- head -->
                 <thead>