update overview forecast
This commit is contained in:
MuslemRahimi
parent
b5bed6cfea
commit
400ea21052
@ -3,6 +3,7 @@
|
||||
import { abbreviateNumber, computeGrowthSingleList } from "$lib/utils";
|
||||
import EstimationGraph from "$lib/components/EstimationGraph.svelte";
|
||||
import Lazy from "svelte-lazy";
|
||||
import { mode } from "mode-watcher";
|
||||
|
||||
export let data;
|
||||
|
||||
@ -323,8 +324,8 @@
|
||||
},
|
||||
chart: {
|
||||
type: "line",
|
||||
backgroundColor: "#09090B",
|
||||
plotBackgroundColor: "#09090B",
|
||||
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
|
||||
plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
|
||||
height: 360,
|
||||
animation: false,
|
||||
},
|
||||
@ -345,14 +346,14 @@
|
||||
borderRadius: 4,
|
||||
formatter: function () {
|
||||
// Format the x value to display time in hh:mm format
|
||||
let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">${
|
||||
let tooltipContent = `<span class=" m-auto text-[1rem] font-[501]">${
|
||||
this?.x
|
||||
}</span><br>`;
|
||||
|
||||
// Loop through each point in the shared tooltip
|
||||
this.points?.forEach((point) => {
|
||||
tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span>
|
||||
<span class="text-white font-normal text-sm" >${abbreviateNumber(
|
||||
tooltipContent += `<span class=" font-semibold text-sm">${point.series.name}:</span>
|
||||
<span class=" font-normal text-sm" >${abbreviateNumber(
|
||||
point.y,
|
||||
)}</span><br>`;
|
||||
});
|
||||
@ -366,23 +367,23 @@
|
||||
endOnTick: false,
|
||||
categories: dates,
|
||||
crosshair: {
|
||||
color: "#fff", // Set the color of the crosshair line
|
||||
color: $mode === "light" ? "black" : "white", // Set the color of the crosshair line
|
||||
width: 1, // Adjust the line width as needed
|
||||
dashStyle: "Solid",
|
||||
},
|
||||
|
||||
labels: {
|
||||
style: {
|
||||
color: "#fff",
|
||||
color: $mode === "light" ? "black" : "white",
|
||||
fontSize: "12px",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
gridLineWidth: 1,
|
||||
gridLineColor: "#111827",
|
||||
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
|
||||
labels: {
|
||||
style: { color: "white" },
|
||||
style: { color: $mode === "light" ? "black" : "white" },
|
||||
},
|
||||
title: { text: null },
|
||||
opposite: true,
|
||||
@ -391,13 +392,13 @@
|
||||
{
|
||||
name: "Actual",
|
||||
data: valueList,
|
||||
color: "#fff",
|
||||
color: $mode === "light" ? "#2C6288" : "white",
|
||||
animation: false,
|
||||
},
|
||||
{
|
||||
name: "Avg",
|
||||
data: avgList,
|
||||
color: "#fff",
|
||||
color: $mode === "light" ? "#2C6288" : "white",
|
||||
dashStyle: "Dash", // Dashed line style
|
||||
animation: false,
|
||||
marker: {
|
||||
@ -408,14 +409,14 @@
|
||||
name: "Low",
|
||||
data: lowList,
|
||||
// If you want a dashed line with a different color, set the series color to that color.
|
||||
color: "#c2c7cf",
|
||||
color: $mode === "light" ? "#8AAAC0" : "#c2c7cf",
|
||||
dashStyle: "Dash",
|
||||
animation: false,
|
||||
},
|
||||
{
|
||||
name: "High",
|
||||
data: highList,
|
||||
color: "#c2c7cf",
|
||||
color: $mode === "light" ? "#8AAAC0" : "#c2c7cf",
|
||||
dashStyle: "Dash",
|
||||
animation: false,
|
||||
},
|
||||
@ -466,8 +467,8 @@
|
||||
},
|
||||
chart: {
|
||||
type: "column",
|
||||
backgroundColor: "#09090B",
|
||||
plotBackgroundColor: "#09090B",
|
||||
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
|
||||
plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
|
||||
height: 360,
|
||||
animation: false,
|
||||
},
|
||||
@ -481,7 +482,7 @@
|
||||
borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border
|
||||
borderWidth: 1,
|
||||
style: {
|
||||
color: "#fff",
|
||||
color: "white",
|
||||
fontSize: "14px",
|
||||
padding: "10px",
|
||||
},
|
||||
@ -517,16 +518,16 @@
|
||||
type: "datetime",
|
||||
labels: {
|
||||
style: {
|
||||
color: "#fff",
|
||||
color: $mode === "light" ? "black" : "white",
|
||||
fontSize: "12px",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
gridLineWidth: 1,
|
||||
gridLineColor: "#111827",
|
||||
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
|
||||
labels: {
|
||||
style: { color: "white" },
|
||||
style: { color: $mode === "light" ? "black" : "white" },
|
||||
},
|
||||
title: { text: null },
|
||||
opposite: true,
|
||||
@ -545,8 +546,18 @@
|
||||
data: growthList?.map((value) => ({
|
||||
y: value,
|
||||
// Set color based on the sign of the value
|
||||
color: value >= 0 ? "#00FC50" : "#ED3333",
|
||||
borderColor: value >= 0 ? "#00FC50" : "#ED3333",
|
||||
color:
|
||||
value >= 0
|
||||
? $mode === "light"
|
||||
? "#338D73"
|
||||
: "#00FC50"
|
||||
: "#ED3333",
|
||||
borderColor:
|
||||
value >= 0
|
||||
? $mode === "light"
|
||||
? "#338D73"
|
||||
: "#00FC50"
|
||||
: "#ED3333",
|
||||
borderRadius: "1px",
|
||||
})),
|
||||
zIndex: 5,
|
||||
@ -562,8 +573,8 @@
|
||||
// If either high or low is null/undefined, return nulls.
|
||||
return high != null && low != null ? [low, high] : [null, null];
|
||||
}),
|
||||
color: "#fff",
|
||||
lineWidth: 2, // Thicker lines for error bars
|
||||
color: $mode === "light" ? "black" : "white",
|
||||
lineWidth: 1, // Thicker lines for error bars
|
||||
whiskerLength: 10, // Adjust whisker length as needed
|
||||
zIndex: 10,
|
||||
// Disable tooltip for error bar points
|
||||
@ -740,7 +751,7 @@
|
||||
}
|
||||
|
||||
$: {
|
||||
if ($stockTicker && typeof window !== "undefined") {
|
||||
if ($stockTicker || $mode) {
|
||||
isLoaded = false;
|
||||
analystEstimateList = [];
|
||||
analystEstimateList = data?.getAnalystEstimate || [];
|
||||
@ -759,7 +770,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="overflow-hidden text-white h-full pb-8 sm:pb-2">
|
||||
<section class="overflow-hidden h-full pb-8 sm:pb-2">
|
||||
<main class="overflow-hidden">
|
||||
<div class="w-full m-auto">
|
||||
<div class="flex flex-row items-center"></div>
|
||||
@ -767,36 +778,30 @@
|
||||
{#if isLoaded}
|
||||
{#if analystEstimateList?.length !== 0}
|
||||
<div
|
||||
class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto overflow-x-auto pr-5 sm:pr-0"
|
||||
class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-2 m-auto overflow-x-auto pr-5 sm:pr-0"
|
||||
>
|
||||
<table
|
||||
class="table table-sm table-pin-cols table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800"
|
||||
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
|
||||
>
|
||||
<thead class="">
|
||||
<thead class="text-muted dark:text-white">
|
||||
<tr class="">
|
||||
<th
|
||||
class="bg-primary border-b border-[#000] text-white font-semibold text-sm text-start"
|
||||
>Fiscal Year</th
|
||||
>
|
||||
<th class=" font-semibold text-sm text-start">Fiscal Year</th>
|
||||
{#each xData as item}
|
||||
<td
|
||||
class="z-20 bg-primary border-b border-[#000] text-white font-semibold text-sm text-end bg-default"
|
||||
<td class="z-20 font-semibold text-sm text-end"
|
||||
>{"FY" + item}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="bg-primary border-b border-gray-600">
|
||||
<tr class=" ">
|
||||
<th
|
||||
class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-normal bg-primary border-b border-gray-800"
|
||||
class=" whitespace-nowrap text-sm sm:text-[1rem] text-start font-normal"
|
||||
>
|
||||
Revenue
|
||||
</th>
|
||||
{#each tableCombinedRevenue as item}
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] text-end border-b border-gray-800 bg-default"
|
||||
>
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{item?.val === "0.00" ||
|
||||
item?.val === null ||
|
||||
item?.val === 0
|
||||
@ -806,21 +811,20 @@
|
||||
{/each}
|
||||
</tr>
|
||||
|
||||
<tr class="bg-primary">
|
||||
<tr class="bg-[#F6F7F8] dark:bg-odd">
|
||||
<th
|
||||
class="bg-primary whitespace-nowrap text-sm sm:text-[1rem] text-white text-start font-normal border-b border-gray-800"
|
||||
class=" whitespace-nowrap text-sm sm:text-[1rem] text-start font-normal"
|
||||
>
|
||||
Revenue Growth
|
||||
</th>
|
||||
{#each computeGrowthList(tableActualRevenue, tableCombinedRevenue) as item, index}
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] text-end bg-default border-b border-gray-800"
|
||||
>
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{#if index === 0 || item?.growth === null}
|
||||
n/a
|
||||
{:else if tableActualRevenue[index]?.val === null}
|
||||
<span
|
||||
class="text-orange-400 {item?.growth > 0
|
||||
class="text-orange-600 dark:text-orange-400 {item?.growth >
|
||||
0
|
||||
? "before:content-['+']"
|
||||
: ''}"
|
||||
>
|
||||
@ -829,9 +833,9 @@
|
||||
{:else}
|
||||
<span
|
||||
class={item?.growth > 0
|
||||
? "text-[#00FC50] before:content-['+']"
|
||||
? "text-green-600 dark:text-[#00FC50] before:content-['+']"
|
||||
: item?.growth < 0
|
||||
? "text-[#FF2F1F]"
|
||||
? "text-red-600 dark:text-[#FF2F1F]"
|
||||
: ""}
|
||||
>
|
||||
{item?.growth}%
|
||||
@ -841,16 +845,14 @@
|
||||
{/each}
|
||||
</tr>
|
||||
|
||||
<tr class="bg-primary border-b-[#09090B]">
|
||||
<tr class="">
|
||||
<th
|
||||
class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-normal bg-primary border-b border-gray-800"
|
||||
class=" whitespace-nowrap text-sm sm:text-[1rem] text-start font-normal"
|
||||
>
|
||||
EPS
|
||||
</th>
|
||||
{#each tableCombinedEPS as item}
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] text-end border-b border-gray-800 bg-default"
|
||||
>
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{item?.val === "0.00" ||
|
||||
item?.val === null ||
|
||||
item?.val === 0
|
||||
@ -860,21 +862,20 @@
|
||||
{/each}
|
||||
</tr>
|
||||
|
||||
<tr class="bg-primary">
|
||||
<tr class="bg-[#F6F7F8] dark:bg-odd">
|
||||
<th
|
||||
class="bg-primary whitespace-nowrap text-sm sm:text-[1rem] text-white font-normal text-start border-b border-gray-800"
|
||||
class=" whitespace-nowrap text-sm sm:text-[1rem] font-normal text-start"
|
||||
>
|
||||
EPS Growth
|
||||
</th>
|
||||
{#each computeGrowthList(tableActualEPS, tableCombinedEPS) as item, index}
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] text-end bg-default border-b border-gray-800"
|
||||
>
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{#if index === 0 || item?.growth === null}
|
||||
n/a
|
||||
{:else if tableActualRevenue[index]?.val === null}
|
||||
<span
|
||||
class="text-orange-400 {item?.growth > 0
|
||||
class="text-orange-600 dark:text-orange-400 {item?.growth >
|
||||
0
|
||||
? "before:content-['+']"
|
||||
: ''}"
|
||||
>
|
||||
@ -883,9 +884,9 @@
|
||||
{:else}
|
||||
<span
|
||||
class={item?.growth > 0
|
||||
? "text-[#00FC50] before:content-['+']"
|
||||
? "text-green-600 dark:text-[#00FC50] before:content-['+']"
|
||||
: item?.growth < 0
|
||||
? "text-[#FF2F1F]"
|
||||
? "text-red-600 dark:text-[#FF2F1F]"
|
||||
: ""}
|
||||
>
|
||||
{item?.growth}%
|
||||
@ -894,16 +895,14 @@
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr class="bg-primary border-b border-gray-600">
|
||||
<tr>
|
||||
<th
|
||||
class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-normal bg-primary border-b border-gray-800"
|
||||
class=" whitespace-nowrap text-sm sm:text-[1rem] text-start font-normal"
|
||||
>
|
||||
Net Income
|
||||
</th>
|
||||
{#each tableCombinedNetIncome as item}
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] text-end border-b border-gray-800 bg-default"
|
||||
>
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{item?.val === "0.00" ||
|
||||
item?.val === null ||
|
||||
item?.val === 0
|
||||
@ -913,21 +912,20 @@
|
||||
{/each}
|
||||
</tr>
|
||||
|
||||
<tr class="bg-primary">
|
||||
<tr class="bg-[#F6F7F8] dark:bg-odd">
|
||||
<th
|
||||
class="bg-primary whitespace-nowrap text-sm sm:text-[1rem] text-white font-normal text-start border-b border-gray-800"
|
||||
class=" whitespace-nowrap text-sm sm:text-[1rem] font-normal text-start"
|
||||
>
|
||||
Net Income Growth
|
||||
</th>
|
||||
{#each computeGrowthList(tableActualNetIncome, tableCombinedNetIncome) as item, index}
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] text-end bg-default border-b border-gray-800"
|
||||
>
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{#if index === 0 || item?.growth === null}
|
||||
n/a
|
||||
{:else if tableActualNetIncome[index]?.val === null}
|
||||
<span
|
||||
class="text-orange-400 {item?.growth > 0
|
||||
class="text-orange-600 dark:text-orange-400 {item?.growth >
|
||||
0
|
||||
? "before:content-['+']"
|
||||
: ''}"
|
||||
>
|
||||
@ -936,9 +934,9 @@
|
||||
{:else}
|
||||
<span
|
||||
class={item?.growth > 0
|
||||
? "text-[#00FC50] before:content-['+']"
|
||||
? "text-green-600 dark:text-[#00FC50] before:content-['+']"
|
||||
: item?.growth < 0
|
||||
? "text-[#FF2F1F]"
|
||||
? "text-red-600 dark:text-[#FF2F1F]"
|
||||
: ""}
|
||||
>
|
||||
{item?.growth}%
|
||||
@ -948,16 +946,14 @@
|
||||
{/each}
|
||||
</tr>
|
||||
|
||||
<tr class="bg-primary border-b border-gray-600">
|
||||
<tr>
|
||||
<th
|
||||
class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-normal bg-primary border-b border-gray-800"
|
||||
class=" whitespace-nowrap text-sm sm:text-[1rem] text-start font-normal"
|
||||
>
|
||||
EBITDA
|
||||
</th>
|
||||
{#each tableCombinedEbitda as item}
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] text-end border-b border-gray-800 bg-default"
|
||||
>
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{item?.val === "0.00" ||
|
||||
item?.val === null ||
|
||||
item?.val === 0
|
||||
@ -967,21 +963,20 @@
|
||||
{/each}
|
||||
</tr>
|
||||
|
||||
<tr class="bg-primary">
|
||||
<tr class="bg-[#F6F7F8] dark:bg-odd">
|
||||
<th
|
||||
class="bg-primary whitespace-nowrap text-sm sm:text-[1rem] text-white font-normal text-start border-b border-gray-800"
|
||||
class=" whitespace-nowrap text-sm sm:text-[1rem] font-normal text-start"
|
||||
>
|
||||
EBITDA Growth
|
||||
</th>
|
||||
{#each computeGrowthList(tableActualEbitda, tableCombinedEbitda) as item, index}
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] text-end bg-default border-b border-gray-800"
|
||||
>
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{#if index === 0 || item?.growth === null}
|
||||
n/a
|
||||
{:else if tableActualEbitda[index]?.val === null}
|
||||
<span
|
||||
class="text-orange-400 {item?.growth > 0
|
||||
class="text-orange-600 dark:text-orange-400 {item?.growth >
|
||||
0
|
||||
? "before:content-['+']"
|
||||
: ''}"
|
||||
>
|
||||
@ -990,9 +985,9 @@
|
||||
{:else}
|
||||
<span
|
||||
class={item?.growth > 0
|
||||
? "text-[#00FC50] before:content-['+']"
|
||||
? "text-green-600 dark:text-[#00FC50] before:content-['+']"
|
||||
: item?.growth < 0
|
||||
? "text-[#FF2F1F]"
|
||||
? "text-red-600 dark:text-[#FF2F1F]"
|
||||
: ""}
|
||||
>
|
||||
{item?.growth}%
|
||||
@ -1002,15 +997,13 @@
|
||||
{/each}
|
||||
</tr>
|
||||
|
||||
<tr class="bg-primary border-b border-gray-600">
|
||||
<tr>
|
||||
<th
|
||||
class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-normal bg-primary border-b border-gray-800"
|
||||
class=" whitespace-nowrap text-sm sm:text-[1rem] text-start font-normal"
|
||||
>No. Analysts</th
|
||||
>
|
||||
{#each tableCombinedRevenue as item}
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] text-end border-b border-gray-800 bg-default"
|
||||
>
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{#if item?.FY > 24}
|
||||
{item?.numOfAnalysts === (null || 0)
|
||||
? "n/a"
|
||||
@ -1024,11 +1017,11 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="text-white text-sm mt-2">
|
||||
<div class=" text-sm mt-2">
|
||||
Historical EPS numbers are GAAP, while forecasted numbers may be
|
||||
non-GAAP.
|
||||
</div>
|
||||
<div class="text-orange-400 text-sm mt-2">
|
||||
<div class="text-orange-600 dark:text-orange-400 text-sm mt-2">
|
||||
* This value depends on the forecast
|
||||
</div>
|
||||
<!--
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import highcharts from "$lib/highcharts.ts";
|
||||
import { abbreviateNumber, computeGrowthSingleList } from "$lib/utils";
|
||||
|
||||
export let userTier;
|
||||
export let title;
|
||||
export let config;
|
||||
@ -14,9 +15,9 @@
|
||||
</script>
|
||||
|
||||
{#if graphType !== "growth"}
|
||||
<div>
|
||||
<div class="shadow-sm">
|
||||
<h2 class="mb-2 text-xl font-bold">{title} Forecast</h2>
|
||||
<div class="rounded-sm border p-2 border-gray-600">
|
||||
<div class="rounded-sm border p-2 border-gray-300 dark:border-gray-600">
|
||||
<div class="h-[360px] w-full">
|
||||
{#if config !== null}
|
||||
<div use:highcharts={config}></div>
|
||||
@ -26,7 +27,7 @@
|
||||
<table class="w-full text-right">
|
||||
<thead
|
||||
><tr
|
||||
class="border-b border-gray-600 align-bottom text-white font-normal"
|
||||
class="border-b border-gray-300 dark:border-gray-600 align-bottom font-normal"
|
||||
><th class="p-1 text-left font-semibold text-sm sm:text-[1rem]"
|
||||
>{title}</th
|
||||
>
|
||||
@ -38,15 +39,16 @@
|
||||
</tr></thead
|
||||
>
|
||||
<tbody
|
||||
><tr class="border-b border-gray-600 last:border-0"
|
||||
><tr
|
||||
class="border-b border-gray-300 dark:border-gray-600 last:border-0"
|
||||
><td class="whitespace-nowrap px-1 py-[3px] text-left">High</td>
|
||||
{#each highDataList as item, index}
|
||||
<td class="px-1 py-[3px] text-sm sm:text-[1rem]">
|
||||
{#if index !== 0}
|
||||
{#if !["Pro", "Plus"]?.includes(userTier) && index >= highDataList?.length - 2}
|
||||
<a class="inline-block ml-0.5 text-white" href="/pricing"
|
||||
<a class="inline-block ml-0.5" href="/pricing"
|
||||
>Pro<svg
|
||||
class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
|
||||
class="w-4 h-4 ml-0.5 mb-1 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
@ -61,15 +63,16 @@
|
||||
{/if}
|
||||
</td>
|
||||
{/each}
|
||||
</tr><tr class="border-b border-gray-600 last:border-0"
|
||||
</tr><tr
|
||||
class="border-b border-gray-300 dark:border-gray-600 last:border-0"
|
||||
><td class="whitespace-nowrap px-1 py-[3px] text-left">Avg</td>
|
||||
{#each avgDataList as item, index}
|
||||
<td class="px-1 py-[3px] text-sm sm:text-[1rem]">
|
||||
{#if index !== 0}
|
||||
{#if !["Pro", "Plus"]?.includes(userTier) && index >= avgDataList?.length - 2}
|
||||
<a class="inline-block ml-0.5 text-white" href="/pricing"
|
||||
<a class="inline-block ml-0.5" href="/pricing"
|
||||
>Pro<svg
|
||||
class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
|
||||
class="w-4 h-4 ml-0.5 mb-1 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
@ -84,15 +87,16 @@
|
||||
{/if}
|
||||
</td>
|
||||
{/each}
|
||||
</tr><tr class="border-b border-gray-600 last:border-0"
|
||||
</tr><tr
|
||||
class="border-b border-gray-300 dark:border-gray-600 last:border-0"
|
||||
><td class="whitespace-nowrap px-1 py-[3px] text-left">Low</td>
|
||||
{#each lowDataList as item, index}
|
||||
<td class="px-1 py-[3px] text-sm sm:text-[1rem]">
|
||||
{#if index !== 0}
|
||||
{#if !["Pro", "Plus"]?.includes(userTier) && index >= lowDataList?.length - 2}
|
||||
<a class="inline-block ml-0.5 text-white" href="/pricing"
|
||||
<a class="inline-block ml-0.5" href="/pricing"
|
||||
>Pro<svg
|
||||
class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
|
||||
class="w-4 h-4 ml-0.5 mb-1 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
@ -114,9 +118,9 @@
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div>
|
||||
<div class="shadow-sm">
|
||||
<h2 class="mb-2 text-xl font-bold">{title}</h2>
|
||||
<div class="rounded-sm border p-2 border-gray-600">
|
||||
<div class="rounded-sm border p-2 border-gray-300 dark:border-gray-600">
|
||||
<div class="h-[360px] w-full">
|
||||
{#if config !== null}
|
||||
<div use:highcharts={config}></div>
|
||||
@ -126,7 +130,7 @@
|
||||
<table class="w-full text-right">
|
||||
<thead
|
||||
><tr
|
||||
class="border-b border-gray-600 align-bottom text-white font-normal whitespace-nowrap"
|
||||
class="border-b border-gray-300 dark:border-gray-600 align-bottom font-normal whitespace-nowrap"
|
||||
><th class="p-1 text-left font-semibold text-sm sm:text-[1rem]"
|
||||
>{title}</th
|
||||
>
|
||||
@ -138,15 +142,16 @@
|
||||
</tr></thead
|
||||
>
|
||||
<tbody
|
||||
><tr class="border-b border-gray-600 last:border-0"
|
||||
><tr
|
||||
class="border-b border-gray-300 dark:border-gray-600 last:border-0"
|
||||
><td class="whitespace-nowrap px-1 py-[3px] text-left">High</td>
|
||||
{#each computeGrowthSingleList(highDataList, avgDataList) as item, index}
|
||||
<td class="px-1 py-[3px] text-sm sm:text-[1rem]">
|
||||
{#if index !== 0}
|
||||
{#if !["Pro", "Plus"]?.includes(userTier) && index >= highDataList?.length - 2}
|
||||
<a class="inline-block ml-0.5 text-white" href="/pricing"
|
||||
<a class="inline-block ml-0.5" href="/pricing"
|
||||
>Pro<svg
|
||||
class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
|
||||
class="w-4 h-4 ml-0.5 mb-1 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
@ -158,10 +163,10 @@
|
||||
{:else}
|
||||
<span
|
||||
class={item?.growth !== null && item?.growth > 0
|
||||
? "text-[#00FC50] before:content-['+']"
|
||||
? "text-green-600 dark:text-[#00FC50] before:content-['+']"
|
||||
: item?.growth < 0
|
||||
? "text-[#FF2F1F]"
|
||||
: "text-white"}
|
||||
? "text-red-600 dark:text-[#FF2F1F]"
|
||||
: ""}
|
||||
>
|
||||
{item?.growth !== null && Math.abs(item?.growth - 0) > 0
|
||||
? abbreviateNumber(item?.growth) + "%"
|
||||
@ -171,15 +176,16 @@
|
||||
{/if}
|
||||
</td>
|
||||
{/each}
|
||||
</tr><tr class="border-b border-gray-600 last:border-0"
|
||||
</tr><tr
|
||||
class="border-b border-gray-300 dark:border-gray-600 last:border-0"
|
||||
><td class="whitespace-nowrap px-1 py-[3px] text-left">Avg</td>
|
||||
{#each avgGrowthList?.filter((item) => item.FY >= 25) as item, index}
|
||||
<td class="px-1 py-[3px] text-sm sm:text-[1rem]">
|
||||
{#if index !== 0}
|
||||
{#if !["Pro", "Plus"]?.includes(userTier) && index >= avgDataList?.length - 2}
|
||||
<a class="inline-block ml-0.5 text-white" href="/pricing"
|
||||
<a class="inline-block ml-0.5" href="/pricing"
|
||||
>Pro<svg
|
||||
class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
|
||||
class="w-4 h-4 ml-0.5 mb-1 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
@ -191,10 +197,10 @@
|
||||
{:else}
|
||||
<span
|
||||
class={item?.growth !== null && item?.growth > 0
|
||||
? "text-[#00FC50] before:content-['+']"
|
||||
? "text-green-600 dark:text-[#00FC50] before:content-['+']"
|
||||
: item?.growth < 0
|
||||
? "text-[#FF2F1F]"
|
||||
: "text-white"}
|
||||
? "text-red-600 dark:text-[#FF2F1F]"
|
||||
: ""}
|
||||
>
|
||||
{item?.growth !== null && Math.abs(item?.growth - 0) > 0
|
||||
? abbreviateNumber(item?.growth) + "%"
|
||||
@ -204,15 +210,16 @@
|
||||
{/if}
|
||||
</td>
|
||||
{/each}
|
||||
</tr><tr class="border-b border-gray-600 last:border-0"
|
||||
</tr><tr
|
||||
class="border-b border-gray-300 dark:border-gray-600 last:border-0"
|
||||
><td class="whitespace-nowrap px-1 py-[3px] text-left">Low</td>
|
||||
{#each computeGrowthSingleList(lowDataList, avgDataList) as item, index}
|
||||
<td class="px-1 py-[3px] text-sm sm:text-[1rem]">
|
||||
{#if index !== 0}
|
||||
{#if !["Pro", "Plus"]?.includes(userTier) && index >= lowDataList?.length - 2}
|
||||
<a class="inline-block ml-0.5 text-white" href="/pricing"
|
||||
<a class="inline-block ml-0.5" href="/pricing"
|
||||
>Pro<svg
|
||||
class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
|
||||
class="w-4 h-4 ml-0.5 mb-1 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
@ -224,10 +231,10 @@
|
||||
{:else}
|
||||
<span
|
||||
class={item?.growth !== null && item?.growth > 0
|
||||
? "text-[#00FC50] before:content-['+']"
|
||||
? "text-green-600 dark:text-[#00FC50] before:content-['+']"
|
||||
: item?.growth < 0
|
||||
? "text-[#FF2F1F]"
|
||||
: "text-white"}
|
||||
? "text-red-600 dark:text-[#FF2F1F]"
|
||||
: ""}
|
||||
>
|
||||
{item?.growth !== null && Math.abs(item?.growth - 0) > 0
|
||||
? abbreviateNumber(item?.growth) + "%"
|
||||
|
||||
@ -53,12 +53,12 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<section class="w-full bg-default overflow-hidden h-full">
|
||||
<section class="w-full overflow-hidden h-full">
|
||||
<div class="m-auto h-full overflow-hidden">
|
||||
<main class="w-full mb-4 sm:mb-0">
|
||||
<div class="m-auto">
|
||||
<nav
|
||||
class="sm:ml-4 pt-1 overflow-x-auto text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
class="mb-5 sm:mb-0 sm:ml-4 pt-1 text-sm sm:text-[1rem] whitespace-nowrap overflow-x-auto whitespace-nowrap"
|
||||
>
|
||||
<ul class="flex flex-row items-center w-full text-white">
|
||||
<a
|
||||
@ -99,25 +99,3 @@
|
||||
<ScrollToTop />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.scrollbar {
|
||||
display: grid;
|
||||
grid-gap: 18px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
|
||||
grid-auto-flow: column;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin; /* Hide the default scrollbar in Firefox */
|
||||
scrollbar-color: transparent transparent; /* Hide the default scrollbar in Firefox */
|
||||
}
|
||||
|
||||
/* Custom scrollbar for Webkit (Chrome, Safari) */
|
||||
.scrollbar::-webkit-scrollbar {
|
||||
width: 0; /* Hide the width of the scrollbar */
|
||||
height: 0; /* Hide the height of the scrollbar */
|
||||
}
|
||||
|
||||
.scrollbar::-webkit-scrollbar-thumb {
|
||||
background: transparent; /* Make the thumb transparent */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
import { goto } from "$app/navigation";
|
||||
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
import { mode } from "mode-watcher";
|
||||
|
||||
export let data;
|
||||
|
||||
@ -181,8 +182,8 @@
|
||||
const options = {
|
||||
chart: {
|
||||
type: "column",
|
||||
backgroundColor: "#09090B",
|
||||
plotBackgroundColor: "#09090B",
|
||||
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
|
||||
plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
|
||||
animation: false,
|
||||
height: 360, // Add fixed height
|
||||
marginTop: 30, // Reduce top margin
|
||||
@ -222,7 +223,7 @@
|
||||
},
|
||||
yAxis: {
|
||||
gridLineWidth: 1,
|
||||
gridLineColor: "#111827",
|
||||
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
|
||||
labels: {
|
||||
style: { color: "white" },
|
||||
},
|
||||
@ -278,8 +279,8 @@
|
||||
},
|
||||
chart: {
|
||||
type: "gauge",
|
||||
backgroundColor: "#09090B",
|
||||
plotBackgroundColor: "#09090B",
|
||||
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
|
||||
plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
|
||||
animation: false,
|
||||
},
|
||||
title: {
|
||||
@ -381,7 +382,7 @@
|
||||
|
||||
// "Analyst Consensus:" in white, rating in color
|
||||
return `
|
||||
<span class="text-lg" style="color: #fff;">Analyst Consensus: </span>
|
||||
<span class="text-lg">Analyst Consensus: </span>
|
||||
<span class="text-lg" style="color:${textColor};">${ratingText}</span>
|
||||
`;
|
||||
},
|
||||
@ -498,18 +499,18 @@
|
||||
},
|
||||
},
|
||||
chart: {
|
||||
backgroundColor: "#09090B",
|
||||
plotBackgroundColor: "#09090B",
|
||||
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
|
||||
plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
|
||||
height: 360,
|
||||
animation: false,
|
||||
},
|
||||
title: {
|
||||
text: `<div class="grid grid-cols-2 w-[200px] sm:w-[500px] -mb-3.5 text-xs font-[501] text-gray-400">
|
||||
text: `<div class="grid grid-cols-2 w-[200px] sm:w-[500px] -mb-3.5 text-xs font-[501] text-gray-600 dark:text-gray-400">
|
||||
<h3 class="text-left">${$screenWidth && $screenWidth < 640 ? "Past Year" : "Past 12 Months"}</h3>
|
||||
<h3 class="text-right">${$screenWidth && $screenWidth < 640 ? "Next Year" : "12 Month Forecast"}</h3>
|
||||
</div>`,
|
||||
style: {
|
||||
color: "white",
|
||||
color: $mode === "light" ? "black" : "white",
|
||||
width: "100%",
|
||||
},
|
||||
verticalAlign: "top",
|
||||
@ -517,12 +518,12 @@
|
||||
},
|
||||
xAxis: {
|
||||
gridLineWidth: 1,
|
||||
gridLineColor: "#111827",
|
||||
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
|
||||
type: "datetime",
|
||||
endOnTick: false,
|
||||
labels: {
|
||||
style: {
|
||||
color: "#fff",
|
||||
color: $mode === "light" ? "black" : "white",
|
||||
},
|
||||
formatter: function () {
|
||||
const date = new Date(this.value);
|
||||
@ -539,14 +540,14 @@
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
color: "#fff",
|
||||
color: $mode === "light" ? "black" : "white",
|
||||
},
|
||||
formatter: function () {
|
||||
return `$${this.value.toFixed(0)}`;
|
||||
},
|
||||
},
|
||||
gridLineWidth: 1,
|
||||
gridLineColor: "#111827",
|
||||
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
|
||||
},
|
||||
|
||||
series: [
|
||||
@ -554,7 +555,7 @@
|
||||
animation: false,
|
||||
name: "Historical",
|
||||
data: processedHistorical,
|
||||
color: "#fff",
|
||||
color: $mode === "light" ? "#007050" : "#fff",
|
||||
marker: {
|
||||
enabled: true,
|
||||
symbol: "circle",
|
||||
@ -576,7 +577,7 @@
|
||||
animation: false,
|
||||
name: "Average",
|
||||
data: forecastAvg,
|
||||
color: "#fff",
|
||||
color: $mode === "light" ? "#007050" : "#fff",
|
||||
dashStyle: "Dash",
|
||||
marker: {
|
||||
enabled: false,
|
||||
@ -690,9 +691,9 @@
|
||||
return options;
|
||||
}
|
||||
|
||||
let optionsBarChart = getBarChart() || null;
|
||||
let optionsPieChart = getPieChart() || null;
|
||||
let config = getPriceForecastChart() || null;
|
||||
let optionsBarChart = null;
|
||||
let optionsPieChart = null;
|
||||
let config = null;
|
||||
|
||||
function latestInfoDate(inputDate) {
|
||||
// Convert the input date string to milliseconds since epoch
|
||||
@ -712,6 +713,14 @@
|
||||
// Return the difference in days
|
||||
return differenceInDays <= 1;
|
||||
}
|
||||
|
||||
$: {
|
||||
if ($mode) {
|
||||
optionsBarChart = getBarChart() || null;
|
||||
optionsPieChart = getPieChart() || null;
|
||||
config = getPriceForecastChart() || null;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<SEO
|
||||
@ -719,7 +728,7 @@
|
||||
description={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`}
|
||||
/>
|
||||
|
||||
<section class="w-full bg-default overflow-hidden text-white h-full">
|
||||
<section class="w-full overflow-hidden h-full">
|
||||
<div class="w-full flex h-full overflow-hidden">
|
||||
<div
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
@ -734,7 +743,7 @@
|
||||
|
||||
<div class="inline-flex justify-center w-full rounded-md sm:w-auto">
|
||||
<div
|
||||
class="bg-secondary w-full sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
|
||||
class="bg-gray-300 dark:bg-secondary w-full sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
|
||||
>
|
||||
{#each tabs as item, i}
|
||||
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
|
||||
@ -749,7 +758,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="#A3A3A3"
|
||||
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
|
||||
>
|
||||
@ -770,7 +779,7 @@
|
||||
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
|
||||
i
|
||||
? 'text-black'
|
||||
: 'text-white'}"
|
||||
: ''}"
|
||||
>
|
||||
{item.title}
|
||||
</span>
|
||||
@ -783,7 +792,7 @@
|
||||
|
||||
<div class="w-full mb-6 mt-3">
|
||||
<div
|
||||
class="rounded-sm border border-gray-600 p-0.5 xs:p-1 md:flex md:flex-col md:space-y-4 md:divide-y md:p-4 lg:flex-row lg:space-x-4 lg:space-y-0 lg:divide-x lg:divide-y-0 divide-gray-600"
|
||||
class="rounded-sm border border-gray-300 dark:border-gray-600 p-0.5 xs:p-1 md:flex md:flex-col md:space-y-4 md:divide-y md:p-4 lg:flex-row lg:space-x-4 lg:space-y-0 lg:divide-x lg:divide-y-0 divide-gray-300 dark:divide-gray-600"
|
||||
>
|
||||
<div
|
||||
class="p-3 md:flex md:space-x-4 md:p-0 lg:block lg:max-w-[32%] lg:space-x-0"
|
||||
@ -803,10 +812,7 @@
|
||||
from the current stock price of {price}.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class=" max-h-[225px]"
|
||||
use:highcharts={optionsPieChart}
|
||||
></div>
|
||||
<div class="max-h-[225px]" use:highcharts={optionsPieChart}></div>
|
||||
</div>
|
||||
<div class="grow pt-2 md:pt-4 lg:pl-4 lg:pt-0">
|
||||
<div
|
||||
@ -816,12 +822,10 @@
|
||||
<div
|
||||
class="hide-scroll mb-1 mt-2 overflow-x-auto px-1.5 text-center md:mb-0 md:px-0 lg:mt-2"
|
||||
>
|
||||
<table
|
||||
class="w-full text-right text-tiny text-white xs:text-sm sm:"
|
||||
>
|
||||
<table class="w-full text-right text-tiny xs:text-sm sm:">
|
||||
<thead
|
||||
><tr
|
||||
class="border-b border-gray-600 font-normal text-sm sm:text-[1rem]"
|
||||
class="border-b border-gray-300 dark:border-gray-600 font-normal text-sm sm:text-[1rem]"
|
||||
><th class="py-[3px] text-left font-semibold lg:py-0.5"
|
||||
>Target</th
|
||||
> <th class="font-semibold">Low</th>
|
||||
@ -832,7 +836,7 @@
|
||||
>
|
||||
<tbody
|
||||
><tr
|
||||
class="border-b border-gray-600 font-normal text-sm sm:text-[1rem]"
|
||||
class="border-b border-gray-300 dark:border-gray-600 font-normal text-sm sm:text-[1rem]"
|
||||
><td class="py-[3px] text-left lg:py-0.5">Price</td>
|
||||
<td>${lowPriceTarget}</td>
|
||||
<td>${avgPriceTarget}</td> <td>${medianPriceTarget}</td>
|
||||
@ -868,11 +872,9 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full rounded-sm border border-gray-600 mt-8 p-3 divide-gray-600 lg:flex lg:space-x-4 lg:divide-x"
|
||||
class="w-full rounded-sm border border-gray-300 dark:border-gray-600 mt-8 p-3 divide-gray-300 dark:divide-gray-600 lg:flex lg:space-x-4 lg:divide-x"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col justify-between p-1 lg:max-w-[32%] text-white"
|
||||
>
|
||||
<div class="flex flex-col justify-between p-1 lg:max-w-[32%]">
|
||||
<div>
|
||||
<div class="flex flex-row items-center">
|
||||
<h2 class="mb-1 text-xl font-bold">
|
||||
@ -890,7 +892,7 @@
|
||||
<p class="pr-2 sm:pr-4">
|
||||
{data?.getAnalystInsight?.insight}
|
||||
</p>
|
||||
<p class="mt-5 italic text-white text-sm">
|
||||
<p class="mt-5 italic text-sm">
|
||||
Updated {data?.getAnalystInsight?.date}
|
||||
</p>
|
||||
{:else}
|
||||
@ -899,10 +901,10 @@
|
||||
<span class="mt-3">
|
||||
Unlock content with
|
||||
<a
|
||||
class="inline-block ml-0.5 text-blue-400 sm:hover:text-white"
|
||||
class="inline-block ml-0.5 text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white"
|
||||
href="/pricing"
|
||||
>Pro Subscription <svg
|
||||
class="w-4 h-4 mb-1 inline-block text[#A3A3A3] sm:hover:text-white"
|
||||
class="w-4 h-4 mb-1 inline-block text[#A3A3A3] sm:hover:"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
@ -914,7 +916,7 @@
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<p class="mt-5 italic text-white text-sm">
|
||||
<p class="mt-5 italic text-sm">
|
||||
Updated {data?.getAnalystInsight?.date}
|
||||
</p>
|
||||
{/if}
|
||||
@ -948,7 +950,8 @@
|
||||
class="w-full text-right text-tiny xs:text-sm md:text-smaller"
|
||||
>
|
||||
<thead
|
||||
><tr class="border-b border-gray-600 font-normal"
|
||||
><tr
|
||||
class="border-b border-gray-300 dark:border-gray-600 font-normal"
|
||||
><th
|
||||
class="whitespace-nowrap px-1 py-[3px] text-sm sm:text-[1rem] text-left font-semibold"
|
||||
>Rating</th
|
||||
@ -966,7 +969,9 @@
|
||||
>
|
||||
<tbody>
|
||||
{#each categories as category}
|
||||
<tr class="border-b border-gray-600 font-normal">
|
||||
<tr
|
||||
class="border-b border-gray-300 dark:border-gray-600 font-normal"
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap px-1 py-[3px] text-sm sm:text-[1rem] text-left"
|
||||
>{category}</td
|
||||
@ -998,23 +1003,21 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="mt-8 text-xl sm:text-2xl text-white font-bold mb-4">
|
||||
<h2 class="mt-8 text-xl sm:text-2xl font-bold mb-4">
|
||||
Financial Forecast this Year
|
||||
</h2>
|
||||
{#if data?.getAnalystEstimate?.length !== 0}
|
||||
<div
|
||||
class="mb-4 grid grid-cols-1 overflow-hidden rounded-md border divide-gray-600 border-gray-600 md:grid-cols-2 lg:grid-cols-4"
|
||||
class="mb-4 grid grid-cols-1 overflow-hidden rounded-md border divide-gray-300 dark:divide-gray-600 border-gray-300 dark:border-gray-600 md:grid-cols-2 lg:grid-cols-4"
|
||||
>
|
||||
<div
|
||||
class="border-b px-3 py-5 last:border-b-0 xs:px-4 sm:p-6 md:border-b lg:border-b-0 border-gray-600"
|
||||
class="border-b px-3 py-5 last:border-b-0 xs:px-4 sm:p-6 md:border-b lg:border-b-0 border-gray-300 dark:border-gray-600"
|
||||
>
|
||||
<div class=" font-normal text-white">Revenue This Year</div>
|
||||
<div class=" font-normal">Revenue This Year</div>
|
||||
<div
|
||||
class="mt-1 flex flex-wrap items-baseline justify-between space-y-2 bp:space-y-0"
|
||||
>
|
||||
<div
|
||||
class="flex items-baseline text-2xl font-semibold text-white"
|
||||
>
|
||||
<div class="flex items-baseline text-2xl font-semibold">
|
||||
{data?.getAnalystEstimate[index]?.estimatedRevenueAvg !==
|
||||
null &&
|
||||
data?.getAnalystEstimate[index]?.estimatedRevenueAvg !== 0
|
||||
@ -1023,9 +1026,7 @@
|
||||
)
|
||||
: "n/a"}
|
||||
{#if data?.getAnalystEstimate[index]?.estimatedRevenueAvg !== null && data?.getAnalystEstimate[index]?.estimatedRevenueAvg !== 0}
|
||||
<div
|
||||
class="ml-2 block text-sm font-semibold text-white lg:hidden"
|
||||
>
|
||||
<div class="ml-2 block text-sm font-semibold lg:hidden">
|
||||
from {data?.getAnalystEstimate[index - 1]?.revenue !==
|
||||
undefined
|
||||
? abbreviateNumber(
|
||||
@ -1065,7 +1066,7 @@
|
||||
</div>
|
||||
{#if data?.getAnalystEstimate[index]?.estimatedRevenueAvg !== null && data?.getAnalystEstimate[index]?.estimatedRevenueAvg !== 0}
|
||||
<div
|
||||
class="ml-0.5 mt-1.5 hidden text-sm font-semibold text-white lg:block"
|
||||
class="ml-0.5 mt-1.5 hidden text-sm font-semibold lg:block"
|
||||
>
|
||||
from {data?.getAnalystEstimate[index - 1]?.revenue !== null
|
||||
? abbreviateNumber(
|
||||
@ -1078,13 +1079,11 @@
|
||||
<div
|
||||
class="border-b px-3 py-5 last:border-b-0 xs:px-4 sm:p-6 md:border-b md:border-l lg:border-b-0"
|
||||
>
|
||||
<div class=" font-normal text-white">Revenue Next Year</div>
|
||||
<div class=" font-normal">Revenue Next Year</div>
|
||||
<div
|
||||
class="mt-1 flex flex-wrap items-baseline justify-between space-y-2 bp:space-y-0"
|
||||
>
|
||||
<div
|
||||
class="flex items-baseline text-2xl font-semibold text-white"
|
||||
>
|
||||
<div class="flex items-baseline text-2xl font-semibold">
|
||||
{data?.getAnalystEstimate[index + 1]
|
||||
?.estimatedRevenueAvg !== undefined
|
||||
? abbreviateNumber(
|
||||
@ -1092,9 +1091,7 @@
|
||||
?.estimatedRevenueAvg,
|
||||
)
|
||||
: "n/a"}
|
||||
<div
|
||||
class="ml-2 block text-sm font-semibold text-white lg:hidden"
|
||||
>
|
||||
<div class="ml-2 block text-sm font-semibold lg:hidden">
|
||||
from {data?.getAnalystEstimate[index]
|
||||
?.estimatedRevenueAvg !== undefined
|
||||
? abbreviateNumber(
|
||||
@ -1131,7 +1128,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ml-0.5 mt-1.5 hidden text-sm font-semibold text-white lg:block"
|
||||
class="ml-0.5 mt-1.5 hidden text-sm font-semibold lg:block"
|
||||
>
|
||||
from {data?.getAnalystEstimate[index]?.estimatedRevenueAvg !==
|
||||
undefined
|
||||
@ -1144,19 +1141,15 @@
|
||||
<div
|
||||
class="border-b px-3 py-5 last:border-b-0 xs:px-4 sm:p-6 md:border-b-0 lg:border-l"
|
||||
>
|
||||
<div class=" font-normal text-white">EPS This Year</div>
|
||||
<div class=" font-normal">EPS This Year</div>
|
||||
<div
|
||||
class="mt-1 flex flex-wrap items-baseline justify-between space-y-2 bp:space-y-0"
|
||||
>
|
||||
<div
|
||||
class="flex items-baseline text-2xl font-semibold text-white"
|
||||
>
|
||||
<div class="flex items-baseline text-2xl font-semibold">
|
||||
{abbreviateNumber(
|
||||
data?.getAnalystEstimate[index]?.estimatedEpsAvg,
|
||||
)}
|
||||
<div
|
||||
class="ml-2 block text-sm font-semibold text-white lg:hidden"
|
||||
>
|
||||
<div class="ml-2 block text-sm font-semibold lg:hidden">
|
||||
from {data?.getAnalystEstimate[index - 1]?.eps}
|
||||
</div>
|
||||
</div>
|
||||
@ -1187,27 +1180,23 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ml-0.5 mt-1.5 hidden text-sm font-semibold text-white lg:block"
|
||||
class="ml-0.5 mt-1.5 hidden text-sm font-semibold lg:block"
|
||||
>
|
||||
from {data?.getAnalystEstimate[index - 1]?.eps}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="border-b px-3 py-5 last:border-b-0 xs:px-4 sm:p-6 md:border-l border-gray-600"
|
||||
class="border-b px-3 py-5 last:border-b-0 xs:px-4 sm:p-6 md:border-l border-gray-300 dark:border-gray-600"
|
||||
>
|
||||
<div class=" font-normal text-white">EPS Next Year</div>
|
||||
<div class=" font-normal">EPS Next Year</div>
|
||||
<div
|
||||
class="mt-1 flex flex-wrap items-baseline justify-between space-y-2 bp:space-y-0"
|
||||
>
|
||||
<div
|
||||
class="flex items-baseline text-2xl font-semibold text-white"
|
||||
>
|
||||
<div class="flex items-baseline text-2xl font-semibold">
|
||||
{abbreviateNumber(
|
||||
data?.getAnalystEstimate[index + 1]?.estimatedEpsAvg,
|
||||
)}
|
||||
<div
|
||||
class="ml-2 block text-sm font-semibold text-white lg:hidden"
|
||||
>
|
||||
<div class="ml-2 block text-sm font-semibold lg:hidden">
|
||||
from {abbreviateNumber(
|
||||
data?.getAnalystEstimate[index]?.estimatedEpsAvg,
|
||||
)}
|
||||
@ -1240,7 +1229,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ml-0.5 mt-1.5 hidden text-sm font-semibold text-white lg:block"
|
||||
class="ml-0.5 mt-1.5 hidden text-sm font-semibold lg:block"
|
||||
>
|
||||
from {abbreviateNumber(
|
||||
data?.getAnalystEstimate[index]?.estimatedEpsAvg,
|
||||
@ -1258,7 +1247,7 @@
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="text-white p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
|
||||
class=" p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-300 dark:border-gray-600 text-sm sm:text-[1rem]"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 shrink-0 inline-block sm:mr-2"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user