@bizdoc/core 1.14.8 → 1.14.9

package/src/lib/reports/arguments-component.ts

@@ -0,0 +1,73 @@
+import { Component, OnInit, OnDestroy, ViewContainerRef, Injector, Input, Output, EventEmitter, ComponentFactoryResolver } from '@angular/core';
+import { Subject } from 'rxjs';
+import { debounceTime, takeUntil } from 'rxjs/operators';
+import { ArgumentsComponent } from '../core/base';
+import { FieldInfo } from '../core/models';
+import { ReportRef } from './report-ref';
+import { LayoutComponent } from '../core/layout/layout.component';
+import { BizDocComponentFactoryResolver } from '../core/component-factory-resolver';
+import { cleanup } from '../core/functions';
+
+export const ARGUMENTS_DEBOUNCE = 250;
+
+@Component({
+  selector: 'bizdoc-report-arguments',
+  template: ''
+})
+/** report arguments component*/
+export class ReportArgumentsComponent implements OnInit, OnDestroy {
+  @Input() reportRef: ReportRef;
+  @Input() template: string;
+  @Input() arguments: FieldInfo[];
+  @Input() args = {};
+  @Output() argsChange = new EventEmitter<any>();
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    private _injector: Injector,
+    private _container: ViewContainerRef,
+    private _componentFactoryResolver: ComponentFactoryResolver,
+    private _factoryResolver: BizDocComponentFactoryResolver) { }
+
+  ngOnInit(): void {
+    this._container.clear();
+      if (this.template) this._fromTemplate();
+      else this._fromLayout();
+  }
+  /** */
+  private _fromTemplate() {
+    const componentFactory = this._factoryResolver.resolve(this.template);
+    const injector = Injector.create([{ provide: ReportRef, useValue: this.reportRef }], this._injector);
+    const componentRef = this._container.createComponent(componentFactory, 0, injector);
+    const form = (componentRef.instance as ArgumentsComponent<any>).form;
+    form.patchValue(this.args, { emitEvent: false });
+     form.valueChanges.pipe(debounceTime(ARGUMENTS_DEBOUNCE),
+      takeUntil(this._destroy)).subscribe(c => {
+        if (form.valid) {
+          cleanup(c);
+          this.args = c;
+          this.argsChange.emit(c);
+        }
+      });
+  }
+  /** */
+  private _fromLayout() {
+    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(LayoutComponent);
+    const injector = Injector.create([], this._injector);
+    const componentRef = this._container.createComponent(componentFactory, 0, injector);
+    const instance = componentRef.instance;
+    instance.fields = this.arguments;
+    instance.model = this.args;
+    instance.create();
+    instance.modelChange.pipe(debounceTime(ARGUMENTS_DEBOUNCE),
+      takeUntil(this._destroy)).subscribe(c => {
+        if (instance.valid) {
+          this.args = c;
+          this.argsChange.emit(c);
+        }
+      });
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

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

@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import { BizDoc } from '../../core/decorators';
+import { ViewContainerRef } from '@angular/core';
+import { CubeDocumentsTableComponent } from './table-documents.component';
+import { CubeDocumentsGridComponent } from './grid-documents.component';
+import { ReportRef } from '../report-ref';
+import { Injector } from '@angular/core';
+import { ReportComponent } from '../../core/base';
+
+@Component({
+  template: ''
+})
+@BizDoc({
+  selector: 'bizdoc-documents'
+})
+export class CubeDocumentsComponent implements ReportComponent<Model>, OnInit {
+    private _instance: ReportComponent<Model>;
+  constructor(
+    private _injector: Injector,
+    private _ref: ReportRef<Options>,
+    private _vc: ViewContainerRef) {
+  }
+    onBind(data: Model[], args?: any) {
+      this._instance.onBind(data, args);
+    }
+  ngOnInit(): void {
+    let comp;
+    if (this._ref.options.group)
+      comp = CubeDocumentsGridComponent;
+    else comp = CubeDocumentsTableComponent;
+    this._instance = this._vc.createComponent < ReportComponent<Model>>(comp, { injector: this._injector }).instance;
+  }
+}
+export interface Model {
+  id: number;
+  number: string;
+  subject: string;
+  stateId: string;
+  userId: string;
+  userName: string;
+  value: number;
+  total: number;
+  formId: string;
+  currencyCode: string;
+}
+export interface Options {
+  cube?: string;
+  axes?: string[];
+  group?: string[];
+}

package/src/lib/reports/cube/grid-documents.component.html

@@ -0,0 +1,25 @@
+<ejs-grid [dataSource]="dataSource" (rowSelected)="rowSelected($event)" [pageSettings]="pageSettings"
+          [allowPaging]=false
+          [allowExcelExport]="true"
+          [height]="height"
+          [allowGrouping]=true
+          [allowSorting]=true
+          [groupSettings]="groupSettings">
+  <e-columns>
+    <e-column field="number" [headerText]="'Number'|translate"></e-column>
+    <e-column field="subject" [headerText]="'Subject'|translate"></e-column>
+    <e-column field="stateId" [headerText]="'Status'|translate">
+      <ng-template #template let-data>{{data.stateId | state}}</ng-template>
+    </e-column>
+    <e-column field="date" [headerText]="'Date'|translate">
+      <ng-template #template let-data>{{data.date | amDateFormat: 'lll'}}</ng-template>
+    </e-column>
+    <e-column field="formId" [headerText]="'Form'|translate">
+      <ng-template #template let-data>{{data.formId | form}}</ng-template>
+    </e-column>
+    <e-column field="userName" [headerText]="'Name'|translate">
+    </e-column>
+    <e-column field="total" [headerText]="'Value'|translate" textAlign="Right" [format]="valueFormat">
+    </e-column>
+  </e-columns>
+</ejs-grid>

package/src/lib/reports/cube/grid-documents.component.ts

@@ -0,0 +1,67 @@
+import { Component, ViewChild, OnDestroy } from '@angular/core';
+import { Observable, forkJoin, Subject } from 'rxjs';
+import { tap, takeUntil } from 'rxjs/operators';
+import { NumberFormatOptions } from '@syncfusion/ej2-base';
+import { GridComponent, Grid, GroupSettingsModel, RowSelectEventArgs, PageSettingsModel } from '@syncfusion/ej2-angular-grids';
+import { ReportComponent } from '../../core/base';
+import { CubeService } from '../../cube/cube.service';
+import { SessionService } from '../../core/session.service';
+import { AccountService } from '../../core/account.service';
+import { DocumentInfo } from '../../core/info/document-info.service';
+import { ReportRef } from '../report-ref';
+import { Model, Options } from './documents.component';
+
+@Component({
+  templateUrl: './grid-documents.component.html'
+})
+export class CubeDocumentsGridComponent implements ReportComponent<Model>, OnDestroy {
+  @ViewChild(GridComponent) grid: Grid;
+  readonly groupSettings: GroupSettingsModel = {};
+  readonly pageSettings: PageSettingsModel = {};
+  readonly valueFormat: NumberFormatOptions;
+  dataSource: Model[];
+  height: number;
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    ref: ReportRef<Options>,
+    private _info: DocumentInfo,
+    session: SessionService,
+    private _accounts: AccountService,
+    service: CubeService) {
+    const { cube: name, group } = ref.options;
+    this.groupSettings.columns = group || ['userName'];
+    const cube = name ? session.profile.cubes.find(c => c.name === name) : session.profile.cubes[0];
+    this.valueFormat = {
+      format: 'C',
+      currency: cube.currencyCode || service.currencyCode,
+      maximumFractionDigits: service.fractionDigits
+    }
+    ref.resize.
+      pipe(takeUntil(this._destroy)).
+      subscribe(d => this.height = d.height - 107);
+    ref.exporting().
+      pipe(takeUntil(this._destroy)).
+      subscribe(e => {
+        e.cancel = true;
+        const report = session.profile.reports.find(r => r.name === ref.name);
+        this.grid && this.grid.excelExport({ fileName: `${report.title}.xlsx` });
+      });
+  }
+  onBind(data: Model[]) {
+    if (data.length) {
+      const observables: Observable<any>[] = data.map(r =>
+        this._accounts.get(r.userId).pipe(tap(u => r.userName = u.name)));
+      forkJoin(observables).subscribe(() =>
+        this.dataSource = data);
+    }
+    else this.dataSource = [];
+  }
+  rowSelected(evt: RowSelectEventArgs) {
+    const { id } = evt.data as Model;
+    this._info.open(id);
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/reports/cube/table-documents.component.css

@@ -0,0 +1,18 @@
+/*::ng-deep tbody tr {
+  cursor: pointer;
+}
+*/
+
+table {
+  width: 100%
+}
+
+td.figure{
+    text-align: right
+}
+.document-state {
+  border-radius: 2px 3px;
+  padding: 4px;
+  border-width: 1px;
+  border-style: solid;
+}

package/src/lib/reports/cube/table-documents.component.html

@@ -0,0 +1,30 @@
+<table mat-table matSort [dataSource]="dataSource" [@list]="PAGE_SIZE">
+  <ng-container matColumnDef="number">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</th>
+    <td mat-cell *matCellDef="let element"> <a (click)="open(element.id)">{{element.number}}</a> </td>
+  </ng-container>
+  <ng-container matColumnDef="subject">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</th>
+    <td mat-cell *matCellDef="let element"> {{element.subject}} </td>
+  </ng-container>
+  <ng-container matColumnDef="userId">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'Name' | translate}}</th>
+    <td mat-cell *matCellDef="let element">
+      <bizdoc-identity-name [identity]="element.userId" [by]="element.byId"></bizdoc-identity-name>
+    </td>
+  </ng-container>
+  <ng-container matColumnDef="stateId">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'Status' | translate}}</th>
+    <td mat-cell *matCellDef="let element"> <span class="document-state" [style.color]="element.stateId|state : 'color'" [style.borderColor]="element.stateId|state : 'color'">{{element.stateId | state}}</span> </td>
+  </ng-container>
+  <ng-container matColumnDef="value">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'Value' | translate}}</th>
+    <td mat-cell *matCellDef="let element" class="figure">
+      {{element.value | currency : (element.currencyCode || DEFAULT_CURRENCY) : 'symbol' : CURRENCY_FORMAT }}
+      <mat-icon *ngIf="element.partial" [bizdocTooltip]="element.total | currency : element.currencyCode : 'symbol' : CURRENCY_FORMAT">error_outline</mat-icon>
+    </td>
+  </ng-container>
+  <tr mat-header-row *matHeaderRowDef="displayColumns"></tr>
+  <tr mat-row [@item] *matRowDef="let element; columns: displayColumns;"></tr>
+</table>
+<mat-paginator [pageSize]="PAGE_SIZE" hidePageSize showFirstLastButtons [style.display]="paging ? '' : 'none'"></mat-paginator>

package/src/lib/reports/cube/table-documents.component.ts

@@ -0,0 +1,46 @@
+import { Component, ViewChild } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatSort } from '@angular/material/sort';
+import { MatPaginator } from '@angular/material/paginator';
+import { ReportComponent } from '../../core/base';
+import { CubeService } from '../../cube/cube.service';
+import { SessionService } from '../../core/session.service';
+import { DocumentInfo } from '../../core/info/document-info.service';
+import { listAnimation, itemAnimation } from '../../core/animations';
+import { ReportRef } from '../report-ref';
+import { Model, Options,  } from './documents.component';
+
+const PAGE_SIZE = 12;
+
+/** */
+@Component({
+  templateUrl: './table-documents.component.html',
+  styleUrls: ['./table-documents.component.css'],
+  animations: [listAnimation, itemAnimation]
+})
+export class CubeDocumentsTableComponent implements ReportComponent<Model> {
+  PAGE_SIZE = PAGE_SIZE;
+  readonly displayColumns = ['number', 'subject', 'stateId', 'userId', 'value'];
+  readonly CURRENCY_FORMAT = this._service.digitsInfo;
+  paging = true;
+  readonly DEFAULT_CURRENCY: string;
+  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  dataSource: MatTableDataSource<any>;
+  constructor(ref: ReportRef<Options>, private _info: DocumentInfo,
+    session: SessionService,
+    private _service: CubeService) {
+    const { cube: name } = ref.options;
+    const cube = name ? session.profile.cubes.find(c => c.name === name) : session.profile.cubes[0];
+    this.DEFAULT_CURRENCY = cube.currencyCode || this._service.currencyCode;
+  }
+  onBind(data: Model[]) {
+    this.dataSource = new MatTableDataSource(data);
+    this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
+    this.paging = data.length > PAGE_SIZE;
+  }
+  open(id: number) {
+    this._info.open(id);
+  }
+}

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

@@ -0,0 +1,3 @@
+<bizdoc-cube-filter [cube]="cube"
+                    [axes]="values"
+                    (axesChange)="valuesChange($event)"></bizdoc-cube-filter>

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

@@ -0,0 +1,55 @@
+import { Component, OnInit } from "@angular/core";
+import { FormBuilder, FormGroup } from "@angular/forms";
+import { ArgumentsComponent } from "../../core/base";
+import { BizDoc } from "../../core/decorators";
+import { isArray } from "../../core/functions";
+import { SessionService } from "../../core/session.service";
+import { ReportRef } from "../report-ref";
+import { Args, Options } from "./usage-base";
+
+/** */
+@Component({
+  templateUrl: 'usage-args.component.html'
+})
+@BizDoc({
+  selector: 'bizdoc-cube-arguments'
+})
+export
+  class UsageReportArgs implements OnInit, ArgumentsComponent<Args> {
+  form: FormGroup;
+  exclude: string[] = [];
+  cube: string;
+  values: Args;
+  constructor(ref: ReportRef<Options>,
+    private _fb: FormBuilder,
+    private _session: SessionService) {
+    const { cube: name, xAxis, series, exclude } = ref.options;
+    this.cube = name;
+    if (xAxis) {
+      if (isArray(xAxis)) this.exclude = [...xAxis];
+      else this.exclude.push(xAxis);
+    }
+    if (series) {
+      if (isArray(series)) this.exclude = this.exclude.concat(series);
+      else this.exclude.push(series);
+    }
+    if (exclude) {
+      if (isArray(exclude)) this.exclude = this.exclude.concat(exclude);
+      else this.exclude.push(exclude);
+    }
+    const cube = this._session.profile.cubes.find(c => c.name == name) || this._session.profile.cubes[0], controls = {};
+
+    const axes = cube.axes.filter(a => !a.hidden && a.selectionMode !== 'None');
+    axes.forEach(a => 
+      controls[a.name] = this._fb.control(null)
+    );
+    this.form = this._fb.group(controls);
+  }
+  ngOnInit(): void {
+    this.values = this.form.value;
+  }
+  valuesChange(axes) {
+    this.form.reset({}, {emitEvent: false});
+    this.form.patchValue(axes);
+  }
+}

package/src/lib/reports/cube/usage-base.ts

@@ -0,0 +1,113 @@
+import { OnDestroy, Directive } from "@angular/core";
+import { Directionality } from "@angular/cdk/bidi";
+import { Subject } from "rxjs";
+import { CubeAxis, Cube, CubeIndex, AxisType, Dimentions, AxesMap } from "../../core/models";
+import { ReportComponent } from "../../core/base";
+import { 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 { ReportRef } from "../report-ref";
+import { RouterImpl } from "../../core/router";
+import { ChartSeriesType } from "@syncfusion/ej2-angular-pivotview";
+
+@Directive() /* required by angular on base class */
+export abstract class UsageReportBase implements ReportComponent<Item, Args>, OnDestroy {
+  static nextId = 0;
+  readonly id = `cube-usage-${UsageReportBase.nextId++}`;
+  readonly enableRtl = this._session.inverse;
+  protected readonly _series: CubeAxis[];
+  protected readonly _cube: Cube;
+  protected readonly _indices: CubeIndex[];
+  protected readonly _yTitle: string;
+  protected readonly _expandAll: boolean;
+  readonly currencyCode: string;
+  height: string;
+  width: string;
+  protected readonly _options: Options;
+  protected readonly _fractionDigits = this._service.fractionDigits;
+  protected _data: {}[];
+  private _args: Args;
+  protected readonly _destroy = new Subject<void>();
+  constructor(protected _reportRef: ReportRef<Options>,
+    protected _type: DatasourceService,
+    protected _service: CubeService,
+    protected _session: SessionService,
+    private _router: RouterImpl,
+    protected _sb: PromptService,
+    protected _dir: Directionality,
+    protected _translate: TranslateService
+  ) {
+    this._options = _reportRef.options;
+    // set defaults
+    const { series, collapse, indices, cube: name, yTitle } = this._options;
+    this._cube = name ? this._session.profile.cubes.find(c => c.name === name) : this._session.profile.cubes[0];
+    if (this._cube.indices)
+      this._indices = indices ?
+        this._cube.indices.filter(i => isArray(indices) ? indices.indexOf(i.name) > -1 : indices === i.name) :
+        this._cube.indices;
+    this._series = series ? this._cube.axes.filter(a => isArray(series) ? series.indexOf(a.name) > -1 : a.name === series) :
+      this._cube.axes.filter(a => a.combination && !a.hidden);
+    this.currencyCode = this._cube.currencyCode;
+    this._expandAll = collapse !== true;
+    this._yTitle = yTitle || this._translate.get('Usage');
+  }
+  ngOnInit(): void {
+    // resize on filter open
+    this._reportRef.resize.
+      subscribe(d => {
+        this.height = `${d.height - 5}px`;
+        this.width = `${d.width}px`;
+        this.onResize(d);
+      });
+    this._reportRef.exporting().subscribe(e => {
+      const { title } = this._session.profile.reports.find(r => r.name === this._reportRef.name);
+      e.cancel = true;
+      this._service.nameOf(this._args, this._cube.name).
+        subscribe(o =>
+          this.onExport(o ? `${title} ${o}` : title));
+    });
+  }
+  abstract onExport(name: string);
+  abstract onResize(dim?: Dimentions);
+  abstract onData(data: Item[]);
+  onBind(result: Item[], args?: Args) {
+    this._args = args;
+    this.onData(result);
+  }
+  protected browse(paxes: { [axis: string]: AxisType }, index?: string) {
+    const { scope, filters } = this._options;
+    const axes = { ...filters, ...this._args, ...paxes };
+    this._router.navigate(['cube', this._cube.name, 'explore'],
+      {
+        queryParams: axes,
+        state: { scope, index }
+      });
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+export type Item = {
+  [name: string]: (string | number)
+} & {
+  usage?: number;
+}
+
+export type Options = {
+  xAxis?: string[] | string;
+  cube?: string;
+  exclude: string[];
+  yTitle?: string;
+  indices?: string[] | string;
+  series?: string[] | string;
+  filters?: AxesMap;
+  scope?: 'patterns' | 'positions';
+  chartType?: ChartSeriesType;
+  collapse?: boolean;
+};
+
+export interface Args { [axis: string]: string }

package/src/lib/reports/cube/usage-browse.component.exp.ts

@@ -0,0 +1,93 @@
+import { Component, Inject, ViewChild, InjectionToken, OnDestroy, OnInit } from "@angular/core";
+import { MatTableDataSource } from "@angular/material/table";
+import { MatSort } from "@angular/material/sort";
+import { MatPaginator } from "@angular/material/paginator";
+import { MediaObserver } from "@angular/flex-layout";
+import { Directionality } from "@angular/cdk/bidi";
+import { ESCAPE } from "@angular/cdk/keycodes";
+import { Overlay } from "@angular/cdk/overlay";
+import { ComponentPortal } from "@angular/cdk/portal";
+import { merge, Subject } from "rxjs";
+import { filter, takeUntil } from "rxjs/operators";
+import { ExploreItemComponent } from "../../core/base";
+import { FieldInfo } from "../../core/models";
+import { CubeService } from "../../cube/cube.service";
+import { PromptService } from "../../core/prompt.service";
+import { BizDocComponentFactoryResolver } from "../../core/component-factory-resolver";
+
+export const BROWSE_DATA = new InjectionToken<BrowseData>('usage_browse');
+
+const PAGE_SIZE = 10, MOBILE_PAGE_SIZE = 10;
+/** */
+@Component({
+  templateUrl: 'usage-browse.component.html',
+  styleUrls: ['usage-browse.component.scss']
+})
+export class UsageReportBrowse implements OnInit, OnDestroy {
+  PAGE_SIZE = PAGE_SIZE;
+  paging = true;
+  dataSource: MatTableDataSource<any>;
+  @ViewChild(MatSort, {static: true}) sort: MatSort;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  readonly CURRENCY_CODE = this._data.currencyCode || this._service.currencyCode;
+  readonly selectable = this._data.template !== undefined;
+  readonly columns: FieldInfo[];
+  readonly displayedColumns: string[];
+  readonly CURRENCY_FORMAT = this._service.digitsInfo;
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    @Inject(BROWSE_DATA) private _data: BrowseData,
+    private _service: CubeService,
+    private _dir: Directionality,
+    private _fr: BizDocComponentFactoryResolver,
+    media: MediaObserver,
+    private _sb: PromptService,
+    private _overlay: Overlay) {
+    const columns = _data.columns.filter(c => !c.hidden);
+    this.columns = columns;
+    this.displayedColumns = columns.map(c => c.name);
+    media.asObservable().pipe(takeUntil(this._destroy)).subscribe(m => 
+      this.PAGE_SIZE = m[0].mqAlias === 'xs' ? MOBILE_PAGE_SIZE : PAGE_SIZE
+    );
+  }
+  ngOnInit(): void {
+    this.dataSource = new MatTableDataSource<any>(this._data.data);
+    this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
+    this.paging = this._data.data.length > PAGE_SIZE;
+  }
+  expand(item: any) {
+    const keys = this._data.columns.filter(f => f.key).map(f => item[f.name]);
+    if (!this._data.template) return;
+    const comp = this._fr.component(this._data.template);
+    this._service.item(this._data.cube, this._data.axes, keys).subscribe(r => {
+      const oRef = this._overlay.create({
+        hasBackdrop: true,
+        panelClass: 'info-panel',
+        disposeOnNavigation: true,
+        backdropClass: 'cdk-overlay-transparent-backdrop',
+        positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
+        direction: this._dir.value,
+        maxHeight: '95vh',
+        maxWidth: '95vw'
+      });
+      const portal = new ComponentPortal(comp);
+      const compRef = oRef.attach(portal);
+      (compRef.instance as ExploreItemComponent<any>).onBind(r);
+      merge(oRef.backdropClick(), oRef.keydownEvents().pipe(filter(k => k.keyCode === ESCAPE))).subscribe(() => oRef.detach());
+    }, () => this._sb.error());
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+
+export interface BrowseData {
+  cube: string;
+  axes: { [axis: string]: (string | number) };
+  data: any[];
+  columns: FieldInfo[];
+  template?: string;
+  currencyCode?: string;
+}

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

@@ -0,0 +1,27 @@
+<!--<table mat-table matSort [dataSource]="dataSource" style="width: 100%">
+  <ng-container [matColumnDef]="c.name" *ngFor="let c of columns">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{c.label || c.name}}</th>
+    <td mat-cell *matCellDef="let element" [class.figure]="c.type === 'Currency'">
+      <div [ngSwitch]="c.type">
+        <span *ngSwitchCase="'Date'">
+          {{element[c.name] | amCalendar}}
+        </span>
+        <span *ngSwitchCase="'Number'">
+          {{element[c.name] | number }}
+        </span>
+        <span *ngSwitchCase="'Currency'">
+          {{element[c.name] | currency : (element.currencyCode || CURRENCY_CODE) : 'symbol' : CURRENCY_FORMAT }}
+        </span>
+        <span *ngSwitchCase="'Boolean'">
+          <mat-checkbox [checked]="element.model[c.name]" disabled="true"></mat-checkbox>
+        </span>
+        <span *ngSwitchDefault>
+          {{element[c.name] }}
+        </span>
+      </div>
+    </td>
+  </ng-container>
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let element; columns: displayedColumns;" (click)="expand(element)" [class.selectable]="selectable"></tr>
+</table>
+<mat-paginator #paginator [pageSize]="PAGE_SIZE" hidePageSize showFirstLastButtons [style.display]="paging ? '' : 'none'"></mat-paginator>-->

package/src/lib/reports/cube/usage-browse.component.scss

@@ -0,0 +1,24 @@
+.selectable {
+  cursor: pointer;
+}
+
+table {
+  width: 100%;
+  background: none;
+
+  td {
+    padding: 0 4px 0 4px;
+
+    &.figure {
+      text-align: right;
+    }
+
+    &:last-of-type {
+      padding-right: 8px;
+    }
+
+    &:first-of-type {
+      padding-left: 8px;
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+<!--<ejs-pivotview [width]=width
+               [id]=id
+               (dataBound)='dataBound($event)'
+               [height]=height
+               [chartSettings]=chartSettings
+               [displayOption]=displayOption
+               [dataSourceSettings]=dataSourceSettings
+               spinnerTemplate=""
+               [allowExcelExport]=true
+               [currencyCode]=currencyCode
+               [enableRtl]=enableRtl></ejs-pivotview>-->