AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update overview forecast

Browse Source
This commit is contained in:
MuslemRahimi 2025-03-11 11:39:12 +01:00
parent b5bed6cfea
commit 400ea21052
4 changed files with 197 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
src/lib/components/AnalystEstimate.svelte
View File

@ -3,6 +3,7 @@
import { abbreviateNumber, computeGrowthSingleList } from "$lib/utils"; import { abbreviateNumber, computeGrowthSingleList } from "$lib/utils";
import EstimationGraph from "$lib/components/EstimationGraph.svelte"; import EstimationGraph from "$lib/components/EstimationGraph.svelte";
import Lazy from "svelte-lazy"; import Lazy from "svelte-lazy";
import { mode } from "mode-watcher";
export let data; export let data;
@ -323,8 +324,8 @@
}, },
chart: { chart: {
type: "line", type: "line",
backgroundColor: "#09090B", backgroundColor: $mode === "light" ? "#fff" : "#09090B",
plotBackgroundColor: "#09090B", plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
height: 360, height: 360,
animation: false, animation: false,
}, },
@ -345,14 +346,14 @@
borderRadius: 4, borderRadius: 4,
formatter: function () { formatter: function () {
// Format the x value to display time in hh:mm format // 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 this?.x
}</span><br>`; }</span><br>`;
// Loop through each point in the shared tooltip // Loop through each point in the shared tooltip
this.points?.forEach((point) => { this.points?.forEach((point) => {
tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span> tooltipContent += `<span class=" font-semibold text-sm">${point.series.name}:</span>
<span class="text-white font-normal text-sm" >${abbreviateNumber( <span class=" font-normal text-sm" >${abbreviateNumber(
point.y, point.y,
)}</span><br>`; )}</span><br>`;
}); });
@ -366,23 +367,23 @@
endOnTick: false, endOnTick: false,
categories: dates, categories: dates,
crosshair: { 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 width: 1, // Adjust the line width as needed
dashStyle: "Solid", dashStyle: "Solid",
}, },
labels: { labels: {
style: { style: {
color: "#fff", color: $mode === "light" ? "black" : "white",
fontSize: "12px", fontSize: "12px",
}, },
}, },
}, },
yAxis: { yAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: "#111827", gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
labels: { labels: {
style: { color: "white" }, style: { color: $mode === "light" ? "black" : "white" },
}, },
title: { text: null }, title: { text: null },
opposite: true, opposite: true,
@ -391,13 +392,13 @@
{ {
name: "Actual", name: "Actual",
data: valueList, data: valueList,
color: "#fff", color: $mode === "light" ? "#2C6288" : "white",
animation: false, animation: false,
}, },
{ {
name: "Avg", name: "Avg",
data: avgList, data: avgList,
color: "#fff", color: $mode === "light" ? "#2C6288" : "white",
dashStyle: "Dash", // Dashed line style dashStyle: "Dash", // Dashed line style
animation: false, animation: false,
marker: { marker: {
@ -408,14 +409,14 @@
name: "Low", name: "Low",
data: lowList, data: lowList,
// If you want a dashed line with a different color, set the series color to that color. // 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", dashStyle: "Dash",
animation: false, animation: false,
}, },
{ {
name: "High", name: "High",
data: highList, data: highList,
color: "#c2c7cf", color: $mode === "light" ? "#8AAAC0" : "#c2c7cf",
dashStyle: "Dash", dashStyle: "Dash",
animation: false, animation: false,
}, },
@ -466,8 +467,8 @@
}, },
chart: { chart: {
type: "column", type: "column",
backgroundColor: "#09090B", backgroundColor: $mode === "light" ? "#fff" : "#09090B",
plotBackgroundColor: "#09090B", plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
height: 360, height: 360,
animation: false, animation: false,
}, },
@ -481,7 +482,7 @@
borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border
borderWidth: 1, borderWidth: 1,
style: { style: {
color: "#fff", color: "white",
fontSize: "14px", fontSize: "14px",
padding: "10px", padding: "10px",
}, },
@ -517,16 +518,16 @@
type: "datetime", type: "datetime",
labels: { labels: {
style: { style: {
color: "#fff", color: $mode === "light" ? "black" : "white",
fontSize: "12px", fontSize: "12px",
}, },
}, },
}, },
yAxis: { yAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: "#111827", gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
labels: { labels: {
style: { color: "white" }, style: { color: $mode === "light" ? "black" : "white" },
}, },
title: { text: null }, title: { text: null },
opposite: true, opposite: true,
@ -545,8 +546,18 @@
data: growthList?.map((value) => ({ data: growthList?.map((value) => ({
y: value, y: value,
// Set color based on the sign of the value // Set color based on the sign of the value
color: value >= 0 ? "#00FC50" : "#ED3333", color:
borderColor: value >= 0 ? "#00FC50" : "#ED3333", value >= 0
? $mode === "light"
? "#338D73"
: "#00FC50"
: "#ED3333",
borderColor:
value >= 0
? $mode === "light"
? "#338D73"
: "#00FC50"
: "#ED3333",
borderRadius: "1px", borderRadius: "1px",
})), })),
zIndex: 5, zIndex: 5,
@ -562,8 +573,8 @@
// If either high or low is null/undefined, return nulls. // If either high or low is null/undefined, return nulls.
return high != null && low != null ? [low, high] : [null, null]; return high != null && low != null ? [low, high] : [null, null];
}), }),
color: "#fff", color: $mode === "light" ? "black" : "white",
lineWidth: 2, // Thicker lines for error bars lineWidth: 1, // Thicker lines for error bars
whiskerLength: 10, // Adjust whisker length as needed whiskerLength: 10, // Adjust whisker length as needed
zIndex: 10, zIndex: 10,
// Disable tooltip for error bar points // Disable tooltip for error bar points
@ -740,7 +751,7 @@
} }
$: { $: {
if ($stockTicker && typeof window !== "undefined") { if ($stockTicker || $mode) {
isLoaded = false; isLoaded = false;
analystEstimateList = []; analystEstimateList = [];
analystEstimateList = data?.getAnalystEstimate || []; analystEstimateList = data?.getAnalystEstimate || [];
@ -759,7 +770,7 @@
} }
</script> </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"> <main class="overflow-hidden">
<div class="w-full m-auto"> <div class="w-full m-auto">
<div class="flex flex-row items-center"></div> <div class="flex flex-row items-center"></div>
@ -767,36 +778,30 @@
{#if isLoaded} {#if isLoaded}
{#if analystEstimateList?.length !== 0} {#if analystEstimateList?.length !== 0}
<div <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 <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=""> <tr class="">
<th <th class=" font-semibold text-sm text-start">Fiscal Year</th>
class="bg-primary border-b border-[#000] text-white font-semibold text-sm text-start"
>Fiscal Year</th
>
{#each xData as item} {#each xData as item}
<td <td class="z-20 font-semibold text-sm text-end"
class="z-20 bg-primary border-b border-[#000] text-white font-semibold text-sm text-end bg-default"
>{"FY" + item}</td >{"FY" + item}</td
> >
{/each} {/each}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="bg-primary border-b border-gray-600"> <tr class=" ">
<th <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 Revenue
</th> </th>
{#each tableCombinedRevenue as item} {#each tableCombinedRevenue as item}
<td <td class=" text-sm sm:text-[1rem] text-end">
class="text-white text-sm sm:text-[1rem] text-end border-b border-gray-800 bg-default"
>
{item?.val === "0.00" || {item?.val === "0.00" ||
item?.val === null || item?.val === null ||
item?.val === 0 item?.val === 0
@ -806,21 +811,20 @@
{/each} {/each}
</tr> </tr>
<tr class="bg-primary"> <tr class="bg-[#F6F7F8] dark:bg-odd">
<th <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 Revenue Growth
</th> </th>
{#each computeGrowthList(tableActualRevenue, tableCombinedRevenue) as item, index} {#each computeGrowthList(tableActualRevenue, tableCombinedRevenue) as item, index}
<td <td class=" text-sm sm:text-[1rem] text-end">
class="text-white text-sm sm:text-[1rem] text-end bg-default border-b border-gray-800"
>
{#if index === 0 || item?.growth === null} {#if index === 0 || item?.growth === null}
n/a n/a
{:else if tableActualRevenue[index]?.val === null} {:else if tableActualRevenue[index]?.val === null}
<span <span
class="text-orange-400 {item?.growth > 0 class="text-orange-600 dark:text-orange-400 {item?.growth >
0
? "before:content-['+']" ? "before:content-['+']"
: ''}" : ''}"
> >
@ -829,9 +833,9 @@
{:else} {:else}
<span <span
class={item?.growth > 0 class={item?.growth > 0
? "text-[#00FC50] before:content-['+']" ? "text-green-600 dark:text-[#00FC50] before:content-['+']"
: item?.growth < 0 : item?.growth < 0
? "text-[#FF2F1F]" ? "text-red-600 dark:text-[#FF2F1F]"
: ""} : ""}
> >
{item?.growth}% {item?.growth}%
@ -841,16 +845,14 @@
{/each} {/each}
</tr> </tr>
<tr class="bg-primary border-b-[#09090B]"> <tr class="">
<th <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 EPS
</th> </th>
{#each tableCombinedEPS as item} {#each tableCombinedEPS as item}
<td <td class=" text-sm sm:text-[1rem] text-end">
class="text-white text-sm sm:text-[1rem] text-end border-b border-gray-800 bg-default"
>
{item?.val === "0.00" || {item?.val === "0.00" ||
item?.val === null || item?.val === null ||
item?.val === 0 item?.val === 0
@ -860,21 +862,20 @@
{/each} {/each}
</tr> </tr>
<tr class="bg-primary"> <tr class="bg-[#F6F7F8] dark:bg-odd">
<th <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 EPS Growth
</th> </th>
{#each computeGrowthList(tableActualEPS, tableCombinedEPS) as item, index} {#each computeGrowthList(tableActualEPS, tableCombinedEPS) as item, index}
<td <td class=" text-sm sm:text-[1rem] text-end">
class="text-white text-sm sm:text-[1rem] text-end bg-default border-b border-gray-800"
>
{#if index === 0 || item?.growth === null} {#if index === 0 || item?.growth === null}
n/a n/a
{:else if tableActualRevenue[index]?.val === null} {:else if tableActualRevenue[index]?.val === null}
<span <span
class="text-orange-400 {item?.growth > 0 class="text-orange-600 dark:text-orange-400 {item?.growth >
0
? "before:content-['+']" ? "before:content-['+']"
: ''}" : ''}"
> >
@ -883,9 +884,9 @@
{:else} {:else}
<span <span
class={item?.growth > 0 class={item?.growth > 0
? "text-[#00FC50] before:content-['+']" ? "text-green-600 dark:text-[#00FC50] before:content-['+']"
: item?.growth < 0 : item?.growth < 0
? "text-[#FF2F1F]" ? "text-red-600 dark:text-[#FF2F1F]"
: ""} : ""}
> >
{item?.growth}% {item?.growth}%
@ -894,16 +895,14 @@
</td> </td>
{/each} {/each}
</tr> </tr>
<tr class="bg-primary border-b border-gray-600"> <tr>
<th <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 Net Income
</th> </th>
{#each tableCombinedNetIncome as item} {#each tableCombinedNetIncome as item}
<td <td class=" text-sm sm:text-[1rem] text-end">
class="text-white text-sm sm:text-[1rem] text-end border-b border-gray-800 bg-default"
>
{item?.val === "0.00" || {item?.val === "0.00" ||
item?.val === null || item?.val === null ||
item?.val === 0 item?.val === 0
@ -913,21 +912,20 @@
{/each} {/each}
</tr> </tr>
<tr class="bg-primary"> <tr class="bg-[#F6F7F8] dark:bg-odd">
<th <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 Net Income Growth
</th> </th>
{#each computeGrowthList(tableActualNetIncome, tableCombinedNetIncome) as item, index} {#each computeGrowthList(tableActualNetIncome, tableCombinedNetIncome) as item, index}
<td <td class=" text-sm sm:text-[1rem] text-end">
class="text-white text-sm sm:text-[1rem] text-end bg-default border-b border-gray-800"
>
{#if index === 0 || item?.growth === null} {#if index === 0 || item?.growth === null}
n/a n/a
{:else if tableActualNetIncome[index]?.val === null} {:else if tableActualNetIncome[index]?.val === null}
<span <span
class="text-orange-400 {item?.growth > 0 class="text-orange-600 dark:text-orange-400 {item?.growth >
0
? "before:content-['+']" ? "before:content-['+']"
: ''}" : ''}"
> >
@ -936,9 +934,9 @@
{:else} {:else}
<span <span
class={item?.growth > 0 class={item?.growth > 0
? "text-[#00FC50] before:content-['+']" ? "text-green-600 dark:text-[#00FC50] before:content-['+']"
: item?.growth < 0 : item?.growth < 0
? "text-[#FF2F1F]" ? "text-red-600 dark:text-[#FF2F1F]"
: ""} : ""}
> >
{item?.growth}% {item?.growth}%
@ -948,16 +946,14 @@
{/each} {/each}
</tr> </tr>
<tr class="bg-primary border-b border-gray-600"> <tr>
<th <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 EBITDA
</th> </th>
{#each tableCombinedEbitda as item} {#each tableCombinedEbitda as item}
<td <td class=" text-sm sm:text-[1rem] text-end">
class="text-white text-sm sm:text-[1rem] text-end border-b border-gray-800 bg-default"
>
{item?.val === "0.00" || {item?.val === "0.00" ||
item?.val === null || item?.val === null ||
item?.val === 0 item?.val === 0
@ -967,21 +963,20 @@
{/each} {/each}
</tr> </tr>
<tr class="bg-primary"> <tr class="bg-[#F6F7F8] dark:bg-odd">
<th <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 EBITDA Growth
</th> </th>
{#each computeGrowthList(tableActualEbitda, tableCombinedEbitda) as item, index} {#each computeGrowthList(tableActualEbitda, tableCombinedEbitda) as item, index}
<td <td class=" text-sm sm:text-[1rem] text-end">
class="text-white text-sm sm:text-[1rem] text-end bg-default border-b border-gray-800"
>
{#if index === 0 || item?.growth === null} {#if index === 0 || item?.growth === null}
n/a n/a
{:else if tableActualEbitda[index]?.val === null} {:else if tableActualEbitda[index]?.val === null}
<span <span
class="text-orange-400 {item?.growth > 0 class="text-orange-600 dark:text-orange-400 {item?.growth >
0
? "before:content-['+']" ? "before:content-['+']"
: ''}" : ''}"
> >
@ -990,9 +985,9 @@
{:else} {:else}
<span <span
class={item?.growth > 0 class={item?.growth > 0
? "text-[#00FC50] before:content-['+']" ? "text-green-600 dark:text-[#00FC50] before:content-['+']"
: item?.growth < 0 : item?.growth < 0
? "text-[#FF2F1F]" ? "text-red-600 dark:text-[#FF2F1F]"
: ""} : ""}
> >
{item?.growth}% {item?.growth}%
@ -1002,15 +997,13 @@
{/each} {/each}
</tr> </tr>
<tr class="bg-primary border-b border-gray-600"> <tr>
<th <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 >No. Analysts</th
> >
{#each tableCombinedRevenue as item} {#each tableCombinedRevenue as item}
<td <td class=" text-sm sm:text-[1rem] text-end">
class="text-white text-sm sm:text-[1rem] text-end border-b border-gray-800 bg-default"
>
{#if item?.FY > 24} {#if item?.FY > 24}
{item?.numOfAnalysts === (null || 0) {item?.numOfAnalysts === (null || 0)
? "n/a" ? "n/a"
@ -1024,11 +1017,11 @@
</tbody> </tbody>
</table> </table>
</div> </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 Historical EPS numbers are GAAP, while forecasted numbers may be
non-GAAP. non-GAAP.
</div> </div>
<div class="text-orange-400 text-sm mt-2"> <div class="text-orange-600 dark:text-orange-400 text-sm mt-2">
&#42; This value depends on the forecast &#42; This value depends on the forecast
</div> </div>
<!-- <!--

73
src/lib/components/EstimationGraph.svelte
View File

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import highcharts from "$lib/highcharts.ts"; import highcharts from "$lib/highcharts.ts";
import { abbreviateNumber, computeGrowthSingleList } from "$lib/utils"; import { abbreviateNumber, computeGrowthSingleList } from "$lib/utils";
export let userTier; export let userTier;
export let title; export let title;
export let config; export let config;
@ -14,9 +15,9 @@
</script> </script>
{#if graphType !== "growth"} {#if graphType !== "growth"}
<div> <div class="shadow-sm">
<h2 class="mb-2 text-xl font-bold">{title} Forecast</h2> <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"> <div class="h-[360px] w-full">
{#if config !== null} {#if config !== null}
<div use:highcharts={config}></div> <div use:highcharts={config}></div>
@ -26,7 +27,7 @@
<table class="w-full text-right"> <table class="w-full text-right">
<thead <thead
><tr ><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]" ><th class="p-1 text-left font-semibold text-sm sm:text-[1rem]"
>{title}</th >{title}</th
> >
@ -38,15 +39,16 @@
</tr></thead </tr></thead
> >
<tbody <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> ><td class="whitespace-nowrap px-1 py-[3px] text-left">High</td>
{#each highDataList as item, index} {#each highDataList as item, index}
<td class="px-1 py-[3px] text-sm sm:text-[1rem]"> <td class="px-1 py-[3px] text-sm sm:text-[1rem]">
{#if index !== 0} {#if index !== 0}
{#if !["Pro", "Plus"]?.includes(userTier) && index >= highDataList?.length - 2} {#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 >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" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
@ -61,15 +63,16 @@
{/if} {/if}
</td> </td>
{/each} {/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> ><td class="whitespace-nowrap px-1 py-[3px] text-left">Avg</td>
{#each avgDataList as item, index} {#each avgDataList as item, index}
<td class="px-1 py-[3px] text-sm sm:text-[1rem]"> <td class="px-1 py-[3px] text-sm sm:text-[1rem]">
{#if index !== 0} {#if index !== 0}
{#if !["Pro", "Plus"]?.includes(userTier) && index >= avgDataList?.length - 2} {#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 >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" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
@ -84,15 +87,16 @@
{/if} {/if}
</td> </td>
{/each} {/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> ><td class="whitespace-nowrap px-1 py-[3px] text-left">Low</td>
{#each lowDataList as item, index} {#each lowDataList as item, index}
<td class="px-1 py-[3px] text-sm sm:text-[1rem]"> <td class="px-1 py-[3px] text-sm sm:text-[1rem]">
{#if index !== 0} {#if index !== 0}
{#if !["Pro", "Plus"]?.includes(userTier) && index >= lowDataList?.length - 2} {#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 >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" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
@ -114,9 +118,9 @@
</div> </div>
</div> </div>
{:else} {:else}
<div> <div class="shadow-sm">
<h2 class="mb-2 text-xl font-bold">{title}</h2> <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"> <div class="h-[360px] w-full">
{#if config !== null} {#if config !== null}
<div use:highcharts={config}></div> <div use:highcharts={config}></div>
@ -126,7 +130,7 @@
<table class="w-full text-right"> <table class="w-full text-right">
<thead <thead
><tr ><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]" ><th class="p-1 text-left font-semibold text-sm sm:text-[1rem]"
>{title}</th >{title}</th
> >
@ -138,15 +142,16 @@
</tr></thead </tr></thead
> >
<tbody <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> ><td class="whitespace-nowrap px-1 py-[3px] text-left">High</td>
{#each computeGrowthSingleList(highDataList, avgDataList) as item, index} {#each computeGrowthSingleList(highDataList, avgDataList) as item, index}
<td class="px-1 py-[3px] text-sm sm:text-[1rem]"> <td class="px-1 py-[3px] text-sm sm:text-[1rem]">
{#if index !== 0} {#if index !== 0}
{#if !["Pro", "Plus"]?.includes(userTier) && index >= highDataList?.length - 2} {#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 >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" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
@ -158,10 +163,10 @@
{:else} {:else}
<span <span
class={item?.growth !== null && item?.growth > 0 class={item?.growth !== null && item?.growth > 0
? "text-[#00FC50] before:content-['+']" ? "text-green-600 dark:text-[#00FC50] before:content-['+']"
: item?.growth < 0 : item?.growth < 0
? "text-[#FF2F1F]" ? "text-red-600 dark:text-[#FF2F1F]"
: "text-white"} : ""}
> >
{item?.growth !== null && Math.abs(item?.growth - 0) > 0 {item?.growth !== null && Math.abs(item?.growth - 0) > 0
? abbreviateNumber(item?.growth) + "%" ? abbreviateNumber(item?.growth) + "%"
@ -171,15 +176,16 @@
{/if} {/if}
</td> </td>
{/each} {/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> ><td class="whitespace-nowrap px-1 py-[3px] text-left">Avg</td>
{#each avgGrowthList?.filter((item) => item.FY >= 25) as item, index} {#each avgGrowthList?.filter((item) => item.FY >= 25) as item, index}
<td class="px-1 py-[3px] text-sm sm:text-[1rem]"> <td class="px-1 py-[3px] text-sm sm:text-[1rem]">
{#if index !== 0} {#if index !== 0}
{#if !["Pro", "Plus"]?.includes(userTier) && index >= avgDataList?.length - 2} {#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 >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" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
@ -191,10 +197,10 @@
{:else} {:else}
<span <span
class={item?.growth !== null && item?.growth > 0 class={item?.growth !== null && item?.growth > 0
? "text-[#00FC50] before:content-['+']" ? "text-green-600 dark:text-[#00FC50] before:content-['+']"
: item?.growth < 0 : item?.growth < 0
? "text-[#FF2F1F]" ? "text-red-600 dark:text-[#FF2F1F]"
: "text-white"} : ""}
> >
{item?.growth !== null && Math.abs(item?.growth - 0) > 0 {item?.growth !== null && Math.abs(item?.growth - 0) > 0
? abbreviateNumber(item?.growth) + "%" ? abbreviateNumber(item?.growth) + "%"
@ -204,15 +210,16 @@
{/if} {/if}
</td> </td>
{/each} {/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> ><td class="whitespace-nowrap px-1 py-[3px] text-left">Low</td>
{#each computeGrowthSingleList(lowDataList, avgDataList) as item, index} {#each computeGrowthSingleList(lowDataList, avgDataList) as item, index}
<td class="px-1 py-[3px] text-sm sm:text-[1rem]"> <td class="px-1 py-[3px] text-sm sm:text-[1rem]">
{#if index !== 0} {#if index !== 0}
{#if !["Pro", "Plus"]?.includes(userTier) && index >= lowDataList?.length - 2} {#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 >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" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
@ -224,10 +231,10 @@
{:else} {:else}
<span <span
class={item?.growth !== null && item?.growth > 0 class={item?.growth !== null && item?.growth > 0
? "text-[#00FC50] before:content-['+']" ? "text-green-600 dark:text-[#00FC50] before:content-['+']"
: item?.growth < 0 : item?.growth < 0
? "text-[#FF2F1F]" ? "text-red-600 dark:text-[#FF2F1F]"
: "text-white"} : ""}
> >
{item?.growth !== null && Math.abs(item?.growth - 0) > 0 {item?.growth !== null && Math.abs(item?.growth - 0) > 0
? abbreviateNumber(item?.growth) + "%" ? abbreviateNumber(item?.growth) + "%"

26
src/routes/stocks/[tickerID]/forecast/+layout.svelte
View File

@ -53,12 +53,12 @@
}); });
</script> </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"> <div class="m-auto h-full overflow-hidden">
<main class="w-full mb-4 sm:mb-0"> <main class="w-full mb-4 sm:mb-0">
<div class="m-auto"> <div class="m-auto">
<nav <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"> <ul class="flex flex-row items-center w-full text-white">
<a <a
@ -99,25 +99,3 @@
<ScrollToTop /> <ScrollToTop />
</div> </div>
</section> </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>

149
src/routes/stocks/[tickerID]/forecast/+page.svelte
View File

@ -15,6 +15,7 @@
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import SEO from "$lib/components/SEO.svelte"; import SEO from "$lib/components/SEO.svelte";
import { mode } from "mode-watcher";
export let data; export let data;
@ -181,8 +182,8 @@
const options = { const options = {
chart: { chart: {
type: "column", type: "column",
backgroundColor: "#09090B", backgroundColor: $mode === "light" ? "#fff" : "#09090B",
plotBackgroundColor: "#09090B", plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
animation: false, animation: false,
height: 360, // Add fixed height height: 360, // Add fixed height
marginTop: 30, // Reduce top margin marginTop: 30, // Reduce top margin
@ -222,7 +223,7 @@
}, },
yAxis: { yAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: "#111827", gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
labels: { labels: {
style: { color: "white" }, style: { color: "white" },
}, },
@ -278,8 +279,8 @@
}, },
chart: { chart: {
type: "gauge", type: "gauge",
backgroundColor: "#09090B", backgroundColor: $mode === "light" ? "#fff" : "#09090B",
plotBackgroundColor: "#09090B", plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
animation: false, animation: false,
}, },
title: { title: {
@ -381,7 +382,7 @@
// "Analyst Consensus:" in white, rating in color // "Analyst Consensus:" in white, rating in color
return ` 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> <span class="text-lg" style="color:${textColor};">${ratingText}</span>
`; `;
}, },
@ -498,18 +499,18 @@
}, },
}, },
chart: { chart: {
backgroundColor: "#09090B", backgroundColor: $mode === "light" ? "#fff" : "#09090B",
plotBackgroundColor: "#09090B", plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
height: 360, height: 360,
animation: false, animation: false,
}, },
title: { 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-left">${$screenWidth && $screenWidth < 640 ? "Past Year" : "Past 12 Months"}</h3>
<h3 class="text-right">${$screenWidth && $screenWidth < 640 ? "Next Year" : "12 Month Forecast"}</h3> <h3 class="text-right">${$screenWidth && $screenWidth < 640 ? "Next Year" : "12 Month Forecast"}</h3>
</div>`, </div>`,
style: { style: {
color: "white", color: $mode === "light" ? "black" : "white",
width: "100%", width: "100%",
}, },
verticalAlign: "top", verticalAlign: "top",
@ -517,12 +518,12 @@
}, },
xAxis: { xAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: "#111827", gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
type: "datetime", type: "datetime",
endOnTick: false, endOnTick: false,
labels: { labels: {
style: { style: {
color: "#fff", color: $mode === "light" ? "black" : "white",
}, },
formatter: function () { formatter: function () {
const date = new Date(this.value); const date = new Date(this.value);
@ -539,14 +540,14 @@
}, },
labels: { labels: {
style: { style: {
color: "#fff", color: $mode === "light" ? "black" : "white",
}, },
formatter: function () { formatter: function () {
return `$${this.value.toFixed(0)}`; return `$${this.value.toFixed(0)}`;
}, },
}, },
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: "#111827", gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
}, },
series: [ series: [
@ -554,7 +555,7 @@
animation: false, animation: false,
name: "Historical", name: "Historical",
data: processedHistorical, data: processedHistorical,
color: "#fff", color: $mode === "light" ? "#007050" : "#fff",
marker: { marker: {
enabled: true, enabled: true,
symbol: "circle", symbol: "circle",
@ -576,7 +577,7 @@
animation: false, animation: false,
name: "Average", name: "Average",
data: forecastAvg, data: forecastAvg,
color: "#fff", color: $mode === "light" ? "#007050" : "#fff",
dashStyle: "Dash", dashStyle: "Dash",
marker: { marker: {
enabled: false, enabled: false,
@ -690,9 +691,9 @@
return options; return options;
} }
let optionsBarChart = getBarChart() || null; let optionsBarChart = null;
let optionsPieChart = getPieChart() || null; let optionsPieChart = null;
let config = getPriceForecastChart() || null; let config = null;
function latestInfoDate(inputDate) { function latestInfoDate(inputDate) {
// Convert the input date string to milliseconds since epoch // Convert the input date string to milliseconds since epoch
@ -712,6 +713,14 @@
// Return the difference in days // Return the difference in days
return differenceInDays <= 1; return differenceInDays <= 1;
} }
$: {
if ($mode) {
optionsBarChart = getBarChart() || null;
optionsPieChart = getPieChart() || null;
config = getPriceForecastChart() || null;
}
}
</script> </script>
<SEO <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.`} 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 flex h-full overflow-hidden">
<div <div
class="w-full relative flex justify-center items-center overflow-hidden" 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="inline-flex justify-center w-full rounded-md sm:w-auto">
<div <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} {#each tabs as item, i}
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0} {#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
@ -749,7 +758,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><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" 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 /></svg
> >
@ -770,7 +779,7 @@
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx === class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
i i
? 'text-black' ? 'text-black'
: 'text-white'}" : ''}"
> >
{item.title} {item.title}
</span> </span>
@ -783,7 +792,7 @@
<div class="w-full mb-6 mt-3"> <div class="w-full mb-6 mt-3">
<div <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 <div
class="p-3 md:flex md:space-x-4 md:p-0 lg:block lg:max-w-[32%] lg:space-x-0" 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}. from the current stock price of {price}.
</p> </p>
</div> </div>
<div <div class="max-h-[225px]" use:highcharts={optionsPieChart}></div>
class=" max-h-[225px]"
use:highcharts={optionsPieChart}
></div>
</div> </div>
<div class="grow pt-2 md:pt-4 lg:pl-4 lg:pt-0"> <div class="grow pt-2 md:pt-4 lg:pl-4 lg:pt-0">
<div <div
@ -816,12 +822,10 @@
<div <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" 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 <table class="w-full text-right text-tiny xs:text-sm sm:">
class="w-full text-right text-tiny text-white xs:text-sm sm:"
>
<thead <thead
><tr ><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" ><th class="py-[3px] text-left font-semibold lg:py-0.5"
>Target</th >Target</th
> <th class="font-semibold">Low</th> > <th class="font-semibold">Low</th>
@ -832,7 +836,7 @@
> >
<tbody <tbody
><tr ><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 class="py-[3px] text-left lg:py-0.5">Price</td>
<td>${lowPriceTarget}</td> <td>${lowPriceTarget}</td>
<td>${avgPriceTarget}</td> <td>${medianPriceTarget}</td> <td>${avgPriceTarget}</td> <td>${medianPriceTarget}</td>
@ -868,11 +872,9 @@
</div> </div>
<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 <div class="flex flex-col justify-between p-1 lg:max-w-[32%]">
class="flex flex-col justify-between p-1 lg:max-w-[32%] text-white"
>
<div> <div>
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<h2 class="mb-1 text-xl font-bold"> <h2 class="mb-1 text-xl font-bold">
@ -890,7 +892,7 @@
<p class="pr-2 sm:pr-4"> <p class="pr-2 sm:pr-4">
{data?.getAnalystInsight?.insight} {data?.getAnalystInsight?.insight}
</p> </p>
<p class="mt-5 italic text-white text-sm"> <p class="mt-5 italic text-sm">
Updated {data?.getAnalystInsight?.date} Updated {data?.getAnalystInsight?.date}
</p> </p>
{:else} {:else}
@ -899,10 +901,10 @@
<span class="mt-3"> <span class="mt-3">
Unlock content with Unlock content with
<a <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" href="/pricing"
>Pro Subscription <svg >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" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
@ -914,7 +916,7 @@
</span> </span>
</p> </p>
<p class="mt-5 italic text-white text-sm"> <p class="mt-5 italic text-sm">
Updated {data?.getAnalystInsight?.date} Updated {data?.getAnalystInsight?.date}
</p> </p>
{/if} {/if}
@ -948,7 +950,8 @@
class="w-full text-right text-tiny xs:text-sm md:text-smaller" class="w-full text-right text-tiny xs:text-sm md:text-smaller"
> >
<thead <thead
><tr class="border-b border-gray-600 font-normal" ><tr
class="border-b border-gray-300 dark:border-gray-600 font-normal"
><th ><th
class="whitespace-nowrap px-1 py-[3px] text-sm sm:text-[1rem] text-left font-semibold" class="whitespace-nowrap px-1 py-[3px] text-sm sm:text-[1rem] text-left font-semibold"
>Rating</th >Rating</th
@ -966,7 +969,9 @@
> >
<tbody> <tbody>
{#each categories as category} {#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 <td
class="whitespace-nowrap px-1 py-[3px] text-sm sm:text-[1rem] text-left" class="whitespace-nowrap px-1 py-[3px] text-sm sm:text-[1rem] text-left"
>{category}</td >{category}</td
@ -998,23 +1003,21 @@
</div> </div>
</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 Financial Forecast this Year
</h2> </h2>
{#if data?.getAnalystEstimate?.length !== 0} {#if data?.getAnalystEstimate?.length !== 0}
<div <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 <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 <div
class="mt-1 flex flex-wrap items-baseline justify-between space-y-2 bp:space-y-0" class="mt-1 flex flex-wrap items-baseline justify-between space-y-2 bp:space-y-0"
> >
<div <div class="flex items-baseline text-2xl font-semibold">
class="flex items-baseline text-2xl font-semibold text-white"
>
{data?.getAnalystEstimate[index]?.estimatedRevenueAvg !== {data?.getAnalystEstimate[index]?.estimatedRevenueAvg !==
null && null &&
data?.getAnalystEstimate[index]?.estimatedRevenueAvg !== 0 data?.getAnalystEstimate[index]?.estimatedRevenueAvg !== 0
@ -1023,9 +1026,7 @@
) )
: "n/a"} : "n/a"}
{#if data?.getAnalystEstimate[index]?.estimatedRevenueAvg !== null && data?.getAnalystEstimate[index]?.estimatedRevenueAvg !== 0} {#if data?.getAnalystEstimate[index]?.estimatedRevenueAvg !== null && data?.getAnalystEstimate[index]?.estimatedRevenueAvg !== 0}
<div <div class="ml-2 block text-sm font-semibold lg:hidden">
class="ml-2 block text-sm font-semibold text-white lg:hidden"
>
from {data?.getAnalystEstimate[index - 1]?.revenue !== from {data?.getAnalystEstimate[index - 1]?.revenue !==
undefined undefined
? abbreviateNumber( ? abbreviateNumber(
@ -1065,7 +1066,7 @@
</div> </div>
{#if data?.getAnalystEstimate[index]?.estimatedRevenueAvg !== null && data?.getAnalystEstimate[index]?.estimatedRevenueAvg !== 0} {#if data?.getAnalystEstimate[index]?.estimatedRevenueAvg !== null && data?.getAnalystEstimate[index]?.estimatedRevenueAvg !== 0}
<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]?.revenue !== null from {data?.getAnalystEstimate[index - 1]?.revenue !== null
? abbreviateNumber( ? abbreviateNumber(
@ -1078,13 +1079,11 @@
<div <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" 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 <div
class="mt-1 flex flex-wrap items-baseline justify-between space-y-2 bp:space-y-0" class="mt-1 flex flex-wrap items-baseline justify-between space-y-2 bp:space-y-0"
> >
<div <div class="flex items-baseline text-2xl font-semibold">
class="flex items-baseline text-2xl font-semibold text-white"
>
{data?.getAnalystEstimate[index + 1] {data?.getAnalystEstimate[index + 1]
?.estimatedRevenueAvg !== undefined ?.estimatedRevenueAvg !== undefined
? abbreviateNumber( ? abbreviateNumber(
@ -1092,9 +1091,7 @@
?.estimatedRevenueAvg, ?.estimatedRevenueAvg,
) )
: "n/a"} : "n/a"}
<div <div class="ml-2 block text-sm font-semibold lg:hidden">
class="ml-2 block text-sm font-semibold text-white lg:hidden"
>
from {data?.getAnalystEstimate[index] from {data?.getAnalystEstimate[index]
?.estimatedRevenueAvg !== undefined ?.estimatedRevenueAvg !== undefined
? abbreviateNumber( ? abbreviateNumber(
@ -1131,7 +1128,7 @@
</div> </div>
</div> </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 !== from {data?.getAnalystEstimate[index]?.estimatedRevenueAvg !==
undefined undefined
@ -1144,19 +1141,15 @@
<div <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" 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 <div
class="mt-1 flex flex-wrap items-baseline justify-between space-y-2 bp:space-y-0" class="mt-1 flex flex-wrap items-baseline justify-between space-y-2 bp:space-y-0"
> >
<div <div class="flex items-baseline text-2xl font-semibold">
class="flex items-baseline text-2xl font-semibold text-white"
>
{abbreviateNumber( {abbreviateNumber(
data?.getAnalystEstimate[index]?.estimatedEpsAvg, data?.getAnalystEstimate[index]?.estimatedEpsAvg,
)} )}
<div <div class="ml-2 block text-sm font-semibold lg:hidden">
class="ml-2 block text-sm font-semibold text-white lg:hidden"
>
from {data?.getAnalystEstimate[index - 1]?.eps} from {data?.getAnalystEstimate[index - 1]?.eps}
</div> </div>
</div> </div>
@ -1187,27 +1180,23 @@
</div> </div>
</div> </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} from {data?.getAnalystEstimate[index - 1]?.eps}
</div> </div>
</div> </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 <div
class="mt-1 flex flex-wrap items-baseline justify-between space-y-2 bp:space-y-0" class="mt-1 flex flex-wrap items-baseline justify-between space-y-2 bp:space-y-0"
> >
<div <div class="flex items-baseline text-2xl font-semibold">
class="flex items-baseline text-2xl font-semibold text-white"
>
{abbreviateNumber( {abbreviateNumber(
data?.getAnalystEstimate[index + 1]?.estimatedEpsAvg, data?.getAnalystEstimate[index + 1]?.estimatedEpsAvg,
)} )}
<div <div class="ml-2 block text-sm font-semibold lg:hidden">
class="ml-2 block text-sm font-semibold text-white lg:hidden"
>
from {abbreviateNumber( from {abbreviateNumber(
data?.getAnalystEstimate[index]?.estimatedEpsAvg, data?.getAnalystEstimate[index]?.estimatedEpsAvg,
)} )}
@ -1240,7 +1229,7 @@
</div> </div>
</div> </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( from {abbreviateNumber(
data?.getAnalystEstimate[index]?.estimatedEpsAvg, data?.getAnalystEstimate[index]?.estimatedEpsAvg,
@ -1258,7 +1247,7 @@
</div> </div>
{:else} {:else}
<div <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 <svg
class="w-6 h-6 shrink-0 inline-block sm:mr-2" class="w-6 h-6 shrink-0 inline-block sm:mr-2"