Skip to content

M
myjob-manage
Commit a8ca2cf9 by DESKTOP-E3GSHH7\myhr
Options

สร้าง module ใหม่

parent 1268fcf3
Showing with 1054 additions and 0 deletions
src/app/DPU/myportal/home-common/home-common.component.html 0 → 100644
<app-page-header [title]="'Analytics'" [activeTitle]="'Dashboards'" [title1]="'Analytics'"></app-page-header>
<div class="grid grid-cols-12 gap-x-6">
<div class="xl:col-span-7 col-span-12">
<div class="grid grid-cols-12 gap-x-6">
<div class="xl:col-span-4 lg:col-span-4 md:col-span-4 sm:col-span-6 col-span-12">
<div class="box">
<div class="box-body">
<div class="flex flex-wrap items-center justify-between">
<div>
<h6 class="font-semibold mb-3 text-[1rem]">Total Users</h6>
<span class="text-[1.5625rem] font-semibold">9,789</span>
<span class="block text-success text-[0.75rem]">+0.892 <i class="ti ti-trending-up ms-1"></i></span>
</div>
<div id="analytics-users">
<apx-chart [series]="chartOptions1.series" [chart]="chartOptions1.chart"
[xaxis]="chartOptions1.xaxis" [dataLabels]="chartOptions1.dataLabels"
[colors]="chartOptions1.colors" [fill]="chartOptions1.fill"
[markers]="chartOptions1.markers" [stroke]="chartOptions1.stroke"></apx-chart>
</div>
</div>
</div>
</div>
</div>
<div class="xl:col-span-4 lg:col-span-4 md:col-span-4 sm:col-span-6 col-span-12">
<div class="box">
<div class="box-body">
<div class="flex items-center justify-between">
<div>
<h6 class="font-semibold mb-3 text-[1rem]">Live Visitors</h6>
<span class="text-[1.5625rem] font-semibold">12,240</span>
<span class="block text-danger text-[0.75rem]">+0.59<i class="ti ti-trending-down ms-1 inline-flex"></i></span>
</div>
<div>
<span class="avatar avatar-md bg-secondary text-white">
<i class="ri-user-3-line"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="xl:col-span-4 lg:col-span-4 md:col-span-4 sm:col-span-6 col-span-12">
<div class="box overflow-hidden">
<div class="box-body mb-3">
<div class="flex items-center justify-between">
<div>
<h6 class="font-semibold text-primary mb-4 text-[1rem]">Bounce Rate</h6>
<span class="text-[1.5625rem] flex items-center">77.3% <span class=" text-[0.75rem] text-warning opacity-[0.7] ms-2">+0.59<i class="ti ti-arrow-big-up-line ms-1 inline-flex"></i></span></span>
</div>
</div>
</div>
<div id="analytics-bouncerate" class="mt-1 w-full">
<apx-chart [series]="chartOptions2.series" [chart]="chartOptions2.chart"
[xaxis]="chartOptions2.xaxis" [dataLabels]="chartOptions2.dataLabels"
[colors]="chartOptions2.colors" [fill]="chartOptions2.fill"
[markers]="chartOptions2.markers" [stroke]="chartOptions2.stroke"></apx-chart>
</div>
</div>
</div>
<div class="xl:col-span-12 col-span-12">
<div class="box">
<div class="box-header justify-between">
<div class="box-title">
Audience Report
</div>
<div>
<button type="button" class="ti-btn ti-btn-primary ti-btn-wave !font-medium"><i class="ri-share-forward-line me-1 align-middle inline-block"></i>Export</button>
</div>
</div>
<div class="box-body">
<div id="audienceReport">
<apx-chart [series]="chartOptions.series" [chart]="chartOptions.chart"
[yaxis]="chartOptions.yaxis" [xaxis]="chartOptions.xaxis"
[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 class="xxl:col-span-6 xl:col-span-12 col-span-12">
<div class="box">
<div class="box-header justify-between">
<div class="box-title">
Top Countries Sessions vs Bounce Rate
</div>
<div class="hs-dropdown ti-dropdown">
<a href="javascript:void(0);" class="px-2 font-normal text-[0.75rem] text-[#8c9097] dark:text-white/50"
aria-expanded="false">
View All<i class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
</a>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden" role="menu">
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
href="javascript:void(0);">Today</a></li>
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
href="javascript:void(0);">This Week</a></li>
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
href="javascript:void(0);">Last Week</a></li>
</ul>
</div>
</div>
<div class="box-body">
<div id="country-sessions">
<apx-chart [series]="chartOptions3.series" [chart]="chartOptions3.chart"
[yaxis]="chartOptions3.yaxis" [xaxis]="chartOptions3.xaxis"
[labels]="chartOptions3.labels" [stroke]="chartOptions3.stroke"
[plotOptions]="chartOptions3.plotOptions" [markers]="chartOptions3.markers"
[fill]="chartOptions3.fill" [tooltip]="chartOptions3.tooltip" [legend]="chartOptions3.legend" [colors]="chartOptions3.colors"></apx-chart>
</div>
</div>
</div>
</div>
<div class="xxl:col-span-6 xl:col-span-12 col-span-12">
<div class="box overflow-hidden">
<div class="box-header justify-between">
<div class="box-title">
Traffic Sources
</div>
<div class="hs-dropdown ti-dropdown">
<a href="javascript:void(0);" class="px-2 font-normal text-[0.75rem] text-[#8c9097] dark:text-white/50"
aria-expanded="false">
View All<i class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
</a>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden" role="menu">
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
href="javascript:void(0);">Today</a></li>
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
href="javascript:void(0);">This Week</a></li>
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
href="javascript:void(0);">Last Week</a></li>
</ul>
</div>
</div>
<div class="box-body !p-0">
<div class="table-responsive">
<table class="table table-hover whitespace-nowrap min-w-full">
<thead>
<tr>
<th scope="col" class="text-start">Browser</th>
<th scope="col" class="text-start">Sessions</th>
<th scope="col" class="text-start">Traffic</th>
</tr>
</thead>
<tbody>
<tr class="border-t border-inherit border-solid hover:bg-gray-100 dark:hover:bg-light dark:border-defaultborder/10">
<td>
<div class="flex items-center">
<span class="avatar avatar-rounded avatar-sm p-2 bg-light me-2">
<i class="ri-google-fill text-[1.125rem] text-primary"></i>
</span>
<div class="font-semibold">Google</div>
</div>
</td>
<td>
<span><i class="ri-arrow-up-s-fill me-1 text-success align-middle text-[1.125rem]"></i>23,379</span>
</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-primary w-[78%]" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</td>
</tr>
<tr class="border-t border-inherit border-solid hover:bg-gray-100 dark:hover:bg-light dark:border-defaultborder/10">
<td>
<div class="flex items-center">
<span class="avatar avatar-rounded avatar-sm p-2 bg-light me-2">
<i class="ri-safari-line text-[1.125rem] text-secondary"></i>
</span>
<div class="font-semibold">Safari</div>
</div>
</td>
<td>
<span><i class="ri-arrow-up-s-fill me-1 text-success align-middle text-[1.125rem]"></i>78,973</span>
</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-primary w-[32%]" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</td>
</tr>
<tr class="border-t border-inherit border-solid hover:bg-gray-100 dark:hover:bg-light dark:border-defaultborder/10">
<td>
<div class="flex items-center">
<span class="avatar avatar-rounded avatar-sm p-2 bg-light me-2">
<i class="ri-opera-fill text-[1.125rem] text-success"></i>
</span>
<div class="font-semibold">Opera</div>
</div>
</td>
<td>
<span><i class="ri-arrow-down-s-fill me-1 text-danger align-middle text-[1.125rem]"></i>12,457</span>
</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-primary w-[21%]" aria-valuenow="21" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</td>
</tr>
<tr class="border-t border-inherit border-solid hover:bg-gray-100 dark:hover:bg-light dark:border-defaultborder/10">
<td>
<div class="flex items-center">
<span class="avatar avatar-rounded avatar-sm p-2 bg-light me-2">
<i class="ri-edge-fill text-[1.125rem] text-info"></i>
</span>
<div class="font-semibold">Edge</div>
</div>
</td>
<td>
<span><i class="ri-arrow-up-s-fill me-1 text-success align-middle text-[1.125rem]"></i>8,570</span>
</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-primary w-1/4" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</td>
</tr>
<tr class="border-t border-inherit border-solid hover:bg-gray-100 dark:hover:bg-light dark:border-defaultborder/10">
<td>
<div class="flex items-center">
<span class="avatar avatar-rounded avatar-sm p-2 bg-light me-2">
<i class="ri-firefox-fill text-[1.125rem] text-warning"></i>
</span>
<div class="font-semibold">Firefox</div>
</div>
</td>
<td>
<span><i class="ri-arrow-down-s-fill me-1 text-danger align-middle text-[1.125rem]"></i>6,135</span>
</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-primary w-[35%]" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</td>
</tr>
<tr class="border-t border-inherit border-solid hover:bg-gray-100 dark:hover:bg-light dark:border-defaultborder/10">
<td class="border-bottom-0">
<div class="flex items-center">
<span class="avatar avatar-rounded avatar-sm p-2 bg-light me-2">
<i class="ri-ubuntu-fill text-[1.125rem] text-danger"></i>
</span>
<div class="font-semibold">Ubuntu</div>
</div>
</td>
<td class="border-bottom-0">
<span><i class="ri-arrow-up-s-fill me-1 text-success align-middle text-[1.125rem]"></i>4,789</span>
</td>
<td class="border-bottom-0">
<div class="progress progress-xs">
<div class="progress-bar bg-primary w-[12%]" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="xl:col-span-5 col-span-12">
<div class="grid grid-cols-12 gap-x-6">
<div class="xxl:col-span-5 cxl:ol-span-12 col-span-12">
<div class="box custom-card upgrade-card text-white">
<div class="box-body text-white">
<span class="avatar avatar-xxl !border-0">
<img src="./assets/images/media/media-84.png" alt="">
</span>
<div class="upgrade-card-content">
<span class="opacity-[0.7] font-normal mb-1 !text-white">Plan is expiring !</span>
<span class="text-[0.9375rem] font-semibold block mb-[3rem] upgrade-text !text-white">Upgrade to premium</span>
<button type="button" class="ti-btn !py-1 !px-2 bg-light text-defaulttextcolor !text-[0.75rem] font-medium ti-btn-wave">Upgrade Now</button>
</div>
</div>
</div>
<div class="box">
<div class="box-body !p-1">
<div class="flex items-center flex-wrap">
<div id="analytics-followers">
<apx-chart [series]="optionsCircle2.series" [chart]="optionsCircle2.chart"
[xaxis]="optionsCircle2.xaxis" [colors]="optionsCircle2.colors"
[labels]="optionsCircle2.labels" [legend]="optionsCircle2.legend"
[stroke]="optionsCircle2.stroke" [tooltip]="optionsCircle2.tooltip"
[plotOptions]="optionsCircle2.plotOptions"
[dataLabels]="optionsCircle2.dataLabels"></apx-chart>
</div>
<div class="ms-1">
<p class="mb-1 text-[#8c9097] dark:text-white/50">Impressions</p>
<h5 class="font-semibold mb-0 text-[1.25rem]">9,903</h5>
</div>
</div>
</div>
</div>
<div class="box">
<div class="box-body !p-1">
<div class="flex items-center flex-wrap">
<div id="analytics-views">
<apx-chart [series]="optionsCircle3.series" [chart]="optionsCircle3.chart"
[xaxis]="optionsCircle3.xaxis" [colors]="optionsCircle3.colors"
[labels]="optionsCircle3.labels" [legend]="optionsCircle3.legend"
[stroke]="optionsCircle3.stroke" [tooltip]="optionsCircle3.tooltip"
[plotOptions]="optionsCircle3.plotOptions"
[dataLabels]="optionsCircle3.dataLabels"></apx-chart>
</div>
<div class="ms-1">
<p class="mb-1 text-[#8c9097] dark:text-white/50">Clicks</p>
<h5 class="font-semibold mb-0 text-[1.25rem]">16,789</h5>
</div>
</div>
</div>
</div>
</div>
<div class="xxl:col-span-7 xl:col-span-12 col-span-12">
<div class="box">
<div class="box-header justify-between">
<div class="box-title">
Sessions By Device
</div>
<div>
<button type="button" class="ti-btn ti-btn-primary 1 !text-[0.85rem] !m-0 !font-medium">View All</button>
</div>
</div>
<div class="box-body !my-2 !py-6 !px-2">
<div id="sessions">
<apx-chart [series]="optionsCircle1.series" [chart]="optionsCircle1.chart"
[xaxis]="optionsCircle1.xaxis"
[labels]="optionsCircle1.labels" [legend]="optionsCircle1.legend"
[stroke]="optionsCircle1.stroke" [tooltip]="optionsCircle1.tooltip"
[plotOptions]="optionsCircle1.plotOptions"
[dataLabels]="optionsCircle1.dataLabels"[colors]="optionsCircle1.colors"></apx-chart>
</div>
</div>
<div class="box-footer !p-0">
<div class="grid grid-cols-12 justify-center">
<div class="col-span-3 pe-0 text-center">
<div class="sm:p-4 p-2 ">
<span class="text-[#8c9097] dark:text-white/50 text-[0.6875rem]">Mobile</span>
<span class="block text-[1rem] font-semibold">68.3%</span>
</div>
</div>
<div class="col-span-3 px-0 text-center">
<div class="sm:p-4 p-2">
<span class="text-[#8c9097] dark:text-white/50 text-[0.6875rem]">Tablet</span>
<span class="block text-[1rem] font-semibold">17.68%</span>
</div>
</div>
<div class="col-span-3 px-0 text-center">
<div class="sm:p-4 p-2 ">
<span class="text-[#8c9097] dark:text-white/50 text-[0.6875rem]">Desktop</span>
<span class="block text-[1rem] font-semibold">10.5%</span>
</div>
</div>
<div class="col-span-3 px-0 text-center">
<div class="sm:p-4 p-2">
<span class="text-[#8c9097] dark:text-white/50 text-[0.6875rem]">Others</span>
<span class="block text-[1rem] font-semibold">5.16%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="xl:col-span-12 col-span-12">
<div class="box">
<div class="box-header justify-between">
<div class="box-title">Sessions Duration By New Users</div>
<div class="hs-dropdown ti-dropdown">
<a href="javascript:void(0);" class="px-2 font-normal text-[0.75rem] text-[#8c9097] dark:text-white/50"
aria-expanded="false">
View All<i class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
</a>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden" role="menu">
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
href="javascript:void(0);">Today</a></li>
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
href="javascript:void(0);">This Week</a></li>
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
href="javascript:void(0);">Last Week</a></li>
</ul>
</div>
</div>
<div class="box-body">
<div id="session-users">
<apx-chart [series]="chartOptions4.series" [chart]="chartOptions4.chart"
[yaxis]="chartOptions4.yaxis" [xaxis]="chartOptions4.xaxis"
[labels]="chartOptions4.labels" [stroke]="chartOptions4.stroke"
[plotOptions]="chartOptions4.plotOptions" [markers]="chartOptions4.markers"
[fill]="chartOptions4.fill" [tooltip]="chartOptions4.tooltip" [colors]="chartOptions4.colors" [legend]="chartOptions4.legend"></apx-chart>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
src/app/DPU/myportal/home-common/home-common.component.spec.ts 0 → 100644
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { HomeCommonComponent } from './home-common.component';
describe('HomeCommonComponent', () => {
let component: HomeCommonComponent;
let fixture: ComponentFixture<HomeCommonComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HomeCommonComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HomeCommonComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/DPU/myportal/home-common/home-common.component.ts 0 → 100644
import { ChangeDetectorRef, Component, ElementRef, Renderer2 } from '@angular/core';
import { RouterModule } from '@angular/router';
import ApexCharts from 'apexcharts'
import { SharedModule } from '../../../shared/shared.module';
import { NgApexchartsModule } from 'ng-apexcharts';
@Component({
selector: 'app-home-common',
imports: [RouterModule,SharedModule,NgApexchartsModule],
standalone: true,
templateUrl: './home-common.component.html',
styleUrls: ['./home-common.component.css']
})
export class HomeCommonComponent {
chartOptions1:any;
chartOptions2:any;
chartOptions3:any
chartOptions:any;
optionsCircle1:any;
chartOptions4:any;
optionsCircle2:any;
optionsCircle3:any
constructor(private el: ElementRef, private renderer: Renderer2,private cdr: ChangeDetectorRef){
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.chartOptions2={
chart: {
type: 'line',
height: 45,
sparkline: {
enabled: true
},
dropShadow: {
enabled: true,
top: 0,
left: 0,
blur: 1,
color: '#fff',
opacity: 0.05
}
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
width: 2,
dashArray: 0,
},
fill: {
gradient: {
enabled: false
}
},
series: [{
name: 'Value',
data: [54, 38, 56, 35, 65, 43, 53, 45, 62, 80, 35, 48]
}],
yaxis: {
min: 0,
show: false,
axisBorder: {
show: false
},
},
xaxis: {
axisBorder: {
show: false
},
},
colors: ["rgba(132, 90, 223, 0.1)"],
tooltip: {
enabled: false,
}
}
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',
}
}
},
},
},
colors: ["rgba(132, 90, 223, 1)", "rgba(35, 183, 229, 1)", "rgba(38, 191, 148, 1)", "rgba(245, 184, 73, 1)",],
};
this.chartOptions = {
series: [
{
name: 'Views',
type: 'column',
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 45, 35],
},
{
name: 'Followers',
type: 'line',
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43, 27],
},
],
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'],
};
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 = {
series: [
{
name: 'New Users',
data: [32, 15, 63, 51, 36, 62, 99, 42, 78, 76, 32, 120],
},
{
name: 'Sessions',
data: [56, 58, 38, 50, 64, 45, 55, 32, 15, 63, 51, 136],
},
{
name: 'Avg Session Duration',
data: [48, 29, 50, 69, 20, 59, 52, 12, 48, 28, 17, 98],
},
],
chart: {
height: 425,
type: 'line',
toolbar: {
show: false,
},
background: 'none',
fill: '#fff',
},
grid: {
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"]
}
}
// ngAfterViewInit(): void {
// this.setChartWidth();
// this.cdr.detectChanges();
// }
// private setChartWidth(): void {
// const chartContainer = this.el.nativeElement.querySelector('.chart-container');
// const chartContainer1 = this.el.nativeElement.querySelector('.chart-container1');
// const chartContainer2 = this.el.nativeElement.querySelector('.chart-container2');
// const chartContainer3 = this.el.nativeElement.querySelector('.chart-container3');
// const chart = new ApexCharts(chartContainer1, this.chartOptions);
// const chart1 = new ApexCharts(chartContainer, this.optionsCircle1);
// const chart2 = new ApexCharts(chartContainer2, this.chartOptions3);
// const chart3 = new ApexCharts(chartContainer3, this.chartOptions4);
// chart.render();
// chart2.render();
// chart1.render();
// chart3.render();
// }
}
src/app/DPU/myportal/myportal.component.spec.ts 0 → 100644
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { MyportalComponent } from './myportal.component';
describe('MyportalComponent', () => {
let component: MyportalComponent;
let fixture: ComponentFixture<MyportalComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MyportalComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyportalComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/DPU/myportal/myportal.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-myportal',
templateUrl: './myportal.component.html',
styleUrls: ['./myportal.component.css']
})
export class MyportalComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
src/app/DPU/myportal/myportal.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { QuillModule } from 'ngx-quill';
import { MyportalComponent } from './myportal.component';
import { CommonModule } from '@angular/common';
export const admin: Routes = [
{
path: 'admin', children: [{
path: 'home',
loadComponent: () =>
import('./home-common/home-common.component').then((m) => m.HomeCommonComponent),
},
]
}
];
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(admin),
QuillModule.forRoot(),
],
exports: [RouterModule],
declarations: [MyportalComponent]
})
export class MyPortalModule {
static routes = admin;
}
src/app/shared/services/nav.service.ts
......@@ -131,6 +131,44 @@ export class NavService implements OnDestroy {
{ path: '/admin/provinces', title: 'จัดการจังหวัด', type: 'link' },
],
},
{ headTitle: 'Myportal' },
{
icon: 'news',
path: '/admin/pdpa-manage',
title: 'จัดการ PDPA',
type: 'link',
},
{
icon: 'receipt',
path: '/admin/manage-articles',
title: 'จัดการบทความ',
type: 'link',
},
{
icon: 'user',
path: '/admin/company-departments',
title: 'จัดการผู้ใช้',
type: 'sub',
children: [
{ path: '/admin/manage-companys', title: 'จัดการบริษัท', type: 'link' },
{ path: '/admin/member-manage', title: 'จัดการผู้สมัครงาน', type: 'link' }
],
},
{
icon: 'buildings',
path: '/admin/company-departments',
title: 'ทะเบียนบริษัท',
type: 'sub',
children: [
{ path: '/admin/career-cluster', title: 'จัดการกลุ่มอาชีพ', type: 'link' },
{ path: '/admin/position', title: 'จัดการตำแหน่ง', type: 'link' },
{ path: '/admin/job-types', title: 'จัดการประเภทงาน', type: 'link' },
{ path: '/admin/category-company', title: 'จัดการประเภทธุรกิจ', type: 'link' },
{ path: '/admin/degree-manage', title: 'จัดการระดับการศึกษา', type: 'link' },
{ path: '/admin/country-registration', title: 'จัดการประเทศ', type: 'link' },
{ path: '/admin/provinces', title: 'จัดการจังหวัด', type: 'link' },
],
},
// { headTitle: 'User Management' },
......
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