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 @@ ...@@ -31,16 +31,26 @@
<div class="mini-grid"> <div class="mini-grid">
<div class="glass-card bg-white rounded-2xl shadow transition <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"> 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"> <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> </div>
<!-- Year compare --> <!-- Year compare -->
<div class=" glass-card bg-white rounded-2xl shadow transition <div class=" glass-card bg-white rounded-2xl shadow transition
motion-safe:hover:-translate-y-1 hover:shadow-xl p-6"> motion-safe:hover:-translate-y-1 hover:shadow-xl p-6">
<h3 class="text-sm font-medium text-gray-600 mb-2"> <h3 class="text-sm font-medium text-gray-600 mb-2">
{{ 'dashboard.yearCompare' }} เปรียบเทียบผลการประเมินปัจจุบัน กับ ผลการประเมินครั้งก่อน
</h3> </h3>
<div echarts class="h-[220px] w-full" [options]="yearlyCompareOption" [autoResize]="true"></div> <div echarts class="h-[220px] w-full" [options]="yearlyCompareOption" [autoResize]="true"></div>
</div> </div>
...@@ -48,7 +58,7 @@ ...@@ -48,7 +58,7 @@
<div class="glass-card bg-white rounded-2xl shadow transition <div class="glass-card bg-white rounded-2xl shadow transition
motion-safe:hover:-translate-y-1 hover:shadow-xl p-6"> motion-safe:hover:-translate-y-1 hover:shadow-xl p-6">
<h3 class="text-sm font-medium text-gray-600 mb-2"> <h3 class="text-sm font-medium text-gray-600 mb-2">
{{ 'dashboard.levelDist' }} สัดส่วนผลการประเมินในเกณฑ์เเต่ละระดับ
</h3> </h3>
<div echarts class="h-[220px] w-full" [options]="levelDistOption" [autoResize]="true"></div> <div echarts class="h-[220px] w-full" [options]="levelDistOption" [autoResize]="true"></div>
</div> </div>
...@@ -59,7 +69,7 @@ ...@@ -59,7 +69,7 @@
<div class="glass-card bg-white rounded-2xl shadow overflow-hidden transition <div class="glass-card bg-white rounded-2xl shadow overflow-hidden transition
motion-safe:hover:-translate-y-1 hover:shadow-xl"> 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"> <h2 class="px-6 py-3 bg-slate-50 border-b font-semibold text-slate-600">
{{ 'dashboard.todoList' }} รายชื่อพนักงานที่ยังไม่ได้ประเมิน
</h2> </h2>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="min-w-full text-sm"> <table class="min-w-full text-sm">
...@@ -87,7 +97,7 @@ ...@@ -87,7 +97,7 @@
<div class="glass-card bg-white rounded-2xl shadow overflow-hidden transition <div class="glass-card bg-white rounded-2xl shadow overflow-hidden transition
motion-safe:hover:-translate-y-1 hover:shadow-xl"> 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"> <h2 class="px-6 py-3 bg-slate-50 border-b font-semibold text-slate-600">
{{ 'dashboard.topScore' }} รายชื่อพนักงานที่มีการประเมินสูงสุด (top5)
</h2> </h2>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="min-w-full text-sm"> <table class="min-w-full text-sm">
...@@ -105,13 +115,20 @@ ...@@ -105,13 +115,20 @@
<td class="px-6 py-3">{{ row.employee }}</td> <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 font-semibold text-slate-700">{{ row.score }}</td>
<td class="px-6 py-3"> <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-emerald-600': row.grade === 'S',
'bg-sky-600' : row.grade === 'A', 'bg-sky-600' : row.grade === 'A',
'bg-amber-600' : row.grade === 'B' 'bg-amber-600' : row.grade === 'B'
}"> }">
{{ row.grade }} {{ 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>
<td class="px-6 py-3">{{ row.round }}</td> <td class="px-6 py-3">{{ row.round }}</td>
<td class="px-6 py-3">{{ row.evaluator }}</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; ...@@ -124,3 +124,16 @@ table{ width:100%; font-size:.875rem;
tbody tr:nth-child(even){ background:$gray-100; } tbody tr:nth-child(even){ background:$gray-100; }
tbody tr:hover{ background:$blue-50; } 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 { ...@@ -74,9 +74,9 @@ export class DashboardEvaluationComponent implements OnInit {
topScoreList: TopScore[] = [ topScoreList: TopScore[] = [
{ employee: 'นาย ชัยยศ สุวรรณ', score: 99, grade: 'S', round: '1/2025', evaluator: 'นาย สุริชัย จินโต' }, { 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: 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: 97, grade: 'A', round: '1/2025', evaluator: 'นาง ภัทธิดา วงศ์ดาว' },
{ employee: 'น.ส. เยาวเรศ พิทักษ์', score: 96, grade: 'A', round: '1/2025', evaluator: 'นาย พลชัย อธิชาติ' } { employee: 'น.ส. เยาวเรศ โตบุญ', score: 96, grade: 'A', round: '1/2025', evaluator: 'นาย พลชัย อธิชาติ' }
]; ];
ngOnInit(): void { ngOnInit(): void {
...@@ -182,20 +182,53 @@ export class DashboardEvaluationComponent implements OnInit { ...@@ -182,20 +182,53 @@ export class DashboardEvaluationComponent implements OnInit {
}; };
/* 2. Donut: ผ่าน/ไม่ผ่าน */ /* 2. Donut: ผ่าน/ไม่ผ่าน */
this.summaryDonutOption = { // this.summaryDonutOption = {
tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' }, // tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
legend: { bottom: 0 }, // legend: { bottom: 0 },
series: [{ // series: [{
type: 'pie', // type: 'pie',
radius: ['55%', '80%'], // radius: ['55%', '80%'],
data: [ // data: [
{ value: 87, name: 'ผ่าน', itemStyle: { color: '#10b981' } }, // { value: 87, name: 'ผ่าน', itemStyle: { color: '#10b981' } },
{ value: 13, name: 'ไม่ผ่าน', itemStyle: { color: '#ef4444' } } // { value: 13, name: 'ไม่ผ่าน', itemStyle: { color: '#ef4444' } }
], // ],
label: { show: false }, // label: { show: false },
labelLine: { 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: เปรียบเทียบปี */ /* 3. Column: เปรียบเทียบปี */
this.yearlyCompareOption = { this.yearlyCompareOption = {
...@@ -218,11 +251,11 @@ export class DashboardEvaluationComponent implements OnInit { ...@@ -218,11 +251,11 @@ export class DashboardEvaluationComponent implements OnInit {
xAxis: { type: 'value' }, xAxis: { type: 'value' },
yAxis: { type: 'category', data: [''] }, yAxis: { type: 'category', data: [''] },
series: [ series: [
{ name: 'S', type: 'bar', stack: 'total', data: [50], itemStyle: { color: '#2B547E' } }, { name: 'A', 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: [40], itemStyle: { color: '#9af0f5' } },
{ name: 'B', type: 'bar', stack: 'total', data: [30], itemStyle: { color: '#34bdeb' } }, { name: 'C', 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: [10], itemStyle: { color: '#3090C7' } },
{ name: 'D', type: 'bar', stack: 'total', data: [5], itemStyle: { color: '#659EC7' } } { 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