@bizdoc/core 1.13.11 → 1.13.12

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 { 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 } 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: HttpResponse<any>) => {
+        this._sb.error(e.status === 406 ? 'Unauthorized' : null);
+        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;
+}

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

@@ -0,0 +1,380 @@
+import { EventEmitter, Component, Output, OnInit, HostBinding, ElementRef, OnDestroy, Input, SimpleChanges, OnChanges } from "@angular/core";
+import { 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, 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: HttpResponse<any>) => {
+          this._sb.error(e.status === 406 ? 'Unauthorized' : null);
+          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: HttpResponse<any>) => {
+          this._sb.error(e.status === 406 ? 'Unauthorized' : null);
+          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,
+      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 + 1) {
+        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: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $is-dark-theme: map-get($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;
+    }
+  }
+}