@progress/kendo-angular-pivotgrid
Version:
PivotGrid package for Angular
162 lines (161 loc) • 7.51 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Directive, EventEmitter, Input, NgZone, Output } from '@angular/core';
import { PivotGridDataService } from './pivotgrid-data.service';
import { headersReducer, HEADERS_ACTION, toTree } from '@progress/kendo-pivotgrid-common';
import { Subscription } from 'rxjs';
import { PivotGridState } from '../models/configurator-settings';
import { ExpandChangeEvent } from '../models/expanded-change-event';
import { hasObservers } from '@progress/kendo-angular-common';
import { ConfigurationChangeEvent } from '../models/configuration-change-event';
import * as i0 from "@angular/core";
import * as i1 from "./pivotgrid-data.service";
/**
* @hidden
* A directive which binds the PivotGrid to an array of objects.
*/
export class PivotBaseBindingDirective {
dataService;
zone;
/**
* Represents the column axes configuration of the PivotGrid.
*/
columnAxes = [];
/**
* Represents the row axes configuration of the PivotGrid.
*/
rowAxes = [];
/**
* Represents the measure axes configuration of the PivotGrid.
*/
measureAxes = [];
/**
* Represents the initial sorted state of the PivotGrid.
*/
sort = [];
/**
* Represents the initial filtered state of the PivotGrid.
*/
filter;
/**
* Fires each time a row or column header gets expanded or collapsed by the end user. The event is preventable.
* If you prevent the event, the PivotGrid will not be rerendered with the new state, resulting from the end user interaction.
*/
expandChange = new EventEmitter();
/**
* Fires when the Configurator Apply button is pressed. The event is preventable.
* If you prevent the event, the PivotGrid will not be rerendered with the new state, resulting from the configuration changes, applied through the configurator interface.
*/
configurationChange = new EventEmitter();
/**
* Fires each time when new data is loaded and transformed to show aggregated values.
* The event fires upon initialization and on user interaction that changes the state of the PivotGrid.
*/
dataLoaded = new EventEmitter();
dataState;
configuratorFields;
subs = new Subscription();
constructor(dataService, zone) {
this.dataService = dataService;
this.zone = zone;
}
ngOnInit() {
this.dataService.state = new PivotGridState(this.columnAxes, this.rowAxes, this.measureAxes, this.sort, this.filter);
this.loadData(this.dataService.state);
this.loadFields();
this.subs.add(this.dataService.expandedStateChange.subscribe((state) => {
this.zone.run(() => {
const isCol = state.tableType === 'columnHeader';
const axes = isCol ? 'columnAxes' : 'rowAxes';
// Converts current rows state to a tree-like structure (using the PivotGrid Common pkg)
const tree = toTree((isCol ? this.dataService.columns : this.dataService.rows || []).slice());
this.updateHeaders(axes, tree, state.cell.path);
});
}));
this.subs.add(this.dataService.configuratorFieldChange.subscribe((state) => {
this.zone.run(() => {
if (hasObservers(this.configurationChange)) {
const event = new ConfigurationChangeEvent(state);
this.configurationChange.emit(event);
if (event.isDefaultPrevented()) {
return;
}
}
this.dataService.configuredFields.next(this.dataService.state);
this.loadData(state);
this.dataService.state = state;
this.rowAxes = this.dataService.state.rowAxes;
this.columnAxes = this.dataService.state.columnAxes;
});
}));
this.subs.add(this.dataService.valuesRows.subscribe((data) => {
this.zone.run(() => {
this.dataService.aggregateData = data;
this.dataLoaded.emit(data);
});
}));
this.dataService.directive = this;
}
ngOnDestroy() {
this.subs.unsubscribe();
}
updateDataServiceFields() {
this.dataService.normalizedData = this.dataState.data;
this.dataService.rows = this.dataState.rows;
this.dataService.columns = this.dataState.columns;
this.dataService.updateRowsAndCols();
}
updateConfiguratorFields() {
this.dataService.fields.next(this.configuratorFields);
this.dataService.configuredFields.next(this.dataService.state);
}
updateHeaders(axes, tree, path) {
// Action to determine expand/collapse state
const action = {
type: HEADERS_ACTION.toggle,
payload: path
};
// The `headersReducer` method is responsible for udpating
// the expanded state based on the toggle action (expand/collapse)
// Update axes and reload data
const newHeaders = headersReducer(this[axes].slice(), { ...action, tree });
const newState = { ...this.dataService.state, ...{ [axes]: newHeaders } };
this.dataService.state = newState;
if (hasObservers(this.expandChange)) {
const event = new ExpandChangeEvent(newState);
this.expandChange.emit(event);
if (event.isDefaultPrevented()) {
return;
}
}
this.dataService.configuredFields.next(this.dataService.state);
this[axes] = newHeaders;
this.loadData(this.dataService.state);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotBaseBindingDirective, deps: [{ token: i1.PivotGridDataService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PivotBaseBindingDirective, selector: "kendo-base-binding-directive", inputs: { columnAxes: "columnAxes", rowAxes: "rowAxes", measureAxes: "measureAxes", sort: "sort", filter: "filter" }, outputs: { expandChange: "expandChange", configurationChange: "configurationChange", dataLoaded: "dataLoaded" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotBaseBindingDirective, decorators: [{
type: Directive,
args: [{
selector: 'kendo-base-binding-directive'
}]
}], ctorParameters: function () { return [{ type: i1.PivotGridDataService }, { type: i0.NgZone }]; }, propDecorators: { columnAxes: [{
type: Input
}], rowAxes: [{
type: Input
}], measureAxes: [{
type: Input
}], sort: [{
type: Input
}], filter: [{
type: Input
}], expandChange: [{
type: Output
}], configurationChange: [{
type: Output
}], dataLoaded: [{
type: Output
}] } });