lazy load hoverstockchart
This commit is contained in:
MuslemRahimi
parent
1cd2d3b976
commit
6f10a8b00a
@ -6,7 +6,7 @@
|
||||
<label for={$screenWidth > 640 ? "marketHour" : ""} class="cursor-pointer">
|
||||
{#if $isOpen}
|
||||
<div
|
||||
class="sm:border sm:border-slate-800 bg-[#141417B] sm:hover:bg-[#333333] sm:ease-in-out sm:duration-100 rounded-2xl pl-3 pr-3 pt-1 pb-1 flex flex-row items-center"
|
||||
class="sm:border sm:border-gray-800 b sm:hover:bg-[#333333] sm:ease-in-out sm:duration-100 rounded-2xl pl-3 pr-3 pt-1 pb-1 flex flex-row items-center"
|
||||
>
|
||||
<span class="text-xs py-0.5 text-slate-200 font-semibold">
|
||||
Market Open
|
||||
@ -22,7 +22,7 @@
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="sm:border sm:border-slate-800 bg-[#141417] sm:hover:bg-[#333333] sm:ease-in-out sm:duration-100 rounded-2xl pl-3 pr-3 pt-1 pb-1 flex flex-row items-center"
|
||||
class="sm:border sm:border-gray-800 sm:hover:bg-[#333333] sm:ease-in-out sm:duration-100 rounded-2xl pl-3 pr-3 pt-1 pb-1 flex flex-row items-center"
|
||||
>
|
||||
<span class="text-xs py-0.5 text-slate-200 font-semibold">
|
||||
Market Closed
|
||||
@ -38,71 +38,6 @@
|
||||
</div>
|
||||
{/if}
|
||||
</label>
|
||||
|
||||
<!--
|
||||
{#if $screenWidth < 640 && ($isBeforeMarketOpen || $isAfterMarketClose) && !$isWeekend}
|
||||
|
||||
<Drawer.Root>
|
||||
|
||||
<Drawer.Trigger>
|
||||
<label for="extendedHoursInfo" class="ml-2 shadow-lg cursor-pointer rounded-full w-7 h-7 relative sm:border sm:border-slate-800 bg-[#09090B] sm:hover:bg-[#333333] flex items-center justify-center border border-slate-800">
|
||||
{#if $isBeforeMarketOpen}
|
||||
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="white" d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0m72 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64m-16 0a48 48 0 1 0-48 48a48.05 48.05 0 0 0 48-48M58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32M192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72m5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8m80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8m112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16"/></svg>
|
||||
{:else}
|
||||
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="white" d="M232.13 143.64a6 6 0 0 0-6-1.49a90.07 90.07 0 0 1-112.27-112.3a6 6 0 0 0-7.49-7.48a102.88 102.88 0 0 0-51.89 36.31a102 102 0 0 0 142.84 142.84a102.88 102.88 0 0 0 36.31-51.89a6 6 0 0 0-1.5-5.99m-42 48.29a90 90 0 0 1-126-126a90.9 90.9 0 0 1 35.52-28.27a102.06 102.06 0 0 0 118.69 118.69a90.9 90.9 0 0 1-28.24 35.58Z"/></svg>
|
||||
{/if}
|
||||
</label>
|
||||
</Drawer.Trigger>
|
||||
|
||||
<Drawer.Portal>
|
||||
|
||||
<Drawer.Overlay class="fixed inset-0 bg-black/40" />
|
||||
|
||||
|
||||
<Drawer.Content class="fixed bottom-0 left-0 right-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] bg-[#09090B]">
|
||||
<div class="flex-1 rounded-t-[10px] bg-[#09090B] p-4">
|
||||
|
||||
<div class="mx-auto mb-8 h-1.5 w-20 flex-shrink-0 rounded-full bg-[#404040]" />
|
||||
<div class="max-w-md m-auto text-center mb-10">
|
||||
<Drawer.Title class="text-white text-xl mb-2 font-semibold">Extended Hours</Drawer.Title>
|
||||
<p class="mb-10 text-white">
|
||||
Trade this stock beyond regular hours. Extended trading hours offer you the chance to react to economic and business news outside standard market hours.
|
||||
</p>
|
||||
<Drawer.Close>
|
||||
<label class="cursor-pointer px-7 py-2 rounded-full bg-[#0DDE00] text-center text-black">OK</label>
|
||||
</Drawer.Close>
|
||||
</div>
|
||||
</div>
|
||||
</Drawer.Content>
|
||||
</Drawer.Portal>
|
||||
</Drawer.Root>
|
||||
{:else}
|
||||
<label for="extendedHoursInfo" class="ml-2 shadow-lg cursor-pointer rounded-full w-7 h-7 relative sm:border sm:border-slate-800 bg-[#09090B] sm:hover:bg-[#333333] flex items-center justify-center border border-slate-800">
|
||||
{#if $isBeforeMarketOpen}
|
||||
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="white" d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0m72 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64m-16 0a48 48 0 1 0-48 48a48.05 48.05 0 0 0 48-48M58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32M192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72m5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8m80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8m112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16"/></svg>
|
||||
{:else}
|
||||
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="white" d="M232.13 143.64a6 6 0 0 0-6-1.49a90.07 90.07 0 0 1-112.27-112.3a6 6 0 0 0-7.49-7.48a102.88 102.88 0 0 0-51.89 36.31a102 102 0 0 0 142.84 142.84a102.88 102.88 0 0 0 36.31-51.89a6 6 0 0 0-1.5-5.99m-42 48.29a90 90 0 0 1-126-126a90.9 90.9 0 0 1 35.52-28.27a102.06 102.06 0 0 0 118.69 118.69a90.9 90.9 0 0 1-28.24 35.58Z"/></svg>
|
||||
{/if}
|
||||
</label>
|
||||
|
||||
<input type="checkbox" id=extendedHoursInfo class="modal-toggle" />
|
||||
|
||||
<dialog id=extendedHoursInfo class="modal modal-middle">
|
||||
|
||||
<label for=extendedHoursInfo class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"></label>
|
||||
|
||||
|
||||
<div class="modal-box w-full bg-[#09090B]">
|
||||
<div class="text-white mb-5">
|
||||
<h3 class="font-bold text-2xl mb-5">Extended Hours</h3>
|
||||
<span class="text-white">
|
||||
Trade this stock beyond regular hours. Extended trading hours offer you the chance to react to economic and business news outside standard market hours.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
{/if}
|
||||
-->
|
||||
</div>
|
||||
|
||||
<!-- Put this part before </body> tag -->
|
||||
@ -116,222 +51,17 @@
|
||||
|
||||
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||
<label
|
||||
class="modal-box w-full relative bg-[#09090B] border border-gray-800 h-auto"
|
||||
class="modal-box w-full relative bg-[#27272A] border border-gray-800 h-auto"
|
||||
>
|
||||
<label
|
||||
for="marketHour"
|
||||
class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-2xl text-white"
|
||||
class="cursor-pointer absolute right-5 top-2 bg-[#27272A] text-2xl text-white"
|
||||
>
|
||||
✕
|
||||
</label>
|
||||
|
||||
<h3 class="text-2xl font-bold text-white">
|
||||
Opening Hours
|
||||
{#if isOpen}
|
||||
<svg
|
||||
class="ml-2 floating inline-block w-8 h-8 sm:w-12 sm:h-12 relative right-0 top-0"
|
||||
viewBox="0 0 32 32"
|
||||
enable-background="new 0 0 32 32"
|
||||
version="1.1"
|
||||
xml:space="preserve"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
fill="#000000"
|
||||
><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
|
||||
id="SVGRepo_tracerCarrier"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></g><g id="SVGRepo_iconCarrier">
|
||||
<g id="Layer_2"></g> <g id="Layer_3"></g> <g id="Layer_4"></g>
|
||||
<g id="Layer_5"></g> <g id="Layer_6"></g> <g id="Layer_7"></g>
|
||||
<g id="Layer_8"></g> <g id="Layer_9"></g> <g id="Layer_10"></g>
|
||||
<g id="Layer_11"></g> <g id="Layer_12"></g> <g id="Layer_13"></g>
|
||||
<g id="Layer_14"></g> <g id="Layer_15"></g> <g id="Layer_16"></g>
|
||||
<g id="Layer_17"></g> <g id="Layer_18"></g> <g id="Layer_19"></g>
|
||||
<g id="Layer_20"></g>
|
||||
<g id="Layer_21">
|
||||
<g>
|
||||
<path
|
||||
d="M26,16c0,5.5-4.5,10-10,10S6,21.5,6,16S10.5,6,16,6S26,10.5,26,16z"
|
||||
fill="#FFC10A"
|
||||
></path>
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="M16,1c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1s1-0.4,1-1V2C17,1.4,16.6,1,16,1z"
|
||||
fill="#F44236"
|
||||
></path>
|
||||
<path
|
||||
d="M16,27c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1s1-0.4,1-1v-2C17,27.4,16.6,27,16,27z"
|
||||
fill="#F44236"
|
||||
></path>
|
||||
<path
|
||||
d="M30,15h-2c-0.6,0-1,0.4-1,1s0.4,1,1,1h2c0.6,0,1-0.4,1-1S30.6,15,30,15z"
|
||||
fill="#F44236"
|
||||
></path>
|
||||
<path
|
||||
d="M4,15H2c-0.6,0-1,0.4-1,1s0.4,1,1,1h2c0.6,0,1-0.4,1-1S4.6,15,4,15z"
|
||||
fill="#F44236"
|
||||
></path>
|
||||
<path
|
||||
d="M25.2,5.4l-1.4,1.4c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l1.4-1.4 c0.4-0.4,0.4-1,0-1.4S25.6,5,25.2,5.4z"
|
||||
fill="#F44236"
|
||||
></path>
|
||||
<path
|
||||
d="M6.8,23.8l-1.4,1.4c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l1.4-1.4 c0.4-0.4,0.4-1,0-1.4S7.2,23.4,6.8,23.8z"
|
||||
fill="#F44236"
|
||||
></path>
|
||||
<path
|
||||
d="M6.8,5.4C6.4,5,5.8,5,5.4,5.4s-0.4,1,0,1.4l1.4,1.4C7,8.4,7.3,8.5,7.5,8.5S8,8.4,8.2,8.2 c0.4-0.4,0.4-1,0-1.4L6.8,5.4z"
|
||||
fill="#F44236"
|
||||
></path>
|
||||
<path
|
||||
d="M25.2,23.8c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l1.4,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L25.2,23.8z"
|
||||
fill="#F44236"
|
||||
></path>
|
||||
</g>
|
||||
</g> <g id="Layer_22"></g> <g id="Layer_23"></g>
|
||||
<g id="Layer_24"></g> <g id="Layer_25"></g> <g id="Wearher"></g>
|
||||
</g></svg
|
||||
>
|
||||
{:else}
|
||||
<svg
|
||||
class="ml-2 floating inline-block w-8 h-8 sm:w-12 sm:h-12 relative right-0 top-0"
|
||||
viewBox="0 0 12.7 12.7"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
fill="#000000"
|
||||
><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
|
||||
id="SVGRepo_tracerCarrier"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></g><g id="SVGRepo_iconCarrier">
|
||||
<defs id="defs2">
|
||||
<clipPath clipPathUnits="userSpaceOnUse" id="clipPath5343">
|
||||
<path
|
||||
d="m 3.0688351,285.55677 c -1.613568,1.19596 -2.5662181,3.08478 -2.56883509,5.09323 0,3.50701 2.84299219,6.35 6.35000009,6.35 C 10.357008,297 13.2,294.15701 13.2,290.65 c -0.0022,-0.84296 -0.452078,-2.71271 -0.500228,-2.45359 -0.02424,0.84121 -0.571809,2.35322 -0.602031,2.23138 -0.0026,-0.50621 -0.2876,-1.42626 -0.305098,-1.19509 0.02804,1.40695 -1.48374,3.17677 -2.3076623,3.50038 -0.8310457,0.36942 -1.7371637,0.56412 -2.6117267,0.56534 -0.1736918,2e-5 -1.1686519,-0.13807 -1.6443439,-0.70435 -0.826376,-0.89253 -0.00201,-1.09994 0.4625039,-1.27331 0.5055862,-0.18871 1.030887,-0.30969 1.5203212,-0.42013 0.7456988,-0.16826 0.4710618,-0.52626 0.1049028,-0.6289 -0.9266939,-0.25976 -2.044886,0.33543 -2.8654579,0.30593 -0.848406,-0.0291 -0.804618,-1.69621 -0.1405601,-1.76217 0.7394212,-0.0734 1.6665151,-0.51079 1.461779,-0.65673 -0.8303549,-0.61672 -0.9617369,-0.79081 -1.0595549,-1.16418 -0.1480201,-0.565 0.341282,-1.03557 0.05777,-0.96356 -0.2596169,0.08 -0.4110678,0.15641 -0.5988619,0.25715 -0.1672929,0.0897 -0.293814,0.0546 -0.6751841,0.002 -0.3249449,-0.045 -0.3870058,-0.0557 -0.3755009,-0.25673 0.0115,-0.20097 0.07295,-0.52125 -0.05223,-0.47648 z"
|
||||
id="path5345"
|
||||
style="fill:#7aafff;fill-opacity:1;stroke:none;stroke-width:2.01045942;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
></path>
|
||||
</clipPath>
|
||||
<clipPath clipPathUnits="userSpaceOnUse" id="clipPath4543">
|
||||
<path
|
||||
d="m 1.7760088,291.5696 c -1.82613339,0.17434 -3.2940315,0.91934 -3.4903996,2.16451 -0.2629054,1.66729 1.5678591,3.34127 4.0891213,3.73893 1.2172084,0.19119 2.434234,0.053 3.3807423,-0.38387 0.7310194,0.5283 1.669357,0.90078 2.6704721,1.06008 2.5212691,0.39771 4.7783381,-0.6315 5.0412801,-2.2988 0.262905,-1.6673 -1.490667,-1.94329 -4.257163,-2.17938 -2.7664958,-0.23609 -3.6163896,-1.68839 -5.7470448,-2.04575 -0.5660191,-0.0893 -1.1380808,-0.10817 -1.6870084,-0.0557 z"
|
||||
id="path4545"
|
||||
style="opacity:1;vector-effect:none;fill:#666666;fill-opacity:1;stroke:none;stroke-width:2.11666656;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
></path>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="layer1" transform="translate(0,-284.3)">
|
||||
<circle
|
||||
cx="6.3499999"
|
||||
cy="290.64999"
|
||||
id="path4514"
|
||||
r="6.3499999"
|
||||
style="fill:#3584e4;fill-opacity:1;stroke:none;stroke-width:1.74658811;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
></circle>
|
||||
<path
|
||||
clip-path="url(#clipPath4543)"
|
||||
d="m 12.7,290.64999 a 6.3499999,6.3499999 0 0 1 -6.3500001,6.35 A 6.3499999,6.3499999 0 0 1 0,290.64999 a 6.3499999,6.3499999 0 0 1 6.3499999,-6.35 6.3499999,6.3499999 0 0 1 6.3500001,6.35 z"
|
||||
id="path4514-3"
|
||||
style="fill:#666666;fill-opacity:1;stroke:none;stroke-width:1.74658811;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
></path>
|
||||
<g
|
||||
id="g4677-9"
|
||||
style="fill:#5b99f8;fill-opacity:1"
|
||||
transform="translate(-9.1524958,-3.5249232)"
|
||||
>
|
||||
<path
|
||||
d="m 19.567458,291.77561 a 2.4866811,2.4866811 0 0 0 -0.468992,-0.36467 2.4866811,2.4866811 0 0 1 -0.365116,3.04734 2.4866811,2.4866811 0 0 1 -3.04646,0.366 2.4866811,2.4866811 0 0 0 0.364231,0.46766 2.4866811,2.4866811 0 0 0 3.516337,4.5e-4 2.4866811,2.4866811 0 0 0 0,-3.51678 z"
|
||||
id="path4526-69"
|
||||
style="opacity:1;vector-effect:none;fill:#5b99f8;fill-opacity:1;stroke:none;stroke-width:2.56050229;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
></path>
|
||||
<path
|
||||
d="m 6.4185145,294.23299 -0.3566249,-0.25394 -0.3566249,0.25394 0.041602,-0.43582 -0.3982267,-0.18187 0.3982267,-0.18188 -0.041602,-0.43582 0.356625,0.25394 0.3566249,-0.25394 -0.041602,0.43582 0.3982267,0.18188 -0.3982267,0.18187 z"
|
||||
id="path4561-33"
|
||||
style="opacity:1;vector-effect:none;fill:#5b99f8;fill-opacity:1;stroke:none;stroke-width:1.59991646;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
transform="matrix(1.1168881,-0.64483565,0.64483565,1.1168881,-183.37821,-32.491666)"
|
||||
></path>
|
||||
<circle
|
||||
cx="11.315855"
|
||||
cy="293.72394"
|
||||
id="path4621-8"
|
||||
r="0.30267826"
|
||||
style="opacity:1;vector-effect:none;fill:#5b99f8;fill-opacity:1;stroke:none;stroke-width:2.98949623;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
></circle>
|
||||
<circle
|
||||
cx="15.575421"
|
||||
cy="290.22079"
|
||||
id="path4625-0"
|
||||
r="0.35826889"
|
||||
style="opacity:1;vector-effect:none;fill:#5b99f8;fill-opacity:1;stroke:none;stroke-width:3.69939804;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
></circle>
|
||||
<circle
|
||||
cx="17.168623"
|
||||
cy="292.01489"
|
||||
id="path4625-5-5"
|
||||
r="0.22649699"
|
||||
style="opacity:1;vector-effect:none;fill:#5b99f8;fill-opacity:1;stroke:none;stroke-width:2.33875299;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
></circle>
|
||||
<path
|
||||
d="m 6.4185145,294.23299 -0.3566249,-0.25394 -0.3566249,0.25394 0.041602,-0.43582 -0.3982267,-0.18187 0.3982267,-0.18188 -0.041602,-0.43582 0.356625,0.25394 0.3566249,-0.25394 -0.041602,0.43582 0.3982267,0.18188 -0.3982267,0.18187 z"
|
||||
id="path4561-1-6"
|
||||
style="opacity:1;vector-effect:none;fill:#5b99f8;fill-opacity:1;stroke:none;stroke-width:1.59991646;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
transform="matrix(0.68730172,-0.39681385,0.39681385,0.68730172,-106.13796,94.279576)"
|
||||
></path>
|
||||
</g>
|
||||
<g id="g4677" transform="translate(-9.3294517,-3.7423224)">
|
||||
<path
|
||||
d="m 19.567458,291.77561 a 2.4866811,2.4866811 0 0 0 -0.468992,-0.36467 2.4866811,2.4866811 0 0 1 -0.365116,3.04734 2.4866811,2.4866811 0 0 1 -3.04646,0.366 2.4866811,2.4866811 0 0 0 0.364231,0.46766 2.4866811,2.4866811 0 0 0 3.516337,4.5e-4 2.4866811,2.4866811 0 0 0 0,-3.51678 z"
|
||||
id="path4526"
|
||||
style="opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.56050229;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
></path>
|
||||
<path
|
||||
d="m 6.4185145,294.23299 -0.3566249,-0.25394 -0.3566249,0.25394 0.041602,-0.43582 -0.3982267,-0.18187 0.3982267,-0.18188 -0.041602,-0.43582 0.356625,0.25394 0.3566249,-0.25394 -0.041602,0.43582 0.3982267,0.18188 -0.3982267,0.18187 z"
|
||||
id="path4561"
|
||||
style="opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.59991646;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
transform="matrix(1.1168881,-0.64483565,0.64483565,1.1168881,-183.37821,-32.491666)"
|
||||
></path>
|
||||
<circle
|
||||
cx="11.315855"
|
||||
cy="293.72394"
|
||||
id="path4621"
|
||||
r="0.30267826"
|
||||
style="opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.98949623;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
></circle>
|
||||
<circle
|
||||
cx="15.575421"
|
||||
cy="290.22079"
|
||||
id="path4625"
|
||||
r="0.35826889"
|
||||
style="opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.69939804;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
></circle>
|
||||
<circle
|
||||
cx="17.168623"
|
||||
cy="292.01489"
|
||||
id="path4625-5"
|
||||
r="0.22649699"
|
||||
style="opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.33875299;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
></circle>
|
||||
<path
|
||||
d="m 6.4185145,294.23299 -0.3566249,-0.25394 -0.3566249,0.25394 0.041602,-0.43582 -0.3982267,-0.18187 0.3982267,-0.18188 -0.041602,-0.43582 0.356625,0.25394 0.3566249,-0.25394 -0.041602,0.43582 0.3982267,0.18188 -0.3982267,0.18187 z"
|
||||
id="path4561-1"
|
||||
style="opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.59991646;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
transform="matrix(0.68730172,-0.39681385,0.39681385,0.68730172,-106.13796,94.279576)"
|
||||
></path>
|
||||
</g>
|
||||
</g>
|
||||
</g></svg
|
||||
>
|
||||
{/if}
|
||||
</h3>
|
||||
<p class="py-4 text-gray-200 bg-[#09090B] w-full">
|
||||
<h3 class="text-2xl font-bold text-white">Opening Hours</h3>
|
||||
<p class="py-4 text-gray-200 bg-[#27272A] w-full">
|
||||
The New York Stock Exchange, one of the largest stock exchanges in the
|
||||
world, operates on a regular trading schedule. Its trading hours are from <span
|
||||
class="text-white font-semibold underline">9:30</span
|
||||
@ -345,15 +75,15 @@
|
||||
</p>
|
||||
|
||||
<table
|
||||
class="table table-sm table-compact bg-[#09090B] w-full mt-5 mb-10 text-white"
|
||||
class="table table-sm table-compact bg-[#27272A] w-full mt-5 mb-10 text-white"
|
||||
>
|
||||
<!-- head -->
|
||||
<thead>
|
||||
<tr class="border-b border-slate-700 odd:bg-[#27272A]">
|
||||
<th class="bg-[#09090B] text-white text-sm font-semibold">
|
||||
<th class="bg-[#27272A] text-white text-sm font-semibold">
|
||||
Exchange holidays
|
||||
</th>
|
||||
<th class="bg-[#09090B] text-white text-sm font-semibold"> Date </th>
|
||||
<th class="bg-[#27272A] text-white text-sm font-semibold"> Date </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -373,7 +103,7 @@
|
||||
</tr>
|
||||
<tr class="border-b border-slate-700 odd:bg-[#27272A]">
|
||||
<td class="font-semibold"> Good Friday </td>
|
||||
<td class="bg-[#09090B]">29.03.2024</td>
|
||||
<td class="bg-[#27272A]">29.03.2024</td>
|
||||
</tr>
|
||||
<tr class="border-b border-slate-700 odd:bg-[#27272A]">
|
||||
<td class="font-semibold">Memorial Day</td>
|
||||
|
||||
@ -8,23 +8,10 @@
|
||||
import ArrowUpRight from "lucide-svelte/icons/arrow-up-right";
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
import * as Tabs from "$lib/components/shadcn/tabs/index.js";
|
||||
import HoverStockChart from "$lib/components/HoverStockChart.svelte";
|
||||
|
||||
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
|
||||
|
||||
/*
|
||||
import { Chart } from 'svelte-echarts'
|
||||
import { init, use } from 'echarts/core'
|
||||
import { BarChart } from 'echarts/charts'
|
||||
import { GridComponent } from 'echarts/components'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
|
||||
// now with tree-shaking
|
||||
use([BarChart, GridComponent, CanvasRenderer])
|
||||
*/
|
||||
|
||||
export let data;
|
||||
let isLoaded = false;
|
||||
let optionsMode = "premium";
|
||||
|
||||
function compareTimes(time1, time2) {
|
||||
@ -96,7 +83,6 @@
|
||||
let Feedback;
|
||||
|
||||
onMount(async () => {
|
||||
isLoaded = true;
|
||||
Feedback = (await import("$lib/components/Feedback.svelte")).default;
|
||||
});
|
||||
|
||||
@ -221,11 +207,11 @@
|
||||
Clear & <span class="italic text-[#fff]">Simple</span> Market Insight.
|
||||
</h1>
|
||||
|
||||
<h1
|
||||
<h2
|
||||
class="text-white text-2xl font-semibold text-start w-full pb-4 sm:pl-4 sm:pb-2"
|
||||
>
|
||||
Dashboard
|
||||
</h1>
|
||||
</h2>
|
||||
|
||||
<main class="flex flex-1 flex-col gap-4 sm:p-4 md:gap-8">
|
||||
<div class="grid gap-4 md:gap-8 grid-cols-1 lg:grid-cols-2 text-start">
|
||||
@ -285,7 +271,9 @@
|
||||
{#each gainersList as item}
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<HoverStockChart symbol={item?.symbol} />
|
||||
{#await import("$lib/components/HoverStockChart.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} symbol={item?.symbol} />
|
||||
{/await}
|
||||
</Table.Cell>
|
||||
<Table.Cell
|
||||
class="hidden sm:table-cell xl:table.-column text-sm sm:text-[1rem]"
|
||||
@ -378,7 +366,9 @@
|
||||
{#each losersList as item}
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<HoverStockChart symbol={item?.symbol} />
|
||||
{#await import("$lib/components/HoverStockChart.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} symbol={item?.symbol} />
|
||||
{/await}
|
||||
</Table.Cell>
|
||||
<Table.Cell
|
||||
class="hidden sm:table-cell xl:table.-column text-sm sm:text-[1rem]"
|
||||
@ -495,10 +485,13 @@
|
||||
{#each optionsTable as item}
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<HoverStockChart
|
||||
symbol={item?.ticker}
|
||||
assetType={item?.underlying_type}
|
||||
/>
|
||||
{#await import("$lib/components/HoverStockChart.svelte") then { default: Comp }}
|
||||
<svelte:component
|
||||
this={Comp}
|
||||
symbol={item?.ticker}
|
||||
assetType={item?.underlying_type}
|
||||
/>
|
||||
{/await}
|
||||
</Table.Cell>
|
||||
<Table.Cell
|
||||
class="text-right xl:table.-column text-sm sm:text-[1rem] {item?.put_call ===
|
||||
@ -560,11 +553,13 @@
|
||||
{#if data?.getDashboard?.recentDividends?.length !== 0}
|
||||
<ul style="padding-left: 5px;">
|
||||
{#each data?.getDashboard?.recentDividends as item}
|
||||
<strong>{item?.name}</strong> (<HoverStockChart
|
||||
symbol={item?.symbol}
|
||||
/>) has announced its upcoming dividend details as of {convertTimestamp(
|
||||
item?.updated,
|
||||
)}:
|
||||
<strong>{item?.name}</strong>
|
||||
({#await import("$lib/components/HoverStockChart.svelte") then { default: Comp }}
|
||||
<svelte:component
|
||||
this={Comp}
|
||||
symbol={item?.symbol}
|
||||
/>{/await}) has announced its upcoming dividend details as
|
||||
of {convertTimestamp(item?.updated)}:
|
||||
|
||||
<li
|
||||
style="color: #fff; line-height: 22px; margin-top:10px; margin-left: 30px; margin-bottom: 10px; list-style-type: disc;"
|
||||
@ -666,9 +661,12 @@
|
||||
<li
|
||||
style="margin-left: 8px; line-height: 22px; margin-bottom: 30px; list-style-type: disc;"
|
||||
>
|
||||
<strong>{item?.name}</strong> (<HoverStockChart
|
||||
symbol={item?.symbol}
|
||||
/>)
|
||||
<strong>{item?.name}</strong>
|
||||
({#await import("$lib/components/HoverStockChart.svelte") then { default: Comp }}
|
||||
<svelte:component
|
||||
this={Comp}
|
||||
symbol={item?.symbol}
|
||||
/>{/await})
|
||||
{item?.isToday === true
|
||||
? "will report today"
|
||||
: [
|
||||
@ -743,9 +741,12 @@
|
||||
{#if data?.getDashboard?.recentEarnings?.length !== 0}
|
||||
<ul style="padding-left: 5px;">
|
||||
{#each data?.getDashboard?.recentEarnings as item}
|
||||
<strong>{item?.name}</strong> (<HoverStockChart
|
||||
symbol={item?.symbol}
|
||||
/>) has released its quarterly earnings at {formatTime(
|
||||
<strong>{item?.name}</strong>
|
||||
({#await import("$lib/components/HoverStockChart.svelte") then { default: Comp }}
|
||||
<svelte:component
|
||||
this={Comp}
|
||||
symbol={item?.symbol}
|
||||
/>{/await}) has released its quarterly earnings at {formatTime(
|
||||
item?.time,
|
||||
)}:
|
||||
|
||||
@ -808,25 +809,6 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.app {
|
||||
height: 250px;
|
||||
max-width: 100%; /* Ensure chart width doesn't exceed the container */
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.app {
|
||||
height: 210px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
}
|
||||
.scrollbar {
|
||||
display: grid;
|
||||
grid-gap: 90px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user