import { Component, OnInit, Input, OnDestroy, ViewChild, AfterViewInit } from '@angular/core';
import { IControlPanel } from '../../../data/model/control-panel.model';
import { EEndpoints } from '../../../data/enums/EEndpoints';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { ApiService } from '../../../data/services/api.service';
import { ToastrService } from 'ngx-toastr';
import { DiagramComponent, Diagram, NodeModel, ConnectorModel, SnapSettingsModel, LayoutModel, DataSourceModel, TextModel, DiagramConstraints, CommandManager, UserHandleModel, SelectorConstraints, getCursor } from '@syncfusion/ej2-angular-diagrams';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { IControlPanelDetail } from '../../../data/model/control-panel-detail.model';
@Component({
selector: 'app-tablero-comandos',
templateUrl: './tablero-comandos.component.html',
styleUrls: ['./tablero-comandos.component.scss']
})
export class TableroComandosComponent implements OnInit, OnDestroy, AfterViewInit {
public controlPanelList: IControlPanel[] = [];
public controlPanelDetailList: IControlPanelDetail[] = [];
private _unsubscribeAll: Subject<any> = new Subject();
@ViewChild("diagram")
public diagram: DiagramComponent;
public commandManager: CommandManager;
public snapSettings: SnapSettingsModel;
public items: DataManager;
public layout: LayoutModel;
public dataSourceSettings: DataSourceModel;
//Initializes data source
public data: object[] = [];
modalData: any = {} as any;
public diagramConstraints: DiagramConstraints;
constructor(
public _toastr: ToastrService,
public apiService: ApiService,
) {
}
ngOnInit(): void {
this.diagramConstraints = DiagramConstraints.Default & ~DiagramConstraints.PageEditable;
this.getControlPanel();
this.initChart();
}
ngAfterViewInit() {
this.diagram.click.subscribe(($event) => {
console.log($event);
if ($event.propName && $event.element.propName == 'nodes') {
this.showModal($event);
}
});
}
ngOnDestroy(): void {
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
changeControlPanel($event) {
// let nodes: NodeModel[] = [{
// id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
// }];
// let diagram: Diagram = new Diagram({
// nodes: nodes,
// getCustomCursor: getCursor
// });
// diagram.appendTo('#diagram');
const panelId = parseInt($event.target.value);
const data = [];
if (panelId) {
const found = this.controlPanelList.find(f => f.id == panelId);
if (found) {
data.push({
Id: "parent",
Role: found.name,
extra: null,
color: "#e74a3b"
});
if (found.controlPanelDetail) {
const groups = this.groupBy(found.controlPanelDetail, 'perspective');
if (groups) {
const keys = Object.keys(groups);
for (var i = 0; i < keys.length; i++) {
const value = groups[keys[i]] as any;
data.push({
Id: value.id,
Role: value.name,
Team: 'parent',
extra: value,
color: '#6BA5D7'
});
if (value.indicators) {
value.indicators.forEach((indicator: any, index) => {
data.push({
Id: `${value.id}${indicator.id}`,
Role: indicator.name,
Team: value.id,
extra: indicator,
color: '#1cc88a'
});
});
}
}
}
}
this.data = data;
this.data.slice();
this.initChart();
}
}
}
groupBy(data, property): [] {
return data.reduce((acc, obj) => {
const key = obj[property];
if (!acc[key.name]) {
acc[key.name] = {
id: key.id,
name: key.name,
indicators: []
};
}
acc[key.name].indicators.push(obj.indicator);
return acc;
}, {});
}
//Sets the default properties for all the Nodes
public getNodeDefaults(obj: NodeModel, diagram: Diagram): NodeModel {
obj.shape = {
type: 'Text',
content: (obj.data as {
Role: 'string'
}).Role
};
obj.addInfo = null;
obj.style = {
fill: 'None',
strokeColor: 'none',
strokeWidth: 2,
bold: true,
color: 'white',
};
obj.borderColor = 'white';
obj.backgroundColor = obj.data['color'] ? obj.data['color'] : '#6BA5D7';
obj.borderWidth = 1;
obj.width = 75;
obj.height = 40;
(obj.shape as TextModel).margin = {
left: 5,
right: 5,
top: 5,
bottom: 5
};
return obj;
}
//Sets the default properties for all the connectors
public getConnectorDefaults(connector: ConnectorModel, diagram: Diagram): ConnectorModel {
connector.style = {
strokeColor: '#6BA5D7',
strokeWidth: 2
};
connector.targetDecorator.style.fill = '#6BA5D7';
connector.targetDecorator.style.strokeColor = '#6BA5D7';
connector.type = 'Orthogonal';
return connector;
}
private initChart() {
this.snapSettings = {
constraints: 0
}
this.items = new DataManager(this.data as JSON[], new Query().take(5));
//Uses layout to auto-arrange nodes on the Diagram page
this.layout = {
//set the type as Organizational Chart
type: 'OrganizationalChart',
}
//Configures data source for Diagram
this.dataSourceSettings = {
id: 'Id',
parentId: 'Team',
dataSource: this.items
}
}
private getControlPanel() {
this.apiService.get(EEndpoints.ControlPanelAll)
.pipe(takeUntil(this._unsubscribeAll)).subscribe(
(response) => {
this.controlPanelList = response;
}, err => this.responseError(err)
)
}
private responseError(err: any) {
this._toastr.error("Error en servidor, intentelo en otro momento!", "Error!")
}
}
}
<div class="container">
<div class="row">
<div class="col-12">
<ejs-diagram #diagram id="diagram"
width="100%"
height="600px"
[getNodeDefaults]="getNodeDefaults"
[getConnectorDefaults]="getConnectorDefaults"
[snapSettings]="snapSettings"
[layout]="layout"
[constraints]="diagramConstraints"
[dataSourceSettings]="dataSourceSettings">
</ejs-diagram>
</div>
</div>
añade un comentario
|