ui fixes
This commit is contained in:
MuslemRahimi
parent
9f46259950
commit
80a41848fc
@ -504,7 +504,7 @@
|
|||||||
<!--
|
<!--
|
||||||
<div class="mt-5 text-gray-100 text-sm sm:text-[1rem] sm:rounded-lg h-auto border border-slate-800 p-4">
|
<div class="mt-5 text-gray-100 text-sm sm:text-[1rem] sm:rounded-lg h-auto border border-slate-800 p-4">
|
||||||
<svg class="w-5 h-5 inline-block mr-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
|
<svg class="w-5 h-5 inline-block mr-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
|
||||||
><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16" /></svg
|
><path fill="#FBCE3C" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16" /></svg
|
||||||
>
|
>
|
||||||
For the current Fiscal Year we use available quarterly data. Complete annual data, used to compare against analyst estimates, is only finalized after the year ends.
|
For the current Fiscal Year we use available quarterly data. Complete annual data, used to compare against analyst estimates, is only finalized after the year ends.
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -347,7 +347,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -1,38 +1,48 @@
|
|||||||
<script>
|
<script>
|
||||||
|
export let title;
|
||||||
|
export let content;
|
||||||
export let title;
|
export let id;
|
||||||
export let content;
|
|
||||||
export let id;
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<label for={id} class="absolute -bottom-1 left-0 cursor-pointer border border-gray-900 rounded-full bg-[#242424] sm:hover:bg-[#313131] duration-100 p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
|
<label
|
||||||
<svg class="h-[10.5px] w-[10.5px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
|
for={id}
|
||||||
<path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
|
class="absolute -bottom-1 left-0 cursor-pointer p-1 text-gray-800 sm:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="h-[10.5px] w-[10.5px]"
|
||||||
|
viewBox="0 0 4 16"
|
||||||
|
fill="white"
|
||||||
|
style="max-width:20px"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"
|
||||||
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Desktop modal using dialog component -->
|
<!-- Desktop modal using dialog component -->
|
||||||
<input type="checkbox" id={id} class="modal-toggle" />
|
<input type="checkbox" {id} class="modal-toggle" />
|
||||||
|
|
||||||
<dialog id={id} class="modal modal-bottom sm:modal-middle">
|
|
||||||
|
|
||||||
|
|
||||||
<label for={id} class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"></label>
|
|
||||||
|
|
||||||
|
<dialog {id} class="modal modal-bottom sm:modal-middle">
|
||||||
|
<label
|
||||||
|
for={id}
|
||||||
|
class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"
|
||||||
|
></label>
|
||||||
|
|
||||||
<!-- Desktop modal content -->
|
<!-- Desktop modal content -->
|
||||||
<div class="modal-box w-full bg-[#191919] flex flex-col items-center">
|
<div class="modal-box w-full bg-[#191919] flex flex-col items-center">
|
||||||
<div class="mx-auto mb-8 h-1.5 w-20 flex-shrink-0 rounded-full bg-[#404040]" />
|
<div class="mx-auto mb-8 h-1.5 w-20 flex-shrink-0 rounded-full" />
|
||||||
<div class="text-white mb-5 text-center">
|
<div class="text-white mb-5 text-center">
|
||||||
<h3 class="font-bold text-2xl mb-5">{title}</h3>
|
<h3 class="font-bold text-2xl mb-5">{title}</h3>
|
||||||
<span class="text-white text-[1rem] font-normal">{@html content}</span>
|
<span class="text-white text-[1rem] font-normal">{@html content}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<label for={id} class="sm:hidden cursor-pointer px-7 py-2 mb-5 rounded-full bg-[#0DDE00] text-center text-black text-[1rem] font-normal">OK</label>
|
<label
|
||||||
|
for={id}
|
||||||
|
class="sm:hidden cursor-pointer px-7 py-2 mb-5 rounded-full bg-[#0DDE00] text-center text-black text-[1rem] font-normal"
|
||||||
|
>OK</label
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</dialog>
|
</dialog>
|
||||||
|
|||||||
@ -257,7 +257,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -1,154 +1,12 @@
|
|||||||
|
<script lang 'ts'></script>
|
||||||
|
|
||||||
<script lang ='ts'>
|
<section class="overflow-hidden text-white h-full pb-8">
|
||||||
import { shareStatisticsComponent, displayCompanyName, stockTicker, screenWidth, getCache, setCache} from '$lib/store';
|
<main class="overflow-hidden">
|
||||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
|
||||||
import { Chart } from 'svelte-echarts'
|
|
||||||
import { abbreviateNumber } from "$lib/utils";
|
|
||||||
|
|
||||||
|
|
||||||
import { init, use } from 'echarts/core'
|
|
||||||
|
|
||||||
import { BarChart } from 'echarts/charts'
|
|
||||||
import { GridComponent, TooltipComponent } from 'echarts/components'
|
|
||||||
import { CanvasRenderer } from 'echarts/renderers'
|
|
||||||
use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
|
|
||||||
|
|
||||||
|
|
||||||
export let data;
|
|
||||||
|
|
||||||
let isLoaded = false;
|
|
||||||
|
|
||||||
|
|
||||||
let rawData = {};
|
|
||||||
let optionsData;
|
|
||||||
|
|
||||||
|
|
||||||
function getPlotOptions() {
|
|
||||||
let dates = [];
|
|
||||||
let floatShares = [];
|
|
||||||
let outstandingShares = [];
|
|
||||||
// Iterate over the data and extract required information
|
|
||||||
rawData?.historicalShares?.forEach(item => {
|
|
||||||
dates?.push(item?.date);
|
|
||||||
|
|
||||||
floatShares?.push(item?.floatShares);
|
|
||||||
outstandingShares?.push(item?.outstandingShares);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
const option = {
|
|
||||||
silent: true,
|
|
||||||
animation: false,
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
hideDelay: 100, // Set the delay in milliseconds
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: $screenWidth < 640 ? '3%' : '2%',
|
|
||||||
right: $screenWidth < 640 ? '3%' : '2%',
|
|
||||||
bottom: $screenWidth < 640 ? '0%' : '2%',
|
|
||||||
top: '5%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
data: dates,
|
|
||||||
type: 'category',
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: 'value',
|
|
||||||
splitLine: {
|
|
||||||
show: false, // Disable x-axis grid lines
|
|
||||||
},
|
|
||||||
|
|
||||||
axisLabel: {
|
|
||||||
show: false // Hide y-axis labels
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{ name: 'Floating Shares',
|
|
||||||
data: floatShares,
|
|
||||||
type: 'bar',
|
|
||||||
itemStyle: {
|
|
||||||
color: '#3B82F6' // Change bar color to white
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ name: 'Outstanding Shares',
|
|
||||||
data: outstandingShares,
|
|
||||||
type: 'bar',
|
|
||||||
itemStyle: {
|
|
||||||
color: '#E11D48'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
return option;
|
|
||||||
}
|
|
||||||
|
|
||||||
const getShareStatistics = async (ticker) => {
|
|
||||||
// Get cached data for the specific tickerID
|
|
||||||
const cachedData = getCache(ticker, 'getShareStatistics');
|
|
||||||
if (cachedData) {
|
|
||||||
rawData = cachedData;
|
|
||||||
} else {
|
|
||||||
|
|
||||||
const postData = {'ticker': ticker, path: 'share-statistics'};
|
|
||||||
// make the POST request to the endpoint
|
|
||||||
const response = await fetch('/api/ticker-data', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json"
|
|
||||||
},
|
|
||||||
body: JSON.stringify(postData)
|
|
||||||
});
|
|
||||||
|
|
||||||
rawData = await response?.json();
|
|
||||||
|
|
||||||
// Cache the data for this specific tickerID with a specific name 'getShareStatistics'
|
|
||||||
setCache(ticker, rawData, 'getShareStatistics');
|
|
||||||
}
|
|
||||||
if (Object?.keys(rawData)?.length !== 0) {
|
|
||||||
$shareStatisticsComponent = true;
|
|
||||||
} else {
|
|
||||||
$shareStatisticsComponent = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
$: {
|
|
||||||
if($stockTicker && typeof window !== 'undefined') {
|
|
||||||
isLoaded=false;
|
|
||||||
const asyncFunctions = [
|
|
||||||
getShareStatistics($stockTicker)
|
|
||||||
];
|
|
||||||
Promise.all(asyncFunctions)
|
|
||||||
.then((results) => {
|
|
||||||
optionsData = getPlotOptions()
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.error('An error occurred:', error);
|
|
||||||
});
|
|
||||||
isLoaded = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<section class="overflow-hidden text-white h-full pb-8">
|
|
||||||
<main class="overflow-hidden ">
|
|
||||||
|
|
||||||
<div class="flex flex-row items-center">
|
<div class="flex flex-row items-center">
|
||||||
<label for="shareStatisticsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
|
<label
|
||||||
|
for="shareStatisticsInfo"
|
||||||
|
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold"
|
||||||
|
>
|
||||||
Share Statistics
|
Share Statistics
|
||||||
</label>
|
</label>
|
||||||
<InfoModal
|
<InfoModal
|
||||||
@ -159,65 +17,107 @@ $: {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if isLoaded}
|
{#if isLoaded}
|
||||||
|
|
||||||
{#if Object?.keys(rawData)?.length !== 0}
|
{#if Object?.keys(rawData)?.length !== 0}
|
||||||
|
|
||||||
{#if rawData?.historicalShares?.length !== 0}
|
{#if rawData?.historicalShares?.length !== 0}
|
||||||
<div class="mt-2 pb-4 bg-[#09090B]">
|
<div class="mt-2 pb-4 bg-[#09090B]">
|
||||||
|
|
||||||
<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-1 sm:mt-3 mb-1 w-full">
|
<div class="text-white text-[1rem] mt-1 sm:mt-3 mb-1 w-full">
|
||||||
{$displayCompanyName}'s' has <span class="font-semibold">{abbreviateNumber(rawData?.latestOutstandingShares)}</span> shares outstanding with <span class="font-semibold">{abbreviateNumber(rawData?.latestFloatShares)}</span> of those shares currently floating.
|
{$displayCompanyName}'s' has
|
||||||
|
<span class="font-semibold"
|
||||||
|
>{abbreviateNumber(rawData?.latestOutstandingShares)}</span
|
||||||
|
>
|
||||||
|
shares outstanding with
|
||||||
|
<span class="font-semibold"
|
||||||
|
>{abbreviateNumber(rawData?.latestFloatShares)}</span
|
||||||
|
> of those shares currently floating.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="app w-full h-[300px] mt-6">
|
<div class="app w-full h-[300px] mt-6">
|
||||||
<Chart {init} options={optionsData} class="chart" />
|
<Chart {init} options={optionsData} class="chart" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
<div class="flex flex-row items-center justify-between mx-auto mt-8 w-full sm:w-11/12">
|
class="flex flex-row items-center justify-between mx-auto mt-8 w-full sm:w-11/12"
|
||||||
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
|
>
|
||||||
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
|
<div
|
||||||
<div class="w-3 h-3 bg-[#5470C6] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
|
class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"
|
||||||
<span class="mt-2 sm:mt-0 text-white text-center sm:text-start text-sm sm:font-semibold inline-block">
|
>
|
||||||
|
<div
|
||||||
|
class="h-full transform -translate-x-1/2"
|
||||||
|
aria-hidden="true"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
class="w-3 h-3 bg-[#5470C6] 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-sm sm:font-semibold inline-block"
|
||||||
|
>
|
||||||
Floating Shares
|
Floating Shares
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
|
<div
|
||||||
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
|
class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"
|
||||||
<div class="w-3 h-3 bg-[#C12F23] 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-sm sm:font-semibold inline-block">
|
<div
|
||||||
|
class="h-full transform -translate-x-1/2"
|
||||||
|
aria-hidden="true"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
class="w-3 h-3 bg-[#C12F23] 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-sm sm:font-semibold inline-block"
|
||||||
|
>
|
||||||
Outstanding Shares
|
Outstanding Shares
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="mt-5 text-gray-100 text-sm sm:text-[1rem] sm:rounded-lg h-auto border border-slate-800 p-4">
|
<div
|
||||||
<svg class="w-5 h-5 inline-block mr-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
class="mt-5 text-gray-100 text-sm sm:text-[1rem] sm:rounded-lg h-auto border border-slate-800 p-4"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 inline-block mr-0.5 flex-shrink-0"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 256 256"
|
||||||
|
><path
|
||||||
|
fill="#FBCE3C"
|
||||||
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
|
/></svg
|
||||||
|
>
|
||||||
Historical Shares are not available yet for {$displayCompanyName}
|
Historical Shares are not available yet for {$displayCompanyName}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if rawData?.sharesShort !== 0}
|
{#if rawData?.sharesShort !== 0}
|
||||||
<h2 class="mt-10 mr-1 flex flex-row items-center text-white text-xl sm:text-2xl font-bold mb-3">
|
<h2
|
||||||
|
class="mt-10 mr-1 flex flex-row items-center text-white text-xl sm:text-2xl font-bold mb-3"
|
||||||
|
>
|
||||||
Short Selling Information
|
Short Selling Information
|
||||||
</h2>
|
</h2>
|
||||||
<span class="text-white">
|
<span class="text-white">
|
||||||
The latest short interest is <span class="font-semibold"> {abbreviateNumber(rawData?.sharesShort)}</span>, so <span class="font-semibold">{rawData?.shortOutStandingPercent}%</span> of the outstanding shares have been sold short.
|
The latest short interest is <span class="font-semibold">
|
||||||
|
{abbreviateNumber(rawData?.sharesShort)}</span
|
||||||
|
>, so
|
||||||
|
<span class="font-semibold"
|
||||||
|
>{rawData?.shortOutStandingPercent}%</span
|
||||||
|
> of the outstanding shares have been sold short.
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div class="flex justify-start items-center w-full m-auto mt-6 ">
|
<div class="flex justify-start items-center w-full m-auto mt-6">
|
||||||
<table class="w-full" data-test="statistics-table">
|
<table class="w-full" data-test="statistics-table">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
|
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
|
||||||
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
|
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
|
||||||
<span>Short Interest</span>
|
<span>Short Interest</span>
|
||||||
</td>
|
</td>
|
||||||
<td class="whitespace-nowrap px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
|
<td
|
||||||
|
class="whitespace-nowrap px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
|
||||||
|
>
|
||||||
{abbreviateNumber(rawData?.sharesShort)}
|
{abbreviateNumber(rawData?.sharesShort)}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -225,7 +125,9 @@ $: {
|
|||||||
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
|
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
|
||||||
<span>Short Previous Month</span>
|
<span>Short Previous Month</span>
|
||||||
</td>
|
</td>
|
||||||
<td class="whitespace-nowrap px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
|
<td
|
||||||
|
class="whitespace-nowrap px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
|
||||||
|
>
|
||||||
{abbreviateNumber(rawData?.sharesShortPriorMonth)}
|
{abbreviateNumber(rawData?.sharesShortPriorMonth)}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -233,7 +135,9 @@ $: {
|
|||||||
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
|
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
|
||||||
<span>Short % of Shares Out</span>
|
<span>Short % of Shares Out</span>
|
||||||
</td>
|
</td>
|
||||||
<td class="whitespace-nowrap px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
|
<td
|
||||||
|
class="whitespace-nowrap px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
|
||||||
|
>
|
||||||
{rawData?.shortOutStandingPercent}%
|
{rawData?.shortOutStandingPercent}%
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -241,7 +145,9 @@ $: {
|
|||||||
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
|
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
|
||||||
<span>Short % of Float</span>
|
<span>Short % of Float</span>
|
||||||
</td>
|
</td>
|
||||||
<td class="whitespace-nowrap px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
|
<td
|
||||||
|
class="whitespace-nowrap px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
|
||||||
|
>
|
||||||
{rawData?.shortFloatPercent}%
|
{rawData?.shortFloatPercent}%
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -249,7 +155,9 @@ $: {
|
|||||||
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
|
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
|
||||||
<span>Short Ratio (days to cover)</span>
|
<span>Short Ratio (days to cover)</span>
|
||||||
</td>
|
</td>
|
||||||
<td class="whitespace-nowrap px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
|
<td
|
||||||
|
class="whitespace-nowrap px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
|
||||||
|
>
|
||||||
{rawData?.shortRatio}
|
{rawData?.shortRatio}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -257,34 +165,25 @@ $: {
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{:else}
|
{:else}
|
||||||
<div class="flex justify-center items-center h-80">
|
<div class="flex justify-center items-center h-80">
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<label class="bg-[#09090B] rounded-xl 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">
|
<label
|
||||||
|
class="bg-[#09090B] rounded-xl 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"></span>
|
<span class="loading loading-spinner loading-md"></span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.app {
|
||||||
.app {
|
|
||||||
height: 300px;
|
height: 300px;
|
||||||
max-width: 100%; /* Ensure chart width doesn't exceed the container */
|
max-width: 100%; /* Ensure chart width doesn't exceed the container */
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
@ -296,5 +195,4 @@ $: {
|
|||||||
.chart {
|
.chart {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@ -36,7 +36,7 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="overflow-hidden text-white h-full">
|
<section class="overflow-hidden text-white h-full mt-5">
|
||||||
<main class="overflow-hidden">
|
<main class="overflow-hidden">
|
||||||
<div class="flex flex-row items-center">
|
<div class="flex flex-row items-center">
|
||||||
<label
|
<label
|
||||||
@ -69,57 +69,25 @@
|
|||||||
<!--Start Item-->
|
<!--Start Item-->
|
||||||
<div class="flex flex-row items-center w-full mb-6">
|
<div class="flex flex-row items-center w-full mb-6">
|
||||||
<div
|
<div
|
||||||
class="w-full rounded-md pr-4 {latestInfoDate(
|
class="w-full border-b border-gray-600 h-full pt-2 pb-4"
|
||||||
item?.date,
|
|
||||||
)
|
|
||||||
? 'bg-[#F9AB00] bg-opacity-[0.1]'
|
|
||||||
: 'bg-[#27272A]'} shadow-lg h-full pl-3 pt-2 pb-4"
|
|
||||||
>
|
>
|
||||||
<div class="flex flex-col items-start">
|
<div class="flex flex-col items-start">
|
||||||
<div class="flex flex-row items-start w-full pt-2">
|
<div class="flex flex-row items-start w-full pt-2">
|
||||||
<span class="text-white text-sm pl-2 italic"
|
<span class="text-white text-sm italic"
|
||||||
>Updated {item?.date}</span
|
>Updated {item?.date}</span
|
||||||
>
|
>
|
||||||
{#if latestInfoDate(item?.date)}
|
{#if latestInfoDate(item?.date)}
|
||||||
<label
|
<label
|
||||||
class="bg-[#2D4F8A] text-white font-medium text-xs rounded-lg px-2 py-0.5 ml-3"
|
class="bg-[#FBCE3C] rounded text-black font-semibold text-xs px-2 py-0.5 ml-3"
|
||||||
>New</label
|
>New</label
|
||||||
>
|
>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="text-white text-sm ml-auto font-medium">
|
<div class="text-white text-sm ml-auto font-medium">
|
||||||
{#if item?.changesPercentage >= 0}
|
{#if item?.changesPercentage >= 0}
|
||||||
<svg
|
|
||||||
class="w-5 h-5 -mr-0.5 -mt-0.5 inline-block"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
><g id="evaArrowUpFill0"
|
|
||||||
><g id="evaArrowUpFill1"
|
|
||||||
><path
|
|
||||||
id="evaArrowUpFill2"
|
|
||||||
fill="#00FC50"
|
|
||||||
d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"
|
|
||||||
/></g
|
|
||||||
></g
|
|
||||||
></svg
|
|
||||||
>
|
|
||||||
<span class="text-[#00FC50] inline-block"
|
<span class="text-[#00FC50] inline-block"
|
||||||
>+{item?.changesPercentage}%</span
|
>+{item?.changesPercentage}%</span
|
||||||
>
|
>
|
||||||
{:else if item?.changesPercentage < 0}
|
{:else if item?.changesPercentage < 0}
|
||||||
<svg
|
|
||||||
class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180 inline-block"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
><g id="evaArrowUpFill0"
|
|
||||||
><g id="evaArrowUpFill1"
|
|
||||||
><path
|
|
||||||
id="evaArrowUpFill2"
|
|
||||||
fill="#FF2F1F"
|
|
||||||
d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"
|
|
||||||
/></g
|
|
||||||
></g
|
|
||||||
></svg
|
|
||||||
>
|
|
||||||
<span class="text-[#FF2F1F] inline-block"
|
<span class="text-[#FF2F1F] inline-block"
|
||||||
>{item?.changesPercentage}%
|
>{item?.changesPercentage}%
|
||||||
</span>
|
</span>
|
||||||
@ -127,9 +95,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div class="flex flex-col w-full max-w-3xl pt-2">
|
||||||
class="flex flex-col w-full max-w-3xl pt-2 pl-2 pr-2 sm:pr-0"
|
|
||||||
>
|
|
||||||
<span class="text-white text-[1rem]">
|
<span class="text-white text-[1rem]">
|
||||||
{item?.text}
|
{item?.text}
|
||||||
</span>
|
</span>
|
||||||
@ -166,7 +132,7 @@
|
|||||||
<div class="flex justify-center items-center h-80">
|
<div class="flex justify-center items-center h-80">
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<label
|
<label
|
||||||
class="bg-[#09090B] rounded-xl 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"
|
class="bg-[#09090B] 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 class="loading loading-spinner loading-md text-gray-400"
|
||||||
></span>
|
></span>
|
||||||
|
|||||||
@ -12,8 +12,8 @@
|
|||||||
|
|
||||||
<TabsPrimitive.Trigger
|
<TabsPrimitive.Trigger
|
||||||
class={cn(
|
class={cn(
|
||||||
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-2 text-[1rem] font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-purple-600 data-[state=active]:text-white data-[state=active]:shadow-sm",
|
" inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-2 text-[1rem] font-semibold ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[#FBCE3C] data-[state=active]:text-black data-[state=active]:shadow-sm",
|
||||||
className
|
className,
|
||||||
)}
|
)}
|
||||||
{value}
|
{value}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
|
|||||||
@ -397,7 +397,7 @@
|
|||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
href="/options-flow"
|
href="/options-flow"
|
||||||
class="ml-auto rounded-lg text-xs sm:text-sm px-2 sm:px-3 py-2 font-semibold bg-white text-black"
|
class="ml-auto rounded-lg text-xs sm:text-sm px-2 sm:px-3 py-2 font-semibold bg-[#FBCE3C] text-black"
|
||||||
>
|
>
|
||||||
View All
|
View All
|
||||||
<ArrowUpRight
|
<ArrowUpRight
|
||||||
@ -594,7 +594,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
@ -616,7 +616,7 @@
|
|||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
href="/earnings-calendar"
|
href="/earnings-calendar"
|
||||||
class="ml-auto rounded-lg text-xs sm:text-sm px-2 sm:px-3 py-2 font-semibold bg-white text-black"
|
class="ml-auto rounded-lg text-xs sm:text-sm px-2 sm:px-3 py-2 font-semibold bg-[#FBCE3C] text-black"
|
||||||
>
|
>
|
||||||
View All
|
View All
|
||||||
<ArrowUpRight
|
<ArrowUpRight
|
||||||
@ -680,7 +680,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
@ -759,7 +759,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -183,7 +183,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -186,7 +186,7 @@
|
|||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
@ -173,7 +173,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -1,15 +1,20 @@
|
|||||||
<script lang='ts'>
|
<script lang="ts">
|
||||||
import {numberOfUnreadNotification, displayCompanyName, cryptoTicker} from '$lib/store';
|
import {
|
||||||
|
numberOfUnreadNotification,
|
||||||
|
displayCompanyName,
|
||||||
|
cryptoTicker,
|
||||||
|
} from "$lib/store";
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
|
|
||||||
const formatDate = (dateString) => {
|
const formatDate = (dateString) => {
|
||||||
// Create a date object for the input dateString
|
// Create a date object for the input dateString
|
||||||
const inputDate = new Date(dateString);
|
const inputDate = new Date(dateString);
|
||||||
|
|
||||||
// Create a date object for the current time in New York City
|
// Create a date object for the current time in New York City
|
||||||
const nycTime = new Date().toLocaleString("en-US", { timeZone: "America/New_York" });
|
const nycTime = new Date().toLocaleString("en-US", {
|
||||||
|
timeZone: "America/New_York",
|
||||||
|
});
|
||||||
const currentNYCDate = new Date(nycTime);
|
const currentNYCDate = new Date(nycTime);
|
||||||
|
|
||||||
// Calculate the difference in milliseconds
|
// Calculate the difference in milliseconds
|
||||||
@ -22,25 +27,23 @@ const inputDate = new Date(dateString);
|
|||||||
return `${minutes} minutes`;
|
return `${minutes} minutes`;
|
||||||
} else if (minutes < 1440) {
|
} else if (minutes < 1440) {
|
||||||
const hours = Math.round(minutes / 60);
|
const hours = Math.round(minutes / 60);
|
||||||
return `${hours} hour${hours !== 1 ? 's' : ''}`;
|
return `${hours} hour${hours !== 1 ? "s" : ""}`;
|
||||||
} else {
|
} else {
|
||||||
const days = Math.round(minutes / 1440);
|
const days = Math.round(minutes / 1440);
|
||||||
return `${days} day${days !== 1 ? 's' : ''}`;
|
return `${days} day${days !== 1 ? "s" : ""}`;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
let rawNews = data?.getStockNews;
|
let rawNews = data?.getStockNews;
|
||||||
let newsList = rawNews?.slice(0,20) ?? [];
|
let newsList = rawNews?.slice(0, 20) ?? [];
|
||||||
|
|
||||||
|
|
||||||
let videoId = null;
|
let videoId = null;
|
||||||
|
|
||||||
function checkIfYoutubeVideo(link) {
|
function checkIfYoutubeVideo(link) {
|
||||||
|
|
||||||
const url = new URL(link);
|
const url = new URL(link);
|
||||||
if (url?.hostname === "www.youtube.com") {
|
if (url?.hostname === "www.youtube.com") {
|
||||||
const searchParams = url.searchParams;
|
const searchParams = url.searchParams;
|
||||||
searchParams.delete('t'); // Remove the "t" parameter
|
searchParams.delete("t"); // Remove the "t" parameter
|
||||||
const videoIdMatch = url?.search?.match(/v=([^&]+)/);
|
const videoIdMatch = url?.search?.match(/v=([^&]+)/);
|
||||||
|
|
||||||
if (videoIdMatch) {
|
if (videoIdMatch) {
|
||||||
@ -56,54 +59,61 @@ const inputDate = new Date(dateString);
|
|||||||
const newArticles = rawNews?.slice(nextIndex, nextIndex + 20);
|
const newArticles = rawNews?.slice(nextIndex, nextIndex + 20);
|
||||||
newsList = [...newsList, ...newArticles];
|
newsList = [...newsList, ...newArticles];
|
||||||
}
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<svelte:head>
|
|
||||||
|
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<title>
|
<title>
|
||||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$cryptoTicker}) latest Stock Market News and Breaking Stories · stocknear
|
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
|
||||||
|
{$displayCompanyName} ({$cryptoTicker}) latest Stock Market News and
|
||||||
|
Breaking Stories · stocknear
|
||||||
</title>
|
</title>
|
||||||
<meta name="description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`} />
|
<meta
|
||||||
|
name="description"
|
||||||
|
content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`}
|
||||||
|
/>
|
||||||
|
|
||||||
<!-- Other meta tags -->
|
<!-- Other meta tags -->
|
||||||
<meta property="og:title" content={`${$displayCompanyName} (${$cryptoTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
|
<meta
|
||||||
<meta property="og:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`} />
|
property="og:title"
|
||||||
<meta property="og:type" content="website"/>
|
content={`${$displayCompanyName} (${$cryptoTicker}) latest Stock Market News and Breaking Stories · stocknear`}
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
property="og:description"
|
||||||
|
content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`}
|
||||||
|
/>
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
<!-- Add more Open Graph meta tags as needed -->
|
<!-- Add more Open Graph meta tags as needed -->
|
||||||
|
|
||||||
<!-- Twitter specific meta tags -->
|
<!-- Twitter specific meta tags -->
|
||||||
<meta name="twitter:card" content="summary_large_image"/>
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
<meta name="twitter:title" content={`${$displayCompanyName} (${$cryptoTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
|
<meta
|
||||||
<meta name="twitter:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`} />
|
name="twitter:title"
|
||||||
|
content={`${$displayCompanyName} (${$cryptoTicker}) latest Stock Market News and Breaking Stories · stocknear`}
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
name="twitter:description"
|
||||||
|
content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`}
|
||||||
|
/>
|
||||||
<!-- Add more Twitter meta tags as needed -->
|
<!-- Add more Twitter meta tags as needed -->
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
</svelte:head>
|
<section
|
||||||
|
class="w-auto max-w-4xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
|
||||||
|
>
|
||||||
|
<div class="m-auto h-full overflow-hidden">
|
||||||
|
|
||||||
<section class="w-auto max-w-4xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
|
|
||||||
<div class="m-auto h-full overflow-hidden ">
|
|
||||||
<main class="">
|
<main class="">
|
||||||
<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-6">
|
<div class="mb-6">
|
||||||
<h1 class="text-2xl sm:text-3xl text-white font-bold">
|
<h1 class="text-2xl sm:text-3xl text-white font-bold">News</h1>
|
||||||
News
|
|
||||||
</h1>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if newsList?.length !== 0}
|
{#if newsList?.length !== 0}
|
||||||
<div class="grid grid-cols-1 gap-2 pb-5">
|
<div class="grid grid-cols-1 gap-2 pb-5">
|
||||||
{#each newsList as item}
|
{#each newsList as item}
|
||||||
<div class="w-full flex flex-col bg-[#09090B] rounded-lg m-auto">
|
<div class="w-full flex flex-col bg-[#09090B] rounded-lg m-auto">
|
||||||
{#if videoId = checkIfYoutubeVideo(item.url)}
|
{#if (videoId = checkIfYoutubeVideo(item.url))}
|
||||||
<iframe
|
<iframe
|
||||||
class="w-full h-96 rounded-lg border border-gray-800"
|
class="w-full h-96 rounded-lg border border-gray-800"
|
||||||
src={`https://www.youtube.com/embed/${videoId}`}
|
src={`https://www.youtube.com/embed/${videoId}`}
|
||||||
@ -112,18 +122,35 @@ const inputDate = new Date(dateString);
|
|||||||
allowfullscreen
|
allowfullscreen
|
||||||
></iframe>
|
></iframe>
|
||||||
{:else}
|
{:else}
|
||||||
<a href={item?.url} rel="noopener noreferrer" target="_blank" class="border border-gray-800 rounded-lg">
|
<a
|
||||||
<div class="flex-shrink-0 m-auto ">
|
href={item?.url}
|
||||||
<img src={item?.image} class=" w-full rounded-lg" alt="news image" loading="lazy">
|
rel="noopener noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
class="border border-gray-800 rounded-lg"
|
||||||
|
>
|
||||||
|
<div class="flex-shrink-0 m-auto">
|
||||||
|
<img
|
||||||
|
src={item?.image}
|
||||||
|
class=" w-full rounded-lg"
|
||||||
|
alt="news image"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="mb-1 w-full">
|
<div class="mb-1 w-full">
|
||||||
<h3 class="text-sm sm:text-md text-white text-opacity-60 truncate mb-2 mt-3">
|
<h3
|
||||||
|
class="text-sm sm:text-md text-white text-opacity-60 truncate mb-2 mt-3"
|
||||||
|
>
|
||||||
{item?.site} · {formatDate(item?.publishedDate)} ago
|
{item?.site} · {formatDate(item?.publishedDate)} ago
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<a href={item?.url} rel="noopener noreferrer" target="_blank" class="text-lg font-bold text-white">
|
<a
|
||||||
|
href={item?.url}
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
class="text-lg font-bold text-white"
|
||||||
|
>
|
||||||
{item?.title}
|
{item?.title}
|
||||||
<p class="text-white text-sm mt-2 font-normal">
|
<p class="text-white text-sm mt-2 font-normal">
|
||||||
{item?.text}
|
{item?.text}
|
||||||
@ -132,26 +159,34 @@ const inputDate = new Date(dateString);
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr class="border-blue-400 w-full m-auto mt-5 mb-5">
|
<hr class="border-blue-400 w-full m-auto mt-5 mb-5" />
|
||||||
{/each}
|
{/each}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
{#if newsList?.length !== rawNews?.length}
|
{#if newsList?.length !== rawNews?.length}
|
||||||
<label on:click={loadMoreData} class="shadow-lg rounded-lg cursor-pointer w-5/6 sm:w-3/5 sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6]">
|
<label
|
||||||
|
on:click={loadMoreData}
|
||||||
|
class="shadow-lg rounded-lg cursor-pointer w-5/6 sm:w-3/5 sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6]"
|
||||||
|
>
|
||||||
Load More News
|
Load More News
|
||||||
</label>
|
</label>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|
||||||
{:else}
|
{:else}
|
||||||
<div class="w-screen max-w-xl sm:flex sm:flex-row sm:items-center justify-center m-auto text-gray-100 font-medium bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
<div
|
||||||
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
class="w-screen max-w-xl sm:flex sm:flex-row sm:items-center justify-center m-auto text-gray-100 font-medium bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 256 256"
|
||||||
|
><path
|
||||||
|
fill="#FBCE3C"
|
||||||
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
|
/></svg
|
||||||
|
>
|
||||||
No news article published yet!
|
No news article published yet!
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -8,7 +8,6 @@
|
|||||||
differenceInWeeks,
|
differenceInWeeks,
|
||||||
} from "date-fns";
|
} from "date-fns";
|
||||||
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
|
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
|
||||||
import dividendsLogo from "$lib/images/dividends_calendar_logo.png";
|
|
||||||
import { abbreviateNumber } from "$lib/utils";
|
import { abbreviateNumber } from "$lib/utils";
|
||||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||||
|
|
||||||
@ -279,7 +278,7 @@
|
|||||||
<div class="w-full overflow-x-scroll">
|
<div class="w-full overflow-x-scroll">
|
||||||
<!-- Cards -->
|
<!-- Cards -->
|
||||||
<div
|
<div
|
||||||
class=" w-full flex flex-row justify-center m-auto items-center pl-2 pr-2 sm:pl-0 sm:pr-0"
|
class=" w-full flex flex-row justify-center m-auto items-center"
|
||||||
>
|
>
|
||||||
<!-- Start Columns -->
|
<!-- Start Columns -->
|
||||||
<label
|
<label
|
||||||
@ -300,16 +299,16 @@
|
|||||||
</label>
|
</label>
|
||||||
{#each weekday as day, index}
|
{#each weekday as day, index}
|
||||||
<div
|
<div
|
||||||
class="w-full {index === selectedWeekday
|
class="w-full text-white {index === selectedWeekday
|
||||||
? ''
|
? ''
|
||||||
: 'hidden sm:block'}"
|
: 'hidden sm:block'}"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
on:click={() => toggleDate(index)}
|
on:click={() => toggleDate(index)}
|
||||||
class="w-11/12 m-auto sm:w-full cursor-pointer h-16 {index ===
|
class=" m-auto w-full cursor-pointer h-16 {index ===
|
||||||
selectedWeekday
|
selectedWeekday
|
||||||
? 'bg-purple-600 sm:hover:bg-purple-700'
|
? 'bg-[#FBCE3C] text-black font-semibold'
|
||||||
: ''} rounded-lg sm:rounded-none flex bg-[#09090B] sm:hover:bg-purple-600 transition duration-50 border border-gray-600 mb-3"
|
: ''} rounded-md sm:rounded-none flex bg-[#09090B] border border-gray-600 mb-3"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class=" flex flex-row justify-center items-center w-full"
|
class=" flex flex-row justify-center items-center w-full"
|
||||||
@ -325,15 +324,15 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
><path
|
><path
|
||||||
fill="white"
|
fill="black"
|
||||||
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
|
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
</label>
|
</label>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col items-center text-white truncate m-auto p-1"
|
class="flex flex-col items-center truncate m-auto p-1"
|
||||||
>
|
>
|
||||||
<span class="font-medium text-[1rem]"
|
<span class="text-[1rem]"
|
||||||
>{formattedWeekday[index]}</span
|
>{formattedWeekday[index]}</span
|
||||||
>
|
>
|
||||||
<span class="text-[1rem] sm:text-sm m-auto pt-1 pb-1">
|
<span class="text-[1rem] sm:text-sm m-auto pt-1 pb-1">
|
||||||
@ -351,7 +350,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
><path
|
><path
|
||||||
fill="white"
|
fill="black"
|
||||||
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
|
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
@ -495,7 +494,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -276,10 +276,10 @@
|
|||||||
<!-- Page wrapper -->
|
<!-- Page wrapper -->
|
||||||
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||||
<!-- Content area -->
|
<!-- Content area -->
|
||||||
<div class="relative flex flex-col flex-1 overflow-hidden">
|
<div class="w-full overflow-x-scroll">
|
||||||
<!-- Cards -->
|
<!-- Cards -->
|
||||||
<div
|
<div
|
||||||
class=" w-full flex flex-row justify-center m-auto items-center pl-2 pr-2 sm:pl-0 sm:pr-0"
|
class=" w-full flex flex-row justify-center m-auto items-center"
|
||||||
>
|
>
|
||||||
<!-- Start Columns -->
|
<!-- Start Columns -->
|
||||||
<label
|
<label
|
||||||
@ -300,16 +300,16 @@
|
|||||||
</label>
|
</label>
|
||||||
{#each weekday as day, index}
|
{#each weekday as day, index}
|
||||||
<div
|
<div
|
||||||
class="w-full {index === selectedWeekday
|
class="w-full text-white {index === selectedWeekday
|
||||||
? ''
|
? ''
|
||||||
: 'hidden sm:block'}"
|
: 'hidden sm:block'}"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
on:click={() => toggleDate(index)}
|
on:click={() => toggleDate(index)}
|
||||||
class="w-11/12 m-auto sm:w-full cursor-pointer h-16 {index ===
|
class=" m-auto w-full cursor-pointer h-16 {index ===
|
||||||
selectedWeekday
|
selectedWeekday
|
||||||
? 'bg-purple-600 sm:hover:bg-purple-700'
|
? 'bg-[#FBCE3C] text-black font-semibold'
|
||||||
: ''} rounded sm:rounded-none flex bg-[#09090B] sm:hover:bg-purple-600 transition duration-50 border border-gray-600 mb-3"
|
: ''} rounded-md sm:rounded-none flex bg-[#09090B] border border-gray-600 mb-3"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class=" flex flex-row justify-center items-center w-full"
|
class=" flex flex-row justify-center items-center w-full"
|
||||||
@ -325,15 +325,15 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
><path
|
><path
|
||||||
fill="white"
|
fill="black"
|
||||||
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
|
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
</label>
|
</label>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col items-center text-white truncate m-auto p-1"
|
class="flex flex-col items-center truncate m-auto p-1"
|
||||||
>
|
>
|
||||||
<span class="font-medium text-md"
|
<span class="text-[1rem]"
|
||||||
>{formattedWeekday[index]}</span
|
>{formattedWeekday[index]}</span
|
||||||
>
|
>
|
||||||
<span class="text-[1rem] sm:text-sm m-auto pt-1 pb-1">
|
<span class="text-[1rem] sm:text-sm m-auto pt-1 pb-1">
|
||||||
@ -351,7 +351,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
><path
|
><path
|
||||||
fill="white"
|
fill="black"
|
||||||
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
|
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
@ -382,21 +382,21 @@
|
|||||||
{#if index === selectedWeekday}
|
{#if index === selectedWeekday}
|
||||||
{#if day?.length !== 0}
|
{#if day?.length !== 0}
|
||||||
<h2 class="font-semibold text-white text-xl mt-5">
|
<h2 class="font-semibold text-white text-xl mt-5">
|
||||||
{formattedWeekday[index]?.split(", ")[1]} · {day?.length} Earnings
|
{formattedWeekday[index]?.split(", ")[1]} · {day?.length} Dividends
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<div class="w-full overflow-x-scroll no-scrollbar">
|
<div class="w-full overflow-x-scroll no-scrollbar">
|
||||||
<table
|
<table
|
||||||
class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto mt-4"
|
class="table table-sm table-compact rounded-none sm:rounded-md w-full border-[#09090B] m-auto mt-4"
|
||||||
>
|
>
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="whitespace-nowrap">
|
<tr
|
||||||
<th
|
class="whitespace-nowrap border-b border-[#27272A]"
|
||||||
class="text-start text-white font-semibold text-sm"
|
>
|
||||||
|
<th class="text-white font-semibold text-sm"
|
||||||
>Symbol</th
|
>Symbol</th
|
||||||
>
|
>
|
||||||
<th
|
<th class="text-white font-semibold text-sm"
|
||||||
class="text-start text-white font-semibold text-sm"
|
|
||||||
>Company Name</th
|
>Company Name</th
|
||||||
>
|
>
|
||||||
<th
|
<th
|
||||||
@ -405,44 +405,45 @@
|
|||||||
>
|
>
|
||||||
<th
|
<th
|
||||||
class="text-white font-semibold text-sm text-end"
|
class="text-white font-semibold text-sm text-end"
|
||||||
>Revenue Estimate</th
|
>Revenue</th
|
||||||
|
>
|
||||||
|
|
||||||
|
<th
|
||||||
|
class="text-white font-semibold text-sm text-end"
|
||||||
|
>Cash Amount</th
|
||||||
>
|
>
|
||||||
<th
|
<th
|
||||||
class="text-white font-semibold text-sm text-end"
|
class="text-white font-semibold text-sm text-end"
|
||||||
>EPS Estimate</th
|
>Payment Date</th
|
||||||
>
|
|
||||||
<th
|
|
||||||
class="text-white font-semibold text-sm text-end text-end"
|
|
||||||
>Earnings Time</th
|
|
||||||
>
|
>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{#each day as item, index}
|
{#each day as item}
|
||||||
<!-- row -->
|
<!-- row -->
|
||||||
<tr
|
<tr
|
||||||
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
|
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
|
||||||
>
|
>
|
||||||
<td
|
<td
|
||||||
class="text-blue-400 border-b-[#09090B] text-start text-sm sm:text-[1rem]"
|
class="border-b-[#09090B] text-sm sm:text-[1rem]"
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
href={"/stocks/" + item?.symbol}
|
href={"/stocks/" + item?.symbol}
|
||||||
class="sm:hover:text-white text-blue-400"
|
class="text-blue-400 sm:hover:text-white"
|
||||||
>{item?.symbol}</a
|
>{item?.symbol}
|
||||||
>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td
|
<td
|
||||||
class="text-white whitespace-nowrap text-sm sm:text-[1rem] border-b-[#09090B]"
|
class="text-white border-b-[#09090B] whitespace-nowrap text-sm sm:text-[1rem]"
|
||||||
>
|
>
|
||||||
{item?.name.length > 20
|
{item?.name.length > 20
|
||||||
? item?.name?.slice(0, 20) + "..."
|
? item?.name.slice(0, 20) + "..."
|
||||||
: item?.name}
|
: item?.name}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td
|
<td
|
||||||
class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem]"
|
class="text-white border-b-[#09090B] text-sm text-end sm:text-[1rem]"
|
||||||
>
|
>
|
||||||
{item?.marketCap !== null
|
{item?.marketCap !== null
|
||||||
? abbreviateNumber(item?.marketCap)
|
? abbreviateNumber(item?.marketCap)
|
||||||
@ -450,101 +451,35 @@
|
|||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td
|
<td
|
||||||
class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem]"
|
class="text-white border-b-[#09090B] text-sm sm:text-[1rem] text-end"
|
||||||
>
|
>
|
||||||
<div
|
{item?.revenue !== null
|
||||||
class="flex flex-row items-center justify-end"
|
? abbreviateNumber(item?.revenue)
|
||||||
>
|
: "-"}
|
||||||
<span>
|
</td>
|
||||||
{item?.revenueEst !== null
|
|
||||||
? abbreviateNumber(item?.revenueEst)
|
<td
|
||||||
|
class="text-white border-b-[#09090B] text-center text-sm sm:text-[1rem] text-end"
|
||||||
|
>
|
||||||
|
{item?.adjDividend !== null
|
||||||
|
? item?.adjDividend?.toFixed(3)
|
||||||
: "-"}
|
: "-"}
|
||||||
</span>
|
|
||||||
{#if item?.revenueEst !== null && item?.revenueEst !== null}
|
|
||||||
{#if item?.revenueEst / item?.revenuePrior - 1 >= 0}
|
|
||||||
<span class="ml-1 text-[#22C55E]">
|
|
||||||
+{(
|
|
||||||
(item?.revenueEst /
|
|
||||||
item?.revenuePrior -
|
|
||||||
1) *
|
|
||||||
100
|
|
||||||
)?.toFixed(2)}%
|
|
||||||
</span>
|
|
||||||
{:else}
|
|
||||||
<span class="ml-1 text-[#FF2F1F]">
|
|
||||||
{(
|
|
||||||
(item?.revenueEst /
|
|
||||||
item?.revenuePrior -
|
|
||||||
1) *
|
|
||||||
100
|
|
||||||
)?.toFixed(2)}%
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td
|
<td
|
||||||
class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem]"
|
class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem]"
|
||||||
>
|
>
|
||||||
<div
|
{item?.paymentDate !== null
|
||||||
class="flex flex-row items-center justify-end"
|
? new Date(item?.paymentDate)?.toLocaleString(
|
||||||
>
|
"en-US",
|
||||||
<span>
|
{
|
||||||
{item?.epsEst !== null
|
month: "short",
|
||||||
? item?.epsEst?.toFixed(2)
|
day: "numeric",
|
||||||
|
year: "numeric",
|
||||||
|
daySuffix: "2-digit",
|
||||||
|
},
|
||||||
|
)
|
||||||
: "-"}
|
: "-"}
|
||||||
</span>
|
|
||||||
{#if item?.epsEst !== null && item?.epsPrior !== null}
|
|
||||||
{#if item?.epsEst / item?.epsPrior - 1 >= 0}
|
|
||||||
<span class="ml-1 text-[#22C55E]">
|
|
||||||
+{(
|
|
||||||
(item?.epsEst / item?.epsPrior - 1) *
|
|
||||||
100
|
|
||||||
)?.toFixed(2)}%
|
|
||||||
</span>
|
|
||||||
{:else}
|
|
||||||
<span class="ml-1 text-[#FF2F1F]">
|
|
||||||
{(
|
|
||||||
(item?.epsEst / item?.epsPrior - 1) *
|
|
||||||
100
|
|
||||||
)?.toFixed(2)}%
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td
|
|
||||||
class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap"
|
|
||||||
>
|
|
||||||
{#if item?.release === "amc"}
|
|
||||||
<svg
|
|
||||||
class="w-4 h-4 inline-block mr-1"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 256 256"
|
|
||||||
><path
|
|
||||||
fill="#70A1EF"
|
|
||||||
d="M232.13 143.64a6 6 0 0 0-6-1.49a90.07 90.07 0 0 1-112.27-112.3a6 6 0 0 0-7.49-7.48a102.88 102.88 0 0 0-51.89 36.31a102 102 0 0 0 142.84 142.84a102.88 102.88 0 0 0 36.31-51.89a6 6 0 0 0-1.5-5.99m-42 48.29a90 90 0 0 1-126-126a90.9 90.9 0 0 1 35.52-28.27a102.06 102.06 0 0 0 118.69 118.69a90.9 90.9 0 0 1-28.24 35.58Z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
After Close
|
|
||||||
{:else}
|
|
||||||
<svg
|
|
||||||
class="w-4 h-4 inline-block mr-1"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 256 256"
|
|
||||||
><g fill="#FEC001"
|
|
||||||
><path
|
|
||||||
d="M184 128a56 56 0 1 1-56-56a56 56 0 0 1 56 56Z"
|
|
||||||
opacity=".2"
|
|
||||||
/><path
|
|
||||||
d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0Zm72 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64Zm-16 0a48 48 0 1 0-48 48a48.05 48.05 0 0 0 48-48ZM58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32ZM192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72Zm5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8Zm80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8Zm112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16Z"
|
|
||||||
/></g
|
|
||||||
></svg
|
|
||||||
>
|
|
||||||
Before Open
|
|
||||||
{/if}
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{/each}
|
{/each}
|
||||||
@ -560,11 +495,11 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
No Earnings available for the day.
|
No Dividends available for the day.
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@ -8,7 +8,6 @@
|
|||||||
differenceInWeeks,
|
differenceInWeeks,
|
||||||
} from "date-fns";
|
} from "date-fns";
|
||||||
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
|
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
|
||||||
import logo from "$lib/images/transcripts_logo.png";
|
|
||||||
import { abbreviateNumber, listOfRelevantCountries } from "$lib/utils";
|
import { abbreviateNumber, listOfRelevantCountries } from "$lib/utils";
|
||||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||||
import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
|
import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
|
||||||
@ -224,7 +223,7 @@
|
|||||||
<div class="relative flex flex-col flex-1 overflow-hidden">
|
<div class="relative flex flex-col flex-1 overflow-hidden">
|
||||||
<!-- Cards -->
|
<!-- Cards -->
|
||||||
<div
|
<div
|
||||||
class=" w-full flex flex-row justify-center m-auto items-center pl-2 pr-2 sm:pl-0 sm:pr-0"
|
class=" w-full flex flex-row justify-center m-auto items-center"
|
||||||
>
|
>
|
||||||
<!-- Start Columns -->
|
<!-- Start Columns -->
|
||||||
<label
|
<label
|
||||||
@ -245,16 +244,16 @@
|
|||||||
</label>
|
</label>
|
||||||
{#each filterList?.length === 0 ? weekday : weekdayFiltered as day, index}
|
{#each filterList?.length === 0 ? weekday : weekdayFiltered as day, index}
|
||||||
<div
|
<div
|
||||||
class="w-full {index === selectedWeekday
|
class="w-full text-white {index === selectedWeekday
|
||||||
? ''
|
? ''
|
||||||
: 'hidden sm:block'}"
|
: 'hidden sm:block'}"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
on:click={() => toggleDate(index)}
|
on:click={() => toggleDate(index)}
|
||||||
class="w-11/12 m-auto sm:w-full cursor-pointer h-16 {index ===
|
class=" m-auto w-full cursor-pointer h-16 {index ===
|
||||||
selectedWeekday
|
selectedWeekday
|
||||||
? 'bg-purple-600 sm:hover:bg-purple-700'
|
? 'bg-[#FBCE3C] text-black font-semibold'
|
||||||
: ''} rounded sm:rounded-none flex bg-[#09090B] sm:hover:bg-purple-600 transition duration-50 border border-gray-600 mb-3"
|
: ''} rounded sm:rounded-none flex bg-[#09090B] border border-gray-600 mb-3"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class=" flex flex-row justify-center items-center w-full"
|
class=" flex flex-row justify-center items-center w-full"
|
||||||
@ -268,17 +267,15 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
><path
|
><path
|
||||||
fill="white"
|
fill="black"
|
||||||
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
|
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
</label>
|
</label>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col items-center text-white truncate m-auto p-1"
|
class="flex flex-col items-center truncate m-auto p-1"
|
||||||
>
|
|
||||||
<span class="font-medium text-md"
|
|
||||||
>{formattedWeekday[index]}</span
|
|
||||||
>
|
>
|
||||||
|
<span class="text-md">{formattedWeekday[index]}</span>
|
||||||
<span class="text-[1rem] sm:text-sm m-auto pt-1 pb-1">
|
<span class="text-[1rem] sm:text-sm m-auto pt-1 pb-1">
|
||||||
{day?.length} Events</span
|
{day?.length} Events</span
|
||||||
>
|
>
|
||||||
@ -292,7 +289,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
><path
|
><path
|
||||||
fill="white"
|
fill="black"
|
||||||
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
|
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
@ -707,7 +704,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -173,7 +173,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -153,7 +153,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -198,7 +198,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -1,15 +1,20 @@
|
|||||||
<script lang='ts'>
|
<script lang="ts">
|
||||||
import {numberOfUnreadNotification, displayCompanyName, etfTicker} from '$lib/store';
|
import {
|
||||||
|
numberOfUnreadNotification,
|
||||||
|
displayCompanyName,
|
||||||
|
etfTicker,
|
||||||
|
} from "$lib/store";
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
|
|
||||||
const formatDate = (dateString) => {
|
const formatDate = (dateString) => {
|
||||||
// Create a date object for the input dateString
|
// Create a date object for the input dateString
|
||||||
const inputDate = new Date(dateString);
|
const inputDate = new Date(dateString);
|
||||||
|
|
||||||
// Create a date object for the current time in New York City
|
// Create a date object for the current time in New York City
|
||||||
const nycTime = new Date().toLocaleString("en-US", { timeZone: "America/New_York" });
|
const nycTime = new Date().toLocaleString("en-US", {
|
||||||
|
timeZone: "America/New_York",
|
||||||
|
});
|
||||||
const currentNYCDate = new Date(nycTime);
|
const currentNYCDate = new Date(nycTime);
|
||||||
|
|
||||||
// Calculate the difference in milliseconds
|
// Calculate the difference in milliseconds
|
||||||
@ -22,25 +27,23 @@ const inputDate = new Date(dateString);
|
|||||||
return `${minutes} minutes`;
|
return `${minutes} minutes`;
|
||||||
} else if (minutes < 1440) {
|
} else if (minutes < 1440) {
|
||||||
const hours = Math.round(minutes / 60);
|
const hours = Math.round(minutes / 60);
|
||||||
return `${hours} hour${hours !== 1 ? 's' : ''}`;
|
return `${hours} hour${hours !== 1 ? "s" : ""}`;
|
||||||
} else {
|
} else {
|
||||||
const days = Math.round(minutes / 1440);
|
const days = Math.round(minutes / 1440);
|
||||||
return `${days} day${days !== 1 ? 's' : ''}`;
|
return `${days} day${days !== 1 ? "s" : ""}`;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
let rawNews = data?.getStockNews;
|
let rawNews = data?.getStockNews;
|
||||||
let newsList = rawNews?.slice(0,20) ?? [];
|
let newsList = rawNews?.slice(0, 20) ?? [];
|
||||||
|
|
||||||
|
|
||||||
let videoId = null;
|
let videoId = null;
|
||||||
|
|
||||||
function checkIfYoutubeVideo(link) {
|
function checkIfYoutubeVideo(link) {
|
||||||
|
|
||||||
const url = new URL(link);
|
const url = new URL(link);
|
||||||
if (url?.hostname === "www.youtube.com") {
|
if (url?.hostname === "www.youtube.com") {
|
||||||
const searchParams = url.searchParams;
|
const searchParams = url.searchParams;
|
||||||
searchParams.delete('t'); // Remove the "t" parameter
|
searchParams.delete("t"); // Remove the "t" parameter
|
||||||
const videoIdMatch = url?.search?.match(/v=([^&]+)/);
|
const videoIdMatch = url?.search?.match(/v=([^&]+)/);
|
||||||
|
|
||||||
if (videoIdMatch) {
|
if (videoIdMatch) {
|
||||||
@ -56,54 +59,61 @@ const inputDate = new Date(dateString);
|
|||||||
const newArticles = rawNews?.slice(nextIndex, nextIndex + 20);
|
const newArticles = rawNews?.slice(nextIndex, nextIndex + 20);
|
||||||
newsList = [...newsList, ...newArticles];
|
newsList = [...newsList, ...newArticles];
|
||||||
}
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<svelte:head>
|
|
||||||
|
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<title>
|
<title>
|
||||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$etfTicker}) latest Stock Market News and Breaking Stories · stocknear
|
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
|
||||||
|
{$displayCompanyName} ({$etfTicker}) latest Stock Market News and Breaking
|
||||||
|
Stories · stocknear
|
||||||
</title>
|
</title>
|
||||||
<meta name="description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`} />
|
<meta
|
||||||
|
name="description"
|
||||||
|
content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`}
|
||||||
|
/>
|
||||||
|
|
||||||
<!-- Other meta tags -->
|
<!-- Other meta tags -->
|
||||||
<meta property="og:title" content={`${$displayCompanyName} (${$etfTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
|
<meta
|
||||||
<meta property="og:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`} />
|
property="og:title"
|
||||||
<meta property="og:type" content="website"/>
|
content={`${$displayCompanyName} (${$etfTicker}) latest Stock Market News and Breaking Stories · stocknear`}
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
property="og:description"
|
||||||
|
content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`}
|
||||||
|
/>
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
<!-- Add more Open Graph meta tags as needed -->
|
<!-- Add more Open Graph meta tags as needed -->
|
||||||
|
|
||||||
<!-- Twitter specific meta tags -->
|
<!-- Twitter specific meta tags -->
|
||||||
<meta name="twitter:card" content="summary_large_image"/>
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
<meta name="twitter:title" content={`${$displayCompanyName} (${$etfTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
|
<meta
|
||||||
<meta name="twitter:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`} />
|
name="twitter:title"
|
||||||
|
content={`${$displayCompanyName} (${$etfTicker}) latest Stock Market News and Breaking Stories · stocknear`}
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
name="twitter:description"
|
||||||
|
content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`}
|
||||||
|
/>
|
||||||
<!-- Add more Twitter meta tags as needed -->
|
<!-- Add more Twitter meta tags as needed -->
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
</svelte:head>
|
<section
|
||||||
|
class="w-auto max-w-4xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
|
||||||
|
>
|
||||||
|
<div class="m-auto h-full overflow-hidden">
|
||||||
|
|
||||||
<section class="w-auto max-w-4xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
|
|
||||||
<div class="m-auto h-full overflow-hidden ">
|
|
||||||
<main class="">
|
<main class="">
|
||||||
<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-6">
|
<div class="mb-6">
|
||||||
<h1 class="text-2xl sm:text-3xl text-white font-bold">
|
<h1 class="text-2xl sm:text-3xl text-white font-bold">News</h1>
|
||||||
News
|
|
||||||
</h1>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if newsList.length !== 0}
|
{#if newsList.length !== 0}
|
||||||
<div class="grid grid-cols-1 gap-2 pb-5">
|
<div class="grid grid-cols-1 gap-2 pb-5">
|
||||||
{#each newsList as item}
|
{#each newsList as item}
|
||||||
<div class="w-full flex flex-col bg-[#09090B] rounded-lg m-auto">
|
<div class="w-full flex flex-col bg-[#09090B] rounded-lg m-auto">
|
||||||
{#if videoId = checkIfYoutubeVideo(item.url)}
|
{#if (videoId = checkIfYoutubeVideo(item.url))}
|
||||||
<iframe
|
<iframe
|
||||||
class="w-full h-96 rounded-lg border border-gray-800"
|
class="w-full h-96 rounded-lg border border-gray-800"
|
||||||
src={`https://www.youtube.com/embed/${videoId}`}
|
src={`https://www.youtube.com/embed/${videoId}`}
|
||||||
@ -112,18 +122,35 @@ const inputDate = new Date(dateString);
|
|||||||
allowfullscreen
|
allowfullscreen
|
||||||
></iframe>
|
></iframe>
|
||||||
{:else}
|
{:else}
|
||||||
<a href={item?.url} rel="noopener noreferrer" target="_blank" class="border border-gray-800 rounded-lg">
|
<a
|
||||||
<div class="flex-shrink-0 m-auto ">
|
href={item?.url}
|
||||||
<img src={item?.image} class=" w-full rounded-lg" alt="news image" loading="lazy">
|
rel="noopener noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
class="border border-gray-800 rounded-lg"
|
||||||
|
>
|
||||||
|
<div class="flex-shrink-0 m-auto">
|
||||||
|
<img
|
||||||
|
src={item?.image}
|
||||||
|
class=" w-full rounded-lg"
|
||||||
|
alt="news image"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="mb-1 w-full">
|
<div class="mb-1 w-full">
|
||||||
<h3 class="text-sm sm:text-md text-white text-opacity-60 truncate mb-2 mt-3">
|
<h3
|
||||||
|
class="text-sm sm:text-md text-white text-opacity-60 truncate mb-2 mt-3"
|
||||||
|
>
|
||||||
{item?.site} · {formatDate(item?.publishedDate)} ago
|
{item?.site} · {formatDate(item?.publishedDate)} ago
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<a href={item?.url} rel="noopener noreferrer" target="_blank" class="text-lg font-bold text-white">
|
<a
|
||||||
|
href={item?.url}
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
class="text-lg font-bold text-white"
|
||||||
|
>
|
||||||
{item?.title}
|
{item?.title}
|
||||||
<p class="text-white text-sm mt-2 font-normal">
|
<p class="text-white text-sm mt-2 font-normal">
|
||||||
{item?.text}
|
{item?.text}
|
||||||
@ -132,26 +159,34 @@ const inputDate = new Date(dateString);
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr class="border-blue-400 w-full m-auto mt-5 mb-5">
|
<hr class="border-blue-400 w-full m-auto mt-5 mb-5" />
|
||||||
{/each}
|
{/each}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
{#if newsList?.length !== rawNews?.length}
|
{#if newsList?.length !== rawNews?.length}
|
||||||
<label on:click={loadMoreData} class="shadow-lg rounded-lg cursor-pointer w-5/6 sm:w-3/5 sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6]">
|
<label
|
||||||
|
on:click={loadMoreData}
|
||||||
|
class="shadow-lg rounded-lg cursor-pointer w-5/6 sm:w-3/5 sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6]"
|
||||||
|
>
|
||||||
Load More News
|
Load More News
|
||||||
</label>
|
</label>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|
||||||
{:else}
|
{:else}
|
||||||
<div class="w-screen max-w-xl sm:flex sm:flex-row sm:items-center justify-center m-auto text-gray-100 font-medium bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
<div
|
||||||
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
class="w-screen max-w-xl sm:flex sm:flex-row sm:items-center justify-center m-auto text-gray-100 font-medium bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 256 256"
|
||||||
|
><path
|
||||||
|
fill="#FBCE3C"
|
||||||
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
|
/></svg
|
||||||
|
>
|
||||||
No news article published yet!
|
No news article published yet!
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -573,7 +573,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
@ -710,7 +710,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
@ -1118,7 +1118,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -52,7 +52,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -157,7 +157,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -152,7 +152,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -1,35 +1,33 @@
|
|||||||
<script lang='ts'>
|
<script lang="ts">
|
||||||
|
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
|
||||||
|
import { goto } from "$app/navigation";
|
||||||
|
import { Chart } from "svelte-echarts";
|
||||||
|
|
||||||
|
import { init, use } from "echarts/core";
|
||||||
|
import { TreemapChart } from "echarts/charts";
|
||||||
|
import { GridComponent } from "echarts/components";
|
||||||
|
import { CanvasRenderer } from "echarts/renderers";
|
||||||
|
use([TreemapChart, GridComponent, CanvasRenderer]);
|
||||||
|
|
||||||
import { screenWidth, numberOfUnreadNotification } from '$lib/store';
|
export let data;
|
||||||
import { goto } from '$app/navigation';
|
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
||||||
import { Chart } from 'svelte-echarts'
|
|
||||||
|
|
||||||
import { init, use } from 'echarts/core'
|
let displayIndex = "S&P500";
|
||||||
import { TreemapChart } from 'echarts/charts'
|
|
||||||
import { GridComponent} from 'echarts/components'
|
|
||||||
import { CanvasRenderer } from 'echarts/renderers'
|
|
||||||
use([TreemapChart, GridComponent, CanvasRenderer])
|
|
||||||
|
|
||||||
export let data;
|
let lowestAvg = Infinity;
|
||||||
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
let lowestAvgCategory = "";
|
||||||
|
let highestAvg = -Infinity;
|
||||||
|
let highestAvgCategory = "";
|
||||||
|
|
||||||
let displayIndex = 'S&P500';
|
let rawData;
|
||||||
|
|
||||||
let lowestAvg = Infinity;
|
let isLoaded = false;
|
||||||
let lowestAvgCategory = '';
|
let options;
|
||||||
let highestAvg = -Infinity;
|
|
||||||
let highestAvgCategory = '';
|
|
||||||
|
|
||||||
let rawData;
|
const visualMin = -100;
|
||||||
|
const visualMax = 100;
|
||||||
|
|
||||||
let isLoaded = false;
|
/*
|
||||||
let options;
|
|
||||||
|
|
||||||
const visualMin = -100;
|
|
||||||
const visualMax = 100;
|
|
||||||
|
|
||||||
/*
|
|
||||||
To-do: Add export to save as png or jpg.
|
To-do: Add export to save as png or jpg.
|
||||||
async function exportTreemap() {
|
async function exportTreemap() {
|
||||||
// Specify the desired width and height for the canvas
|
// Specify the desired width and height for the canvas
|
||||||
@ -56,55 +54,56 @@ async function exportTreemap() {
|
|||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
function getLevelOption() {
|
function getLevelOption() {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
borderColor: '#2D313C',
|
borderColor: "#2D313C",
|
||||||
borderWidth: 0,
|
borderWidth: 0,
|
||||||
gapWidth: 1
|
gapWidth: 1,
|
||||||
},
|
},
|
||||||
upperLabel: {
|
upperLabel: {
|
||||||
show: false
|
show: false,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
borderColor: '#2D313C',
|
borderColor: "#2D313C",
|
||||||
borderWidth: 5,
|
borderWidth: 5,
|
||||||
gapWidth: 1
|
gapWidth: 1,
|
||||||
},
|
},
|
||||||
|
|
||||||
emphasis: {
|
emphasis: {
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
borderColor: '#2D313C'
|
borderColor: "#2D313C",
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
color: ['#942e38', '#aaa', '#269f3c'],
|
color: ["#942e38", "#aaa", "#269f3c"],
|
||||||
colorMappingBy: 'value',
|
colorMappingBy: "value",
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
gapWidth: 1
|
gapWidth: 1,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
colorSaturation: [0.5, 0.9],
|
colorSaturation: [0.5, 0.9],
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
borderWidth: 5,
|
borderWidth: 5,
|
||||||
gapWidth: 1,
|
gapWidth: 1,
|
||||||
borderColorSaturation: 0.6
|
borderColorSaturation: 0.6,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
function plotData(fontSize) {
|
function plotData(fontSize) {
|
||||||
|
rawData.forEach((category) => {
|
||||||
|
|
||||||
rawData.forEach(category => {
|
|
||||||
if (category?.children && category.children.length > 0) {
|
if (category?.children && category.children.length > 0) {
|
||||||
let sum = category.children.reduce((acc, stock) => acc + (stock?.changesPercentage || 0), 0);
|
let sum = category.children.reduce(
|
||||||
|
(acc, stock) => acc + (stock?.changesPercentage || 0),
|
||||||
|
0,
|
||||||
|
);
|
||||||
let avg = sum / category.children.length;
|
let avg = sum / category.children.length;
|
||||||
|
|
||||||
if (avg < lowestAvg) {
|
if (avg < lowestAvg) {
|
||||||
@ -117,123 +116,124 @@ function plotData(fontSize) {
|
|||||||
highestAvgCategory = category.name;
|
highestAvgCategory = category.name;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
options = {
|
options = {
|
||||||
silent: true,
|
silent: true,
|
||||||
tooltip: {},
|
tooltip: {},
|
||||||
grid: {
|
grid: {
|
||||||
left: '0%',
|
left: "0%",
|
||||||
right: '0%',
|
right: "0%",
|
||||||
top: '0%',
|
top: "0%",
|
||||||
bottom: '0%',
|
bottom: "0%",
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
series: [{
|
series: [
|
||||||
|
{
|
||||||
breadcrumb: { show: false },
|
breadcrumb: { show: false },
|
||||||
type: 'treemap',
|
type: "treemap",
|
||||||
roam: false,
|
roam: false,
|
||||||
width: '100%',
|
width: "100%",
|
||||||
height: '100%',
|
height: "100%",
|
||||||
visualMin: visualMin,
|
visualMin: visualMin,
|
||||||
visualMax: visualMax,
|
visualMax: visualMax,
|
||||||
visualDimension: 2,
|
visualDimension: 2,
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: "#fff",
|
||||||
fontSize: fontSize,
|
fontSize: fontSize,
|
||||||
fontWeight: 'bold',
|
fontWeight: "bold",
|
||||||
},
|
},
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
var changesPercentage = params.data.changesPercentage || 0; // Access changesPercentage from params.data
|
var changesPercentage = params.data.changesPercentage || 0; // Access changesPercentage from params.data
|
||||||
return params.name + '\n\n' + changesPercentage + '%';
|
return params.name + "\n\n" + changesPercentage + "%";
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
upperLabel: {
|
upperLabel: {
|
||||||
show: true,
|
show: true,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: "#fff",
|
||||||
fontSize: fontSize,
|
fontSize: fontSize,
|
||||||
},
|
},
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
var sumChangesPercentage = 0;
|
var sumChangesPercentage = 0;
|
||||||
if (params.data.children && params.data.children.length > 0) {
|
if (params.data.children && params.data.children.length > 0) {
|
||||||
sumChangesPercentage = params.data.children.reduce((acc, child) => acc + (child.changesPercentage || 0), 0);
|
sumChangesPercentage = params.data.children.reduce(
|
||||||
|
(acc, child) => acc + (child.changesPercentage || 0),
|
||||||
|
0,
|
||||||
|
);
|
||||||
}
|
}
|
||||||
return params.name;
|
return params.name;
|
||||||
},
|
},
|
||||||
height: 40
|
height: 40,
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
borderColor: '#2D313C',
|
borderColor: "#2D313C",
|
||||||
color: function(params) {
|
color: function (params) {
|
||||||
return params.data.changesPercentage >= 0 ? '#30954F' : '#FF281E'; // Access changesPercentage from params.data
|
return params.data.changesPercentage >= 0 ? "#30954F" : "#FF281E"; // Access changesPercentage from params.data
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
levels: getLevelOption(),
|
levels: getLevelOption(),
|
||||||
data: rawData.map(item => ({
|
data: rawData.map((item) => ({
|
||||||
...item,
|
...item,
|
||||||
children: item.children.map(child => ({
|
children: item.children.map((child) => ({
|
||||||
...child,
|
...child,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
...child.itemStyle,
|
...child.itemStyle,
|
||||||
color: child.changesPercentage < 0 ? '#7F4650' : '#396550'
|
color: child.changesPercentage < 0 ? "#7F4650" : "#396550",
|
||||||
}
|
},
|
||||||
}))
|
|
||||||
})),
|
})),
|
||||||
}]
|
})),
|
||||||
};
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeIndex(indexName) {
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function changeIndex(indexName) {
|
|
||||||
displayIndex = indexName;
|
displayIndex = indexName;
|
||||||
}
|
}
|
||||||
|
|
||||||
function sectorSelector(sector) {
|
function sectorSelector(sector) {
|
||||||
let path;
|
let path;
|
||||||
switch(sector) {
|
switch (sector) {
|
||||||
case 'Financials':
|
case "Financials":
|
||||||
path = "financial-sector";
|
path = "financial-sector";
|
||||||
break;
|
break;
|
||||||
case 'Healthcare':
|
case "Healthcare":
|
||||||
path = "healthcare-sector";
|
path = "healthcare-sector";
|
||||||
break;
|
break;
|
||||||
case 'Information Technology':
|
case "Information Technology":
|
||||||
path = "technology-sector";
|
path = "technology-sector";
|
||||||
break;
|
break;
|
||||||
case 'Technology':
|
case "Technology":
|
||||||
path = "technology-sector";
|
path = "technology-sector";
|
||||||
break;
|
break;
|
||||||
case 'Financial Services':
|
case "Financial Services":
|
||||||
path = "financial-sector";
|
path = "financial-sector";
|
||||||
break;
|
break;
|
||||||
case 'Industrials':
|
case "Industrials":
|
||||||
path = "industrials-sector";
|
path = "industrials-sector";
|
||||||
break;
|
break;
|
||||||
case 'Energy':
|
case "Energy":
|
||||||
path = "energy-sector";
|
path = "energy-sector";
|
||||||
break;
|
break;
|
||||||
case 'Utilities':
|
case "Utilities":
|
||||||
path = "utilities-sector";
|
path = "utilities-sector";
|
||||||
break;
|
break;
|
||||||
case 'Consumer Cyclical':
|
case "Consumer Cyclical":
|
||||||
path = "consumer-cyclical-sector";
|
path = "consumer-cyclical-sector";
|
||||||
break;
|
break;
|
||||||
case 'Real Estate':
|
case "Real Estate":
|
||||||
path = "real-estate-sector";
|
path = "real-estate-sector";
|
||||||
break;
|
break;
|
||||||
case 'Basic Materials':
|
case "Basic Materials":
|
||||||
path = "basic-materials-sector";
|
path = "basic-materials-sector";
|
||||||
break;
|
break;
|
||||||
case 'Communication Services':
|
case "Communication Services":
|
||||||
path = "communication-services-sector";
|
path = "communication-services-sector";
|
||||||
break;
|
break;
|
||||||
case 'Consumer Defensive':
|
case "Consumer Defensive":
|
||||||
path = "consumer-defensive-sector";
|
path = "consumer-defensive-sector";
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
@ -241,21 +241,17 @@ function sectorSelector(sector) {
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
goto("list/" + path);
|
goto("list/" + path);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$: {
|
||||||
$: {
|
if (typeof window !== "undefined" && displayIndex) {
|
||||||
if(typeof window !== 'undefined' && displayIndex)
|
|
||||||
{
|
|
||||||
isLoaded = false;
|
isLoaded = false;
|
||||||
|
|
||||||
if(displayIndex === 'S&P500') {
|
if (displayIndex === "S&P500") {
|
||||||
rawData = data?.getSP500HeatMap;
|
rawData = data?.getSP500HeatMap;
|
||||||
}
|
} else if (displayIndex === "Dow Jones") {
|
||||||
else if (displayIndex === 'Dow Jones') {
|
|
||||||
rawData = data?.getDowJonesHeatMap;
|
rawData = data?.getDowJonesHeatMap;
|
||||||
}
|
} else if (displayIndex === "Nasdaq") {
|
||||||
else if (displayIndex === 'Nasdaq') {
|
|
||||||
rawData = data?.getNasdaqHeatMap;
|
rawData = data?.getNasdaqHeatMap;
|
||||||
}
|
}
|
||||||
const fontSize = $screenWidth < 640 ? 12 : 16;
|
const fontSize = $screenWidth < 640 ? 12 : 16;
|
||||||
@ -263,135 +259,185 @@ $: {
|
|||||||
|
|
||||||
isLoaded = true;
|
isLoaded = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
let charNumber = 40;
|
let charNumber = 40;
|
||||||
$: {
|
$: {
|
||||||
if ($screenWidth < 640)
|
if ($screenWidth < 640) {
|
||||||
{
|
|
||||||
charNumber = 20;
|
charNumber = 20;
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
charNumber = 40;
|
charNumber = 40;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- HEADER FOR BETTER SEO -->
|
<!-- HEADER FOR BETTER SEO -->
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Market Heatmaps · stocknear</title>
|
<title>
|
||||||
|
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Market
|
||||||
|
Heatmaps · stocknear</title
|
||||||
|
>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
<meta name="description" content="Stock Heatmaps of S&P500, Nasdaq and Dow Jones to see percentage changes of the return for different time periods">
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Stock Heatmaps of S&P500, Nasdaq and Dow Jones to see percentage changes of the return for different time periods"
|
||||||
|
/>
|
||||||
<!-- Other meta tags -->
|
<!-- Other meta tags -->
|
||||||
<meta property="og:title" content="Market Heatmaps · stocknear"/>
|
<meta property="og:title" content="Market Heatmaps · stocknear" />
|
||||||
<meta property="og:description" content="Stock Heatmaps of S&P500, Nasdaq and Dow Jones to see percentage changes of the return for different time periods">
|
<meta
|
||||||
<meta property="og:type" content="website"/>
|
property="og:description"
|
||||||
|
content="Stock Heatmaps of S&P500, Nasdaq and Dow Jones to see percentage changes of the return for different time periods"
|
||||||
|
/>
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
<!-- Add more Open Graph meta tags as needed -->
|
<!-- Add more Open Graph meta tags as needed -->
|
||||||
|
|
||||||
<!-- Twitter specific meta tags -->
|
<!-- Twitter specific meta tags -->
|
||||||
<meta name="twitter:card" content="summary_large_image"/>
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
<meta name="twitter:title" content="Market Heatmaps · stocknear"/>
|
<meta name="twitter:title" content="Market Heatmaps · stocknear" />
|
||||||
<meta name="twitter:description" content="Stock Heatmaps of S&P500, Nasdaq and Dow Jones to see percentage changes of the return for different time periods">
|
<meta
|
||||||
|
name="twitter:description"
|
||||||
|
content="Stock Heatmaps of S&P500, Nasdaq and Dow Jones to see percentage changes of the return for different time periods"
|
||||||
|
/>
|
||||||
<!-- Add more Twitter meta tags as needed -->
|
<!-- Add more Twitter meta tags as needed -->
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
|
<section
|
||||||
|
class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40"
|
||||||
|
>
|
||||||
<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
|
<div
|
||||||
|
class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
|
||||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
>
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||||
|
|
||||||
<!-- Start Column -->
|
<!-- Start Column -->
|
||||||
<div>
|
<div>
|
||||||
<div class="flex flex-row justify-center items-center">
|
<div class="flex flex-row justify-center items-center">
|
||||||
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5">
|
<h1
|
||||||
|
class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
|
||||||
|
>
|
||||||
Market Heatmaps
|
Market Heatmaps
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<span class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center ">
|
<span
|
||||||
|
class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center"
|
||||||
|
>
|
||||||
Latest market changes to never miss another bullish or bearish rally.
|
Latest market changes to never miss another bullish or bearish rally.
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- End Column -->
|
<!-- End Column -->
|
||||||
|
|
||||||
<!-- Start Column -->
|
<!-- Start Column -->
|
||||||
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
|
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
|
||||||
<svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
<svg
|
||||||
|
class="w-40 -my-5"
|
||||||
|
viewBox="0 0 200 200"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
<defs>
|
<defs>
|
||||||
<filter id="glow">
|
<filter id="glow">
|
||||||
<feGaussianBlur stdDeviation="5" result="glow"/>
|
<feGaussianBlur stdDeviation="5" result="glow" />
|
||||||
<feMerge>
|
<feMerge>
|
||||||
<feMergeNode in="glow"/>
|
<feMergeNode in="glow" />
|
||||||
<feMergeNode in="SourceGraphic"/>
|
<feMergeNode in="SourceGraphic" />
|
||||||
</feMerge>
|
</feMerge>
|
||||||
</filter>
|
</filter>
|
||||||
</defs>
|
</defs>
|
||||||
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" />
|
<path
|
||||||
|
fill="#1E40AF"
|
||||||
|
d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
|
||||||
|
transform="translate(100 100)"
|
||||||
|
filter="url(#glow)"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
|
|
||||||
<div class="z-1 absolute top-0 left-8">
|
<div class="z-1 absolute top-0 left-8">
|
||||||
<img class="w-32 h-fit" src={cloudFrontUrl+"/assets/heatmaps_logo.png"} alt="logo" loading="lazy">
|
<img
|
||||||
|
class="w-32 h-fit"
|
||||||
|
src={cloudFrontUrl + "/assets/heatmaps_logo.png"}
|
||||||
|
alt="logo"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- End Column -->
|
<!-- End Column -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<body class="w-full overflow-hidden m-auto">
|
<body class="w-full overflow-hidden m-auto">
|
||||||
|
|
||||||
|
|
||||||
{#if isLoaded}
|
{#if isLoaded}
|
||||||
|
|
||||||
|
|
||||||
<section class="w-full overflow-hidden m-auto">
|
<section class="w-full overflow-hidden m-auto">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="p-0 flex justify-center w-full m-auto overflow-hidden">
|
<div class="p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||||
<div class="relative flex justify-center items-center overflow-hidden w-full">
|
<div
|
||||||
|
class="relative flex justify-center items-center overflow-hidden w-full"
|
||||||
|
>
|
||||||
<main class="w-full">
|
<main class="w-full">
|
||||||
|
<div
|
||||||
|
class="w-full text-center sm:text-start sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5 mb-4"
|
||||||
|
>
|
||||||
<div class="w-full text-center sm:text-start sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5 mb-4 ">
|
<svg
|
||||||
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 256 256"
|
||||||
|
><path
|
||||||
|
fill="#FBCE3C"
|
||||||
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
|
/></svg
|
||||||
|
>
|
||||||
<span>
|
<span>
|
||||||
Today, <label on:click={() => sectorSelector(lowestAvgCategory)} class="cursor-pointer text-blue-400 sm:hover:text-white">{lowestAvgCategory}</label> took the lead as the {displayIndex} largest loser, marking a average return of <span class="text-white font-medium">{lowestAvg?.toFixed(2)}%</span>,
|
Today, <label
|
||||||
while <label on:click={() => sectorSelector(highestAvgCategory)} class="cursor-pointer text-blue-400 sm:hover:text-white">{highestAvgCategory}</label> surged ahead as the top performer with an impressive average return of <span class="text-white font-medium">{highestAvg?.toFixed(2)}%</span>.
|
on:click={() => sectorSelector(lowestAvgCategory)}
|
||||||
|
class="cursor-pointer text-blue-400 sm:hover:text-white"
|
||||||
|
>{lowestAvgCategory}</label
|
||||||
|
>
|
||||||
|
took the lead as the {displayIndex} largest loser, marking a average
|
||||||
|
return of
|
||||||
|
<span class="text-white font-medium"
|
||||||
|
>{lowestAvg?.toFixed(2)}%</span
|
||||||
|
>, while
|
||||||
|
<label
|
||||||
|
on:click={() => sectorSelector(highestAvgCategory)}
|
||||||
|
class="cursor-pointer text-blue-400 sm:hover:text-white"
|
||||||
|
>{highestAvgCategory}</label
|
||||||
|
>
|
||||||
|
surged ahead as the top performer with an impressive average
|
||||||
|
return of
|
||||||
|
<span class="text-white font-medium"
|
||||||
|
>{highestAvg?.toFixed(2)}%</span
|
||||||
|
>.
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="w-full pt-3">
|
<div class="w-full pt-3">
|
||||||
<div class="relative right-0 bg-[#09090B]">
|
<div class="relative right-0 bg-[#09090B]">
|
||||||
<ul class="relative w-fit flex flex-wrap px-2 list-none rounded-[3px]">
|
<ul
|
||||||
<li class="px-3 py-1.5 flex-auto text-center bg-[#2E3238] rounded-[3px]">
|
class="relative w-fit flex flex-wrap px-2 list-none rounded-[3px]"
|
||||||
<label for="indexModal" class="cursor-pointer border flex items-center justify-center w-full px-0 py-1 mb-0 border-0 rounded-[3px] bg-inherit">
|
>
|
||||||
|
<li
|
||||||
|
class="px-3 py-1.5 flex-auto text-center bg-[#2E3238] rounded-[3px]"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
for="indexModal"
|
||||||
|
class="cursor-pointer border flex items-center justify-center w-full px-0 py-1 mb-0 border-0 rounded-[3px] bg-inherit"
|
||||||
|
>
|
||||||
<span class="text-sm sm:text-md text-white ml-1">
|
<span class="text-sm sm:text-md text-white ml-1">
|
||||||
Market Index:
|
Market Index:
|
||||||
</span>
|
</span>
|
||||||
<span class="text-sm sm:text-md font-medium text-white ml-2 mr-2">
|
<span
|
||||||
|
class="text-sm sm:text-md font-medium text-white ml-2 mr-2"
|
||||||
|
>
|
||||||
{displayIndex}
|
{displayIndex}
|
||||||
</span>
|
</span>
|
||||||
<svg class="ml-auto sm:ml-0 mr-5 h-4 w-4 inline-block transform transition-transform mr-2 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="#fff" d="m488.832 344.32l-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872l319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z"/></svg>
|
<svg
|
||||||
|
class="ml-auto sm:ml-0 mr-5 h-4 w-4 inline-block transform transition-transform mr-2 rotate-180"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 1024 1024"
|
||||||
|
><path
|
||||||
|
fill="#fff"
|
||||||
|
d="m488.832 344.32l-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872l319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z"
|
||||||
|
/></svg
|
||||||
|
>
|
||||||
</label>
|
</label>
|
||||||
</li>
|
</li>
|
||||||
<!--
|
<!--
|
||||||
@ -408,20 +454,14 @@ $: {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="app w-full h-full mt-10">
|
<div class="app w-full h-full mt-10">
|
||||||
<Chart id="treemap" {init} options={options} class="chart w-full h-full" />
|
<Chart
|
||||||
|
id="treemap"
|
||||||
|
{init}
|
||||||
|
{options}
|
||||||
|
class="chart w-full h-full"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -429,172 +469,158 @@ $: {
|
|||||||
{:else}
|
{:else}
|
||||||
<div class="flex justify-center items-center h-80">
|
<div class="flex justify-center items-center h-80">
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<label class="bg-[#09090B] rounded-xl 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">
|
<label
|
||||||
<span class="loading loading-spinner loading-md text-gray-400"></span>
|
class="bg-[#09090B] rounded-xl 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>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!--Start IndexModal -->
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--Start IndexModal -->
|
|
||||||
<input type="checkbox" id="indexModal" class="modal-toggle" />
|
<input type="checkbox" id="indexModal" class="modal-toggle" />
|
||||||
<dialog id="indexModal" class="modal modal-bottom sm:modal-middle ">
|
<dialog id="indexModal" class="modal modal-bottom sm:modal-middle">
|
||||||
|
<label
|
||||||
|
id="indexModal"
|
||||||
|
for="indexModal"
|
||||||
|
class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.02] sm:bg-[#000] sm:bg-opacity-[0.5]"
|
||||||
|
></label>
|
||||||
|
|
||||||
|
<div
|
||||||
<label id="indexModal" for="indexModal" class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.02] sm:bg-[#000] sm:bg-opacity-[0.5]"></label>
|
class="modal-box w-full bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800"
|
||||||
|
>
|
||||||
|
<label
|
||||||
<div class="modal-box w-full bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800">
|
for="indexModal"
|
||||||
|
class="cursor-pointer absolute right-5 top-2 bg-[#000] sm:bg-[#09090B] text-[1.8rem] text-white"
|
||||||
|
>
|
||||||
|
|
||||||
<label for="indexModal" class="cursor-pointer absolute right-5 top-2 bg-[#000] sm:bg-[#09090B] text-[1.8rem] text-white">
|
|
||||||
✕
|
✕
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<div class="text-white">
|
<div class="text-white">
|
||||||
|
<h3 class="font-medium text-lg sm:text-xl mb-10">Market Index</h3>
|
||||||
|
|
||||||
<h3 class="font-medium text-lg sm:text-xl mb-10">
|
<div
|
||||||
Market Index
|
class="flex flex-col items-center w-full max-w-3xl bg-[#000] sm:bg-[#09090B]"
|
||||||
</h3>
|
>
|
||||||
|
<label
|
||||||
|
for="indexModal"
|
||||||
<div class="flex flex-col items-center w-full max-w-3xl bg-[#000] sm:bg-[#09090B]">
|
on:click={() => changeIndex("S&P500")}
|
||||||
|
class="cursor-pointer w-full flex flex-row justify-start items-center mb-5"
|
||||||
|
>
|
||||||
<label for="indexModal" on:click={() => changeIndex('S&P500')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
<div
|
||||||
|
class="flex flex-row items-center w-full bg-[#09090B] bg-opacity-[0.7] sm:bg-opacity-[1.0] sm:bg-[#303030] p-3 rounded-lg {displayIndex ===
|
||||||
<div class="flex flex-row items-center w-full bg-[#09090B] bg-opacity-[0.7] sm:bg-opacity-[1.0] sm:bg-[#303030] p-3 rounded-lg {displayIndex === 'S&P500' ? 'ring-2 ring-[#04E000]' : ''}">
|
'S&P500'
|
||||||
|
? 'ring-2 ring-[#04E000]'
|
||||||
<span class="ml-1 text-white font-medium mr-auto">
|
: ''}"
|
||||||
S&P500
|
>
|
||||||
</span>
|
<span class="ml-1 text-white font-medium mr-auto"> S&P500 </span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
<label
|
||||||
<label for="indexModal" on:click={() => changeIndex('Dow Jones')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
for="indexModal"
|
||||||
|
on:click={() => changeIndex("Dow Jones")}
|
||||||
<div class="flex flex-row items-center w-full bg-[#09090B] bg-opacity-[0.7] sm:bg-opacity-[1.0] sm:bg-[#303030] p-3 rounded-lg {displayIndex === 'Dow Jones' ? 'ring-2 ring-[#04E000]' : ''}">
|
class="cursor-pointer w-full flex flex-row justify-start items-center mb-5"
|
||||||
|
>
|
||||||
<span class="ml-1 text-white font-medium mr-auto">
|
<div
|
||||||
Dow Jones
|
class="flex flex-row items-center w-full bg-[#09090B] bg-opacity-[0.7] sm:bg-opacity-[1.0] sm:bg-[#303030] p-3 rounded-lg {displayIndex ===
|
||||||
</span>
|
'Dow Jones'
|
||||||
|
? 'ring-2 ring-[#04E000]'
|
||||||
|
: ''}"
|
||||||
|
>
|
||||||
|
<span class="ml-1 text-white font-medium mr-auto"> Dow Jones </span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label for="indexModal" on:click={() => changeIndex('Nasdaq')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
<label
|
||||||
|
for="indexModal"
|
||||||
<div class="flex flex-row items-center w-full bg-[#09090B] bg-opacity-[0.7] sm:bg-opacity-[1.0] sm:bg-[#303030] p-3 rounded-lg {displayIndex === 'Nasdaq' ? 'ring-2 ring-[#04E000]' : ''}">
|
on:click={() => changeIndex("Nasdaq")}
|
||||||
|
class="cursor-pointer w-full flex flex-row justify-start items-center mb-5"
|
||||||
<span class="ml-1 text-white font-medium mr-auto">
|
>
|
||||||
Nasdaq
|
<div
|
||||||
</span>
|
class="flex flex-row items-center w-full bg-[#09090B] bg-opacity-[0.7] sm:bg-opacity-[1.0] sm:bg-[#303030] p-3 rounded-lg {displayIndex ===
|
||||||
|
'Nasdaq'
|
||||||
|
? 'ring-2 ring-[#04E000]'
|
||||||
|
: ''}"
|
||||||
|
>
|
||||||
|
<span class="ml-1 text-white font-medium mr-auto"> Nasdaq </span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</dialog>
|
</dialog>
|
||||||
<!--End Index Modal-->
|
<!--End Index Modal-->
|
||||||
|
|
||||||
|
<!--Start Export -->
|
||||||
|
<input type="checkbox" id="exportDataModal" class="modal-toggle" />
|
||||||
|
<dialog id="exportDataModal" class="modal modal-bottom sm:modal-middle">
|
||||||
|
<label
|
||||||
|
id="exportDataModal"
|
||||||
|
for="exportDataModal"
|
||||||
|
class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.02] sm:bg-[#000] sm:bg-opacity-[0.5]"
|
||||||
|
></label>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="modal-box w-full bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800"
|
||||||
<!--Start Export -->
|
>
|
||||||
<input type="checkbox" id="exportDataModal" class="modal-toggle" />
|
<label
|
||||||
<dialog id="exportDataModal" class="modal modal-bottom sm:modal-middle ">
|
for="exportDataModal"
|
||||||
|
class="cursor-pointer absolute right-5 top-2 bg-[#000] sm:bg-[#09090B] text-[1.8rem] text-white"
|
||||||
|
>
|
||||||
<label id="exportDataModal" for="exportDataModal" class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.02] sm:bg-[#000] sm:bg-opacity-[0.5]"></label>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="modal-box w-full bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<label for="exportDataModal" class="cursor-pointer absolute right-5 top-2 bg-[#000] sm:bg-[#09090B] text-[1.8rem] text-white">
|
|
||||||
✕
|
✕
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<div class="text-white">
|
<div class="text-white">
|
||||||
|
<h3 class="font-medium text-lg sm:text-xl mb-10">Export</h3>
|
||||||
|
|
||||||
<h3 class="font-medium text-lg sm:text-xl mb-10">
|
<div
|
||||||
Export
|
class="flex flex-col items-center w-full max-w-3xl bg-[#000] sm:bg-[#09090B]"
|
||||||
</h3>
|
>
|
||||||
|
<label
|
||||||
|
for="exportDataModal"
|
||||||
<div class="flex flex-col items-center w-full max-w-3xl bg-[#000] sm:bg-[#09090B]">
|
on:click={() => exportTreemap()}
|
||||||
|
class="cursor-pointer w-full flex flex-row justify-start items-center mb-5"
|
||||||
|
>
|
||||||
<label for="exportDataModal" on:click={() => exportTreemap()} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
<div
|
||||||
|
class="flex flex-row items-center w-full bg-[#09090B] bg-opacity-[0.7] sm:bg-opacity-[1.0] sm:bg-[#303030] p-3 rounded-lg ring-2 ring-[#04E000]"
|
||||||
<div class="flex flex-row items-center w-full bg-[#09090B] bg-opacity-[0.7] sm:bg-opacity-[1.0] sm:bg-[#303030] p-3 rounded-lg ring-2 ring-[#04E000]">
|
>
|
||||||
|
|
||||||
<span class="ml-1 text-white font-medium mr-auto">
|
<span class="ml-1 text-white font-medium mr-auto">
|
||||||
Save as PNG
|
Save as PNG
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
<label
|
||||||
<label for="exportDataModal" class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
for="exportDataModal"
|
||||||
|
class="cursor-pointer w-full flex flex-row justify-start items-center mb-5"
|
||||||
<div class="flex flex-row items-center w-full bg-[#09090B] bg-opacity-[0.7] sm:bg-opacity-[1.0] sm:bg-[#303030] p-3 rounded-lg ring-2 ring-[#04E000]">
|
>
|
||||||
|
<div
|
||||||
|
class="flex flex-row items-center w-full bg-[#09090B] bg-opacity-[0.7] sm:bg-opacity-[1.0] sm:bg-[#303030] p-3 rounded-lg ring-2 ring-[#04E000]"
|
||||||
|
>
|
||||||
<span class="ml-1 text-white font-medium mr-auto">
|
<span class="ml-1 text-white font-medium mr-auto">
|
||||||
Save as JPG
|
Save as JPG
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</dialog>
|
</dialog>
|
||||||
<!--End Export-->
|
|
||||||
|
|
||||||
|
<!--End Export-->
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.app {
|
.app {
|
||||||
height: 1200px;
|
height: 1200px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.chart {
|
.chart {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -339,9 +339,7 @@
|
|||||||
|
|
||||||
async function getPerformancePlot() {
|
async function getPerformancePlot() {
|
||||||
// Initialize boughtList and soldList arrays
|
// Initialize boughtList and soldList arrays
|
||||||
const data = rawData?.summary
|
const data = rawData?.summary?.slice(0, 20)?.map((item) => ({
|
||||||
?.slice(0, 20)
|
|
||||||
?.map((item) => ({
|
|
||||||
date: item?.date,
|
date: item?.date,
|
||||||
performancePercentage: item?.performancePercentage,
|
performancePercentage: item?.performancePercentage,
|
||||||
}));
|
}));
|
||||||
@ -1715,7 +1713,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -70,7 +70,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -191,7 +191,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -53,7 +53,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -89,7 +89,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
@ -239,7 +239,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -48,7 +48,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -1,105 +1,129 @@
|
|||||||
<script lang='ts'>
|
<script lang="ts">
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from "$app/navigation";
|
||||||
import { screenWidth } from '$lib/store';
|
import { screenWidth } from "$lib/store";
|
||||||
import { abbreviateNumber} from '$lib/utils';
|
import { abbreviateNumber } from "$lib/utils";
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
let rawData = data?.getETFBitcoinList;
|
let rawData = data?.getETFBitcoinList;
|
||||||
|
|
||||||
const totalAssets = rawData?.reduce((total, etf) => total + etf?.totalAssets, 0);
|
const totalAssets = rawData?.reduce(
|
||||||
const avgExpenseRatio = rawData?.reduce(
|
(total, etf) => total + etf?.totalAssets,
|
||||||
(total, item) => total + item?.expenseRatio || 0,
|
0,
|
||||||
0
|
);
|
||||||
) / rawData?.length;
|
const avgExpenseRatio =
|
||||||
|
rawData?.reduce((total, item) => total + item?.expenseRatio || 0, 0) /
|
||||||
|
rawData?.length;
|
||||||
|
|
||||||
$: charNumber = $screenWidth < 640 ? 15 : 20;
|
$: charNumber = $screenWidth < 640 ? 15 : 20;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="w-full overflow-hidden m-auto">
|
<section class="w-full overflow-hidden m-auto">
|
||||||
|
<div
|
||||||
|
class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 256 256"
|
||||||
|
><path
|
||||||
|
fill="#FBCE3C"
|
||||||
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
|
/></svg
|
||||||
|
>
|
||||||
|
|
||||||
|
A list of all Bitcoin ETFs available for trading on the US stock market,
|
||||||
<div class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
offering investors exposure to the cryptocurrency's price.
|
||||||
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
|
||||||
|
|
||||||
A list of all Bitcoin ETFs available for trading on the US stock market, offering investors exposure to the cryptocurrency's price.
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal bg-[#27272A] shadow w-full rounded-lg">
|
<div class="stats stats-horizontal bg-[#27272A] shadow w-full rounded-lg">
|
||||||
|
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="stat-title text-sm sm:text-lg font-semibold text-white">Total ETFs</div>
|
<div class="stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
Total ETFs
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">
|
||||||
|
{rawData?.length}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Assets</div>
|
<div class="stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
<div class="stat-value text-lg font-semibold text-white">${abbreviateNumber(totalAssets)}</div>
|
Total Assets
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">
|
||||||
|
${abbreviateNumber(totalAssets)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="stat-title text-sm sm:text-lg font-semibold text-white">Avg. Cost</div>
|
<div class="stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
<div class="stat-value text-lg font-semibold text-white">{avgExpenseRatio?.toFixed(2)}%</div>
|
Avg. Cost
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">
|
||||||
|
{avgExpenseRatio?.toFixed(2)}%
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Page wrapper -->
|
<!-- Page wrapper -->
|
||||||
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Content area -->
|
<!-- Content area -->
|
||||||
<div class="w-full overflow-x-scroll">
|
<div class="w-full overflow-x-scroll">
|
||||||
|
<table
|
||||||
<table class="table rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
class="table rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
|
||||||
|
>
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="border border-slate-800">
|
<tr class="border border-slate-800">
|
||||||
<th class="text-white font-semibold text-[1rem]">Symbol</th>
|
<th class="text-white font-semibold text-[1rem]">Symbol</th>
|
||||||
<th class="text-white font-semibold text-[1rem] whitespace-nowrap">Fund Name</th>
|
<th class="text-white font-semibold text-[1rem] whitespace-nowrap"
|
||||||
<th class="text-white font-semibold text-end sm:text-start text-[1rem]">Assets</th>
|
>Fund Name</th
|
||||||
<th class="text-white font-semibold text-[1rem] text-end whitespace-nowrap">Expense Ratio</th>
|
>
|
||||||
|
<th
|
||||||
|
class="text-white font-semibold text-end sm:text-start text-[1rem]"
|
||||||
|
>Assets</th
|
||||||
|
>
|
||||||
|
<th
|
||||||
|
class="text-white font-semibold text-[1rem] text-end whitespace-nowrap"
|
||||||
|
>Expense Ratio</th
|
||||||
|
>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{#each rawData as item,index}
|
{#each rawData as item, index}
|
||||||
<!-- row -->
|
<!-- row -->
|
||||||
<tr on:click={() => goto("/etf/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
<tr
|
||||||
|
on:click={() => goto("/etf/" + item?.symbol)}
|
||||||
|
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
|
||||||
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
>
|
||||||
|
<td
|
||||||
|
class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
|
||||||
|
>
|
||||||
{item?.symbol}
|
{item?.symbol}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
|
||||||
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
>
|
||||||
|
{item?.name?.length > charNumber
|
||||||
|
? item?.name?.slice(0, charNumber) + "..."
|
||||||
|
: item?.name}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-end sm:text-start text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
<td
|
||||||
|
class="text-white font-medium text-end sm:text-start text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
|
||||||
|
>
|
||||||
{abbreviateNumber(item?.totalAssets, true)}
|
{abbreviateNumber(item?.totalAssets, true)}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-end text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
<td
|
||||||
|
class="text-white font-medium text-end text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
|
||||||
|
>
|
||||||
{item?.expenseRatio}%
|
{item?.expenseRatio}%
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
|
|
||||||
{/each}
|
{/each}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -48,7 +48,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -48,7 +48,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -1,13 +1,12 @@
|
|||||||
<script lang='ts'>
|
<script lang="ts">
|
||||||
import { screenWidth } from '$lib/store';
|
import { screenWidth } from "$lib/store";
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from "svelte";
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
let rawData = data?.getDelistedStocks;
|
let rawData = data?.getDelistedStocks;
|
||||||
let marketCapList = rawData?.slice(0,50);
|
let marketCapList = rawData?.slice(0, 50);
|
||||||
|
|
||||||
|
async function handleScroll() {
|
||||||
async function handleScroll() {
|
|
||||||
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||||
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
||||||
if (isBottom && marketCapList?.length !== rawData?.length) {
|
if (isBottom && marketCapList?.length !== rawData?.length) {
|
||||||
@ -18,118 +17,134 @@ async function handleScroll() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
window.addEventListener('scroll', handleScroll);
|
window.addEventListener("scroll", handleScroll);
|
||||||
return () => {
|
return () => {
|
||||||
window.removeEventListener('scroll', handleScroll);
|
window.removeEventListener("scroll", handleScroll);
|
||||||
};
|
};
|
||||||
})
|
});
|
||||||
let charNumber = 40;
|
let charNumber = 40;
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
if ($screenWidth < 640)
|
if ($screenWidth < 640) {
|
||||||
{
|
|
||||||
charNumber = 15;
|
charNumber = 15;
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
charNumber = 40;
|
charNumber = 40;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="w-full overflow-hidden m-auto">
|
<section class="w-full overflow-hidden m-auto">
|
||||||
|
<div
|
||||||
|
class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"
|
||||||
<div class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
>
|
||||||
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
<svg
|
||||||
|
class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
|
||||||
A list of companies delisted from the exchange and no longer publicly traded.
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 256 256"
|
||||||
|
><path
|
||||||
|
fill="#FBCE3C"
|
||||||
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
|
/></svg
|
||||||
|
>
|
||||||
|
|
||||||
|
A list of companies delisted from the exchange and no longer publicly
|
||||||
|
traded.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
|
<div
|
||||||
|
class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg"
|
||||||
|
>
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
|
<div class="stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
Total Stocks
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">
|
||||||
|
{rawData?.length}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Market Cap</div>
|
<div class="stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Total Market Cap
|
||||||
|
</div>
|
||||||
<div class="stat-value text-lg font-semibold text-white">---</div>
|
<div class="stat-value text-lg font-semibold text-white">---</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Revenue</div>
|
<div class="stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Total Revenue
|
||||||
|
</div>
|
||||||
<div class="stat-value text-lg font-semibold text-white">---</div>
|
<div class="stat-value text-lg font-semibold text-white">---</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Page wrapper -->
|
<!-- Page wrapper -->
|
||||||
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Content area -->
|
<!-- Content area -->
|
||||||
<div class="w-full overflow-x-scroll">
|
<div class="w-full overflow-x-scroll">
|
||||||
|
<table class="table rounded-none sm:rounded-md w-full m-auto mt-4">
|
||||||
|
|
||||||
|
|
||||||
<table class="table rounded-none sm:rounded-md w-full m-auto mt-4 ">
|
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="border border-slate-800">
|
<tr class="border border-slate-800">
|
||||||
<th class="text-white font-semibold text-[1rem]">Symbol</th>
|
<th class="text-white font-semibold text-[1rem]">Symbol</th>
|
||||||
<th class="text-white font-semibold text-[1rem]">Company</th>
|
<th class="text-white font-semibold text-[1rem]">Company</th>
|
||||||
<th class="text-white font-semibold text-[1rem]">IPO</th>
|
<th class="text-white font-semibold text-[1rem]">IPO</th>
|
||||||
<th class="text-white font-semibold text-center text-[1rem]">Exchange</th>
|
<th class="text-white font-semibold text-center text-[1rem]"
|
||||||
<th class="text-white font-semibold text-[1rem] text-end">Delisted</th>
|
>Exchange</th
|
||||||
|
>
|
||||||
|
<th class="text-white font-semibold text-[1rem] text-end"
|
||||||
|
>Delisted</th
|
||||||
|
>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{#each marketCapList as item,index}
|
{#each marketCapList as item, index}
|
||||||
<!-- row -->
|
<!-- row -->
|
||||||
<tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
|
<tr
|
||||||
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
|
||||||
|
>
|
||||||
{item?.symbol}
|
{item?.symbol}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
|
||||||
{item?.companyName?.length > charNumber ? item?.companyName?.slice(0,charNumber) + "..." : item?.companyName}
|
>
|
||||||
|
{item?.companyName?.length > charNumber
|
||||||
|
? item?.companyName?.slice(0, charNumber) + "..."
|
||||||
|
: item?.companyName}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
<td
|
||||||
{new Date(item?.ipoDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
|
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
|
||||||
|
>
|
||||||
|
{new Date(item?.ipoDate).toLocaleDateString("en-US", {
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
year: "numeric",
|
||||||
|
})}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-center border-b-[#09090B]">
|
<td
|
||||||
|
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-center border-b-[#09090B]"
|
||||||
|
>
|
||||||
{item?.exchange}
|
{item?.exchange}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
|
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
|
||||||
{new Date(item?.delistedDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
|
>
|
||||||
|
{new Date(item?.delistedDate).toLocaleDateString("en-US", {
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
year: "numeric",
|
||||||
|
})}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
|
|
||||||
{/each}
|
{/each}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -36,7 +36,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -36,7 +36,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -48,7 +48,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -48,7 +48,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -48,7 +48,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -126,7 +126,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -150,7 +150,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -48,7 +48,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -48,7 +48,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -30,7 +30,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -48,7 +48,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -48,7 +48,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -48,7 +48,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -36,7 +36,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -48,7 +48,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -48,7 +48,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -48,7 +48,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -164,7 +164,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -2219,7 +2219,7 @@ function sendMessage(message) {
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -180,7 +180,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -3053,7 +3053,7 @@ const handleKeyDown = (event) => {
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -518,7 +518,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -743,7 +743,7 @@ function handleTypeOfTrade(state:string)
|
|||||||
|
|
||||||
<!--<div class="w-full max-w-3xl sm:max-w-2xl m-auto pt-2 pb-5 sm:pl-3 sticky z-20 bg-[#09090B]" style="top: {$screenWidth < 520 && $isScrollingUp ? '4rem' : '0rem'};">-->
|
<!--<div class="w-full max-w-3xl sm:max-w-2xl m-auto pt-2 pb-5 sm:pl-3 sticky z-20 bg-[#09090B]" style="top: {$screenWidth < 520 && $isScrollingUp ? '4rem' : '0rem'};">-->
|
||||||
<nav
|
<nav
|
||||||
class="sm:ml-4 border-b-[2px] overflow-x-scroll whitespace-nowrap"
|
class="sm:ml-4 border-b-[2px] overflow-x-scroll md:overflow-hidden whitespace-nowrap"
|
||||||
>
|
>
|
||||||
<ul
|
<ul
|
||||||
class="flex flex-row items-center w-full text-sm sm:text-[1rem] text-white"
|
class="flex flex-row items-center w-full text-sm sm:text-[1rem] text-white"
|
||||||
|
|||||||
@ -151,7 +151,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -54,7 +54,7 @@
|
|||||||
<main class="w-full {$coolMode ? 'lg:w-3/4' : 'w-full'} ">
|
<main class="w-full {$coolMode ? 'lg:w-3/4' : 'w-full'} ">
|
||||||
<div class="m-auto">
|
<div class="m-auto">
|
||||||
<nav
|
<nav
|
||||||
class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
|
class="sm:ml-4 pt-1 overflow-x-scroll md:overflow-hidden text-sm sm:text-[1rem] whitespace-nowrap"
|
||||||
>
|
>
|
||||||
<ul class="flex flex-row items-center w-full text-white">
|
<ul class="flex flex-row items-center w-full text-white">
|
||||||
<a
|
<a
|
||||||
|
|||||||
@ -396,7 +396,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -481,7 +481,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -424,7 +424,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -388,7 +388,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -918,7 +918,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -439,7 +439,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -78,7 +78,7 @@
|
|||||||
>
|
>
|
||||||
<main class="w-full lg:w-3/4">
|
<main class="w-full lg:w-3/4">
|
||||||
<nav
|
<nav
|
||||||
class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
|
class="sm:ml-4 pt-1 overflow-x-scroll md:overflow-hidden text-sm sm:text-[1rem] whitespace-nowrap"
|
||||||
>
|
>
|
||||||
<ul class="flex flex-row items-center w-full text-white">
|
<ul class="flex flex-row items-center w-full text-white">
|
||||||
<a
|
<a
|
||||||
|
|||||||
@ -279,7 +279,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -258,7 +258,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -577,7 +577,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
@ -714,7 +714,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
@ -1119,7 +1119,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
@ -377,7 +377,7 @@
|
|||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
@ -411,7 +411,7 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 256 256"
|
viewBox="0 0 256 256"
|
||||||
><path
|
><path
|
||||||
fill="#a474f6"
|
fill="#FBCE3C"
|
||||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user