@bizdoc/core 1.14.8 → 1.14.9

package/src/lib/cube/filter/filter.component.ts

@@ -0,0 +1,116 @@
+import { Component, OnInit, Input, Output, OnDestroy, EventEmitter, OnChanges, AfterViewInit, ChangeDetectorRef, ElementRef, SimpleChanges } from '@angular/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
+import { Subject, Observable } from 'rxjs';
+import { debounceTime, takeUntil, filter, map } from 'rxjs/operators';
+import { isArray, mapToArray } from '../../core/functions';
+import { AxesMap, Cube, CubeAxis } from '../../core/models';
+import { AXIS_VALUE_PATTERN, CubeService } from '../cube.service';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { SessionService } from '../../core/session.service';
+
+@Component({
+  selector: 'bizdoc-cube-filter',
+  templateUrl: './filter.component.html',
+  styleUrls: ['./filter.component.scss']
+})
+/** filter component*/
+export class CubeFilterComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
+  readonly pattern = AXIS_VALUE_PATTERN;
+  @Input() cube?: string;
+  @Input() exclude?: string[];
+  @Input() include?: string[];
+  @Input() axes: AxesMap = {};
+  @Output() readonly axesChange = new EventEmitter<AxesMap>();
+  form: FormGroup;
+  visibleAxes: CubeAxis[] = [];
+  readonly sources: { [axis: string]: Observable<{ [key: string]: any }> } = {};
+  private _cube: Cube;
+  private readonly _decendents = {} as { [name: string]: string[] };
+  private readonly _ancestors = {} as { [name: string]: string[] };
+  private readonly _destroy = new Subject<void>();
+  ngOnInit(): void {
+    this._cube = this._session.profile.cubes.find(c => this.cube == null || c.name === this.cube);
+    const config = {};
+    this._cube.axes.forEach(a => {
+      if (a.hidden || a.selectionMode === 'None') return;
+      let { descendentOf } = a;
+      if (descendentOf) {
+        let ancestors = this._ancestors[a.name] = [];
+        while (descendentOf) {
+          let axis = this._cube.axes.find(a => a.name === descendentOf);
+          ancestors.push(axis.name);
+          if (a.selectionMode !== 'Pattern') {
+            if (!this._decendents[descendentOf]) this._decendents[descendentOf] = [a.name];
+            else this._decendents[descendentOf].push(a.name);
+          }
+          descendentOf = axis.descendentOf;
+        }
+      }
+      const ctrl = config[a.name] = this._fb.control(this.axes[a.name]);
+      ctrl.valueChanges.pipe(filter(() => ctrl.valid), debounceTime(200),
+        takeUntil(this._destroy)).subscribe(v => {
+          if (v === null || v === undefined || (isArray(v) && !v.length))
+            delete this.axes[a.name];
+          else
+            this.axes[a.name] = v;
+          if (this._decendents[a.name])
+            for (let axis of this._decendents[a.name]) {
+              let deps = {};
+              for (let name of this._ancestors[axis])
+                if (this.axes[name]) deps[name] = this.axes[name];
+              this.sources[axis] = this._service.values(this._cube.name, axis, deps).
+                pipe(map(mapToArray));
+            }
+          this.axesChange.emit(this.axes);
+        });
+    });
+    this.form = this._fb.group(config);
+    this.form.updateValueAndValidity({ emitEvent: false });
+    this._initialize();
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    changes['exclude'] && !changes['exclude'].firstChange && this._initialize();
+  }
+  private _initialize() {
+    const visibleAxes = [], values = {};
+    this._cube.axes.forEach(a => {
+      if (a.hidden || a.selectionMode === 'None') return;
+      if ((this.include && this.include.indexOf(a.name) > -1) ||
+        (this.exclude && this.exclude.indexOf(a.name) < 0) || (!this.include && !this.exclude)) {
+        if (!this.sources[a.name] && a.selectionMode !== 'Pattern') {
+          this.sources[a.name] = this._service.values(this._cube.name, a.name).pipe(map(mapToArray));
+        }
+        visibleAxes.push(a);
+      }
+      values[a.name] = this.axes[a.name] || null;
+    });
+    this.visibleAxes = visibleAxes;
+    this.form && this.form.patchValue(values, { emitEvent: false });
+  }
+
+  focus() {
+    const inp = (this._element.nativeElement as HTMLElement).querySelectorAll('.mat-select, textarea, input')[0];
+    inp && (inp as HTMLInputElement).focus();
+    this._cd.detectChanges();
+  }
+  /** filter ctor */
+  constructor(private readonly _service: CubeService,
+    private readonly _element: ElementRef<HTMLDivElement>,
+    private readonly _cd: ChangeDetectorRef,
+    private readonly _fb: FormBuilder,
+    private readonly _session: SessionService) {
+  }
+  ngAfterViewInit(): void {
+    this.focus();
+  }
+  display(keyValue) {
+    return keyValue ? keyValue.value : null;
+  }
+  change(axis: string, evt: MatAutocompleteSelectedEvent) {
+    this.form.controls[axis].setValue(evt.option.value.key);
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/cube/grid/grid.component.html

@@ -0,0 +1,29 @@
+<!--<ejs-grid [dataSource]="dataSource"
+          [id]='id'
+          [groupSettings]="groupSettings"
+          [enableHover]='false'
+          [allowExcelExport]=true
+          [selectionSettings]=selectionSettings
+          [allowSorting]=false
+          (cellSelecting)=cellSelecting($event)
+          (queryCellInfo)="queryCellInfo($event)"
+          [currencyCode]=currencyCode
+          [style.max-height]="height">
+  <e-columns>
+    <e-column headerText="" field="title" width="120">
+    </e-column>
+    <e-column *ngFor="let c of columns" [field]="'_'+c.key" width="100" [headerText]="c.value" [format]="format" textAlign='Right'>
+    </e-column>
+  </e-columns>
+  <e-aggregates>
+    <e-aggregate>
+      <e-columns>
+        <e-column *ngFor="let c of columns" [field]="'_'+c.key" type="Custom" [format]="format" [customAggregate]="customAggregate">
+          <ng-template #footerTemplate let-data>
+            <span class="nowrap" [class.mat-warn]="data['_'+c.key+' - custom'] !== undefined && data['_'+c.key+' - custom']<0">{{data.Custom}}</span>
+          </ng-template>
+        </e-column>
+      </e-columns>
+    </e-aggregate>
+  </e-aggregates>
+</ejs-grid>-->

package/src/lib/cube/grid/grid.component.scss

@@ -0,0 +1,10 @@
+.nowrap {
+  white-space: nowrap;
+  word-wrap: normal;
+}
+::ng-deep .e-rowcell:not(.e-headertext) {
+  cursor: pointer
+}
+
+
+::ng-deep .e-grid td.e-cellselectionbackground { background-color: none }

package/src/lib/cube/grid/grid.component.ts

@@ -0,0 +1,223 @@
+import { EventEmitter, Component, Output, OnInit, HostBinding, ElementRef, OnDestroy, Input, SimpleChanges, OnChanges } from "@angular/core";
+import { HttpErrorResponse, HttpResponse } from "@angular/common/http";
+import { forkJoin, Observable } from "rxjs";
+import { tap } from "rxjs/operators";
+import { GroupSettingsModel, Grid, AggregateColumnModel, ExcelExport, Aggregate, Freeze, SelectionSettingsModel, CellSelectingEventArgs, Selection, QueryCellInfoEventArgs, ColumnModel, Resize } from '@syncfusion/ej2-angular-grids';
+import { AxisClickEvent, CubeViewerComponent } from "../declarations";
+import { AxesMap, Cube } from "../../core/models";
+import { CubeService, errResource } from "../cube.service";
+import { PromptService } from "../../core/prompt.service";
+import { DatasourceService } from "../../core/datasource.service";
+import { SessionService } from "../../core/session.service";
+import { isArray } from "../../core/functions";
+
+Grid.Inject(Selection, Aggregate, Freeze, ExcelExport, Resize);
+
+@Component({
+  selector: 'bizdoc-cube-grid',
+  template: '',
+  styleUrls: ['grid.component.scss'],
+  host: {
+    class: 'cube-view'
+  }
+})
+export class CubeGridComponent implements OnInit, OnChanges, CubeViewerComponent, OnDestroy {
+  @Input()
+  width: string;
+  @Input()
+  height: string;
+  @Input()
+  cube: string;
+  @Input()
+  set xAxis(val: string[] | string) {
+    this._xAxis = isArray(val) ? val : [val];
+  }
+  @Input()
+  set series(val: string[] | string) {
+    if (val) this._series = isArray(val) ? val : [val];
+  }
+  @Input()
+  set indices(val: string[] | string) {
+    if (val) this._indices = isArray(val) ? val : [val];
+  }
+  @Input()
+  filters?: AxesMap;
+  currencyCode: string;
+  @Output() readonly explore = new EventEmitter<AxisClickEvent>();
+  @Input() loading: boolean;
+  @Output() readonly loadingChange = new EventEmitter<boolean>();
+  private static nextId = 0;
+  @HostBinding() id = `cube-grid-${CubeGridComponent.nextId++}`;
+  grid: Grid;
+  dataSource: any[] = [];
+  readonly groupSettings: GroupSettingsModel = {
+  };
+  readonly selectionSettings: SelectionSettingsModel = { cellSelectionMode: 'Box', type: 'Single', mode: 'Cell' };
+  aggregates: { columns: AggregateColumnModel[] }[];
+  columns: ColumnModel[];
+  private _xAxis: string[];
+  private _series?: string[];
+  private _indices?: string[];
+  private _rows: { key: any; value: any }[] = [];
+  private _columns: { key: any; value: any }[] = [];
+    private _cube: Cube;
+  private _prepare: Promise<any>;
+  constructor(
+    private _session: SessionService,
+    private _sb: PromptService,
+    private _ds: DatasourceService,
+    private _service: CubeService,
+    private _elementRef: ElementRef) { }
+  ngOnInit(): void {
+    this._cube = this.cube ? this._session.profile.cubes.find(c => c.name === this.cube) : this._session.profile.cubes[0];
+    this.currencyCode = this._cube.currencyCode;
+    const x = this._cube.axes.find(a => a.name === this._xAxis[0]),
+      y = this._cube.axes.find(a => a.name === this._series[0]);
+    const promises: Observable<any>[] = [];
+    // aquire columns source
+    let observe = this._ds.all(x.dataType).
+      pipe(tap(c => {
+        this._columns = c;
+        const format = `${this.currencyCode ? 'c' : 'n'}${this._service.fractionDigits}`;
+        this.columns = [{
+          headerText: '', field: 'title',
+        } as ColumnModel];
+        this._columns.forEach(c => this.columns.push({
+          field: `_${c.key}`,
+          headerText: c.value,
+          width: 120,
+          format,
+          textAlign: 'Right'
+        } as ColumnModel
+        ));
+        this.aggregates = [{
+          columns: this._columns.map(c => {
+            return {
+              columnName: `_${c.key}`,
+              field: `_${c.key}`,
+                type: 'Custom',
+              //  footerTemplate: `\${if(Custom.indexOf('-')>-1)}
+              //<span class="mat-warn">\${Custom}</span> \${else}
+              //\${Custom} \${/if}`,
+              format,
+              customAggregate: this.customAggregate.bind(this)
+            } as AggregateColumnModel;
+          })
+        }];
+      }));
+    promises.push(observe);
+    // aquire rows source
+    observe = this._ds.all(y.dataType).
+      pipe(tap(r => this._rows = r));
+    promises.push(observe);
+    // prepare
+    this._prepare =
+      forkJoin(promises).toPromise();
+      this.execute();
+  }
+  /** */
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['filters'] && !changes['filters'].firstChange)
+      this.execute();
+    else
+      if (changes['height'])
+        this.resize();
+  }
+  execute() {
+    this.loadingChange.emit(true);
+    this._service.series(this._cube.name, this._xAxis, { series: this._series, filters: this.filters, indices: this._indices }).
+      subscribe(series => {
+        this._prepare.then(() => {
+          const rows = [];
+          series.filter(s => s.index).forEach(s => {
+            const row = { title: s.title, type: 'Index', key: s.index } as Model;
+            this._normalize(row, s.points);
+            rows.push(row);
+          });
+          this._rows.forEach(r => {
+            const row = { title: r.value, key: r.key } as Model, serie = series.find(s => s.name === r.key);
+            serie &&
+              this._normalize(row, serie.points);
+            rows.push(row);
+          });
+          this.dataSource = rows;
+          this._draw();
+          this.loadingChange.emit(false);
+        });
+      }, (e: HttpErrorResponse) => {
+        this._sb.error(errResource(e));
+        this.loadingChange.emit(false);
+      });
+  }
+  private _normalize(row: Model, points: any[]) {
+    points.forEach(p => row[`_${p.x}`] = p.y);
+    this._columns.forEach(c => {
+      if (row[`_${c.key}`] === undefined) row[`_${c.key}`] = 0;
+    });
+  };
+  private _draw() {
+    this.grid && this.grid.destroy();
+    this.grid = new Grid({
+      dataSource: this.dataSource,
+      columns: this.columns,
+      enableHover: false,
+      allowExcelExport: true,
+      selectionSettings: this.selectionSettings,
+      allowSorting: false,
+      frozenColumns: 1,
+      width: this.width,
+      //height: this.height,
+      cellSelecting: this.cellSelecting.bind(this),
+      allowPaging: false,
+      queryCellInfo: this.queryCellInfo,
+      frozenRows: this.indices ? this.indices.length : 0,
+      aggregates: this.aggregates,
+      currencyCode: this.currencyCode
+    }, this._elementRef.nativeElement);
+  }
+  queryCellInfo(evt: QueryCellInfoEventArgs) {
+    if (evt.column.field === 'title')
+      evt.cell.classList.add('e-headertext');
+    else {
+      const val = evt.data[evt.column.field];
+      if (val < 0)
+        evt.cell.classList.add('negative-figure');
+      evt.cell.classList.add('nowrap');
+    }
+  }
+  cellSelecting(evt: CellSelectingEventArgs) {
+    const { data, cellIndex: { cellIndex } } = evt, { key: row, type } = data as Model;
+    evt.cancel = true;
+    if (cellIndex === 0)
+      return;
+    const column = this._columns[cellIndex - 1].key;
+    if (data[`_${column}`] === 0) return;
+    const axes: {} = {};
+    axes[this._xAxis[0]] = column;
+    if (type !== 'Index') axes[this._series[0]] = row;
+    this.explore.emit({ axes, index: type === 'Index' ? row : null });
+  }
+  public customAggregate(_, column: AggregateColumnModel) {
+    return this.dataSource.sum(r =>
+      (r[column.field] || 0) * (r.type === 'Index' ? 1 : -1));
+  }
+  resize(): void {
+    if (this.grid) {
+      this.grid.width = this.width;
+    }
+  }
+  exportToExcel(title: string) {
+    this.grid.excelExport({
+      fileName: `${title}.xlsx`
+    });
+  }
+  ngOnDestroy(): void {
+    this.grid && this.grid.destroy();
+  }
+}
+
+interface Model {
+  title: string;
+  type: 'Index' | null;
+  key: any;
+}