update politician page

src/lib/components/RatingsChart.svelte

@@ -21,6 +21,7 @@
   export let symbol;
   export let ratingsList;
   export let numOfRatings = 0;
+  export let title = "Ratings";
 
   let isLoaded = false;
   let optionsData = null;
@@ -113,28 +114,31 @@
       historicalData,
       timePeriod,
     );
-
     // Prepare markPoints for ratings
     const markPoints = ratingsList
       ?.filter((rating) => {
         // Ensure date format is correct and matches
         return dates.includes(rating?.date) && rating?.ticker === symbol;
       })
-      .map((rating) => ({
+      ?.map((rating) => ({
         // Marker at the rating's date
         type: "max", // Marking the rating date
-        name: rating?.rating_current,
+        name: rating?.type,
         coord: [
-          rating.date,
+          rating?.date,
-          closeValues[dates.indexOf(rating.date)], // Find the close value corresponding to the rating date
+          closeValues[dates?.indexOf(rating?.date)], // Find the close value corresponding to the rating date
         ],
         label: {
-          formatter: rating.rating_current
+          formatter: rating?.type //rating.rating_current
+            ?.replace("Bought", "Buy")
+            ?.replace("Sold", "Sell")
             ?.replace("Sector Perform", "Hold")
             ?.replace("Equal-Weight", "Hold")
             ?.replace("Market Perform", "Hold")
             ?.replace("Overweight", "Buy")
+            ?.replace("Market Outperform", "Buy")
             ?.replace("Outperform", "Buy")
+            ?.replace("Market Underperform", "Sell")
             ?.replace("Underperform", "Sell")
             ?.replace("Underweight", "Sell"), // Display the rating_current text
           position: "top", // Position the label above the point
@@ -281,7 +285,8 @@
         <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} Ratings
+          {symbol} - {numOfRatings}
+          {title}
         </h2>
         <Chart {init} options={optionsData} class="chart" />
       </div>

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

@@ -31,7 +31,7 @@
     const tickerMap = new Map();
 
     data.forEach((item) => {
-      const { ticker, date } = item;
+      const { ticker } = item;
 
       if (!ticker) return; // Skip if ticker is not defined
 
@@ -573,8 +573,12 @@
                                       style="position: relative; height: 0px; z-index: 1;"
                                     >
                                       <RatingsChart
-                                        ratingsList={data?.getAnalystStats
+                                        ratingsList={data?.getAnalystStats?.ratingsList?.map(
-                                          ?.ratingsList}
+                                          (item) => ({
+                                            ...item,
+                                            type: item?.rating_current,
+                                          }),
+                                        )}
                                         symbol={item?.ticker}
                                         numOfRatings={item?.ratings}
                                       />

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

@@ -2,13 +2,18 @@
   import { numberOfUnreadNotification } from "$lib/store";
   import { formatString, sectorNavigation } from "$lib/utils";
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
+  import RatingsChart from "$lib/components/RatingsChart.svelte";
 
   export let data;
   let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
 
   let rawData = data?.getPolitician?.output;
-  let name = rawData?.history?.at(0)?.representative ?? "n/a";
   let numOfTrades = rawData?.history?.length;
+
+  let tableData =
+    rawData?.history?.length > 0 ? processTickerData(rawData?.history) : [];
+
+  let name = rawData?.history?.at(0)?.representative ?? "n/a";
   let mainSectors = rawData?.mainSectors || [];
   let mainIndustries = rawData?.mainIndustries || [];
 
@@ -53,6 +58,49 @@
     }
     return 0;
   }
+
+  function processTickerData(data) {
+    const tickerMap = new Map();
+
+    data.forEach((item) => {
+      const { ticker } = item;
+
+      if (!ticker) return; // Skip if ticker is not defined
+
+      if (!tickerMap.has(ticker)) {
+        // Add the item and initialize count
+        tickerMap.set(ticker, { ...item, transaction: 1 });
+      } else {
+        const existing = tickerMap.get(ticker);
+
+        // Increment the ratings count
+        existing.transaction += 1;
+
+        // Keep the item with the latest date
+        if (
+          new Date(item?.transactionDate) > new Date(existing?.transactionDate)
+        ) {
+          tickerMap.set(ticker, {
+            ...item,
+            transaction: existing?.transaction,
+          });
+        }
+      }
+    });
+
+    // Convert the Map back to an array
+    return Array?.from(tickerMap?.values());
+  }
+
+  $: checkedSymbol = "";
+  function openGraph(symbol) {
+    // Clear all existing symbols
+    if (checkedSymbol === symbol) {
+      checkedSymbol = "";
+    } else {
+      checkedSymbol = symbol;
+    }
+  }
 </script>
 
 <svelte:head>
@@ -159,7 +207,7 @@
                     }).format(totalAmountTraded)}
                   </div>
                   <div class="text-sm font-semibold leading-6 text-gray-300">
-                    Total Amount Traded
+                    Total Amount
                   </div>
                 </div>
 
@@ -172,7 +220,7 @@
                     {numOfTrades?.toLocaleString("en-US")}
                   </div>
                   <div class="text-sm font-semibold leading-6 text-gray-300">
-                    Total Trades
+                    Transaction
                   </div>
                 </div>
 
@@ -192,7 +240,7 @@
                       : "n/a"}
                   </div>
                   <div class="text-sm font-semibold leading-6 text-gray-300">
-                    Last Traded
+                    Last Transaction
                   </div>
                 </div>
                 <div
@@ -256,6 +304,10 @@
                 <!-- head -->
                 <thead>
                   <tr class="bg-[#09090B]">
+                    <th
+                      class="text-start bg-[#09090B] text-white text-sm font-semibold"
+                    >
+                    </th>
                     <th
                       class="text-start bg-[#09090B] text-white text-sm font-semibold"
                     >
@@ -279,7 +331,12 @@
                     <th
                       class="text-end bg-[#09090B] text-white text-sm font-semibold"
                     >
-                      Traded
+                      Transaction
+                    </th>
+                    <th
+                      class="text-end bg-[#09090B] text-white text-sm font-semibold"
+                    >
+                      Last Trade
                     </th>
                     <th
                       class="text-end bg-[#09090B] text-white text-sm font-semibold"
@@ -289,10 +346,31 @@
                   </tr>
                 </thead>
                 <tbody class="p-0">
-                  {#each rawData?.history as item}
+                  {#each tableData as item}
                     <tr
                       class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#27272A] text-white"
                     >
+                      <td class="hidden lg:table-cell"
+                        ><button
+                          on:click={() => openGraph(item?.ticker)}
+                          class="h-full pl-2 pr-2 align-middle lg:pl-3"
+                          ><svg
+                            class="w-5 h-5 text-icon {(checkedSymbol ===
+                              item?.ticker ?? item?.symbol)
+                              ? 'rotate-180'
+                              : ''}"
+                            viewBox="0 0 20 20"
+                            fill="white"
+                            style="max-width:40px"
+                            ><path
+                              fill-rule="evenodd"
+                              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                              clip-rule="evenodd"
+                            ></path></svg
+                          ></button
+                        ></td
+                      >
+
                       <td
                         class="text-start text-sm sm:text-[1rem] border-b border-b-[#27272A] whitespace-nowrap"
                       >
@@ -330,6 +408,12 @@
                         {item?.amount}</td
                       >
 
+                      <td
+                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#27272A]"
+                      >
+                        {item?.transaction}</td
+                      >
+
                       <td
                         class="text-end text-sm sm:text-[1rem] text-white border-b border-b-[#27272A] whitespace-nowrap"
                       >
@@ -358,6 +442,38 @@
                         )}
                       </td>
                     </tr>
+                    {#if checkedSymbol === (item?.ticker ?? item?.symbol)}
+                      <tr
+                        ><td colspan="8" class="px-0" style=""
+                          ><div class="-mt-0.5 px-0 pb-2">
+                            <div class="relative h-[400px]">
+                              <div class="absolute top-0 w-full">
+                                <div
+                                  class="h-[250px] w-full xs:h-[300px] sm:h-[400px]"
+                                  style="overflow: hidden;"
+                                >
+                                  <div
+                                    style="position: relative; height: 0px; z-index: 1;"
+                                  >
+                                    <RatingsChart
+                                      title="Transactions"
+                                      ratingsList={rawData?.history?.map(
+                                        (item) => ({
+                                          ...item,
+                                          date: item.transactionDate,
+                                        }),
+                                      )}
+                                      symbol={item?.ticker ?? item?.symbol}
+                                      numOfRatings={item?.transaction}
+                                    />
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div></td
+                        >
+                      </tr>
+                    {/if}
                   {/each}
                 </tbody>
               </table>