@bizdoc/core 1.13.8 → 1.13.12

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

@@ -0,0 +1,167 @@
+import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core';
+import { HttpResponse } from '@angular/common/http';
+import { AxisSettingsModel, IPointRegionEventArgs, LineSettingsModel, SparklineType } from '@syncfusion/ej2-angular-charts';
+import { debounceTime, Subject, takeUntil } from 'rxjs';
+import { PromptService } from '../../core/prompt.service';
+import { SessionService } from '../../core/session.service';
+import { AXES_CODE_DIVIDER, CubeService, Series } from '../../cube/cube.service';
+import { isArray } from '../../core/functions';
+import { AxesMap, Cube } from '../../core/models';
+import { Item } from './item';
+import { ScopeType } from '../../core/configuration';
+/** */
+@Component({
+  selector: 'bizdoc-cube-parallel',
+  templateUrl: './parallel.component.html',
+  styleUrls: ['parallel.component.scss']
+})
+export
+  class CubeParallelComponent implements OnInit, OnChanges, OnDestroy {
+  @Input()
+  filters: AxesMap;
+  @Input()
+  xAxis!: string | string[];
+  @Input()
+  series!: string | string[];
+  @Input()
+  indices?: string | string[];
+  @Input()
+  cube: string;
+  @Input()
+  size: number;
+  @Input()
+  chartType?: SparklineType;
+  @Input()
+  scope?: ScopeType;
+  @Output('explore')
+  readonly onExplore = new EventEmitter<ExploreEvent>();
+  theme: 'Material' | 'MaterialDark' = this._session.theme.dark ? 'MaterialDark' : 'Material';
+  private _palettes = this._session.accentPalette;
+  public get palettes() {
+    return this._palettes;
+  }
+  @Input()
+  public set palettes(value) {
+    this._palettes = value;
+  }
+  items: Item[] = [];
+  format: string;
+  readonly axisSettings = {
+    lineSettings: {
+    } as LineSettingsModel,
+  } as AxisSettingsModel;
+  width: string = '150px';
+  loading: boolean;
+  private _data: Series[];
+  private _cube: Cube;
+  readonly enableRtl = this._session.inverse;
+  private _primary = this._session.primeryPalette;
+  private readonly _loading = new Subject<boolean>();
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    private _sb: PromptService,
+    private _service: CubeService,
+    private _session: SessionService) {
+    this._loading.pipe(debounceTime(200)).subscribe(ok => this.loading = ok);
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    delete this.filters[this.xAxis as string];
+    this._cube = this._session.profile.cubes.find(c => c.name === this.cube) || this._session.profile.cubes[0];
+    this.format = (this._cube.currencyCode ? 'c' : 'n') + this._service.fractionDigits;
+    if (changes['filters']) this._initialize();
+    else if (changes['size'] && this.items.length) this.width = Math.round(this.size / this.items.length) + 'px';
+  }
+  ngOnInit(): void {
+    this._session.themeChange.pipe(takeUntil(this._destroy)).
+      subscribe(t => {
+        this.theme = t.dark ? 'MaterialDark' : 'Material';
+        this._primary = this._session.primeryPalette;
+        this._palettes = this._session.accentPalette;
+        this._draw();
+      });
+  }
+  private _initialize() {
+    this._loading.next(true);
+    const filters = { ...this.filters };
+
+    this._service.series(this._cube.name, this.xAxis, {
+      series: this.series,
+      filters,
+      indices: this.indices,
+      groupIndices: true,
+      scope: this.scope
+    }).subscribe(r => {
+      this._data = r;
+      this._draw();
+      if (this.items.length) this.width = Math.max(Math.round(this.size / this.items.length), 150) + 'px';
+      this._loading.next(false);
+    }, (e: HttpResponse<any>) => {
+      this._sb.error(e.status === 406 ? 'Unauthorized' : null);
+      this._loading.next(false);
+    }
+    );
+  }
+  private _draw() {
+    this.items = [];
+    const colorMap = {};
+    let colorIndex = 0;
+
+    let originalXAxis = this.filters[isArray(this.xAxis) ? this.xAxis[0] : this.xAxis] as string | string[],
+      originalSeries = this.filters[isArray(this.series) ? this.series[0] : this.series] as string | string[];
+
+    if (!isArray(originalXAxis))
+      originalXAxis = [originalXAxis];
+    if (!isArray(originalSeries))
+      originalSeries = [originalSeries];
+    let max = 0;
+    this._data.forEach(s => {
+      if (s.points.length < 2)
+        return;
+      const palettes = [];
+      for (var i = 0; i < s.points.length; i++) {
+        let point = s.points[i], color = colorMap[point.x];
+        if (!color) {
+          color = colorMap[point.x] =
+            s.index
+              || (!this.indices && originalXAxis.indexOf(point.x) > -1
+                && originalSeries.indexOf(s.name) > -1)
+              ? this._primary[colorIndex] : this._palettes[colorIndex];
+          colorIndex++;
+        }
+        palettes.push(color);
+        if (point.y > max)
+          max = point.y;
+      }
+      this.items.push(new Item(this.chartType || 'Pie',
+        s, palettes, s.index ? this._primary[6] :
+        this._palettes[6]));
+    });
+    this.axisSettings.maxY = max;
+  }
+  sprklineClick(item: Item, evt: IPointRegionEventArgs) {
+    const name = item.data.name,
+      x = item.data.points[evt.pointIndex].x, index = item.data.index;
+    const axes: { [axis: string]: any } = {};
+    let { xAxis, series } = this;
+    if (!isArray(xAxis)) xAxis = [xAxis];
+    if (!isArray(series)) xAxis = [series];
+    for (let i = 0; i < series.length; i++)
+      axes[series[i]] = name.split(AXES_CODE_DIVIDER)[i];
+    for (let i = 0; i < xAxis.length; i++) {
+      axes[xAxis[i]] = x.split(AXES_CODE_DIVIDER)[i];
+    }
+    this.onExplore.emit({
+      axes: { ...this.filters, ...axes },
+      index
+    });
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+    this._loading.complete();
+  }
+}
+export interface ExploreEvent {
+  axes: AxesMap;
+  index?: string;
+}

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

@@ -0,0 +1,14 @@
+<!--<ejs-pivotview #pivotview [id]='id' showGroupingBar='false'
+               [dataSourceSettings]=dataSource [width]='width'
+               [height]='height'
+               [showTooltip]='false' [enableValueSorting]='true'
+               [allowExcelExport]='true'
+               spinnerTemplate=""
+  (excelQueryCellInfo)=excelQueryCellInfo($event)
+               [chartSettings]='chartSettings'
+  [gridSettings]='gridSettings'
+  [displayOption]='displayOption'
+               [hyperlinkSettings]='hyperlinkSettings'
+               (hyperlinkCellClick)='cellClick($event)'
+               [currencyCode]=currencyCode>
+</ejs-pivotview>-->

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

@@ -0,0 +1,514 @@
+import { Component, EventEmitter, OnChanges, Output, OnDestroy, ElementRef, HostBinding, Input, OnInit, SimpleChanges } from '@angular/core';
+import { HttpResponse } from '@angular/common/http';
+import { Direction } from '@angular/cdk/bidi';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { DisplayOptionModel, PivotView, ChartSeriesType, CellClickEventArgs, ExcelExport } from '@syncfusion/ej2-pivotview';
+import { ChartSettingsModel } from '@syncfusion/ej2-pivotview/src/pivotview/model/chartsettings-model';
+import { ConditionalFormatSettingsModel, DataSourceSettingsModel, FieldOptionsModel, FormatSettingsModel, SortModel } from "@syncfusion/ej2-pivotview/src/pivotview/model/datasourcesettings-model";
+import { GridSettingsModel } from "@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings-model";
+import { Chart, IPointEventArgs } from '@syncfusion/ej2-angular-charts';
+import { Internationalization } from '@syncfusion/ej2-base';
+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 { Tooltip } from '@syncfusion/ej2-popups';
+import { getWarn, isArray } from '../../core/functions';
+import { FONT_FAMILY } from '../../core/colors';
+import { AxesMap, ChartType, Cube, YAxis } from '../../core/models';
+import { AxisClickEvent, CubeViewerComponent } from "../declarations";
+import { CubeService, DEFAULT_CURRENCY, CLDR_FILES } from '../cube.service';
+import { PromptService } from '../../core/prompt.service';
+import { SessionService } from '../../core/session.service';
+import { TranslateService } from '../../core/translate.service';
+
+PivotView.Inject(ExcelExport);
+
+const PIVOT_HEADER_DELIMITER = '|';
+
+@Component({
+  selector: 'bizdoc-cube-pivot',
+  template: '',
+  styles: ['::ng-deep .e-cellvalue { cursor: pointer }'],
+  host: {
+    class: 'cube-view',
+    '[style.direction]': 'dir'
+  }
+})
+/** pivot component*/
+export class CubePivotComponent implements CubeViewerComponent, OnInit, OnChanges, OnDestroy {
+  @Input()
+  width: string | number;
+  @Input()
+  height: string;
+  @Input()
+  cube: string;
+  private _xAxis: string[];
+  tooltip: Tooltip;
+  public get xAxis(): string[] | string {
+    return this._xAxis;
+  }
+  @Input()
+  public set xAxis(value: string[] | string) {
+    this._xAxis = isArray(value) ? value : [value];
+  }
+  @Input()
+  yAxis?: YAxis;
+  private _series?: string[];
+  public get series(): string[] | string {
+    return this._series;
+  }
+  @Input()
+  public set series(value: string[] | string) {
+    if (value) this._series = isArray(value) ? value : [value];
+  }
+  private _indices?: string[];
+  public get indices(): string[] | string {
+    return this._indices;
+  }
+  @Input()
+  public set indices(value: string[] | string) {
+    if (value) this._indices = isArray(value) ? value : [value];
+  }
+  @Input()
+  filters?: AxesMap;
+  @Input()
+  chartType?: ChartType;
+  @Input()
+  indicesChartType?: ChartType;
+  currencyCode: string;
+  private _palettes = this._session.accentPalette;
+  public get palettes() {
+    return this._palettes;
+  }
+  @Input()
+  public set palettes(value) {
+    this._palettes = value;
+  }
+  @Output() readonly explore = new EventEmitter<AxisClickEvent>();
+  @Input() loading: boolean;
+  @Output() readonly loadingChange = new EventEmitter<boolean>();
+  static nextId = 0;
+  @HostBinding()
+  readonly id = `cube-pivotview-${CubePivotComponent.nextId++}`;
+  pivot: PivotView;
+  displayOption: DisplayOptionModel;
+  chartSettings: ChartSettingsModel;
+  dataSource: DataSourceSettingsModel;
+
+  readonly formatSettings: FormatSettingsModel[] = [{
+    name: 'value',
+  }];
+  values: FieldOptionsModel[];
+  private readonly conditionalFormatSettings: ConditionalFormatSettingsModel[] = [{
+    conditions: 'LessThan',
+    value1: 0,
+    measure: 'value',
+    applyGrandTotals: true,
+    style: { color: getWarn() }
+  }];
+  readonly gridSettings: GridSettingsModel = {
+    rowHeight: 36,
+    allowSelection: false
+  };
+  dir: Direction;
+  private _cube: Cube;
+  private _data: {}[];
+  private readonly _intl: Internationalization = new Internationalization();
+  private readonly emptyCellsTextContent = this._intl.formatNumber(0, {});
+  private readonly _destroy = new Subject<void>();
+
+  /** pivot ctor */
+  constructor(private _service: CubeService,
+    private _session: SessionService,
+    private _translate: TranslateService,
+    private _sb: PromptService,
+    private _elementRef: ElementRef) {
+    this._session.themeChange.pipe(takeUntil(this._destroy)).subscribe(t => {
+      if (this.pivot.chart) {
+        this.chartSettings.theme = t.dark ? 'MaterialDark' : 'Material';
+        this.chartSettings.palettes = this._session.accentPalette;
+      } else
+        this.conditionalFormatSettings.forEach(f => f.style.color = getWarn());
+      this._draw();
+    });
+  }
+  ngOnInit() {
+    this._cube = this._session.profile.cubes.find(c => c.name === this.cube) || this._session.profile.cubes[0];
+    this.currencyCode = this._cube.currencyCode;
+    this.dir = this.chartType ? 'ltr' : this._session.direction;
+    this.formatSettings[0].currency = this.currencyCode,
+      this.formatSettings[0].format = (this.currencyCode ? 'c' : 'n') + this._service.fractionDigits;
+    if (this.chartType) {
+      this.displayOption = {
+        view: 'Chart',
+        primary: 'Chart'
+      };
+      this.chartSettings = {
+        pointClick: this.pointClick.bind(this),
+        chartSeries: { type: this.chartType as ChartSeriesType },
+        //isTransposed: true,        
+        enableExport: true,
+        chartArea: {
+          border: { width: 0 }
+        },
+        palettes: this.palettes,
+        theme: this._session.theme.dark ? 'MaterialDark' : 'Material',
+        background: 'transparent',
+        primaryXAxis: {
+          titleStyle: {
+            fontFamily: FONT_FAMILY
+          },
+          labelStyle: {
+            fontFamily: FONT_FAMILY
+          }
+        },
+        zoomSettings: {
+          enableMouseWheelZooming: true,
+          enablePinchZooming: true,
+          toolbarItems: [],
+          enableSelectionZooming: false,
+          enableScrollbar: true
+        },
+        border: { width: 0 },
+        legendSettings: {
+          isInversed: this._session.inverse,
+          textStyle: {
+            fontFamily: FONT_FAMILY
+          }
+        },
+        tooltip: {
+          enableAnimation: false,
+          border: { width: 0 },
+          textStyle: {
+            fontFamily: FONT_FAMILY
+          }
+        },
+        titleStyle: {
+          fontFamily: FONT_FAMILY
+        },
+        subTitleStyle: {
+          fontFamily: FONT_FAMILY
+        },
+        primaryYAxis: {
+          titleStyle: {
+            fontFamily: FONT_FAMILY
+          },
+          labelStyle: {
+            fontFamily: FONT_FAMILY
+          }
+        }
+      };
+    }
+    this.values = [{
+      name: 'value',
+      caption: (this.yAxis ? this.yAxis.title : null) || this._translate.get('Value')
+    }];
+    this._indices &&
+      this._indices.forEach(i => {
+        this.conditionalFormatSettings.push({
+          conditions: 'LessThan',
+          value1: 0,
+          applyGrandTotals: true,
+          measure: i,
+          style: { color: getWarn() }
+        });
+        this.values.
+          push({
+            name: i,
+            caption: this._getIndexTitle(i)
+          });
+        this.formatSettings.
+          push({
+            name: i,
+            format: this.formatSettings[0].format,
+            currency: this.currencyCode,
+          });
+      });
+    this.execute();
+  }
+  private _getIndexTitle(name: string): string {
+    return this._cube.indices.find(i => i.name === name).title;
+  }
+  private _getAxisTitle(name: string) {
+    const axis = this._cube.axes.find(a => a.name === name);
+    return axis.title;
+  }
+  /**
+   * 
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['filters'] && !changes['filters'].firstChange)
+      this.execute();
+    else
+      if (changes['height'] || changes['width'])
+        this.resize();
+  }
+  execute() {
+    this.loadingChange.emit(true);
+    const keys = Object.keys(this.filters);
+    // remove filtering from pivot axes
+    let xAxis2 = this._xAxis.slice(), series2 = this._series.slice();
+    if (keys.length) {
+      if (xAxis2.length > 1)
+        xAxis2 = xAxis2.filter(x => keys.indexOf(x) < 0);
+      if (series2.length > 1)
+        series2 = series2.filter(x => keys.indexOf(x) < 0);
+    }
+    if (!series2.length) series2 = this._series.slice(-1);
+    if (!xAxis2.length) xAxis2 = this._xAxis.slice(-1);
+    // columns
+    const columns = xAxis2.concat(series2);
+    // query
+    this._service.table(this._cube.name, columns, { filters: this.filters, indices: this.indices }).subscribe(r => {
+      this._presets(xAxis2, series2, r);
+      this._draw();
+      this.loadingChange.emit(false);
+    }, (e: HttpResponse<any>) => {
+      this._sb.error(e.status === 406 ? 'Unauthorized' : null);
+      this.loadingChange.emit(false);
+    });
+  }
+
+  /**
+   * 
+   * @param xAxis
+   * @param series
+   * @param data
+   */
+  private _presets(xAxis: string[], series: string[], data: {}[]) {
+    this._data = data;
+    this.dataSource = {
+      columns: xAxis.map(x => {
+        return {
+          name: x,
+          caption: this._getAxisTitle(x)
+        } as FieldOptionsModel;
+      }),
+      rows: series.map(s => {
+        return {
+          name: s,
+          caption: this._getAxisTitle(s)
+        } as FieldOptionsModel;
+      }),
+      valueSortSettings: { headerDelimiter: PIVOT_HEADER_DELIMITER },
+      values: this.values,
+      sortSettings: xAxis.map(x => {
+        return {
+          name: '_' + x,
+        } as SortModel;
+      }),
+      //conditionalFormatSettings: this.conditionalFormatSettings,
+      alwaysShowValueHeader: false,
+      allowMemberFilter: false,
+      allowValueFilter: false,
+      allowLabelFilter: false,
+      dataSource: data,
+      emptyCellsTextContent: this.emptyCellsTextContent,
+      enableSorting: false,
+      formatSettings: this.formatSettings
+    } as DataSourceSettingsModel;
+  }
+
+  /**
+   * 
+   * @param evt
+   */
+  cellClick(evt: CellClickEventArgs) {
+    const { columnHeaders, rowHeaders, actualText, actualValue, axis, valueSort, type } = evt.data as any;
+    let axes, index;
+    if (columnHeaders || rowHeaders) {
+      if (actualValue === 0)
+        return;
+      axes = this._parseAxes(columnHeaders, rowHeaders);
+      if (actualText !== 'value') index = actualText;
+    }
+    else if (axis === 'row' && type !== 'grand sum')
+      axes = this._parseAxes('', valueSort.levelName);
+    this.explore.emit({ axes, index });
+  }
+  /**
+   * axes from headers
+   * @param columnHeaders
+   * @param rowHeaders
+   */
+  private _parseAxes(columnHeaders: string, rowHeaders: string): AxesMap {
+    const axes: AxesMap = {};
+    if (columnHeaders !== '')
+      columnHeaders.split(PIVOT_HEADER_DELIMITER).forEach((c, i) => {
+        const column = this.dataSource.columns[i].name,
+          // find any row with header
+          element = this._data.find(e => e[column].toString() === c);
+        // translate back to key
+        if (!element) console.error(`${columnHeaders}`);
+        else axes[column] = element[`_${column}`];
+      });
+    if (rowHeaders !== '')
+      rowHeaders.split(PIVOT_HEADER_DELIMITER).forEach((r, i) => {
+        const column = this.dataSource.rows[i].name,
+          element = this._data.find(e => e[column] === r);
+        if (!element) console.error(`${rowHeaders}`);
+        else axes[column] = element[`_${column}`];
+      });
+    return axes;
+  }
+  /**
+   * chart
+   * @param e
+   */
+  pointClick(e: IPointEventArgs) {
+    const { point: { x }, series: { name } } = e;
+    const axes: { [axis: string]: any } = {};
+    // set axes from x label(s)
+    (x as string).split(' - ').forEach((x, i) => {
+      const column = this.dataSource.rows[i].name,
+        element = this._data.find(e => e[column] === x);
+      axes[column] = element ? element[`_${column}`] : x;
+    });
+    // set axes from series label
+    if (name !== '') {
+      const column = this.dataSource.columns[0].name,
+        // find any row with header
+        element = this._data.find(e => e[column] === name);
+      // translate back to key
+      axes[column] = element ? element[`_${column}`] : name;
+    }
+    this.explore.emit({ axes });
+  }
+  async exportToExcel(title: string) {
+    if (this.currencyCode && this.currencyCode !== DEFAULT_CURRENCY)
+      await this._translate.cldr(this._session.language, CLDR_FILES);
+    if (this.chartType)
+      this._exportExcel(title);
+    else
+      this.pivot.excelExport({ fileName: `${title}.xlsx`, hierarchyExportMode: 'All', });
+  }
+  private _exportExcel(title: string) {
+    const numberFormat = this._service.numberFormat, columns = this._cube.axes.filter(a => this._xAxis.indexOf(a.name) > -1 ||
+      this._series.indexOf(a.name) > -1), rows = [{
+        index: 1,
+        cells: columns.map((c, i) => ({
+          index: i + 1, value: c.title,
+          style: {
+            bold: true
+          }
+        } as Cell))
+      }] as Row[];
+    rows[0].cells.push({
+      index: columns.length + 1,
+      value: this.yAxis ? this.yAxis.title :
+        this._translate.get('Value'),
+      style: {
+        bold: true
+      }
+    });
+    this._indices && this._indices.forEach((x, i) => rows[0].cells.push({
+      index: columns.length + i + 2,
+      value: this._getIndexTitle(x),
+      style: {
+        bold: true
+      }
+    }));
+    this._data.forEach((r, i) => {
+      const cells = columns.map((c, j) => {
+        return {
+          index: j + 1, value: r[c.name],
+          style: {}
+        } as Cell;
+      }
+      );
+      cells.push({
+        type: 'number',
+        index: columns.length + 1,
+        style: {
+          numberFormat,
+          hAlign: 'right'
+        },
+        value: r['value']
+      } as Cell);
+      this._indices && this._indices.forEach((x, i) => cells.push({
+        type: 'number',
+        index: columns.length + i + 2,
+        style: {
+          numberFormat,
+          hAlign: 'right'
+        },
+        value: r[x]
+      } 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: 250 } as Column)),
+            { index: columns.length + 1 },
+            ...(this._indices ? this._indices.map((_, i) => ({
+              index: columns.length + i + 2
+            })) : [])
+            ],
+            rows
+          } as Worksheet
+        ],
+      },
+      'xlsx'
+    );
+    book.save(`${title}.xlsx`);
+  }
+
+  private _draw() {
+    this.pivot && this.pivot.destroy();
+    this.pivot = new PivotView({
+      spinnerTemplate: '',
+      chartSettings: this.chartSettings,
+      displayOption: this.displayOption,
+      dataSourceSettings: this.dataSource,
+      width: this.width,
+      height: '100%',
+      enableValueSorting: true,
+      showTooltip: false,
+      allowConditionalFormatting: true,
+      allowExcelExport: true,
+      gridSettings: this.gridSettings,
+      cellClick: this.cellClick.bind(this),
+      currencyCode: this.currencyCode,
+      dataBound: this.dataBound.bind(this)
+    }, this._elementRef.nativeElement);
+  }
+  dataBound(_) {
+    this.tooltip = new Tooltip({
+      target: '.e-icons',
+      cssClass: 'e-custom-tooltip',
+      position: 'BottomCenter',
+      offsetY: 15,
+      enableRtl: this.pivot.enableRtl,
+      locale: this.pivot.locale,
+    });
+    this.tooltip.appendTo(this._elementRef.nativeElement);
+  }
+  resize(): void {
+    if (this.pivot) {
+      //this.pivot.height = this.height;
+      this.pivot.width = this.width;
+      if (this.chartSettings)
+        this.pivot.chart && (this.pivot.chart as unknown as Chart).chartResize();
+      else
+        this.pivot.onWindowResize();
+    }
+  }
+  ngOnDestroy(): void {
+    this.tooltip && this.tooltip.destroy();
+    this.pivot && this.pivot.destroy();
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+interface Cell { }