AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

seo optimization

Browse Source
This commit is contained in:
MuslemRahimi 2025-01-11 14:39:51 +01:00
parent cbefa701ce
commit fe7032e502
25 changed files with 1015 additions and 1539 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

239
src/lib/components/DarkPool/HistoricalVolume.svelte
View File

@ -2,7 +2,7 @@
import { displayCompanyName, stockTicker, etfTicker } from "$lib/store"; import { displayCompanyName, stockTicker, etfTicker } from "$lib/store";
import InfoModal from "$lib/components/InfoModal.svelte"; import InfoModal from "$lib/components/InfoModal.svelte";
import { Chart } from "svelte-echarts"; 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 { init, use } from "echarts/core";
import { LineChart } from "echarts/charts"; import { LineChart } from "echarts/charts";
import { GridComponent, TooltipComponent } from "echarts/components"; import { GridComponent, TooltipComponent } from "echarts/components";
@ -12,7 +12,6 @@
export let rawData = []; export let rawData = [];
let isLoaded = false;
let optionsData; let optionsData;
let avgVolume = 0; let avgVolume = 0;
let avgShortVolume = 0; let avgShortVolume = 0;
@ -110,12 +109,24 @@
top: "5%", top: "5%",
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: [
type: "category", {
boundaryGap: false, type: "category",
data: dates, data: dates,
axisLabel: { color: "#fff" }, 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: [ yAxis: [
{ {
type: "value", type: "value",
@ -143,10 +154,8 @@
}; };
} }
$: if (typeof window !== "undefined" && ($stockTicker || $etfTicker)) { $: if ($stockTicker || $etfTicker) {
isLoaded = false;
optionsData = getPlotOptions(); optionsData = getPlotOptions();
isLoaded = true;
} }
</script> </script>
@ -166,132 +175,118 @@
/> />
</div> </div>
{#if isLoaded} {#if rawData?.length !== 0}
{#if rawData?.length !== 0} <div class="w-full flex flex-col items-start">
<div class="w-full flex flex-col items-start"> <div class="text-white text-[1rem] mt-2 mb-2 w-full">
<div class="text-white text-[1rem] mt-2 mb-2 w-full"> Over the past 12 months, {$displayCompanyName} has experienced an average
Over the past 12 months, {$displayCompanyName} has experienced an average dark pool trading volume of
dark pool trading volume of <span class="font-semibold">{abbreviateNumber(avgVolume)}</span>
<span class="font-semibold">{abbreviateNumber(avgVolume)}</span> shares. Out of this total, an average of
shares. Out of this total, an average of <span class="font-semibold">{abbreviateNumber(avgShortVolume)}</span>
<span class="font-semibold">{abbreviateNumber(avgShortVolume)}</span shares, constituting approximately
> <span class="font-semibold"
shares, constituting approximately >{((avgShortVolume / avgVolume) * 100)?.toFixed(2)}%</span
<span class="font-semibold" >, were short volume.
>{((avgShortVolume / avgVolume) * 100)?.toFixed(2)}%</span
>, were short volume.
</div>
</div> </div>
</div>
<div class="pb-2 rounded-md bg-default"> <div class="pb-2 rounded-md bg-default">
<div class="app w-full h-[300px] mt-5"> <div class="app w-full h-[300px] mt-5">
<Chart {init} options={optionsData} class="chart" /> <Chart {init} options={optionsData} class="chart" />
</div>
</div> </div>
</div>
<div
class="flex flex-row items-center justify-between mx-auto mt-5 w-full sm:w-11/12"
>
<div <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 <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" class="h-full transform -translate-x-1/2"
> aria-hidden="true"
<div ></div>
class="h-full transform -translate-x-1/2"
aria-hidden="true"
></div>
<div
class="w-3 h-3 bg-[#fff] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2"
aria-hidden="true"
></div>
<span
class="mt-2 sm:mt-0 text-white text-center sm:text-start text-xs sm:text-md inline-block"
>
Total Volume
</span>
</div>
<div <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 Total Volume
class="h-full transform -translate-x-1/2" </span>
aria-hidden="true"
></div>
<div
class="w-3 h-3 bg-[#E11D48] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2"
aria-hidden="true"
></div>
<span
class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block"
>
Short Volume
</span>
</div>
</div> </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 <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 <div
class="w-full bg-table table table-sm table-compact border border-gray-800" 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> Short Volume
<tr class="border-y border-gray-800 odd:bg-odd"> </span>
<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>
</div> </div>
</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} {/if}
</main> </main>
</section> </section>

137
src/lib/components/DarkPool/HottestTrades.svelte
View File

@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { stockTicker, etfTicker } from "$lib/store";
import InfoModal from "$lib/components/InfoModal.svelte"; import InfoModal from "$lib/components/InfoModal.svelte";
import TableHeader from "$lib/components/Table/TableHeader.svelte"; import TableHeader from "$lib/components/Table/TableHeader.svelte";
@ -8,8 +7,7 @@
export let data; export let data;
export let rawData = []; export let rawData = [];
let stockList = []; let stockList = rawData || [];
let isLoaded = false;
function formatToNewYorkTime(isoString) { function formatToNewYorkTime(isoString) {
const date = new Date(isoString); const date = new Date(isoString);
@ -120,12 +118,6 @@
// Sort using the generic comparison function // Sort using the generic comparison function
stockList = [...originalData].sort(compareValues)?.slice(0, 50); stockList = [...originalData].sort(compareValues)?.slice(0, 50);
}; };
$: if (typeof window !== "undefined" && ($stockTicker || $etfTicker)) {
isLoaded = false;
stockList = rawData;
isLoaded = true;
}
</script> </script>
<section class="overflow-hidden text-white h-full pb-8"> <section class="overflow-hidden text-white h-full pb-8">
@ -144,88 +136,71 @@
/> />
</div> </div>
{#if isLoaded} {#if rawData?.length !== 0}
{#if rawData?.length !== 0} <div class="w-full flex flex-col items-start">
<div class="w-full flex flex-col items-start"> <div class="text-white text-[1rem] mt-2 mb-2 w-full">
<div class="text-white text-[1rem] mt-2 mb-2 w-full"> Get in realtime the latest hottest trades based on premium.
Get in realtime the latest hottest trades based on premium.
</div>
</div> </div>
</div>
<div <div
class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-scroll" 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 <thead>
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" <TableHeader {columns} {sortOrders} {sortData} />
> </thead>
<thead> <tbody>
<TableHeader {columns} {sortOrders} {sortData} /> {#each stockList as item, index}
</thead> <tr
<tbody> class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd {index +
{#each stockList as item, index} 1 ===
<tr rawData?.length && data?.user?.tier !== 'Pro'
class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd {index + ? 'opacity-[0.1]'
1 === : ''}"
rawData?.length && data?.user?.tier !== 'Pro' >
? 'opacity-[0.1]' <td
: ''}" class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
> >
<td {item?.rank}
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white" </td>
>
{item?.rank}
</td>
<td <td
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
> >
{formatToNewYorkTime(item?.date)} {formatToNewYorkTime(item?.date)}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
> >
{item?.price} {item?.price}
</td> </td>
<td class="text-sm sm:text-[1rem] text-end"> <td class="text-sm sm:text-[1rem] text-end">
{@html abbreviateNumberWithColor(item?.size, false, true)} {@html abbreviateNumberWithColor(item?.size, false, true)}
</td> </td>
<td class="text-sm sm:text-[1rem] text-end"> <td class="text-sm sm:text-[1rem] text-end">
{@html abbreviateNumberWithColor(item?.volume, false, true)} {@html abbreviateNumberWithColor(item?.volume, false, true)}
</td> </td>
<td class="text-sm sm:text-[1rem] text-end"> <td class="text-sm sm:text-[1rem] text-end">
{item?.sizeVolRatio?.toFixed(2)}% {item?.sizeVolRatio?.toFixed(2)}%
</td> </td>
<td class="text-sm sm:text-[1rem] text-end"> <td class="text-sm sm:text-[1rem] text-end">
{item?.sizeAvgVolRatio?.toFixed(2)}% {item?.sizeAvgVolRatio?.toFixed(2)}%
</td> </td>
<td class="text-sm sm:text-[1rem] text-end"> <td class="text-sm sm:text-[1rem] text-end">
{@html abbreviateNumberWithColor( {@html abbreviateNumberWithColor(item?.premium, false, true)}
item?.premium, </td>
false, </tr>
true, {/each}
)} </tbody>
</td> </table>
</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>
</div> </div>
{/if} {/if}
</main> </main>

90
src/lib/components/DarkPool/PriceLevel.svelte
View File

@ -15,7 +15,6 @@
export let rawData = []; export let rawData = [];
export let metrics = {}; export let metrics = {};
let isLoaded = false;
let optionsData; let optionsData;
function getPlotOptions(category) { function getPlotOptions(category) {
@ -105,14 +104,8 @@
return options; return options;
} }
$: if ( $: if (($stockTicker || $etfTicker) && category) {
typeof window !== "undefined" &&
($stockTicker || $etfTicker) &&
category
) {
isLoaded = false;
optionsData = getPlotOptions(category); optionsData = getPlotOptions(category);
isLoaded = true;
} }
</script> </script>
@ -132,56 +125,43 @@
/> />
</div> </div>
{#if isLoaded} {#if rawData?.length !== 0 && Object?.keys(metrics)?.length > 0}
{#if rawData?.length !== 0 && Object?.keys(metrics)?.length > 0} <div class="w-full flex flex-col items-start">
<div class="w-full flex flex-col items-start"> <div class="text-white text-[1rem] mt-2 mb-2 w-full">
<div class="text-white text-[1rem] mt-2 mb-2 w-full"> {$displayCompanyName} has seen an average dark pool trade size of {@html abbreviateNumberWithColor(
{$displayCompanyName} has seen an average dark pool trade size of {@html abbreviateNumberWithColor( metrics?.avgTradeSize,
metrics?.avgTradeSize, false,
false, true,
true, )} and an average premium per trade of {@html abbreviateNumberWithColor(
)} and an average premium per trade of {@html abbreviateNumberWithColor( metrics?.avgPremTrade,
metrics?.avgPremTrade, false,
false, true,
true, )}, with a total premium of {@html abbreviateNumberWithColor(
)}, with a total premium of {@html abbreviateNumberWithColor( metrics?.totalPrem,
metrics?.totalPrem, false,
false, true,
true, )}.
)}.
</div>
</div> </div>
</div>
<div class="pb-2 rounded-md bg-default mt-14 sm:mt-0"> <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="app w-full h-[300px] mt-5 relative">
<div <div
class="flex justify-start space-x-2 absolute right-0 -top-10 sm:-top-8 z-10 text-sm" 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"
> >
<span class="loading loading-spinner loading-md text-gray-400" {#each ["Size", "Premium"] as item}
></span> <label
</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>
</div> </div>
{/if} {/if}

2
src/lib/components/FailToDeliver.svelte
View File

@ -170,7 +170,7 @@
$: { $: {
const ticker = $assetType === "stock" ? $stockTicker : $etfTicker; const ticker = $assetType === "stock" ? $stockTicker : $etfTicker;
if (ticker && typeof window !== "undefined") { if (ticker) {
isLoaded = false; isLoaded = false;
console.log(rawData); console.log(rawData);
if (rawData?.length > 0) { if (rawData?.length > 0) {

9
src/routes/+page.svelte
View File

@ -11,7 +11,7 @@
import { compareTimes, formatTime, isPWAInstalled } from "$lib/utils"; import { compareTimes, formatTime, isPWAInstalled } from "$lib/utils";
import Infobox from "$lib/components/Infobox.svelte"; import Infobox from "$lib/components/Infobox.svelte";
import { closedPWA } from "$lib/store"; import { closedPWA } from "$lib/store";
import { options } from "marked"; import Feedback from "$lib/components/Feedback.svelte";
export let data; export let data;
let optionsMode = "openInterest"; let optionsMode = "openInterest";
@ -32,7 +32,6 @@
optionsTable = data?.getDashboard?.optionsData?.openInterest || []; optionsTable = data?.getDashboard?.optionsData?.openInterest || [];
} }
} }
let Feedback;
let pwaInstalled = false; let pwaInstalled = false;
let AppInstalled = null; let AppInstalled = null;
@ -64,8 +63,6 @@
console.error("Error loading AppInstalled component:", e); console.error("Error loading AppInstalled component:", e);
} }
} }
Feedback = (await import("$lib/components/Feedback.svelte")).default;
}); });
$: charNumber = $screenWidth < 640 ? 20 : 15; $: charNumber = $screenWidth < 640 ? 20 : 15;
@ -165,9 +162,7 @@
<div class="flex flex-col m-auto justify-center items-center"> <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"> <div class="text-center mb-10 w-full px-4 sm:px-3 mt-10">
{#if Feedback} <Feedback {data} />
<Feedback {data} />
{/if}
<!-- <!--
<div class="text-center mb-10 relative w-fit flex justify-center m-auto"> <div class="text-center mb-10 relative w-fit flex justify-center m-auto">
<a <a

6
src/routes/etf/etf-providers/[slug]/+page.svelte
View File

@ -176,7 +176,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-[1rem] font-normal text-white">Listed Funds</div> <div class="text-[1rem] font-normal text-white">Listed Funds</div>
<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} {rawData?.length}
</div> </div>
@ -186,7 +186,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-[1rem] font-normal text-white">Total Assets</div> <div class="text-[1rem] font-normal text-white">Total Assets</div>
<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)} {abbreviateNumber(totalAssets)}
</div> </div>
@ -196,7 +196,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-[1rem] font-normal text-white">Average Cost</div> <div class="text-[1rem] font-normal text-white">Average Cost</div>
<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)}% {avgExpenseRatio?.toFixed(2)}%
</div> </div>

6
src/routes/list/bitcoin-etfs/+page.svelte
View File

@ -113,7 +113,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total ETFs</div> <div class="text-sm font-semibold text-white">Total ETFs</div>
<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)} {new Intl.NumberFormat("en")?.format(rawData?.length)}
</div> </div>
@ -123,7 +123,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Assets</div> <div class="text-sm font-semibold text-white">Total Assets</div>
<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)} {abbreviateNumber(totalAssets)}
</div> </div>
@ -133,7 +133,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Avg. Cost</div> <div class="text-sm font-semibold text-white">Avg. Cost</div>
<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)}% {avgExpenseRatio?.toFixed(2)}%
</div> </div>

6
src/routes/list/country/[slug]/+page.svelte
View File

@ -40,7 +40,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Stocks</div> <div class="text-sm font-semibold text-white">Total Stocks</div>
<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)} {new Intl.NumberFormat("en")?.format(rawData?.length)}
</div> </div>
@ -50,7 +50,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Market Cap</div> <div class="text-sm font-semibold text-white">Total Market Cap</div>
<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)} {abbreviateNumber(totalMarketCap)}
</div> </div>
@ -60,7 +60,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Revenue</div> <div class="text-sm font-semibold text-white">Total Revenue</div>
<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)} {abbreviateNumber(totalRevenue)}
</div> </div>

6
src/routes/list/exchange/[slug]/+page.svelte
View File

@ -35,7 +35,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Stocks</div> <div class="text-sm font-semibold text-white">Total Stocks</div>
<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)} {new Intl.NumberFormat("en")?.format(rawData?.length)}
</div> </div>
@ -45,7 +45,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Market Cap</div> <div class="text-sm font-semibold text-white">Total Market Cap</div>
<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)} {abbreviateNumber(totalMarketCap)}
</div> </div>
@ -55,7 +55,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Revenue</div> <div class="text-sm font-semibold text-white">Total Revenue</div>
<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)} {abbreviateNumber(totalRevenue)}
</div> </div>

6
src/routes/list/faang/+page.svelte
View File

@ -25,7 +25,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Stocks</div> <div class="text-sm font-semibold text-white">Total Stocks</div>
<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)} {new Intl.NumberFormat("en")?.format(rawData?.length)}
</div> </div>
@ -35,7 +35,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Market Cap</div> <div class="text-sm font-semibold text-white">Total Market Cap</div>
<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)} {abbreviateNumber(totalMarketCap)}
</div> </div>
@ -45,7 +45,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Revenue</div> <div class="text-sm font-semibold text-white">Total Revenue</div>
<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)} {abbreviateNumber(totalRevenue)}
</div> </div>

6
src/routes/list/index/[slug]/+page.svelte
View File

@ -36,7 +36,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Stocks</div> <div class="text-sm font-semibold text-white">Total Stocks</div>
<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)} {new Intl.NumberFormat("en")?.format(rawData?.length)}
</div> </div>
@ -46,7 +46,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Market Cap</div> <div class="text-sm font-semibold text-white">Total Market Cap</div>
<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)} {abbreviateNumber(totalMarketCap)}
</div> </div>
@ -56,7 +56,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Revenue</div> <div class="text-sm font-semibold text-white">Total Revenue</div>
<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)} {abbreviateNumber(totalRevenue)}
</div> </div>

6
src/routes/list/industry/[slug]/+page.svelte
View File

@ -32,7 +32,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Stocks</div> <div class="text-sm font-semibold text-white">Total Stocks</div>
<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)} {new Intl.NumberFormat("en")?.format(rawData?.length)}
</div> </div>
@ -42,7 +42,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Market Cap</div> <div class="text-sm font-semibold text-white">Total Market Cap</div>
<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)} {abbreviateNumber(totalMarketCap)}
</div> </div>
@ -52,7 +52,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Revenue</div> <div class="text-sm font-semibold text-white">Total Revenue</div>
<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)} {abbreviateNumber(totalRevenue)}
</div> </div>

6
src/routes/list/magnificent-seven/+page.svelte
View File

@ -26,7 +26,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Stocks</div> <div class="text-sm font-semibold text-white">Total Stocks</div>
<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)} {new Intl.NumberFormat("en")?.format(rawData?.length)}
</div> </div>
@ -36,7 +36,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Market Cap</div> <div class="text-sm font-semibold text-white">Total Market Cap</div>
<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)} {abbreviateNumber(totalMarketCap)}
</div> </div>
@ -46,7 +46,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Revenue</div> <div class="text-sm font-semibold text-white">Total Revenue</div>
<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)} {abbreviateNumber(totalRevenue)}
</div> </div>

6
src/routes/list/market-cap/[slug]/+page.svelte
View File

@ -122,7 +122,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Stocks</div> <div class="text-sm font-semibold text-white">Total Stocks</div>
<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)} {new Intl.NumberFormat("en")?.format(rawData?.length)}
</div> </div>
@ -132,7 +132,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Market Cap</div> <div class="text-sm font-semibold text-white">Total Market Cap</div>
<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)} {abbreviateNumber(totalMarketCap)}
</div> </div>
@ -142,7 +142,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Revenue</div> <div class="text-sm font-semibold text-white">Total Revenue</div>
<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)} {abbreviateNumber(totalRevenue)}
</div> </div>

6
src/routes/list/sector/[slug]/+page.svelte
View File

@ -30,7 +30,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Stocks</div> <div class="text-sm font-semibold text-white">Total Stocks</div>
<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)} {new Intl.NumberFormat("en")?.format(rawData?.length)}
</div> </div>
@ -40,7 +40,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Market Cap</div> <div class="text-sm font-semibold text-white">Total Market Cap</div>
<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)} {abbreviateNumber(totalMarketCap)}
</div> </div>
@ -50,7 +50,7 @@
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white">Total Revenue</div> <div class="text-sm font-semibold text-white">Total Revenue</div>
<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)} {abbreviateNumber(totalRevenue)}
</div> </div>

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

@ -10,16 +10,11 @@
import Infobox from "$lib/components/Infobox.svelte"; import Infobox from "$lib/components/Infobox.svelte";
import HottestTrades from "$lib/components/DarkPool/HottestTrades.svelte"; import HottestTrades from "$lib/components/DarkPool/HottestTrades.svelte";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte"; import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import { onMount } from "svelte";
export let data; export let data;
let historicalDarkPool = data?.getHistoricalDarkPool || []; let historicalDarkPool = data?.getHistoricalDarkPool || [];
let priceLevel = data?.getPriceLevel?.priceLevel || []; let priceLevel = data?.getPriceLevel?.priceLevel || [];
let hottestTrades = data?.getPriceLevel?.hottestTrades || []; let hottestTrades = data?.getPriceLevel?.hottestTrades || [];
let isLoaded = false;
onMount(() => {
isLoaded = true;
});
</script> </script>
<svelte:head> <svelte:head>
@ -88,34 +83,21 @@
/> />
{/if} {/if}
</div> </div>
{#if isLoaded} {#if priceLevel?.length > 0}
{#if priceLevel?.length > 0} <PriceLevel
<PriceLevel rawData={priceLevel}
rawData={priceLevel} metrics={data?.getPriceLevel?.metrics}
metrics={data?.getPriceLevel?.metrics} />
/> {/if}
{/if} {#if hottestTrades?.length > 0}
{#if hottestTrades?.length > 0} <HottestTrades {data} rawData={hottestTrades} />
<HottestTrades {data} rawData={hottestTrades} /> {/if}
{/if} {#if data?.user?.tier === "Pro"}
{#if data?.user?.tier === "Pro"} {#if historicalDarkPool?.length > 10}
{#if historicalDarkPool?.length > 10} <HistoricalVolume rawData={historicalDarkPool} />
<HistoricalVolume rawData={historicalDarkPool} />
{/if}
{:else}
<UpgradeToPro {data} />
{/if} {/if}
{:else} {:else}
<div class="flex justify-center items-center h-80"> <UpgradeToPro {data} />
<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} {/if}
</div> </div>
</div> </div>

8
src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte
View File

@ -316,7 +316,7 @@
<div class="text-[1rem] font-normal text-white">Total Analysts</div> <div class="text-[1rem] font-normal text-white">Total Analysts</div>
<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} {numOfAnalyst}
</div> </div>
@ -326,7 +326,7 @@
Consensus Rating Consensus Rating
</div> </div>
<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} {consensusRating}
</div> </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="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="text-[1rem] font-normal text-white">Price Target</div>
<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 !== null && priceTarget !== undefined
? priceTarget ? priceTarget
@ -346,7 +346,7 @@
> >
<div class="text-[1rem] font-normal text-white">Upside</div> <div class="text-[1rem] font-normal text-white">Upside</div>
<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 0
? "before:content-['+'] after:content-['%'] text-[#00FC50]" ? "before:content-['+'] after:content-['%'] text-[#00FC50]"
: changesPercentage < 0 : changesPercentage < 0

194
src/routes/stocks/[tickerID]/history/+page.svelte
View File

@ -14,7 +14,6 @@
import { onMount } from "svelte"; import { onMount } from "svelte";
export let data; export let data;
let isLoaded = false;
let timePeriod = "Daily"; let timePeriod = "Daily";
let rawData = data?.getData || []; let rawData = data?.getData || [];
let originalData = []; let originalData = [];
@ -262,13 +261,10 @@
} }
$: { $: {
if (timePeriod && typeof window !== "undefined") { if (timePeriod) {
isLoaded = false;
rawData = prepareDataset(data?.getData, timePeriod); rawData = prepareDataset(data?.getData, timePeriod);
originalData = rawData; originalData = rawData;
stockList = rawData?.slice(0, 50); stockList = rawData?.slice(0, 50);
console.log(rawData);
isLoaded = true;
} }
} }
</script> </script>
@ -437,116 +433,102 @@
</Button> </Button>
</div> </div>
</div> </div>
{#if isLoaded} {#if rawData?.length !== 0}
{#if rawData?.length !== 0} <div class="w-full m-auto mt-2">
<div class="w-full m-auto mt-2"> <div
<div class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-scroll"
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 <thead>
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto" <TableHeader {columns} {sortOrders} {sortData} />
> </thead>
<thead>
<TableHeader {columns} {sortOrders} {sortData} />
</thead>
<tbody> <tbody>
{#each stockList as item, index} {#each stockList as item, index}
<tr <tr
class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd {index + class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd {index +
1 === 1 ===
rawData?.length && data?.user?.tier !== 'Pro' rawData?.length && data?.user?.tier !== 'Pro'
? 'opacity-[0.1]' ? 'opacity-[0.1]'
: ''}" : ''}"
>
<td
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
> >
<td {#if timePeriod === "Weekly"}
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white" Week of {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",
},
)}
{:else}
{new Date(item?.time).toLocaleString("en-US", {
month: "short", month: "short",
day: "numeric", day: "numeric",
year: "numeric", year: "numeric",
timeZone: "Europe/Berlin", timeZone: "Europe/Berlin",
})} },
{/if} )}
</td> {:else}
<td {new Date(item?.time).toLocaleString("en-US", {
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" month: "short",
> day: "numeric",
{item?.open?.toFixed(2)} year: "numeric",
</td> timeZone: "Europe/Berlin",
<td })}
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" {/if}
> </td>
{item?.high?.toFixed(2)} <td
</td> class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
<td >
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" {item?.open?.toFixed(2)}
> </td>
{item?.low?.toFixed(2)} <td
</td> class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
<td >
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" {item?.high?.toFixed(2)}
> </td>
{item?.close?.toFixed(2)} <td
</td> class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
<td >
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" {item?.low?.toFixed(2)}
> </td>
{item?.change !== null ? item?.change : "n/a"} <td
</td> class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
<td >
class="text-sm sm:text-[1rem] {item?.changesPercentage >= {item?.close?.toFixed(2)}
0 && item?.changesPercentage !== null </td>
? "text-[#00FC50] before:content-['+'] " <td
: item?.changesPercentage < 0 && class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
item?.changesPercentage !== null >
? 'text-[#FF2F1F]' {item?.change !== null ? item?.change : "n/a"}
: 'text-white'} text-end" </td>
> <td
{item?.changesPercentage !== null class="text-sm sm:text-[1rem] {item?.changesPercentage >=
? item?.changesPercentage + "%" 0 && item?.changesPercentage !== null
: "n/a"} ? "text-[#00FC50] before:content-['+'] "
</td> : item?.changesPercentage < 0 &&
<td item?.changesPercentage !== null
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" ? 'text-[#FF2F1F]'
> : 'text-white'} text-end"
{item?.volume?.toLocaleString("en-US")} >
</td> {item?.changesPercentage !== null
</tr> ? item?.changesPercentage + "%"
{/each} : "n/a"}
</tbody> </td>
</table> <td
</div> class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
</div> >
{:else} {item?.volume?.toLocaleString("en-US")}
<Infobox </td>
text={`No price history are available for ${$displayCompanyName}.`} </tr>
/> {/each}
{/if} </tbody>
{:else} </table>
<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>
</div> </div>
{:else}
<Infobox
text={`No price history are available for ${$displayCompanyName}.`}
/>
{/if} {/if}
</div> </div>
</main> </main>

12
src/routes/stocks/[tickerID]/insider/+layout.svelte
View File

@ -42,7 +42,6 @@
const sectionMap = { const sectionMap = {
institute: "institute", institute: "institute",
"congress-trading": "congress-trading", "congress-trading": "congress-trading",
transcripts: "transcripts",
}; };
const foundSection = parts?.find((part) => const foundSection = parts?.find((part) =>
@ -59,7 +58,6 @@
const subSectionMap = { const subSectionMap = {
"congress-trading": "/insider/congress-trading", "congress-trading": "/insider/congress-trading",
institute: "/insider/institute", institute: "/insider/institute",
transcripts: "/insider/transcripts",
}; };
if (state !== "insider" && subSectionMap[state]) { if (state !== "insider" && subSectionMap[state]) {
@ -114,16 +112,6 @@
> >
Congress Trading Congress Trading
</a> </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> </ul>
</nav> </nav>

547
src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
View File

@ -8,6 +8,7 @@
import { getPartyForPoliticians } from "$lib/utils"; import { getPartyForPoliticians } from "$lib/utils";
import TableHeader from "$lib/components/Table/TableHeader.svelte"; import TableHeader from "$lib/components/Table/TableHeader.svelte";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte"; import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import Infobox from "$lib/components/Infobox.svelte";
export let data; export let data;
@ -15,7 +16,48 @@
let buySellRatio = 0; let buySellRatio = 0;
let partyRatio = 0; let partyRatio = 0;
let senateTradingList = []; 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; let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
@ -31,10 +73,7 @@
firstName = names[1]; firstName = names[1];
names?.splice(0, 1); names?.splice(0, 1);
} }
const initials = names
?.slice(0, -1)
?.map((name) => name?.charAt(0))
?.join(". ");
const lastName = names[names?.length - 1]; const lastName = names[names?.length - 1];
return `${firstName?.charAt(0)}. ${lastName}`; return `${firstName?.charAt(0)}. ${lastName}`;
} }
@ -56,50 +95,6 @@
} }
onMount(async () => { 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); window.addEventListener("scroll", handleScroll);
return () => { return () => {
window.removeEventListener("scroll", handleScroll); window.removeEventListener("scroll", handleScroll);
@ -233,262 +228,244 @@
Congress Trading Congress Trading
</h1> </h1>
{#if isLoaded} {#if senateTradingList?.length !== 0}
{#if senateTradingList?.length !== 0} <!--Start Widget-->
<!--Start Widget--> <div
class="w-full mt-5 mb-10 m-auto flex justify-center items-center"
>
<div <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 <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-col items-start">
<div <span
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" class="font-semibold text-white text-sm sm:text-[1rem]"
> >Buy/Sell</span
<div class="flex flex-col items-start"> >
<span <span
class="font-semibold text-white text-sm sm:text-[1rem]" class="text-start text-sm sm:text-[1rem] font-medium text-white"
>Buy/Sell</span >
> {buySellRatio?.toFixed(3)}
<span </span>
class="text-start text-sm sm:text-[1rem] font-medium text-white" </div>
> <!-- Circular Progress -->
{buySellRatio?.toFixed(3)} <div class="relative size-14 ml-auto">
</span> <svg
</div> class="size-full w-14 h-14"
<!-- Circular Progress --> viewBox="0 0 36 36"
<div class="relative size-14 ml-auto"> xmlns="http://www.w3.org/2000/svg"
<svg >
class="size-full w-14 h-14" <!-- Background Circle -->
viewBox="0 0 36 36" <circle
xmlns="http://www.w3.org/2000/svg" cx="18"
> cy="18"
<!-- Background Circle --> 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 <circle
cx="18" cx="18"
cy="18" cy="18"
r="16" r="16"
fill="none" fill="none"
class="stroke-current text-[#3E3E3E]" class="stroke-current {buySellRatio >= 0.5
? 'text-[#00FC50]'
: 'text-[#EE5365]'} "
stroke-width="3" stroke-width="3"
stroke-dasharray="100"
stroke-dashoffset={100 - buySellRatio * 100 >= 0
? 100 - (buySellRatio * 100)?.toFixed(2)
: 0}
></circle> ></circle>
<!-- Progress Circle inside a group with rotation --> </g>
<g class="origin-center -rotate-90 transform"> </svg>
<circle <!-- Percentage Text -->
cx="18" <div
cy="18" class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
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">
<span <span
class="font-semibold text-white text-sm sm:text-[1rem]" class="text-center text-white text-sm sm:text-[1rem]"
>Dem/Rep</span >{buySellRatio?.toFixed(2)}</span
> >
<span
class="text-start text-sm sm:text-[1rem] font-medium text-white"
>
{partyRatio?.toFixed(3)}
</span>
</div> </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> </div>
<!--End Put/Call--> <!-- End Circular Progress -->
</div> </div>
</div> <!--End Buy/Sell-->
<!--End Widget--> <!--Start Dem/Rep-->
<div
<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"
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> <div class="flex flex-col items-start">
<TableHeader {columns} {sortOrders} {sortData} /> <span
</thead> class="font-semibold text-white text-sm sm:text-[1rem]"
<tbody> >Dem/Rep</span
{#each senateTradingList as item, index} >
<tr <span
class="odd:bg-odd sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] border-b border-gray-800 {index + class="text-start text-sm sm:text-[1rem] font-medium text-white"
1 === >
rawData?.slice(0, 3)?.length && {partyRatio?.toFixed(3)}
data?.user?.tier !== 'Pro' </span>
? 'opacity-[0.1]' </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 </div>
class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3" </div>
> <!-- End Circular Progress -->
<div class="flex flex-row items-center"> </div>
<div <!--End Put/Call-->
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>
</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} {/if}
</div> </div>
</div> </div>

334
src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
View File

@ -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>

27
src/routes/stocks/[tickerID]/metrics/+page.svelte
View File

@ -5,6 +5,7 @@
stockTicker, stockTicker,
} from "$lib/store"; } from "$lib/store";
import { abbreviateNumber } from "$lib/utils"; import { abbreviateNumber } from "$lib/utils";
import Infobox from "$lib/components/Infobox.svelte";
export let data; export let data;
@ -338,29 +339,9 @@
</div> </div>
{/if} {/if}
{:else} {:else}
<div <Infobox
class="mt-5 sm:mt-0 border-l-4 border-white p-0 sm:p-4 text-white flex flex-row items-center" text={`Currently, there are no business metrics available for ${$stockTicker}.`}
> />
<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>
{/if} {/if}
</div> </div>
</div> </div>

2
src/routes/stocks/[tickerID]/statistics/employees/+page.svelte
View File

@ -628,7 +628,7 @@
<div class="w-full overflow-x-scroll"> <div class="w-full overflow-x-scroll">
<table <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"> <thead class="bg-default">
<tr> <tr>

163
src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+page.svelte
View File

@ -5,14 +5,11 @@
stockTicker, stockTicker,
} from "$lib/store"; } from "$lib/store";
import { abbreviateNumber } from "$lib/utils"; import { abbreviateNumber } from "$lib/utils";
import Infobox from "$lib/components/Infobox.svelte";
import { onMount } from "svelte";
import FailToDeliver from "$lib/components/FailToDeliver.svelte"; import FailToDeliver from "$lib/components/FailToDeliver.svelte";
export let data; export let data;
let isLoaded = false;
let rawData = data?.getData || []; let rawData = data?.getData || [];
let changePercentageYearAgo = 0; let changePercentageYearAgo = 0;
let relativeFTD = let relativeFTD =
@ -60,10 +57,7 @@
return change; return change;
} }
onMount(async () => { changePercentageYearAgo = computeYearOverYearChange(rawData);
changePercentageYearAgo = computeYearOverYearChange(rawData);
isLoaded = true;
});
</script> </script>
<svelte:head> <svelte:head>
@ -104,98 +98,81 @@
<div <div
class="w-full relative flex justify-center items-center overflow-hidden" class="w-full relative flex justify-center items-center overflow-hidden"
> >
{#if isLoaded} <main class="w-full">
<main class="w-full"> <div class="sm:p-7 m-auto mt-2 sm:mt-0">
<div class="sm:p-7 m-auto mt-2 sm:mt-0"> <div class="mb-3">
<div class="mb-3"> <h1 class="text-xl sm:text-2xl text-white font-bold">
<h1 class="text-xl sm:text-2xl text-white font-bold"> Fail-to-Deliver (FTD)
Fail-to-Deliver (FTD) </h1>
</h1> </div>
</div>
{#if rawData?.length !== 0} {#if rawData?.length !== 0}
<div class="grid grid-cols-1 gap-2"> <div class="grid grid-cols-1 gap-2">
<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" 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="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="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white"> <div class="text-sm font-semibold text-white">
FTD Shares 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>
</div> </div>
</div> <div
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6"> class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
<div class="flex items-center justify-between sm:block"> >
<div class="text-sm font-semibold text-white"> {abbreviateNumber(
FTD / Avg Volume rawData?.slice(-1)?.at(0)?.failToDeliver,
</div> false,
<div )}
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl" </div>
> </div>
{relativeFTD > 0.01 </div>
? relativeFTD + "%" <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
: relativeFTD !== "n/a" <div class="flex items-center justify-between sm:block">
? "< 0.01%" <div class="text-sm font-semibold text-white">
: "n/a"} FTD / Avg Volume
</div> </div>
</div> <div
</div> class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
<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"> {relativeFTD > 0.01
<div class="text-sm font-semibold text-white"> ? relativeFTD + "%"
1-Year Change : relativeFTD !== "n/a"
</div> ? "< 0.01%"
<div : "n/a"}
class="mt-1 break-words font-semibold leading-8 tiny:text-lg xs:text-xl sm:text-2xl {changePercentageYearAgo >= </div>
0 && changePercentageYearAgo !== null </div>
? "before:content-['+'] text-[#00FC50]" </div>
: changePercentageYearAgo < 0 && <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
changePercentageYearAgo !== null <div class="flex items-center justify-between sm:block">
? 'text-[#FF2F1F]' <div class="text-sm font-semibold text-white">
: 'text-white'}" 1-Year Change
> </div>
{changePercentageYearAgo !== null <div
? abbreviateNumber( class="mt-1 break-words font-semibold leading-8 text-[1rem] sm:text-lg {changePercentageYearAgo >=
changePercentageYearAgo?.toFixed(2), 0 && changePercentageYearAgo !== null
) + "%" ? "before:content-['+'] text-[#00FC50]"
: "n/a"} : changePercentageYearAgo < 0 &&
</div> changePercentageYearAgo !== null
? 'text-[#FF2F1F]'
: 'text-white'}"
>
{changePercentageYearAgo !== null
? abbreviateNumber(
changePercentageYearAgo?.toFixed(2),
) + "%"
: "n/a"}
</div> </div>
</div> </div>
</div> </div>
<FailToDeliver {data} {rawData} />
</div> </div>
{:else}
<h2 <FailToDeliver {data} {rawData} />
class="mt-16 flex justify-center items-center text-2xl font-medium text-white mb-5 m-auto" </div>
> {:else}
No data available <Infobox text="No data available" />
</h2> {/if}
{/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> </div>
{/if} </main>
</div> </div>
</div> </div>
</section> </section>

686
src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
View File

@ -15,13 +15,11 @@
import { LineChart, BarChart } from "echarts/charts"; import { LineChart, BarChart } from "echarts/charts";
import { GridComponent, TooltipComponent } from "echarts/components"; import { GridComponent, TooltipComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers"; import { CanvasRenderer } from "echarts/renderers";
import { onMount } from "svelte";
import Infobox from "$lib/components/Infobox.svelte"; import Infobox from "$lib/components/Infobox.svelte";
use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]); use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
export let data; export let data;
let isLoaded = false;
let optionsData; let optionsData;
let rawData = data?.getHistoricalMarketCap || []; let rawData = data?.getHistoricalMarketCap || [];
@ -201,13 +199,10 @@
tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date)); tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
} }
onMount(async () => { optionsData = plotData();
optionsData = await plotData(); tableList = filterEndOfYearDates(rawData);
tableList = filterEndOfYearDates(rawData); tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date)); changePercentageYearAgo = computeYearOverYearChange(rawData);
changePercentageYearAgo = computeYearOverYearChange(rawData);
isLoaded = true;
});
async function changeStatement(state) { async function changeStatement(state) {
timePeriod = state; timePeriod = state;
@ -265,7 +260,7 @@
return { dates, marketCapList }; return { dates, marketCapList };
} }
async function plotData() { function plotData() {
const filteredData = filterDataByTimePeriod(rawData, timePeriod); const filteredData = filterDataByTimePeriod(rawData, timePeriod);
const options = { const options = {
@ -277,13 +272,24 @@
top: "10%", top: "10%",
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: [
axisLabel: { {
color: "#fff", 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: [ yAxis: [
{ {
type: "value", type: "value",
@ -422,359 +428,331 @@
<div <div
class="w-full relative flex justify-center items-center overflow-hidden" class="w-full relative flex justify-center items-center overflow-hidden"
> >
{#if isLoaded} <main class="w-full">
<main class="w-full"> <div class="sm:p-7 m-auto mt-2 sm:mt-0">
<div class="sm:p-7 m-auto mt-2 sm:mt-0"> <div class="mb-3">
<div class="mb-3"> <h1 class="text-xl sm:text-2xl text-white font-bold">Market Cap</h1>
<h1 class="text-xl sm:text-2xl text-white font-bold"> </div>
Market Cap
</h1>
</div>
{#if rawData?.length !== 0} {#if rawData?.length !== 0}
<div class="grid grid-cols-1 gap-2"> <div class="grid grid-cols-1 gap-2">
<Infobox <Infobox
text={`${$displayCompanyName} has a market cap of ${abbreviateNumber( text={`${$displayCompanyName} has a market cap of ${abbreviateNumber(
data?.getStockQuote?.marketCap, data?.getStockQuote?.marketCap,
)} as of ${new Date()?.toLocaleString("en-US", { )} as of ${new Date()?.toLocaleString("en-US", {
month: "short", month: "short",
day: "numeric", day: "numeric",
year: "numeric", year: "numeric",
daySuffix: "2-digit", daySuffix: "2-digit",
})}. Its market cap has ${ })}. Its market cap has ${
changePercentageYearAgo > 0 changePercentageYearAgo > 0
? "increased" ? "increased"
: changePercentageYearAgo < 0 : changePercentageYearAgo < 0
? "decreased" ? "decreased"
: "unchanged" : "unchanged"
} by ${abbreviateNumber( } by ${abbreviateNumber(
changePercentageYearAgo?.toFixed(2), changePercentageYearAgo?.toFixed(2),
)}% in one year.`} )}% in one year.`}
/> />
<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" 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="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="flex items-center justify-between sm:block">
<div class="text-sm font-semibold text-white"> <div class="text-sm font-semibold text-white">
Market Cap 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> </div>
</div> <div
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6"> class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
<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"
> >
<span class="truncate text-white">Download</span> {@html abbreviateNumber(
<svg data?.getStockQuote?.marketCap,
class="{data?.user?.tier === 'Pro' false,
? 'hidden' true,
: ''} ml-1 -mt-0.5 w-3.5 h-3.5" )}
xmlns="http://www.w3.org/2000/svg" </div>
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> </div>
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
<div class="app w-full"> <div class="flex items-center justify-between sm:block">
<Chart {init} options={optionsData} class="chart" /> <div class="text-sm font-semibold text-white">Category</div>
</div> <div
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
<h2 class="mt-10 text-xl text-gray-200 font-bold"> >
Market Cap History {#if capCategory}
</h2> <a
class="sm:hover:text-white text-blue-400"
<div href={capCategory.link}
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"
> >
<span class="relative text-sm block font-semibold"> {capCategory.name}
{item.title} </a>
<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} {:else}
<button n/a
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} {/if}
{/each} </div>
</div> </div>
</div> </div>
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
<div class="w-full overflow-x-scroll"> <div class="flex items-center justify-between sm:block">
<table <div class="text-sm font-semibold text-white">
class="table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md w-full m-auto mt-4" 1-Year Change
> </div>
<thead class="bg-default"> <div
<tr> class="mt-1 break-words font-semibold leading-8 text-[1rem] sm:text-lg {changePercentageYearAgo >=
<th class="text-white font-semibold text-start text-sm" 0 && changePercentageYearAgo !== null
>Date</th ? "before:content-['+'] text-[#00FC50]"
> : changePercentageYearAgo < 0 &&
<th class="text-white font-semibold text-end text-sm" changePercentageYearAgo !== null
>Market Cap</th ? 'text-[#FF2F1F]'
> : 'text-white'}"
<th class="text-white font-semibold text-end text-sm" >
>% Change</th {changePercentageYearAgo !== null
> ? abbreviateNumber(
</tr> changePercentageYearAgo?.toFixed(2),
</thead> ) + "%"
<tbody> : "n/a"}
{#each tableList as item, index} </div>
<!-- row --> </div>
<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>
</div> </div>
{:else}
<h2 <div class="flex flex-row items-center w-full mt-10 mb-8">
class="mt-16 flex justify-center items-center text-2xl font-medium text-white mb-5 m-auto" <h1 class="text-2xl text-white font-bold">Market Cap Chart</h1>
> <div
No data available 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> </h2>
{/if}
</div> <div
</main> class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto"
{:else} >
<div class="w-full flex justify-center items-center h-80"> <div
<div class="relative"> 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"
<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" {#each tabs as item, i}
> {#if data?.user?.tier !== "Pro" && i > 0}
<span class="loading loading-spinner loading-md text-gray-400" <button
></span> on:click={() => goto("/pricing")}
</label> class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
</div> >
<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> </div>
{/if} </main>
</div> </div>
</div> </div>
</section> </section>