Skip to content

P
portal-apps-manage
Commit 23058c6d by Ooh-Ao
Options

dashboard

parent ee3aaf4c
Showing with 132 additions and 97 deletions
src/app/DPU/dashboard-management/dashboard-management.component.ts
......@@ -105,8 +105,55 @@ export class DashboardManagementComponent implements OnInit {
private localWidgets: WidgetModel[] = [
new WidgetModel({
id: 'local-employee-area-chart',
name: 'Employee Sales Area Chart',
id: 'local-sync-pivot',
name: 'Syncfusion Pivot Table (Local)',
component: 'SyncfusionPivotWidgetComponent',
cols: 3,
rows: 3,
config: {
title: 'Employee Salary Pivot',
source: { type: 'url', url: 'assets/data/employee-data.json' },
rows: [{ name: 'department' }],
columns: [{ name: 'gender' }],
values: [{ name: 'salary', caption: 'Total Salary' }],
}
}),
new WidgetModel({
id: 'local-sync-grid',
name: 'Syncfusion Data Grid (Local)',
component: 'SyncfusionDatagridWidgetComponent',
cols: 3,
rows: 2,
config: {
title: 'All Employee Data',
source: { type: 'url', url: 'assets/data/employee-data.json' },
columns: [
{ field: 'id', headerText: 'ID', width: 70 },
{ field: 'name', headerText: 'Name', width: 120 },
{ field: 'department', headerText: 'Department', width: 120 },
{ field: 'salary', headerText: 'Salary', width: 100 },
{ field: 'performanceScore', headerText: 'Performance', width: 120 },
]
}
}),
new WidgetModel({
id: 'local-sync-chart',
name: 'Syncfusion Chart (Local)',
component: 'SyncfusionChartWidgetComponent',
cols: 3,
rows: 2,
config: {
title: 'Employee Performance',
source: { type: 'url', url: 'assets/data/employee-data.json' },
xField: 'name',
yField: 'performanceScore',
xAxisTitle: 'Employee',
yAxisTitle: 'Score',
}
}),
new WidgetModel({
id: 'local-area-chart',
name: 'Area Chart (Local)',
component: 'AreaChartWidgetComponent',
cols: 3,
rows: 2,
......@@ -120,8 +167,8 @@ export class DashboardManagementComponent implements OnInit {
}
}),
new WidgetModel({
id: 'local-employee-bar-chart',
name: 'Employee Performance Bar Chart',
id: 'local-bar-chart',
name: 'Bar Chart (Local)',
component: 'BarChartWidgetComponent',
cols: 3,
rows: 2,
......@@ -136,8 +183,8 @@ export class DashboardManagementComponent implements OnInit {
}
}),
new WidgetModel({
id: 'local-employee-pie-chart',
name: 'Employee Gender Distribution',
id: 'local-pie-chart',
name: 'Pie Chart (Local)',
component: 'PieChartWidgetComponent',
cols: 2,
rows: 2,
......@@ -150,8 +197,57 @@ export class DashboardManagementComponent implements OnInit {
}
}),
new WidgetModel({
id: 'local-employee-kpi',
name: 'Total Employees KPI',
id: 'local-scatter-bubble-chart',
name: 'Scatter/Bubble Chart (Local)',
component: 'ScatterBubbleChartWidgetComponent',
cols: 3,
rows: 2,
}),
new WidgetModel({
id: 'local-multi-row-card',
name: 'Multi-Row Card (Local)',
component: 'MultiRowCardWidgetComponent',
cols: 2,
rows: 2,
}),
new WidgetModel({
id: 'local-combo-chart',
name: 'Combo Chart (Local)',
component: 'ComboChartWidgetComponent',
cols: 3,
rows: 2,
}),
new WidgetModel({
id: 'local-doughnut-chart',
name: 'Doughnut Chart (Local)',
component: 'DoughnutChartWidgetComponent',
cols: 2,
rows: 2,
config: {
title: 'Department Distribution',
source: { type: 'url', url: 'assets/data/employee-data.json' },
xField: 'department',
yField: 'id',
aggregation: 'count',
}
}),
new WidgetModel({
id: 'local-funnel-chart',
name: 'Funnel Chart (Local)',
component: 'FunnelChartWidgetComponent',
cols: 2,
rows: 3,
}),
new WidgetModel({
id: 'local-gauge-chart',
name: 'Gauge Chart (Local)',
component: 'GaugeChartWidgetComponent',
cols: 2,
rows: 2,
}),
new WidgetModel({
id: 'local-simple-kpi',
name: 'Simple KPI (Local)',
component: 'SimpleKpiWidgetComponent',
cols: 2,
rows: 1,
......@@ -166,101 +262,54 @@ export class DashboardManagementComponent implements OnInit {
}
}),
new WidgetModel({
id: 'local-employee-table',
name: 'Employee List Table',
component: 'SimpleTableWidgetComponent',
id: 'local-filled-map',
name: 'Filled Map (Local)',
component: 'FilledMapWidgetComponent',
cols: 4,
rows: 3,
config: {
title: 'Employee Details',
source: { type: 'url', url: 'assets/data/employee-data.json' },
columns: [
{ field: 'id', headerText: 'ID' },
{ field: 'name', headerText: 'Name' },
{ field: 'department', headerText: 'Department' },
{ field: 'salary', headerText: 'Salary' },
]
}
}),
new WidgetModel({
id: 'local-employee-slicer',
name: 'Department Slicer',
id: 'local-matrix',
name: 'Matrix (Local)',
component: 'MatrixWidgetComponent',
cols: 3,
rows: 2,
}),
new WidgetModel({
id: 'local-slicer',
name: 'Slicer (Local)',
component: 'SlicerWidgetComponent',
cols: 2,
rows: 1,
config: {
title: 'Filter by Department',
source: { type: 'url', url: 'assets/data/employee-data.json' },
optionsField: 'department',
}
}),
// Existing Syncfusion widgets, updated to use employee-data.json if applicable
new WidgetModel({
id: 'local-sync-pivot',
name: 'Employee Salary by Department',
component: 'SyncfusionPivotWidgetComponent',
cols: 4,
rows: 3,
config: {
title: 'Employee Salary Pivot',
source: { type: 'url', url: 'assets/data/employee-data.json' },
rows: [{ name: 'department' }],
columns: [{ name: 'gender' }],
values: [{ name: 'salary', caption: 'Total Salary' }],
}
}),
new WidgetModel({
id: 'local-sync-grid',
name: 'Employee Data Grid',
component: 'SyncfusionDatagridWidgetComponent',
cols: 5,
rows: 4,
id: 'local-simple-table',
name: 'Simple Table (Local)',
component: 'SimpleTableWidgetComponent',
cols: 3,
rows: 2,
config: {
title: 'All Employee Data',
title: 'Employee Details',
source: { type: 'url', url: 'assets/data/employee-data.json' },
columns: [
{ field: 'id', headerText: 'ID', width: 70 },
{ field: 'name', headerText: 'Name', width: 120 },
{ field: 'department', headerText: 'Department', width: 120 },
{ field: 'salary', headerText: 'Salary', width: 100 },
{ field: 'performanceScore', headerText: 'Performance', width: 120 },
{ field: 'id', headerText: 'ID' },
{ field: 'name', headerText: 'Name' },
{ field: 'department', headerText: 'Department' },
{ field: 'salary', headerText: 'Salary' },
]
}
}),
new WidgetModel({
id: 'local-sync-chart',
name: 'Employee Performance Chart',
component: 'SyncfusionChartWidgetComponent',
id: 'local-waterfall-chart',
name: 'Waterfall Chart (Local)',
component: 'WaterfallChartWidgetComponent',
cols: 3,
rows: 2,
config: {
title: 'Employee Performance',
source: { type: 'url', url: 'assets/data/employee-data.json' },
xField: 'name',
yField: 'performanceScore',
xAxisTitle: 'Employee',
yAxisTitle: 'Score',
}
}),
// Other charts that can use employee data
new WidgetModel({
id: 'local-employee-doughnut-chart',
name: 'Employee Department Distribution',
component: 'DoughnutChartWidgetComponent',
cols: 2,
rows: 2,
config: {
title: 'Department Distribution',
source: { type: 'url', url: 'assets/data/employee-data.json' },
xField: 'department',
yField: 'id',
aggregation: 'count',
}
}),
new WidgetModel({
id: 'local-employee-waterfall-chart',
name: 'Employee Salary Progression',
component: 'WaterfallChartWidgetComponent',
id: 'local-treemap',
name: 'Treemap (Local)',
component: 'TreemapWidgetComponent',
cols: 3,
rows: 2,
config: {
......@@ -272,20 +321,6 @@ export class DashboardManagementComponent implements OnInit {
yAxisTitle: 'Salary',
}
}),
new WidgetModel({
id: 'local-employee-treemap',
name: 'Employee Salary Treemap',
component: 'TreemapWidgetComponent',
cols: 3,
rows: 2,
config: {
title: 'Salary by Department & Gender',
source: { type: 'url', url: 'assets/data/employee-data.json' },
groupField: 'department',
subGroupField: 'gender',
valueField: 'salary',
}
}),
];
private widgetComponentMap: { [key: string]: Type<any> } = {
......
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