ui fixes
This commit is contained in:
MuslemRahimi
parent
57b6a10e8d
commit
5e181e1b07
@ -1,12 +1,12 @@
|
||||
<script lang='ts'>
|
||||
<script lang="ts">
|
||||
import { stockTicker, displayCompanyName } from "$lib/store";
|
||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||
import InfoModal from "$lib/components/InfoModal.svelte";
|
||||
|
||||
export let data;
|
||||
|
||||
let rawData = {};
|
||||
|
||||
function latestInfoDate(inputDate) {
|
||||
function latestInfoDate(inputDate) {
|
||||
// Convert the input date string to milliseconds since epoch
|
||||
const inputDateMs = Date?.parse(inputDate);
|
||||
|
||||
@ -17,63 +17,64 @@ function latestInfoDate(inputDate) {
|
||||
const differenceInMs = todayMs - inputDateMs;
|
||||
|
||||
// Convert milliseconds to days
|
||||
const differenceInDays = Math?.floor(differenceInMs / (1000 * 60 * 60 * 24));
|
||||
const differenceInDays = Math?.floor(
|
||||
differenceInMs / (1000 * 60 * 60 * 24),
|
||||
);
|
||||
|
||||
// Return the difference in days
|
||||
return differenceInDays <=1;
|
||||
}
|
||||
|
||||
return differenceInDays <= 1;
|
||||
}
|
||||
|
||||
function handleMode(i) {
|
||||
activeIdx = i;
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
title: "Bull Case",
|
||||
},
|
||||
{
|
||||
title: "Bear Case",
|
||||
},
|
||||
];
|
||||
{
|
||||
title: "Bull Case",
|
||||
},
|
||||
{
|
||||
title: "Bear Case",
|
||||
},
|
||||
];
|
||||
|
||||
let activeIdx = 0;
|
||||
let activeIdx = 0;
|
||||
|
||||
$: {
|
||||
if($stockTicker && typeof window !== 'undefined') {
|
||||
rawData = data?.getBullBearSay;
|
||||
activeIdx = 0;
|
||||
}
|
||||
if ($stockTicker && typeof window !== "undefined") {
|
||||
rawData = data?.getBullBearSay;
|
||||
activeIdx = 0;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
{#if Object?.keys(rawData)?.length !== 0}
|
||||
|
||||
{#if Object?.keys(rawData)?.length !== 0}
|
||||
<div class="space-y-3 overflow-hidden">
|
||||
<!--Start Content-->
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto">
|
||||
|
||||
<div class="flex flex-col items-center w-full mb-6">
|
||||
<div class="flex flex-row justify-start mr-auto items-center">
|
||||
<!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
|
||||
<div class="flex flex-row items-center">
|
||||
<label for="bullBearCase" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
|
||||
Bull Case vs Bear Case
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Bull Case vs Bear Case"}
|
||||
content={`Before investing, examine both perspectives. We offer brief analyst report summaries, highlighting both positive ("Bulls Say") and negative ("Bears Say") viewpoints on ${$displayCompanyName}`}
|
||||
id={"bullBearCase"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Start Content-->
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto">
|
||||
<div class="flex flex-col items-center w-full mb-6">
|
||||
<div class="flex flex-row justify-start mr-auto items-center">
|
||||
<!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
|
||||
<div class="flex flex-row items-center">
|
||||
<label
|
||||
for="bullBearCase"
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
|
||||
>
|
||||
Bull Case vs Bear Case
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Bull Case vs Bear Case"}
|
||||
content={`Before investing, examine both perspectives. We offer brief analyst report summaries, highlighting both positive ("Bulls Say") and negative ("Bears Say") viewpoints on ${$displayCompanyName}`}
|
||||
id={"bullBearCase"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Start Header-->
|
||||
<div class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-lg p-1 -mt-2">
|
||||
<!--Start Header-->
|
||||
<div
|
||||
class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-lg p-1 -mt-2"
|
||||
>
|
||||
{#each tabs as item, i}
|
||||
<button
|
||||
on:click={() => handleMode(i)}
|
||||
@ -82,49 +83,73 @@ function latestInfoDate(inputDate) {
|
||||
: ''} "
|
||||
>
|
||||
{#if activeIdx === i}
|
||||
<div
|
||||
class="absolute inset-0 rounded-lg bg-purple-600"
|
||||
></div>
|
||||
<div class="absolute inset-0 rounded-lg bg-purple-600"></div>
|
||||
{/if}
|
||||
<span
|
||||
class="relative text-sm block font-medium duration-200 text-white">
|
||||
{item.title}
|
||||
<svg class="{data?.user?.tier !== 'Pro' && i ===1 ? '' : 'hidden'} inline-block ml-1 -mt-0.5 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"/></svg>
|
||||
class="relative text-sm block font-medium duration-200 text-white"
|
||||
>
|
||||
{item.title}
|
||||
<svg
|
||||
class="{data?.user?.tier !== 'Pro' && i === 1
|
||||
? ''
|
||||
: 'hidden'} inline-block ml-1 -mt-0.5 w-3.5 h-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="#A3A3A3"
|
||||
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
||||
/></svg
|
||||
>
|
||||
</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--End Header-->
|
||||
<span class="text-gray-200 text-xs sm:text-[0.915rem] italic mt-6 sm:ml-auto">
|
||||
<label class="{latestInfoDate(rawData?.date) ? '' : 'hidden'} bg-purple-600 mr-2 text-white font-medium not-italic text-xs rounded-lg px-2 py-0.5">New</label>
|
||||
<!--End Header-->
|
||||
<span
|
||||
class="text-gray-200 text-xs sm:text-[0.915rem] italic mt-6 sm:ml-auto"
|
||||
>
|
||||
<label
|
||||
class="{latestInfoDate(rawData?.date)
|
||||
? ''
|
||||
: 'hidden'} bg-purple-600 mr-2 text-white font-medium not-italic text-xs rounded-lg px-2 py-0.5"
|
||||
>New</label
|
||||
>
|
||||
Updated {rawData?.date}
|
||||
</span>
|
||||
<div class="flex mt-5 h-auto">
|
||||
|
||||
<div class="{activeIdx === 0 ? 'bg-[#37C97D]' : 'bg-[#FF2F1F]'} w-full max-w-[3px] rounded-l-xl" />
|
||||
<div
|
||||
class="{activeIdx === 0
|
||||
? 'bg-[#37C97D]'
|
||||
: 'bg-[#FF2F1F]'} w-full max-w-[3px] rounded-l-xl"
|
||||
/>
|
||||
<span class="text-gray-100 ml-3 text-[1rem] w-full">
|
||||
{#if activeIdx === 0}
|
||||
<p class="pr-1">{rawData?.bullSays}</p>
|
||||
{:else}
|
||||
|
||||
{#if data?.user?.tier === 'Pro'}
|
||||
<p class="pr-1">{rawData?.bullSays}</p>
|
||||
{:else if data?.user?.tier === "Pro"}
|
||||
<p class="pr-1">{rawData?.bearSays}</p>
|
||||
{:else}
|
||||
<div class="shadow-lg shadow-bg-[#000] bg-[#111112] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
|
||||
<svg class="mr-1.5 w-5 h-5 inline-block"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"/></svg>
|
||||
Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
|
||||
{:else}
|
||||
<div
|
||||
class="shadow-lg shadow-bg-[#000] bg-[#111112] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold"
|
||||
>
|
||||
<svg
|
||||
class="mr-1.5 w-5 h-5 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="#A3A3A3"
|
||||
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
||||
/></svg
|
||||
>
|
||||
Unlock content with
|
||||
<a
|
||||
class="inline-block ml-2 text-blue-400 hover:sm:text-white"
|
||||
href="/pricing">Pro Subscription</a
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
<script lang='ts'>
|
||||
import { stockTicker, displayCompanyName } from "$lib/store";
|
||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
export let data;
|
||||
<script lang="ts">
|
||||
import { stockTicker, displayCompanyName } from "$lib/store";
|
||||
import InfoModal from "$lib/components/InfoModal.svelte";
|
||||
export let data;
|
||||
|
||||
let rawData = {};
|
||||
let rawData = {};
|
||||
|
||||
function latestInfoDate(inputDate) {
|
||||
function latestInfoDate(inputDate) {
|
||||
// Convert the input date string to milliseconds since epoch
|
||||
const inputDateMs = Date?.parse(inputDate);
|
||||
|
||||
@ -17,69 +16,116 @@ function latestInfoDate(inputDate) {
|
||||
const differenceInMs = todayMs - inputDateMs;
|
||||
|
||||
// Convert milliseconds to days
|
||||
const differenceInDays = Math?.floor(differenceInMs / (1000 * 60 * 60 * 24));
|
||||
const differenceInDays = Math?.floor(
|
||||
differenceInMs / (1000 * 60 * 60 * 24),
|
||||
);
|
||||
|
||||
// Return the difference in days
|
||||
return differenceInDays <=1;
|
||||
}
|
||||
return differenceInDays <= 1;
|
||||
}
|
||||
|
||||
|
||||
$: {
|
||||
if($stockTicker && typeof window !== 'undefined') {
|
||||
rawData = data?.getDividendAnnouncement;
|
||||
$: {
|
||||
if ($stockTicker && typeof window !== "undefined") {
|
||||
rawData = data?.getDividendAnnouncement;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
{#if Object?.keys(rawData)?.length !== 0}
|
||||
|
||||
<div class="overflow-hidden">
|
||||
<div class="overflow-hidden">
|
||||
<!--Start Content-->
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto">
|
||||
<div class="flex flex-col items-center w-full mb-3">
|
||||
<div class="flex flex-row justify-start mr-auto items-center">
|
||||
<!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
|
||||
<div class="flex flex-row items-center">
|
||||
<label
|
||||
for="dividendAnnouncement"
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
|
||||
>
|
||||
Dividend Announcement
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Dividend Announcement"}
|
||||
content={`Dividend announcements are company declarations of cash or stock distributions to shareholders, usually reflecting profit and providing investment returns.`}
|
||||
id={"dividendAnnouncement"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center w-full mb-3">
|
||||
<div class="flex flex-row justify-start mr-auto items-center">
|
||||
<!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
|
||||
<div class="flex flex-row items-center">
|
||||
<label for="dividendAnnouncement" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
|
||||
Dividend Announcement
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Dividend Announcement"}
|
||||
content={`Dividend announcements are company declarations of cash or stock distributions to shareholders, usually reflecting profit and providing investment returns.`}
|
||||
id={"dividendAnnouncement"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div
|
||||
class="text-white text-[1rem] {latestInfoDate(rawData?.date)
|
||||
? 'bg-[#F9AB00] bg-opacity-[0.1] p-3 rounded-lg'
|
||||
: 'bg-[#09090B] pl-1'} "
|
||||
>
|
||||
<div class="mt-1">
|
||||
{$displayCompanyName} has announced its upcoming dividend details on {new Date(
|
||||
rawData?.date,
|
||||
)?.toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
daySuffix: "2-digit",
|
||||
})}:
|
||||
</div>
|
||||
|
||||
<div class="text-white text-[1rem] {latestInfoDate(rawData?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1] p-3 rounded-lg' : 'bg-[#09090B] pl-1'} ">
|
||||
<div class="mt-1">{$displayCompanyName} has announced its upcoming dividend details on {new Date(rawData?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}:</div>
|
||||
|
||||
<li class="ml-[20px] sm:ml-[30px]" style="color: #fff; line-height: 22px; margin-top:20px; margin-bottom: 15px; list-style-type: disc;">
|
||||
<span class="font-bold">Dividend:</span> ${rawData?.dividend} per share ({(rawData?.dividend/rawData?.dividendPrior-1) > 0 ? '+' :''}{((rawData?.dividend/rawData?.dividendPrior-1)*100)?.toFixed(2)}% YoY)
|
||||
</li>
|
||||
<li class="ml-[20px] sm:ml-[30px]" style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;">
|
||||
<span class="font-bold">Dividend Yield:</span> {rawData?.dividendYield?.toFixed(2)}%
|
||||
</li>
|
||||
<li class="ml-[20px] sm:ml-[30px]" style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;">
|
||||
<span class="font-bold">Ex-Dividend Date:</span> {new Date(rawData?.exDividendDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||
</li>
|
||||
|
||||
<li class="ml-[20px] sm:ml-[30px]" style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;">
|
||||
<span class="font-bold">Payable Date:</span> {new Date(rawData?.payableDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||
</li>
|
||||
|
||||
<li class="ml-[20px] sm:ml-[30px]" style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;">
|
||||
<span class="font-bold">Record Date:</span> {new Date(rawData?.recordDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||
</li>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<li
|
||||
class="ml-[20px] sm:ml-[30px]"
|
||||
style="color: #fff; line-height: 22px; margin-top:20px; margin-bottom: 15px; list-style-type: disc;"
|
||||
>
|
||||
<span class="font-bold">Dividend:</span> ${rawData?.dividend} per share
|
||||
({rawData?.dividend / rawData?.dividendPrior - 1 > 0 ? "+" : ""}{(
|
||||
(rawData?.dividend / rawData?.dividendPrior - 1) *
|
||||
100
|
||||
)?.toFixed(2)}% YoY)
|
||||
</li>
|
||||
<li
|
||||
class="ml-[20px] sm:ml-[30px]"
|
||||
style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;"
|
||||
>
|
||||
<span class="font-bold">Dividend Yield:</span>
|
||||
{rawData?.dividendYield?.toFixed(2)}%
|
||||
</li>
|
||||
<li
|
||||
class="ml-[20px] sm:ml-[30px]"
|
||||
style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;"
|
||||
>
|
||||
<span class="font-bold">Ex-Dividend Date:</span>
|
||||
{new Date(rawData?.exDividendDate)?.toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
daySuffix: "2-digit",
|
||||
})}
|
||||
</li>
|
||||
|
||||
<li
|
||||
class="ml-[20px] sm:ml-[30px]"
|
||||
style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;"
|
||||
>
|
||||
<span class="font-bold">Payable Date:</span>
|
||||
{new Date(rawData?.payableDate)?.toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
daySuffix: "2-digit",
|
||||
})}
|
||||
</li>
|
||||
|
||||
<li
|
||||
class="ml-[20px] sm:ml-[30px]"
|
||||
style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;"
|
||||
>
|
||||
<span class="font-bold">Record Date:</span>
|
||||
{new Date(rawData?.recordDate)?.toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
daySuffix: "2-digit",
|
||||
})}
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@ -1,12 +1,12 @@
|
||||
<script lang='ts'>
|
||||
import { stockTicker, displayCompanyName } from "$lib/store";
|
||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
export let data;
|
||||
<script lang="ts">
|
||||
import { stockTicker, displayCompanyName } from "$lib/store";
|
||||
import InfoModal from "$lib/components/InfoModal.svelte";
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
export let data;
|
||||
|
||||
let rawData = {};
|
||||
let rawData = {};
|
||||
|
||||
function latestInfoDate(inputDate) {
|
||||
function latestInfoDate(inputDate) {
|
||||
// Convert the input date string to milliseconds since epoch
|
||||
const inputDateMs = Date?.parse(inputDate);
|
||||
|
||||
@ -17,58 +17,100 @@ function latestInfoDate(inputDate) {
|
||||
const differenceInMs = todayMs - inputDateMs;
|
||||
|
||||
// Convert milliseconds to days
|
||||
const differenceInDays = Math?.floor(differenceInMs / (1000 * 60 * 60 * 24));
|
||||
const differenceInDays = Math?.floor(
|
||||
differenceInMs / (1000 * 60 * 60 * 24),
|
||||
);
|
||||
|
||||
// Return the difference in days
|
||||
return differenceInDays <=1;
|
||||
}
|
||||
return differenceInDays <= 1;
|
||||
}
|
||||
|
||||
|
||||
$: {
|
||||
if($stockTicker && typeof window !== 'undefined') {
|
||||
rawData = data?.getEarningsSurprise;
|
||||
$: {
|
||||
if ($stockTicker && typeof window !== "undefined") {
|
||||
rawData = data?.getEarningsSurprise;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
{#if Object?.keys(rawData)?.length !== 0}
|
||||
|
||||
<div class="space-y-3 overflow-hidden">
|
||||
<div class="space-y-3 overflow-hidden">
|
||||
<!--Start Content-->
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto">
|
||||
<div class="flex flex-col items-center w-full mb-3">
|
||||
<div class="flex flex-row justify-start mr-auto items-center">
|
||||
<!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
|
||||
<div class="flex flex-row items-center">
|
||||
<label
|
||||
for="earningsSurprise"
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
|
||||
>
|
||||
Earnings Surprise
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Earnings Surprise"}
|
||||
content={`The earnings surprise is when a company's actual EPS differs from analysts' forecasts. Positive surprises boost stock prices; negative ones can lower them.`}
|
||||
id={"earningsSurprise"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center w-full mb-3">
|
||||
<div class="flex flex-row justify-start mr-auto items-center">
|
||||
<!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
|
||||
<div class="flex flex-row items-center">
|
||||
<label for="earningsSurprise" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
|
||||
Earnings Surprise
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Earnings Surprise"}
|
||||
content={`The earnings surprise is when a company's actual EPS differs from analysts' forecasts. Positive surprises boost stock prices; negative ones can lower them.`}
|
||||
id={"earningsSurprise"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-white text-[1rem] {latestInfoDate(rawData?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1] p-3 rounded-lg' : 'bg-[#09090B] pl-1'} ">
|
||||
<div class="mt-1">{$displayCompanyName} has released their quartely earnings on {new Date(rawData?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}:</div>
|
||||
|
||||
<li class="ml-[20px] sm:ml-[30px]" style="color: #fff; line-height: 22px; margin-top:20px; margin-bottom: 15px; list-style-type: disc;">
|
||||
Revenue of <strong>{abbreviateNumber(rawData?.revenue,true)}</strong> {rawData?.revenueSurprise > 0 ? 'exceeds' : 'misses'} estimates by {abbreviateNumber(Math.abs(rawData?.revenueSurprise),true)}, with <strong>{((rawData?.revenue/rawData?.revenuePrior-1)*100)?.toFixed(2)}%</strong> YoY {(rawData?.revenue/rawData?.revenuePrior-1) < 0 ? 'decline' : 'growth'}.
|
||||
</li>
|
||||
<li class="ml-[20px] sm:ml-[30px]" style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;">
|
||||
EPS of <strong>${rawData?.eps}</strong> {rawData?.epsSurprise > 0 ? 'exceeds' : 'misses'} estimates by ${rawData?.epsSurprise?.toFixed(2)}, with <strong>{(((rawData?.eps - rawData?.epsPrior) / Math.abs(rawData?.epsPrior)) * 100)?.toFixed(2)}%</strong> YoY {((rawData?.eps - rawData?.epsPrior) / Math.abs(rawData?.epsPrior)) < 0 ? 'decline' : 'growth'}.
|
||||
</li>
|
||||
<div
|
||||
class="text-white text-[1rem] {latestInfoDate(rawData?.date)
|
||||
? 'bg-[#F9AB00] bg-opacity-[0.1] p-3 rounded-lg'
|
||||
: 'bg-[#09090B] pl-1'} "
|
||||
>
|
||||
<div class="mt-1">
|
||||
{$displayCompanyName} has released their quartely earnings on {new Date(
|
||||
rawData?.date,
|
||||
)?.toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
daySuffix: "2-digit",
|
||||
})}:
|
||||
</div>
|
||||
|
||||
<li
|
||||
class="ml-[20px] sm:ml-[30px]"
|
||||
style="color: #fff; line-height: 22px; margin-top:20px; margin-bottom: 15px; list-style-type: disc;"
|
||||
>
|
||||
Revenue of <strong>{abbreviateNumber(rawData?.revenue, true)}</strong>
|
||||
{rawData?.revenueSurprise > 0 ? "exceeds" : "misses"} estimates by {abbreviateNumber(
|
||||
Math.abs(rawData?.revenueSurprise),
|
||||
true,
|
||||
)}, with
|
||||
<strong
|
||||
>{((rawData?.revenue / rawData?.revenuePrior - 1) * 100)?.toFixed(
|
||||
2,
|
||||
)}%</strong
|
||||
>
|
||||
YoY {rawData?.revenue / rawData?.revenuePrior - 1 < 0
|
||||
? "decline"
|
||||
: "growth"}.
|
||||
</li>
|
||||
<li
|
||||
class="ml-[20px] sm:ml-[30px]"
|
||||
style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;"
|
||||
>
|
||||
EPS of <strong>${rawData?.eps}</strong>
|
||||
{rawData?.epsSurprise > 0 ? "exceeds" : "misses"} estimates by ${rawData?.epsSurprise?.toFixed(
|
||||
2,
|
||||
)}, with
|
||||
<strong
|
||||
>{(
|
||||
((rawData?.eps - rawData?.epsPrior) /
|
||||
Math.abs(rawData?.epsPrior)) *
|
||||
100
|
||||
)?.toFixed(2)}%</strong
|
||||
>
|
||||
YoY {(rawData?.eps - rawData?.epsPrior) /
|
||||
Math.abs(rawData?.epsPrior) <
|
||||
0
|
||||
? "decline"
|
||||
: "growth"}.
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@ -72,7 +72,7 @@
|
||||
<!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
|
||||
<div class="flex flex-row items-center">
|
||||
<label
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold"
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
|
||||
>
|
||||
News
|
||||
</label>
|
||||
|
||||
@ -1,81 +1,87 @@
|
||||
<script lang='ts'>
|
||||
import { stockTicker, displayCompanyName } from "$lib/store";
|
||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
export let data;
|
||||
<script lang="ts">
|
||||
import { stockTicker, displayCompanyName } from "$lib/store";
|
||||
import InfoModal from "$lib/components/InfoModal.svelte";
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
export let data;
|
||||
|
||||
let rawData = {};
|
||||
let revenueRatio = 0;
|
||||
let epsRatio = 0;
|
||||
let rawData = {};
|
||||
let revenueRatio = 0;
|
||||
let epsRatio = 0;
|
||||
|
||||
function compareTimes(time1, time2) {
|
||||
const [hours1, minutes1] = time1?.split(':').map(Number);
|
||||
const [hours2, minutes2] = time2?.split(':').map(Number);
|
||||
function compareTimes(time1, time2) {
|
||||
const [hours1, minutes1] = time1?.split(":").map(Number);
|
||||
const [hours2, minutes2] = time2?.split(":").map(Number);
|
||||
|
||||
if (hours1 > hours2) return 1;
|
||||
if (hours1 < hours2) return -1;
|
||||
if (minutes1 > minutes2) return 1;
|
||||
if (minutes1 < minutes2) return -1;
|
||||
return 0;
|
||||
}
|
||||
if (hours1 > hours2) return 1;
|
||||
if (hours1 < hours2) return -1;
|
||||
if (minutes1 > minutes2) return 1;
|
||||
if (minutes1 < minutes2) return -1;
|
||||
return 0;
|
||||
}
|
||||
|
||||
|
||||
$: {
|
||||
if($stockTicker && typeof window !== 'undefined') {
|
||||
rawData = data?.getNextEarnings;
|
||||
epsRatio = ((rawData?.epsEst/rawData?.epsPrior-1)*100)?.toFixed(2)
|
||||
revenueRatio = ((rawData?.revenueEst/rawData?.revenuePrior-1)*100)?.toFixed(2)
|
||||
$: {
|
||||
if ($stockTicker && typeof window !== "undefined") {
|
||||
rawData = data?.getNextEarnings;
|
||||
epsRatio = ((rawData?.epsEst / rawData?.epsPrior - 1) * 100)?.toFixed(2);
|
||||
revenueRatio = (
|
||||
(rawData?.revenueEst / rawData?.revenuePrior - 1) *
|
||||
100
|
||||
)?.toFixed(2);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
{#if Object?.keys(rawData)?.length !== 0}
|
||||
|
||||
<div class="space-y-3 overflow-hidden">
|
||||
<div class="space-y-3 overflow-hidden">
|
||||
<!--Start Content-->
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto">
|
||||
|
||||
<div class="flex flex-col items-center w-full mb-3">
|
||||
<div class="flex flex-row justify-start mr-auto items-center">
|
||||
<!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
|
||||
<div class="flex flex-row items-center">
|
||||
<label for="nextEarningsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
|
||||
Next Earnings Release
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Next Earnings"}
|
||||
content={`Earnings represent a company's net profit after expenses, taxes, and costs. Reported quarterly, they show financial health, including revenue and EPS, influencing stock prices and investor decisions.`}
|
||||
id={"nextEarningsInfo"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="flex flex-col items-center w-full mb-3">
|
||||
<div class="flex flex-row justify-start mr-auto items-center">
|
||||
<!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
|
||||
<div class="flex flex-row items-center">
|
||||
<label
|
||||
for="nextEarningsInfo"
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
|
||||
>
|
||||
Next Earnings Release
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Next Earnings"}
|
||||
content={`Earnings represent a company's net profit after expenses, taxes, and costs. Reported quarterly, they show financial health, including revenue and EPS, influencing stock prices and investor decisions.`}
|
||||
id={"nextEarningsInfo"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-white text-[1rem] pl-1">
|
||||
{$displayCompanyName} is scheduled to release its earnings on {new Date(rawData?.date ?? null)?.toLocaleString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
timeZone: 'Europe/Berlin'
|
||||
})},
|
||||
{#if compareTimes(rawData?.time, '16:00') > 0}
|
||||
after market closes.
|
||||
{:else if compareTimes(rawData?.time, '09:30') < 0}
|
||||
before market opens.
|
||||
{:else}
|
||||
during market hours.
|
||||
{/if}
|
||||
<br>Analysts project revenue of <strong>{abbreviateNumber(rawData?.revenueEst,true)}</strong>, reflecting a
|
||||
<strong>{revenueRatio}%</strong> YoY {revenueRatio > 0 ? 'growth' : revenueRatio < 0 ? 'shrinking' : ''} and earnings per share of
|
||||
<strong>{rawData?.epsEst}</strong>, making a <strong>{epsRatio}%</strong> {epsRatio > 0 ? 'increase' : epsRatio < 0 ? 'decrease' : ''} YoY.
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="text-white text-[1rem] pl-1">
|
||||
{$displayCompanyName} is scheduled to release its earnings on {new Date(
|
||||
rawData?.date ?? null,
|
||||
)?.toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
timeZone: "Europe/Berlin",
|
||||
})},
|
||||
{#if compareTimes(rawData?.time, "16:00") > 0}
|
||||
after market closes.
|
||||
{:else if compareTimes(rawData?.time, "09:30") < 0}
|
||||
before market opens.
|
||||
{:else}
|
||||
during market hours.
|
||||
{/if}
|
||||
<br />Analysts project revenue of
|
||||
<strong>{abbreviateNumber(rawData?.revenueEst, true)}</strong>,
|
||||
reflecting a
|
||||
<strong>{revenueRatio}%</strong> YoY {revenueRatio > 0
|
||||
? "growth"
|
||||
: revenueRatio < 0
|
||||
? "shrinking"
|
||||
: ""} and earnings per share of
|
||||
<strong>{rawData?.epsEst}</strong>, making a
|
||||
<strong>{epsRatio}%</strong>
|
||||
{epsRatio > 0 ? "increase" : epsRatio < 0 ? "decrease" : ""} YoY.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@ -1,146 +1,178 @@
|
||||
<script lang="ts">
|
||||
import { stockTicker, etfTicker } from "$lib/store";
|
||||
import InfoModal from "$lib/components/InfoModal.svelte";
|
||||
import { get } from "svelte/store";
|
||||
|
||||
<script lang ='ts'>
|
||||
import {stockTicker, etfTicker} from '$lib/store';
|
||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||
export let data;
|
||||
|
||||
export let data;
|
||||
let isLoaded = false;
|
||||
let wiim;
|
||||
let showFullHistory = false;
|
||||
|
||||
let isLoaded = false;
|
||||
let wiim;
|
||||
let showFullHistory = false;
|
||||
|
||||
function latestInfoDate(inputDate) {
|
||||
function latestInfoDate(inputDate) {
|
||||
// Convert the input date string to milliseconds since epoch
|
||||
const inputDateMs = Date?.parse(inputDate);
|
||||
const inputDateMs = Date.parse(inputDate);
|
||||
|
||||
// Get today's date in milliseconds since epoch
|
||||
const todayMs = Date?.now();
|
||||
const todayMs = Date.now();
|
||||
|
||||
// Calculate the difference in milliseconds
|
||||
const differenceInMs = todayMs - inputDateMs;
|
||||
|
||||
// Convert milliseconds to days
|
||||
const differenceInDays = Math?.floor(differenceInMs / (1000 * 60 * 60 * 24));
|
||||
const differenceInDays = Math.floor(differenceInMs / (1000 * 60 * 60 * 24));
|
||||
|
||||
// Return the difference in days
|
||||
return differenceInDays <=1;
|
||||
}
|
||||
return differenceInDays <= 1;
|
||||
}
|
||||
|
||||
|
||||
$: {
|
||||
|
||||
if (($stockTicker || $etfTicker) && typeof window !== 'undefined')
|
||||
{
|
||||
isLoaded = false;
|
||||
showFullHistory = false;
|
||||
wiim = data?.getWhyPriceMoved || [];
|
||||
isLoaded = true;
|
||||
$: {
|
||||
if ((get(stockTicker) || get(etfTicker)) && typeof window !== "undefined") {
|
||||
isLoaded = false;
|
||||
showFullHistory = false;
|
||||
wiim = data?.getWhyPriceMoved || [];
|
||||
isLoaded = true;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="overflow-hidden text-white h-full">
|
||||
<main class="overflow-hidden">
|
||||
<div class="flex flex-row items-center">
|
||||
<label
|
||||
for="whyPriceMovedInfo"
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
|
||||
>
|
||||
Why Price Moved
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Why Price Moved"}
|
||||
content={"Why Price Moved is a one-sentence explanation of why a stock is moving higher or down. By removing noise and collecting signals from news, press releases and SEC filings, we can pinpoint the trigger for price movements."}
|
||||
id={"whyPriceMovedInfo"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if isLoaded}
|
||||
{#if wiim?.length !== 0}
|
||||
<div class="mt-7">
|
||||
{#each showFullHistory ? wiim : wiim?.slice(0, 2) as item, index}
|
||||
<div
|
||||
class="w-full {index === 1 && !showFullHistory && wiim?.length > 2
|
||||
? 'opacity-[0.5]'
|
||||
: ''} "
|
||||
>
|
||||
<div class="relative">
|
||||
<div class="">
|
||||
<div class="flex justify-center">
|
||||
<!--<div class="{item?.changesPercentage >= 0 ? 'bg-[#37C97D]' : 'bg-[#FF2F1F]'} w-1.5 mb-5 rounded-l-xl" />-->
|
||||
|
||||
<section class="overflow-hidden text-white h-full">
|
||||
<main class="overflow-hidden ">
|
||||
|
||||
<div class="flex flex-row items-center">
|
||||
<label for="whyPriceMovedInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
|
||||
Why Price Moved
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Why Price Moved"}
|
||||
content={"Why Price Moved is a one-sentence explanation of why a stock is moving higher or down. By removing noise and collecting signals from news, press releases and SEC filings, we can pinpoint the trigger for price movements."}
|
||||
id={"whyPriceMovedInfo"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if isLoaded}
|
||||
{#if wiim?.length !== 0}
|
||||
<div class="mt-7">
|
||||
{#each (showFullHistory ? wiim : wiim?.slice(0,2)) as item, index}
|
||||
|
||||
<div class="w-full {index === 1 && !showFullHistory && wiim?.length > 2 ? 'opacity-[0.5]' : '' } ">
|
||||
|
||||
<div class="relative">
|
||||
<div class="">
|
||||
|
||||
<div class="flex justify-center ">
|
||||
<!--<div class="{item?.changesPercentage >= 0 ? 'bg-[#37C97D]' : 'bg-[#FF2F1F]'} w-1.5 mb-5 rounded-l-xl" />-->
|
||||
|
||||
<!--Start Item-->
|
||||
<div class="flex flex-row items-center w-full mb-6">
|
||||
|
||||
<div class="w-full rounded-lg {latestInfoDate(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-row items-start w-full pt-2">
|
||||
<span class="text-white text-sm pl-2 italic">Updated {item?.date}</span>
|
||||
{#if latestInfoDate(item?.date)}
|
||||
<label class="bg-[#2D4F8A] text-white font-medium text-xs rounded-lg px-2 py-0.5 ml-3">New</label>
|
||||
{/if}
|
||||
<div class="text-white text-sm ml-auto pr-4 font-medium">
|
||||
{#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="#37C97D" 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-[#37C97D] inline-block">+{item?.changesPercentage}%</span>
|
||||
{: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">{item?.changesPercentage}% </span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col w-full max-w-3xl pt-2 pl-2 pr-2 sm:pr-0">
|
||||
<span class="text-white text-[1rem] ">
|
||||
{item?.text }
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--End Item-->
|
||||
|
||||
<!--Start Item-->
|
||||
<div class="flex flex-row items-center w-full mb-6">
|
||||
<div
|
||||
class="w-full rounded-lg {latestInfoDate(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-row items-start w-full pt-2">
|
||||
<span class="text-white text-sm pl-2 italic"
|
||||
>Updated {item?.date}</span
|
||||
>
|
||||
{#if latestInfoDate(item?.date)}
|
||||
<label
|
||||
class="bg-[#2D4F8A] text-white font-medium text-xs rounded-lg px-2 py-0.5 ml-3"
|
||||
>New</label
|
||||
>
|
||||
{/if}
|
||||
<div
|
||||
class="text-white text-sm ml-auto pr-4 font-medium"
|
||||
>
|
||||
{#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="#37C97D"
|
||||
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-[#37C97D] inline-block"
|
||||
>+{item?.changesPercentage}%</span
|
||||
>
|
||||
{: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"
|
||||
>{item?.changesPercentage}%
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-col w-full max-w-3xl pt-2 pl-2 pr-2 sm:pr-0"
|
||||
>
|
||||
<span class="text-white text-[1rem]">
|
||||
{item?.text}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--End Item-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
{#if wiim?.length > 2}
|
||||
<label on:click={() => showFullHistory = !showFullHistory} class="cursor-pointer flex justify-center items-center mt-5">
|
||||
<svg class="w-10 h-10 transform {showFullHistory ? 'rotate-180' : ''} " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#2A323C" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 13.5L7.5 11l1.42-1.41L12 12.67l3.08-3.08L16.5 11L12 15.5z"/></svg>
|
||||
</label>
|
||||
{/if}
|
||||
|
||||
{/if}
|
||||
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<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">
|
||||
<span class="loading loading-spinner loading-md text-gray-400"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
</main>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{#if wiim?.length > 2}
|
||||
<label
|
||||
on:click={() => (showFullHistory = !showFullHistory)}
|
||||
class="cursor-pointer flex justify-center items-center mt-5"
|
||||
>
|
||||
<svg
|
||||
class="w-10 h-10 transform {showFullHistory ? 'rotate-180' : ''} "
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="#2A323C"
|
||||
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 13.5L7.5 11l1.42-1.41L12 12.67l3.08-3.08L16.5 11L12 15.5z"
|
||||
/></svg
|
||||
>
|
||||
</label>
|
||||
{/if}
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<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"
|
||||
>
|
||||
<span class="loading loading-spinner loading-md text-gray-400"
|
||||
></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
</section>
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
import {
|
||||
getCache,
|
||||
setCache,
|
||||
screenWidth,
|
||||
displayCompanyName,
|
||||
numberOfUnreadNotification,
|
||||
globalForm,
|
||||
@ -21,7 +20,7 @@
|
||||
} from "$lib/store";
|
||||
import { onDestroy, onMount } from "svelte";
|
||||
import BullBearSay from "$lib/components/BullBearSay.svelte";
|
||||
|
||||
import News from "$lib/components/News.svelte";
|
||||
import NextEarnings from "$lib/components/NextEarnings.svelte";
|
||||
import EarningsSurprise from "$lib/components/EarningsSurprise.svelte";
|
||||
import DividendAnnouncement from "$lib/components/DividendAnnouncement.svelte";
|
||||
@ -891,9 +890,11 @@
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
|
||||
<section class="bg-[#09090B] min-h-screen pb-40 overflow-hidden">
|
||||
<section class="bg-[#09090B] min-h-screen pb-40 overflow-hidden w-full">
|
||||
<div class="w-full m-auto overflow-hidden">
|
||||
<div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
|
||||
<div
|
||||
class="md:flex md:justify-between md:divide-x md:divide-slate-800 w-full"
|
||||
>
|
||||
<!-- Main content -->
|
||||
<div class="pb-12 md:pb-20 w-full sm:pr-6 xl:pr-0">
|
||||
<div class="xl:pr-10">
|
||||
@ -1571,11 +1572,7 @@
|
||||
? ''
|
||||
: 'hidden'}"
|
||||
>
|
||||
<Lazy
|
||||
>{#await import("$lib/components/News.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} {data} />
|
||||
{/await}</Lazy
|
||||
>
|
||||
<News {data} />
|
||||
</div>
|
||||
<!--
|
||||
<Lazy>
|
||||
|
||||
@ -395,11 +395,15 @@
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
|
||||
<section class="bg-[#09090B] overflow-hidden text-white h-full pb-40 sm:mb-0">
|
||||
<section
|
||||
class="w-full bg-[#09090B] overflow-hidden text-white h-full pb-40 sm:mb-0"
|
||||
>
|
||||
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||
<div class="relative flex justify-center items-center overflow-hidden">
|
||||
<div
|
||||
class="relative flex justify-center items-center overflow-hidden w-full"
|
||||
>
|
||||
<main class="w-full">
|
||||
<div class="sm:p-7 m-auto mt-2 sm:mt-0">
|
||||
<div class="sm:p-7 m-auto mt-2 sm:mt-0 w-full">
|
||||
<div class="mb-3">
|
||||
<h1 class="text-2xl text-gray-200 font-bold">
|
||||
{#if mode}
|
||||
@ -412,9 +416,9 @@
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-2">
|
||||
<div class="grid grid-cols-1 gap-2 w-full">
|
||||
<div
|
||||
class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
|
||||
class="w-full text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
|
||||
|
||||
@ -476,7 +476,7 @@
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
>{rawData?.inventoryTurnover}</td
|
||||
>{abbreviateNumber(rawData?.inventoryTurnover)}</td
|
||||
>
|
||||
</tr></tbody
|
||||
>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user