Skip to content

B
BookingMyHrManagement
Commit c624d2bc by Ooh-Ao
Options

dash

parent 6d4200d2
Showing with 208 additions and 746 deletions
Web-Manage/src/app/DPU/common/home-common/home-common.component.html
<app-page-header <app-page-header [title]="'Dashboards'" [activeTitle]="'Dashboards'" [title1]="'Dashboards'"></app-page-header>
[title]="'Dashboards'"
[activeTitle]="'Dashboards'"
[title1]="'Dashboards'"
></app-page-header>
<div class="grid grid-cols-12 gap-x-6"> <div class="grid grid-cols-12 gap-x-6">
<div class="xl:col-span-12 col-span-12"> <div class="xl:col-span-12 col-span-12">
...@@ -10,106 +6,62 @@ ...@@ -10,106 +6,62 @@
<div class="box-header justify-between"> <div class="box-header justify-between">
<div class="box-title"> <div class="box-title">
กรุณาเลือก กรุณาเลือก
<span <span class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle"></span>
class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle"
></span>
</div> </div>
<div class="flex gap-4 flex-wrap"> <div class="flex gap-4 flex-wrap">
<!-- Start Date --> <!-- Start Date -->
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<label for="startDate" class="whitespace-nowrap">Start Date:</label> <label for="startDate" class="whitespace-nowrap">Start Date:</label>
<input <input type="date" [(ngModel)]="startDate" id="startDate" name="startDate"
type="date" [(ngModel)]="startDate" class="border rounded px-2 py-1" />
id="startDate"
name="startDate"
class="border rounded px-2 py-1"
/>
</div> </div>
<!-- End Date --> <!-- End Date -->
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<label for="endDate" class="whitespace-nowrap">End Date:</label> <label for="endDate" class="whitespace-nowrap">End Date:</label>
<input <input type="date" [(ngModel)]="endDate" id="endDate" name="endDate" class="border rounded px-2 py-1" />
type="date"[(ngModel)]="endDate"
id="endDate"
name="endDate"
class="border rounded px-2 py-1"
/>
</div> </div>
<!-- Dropdown Checkbox --> <!-- Dropdown Checkbox -->
<div <div class="relative inline-block" (clickOutside)="isDropdownOpen = false">
class="relative inline-block"
(clickOutside)="isDropdownOpen = false"
>
<!-- Dropdown button --> <!-- Dropdown button -->
<button <button (click)="toggleDropdown()" class="border rounded px-4 py-2 bg-white shadow w-48 text-left">
(click)="toggleDropdown()"
class="border rounded px-4 py-2 bg-white shadow w-48 text-left"
>
{{ getSelectedLabel() }} {{ getSelectedLabel() }}
</button> </button>
<!-- Dropdown content --> <!-- Dropdown content -->
<div <div *ngIf="isDropdownOpen" class="absolute z-10 mt-1 w-48 bg-white border rounded shadow">
*ngIf="isDropdownOpen" <label *ngFor="let project of projectList" class="flex items-center px-4 py-2 hover:bg-gray-100">
class="absolute z-10 mt-1 w-48 bg-white border rounded shadow" <input type="checkbox" [value]="project" [(ngModel)]="projectSelection[project.project_name]"
> class="mr-2" />
<label
*ngFor="let project of projectList"
class="flex items-center px-4 py-2 hover:bg-gray-100"
>
<input
type="checkbox"
[value]="project"
[(ngModel)]="projectSelection[project.project_name]"
class="mr-2"
/>
{{ project.project_name }} {{ project.project_name }}
</label> </label>
</div> </div>
</div> </div>
<!-- Dropdown Checkbox --> <!-- Dropdown Checkbox -->
<div <div class="relative inline-block" (clickOutside)="isDropdownOpen1 = false">
class="relative inline-block"
(clickOutside)="isDropdownOpen1 = false"
>
<!-- Dropdown button --> <!-- Dropdown button -->
<button <button (click)="toggleDropdown1()" class="border rounded px-4 py-2 bg-white shadow w-48 text-left">
(click)="toggleDropdown1()"
class="border rounded px-4 py-2 bg-white shadow w-48 text-left"
>
{{ getSelected() }} {{ getSelected() }}
</button> </button>
<!-- Dropdown content --> <!-- Dropdown content -->
<div <div *ngIf="isDropdownOpen1" class="absolute z-10 mt-1 w-48 bg-white border rounded shadow">
*ngIf="isDropdownOpen1" <label *ngFor="let item of equipmentList" class="flex items-center px-4 py-2 hover:bg-gray-100">
class="absolute z-10 mt-1 w-48 bg-white border rounded shadow" <input type="checkbox" [value]="item" [(ngModel)]=" itemSelection [item.equipmentName]" class="mr-2" />
>
<label
*ngFor="let item of equipmentList"
class="flex items-center px-4 py-2 hover:bg-gray-100"
>
<input
type="checkbox"
[value]="item"
[(ngModel)]=" itemSelection [item.equipmentName]"
class="mr-2"
/>
{{ item.equipmentName }} {{ item.equipmentName }}
</label> </label>
</div> </div>
</div> </div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-primary-full me-2" (click)="getDashbord()" <a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-primary-full me-2"
data-hs-overlay="#modal-detail"><i class="font-semibold align-middle"></i>Apply (click)="getDashbord()" data-hs-overlay="#modal-detail"><i class="font-semibold align-middle"></i>Apply
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="xxxl:col-span-6 col-span-12"> <div class="xxxl:col-span-6 col-span-12">
...@@ -120,18 +72,11 @@ ...@@ -120,18 +72,11 @@
<div class="flex items-start"> <div class="flex items-start">
<div class="me-4 gap-0"> <div class="me-4 gap-0">
<span class="avatar avatar-md p-2 bg-primary"> <span class="avatar avatar-md p-2 bg-primary">
<svg <svg class="svg-white" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
class="svg-white" width="24px" fill="#000000">
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="#000000"
>
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
<path <path
d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z" d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z" />
/>
</svg> </svg>
</span> </span>
</div> </div>
...@@ -142,9 +87,7 @@ ...@@ -142,9 +87,7 @@
</h5> </h5>
<div class="text-danger font-semibold"></div> <div class="text-danger font-semibold"></div>
</div> </div>
<p <p class="mb-0 text-[0.625rem] opacity-[0.7] text-[#8c9097] dark:text-white/50 font-semibold">
class="mb-0 text-[0.625rem] opacity-[0.7] text-[#8c9097] dark:text-white/50 font-semibold"
>
จำนวนพนักงานทั้งหมด จำนวนพนักงานทั้งหมด
</p> </p>
</div> </div>
...@@ -158,20 +101,12 @@ ...@@ -158,20 +101,12 @@
<div class="flex items-start"> <div class="flex items-start">
<div class="me-4"> <div class="me-4">
<span class="avatar avatar-md p-2 bg-secondary"> <span class="avatar avatar-md p-2 bg-secondary">
<svg <svg class="svg-white" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
class="svg-white" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
xmlns="http://www.w3.org/2000/svg"
enable-background="new 0 0 24 24"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="#000000"
>
<rect fill="none" height="24" width="24" /> <rect fill="none" height="24" width="24" />
<g> <g>
<path <path
d="M4,13c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C2,12.1,2.9,13,4,13z M5.13,14.1C4.76,14.04,4.39,14,4,14 c-0.99,0-1.93,0.21-2.78,0.58C0.48,14.9,0,15.62,0,16.43V18l4.5,0v-1.61C4.5,15.56,4.73,14.78,5.13,14.1z M20,13c1.1,0,2-0.9,2-2 c0-1.1-0.9-2-2-2s-2,0.9-2,2C18,12.1,18.9,13,20,13z M24,16.43c0-0.81-0.48-1.53-1.22-1.85C21.93,14.21,20.99,14,20,14 c-0.39,0-0.76,0.04-1.13,0.1c0.4,0.68,0.63,1.46,0.63,2.29V18l4.5,0V16.43z M16.24,13.65c-1.17-0.52-2.61-0.9-4.24-0.9 c-1.63,0-3.07,0.39-4.24,0.9C6.68,14.13,6,15.21,6,16.39V18h12v-1.61C18,15.21,17.32,14.13,16.24,13.65z M8.07,16 c0.09-0.23,0.13-0.39,0.91-0.69c0.97-0.38,1.99-0.56,3.02-0.56s2.05,0.18,3.02,0.56c0.77,0.3,0.81,0.46,0.91,0.69H8.07z M12,8 c0.55,0,1,0.45,1,1s-0.45,1-1,1s-1-0.45-1-1S11.45,8,12,8 M12,6c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3 C15,7.34,13.66,6,12,6L12,6z" d="M4,13c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C2,12.1,2.9,13,4,13z M5.13,14.1C4.76,14.04,4.39,14,4,14 c-0.99,0-1.93,0.21-2.78,0.58C0.48,14.9,0,15.62,0,16.43V18l4.5,0v-1.61C4.5,15.56,4.73,14.78,5.13,14.1z M20,13c1.1,0,2-0.9,2-2 c0-1.1-0.9-2-2-2s-2,0.9-2,2C18,12.1,18.9,13,20,13z M24,16.43c0-0.81-0.48-1.53-1.22-1.85C21.93,14.21,20.99,14,20,14 c-0.39,0-0.76,0.04-1.13,0.1c0.4,0.68,0.63,1.46,0.63,2.29V18l4.5,0V16.43z M16.24,13.65c-1.17-0.52-2.61-0.9-4.24-0.9 c-1.63,0-3.07,0.39-4.24,0.9C6.68,14.13,6,15.21,6,16.39V18h12v-1.61C18,15.21,17.32,14.13,16.24,13.65z M8.07,16 c0.09-0.23,0.13-0.39,0.91-0.69c0.97-0.38,1.99-0.56,3.02-0.56s2.05,0.18,3.02,0.56c0.77,0.3,0.81,0.46,0.91,0.69H8.07z M12,8 c0.55,0,1,0.45,1,1s-0.45,1-1,1s-1-0.45-1-1S11.45,8,12,8 M12,6c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3 C15,7.34,13.66,6,12,6L12,6z" />
/>
</g> </g>
</svg> </svg>
</span> </span>
...@@ -183,9 +118,7 @@ ...@@ -183,9 +118,7 @@
</h5> </h5>
<div class="text-success font-semibold"></div> <div class="text-success font-semibold"></div>
</div> </div>
<p <p class="mb-0 text-[0.625rem] opacity-[0.7] text-[#8c9097] dark:text-white/50 font-semibold">
class="mb-0 text-[0.625rem] opacity-[0.7] text-[#8c9097] dark:text-white/50 font-semibold"
>
จำนวนโปรเจคทั้งหมด จำนวนโปรเจคทั้งหมด
</p> </p>
</div> </div>
...@@ -193,24 +126,17 @@ ...@@ -193,24 +126,17 @@
</div> </div>
</div> </div>
</div> </div>
<div class="xxl:col-span-4 md:col-span-6 col-span-12"> <div class="xxl:col-span-4 md:col-span-12 col-span-12">
<div class="box"> <div class="box">
<div class="box-body !pb-[0.9rem]"> <div class="box-body !pb-[0.9rem]">
<div class="flex items-start"> <div class="flex items-start">
<div class="me-3"> <div class="me-3">
<span class="avatar avatar-md p-2 bg-warning"> <span class="avatar avatar-md p-2 bg-warning">
<svg <svg class="svg-white" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
class="svg-white" width="24px" fill="#000000">
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="#000000"
>
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
<path <path
d="M9.5,7h7C16.776123,7,17,6.776123,17,6.5S16.776123,6,16.5,6h-7C9.223877,6,9,6.223877,9,6.5S9.223877,7,9.5,7z M7.5,11h9c0.276123,0,0.5-0.223877,0.5-0.5S16.776123,10,16.5,10h-9C7.223877,10,7,10.223877,7,10.5S7.223877,11,7.5,11z M20.5,2H3.4993896C3.2234497,2.0001831,2.9998169,2.223999,3,2.5v19c-0.000061,0.1124268,0.0378418,0.2216187,0.1074829,0.3098755c0.1710205,0.2167358,0.4853516,0.2537231,0.7020874,0.0827026l2.8652344-2.2617188l2.3583984,1.7695312c0.1777954,0.1328125,0.421814,0.1328125,0.5996094,0L12,19.625l2.3671875,1.7753906c0.1777954,0.1328125,0.421814,0.1328125,0.5996094,0l2.3583984-1.7695312l2.8652344,2.2617188C20.2785034,21.9623413,20.3876343,22.0002441,20.5,22h0.0006104C20.7766113,21.9998169,21.0001831,21.7759399,21,21.5V2.4993896C20.9998169,2.2234497,20.776001,1.9998169,20.5,2z M20,20.46875l-2.3574219-1.8613281c-0.0882568-0.069519-0.1972656-0.1072998-0.3095703-0.1074219c-0.1080933-0.000061-0.2132568,0.0349121-0.2998047,0.0996094L14.6669922,20.375l-2.3671875-1.7753906c-0.1777954-0.1328125-0.421814-0.1328125-0.5996094,0L9.3330078,20.375l-2.3662109-1.7753906c-0.1817017-0.1348877-0.4311523-0.1317139-0.609375,0.0078125L4,20.46875V3h16V20.46875z M7.5,15h9c0.276123,0,0.5-0.223877,0.5-0.5S16.776123,14,16.5,14h-9C7.223877,14,7,14.223877,7,14.5S7.223877,15,7.5,15z" d="M9.5,7h7C16.776123,7,17,6.776123,17,6.5S16.776123,6,16.5,6h-7C9.223877,6,9,6.223877,9,6.5S9.223877,7,9.5,7z M7.5,11h9c0.276123,0,0.5-0.223877,0.5-0.5S16.776123,10,16.5,10h-9C7.223877,10,7,10.223877,7,10.5S7.223877,11,7.5,11z M20.5,2H3.4993896C3.2234497,2.0001831,2.9998169,2.223999,3,2.5v19c-0.000061,0.1124268,0.0378418,0.2216187,0.1074829,0.3098755c0.1710205,0.2167358,0.4853516,0.2537231,0.7020874,0.0827026l2.8652344-2.2617188l2.3583984,1.7695312c0.1777954,0.1328125,0.421814,0.1328125,0.5996094,0L12,19.625l2.3671875,1.7753906c0.1777954,0.1328125,0.421814,0.1328125,0.5996094,0l2.3583984-1.7695312l2.8652344,2.2617188C20.2785034,21.9623413,20.3876343,22.0002441,20.5,22h0.0006104C20.7766113,21.9998169,21.0001831,21.7759399,21,21.5V2.4993896C20.9998169,2.2234497,20.776001,1.9998169,20.5,2z M20,20.46875l-2.3574219-1.8613281c-0.0882568-0.069519-0.1972656-0.1072998-0.3095703-0.1074219c-0.1080933-0.000061-0.2132568,0.0349121-0.2998047,0.0996094L14.6669922,20.375l-2.3671875-1.7753906c-0.1777954-0.1328125-0.421814-0.1328125-0.5996094,0L9.3330078,20.375l-2.3662109-1.7753906c-0.1817017-0.1348877-0.4311523-0.1317139-0.609375,0.0078125L4,20.46875V3h16V20.46875z M7.5,15h9c0.276123,0,0.5-0.223877,0.5-0.5S16.776123,14,16.5,14h-9C7.223877,14,7,14.223877,7,14.5S7.223877,15,7.5,15z" />
/>
</svg> </svg>
</span> </span>
</div> </div>
...@@ -221,9 +147,7 @@ ...@@ -221,9 +147,7 @@
</h5> </h5>
<div class="text-success font-semibold"></div> <div class="text-success font-semibold"></div>
</div> </div>
<p <p class="mb-0 text-[0.625rem] opacity-[0.7] text-[#8c9097] dark:text-white/50 font-semibold">
class="mb-0 text-[0.625rem] opacity-[0.7] text-[#8c9097] dark:text-white/50 font-semibold"
>
จำนวนรายการอุปการ์ทั้งหมด จำนวนรายการอุปการ์ทั้งหมด
</p> </p>
</div> </div>
...@@ -238,19 +162,10 @@ ...@@ -238,19 +162,10 @@
</div> </div>
<div class="box-body"> <div class="box-body">
<div id="line-chart-datalabels" class="chart-container"> <div id="line-chart-datalabels" class="chart-container">
<apx-chart <apx-chart [series]="chartOptions9.series" [chart]="chartOptions9.chart" [xaxis]="chartOptions9.xaxis"
[series]="chartOptions9.series" [stroke]="chartOptions9.stroke" [colors]="chartOptions9.colors" [dataLabels]="chartOptions9.dataLabels"
[chart]="chartOptions9.chart" [legend]="chartOptions9.legend" [markers]="chartOptions9.markers" [grid]="chartOptions9.grid"
[xaxis]="chartOptions9.xaxis" [yaxis]="chartOptions9.yaxis" [title]="chartOptions9.title"></apx-chart>
[stroke]="chartOptions9.stroke"
[colors]="chartOptions9.colors"
[dataLabels]="chartOptions9.dataLabels"
[legend]="chartOptions9.legend"
[markers]="chartOptions9.markers"
[grid]="chartOptions9.grid"
[yaxis]="chartOptions9.yaxis"
[title]="chartOptions9.title"
></apx-chart>
</div> </div>
</div> </div>
</div> </div>
...@@ -271,33 +186,19 @@ ...@@ -271,33 +186,19 @@
</div> </div>
<div class="box-body !p-0"> <div class="box-body !p-0">
<div class="p-3"> <div class="p-3">
<apx-chart <apx-chart [series]="optionsCircle1.series" [chart]="optionsCircle1.chart" [xaxis]="optionsCircle1.xaxis"
[series]="optionsCircle1.series" [colors]="optionsCircle1.colors" [labels]="optionsCircle1.labels" [legend]="optionsCircle1.legend"
[chart]="optionsCircle1.chart" [stroke]="optionsCircle1.stroke" [tooltip]="optionsCircle1.tooltip"
[xaxis]="optionsCircle1.xaxis" [plotOptions]="optionsCircle1.plotOptions" [dataLabels]="optionsCircle1.dataLabels"></apx-chart>
[colors]="optionsCircle1.colors"
[labels]="optionsCircle1.labels"
[legend]="optionsCircle1.legend"
[stroke]="optionsCircle1.stroke"
[tooltip]="optionsCircle1.tooltip"
[plotOptions]="optionsCircle1.plotOptions"
[dataLabels]="optionsCircle1.dataLabels"
></apx-chart>
</div> </div>
<div <div class="grid grid-cols-2 border-t border-dashed dark:border-defaultborder/10">
class="grid grid-cols-2 border-t border-dashed dark:border-defaultborder/10" <div class="col p-4 border-e border-dashed dark:border-defaultborder/10 text-center">
>
<div
class="col p-4 border-e border-dashed dark:border-defaultborder/10 text-center"
>
<div class="text-[#8c9097] dark:text-white/50 text-[0.75rem] mb-1"> <div class="text-[#8c9097] dark:text-white/50 text-[0.75rem] mb-1">
การยืมทั้งหมด การยืมทั้งหมด
</div> </div>
<div class="flex justify-center items-center"> <div class="flex justify-center items-center">
<span class="me-3 text-[1.625rem] font-semibold">1,234</span> <span class="me-3 text-[1.625rem] font-semibold">1,234</span>
<span class="text-success font-semibold" <span class="text-success font-semibold"><i class="ri-arrow-up-s-fill me-1"></i>0.23%</span>
><i class="ri-arrow-up-s-fill me-1"></i>0.23%</span
>
</div> </div>
</div> </div>
<div class="col p-4 text-center"> <div class="col p-4 text-center">
...@@ -306,9 +207,7 @@ ...@@ -306,9 +207,7 @@
</div> </div>
<div class="flex justify-center items-center"> <div class="flex justify-center items-center">
<span class="me-3 text-[1.625rem] font-semibold">1,754</span> <span class="me-3 text-[1.625rem] font-semibold">1,754</span>
<span class="text-danger font-semibold" <span class="text-danger font-semibold"><i class="ri-arrow-down-s-fill me-1"></i>0.11%</span>
><i class="ri-arrow-down-s-fill me-1"></i>0.11%</span
>
</div> </div>
</div> </div>
</div> </div>
...@@ -322,33 +221,18 @@ ...@@ -322,33 +221,18 @@
<div class="box-header justify-between items-center flex-wrap gap-4"> <div class="box-header justify-between items-center flex-wrap gap-4">
<div class="box-title">จำนวนอุปกรณ์คงเหลือ</div> <div class="box-title">จำนวนอุปกรณ์คงเหลือ</div>
<div class="flex gap-4 flex-wrap"> <div class="flex gap-4 flex-wrap">
<div <div class="inline-flex rounded-md shadow-sm" role="group" aria-label="Basic example">
class="inline-flex rounded-md shadow-sm" <button type="button" class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary">
role="group"
aria-label="Basic example"
>
<button
type="button"
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary"
>
1M 1M
</button> </button>
<button <button type="button" class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary">
type="button"
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary"
>
3M 3M
</button> </button>
<button <button type="button" class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary">
type="button"
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary"
>
6M 6M
</button> </button>
<button <button type="button"
type="button" class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary-full !rounded-s-none !text-white">
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary-full !rounded-s-none !text-white"
>
1Y 1Y
</button> </button>
</div> </div>
...@@ -359,20 +243,11 @@ ...@@ -359,20 +243,11 @@
<div class="box"> <div class="box">
<div class="box-body"> <div class="box-body">
<div id="audienceReport"> <div id="audienceReport">
<apx-chart <apx-chart [series]="chartStockOptions.series" [chart]="chartStockOptions.chart"
[series]="chartOptions.series" [xaxis]="chartStockOptions.xaxis" [plotOptions]="chartStockOptions.plotOptions"
[chart]="chartOptions.chart" [dataLabels]="chartStockOptions.dataLabels" [stroke]="chartStockOptions.stroke"
[yaxis]="chartOptions.yaxis" [colors]="chartStockOptions.colors" [legend]="chartStockOptions.legend"
[xaxis]="chartOptions.xaxis" [grid]="chartStockOptions.grid"></apx-chart>
[labels]="chartOptions.labels"
[stroke]="chartOptions.stroke"
[plotOptions]="chartOptions.plotOptions"
[markers]="chartOptions.markers"
[fill]="chartOptions.fill"
[tooltip]="chartOptions.tooltip"
[legend]="chartOptions.legend"
[colors]="chartOptions.colors"
></apx-chart>
</div> </div>
</div> </div>
</div> </div>
...@@ -387,33 +262,18 @@ ...@@ -387,33 +262,18 @@
<div class="box-title">จำนวนอุปกรณ์ทั้งหมด</div> <div class="box-title">จำนวนอุปกรณ์ทั้งหมด</div>
<div class="flex gap-4 flex-wrap"> <div class="flex gap-4 flex-wrap">
<div <div class="inline-flex rounded-md shadow-sm" role="group" aria-label="Basic example">
class="inline-flex rounded-md shadow-sm" <button type="button" class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary">
role="group"
aria-label="Basic example"
>
<button
type="button"
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary"
>
1M 1M
</button> </button>
<button <button type="button" class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary">
type="button"
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary"
>
3M 3M
</button> </button>
<button <button type="button" class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary">
type="button"
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary"
>
6M 6M
</button> </button>
<button <button type="button"
type="button" class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary-full !rounded-s-none !text-white">
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary-full !rounded-s-none !text-white"
>
1Y 1Y
</button> </button>
</div> </div>
...@@ -424,20 +284,11 @@ ...@@ -424,20 +284,11 @@
<div class="box"> <div class="box">
<div class="box-body"> <div class="box-body">
<div id="audienceReport"> <div id="audienceReport">
<apx-chart <apx-chart [series]="chartEquipmentOptions.series" [chart]="chartEquipmentOptions.chart"
[series]="chartOptions.series" [xaxis]="chartEquipmentOptions.xaxis" [plotOptions]="chartEquipmentOptions.plotOptions"
[chart]="chartOptions.chart" [dataLabels]="chartEquipmentOptions.dataLabels" [stroke]="chartEquipmentOptions.stroke"
[yaxis]="chartOptions.yaxis" [colors]="chartEquipmentOptions.colors" [legend]="chartEquipmentOptions.legend"
[xaxis]="chartOptions.xaxis" [grid]="chartEquipmentOptions.grid"></apx-chart>
[labels]="chartOptions.labels"
[stroke]="chartOptions.stroke"
[plotOptions]="chartOptions.plotOptions"
[markers]="chartOptions.markers"
[fill]="chartOptions.fill"
[tooltip]="chartOptions.tooltip"
[legend]="chartOptions.legend"
[colors]="chartOptions.colors"
></apx-chart>
</div> </div>
</div> </div>
</div> </div>
......
Web-Manage/src/app/DPU/common/home-common/home-common.component.ts
...@@ -21,7 +21,7 @@ import { environment } from '../../../../environments/environment'; ...@@ -21,7 +21,7 @@ import { environment } from '../../../../environments/environment';
import swal from 'sweetalert'; import swal from 'sweetalert';
import { ProjectModel } from '../../models/project.model'; import { ProjectModel } from '../../models/project.model';
import { EquipmentModel } from '../../models/equipments.model'; import { EquipmentModel } from '../../models/equipments.model';
import { DashboardModel } from '../../models/dasbord.model'; import { DashboardModel, Equipmentdistribution, Monthlytrend } from '../../models/dasbord.model';
@Component({ @Component({
selector: 'app-home-common', selector: 'app-home-common',
...@@ -85,8 +85,46 @@ export class HomeCommonComponent { ...@@ -85,8 +85,46 @@ export class HomeCommonComponent {
_searchTerm = ""; _searchTerm = "";
chartOptions: any; chartStockOptions: any = {
chartOptions1: any; series: [{
name: 'คงเหลือ',
type: 'column',
data: [] as number[]
}],
chart: {
type: 'bar',
height: 300,
toolbar: { show: false }
},
plotOptions: {
bar: { horizontal: false, columnWidth: '50%', borderRadius: 4 }
},
dataLabels: { enabled: false },
stroke: { show: true, width: 2, colors: ['transparent'] },
colors: ['#23b7e5'],
xaxis: {
categories: [] as string[],
title: { text: 'อุปกรณ์' }
},
yaxis: {
title: { text: 'จำนวนคงเหลือ' }
},
legend: { show: false },
grid: { borderColor: '#e7e7e7', strokeDashArray: 4 }
};
chartOptions1: any = {
series: [],
chart: { toolbar: { show: false }, type: 'line', height: 250 },
grid: { borderColor: '#f1f1f1', strokeDashArray: 3 },
// labels จะเซ็ตด้านนอก
dataLabels: { enabled: false },
stroke: { width: [1, 1.1, 1.1], curve: ['straight', 'smooth', 'smooth'] },
legend: { show: true, position: 'top' },
xaxis: { axisBorder: { color: '#e9e9e9' } },
plotOptions: { bar: { columnWidth: '20%', borderRadius: 2 } },
colors: ["rgba(132, 90, 223, 1)", '#23b7e5', '#00E396'],
labels: [] as string[]
};
chartOptions2: any; chartOptions2: any;
chartOptions3: any; chartOptions3: any;
chartOptions4: any; chartOptions4: any;
...@@ -106,7 +144,50 @@ export class HomeCommonComponent { ...@@ -106,7 +144,50 @@ export class HomeCommonComponent {
grid: { borderColor: '#f2f5f7' }, grid: { borderColor: '#f2f5f7' },
markers: { size: 3 } markers: { size: 3 }
}; };
optionsCircle1: any; optionsCircle1: any = {
series: [],
labels: [],
chart: { height: 250, type: 'donut' },
dataLabels: { enabled: false },
legend: { show: false },
stroke: {
show: true,
curve: 'smooth',
lineCap: 'round',
colors: ["#fff"],
width: 0,
dashArray: 0,
},
plotOptions: {
pie: {
expandOnClick: false,
donut: {
size: '80%',
background: 'transparent',
labels: {
show: true,
name: { show: true, fontSize: '20px', color: '#495057', offsetY: -4 },
value: { show: true, fontSize: '18px', offsetY: 8 },
total: {
show: true,
showAlways: true,
label: 'Total',
fontSize: '22px',
fontWeight: 600,
color: '#495057',
formatter: (w: any) => w.globals.seriesTotals.reduce((a: any, b: any) => a + b, 0)
}
}
}
}
},
colors: [
"rgba(132, 90, 223, 1)",
"rgba(35, 183, 229, 1)",
"rgba(38, 191, 148, 1)",
"rgba(245, 184, 73, 1)",
]
};
optionsCircle2: any; optionsCircle2: any;
optionsCircle3: any; optionsCircle3: any;
chartOptions10: any chartOptions10: any
...@@ -169,532 +250,42 @@ export class HomeCommonComponent { ...@@ -169,532 +250,42 @@ export class HomeCommonComponent {
type: 'datetime', type: 'datetime',
}, },
}; };
constructor(private el: ElementRef, private renderer: Renderer2, private cdr: ChangeDetectorRef, private userService: UserService, public translate: TranslateService, private tokenService: TokenService, private ProjectService: ProjectService, private EquipmentService: EquipmentService, private DashboardService: DashboardService) {
this.chartOptions2 = {
series: [
{
name: 'Projects',
type: 'column',
data: [1.8, 2.5, 2.5, 1.5, 2.5, 2.8, 3.8],
},
{
name: 'Tasks',
type: 'column',
data: [1.1, 2.2, 3.1, 4, 4.1, 4.9, 6.5],
},
{
name: 'Revenue',
type: 'line',
data: [20, 29, 37, 35, 44, 43, 50],
},
],
chart: {
toolbar: {
show: false,
},
height: 320,
type: 'line',
stacked: false,
fontFamily: 'Poppins, Arial, sans-serif',
},
grid: {
borderColor: '#f5f4f4',
strokeDashArray: 3,
},
dataLabels: {
enabled: false,
},
xaxis: {
categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
},
yaxis: [
{
show: true,
},
{
seriesName: 'Projects',
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: false,
},
labels: {
style: {
colors: '#00E396',
},
},
},
{
seriesName: 'Revenue',
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: false,
},
labels: {
show: false,
},
},
],
tooltip: {
enabled: true,
},
legend: {
show: true,
position: 'top'
},
stroke: {
width: [0, 0, 1.5],
curve: 'straight',
dashArray: [0, 0, 0],
},
plotOptions: {
bar: {
columnWidth: '35%',
borderRadius: 3,
},
},
colors: ["rgb(132, 90, 223)", "#ededed", "#23b7e5"]
};
this.chartOptions1 = {
chart: {
type: 'line',
height: 40,
width: 120,
sparkline: {
enabled: true
},
dropShadow: {
enabled: true,
top: 0,
left: 0,
blur: 3,
color: '#000',
opacity: 0.1
},
},
grid: {
show: false,
xaxis: {
lines: {
show: false
}
},
yaxis: {
lines: {
show: false
}
},
},
stroke: {
show: true,
curve: 'straight',
lineCap: 'butt',
width: 1.5,
dashArray: 0,
},
fill: {
gradient: {
enabled: false
}
},
series: [{
name: 'Value',
data: [0, 21, 54, 38, 56, 24, 65]
}],
yaxis: {
min: 0,
show: false
},
xaxis: {
show: false,
axisTicks: {
show: false,
axisBorder: {
show: false
},
},
axisBorder: {
show: false
}
},
colors: ['#23b7e5'],
}
this.optionsCircle1 = {
series: [1754, 1234, 878, 270],
labels: ["Mobile", "Tablet", "Desktop", "Others"],
chart: {
height: 250,
type: 'donut',
},
dataLabels: {
enabled: false,
},
legend: {
show: false,
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'round',
colors: ["#fff"],
width: 0,
dashArray: 0,
},
plotOptions: {
pie: {
expandOnClick: false,
donut: {
size: '80%',
background: 'transparent',
labels: {
show: true,
name: {
show: true,
fontSize: '20px',
color: '#495057',
offsetY: -4
},
value: {
show: true,
fontSize: '18px',
offsetY: 8,
formatter: function (val: string) {
return val + "%";
}
},
total: {
show: true,
showAlways: true,
label: 'Total',
fontSize: '22px',
fontWeight: 600,
color: '#495057',
}
} chartEquipmentOptions: any = {
series: [
}, {
}, name: 'จำนวนอุปกรณ์',
}, type: 'column',
colors: ["rgba(132, 90, 223, 1)", "rgba(35, 183, 229, 1)", "rgba(38, 191, 148, 1)", "rgba(245, 184, 73, 1)",], data: [] as number[]
};
this.chartOptions = {
series: [
{
name: 'จำนวนการยืม',
type: 'column',
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 45, 35],
},
{
name: 'จำนวนการยืม1',
type: 'column',
data: [10, 11, 30, 3, 55, 6, 7, 44, 33, 22, 44, 35],
},
{
name: 'จำนวนการยืม2',
type: 'column',
data: [3, 44, 30, 11, 23, 98, 92, 29, 39, 40, 11, 9],
},
],
chart: {
toolbar: {
show: false,
},
type: 'line',
height: 250,
},
grid: {
borderColor: '#f1f1f1',
strokeDashArray: 3,
},
labels: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
dataLabels: {
enabled: false,
},
stroke: {
width: [1, 1.1],
curve: ['straight', 'smooth'],
},
legend: {
show: true,
position: 'top',
},
xaxis: {
axisBorder: {
color: '#e9e9e9',
},
},
plotOptions: {
bar: {
columnWidth: '20%',
borderRadius: 2,
},
},
colors: ["rgba(132, 90, 223, 1)", '#23b7e5', '#00E396'],
};
this.chartOptions3 = {
series: [
{
name: 'Session',
data: [24, 23, 20, 25, 27, 26, 24, 23, 23, 25, 23, 23],
type: 'line',
},
{
name: 'Bounce Rate',
data: [20, 23, 26, 22, 20, 26, 28, 26, 22, 27, 25, 26],
type: 'bar',
},
],
chart: {
height: 328,
zoom: {
enabled: false
},
},
dataLabels: {
enabled: false,
},
grid: {
borderColor: '#f1f1f1',
strokeDashArray: 3
},
legend: {
show: true,
position: 'top',
},
plotOptions: {
bar: {
borderRadius: 5,
columnWidth: "40%",
dataLabels: {
position: 'top', // top, center, bottom
},
}
},
colors: ["rgb(132, 90, 223)", "#ededed"],
stroke: {
curve: ['smooth', 'stepline'],
width: [2, 0],
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
axisBorder: {
color: '#e9e9e9',
},
} }
}; ],
this.chartOptions4 = { chart: {
series: [ type: 'bar',
{ height: 350,
name: 'New Users', toolbar: { show: false }
data: [32, 15, 63, 51, 36, 62, 99, 42, 78, 76, 32, 120], },
}, plotOptions: {
{ bar: {
name: 'Sessions', horizontal: false,
data: [56, 58, 38, 50, 64, 45, 55, 32, 15, 63, 51, 136], columnWidth: '50%',
}, borderRadius: 4
{ }
name: 'Avg Session Duration', },
data: [48, 29, 50, 69, 20, 59, 52, 12, 48, 28, 17, 98], dataLabels: { enabled: false },
}, stroke: { show: true, width: 2, colors: ['transparent'] },
], colors: ['#845adf'],
chart: { xaxis: {
height: 425, categories: [] as string[],
type: 'line', title: { text: 'ชนิดอุปกรณ์' }
toolbar: { },
show: false, yaxis: {
}, title: { text: 'จำนวน (ชิ้น)' }
background: 'none', },
fill: '#fff', legend: { show: false },
grid: { borderColor: '#e7e7e7', strokeDashArray: 4 }
}, };
grid: { constructor(private el: ElementRef, private renderer: Renderer2, private cdr: ChangeDetectorRef, private userService: UserService, public translate: TranslateService, private tokenService: TokenService, private ProjectService: ProjectService, private EquipmentService: EquipmentService, private DashboardService: DashboardService) {
borderColor: '#f2f6f7',
},
colors: ['rgb(132, 90, 223)', '#23b7e5', '#f5b849'],
background: 'transparent',
dataLabels: {
enabled: false,
},
stroke: {
curve: 'straight',
width: 3,
},
legend: {
show: true,
position: 'top',
},
xaxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
show: false,
axisBorder: {
show: false,
color: 'rgba(119, 119, 142, 0.05)',
offsetX: 0,
offsetY: 0,
},
axisTicks: {
show: false,
borderType: 'solid',
color: 'rgba(119, 119, 142, 0.05)',
width: 6,
offsetX: 0,
offsetY: 0,
},
labels: {
rotate: -90,
},
},
yaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm',
},
},
};
this.optionsCircle2 = {
chart: {
height: 120,
width: 100,
type: "radialBar",
},
series: [48],
colors: ["#23b7e5"],
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: "50%",
background: "#fff"
},
dataLabels: {
name: {
offsetY: -10,
color: "#4b9bfa",
fontSize: "10px",
show: false
},
value: {
offsetY: 5,
color: "#4b9bfa",
fontSize: "12px",
show: true,
fontWeight: 800
}
}
}
},
stroke: {
lineCap: "round"
},
labels: ["Followers"]
}
this.optionsCircle3 = {
chart: {
height: 120,
width: 100,
type: "radialBar",
},
series: [65],
colors: ["#ffc107"],
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: "50%",
background: "#fff"
},
dataLabels: {
name: {
offsetY: -10,
color: "#4b9bfa",
fontSize: "10px",
show: false
},
value: {
offsetY: 5,
color: "#4b9bfa",
fontSize: "12px",
show: true,
fontWeight: 800
},
}
}
},
stroke: {
lineCap: "round"
},
labels: ["Views"]
}
this.uploadConfig() this.uploadConfig()
} }
uploadConfig() { uploadConfig() {
...@@ -830,11 +421,21 @@ export class HomeCommonComponent { ...@@ -830,11 +421,21 @@ export class HomeCommonComponent {
this.DashboardService.getDashboard(this.startDate, this.endDate).subscribe(result => { this.DashboardService.getDashboard(this.startDate, this.endDate).subscribe(result => {
this.dashboardModel = result this.dashboardModel = result
this.updateChart(this.dashboardModel) this.updateChart(this.dashboardModel)
this.updateDonut(this.dashboardModel.equipment_distribution)
this.mapStockChart(this.dashboardModel.equipment_distribution);
this.mapEquipmentChart(this.dashboardModel.equipment_distribution);
console.log(this.dashboardModel) console.log(this.dashboardModel)
}) })
} }
private updateDonut(data: Equipmentdistribution[]) {
// series = array of counts
this.optionsCircle1.series = data.map(item => item.count);
// labels = array of categories
this.optionsCircle1.labels = data.map(item => item.category);
}
private updateChart(data: DashboardModel) { private updateChart(data: DashboardModel) {
// แมป monthly_trends ไปเป็น series + categories // แมป monthly_trends ไปเป็น series + categories
const trends = data.monthly_trends; const trends = data.monthly_trends;
...@@ -848,7 +449,17 @@ export class HomeCommonComponent { ...@@ -848,7 +449,17 @@ export class HomeCommonComponent {
}; };
} }
private mapStockChart(dist: Equipmentdistribution[]) {
// data = quantity ของแต่ละอุปกรณ์
this.chartStockOptions.series[0].data = dist.map(x => x.count);
// labels = ชื่ออุปกรณ์
this.chartStockOptions.xaxis.categories = dist.map(x => x.category);
}
private mapEquipmentChart(dist: Equipmentdistribution[]) {
this.chartEquipmentOptions.series[0].data = dist.map(x => x.count);
this.chartEquipmentOptions.xaxis.categories = dist.map(x => x.category);
}
......
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