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

ui fix employee page

Browse Source
This commit is contained in:
MuslemRahimi 2025-03-31 23:10:31 +02:00
parent 377ed553b4
commit 547aa8b44d
5 changed files with 64 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/routes/etf/[tickerID]/+page.svelte
View File

@ -91,8 +91,8 @@
? "#047857"
: "#00FC50";
const fillColorStart = isNegative
? "rgba(204, 38, 26, 0.3)"
: "rgb(4, 120, 87, 0.3)"; //"rgba(0, 252, 80, 0.3)";
? "rgba(204, 38, 26, 0.4)"
: "rgb(4, 120, 87, 0.4)"; //"rgba(0, 252, 80, 0.3)";
const fillColorEnd = isNegative
? "rgba(204, 38, 26, 0.004)"
: "rgb(4, 120, 87, 0.004)"; //"rgba(0, 252, 80, 0.004)";
@ -119,8 +119,8 @@
const options = {
chart: {
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
height: 360,
animation: false,
height: 360,
events: {
// Add touch event handling to hide tooltip on mobile
load: function () {
@ -212,26 +212,29 @@
},
labels: {
style: { color: $mode === "light" ? "black" : "white" },
distance: 20,
distance: 10,
formatter: function () {
const date = new Date(this?.value);
if (displayData === "1D") {
return date?.toLocaleTimeString("en-US", {
hour: "2-digit",
minute: "2-digit",
const timeString = date?.toLocaleTimeString("en-US", {
hour: "numeric",
hour12: true,
});
return `<span class="font-[501] text-xs">${timeString.replace(/\s/g, " ")}</span>`;
} else if (["1W", "1M"].includes(displayData)) {
return date?.toLocaleDateString("en-US", {
const timeString = date?.toLocaleDateString("en-US", {
month: "short",
day: "numeric",
timeZone: "UTC",
});
return `<span class="font-[501] text-xs">${timeString}</span>`;
} else {
return date?.toLocaleDateString("en-US", {
const timeString = date?.toLocaleDateString("en-US", {
year: "2-digit",
month: "short",
timeZone: "UTC",
});
return `<span class="font-[501] text-xs">${timeString}</span>`;
}
},
},
@ -290,7 +293,7 @@
data: displayData === "1D" ? seriesData : priceList,
animation: false,
color: lineColor,
lineWidth: 1.3,
lineWidth: 1.5,
marker: {
enabled: false,
},
@ -307,7 +310,6 @@
return options;
}
//const startTimeTracking = performance.now();
//==========================//

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

@ -89,8 +89,8 @@
? "#047857"
: "#00FC50";
const fillColorStart = isNegative
? "rgba(204, 38, 26, 0.3)"
: "rgb(4, 120, 87, 0.3)"; //"rgba(0, 252, 80, 0.3)";
? "rgba(204, 38, 26, 0.4)"
: "rgb(4, 120, 87, 0.4)"; //"rgba(0, 252, 80, 0.3)";
const fillColorEnd = isNegative
? "rgba(204, 38, 26, 0.004)"
: "rgb(4, 120, 87, 0.004)"; //"rgba(0, 252, 80, 0.004)";
@ -117,8 +117,8 @@
const options = {
chart: {
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
height: 360,
animation: false,
height: 360,
events: {
// Add touch event handling to hide tooltip on mobile
load: function () {
@ -210,26 +210,29 @@
},
labels: {
style: { color: $mode === "light" ? "black" : "white" },
distance: 20,
distance: 10,
formatter: function () {
const date = new Date(this?.value);
if (displayData === "1D") {
return date?.toLocaleTimeString("en-US", {
hour: "2-digit",
minute: "2-digit",
const timeString = date?.toLocaleTimeString("en-US", {
hour: "numeric",
hour12: true,
});
return `<span class="font-[501] text-xs">${timeString.replace(/\s/g, " ")}</span>`;
} else if (["1W", "1M"].includes(displayData)) {
return date?.toLocaleDateString("en-US", {
const timeString = date?.toLocaleDateString("en-US", {
month: "short",
day: "numeric",
timeZone: "UTC",
});
return `<span class="font-[501] text-xs">${timeString}</span>`;
} else {
return date?.toLocaleDateString("en-US", {
const timeString = date?.toLocaleDateString("en-US", {
year: "2-digit",
month: "short",
timeZone: "UTC",
});
return `<span class="font-[501] text-xs">${timeString}</span>`;
}
},
},
@ -288,7 +291,7 @@
data: displayData === "1D" ? seriesData : priceList,
animation: false,
color: lineColor,
lineWidth: 1.3,
lineWidth: 1.5,
marker: {
enabled: false,
},

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

@ -93,8 +93,8 @@
? "#047857"
: "#00FC50";
const fillColorStart = isNegative
? "rgba(204, 38, 26, 0.5)"
: "rgb(4, 120, 87, 0.5)"; //"rgba(0, 252, 80, 0.3)";
? "rgba(204, 38, 26, 0.4)"
: "rgb(4, 120, 87, 0.4)"; //"rgba(0, 252, 80, 0.3)";
const fillColorEnd = isNegative
? "rgba(204, 38, 26, 0.004)"
: "rgb(4, 120, 87, 0.004)"; //"rgba(0, 252, 80, 0.004)";
@ -295,7 +295,7 @@
data: displayData === "1D" ? seriesData : priceList,
animation: false,
color: lineColor,
lineWidth: 1.8,
lineWidth: 1.5,
marker: {
enabled: false,
},
@ -757,7 +757,7 @@
>Bid</td
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right"
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{$wsBidPrice !== 0 && $wsBidPrice !== null
? $wsBidPrice
: ((data?.getStockQuote?.bid !== 0
@ -791,7 +791,7 @@
>Revenue (ttm)</td
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right"
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{@html stockDeck?.revenueTTM !== null &&
stockDeck?.revenueTTM !== 0
? abbreviateNumber(stockDeck?.revenueTTM, false, true)
@ -805,7 +805,7 @@
>Net Income (ttm)</td
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right"
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{@html stockDeck?.netIncomeTTM !== null
? abbreviateNumber(stockDeck?.netIncomeTTM, false, true)
: "n/a"}</td
@ -819,7 +819,7 @@
>EPS (ttm)</td
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right"
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{data?.getStockQuote?.eps ?? "n/a"}</td
></tr
>
@ -830,7 +830,7 @@
>PE Ratio (ttm)</td
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right"
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{data?.getStockQuote?.pe ?? "n/a"}</td
></tr
>
@ -841,7 +841,7 @@
>Forward PE</td
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right"
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{stockDeck?.forwardPE ?? "n/a"}</td
></tr
>
@ -861,7 +861,7 @@
>
</td>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right"
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{data?.getAnalystSummary?.consensusRating !== null &&
data?.getAnalystSummary?.consensusRating !== "n/a" &&
data?.getAnalystSummary?.consensusRating !== undefined
@ -880,7 +880,7 @@
>Ask</td
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right"
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{$wsAskPrice !== 0 && $wsAskPrice !== null
? $wsAskPrice
: ((data?.getStockQuote?.ask !== 0
@ -895,7 +895,7 @@
>Volume</td
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right"
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{data?.getStockQuote?.volume?.toLocaleString(
"en-us",
)}</td
@ -908,7 +908,7 @@
>Avg. Volume (20D)</td
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right"
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{data?.getStockQuote?.avgVolume !== undefined
? data?.getStockQuote?.avgVolume?.toLocaleString(
"en-us",
@ -923,7 +923,7 @@
>Open</td
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right"
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{data?.getStockQuote?.open?.toFixed(2)}</td
></tr
>
@ -934,7 +934,7 @@
>Previous Close</td
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right"
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{data?.getStockQuote?.previousClose?.toFixed(2)}</td
></tr
>
@ -945,7 +945,7 @@
>Day's Range</td
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right"
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{data?.getStockQuote?.dayLow?.toFixed(2)} - {data?.getStockQuote?.dayHigh?.toFixed(
2,
)}</td
@ -958,7 +958,7 @@
>52-Week Range</td
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right"
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{data?.getStockQuote?.yearLow?.toFixed(2)} - {data?.getStockQuote?.yearHigh?.toFixed(
2,
)}</td
@ -971,7 +971,7 @@
>Beta</td
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right"
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{stockDeck?.beta?.toFixed(2)}</td
></tr
>

2
src/routes/stocks/[tickerID]/profile/employees/+page.server.ts
View File

@ -6,7 +6,7 @@ export const load = async ({ locals, params }) => {
};
// make the POST request to the endpoint
const response = await fetch(apiURL + "/history-employees", {
const response = await fetch(apiURL + "/historical-employees", {
method: "POST",
headers: {
"Content-Type": "application/json",

41
src/routes/stocks/[tickerID]/profile/employees/+page.svelte
View File

@ -39,7 +39,7 @@
function sortByDate(liste) {
//Slice copies the list otherwise employeesHistory will reverse too
return liste?.slice()?.sort(function (a, b) {
return new Date(b?.filingDate) - new Date(a?.filingDate);
return new Date(b?.date) - new Date(a?.date);
});
}
@ -49,12 +49,12 @@
// Create a sorted copy of the employee history from oldest to newest
const sortedHistory = [...employeeHistory].sort(
(a, b) => new Date(a.filingDate) - new Date(b.filingDate),
(a, b) => new Date(a.date) - new Date(b.date),
);
if (sortBy === "Total") {
sortedHistory.forEach((record) => {
dateList.push(record.filingDate.slice(0, 4));
dateList.push(record.date.slice(0, 4));
valueList.push(record.employeeCount);
});
} else if (sortBy === "Change") {
@ -64,7 +64,7 @@
const change = next - current;
// Push the later date since the change happens between current and next
dateList.push(sortedHistory[i + 1].filingDate.slice(0, 4));
dateList.push(sortedHistory[i + 1].date.slice(0, 4));
valueList.push(change);
}
} else if (sortBy === "Growth") {
@ -78,7 +78,7 @@
} else {
valueList.push(0);
}
dateList.push(sortedHistory[i + 1].filingDate.slice(0, 4));
dateList.push(sortedHistory[i + 1].date.slice(0, 4));
}
}
@ -140,20 +140,17 @@
borderRadius: 4,
formatter: function () {
// Format the x value to display time in a custom format
let tooltipContent = `<span class="m-auto text-[1rem] font-[501]">${new Date(
let tooltipContent = `<span class="m-auto text-[1rem] font-[501]">Year ${new Date(
this?.x,
).toLocaleDateString("en-US", {
year: "numeric",
month: "short",
day: "numeric",
})}</span><br>`;
// Loop through each point in the shared tooltip
this.points.forEach((point) => {
tooltipContent += `
<span style="display:inline-block; width:10px; height:10px; background-color:${point.color}; border-radius:50%; margin-right:5px;"></span>
<span class="font-semibold text-sm">${point.series.name}:</span>
<span class="font-normal text-sm">${abbreviateNumber(point.y)}</span><br>`;
<span class="font-normal text-sm mt-1">${point?.y?.toLocaleString("en-US")}</span><br>`;
});
return tooltipContent;
@ -161,7 +158,7 @@
},
series: [
{
name: sortBy,
name: "Employees",
data: valueList,
color: $mode === "light" ? "#2C6288" : "#fff",
animation: false,
@ -169,7 +166,7 @@
],
plotOptions: {
column: {
borderRadius: 2,
borderRadius: 1,
},
},
legend: {
@ -193,7 +190,7 @@
// Add data rows
historyList.forEach((item, index) => {
const date = new Date(item.filingDate).toLocaleString("en-US", {
const date = new Date(item.date).toLocaleString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
@ -244,8 +241,8 @@
function generateEmployeeInfoHTML() {
if (employeeHistory?.length !== 0 && !dateDistance) {
const formattedEmployees = new Intl.NumberFormat("en").format(employees);
const latestFilingDate = new Date(
employeeHistory[employeeHistory.length - 1]["filingDate"],
const latestdate = new Date(
employeeHistory[employeeHistory.length - 1]["date"],
).toLocaleString("en-US", {
month: "short",
day: "numeric",
@ -263,7 +260,7 @@
return `
<span>
${$displayCompanyName} had ${formattedEmployees} employees on ${latestFilingDate}. The number of employees ${changeDirection}
${$displayCompanyName} had ${formattedEmployees} employees on ${latestdate}. The number of employees ${changeDirection}
by ${formattedChangeRate} or
<span class="${growthRateClass}">
${growthRate}%
@ -273,8 +270,8 @@
`;
} else if (employeeHistory?.length !== 0 && dateDistance) {
const abbreviatedEmployees = abbreviateNumber(employees);
const latestFilingDate = new Date(
employeeHistory[employeeHistory.length - 1]["filingDate"],
const latestdate = new Date(
employeeHistory[employeeHistory.length - 1]["date"],
).toLocaleString("en-US", {
month: "short",
day: "numeric",
@ -283,7 +280,7 @@
return `
<span>
${$displayCompanyName} had ${abbreviatedEmployees} employees on ${latestFilingDate}. Since then, the company has not submitted any additional employee data for more than a year.
${$displayCompanyName} had ${abbreviatedEmployees} employees on ${latestdate}. Since then, the company has not submitted any additional employee data for more than a year.
</span>
`;
} else {
@ -305,7 +302,7 @@
changeRate = employees - employeeHistory?.at(-2)?.employeeCount;
dateDistance =
new Date(employeeHistory[employeeHistory?.length - 1]["filingDate"]) <
new Date(employeeHistory[employeeHistory?.length - 1]["date"]) <
new Date(new Date().setFullYear(new Date().getFullYear() - 1))
? true
: false;
@ -331,7 +328,7 @@
</script>
<SEO
title={`${$displayCompanyName} (${$stockTicker}) Number of Employees ${historyList?.at(-1)?.filingDate?.slice(0, 4)} - ${historyList?.at(0)?.filingDate?.slice(0, 4)} · Stocknear`}
title={`${$displayCompanyName} (${$stockTicker}) Number of Employees ${historyList?.at(-1)?.date?.slice(0, 4)} - ${historyList?.at(0)?.date?.slice(0, 4)} · Stocknear`}
description={`Current and historical number of employees for ${$displayCompanyName} (${$stockTicker}) with related statistics, a chart and a data table.`}
/>
@ -557,7 +554,7 @@
<td
class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
>
{new Date(item?.filingDate)?.toLocaleString("en-US", {
{new Date(item?.date)?.toLocaleString("en-US", {
month: "short",
day: "numeric",
year: "numeric",