Skip to content

P
portal-apps-manage
Commit 11ee1825 by Ooh-Ao
Options

s

parent 6b8b4df6
Showing with 129 additions and 195 deletions
src/app/DPU/widgets/syncfusion-chart-widget/syncfusion-chart-widget.component.html
<div class="bg-white p-4 rounded-lg shadow-md h-full flex flex-col"> <div class="bg-white p-4 rounded-lg shadow-md h-full flex flex-col">
<h3 class="text-lg font-semibold text-gray-500 mb-4">{{ title }}</h3> <h3 class="text-lg font-semibold text-gray-500 mb-4">{{ title }}</h3>
<ejs-chart [title]="title" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis">
<!-- Loading State -->
<div *ngIf="isLoading" class="flex justify-center items-center h-full">
<div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>
</div>
<!-- Error State -->
<div *ngIf="hasError" class="flex flex-col justify-center items-center h-full text-red-500">
<i class="bi bi-exclamation-triangle-fill text-4xl"></i>
<p class="mt-2">{{ errorMessage }}</p>
</div>
<!-- Chart -->
<ejs-chart *ngIf="!isLoading && !hasError" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis">
<e-series-collection> <e-series-collection>
<e-series [dataSource]="chartData" type="Column" xName="x" yName="y" name="Data"></e-series> <e-series [dataSource]="chartData" type="Column" xName="x" yName="y" name="Data"></e-series>
</e-series-collection> </e-series-collection>
......
src/app/DPU/widgets/syncfusion-chart-widget/syncfusion-chart-widget.component.ts
import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core'; import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { ChartModule, ColumnSeriesService, CategoryService, LegendService, TooltipService, DataLabelService } from '@syncfusion/ej2-angular-charts'; import { ChartModule, ColumnSeriesService, CategoryService, LegendService, TooltipService, DataLabelService } from '@syncfusion/ej2-angular-charts';
import { DatasetService } from '../../services/dataset.service'; import { DashboardStateService } from '../../services/dashboard-state.service';
import { HttpClient, HttpClientModule } from '@angular/common/http'; import { BaseWidgetComponent } from '../base-widget.component';
import { DatasetModel } from '../../models/widgets.model';
@Component({ @Component({
selector: 'app-syncfusion-chart-widget', selector: 'app-syncfusion-chart-widget',
standalone: true, standalone: true,
imports: [CommonModule, ChartModule, HttpClientModule], imports: [CommonModule, ChartModule],
providers: [ColumnSeriesService, CategoryService, LegendService, TooltipService, DataLabelService, DatasetService, HttpClient], providers: [ColumnSeriesService, CategoryService, LegendService, TooltipService, DataLabelService],
templateUrl: './syncfusion-chart-widget.component.html', templateUrl: './syncfusion-chart-widget.component.html',
}) })
export class SyncfusionChartWidgetComponent implements OnInit, OnChanges { export class SyncfusionChartWidgetComponent extends BaseWidgetComponent {
@Input() title: string = 'Monthly Sales Analysis'; // New input for title public chartData: Object[];
@Input() chartData: Object[] | undefined; // New input for chart data
@Input() config: any;
public primaryXAxis: Object; public primaryXAxis: Object;
public primaryYAxis: Object; public primaryYAxis: Object;
public localChartData: Object[]; // Renamed to avoid conflict with input
constructor(private datasetService: DatasetService, private http: HttpClient) { constructor(protected override dashboardStateService: DashboardStateService) {
this.localChartData = this.chartData || [ super(dashboardStateService);
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 30 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 37 },
{ month: 'Sep', sales: 39 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 35 }, { month: 'Dec', sales: 41 }
];
this.primaryXAxis = { valueType: 'Category' };
} }
ngOnInit(): void { onDataUpdate(data: any[]): void {
// If chartData is provided as an input, update localChartData this.chartData = data.map(item => ({ x: item[this.config.xField], y: item[this.config.yField] }));
if (!this.config || !this.config.datasetId) { this.primaryXAxis = { valueType: 'Category', title: this.config.xAxisTitle || '' };
this.chartData = [ this.primaryYAxis = { title: this.config.yAxisTitle || '' };
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 30 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 37 },
{ month: 'Sep', sales: 39 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 35 }, { month: 'Dec', sales: 41 }
];
}
this.primaryXAxis = { valueType: 'Category' };
} }
ngOnChanges(changes: SimpleChanges): void { onReset(): void {
if (changes['config'] && this.config && this.config.datasetId) { this.title = 'Syncfusion Chart (Default)';
this.loadData(); this.chartData = [
} else if (changes['config'] && (!this.config || !this.config.datasetId)) { { x: 'Jan', y: 35 }, { x: 'Feb', y: 28 },
this.chartData = [ { x: 'Mar', y: 34 }, { x: 'Apr', y: 32 },
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 }, { x: 'May', y: 40 }, { x: 'Jun', y: 30 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 }, ];
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 30 }, this.primaryXAxis = { valueType: 'Category', title: 'Month' };
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 37 }, this.primaryYAxis = { title: 'Sales' };
{ month: 'Sep', sales: 39 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 35 }, { month: 'Dec', sales: 41 }
];
}
}
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.chartData = data.map(item => ({ x: item[this.config.xField], y: item[this.config.yField] }));
if (this.config.title) {
this.title = this.config.title;
}
if (this.config.xAxisTitle) {
this.primaryXAxis = { ...this.primaryXAxis, title: this.config.xAxisTitle };
}
if (this.config.yAxisTitle) {
this.primaryYAxis = { ...this.primaryYAxis, title: this.config.yAxisTitle };
}
});
}
});
}
} }
} }
src/app/DPU/widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component.html
<div class="h-full"> <div class="h-full flex flex-col">
<h5 class="text-lg font-semibold text-gray-600 mb-2">{{ title }}</h5> <h5 class="text-lg font-semibold text-gray-600 mb-2">{{ title }}</h5>
<ejs-grid [dataSource]="data" [allowPaging]="true" [pageSettings]="pageSettings" [allowSorting]="true" [allowFiltering]="true" [allowGrouping]="true">
<!-- Loading State -->
<div *ngIf="isLoading" class="flex justify-center items-center h-full">
<div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>
</div>
<!-- Error State -->
<div *ngIf="hasError" class="flex flex-col justify-center items-center h-full text-red-500">
<i class="bi bi-exclamation-triangle-fill text-4xl"></i>
<p class="mt-2">{{ errorMessage }}</p>
</div>
<!-- Grid -->
<ejs-grid *ngIf="!isLoading && !hasError" [dataSource]="data" [allowPaging]="true" [pageSettings]="pageSettings" [allowSorting]="true" [allowFiltering]="true" [allowGrouping]="true" class="flex-grow">
<e-columns> <e-columns>
<e-column *ngFor="let col of columns" [field]="col.field" [headerText]="col.headerText" [width]="col.width"></e-column> <e-column *ngFor="let col of columns" [field]="col.field" [headerText]="col.headerText" [width]="col.width"></e-column>
</e-columns> </e-columns>
</ejs-grid> </ejs-grid>
</div> </div>
src/app/DPU/widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component.ts
import { Component, Input, OnInit, OnChanges, SimpleChanges, ChangeDetectorRef } from '@angular/core'; import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { GridModule, PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids'; import { GridModule, PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids';
import { DatasetService } from '../../services/dataset.service'; import { DashboardStateService } from '../../services/dashboard-state.service';
import { DatasetModel } from '../../models/widgets.model'; import { BaseWidgetComponent } from '../base-widget.component';
@Component({ @Component({
selector: 'app-syncfusion-datagrid-widget', selector: 'app-syncfusion-datagrid-widget',
...@@ -13,55 +11,36 @@ import { DatasetModel } from '../../models/widgets.model'; ...@@ -13,55 +11,36 @@ import { DatasetModel } from '../../models/widgets.model';
providers: [PageService, SortService, FilterService, GroupService], providers: [PageService, SortService, FilterService, GroupService],
templateUrl: './syncfusion-datagrid-widget.component.html', templateUrl: './syncfusion-datagrid-widget.component.html',
}) })
export class SyncfusionDatagridWidgetComponent implements OnInit, OnChanges { export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent {
@Input() config: any;
public data: object[] = []; public data: object[] = [];
public columns: any[] = []; public columns: any[] = [];
public title: string = 'Data Grid'; public pageSettings: Object = { pageSize: 10 };
public pageSettings: Object = { pageSize: 6 };
constructor(private datasetService: DatasetService, private http: HttpClient, private cdr: ChangeDetectorRef) {} constructor(protected override dashboardStateService: DashboardStateService) {
super(dashboardStateService);
}
ngOnInit(): void { onDataUpdate(data: any[]): void {
if (!this.config || !this.config.datasetId) { this.data = data;
this.data = []; if (this.config.columns && this.config.columns.length > 0) {
this.columns = []; this.columns = this.config.columns;
} else if (this.data.length > 0) {
// Auto-generate columns if not provided in config
this.columns = Object.keys(this.data[0]).map(key => ({
field: key,
headerText: this.formatHeader(key),
width: 150
}));
} }
this.loadData();
} }
ngOnChanges(changes: SimpleChanges): void { onReset(): void {
if (changes['config'] && this.config && this.config.datasetId) { this.title = 'Data Grid (Default)';
this.loadData(); this.data = [];
} else if (changes['config'] && (!this.config || !this.config.datasetId)) { this.columns = [{ field: 'Message', headerText: 'Please select a dataset' }];
this.data = [];
this.columns = [];
}
} }
loadData(): void { private formatHeader(key: string): string {
if (this.config.datasetId) { return key.replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase());
this.datasetService.getDatasetById(this.config.datasetId).subscribe((dataset: DatasetModel | undefined) => {
if (dataset && dataset.url) {
this.http.get<object[]>(dataset.url).subscribe(data => {
this.data = data;
if (this.config.columns) {
this.columns = this.config.columns;
} else if (this.data.length > 0) {
// Auto-generate columns if not provided in config
this.columns = Object.keys(this.data[0]).map(key => ({ field: key, headerText: key }));
}
if (this.config.title) {
this.title = this.config.title;
}
this.cdr.markForCheck();
});
}
});
} else {
this.data = [];
this.columns = [];
}
} }
} }
src/app/DPU/widgets/syncfusion-pivot-widget/syncfusion-pivot-widget.component.html
<ejs-pivotview [dataSourceSettings]="dataSourceSettings" [allowCalculatedField]="true" [showFieldList]="true" [showToolbar]="true"> <div class="h-full flex flex-col">
</ejs-pivotview> <h5 class="text-lg font-semibold text-gray-600 mb-2">{{ title }}</h5>
<!-- Loading State -->
<div *ngIf="isLoading" class="flex justify-center items-center h-full">
<div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>
</div>
<!-- Error State -->
<div *ngIf="hasError" class="flex flex-col justify-center items-center h-full text-red-500">
<i class="bi bi-exclamation-triangle-fill text-4xl"></i>
<p class="mt-2">{{ errorMessage }}</p>
</div>
<!-- Pivot View -->
<ejs-pivotview *ngIf="!isLoading && !hasError" [dataSourceSettings]="dataSourceSettings" [allowCalculatedField]="true" [showFieldList]="true" [showToolbar]="true" class="flex-grow">
</ejs-pivotview>
</div>
src/app/DPU/widgets/syncfusion-pivot-widget/syncfusion-pivot-widget.component.ts
import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { PivotViewModule, IDataSet, FieldListService, CalculatedFieldService, ToolbarService, GroupingBarService, ConditionalFormattingService, LoadEventArgs } from '@syncfusion/ej2-angular-pivotview'; import { PivotViewModule, IDataSet, FieldListService, CalculatedFieldService, ToolbarService, GroupingBarService, ConditionalFormattingService } from '@syncfusion/ej2-angular-pivotview';
import { DatasetModel } from '../../models/widgets.model'; import { DashboardStateService } from '../../services/dashboard-state.service';
import { DatasetService } from '../../services/dataset.service'; import { BaseWidgetComponent } from '../base-widget.component';
import { HttpClient } from '@angular/common/http';
@Component({ @Component({
selector: 'app-syncfusion-pivot-widget', selector: 'app-syncfusion-pivot-widget',
...@@ -12,83 +11,44 @@ import { HttpClient } from '@angular/common/http'; ...@@ -12,83 +11,44 @@ import { HttpClient } from '@angular/common/http';
providers: [FieldListService, CalculatedFieldService, ToolbarService, GroupingBarService, ConditionalFormattingService], providers: [FieldListService, CalculatedFieldService, ToolbarService, GroupingBarService, ConditionalFormattingService],
templateUrl: './syncfusion-pivot-widget.component.html', templateUrl: './syncfusion-pivot-widget.component.html',
}) })
export class SyncfusionPivotWidgetComponent implements OnInit, OnChanges { export class SyncfusionPivotWidgetComponent extends BaseWidgetComponent {
@Input() config: any; public dataSourceSettings: {
dataSource: IDataSet[];
expandAll: boolean;
rows: any[];
columns: any[];
values: any[];
filters: any[];
};
public dataSource: IDataSet[]; constructor(protected override dashboardStateService: DashboardStateService) {
public dataSourceSettings: Object; super(dashboardStateService);
}
constructor(private datasetService: DatasetService, private http: HttpClient) { onDataUpdate(data: IDataSet[]): void {
this.dataSource = [];
this.dataSourceSettings = { this.dataSourceSettings = {
dataSource: this.dataSource, dataSource: data,
expandAll: false, expandAll: this.config.expandAll || false,
rows: [], rows: this.config.rows || [],
columns: [], columns: this.config.columns || [],
values: [], values: this.config.values || [],
filters: [], filters: this.config.filters || [],
}; };
} }
ngOnInit(): void { onReset(): void {
if (!this.config || !this.config.datasetId) { this.title = 'Pivot Table (Default)';
this.dataSource = [ this.dataSourceSettings = {
{ 'Sold': 31, 'Amount': 52824, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015' }, dataSource: [
{ 'Sold': 51, 'Amount': 91915, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2016' },
{ 'Sold': 90, 'Amount': 173155, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2017' },
];
this.dataSourceSettings = {
dataSource: this.dataSource,
expandAll: false,
rows: [{ name: 'Country' }],
columns: [{ name: 'Year' }],
values: [{ name: 'Sold' }, { name: 'Amount' }],
filters: [],
};
}
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['config'] && this.config && this.config.datasetId) {
this.loadData();
} else if (changes['config'] && (!this.config || !this.config.datasetId)) {
this.dataSource = [
{ 'Sold': 31, 'Amount': 52824, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015' }, { 'Sold': 31, 'Amount': 52824, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015' },
{ 'Sold': 51, 'Amount': 91915, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2016' }, { 'Sold': 51, 'Amount': 91915, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2016' },
{ 'Sold': 90, 'Amount': 173155, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2017' }, { 'Sold': 90, 'Amount': 173155, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2017' },
]; ],
this.dataSourceSettings = { expandAll: false,
dataSource: this.dataSource, rows: [{ name: 'Country' }],
expandAll: false, columns: [{ name: 'Year' }],
rows: [{ name: 'Country' }], values: [{ name: 'Sold' }, { name: 'Amount' }],
columns: [{ name: 'Year' }], filters: [],
values: [{ name: 'Sold' }, { name: 'Amount' }], };
filters: [],
};
}
}
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.dataSource = data;
this.dataSourceSettings = {
dataSource: this.dataSource,
expandAll: this.config.expandAll || false,
rows: this.config.rows || [],
columns: this.config.columns || [],
values: this.config.values || [],
filters: this.config.filters || [],
};
if (this.config.title) {
// Assuming there's a title property in the component for the pivot table
// this.title = this.config.title;
}
});
}
});
}
} }
} }
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