@bizdoc/core 1.8.5 → 1.8.9

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

@@ -0,0 +1,220 @@
+import { EventEmitter, Component, Output, Inject, 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, Dimentions, YAxis } 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";
+
+Grid.Inject(Selection, Aggregate, Freeze, ExcelExport, Resize);
+
+@Component({
+  selector: 'bizdoc-cube-grid',
+  template: '',
+  styles: ['::ng-deep .e-rowcell:not(.e-headertext) { cursor: pointer }',
+    '::ng-deep .e-grid td.e-cellselectionbackground { background-color: none }',
+    `
+.nowrap {
+  white-space: nowrap;
+  word-wrap: normal;
+}`],
+  host: {
+    class: 'cube-view'
+  }
+})
+export class CubeGridComponent implements OnInit, OnChanges, CubeViewerComponent, OnDestroy {
+  @Input()
+  width: string;
+  @Input()
+  height: string;
+  @Input()
+  cube: string;
+  @Input()
+  xAxis: string[];
+  @Input()
+  yAxis?: YAxis;
+  @Input()
+  series?: string[];
+  @Input()
+  indices?: string[];
+  @Input()
+  filters?: AxesMap;
+  @Input()
+  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 _rows: { key: any; value: any }[] = [];
+  private _columns: { key: any; value: any }[] = [];
+  private _preparations: Promise<any>;
+  constructor(
+    private _session: SessionService,
+    private _sb: PromptService,
+    private _ds: DatasourceService,
+    private _service: CubeService,
+    private _elementRef: ElementRef) { }
+  ngOnInit(): void {
+    const cube = this._session.profile.cubes.find(c => c.name === this.cube);
+    const x = cube.axes.find(a => a.name === this.xAxis[0]),
+      y = 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));
+    promises.push(observe);
+    // aquire rows source
+    observe = this._ds.all(y.dataType).
+      pipe(tap(r => this._rows = r));
+    promises.push(observe);
+    // prepare
+    this._preparations =
+      forkJoin(promises).toPromise().
+        then(() =>
+          this._prepare());
+  }
+  /** */
+  private _prepare() {
+    const format = `${this.currencyCode ? 'c' : 'n'}${this._service.fractionDigits}`;
+    this.columns = [{ headerText: '', field: 'title' } as ColumnModel].concat(this._columns.map(c => {
+      return {
+        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;
+      })
+    }];
+  }
+  /** */
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['filters'])
+      this.execute();
+    else
+      if (changes['height'])
+        this.resize();
+  }
+  private execute() {
+    this.loadingChange.emit(true);
+    this._service.series(this.cube, this.xAxis, { series: this.series, filters: this.filters, indices: this.indices }).
+      subscribe(series => {
+        this._preparations.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 === 401 ? '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,268 @@
+import { EventEmitter, Component, Output, Inject, OnInit, HostBinding, ElementRef, OnDestroy, Input, SimpleChanges, OnChanges } from "@angular/core";
+import { HttpResponse } from "@angular/common/http";
+import { AfterHyperlinkArgs, CellModel, ColumnModel, RowModel, Spreadsheet, CellStyleModel } from "@syncfusion/ej2-angular-spreadsheet";
+import { Internationalization, NumberFormatOptions } from "@syncfusion/ej2-base";
+import * as XLSX from 'xlsx';
+import { AxisClickEvent, CubeViewerComponent } from "../declarations";
+import { AxesMap, Cube, CubeAxis, CubeIndex, Dimentions, YAxis } from "../../core/models";
+import { CubeService } 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";
+
+@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;
+  @Input()
+  xAxis: string[];
+  @Input()
+  yAxis?: YAxis;
+  @Input()
+  series?: string[];
+  @Input()
+  indices?: string[];
+  @Input()
+  filters?: AxesMap;
+  @Input()
+  currencyCode: string;
+  @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[];
+  private _axes: CubeAxis[];
+  private _indices: CubeIndex[];
+  private _yrows: { key: any; value: any }[] = [];
+  private _xcolumns: { key: any; value: any }[] = [];
+  private _promises: Promise<any[]>;
+  private _cube: Cube;
+  private readonly _intl: Internationalization = new Internationalization();
+  private _numberFormat: string;
+  constructor(
+    private _session: SessionService,
+    private _sb: PromptService,
+    private _service: CubeService,
+    private _translate: TranslateService,
+    private _ds: DatasourceService,
+    private _elementRef: ElementRef) { }
+  ngOnInit(): void {
+    this._numberFormat = this._intl.getNumberPattern({
+      currency: this.currencyCode,
+      format: this.currencyCode ? 'c' : 'n',
+      useGrouping: true,
+      maximumFractionDigits: this._service.fractionDigits,
+      minimumFractionDigits: this._service.fractionDigits
+    } as NumberFormatOptions)
+
+    this._cube = this._session.profile.cubes.find(c => c.name === this.cube);
+    if (!this.series) {
+      this._axes = this.xAxis.map(c => this._cube.axes.find(a => a.name == c));
+      if (this.indices) this._indices = this._cube.indices.filter(i => this.indices.indexOf(i.name) > -1);
+      this.columns = this._axes.map(_ => {
+        return {
+          //width: 125
+        } as ColumnModel;
+      });
+      this.columns.push({
+        width: 90
+      } /* value */);
+      this.indices && this.indices.forEach(_ => this.columns.push({
+        width: 90
+      } as ColumnModel
+      ));
+    }
+    else {
+      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: Promise<any>[] = [];
+      this.columns = [{} /* y */];
+      // aquire columns source
+      let observe = this._ds.all(x.dataType).toPromise().
+        then(c => {
+          this._xcolumns = c;
+          this.columns = c.map(_ => {
+            return {
+              width: 90
+            } as ColumnModel;
+          });
+        }) as Promise<any>;
+      promises.push(observe);
+      // aquire rows source
+      observe = this._ds.all(y.dataType).toPromise().
+        then(r => this._yrows = r);
+      promises.push(observe);
+
+
+      this._promises = Promise.all(promises);
+    }
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['filters'])
+      this.execute();
+    else
+      if (changes['height'])
+        if (this.spreadsheet) {
+          this.spreadsheet.height = this.height;
+          this.spreadsheet.refresh();
+        }
+  }
+  private execute() {
+    this.loadingChange.emit(true);
+    const numberStyle = { textAlign: 'right' } as CellStyleModel;
+    if (!this.series)
+      this._service.table(this.cube, this.xAxis, { filters: this.filters, indices: this.indices }).
+        subscribe(data => {
+          const cells = [],
+            style = { fontWeight: 'bold', textAlign: 'center' } as CellStyleModel;
+          this._axes.forEach(c => cells.push({
+            value: c.title, style
+          } as CellModel));
+          this._indices && this._indices.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
+          } as RowModel];
+          data.forEach(d => {
+            const cells = [];
+            this.xAxis.forEach(c => cells.push({
+              value: d[c],
+            } as CellModel));
+            this.indices && this.indices.forEach(i => cells.push({
+              style: numberStyle,
+              format: this._numberFormat,
+              value: (d[i] || 0).toString(),
+            } as CellModel));
+            cells.push({
+              style: numberStyle,
+              format: this._numberFormat,
+              value: (d.value || 0).toString(),
+            } as CellModel);
+            this.dataSource.push({ cells } as RowModel);
+          });
+          this._draw();
+          this.loadingChange.emit(false);
+        }, (e: HttpResponse<any>) => {
+          this._sb.error(e.status === 401 ? 'Unauthorized' : null);
+          this.loadingChange.emit(false);
+        });
+    else this._service.series(this.cube, this.xAxis, { series: this.series, filters: this.filters }).
+      subscribe(d => {
+        this._promises.then(() => {
+          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 }];
+
+          this.indices && this._cube.indices.filter(i => this.indices.indexOf(i.name) > 0).
+            forEach(i => {
+              const cells = [{ value: i.title, style } as CellModel],
+                serie = d.find(s => s.index === i.name), map = {};
+              if (serie) {
+                serie.points.forEach(p => map[p.x] = p.y);
+                this._xcolumns.forEach(c =>
+                  cells.push({
+                    value: (map[c.key] || 0).toString(),
+                    format: this._numberFormat,
+                    style: numberStyle
+                  })
+                );
+                this.dataSource.push({ cells } 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).toString(),
+                  format: this._numberFormat,
+                  style: numberStyle
+                })
+              );
+            }
+            else
+              this._xcolumns.forEach(_ =>
+                cells.push({ value: '0' })
+              );
+            this.dataSource.push({ cells } as RowModel);
+          });
+          this._draw();
+          this.loadingChange.emit(false);
+        });
+      }, (e: HttpResponse<any>) => {
+        this._sb.error(e.status === 401 ? 'Unauthorized' : null);
+        this.loadingChange.emit(false);
+      });
+  }
+
+  private _draw() {
+    this.spreadsheet && this.spreadsheet.destroy();
+    this.spreadsheet = new Spreadsheet({
+      isProtected: true,
+      allowEditing: false,
+      allowDelete: false,
+      allowInsert: false,
+      allowSave: true,
+      showRibbon: false,
+      showFormulaBar: false,
+      showSheetTabs: false,
+      sheets: [{
+        columns: this.columns,
+        frozenColumns: this.series !== undefined ? 1 : 0,
+        frozenRows: 1,
+        rows: this.dataSource,
+      }],
+      //width: this.width,
+      height: this.height,
+      afterHyperlinkClick: this.afterHyperlinkClick.bind(this),
+    }, this._elementRef.nativeElement);
+  }
+  afterHyperlinkClick(evt: AfterHyperlinkArgs) {
+    ;
+    if (evt.cell === '0') return;
+    const { hyperlink } = evt;
+    if (hyperlink === '0') {
+      return;
+    }
+    const column = this._axes[parseInt(hyperlink as string)].name;
+    const axes: {} = {};
+    axes[this.xAxis[0]] = column;
+    //if (type !== 'Index') axes[series[0]] = row;
+    //this.explore.emit({ axes, index: type === 'Index' ? row : null });
+  }
+  exportToExcel(title: string) {
+    const wb = XLSX.utils.book_new();
+
+    const rows = this.spreadsheet.sheets[0].rows.map(r => r.cells.map(c => c.value));
+    const ws = XLSX.utils.aoa_to_sheet(rows);
+
+    const name = this._translate.get('SheetN', 1);
+    wb.Sheets[name] = ws;
+    wb.SheetNames.push(name);
+
+    XLSX.writeFile(wb, `${title}.xlsx`);
+  }
+  ngOnDestroy(): void {
+    this.spreadsheet && this.spreadsheet.destroy();
+  }
+}

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

@@ -0,0 +1,77 @@
+@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-color($accent, 400);
+  $border: rgba(0,0,0,.12);
+
+  .cube-table {
+    .figure {
+      text-align: right;
+      direction: ltr;
+      border-left-width: 2px;
+      border-left-style: dotted;
+      border-left-color: transparent;
+    }
+
+    thead {
+      th {
+        border-bottom: 1px solid $border;
+      }
+    }
+
+    tfoot {
+      th, td {
+        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:last-child td, .cube-index:last-child th {
+      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;
+    }
+  }
+}