update chart

src/lib/components/DarkPool/HistoricalVolume.svelte

@@ -1,18 +1,23 @@
 <script lang="ts">
   import { displayCompanyName, stockTicker, etfTicker } from "$lib/store";
   import InfoModal from "$lib/components/InfoModal.svelte";
-  import { Chart } from "svelte-echarts";
+  import { abbreviateNumber, removeCompanyStrings } from "$lib/utils";
-  import { abbreviateNumber, formatDateRange, monthNames } from "$lib/utils";
+  import highcharts from "$lib/highcharts.ts";
-  import { init, use } from "echarts/core";
-  import { LineChart } from "echarts/charts";
-  import { GridComponent, TooltipComponent } from "echarts/components";
-  import { CanvasRenderer } from "echarts/renderers";
-
-  use([LineChart, GridComponent, TooltipComponent, CanvasRenderer]);
 
+  export let data;
   export let rawData = [];
+  const originalData = rawData;
+  let activeIdx = 0;
+  const tabs = [
+    {
+      title: "Daily",
+    },
+    {
+      title: "Quarterly",
+    },
+  ];
 
-  let optionsData;
+  let config = null;
   let avgVolume = 0;
   let avgShortVolume = 0;
   let monthlyVolume = "";
@@ -36,16 +41,26 @@
       0,
     );
     avgMonthlyShort =
-      (totalShortPercent / filteredData.length)?.toFixed(2) || "0.00";
+      (totalShortPercent / filteredData?.length)?.toFixed(2) || "0.00";
   }
 
   function getPlotOptions() {
-    const dates = rawData.map((item) => item?.date);
+    // Prepare the data arrays
-    const totalVolumeList = rawData.map((item) => item?.totalVolume || 0);
+    const sortedChartData = [...rawData]?.sort(
-    const shortVolumeList = rawData.map((item) => item?.shortVolume || 0);
+      (a, b) => new Date(a?.date).getTime() - new Date(b?.date).getTime(),
+    );
+    const dates = sortedChartData?.map((item) => item?.date);
+    const totalVolumeList = sortedChartData.map(
+      (item) => item?.totalVolume || 0,
+    );
+    const shortVolumeList = sortedChartData.map(
+      (item) => item?.shortVolume || 0,
+    );
 
-    findMonthlyValue(rawData, rawData.at(-1)?.date);
+    // Call side-effect function as in your original code
+    findMonthlyValue(sortedChartData, sortedChartData.at(-1)?.date);
 
+    // Compute averages (these remain global if used elsewhere)
     avgVolume =
       totalVolumeList.reduce((acc, val) => acc + val, 0) /
         totalVolumeList.length || 0;
@@ -53,109 +68,175 @@
       shortVolumeList.reduce((acc, val) => acc + val, 0) /
         shortVolumeList.length || 0;
 
-    return {
+    const options = {
-      silent: true,
+      credits: {
-      tooltip: {
+        enabled: false,
-        trigger: "axis",
+      },
-        hideDelay: 100,
+      chart: {
-        borderColor: "#969696", // Black border color
+        type: "line",
-        borderWidth: 1, // Border width of 1px
+        backgroundColor: "#09090B",
-        backgroundColor: "#313131", // Optional: Set background color for contrast
+        plotBackgroundColor: "#09090B",
-        textStyle: {
+        height: 360,
-          color: "#fff", // Optional: Text color for better visibility
+        spacingTop: 5,
+        animation: false,
+      },
+      title: {
+        text: `<h3 class="mt-3 mb-1">${removeCompanyStrings($displayCompanyName)} Historical Chart</h3>`,
+        style: {
+          color: "white",
         },
-        formatter: function (params) {
+        useHTML: true,
-          // Get the timestamp from the first parameter
+      },
-          const timestamp = params[0].axisValue;
+      legend: {
-
+        enabled: false,
-          // Initialize result with timestamp
+      },
-          let result = timestamp + "<br/>";
+      xAxis: {
-
+        type: "datetime",
-          // Sort params to ensure Vol appears last
+        endOnTick: false,
-          params.sort((a, b) => {
+        categories: dates,
-            if (a.seriesName === "Vol") return 1;
+        crosshair: {
-            if (b.seriesName === "Vol") return -1;
+          color: "#fff", // Set the color of the crosshair line
-            return 0;
+          width: 1, // Adjust the line width as needed
-          });
+          dashStyle: "Solid",
-
-          // Add each series data
-          params?.forEach((param) => {
-            const marker =
-              '<span style="display:inline-block;margin-right:4px;' +
-              "border-radius:10px;width:10px;height:10px;background-color:" +
-              param.color +
-              '"></span>';
-            result +=
-              marker +
-              param.seriesName +
-              ": " +
-              abbreviateNumber(param.value) +
-              "<br/>";
-          });
-
-          return result;
         },
-        axisPointer: {
+        labels: {
-          lineStyle: {
+          style: {
             color: "#fff",
           },
+          distance: 20, // Increases space between label and axis
+          formatter: function () {
+            const date = new Date(this.value);
+            return date.toLocaleDateString("en-US", {
+              day: "2-digit", // Include day number
+              month: "short", // Display short month name
+              year: "numeric", // Include year
+            });
+          },
         },
       },
-      animation: false,
+      yAxis: [
-      grid: {
-        left: "3%",
-        right: "3%",
-        bottom: "2%",
-        top: "5%",
-        containLabel: true,
-      },
-      xAxis: [
         {
-          type: "category",
+          gridLineWidth: 1,
-          data: dates,
+          gridLineColor: "#111827",
-          axisLabel: {
+          labels: {
-            color: "#fff",
+            enabled: false,
+          },
+          title: {
+            text: null,
+          },
+          opposite: true,
+        },
+        {
+          labels: {
+            enabled: false,
+          },
+          title: {
+            text: null,
+          },
+        },
+      ],
+      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]">${new Date(
+            this?.x,
+          ).toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+          })}</span><br>`;
 
-            formatter: function (value) {
+          // Loop through each point in the shared tooltip
-              // Assuming dates are in the format 'yyyy-mm-dd'
+          this.points.forEach((point) => {
-              const dateParts = value.split("-");
+            tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span> 
-              const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
+          <span class="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumber(
-              const year = parseInt(dateParts[0]);
+            point.y,
-              const day = parseInt(dateParts[2]);
+          )}</span><br>`;
-              return `${day} ${monthNames[monthIndex]} ${year}`;
+          });
+
+          return tooltipContent;
+        },
+      },
+      plotOptions: {
+        series: {
+          color: "white",
+          animation: false, // Disable series animation
+          states: {
+            hover: {
+              enabled: false, // Disable hover effect globally
             },
           },
         },
-      ],
+      },
-      yAxis: [
-        {
-          type: "value",
-          splitLine: { show: false },
-          axisLabel: { show: false },
-        },
-      ],
       series: [
         {
           name: "Total Volume",
           data: totalVolumeList,
           type: "line",
-          itemStyle: { color: "#fff" },
+          color: "#fff",
-          showSymbol: false,
         },
         {
           name: "Short Volume",
           data: shortVolumeList,
-          type: "line",
+          // Using an 'area' type to mimic the areaStyle option
-          areaStyle: { opacity: 1 },
+          type: "area",
-          itemStyle: { color: "#E11D48" },
+          color: "#E11D48",
-          showSymbol: false,
+          fillOpacity: 1,
+          marker: {
+            enabled: false,
+          },
         },
       ],
     };
+
+    return options;
+  }
+
+  let tableList = [...originalData]?.sort(
+    (a, b) => new Date(b?.date) - new Date(a?.date),
+  );
+
+  function changeTimePeriod(i) {
+    activeIdx = i;
+    tableList = originalData?.sort(
+      (a, b) => new Date(b?.date) - new Date(a?.date),
+    );
+    if (activeIdx === 1) {
+      tableList = filterByPeriod([...tableList]);
+    }
+  }
+
+  function filterByPeriod(data) {
+    if (!Array.isArray(data) || data.length === 0) return [];
+
+    // Quarterly: one result per year-quarter.
+    const seenPeriods = new Set();
+    return data.filter((item) => {
+      const dt = new Date(item.date);
+      const year = dt.getFullYear();
+      const quarter = Math.floor(dt.getMonth() / 3) + 1; // Quarter 1 to 4
+      const key = `${year}-Q${quarter}`;
+      if (!seenPeriods.has(key)) {
+        seenPeriods.add(key);
+        return true;
+      }
+      return false;
+    });
   }
 
   $: if ($stockTicker || $etfTicker) {
-    optionsData = getPlotOptions();
+    config = getPlotOptions() || null;
   }
 </script>
 
@@ -166,7 +247,7 @@
         for="historicalDataInfo"
         class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
       >
-        Historical Activity
+        Historical Chart
       </label>
       <InfoModal
         title={"Historical Data"}
@@ -190,120 +271,148 @@
         </div>
       </div>
 
-      <div class="pb-2 rounded-md bg-default">
+      <div
-        <div class="app w-full h-[300px] mt-5">
+        class="chart mt-5 sm:mt-0 border border-gray-800 rounded"
-          <Chart {init} options={optionsData} class="chart" />
+        use:highcharts={config}
+      ></div>
+
+      <div
+        class="mt-5 flex flex-col sm:flex-row items-start sm:items-center w-full justify-between sm:border-y border-gray-800 sm:pt-2 sm:pb-2"
+      >
+        <h3 class="text-xl sm:text-2xl text-white font-bold mb-2 sm:mb-0">
+          Dark Pool Table
+        </h3>
+
+        <div
+          class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto"
+        >
+          <div
+            class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1"
+          >
+            {#each tabs as item, i}
+              {#if data?.user?.tier !== "Pro" && i > 0}
+                <button
+                  on:click={() => goto("/pricing")}
+                  class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
+                >
+                  <span class="relative text-sm block font-semibold">
+                    {item.title}
+                    <svg
+                      class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      ><path
+                        fill="#A3A3A3"
+                        d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                      /></svg
+                    >
+                  </span>
+                </button>
+              {:else}
+                <button
+                  on:click={() => changeTimePeriod(i)}
+                  class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
+                  i
+                    ? 'z-0'
+                    : ''} "
+                >
+                  {#if activeIdx === i}
+                    <div class="absolute inset-0 rounded-md bg-[#fff]"></div>
+                  {/if}
+                  <span
+                    class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
+                    i
+                      ? 'text-black'
+                      : 'text-white'}"
+                  >
+                    {item.title}
+                  </span>
+                </button>
+              {/if}
+            {/each}
+          </div>
         </div>
       </div>
 
-      <div
+      <div class="w-full overflow-x-auto">
-        class="flex flex-row items-center justify-between mx-auto mt-5 w-full sm:w-11/12"
-      >
-        <div
-          class="mt-3.5 sm:mt-0 flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"
-        >
-          <div
-            class="h-full transform -translate-x-1/2"
-            aria-hidden="true"
-          ></div>
-          <div
-            class="w-3 h-3 bg-[#fff] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2"
-            aria-hidden="true"
-          ></div>
-          <span
-            class="mt-2 sm:mt-0 text-white text-center sm:text-start text-xs sm:text-md inline-block"
-          >
-            Total Volume
-          </span>
-        </div>
-        <div
-          class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"
-        >
-          <div
-            class="h-full transform -translate-x-1/2"
-            aria-hidden="true"
-          ></div>
-          <div
-            class="w-3 h-3 bg-[#E11D48] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2"
-            aria-hidden="true"
-          ></div>
-          <span
-            class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block"
-          >
-            Short Volume
-          </span>
-        </div>
-      </div>
-
-      <h2
-        class="mt-10 mr-1 flex flex-row items-center text-white text-xl sm:text-2xl font-bold mb-3"
-      >
-        Latest Information
-      </h2>
-
-      <div
-        class="flex justify-start items-center w-full m-auto overflow-x-auto"
-      >
         <table
-          class="w-full bg-table table table-sm table-compact border border-gray-800"
+          class="table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md w-full m-auto mt-4"
         >
+          <thead class="bg-default">
+            <tr>
+              <th class="text-white font-semibold text-start text-sm">Date</th>
+              <th class="text-white font-semibold text-end text-sm"
+                >Total Volume</th
+              >
+              <th class="text-white font-semibold text-end text-sm"
+                >Short Volume</th
+              >
+              <th class="text-white font-semibold text-end text-sm"
+                >% Short Volume Change</th
+              >
+            </tr>
+          </thead>
           <tbody>
-            <tr class="border-y border-gray-800 odd:bg-odd">
+            {#each tableList as item, index}
-              <td
+              <!-- row -->
-                class="px-[5px] py-1.5 xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
+              <tr
+                class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800"
               >
-                <span>Date</span>
+                <td
-              </td>
+                  class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap"
-              <td
+                >
-                class="text-sm sm:text-[1rem] px-[5px] py-1.5 whitespace-nowrap text-right font-medium xs:px-2.5 xs:py-2"
+                  {new Date(item?.date)?.toLocaleDateString("en-US", {
-              >
+                    day: "2-digit", // Include day number
-                {formatDateRange(rawData?.slice(-1)?.at(0)?.date)}
+                    month: "short", // Display short month name
-              </td>
+                    year: "numeric", // Include year
-            </tr>
+                  })}
-            <tr class="border-y border-gray-800 whitespace-nowrap odd:bg-odd">
+                </td>
-              <td
+
-                class="px-[5px] py-1.5 xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
+                <td
-              >
+                  class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
-                <span>Total Volume</span>
+                >
-              </td>
+                  {item?.totalVolume}
-              <td
+                </td>
-                class="text-sm sm:text-[1rem] px-[5px] py-1.5 whitespace-nowrap text-right font-medium xs:px-2.5 xs:py-2"
+
-              >
+                <td
-                {monthlyVolume}
+                  class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
-              </td>
+                >
-            </tr>
+                  {abbreviateNumber(item?.shortVolume)}
-            <tr class="border-y border-gray-800 whitespace-nowrap odd:bg-odd">
+                </td>
-              <td
+
-                class="px-[5px] py-1.5 xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
+                <td
-              >
+                  class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end"
-                <span>Avg. Short % of Volume</span>
+                >
-              </td>
+                  {#if index === tableList?.length - 1}
-              <td
+                    n/a
-                class="text-sm sm:text-[1rem] px-[5px] py-1.5 whitespace-nowrap text-right font-medium xs:px-2.5 xs:py-2"
+                  {:else if item?.shortVolume > tableList[index + 1]?.shortVolume}
-              >
+                    <span class="text-[#00FC50]">
-                {avgMonthlyShort}%
+                      +{(
-              </td>
+                        ((item?.shortVolume -
-            </tr>
+                          tableList[index + 1]?.shortVolume) /
+                          tableList[index + 1]?.shortVolume) *
+                        100
+                      )?.toFixed(2)}%
+                    </span>
+                  {:else if item?.shortVolume < tableList[index + 1]?.shortVolume}
+                    <span class="text-[#FF2F1F]">
+                      -{(
+                        Math.abs(
+                          (item?.shortVolume -
+                            tableList[index + 1]?.shortVolume) /
+                            tableList[index + 1]?.shortVolume,
+                        ) * 100
+                      )?.toFixed(2)}%
+                    </span>
+                  {:else}
+                    n/a
+                  {/if}
+                </td>
+              </tr>
+            {/each}
           </tbody>
         </table>
       </div>
     {/if}
   </main>
 </section>
-
-<style>
-  .app {
-    height: 300px;
-    max-width: 100%; /* Ensure chart width doesn't exceed the container */
-  }
-
-  @media (max-width: 640px) {
-    .app {
-      height: 210px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>

src/lib/components/FailToDeliver.svelte

@@ -5,11 +5,7 @@
     assetType,
     etfTicker,
   } from "$lib/store";
-  import {
+  import { abbreviateNumber, removeCompanyStrings } from "$lib/utils";
-    abbreviateNumber,
-    monthNames,
-    removeCompanyStrings,
-  } from "$lib/utils";
   import { goto } from "$app/navigation";
   import highcharts from "$lib/highcharts.ts";
 
@@ -158,21 +154,25 @@
         },
       },
       xAxis: {
+        endOnTick: false,
         categories: dates,
         crosshair: {
           color: "#fff", // Set the color of the crosshair line
           width: 1, // Adjust the line width as needed
           dashStyle: "Solid",
         },
+
         labels: {
           style: {
             color: "#fff",
           },
+          distance: 20, // Increases space between label and axis
           formatter: function () {
-            const dateParts = this.value.split("-");
+            return new Date(this.value).toLocaleDateString("en-US", {
-            const day = dateParts[2].substring(0);
+              day: "2-digit", // Include day number
-            const monthIndex = parseInt(dateParts[1], 10) - 1;
+              month: "short", // Display short month name
-            return `${day} ${monthNames[monthIndex]}`;
+              year: "numeric", // Include year
+            });
           },
         },
       },
@@ -409,20 +409,3 @@
     {/if}
   </main>
 </section>
-
-<style>
-  .app {
-    height: 300px;
-    max-width: 100%; /* Ensure chart width doesn't exceed the container */
-  }
-
-  @media (max-width: 640px) {
-    .app {
-      height: 210px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>

src/routes/etf/[tickerID]/dark-pool/+page.svelte

@@ -58,11 +58,10 @@
         {#if hottestTrades?.length > 0}
           <HottestTrades {data} rawData={hottestTrades} />
         {/if}
+        {#if historicalDarkPool?.length > 10}
+          <HistoricalVolume {data} rawData={historicalDarkPool} />
+        {/if}
         {#if data?.user?.tier === "Pro"}
-          {#if historicalDarkPool?.length > 10}
-            <HistoricalVolume rawData={historicalDarkPool} />
-          {/if}
-        {:else}
           <UpgradeToPro {data} />
         {/if}
       </div>

src/routes/stocks/[tickerID]/dark-pool/+page.svelte

@@ -58,11 +58,11 @@
         {#if hottestTrades?.length > 0}
           <HottestTrades {data} rawData={hottestTrades} />
         {/if}
+
+        {#if historicalDarkPool?.length > 10}
+          <HistoricalVolume {data} rawData={historicalDarkPool} />
+        {/if}
         {#if data?.user?.tier === "Pro"}
-          {#if historicalDarkPool?.length > 10}
-            <HistoricalVolume rawData={historicalDarkPool} />
-          {/if}
-        {:else}
           <UpgradeToPro {data} />
         {/if}
       </div>