update chart

src/lib/components/FinancialChart.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+  import highcharts from "$lib/highcharts.ts";
+  import { abbreviateNumber } from "$lib/utils";
+
+  export let data;
+  export let displayStatement;
+  export let filterRule = "annual";
+  export let tableList = [];
+  export let statementConfig;
+
+  let config = null;
+
+  function plotData() {
+    let labelName = "-";
+    let xList = [];
+    let valueList = [];
+    tableList = []; // Assuming tableList is a global variable
+
+    const index = statementConfig?.findIndex(
+      (item) => item?.propertyName === displayStatement,
+    );
+
+    // Loop through the income array in reverse order
+    for (let i = data?.length - 1; i >= 0; i--) {
+      const statement = data[i];
+      const year = statement?.calendarYear?.slice(-2);
+      const quarter = statement?.period;
+
+      // Determine label based on filterRule
+      if (filterRule === "annual") {
+        xList.push("FY" + year);
+      } else {
+        xList.push("FY" + year + " " + quarter);
+      }
+
+      // Calculate the value, converting to a number
+      const rawValue = Number(statement[statementConfig[index]?.propertyName]);
+      const value = parseFloat(rawValue.toFixed(2));
+      valueList.push(value);
+
+      // Populate tableList
+      tableList.push({
+        date: statement?.date,
+        value: value,
+      });
+    }
+
+    // Sort tableList by date (newest first)
+    tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
+
+    labelName = statementConfig[index]?.label;
+
+    const options = {
+      chart: {
+        type: "column",
+        backgroundColor: "#09090B",
+        plotBackgroundColor: "#09090B",
+        height: 360, // Set the maximum height for the chart
+        animation: false,
+      },
+      credits: { enabled: false },
+      legend: { enabled: false },
+      plotOptions: {
+        series: {
+          color: "white",
+          animation: false,
+          dataLabels: {
+            enabled: false,
+            color: "white",
+            style: {
+              fontSize: "13px",
+              fontWeight: "bold",
+            },
+            formatter: function () {
+              return abbreviateNumber(this?.y);
+            },
+          },
+        },
+      },
+      title: {
+        text: `<h3 class="mt-3 mb-1">${labelName}</h3>`,
+        useHTML: true,
+        style: { color: "white" },
+      },
+      xAxis: {
+        categories: xList,
+        labels: {
+          style: { color: "#fff" },
+        },
+        lineColor: "#fff",
+        tickColor: "#fff",
+      },
+      yAxis: {
+        gridLineWidth: 1,
+        gridLineColor: "#111827",
+        labels: {
+          style: { color: "white" },
+          formatter: function () {
+            return abbreviateNumber(this.value);
+          },
+        },
+        title: { text: null },
+        opposite: true,
+      },
+      tooltip: {
+        shared: true,
+        useHTML: true,
+        backgroundColor: "rgba(0, 0, 0, 0.8)", // Semi-transparent black
+        borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border
+        borderWidth: 1,
+        style: {
+          color: "#fff",
+          fontSize: "16px",
+          padding: "10px",
+        },
+        borderRadius: 4,
+        formatter: function () {
+          // Format the x value to display time in hh:mm format
+          let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">${this?.x}</span><br>`;
+
+          // Loop through each point in the shared tooltip
+          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}">${abbreviateNumber(
+            point.y,
+          )}</span><br>`;
+          });
+
+          return tooltipContent;
+        },
+      },
+      series: [
+        {
+          name: labelName,
+          data: valueList,
+          color: "#fff",
+        },
+      ],
+    };
+
+    return options;
+  }
+
+  $: {
+    if (filterRule || displayStatement || data) {
+      config = plotData() || null;
+    }
+  }
+</script>
+
+<div
+  class="border border-gray-800 rounded w-full"
+  use:highcharts={config}
+></div>

src/lib/components/Options/OpenInterestByExpiry.svelte

@@ -1,9 +1,5 @@
 <script lang="ts">
-  import {
+  import { abbreviateNumberWithColor, abbreviateNumber } from "$lib/utils";
-    abbreviateNumberWithColor,
-    abbreviateNumber,
-    monthNames,
-  } from "$lib/utils";
   import { onMount } from "svelte";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
@@ -45,7 +41,6 @@
     const putValues = processedData?.map(
       (d) => parseFloat(d.putValue?.toFixed(2)) || 0,
     );
-    const barWidth = Math.max(100 / processedData.length, 20);
 
     const options = {
       chart: {

src/routes/stocks/[tickerID]/financials/+layout.svelte

@@ -51,7 +51,7 @@
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
-        <main class="w-full {$coolMode ? 'lg:w-3/4 pr-10' : 'w-full'} ">
+        <main class="w-full">
           <div class="m-auto">
             <nav
               class="sm:ml-4 pt-1 overflow-x-scroll md:overflow-hidden text-sm sm:text-[1rem] whitespace-nowrap"
@@ -101,73 +101,6 @@
           </div>
           <slot />
         </main>
-
-        {#if $coolMode}
-          <aside class="hidden lg:block relative fixed w-1/4 mt-3">
-            {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
-              <div
-                class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
-              >
-                <a
-                  href="/pricing"
-                  class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-                >
-                  <div
-                    class="w-full flex justify-between items-center p-3 mt-3"
-                  >
-                    <h2
-                      class="text-start text-xl font-semibold text-white ml-3"
-                    >
-                      Pro Subscription
-                    </h2>
-                    <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-                  </div>
-                  <span class="text-white p-3 ml-3 mr-3">
-                    Upgrade now for unlimited access to all data and tools.
-                  </span>
-                </a>
-              </div>
-            {/if}
-
-            <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
-            >
-              <a
-                href={"/watchlist/stocks"}
-                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-              >
-                <div class="w-full flex justify-between items-center p-3 mt-3">
-                  <h2 class="text-start text-xl font-semibold text-white ml-3">
-                    Watchlist
-                  </h2>
-                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-                </div>
-                <span class="text-white p-3 ml-3 mr-3">
-                  Build your watchlist to keep track of your favorite stocks.
-                </span>
-              </a>
-            </div>
-
-            <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
-            >
-              <a
-                href={"/analysts/top-stocks"}
-                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-              >
-                <div class="w-full flex justify-between items-center p-3 mt-3">
-                  <h2 class="text-start text-xl font-semibold text-white ml-3">
-                    Top Stocks
-                  </h2>
-                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-                </div>
-                <span class="text-white p-3 ml-3 mr-3">
-                  Get the latest top Wall Street Analyst Ratings
-                </span>
-              </a>
-            </div>
-          </aside>
-        {/if}
       </div>
     </div>
   </div>

src/routes/stocks/[tickerID]/financials/+page.svelte

@@ -1,31 +1,24 @@
 <script lang="ts">
   import {
-    numberOfUnreadNotification,
     displayCompanyName,
     stockTicker,
     coolMode,
     timeFrame,
   } from "$lib/store";
-  import { abbreviateNumber } from "$lib/utils";
+  import { abbreviateNumber, removeCompanyStrings } from "$lib/utils";
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
   import { Button } from "$lib/components/shadcn/button/index.js";
   //import * as XLSX from 'xlsx';
   import FinancialTable from "$lib/components/FinancialTable.svelte";
-  import { Chart } from "svelte-echarts";
+  import FinancialChart from "$lib/components/FinancialChart.svelte";
-  import { goto } from "$app/navigation";
-  import { init, use } from "echarts/core";
-  import { LineChart, BarChart } from "echarts/charts";
-  import { GridComponent, TooltipComponent } from "echarts/components";
-  import { CanvasRenderer } from "echarts/renderers";
-  import Infobox from "$lib/components/Infobox.svelte";
-  import SEO from "$lib/components/SEO.svelte";
 
-  use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
+  import { goto } from "$app/navigation";
+  import SEO from "$lib/components/SEO.svelte";
+  import Lazy from "svelte-lazy";
 
   export let data;
 
   let isLoaded = true;
-  let optionsData;
   let tableList = [];
 
   let income = [];
@@ -181,114 +174,6 @@
     $coolMode = !$coolMode;
   }
 
-  function changeStatement(event) {
-    displayStatement = event.target.value;
-  }
-
-  function plotData() {
-    let labelName = "-";
-    let xList = [];
-    let valueList = [];
-    tableList = [];
-
-    const index = statementConfig?.findIndex(
-      (item) => item?.propertyName === displayStatement,
-    );
-
-    for (let i = income?.length - 1; i >= 0; i--) {
-      const statement = income[i];
-      const year = statement?.calendarYear?.slice(-2);
-      const quarter = statement?.period;
-
-      // Determine the label based on filterRule
-      if (filterRule === "annual") {
-        xList.push("FY" + year);
-      } else {
-        xList.push("FY" + year + " " + quarter);
-      }
-
-      // Calculate the value and growth
-      const value = Number(
-        statement[statementConfig[index]?.propertyName],
-      )?.toFixed(2);
-
-      valueList.push(value);
-
-      // Add the entry to tableList
-      tableList.push({
-        date: statement?.date,
-        value: value,
-      });
-    }
-
-    //sort tableList by date
-    tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
-
-    labelName = statementConfig[index]?.label;
-
-    const options = {
-      animation: false,
-      grid: {
-        left: "0%",
-        right: "0%",
-        bottom: "2%",
-        top: "10%",
-        containLabel: true,
-      },
-      xAxis: {
-        axisLabel: {
-          color: "#fff",
-        },
-        data: xList,
-        type: "category",
-      },
-      yAxis: [
-        {
-          type: "value",
-          splitLine: {
-            show: false, // Disable x-axis grid lines
-          },
-
-          axisLabel: {
-            show: false, // Hide y-axis labels
-          },
-        },
-      ],
-      series: [
-        {
-          name: labelName,
-          data: valueList,
-          type: "bar",
-          smooth: true,
-          itemStyle: {
-            color: "#fff",
-          },
-        },
-      ],
-      tooltip: {
-        trigger: "axis",
-        hideDelay: 100,
-        borderColor: "#969696", // Black border color
-        borderWidth: 1, // Border width of 1px
-        backgroundColor: "#313131", // Optional: Set background color for contrast
-        textStyle: {
-          color: "#fff", // Optional: Text color for better visibility
-        },
-        formatter: function (params) {
-          const date = params[0].name; // Get the date from the x-axis value
-          // Return the tooltip content
-          return `${date}<br/> ${
-            statementConfig?.find(
-              (item) => item?.propertyName === displayStatement,
-            )?.label
-          }: ${abbreviateNumber(params[0].value)}`;
-        },
-      },
-    };
-
-    return options;
-  }
-
   const getCurrentYear = () => new Date()?.getFullYear();
 
   const filterStatement = (fullStatement, timeFrame) => {
@@ -359,24 +244,14 @@
         a.click();
         document.body.removeChild(a);
         URL.revokeObjectURL(url);
-      } /*else if (format.toLowerCase() === "excel") {
-      const worksheet = XLSX.utils.aoa_to_sheet(rows);
-      const workbook = XLSX.utils.book_new();
-      XLSX.utils.book_append_sheet(workbook, worksheet, "Ratios Statement");
-      XLSX.writeFile(
-        workbook,
-        `${$stockTicker.toLowerCase()}-ratios-statement.xlsx`,
-      );
-      
       }
-      */
     } else {
       goto("/pricing");
     }
   };
 
   $: {
-    if ($timeFrame || displayStatement || activeIdx) {
+    if ($timeFrame || activeIdx) {
       if (activeIdx === 0) {
         filterRule = "annual";
         fullStatement = data?.getIncomeStatement?.annual;
@@ -385,39 +260,6 @@
         fullStatement = data?.getIncomeStatement?.quarter;
       }
       income = filterStatement(fullStatement, $timeFrame);
-
-      if ($coolMode === true) {
-        optionsData = plotData();
-      }
-    }
-  }
-
-  function generateStatementInfoHTML() {
-    if ($coolMode) {
-      const statementText = statementConfig?.find(
-        (item) => item?.propertyName === displayStatement,
-      )?.text;
-
-      return `<span>${statementText || ""}</span>`;
-    } else if (income?.length > 0) {
-      return `
-      <span>
-        Get detailed income statement breakdowns, uncovering revenue, expenses, and much more.
-      </span>
-    `;
-    } else {
-      return `
-      <span>
-        No financial data available for ${$displayCompanyName}.
-      </span>
-    `;
-    }
-  }
-
-  let htmlOutput = null;
-  $: {
-    if ($coolMode || displayStatement) {
-      htmlOutput = generateStatementInfoHTML();
     }
   }
 </script>
@@ -439,18 +281,11 @@
           <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
             <div class="mb-3">
               <h1 class="text-xl sm:text-2xl text-white font-bold">
-                {#if $coolMode}
+                {removeCompanyStrings($displayCompanyName)} Income Statement
-                  {statementConfig?.find(
-                    (item) => item?.propertyName === displayStatement,
-                  )?.label}
-                {:else}
-                  {$displayCompanyName?.replace("Inc.", "")} Income Statement
-                {/if}
               </h1>
             </div>
 
             <div class="grid grid-cols-1 gap-2">
-              <Infobox text={htmlOutput} />
               {#if income?.length > 0}
                 <div
                   class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6"
@@ -522,11 +357,11 @@
                     ></div>
                     {#if $coolMode}
                       <span class="ml-2 text-sm font-medium text-white">
-                        Cool Mode
+                        Chart Mode
                       </span>
                     {:else}
                       <span class="ml-2 text-sm font-medium text-white">
-                        Boring Mode
+                        Table Mode
                       </span>
                     {/if}
                   </label>
@@ -607,153 +442,21 @@
                 </div>
 
                 {#if $coolMode}
-                  <div class="sm:w-full">
+                  <div class="grid gap-5 xs:gap-6 lg:grid-cols-3 lg:gap-3">
-                    <div class="relative">
+                    {#each fields as item}
-                      <select
+                      <Lazy
-                        class="w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-secondary"
+                        fadeOption={{ delay: 100, duration: 100 }}
-                        on:change={changeStatement}
+                        keep={true}
                       >
-                        <option disabled>Choose an Cash Flow Variable</option>
+                        <FinancialChart
-                        <option value="revenue" selected>Revenue</option>
+                          data={income}
-                        <option value="costOfRevenue">Cost of Revenue</option>
+                          {tableList}
-                        <option value="grossProfit">Gross Profit</option>
+                          {statementConfig}
-                        <option value="sellingGeneralAndAdministrativeExpenses"
+                          displayStatement={item?.key}
-                          >Selling, General & Admin</option
+                          {filterRule}
-                        >
+                        />
-                        <option value="researchAndDevelopmentExpenses"
+                      </Lazy>
-                          >Research & Development</option
-                        >
-                        <option value="otherExpenses">Other Expenses</option>
-                        <option value="operatingExpenses"
-                          >Operating Expenses</option
-                        >
-                        <option value="interestExpense">Interest Expense</option
-                        >
-                        <option value="incomeBeforeTax">Pretax Income</option>
-                        <option value="incomeTaxExpense">Income Tax</option>
-                        <option value="netIncome">Net Income</option>
-                        <option value="weightedAverageShsOut"
-                          >Shares Outstanding (Basic)</option
-                        >
-                        <option value="weightedAverageShsOutDil"
-                          >Shares Outstanding (Diluted)</option
-                        >
-                        <option value="eps">EPS (Basic)</option>
-                        <option value="epsdiluted">EPS (Diluted)</option>
-                        <option value="ebitda">EBITDA</option>
-                        <option value="depreciationAndAmortization"
-                          >Depreciation & Amortization</option
-                        >
-                      </select>
-                    </div>
-                  </div>
-
-                  <div class="app w-full">
-                    <Chart {init} options={optionsData} class="chart" />
-                  </div>
-
-                  <h2 class="mt-5 text-2xl text-gray-200 font-semibold">
-                    {statementConfig?.find(
-                      (item) => item?.propertyName === displayStatement,
-                    )?.label} History
-                  </h2>
-
-                  <div class="w-full overflow-x-scroll">
-                    <table
-                      class="table table-sm table-compact bg-table border border-gray-800 rounded-md w-full m-auto mt-4"
-                    >
-                      <thead class="bg-default">
-                        <tr>
-                          <th
-                            class="text-white font-semibold text-start text-sm sm:text-[1rem]"
-                            >{filterRule === "annual"
-                              ? "Fiscal Year End"
-                              : "Quarter Ends"}</th
-                          >
-                          <th
-                            class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                            >{statementConfig?.find(
-                              (item) => item?.propertyName === displayStatement,
-                            )?.label}</th
-                          >
-                          <th
-                            class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                            >Change</th
-                          >
-                          <th
-                            class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                            >Growth</th
-                          >
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {#each tableList as item, index}
-                          <!-- row -->
-                          <tr class="odd:bg-odd border-b border-gray-800">
-                            <td
-                              class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap"
-                            >
-                              {item?.date}
-                            </td>
-
-                            <td
-                              class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
-                            >
-                              {@html abbreviateNumber(item?.value, false, true)}
-                            </td>
-
-                            <td
-                              class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end"
-                            >
-                              {@html item?.value -
-                                tableList[index + 1]?.value !==
-                              0
-                                ? abbreviateNumber(
-                                    (
-                                      item?.value - tableList[index + 1]?.value
-                                    )?.toFixed(2),
-                                    false,
-                                    true,
-                                  )
-                                : "n/a"}
-                            </td>
-
-                            <td
-                              class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end"
-                            >
-                              {#if index + 1 - tableList?.length === 0}
-                                n/a
-                              {:else if item?.value === 0 && tableList[index + 1]?.value < 0}
-                                <span class="text-[#FF2F1F]">-100.00%</span>
-                              {:else if item?.value === 0 && tableList[index + 1]?.value > 0}
-                                <span class="text-[#00FC50]">100.00%</span>
-                              {:else if item?.value - tableList[index + 1]?.value > 0}
-                                <span class="text-[#00FC50]">
-                                  {(
-                                    ((item?.value -
-                                      tableList[index + 1]?.value) /
-                                      Math.abs(item?.value)) *
-                                    100
-                                  )?.toFixed(2)}%
-                                </span>
-                              {:else if item?.value - tableList[index + 1]?.value < 0}
-                                <span class="text-[#FF2F1F]">
-                                  -{(
-                                    Math?.abs(
-                                      (tableList[index + 1]?.value -
-                                        item?.value) /
-                                        Math.abs(item?.value),
-                                    ) * 100
-                                  )?.toFixed(2)}%
-                                </span>
-                              {:else}
-                                n/a
-                              {/if}
-                            </td>
-                          </tr>
                     {/each}
-                      </tbody>
-                    </table>
                   </div>
                 {:else}
                   <div
@@ -814,21 +517,3 @@
     </div>
   </div>
 </section>
-
-<style>
-  .app {
-    height: 400px;
-    width: 100%;
-  }
-
-  @media (max-width: 560px) {
-    .app {
-      width: 100%;
-      height: 300px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>

src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { Chart } from "svelte-echarts";
   import {
-    numberOfUnreadNotification,
     coolMode,
     timeFrame,
     displayCompanyName,
@@ -9,7 +8,7 @@
   } from "$lib/store";
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
   import { Button } from "$lib/components/shadcn/button/index.js";
-  import { abbreviateNumber } from "$lib/utils";
+  import { abbreviateNumber, removeCompanyStrings } from "$lib/utils";
   import { goto } from "$app/navigation";
   //import * as XLSX from 'xlsx';
   import FinancialTable from "$lib/components/FinancialTable.svelte";
@@ -493,20 +492,11 @@
         <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
           <div class="mb-3">
             <h1 class="text-xl sm:text-2xl text-white font-bold">
-              {#if $coolMode}
+              {removeCompanyStrings($displayCompanyName)} Balance Sheet
-                {statementConfig?.find(
-                  (item) => item?.propertyName === displayStatement,
-                )?.label}
-              {:else}
-                Balance Sheet {filterRule === "annual"
-                  ? "(Annual)"
-                  : "(Quarter)"}
-              {/if}
             </h1>
           </div>
 
           <div class="grid grid-cols-1 gap-2">
-            <Infobox text={htmlOutput} />
             {#if balanceSheet?.length > 0}
               <div
                 class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6"

src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
   import {
-    numberOfUnreadNotification,
     displayCompanyName,
     coolMode,
     timeFrame,
     stockTicker,
   } from "$lib/store";
-  import { abbreviateNumber } from "$lib/utils";
+  import { abbreviateNumber, removeCompanyStrings } from "$lib/utils";
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
   import { Button } from "$lib/components/shadcn/button/index.js";
   //import * as XLSX from 'xlsx';
@@ -439,13 +438,7 @@
         <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0 w-full">
           <div class="mb-3">
             <h1 class="text-xl sm:text-2xl text-white font-bold">
-              {#if $coolMode}
+              {removeCompanyStrings($displayCompanyName)} Cash Flow
-                {statementConfig?.find(
-                  (item) => item?.propertyName === displayStatement,
-                )?.label}
-              {:else}
-                Cashflow {filterRule === "annual" ? "(Annual)" : "(Quarter)"}
-              {/if}
             </h1>
           </div>
 

src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte

@@ -1,16 +1,12 @@
 <script lang="ts">
-  import {
+  import { displayCompanyName, screenWidth, stockTicker } from "$lib/store";
-    numberOfUnreadNotification,
-    displayCompanyName,
-    screenWidth,
-    stockTicker,
-  } from "$lib/store";
   import InfoModal from "$lib/components/InfoModal.svelte";
   import { onMount } from "svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
   import { goto } from "$app/navigation";
   import Infobox from "$lib/components/Infobox.svelte";
   import SEO from "$lib/components/SEO.svelte";
+  import { removeCompanyStrings } from "$lib/utils";
   export let data;
 
   let analystRating = data?.getAnalystSummary ?? {};
@@ -197,7 +193,7 @@
 
 <SEO
   title={`${$displayCompanyName} (${$stockTicker}) Analyst Ratings · Stocknear`}
-  description={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`}
+  description={`A list of analyst ratings for ${$displayCompanyName} (${$stockTicker})} stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`}
 />
 
 <section
@@ -213,7 +209,7 @@
             class="mb-5 flex flex-col justify-between gap-y-2.5 sm:mb-2 sm:flex-row sm:items-end"
           >
             <h1 class="mb-px text-xl font-bold sm:text-2xl sm:pl-1">
-              {$displayCompanyName} Analyst Ratings
+              {removeCompanyStrings($displayCompanyName)} Analyst Ratings
             </h1>
             <div>
               <div class="pr-4 hidden justify-end md:flex">
@@ -335,12 +331,12 @@
           {/if}
 
           <div
-            class="mt-10 mb-5 items-center justify-between py-0 md:mt-8 md:flex md:py-2"
+            class="mt-10 mb-2 items-center justify-between py-0 md:mt-8 md:flex md:py-2"
           >
             <div class="flex justify-between md:block">
-              <h2 class="text-xl font-semibold bp:mb-2 bp:text-2xl">
+              <h3 class="text-xl sm:text-2xl text-white font-bold">
                 Ratings History
-              </h2>
+              </h3>
             </div>
           </div>