update dark pool page
This commit is contained in:
MuslemRahimi
parent
7727c3e989
commit
b5bed6cfea
@ -4,6 +4,7 @@
|
||||
import { abbreviateNumber, removeCompanyStrings } from "$lib/utils";
|
||||
import highcharts from "$lib/highcharts.ts";
|
||||
import { goto } from "$app/navigation";
|
||||
import { mode } from "mode-watcher";
|
||||
|
||||
export let data;
|
||||
export let rawData = [];
|
||||
@ -75,8 +76,8 @@
|
||||
},
|
||||
chart: {
|
||||
type: "line",
|
||||
backgroundColor: "#09090B",
|
||||
plotBackgroundColor: "#09090B",
|
||||
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
|
||||
plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
|
||||
height: 360,
|
||||
spacingTop: 5,
|
||||
animation: false,
|
||||
@ -84,7 +85,7 @@
|
||||
title: {
|
||||
text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">${removeCompanyStrings($displayCompanyName)} Historical Chart</h3>`,
|
||||
style: {
|
||||
color: "white",
|
||||
color: $mode === "light" ? "black" : "white",
|
||||
},
|
||||
useHTML: true,
|
||||
},
|
||||
@ -96,13 +97,13 @@
|
||||
endOnTick: false,
|
||||
categories: dates,
|
||||
crosshair: {
|
||||
color: "#fff", // Set the color of the crosshair line
|
||||
color: $mode === "light" ? "black" : "white", // Set the color of the crosshair line
|
||||
width: 1, // Adjust the line width as needed
|
||||
dashStyle: "Solid",
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
color: "#fff",
|
||||
color: $mode === "light" ? "black" : "white",
|
||||
},
|
||||
distance: 20, // Increases space between label and axis
|
||||
formatter: function () {
|
||||
@ -118,7 +119,7 @@
|
||||
yAxis: [
|
||||
{
|
||||
gridLineWidth: 1,
|
||||
gridLineColor: "#111827",
|
||||
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
|
||||
labels: {
|
||||
enabled: false,
|
||||
},
|
||||
@ -149,8 +150,8 @@
|
||||
},
|
||||
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(
|
||||
// Format the x value to display time in a custom format
|
||||
let tooltipContent = `<span class="m-auto text-[1rem] font-[501]">${new Date(
|
||||
this?.x,
|
||||
).toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
@ -160,10 +161,10 @@
|
||||
|
||||
// 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>`;
|
||||
tooltipContent += `
|
||||
<span style="display:inline-block; width:10px; height:10px; background-color:${point.color}; border-radius:50%; margin-right:5px;"></span>
|
||||
<span class="font-semibold text-sm">${point.series.name}:</span>
|
||||
<span class="font-normal text-sm">${abbreviateNumber(point.y)}</span><br>`;
|
||||
});
|
||||
|
||||
return tooltipContent;
|
||||
@ -185,7 +186,7 @@
|
||||
name: "Total Volume",
|
||||
data: totalVolumeList,
|
||||
type: "line",
|
||||
color: "#fff",
|
||||
color: $mode === "light" ? "#2C6288" : "white",
|
||||
},
|
||||
{
|
||||
name: "Short Volume",
|
||||
@ -236,17 +237,17 @@
|
||||
});
|
||||
}
|
||||
|
||||
$: if ($stockTicker || $etfTicker) {
|
||||
$: if ($stockTicker || $etfTicker || $mode) {
|
||||
config = getPlotOptions() || null;
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="overflow-hidden text-white h-full pb-8">
|
||||
<section class="overflow-hidden h-full pb-8">
|
||||
<main class="overflow-hidden">
|
||||
<div class="flex flex-row items-center">
|
||||
<label
|
||||
for="historicalDataInfo"
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-xl sm:text-2xl font-bold"
|
||||
>
|
||||
Historical Chart
|
||||
</label>
|
||||
@ -259,7 +260,7 @@
|
||||
|
||||
{#if rawData?.length !== 0}
|
||||
<div class="w-full flex flex-col items-start">
|
||||
<div class="text-white text-[1rem] mt-2 mb-2 w-full">
|
||||
<div class=" text-[1rem] mt-2 mb-2 w-full">
|
||||
Over the past 12 months, {$displayCompanyName} has experienced an average
|
||||
dark pool trading volume of
|
||||
<span class="font-semibold">{abbreviateNumber(avgVolume)}</span>
|
||||
@ -273,14 +274,14 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="chart mt-5 sm:mt-0 border border-gray-800 rounded"
|
||||
class="chart mt-5 sm:mt-0 border border-gray-300 dark:border-gray-800 rounded"
|
||||
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"
|
||||
class="mt-5 flex flex-col sm:flex-row items-start sm:items-center w-full justify-between sm:border-y border-gray-300 dark: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">
|
||||
<h3 class="text-xl sm:text-2xl font-bold mb-2 sm:mb-0">
|
||||
Dark Pool Table
|
||||
</h3>
|
||||
|
||||
@ -288,7 +289,7 @@
|
||||
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"
|
||||
class="bg-gray-300 dark: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}
|
||||
@ -303,7 +304,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="#A3A3A3"
|
||||
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
|
||||
>
|
||||
@ -324,7 +325,7 @@
|
||||
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
|
||||
i
|
||||
? 'text-black'
|
||||
: 'text-white'}"
|
||||
: ''}"
|
||||
>
|
||||
{item.title}
|
||||
</span>
|
||||
@ -337,18 +338,14 @@
|
||||
|
||||
<div class="w-full overflow-x-auto">
|
||||
<table
|
||||
class="table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md w-full m-auto mt-4"
|
||||
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
|
||||
>
|
||||
<thead class="bg-default">
|
||||
<thead class="text-muted dark:text-white">
|
||||
<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"
|
||||
<th class=" font-semibold text-start text-sm">Date</th>
|
||||
<th class=" font-semibold text-end text-sm">Total Volume</th>
|
||||
<th class=" font-semibold text-end text-sm">Short Volume</th>
|
||||
<th class=" font-semibold text-end text-sm"
|
||||
>% Short Volume Change</th
|
||||
>
|
||||
</tr>
|
||||
@ -357,9 +354,9 @@
|
||||
{#each tableList as item, index}
|
||||
<!-- row -->
|
||||
<tr
|
||||
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-oddborder-b border-gray-800"
|
||||
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
|
||||
>
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
<td class=" text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{new Date(item?.date)?.toLocaleDateString("en-US", {
|
||||
day: "2-digit", // Include day number
|
||||
month: "short", // Display short month name
|
||||
@ -368,20 +365,18 @@
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
|
||||
class=" text-sm sm:text-[1rem] text-right whitespace-nowrap"
|
||||
>
|
||||
{abbreviateNumber(item?.totalVolume)}
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
|
||||
class=" text-sm sm:text-[1rem] text-right whitespace-nowrap"
|
||||
>
|
||||
{abbreviateNumber(item?.shortVolume)}
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-end"
|
||||
>
|
||||
<td class=" text-sm sm:text-[1rem] whitespace-nowrap text-end">
|
||||
{#if index === tableList?.length - 1}
|
||||
n/a
|
||||
{:else if item?.shortVolume > tableList[index + 1]?.shortVolume}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import InfoModal from "$lib/components/InfoModal.svelte";
|
||||
import TableHeader from "$lib/components/Table/TableHeader.svelte";
|
||||
|
||||
import { abbreviateNumberWithColor } from "$lib/utils";
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
|
||||
export let data;
|
||||
export let rawData = [];
|
||||
@ -120,12 +120,12 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<section class="overflow-hidden text-white h-full pb-8">
|
||||
<section class="overflow-hidden h-full pb-8">
|
||||
<main class="overflow-hidden">
|
||||
<div class="flex flex-row items-center">
|
||||
<label
|
||||
for="hottestDPTrade"
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-xl sm:text-2xl font-bold"
|
||||
>
|
||||
Hottest Trades
|
||||
</label>
|
||||
@ -138,7 +138,7 @@
|
||||
|
||||
{#if rawData?.length !== 0}
|
||||
<div class="w-full flex flex-col items-start">
|
||||
<div class="text-white text-[1rem] mt-2 mb-2 w-full">
|
||||
<div class=" text-[1rem] mt-2 mb-2 w-full">
|
||||
Get in realtime the latest hottest trades based on premium.
|
||||
</div>
|
||||
</div>
|
||||
@ -147,7 +147,7 @@
|
||||
class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto"
|
||||
>
|
||||
<table
|
||||
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md text-white w-full bg-table border border-gray-800 m-auto"
|
||||
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
|
||||
>
|
||||
<thead>
|
||||
<TableHeader {columns} {sortOrders} {sortData} />
|
||||
@ -155,36 +155,30 @@
|
||||
<tbody>
|
||||
{#each stockList as item, index}
|
||||
<tr
|
||||
class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd {index +
|
||||
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
|
||||
1 ===
|
||||
rawData?.length && !['Pro']?.includes(data?.user?.tier)
|
||||
? 'opacity-[0.1]'
|
||||
: ''}"
|
||||
>
|
||||
<td
|
||||
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{item?.rank}
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{formatToNewYorkTime(item?.date)}
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{item?.price}
|
||||
</td>
|
||||
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{@html abbreviateNumberWithColor(item?.size, false, true)}
|
||||
{abbreviateNumber(item?.size, false, true)}
|
||||
</td>
|
||||
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{@html abbreviateNumberWithColor(item?.volume, false, true)}
|
||||
{abbreviateNumber(item?.volume, false, true)}
|
||||
</td>
|
||||
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
@ -195,7 +189,7 @@
|
||||
</td>
|
||||
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{@html abbreviateNumberWithColor(item?.premium, false, true)}
|
||||
{abbreviateNumber(item?.premium, false, true)}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { displayCompanyName, stockTicker, etfTicker } from "$lib/store";
|
||||
import { abbreviateNumber, abbreviateNumberWithColor } from "$lib/utils";
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
import highcharts from "$lib/highcharts.ts";
|
||||
import RealtimeTrade from "$lib/components/DarkPool/RealtimeTrade.svelte";
|
||||
import { mode } from "mode-watcher";
|
||||
|
||||
let category = "Today's Trend";
|
||||
|
||||
@ -21,13 +22,17 @@
|
||||
|
||||
// Create colors array with highlighted bar
|
||||
const colors = xAxis?.map((value, index) =>
|
||||
index === maxValueIndex ? "#3BA272" : "#e2e8f0",
|
||||
index === maxValueIndex
|
||||
? "#3BA272"
|
||||
: $mode === "light"
|
||||
? "#2C6288"
|
||||
: "#e2e8f0",
|
||||
);
|
||||
|
||||
const options = {
|
||||
chart: {
|
||||
type: "column",
|
||||
backgroundColor: "#09090B",
|
||||
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
|
||||
animation: false,
|
||||
height: 360,
|
||||
},
|
||||
@ -36,19 +41,19 @@
|
||||
title: {
|
||||
text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">Dark Pool Price Levels</h3>`,
|
||||
useHTML: true,
|
||||
style: { color: "white" },
|
||||
style: { color: $mode === "light" ? "black" : "white" },
|
||||
},
|
||||
xAxis: {
|
||||
endonTick: false,
|
||||
categories: yAxis,
|
||||
crosshair: {
|
||||
color: "#fff", // Set the color of the crosshair line
|
||||
color: $mode === "light" ? "black" : "white", // Set the color of the crosshair line
|
||||
width: 1, // Adjust the line width as needed
|
||||
dashStyle: "Solid",
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
color: "#fff",
|
||||
color: $mode === "light" ? "black" : "white",
|
||||
},
|
||||
distance: 10, // Increases space between label and axis
|
||||
formatter: function () {
|
||||
@ -62,7 +67,7 @@
|
||||
},
|
||||
opposite: true,
|
||||
gridLineWidth: 1,
|
||||
gridLineColor: "#111827",
|
||||
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
|
||||
tickPositioner: function () {
|
||||
const positions = [];
|
||||
const info = this.getExtremes();
|
||||
@ -97,12 +102,12 @@
|
||||
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]">Price Level ${this?.x}</span><br>`;
|
||||
let tooltipContent = `<span class=" m-auto text-[1rem] font-[501]">Price Level ${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(
|
||||
tooltipContent += `<span class=" font-semibold text-sm">${point.series.name}:</span>
|
||||
<span class=" font-normal text-sm ">${abbreviateNumber(
|
||||
point.y,
|
||||
)}</span><br>`;
|
||||
});
|
||||
@ -135,25 +140,25 @@
|
||||
return options;
|
||||
}
|
||||
|
||||
$: if (($stockTicker || $etfTicker) && category) {
|
||||
$: if ((($stockTicker || $etfTicker) && category) || $mode) {
|
||||
config = getBarChart() || null;
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="overflow-hidden text-white h-full pb-8 pt-3">
|
||||
<section class="overflow-hidden h-full pb-8 pt-3">
|
||||
<main class="overflow-hidden">
|
||||
{#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">
|
||||
{$displayCompanyName} has seen an average dark pool trade size of {@html abbreviateNumberWithColor(
|
||||
<div class=" text-[1rem] mt-2 w-full">
|
||||
{$displayCompanyName} has seen an average dark pool trade size of {abbreviateNumber(
|
||||
metrics?.avgTradeSize,
|
||||
false,
|
||||
true,
|
||||
)} and an average premium per trade of {@html abbreviateNumberWithColor(
|
||||
)} and an average premium per trade of {abbreviateNumber(
|
||||
metrics?.avgPremTrade,
|
||||
false,
|
||||
true,
|
||||
)}, with a total premium of {@html abbreviateNumberWithColor(
|
||||
)}, with a total premium of {abbreviateNumber(
|
||||
metrics?.totalPrem,
|
||||
false,
|
||||
true,
|
||||
@ -161,25 +166,26 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" rounded-md bg-default mt-5 sm:mt-0">
|
||||
<div class=" rounded-md mt-5 sm:mt-0">
|
||||
<div class="flex justify-end mb-2 space-x-2 z-10 text-sm">
|
||||
{#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"
|
||||
class="px-3 py-1 text-sm border border-gray-300 dark:border-gray-700 {category ===
|
||||
item
|
||||
? 'bg-gray-300 shadow-sm dark:bg-white text-black '
|
||||
: ' shadow-sm bg-gray-100 dark:bg-table text-opacity-[0.6]'} transition ease-out duration-100 rounded 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 ===
|
||||
class="px-3 py-1 text-sm flex flex-row items-center border border-gray-300 dark: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"
|
||||
? 'bg-gray-300 shadow-sm dark:bg-white text-black '
|
||||
: ' shadow-sm bg-gray-100 dark:bg-table text-opacity-[0.6]'} transition ease-out duration-100 rounded cursor-pointer"
|
||||
>
|
||||
{item}
|
||||
<svg
|
||||
@ -198,7 +204,7 @@
|
||||
|
||||
{#if category === "Price Level"}
|
||||
<div
|
||||
class="border border-gray-800 rounded w-full"
|
||||
class="border border-gray-300 dark:border-gray-800 rounded w-full"
|
||||
use:highcharts={config}
|
||||
></div>
|
||||
{:else}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { stockTicker, etfTicker } from "$lib/store";
|
||||
import highcharts from "$lib/highcharts.ts";
|
||||
import { mode } from "mode-watcher";
|
||||
|
||||
export let data;
|
||||
|
||||
@ -68,7 +69,7 @@
|
||||
|
||||
const options = {
|
||||
chart: {
|
||||
backgroundColor: "#09090B",
|
||||
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
|
||||
animation: false,
|
||||
height: 360,
|
||||
},
|
||||
@ -77,7 +78,7 @@
|
||||
title: {
|
||||
text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">Realtime Dark Pool Trades Impact</h3>`,
|
||||
useHTML: true,
|
||||
style: { color: "white" },
|
||||
style: { color: $mode === "light" ? "black" : "white" },
|
||||
},
|
||||
xAxis: {
|
||||
type: "datetime",
|
||||
@ -85,12 +86,12 @@
|
||||
max: endTime,
|
||||
tickLength: 0,
|
||||
crosshair: {
|
||||
color: "#fff",
|
||||
color: $mode === "light" ? "black" : "white",
|
||||
width: 1,
|
||||
dashStyle: "Solid",
|
||||
},
|
||||
labels: {
|
||||
style: { color: "#fff" },
|
||||
style: { color: $mode === "light" ? "black" : "white" },
|
||||
distance: 20,
|
||||
formatter: function () {
|
||||
const date = new Date(this?.value);
|
||||
@ -107,14 +108,17 @@
|
||||
min: yMin ?? null,
|
||||
max: yMax ?? null,
|
||||
title: { text: null },
|
||||
labels: { style: { color: "white" } },
|
||||
labels: { style: { color: $mode === "light" ? "black" : "white" } },
|
||||
gridLineWidth: 1,
|
||||
gridLineColor: "#111827",
|
||||
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
|
||||
opposite: true,
|
||||
},
|
||||
{
|
||||
title: { text: "Total Trades", style: { color: "#fff" } },
|
||||
labels: { style: { color: "#fff" } },
|
||||
title: {
|
||||
text: "Total Trades",
|
||||
style: { color: $mode === "light" ? "black" : "white" },
|
||||
},
|
||||
labels: { style: { color: $mode === "light" ? "black" : "white" } },
|
||||
gridLineWidth: 0,
|
||||
opposite: false,
|
||||
},
|
||||
@ -125,27 +129,36 @@
|
||||
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||
borderColor: "rgba(255, 255, 255, 0.2)",
|
||||
borderWidth: 1,
|
||||
style: { color: "#fff", fontSize: "16px", padding: "10px" },
|
||||
style: {
|
||||
color: "#fff",
|
||||
fontSize: "16px",
|
||||
padding: "10px",
|
||||
},
|
||||
borderRadius: 4,
|
||||
formatter: function () {
|
||||
// Create a Date object from the x value and format it as time
|
||||
const date = new Date(this?.x);
|
||||
let formattedDate = date.toLocaleTimeString("en-US", {
|
||||
let formattedTime = date.toLocaleTimeString("en-US", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
|
||||
let tooltipContent = `<span class="text-white m-auto text-sm">${formattedDate}</span><br>`;
|
||||
// Build the tooltip content starting with the formatted time
|
||||
let tooltipContent = `<span class="m-auto text-sm text-white">${formattedTime}</span><br>`;
|
||||
|
||||
// Loop through each point and add its details, excluding "Dark Pool Volume"
|
||||
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>`;
|
||||
tooltipContent += `
|
||||
<span class="font-semibold text-sm">${point.series.name}:</span>
|
||||
<span class="font-normal text-sm"><b>${point.y}</b></span><br>`;
|
||||
}
|
||||
});
|
||||
|
||||
return tooltipContent;
|
||||
},
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
series: {
|
||||
animation: false,
|
||||
@ -174,7 +187,7 @@
|
||||
name: "Price",
|
||||
type: "line",
|
||||
data: seriesData,
|
||||
color: "#fff",
|
||||
color: $mode === "light" ? "blue" : "white",
|
||||
lineWidth: 1.3,
|
||||
yAxis: 0, // Use primary yAxis
|
||||
animation: false,
|
||||
@ -194,13 +207,13 @@
|
||||
return options;
|
||||
}
|
||||
|
||||
$: if ($stockTicker || $etfTicker) {
|
||||
$: if ($stockTicker || $etfTicker || $mode) {
|
||||
config = null;
|
||||
config = getPlotChart() || null;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="border border-gray-800 rounded w-full"
|
||||
class="border border-gray-300 dark:border-gray-800 rounded w-full"
|
||||
use:highcharts={config}
|
||||
></div>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
description={`Explore exclusive dark pool trading data for ${$displayCompanyName} (${$stockTicker}). Get insights into hidden market activity, stock price movements, institutional trades, financials, and key statistics.`}
|
||||
/>
|
||||
|
||||
<section class="w-full bg-default overflow-hidden text-white h-full">
|
||||
<section class="w-full overflow-hidden h-full">
|
||||
<div class="w-full flex h-full overflow-hidden">
|
||||
<div
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
@ -34,7 +34,7 @@
|
||||
<div class="flex flex-row items-center mb-4 sm:mb-0">
|
||||
<label
|
||||
for="darkPoolInfo"
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-xl sm:text-2xl font-bold"
|
||||
>
|
||||
Dark Pool Data
|
||||
</label>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user