@bizdoc/core 1.14.8 → 1.14.9

package/src/lib/reports/cube/usage-chart.component.ts

@@ -0,0 +1,386 @@
+import { Component, ElementRef, OnDestroy } from "@angular/core";
+import { Directionality } from "@angular/cdk/bidi";
+import { getCurrencySymbol, getLocaleNumberFormat, NumberFormatStyle } from "@angular/common";
+import { Observable, forkJoin } from "rxjs";
+import { tap, takeUntil, map } from "rxjs/operators";
+import { DisplayOptionModel, PivotView } from "@syncfusion/ej2-angular-pivotview";
+import { DataSourceSettingsModel, SortModel, FieldOptionsModel, FormatSettingsModel } from "@syncfusion/ej2-pivotview/src/pivotview/model/datasourcesettings-model";
+import { ChartSettingsModel } from '@syncfusion/ej2-pivotview/src/pivotview/model/chartsettings-model';
+import { Chart, IPointEventArgs } from "@syncfusion/ej2-angular-charts";
+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 { Item, Options, UsageReportBase } from "./usage-base";
+import { DatasourceService } from "../../core/datasource.service";
+import { SessionService } from "../../core/session.service";
+import { CubeService } from "../../cube/cube.service";
+import { PromptService } from "../../core/prompt.service";
+import { TranslateService } from "../../core/translate.service";
+import { ReportRef } from "../report-ref";
+import { MaterialMode } from "../../core/functions";
+import { FONT_FAMILY } from "../../core/colors";
+import { RouterImpl } from "../../core/router";
+
+/**
+ * cube usage
+ * */
+@Component({
+  template: '',
+  host: {
+    '[id]': 'id',
+    '[dir]': 'dir'
+  }
+})
+export
+  class UsageChartComponent extends UsageReportBase implements OnDestroy {
+  readonly dir = this._session.direction;
+  pivot: PivotView;
+  dataSourceSettings: DataSourceSettingsModel;
+  readonly displayOption: DisplayOptionModel = {
+    view: 'Chart'
+  };
+  chartSettings: ChartSettingsModel;
+  // ctor
+  constructor(reportRef: ReportRef<Options>, type: DatasourceService, service: CubeService, session: SessionService,
+    router: RouterImpl,
+    sb: PromptService,
+    private _elementRef: ElementRef,
+    dir: Directionality,
+    translate: TranslateService) {
+    super(reportRef, type, service, session, router,
+      sb, dir, translate);
+    this._session.themeChange.pipe(takeUntil(this._destroy)).subscribe(t => {
+      this.chartSettings.theme = t.dark ? 'MaterialDark' : 'Material';
+      this.chartSettings.palettes = this._palettes();
+      this._draw();
+    });
+    this._defaults();
+  }
+  /** set defaults */
+  private _defaults() {
+    const { chartType } = this._reportRef.options;
+    const isLine = chartType === 'Line' || chartType === 'Spline';
+    this.chartSettings = {
+      pointClick: this.pointClick.bind(this),
+      zoomSettings: {
+        toolbarItems: [],
+        mode: 'XY',
+        enableMouseWheelZooming: true,
+        enablePinchZooming: true,
+        enableSelectionZooming: false
+      },
+      crosshair: {
+        enable: isLine,
+        line: {
+          width: 1
+        }
+      },
+      chartSeries: {
+        palettes: this._palettes(),
+        type: chartType || 'Column',
+        //width: 2,
+        border: { width: 0 },
+        marker: { height: 10, width: 10, shape: 'Pentagon', visible: isLine },
+      },
+      enableExport: true,
+      chartArea: {
+        border: { width: 0 }
+      },
+      theme: this._session.theme.dark ? 'MaterialDark' : 'Material',
+      background: 'transparent',
+      primaryXAxis: {
+        titleStyle: {
+          fontFamily: FONT_FAMILY
+        },
+        labelStyle: {
+          fontFamily: FONT_FAMILY
+        }
+      },
+      border: { width: 0 },
+      legendSettings: {
+        textStyle: {
+          fontFamily: FONT_FAMILY
+        },
+        isInversed: this._session.inverse
+      },
+      tooltip: {
+        textStyle: {
+          fontFamily: FONT_FAMILY
+        }
+      },
+      titleStyle: {
+        fontFamily: FONT_FAMILY
+      },
+      subTitleStyle: {
+        fontFamily: FONT_FAMILY
+      },
+      primaryYAxis: {
+        titleStyle: {
+          fontFamily: FONT_FAMILY
+        },
+        labelStyle: {
+          fontFamily: FONT_FAMILY
+        },
+        crosshairTooltip: {
+          enable: true,
+          textStyle: {
+            fontFamily: FONT_FAMILY
+          }
+        }
+      }
+    };
+    const formatSettings: FormatSettingsModel[] = [{
+      name: 'value', format: this.currencyCode ? 'C' : 'N',
+      maximumFractionDigits: this._fractionDigits,
+      //minimumFractionDigits: this._fractionDigits,
+      currency: this.currencyCode
+    }];
+    const rows = this._series.map(a => {
+      return {
+        name: a.name,
+        caption: a.title
+      } as FieldOptionsModel;
+    });
+    this.dataSourceSettings = {
+      columns: [{
+        name: 'type'
+      }],
+      rows,
+      values: [
+        {
+          name: 'value',
+          caption: this._translate.get('Value')
+        }
+      ],
+      enableSorting: false,
+      sortSettings: this._series.map(s => { return { name: `_${s.name}` } as SortModel }),
+      expandAll: this._expandAll,
+      formatSettings,
+      dataSource: []
+    };
+  }
+  private _palettes(): string[] {
+    return [this._session.getAccent()].
+      concat(this._indices.map((_, i) =>
+        this._session.getPrimery(300 + 300 * i as MaterialMode)));
+  }
+
+  dataBound(args: any): void {
+    this.pivot.chart.pointClick = this.pointClick.bind(this);
+  }
+  /**
+   * 
+   * @param result
+   */
+  onData(result: Item[]) {
+    this._data = result;
+    this._decorate(result).subscribe(r => {
+      this.dataSourceSettings.dataSource = r as any;
+      this._draw();
+    }, () => this._sb.error());
+  }
+  private _draw() {
+    this.pivot && this.pivot.destroy();
+    this.pivot = new PivotView({
+      width: '100%',
+      height: '100%',
+      enableRtl: this.enableRtl,
+      dataBound: this.dataBound.bind(this),
+      chartSettings: this.chartSettings,
+      displayOption: this.displayOption,
+      dataSourceSettings: this.dataSourceSettings,
+      spinnerTemplate: '',
+      allowConditionalFormatting: true,
+      currencyCode: this.currencyCode,
+    }, this._elementRef.nativeElement);
+  }
+  onResize() {
+    if (this.pivot && this.pivot.chart) {
+      //this.pivot.chart.height = this.height;
+      //this.pivot.chart.width = this.width;
+      (this.pivot.chart as Chart).chartResize();
+    }
+  }
+  onExport(title: string) {
+    const numberFormat = this._cube.currencyCode ?
+      getCurrencySymbol(this._cube.currencyCode, 'narrow') +
+      getLocaleNumberFormat(this._session.language, NumberFormatStyle.Currency)
+      : getLocaleNumberFormat(this._session.language, NumberFormatStyle.Decimal),
+      columns = this._cube.axes.filter(a => this._options.series.indexOf(a.name) > -1),
+      rows = [{
+        index: 1,
+        cells: columns.map((c, i) => ({
+          index: i + 1, value: c.title,
+          style: {
+            bold: true
+          }
+        }))
+      }] as Row[];
+    rows[0].cells.push({
+      index: columns.length + 1,
+      value: this._cube.yAxis ? this._cube.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: x.title,
+        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']
+      });
+      this._indices && this._indices.forEach((x, i) =>
+        cells.push({
+          type: 'number',
+          index: columns.length + i + 2,
+          style: {
+            numberFormat,
+            hAlign: 'right'
+          },
+          value: r[x.name]
+        })
+      );
+      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`);
+  }
+  /**
+   * adds data source description to item keys, and normalizes indices.
+   * @param result
+   */
+  private _decorate(result: Item[]): Observable<{}[]> {
+    return new Observable(observe => {
+      const observables: Observable<any>[] = [];
+      result.forEach(row => {
+        this._series.forEach(a => {
+          const val = row[a.name] as string;
+          const observable = this._type.get(a.dataType, val).
+            pipe(tap((v: string) => {
+              row[`_${a.name}`] = val;
+              row[a.name] = v || val;
+            }));
+          observables.push(observable);
+        });
+      });
+      if (observables.length)
+        forkJoin(observables).pipe(map(() => {
+          const data: {}[] = [];
+          result.forEach(baseRow => {
+            const value = baseRow.usage;
+            if (value !== undefined && value !== 0) {
+              const row = {
+                type: this._yTitle,
+                value
+              };
+              this._series.forEach(a => {
+                row[`_${a.name}`] = baseRow[`_${a.name}`];
+                row[a.name] = baseRow[a.name];
+              });
+              data.push(row);
+            }
+            this._indices.forEach(i => {
+              const value = baseRow[i.name];
+              if (value !== undefined && value !== 0) {
+                const row = { type: i.title, value };
+                this._series.forEach(a => {
+                  row[`_${a.name}`] = baseRow[`_${a.name}`];
+                  row[a.name] = baseRow[a.name];
+                });
+                data.push(row);
+              }
+            });
+          });
+          return data;
+        })).
+          subscribe(r =>
+            observe.next(r), e => observe.error(e));
+      else
+        observe.next([]);
+    });
+  }
+  /**
+   * 
+   * @param e
+   */
+  pointClick(e: IPointEventArgs) {
+    const { point: { x, yValue }, series: { name: title } } = e;
+    if (yValue === 0) {
+      e.cancel = true;
+      return;
+    }
+    const axes: { [axis: string]: any; } = this._axes(x as string);
+    super.browse(axes, title === this._yTitle ? null : this._indexName(title));
+  }
+  /**
+   * reverse engineering axes from series label
+   * @param label
+   */
+  private _axes(label: string) {
+    const axes: { [axis: string]: (string | number); } = {};
+    label.split(' - ').forEach((x, i) => {
+      const column = this.dataSourceSettings.rows[i].name,
+        element = this._data.find(e => e[column] === x);
+      axes[column] = element ? element[`_${column}`] : x;
+    });
+    return axes;
+  }
+
+  /**
+   * reverse engineering index name from title
+   * @param title
+   */
+  private _indexName(title: string): string {
+    const index = this._indices.find(i => i.title === title);
+    return index.name;
+  }
+  ngOnDestroy() {
+    this.pivot && this.pivot.destroy();
+    super.ngOnDestroy();
+  }
+}
+interface Cell { }

package/src/lib/reports/cube/usage-pivot.component.html

@@ -0,0 +1,19 @@
+<!--<ejs-pivotview [height]=height
+               [width]=width
+               [id]=id
+               [dataSourceSettings]=dataSourceSettings
+               spinnerTemplate=""
+               [allowConditionalFormatting]=true
+               [allowNumberFormatting]=true
+               [showGroupingBar]=true
+               [allowExcelExport]=true
+               [allowCalculatedField]=true
+               [gridSettings]=gridSettings
+               [hyperlinkSettings]=hyperlinkSettings
+               (cellClick)=cellClick($event)
+               [enableValueSorting]=true
+               [groupingBarSettings]=groupingBarSettings
+               [showTooltip]=false
+               [currencyCode]=currencyCode
+               (enginePopulated)='enginePopulated()'
+               [enableRtl]=enableRtl></ejs-pivotview>-->

package/src/lib/reports/cube/usage-pivot.component.ts

@@ -0,0 +1,266 @@
+import { Component, ElementRef, ViewChild } from "@angular/core";
+import { Directionality } from "@angular/cdk/bidi";
+import { Observable, forkJoin, of } from "rxjs";
+import { tap, takeUntil } from "rxjs/operators";
+import { PivotViewComponent } from "@syncfusion/ej2-angular-pivotview";
+import { PivotView, GroupingBarSettingsModel, HyperCellClickEventArgs, ConditionalSettingsModel, HyperlinkSettingsModel } from "@syncfusion/ej2-angular-pivotview";
+import { ExcelQueryCellInfoEventArgs } from "@syncfusion/ej2-grids";
+import { ConditionalFormatSettingsModel } from "@syncfusion/ej2-pivotview/src/pivotview/model/datasourcesettings-model";
+import { DataSourceSettingsModel, FieldOptionsModel, FormatSettingsModel } from "@syncfusion/ej2-pivotview/src/pivotview/model/datasourcesettings-model";
+import { GridSettingsModel } from "@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings-model";
+import { Internationalization } from "@syncfusion/ej2-base";
+import { Tooltip } from '@syncfusion/ej2-popups';
+import { CubeAxis } from "../../core/models";
+import { getWarn, isArray } from "../../core/functions";
+import { SessionService } from "../../core/session.service";
+import { TranslateService } from "../../core/translate.service";
+import { DatasourceService } from "../../core/datasource.service";
+import { CubeService } from "../../cube/cube.service";
+import { PromptService } from "../../core/prompt.service";
+import { RouterImpl } from "../../core/router";
+import { Item, Options, UsageReportBase } from "./usage-base";
+import { ReportRef } from "../report-ref";
+
+const PIVOT_HEADER_DELIMITER = '|';
+/**
+ * cube usage
+ * */
+@Component({
+  template: '',
+  //templateUrl: 'usage-pivot.component.html',
+  host: { '[id]': 'id' }
+})
+export
+  class UsagePivotComponent extends UsageReportBase {
+  @ViewChild(PivotViewComponent) pivot: PivotView;
+  private _emptyCellsTextContent: string;
+  private _xAxis: CubeAxis[];
+  dataSourceSettings: DataSourceSettingsModel;
+  hyperlinkSettings: HyperlinkSettingsModel;
+  tooltip: Tooltip;
+  readonly gridSettings: GridSettingsModel = {
+    rowHeight: 36
+  };
+  readonly conditionalFormatSettings: ConditionalFormatSettingsModel[] = [{
+    conditions: 'LessThan',
+    value1: 0,
+    measure: 'value',
+    applyGrandTotals: true,
+    style: {
+      color: getWarn()
+    }
+  }];
+  readonly groupingBarSettings: GroupingBarSettingsModel = {
+    showRemoveIcon: false,
+    showFilterIcon: false,
+    showValueTypeIcon: false
+  };
+  private readonly _intl: Internationalization = new Internationalization();
+  // ctor
+  constructor(reportRef: ReportRef<Options>,
+    type: DatasourceService,
+    private _elementRef: ElementRef,
+    service: CubeService, session: SessionService,
+    router: RouterImpl,
+    sb: PromptService,
+    dir: Directionality,
+    translate: TranslateService) {
+    super(reportRef, type, service, session, router, sb, dir, translate);
+    this._session.themeChange.pipe(takeUntil(this._destroy)).subscribe(() => {
+      this.conditionalFormatSettings[0].style.color = getWarn();
+      this.pivot.refresh();
+    });
+    this._defaults();
+  }
+  /** set defaults */
+  private _defaults() {
+    const { xAxis } = this._options;
+    this._xAxis = xAxis ? this._cube.axes.filter(a => isArray(xAxis) ? xAxis.indexOf(a.name) > -1 : a.name === xAxis) : this._cube.axes.filter(a => !a.hidden).slice(0, 2);
+    this._emptyCellsTextContent = this._intl.formatNumber(0, {
+      format: this.currencyCode ? 'C' : 'N',
+      currency: this.currencyCode,
+      maximumFractionDigits: this._fractionDigits
+    });
+    const formatSettings: FormatSettingsModel[] = [{
+      name: 'usage',
+      format: this.currencyCode ? 'C' : 'N',
+      maximumFractionDigits: this._fractionDigits
+    }];
+    const values: FieldOptionsModel[] = [
+      {
+        name: 'usage',
+        caption: this._yTitle,
+        showNoDataItems: true
+      }
+    ];
+    const conditionalSettings: ConditionalSettingsModel[] = [{
+      conditions: 'NotEquals',
+      value1: 0,
+      measure: 'usage'
+    }];
+    this._indices &&
+      this._indices.forEach(i => {
+        values.push({
+          name: i.name,
+          caption: i.title,
+          showNoDataItems: true
+        });
+        conditionalSettings.push({
+          conditions: 'NotEquals',
+          value1: 0,
+          measure: i.name
+        });
+        formatSettings.push({
+          name: i.name,
+          format: this.currencyCode ? 'C' : 'N',
+          maximumFractionDigits: this._fractionDigits
+        });
+      });
+    this.hyperlinkSettings = {
+      conditionalSettings: conditionalSettings
+    }
+    const columns = this._xAxis.map(a => {
+      return {
+        name: a.name,
+        caption: a.title,
+        showNoDataItems: true
+      } as FieldOptionsModel;
+    });
+    const rows = this._series.map(a => {
+      return {
+        name: a.name,
+        caption: a.title,
+        showNoDataItems: true
+      } as FieldOptionsModel;
+    });
+    this.dataSourceSettings = {
+      columns,
+      rows,
+      values,
+      conditionalFormatSettings: this.conditionalFormatSettings,
+      emptyCellsTextContent: this._emptyCellsTextContent,
+      expandAll: this._expandAll,
+      showColumnGrandTotals: true,
+      alwaysShowValueHeader: false,
+      formatSettings,
+      dataSource: [],
+      valueSortSettings: { headerDelimiter: PIVOT_HEADER_DELIMITER },
+      enableSorting: false
+    };
+  }
+  /**
+   * 
+   * @param result
+   */
+  onData(result: Item[]) {
+    this._decorate(result).subscribe(() => {
+      this._data = this.dataSourceSettings.dataSource = result as any;
+      this._draw();
+    }, () => this._sb.error());
+  }
+  enginePopulated() {
+    this.pivot.grid.excelQueryCellInfo = this.excelQueryCellInfo.bind(this);
+  }
+  excelQueryCellInfo(evt: ExcelQueryCellInfoEventArgs) {
+    if (evt.value === this._emptyCellsTextContent) evt.value = 0;
+  }
+  onResize() {
+    if (this.pivot) {
+      this.pivot.width = this.width;
+      this.pivot.onWindowResize();
+    }
+  }
+  onExport(name: string) {
+    this.pivot.excelExport({
+      fileName: `${name}.xlsx`
+    });
+  }
+
+  /**
+   * adds data source description to item keys.
+   * @param result
+   */
+  private _decorate(result: Item[]): Observable<any> {
+    const observables: Observable<any>[] = [];
+    result.forEach(row => {
+      this._xAxis.concat(this._series).forEach(a => {
+        const axis = row[a.name] as string;
+        row[`_${a.name}`] = axis;
+        const observable = this._type.get(a.dataType, axis).pipe(tap(v => row[a.name] = v || axis));
+        observables.push(observable);
+      });
+    });
+    return observables.length ? forkJoin(observables) : of([]);
+  }
+  private _draw() {
+    this.pivot && this.pivot.destroy();
+    this.pivot = new PivotView({
+      spinnerTemplate: '',
+      dataSourceSettings: this.dataSourceSettings,
+      width: this.width,
+      height: this.height,
+      enableValueSorting: true,
+      enableRtl: this.enableRtl,
+      showTooltip: false,
+      allowConditionalFormatting: true,
+      allowNumberFormatting: true,
+      groupingBarSettings: this.groupingBarSettings,
+      allowCalculatedField: true,
+      showGroupingBar: true,
+      allowExcelExport: true,
+      hyperlinkSettings: this.hyperlinkSettings,
+      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);
+  }
+  /**
+   * 
+   * @param evt
+   */
+  cellClick(evt: HyperCellClickEventArgs) {
+    const { columnHeaders, rowHeaders, actualText } = evt.data as any;
+    const axes = this._pivotAxes(columnHeaders, rowHeaders);
+    super.browse(axes, actualText === 'usage' ? null : actualText);
+  }
+  /**
+   * reverse engineer axes from headers
+   * @param columnHeaders
+   * @param rowHeaders
+   */
+  private _pivotAxes(columnHeaders: string, rowHeaders: string): { [axis: string]: string; } {
+    const axes: { [axis: string]: string } = {};
+    if (columnHeaders !== '')
+      columnHeaders.split(PIVOT_HEADER_DELIMITER).forEach((c, i) => {
+        const column = this.dataSourceSettings.columns[i].name,
+          // find any row with header
+          element = this._data.find(e => e[column].toString() === c);
+        // translate back to key
+        axes[column] = element ? element[`_${column}`] : c;
+      });
+    if (rowHeaders !== '')
+      rowHeaders.split(PIVOT_HEADER_DELIMITER).forEach((r, i) => {
+        const column = this.dataSourceSettings.rows[i].name,
+          element = this._data.find(e => e[column] === r);
+        axes[column] = element ? element[`_${column}`] : r;
+      });
+    return axes;
+  }
+  ngOnDestroy() {
+    this.tooltip && this.tooltip.destroy();
+    this.pivot && this.pivot.destroy();
+    super.ngOnDestroy();
+  }
+}

package/src/lib/reports/cube/usage.component.ts

@@ -0,0 +1,34 @@
+import { OnInit, ViewContainerRef, Component, Injector } from "@angular/core";
+import { ReportRef } from "../report-ref";
+import { BizDoc } from "../../core/decorators";
+import { UsagePivotComponent } from "./usage-pivot.component";
+import { UsageChartComponent } from "./usage-chart.component";
+import { Args, Item, Options } from "./usage-base";
+import { ReportComponent } from "../../core/base";
+
+
+@Component({
+    template: ''
+})
+@BizDoc({
+    selector: 'bizdoc-cube-usage'
+})
+export
+  class CubeUsageComponent implements ReportComponent<Item, Args>, OnInit {
+  private _instance: ReportComponent<Item, Args>;
+  constructor(
+    private _injector: Injector,
+    private _ref: ReportRef<Options>,
+        private _vc: ViewContainerRef) { }
+  onBind(data: Item[], args?: Args) {
+    this._instance.onBind(data, args);
+    }
+    ngOnInit(): void {
+        let comp;
+        if (this._ref.options.chartType)
+            comp = UsageChartComponent;
+        else
+        comp = UsagePivotComponent;
+      this._instance = this._vc.createComponent<ReportComponent<Item, Args>>(comp).instance;
+    }
+}