seo optimization
This commit is contained in:
MuslemRahimi
parent
cbefa701ce
commit
fe7032e502
@ -2,7 +2,7 @@
|
||||
import { displayCompanyName, stockTicker, etfTicker } from "$lib/store";
|
||||
import InfoModal from "$lib/components/InfoModal.svelte";
|
||||
import { Chart } from "svelte-echarts";
|
||||
import { abbreviateNumber, formatDateRange } from "$lib/utils";
|
||||
import { abbreviateNumber, formatDateRange, monthNames } from "$lib/utils";
|
||||
import { init, use } from "echarts/core";
|
||||
import { LineChart } from "echarts/charts";
|
||||
import { GridComponent, TooltipComponent } from "echarts/components";
|
||||
@ -12,7 +12,6 @@
|
||||
|
||||
export let rawData = [];
|
||||
|
||||
let isLoaded = false;
|
||||
let optionsData;
|
||||
let avgVolume = 0;
|
||||
let avgShortVolume = 0;
|
||||
@ -110,12 +109,24 @@
|
||||
top: "5%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: dates,
|
||||
axisLabel: { color: "#fff" },
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: dates,
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
|
||||
formatter: function (value) {
|
||||
// Assuming dates are in the format 'yyyy-mm-dd'
|
||||
const dateParts = value.split("-");
|
||||
const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
|
||||
const year = parseInt(dateParts[0]);
|
||||
const day = parseInt(dateParts[2]);
|
||||
return `${day} ${monthNames[monthIndex]} ${year}`;
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
@ -143,10 +154,8 @@
|
||||
};
|
||||
}
|
||||
|
||||
$: if (typeof window !== "undefined" && ($stockTicker || $etfTicker)) {
|
||||
isLoaded = false;
|
||||
$: if ($stockTicker || $etfTicker) {
|
||||
optionsData = getPlotOptions();
|
||||
isLoaded = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -166,132 +175,118 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if isLoaded}
|
||||
{#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">
|
||||
Over the past 12 months, {$displayCompanyName} has experienced an average
|
||||
dark pool trading volume of
|
||||
<span class="font-semibold">{abbreviateNumber(avgVolume)}</span>
|
||||
shares. Out of this total, an average of
|
||||
<span class="font-semibold">{abbreviateNumber(avgShortVolume)}</span
|
||||
>
|
||||
shares, constituting approximately
|
||||
<span class="font-semibold"
|
||||
>{((avgShortVolume / avgVolume) * 100)?.toFixed(2)}%</span
|
||||
>, were short volume.
|
||||
</div>
|
||||
{#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">
|
||||
Over the past 12 months, {$displayCompanyName} has experienced an average
|
||||
dark pool trading volume of
|
||||
<span class="font-semibold">{abbreviateNumber(avgVolume)}</span>
|
||||
shares. Out of this total, an average of
|
||||
<span class="font-semibold">{abbreviateNumber(avgShortVolume)}</span>
|
||||
shares, constituting approximately
|
||||
<span class="font-semibold"
|
||||
>{((avgShortVolume / avgVolume) * 100)?.toFixed(2)}%</span
|
||||
>, were short volume.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pb-2 rounded-md bg-default">
|
||||
<div class="app w-full h-[300px] mt-5">
|
||||
<Chart {init} options={optionsData} class="chart" />
|
||||
</div>
|
||||
<div class="pb-2 rounded-md bg-default">
|
||||
<div class="app w-full h-[300px] mt-5">
|
||||
<Chart {init} options={optionsData} class="chart" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-row items-center justify-between mx-auto mt-5 w-full sm:w-11/12"
|
||||
>
|
||||
<div
|
||||
class="flex flex-row items-center justify-between mx-auto mt-5 w-full sm:w-11/12"
|
||||
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="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>
|
||||
class="h-full transform -translate-x-1/2"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
<div
|
||||
class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
Total Volume
|
||||
</span>
|
||||
</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"
|
||||
class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"
|
||||
>
|
||||
<table
|
||||
class="w-full bg-table table table-sm table-compact border border-gray-800"
|
||||
<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"
|
||||
>
|
||||
<tbody>
|
||||
<tr class="border-y border-gray-800 odd:bg-odd">
|
||||
<td
|
||||
class="px-[5px] py-1.5 xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
|
||||
>
|
||||
<span>Date</span>
|
||||
</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"
|
||||
>
|
||||
{formatDateRange(rawData?.slice(-1)?.at(0)?.date)}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-y border-gray-800 whitespace-nowrap odd:bg-odd">
|
||||
<td
|
||||
class="px-[5px] py-1.5 xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
|
||||
>
|
||||
<span>Total Volume</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
|
||||
>
|
||||
{monthlyVolume}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-y border-gray-800 whitespace-nowrap odd:bg-odd">
|
||||
<td
|
||||
class="px-[5px] py-1.5 xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
|
||||
>
|
||||
<span>Avg. Short % of Volume</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
|
||||
>
|
||||
{avgMonthlyShort}%
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<div class="relative">
|
||||
<label
|
||||
class="bg-secondary 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>
|
||||
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"
|
||||
>
|
||||
<tbody>
|
||||
<tr class="border-y border-gray-800 odd:bg-odd">
|
||||
<td
|
||||
class="px-[5px] py-1.5 xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
|
||||
>
|
||||
<span>Date</span>
|
||||
</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"
|
||||
>
|
||||
{formatDateRange(rawData?.slice(-1)?.at(0)?.date)}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-y border-gray-800 whitespace-nowrap odd:bg-odd">
|
||||
<td
|
||||
class="px-[5px] py-1.5 xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
|
||||
>
|
||||
<span>Total Volume</span>
|
||||
</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"
|
||||
>
|
||||
{monthlyVolume}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-y border-gray-800 whitespace-nowrap odd:bg-odd">
|
||||
<td
|
||||
class="px-[5px] py-1.5 xs:px-2.5 xs:py-2 text-sm sm:text-[1rem]"
|
||||
>
|
||||
<span>Avg. Short % of Volume</span>
|
||||
</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"
|
||||
>
|
||||
{avgMonthlyShort}%
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
</section>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<script lang="ts">
|
||||
import { stockTicker, etfTicker } from "$lib/store";
|
||||
import InfoModal from "$lib/components/InfoModal.svelte";
|
||||
import TableHeader from "$lib/components/Table/TableHeader.svelte";
|
||||
|
||||
@ -8,8 +7,7 @@
|
||||
export let data;
|
||||
export let rawData = [];
|
||||
|
||||
let stockList = [];
|
||||
let isLoaded = false;
|
||||
let stockList = rawData || [];
|
||||
|
||||
function formatToNewYorkTime(isoString) {
|
||||
const date = new Date(isoString);
|
||||
@ -120,12 +118,6 @@
|
||||
// Sort using the generic comparison function
|
||||
stockList = [...originalData].sort(compareValues)?.slice(0, 50);
|
||||
};
|
||||
|
||||
$: if (typeof window !== "undefined" && ($stockTicker || $etfTicker)) {
|
||||
isLoaded = false;
|
||||
stockList = rawData;
|
||||
isLoaded = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="overflow-hidden text-white h-full pb-8">
|
||||
@ -144,88 +136,71 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if isLoaded}
|
||||
{#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">
|
||||
Get in realtime the latest hottest trades based on premium.
|
||||
</div>
|
||||
{#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">
|
||||
Get in realtime the latest hottest trades based on premium.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-scroll"
|
||||
<div
|
||||
class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-scroll"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<thead>
|
||||
<TableHeader {columns} {sortOrders} {sortData} />
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each stockList as item, index}
|
||||
<tr
|
||||
class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd {index +
|
||||
1 ===
|
||||
rawData?.length && data?.user?.tier !== 'Pro'
|
||||
? 'opacity-[0.1]'
|
||||
: ''}"
|
||||
<thead>
|
||||
<TableHeader {columns} {sortOrders} {sortData} />
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each stockList as item, index}
|
||||
<tr
|
||||
class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd {index +
|
||||
1 ===
|
||||
rawData?.length && data?.user?.tier !== 'Pro'
|
||||
? '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 text-white"
|
||||
>
|
||||
{item?.rank}
|
||||
</td>
|
||||
{item?.rank}
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{formatToNewYorkTime(item?.date)}
|
||||
</td>
|
||||
<td
|
||||
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{formatToNewYorkTime(item?.date)}
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{item?.price}
|
||||
</td>
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{item?.price}
|
||||
</td>
|
||||
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{@html abbreviateNumberWithColor(item?.size, false, true)}
|
||||
</td>
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{@html abbreviateNumberWithColor(item?.size, false, true)}
|
||||
</td>
|
||||
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{@html abbreviateNumberWithColor(item?.volume, false, true)}
|
||||
</td>
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{@html abbreviateNumberWithColor(item?.volume, false, true)}
|
||||
</td>
|
||||
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{item?.sizeVolRatio?.toFixed(2)}%
|
||||
</td>
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{item?.sizeAvgVolRatio?.toFixed(2)}%
|
||||
</td>
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{item?.sizeVolRatio?.toFixed(2)}%
|
||||
</td>
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{item?.sizeAvgVolRatio?.toFixed(2)}%
|
||||
</td>
|
||||
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{@html abbreviateNumberWithColor(
|
||||
item?.premium,
|
||||
false,
|
||||
true,
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<div class="relative">
|
||||
<label
|
||||
class="bg-secondary 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>
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
{@html abbreviateNumberWithColor(item?.premium, false, true)}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
@ -15,7 +15,6 @@
|
||||
export let rawData = [];
|
||||
export let metrics = {};
|
||||
|
||||
let isLoaded = false;
|
||||
let optionsData;
|
||||
|
||||
function getPlotOptions(category) {
|
||||
@ -105,14 +104,8 @@
|
||||
return options;
|
||||
}
|
||||
|
||||
$: if (
|
||||
typeof window !== "undefined" &&
|
||||
($stockTicker || $etfTicker) &&
|
||||
category
|
||||
) {
|
||||
isLoaded = false;
|
||||
$: if (($stockTicker || $etfTicker) && category) {
|
||||
optionsData = getPlotOptions(category);
|
||||
isLoaded = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -132,56 +125,43 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if isLoaded}
|
||||
{#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 mb-2 w-full">
|
||||
{$displayCompanyName} has seen an average dark pool trade size of {@html abbreviateNumberWithColor(
|
||||
metrics?.avgTradeSize,
|
||||
false,
|
||||
true,
|
||||
)} and an average premium per trade of {@html abbreviateNumberWithColor(
|
||||
metrics?.avgPremTrade,
|
||||
false,
|
||||
true,
|
||||
)}, with a total premium of {@html abbreviateNumberWithColor(
|
||||
metrics?.totalPrem,
|
||||
false,
|
||||
true,
|
||||
)}.
|
||||
</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 mb-2 w-full">
|
||||
{$displayCompanyName} has seen an average dark pool trade size of {@html abbreviateNumberWithColor(
|
||||
metrics?.avgTradeSize,
|
||||
false,
|
||||
true,
|
||||
)} and an average premium per trade of {@html abbreviateNumberWithColor(
|
||||
metrics?.avgPremTrade,
|
||||
false,
|
||||
true,
|
||||
)}, with a total premium of {@html abbreviateNumberWithColor(
|
||||
metrics?.totalPrem,
|
||||
false,
|
||||
true,
|
||||
)}.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pb-2 rounded-md bg-default mt-14 sm:mt-0">
|
||||
<div class="app w-full h-[300px] mt-5 relative">
|
||||
<div
|
||||
class="flex justify-start space-x-2 absolute right-0 -top-10 sm:-top-8 z-10 text-sm"
|
||||
>
|
||||
{#each ["Size", "Premium"] as item}
|
||||
<label
|
||||
on:click={() => (category = item)}
|
||||
class="px-4 py-2 {category === item
|
||||
? 'bg-white text-black shadow-xl'
|
||||
: '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>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<Chart {init} options={optionsData} class="chart " />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<div class="relative">
|
||||
<label
|
||||
class="bg-secondary 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"
|
||||
<div class="pb-2 rounded-md bg-default mt-14 sm:mt-0">
|
||||
<div class="app w-full h-[300px] mt-5 relative">
|
||||
<div
|
||||
class="flex justify-start space-x-2 absolute right-0 -top-10 sm:-top-8 z-10 text-sm"
|
||||
>
|
||||
<span class="loading loading-spinner loading-md text-gray-400"
|
||||
></span>
|
||||
</label>
|
||||
{#each ["Size", "Premium"] as item}
|
||||
<label
|
||||
on:click={() => (category = item)}
|
||||
class="px-4 py-2 {category === item
|
||||
? 'bg-white text-black shadow-xl'
|
||||
: '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>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<Chart {init} options={optionsData} class="chart " />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@ -170,7 +170,7 @@
|
||||
|
||||
$: {
|
||||
const ticker = $assetType === "stock" ? $stockTicker : $etfTicker;
|
||||
if (ticker && typeof window !== "undefined") {
|
||||
if (ticker) {
|
||||
isLoaded = false;
|
||||
console.log(rawData);
|
||||
if (rawData?.length > 0) {
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
import { compareTimes, formatTime, isPWAInstalled } from "$lib/utils";
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
import { closedPWA } from "$lib/store";
|
||||
import { options } from "marked";
|
||||
import Feedback from "$lib/components/Feedback.svelte";
|
||||
|
||||
export let data;
|
||||
let optionsMode = "openInterest";
|
||||
@ -32,7 +32,6 @@
|
||||
optionsTable = data?.getDashboard?.optionsData?.openInterest || [];
|
||||
}
|
||||
}
|
||||
let Feedback;
|
||||
let pwaInstalled = false;
|
||||
let AppInstalled = null;
|
||||
|
||||
@ -64,8 +63,6 @@
|
||||
console.error("Error loading AppInstalled component:", e);
|
||||
}
|
||||
}
|
||||
|
||||
Feedback = (await import("$lib/components/Feedback.svelte")).default;
|
||||
});
|
||||
|
||||
$: charNumber = $screenWidth < 640 ? 20 : 15;
|
||||
@ -165,9 +162,7 @@
|
||||
|
||||
<div class="flex flex-col m-auto justify-center items-center">
|
||||
<div class="text-center mb-10 w-full px-4 sm:px-3 mt-10">
|
||||
{#if Feedback}
|
||||
<Feedback {data} />
|
||||
{/if}
|
||||
<Feedback {data} />
|
||||
<!--
|
||||
<div class="text-center mb-10 relative w-fit flex justify-center m-auto">
|
||||
<a
|
||||
|
||||
@ -176,7 +176,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-normal text-white">Listed Funds</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{rawData?.length}
|
||||
</div>
|
||||
@ -186,7 +186,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-normal text-white">Total Assets</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{abbreviateNumber(totalAssets)}
|
||||
</div>
|
||||
@ -196,7 +196,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-normal text-white">Average Cost</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{avgExpenseRatio?.toFixed(2)}%
|
||||
</div>
|
||||
|
||||
@ -113,7 +113,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total ETFs</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
@ -123,7 +123,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Assets</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{abbreviateNumber(totalAssets)}
|
||||
</div>
|
||||
@ -133,7 +133,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Avg. Cost</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{avgExpenseRatio?.toFixed(2)}%
|
||||
</div>
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Stocks</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
@ -50,7 +50,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Market Cap</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{abbreviateNumber(totalMarketCap)}
|
||||
</div>
|
||||
@ -60,7 +60,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Revenue</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{abbreviateNumber(totalRevenue)}
|
||||
</div>
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Stocks</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
@ -45,7 +45,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Market Cap</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{abbreviateNumber(totalMarketCap)}
|
||||
</div>
|
||||
@ -55,7 +55,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Revenue</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{abbreviateNumber(totalRevenue)}
|
||||
</div>
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Stocks</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
@ -35,7 +35,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Market Cap</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{abbreviateNumber(totalMarketCap)}
|
||||
</div>
|
||||
@ -45,7 +45,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Revenue</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{abbreviateNumber(totalRevenue)}
|
||||
</div>
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Stocks</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
@ -46,7 +46,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Market Cap</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{abbreviateNumber(totalMarketCap)}
|
||||
</div>
|
||||
@ -56,7 +56,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Revenue</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{abbreviateNumber(totalRevenue)}
|
||||
</div>
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Stocks</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
@ -42,7 +42,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Market Cap</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{abbreviateNumber(totalMarketCap)}
|
||||
</div>
|
||||
@ -52,7 +52,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Revenue</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{abbreviateNumber(totalRevenue)}
|
||||
</div>
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Stocks</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
@ -36,7 +36,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Market Cap</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{abbreviateNumber(totalMarketCap)}
|
||||
</div>
|
||||
@ -46,7 +46,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Revenue</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{abbreviateNumber(totalRevenue)}
|
||||
</div>
|
||||
|
||||
@ -122,7 +122,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Stocks</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
@ -132,7 +132,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Market Cap</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{abbreviateNumber(totalMarketCap)}
|
||||
</div>
|
||||
@ -142,7 +142,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Revenue</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{abbreviateNumber(totalRevenue)}
|
||||
</div>
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Stocks</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
@ -40,7 +40,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Market Cap</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{abbreviateNumber(totalMarketCap)}
|
||||
</div>
|
||||
@ -50,7 +50,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Revenue</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{abbreviateNumber(totalRevenue)}
|
||||
</div>
|
||||
|
||||
@ -10,16 +10,11 @@
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
import HottestTrades from "$lib/components/DarkPool/HottestTrades.svelte";
|
||||
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
export let data;
|
||||
let historicalDarkPool = data?.getHistoricalDarkPool || [];
|
||||
let priceLevel = data?.getPriceLevel?.priceLevel || [];
|
||||
let hottestTrades = data?.getPriceLevel?.hottestTrades || [];
|
||||
let isLoaded = false;
|
||||
onMount(() => {
|
||||
isLoaded = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@ -88,34 +83,21 @@
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{#if isLoaded}
|
||||
{#if priceLevel?.length > 0}
|
||||
<PriceLevel
|
||||
rawData={priceLevel}
|
||||
metrics={data?.getPriceLevel?.metrics}
|
||||
/>
|
||||
{/if}
|
||||
{#if hottestTrades?.length > 0}
|
||||
<HottestTrades {data} rawData={hottestTrades} />
|
||||
{/if}
|
||||
{#if data?.user?.tier === "Pro"}
|
||||
{#if historicalDarkPool?.length > 10}
|
||||
<HistoricalVolume rawData={historicalDarkPool} />
|
||||
{/if}
|
||||
{:else}
|
||||
<UpgradeToPro {data} />
|
||||
{#if priceLevel?.length > 0}
|
||||
<PriceLevel
|
||||
rawData={priceLevel}
|
||||
metrics={data?.getPriceLevel?.metrics}
|
||||
/>
|
||||
{/if}
|
||||
{#if hottestTrades?.length > 0}
|
||||
<HottestTrades {data} rawData={hottestTrades} />
|
||||
{/if}
|
||||
{#if data?.user?.tier === "Pro"}
|
||||
{#if historicalDarkPool?.length > 10}
|
||||
<HistoricalVolume rawData={historicalDarkPool} />
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<div class="relative">
|
||||
<label
|
||||
class="bg-secondary 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>
|
||||
<UpgradeToPro {data} />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -316,7 +316,7 @@
|
||||
<div class="text-[1rem] font-normal text-white">Total Analysts</div>
|
||||
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{numOfAnalyst}
|
||||
</div>
|
||||
@ -326,7 +326,7 @@
|
||||
Consensus Rating
|
||||
</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{consensusRating}
|
||||
</div>
|
||||
@ -334,7 +334,7 @@
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-t border-gray-600 md:border-0">
|
||||
<div class="text-[1rem] font-normal text-white">Price Target</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{priceTarget !== null && priceTarget !== undefined
|
||||
? priceTarget
|
||||
@ -346,7 +346,7 @@
|
||||
>
|
||||
<div class="text-[1rem] font-normal text-white">Upside</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 tiny:text-lg xs:text-xl sm:text-2xl {changesPercentage >=
|
||||
class="mt-1 break-words font-semibold leading-8 text-[1rem] sm:text-lg {changesPercentage >=
|
||||
0
|
||||
? "before:content-['+'] after:content-['%'] text-[#00FC50]"
|
||||
: changesPercentage < 0
|
||||
|
||||
@ -14,7 +14,6 @@
|
||||
import { onMount } from "svelte";
|
||||
|
||||
export let data;
|
||||
let isLoaded = false;
|
||||
let timePeriod = "Daily";
|
||||
let rawData = data?.getData || [];
|
||||
let originalData = [];
|
||||
@ -262,13 +261,10 @@
|
||||
}
|
||||
|
||||
$: {
|
||||
if (timePeriod && typeof window !== "undefined") {
|
||||
isLoaded = false;
|
||||
if (timePeriod) {
|
||||
rawData = prepareDataset(data?.getData, timePeriod);
|
||||
originalData = rawData;
|
||||
stockList = rawData?.slice(0, 50);
|
||||
console.log(rawData);
|
||||
isLoaded = true;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -437,116 +433,102 @@
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{#if isLoaded}
|
||||
{#if rawData?.length !== 0}
|
||||
<div class="w-full m-auto mt-2">
|
||||
<div
|
||||
class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-scroll"
|
||||
{#if rawData?.length !== 0}
|
||||
<div class="w-full m-auto mt-2">
|
||||
<div
|
||||
class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-scroll"
|
||||
>
|
||||
<table
|
||||
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto"
|
||||
>
|
||||
<table
|
||||
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto"
|
||||
>
|
||||
<thead>
|
||||
<TableHeader {columns} {sortOrders} {sortData} />
|
||||
</thead>
|
||||
<thead>
|
||||
<TableHeader {columns} {sortOrders} {sortData} />
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{#each stockList as item, index}
|
||||
<tr
|
||||
class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd {index +
|
||||
1 ===
|
||||
rawData?.length && data?.user?.tier !== 'Pro'
|
||||
? 'opacity-[0.1]'
|
||||
: ''}"
|
||||
<tbody>
|
||||
{#each stockList as item, index}
|
||||
<tr
|
||||
class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd {index +
|
||||
1 ===
|
||||
rawData?.length && data?.user?.tier !== 'Pro'
|
||||
? '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 text-white"
|
||||
>
|
||||
{#if timePeriod === "Weekly"}
|
||||
Week of {new Date(item?.time).toLocaleString(
|
||||
"en-US",
|
||||
{
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
timeZone: "Europe/Berlin",
|
||||
},
|
||||
)}
|
||||
{:else}
|
||||
{new Date(item?.time).toLocaleString("en-US", {
|
||||
{#if timePeriod === "Weekly"}
|
||||
Week of {new Date(item?.time).toLocaleString(
|
||||
"en-US",
|
||||
{
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
timeZone: "Europe/Berlin",
|
||||
})}
|
||||
{/if}
|
||||
</td>
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{item?.open?.toFixed(2)}
|
||||
</td>
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{item?.high?.toFixed(2)}
|
||||
</td>
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{item?.low?.toFixed(2)}
|
||||
</td>
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{item?.close?.toFixed(2)}
|
||||
</td>
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{item?.change !== null ? item?.change : "n/a"}
|
||||
</td>
|
||||
<td
|
||||
class="text-sm sm:text-[1rem] {item?.changesPercentage >=
|
||||
0 && item?.changesPercentage !== null
|
||||
? "text-[#00FC50] before:content-['+'] "
|
||||
: item?.changesPercentage < 0 &&
|
||||
item?.changesPercentage !== null
|
||||
? 'text-[#FF2F1F]'
|
||||
: 'text-white'} text-end"
|
||||
>
|
||||
{item?.changesPercentage !== null
|
||||
? item?.changesPercentage + "%"
|
||||
: "n/a"}
|
||||
</td>
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{item?.volume?.toLocaleString("en-US")}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<Infobox
|
||||
text={`No price history are available for ${$displayCompanyName}.`}
|
||||
/>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<div class="relative">
|
||||
<label
|
||||
class="bg-secondary 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>
|
||||
},
|
||||
)}
|
||||
{:else}
|
||||
{new Date(item?.time).toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
timeZone: "Europe/Berlin",
|
||||
})}
|
||||
{/if}
|
||||
</td>
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{item?.open?.toFixed(2)}
|
||||
</td>
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{item?.high?.toFixed(2)}
|
||||
</td>
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{item?.low?.toFixed(2)}
|
||||
</td>
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{item?.close?.toFixed(2)}
|
||||
</td>
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{item?.change !== null ? item?.change : "n/a"}
|
||||
</td>
|
||||
<td
|
||||
class="text-sm sm:text-[1rem] {item?.changesPercentage >=
|
||||
0 && item?.changesPercentage !== null
|
||||
? "text-[#00FC50] before:content-['+'] "
|
||||
: item?.changesPercentage < 0 &&
|
||||
item?.changesPercentage !== null
|
||||
? 'text-[#FF2F1F]'
|
||||
: 'text-white'} text-end"
|
||||
>
|
||||
{item?.changesPercentage !== null
|
||||
? item?.changesPercentage + "%"
|
||||
: "n/a"}
|
||||
</td>
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{item?.volume?.toLocaleString("en-US")}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<Infobox
|
||||
text={`No price history are available for ${$displayCompanyName}.`}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -42,7 +42,6 @@
|
||||
const sectionMap = {
|
||||
institute: "institute",
|
||||
"congress-trading": "congress-trading",
|
||||
transcripts: "transcripts",
|
||||
};
|
||||
|
||||
const foundSection = parts?.find((part) =>
|
||||
@ -59,7 +58,6 @@
|
||||
const subSectionMap = {
|
||||
"congress-trading": "/insider/congress-trading",
|
||||
institute: "/insider/institute",
|
||||
transcripts: "/insider/transcripts",
|
||||
};
|
||||
|
||||
if (state !== "insider" && subSectionMap[state]) {
|
||||
@ -114,16 +112,6 @@
|
||||
>
|
||||
Congress Trading
|
||||
</a>
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/insider/transcripts`}
|
||||
on:click={() => changeSubSection("transcripts")}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection ===
|
||||
'transcripts'
|
||||
? 'text-white bg-secondary sm:hover:bg-opacity-[0.95]'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
|
||||
>
|
||||
Transcripts
|
||||
</a>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
import { getPartyForPoliticians } from "$lib/utils";
|
||||
import TableHeader from "$lib/components/Table/TableHeader.svelte";
|
||||
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
|
||||
export let data;
|
||||
|
||||
@ -15,7 +16,48 @@
|
||||
let buySellRatio = 0;
|
||||
let partyRatio = 0;
|
||||
let senateTradingList = [];
|
||||
let isLoaded = false;
|
||||
|
||||
rawData?.forEach((item) => {
|
||||
const representative = item?.representative || "";
|
||||
const fullName = representative
|
||||
.replace(/(\s(?:Dr\s)?\w(?:\.|(?=\s)))?\s/g, "_")
|
||||
.trim();
|
||||
item.representative = fullName.replace(/_/g, " ");
|
||||
});
|
||||
|
||||
rawData = rawData?.map((item) => {
|
||||
const party = getPartyForPoliticians(item?.representative);
|
||||
return {
|
||||
...item,
|
||||
party: party,
|
||||
};
|
||||
});
|
||||
|
||||
// Count the occurrences of "Republican" and "Democrat"
|
||||
const partyCounts = rawData.reduce((counts, item) => {
|
||||
counts[item?.party] = (counts[item?.party] || 0) + 1;
|
||||
return counts;
|
||||
}, {});
|
||||
|
||||
const typeCounts = rawData.reduce((counts, item) => {
|
||||
counts[item?.type] = (counts[item?.type] || 0) + 1;
|
||||
return counts;
|
||||
}, {});
|
||||
|
||||
partyRatio =
|
||||
partyCounts["Democratic"] > 0 && partyCounts["Republican"] === undefined
|
||||
? 1
|
||||
: partyCounts["Democratic"] === undefined
|
||||
? 0
|
||||
: partyCounts["Democratic"] / partyCounts["Republican"];
|
||||
buySellRatio =
|
||||
typeCounts["Bought"] > 0 && typeCounts["Sold"] === undefined
|
||||
? 1
|
||||
: typeCounts["Bought"] === undefined
|
||||
? 0
|
||||
: typeCounts["Bought"] / typeCounts["Sold"];
|
||||
|
||||
senateTradingList = rawData.slice(0, 50) ?? [];
|
||||
|
||||
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
||||
|
||||
@ -31,10 +73,7 @@
|
||||
firstName = names[1];
|
||||
names?.splice(0, 1);
|
||||
}
|
||||
const initials = names
|
||||
?.slice(0, -1)
|
||||
?.map((name) => name?.charAt(0))
|
||||
?.join(". ");
|
||||
|
||||
const lastName = names[names?.length - 1];
|
||||
return `${firstName?.charAt(0)}. ${lastName}`;
|
||||
}
|
||||
@ -56,50 +95,6 @@
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
rawData.forEach((item) => {
|
||||
const representative = item?.representative || "";
|
||||
const fullName = representative
|
||||
.replace(/(\s(?:Dr\s)?\w(?:\.|(?=\s)))?\s/g, "_")
|
||||
.trim();
|
||||
item.representative = fullName.replace(/_/g, " ");
|
||||
});
|
||||
|
||||
rawData = rawData?.map((item) => {
|
||||
const party = getPartyForPoliticians(item?.representative);
|
||||
return {
|
||||
...item,
|
||||
party: party,
|
||||
};
|
||||
});
|
||||
|
||||
// Count the occurrences of "Republican" and "Democrat"
|
||||
const partyCounts = rawData.reduce((counts, item) => {
|
||||
counts[item?.party] = (counts[item?.party] || 0) + 1;
|
||||
return counts;
|
||||
}, {});
|
||||
|
||||
const typeCounts = rawData.reduce((counts, item) => {
|
||||
counts[item?.type] = (counts[item?.type] || 0) + 1;
|
||||
return counts;
|
||||
}, {});
|
||||
|
||||
partyRatio =
|
||||
partyCounts["Democratic"] > 0 && partyCounts["Republican"] === undefined
|
||||
? 1
|
||||
: partyCounts["Democratic"] === undefined
|
||||
? 0
|
||||
: partyCounts["Democratic"] / partyCounts["Republican"];
|
||||
buySellRatio =
|
||||
typeCounts["Bought"] > 0 && typeCounts["Sold"] === undefined
|
||||
? 1
|
||||
: typeCounts["Bought"] === undefined
|
||||
? 0
|
||||
: typeCounts["Bought"] / typeCounts["Sold"];
|
||||
|
||||
senateTradingList = rawData.slice(0, 20) ?? [];
|
||||
|
||||
isLoaded = true;
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
@ -233,262 +228,244 @@
|
||||
Congress Trading
|
||||
</h1>
|
||||
|
||||
{#if isLoaded}
|
||||
{#if senateTradingList?.length !== 0}
|
||||
<!--Start Widget-->
|
||||
{#if senateTradingList?.length !== 0}
|
||||
<!--Start Widget-->
|
||||
<div
|
||||
class="w-full mt-5 mb-10 m-auto flex justify-center items-center"
|
||||
>
|
||||
<div
|
||||
class="w-full mt-5 mb-10 m-auto flex justify-center items-center"
|
||||
class="w-full grid grid-cols-2 lg:grid-cols-4 gap-y-3 lg:gap-y-3 gap-x-3"
|
||||
>
|
||||
<!--Start Buy/Sell-->
|
||||
<div
|
||||
class="w-full grid grid-cols-2 lg:grid-cols-4 gap-y-3 lg:gap-y-3 gap-x-3"
|
||||
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 bg-primary rounded-md h-20"
|
||||
>
|
||||
<!--Start Buy/Sell-->
|
||||
<div
|
||||
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 bg-primary rounded-md h-20"
|
||||
>
|
||||
<div class="flex flex-col items-start">
|
||||
<span
|
||||
class="font-semibold text-white text-sm sm:text-[1rem]"
|
||||
>Buy/Sell</span
|
||||
>
|
||||
<span
|
||||
class="text-start text-sm sm:text-[1rem] font-medium text-white"
|
||||
>
|
||||
{buySellRatio?.toFixed(3)}
|
||||
</span>
|
||||
</div>
|
||||
<!-- Circular Progress -->
|
||||
<div class="relative size-14 ml-auto">
|
||||
<svg
|
||||
class="size-full w-14 h-14"
|
||||
viewBox="0 0 36 36"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<!-- Background Circle -->
|
||||
<div class="flex flex-col items-start">
|
||||
<span
|
||||
class="font-semibold text-white text-sm sm:text-[1rem]"
|
||||
>Buy/Sell</span
|
||||
>
|
||||
<span
|
||||
class="text-start text-sm sm:text-[1rem] font-medium text-white"
|
||||
>
|
||||
{buySellRatio?.toFixed(3)}
|
||||
</span>
|
||||
</div>
|
||||
<!-- Circular Progress -->
|
||||
<div class="relative size-14 ml-auto">
|
||||
<svg
|
||||
class="size-full w-14 h-14"
|
||||
viewBox="0 0 36 36"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<!-- Background Circle -->
|
||||
<circle
|
||||
cx="18"
|
||||
cy="18"
|
||||
r="16"
|
||||
fill="none"
|
||||
class="stroke-current text-[#3E3E3E]"
|
||||
stroke-width="3"
|
||||
></circle>
|
||||
<!-- Progress Circle inside a group with rotation -->
|
||||
<g class="origin-center -rotate-90 transform">
|
||||
<circle
|
||||
cx="18"
|
||||
cy="18"
|
||||
r="16"
|
||||
fill="none"
|
||||
class="stroke-current text-[#3E3E3E]"
|
||||
class="stroke-current {buySellRatio >= 0.5
|
||||
? 'text-[#00FC50]'
|
||||
: 'text-[#EE5365]'} "
|
||||
stroke-width="3"
|
||||
stroke-dasharray="100"
|
||||
stroke-dashoffset={100 - buySellRatio * 100 >= 0
|
||||
? 100 - (buySellRatio * 100)?.toFixed(2)
|
||||
: 0}
|
||||
></circle>
|
||||
<!-- Progress Circle inside a group with rotation -->
|
||||
<g class="origin-center -rotate-90 transform">
|
||||
<circle
|
||||
cx="18"
|
||||
cy="18"
|
||||
r="16"
|
||||
fill="none"
|
||||
class="stroke-current {buySellRatio >= 0.5
|
||||
? 'text-[#00FC50]'
|
||||
: 'text-[#EE5365]'} "
|
||||
stroke-width="3"
|
||||
stroke-dasharray="100"
|
||||
stroke-dashoffset={100 - buySellRatio * 100 >= 0
|
||||
? 100 - (buySellRatio * 100)?.toFixed(2)
|
||||
: 0}
|
||||
></circle>
|
||||
</g>
|
||||
</svg>
|
||||
<!-- Percentage Text -->
|
||||
<div
|
||||
class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
|
||||
>
|
||||
<span
|
||||
class="text-center text-white text-sm sm:text-[1rem]"
|
||||
>{buySellRatio?.toFixed(2)}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Circular Progress -->
|
||||
</div>
|
||||
<!--End Buy/Sell-->
|
||||
<!--Start Dem/Rep-->
|
||||
<div
|
||||
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 bg-primary rounded-md h-20"
|
||||
>
|
||||
<div class="flex flex-col items-start">
|
||||
</g>
|
||||
</svg>
|
||||
<!-- Percentage Text -->
|
||||
<div
|
||||
class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
|
||||
>
|
||||
<span
|
||||
class="font-semibold text-white text-sm sm:text-[1rem]"
|
||||
>Dem/Rep</span
|
||||
class="text-center text-white text-sm sm:text-[1rem]"
|
||||
>{buySellRatio?.toFixed(2)}</span
|
||||
>
|
||||
<span
|
||||
class="text-start text-sm sm:text-[1rem] font-medium text-white"
|
||||
>
|
||||
{partyRatio?.toFixed(3)}
|
||||
</span>
|
||||
</div>
|
||||
<!-- Circular Progress -->
|
||||
<div class="relative size-14 ml-auto">
|
||||
<svg
|
||||
class="size-full w-14 h-14"
|
||||
viewBox="0 0 36 36"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<!-- Background Circle -->
|
||||
<circle
|
||||
cx="18"
|
||||
cy="18"
|
||||
r="16"
|
||||
fill="none"
|
||||
class="stroke-current text-[#3E3E3E]"
|
||||
stroke-width="3"
|
||||
></circle>
|
||||
<!-- Progress Circle inside a group with rotation -->
|
||||
<g class="origin-center -rotate-90 transform">
|
||||
<circle
|
||||
cx="18"
|
||||
cy="18"
|
||||
r="16"
|
||||
fill="none"
|
||||
class="stroke-current text-blue-500"
|
||||
stroke-width="3"
|
||||
stroke-dasharray="100"
|
||||
stroke-dashoffset={100 - partyRatio * 100 >= 0
|
||||
? 100 - (partyRatio * 100)?.toFixed(2)
|
||||
: 0}
|
||||
></circle>
|
||||
</g>
|
||||
</svg>
|
||||
<!-- Percentage Text -->
|
||||
<div
|
||||
class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
|
||||
>
|
||||
<span
|
||||
class="text-center text-white text-sm sm:text-[1rem]"
|
||||
>{partyRatio?.toFixed(2)}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Circular Progress -->
|
||||
</div>
|
||||
<!--End Put/Call-->
|
||||
<!-- End Circular Progress -->
|
||||
</div>
|
||||
</div>
|
||||
<!--End Widget-->
|
||||
|
||||
<div
|
||||
class="mt-6 flex justify-start items-center w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-scroll"
|
||||
>
|
||||
<table
|
||||
class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto"
|
||||
<!--End Buy/Sell-->
|
||||
<!--Start Dem/Rep-->
|
||||
<div
|
||||
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 bg-primary rounded-md h-20"
|
||||
>
|
||||
<thead>
|
||||
<TableHeader {columns} {sortOrders} {sortData} />
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each senateTradingList as item, index}
|
||||
<tr
|
||||
class="odd:bg-odd sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] border-b border-gray-800 {index +
|
||||
1 ===
|
||||
rawData?.slice(0, 3)?.length &&
|
||||
data?.user?.tier !== 'Pro'
|
||||
? 'opacity-[0.1]'
|
||||
: ''}"
|
||||
<div class="flex flex-col items-start">
|
||||
<span
|
||||
class="font-semibold text-white text-sm sm:text-[1rem]"
|
||||
>Dem/Rep</span
|
||||
>
|
||||
<span
|
||||
class="text-start text-sm sm:text-[1rem] font-medium text-white"
|
||||
>
|
||||
{partyRatio?.toFixed(3)}
|
||||
</span>
|
||||
</div>
|
||||
<!-- Circular Progress -->
|
||||
<div class="relative size-14 ml-auto">
|
||||
<svg
|
||||
class="size-full w-14 h-14"
|
||||
viewBox="0 0 36 36"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<!-- Background Circle -->
|
||||
<circle
|
||||
cx="18"
|
||||
cy="18"
|
||||
r="16"
|
||||
fill="none"
|
||||
class="stroke-current text-[#3E3E3E]"
|
||||
stroke-width="3"
|
||||
></circle>
|
||||
<!-- Progress Circle inside a group with rotation -->
|
||||
<g class="origin-center -rotate-90 transform">
|
||||
<circle
|
||||
cx="18"
|
||||
cy="18"
|
||||
r="16"
|
||||
fill="none"
|
||||
class="stroke-current text-blue-500"
|
||||
stroke-width="3"
|
||||
stroke-dasharray="100"
|
||||
stroke-dashoffset={100 - partyRatio * 100 >= 0
|
||||
? 100 - (partyRatio * 100)?.toFixed(2)
|
||||
: 0}
|
||||
></circle>
|
||||
</g>
|
||||
</svg>
|
||||
<!-- Percentage Text -->
|
||||
<div
|
||||
class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
|
||||
>
|
||||
<span
|
||||
class="text-center text-white text-sm sm:text-[1rem]"
|
||||
>{partyRatio?.toFixed(2)}</span
|
||||
>
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3"
|
||||
>
|
||||
<div class="flex flex-row items-center">
|
||||
<div
|
||||
class="flex-shrink-0 rounded-full border border-slate-700 w-9 h-9 relative {item?.party ===
|
||||
'Republican'
|
||||
? 'bg-[#98272B]'
|
||||
: item?.party === 'Democratic'
|
||||
? 'bg-[#295AC7]'
|
||||
: 'bg-[#4E2153]'} flex items-center justify-center"
|
||||
>
|
||||
<img
|
||||
style="clip-path: circle(50%);"
|
||||
class="rounded-full w-7"
|
||||
src={`${cloudFrontUrl}/assets/senator/${item?.representative?.replace(/\s+/g, "_")}.png`}
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col ml-3 font-normal">
|
||||
<a
|
||||
href={`/politicians/${item?.id}`}
|
||||
class="sm:hover:text-white text-blue-400"
|
||||
>{getAbbreviatedName(
|
||||
item?.representative?.replace("_", " "),
|
||||
)}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!--{item?.firstName} {item?.lastName}-->
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{item?.party}
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{new Date(item?.transactionDate)?.toLocaleString(
|
||||
"en-US",
|
||||
{
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
daySuffix: "2-digit",
|
||||
},
|
||||
)}
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{item?.amount}
|
||||
</td>
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{#if item?.type === "Bought"}
|
||||
<span class="text-[#00FC50]">Bought</span>
|
||||
{:else if item?.type === "Sold"}
|
||||
<span class="text-[#FF2F1F]">Sold</span>
|
||||
{:else if item?.type === "Exchange"}
|
||||
<span class="text-[#C6A755]">Exchange</span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<UpgradeToPro {data} />
|
||||
{#if rawData?.length >= 20}
|
||||
<label
|
||||
on:click={backToTop}
|
||||
class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-gray-600 rounded-full"
|
||||
>
|
||||
Back to top
|
||||
</label>
|
||||
{/if}
|
||||
{:else}
|
||||
<h2
|
||||
class="pl-4 pr-4 flex justify-center items-center text-md sm:text-lg text-center text-slate-200"
|
||||
>
|
||||
No trading history available for {$displayCompanyName}. Likely
|
||||
no corrupt politican has interest in this stock.
|
||||
</h2>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<div class="relative">
|
||||
<label
|
||||
class="bg-secondary 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>
|
||||
<!-- End Circular Progress -->
|
||||
</div>
|
||||
<!--End Put/Call-->
|
||||
</div>
|
||||
</div>
|
||||
<!--End Widget-->
|
||||
|
||||
<div
|
||||
class="mt-6 flex justify-start items-center w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-scroll"
|
||||
>
|
||||
<table
|
||||
class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto"
|
||||
>
|
||||
<thead>
|
||||
<TableHeader {columns} {sortOrders} {sortData} />
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each senateTradingList as item, index}
|
||||
<tr
|
||||
class="odd:bg-odd sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] border-b border-gray-800 {index +
|
||||
1 ===
|
||||
rawData?.slice(0, 3)?.length &&
|
||||
data?.user?.tier !== 'Pro'
|
||||
? 'opacity-[0.1]'
|
||||
: ''}"
|
||||
>
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3"
|
||||
>
|
||||
<div class="flex flex-row items-center">
|
||||
<div
|
||||
class="flex-shrink-0 rounded-full border border-slate-700 w-9 h-9 relative {item?.party ===
|
||||
'Republican'
|
||||
? 'bg-[#98272B]'
|
||||
: item?.party === 'Democratic'
|
||||
? 'bg-[#295AC7]'
|
||||
: 'bg-[#4E2153]'} flex items-center justify-center"
|
||||
>
|
||||
<img
|
||||
style="clip-path: circle(50%);"
|
||||
class="rounded-full w-7"
|
||||
src={`${cloudFrontUrl}/assets/senator/${item?.representative?.replace(/\s+/g, "_")}.png`}
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col ml-3 font-normal">
|
||||
<a
|
||||
href={`/politicians/${item?.id}`}
|
||||
class="sm:hover:text-white text-blue-400"
|
||||
>{getAbbreviatedName(
|
||||
item?.representative?.replace("_", " "),
|
||||
)}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!--{item?.firstName} {item?.lastName}-->
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{item?.party}
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{new Date(item?.transactionDate)?.toLocaleString(
|
||||
"en-US",
|
||||
{
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
daySuffix: "2-digit",
|
||||
},
|
||||
)}
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{item?.amount}
|
||||
</td>
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{#if item?.type === "Bought"}
|
||||
<span class="text-[#00FC50]">Bought</span>
|
||||
{:else if item?.type === "Sold"}
|
||||
<span class="text-[#FF2F1F]">Sold</span>
|
||||
{:else if item?.type === "Exchange"}
|
||||
<span class="text-[#C6A755]">Exchange</span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<UpgradeToPro {data} />
|
||||
{#if rawData?.length >= 20}
|
||||
<label
|
||||
on:click={backToTop}
|
||||
class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-gray-600 rounded-full"
|
||||
>
|
||||
Back to top
|
||||
</label>
|
||||
{/if}
|
||||
{:else}
|
||||
<Infobox text="No data available" />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,334 +0,0 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
stockTicker,
|
||||
getCache,
|
||||
setCache,
|
||||
displayCompanyName,
|
||||
numberOfUnreadNotification,
|
||||
} from "$lib/store";
|
||||
import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
|
||||
import { Button } from "$lib/components/shadcn/button/index.js";
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
let chats = [];
|
||||
let date;
|
||||
|
||||
const now = new Date();
|
||||
let year = now.getFullYear();
|
||||
let quarter = Math.floor(now.getMonth() / 3) + 1;
|
||||
let yearRange = ["2024", "2023", "2022", "2021"];
|
||||
let displayQuarter = quarter;
|
||||
let displayYear = year;
|
||||
let isLoaded = false;
|
||||
|
||||
function backToTop() {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
|
||||
const getTranscripts = async () => {
|
||||
isLoaded = false;
|
||||
chats = [];
|
||||
let output;
|
||||
// Get cached data for the specific tickerID
|
||||
const cachedData = getCache(
|
||||
`${$stockTicker}-Q-${quarter}-${year}`,
|
||||
"getTranscripts",
|
||||
);
|
||||
if (cachedData) {
|
||||
output = cachedData;
|
||||
} else {
|
||||
const postData = {
|
||||
ticker: $stockTicker,
|
||||
quarter: quarter,
|
||||
year: year,
|
||||
};
|
||||
// make the POST request to the endpoint
|
||||
const response = await fetch("/api/earnings-call-transcripts", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(postData),
|
||||
});
|
||||
|
||||
output = await response.json();
|
||||
// Cache the data for this specific tickerID with a specific name 'getTranscripts'
|
||||
setCache(
|
||||
`${$stockTicker}-Q-${quarter}-${year}`,
|
||||
output,
|
||||
"getTranscripts",
|
||||
);
|
||||
}
|
||||
|
||||
chats = output?.chat ?? [];
|
||||
date = output?.date ?? "-";
|
||||
displayQuarter = quarter;
|
||||
displayYear = year;
|
||||
isLoaded = true;
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
await getTranscripts();
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
|
||||
{$displayCompanyName} ({$stockTicker}) · Q{quarter}
|
||||
{year} · Earnings Call Transcript · Stocknear
|
||||
</title>
|
||||
<meta
|
||||
name="description"
|
||||
content={`Get the latest Earnings Call Transcript of ${$displayCompanyName} (${$stockTicker}) for different years and quarters.`}
|
||||
/>
|
||||
|
||||
<!-- Other meta tags -->
|
||||
<meta
|
||||
property="og:title"
|
||||
content={`${$displayCompanyName} (${$stockTicker}) · Q${quarter} ${year} · Earnings Call Transcript · Stocknear`}
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content={`Get the latest Earnings Call Transcript of ${$displayCompanyName} (${$stockTicker}) for different years and quarters.`}
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
|
||||
<!-- Twitter specific meta tags -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta
|
||||
name="twitter:title"
|
||||
content={`${$displayCompanyName} (${$stockTicker}) · Q${quarter} ${year} · Earnings Call Transcript · Stocknear`}
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content={`Get the latest Earnings Call Transcript of ${$displayCompanyName} (${$stockTicker}) for different years and quarters.`}
|
||||
/>
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
|
||||
<section
|
||||
class="w-full bg-default overflow-hidden text-white min-h-screen mb-40 sm:mb-0"
|
||||
>
|
||||
<div class="h-full overflow-hidden">
|
||||
<div class="relative flex justify-center items-center overflow-hidden">
|
||||
<div class="sm:p-7 w-full mt-2 sm:mt-0">
|
||||
<div class="mb-6">
|
||||
<h1 class="text-xl sm:text-2xl text-white font-bold mb-4">
|
||||
Transcripts
|
||||
</h1>
|
||||
|
||||
<div class="flex w-fit sm:w-[50%] md:block md:w-auto ml-auto">
|
||||
<div class="relative inline-block text-left grow">
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild let:builder>
|
||||
<Button
|
||||
builders={[builder]}
|
||||
class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
|
||||
>
|
||||
<span class="truncate text-white">Year: {year}</span>
|
||||
<svg
|
||||
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
style="max-width:40px"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content
|
||||
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
|
||||
>
|
||||
<DropdownMenu.Label class="text-gray-400">
|
||||
Select Year
|
||||
</DropdownMenu.Label>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Group>
|
||||
{#each yearRange as index}
|
||||
<DropdownMenu.Item
|
||||
on:click={() => {
|
||||
year = index;
|
||||
getTranscripts();
|
||||
}}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
>
|
||||
{index}
|
||||
</DropdownMenu.Item>
|
||||
{/each}
|
||||
</DropdownMenu.Group>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
</div>
|
||||
<div class="relative inline-block text-left grow ml-3">
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild let:builder>
|
||||
<Button
|
||||
builders={[builder]}
|
||||
class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
|
||||
>
|
||||
<span class="truncate text-white">Quarter: Q{quarter}</span>
|
||||
<svg
|
||||
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
style="max-width:40px"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content
|
||||
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
|
||||
>
|
||||
<DropdownMenu.Label class="text-gray-400">
|
||||
Select Quarter
|
||||
</DropdownMenu.Label>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Group>
|
||||
{#each [1, 2, 3, 4] as index}
|
||||
<DropdownMenu.Item
|
||||
on:click={() => {
|
||||
quarter = index;
|
||||
getTranscripts();
|
||||
}}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
>
|
||||
Q{index}
|
||||
</DropdownMenu.Item>
|
||||
{/each}
|
||||
</DropdownMenu.Group>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if isLoaded}
|
||||
{#if chats?.length !== 0}
|
||||
<div class="flex flex-col sm:flex-row items-center pt-5 pb-5">
|
||||
<span class="text-white text-md">
|
||||
Q{displayQuarter}
|
||||
{displayYear} · Earnings Call Transcript
|
||||
</span>
|
||||
<span
|
||||
class="text-white text-opacity-80 text-md mt-2 sm:mt-0 sm:ml-auto"
|
||||
>
|
||||
{new Date(date).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{#each chats as item}
|
||||
{#if item?.name === "Operator"}
|
||||
<div class="flex flex-col items-start gap-2.5 mt-5">
|
||||
<div class="flex flex-row items-center ml-auto mr-2">
|
||||
<div
|
||||
class="flex items-center space-x-2 rtl:space-x-reverse"
|
||||
>
|
||||
<span class="text-sm text-base">
|
||||
{item?.name}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ml-2 avatar rounded-full w-8 h-8 sm:w-10 sm:h-10 relative border border-gray-600 bg-default bg-opacity-[0.6] flex items-center justify-center"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 sm:w-7 sm:h-7"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="#fff"
|
||||
d="M12 14q-1.25 0-2.125-.875T9 11V5q0-1.25.875-2.125T12 2q1.25 0 2.125.875T15 5v6q0 1.25-.875 2.125T12 14m-1 7v-3.075q-2.6-.35-4.3-2.325T5 11h2q0 2.075 1.463 3.538T12 16q2.075 0 3.538-1.463T17 11h2q0 2.625-1.7 4.6T13 17.925V21z"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col w-full leading-1.5 p-4 border border-gray-600 bg-primary rounded-l-xl rounded-tr-xl"
|
||||
>
|
||||
<p class="text-sm font-normal py-2.5 text-gray-200">
|
||||
{@html item?.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-col items-start gap-2.5 mt-8">
|
||||
<div class="flex flex-row items-center">
|
||||
<div
|
||||
class="avatar rounded-full w-8 h-8 sm:w-10 sm:h-10 relative bg-red-600 bg-opacity-[0.6] flex items-center justify-center text-white text-sm sm:text-base"
|
||||
>
|
||||
<span
|
||||
class="absolute inset-0 flex items-center justify-center"
|
||||
>
|
||||
{item?.name?.slice(0, 1)}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ml-2 flex items-center space-x-2 rtl:space-x-reverse"
|
||||
>
|
||||
<span class="text-sm text-base">
|
||||
{item?.name}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col w-full leading-1.5 p-4 border border-gray-600 bg-secondary rounded-r-xl rounded-tl-xl"
|
||||
>
|
||||
<p class="text-sm font-normal py-2.5 text-gray-200">
|
||||
{@html item?.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
<label
|
||||
on:click={backToTop}
|
||||
class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-gray-600 rounded-full"
|
||||
>
|
||||
Back to top
|
||||
</label>
|
||||
{:else}
|
||||
<div class="pt-5">
|
||||
<Infobox
|
||||
text={`No transcript available for ${$displayCompanyName} for the Q${displayQuarter} of ${displayYear}`}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<div class="relative">
|
||||
<label
|
||||
class="bg-secondary 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>
|
||||
</div>
|
||||
</section>
|
||||
@ -5,6 +5,7 @@
|
||||
stockTicker,
|
||||
} from "$lib/store";
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
|
||||
export let data;
|
||||
|
||||
@ -338,29 +339,9 @@
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div
|
||||
class="mt-5 sm:mt-0 border-l-4 border-white p-0 sm:p-4 text-white flex flex-row items-center"
|
||||
>
|
||||
<svg
|
||||
class="h-6 w-6 hidden sm:block"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
style="max-width:40px"
|
||||
aria-hidden="true"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
|
||||
clip-rule="evenodd"
|
||||
></path></svg
|
||||
>
|
||||
<div class="ml-3 w-full">
|
||||
<div class="flex w-full flex-row justify-between">
|
||||
<div>
|
||||
Currently, there are no business metrics available for {$stockTicker}.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Infobox
|
||||
text={`Currently, there are no business metrics available for ${$stockTicker}.`}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -628,7 +628,7 @@
|
||||
|
||||
<div class="w-full overflow-x-scroll">
|
||||
<table
|
||||
class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto mt-4"
|
||||
class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto"
|
||||
>
|
||||
<thead class="bg-default">
|
||||
<tr>
|
||||
|
||||
@ -5,14 +5,11 @@
|
||||
stockTicker,
|
||||
} from "$lib/store";
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
|
||||
import { onMount } from "svelte";
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
import FailToDeliver from "$lib/components/FailToDeliver.svelte";
|
||||
|
||||
export let data;
|
||||
|
||||
let isLoaded = false;
|
||||
|
||||
let rawData = data?.getData || [];
|
||||
let changePercentageYearAgo = 0;
|
||||
let relativeFTD =
|
||||
@ -60,10 +57,7 @@
|
||||
return change;
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
changePercentageYearAgo = computeYearOverYearChange(rawData);
|
||||
isLoaded = true;
|
||||
});
|
||||
changePercentageYearAgo = computeYearOverYearChange(rawData);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@ -104,98 +98,81 @@
|
||||
<div
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
>
|
||||
{#if isLoaded}
|
||||
<main class="w-full">
|
||||
<div class="sm:p-7 m-auto mt-2 sm:mt-0">
|
||||
<div class="mb-3">
|
||||
<h1 class="text-xl sm:text-2xl text-white font-bold">
|
||||
Fail-to-Deliver (FTD)
|
||||
</h1>
|
||||
</div>
|
||||
<main class="w-full">
|
||||
<div class="sm:p-7 m-auto mt-2 sm:mt-0">
|
||||
<div class="mb-3">
|
||||
<h1 class="text-xl sm:text-2xl text-white font-bold">
|
||||
Fail-to-Deliver (FTD)
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{#if rawData?.length !== 0}
|
||||
<div class="grid grid-cols-1 gap-2">
|
||||
<div
|
||||
class="mb-4 mt-5 bg-primary flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
|
||||
>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">
|
||||
FTD Shares
|
||||
</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(
|
||||
rawData?.slice(-1)?.at(0)?.failToDeliver,
|
||||
false,
|
||||
)}
|
||||
</div>
|
||||
{#if rawData?.length !== 0}
|
||||
<div class="grid grid-cols-1 gap-2">
|
||||
<div
|
||||
class="mb-4 mt-5 bg-primary flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
|
||||
>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">
|
||||
FTD Shares
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">
|
||||
FTD / Avg Volume
|
||||
</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
>
|
||||
{relativeFTD > 0.01
|
||||
? relativeFTD + "%"
|
||||
: relativeFTD !== "n/a"
|
||||
? "< 0.01%"
|
||||
: "n/a"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">
|
||||
1-Year Change
|
||||
</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 tiny:text-lg xs:text-xl sm:text-2xl {changePercentageYearAgo >=
|
||||
0 && changePercentageYearAgo !== null
|
||||
? "before:content-['+'] text-[#00FC50]"
|
||||
: changePercentageYearAgo < 0 &&
|
||||
changePercentageYearAgo !== null
|
||||
? 'text-[#FF2F1F]'
|
||||
: 'text-white'}"
|
||||
>
|
||||
{changePercentageYearAgo !== null
|
||||
? abbreviateNumber(
|
||||
changePercentageYearAgo?.toFixed(2),
|
||||
) + "%"
|
||||
: "n/a"}
|
||||
</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{abbreviateNumber(
|
||||
rawData?.slice(-1)?.at(0)?.failToDeliver,
|
||||
false,
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">
|
||||
FTD / Avg Volume
|
||||
</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{relativeFTD > 0.01
|
||||
? relativeFTD + "%"
|
||||
: relativeFTD !== "n/a"
|
||||
? "< 0.01%"
|
||||
: "n/a"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">
|
||||
1-Year Change
|
||||
</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-[1rem] sm:text-lg {changePercentageYearAgo >=
|
||||
0 && changePercentageYearAgo !== null
|
||||
? "before:content-['+'] text-[#00FC50]"
|
||||
: changePercentageYearAgo < 0 &&
|
||||
changePercentageYearAgo !== null
|
||||
? 'text-[#FF2F1F]'
|
||||
: 'text-white'}"
|
||||
>
|
||||
{changePercentageYearAgo !== null
|
||||
? abbreviateNumber(
|
||||
changePercentageYearAgo?.toFixed(2),
|
||||
) + "%"
|
||||
: "n/a"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FailToDeliver {data} {rawData} />
|
||||
</div>
|
||||
{:else}
|
||||
<h2
|
||||
class="mt-16 flex justify-center items-center text-2xl font-medium text-white mb-5 m-auto"
|
||||
>
|
||||
No data available
|
||||
</h2>
|
||||
{/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>
|
||||
|
||||
<FailToDeliver {data} {rawData} />
|
||||
</div>
|
||||
{:else}
|
||||
<Infobox text="No data available" />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -15,13 +15,11 @@
|
||||
import { LineChart, BarChart } from "echarts/charts";
|
||||
import { GridComponent, TooltipComponent } from "echarts/components";
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
import { onMount } from "svelte";
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
|
||||
|
||||
export let data;
|
||||
|
||||
let isLoaded = false;
|
||||
let optionsData;
|
||||
|
||||
let rawData = data?.getHistoricalMarketCap || [];
|
||||
@ -201,13 +199,10 @@
|
||||
tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
optionsData = await plotData();
|
||||
tableList = filterEndOfYearDates(rawData);
|
||||
tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
|
||||
changePercentageYearAgo = computeYearOverYearChange(rawData);
|
||||
isLoaded = true;
|
||||
});
|
||||
optionsData = plotData();
|
||||
tableList = filterEndOfYearDates(rawData);
|
||||
tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
|
||||
changePercentageYearAgo = computeYearOverYearChange(rawData);
|
||||
|
||||
async function changeStatement(state) {
|
||||
timePeriod = state;
|
||||
@ -265,7 +260,7 @@
|
||||
return { dates, marketCapList };
|
||||
}
|
||||
|
||||
async function plotData() {
|
||||
function plotData() {
|
||||
const filteredData = filterDataByTimePeriod(rawData, timePeriod);
|
||||
|
||||
const options = {
|
||||
@ -277,13 +272,24 @@
|
||||
top: "10%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: filteredData?.dates,
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
|
||||
formatter: function (value) {
|
||||
// Assuming dates are in the format 'yyyy-mm-dd'
|
||||
const dateParts = value.split("-");
|
||||
const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
|
||||
const year = parseInt(dateParts[0]);
|
||||
const day = parseInt(dateParts[2]);
|
||||
return `${day} ${monthNames[monthIndex]} ${year}`;
|
||||
},
|
||||
},
|
||||
},
|
||||
data: filteredData?.dates,
|
||||
type: "category",
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
@ -422,359 +428,331 @@
|
||||
<div
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
>
|
||||
{#if isLoaded}
|
||||
<main class="w-full">
|
||||
<div class="sm:p-7 m-auto mt-2 sm:mt-0">
|
||||
<div class="mb-3">
|
||||
<h1 class="text-xl sm:text-2xl text-white font-bold">
|
||||
Market Cap
|
||||
</h1>
|
||||
</div>
|
||||
<main class="w-full">
|
||||
<div class="sm:p-7 m-auto mt-2 sm:mt-0">
|
||||
<div class="mb-3">
|
||||
<h1 class="text-xl sm:text-2xl text-white font-bold">Market Cap</h1>
|
||||
</div>
|
||||
|
||||
{#if rawData?.length !== 0}
|
||||
<div class="grid grid-cols-1 gap-2">
|
||||
<Infobox
|
||||
text={`${$displayCompanyName} has a market cap of ${abbreviateNumber(
|
||||
data?.getStockQuote?.marketCap,
|
||||
)} as of ${new Date()?.toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
daySuffix: "2-digit",
|
||||
})}. Its market cap has ${
|
||||
changePercentageYearAgo > 0
|
||||
? "increased"
|
||||
: changePercentageYearAgo < 0
|
||||
? "decreased"
|
||||
: "unchanged"
|
||||
} by ${abbreviateNumber(
|
||||
changePercentageYearAgo?.toFixed(2),
|
||||
)}% in one year.`}
|
||||
/>
|
||||
{#if rawData?.length !== 0}
|
||||
<div class="grid grid-cols-1 gap-2">
|
||||
<Infobox
|
||||
text={`${$displayCompanyName} has a market cap of ${abbreviateNumber(
|
||||
data?.getStockQuote?.marketCap,
|
||||
)} as of ${new Date()?.toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
daySuffix: "2-digit",
|
||||
})}. Its market cap has ${
|
||||
changePercentageYearAgo > 0
|
||||
? "increased"
|
||||
: changePercentageYearAgo < 0
|
||||
? "decreased"
|
||||
: "unchanged"
|
||||
} by ${abbreviateNumber(
|
||||
changePercentageYearAgo?.toFixed(2),
|
||||
)}% in one year.`}
|
||||
/>
|
||||
|
||||
<div
|
||||
class="mb-4 mt-5 bg-primary flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
|
||||
>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">
|
||||
Market Cap
|
||||
</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
>
|
||||
{@html abbreviateNumber(
|
||||
data?.getStockQuote?.marketCap,
|
||||
false,
|
||||
true,
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
class="mb-4 mt-5 bg-primary flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
|
||||
>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">
|
||||
Market Cap
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">
|
||||
Category
|
||||
</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
>
|
||||
{#if capCategory}
|
||||
<a
|
||||
class="sm:hover:text-white text-blue-400"
|
||||
href={capCategory.link}
|
||||
>
|
||||
{capCategory.name}
|
||||
</a>
|
||||
{:else}
|
||||
n/a
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">
|
||||
1-Year Change
|
||||
</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 tiny:text-lg xs:text-xl sm:text-2xl {changePercentageYearAgo >=
|
||||
0 && changePercentageYearAgo !== null
|
||||
? "before:content-['+'] text-[#00FC50]"
|
||||
: changePercentageYearAgo < 0 &&
|
||||
changePercentageYearAgo !== null
|
||||
? 'text-[#FF2F1F]'
|
||||
: 'text-white'}"
|
||||
>
|
||||
{changePercentageYearAgo !== null
|
||||
? abbreviateNumber(
|
||||
changePercentageYearAgo?.toFixed(2),
|
||||
) + "%"
|
||||
: "n/a"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center w-full mt-10 mb-8">
|
||||
<h1 class="text-2xl text-white font-bold">
|
||||
Market Cap Chart
|
||||
</h1>
|
||||
<div
|
||||
class="flex flex-row items-center w-fit sm:w-[50%] md:w-auto ml-auto"
|
||||
>
|
||||
<div class="relative inline-block text-left grow">
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild let:builder>
|
||||
<Button
|
||||
builders={[builder]}
|
||||
class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
|
||||
>
|
||||
<span class="truncate text-white">{timePeriod}</span
|
||||
>
|
||||
<svg
|
||||
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
style="max-width:40px"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content
|
||||
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
|
||||
>
|
||||
<DropdownMenu.Label class="text-gray-400">
|
||||
Select time frame
|
||||
</DropdownMenu.Label>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Group>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("1M")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
>
|
||||
1 Month
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("6M")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
>
|
||||
6 Months
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("1Y")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
>
|
||||
1 Year
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("3Y")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
>
|
||||
3 Years
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("5Y")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
>
|
||||
5 Years
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("10Y")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
>
|
||||
10 Years
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("Max")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
>
|
||||
Max
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Group>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
</div>
|
||||
<Button
|
||||
on:click={() => exportData("csv")}
|
||||
class="ml-2 w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
<span class="truncate text-white">Download</span>
|
||||
<svg
|
||||
class="{data?.user?.tier === 'Pro'
|
||||
? 'hidden'
|
||||
: ''} ml-1 -mt-0.5 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
|
||||
>
|
||||
</Button>
|
||||
{@html abbreviateNumber(
|
||||
data?.getStockQuote?.marketCap,
|
||||
false,
|
||||
true,
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app w-full">
|
||||
<Chart {init} options={optionsData} class="chart" />
|
||||
</div>
|
||||
|
||||
<h2 class="mt-10 text-xl text-gray-200 font-bold">
|
||||
Market Cap History
|
||||
</h2>
|
||||
|
||||
<div
|
||||
class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mb-6"
|
||||
>
|
||||
<div
|
||||
class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
|
||||
>
|
||||
{#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"
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Category</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
>
|
||||
{#if capCategory}
|
||||
<a
|
||||
class="sm:hover:text-white text-blue-400"
|
||||
href={capCategory.link}
|
||||
>
|
||||
<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>
|
||||
{capCategory.name}
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
on:click={() => changeTablePeriod(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 {activeIdx ===
|
||||
i
|
||||
? 'text-black'
|
||||
: 'text-white'}"
|
||||
>
|
||||
{item.title}
|
||||
</span>
|
||||
</button>
|
||||
n/a
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full overflow-x-scroll">
|
||||
<table
|
||||
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"
|
||||
>Market Cap</th
|
||||
>
|
||||
<th class="text-white font-semibold text-end text-sm"
|
||||
>% Change</th
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each tableList as item, index}
|
||||
<!-- row -->
|
||||
<tr
|
||||
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800"
|
||||
>
|
||||
<td
|
||||
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
{item?.date}
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
|
||||
>
|
||||
{@html abbreviateNumber(
|
||||
item?.marketCap,
|
||||
false,
|
||||
true,
|
||||
)}
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end"
|
||||
>
|
||||
{#if index + 1 - tableList?.length === 0}
|
||||
-
|
||||
{:else if item?.marketCap - tableList[index + 1]?.marketCap > 0}
|
||||
<span class="text-[#00FC50]">
|
||||
+{(
|
||||
((item?.marketCap -
|
||||
tableList[index + 1]?.marketCap) /
|
||||
item?.marketCap) *
|
||||
100
|
||||
)?.toFixed(2)}%
|
||||
</span>
|
||||
{:else if item?.marketCap - tableList[index + 1]?.marketCap < 0}
|
||||
<span class="text-[#FF2F1F]">
|
||||
-{(
|
||||
Math?.abs(
|
||||
(tableList[index + 1]?.marketCap -
|
||||
item?.marketCap) /
|
||||
item?.marketCap,
|
||||
) * 100
|
||||
)?.toFixed(2)}%
|
||||
</span>
|
||||
{:else}
|
||||
-
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">
|
||||
1-Year Change
|
||||
</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-[1rem] sm:text-lg {changePercentageYearAgo >=
|
||||
0 && changePercentageYearAgo !== null
|
||||
? "before:content-['+'] text-[#00FC50]"
|
||||
: changePercentageYearAgo < 0 &&
|
||||
changePercentageYearAgo !== null
|
||||
? 'text-[#FF2F1F]'
|
||||
: 'text-white'}"
|
||||
>
|
||||
{changePercentageYearAgo !== null
|
||||
? abbreviateNumber(
|
||||
changePercentageYearAgo?.toFixed(2),
|
||||
) + "%"
|
||||
: "n/a"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<h2
|
||||
class="mt-16 flex justify-center items-center text-2xl font-medium text-white mb-5 m-auto"
|
||||
>
|
||||
No data available
|
||||
|
||||
<div class="flex flex-row items-center w-full mt-10 mb-8">
|
||||
<h1 class="text-2xl text-white font-bold">Market Cap Chart</h1>
|
||||
<div
|
||||
class="flex flex-row items-center w-fit sm:w-[50%] md:w-auto ml-auto"
|
||||
>
|
||||
<div class="relative inline-block text-left grow">
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild let:builder>
|
||||
<Button
|
||||
builders={[builder]}
|
||||
class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
|
||||
>
|
||||
<span class="truncate text-white">{timePeriod}</span>
|
||||
<svg
|
||||
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
style="max-width:40px"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content
|
||||
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
|
||||
>
|
||||
<DropdownMenu.Label class="text-gray-400">
|
||||
Select time frame
|
||||
</DropdownMenu.Label>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Group>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("1M")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
>
|
||||
1 Month
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("6M")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
>
|
||||
6 Months
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("1Y")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
>
|
||||
1 Year
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("3Y")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
>
|
||||
3 Years
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("5Y")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
>
|
||||
5 Years
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("10Y")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
>
|
||||
10 Years
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("Max")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
>
|
||||
Max
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Group>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
</div>
|
||||
<Button
|
||||
on:click={() => exportData("csv")}
|
||||
class="ml-2 w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
|
||||
>
|
||||
<span class="truncate text-white">Download</span>
|
||||
<svg
|
||||
class="{data?.user?.tier === 'Pro'
|
||||
? 'hidden'
|
||||
: ''} ml-1 -mt-0.5 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
|
||||
>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app w-full">
|
||||
<Chart {init} options={optionsData} class="chart" />
|
||||
</div>
|
||||
|
||||
<h2 class="mt-10 text-xl text-white font-bold">
|
||||
Market Cap History
|
||||
</h2>
|
||||
{/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
|
||||
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 mt-4"
|
||||
>
|
||||
{#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={() => changeTablePeriod(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 {activeIdx ===
|
||||
i
|
||||
? 'text-black'
|
||||
: 'text-white'}"
|
||||
>
|
||||
{item.title}
|
||||
</span>
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full overflow-x-scroll">
|
||||
<table
|
||||
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"
|
||||
>Market Cap</th
|
||||
>
|
||||
<th class="text-white font-semibold text-end text-sm"
|
||||
>% Change</th
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each tableList as item, index}
|
||||
<!-- row -->
|
||||
<tr
|
||||
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800"
|
||||
>
|
||||
<td
|
||||
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
{item?.date}
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
|
||||
>
|
||||
{@html abbreviateNumber(item?.marketCap, false, true)}
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end"
|
||||
>
|
||||
{#if index + 1 - tableList?.length === 0}
|
||||
-
|
||||
{:else if item?.marketCap - tableList[index + 1]?.marketCap > 0}
|
||||
<span class="text-[#00FC50]">
|
||||
+{(
|
||||
((item?.marketCap -
|
||||
tableList[index + 1]?.marketCap) /
|
||||
item?.marketCap) *
|
||||
100
|
||||
)?.toFixed(2)}%
|
||||
</span>
|
||||
{:else if item?.marketCap - tableList[index + 1]?.marketCap < 0}
|
||||
<span class="text-[#FF2F1F]">
|
||||
-{(
|
||||
Math?.abs(
|
||||
(tableList[index + 1]?.marketCap -
|
||||
item?.marketCap) /
|
||||
item?.marketCap,
|
||||
) * 100
|
||||
)?.toFixed(2)}%
|
||||
</span>
|
||||
{:else}
|
||||
-
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<Infobox text="No data available" />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user