ui fixes

src/lib/highcharts.ts

@@ -1,5 +1,5 @@
 import Highcharts from 'highcharts';
-//import { browser } from '$app/environment';
+import { browser } from '$app/environment';
 
 /*
 if (browser) {
@@ -13,6 +13,15 @@ if (browser) {
 }
   */
 
+
+if (browser) {
+Highcharts.setOptions({
+  lang: {
+    numericSymbols: ['k', 'M', 'B', 'T', 'P', 'E']
+  }
+});
+}
+
 export default (node, config) => {
   const redraw = true;
   const oneToOne = true;

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

@@ -1,17 +1,12 @@
 <script lang="ts">
+  import { displayCompanyName, stockTicker } from "$lib/store";
   import {
-    numberOfUnreadNotification,
+    abbreviateNumber,
-    displayCompanyName,
+    monthNames,
-    stockTicker,
+    removeCompanyStrings,
-  } from "$lib/store";
+  } from "$lib/utils";
-  import { abbreviateNumber, monthNames } from "$lib/utils";
+  import SEO from "$lib/components/SEO.svelte";
-
+  import highcharts from "$lib/highcharts.ts";
-  import { Chart } from "svelte-echarts";
-  import { init, use } from "echarts/core";
-  import { BarChart } from "echarts/charts";
-  import { GridComponent, TooltipComponent } from "echarts/components";
-  import { CanvasRenderer } from "echarts/renderers";
-  use([BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
 
   export let data;
 
@@ -26,8 +21,7 @@
         ?.trim(),
     ) || [];
 
-  let isLoaded = false;
+  let config = null;
-  let optionsData;
 
   let rawData = data?.getBusinessMetrics?.revenue?.history;
 
@@ -43,91 +37,115 @@
   }
 
   function plotData() {
+    // First, sort and filter your dataset just like before.
     const plotDataset = [...dataset]?.sort(
-      (a, b) => new Date(a?.date) - new Date(b?.date),
+      (a, b) => new Date(a.date) - new Date(b.date),
     );
     const xData = plotDataset
-      ?.filter((item) => item?.value !== null) // Filter out items where value is null
+      .filter((item) => item.value !== null) // Filter out null values
-      .map((item) => item?.date); // Map to the date property
+      .map((item) => item.date); // Get the date strings
 
-    let valueList = [];
+    const valueList = [];
-    for (let i = 0; i < plotDataset?.length; i++) {
+    for (let i = 0; i < plotDataset.length; i++) {
-      if (plotDataset[i]?.value !== null) {
+      if (plotDataset[i].value !== null) {
-        valueList.push(plotDataset[i]?.value);
+        valueList.push(plotDataset[i].value);
       }
     }
 
+    // Build the Highcharts configuration object.
     const options = {
+      credits: {
+        enabled: false,
+      },
+      chart: {
+        type: "column",
+        backgroundColor: "#09090B",
+        plotBackgroundColor: "#09090B",
+        height: 360, // Set the maximum height for the chart
         animation: false,
-      grid: {
+      },
-        left: "5%",
+      title: {
-        right: "5%",
+        text: `<h3 class="mt-3 mb-1">${removeCompanyStrings($displayCompanyName)} Revenue by ${convertToTitleCase(data?.getParams)}</h3>`,
-        bottom: "2%",
+        style: {
-        top: "10%",
+          color: "white",
-        containLabel: true,
+          // Using inline CSS for margin-top and margin-bottom
+        },
+        useHTML: true, // Enable HTML to apply custom class styling
       },
       xAxis: {
-        type: "category",
+        categories: xData,
-        boundaryGap: false,
+        labels: {
-        data: xData,
+          formatter: function () {
-        axisLabel: {
+            // 'this.value' is the date string (e.g., "YYYY-MM-DD")
-          formatter: function (value) {
+            const dateParts = this.value.split("-");
-            const dateParts = value.split("-");
+            const year = dateParts[0].substring(2); // last two digits of year
-            const year = dateParts[0].substring(2); // Extracting the last two digits of the year
+            const monthIndex = parseInt(dateParts[1], 10) - 1;
-            const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
             return `${monthNames[monthIndex]} '${year}`;
           },
+          style: {
             color: "#fff",
-          interval: 0, // Show all labels
+            fontSize: "12px",
-          rotate: 45, // Rotate labels for better readability
+          },
-          fontSize: 12, // Adjust font size if needed
+          rotation: 45, // Rotate labels for better readability
+        },
+        tickmarkPlacement: "on",
+      },
+      yAxis: {
+        gridLineWidth: 1,
+        gridLineColor: "#111827",
+        labels: {
+          style: { color: "white" },
+        },
+        title: { text: null },
+        opposite: true,
+      },
+      tooltip: {
+        useHTML: true,
+        backgroundColor: "#fff",
+        style: {
+          color: "black",
+          fontSize: "16px",
+          padding: "10px",
+        },
+        borderRadius: 2,
+        borderWidth: 1,
+        borderColor: "#fff",
+        formatter: function () {
+          return `<span class="m-auto text-black text-[1rem] font-[501]">${new Date(
+            this?.x,
+          ).toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+          })}</span> <br> <span class="text-black font-normal text-sm">${abbreviateNumber(this.y)}</span>`;
         },
       },
-      yAxis: [
+      plotOptions: {
-        {
+        series: {
-          type: "value",
+          color: "white",
-          splitLine: {
+          animation: false,
-            show: false, // Disable x-axis grid lines
+          dataLabels: {
+            enabled: false,
+            color: "white",
+            style: {
+              fontSize: "13px",
+              fontWeight: "bold",
+            },
+            formatter: function () {
+              return abbreviateNumber(this?.y);
+            },
           },
-
-          axisLabel: {
-            show: false, // Hide y-axis labels
         },
       },
-      ],
       series: [
         {
           name: "Revenue",
           data: valueList,
-          type: "bar",
-          smooth: true,
-          symbol: "none",
-          barWidth: "60%",
-          itemStyle: {
           color: "#fff",
         },
-        },
       ],
-      tooltip: {
+      legend: {
-        trigger: "axis",
+        enabled: false,
-        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)}`;
-        },
       },
     };
 
@@ -135,12 +153,12 @@
   }
 
   $: {
-    if ($stockTicker && data?.getParams && typeof window !== "undefined") {
+    if ($stockTicker && data?.getParams) {
-      isLoaded = false;
       dataset = [];
       tableList = [];
       // Find the index of the current getParams value in the names array
-      const index = names?.indexOf(data.getParams);
+      const index = names?.indexOf(data.getParams?.toLowerCase());
+
       dataset = rawData?.map((entry) => ({
         date: entry.date,
         value: index !== -1 ? entry.value[index] : null,
@@ -153,40 +171,21 @@
         (a, b) => new Date(b?.date) - new Date(a?.date),
       );
 
-      optionsData = plotData();
+      config = plotData();
-      isLoaded = true;
     }
   }
 </script>
 
-<svelte:head>
+<SEO
-  <meta charset="utf-8" />
+  title={`${removeCompanyStrings($displayCompanyName)} Business Metrics & Revenue Breakdown`}
-  <meta name="viewport" content="width=device-width" />
+  description={`View unique business metrics for ${$displayCompanyName} (${$stockTicker}) stock, including revenue by segment, gross margin by type, gross profit by type.`}
-  <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {$displayCompanyName} ({$stockTicker}) Revenue Breakdown · Stocknear
-  </title>
-  <meta name="description" content={`Revenue & Geographic Breakdown`} />
-  <meta
-    property="og:title"
-    content={`${$displayCompanyName} (${$stockTicker}) Revenue Breakdown · Stocknear`}
 />
-  <meta property="og:description" content={`Revenue & Geographic Breakdown`} />
-  <meta property="og:type" content="website" />
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta
-    name="twitter:title"
-    content={`${$displayCompanyName} (${$stockTicker}) Revenue Breakdown · Stocknear`}
-  />
-  <meta name="twitter:description" content={`Revenue & Geographic Breakdown`} />
-</svelte:head>
 
 <section class="bg-default w-full overflow-hidden text-white h-full">
   <div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
     >
-      {#if isLoaded}
       <main class="w-full">
         <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0 w-full">
           <div class="mb-3">
@@ -196,11 +195,14 @@
           </div>
 
           {#if rawData?.length !== 0}
-              <div class="app w-full">
+            <div
-                <Chart {init} options={optionsData} class="chart" />
+              class="chart mt-5 sm:mt-0 border border-gray-800 rounded"
-              </div>
+              use:highcharts={config}
+            ></div>
 
-              <h2 class="mt-10 text-xl text-gray-200 font-bold">History</h2>
+            <h2 class="mt-5 text-xl sm:text-2xl text-white font-bold">
+              History
+            </h2>
 
             <div class="w-full overflow-x-scroll">
               <table
@@ -208,21 +210,16 @@
               >
                 <thead class="bg-default">
                   <tr class="border-b border-gray-800">
-                      <th
+                    <th class="text-white font-semibold text-start text-sm"
-                        class="text-white font-semibold text-start text-sm sm:text-[1rem]"
                       >Quarter</th
                     >
-                      <th
+                    <th class="text-white font-semibold text-end text-sm"
-                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
                       >Value</th
                     >
-                      <th
+                    <th class="text-white font-semibold text-end text-sm">
-                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                      >
                       Change
                     </th>
-                      <th
+                    <th class="text-white font-semibold text-end text-sm"
-                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
                       >Growth</th
                     >
                   </tr>
@@ -234,21 +231,17 @@
                       <td
                         class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap"
                       >
-                          {new Date(item?.date ?? null)?.toLocaleString(
+                        {new Date(item?.date ?? null)?.toLocaleString("en-US", {
-                            "en-US",
-                            {
                           month: "short",
                           day: "numeric",
                           year: "numeric",
-                            },
+                        })}
-                          )}
                       </td>
 
                       <td
                         class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
                       >
-                          {@html item?.value !== null &&
+                        {@html item?.value !== null && item?.value !== undefined
-                          item?.value !== undefined
                           ? abbreviateNumber(item?.value, false, true)
                           : "n/a"}
                       </td>
@@ -296,36 +289,6 @@
           {/if}
         </div>
       </main>
-      {:else}
-        <div class="w-full flex justify-center items-center h-80">
-          <div class="relative">
-            <label
-              class="bg-odd rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
-            >
-              <span class="loading loading-spinner loading-md text-gray-400"
-              ></span>
-            </label>
-          </div>
-        </div>
-      {/if}
     </div>
   </div>
 </section>
-
-<style>
-  .app {
-    height: 400px;
-    width: 100%;
-  }
-
-  @media (max-width: 560px) {
-    .app {
-      width: 100%;
-      height: 300px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>