233 lines
11 KiB
Svelte
233 lines
11 KiB
Svelte
<script lang="ts">
|
|
import { stockTicker, etfTicker, indexTicker } from "$lib/store";
|
|
import InfoModal from "$lib/components/InfoModal.svelte";
|
|
import { get } from "svelte/store";
|
|
import { formatDate } from "$lib/utils";
|
|
|
|
export let data;
|
|
|
|
let wiim = [];
|
|
let showFullHistory = false;
|
|
|
|
function latestInfoDate(inputDate) {
|
|
// Create a Date object for the input date and convert it to New York time zone
|
|
const inputDateLocal = new Date(inputDate).toLocaleString("en-US", {
|
|
timeZone: "America/New_York",
|
|
});
|
|
|
|
// Get the current date and time in New York timezone
|
|
const todayLocal = new Date().toLocaleString("en-US", {
|
|
timeZone: "America/New_York",
|
|
});
|
|
|
|
// Convert the localized strings back to Date objects
|
|
const inputDateMs = new Date(inputDateLocal).getTime();
|
|
const todayMs = new Date(todayLocal).getTime();
|
|
|
|
// Calculate the difference in milliseconds
|
|
const differenceInMs = todayMs - inputDateMs;
|
|
|
|
// Convert milliseconds to days
|
|
const differenceInDays = Math.floor(differenceInMs / (1000 * 60 * 60 * 24));
|
|
|
|
// Return whether the difference is less than or equal to 1 day
|
|
return differenceInDays <= 1;
|
|
}
|
|
|
|
$: {
|
|
if (get(stockTicker) || get(etfTicker) || get(indexTicker)) {
|
|
showFullHistory = false;
|
|
wiim = data?.getWhyPriceMoved || [];
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<section class="overflow-hidden text-white h-full mt-5">
|
|
<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-2xl font-bold"
|
|
>
|
|
<h2>Why Price Moved</h2>
|
|
</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 wiim?.length !== 0}
|
|
<div class="mt-5">
|
|
{#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">
|
|
<!--Start Item-->
|
|
<div class="flex flex-row items-center w-full mb-8">
|
|
<!-- Vertical Line -->
|
|
<div
|
|
class="w-1 h-full mr-4 rounded-lg {item?.changesPercentage ===
|
|
'-'
|
|
? 'bg-white'
|
|
: item?.changesPercentage >= 0
|
|
? 'bg-[#00FC50]'
|
|
: 'bg-[#FF2F1F]'}"
|
|
></div>
|
|
<!-- Item Content -->
|
|
|
|
<div class="w-full h-full">
|
|
<div class="flex flex-col items-start">
|
|
<div class="flex flex-row items-start w-full">
|
|
<span class="text-white text-sm"
|
|
>{formatDate(item?.date)}
|
|
<!--
|
|
·
|
|
<a
|
|
href={item?.url}
|
|
class="inline-block text-sm text-white sm:hover:underline sm:hover:underline-offset-4"
|
|
>
|
|
Source
|
|
</a>
|
|
-->
|
|
</span>
|
|
{#if latestInfoDate(item?.date)}
|
|
<label
|
|
class="bg-[#fff] rounded text-black font-semibold text-xs px-2 py-0.5 ml-3"
|
|
>New</label
|
|
>
|
|
{/if}
|
|
<div
|
|
class="text-white text-sm sm:text-[1rem] ml-auto font-medium"
|
|
>
|
|
{#if item?.changesPercentage >= 0}
|
|
<span class="text-[#00FC50] inline-block"
|
|
>+{item?.changesPercentage}%</span
|
|
>
|
|
<svg
|
|
class="w-5 h-5 hidden sm:inline-block"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
transform="rotate(180)matrix(-1, 0, 0, 1, 0, 0)"
|
|
><g id="SVGRepo_bgCarrier" stroke-width="0"
|
|
></g><g
|
|
id="SVGRepo_tracerCarrier"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
></g><g id="SVGRepo_iconCarrier">
|
|
<g clip-path="url(#clip0_1076_36065)">
|
|
<path
|
|
d="M1.70711 5.29289C1.31658 4.90237 0.683417 4.90237 0.292893 5.29289C-0.0976311 5.68342 -0.0976311 6.31658 0.292893 6.70711L7.79289 14.2071C8.18342 14.5976 8.81658 14.5976 9.20711 14.2071L13.5 9.91421L20.5858 17H17C16.4477 17 16 17.4477 16 18C16 18.5523 16.4477 19 17 19H22.9993L23.003 19C23.1375 18.9996 23.2657 18.9727 23.3828 18.9241C23.5007 18.8753 23.6112 18.803 23.7071 18.7071C23.8902 18.524 23.9874 18.2877 23.9989 18.048C23.9996 18.032 24 18.016 24 18V12C24 11.4477 23.5523 11 23 11C22.4477 11 22 11.4477 22 12V15.5858L14.2071 7.79289C13.8166 7.40237 13.1834 7.40237 12.7929 7.79289L8.5 12.0858L1.70711 5.29289Z"
|
|
fill="#00FC50"
|
|
></path>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_1076_36065">
|
|
<rect
|
|
width="24"
|
|
height="24"
|
|
fill="#00FC50"
|
|
></rect>
|
|
</clipPath>
|
|
</defs>
|
|
</g></svg
|
|
>
|
|
{:else if item?.changesPercentage < 0}
|
|
<span class="text-[#FF2F1F] inline-block"
|
|
>{item?.changesPercentage}%
|
|
</span>
|
|
<svg
|
|
class="w-5 h-5 hidden sm:inline-block"
|
|
viewBox="0 0 24 24"
|
|
fill="#FF2F1F"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
><g id="SVGRepo_bgCarrier" stroke-width="0"
|
|
></g><g
|
|
id="SVGRepo_tracerCarrier"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
></g><g id="SVGRepo_iconCarrier">
|
|
<g clip-path="url(#clip0_1076_36065)">
|
|
<path
|
|
d="M1.70711 5.29289C1.31658 4.90237 0.683417 4.90237 0.292893 5.29289C-0.0976311 5.68342 -0.0976311 6.31658 0.292893 6.70711L7.79289 14.2071C8.18342 14.5976 8.81658 14.5976 9.20711 14.2071L13.5 9.91421L20.5858 17H17C16.4477 17 16 17.4477 16 18C16 18.5523 16.4477 19 17 19H22.9993L23.003 19C23.1375 18.9996 23.2657 18.9727 23.3828 18.9241C23.5007 18.8753 23.6112 18.803 23.7071 18.7071C23.8902 18.524 23.9874 18.2877 23.9989 18.048C23.9996 18.032 24 18.016 24 18V12C24 11.4477 23.5523 11 23 11C22.4477 11 22 11.4477 22 12V15.5858L14.2071 7.79289C13.8166 7.40237 13.1834 7.40237 12.7929 7.79289L8.5 12.0858L1.70711 5.29289Z"
|
|
fill="#FF2F1F"
|
|
></path>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_1076_36065">
|
|
<rect
|
|
width="24"
|
|
height="24"
|
|
fill="#FF2F1F"
|
|
></rect>
|
|
</clipPath>
|
|
</defs>
|
|
</g></svg
|
|
>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col w-full pt-2">
|
|
{#if index === 0 && data?.user?.tier !== "Pro"}
|
|
<span class="mt-3">
|
|
{item?.text?.slice(0, 50) + "..."}
|
|
Unlock content with
|
|
<a
|
|
class="inline-block ml-0.5 text-blue-400 sm:hover:text-white"
|
|
href="/pricing"
|
|
>Pro Subscription <svg
|
|
class="w-4 h-4 mb-1 inline-block text[#A3A3A3] sm:hover:text-white"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
><path
|
|
fill="currentColor"
|
|
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
|
|
></a
|
|
>
|
|
</span>
|
|
{:else}
|
|
<span class="text-white text-[1rem]">
|
|
{item?.text}
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--End Item-->
|
|
</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}
|
|
</main>
|
|
</section>
|