@bizdoc/core 1.14.8 → 1.14.9

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

@@ -0,0 +1,517 @@
+import { Component, ElementRef, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { formatCurrency, formatPercent, formatNumber, getCurrencySymbol } from '@angular/common';
+import { HttpErrorResponse } from '@angular/common/http';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Workbook, Worksheet, Row, Column } from '@syncfusion/ej2-excel-export';
+import { forkJoin } from 'rxjs';
+import { tap } from 'rxjs/operators';
+import { isArray, isFunction } from '../../core/functions';
+import { CubeService, errResource, Series } from '../cube.service';
+import { SessionService } from '../../core/session.service';
+import { DatasourceService } from '../../core/datasource.service';
+import { PromptService } from '../../core/prompt.service';
+import { AxesMap, AxisType, Cube, CubeAxis, CubeIndex } from '../../core/models';
+import { matrixAnimation } from '../../core/animations';
+import { ScopeType } from '../../core/configuration';
+import { TranslateService } from '../../core/translate.service';
+import { AxisClickEvent } from '../declarations';
+
+const LOADING_DELAY = 200, SUM_PREFIX = '_sum';
+
+/** cube matrix component*/
+@Component({
+  selector: 'bizdoc-cube-matrix',
+  templateUrl: './table.component.html',
+  styleUrls: ['./table.component.scss'],
+  animations: [matrixAnimation]
+})
+export class CubeMatrixComponent implements OnChanges {
+  readonly PRECISION = this._service.digitsInfo;
+  readonly LANGUAGE = this._session.language;
+  CURRENCY: string;
+  SYMBOL: string;
+  @ViewChild('table') tableElement: ElementRef<HTMLTableElement>;
+  @Input() seriesTotalLabel: string;
+  @Input() xAxisTotalLabel: string;
+  @Input('cube') _cube?: string;
+  @Input('xAxis') _xAxis!: string;
+  @Input('series') _series!: string;
+  @Input('indices')
+  _indices?: string[] | string;
+  @Input()
+  indexAt: 'series' | 'xAxis' = 'series';
+  @Input()
+  placeAt: 'leading' | 'trailing' = 'leading';
+  @Input() scope: ScopeType;
+  private _sum: SumSettings[];
+  @Input() set sum(val: SumSettings | SumSettings[]) {
+    if (val) this._sum = (isArray(val) ? val : [val]).
+      map(sum => {
+        let value;
+        if (sum.value)
+          value = sum.value.toString();
+        else if (sum.calculate)
+          switch (sum.calculate) {
+            case 'month':
+              value = 'M' + ('0' + (new Date().getMonth() + 1).toString()).slice(-2);
+              break;
+            case 'year':
+              value = new Date().getFullYear().toString();
+              break;
+            case 'quarter':
+              value = Math.ceil((new Date().getMonth() + 1) / 3).toString();
+              break;
+            case 'accumulate':
+              value = '~';
+          }
+        return {
+          ...sum,
+          value
+        };
+      });
+  }
+  @Input() filters: AxesMap;
+  private _interactive: boolean = true;
+  @Input() loading: boolean;
+  public get interactive(): boolean {
+    return this._interactive;
+  }
+  @Input()
+  public set interactive(value: boolean) {
+    this._interactive = coerceBooleanProperty(value);
+  }
+  @Output('explore') readonly onExplore = new EventEmitter<AxisClickEvent>();
+  @Output() readonly loadingChange = new EventEmitter<boolean>();
+  rows: HeaderInfo[];
+  columns: HeaderInfo[];
+  indices: CubeIndex[] = [];
+  data: { [series: string]: { [xAxis: string]: string; }; };
+  totals: { [xAxis: string]: number };
+  cube: Cube;
+  xAxis: CubeAxis;
+  series: CubeAxis;
+  private _data: DataMap;
+  private _prepare: Promise<any>;
+  constructor(
+    private _sb: PromptService,
+    private _service: CubeService,
+    private _session: SessionService,
+    private _translate: TranslateService,
+    private _ds: DatasourceService) {
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['_cube']) {
+      this.cube = this._session.profile.cubes.find(c => c.name === this._cube);
+      this.CURRENCY = this.cube.currencyCode /*|| this._service.currencyCode*/;
+      this.SYMBOL = getCurrencySymbol(this.CURRENCY, 'narrow');
+    }
+    if (!this.cube) {
+      this.cube = this._session.profile.cubes[0];
+      this.CURRENCY = this.cube.currencyCode /*|| this._service.currencyCode*/;
+      this.SYMBOL = getCurrencySymbol(this.CURRENCY, 'narrow');
+    }
+    if (changes['_indices'] && this._indices)
+      this.indices = this.cube.indices.filter(i => isArray(this._indices) ? this._indices.indexOf(i.name) > -1 : this._indices === i.name);
+    if (changes['_xAxis'] || changes['_series']) {
+      this.xAxis = this.cube.axes.find(a => a.name === this._xAxis);
+      this.series = this.cube.axes.find(a => a.name === this._series);
+      this.data = null;
+      this._prepare = forkJoin(this._ds.all(this.series.dataType).pipe(tap(r =>
+        this.rows = r
+      )),
+        this._ds.all(this.xAxis.dataType).pipe(tap(c =>
+          this.columns = c
+        ))).toPromise().then(
+          () => {
+            this._indices && this._addindices();
+            this._sum && this._addsumheaders();
+          });
+      this.refresh();
+    }
+    else if (changes['filters'])
+      this.refresh();
+  }
+  private _addindices() {
+    const collection = this.indexAt === 'xAxis' ? this.columns : this.rows;
+    this.indices.forEach((x, i) => {
+      const header = {
+        key: x.name,
+        value: x.title,
+        index: x,
+        accumulate: x.accumulate
+      } as HeaderInfo;
+      if (this.placeAt === 'trailing')
+        collection.push(header);
+      else
+        collection.splice(i, 0, header);
+    })
+  }
+  private _addsumheaders() {
+    this._sum.forEach((s, i) => {
+      let { value, axis } = s;
+      const header = {
+        key: SUM_PREFIX + i,
+        value: s.title,
+        accumulate: !isFunction(s.calculate) && s.calculate !== 'accumulate',
+        explorable: !isFunction(s.calculate) && s.explorable !== false,
+        precision: s.precision,
+        sum: s
+      } as HeaderInfo;
+      let j = 0;
+      if (axis === 'xAxis') {
+        while (j < this.columns.length) {
+          if (this.columns[j].key === value) {
+            this.columns.splice(j + 1, 0, header);
+            break;
+          }
+          j++;
+        }
+        if (j === this.columns.length)
+          this.columns.push(header);
+      }
+      else {
+        while (j < this.rows.length) {
+          if (this.rows[j].key === value) {
+            this.rows.splice(j + 1, 0, header);
+            break;
+          }
+          j++;
+        }
+        if (j === this.rows.length)
+          this.rows.push(header);
+      }
+    });
+  }
+
+  refresh() {
+    const progressTask = setTimeout(() =>
+      this.loadingChange.next(this.loading = true)
+      , LOADING_DELAY);
+    this._prepare.then(() =>
+      this._service.series(this.cube.name, this._xAxis, {
+        series: this._series,
+        indices: this._indices,
+        filters: this.filters,
+        inverseIndices: this.indexAt === 'xAxis',
+        scope: this.scope
+      }).subscribe(r => {
+        const data = this._serialize(r);
+        this._clone(data);
+        this._sum && this._calculatesum(data);
+        this._totals(data);
+        this._stringify(data);
+        this.data = data as any;
+        clearTimeout(progressTask);
+        this.loadingChange.next(this.loading = false);
+      },
+        (e: HttpErrorResponse) => {
+          this._sb.error(errResource(e));
+          clearTimeout(progressTask);
+          this.loadingChange.next(this.loading = false);
+          this.loadingChange.error(e);
+        })
+    );
+  }
+  private _serialize(series: Series[]) {
+    const d = {};
+    series.forEach(s => {
+      if (s.index) {
+        if (this.indexAt === 'xAxis')
+          s.points.forEach(p => {
+            let row = d[p.x];
+            if (!row)
+              row = d[p.x] = {};
+            row[s.index] = p.y;
+          });
+        else {
+          const row = d[s.index] = {};
+          s.points.forEach(p => row[p.x] = p.y);
+        }
+
+      }
+      else {
+        const row = d[s.name] = {};
+        s.points.forEach(p => row[p.x] = p.y);
+      }
+    });
+    return d;
+  }
+
+  private _clone(data) {
+    this._data = {};
+    this.rows.forEach(r => {
+      const key = r.key;
+      if (!data[key]) data[key] = {};
+      Object.assign(this._data[key] = {}, data[key]);
+    });
+  }
+  private _totals(data: DataMap) {
+    let grand = 0;
+    this.rows.forEach(r => {
+      const datarow = data[r.key];
+      if (datarow) {
+        let columnTotal = 0;
+        this.columns.forEach(c => {
+          if (c.accumulate === false || c.sum !== undefined) return;
+          let val = datarow[c.key];
+          if (val !== undefined)
+            columnTotal += this.indices.length === 0 || this.indexAt !== 'xAxis' ||
+              c.index !== undefined ? val : -val;
+        });
+        datarow['_total'] = this._format(columnTotal, r);
+        if (!r.sum)
+          grand += this.indices.length === 0 ||
+            this.indexAt === 'xAxis' ||
+            r.index !== undefined ? columnTotal : -columnTotal;
+      }
+      else
+        data[r.key] = {
+          '_total': '0' as any
+        };
+    });
+    const totals = data['_total'] = this.totals = {};
+    totals['_grand'] = this._format(grand);
+    this.columns.forEach(c => {
+      let rowTotal = 0;
+      this.rows.forEach(row => {
+        if (row.accumulate === false || row.sum !== undefined) return;
+        const val = data[row.key][c.key];
+        if (val !== undefined)
+          rowTotal += this.indices.length === 0 || this.indexAt === 'xAxis' ||
+            row.index !== undefined ? val : -val;
+      });
+      totals[c.key] = this._format(rowTotal, c);
+    });
+  }
+  private _calculatesum(data: DataMap) {
+    this._sum.forEach((s, i) => {
+      const { axis, value, calculate } = s;
+      const name = SUM_PREFIX + i;
+      if (axis === 'xAxis') {
+        this.rows.forEach(r => {
+          if (r.accumulate === false) return;
+          const datarow = data[r.key];
+          if (!datarow)
+            return;
+          let sum = 0;
+          for (let column of this.columns) {
+            if (column.index) continue;
+            let key = column.key;
+            if (column.sum) continue;
+            if (isFunction(calculate)) {
+              let val = (calculate as CalculateFn)(r.key, this._data);
+              if (val !== undefined && val !== null)
+                sum += val;
+            }
+            else {
+              let val = datarow[key];
+              if (val !== undefined)
+                sum += val;
+              if (key === value)
+                break;
+            }
+          }
+          datarow[name] = sum;
+        });
+      }
+      else {
+        let datarow = data[name] = {};
+        this.columns.forEach(column => {
+          let sum = 0;
+          for (let row of this.rows) {
+            if (row.index) continue;
+            let key = row.key;
+            if (isFunction(calculate)) {
+              let val = (calculate as CalculateFn)(row.key, this._data);
+              if (val !== undefined && val !== null)
+                sum += val;
+            }
+            else {
+              let datarow = data[key];
+              if (!datarow) continue;
+              if (column.sum) {
+                let val = datarow[column.key];
+                if (val != undefined) sum += val;
+              }
+              else {
+                let val = datarow[column.key];
+                if (val !== undefined)
+                  sum += val;
+              }
+              if (key === value)
+                break;
+            }
+          }
+          datarow[column.key] = sum;
+        });
+      }
+    });
+  }
+  private _stringify(data: DataMap) {
+    this.columns.forEach(c => {
+      this.rows.forEach(r => {
+        const xAxis = r.key, series = c.key;
+        if (c.sum) data[xAxis][series] = this._format(data[xAxis][series], c.sum);
+        else if (r.sum) data[xAxis][series] = this._format(data[xAxis][series], r.sum);
+        else data[xAxis][series] =
+          formatNumber(data[xAxis][series] || 0, this.LANGUAGE, this.PRECISION) as any;
+      });
+    });
+  }
+  private _format(val, options?: { format?: string, precision?: string }): any {
+    if (val === 0) return '0';
+    if (options) {
+      if (options.format === 'percent')
+        return formatPercent(val, this.LANGUAGE, options.precision || this.PRECISION);
+      else if (options.format === 'currency')
+        return formatCurrency(val, this.LANGUAGE, this.SYMBOL, this.CURRENCY, options.precision || this.PRECISION);
+    }
+    if (this.CURRENCY)
+      return formatCurrency(val, this.LANGUAGE, this.SYMBOL, this.CURRENCY, this.PRECISION);
+    else
+      return formatNumber(val, this.LANGUAGE, this.PRECISION);
+  }
+  explore(column: HeaderInfo, row: HeaderInfo) {
+    if (!this.interactive || column.explorable === false || row.explorable === false) return;
+    let x: AxisType, series: AxisType, index;
+    const axes = { ...this.filters } as AxesMap;
+    if (!column.sum)
+      x = column.key;
+    else {
+      let { value, calculate } = column.sum;
+      if (isFunction(calculate)) return;
+      x = [] as string[];
+      for (let column of this.columns) {
+        if (column.sum)
+          continue;
+        let key = column.key;
+        x.push(key);
+        if (key === value)
+          break;
+      }
+    }
+    axes[this.xAxis.name] = x;
+    if (row.index)
+      index = row.index.name;
+    else {
+      if (row.sum) {
+        let { value, calculate } = row.sum;
+        if (isFunction(calculate)) return;
+        series = [] as string[];
+        for (let row of this.rows) {
+          if (row.sum)
+            continue;
+          let key = row.key;
+          series.push(key);
+          if (key === value)
+            break;
+        }
+      }
+      else
+        series = row.key;
+      axes[this.series.name] = series;
+      index = null;
+    }
+    this.onExplore.emit({ axes, index });
+  }
+  export() {
+    const numberFormat = this._service.numberFormat,
+      columns = this.columns.filter(c => !c.sum),
+      cells = [] as Cell[],
+      rows = [{ index: 1, cells }];
+    columns.forEach((c, j) => cells.push({
+      index: j + 2,
+      value: c.value, style: { bold: true }
+    }));
+
+    this.rows.filter(r => !r.sum).forEach((r, i) => {
+      const data = this._data[r.key],
+        cells = [{ index: 1, value: r.value, style: { bold: true } }] as Cell[];
+      columns.forEach((c, j) => cells.push({
+        type: 'number',
+        index: j + 2,
+        value: data && data[c.key] !== undefined ? data[c.key] : 0,
+        style: {
+          numberFormat,
+          hAlign: 'right',
+        }
+      } as Cell));
+      rows.push({
+        index: i + 2,
+        cells
+      } as Row);
+    });
+    const book = new Workbook(
+      {
+        worksheets: [
+          {
+            enableRtl: this._session.inverse,
+            name: this._translate.get('SheetN', 1),
+            columns: columns.map((_, i) => ({ index: i + 1, width: 150 } as Column)),
+            rows,
+          } as Worksheet,
+        ],
+      },
+      'xlsx'
+    );
+    this._service.nameOf(this.filters, this.cube.name).subscribe(n =>
+      book.save(`${n || this._translate.get('Matrix')}.xlsx`));
+  }
+  _move(x, y) {
+    let rowIndex = 0;
+    for (let b = 0; b < this.tableElement.nativeElement.tBodies.length; b++) {
+      let tBody = this.tableElement.nativeElement.tBodies.item(b);
+      for (let r = 0; r < tBody.rows.length; r++) {
+        let row = tBody.rows.item(r);
+        for (let c = 0; c < row.cells.length; c++) {
+          let cell = row.cells.item(c);
+          if (c === x)
+            cell.classList.add('cell-x');
+          else
+            cell.classList.remove('cell-x');
+          if (rowIndex === y)
+            cell.classList.add('cell-y');
+          else
+            cell.classList.remove('cell-y');
+        }
+        rowIndex++;
+      }
+      let tFoot = this.tableElement.nativeElement.tFoot, row = tFoot.rows[0];
+      for (let c = 0; c < row.cells.length; c++) {
+        let cell = row.cells.item(c);
+        if (c === x)
+          cell.classList.add('cell-x');
+        else
+          cell.classList.remove('cell-x');
+      }
+    }
+  }
+}
+type DataMap = { [series: string]: { [xAxis: string]: number; }; };
+
+export type SumSettings = {
+  value?: string | number;
+  axis: 'series' | 'xAxis';
+  title: string;
+  format?: 'percent' | 'currency' | 'number';
+  precision?: string;
+  accumulate?: boolean;
+  explorable?: boolean;
+  calculate?: 'quarter' | 'year' | 'month' | 'accumulate' | CalculateFn;
+}
+
+export declare interface CalculateFn {
+  (value: string, data: { [series: string]: { [xAxis: string]: number; }; }): number;
+}
+
+type HeaderInfo = {
+  key: string;
+  value: any;
+  precision?: string;
+  explorable?: boolean;
+  accumulate?: boolean;
+  sum?: SumSettings;
+  index?: CubeIndex;
+};
+interface Cell { }

package/src/lib/cube/parallel/item.ts

@@ -0,0 +1,47 @@
+import { SparklineBorderModel, SparklineMarkerSettingsModel, SparklineTooltipSettingsModel, SparklineType } from '@syncfusion/ej2-angular-charts';
+import { Series } from '../../cube/cube.service';
+import { FONT_FAMILY } from '../../core/colors';
+
+/** */
+export class Item {
+  readonly markerSettings: SparklineMarkerSettingsModel;
+  readonly tooltipSettings: SparklineTooltipSettingsModel = {
+    visible: true,
+    border: { width: 0 },
+    format: '${name} : ${y}',
+    trackLineSettings: {},
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly border: SparklineBorderModel;
+  constructor(
+    public chartType: SparklineType,
+    public data: Series,
+    public palette: string[],
+    public fill: string
+  ) {
+    switch (chartType) {
+      case 'Area':
+        this.border = {
+          color: fill,
+          width: 2
+        };
+        fill = palette[1];
+        palette = null;
+        break;
+      case 'Line':
+        this.markerSettings = {
+          visible: ['All'],
+          fill
+        };
+        break;
+      case 'Column':
+        break;
+      case 'Pie':
+        break;
+
+      default:
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+<div *ngIf="items.length" class="row">
+  <div *ngFor="let s of items" class="element">
+    <ejs-sparkline [width]='width' height='100px'
+                   [type]='s.chartType'
+                   [id]="s.data.name"
+                   [dataSource]="s.data.points"
+                   xName="name"
+                   yName="y" [palette]="s.palette"
+                   [format]="format"
+                   valueType="Category"
+                   [enableRtl]="enableRtl"
+                   [border]="s.border"
+                   [fill]="s.fill"
+                   [theme]="theme"
+                   [axisSettings]="axisSettings"
+                   [markerSettings]="s.markerSettings"
+                   (pointRegionMouseClick)="sprklineClick(s, $event)"
+                   [tooltipSettings]="s.tooltipSettings">
+    </ejs-sparkline>
+    <h4 class="mat-h4">{{s.data.title}}</h4>
+  </div>
+</div>

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

@@ -0,0 +1,13 @@
+:host {
+  padding: 8px;
+}
+
+.element {
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  align-items: center;
+  flex: 1 1 auto;
+}