add dp impact feature

2025-03-07 14:55:49 +01:00 · 2025-03-07 14:55:49 +01:00 · 70ad457ac1
commit 70ad457ac1
parent e8164b4bfa
14 changed files with 283 additions and 67 deletions
--- a/src/lib/components/DarkPool/HistoricalVolume.svelte
+++ b/src/lib/components/DarkPool/HistoricalVolume.svelte
@ -82,7 +82,7 @@
        animation: false,
      },
      title: {
-        text: `<h3 class="mt-3 mb-1">${removeCompanyStrings($displayCompanyName)} Historical Chart</h3>`,
+        text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">${removeCompanyStrings($displayCompanyName)} Historical Chart</h3>`,
        style: {
          color: "white",
        },
--- a/src/lib/components/DarkPool/PriceLevel.svelte
+++ b/src/lib/components/DarkPool/PriceLevel.svelte
@ -1,18 +1,19 @@
 <script lang="ts">
  import { displayCompanyName, stockTicker, etfTicker } from "$lib/store";
-  import InfoModal from "$lib/components/InfoModal.svelte";
  import { abbreviateNumber, abbreviateNumberWithColor } from "$lib/utils";
  import highcharts from "$lib/highcharts.ts";
+  import RealtimeTrade from "$lib/components/DarkPool/RealtimeTrade.svelte";

-  let category = "Size";
+  let category = "Today's Trend";

+  export let data;
  export let rawData = [];
  export let metrics = {};

  let config;

-  function getPlotOptions(category) {
-    const xAxis = rawData?.map((item) => item[category?.toLowerCase()]);
+  function getBarChart() {
+    const xAxis = rawData?.map((item) => item?.size);
    const yAxis = rawData?.map((item) => item?.price_level || 0);

    // Find max value index for highlighting
@ -33,7 +34,7 @@
      credits: { enabled: false },
      legend: { enabled: false },
      title: {
-        text: `<h3 class="mt-3 mb-1">Dark Pool Price Levels</h3>`,
+        text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">Dark Pool Price Levels</h3>`,
        useHTML: true,
        style: { color: "white" },
      },
@ -124,7 +125,7 @@
      },
      series: [
        {
-          name: `Total ${category}`,
+          name: `Total Size`,
          data: xAxis,
          animation: false,
        },
@ -135,26 +136,12 @@
  }

  $: if (($stockTicker || $etfTicker) && category) {
-    config = getPlotOptions(category) || null;
+    config = getBarChart() || null;
  }
 </script>

 <section class="overflow-hidden text-white h-full pb-8 pt-3">
  <main class="overflow-hidden">
-    <div class="flex flex-row items-center">
-      <label
-        for="priceLevelInfo"
-        class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
-      >
-        Price Level
-      </label>
-      <InfoModal
-        title={"Price Level"}
-        content={"Price levels reveal where significant trading activity occurs, aiding investors in identifying key support and resistance zones."}
-        id={"priceLevelInfo"}
-      />
-    </div>
-
    {#if rawData?.length !== 0 && Object?.keys(metrics)?.length > 0}
      <div class="w-full flex flex-col items-start">
        <div class="text-white text-[1rem] mt-2 w-full">
@ -176,22 +163,47 @@

      <div class=" rounded-md bg-default mt-5 sm:mt-0">
        <div class="flex justify-end mb-2 space-x-2 z-10 text-sm">
-          {#each ["Size", "Premium"] as item}
-            <label
-              on:click={() => (category = item)}
-              class="px-3 py-1 {category === item
-                ? 'bg-white text-black'
-                : 'text-white bg-table'} border border-gray-800 transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
-            >
-              {item}
-            </label>
+          {#each ["Today's Trend", "Price Level"] as item, index}
+            {#if data?.user?.tier === "Pro" || index === 0}
+              <label
+                on:click={() => (category = item)}
+                class="px-3 py-1 text-sm {category === item
+                  ? 'bg-white text-black '
+                  : 'text-white bg-table text-opacity-[0.6]'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
+              >
+                {item}
+              </label>
+            {:else if data?.user?.tier !== "Pro"}
+              <a
+                href="/pricing"
+                class="px-3 py-1 text-sm flex flex-row items-center border border-gray-700 {category ===
+                item
+                  ? 'bg-white text-black '
+                  : 'text-white bg-table text-opacity-[0.6]'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
+              >
+                {item}
+                <svg
+                  class="ml-1 -mt-w-3.5 h-3.5 inline-block"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  ><path
+                    fill="currentColor"
+                    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
+                >
+              </a>
+            {/if}
          {/each}
        </div>

-        <div
-          class="border border-gray-800 rounded w-full"
-          use:highcharts={config}
-        ></div>
+        {#if category === "Price Level"}
+          <div
+            class="border border-gray-800 rounded w-full"
+            use:highcharts={config}
+          ></div>
+        {:else}
+          <RealtimeTrade {data} />
+        {/if}
      </div>
    {/if}
  </main>
--- a/src/lib/components/DarkPool/RealtimeTrade.svelte
+++ b/src/lib/components/DarkPool/RealtimeTrade.svelte
@ -0,0 +1,206 @@
+<script lang="ts">
+  import { stockTicker, etfTicker } from "$lib/store";
+  import highcharts from "$lib/highcharts.ts";
+
+  export let data;
+
+  let config;
+
+  function getPlotChart() {
+    const rawData = data?.getOneDayPrice || [];
+    const darkPoolVolume = data?.getPriceLevel?.trend || [];
+
+    const baseDate =
+      rawData && rawData?.length ? new Date(rawData?.at(0)?.time) : new Date();
+
+    // Set the fixed start and end times (9:30 and 16:00)
+    const startTime = new Date(
+      baseDate.getFullYear(),
+      baseDate.getMonth(),
+      baseDate.getDate(),
+      9,
+      30,
+    ).getTime();
+    const endTime = new Date(
+      baseDate.getFullYear(),
+      baseDate.getMonth(),
+      baseDate.getDate(),
+      16,
+      0,
+    ).getTime();
+
+    // Convert rawData into series data for the line chart
+    const seriesData = rawData?.map((item) => [
+      Date.UTC(
+        new Date(item?.time).getUTCFullYear(),
+        new Date(item?.time).getUTCMonth(),
+        new Date(item?.time).getUTCDate(),
+        new Date(item?.time).getUTCHours(),
+        new Date(item?.time).getUTCMinutes(),
+        new Date(item?.time).getUTCSeconds(),
+      ),
+      item?.close,
+    ]);
+
+    // Convert darkPoolVolume into series data for the bar chart
+    const darkPoolSeries = darkPoolVolume?.map((item) => [
+      Date.UTC(
+        new Date(item?.date).getUTCFullYear(),
+        new Date(item?.date).getUTCMonth(),
+        new Date(item?.date).getUTCDate(),
+        new Date(item?.date).getUTCHours(),
+        new Date(item?.date).getUTCMinutes(),
+      ),
+      item?.totalSize,
+    ]);
+
+    // Find the lowest & highest close values
+    let minValue = Math?.min(...rawData?.map((item) => item?.close));
+    let maxValue = Math?.max(...rawData?.map((item) => item?.close));
+
+    if (minValue - 0 < 1) {
+      minValue = data?.getStockQuote?.dayLow;
+    }
+
+    let padding = 0.015;
+    let yMin = minValue * (1 - padding) === 0 ? null : minValue * (1 - padding);
+    let yMax = maxValue * (1 + padding) === 0 ? null : maxValue * (1 + padding);
+
+    const options = {
+      chart: {
+        backgroundColor: "#09090B",
+        animation: false,
+        height: 360,
+      },
+      credits: { enabled: false },
+      legend: { enabled: false },
+      title: {
+        text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">Realtime Dark Pool Trades Impact</h3>`,
+        useHTML: true,
+        style: { color: "white" },
+      },
+      xAxis: {
+        type: "datetime",
+        min: startTime,
+        max: endTime,
+        tickLength: 0,
+        crosshair: {
+          color: "#fff",
+          width: 1,
+          dashStyle: "Solid",
+        },
+        labels: {
+          style: { color: "#fff" },
+          distance: 20,
+          formatter: function () {
+            const date = new Date(this?.value);
+            return date?.toLocaleTimeString("en-US", {
+              hour: "2-digit",
+              minute: "2-digit",
+            });
+          },
+        },
+      },
+      yAxis: [
+        {
+          // Primary yAxis for price
+          min: yMin ?? null,
+          max: yMax ?? null,
+          title: { text: null },
+          labels: { style: { color: "white" } },
+          gridLineWidth: 1,
+          gridLineColor: "#111827",
+          opposite: true,
+        },
+        {
+          title: { text: "Total Trades", style: { color: "#fff" } },
+          labels: { style: { color: "#fff" } },
+          gridLineWidth: 0,
+          opposite: false,
+        },
+      ],
+      tooltip: {
+        shared: true,
+        useHTML: true,
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        borderColor: "rgba(255, 255, 255, 0.2)",
+        borderWidth: 1,
+        style: { color: "#fff", fontSize: "16px", padding: "10px" },
+        borderRadius: 4,
+        formatter: function () {
+          const date = new Date(this?.x);
+          let formattedDate = date.toLocaleTimeString("en-US", {
+            hour: "2-digit",
+            minute: "2-digit",
+          });
+
+          let tooltipContent = `<span class="text-white m-auto text-sm">${formattedDate}</span><br>`;
+
+          this.points?.forEach((point) => {
+            // Exclude the column series from the tooltip
+            if (point.series.name !== "Dark Pool Volume") {
+              tooltipContent += `<span style="color:${point.color}">${point.series.name}: <b>${point.y}</b></span><br>`;
+            }
+          });
+
+          return tooltipContent;
+        },
+      },
+      plotOptions: {
+        series: {
+          animation: false,
+          marker: {
+            enabled: false,
+            states: {
+              hover: { enabled: false }, // Disable marker on hover
+              select: { enabled: false }, // Disable marker on selection
+            },
+          },
+        },
+        column: {
+          opacity: 1,
+          animation: false,
+          marker: {
+            enabled: false,
+            states: {
+              hover: { enabled: false }, // Disable marker on hover
+              select: { enabled: false }, // Disable marker on selection
+            },
+          },
+        },
+      },
+      series: [
+        {
+          name: "Price",
+          type: "line",
+          data: seriesData,
+          color: "#fff",
+          lineWidth: 1.3,
+          yAxis: 0, // Use primary yAxis
+          animation: false,
+        },
+        {
+          name: "Dark Pool Volume",
+          type: "column",
+          data: darkPoolSeries,
+          color:
+            data?.getStockQuote?.changesPercentage >= 0 ? "#04D347" : "#E11D48",
+          yAxis: 1, // Use secondary yAxis
+          animation: false,
+        },
+      ],
+    };
+
+    return options;
+  }
+
+  $: if ($stockTicker || $etfTicker) {
+    config = null;
+    config = getPlotChart() || null;
+  }
+</script>
+
+<div
+  class="border border-gray-800 rounded w-full"
+  use:highcharts={config}
+></div>
--- a/src/lib/components/FailToDeliver.svelte
+++ b/src/lib/components/FailToDeliver.svelte
@ -84,7 +84,7 @@
        animation: false,
      },
      title: {
-        text: `<h3 class="mt-3 mb-1">${removeCompanyStrings($displayCompanyName)} FTD</h3>`,
+        text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">${removeCompanyStrings($displayCompanyName)} FTD</h3>`,
        style: {
          color: "white",
        },
--- a/src/lib/components/Options/HottestContracts.svelte
+++ b/src/lib/components/Options/HottestContracts.svelte
@ -384,7 +384,7 @@
      },
      credits: { enabled: false },
      title: {
-        text: `<h3 class="mt-3 mb-1">Contract History</h3>`,
+        text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">Contract History</h3>`,
        useHTML: true,
        style: { color: "white" },
      },
--- a/src/lib/components/Options/OpenInterestByExpiry.svelte
+++ b/src/lib/components/Options/OpenInterestByExpiry.svelte
@ -51,7 +51,7 @@
      credits: { enabled: false },
      legend: { enabled: false },
      title: {
-        text: `<h3 class="mt-3 mb-1">Open Interest By Expiry</h3>`,
+        text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">Open Interest By Expiry</h3>`,
        useHTML: true,
        style: { color: "white" },
      },
--- a/src/lib/components/Options/OpenInterestByStrike.svelte
+++ b/src/lib/components/Options/OpenInterestByStrike.svelte
@ -49,7 +49,7 @@
      credits: { enabled: false },
      legend: { enabled: false },
      title: {
-        text: `<h3 class="mt-3 mb-1">Open Interest By Strike</h3>`,
+        text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">Open Interest By Strike</h3>`,
        useHTML: true,
        style: { color: "white" },
      },
--- a/src/lib/components/Options/UnusualActivity.svelte
+++ b/src/lib/components/Options/UnusualActivity.svelte
@ -148,6 +148,11 @@
        enabled: false,
      },
      plotOptions: {
+        column: {
+          groupPadding: 0.1, // Increase to add more space between groups of columns
+          pointPadding: 0.1, // Adjust to fine-tune spacing within a group
+          borderWidth: 0, // Optional: Remove borders if not needed
+        },
        series: {
          color: "white",
          animation: false, // Disable series animation
@ -159,28 +164,25 @@
        },
      },
      chart: {
-        // Removed global type so each series can define its own type.
        backgroundColor: "#09090B",
        plotBackgroundColor: "#09090B",
        height: 360,
-        width: 850,
        animation: false,
      },
      title: {
-        text: `<h3 class="mt-3 mb-1 ">${ticker} Unusual Options Activity</h3>`,
+        text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">${ticker} Unusual Options Activity</h3>`,
        style: {
          color: "white",
-          // Using inline CSS for margin-top and margin-bottom
        },
-        useHTML: true, // Enable HTML to apply custom class styling
+        useHTML: true,
      },
      xAxis: {
        type: "datetime",
        endOnTick: false,
        categories: dates,
        crosshair: {
-          color: "#fff", // Set the color of the crosshair line
-          width: 1, // Adjust the line width as needed
+          color: "#fff",
+          width: 1,
          dashStyle: "Solid",
        },
        labels: {
@ -196,10 +198,9 @@
          },
        },
        tickPositioner: function () {
-          // Create custom tick positions with wider spacing
          const positions = [];
          const info = this.getExtremes();
-          const tickCount = 5; // Reduce number of ticks displayed
+          const tickCount = 5;
          const interval = Math.floor((info.max - info.min) / tickCount);

          for (let i = 0; i <= tickCount; i++) {
@ -231,8 +232,8 @@
      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
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        borderColor: "rgba(255, 255, 255, 0.2)",
        borderWidth: 1,
        style: {
          color: "#fff",
@ -241,7 +242,6 @@
        },
        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", {
@ -250,12 +250,11 @@
            day: "numeric",
          })}</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>`;
+      <span class="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumber(
+        point.y,
+      )}</span><br>`;
          });

          return tooltipContent;
@ -267,8 +266,8 @@
          type: "column",
          data: callData,
          color: "#00FC50",
-          borderColor: "#00FC50", // Match border color
-          borderRadius: "2px",
+          borderColor: "#00FC50",
+          borderRadius: "0px",
          marker: {
            enabled: false,
          },
@ -279,8 +278,8 @@
          type: "column",
          data: putData,
          color: "#EE5365",
-          borderColor: "#EE5365", // Match border color
-          borderRadius: "2px",
+          borderColor: "#EE5365",
+          borderRadius: "0px",
          marker: {
            enabled: false,
          },
@ -304,11 +303,8 @@
              [1, "rgba(255, 255, 255, 0.001)"],
            ],
          },
-          // If you prefer a smooth (curved) line, you can use the "spline" type:
-          // type: "spline"
        },
      ],
-
      legend: {
        enabled: false,
      },
@ -450,7 +446,7 @@
      },
      credits: { enabled: false },
      title: {
-        text: `<h3 class="mt-3 mb-1">Contract History</h3>`,
+        text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">Contract History</h3>`,
        useHTML: true,
        style: { color: "white" },
      },
--- a/src/lib/components/Options/Volatility.svelte
+++ b/src/lib/components/Options/Volatility.svelte
@ -103,7 +103,7 @@
      credits: { enabled: false },
      legend: { enabled: false },
      title: {
-        text: `<h3 class="mt-3 mb-1">Volatiltiy Exposure</h3>`,
+        text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">Volatiltiy Exposure</h3>`,
        useHTML: true,
        style: { color: "white" },
      },
--- a/src/lib/components/RatingsChart.svelte
+++ b/src/lib/components/RatingsChart.svelte
@ -165,7 +165,7 @@
      credits: { enabled: false },
      legend: { enabled: false },
      title: {
-        text: `<h3 class="mt-3 mb-1">${symbol} - ${numOfRatings} Transaction</h3>`,
+        text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">${symbol} - ${numOfRatings} Transaction</h3>`,
        useHTML: true,
        style: { color: "white" },
      },
--- a/src/routes/etf/[tickerID]/dark-pool/+page.svelte
+++ b/src/routes/etf/[tickerID]/dark-pool/+page.svelte
@ -51,6 +51,7 @@
        </div>
        {#if priceLevel?.length > 0}
          <PriceLevel
+            {data}
            rawData={priceLevel}
            metrics={data?.getPriceLevel?.metrics}
          />
--- a/src/routes/stocks/[tickerID]/dark-pool/+page.svelte
+++ b/src/routes/stocks/[tickerID]/dark-pool/+page.svelte
@ -51,6 +51,7 @@
        </div>
        {#if priceLevel?.length > 0}
          <PriceLevel
+            {data}
            rawData={priceLevel}
            metrics={data?.getPriceLevel?.metrics}
          />
--- a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
@ -65,7 +65,7 @@
        animation: false,
      },
      title: {
-        text: `<h3 class="mt-3 mb-1">${removeCompanyStrings($displayCompanyName)} Revenue by ${convertToTitleCase(data?.getParams)}</h3>`,
+        text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">${removeCompanyStrings($displayCompanyName)} Revenue by ${convertToTitleCase(data?.getParams)}</h3>`,
        style: {
          color: "white",
          // Using inline CSS for margin-top and margin-bottom
--- a/src/routes/stocks/[tickerID]/profile/employees/+page.svelte
+++ b/src/routes/stocks/[tickerID]/profile/employees/+page.svelte
@ -93,7 +93,7 @@
        animation: false,
      },
      title: {
-        text: `<h3 class="mt-3 mb-1">${removeCompanyStrings($displayCompanyName)} Employees</h3>`,
+        text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">${removeCompanyStrings($displayCompanyName)} Employees</h3>`,
        style: {
          color: "white",
        },