@bizdoc/core 1.14.8 → 1.14.9

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

@@ -0,0 +1,382 @@
+import { EventEmitter, Component, Output, OnInit, HostBinding, ElementRef, OnDestroy, Input, SimpleChanges, OnChanges } from "@angular/core";
+import { HttpErrorResponse, HttpResponse } from "@angular/common/http";
+import { CellModel, ColumnModel, RowModel, Spreadsheet, CellStyleModel, SelectEventArgs, AutoFillSettingsModel, isNumber, ScrollSettingsModel } from "@syncfusion/ej2-angular-spreadsheet";
+import { Workbook } from '@syncfusion/ej2-excel-export';
+import { Worksheet } from '@syncfusion/ej2-excel-export/src/worksheet';
+import { Row } from '@syncfusion/ej2-excel-export/src/row';
+import { Column } from '@syncfusion/ej2-excel-export/src/column';
+import { AxisClickEvent, CubeViewerComponent } from "../declarations";
+import { AxesMap, Cube, CubeAxis, CubeIndex, YAxis } from "../../core/models";
+import { CubeService, errResource, Series } from "../cube.service";
+import { PromptService } from "../../core/prompt.service";
+import { TranslateService } from "../../core/translate.service";
+import { DatasourceService } from "../../core/datasource.service";
+import { SessionService } from "../../core/session.service";
+import { isArray, isString } from "../../core/functions";
+
+@Component({
+  selector: 'bizdoc-cube-spreadsheet',
+  template: '',
+  host: {
+    class: 'cube-view'
+  }
+})
+export class CubeSpreadsheetComponent implements OnInit, CubeViewerComponent, OnChanges, OnDestroy {
+  private static nextId = 0;
+  @Input()
+  width: string;
+  @Input()
+  height: string;
+  @Input()
+  cube: string;
+  private _cube: Cube;
+  @Input()
+  set xAxis(val: string[] | string) {
+    this._xAxis = isArray(val) ? val : [val];
+  }
+  @Input()
+  yAxis?: YAxis;
+  @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;
+  @Output() readonly explore = new EventEmitter<AxisClickEvent>();
+  @Input() loading: boolean;
+  @Output() readonly loadingChange = new EventEmitter<boolean>();
+  @HostBinding() id = `cube-spreadsheet-${CubeSpreadsheetComponent.nextId++}`;
+  spreadsheet: Spreadsheet;
+  dataSource: RowModel[] = [];
+  columns: ColumnModel[];
+  readonly scrollSettings = { isFinite: true } as ScrollSettingsModel;
+  readonly numberStyle = { textAlign: 'right' } as CellStyleModel;
+  readonly autoFillSettings = { showFillOptions: false } as AutoFillSettingsModel;
+  private _xAxis: string[];
+  private _series?: string[];
+  private _indices?: string[];
+  private _axes: CubeAxis[];
+  private _cindices: CubeIndex[];
+  private _yrows: { key: any; value: any }[] = [];
+  private _xcolumns: { key: any; value: any }[] = [];
+  private _prepare: Promise<any[]>;
+  private _numberFormat: string;
+  //private readonly _intl: Internationalization = new Internationalization();
+  constructor(
+    private _session: SessionService,
+    private _sb: PromptService,
+    private _service: CubeService,
+    private _translate: TranslateService,
+    private _ds: DatasourceService,
+    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._numberFormat = `${this._cube.currencyCode ? 'c' : 'n'}${this._service.fractionDigits}`
+    if (this._series) {
+      const yName = this._series[0], xName = this._xAxis[0],
+        xAxis = this._cube.axes.find(a => a.name === xName),
+        yAxis = this._cube.axes.find(a => a.name === yName);
+      const promises: Promise<any>[] = [];
+      this.columns = [{
+        width: 120
+      }];
+      // acquire columns source
+      let observe = this._ds.all(xAxis.dataType).toPromise().
+        then(c => {
+          this._xcolumns = c;
+          c.forEach(_ => this.columns.push({
+            width: 90
+          } as ColumnModel
+          ));
+        }) as Promise<any>;
+      promises.push(observe);
+      // acquire rows source
+      observe = this._ds.all(yAxis.dataType).toPromise().
+        then(r => this._yrows = r);
+      promises.push(observe);
+
+      this._prepare = Promise.all(promises);
+    }
+    else {
+      this._axes = this._xAxis.map(c => this._cube.axes.find(a => a.name == c));
+      this.columns = this._axes.map(_ => {
+        return {
+          width: 120
+        } as ColumnModel;
+      });
+      this.columns.push({
+        width: 90
+      } /* value */);
+      this._indices && this._indices.forEach(_ => this.columns.push({
+        width: 90
+      } as ColumnModel
+      ));
+    }
+    if (this._indices) this._cindices = this._cube.indices.filter(i => this._indices.indexOf(i.name) > -1);
+    this.execute();
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['filters'] && !changes['filters'].firstChange)
+      this.execute();
+    else
+      if (changes['height'] || changes['width'])
+        this.resize();
+  }
+  resize() {
+    if (this.spreadsheet) {
+      this.spreadsheet.height = this.height;
+      this.spreadsheet.width = this.width;
+      this.spreadsheet.refresh();
+    }
+  }
+
+  execute() {
+    this.loadingChange.emit(true);
+    if (this._series)
+      this._service.series(this.cube, this._xAxis, { series: this._series, filters: this.filters, indices: this._indices }).
+        subscribe(data => {
+          this._prepare.then(() => {
+            this._dataseries(data);
+            this._draw();
+            this.loadingChange.emit(false);
+          });
+        }, e => {
+          this._sb.error(errResource(e));
+          this.loadingChange.emit(false);
+        });
+    else
+      this._service.table(this._cube.name, this._xAxis, { filters: this.filters, indices: this._indices }).
+        subscribe(data => {
+          this._datatable(data);
+          this._draw();
+          this.loadingChange.emit(false);
+        }, e => {
+          this._sb.error(errResource(e));
+          this.loadingChange.emit(false);
+        });
+  }
+
+  private _datatable(data: { value: number; }[]) {
+    const cells = [], style = { fontWeight: 'bold', textAlign: 'center' } as CellStyleModel;
+    this._axes.forEach(c => cells.push({
+      value: c.title, style
+    } as CellModel));
+    this._cindices?.forEach(i => cells.push({ value: i.title, style } as CellModel));
+    cells.push({
+      value: this.yAxis ? this.yAxis.title : this._translate.get('Value'),
+      style
+    } as CellModel);
+    this.dataSource = [{
+      cells, height: 25
+    } as RowModel];
+    data.forEach(d => {
+      const cells = [];
+      this._xAxis.forEach(c => cells.push({
+        value: d[c],
+      } as CellModel));
+      this._indices?.forEach(i => cells.push({
+        style: this.numberStyle,
+        format: this._numberFormat,
+        value: (d[i] || 0) as any,
+      } as CellModel));
+      cells.push({
+        style: this.numberStyle,
+        format: this._numberFormat,
+        value: (d.value || 0) as any,
+      } as CellModel);
+      this.dataSource.push({ cells, source: d, height: 25 } as RowModel);
+    });
+  }
+
+  private _dataseries(d: Series[]) {
+    const style = { fontWeight: 'bold', textAlign: 'center' } as CellStyleModel;
+    const cells = [{ value: '' } as CellModel];
+    this._xcolumns.forEach(c => cells.push({ value: c.value, style }));
+    this.dataSource = [{ cells, height: 25 }];
+    this._cindices?.forEach(i => {
+      const cells = [{ value: i.title, style } as CellModel], series = d.find(s => s.index === i.name), map = {};
+      if (series) {
+        series.points.forEach(p => map[p.x] = p.y);
+        this._xcolumns.forEach(c => cells.push({
+          value: (map[c.key] || 0) as any,
+          format: this._numberFormat,
+          style: this.numberStyle
+        })
+        );
+        this.dataSource.push({ cells, height: 25 } as RowModel);
+      }
+    });
+    this._yrows.forEach(r => {
+      const cells = [{ value: r.value, style } as CellModel],
+        serie = d.find(s => s.name === r.key), map = {};
+      if (serie) {
+        serie.points.forEach(p => map[p.x] = p.y);
+        this._xcolumns.forEach(c => cells.push({
+          value: (map[c.key] || 0) as any,
+          format: this._numberFormat,
+          style: this.numberStyle
+        })
+        );
+      }
+      else
+        this._xcolumns.forEach(_ => cells.push({ value: 0 as any })
+        );
+      this.dataSource.push({ cells, height: 25 } as RowModel);
+    });
+  }
+
+  private _draw() {
+    this.spreadsheet && this.spreadsheet.destroy();
+    this.spreadsheet = new Spreadsheet({
+      scrollSettings: this.scrollSettings,
+      isProtected: true,
+      allowEditing: false,
+      allowDelete: false,
+      allowInsert: false,
+      showRibbon: false,
+      allowAutoFill: false,
+      autoFillSettings: this.autoFillSettings,
+      enableClipboard: false,
+      enableContextMenu: false,
+      showFormulaBar: false,
+      showSheetTabs: false,
+      enableKeyboardNavigation: true,
+      select: this.select.bind(this),
+      sheets: [{
+        columns: this.columns,
+        frozenColumns: this._series !== undefined ? 1 : 0,
+        frozenRows: 1,
+        rows: this.dataSource,
+      }],
+      width: this.width,
+      height: this.height,
+    }, this._elementRef.nativeElement);
+  }
+  select(evt: SelectEventArgs) {
+    const address = this.spreadsheet.getAddressInfo(evt.range);
+    let [y, x, y1, x1] = address.indices;
+    if (y1 < y) {
+      const range = y;
+      y = y1, y1 = range;
+    }
+    if (x1 < x) {
+      const range = x;
+      x = x1, x1 = range;
+    }
+    const axes: {} = {};
+    let index: string;
+    if (y > this.dataSource.length - 1 || x > this.dataSource[y].cells.length - 1) return;
+    if (y === y1 && x === x1 && this.dataSource[y].cells[x].value as any === 0) return;
+    if (this._series) {
+      if (y < 1) {
+        if (this._indices) return;
+        this._fillx(x, x1, axes);
+      }
+      else if (this._indices && y <= this._indices.length) {
+        index = this._indices[y - 1];
+        this._fillx(x, x1, axes);
+      }
+      else {
+        if (this._indices)
+          this._filly(y - this._indices.length, y1 - this._indices.length, axes);
+        else
+          this._filly(y, y1, axes);
+        if (x > 1)
+          this._fillx(x, x1, axes);
+      }
+    }
+    else {
+      if (y === 0) return;
+      index = this._indices && x >= this._axes.length && x < this._axes.length + this._cindices.length ? this._cindices[x - this._axes.length].name : null;
+      let i = y;
+      do {
+        this._axes.forEach(a => {
+          const key = (this.dataSource[i] as any).source['_' + a.name];
+          if (!axes[a.name])
+            axes[a.name] = key;
+          else if (isString(axes[a.name])) {
+            if (axes[a.name] !== key) axes[a.name] = [axes[a.name], key];
+          }
+          else if ((axes[a.name] as string[]).indexOf(key) < 0) (axes[a.name] as string[]).push(key);
+        });
+        i++;
+      }
+      while (i <= y1);
+    }
+    this.explore.emit({ axes, index });
+  }
+  private _filly(y: number, y1: number, axes: {}) {
+    const yName = this._series[0];
+    let i = y - 1;
+    while (i < y1) {
+      let { key } = this._yrows[i];
+      if (!axes[yName])
+        axes[yName] = key;
+      else if (isString(axes[yName]))
+        axes[yName] = [axes[yName], key];
+      else if ((axes[yName] as string[]).indexOf(key) < 0)
+        (axes[yName] as string[]).push(key);
+      i++;
+    }
+  }
+
+  private _fillx(x: number, x1: number, axes: {}) {
+    const xName = this._xAxis[0];
+    let i = x - 1;
+    while (i < x1) {
+      let { key } = this._xcolumns[i];
+      if (!axes[xName])
+        axes[xName] = key;
+      else if (isString(axes[xName]))
+        axes[xName] = [axes[xName], key];
+      else if ((axes[xName] as string[]).indexOf(key) < 0)
+        (axes[xName] as string[]).push(key);
+      i++;
+    }
+  }
+
+  exportToExcel(title: string) {
+    const { rows } = this.spreadsheet.sheets[0],
+      numberFormat = this._service.numberFormat,
+      book = new Workbook(
+        {
+          worksheets: [
+            {
+              enableRtl: this._session.inverse,
+              name: this._translate.get('SheetN', 1),
+              columns: rows[0].cells.map((_, i) => ({ index: i + 1, width: 150 } as Column)),
+              rows: rows.map((r, i) => (
+                {
+                  index: i + 1,
+                  cells: r.cells.map((c, j) => {
+                    const header = i === 0 || (this._series !== undefined && j === 0),
+                      isnumber = !header && isNumber(c.value);
+                    return {
+                      type: isnumber ? 'number' : 'text',
+                      index: j + 1,
+                      value: c.value,
+                      style: {
+                        numberFormat,
+                        hAlign: isnumber ? 'right' : 'center',
+                        bold: header
+                      }
+                    } as Cell;
+                  }
+                  )
+                } as Row)),
+            } as Worksheet,
+          ],
+        },
+        'xlsx'
+      );
+    book.save(`${title}.xlsx`);
+  }
+  ngOnDestroy(): void {
+    this.spreadsheet && this.spreadsheet.destroy();
+  }
+}
+interface Cell { }

package/src/lib/cube/matrix/_matrix.theme.scss

@@ -0,0 +1,86 @@
+@mixin cube-theme($theme) {
+  $background: mat.get-color-from-palette($theme, background);
+  $foreground: mat.get-color-from-palette($theme, foreground);
+  $primary: mat.get-color-from-palette($theme, primary);
+  $accent: mat.get-color-from-palette($theme, accent);
+  $is-dark-theme: mat.get-color-from-palette($theme, is-dark);
+
+  $active: mat.get-color-from-palette($accent, 400);
+  $border: rgba(0,0,0,.12);
+
+  $header-background: mat.get-color-from-palette($background, card);
+
+  .cube-table {
+    background: transparent !important;
+
+    .figure {
+      text-align: right;
+      direction: ltr;
+      border-left-width: 2px;
+      border-left-style: dotted;
+      border-left-color: transparent;
+    }
+
+    thead {
+      background: $header-background;
+
+      th {
+        text-align: right;
+        border-bottom: 1px solid $border;
+      }
+    }
+
+    tfoot {
+      th, td {
+        font-weight: 500;
+        border-top: 1px solid $border;
+      }
+    }
+
+    .mat-row:hover {
+      background-color: unset
+    }
+
+    .figure, tbody th {
+      border-bottom-width: 2px;
+      border-bottom-style: double;
+      border-bottom-color: transparent;
+    }
+
+    .cube-index td, .cube-index th {
+      border-bottom-width: 2px;
+      border-bottom-color: rgb(0 0 0 / 0.12);
+      border-bottom-style: dotted;
+    }
+
+    .cell-x, .cell-y {
+    }
+
+    .cell-x {
+      border-left-color: $active !important;
+    }
+
+    .cell-y {
+      border-bottom-style: solid !important;
+      border-bottom-color: $active !important;
+    }
+
+    td {
+      /*padding: 3px;*/
+    }
+  }
+
+  [dir=rtl] {
+    .figure {
+      border-right-width: 2px;
+      border-left-width: 0;
+      border-right-style: dotted;
+      border-right-color: transparent;
+    }
+
+    .cell-x {
+      border-left-color: unset;
+      border-right-color: $active;
+    }
+  }
+}

package/src/lib/cube/matrix/matrix.base.ts

@@ -0,0 +1,149 @@
+import { Directive, ViewChild } from '@angular/core';
+import { filter, first, Observable } from 'rxjs';
+import { SessionService } from '../../core/session.service';
+import { DatasourceService } from '../../core/datasource.service';
+import { ACCOUNT_DELIMITER, CubeService, Pattern } from '../cube.service';
+import { AxesMap, Cube, CubeAxis } from '../../core/models';
+import { isArray } from '../../core/functions';
+import { CubeMatrixComponent, SumSettings } from './table.component';
+
+@Directive()
+export abstract class CubeMatrixBase {
+  @ViewChild(CubeMatrixComponent, { static: true }) table: CubeMatrixComponent;
+  seriesTotalLabel?: string;
+  xAxisTotalLabel?: string;
+  indexAt?: 'series' | 'xAxis';
+  placeAt?: 'leading' | 'trailing';
+  loading: boolean;
+  private _axes: AxesMap;
+  private _originalAxes: AxesMap;
+  public set originalAxes(value: AxesMap) {
+    this._originalAxes = { ...value };
+  }
+  public get originalAxes(): AxesMap {
+    return this._originalAxes;
+  }
+  public get axes(): AxesMap {
+    return this._axes;
+  }
+  public set axes(value: AxesMap) {
+    this._axes = value;
+    this.filters?.forEach(f =>
+      this.values[f.name] = value[f.name]
+    );
+  }
+  title: string;
+
+  readonly sources: { [axis: string]: Observable<{ key: string; value: any; }[]>; } = {};
+  /** filters */
+  readonly values: AxesMap = {};
+  filters: CubeAxis[];
+  patterns: Pattern[];
+  pattern: Pattern;
+  indices?: string | string[];
+  xAxis: string;
+  series: string;
+  private _cube: string;
+  public get cube(): string {
+    return this._cube;
+  }
+  public set cube(value: string) {
+    this.configuration = this._session.profile.cubes.find(c => c.name === value);
+    if (!this.configuration) {
+      this.configuration = this._session.profile.cubes[0];
+      value = this.configuration.name;
+    }
+    this._service.patterns(value).
+      subscribe(p =>
+        this.patterns = p);
+    this._cube = value;
+  }
+  sum?: SumSettings | SumSettings[];
+  /** one or more axis */
+  protected aggregation?: string[] | string;
+  private _selection: string | string[];
+  protected get selection(): string | string[] {
+    return this._selection;
+  }
+  protected set selection(value: string | string[]) {
+    /** one or more axis */
+    this.filters = this.configuration.axes.filter(a => isArray(value) ?
+      value.indexOf(a.name) > -1 :
+      a.name === value);
+
+    this.filters.forEach(f => this.sources[f.name] = this._ds.all(f.dataType));
+    this._selection = value;
+  }
+  configuration: Cube;
+  constructor(
+    protected _service: CubeService,
+    private _ds: DatasourceService,
+    protected _session: SessionService) { }
+  private _populate() {
+    const axes = { ...this._originalAxes };
+    if (this.aggregation)
+      (isArray(this.aggregation) ? this.aggregation : [this.aggregation as string]).
+        forEach(g => {
+          if (axes[g])
+            delete axes[g];
+        });
+    this.axes = axes;
+    this._listen().then(() => {
+      const combination = this._combine(axes);
+      this.title = combination.join(ACCOUNT_DELIMITER);
+    });
+  }
+  /**
+   *
+   * @param axes
+   */
+  private _combine(axes: AxesMap): (string | number)[] {
+    return this.configuration.axes.
+      filter(a => a.combination).
+      map(a => axes[a.name] as string | number);
+  }
+  /**
+ *
+ * @param value
+ */
+  filter(name: string, value: string | number, title: string) {
+    const axes = { ...this.axes };
+    axes[name] = value;
+    this.onFilter(axes);
+    this._listen().then(() =>
+      this.values[name] = value
+    );
+  }
+  private _listen() {
+    return this.table.loadingChange.pipe(filter(ok => !ok), first()).toPromise()
+  }
+
+  onFilter(axes: AxesMap) {
+    this.axes = axes;
+  }
+  /**
+    *
+    * @param pattern
+    */
+  aggregate(pattern: Pattern) {
+    const axes = { ...pattern.axes };
+    this._service.base(this.cube, axes, this.originalAxes);
+    this.axes = { ...axes, ...this.values };
+    this._listen().then(() => {
+      this.title = pattern.title;
+      this.pattern = pattern;
+    });
+  }
+
+  reset() {
+    this._populate();
+    this._listen().then(() => {
+      this.pattern = null;
+      this.title = null;
+    });
+  }
+
+  refresh() {
+    this.axes = { ...this.axes };
+  }
+}

package/src/lib/cube/matrix/matrix.mobile.component.html

@@ -0,0 +1,28 @@
+<mat-toolbar class="nav-toolbar">
+  <button mat-icon-button (click)="table.refresh()" [bizdocTooltip]="'Refresh' | translate"><mat-icon matAnimate="rotate">autorenew</mat-icon></button>
+  <span class="divider"></span>
+  <button mat-icon-button [matMenuTriggerFor]="options" *ngIf="patterns && patterns.length"><mat-icon [class.filled]="pattern">filter_alt</mat-icon></button>
+  <mat-menu #options xPosition="before">
+    <!-- patterns -->
+    <button mat-menu-item *ngFor="let p of patterns" (click)="aggregate(p)">{{p.title}}</button>
+  </mat-menu>
+  <button mat-icon-button (click)="reset()" [disabled]="!pattern" [bizdocTooltip]="'Clear' | translate">
+    <mat-icon>clear_all</mat-icon>
+  </button>
+  <!-- filters -->
+  <ng-container *ngFor="let f of filters">
+    <button mat-button [matMenuTriggerFor]="fmenu">{{values[f.name]| typeValue : f.dataType | async}} <mat-icon>arrow_drop_down</mat-icon></button>
+    <mat-menu #fmenu xPosition="before">
+      <button mat-menu-item *ngFor="let kv of sources[f.name] | async"
+              (click)="filter(f.name, kv.key, kv.value)">
+        {{kv.value}}
+      </button>
+    </mat-menu>
+  </ng-container>
+</mat-toolbar>
+<mat-progress-bar mode="query" [style.visibility]="loading ? 'visible':'hidden'"></mat-progress-bar>
+<bizdoc-cube-matrix [cube]="cube" [xAxis]="xAxis" [series]="series" [indices]="indices" [sum]=sum
+                        [filters]="axes"
+                    [xAxisTotalLabel]="xAxisTotalLabel"
+                    [seriesTotalLabel]="seriesTotalLabel"
+                        (loadingChange)="loading=$event" (explore)='explore($event)'></bizdoc-cube-matrix>

package/src/lib/cube/matrix/matrix.mobile.component.ts

@@ -0,0 +1,60 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { SessionService } from '../../core/session.service';
+import { DatasourceService } from '../../core/datasource.service';
+import { CubeService } from '../cube.service';
+import { AxesMap } from '../../core/models';
+import { WindowTitleService } from '../../core/window-title.service';
+import { CubeMatrixBase } from './matrix.base';
+import { AxisClickEvent } from '../declarations';
+
+@Component({
+  templateUrl: './matrix.mobile.component.html',
+  styleUrls: ['./matrix.pane.component.scss']
+})
+export class CubeMatrixMobileComponent extends CubeMatrixBase implements OnInit {
+  /** cube-info ctor */
+  constructor(
+    private _title: WindowTitleService,
+    private _route: ActivatedRoute,
+    private _router: Router,
+    service: CubeService,
+    ds: DatasourceService,
+    session: SessionService) {
+
+    super(service, ds, session);
+  }
+
+  ngOnInit(): void {
+    this._route.params.subscribe(p => {
+      this.cube = p['id'];
+      this.xAxis = p['xAxis'];
+      this.series = p['series'];
+      this._title.set(this.configuration.title);
+    }
+    );
+    this._route.data.subscribe(d => {
+      this.indices = d['indices'];
+      /** */
+      this.aggregation = d['aggregate'];
+      this.sum = d['sum'];
+      this.selection = d['filters'];
+      this.seriesTotalLabel = d['available'];
+    });
+    this._route.queryParams.subscribe(p =>
+      this.originalAxes =
+      this.axes = p);
+  }
+
+  onFilter(axes: AxesMap) {
+    this._router.navigate([], { queryParams: axes });
+  }
+
+  explore(evt: AxisClickEvent) {
+    const { axes: queryParams, index } = evt;
+    this._router.navigate(['cube', this.cube, 'explore'], {
+      queryParams,
+      state: { index }
+    });
+  }
+}