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-10-21 21:15:41 +02:00
parent 06a01fee54
commit 062e0a5b1c
2 changed files with 100 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/routes/stocks/[tickerID]/metrics/+layout.svelte
View File

@ -4,12 +4,15 @@
export let data; export let data;
const names = data?.getBusinessMetrics?.revenue?.names; const names = data?.getBusinessMetrics?.revenue?.names || [];
const subsectionTitles = ["Overview", ...names]; const subsectionTitles = ["Overview", ...names];
const sectionMap = Object.fromEntries( const sectionMap = Object.fromEntries(
subsectionTitles.map((title) => { subsectionTitles?.map((title) => {
const key = title.toLowerCase().replace(/ & /g, "-").replace(/ /g, "-"); const key = title
?.toLowerCase()
?.replace(/ & /g, "-")
?.replace(/ /g, "-");
return [key, key === "overview" ? "" : key]; return [key, key === "overview" ? "" : key];
}), }),
); );

51
src/routes/stocks/[tickerID]/metrics/+page.svelte
View File

@ -8,23 +8,26 @@
export let data; export let data;
const names = data?.getBusinessMetrics?.revenue?.names; const names = data?.getBusinessMetrics?.revenue?.names || [];
const subsectionTitles = ["Overview", ...names]; const subsectionTitles = ["Overview", ...names];
const sectionMap = Object.fromEntries( const sectionMap = Object.fromEntries(
subsectionTitles.map((title) => { subsectionTitles?.map((title) => {
const key = title.toLowerCase().replace(/ & /g, "-").replace(/ /g, "-"); const key = title
?.toLowerCase()
?.replace(/ & /g, "-")
?.replace(/ /g, "-");
return [key, key === "overview" ? "" : key]; return [key, key === "overview" ? "" : key];
}), }),
); );
const dataset = data?.getBusinessMetrics?.revenue?.history; const dataset = data?.getBusinessMetrics?.revenue?.history || [];
const geographicDataset = data?.getBusinessMetrics?.geographic?.history; const geographicDataset = data?.getBusinessMetrics?.geographic?.history || [];
const revenueNames = data?.getBusinessMetrics?.revenue?.names; const revenueNames = data?.getBusinessMetrics?.revenue?.names || [];
const geographicNames = data?.getBusinessMetrics?.geographic?.names; const geographicNames = data?.getBusinessMetrics?.geographic?.names || [];
const xData = dataset?.map((item) => item?.date); const xData = dataset?.map((item) => item?.date);
const geographicXData = geographicDataset?.map((item) => item?.date); const geographicXData = geographicDataset?.map((item) => item?.date);
@ -90,7 +93,7 @@
class="relative flex justify-center items-center overflow-hidden w-full" class="relative flex justify-center items-center overflow-hidden w-full"
> >
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0"> <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
{#if data?.getAnalystEstimate?.length !== 0} {#if revenueNames?.length !== 0 || geographicNames?.length !== 0}
<h2 class="mt-5 text-xl sm:text-2xl text-gray-200 font-bold mb-4"> <h2 class="mt-5 text-xl sm:text-2xl text-gray-200 font-bold mb-4">
{$displayCompanyName} Revenue Breakdown {$displayCompanyName} Revenue Breakdown
</h2> </h2>
@ -169,6 +172,7 @@
</table> </table>
</div> </div>
{#if geographicNames?.length !== 0}
<h2 class="mt-10 text-xl sm:text-2xl text-gray-200 font-bold mb-4"> <h2 class="mt-10 text-xl sm:text-2xl text-gray-200 font-bold mb-4">
Revenue by Geography Revenue by Geography
</h2> </h2>
@ -199,7 +203,9 @@
</thead> </thead>
<tbody class="shadow-md"> <tbody class="shadow-md">
{#each geographicNames as name, index} {#each geographicNames as name, index}
<tr class="bg-[#09090B] border-b-[#09090B] odd:bg-[#27272A]"> <tr
class="bg-[#09090B] border-b-[#09090B] odd:bg-[#27272A]"
>
<th <th
class="text-white whitespace-nowrap odd:bg-[#27272A] text-sm sm:text-[1rem] text-start font-medium border-b border-[#09090B]" class="text-white whitespace-nowrap odd:bg-[#27272A] text-sm sm:text-[1rem] text-start font-medium border-b border-[#09090B]"
>{name} Revenue</th >{name} Revenue</th
@ -222,7 +228,8 @@
</th> </th>
{#each geographicGrowthValues[index] as growthValue} {#each geographicGrowthValues[index] as growthValue}
<td <td
class="text-sm sm:text-[1rem] text-end {growthValue > 0 class="text-sm sm:text-[1rem] text-end {growthValue >
0
? 'text-[#37C97D]' ? 'text-[#37C97D]'
: growthValue < 0 : growthValue < 0
? 'text-[#FF2F1F]' ? 'text-[#FF2F1F]'
@ -240,24 +247,22 @@
</tbody> </tbody>
</table> </table>
</div> </div>
{/if}
{:else} {:else}
<div <div
class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]" class="w-full text-white text-start p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
> >
<svg <svg
class="w-6 h-6 mr-2" class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
fill="none" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 256 256"
stroke="currentColor" ><path
fill="#a474f6"
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
/></svg
> >
<path Currently, there are no business metrics available for {$stockTicker}.
stroke-linecap="round" We're working to add more data soon!
stroke-linejoin="round"
stroke-width="2"
d="M12 12l-2 2m0-2l2-2m2 2h6m-6 0H6"
/>
</svg>
<p class="font-medium">No estimates available.</p>
</div> </div>
{/if} {/if}
</div> </div>