Skip to content

M
mySkill-x
Commit 84f10539 by Mon
Options

เเก้ dashborad

parent 2af5edee
Showing with 95 additions and 31 deletions
src/app/components/dashboard/projects/dashboard-evaluation.component.html
......@@ -31,16 +31,26 @@
<div class="mini-grid">
<div class="glass-card bg-white rounded-2xl shadow transition
motion-safe:hover:-translate-y-1 hover:shadow-xl p-6 flex flex-col items-center">
<div echarts class="h-[220px] w-full" [options]="summaryDonutOption" [autoResize]="true"></div>
<!-- <div echarts class="h-[220px] w-full" [options]="summaryDonutOption" [autoResize]="true"></div>
<p class="mt-3 text-sm text-gray-500">
{{ 'dashboard.overallSummary' }}
</p>
{{ 'ผลการประเมินโดยรวม' }}
</p> -->
<h3 class="text-sm font-medium text-gray-600 mb-2">
ผลการประเมินโดยรวม
</h3>
<div class="relative w-full h-[220px]">
<div echarts class="w-full h-full" [options]="summaryDonutOption" [autoResize]="true"></div>
<div class="absolute inset-0 flex justify-center items-center pointer-events-none">
<div class="text-xl font-bold">87%</div>
</div>
</div>
</div>
<!-- Year compare -->
<div class=" glass-card bg-white rounded-2xl shadow transition
motion-safe:hover:-translate-y-1 hover:shadow-xl p-6">
<h3 class="text-sm font-medium text-gray-600 mb-2">
{{ 'dashboard.yearCompare' }}
เปรียบเทียบผลการประเมินปัจจุบัน กับ ผลการประเมินครั้งก่อน
</h3>
<div echarts class="h-[220px] w-full" [options]="yearlyCompareOption" [autoResize]="true"></div>
</div>
......@@ -48,7 +58,7 @@
<div class="glass-card bg-white rounded-2xl shadow transition
motion-safe:hover:-translate-y-1 hover:shadow-xl p-6">
<h3 class="text-sm font-medium text-gray-600 mb-2">
{{ 'dashboard.levelDist' }}
สัดส่วนผลการประเมินในเกณฑ์เเต่ละระดับ
</h3>
<div echarts class="h-[220px] w-full" [options]="levelDistOption" [autoResize]="true"></div>
</div>
......@@ -59,7 +69,7 @@
<div class="glass-card bg-white rounded-2xl shadow overflow-hidden transition
motion-safe:hover:-translate-y-1 hover:shadow-xl">
<h2 class="px-6 py-3 bg-slate-50 border-b font-semibold text-slate-600">
{{ 'dashboard.todoList' }}
รายชื่อพนักงานที่ยังไม่ได้ประเมิน
</h2>
<div class="overflow-x-auto">
<table class="min-w-full text-sm">
......@@ -87,7 +97,7 @@
<div class="glass-card bg-white rounded-2xl shadow overflow-hidden transition
motion-safe:hover:-translate-y-1 hover:shadow-xl">
<h2 class="px-6 py-3 bg-slate-50 border-b font-semibold text-slate-600">
{{ 'dashboard.topScore' }}
รายชื่อพนักงานที่มีการประเมินสูงสุด (top5)
</h2>
<div class="overflow-x-auto">
<table class="min-w-full text-sm">
......@@ -105,13 +115,20 @@
<td class="px-6 py-3">{{ row.employee }}</td>
<td class="px-6 py-3 font-semibold text-slate-700">{{ row.score }}</td>
<td class="px-6 py-3">
<span class="px-2 py-0.5 rounded text-white" [ngClass]="{
<!-- <span class="px-2 py-0.5 rounded text-white" [ngClass]="{
'bg-emerald-600': row.grade === 'S',
'bg-sky-600' : row.grade === 'A',
'bg-amber-600' : row.grade === 'B'
}">
{{ row.grade }}
</span>
</span> -->
<span [ngClass]="{
'text-emerald': row.grade === 'S',
'text-sky' : row.grade === 'A',
'text-amber' : row.grade === 'B',
'text-redorange' : row.grade === 'C',
'text-danger' : row.grade === 'D',
}">{{ row.grade }}</span>
</td>
<td class="px-6 py-3">{{ row.round }}</td>
<td class="px-6 py-3">{{ row.evaluator }}</td>
......
src/app/components/dashboard/projects/dashboard-evaluation.component.scss
......@@ -124,3 +124,16 @@ table{ width:100%; font-size:.875rem;
tbody tr:nth-child(even){ background:$gray-100; }
tbody tr:hover{ background:$blue-50; }
}
.text-emerald{
color: #00ab66;
}
.text-sky{
color: #87CEEB;
}
.text-amber{
color: #FFBF00;
}
.text-redorange{
color: #fa5422;
}
\ No newline at end of file
src/app/components/dashboard/projects/dashboard-evaluation.component.ts
......@@ -74,9 +74,9 @@ export class DashboardEvaluationComponent implements OnInit {
topScoreList: TopScore[] = [
{ employee: 'นาย ชัยยศ สุวรรณ', score: 99, grade: 'S', round: '1/2025', evaluator: 'นาย สุริชัย จินโต' },
{ employee: 'น.ส. อรอนงค์ พรรณา', score: 98, grade: 'S', round: '1/2025', evaluator: 'นาง ภัทธิดา วงศ์ดาว' },
{ employee: 'น.ส. บุญใจ บุญโต', score: 98, grade: 'S', round: '1/2025', evaluator: 'นาย สุริชัย จินโต' },
{ employee: 'นาย อาทิตย์ รุ่งเรือง', score: 97, grade: 'A', round: '1/2025', evaluator: 'นาง ภัทธิดา วงศ์ดาว' },
{ employee: 'น.ส. เยาวเรศ พิทักษ์', score: 96, grade: 'A', round: '1/2025', evaluator: 'นาย พลชัย อธิชาติ' }
{ employee: 'น.ส. ใจบุญ พิทักษ์', score: 98, grade: 'S', round: '1/2025', evaluator: 'นาย สุริชัย จินโต' },
{ employee: 'นาย อังคาร เรืองรุ่ง', score: 97, grade: 'A', round: '1/2025', evaluator: 'นาง ภัทธิดา วงศ์ดาว' },
{ employee: 'น.ส. เยาวเรศ โตบุญ', score: 96, grade: 'A', round: '1/2025', evaluator: 'นาย พลชัย อธิชาติ' }
];
ngOnInit(): void {
......@@ -182,20 +182,53 @@ export class DashboardEvaluationComponent implements OnInit {
};
/* 2. Donut: ผ่าน/ไม่ผ่าน */
this.summaryDonutOption = {
tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
legend: { bottom: 0 },
series: [{
type: 'pie',
radius: ['55%', '80%'],
data: [
{ value: 87, name: 'ผ่าน', itemStyle: { color: '#10b981' } },
{ value: 13, name: 'ไม่ผ่าน', itemStyle: { color: '#ef4444' } }
],
label: { show: false },
labelLine: { show: false }
}]
};
// this.summaryDonutOption = {
// tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
// legend: { bottom: 0 },
// series: [{
// type: 'pie',
// radius: ['55%', '80%'],
// data: [
// { value: 87, name: 'ผ่าน', itemStyle: { color: '#10b981' } },
// { value: 13, name: 'ไม่ผ่าน', itemStyle: { color: '#ef4444' } }
// ],
// label: { show: false },
// labelLine: { show: false }
// }]
// };
this.summaryDonutOption = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)'
},
legend: {
bottom: 0
},
series: [
{
type: 'pie',
radius: ['55%', '80%'],
data: [
{
value: 87,
name: 'ผ่าน',
itemStyle: { color: '#34bdeb' }
},
{
value: 13,
name: 'ไม่ผ่าน',
itemStyle: { color: '#9af0f5' }
}
],
label: {
show: false
},
labelLine: {
show: false
}
}
]
};
/* 3. Column: เปรียบเทียบปี */
this.yearlyCompareOption = {
......@@ -218,11 +251,11 @@ export class DashboardEvaluationComponent implements OnInit {
xAxis: { type: 'value' },
yAxis: { type: 'category', data: [''] },
series: [
{ name: 'S', type: 'bar', stack: 'total', data: [50], itemStyle: { color: '#2B547E' } },
{ name: 'A', type: 'bar', stack: 'total', data: [40], itemStyle: { color: '#9af0f5' } },
{ name: 'B', type: 'bar', stack: 'total', data: [30], itemStyle: { color: '#34bdeb' } },
{ name: 'C', type: 'bar', stack: 'total', data: [10], itemStyle: { color: '#3090C7' } },
{ name: 'D', type: 'bar', stack: 'total', data: [5], itemStyle: { color: '#659EC7' } }
{ name: 'A', type: 'bar', stack: 'total', data: [50], itemStyle: { color: '#2B547E' } },
{ name: 'B', type: 'bar', stack: 'total', data: [40], itemStyle: { color: '#9af0f5' } },
{ name: 'C', type: 'bar', stack: 'total', data: [30], itemStyle: { color: '#34bdeb' } },
{ name: 'D', type: 'bar', stack: 'total', data: [10], itemStyle: { color: '#3090C7' } },
{ name: 'E', type: 'bar', stack: 'total', data: [5], itemStyle: { color: '#659EC7' } }
]
};
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment