add download button to employee page
This commit is contained in:
MuslemRahimi
parent
4cef1d8a35
commit
b80737d210
@ -332,9 +332,9 @@ function findIndex(data) {
|
||||
<table class="table table-sm shaodow table-pin-cols table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]">
|
||||
<thead class="">
|
||||
<tr class="">
|
||||
<th class="bg-[#27272A] border-b border-[#000] text-white font-semibold text-sm sm:text-[1rem] text-start">Year</th>
|
||||
<th class="bg-[#27272A] border-b border-[#000] text-white font-semibold text-sm text-start">Year</th>
|
||||
{#each xData as item}
|
||||
<td class="z-20 bg-[#27272A] border-b border-[#000] text-white font-semibold text-sm sm:text-[1rem] text-center bg-[#09090B]">{"FY" + item}</td>
|
||||
<td class="z-20 bg-[#27272A] border-b border-[#000] text-white font-semibold text-sm text-end bg-[#09090B]">{"FY" + item}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@ -1,33 +1,35 @@
|
||||
<script lang="ts">
|
||||
|
||||
import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
|
||||
import {
|
||||
numberOfUnreadNotification,
|
||||
displayCompanyName,
|
||||
stockTicker,
|
||||
} from "$lib/store";
|
||||
import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
|
||||
import { Button } from "$lib/components/shadcn/button/index.js";
|
||||
import { Chart } from 'svelte-echarts'
|
||||
import { init, use } from 'echarts/core'
|
||||
import { BarChart } from 'echarts/charts'
|
||||
import { GridComponent, TooltipComponent } from 'echarts/components'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
|
||||
import { Chart } from "svelte-echarts";
|
||||
import { init, use } from "echarts/core";
|
||||
import { BarChart } from "echarts/charts";
|
||||
import { GridComponent, TooltipComponent } from "echarts/components";
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
use([BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
|
||||
|
||||
import { abbreviateNumber } from '$lib/utils';
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
|
||||
export let data;
|
||||
|
||||
let employeeHistory = data?.getHistoryEmployee ?? [];
|
||||
let historyList = sortByDate(employeeHistory);
|
||||
|
||||
let employees = 'n/a';
|
||||
let changeRate = 'n/a';
|
||||
let growthRate = 'n/a';
|
||||
let employees = "n/a";
|
||||
let changeRate = "n/a";
|
||||
let growthRate = "n/a";
|
||||
|
||||
let optionsTotal;
|
||||
let optionsChange;
|
||||
let optionsGrowth;
|
||||
let dateDistance = false;
|
||||
|
||||
let sortBy = 'Total';
|
||||
|
||||
let sortBy = "Total";
|
||||
|
||||
function sortByDate(liste) {
|
||||
//Slice copies the list otherwise employeesHistory will reverse too
|
||||
@ -36,19 +38,15 @@ function sortByDate(liste) {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function selectSortingMethod(state: string) {
|
||||
sortBy = state;
|
||||
}
|
||||
|
||||
|
||||
function plotTotal() {
|
||||
|
||||
let dateList = [];
|
||||
let employeeList = [];
|
||||
let growthList = [];
|
||||
|
||||
|
||||
for (let i = 0; i < employeeHistory?.length; i++) {
|
||||
const current = employeeHistory[i]?.employeeCount;
|
||||
//const previousDividend = i === 0 ? 0 : employeeHistory[i - 1]?.dividend;
|
||||
@ -59,62 +57,54 @@ function selectSortingMethod(state:string) {
|
||||
//const growthRate = ( (currentDividend - previousDividend) / previousDividend ) ;
|
||||
|
||||
//growthList.push(growthRate?.toFixed(2))
|
||||
|
||||
}
|
||||
|
||||
|
||||
const options = {
|
||||
animation: false,
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
top: '10%',
|
||||
bottom: '20%',
|
||||
left: "0%",
|
||||
right: "0%",
|
||||
top: "10%",
|
||||
bottom: "20%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
data: dateList,
|
||||
type: 'category',
|
||||
type: "category",
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
}
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
show: false // Hide y-axis labels
|
||||
}
|
||||
show: false, // Hide y-axis labels
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
|
||||
{
|
||||
name: 'Total Employees',
|
||||
name: "Total Employees",
|
||||
data: employeeList,
|
||||
type: 'bar',
|
||||
barWidth: '80%',
|
||||
type: "bar",
|
||||
barWidth: "80%",
|
||||
smooth: true,
|
||||
|
||||
},
|
||||
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
trigger: "axis",
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
return options;
|
||||
}
|
||||
|
||||
|
||||
function plotChange() {
|
||||
|
||||
let dateList = [];
|
||||
let changeList = [];
|
||||
|
||||
@ -122,76 +112,66 @@ function selectSortingMethod(state:string) {
|
||||
const current = employeeHistory[i]?.employeeCount;
|
||||
const previous = i === 0 ? 0 : employeeHistory[i - 1]?.employeeCount;
|
||||
|
||||
const change = (current - previous) ;
|
||||
const change = current - previous;
|
||||
dateList?.push(employeeHistory[i]?.filingDate);
|
||||
changeList?.push(change);
|
||||
|
||||
}
|
||||
|
||||
|
||||
const options = {
|
||||
animation: false,
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
top: '10%',
|
||||
bottom: '20%',
|
||||
left: "0%",
|
||||
right: "0%",
|
||||
top: "10%",
|
||||
bottom: "20%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
data: dateList,
|
||||
type: 'category',
|
||||
type: "category",
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
}
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
show: false // Hide y-axis labels
|
||||
}
|
||||
show: false, // Hide y-axis labels
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
|
||||
{
|
||||
name: 'Change of Numbers',
|
||||
name: "Change of Numbers",
|
||||
data: changeList,
|
||||
type: 'bar',
|
||||
barWidth: '80%',
|
||||
type: "bar",
|
||||
barWidth: "80%",
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
// Define colors based on positive/negative values
|
||||
color: function (params) {
|
||||
return params.data >= 0 ? '#22C55E' : '#F71F4F';
|
||||
}
|
||||
return params.data >= 0 ? "#22C55E" : "#F71F4F";
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
trigger: "axis",
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
return options;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function plotGrowth() {
|
||||
|
||||
let dateList = [];
|
||||
let growthList = [];
|
||||
|
||||
|
||||
for (let i = 0; i < employeeHistory?.length; i++) {
|
||||
const current = employeeHistory[i]?.employeeCount;
|
||||
const previous = i === 0 ? 0 : employeeHistory[i - 1]?.employeeCount;
|
||||
@ -209,114 +189,191 @@ function plotGrowth() {
|
||||
const options = {
|
||||
animation: false,
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
top: '10%',
|
||||
bottom: '20%',
|
||||
left: "0%",
|
||||
right: "0%",
|
||||
top: "10%",
|
||||
bottom: "20%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
data: dateList,
|
||||
type: 'category',
|
||||
type: "category",
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
}
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
show: false // Hide y-axis labels
|
||||
}
|
||||
show: false, // Hide y-axis labels
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Growth [%]',
|
||||
name: "Growth [%]",
|
||||
data: growthList,
|
||||
type: 'bar',
|
||||
barWidth: '80%',
|
||||
type: "bar",
|
||||
barWidth: "80%",
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
// Define colors based on positive/negative values
|
||||
color: function (params) {
|
||||
return params.data >= 0 ? '#22C55E' : '#F71F4F';
|
||||
}
|
||||
return params.data >= 0 ? "#22C55E" : "#F71F4F";
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
||||
trigger: "axis",
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
return options;
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(employeeHistory?.length !== 0)
|
||||
{
|
||||
if (employeeHistory?.length !== 0) {
|
||||
employees = employeeHistory?.at(-1)?.employeeCount;
|
||||
|
||||
changeRate = employees - employeeHistory?.at(-2)?.employeeCount;
|
||||
|
||||
dateDistance = new Date(employeeHistory[employeeHistory?.length -1]['filingDate']) < new Date(new Date().setFullYear(new Date().getFullYear() - 1)) ? true : false;
|
||||
dateDistance =
|
||||
new Date(employeeHistory[employeeHistory?.length - 1]["filingDate"]) <
|
||||
new Date(new Date().setFullYear(new Date().getFullYear() - 1))
|
||||
? true
|
||||
: false;
|
||||
|
||||
|
||||
growthRate = ((employeeHistory[employeeHistory?.length -1]?.employeeCount/ employeeHistory[employeeHistory?.length -2]?.employeeCount -1 ) *100 )?.toFixed(2);
|
||||
growthRate = (
|
||||
(employeeHistory[employeeHistory?.length - 1]?.employeeCount /
|
||||
employeeHistory[employeeHistory?.length - 2]?.employeeCount -
|
||||
1) *
|
||||
100
|
||||
)?.toFixed(2);
|
||||
optionsTotal = plotTotal();
|
||||
optionsChange = plotChange();
|
||||
optionsGrowth = plotGrowth();
|
||||
}
|
||||
|
||||
const exportData = (format = "csv") => {
|
||||
// Add headers row
|
||||
const csvRows = [];
|
||||
csvRows.push("Date,Employees,Change,Growth");
|
||||
|
||||
// Add data rows
|
||||
historyList.forEach((item, index) => {
|
||||
const date = new Date(item.filingDate).toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
|
||||
const employees = item.employeeCount;
|
||||
|
||||
// Calculate change
|
||||
const change =
|
||||
index + 1 < historyList.length
|
||||
? item.employeeCount - historyList[index + 1].employeeCount
|
||||
: 0;
|
||||
|
||||
// Calculate growth percentage
|
||||
let growth = "0.00%";
|
||||
if (index + 1 < historyList.length) {
|
||||
const growthValue =
|
||||
((item.employeeCount - historyList[index + 1].employeeCount) /
|
||||
item.employeeCount) *
|
||||
100;
|
||||
if (growthValue > 0) {
|
||||
growth = `+${growthValue.toFixed(2)}%`;
|
||||
} else if (growthValue < 0) {
|
||||
growth = `-${Math.abs(growthValue).toFixed(2)}%`;
|
||||
}
|
||||
}
|
||||
|
||||
const csvRow = `${date},${employees},${change},${growth}`;
|
||||
csvRows.push(csvRow);
|
||||
});
|
||||
|
||||
// Create CSV blob and trigger download
|
||||
const csv = csvRows.join("\n");
|
||||
const blob = new Blob([csv], { type: "text/csv" });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.setAttribute("hidden", "");
|
||||
a.setAttribute("href", url);
|
||||
a.setAttribute("download", `${$stockTicker}_employees.csv`);
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<svelte:head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$stockTicker}) Number of Employees · stocknear
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
|
||||
{$displayCompanyName} ({$stockTicker}) Number of Employees · stocknear
|
||||
</title>
|
||||
<meta name="description" content={`Detailed historical employees number for ${$displayCompanyName} (${$stockTicker}). See many years of change, growth and the impact.`} />
|
||||
<meta
|
||||
name="description"
|
||||
content={`Detailed historical employees number for ${$displayCompanyName} (${$stockTicker}). See many years of change, growth and the impact.`}
|
||||
/>
|
||||
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Number of Employees · stocknear`}/>
|
||||
<meta property="og:description" content={`Detailed historical employees number for ${$displayCompanyName} (${$stockTicker}). See many years of change, growth and the impact.`} />
|
||||
<meta
|
||||
property="og:title"
|
||||
content={`${$displayCompanyName} (${$stockTicker}) Number of Employees · stocknear`}
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content={`Detailed historical employees number for ${$displayCompanyName} (${$stockTicker}). See many years of change, growth and the impact.`}
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
|
||||
<!-- Twitter specific meta tags -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Number of Employees · stocknear`}/>
|
||||
<meta name="twitter:description" content={`Detailed historical employees number for ${$displayCompanyName} (${$stockTicker}). See many years of change, growth and the impact.`} />
|
||||
<meta
|
||||
name="twitter:title"
|
||||
content={`${$displayCompanyName} (${$stockTicker}) Number of Employees · stocknear`}
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content={`Detailed historical employees number for ${$displayCompanyName} (${$stockTicker}). See many years of change, growth and the impact.`}
|
||||
/>
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
|
||||
</svelte:head>
|
||||
|
||||
|
||||
|
||||
<section class="bg-[#09090B] w-full overflow-hidden text-white h-full mb-40 sm:mb-0">
|
||||
<section
|
||||
class="bg-[#09090B] w-full overflow-hidden text-white h-full mb-40 sm:mb-0"
|
||||
>
|
||||
<div class="w-full flex justify-center m-auto h-full overflow-hidden">
|
||||
<div class="w-full relative flex justify-center items-center overflow-hidden">
|
||||
<div
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
>
|
||||
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
|
||||
<div class="mb-6">
|
||||
<h2 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
|
||||
Employees
|
||||
</h2>
|
||||
|
||||
|
||||
<div class="text-white p-3 sm:p-5 mb-5 rounded-lg flex flex-row items-center border border-gray-800 text-sm sm:text-[1rem]">
|
||||
<svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><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>
|
||||
<div
|
||||
class="text-white p-3 sm:p-5 mb-5 rounded-lg flex flex-row items-center border border-gray-800 text-sm sm:text-[1rem]"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><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
|
||||
>
|
||||
|
||||
{#if employeeHistory?.length !== 0 && !dateDistance}
|
||||
<div>
|
||||
@ -324,42 +381,72 @@ optionsGrowth = plotGrowth();
|
||||
had
|
||||
{abbreviateNumber(employees)}
|
||||
employees on
|
||||
{new Date(employeeHistory[employeeHistory?.length -1]['filingDate'])?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}.
|
||||
The number of employees {changeRate >=0 ? 'increased' : 'decreased'} by
|
||||
{new Date(
|
||||
employeeHistory[employeeHistory?.length - 1]["filingDate"],
|
||||
)?.toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
daySuffix: "2-digit",
|
||||
})}. The number of employees {changeRate >= 0
|
||||
? "increased"
|
||||
: "decreased"} by
|
||||
{abbreviateNumber(changeRate)}
|
||||
or
|
||||
<span class="{changeRate >=0 ? 'text-[#37C97D]' : 'text-[#FF2F1F]'}">
|
||||
<span
|
||||
class={changeRate >= 0 ? "text-[#37C97D]" : "text-[#FF2F1F]"}
|
||||
>
|
||||
{growthRate}%
|
||||
</span>
|
||||
compared to the previous year.
|
||||
</div>
|
||||
{:else if employeeHistory?.length !== 0 && dateDistance}
|
||||
{$displayCompanyName} had {abbreviateNumber(employees)} employees on
|
||||
{new Date(employeeHistory[employeeHistory?.length -1]['filingDate'])?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}.
|
||||
Since then, the company has not submitted any additional employee data for more than a year.
|
||||
{new Date(
|
||||
employeeHistory[employeeHistory?.length - 1]["filingDate"],
|
||||
)?.toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
daySuffix: "2-digit",
|
||||
})}. Since then, the company has not submitted any additional
|
||||
employee data for more than a year.
|
||||
{:else}
|
||||
No employee history for {$displayCompanyName}. Probably, no records of past employees.
|
||||
No employee history for {$displayCompanyName}. Probably, no
|
||||
records of past employees.
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-4 grid grid-cols-2 grid-rows-1 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 md:grid-rows-1 md:divide-x">
|
||||
<div
|
||||
class="mb-4 grid grid-cols-2 grid-rows-1 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 md:grid-rows-1 md:divide-x"
|
||||
>
|
||||
<div class="p-4 bp:p-5 sm:p-6">
|
||||
<label for="totalAnalystInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
<label
|
||||
for="totalAnalystInfo"
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
|
||||
>
|
||||
Total Employees
|
||||
</label>
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-light text-lg"
|
||||
>
|
||||
{abbreviateNumber(employees)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-l border-b border-contrast md:border-0">
|
||||
<label for="consensusRatingInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
<div
|
||||
class="p-4 bp:p-5 sm:p-6 border-l border-b border-contrast md:border-0"
|
||||
>
|
||||
<label
|
||||
for="consensusRatingInfo"
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
|
||||
>
|
||||
Change (1Y)
|
||||
</label>
|
||||
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-light text-lg"
|
||||
>
|
||||
{#if dateDistance}
|
||||
n/a
|
||||
{:else}
|
||||
@ -367,114 +454,141 @@ optionsGrowth = plotGrowth();
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast md:border-0">
|
||||
<label for="priceTargetInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
<div
|
||||
class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast md:border-0"
|
||||
>
|
||||
<label
|
||||
for="priceTargetInfo"
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
|
||||
>
|
||||
Growth (1Y)
|
||||
</label>
|
||||
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-light text-xl"
|
||||
>
|
||||
{#if growthRate >= 0}
|
||||
<span class="text-white text-md font-medium">
|
||||
<svg class="w-5 h-5 inline-block -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#37C97D" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
||||
<span class="text-[#37C97D] text-[1rem]">+{growthRate}%</span>
|
||||
<span class="text-[#37C97D] text-lg">+{growthRate}%</span>
|
||||
</span>
|
||||
{:else if growthRate < 0}
|
||||
<div class="text-white text-md font-medium">
|
||||
<svg class="w-5 h-5 rotate-180 inline-block -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
||||
<span class="text-[#FF2F1F] text-[1rem]">{growthRate}%</span>
|
||||
<span class="text-[#FF2F1F] text-lg">{growthRate}%</span>
|
||||
</div>
|
||||
{:else}
|
||||
<span class="text-white m-auto">
|
||||
n/a
|
||||
</span>
|
||||
<span class="text-white m-auto"> n/a </span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="flex flex-row items-center w-full mt-10 mb-8">
|
||||
<h1 class="text-xl text-white font-semibold">Employees History</h1>
|
||||
|
||||
<h1 class="text-xl text-white font-semibold ">
|
||||
Employees History
|
||||
</h1>
|
||||
|
||||
|
||||
<div class="flex w-fit sm:w-[50%] md:block md:w-auto ml-auto">
|
||||
<div
|
||||
class="flex flex-row items-center w-fit sm:w-[50%] md:w-auto ml-auto"
|
||||
>
|
||||
<div class="relative inline-block text-left grow">
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild let:builder>
|
||||
<Button builders={[builder]} class="w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate">
|
||||
<Button
|
||||
builders={[builder]}
|
||||
class="w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate"
|
||||
>
|
||||
<span class="truncate text-white">{sortBy}</span>
|
||||
<svg class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
<svg
|
||||
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
style="max-width:40px"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content class="w-56 h-fit max-h-72 overflow-y-auto scroller">
|
||||
<DropdownMenu.Content
|
||||
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
|
||||
>
|
||||
<DropdownMenu.Label class="text-gray-400">
|
||||
Select Type
|
||||
</DropdownMenu.Label>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Group>
|
||||
<DropdownMenu.Item on:click={() => sortBy = 'Total'} class="cursor-pointer hover:bg-[#27272A]">
|
||||
<DropdownMenu.Item
|
||||
on:click={() => (sortBy = "Total")}
|
||||
class="cursor-pointer hover:bg-[#27272A]"
|
||||
>
|
||||
Total
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item on:click={() => sortBy = 'Change'} class="cursor-pointer hover:bg-[#27272A]">
|
||||
<DropdownMenu.Item
|
||||
on:click={() => (sortBy = "Change")}
|
||||
class="cursor-pointer hover:bg-[#27272A]"
|
||||
>
|
||||
Change
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item on:click={() => sortBy = 'Growth'} class="cursor-pointer hover:bg-[#27272A]">
|
||||
<DropdownMenu.Item
|
||||
on:click={() => (sortBy = "Growth")}
|
||||
class="cursor-pointer hover:bg-[#27272A]"
|
||||
>
|
||||
Growth
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Group>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
|
||||
|
||||
</div>
|
||||
<Button
|
||||
on:click={() => exportData("csv")}
|
||||
class="ml-2 w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate"
|
||||
>
|
||||
<span class="truncate text-white">Download</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
{#if historyList?.length !== 0}
|
||||
|
||||
|
||||
{#if sortBy === 'Total'}
|
||||
{#if sortBy === "Total"}
|
||||
<div class="app w-full">
|
||||
<Chart {init} options={optionsTotal} class="chart" />
|
||||
</div>
|
||||
{:else if sortBy === 'Change'}
|
||||
{:else if sortBy === "Change"}
|
||||
<div class="app w-full">
|
||||
<Chart {init} options={optionsChange} class="chart" />
|
||||
</div>
|
||||
{:else if sortBy === 'Growth'}
|
||||
{:else if sortBy === "Growth"}
|
||||
<div class="app w-full">
|
||||
<Chart {init} options={optionsGrowth} class="chart" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<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 ">
|
||||
<table
|
||||
class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-start border-b border-[#09090B] bg-[#09090B] text-white text-[1rem] whitespace-nowrap font-semibiold">
|
||||
<th
|
||||
class="text-start border-b border-[#09090B] bg-[#09090B] text-white text-[1rem] whitespace-nowrap font-semibiold"
|
||||
>
|
||||
Date
|
||||
</th>
|
||||
<th class="text-end border-b border-[#09090B] bg-[#09090B] text-white text-[1rem] whitespace-nowrap font-semibiold">
|
||||
<th
|
||||
class="text-end border-b border-[#09090B] bg-[#09090B] text-white text-[1rem] whitespace-nowrap font-semibiold"
|
||||
>
|
||||
Employees
|
||||
</th>
|
||||
<th class="text-end border-b border-[#09090B] bg-[#09090B] text-white text-[1rem] whitespace-nowrap font-semibiold">
|
||||
<th
|
||||
class="text-end border-b border-[#09090B] bg-[#09090B] text-white text-[1rem] whitespace-nowrap font-semibiold"
|
||||
>
|
||||
Change
|
||||
</th>
|
||||
<th class="text-end border-b border-[#09090B] bg-[#09090B] text-white text-[1rem] whitespace-nowrap font-semibiold">
|
||||
<th
|
||||
class="text-end border-b border-[#09090B] bg-[#09090B] text-white text-[1rem] whitespace-nowrap font-semibiold"
|
||||
>
|
||||
Growth
|
||||
</th>
|
||||
</tr>
|
||||
@ -482,60 +596,73 @@ optionsGrowth = plotGrowth();
|
||||
<tbody class="">
|
||||
{#each historyList as item, index}
|
||||
<tr class="text-gray-200 odd:bg-[#27272A]">
|
||||
<td class="text-start border-b border-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap text-white">
|
||||
{new Date(item?.filingDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||
<td
|
||||
class="text-start border-b border-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{new Date(item?.filingDate)?.toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
daySuffix: "2-digit",
|
||||
})}
|
||||
</td>
|
||||
<td class="text-end border-b border-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap text-white">
|
||||
<td
|
||||
class="text-end border-b border-[#09090B] 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">
|
||||
{abbreviateNumber(item?.employeeCount-historyList[index+1]?.employeeCount)}
|
||||
<td
|
||||
class="text-end border-b border-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{abbreviateNumber(
|
||||
item?.employeeCount -
|
||||
historyList[index + 1]?.employeeCount,
|
||||
)}
|
||||
</td>
|
||||
<td class="text-end border-b border-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap text-white text-end">
|
||||
<td
|
||||
class="text-end border-b border-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap text-white text-end"
|
||||
>
|
||||
{#if index + 1 - historyList?.length === 0}
|
||||
0.00%
|
||||
{:else}
|
||||
{#if (item?.employeeCount- historyList[index+1]?.employeeCount) > 0}
|
||||
{:else if item?.employeeCount - historyList[index + 1]?.employeeCount > 0}
|
||||
<span class="text-[#37C97D]">
|
||||
+{(((item?.employeeCount-historyList[index+1]?.employeeCount) / item?.employeeCount) * 100 )?.toFixed(2)}%
|
||||
+{(
|
||||
((item?.employeeCount -
|
||||
historyList[index + 1]?.employeeCount) /
|
||||
item?.employeeCount) *
|
||||
100
|
||||
)?.toFixed(2)}%
|
||||
</span>
|
||||
{:else if (item?.employeeCount - historyList[index+1]?.employeeCount ) < 0}
|
||||
{:else if item?.employeeCount - historyList[index + 1]?.employeeCount < 0}
|
||||
<span class="text-[#FF2F1F]">
|
||||
-{(((historyList[index+1]?.employeeCount - item?.employeeCount) / item?.employeeCount) * 100 )?.toFixed(2)}%
|
||||
-{(
|
||||
((historyList[index + 1]?.employeeCount -
|
||||
item?.employeeCount) /
|
||||
item?.employeeCount) *
|
||||
100
|
||||
)?.toFixed(2)}%
|
||||
</span>
|
||||
{:else}
|
||||
0.00%
|
||||
{/if}
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
{:else}
|
||||
<h1 class="text-xl m-auto flex justify-center text-gray-200 font-medium mb-4 mt-10">
|
||||
<h1
|
||||
class="text-xl m-auto flex justify-center text-gray-200 font-medium mb-4 mt-10"
|
||||
>
|
||||
No history found
|
||||
</h1>
|
||||
{/if}
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.app {
|
||||
height: 400px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user