Skip to content

P
portal-apps-manage
Commit 3bf1295b by Ooh-Ao
Options

widgets

parent c9833196
Showing with 524 additions and 28 deletions
src/app/DPU/dashboard-management/dashboard-management.component.ts
......@@ -228,6 +228,13 @@ export class DashboardManagementComponent implements OnInit {
component: 'MultiRowCardWidgetComponent',
cols: 2,
rows: 2,
config: {
title: 'Employee Overview',
source: { type: 'url', url: 'assets/data/employee-data.json' },
labelField: 'department',
valueField: 'salary',
unitField: 'currency' // Assuming 'currency' field exists in employee-data.json or can be added
}
}),
new WidgetModel({
id: 'local-combo-chart',
......@@ -235,6 +242,18 @@ export class DashboardManagementComponent implements OnInit {
component: 'ComboChartWidgetComponent',
cols: 3,
rows: 2,
config: {
title: 'Employee Sales and Performance',
source: { type: 'url', url: 'assets/data/employee-data.json' },
xField: 'name',
yFields: ['salesAmount', 'performanceScore'],
xAxisTitle: 'Employee',
yAxisTitle: 'Value',
series: [
{ type: 'Column', xName: 'name', yName: 'salesAmount', name: 'Sales' },
{ type: 'Line', xName: 'name', yName: 'performanceScore', name: 'Performance' }
]
}
}),
new WidgetModel({
id: 'local-doughnut-chart',
......@@ -256,6 +275,11 @@ export class DashboardManagementComponent implements OnInit {
component: 'FunnelChartWidgetComponent',
cols: 2,
rows: 3,
config: {
title: 'Sales Funnel',
xField: 'stage',
yField: 'value',
}
}),
new WidgetModel({
id: 'local-gauge-chart',
......@@ -263,6 +287,15 @@ export class DashboardManagementComponent implements OnInit {
component: 'GaugeChartWidgetComponent',
cols: 2,
rows: 2,
config: {
title: 'Average Performance Score',
valueField: 'performanceScore', // Assuming 'performanceScore' is a numeric field in employee-data.json
ranges: [
{ start: 0, end: 60, color: '#E0B9B9' },
{ start: 60, end: 80, color: '#B9D7EA' },
{ start: 80, end: 100, color: '#B9EAB9' }
]
}
}),
new WidgetModel({
id: 'local-simple-kpi',
......@@ -286,6 +319,17 @@ export class DashboardManagementComponent implements OnInit {
component: 'FilledMapWidgetComponent',
cols: 4,
rows: 3,
config: {
title: 'Employee Distribution by Country',
source: { type: 'url', url: 'assets/data/employee-data.json' }, // Assuming employee-data.json has country and value
countryField: 'country', // Assuming a 'country' field in employee-data.json
valueField: 'employeeCount', // Assuming an 'employeeCount' field in employee-data.json
colorMapping: [
{ value: 0, color: '#C3E6CB' },
{ value: 50, color: '#FFECB5' },
{ value: 100, color: '#F5C6CB' }
]
}
}),
new WidgetModel({
id: 'local-matrix',
......@@ -293,6 +337,17 @@ export class DashboardManagementComponent implements OnInit {
component: 'MatrixWidgetComponent',
cols: 3,
rows: 2,
config: {
title: 'Employee Skills Matrix',
source: { type: 'url', url: 'assets/data/employee-data.json' },
columns: [
{ field: 'name', headerText: 'Employee Name' },
{ field: 'department', headerText: 'Department' },
{ field: 'skill1', headerText: 'Skill 1' }, // Assuming these fields exist or can be added to employee-data.json
{ field: 'skill2', headerText: 'Skill 2' },
{ field: 'skill3', headerText: 'Skill 3' },
]
}
}),
new WidgetModel({
id: 'local-slicer',
......@@ -300,6 +355,11 @@ export class DashboardManagementComponent implements OnInit {
component: 'SlicerWidgetComponent',
cols: 2,
rows: 1,
config: {
title: 'Filter by Department',
source: { type: 'url', url: 'assets/data/employee-data.json' },
optionsField: 'department', // Assuming 'department' field exists in employee-data.json
}
}),
new WidgetModel({
id: 'local-simple-table',
......@@ -324,6 +384,14 @@ export class DashboardManagementComponent implements OnInit {
component: 'WaterfallChartWidgetComponent',
cols: 3,
rows: 2,
config: {
title: 'Employee Salary Changes',
source: { type: 'url', url: 'assets/data/employee-data.json' },
xField: 'name',
yField: 'salaryChange', // Assuming 'salaryChange' field exists in employee-data.json
xAxisTitle: 'Employee',
yAxisTitle: 'Salary Change',
}
}),
new WidgetModel({
id: 'local-treemap',
......@@ -340,6 +408,87 @@ export class DashboardManagementComponent implements OnInit {
yAxisTitle: 'Salary',
}
}),
new WidgetModel({
id: 'local-attendance-overview',
name: 'Attendance Overview (Local)',
component: 'AttendanceOverviewWidgetComponent',
cols: 2,
rows: 1,
config: {
title: 'Daily Attendance Summary',
source: { type: 'url', url: 'assets/data/sample1.json' }, // Assuming sample1.json has attendance data
presentField: 'present',
onLeaveField: 'onLeave',
absentField: 'absent',
}
}),
new WidgetModel({
id: 'local-company-info',
name: 'Company Info (Local)',
component: 'CompanyInfoWidgetComponent',
cols: 2,
rows: 1,
config: {
title: 'Our Company Details',
source: { type: 'url', url: 'assets/data/sample1.json' }, // Assuming sample1.json has company info
companyNameField: 'companyName',
addressField: 'address',
contactField: 'contact',
}
}),
new WidgetModel({
id: 'local-employee-directory',
name: 'Employee Directory (Local)',
component: 'EmployeeDirectoryWidgetComponent',
cols: 3,
rows: 2,
config: {
title: 'All Employees',
source: { type: 'url', url: 'assets/data/employee-data.json' }, // Assuming employee-data.json has employee info
nameField: 'name',
positionField: 'position',
departmentField: 'department',
}
}),
new WidgetModel({
id: 'local-headcount',
name: 'Employee Headcount (Local)',
component: 'HeadcountWidgetComponent',
cols: 2,
rows: 1,
config: {
title: 'Current Headcount',
source: { type: 'url', url: 'assets/data/employee-data.json' }, // Assuming employee-data.json has employee data
categoryField: 'department', // Field to categorize headcount by
}
}),
new WidgetModel({
id: 'local-payroll-summary',
name: 'Payroll Summary (Local)',
component: 'PayrollSummaryWidgetComponent',
cols: 2,
rows: 1,
config: {
title: 'Latest Payroll Overview',
source: { type: 'url', url: 'assets/data/sample1.json' }, // Assuming sample1.json has payroll data
totalPayrollField: 'totalPayroll',
employeesPaidField: 'employeesPaid',
}
}),
new WidgetModel({
id: 'local-payroll-details',
name: 'Payroll Details (Local)',
component: 'PayrollWidgetComponent',
cols: 3,
rows: 2,
config: {
title: 'Employee Payroll Details',
source: { type: 'url', url: 'assets/data/employee-data.json' }, // Assuming employee-data.json has payroll details
employeeNameField: 'name',
payPeriodField: 'payPeriod',
netPayField: 'netPay',
}
}),
];
private widgetComponentMap: { [key: string]: Type<any> } = {
......
src/app/DPU/widgets/attendance-overview-widget.component.ts
import { Component } from '@angular/core';
import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DatasetService } from '../services/dataset.service';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { DatasetModel } from '../models/widgets.model';
@Component({
selector: 'app-attendance-overview-widget',
standalone: true,
imports: [CommonModule, HttpClientModule],
providers: [DatasetService, HttpClient],
template: `
<div class="p-4 h-full bg-yellow-50">
<h3 class="font-bold text-yellow-800">Today's Attendance</h3>
<p class="text-sm text-yellow-600">Summary of employees present, on leave, or absent.</p>
<h3 class="font-bold text-yellow-800">{{ title }}</h3>
<p class="text-sm text-yellow-600">Present: {{ present }}</p>
<p class="text-sm text-yellow-600">On Leave: {{ onLeave }}</p>
<p class="text-sm text-yellow-600">Absent: {{ absent }}</p>
</div>
`
})
export class AttendanceOverviewWidgetComponent { }
export class AttendanceOverviewWidgetComponent implements OnInit, OnChanges {
@Input() config: any;
title: string = 'Today\'s Attendance';
present: number = 0;
onLeave: number = 0;
absent: number = 0;
constructor(private datasetService: DatasetService, private http: HttpClient) { }
ngOnInit(): void {
if (this.config && this.config.datasetId) {
this.loadData();
} else {
this.resetData();
}
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['config'] && this.config && this.config.datasetId) {
this.loadData();
} else if (changes['config'] && (!this.config || !this.config.datasetId)) {
this.resetData();
}
}
loadData(): void {
if (this.config.datasetId) {
this.datasetService.getDatasetById(this.config.datasetId).subscribe((dataset: DatasetModel | undefined) => {
if (dataset && dataset.url) {
this.http.get<any[]>(dataset.url).subscribe(data => {
if (data.length > 0) {
const firstItem = data[0];
this.present = firstItem[this.config.presentField] || 0;
this.onLeave = firstItem[this.config.onLeaveField] || 0;
this.absent = firstItem[this.config.absentField] || 0;
}
if (this.config.title) {
this.title = this.config.title;
}
});
}
});
}
}
resetData(): void {
this.present = 150;
this.onLeave = 10;
this.absent = 5;
}
}
src/app/DPU/widgets/company-info-widget.component.ts
import { Component } from '@angular/core';
import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DatasetService } from '../services/dataset.service';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { DatasetModel } from '../models/widgets.model';
@Component({
selector: 'app-company-info-widget',
standalone: true,
imports: [CommonModule, HttpClientModule],
providers: [DatasetService, HttpClient],
template: `
<div class="p-4 h-full bg-blue-50">
<h3 class="font-bold text-blue-800">Company Information</h3>
<p class="text-sm text-blue-600">Details about the company profile and address.</p>
<h3 class="font-bold text-blue-800">{{ title }}</h3>
<p class="text-sm text-blue-600">Company Name: {{ companyName }}</p>
<p class="text-sm text-blue-600">Address: {{ address }}</p>
<p class="text-sm text-blue-600">Contact: {{ contact }}</p>
</div>
`
})
export class CompanyInfoWidgetComponent { }
export class CompanyInfoWidgetComponent implements OnInit, OnChanges {
@Input() config: any;
title: string = 'Company Information';
companyName: string = '';
address: string = '';
contact: string = '';
constructor(private datasetService: DatasetService, private http: HttpClient) { }
ngOnInit(): void {
if (this.config && this.config.datasetId) {
this.loadData();
} else {
this.resetData();
}
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['config'] && this.config && this.config.datasetId) {
this.loadData();
} else if (changes['config'] && (!this.config || !this.config.datasetId)) {
this.resetData();
}
}
loadData(): void {
if (this.config.datasetId) {
this.datasetService.getDatasetById(this.config.datasetId).subscribe((dataset: DatasetModel | undefined) => {
if (dataset && dataset.url) {
this.http.get<any[]>(dataset.url).subscribe(data => {
if (data.length > 0) {
const firstItem = data[0];
this.companyName = firstItem[this.config.companyNameField] || '';
this.address = firstItem[this.config.addressField] || '';
this.contact = firstItem[this.config.contactField] || '';
}
if (this.config.title) {
this.title = this.config.title;
}
});
}
});
}
}
resetData(): void {
this.companyName = 'My Company Inc.';
this.address = '123 Main St, Anytown USA';
this.contact = 'info@mycompany.com';
}
}
src/app/DPU/widgets/employee-directory-widget.component.ts
import { Component } from '@angular/core';
import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DatasetService } from '../services/dataset.service';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { DatasetModel } from '../models/widgets.model';
@Component({
selector: 'app-employee-directory-widget',
standalone: true,
imports: [CommonModule, HttpClientModule],
providers: [DatasetService, HttpClient],
template: `
<div class="p-4 h-full bg-indigo-50">
<h3 class="font-bold text-indigo-800">Employee Directory</h3>
<p class="text-sm text-indigo-600">Searchable list of all employees.</p>
<h3 class="font-bold text-indigo-800">{{ title }}</h3>
<div *ngIf="employees.length > 0">
<div *ngFor="let employee of employees" class="mb-2">
<p class="text-sm text-indigo-600">{{ employee.name }} - {{ employee.position }} ({{ employee.department }})</p>
</div>
</div>
<p *ngIf="employees.length === 0" class="text-sm text-indigo-600">No employees found.</p>
</div>
`
})
export class EmployeeDirectoryWidgetComponent { }
export class EmployeeDirectoryWidgetComponent implements OnInit, OnChanges {
@Input() config: any;
title: string = 'Employee Directory';
employees: any[] = [];
constructor(private datasetService: DatasetService, private http: HttpClient) { }
ngOnInit(): void {
if (this.config && this.config.datasetId) {
this.loadData();
} else {
this.resetData();
}
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['config'] && this.config && this.config.datasetId) {
this.loadData();
} else if (changes['config'] && (!this.config || !this.config.datasetId)) {
this.resetData();
}
}
loadData(): void {
if (this.config.datasetId) {
this.datasetService.getDatasetById(this.config.datasetId).subscribe((dataset: DatasetModel | undefined) => {
if (dataset && dataset.url) {
this.http.get<any[]>(dataset.url).subscribe(data => {
this.employees = data.map(item => ({
name: item[this.config.nameField] || '',
position: item[this.config.positionField] || '',
department: item[this.config.departmentField] || '',
}));
if (this.config.title) {
this.title = this.config.title;
}
});
}
});
}
}
resetData(): void {
this.employees = [
{ name: 'John Doe', position: 'Software Engineer', department: 'IT' },
{ name: 'Jane Smith', position: 'Project Manager', department: 'Operations' },
];
}
}
src/app/DPU/widgets/headcount-widget.component.ts
import { Component } from '@angular/core';
import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { DatasetService } from '../services/dataset.service';
import { DatasetModel } from '../models/widgets.model';
@Component({
selector: 'app-headcount-widget',
standalone: true,
imports: [CommonModule, HttpClientModule],
providers: [DatasetService, HttpClient],
template: `
<div class="p-4 h-full bg-green-50">
<h3 class="font-bold text-green-800">Employee Headcount</h3>
<p class="text-sm text-green-600">Chart showing number of employees by department.</p>
<h3 class="font-bold text-green-800">{{ title }}</h3>
<p class="text-sm text-green-600">Total Headcount: {{ totalHeadcount }}</p>
<div *ngIf="breakdown.length > 0">
<p class="text-sm text-green-600">By {{ config?.categoryField || 'Category' }}:</p>
<ul>
<li *ngFor="let item of breakdown" class="text-xs text-green-600">
{{ item.category }}: {{ item.count }}
</li>
</ul>
</div>
</div>
`
})
export class HeadcountWidgetComponent { }
export class HeadcountWidgetComponent implements OnInit, OnChanges {
@Input() config: any;
title: string = 'Employee Headcount';
totalHeadcount: number = 0;
breakdown: { category: string, count: number }[] = [];
constructor(private datasetService: DatasetService, private http: HttpClient) { }
ngOnInit(): void {
if (this.config && this.config.datasetId) {
this.loadData();
} else {
this.resetData();
}
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['config'] && this.config && this.config.datasetId) {
this.loadData();
} else if (changes['config'] && (!this.config || !this.config.datasetId)) {
this.resetData();
}
}
loadData(): void {
if (this.config.datasetId) {
this.datasetService.getDatasetById(this.config.datasetId).subscribe((dataset: DatasetModel | undefined) => {
if (dataset && dataset.url) {
this.http.get<any[]>(dataset.url).subscribe(data => {
this.totalHeadcount = data.length;
if (this.config.categoryField) {
const counts = data.reduce((acc, item) => {
const category = item[this.config.categoryField];
acc[category] = (acc[category] || 0) + 1;
return acc;
}, {});
this.breakdown = Object.keys(counts).map(key => ({ category: key, count: counts[key] }));
}
if (this.config.title) {
this.title = this.config.title;
}
});
}
});
}
}
resetData(): void {
this.totalHeadcount = 200;
this.breakdown = [
{ category: 'IT', count: 50 },
{ category: 'HR', count: 20 },
{ category: 'Sales', count: 70 },
];
}
}
src/app/DPU/widgets/payroll-summary-widget.component.ts
import { Component } from '@angular/core';
import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { DatasetService } from '../services/dataset.service';
import { DatasetModel } from '../models/widgets.model';
@Component({
selector: 'app-payroll-summary-widget',
standalone: true,
imports: [CommonModule, HttpClientModule],
providers: [DatasetService, HttpClient],
template: `
<div class="p-4 h-full bg-red-50">
<h3 class="font-bold text-red-800">Payroll Summary</h3>
<p class="text-sm text-red-600">Overview of the latest payroll cycle.</p>
<h3 class="font-bold text-red-800">{{ title }}</h3>
<p class="text-sm text-red-600">Total Payroll: {{ totalPayroll | currency }}</p>
<p class="text-sm text-red-600">Employees Paid: {{ employeesPaid }}</p>
</div>
`
})
export class PayrollSummaryWidgetComponent { }
export class PayrollSummaryWidgetComponent implements OnInit, OnChanges {
@Input() config: any;
title: string = 'Payroll Summary';
totalPayroll: number = 0;
employeesPaid: number = 0;
constructor(private datasetService: DatasetService, private http: HttpClient) { }
ngOnInit(): void {
if (this.config && this.config.datasetId) {
this.loadData();
} else {
this.resetData();
}
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['config'] && this.config && this.config.datasetId) {
this.loadData();
} else if (changes['config'] && (!this.config || !this.config.datasetId)) {
this.resetData();
}
}
loadData(): void {
if (this.config.datasetId) {
this.datasetService.getDatasetById(this.config.datasetId).subscribe((dataset: DatasetModel | undefined) => {
if (dataset && dataset.url) {
this.http.get<any[]>(dataset.url).subscribe(data => {
if (data.length > 0) {
const firstItem = data[0];
this.totalPayroll = firstItem[this.config.totalPayrollField] || 0;
this.employeesPaid = firstItem[this.config.employeesPaidField] || 0;
}
if (this.config.title) {
this.title = this.config.title;
}
});
}
});
}
}
resetData(): void {
this.totalPayroll = 1500000;
this.employeesPaid = 180;
}
}
src/app/DPU/widgets/payroll-widget/payroll-widget.component.html
<div class="card h-100">
<div class="card-header">
<h5 class="card-title">Payroll</h5>
<h5 class="card-title">{{ title }}</h5>
</div>
<div class="card-body">
<p>This is a placeholder for payroll information.</p>
<p *ngIf="data">Data received: {{ data | json }}</p>
<p>Employee: {{ employeeName }}</p>
<p>Pay Period: {{ payPeriod }}</p>
<p>Net Pay: {{ netPay | currency }}</p>
</div>
</div>
src/app/DPU/widgets/payroll-widget/payroll-widget.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DatasetService } from '../../services/dataset.service';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { DatasetModel } from '../../models/widgets.model';
@Component({
selector: 'app-payroll-widget',
standalone: true,
imports: [CommonModule],
imports: [CommonModule, HttpClientModule],
providers: [DatasetService, HttpClient],
templateUrl: './payroll-widget.component.html',
styleUrls: ['./payroll-widget.component.scss']
})
export class PayrollWidgetComponent implements OnInit {
@Input() data: any;
export class PayrollWidgetComponent implements OnInit, OnChanges {
@Input() config: any;
title: string = 'Payroll Details';
employeeName: string = '';
payPeriod: string = '';
netPay: number = 0;
constructor() { }
constructor(private datasetService: DatasetService, private http: HttpClient) { }
ngOnInit(): void {
if (this.config && this.config.datasetId) {
this.loadData();
} else {
this.resetData();
}
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['config'] && this.config && this.config.datasetId) {
this.loadData();
} else if (changes['config'] && (!this.config || !this.config.datasetId)) {
this.resetData();
}
}
loadData(): void {
if (this.config.datasetId) {
this.datasetService.getDatasetById(this.config.datasetId).subscribe((dataset: DatasetModel | undefined) => {
if (dataset && dataset.url) {
this.http.get<any[]>(dataset.url).subscribe(data => {
if (data.length > 0) {
const firstItem = data[0];
this.employeeName = firstItem[this.config.employeeNameField] || '';
this.payPeriod = firstItem[this.config.payPeriodField] || '';
this.netPay = firstItem[this.config.netPayField] || 0;
}
if (this.config.title) {
this.title = this.config.title;
}
});
}
});
}
}
resetData(): void {
this.employeeName = 'N/A';
this.payPeriod = 'N/A';
this.netPay = 0;
}
}
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