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

ui fixes

Browse Source
This commit is contained in:
MuslemRahimi 2024-11-01 01:48:47 +01:00
parent 0bbe523f39
commit 0bb2afb4a7
2 changed files with 63 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -297,7 +297,7 @@
<tr class=""> <tr class="">
<th <th
class="bg-[#27272A] border-b border-[#000] text-white font-semibold text-sm text-start" class="bg-[#27272A] border-b border-[#000] text-white font-semibold text-sm text-start"
>Year</th >Fiscal Year</th
> >
{#each xData as item} {#each xData as item}
<td <td
@ -308,15 +308,15 @@
</tr> </tr>
</thead> </thead>
<tbody class="shadow-md"> <tbody class="shadow-md">
<tr class="bg-[#09090B] border-b-[#09090B]"> <tr class="bg-[#27272A] border-b-[#27272A]">
<th <th
class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-[#09090B] border-b border-[#09090B]" class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-[#27272A] border-b border-[#27272A]"
> >
Revenue Revenue
</th> </th>
{#each tableForecastRevenue as item} {#each tableForecastRevenue as item}
<td <td
class="text-white text-sm sm:text-[1rem] text-end font-medium border-b border-[#09090B]" class="text-white text-sm sm:text-[1rem] text-end font-medium border-b border-[#27272A] bg-[#09090B]"
> >
{item?.val === "0.00" || {item?.val === "0.00" ||
item?.val === null || item?.val === null ||
@ -335,7 +335,7 @@
</th> </th>
{#each tableActualRevenue as item, index} {#each tableActualRevenue as item, index}
<td <td
class="text-white text-sm sm:text-[1rem] text-end font-medium bg-[#27272A]" class="text-white text-sm sm:text-[1rem] text-end font-medium bg-[#09090B]"
> >
{#if index === 0 || tableActualRevenue?.length === 0} {#if index === 0 || tableActualRevenue?.length === 0}
- -
@ -386,15 +386,15 @@
{/each} {/each}
</tr> </tr>
<tr class="bg-[#09090B] border-b-[#09090B]"> <tr class="bg-[#27272A] border-b-[#09090B]">
<th <th
class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-[#09090B] border-b border-[#09090B]" class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-[#27272A] border-b border-[#27272A]"
> >
EPS EPS
</th> </th>
{#each tableForecastEPS as item} {#each tableForecastEPS as item}
<td <td
class="text-white text-sm sm:text-[1rem] text-end font-medium border-b border-[#09090B]" class="text-white text-sm sm:text-[1rem] text-end font-medium border-b border-[#27272A] bg-[#09090B]"
> >
{item?.val === "0.00" || {item?.val === "0.00" ||
item?.val === null || item?.val === null ||
@ -413,7 +413,7 @@
</th> </th>
{#each tableActualEPS as item, index} {#each tableActualEPS as item, index}
<td <td
class="text-white text-sm sm:text-[1rem] text-end font-medium bg-[#27272A]" class="text-white text-sm sm:text-[1rem] text-end font-medium bg-[#09090B]"
> >
{#if index === 0 || tableActualEPS?.length === 0} {#if index === 0 || tableActualEPS?.length === 0}
- -
@ -479,14 +479,14 @@
</tr> </tr>
--> -->
<tr class="odd:bg-[#09090B] border-b-[#09090B]"> <tr class="bg-[#27272A] border-b-[#27272A]">
<th <th
class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-[#09090B] border-b border-[#09090B]" class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-[#27272A] border-b border-[#27272A]"
>No. Analysts</th >No. Analysts</th
> >
{#each tableForecastRevenue as item} {#each tableForecastRevenue as item}
<td <td
class="text-white text-sm sm:text-[1rem] text-end font-medium border-b border-[#09090B]" class="text-white text-sm sm:text-[1rem] text-end font-medium border-b border-[#27272A] bg-[#09090B]"
> >
{item?.numOfAnalysts === (null || 0) {item?.numOfAnalysts === (null || 0)
? "-" ? "-"
@ -534,16 +534,19 @@
</div> </div>
<div <div
class="mt-3 overflow-x-auto p-0 text-center sm:p-0.5 lg:mt-3.5" class="mt-3 overflow-x-auto p-0 text-center sm:p-0.5 lg:mt-3.5"
data-test="forecast-estimate-table"
> >
<table <table class="w-full text-right">
class="w-full text-right text-tiny xs:text-sm md:text-small"
>
<thead <thead
><tr class="border-b border-gray-600 align-bottom font-normal" ><tr
><th class="p-1 text-left font-semibold">Revenue</th> class="border-b border-gray-600 align-bottom text-white font-normal"
><th
class="p-1 text-left font-semibold text-sm sm:text-[1rem]"
>Revenue</th
>
{#each revenueDateList as date} {#each revenueDateList as date}
<th class="p-1 font-semibold">{date}</th> <th class="p-1 font-semibold text-sm sm:text-[1rem]"
>{date}</th
>
{/each} {/each}
</tr></thead </tr></thead
> >
@ -553,21 +556,27 @@
>High</td >High</td
> >
{#each highRevenueList as val} {#each highRevenueList as val}
<td class="px-1 py-[3px]">{abbreviateNumber(val)}</td> <td class="px-1 py-[3px] text-sm sm:text-[1rem]"
>{abbreviateNumber(val)}</td
>
{/each} {/each}
</tr><tr class="border-b border-gray-600 last:border-0" </tr><tr class="border-b border-gray-600 last:border-0"
><td class="whitespace-nowrap px-1 py-[3px] text-left" ><td class="whitespace-nowrap px-1 py-[3px] text-left"
>Avg</td >Avg</td
> >
{#each avgRevenueList as val} {#each avgRevenueList as val}
<td class="px-1 py-[3px]">{abbreviateNumber(val)}</td> <td class="px-1 py-[3px] text-sm sm:text-[1rem]"
>{abbreviateNumber(val)}</td
>
{/each} {/each}
</tr><tr class="border-b border-gray-600 last:border-0" </tr><tr class="border-b border-gray-600 last:border-0"
><td class="whitespace-nowrap px-1 py-[3px] text-left" ><td class="whitespace-nowrap px-1 py-[3px] text-left"
>Low</td >Low</td
> >
{#each lowRevenueList as val} {#each lowRevenueList as val}
<td class="px-1 py-[3px]">{abbreviateNumber(val)}</td> <td class="px-1 py-[3px] text-sm sm:text-[1rem]"
>{abbreviateNumber(val)}</td
>
{/each} {/each}
</tr></tbody </tr></tbody
> >
@ -588,14 +597,17 @@
class="mt-3 overflow-x-auto p-0 text-center sm:p-0.5 lg:mt-3.5" class="mt-3 overflow-x-auto p-0 text-center sm:p-0.5 lg:mt-3.5"
data-test="forecast-estimate-table" data-test="forecast-estimate-table"
> >
<table <table class="w-full text-right">
class="w-full text-right text-tiny xs:text-sm md:text-small"
>
<thead <thead
><tr class="border-b border-gray-600 align-bottom font-normal" ><tr class="border-b border-gray-600 align-bottom font-normal"
><th class="p-1 text-left font-semibold">EPS</th> ><th
class="p-1 text-left font-semibold text-sm sm:text-[1rem]"
>EPS</th
>
{#each epsDateList as date} {#each epsDateList as date}
<th class="p-1 font-semibold">{date}</th> <th class="p-1 font-semibold text-sm sm:text-[1rem]"
>{date}</th
>
{/each} {/each}
</tr></thead </tr></thead
> >
@ -605,21 +617,27 @@
>High</td >High</td
> >
{#each highEPSList as val} {#each highEPSList as val}
<td class="px-1 py-[3px]">{abbreviateNumber(val)}</td> <td class="px-1 py-[3px] text-sm sm:text-[1rem]"
>{abbreviateNumber(val)}</td
>
{/each} {/each}
</tr><tr class="border-b border-gray-600 last:border-0" </tr><tr class="border-b border-gray-600 last:border-0"
><td class="whitespace-nowrap px-1 py-[3px] text-left" ><td class="whitespace-nowrap px-1 py-[3px] text-left"
>Avg</td >Avg</td
> >
{#each avgEPSList as val} {#each avgEPSList as val}
<td class="px-1 py-[3px]">{abbreviateNumber(val)}</td> <td class="px-1 py-[3px] text-sm sm:text-[1rem]"
>{abbreviateNumber(val)}</td
>
{/each} {/each}
</tr><tr class="border-b border-gray-600 last:border-0" </tr><tr class="border-b border-gray-600 last:border-0"
><td class="whitespace-nowrap px-1 py-[3px] text-left" ><td class="whitespace-nowrap px-1 py-[3px] text-left"
>Low</td >Low</td
> >
{#each lowEPSList as val} {#each lowEPSList as val}
<td class="px-1 py-[3px]">{abbreviateNumber(val)}</td> <td class="px-1 py-[3px] text-sm sm:text-[1rem]"
>{abbreviateNumber(val)}</td
>
{/each} {/each}
</tr></tbody </tr></tbody
> >

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

@ -370,6 +370,7 @@
yAxis: { yAxis: {
type: "value", type: "value",
axisLabel: { axisLabel: {
color: "#fff",
formatter: (value) => `$${value.toFixed(0)}`, formatter: (value) => `$${value.toFixed(0)}`,
}, },
@ -579,7 +580,7 @@
</div> </div>
<div <div
class="w-full rounded-sm border border-gray-600 p-3 divide-gray-600 lg:flex lg:space-x-4 lg:divide-x" class="w-full rounded-sm border border-gray-600 mt-8 sm:mt-0 p-3 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%] text-white" class="flex flex-col justify-between p-1 lg:max-w-[32%] text-white"
@ -619,11 +620,12 @@
<thead <thead
><tr class="border-b border-gray-600 font-normal" ><tr class="border-b border-gray-600 font-normal"
><th ><th
class="whitespace-nowrap px-1 py-[3px] text-left font-semibold" class="whitespace-nowrap px-1 py-[3px] text-sm sm:text-[1rem] text-left font-semibold"
>Rating</th >Rating</th
> >
{#each recommendationList as item} {#each recommendationList as item}
<th class="px-1 py-[3px] text-right font-semibold" <th
class="px-1 py-[3px] text-sm sm:text-[1rem] text-right font-semibold"
>{new Intl.DateTimeFormat("en", { >{new Intl.DateTimeFormat("en", {
month: "short", month: "short",
year: "2-digit", year: "2-digit",
@ -635,22 +637,27 @@
<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-600 font-normal">
<td class="whitespace-nowrap px-1 py-[3px] text-left" <td
class="whitespace-nowrap px-1 py-[3px] text-sm sm:text-[1rem] text-left"
>{category}</td >{category}</td
> >
{#each recommendationList as entry} {#each recommendationList as entry}
<td class="px-1 py-[3px] text-right" <td
class="px-1 py-[3px] text-sm sm:text-[1rem] text-right"
>{entry[category]}</td >{entry[category]}</td
> >
{/each} {/each}
</tr> </tr>
{/each} {/each}
<tr class="font-semibold"> </tr><tr class="font-semibold"> <tr class="font-semibold"> </tr><tr class="font-semibold">
<td class="whitespace-nowrap px-1 py-[3px] text-left" <td
class="whitespace-nowrap px-1 py-[3px] text-sm sm:text-[1rem] text-left"
>Total</td >Total</td
> >
{#each recommendationList as _, i} {#each recommendationList as _, i}
<td class="px-1 py-[3px] text-right"> <td
class="px-1 py-[3px] text-sm sm:text-[1rem] text-right"
>
{getTotalForDate(i)} {getTotalForDate(i)}
</td> </td>
{/each} {/each}
@ -661,7 +668,7 @@
</div> </div>
</div> </div>
<h2 class="mt-5 text-xl sm:text-2xl text-white font-bold mb-4"> <h2 class="mt-8 text-xl sm:text-2xl text-white font-bold mb-4">
Financial Forecast this Year Financial Forecast this Year
</h2> </h2>
{#if data?.getAnalystEstimate?.length !== 0} {#if data?.getAnalystEstimate?.length !== 0}