update hover chart
This commit is contained in:
MuslemRahimi
parent
b44f381e48
commit
08e738352e
@ -8,6 +8,7 @@
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
import { afterUpdate } from "svelte";
|
||||
export let symbol;
|
||||
export let assetType = "stock";
|
||||
|
||||
let priceData = [];
|
||||
let changesPercentage = 0;
|
||||
@ -48,6 +49,21 @@
|
||||
);
|
||||
}
|
||||
|
||||
function getHref(symbol: string) {
|
||||
let path = "";
|
||||
if (symbol?.length !== 0) {
|
||||
if (assetType?.toLowerCase() === "stock") {
|
||||
path = `/stocks/${symbol}`;
|
||||
} else if (assetType?.toLowerCase() === "etf") {
|
||||
path = `/etf/${symbol}`;
|
||||
} else if (["BTC", "USD"]?.includes(symbol)) {
|
||||
path = "";
|
||||
} else {
|
||||
path = `/crypto/${symbol}`;
|
||||
}
|
||||
}
|
||||
return path;
|
||||
}
|
||||
const topLineColor = "#71CA96";
|
||||
const topFillColor1 = "rgba( 38, 166, 154, 0.2)";
|
||||
const bottomLineColor = "#FF7070";
|
||||
@ -156,19 +172,13 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<div on:mouseover={() => getStockData(symbol)}>
|
||||
<div on:mouseover={() => getStockData(symbol)} class="inline-block">
|
||||
<HoverCard.Root>
|
||||
<div on:mouseover>
|
||||
<HoverCard.Trigger
|
||||
class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
|
||||
>
|
||||
<a
|
||||
href={symbol?.length !== 0 && !["BTC", "USD"]?.includes(symbol)
|
||||
? `/stocks/${symbol}`
|
||||
: symbol === "BTC"
|
||||
? "/crypto/BTCUSD"
|
||||
: ""}
|
||||
class="sm:hover:text-white text-blue-400"
|
||||
<a href={getHref(symbol)} class="sm:hover:text-white text-blue-400"
|
||||
>{symbol?.length !== 0 ? symbol : "-"}</a
|
||||
>
|
||||
</HoverCard.Trigger>
|
||||
|
||||
@ -337,6 +337,7 @@ const handleTwitchMessage = (event) => {
|
||||
>Top Analyst</a
|
||||
>
|
||||
</Button>
|
||||
<!--
|
||||
<Button
|
||||
builders={[builder]}
|
||||
type="submit"
|
||||
@ -348,6 +349,7 @@ const handleTwitchMessage = (event) => {
|
||||
>Top Analyst Stocks</a
|
||||
>
|
||||
</Button>
|
||||
-->
|
||||
<Button
|
||||
builders={[builder]}
|
||||
type="submit"
|
||||
@ -941,11 +943,13 @@ const handleTwitchMessage = (event) => {
|
||||
class="text-[1rem] text-white ml-4 mt-4"
|
||||
>Top Analyst</a
|
||||
>
|
||||
<!--
|
||||
<a
|
||||
href="/analysts/top-stocks"
|
||||
class="text-[1rem] text-white ml-4 mt-4"
|
||||
>Top Analyst Stocks</a
|
||||
>
|
||||
-->
|
||||
<a
|
||||
href="/most-shorted-stocks"
|
||||
class="text-[1rem] text-white ml-4 mt-4"
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
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";
|
||||
|
||||
@ -267,11 +268,7 @@
|
||||
{#each gainersList as item}
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<a
|
||||
href={`/stocks/${item?.symbol}`}
|
||||
class="text-sm sm:text-[1rem] font-medium text-blue-400 sm:hover:text-white transition duration-100"
|
||||
>{item?.symbol}</a
|
||||
>
|
||||
<HoverStockChart symbol={item?.symbol} />
|
||||
</Table.Cell>
|
||||
<Table.Cell
|
||||
class="hidden sm:table-cell xl:table.-column text-sm sm:text-[1rem]"
|
||||
@ -348,11 +345,7 @@
|
||||
{#each losersList as item}
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<a
|
||||
href={`/stocks/${item?.symbol}`}
|
||||
class="text-sm sm:text-[1rem] font-medium text-blue-400 sm:hover:text-white transition duration-100"
|
||||
>{item?.symbol}</a
|
||||
>
|
||||
<HoverStockChart symbol={item?.symbol} />
|
||||
</Table.Cell>
|
||||
<Table.Cell
|
||||
class="hidden sm:table-cell xl:table.-column text-sm sm:text-[1rem]"
|
||||
@ -469,13 +462,10 @@
|
||||
{#each optionsTable as item}
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<a
|
||||
href={item?.underlying_type === "stock"
|
||||
? `/stocks/${item?.ticker}`
|
||||
: `/etf/${item?.ticker}`}
|
||||
class="text-sm sm:text-[1rem] font-medium text-blue-400 sm:hover:text-white transition duration-100"
|
||||
>{item?.ticker}</a
|
||||
>
|
||||
<HoverStockChart
|
||||
symbol={item?.ticker}
|
||||
assetType={item?.underlying_type}
|
||||
/>
|
||||
</Table.Cell>
|
||||
<Table.Cell
|
||||
class="text-right xl:table.-column text-sm sm:text-[1rem] {item?.put_call ===
|
||||
@ -537,11 +527,9 @@
|
||||
{#if data?.getDashboard?.recentDividends?.length !== 0}
|
||||
<ul style="padding-left: 5px;">
|
||||
{#each data?.getDashboard?.recentDividends as item}
|
||||
<strong>{item?.name}</strong> (<a
|
||||
href="/stocks/{item?.symbol}"
|
||||
class="sm:hover:text-white text-blue-400"
|
||||
>{item?.symbol}</a
|
||||
>) has announced its upcoming dividend details as of {convertTimestamp(
|
||||
<strong>{item?.name}</strong> (<HoverStockChart
|
||||
symbol={item?.symbol}
|
||||
/>) has announced its upcoming dividend details as of {convertTimestamp(
|
||||
item?.updated,
|
||||
)}:
|
||||
|
||||
@ -645,11 +633,9 @@
|
||||
<li
|
||||
style="margin-left: 8px; line-height: 22px; margin-bottom: 30px; list-style-type: disc;"
|
||||
>
|
||||
<strong>{item?.name}</strong> (<a
|
||||
href="/stocks/{item?.symbol}"
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
>{item?.symbol}</a
|
||||
>)
|
||||
<strong>{item?.name}</strong> (<HoverStockChart
|
||||
symbol={item?.symbol}
|
||||
/>)
|
||||
{item?.isToday === true
|
||||
? "will report today"
|
||||
: [
|
||||
@ -724,11 +710,9 @@
|
||||
{#if data?.getDashboard?.recentEarnings?.length !== 0}
|
||||
<ul style="padding-left: 5px;">
|
||||
{#each data?.getDashboard?.recentEarnings as item}
|
||||
<strong>{item?.name}</strong> (<a
|
||||
href="/stocks/{item?.symbol}"
|
||||
class="sm:hover:text-white text-blue-400"
|
||||
>{item?.symbol}</a
|
||||
>) has released its quarterly earnings at {formatTime(
|
||||
<strong>{item?.name}</strong> (<HoverStockChart
|
||||
symbol={item?.symbol}
|
||||
/>) has released its quarterly earnings at {formatTime(
|
||||
item?.time,
|
||||
)}:
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
displayCompanyName,
|
||||
} from "$lib/store";
|
||||
import { Button } from "$lib/components/shadcn/button/index.js";
|
||||
import { screenWidth, getCache, setCache } from "$lib/store";
|
||||
import { screenWidth } from "$lib/store";
|
||||
import { abbreviateNumber, formatString } from "$lib/utils";
|
||||
import { onMount } from "svelte";
|
||||
import { goto } from "$app/navigation";
|
||||
|
||||
@ -93,7 +93,7 @@
|
||||
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
||||
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
|
||||
<div
|
||||
class="w-full bg-[#27272A] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer"
|
||||
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
|
||||
>
|
||||
<a
|
||||
href={"/pricing"}
|
||||
@ -113,7 +113,7 @@
|
||||
{/if}
|
||||
|
||||
<div
|
||||
class="w-full bg-[#27272A] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer"
|
||||
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
|
||||
>
|
||||
<a
|
||||
href={"/analysts"}
|
||||
@ -132,7 +132,7 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full bg-[#27272A] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer"
|
||||
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
|
||||
>
|
||||
<a
|
||||
href={"/politicians"}
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
|
||||
import { onMount } from "svelte";
|
||||
import TableHeader from "$lib/components/Table/TableHeader.svelte";
|
||||
import HoverStockChart from "$lib/components/HoverStockChart.svelte";
|
||||
|
||||
export let data;
|
||||
let rawData = data?.getETFProviderData;
|
||||
@ -226,12 +227,7 @@
|
||||
<td
|
||||
class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
|
||||
>
|
||||
<a
|
||||
href={"/etf/" + item?.symbol}
|
||||
class="sm:hover:text-white text-blue-400"
|
||||
>
|
||||
{item?.symbol}
|
||||
</a>
|
||||
<HoverStockChart symbol={item?.symbol} assetType={"etf"} />
|
||||
</td>
|
||||
|
||||
<td
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user