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-12-25 18:43:08 +01:00
parent f9662226be
commit c2f9cde371
10 changed files with 486 additions and 335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/lib/components/Infobox.svelte
View File

@ -1,27 +1,27 @@
<script lang="ts">
export let text;
export let text;
</script>
<div
class="mt-5 sm:mt-0 border-l-4 border-white p-0 sm:p-4 text-white flex flex-row items-center"
class="mt-5 bg-primary rounded-l-none rounded-md sm:mt-0 border-l-4 border-white p-0 sm:p-4 text-white flex flex-row items-center"
>
<svg
class="h-6 w-6 hidden sm:block"
viewBox="0 0 20 20"
fill="currentColor"
style="max-width:40px"
aria-hidden="true"
><path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
></path></svg
>
<div class="ml-3 w-full">
<div class="flex w-full flex-row justify-between">
<div>
{@html text}
<svg
class="h-6 w-6 hidden sm:block"
viewBox="0 0 20 20"
fill="currentColor"
style="max-width:40px"
aria-hidden="true"
><path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
></path></svg
>
<div class="ml-3 w-full">
<div class="flex w-full flex-row justify-between">
<div>
{@html text}
</div>
</div>
</div>
</div>
</div>

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

@ -1,5 +1,5 @@
<script lang="ts">
import { stockTicker, screenWidth } from "$lib/store";
import { stockTicker } from "$lib/store";
import { page } from "$app/stores";
export let data;
@ -57,33 +57,34 @@
<section class="w-full bg-[#09090B] overflow-hidden h-full">
<div class="m-auto h-full overflow-hidden">
<main class="w-fit sm:w-full sm:max-w-2xl">
<main class="w-full">
<div class="m-auto">
{#if names?.length > 0}
<nav
class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
>
<ul class="flex flex-row items-center w-full text-white">
{#each subsectionTitles?.slice(0, 4) as title}
{@const sectionKey = title
?.toLowerCase()
?.replace(/&/g, "") // Remove & symbol
?.replace(/\s+/g, "-") // Replace spaces with dash
?.replace(/-{2,}/g, "-") // Replace multiple dashes with single dash
?.replace(/^-|-$/g, "") // Remove leading/trailing dashes
?.trim()}
<a
href={getHref(sectionKey)}
on:click={() => changeSubSection(sectionKey)}
class="p-2 px-5 cursor-pointer {displaySubSection === sectionKey
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
>
{title}
</a>
{/each}
</ul>
</nav>
<nav
class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
>
<ul class="flex flex-row items-center w-full text-white">
{#each subsectionTitles as title}
{@const sectionKey = title
?.toLowerCase()
?.replace(/&/g, "") // Remove & symbol
?.replace(/\s+/g, "-") // Replace spaces with dash
?.replace(/-{2,}/g, "-") // Replace multiple dashes with single dash
?.replace(/^-|-$/g, "") // Remove leading/trailing dashes
?.trim()}
<a
href={getHref(sectionKey)}
on:click={() => changeSubSection(sectionKey)}
class="p-2 px-5 cursor-pointer {displaySubSection ===
sectionKey
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
>
{title}
</a>
{/each}
</ul>
</nav>
{/if}
</div>
</main>

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

@ -103,17 +103,17 @@
class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto overflow-x-scroll pr-5 sm:pr-0"
>
<table
class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]"
class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B]"
>
<thead>
<thead class="">
<tr>
<th
class="bg-[#09090B] border-b border-[#09090B] text-white font-semibold text-sm sm:text-[1rem] text-start"
class=" border-b border-gray-800 text-white font-semibold text-sm sm:text-[1rem] text-start"
>Quarter</th
>
{#each xData as item}
<th
class="z-20 bg-[#09090B] border-b border-[#09090B] text-white font-semibold text-sm text-center bg-[#09090B]"
class="z-20 border-b border-gray-800 text-white font-semibold text-sm text-center"
>{new Date(item ?? null)?.toLocaleString("en-US", {
month: "short",
day: "numeric",
@ -125,32 +125,30 @@
</thead>
<tbody class="shadow-md">
{#each revenueNames as name, index}
<tr class="bg-[#09090B] border-b-[#09090B] odd:bg-secondary">
<tr class="bg-[#09090B] border-b-[#09090B] odd:bg-odd">
<th
class="whitespace-nowrap odd:bg-secondary text-sm sm:text-[1rem] text-start font-medium border-b border-[#09090B]"
class="whitespace-nowrap odd:bg-odd text-sm sm:text-[1rem] text-start font-medium border-b border-gray-800"
>
{#if index < 3}
<a
href={getHref(name)}
class="sm:hover:text-blue-400 cursor-pointer underline underline-offset-4"
>
{name} Revenue
</a>
{:else}
<a
href={getHref(name)}
class="sm:hover:text-blue-400 cursor-pointer underline underline-offset-4"
>
{name} Revenue
{/if}
</a>
</th>
{#each categoryValues[index] as value}
<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-gray-800"
>
{value !== null && value !== undefined ? abbreviateNumber(value) : "n/a"}
{@html value !== null && value !== undefined
? abbreviateNumber(value, false, true)
: "n/a"}
</td>
{/each}
</tr>
<tr class="bg-[#09090B] border-b-[#09090B]">
<td
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-[#09090B] border-b border-gray-800"
>
<span class="ml-2">{name} Revenue Growth</span>
</td>
@ -160,9 +158,10 @@
? 'text-[#00FC50]'
: growthValue < 0
? 'text-[#FF2F1F]'
: 'text-white'} font-medium border-b border-[#09090B]"
: 'text-white'} font-medium border-b border-gray-800"
>
{growthValue > 0 ? "+" : ""}{growthValue !== null && growthValue !== undefined
{growthValue > 0 ? "+" : ""}{growthValue !== null &&
growthValue !== undefined
? growthValue?.toFixed(2) + "%"
: "n/a"}
</td>
@ -187,12 +186,12 @@
<thead>
<tr>
<th
class="bg-[#09090B] border-b border-[#09090B] text-white font-semibold text-sm sm:text-[1rem] text-start"
class="bg-[#09090B] border-b border-gray-800 text-white font-semibold text-sm sm:text-[1rem] text-start"
>Quarter</th
>
{#each geographicXData as item}
<th
class="z-20 bg-[#09090B] border-b border-[#09090B] text-white font-semibold text-sm text-center bg-[#09090B]"
class="z-20 bg-[#09090B] border-b border-gray-800 text-white font-semibold text-sm text-center bg-[#09090B]"
>{new Date(item ?? null)?.toLocaleString("en-US", {
month: "short",
day: "numeric",
@ -204,26 +203,26 @@
</thead>
<tbody class="shadow-md">
{#each geographicNames as name, index}
<tr
class="bg-[#09090B] border-b-[#09090B] odd:bg-secondary"
>
<tr class="bg-[#09090B] border-b-[#09090B] odd:bg-odd">
<th
class="text-white whitespace-nowrap odd:bg-secondary text-sm sm:text-[1rem] text-start font-medium border-b border-[#09090B]"
class="text-white whitespace-nowrap odd:bg-odd text-sm sm:text-[1rem] text-start font-medium border-b border-gray-800"
>{name} Revenue</th
>
{#each geographiCategoryValues[index] as value}
<th
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-gray-800"
>
{value !== null && value !== 0 && value !== undefined
? abbreviateNumber(value)
: "-"}
{@html value !== null &&
value !== 0 &&
value !== undefined
? abbreviateNumber(value, false, true)
: "n/a"}
</th>
{/each}
</tr>
<tr class="bg-[#09090B] border-b-[#09090B]">
<td
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-[#09090B] border-b border-gray-800"
>
<span class="ml-2">{name} Revenue Growth</span>
</td>
@ -234,13 +233,13 @@
? 'text-[#00FC50]'
: growthValue < 0
? 'text-[#FF2F1F]'
: 'text-white'} font-medium border-b border-[#09090B]"
: 'text-white'} font-medium border-b border-gray-800"
>
{growthValue > 0 ? "+" : ""}{growthValue !== null &&
growthValue !== 0 &&
growthValue !== undefined
? growthValue?.toFixed(2) + "%"
: "-"}
: "n/a"}
</td>
{/each}
</tr>
@ -250,30 +249,29 @@
</div>
{/if}
{:else}
<div
class="mt-5 sm:mt-0 border-l-4 border-white p-0 sm:p-4 text-white flex flex-row items-center"
>
<svg
class="h-6 w-6 hidden sm:block"
viewBox="0 0 20 20"
fill="currentColor"
style="max-width:40px"
aria-hidden="true"
><path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
></path></svg
>
<div class="ml-3 w-full">
<div class="flex w-full flex-row justify-between">
<div>
Currently, there are no business metrics available for {$stockTicker}.
</div>
</div>
<div
class="mt-5 sm:mt-0 border-l-4 border-white p-0 sm:p-4 text-white flex flex-row items-center"
>
<svg
class="h-6 w-6 hidden sm:block"
viewBox="0 0 20 20"
fill="currentColor"
style="max-width:40px"
aria-hidden="true"
><path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
></path></svg
>
<div class="ml-3 w-full">
<div class="flex w-full flex-row justify-between">
<div>
Currently, there are no business metrics available for {$stockTicker}.
</div>
</div>
</div>
</div>
{/if}
</div>
</div>

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

@ -8,10 +8,10 @@
import { Chart } from "svelte-echarts";
import { init, use } from "echarts/core";
import { LineChart, BarChart } from "echarts/charts";
import { BarChart } from "echarts/charts";
import { GridComponent, TooltipComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
use([BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
export let data;
@ -98,8 +98,7 @@
{
name: "Revenue",
data: valueList,
type: "line",
areaStyle: { opacity: 0.08 },
type: "bar",
smooth: true,
symbol: "none",
itemStyle: {
@ -206,7 +205,7 @@
class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
>
<thead>
<tr class="border border-gray-600">
<tr class="border-b border-gray-800">
<th
class="text-white font-semibold text-start text-sm sm:text-[1rem]"
>Quarter</th
@ -229,9 +228,7 @@
<tbody>
{#each tableList as item, index}
<!-- row -->
<tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B] cursor-pointer"
>
<tr class=" odd:bg-odd border-b border-gray-800">
<td
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
>
@ -248,20 +245,22 @@
<td
class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]"
>
{item?.value !== null
? abbreviateNumber(item?.value)
: "-"}
{@html item?.value !== null
? abbreviateNumber(item?.value, false, true)
: "n/a"}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]"
>
{#if Number(item?.value - tableList[index + 1]?.value)}
{abbreviateNumber(
{@html abbreviateNumber(
item?.value - tableList[index + 1]?.value,
false,
true,
)}
{:else}
-
n/a
{/if}
</td>
@ -298,7 +297,7 @@
<div class="w-full flex justify-center items-center h-80">
<div class="relative">
<label
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
class="bg-odd rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
>
<span class="loading loading-spinner loading-md text-gray-400"
></span>

446
src/routes/stocks/[tickerID]/statistics/+page.svelte
View File

File diff suppressed because it is too large Load Diff

2
src/routes/stocks/[tickerID]/statistics/employees/+layout.svelte
View File

@ -40,7 +40,7 @@
{/if}
{#if similarStocks?.length > 0}
<div
class="w-full p-2 text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
class="w-full p-2 bg-primary text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
>
<h3 class="p-2 pt-4 text-2xl font-semibold">Related Stocks</h3>
<table class="table table-sm table-compact w-full text-white">

95
src/routes/stocks/[tickerID]/statistics/employees/+page.svelte
View File

@ -345,20 +345,26 @@
};
function generateEmployeeInfoHTML() {
if (employeeHistory?.length !== 0 && !dateDistance) {
const formattedEmployees = new Intl.NumberFormat('en').format(employees);
const latestFilingDate = new Date(
employeeHistory[employeeHistory.length - 1]['filingDate']
).toLocaleString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric'
});
const formattedChangeRate = new Intl.NumberFormat('en').format(changeRate);
const changeDirection = changeRate >= 0 && changeRate !== null ? 'increased' : 'decreased';
const growthRateClass = changeRate >= 0 && changeRate !== null ? 'text-[#00FC50]' : 'text-[#FF2F1F]';
if (employeeHistory?.length !== 0 && !dateDistance) {
const formattedEmployees = new Intl.NumberFormat("en").format(employees);
const latestFilingDate = new Date(
employeeHistory[employeeHistory.length - 1]["filingDate"],
).toLocaleString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
});
const formattedChangeRate = new Intl.NumberFormat("en").format(
changeRate,
);
const changeDirection =
changeRate >= 0 && changeRate !== null ? "increased" : "decreased";
const growthRateClass =
changeRate >= 0 && changeRate !== null
? "text-[#00FC50]"
: "text-[#FF2F1F]";
return `
return `
<span>
${$displayCompanyName} had ${formattedEmployees} employees on ${latestFilingDate}. The number of employees ${changeDirection}
by ${formattedChangeRate} or
@ -368,31 +374,31 @@
compared to the previous year.
</span>
`;
} else if (employeeHistory?.length !== 0 && dateDistance) {
const abbreviatedEmployees = abbreviateNumber(employees);
const latestFilingDate = new Date(
employeeHistory[employeeHistory.length - 1]['filingDate']
).toLocaleString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric'
});
} else if (employeeHistory?.length !== 0 && dateDistance) {
const abbreviatedEmployees = abbreviateNumber(employees);
const latestFilingDate = new Date(
employeeHistory[employeeHistory.length - 1]["filingDate"],
).toLocaleString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
});
return `
return `
<span>
${$displayCompanyName} had ${abbreviatedEmployees} employees on ${latestFilingDate}. Since then, the company has not submitted any additional employee data for more than a year.
</span>
`;
} else {
return `
} else {
return `
<span>
No employee history for ${$displayCompanyName}. Probably, no records of past employees.
</span>
`;
}
}
}
const htmlOutput = generateEmployeeInfoHTML();
const htmlOutput = generateEmployeeInfoHTML();
</script>
<svelte:head>
@ -443,12 +449,11 @@ const htmlOutput = generateEmployeeInfoHTML();
{$stockTicker} Employees
</h2>
<Infobox text={htmlOutput} />
<Infobox text={htmlOutput} />
</div>
<div
class="my-5 grid grid-cols-2 gap-3 xs:mt-6 bp:mt-7 sm:grid-cols-3 sm:gap-6 "
class="my-5 grid grid-cols-2 gap-3 xs:mt-6 bp:mt-7 sm:grid-cols-3 sm:gap-6"
>
<div>
Employees
@ -515,7 +520,11 @@ const htmlOutput = generateEmployeeInfoHTML();
<div
class="mt-0.5 text-lg font-semibold bp:text-xl sm:mt-1.5 sm:text-2xl"
>
{abbreviateNumber(data?.getStockQuote?.marketCap)}
{@html abbreviateNumber(
data?.getStockQuote?.marketCap,
false,
true,
)}
</div>
</div>
</div>
@ -527,9 +536,7 @@ const htmlOutput = generateEmployeeInfoHTML();
Employees Chart
</h1>
{#if historyList?.length > 0}
<div
class="flex flex-row items-center w-fit ml-auto"
>
<div class="flex flex-row items-center w-fit ml-auto">
<div class="relative inline-block text-left grow">
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
@ -623,25 +630,25 @@ const htmlOutput = generateEmployeeInfoHTML();
<table
class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
>
<thead>
<thead class="border-b border-gray-800">
<tr>
<th
class="text-start border-b border-[#09090B] bg-[#09090B] text-white text-sm whitespace-nowrap font-semibold"
class="text-start text-white text-sm whitespace-nowrap font-semibold"
>
Date
</th>
<th
class="text-end border-b border-[#09090B] bg-[#09090B] text-white text-sm whitespace-nowrap font-semibold"
class="text-end text-white text-sm whitespace-nowrap font-semibold"
>
Employees
</th>
<th
class="text-end border-b border-[#09090B] bg-[#09090B] text-white text-sm whitespace-nowrap font-semibold"
class="text-end text-white text-sm whitespace-nowrap font-semibold"
>
Change
</th>
<th
class="text-end border-b border-[#09090B] bg-[#09090B] text-white text-sm whitespace-nowrap font-semibold"
class="text-end text-white text-sm whitespace-nowrap font-semibold"
>
Growth
</th>
@ -649,9 +656,9 @@ const htmlOutput = generateEmployeeInfoHTML();
</thead>
<tbody class="">
{#each historyList as item, index}
<tr class="text-gray-200 odd:bg-secondary">
<tr class="text-gray-200 odd:bg-odd">
<td
class="text-start border-b border-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap text-white"
class="text-start border-b border-gray-800 text-sm sm:text-[1rem] whitespace-nowrap text-white"
>
{new Date(item?.filingDate)?.toLocaleString("en-US", {
month: "short",
@ -661,12 +668,12 @@ const htmlOutput = generateEmployeeInfoHTML();
})}
</td>
<td
class="text-end border-b border-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap text-white"
class="text-end border-b border-gray-800 text-sm sm:text-[1rem] whitespace-nowrap text-white"
>
{new Intl.NumberFormat("en").format(item?.employeeCount)}
</td>
<td
class="text-end border-b border-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap text-white"
class="text-end border-b border-gray-800 text-sm sm:text-[1rem] whitespace-nowrap text-white"
>
{#if Number(item?.employeeCount - historyList[index + 1]?.employeeCount)}
{new Intl.NumberFormat("en")?.format(
@ -678,7 +685,7 @@ const htmlOutput = generateEmployeeInfoHTML();
{/if}
</td>
<td
class="text-end border-b border-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap text-white text-end"
class="text-end border-b border-gray-800 text-sm sm:text-[1rem] whitespace-nowrap text-white text-end"
>
{#if index + 1 - historyList?.length === 0}
n/a

2
src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte
View File

@ -105,7 +105,7 @@
{#if similarStocks?.length > 0}
<div
class="w-full p-2 text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
class="w-full p-2 text-white border border-gray-600 bg-primary rounded-md h-fit pb-4 mt-4 cursor-pointer"
>
<h3 class="p-2 pt-4 text-2xl font-semibold">Related Stocks</h3>
<table class="table table-sm table-compact w-full text-white">

47
src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
View File

@ -301,7 +301,6 @@
name: "Mkt Cap",
data: filteredData?.marketCapList,
type: "line",
areaStyle: { opacity: 0.2 },
smooth: true,
symbol: "none",
itemStyle: {
@ -416,27 +415,27 @@
{#if rawData?.length !== 0}
<div class="grid grid-cols-1 gap-2">
<Infobox text={`${$displayCompanyName} has a market cap of ${abbreviateNumber(
data?.getStockQuote?.marketCap
<Infobox
text={`${$displayCompanyName} has a market cap of ${abbreviateNumber(
data?.getStockQuote?.marketCap,
)} as of ${new Date()?.toLocaleString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
})}. Its market cap has ${changePercentageYearAgo > 0
? "increased"
: changePercentageYearAgo < 0
? "decreased"
: "unchanged"} by ${abbreviateNumber(
})}. Its market cap has ${
changePercentageYearAgo > 0
? "increased"
: changePercentageYearAgo < 0
? "decreased"
: "unchanged"
} by ${abbreviateNumber(
changePercentageYearAgo?.toFixed(2),
)}% in one year.`}
/>
/>
<div
class="mb-4 mt-5 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
class="mb-4 mt-5 bg-primary flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
>
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
<div class="flex items-center justify-between sm:block">
@ -446,7 +445,11 @@
<div
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
>
{abbreviateNumber(data?.getStockQuote?.marketCap)}
{@html abbreviateNumber(
data?.getStockQuote?.marketCap,
false,
true,
)}
</div>
</div>
</div>
@ -660,10 +663,10 @@
<div class="w-full overflow-x-scroll">
<table
class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
class="table table-sm table-compact rounded-none sm:rounded-md w-full m-auto mt-4"
>
<thead>
<tr class="border border-gray-600">
<thead class="">
<tr class="border-b border-gray-800">
<th class="text-white font-semibold text-start text-sm"
>Date</th
>
@ -679,22 +682,22 @@
{#each tableList as item, index}
<!-- row -->
<tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B] shake-ticker cursor-pointer"
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800"
>
<td
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b border-gray-800"
>
{item?.date}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]"
class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b border-gray-800"
>
{abbreviateNumber(item?.marketCap)}
</td>
<td
class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]"
class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b border-gray-800"
>
{#if index + 1 - tableList?.length === 0}
-
@ -740,7 +743,7 @@
<div class="w-full flex justify-center items-center h-80">
<div class="relative">
<label
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
class="bg-odd rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
>
<span class="loading loading-spinner loading-md text-gray-400"
></span>

1
tailwind.config.cjs
View File

@ -27,6 +27,7 @@ module.exports = {
foreground: "hsl(var(--foreground) / <alpha-value>)",
primary: "#1E222D",
secondary: "#2A2E39",
odd: "#121217",
destructive: {
DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",