angular-pivot-table
Version:
Angular Pivot Table is a simple pivot table built in Angular. If data needs to be grouped by fields then check out this <a href="https://github.com/debabratapatra/ngtreegrid" target="_blank">ngtreegrid</a> Package. If header needs to be fixed/freezed and
161 lines (153 loc) • 6.84 kB
JavaScript
import { ɵɵdefineInjectable, Injectable, Component, Input, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
class AngularPivotTableService {
constructor() { }
}
AngularPivotTableService.ɵprov = ɵɵdefineInjectable({ factory: function AngularPivotTableService_Factory() { return new AngularPivotTableService(); }, token: AngularPivotTableService, providedIn: "root" });
AngularPivotTableService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
AngularPivotTableService.ctorParameters = () => [];
class Store {
constructor() {
this.processed_data = [];
this.processed_headers = [];
}
getRawData() {
return this.raw_data;
}
setRawData(raw_data) {
this.raw_data = raw_data;
}
getProcessedData() {
return this.processed_data;
}
setProcessedData(processed_data) {
this.processed_data = processed_data;
}
getProcessedHeaders() {
return this.processed_headers;
}
processData(source, configs) {
this.setRawData(source);
const rows = this.findUnique(this.pluck(source, configs.rows));
const columns = this.findUnique(this.pluck(source, configs.columns));
this.processed_headers = [...columns];
for (let i = 0; i < rows.length; i++) {
const row = rows[i];
const processed_row = [row];
let row_count = 0;
for (let j = 0; j < columns.length; j++) {
const column = columns[j];
let count = 0;
for (let k = 0; k < source.length; k++) {
const data = source[k];
if (data[configs.rows] == row && data[configs.columns] == column) {
count++;
}
}
processed_row.push(count);
row_count += count;
}
processed_row.push(row_count);
this.processed_data.push(processed_row);
}
const summary_row = ['Total'];
for (let index = 1; index < this.processed_data[0].length; index++) {
this.addSummaryColumn(summary_row, index);
}
this.processed_data.push(summary_row);
}
addSummaryColumn(summary_row, index) {
summary_row.push(this.processed_data.map(data => data[index]).reduce((a, b) => a + b, 0));
}
findUnique(a) {
return a.filter(function (item, pos) {
return a.indexOf(item) == pos;
});
}
pluck(array, key) {
return array.map(function (obj) {
return obj[key];
});
}
}
class AngularPivotTableComponent {
constructor() {
this.source = [];
this.default_configs = {
rows: '',
columns: '',
css: {
row_selection_class: 'selected',
header_class: '',
table_class: ''
},
data_loading_text: 'Loading...',
row_class_function: () => true,
row_select_function: () => true
};
this.store = new Store();
this.processed_data = [];
this.processed_headers = [];
}
ngOnInit() {
this.validateConfigs();
this.setDefaultConfigs();
}
ngOnChanges() {
this.validateConfigs();
this.setDefaultConfigs();
this.store.processData(this.source, this.configs);
this.processed_data = this.store.getProcessedData();
this.processed_headers = this.store.getProcessedHeaders();
}
validateConfigs() {
if (!this.source) {
window.console.warn('source can\'t be empty!');
return;
}
if (!this.configs) {
window.console.warn('configs can\'t be empty!');
return;
}
}
setDefaultConfigs() {
this.configs = Object.assign({}, this.default_configs, this.configs);
// Deep clone.
this.configs.css = Object.assign({}, this.default_configs.css, this.configs.css);
}
}
AngularPivotTableComponent.decorators = [
{ type: Component, args: [{
selector: 'db-angular-pivot-table',
template: "<table [attr.class]=\"'db-table-view' + configs.css.table_class\">\n <thead>\n <tr>\n <th class=\"header-corner\">\n <table class=\"header-corner\">\n <tr>\n <td class=\"corner-top\">{{configs.columns}}</td>\n </tr>\n <tr>\n <td class=\"corner-bottom\">{{configs.rows}}</td>\n </tr>\n </table>\n </th>\n <th *ngFor=\"let header of processed_headers\">\n {{header}}\n </th>\n <th>\n Total\n </th>\n </tr>\n </thead>\n\n <tbody>\n <tr *ngFor=\"let row of processed_data\">\n <td *ngFor=\"let col of row\">\n {{col}}\n </td>\n </tr>\n </tbody>\n</table>",
styles: [".db-table-view{line-height:1.5em;border-collapse:collapse;border-spacing:0;display:table;max-width:100%;overflow:auto;word-break:normal;word-break:keep-all;border:1px solid grey;color:#4b4b4b}.db-table-view table.header-corner{width:100%;border-collapse:collapse}.db-table-view table.header-corner td{font-weight:400}.db-table-view table.header-corner td.corner-top{border-width:0 0 1px}.db-table-view table.header-corner td.corner-bottom{border-width:0}.db-table-view tbody tr td:first-child{font-weight:600}.db-table-view tr.selected{background-color:#e2e7eb}.db-table-view tr th{font-size:1rem;font-weight:600;line-height:1.25;color:#181818;border:1px solid #cdd5dc;vertical-align:middle;position:relative;box-sizing:border-box;padding:.5rem}.db-table-view tr th.header-corner{padding:0}.db-table-view tr td{border:1px solid #cdd5dc;vertical-align:middle;position:relative;padding:.5rem;box-sizing:border-box}"]
},] }
];
AngularPivotTableComponent.ctorParameters = () => [];
AngularPivotTableComponent.propDecorators = {
source: [{ type: Input }],
configs: [{ type: Input }]
};
class AngularPivotTableModule {
}
AngularPivotTableModule.decorators = [
{ type: NgModule, args: [{
declarations: [AngularPivotTableComponent],
imports: [
CommonModule
],
exports: [AngularPivotTableComponent]
},] }
];
/*
* Public API Surface of angular-pivot-table
*/
/**
* Generated bundle index. Do not edit.
*/
export { AngularPivotTableComponent, AngularPivotTableModule, AngularPivotTableService };
//# sourceMappingURL=angular-pivot-table.js.map