ui fixes

src/lib/components/RatingsChart.svelte

@@ -3,6 +3,7 @@
   import { setCache, getCache } from "$lib/store";
   import { init, use } from "echarts/core";
   import { LineChart, BarChart } from "echarts/charts";
+  import { monthNames } from "$lib/utils";
   import {
     GridComponent,
     TooltipComponent,
@@ -92,21 +93,6 @@
     optionsData = plotData();
   }
 
-  const monthNames = [
-    "Jan",
-    "Feb",
-    "Mar",
-    "Apr",
-    "May",
-    "Jun",
-    "Jul",
-    "Aug",
-    "Sep",
-    "Oct",
-    "Nov",
-    "Dec",
-  ];
-
   // Function to plot data based on a specified time period
   function plotData() {
     // Extract the time (x-axis) and close values (y-axis)
@@ -237,6 +223,12 @@
       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
           const dateParts = date.split("-");

src/routes/etf/[tickerID]/dividends/+page.svelte

@@ -5,7 +5,7 @@
     etfTicker,
   } from "$lib/store";
   import { onMount } from "svelte";
-
+  import { monthNames } from "$lib/utils";
   import { Chart } from "svelte-echarts";
   import { init, use } from "echarts/core";
   import { LineChart, BarChart } from "echarts/charts";
@@ -30,7 +30,7 @@
     // Combine the data into an array of objects to keep them linked
     const combinedData = rawData?.history?.map((item) => ({
       date: item?.paymentDate,
-      dividend: item?.adjDividend?.toFixed(2),
+      dividend: item?.adjDividend?.toFixed(3),
     }));
 
     // Sort the combined data array based on the date
@@ -41,10 +41,6 @@
     const dividendList = combinedData.map((item) => item.dividend);
 
     const options = {
-      tooltip: {
-        trigger: "axis",
-        hideDelay: 100, // Set the delay in milliseconds
-      },
       animation: false,
       grid: {
         left: "3%",
@@ -86,6 +82,27 @@
           },
         },
       ],
+      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
+          const dateParts = date.split("-");
+          const year = dateParts[0];
+          const monthIndex = parseInt(dateParts[1]) - 1;
+          const day = dateParts[2];
+          const formattedDate = `${monthNames[monthIndex]} ${day}, ${year}`;
+
+          // Return the tooltip content
+          return `${formattedDate}<br/> Dividend Per Share: ${params[0].value}`;
+        },
+      },
     };
 
     return options;

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

@@ -393,9 +393,9 @@
                       >
                         <span class="font-semibold">
                           {#if item?.type === "Bought"}
-                            <span class="text-[#57D7BA]">Purchase</span>
+                            <span class="text-[#00FC50]">{item?.type}</span>
                           {:else if item?.type === "Sold"}
-                            <span class="text-[#fe5555]">Sale</span>
+                            <span class="text-[#FF2F1F]">{item?.type}</span>
                           {:else if item?.type === "Exchange"}
                             <span class="text-[#C6A755]">Exchange</span>
                           {/if}

src/routes/politicians/flow-data/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { formatString } from "$lib/utils";
-  import { getPartyForPoliticians } from "$lib/utils";
   import { screenWidth, numberOfUnreadNotification } from "$lib/store";
   import { onMount } from "svelte";
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
@@ -175,7 +174,7 @@
                                 <th
                                   class="{index % 2
                                     ? 'bg-[#09090B]'
-                                    : 'bg-primary'} text-white text-sm sm:text-[1rem] whitespace-nowrap"
+                                    : 'bg-secondary'} text-white text-sm sm:text-[1rem] whitespace-nowrap"
                                 >
                                   <div class="flex flex-row items-center">
                                     <div

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

@@ -5,7 +5,7 @@
     stockTicker,
   } from "$lib/store";
   import { onMount } from "svelte";
-
+  import { monthNames } from "$lib/utils";
   import { Chart } from "svelte-echarts";
   import { init, use } from "echarts/core";
   import { LineChart, BarChart } from "echarts/charts";
@@ -30,7 +30,7 @@
     // Combine the data into an array of objects to keep them linked
     const combinedData = rawData?.history?.map((item) => ({
       date: item?.paymentDate,
-      dividend: item?.adjDividend?.toFixed(2),
+      dividend: item?.adjDividend?.toFixed(3),
     }));
 
     // Sort the combined data array based on the date
@@ -38,13 +38,9 @@
 
     // Separate the sorted data back into individual arrays
     const dates = combinedData.map((item) => item.date);
-    const dividendList = combinedData.map((item) => item.dividend);
+    const dividendList = combinedData?.map((item) => item.dividend);
 
     const options = {
-      tooltip: {
-        trigger: "axis",
-        hideDelay: 100, // Set the delay in milliseconds
-      },
       animation: false,
       grid: {
         left: "3%",
@@ -86,6 +82,27 @@
           },
         },
       ],
+      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
+          const dateParts = date.split("-");
+          const year = dateParts[0];
+          const monthIndex = parseInt(dateParts[1]) - 1;
+          const day = dateParts[2];
+          const formattedDate = `${monthNames[monthIndex]} ${day}, ${year}`;
+
+          // Return the tooltip content
+          return `${formattedDate}<br/> Dividend Per Share: ${params[0].value}`;
+        },
+      },
     };
 
     return options;

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

@@ -265,6 +265,21 @@
       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)}`;
+        },
       },
     };
 

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

@@ -320,6 +320,21 @@
       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)}`;
+        },
       },
     };
 

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

@@ -266,6 +266,21 @@
       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)}`;
+        },
       },
     };
 

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

@@ -224,6 +224,21 @@
       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)}`;
+        },
       },
     };
 

src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte

@@ -4,10 +4,9 @@
     displayCompanyName,
     stockTicker,
   } from "$lib/store";
-  import { abbreviateNumber } from "$lib/utils";
+  import { abbreviateNumber, monthNames } from "$lib/utils";
 
   import { Chart } from "svelte-echarts";
-
   import { init, use } from "echarts/core";
   import { LineChart, BarChart } from "echarts/charts";
   import { GridComponent, TooltipComponent } from "echarts/components";
@@ -102,6 +101,23 @@
       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
+          const dateParts = date.split("-");
+          const year = dateParts[0];
+          const monthIndex = parseInt(dateParts[1]) - 1;
+          const day = dateParts[2];
+          const formattedDate = `${monthNames[monthIndex]} ${day}, ${year}`;
+
+          // Return the tooltip content
+          return `${formattedDate}<br/> Revenue: ${abbreviateNumber(params[0].value)}`;
+        },
       },
     };
 

src/routes/stocks/[tickerID]/statistics/employees/+page.svelte

@@ -110,6 +110,18 @@
 
       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/> Employees: ${params[0].value?.toLocaleString("en-US")}`;
+        },
       },
     };
 

src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte

@@ -4,7 +4,7 @@
     displayCompanyName,
     stockTicker,
   } from "$lib/store";
-  import { abbreviateNumber } from "$lib/utils";
+  import { abbreviateNumber, monthNames } 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';
@@ -311,6 +311,23 @@
       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
+          const dateParts = date.split("-");
+          const year = dateParts[0];
+          const monthIndex = parseInt(dateParts[1]) - 1;
+          const day = dateParts[2];
+          const formattedDate = `${monthNames[monthIndex]} ${day}, ${year}`;
+
+          // Return the tooltip content
+          return `${formattedDate}<br/> ${abbreviateNumber(params[0].value)}`;
+        },
       },
     };