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 { stockTicker, displayCompanyName } from "$lib/store";
|
||||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
import InfoModal from "$lib/components/InfoModal.svelte";
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
let rawData = {};
|
let rawData = {};
|
||||||
|
|
||||||
function latestInfoDate(inputDate) {
|
function latestInfoDate(inputDate) {
|
||||||
// Convert the input date string to milliseconds since epoch
|
// Convert the input date string to milliseconds since epoch
|
||||||
const inputDateMs = Date?.parse(inputDate);
|
const inputDateMs = Date?.parse(inputDate);
|
||||||
|
|
||||||
@ -17,63 +17,64 @@ function latestInfoDate(inputDate) {
|
|||||||
const differenceInMs = todayMs - inputDateMs;
|
const differenceInMs = todayMs - inputDateMs;
|
||||||
|
|
||||||
// Convert milliseconds to days
|
// 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 the difference in days
|
||||||
return differenceInDays <=1;
|
return differenceInDays <= 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function handleMode(i) {
|
function handleMode(i) {
|
||||||
activeIdx = i;
|
activeIdx = i;
|
||||||
}
|
}
|
||||||
|
|
||||||
const tabs = [
|
const tabs = [
|
||||||
{
|
{
|
||||||
title: "Bull Case",
|
title: "Bull Case",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Bear Case",
|
title: "Bear Case",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
let activeIdx = 0;
|
let activeIdx = 0;
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
if($stockTicker && typeof window !== 'undefined') {
|
if ($stockTicker && typeof window !== "undefined") {
|
||||||
rawData = data?.getBullBearSay;
|
rawData = data?.getBullBearSay;
|
||||||
activeIdx = 0;
|
activeIdx = 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
</script>
|
||||||
</script>
|
|
||||||
|
{#if Object?.keys(rawData)?.length !== 0}
|
||||||
|
<div class="space-y-3 overflow-hidden">
|
||||||
{#if Object?.keys(rawData)?.length !== 0}
|
<!--Start Content-->
|
||||||
|
<div class="w-auto lg:w-full p-1 flex flex-col m-auto">
|
||||||
<div class="space-y-3 overflow-hidden">
|
<div class="flex flex-col items-center w-full mb-6">
|
||||||
<!--Start Content-->
|
<div class="flex flex-row justify-start mr-auto items-center">
|
||||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto">
|
<!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
<div class="flex flex-col items-center w-full mb-6">
|
<label
|
||||||
<div class="flex flex-row justify-start mr-auto items-center">
|
for="bullBearCase"
|
||||||
<!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
|
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
|
||||||
<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
|
||||||
Bull Case vs Bear Case
|
</label>
|
||||||
</label>
|
<InfoModal
|
||||||
<InfoModal
|
title={"Bull Case vs Bear Case"}
|
||||||
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}`}
|
||||||
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"}
|
||||||
id={"bullBearCase"}
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</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}
|
{#each tabs as item, i}
|
||||||
<button
|
<button
|
||||||
on:click={() => handleMode(i)}
|
on:click={() => handleMode(i)}
|
||||||
@ -82,49 +83,73 @@ function latestInfoDate(inputDate) {
|
|||||||
: ''} "
|
: ''} "
|
||||||
>
|
>
|
||||||
{#if activeIdx === i}
|
{#if activeIdx === i}
|
||||||
<div
|
<div class="absolute inset-0 rounded-lg bg-purple-600"></div>
|
||||||
class="absolute inset-0 rounded-lg bg-purple-600"
|
|
||||||
></div>
|
|
||||||
{/if}
|
{/if}
|
||||||
<span
|
<span
|
||||||
class="relative text-sm block font-medium duration-200 text-white">
|
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>
|
{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>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!--End Header-->
|
<!--End Header-->
|
||||||
<span class="text-gray-200 text-xs sm:text-[0.915rem] italic mt-6 sm:ml-auto">
|
<span
|
||||||
<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>
|
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}
|
Updated {rawData?.date}
|
||||||
</span>
|
</span>
|
||||||
<div class="flex mt-5 h-auto">
|
<div class="flex mt-5 h-auto">
|
||||||
|
<div
|
||||||
<div class="{activeIdx === 0 ? 'bg-[#37C97D]' : 'bg-[#FF2F1F]'} w-full max-w-[3px] rounded-l-xl" />
|
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">
|
<span class="text-gray-100 ml-3 text-[1rem] w-full">
|
||||||
{#if activeIdx === 0}
|
{#if activeIdx === 0}
|
||||||
<p class="pr-1">{rawData?.bullSays}</p>
|
<p class="pr-1">{rawData?.bullSays}</p>
|
||||||
{:else}
|
{:else if data?.user?.tier === "Pro"}
|
||||||
|
|
||||||
{#if data?.user?.tier === 'Pro'}
|
|
||||||
<p class="pr-1">{rawData?.bearSays}</p>
|
<p class="pr-1">{rawData?.bearSays}</p>
|
||||||
{:else}
|
{: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">
|
<div
|
||||||
<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>
|
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"
|
||||||
Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
|
>
|
||||||
|
<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>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{/if}
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
</div>
|
||||||
|
{/if}
|
||||||
|
|||||||
@ -1,12 +1,11 @@
|
|||||||
<script lang='ts'>
|
<script lang="ts">
|
||||||
import { stockTicker, displayCompanyName } from "$lib/store";
|
import { stockTicker, displayCompanyName } from "$lib/store";
|
||||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
import InfoModal from "$lib/components/InfoModal.svelte";
|
||||||
import { abbreviateNumber } from "$lib/utils";
|
export let data;
|
||||||
export let data;
|
|
||||||
|
|
||||||
let rawData = {};
|
let rawData = {};
|
||||||
|
|
||||||
function latestInfoDate(inputDate) {
|
function latestInfoDate(inputDate) {
|
||||||
// Convert the input date string to milliseconds since epoch
|
// Convert the input date string to milliseconds since epoch
|
||||||
const inputDateMs = Date?.parse(inputDate);
|
const inputDateMs = Date?.parse(inputDate);
|
||||||
|
|
||||||
@ -17,69 +16,116 @@ function latestInfoDate(inputDate) {
|
|||||||
const differenceInMs = todayMs - inputDateMs;
|
const differenceInMs = todayMs - inputDateMs;
|
||||||
|
|
||||||
// Convert milliseconds to days
|
// 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 the difference in days
|
||||||
return differenceInDays <=1;
|
return differenceInDays <= 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$: {
|
||||||
$: {
|
if ($stockTicker && typeof window !== "undefined") {
|
||||||
if($stockTicker && typeof window !== 'undefined') {
|
rawData = data?.getDividendAnnouncement;
|
||||||
rawData = data?.getDividendAnnouncement;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
{#if Object?.keys(rawData)?.length !== 0}
|
{#if Object?.keys(rawData)?.length !== 0}
|
||||||
|
<div class="overflow-hidden">
|
||||||
<div class="overflow-hidden">
|
|
||||||
<!--Start Content-->
|
<!--Start Content-->
|
||||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto">
|
<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
|
||||||
<div class="flex flex-row justify-start mr-auto items-center">
|
class="text-white text-[1rem] {latestInfoDate(rawData?.date)
|
||||||
<!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
|
? 'bg-[#F9AB00] bg-opacity-[0.1] p-3 rounded-lg'
|
||||||
<div class="flex flex-row items-center">
|
: 'bg-[#09090B] pl-1'} "
|
||||||
<label for="dividendAnnouncement" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
|
>
|
||||||
Dividend Announcement
|
<div class="mt-1">
|
||||||
</label>
|
{$displayCompanyName} has announced its upcoming dividend details on {new Date(
|
||||||
<InfoModal
|
rawData?.date,
|
||||||
title={"Dividend Announcement"}
|
)?.toLocaleString("en-US", {
|
||||||
content={`Dividend announcements are company declarations of cash or stock distributions to shareholders, usually reflecting profit and providing investment returns.`}
|
month: "short",
|
||||||
id={"dividendAnnouncement"}
|
day: "numeric",
|
||||||
/>
|
year: "numeric",
|
||||||
</div>
|
daySuffix: "2-digit",
|
||||||
|
})}:
|
||||||
</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'} ">
|
<li
|
||||||
<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>
|
class="ml-[20px] sm:ml-[30px]"
|
||||||
|
style="color: #fff; line-height: 22px; margin-top:20px; margin-bottom: 15px; list-style-type: disc;"
|
||||||
<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)
|
<span class="font-bold">Dividend:</span> ${rawData?.dividend} per share
|
||||||
</li>
|
({rawData?.dividend / rawData?.dividendPrior - 1 > 0 ? "+" : ""}{(
|
||||||
<li class="ml-[20px] sm:ml-[30px]" style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;">
|
(rawData?.dividend / rawData?.dividendPrior - 1) *
|
||||||
<span class="font-bold">Dividend Yield:</span> {rawData?.dividendYield?.toFixed(2)}%
|
100
|
||||||
</li>
|
)?.toFixed(2)}% YoY)
|
||||||
<li class="ml-[20px] sm:ml-[30px]" style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;">
|
</li>
|
||||||
<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">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;">
|
<li
|
||||||
<span class="font-bold">Payable Date:</span> {new Date(rawData?.payableDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
class="ml-[20px] sm:ml-[30px]"
|
||||||
</li>
|
style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;"
|
||||||
|
>
|
||||||
<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>
|
||||||
<span class="font-bold">Record Date:</span> {new Date(rawData?.recordDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
{new Date(rawData?.payableDate)?.toLocaleString("en-US", {
|
||||||
</li>
|
month: "short",
|
||||||
</div>
|
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>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|||||||
@ -1,12 +1,12 @@
|
|||||||
<script lang='ts'>
|
<script lang="ts">
|
||||||
import { stockTicker, displayCompanyName } from "$lib/store";
|
import { stockTicker, displayCompanyName } from "$lib/store";
|
||||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
import InfoModal from "$lib/components/InfoModal.svelte";
|
||||||
import { abbreviateNumber } from "$lib/utils";
|
import { abbreviateNumber } from "$lib/utils";
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
let rawData = {};
|
let rawData = {};
|
||||||
|
|
||||||
function latestInfoDate(inputDate) {
|
function latestInfoDate(inputDate) {
|
||||||
// Convert the input date string to milliseconds since epoch
|
// Convert the input date string to milliseconds since epoch
|
||||||
const inputDateMs = Date?.parse(inputDate);
|
const inputDateMs = Date?.parse(inputDate);
|
||||||
|
|
||||||
@ -17,58 +17,100 @@ function latestInfoDate(inputDate) {
|
|||||||
const differenceInMs = todayMs - inputDateMs;
|
const differenceInMs = todayMs - inputDateMs;
|
||||||
|
|
||||||
// Convert milliseconds to days
|
// 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 the difference in days
|
||||||
return differenceInDays <=1;
|
return differenceInDays <= 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$: {
|
||||||
$: {
|
if ($stockTicker && typeof window !== "undefined") {
|
||||||
if($stockTicker && typeof window !== 'undefined') {
|
rawData = data?.getEarningsSurprise;
|
||||||
rawData = data?.getEarningsSurprise;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
{#if Object?.keys(rawData)?.length !== 0}
|
{#if Object?.keys(rawData)?.length !== 0}
|
||||||
|
<div class="space-y-3 overflow-hidden">
|
||||||
<div class="space-y-3 overflow-hidden">
|
|
||||||
<!--Start Content-->
|
<!--Start Content-->
|
||||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto">
|
<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
|
||||||
<div class="flex flex-row justify-start mr-auto items-center">
|
class="text-white text-[1rem] {latestInfoDate(rawData?.date)
|
||||||
<!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
|
? 'bg-[#F9AB00] bg-opacity-[0.1] p-3 rounded-lg'
|
||||||
<div class="flex flex-row items-center">
|
: 'bg-[#09090B] pl-1'} "
|
||||||
<label for="earningsSurprise" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
|
>
|
||||||
Earnings Surprise
|
<div class="mt-1">
|
||||||
</label>
|
{$displayCompanyName} has released their quartely earnings on {new Date(
|
||||||
<InfoModal
|
rawData?.date,
|
||||||
title={"Earnings Surprise"}
|
)?.toLocaleString("en-US", {
|
||||||
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.`}
|
month: "short",
|
||||||
id={"earningsSurprise"}
|
day: "numeric",
|
||||||
/>
|
year: "numeric",
|
||||||
</div>
|
daySuffix: "2-digit",
|
||||||
|
})}:
|
||||||
</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>
|
</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}
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|||||||
@ -72,7 +72,7 @@
|
|||||||
<!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
|
<!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
|
||||||
<div class="flex flex-row items-center">
|
<div class="flex flex-row items-center">
|
||||||
<label
|
<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
|
News
|
||||||
</label>
|
</label>
|
||||||
|
|||||||
@ -1,81 +1,87 @@
|
|||||||
<script lang='ts'>
|
<script lang="ts">
|
||||||
import { stockTicker, displayCompanyName } from "$lib/store";
|
import { stockTicker, displayCompanyName } from "$lib/store";
|
||||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
import InfoModal from "$lib/components/InfoModal.svelte";
|
||||||
import { abbreviateNumber } from "$lib/utils";
|
import { abbreviateNumber } from "$lib/utils";
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
let rawData = {};
|
let rawData = {};
|
||||||
let revenueRatio = 0;
|
let revenueRatio = 0;
|
||||||
let epsRatio = 0;
|
let epsRatio = 0;
|
||||||
|
|
||||||
function compareTimes(time1, time2) {
|
function compareTimes(time1, time2) {
|
||||||
const [hours1, minutes1] = time1?.split(':').map(Number);
|
const [hours1, minutes1] = time1?.split(":").map(Number);
|
||||||
const [hours2, minutes2] = time2?.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') {
|
if ($stockTicker && typeof window !== "undefined") {
|
||||||
rawData = data?.getNextEarnings;
|
rawData = data?.getNextEarnings;
|
||||||
epsRatio = ((rawData?.epsEst/rawData?.epsPrior-1)*100)?.toFixed(2)
|
epsRatio = ((rawData?.epsEst / rawData?.epsPrior - 1) * 100)?.toFixed(2);
|
||||||
revenueRatio = ((rawData?.revenueEst/rawData?.revenuePrior-1)*100)?.toFixed(2)
|
revenueRatio = (
|
||||||
|
(rawData?.revenueEst / rawData?.revenuePrior - 1) *
|
||||||
|
100
|
||||||
|
)?.toFixed(2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
{#if Object?.keys(rawData)?.length !== 0}
|
{#if Object?.keys(rawData)?.length !== 0}
|
||||||
|
<div class="space-y-3 overflow-hidden">
|
||||||
<div class="space-y-3 overflow-hidden">
|
|
||||||
<!--Start Content-->
|
<!--Start Content-->
|
||||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto">
|
<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-col items-center w-full mb-3">
|
<div class="flex flex-row justify-start mr-auto items-center">
|
||||||
<div class="flex flex-row justify-start mr-auto items-center">
|
<!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
|
||||||
<!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
|
<div class="flex flex-row items-center">
|
||||||
<div class="flex flex-row items-center">
|
<label
|
||||||
<label for="nextEarningsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
|
for="nextEarningsInfo"
|
||||||
Next Earnings Release
|
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
|
||||||
</label>
|
>
|
||||||
<InfoModal
|
Next Earnings Release
|
||||||
title={"Next Earnings"}
|
</label>
|
||||||
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.`}
|
<InfoModal
|
||||||
id={"nextEarningsInfo"}
|
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.`}
|
||||||
</div>
|
id={"nextEarningsInfo"}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="text-white text-[1rem] pl-1">
|
<div class="text-white text-[1rem] pl-1">
|
||||||
{$displayCompanyName} is scheduled to release its earnings on {new Date(rawData?.date ?? null)?.toLocaleString('en-US', {
|
{$displayCompanyName} is scheduled to release its earnings on {new Date(
|
||||||
month: 'short',
|
rawData?.date ?? null,
|
||||||
day: 'numeric',
|
)?.toLocaleString("en-US", {
|
||||||
year: 'numeric',
|
month: "short",
|
||||||
timeZone: 'Europe/Berlin'
|
day: "numeric",
|
||||||
})},
|
year: "numeric",
|
||||||
{#if compareTimes(rawData?.time, '16:00') > 0}
|
timeZone: "Europe/Berlin",
|
||||||
after market closes.
|
})},
|
||||||
{:else if compareTimes(rawData?.time, '09:30') < 0}
|
{#if compareTimes(rawData?.time, "16:00") > 0}
|
||||||
before market opens.
|
after market closes.
|
||||||
{:else}
|
{:else if compareTimes(rawData?.time, "09:30") < 0}
|
||||||
during market hours.
|
before market opens.
|
||||||
{/if}
|
{:else}
|
||||||
<br>Analysts project revenue of <strong>{abbreviateNumber(rawData?.revenueEst,true)}</strong>, reflecting a
|
during market hours.
|
||||||
<strong>{revenueRatio}%</strong> YoY {revenueRatio > 0 ? 'growth' : revenueRatio < 0 ? 'shrinking' : ''} and earnings per share of
|
{/if}
|
||||||
<strong>{rawData?.epsEst}</strong>, making a <strong>{epsRatio}%</strong> {epsRatio > 0 ? 'increase' : epsRatio < 0 ? 'decrease' : ''} YoY.
|
<br />Analysts project revenue of
|
||||||
</div>
|
<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>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</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'>
|
export let data;
|
||||||
import {stockTicker, etfTicker} from '$lib/store';
|
|
||||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
|
||||||
|
|
||||||
export let data;
|
let isLoaded = false;
|
||||||
|
let wiim;
|
||||||
let isLoaded = false;
|
let showFullHistory = false;
|
||||||
let wiim;
|
|
||||||
let showFullHistory = false;
|
|
||||||
|
|
||||||
function latestInfoDate(inputDate) {
|
function latestInfoDate(inputDate) {
|
||||||
// Convert the input date string to milliseconds since epoch
|
// 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
|
// Get today's date in milliseconds since epoch
|
||||||
const todayMs = Date?.now();
|
const todayMs = Date.now();
|
||||||
|
|
||||||
// Calculate the difference in milliseconds
|
// Calculate the difference in milliseconds
|
||||||
const differenceInMs = todayMs - inputDateMs;
|
const differenceInMs = todayMs - inputDateMs;
|
||||||
|
|
||||||
// Convert milliseconds to days
|
// 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 the difference in days
|
||||||
return differenceInDays <=1;
|
return differenceInDays <= 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$: {
|
||||||
$: {
|
if ((get(stockTicker) || get(etfTicker)) && typeof window !== "undefined") {
|
||||||
|
isLoaded = false;
|
||||||
if (($stockTicker || $etfTicker) && typeof window !== 'undefined')
|
showFullHistory = false;
|
||||||
{
|
wiim = data?.getWhyPriceMoved || [];
|
||||||
isLoaded = false;
|
isLoaded = true;
|
||||||
showFullHistory = false;
|
}
|
||||||
wiim = data?.getWhyPriceMoved || [];
|
}
|
||||||
isLoaded = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</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-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">
|
<section class="overflow-hidden text-white h-full">
|
||||||
<span class="text-white text-sm pl-2 italic">Updated {item?.date}</span>
|
<main class="overflow-hidden">
|
||||||
{#if latestInfoDate(item?.date)}
|
<div class="flex flex-row items-center">
|
||||||
<label class="bg-[#2D4F8A] text-white font-medium text-xs rounded-lg px-2 py-0.5 ml-3">New</label>
|
<label
|
||||||
{/if}
|
for="whyPriceMovedInfo"
|
||||||
<div class="text-white text-sm ml-auto pr-4 font-medium">
|
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
|
||||||
{#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>
|
Why Price Moved
|
||||||
<span class="text-[#37C97D] inline-block">+{item?.changesPercentage}%</span>
|
</label>
|
||||||
{:else if item?.changesPercentage < 0 }
|
<InfoModal
|
||||||
<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>
|
title={"Why Price Moved"}
|
||||||
<span class="text-[#FF2F1F] inline-block">{item?.changesPercentage}% </span>
|
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."}
|
||||||
{/if}
|
id={"whyPriceMovedInfo"}
|
||||||
</div>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col w-full max-w-3xl pt-2 pl-2 pr-2 sm:pr-0">
|
{#if isLoaded}
|
||||||
<span class="text-white text-[1rem] ">
|
{#if wiim?.length !== 0}
|
||||||
{item?.text }
|
<div class="mt-7">
|
||||||
</span>
|
{#each showFullHistory ? wiim : wiim?.slice(0, 2) as item, index}
|
||||||
</div>
|
<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
|
||||||
</div>
|
class="w-full rounded-lg {latestInfoDate(item?.date)
|
||||||
</div>
|
? 'bg-[#F9AB00] bg-opacity-[0.1]'
|
||||||
</div>
|
: 'bg-[#27272A]'} shadow-lg h-full pl-3 pt-2 pb-4"
|
||||||
<!--End Item-->
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</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
|
||||||
<div class="flex justify-center items-center h-80">
|
class="flex flex-col w-full max-w-3xl pt-2 pl-2 pr-2 sm:pr-0"
|
||||||
<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="text-white text-[1rem]">
|
||||||
<span class="loading loading-spinner loading-md text-gray-400"></span>
|
{item?.text}
|
||||||
</label>
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--End Item-->
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
</main>
|
{#if wiim?.length > 2}
|
||||||
</section>
|
<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 {
|
import {
|
||||||
getCache,
|
getCache,
|
||||||
setCache,
|
setCache,
|
||||||
screenWidth,
|
|
||||||
displayCompanyName,
|
displayCompanyName,
|
||||||
numberOfUnreadNotification,
|
numberOfUnreadNotification,
|
||||||
globalForm,
|
globalForm,
|
||||||
@ -21,7 +20,7 @@
|
|||||||
} from "$lib/store";
|
} from "$lib/store";
|
||||||
import { onDestroy, onMount } from "svelte";
|
import { onDestroy, onMount } from "svelte";
|
||||||
import BullBearSay from "$lib/components/BullBearSay.svelte";
|
import BullBearSay from "$lib/components/BullBearSay.svelte";
|
||||||
|
import News from "$lib/components/News.svelte";
|
||||||
import NextEarnings from "$lib/components/NextEarnings.svelte";
|
import NextEarnings from "$lib/components/NextEarnings.svelte";
|
||||||
import EarningsSurprise from "$lib/components/EarningsSurprise.svelte";
|
import EarningsSurprise from "$lib/components/EarningsSurprise.svelte";
|
||||||
import DividendAnnouncement from "$lib/components/DividendAnnouncement.svelte";
|
import DividendAnnouncement from "$lib/components/DividendAnnouncement.svelte";
|
||||||
@ -891,9 +890,11 @@
|
|||||||
<!-- Add more Twitter meta tags as needed -->
|
<!-- Add more Twitter meta tags as needed -->
|
||||||
</svelte:head>
|
</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="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 -->
|
<!-- Main content -->
|
||||||
<div class="pb-12 md:pb-20 w-full sm:pr-6 xl:pr-0">
|
<div class="pb-12 md:pb-20 w-full sm:pr-6 xl:pr-0">
|
||||||
<div class="xl:pr-10">
|
<div class="xl:pr-10">
|
||||||
@ -1571,11 +1572,7 @@
|
|||||||
? ''
|
? ''
|
||||||
: 'hidden'}"
|
: 'hidden'}"
|
||||||
>
|
>
|
||||||
<Lazy
|
<News {data} />
|
||||||
>{#await import("$lib/components/News.svelte") then { default: Comp }}
|
|
||||||
<svelte:component this={Comp} {data} />
|
|
||||||
{/await}</Lazy
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<!--
|
<!--
|
||||||
<Lazy>
|
<Lazy>
|
||||||
|
|||||||
@ -395,11 +395,15 @@
|
|||||||
<!-- Add more Twitter meta tags as needed -->
|
<!-- Add more Twitter meta tags as needed -->
|
||||||
</svelte:head>
|
</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="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">
|
<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">
|
<div class="mb-3">
|
||||||
<h1 class="text-2xl text-gray-200 font-bold">
|
<h1 class="text-2xl text-gray-200 font-bold">
|
||||||
{#if mode}
|
{#if mode}
|
||||||
@ -412,9 +416,9 @@
|
|||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 gap-2">
|
<div class="grid grid-cols-1 gap-2 w-full">
|
||||||
<div
|
<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
|
<svg
|
||||||
class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
|
class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
|
||||||
|
|||||||
@ -476,7 +476,7 @@
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
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
|
</tr></tbody
|
||||||
>
|
>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user